diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ee797116d..a7ab093ff 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -5,8 +5,9 @@ name: CI
 # runs locally. A lane is added there, never here.
 #
 #   plan ─┬─► gates (matrix)
-#         ├─► test (matrix) ─► skip-budget
-#         └─► build ─┬─► verify (matrix)
+#         ├─► test (matrix) ──┬─► skip-budget
+#         └─► build ─┬────────┘
+#                    ├─► verify (matrix)
 #                    └─► site ─► smoke
 #                                       all ─► verdict   (the required check)
 #
@@ -202,8 +203,8 @@ jobs:
   # One budget over every lane's report: a test that moves from one lane to
   # another must not change the count.
   skip-budget:
-    needs: [plan, test]
-    if: ${{ !cancelled() && needs.plan.outputs.skipBudget == 'true' && needs.test.result == 'success' }}
+    needs: [plan, test, build]
+    if: ${{ !cancelled() && needs.plan.outputs.skipBudget == 'true' && needs.test.result == 'success' && (needs.build.result == 'success' || needs.build.result == 'skipped') }}
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
@@ -225,6 +226,8 @@ jobs:
     steps:
       - uses: actions/checkout@v6
       - uses: ./.github/actions/setup
+        with:
+          browser: chromium
 
       - name: Build core
         env:
@@ -241,12 +244,32 @@ jobs:
           EXOJS_REQUIRE_PRODUCTION_BUILD: '1'
         run: pnpm test:production-stripping
 
+      - name: Verify the packed Core, its runtime subpaths and the legacy shims against the built dist
+        env:
+          EXOJS_REQUIRE_PRODUCTION_BUILD: '1'
+        run: pnpm test:release-dist --reporter=minimal --reporter=junit --outputFile.junit=./test-results/build.junit.xml
+
+      - name: Keep the JUnit report for the skip budget
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v7
+        with:
+          name: junit-build
+          path: test-results/*.junit.xml
+          retention-days: 1
+          if-no-files-found: ignore
+
+      - name: Verify the built ESM tree through a browser import map
+        run: pnpm test:esm-importmap
+
       - uses: actions/upload-artifact@v7
         with:
           name: dist
+          # The demo-assets build copies its standard media into media/, which
+          # the package exports and packs; the verify jobs pack from this tree.
           path: |
             dist/
             packages/*/dist/
+            packages/exojs-demo-assets/media/
           retention-days: 1
           if-no-files-found: error
 
@@ -272,21 +295,42 @@ jobs:
     if: ${{ !cancelled() && needs.plan.outputs.site == 'true' && needs.build.result == 'success' }}
     runs-on: ubuntu-latest
     timeout-minutes: 20
+    outputs:
+      # A re-run of failed jobs keeps this job's earlier attempt, so the smoke
+      # and the publisher find the candidate by this name, not by recomputing it.
+      candidate: site-${{ steps.channel.outputs.channel }}-${{ github.sha }}-${{ github.run_attempt }}
     steps:
       - uses: actions/checkout@v6
       - uses: ./.github/actions/setup
         with:
           dist: 'true'
 
+      # main builds Stable at /ExoJS/, next builds Next at /ExoJS/next/ (a pull
+      # request builds the channel of the branch it targets); any other ref
+      # builds Stable. The table lives in scripts/pages/site-channel.ts.
+      - id: channel
+        env:
+          SITE_REF: ${{ github.event_name == 'pull_request' && github.base_ref || github.ref_name }}
+        run: node scripts/pages/site-channel.ts >> "$GITHUB_OUTPUT"
+
       # Typechecks the site against the published entry points, so it needs
       # the dist the build job produced.
       - run: pnpm gates site
 
       - env:
           EXOJS_PACKAGE_PATH: ..
+          EXOJS_SITE_CHANNEL: ${{ steps.channel.outputs.channel }}
+          EXOJS_SITE_BASE: ${{ steps.channel.outputs.base }}
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
         run: pnpm site:build
 
+      # The tree must match its own site-build.json, carry this commit, channel
+      # and base, contain no links or special files and fit the site budget.
+      - name: Verify the site candidate
+        env:
+          SITE_CHANNEL: ${{ steps.channel.outputs.channel }}
+        run: node scripts/pages/channel-artifact.ts verify --dir site/dist --channel "$SITE_CHANNEL" --sha "$GITHUB_SHA"
+
       - name: Upload tooling logs on failure
         if: ${{ failure() }}
         uses: actions/upload-artifact@v7
@@ -297,12 +341,14 @@ jobs:
           include-hidden-files: true
           if-no-files-found: warn
 
-      # Deploy Pages ships exactly this artifact; it builds nothing itself.
+      # Deploy Pages ships exactly this artifact; it builds nothing itself. A
+      # push to main or next is a publishable channel candidate and is kept for
+      # 90 days, so the publisher never depends on a short-lived download.
       - uses: actions/upload-artifact@v7
         with:
-          name: site-dist-${{ github.sha }}
+          name: site-${{ steps.channel.outputs.channel }}-${{ github.sha }}-${{ github.run_attempt }}
           path: site/dist/
-          retention-days: 1
+          retention-days: ${{ github.event_name == 'push' && 90 || 1 }}
           if-no-files-found: error
 
   # Every catalog example through the real playground route, against the site
@@ -321,13 +367,21 @@ jobs:
       - uses: ./.github/actions/setup
         with:
           browser: chromium
+      # The exact candidate tree, served at the base its site-build.json names.
       - uses: actions/download-artifact@v8
         with:
-          name: site-dist-${{ github.sha }}
+          name: ${{ needs.site.outputs.candidate }}
           path: site/dist
 
       - run: pnpm test:examples:smoke --renderer webgl2 ${{ needs.plan.outputs.smokeSample == 'true' && '--sample' || '' }}
 
+      # The playground shell around the examples: console capture across the
+      # preview iframe and the Output panel's layouts, and the Asset Browser's
+      # previews, cancelled loads and generated snippets. Runs after a failed
+      # smoke too, so one run reports both.
+      - run: pnpm test:playground:e2e
+        if: ${{ !cancelled() }}
+
       - name: Keep the smoke report
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v7
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
index d39beba64..797f76043 100644
--- a/.github/workflows/deploy-pages.yml
+++ b/.github/workflows/deploy-pages.yml
@@ -1,83 +1,125 @@
 name: Deploy Pages
 
-# Deploys the site EXACTLY as CI built and validated it — this workflow builds
-# no source code. CI's `site` job (and a release's `prepare` job) runs the site
-# gates and `site:build` and uploads `site/dist/**` as `site-dist-<sha>`; here
-# that same artifact is downloaded from the run that triggered this one and
-# handed to Pages unchanged.
+# The one publisher of the project site. GitHub Pages serves a single tree, so
+# every deployment carries both channels: Stable at /ExoJS/ and Next at
+# /ExoJS/next/, each exactly as a green CI push to main or next (or a stable
+# Release) built and smoked it. This workflow builds no site code.
 #
-# The defect this prevents: the workflow used to check the sources out and
-# rebuild the library and the site itself, so what went live was a second build
-# that no gate had ever seen. A green CI run said nothing about the deployed
-# bytes.
+# The triggering run is only a wake-up call. On every start the publisher
+# re-decides BOTH channels from GitHub's own metadata (scripts/pages/
+# select-channels.ts): each channel gets the newest qualified candidate on its
+# branch's current history, or keeps what is already published. A queued or
+# re-run event can therefore neither roll a channel back nor drop the other
+# channel's update, and a green run without a site candidate changes nothing.
 #
-# Fail-closed by construction: there is no `workflow_dispatch` path, because a
-# manual run has no triggering run to read the artifact from. If the artifact is
-# missing or belongs to a different commit, the download step fails and nothing
-# is deployed. To re-deploy, re-run the CI workflow for the commit.
+# Trust: only successful same-repository push runs of CI (main/next) and
+# stable Release tags qualify; a pull request, a fork or a manual dispatch
+# never does. Candidates are downloaded by the trusted scripts of the
+# default-branch checkout below, never executed, and checked against the
+# digest GitHub reports, their own site-build.json and the archive rules
+# before anything is composed. Any doubt deploys nothing and leaves the live
+# site as it is.
+#
+# A deployment also keeps its composed tree (the Pages artifact) and its
+# channels.json for 90 days, so a channel whose candidate expired can be
+# carried over unchanged from the last published snapshot.
 
 on:
   workflow_run:
     workflows: ['Release', 'CI']
     types: [completed]
 
-permissions:
-  contents: read
-  # Reading an artifact from ANOTHER workflow run needs `actions: read` plus an
-  # explicit token on the download step.
-  actions: read
-  pages: write
-  id-token: write
+permissions: {}
 
+# One queue for the whole site, and a running deployment is never cancelled.
+# Ordering does not rest on this: each run re-decides both channels when it
+# starts.
 concurrency:
-  group: pages-${{ github.event.workflow_run.head_sha }}
-  cancel-in-progress: true
+  group: pages-combined
+  cancel-in-progress: false
 
 jobs:
-  deploy:
-    name: Deploy to GitHub Pages
+  compose:
+    name: Compose Stable and Next
     if: >-
       ${{
         github.event_name == 'workflow_run' &&
         github.event.workflow_run.conclusion == 'success' &&
-        (
-          github.event.workflow_run.name == 'Release' ||
-          (
-            github.event.workflow_run.name == 'CI' &&
-            github.event.workflow_run.event == 'push' &&
-            github.event.workflow_run.head_branch == 'main'
-          )
-        )
+        github.event.workflow_run.event == 'push' &&
+        github.event.workflow_run.repository.full_name == github.repository &&
+        github.event.workflow_run.head_repository.full_name == github.repository
       }}
     runs-on: ubuntu-latest
-    timeout-minutes: 10
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+    timeout-minutes: 30
+    permissions:
+      contents: read
+      # Listing runs and reading artifacts of other workflow runs.
+      actions: read
+    outputs:
+      deploy: ${{ steps.select.outputs.deploy }}
     steps:
-      # `run-id` pins the download to the exact run that triggered this one, and
-      # the commit in the artifact name pins it to that run's commit — an older
-      # or unrelated build cannot be picked up. A missing artifact fails here.
-      - name: Download validated site artifact
-        uses: actions/download-artifact@v8
+      # The publisher's own scripts, from the default branch - never from a
+      # candidate. Dependency-free TypeScript that node strips: no install.
+      - uses: actions/checkout@v6
         with:
-          name: site-dist-${{ github.event.workflow_run.head_sha }}
-          run-id: ${{ github.event.workflow_run.id }}
-          github-token: ${{ github.token }}
-          path: site-dist
+          ref: ${{ github.event.repository.default_branch }}
+          persist-credentials: false
+          sparse-checkout-cone-mode: false
+          sparse-checkout: |
+            /.nvmrc
+            /scripts/pages/
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+
+      - name: Select both channels
+        id: select
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+          TRIGGER_RUN_ID: ${{ github.event.workflow_run.id }}
+        run: node scripts/pages/select-channels.ts --out "$RUNNER_TEMP/selection.json"
 
-      - name: Verify the artifact carries a built site
-        run: |
-          test -f site-dist/index.html || {
-            echo "::error::site-dist-${{ github.event.workflow_run.head_sha }} has no index.html — refusing to deploy."
-            exit 1
-          }
+      - name: Fetch, verify and compose the channels
+        if: steps.select.outputs.deploy == 'true'
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: >-
+          node scripts/pages/compose-site.ts
+          --selection "$RUNNER_TEMP/selection.json"
+          --work "$RUNNER_TEMP/channels"
+          --out "$RUNNER_TEMP/site"
+          --channels-out "$RUNNER_TEMP/channels-record"
 
       - name: Package for Pages
+        if: steps.select.outputs.deploy == 'true'
         uses: actions/upload-pages-artifact@v5
         with:
-          path: site-dist
+          path: ${{ runner.temp }}/site
+          retention-days: 90
 
+      - name: Keep the deployed pairing
+        if: steps.select.outputs.deploy == 'true'
+        uses: actions/upload-artifact@v7
+        with:
+          name: pages-channels-${{ github.run_id }}
+          path: ${{ runner.temp }}/channels-record/channels.json
+          retention-days: 90
+          if-no-files-found: error
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: compose
+    if: needs.compose.outputs.deploy == 'true'
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
       - name: Deploy
         id: deployment
         uses: actions/deploy-pages@v5
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 5a17d317c..0f457b373 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -81,33 +81,36 @@ jobs:
           pnpm verify:lockstep
           pnpm verify:release-matrix
 
-      - name: Build core, extensions and the site
+      - name: Build core (with its runtime modules), adapters and the site
         env:
           EXOJS_PACKAGE_PATH: ..
+          # A release tag sits on main: its site is the Stable channel.
+          EXOJS_SITE_CHANNEL: stable
         # One line per package: verify:release-matrix checks each against the
         # lockstep list, so a package added without a build line fails there.
         run: |
           pnpm build
-          pnpm --filter @codexo/exojs-particles build
-          pnpm --filter @codexo/exojs-tilemap build
           pnpm --filter @codexo/exojs-tiled build
-          pnpm --filter @codexo/exojs-physics build
-          pnpm --filter @codexo/exojs-tilemap-physics build
-          pnpm --filter @codexo/exojs-lighting build
-          pnpm --filter @codexo/exojs-pathfinding build
-          pnpm --filter @codexo/exojs-audio-fx build
           pnpm --filter @codexo/exojs-aseprite build
           pnpm --filter @codexo/exojs-ldtk build
           pnpm --filter @codexo/exojs-react build
           pnpm --filter create-exo-app build
+          # Not a lockstep package, but the site serves its catalog and media.
+          pnpm --filter @codexo/exojs-demo-assets build
           pnpm site:build
 
-      # Deploy Pages ships the site of a successful release from this artifact.
+      - name: Verify the Stable site candidate
+        env:
+          RELEASE_SHA: ${{ needs.trust.outputs.sha }}
+        run: node scripts/pages/channel-artifact.ts verify --dir site/dist --channel stable --sha "$RELEASE_SHA"
+
+      # Deploy Pages may ship the Stable site of a successful release from this
+      # artifact, and falls back to it when the CI candidate has expired.
       - uses: actions/upload-artifact@v7
         with:
-          name: site-dist-${{ needs.trust.outputs.sha }}
+          name: site-stable-${{ needs.trust.outputs.sha }}-${{ github.run_attempt }}
           path: site/dist/
-          retention-days: 1
+          retention-days: 90
           if-no-files-found: error
 
       # The site build regenerates tracked content with platform-dependent
diff --git a/.gitignore b/.gitignore
index a7ab7f3cf..67d29d11a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,9 @@
 node_modules
 dist/*
 packages/*/dist
+# Assembled from examples/assets by the demo-assets build and archive scripts.
+packages/exojs-demo-assets/media/
+packages/exojs-demo-assets/archives/
 coverage
 __screenshots__
 npm-debug.log*
diff --git a/.prettierignore b/.prettierignore
index 63ab37119..4722a68c0 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,9 +6,15 @@ coverage
 examples/assets/**
 
 # Generated Monaco type shims; their exact shape is pinned by a drift test.
-examples/shared/assets-global.d.ts
 examples/shared/runtime.d.ts
 
+# Generated demo catalog sources and manifest; scripts/generate.ts owns their
+# exact shape and a drift test pins it.
+packages/exojs-demo-assets/src/catalog.generated.ts
+packages/exojs-demo-assets/src/standard.generated.ts
+packages/exojs-demo-assets/manifest.json
+packages/exojs-demo-assets/THIRD_PARTY_NOTICES.md
+
 # Astro's generated cache, and the vendored bundles plus copied example catalog
 # the site serves - none of it authored here.
 site/.astro/**
@@ -17,6 +23,9 @@ site/public/**
 # Generated API reference; the generator owns its shape and a sync gate pins it.
 site/src/content/api/**
 
+# Generated legacy shim packages; `legacy-shims:check` pins them to the generator.
+packages/legacy/**
+
 # The changelog is a historical record with its own gate (`lint:changelog`); its
 # embedded code samples keep the width they were written at.
 CHANGELOG.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d1189c835..355993fb2 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -70,7 +70,9 @@ import type { Extension } from '@codexo/exojs/extensions';
 
 Forbidden: `../x`, `@/x`, bare `core/x`, `@codexo/exojs/src/x`. ESLint enforces this.
 
-How it resolves: each package maps `#*` in its `package.json#imports` to a package-specific source condition (`./src/*.ts`) and to `./dist/esm/*` for consumers. tsc uses `customConditions`, Vitest uses `resolve`/`ssr.resolve.conditions`, and Rollup uses node-resolve `exportConditions` — all pointing `#` at source in-repo. The shipped `.d.ts` keep `#` verbatim and resolve through the package's own imports map, so there is no declaration alias-rewrite step.
+How it resolves: each package maps `#*` in its `package.json#imports` to a package-specific source condition (`./src/*.ts`) and, where the package ships its own tree, to `./dist/esm/*` for consumers. tsc uses `customConditions`, Vitest uses `resolve`/`ssr.resolve.conditions`, and Rolldown uses `resolve.conditionNames` — all pointing `#` at source in-repo. The public `@codexo/exojs` specifiers, including the runtime-module subpaths, map to their sources through `@codexo/exojs-config/typescript/workspace-paths.json` for tsc and through the Vitest aliases.
+
+Core's shipped `.d.ts` keep their own `#` imports verbatim and resolve through the Core imports map. The runtime modules are different: their sources live in `packages/exojs-<module>/` but ship inside the Core tarball under `dist/esm/<subpath>/`, so the build rewrites every specifier that leaves a module (`@codexo/exojs`, a Core subpath, a sibling module, the module's own `#` imports) to a relative path, in the emitted JavaScript and in the declarations alike. The declaration rewrite is AST-based (`scripts/lib/module-specifiers.ts`) and resolves each specifier the way an installed consumer would, through the Core `exports` map.
 
 ## File layout: one file, one primary symbol
 
@@ -106,8 +108,8 @@ An error class never hides inside the file of the class that throws it. A caller
 After one root `pnpm install`, every package builds, tests and packs on its own:
 
 ```bash
-pnpm --filter @codexo/exojs build        # or -particles / -tiled
-pnpm --filter @codexo/exojs-particles test
+pnpm --filter @codexo/exojs build        # Core, including its runtime modules
+pnpm --filter @codexo/exojs-module-particles test
 pnpm --filter @codexo/exojs-tiled pack
 # …or from the package directory:
 pnpm build && pnpm test && pnpm pack
@@ -140,13 +142,15 @@ Prettier owns the mechanical layout: indentation, quotes, semicolons, commas, wr
 
 ## Examples and assets
 
-Example authors use the injected, typed `assets` global directly — no import:
+Examples load their media through the optional content package `@codexo/exojs-demo-assets`, imported like any other dependency:
 
 ```ts
-assets.demo.textures.bunny;
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+
+const ship = this.loader.get(assets.ship);
 ```
 
-The global is installed only inside the controlled example runtimes (Playground, Example/Guide preview, Asset Browser, smoke harness, Full Release harness). It is not part of the engine public API. The canonical catalog is `examples/assets/assets.ts`; `pnpm --filter @codexo/exojs-examples examples:sync` regenerates the `.js` sources and the runtime catalog.
+Each property is a passive descriptor; reading it fetches nothing, and the scene's loader claims and loads it. There is no injected global, so an example copied out of the Playground runs anywhere the package is installed. The media under `examples/assets/` are the authoring source of that package: `packages/exojs-demo-assets/catalog.json` lists what ships, and its generator derives the typed catalog, the manifest, the notices and the packed `media/` tree. The site serves the package beside the engine (`vendor/exojs-demo-assets/`), not the `examples/assets/` tree. `pnpm --filter @codexo/exojs-examples examples:sync` regenerates the `.js` sources.
 
 JSON asset data under `examples/assets/` is committed compact, including Tiled maps/tilesets/templates (`.tmj`, `.tsj`, `.tj`, `.world`) and LDtk documents (`.ldtk`, `.ldtkl`). Run `pnpm assets:compact` after exporting or editing these files. `pnpm assets:compact:check` enforces this in the sync gates. Prettier ignores the asset directory; do not pretty-print large tile arrays. The example catalog `examples/examples.json` remains ordinary repository metadata.
 
@@ -158,7 +162,7 @@ Treat the `.js` as build output that happens to be versioned. It is not linted a
 
 One file is not quite that: `examples/tilemap/worker-streamed-terrain.js` is the only example whose generation is not a plain transpile. Its `?worker` import is inlined at generation time, so the emitted file carries code its source does not, and it stays in `tsconfig.examples.json` for that reason.
 
-`examples/shared/` holds one more generated artifact of a different kind. `runtime.d.ts` is emitted from `runtime.ts` during the same sync, because the Playground editor resolves `@examples/runtime` through a declaration file it fetches from the served snapshot rather than through the implementation. Like `assets-global.d.ts` it is Prettier-ignored and pinned by a drift test rather than by `examples:sync:check`.
+`examples/shared/` holds one more generated artifact of a different kind. `runtime.d.ts` is emitted from `runtime.ts` during the same sync, because the Playground editor resolves `@examples/runtime` through a declaration file it fetches from the served snapshot rather than through the implementation. It is Prettier-ignored and pinned by a drift test rather than by `examples:sync:check`.
 
 ### Guide sources
 
@@ -305,7 +309,8 @@ This policy governs new code and the sites a change already touches. The engine
 
 ## Distribution
 
-- npm packages are **modular and self-contained**: `@codexo/exojs` ships Core only; `@codexo/exojs-particles` and `@codexo/exojs-tiled` ship only their own product. There is no Core `/full` export and no aggregator package.
+- npm packages are **modular and self-contained**: `@codexo/exojs` ships Core and, as opt-in subpaths, the runtime modules (`@codexo/exojs/tilemap`, `/particles`, `/audio-fx`, `/physics`, `/tilemap-physics`, `/lighting`, `/pathfinding`); the root entry never imports them. Adapters such as `@codexo/exojs-tiled` ship only their own product. There is no Core `/full` export and no aggregator package.
+- A runtime module's sources live in `packages/exojs-<module>/` as a private workspace package (`@codexo/exojs-module-<module>`) and are built only by the Core build, which emits them under `dist/esm/<subpath>/`. Every import a module makes of Core or of a sibling module lands on the same file the Core `exports` map names, so a consumer always has exactly one Core instance. The release roles live in `scripts/release/lockstep-packages.ts`.
 - Packages ship `.js` + `.d.ts` + source maps — **never raw `.ts` runtime entries**. The `exports` map is the public interface; the bundler profile is the supported type-resolution target (browser/bundler-first).
 - Extensions are side-effect-free at the root; pass their descriptor to `ApplicationOptions.extensions` to equip an app. There is no global registry.
 - The synchronized offline snapshot (npm tarballs + versioned ESM vendor trees + examples + built site) is the GitHub Full Release archive.
diff --git a/README.md b/README.md
index 9a3919bf4..cfb0e307d 100644
--- a/README.md
+++ b/README.md
@@ -120,16 +120,9 @@ For a bundler-based application:
 npm install --save-exact @codexo/exojs
 ```
 
-The package provides ESM and TypeScript declarations. TypeScript projects resolve the declarations with `"moduleResolution": "bundler"`; `node16` and `nodenext` resolution are not supported. The package also includes script-tag bundles:
+The package provides ESM and TypeScript declarations. TypeScript projects resolve the declarations with `"moduleResolution": "bundler"` or `node16`/`nodenext`; no consumer `paths` mapping or `skipLibCheck` is needed. Since v0.20 the distribution is ESM-only; the prebuilt IIFE script-tag bundles of earlier lines (`exo.iife.js`, `exo.full.iife.js`) are gone. A script-tag consumer uses a module script with an import map against `dist/esm`; see the [v0.20 migration guide](https://exoridus.github.io/ExoJS/en/guide/getting-started/migration-v020/).
 
-| Bundle                  | Contents                                                                                             |
-| ----------------------- | ---------------------------------------------------------------------------------------------------- |
-| `dist/exo.iife.js`      | Core runtime on the `Exo` global                                                                     |
-| `dist/exo.full.iife.js` | Core plus the official runtime extensions except React and tilemap physics, on the same `Exo` global |
-
-Minified variants are provided alongside them. Use one Core instance per application; do not load both bundles into the same page.
-
-The [Full Release ZIP](https://github.com/Exoridus/ExoJS/releases/latest/download/exojs-full.zip) includes a built runtime, examples, and documentation. See [Deployment](https://exoridus.github.io/ExoJS/en/guide/shipping/deployment/) for static hosting and script-tag setup.
+The [Full Release ZIP](https://github.com/Exoridus/ExoJS/releases/latest/download/exojs-full.zip) includes a built runtime, examples, and documentation. See [Deployment](https://exoridus.github.io/ExoJS/en/guide/shipping/deployment/) for static hosting and module-script setup.
 
 ## Performance evidence
 
diff --git a/eslint.config.ts b/eslint.config.ts
index be7fc805a..c43f2b0b2 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -58,6 +58,9 @@ export default defineConfig([
       'coverage/**',
       '**/*.min.*',
       'examples/**/*.js',
+      // Generated forwarder packages, pinned to their generator by
+      // `legacy-shims:check`; no TypeScript program owns them.
+      'packages/legacy/**',
       // Transient fixture directories a suite writes into a scanned tree and
       // removes again. They exist only while that suite runs, so a lint pass
       // that overlaps it would otherwise report files nobody authored.
@@ -1074,6 +1077,11 @@ export default defineConfig([
       'scripts/**/*.mjs',
       'packages/exojs-bench/competitors/*.ts',
       'packages/create-exo-app/bin/*.js',
+      // The demo-assets generators and archive/copy tooling are Node scripts
+      // that belong to no package TypeScript program (the package tsconfigs
+      // cover src/** only), so typed rules have nothing to serve for them.
+      'packages/exojs-demo-assets/scripts/*.ts',
+      'packages/exojs-demo-assets/bin/*.js',
     ],
   }),
 
@@ -1226,8 +1234,6 @@ export default defineConfig([
       globals: {
         ...globals.browser,
         ...globals.es2024,
-        // Injected typed asset catalog (see examples/shared/assets-global.d.ts).
-        assets: 'readonly',
       },
     },
     rules: {
@@ -1243,7 +1249,9 @@ export default defineConfig([
         },
       ],
       eqeqeq: ['error', 'always', { null: 'ignore' }],
-      'no-console': 'error',
+      // The playground shows a preview's console in its Output panel, so a
+      // log line is one of the ways an example explains what just happened.
+      'no-console': 'off',
       // The sync-init() rule (see the engine-source block) is deliberately NOT
       // enabled here yet: most of the catalog still uses the pre-v0.17
       // async `init(loader)` hook and is migrated in the dedicated examples
@@ -1289,8 +1297,6 @@ export default defineConfig([
       globals: {
         ...globals.browser,
         ...globals.es2024,
-        // Injected typed asset catalog (see examples/shared/assets-global.d.ts).
-        assets: 'readonly',
       },
     },
     rules: {
diff --git a/examples/application-scenes/cached-assets-offline.js b/examples/application-scenes/cached-assets-offline.js
index a3bbf1b53..cc70e903e 100644
--- a/examples/application-scenes/cached-assets-offline.js
+++ b/examples/application-scenes/cached-assets-offline.js
@@ -1,7 +1,6 @@
 // Auto-generated from cached-assets-offline.ts - edit the .ts source, not this file.
 import {
   Application,
-  Asset,
   AssetCache,
   AssetCacheMissError,
   Color,
@@ -12,20 +11,19 @@ import {
   Scene,
   Text,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, toggle } from '@examples/runtime';
 const cache = new AssetCache({
   stores: new IndexedDbStore('exojs-playground-offline-demo'),
   policy: new ConnectivityPolicyResolver(),
 });
-const warmAsset = Asset.type('json', assets.demo.inputPrompts.generic.data);
-const coldAsset = Asset.type('json', assets.demo.inputPrompts.keyboardMouse.data);
+const warmAsset = assets.genericInputPromptsAtlas;
+const coldAsset = assets.keyboardMouseInputPromptsAtlas;
 class CachedAssetsScene extends Scene {
   backdrop = new Graphics();
   title = new Text('Offline Asset Lab', { fillColor: Color.white, fontSize: 44 });
-  mode = new Text('Network allowed', { fillColor: new Color(106, 229, 171), fontSize: 28 });
   warmState = new Text('Generic prompts: not warmed', { fillColor: Color.white, fontSize: 25 });
-  result = new Text('Choose an action in the panel.', { fillColor: Color.white, fontSize: 25 });
-  hud;
+  result = new Text('Warm the cache, then request sources online and offline.', { fillColor: Color.white, fontSize: 25 });
   panel;
   busy = false;
   init() {
@@ -35,48 +33,29 @@ class CachedAssetsScene extends Scene {
     this.backdrop.lineColor = new Color(94, 127, 158);
     this.backdrop.drawRoundedRectangle(150, 130, 980, 450, 24);
     this.title.position.set(215, 195);
-    this.mode.position.set(215, 285);
-    this.warmState.position.set(215, 380);
-    this.result.position.set(215, 465);
-    this.hud = mountControls({
-      title: 'Cached Assets Offline',
-      controls: [{ keys: 'Panel', action: 'warm, request, clear, and change network policy' }],
-      status: 'Online policy. Warm the first JSON source, then switch offline.',
-      hint: 'Offline mode changes loader policy; it does not disable your browser connection.',
-    });
-    this.panel = mountControlPanel({ title: 'Cache actions' });
-    this.panel.addButton({
-      label: 'Warm generic prompts',
-      onClick: () => {
-        void this.run('Warm', () => this.app.loader.cacheSource(warmAsset));
-      },
-    });
-    this.panel.addToggle({
-      label: 'Offline policy',
-      value: false,
-      onChange: offline => {
-        this.app.connectivity.mode = offline ? 'offline' : 'online';
-        this.mode.text = offline ? 'Cache only: network forbidden' : 'Network allowed';
-        this.mode.style.fillColor = offline ? new Color(255, 186, 95) : new Color(106, 229, 171);
-        this.hud.setStatus(offline ? 'Offline policy: requests must be in the cache.' : 'Online policy: requests may use the network.');
-      },
-    });
-    this.panel.addButton({
-      label: 'Request warmed source',
-      onClick: () => {
-        void this.request(warmAsset, 'Generic prompts');
-      },
-    });
-    this.panel.addButton({
-      label: 'Request unwarmed source',
-      onClick: () => {
-        void this.request(coldAsset, 'Keyboard prompts');
+    this.warmState.position.set(215, 300);
+    this.result.position.set(215, 385);
+    this.panel = demoPanel({
+      title: 'Cache actions',
+      controls: { offline: toggle('Offline policy', false) },
+      actions: {
+        'Warm generic prompts': () => {
+          void this.run('Warm', () => this.app.loader.cacheSource(warmAsset));
+        },
+        'Request warmed source': () => {
+          void this.request(warmAsset, 'Generic prompts');
+        },
+        'Request unwarmed source': () => {
+          void this.request(coldAsset, 'Keyboard prompts');
+        },
+        'Clear demo cache': () => {
+          void this.run('Clear', () => cache.clear());
+        },
       },
-    });
-    this.panel.addButton({
-      label: 'Clear demo cache',
-      onClick: () => {
-        void this.run('Clear', () => cache.clear());
+      onChange: (key, value) => {
+        if (key === 'offline') {
+          this.app.connectivity.mode = value ? 'offline' : 'online';
+        }
       },
     });
   }
@@ -94,7 +73,6 @@ class CachedAssetsScene extends Scene {
     } catch (error) {
       this.result.text = `${action} failed: ${error instanceof Error ? error.message : String(error)}`;
     } finally {
-      this.hud.setStatus(this.result.text);
       this.busy = false;
     }
   }
@@ -115,24 +93,20 @@ class CachedAssetsScene extends Scene {
           : `${name}: ${error instanceof Error ? error.message : String(error)}`;
     } finally {
       scope.destroy();
-      this.hud.setStatus(this.result.text);
       this.busy = false;
     }
   }
   draw(context) {
     context.render(this.backdrop);
     context.render(this.title);
-    context.render(this.mode);
     context.render(this.warmState);
     context.render(this.result);
   }
   destroy() {
     this.app.connectivity.mode = 'auto';
-    this.hud?.dispose();
     this.panel?.dispose();
     this.backdrop.destroy();
     this.title.destroy();
-    this.mode.destroy();
     this.warmState.destroy();
     this.result.destroy();
     cache.destroy();
@@ -143,6 +117,6 @@ const app = new Application({
   scenes: { CachedAssetsScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(12, 20, 32),
-  loader: { basePath: 'assets/', cache },
+  loader: { cache },
 });
 await app.start(CachedAssetsScene);
diff --git a/examples/application-scenes/cached-assets-offline.ts b/examples/application-scenes/cached-assets-offline.ts
index f31d1d707..adcfeebe8 100644
--- a/examples/application-scenes/cached-assets-offline.ts
+++ b/examples/application-scenes/cached-assets-offline.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   AssetCache,
   AssetCacheMissError,
   Color,
@@ -12,24 +11,23 @@ import {
   Scene,
   Text,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, toggle } from '@examples/runtime';
 
 const cache = new AssetCache({
   stores: new IndexedDbStore('exojs-playground-offline-demo'),
   policy: new ConnectivityPolicyResolver(),
 });
 
-const warmAsset = Asset.type('json', assets.demo.inputPrompts.generic.data);
-const coldAsset = Asset.type('json', assets.demo.inputPrompts.keyboardMouse.data);
+const warmAsset = assets.genericInputPromptsAtlas;
+const coldAsset = assets.keyboardMouseInputPromptsAtlas;
 
 class CachedAssetsScene extends Scene {
   private readonly backdrop = new Graphics();
   private readonly title = new Text('Offline Asset Lab', { fillColor: Color.white, fontSize: 44 });
-  private readonly mode = new Text('Network allowed', { fillColor: new Color(106, 229, 171), fontSize: 28 });
   private readonly warmState = new Text('Generic prompts: not warmed', { fillColor: Color.white, fontSize: 25 });
-  private readonly result = new Text('Choose an action in the panel.', { fillColor: Color.white, fontSize: 25 });
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private readonly result = new Text('Warm the cache, then request sources online and offline.', { fillColor: Color.white, fontSize: 25 });
+  private panel?: { dispose(): void };
   private busy = false;
 
   override init(): void {
@@ -39,49 +37,30 @@ class CachedAssetsScene extends Scene {
     this.backdrop.lineColor = new Color(94, 127, 158);
     this.backdrop.drawRoundedRectangle(150, 130, 980, 450, 24);
     this.title.position.set(215, 195);
-    this.mode.position.set(215, 285);
-    this.warmState.position.set(215, 380);
-    this.result.position.set(215, 465);
+    this.warmState.position.set(215, 300);
+    this.result.position.set(215, 385);
 
-    this.hud = mountControls({
-      title: 'Cached Assets Offline',
-      controls: [{ keys: 'Panel', action: 'warm, request, clear, and change network policy' }],
-      status: 'Online policy. Warm the first JSON source, then switch offline.',
-      hint: 'Offline mode changes loader policy; it does not disable your browser connection.',
-    });
-    this.panel = mountControlPanel({ title: 'Cache actions' });
-    this.panel.addButton({
-      label: 'Warm generic prompts',
-      onClick: () => {
-        void this.run('Warm', () => this.app.loader.cacheSource(warmAsset));
-      },
-    });
-    this.panel.addToggle({
-      label: 'Offline policy',
-      value: false,
-      onChange: offline => {
-        this.app.connectivity.mode = offline ? 'offline' : 'online';
-        this.mode.text = offline ? 'Cache only: network forbidden' : 'Network allowed';
-        this.mode.style.fillColor = offline ? new Color(255, 186, 95) : new Color(106, 229, 171);
-        this.hud.setStatus(offline ? 'Offline policy: requests must be in the cache.' : 'Online policy: requests may use the network.');
-      },
-    });
-    this.panel.addButton({
-      label: 'Request warmed source',
-      onClick: () => {
-        void this.request(warmAsset, 'Generic prompts');
-      },
-    });
-    this.panel.addButton({
-      label: 'Request unwarmed source',
-      onClick: () => {
-        void this.request(coldAsset, 'Keyboard prompts');
+    this.panel = demoPanel({
+      title: 'Cache actions',
+      controls: { offline: toggle('Offline policy', false) },
+      actions: {
+        'Warm generic prompts': () => {
+          void this.run('Warm', () => this.app.loader.cacheSource(warmAsset));
+        },
+        'Request warmed source': () => {
+          void this.request(warmAsset, 'Generic prompts');
+        },
+        'Request unwarmed source': () => {
+          void this.request(coldAsset, 'Keyboard prompts');
+        },
+        'Clear demo cache': () => {
+          void this.run('Clear', () => cache.clear());
+        },
       },
-    });
-    this.panel.addButton({
-      label: 'Clear demo cache',
-      onClick: () => {
-        void this.run('Clear', () => cache.clear());
+      onChange: (key, value) => {
+        if (key === 'offline') {
+          this.app.connectivity.mode = value ? 'offline' : 'online';
+        }
       },
     });
   }
@@ -102,7 +81,6 @@ class CachedAssetsScene extends Scene {
     } catch (error) {
       this.result.text = `${action} failed: ${error instanceof Error ? error.message : String(error)}`;
     } finally {
-      this.hud.setStatus(this.result.text);
       this.busy = false;
     }
   }
@@ -126,7 +104,6 @@ class CachedAssetsScene extends Scene {
           : `${name}: ${error instanceof Error ? error.message : String(error)}`;
     } finally {
       scope.destroy();
-      this.hud.setStatus(this.result.text);
       this.busy = false;
     }
   }
@@ -134,18 +111,15 @@ class CachedAssetsScene extends Scene {
   override draw(context: RenderingContext): void {
     context.render(this.backdrop);
     context.render(this.title);
-    context.render(this.mode);
     context.render(this.warmState);
     context.render(this.result);
   }
 
   override destroy(): void {
     this.app.connectivity.mode = 'auto';
-    this.hud?.dispose();
     this.panel?.dispose();
     this.backdrop.destroy();
     this.title.destroy();
-    this.mode.destroy();
     this.warmState.destroy();
     this.result.destroy();
     cache.destroy();
@@ -157,7 +131,7 @@ const app = new Application({
   scenes: { CachedAssetsScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(12, 20, 32),
-  loader: { basePath: 'assets/', cache },
+  loader: { cache },
 });
 
 await app.start(CachedAssetsScene);
diff --git a/examples/application-scenes/camera-and-view.js b/examples/application-scenes/camera-and-view.js
index 8418d650c..01502f4b9 100644
--- a/examples/application-scenes/camera-and-view.js
+++ b/examples/application-scenes/camera-and-view.js
@@ -89,8 +89,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(CameraViewScene);
diff --git a/examples/application-scenes/camera-and-view.ts b/examples/application-scenes/camera-and-view.ts
index 0770d4f47..401fb5911 100644
--- a/examples/application-scenes/camera-and-view.ts
+++ b/examples/application-scenes/camera-and-view.ts
@@ -110,9 +110,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(CameraViewScene);
diff --git a/examples/application-scenes/camera-basic.js b/examples/application-scenes/camera-basic.js
index 2281216e7..a9f5fa906 100644
--- a/examples/application-scenes/camera-basic.js
+++ b/examples/application-scenes/camera-basic.js
@@ -1,5 +1,6 @@
 // Auto-generated from camera-basic.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class CameraBasicScene extends Scene {
   bunny;
   grid;
@@ -8,7 +9,7 @@ class CameraBasicScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.bunny = new Sprite(this.loader.get('image/ship-a.png'));
+    this.bunny = new Sprite(this.loader.get(assets.ship));
     this.bunny.setAnchor(0.5).setPosition(width / 2, height / 2);
     this.grid = new Graphics();
     this.grid.lineWidth = 1;
@@ -57,8 +58,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(CameraBasicScene);
diff --git a/examples/application-scenes/camera-basic.ts b/examples/application-scenes/camera-basic.ts
index 119e36651..e2384a547 100644
--- a/examples/application-scenes/camera-basic.ts
+++ b/examples/application-scenes/camera-basic.ts
@@ -8,6 +8,7 @@ import {
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class CameraBasicScene extends Scene {
   private bunny!: Sprite;
@@ -19,7 +20,7 @@ class CameraBasicScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.bunny = new Sprite(this.loader.get('image/ship-a.png'));
+    this.bunny = new Sprite(this.loader.get(assets.ship));
     this.bunny.setAnchor(0.5).setPosition(width / 2, height / 2);
 
     this.grid = new Graphics();
@@ -79,9 +80,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(CameraBasicScene);
diff --git a/examples/application-scenes/custom-transition.js b/examples/application-scenes/custom-transition.js
index 3a83f28fc..ea10e28c5 100644
--- a/examples/application-scenes/custom-transition.js
+++ b/examples/application-scenes/custom-transition.js
@@ -147,8 +147,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(MenuScene, { transition: wipe });
diff --git a/examples/application-scenes/custom-transition.ts b/examples/application-scenes/custom-transition.ts
index 1554afb46..ab07bf93b 100644
--- a/examples/application-scenes/custom-transition.ts
+++ b/examples/application-scenes/custom-transition.ts
@@ -202,9 +202,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(MenuScene, { transition: wipe });
diff --git a/examples/application-scenes/loading-screen.js b/examples/application-scenes/loading-screen.js
index 6a8d30dbb..54318ce42 100644
--- a/examples/application-scenes/loading-screen.js
+++ b/examples/application-scenes/loading-screen.js
@@ -1,11 +1,11 @@
 // Auto-generated from loading-screen.ts - edit the .ts source, not this file.
-import { Application, Asset, Assets, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Sprite, Text } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { Application, Assets, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const GameAssets = Assets.from({
-  ship: 'image/ship-a.png',
-  grid: 'image/uv-grid-256.png',
-  ramp: 'image/hue-ramp.png',
-  click: Asset.type('sound', 'audio/ui-click.ogg'),
+  ship: assets.ship,
+  grid: assets.uvGrid256,
+  ramp: assets.hueRamp,
+  click: assets.soundUiClick,
 });
 /**
  * One progress bar for everything the loader is doing, then a hand-over to the
@@ -133,7 +133,6 @@ class BootScene extends Scene {
 class PlayScene extends Scene {
   ship;
   label;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
@@ -146,20 +145,11 @@ class PlayScene extends Scene {
     this.inputs.onTrigger(Keyboard.Space, () => {
       void app.scenes.change(BootScene);
     });
-    this.hud = mountControls({
-      title: 'Loading Progress and Retry',
-      controls: [{ keys: 'Space', action: 'return to the boot scene' }],
-      hint: 'The boot scene follows real loader signals, retries failures, and enters the game after a successful batch.',
-    });
   }
   draw(context) {
     context.render(this.ship);
     context.render(this.label);
   }
-  destroy() {
-    this.hud.dispose();
-    super.destroy();
-  }
 }
 const app = new Application({
   scenes: { BootScene, PlayScene },
@@ -170,8 +160,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(BootScene);
diff --git a/examples/application-scenes/loading-screen.ts b/examples/application-scenes/loading-screen.ts
index ec080fad2..c87c7e601 100644
--- a/examples/application-scenes/loading-screen.ts
+++ b/examples/application-scenes/loading-screen.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   Assets,
   Color,
   FixedResolutionCanvasSizing,
@@ -11,13 +10,13 @@ import {
   Sprite,
   Text,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const GameAssets = Assets.from({
-  ship: 'image/ship-a.png',
-  grid: 'image/uv-grid-256.png',
-  ramp: 'image/hue-ramp.png',
-  click: Asset.type('sound', 'audio/ui-click.ogg'),
+  ship: assets.ship,
+  grid: assets.uvGrid256,
+  ramp: assets.hueRamp,
+  click: assets.soundUiClick,
 });
 
 /**
@@ -170,7 +169,6 @@ class BootScene extends Scene {
 class PlayScene extends Scene {
   private ship!: Sprite;
   private label!: Text;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const app = this.app;
@@ -188,23 +186,12 @@ class PlayScene extends Scene {
     this.inputs.onTrigger(Keyboard.Space, () => {
       void app.scenes.change(BootScene);
     });
-
-    this.hud = mountControls({
-      title: 'Loading Progress and Retry',
-      controls: [{ keys: 'Space', action: 'return to the boot scene' }],
-      hint: 'The boot scene follows real loader signals, retries failures, and enters the game after a successful batch.',
-    });
   }
 
   override draw(context: RenderingContext): void {
     context.render(this.ship);
     context.render(this.label);
   }
-
-  override destroy(): void {
-    this.hud.dispose();
-    super.destroy();
-  }
 }
 
 const app = new Application({
@@ -216,9 +203,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(BootScene);
diff --git a/examples/application-scenes/multi-view-split-screen.js b/examples/application-scenes/multi-view-split-screen.js
index 6992b67e2..ae20c636d 100644
--- a/examples/application-scenes/multi-view-split-screen.js
+++ b/examples/application-scenes/multi-view-split-screen.js
@@ -1,6 +1,19 @@
 // Auto-generated from multi-view-split-screen.ts - edit the .ts source, not this file.
-import { Application, Color, FixedResolutionCanvasSizing, GamepadAxis, Graphics, Keyboard, Scene, Sprite, Text, View } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import {
+  ActionMap,
+  Application,
+  Color,
+  FixedResolutionCanvasSizing,
+  GamepadAxis,
+  Graphics,
+  Keyboard,
+  Scene,
+  Sprite,
+  Text,
+  VectorAction,
+  View,
+} from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class SplitScreenScene extends Scene {
   texture;
   leftView;
@@ -10,24 +23,12 @@ class SplitScreenScene extends Scene {
   labels;
   leftPlayer;
   rightPlayer;
-  move = {
-    a: 0,
-    d: 0,
-    w: 0,
-    s: 0,
-    left: 0,
-    right: 0,
-    up: 0,
-    down: 0,
-  };
-  padMove = [
-    { x: 0, y: 0 },
-    { x: 0, y: 0 },
-  ];
+  leftControls;
+  rightControls;
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.texture = this.loader.get('image/ship-a.png');
+    this.texture = this.loader.get(assets.ship);
     this.leftView = new View(0, 0, width / 2, height).setViewport(0, 0, 0.5, 1);
     this.rightView = new View(0, 0, width / 2, height).setViewport(0.5, 0, 0.5, 1);
     this.divider = new Graphics();
@@ -46,10 +47,6 @@ class SplitScreenScene extends Scene {
       new Text('P1 · WASD / Pad 1', { fillColor: new Color(120, 190, 255), fontSize: 24 }).setPosition(24, 160),
       new Text('P2 · Arrows / Pad 2', { fillColor: new Color(255, 180, 120), fontSize: 24 }).setPosition(width / 2 + 24, 160),
     ];
-    mountControls({
-      title: 'Local Split Screen',
-      hint: 'Move each player to see its camera follow independently. Controllers are optional.',
-    });
     this.leftPlayer = new Sprite(this.texture)
       .setAnchor(0.5)
       .setPosition(-160, 0)
@@ -58,78 +55,34 @@ class SplitScreenScene extends Scene {
       .setAnchor(0.5)
       .setPosition(160, 0)
       .setTint(new Color(255, 180, 120));
-    this.inputs.onActive(Keyboard.A, () => {
-      this.move.a = 1;
-    });
-    this.inputs.onStop(Keyboard.A, () => {
-      this.move.a = 0;
-    });
-    this.inputs.onActive(Keyboard.D, () => {
-      this.move.d = 1;
-    });
-    this.inputs.onStop(Keyboard.D, () => {
-      this.move.d = 0;
-    });
-    this.inputs.onActive(Keyboard.W, () => {
-      this.move.w = 1;
-    });
-    this.inputs.onStop(Keyboard.W, () => {
-      this.move.w = 0;
-    });
-    this.inputs.onActive(Keyboard.S, () => {
-      this.move.s = 1;
-    });
-    this.inputs.onStop(Keyboard.S, () => {
-      this.move.s = 0;
-    });
-    this.inputs.onActive(Keyboard.Left, () => {
-      this.move.left = 1;
-    });
-    this.inputs.onStop(Keyboard.Left, () => {
-      this.move.left = 0;
-    });
-    this.inputs.onActive(Keyboard.Right, () => {
-      this.move.right = 1;
-    });
-    this.inputs.onStop(Keyboard.Right, () => {
-      this.move.right = 0;
-    });
-    this.inputs.onActive(Keyboard.Up, () => {
-      this.move.up = 1;
-    });
-    this.inputs.onStop(Keyboard.Up, () => {
-      this.move.up = 0;
-    });
-    this.inputs.onActive(Keyboard.Down, () => {
-      this.move.down = 1;
-    });
-    this.inputs.onStop(Keyboard.Down, () => {
-      this.move.down = 0;
-    });
-    for (let index = 0; index < 2; index++) {
-      const pad = app.input.gamepads[index];
-      const movement = this.padMove[index];
-      pad.onActive(GamepadAxis.LeftStickX, value => {
-        movement.x = value;
-      });
-      pad.onStop(GamepadAxis.LeftStickX, () => {
-        movement.x = 0;
-      });
-      pad.onActive(GamepadAxis.LeftStickY, value => {
-        movement.y = value;
-      });
-      pad.onStop(GamepadAxis.LeftStickY, () => {
-        movement.y = 0;
-      });
-    }
+    // One map per player: each binds its own keys and reads its own pad slot.
+    this.leftControls = new ActionMap(
+      {
+        move: new VectorAction([
+          { up: Keyboard.W, down: Keyboard.S, left: Keyboard.A, right: Keyboard.D },
+          { x: GamepadAxis.LeftStickX, y: GamepadAxis.LeftStickY },
+        ]),
+      },
+      { gamepad: app.input.gamepads[0] },
+    );
+    this.rightControls = new ActionMap(
+      {
+        move: new VectorAction([
+          { up: Keyboard.Up, down: Keyboard.Down, left: Keyboard.Left, right: Keyboard.Right },
+          { x: GamepadAxis.LeftStickX, y: GamepadAxis.LeftStickY },
+        ]),
+      },
+      { gamepad: app.input.gamepads[1] },
+    );
+    this.inputs.attach(this.leftControls);
+    this.inputs.attach(this.rightControls);
   }
   update(delta) {
     const speed = 300 * delta;
-    this.leftPlayer.move((this.move.d - this.move.a + this.padMove[0].x) * speed, (this.move.s - this.move.w + this.padMove[0].y) * speed);
-    this.rightPlayer.move(
-      (this.move.right - this.move.left + this.padMove[1].x) * speed,
-      (this.move.down - this.move.up + this.padMove[1].y) * speed,
-    );
+    const left = this.leftControls.move.value;
+    const right = this.rightControls.move.value;
+    this.leftPlayer.move(left.x * speed, left.y * speed);
+    this.rightPlayer.move(right.x * speed, right.y * speed);
     this.leftView.setCenter(this.leftPlayer.position.x, this.leftPlayer.position.y);
     this.rightView.setCenter(this.rightPlayer.position.x, this.rightPlayer.position.y);
   }
@@ -155,8 +108,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(SplitScreenScene);
diff --git a/examples/application-scenes/multi-view-split-screen.ts b/examples/application-scenes/multi-view-split-screen.ts
index 26cfcaf5d..e091803bb 100644
--- a/examples/application-scenes/multi-view-split-screen.ts
+++ b/examples/application-scenes/multi-view-split-screen.ts
@@ -1,4 +1,5 @@
 import {
+  ActionMap,
   Application,
   Color,
   FixedResolutionCanvasSizing,
@@ -11,9 +12,10 @@ import {
   Sprite,
   Text,
   type Texture,
+  VectorAction,
   View,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class SplitScreenScene extends Scene {
   private texture!: Texture;
@@ -24,26 +26,14 @@ class SplitScreenScene extends Scene {
   private labels!: Text[];
   private leftPlayer!: Sprite;
   private rightPlayer!: Sprite;
-  private move = {
-    a: 0,
-    d: 0,
-    w: 0,
-    s: 0,
-    left: 0,
-    right: 0,
-    up: 0,
-    down: 0,
-  };
-  private padMove = [
-    { x: 0, y: 0 },
-    { x: 0, y: 0 },
-  ];
+  private leftControls!: ActionMap<{ move: VectorAction }>;
+  private rightControls!: ActionMap<{ move: VectorAction }>;
 
   override init(): void {
     const app = this.app;
     const { width, height } = app;
 
-    this.texture = this.loader.get('image/ship-a.png');
+    this.texture = this.loader.get(assets.ship);
 
     this.leftView = new View(0, 0, width / 2, height).setViewport(0, 0, 0.5, 1);
     this.rightView = new View(0, 0, width / 2, height).setViewport(0.5, 0, 0.5, 1);
@@ -67,11 +57,6 @@ class SplitScreenScene extends Scene {
       new Text('P1 · WASD / Pad 1', { fillColor: new Color(120, 190, 255), fontSize: 24 }).setPosition(24, 160),
       new Text('P2 · Arrows / Pad 2', { fillColor: new Color(255, 180, 120), fontSize: 24 }).setPosition(width / 2 + 24, 160),
     ];
-    mountControls({
-      title: 'Local Split Screen',
-      hint: 'Move each player to see its camera follow independently. Controllers are optional.',
-    });
-
     this.leftPlayer = new Sprite(this.texture)
       .setAnchor(0.5)
       .setPosition(-160, 0)
@@ -81,81 +66,37 @@ class SplitScreenScene extends Scene {
       .setPosition(160, 0)
       .setTint(new Color(255, 180, 120));
 
-    this.inputs.onActive(Keyboard.A, () => {
-      this.move.a = 1;
-    });
-    this.inputs.onStop(Keyboard.A, () => {
-      this.move.a = 0;
-    });
-    this.inputs.onActive(Keyboard.D, () => {
-      this.move.d = 1;
-    });
-    this.inputs.onStop(Keyboard.D, () => {
-      this.move.d = 0;
-    });
-    this.inputs.onActive(Keyboard.W, () => {
-      this.move.w = 1;
-    });
-    this.inputs.onStop(Keyboard.W, () => {
-      this.move.w = 0;
-    });
-    this.inputs.onActive(Keyboard.S, () => {
-      this.move.s = 1;
-    });
-    this.inputs.onStop(Keyboard.S, () => {
-      this.move.s = 0;
-    });
-    this.inputs.onActive(Keyboard.Left, () => {
-      this.move.left = 1;
-    });
-    this.inputs.onStop(Keyboard.Left, () => {
-      this.move.left = 0;
-    });
-    this.inputs.onActive(Keyboard.Right, () => {
-      this.move.right = 1;
-    });
-    this.inputs.onStop(Keyboard.Right, () => {
-      this.move.right = 0;
-    });
-    this.inputs.onActive(Keyboard.Up, () => {
-      this.move.up = 1;
-    });
-    this.inputs.onStop(Keyboard.Up, () => {
-      this.move.up = 0;
-    });
-    this.inputs.onActive(Keyboard.Down, () => {
-      this.move.down = 1;
-    });
-    this.inputs.onStop(Keyboard.Down, () => {
-      this.move.down = 0;
-    });
-
-    for (let index = 0; index < 2; index++) {
-      const pad = app.input.gamepads[index];
-      const movement = this.padMove[index];
-      pad.onActive(GamepadAxis.LeftStickX, value => {
-        movement.x = value;
-      });
-      pad.onStop(GamepadAxis.LeftStickX, () => {
-        movement.x = 0;
-      });
-      pad.onActive(GamepadAxis.LeftStickY, value => {
-        movement.y = value;
-      });
-      pad.onStop(GamepadAxis.LeftStickY, () => {
-        movement.y = 0;
-      });
-    }
+    // One map per player: each binds its own keys and reads its own pad slot.
+    this.leftControls = new ActionMap(
+      {
+        move: new VectorAction([
+          { up: Keyboard.W, down: Keyboard.S, left: Keyboard.A, right: Keyboard.D },
+          { x: GamepadAxis.LeftStickX, y: GamepadAxis.LeftStickY },
+        ]),
+      },
+      { gamepad: app.input.gamepads[0] },
+    );
+    this.rightControls = new ActionMap(
+      {
+        move: new VectorAction([
+          { up: Keyboard.Up, down: Keyboard.Down, left: Keyboard.Left, right: Keyboard.Right },
+          { x: GamepadAxis.LeftStickX, y: GamepadAxis.LeftStickY },
+        ]),
+      },
+      { gamepad: app.input.gamepads[1] },
+    );
+    this.inputs.attach(this.leftControls);
+    this.inputs.attach(this.rightControls);
   }
 
   override update(delta: Seconds): void {
     const speed = 300 * delta;
 
-    this.leftPlayer.move((this.move.d - this.move.a + this.padMove[0].x) * speed, (this.move.s - this.move.w + this.padMove[0].y) * speed);
-    this.rightPlayer.move(
-      (this.move.right - this.move.left + this.padMove[1].x) * speed,
-      (this.move.down - this.move.up + this.padMove[1].y) * speed,
-    );
+    const left = this.leftControls.move.value;
+    const right = this.rightControls.move.value;
+
+    this.leftPlayer.move(left.x * speed, left.y * speed);
+    this.rightPlayer.move(right.x * speed, right.y * speed);
     this.leftView.setCenter(this.leftPlayer.position.x, this.leftPlayer.position.y);
     this.rightView.setCenter(this.rightPlayer.position.x, this.rightPlayer.position.y);
   }
@@ -184,9 +125,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(SplitScreenScene);
diff --git a/examples/application-scenes/multiple-scenes.js b/examples/application-scenes/multiple-scenes.js
index 0fbd49033..eb277d083 100644
--- a/examples/application-scenes/multiple-scenes.js
+++ b/examples/application-scenes/multiple-scenes.js
@@ -90,6 +90,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(MenuScene);
diff --git a/examples/application-scenes/multiple-scenes.ts b/examples/application-scenes/multiple-scenes.ts
index edce85f3a..f1a16fdd8 100644
--- a/examples/application-scenes/multiple-scenes.ts
+++ b/examples/application-scenes/multiple-scenes.ts
@@ -108,7 +108,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(MenuScene);
diff --git a/examples/application-scenes/pause-and-resume.js b/examples/application-scenes/pause-and-resume.js
index da16a564d..354f93825 100644
--- a/examples/application-scenes/pause-and-resume.js
+++ b/examples/application-scenes/pause-and-resume.js
@@ -1,12 +1,13 @@
 // Auto-generated from pause-and-resume.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Keyboard, Scene, SceneAvailability, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class PauseResumeScene extends Scene {
   sprite;
   label;
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
     this.sprite.setPosition(width / 2, height / 2);
     this.label = new Text('Space or click: pause update', { fillColor: Color.white, fontSize: 16 });
@@ -44,8 +45,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(PauseResumeScene);
diff --git a/examples/application-scenes/pause-and-resume.ts b/examples/application-scenes/pause-and-resume.ts
index c888d7e96..c9560eb70 100644
--- a/examples/application-scenes/pause-and-resume.ts
+++ b/examples/application-scenes/pause-and-resume.ts
@@ -9,6 +9,7 @@ import {
   Sprite,
   Text,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class PauseResumeScene extends Scene {
   private sprite!: Sprite;
@@ -18,7 +19,7 @@ class PauseResumeScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
     this.sprite.setPosition(width / 2, height / 2);
 
@@ -64,9 +65,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(PauseResumeScene);
diff --git a/examples/application-scenes/picture-in-picture.js b/examples/application-scenes/picture-in-picture.js
index 2f1fe9563..3ef2cf13e 100644
--- a/examples/application-scenes/picture-in-picture.js
+++ b/examples/application-scenes/picture-in-picture.js
@@ -1,5 +1,6 @@
 // Auto-generated from picture-in-picture.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sprite, View } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class PictureInPictureScene extends Scene {
   mainView;
   pipView;
@@ -9,7 +10,7 @@ class PictureInPictureScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.mainView = new View(0, 0, width, height);
     this.pipView = new View(0, 0, width * 0.3, height * 0.3).setViewport(0.68, 0.04, 0.28, 0.28);
     // Zoom < 1 zooms OUT (a larger visible world area maps into the same
@@ -44,8 +45,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(PictureInPictureScene);
diff --git a/examples/application-scenes/picture-in-picture.ts b/examples/application-scenes/picture-in-picture.ts
index 8a83846c7..772728fa6 100644
--- a/examples/application-scenes/picture-in-picture.ts
+++ b/examples/application-scenes/picture-in-picture.ts
@@ -9,6 +9,7 @@ import {
   Sprite,
   View,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class PictureInPictureScene extends Scene {
   private mainView!: View;
@@ -21,7 +22,7 @@ class PictureInPictureScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
 
     this.mainView = new View(0, 0, width, height);
     this.pipView = new View(0, 0, width * 0.3, height * 0.3).setViewport(0.68, 0.04, 0.28, 0.28);
@@ -64,9 +65,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(PictureInPictureScene);
diff --git a/examples/application-scenes/scene-less-app.js b/examples/application-scenes/scene-less-app.js
index 0fed4af29..71cb41173 100644
--- a/examples/application-scenes/scene-less-app.js
+++ b/examples/application-scenes/scene-less-app.js
@@ -1,5 +1,6 @@
 // Auto-generated from scene-less-app.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 // A scene-less Application: no Scene is ever registered or started. All
 // frame work happens through a single app-level system - useful for utility
 // apps, splash/loading screens, or anything that doesn't need scene
@@ -14,7 +15,7 @@ const app = new Application({
   },
   clearColor: new Color(18, 22, 33),
 });
-const square = new Sprite(app.loader.get(assets.demo.textures.pixelWhite)).setAnchor(0.5);
+const square = new Sprite(app.loader.get(assets.pixelWhite)).setAnchor(0.5);
 square.width = 80;
 square.height = 80;
 square.tint = new Color(90, 160, 255);
diff --git a/examples/application-scenes/scene-less-app.ts b/examples/application-scenes/scene-less-app.ts
index d375e4cea..7bcc4f6e6 100644
--- a/examples/application-scenes/scene-less-app.ts
+++ b/examples/application-scenes/scene-less-app.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 // A scene-less Application: no Scene is ever registered or started. All
 // frame work happens through a single app-level system - useful for utility
@@ -16,7 +17,7 @@ const app = new Application({
   clearColor: new Color(18, 22, 33),
 });
 
-const square = new Sprite(app.loader.get(assets.demo.textures.pixelWhite)).setAnchor(0.5);
+const square = new Sprite(app.loader.get(assets.pixelWhite)).setAnchor(0.5);
 square.width = 80;
 square.height = 80;
 square.tint = new Color(90, 160, 255);
diff --git a/examples/application-scenes/scene-lifecycle.js b/examples/application-scenes/scene-lifecycle.js
index 8c7d4d8f6..1bdce4887 100644
--- a/examples/application-scenes/scene-lifecycle.js
+++ b/examples/application-scenes/scene-lifecycle.js
@@ -69,8 +69,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(LifecycleScene);
diff --git a/examples/application-scenes/scene-lifecycle.ts b/examples/application-scenes/scene-lifecycle.ts
index 19e4f3b68..50586d239 100644
--- a/examples/application-scenes/scene-lifecycle.ts
+++ b/examples/application-scenes/scene-lifecycle.ts
@@ -80,9 +80,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(LifecycleScene);
diff --git a/examples/application-scenes/world-vs-screen-coords.js b/examples/application-scenes/world-vs-screen-coords.js
index 72c03d1ce..ad4570373 100644
--- a/examples/application-scenes/world-vs-screen-coords.js
+++ b/examples/application-scenes/world-vs-screen-coords.js
@@ -1,12 +1,10 @@
 // Auto-generated from world-vs-screen-coords.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Text, View } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 class CameraNavigationScene extends Scene {
   view;
   grid;
   markers;
   readout;
-  hud;
   up;
   down;
   left;
@@ -48,15 +46,6 @@ class CameraNavigationScene extends Scene {
     this.app.input.onPointerMove.add(this.onPointerMove);
     this.app.input.onPointerTap.add(this.onPointerTap);
     this.app.input.onMouseWheel.add(this.onMouseWheel);
-    this.hud = mountControls({
-      title: 'Camera Navigation',
-      controls: [
-        { keys: 'WASD / arrows', action: 'pan' },
-        { keys: 'Wheel', action: 'zoom' },
-        { keys: 'Move / click', action: 'inspect / mark world point' },
-      ],
-      hint: 'Markers use world coordinates; the readout stays fixed on screen.',
-    });
   }
   update(delta) {
     const x = (this.right.active ? 1 : 0) - (this.left.active ? 1 : 0);
@@ -74,7 +63,6 @@ class CameraNavigationScene extends Scene {
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerTap.remove(this.onPointerTap);
     this.app.input.onMouseWheel.remove(this.onMouseWheel);
-    this.hud.dispose();
     super.destroy();
   }
 }
@@ -87,6 +75,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: { basePath: 'assets/' },
 });
 await app.start(CameraNavigationScene);
diff --git a/examples/application-scenes/world-vs-screen-coords.ts b/examples/application-scenes/world-vs-screen-coords.ts
index b07503c9c..245755293 100644
--- a/examples/application-scenes/world-vs-screen-coords.ts
+++ b/examples/application-scenes/world-vs-screen-coords.ts
@@ -11,14 +11,12 @@ import {
   Text,
   View,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 
 class CameraNavigationScene extends Scene {
   private view!: View;
   private grid!: Graphics;
   private markers!: Graphics;
   private readout!: Text;
-  private hud!: ReturnType<typeof mountControls>;
   private up!: InputBinding;
   private down!: InputBinding;
   private left!: InputBinding;
@@ -65,15 +63,6 @@ class CameraNavigationScene extends Scene {
     this.app.input.onPointerMove.add(this.onPointerMove);
     this.app.input.onPointerTap.add(this.onPointerTap);
     this.app.input.onMouseWheel.add(this.onMouseWheel);
-    this.hud = mountControls({
-      title: 'Camera Navigation',
-      controls: [
-        { keys: 'WASD / arrows', action: 'pan' },
-        { keys: 'Wheel', action: 'zoom' },
-        { keys: 'Move / click', action: 'inspect / mark world point' },
-      ],
-      hint: 'Markers use world coordinates; the readout stays fixed on screen.',
-    });
   }
 
   override update(delta: Seconds): void {
@@ -94,7 +83,6 @@ class CameraNavigationScene extends Scene {
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerTap.remove(this.onPointerTap);
     this.app.input.onMouseWheel.remove(this.onMouseWheel);
-    this.hud.dispose();
     super.destroy();
   }
 }
@@ -108,7 +96,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(CameraNavigationScene);
diff --git a/examples/assets/assets.js b/examples/assets/assets.js
deleted file mode 100644
index 134a4b0c4..000000000
--- a/examples/assets/assets.js
+++ /dev/null
@@ -1,215 +0,0 @@
-// Auto-generated from assets.ts - edit the .ts source, not this file.
-/**
- * Canonical hierarchical asset catalog for ExoJS examples and playground.
- *
- * Example authors use the injected `assets` global directly (no import):
- *   const path = assets.demo.textures.particleFlame;
- *
- * This module is the source of truth: the controlled example runtimes install a
- * resolved copy of it on `globalThis.assets`, and examples:sync generates the
- * `assets-global.d.ts` typing + the runtime `catalog.js`.
- */
-export const assets = {
-  demo: {
-    isometricLandscape: 'json/maps/isometric-landscape.tmj',
-    textures: {
-      particleFlame: 'demo/textures/particle-flame.png',
-      particleSmoke: 'demo/textures/particle-smoke.png',
-      particleStar: 'demo/textures/particle-star.png',
-      particleSpark: 'demo/textures/particle-spark.png',
-      particleLight: 'demo/textures/particle-light.png',
-      shipA: 'demo/textures/ship-a.png',
-      pixelWhite: 'demo/textures/pixel-white.png',
-      pixelBlack: 'demo/textures/pixel-black.png',
-      pixelTransparent: 'demo/textures/pixel-transparent.png',
-      checkerboardTransparent: 'demo/textures/checkerboard-transparent.png',
-      kenneyUv: 'demo/textures/kenney-uv.png',
-      prototypeDark01: 'demo/textures/prototype-dark-01.png',
-      prototypeLight01: 'demo/textures/prototype-light-01.png',
-      prototypeGrid: 'demo/textures/prototype-grid.png',
-    },
-    sprites: {
-      buttons: {
-        image: 'demo/sprites/buttons.png',
-        data: 'demo/sprites/buttons.json',
-      },
-    },
-    spritesheets: {
-      buttons: {
-        image: 'demo/sprites/buttons.png',
-        data: 'demo/sprites/buttons.json',
-      },
-      platformerBackgrounds: {
-        image: 'demo/spritesheets/kenney/platformer-backgrounds.png',
-        data: 'demo/spritesheets/kenney/platformer-backgrounds.json',
-      },
-      platformerCharacters: {
-        image: 'demo/spritesheets/kenney/platformer-characters.png',
-        data: 'demo/spritesheets/kenney/platformer-characters.json',
-      },
-      platformerEnemies: {
-        image: 'demo/spritesheets/kenney/platformer-enemies.png',
-        data: 'demo/spritesheets/kenney/platformer-enemies.json',
-      },
-      platformerTiles: {
-        image: 'demo/spritesheets/kenney/platformer-tiles.png',
-        data: 'demo/spritesheets/kenney/platformer-tiles.json',
-      },
-      backgroundElements: {
-        image: 'demo/spritesheets/kenney/background-elements.png',
-        data: 'demo/spritesheets/kenney/background-elements.json',
-      },
-      mapPack: {
-        image: 'demo/spritesheets/kenney/map-pack.png',
-        data: 'demo/spritesheets/kenney/map-pack.json',
-      },
-    },
-    tilesets: {
-      platformer: {
-        image: 'demo/spritesheets/kenney/platformer-tiles.png',
-        data: 'demo/spritesheets/kenney/platformer-tiles.json',
-        tileWidth: 64,
-        tileHeight: 64,
-      },
-      map: {
-        image: 'demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png',
-        tileWidth: 64,
-        tileHeight: 64,
-      },
-    },
-    audio: {
-      uiClick: 'demo/audio/ui-click.ogg',
-      uiConfirm: 'demo/audio/ui-confirm.ogg',
-      uiBong: 'demo/audio/ui-bong.ogg',
-      impactLight: 'demo/audio/impact-light.ogg',
-      impactHeavy: 'demo/audio/impact-heavy.ogg',
-      musicA: 'demo/audio/demo-loop-a.ogg',
-      musicB: 'demo/audio/demo-loop-b.ogg',
-      musicLoop: 'demo/audio/demo-loop-main.ogg',
-    },
-    voice: {
-      // Kenney "Voiceover Pack" (CC0) - spoken phrases, ideal as a
-      // vocoder modulator or for voiced UI feedback.
-      congratulations: 'demo/voice/congratulations.ogg',
-      missionComplete: 'demo/voice/mission-complete.ogg',
-      objectiveAchieved: 'demo/voice/objective-achieved.ogg',
-    },
-    sound: {
-      uiClick: 'demo/sound/ui-click.ogg',
-      uiConfirm: 'demo/sound/ui-confirm.ogg',
-      uiBong: 'demo/sound/ui-bong.ogg',
-      back: 'demo/sound/back.ogg',
-      clickAlt: 'demo/sound/click-alt.ogg',
-      switch: 'demo/sound/switch.ogg',
-      impactLight: 'demo/sound/impact-light.ogg',
-      impactHeavy: 'demo/sound/impact-heavy.ogg',
-      impactWood: 'demo/sound/impact-wood.ogg',
-      jump: 'demo/sound/jump.ogg',
-      coin: 'demo/sound/coin.ogg',
-      hurt: 'demo/sound/hurt.ogg',
-      powerUp: 'demo/sound/power-up.ogg',
-      laser: 'demo/sound/laser.ogg',
-    },
-    music: {
-      loopA: 'demo/music/demo-loop-a.ogg',
-      loopB: 'demo/music/demo-loop-b.ogg',
-      loopMain: 'demo/music/demo-loop-main.ogg',
-      jingleSuccess: 'demo/music/jingle-success.ogg',
-      jingleFailure: 'demo/music/jingle-failure.ogg',
-      jingleRetroA: 'demo/music/jingle-retro-a.ogg',
-      jingleRetroB: 'demo/music/jingle-retro-b.ogg',
-    },
-    soundSprites: {
-      ui: {
-        audio: 'demo/sound-sprites/ui/ui.ogg',
-        data: 'demo/sound-sprites/ui/ui.json',
-      },
-      impacts: {
-        audio: 'demo/sound-sprites/impacts/impacts.ogg',
-        data: 'demo/sound-sprites/impacts/impacts.json',
-      },
-      digital: {
-        audio: 'demo/sound-sprites/digital/digital.ogg',
-        data: 'demo/sound-sprites/digital/digital.json',
-      },
-    },
-    fonts: {
-      kenneyFuture: 'demo/fonts/Kenney Future.ttf',
-      kenneyPixel: 'demo/fonts/Kenney Pixel.ttf',
-      kenneyMini: 'demo/fonts/Kenney Mini.ttf',
-      kenneyMiniSquareMono: 'demo/fonts/Kenney Mini Square Mono.ttf',
-      kenneyBlocksFnt: 'demo/fonts/kenney-blocks-32.fnt',
-      kenneyBlocksPng: 'demo/fonts/kenney-blocks-32.png',
-    },
-    backgrounds: {
-      platformerClouds: 'demo/backgrounds/platformer-clouds.png',
-      platformerHills: 'demo/backgrounds/platformer-hills.png',
-      castles: 'demo/backgrounds/castles.png',
-      forest: 'demo/backgrounds/forest.png',
-    },
-    cursors: {
-      arrow: 'demo/cursors/arrow.svg',
-      pointer: 'demo/cursors/pointer.svg',
-      hand: 'demo/cursors/hand.svg',
-      busy: 'demo/cursors/busy.svg',
-      cross: 'demo/cursors/cross.svg',
-    },
-    svg: {
-      play: 'demo/svg/play.svg',
-      pause: 'demo/svg/pause.svg',
-      reset: 'demo/svg/reset.svg',
-      arrowRight: 'demo/svg/arrow-right.svg',
-      sparkle: 'demo/svg/sparkle.svg',
-      audioWave: 'demo/svg/audio-wave.svg',
-      imagePlaceholder: 'demo/svg/image-placeholder.svg',
-      runeMark: 'demo/svg/rune-mark.svg',
-    },
-    video: {
-      demoLoop: 'demo/video/demo-loop.webm',
-      highRes: 'demo/video/high-res.mp4',
-      highFps: 'demo/video/high-fps.webm',
-      hdr10: 'demo/video/hdr10.webm',
-    },
-    inputPrompts: {
-      generic: {
-        image: 'demo/input-prompts/generic.png',
-        data: 'demo/input-prompts/generic.json',
-      },
-      xboxSeries: {
-        image: 'demo/input-prompts/xbox-series.png',
-        data: 'demo/input-prompts/xbox-series.json',
-      },
-      playstationSeries: {
-        image: 'demo/input-prompts/playstation-series.png',
-        data: 'demo/input-prompts/playstation-series.json',
-      },
-      nintendoSwitch: {
-        image: 'demo/input-prompts/nintendo-switch.png',
-        data: 'demo/input-prompts/nintendo-switch.json',
-      },
-      keyboardMouse: {
-        image: 'demo/input-prompts/keyboard-mouse.png',
-        data: 'demo/input-prompts/keyboard-mouse.json',
-      },
-    },
-    vendor: {
-      kenneyManifest: 'demo/vendor/kenney/manifest.json',
-    },
-  },
-  technical: {
-    alpha: {
-      alphaEdgeStraight: 'technical/alpha/alpha-edge-straight.png',
-      alphaGradientRings: 'technical/alpha/alpha-gradient-rings.png',
-    },
-    filtering: {
-      checker256: 'technical/filtering/checker-256.png',
-      pixelGrid128: 'technical/filtering/pixel-grid-128.png',
-      uvGrid256: 'technical/filtering/uv-grid-256.png',
-    },
-    color: {
-      srgbRamp: 'technical/color/srgb-ramp.png',
-      hueRamp: 'technical/color/hue-ramp.png',
-      primaryRamp: 'technical/color/primary-ramp.png',
-    },
-  },
-};
diff --git a/examples/assets/assets.json b/examples/assets/assets.json
deleted file mode 100644
index 465159e8d..000000000
--- a/examples/assets/assets.json
+++ /dev/null
@@ -1 +0,0 @@
-{"audio":["demo-loop-main.ogg","impact-light.ogg","ui-click.ogg"],"font":["Kenney Future.ttf"],"image":["buttons.png","hue-ramp.png","input-prompts-generic.png","input-prompts-xbox-series.png","input-prompts-playstation-series.png","input-prompts-nintendo-switch.png","particle-light.png","platformer-characters.png","ship-a.png","uv-grid-256.png"],"json":["buttons.json","input-prompts-generic.json","input-prompts-xbox-series.json","input-prompts-playstation-series.json","input-prompts-nintendo-switch.json","platformer-characters.json"],"svg":["rune-mark.svg"],"video":["demo-loop.webm"]}
diff --git a/examples/assets/assets.ts b/examples/assets/assets.ts
deleted file mode 100644
index d92035b87..000000000
--- a/examples/assets/assets.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-/**
- * Canonical hierarchical asset catalog for ExoJS examples and playground.
- *
- * Example authors use the injected `assets` global directly (no import):
- *   const path = assets.demo.textures.particleFlame;
- *
- * This module is the source of truth: the controlled example runtimes install a
- * resolved copy of it on `globalThis.assets`, and examples:sync generates the
- * `assets-global.d.ts` typing + the runtime `catalog.js`.
- */
-export const assets = {
-    demo: {
-        isometricLandscape: 'json/maps/isometric-landscape.tmj',
-        textures: {
-            particleFlame: 'demo/textures/particle-flame.png',
-            particleSmoke: 'demo/textures/particle-smoke.png',
-            particleStar: 'demo/textures/particle-star.png',
-            particleSpark: 'demo/textures/particle-spark.png',
-            particleLight: 'demo/textures/particle-light.png',
-            shipA: 'demo/textures/ship-a.png',
-            pixelWhite: 'demo/textures/pixel-white.png',
-            pixelBlack: 'demo/textures/pixel-black.png',
-            pixelTransparent: 'demo/textures/pixel-transparent.png',
-            checkerboardTransparent: 'demo/textures/checkerboard-transparent.png',
-            kenneyUv: 'demo/textures/kenney-uv.png',
-            prototypeDark01: 'demo/textures/prototype-dark-01.png',
-            prototypeLight01: 'demo/textures/prototype-light-01.png',
-            prototypeGrid: 'demo/textures/prototype-grid.png',
-        },
-        sprites: {
-            buttons: {
-                image: 'demo/sprites/buttons.png',
-                data: 'demo/sprites/buttons.json',
-            },
-        },
-        spritesheets: {
-            buttons: {
-                image: 'demo/sprites/buttons.png',
-                data: 'demo/sprites/buttons.json',
-            },
-            platformerBackgrounds: {
-                image: 'demo/spritesheets/kenney/platformer-backgrounds.png',
-                data: 'demo/spritesheets/kenney/platformer-backgrounds.json',
-            },
-            platformerCharacters: {
-                image: 'demo/spritesheets/kenney/platformer-characters.png',
-                data: 'demo/spritesheets/kenney/platformer-characters.json',
-            },
-            platformerEnemies: {
-                image: 'demo/spritesheets/kenney/platformer-enemies.png',
-                data: 'demo/spritesheets/kenney/platformer-enemies.json',
-            },
-            platformerTiles: {
-                image: 'demo/spritesheets/kenney/platformer-tiles.png',
-                data: 'demo/spritesheets/kenney/platformer-tiles.json',
-            },
-            backgroundElements: {
-                image: 'demo/spritesheets/kenney/background-elements.png',
-                data: 'demo/spritesheets/kenney/background-elements.json',
-            },
-            mapPack: {
-                image: 'demo/spritesheets/kenney/map-pack.png',
-                data: 'demo/spritesheets/kenney/map-pack.json',
-            },
-        },
-        tilesets: {
-            platformer: {
-                image: 'demo/spritesheets/kenney/platformer-tiles.png',
-                data: 'demo/spritesheets/kenney/platformer-tiles.json',
-                tileWidth: 64,
-                tileHeight: 64,
-            },
-            map: {
-                image: 'demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png',
-                tileWidth: 64,
-                tileHeight: 64,
-            },
-        },
-        audio: {
-            uiClick: 'demo/audio/ui-click.ogg',
-            uiConfirm: 'demo/audio/ui-confirm.ogg',
-            uiBong: 'demo/audio/ui-bong.ogg',
-            impactLight: 'demo/audio/impact-light.ogg',
-            impactHeavy: 'demo/audio/impact-heavy.ogg',
-            musicA: 'demo/audio/demo-loop-a.ogg',
-            musicB: 'demo/audio/demo-loop-b.ogg',
-            musicLoop: 'demo/audio/demo-loop-main.ogg',
-        },
-        voice: {
-            // Kenney "Voiceover Pack" (CC0) - spoken phrases, ideal as a
-            // vocoder modulator or for voiced UI feedback.
-            congratulations: 'demo/voice/congratulations.ogg',
-            missionComplete: 'demo/voice/mission-complete.ogg',
-            objectiveAchieved: 'demo/voice/objective-achieved.ogg',
-        },
-        sound: {
-            uiClick: 'demo/sound/ui-click.ogg',
-            uiConfirm: 'demo/sound/ui-confirm.ogg',
-            uiBong: 'demo/sound/ui-bong.ogg',
-            back: 'demo/sound/back.ogg',
-            clickAlt: 'demo/sound/click-alt.ogg',
-            switch: 'demo/sound/switch.ogg',
-            impactLight: 'demo/sound/impact-light.ogg',
-            impactHeavy: 'demo/sound/impact-heavy.ogg',
-            impactWood: 'demo/sound/impact-wood.ogg',
-            jump: 'demo/sound/jump.ogg',
-            coin: 'demo/sound/coin.ogg',
-            hurt: 'demo/sound/hurt.ogg',
-            powerUp: 'demo/sound/power-up.ogg',
-            laser: 'demo/sound/laser.ogg',
-        },
-        music: {
-            loopA: 'demo/music/demo-loop-a.ogg',
-            loopB: 'demo/music/demo-loop-b.ogg',
-            loopMain: 'demo/music/demo-loop-main.ogg',
-            jingleSuccess: 'demo/music/jingle-success.ogg',
-            jingleFailure: 'demo/music/jingle-failure.ogg',
-            jingleRetroA: 'demo/music/jingle-retro-a.ogg',
-            jingleRetroB: 'demo/music/jingle-retro-b.ogg',
-        },
-        soundSprites: {
-            ui: {
-                audio: 'demo/sound-sprites/ui/ui.ogg',
-                data: 'demo/sound-sprites/ui/ui.json',
-            },
-            impacts: {
-                audio: 'demo/sound-sprites/impacts/impacts.ogg',
-                data: 'demo/sound-sprites/impacts/impacts.json',
-            },
-            digital: {
-                audio: 'demo/sound-sprites/digital/digital.ogg',
-                data: 'demo/sound-sprites/digital/digital.json',
-            },
-        },
-        fonts: {
-            kenneyFuture: 'demo/fonts/Kenney Future.ttf',
-            kenneyPixel: 'demo/fonts/Kenney Pixel.ttf',
-            kenneyMini: 'demo/fonts/Kenney Mini.ttf',
-            kenneyMiniSquareMono: 'demo/fonts/Kenney Mini Square Mono.ttf',
-            kenneyBlocksFnt: 'demo/fonts/kenney-blocks-32.fnt',
-            kenneyBlocksPng: 'demo/fonts/kenney-blocks-32.png',
-        },
-        backgrounds: {
-            platformerClouds: 'demo/backgrounds/platformer-clouds.png',
-            platformerHills: 'demo/backgrounds/platformer-hills.png',
-            castles: 'demo/backgrounds/castles.png',
-            forest: 'demo/backgrounds/forest.png',
-        },
-        cursors: {
-            arrow: 'demo/cursors/arrow.svg',
-            pointer: 'demo/cursors/pointer.svg',
-            hand: 'demo/cursors/hand.svg',
-            busy: 'demo/cursors/busy.svg',
-            cross: 'demo/cursors/cross.svg',
-        },
-        svg: {
-            play: 'demo/svg/play.svg',
-            pause: 'demo/svg/pause.svg',
-            reset: 'demo/svg/reset.svg',
-            arrowRight: 'demo/svg/arrow-right.svg',
-            sparkle: 'demo/svg/sparkle.svg',
-            audioWave: 'demo/svg/audio-wave.svg',
-            imagePlaceholder: 'demo/svg/image-placeholder.svg',
-            runeMark: 'demo/svg/rune-mark.svg',
-        },
-        video: {
-            demoLoop: 'demo/video/demo-loop.webm',
-            highRes: 'demo/video/high-res.mp4',
-            highFps: 'demo/video/high-fps.webm',
-            hdr10: 'demo/video/hdr10.webm',
-        },
-        inputPrompts: {
-            generic: {
-                image: 'demo/input-prompts/generic.png',
-                data: 'demo/input-prompts/generic.json',
-            },
-            xboxSeries: {
-                image: 'demo/input-prompts/xbox-series.png',
-                data: 'demo/input-prompts/xbox-series.json',
-            },
-            playstationSeries: {
-                image: 'demo/input-prompts/playstation-series.png',
-                data: 'demo/input-prompts/playstation-series.json',
-            },
-            nintendoSwitch: {
-                image: 'demo/input-prompts/nintendo-switch.png',
-                data: 'demo/input-prompts/nintendo-switch.json',
-            },
-            keyboardMouse: {
-                image: 'demo/input-prompts/keyboard-mouse.png',
-                data: 'demo/input-prompts/keyboard-mouse.json',
-            },
-        },
-        vendor: {
-            kenneyManifest: 'demo/vendor/kenney/manifest.json',
-        },
-    },
-    technical: {
-        alpha: {
-            alphaEdgeStraight: 'technical/alpha/alpha-edge-straight.png',
-            alphaGradientRings: 'technical/alpha/alpha-gradient-rings.png',
-        },
-        filtering: {
-            checker256: 'technical/filtering/checker-256.png',
-            pixelGrid128: 'technical/filtering/pixel-grid-128.png',
-            uvGrid256: 'technical/filtering/uv-grid-256.png',
-        },
-        color: {
-            srgbRamp: 'technical/color/srgb-ramp.png',
-            hueRamp: 'technical/color/hue-ramp.png',
-            primaryRamp: 'technical/color/primary-ramp.png',
-        },
-    },
-} as const;
-
-export type Assets = typeof assets;
diff --git a/examples/assets/catalog.js b/examples/assets/catalog.js
deleted file mode 100644
index 87f2e5fb0..000000000
--- a/examples/assets/catalog.js
+++ /dev/null
@@ -1,195 +0,0 @@
-// Auto-generated from catalog.ts - edit the .ts source, not this file.
-export const rawAssets = {
-  textures: {
-    particleFlame: 'demo/textures/particle-flame.png',
-    particleSmoke: 'demo/textures/particle-smoke.png',
-    particleStar: 'demo/textures/particle-star.png',
-    particleSpark: 'demo/textures/particle-spark.png',
-    particleLight: 'demo/textures/particle-light.png',
-    shipA: 'demo/textures/ship-a.png',
-    pixelWhite: 'demo/textures/pixel-white.png',
-    pixelBlack: 'demo/textures/pixel-black.png',
-    pixelTransparent: 'demo/textures/pixel-transparent.png',
-    checkerboardTransparent: 'demo/textures/checkerboard-transparent.png',
-    kenneyUv: 'demo/textures/kenney-uv.png',
-    prototypeDark01: 'demo/textures/prototype-dark-01.png',
-    prototypeLight01: 'demo/textures/prototype-light-01.png',
-    prototypeGrid: 'demo/textures/prototype-grid.png',
-  },
-  sprites: {
-    buttons: {
-      image: 'demo/sprites/buttons.png',
-      data: 'demo/sprites/buttons.json',
-    },
-  },
-  spritesheets: {
-    buttons: {
-      image: 'demo/sprites/buttons.png',
-      data: 'demo/sprites/buttons.json',
-    },
-    platformerBackgrounds: {
-      image: 'demo/spritesheets/kenney/platformer-backgrounds.png',
-      data: 'demo/spritesheets/kenney/platformer-backgrounds.json',
-    },
-    platformerCharacters: {
-      image: 'demo/spritesheets/kenney/platformer-characters.png',
-      data: 'demo/spritesheets/kenney/platformer-characters.json',
-    },
-    platformerEnemies: {
-      image: 'demo/spritesheets/kenney/platformer-enemies.png',
-      data: 'demo/spritesheets/kenney/platformer-enemies.json',
-    },
-    platformerTiles: {
-      image: 'demo/spritesheets/kenney/platformer-tiles.png',
-      data: 'demo/spritesheets/kenney/platformer-tiles.json',
-    },
-    backgroundElements: {
-      image: 'demo/spritesheets/kenney/background-elements.png',
-      data: 'demo/spritesheets/kenney/background-elements.json',
-    },
-    mapPack: {
-      image: 'demo/spritesheets/kenney/map-pack.png',
-      data: 'demo/spritesheets/kenney/map-pack.json',
-    },
-  },
-  tilesets: {
-    platformer: {
-      image: 'demo/spritesheets/kenney/platformer-tiles.png',
-      data: 'demo/spritesheets/kenney/platformer-tiles.json',
-      tileWidth: 64,
-      tileHeight: 64,
-    },
-    map: {
-      image: 'demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png',
-      tileWidth: 64,
-      tileHeight: 64,
-    },
-  },
-  audio: {
-    uiClick: 'demo/audio/ui-click.ogg',
-    uiConfirm: 'demo/audio/ui-confirm.ogg',
-    uiBong: 'demo/audio/ui-bong.ogg',
-    impactLight: 'demo/audio/impact-light.ogg',
-    impactHeavy: 'demo/audio/impact-heavy.ogg',
-    musicA: 'demo/audio/demo-loop-a.ogg',
-    musicB: 'demo/audio/demo-loop-b.ogg',
-    musicLoop: 'demo/audio/demo-loop-main.ogg',
-  },
-  sound: {
-    uiClick: 'demo/sound/ui-click.ogg',
-    uiConfirm: 'demo/sound/ui-confirm.ogg',
-    uiBong: 'demo/sound/ui-bong.ogg',
-    back: 'demo/sound/back.ogg',
-    clickAlt: 'demo/sound/click-alt.ogg',
-    switch: 'demo/sound/switch.ogg',
-    impactLight: 'demo/sound/impact-light.ogg',
-    impactHeavy: 'demo/sound/impact-heavy.ogg',
-    impactWood: 'demo/sound/impact-wood.ogg',
-    jump: 'demo/sound/jump.ogg',
-    coin: 'demo/sound/coin.ogg',
-    hurt: 'demo/sound/hurt.ogg',
-    powerUp: 'demo/sound/power-up.ogg',
-    laser: 'demo/sound/laser.ogg',
-  },
-  music: {
-    loopA: 'demo/music/demo-loop-a.ogg',
-    loopB: 'demo/music/demo-loop-b.ogg',
-    loopMain: 'demo/music/demo-loop-main.ogg',
-    jingleSuccess: 'demo/music/jingle-success.ogg',
-    jingleFailure: 'demo/music/jingle-failure.ogg',
-    jingleRetroA: 'demo/music/jingle-retro-a.ogg',
-    jingleRetroB: 'demo/music/jingle-retro-b.ogg',
-  },
-  soundSprites: {
-    ui: {
-      audio: 'demo/sound-sprites/ui/ui.ogg',
-      data: 'demo/sound-sprites/ui/ui.json',
-    },
-    impacts: {
-      audio: 'demo/sound-sprites/impacts/impacts.ogg',
-      data: 'demo/sound-sprites/impacts/impacts.json',
-    },
-    digital: {
-      audio: 'demo/sound-sprites/digital/digital.ogg',
-      data: 'demo/sound-sprites/digital/digital.json',
-    },
-  },
-  fonts: {
-    kenneyFuture: 'demo/fonts/Kenney Future.ttf',
-    kenneyPixel: 'demo/fonts/Kenney Pixel.ttf',
-    kenneyMini: 'demo/fonts/Kenney Mini.ttf',
-    kenneyMiniSquareMono: 'demo/fonts/Kenney Mini Square Mono.ttf',
-    kenneyBlocksFnt: 'demo/fonts/kenney-blocks-32.fnt',
-    kenneyBlocksPng: 'demo/fonts/kenney-blocks-32.png',
-  },
-  backgrounds: {
-    platformerClouds: 'demo/backgrounds/platformer-clouds.png',
-    platformerHills: 'demo/backgrounds/platformer-hills.png',
-    castles: 'demo/backgrounds/castles.png',
-    forest: 'demo/backgrounds/forest.png',
-  },
-  cursors: {
-    arrow: 'demo/cursors/arrow.svg',
-    pointer: 'demo/cursors/pointer.svg',
-    hand: 'demo/cursors/hand.svg',
-    busy: 'demo/cursors/busy.svg',
-    cross: 'demo/cursors/cross.svg',
-  },
-  svg: {
-    play: 'demo/svg/play.svg',
-    pause: 'demo/svg/pause.svg',
-    reset: 'demo/svg/reset.svg',
-    arrowRight: 'demo/svg/arrow-right.svg',
-    sparkle: 'demo/svg/sparkle.svg',
-    audioWave: 'demo/svg/audio-wave.svg',
-    imagePlaceholder: 'demo/svg/image-placeholder.svg',
-    runeMark: 'demo/svg/rune-mark.svg',
-  },
-  video: {
-    demoLoop: 'demo/video/demo-loop.webm',
-    highRes: 'demo/video/high-res.mp4',
-    highFps: 'demo/video/high-fps.webm',
-    hdr10: 'demo/video/hdr10.webm',
-  },
-  inputPrompts: {
-    generic: {
-      image: 'demo/input-prompts/generic.png',
-      data: 'demo/input-prompts/generic.json',
-    },
-    xboxSeries: {
-      image: 'demo/input-prompts/xbox-series.png',
-      data: 'demo/input-prompts/xbox-series.json',
-    },
-    playstationSeries: {
-      image: 'demo/input-prompts/playstation-series.png',
-      data: 'demo/input-prompts/playstation-series.json',
-    },
-    nintendoSwitch: {
-      image: 'demo/input-prompts/nintendo-switch.png',
-      data: 'demo/input-prompts/nintendo-switch.json',
-    },
-    keyboardMouse: {
-      image: 'demo/input-prompts/keyboard-mouse.png',
-      data: 'demo/input-prompts/keyboard-mouse.json',
-    },
-  },
-  technical: {
-    alpha: {
-      alphaEdgeStraight: 'technical/alpha/alpha-edge-straight.png',
-      alphaGradientRings: 'technical/alpha/alpha-gradient-rings.png',
-    },
-    filtering: {
-      checker256: 'technical/filtering/checker-256.png',
-      pixelGrid128: 'technical/filtering/pixel-grid-128.png',
-      uvGrid256: 'technical/filtering/uv-grid-256.png',
-    },
-    color: {
-      srgbRamp: 'technical/color/srgb-ramp.png',
-      hueRamp: 'technical/color/hue-ramp.png',
-      primaryRamp: 'technical/color/primary-ramp.png',
-    },
-  },
-  vendor: {
-    kenneyManifest: 'demo/vendor/kenney/manifest.json',
-  },
-};
diff --git a/examples/assets/catalog.ts b/examples/assets/catalog.ts
deleted file mode 100644
index 583ac22af..000000000
--- a/examples/assets/catalog.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-export const rawAssets = {
-    textures: {
-        particleFlame: 'demo/textures/particle-flame.png',
-        particleSmoke: 'demo/textures/particle-smoke.png',
-        particleStar: 'demo/textures/particle-star.png',
-        particleSpark: 'demo/textures/particle-spark.png',
-        particleLight: 'demo/textures/particle-light.png',
-        shipA: 'demo/textures/ship-a.png',
-        pixelWhite: 'demo/textures/pixel-white.png',
-        pixelBlack: 'demo/textures/pixel-black.png',
-        pixelTransparent: 'demo/textures/pixel-transparent.png',
-        checkerboardTransparent: 'demo/textures/checkerboard-transparent.png',
-        kenneyUv: 'demo/textures/kenney-uv.png',
-        prototypeDark01: 'demo/textures/prototype-dark-01.png',
-        prototypeLight01: 'demo/textures/prototype-light-01.png',
-        prototypeGrid: 'demo/textures/prototype-grid.png',
-    },
-    sprites: {
-        buttons: {
-            image: 'demo/sprites/buttons.png',
-            data: 'demo/sprites/buttons.json',
-        },
-    },
-    spritesheets: {
-        buttons: {
-            image: 'demo/sprites/buttons.png',
-            data: 'demo/sprites/buttons.json',
-        },
-        platformerBackgrounds: {
-            image: 'demo/spritesheets/kenney/platformer-backgrounds.png',
-            data: 'demo/spritesheets/kenney/platformer-backgrounds.json',
-        },
-        platformerCharacters: {
-            image: 'demo/spritesheets/kenney/platformer-characters.png',
-            data: 'demo/spritesheets/kenney/platformer-characters.json',
-        },
-        platformerEnemies: {
-            image: 'demo/spritesheets/kenney/platformer-enemies.png',
-            data: 'demo/spritesheets/kenney/platformer-enemies.json',
-        },
-        platformerTiles: {
-            image: 'demo/spritesheets/kenney/platformer-tiles.png',
-            data: 'demo/spritesheets/kenney/platformer-tiles.json',
-        },
-        backgroundElements: {
-            image: 'demo/spritesheets/kenney/background-elements.png',
-            data: 'demo/spritesheets/kenney/background-elements.json',
-        },
-        mapPack: {
-            image: 'demo/spritesheets/kenney/map-pack.png',
-            data: 'demo/spritesheets/kenney/map-pack.json',
-        },
-    },
-    tilesets: {
-        platformer: {
-            image: 'demo/spritesheets/kenney/platformer-tiles.png',
-            data: 'demo/spritesheets/kenney/platformer-tiles.json',
-            tileWidth: 64,
-            tileHeight: 64,
-        },
-        map: {
-            image: 'demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png',
-            tileWidth: 64,
-            tileHeight: 64,
-        },
-    },
-    audio: {
-        uiClick: 'demo/audio/ui-click.ogg',
-        uiConfirm: 'demo/audio/ui-confirm.ogg',
-        uiBong: 'demo/audio/ui-bong.ogg',
-        impactLight: 'demo/audio/impact-light.ogg',
-        impactHeavy: 'demo/audio/impact-heavy.ogg',
-        musicA: 'demo/audio/demo-loop-a.ogg',
-        musicB: 'demo/audio/demo-loop-b.ogg',
-        musicLoop: 'demo/audio/demo-loop-main.ogg',
-    },
-    sound: {
-        uiClick: 'demo/sound/ui-click.ogg',
-        uiConfirm: 'demo/sound/ui-confirm.ogg',
-        uiBong: 'demo/sound/ui-bong.ogg',
-        back: 'demo/sound/back.ogg',
-        clickAlt: 'demo/sound/click-alt.ogg',
-        switch: 'demo/sound/switch.ogg',
-        impactLight: 'demo/sound/impact-light.ogg',
-        impactHeavy: 'demo/sound/impact-heavy.ogg',
-        impactWood: 'demo/sound/impact-wood.ogg',
-        jump: 'demo/sound/jump.ogg',
-        coin: 'demo/sound/coin.ogg',
-        hurt: 'demo/sound/hurt.ogg',
-        powerUp: 'demo/sound/power-up.ogg',
-        laser: 'demo/sound/laser.ogg',
-    },
-    music: {
-        loopA: 'demo/music/demo-loop-a.ogg',
-        loopB: 'demo/music/demo-loop-b.ogg',
-        loopMain: 'demo/music/demo-loop-main.ogg',
-        jingleSuccess: 'demo/music/jingle-success.ogg',
-        jingleFailure: 'demo/music/jingle-failure.ogg',
-        jingleRetroA: 'demo/music/jingle-retro-a.ogg',
-        jingleRetroB: 'demo/music/jingle-retro-b.ogg',
-    },
-    soundSprites: {
-        ui: {
-            audio: 'demo/sound-sprites/ui/ui.ogg',
-            data: 'demo/sound-sprites/ui/ui.json',
-        },
-        impacts: {
-            audio: 'demo/sound-sprites/impacts/impacts.ogg',
-            data: 'demo/sound-sprites/impacts/impacts.json',
-        },
-        digital: {
-            audio: 'demo/sound-sprites/digital/digital.ogg',
-            data: 'demo/sound-sprites/digital/digital.json',
-        },
-    },
-    fonts: {
-        kenneyFuture: 'demo/fonts/Kenney Future.ttf',
-        kenneyPixel: 'demo/fonts/Kenney Pixel.ttf',
-        kenneyMini: 'demo/fonts/Kenney Mini.ttf',
-        kenneyMiniSquareMono: 'demo/fonts/Kenney Mini Square Mono.ttf',
-        kenneyBlocksFnt: 'demo/fonts/kenney-blocks-32.fnt',
-        kenneyBlocksPng: 'demo/fonts/kenney-blocks-32.png',
-    },
-    backgrounds: {
-        platformerClouds: 'demo/backgrounds/platformer-clouds.png',
-        platformerHills: 'demo/backgrounds/platformer-hills.png',
-        castles: 'demo/backgrounds/castles.png',
-        forest: 'demo/backgrounds/forest.png',
-    },
-    cursors: {
-        arrow: 'demo/cursors/arrow.svg',
-        pointer: 'demo/cursors/pointer.svg',
-        hand: 'demo/cursors/hand.svg',
-        busy: 'demo/cursors/busy.svg',
-        cross: 'demo/cursors/cross.svg',
-    },
-    svg: {
-        play: 'demo/svg/play.svg',
-        pause: 'demo/svg/pause.svg',
-        reset: 'demo/svg/reset.svg',
-        arrowRight: 'demo/svg/arrow-right.svg',
-        sparkle: 'demo/svg/sparkle.svg',
-        audioWave: 'demo/svg/audio-wave.svg',
-        imagePlaceholder: 'demo/svg/image-placeholder.svg',
-        runeMark: 'demo/svg/rune-mark.svg',
-    },
-    video: {
-        demoLoop: 'demo/video/demo-loop.webm',
-        highRes: 'demo/video/high-res.mp4',
-        highFps: 'demo/video/high-fps.webm',
-        hdr10: 'demo/video/hdr10.webm',
-    },
-    inputPrompts: {
-        generic: {
-            image: 'demo/input-prompts/generic.png',
-            data: 'demo/input-prompts/generic.json',
-        },
-        xboxSeries: {
-            image: 'demo/input-prompts/xbox-series.png',
-            data: 'demo/input-prompts/xbox-series.json',
-        },
-        playstationSeries: {
-            image: 'demo/input-prompts/playstation-series.png',
-            data: 'demo/input-prompts/playstation-series.json',
-        },
-        nintendoSwitch: {
-            image: 'demo/input-prompts/nintendo-switch.png',
-            data: 'demo/input-prompts/nintendo-switch.json',
-        },
-        keyboardMouse: {
-            image: 'demo/input-prompts/keyboard-mouse.png',
-            data: 'demo/input-prompts/keyboard-mouse.json',
-        },
-    },
-    technical: {
-        alpha: {
-            alphaEdgeStraight: 'technical/alpha/alpha-edge-straight.png',
-            alphaGradientRings: 'technical/alpha/alpha-gradient-rings.png',
-        },
-        filtering: {
-            checker256: 'technical/filtering/checker-256.png',
-            pixelGrid128: 'technical/filtering/pixel-grid-128.png',
-            uvGrid256: 'technical/filtering/uv-grid-256.png',
-        },
-        color: {
-            srgbRamp: 'technical/color/srgb-ramp.png',
-            hueRamp: 'technical/color/hue-ramp.png',
-            primaryRamp: 'technical/color/primary-ramp.png',
-        },
-    },
-    vendor: {
-        kenneyManifest: 'demo/vendor/kenney/manifest.json',
-    },
-} as const;
diff --git a/examples/assets/demo/sound-sprites/digital/digital.json b/examples/assets/demo/sound-sprites/digital/digital.json
index cade8e993..c63ebce21 100644
--- a/examples/assets/demo/sound-sprites/digital/digital.json
+++ b/examples/assets/demo/sound-sprites/digital/digital.json
@@ -1 +1 @@
-{"sprites":{"powerUp":{"start":0,"duration":1.2016},"laser":{"start":1.3016,"duration":1.1004}}}
+{"powerUp":{"start":0,"end":1.2016},"laser":{"start":1.3016,"end":2.402}}
diff --git a/examples/assets/demo/sound-sprites/impacts/impacts.json b/examples/assets/demo/sound-sprites/impacts/impacts.json
index ec616afc7..563b5f819 100644
--- a/examples/assets/demo/sound-sprites/impacts/impacts.json
+++ b/examples/assets/demo/sound-sprites/impacts/impacts.json
@@ -1 +1 @@
-{"sprites":{"impactLight":{"start":0,"duration":0.1387},"impactHeavy":{"start":0.2387,"duration":0.1677},"impactWood":{"start":0.5063,"duration":0.3327}}}
+{"impactLight":{"start":0,"end":0.1387},"impactHeavy":{"start":0.2387,"end":0.4064},"impactWood":{"start":0.5063,"end":0.839}}
diff --git a/examples/assets/demo/sound-sprites/ui/ui.json b/examples/assets/demo/sound-sprites/ui/ui.json
index d6549df6a..bb20cadd0 100644
--- a/examples/assets/demo/sound-sprites/ui/ui.json
+++ b/examples/assets/demo/sound-sprites/ui/ui.json
@@ -1 +1 @@
-{"sprites":{"uiClick":{"start":0,"duration":0.1},"uiConfirm":{"start":0.2,"duration":0.2898},"uiBong":{"start":0.5899,"duration":0.1228},"back":{"start":0.8127,"duration":0.0639},"clickAlt":{"start":0.9766,"duration":0.3671},"switch":{"start":1.4437,"duration":0.2273}}}
+{"uiClick":{"start":0,"end":0.1},"uiConfirm":{"start":0.2,"end":0.4898},"uiBong":{"start":0.5899,"end":0.7127},"back":{"start":0.8127,"end":0.8766},"clickAlt":{"start":0.9766,"end":1.3437},"switch":{"start":1.4437,"end":1.671}}
diff --git a/examples/assets/demo/video/clips/hdr10.webm b/examples/assets/demo/video/clips/hdr10.webm
new file mode 100644
index 000000000..c9ea0cf1d
Binary files /dev/null and b/examples/assets/demo/video/clips/hdr10.webm differ
diff --git a/examples/assets/demo/video/clips/high-fps.webm b/examples/assets/demo/video/clips/high-fps.webm
new file mode 100644
index 000000000..8821e33cb
Binary files /dev/null and b/examples/assets/demo/video/clips/high-fps.webm differ
diff --git a/examples/assets/demo/video/clips/high-res.mp4 b/examples/assets/demo/video/clips/high-res.mp4
new file mode 100644
index 000000000..c63c8a160
Binary files /dev/null and b/examples/assets/demo/video/clips/high-res.mp4 differ
diff --git a/examples/assets/index.js b/examples/assets/index.js
deleted file mode 100644
index 08fd335bb..000000000
--- a/examples/assets/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// Auto-generated from index.ts - edit the .ts source, not this file.
-export { assets } from './assets.js';
diff --git a/examples/assets/index.ts b/examples/assets/index.ts
deleted file mode 100644
index 0352eb349..000000000
--- a/examples/assets/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { Assets } from './assets.js';
-export { assets } from './assets.js';
diff --git a/examples/assets/resolver.js b/examples/assets/resolver.js
deleted file mode 100644
index 5f1ea314f..000000000
--- a/examples/assets/resolver.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// Auto-generated from resolver.ts - edit the .ts source, not this file.
-export const createAssetUrl = (path, baseUrl = '/assets/') => {
-  const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
-  const normalizedPath = path.startsWith('/') ? path.slice(1) : path;
-  return `${normalizedBase}${normalizedPath}`;
-};
-export const resolveAssetCatalog = (catalog, baseUrl = '/assets/') => {
-  const resolved = {};
-  for (const [key, value] of Object.entries(catalog)) {
-    if (typeof value === 'string') {
-      resolved[key] = createAssetUrl(value, baseUrl);
-    } else if (value && typeof value === 'object') {
-      resolved[key] = resolveAssetCatalog(value, baseUrl);
-    } else {
-      resolved[key] = value;
-    }
-  }
-  return resolved;
-};
diff --git a/examples/assets/resolver.ts b/examples/assets/resolver.ts
deleted file mode 100644
index 4886738a0..000000000
--- a/examples/assets/resolver.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export const createAssetUrl = (path: string, baseUrl = '/assets/'): string => {
-  const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
-  const normalizedPath = path.startsWith('/') ? path.slice(1) : path;
-
-  return `${normalizedBase}${normalizedPath}`;
-};
-
-type ResolvedCatalog<T extends Record<string, unknown>> = {
-  [K in keyof T]: T[K] extends string ? string : T[K] extends Record<string, unknown> ? ResolvedCatalog<T[K]> : T[K];
-};
-
-export const resolveAssetCatalog = <T extends Record<string, unknown>>(catalog: T, baseUrl = '/assets/'): ResolvedCatalog<T> => {
-  const resolved = {} as Record<string, unknown>;
-
-  for (const [key, value] of Object.entries(catalog)) {
-    if (typeof value === 'string') {
-      resolved[key] = createAssetUrl(value, baseUrl);
-    } else if (value && typeof value === 'object') {
-      resolved[key] = resolveAssetCatalog(value as Record<string, unknown>, baseUrl);
-    } else {
-      resolved[key] = value;
-    }
-  }
-
-  return resolved as ResolvedCatalog<T>;
-};
diff --git a/examples/audio-basics/audio-buses.js b/examples/audio-basics/audio-buses.js
index 008e5df64..ad48ceb6c 100644
--- a/examples/audio-basics/audio-buses.js
+++ b/examples/audio-basics/audio-buses.js
@@ -1,72 +1,47 @@
 // Auto-generated from audio-buses.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, slider } from '@examples/runtime';
 class AudioBusesScene extends Scene {
   music;
   sfx;
   musicVoice;
   diagram;
   panel;
-  hud;
+  prompt;
   async load() {
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
-    this.sfx = this.loader.get(assets.demo.audio.uiClick);
+    this.music = await this.loader.load(assets.musicLoopMain);
+    this.sfx = this.loader.get(assets.soundUiClick);
   }
   init() {
     const audio = this.app.audio;
     this.diagram = new Text('Master\n  + Music: looping track\n  + Sound: click effect', { fillColor: Color.white, fontSize: 26 });
     this.diagram.setPosition(420, 180);
-    this.hud = mountControls({
-      title: 'Audio Mixer Buses',
-      status: 'Music is routed to Music. The button routes each click to Sound.',
-      hint: 'Master changes both children; Music and Sound affect only their own voices.',
-    });
-    this.panel = mountControlPanel({ title: 'Mixer' });
-    this.panel.addSlider({
-      label: 'Master',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: audio.master.volume,
-      onChange: value => {
-        audio.master.volume = value;
-      },
-    });
-    this.panel.addSlider({
-      label: 'Music',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: audio.music.volume,
-      onChange: value => {
-        audio.music.volume = value;
+    this.panel = demoPanel({
+      title: 'Mixer',
+      controls: {
+        master: slider('Master', { min: 0, max: 1, step: 0.01, value: audio.master.volume }),
+        music: slider('Music', { min: 0, max: 1, step: 0.01, value: audio.music.volume }),
+        sound: slider('Sound', { min: 0, max: 1, step: 0.01, value: audio.sound.volume }),
       },
-    });
-    this.panel.addSlider({
-      label: 'Sound',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: audio.sound.volume,
-      onChange: value => {
-        audio.sound.volume = value;
-      },
-    });
-    this.panel.addButton({
-      label: 'Play sound effect',
-      onClick: () => {
-        audio.play(this.sfx, { bus: audio.sound, volume: 0.5 });
+      actions: { 'Play sound effect': () => audio.play(this.sfx, { bus: audio.sound, volume: 0.5 }) },
+      onChange: (key, value) => {
+        audio[key].volume = value;
       },
     });
+    // The track waits for the first gesture to unlock audio, then starts.
+    this.prompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22 }).setPosition(420, 420);
     this.musicVoice = audio.play(this.music, { bus: audio.music, loop: true, volume: 0.6 });
   }
   draw(context) {
     context.render(this.diagram);
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
   destroy() {
     this.musicVoice?.stop();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.diagram?.destroy();
     super.destroy();
   }
diff --git a/examples/audio-basics/audio-buses.ts b/examples/audio-basics/audio-buses.ts
index 658e0d05f..04adf6228 100644
--- a/examples/audio-basics/audio-buses.ts
+++ b/examples/audio-basics/audio-buses.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -10,19 +9,20 @@ import {
   Text,
   type Voice,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { type DemoPanel, demoPanel, slider, type SliderSpec } from '@examples/runtime';
 
 class AudioBusesScene extends Scene {
   private music!: AudioStream;
   private sfx!: Sound;
   private musicVoice!: Voice;
   private diagram!: Text;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ master: SliderSpec; music: SliderSpec; sound: SliderSpec }>;
+  private prompt!: Text;
 
   override async load(): Promise<void> {
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
-    this.sfx = this.loader.get(assets.demo.audio.uiClick);
+    this.music = await this.loader.load(assets.musicLoopMain);
+    this.sfx = this.loader.get(assets.soundUiClick);
   }
 
   override init(): void {
@@ -30,60 +30,35 @@ class AudioBusesScene extends Scene {
     this.diagram = new Text('Master\n  + Music: looping track\n  + Sound: click effect', { fillColor: Color.white, fontSize: 26 });
     this.diagram.setPosition(420, 180);
 
-    this.hud = mountControls({
-      title: 'Audio Mixer Buses',
-      status: 'Music is routed to Music. The button routes each click to Sound.',
-      hint: 'Master changes both children; Music and Sound affect only their own voices.',
-    });
-    this.panel = mountControlPanel({ title: 'Mixer' });
-    this.panel.addSlider({
-      label: 'Master',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: audio.master.volume,
-      onChange: value => {
-        audio.master.volume = value;
-      },
-    });
-    this.panel.addSlider({
-      label: 'Music',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: audio.music.volume,
-      onChange: value => {
-        audio.music.volume = value;
+    this.panel = demoPanel({
+      title: 'Mixer',
+      controls: {
+        master: slider('Master', { min: 0, max: 1, step: 0.01, value: audio.master.volume }),
+        music: slider('Music', { min: 0, max: 1, step: 0.01, value: audio.music.volume }),
+        sound: slider('Sound', { min: 0, max: 1, step: 0.01, value: audio.sound.volume }),
       },
-    });
-    this.panel.addSlider({
-      label: 'Sound',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: audio.sound.volume,
-      onChange: value => {
-        audio.sound.volume = value;
-      },
-    });
-    this.panel.addButton({
-      label: 'Play sound effect',
-      onClick: () => {
-        audio.play(this.sfx, { bus: audio.sound, volume: 0.5 });
+      actions: { 'Play sound effect': () => audio.play(this.sfx, { bus: audio.sound, volume: 0.5 }) },
+      onChange: (key, value) => {
+        audio[key].volume = value;
       },
     });
 
+    // The track waits for the first gesture to unlock audio, then starts.
+    this.prompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22 }).setPosition(420, 420);
     this.musicVoice = audio.play(this.music, { bus: audio.music, loop: true, volume: 0.6 });
   }
 
   override draw(context: RenderingContext): void {
     context.render(this.diagram);
+
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
 
   override destroy(): void {
     this.musicVoice?.stop();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.diagram?.destroy();
     super.destroy();
   }
diff --git a/examples/audio-basics/crossfade-tracks.js b/examples/audio-basics/crossfade-tracks.js
index 24c176c9a..971c59635 100644
--- a/examples/audio-basics/crossfade-tracks.js
+++ b/examples/audio-basics/crossfade-tracks.js
@@ -1,6 +1,7 @@
 // Auto-generated from crossfade-tracks.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, crossFade, FixedResolutionCanvasSizing, Graphics, Scene, Text, Time } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Color, crossFade, FixedResolutionCanvasSizing, Graphics, Scene, Text, Time } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel } from '@examples/runtime';
 const PEAK = 0.7;
 const COLOR_A = new Color(120, 200, 255);
 const COLOR_B = new Color(255, 160, 120);
@@ -25,7 +26,6 @@ class CrossfadeTracksScene extends Scene {
   meterAX = 0;
   meterBX = 0;
   meterBaseY = 0;
-  hud;
   panel;
   async load() {
     const app = this.app;
@@ -38,10 +38,7 @@ class CrossfadeTracksScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so each
     // track is loaded directly through `Asset.type('music', ...)` and awaited. Both
     // tracks loop; the crossfade only swaps which one is audible.
-    [this.trackA, this.trackB] = await Promise.all([
-      this.loader.load(Asset.type('music', assets.demo.audio.musicA)),
-      this.loader.load(Asset.type('music', assets.demo.audio.musicB)),
-    ]);
+    [this.trackA, this.trackB] = await Promise.all([this.loader.load(assets.musicLoopA), this.loader.load(assets.musicLoopB)]);
     this.graphics = new Graphics();
     this.labelA = new Text('Track A', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
@@ -57,26 +54,28 @@ class CrossfadeTracksScene extends Scene {
     this.tapPrompt = new Text('Click or press any key to start audio', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
-    this.hud = mountControls({
-      title: 'Crossfade Tracks',
-      controls: [{ keys: 'Choose A or B', action: 'crossfade between looping tracks (2s)' }],
-      status: 'Click or press any key to start…',
-      hint: 'The meter follows the same two-second interval scheduled for the voice gains.',
-    });
-    this.panel = mountControlPanel({ title: 'Select track' });
-    this.panel.addButton({ label: 'Track A', onClick: () => this.selectTrack(0) });
-    this.panel.addButton({ label: 'Track B', onClick: () => this.selectTrack(1) });
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - start both loops (B silent) so
     // crossFade only has to ramp gains rather than start playback mid-fade.
     this.trackAVoice = app.audio.play(this.trackA, { loop: true, volume: PEAK });
     this.trackBVoice = app.audio.play(this.trackB, { loop: true, volume: 0 });
-    this.hud.setStatus('Track A active - choose a track to crossfade.');
+    this.panel = demoPanel({
+      title: 'Crossfade',
+      corner: 'bottom-left',
+      controls: { track: choice('Track', ['Track A', 'Track B']) },
+      onChange: (_key, value) => this.selectTrack(value === 'Track B' ? 1 : 0),
+    });
   }
   selectTrack(target) {
-    if (this.app.audio.locked || this.fadeElapsed < this.fadeDuration || target === this.mix) {
+    if (target === this.fadeTo) {
       return;
     }
+    if (this.app.audio.locked) {
+      this.panel.set('track', this.fadeTo === 1 ? 'Track B' : 'Track A');
+      return;
+    }
+    // A new choice mid-fade restarts from the current mix; crossFade ramps the
+    // voice gains from where they are, so the meter and the audio stay together.
     this.fadeFrom = this.mix;
     this.fadeTo = target;
     this.fadeElapsed = 0;
@@ -85,7 +84,6 @@ class CrossfadeTracksScene extends Scene {
     } else {
       void crossFade(this.trackBVoice, this.trackAVoice, Time.seconds(this.fadeDuration), { toVolume: PEAK, stopAfter: false });
     }
-    this.hud.setStatus(`Crossfading to Track ${target === 1 ? 'B' : 'A'}…`);
   }
   update(delta) {
     if (this.fadeElapsed >= this.fadeDuration) {
@@ -93,9 +91,6 @@ class CrossfadeTracksScene extends Scene {
     }
     this.fadeElapsed = Math.min(this.fadeDuration, this.fadeElapsed + delta);
     this.mix = this.fadeFrom + (this.fadeTo - this.fadeFrom) * (this.fadeElapsed / this.fadeDuration);
-    if (this.fadeElapsed === this.fadeDuration) {
-      this.hud.setStatus(`Track ${this.fadeTo === 1 ? 'B' : 'A'} active.`);
-    }
   }
   drawMeter(x, level, active, color) {
     const height = METER_H;
@@ -139,7 +134,6 @@ class CrossfadeTracksScene extends Scene {
     this.trackAVoice?.stop();
     this.trackBVoice?.stop();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.graphics?.destroy();
     this.labelA?.destroy();
     this.labelB?.destroy();
diff --git a/examples/audio-basics/crossfade-tracks.ts b/examples/audio-basics/crossfade-tracks.ts
index 9fa98a5e3..b1dbfd8b9 100644
--- a/examples/audio-basics/crossfade-tracks.ts
+++ b/examples/audio-basics/crossfade-tracks.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   crossFade,
@@ -13,7 +12,8 @@ import {
   Time,
   type Voice,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel } from '@examples/runtime';
 
 const PEAK = 0.7;
 const COLOR_A = new Color(120, 200, 255);
@@ -41,8 +41,7 @@ class CrossfadeTracksScene extends Scene {
   private meterAX = 0;
   private meterBX = 0;
   private meterBaseY = 0;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: DemoPanel<{ track: ChoiceSpec<'Track A' | 'Track B'> }>;
 
   override async load(): Promise<void> {
     const app = this.app;
@@ -57,10 +56,7 @@ class CrossfadeTracksScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so each
     // track is loaded directly through `Asset.type('music', ...)` and awaited. Both
     // tracks loop; the crossfade only swaps which one is audible.
-    [this.trackA, this.trackB] = await Promise.all([
-      this.loader.load(Asset.type('music', assets.demo.audio.musicA)),
-      this.loader.load(Asset.type('music', assets.demo.audio.musicB)),
-    ]);
+    [this.trackA, this.trackB] = await Promise.all([this.loader.load(assets.musicLoopA), this.loader.load(assets.musicLoopB)]);
 
     this.graphics = new Graphics();
     this.labelA = new Text('Track A', { fillColor: Color.white, fontSize: 22, align: 'center' })
@@ -79,29 +75,33 @@ class CrossfadeTracksScene extends Scene {
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
 
-    this.hud = mountControls({
-      title: 'Crossfade Tracks',
-      controls: [{ keys: 'Choose A or B', action: 'crossfade between looping tracks (2s)' }],
-      status: 'Click or press any key to start…',
-      hint: 'The meter follows the same two-second interval scheduled for the voice gains.',
-    });
-    this.panel = mountControlPanel({ title: 'Select track' });
-    this.panel.addButton({ label: 'Track A', onClick: () => this.selectTrack(0) });
-    this.panel.addButton({ label: 'Track B', onClick: () => this.selectTrack(1) });
-
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - start both loops (B silent) so
     // crossFade only has to ramp gains rather than start playback mid-fade.
     this.trackAVoice = app.audio.play(this.trackA, { loop: true, volume: PEAK });
     this.trackBVoice = app.audio.play(this.trackB, { loop: true, volume: 0 });
-    this.hud.setStatus('Track A active - choose a track to crossfade.');
+
+    this.panel = demoPanel({
+      title: 'Crossfade',
+      corner: 'bottom-left',
+      controls: { track: choice('Track', ['Track A', 'Track B']) },
+      onChange: (_key, value) => this.selectTrack(value === 'Track B' ? 1 : 0),
+    });
   }
 
   private selectTrack(target: 0 | 1): void {
-    if (this.app.audio.locked || this.fadeElapsed < this.fadeDuration || target === this.mix) {
+    if (target === this.fadeTo) {
       return;
     }
 
+    if (this.app.audio.locked) {
+      this.panel.set('track', this.fadeTo === 1 ? 'Track B' : 'Track A');
+
+      return;
+    }
+
+    // A new choice mid-fade restarts from the current mix; crossFade ramps the
+    // voice gains from where they are, so the meter and the audio stay together.
     this.fadeFrom = this.mix;
     this.fadeTo = target;
     this.fadeElapsed = 0;
@@ -111,8 +111,6 @@ class CrossfadeTracksScene extends Scene {
     } else {
       void crossFade(this.trackBVoice, this.trackAVoice, Time.seconds(this.fadeDuration), { toVolume: PEAK, stopAfter: false });
     }
-
-    this.hud.setStatus(`Crossfading to Track ${target === 1 ? 'B' : 'A'}…`);
   }
 
   override update(delta: Seconds): void {
@@ -122,10 +120,6 @@ class CrossfadeTracksScene extends Scene {
 
     this.fadeElapsed = Math.min(this.fadeDuration, this.fadeElapsed + delta);
     this.mix = this.fadeFrom + (this.fadeTo - this.fadeFrom) * (this.fadeElapsed / this.fadeDuration);
-
-    if (this.fadeElapsed === this.fadeDuration) {
-      this.hud.setStatus(`Track ${this.fadeTo === 1 ? 'B' : 'A'} active.`);
-    }
   }
 
   private drawMeter(x: number, level: number, active: boolean, color: Color): void {
@@ -180,7 +174,6 @@ class CrossfadeTracksScene extends Scene {
     this.trackAVoice?.stop();
     this.trackBVoice?.stop();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.graphics?.destroy();
     this.labelA?.destroy();
     this.labelB?.destroy();
diff --git a/examples/audio-basics/music-loop.js b/examples/audio-basics/music-loop.js
index 068816a04..dbee8866d 100644
--- a/examples/audio-basics/music-loop.js
+++ b/examples/audio-basics/music-loop.js
@@ -1,6 +1,7 @@
 // Auto-generated from music-loop.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, slider, toggle } from '@examples/runtime';
 class MusicLoopScene extends Scene {
   music;
   musicVoice;
@@ -9,23 +10,19 @@ class MusicLoopScene extends Scene {
   tapPrompt;
   // Progress bar geometry, canvas-relative, computed in init().
   bar = { x: 0, y: 0, w: 0, h: 28 };
-  hud;
-  panel;
   async load() {
     const app = this.app;
     const { width, height } = app;
     // Wide progress bar centred horizontally on the 16:9 canvas.
     this.bar = { x: width * 0.15, y: height * 0.5, w: width * 0.7, h: 28 };
     // A single streaming track - the browser's media pipeline loops it
-    // seamlessly when `loop` is on, so no duplicate/silent track is needed.
-    // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
-    // is loaded directly through `Asset.type('music', ...)` and awaited rather
-    // than adopted from an `Assets.from` catalog leaf.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    // seamlessly when `loop` is on. Music has no placeholder handle, so it is
+    // awaited with `load()` rather than claimed with `get()`.
+    this.music = await this.loader.load(assets.musicLoopMain);
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now,
     // and all live control (volume, rate, loop, seek) lives on it.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.7, playbackRate: 1 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.5, playbackRate: 1 });
     this.graphics = new Graphics();
     this.status = new Text('', { fillColor: Color.white, fontSize: 18 }).setPosition(this.bar.x, this.bar.y - 36);
     // Shown while the browser still blocks audio (`app.audio.locked`); the
@@ -33,51 +30,41 @@ class MusicLoopScene extends Scene {
     this.tapPrompt = new Text('Click or press any key to start audio', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
-    this.hud = mountControls({
-      title: 'Music Loop',
-      controls: [{ keys: 'Panel', action: 'adjust volume, playback rate, and looping' }],
-      status: 'Click or press any key to start the track…',
-      hint: 'The bar shows playback position. With Loop off, the track plays once and stops; turn Loop on to repeat seamlessly.',
-    });
     // Real, engine-backed controls over the live music Voice.
-    this.panel = mountControlPanel({ title: 'Music', corner: 'bottom-left' });
-    this.panel.addSlider({
-      label: 'Volume',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: this.musicVoice.volume,
-      onChange: value => (this.musicVoice.volume = value),
-    });
-    this.panel.addSlider({
-      label: 'Playback rate',
-      min: 0.5,
-      max: 2,
-      step: 0.05,
-      value: this.musicVoice.playbackRate,
-      onChange: value => (this.musicVoice.playbackRate = value),
-    });
-    this.panel.addToggle({
-      label: 'Loop',
-      value: this.musicVoice.loop,
-      onChange: on => {
-        this.musicVoice.loop = on;
-        // Re-running off the end: if the track already finished while
-        // loop was off, re-enabling and playing restarts it.
-        if (on && this.musicVoice.paused) {
-          this.musicVoice.seek(0);
-          this.musicVoice.resume();
-        }
+    const voice = this.musicVoice;
+    const togglePause = () => {
+      if (voice.paused || voice.ended) {
+        voice.resume();
+      } else {
+        voice.pause();
+      }
+    };
+    demoPanel({
+      title: 'Music',
+      controls: {
+        volume: slider('Volume', { min: 0, max: 1, step: 0.01, value: voice.volume }),
+        rate: slider('Playback rate', { min: 0.5, max: 2, step: 0.05, value: voice.playbackRate, format: v => `${Math.round(v * 100)}%` }),
+        loop: toggle('Loop', voice.loop),
       },
-    });
-    this.panel.addButton({
-      label: 'Restart',
-      onClick: () => {
-        this.musicVoice.seek(0);
-        this.musicVoice.resume();
+      actions: {
+        'Pause / resume': togglePause,
+        Restart: () => {
+          voice.seek(0);
+          voice.resume();
+        },
+      },
+      onChange: (key, _value, values) => {
+        voice.volume = values.volume;
+        voice.playbackRate = values.rate;
+        voice.loop = values.loop;
+        // Re-enabling the loop after the track ran off its end restarts it.
+        if (key === 'loop' && values.loop && voice.ended) {
+          voice.seek(0);
+          voice.resume();
+        }
       },
     });
-    this.hud.setStatus('Playing — use the panel to mix.');
+    this.inputs.onTrigger(Keyboard.Space, togglePause);
   }
   draw(context) {
     const app = this.app;
diff --git a/examples/audio-basics/music-loop.ts b/examples/audio-basics/music-loop.ts
index e94e560d5..7fb63dcab 100644
--- a/examples/audio-basics/music-loop.ts
+++ b/examples/audio-basics/music-loop.ts
@@ -1,10 +1,10 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
   Graphics,
+  Keyboard,
   type Loopable,
   type Pausable,
   type RatePitched,
@@ -14,7 +14,8 @@ import {
   Text,
   type Voice,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, slider, toggle } from '@examples/runtime';
 
 class MusicLoopScene extends Scene {
   private music!: AudioStream;
@@ -24,8 +25,6 @@ class MusicLoopScene extends Scene {
   private tapPrompt!: Text;
   // Progress bar geometry, canvas-relative, computed in init().
   private bar = { x: 0, y: 0, w: 0, h: 28 };
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
 
   override async load(): Promise<void> {
     const app = this.app;
@@ -35,16 +34,14 @@ class MusicLoopScene extends Scene {
     this.bar = { x: width * 0.15, y: height * 0.5, w: width * 0.7, h: 28 };
 
     // A single streaming track - the browser's media pipeline loops it
-    // seamlessly when `loop` is on, so no duplicate/silent track is needed.
-    // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
-    // is loaded directly through `Asset.type('music', ...)` and awaited rather
-    // than adopted from an `Assets.from` catalog leaf.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    // seamlessly when `loop` is on. Music has no placeholder handle, so it is
+    // awaited with `load()` rather than claimed with `get()`.
+    this.music = await this.loader.load(assets.musicLoopMain);
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now,
     // and all live control (volume, rate, loop, seek) lives on it.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.7, playbackRate: 1 }) as Voice &
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.5, playbackRate: 1 }) as Voice &
       Seekable &
       Pausable &
       Loopable &
@@ -59,54 +56,45 @@ class MusicLoopScene extends Scene {
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
 
-    this.hud = mountControls({
-      title: 'Music Loop',
-      controls: [{ keys: 'Panel', action: 'adjust volume, playback rate, and looping' }],
-      status: 'Click or press any key to start the track…',
-      hint: 'The bar shows playback position. With Loop off, the track plays once and stops; turn Loop on to repeat seamlessly.',
-    });
-
     // Real, engine-backed controls over the live music Voice.
-    this.panel = mountControlPanel({ title: 'Music', corner: 'bottom-left' });
-    this.panel.addSlider({
-      label: 'Volume',
-      min: 0,
-      max: 1,
-      step: 0.01,
-      value: this.musicVoice.volume,
-      onChange: value => (this.musicVoice.volume = value),
-    });
-    this.panel.addSlider({
-      label: 'Playback rate',
-      min: 0.5,
-      max: 2,
-      step: 0.05,
-      value: this.musicVoice.playbackRate,
-      onChange: value => (this.musicVoice.playbackRate = value),
-    });
-    this.panel.addToggle({
-      label: 'Loop',
-      value: this.musicVoice.loop,
-      onChange: on => {
-        this.musicVoice.loop = on;
-
-        // Re-running off the end: if the track already finished while
-        // loop was off, re-enabling and playing restarts it.
-        if (on && this.musicVoice.paused) {
-          this.musicVoice.seek(0);
-          this.musicVoice.resume();
-        }
+    const voice = this.musicVoice;
+
+    const togglePause = (): void => {
+      if (voice.paused || voice.ended) {
+        voice.resume();
+      } else {
+        voice.pause();
+      }
+    };
+
+    demoPanel({
+      title: 'Music',
+      controls: {
+        volume: slider('Volume', { min: 0, max: 1, step: 0.01, value: voice.volume }),
+        rate: slider('Playback rate', { min: 0.5, max: 2, step: 0.05, value: voice.playbackRate, format: v => `${Math.round(v * 100)}%` }),
+        loop: toggle('Loop', voice.loop),
       },
-    });
-    this.panel.addButton({
-      label: 'Restart',
-      onClick: () => {
-        this.musicVoice.seek(0);
-        this.musicVoice.resume();
+      actions: {
+        'Pause / resume': togglePause,
+        Restart: () => {
+          voice.seek(0);
+          voice.resume();
+        },
+      },
+      onChange: (key, _value, values) => {
+        voice.volume = values.volume;
+        voice.playbackRate = values.rate;
+        voice.loop = values.loop;
+
+        // Re-enabling the loop after the track ran off its end restarts it.
+        if (key === 'loop' && values.loop && voice.ended) {
+          voice.seek(0);
+          voice.resume();
+        }
       },
     });
 
-    this.hud.setStatus('Playing — use the panel to mix.');
+    this.inputs.onTrigger(Keyboard.Space, togglePause);
   }
 
   override draw(context: RenderingContext): void {
diff --git a/examples/audio-basics/play-sound.js b/examples/audio-basics/play-sound.js
index ab1d8d272..c53e584b7 100644
--- a/examples/audio-basics/play-sound.js
+++ b/examples/audio-basics/play-sound.js
@@ -1,7 +1,14 @@
 // Auto-generated from play-sound.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 // A small pool of different UI sounds so repeated taps stay interesting.
-const SOUND_KEYS = ['uiClick', 'uiConfirm', 'uiBong', 'impactLight', 'impactHeavy'];
+const SOUNDS = [
+  { name: 'UI click', asset: assets.soundUiClick },
+  { name: 'UI confirm', asset: assets.soundUiConfirm },
+  { name: 'UI bong', asset: assets.soundUiBong },
+  { name: 'Light impact', asset: assets.soundImpactLight },
+  { name: 'Heavy impact', asset: assets.soundImpactHeavy },
+];
 class PlaySoundScene extends Scene {
   sounds;
   text;
@@ -11,10 +18,7 @@ class PlaySoundScene extends Scene {
     const { width, height } = app;
     // Keep example SFX comfortable - full volume is jarring in the docs.
     app.audio.sound.volume = 0.5;
-    // Path-only get() infers Sound from the .ogg extension - sidesteps a
-    // compile-time overload ambiguity between Sound and the Json token form
-    // when passing the Sound token explicitly.
-    this.sounds = SOUND_KEYS.map(key => this.loader.get(assets.demo.audio[key]));
+    this.sounds = SOUNDS.map(sound => this.loader.get(sound.asset));
     this.text = new Text('Click anywhere to play SFX', { fillColor: Color.white, fontSize: 24, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height / 2);
@@ -23,7 +27,7 @@ class PlaySoundScene extends Scene {
       const sound = this.sounds[this.index];
       this.index = (this.index + 1) % this.sounds.length;
       app.audio.play(sound);
-      this.text.text = `Playing: ${SOUND_KEYS[(this.index + this.sounds.length - 1) % this.sounds.length]}`;
+      this.text.text = `Playing: ${SOUNDS[(this.index + this.sounds.length - 1) % this.sounds.length].name}`;
     });
   }
   draw(context) {
diff --git a/examples/audio-basics/play-sound.ts b/examples/audio-basics/play-sound.ts
index 74336530d..49d11cd3b 100644
--- a/examples/audio-basics/play-sound.ts
+++ b/examples/audio-basics/play-sound.ts
@@ -1,7 +1,14 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, type Sound, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 // A small pool of different UI sounds so repeated taps stay interesting.
-const SOUND_KEYS = ['uiClick', 'uiConfirm', 'uiBong', 'impactLight', 'impactHeavy'] as const;
+const SOUNDS = [
+  { name: 'UI click', asset: assets.soundUiClick },
+  { name: 'UI confirm', asset: assets.soundUiConfirm },
+  { name: 'UI bong', asset: assets.soundUiBong },
+  { name: 'Light impact', asset: assets.soundImpactLight },
+  { name: 'Heavy impact', asset: assets.soundImpactHeavy },
+];
 
 class PlaySoundScene extends Scene {
   private sounds!: Sound[];
@@ -15,10 +22,7 @@ class PlaySoundScene extends Scene {
     // Keep example SFX comfortable - full volume is jarring in the docs.
     app.audio.sound.volume = 0.5;
 
-    // Path-only get() infers Sound from the .ogg extension - sidesteps a
-    // compile-time overload ambiguity between Sound and the Json token form
-    // when passing the Sound token explicitly.
-    this.sounds = SOUND_KEYS.map(key => this.loader.get(assets.demo.audio[key]));
+    this.sounds = SOUNDS.map(sound => this.loader.get(sound.asset));
     this.text = new Text('Click anywhere to play SFX', { fillColor: Color.white, fontSize: 24, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height / 2);
@@ -27,7 +31,7 @@ class PlaySoundScene extends Scene {
       const sound = this.sounds[this.index];
       this.index = (this.index + 1) % this.sounds.length;
       app.audio.play(sound);
-      this.text.text = `Playing: ${SOUND_KEYS[(this.index + this.sounds.length - 1) % this.sounds.length]}`;
+      this.text.text = `Playing: ${SOUNDS[(this.index + this.sounds.length - 1) % this.sounds.length]!.name}`;
     });
   }
 
diff --git a/examples/audio-basics/random-pitch-pool.js b/examples/audio-basics/random-pitch-pool.js
index 88a79ade6..b577cd1e7 100644
--- a/examples/audio-basics/random-pitch-pool.js
+++ b/examples/audio-basics/random-pitch-pool.js
@@ -1,5 +1,6 @@
 // Auto-generated from random-pitch-pool.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const DETUNE_RANGE = 200; // ± cents
 const FIRE_INTERVAL = 0.08;
@@ -27,7 +28,7 @@ class RandomPitchPoolScene extends Scene {
     // Path-only get() infers Sound from the .ogg extension - sidesteps a
     // compile-time overload ambiguity between Sound and the Json token form
     // when passing the Sound token explicitly.
-    this.sound = this.loader.get(assets.demo.audio.impactLight);
+    this.sound = this.loader.get(assets.soundImpactLight);
     this.sound.poolSize = 20;
     this.graphics = new Graphics();
     this.label = new Text('Hold Space to retrigger with a random pitch', { fillColor: Color.white, fontSize: 22, align: 'center' })
diff --git a/examples/audio-basics/random-pitch-pool.ts b/examples/audio-basics/random-pitch-pool.ts
index 4e556caa8..2f41371b9 100644
--- a/examples/audio-basics/random-pitch-pool.ts
+++ b/examples/audio-basics/random-pitch-pool.ts
@@ -10,6 +10,7 @@ import {
   type Sound,
   Text,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 const DETUNE_RANGE = 200; // ± cents
@@ -42,7 +43,7 @@ class RandomPitchPoolScene extends Scene {
     // Path-only get() infers Sound from the .ogg extension - sidesteps a
     // compile-time overload ambiguity between Sound and the Json token form
     // when passing the Sound token explicitly.
-    this.sound = this.loader.get(assets.demo.audio.impactLight);
+    this.sound = this.loader.get(assets.soundImpactLight);
     this.sound.poolSize = 20;
 
     this.graphics = new Graphics();
diff --git a/examples/audio-basics/sound-pool.js b/examples/audio-basics/sound-pool.js
index f932bc458..029b5f446 100644
--- a/examples/audio-basics/sound-pool.js
+++ b/examples/audio-basics/sound-pool.js
@@ -1,6 +1,6 @@
 // Auto-generated from sound-pool.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Text } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const POOL_SIZE = 12;
 const FIRE_INTERVAL = 0.04;
 class SoundPoolScene extends Scene {
@@ -18,19 +18,19 @@ class SoundPoolScene extends Scene {
   clock = 0;
   evictions = 0;
   lastDetune = 0;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
     // impactHeavy is long enough (~0.5 s) that rapid fire actually overlaps -
     // a short click ends before the next shot and the pool never fills.
-    // Path-only get() infers Sound from the .ogg extension - sidesteps a
-    // compile-time overload ambiguity between Sound and the Json token form
-    // when passing the Sound token explicitly.
-    this.sound = this.loader.get(assets.demo.audio.impactHeavy);
+    this.sound = this.loader.get(assets.soundImpactHeavy);
     this.sound.poolSize = POOL_SIZE;
     this.graphics = new Graphics();
-    this.label = new Text('Hold Space to fire faster than voices finish', { fillColor: Color.white, fontSize: 22, align: 'center' })
+    this.label = new Text('Hold Space, a mouse button or a finger to fire faster than voices finish', {
+      fillColor: Color.white,
+      fontSize: 22,
+      align: 'center',
+    })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height * 0.22);
     this.readout = new Text('', { fillColor: Color.white, fontSize: 20, align: 'center' })
@@ -42,21 +42,15 @@ class SoundPoolScene extends Scene {
     this.tapPrompt = new Text('Click or press any key to start audio', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
-    this.hud = mountControls({
-      title: 'Polyphonic Sound',
-      controls: [
-        { keys: 'Click', action: 'enable audio (once)' },
-        { keys: 'Space', action: 'hold to spawn voices into the pool' },
-      ],
-      status: 'Click or press any key to enable audio, then hold Space.',
-      hint: `The pool caps at ${POOL_SIZE} voices. Each shot varies pitch; at capacity, the oldest voice is evicted.`,
-    });
     this.inputs.onActive(Keyboard.Space, () => {
       this.firing = true;
     });
     this.inputs.onStop(Keyboard.Space, () => {
       this.firing = false;
     });
+    // Holding a pointer or a finger fires as well, so touch devices can fill the pool.
+    app.input.onPointerDown.add(() => (this.firing = true));
+    app.input.onPointerUp.add(() => (this.firing = false));
   }
   spawnVoice() {
     const app = this.app;
@@ -71,7 +65,8 @@ class SoundPoolScene extends Scene {
     const playbackRate = 0.85 + Math.random() * 0.3;
     this.lastDetune = 1200 * Math.log2(playbackRate);
     this.voices.push(this.clock + this.sound.duration / playbackRate);
-    app.audio.play(this.sound, { playbackRate, volume: 0.5 });
+    // Up to POOL_SIZE impacts overlap, so each one is quiet on its own.
+    app.audio.play(this.sound, { playbackRate, volume: 0.3 });
   }
   update(delta) {
     const app = this.app;
@@ -120,10 +115,6 @@ class SoundPoolScene extends Scene {
       context.render(this.tapPrompt);
     }
   }
-  destroy() {
-    this.hud.dispose();
-    super.destroy();
-  }
 }
 const app = new Application({
   scenes: { SoundPoolScene },
diff --git a/examples/audio-basics/sound-pool.ts b/examples/audio-basics/sound-pool.ts
index 6ccd0fdd8..3b81e4c44 100644
--- a/examples/audio-basics/sound-pool.ts
+++ b/examples/audio-basics/sound-pool.ts
@@ -10,7 +10,7 @@ import {
   type Sound,
   Text,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const POOL_SIZE = 12;
 const FIRE_INTERVAL = 0.04;
@@ -30,7 +30,6 @@ class SoundPoolScene extends Scene {
   private clock = 0;
   private evictions = 0;
   private lastDetune = 0;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const app = this.app;
@@ -38,14 +37,15 @@ class SoundPoolScene extends Scene {
 
     // impactHeavy is long enough (~0.5 s) that rapid fire actually overlaps -
     // a short click ends before the next shot and the pool never fills.
-    // Path-only get() infers Sound from the .ogg extension - sidesteps a
-    // compile-time overload ambiguity between Sound and the Json token form
-    // when passing the Sound token explicitly.
-    this.sound = this.loader.get(assets.demo.audio.impactHeavy);
+    this.sound = this.loader.get(assets.soundImpactHeavy);
     this.sound.poolSize = POOL_SIZE;
 
     this.graphics = new Graphics();
-    this.label = new Text('Hold Space to fire faster than voices finish', { fillColor: Color.white, fontSize: 22, align: 'center' })
+    this.label = new Text('Hold Space, a mouse button or a finger to fire faster than voices finish', {
+      fillColor: Color.white,
+      fontSize: 22,
+      align: 'center',
+    })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height * 0.22);
     this.readout = new Text('', { fillColor: Color.white, fontSize: 20, align: 'center' })
@@ -59,22 +59,15 @@ class SoundPoolScene extends Scene {
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
 
-    this.hud = mountControls({
-      title: 'Polyphonic Sound',
-      controls: [
-        { keys: 'Click', action: 'enable audio (once)' },
-        { keys: 'Space', action: 'hold to spawn voices into the pool' },
-      ],
-      status: 'Click or press any key to enable audio, then hold Space.',
-      hint: `The pool caps at ${POOL_SIZE} voices. Each shot varies pitch; at capacity, the oldest voice is evicted.`,
-    });
-
     this.inputs.onActive(Keyboard.Space, () => {
       this.firing = true;
     });
     this.inputs.onStop(Keyboard.Space, () => {
       this.firing = false;
     });
+    // Holding a pointer or a finger fires as well, so touch devices can fill the pool.
+    app.input.onPointerDown.add(() => (this.firing = true));
+    app.input.onPointerUp.add(() => (this.firing = false));
   }
 
   private spawnVoice(): void {
@@ -92,7 +85,8 @@ class SoundPoolScene extends Scene {
     const playbackRate = 0.85 + Math.random() * 0.3;
     this.lastDetune = 1200 * Math.log2(playbackRate);
     this.voices.push(this.clock + this.sound.duration / playbackRate);
-    app.audio.play(this.sound, { playbackRate, volume: 0.5 });
+    // Up to POOL_SIZE impacts overlap, so each one is quiet on its own.
+    app.audio.play(this.sound, { playbackRate, volume: 0.3 });
   }
 
   override update(delta: Seconds): void {
@@ -154,11 +148,6 @@ class SoundPoolScene extends Scene {
       context.render(this.tapPrompt);
     }
   }
-
-  override destroy(): void {
-    this.hud.dispose();
-    super.destroy();
-  }
 }
 
 const app = new Application({
diff --git a/examples/audio-fx/compressor.js b/examples/audio-fx/compressor.js
index bead0425f..00090dbda 100644
--- a/examples/audio-fx/compressor.js
+++ b/examples/audio-fx/compressor.js
@@ -1,18 +1,17 @@
 // Auto-generated from compressor.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { CompressorEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { CompressorEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, slider, toggle } from '@examples/runtime';
 class CompressorScene extends Scene {
   music;
   voice;
   compressor;
   meter = new Graphics();
   label;
-  panel;
-  hud;
   bypass = false;
   async load() {
-    this.music = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    this.music = await this.loader.load(assets.musicLoopMain);
   }
   init() {
     const audio = this.app.audio;
@@ -21,55 +20,36 @@ class CompressorScene extends Scene {
     this.voice = audio.play(this.music, { bus: audio.music, loop: true, volume: 0.15 });
     this.label = new Text('', { fillColor: Color.white, fontSize: 24 });
     this.label.setPosition(380, 280);
-    this.hud = mountControls({
+    // The loud input is hot enough to push the peaks well over the threshold
+    // without being louder than the rest of the catalog, and it ramps rather
+    // than jumps so switching never spikes.
+    demoPanel({
       title: 'Compression',
-      status: 'Quiet source. Choose Loud to push peaks over the threshold.',
-      hint: 'The red meter reads CompressorEffect.reduction from the active audio node.',
-    });
-    this.panel = mountControlPanel({ title: 'Compression' });
-    this.panel.addButton({ label: 'Quiet input', onClick: () => this.setInput(0.15) });
-    this.panel.addButton({ label: 'Loud input', onClick: () => this.setInput(1) });
-    this.panel.addToggle({
-      label: 'Bypass',
-      value: false,
-      onChange: value => {
-        if (value === this.bypass) {
-          return;
-        }
-        this.bypass = value;
-        if (value) {
-          audio.music.removeEffect(this.compressor);
-        } else {
-          audio.music.addEffect(this.compressor);
-        }
-        this.hud.setStatus(value ? 'Compressor bypassed.' : 'Compressor active. Compare Quiet and Loud input.');
-      },
-    });
-    this.panel.addSlider({
-      label: 'Threshold (dB)',
-      min: -50,
-      max: -5,
-      step: 1,
-      value: -30,
-      onChange: value => {
-        this.compressor.threshold = value;
+      controls: {
+        input: choice('Input', ['Quiet', 'Loud']),
+        bypass: toggle('Bypass'),
+        threshold: slider('Threshold (dB)', { min: -50, max: -5, step: 1, value: -30, format: v => v.toFixed(0) }),
+        ratio: slider('Ratio', { min: 1, max: 12, step: 0.5, value: 6, format: v => `${v.toFixed(1)}:1` }),
       },
-    });
-    this.panel.addSlider({
-      label: 'Ratio',
-      min: 1,
-      max: 12,
-      step: 0.5,
-      value: 6,
-      onChange: value => {
-        this.compressor.ratio = value;
+      onChange: (key, _value, values) => {
+        if (key === 'input') {
+          this.tweens
+            .create(this.voice)
+            .to({ volume: values.input === 'Loud' ? 0.6 : 0.15 }, 0.4)
+            .start();
+        } else if (key === 'bypass' && values.bypass !== this.bypass) {
+          this.bypass = values.bypass;
+          if (this.bypass) {
+            audio.music.removeEffect(this.compressor);
+          } else {
+            audio.music.addEffect(this.compressor);
+          }
+        }
+        this.compressor.threshold = values.threshold;
+        this.compressor.ratio = values.ratio;
       },
     });
   }
-  setInput(volume) {
-    this.voice.volume = volume;
-    this.hud.setStatus(`${volume === 1 ? 'Loud' : 'Quiet'} input; compressor ${this.bypass ? 'bypassed' : 'active'}.`);
-  }
   draw(context) {
     const reduction = this.bypass ? 0 : this.compressor.reduction;
     this.meter.clear();
@@ -87,8 +67,6 @@ class CompressorScene extends Scene {
       this.app.audio.music.removeEffect(this.compressor);
     }
     this.compressor?.destroy();
-    this.panel?.dispose();
-    this.hud?.dispose();
     this.meter.destroy();
     this.label?.destroy();
     super.destroy();
@@ -98,6 +76,5 @@ const app = new Application({
   scenes: { CompressorScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(CompressorScene);
diff --git a/examples/audio-fx/compressor.ts b/examples/audio-fx/compressor.ts
index ce1fd4d38..9c3dbbb0b 100644
--- a/examples/audio-fx/compressor.ts
+++ b/examples/audio-fx/compressor.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -10,8 +9,9 @@ import {
   Text,
   type Voice,
 } from '@codexo/exojs';
-import { CompressorEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { CompressorEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, slider, toggle } from '@examples/runtime';
 
 class CompressorScene extends Scene {
   private music!: AudioStream;
@@ -19,12 +19,10 @@ class CompressorScene extends Scene {
   private compressor!: CompressorEffect;
   private meter = new Graphics();
   private label!: Text;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private hud!: ReturnType<typeof mountControls>;
   private bypass = false;
 
   override async load(): Promise<void> {
-    this.music = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    this.music = await this.loader.load(assets.musicLoopMain);
   }
 
   override init(): void {
@@ -35,60 +33,39 @@ class CompressorScene extends Scene {
     this.label = new Text('', { fillColor: Color.white, fontSize: 24 });
     this.label.setPosition(380, 280);
 
-    this.hud = mountControls({
+    // The loud input is hot enough to push the peaks well over the threshold
+    // without being louder than the rest of the catalog, and it ramps rather
+    // than jumps so switching never spikes.
+    demoPanel({
       title: 'Compression',
-      status: 'Quiet source. Choose Loud to push peaks over the threshold.',
-      hint: 'The red meter reads CompressorEffect.reduction from the active audio node.',
-    });
-    this.panel = mountControlPanel({ title: 'Compression' });
-    this.panel.addButton({ label: 'Quiet input', onClick: () => this.setInput(0.15) });
-    this.panel.addButton({ label: 'Loud input', onClick: () => this.setInput(1) });
-    this.panel.addToggle({
-      label: 'Bypass',
-      value: false,
-      onChange: value => {
-        if (value === this.bypass) {
-          return;
-        }
-
-        this.bypass = value;
+      controls: {
+        input: choice('Input', ['Quiet', 'Loud']),
+        bypass: toggle('Bypass'),
+        threshold: slider('Threshold (dB)', { min: -50, max: -5, step: 1, value: -30, format: v => v.toFixed(0) }),
+        ratio: slider('Ratio', { min: 1, max: 12, step: 0.5, value: 6, format: v => `${v.toFixed(1)}:1` }),
+      },
+      onChange: (key, _value, values) => {
+        if (key === 'input') {
+          this.tweens
+            .create(this.voice)
+            .to({ volume: values.input === 'Loud' ? 0.6 : 0.15 }, 0.4)
+            .start();
+        } else if (key === 'bypass' && values.bypass !== this.bypass) {
+          this.bypass = values.bypass;
 
-        if (value) {
-          audio.music.removeEffect(this.compressor);
-        } else {
-          audio.music.addEffect(this.compressor);
+          if (this.bypass) {
+            audio.music.removeEffect(this.compressor);
+          } else {
+            audio.music.addEffect(this.compressor);
+          }
         }
 
-        this.hud.setStatus(value ? 'Compressor bypassed.' : 'Compressor active. Compare Quiet and Loud input.');
-      },
-    });
-    this.panel.addSlider({
-      label: 'Threshold (dB)',
-      min: -50,
-      max: -5,
-      step: 1,
-      value: -30,
-      onChange: value => {
-        this.compressor.threshold = value;
-      },
-    });
-    this.panel.addSlider({
-      label: 'Ratio',
-      min: 1,
-      max: 12,
-      step: 0.5,
-      value: 6,
-      onChange: value => {
-        this.compressor.ratio = value;
+        this.compressor.threshold = values.threshold;
+        this.compressor.ratio = values.ratio;
       },
     });
   }
 
-  private setInput(volume: number): void {
-    this.voice.volume = volume;
-    this.hud.setStatus(`${volume === 1 ? 'Loud' : 'Quiet'} input; compressor ${this.bypass ? 'bypassed' : 'active'}.`);
-  }
-
   override draw(context: RenderingContext): void {
     const reduction = this.bypass ? 0 : this.compressor.reduction;
     this.meter.clear();
@@ -109,8 +86,6 @@ class CompressorScene extends Scene {
     }
 
     this.compressor?.destroy();
-    this.panel?.dispose();
-    this.hud?.dispose();
     this.meter.destroy();
     this.label?.destroy();
     super.destroy();
@@ -121,7 +96,6 @@ const app = new Application({
   scenes: { CompressorScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(CompressorScene);
diff --git a/examples/audio-fx/convolution-rooms.js b/examples/audio-fx/convolution-rooms.js
index adccf42b9..00b84567a 100644
--- a/examples/audio-fx/convolution-rooms.js
+++ b/examples/audio-fx/convolution-rooms.js
@@ -1,43 +1,45 @@
 // Auto-generated from convolution-rooms.ts - edit the .ts source, not this file.
-import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { ConvolutionEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls, trackPressButtons } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Text } from '@codexo/exojs';
+import { ConvolutionEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, trackPressButtons } from '@examples/runtime';
 // Every impulse response in the AK-SROOMS set, shortest tail first. The
 // duration is what actually decides the character: a few milliseconds only
 // colours the sound, ~30-150 ms reads as a cupboard or a shaft, and past
 // ~250 ms you start hearing a room you could walk around in.
 const ROOMS = [
-  { file: 'AK-SROOMS_014', ms: 1 },
-  { file: 'AK-SROOMS_013', ms: 2 },
-  { file: 'AK-SROOMS_023', ms: 3 },
-  { file: 'AK-SROOMS_012', ms: 6 },
-  { file: 'AK-SROOMS_011', ms: 11 },
-  { file: 'AK-SROOMS_022', ms: 15 },
-  { file: 'AK-SROOMS_002', ms: 20 },
-  { file: 'AK-SROOMS_003', ms: 20 },
-  { file: 'AK-SROOMS_010', ms: 28 },
-  { file: 'AK-SROOMS_021', ms: 33 },
-  { file: 'AK-SROOMS_009', ms: 48 },
-  { file: 'AK-SROOMS_019', ms: 51 },
-  { file: 'AK-SROOMS_020', ms: 95 },
-  { file: 'AK-SROOMS_006', ms: 133 },
-  { file: 'AK-SROOMS_018', ms: 156 },
-  { file: 'AK-SROOMS_015', ms: 235 },
-  { file: 'AK-SROOMS_001', ms: 236 },
-  { file: 'AK-SROOMS_024', ms: 226 },
-  { file: 'AK-SROOMS_026', ms: 226 },
-  { file: 'AK-SROOMS_027', ms: 226 },
-  { file: 'AK-SROOMS_025', ms: 229 },
-  { file: 'AK-SROOMS_030', ms: 267 },
-  { file: 'AK-SROOMS_004', ms: 307 },
-  { file: 'AK-SROOMS_005', ms: 307 },
-  { file: 'AK-SROOMS_029', ms: 308 },
-  { file: 'AK-SROOMS_007', ms: 350 },
-  { file: 'AK-SROOMS_008', ms: 350 },
-  { file: 'AK-SROOMS_028', ms: 353 },
-  { file: 'AK-SROOMS_017', ms: 550 },
-  { file: 'AK-SROOMS_016', ms: 593 },
+  { file: 'AK-SROOMS_014', ir: assets.impulseRoom014, ms: 1 },
+  { file: 'AK-SROOMS_013', ir: assets.impulseRoom013, ms: 2 },
+  { file: 'AK-SROOMS_023', ir: assets.impulseRoom023, ms: 3 },
+  { file: 'AK-SROOMS_012', ir: assets.impulseRoom012, ms: 6 },
+  { file: 'AK-SROOMS_011', ir: assets.impulseRoom011, ms: 11 },
+  { file: 'AK-SROOMS_022', ir: assets.impulseRoom022, ms: 15 },
+  { file: 'AK-SROOMS_002', ir: assets.impulseRoom002, ms: 20 },
+  { file: 'AK-SROOMS_003', ir: assets.impulseRoom003, ms: 20 },
+  { file: 'AK-SROOMS_010', ir: assets.impulseRoom010, ms: 28 },
+  { file: 'AK-SROOMS_021', ir: assets.impulseRoom021, ms: 33 },
+  { file: 'AK-SROOMS_009', ir: assets.impulseRoom009, ms: 48 },
+  { file: 'AK-SROOMS_019', ir: assets.impulseRoom019, ms: 51 },
+  { file: 'AK-SROOMS_020', ir: assets.impulseRoom020, ms: 95 },
+  { file: 'AK-SROOMS_006', ir: assets.impulseRoom006, ms: 133 },
+  { file: 'AK-SROOMS_018', ir: assets.impulseRoom018, ms: 156 },
+  { file: 'AK-SROOMS_015', ir: assets.impulseRoom015, ms: 235 },
+  { file: 'AK-SROOMS_001', ir: assets.impulseRoom001, ms: 236 },
+  { file: 'AK-SROOMS_024', ir: assets.impulseRoom024, ms: 226 },
+  { file: 'AK-SROOMS_026', ir: assets.impulseRoom026, ms: 226 },
+  { file: 'AK-SROOMS_027', ir: assets.impulseRoom027, ms: 226 },
+  { file: 'AK-SROOMS_025', ir: assets.impulseRoom025, ms: 229 },
+  { file: 'AK-SROOMS_030', ir: assets.impulseRoom030, ms: 267 },
+  { file: 'AK-SROOMS_004', ir: assets.impulseRoom004, ms: 307 },
+  { file: 'AK-SROOMS_005', ir: assets.impulseRoom005, ms: 307 },
+  { file: 'AK-SROOMS_029', ir: assets.impulseRoom029, ms: 308 },
+  { file: 'AK-SROOMS_007', ir: assets.impulseRoom007, ms: 350 },
+  { file: 'AK-SROOMS_008', ir: assets.impulseRoom008, ms: 350 },
+  { file: 'AK-SROOMS_028', ir: assets.impulseRoom028, ms: 353 },
+  { file: 'AK-SROOMS_017', ir: assets.impulseRoom017, ms: 550 },
+  { file: 'AK-SROOMS_016', ir: assets.impulseRoom016, ms: 593 },
 ];
+const ROOM_LABELS = ROOMS.map(room => `${room.ms} ms (IR ${room.file.slice(-3)})`);
 /** Rough label for a tail length - the same intuition a level designer works with. */
 const character = ms => {
   if (ms < 10) {
@@ -61,10 +63,10 @@ const character = ms => {
 // stereo position matches where it visually sits - the same left/right
 // spread the ear hears back through the room.
 const MATERIALS = [
-  { file: 'impactBell_heavy_000', label: 'Bell', color: new Color(210, 180, 100) },
-  { file: 'impactWood_heavy_000', label: 'Wood', color: new Color(160, 120, 80) },
-  { file: 'impactGlass_heavy_000', label: 'Glass', color: new Color(130, 210, 230) },
-  { file: 'impactMetal_heavy_000', label: 'Metal', color: new Color(160, 180, 200) },
+  { sound: assets.soundImpactBellHeavy, label: 'Bell', color: new Color(210, 180, 100) },
+  { sound: assets.soundImpactWoodHeavy, label: 'Wood', color: new Color(160, 120, 80) },
+  { sound: assets.soundImpactGlassHeavy, label: 'Glass', color: new Color(130, 210, 230) },
+  { sound: assets.soundImpactMetalHeavy, label: 'Metal', color: new Color(160, 180, 200) },
 ];
 const REF_DISTANCE = 60;
 const MAX_DISTANCE = 700;
@@ -77,10 +79,8 @@ class ConvolutionRoomsScene extends Scene {
   label;
   detail;
   tapPrompt;
-  hud;
   panel;
   pressButtons = null;
-  roomControl;
   init() {
     const { width, height } = this.app;
     this.listener = { x: width / 2, y: height / 2 };
@@ -96,7 +96,7 @@ class ConvolutionRoomsScene extends Scene {
     const startX = (width - totalW) / 2;
     const padY = height / 2 - padH / 2 + 20;
     this.pads = MATERIALS.map((material, i) => ({
-      sound: this.loader.get(`audio/${material.file}.ogg`),
+      sound: this.loader.get(material.sound),
       label: material.label,
       color: material.color,
       x: startX + i * (padW + gap),
@@ -119,30 +119,19 @@ class ConvolutionRoomsScene extends Scene {
       this.pressButtons = trackPressButtons(this.app.canvas);
     }
     this.app.input.onPointerDown.add(this.onPointerDown);
-    this.app.input.onContextMenu.add(this.onContextMenu);
-    this.hud = mountControls({
-      title: 'Convolution rooms',
-      controls: [
-        { keys: 'Click', action: 'strike a pad, panned to its position' },
-        { keys: 'Right-click', action: 'next room (or use the panel)' },
-      ],
-      status: 'Click or press any key to start…',
-      hint: 'Same four materials every time — only the room around them changes.',
+    this.panel = demoPanel({
+      controls: { room: choice('Room', ROOM_LABELS) },
+      onChange: (_key, value) => this.select(ROOM_LABELS.indexOf(value)),
     });
-    this.panel = mountControlPanel({ title: 'Room' });
-    this.roomControl = this.panel.addCycle({
-      label: 'Impulse',
-      options: ROOMS.map((room, i) => `${i + 1} · ${room.ms} ms`),
-      onChange: index => this.select(index),
-    });
-    this.select(0);
+    this.inputs.onTrigger(Keyboard.Right, () => this.panel.step('room', 1));
+    this.inputs.onTrigger(Keyboard.Left, () => this.panel.step('room', -1));
   }
-  // Application input outlives the scene, so both handlers are removed in destroy().
+  // Application input outlives the scene, so the handler is removed in destroy().
   onPointerDown = (pointer, x, y) => {
     // Presses are delivered at the next frame, when `pointer.buttons` already
     // reads the live state, so a right click released before then looks like a
-    // main click. The button recorded at press time decides: right-click
-    // switches rooms instead of striking.
+    // main click. The button recorded at press time decides: only the main
+    // button strikes.
     if ((this.pressButtons?.take(pointer.id) ?? 0) !== 0) {
       return;
     }
@@ -153,15 +142,13 @@ class ConvolutionRoomsScene extends Scene {
       }
     }
   };
-  onContextMenu = () => this.select(this.index + 1);
   /** Swap the impulse response. The handle heals in place, so the effect picks it up once decoded. */
   select(next) {
-    this.index = (next + ROOMS.length) % ROOMS.length;
-    this.roomControl.set(this.index);
+    this.index = next;
     const room = ROOMS[this.index];
-    const ir = this.loader.get(`audio/ir/${room.file}.wav`);
-    this.label.text = `${this.index + 1} / ${ROOMS.length} — ${character(room.ms)}`;
-    this.detail.text = `${room.file} · ${room.ms} ms tail`;
+    const ir = this.loader.get(room.ir);
+    this.label.text = `${this.index + 1} / ${ROOMS.length}: ${character(room.ms)}`;
+    this.detail.text = `${room.file}, ${room.ms} ms tail`;
     // `.loaded` resolves immediately for an already-decoded handle; the
     // effect stays on the previous IR until the new one is ready.
     void ir.loaded.then(() => {
@@ -188,7 +175,6 @@ class ConvolutionRoomsScene extends Scene {
       pad.flash = Math.max(0, pad.flash - time * 3);
     }
     this.tapPrompt.visible = this.app.audio.locked;
-    this.hud.setStatus(this.app.audio.locked ? 'Click or press any key to start…' : `Room ${this.index + 1} of ${ROOMS.length}`);
   }
   draw(context) {
     this.gfx.clear();
@@ -202,12 +188,10 @@ class ConvolutionRoomsScene extends Scene {
   }
   destroy() {
     this.app.input.onPointerDown.remove(this.onPointerDown);
-    this.app.input.onContextMenu.remove(this.onContextMenu);
     this.pressButtons?.dispose();
     this.app.audio.sound.removeEffect(this.convolution);
     this.convolution.destroy();
     this.panel.dispose();
-    this.hud.dispose();
     super.destroy();
   }
 }
@@ -219,8 +203,5 @@ const application = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 void application.start(ConvolutionRoomsScene);
diff --git a/examples/audio-fx/convolution-rooms.ts b/examples/audio-fx/convolution-rooms.ts
index 2638a89e7..ef938aa40 100644
--- a/examples/audio-fx/convolution-rooms.ts
+++ b/examples/audio-fx/convolution-rooms.ts
@@ -3,6 +3,7 @@ import {
   Color,
   FixedResolutionCanvasSizing,
   Graphics,
+  Keyboard,
   type Pointer,
   type RenderingContext,
   Scene,
@@ -10,46 +11,49 @@ import {
   type Sound,
   Text,
 } from '@codexo/exojs';
-import { ConvolutionEffect } from '@codexo/exojs-audio-fx';
-import { type ControlBinding, mountControlPanel, mountControls, type PressButtonTracker, trackPressButtons } from '@examples/runtime';
+import { ConvolutionEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, type PressButtonTracker, trackPressButtons } from '@examples/runtime';
 
 // Every impulse response in the AK-SROOMS set, shortest tail first. The
 // duration is what actually decides the character: a few milliseconds only
 // colours the sound, ~30-150 ms reads as a cupboard or a shaft, and past
 // ~250 ms you start hearing a room you could walk around in.
 const ROOMS = [
-  { file: 'AK-SROOMS_014', ms: 1 },
-  { file: 'AK-SROOMS_013', ms: 2 },
-  { file: 'AK-SROOMS_023', ms: 3 },
-  { file: 'AK-SROOMS_012', ms: 6 },
-  { file: 'AK-SROOMS_011', ms: 11 },
-  { file: 'AK-SROOMS_022', ms: 15 },
-  { file: 'AK-SROOMS_002', ms: 20 },
-  { file: 'AK-SROOMS_003', ms: 20 },
-  { file: 'AK-SROOMS_010', ms: 28 },
-  { file: 'AK-SROOMS_021', ms: 33 },
-  { file: 'AK-SROOMS_009', ms: 48 },
-  { file: 'AK-SROOMS_019', ms: 51 },
-  { file: 'AK-SROOMS_020', ms: 95 },
-  { file: 'AK-SROOMS_006', ms: 133 },
-  { file: 'AK-SROOMS_018', ms: 156 },
-  { file: 'AK-SROOMS_015', ms: 235 },
-  { file: 'AK-SROOMS_001', ms: 236 },
-  { file: 'AK-SROOMS_024', ms: 226 },
-  { file: 'AK-SROOMS_026', ms: 226 },
-  { file: 'AK-SROOMS_027', ms: 226 },
-  { file: 'AK-SROOMS_025', ms: 229 },
-  { file: 'AK-SROOMS_030', ms: 267 },
-  { file: 'AK-SROOMS_004', ms: 307 },
-  { file: 'AK-SROOMS_005', ms: 307 },
-  { file: 'AK-SROOMS_029', ms: 308 },
-  { file: 'AK-SROOMS_007', ms: 350 },
-  { file: 'AK-SROOMS_008', ms: 350 },
-  { file: 'AK-SROOMS_028', ms: 353 },
-  { file: 'AK-SROOMS_017', ms: 550 },
-  { file: 'AK-SROOMS_016', ms: 593 },
+  { file: 'AK-SROOMS_014', ir: assets.impulseRoom014, ms: 1 },
+  { file: 'AK-SROOMS_013', ir: assets.impulseRoom013, ms: 2 },
+  { file: 'AK-SROOMS_023', ir: assets.impulseRoom023, ms: 3 },
+  { file: 'AK-SROOMS_012', ir: assets.impulseRoom012, ms: 6 },
+  { file: 'AK-SROOMS_011', ir: assets.impulseRoom011, ms: 11 },
+  { file: 'AK-SROOMS_022', ir: assets.impulseRoom022, ms: 15 },
+  { file: 'AK-SROOMS_002', ir: assets.impulseRoom002, ms: 20 },
+  { file: 'AK-SROOMS_003', ir: assets.impulseRoom003, ms: 20 },
+  { file: 'AK-SROOMS_010', ir: assets.impulseRoom010, ms: 28 },
+  { file: 'AK-SROOMS_021', ir: assets.impulseRoom021, ms: 33 },
+  { file: 'AK-SROOMS_009', ir: assets.impulseRoom009, ms: 48 },
+  { file: 'AK-SROOMS_019', ir: assets.impulseRoom019, ms: 51 },
+  { file: 'AK-SROOMS_020', ir: assets.impulseRoom020, ms: 95 },
+  { file: 'AK-SROOMS_006', ir: assets.impulseRoom006, ms: 133 },
+  { file: 'AK-SROOMS_018', ir: assets.impulseRoom018, ms: 156 },
+  { file: 'AK-SROOMS_015', ir: assets.impulseRoom015, ms: 235 },
+  { file: 'AK-SROOMS_001', ir: assets.impulseRoom001, ms: 236 },
+  { file: 'AK-SROOMS_024', ir: assets.impulseRoom024, ms: 226 },
+  { file: 'AK-SROOMS_026', ir: assets.impulseRoom026, ms: 226 },
+  { file: 'AK-SROOMS_027', ir: assets.impulseRoom027, ms: 226 },
+  { file: 'AK-SROOMS_025', ir: assets.impulseRoom025, ms: 229 },
+  { file: 'AK-SROOMS_030', ir: assets.impulseRoom030, ms: 267 },
+  { file: 'AK-SROOMS_004', ir: assets.impulseRoom004, ms: 307 },
+  { file: 'AK-SROOMS_005', ir: assets.impulseRoom005, ms: 307 },
+  { file: 'AK-SROOMS_029', ir: assets.impulseRoom029, ms: 308 },
+  { file: 'AK-SROOMS_007', ir: assets.impulseRoom007, ms: 350 },
+  { file: 'AK-SROOMS_008', ir: assets.impulseRoom008, ms: 350 },
+  { file: 'AK-SROOMS_028', ir: assets.impulseRoom028, ms: 353 },
+  { file: 'AK-SROOMS_017', ir: assets.impulseRoom017, ms: 550 },
+  { file: 'AK-SROOMS_016', ir: assets.impulseRoom016, ms: 593 },
 ] as const;
 
+const ROOM_LABELS = ROOMS.map(room => `${room.ms} ms (IR ${room.file.slice(-3)})`);
+
 /** Rough label for a tail length - the same intuition a level designer works with. */
 const character = (ms: number): string => {
   if (ms < 10) {
@@ -79,10 +83,10 @@ const character = (ms: number): string => {
 // stereo position matches where it visually sits - the same left/right
 // spread the ear hears back through the room.
 const MATERIALS = [
-  { file: 'impactBell_heavy_000', label: 'Bell', color: new Color(210, 180, 100) },
-  { file: 'impactWood_heavy_000', label: 'Wood', color: new Color(160, 120, 80) },
-  { file: 'impactGlass_heavy_000', label: 'Glass', color: new Color(130, 210, 230) },
-  { file: 'impactMetal_heavy_000', label: 'Metal', color: new Color(160, 180, 200) },
+  { sound: assets.soundImpactBellHeavy, label: 'Bell', color: new Color(210, 180, 100) },
+  { sound: assets.soundImpactWoodHeavy, label: 'Wood', color: new Color(160, 120, 80) },
+  { sound: assets.soundImpactGlassHeavy, label: 'Glass', color: new Color(130, 210, 230) },
+  { sound: assets.soundImpactMetalHeavy, label: 'Metal', color: new Color(160, 180, 200) },
 ] as const;
 
 const REF_DISTANCE = 60;
@@ -108,10 +112,8 @@ class ConvolutionRoomsScene extends Scene {
   private label!: Text;
   private detail!: Text;
   private tapPrompt!: Text;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: DemoPanel<{ room: ChoiceSpec }>;
   private pressButtons: PressButtonTracker | null = null;
-  private roomControl!: ControlBinding<number>;
 
   override init(): void {
     const { width, height } = this.app;
@@ -132,7 +134,7 @@ class ConvolutionRoomsScene extends Scene {
     const padY = height / 2 - padH / 2 + 20;
 
     this.pads = MATERIALS.map((material, i) => ({
-      sound: this.loader.get(`audio/${material.file}.ogg`),
+      sound: this.loader.get(material.sound),
       label: material.label,
       color: material.color,
       x: startX + i * (padW + gap),
@@ -160,34 +162,21 @@ class ConvolutionRoomsScene extends Scene {
     }
 
     this.app.input.onPointerDown.add(this.onPointerDown);
-    this.app.input.onContextMenu.add(this.onContextMenu);
-
-    this.hud = mountControls({
-      title: 'Convolution rooms',
-      controls: [
-        { keys: 'Click', action: 'strike a pad, panned to its position' },
-        { keys: 'Right-click', action: 'next room (or use the panel)' },
-      ],
-      status: 'Click or press any key to start…',
-      hint: 'Same four materials every time — only the room around them changes.',
-    });
 
-    this.panel = mountControlPanel({ title: 'Room' });
-    this.roomControl = this.panel.addCycle({
-      label: 'Impulse',
-      options: ROOMS.map((room, i) => `${i + 1} · ${room.ms} ms`),
-      onChange: index => this.select(index),
+    this.panel = demoPanel({
+      controls: { room: choice('Room', ROOM_LABELS) },
+      onChange: (_key, value) => this.select(ROOM_LABELS.indexOf(value)),
     });
-
-    this.select(0);
+    this.inputs.onTrigger(Keyboard.Right, () => this.panel.step('room', 1));
+    this.inputs.onTrigger(Keyboard.Left, () => this.panel.step('room', -1));
   }
 
-  // Application input outlives the scene, so both handlers are removed in destroy().
+  // Application input outlives the scene, so the handler is removed in destroy().
   private readonly onPointerDown = (pointer: Pointer, x: number, y: number): void => {
     // Presses are delivered at the next frame, when `pointer.buttons` already
     // reads the live state, so a right click released before then looks like a
-    // main click. The button recorded at press time decides: right-click
-    // switches rooms instead of striking.
+    // main click. The button recorded at press time decides: only the main
+    // button strikes.
     if ((this.pressButtons?.take(pointer.id) ?? 0) !== 0) {
       return;
     }
@@ -201,18 +190,15 @@ class ConvolutionRoomsScene extends Scene {
     }
   };
 
-  private readonly onContextMenu = (): void => this.select(this.index + 1);
-
   /** Swap the impulse response. The handle heals in place, so the effect picks it up once decoded. */
   private select(next: number): void {
-    this.index = (next + ROOMS.length) % ROOMS.length;
-    this.roomControl.set(this.index);
+    this.index = next;
 
     const room = ROOMS[this.index]!;
-    const ir = this.loader.get(`audio/ir/${room.file}.wav`);
+    const ir = this.loader.get(room.ir);
 
-    this.label.text = `${this.index + 1} / ${ROOMS.length} — ${character(room.ms)}`;
-    this.detail.text = `${room.file} · ${room.ms} ms tail`;
+    this.label.text = `${this.index + 1} / ${ROOMS.length}: ${character(room.ms)}`;
+    this.detail.text = `${room.file}, ${room.ms} ms tail`;
 
     // `.loaded` resolves immediately for an already-decoded handle; the
     // effect stays on the previous IR until the new one is ready.
@@ -244,7 +230,6 @@ class ConvolutionRoomsScene extends Scene {
     }
 
     this.tapPrompt.visible = this.app.audio.locked;
-    this.hud.setStatus(this.app.audio.locked ? 'Click or press any key to start…' : `Room ${this.index + 1} of ${ROOMS.length}`);
   }
 
   override draw(context: RenderingContext): void {
@@ -263,12 +248,10 @@ class ConvolutionRoomsScene extends Scene {
 
   override destroy(): void {
     this.app.input.onPointerDown.remove(this.onPointerDown);
-    this.app.input.onContextMenu.remove(this.onContextMenu);
     this.pressButtons?.dispose();
     this.app.audio.sound.removeEffect(this.convolution);
     this.convolution.destroy();
     this.panel.dispose();
-    this.hud.dispose();
     super.destroy();
   }
 }
@@ -281,9 +264,6 @@ const application = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 void application.start(ConvolutionRoomsScene);
diff --git a/examples/audio-fx/ducking.js b/examples/audio-fx/ducking.js
index 8f6023423..1947dbc12 100644
--- a/examples/audio-fx/ducking.js
+++ b/examples/audio-fx/ducking.js
@@ -1,7 +1,7 @@
 // Auto-generated from ducking.ts - edit the .ts source, not this file.
-import { Application, Asset, AudioBus, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { AudioAnalyser, DuckingEffect } from '@codexo/exojs-audio-fx';
-import { mountControls } from '@examples/runtime';
+import { Application, AudioBus, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { AudioAnalyser, DuckingEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class DuckingScene extends Scene {
   music;
   voice;
@@ -21,7 +21,14 @@ class DuckingScene extends Scene {
   barW = 0;
   musicBarY = 0;
   voiceBarY = 0;
-  hud;
+  clickPrompt;
+  playVoice = () => {
+    // The pointer gesture also unlocks the AudioContext; firing while
+    // still locked would be silent, so wait until audio is ready.
+    if (!this.app.audio.locked) {
+      this.app.audio.play(this.voice, { bus: this.voiceBus, volume: 0.4 });
+    }
+  };
   async load() {
     const app = this.app;
     const { width, height } = app;
@@ -31,12 +38,12 @@ class DuckingScene extends Scene {
     this.musicBarY = height * 0.42;
     this.voiceBarY = height * 0.55;
     // AudioStream has no seamless adapter - await it explicitly.
-    const music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    const music = await this.loader.load(assets.musicLoopMain);
     this.music = music;
     // Path-only get() infers Sound from the .ogg extension - sidesteps a
     // compile-time overload ambiguity between Sound and the Json token form
     // when passing the Sound token explicitly.
-    this.voice = this.loader.get(assets.demo.voice.congratulations);
+    this.voice = this.loader.get(assets.voiceCongratulations);
     // Route the voice-over onto its own bus so it can drive the sidechain.
     this.voiceBus = new AudioBus('voice-over', { parent: app.audio.master });
     app.audio.registerBus(this.voiceBus);
@@ -56,28 +63,16 @@ class DuckingScene extends Scene {
     this.voiceLabel.setPosition(this.barX, this.voiceBarY - 26);
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued music starts.
-    this.tapPrompt = new Text('Click or press any key to start audio', { fillColor: Color.white, fontSize: 22, align: 'center' })
+    this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5, 0.5)
+      .setPosition(width / 2, height - 48);
+    this.clickPrompt = new Text('Click to play the voice-over', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
-    this.hud = mountControls({
-      title: 'Ducking',
-      controls: [{ keys: 'Click', action: 'play the voice-over' }],
-      status: 'Click or press any key to start…',
-      hint: 'When the voice plays, the music meter ducks down while the voice meter spikes.',
-    });
-    app.input.onPointerTap.add(() => {
-      // The pointer gesture also unlocks the AudioContext; firing while
-      // still locked would be silent, so wait until audio is ready.
-      if (app.audio.locked) {
-        return;
-      }
-      app.audio.play(this.voice, { bus: this.voiceBus, volume: 0.4 });
-      this.hud.setStatus('Voice playing — music ducked');
-    });
+    app.input.onPointerTap.add(this.playVoice);
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.7 });
-    this.hud.setStatus('Music playing — click to duck it');
+    app.audio.play(this.music, { loop: true, volume: 0.5 });
   }
   bar(label, name, y, level, color) {
     this.gfx.fillColor = new Color(70, 70, 70);
@@ -100,9 +95,16 @@ class DuckingScene extends Scene {
     context.render(this.gfx);
     context.render(this.musicLabel);
     context.render(this.voiceLabel);
-    if (app.audio.locked) {
-      context.render(this.tapPrompt);
-    }
+    context.render(app.audio.locked ? this.tapPrompt : this.clickPrompt);
+  }
+  destroy() {
+    this.app.input.onPointerTap.remove(this.playVoice);
+    this.gfx?.destroy();
+    this.musicLabel?.destroy();
+    this.voiceLabel?.destroy();
+    this.tapPrompt?.destroy();
+    this.clickPrompt?.destroy();
+    super.destroy();
   }
 }
 const app = new Application({
diff --git a/examples/audio-fx/ducking.ts b/examples/audio-fx/ducking.ts
index 73561808c..f9f1fcbd8 100644
--- a/examples/audio-fx/ducking.ts
+++ b/examples/audio-fx/ducking.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   AudioBus,
   type AudioStream,
   Color,
@@ -11,8 +10,8 @@ import {
   type Sound,
   Text,
 } from '@codexo/exojs';
-import { AudioAnalyser, DuckingEffect } from '@codexo/exojs-audio-fx';
-import { mountControls } from '@examples/runtime';
+import { AudioAnalyser, DuckingEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class DuckingScene extends Scene {
   private music!: AudioStream;
@@ -33,7 +32,14 @@ class DuckingScene extends Scene {
   private barW = 0;
   private musicBarY = 0;
   private voiceBarY = 0;
-  private hud!: ReturnType<typeof mountControls>;
+  private clickPrompt!: Text;
+  private readonly playVoice = (): void => {
+    // The pointer gesture also unlocks the AudioContext; firing while
+    // still locked would be silent, so wait until audio is ready.
+    if (!this.app.audio.locked) {
+      this.app.audio.play(this.voice, { bus: this.voiceBus, volume: 0.4 });
+    }
+  };
 
   override async load(): Promise<void> {
     const app = this.app;
@@ -46,12 +52,12 @@ class DuckingScene extends Scene {
     this.voiceBarY = height * 0.55;
 
     // AudioStream has no seamless adapter - await it explicitly.
-    const music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    const music = await this.loader.load(assets.musicLoopMain);
     this.music = music;
     // Path-only get() infers Sound from the .ogg extension - sidesteps a
     // compile-time overload ambiguity between Sound and the Json token form
     // when passing the Sound token explicitly.
-    this.voice = this.loader.get(assets.demo.voice.congratulations);
+    this.voice = this.loader.get(assets.voiceCongratulations);
 
     // Route the voice-over onto its own bus so it can drive the sidechain.
     this.voiceBus = new AudioBus('voice-over', { parent: app.audio.master });
@@ -76,32 +82,19 @@ class DuckingScene extends Scene {
 
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued music starts.
-    this.tapPrompt = new Text('Click or press any key to start audio', { fillColor: Color.white, fontSize: 22, align: 'center' })
+    this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
 
-    this.hud = mountControls({
-      title: 'Ducking',
-      controls: [{ keys: 'Click', action: 'play the voice-over' }],
-      status: 'Click or press any key to start…',
-      hint: 'When the voice plays, the music meter ducks down while the voice meter spikes.',
-    });
-
-    app.input.onPointerTap.add(() => {
-      // The pointer gesture also unlocks the AudioContext; firing while
-      // still locked would be silent, so wait until audio is ready.
-      if (app.audio.locked) {
-        return;
-      }
+    this.clickPrompt = new Text('Click to play the voice-over', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5, 0.5)
+      .setPosition(width / 2, height - 48);
 
-      app.audio.play(this.voice, { bus: this.voiceBus, volume: 0.4 });
-      this.hud.setStatus('Voice playing — music ducked');
-    });
+    app.input.onPointerTap.add(this.playVoice);
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.7 });
-    this.hud.setStatus('Music playing — click to duck it');
+    app.audio.play(this.music, { loop: true, volume: 0.5 });
   }
 
   private bar(label: Text, name: string, y: number, level: number, color: Color): void {
@@ -128,9 +121,17 @@ class DuckingScene extends Scene {
     context.render(this.musicLabel);
     context.render(this.voiceLabel);
 
-    if (app.audio.locked) {
-      context.render(this.tapPrompt);
-    }
+    context.render(app.audio.locked ? this.tapPrompt : this.clickPrompt);
+  }
+
+  override destroy(): void {
+    this.app.input.onPointerTap.remove(this.playVoice);
+    this.gfx?.destroy();
+    this.musicLabel?.destroy();
+    this.voiceLabel?.destroy();
+    this.tapPrompt?.destroy();
+    this.clickPrompt?.destroy();
+    super.destroy();
   }
 }
 
diff --git a/examples/audio-fx/effect-chains.js b/examples/audio-fx/effect-chains.js
index 17408f9ad..b6239067b 100644
--- a/examples/audio-fx/effect-chains.js
+++ b/examples/audio-fx/effect-chains.js
@@ -1,17 +1,8 @@
 // Auto-generated from effect-chains.ts - edit the .ts source, not this file.
-import {
-  Application,
-  Asset,
-  Color,
-  FixedResolutionCanvasSizing,
-  Graphics,
-  HighpassFilter,
-  LowpassFilter,
-  Scene,
-  Text,
-} from '@codexo/exojs';
-import { AudioAnalyser, BitCrusherEffect, ChorusEffect, DistortionEffect, PingPongDelayEffect, ReverbEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, HighpassFilter, LowpassFilter, Scene, Text } from '@codexo/exojs';
+import { AudioAnalyser, BitCrusherEffect, ChorusEffect, DistortionEffect, PingPongDelayEffect, ReverbEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 const CHAINS = [
   {
     name: 'Telephone',
@@ -59,17 +50,16 @@ class EffectChainsScene extends Scene {
   analyser;
   spectrum = new Uint8Array(16);
   active = [];
-  selected = 0;
-  bypass = false;
   generation = 0;
   rack = new Graphics();
   title;
+  note;
+  prompt;
   stageLabels = [];
   panel;
-  hud;
   async load() {
-    this.music = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
-    this.impact = this.loader.get('audio/impact-light.ogg');
+    this.music = await this.loader.load(assets.musicLoopMain);
+    this.impact = this.loader.get(assets.soundImpactLight);
   }
   init() {
     const audio = this.app.audio;
@@ -78,37 +68,34 @@ class EffectChainsScene extends Scene {
     this.stageLabels = Array.from({ length: 3 }, () =>
       new Text('', { fillColor: Color.white, fontSize: 22, align: 'center' }).setAnchor(0.5),
     );
-    this.hud = mountControls({
-      title: 'Audio Effect Rack',
-      status: 'Choose a chain and compare it with dry output.',
-      hint: 'Effects run in the order shown on the rack.',
-    });
-    this.panel = mountControlPanel({ title: 'Effect rack' });
-    CHAINS.forEach((chain, index) => this.panel.addButton({ label: chain.name, onClick: () => this.select(index) }));
-    this.panel.addToggle({
-      label: 'Bypass',
-      value: false,
-      onChange: value => {
-        this.bypass = value;
-        this.rebuild();
+    this.note = new Text('', { fillColor: new Color(150, 162, 186), fontSize: 20, align: 'center' }).setAnchor(0.5).setPosition(640, 215);
+    this.prompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(640, 670);
+    this.panel = demoPanel({
+      title: 'Effect rack',
+      controls: {
+        chain: choice(
+          'Chain',
+          CHAINS.map(chain => chain.name),
+        ),
+        bypass: toggle('Bypass', false),
       },
-    });
-    this.panel.addButton({
-      label: 'Play impact',
-      onClick: () => {
-        if (!audio.locked) {
-          audio.play(this.impact, { volume: 0.4 });
+      actions: {
+        'Play impact': () => {
+          if (!audio.locked) {
+            audio.play(this.impact, { volume: 0.4 });
+          }
+        },
+      },
+      onChange: () => {
+        // The mount-time calls arrive before the panel handle exists; init() builds the first chain once.
+        if (this.panel) {
+          this.rebuild();
         }
       },
     });
-    this.musicVoice = audio.play(this.music, { loop: true, volume: 0.7 });
-    this.rebuild();
-  }
-  select(index) {
-    if (index === this.selected) {
-      return;
-    }
-    this.selected = index;
+    this.musicVoice = audio.play(this.music, { loop: true, volume: 0.5 });
     this.rebuild();
   }
   rebuild() {
@@ -119,8 +106,9 @@ class EffectChainsScene extends Scene {
       effect.destroy();
     }
     this.active = [];
-    const chain = CHAINS[this.selected];
-    this.title.text = `${chain.name}: ${chain.stages.map(stage => stage.name).join(' -> ')}`;
+    const { chain: chainName, bypass } = this.panel.values;
+    const chain = CHAINS.find(candidate => candidate.name === chainName);
+    this.title.text = bypass ? `${chain.name} (bypassed)` : `${chain.name}: ${chain.stages.map(stage => stage.name).join(' -> ')}`;
     const slotWidth = 820 / chain.stages.length;
     this.stageLabels.forEach((label, index) => {
       label.visible = index < chain.stages.length;
@@ -129,10 +117,10 @@ class EffectChainsScene extends Scene {
         label.setPosition(225 + (index + 0.5) * slotWidth - 6, 305);
       }
     });
-    this.hud.setHint(chain.note);
-    master.volume = this.bypass ? 1 : chain.trim;
-    if (this.bypass) {
-      this.hud.setStatus(`${chain.name} bypassed; dry signal.`);
+    this.note.text = chain.note;
+    master.volume = bypass ? 1 : chain.trim;
+    if (bypass) {
+      this.panel.status('Dry signal');
       return;
     }
     for (const stage of chain.stages) {
@@ -140,16 +128,16 @@ class EffectChainsScene extends Scene {
       master.addEffect(effect);
       this.active.push(effect);
     }
-    this.hud.setStatus(`${chain.name}: preparing ${this.active.length} effects...`);
+    this.panel.status('Preparing effects...');
     void Promise.all(this.active.map(effect => effect.ready)).then(
       () => {
         if (generation === this.generation) {
-          this.hud.setStatus(`${chain.name}: ${this.active.length} effects ready.`);
+          this.panel.status(`${this.active.length} effects ready`);
         }
       },
       error => {
         if (generation === this.generation) {
-          this.hud.setStatus(`${chain.name}: ${error instanceof Error ? error.message : String(error)}`);
+          this.panel.status(error instanceof Error ? error.message : String(error));
         }
       },
     );
@@ -157,10 +145,11 @@ class EffectChainsScene extends Scene {
   draw(context) {
     this.analyser.getSpectrumLog(this.spectrum, { bands: this.spectrum.length, fMin: 40, fMax: 16000 });
     this.rack.clear();
-    const stages = CHAINS[this.selected].stages;
+    const { chain: chainName, bypass } = this.panel.values;
+    const stages = CHAINS.find(candidate => candidate.name === chainName).stages;
     const width = 820 / stages.length;
     stages.forEach((_, index) => {
-      this.rack.fillColor = this.bypass ? new Color(46, 49, 55) : new Color(53, 93, 121);
+      this.rack.fillColor = bypass ? new Color(46, 49, 55) : new Color(53, 93, 121);
       this.rack.drawRoundedRectangle(225 + index * width, 260, width - 12, 90, 12);
     });
     for (let index = 0; index < this.spectrum.length; index++) {
@@ -169,11 +158,15 @@ class EffectChainsScene extends Scene {
     }
     context.render(this.rack);
     context.render(this.title);
+    context.render(this.note);
     for (const label of this.stageLabels) {
       if (label.visible) {
         context.render(label);
       }
     }
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
   destroy() {
     ++this.generation;
@@ -186,9 +179,10 @@ class EffectChainsScene extends Scene {
     this.app.audio.master.volume = 1;
     this.analyser?.destroy();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.rack.destroy();
     this.title?.destroy();
+    this.note?.destroy();
+    this.prompt?.destroy();
     for (const label of this.stageLabels) {
       label.destroy();
     }
@@ -199,6 +193,5 @@ const app = new Application({
   scenes: { EffectChainsScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(EffectChainsScene);
diff --git a/examples/audio-fx/effect-chains.ts b/examples/audio-fx/effect-chains.ts
index 7fa4aba7d..1a8aed76d 100644
--- a/examples/audio-fx/effect-chains.ts
+++ b/examples/audio-fx/effect-chains.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioEffect,
   type AudioStream,
   Color,
@@ -14,8 +13,9 @@ import {
   Text,
   type Voice,
 } from '@codexo/exojs';
-import { AudioAnalyser, BitCrusherEffect, ChorusEffect, DistortionEffect, PingPongDelayEffect, ReverbEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AudioAnalyser, BitCrusherEffect, ChorusEffect, DistortionEffect, PingPongDelayEffect, ReverbEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
 
 interface Chain {
   name: string;
@@ -75,18 +75,17 @@ class EffectChainsScene extends Scene {
   private analyser!: AudioAnalyser;
   private readonly spectrum = new Uint8Array(16);
   private active: AudioEffect[] = [];
-  private selected = 0;
-  private bypass = false;
   private generation = 0;
   private rack = new Graphics();
   private title!: Text;
+  private note!: Text;
+  private prompt!: Text;
   private stageLabels: Text[] = [];
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ chain: ChoiceSpec<string>; bypass: ToggleSpec }>;
 
   override async load(): Promise<void> {
-    this.music = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
-    this.impact = this.loader.get('audio/impact-light.ogg');
+    this.music = await this.loader.load(assets.musicLoopMain);
+    this.impact = this.loader.get(assets.soundImpactLight);
   }
 
   override init(): void {
@@ -96,39 +95,34 @@ class EffectChainsScene extends Scene {
     this.stageLabels = Array.from({ length: 3 }, () =>
       new Text('', { fillColor: Color.white, fontSize: 22, align: 'center' }).setAnchor(0.5),
     );
-    this.hud = mountControls({
-      title: 'Audio Effect Rack',
-      status: 'Choose a chain and compare it with dry output.',
-      hint: 'Effects run in the order shown on the rack.',
-    });
-    this.panel = mountControlPanel({ title: 'Effect rack' });
-    CHAINS.forEach((chain, index) => this.panel.addButton({ label: chain.name, onClick: () => this.select(index) }));
-    this.panel.addToggle({
-      label: 'Bypass',
-      value: false,
-      onChange: value => {
-        this.bypass = value;
-        this.rebuild();
+    this.note = new Text('', { fillColor: new Color(150, 162, 186), fontSize: 20, align: 'center' }).setAnchor(0.5).setPosition(640, 215);
+    this.prompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(640, 670);
+    this.panel = demoPanel({
+      title: 'Effect rack',
+      controls: {
+        chain: choice(
+          'Chain',
+          CHAINS.map(chain => chain.name),
+        ),
+        bypass: toggle('Bypass', false),
       },
-    });
-    this.panel.addButton({
-      label: 'Play impact',
-      onClick: () => {
-        if (!audio.locked) {
-          audio.play(this.impact, { volume: 0.4 });
+      actions: {
+        'Play impact': () => {
+          if (!audio.locked) {
+            audio.play(this.impact, { volume: 0.4 });
+          }
+        },
+      },
+      onChange: () => {
+        // The mount-time calls arrive before the panel handle exists; init() builds the first chain once.
+        if (this.panel) {
+          this.rebuild();
         }
       },
     });
-    this.musicVoice = audio.play(this.music, { loop: true, volume: 0.7 });
-    this.rebuild();
-  }
-
-  private select(index: number): void {
-    if (index === this.selected) {
-      return;
-    }
-
-    this.selected = index;
+    this.musicVoice = audio.play(this.music, { loop: true, volume: 0.5 });
     this.rebuild();
   }
 
@@ -142,8 +136,9 @@ class EffectChainsScene extends Scene {
     }
 
     this.active = [];
-    const chain = CHAINS[this.selected]!;
-    this.title.text = `${chain.name}: ${chain.stages.map(stage => stage.name).join(' -> ')}`;
+    const { chain: chainName, bypass } = this.panel.values;
+    const chain = CHAINS.find(candidate => candidate.name === chainName)!;
+    this.title.text = bypass ? `${chain.name} (bypassed)` : `${chain.name}: ${chain.stages.map(stage => stage.name).join(' -> ')}`;
     const slotWidth = 820 / chain.stages.length;
     this.stageLabels.forEach((label, index) => {
       label.visible = index < chain.stages.length;
@@ -153,12 +148,12 @@ class EffectChainsScene extends Scene {
         label.setPosition(225 + (index + 0.5) * slotWidth - 6, 305);
       }
     });
-    this.hud.setHint(chain.note);
+    this.note.text = chain.note;
 
-    master.volume = this.bypass ? 1 : chain.trim;
+    master.volume = bypass ? 1 : chain.trim;
 
-    if (this.bypass) {
-      this.hud.setStatus(`${chain.name} bypassed; dry signal.`);
+    if (bypass) {
+      this.panel.status('Dry signal');
 
       return;
     }
@@ -169,16 +164,16 @@ class EffectChainsScene extends Scene {
       this.active.push(effect);
     }
 
-    this.hud.setStatus(`${chain.name}: preparing ${this.active.length} effects...`);
+    this.panel.status('Preparing effects...');
     void Promise.all(this.active.map(effect => effect.ready)).then(
       () => {
         if (generation === this.generation) {
-          this.hud.setStatus(`${chain.name}: ${this.active.length} effects ready.`);
+          this.panel.status(`${this.active.length} effects ready`);
         }
       },
       error => {
         if (generation === this.generation) {
-          this.hud.setStatus(`${chain.name}: ${error instanceof Error ? error.message : String(error)}`);
+          this.panel.status(error instanceof Error ? error.message : String(error));
         }
       },
     );
@@ -187,10 +182,11 @@ class EffectChainsScene extends Scene {
   override draw(context: RenderingContext): void {
     this.analyser.getSpectrumLog(this.spectrum, { bands: this.spectrum.length, fMin: 40, fMax: 16000 });
     this.rack.clear();
-    const stages = CHAINS[this.selected]!.stages;
+    const { chain: chainName, bypass } = this.panel.values;
+    const stages = CHAINS.find(candidate => candidate.name === chainName)!.stages;
     const width = 820 / stages.length;
     stages.forEach((_, index) => {
-      this.rack.fillColor = this.bypass ? new Color(46, 49, 55) : new Color(53, 93, 121);
+      this.rack.fillColor = bypass ? new Color(46, 49, 55) : new Color(53, 93, 121);
       this.rack.drawRoundedRectangle(225 + index * width, 260, width - 12, 90, 12);
     });
 
@@ -201,12 +197,17 @@ class EffectChainsScene extends Scene {
 
     context.render(this.rack);
     context.render(this.title);
+    context.render(this.note);
 
     for (const label of this.stageLabels) {
       if (label.visible) {
         context.render(label);
       }
     }
+
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
 
   override destroy(): void {
@@ -222,9 +223,10 @@ class EffectChainsScene extends Scene {
     this.app.audio.master.volume = 1;
     this.analyser?.destroy();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.rack.destroy();
     this.title?.destroy();
+    this.note?.destroy();
+    this.prompt?.destroy();
 
     for (const label of this.stageLabels) {
       label.destroy();
@@ -238,7 +240,6 @@ const app = new Application({
   scenes: { EffectChainsScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(EffectChainsScene);
diff --git a/examples/audio-fx/gpu-pcm-stream.js b/examples/audio-fx/gpu-pcm-stream.js
index a1778f090..54331e109 100644
--- a/examples/audio-fx/gpu-pcm-stream.js
+++ b/examples/audio-fx/gpu-pcm-stream.js
@@ -12,11 +12,16 @@ import {
   TextureFormat,
   UniformType,
 } from '@codexo/exojs';
-import { PcmStreamSource } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { PcmStreamSource } from '@codexo/exojs/audio-fx';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 const blockFrames = 1024;
 const readbackSlots = 2;
 const capacityFrames = 8192;
+const FORMATS = {
+  'rgba8 (packed 16-bit)': TextureFormat.Rgba8,
+  rgba32f: TextureFormat.Rgba32F,
+  rgba16f: TextureFormat.Rgba16F,
+};
 const soundShader = createFilterShader({
   uniforms: { sampleOffset: UniformType.Int, sampleRate: UniformType.Float, packed: UniformType.Int },
   glsl: {
@@ -62,70 +67,56 @@ class GpuPcmStreamScene extends Scene {
   right = new Float32Array(blockFrames);
   channels = [this.left, this.right];
   pending = [];
-  format = TextureFormat.Rgba8;
   generatedFrames = 0;
   readbackMs = 0;
-  producing = true;
   starting = false;
   active = false;
   draining = false;
   label;
+  prompt;
   panel;
-  hud;
+  get format() {
+    return FORMATS[this.panel.values.format];
+  }
   init() {
     this.label = new Text('', { fillColor: Color.white, fontSize: 23 }).setPosition(145, 190);
-    this.hud = mountControls({
-      title: 'GPU stereo PCM',
-      status: 'Choose a format, then press Start to unlock audio.',
-      hint: '220 Hz left / 330 Hz right. Pause production to hear starvation. Format changes create a fresh stream.',
-    });
-    this.panel = mountControlPanel({ title: 'GPU producer' });
-    this.panel.addCycle({
-      label: 'Readback format',
-      options: ['rgba8 (packed 16-bit)', 'rgba32f', 'rgba16f'],
-      onChange: index => {
-        this.format = [TextureFormat.Rgba8, TextureFormat.Rgba32F, TextureFormat.Rgba16F][index];
-        this.createStream();
-      },
-    });
-    this.panel.addButton({
-      label: 'Start',
-      onClick: () => {
-        const stream = this.stream;
-        if (!stream || stream.state !== 'ready') {
-          return;
-        }
-        void getAudioContext()
-          .resume()
-          .then(() => {
-            if (this.stream !== stream || stream.state !== 'ready') {
-              return;
-            }
-            this.active = true;
-            this.starting = true;
-            this.hud.setStatus('Prebuffering GPU samples...');
-          })
-          .catch(error => this.fail(error));
+    this.prompt = new Text('Click or press any key to start the stream', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(this.app.width / 2, this.app.height - 48);
+    this.panel = demoPanel({
+      title: 'GPU producer',
+      controls: {
+        format: choice('Readback format', Object.keys(FORMATS)),
+        producing: toggle('Produce PCM', true),
       },
-    });
-    this.panel.addToggle({
-      label: 'Produce PCM',
-      value: true,
-      onChange: value => {
-        this.producing = value;
+      actions: {
+        Drain: () => {
+          if (this.active) {
+            this.draining = true;
+          }
+        },
+        'New stream': () => this.createStream(),
       },
-    });
-    this.panel.addButton({
-      label: 'Drain',
-      onClick: () => {
-        if (this.active) {
-          this.draining = true;
+      onChange: key => {
+        // The mount-time calls arrive before the panel handle exists; init() creates the first stream once.
+        if (key === 'format' && this.panel) {
+          this.createStream();
         }
       },
     });
-    this.panel.addButton({ label: 'New stream', onClick: () => this.createStream() });
+    // onUnlock replays when audio is already unlocked, so a warm context starts immediately.
+    this.app.audio.onUnlock.add(this.start);
     this.createStream();
   }
+  start = () => {
+    const stream = this.stream;
+    if (!stream || stream.state !== 'ready' || this.active || this.app.audio.locked) {
+      return;
+    }
+    this.active = true;
+    this.starting = true;
+    this.panel.status('Prebuffering GPU samples...');
+  };
   releaseStream() {
     this.active = false;
     this.starting = false;
@@ -142,11 +133,12 @@ class GpuPcmStreamScene extends Scene {
   }
   createStream() {
     this.releaseStream();
+    this.panel.status('');
     this.generatedFrames = 0;
     this.readbackMs = 0;
     const context = this.app.rendering;
     if (!context.supportsReadbackFormat(this.format)) {
-      this.hud.setStatus(`${this.format} readback is unsupported. Choose another format.`);
+      this.panel.status(`${this.format} readback is unsupported. Choose another format.`);
       return;
     }
     try {
@@ -160,12 +152,12 @@ class GpuPcmStreamScene extends Scene {
       this.stream = stream;
       this.filter.uniforms.sampleRate.set(stream.sampleRate);
       this.filter.uniforms.packed.set(this.format === TextureFormat.Rgba8 ? 1 : 0);
-      stream.onEnd.add(() => this.hud.setStatus('Drained. Create a new stream to play again.'));
+      stream.onEnd.add(() => this.panel.status('Drained. Create a new stream to play again.'));
       stream.onError.add(error => this.fail(error));
       void stream.ready
         .then(() => {
           if (this.stream === stream) {
-            this.hud.setStatus('Ready. Press Start to unlock audio and prebuffer.');
+            this.start();
           }
         })
         .catch(error => {
@@ -179,7 +171,7 @@ class GpuPcmStreamScene extends Scene {
   }
   fail(error) {
     this.releaseStream();
-    this.hud.setStatus(String(error));
+    this.panel.status(String(error));
   }
   pump(context) {
     const stream = this.stream;
@@ -218,7 +210,7 @@ class GpuPcmStreamScene extends Scene {
     if (this.starting && (stream.bufferedFrames >= targetFrames || this.draining)) {
       stream.start(getAudioContext().currentTime + 0.02);
       this.starting = false;
-      this.hud.setStatus('Playing GPU stereo through the music bus.');
+      this.panel.status('');
     }
     if (this.draining) {
       if (this.pending.length === 0) {
@@ -227,7 +219,7 @@ class GpuPcmStreamScene extends Scene {
       }
       return;
     }
-    if (!this.producing) {
+    if (!this.panel.values.producing) {
       return;
     }
     // Reserve queue space for every pending read before rendering another block.
@@ -255,16 +247,20 @@ class GpuPcmStreamScene extends Scene {
       `PCM queue: ${stream?.bufferedFrames ?? 0} / ${capacityFrames} | Peak: ${stream?.highWaterFrames ?? 0} frames (${((stream?.bufferedSeconds ?? 0) * 1000).toFixed(1)} ms)`,
       `Readback: ${this.pending.length} / ${readbackSlots} slots | last observed wait: ${this.readbackMs.toFixed(1)} ms`,
       `Starvation: ${stream?.underruns ?? 0} episodes / ${stream?.underrunFrames ?? 0} silent frames`,
-      `Overflow: ${stream?.overflowCount ?? 0} blocks | ${this.producing ? 'Producer enabled' : 'Producer paused'}`,
+      `Overflow: ${stream?.overflowCount ?? 0} blocks | ${this.panel.values.producing ? 'Producer enabled' : 'Producer paused'}`,
     ].join('\n');
     context.render(this.label);
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
   destroy() {
     this.releaseStream();
     this.input.destroy();
+    this.app.audio.onUnlock.remove(this.start);
     this.panel?.dispose();
-    this.hud?.dispose();
     this.label?.destroy();
+    this.prompt?.destroy();
     super.destroy();
   }
 }
diff --git a/examples/audio-fx/gpu-pcm-stream.ts b/examples/audio-fx/gpu-pcm-stream.ts
index d6c725144..b1bb7938f 100644
--- a/examples/audio-fx/gpu-pcm-stream.ts
+++ b/examples/audio-fx/gpu-pcm-stream.ts
@@ -15,12 +15,20 @@ import {
   TextureFormat,
   UniformType,
 } from '@codexo/exojs';
-import { PcmStreamSource } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { PcmStreamSource } from '@codexo/exojs/audio-fx';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
 
 const blockFrames = 1024;
 const readbackSlots = 2;
 const capacityFrames = 8192;
+const FORMATS = {
+  'rgba8 (packed 16-bit)': TextureFormat.Rgba8,
+  rgba32f: TextureFormat.Rgba32F,
+  rgba16f: TextureFormat.Rgba16F,
+} as const satisfies Record<string, ColorTextureFormat>;
+
+type FormatName = keyof typeof FORMATS;
+
 const soundShader = createFilterShader({
   uniforms: { sampleOffset: UniformType.Int, sampleRate: UniformType.Float, packed: UniformType.Int },
   glsl: {
@@ -67,75 +75,62 @@ class GpuPcmStreamScene extends Scene {
   private readonly right = new Float32Array(blockFrames);
   private readonly channels = [this.left, this.right];
   private readonly pending: Array<{ read: PixelRead<Uint8ClampedArray> | PixelRead<Float32Array>; submittedAt: number }> = [];
-  private format: ColorTextureFormat = TextureFormat.Rgba8;
   private generatedFrames = 0;
   private readbackMs = 0;
-  private producing = true;
   private starting = false;
   private active = false;
   private draining = false;
   private label!: Text;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private hud!: ReturnType<typeof mountControls>;
+  private prompt!: Text;
+  private panel!: DemoPanel<{ format: ChoiceSpec<FormatName>; producing: ToggleSpec }>;
+
+  private get format(): ColorTextureFormat {
+    return FORMATS[this.panel.values.format];
+  }
 
   override init(): void {
     this.label = new Text('', { fillColor: Color.white, fontSize: 23 }).setPosition(145, 190);
-    this.hud = mountControls({
-      title: 'GPU stereo PCM',
-      status: 'Choose a format, then press Start to unlock audio.',
-      hint: '220 Hz left / 330 Hz right. Pause production to hear starvation. Format changes create a fresh stream.',
-    });
-    this.panel = mountControlPanel({ title: 'GPU producer' });
-    this.panel.addCycle({
-      label: 'Readback format',
-      options: ['rgba8 (packed 16-bit)', 'rgba32f', 'rgba16f'],
-      onChange: index => {
-        this.format = ([TextureFormat.Rgba8, TextureFormat.Rgba32F, TextureFormat.Rgba16F] as const)[index]!;
-        this.createStream();
+    this.prompt = new Text('Click or press any key to start the stream', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(this.app.width / 2, this.app.height - 48);
+    this.panel = demoPanel({
+      title: 'GPU producer',
+      controls: {
+        format: choice('Readback format', Object.keys(FORMATS) as FormatName[]),
+        producing: toggle('Produce PCM', true),
       },
-    });
-    this.panel.addButton({
-      label: 'Start',
-      onClick: () => {
-        const stream = this.stream;
-
-        if (!stream || stream.state !== 'ready') {
-          return;
-        }
-
-        void getAudioContext()
-          .resume()
-          .then(() => {
-            if (this.stream !== stream || stream.state !== 'ready') {
-              return;
-            }
-
-            this.active = true;
-            this.starting = true;
-            this.hud.setStatus('Prebuffering GPU samples...');
-          })
-          .catch(error => this.fail(error));
-      },
-    });
-    this.panel.addToggle({
-      label: 'Produce PCM',
-      value: true,
-      onChange: value => {
-        this.producing = value;
+      actions: {
+        Drain: () => {
+          if (this.active) {
+            this.draining = true;
+          }
+        },
+        'New stream': () => this.createStream(),
       },
-    });
-    this.panel.addButton({
-      label: 'Drain',
-      onClick: () => {
-        if (this.active) {
-          this.draining = true;
+      onChange: key => {
+        // The mount-time calls arrive before the panel handle exists; init() creates the first stream once.
+        if (key === 'format' && this.panel) {
+          this.createStream();
         }
       },
     });
-    this.panel.addButton({ label: 'New stream', onClick: () => this.createStream() });
+    // onUnlock replays when audio is already unlocked, so a warm context starts immediately.
+    this.app.audio.onUnlock.add(this.start);
     this.createStream();
   }
 
+  private readonly start = (): void => {
+    const stream = this.stream;
+
+    if (!stream || stream.state !== 'ready' || this.active || this.app.audio.locked) {
+      return;
+    }
+
+    this.active = true;
+    this.starting = true;
+    this.panel.status('Prebuffering GPU samples...');
+  };
+
   private releaseStream(): void {
     this.active = false;
     this.starting = false;
@@ -153,12 +148,13 @@ class GpuPcmStreamScene extends Scene {
 
   private createStream(): void {
     this.releaseStream();
+    this.panel.status('');
     this.generatedFrames = 0;
     this.readbackMs = 0;
     const context = this.app.rendering;
 
     if (!context.supportsReadbackFormat(this.format)) {
-      this.hud.setStatus(`${this.format} readback is unsupported. Choose another format.`);
+      this.panel.status(`${this.format} readback is unsupported. Choose another format.`);
 
       return;
     }
@@ -174,12 +170,12 @@ class GpuPcmStreamScene extends Scene {
       this.stream = stream;
       this.filter.uniforms.sampleRate.set(stream.sampleRate);
       this.filter.uniforms.packed.set(this.format === TextureFormat.Rgba8 ? 1 : 0);
-      stream.onEnd.add(() => this.hud.setStatus('Drained. Create a new stream to play again.'));
+      stream.onEnd.add(() => this.panel.status('Drained. Create a new stream to play again.'));
       stream.onError.add(error => this.fail(error));
       void stream.ready
         .then(() => {
           if (this.stream === stream) {
-            this.hud.setStatus('Ready. Press Start to unlock audio and prebuffer.');
+            this.start();
           }
         })
         .catch(error => {
@@ -194,7 +190,7 @@ class GpuPcmStreamScene extends Scene {
 
   private fail(error: unknown): void {
     this.releaseStream();
-    this.hud.setStatus(String(error));
+    this.panel.status(String(error));
   }
 
   private pump(context: RenderingContext): void {
@@ -246,7 +242,7 @@ class GpuPcmStreamScene extends Scene {
     if (this.starting && (stream.bufferedFrames >= targetFrames || this.draining)) {
       stream.start(getAudioContext().currentTime + 0.02);
       this.starting = false;
-      this.hud.setStatus('Playing GPU stereo through the music bus.');
+      this.panel.status('');
     }
 
     if (this.draining) {
@@ -258,7 +254,7 @@ class GpuPcmStreamScene extends Scene {
       return;
     }
 
-    if (!this.producing) {
+    if (!this.panel.values.producing) {
       return;
     }
 
@@ -291,17 +287,22 @@ class GpuPcmStreamScene extends Scene {
       `PCM queue: ${stream?.bufferedFrames ?? 0} / ${capacityFrames} | Peak: ${stream?.highWaterFrames ?? 0} frames (${((stream?.bufferedSeconds ?? 0) * 1000).toFixed(1)} ms)`,
       `Readback: ${this.pending.length} / ${readbackSlots} slots | last observed wait: ${this.readbackMs.toFixed(1)} ms`,
       `Starvation: ${stream?.underruns ?? 0} episodes / ${stream?.underrunFrames ?? 0} silent frames`,
-      `Overflow: ${stream?.overflowCount ?? 0} blocks | ${this.producing ? 'Producer enabled' : 'Producer paused'}`,
+      `Overflow: ${stream?.overflowCount ?? 0} blocks | ${this.panel.values.producing ? 'Producer enabled' : 'Producer paused'}`,
     ].join('\n');
     context.render(this.label);
+
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
 
   override destroy(): void {
     this.releaseStream();
     this.input.destroy();
+    this.app.audio.onUnlock.remove(this.start);
     this.panel?.dispose();
-    this.hud?.dispose();
     this.label?.destroy();
+    this.prompt?.destroy();
     super.destroy();
   }
 }
diff --git a/examples/audio-fx/pcm-stream.js b/examples/audio-fx/pcm-stream.js
index 5f52e741a..801362343 100644
--- a/examples/audio-fx/pcm-stream.js
+++ b/examples/audio-fx/pcm-stream.js
@@ -1,79 +1,65 @@
 // Auto-generated from pcm-stream.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, getAudioContext, Scene, Text } from '@codexo/exojs';
-import { PcmStreamSource } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { PcmStreamSource } from '@codexo/exojs/audio-fx';
+import { demoPanel, toggle } from '@examples/runtime';
 class PcmStreamScene extends Scene {
   stream = null;
   left = new Float32Array(512);
   right = new Float32Array(512);
   channels = [this.left, this.right];
   cursor = 0;
-  producing = true;
   label;
+  prompt;
   panel;
-  hud;
   init() {
     this.label = new Text('', { fillColor: Color.white, fontSize: 26 }).setPosition(170, 190);
-    this.hud = mountControls({
-      title: 'Streaming stereo PCM',
-      status: 'Loading audio. Press Start when ready.',
-      hint: 'Pause the producer to hear starvation. Clear empties the queue; Drain finishes it.',
-    });
-    this.panel = mountControlPanel({ title: 'PCM producer' });
-    this.panel.addButton({
-      label: 'Start',
-      onClick: () => {
-        const stream = this.stream;
-        if (!stream || stream.state !== 'ready') {
-          return;
-        }
-        void getAudioContext()
-          .resume()
-          .then(() => {
-            if (this.stream !== stream || stream.state !== 'ready') {
-              return;
-            }
-            this.fillQueue();
-            stream.start(getAudioContext().currentTime + 0.02);
-            this.hud.setStatus('Playing 220 Hz left / 330 Hz right through the music bus.');
-          })
-          .catch(error => this.hud.setStatus(String(error)));
-      },
-    });
-    this.panel.addToggle({
-      label: 'Produce PCM',
-      value: true,
-      onChange: value => {
-        this.producing = value;
+    this.prompt = new Text('Click or press any key to start the stream', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(this.app.width / 2, this.app.height - 48);
+    this.panel = demoPanel({
+      title: 'PCM producer',
+      controls: { producing: toggle('Produce PCM', true) },
+      actions: {
+        'Clear queue': () => this.stream?.clear(),
+        Drain: () => this.stream?.close(),
+        'New stream': () => this.createStream(),
       },
     });
-    this.panel.addButton({ label: 'Clear queue', onClick: () => this.stream?.clear() });
-    this.panel.addButton({ label: 'Drain', onClick: () => this.stream?.close() });
-    this.panel.addButton({ label: 'New stream', onClick: () => this.createStream() });
+    // onUnlock replays when audio is already unlocked, so a warm context starts immediately.
+    this.app.audio.onUnlock.add(this.start);
     this.createStream();
   }
+  start = () => {
+    const stream = this.stream;
+    if (!stream || stream.state !== 'ready' || this.app.audio.locked) {
+      return;
+    }
+    this.fillQueue();
+    stream.start(getAudioContext().currentTime + 0.02);
+  };
   createStream() {
+    this.panel.status('');
     this.stream?.destroy();
     this.cursor = 0;
     const stream = new PcmStreamSource({ channels: 2, capacityFrames: 8192, bus: this.app.audio.music });
     this.stream = stream;
-    stream.onEnd.add(() => this.hud.setStatus('Drained. Create a new stream to play again.'));
-    stream.onError.add(error => this.hud.setStatus(error.message));
+    stream.onEnd.add(() => this.panel.status('Drained. Create a new stream to play again.'));
+    stream.onError.add(error => this.panel.status(error.message));
     void stream.ready
       .then(() => {
         if (this.stream === stream) {
-          this.hud.setStatus('Ready. Press Start to unlock audio and begin.');
+          this.start();
         }
       })
       .catch(error => {
         if (this.stream === stream && stream.state !== 'destroyed') {
-          this.hud.setStatus(String(error));
+          this.panel.status(String(error));
         }
       });
   }
   fillQueue() {
     const stream = this.stream;
-    if (!stream || !this.producing || stream.clearing || (stream.state !== 'ready' && stream.state !== 'running')) {
+    if (!stream || !this.panel.values.producing || stream.clearing || (stream.state !== 'ready' && stream.state !== 'running')) {
       return;
     }
     const targetFrames = Math.ceil(stream.sampleRate * 0.06);
@@ -98,7 +84,7 @@ class PcmStreamScene extends Scene {
       return;
     }
     this.label.text = [
-      `State: ${stream.state}  |  ${stream.sampleRate} Hz stereo`,
+      `State: ${stream.state}  |  220 Hz left / 330 Hz right  |  ${stream.sampleRate} Hz stereo`,
       `Queued: ${stream.bufferedFrames} / ${stream.capacityFrames} frames (${(stream.bufferedSeconds * 1000).toFixed(1)} ms)`,
       `Played: ${stream.playedFrames} frames`,
       `Accepted: ${stream.enqueuedFrames} frames  |  Queue peak: ${stream.highWaterFrames} frames`,
@@ -108,13 +94,17 @@ class PcmStreamScene extends Scene {
   }
   draw(context) {
     context.render(this.label);
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
   destroy() {
     this.stream?.destroy();
     this.stream = null;
+    this.app.audio.onUnlock.remove(this.start);
     this.panel?.dispose();
-    this.hud?.dispose();
     this.label?.destroy();
+    this.prompt?.destroy();
     super.destroy();
   }
 }
diff --git a/examples/audio-fx/pcm-stream.ts b/examples/audio-fx/pcm-stream.ts
index d6fca8e6e..94d590bfe 100644
--- a/examples/audio-fx/pcm-stream.ts
+++ b/examples/audio-fx/pcm-stream.ts
@@ -1,6 +1,6 @@
 import { Application, Color, FixedResolutionCanvasSizing, getAudioContext, type RenderingContext, Scene, Text } from '@codexo/exojs';
-import { PcmStreamSource } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { PcmStreamSource } from '@codexo/exojs/audio-fx';
+import { type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
 
 class PcmStreamScene extends Scene {
   private stream: PcmStreamSource | null = null;
@@ -8,71 +8,57 @@ class PcmStreamScene extends Scene {
   private readonly right = new Float32Array(512);
   private readonly channels = [this.left, this.right];
   private cursor = 0;
-  private producing = true;
   private label!: Text;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private hud!: ReturnType<typeof mountControls>;
+  private prompt!: Text;
+  private panel!: DemoPanel<{ producing: ToggleSpec }>;
 
   override init(): void {
     this.label = new Text('', { fillColor: Color.white, fontSize: 26 }).setPosition(170, 190);
-    this.hud = mountControls({
-      title: 'Streaming stereo PCM',
-      status: 'Loading audio. Press Start when ready.',
-      hint: 'Pause the producer to hear starvation. Clear empties the queue; Drain finishes it.',
-    });
-    this.panel = mountControlPanel({ title: 'PCM producer' });
-    this.panel.addButton({
-      label: 'Start',
-      onClick: () => {
-        const stream = this.stream;
-
-        if (!stream || stream.state !== 'ready') {
-          return;
-        }
-
-        void getAudioContext()
-          .resume()
-          .then(() => {
-            if (this.stream !== stream || stream.state !== 'ready') {
-              return;
-            }
-
-            this.fillQueue();
-            stream.start(getAudioContext().currentTime + 0.02);
-            this.hud.setStatus('Playing 220 Hz left / 330 Hz right through the music bus.');
-          })
-          .catch(error => this.hud.setStatus(String(error)));
+    this.prompt = new Text('Click or press any key to start the stream', { fillColor: Color.white, fontSize: 22, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(this.app.width / 2, this.app.height - 48);
+    this.panel = demoPanel({
+      title: 'PCM producer',
+      controls: { producing: toggle('Produce PCM', true) },
+      actions: {
+        'Clear queue': () => this.stream?.clear(),
+        Drain: () => this.stream?.close(),
+        'New stream': () => this.createStream(),
       },
     });
-    this.panel.addToggle({
-      label: 'Produce PCM',
-      value: true,
-      onChange: value => {
-        this.producing = value;
-      },
-    });
-    this.panel.addButton({ label: 'Clear queue', onClick: () => this.stream?.clear() });
-    this.panel.addButton({ label: 'Drain', onClick: () => this.stream?.close() });
-    this.panel.addButton({ label: 'New stream', onClick: () => this.createStream() });
+    // onUnlock replays when audio is already unlocked, so a warm context starts immediately.
+    this.app.audio.onUnlock.add(this.start);
     this.createStream();
   }
 
+  private readonly start = (): void => {
+    const stream = this.stream;
+
+    if (!stream || stream.state !== 'ready' || this.app.audio.locked) {
+      return;
+    }
+
+    this.fillQueue();
+    stream.start(getAudioContext().currentTime + 0.02);
+  };
+
   private createStream(): void {
+    this.panel.status('');
     this.stream?.destroy();
     this.cursor = 0;
     const stream = new PcmStreamSource({ channels: 2, capacityFrames: 8192, bus: this.app.audio.music });
     this.stream = stream;
-    stream.onEnd.add(() => this.hud.setStatus('Drained. Create a new stream to play again.'));
-    stream.onError.add(error => this.hud.setStatus(error.message));
+    stream.onEnd.add(() => this.panel.status('Drained. Create a new stream to play again.'));
+    stream.onError.add(error => this.panel.status(error.message));
     void stream.ready
       .then(() => {
         if (this.stream === stream) {
-          this.hud.setStatus('Ready. Press Start to unlock audio and begin.');
+          this.start();
         }
       })
       .catch(error => {
         if (this.stream === stream && stream.state !== 'destroyed') {
-          this.hud.setStatus(String(error));
+          this.panel.status(String(error));
         }
       });
   }
@@ -80,7 +66,7 @@ class PcmStreamScene extends Scene {
   private fillQueue(): void {
     const stream = this.stream;
 
-    if (!stream || !this.producing || stream.clearing || (stream.state !== 'ready' && stream.state !== 'running')) {
+    if (!stream || !this.panel.values.producing || stream.clearing || (stream.state !== 'ready' && stream.state !== 'running')) {
       return;
     }
 
@@ -113,7 +99,7 @@ class PcmStreamScene extends Scene {
     }
 
     this.label.text = [
-      `State: ${stream.state}  |  ${stream.sampleRate} Hz stereo`,
+      `State: ${stream.state}  |  220 Hz left / 330 Hz right  |  ${stream.sampleRate} Hz stereo`,
       `Queued: ${stream.bufferedFrames} / ${stream.capacityFrames} frames (${(stream.bufferedSeconds * 1000).toFixed(1)} ms)`,
       `Played: ${stream.playedFrames} frames`,
       `Accepted: ${stream.enqueuedFrames} frames  |  Queue peak: ${stream.highWaterFrames} frames`,
@@ -124,14 +110,19 @@ class PcmStreamScene extends Scene {
 
   override draw(context: RenderingContext): void {
     context.render(this.label);
+
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
 
   override destroy(): void {
     this.stream?.destroy();
     this.stream = null;
+    this.app.audio.onUnlock.remove(this.start);
     this.panel?.dispose();
-    this.hud?.dispose();
     this.label?.destroy();
+    this.prompt?.destroy();
     super.destroy();
   }
 }
diff --git a/examples/audio-fx/reverb-and-delay.js b/examples/audio-fx/reverb-and-delay.js
index 19f99c83f..cc93ddbff 100644
--- a/examples/audio-fx/reverb-and-delay.js
+++ b/examples/audio-fx/reverb-and-delay.js
@@ -1,79 +1,68 @@
 // Auto-generated from reverb-and-delay.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
-import { DelayEffect, ReverbEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { DelayEffect, ReverbEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, toggle } from '@examples/runtime';
+const PRESETS = {
+  'Small room': { reverbWet: 0.3, decay: 1.3, delayWet: 0.12, delaySeconds: 0.18, feedback: 0.2 },
+  'Large hall': { reverbWet: 0.55, decay: 5, delayWet: 0.18, delaySeconds: 0.32, feedback: 0.3 },
+  Echo: { reverbWet: 0.12, decay: 1.5, delayWet: 0.55, delaySeconds: 0.48, feedback: 0.55 },
+};
 class ReverbAndDelayScene extends Scene {
   sound;
   reverb;
   delay;
   label;
+  prompt;
   panel;
-  hud;
-  preset = 'Small room';
-  bypass = false;
-  reverbWet = 0.3;
-  delayWet = 0.12;
   init() {
     const audio = this.app.audio;
-    this.sound = this.loader.get('audio/impact-light.ogg');
+    this.sound = this.loader.get(assets.soundImpactLight);
     this.reverb = new ReverbEffect({ wet: 0.3, decay: 1.3 });
     this.delay = new DelayEffect({ wet: 0.12, delaySeconds: 0.18, feedback: 0.2 });
     audio.sound.addEffect(this.reverb);
     audio.sound.addEffect(this.delay);
     this.label = new Text('Sound -> Reverb -> Delay -> Sound bus', { fillColor: Color.white, fontSize: 25 });
     this.label.setPosition(365, 250);
-    this.hud = mountControls({
-      title: 'Reverb and Delay',
-      status: 'Small room: play the impact, then compare presets and bypass.',
-      hint: 'The dry/wet path stays audible as the room and echo change.',
-    });
-    this.panel = mountControlPanel({ title: 'Space and echoes' });
-    this.panel.addButton({
-      label: 'Play impact',
-      onClick: () => {
-        if (!audio.locked) {
-          audio.play(this.sound, { bus: audio.sound, volume: 0.4 });
-        }
+    this.prompt = new Text('Click or press any key to enable audio', { fillColor: Color.white, fontSize: 22 });
+    this.prompt.setPosition(415, 330);
+    this.panel = demoPanel({
+      title: 'Space and echoes',
+      controls: {
+        preset: choice('Preset', Object.keys(PRESETS)),
+        bypass: toggle('Bypass', false),
       },
-    });
-    this.panel.addButton({ label: 'Small room', onClick: () => this.setPreset('Small room', 0.3, 1.3, 0.12, 0.18, 0.2) });
-    this.panel.addButton({ label: 'Large hall', onClick: () => this.setPreset('Large hall', 0.55, 5, 0.18, 0.32, 0.3) });
-    this.panel.addButton({ label: 'Echo', onClick: () => this.setPreset('Echo', 0.12, 1.5, 0.55, 0.48, 0.55) });
-    this.panel.addToggle({
-      label: 'Bypass',
-      value: false,
-      onChange: value => {
-        this.bypass = value;
-        this.applyWet();
+      actions: {
+        'Play impact': () => {
+          if (!audio.locked) {
+            audio.play(this.sound, { bus: audio.sound, volume: 0.4 });
+          }
+        },
       },
+      onChange: (_key, _value, values) => this.applyPreset(PRESETS[values.preset], values.bypass),
     });
   }
-  setPreset(name, reverbWet, decay, delayWet, delaySeconds, feedback) {
-    this.preset = name;
-    this.reverb.decay = decay;
-    this.delay.delaySeconds = delaySeconds;
-    this.delay.feedback = feedback;
-    this.reverbWet = reverbWet;
-    this.delayWet = delayWet;
-    this.applyWet();
-  }
-  applyWet() {
-    this.reverb.wet = this.bypass ? 0 : this.reverbWet;
-    this.delay.wet = this.bypass ? 0 : this.delayWet;
-    this.hud.setStatus(
-      `${this.preset}${this.bypass ? ' (bypassed)' : ''}: reverb ${this.reverb.wet.toFixed(2)}, delay ${this.delay.wet.toFixed(2)}.`,
-    );
+  applyPreset(preset, bypass) {
+    this.reverb.decay = preset.decay;
+    this.delay.delaySeconds = preset.delaySeconds;
+    this.delay.feedback = preset.feedback;
+    this.reverb.wet = bypass ? 0 : preset.reverbWet;
+    this.delay.wet = bypass ? 0 : preset.delayWet;
+    this.panel?.status(bypass ? 'Bypassed: dry impact' : `Reverb ${this.reverb.wet.toFixed(2)}, delay ${this.delay.wet.toFixed(2)}`);
   }
   draw(context) {
     context.render(this.label);
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
   destroy() {
     this.app.audio.sound.removeEffect(this.delay).removeEffect(this.reverb);
     this.delay?.destroy();
     this.reverb?.destroy();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.label?.destroy();
+    this.prompt?.destroy();
     super.destroy();
   }
 }
@@ -81,6 +70,5 @@ const app = new Application({
   scenes: { ReverbAndDelayScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(ReverbAndDelayScene);
diff --git a/examples/audio-fx/reverb-and-delay.ts b/examples/audio-fx/reverb-and-delay.ts
index 3875cf63c..fa01a640f 100644
--- a/examples/audio-fx/reverb-and-delay.ts
+++ b/examples/audio-fx/reverb-and-delay.ts
@@ -1,22 +1,35 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, type Sound, Text } from '@codexo/exojs';
-import { DelayEffect, ReverbEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { DelayEffect, ReverbEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
+
+interface Preset {
+  readonly reverbWet: number;
+  readonly decay: number;
+  readonly delayWet: number;
+  readonly delaySeconds: number;
+  readonly feedback: number;
+}
+
+const PRESETS = {
+  'Small room': { reverbWet: 0.3, decay: 1.3, delayWet: 0.12, delaySeconds: 0.18, feedback: 0.2 },
+  'Large hall': { reverbWet: 0.55, decay: 5, delayWet: 0.18, delaySeconds: 0.32, feedback: 0.3 },
+  Echo: { reverbWet: 0.12, decay: 1.5, delayWet: 0.55, delaySeconds: 0.48, feedback: 0.55 },
+} as const satisfies Record<string, Preset>;
+
+type PresetName = keyof typeof PRESETS;
 
 class ReverbAndDelayScene extends Scene {
   private sound!: Sound;
   private reverb!: ReverbEffect;
   private delay!: DelayEffect;
   private label!: Text;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private hud!: ReturnType<typeof mountControls>;
-  private preset = 'Small room';
-  private bypass = false;
-  private reverbWet = 0.3;
-  private delayWet = 0.12;
+  private prompt!: Text;
+  private panel!: DemoPanel<{ preset: ChoiceSpec<PresetName>; bypass: ToggleSpec }>;
 
   override init(): void {
     const audio = this.app.audio;
-    this.sound = this.loader.get('audio/impact-light.ogg');
+    this.sound = this.loader.get(assets.soundImpactLight);
     this.reverb = new ReverbEffect({ wet: 0.3, decay: 1.3 });
     this.delay = new DelayEffect({ wet: 0.12, delaySeconds: 0.18, feedback: 0.2 });
     audio.sound.addEffect(this.reverb);
@@ -24,53 +37,41 @@ class ReverbAndDelayScene extends Scene {
 
     this.label = new Text('Sound -> Reverb -> Delay -> Sound bus', { fillColor: Color.white, fontSize: 25 });
     this.label.setPosition(365, 250);
-    this.hud = mountControls({
-      title: 'Reverb and Delay',
-      status: 'Small room: play the impact, then compare presets and bypass.',
-      hint: 'The dry/wet path stays audible as the room and echo change.',
-    });
-    this.panel = mountControlPanel({ title: 'Space and echoes' });
-    this.panel.addButton({
-      label: 'Play impact',
-      onClick: () => {
-        if (!audio.locked) {
-          audio.play(this.sound, { bus: audio.sound, volume: 0.4 });
-        }
+    this.prompt = new Text('Click or press any key to enable audio', { fillColor: Color.white, fontSize: 22 });
+    this.prompt.setPosition(415, 330);
+
+    this.panel = demoPanel({
+      title: 'Space and echoes',
+      controls: {
+        preset: choice('Preset', Object.keys(PRESETS) as PresetName[]),
+        bypass: toggle('Bypass', false),
       },
-    });
-    this.panel.addButton({ label: 'Small room', onClick: () => this.setPreset('Small room', 0.3, 1.3, 0.12, 0.18, 0.2) });
-    this.panel.addButton({ label: 'Large hall', onClick: () => this.setPreset('Large hall', 0.55, 5, 0.18, 0.32, 0.3) });
-    this.panel.addButton({ label: 'Echo', onClick: () => this.setPreset('Echo', 0.12, 1.5, 0.55, 0.48, 0.55) });
-    this.panel.addToggle({
-      label: 'Bypass',
-      value: false,
-      onChange: value => {
-        this.bypass = value;
-        this.applyWet();
+      actions: {
+        'Play impact': () => {
+          if (!audio.locked) {
+            audio.play(this.sound, { bus: audio.sound, volume: 0.4 });
+          }
+        },
       },
+      onChange: (_key, _value, values) => this.applyPreset(PRESETS[values.preset], values.bypass),
     });
   }
 
-  private setPreset(name: string, reverbWet: number, decay: number, delayWet: number, delaySeconds: number, feedback: number): void {
-    this.preset = name;
-    this.reverb.decay = decay;
-    this.delay.delaySeconds = delaySeconds;
-    this.delay.feedback = feedback;
-    this.reverbWet = reverbWet;
-    this.delayWet = delayWet;
-    this.applyWet();
-  }
-
-  private applyWet(): void {
-    this.reverb.wet = this.bypass ? 0 : this.reverbWet;
-    this.delay.wet = this.bypass ? 0 : this.delayWet;
-    this.hud.setStatus(
-      `${this.preset}${this.bypass ? ' (bypassed)' : ''}: reverb ${this.reverb.wet.toFixed(2)}, delay ${this.delay.wet.toFixed(2)}.`,
-    );
+  private applyPreset(preset: Preset, bypass: boolean): void {
+    this.reverb.decay = preset.decay;
+    this.delay.delaySeconds = preset.delaySeconds;
+    this.delay.feedback = preset.feedback;
+    this.reverb.wet = bypass ? 0 : preset.reverbWet;
+    this.delay.wet = bypass ? 0 : preset.delayWet;
+    this.panel?.status(bypass ? 'Bypassed: dry impact' : `Reverb ${this.reverb.wet.toFixed(2)}, delay ${this.delay.wet.toFixed(2)}`);
   }
 
   override draw(context: RenderingContext): void {
     context.render(this.label);
+
+    if (this.app.audio.locked) {
+      context.render(this.prompt);
+    }
   }
 
   override destroy(): void {
@@ -78,8 +79,8 @@ class ReverbAndDelayScene extends Scene {
     this.delay?.destroy();
     this.reverb?.destroy();
     this.panel?.dispose();
-    this.hud?.dispose();
     this.label?.destroy();
+    this.prompt?.destroy();
     super.destroy();
   }
 }
@@ -88,7 +89,6 @@ const app = new Application({
   scenes: { ReverbAndDelayScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(ReverbAndDelayScene);
diff --git a/examples/audio-fx/signal-graph.js b/examples/audio-fx/signal-graph.js
index 061a26da4..97b97a8e9 100644
--- a/examples/audio-fx/signal-graph.js
+++ b/examples/audio-fx/signal-graph.js
@@ -1,7 +1,8 @@
 // Auto-generated from signal-graph.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { AudioAnalyser, CompressorEffect, EqualizerEffect, LimiterEffect, ReverbEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { AudioAnalyser, CompressorEffect, EqualizerEffect, LimiterEffect, ReverbEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { mountControlPanel } from '@examples/runtime';
 const NODE_W = 180;
 const NODE_H = 86;
 const LANE_COLORS = {
@@ -44,10 +45,10 @@ class SignalGraphScene extends Scene {
   flow = 0;
   graph = new Graphics();
   panel = null;
-  hud;
+  hint;
   async load() {
-    this.music = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
-    this.impact = this.loader.get('audio/impact-light.ogg');
+    this.music = await this.loader.load(assets.musicLoopMain);
+    this.impact = this.loader.get(assets.soundImpactLight);
   }
   init() {
     const audio = this.app.audio;
@@ -90,13 +91,9 @@ class SignalGraphScene extends Scene {
     this.analysers.set('music', new AudioAnalyser({ source: audio.music, fftSize: 1024 }));
     this.analysers.set('sound', new AudioAnalyser({ source: audio.sound, fftSize: 1024 }));
     this.analysers.set('master', new AudioAnalyser({ source: audio.master, fftSize: 1024 }));
-    this.hud = mountControls({
-      title: 'Audio Signal Graph',
-      controls: [{ keys: 'Click a node', action: 'edit its parameters' }],
-      status: 'Click or press any key to start audio…',
-      hint: 'Every box is a real source, effect or bus; every wire is a real connection. Meters show each bus output.',
-      corner: 'top-right',
-    });
+    this.hint = new Text('', { fillColor: Color.white, fontSize: 20, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(this.app.width / 2, this.app.height - 48);
     this.app.input.onPointerDown.add(this.onPointerDown);
     // A stream is deferred until the unlock gesture, so it can be started now.
     this.musicVoice = audio.play(this.music, { bus: audio.music, loop: true, volume: this.musicVolume });
@@ -254,16 +251,11 @@ class SignalGraphScene extends Scene {
           n.status.text = n.enabled ? 'active' : 'bypassed';
       }
     }
-    this.hud.setStatus(
-      this.app.audio.locked
-        ? 'Click or press any key to start audio…'
-        : `Music bus ${fmt(this.levels.music)} · SFX bus ${fmt(this.levels.sound)}`,
-    );
   }
   draw(context) {
     const g = this.graph.clear();
     const byId = id => this.nodes.find(n => n.id === id);
-    // Wires: a cubic Bézier from the right edge of one node to the left edge of
+    // Wires: a cubic Bezier from the right edge of one node to the left edge of
     // the next, brighter and thicker the louder the bus it carries.
     for (const edge of this.edges) {
       const a = byId(edge.from);
@@ -325,6 +317,8 @@ class SignalGraphScene extends Scene {
     g.lineWidth = 0;
     context.render(g);
     super.draw(context);
+    this.hint.text = this.app.audio.locked ? 'Click or press any key to start audio' : 'Click a node to edit its parameters';
+    context.render(this.hint);
   }
   destroy() {
     const audio = this.app.audio;
@@ -343,7 +337,7 @@ class SignalGraphScene extends Scene {
     }
     audio.master.volume = 1;
     this.panel?.dispose();
-    this.hud.dispose();
+    this.hint?.destroy();
     this.graph.destroy();
     super.destroy();
   }
@@ -352,6 +346,5 @@ const app = new Application({
   scenes: { SignalGraphScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(10, 12, 20),
-  loader: { basePath: 'assets/' },
 });
 await app.start(SignalGraphScene);
diff --git a/examples/audio-fx/signal-graph.ts b/examples/audio-fx/signal-graph.ts
index f7e169d16..bbfcb6d21 100644
--- a/examples/audio-fx/signal-graph.ts
+++ b/examples/audio-fx/signal-graph.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioBus,
   type AudioEffect,
   type AudioStream,
@@ -14,8 +13,9 @@ import {
   Text,
   type Voice,
 } from '@codexo/exojs';
-import { AudioAnalyser, CompressorEffect, EqualizerEffect, LimiterEffect, ReverbEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AudioAnalyser, CompressorEffect, EqualizerEffect, LimiterEffect, ReverbEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { mountControlPanel } from '@examples/runtime';
 
 type NodeKind = 'source' | 'effect' | 'bus' | 'output';
 type Lane = 'music' | 'sound' | 'master';
@@ -95,11 +95,11 @@ class SignalGraphScene extends Scene {
 
   private graph = new Graphics();
   private panel: ReturnType<typeof mountControlPanel> | null = null;
-  private hud!: ReturnType<typeof mountControls>;
+  private hint!: Text;
 
   override async load(): Promise<void> {
-    this.music = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
-    this.impact = this.loader.get('audio/impact-light.ogg');
+    this.music = await this.loader.load(assets.musicLoopMain);
+    this.impact = this.loader.get(assets.soundImpactLight);
   }
 
   override init(): void {
@@ -159,13 +159,9 @@ class SignalGraphScene extends Scene {
     this.analysers.set('sound', new AudioAnalyser({ source: audio.sound, fftSize: 1024 }));
     this.analysers.set('master', new AudioAnalyser({ source: audio.master, fftSize: 1024 }));
 
-    this.hud = mountControls({
-      title: 'Audio Signal Graph',
-      controls: [{ keys: 'Click a node', action: 'edit its parameters' }],
-      status: 'Click or press any key to start audio…',
-      hint: 'Every box is a real source, effect or bus; every wire is a real connection. Meters show each bus output.',
-      corner: 'top-right',
-    });
+    this.hint = new Text('', { fillColor: Color.white, fontSize: 20, align: 'center' })
+      .setAnchor(0.5)
+      .setPosition(this.app.width / 2, this.app.height - 48);
 
     this.app.input.onPointerDown.add(this.onPointerDown);
 
@@ -344,19 +340,13 @@ class SignalGraphScene extends Scene {
           n.status.text = n.enabled ? 'active' : 'bypassed';
       }
     }
-
-    this.hud.setStatus(
-      this.app.audio.locked
-        ? 'Click or press any key to start audio…'
-        : `Music bus ${fmt(this.levels.music)} · SFX bus ${fmt(this.levels.sound)}`,
-    );
   }
 
   override draw(context: RenderingContext): void {
     const g = this.graph.clear();
     const byId = (id: string): GraphNode => this.nodes.find(n => n.id === id)!;
 
-    // Wires: a cubic Bézier from the right edge of one node to the left edge of
+    // Wires: a cubic Bezier from the right edge of one node to the left edge of
     // the next, brighter and thicker the louder the bus it carries.
     for (const edge of this.edges) {
       const a = byId(edge.from);
@@ -431,6 +421,8 @@ class SignalGraphScene extends Scene {
 
     context.render(g);
     super.draw(context);
+    this.hint.text = this.app.audio.locked ? 'Click or press any key to start audio' : 'Click a node to edit its parameters';
+    context.render(this.hint);
   }
 
   override destroy(): void {
@@ -455,7 +447,7 @@ class SignalGraphScene extends Scene {
 
     audio.master.volume = 1;
     this.panel?.dispose();
-    this.hud.dispose();
+    this.hint?.destroy();
     this.graph.destroy();
     super.destroy();
   }
@@ -465,7 +457,6 @@ const app = new Application({
   scenes: { SignalGraphScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(10, 12, 20),
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(SignalGraphScene);
diff --git a/examples/audio-fx/vocoder.js b/examples/audio-fx/vocoder.js
index 61d388f2f..91fa1991d 100644
--- a/examples/audio-fx/vocoder.js
+++ b/examples/audio-fx/vocoder.js
@@ -1,13 +1,14 @@
 // Auto-generated from vocoder.ts - edit the .ts source, not this file.
-import { Application, Asset, AudioBus, AudioGenerator, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { AudioAnalyser, VocoderEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
-// Spoken phrases (Kenney Voiceover Pack, CC0) - a voice modulator is what makes
-// a vocoder recognisable as the classic "robot voice" effect.
+import { Application, AudioBus, AudioGenerator, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { AudioAnalyser, VocoderEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, toggle } from '@examples/runtime';
+// A spoken voice as modulator is what makes a vocoder recognisable as the
+// classic "robot voice" effect.
 const PHRASES = [
-  { key: 'congrats', label: 'Congratulations', asset: assets.demo.voice.congratulations },
-  { key: 'mission', label: 'Mission complete', asset: assets.demo.voice.missionComplete },
-  { key: 'objective', label: 'Objective achieved', asset: assets.demo.voice.objectiveAchieved },
+  { key: 'congrats', label: 'Congratulations', asset: assets.voiceCongratulations },
+  { key: 'mission', label: 'Mission complete', asset: assets.voiceMissionComplete },
+  { key: 'objective', label: 'Objective achieved', asset: assets.voiceObjectiveAchieved },
 ];
 class VocoderScene extends Scene {
   sidechainBus;
@@ -15,16 +16,12 @@ class VocoderScene extends Scene {
   vocoder;
   level;
   phrases = new Map();
-  phraseIndex = 0;
   pulse = 0;
   gfx;
   phraseLabel;
-  hintLabel;
   tapPrompt;
-  hud;
   panel;
   carrierVoice = null;
-  processed = true;
   pendingPhrase = false;
   init() {
     const app = this.app;
@@ -38,10 +35,7 @@ class VocoderScene extends Scene {
     this.modulatorBus = new AudioBus('modulator', { parent: this.sidechainBus });
     app.audio.registerBus(this.modulatorBus);
     for (const phrase of PHRASES) {
-      // phrase.asset is a widened `string` (not a path literal), so the
-      // path-only get() overload can't infer Sound from the extension -
-      // use the explicit Sound token form.
-      this.phrases.set(phrase.key, this.loader.get(Asset.type('sound', phrase.asset)));
+      this.phrases.set(phrase.key, this.loader.get(phrase.asset));
     }
     this.vocoder = new VocoderEffect({ modulator: this.modulatorBus, numBands: 16, wet: 1 });
     app.audio.sound.addEffect(this.vocoder);
@@ -55,81 +49,66 @@ class VocoderScene extends Scene {
     this.phraseLabel = new Text('', { fillColor: Color.white, fontSize: 28, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height / 2 - 130);
-    this.hintLabel = new Text('', { fillColor: new Color(150, 162, 186), fontSize: 18 })
-      .setAnchor(0.5, 0.5)
-      .setPosition(width / 2, height / 2 + 130);
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued carrier starts.
     this.tapPrompt = new Text('Click or press any key to start audio', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
-    this.hud = mountControls({
-      title: 'Vocoder',
-      controls: [{ keys: 'Phrase pads', action: 'play a voice sample' }],
-      hint: 'A spoken voice modulates a sustained saw carrier — the classic robot-voice effect.',
-    });
-    this.panel = mountControlPanel({ title: 'Voice phrases' });
-    PHRASES.forEach((phrase, index) =>
-      this.panel.addButton({
-        label: phrase.label,
-        onClick: () => {
-          this.selectPhrase(index);
+    this.panel = demoPanel({
+      title: 'Voice',
+      controls: {
+        phrase: choice(
+          'Phrase',
+          PHRASES.map(phrase => phrase.label),
+        ),
+        processed: toggle('Processed', true),
+      },
+      actions: { 'Speak phrase': () => this.speak() },
+      onChange: (key, _value, values) => {
+        if (key === 'processed') {
+          this.vocoder.wet = values.processed ? 1 : 0;
+          if (this.carrierVoice) {
+            this.carrierVoice.volume = values.processed ? 0.4 : 0;
+          }
+        } else if (this.panel) {
+          // The mount-time call arrives before the panel handle exists and must stay silent.
           this.speak();
-        },
-      }),
-    );
-    this.panel.addToggle({
-      label: 'Processed',
-      value: true,
-      onChange: value => {
-        this.processed = value;
-        this.vocoder.wet = value ? 1 : 0;
-        if (this.carrierVoice) {
-          this.carrierVoice.volume = value ? 0.4 : 0;
         }
-        this.hud.setStatus(value ? 'Processed voice: phrase drives the carrier.' : 'Dry voice: phrase plays directly.');
       },
     });
-    this.root.addChild(this.gfx, this.phraseLabel, this.hintLabel);
+    this.root.addChild(this.gfx, this.phraseLabel);
     // The carrier is a sustained saw tone shaped by the voice envelope.
     // An oscillator played while audio is still locked is a no-op - it is
     // ephemeral and cannot be deferred - so start it from the unlock
     // gesture. Subscribing is safe even if audio unlocked earlier:
     // onUnlock replays.
     app.audio.onUnlock.add(this.startCarrier);
-    this.hud.setStatus('Choose a phrase; compare processed and dry voice.');
-    this.selectPhrase(0);
   }
   startCarrier = () => {
     this.carrierVoice ??= this.app.audio.play(new AudioGenerator({ frequency: 110, type: 'sawtooth' }), {
       bus: this.app.audio.sound,
-      volume: this.processed ? 0.4 : 0,
+      volume: this.panel.values.processed ? 0.4 : 0,
     });
     if (this.pendingPhrase) {
       this.pendingPhrase = false;
       this.speak();
     }
   };
-  selectPhrase(next) {
-    this.phraseIndex = (next + PHRASES.length) % PHRASES.length;
-    this.hintLabel.text = `${this.phraseIndex + 1} / ${PHRASES.length} — "${PHRASES[this.phraseIndex].label}"`;
-  }
   speak() {
     const app = this.app;
     // The pointer gesture also unlocks the AudioContext; speaking while
     // still locked would be silent, so wait until audio is ready.
     if (app.audio.locked) {
       this.pendingPhrase = true;
-      this.hud.setStatus('Unlocking audio; the selected phrase will play when ready.');
       return;
     }
-    const phrase = PHRASES[this.phraseIndex];
+    const { phrase: label, processed } = this.panel.values;
+    const phrase = PHRASES.find(candidate => candidate.label === label);
     const sound = this.phrases.get(phrase.key);
     if (sound) {
-      app.audio.play(sound, { bus: this.processed ? this.modulatorBus : app.audio.sound });
+      app.audio.play(sound, { bus: processed ? this.modulatorBus : app.audio.sound });
     }
-    this.hud.setStatus(`${this.processed ? 'Processed' : 'Dry'}: "${phrase.label}"`);
-    this.phraseLabel.text = `"${phrase.label}"`;
+    this.phraseLabel.text = `"${phrase.label}"${processed ? '' : ' (dry)'}`;
   }
   draw(context) {
     const app = this.app;
@@ -154,7 +133,6 @@ class VocoderScene extends Scene {
     this.app.audio.unregisterBus(this.modulatorBus);
     this.app.audio.unregisterBus(this.sidechainBus);
     this.panel?.dispose();
-    this.hud?.dispose();
     this.tapPrompt?.destroy();
     super.destroy();
   }
diff --git a/examples/audio-fx/vocoder.ts b/examples/audio-fx/vocoder.ts
index 33ea1bf8f..9d94b8181 100644
--- a/examples/audio-fx/vocoder.ts
+++ b/examples/audio-fx/vocoder.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   AudioBus,
   AudioGenerator,
   Color,
@@ -12,15 +11,16 @@ import {
   Text,
   type Voice,
 } from '@codexo/exojs';
-import { AudioAnalyser, VocoderEffect } from '@codexo/exojs-audio-fx';
-import { mountControlPanel, mountControls } from '@examples/runtime';
-
-// Spoken phrases (Kenney Voiceover Pack, CC0) - a voice modulator is what makes
-// a vocoder recognisable as the classic "robot voice" effect.
-const PHRASES: Array<{ key: string; label: string; asset: string }> = [
-  { key: 'congrats', label: 'Congratulations', asset: assets.demo.voice.congratulations },
-  { key: 'mission', label: 'Mission complete', asset: assets.demo.voice.missionComplete },
-  { key: 'objective', label: 'Objective achieved', asset: assets.demo.voice.objectiveAchieved },
+import { AudioAnalyser, VocoderEffect } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
+
+// A spoken voice as modulator is what makes a vocoder recognisable as the
+// classic "robot voice" effect.
+const PHRASES = [
+  { key: 'congrats', label: 'Congratulations', asset: assets.voiceCongratulations },
+  { key: 'mission', label: 'Mission complete', asset: assets.voiceMissionComplete },
+  { key: 'objective', label: 'Objective achieved', asset: assets.voiceObjectiveAchieved },
 ];
 
 class VocoderScene extends Scene {
@@ -29,16 +29,12 @@ class VocoderScene extends Scene {
   private vocoder!: VocoderEffect;
   private level!: AudioAnalyser;
   private phrases = new Map<string, Sound>();
-  private phraseIndex = 0;
   private pulse = 0;
   private gfx!: Graphics;
   private phraseLabel!: Text;
-  private hintLabel!: Text;
   private tapPrompt!: Text;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: DemoPanel<{ phrase: ChoiceSpec<string>; processed: ToggleSpec }>;
   private carrierVoice: Voice | null = null;
-  private processed = true;
   private pendingPhrase = false;
 
   override init(): void {
@@ -55,10 +51,7 @@ class VocoderScene extends Scene {
     app.audio.registerBus(this.modulatorBus);
 
     for (const phrase of PHRASES) {
-      // phrase.asset is a widened `string` (not a path literal), so the
-      // path-only get() overload can't infer Sound from the extension -
-      // use the explicit Sound token form.
-      this.phrases.set(phrase.key, this.loader.get(Asset.type('sound', phrase.asset)));
+      this.phrases.set(phrase.key, this.loader.get(phrase.asset));
     }
 
     this.vocoder = new VocoderEffect({ modulator: this.modulatorBus, numBands: 16, wet: 1 });
@@ -74,9 +67,6 @@ class VocoderScene extends Scene {
     this.phraseLabel = new Text('', { fillColor: Color.white, fontSize: 28, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height / 2 - 130);
-    this.hintLabel = new Text('', { fillColor: new Color(150, 162, 186), fontSize: 18 })
-      .setAnchor(0.5, 0.5)
-      .setPosition(width / 2, height / 2 + 130);
 
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued carrier starts.
@@ -84,37 +74,31 @@ class VocoderScene extends Scene {
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
 
-    this.hud = mountControls({
-      title: 'Vocoder',
-      controls: [{ keys: 'Phrase pads', action: 'play a voice sample' }],
-      hint: 'A spoken voice modulates a sustained saw carrier — the classic robot-voice effect.',
-    });
-    this.panel = mountControlPanel({ title: 'Voice phrases' });
-    PHRASES.forEach((phrase, index) =>
-      this.panel.addButton({
-        label: phrase.label,
-        onClick: () => {
-          this.selectPhrase(index);
+    this.panel = demoPanel({
+      title: 'Voice',
+      controls: {
+        phrase: choice(
+          'Phrase',
+          PHRASES.map(phrase => phrase.label),
+        ),
+        processed: toggle('Processed', true),
+      },
+      actions: { 'Speak phrase': () => this.speak() },
+      onChange: (key, _value, values) => {
+        if (key === 'processed') {
+          this.vocoder.wet = values.processed ? 1 : 0;
+
+          if (this.carrierVoice) {
+            this.carrierVoice.volume = values.processed ? 0.4 : 0;
+          }
+        } else if (this.panel) {
+          // The mount-time call arrives before the panel handle exists and must stay silent.
           this.speak();
-        },
-      }),
-    );
-    this.panel.addToggle({
-      label: 'Processed',
-      value: true,
-      onChange: value => {
-        this.processed = value;
-        this.vocoder.wet = value ? 1 : 0;
-
-        if (this.carrierVoice) {
-          this.carrierVoice.volume = value ? 0.4 : 0;
         }
-
-        this.hud.setStatus(value ? 'Processed voice: phrase drives the carrier.' : 'Dry voice: phrase plays directly.');
       },
     });
 
-    this.root.addChild(this.gfx, this.phraseLabel, this.hintLabel);
+    this.root.addChild(this.gfx, this.phraseLabel);
 
     // The carrier is a sustained saw tone shaped by the voice envelope.
     // An oscillator played while audio is still locked is a no-op - it is
@@ -122,14 +106,12 @@ class VocoderScene extends Scene {
     // gesture. Subscribing is safe even if audio unlocked earlier:
     // onUnlock replays.
     app.audio.onUnlock.add(this.startCarrier);
-    this.hud.setStatus('Choose a phrase; compare processed and dry voice.');
-    this.selectPhrase(0);
   }
 
   private readonly startCarrier = (): void => {
     this.carrierVoice ??= this.app.audio.play(new AudioGenerator({ frequency: 110, type: 'sawtooth' }), {
       bus: this.app.audio.sound,
-      volume: this.processed ? 0.4 : 0,
+      volume: this.panel.values.processed ? 0.4 : 0,
     });
 
     if (this.pendingPhrase) {
@@ -138,11 +120,6 @@ class VocoderScene extends Scene {
     }
   };
 
-  private selectPhrase(next: number): void {
-    this.phraseIndex = (next + PHRASES.length) % PHRASES.length;
-    this.hintLabel.text = `${this.phraseIndex + 1} / ${PHRASES.length} — "${PHRASES[this.phraseIndex]!.label}"`;
-  }
-
   private speak(): void {
     const app = this.app;
 
@@ -150,20 +127,19 @@ class VocoderScene extends Scene {
     // still locked would be silent, so wait until audio is ready.
     if (app.audio.locked) {
       this.pendingPhrase = true;
-      this.hud.setStatus('Unlocking audio; the selected phrase will play when ready.');
 
       return;
     }
 
-    const phrase = PHRASES[this.phraseIndex]!;
+    const { phrase: label, processed } = this.panel.values;
+    const phrase = PHRASES.find(candidate => candidate.label === label)!;
     const sound = this.phrases.get(phrase.key);
 
     if (sound) {
-      app.audio.play(sound, { bus: this.processed ? this.modulatorBus : app.audio.sound });
+      app.audio.play(sound, { bus: processed ? this.modulatorBus : app.audio.sound });
     }
 
-    this.hud.setStatus(`${this.processed ? 'Processed' : 'Dry'}: "${phrase.label}"`);
-    this.phraseLabel.text = `"${phrase.label}"`;
+    this.phraseLabel.text = `"${phrase.label}"${processed ? '' : ' (dry)'}`;
   }
 
   override draw(context: RenderingContext): void {
@@ -195,7 +171,6 @@ class VocoderScene extends Scene {
     this.app.audio.unregisterBus(this.modulatorBus);
     this.app.audio.unregisterBus(this.sidechainBus);
     this.panel?.dispose();
-    this.hud?.dispose();
     this.tapPrompt?.destroy();
     super.destroy();
   }
diff --git a/examples/beat-detection/beat-sync-pulse.js b/examples/beat-detection/beat-sync-pulse.js
index 07237aaf3..5acebcac4 100644
--- a/examples/beat-detection/beat-sync-pulse.js
+++ b/examples/beat-detection/beat-sync-pulse.js
@@ -1,35 +1,30 @@
 // Auto-generated from beat-sync-pulse.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text, Vector } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
-import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text, Vector } from '@codexo/exojs';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
+import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+/** Scale added to the sprite on each detected beat, decaying back to 1. */
+const PULSE = 0.28;
 class BeatSyncPulseScene extends Scene {
   music;
   detector;
   sprite;
   pulse = 0;
-  intensity = 0.28;
-  beats = 0;
   particles;
   burst;
-  hud;
   tapPrompt;
   tempoReadout;
   async load() {
     const app = this.app;
     const { width, height } = app;
     // AudioStream has no seamless adapter - await it explicitly.
-    const track = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    const track = await this.loader.load(assets.musicLoopMain);
     this.music = track;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
-    this.hud = mountControls({
-      title: 'Beat and Tempo',
-      hint: 'A detected beat pulses the sprite and particles. The tempo estimate and confidence update continuously.',
-    });
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     this.tempoReadout = new Text('Listening for tempo...', { fillColor: Color.white, fontSize: 27, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height * 0.18);
-    this.particles = new ParticleSystem(this.loader.get('image/particle-light.png'), { capacity: 3500 });
+    this.particles = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 3500 });
     this.systems.add(this.particles);
     this.particles.setPosition(width / 2, height / 2);
     this.burst = new BurstSpawn({
@@ -46,27 +41,15 @@ class BeatSyncPulseScene extends Scene {
     this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 64);
-    mountControlPanel({ title: 'Tuning' }).addSlider({
-      label: 'Pulse intensity',
-      min: 0.1,
-      max: 0.5,
-      step: 0.01,
-      value: this.intensity,
-      onChange: value => {
-        this.intensity = value;
-      },
-    });
     this.detector = new BeatDetector();
     this.detector.source = app.audio.music;
     this.detector.onBeat.add(() => {
-      this.pulse = this.intensity;
+      this.pulse = PULSE;
       this.burst.reset();
-      this.beats += 1;
-      this.hud.setStatus(`Beats detected: ${this.beats}`);
     });
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.8 });
+    app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
   update(delta) {
     this.pulse = Math.max(0, this.pulse - delta * 1.2);
@@ -96,9 +79,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
   extensions: [particlesExtension],
 });
 await app.start(BeatSyncPulseScene);
diff --git a/examples/beat-detection/beat-sync-pulse.ts b/examples/beat-detection/beat-sync-pulse.ts
index 9bccce454..d1fee181c 100644
--- a/examples/beat-detection/beat-sync-pulse.ts
+++ b/examples/beat-detection/beat-sync-pulse.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -11,20 +10,20 @@ import {
   Text,
   Vector,
 } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
-import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
+import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+
+/** Scale added to the sprite on each detected beat, decaying back to 1. */
+const PULSE = 0.28;
 
 class BeatSyncPulseScene extends Scene {
   private music!: AudioStream;
   private detector!: BeatDetector;
   private sprite!: Sprite;
   private pulse = 0;
-  private intensity = 0.28;
-  private beats = 0;
   private particles!: ParticleSystem;
   private burst!: BurstSpawn;
-  private hud!: ReturnType<typeof mountControls>;
   private tapPrompt!: Text;
   private tempoReadout!: Text;
 
@@ -33,20 +32,15 @@ class BeatSyncPulseScene extends Scene {
     const { width, height } = app;
 
     // AudioStream has no seamless adapter - await it explicitly.
-    const track = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    const track = await this.loader.load(assets.musicLoopMain);
     this.music = track;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
-
-    this.hud = mountControls({
-      title: 'Beat and Tempo',
-      hint: 'A detected beat pulses the sprite and particles. The tempo estimate and confidence update continuously.',
-    });
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
 
     this.tempoReadout = new Text('Listening for tempo...', { fillColor: Color.white, fontSize: 27, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height * 0.18);
 
-    this.particles = new ParticleSystem(this.loader.get('image/particle-light.png'), { capacity: 3500 });
+    this.particles = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 3500 });
     this.systems.add(this.particles);
     this.particles.setPosition(width / 2, height / 2);
     this.burst = new BurstSpawn({
@@ -65,29 +59,16 @@ class BeatSyncPulseScene extends Scene {
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 64);
 
-    mountControlPanel({ title: 'Tuning' }).addSlider({
-      label: 'Pulse intensity',
-      min: 0.1,
-      max: 0.5,
-      step: 0.01,
-      value: this.intensity,
-      onChange: value => {
-        this.intensity = value;
-      },
-    });
-
     this.detector = new BeatDetector();
     this.detector.source = app.audio.music;
     this.detector.onBeat.add(() => {
-      this.pulse = this.intensity;
+      this.pulse = PULSE;
       this.burst.reset();
-      this.beats += 1;
-      this.hud.setStatus(`Beats detected: ${this.beats}`);
     });
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.8 });
+    app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
 
   override update(delta: Seconds): void {
@@ -121,9 +102,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
   extensions: [particlesExtension],
 });
 
diff --git a/examples/beat-detection/frequency-bands.js b/examples/beat-detection/frequency-bands.js
index b601043e1..1c97af45e 100644
--- a/examples/beat-detection/frequency-bands.js
+++ b/examples/beat-detection/frequency-bands.js
@@ -1,6 +1,7 @@
 // Auto-generated from frequency-bands.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 // Eight perceptual frequency bands spanning the audible range, from the lowest
 // rumble to the airy top end. The FFT bins are linearly spaced over 0..nyquist,
@@ -32,7 +33,7 @@ class FrequencyBandsScene extends Scene {
   async load() {
     const app = this.app;
     // AudioStream has no seamless adapter - await it explicitly.
-    const track = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    const track = await this.loader.load(assets.musicLoopMain);
     this.music = track;
     this.analyser = new AudioAnalyser({ fftSize: 2048, smoothingTimeConstant: 0.75 });
     this.analyser.source = app.audio.music;
@@ -68,7 +69,7 @@ class FrequencyBandsScene extends Scene {
       .setPosition(width / 2, height - 48);
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.8 });
+    app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
   update() {
     const spectrum = this.analyser.getSpectrum();
@@ -118,8 +119,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(14, 16, 22),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(FrequencyBandsScene);
diff --git a/examples/beat-detection/frequency-bands.ts b/examples/beat-detection/frequency-bands.ts
index 21e4a9882..cfc569a82 100644
--- a/examples/beat-detection/frequency-bands.ts
+++ b/examples/beat-detection/frequency-bands.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -9,7 +8,8 @@ import {
   Scene,
   Text,
 } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 // Eight perceptual frequency bands spanning the audible range, from the lowest
@@ -45,7 +45,7 @@ class FrequencyBandsScene extends Scene {
   override async load(): Promise<void> {
     const app = this.app;
     // AudioStream has no seamless adapter - await it explicitly.
-    const track = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    const track = await this.loader.load(assets.musicLoopMain);
     this.music = track;
 
     this.analyser = new AudioAnalyser({ fftSize: 2048, smoothingTimeConstant: 0.75 });
@@ -90,7 +90,7 @@ class FrequencyBandsScene extends Scene {
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.8 });
+    app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
 
   override update(): void {
@@ -155,9 +155,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(14, 16, 22),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(FrequencyBandsScene);
diff --git a/examples/beat-detection/tempo-tracking.js b/examples/beat-detection/tempo-tracking.js
index ea5dc9763..6e5785485 100644
--- a/examples/beat-detection/tempo-tracking.js
+++ b/examples/beat-detection/tempo-tracking.js
@@ -1,6 +1,7 @@
 // Auto-generated from tempo-tracking.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 class TempoTrackingScene extends Scene {
   music;
@@ -20,7 +21,7 @@ class TempoTrackingScene extends Scene {
     const { width, height } = app;
     const marginX = width * 0.08;
     // AudioStream has no seamless adapter - await it explicitly.
-    const track = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    const track = await this.loader.load(assets.musicLoopMain);
     this.music = track;
     this.detector = new BeatDetector();
     this.detector.source = app.audio.music;
@@ -43,7 +44,7 @@ class TempoTrackingScene extends Scene {
       .setPosition(width / 2, height - 48);
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.8 });
+    app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
   update(delta) {
     // Raw onset strength straight from the detector (positive spectral flux).
@@ -95,8 +96,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(14, 16, 22),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TempoTrackingScene);
diff --git a/examples/beat-detection/tempo-tracking.ts b/examples/beat-detection/tempo-tracking.ts
index 5f1353f4c..8237f8606 100644
--- a/examples/beat-detection/tempo-tracking.ts
+++ b/examples/beat-detection/tempo-tracking.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -10,7 +9,8 @@ import {
   type Seconds,
   Text,
 } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 class TempoTrackingScene extends Scene {
@@ -33,7 +33,7 @@ class TempoTrackingScene extends Scene {
     const marginX = width * 0.08;
 
     // AudioStream has no seamless adapter - await it explicitly.
-    const track = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    const track = await this.loader.load(assets.musicLoopMain);
     this.music = track;
 
     this.detector = new BeatDetector();
@@ -64,7 +64,7 @@ class TempoTrackingScene extends Scene {
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically.
-    app.audio.play(this.music, { loop: true, volume: 0.8 });
+    app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
 
   override update(delta: Seconds): void {
@@ -127,9 +127,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(14, 16, 22),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TempoTrackingScene);
diff --git a/examples/custom-renderers/custom-render-pass.js b/examples/custom-renderers/custom-render-pass.js
index f3d1d0c19..f5e992d5b 100644
--- a/examples/custom-renderers/custom-render-pass.js
+++ b/examples/custom-renderers/custom-render-pass.js
@@ -10,6 +10,7 @@ import {
   Scene,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class CustomRenderPassScene extends Scene {
   back;
   front;
@@ -19,12 +20,12 @@ class CustomRenderPassScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.back = new Sprite(this.loader.get('image/ship-a.png'))
+    this.back = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setPosition(width / 2 - 200, height / 2)
       .setScale(2.2)
       .setTint(new Color(120, 170, 255));
-    this.front = new Sprite(this.loader.get('image/ship-a.png'))
+    this.front = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setPosition(width / 2 + 200, height / 2)
       .setScale(2.2)
@@ -66,8 +67,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(CustomRenderPassScene);
diff --git a/examples/custom-renderers/custom-render-pass.ts b/examples/custom-renderers/custom-render-pass.ts
index 674f09b10..639f8a491 100644
--- a/examples/custom-renderers/custom-render-pass.ts
+++ b/examples/custom-renderers/custom-render-pass.ts
@@ -11,6 +11,7 @@ import {
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class CustomRenderPassScene extends Scene {
   private back!: Sprite;
@@ -23,12 +24,12 @@ class CustomRenderPassScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.back = new Sprite(this.loader.get('image/ship-a.png'))
+    this.back = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setPosition(width / 2 - 200, height / 2)
       .setScale(2.2)
       .setTint(new Color(120, 170, 255));
-    this.front = new Sprite(this.loader.get('image/ship-a.png'))
+    this.front = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setPosition(width / 2 + 200, height / 2)
       .setScale(2.2)
@@ -74,9 +75,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(CustomRenderPassScene);
diff --git a/examples/debug-layer/asset-browser.js b/examples/debug-layer/asset-browser.js
index efdeacdaf..2be818664 100644
--- a/examples/debug-layer/asset-browser.js
+++ b/examples/debug-layer/asset-browser.js
@@ -1,1094 +1,1664 @@
 // Auto-generated from asset-browser.ts - edit the .ts source, not this file.
-import { Asset, FixedResolutionCanvasSizing } from '@codexo/exojs';
-import { Application, Color, Graphics, Scene, Sprite, Spritesheet, Text, Texture } from '@codexo/exojs';
-// Dynamic category accessor: maps a category key to the correct sub-object
-// in the hierarchical assets catalog. Technical assets live under
-// assets.technical; everything else is under assets.demo.
-const getCategoryData = catKey => {
-  if (catKey === 'technical') {
-    return assets.technical;
-  }
-  return assets.demo[catKey] ?? {};
+import {
+  AnimatedSprite,
+  Application,
+  Asset,
+  BitmapText,
+  Color,
+  FixedResolutionCanvasSizing,
+  Graphics,
+  ScaleModes,
+  Scene,
+  Sprite,
+  Spritesheet,
+  Text,
+  Texture,
+  View,
+} from '@codexo/exojs';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { ObjectKind, TileMapNode } from '@codexo/exojs/tilemap';
+import { demoAssetCategories, demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { ldtkExtension } from '@codexo/exojs-ldtk';
+import { tiledExtension } from '@codexo/exojs-tiled';
+import { choice, demoPanel, slider, toggle } from '@examples/runtime';
+// An asset browser for the standard demo catalog. It is an ordinary scene:
+//
+//   - The list is derived from `demoAssets` and `demoAssetCategories`; nothing
+//     is fetched until an entry is selected.
+//   - Every selection loads into a child `LoaderScope` of the scene. Selecting
+//     something else destroys that scope, which cancels a load still in flight
+//     and frees what it held - unless another scope holds the same asset.
+//   - Each selection carries a generation number. A load that settles after a
+//     newer selection is discarded before it can show, play or log anything.
+//   - Nothing plays on selection. Play goes through `app.audio.onUnlock`, which
+//     waits for the browser's autoplay gesture and is cancelled on switch.
+//   - "Code" turns the current preview settings into a complete scene.
+const STAGE = { width: 1280, height: 720 };
+const SIDEBAR_WIDTH = 272;
+const INSPECTOR_WIDTH = 332;
+const PREVIEW = { x: SIDEBAR_WIDTH, y: 0, width: STAGE.width - SIDEBAR_WIDTH - INSPECTOR_WIDTH, height: STAGE.height };
+const PREVIEW_CENTER = { x: PREVIEW.x + PREVIEW.width / 2, y: PREVIEW.height / 2 };
+const FONT = '"Segoe UI", system-ui, sans-serif';
+const MONO = '"JetBrains Mono", ui-monospace, monospace';
+const MANIFEST_URL = import.meta.resolve('@codexo/exojs-demo-assets/manifest.json');
+const GROUP_OF = {
+  textures: 'Textures',
+  technical: 'Textures',
+  backgrounds: 'Textures',
+  icons: 'Textures',
+  cursors: 'Textures',
+  spritesheets: 'Spritesheets',
+  inputPrompts: 'Spritesheets',
+  maps: 'Maps',
+  sound: 'Audio',
+  soundSprites: 'Audio',
+  music: 'Audio',
+  voice: 'Audio',
+  impulseResponses: 'Audio',
+  video: 'Video',
+  fonts: 'Fonts',
 };
-const W = 1280;
-const H = 720;
-const TOOLBAR_H = 110;
-const SIDEBAR_W = 220;
-const ITEM_H = 36;
-const LIST_Y = TOOLBAR_H + 4;
-const PREVIEW_X = SIDEBAR_W;
-const PREVIEW_Y = TOOLBAR_H;
-const PREVIEW_W = W - SIDEBAR_W;
-const PREVIEW_H = H - TOOLBAR_H;
-const CAT_BTN_W = 82;
-const CAT_BTN_H = 38;
-const CAT_BTN_Y1 = 6;
-const CAT_BTN_Y2 = 58;
-const CAT_BTN_X0 = 6;
-const BG_BTN_SIZE = 26;
-const BG_BTN_Y = 16;
-const BG_BTN_X0 = W - 3 * (BG_BTN_SIZE + 5) - 6;
-const CATEGORIES_ROW1 = [
-  { id: 'textures', label: 'IMG', catKey: 'textures' },
-  { id: 'sprites', label: 'SPR', catKey: 'sprites' },
-  { id: 'audio', label: 'AUD', catKey: 'audio' },
-  { id: 'svg', label: 'SVG', catKey: 'svg' },
-  { id: 'fonts', label: 'FNT', catKey: 'fonts' },
-  { id: 'video', label: 'VID', catKey: 'video' },
-  { id: 'inputPrompts', label: 'INP', catKey: 'inputPrompts' },
-  { id: 'technical', label: 'TECH', catKey: 'technical' },
-];
-const CATEGORIES_ROW2 = [
-  { id: 'sound', label: 'SND', catKey: 'sound' },
-  { id: 'music', label: 'MUS', catKey: 'music' },
-  { id: 'soundSprites', label: 'SDS', catKey: 'soundSprites' },
-  { id: 'spritesheets', label: 'SSH', catKey: 'spritesheets' },
-  { id: 'tilesets', label: 'TLS', catKey: 'tilesets' },
-  { id: 'backgrounds', label: 'BGS', catKey: 'backgrounds' },
-  { id: 'cursors', label: 'CSR', catKey: 'cursors' },
-  { id: 'vendor', label: 'VND', catKey: 'vendor' },
-];
-const CATEGORIES = [...CATEGORIES_ROW1, ...CATEGORIES_ROW2];
-const TECH_PURPOSE = {
-  alpha: 'alpha / premultiplied / halo checks',
-  filtering: 'nearest / linear / sampler checks',
-  color: 'ramp / gamma / color-shift checks',
+const GROUP_ORDER = ['Textures', 'Spritesheets', 'Maps', 'Audio', 'Video', 'Fonts', 'Data'];
+const GROUP_GLYPH = {
+  texture: 'IMG',
+  svg: 'SVG',
+  spritesheet: 'ATL',
+  tiled: 'MAP',
+  ldtk: 'MAP',
+  sound: 'SND',
+  music: 'MUS',
+  video: 'VID',
+  font: 'TTF',
+  bmFont: 'FNT',
+  data: '{ }',
 };
-const BG_OPTIONS = [
-  { label: 'W', r: 255, g: 255, b: 255 },
-  { label: 'G', r: 45, g: 50, b: 65 },
-  { label: 'K', r: 0, g: 0, b: 0 },
-];
-const C = {
-  bg: new Color(26, 28, 38),
-  toolbar: new Color(30, 34, 46),
-  panel: new Color(32, 36, 48),
-  active: new Color(58, 120, 218),
-  hover: new Color(44, 50, 66),
-  border: new Color(52, 58, 76),
-  infoBar: new Color(18, 22, 32),
-  btnDark: new Color(44, 52, 72),
-  btnGreen: new Color(55, 150, 75),
-  white: new Color(255, 255, 255),
-  dim: new Color(140, 150, 170),
-  dimDark: new Color(90, 98, 120),
-  accent: new Color(100, 180, 255),
-  black: new Color(0, 0, 0),
+const humanize = key => {
+  const words = key
+    .replace(/^(sound|music|font)(?=[A-Z])/, '')
+    .replace(/([a-z])([A-Z0-9])/g, '$1 $2')
+    .toLowerCase();
+  return words.charAt(0).toUpperCase() + words.slice(1);
 };
-class AssetBrowserScene extends Scene {
-  cat = 'textures';
-  key = null;
-  bgIdx = 1;
-  scrollOff = 0;
-  hoverIdx = null;
-  audioMusics = new Map();
-  soundMusics = new Map();
-  musicMusics = new Map();
-  soundSpriteAudio = new Map();
-  // Single-asset preview playback: one Voice at a time, tied to `previewKey`.
-  previewVoice = null;
-  previewKey = null;
-  frameIdx = 0;
-  frameTimer = 0;
-  animPlaying = true;
-  texSprites = new Map();
-  sprSheets = new Map();
-  sshSheets = new Map();
-  svgSprites = new Map();
-  inpSheets = new Map();
-  fontFamilies = new Map();
-  techSprites = new Map();
-  bgSprites = new Map();
-  cursorSprites = new Map();
-  tilesetSprites = new Map();
-  soundSpriteData = new Map();
-  vendorData = new Map();
-  animG = null;
-  audioG = null;
-  copyBtnBg = null;
-  fontSampleTexts = new Map();
-  gToolbar = new Graphics();
-  gSidebar = new Graphics();
-  gPreview = new Graphics();
-  gInfoBar = new Graphics();
-  catBtnTexts = CATEGORIES.map(() => new Text('', { fillColor: C.white, fontSize: 11, fontWeight: 'bold' }));
-  bgBtnTexts = BG_OPTIONS.map(() => new Text('', { fillColor: C.dim, fontSize: 11, fontWeight: 'bold' }));
-  txtKey = new Text('', { fillColor: C.white, fontSize: 12, fontWeight: 'bold' });
-  txtPath = new Text('', { fillColor: C.dim, fontSize: 11 });
-  txtType = new Text('', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' });
-  txtCopy = new Text('COPY KEY', { fillColor: C.white, fontSize: 10 });
-  itemTexts = Array.from({ length: 22 }, () => new Text('', { fillColor: C.white, fontSize: 13 }));
-  techHeaderTexts = new Map([
-    ['alpha', new Text('ALPHA', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' })],
-    ['filtering', new Text('FILTERING', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' })],
-    ['color', new Text('COLOR', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' })],
-  ]);
-  txtTechPurpose = new Text('', { fillColor: C.dim, fontSize: 11 });
-  txtNoAssets = new Text('globalThis.assets is not available.\nRun this example in the ExoJS playground.', {
-    fillColor: C.dim,
-    fontSize: 16,
-  });
-  txtEmptyCat = new Text('(empty)', { fillColor: C.dimDark, fontSize: 13 });
-  txtNoSel = new Text('Select an asset from the list.', { fillColor: C.dimDark, fontSize: 14 });
-  txtLoading = new Text('Loading assets…', { fillColor: C.dim, fontSize: 14 });
-  txtMeta = new Text('', { fillColor: C.white, fontSize: 13, maxWidth: PREVIEW_W - 80 });
-  txtAudioIcon = new Text('', { fillColor: C.white, fontSize: 28 });
-  txtAnimPlay = new Text('', { fillColor: C.white, fontSize: 12 });
-  txtAnimFrame = new Text('', { fillColor: C.dim, fontSize: 11 });
-  // Lazy per-category loading: only the initial category is fetched up
-  // front; every other one loads on first visit (see ensureCategory), so
-  // the browser becomes interactive quickly instead of downloading the
-  // whole catalog before the first frame.
-  assetLoader;
-  loadedCats = new Set();
-  loadingCats = new Set();
-  async load() {
-    const app = this.app;
-    this.assetLoader = this.loader;
-    await this.ensureCategory(this.cat);
-    app.input.onPointerTap.add(p => this.onTap(p.x, p.y));
-    app.input.onPointerMove.add(p => this.onMove(p.x, p.y));
-    app.input.onMouseWheel.add((_deltaX, deltaY) => this.onWheel(deltaY));
-    this.selectFirstInCategory();
+const kindOf = key => {
+  const descriptor = assets[key];
+  switch (descriptor.type) {
+    case 'texture':
+    case 'svg':
+    case 'sound':
+    case 'music':
+    case 'video':
+    case 'font':
+    case 'bmFont':
+      return descriptor.type;
+    case 'json':
+      if (demoAssetCategories[key] !== 'maps') {
+        return 'data';
+      }
+      return descriptor.source.endsWith('.ldtk') ? 'ldtk' : 'tiled';
+    default:
+      return 'data';
   }
-  /** Load a category's assets (and build its preview objects) exactly once. */
-  async ensureCategory(catId) {
-    if (this.loadedCats.has(catId) || this.loadingCats.has(catId)) {
-      return;
+};
+/** An atlas JSON and its image are separate descriptors named `<name>Atlas` and `<name>Image`; the browser lists them as one spritesheet. */
+const buildItems = () => {
+  const items = [];
+  for (const key of Object.keys(demoAssetCategories)) {
+    const base = key.replace(/(Atlas|Image)$/, '');
+    const image = `${base}Image`;
+    const atlas = `${base}Atlas`;
+    if (base !== key && image in assets && atlas in assets) {
+      if (key === image) {
+        items.push({ id: base, name: humanize(base), group: 'Spritesheets', kind: 'spritesheet', key: image, atlasKey: atlas });
+      }
+      continue;
     }
-    this.loadingCats.add(catId);
+    const kind = kindOf(key);
+    items.push({ id: key, name: humanize(key), group: kind === 'data' ? 'Data' : GROUP_OF[demoAssetCategories[key]], kind, key });
+  }
+  return items;
+};
+const ITEMS = buildItems();
+const GROUPS = GROUP_ORDER.filter(group => ITEMS.some(item => item.group === group));
+const fileName = source => decodeURIComponent(source.slice(source.lastIndexOf('/') + 1));
+const formatBytes = bytes =>
+  bytes < 1024 ? `${bytes} B` : bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+const formatSeconds = value => (Number.isFinite(value) ? `${value.toFixed(2)} s` : 'unknown');
+const isAbort = error => error instanceof DOMException && error.name === 'AbortError';
+class AssetBrowserScene extends Scene {
+  sidebar = document.createElement('nav');
+  search = document.createElement('input');
+  tabs = document.createElement('div');
+  list = document.createElement('ul');
+  inspector = document.createElement('aside');
+  heading = document.createElement('h2');
+  facts = document.createElement('dl');
+  panelSlot = document.createElement('div');
+  resident = document.createElement('details');
+  codePanel = document.createElement('section');
+  codeTitle = document.createElement('strong');
+  code = document.createElement('pre');
+  buttons = new Map();
+  view = new View(STAGE.width / 2, STAGE.height / 2, STAGE.width, STAGE.height);
+  frame = new Graphics();
+  message = new Text('', { fontSize: 22, fillColor: new Color(200, 214, 236), align: 'center' });
+  backdrop = new Color(32, 37, 50);
+  group = GROUPS[0];
+  selected = null;
+  generation = 0;
+  scope = null;
+  preview = null;
+  panel = null;
+  manifest = new Map();
+  drag = null;
+  zoomTarget = null;
+  destroyed = false;
+  async load() {
+    // The package's manifest carries byte sizes and media metadata. It is
+    // optional here: without it the inspector only shows what loading tells.
     try {
-      await this.loadCategory(catId);
-      this.loadedCats.add(catId);
-    } finally {
-      this.loadingCats.delete(catId);
+      const manifest = await this.loader.load(Asset.type('json', MANIFEST_URL));
+      this.manifest = new Map(manifest.entries.map(entry => [entry.key, entry]));
+    } catch (error) {
+      console.warn('The demo asset manifest is unavailable; sizes and media details are hidden.', error);
     }
   }
-  async loadCategory(catId) {
-    const loader = this.assetLoader;
-    // Every category below fetches its assets by real (dynamic, non-literal)
-    // path via `Asset.type(type, path)` + `load()` - the old alias-keyed batch-record form
-    // (`load(Type, { alias: path })` + `get(Type, alias)`) is gone; there is no
-    // alias indirection to reconstruct, so each item is loaded directly and its
-    // resolved handle/value is stored under the catalog's own key.
-    switch (catId) {
-      case 'textures': {
-        await Promise.all(
-          Object.entries(assets.demo.textures ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(await loader.load(Asset.type('texture', url)));
-            s.setAnchor(0.5);
-            this.texSprites.set(k, s);
-          }),
-        );
-        break;
-      }
-      case 'sprites': {
-        await Promise.all(
-          Object.entries(assets.demo.sprites ?? {}).map(async ([k, entry]) => {
-            const [tex, data] = await Promise.all([
-              loader.load(Asset.type('texture', entry.image)),
-              loader.load(Asset.type('json', entry.data)),
-            ]);
-            const ss = new Spritesheet(tex, data);
-            this.sprSheets.set(k, ss);
-            for (const s of ss.sprites.values()) {
-              s.setAnchor(0.5);
-            }
-          }),
-        );
-        break;
-      }
-      case 'spritesheets': {
-        await Promise.all(
-          Object.entries(assets.demo.spritesheets ?? {}).map(async ([k, entry]) => {
-            const [tex, data] = await Promise.all([
-              loader.load(Asset.type('texture', entry.image)),
-              loader.load(Asset.type('json', entry.data)),
-            ]);
-            const ss = new Spritesheet(tex, data);
-            this.sshSheets.set(k, ss);
-            for (const s of ss.sprites.values()) {
-              s.setAnchor(0.5);
-            }
-          }),
-        );
-        break;
-      }
-      case 'svg': {
-        await Promise.all(
-          Object.entries(assets.demo.svg ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(new Texture(await loader.load(Asset.type('svg', url))));
-            s.setAnchor(0.5);
-            this.svgSprites.set(k, s);
-          }),
-        );
-        break;
-      }
-      case 'inputPrompts': {
-        await Promise.all(
-          Object.entries(assets.demo.inputPrompts ?? {}).map(async ([k, entry]) => {
-            const [tex, data] = await Promise.all([
-              loader.load(Asset.type('texture', entry.image)),
-              loader.load(Asset.type('json', entry.data)),
-            ]);
-            const ss = new Spritesheet(tex, data);
-            this.inpSheets.set(k, ss);
-            for (const s of ss.sprites.values()) {
-              s.setAnchor(0.5);
-            }
-          }),
-        );
-        break;
-      }
-      case 'audio': {
-        await Promise.all(
-          Object.entries(assets.demo.audio ?? {}).map(async ([k, url]) => {
-            this.audioMusics.set(k, await loader.load(Asset.type('music', url)));
-          }),
-        );
-        break;
-      }
-      case 'sound': {
-        await Promise.all(
-          Object.entries(assets.demo.sound ?? {}).map(async ([k, url]) => {
-            this.soundMusics.set(k, await loader.load(Asset.type('music', url)));
-          }),
-        );
-        break;
-      }
-      case 'music': {
-        await Promise.all(
-          Object.entries(assets.demo.music ?? {}).map(async ([k, url]) => {
-            this.musicMusics.set(k, await loader.load(Asset.type('music', url)));
-          }),
-        );
-        break;
-      }
-      case 'soundSprites': {
-        await Promise.all(
-          Object.entries(assets.demo.soundSprites ?? {}).map(async ([k, entry]) => {
-            const [audio, data] = await Promise.all([
-              loader.load(Asset.type('music', entry.audio)),
-              loader.load(Asset.type('json', entry.data)),
-            ]);
-            this.soundSpriteAudio.set(k, audio);
-            this.soundSpriteData.set(k, data);
-          }),
-        );
-        break;
-      }
-      case 'fonts': {
-        await Promise.all(
-          Object.entries(assets.demo.fonts ?? {}).map(async ([k, url]) => {
-            // The fonts category mixes vector fonts (.ttf/.otf) with
-            // bitmap-font sidecars (.fnt/.png) that FontFace cannot
-            // parse. Load only the vector entries - the bitmap ones
-            // fall back to a path readout.
-            if (!/\.(ttf|otf|woff2?)$/i.test(url)) {
-              return;
-            }
-            const family = `assetbrowser_${k}`;
-            await loader.load(Asset.type('font', url, { family }));
-            this.fontFamilies.set(k, family);
-          }),
-        );
-        break;
-      }
-      case 'technical': {
-        await Promise.all(
-          Object.entries(assets.technical ?? {}).flatMap(([subcat, items]) =>
-            Object.entries(items).map(async ([k, u]) => {
-              const s = new Sprite(await loader.load(Asset.type('texture', u)));
-              s.setAnchor(0.5);
-              this.techSprites.set(`${subcat}.${k}`, s);
-            }),
-          ),
-        );
-        break;
-      }
-      case 'backgrounds': {
-        await Promise.all(
-          Object.entries(assets.demo.backgrounds ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(await loader.load(Asset.type('texture', url)));
-            s.setAnchor(0.5);
-            this.bgSprites.set(k, s);
-          }),
-        );
-        break;
-      }
-      case 'cursors': {
-        await Promise.all(
-          Object.entries(assets.demo.cursors ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(new Texture(await loader.load(Asset.type('svg', url))));
-            s.setAnchor(0.5);
-            this.cursorSprites.set(k, s);
-          }),
-        );
-        break;
-      }
-      case 'tilesets': {
-        await Promise.all(
-          Object.entries(assets.demo.tilesets ?? {}).map(async ([k, entry]) => {
-            const s = new Sprite(await loader.load(Asset.type('texture', entry.image)));
-            s.setAnchor(0.5);
-            this.tilesetSprites.set(k, s);
-          }),
-        );
-        break;
-      }
-      case 'vendor': {
-        await Promise.all(
-          Object.entries(assets.demo.vendor ?? {}).map(async ([k, url]) => {
-            this.vendorData.set(k, await loader.load(Asset.type('json', url)));
-          }),
-        );
-        break;
-      }
-      default:
-        // 'video' previews only show the asset URL - nothing to load.
-        break;
-    }
+  init() {
+    this.mountSidebar();
+    this.mountInspector();
+    this.mountCodePanel();
+    this.message.setAnchor(0.5).setPosition(PREVIEW_CENTER.x, PREVIEW_CENTER.y);
+    this.app.input.onPointerDown.add(this.onPointerDown);
+    this.app.input.onPointerMove.add(this.onPointerMove);
+    this.app.input.onPointerUp.add(this.onPointerUp);
+    this.app.input.onMouseWheel.add(this.onWheel);
+    this.showGroup(this.group);
+    void this.select(ITEMS.find(item => item.group === this.group));
   }
-  techFlatKeys() {
-    const out = [];
-    for (const subcat of ['alpha', 'filtering', 'color']) {
-      const items = assets.technical[subcat];
-      if (!items) {
-        continue;
+  // --- Selection ------------------------------------------------------------
+  async select(item) {
+    const generation = ++this.generation;
+    this.closePreview();
+    this.selected = item;
+    this.markSelection();
+    this.renderFacts(item, []);
+    this.message.text = 'Loading...';
+    const scope = this.loader.createScope({ name: `preview:${item.id}` });
+    const started = performance.now();
+    this.scope = scope;
+    const context = {
+      scene: this,
+      item,
+      scope,
+      manifest: this.manifest.get(item.key),
+      isCurrent: () => generation === this.generation && !this.destroyed,
+    };
+    try {
+      const preview = await openPreview(context);
+      // A newer selection destroyed this scope already; what the preview built
+      // is dropped without ever being shown.
+      if (!context.isCurrent()) {
+        preview.dispose();
+        return;
       }
-      out.push(subcat);
-      for (const k of Object.keys(items)) {
-        out.push(`${subcat}.${k}`);
+      this.preview = preview;
+      this.message.text = '';
+      this.renderFacts(item, preview.facts);
+      this.mountPanel(preview);
+      this.fit();
+      this.renderResident();
+      console.info(`Loaded ${item.name} (${item.kind}) in ${Math.round(performance.now() - started)} ms`);
+    } catch (error) {
+      if (!context.isCurrent() || isAbort(error)) {
+        return;
       }
+      this.message.text = `Could not load ${item.name}`;
+      this.renderResident();
+      console.error(`Failed to load ${item.name}:`, error);
     }
-    return out;
   }
-  keys() {
-    if (this.cat === 'technical') {
-      return this.techFlatKeys();
+  closePreview() {
+    this.hideCode();
+    this.panel?.dispose();
+    this.panel = null;
+    this.zoomTarget = null;
+    this.backdrop = new Color(32, 37, 50);
+    try {
+      this.preview?.dispose();
+    } finally {
+      this.preview = null;
+      // Destroying the scope cancels a load that is still running and releases
+      // this selection's claims; assets another scope holds stay resident.
+      this.scope?.destroy();
+      this.scope = null;
     }
-    const cat = CATEGORIES.find(c => c.id === this.cat);
-    const obj = getCategoryData(cat?.catKey ?? '');
-    return obj ? Object.keys(obj) : [];
   }
-  assetPath() {
-    if (!this.key) {
-      return '';
-    }
-    if (this.cat === 'technical') {
-      if (!this.key.includes('.')) {
-        return '';
+  mountPanel(preview) {
+    const host = options => {
+      const panel = demoPanel({ ...options, corner: 'top-right' });
+      Object.assign(panel.element.style, {
+        position: 'static',
+        maxWidth: 'none',
+        minWidth: '0',
+        padding: '10px',
+        boxShadow: 'none',
+        margin: '0',
+      });
+      // The shared panel is sized for a canvas corner; in this column the
+      // sliders give way so every readout stays visible.
+      for (const input of panel.element.querySelectorAll('input')) {
+        input.style.minWidth = '0';
       }
-      const [subcat, itemKey] = this.key.split('.');
-      return assets.technical[subcat]?.[itemKey] ?? '';
-    }
-    const cat = CATEGORIES.find(c => c.id === this.cat);
-    const v = getCategoryData(cat?.catKey ?? '')[this.key];
-    if (typeof v === 'string') {
-      return v;
-    }
-    const record = v;
-    if (typeof record?.image === 'string') {
-      return record.image;
-    }
-    if (typeof record?.audio === 'string') {
-      return record.audio;
-    }
-    return '';
-  }
-  assetExpression() {
-    const category = this.cat === 'technical' ? 'technical' : `demo.${this.cat}`;
-    return `assets.${category}.${this.key}`;
+      this.panelSlot.replaceChildren(panel.element);
+      this.panel = panel;
+      return panel;
+    };
+    preview.mount(host);
   }
-  typeLabel() {
-    return this.assetPath().split('.').pop()?.toUpperCase() ?? '';
+  /** The camera always zooms through the panel's Zoom control when a preview has one. */
+  bindZoom(target) {
+    this.zoomTarget = target;
   }
-  selectFirstInCategory() {
-    const keys = this.keys();
-    this.key = this.cat === 'technical' ? (keys.find(k => k.includes('.')) ?? null) : (keys[0] ?? null);
-    this.scrollOff = 0;
-    this.resetPreviewState();
+  setZoom(zoom) {
+    const center = this.view.center;
+    // Zoom about the preview's centre, which is offset from the canvas centre.
+    const focusX = center.x + (PREVIEW_CENTER.x - STAGE.width / 2) / this.view.zoomLevel;
+    const focusY = center.y + (PREVIEW_CENTER.y - STAGE.height / 2) / this.view.zoomLevel;
+    this.view.setZoom(zoom);
+    this.lookAt(focusX, focusY);
   }
-  resetPreviewState() {
-    this.stopAllAudio();
-    this.frameIdx = 0;
-    this.frameTimer = 0;
-    this.animPlaying = true;
+  /** Puts world point (x, y) at the centre of the preview area. */
+  lookAt(x, y) {
+    const zoom = this.view.zoomLevel;
+    this.view.setCenter(x - (PREVIEW_CENTER.x - STAGE.width / 2) / zoom, y - (PREVIEW_CENTER.y - STAGE.height / 2) / zoom);
   }
-  stopAllAudio() {
-    if (this.previewVoice) {
-      this.previewVoice.stop();
-      this.previewVoice = null;
-      this.previewKey = null;
+  fit() {
+    const bounds = this.preview?.bounds;
+    if (!bounds) {
+      this.view.setZoom(1);
+      this.lookAt(0, 0);
+      return;
     }
+    const zoom = Math.min(8, (PREVIEW.width * 0.9) / bounds.width, (PREVIEW.height * 0.82) / bounds.height);
+    this.view.setZoom(zoom);
+    this.lookAt(bounds.width / 2, bounds.height / 2);
+    this.zoomTarget?.set('zoom', zoom);
   }
-  /** True when the selected key's preview voice is live and not paused. */
-  previewIsPlaying() {
-    return this.previewVoice !== null && !this.previewVoice.ended && !this.previewVoice.paused && this.previewKey === this.key;
-  }
-  currentPlayingMap() {
-    if (this.cat === 'audio') {
-      return this.audioMusics;
-    }
-    if (this.cat === 'sound') {
-      return this.soundMusics;
-    }
-    if (this.cat === 'music') {
-      return this.musicMusics;
-    }
-    if (this.cat === 'soundSprites') {
-      return this.soundSpriteAudio;
-    }
-    return null;
+  setBackdrop(color) {
+    this.backdrop = color;
   }
-  toggleAudio() {
-    const app = this.app;
-    if (!this.key) {
+  // --- Pointer: drag pans, wheel zooms, tap hits ----------------------------
+  onPointerDown = (_pointer, x, y) => {
+    if (x >= PREVIEW.x && x <= PREVIEW.x + PREVIEW.width) {
+      this.drag = { x, y, moved: false };
+    }
+  };
+  onPointerMove = (_pointer, x, y) => {
+    if (!this.drag || !this.preview?.bounds) {
       return;
     }
-    const map = this.currentPlayingMap();
-    if (!map) {
+    const dx = x - this.drag.x;
+    const dy = y - this.drag.y;
+    if (this.drag.moved || Math.hypot(dx, dy) > 4) {
+      const zoom = this.view.zoomLevel;
+      this.view.setCenter(this.view.center.x - dx / zoom, this.view.center.y - dy / zoom);
+      this.drag = { x, y, moved: true };
+    }
+  };
+  onPointerUp = (_pointer, x, y) => {
+    const drag = this.drag;
+    this.drag = null;
+    if (drag && !drag.moved && this.preview?.tap) {
+      // The four-argument form maps through the viewport at any zoom level;
+      // the stage's design size stands in for the canvas size.
+      const point = this.view.screenToWorld(x, y, STAGE.width, STAGE.height);
+      this.preview.tap(point.x, point.y);
+    }
+  };
+  onWheel = (_deltaX, deltaY) => {
+    if (!this.preview?.bounds) {
       return;
     }
-    const stream = map.get(this.key);
-    if (!stream) {
-      return;
-    }
-    if (this.previewKey === this.key && this.previewVoice && !this.previewVoice.ended) {
-      // Same asset selected: pause / resume the live voice.
-      if (this.previewVoice.paused) {
-        this.previewVoice.resume();
-      } else {
-        this.previewVoice.pause();
-      }
+    const zoom = Math.min(32, Math.max(0.05, this.view.zoomLevel * Math.exp(-deltaY * 0.0015)));
+    if (this.zoomTarget) {
+      this.zoomTarget.set('zoom', zoom);
     } else {
-      // New asset: stop the previous preview and start this one.
-      this.previewVoice?.stop();
-      this.previewVoice = app.audio.play(stream);
-      this.previewKey = this.key;
+      this.setZoom(zoom);
     }
+  };
+  // --- Frame ----------------------------------------------------------------
+  update(delta) {
+    this.preview?.update?.(delta);
   }
-  currentFrameKeys() {
-    if (this.cat === 'sprites') {
-      return [...(this.sprSheets.get(this.key ?? '')?.sprites.keys() ?? [])];
+  draw(context) {
+    context.clear(this.backdrop);
+    for (const node of this.preview?.world ?? []) {
+      context.render(node, { view: this.view });
     }
-    if (this.cat === 'spritesheets') {
-      return [...(this.sshSheets.get(this.key ?? '')?.sprites.keys() ?? [])];
+    for (const node of this.preview?.overlay ?? []) {
+      context.render(node, { view: context.screenView });
     }
-    if (this.cat === 'inputPrompts') {
-      return [...(this.inpSheets.get(this.key ?? '')?.sprites.keys() ?? [])];
+    if (this.message.text) {
+      context.render(this.message, { view: context.screenView });
     }
-    return [];
-  }
-  maxScroll() {
-    const visibleItems = Math.floor((H - LIST_Y) / ITEM_H);
-    return Math.max(0, this.keys().length - visibleItems);
   }
-  isAudioLikeCategory() {
-    return this.cat === 'audio' || this.cat === 'sound' || this.cat === 'music' || this.cat === 'soundSprites';
+  destroy() {
+    this.destroyed = true;
+    this.generation += 1;
+    this.closePreview();
+    this.app.input.onPointerDown.remove(this.onPointerDown);
+    this.app.input.onPointerMove.remove(this.onPointerMove);
+    this.app.input.onPointerUp.remove(this.onPointerUp);
+    this.app.input.onMouseWheel.remove(this.onWheel);
+    this.sidebar.remove();
+    this.inspector.remove();
+    this.codePanel.remove();
+    this.frame.destroy();
+    this.message.destroy();
+    this.view.destroy();
+    super.destroy();
   }
-  onTap(x, y) {
-    for (let i = 0; i < CATEGORIES_ROW1.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      if (x >= bx && x < bx + CAT_BTN_W && y >= CAT_BTN_Y1 && y < CAT_BTN_Y1 + CAT_BTN_H) {
-        if (this.cat !== CATEGORIES_ROW1[i].id) {
-          this.cat = CATEGORIES_ROW1[i].id;
-          this.selectFirstInCategory();
-          void this.ensureCategory(this.cat);
-        }
-        return;
-      }
-    }
-    for (let i = 0; i < CATEGORIES_ROW2.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      if (x >= bx && x < bx + CAT_BTN_W && y >= CAT_BTN_Y2 && y < CAT_BTN_Y2 + CAT_BTN_H) {
-        if (this.cat !== CATEGORIES_ROW2[i].id) {
-          this.cat = CATEGORIES_ROW2[i].id;
-          this.selectFirstInCategory();
-          void this.ensureCategory(this.cat);
-        }
-        return;
-      }
-    }
-    for (let i = 0; i < BG_OPTIONS.length; i++) {
-      const bx = BG_BTN_X0 + i * (BG_BTN_SIZE + 5);
-      if (x >= bx && x < bx + BG_BTN_SIZE && y >= BG_BTN_Y && y < BG_BTN_Y + BG_BTN_SIZE) {
-        this.bgIdx = i;
-        return;
-      }
-    }
-    if (x >= 0 && x < SIDEBAR_W && y >= TOOLBAR_H) {
-      const keys = this.keys();
-      const idx = Math.floor((y - LIST_Y) / ITEM_H) + this.scrollOff;
-      if (idx >= 0 && idx < keys.length) {
-        const newKey = keys[idx];
-        const isHeader = this.cat === 'technical' && !newKey.includes('.');
-        if (!isHeader && newKey !== this.key) {
-          this.key = newKey;
-          this.resetPreviewState();
+  // --- Sidebar --------------------------------------------------------------
+  mountSidebar() {
+    Object.assign(this.sidebar.style, {
+      position: 'fixed',
+      inset: `0 auto 0 0`,
+      width: `${SIDEBAR_WIDTH}px`,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '10px',
+      padding: '14px 12px',
+      boxSizing: 'border-box',
+      background: '#0b1019',
+      borderRight: '1px solid rgba(154, 193, 255, 0.18)',
+      color: '#f3f7ff',
+      font: `15px ${FONT}`,
+      zIndex: '5',
+    });
+    this.sidebar.setAttribute('aria-label', 'Demo assets');
+    this.search.type = 'search';
+    this.search.placeholder = `Search ${ITEMS.length} assets`;
+    this.search.setAttribute('aria-label', 'Search assets');
+    Object.assign(this.search.style, {
+      padding: '8px 10px',
+      border: '1px solid rgba(154, 193, 255, 0.32)',
+      borderRadius: '8px',
+      background: 'rgba(154, 193, 255, 0.08)',
+      color: 'inherit',
+      font: 'inherit',
+    });
+    this.search.addEventListener('input', () => this.renderList());
+    Object.assign(this.tabs.style, { display: 'flex', flexWrap: 'wrap', gap: '5px' });
+    this.tabs.setAttribute('role', 'group');
+    this.tabs.setAttribute('aria-label', 'Asset types');
+    for (const group of GROUPS) {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.textContent = `${group} ${ITEMS.filter(item => item.group === group).length}`;
+      button.dataset.group = group;
+      Object.assign(button.style, chipStyle(false));
+      button.addEventListener('click', () => {
+        this.showGroup(group);
+        const first = this.visibleItems()[0];
+        if (first && first.group !== this.selected?.group) {
+          void this.select(first);
         }
-      }
-      return;
-    }
-    if (this.key && x >= PREVIEW_X + PREVIEW_W - 84 && x < PREVIEW_X + PREVIEW_W - 10 && y >= PREVIEW_Y + 8 && y < PREVIEW_Y + 8 + 26) {
-      navigator.clipboard?.writeText(this.assetExpression()).catch(() => undefined);
-      return;
+      });
+      this.tabs.append(button);
     }
-    if (this.isAudioLikeCategory() && this.key) {
-      const bx = PREVIEW_X + (PREVIEW_W - 100) / 2;
-      const by = PREVIEW_Y + PREVIEW_H / 2 - 30;
-      if (x >= bx && x < bx + 100 && y >= by && y < by + 56) {
-        this.toggleAudio();
+    Object.assign(this.list.style, { flex: '1 1 auto', overflowY: 'auto', listStyle: 'none', margin: '0', padding: '0' });
+    this.list.setAttribute('aria-label', 'Assets');
+    this.list.addEventListener('keydown', event => {
+      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
         return;
       }
-    }
-    if ((this.cat === 'sprites' || this.cat === 'spritesheets' || this.cat === 'inputPrompts') && this.key) {
-      const bx = PREVIEW_X + 16;
-      const by = H - 48;
-      if (x >= bx && x < bx + 90 && y >= by && y < by + 30) {
-        this.animPlaying = !this.animPlaying;
-        return;
+      event.preventDefault();
+      const visible = this.visibleItems();
+      const index = visible.findIndex(item => item === this.selected);
+      const next = visible[(index + (event.key === 'ArrowDown' ? 1 : -1) + visible.length) % visible.length];
+      if (next) {
+        void this.select(next);
+        this.buttons.get(next.id)?.focus();
       }
-    }
+    });
+    this.sidebar.append(this.search, this.tabs, this.list);
+    document.body.append(this.sidebar);
   }
-  onMove(x, y) {
-    this.hoverIdx = null;
-    if (x >= 0 && x < SIDEBAR_W && y >= TOOLBAR_H) {
-      const keys = this.keys();
-      const idx = Math.floor((y - LIST_Y) / ITEM_H) + this.scrollOff;
-      if (idx >= 0 && idx < keys.length) {
-        const isHeader = this.cat === 'technical' && !keys[idx].includes('.');
-        if (!isHeader) {
-          this.hoverIdx = idx;
-        }
-      }
-    }
+  showGroup(group) {
+    this.group = group;
+    this.search.value = '';
+    for (const button of this.tabs.querySelectorAll('button')) {
+      Object.assign(button.style, chipStyle(button.dataset.group === group));
+      button.setAttribute('aria-pressed', String(button.dataset.group === group));
+    }
+    this.renderList();
   }
-  onWheel(dy) {
-    const maxScroll = this.maxScroll();
-    const delta = dy > 0 ? 1 : -1;
-    this.scrollOff = Math.max(0, Math.min(maxScroll, this.scrollOff + delta));
+  visibleItems() {
+    const query = this.search.value.trim().toLowerCase();
+    return query
+      ? ITEMS.filter(item => item.name.toLowerCase().includes(query) || item.key.toLowerCase().includes(query))
+      : ITEMS.filter(item => item.group === this.group);
   }
-  update(delta) {
-    if (!this.animPlaying) {
-      return;
-    }
-    if (this.cat !== 'sprites' && this.cat !== 'spritesheets' && this.cat !== 'inputPrompts') {
-      return;
-    }
-    const frames = this.currentFrameKeys();
-    if (!frames.length) {
-      return;
-    }
-    this.frameTimer += delta;
-    if (this.frameTimer >= 0.07) {
-      this.frameTimer = 0;
-      this.frameIdx = (this.frameIdx + 1) % frames.length;
-    }
+  renderList() {
+    const searching = this.search.value.trim() !== '';
+    this.buttons.clear();
+    this.list.replaceChildren(
+      ...this.visibleItems().map(item => {
+        const row = document.createElement('li');
+        const button = document.createElement('button');
+        const glyph = document.createElement('span');
+        const label = document.createElement('span');
+        button.type = 'button';
+        button.dataset.asset = item.id;
+        glyph.textContent = GROUP_GLYPH[item.kind];
+        glyph.setAttribute('aria-hidden', 'true');
+        Object.assign(glyph.style, { flex: '0 0 34px', font: `600 10px ${MONO}`, color: '#7fb8ff', textAlign: 'center' });
+        label.textContent = searching ? `${item.name} - ${item.group}` : item.name;
+        Object.assign(label.style, { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
+        Object.assign(button.style, {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          width: '100%',
+          minHeight: '34px',
+          padding: '4px 6px',
+          textAlign: 'left',
+          border: '0',
+          borderRadius: '7px',
+          background: 'transparent',
+          color: 'inherit',
+          font: 'inherit',
+          cursor: 'pointer',
+        });
+        button.append(glyph, label);
+        button.addEventListener('click', () => void this.select(item));
+        this.buttons.set(item.id, button);
+        row.append(button);
+        return row;
+      }),
+    );
+    this.markSelection();
   }
-  draw(context) {
-    this.drawPreviewBg(context);
-    this.drawPreviewContent(context);
-    this.drawSidebar(context);
-    this.drawToolbar(context);
+  markSelection() {
+    for (const [id, button] of this.buttons) {
+      const current = id === this.selected?.id;
+      button.style.background = current ? 'rgba(127, 184, 255, 0.26)' : 'transparent';
+      button.setAttribute('aria-current', String(current));
+      if (current) {
+        button.scrollIntoView({ block: 'nearest' });
+      }
+    }
   }
-  drawNoAssets(context) {
-    const g = this.gPreview;
-    g.clear();
-    g.fillColor = C.panel;
-    g.drawRectangle(0, 0, W, H);
-    context.render(g);
-    context.render(this.txtNoAssets);
+  // --- Inspector ------------------------------------------------------------
+  mountInspector() {
+    Object.assign(this.inspector.style, {
+      position: 'fixed',
+      inset: `0 0 0 auto`,
+      width: `${INSPECTOR_WIDTH}px`,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '10px',
+      padding: '14px',
+      boxSizing: 'border-box',
+      overflowY: 'auto',
+      background: '#0b1019',
+      borderLeft: '1px solid rgba(154, 193, 255, 0.18)',
+      color: '#dce8ff',
+      font: `14px ${FONT}`,
+      zIndex: '5',
+    });
+    this.inspector.setAttribute('aria-label', 'Selected asset');
+    Object.assign(this.heading.style, { margin: '0', fontSize: '19px', color: '#ffffff' });
+    Object.assign(this.facts.style, { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '3px 10px', margin: '0', fontSize: '13px' });
+    Object.assign(this.resident.style, { marginTop: 'auto', fontSize: '12px', color: '#8aa0c4' });
+    this.inspector.append(this.heading, this.facts, this.panelSlot, this.resident);
+    document.body.append(this.inspector);
   }
-  drawToolbar(context) {
-    const g = this.gToolbar;
-    g.clear();
-    g.fillColor = C.toolbar;
-    g.drawRectangle(0, 0, W, TOOLBAR_H);
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawLine(0, TOOLBAR_H - 1, W, TOOLBAR_H - 1);
-    g.drawLine(0, CAT_BTN_Y2 - 4, W, CAT_BTN_Y2 - 4);
-    for (let i = 0; i < CATEGORIES_ROW1.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      g.fillColor = this.cat === CATEGORIES_ROW1[i].id ? C.active : C.btnDark;
-      g.lineWidth = 0;
-      g.drawRectangle(bx, CAT_BTN_Y1, CAT_BTN_W, CAT_BTN_H);
-    }
-    for (let i = 0; i < CATEGORIES_ROW2.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      g.fillColor = this.cat === CATEGORIES_ROW2[i].id ? C.active : C.btnDark;
-      g.lineWidth = 0;
-      g.drawRectangle(bx, CAT_BTN_Y2, CAT_BTN_W, CAT_BTN_H);
-    }
-    for (let i = 0; i < BG_OPTIONS.length; i++) {
-      const { r, g: gv, b } = BG_OPTIONS[i];
-      const bx = BG_BTN_X0 + i * (BG_BTN_SIZE + 5);
-      g.fillColor = new Color(r, gv, b);
-      g.lineWidth = this.bgIdx === i ? 2 : 1;
-      g.lineColor = this.bgIdx === i ? C.accent : C.border;
-      g.drawRectangle(bx, BG_BTN_Y, BG_BTN_SIZE, BG_BTN_SIZE);
-    }
-    context.render(g);
-    for (let i = 0; i < CATEGORIES_ROW1.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      const t = this.catBtnTexts[i];
-      t.text = CATEGORIES_ROW1[i].label;
-      t.setPosition(bx + (CAT_BTN_W - 22) / 2, CAT_BTN_Y1 + 12);
-      context.render(t);
-    }
-    for (let i = 0; i < CATEGORIES_ROW2.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      const t = this.catBtnTexts[CATEGORIES_ROW1.length + i];
-      t.text = CATEGORIES_ROW2[i].label;
-      t.setPosition(bx + (CAT_BTN_W - 22) / 2, CAT_BTN_Y2 + 12);
-      context.render(t);
-    }
-    for (let i = 0; i < BG_OPTIONS.length; i++) {
-      const bx = BG_BTN_X0 + i * (BG_BTN_SIZE + 5);
-      const t = this.bgBtnTexts[i];
-      t.text = BG_OPTIONS[i].label;
-      t.style.fillColor = i === 1 ? C.white : C.dim;
-      t.setPosition(bx + 7, BG_BTN_Y + 7);
-      context.render(t);
-    }
+  renderFacts(item, facts) {
+    const manifest = this.manifest.get(item.key);
+    const rows = [
+      ['Asset', `assets.${item.key}`],
+      ['File', fileName(assets[item.key].source)],
+      ...(manifest ? [['Size', formatBytes(manifest.bytes + (item.atlasKey ? (this.manifest.get(item.atlasKey)?.bytes ?? 0) : 0))]] : []),
+      ...facts,
+    ];
+    this.heading.textContent = item.name;
+    this.facts.replaceChildren(
+      ...rows.flatMap(([term, value]) => {
+        const dt = document.createElement('dt');
+        const dd = document.createElement('dd');
+        dt.textContent = term;
+        dd.textContent = value;
+        dt.style.color = '#8aa0c4';
+        Object.assign(dd.style, { margin: '0', overflowWrap: 'anywhere', color: '#f3f7ff' });
+        return [dt, dd];
+      }),
+    );
   }
-  drawSidebar(context) {
-    const g = this.gSidebar;
-    g.clear();
-    g.fillColor = C.panel;
-    g.drawRectangle(0, TOOLBAR_H, SIDEBAR_W, H - TOOLBAR_H);
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawLine(SIDEBAR_W, TOOLBAR_H, SIDEBAR_W, H);
-    const keys = this.keys();
-    for (let i = 0; i < keys.length; i++) {
-      const iy = LIST_Y + (i - this.scrollOff) * ITEM_H;
-      if (iy + ITEM_H <= TOOLBAR_H || iy >= H) {
-        continue;
-      }
-      const isHeader = this.cat === 'technical' && !keys[i].includes('.');
-      const isSelected = !isHeader && keys[i] === this.key;
-      const isHover = !isHeader && this.hoverIdx === i && !isSelected;
-      if (isHeader) {
-        g.fillColor = C.infoBar;
-        g.lineWidth = 0;
-        g.drawRectangle(0, iy, SIDEBAR_W - 1, ITEM_H);
-      } else if (isSelected) {
-        g.fillColor = C.active;
-        g.lineWidth = 0;
-        g.drawRectangle(0, iy, SIDEBAR_W - 1, ITEM_H);
-      } else if (isHover) {
-        g.fillColor = C.hover;
-        g.lineWidth = 0;
-        g.drawRectangle(0, iy, SIDEBAR_W - 1, ITEM_H);
-      }
-    }
-    context.render(g);
-    for (let i = 0; i < keys.length && i - this.scrollOff < this.itemTexts.length; i++) {
-      const iy = LIST_Y + (i - this.scrollOff) * ITEM_H;
-      if (iy + ITEM_H <= TOOLBAR_H || iy >= H) {
-        continue;
-      }
-      if (this.cat === 'technical' && !keys[i].includes('.')) {
-        const ht = this.techHeaderTexts.get(keys[i]);
-        if (ht) {
-          ht.setPosition(10, iy + 12);
-          context.render(ht);
-        }
-        continue;
-      }
-      const t = this.itemTexts[i - this.scrollOff];
-      if (!t) {
-        continue;
-      }
-      t.text = this.cat === 'technical' ? (keys[i].split('.')[1] ?? keys[i]) : keys[i];
-      t.style.fillColor = keys[i] === this.key ? C.white : C.dim;
-      t.setPosition(this.cat === 'technical' ? 18 : 10, iy + 10);
-      context.render(t);
-    }
-    if (keys.length === 0) {
-      this.txtEmptyCat.setPosition(60, LIST_Y + 14);
-      context.render(this.txtEmptyCat);
-    }
+  /** Lists what the loader holds right now: the manifest plus the current selection, never an earlier one. */
+  renderResident() {
+    const rows = this.app.loader.inspect();
+    const summary = document.createElement('summary');
+    const list = document.createElement('ul');
+    summary.textContent = `Loader holds ${rows.length} asset${rows.length === 1 ? '' : 's'}`;
+    summary.style.cursor = 'pointer';
+    Object.assign(list.style, { margin: '6px 0 0', paddingLeft: '16px', font: `11px ${MONO}` });
+    list.append(
+      ...rows.map(row => {
+        const entry = document.createElement('li');
+        entry.textContent = `${fileName(row.locator)} (${row.state})`;
+        return entry;
+      }),
+    );
+    this.resident.dataset.residentCount = String(rows.length);
+    this.resident.replaceChildren(summary, list);
   }
-  drawPreviewBg(context) {
-    const { r, g, b } = BG_OPTIONS[this.bgIdx];
-    const bg = this.gPreview;
-    bg.clear();
-    bg.fillColor = new Color(r, g, b);
-    bg.drawRectangle(PREVIEW_X, PREVIEW_Y, PREVIEW_W, PREVIEW_H);
-    context.render(bg);
+  // --- Code and data panel --------------------------------------------------
+  mountCodePanel() {
+    const header = document.createElement('div');
+    const copy = document.createElement('button');
+    const close = document.createElement('button');
+    Object.assign(this.codePanel.style, {
+      position: 'fixed',
+      left: `${PREVIEW.x + 12}px`,
+      width: `${PREVIEW.width - 24}px`,
+      bottom: '12px',
+      maxHeight: '420px',
+      display: 'none',
+      flexDirection: 'column',
+      borderRadius: '10px',
+      border: '1px solid rgba(154, 193, 255, 0.3)',
+      background: 'rgba(8, 12, 20, 0.96)',
+      color: '#f3f7ff',
+      font: `14px ${FONT}`,
+      zIndex: '6',
+    });
+    this.codePanel.setAttribute('aria-label', 'Code');
+    Object.assign(header.style, { display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 10px' });
+    this.codeTitle.style.flex = '1 1 auto';
+    for (const [button, label] of [
+      [copy, 'Copy'],
+      [close, 'Close'],
+    ]) {
+      button.type = 'button';
+      button.textContent = label;
+      Object.assign(button.style, chipStyle(false));
+    }
+    copy.addEventListener('click', () => {
+      void navigator.clipboard.writeText(this.code.textContent ?? '').then(
+        () => {
+          copy.textContent = 'Copied';
+          console.log(`Copied the ${this.codeTitle.textContent ?? 'code'} to the clipboard`);
+        },
+        error => console.warn('The clipboard refused the copy:', error),
+      );
+    });
+    copy.addEventListener('blur', () => (copy.textContent = 'Copy'));
+    close.addEventListener('click', () => this.hideCode());
+    Object.assign(this.code.style, {
+      margin: '0',
+      padding: '0 12px 12px',
+      overflow: 'auto',
+      font: `13px/1.45 ${MONO}`,
+      whiteSpace: 'pre',
+      color: '#dce8ff',
+    });
+    this.code.tabIndex = 0;
+    header.append(this.codeTitle, copy, close);
+    this.codePanel.append(header, this.code);
+    document.body.append(this.codePanel);
   }
-  drawPreviewContent(context) {
-    if (!this.key) {
-      this.txtNoSel.setPosition(PREVIEW_X + PREVIEW_W / 2 - 130, H / 2 - 10);
-      context.render(this.txtNoSel);
-      this.drawInfoBar(context);
-      return;
-    }
-    // Category still fetching (lazy-load): keep the sidebar interactive
-    // and show a placeholder instead of an empty preview.
-    if (!this.loadedCats.has(this.cat)) {
-      this.txtLoading.setPosition(PREVIEW_X + PREVIEW_W / 2 - 70, H / 2 - 10);
-      context.render(this.txtLoading);
-      this.drawInfoBar(context);
-      return;
-    }
-    switch (this.cat) {
-      case 'textures':
-        this.drawTexPreview(context);
-        break;
-      case 'sprites':
-        this.drawSprPreview(context);
-        break;
-      case 'spritesheets':
-        this.drawSshPreview(context);
-        break;
-      case 'svg':
-        this.drawSvgPreview(context);
-        break;
-      case 'audio':
-        this.drawAudioPreview(context, this.audioMusics);
-        break;
-      case 'sound':
-        this.drawAudioPreview(context, this.soundMusics);
-        break;
-      case 'music':
-        this.drawAudioPreview(context, this.musicMusics);
-        break;
-      case 'soundSprites':
-        this.drawSoundSpritePreview(context);
-        break;
-      case 'fonts':
-        this.drawFontPreview(context);
-        break;
-      case 'video':
-        this.drawVideoPreview(context);
-        break;
-      case 'inputPrompts':
-        this.drawInpPreview(context);
-        break;
-      case 'technical':
-        this.drawTechPreview(context);
-        break;
-      case 'backgrounds':
-        this.drawBgPreview(context);
-        break;
-      case 'cursors':
-        this.drawCursorPreview(context);
-        break;
-      case 'tilesets':
-        this.drawTilesetPreview(context);
-        break;
-      case 'vendor':
-        this.drawVendorPreview(context);
-        break;
+  showCode() {
+    if (this.preview) {
+      this.openCodePanel('Code', this.preview.snippet());
     }
-    this.drawInfoBar(context);
   }
-  drawInfoBar(context) {
-    const g = this.gInfoBar;
-    g.clear();
-    g.fillColor = C.infoBar;
-    g.drawRectangle(PREVIEW_X, PREVIEW_Y, PREVIEW_W, 44);
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawLine(PREVIEW_X, PREVIEW_Y + 44, W, PREVIEW_Y + 44);
-    context.render(g);
-    if (!this.key) {
+  async showData() {
+    const preview = this.preview;
+    const generation = this.generation;
+    if (!preview?.data) {
       return;
     }
-    this.txtKey.text = this.assetExpression();
-    this.txtKey.setPosition(PREVIEW_X + 10, PREVIEW_Y + 5);
-    context.render(this.txtKey);
-    this.txtPath.text = this.assetPath();
-    this.txtPath.setPosition(PREVIEW_X + 10, PREVIEW_Y + 24);
-    context.render(this.txtPath);
-    const ext = this.typeLabel();
-    if (ext) {
-      this.txtType.text = ext;
-      this.txtType.setPosition(PREVIEW_X + PREVIEW_W - 160, PREVIEW_Y + 15);
-      context.render(this.txtType);
-    }
-    if (!this.copyBtnBg) {
-      this.copyBtnBg = new Graphics();
+    this.openCodePanel('Data', 'Loading...');
+    try {
+      const data = await preview.data();
+      if (generation !== this.generation) {
+        return;
+      }
+      const text = JSON.stringify(data, null, 2);
+      const limit = 60_000;
+      this.openCodePanel('Data', text.length > limit ? `${text.slice(0, limit)}\n... ${text.length - limit} more characters` : text);
+    } catch (error) {
+      if (generation === this.generation && !isAbort(error)) {
+        this.openCodePanel('Data', `Could not load the data: ${error instanceof Error ? error.message : String(error)}`);
+      }
     }
-    const copyX = PREVIEW_X + PREVIEW_W - 84;
-    const copyY = PREVIEW_Y + 9;
-    this.copyBtnBg.clear();
-    this.copyBtnBg.fillColor = C.btnDark;
-    this.copyBtnBg.lineWidth = 1;
-    this.copyBtnBg.lineColor = C.border;
-    this.copyBtnBg.drawRectangle(copyX, copyY, 72, 26);
-    context.render(this.copyBtnBg);
-    this.txtCopy.setPosition(copyX + 10, copyY + 7);
-    context.render(this.txtCopy);
   }
-  previewCenter() {
-    return {
-      cx: PREVIEW_X + PREVIEW_W / 2,
-      cy: PREVIEW_Y + 44 + (PREVIEW_H - 44) / 2,
-      maxW: PREVIEW_W - 80,
-      maxH: PREVIEW_H - 80,
-    };
+  openCodePanel(title, text) {
+    this.codeTitle.textContent = title;
+    this.code.textContent = text;
+    this.codePanel.style.display = 'flex';
   }
-  fitSprite(sprite, maxW, maxH, cx, cy) {
-    const tex = sprite.texture;
-    if (!tex) {
-      return;
-    }
-    const tw = tex.width || 128;
-    const th = tex.height || 128;
-    const scale = Math.min(maxW / tw, maxH / th, 3);
-    sprite.setScale(scale);
-    sprite.setPosition(cx, cy);
+  hideCode() {
+    this.codePanel.style.display = 'none';
   }
-  drawTexPreview(context) {
-    const sprite = this.texSprites.get(this.key ?? '');
-    if (!sprite) {
-      return;
-    }
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH, cx, cy);
-    context.render(sprite);
+}
+const chipStyle = active => ({
+  padding: '4px 9px',
+  border: `1px solid ${active ? 'rgba(127, 184, 255, 0.7)' : 'rgba(154, 193, 255, 0.28)'}`,
+  borderRadius: '999px',
+  background: active ? 'rgba(127, 184, 255, 0.24)' : 'transparent',
+  color: active ? '#ffffff' : '#c4d2ec',
+  font: `600 12px ${FONT}`,
+  cursor: 'pointer',
+});
+// --- Previews ---------------------------------------------------------------
+const openPreview = context => {
+  switch (context.item.kind) {
+    case 'texture':
+    case 'svg':
+      return openTexture(context);
+    case 'spritesheet':
+      return openSpritesheet(context);
+    case 'tiled':
+    case 'ldtk':
+      return openMap(context);
+    case 'sound':
+    case 'music':
+      return openAudio(context);
+    case 'video':
+      return openVideo(context);
+    case 'font':
+    case 'bmFont':
+      return openFont(context);
+    case 'data':
+      return openData(context);
   }
-  drawSprPreview(context) {
-    const ss = this.sprSheets.get(this.key ?? '');
-    if (!ss) {
-      return;
-    }
-    const frames = [...ss.sprites.keys()];
-    if (!frames.length) {
-      return;
+};
+const BACKDROPS = { Checker: null, Dark: new Color(32, 37, 50), Light: new Color(236, 239, 244), Black: new Color(0, 0, 0) };
+const BACKDROP_NAMES = Object.keys(BACKDROPS);
+/** A transparency checkerboard behind a `width` x `height` image. */
+const checkerboard = (width, height) => {
+  const graphics = new Graphics();
+  const cell = Math.max(4, Math.round(Math.max(width, height) / 32));
+  graphics.fillColor = new Color(58, 64, 78);
+  graphics.drawRectangle(0, 0, width, height);
+  graphics.fillColor = new Color(86, 93, 110);
+  for (let y = 0; y < height; y += cell) {
+    for (let x = (y / cell) % 2 === 0 ? 0 : cell; x < width; x += cell * 2) {
+      graphics.drawRectangle(x, y, Math.min(cell, width - x), Math.min(cell, height - y));
     }
-    const sprite = ss.getFrameSprite(frames[this.frameIdx % frames.length]);
-    sprite.setAnchor(0.5);
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 50, cx, cy);
-    context.render(sprite);
-    this.drawAnimControls(context, frames.length);
   }
-  drawSshPreview(context) {
-    const ss = this.sshSheets.get(this.key ?? '');
-    if (!ss) {
-      return;
-    }
-    const frames = [...ss.sprites.keys()];
-    if (!frames.length) {
-      return;
+  return graphics;
+};
+const zoomSlider = (value = 1) => slider('Zoom', { min: 0.05, max: 16, step: 0.05, value, format: zoom => `${Math.round(zoom * 100)}%` });
+const openTexture = async ({ scene, item, scope }) => {
+  const descriptor = assets[item.key];
+  const svg = descriptor.type === 'svg';
+  // An SVG loads as an image element; a texture over it is this preview's to destroy.
+  const texture = svg ? new Texture(await scope.load(descriptor)) : await scope.load(descriptor);
+  const sprite = new Sprite(texture);
+  const backdrop = checkerboard(texture.width, texture.height);
+  const state = { zoom: 1, nearest: false, backdrop: 'Checker' };
+  return {
+    world: [backdrop, sprite],
+    overlay: [],
+    bounds: { width: texture.width, height: texture.height },
+    facts: [
+      ['Pixels', `${texture.width} x ${texture.height}`],
+      ['Format', svg ? 'SVG, rasterized at its intrinsic size' : (fileName(descriptor.source).split('.').pop() ?? '').toUpperCase()],
+    ],
+    mount(host) {
+      const panel = host({
+        title: 'Texture',
+        controls: {
+          zoom: zoomSlider(),
+          filtering: choice('Filtering', ['Linear', 'Nearest']),
+          backdrop: choice('Backdrop', BACKDROP_NAMES),
+        },
+        actions: { Fit: () => scene.fit(), '100%': () => panel.set('zoom', 1), Code: () => scene.showCode() },
+        onChange(key, _value, values) {
+          state.zoom = values.zoom;
+          state.nearest = values.filtering === 'Nearest';
+          state.backdrop = values.backdrop;
+          if (key === 'zoom') {
+            scene.setZoom(values.zoom);
+          } else if (key === 'filtering') {
+            // Sampling is per texture handle; this preview's scope owns this one.
+            texture.scaleMode = state.nearest ? ScaleModes.Nearest : ScaleModes.Linear;
+          } else if (key === 'backdrop') {
+            backdrop.visible = values.backdrop === 'Checker';
+            scene.setBackdrop(BACKDROPS[values.backdrop] ?? new Color(32, 37, 50));
+          }
+        },
+      });
+      scene.bindZoom(panel);
+    },
+    snippet: () =>
+      textureSnippet(item, {
+        zoom: state.zoom,
+        nearest: state.nearest,
+        width: texture.width,
+        height: texture.height,
+      }),
+    dispose() {
+      sprite.destroy();
+      backdrop.destroy();
+      if (svg) {
+        texture.destroy();
+      }
+    },
+  };
+};
+const openSpritesheet = async ({ scene, item, scope }) => {
+  const [texture, data] = await Promise.all([scope.load(assets[item.key]), scope.load(assets[item.atlasKey])]);
+  const sheet = new Spritesheet(texture, data);
+  const names = [...sheet.frames.keys()];
+  const animations = [...sheet.animations.keys()];
+  const atlas = new Sprite(texture);
+  const backdrop = checkerboard(texture.width, texture.height);
+  const outlines = new Graphics();
+  const strip = new Graphics();
+  const frameLabel = new Text('', { fontSize: 15, fillColor: new Color(200, 214, 236) });
+  const animationLabel = new Text('', { fontSize: 15, fillColor: new Color(200, 214, 236) });
+  const animated = new AnimatedSprite(texture).setAnchor(0.5);
+  const selectedSprite = new Sprite(texture).setAnchor(0.5);
+  const STRIP_Y = PREVIEW.height - 208;
+  const boxWidth = (PREVIEW.width - 36) / 2;
+  const frameBox = { x: PREVIEW.x + 12, y: STRIP_Y, width: boxWidth, height: 196 };
+  const animationBox = { x: frameBox.x + boxWidth + 12, y: STRIP_Y, width: boxWidth, height: 196 };
+  const state = {
+    animation: animations.length > 0 ? animations[0] : 'Frame range',
+    first: 0,
+    last: Math.min(names.length - 1, 1),
+    selected: 0,
+    fps: 8,
+    loop: true,
+    scale: 1,
+    bounds: true,
+  };
+  const clipFrames = () =>
+    state.animation === 'Frame range'
+      ? names.slice(Math.min(state.first, state.last), Math.max(state.first, state.last) + 1)
+      : [...sheet.getAnimationFrameNames(state.animation)];
+  const fitInBox = (sprite, rect, box, scale) => {
+    // The two-line label takes the top 44 px of the box.
+    const room = box.height - 52;
+    sprite.setScale(Math.min(scale, room / rect.height)).setPosition(box.x + box.width / 2, box.y + 44 + (box.height - 44) / 2);
+  };
+  const redraw = () => {
+    const range = new Set(clipFrames());
+    outlines.clear();
+    if (state.bounds) {
+      for (const [name, rect] of sheet.frames) {
+        const selected = names.indexOf(name) === state.selected;
+        outlines.lineWidth = selected ? 3 : 1;
+        outlines.lineColor = selected
+          ? new Color(255, 214, 102)
+          : range.has(name)
+            ? new Color(127, 220, 160, 0.95)
+            : new Color(127, 184, 255, 0.55);
+        outlines.drawRectangle(rect.x, rect.y, rect.width, rect.height);
+      }
     }
-    const sprite = ss.getFrameSprite(frames[this.frameIdx % frames.length]);
-    sprite.setAnchor(0.5);
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 50, cx, cy);
-    context.render(sprite);
-    this.drawAnimControls(context, frames.length);
+    const selectedName = names[state.selected];
+    const selectedRect = sheet.getFrame(selectedName);
+    selectedSprite.setTextureFrame(selectedRect);
+    fitInBox(selectedSprite, selectedRect, frameBox, 4);
+    frameLabel.text = `Frame ${state.selected + 1}/${names.length}
+${selectedName}, ${selectedRect.width} x ${selectedRect.height}`;
+    const frames = clipFrames().map(name => sheet.getFrame(name));
+    animated.setClips({ preview: { frames, fps: state.fps, repeat: state.loop ? -1 : 1 } }).play('preview', { restart: true });
+    fitInBox(animated, frames[0], animationBox, state.scale);
+    animationLabel.text = `Animation: ${state.animation === 'Frame range' ? `frames ${Math.min(state.first, state.last) + 1}-${Math.max(state.first, state.last) + 1}` : state.animation}
+${frames.length} frames, ${state.fps} fps${state.loop ? ', loop' : ''}`;
+  };
+  strip.fillColor = new Color(11, 16, 25, 0.94);
+  strip.drawRectangle(PREVIEW.x, STRIP_Y - 12, PREVIEW.width, PREVIEW.height - STRIP_Y + 12);
+  strip.fillColor = new Color(24, 30, 44);
+  for (const box of [frameBox, animationBox]) {
+    strip.drawRectangle(box.x, box.y, box.width, box.height);
   }
-  drawInpPreview(context) {
-    const ss = this.inpSheets.get(this.key ?? '');
-    if (ss) {
-      const frames = [...ss.sprites.keys()];
-      if (frames.length > 0) {
-        const sprite = ss.getFrameSprite(frames[this.frameIdx % frames.length]);
-        sprite.setAnchor(0.5);
-        const { cx, cy, maxW, maxH } = this.previewCenter();
-        this.fitSprite(sprite, maxW, maxH - 50, cx, cy);
-        context.render(sprite);
-        this.drawAnimControls(context, frames.length);
-        return;
+  frameLabel.setPosition(frameBox.x + 10, frameBox.y + 6);
+  animationLabel.setPosition(animationBox.x + 10, animationBox.y + 6);
+  redraw();
+  return {
+    world: [backdrop, atlas, outlines],
+    overlay: [strip, selectedSprite, animated, frameLabel, animationLabel],
+    // Fit the atlas into the area above the frame strip.
+    bounds: { width: texture.width, height: texture.height * (PREVIEW.height / (STRIP_Y - 24)) },
+    facts: [
+      ['Atlas', `${texture.width} x ${texture.height} px`],
+      ['Frames', String(names.length)],
+      ['Animations', animations.length > 0 ? animations.join(', ') : 'none in the atlas data - pick a frame range'],
+    ],
+    mount(host) {
+      const last = Math.max(0, names.length - 1);
+      const frameName = index => `#${Math.round(index) + 1}`;
+      const controls = {
+        zoom: zoomSlider(),
+        animation: choice('Animation', ['Frame range', ...animations], state.animation),
+        first: slider('First frame', { min: 0, max: last, step: 1, value: state.first, format: frameName }),
+        last: slider('Last frame', { min: 0, max: last, step: 1, value: state.last, format: frameName }),
+        fps: slider('FPS', { min: 1, max: 30, step: 1, value: state.fps, format: fps => `${fps}` }),
+        loop: toggle('Loop', state.loop),
+        scale: slider('Scale', { min: 0.25, max: 6, step: 0.25, value: state.scale, format: scale => `${scale}x` }),
+        bounds: toggle('Frame bounds', state.bounds),
+      };
+      const handle = host({
+        title: 'Spritesheet',
+        controls,
+        actions: {
+          'Range from selected': () => handle.set('first', state.selected),
+          'Range to selected': () => handle.set('last', state.selected),
+          Fit: () => scene.fit(),
+          Code: () => scene.showCode(),
+          Data: () => void scene.showData(),
+        },
+        onChange(key, _value, values) {
+          if (key === 'zoom') {
+            scene.setZoom(values.zoom);
+            return;
+          }
+          Object.assign(state, {
+            animation: values.animation,
+            first: values.first,
+            last: values.last,
+            fps: values.fps,
+            loop: values.loop,
+            scale: values.scale,
+            bounds: values.bounds,
+          });
+          redraw();
+        },
+      });
+      scene.bindZoom(handle);
+      handle.status('Click a frame in the atlas to select it.');
+    },
+    update(delta) {
+      animated.update(delta);
+    },
+    tap(x, y) {
+      const index = names.findIndex(name => sheet.getFrame(name).contains(x, y));
+      if (index >= 0) {
+        state.selected = index;
+        redraw();
+        console.log(`Frame ${index + 1}: ${names[index]}`);
+      }
+    },
+    snippet: () => spritesheetSnippet(item, { ...state, frames: clipFrames() }),
+    data: () => Promise.resolve(data),
+    dispose() {
+      animated.destroy();
+      selectedSprite.destroy();
+      atlas.destroy();
+      backdrop.destroy();
+      outlines.destroy();
+      strip.destroy();
+      frameLabel.destroy();
+      animationLabel.destroy();
+      sheet.destroy();
+    },
+  };
+};
+const openMap = async ({ scene, item, scope }) => {
+  const source = assets[item.key].source;
+  const ldtk = item.kind === 'ldtk';
+  // Tileset images resolve relative to the map file, which is why the map
+  // loads from the catalog's absolute URL through the format's own type.
+  const world = ldtk ? await scope.load(Asset.type('ldtkMap', source)) : null;
+  const levels = world ? world.levels : [await scope.load(Asset.type('tileMap', source))];
+  const state = { level: 0, objects: true, zoom: 1, layers: new Map() };
+  const objects = new Graphics();
+  let node = null;
+  const preview = {
+    world: [],
+    overlay: [],
+    bounds: null,
+    facts: [],
+    mount(host) {
+      const map = levels[state.level];
+      const layerControls = Object.fromEntries(
+        map.renderableLayers.map(layer => [`layer:${layer.name}`, toggle(`Layer ${layer.name}`, true)]),
+      );
+      const panel = host({
+        title: ldtk ? 'LDtk world' : 'Tiled map',
+        controls: {
+          zoom: zoomSlider(),
+          ...(levels.length > 1
+            ? {
+                level: choice(
+                  'Level',
+                  levels.map(level => level.name),
+                ),
+              }
+            : {}),
+          objects: toggle('Object shapes', state.objects),
+          ...layerControls,
+        },
+        actions: { Fit: () => scene.fit(), Code: () => scene.showCode(), Data: () => void scene.showData() },
+        onChange(key, value) {
+          if (key === 'zoom') {
+            state.zoom = value;
+            scene.setZoom(value);
+          } else if (key === 'level') {
+            state.level = Math.max(
+              0,
+              levels.findIndex(level => level.name === value),
+            );
+            build();
+            scene.fit();
+          } else if (key === 'objects') {
+            state.objects = value;
+            objects.visible = state.objects;
+          } else if (String(key).startsWith('layer:')) {
+            const name = String(key).slice('layer:'.length);
+            const layerNode = node?.getLayerNode(name);
+            state.layers.set(name, value);
+            if (layerNode) {
+              layerNode.visible = value;
+            }
+          }
+        },
+      });
+      scene.bindZoom(panel);
+    },
+    snippet: () => mapSnippet(item, { level: levels[state.level].name, zoom: state.zoom, ldtk }),
+    data: async () => scope.load(assets[item.key]),
+    dispose() {
+      node?.destroy();
+      objects.destroy();
+    },
+  };
+  const build = () => {
+    const map = levels[state.level];
+    node?.destroy();
+    node = new TileMapNode(map);
+    objects.clear();
+    objects.lineWidth = 2;
+    objects.lineColor = new Color(255, 191, 82, 0.9);
+    objects.fillColor = new Color(255, 191, 82, 0.16);
+    let count = 0;
+    for (const layer of map.objectLayers) {
+      for (const object of layer.objects) {
+        count += 1;
+        if (object.kind === ObjectKind.Point) {
+          objects.drawCircle(object.x, object.y, 6);
+        } else if (object.kind === ObjectKind.Ellipse) {
+          objects.drawEllipse(object.x + object.width / 2, object.y + object.height / 2, object.width / 2, object.height / 2);
+        } else {
+          objects.drawRectangle(object.x, object.y, object.width, object.height);
+        }
       }
     }
-  }
-  drawSvgPreview(context) {
-    const sprite = this.svgSprites.get(this.key ?? '');
-    if (!sprite) {
+    objects.visible = state.objects;
+    preview.world.splice(0, preview.world.length, node, objects);
+    Object.assign(preview, {
+      bounds: { width: map.pixelWidth ?? (map.width ?? 0) * map.tileWidth, height: map.pixelHeight ?? (map.height ?? 0) * map.tileHeight },
+      facts: [
+        ['Format', ldtk ? 'LDtk world' : 'Tiled map'],
+        ...(levels.length > 1 ? [['Levels', levels.map(level => level.name).join(', ')]] : []),
+        ['Tiles', `${map.width ?? 'unbounded'} x ${map.height ?? 'unbounded'} at ${map.tileWidth} x ${map.tileHeight} px`],
+        ['Layers', map.renderableLayers.map(layer => layer.name).join(', ') || 'none'],
+        ['Objects', String(count)],
+      ],
+    });
+  };
+  build();
+  return preview;
+};
+const openAudio = async ({ scene, item, scope, isCurrent }) => {
+  const descriptor = assets[item.key];
+  const music = descriptor.type === 'music';
+  // A sound sprite ships its clip table as JSON next to the audio file.
+  const spriteTable = demoAssetCategories[item.key] === 'soundSprites' ? descriptor.source.replace(/\.[a-z0-9]+$/, '.json') : null;
+  const [playable, table] = await Promise.all([
+    music ? scope.load(descriptor) : scope.load(descriptor),
+    spriteTable ? scope.load(Asset.type('json', spriteTable)) : Promise.resolve(null),
+  ]);
+  const clips = table ? Object.keys(table) : [];
+  const audio = scene.app.audio;
+  const state = { clip: clips[0] ?? '', volume: 0.8, loop: false };
+  let voice = null;
+  let pendingStart = null;
+  let status = null;
+  let reported = '';
+  const waveform = new Graphics();
+  const playhead = new Graphics();
+  const live = new Graphics();
+  const analyser = new AudioAnalyser();
+  const bright = new Color(127, 184, 255);
+  const dim = new Color(127, 184, 255, 0.25);
+  const muted = new Color(138, 160, 196);
+  const buffer = music ? null : playable.audioBuffer;
+  const channels = buffer?.numberOfChannels ?? 0;
+  const channelNames = channels === 2 ? ['L', 'R'] : Array.from({ length: channels }, (_, channel) => String(channel + 1));
+  const wave = { width: PREVIEW.width - 80, height: channels > 1 ? 300 : 220, gap: 16, left: PREVIEW.x + 40 };
+  // A sound keeps its overview on top and the live signal in a strip below;
+  // streamed music has no overview, so the live signal takes the middle.
+  const scopeHeight = buffer ? 100 : 220;
+  const top = buffer ? PREVIEW_CENTER.y - (wave.height + 48 + scopeHeight) / 2 : PREVIEW_CENTER.y - scopeHeight / 2;
+  const lane = { height: (wave.height - wave.gap * Math.max(0, channels - 1)) / Math.max(1, channels), top };
+  const strip = { top: buffer ? top + wave.height + 48 : top, height: scopeHeight };
+  const label = (text, y) =>
+    new Text(text, { fontSize: 14, fontFamily: MONO, fillColor: muted }).setAnchor(1, 0.5).setPosition(wave.left - 10, y);
+  const labels = [
+    ...(channels > 1
+      ? channelNames.map((name, channel) => label(name, lane.top + channel * (lane.height + wave.gap) + lane.height / 2))
+      : []),
+    ...(buffer
+      ? [
+          new Text('Live signal', { fontSize: 14, fontFamily: MONO, fillColor: muted })
+            .setAnchor(0, 1)
+            .setPosition(wave.left, strip.top - 8),
+        ]
+      : []),
+  ];
+  const caption = new Text(music ? 'Press Play to see the live signal' : '', { fontSize: 18, fillColor: muted });
+  // A decoded sound draws one lane per channel: a min/max bar per column, with
+  // the selected sprite clip highlighted across all lanes.
+  const drawWaveform = () => {
+    waveform.clear();
+    if (!buffer) {
       return;
     }
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH, cx, cy);
-    context.render(sprite);
-  }
-  drawAudioPreview(context, musicMap) {
-    if (!this.audioG) {
-      this.audioG = new Graphics();
-    }
-    const music = musicMap.get(this.key ?? '');
-    const isPlaying = music ? this.previewIsPlaying() : false;
-    const g = this.audioG;
-    const { cx, cy } = this.previewCenter();
-    const bx = cx - 50;
-    const by = cy - 28;
-    g.clear();
-    g.fillColor = isPlaying ? C.btnGreen : C.btnDark;
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawRectangle(bx, by, 100, 56);
-    context.render(g);
-    this.txtAudioIcon.text = isPlaying ? '⏸' : '▶';
-    this.txtAudioIcon.setPosition(bx + (isPlaying ? 30 : 34), by + 10);
-    context.render(this.txtAudioIcon);
-    this.txtMeta.text = this.typeLabel();
-    this.txtMeta.setPosition(cx - 15, by + 68);
-    context.render(this.txtMeta);
-  }
-  drawSoundSpritePreview(context) {
-    if (!this.audioG) {
-      this.audioG = new Graphics();
-    }
-    const music = this.soundSpriteAudio.get(this.key ?? '');
-    const data = this.soundSpriteData.get(this.key ?? '');
-    const isPlaying = music ? this.previewIsPlaying() : false;
-    const sprites = data?.sprites ?? {};
-    const g = this.audioG;
-    const { cx } = this.previewCenter();
-    const bx = cx - 50;
-    const by = PREVIEW_Y + 56;
-    g.clear();
-    g.fillColor = isPlaying ? C.btnGreen : C.btnDark;
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawRectangle(bx, by, 100, 44);
-    context.render(g);
-    this.txtAudioIcon.text = isPlaying ? '⏸' : '▶';
-    this.txtAudioIcon.setPosition(bx + (isPlaying ? 30 : 34), by + 6);
-    context.render(this.txtAudioIcon);
-    let y = by + 64;
-    for (const [name, info] of Object.entries(sprites)) {
-      this.txtMeta.text = `${name}  start:${info.start.toFixed(3)}s  dur:${info.duration.toFixed(3)}s`;
-      this.txtMeta.setPosition(PREVIEW_X + 30, y);
-      context.render(this.txtMeta);
-      y += 20;
-      if (y > H - 20) {
-        break;
+    const clip = table && state.clip ? table[state.clip] : undefined;
+    if (clip) {
+      waveform.fillColor = new Color(127, 184, 255, 0.16);
+      waveform.drawRectangle(
+        wave.left + (clip.start / buffer.duration) * wave.width,
+        lane.top,
+        ((clip.end - clip.start) / buffer.duration) * wave.width,
+        wave.height,
+      );
+    }
+    for (let channel = 0; channel < channels; channel += 1) {
+      const samples = buffer.getChannelData(channel);
+      const middle = lane.top + channel * (lane.height + wave.gap) + lane.height / 2;
+      const scale = lane.height / 2;
+      waveform.fillColor = dim;
+      waveform.drawRectangle(wave.left, middle - 0.5, wave.width, 1);
+      waveform.fillColor = bright;
+      for (let column = 0; column < wave.width; column += 2) {
+        const from = Math.floor((column / wave.width) * samples.length);
+        const to = Math.max(from + 1, Math.floor(((column + 2) / wave.width) * samples.length));
+        let low = 0;
+        let high = 0;
+        for (let index = from; index < to; index += 1) {
+          low = Math.min(low, samples[index]);
+          high = Math.max(high, samples[index]);
+        }
+        waveform.drawRectangle(wave.left + column, middle - high * scale, 1.5, Math.max(1, (high - low) * scale));
       }
     }
-  }
-  drawFontPreview(context) {
-    const family = this.fontFamilies.get(this.key ?? '');
-    if (!family) {
-      this.txtMeta.text = `Font: ${this.key}\n${this.assetPath()}`;
-      this.txtMeta.setPosition(PREVIEW_X + 40, PREVIEW_Y + 80);
-      context.render(this.txtMeta);
+  };
+  // The analyser's window is the last few milliseconds the voice produced,
+  // down-mixed to one channel - an oscilloscope, not a second overview.
+  const drawLive = signal => {
+    const middle = strip.top + strip.height / 2;
+    const scale = strip.height / 2;
+    live.clear();
+    live.fillColor = dim;
+    live.drawRectangle(wave.left, middle - 0.5, wave.width, 1);
+    if (!signal) {
       return;
     }
-    let t = this.fontSampleTexts.get(this.key ?? '');
-    if (!t) {
-      t = new Text('AaBbCc 123 !?', { fontFamily: family, fontSize: 48, fillColor: C.white });
-      this.fontSampleTexts.set(this.key ?? '', t);
-    }
-    t.style.fillColor = this.bgIdx === 0 ? C.black : C.white;
-    t.setPosition(PREVIEW_X + 40, PREVIEW_Y + 120);
-    context.render(t);
-    let t2 = this.fontSampleTexts.get(`${this.key}_sm`);
-    if (!t2) {
-      t2 = new Text('The quick brown fox jumps over the lazy dog', { fontFamily: family, fontSize: 20, fillColor: C.dim });
-      this.fontSampleTexts.set(`${this.key}_sm`, t2);
-    }
-    t2.style.fillColor = this.bgIdx === 0 ? C.dimDark : C.dim;
-    t2.setPosition(PREVIEW_X + 40, PREVIEW_Y + 190);
-    context.render(t2);
-  }
-  drawVideoPreview(context) {
-    this.txtMeta.text = `VIDEO\n\nKey: assets.video.${this.key}\nURL: ${this.assetPath()}\n\nOpen the URL in your browser to preview.`;
-    this.txtMeta.setPosition(PREVIEW_X + 40, PREVIEW_Y + 80);
-    context.render(this.txtMeta);
-  }
-  drawTechPreview(context) {
-    if (!this.key?.includes('.')) {
-      return;
+    live.fillColor = bright;
+    for (let column = 0; column < wave.width; column += 2) {
+      const from = Math.floor((column / wave.width) * signal.length);
+      const to = Math.max(from + 1, Math.floor(((column + 2) / wave.width) * signal.length));
+      let low = 0;
+      let high = 0;
+      for (let index = from; index < to; index += 1) {
+        low = Math.min(low, signal[index]);
+        high = Math.max(high, signal[index]);
+      }
+      live.drawRectangle(wave.left + column, middle - high * scale, 1.5, Math.max(1, (high - low) * scale));
     }
-    const sprite = this.techSprites.get(this.key);
-    if (!sprite) {
+  };
+  const drawPlayhead = () => {
+    playhead.clear();
+    if (!buffer || !voice || voice.ended || !('time' in voice)) {
       return;
     }
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 28, cx, cy - 14);
-    context.render(sprite);
-    const subcat = this.key.split('.')[0];
-    const purpose = TECH_PURPOSE[subcat] ?? '';
-    if (purpose) {
-      this.txtTechPurpose.text = purpose;
-      this.txtTechPurpose.setPosition(PREVIEW_X + 16, PREVIEW_Y + PREVIEW_H - 22);
-      context.render(this.txtTechPurpose);
-    }
-  }
-  drawBgPreview(context) {
-    const sprite = this.bgSprites.get(this.key ?? '');
-    if (!sprite) {
+    // A sprite voice reports its time from the start of its clip.
+    const offset = table && state.clip ? (table[state.clip]?.start ?? 0) : 0;
+    const x = wave.left + ((offset + voice.time) / buffer.duration) * wave.width;
+    playhead.fillColor = Color.white;
+    playhead.drawRectangle(x - 0.75, lane.top, 1.5, wave.height);
+  };
+  caption.setAnchor(0.5).setPosition(PREVIEW_CENTER.x, strip.top + strip.height + 40);
+  drawWaveform();
+  drawLive(null);
+  const target = () => (clips.length > 0 ? playable.sprite(state.clip) : playable);
+  const pausable = candidate => (candidate && 'pause' in candidate && 'resume' in candidate ? candidate : null);
+  const play = () => {
+    const current = pausable(voice);
+    if (current && !current.ended && current.paused) {
+      current.resume();
       return;
     }
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH, cx, cy);
-    context.render(sprite);
-  }
-  drawCursorPreview(context) {
-    const sprite = this.cursorSprites.get(this.key ?? '');
-    if (!sprite) {
+    if (pendingStart || (voice && !voice.ended)) {
       return;
     }
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, Math.min(maxW, 256), Math.min(maxH, 256), cx, cy);
-    context.render(sprite);
-  }
-  drawTilesetPreview(context) {
-    const sprite = this.tilesetSprites.get(this.key ?? '');
-    if (!sprite) {
+    // Runs once audio is usable - at once when it already is, after the
+    // visitor's first gesture otherwise. Removed again by Stop and on switch,
+    // so a start that is still waiting never plays for another selection.
+    pendingStart = () => {
+      pendingStart = null;
+      if (!isCurrent()) {
+        return;
+      }
+      voice = audio.play(target(), { volume: state.volume, loop: state.loop });
+      analyser.source = voice;
+      console.log(`Playing ${item.name}${clips.length > 0 ? ` / ${state.clip}` : ''}`);
+    };
+    audio.onUnlock.add(pendingStart);
+    if (audio.locked) {
+      status?.('Waiting for the browser to allow audio...');
+    }
+  };
+  const stop = () => {
+    if (pendingStart) {
+      audio.onUnlock.remove(pendingStart);
+      pendingStart = null;
+    }
+    voice?.stop();
+    voice = null;
+    analyser.source = null;
+  };
+  return {
+    world: [],
+    overlay: [waveform, playhead, live, caption, ...labels],
+    bounds: null,
+    facts: [
+      ['Kind', music ? 'Music, streamed from an audio element' : 'Sound, decoded into memory'],
+      ['Duration', formatSeconds(playable.duration)],
+      ...(buffer ? [['Channels', channels === 1 ? 'Mono' : channels === 2 ? 'Stereo' : String(channels)]] : []),
+      ...(clips.length > 0 ? [['Clips', clips.join(', ')]] : []),
+    ],
+    mount(host) {
+      const panel = host({
+        title: music ? 'Music' : 'Sound',
+        controls: {
+          ...(clips.length > 0 ? { clip: choice('Clip', clips) } : {}),
+          volume: slider('Volume', { min: 0, max: 1, step: 0.05, value: state.volume, format: volume => `${Math.round(volume * 100)}%` }),
+          loop: toggle('Loop', state.loop),
+        },
+        actions: {
+          Play: play,
+          Pause: () => {
+            const current = pausable(voice);
+            if (current && !current.ended) {
+              current.pause();
+            }
+          },
+          Stop: stop,
+          Code: () => scene.showCode(),
+        },
+        onChange(key, value) {
+          if (key === 'clip') {
+            state.clip = value;
+            stop();
+            drawWaveform();
+          } else if (key === 'volume') {
+            state.volume = value;
+            if (voice) {
+              voice.volume = state.volume;
+            }
+          } else if (key === 'loop') {
+            state.loop = value;
+          }
+        },
+      });
+      status = text => panel.status(text);
+      panel.status('Press Play to listen.');
+    },
+    update() {
+      const current = pausable(voice);
+      const text = pendingStart
+        ? audio.locked
+          ? 'Waiting for the browser to allow audio...'
+          : 'Starting...'
+        : !voice || voice.ended
+          ? 'Stopped'
+          : current?.paused
+            ? 'Paused'
+            : 'Playing';
+      if (text !== reported) {
+        reported = text;
+        status?.(text);
+      }
+      const playing = text === 'Playing' || text === 'Paused';
+      caption.visible = !playing;
+      drawLive(playing ? analyser.getWaveformFloat() : null);
+      drawPlayhead();
+    },
+    snippet: () => audioSnippet(item, { ...state, music, clip: clips.length > 0 ? state.clip : null }),
+    dispose() {
+      stop();
+      status = null;
+      analyser.destroy();
+      waveform.destroy();
+      playhead.destroy();
+      live.destroy();
+      caption.destroy();
+      labels.forEach(text => text.destroy());
+    },
+  };
+};
+const openVideo = async ({ scene, item, scope, manifest, isCurrent }) => {
+  const video = await scope.load(assets[item.key]);
+  const element = video.videoElement;
+  const meta = manifest?.media;
+  const audio = scene.app.audio;
+  const state = { muted: true, loop: true, rate: '1x', zoom: 1 };
+  let pendingStart = null;
+  let panel = null;
+  let syncing = false;
+  let mounted = false;
+  let since = 0;
+  const play = () => {
+    if (pendingStart || video.playing) {
       return;
     }
-    const entry = assets.demo.tilesets[this.key ?? ''];
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 30, cx, cy - 15);
-    context.render(sprite);
-    if (entry?.tileWidth && entry?.tileHeight) {
-      this.txtMeta.text = `tile: ${entry.tileWidth}×${entry.tileHeight}px`;
-      this.txtMeta.setPosition(PREVIEW_X + 16, PREVIEW_Y + PREVIEW_H - 22);
-      context.render(this.txtMeta);
-    }
-  }
-  drawVendorPreview(context) {
-    const data = this.vendorData.get(this.key ?? '');
-    if (!data) {
-      this.txtMeta.text = `Loading: ${this.assetPath()}`;
-      this.txtMeta.setPosition(PREVIEW_X + 30, PREVIEW_Y + 80);
-      context.render(this.txtMeta);
+    // A muted video may start at once; one with sound waits for the gesture.
+    if (video.muted) {
+      video.play();
+      console.log(`Playing ${item.name}`);
       return;
     }
-    const packs = data.packs ?? [];
-    const lines = [
-      `License: ${data.license ?? 'Unknown'}`,
-      `Packs: ${packs.length}`,
-      '',
-      ...packs.slice(0, 14).map(p => `  ${p.slug}  (${Object.values(p.fileCountByExtension ?? {}).reduce((a, b) => a + b, 0)} files)`),
-    ];
-    this.txtMeta.text = lines.join('\n');
-    this.txtMeta.setPosition(PREVIEW_X + 30, PREVIEW_Y + 60);
-    context.render(this.txtMeta);
-  }
-  drawAnimControls(context, frameCount) {
-    if (!this.animG) {
-      this.animG = new Graphics();
-    }
-    const g = this.animG;
-    const bx = PREVIEW_X + 16;
-    const by = H - 48;
-    g.clear();
-    g.fillColor = this.animPlaying ? C.active : C.btnDark;
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawRectangle(bx, by, 88, 30);
-    context.render(g);
-    this.txtAnimPlay.text = this.animPlaying ? '⏸ PAUSE' : '▶ PLAY';
-    this.txtAnimPlay.setPosition(bx + 14, by + 8);
-    context.render(this.txtAnimPlay);
-    this.txtAnimFrame.text = `${(this.frameIdx % frameCount) + 1} / ${frameCount}`;
-    this.txtAnimFrame.setPosition(PREVIEW_X + 112, by + 10);
-    context.render(this.txtAnimFrame);
+    pendingStart = () => {
+      pendingStart = null;
+      if (isCurrent()) {
+        video.play();
+        console.log(`Playing ${item.name} with sound`);
+      }
+    };
+    audio.onUnlock.add(pendingStart);
+  };
+  const cancelStart = () => {
+    if (pendingStart) {
+      audio.onUnlock.remove(pendingStart);
+      pendingStart = null;
+    }
+  };
+  const frameRate = meta?.video?.frameRate?.split('/').map(Number);
+  return {
+    world: [video],
+    overlay: [],
+    bounds: { width: video.width, height: video.height },
+    facts: [
+      ['Resolution', `${element.videoWidth} x ${element.videoHeight}`],
+      ['Duration', formatSeconds(video.duration)],
+      ...(meta?.container ? [['Container', meta.container]] : []),
+      ...(meta?.video?.codec ? [['Video', [meta.video.codec, meta.video.profile].filter(Boolean).join(' ')]] : []),
+      ...(frameRate && frameRate.length === 2
+        ? [['Frame rate', `${(frameRate[0] / frameRate[1]).toFixed(2).replace(/\.00$/, '')} fps`]]
+        : []),
+      ...(meta?.video?.pixelFormat
+        ? [['Pixels', `${meta.video.pixelFormat}${meta.video.bitDepth ? `, ${meta.video.bitDepth}-bit` : ''}`]]
+        : []),
+      ...(meta?.audio?.codec ? [['Audio', `${meta.audio.codec}, ${meta.audio.channels ?? '?'} ch`]] : [['Audio', 'none']]),
+      // The file's dynamic range is metadata; the preview renders it through
+      // the regular canvas pipeline either way.
+      ...(meta?.dynamicRange ? [['Dynamic range', `${meta.dynamicRange} (file metadata)`]] : []),
+    ],
+    mount(host) {
+      const duration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : 1;
+      const handle = host({
+        title: 'Video',
+        controls: {
+          zoom: zoomSlider(),
+          position: slider('Position', { min: 0, max: duration, step: duration / 200, value: 0, format: formatSeconds }),
+          muted: toggle('Muted', state.muted),
+          loop: toggle('Loop', state.loop),
+          rate: choice('Speed', ['0.5x', '1x', '2x'], state.rate),
+        },
+        actions: {
+          Play: play,
+          Pause: () => {
+            cancelStart();
+            video.pause();
+          },
+          Stop: () => {
+            cancelStart();
+            video.stop();
+          },
+          Fit: () => scene.fit(),
+          Code: () => scene.showCode(),
+        },
+        onChange(key, value) {
+          if (key === 'zoom') {
+            state.zoom = value;
+            scene.setZoom(value);
+          } else if (key === 'position' && !syncing) {
+            video.currentTime = value;
+          } else if (key === 'muted') {
+            state.muted = value;
+            video.muted = state.muted;
+          } else if (key === 'loop') {
+            state.loop = value;
+            video.loop = state.loop;
+          } else if (key === 'rate') {
+            state.rate = value;
+            video.playbackRate = Number.parseFloat(state.rate);
+          }
+        },
+      });
+      panel = handle;
+      mounted = true;
+      video.applyOptions({ loop: state.loop, muted: state.muted });
+      video.pause();
+      scene.bindZoom(handle);
+      handle.status('Press Play to start.');
+    },
+    update(delta) {
+      since += delta;
+      if (panel && since >= 0.25) {
+        since = 0;
+        syncing = true;
+        panel.set('position', video.currentTime);
+        syncing = false;
+        panel.status(pendingStart ? 'Waiting for the browser to allow audio...' : video.playing ? 'Playing' : 'Paused');
+      }
+    },
+    snippet: () => videoSnippet(item, state),
+    dispose() {
+      cancelStart();
+      panel = null;
+      // The video belongs to the scope and may be shared with a newer preview
+      // of the same asset, so only a preview that was mounted pauses it.
+      if (mounted) {
+        video.pause();
+      }
+    },
+  };
+};
+const measureContext = document.createElement('canvas').getContext('2d');
+const measureWidth = (text, font) => {
+  if (!measureContext) {
+    return text.length * 0.6 * Number.parseFloat(font);
   }
+  measureContext.font = font;
+  return measureContext.measureText(text).width;
+};
+const SAMPLE_TEXT = 'The quick brown fox jumps over the lazy dog';
+const openFont = async ({ scene, item, scope }) => {
+  const descriptor = assets[item.key];
+  const bitmap = descriptor.type === 'bmFont';
+  const font = bitmap ? await scope.load(descriptor) : null;
+  const face = bitmap ? null : await scope.load(descriptor);
+  const family = face ? face.family.replaceAll('"', '') : '';
+  const state = { text: SAMPLE_TEXT, size: 40, color: 'White' };
+  const colors = { White: Color.white, Gold: new Color(255, 214, 102), Ink: new Color(28, 32, 44) };
+  const lines = [];
+  const preview = {
+    world: [],
+    overlay: [],
+    bounds: null,
+    facts: bitmap
+      ? [['Kind', 'Bitmap font (.fnt with page textures)']]
+      : [
+          ['Family', family],
+          ['Kind', 'Font face, registered with the document'],
+        ],
+    mount(host) {
+      const panel = host({
+        title: 'Font',
+        controls: {
+          size: slider('Size', { min: 10, max: 120, step: 2, value: state.size, format: size => `${size}px` }),
+          color: choice('Colour', ['White', 'Gold', 'Ink']),
+        },
+        actions: { Code: () => scene.showCode() },
+        onChange(key, value) {
+          if (key === 'size') {
+            state.size = value;
+          } else {
+            state.color = value;
+            scene.setBackdrop(state.color === 'Ink' ? new Color(236, 239, 244) : new Color(32, 37, 50));
+          }
+          layout();
+        },
+      });
+      const input = document.createElement('textarea');
+      input.value = state.text;
+      input.rows = 2;
+      input.setAttribute('aria-label', 'Preview text');
+      Object.assign(input.style, {
+        width: '100%',
+        boxSizing: 'border-box',
+        marginTop: '8px',
+        padding: '6px 8px',
+        borderRadius: '8px',
+        border: '1px solid rgba(154, 193, 255, 0.32)',
+        background: 'rgba(154, 193, 255, 0.08)',
+        color: 'inherit',
+        font: `13px ${FONT}`,
+        resize: 'vertical',
+      });
+      input.addEventListener('input', () => {
+        state.text = input.value;
+        layout();
+      });
+      input.addEventListener('change', () => console.log(`Preview text: "${input.value}"`));
+      panel.element.append(input);
+    },
+    snippet: () => fontSnippet(item, { ...state, bitmap }),
+    dispose() {
+      for (const line of lines) {
+        line.destroy();
+      }
+    },
+  };
+  const layout = () => {
+    for (const line of lines.splice(0)) {
+      line.destroy();
+    }
+    const sizes = [state.size, Math.round(state.size * 0.6), Math.round(state.size * 0.4)];
+    let y = 60;
+    for (const size of sizes) {
+      const line = font
+        ? new BitmapText(state.text, font).setScale(size / 32)
+        : new Text(state.text, { fontFamily: family, fontSize: size, fillColor: colors[state.color], maxWidth: PREVIEW.width - 64 });
+      // Text lays out lazily, so the number of wrapped lines is measured with
+      // the same font on a scratch 2D context rather than read back.
+      const wrapped = font ? 1 : Math.ceil(measureWidth(state.text, `${size}px "${family}"`) / (PREVIEW.width - 64)) + 0.2;
+      line.setPosition(PREVIEW.x + 32, y);
+      lines.push(line);
+      y += wrapped * size * 1.3 + 28;
+    }
+    preview.overlay.splice(0, preview.overlay.length, ...lines);
+  };
+  layout();
+  return preview;
+};
+const openData = async ({ scene, item, scope }) => {
+  const data = await scope.load(assets[item.key]);
+  return {
+    world: [],
+    overlay: [],
+    bounds: null,
+    facts: [['Kind', 'JSON document']],
+    mount(host) {
+      host({ title: 'Data', controls: {}, actions: { Data: () => void scene.showData(), Code: () => scene.showCode() } });
+      void scene.showData();
+    },
+    snippet: () => dataSnippet(item),
+    data: () => Promise.resolve(data),
+    dispose() {
+      // Nothing to release beyond the scope.
+    },
+  };
+};
+// --- Snippets ---------------------------------------------------------------
+//
+// Each snippet is a complete module: imports, one scene and the application,
+// using only public ExoJS APIs and the demo catalog.
+const round = (value, digits = 2) => Number(value.toFixed(digits));
+const program = (
+  imports,
+  body,
+  options = {},
+) => `${[...imports, "import { demoAssets as assets } from '@codexo/exojs-demo-assets';"].sort().join('\n')}
+
+class PreviewScene extends Scene {
+${body}
+}
+
+const app = new Application({
+  scenes: { PreviewScene },
+  canvas: { width: 1280, height: 720, mount: document.body },${options.extensions ? `\n  extensions: [${options.extensions}],` : ''}
+});
+
+await app.start(PreviewScene);
+`;
+const textureSnippet = (item, state) => {
+  const svg = assets[item.key].type === 'svg';
+  const scale = round(state.zoom);
+  const names = [
+    'Application',
+    'Scene',
+    'Sprite',
+    ...(svg ? ['Texture'] : []),
+    ...(state.nearest ? (svg ? ['ScaleModes'] : ['Asset', 'ScaleModes']) : []),
+  ].sort();
+  const load = svg
+    ? `    // An SVG loads as an image; the texture over it is yours to destroy.
+    const image = await this.loader.load(assets.${item.key});
+    const texture = new Texture(image${state.nearest ? ', { scaleMode: ScaleModes.Nearest }' : ''});`
+    : state.nearest
+      ? `    // Sampling is part of the texture handle, chosen when it is loaded.
+    const texture = await this.loader.load(
+      Asset.type('texture', assets.${item.key}.source, { textureOptions: { scaleMode: ScaleModes.Nearest } }),
+    );`
+      : `    const texture = await this.loader.load(assets.${item.key});`;
+  return program(
+    [`import { ${names.join(', ')} } from '@codexo/exojs';`],
+    `  override async load(): Promise<void> {
+${load}
+    const sprite = new Sprite(texture).setAnchor(0.5).setScale(${scale}).setPosition(640, 360);
+
+    this.addChild(sprite);
+  }`,
+  );
+};
+const spritesheetSnippet = (item, state) => {
+  const named = state.animation !== 'Frame range';
+  const frames = named
+    ? `sheet.getAnimationFrameNames(${JSON.stringify(state.animation)}).map(name => sheet.getFrame(name))`
+    : `[${state.frames.map(name => JSON.stringify(name)).join(', ')}].map(name => sheet.getFrame(name))`;
+  return program(
+    ["import { AnimatedSprite, Application, Scene, Spritesheet } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const [texture, data] = await Promise.all([this.loader.load(assets.${item.key}), this.loader.load(assets.${item.atlasKey})]);
+    const sheet = new Spritesheet(texture, data);
+    const sprite = new AnimatedSprite(texture, {
+      preview: { frames: ${frames}, fps: ${state.fps}, repeat: ${state.loop ? -1 : 1} },
+    });
+
+    sprite.setAnchor(0.5).setScale(${round(state.scale)}).setPosition(640, 360);
+    this.addChild(sprite);
+    sprite.play('preview');
+  }`,
+  );
+};
+const mapSnippet = (item, state) =>
+  state.ldtk
+    ? program(
+        [
+          "import { Application, Asset, Scene } from '@codexo/exojs';",
+          "import { TileMapNode } from '@codexo/exojs/tilemap';",
+          "import { ldtkExtension } from '@codexo/exojs-ldtk';",
+        ],
+        `  override async load(): Promise<void> {
+    // Tileset paths resolve against the world's URL, so load it from the catalog's absolute source.
+    const world = await this.loader.load(Asset.type('ldtkMap', assets.${item.key}.source));
+    const level = world.getLevelByName(${JSON.stringify(state.level)}) ?? world.levels[0]!;
+
+    this.addChild(new TileMapNode(level).setScale(${round(state.zoom)}));
+  }`,
+        { extensions: 'ldtkExtension' },
+      )
+    : program(
+        [
+          "import { Application, Asset, Scene } from '@codexo/exojs';",
+          "import { TileMapNode } from '@codexo/exojs/tilemap';",
+          "import { tiledExtension } from '@codexo/exojs-tiled';",
+        ],
+        `  override async load(): Promise<void> {
+    // Tileset images resolve against the map's URL, so load it from the catalog's absolute source.
+    const map = await this.loader.load(Asset.type('tileMap', assets.${item.key}.source));
+
+    this.addChild(new TileMapNode(map).setScale(${round(state.zoom)}));
+  }`,
+        { extensions: 'tiledExtension' },
+      );
+const audioSnippet = (item, state) =>
+  program(
+    ["import { Application, Scene } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const ${state.music ? 'music' : 'sound'} = await this.loader.load(assets.${item.key});
+
+    // Browsers keep audio locked until the first click or key press;
+    // onUnlock runs the handler as soon as playback is allowed.
+    this.app.audio.onUnlock.add(() => {
+      this.app.audio.play(${state.music ? 'music' : state.clip ? `sound.sprite(${JSON.stringify(state.clip)})` : 'sound'}, { volume: ${round(state.volume)}, loop: ${state.loop} });
+    });
+  }`,
+  );
+const videoSnippet = (item, state) =>
+  program(
+    ["import { Application, Scene } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const video = await this.loader.load(assets.${item.key});
+
+    video.applyOptions({ loop: ${state.loop}, muted: ${state.muted}, playbackRate: ${Number.parseFloat(state.rate)} });
+    video.setAnchor(0.5).setScale(${round(state.zoom)}).setPosition(640, 360);
+    this.addChild(video);
+${
+  state.muted
+    ? '    // A muted video may start without a user gesture.\n    video.play();'
+    : '    // With sound, playback waits for the gesture that unlocks audio.\n    this.app.audio.onUnlock.add(() => video.play());'
 }
+  }`,
+  );
+const fontSnippet = (item, state) =>
+  state.bitmap
+    ? program(
+        ["import { Application, BitmapText, Scene } from '@codexo/exojs';"],
+        `  override async load(): Promise<void> {
+    const font = await this.loader.load(assets.${item.key});
+
+    this.addChild(new BitmapText(${JSON.stringify(state.text)}, font).setScale(${round(state.size / 32)}).setPosition(40, 60));
+  }`,
+      )
+    : program(
+        ["import { Application, Color, Scene, Text } from '@codexo/exojs';"],
+        `  override async load(): Promise<void> {
+    // Loading a font registers its face with the document.
+    const face = await this.loader.load(assets.${item.key});
+    const text = new Text(${JSON.stringify(state.text)}, {
+      fontFamily: face.family.replaceAll('"', ''),
+      fontSize: ${state.size},
+      fillColor: Color.white,
+    });
+
+    this.addChild(text.setPosition(40, 60));
+  }`,
+      );
+const dataSnippet = item =>
+  program(
+    ["import { Application, Scene } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const data = await this.loader.load(assets.${item.key});
+
+    console.log(Object.keys(data as object));
+  }`,
+  );
 const app = new Application({
   scenes: { AssetBrowserScene },
-  canvas: { width: W, height: H, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
-  clearColor: C.bg,
+  canvas: { width: STAGE.width, height: STAGE.height, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
+  clearColor: new Color(32, 37, 50),
+  extensions: [tiledExtension, ldtkExtension],
 });
 await app.start(AssetBrowserScene);
diff --git a/examples/debug-layer/asset-browser.ts b/examples/debug-layer/asset-browser.ts
index 87c780406..51c6dfc56 100644
--- a/examples/debug-layer/asset-browser.ts
+++ b/examples/debug-layer/asset-browser.ts
@@ -1,1387 +1,2009 @@
-import { Asset, FixedResolutionCanvasSizing } from '@codexo/exojs';
 import {
+  AnimatedSprite,
   Application,
+  Asset,
   type AudioStream,
+  BitmapText,
+  type BmFont,
   Color,
+  FixedResolutionCanvasSizing,
   Graphics,
-  type Pausable,
+  type LoaderScope,
+  type Rectangle,
   type RenderingContext,
+  type RenderNode,
+  ScaleModes,
   Scene,
   type Seconds,
-  type Seekable,
+  type Sound,
   Sprite,
   Spritesheet,
   type SpritesheetData,
   Text,
   Texture,
+  View,
   type Voice,
 } from '@codexo/exojs';
-
-// Dynamic category accessor: maps a category key to the correct sub-object
-// in the hierarchical assets catalog. Technical assets live under
-// assets.technical; everything else is under assets.demo.
-const getCategoryData = (catKey: string): Record<string, unknown> => {
-  if (catKey === 'technical') {
-    return assets.technical as unknown as Record<string, unknown>;
-  }
-
-  return (assets.demo as unknown as Record<string, Record<string, unknown>>)[catKey] ?? {};
-};
-
-// Catalog entries are heterogeneous by category, and `getCategoryData` hands
-// them back as `unknown` because the key is dynamic. These name the two shapes
-// the loading paths below actually read.
-interface ImagePairEntry {
-  image: string;
-  data: string;
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { ObjectKind, type TileMap, TileMapNode } from '@codexo/exojs/tilemap';
+import { demoAssetCategories, type DemoAssetCategory, type DemoAssetKey, demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { ldtkExtension } from '@codexo/exojs-ldtk';
+import { tiledExtension } from '@codexo/exojs-tiled';
+import { choice, type DemoControlSpec, demoPanel, slider, toggle } from '@examples/runtime';
+
+// An asset browser for the standard demo catalog. It is an ordinary scene:
+//
+//   - The list is derived from `demoAssets` and `demoAssetCategories`; nothing
+//     is fetched until an entry is selected.
+//   - Every selection loads into a child `LoaderScope` of the scene. Selecting
+//     something else destroys that scope, which cancels a load still in flight
+//     and frees what it held - unless another scope holds the same asset.
+//   - Each selection carries a generation number. A load that settles after a
+//     newer selection is discarded before it can show, play or log anything.
+//   - Nothing plays on selection. Play goes through `app.audio.onUnlock`, which
+//     waits for the browser's autoplay gesture and is cancelled on switch.
+//   - "Code" turns the current preview settings into a complete scene.
+
+const STAGE = { width: 1280, height: 720 };
+const SIDEBAR_WIDTH = 272;
+const INSPECTOR_WIDTH = 332;
+const PREVIEW = { x: SIDEBAR_WIDTH, y: 0, width: STAGE.width - SIDEBAR_WIDTH - INSPECTOR_WIDTH, height: STAGE.height };
+const PREVIEW_CENTER = { x: PREVIEW.x + PREVIEW.width / 2, y: PREVIEW.height / 2 };
+const FONT = '"Segoe UI", system-ui, sans-serif';
+const MONO = '"JetBrains Mono", ui-monospace, monospace';
+const MANIFEST_URL = import.meta.resolve('@codexo/exojs-demo-assets/manifest.json');
+
+type Group = 'Textures' | 'Spritesheets' | 'Maps' | 'Audio' | 'Video' | 'Fonts' | 'Data';
+type Kind = 'texture' | 'svg' | 'spritesheet' | 'tiled' | 'ldtk' | 'sound' | 'music' | 'video' | 'font' | 'bmFont' | 'data';
+
+interface BrowserItem {
+  readonly id: string;
+  readonly name: string;
+  readonly group: Group;
+  readonly kind: Kind;
+  readonly key: DemoAssetKey;
+  /** The atlas JSON of a spritesheet; `key` is its image. */
+  readonly atlasKey?: DemoAssetKey;
 }
 
-interface AudioPairEntry {
-  audio: string;
-  data: string;
+/** The fields of the package's `manifest.json` this browser reads. */
+interface DemoManifest {
+  readonly entries: ReadonlyArray<{
+    readonly key: string;
+    readonly bytes: number;
+    readonly path: string;
+    readonly media?: {
+      readonly container?: string;
+      readonly durationSeconds?: number;
+      readonly dynamicRange?: string;
+      readonly video?: {
+        codec?: string;
+        profile?: string;
+        width?: number;
+        height?: number;
+        frameRate?: string;
+        pixelFormat?: string;
+        bitDepth?: number;
+      };
+      readonly audio?: { codec?: string; sampleRate?: number; channels?: number };
+    };
+  }>;
 }
 
-interface SoundSpriteData {
-  sprites: Record<string, { start: number; duration: number }>;
-}
+const GROUP_OF: Record<DemoAssetCategory, Group> = {
+  textures: 'Textures',
+  technical: 'Textures',
+  backgrounds: 'Textures',
+  icons: 'Textures',
+  cursors: 'Textures',
+  spritesheets: 'Spritesheets',
+  inputPrompts: 'Spritesheets',
+  maps: 'Maps',
+  sound: 'Audio',
+  soundSprites: 'Audio',
+  music: 'Audio',
+  voice: 'Audio',
+  impulseResponses: 'Audio',
+  video: 'Video',
+  fonts: 'Fonts',
+};
+const GROUP_ORDER: readonly Group[] = ['Textures', 'Spritesheets', 'Maps', 'Audio', 'Video', 'Fonts', 'Data'];
+const GROUP_GLYPH: Record<Kind, string> = {
+  texture: 'IMG',
+  svg: 'SVG',
+  spritesheet: 'ATL',
+  tiled: 'MAP',
+  ldtk: 'MAP',
+  sound: 'SND',
+  music: 'MUS',
+  video: 'VID',
+  font: 'TTF',
+  bmFont: 'FNT',
+  data: '{ }',
+};
 
-// Union of the tileset catalog entry shapes - every entry declares
-// tileWidth/tileHeight even though only some also carry `data`.
-type TilesetEntry = (typeof assets.demo.tilesets)[keyof typeof assets.demo.tilesets];
+const humanize = (key: string): string => {
+  const words = key
+    .replace(/^(sound|music|font)(?=[A-Z])/, '')
+    .replace(/([a-z])([A-Z0-9])/g, '$1 $2')
+    .toLowerCase();
 
-// Shape of the vendor pack manifest JSON files loaded per `vendor/*.json` key.
-interface VendorPack {
-  slug: string;
-  fileCountByExtension?: Record<string, number>;
-}
+  return words.charAt(0).toUpperCase() + words.slice(1);
+};
 
-interface VendorManifest {
-  license?: string;
-  packs?: VendorPack[];
-}
+const kindOf = (key: DemoAssetKey): Kind => {
+  const descriptor = assets[key];
+
+  switch (descriptor.type) {
+    case 'texture':
+    case 'svg':
+    case 'sound':
+    case 'music':
+    case 'video':
+    case 'font':
+    case 'bmFont':
+      return descriptor.type as Kind;
+    case 'json':
+      if (demoAssetCategories[key] !== 'maps') {
+        return 'data';
+      }
 
-const W = 1280;
-const H = 720;
-const TOOLBAR_H = 110;
-const SIDEBAR_W = 220;
-const ITEM_H = 36;
-const LIST_Y = TOOLBAR_H + 4;
-const PREVIEW_X = SIDEBAR_W;
-const PREVIEW_Y = TOOLBAR_H;
-const PREVIEW_W = W - SIDEBAR_W;
-const PREVIEW_H = H - TOOLBAR_H;
-
-const CAT_BTN_W = 82;
-const CAT_BTN_H = 38;
-const CAT_BTN_Y1 = 6;
-const CAT_BTN_Y2 = 58;
-const CAT_BTN_X0 = 6;
-
-const BG_BTN_SIZE = 26;
-const BG_BTN_Y = 16;
-const BG_BTN_X0 = W - 3 * (BG_BTN_SIZE + 5) - 6;
-
-const CATEGORIES_ROW1 = [
-  { id: 'textures', label: 'IMG', catKey: 'textures' },
-  { id: 'sprites', label: 'SPR', catKey: 'sprites' },
-  { id: 'audio', label: 'AUD', catKey: 'audio' },
-  { id: 'svg', label: 'SVG', catKey: 'svg' },
-  { id: 'fonts', label: 'FNT', catKey: 'fonts' },
-  { id: 'video', label: 'VID', catKey: 'video' },
-  { id: 'inputPrompts', label: 'INP', catKey: 'inputPrompts' },
-  { id: 'technical', label: 'TECH', catKey: 'technical' },
-];
-
-const CATEGORIES_ROW2 = [
-  { id: 'sound', label: 'SND', catKey: 'sound' },
-  { id: 'music', label: 'MUS', catKey: 'music' },
-  { id: 'soundSprites', label: 'SDS', catKey: 'soundSprites' },
-  { id: 'spritesheets', label: 'SSH', catKey: 'spritesheets' },
-  { id: 'tilesets', label: 'TLS', catKey: 'tilesets' },
-  { id: 'backgrounds', label: 'BGS', catKey: 'backgrounds' },
-  { id: 'cursors', label: 'CSR', catKey: 'cursors' },
-  { id: 'vendor', label: 'VND', catKey: 'vendor' },
-];
-
-const CATEGORIES = [...CATEGORIES_ROW1, ...CATEGORIES_ROW2];
-
-const TECH_PURPOSE: Record<string, string> = {
-  alpha: 'alpha / premultiplied / halo checks',
-  filtering: 'nearest / linear / sampler checks',
-  color: 'ramp / gamma / color-shift checks',
+      return descriptor.source.endsWith('.ldtk') ? 'ldtk' : 'tiled';
+    default:
+      return 'data';
+  }
 };
 
-const BG_OPTIONS = [
-  { label: 'W', r: 255, g: 255, b: 255 },
-  { label: 'G', r: 45, g: 50, b: 65 },
-  { label: 'K', r: 0, g: 0, b: 0 },
-];
-
-const C = {
-  bg: new Color(26, 28, 38),
-  toolbar: new Color(30, 34, 46),
-  panel: new Color(32, 36, 48),
-  active: new Color(58, 120, 218),
-  hover: new Color(44, 50, 66),
-  border: new Color(52, 58, 76),
-  infoBar: new Color(18, 22, 32),
-  btnDark: new Color(44, 52, 72),
-  btnGreen: new Color(55, 150, 75),
-  white: new Color(255, 255, 255),
-  dim: new Color(140, 150, 170),
-  dimDark: new Color(90, 98, 120),
-  accent: new Color(100, 180, 255),
-  black: new Color(0, 0, 0),
-};
+/** An atlas JSON and its image are separate descriptors named `<name>Atlas` and `<name>Image`; the browser lists them as one spritesheet. */
+const buildItems = (): BrowserItem[] => {
+  const items: BrowserItem[] = [];
 
-class AssetBrowserScene extends Scene {
-  cat = 'textures';
-  key: string | null = null;
-  bgIdx = 1;
-  scrollOff = 0;
-  hoverIdx: number | null = null;
-
-  audioMusics = new Map<string, AudioStream>();
-  soundMusics = new Map<string, AudioStream>();
-  musicMusics = new Map<string, AudioStream>();
-  soundSpriteAudio = new Map<string, AudioStream>();
-
-  // Single-asset preview playback: one Voice at a time, tied to `previewKey`.
-  private previewVoice: (Voice & Pausable & Seekable) | null = null;
-  private previewKey: string | null = null;
-
-  frameIdx = 0;
-  frameTimer = 0;
-  animPlaying = true;
-
-  texSprites = new Map<string, Sprite>();
-  sprSheets = new Map<string, Spritesheet>();
-  sshSheets = new Map<string, Spritesheet>();
-  svgSprites = new Map<string, Sprite>();
-  inpSheets = new Map<string, Spritesheet>();
-  fontFamilies = new Map<string, string>();
-  techSprites = new Map<string, Sprite>();
-  bgSprites = new Map<string, Sprite>();
-  cursorSprites = new Map<string, Sprite>();
-  tilesetSprites = new Map<string, Sprite>();
-  soundSpriteData = new Map<string, SoundSpriteData>();
-  vendorData = new Map<string, VendorManifest>();
-
-  animG: Graphics | null = null;
-  audioG: Graphics | null = null;
-  copyBtnBg: Graphics | null = null;
-  fontSampleTexts = new Map<string, Text>();
-
-  gToolbar = new Graphics();
-  gSidebar = new Graphics();
-  gPreview = new Graphics();
-  gInfoBar = new Graphics();
-
-  catBtnTexts = CATEGORIES.map(() => new Text('', { fillColor: C.white, fontSize: 11, fontWeight: 'bold' }));
-  bgBtnTexts = BG_OPTIONS.map(() => new Text('', { fillColor: C.dim, fontSize: 11, fontWeight: 'bold' }));
-
-  txtKey = new Text('', { fillColor: C.white, fontSize: 12, fontWeight: 'bold' });
-  txtPath = new Text('', { fillColor: C.dim, fontSize: 11 });
-  txtType = new Text('', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' });
-  txtCopy = new Text('COPY KEY', { fillColor: C.white, fontSize: 10 });
-
-  itemTexts = Array.from({ length: 22 }, () => new Text('', { fillColor: C.white, fontSize: 13 }));
-
-  techHeaderTexts = new Map<string, Text>([
-    ['alpha', new Text('ALPHA', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' })],
-    ['filtering', new Text('FILTERING', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' })],
-    ['color', new Text('COLOR', { fillColor: C.accent, fontSize: 10, fontWeight: 'bold' })],
-  ]);
+  for (const key of Object.keys(demoAssetCategories) as DemoAssetKey[]) {
+    const base = key.replace(/(Atlas|Image)$/, '');
+    const image = `${base}Image` as DemoAssetKey;
+    const atlas = `${base}Atlas` as DemoAssetKey;
 
-  txtTechPurpose = new Text('', { fillColor: C.dim, fontSize: 11 });
-
-  txtNoAssets = new Text('globalThis.assets is not available.\nRun this example in the ExoJS playground.', {
-    fillColor: C.dim,
-    fontSize: 16,
-  });
-  txtEmptyCat = new Text('(empty)', { fillColor: C.dimDark, fontSize: 13 });
-  txtNoSel = new Text('Select an asset from the list.', { fillColor: C.dimDark, fontSize: 14 });
-  txtLoading = new Text('Loading assets…', { fillColor: C.dim, fontSize: 14 });
-  txtMeta = new Text('', { fillColor: C.white, fontSize: 13, maxWidth: PREVIEW_W - 80 });
-  txtAudioIcon = new Text('', { fillColor: C.white, fontSize: 28 });
-  txtAnimPlay = new Text('', { fillColor: C.white, fontSize: 12 });
-  txtAnimFrame = new Text('', { fillColor: C.dim, fontSize: 11 });
-
-  // Lazy per-category loading: only the initial category is fetched up
-  // front; every other one loads on first visit (see ensureCategory), so
-  // the browser becomes interactive quickly instead of downloading the
-  // whole catalog before the first frame.
-  private assetLoader!: Scene['loader'];
-  loadedCats = new Set<string>();
-  loadingCats = new Set<string>();
+    if (base !== key && image in assets && atlas in assets) {
+      if (key === image) {
+        items.push({ id: base, name: humanize(base), group: 'Spritesheets', kind: 'spritesheet', key: image, atlasKey: atlas });
+      }
 
-  override async load(): Promise<void> {
-    const app = this.app;
-    this.assetLoader = this.loader;
-    await this.ensureCategory(this.cat);
+      continue;
+    }
 
-    app.input.onPointerTap.add(p => this.onTap(p.x, p.y));
-    app.input.onPointerMove.add(p => this.onMove(p.x, p.y));
-    app.input.onMouseWheel.add((_deltaX, deltaY) => this.onWheel(deltaY));
+    const kind = kindOf(key);
 
-    this.selectFirstInCategory();
+    items.push({ id: key, name: humanize(key), group: kind === 'data' ? 'Data' : GROUP_OF[demoAssetCategories[key]], kind, key });
   }
 
-  /** Load a category's assets (and build its preview objects) exactly once. */
-  private async ensureCategory(catId: string): Promise<void> {
-    if (this.loadedCats.has(catId) || this.loadingCats.has(catId)) {
-      return;
-    }
-
-    this.loadingCats.add(catId);
+  return items;
+};
 
-    try {
-      await this.loadCategory(catId);
-      this.loadedCats.add(catId);
-    } finally {
-      this.loadingCats.delete(catId);
-    }
-  }
+const ITEMS = buildItems();
+const GROUPS = GROUP_ORDER.filter(group => ITEMS.some(item => item.group === group));
+
+const fileName = (source: string): string => decodeURIComponent(source.slice(source.lastIndexOf('/') + 1));
+const formatBytes = (bytes: number): string =>
+  bytes < 1024 ? `${bytes} B` : bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+const formatSeconds = (value: number): string => (Number.isFinite(value) ? `${value.toFixed(2)} s` : 'unknown');
+const isAbort = (error: unknown): boolean => error instanceof DOMException && error.name === 'AbortError';
+
+/** What the scene hands a preview: the selection's own scope and a way to ask whether it is still the current one. */
+interface PreviewContext {
+  readonly scene: AssetBrowserScene;
+  readonly item: BrowserItem;
+  readonly scope: LoaderScope;
+  readonly manifest: DemoManifest['entries'][number] | undefined;
+  isCurrent(): boolean;
+}
 
-  private async loadCategory(catId: string): Promise<void> {
-    const loader = this.assetLoader;
-
-    // Every category below fetches its assets by real (dynamic, non-literal)
-    // path via `Asset.type(type, path)` + `load()` - the old alias-keyed batch-record form
-    // (`load(Type, { alias: path })` + `get(Type, alias)`) is gone; there is no
-    // alias indirection to reconstruct, so each item is loaded directly and its
-    // resolved handle/value is stored under the catalog's own key.
-    switch (catId) {
-      case 'textures': {
-        await Promise.all(
-          Object.entries(assets.demo.textures ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(await loader.load(Asset.type('texture', url as string)));
-            s.setAnchor(0.5);
-            this.texSprites.set(k, s);
-          }),
-        );
-        break;
-      }
+/** What the scene asks of a preview once its assets are loaded. */
+interface Preview {
+  /** Content drawn through the pan-and-zoom camera; its top-left is the world origin. */
+  readonly world: RenderNode[];
+  /** Content drawn in canvas pixels above the world. */
+  readonly overlay: RenderNode[];
+  /** The size of the world content, for fitting it into view; `null` when nothing pans. */
+  readonly bounds: { readonly width: number; readonly height: number } | null;
+  readonly facts: ReadonlyArray<readonly [string, string]>;
+  /** Mounts the controls. Runs only for the current selection, after every load settled. */
+  mount(panel: PanelHost): void;
+  update?(delta: Seconds): void;
+  /** A tap on the world content, in world coordinates. */
+  tap?(x: number, y: number): void;
+  snippet(): string;
+  /** Loads the raw JSON behind the preview, for the Data view. */
+  data?(): Promise<unknown>;
+  /** Stops playback and destroys what the preview created; loaded assets belong to the scope. */
+  dispose(): void;
+}
 
-      case 'sprites': {
-        await Promise.all(
-          Object.entries(assets.demo.sprites ?? {}).map(async ([k, entry]) => {
-            const [tex, data] = await Promise.all([
-              loader.load(Asset.type('texture', (entry as ImagePairEntry).image)),
-              loader.load(Asset.type<SpritesheetData>('json', (entry as ImagePairEntry).data)),
-            ]);
-            const ss = new Spritesheet(tex, data);
-            this.sprSheets.set(k, ss);
-
-            for (const s of ss.sprites.values()) {
-              s.setAnchor(0.5);
-            }
-          }),
-        );
-        break;
-      }
+/** Mounts a preview's control panel inside the inspector column. */
+type PanelHost = <const C extends Record<string, DemoControlSpec>>(
+  options: Parameters<typeof demoPanel<C>>[0],
+) => ReturnType<typeof demoPanel<C>>;
 
-      case 'spritesheets': {
-        await Promise.all(
-          Object.entries(assets.demo.spritesheets ?? {}).map(async ([k, entry]) => {
-            const [tex, data] = await Promise.all([
-              loader.load(Asset.type('texture', (entry as ImagePairEntry).image)),
-              loader.load(Asset.type<SpritesheetData>('json', (entry as ImagePairEntry).data)),
-            ]);
-            const ss = new Spritesheet(tex, data);
-            this.sshSheets.set(k, ss);
-
-            for (const s of ss.sprites.values()) {
-              s.setAnchor(0.5);
-            }
-          }),
-        );
-        break;
-      }
+class AssetBrowserScene extends Scene {
+  private readonly sidebar = document.createElement('nav');
+  private readonly search = document.createElement('input');
+  private readonly tabs = document.createElement('div');
+  private readonly list = document.createElement('ul');
+  private readonly inspector = document.createElement('aside');
+  private readonly heading = document.createElement('h2');
+  private readonly facts = document.createElement('dl');
+  private readonly panelSlot = document.createElement('div');
+  private readonly resident = document.createElement('details');
+  private readonly codePanel = document.createElement('section');
+  private readonly codeTitle = document.createElement('strong');
+  private readonly code = document.createElement('pre');
+  private readonly buttons = new Map<string, HTMLButtonElement>();
+
+  private readonly view = new View(STAGE.width / 2, STAGE.height / 2, STAGE.width, STAGE.height);
+  private readonly frame = new Graphics();
+  private readonly message = new Text('', { fontSize: 22, fillColor: new Color(200, 214, 236), align: 'center' });
+  private backdrop = new Color(32, 37, 50);
+
+  private group: Group = GROUPS[0]!;
+  private selected: BrowserItem | null = null;
+  private generation = 0;
+  private scope: LoaderScope | null = null;
+  private preview: Preview | null = null;
+  private panel: { dispose(): void } | null = null;
+  private manifest = new Map<string, DemoManifest['entries'][number]>();
+  private drag: { x: number; y: number; moved: boolean } | null = null;
+  private zoomTarget: { set(key: 'zoom', value: number): void } | null = null;
+  private destroyed = false;
 
-      case 'svg': {
-        await Promise.all(
-          Object.entries(assets.demo.svg ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(new Texture(await loader.load(Asset.type('svg', url as string))));
-            s.setAnchor(0.5);
-            this.svgSprites.set(k, s);
-          }),
-        );
-        break;
-      }
+  override async load(): Promise<void> {
+    // The package's manifest carries byte sizes and media metadata. It is
+    // optional here: without it the inspector only shows what loading tells.
+    try {
+      const manifest = await this.loader.load(Asset.type<DemoManifest>('json', MANIFEST_URL));
 
-      case 'inputPrompts': {
-        await Promise.all(
-          Object.entries(assets.demo.inputPrompts ?? {}).map(async ([k, entry]) => {
-            const [tex, data] = await Promise.all([
-              loader.load(Asset.type('texture', (entry as ImagePairEntry).image)),
-              loader.load(Asset.type<SpritesheetData>('json', (entry as ImagePairEntry).data)),
-            ]);
-            const ss = new Spritesheet(tex, data);
-            this.inpSheets.set(k, ss);
-
-            for (const s of ss.sprites.values()) {
-              s.setAnchor(0.5);
-            }
-          }),
-        );
-        break;
-      }
+      this.manifest = new Map(manifest.entries.map(entry => [entry.key, entry]));
+    } catch (error) {
+      console.warn('The demo asset manifest is unavailable; sizes and media details are hidden.', error);
+    }
+  }
 
-      case 'audio': {
-        await Promise.all(
-          Object.entries(assets.demo.audio ?? {}).map(async ([k, url]) => {
-            this.audioMusics.set(k, await loader.load(Asset.type('music', url as string)));
-          }),
-        );
-        break;
-      }
+  override init(): void {
+    this.mountSidebar();
+    this.mountInspector();
+    this.mountCodePanel();
+    this.message.setAnchor(0.5).setPosition(PREVIEW_CENTER.x, PREVIEW_CENTER.y);
+    this.app.input.onPointerDown.add(this.onPointerDown);
+    this.app.input.onPointerMove.add(this.onPointerMove);
+    this.app.input.onPointerUp.add(this.onPointerUp);
+    this.app.input.onMouseWheel.add(this.onWheel);
+    this.showGroup(this.group);
+    void this.select(ITEMS.find(item => item.group === this.group)!);
+  }
 
-      case 'sound': {
-        await Promise.all(
-          Object.entries(assets.demo.sound ?? {}).map(async ([k, url]) => {
-            this.soundMusics.set(k, await loader.load(Asset.type('music', url as string)));
-          }),
-        );
-        break;
-      }
+  // --- Selection ------------------------------------------------------------
 
-      case 'music': {
-        await Promise.all(
-          Object.entries(assets.demo.music ?? {}).map(async ([k, url]) => {
-            this.musicMusics.set(k, await loader.load(Asset.type('music', url as string)));
-          }),
-        );
-        break;
-      }
+  async select(item: BrowserItem): Promise<void> {
+    const generation = ++this.generation;
 
-      case 'soundSprites': {
-        await Promise.all(
-          Object.entries(assets.demo.soundSprites ?? {}).map(async ([k, entry]) => {
-            const [audio, data] = await Promise.all([
-              loader.load(Asset.type('music', (entry as AudioPairEntry).audio)),
-              loader.load(Asset.type<SoundSpriteData>('json', (entry as AudioPairEntry).data)),
-            ]);
-            this.soundSpriteAudio.set(k, audio);
-            this.soundSpriteData.set(k, data);
-          }),
-        );
-        break;
-      }
+    this.closePreview();
+    this.selected = item;
+    this.markSelection();
+    this.renderFacts(item, []);
+    this.message.text = 'Loading...';
 
-      case 'fonts': {
-        await Promise.all(
-          Object.entries(assets.demo.fonts ?? {}).map(async ([k, url]) => {
-            // The fonts category mixes vector fonts (.ttf/.otf) with
-            // bitmap-font sidecars (.fnt/.png) that FontFace cannot
-            // parse. Load only the vector entries - the bitmap ones
-            // fall back to a path readout.
-            if (!/\.(ttf|otf|woff2?)$/i.test(url as string)) {
-              return;
-            }
+    const scope = this.loader.createScope({ name: `preview:${item.id}` });
+    const started = performance.now();
 
-            const family = `assetbrowser_${k}`;
-            await loader.load(Asset.type('font', url as string, { family }));
-            this.fontFamilies.set(k, family);
-          }),
-        );
-        break;
-      }
+    this.scope = scope;
 
-      case 'technical': {
-        await Promise.all(
-          Object.entries(assets.technical ?? {}).flatMap(([subcat, items]) =>
-            Object.entries(items as Record<string, string>).map(async ([k, u]) => {
-              const s = new Sprite(await loader.load(Asset.type('texture', u)));
-              s.setAnchor(0.5);
-              this.techSprites.set(`${subcat}.${k}`, s);
-            }),
-          ),
-        );
-        break;
-      }
+    const context: PreviewContext = {
+      scene: this,
+      item,
+      scope,
+      manifest: this.manifest.get(item.key),
+      isCurrent: () => generation === this.generation && !this.destroyed,
+    };
 
-      case 'backgrounds': {
-        await Promise.all(
-          Object.entries(assets.demo.backgrounds ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(await loader.load(Asset.type('texture', url as string)));
-            s.setAnchor(0.5);
-            this.bgSprites.set(k, s);
-          }),
-        );
-        break;
-      }
+    try {
+      const preview = await openPreview(context);
 
-      case 'cursors': {
-        await Promise.all(
-          Object.entries(assets.demo.cursors ?? {}).map(async ([k, url]) => {
-            const s = new Sprite(new Texture(await loader.load(Asset.type('svg', url as string))));
-            s.setAnchor(0.5);
-            this.cursorSprites.set(k, s);
-          }),
-        );
-        break;
-      }
+      // A newer selection destroyed this scope already; what the preview built
+      // is dropped without ever being shown.
+      if (!context.isCurrent()) {
+        preview.dispose();
 
-      case 'tilesets': {
-        await Promise.all(
-          Object.entries(assets.demo.tilesets ?? {}).map(async ([k, entry]) => {
-            const s = new Sprite(await loader.load(Asset.type('texture', (entry as ImagePairEntry).image)));
-            s.setAnchor(0.5);
-            this.tilesetSprites.set(k, s);
-          }),
-        );
-        break;
+        return;
       }
 
-      case 'vendor': {
-        await Promise.all(
-          Object.entries(assets.demo.vendor ?? {}).map(async ([k, url]) => {
-            this.vendorData.set(k, await loader.load(Asset.type<VendorManifest>('json', url as string)));
-          }),
-        );
-        break;
+      this.preview = preview;
+      this.message.text = '';
+      this.renderFacts(item, preview.facts);
+      this.mountPanel(preview);
+      this.fit();
+      this.renderResident();
+      console.info(`Loaded ${item.name} (${item.kind}) in ${Math.round(performance.now() - started)} ms`);
+    } catch (error) {
+      if (!context.isCurrent() || isAbort(error)) {
+        return;
       }
 
-      default:
-        // 'video' previews only show the asset URL - nothing to load.
-        break;
+      this.message.text = `Could not load ${item.name}`;
+      this.renderResident();
+      console.error(`Failed to load ${item.name}:`, error);
     }
   }
 
-  private techFlatKeys(): string[] {
-    const out: string[] = [];
+  private closePreview(): void {
+    this.hideCode();
+    this.panel?.dispose();
+    this.panel = null;
+    this.zoomTarget = null;
+    this.backdrop = new Color(32, 37, 50);
 
-    for (const subcat of ['alpha', 'filtering', 'color'] as const) {
-      const items = assets.technical[subcat];
+    try {
+      this.preview?.dispose();
+    } finally {
+      this.preview = null;
+      // Destroying the scope cancels a load that is still running and releases
+      // this selection's claims; assets another scope holds stay resident.
+      this.scope?.destroy();
+      this.scope = null;
+    }
+  }
 
-      if (!items) {
-        continue;
+  private mountPanel(preview: Preview): void {
+    const host: PanelHost = options => {
+      const panel = demoPanel({ ...options, corner: 'top-right' });
+
+      Object.assign(panel.element.style, {
+        position: 'static',
+        maxWidth: 'none',
+        minWidth: '0',
+        padding: '10px',
+        boxShadow: 'none',
+        margin: '0',
+      });
+
+      // The shared panel is sized for a canvas corner; in this column the
+      // sliders give way so every readout stays visible.
+      for (const input of panel.element.querySelectorAll('input')) {
+        input.style.minWidth = '0';
       }
 
-      out.push(subcat);
+      this.panelSlot.replaceChildren(panel.element);
+      this.panel = panel;
 
-      for (const k of Object.keys(items)) {
-        out.push(`${subcat}.${k}`);
-      }
-    }
+      return panel;
+    };
 
-    return out;
+    preview.mount(host);
   }
 
-  private keys(): string[] {
-    if (this.cat === 'technical') {
-      return this.techFlatKeys();
-    }
-
-    const cat = CATEGORIES.find(c => c.id === this.cat);
-    const obj = getCategoryData(cat?.catKey ?? '');
-
-    return obj ? Object.keys(obj) : [];
+  /** The camera always zooms through the panel's Zoom control when a preview has one. */
+  bindZoom(target: { set(key: 'zoom', value: number): void } | null): void {
+    this.zoomTarget = target;
   }
 
-  private assetPath(): string {
-    if (!this.key) {
-      return '';
-    }
-
-    if (this.cat === 'technical') {
-      if (!this.key.includes('.')) {
-        return '';
-      }
+  setZoom(zoom: number): void {
+    const center = this.view.center;
 
-      const [subcat, itemKey] = this.key.split('.');
+    // Zoom about the preview's centre, which is offset from the canvas centre.
+    const focusX = center.x + (PREVIEW_CENTER.x - STAGE.width / 2) / this.view.zoomLevel;
+    const focusY = center.y + (PREVIEW_CENTER.y - STAGE.height / 2) / this.view.zoomLevel;
 
-      return (assets.technical as unknown as Record<string, Record<string, string>>)[subcat]?.[itemKey] ?? '';
-    }
+    this.view.setZoom(zoom);
+    this.lookAt(focusX, focusY);
+  }
 
-    const cat = CATEGORIES.find(c => c.id === this.cat);
-    const v = getCategoryData(cat?.catKey ?? '')[this.key];
+  /** Puts world point (x, y) at the centre of the preview area. */
+  lookAt(x: number, y: number): void {
+    const zoom = this.view.zoomLevel;
 
-    if (typeof v === 'string') {
-      return v;
-    }
+    this.view.setCenter(x - (PREVIEW_CENTER.x - STAGE.width / 2) / zoom, y - (PREVIEW_CENTER.y - STAGE.height / 2) / zoom);
+  }
 
-    const record = v as Partial<ImagePairEntry & AudioPairEntry> | undefined;
+  fit(): void {
+    const bounds = this.preview?.bounds;
 
-    if (typeof record?.image === 'string') {
-      return record.image;
-    }
+    if (!bounds) {
+      this.view.setZoom(1);
+      this.lookAt(0, 0);
 
-    if (typeof record?.audio === 'string') {
-      return record.audio;
+      return;
     }
 
-    return '';
-  }
-
-  private assetExpression(): string {
-    const category = this.cat === 'technical' ? 'technical' : `demo.${this.cat}`;
+    const zoom = Math.min(8, (PREVIEW.width * 0.9) / bounds.width, (PREVIEW.height * 0.82) / bounds.height);
 
-    return `assets.${category}.${this.key}`;
+    this.view.setZoom(zoom);
+    this.lookAt(bounds.width / 2, bounds.height / 2);
+    this.zoomTarget?.set('zoom', zoom);
   }
 
-  private typeLabel(): string {
-    return this.assetPath().split('.').pop()?.toUpperCase() ?? '';
+  setBackdrop(color: Color): void {
+    this.backdrop = color;
   }
 
-  private selectFirstInCategory(): void {
-    const keys = this.keys();
-    this.key = this.cat === 'technical' ? (keys.find(k => k.includes('.')) ?? null) : (keys[0] ?? null);
-    this.scrollOff = 0;
-    this.resetPreviewState();
-  }
-
-  private resetPreviewState(): void {
-    this.stopAllAudio();
-    this.frameIdx = 0;
-    this.frameTimer = 0;
-    this.animPlaying = true;
-  }
+  // --- Pointer: drag pans, wheel zooms, tap hits ----------------------------
 
-  private stopAllAudio(): void {
-    if (this.previewVoice) {
-      this.previewVoice.stop();
-      this.previewVoice = null;
-      this.previewKey = null;
+  private readonly onPointerDown = (_pointer: unknown, x: number, y: number): void => {
+    if (x >= PREVIEW.x && x <= PREVIEW.x + PREVIEW.width) {
+      this.drag = { x, y, moved: false };
     }
-  }
+  };
 
-  /** True when the selected key's preview voice is live and not paused. */
-  private previewIsPlaying(): boolean {
-    return this.previewVoice !== null && !this.previewVoice.ended && !this.previewVoice.paused && this.previewKey === this.key;
-  }
-
-  private currentPlayingMap(): Map<string, AudioStream> | null {
-    if (this.cat === 'audio') {
-      return this.audioMusics;
+  private readonly onPointerMove = (_pointer: unknown, x: number, y: number): void => {
+    if (!this.drag || !this.preview?.bounds) {
+      return;
     }
 
-    if (this.cat === 'sound') {
-      return this.soundMusics;
-    }
+    const dx = x - this.drag.x;
+    const dy = y - this.drag.y;
 
-    if (this.cat === 'music') {
-      return this.musicMusics;
-    }
+    if (this.drag.moved || Math.hypot(dx, dy) > 4) {
+      const zoom = this.view.zoomLevel;
 
-    if (this.cat === 'soundSprites') {
-      return this.soundSpriteAudio;
+      this.view.setCenter(this.view.center.x - dx / zoom, this.view.center.y - dy / zoom);
+      this.drag = { x, y, moved: true };
     }
+  };
 
-    return null;
-  }
+  private readonly onPointerUp = (_pointer: unknown, x: number, y: number): void => {
+    const drag = this.drag;
 
-  private toggleAudio(): void {
-    const app = this.app;
+    this.drag = null;
 
-    if (!this.key) {
-      return;
-    }
+    if (drag && !drag.moved && this.preview?.tap) {
+      // The four-argument form maps through the viewport at any zoom level;
+      // the stage's design size stands in for the canvas size.
+      const point = this.view.screenToWorld(x, y, STAGE.width, STAGE.height);
 
-    const map = this.currentPlayingMap();
-
-    if (!map) {
-      return;
+      this.preview.tap(point.x, point.y);
     }
+  };
 
-    const stream = map.get(this.key);
-
-    if (!stream) {
+  private readonly onWheel = (_deltaX: number, deltaY: number): void => {
+    if (!this.preview?.bounds) {
       return;
     }
 
-    if (this.previewKey === this.key && this.previewVoice && !this.previewVoice.ended) {
-      // Same asset selected: pause / resume the live voice.
-      if (this.previewVoice.paused) {
-        this.previewVoice.resume();
-      } else {
-        this.previewVoice.pause();
-      }
+    const zoom = Math.min(32, Math.max(0.05, this.view.zoomLevel * Math.exp(-deltaY * 0.0015)));
+
+    if (this.zoomTarget) {
+      this.zoomTarget.set('zoom', zoom);
     } else {
-      // New asset: stop the previous preview and start this one.
-      this.previewVoice?.stop();
-      this.previewVoice = app.audio.play(stream) as Voice & Pausable & Seekable;
-      this.previewKey = this.key;
+      this.setZoom(zoom);
     }
+  };
+
+  // --- Frame ----------------------------------------------------------------
+
+  override update(delta: Seconds): void {
+    this.preview?.update?.(delta);
   }
 
-  private currentFrameKeys(): string[] {
-    if (this.cat === 'sprites') {
-      return [...(this.sprSheets.get(this.key ?? '')?.sprites.keys() ?? [])];
-    }
+  override draw(context: RenderingContext): void {
+    context.clear(this.backdrop);
 
-    if (this.cat === 'spritesheets') {
-      return [...(this.sshSheets.get(this.key ?? '')?.sprites.keys() ?? [])];
+    for (const node of this.preview?.world ?? []) {
+      context.render(node, { view: this.view });
     }
 
-    if (this.cat === 'inputPrompts') {
-      return [...(this.inpSheets.get(this.key ?? '')?.sprites.keys() ?? [])];
+    for (const node of this.preview?.overlay ?? []) {
+      context.render(node, { view: context.screenView });
     }
 
-    return [];
-  }
-
-  private maxScroll(): number {
-    const visibleItems = Math.floor((H - LIST_Y) / ITEM_H);
-
-    return Math.max(0, this.keys().length - visibleItems);
+    if (this.message.text) {
+      context.render(this.message, { view: context.screenView });
+    }
   }
 
-  private isAudioLikeCategory(): boolean {
-    return this.cat === 'audio' || this.cat === 'sound' || this.cat === 'music' || this.cat === 'soundSprites';
+  override destroy(): void {
+    this.destroyed = true;
+    this.generation += 1;
+    this.closePreview();
+    this.app.input.onPointerDown.remove(this.onPointerDown);
+    this.app.input.onPointerMove.remove(this.onPointerMove);
+    this.app.input.onPointerUp.remove(this.onPointerUp);
+    this.app.input.onMouseWheel.remove(this.onWheel);
+    this.sidebar.remove();
+    this.inspector.remove();
+    this.codePanel.remove();
+    this.frame.destroy();
+    this.message.destroy();
+    this.view.destroy();
+    super.destroy();
   }
 
-  private onTap(x: number, y: number): void {
-    for (let i = 0; i < CATEGORIES_ROW1.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-
-      if (x >= bx && x < bx + CAT_BTN_W && y >= CAT_BTN_Y1 && y < CAT_BTN_Y1 + CAT_BTN_H) {
-        if (this.cat !== CATEGORIES_ROW1[i].id) {
-          this.cat = CATEGORIES_ROW1[i].id;
-          this.selectFirstInCategory();
-          void this.ensureCategory(this.cat);
+  // --- Sidebar --------------------------------------------------------------
+
+  private mountSidebar(): void {
+    Object.assign(this.sidebar.style, {
+      position: 'fixed',
+      inset: `0 auto 0 0`,
+      width: `${SIDEBAR_WIDTH}px`,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '10px',
+      padding: '14px 12px',
+      boxSizing: 'border-box',
+      background: '#0b1019',
+      borderRight: '1px solid rgba(154, 193, 255, 0.18)',
+      color: '#f3f7ff',
+      font: `15px ${FONT}`,
+      zIndex: '5',
+    });
+    this.sidebar.setAttribute('aria-label', 'Demo assets');
+
+    this.search.type = 'search';
+    this.search.placeholder = `Search ${ITEMS.length} assets`;
+    this.search.setAttribute('aria-label', 'Search assets');
+    Object.assign(this.search.style, {
+      padding: '8px 10px',
+      border: '1px solid rgba(154, 193, 255, 0.32)',
+      borderRadius: '8px',
+      background: 'rgba(154, 193, 255, 0.08)',
+      color: 'inherit',
+      font: 'inherit',
+    });
+    this.search.addEventListener('input', () => this.renderList());
+
+    Object.assign(this.tabs.style, { display: 'flex', flexWrap: 'wrap', gap: '5px' });
+    this.tabs.setAttribute('role', 'group');
+    this.tabs.setAttribute('aria-label', 'Asset types');
+
+    for (const group of GROUPS) {
+      const button = document.createElement('button');
+
+      button.type = 'button';
+      button.textContent = `${group} ${ITEMS.filter(item => item.group === group).length}`;
+      button.dataset.group = group;
+      Object.assign(button.style, chipStyle(false));
+      button.addEventListener('click', () => {
+        this.showGroup(group);
+        const first = this.visibleItems()[0];
+
+        if (first && first.group !== this.selected?.group) {
+          void this.select(first);
         }
-
-        return;
-      }
+      });
+      this.tabs.append(button);
     }
 
-    for (let i = 0; i < CATEGORIES_ROW2.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-
-      if (x >= bx && x < bx + CAT_BTN_W && y >= CAT_BTN_Y2 && y < CAT_BTN_Y2 + CAT_BTN_H) {
-        if (this.cat !== CATEGORIES_ROW2[i].id) {
-          this.cat = CATEGORIES_ROW2[i].id;
-          this.selectFirstInCategory();
-          void this.ensureCategory(this.cat);
-        }
-
+    Object.assign(this.list.style, { flex: '1 1 auto', overflowY: 'auto', listStyle: 'none', margin: '0', padding: '0' });
+    this.list.setAttribute('aria-label', 'Assets');
+    this.list.addEventListener('keydown', event => {
+      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
         return;
       }
-    }
-
-    for (let i = 0; i < BG_OPTIONS.length; i++) {
-      const bx = BG_BTN_X0 + i * (BG_BTN_SIZE + 5);
 
-      if (x >= bx && x < bx + BG_BTN_SIZE && y >= BG_BTN_Y && y < BG_BTN_Y + BG_BTN_SIZE) {
-        this.bgIdx = i;
+      event.preventDefault();
+      const visible = this.visibleItems();
+      const index = visible.findIndex(item => item === this.selected);
+      const next = visible[(index + (event.key === 'ArrowDown' ? 1 : -1) + visible.length) % visible.length];
 
-        return;
+      if (next) {
+        void this.select(next);
+        this.buttons.get(next.id)?.focus();
       }
-    }
+    });
 
-    if (x >= 0 && x < SIDEBAR_W && y >= TOOLBAR_H) {
-      const keys = this.keys();
-      const idx = Math.floor((y - LIST_Y) / ITEM_H) + this.scrollOff;
-
-      if (idx >= 0 && idx < keys.length) {
-        const newKey = keys[idx];
-        const isHeader = this.cat === 'technical' && !newKey.includes('.');
+    this.sidebar.append(this.search, this.tabs, this.list);
+    document.body.append(this.sidebar);
+  }
 
-        if (!isHeader && newKey !== this.key) {
-          this.key = newKey;
-          this.resetPreviewState();
-        }
-      }
+  private showGroup(group: Group): void {
+    this.group = group;
+    this.search.value = '';
 
-      return;
+    for (const button of this.tabs.querySelectorAll('button')) {
+      Object.assign(button.style, chipStyle(button.dataset.group === group));
+      button.setAttribute('aria-pressed', String(button.dataset.group === group));
     }
 
-    if (this.key && x >= PREVIEW_X + PREVIEW_W - 84 && x < PREVIEW_X + PREVIEW_W - 10 && y >= PREVIEW_Y + 8 && y < PREVIEW_Y + 8 + 26) {
-      navigator.clipboard?.writeText(this.assetExpression()).catch(() => undefined);
-
-      return;
-    }
+    this.renderList();
+  }
 
-    if (this.isAudioLikeCategory() && this.key) {
-      const bx = PREVIEW_X + (PREVIEW_W - 100) / 2;
-      const by = PREVIEW_Y + PREVIEW_H / 2 - 30;
+  private visibleItems(): BrowserItem[] {
+    const query = this.search.value.trim().toLowerCase();
 
-      if (x >= bx && x < bx + 100 && y >= by && y < by + 56) {
-        this.toggleAudio();
+    return query
+      ? ITEMS.filter(item => item.name.toLowerCase().includes(query) || item.key.toLowerCase().includes(query))
+      : ITEMS.filter(item => item.group === this.group);
+  }
 
-        return;
-      }
-    }
+  private renderList(): void {
+    const searching = this.search.value.trim() !== '';
+
+    this.buttons.clear();
+    this.list.replaceChildren(
+      ...this.visibleItems().map(item => {
+        const row = document.createElement('li');
+        const button = document.createElement('button');
+        const glyph = document.createElement('span');
+        const label = document.createElement('span');
+
+        button.type = 'button';
+        button.dataset.asset = item.id;
+        glyph.textContent = GROUP_GLYPH[item.kind];
+        glyph.setAttribute('aria-hidden', 'true');
+        Object.assign(glyph.style, { flex: '0 0 34px', font: `600 10px ${MONO}`, color: '#7fb8ff', textAlign: 'center' });
+        label.textContent = searching ? `${item.name} - ${item.group}` : item.name;
+        Object.assign(label.style, { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
+        Object.assign(button.style, {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          width: '100%',
+          minHeight: '34px',
+          padding: '4px 6px',
+          textAlign: 'left',
+          border: '0',
+          borderRadius: '7px',
+          background: 'transparent',
+          color: 'inherit',
+          font: 'inherit',
+          cursor: 'pointer',
+        });
+        button.append(glyph, label);
+        button.addEventListener('click', () => void this.select(item));
+        this.buttons.set(item.id, button);
+        row.append(button);
+
+        return row;
+      }),
+    );
+    this.markSelection();
+  }
 
-    if ((this.cat === 'sprites' || this.cat === 'spritesheets' || this.cat === 'inputPrompts') && this.key) {
-      const bx = PREVIEW_X + 16;
-      const by = H - 48;
+  private markSelection(): void {
+    for (const [id, button] of this.buttons) {
+      const current = id === this.selected?.id;
 
-      if (x >= bx && x < bx + 90 && y >= by && y < by + 30) {
-        this.animPlaying = !this.animPlaying;
+      button.style.background = current ? 'rgba(127, 184, 255, 0.26)' : 'transparent';
+      button.setAttribute('aria-current', String(current));
 
-        return;
+      if (current) {
+        button.scrollIntoView({ block: 'nearest' });
       }
     }
   }
 
-  private onMove(x: number, y: number): void {
-    this.hoverIdx = null;
+  // --- Inspector ------------------------------------------------------------
+
+  private mountInspector(): void {
+    Object.assign(this.inspector.style, {
+      position: 'fixed',
+      inset: `0 0 0 auto`,
+      width: `${INSPECTOR_WIDTH}px`,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '10px',
+      padding: '14px',
+      boxSizing: 'border-box',
+      overflowY: 'auto',
+      background: '#0b1019',
+      borderLeft: '1px solid rgba(154, 193, 255, 0.18)',
+      color: '#dce8ff',
+      font: `14px ${FONT}`,
+      zIndex: '5',
+    });
+    this.inspector.setAttribute('aria-label', 'Selected asset');
+    Object.assign(this.heading.style, { margin: '0', fontSize: '19px', color: '#ffffff' });
+    Object.assign(this.facts.style, { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '3px 10px', margin: '0', fontSize: '13px' });
+    Object.assign(this.resident.style, { marginTop: 'auto', fontSize: '12px', color: '#8aa0c4' });
+    this.inspector.append(this.heading, this.facts, this.panelSlot, this.resident);
+    document.body.append(this.inspector);
+  }
 
-    if (x >= 0 && x < SIDEBAR_W && y >= TOOLBAR_H) {
-      const keys = this.keys();
-      const idx = Math.floor((y - LIST_Y) / ITEM_H) + this.scrollOff;
+  private renderFacts(item: BrowserItem, facts: ReadonlyArray<readonly [string, string]>): void {
+    const manifest = this.manifest.get(item.key);
+    const rows: Array<readonly [string, string]> = [
+      ['Asset', `assets.${item.key}`],
+      ['File', fileName(assets[item.key].source)],
+      ...(manifest
+        ? [['Size', formatBytes(manifest.bytes + (item.atlasKey ? (this.manifest.get(item.atlasKey)?.bytes ?? 0) : 0))] as const]
+        : []),
+      ...facts,
+    ];
 
-      if (idx >= 0 && idx < keys.length) {
-        const isHeader = this.cat === 'technical' && !keys[idx].includes('.');
+    this.heading.textContent = item.name;
+    this.facts.replaceChildren(
+      ...rows.flatMap(([term, value]) => {
+        const dt = document.createElement('dt');
+        const dd = document.createElement('dd');
 
-        if (!isHeader) {
-          this.hoverIdx = idx;
-        }
-      }
-    }
+        dt.textContent = term;
+        dd.textContent = value;
+        dt.style.color = '#8aa0c4';
+        Object.assign(dd.style, { margin: '0', overflowWrap: 'anywhere', color: '#f3f7ff' });
+
+        return [dt, dd];
+      }),
+    );
   }
 
-  private onWheel(dy: number): void {
-    const maxScroll = this.maxScroll();
-    const delta = dy > 0 ? 1 : -1;
-    this.scrollOff = Math.max(0, Math.min(maxScroll, this.scrollOff + delta));
+  /** Lists what the loader holds right now: the manifest plus the current selection, never an earlier one. */
+  private renderResident(): void {
+    const rows = this.app.loader.inspect();
+    const summary = document.createElement('summary');
+    const list = document.createElement('ul');
+
+    summary.textContent = `Loader holds ${rows.length} asset${rows.length === 1 ? '' : 's'}`;
+    summary.style.cursor = 'pointer';
+    Object.assign(list.style, { margin: '6px 0 0', paddingLeft: '16px', font: `11px ${MONO}` });
+    list.append(
+      ...rows.map(row => {
+        const entry = document.createElement('li');
+
+        entry.textContent = `${fileName(row.locator)} (${row.state})`;
+
+        return entry;
+      }),
+    );
+    this.resident.dataset.residentCount = String(rows.length);
+    this.resident.replaceChildren(summary, list);
   }
 
-  override update(delta: Seconds): void {
-    if (!this.animPlaying) {
-      return;
-    }
+  // --- Code and data panel --------------------------------------------------
+
+  private mountCodePanel(): void {
+    const header = document.createElement('div');
+    const copy = document.createElement('button');
+    const close = document.createElement('button');
+
+    Object.assign(this.codePanel.style, {
+      position: 'fixed',
+      left: `${PREVIEW.x + 12}px`,
+      width: `${PREVIEW.width - 24}px`,
+      bottom: '12px',
+      maxHeight: '420px',
+      display: 'none',
+      flexDirection: 'column',
+      borderRadius: '10px',
+      border: '1px solid rgba(154, 193, 255, 0.3)',
+      background: 'rgba(8, 12, 20, 0.96)',
+      color: '#f3f7ff',
+      font: `14px ${FONT}`,
+      zIndex: '6',
+    });
+    this.codePanel.setAttribute('aria-label', 'Code');
+    Object.assign(header.style, { display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 10px' });
+    this.codeTitle.style.flex = '1 1 auto';
+
+    for (const [button, label] of [
+      [copy, 'Copy'],
+      [close, 'Close'],
+    ] as const) {
+      button.type = 'button';
+      button.textContent = label;
+      Object.assign(button.style, chipStyle(false));
+    }
+
+    copy.addEventListener('click', () => {
+      void navigator.clipboard.writeText(this.code.textContent ?? '').then(
+        () => {
+          copy.textContent = 'Copied';
+          console.log(`Copied the ${this.codeTitle.textContent ?? 'code'} to the clipboard`);
+        },
+        (error: unknown) => console.warn('The clipboard refused the copy:', error),
+      );
+    });
+    copy.addEventListener('blur', () => (copy.textContent = 'Copy'));
+    close.addEventListener('click', () => this.hideCode());
+    Object.assign(this.code.style, {
+      margin: '0',
+      padding: '0 12px 12px',
+      overflow: 'auto',
+      font: `13px/1.45 ${MONO}`,
+      whiteSpace: 'pre',
+      color: '#dce8ff',
+    });
+    this.code.tabIndex = 0;
+    header.append(this.codeTitle, copy, close);
+    this.codePanel.append(header, this.code);
+    document.body.append(this.codePanel);
+  }
 
-    if (this.cat !== 'sprites' && this.cat !== 'spritesheets' && this.cat !== 'inputPrompts') {
-      return;
+  showCode(): void {
+    if (this.preview) {
+      this.openCodePanel('Code', this.preview.snippet());
     }
+  }
 
-    const frames = this.currentFrameKeys();
+  async showData(): Promise<void> {
+    const preview = this.preview;
+    const generation = this.generation;
 
-    if (!frames.length) {
+    if (!preview?.data) {
       return;
     }
 
-    this.frameTimer += delta;
+    this.openCodePanel('Data', 'Loading...');
+
+    try {
+      const data = await preview.data();
+
+      if (generation !== this.generation) {
+        return;
+      }
+
+      const text = JSON.stringify(data, null, 2);
+      const limit = 60_000;
 
-    if (this.frameTimer >= 0.07) {
-      this.frameTimer = 0;
-      this.frameIdx = (this.frameIdx + 1) % frames.length;
+      this.openCodePanel('Data', text.length > limit ? `${text.slice(0, limit)}\n... ${text.length - limit} more characters` : text);
+    } catch (error) {
+      if (generation === this.generation && !isAbort(error)) {
+        this.openCodePanel('Data', `Could not load the data: ${error instanceof Error ? error.message : String(error)}`);
+      }
     }
   }
 
-  override draw(context: RenderingContext): void {
-    this.drawPreviewBg(context);
-    this.drawPreviewContent(context);
-    this.drawSidebar(context);
-    this.drawToolbar(context);
+  private openCodePanel(title: string, text: string): void {
+    this.codeTitle.textContent = title;
+    this.code.textContent = text;
+    this.codePanel.style.display = 'flex';
   }
 
-  private drawNoAssets(context: RenderingContext): void {
-    const g = this.gPreview;
-    g.clear();
-    g.fillColor = C.panel;
-    g.drawRectangle(0, 0, W, H);
-    context.render(g);
-    context.render(this.txtNoAssets);
+  private hideCode(): void {
+    this.codePanel.style.display = 'none';
   }
+}
 
-  private drawToolbar(context: RenderingContext): void {
-    const g = this.gToolbar;
-    g.clear();
-
-    g.fillColor = C.toolbar;
-    g.drawRectangle(0, 0, W, TOOLBAR_H);
-
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawLine(0, TOOLBAR_H - 1, W, TOOLBAR_H - 1);
-    g.drawLine(0, CAT_BTN_Y2 - 4, W, CAT_BTN_Y2 - 4);
-
-    for (let i = 0; i < CATEGORIES_ROW1.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      g.fillColor = this.cat === CATEGORIES_ROW1[i].id ? C.active : C.btnDark;
-      g.lineWidth = 0;
-      g.drawRectangle(bx, CAT_BTN_Y1, CAT_BTN_W, CAT_BTN_H);
-    }
-
-    for (let i = 0; i < CATEGORIES_ROW2.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      g.fillColor = this.cat === CATEGORIES_ROW2[i].id ? C.active : C.btnDark;
-      g.lineWidth = 0;
-      g.drawRectangle(bx, CAT_BTN_Y2, CAT_BTN_W, CAT_BTN_H);
-    }
+const chipStyle = (active: boolean): Partial<CSSStyleDeclaration> => ({
+  padding: '4px 9px',
+  border: `1px solid ${active ? 'rgba(127, 184, 255, 0.7)' : 'rgba(154, 193, 255, 0.28)'}`,
+  borderRadius: '999px',
+  background: active ? 'rgba(127, 184, 255, 0.24)' : 'transparent',
+  color: active ? '#ffffff' : '#c4d2ec',
+  font: `600 12px ${FONT}`,
+  cursor: 'pointer',
+});
 
-    for (let i = 0; i < BG_OPTIONS.length; i++) {
-      const { r, g: gv, b } = BG_OPTIONS[i];
-      const bx = BG_BTN_X0 + i * (BG_BTN_SIZE + 5);
-      g.fillColor = new Color(r, gv, b);
-      g.lineWidth = this.bgIdx === i ? 2 : 1;
-      g.lineColor = this.bgIdx === i ? C.accent : C.border;
-      g.drawRectangle(bx, BG_BTN_Y, BG_BTN_SIZE, BG_BTN_SIZE);
-    }
+// --- Previews ---------------------------------------------------------------
+
+const openPreview = (context: PreviewContext): Promise<Preview> => {
+  switch (context.item.kind) {
+    case 'texture':
+    case 'svg':
+      return openTexture(context);
+    case 'spritesheet':
+      return openSpritesheet(context);
+    case 'tiled':
+    case 'ldtk':
+      return openMap(context);
+    case 'sound':
+    case 'music':
+      return openAudio(context);
+    case 'video':
+      return openVideo(context);
+    case 'font':
+    case 'bmFont':
+      return openFont(context);
+    case 'data':
+      return openData(context);
+  }
+};
 
-    context.render(g);
+const BACKDROPS = { Checker: null, Dark: new Color(32, 37, 50), Light: new Color(236, 239, 244), Black: new Color(0, 0, 0) } as const;
+const BACKDROP_NAMES = Object.keys(BACKDROPS) as Array<keyof typeof BACKDROPS>;
 
-    for (let i = 0; i < CATEGORIES_ROW1.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      const t = this.catBtnTexts[i];
-      t.text = CATEGORIES_ROW1[i].label;
-      t.setPosition(bx + (CAT_BTN_W - 22) / 2, CAT_BTN_Y1 + 12);
-      context.render(t);
-    }
+/** A transparency checkerboard behind a `width` x `height` image. */
+const checkerboard = (width: number, height: number): Graphics => {
+  const graphics = new Graphics();
+  const cell = Math.max(4, Math.round(Math.max(width, height) / 32));
 
-    for (let i = 0; i < CATEGORIES_ROW2.length; i++) {
-      const bx = CAT_BTN_X0 + i * (CAT_BTN_W + 4);
-      const t = this.catBtnTexts[CATEGORIES_ROW1.length + i];
-      t.text = CATEGORIES_ROW2[i].label;
-      t.setPosition(bx + (CAT_BTN_W - 22) / 2, CAT_BTN_Y2 + 12);
-      context.render(t);
-    }
+  graphics.fillColor = new Color(58, 64, 78);
+  graphics.drawRectangle(0, 0, width, height);
+  graphics.fillColor = new Color(86, 93, 110);
 
-    for (let i = 0; i < BG_OPTIONS.length; i++) {
-      const bx = BG_BTN_X0 + i * (BG_BTN_SIZE + 5);
-      const t = this.bgBtnTexts[i];
-      t.text = BG_OPTIONS[i].label;
-      t.style.fillColor = i === 1 ? C.white : C.dim;
-      t.setPosition(bx + 7, BG_BTN_Y + 7);
-      context.render(t);
+  for (let y = 0; y < height; y += cell) {
+    for (let x = (y / cell) % 2 === 0 ? 0 : cell; x < width; x += cell * 2) {
+      graphics.drawRectangle(x, y, Math.min(cell, width - x), Math.min(cell, height - y));
     }
   }
 
-  private drawSidebar(context: RenderingContext): void {
-    const g = this.gSidebar;
-    g.clear();
-
-    g.fillColor = C.panel;
-    g.drawRectangle(0, TOOLBAR_H, SIDEBAR_W, H - TOOLBAR_H);
-
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawLine(SIDEBAR_W, TOOLBAR_H, SIDEBAR_W, H);
-
-    const keys = this.keys();
-
-    for (let i = 0; i < keys.length; i++) {
-      const iy = LIST_Y + (i - this.scrollOff) * ITEM_H;
+  return graphics;
+};
 
-      if (iy + ITEM_H <= TOOLBAR_H || iy >= H) {
-        continue;
+const zoomSlider = (value = 1) => slider('Zoom', { min: 0.05, max: 16, step: 0.05, value, format: zoom => `${Math.round(zoom * 100)}%` });
+
+const openTexture = async ({ scene, item, scope }: PreviewContext): Promise<Preview> => {
+  const descriptor = assets[item.key];
+  const svg = descriptor.type === 'svg';
+  // An SVG loads as an image element; a texture over it is this preview's to destroy.
+  const texture = svg
+    ? new Texture(await scope.load(descriptor as typeof assets.iconPlay))
+    : await scope.load(descriptor as typeof assets.ship);
+  const sprite = new Sprite(texture);
+  const backdrop = checkerboard(texture.width, texture.height);
+  const state = { zoom: 1, nearest: false, backdrop: 'Checker' as keyof typeof BACKDROPS };
+
+  return {
+    world: [backdrop, sprite],
+    overlay: [],
+    bounds: { width: texture.width, height: texture.height },
+    facts: [
+      ['Pixels', `${texture.width} x ${texture.height}`],
+      ['Format', svg ? 'SVG, rasterized at its intrinsic size' : (fileName(descriptor.source).split('.').pop() ?? '').toUpperCase()],
+    ],
+    mount(host) {
+      const panel = host({
+        title: 'Texture',
+        controls: {
+          zoom: zoomSlider(),
+          filtering: choice('Filtering', ['Linear', 'Nearest'] as const),
+          backdrop: choice('Backdrop', BACKDROP_NAMES),
+        },
+        actions: { Fit: () => scene.fit(), '100%': () => panel.set('zoom', 1), Code: () => scene.showCode() },
+        onChange(key, _value, values) {
+          state.zoom = values.zoom;
+          state.nearest = values.filtering === 'Nearest';
+          state.backdrop = values.backdrop;
+
+          if (key === 'zoom') {
+            scene.setZoom(values.zoom);
+          } else if (key === 'filtering') {
+            // Sampling is per texture handle; this preview's scope owns this one.
+            texture.scaleMode = state.nearest ? ScaleModes.Nearest : ScaleModes.Linear;
+          } else if (key === 'backdrop') {
+            backdrop.visible = values.backdrop === 'Checker';
+            scene.setBackdrop(BACKDROPS[values.backdrop] ?? new Color(32, 37, 50));
+          }
+        },
+      });
+
+      scene.bindZoom(panel);
+    },
+    snippet: () =>
+      textureSnippet(item, {
+        zoom: state.zoom,
+        nearest: state.nearest,
+        width: texture.width,
+        height: texture.height,
+      }),
+    dispose() {
+      sprite.destroy();
+      backdrop.destroy();
+
+      if (svg) {
+        texture.destroy();
       }
+    },
+  };
+};
 
-      const isHeader = this.cat === 'technical' && !keys[i].includes('.');
-      const isSelected = !isHeader && keys[i] === this.key;
-      const isHover = !isHeader && this.hoverIdx === i && !isSelected;
-
-      if (isHeader) {
-        g.fillColor = C.infoBar;
-        g.lineWidth = 0;
-        g.drawRectangle(0, iy, SIDEBAR_W - 1, ITEM_H);
-      } else if (isSelected) {
-        g.fillColor = C.active;
-        g.lineWidth = 0;
-        g.drawRectangle(0, iy, SIDEBAR_W - 1, ITEM_H);
-      } else if (isHover) {
-        g.fillColor = C.hover;
-        g.lineWidth = 0;
-        g.drawRectangle(0, iy, SIDEBAR_W - 1, ITEM_H);
+const openSpritesheet = async ({ scene, item, scope }: PreviewContext): Promise<Preview> => {
+  const [texture, data] = await Promise.all([
+    scope.load(assets[item.key] as typeof assets.platformerCharactersImage),
+    scope.load(assets[item.atlasKey!] as typeof assets.platformerCharactersAtlas),
+  ]);
+  const sheet = new Spritesheet(texture, data as SpritesheetData);
+  const names = [...sheet.frames.keys()];
+  const animations = [...sheet.animations.keys()];
+  const atlas = new Sprite(texture);
+  const backdrop = checkerboard(texture.width, texture.height);
+  const outlines = new Graphics();
+  const strip = new Graphics();
+  const frameLabel = new Text('', { fontSize: 15, fillColor: new Color(200, 214, 236) });
+  const animationLabel = new Text('', { fontSize: 15, fillColor: new Color(200, 214, 236) });
+  const animated = new AnimatedSprite(texture).setAnchor(0.5);
+  const selectedSprite = new Sprite(texture).setAnchor(0.5);
+  const STRIP_Y = PREVIEW.height - 208;
+  const boxWidth = (PREVIEW.width - 36) / 2;
+  const frameBox = { x: PREVIEW.x + 12, y: STRIP_Y, width: boxWidth, height: 196 };
+  const animationBox = { x: frameBox.x + boxWidth + 12, y: STRIP_Y, width: boxWidth, height: 196 };
+  const state = {
+    animation: animations.length > 0 ? animations[0]! : 'Frame range',
+    first: 0,
+    last: Math.min(names.length - 1, 1),
+    selected: 0,
+    fps: 8,
+    loop: true,
+    scale: 1,
+    bounds: true,
+  };
+  const clipFrames = (): string[] =>
+    state.animation === 'Frame range'
+      ? names.slice(Math.min(state.first, state.last), Math.max(state.first, state.last) + 1)
+      : [...sheet.getAnimationFrameNames(state.animation)];
+
+  const fitInBox = (sprite: Sprite, rect: Rectangle, box: typeof frameBox, scale: number): void => {
+    // The two-line label takes the top 44 px of the box.
+    const room = box.height - 52;
+
+    sprite.setScale(Math.min(scale, room / rect.height)).setPosition(box.x + box.width / 2, box.y + 44 + (box.height - 44) / 2);
+  };
+
+  const redraw = (): void => {
+    const range = new Set(clipFrames());
+
+    outlines.clear();
+
+    if (state.bounds) {
+      for (const [name, rect] of sheet.frames) {
+        const selected = names.indexOf(name) === state.selected;
+
+        outlines.lineWidth = selected ? 3 : 1;
+        outlines.lineColor = selected
+          ? new Color(255, 214, 102)
+          : range.has(name)
+            ? new Color(127, 220, 160, 0.95)
+            : new Color(127, 184, 255, 0.55);
+        outlines.drawRectangle(rect.x, rect.y, rect.width, rect.height);
       }
     }
 
-    context.render(g);
+    const selectedName = names[state.selected]!;
+    const selectedRect = sheet.getFrame(selectedName);
 
-    for (let i = 0; i < keys.length && i - this.scrollOff < this.itemTexts.length; i++) {
-      const iy = LIST_Y + (i - this.scrollOff) * ITEM_H;
+    selectedSprite.setTextureFrame(selectedRect);
+    fitInBox(selectedSprite, selectedRect, frameBox, 4);
+    frameLabel.text = `Frame ${state.selected + 1}/${names.length}
+${selectedName}, ${selectedRect.width} x ${selectedRect.height}`;
 
-      if (iy + ITEM_H <= TOOLBAR_H || iy >= H) {
-        continue;
-      }
+    const frames = clipFrames().map(name => sheet.getFrame(name));
 
-      if (this.cat === 'technical' && !keys[i].includes('.')) {
-        const ht = this.techHeaderTexts.get(keys[i]);
+    animated.setClips({ preview: { frames, fps: state.fps, repeat: state.loop ? -1 : 1 } }).play('preview', { restart: true });
+    fitInBox(animated, frames[0]!, animationBox, state.scale);
+    animationLabel.text = `Animation: ${state.animation === 'Frame range' ? `frames ${Math.min(state.first, state.last) + 1}-${Math.max(state.first, state.last) + 1}` : state.animation}
+${frames.length} frames, ${state.fps} fps${state.loop ? ', loop' : ''}`;
+  };
 
-        if (ht) {
-          ht.setPosition(10, iy + 12);
-          context.render(ht);
-        }
+  strip.fillColor = new Color(11, 16, 25, 0.94);
+  strip.drawRectangle(PREVIEW.x, STRIP_Y - 12, PREVIEW.width, PREVIEW.height - STRIP_Y + 12);
+  strip.fillColor = new Color(24, 30, 44);
 
-        continue;
-      }
-
-      const t = this.itemTexts[i - this.scrollOff];
+  for (const box of [frameBox, animationBox]) {
+    strip.drawRectangle(box.x, box.y, box.width, box.height);
+  }
 
-      if (!t) {
-        continue;
+  frameLabel.setPosition(frameBox.x + 10, frameBox.y + 6);
+  animationLabel.setPosition(animationBox.x + 10, animationBox.y + 6);
+  redraw();
+
+  return {
+    world: [backdrop, atlas, outlines],
+    overlay: [strip, selectedSprite, animated, frameLabel, animationLabel],
+    // Fit the atlas into the area above the frame strip.
+    bounds: { width: texture.width, height: texture.height * (PREVIEW.height / (STRIP_Y - 24)) },
+    facts: [
+      ['Atlas', `${texture.width} x ${texture.height} px`],
+      ['Frames', String(names.length)],
+      ['Animations', animations.length > 0 ? animations.join(', ') : 'none in the atlas data - pick a frame range'],
+    ],
+    mount(host) {
+      const last = Math.max(0, names.length - 1);
+      const frameName = (index: number): string => `#${Math.round(index) + 1}`;
+      const controls = {
+        zoom: zoomSlider(),
+        animation: choice('Animation', ['Frame range', ...animations], state.animation),
+        first: slider('First frame', { min: 0, max: last, step: 1, value: state.first, format: frameName }),
+        last: slider('Last frame', { min: 0, max: last, step: 1, value: state.last, format: frameName }),
+        fps: slider('FPS', { min: 1, max: 30, step: 1, value: state.fps, format: fps => `${fps}` }),
+        loop: toggle('Loop', state.loop),
+        scale: slider('Scale', { min: 0.25, max: 6, step: 0.25, value: state.scale, format: scale => `${scale}x` }),
+        bounds: toggle('Frame bounds', state.bounds),
+      };
+      const handle = host({
+        title: 'Spritesheet',
+        controls,
+        actions: {
+          'Range from selected': () => handle.set('first', state.selected),
+          'Range to selected': () => handle.set('last', state.selected),
+          Fit: () => scene.fit(),
+          Code: () => scene.showCode(),
+          Data: () => void scene.showData(),
+        },
+        onChange(key, _value, values) {
+          if (key === 'zoom') {
+            scene.setZoom(values.zoom);
+
+            return;
+          }
+
+          Object.assign(state, {
+            animation: values.animation,
+            first: values.first,
+            last: values.last,
+            fps: values.fps,
+            loop: values.loop,
+            scale: values.scale,
+            bounds: values.bounds,
+          });
+          redraw();
+        },
+      });
+
+      scene.bindZoom(handle);
+      handle.status('Click a frame in the atlas to select it.');
+    },
+    update(delta) {
+      animated.update(delta);
+    },
+    tap(x, y) {
+      const index = names.findIndex(name => sheet.getFrame(name).contains(x, y));
+
+      if (index >= 0) {
+        state.selected = index;
+        redraw();
+        console.log(`Frame ${index + 1}: ${names[index]}`);
       }
+    },
+    snippet: () => spritesheetSnippet(item, { ...state, frames: clipFrames() }),
+    data: () => Promise.resolve(data),
+    dispose() {
+      animated.destroy();
+      selectedSprite.destroy();
+      atlas.destroy();
+      backdrop.destroy();
+      outlines.destroy();
+      strip.destroy();
+      frameLabel.destroy();
+      animationLabel.destroy();
+      sheet.destroy();
+    },
+  };
+};
 
-      t.text = this.cat === 'technical' ? (keys[i].split('.')[1] ?? keys[i]) : keys[i];
-      t.style.fillColor = keys[i] === this.key ? C.white : C.dim;
-      t.setPosition(this.cat === 'technical' ? 18 : 10, iy + 10);
-      context.render(t);
+const openMap = async ({ scene, item, scope }: PreviewContext): Promise<Preview> => {
+  const source = assets[item.key].source;
+  const ldtk = item.kind === 'ldtk';
+  // Tileset images resolve relative to the map file, which is why the map
+  // loads from the catalog's absolute URL through the format's own type.
+  const world = ldtk ? await scope.load(Asset.type('ldtkMap', source)) : null;
+  const levels: readonly TileMap[] = world ? world.levels : [await scope.load(Asset.type('tileMap', source))];
+  const state = { level: 0, objects: true, zoom: 1, layers: new Map<string, boolean>() };
+  const objects = new Graphics();
+  let node: TileMapNode | null = null;
+  const preview: Preview & { world: RenderNode[] } = {
+    world: [],
+    overlay: [],
+    bounds: null,
+    facts: [],
+    mount(host) {
+      const map = levels[state.level]!;
+      const layerControls = Object.fromEntries(
+        map.renderableLayers.map(layer => [`layer:${layer.name}`, toggle(`Layer ${layer.name}`, true)]),
+      );
+      const panel = host({
+        title: ldtk ? 'LDtk world' : 'Tiled map',
+        controls: {
+          zoom: zoomSlider(),
+          ...(levels.length > 1
+            ? {
+                level: choice(
+                  'Level',
+                  levels.map(level => level.name),
+                ),
+              }
+            : {}),
+          objects: toggle('Object shapes', state.objects),
+          ...layerControls,
+        },
+        actions: { Fit: () => scene.fit(), Code: () => scene.showCode(), Data: () => void scene.showData() },
+        onChange(key, value) {
+          if (key === 'zoom') {
+            state.zoom = value as number;
+            scene.setZoom(value as number);
+          } else if (key === 'level') {
+            state.level = Math.max(
+              0,
+              levels.findIndex(level => level.name === value),
+            );
+            build();
+            scene.fit();
+          } else if (key === 'objects') {
+            state.objects = value as boolean;
+            objects.visible = state.objects;
+          } else if (String(key).startsWith('layer:')) {
+            const name = String(key).slice('layer:'.length);
+            const layerNode = node?.getLayerNode(name);
+
+            state.layers.set(name, value as boolean);
+
+            if (layerNode) {
+              layerNode.visible = value as boolean;
+            }
+          }
+        },
+      });
+
+      scene.bindZoom(panel as unknown as { set(key: 'zoom', value: number): void });
+    },
+    snippet: () => mapSnippet(item, { level: levels[state.level]!.name, zoom: state.zoom, ldtk }),
+    data: async () => scope.load(assets[item.key] as typeof assets.harborPlazaMap),
+    dispose() {
+      node?.destroy();
+      objects.destroy();
+    },
+  };
+
+  const build = (): void => {
+    const map = levels[state.level]!;
+
+    node?.destroy();
+    node = new TileMapNode(map);
+    objects.clear();
+    objects.lineWidth = 2;
+    objects.lineColor = new Color(255, 191, 82, 0.9);
+    objects.fillColor = new Color(255, 191, 82, 0.16);
+
+    let count = 0;
+
+    for (const layer of map.objectLayers) {
+      for (const object of layer.objects) {
+        count += 1;
+
+        if (object.kind === ObjectKind.Point) {
+          objects.drawCircle(object.x, object.y, 6);
+        } else if (object.kind === ObjectKind.Ellipse) {
+          objects.drawEllipse(object.x + object.width / 2, object.y + object.height / 2, object.width / 2, object.height / 2);
+        } else {
+          objects.drawRectangle(object.x, object.y, object.width, object.height);
+        }
+      }
     }
 
-    if (keys.length === 0) {
-      this.txtEmptyCat.setPosition(60, LIST_Y + 14);
-      context.render(this.txtEmptyCat);
-    }
-  }
+    objects.visible = state.objects;
+    preview.world.splice(0, preview.world.length, node, objects);
+    Object.assign(preview, {
+      bounds: { width: map.pixelWidth ?? (map.width ?? 0) * map.tileWidth, height: map.pixelHeight ?? (map.height ?? 0) * map.tileHeight },
+      facts: [
+        ['Format', ldtk ? 'LDtk world' : 'Tiled map'],
+        ...(levels.length > 1 ? [['Levels', levels.map(level => level.name).join(', ')] as const] : []),
+        ['Tiles', `${map.width ?? 'unbounded'} x ${map.height ?? 'unbounded'} at ${map.tileWidth} x ${map.tileHeight} px`],
+        ['Layers', map.renderableLayers.map(layer => layer.name).join(', ') || 'none'],
+        ['Objects', String(count)],
+      ],
+    });
+  };
 
-  private drawPreviewBg(context: RenderingContext): void {
-    const { r, g, b } = BG_OPTIONS[this.bgIdx];
-    const bg = this.gPreview;
-    bg.clear();
-    bg.fillColor = new Color(r, g, b);
-    bg.drawRectangle(PREVIEW_X, PREVIEW_Y, PREVIEW_W, PREVIEW_H);
-    context.render(bg);
-  }
+  build();
 
-  private drawPreviewContent(context: RenderingContext): void {
-    if (!this.key) {
-      this.txtNoSel.setPosition(PREVIEW_X + PREVIEW_W / 2 - 130, H / 2 - 10);
-      context.render(this.txtNoSel);
-      this.drawInfoBar(context);
+  return preview;
+};
 
+const openAudio = async ({ scene, item, scope, isCurrent }: PreviewContext): Promise<Preview> => {
+  const descriptor = assets[item.key];
+  const music = descriptor.type === 'music';
+  // A sound sprite ships its clip table as JSON next to the audio file.
+  const spriteTable = demoAssetCategories[item.key] === 'soundSprites' ? descriptor.source.replace(/\.[a-z0-9]+$/, '.json') : null;
+  const [playable, table] = await Promise.all([
+    music ? scope.load(descriptor as typeof assets.musicLoopMain) : scope.load(descriptor as typeof assets.soundUiClick),
+    spriteTable ? scope.load(Asset.type<Record<string, { start: number; end: number }>>('json', spriteTable)) : Promise.resolve(null),
+  ]);
+  const clips = table ? Object.keys(table) : [];
+  const audio = scene.app.audio;
+  const state = { clip: clips[0] ?? '', volume: 0.8, loop: false };
+  let voice: Voice | null = null;
+  let pendingStart: (() => void) | null = null;
+  let status: ((text: string) => void) | null = null;
+  let reported = '';
+  const waveform = new Graphics();
+  const playhead = new Graphics();
+  const live = new Graphics();
+  const analyser = new AudioAnalyser();
+  const bright = new Color(127, 184, 255);
+  const dim = new Color(127, 184, 255, 0.25);
+  const muted = new Color(138, 160, 196);
+  const buffer = music ? null : (playable as Sound).audioBuffer;
+  const channels = buffer?.numberOfChannels ?? 0;
+  const channelNames = channels === 2 ? ['L', 'R'] : Array.from({ length: channels }, (_, channel) => String(channel + 1));
+  const wave = { width: PREVIEW.width - 80, height: channels > 1 ? 300 : 220, gap: 16, left: PREVIEW.x + 40 };
+  // A sound keeps its overview on top and the live signal in a strip below;
+  // streamed music has no overview, so the live signal takes the middle.
+  const scopeHeight = buffer ? 100 : 220;
+  const top = buffer ? PREVIEW_CENTER.y - (wave.height + 48 + scopeHeight) / 2 : PREVIEW_CENTER.y - scopeHeight / 2;
+  const lane = { height: (wave.height - wave.gap * Math.max(0, channels - 1)) / Math.max(1, channels), top };
+  const strip = { top: buffer ? top + wave.height + 48 : top, height: scopeHeight };
+  const label = (text: string, y: number): Text =>
+    new Text(text, { fontSize: 14, fontFamily: MONO, fillColor: muted }).setAnchor(1, 0.5).setPosition(wave.left - 10, y);
+  const labels = [
+    ...(channels > 1
+      ? channelNames.map((name, channel) => label(name, lane.top + channel * (lane.height + wave.gap) + lane.height / 2))
+      : []),
+    ...(buffer
+      ? [
+          new Text('Live signal', { fontSize: 14, fontFamily: MONO, fillColor: muted })
+            .setAnchor(0, 1)
+            .setPosition(wave.left, strip.top - 8),
+        ]
+      : []),
+  ];
+  const caption = new Text(music ? 'Press Play to see the live signal' : '', { fontSize: 18, fillColor: muted });
+
+  // A decoded sound draws one lane per channel: a min/max bar per column, with
+  // the selected sprite clip highlighted across all lanes.
+  const drawWaveform = (): void => {
+    waveform.clear();
+
+    if (!buffer) {
       return;
     }
 
-    // Category still fetching (lazy-load): keep the sidebar interactive
-    // and show a placeholder instead of an empty preview.
-    if (!this.loadedCats.has(this.cat)) {
-      this.txtLoading.setPosition(PREVIEW_X + PREVIEW_W / 2 - 70, H / 2 - 10);
-      context.render(this.txtLoading);
-      this.drawInfoBar(context);
+    const clip = table && state.clip ? table[state.clip] : undefined;
 
-      return;
+    if (clip) {
+      waveform.fillColor = new Color(127, 184, 255, 0.16);
+      waveform.drawRectangle(
+        wave.left + (clip.start / buffer.duration) * wave.width,
+        lane.top,
+        ((clip.end - clip.start) / buffer.duration) * wave.width,
+        wave.height,
+      );
     }
 
-    switch (this.cat) {
-      case 'textures':
-        this.drawTexPreview(context);
-        break;
-      case 'sprites':
-        this.drawSprPreview(context);
-        break;
-      case 'spritesheets':
-        this.drawSshPreview(context);
-        break;
-      case 'svg':
-        this.drawSvgPreview(context);
-        break;
-      case 'audio':
-        this.drawAudioPreview(context, this.audioMusics);
-        break;
-      case 'sound':
-        this.drawAudioPreview(context, this.soundMusics);
-        break;
-      case 'music':
-        this.drawAudioPreview(context, this.musicMusics);
-        break;
-      case 'soundSprites':
-        this.drawSoundSpritePreview(context);
-        break;
-      case 'fonts':
-        this.drawFontPreview(context);
-        break;
-      case 'video':
-        this.drawVideoPreview(context);
-        break;
-      case 'inputPrompts':
-        this.drawInpPreview(context);
-        break;
-      case 'technical':
-        this.drawTechPreview(context);
-        break;
-      case 'backgrounds':
-        this.drawBgPreview(context);
-        break;
-      case 'cursors':
-        this.drawCursorPreview(context);
-        break;
-      case 'tilesets':
-        this.drawTilesetPreview(context);
-        break;
-      case 'vendor':
-        this.drawVendorPreview(context);
-        break;
-    }
+    for (let channel = 0; channel < channels; channel += 1) {
+      const samples = buffer.getChannelData(channel);
+      const middle = lane.top + channel * (lane.height + wave.gap) + lane.height / 2;
+      const scale = lane.height / 2;
 
-    this.drawInfoBar(context);
-  }
+      waveform.fillColor = dim;
+      waveform.drawRectangle(wave.left, middle - 0.5, wave.width, 1);
+      waveform.fillColor = bright;
 
-  private drawInfoBar(context: RenderingContext): void {
-    const g = this.gInfoBar;
-    g.clear();
-    g.fillColor = C.infoBar;
-    g.drawRectangle(PREVIEW_X, PREVIEW_Y, PREVIEW_W, 44);
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawLine(PREVIEW_X, PREVIEW_Y + 44, W, PREVIEW_Y + 44);
-    context.render(g);
-
-    if (!this.key) {
-      return;
-    }
+      for (let column = 0; column < wave.width; column += 2) {
+        const from = Math.floor((column / wave.width) * samples.length);
+        const to = Math.max(from + 1, Math.floor(((column + 2) / wave.width) * samples.length));
+        let low = 0;
+        let high = 0;
 
-    this.txtKey.text = this.assetExpression();
-    this.txtKey.setPosition(PREVIEW_X + 10, PREVIEW_Y + 5);
-    context.render(this.txtKey);
+        for (let index = from; index < to; index += 1) {
+          low = Math.min(low, samples[index]!);
+          high = Math.max(high, samples[index]!);
+        }
 
-    this.txtPath.text = this.assetPath();
-    this.txtPath.setPosition(PREVIEW_X + 10, PREVIEW_Y + 24);
-    context.render(this.txtPath);
+        waveform.drawRectangle(wave.left + column, middle - high * scale, 1.5, Math.max(1, (high - low) * scale));
+      }
+    }
+  };
 
-    const ext = this.typeLabel();
+  // The analyser's window is the last few milliseconds the voice produced,
+  // down-mixed to one channel - an oscilloscope, not a second overview.
+  const drawLive = (signal: Float32Array | null): void => {
+    const middle = strip.top + strip.height / 2;
+    const scale = strip.height / 2;
 
-    if (ext) {
-      this.txtType.text = ext;
-      this.txtType.setPosition(PREVIEW_X + PREVIEW_W - 160, PREVIEW_Y + 15);
-      context.render(this.txtType);
-    }
+    live.clear();
+    live.fillColor = dim;
+    live.drawRectangle(wave.left, middle - 0.5, wave.width, 1);
 
-    if (!this.copyBtnBg) {
-      this.copyBtnBg = new Graphics();
+    if (!signal) {
+      return;
     }
 
-    const copyX = PREVIEW_X + PREVIEW_W - 84;
-    const copyY = PREVIEW_Y + 9;
-    this.copyBtnBg.clear();
-    this.copyBtnBg.fillColor = C.btnDark;
-    this.copyBtnBg.lineWidth = 1;
-    this.copyBtnBg.lineColor = C.border;
-    this.copyBtnBg.drawRectangle(copyX, copyY, 72, 26);
-    context.render(this.copyBtnBg);
-    this.txtCopy.setPosition(copyX + 10, copyY + 7);
-    context.render(this.txtCopy);
-  }
+    live.fillColor = bright;
 
-  private previewCenter(): { cx: number; cy: number; maxW: number; maxH: number } {
-    return {
-      cx: PREVIEW_X + PREVIEW_W / 2,
-      cy: PREVIEW_Y + 44 + (PREVIEW_H - 44) / 2,
-      maxW: PREVIEW_W - 80,
-      maxH: PREVIEW_H - 80,
-    };
-  }
+    for (let column = 0; column < wave.width; column += 2) {
+      const from = Math.floor((column / wave.width) * signal.length);
+      const to = Math.max(from + 1, Math.floor(((column + 2) / wave.width) * signal.length));
+      let low = 0;
+      let high = 0;
 
-  private fitSprite(sprite: Sprite, maxW: number, maxH: number, cx: number, cy: number): void {
-    const tex = sprite.texture;
+      for (let index = from; index < to; index += 1) {
+        low = Math.min(low, signal[index]!);
+        high = Math.max(high, signal[index]!);
+      }
 
-    if (!tex) {
-      return;
+      live.drawRectangle(wave.left + column, middle - high * scale, 1.5, Math.max(1, (high - low) * scale));
     }
+  };
 
-    const tw = tex.width || 128;
-    const th = tex.height || 128;
-    const scale = Math.min(maxW / tw, maxH / th, 3);
-    sprite.setScale(scale);
-    sprite.setPosition(cx, cy);
-  }
-
-  private drawTexPreview(context: RenderingContext): void {
-    const sprite = this.texSprites.get(this.key ?? '');
+  const drawPlayhead = (): void => {
+    playhead.clear();
 
-    if (!sprite) {
+    if (!buffer || !voice || voice.ended || !('time' in voice)) {
       return;
     }
 
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH, cx, cy);
-    context.render(sprite);
-  }
+    // A sprite voice reports its time from the start of its clip.
+    const offset = table && state.clip ? (table[state.clip]?.start ?? 0) : 0;
+    const x = wave.left + ((offset + (voice as Voice & { time: number }).time) / buffer.duration) * wave.width;
 
-  private drawSprPreview(context: RenderingContext): void {
-    const ss = this.sprSheets.get(this.key ?? '');
+    playhead.fillColor = Color.white;
+    playhead.drawRectangle(x - 0.75, lane.top, 1.5, wave.height);
+  };
 
-    if (!ss) {
-      return;
-    }
+  caption.setAnchor(0.5).setPosition(PREVIEW_CENTER.x, strip.top + strip.height + 40);
+  drawWaveform();
+  drawLive(null);
 
-    const frames = [...ss.sprites.keys()];
+  const target = (): Sound | AudioStream => (clips.length > 0 ? (playable as Sound).sprite(state.clip) : playable);
+  const pausable = (candidate: Voice | null): (Voice & { paused: boolean; pause(): void; resume(): void }) | null =>
+    candidate && 'pause' in candidate && 'resume' in candidate
+      ? (candidate as Voice & { paused: boolean; pause(): void; resume(): void })
+      : null;
 
-    if (!frames.length) {
-      return;
-    }
+  const play = (): void => {
+    const current = pausable(voice);
 
-    const sprite = ss.getFrameSprite(frames[this.frameIdx % frames.length]);
-    sprite.setAnchor(0.5);
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 50, cx, cy);
-    context.render(sprite);
-    this.drawAnimControls(context, frames.length);
-  }
+    if (current && !current.ended && current.paused) {
+      current.resume();
 
-  private drawSshPreview(context: RenderingContext): void {
-    const ss = this.sshSheets.get(this.key ?? '');
-
-    if (!ss) {
       return;
     }
 
-    const frames = [...ss.sprites.keys()];
-
-    if (!frames.length) {
+    if (pendingStart || (voice && !voice.ended)) {
       return;
     }
 
-    const sprite = ss.getFrameSprite(frames[this.frameIdx % frames.length]);
-    sprite.setAnchor(0.5);
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 50, cx, cy);
-    context.render(sprite);
-    this.drawAnimControls(context, frames.length);
-  }
-
-  private drawInpPreview(context: RenderingContext): void {
-    const ss = this.inpSheets.get(this.key ?? '');
-
-    if (ss) {
-      const frames = [...ss.sprites.keys()];
-
-      if (frames.length > 0) {
-        const sprite = ss.getFrameSprite(frames[this.frameIdx % frames.length]);
-        sprite.setAnchor(0.5);
-        const { cx, cy, maxW, maxH } = this.previewCenter();
-        this.fitSprite(sprite, maxW, maxH - 50, cx, cy);
-        context.render(sprite);
-        this.drawAnimControls(context, frames.length);
+    // Runs once audio is usable - at once when it already is, after the
+    // visitor's first gesture otherwise. Removed again by Stop and on switch,
+    // so a start that is still waiting never plays for another selection.
+    pendingStart = () => {
+      pendingStart = null;
 
+      if (!isCurrent()) {
         return;
       }
-    }
-  }
-
-  private drawSvgPreview(context: RenderingContext): void {
-    const sprite = this.svgSprites.get(this.key ?? '');
-
-    if (!sprite) {
-      return;
-    }
-
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH, cx, cy);
-    context.render(sprite);
-  }
-
-  private drawAudioPreview(context: RenderingContext, musicMap: Map<string, AudioStream>): void {
-    if (!this.audioG) {
-      this.audioG = new Graphics();
-    }
-
-    const music = musicMap.get(this.key ?? '');
-    const isPlaying = music ? this.previewIsPlaying() : false;
-    const g = this.audioG;
-    const { cx, cy } = this.previewCenter();
-    const bx = cx - 50;
-    const by = cy - 28;
-    g.clear();
-    g.fillColor = isPlaying ? C.btnGreen : C.btnDark;
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawRectangle(bx, by, 100, 56);
-    context.render(g);
-
-    this.txtAudioIcon.text = isPlaying ? '⏸' : '▶';
-    this.txtAudioIcon.setPosition(bx + (isPlaying ? 30 : 34), by + 10);
-    context.render(this.txtAudioIcon);
-
-    this.txtMeta.text = this.typeLabel();
-    this.txtMeta.setPosition(cx - 15, by + 68);
-    context.render(this.txtMeta);
-  }
 
-  private drawSoundSpritePreview(context: RenderingContext): void {
-    if (!this.audioG) {
-      this.audioG = new Graphics();
-    }
+      voice = audio.play(target(), { volume: state.volume, loop: state.loop });
+      analyser.source = voice;
+      console.log(`Playing ${item.name}${clips.length > 0 ? ` / ${state.clip}` : ''}`);
+    };
 
-    const music = this.soundSpriteAudio.get(this.key ?? '');
-    const data = this.soundSpriteData.get(this.key ?? '');
-    const isPlaying = music ? this.previewIsPlaying() : false;
-    const sprites = data?.sprites ?? {};
-
-    const g = this.audioG;
-    const { cx } = this.previewCenter();
-    const bx = cx - 50;
-    const by = PREVIEW_Y + 56;
-
-    g.clear();
-    g.fillColor = isPlaying ? C.btnGreen : C.btnDark;
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawRectangle(bx, by, 100, 44);
-    context.render(g);
-
-    this.txtAudioIcon.text = isPlaying ? '⏸' : '▶';
-    this.txtAudioIcon.setPosition(bx + (isPlaying ? 30 : 34), by + 6);
-    context.render(this.txtAudioIcon);
-
-    let y = by + 64;
-
-    for (const [name, info] of Object.entries(sprites)) {
-      this.txtMeta.text = `${name}  start:${info.start.toFixed(3)}s  dur:${info.duration.toFixed(3)}s`;
-      this.txtMeta.setPosition(PREVIEW_X + 30, y);
-      context.render(this.txtMeta);
-      y += 20;
-
-      if (y > H - 20) {
-        break;
+    audio.onUnlock.add(pendingStart);
+
+    if (audio.locked) {
+      status?.('Waiting for the browser to allow audio...');
+    }
+  };
+
+  const stop = (): void => {
+    if (pendingStart) {
+      audio.onUnlock.remove(pendingStart);
+      pendingStart = null;
+    }
+
+    voice?.stop();
+    voice = null;
+    analyser.source = null;
+  };
+
+  return {
+    world: [],
+    overlay: [waveform, playhead, live, caption, ...labels],
+    bounds: null,
+    facts: [
+      ['Kind', music ? 'Music, streamed from an audio element' : 'Sound, decoded into memory'],
+      ['Duration', formatSeconds(playable.duration)],
+      ...(buffer ? [['Channels', channels === 1 ? 'Mono' : channels === 2 ? 'Stereo' : String(channels)] as const] : []),
+      ...(clips.length > 0 ? [['Clips', clips.join(', ')] as const] : []),
+    ],
+    mount(host) {
+      const panel = host({
+        title: music ? 'Music' : 'Sound',
+        controls: {
+          ...(clips.length > 0 ? { clip: choice('Clip', clips) } : {}),
+          volume: slider('Volume', { min: 0, max: 1, step: 0.05, value: state.volume, format: volume => `${Math.round(volume * 100)}%` }),
+          loop: toggle('Loop', state.loop),
+        },
+        actions: {
+          Play: play,
+          Pause: () => {
+            const current = pausable(voice);
+
+            if (current && !current.ended) {
+              current.pause();
+            }
+          },
+          Stop: stop,
+          Code: () => scene.showCode(),
+        },
+        onChange(key, value) {
+          if (key === 'clip') {
+            state.clip = value as string;
+            stop();
+            drawWaveform();
+          } else if (key === 'volume') {
+            state.volume = value as number;
+
+            if (voice) {
+              voice.volume = state.volume;
+            }
+          } else if (key === 'loop') {
+            state.loop = value as boolean;
+          }
+        },
+      });
+
+      status = text => panel.status(text);
+      panel.status('Press Play to listen.');
+    },
+    update() {
+      const current = pausable(voice);
+      const text = pendingStart
+        ? audio.locked
+          ? 'Waiting for the browser to allow audio...'
+          : 'Starting...'
+        : !voice || voice.ended
+          ? 'Stopped'
+          : current?.paused
+            ? 'Paused'
+            : 'Playing';
+
+      if (text !== reported) {
+        reported = text;
+        status?.(text);
       }
-    }
-  }
 
-  private drawFontPreview(context: RenderingContext): void {
-    const family = this.fontFamilies.get(this.key ?? '');
-
-    if (!family) {
-      this.txtMeta.text = `Font: ${this.key}\n${this.assetPath()}`;
-      this.txtMeta.setPosition(PREVIEW_X + 40, PREVIEW_Y + 80);
-      context.render(this.txtMeta);
+      const playing = text === 'Playing' || text === 'Paused';
+
+      caption.visible = !playing;
+      drawLive(playing ? analyser.getWaveformFloat() : null);
+      drawPlayhead();
+    },
+    snippet: () => audioSnippet(item, { ...state, music, clip: clips.length > 0 ? state.clip : null }),
+    dispose() {
+      stop();
+      status = null;
+      analyser.destroy();
+      waveform.destroy();
+      playhead.destroy();
+      live.destroy();
+      caption.destroy();
+      labels.forEach(text => text.destroy());
+    },
+  };
+};
 
+const openVideo = async ({ scene, item, scope, manifest, isCurrent }: PreviewContext): Promise<Preview> => {
+  const video = await scope.load(assets[item.key] as typeof assets.videoDemoLoop);
+  const element = video.videoElement;
+  const meta = manifest?.media;
+  const audio = scene.app.audio;
+  const state = { muted: true, loop: true, rate: '1x' as '0.5x' | '1x' | '2x', zoom: 1 };
+  let pendingStart: (() => void) | null = null;
+  let panel: { set(key: 'position', value: number): void; status(text: string): void } | null = null;
+  let syncing = false;
+  let mounted = false;
+  let since = 0;
+
+  const play = (): void => {
+    if (pendingStart || video.playing) {
       return;
     }
 
-    let t = this.fontSampleTexts.get(this.key ?? '');
+    // A muted video may start at once; one with sound waits for the gesture.
+    if (video.muted) {
+      video.play();
+      console.log(`Playing ${item.name}`);
 
-    if (!t) {
-      t = new Text('AaBbCc 123 !?', { fontFamily: family, fontSize: 48, fillColor: C.white });
-      this.fontSampleTexts.set(this.key ?? '', t);
+      return;
     }
 
-    t.style.fillColor = this.bgIdx === 0 ? C.black : C.white;
-    t.setPosition(PREVIEW_X + 40, PREVIEW_Y + 120);
-    context.render(t);
+    pendingStart = () => {
+      pendingStart = null;
 
-    let t2 = this.fontSampleTexts.get(`${this.key}_sm`);
+      if (isCurrent()) {
+        video.play();
+        console.log(`Playing ${item.name} with sound`);
+      }
+    };
 
-    if (!t2) {
-      t2 = new Text('The quick brown fox jumps over the lazy dog', { fontFamily: family, fontSize: 20, fillColor: C.dim });
-      this.fontSampleTexts.set(`${this.key}_sm`, t2);
-    }
+    audio.onUnlock.add(pendingStart);
+  };
+
+  const cancelStart = (): void => {
+    if (pendingStart) {
+      audio.onUnlock.remove(pendingStart);
+      pendingStart = null;
+    }
+  };
+
+  const frameRate = meta?.video?.frameRate?.split('/').map(Number);
+
+  return {
+    world: [video],
+    overlay: [],
+    bounds: { width: video.width, height: video.height },
+    facts: [
+      ['Resolution', `${element.videoWidth} x ${element.videoHeight}`],
+      ['Duration', formatSeconds(video.duration)],
+      ...(meta?.container ? [['Container', meta.container] as const] : []),
+      ...(meta?.video?.codec ? [['Video', [meta.video.codec, meta.video.profile].filter(Boolean).join(' ')] as const] : []),
+      ...(frameRate && frameRate.length === 2
+        ? [['Frame rate', `${(frameRate[0]! / frameRate[1]!).toFixed(2).replace(/\.00$/, '')} fps`] as const]
+        : []),
+      ...(meta?.video?.pixelFormat
+        ? [['Pixels', `${meta.video.pixelFormat}${meta.video.bitDepth ? `, ${meta.video.bitDepth}-bit` : ''}`] as const]
+        : []),
+      ...(meta?.audio?.codec
+        ? [['Audio', `${meta.audio.codec}, ${meta.audio.channels ?? '?'} ch`] as const]
+        : ([['Audio', 'none']] as const)),
+      // The file's dynamic range is metadata; the preview renders it through
+      // the regular canvas pipeline either way.
+      ...(meta?.dynamicRange ? [['Dynamic range', `${meta.dynamicRange} (file metadata)`] as const] : []),
+    ],
+    mount(host) {
+      const duration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : 1;
+      const handle = host({
+        title: 'Video',
+        controls: {
+          zoom: zoomSlider(),
+          position: slider('Position', { min: 0, max: duration, step: duration / 200, value: 0, format: formatSeconds }),
+          muted: toggle('Muted', state.muted),
+          loop: toggle('Loop', state.loop),
+          rate: choice('Speed', ['0.5x', '1x', '2x'] as const, state.rate),
+        },
+        actions: {
+          Play: play,
+          Pause: () => {
+            cancelStart();
+            video.pause();
+          },
+          Stop: () => {
+            cancelStart();
+            video.stop();
+          },
+          Fit: () => scene.fit(),
+          Code: () => scene.showCode(),
+        },
+        onChange(key, value) {
+          if (key === 'zoom') {
+            state.zoom = value as number;
+            scene.setZoom(value as number);
+          } else if (key === 'position' && !syncing) {
+            video.currentTime = value as number;
+          } else if (key === 'muted') {
+            state.muted = value as boolean;
+            video.muted = state.muted;
+          } else if (key === 'loop') {
+            state.loop = value as boolean;
+            video.loop = state.loop;
+          } else if (key === 'rate') {
+            state.rate = value as typeof state.rate;
+            video.playbackRate = Number.parseFloat(state.rate);
+          }
+        },
+      });
+
+      panel = handle;
+      mounted = true;
+      video.applyOptions({ loop: state.loop, muted: state.muted });
+      video.pause();
+      scene.bindZoom(handle);
+      handle.status('Press Play to start.');
+    },
+    update(delta) {
+      since += delta;
+
+      if (panel && since >= 0.25) {
+        since = 0;
+        syncing = true;
+        panel.set('position', video.currentTime);
+        syncing = false;
+        panel.status(pendingStart ? 'Waiting for the browser to allow audio...' : video.playing ? 'Playing' : 'Paused');
+      }
+    },
+    snippet: () => videoSnippet(item, state),
+    dispose() {
+      cancelStart();
+      panel = null;
+
+      // The video belongs to the scope and may be shared with a newer preview
+      // of the same asset, so only a preview that was mounted pauses it.
+      if (mounted) {
+        video.pause();
+      }
+    },
+  };
+};
 
-    t2.style.fillColor = this.bgIdx === 0 ? C.dimDark : C.dim;
-    t2.setPosition(PREVIEW_X + 40, PREVIEW_Y + 190);
-    context.render(t2);
-  }
+const measureContext = document.createElement('canvas').getContext('2d');
 
-  private drawVideoPreview(context: RenderingContext): void {
-    this.txtMeta.text = `VIDEO\n\nKey: assets.video.${this.key}\nURL: ${this.assetPath()}\n\nOpen the URL in your browser to preview.`;
-    this.txtMeta.setPosition(PREVIEW_X + 40, PREVIEW_Y + 80);
-    context.render(this.txtMeta);
+const measureWidth = (text: string, font: string): number => {
+  if (!measureContext) {
+    return text.length * 0.6 * Number.parseFloat(font);
   }
 
-  private drawTechPreview(context: RenderingContext): void {
-    if (!this.key?.includes('.')) {
-      return;
-    }
-
-    const sprite = this.techSprites.get(this.key);
+  measureContext.font = font;
 
-    if (!sprite) {
-      return;
-    }
-
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 28, cx, cy - 14);
-    context.render(sprite);
-
-    const subcat = this.key.split('.')[0];
-    const purpose = TECH_PURPOSE[subcat] ?? '';
-
-    if (purpose) {
-      this.txtTechPurpose.text = purpose;
-      this.txtTechPurpose.setPosition(PREVIEW_X + 16, PREVIEW_Y + PREVIEW_H - 22);
-      context.render(this.txtTechPurpose);
-    }
-  }
+  return measureContext.measureText(text).width;
+};
 
-  private drawBgPreview(context: RenderingContext): void {
-    const sprite = this.bgSprites.get(this.key ?? '');
+const SAMPLE_TEXT = 'The quick brown fox jumps over the lazy dog';
+
+const openFont = async ({ scene, item, scope }: PreviewContext): Promise<Preview> => {
+  const descriptor = assets[item.key];
+  const bitmap = descriptor.type === 'bmFont';
+  const font: BmFont | null = bitmap ? await scope.load(descriptor as typeof assets.fontKenneyBlocksFnt) : null;
+  const face: FontFace | null = bitmap ? null : await scope.load(descriptor as typeof assets.fontKenneyFuture);
+  const family = face ? face.family.replaceAll('"', '') : '';
+  const state = { text: SAMPLE_TEXT, size: 40, color: 'White' as 'White' | 'Gold' | 'Ink' };
+  const colors = { White: Color.white, Gold: new Color(255, 214, 102), Ink: new Color(28, 32, 44) };
+  const lines: Array<Text | BitmapText> = [];
+  const preview: Preview & { overlay: RenderNode[] } = {
+    world: [],
+    overlay: [],
+    bounds: null,
+    facts: bitmap
+      ? [['Kind', 'Bitmap font (.fnt with page textures)']]
+      : [
+          ['Family', family],
+          ['Kind', 'Font face, registered with the document'],
+        ],
+    mount(host) {
+      const panel = host({
+        title: 'Font',
+        controls: {
+          size: slider('Size', { min: 10, max: 120, step: 2, value: state.size, format: size => `${size}px` }),
+          color: choice('Colour', ['White', 'Gold', 'Ink'] as const),
+        },
+        actions: { Code: () => scene.showCode() },
+        onChange(key, value) {
+          if (key === 'size') {
+            state.size = value as number;
+          } else {
+            state.color = value as typeof state.color;
+            scene.setBackdrop(state.color === 'Ink' ? new Color(236, 239, 244) : new Color(32, 37, 50));
+          }
+
+          layout();
+        },
+      });
+      const input = document.createElement('textarea');
+
+      input.value = state.text;
+      input.rows = 2;
+      input.setAttribute('aria-label', 'Preview text');
+      Object.assign(input.style, {
+        width: '100%',
+        boxSizing: 'border-box',
+        marginTop: '8px',
+        padding: '6px 8px',
+        borderRadius: '8px',
+        border: '1px solid rgba(154, 193, 255, 0.32)',
+        background: 'rgba(154, 193, 255, 0.08)',
+        color: 'inherit',
+        font: `13px ${FONT}`,
+        resize: 'vertical',
+      });
+      input.addEventListener('input', () => {
+        state.text = input.value;
+        layout();
+      });
+      input.addEventListener('change', () => console.log(`Preview text: "${input.value}"`));
+      panel.element.append(input);
+    },
+    snippet: () => fontSnippet(item, { ...state, bitmap }),
+    dispose() {
+      for (const line of lines) {
+        line.destroy();
+      }
+    },
+  };
 
-    if (!sprite) {
-      return;
+  const layout = (): void => {
+    for (const line of lines.splice(0)) {
+      line.destroy();
     }
 
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH, cx, cy);
-    context.render(sprite);
-  }
+    const sizes = [state.size, Math.round(state.size * 0.6), Math.round(state.size * 0.4)];
+    let y = 60;
 
-  private drawCursorPreview(context: RenderingContext): void {
-    const sprite = this.cursorSprites.get(this.key ?? '');
+    for (const size of sizes) {
+      const line = font
+        ? new BitmapText(state.text, font).setScale(size / 32)
+        : new Text(state.text, { fontFamily: family, fontSize: size, fillColor: colors[state.color], maxWidth: PREVIEW.width - 64 });
+      // Text lays out lazily, so the number of wrapped lines is measured with
+      // the same font on a scratch 2D context rather than read back.
+      const wrapped = font ? 1 : Math.ceil(measureWidth(state.text, `${size}px "${family}"`) / (PREVIEW.width - 64)) + 0.2;
 
-    if (!sprite) {
-      return;
+      line.setPosition(PREVIEW.x + 32, y);
+      lines.push(line);
+      y += wrapped * size * 1.3 + 28;
     }
 
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, Math.min(maxW, 256), Math.min(maxH, 256), cx, cy);
-    context.render(sprite);
-  }
+    preview.overlay.splice(0, preview.overlay.length, ...lines);
+  };
 
-  private drawTilesetPreview(context: RenderingContext): void {
-    const sprite = this.tilesetSprites.get(this.key ?? '');
+  layout();
 
-    if (!sprite) {
-      return;
-    }
+  return preview;
+};
 
-    const entry: TilesetEntry | undefined = assets.demo.tilesets[(this.key ?? '') as keyof typeof assets.demo.tilesets];
-    const { cx, cy, maxW, maxH } = this.previewCenter();
-    this.fitSprite(sprite, maxW, maxH - 30, cx, cy - 15);
-    context.render(sprite);
+const openData = async ({ scene, item, scope }: PreviewContext): Promise<Preview> => {
+  const data: unknown = await scope.load(assets[item.key] as typeof assets.harborPlazaMap);
+
+  return {
+    world: [],
+    overlay: [],
+    bounds: null,
+    facts: [['Kind', 'JSON document']],
+    mount(host) {
+      host({ title: 'Data', controls: {}, actions: { Data: () => void scene.showData(), Code: () => scene.showCode() } });
+      void scene.showData();
+    },
+    snippet: () => dataSnippet(item),
+    data: () => Promise.resolve(data),
+    dispose() {
+      // Nothing to release beyond the scope.
+    },
+  };
+};
 
-    if (entry?.tileWidth && entry?.tileHeight) {
-      this.txtMeta.text = `tile: ${entry.tileWidth}×${entry.tileHeight}px`;
-      this.txtMeta.setPosition(PREVIEW_X + 16, PREVIEW_Y + PREVIEW_H - 22);
-      context.render(this.txtMeta);
-    }
-  }
+// --- Snippets ---------------------------------------------------------------
+//
+// Each snippet is a complete module: imports, one scene and the application,
+// using only public ExoJS APIs and the demo catalog.
 
-  private drawVendorPreview(context: RenderingContext): void {
-    const data = this.vendorData.get(this.key ?? '');
+const round = (value: number, digits = 2): number => Number(value.toFixed(digits));
 
-    if (!data) {
-      this.txtMeta.text = `Loading: ${this.assetPath()}`;
-      this.txtMeta.setPosition(PREVIEW_X + 30, PREVIEW_Y + 80);
-      context.render(this.txtMeta);
+const program = (imports: string[], body: string, options: { extensions?: string } = {}): string =>
+  `${[...imports, "import { demoAssets as assets } from '@codexo/exojs-demo-assets';"].sort().join('\n')}
 
-      return;
-    }
+class PreviewScene extends Scene {
+${body}
+}
 
-    const packs = data.packs ?? [];
-    const lines = [
-      `License: ${data.license ?? 'Unknown'}`,
-      `Packs: ${packs.length}`,
-      '',
-      ...packs.slice(0, 14).map(p => `  ${p.slug}  (${Object.values(p.fileCountByExtension ?? {}).reduce((a, b) => a + b, 0)} files)`),
-    ];
-    this.txtMeta.text = lines.join('\n');
-    this.txtMeta.setPosition(PREVIEW_X + 30, PREVIEW_Y + 60);
-    context.render(this.txtMeta);
-  }
+const app = new Application({
+  scenes: { PreviewScene },
+  canvas: { width: 1280, height: 720, mount: document.body },${options.extensions ? `\n  extensions: [${options.extensions}],` : ''}
+});
 
-  private drawAnimControls(context: RenderingContext, frameCount: number): void {
-    if (!this.animG) {
-      this.animG = new Graphics();
-    }
+await app.start(PreviewScene);
+`;
+
+const textureSnippet = (item: BrowserItem, state: { zoom: number; nearest: boolean; width: number; height: number }): string => {
+  const svg = assets[item.key].type === 'svg';
+  const scale = round(state.zoom);
+  const names = [
+    'Application',
+    'Scene',
+    'Sprite',
+    ...(svg ? ['Texture'] : []),
+    ...(state.nearest ? (svg ? ['ScaleModes'] : ['Asset', 'ScaleModes']) : []),
+  ].sort();
+  const load = svg
+    ? `    // An SVG loads as an image; the texture over it is yours to destroy.
+    const image = await this.loader.load(assets.${item.key});
+    const texture = new Texture(image${state.nearest ? ', { scaleMode: ScaleModes.Nearest }' : ''});`
+    : state.nearest
+      ? `    // Sampling is part of the texture handle, chosen when it is loaded.
+    const texture = await this.loader.load(
+      Asset.type('texture', assets.${item.key}.source, { textureOptions: { scaleMode: ScaleModes.Nearest } }),
+    );`
+      : `    const texture = await this.loader.load(assets.${item.key});`;
+
+  return program(
+    [`import { ${names.join(', ')} } from '@codexo/exojs';`],
+    `  override async load(): Promise<void> {
+${load}
+    const sprite = new Sprite(texture).setAnchor(0.5).setScale(${scale}).setPosition(640, 360);
+
+    this.addChild(sprite);
+  }`,
+  );
+};
 
-    const g = this.animG;
-    const bx = PREVIEW_X + 16;
-    const by = H - 48;
-    g.clear();
-    g.fillColor = this.animPlaying ? C.active : C.btnDark;
-    g.lineWidth = 1;
-    g.lineColor = C.border;
-    g.drawRectangle(bx, by, 88, 30);
-    context.render(g);
-
-    this.txtAnimPlay.text = this.animPlaying ? '⏸ PAUSE' : '▶ PLAY';
-    this.txtAnimPlay.setPosition(bx + 14, by + 8);
-    context.render(this.txtAnimPlay);
-
-    this.txtAnimFrame.text = `${(this.frameIdx % frameCount) + 1} / ${frameCount}`;
-    this.txtAnimFrame.setPosition(PREVIEW_X + 112, by + 10);
-    context.render(this.txtAnimFrame);
-  }
+const spritesheetSnippet = (
+  item: BrowserItem,
+  state: { animation: string; frames: string[]; fps: number; loop: boolean; scale: number },
+): string => {
+  const named = state.animation !== 'Frame range';
+  const frames = named
+    ? `sheet.getAnimationFrameNames(${JSON.stringify(state.animation)}).map(name => sheet.getFrame(name))`
+    : `[${state.frames.map(name => JSON.stringify(name)).join(', ')}].map(name => sheet.getFrame(name))`;
+
+  return program(
+    ["import { AnimatedSprite, Application, Scene, Spritesheet } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const [texture, data] = await Promise.all([this.loader.load(assets.${item.key}), this.loader.load(assets.${item.atlasKey})]);
+    const sheet = new Spritesheet(texture, data);
+    const sprite = new AnimatedSprite(texture, {
+      preview: { frames: ${frames}, fps: ${state.fps}, repeat: ${state.loop ? -1 : 1} },
+    });
+
+    sprite.setAnchor(0.5).setScale(${round(state.scale)}).setPosition(640, 360);
+    this.addChild(sprite);
+    sprite.play('preview');
+  }`,
+  );
+};
+
+const mapSnippet = (item: BrowserItem, state: { level: string; zoom: number; ldtk: boolean }): string =>
+  state.ldtk
+    ? program(
+        [
+          "import { Application, Asset, Scene } from '@codexo/exojs';",
+          "import { TileMapNode } from '@codexo/exojs/tilemap';",
+          "import { ldtkExtension } from '@codexo/exojs-ldtk';",
+        ],
+        `  override async load(): Promise<void> {
+    // Tileset paths resolve against the world's URL, so load it from the catalog's absolute source.
+    const world = await this.loader.load(Asset.type('ldtkMap', assets.${item.key}.source));
+    const level = world.getLevelByName(${JSON.stringify(state.level)}) ?? world.levels[0]!;
+
+    this.addChild(new TileMapNode(level).setScale(${round(state.zoom)}));
+  }`,
+        { extensions: 'ldtkExtension' },
+      )
+    : program(
+        [
+          "import { Application, Asset, Scene } from '@codexo/exojs';",
+          "import { TileMapNode } from '@codexo/exojs/tilemap';",
+          "import { tiledExtension } from '@codexo/exojs-tiled';",
+        ],
+        `  override async load(): Promise<void> {
+    // Tileset images resolve against the map's URL, so load it from the catalog's absolute source.
+    const map = await this.loader.load(Asset.type('tileMap', assets.${item.key}.source));
+
+    this.addChild(new TileMapNode(map).setScale(${round(state.zoom)}));
+  }`,
+        { extensions: 'tiledExtension' },
+      );
+
+const audioSnippet = (item: BrowserItem, state: { music: boolean; clip: string | null; volume: number; loop: boolean }): string =>
+  program(
+    ["import { Application, Scene } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const ${state.music ? 'music' : 'sound'} = await this.loader.load(assets.${item.key});
+
+    // Browsers keep audio locked until the first click or key press;
+    // onUnlock runs the handler as soon as playback is allowed.
+    this.app.audio.onUnlock.add(() => {
+      this.app.audio.play(${state.music ? 'music' : state.clip ? `sound.sprite(${JSON.stringify(state.clip)})` : 'sound'}, { volume: ${round(state.volume)}, loop: ${state.loop} });
+    });
+  }`,
+  );
+
+const videoSnippet = (item: BrowserItem, state: { muted: boolean; loop: boolean; rate: string; zoom: number }): string =>
+  program(
+    ["import { Application, Scene } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const video = await this.loader.load(assets.${item.key});
+
+    video.applyOptions({ loop: ${state.loop}, muted: ${state.muted}, playbackRate: ${Number.parseFloat(state.rate)} });
+    video.setAnchor(0.5).setScale(${round(state.zoom)}).setPosition(640, 360);
+    this.addChild(video);
+${
+  state.muted
+    ? '    // A muted video may start without a user gesture.\n    video.play();'
+    : '    // With sound, playback waits for the gesture that unlocks audio.\n    this.app.audio.onUnlock.add(() => video.play());'
 }
+  }`,
+  );
+
+const fontSnippet = (item: BrowserItem, state: { text: string; size: number; bitmap: boolean }): string =>
+  state.bitmap
+    ? program(
+        ["import { Application, BitmapText, Scene } from '@codexo/exojs';"],
+        `  override async load(): Promise<void> {
+    const font = await this.loader.load(assets.${item.key});
+
+    this.addChild(new BitmapText(${JSON.stringify(state.text)}, font).setScale(${round(state.size / 32)}).setPosition(40, 60));
+  }`,
+      )
+    : program(
+        ["import { Application, Color, Scene, Text } from '@codexo/exojs';"],
+        `  override async load(): Promise<void> {
+    // Loading a font registers its face with the document.
+    const face = await this.loader.load(assets.${item.key});
+    const text = new Text(${JSON.stringify(state.text)}, {
+      fontFamily: face.family.replaceAll('"', ''),
+      fontSize: ${state.size},
+      fillColor: Color.white,
+    });
+
+    this.addChild(text.setPosition(40, 60));
+  }`,
+      );
+
+const dataSnippet = (item: BrowserItem): string =>
+  program(
+    ["import { Application, Scene } from '@codexo/exojs';"],
+    `  override async load(): Promise<void> {
+    const data = await this.loader.load(assets.${item.key});
+
+    console.log(Object.keys(data as object));
+  }`,
+  );
 
 const app = new Application({
   scenes: { AssetBrowserScene },
-  canvas: { width: W, height: H, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
-  clearColor: C.bg,
+  canvas: { width: STAGE.width, height: STAGE.height, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
+  clearColor: new Color(32, 37, 50),
+  extensions: [tiledExtension, ldtkExtension],
 });
 
 await app.start(AssetBrowserScene);
diff --git a/examples/debug-layer/bounding-boxes.js b/examples/debug-layer/bounding-boxes.js
index 800cd4062..0ac0f290a 100644
--- a/examples/debug-layer/bounding-boxes.js
+++ b/examples/debug-layer/bounding-boxes.js
@@ -1,6 +1,7 @@
 // Auto-generated from bounding-boxes.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class BoundingBoxesScene extends Scene {
   sprites;
   time = 0;
@@ -11,7 +12,7 @@ class BoundingBoxesScene extends Scene {
     const margin = width * 0.12;
     const step = (width - 2 * margin) / (count - 1);
     this.sprites = Array.from({ length: count }, (_, i) => {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(0.8);
+      const sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(0.8);
       sprite.setPosition(margin + i * step, height / 2 + Math.sin(i) * 80);
       // The boundingBoxes layer walks the SCENE GRAPH (scene.root), so
       // the sprites must be attached to it - nodes that are only passed
@@ -39,9 +40,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 const debug = new DebugOverlay(app);
 debug.layers.boundingBoxes.visible = true;
diff --git a/examples/debug-layer/bounding-boxes.ts b/examples/debug-layer/bounding-boxes.ts
index 045bff316..d1d31884c 100644
--- a/examples/debug-layer/bounding-boxes.ts
+++ b/examples/debug-layer/bounding-boxes.ts
@@ -1,5 +1,6 @@
 import { Application, Color, FixedResolutionCanvasSizing, Scene, type Seconds, Sprite } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class BoundingBoxesScene extends Scene {
   private sprites!: Array<{ sprite: Sprite; speed: number }>;
@@ -13,7 +14,7 @@ class BoundingBoxesScene extends Scene {
     const step = (width - 2 * margin) / (count - 1);
 
     this.sprites = Array.from({ length: count }, (_, i) => {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(0.8);
+      const sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(0.8);
       sprite.setPosition(margin + i * step, height / 2 + Math.sin(i) * 80);
       // The boundingBoxes layer walks the SCENE GRAPH (scene.root), so
       // the sprites must be attached to it - nodes that are only passed
@@ -46,9 +47,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 const debug = new DebugOverlay(app);
diff --git a/examples/debug-layer/performance-overlay.js b/examples/debug-layer/performance-overlay.js
index 87809a5fc..b7a756e38 100644
--- a/examples/debug-layer/performance-overlay.js
+++ b/examples/debug-layer/performance-overlay.js
@@ -1,6 +1,7 @@
 // Auto-generated from performance-overlay.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite, Time } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 // The HUD counts every frame longer than this budget, paints those rows red,
 // and plots the budget as the guide line halfway up the sparkline.
 const budgets = [Time.seconds(1 / 60), Time.seconds(1 / 30), Time.seconds(1 / 144)];
@@ -17,7 +18,7 @@ class PerformanceOverlayScene extends Scene {
     // instead emit one draw call per sprite and tank the frame rate.
     this.layer = new Container();
     this.sprites = Array.from({ length: 1600 }, () => {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(0.25);
+      const sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(0.25);
       sprite.setPosition(Math.random() * width, Math.random() * height);
       this.layer.addChild(sprite);
       return {
@@ -63,9 +64,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 const debug = new DebugOverlay(app);
 debug.layers.performance.visible = true;
diff --git a/examples/debug-layer/performance-overlay.ts b/examples/debug-layer/performance-overlay.ts
index 36b6ccc7a..e73425c8a 100644
--- a/examples/debug-layer/performance-overlay.ts
+++ b/examples/debug-layer/performance-overlay.ts
@@ -11,6 +11,7 @@ import {
   Time,
 } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 // The HUD counts every frame longer than this budget, paints those rows red,
 // and plots the budget as the guide line halfway up the sparkline.
@@ -31,7 +32,7 @@ class PerformanceOverlayScene extends Scene {
     // instead emit one draw call per sprite and tank the frame rate.
     this.layer = new Container();
     this.sprites = Array.from({ length: 1600 }, () => {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(0.25);
+      const sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(0.25);
       sprite.setPosition(Math.random() * width, Math.random() * height);
       this.layer.addChild(sprite);
 
@@ -84,9 +85,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 const debug = new DebugOverlay(app);
diff --git a/examples/debug-layer/pointer-and-hittest.js b/examples/debug-layer/pointer-and-hittest.js
index 6b82b095f..c2bb2c02a 100644
--- a/examples/debug-layer/pointer-and-hittest.js
+++ b/examples/debug-layer/pointer-and-hittest.js
@@ -1,7 +1,9 @@
 // Auto-generated from pointer-and-hittest.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
+const NAMES = ['red', 'green', 'blue'];
 class PointerAndHittestScene extends Scene {
   sprites;
   hud;
@@ -10,7 +12,7 @@ class PointerAndHittestScene extends Scene {
     const { width, height } = app;
     this.sprites = [];
     for (let i = 0; i < 3; i++) {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png'))
+      const sprite = new Sprite(this.loader.get(assets.ship))
         .setAnchor(0.5)
         .setScale(2.4)
         .setPosition(width / 2 - 45 + i * 45, height / 2);
@@ -18,20 +20,16 @@ class PointerAndHittestScene extends Scene {
       sprite.interactive = true;
       sprite.draggable = true;
       sprite.setTint([new Color(255, 130, 130), new Color(130, 255, 170), new Color(140, 190, 255)][i]);
+      // A press lands on the topmost interactive node under the pointer; the
+      // Output panel names which one the hit test picked.
+      sprite.onPointerTap.add(event => console.log(`Hit: ship ${i + 1} (${NAMES[i]}) at ${Math.round(event.x)}, ${Math.round(event.y)}`));
+      sprite.onDragEnd.add(() => console.log(`Dropped ship ${i + 1} (${NAMES[i]}) at ${Math.round(sprite.x)}, ${Math.round(sprite.y)}`));
       // The hitTest layer (and the interaction system itself) walk the
       // scene graph, so interactive nodes must live under scene.root.
       this.root.addChild(sprite);
       this.sprites.push(sprite);
     }
-    this.hud = mountControls({
-      title: 'Interaction Inspector',
-      controls: [
-        { keys: 'Drag', action: 'move an overlapping sprite' },
-        { keys: '1 / 2 / 3', action: 'bring that sprite to the front' },
-      ],
-      status: 'Front: 3 (blue)',
-      hint: 'The overlays show pointer targets, hit tests, and scene-graph bounds.',
-    });
+    this.hud = mountControls({ title: 'Interaction Inspector', status: 'Front: 3 (blue)' });
     this.inputs.onTrigger(Keyboard.One, () => this.setFront(0));
     this.inputs.onTrigger(Keyboard.Two, () => this.setFront(1));
     this.inputs.onTrigger(Keyboard.Three, () => this.setFront(2));
@@ -40,7 +38,12 @@ class PointerAndHittestScene extends Scene {
     this.sprites.forEach((sprite, i) => {
       sprite.zIndex = i === index ? 3 : i;
     });
-    this.hud.setStatus(`Front: ${index + 1} (${['red', 'green', 'blue'][index]})`);
+    this.hud.setStatus(`Front: ${index + 1} (${NAMES[index]})`);
+    console.info(`Front: ship ${index + 1} (${NAMES[index]})`);
+  }
+  destroy() {
+    this.hud.dispose();
+    super.destroy();
   }
 }
 const app = new Application({
@@ -52,9 +55,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 const debug = new DebugOverlay(app);
 debug.layers.boundingBoxes.visible = true;
diff --git a/examples/debug-layer/pointer-and-hittest.ts b/examples/debug-layer/pointer-and-hittest.ts
index 67fd90049..d5c7046f9 100644
--- a/examples/debug-layer/pointer-and-hittest.ts
+++ b/examples/debug-layer/pointer-and-hittest.ts
@@ -1,7 +1,10 @@
 import { Application, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
+const NAMES = ['red', 'green', 'blue'] as const;
+
 class PointerAndHittestScene extends Scene {
   private sprites!: Sprite[];
   private hud!: ReturnType<typeof mountControls>;
@@ -13,7 +16,7 @@ class PointerAndHittestScene extends Scene {
     this.sprites = [];
 
     for (let i = 0; i < 3; i++) {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png'))
+      const sprite = new Sprite(this.loader.get(assets.ship))
         .setAnchor(0.5)
         .setScale(2.4)
         .setPosition(width / 2 - 45 + i * 45, height / 2);
@@ -21,21 +24,17 @@ class PointerAndHittestScene extends Scene {
       sprite.interactive = true;
       sprite.draggable = true;
       sprite.setTint([new Color(255, 130, 130), new Color(130, 255, 170), new Color(140, 190, 255)][i]);
+      // A press lands on the topmost interactive node under the pointer; the
+      // Output panel names which one the hit test picked.
+      sprite.onPointerTap.add(event => console.log(`Hit: ship ${i + 1} (${NAMES[i]}) at ${Math.round(event.x)}, ${Math.round(event.y)}`));
+      sprite.onDragEnd.add(() => console.log(`Dropped ship ${i + 1} (${NAMES[i]}) at ${Math.round(sprite.x)}, ${Math.round(sprite.y)}`));
       // The hitTest layer (and the interaction system itself) walk the
       // scene graph, so interactive nodes must live under scene.root.
       this.root.addChild(sprite);
       this.sprites.push(sprite);
     }
 
-    this.hud = mountControls({
-      title: 'Interaction Inspector',
-      controls: [
-        { keys: 'Drag', action: 'move an overlapping sprite' },
-        { keys: '1 / 2 / 3', action: 'bring that sprite to the front' },
-      ],
-      status: 'Front: 3 (blue)',
-      hint: 'The overlays show pointer targets, hit tests, and scene-graph bounds.',
-    });
+    this.hud = mountControls({ title: 'Interaction Inspector', status: 'Front: 3 (blue)' });
     this.inputs.onTrigger(Keyboard.One, () => this.setFront(0));
     this.inputs.onTrigger(Keyboard.Two, () => this.setFront(1));
     this.inputs.onTrigger(Keyboard.Three, () => this.setFront(2));
@@ -45,7 +44,13 @@ class PointerAndHittestScene extends Scene {
     this.sprites.forEach((sprite, i) => {
       sprite.zIndex = i === index ? 3 : i;
     });
-    this.hud.setStatus(`Front: ${index + 1} (${['red', 'green', 'blue'][index]})`);
+    this.hud.setStatus(`Front: ${index + 1} (${NAMES[index]})`);
+    console.info(`Front: ship ${index + 1} (${NAMES[index]})`);
+  }
+
+  override destroy(): void {
+    this.hud.dispose();
+    super.destroy();
   }
 }
 
@@ -58,9 +63,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 const debug = new DebugOverlay(app);
diff --git a/examples/debug-layer/signal-bus-inspector.js b/examples/debug-layer/signal-bus-inspector.js
index 3bd0bebb3..1a7bd64df 100644
--- a/examples/debug-layer/signal-bus-inspector.js
+++ b/examples/debug-layer/signal-bus-inspector.js
@@ -81,8 +81,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(SignalBusInspectorScene);
diff --git a/examples/debug-layer/signal-bus-inspector.ts b/examples/debug-layer/signal-bus-inspector.ts
index 76de222f4..b2c89b5a8 100644
--- a/examples/debug-layer/signal-bus-inspector.ts
+++ b/examples/debug-layer/signal-bus-inspector.ts
@@ -113,9 +113,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(SignalBusInspectorScene);
diff --git a/examples/examples.json b/examples/examples.json
index e376203f0..8ea890094 100644
--- a/examples/examples.json
+++ b/examples/examples.json
@@ -62,7 +62,7 @@
       "path": "application-scenes/loading-screen.js",
       "language": "typescript",
       "title": "Loading Progress and Retry",
-      "description": "Watch real asset-load progress, retry after a failed request, and revisit already cached assets during a second scene transition.",
+      "description": "Watch real asset-load progress, retry after a failed request with Space, and press Space in the game scene to revisit already cached assets during a second scene transition.",
       "backend": "core",
       "tags": ["scene", "loader", "assets"],
       "level": "intermediate",
@@ -73,7 +73,7 @@
       "path": "sprites-textures/asset-catalogs.js",
       "language": "typescript",
       "title": "Asset Catalogs",
-      "description": "Declare a typed Assets catalog, merge catalogs with compose, derive one with extend, and load them through two parallel queues with per-queue progress.",
+      "description": "Declare a typed Assets catalog, merge catalogs with compose, derive one with extend, and load them through two parallel queues with per-queue progress. N swaps the ground texture for the derived night catalog, G loads a ground texture by a computed path, M plays the streamed theme.",
       "backend": "core",
       "tags": ["loader", "assets", "sprite"],
       "level": "intermediate",
@@ -84,7 +84,7 @@
       "path": "showcase/pause-blur.js",
       "language": "typescript",
       "title": "Pause Menu",
-      "description": "Pause scene updates while a menu appears over the frozen world and an application tween fades in the blur; press Esc or click to resume.",
+      "description": "Pause scene updates while a menu appears over the frozen world and an application tween fades in the blur; press Esc or click to pause and resume.",
       "backend": "core",
       "tags": ["fx", "scene"],
       "capabilities": ["pointer", "keyboard"],
@@ -106,7 +106,7 @@
       "path": "tilemap/level-loading-and-ownership.js",
       "language": "typescript",
       "title": "Level Loading and Asset Ownership",
-      "description": "Load two Tiled rooms with one shared atlas, cancel a pending transition, and inspect the child scopes and atlas claims released on unload.",
+      "description": "Load two Tiled rooms with one shared atlas, cancel a pending transition, and inspect the child scopes and atlas claims released on unload. The Rooms panel enters a room, cancels a pending load or unloads the active room.",
       "backend": "core",
       "tags": ["tilemap", "loader", "scopes", "cancellation"],
       "level": "advanced"
@@ -116,10 +116,21 @@
       "path": "application-scenes/cached-assets-offline.js",
       "language": "typescript",
       "title": "Cached Assets Offline",
-      "description": "Warm an IndexedDB asset source, switch the loader to offline policy, compare a cache hit and miss, then clear and retry.",
+      "description": "Warm an IndexedDB asset source, switch the loader to offline policy, compare a cache hit and miss, then clear and retry. Offline mode changes loader policy only; it does not disable the browser connection.",
       "backend": "core",
       "tags": ["assets", "cache", "offline", "indexeddb"],
       "level": "advanced"
+    },
+    {
+      "slug": "asset-browser",
+      "path": "debug-layer/asset-browser.js",
+      "language": "typescript",
+      "title": "Asset Browser",
+      "description": "Browse every standard demo asset by type and preview it with ExoJS: zoom and filter textures, animate spritesheet frames, pan rendered tile maps, play audio and video, and try fonts. Each preview loads into its own loader scope, and the Code button copies a snippet that reproduces the current settings.",
+      "backend": "core",
+      "tags": ["assets", "loader", "scopes", "spritesheet", "audio", "video", "tool"],
+      "capabilities": ["pointer"],
+      "level": "intermediate"
     }
   ],
   "input-ui": [
@@ -128,7 +139,7 @@
       "path": "input/keyboard.js",
       "language": "typescript",
       "title": "Keyboard",
-      "description": "Read key state per-frame and on-event with the Keyboard API. Move a square using the arrow keys.",
+      "description": "Read key state per-frame and on-event with the Keyboard API. WASD or the arrow keys move the square (per-frame polling), Esc recentres it (on-event); click the canvas first so it has keyboard focus. Key presses, the recentre action and held-key changes appear in the Output panel.",
       "backend": "core",
       "featured": true,
       "tags": ["input", "keyboard"],
@@ -140,7 +151,7 @@
       "path": "input/mouse-and-pointer.js",
       "language": "typescript",
       "title": "Mouse and Pointer",
-      "description": "Track pointer position, button state, and movement delta; fire discrete click and drag events.",
+      "description": "Track pointer position, button state, and movement delta; fire discrete click and drag events. Move the mouse, click to count taps, and drag the ship sprite.",
       "backend": "core",
       "tags": ["input", "pointer", "mouse"],
       "capabilities": ["pointer"],
@@ -151,7 +162,7 @@
       "path": "input/action-mapping.js",
       "language": "typescript",
       "title": "Action Mapping",
-      "description": "Bind keyboard and gamepad controls to one move action and one pulse action, then read both through ActionMap.",
+      "description": "Bind keyboard and gamepad controls to one move action and one pulse action, then read both through ActionMap. WASD, arrows or the left stick move the ship; Space or the south gamepad button pulses it. The Output panel logs each resolved action as it changes.",
       "backend": "core",
       "tags": ["input", "keyboard", "gamepad"],
       "capabilities": ["keyboard", "gamepad"],
@@ -162,7 +173,7 @@
       "path": "input/gamepad.js",
       "language": "typescript",
       "title": "Controller Inspector",
-      "description": "Connect a controller to inspect live stick and button values; see a clear waiting state while disconnected.",
+      "description": "Connect a controller to inspect live stick and button values; see a clear waiting state while disconnected. Axes and buttons update live.",
       "backend": "core",
       "featured": true,
       "tags": ["input", "gamepad"],
@@ -174,7 +185,7 @@
       "path": "input/key-rebinding.js",
       "language": "typescript",
       "title": "Key Rebinding",
-      "description": "Let players reassign key bindings at runtime and persist the new mapping through a serialisable BindingProfile.",
+      "description": "Rebind the jump key at runtime: press J, then any key to assign it to jump (Space by default), and the choice is saved in localStorage as a stable input token and restored on reload.",
       "backend": "core",
       "tags": ["input", "keyboard"],
       "capabilities": ["keyboard"],
@@ -185,7 +196,7 @@
       "path": "input/multitouch.js",
       "language": "typescript",
       "title": "Multitouch",
-      "description": "Track up to ten simultaneous touch points and render each finger as a labelled circle.",
+      "description": "Track up to ten simultaneous touch points and render each finger as a labelled circle. Use a touchscreen with several fingers; a mouse provides a single point while a button is held.",
       "backend": "core",
       "tags": ["input", "touch", "pointer"],
       "capabilities": ["pointer", "touch"],
@@ -206,7 +217,7 @@
       "path": "ui/settings-menu.js",
       "language": "typescript",
       "title": "Settings Menu and Focus",
-      "description": "Adjust native sliders, toggles, and dropdowns with pointer, keyboard, or controller focus; save a small settings object.",
+      "description": "Adjust native sliders, toggles, and dropdowns with pointer, keyboard, or controller focus; save a small settings object. Toggle, theme and reset changes are logged to the Output panel.",
       "backend": "core",
       "tags": ["ui", "settings", "focus", "slider", "dropdown"],
       "capabilities": ["keyboard", "pointer"],
@@ -228,7 +239,7 @@
       "path": "showcase/dialog-system.js",
       "language": "typescript",
       "title": "Dialogue and Choices",
-      "description": "Reveal dialogue character by character, skip to the full line, and choose a reply.",
+      "description": "Reveal dialogue character by character: click anywhere to skip to the full line and click again to continue. After the last line, pick a reply with the on-canvas buttons.",
       "backend": "core",
       "tags": ["scene", "text", "audio"],
       "capabilities": ["pointer"],
@@ -239,7 +250,7 @@
       "path": "application-scenes/multi-view-split-screen.js",
       "language": "typescript",
       "title": "Local Split Screen",
-      "description": "Move two players with separate keyboards or optional controllers while each camera follows its own player.",
+      "description": "Move two players with separate controls while each camera follows its own player in its own half of the screen. P1 uses WASD or controller 1, P2 uses the arrow keys or controller 2; controllers are optional.",
       "backend": "core",
       "tags": ["camera", "view", "scene", "gamepad"],
       "capabilities": ["keyboard"],
@@ -252,7 +263,7 @@
       "path": "sprites-textures/sprite-basics.js",
       "language": "typescript",
       "title": "Sprite Basics",
-      "description": "Load a texture, create a Sprite, and control position, rotation, scale, and alpha inside a Scene.",
+      "description": "Load a texture, create a Sprite, and animate its position, rotation, scale and alpha inside a Scene.",
       "backend": "core",
       "featured": true,
       "tags": ["sprite", "rendering"],
@@ -273,7 +284,7 @@
       "path": "scene-graph/pivot-and-anchor.js",
       "language": "typescript",
       "title": "Pivot and Anchor",
-      "description": "Choose an origin preset and watch the rotating sprite's position, pivot, and bounds change together.",
+      "description": "Three copies of one rotating sprite side by side, turning about the top-left corner, the centre and an origin outside the texture; the red dot marks each position, the box its bounds.",
       "backend": "core",
       "tags": ["scene-graph", "sprite"],
       "level": "intro"
@@ -283,7 +294,7 @@
       "path": "sprites-textures/blendmodes.js",
       "language": "typescript",
       "title": "Blendmodes",
-      "description": "Click through all built-in blend modes applied to an overlapping sprite pair to see how they composite.",
+      "description": "Click the canvas, press Left/Right or use the panel to step through all 18 blend modes applied to two overlapping tinted ships; the panel shows the current mode and its position.",
       "backend": "core",
       "tags": ["sprite", "rendering", "fx"],
       "capabilities": ["pointer"],
@@ -304,7 +315,7 @@
       "path": "sprites-textures/texture-sampling.js",
       "language": "typescript",
       "title": "Texture Sampling and Pixel Snapping",
-      "description": "Compare nearest, linear and mipmapped sampling side by side on a magnified and a minified texture, and toggle render-only pixel snapping.",
+      "description": "Compare nearest, linear and mipmapped sampling side by side on a magnified top row and a minified bottom row. Scroll the wheel (or use the sliders) to magnify, P toggles render-only pixel snapping, Space pauses the motion; only the sampler differs between columns.",
       "backend": "core",
       "tags": ["sprite", "texture", "sampling", "pixel-snap"],
       "capabilities": ["keyboard", "pointer"],
@@ -315,7 +326,7 @@
       "path": "application-scenes/world-vs-screen-coords.js",
       "language": "typescript",
       "title": "Camera Navigation and Coordinates",
-      "description": "Pan with WASD or arrows, zoom with the wheel, and place world-space markers while a screen-fixed readout shows pointer coordinates.",
+      "description": "Pan with WASD or the arrow keys, zoom with the wheel, and click to place world-space markers while a screen-fixed readout shows pointer screen and world coordinates. Markers use world coordinates; the readout stays fixed on screen.",
       "backend": "core",
       "tags": ["camera", "view", "pointer", "coordinates"],
       "capabilities": ["keyboard", "pointer"],
@@ -326,7 +337,7 @@
       "path": "scene-graph/parallax-starfield.js",
       "language": "typescript",
       "title": "Parallax Layers",
-      "description": "Move the pointer to shift three star layers at different speeds and see depth emerge from their relative motion.",
+      "description": "Move the pointer to shift three star layers at different speeds; near stars travel farther than distant stars, so depth emerges from their relative motion.",
       "backend": "core",
       "tags": ["scene-graph", "rendering"],
       "capabilities": ["pointer"],
@@ -347,7 +358,7 @@
       "path": "render-targets/mini-map.js",
       "language": "typescript",
       "title": "Minimap",
-      "description": "Render the same world through a second, wider View into a texture and clip it to a round HUD minimap.",
+      "description": "Render the same world through a second, wider View into a texture and clip it to a round HUD minimap. The player wanders on its own; both views follow it through the same container.",
       "backend": "core",
       "tags": ["rendering", "camera", "advanced"],
       "level": "intermediate"
@@ -359,7 +370,7 @@
       "path": "tweens-animation/frame-animation.js",
       "language": "typescript",
       "title": "Sprite Animation",
-      "description": "Play named spritesheet clips with AnimatedSprite, press Right to switch characters, and press Space to pause or resume.",
+      "description": "Play named spritesheet clips with AnimatedSprite: all five characters walk side by side from one spritesheet. Press Space to pause or resume them.",
       "backend": "core",
       "tags": ["animation", "sprite"],
       "capabilities": ["keyboard"],
@@ -370,7 +381,7 @@
       "path": "tweens-animation/tween-basics.js",
       "language": "typescript",
       "title": "Interactive Tweens",
-      "description": "Click to move a Sprite, click again to interrupt its Tween, and press Space to toggle a yoyo round trip.",
+      "description": "Click to move a Sprite, click again to interrupt its Tween (a new tween starts from the current position), and press Space to toggle a yoyo round trip.",
       "backend": "core",
       "tags": ["animation", "tween"],
       "capabilities": ["keyboard", "pointer"],
@@ -381,7 +392,7 @@
       "path": "tweens-animation/tween-chains.js",
       "language": "typescript",
       "title": "Tween Sequences",
-      "description": "Build a looping route from an array of waypoints by chaining Tweens once and restarting the first step after the last completes.",
+      "description": "Build a looping route from an array of waypoints by chaining Tweens once and restarting the first step after the last completes. The status shows the current leg.",
       "backend": "core",
       "tags": ["animation", "tween"],
       "level": "intermediate"
@@ -391,7 +402,7 @@
       "path": "tweens-animation/easing-curves.js",
       "language": "typescript",
       "title": "Easing Explorer",
-      "description": "Use Left/Right or click either side to select any built-in easing function and watch a Sprite trace its large curve.",
+      "description": "Select any built-in easing function with Left/Right or the panel buttons and watch a Sprite trace its large curve; overshoot stays visible above and below the 0-1 range.",
       "backend": "core",
       "tags": ["animation", "tween"],
       "level": "intermediate"
@@ -401,7 +412,7 @@
       "path": "showcase/screen-shake-on-explosion.js",
       "language": "typescript",
       "title": "Impact Feedback",
-      "description": "Click to flash a sprite, burst particles, and shake the camera as one impact response.",
+      "description": "Click anywhere to flash the ship, burst particles at the cursor and shake the camera as one impact response.",
       "backend": "core",
       "tags": ["camera", "fx", "particles"],
       "capabilities": ["pointer"],
@@ -412,7 +423,7 @@
       "path": "showcase/gamepad-spaceship.js",
       "language": "typescript",
       "title": "Fly a Spaceship",
-      "description": "Steer and fire with keyboard or gamepad; collect hits, sparks and optional controller rumble.",
+      "description": "Steer and fire with keyboard or gamepad: WASD, arrows or the left stick fly, Space or the right trigger fires; destroy asteroids for sparks and optional controller rumble.",
       "backend": "core",
       "featured": true,
       "tags": ["gamepad", "keyboard", "input", "audio", "scene"],
@@ -424,7 +435,7 @@
       "path": "showcase/boss-intro-cinematic.js",
       "language": "typescript",
       "title": "Boss Intro Cinematic",
-      "description": "Tween-driven cinematic sequence with a dramatic boss reveal, screen shake, and synced audio sting.",
+      "description": "A tween-driven boss reveal: letterbox bars, a camera push-in, a typewriter title punched with a screen shake and a music swell. Press R or click to replay once it has played out.",
       "backend": "core",
       "tags": ["animation", "audio", "scene"],
       "capabilities": ["pointer", "keyboard", "audio"],
@@ -510,7 +521,7 @@
       "path": "filters/bloom-filter.js",
       "language": "typescript",
       "title": "Bloom Filter",
-      "description": "Add a soft glow to the bright parts of a scene with BloomFilter — sliders drive the luminance threshold, the intensity, how far the glow spreads and how many halvings it takes.",
+      "description": "Discs get brighter from left to right and a white bar sweeps below them; Threshold sets the luminance that starts to glow, Intensity how much is added back, Strength how far it spreads and Levels how many halvings the blur uses.",
       "backend": "core",
       "tags": ["fx", "bloom", "filter"],
       "level": "intro"
@@ -520,7 +531,7 @@
       "path": "filters/blur-filter.js",
       "language": "typescript",
       "title": "Blur and Drop Shadow",
-      "description": "Compare an original sprite with a live blur or offset shadow, adjust each filter, and bypass it.",
+      "description": "Compare an original sprite with a live blur or offset drop shadow; choose the filter and drag the strength slider to change its blur radius or shadow offset.",
       "backend": "core",
       "tags": ["fx", "blur", "shadow", "filter"],
       "level": "intro"
@@ -530,7 +541,7 @@
       "path": "filters/color-matrix-filter.js",
       "language": "typescript",
       "title": "Color Transforms",
-      "description": "Compare the original image with grayscale or sepia matrices, independent 1D channel curves, and a cool 3D LUT.",
+      "description": "The same colour ramp and painted background through a grayscale matrix, a sepia matrix, per-channel 1D curves and a 3D LUT grade, side by side with the original.",
       "backend": "core",
       "tags": ["fx", "color", "filter", "lut"],
       "level": "intermediate"
@@ -540,7 +551,7 @@
       "path": "filters/crt-scanlines.js",
       "language": "typescript",
       "title": "Retro Display",
-      "description": "Tune a combined CRT filter with scanlines, grain, vignette, barrel distortion, and RGB separation; bypass it to compare the clean scene.",
+      "description": "Tune a combined CRT filter with scanlines, grain, vignette, barrel distortion, and RGB separation using the effect-strength and separation sliders; switch CRT off to compare the clean scene.",
       "backend": "core",
       "tags": ["fx", "filter", "shader"],
       "level": "intermediate"
@@ -550,7 +561,7 @@
       "path": "filters/custom-fragment-shader.js",
       "language": "typescript",
       "title": "Write a Fragment Filter",
-      "description": "Move a ripple over a UV grid while one typed uniform schema feeds matching GLSL and WGSL filter shaders.",
+      "description": "Move the pointer over a UV grid to place a ripple while one typed uniform schema feeds matching GLSL and WGSL filter shaders for time and pointer position.",
       "backend": "core",
       "tags": ["fx", "filter", "shader", "pointer"],
       "capabilities": ["pointer"],
@@ -561,7 +572,7 @@
       "path": "filters/metaballs.js",
       "language": "typescript",
       "title": "Metaballs and Filter Order",
-      "description": "Drag a blob into moving circles, then reverse or bypass blur and threshold passes to see how filter order changes the result.",
+      "description": "Drag the ringed blob into the moving circles, then pick blur-then-threshold, threshold-then-blur, or no filters and adjust blur strength to see how filter order changes the result.",
       "backend": "core",
       "tags": ["fx", "filter", "shader", "pointer"],
       "capabilities": ["pointer"],
@@ -572,7 +583,7 @@
       "path": "render-targets/render-to-texture.js",
       "language": "typescript",
       "title": "Capture a Texture",
-      "description": "Compare a live render texture with a frozen snapshot, then click to capture a new frame.",
+      "description": "Compare a live render texture of moving ships with a frozen snapshot; click anywhere to capture a new frame into the right-hand texture.",
       "backend": "core",
       "tags": ["rendering", "advanced"],
       "level": "intro"
@@ -592,7 +603,7 @@
       "path": "render-targets/color-pipeline.js",
       "language": "typescript",
       "title": "Colour Pipeline",
-      "description": "Compare colour and data textures, linear-light blending, alpha edges, raw and display readback, and an optional HDR value mapped to SDR.",
+      "description": "Compare colour and data textures, linear-light blending, alpha edges, raw and display readback, and an optional HDR value mapped to SDR; press Space or tap to switch the HDR panel between clamp and Reinhard.",
       "backend": "core",
       "tags": ["rendering", "color", "advanced"],
       "level": "intermediate"
@@ -602,7 +613,7 @@
       "path": "render-targets/water-mirror.js",
       "language": "typescript",
       "title": "Water Reflection and Distortion",
-      "description": "Capture and flip a live reflection, then drag across the water to change the strength of its scrolling displacement map.",
+      "description": "Capture and flip a live reflection, then drag horizontally across the water to change the strength of its scrolling displacement map (left is calm, right is strong).",
       "backend": "core",
       "tags": ["fx", "rendering", "displacement", "pointer"],
       "capabilities": ["pointer"],
@@ -613,7 +624,7 @@
       "path": "sprites-textures/video-drawable.js",
       "language": "typescript",
       "title": "Video Drawable",
-      "description": "Stream a video element as a live GPU texture, composite a sprite over it, and switch between clips at runtime.",
+      "description": "A video streams as a live GPU texture with a sprite composited over it. Choose the demo loop, the 4K 24 fps clip or the 1080p 60 fps clip with 1-3 or the panel; click to pause. All clips are SDR.",
       "backend": "core",
       "tags": ["sprite", "rendering"],
       "capabilities": ["pointer", "keyboard"],
@@ -624,7 +635,7 @@
       "path": "render-targets/render-pipeline.js",
       "language": "typescript",
       "title": "Composable Render Pipeline",
-      "description": "Compose named offscreen, optional blur, custom callback, and screen-space HUD passes; toggle blur to compare the live bypass.",
+      "description": "Compose named offscreen, blur, custom callback, and screen-space HUD passes; click or press Space to toggle the blur pass and compare the live bypass.",
       "backend": "core",
       "tags": ["rendering", "advanced", "fx"],
       "level": "advanced"
@@ -647,7 +658,7 @@
       "path": "lighting/many-lights.js",
       "language": "typescript",
       "title": "Normal-Mapped Lighting",
-      "description": "Drag a point light across a normal-mapped floor, then vary the active light count from 1 to 48 and watch the draw-call readout.",
+      "description": "Drag the large light marker across a normal-mapped floor, then vary the active light count from 1 to 48 with the slider and watch the draw-call readout stay flat; Resume first orbit releases the dragged light.",
       "backend": "core",
       "featured": false,
       "tags": ["lighting", "material", "shader", "performance"],
@@ -659,7 +670,7 @@
       "path": "lighting/shadow-casters.js",
       "language": "typescript",
       "title": "Shadow Casters",
-      "description": "Soft shadows nobody modelled: the walls hand over the rectangle they are drawn as, the cross hands over the outline traced from its alpha channel, and the lightmap renderer shadows every light against them in one draw. Toggle the occluder debug view to see exactly what was collected.",
+      "description": "Soft shadows nobody modelled: the walls hand over the rectangle they are drawn as, the cross hands over the outline traced from its alpha channel, and the lightmap renderer shadows every light against them in one draw. Adjust shadow softness and toggle the occluder debug view to see exactly what was collected.",
       "backend": "core",
       "featured": true,
       "tags": ["lighting", "shadows", "shader"],
@@ -671,7 +682,7 @@
       "path": "lighting/light-cookies.js",
       "language": "typescript",
       "title": "Light Cookies",
-      "description": "Four light shapes and two textures doing the work of geometry: window bars and leaf shade are cookies on the lights themselves, a neon tube pools in a capsule rather than a disc, and a sun with no position throws parallel shadows across the whole view.",
+      "description": "Four light shapes and two textures doing the work of geometry: window bars and leaf shade are cookies carried by the lights themselves (their bars drift with the lamp), a neon tube pools in a capsule, and a sun with no position throws parallel shadows. Use the time-of-day and sun sliders, and toggle cookies on and off.",
       "backend": "core",
       "featured": false,
       "tags": ["lighting", "shader", "texture"],
@@ -683,7 +694,7 @@
       "path": "lighting/lightmap-normals.js",
       "language": "typescript",
       "title": "Normals under the Lightmap Renderer",
-      "description": "Forty-five cobbles that nobody authored a normal map for: each one hands the lighting system its own silhouette, a prepass draws the derived normals where the stone sits, and the light field shades against them. Switching the normals off flattens the relief and leaves the stones slightly brighter: normals redistribute light across a surface, they never add any.",
+      "description": "Two lights move over one cobbled floor: the left half has normals derived from each stone's alpha, the right half has none, so the relief and its slightly darker read show side by side. Light height and a normal-buffer view are in the panel.",
       "backend": "core",
       "featured": false,
       "tags": ["lighting", "material", "shader"],
@@ -695,7 +706,7 @@
       "path": "lighting/radiance-rooms.js",
       "language": "typescript",
       "title": "Radiance Rooms",
-      "description": "Radiance cascades against the light-quad renderer on one scene: a single lamp in one of two rooms, a doorway between them, and a switch that rebuilds the lighting system so the same lights can be seen drawn and transported.",
+      "description": "One lamp, one doorway: switch between the radiance renderer (transported light with an optional bounce) and the lightmap renderer (drawn light). Space pauses the lamp so both can be compared at the same position; Lamp and Softness tune the source.",
       "backend": "core",
       "featured": false,
       "tags": ["lighting", "shadows", "shader"],
@@ -709,7 +720,7 @@
       "path": "particles/emitter-basics.js",
       "language": "typescript",
       "title": "Emitter Basics",
-      "description": "Configure a particle emitter — set rate, lifetime, start/end size, colour gradient, and velocity spread.",
+      "description": "A particle fountain built from RateSpawn, ScaleOverLifetime and ColorOverLifetime: rate, lifetime, size curve, colour gradient and velocity spread in one emitter.",
       "backend": "core",
       "tags": ["particles"],
       "level": "intro"
@@ -719,7 +730,7 @@
       "path": "particles/cursor-attractor-particles.js",
       "language": "typescript",
       "title": "Cursor Attractor Particles",
-      "description": "Attract and repel particles toward the pointer position using a custom force field on the particle emitter.",
+      "description": "Move the pointer to steer a custom force field on the particle emitter, and click to switch it between attracting and repelling the particles.",
       "backend": "core",
       "tags": ["particles", "pointer"],
       "capabilities": ["pointer"],
@@ -730,7 +741,7 @@
       "path": "particles/fireworks.js",
       "language": "typescript",
       "title": "Fireworks",
-      "description": "Click to launch a firework rocket that bursts into a radial particle shower at its apex.",
+      "description": "Click anywhere to launch a firework rocket from the bottom at that x position; it bursts into flash, spark and ember layers at its apex, and rockets also launch on their own.",
       "backend": "core",
       "tags": ["particles", "pointer"],
       "capabilities": ["pointer"],
@@ -741,7 +752,7 @@
       "path": "particles/bonfire.js",
       "language": "typescript",
       "title": "Campfire",
-      "description": "Adjust flame intensity and wind while fire and smoke rise from a visible ring of logs and stones.",
+      "description": "Adjust flame intensity and wind with the sliders while fire and smoke rise from a visible ring of logs and stones.",
       "backend": "core",
       "tags": ["particles"],
       "level": "intermediate"
@@ -751,7 +762,7 @@
       "path": "showcase/audio-reactive-particles.js",
       "language": "typescript",
       "title": "Audio Reactive Particles",
-      "description": "Emit particles driven by real-time AudioAnalyser frequency data — bass controls density, treble controls spread.",
+      "description": "Particles driven by the music: low-band energy sets how many spawn and high-band energy how wide they spread, so silence stays still; detected beats recolour the stream.",
       "backend": "core",
       "featured": true,
       "tags": ["audio", "reactive", "particles"],
@@ -763,7 +774,7 @@
       "path": "particles/gpu-particles.js",
       "language": "typescript",
       "title": "Particle Capacity",
-      "description": "Adjust the spawn rate and watch live occupancy, frame time, and whether particles run on WebGPU compute or the smaller WebGL2 CPU fallback.",
+      "description": "Adjust the spawn rate and watch live occupancy, frame time, and whether particles run on WebGPU compute or the smaller WebGL2 fallback.",
       "backend": "core",
       "tags": ["particles", "webgpu", "performance"],
       "level": "advanced"
@@ -773,7 +784,7 @@
       "path": "particles/custom-wgsl-module.js",
       "language": "typescript",
       "title": "Custom Wgsl Module",
-      "description": "Supply a custom WGSL compute module to the GPU particle system to implement non-standard particle behaviour.",
+      "description": "SwayModule supplies apply(), glsl() and wgsl() with shared uniforms, so the same custom particle behaviour runs on the CPU, in WebGL2 transform feedback or as a WebGPU compute pass; the status shows which path runs.",
       "backend": "core",
       "tags": ["particles", "advanced", "webgpu"],
       "level": "advanced"
@@ -785,7 +796,7 @@
       "path": "audio-basics/play-sound.js",
       "language": "typescript",
       "title": "Play Sound",
-      "description": "Load a Sound asset and play it on a pointer tap — covers the required user-gesture unlock and basic volume control.",
+      "description": "Click anywhere to play the next of five short UI and impact sounds from a small pool; the sound effects bus runs at half volume.",
       "backend": "core",
       "featured": true,
       "tags": ["audio", "sound"],
@@ -797,7 +808,7 @@
       "path": "audio-basics/sound-pool.js",
       "language": "typescript",
       "title": "Polyphonic Sound",
-      "description": "Hold Space to play overlapping impacts with varied pitch while a pool meter shows active voices and evictions.",
+      "description": "Hold Space, a mouse button or a finger to fire heavy impacts faster than they finish: the pool caps concurrent voices, each shot varies its pitch, and at capacity the oldest voice is evicted.",
       "backend": "core",
       "tags": ["audio", "sound", "pool"],
       "capabilities": ["keyboard", "audio"],
@@ -808,7 +819,7 @@
       "path": "audio-basics/music-loop.js",
       "language": "typescript",
       "title": "Music Loop",
-      "description": "Play a seamlessly looping music track with live controls for volume, playback rate, and looping.",
+      "description": "Stream a music track and control the live Voice: volume, playback rate and looping in the panel, Space or the panel to pause and resume, and a progress bar for the playback position.",
       "backend": "core",
       "tags": ["audio", "music"],
       "capabilities": ["audio"],
@@ -819,7 +830,7 @@
       "path": "audio-basics/audio-buses.js",
       "language": "typescript",
       "title": "Audio Mixer Buses",
-      "description": "Route a looping track and click effect to Music and Sound, then mix both through Master with live sliders.",
+      "description": "A looping track on the Music bus and click effects on the Sound bus under one Master: Master scales both, Music and Sound only their own voices. The mixer panel sets each bus volume and plays the effect.",
       "backend": "core",
       "tags": ["audio", "buses"],
       "capabilities": ["pointer", "audio"],
@@ -830,7 +841,7 @@
       "path": "audio-basics/crossfade-tracks.js",
       "language": "typescript",
       "title": "Crossfade Tracks",
-      "description": "Select either looping track and watch its gain indicator follow the scheduled two-second voice crossfade.",
+      "description": "Choose Track A or Track B in the panel and watch each gain meter follow the scheduled two-second voice crossfade between the two looping tracks.",
       "backend": "core",
       "tags": ["audio", "crossfade"],
       "capabilities": ["pointer", "audio"],
@@ -841,7 +852,7 @@
       "path": "audio-fx/reverb-and-delay.js",
       "language": "typescript",
       "title": "Reverb and Delay",
-      "description": "Play one impact through reverb and delay; compare small room, hall, echo, and dry bypass presets.",
+      "description": "Play one impact through reverb and delay; pick a small room, hall or echo preset and toggle bypass to compare the dry and wet paths while the room and echo settings change.",
       "backend": "core",
       "tags": ["audio", "fx", "reverb", "delay"],
       "capabilities": ["pointer", "audio"],
@@ -852,7 +863,7 @@
       "path": "audio-fx/pcm-stream.js",
       "language": "typescript",
       "title": "Streaming PCM",
-      "description": "Feed stereo PCM through the music bus, inspect the bounded queue, and compare producer starvation, clear and drain.",
+      "description": "Feed stereo PCM through the music bus and inspect the bounded queue; stop the producer to hear starvation, then clear the queue, drain it or start a new stream. Playback starts on the first click or key press.",
       "backend": "core",
       "tags": ["audio", "pcm", "streaming", "synthesis"],
       "capabilities": ["pointer", "audio"],
@@ -863,7 +874,7 @@
       "path": "audio-fx/gpu-pcm-stream.js",
       "language": "typescript",
       "title": "GPU Stereo PCM",
-      "description": "Generate stereo samples on the GPU, read bounded blocks as packed bytes or floats, and stream them through the music bus.",
+      "description": "Generate stereo samples on the GPU, read bounded blocks back as packed bytes or floats chosen in the panel, and stream them through the music bus. Playback starts on the first click or key press; changing the format creates a fresh stream.",
       "backend": "core",
       "tags": ["audio", "pcm", "gpu", "readback", "synthesis"],
       "capabilities": ["pointer", "audio"],
@@ -874,7 +885,7 @@
       "path": "audio-fx/compressor.js",
       "language": "typescript",
       "title": "Compression",
-      "description": "Switch one music source between quiet and loud, bypass the compressor, and read its live gain reduction.",
+      "description": "A quiet music loop feeds a CompressorEffect; switch to the loud input to push the peaks over the threshold and watch the live gain-reduction meter. Threshold, ratio and bypass are in the panel.",
       "backend": "core",
       "tags": ["audio", "fx", "compressor"],
       "capabilities": ["pointer", "audio"],
@@ -885,7 +896,7 @@
       "path": "audio-fx/ducking.js",
       "language": "typescript",
       "title": "Ducking",
-      "description": "Automatically lower music volume when a sound effect plays — classic game audio ducking via the DuckingEffect.",
+      "description": "Click to play a voice-over and watch the music meter duck while the voice meter spikes: the DuckingEffect lowers the music bus whenever its sidechain voice bus is loud.",
       "backend": "core",
       "tags": ["audio", "fx", "ducking"],
       "capabilities": ["pointer", "audio"],
@@ -896,7 +907,7 @@
       "path": "audio-fx/convolution-rooms.js",
       "language": "typescript",
       "title": "Convolution Rooms",
-      "description": "Strike one of four materials, panned to where it sits, and cycle through 30 recorded room impulse responses with a right-click, from a few milliseconds of colouration to a half-second cavern.",
+      "description": "Strike four impact materials, each panned to its position, inside 30 measured rooms from a 1 ms tail to a cavern; step through the rooms with Left/Right or the panel.",
       "backend": "core",
       "tags": ["audio", "fx", "convolution", "reverb", "impulse-response"],
       "capabilities": ["pointer", "audio"],
@@ -907,7 +918,7 @@
       "path": "audio-fx/effect-chains.js",
       "language": "typescript",
       "title": "Audio Effect Rack",
-      "description": "Select one of four distinct effect chains, inspect its order and spectrum, and bypass it against dry output.",
+      "description": "Pick one of four distinct effect chains, read its order on the rack and the spectrum, play an impact, and toggle bypass to compare it against the level-matched dry output.",
       "backend": "core",
       "tags": ["audio", "fx", "chain", "spectrum", "analyser"],
       "capabilities": ["pointer", "audio"],
@@ -918,7 +929,7 @@
       "path": "audio-fx/signal-graph.js",
       "language": "typescript",
       "title": "Audio Signal Graph",
-      "description": "See the real routing from sources through bus effects to the master output, edit effect parameters, bypass stages and watch each bus level.",
+      "description": "See the real routing from sources through bus effects to the master output: every box is a real source, effect or bus, every wire a real connection. Click a node to edit its parameters or bypass it and watch each bus level.",
       "backend": "core",
       "tags": ["audio", "bus", "effects", "graphics"],
       "capabilities": ["pointer", "audio"],
@@ -929,7 +940,7 @@
       "path": "audio-fx/vocoder.js",
       "language": "typescript",
       "title": "Vocoder",
-      "description": "Choose a spoken phrase and compare its dry voice with a vocoder carrier; unlock feedback keeps the first selection visible.",
+      "description": "Pick a spoken phrase and play it, then switch Processed off to compare the dry voice with the robot voice made by modulating a sustained saw carrier. Audio starts on the first click or key press.",
       "backend": "core",
       "tags": ["audio", "fx", "vocoder"],
       "capabilities": ["pointer", "audio"],
@@ -940,7 +951,7 @@
       "path": "showcase/audio-visualisation.js",
       "language": "typescript",
       "title": "Spectrum and Waveform",
-      "description": "Compare live spectrum bars, a waveform, eight frequency bands, and a beat pulse while playing music.",
+      "description": "A live spectrum, waveform, eight frequency bands and a beat pulse drawn from the music bus; click to pause and resume the track.",
       "backend": "core",
       "tags": ["audio", "reactive", "visualiser"],
       "capabilities": ["pointer", "audio"],
@@ -951,7 +962,7 @@
       "path": "beat-detection/beat-sync-pulse.js",
       "language": "typescript",
       "title": "Beat and Tempo",
-      "description": "Pulse a sprite and particles on detected beats while showing the live BPM estimate, confidence, and onset strength.",
+      "description": "A BeatDetector on the music bus pulses the ship and bursts particles on every detected beat while the tempo estimate and its confidence update continuously.",
       "backend": "core",
       "tags": ["audio", "beat", "reactive"],
       "capabilities": ["audio"],
@@ -962,7 +973,7 @@
       "path": "spatial-audio/listener-and-source.js",
       "language": "typescript",
       "title": "Spatial Audio",
-      "description": "Drag or orbit a sound source around a listener, switch distance models, and compare the live pan and attenuation.",
+      "description": "Best with headphones: drag or orbit a sound source around the listener, switch the falloff model, toggle the sound, and compare the live pan and attenuation in the readout.",
       "backend": "core",
       "tags": ["audio", "spatial", "panning", "falloff"],
       "capabilities": ["pointer", "audio"],
@@ -975,7 +986,7 @@
       "path": "tilemap/tiled-isometric.js",
       "language": "typescript",
       "title": "Isometric Landscape",
-      "description": "Explore a Kenney landscape loaded from Tiled: pick diamond cells, move a physics actor through the bridge, and inspect projected collision outlines.",
+      "description": "Explore a Kenney Isometric Tiles Landscape (CC0) loaded from Tiled: click a diamond cell to send a physics actor toward it, and cross the canal through the central bridge because the cyan outlines mark solid banks. The actor collides in logical space and its position is projected onto the map.",
       "backend": "core",
       "tags": ["tilemap", "tiled", "isometric", "physics", "pointer"],
       "level": "intermediate"
@@ -985,7 +996,7 @@
       "path": "tilemap/hexagonal-grid.js",
       "language": "typescript",
       "title": "Hexagonal & Staggered Grids",
-      "description": "Lay out hexagonal and staggered tile maps the way Tiled does, pick cells under the pointer, and draw every tile from its own image with trees overhanging the row above.",
+      "description": "Lay out hexagonal and staggered tile maps the way Tiled does, pick the cell under the pointer, and switch layouts with the Grid panel. Every tile is its own canvas texture in an image-collection TileSet, and trees overhang the row above.",
       "backend": "core",
       "tags": ["tilemap", "hexagonal", "pointer"],
       "capabilities": ["pointer"],
@@ -996,7 +1007,7 @@
       "path": "tilemap/tile-chunks-and-bands.js",
       "language": "typescript",
       "title": "Tilemap Chunks & Layer Bands",
-      "description": "Build a procedural TileMap in code and explore the core @codexo/exojs-tilemap runtime: chunked TileLayerNode rendering, a camera that follows an actor interleaved between TileMapView bands, and the PixelSnapMode cascade.",
+      "description": "WASD or the arrow keys move an explorer over a TileMap built in code: chunked TileLayerNode rendering, a following camera, the explorer drawn between the ground and canopy TileMapView bands, and the PixelSnapMode choices in the panel.",
       "backend": "core",
       "tags": ["tilemap", "camera", "pixel-snap"],
       "capabilities": ["keyboard"],
@@ -1007,7 +1018,7 @@
       "path": "tilemap/tiled-map-import.js",
       "language": "typescript",
       "title": "Load a Tiled Map",
-      "description": "Load and render a .tmj room, then click highlighted objects to inspect their editor-authored names, types, and properties.",
+      "description": "Load and render a .tmj room with the common tileMap asset type, then click highlighted objects to inspect their editor-authored names, types, and properties.",
       "backend": "core",
       "tags": ["tilemap", "tiled", "objects"],
       "level": "intermediate"
@@ -1017,7 +1028,7 @@
       "path": "tilemap/ldtk-world-import.js",
       "language": "typescript",
       "title": "LDtk World Import",
-      "description": "Load a multi-level LDtk world, switch between its runtime TileMap levels, resolve IntGrid cells to their named/coloured definitions with getLdtkIntGridValueAt(), and read entity fields from the converted ObjectLayer.",
+      "description": "Load a multi-level LDtk world, switch between its runtime TileMap levels and toggle the IntGrid overlay in the LDtk panel. Coloured squares come from getLdtkIntGridValueAt(), which resolves the raw Walls cells to their LDtk-authored name and colour, and entity fields are read from the converted ObjectLayer.",
       "backend": "core",
       "tags": ["tilemap", "ldtk", "intgrid"],
       "level": "advanced"
@@ -1027,7 +1038,7 @@
       "path": "tilemap/editor-objects-gameplay.js",
       "language": "typescript",
       "title": "Editor Objects Become Gameplay",
-      "description": "Click an authored switch to open its door, then collect a gem created from the same Tiled object layer by MapObjectSpawner.",
+      "description": "Click the authored switch to open its door, then click the gem to collect it. The three coloured objects come from the Tiled object layer and MapObjectSpawner creates their runtime counterparts.",
       "backend": "core",
       "tags": ["tilemap", "tiled", "objects", "spawner"],
       "capabilities": ["pointer"],
@@ -1038,7 +1049,7 @@
       "path": "pathfinding/grid-navigation.js",
       "language": "typescript",
       "title": "Grid Navigation",
-      "description": "Click to move an agent across a weighted grid: paint walls and mud, toggle jump-point pruning, path smoothing and a 2x2 agent, and watch the expanded-node counter react.",
+      "description": "Click to set the goal, or switch Click paints to wall or mud to edit the grid; a weighted GridSpace and Pathfinder answer every change. Toggle jump-point pruning, path smoothing, a 2x2 agent and the diagonal policy and watch the expanded-node counter; painting mud makes the grid non-uniform, which turns pruning off by itself.",
       "backend": "core",
       "featured": true,
       "tags": ["pathfinding", "grid", "pointer"],
@@ -1050,7 +1061,7 @@
       "path": "pathfinding/tilemap-navigation.js",
       "language": "typescript",
       "title": "Editable Map Navigation",
-      "description": "Move through a tile map while navigation agents hunt you around its walls; click a tile to open or close it and watch every route adapt.",
+      "description": "Move the white player with WASD or the arrow keys while orange navigation agents hunt you around the walls, and click a tile to open or close it to watch every route adapt. Hunters re-route when you change tile or edit the map; the blue patroller follows a hand-placed waypoint graph.",
       "backend": "core",
       "tags": ["pathfinding", "tilemap", "physics", "keyboard", "pointer"],
       "capabilities": ["keyboard", "pointer"],
@@ -1061,7 +1072,7 @@
       "path": "tilemap/paint-autotiled-room.js",
       "language": "typescript",
       "title": "Paint an Autotiled Room",
-      "description": "Drag to paint or erase grass while Wang neighbor rules choose edge and corner tiles around each edit.",
+      "description": "Drag to paint grass, or switch on Erase in the Brush panel (touch has no right-click) to remove it; WangSet maps four-neighbor masks to tile variants in the existing map atlas, and each edit refreshes only the cell and its neighbors.",
       "backend": "core",
       "tags": ["tilemap", "wang", "autotile", "pointer"],
       "capabilities": ["pointer"],
@@ -1072,7 +1083,7 @@
       "path": "tilemap/tiled-infinite-map.js",
       "language": "typescript",
       "title": "Tiled Infinite Map Streaming",
-      "description": "Stream a hand-authored Tiled infinite .tmj map: TiledMap.toTileMap() converts each chunked tile layer to an unbounded TileLayer, and a ChunkStreamer per layer pulls chunks from TiledMap.getChunkSource() around a free-flying WASD camera.",
+      "description": "Stream a hand-authored Tiled infinite .tmj map with a free-flying WASD camera: TiledMap.toTileMap() converts each chunked tile layer to an unbounded TileLayer, and a ChunkStreamer per layer pulls chunks from TiledMap.getChunkSource(). The status counts resident chunks per layer.",
       "backend": "core",
       "tags": ["tilemap", "tiled", "streaming"],
       "level": "advanced",
@@ -1083,7 +1094,7 @@
       "path": "tilemap/worker-streamed-terrain.js",
       "language": "typescript",
       "title": "Streamed Terrain",
-      "description": "Explore a deterministic unbounded world, reroll its seed, and compare synchronous and worker-backed terrain sampling at adjustable cost.",
+      "description": "Fly across a deterministic unbounded world with WASD and compare synchronous and worker-backed terrain sampling: pick the provider and sample cost, or roll a new seed, in the Provider panel. Raise the cost, then switch to worker to compare frame time while moving; the spinning character is a jank indicator.",
       "backend": "core",
       "tags": ["tilemap", "procedural", "worker"],
       "level": "advanced",
@@ -1096,7 +1107,7 @@
       "path": "showcase/rectangles-collision.js",
       "language": "typescript",
       "title": "Rectangles Collision",
-      "description": "Drag rectangles around the canvas and detect AABB overlap in the update loop — foundational collision recipe.",
+      "description": "Drag either rectangle over the other and detect AABB overlap in the update loop: both tint red and the overlap region lights up while the status shows its size. Foundational collision recipe.",
       "backend": "core",
       "tags": ["scene", "rendering"],
       "level": "intro"
@@ -1106,7 +1117,7 @@
       "path": "physics/sprite-follows-body.js",
       "language": "typescript",
       "title": "Drag and Throw Physics",
-      "description": "Drag a body with MouseJoint and release it onto the floor; world.attach keeps its sprite aligned with the simulation.",
+      "description": "Drag the character with the mouse (a MouseJoint pulls its body) and release it onto the floor; R resets it. world.attach binds the sprite to the body, so the sprite follows the simulated position and rotation. Grabs, throws and floor contacts are logged to the Output panel.",
       "backend": "core",
       "tags": ["physics", "binding", "pointer", "joints"],
       "capabilities": ["pointer", "keyboard"],
@@ -1117,7 +1128,7 @@
       "path": "physics/kinematic-movement.js",
       "language": "typescript",
       "title": "Kinematic Movement",
-      "description": "Steer a kinematic body with the keyboard; it stops at walls, slides along them and comes to rest in tight corners.",
+      "description": "Steer a kinematic body with WASD or the arrow keys; it stops at walls, slides along them when you push in at an angle, and comes to rest in tight corners. The status shows blocked or free with the surface normal.",
       "backend": "core",
       "tags": ["physics", "movement", "keyboard"],
       "capabilities": ["keyboard"],
@@ -1128,7 +1139,7 @@
       "path": "physics/character-movement.js",
       "language": "typescript",
       "title": "Character Movement",
-      "description": "Run, jump and double-jump a capsule character over a slope, steps, a one-way platform and moving platforms, with live ground and velocity readouts.",
+      "description": "Run with A/D or the arrows, jump with Space, W or Up (once more in the air), and press S or Down to drop through the one-way platform. Climb the 30 degree slope and the low step, get stopped by the steep face and the tall block, and ride the moving platforms, with live ground and velocity readouts.",
       "backend": "core",
       "tags": ["physics", "movement", "platformer", "keyboard"],
       "capabilities": ["keyboard"],
@@ -1139,7 +1150,7 @@
       "path": "physics/tiled-map-physics-actor.js",
       "language": "typescript",
       "title": "Tiled Collision Map",
-      "description": "Load an authored .tmj room, build static bodies from its Collision object layer, and toggle outlines while a dynamic actor lands on them.",
+      "description": "Load an authored .tmj room, build static bodies from its Collision object layer with buildObjectLayerColliders(), and toggle the authored collision outlines while a dynamic actor lands on them.",
       "backend": "core",
       "tags": ["physics", "tilemap", "collision"],
       "level": "intermediate"
@@ -1149,7 +1160,7 @@
       "path": "physics/joint-driven-shadows.js",
       "language": "typescript",
       "title": "Joint-Driven Shadows",
-      "description": "Drag a hinged physics arm through a live light and watch its collider reshape the shadow it casts.",
+      "description": "Drag the hinged physics arm through a live light and watch its collider reshape the shadow it casts. PhysicsOccluder includes dynamic bodies here; its static-only default would omit the moving arm.",
       "backend": "core",
       "tags": ["physics", "joints", "lighting", "shadows"],
       "capabilities": ["pointer"],
@@ -1163,7 +1174,7 @@
       "path": "debug-layer/pointer-and-hittest.js",
       "language": "typescript",
       "title": "Interaction Inspector",
-      "description": "Drag overlapping sprites, change their z-order, and inspect their bounds and hit-test targets.",
+      "description": "Drag overlapping sprites and press 1, 2 or 3 to bring that sprite to the front while the debug overlays show pointer targets, hit tests, and scene-graph bounds. The Output panel names the sprite each tap hit and where each drag ended.",
       "backend": "core",
       "tags": ["debug", "pointer", "input", "scene-graph"],
       "capabilities": ["pointer", "keyboard"],
@@ -1174,7 +1185,7 @@
       "path": "performance/backend-comparison.js",
       "language": "typescript",
       "title": "Sprite Batching Laboratory",
-      "description": "Change visible sprite count and texture diversity within one seeded workload, inspect the performance overlay, and switch between WebGL2 and WebGPU when available.",
+      "description": "One seeded sprite workload with the performance overlay: change the sprite count (Up/Down), share one texture or spread over four (T) and switch between WebGL2 and WebGPU when available (B), or use the panel.",
       "backend": "core",
       "featured": true,
       "tags": ["performance", "batching", "rendering", "webgpu"],
@@ -1186,7 +1197,7 @@
       "path": "scene-graph/retained-container.js",
       "language": "typescript",
       "title": "Retained Container",
-      "description": "Hold a large static sprite field in a RetainedContainer and pan the whole group as a camera: the retained tier replays the subtree as O(batches) with one group-matrix update, while a plain Container walks every child each frame. Toggle the tier and compare the frame-time readout.",
+      "description": "A static field of sprites drifts as one group like a camera pan. With the retained tier on, the field replays as recorded batches with one group-matrix update; off, a plain Container walks every child each frame. The panel shows submitted nodes and frame time.",
       "backend": "core",
       "tags": ["scene-graph", "rendering", "performance"],
       "level": "advanced"
@@ -1196,7 +1207,7 @@
       "path": "geometry-graphics/immediate-mode-rendering.js",
       "language": "typescript",
       "title": "Immediate-Mode Rendering",
-      "description": "Draw procedural geometry without a scene graph: gears via drawGeometry and a 2,400-spark field as a single instanced RenderBatch draw call, with a live drawCalls readout.",
+      "description": "Draw procedural geometry without a scene graph: gears via drawGeometry and a 2,400-spark field as one instanced RenderBatch. Turn batching off to draw each spark separately and watch the draw-call count.",
       "backend": "core",
       "tags": ["rendering", "geometry", "instancing", "performance"],
       "level": "advanced"
diff --git a/examples/filters/bloom-filter.js b/examples/filters/bloom-filter.js
index c7c2b9535..819df7aba 100644
--- a/examples/filters/bloom-filter.js
+++ b/examples/filters/bloom-filter.js
@@ -1,6 +1,6 @@
 // Auto-generated from bloom-filter.ts - edit the .ts source, not this file.
 import { Application, BloomFilter, Color, Container, FixedResolutionCanvasSizing, Graphics, Scene } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, slider } from '@examples/runtime';
 /**
  * Six discs of rising luminance on a dark backdrop. Only the ones above the
  * threshold glow, so dragging Threshold walks the glow along the row and shows
@@ -28,8 +28,6 @@ class BloomFilterScene extends Scene {
   discs;
   beam;
   elapsed = 0;
-  hud;
-  panel;
   init() {
     const { width, height } = this.app;
     this.bloom = new BloomFilter({ threshold: 0.6, intensity: 1.6, strength: 10, levels: 3 });
@@ -47,73 +45,22 @@ class BloomFilterScene extends Scene {
       this.discs.fillColor = DISCS[index];
       this.discs.drawCircle(spacing * (index + 1), height * 0.38, DISC_RADIUS);
     }
-    this.hud = mountControls({
-      title: 'Bloom Filter',
-      controls: [
-        { keys: 'Threshold', action: 'linear luminance to glow (1 = white)' },
-        { keys: 'Intensity', action: 'how much of the extracted highlight is added back' },
-        { keys: 'Strength', action: 'how far the glow spreads, in logical units' },
-        { keys: 'Levels', action: 'halvings before the blur - wider and cheaper, or tighter' },
-      ],
-      status: this.statusText(),
-      hint: 'The discs get brighter from left to right. Raise Threshold and watch the glow retreat along the row.',
-    });
-    this.panel = mountControlPanel({ title: 'Bloom' });
-    this.panel.addSlider({
-      label: 'Threshold',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.bloom.threshold,
-      onChange: value => {
-        this.bloom.threshold = value;
-        this.refresh();
-      },
-    });
-    this.panel.addSlider({
-      label: 'Intensity',
-      min: 0,
-      max: 4,
-      step: 0.1,
-      value: this.bloom.intensity,
-      onChange: value => {
-        this.bloom.intensity = value;
-        this.refresh();
-      },
-    });
-    this.panel.addSlider({
-      label: 'Strength',
-      min: 0,
-      max: 32,
-      step: 1,
-      value: this.bloom.strength,
-      onChange: value => {
-        this.bloom.strength = value;
-        this.refresh();
+    demoPanel({
+      title: 'Bloom',
+      controls: {
+        threshold: slider('Threshold', { min: 0, max: 1, step: 0.05, value: this.bloom.threshold }),
+        intensity: slider('Intensity', { min: 0, max: 4, step: 0.1, value: this.bloom.intensity }),
+        strength: slider('Strength', { min: 0, max: 32, step: 1, value: this.bloom.strength, format: v => v.toFixed(0) }),
+        levels: slider('Levels', { min: 1, max: 5, step: 1, value: this.bloom.levels, format: v => v.toFixed(0) }),
       },
-    });
-    this.panel.addSlider({
-      label: 'Levels',
-      min: 1,
-      max: 5,
-      step: 1,
-      value: this.bloom.levels,
-      onChange: value => {
-        this.bloom.levels = value;
-        this.refresh();
+      onChange: (key, value) => {
+        this.bloom[key] = value;
       },
     });
   }
   update(delta) {
     this.elapsed += delta;
   }
-  statusText() {
-    const { threshold, intensity, strength, levels } = this.bloom;
-    return `threshold ${threshold.toFixed(2)} · intensity ${intensity.toFixed(1)} · strength ${strength.toFixed(0)} · levels ${levels}`;
-  }
-  refresh() {
-    this.hud.setStatus(this.statusText());
-  }
   draw(context) {
     const { width, height } = this.app;
     // A sweeping white bar: a moving highlight shows the glow tracking it,
diff --git a/examples/filters/bloom-filter.ts b/examples/filters/bloom-filter.ts
index 96c785d99..c9c8e31f2 100644
--- a/examples/filters/bloom-filter.ts
+++ b/examples/filters/bloom-filter.ts
@@ -9,7 +9,7 @@ import {
   Scene,
   type Seconds,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, slider } from '@examples/runtime';
 
 /**
  * Six discs of rising luminance on a dark backdrop. Only the ones above the
@@ -40,8 +40,6 @@ class BloomFilterScene extends Scene {
   private discs!: Graphics;
   private beam!: Graphics;
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
 
   override init(): void {
     const { width, height } = this.app;
@@ -64,61 +62,16 @@ class BloomFilterScene extends Scene {
       this.discs.drawCircle(spacing * (index + 1), height * 0.38, DISC_RADIUS);
     }
 
-    this.hud = mountControls({
-      title: 'Bloom Filter',
-      controls: [
-        { keys: 'Threshold', action: 'linear luminance to glow (1 = white)' },
-        { keys: 'Intensity', action: 'how much of the extracted highlight is added back' },
-        { keys: 'Strength', action: 'how far the glow spreads, in logical units' },
-        { keys: 'Levels', action: 'halvings before the blur - wider and cheaper, or tighter' },
-      ],
-      status: this.statusText(),
-      hint: 'The discs get brighter from left to right. Raise Threshold and watch the glow retreat along the row.',
-    });
-
-    this.panel = mountControlPanel({ title: 'Bloom' });
-    this.panel.addSlider({
-      label: 'Threshold',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.bloom.threshold,
-      onChange: value => {
-        this.bloom.threshold = value;
-        this.refresh();
-      },
-    });
-    this.panel.addSlider({
-      label: 'Intensity',
-      min: 0,
-      max: 4,
-      step: 0.1,
-      value: this.bloom.intensity,
-      onChange: value => {
-        this.bloom.intensity = value;
-        this.refresh();
-      },
-    });
-    this.panel.addSlider({
-      label: 'Strength',
-      min: 0,
-      max: 32,
-      step: 1,
-      value: this.bloom.strength,
-      onChange: value => {
-        this.bloom.strength = value;
-        this.refresh();
+    demoPanel({
+      title: 'Bloom',
+      controls: {
+        threshold: slider('Threshold', { min: 0, max: 1, step: 0.05, value: this.bloom.threshold }),
+        intensity: slider('Intensity', { min: 0, max: 4, step: 0.1, value: this.bloom.intensity }),
+        strength: slider('Strength', { min: 0, max: 32, step: 1, value: this.bloom.strength, format: v => v.toFixed(0) }),
+        levels: slider('Levels', { min: 1, max: 5, step: 1, value: this.bloom.levels, format: v => v.toFixed(0) }),
       },
-    });
-    this.panel.addSlider({
-      label: 'Levels',
-      min: 1,
-      max: 5,
-      step: 1,
-      value: this.bloom.levels,
-      onChange: value => {
-        this.bloom.levels = value;
-        this.refresh();
+      onChange: (key, value) => {
+        this.bloom[key] = value;
       },
     });
   }
@@ -127,16 +80,6 @@ class BloomFilterScene extends Scene {
     this.elapsed += delta;
   }
 
-  private statusText(): string {
-    const { threshold, intensity, strength, levels } = this.bloom;
-
-    return `threshold ${threshold.toFixed(2)} · intensity ${intensity.toFixed(1)} · strength ${strength.toFixed(0)} · levels ${levels}`;
-  }
-
-  private refresh(): void {
-    this.hud.setStatus(this.statusText());
-  }
-
   override draw(context: RenderingContext): void {
     const { width, height } = this.app;
     // A sweeping white bar: a moving highlight shows the glow tracking it,
diff --git a/examples/filters/blur-filter.js b/examples/filters/blur-filter.js
index 559d936c6..489932f67 100644
--- a/examples/filters/blur-filter.js
+++ b/examples/filters/blur-filter.js
@@ -1,15 +1,14 @@
 // Auto-generated from blur-filter.ts - edit the .ts source, not this file.
 import { Application, BlurFilter, Color, DropShadowFilter, FixedResolutionCanvasSizing, Scene, Sprite, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
-const SHIP = assets.demo.textures.shipA;
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, slider } from '@examples/runtime';
+const SHIP = assets.ship;
 class BlurAndShadowScene extends Scene {
   reference;
   filtered;
   blur = new BlurFilter({ strength: 3 });
-  shadow = new DropShadowFilter({ offsetX: 16, offsetY: 20, blur: 8, quality: 2, color: new Color(0, 0, 0, 0.8) });
-  mode = 'blur';
-  enabled = true;
-  hud;
+  shadow = new DropShadowFilter({ offsetX: 15, offsetY: 18, blur: 8, quality: 2, color: new Color(0, 0, 0, 0.8) });
+  panel;
   labels;
   init() {
     const { width, height } = this.app;
@@ -26,66 +25,20 @@ class BlurAndShadowScene extends Scene {
       new Text('Original', { fillColor: Color.white, fontSize: 25 }).setAnchor(0.5).setPosition(width * 0.3, height * 0.78),
       new Text('Blur', { fillColor: Color.white, fontSize: 25 }).setAnchor(0.5).setPosition(width * 0.7, height * 0.78),
     ];
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Blur and Drop Shadow',
-      hint: 'Compare the original sprite with a blurred sprite or an offset shadow.',
-    });
-    const panel = mountControlPanel({ title: 'Filter' });
-    panel.addButton({
-      label: 'Blur',
-      onClick: () => {
-        this.mode = 'blur';
-        this.refresh();
-      },
-    });
-    panel.addButton({
-      label: 'Drop shadow',
-      onClick: () => {
-        this.mode = 'shadow';
-        this.refresh();
-      },
-    });
-    panel.addSlider({
-      label: 'Blur strength',
-      min: 0,
-      max: 8,
-      step: 0.1,
-      value: this.blur.strength,
-      onChange: value => {
-        this.blur.strength = value;
-        this.refresh();
+      controls: {
+        filter: choice('Filter', ['Blur', 'Drop shadow']),
+        strength: slider('Strength', { min: 0, max: 8, value: 3, step: 0.1, format: value => value.toFixed(1) }),
       },
-    });
-    panel.addSlider({
-      label: 'Shadow offset',
-      min: -40,
-      max: 40,
-      step: 1,
-      value: this.shadow.offsetX,
-      onChange: value => {
-        this.shadow.offsetX = value;
-        this.shadow.offsetY = value;
-        this.refresh();
-      },
-    });
-    panel.addToggle({
-      label: 'Filter',
-      value: true,
-      onChange: value => {
-        this.enabled = value;
-        this.refresh();
+      onChange: (_key, _value, values) => {
+        this.blur.strength = values.strength;
+        this.shadow.offsetX = values.strength * 5;
+        this.shadow.offsetY = values.strength * 6;
+        this.filtered.filters = [values.filter === 'Blur' ? this.blur : this.shadow];
+        this.labels[1].text = values.filter;
       },
     });
-    this.refresh();
-  }
-  refresh() {
-    this.filtered.filters = this.enabled ? [this.mode === 'blur' ? this.blur : this.shadow] : [];
-    this.labels[1].text = this.enabled ? (this.mode === 'blur' ? 'Blurred' : 'Drop shadow') : 'Bypassed';
-    this.hud.setStatus(
-      this.mode === 'blur'
-        ? `Blur strength: ${this.blur.strength.toFixed(1)} px${this.enabled ? '' : ' (bypassed)'}`
-        : `Shadow offset: ${this.shadow.offsetX} px${this.enabled ? '' : ' (bypassed)'}`,
-    );
   }
   draw(context) {
     context.render(this.reference);
@@ -94,6 +47,10 @@ class BlurAndShadowScene extends Scene {
       context.render(label);
     }
   }
+  destroy() {
+    this.panel.dispose();
+    super.destroy();
+  }
 }
 const app = new Application({
   scenes: { BlurAndShadowScene },
diff --git a/examples/filters/blur-filter.ts b/examples/filters/blur-filter.ts
index 5b687685d..7255dd8a1 100644
--- a/examples/filters/blur-filter.ts
+++ b/examples/filters/blur-filter.ts
@@ -9,18 +9,17 @@ import {
   Sprite,
   Text,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, slider, type SliderSpec } from '@examples/runtime';
 
-const SHIP = assets.demo.textures.shipA;
+const SHIP = assets.ship;
 
 class BlurAndShadowScene extends Scene {
   private reference!: Sprite;
   private filtered!: Sprite;
   private blur = new BlurFilter({ strength: 3 });
-  private shadow = new DropShadowFilter({ offsetX: 16, offsetY: 20, blur: 8, quality: 2, color: new Color(0, 0, 0, 0.8) });
-  private mode: 'blur' | 'shadow' = 'blur';
-  private enabled = true;
-  private hud!: ReturnType<typeof mountControls>;
+  private shadow = new DropShadowFilter({ offsetX: 15, offsetY: 18, blur: 8, quality: 2, color: new Color(0, 0, 0, 0.8) });
+  private panel!: DemoPanel<{ filter: ChoiceSpec<'Blur' | 'Drop shadow'>; strength: SliderSpec }>;
   private labels!: Text[];
 
   override init(): void {
@@ -39,67 +38,20 @@ class BlurAndShadowScene extends Scene {
       new Text('Blur', { fillColor: Color.white, fontSize: 25 }).setAnchor(0.5).setPosition(width * 0.7, height * 0.78),
     ];
 
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Blur and Drop Shadow',
-      hint: 'Compare the original sprite with a blurred sprite or an offset shadow.',
-    });
-    const panel = mountControlPanel({ title: 'Filter' });
-    panel.addButton({
-      label: 'Blur',
-      onClick: () => {
-        this.mode = 'blur';
-        this.refresh();
-      },
-    });
-    panel.addButton({
-      label: 'Drop shadow',
-      onClick: () => {
-        this.mode = 'shadow';
-        this.refresh();
-      },
-    });
-    panel.addSlider({
-      label: 'Blur strength',
-      min: 0,
-      max: 8,
-      step: 0.1,
-      value: this.blur.strength,
-      onChange: value => {
-        this.blur.strength = value;
-        this.refresh();
-      },
-    });
-    panel.addSlider({
-      label: 'Shadow offset',
-      min: -40,
-      max: 40,
-      step: 1,
-      value: this.shadow.offsetX,
-      onChange: value => {
-        this.shadow.offsetX = value;
-        this.shadow.offsetY = value;
-        this.refresh();
+      controls: {
+        filter: choice('Filter', ['Blur', 'Drop shadow']),
+        strength: slider('Strength', { min: 0, max: 8, value: 3, step: 0.1, format: value => value.toFixed(1) }),
       },
-    });
-    panel.addToggle({
-      label: 'Filter',
-      value: true,
-      onChange: value => {
-        this.enabled = value;
-        this.refresh();
+      onChange: (_key, _value, values) => {
+        this.blur.strength = values.strength;
+        this.shadow.offsetX = values.strength * 5;
+        this.shadow.offsetY = values.strength * 6;
+        this.filtered.filters = [values.filter === 'Blur' ? this.blur : this.shadow];
+        this.labels[1].text = values.filter;
       },
     });
-    this.refresh();
-  }
-
-  private refresh(): void {
-    this.filtered.filters = this.enabled ? [this.mode === 'blur' ? this.blur : this.shadow] : [];
-    this.labels[1].text = this.enabled ? (this.mode === 'blur' ? 'Blurred' : 'Drop shadow') : 'Bypassed';
-    this.hud.setStatus(
-      this.mode === 'blur'
-        ? `Blur strength: ${this.blur.strength.toFixed(1)} px${this.enabled ? '' : ' (bypassed)'}`
-        : `Shadow offset: ${this.shadow.offsetX} px${this.enabled ? '' : ' (bypassed)'}`,
-    );
   }
 
   override draw(context: RenderingContext): void {
@@ -110,6 +62,11 @@ class BlurAndShadowScene extends Scene {
       context.render(label);
     }
   }
+
+  override destroy(): void {
+    this.panel.dispose();
+    super.destroy();
+  }
 }
 
 const app = new Application({
diff --git a/examples/filters/chromatic-aberration.js b/examples/filters/chromatic-aberration.js
index 471f59bde..b00af5d06 100644
--- a/examples/filters/chromatic-aberration.js
+++ b/examples/filters/chromatic-aberration.js
@@ -1,8 +1,9 @@
 // Auto-generated from chromatic-aberration.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, ShaderFilter, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 // A dense checkerboard makes the per-channel RGB split read clearly along edges.
-const CHECKER = assets.technical.filtering.checker256;
+const CHECKER = assets.checker256;
 const glsl = `#version 300 es
 precision mediump float; uniform sampler2D uTexture; uniform float uOffset; in vec2 vUv; out vec4 fragColor;
 void main(){ vec2 o=vec2(uOffset,0.0); float r=texture(uTexture,vUv+o).r; float g=texture(uTexture,vUv).g; float b=texture(uTexture,vUv-o).b; float a=texture(uTexture,vUv).a; fragColor=vec4(r,g,b,a);} `;
diff --git a/examples/filters/chromatic-aberration.ts b/examples/filters/chromatic-aberration.ts
index 744f44b1b..93674bee0 100644
--- a/examples/filters/chromatic-aberration.ts
+++ b/examples/filters/chromatic-aberration.ts
@@ -1,8 +1,9 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, ShaderFilter, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 
 // A dense checkerboard makes the per-channel RGB split read clearly along edges.
-const CHECKER = assets.technical.filtering.checker256;
+const CHECKER = assets.checker256;
 
 const glsl = `#version 300 es
 precision mediump float; uniform sampler2D uTexture; uniform float uOffset; in vec2 vUv; out vec4 fragColor;
diff --git a/examples/filters/color-matrix-filter.js b/examples/filters/color-matrix-filter.js
index 0aa54d5fa..ea7f6ac5d 100644
--- a/examples/filters/color-matrix-filter.js
+++ b/examples/filters/color-matrix-filter.js
@@ -1,9 +1,8 @@
 // Auto-generated from color-matrix-filter.ts - edit the .ts source, not this file.
 import { Application, Color, ColorMatrixFilter, FixedResolutionCanvasSizing, LutFilter, Scene, Sprite, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const RAMP_SIZE = 256;
 const LUT_SIZE = 17;
-const MODES = ['Matrix: grayscale', 'Matrix: sepia', '1D ramp: channel curves', '3D LUT: cool grade', 'Bypass'];
 const makeRamp = () => {
   const canvas = document.createElement('canvas');
   canvas.width = RAMP_SIZE;
@@ -49,87 +48,56 @@ const makeCoolLut = () => {
   context.putImageData(image, 0, 0);
   return canvas;
 };
+const TILE = 220;
 class ColorTransformsScene extends Scene {
-  reference;
-  processed;
-  referenceLabel;
-  processedLabel;
-  matrix;
-  ramp;
-  rampFilter;
-  cube;
-  cubeFilter;
-  hud;
-  init() {
+  sprites = [];
+  labels = [];
+  owned = [];
+  async load() {
+    const [ramp, art] = await Promise.all([this.loader.load(assets.primaryRamp), this.loader.load(assets.backgroundForest)]);
     const { width, height } = this.app;
-    const image = this.loader.get(assets.technical.color.primaryRamp);
-    this.reference = new Sprite(image)
-      .setAnchor(0.5)
-      .setScale(3)
-      .setPosition(width * 0.28, height / 2);
-    this.processed = new Sprite(image)
-      .setAnchor(0.5)
-      .setScale(3)
-      .setPosition(width * 0.72, height / 2);
-    this.referenceLabel = new Text('ORIGINAL', { fontSize: 22, fillColor: Color.white })
-      .setAnchor(0.5)
-      .setPosition(width * 0.28, height * 0.72);
-    this.processedLabel = new Text('TRANSFORMED', { fontSize: 22, fillColor: Color.white })
-      .setAnchor(0.5)
-      .setPosition(width * 0.72, height * 0.72);
-    // Grading is display-referred: the matrix and both lookups run on encoded
+    // Grading is display-referred: the matrices and both lookups run on encoded
     // sRGB values, which is what the numbers below were written against, and
     // the result returns to linear premultiplied colour. `'linear-srgb'` would
     // apply the same numbers to linear light instead. The LUT images are
-    // numeric tables (`fromImage` never decodes them), and a neutral matrix or
-    // identity table leaves colour and alpha untouched.
-    this.matrix = new ColorMatrixFilter(undefined, { colorSpace: 'srgb' });
-    this.ramp = LutFilter.fromImage(makeRamp());
-    this.rampFilter = new LutFilter({ mode: 'rgb1d', colorSpace: 'srgb' }).setLut(this.ramp);
-    this.cube = LutFilter.fromImage(makeCoolLut());
-    this.cubeFilter = new LutFilter({ mode: '3d', size: LUT_SIZE, colorSpace: 'srgb' }).setLut(this.cube);
-    this.hud = mountControls({
-      title: 'Color Transforms',
-      status: 'Matrix: grayscale',
-      hint: 'The left image is unchanged. Compare a channel-mixing matrix, independent per-channel curves, and a 3D color lookup on the same right-hand image.',
-    });
-    mountControlPanel({ title: 'Transform' }).addCycle({
-      label: 'Method',
-      options: [...MODES],
-      index: 0,
-      onChange: index => this.setMode(index),
+    // numeric tables (`fromImage` never decodes them).
+    const curves = LutFilter.fromImage(makeRamp());
+    const cube = LutFilter.fromImage(makeCoolLut());
+    const columns = [
+      { label: 'Original', filter: null },
+      { label: 'Matrix: grayscale', filter: new ColorMatrixFilter(undefined, { colorSpace: 'srgb' }).grayscale() },
+      { label: 'Matrix: sepia', filter: new ColorMatrixFilter(undefined, { colorSpace: 'srgb' }).sepia() },
+      { label: '1D ramp: curves', filter: new LutFilter({ mode: 'rgb1d', colorSpace: 'srgb' }).setLut(curves) },
+      { label: '3D LUT: cool grade', filter: new LutFilter({ mode: '3d', size: LUT_SIZE, colorSpace: 'srgb' }).setLut(cube) },
+    ];
+    const step = width / columns.length;
+    this.owned.push(curves, cube);
+    columns.forEach(({ label, filter }, index) => {
+      const x = step * (index + 0.5);
+      if (filter) {
+        this.owned.push(filter);
+      }
+      [ramp, art].forEach((texture, row) => {
+        const sprite = new Sprite(texture).setAnchor(0.5).setPosition(x, height / 2 + (row - 0.5) * (TILE + 24));
+        // The colour ramp is a short strip; stretching it to a square tile
+        // keeps every hue large enough to compare.
+        sprite.width = TILE;
+        sprite.height = texture === ramp ? TILE * 0.6 : (TILE * texture.height) / texture.width;
+        sprite.filters = filter ? [filter] : [];
+        this.sprites.push(sprite);
+      });
+      this.labels.push(new Text(label, { fontSize: 17, fillColor: Color.white }).setAnchor(0.5).setPosition(x, 60));
     });
-    this.setMode(0);
-  }
-  setMode(index) {
-    if (index === 0) {
-      this.processed.filters = [this.matrix.reset().grayscale()];
-    } else if (index === 1) {
-      this.processed.filters = [this.matrix.reset().sepia()];
-    } else if (index === 2) {
-      this.processed.filters = [this.rampFilter];
-    } else if (index === 3) {
-      this.processed.filters = [this.cubeFilter];
-    } else {
-      this.processed.filters = [];
-    }
-    this.hud.setStatus(MODES[index] ?? MODES[4]);
   }
   draw(context) {
-    context.render(this.reference);
-    context.render(this.processed);
-    context.render(this.referenceLabel);
-    context.render(this.processedLabel);
+    for (const drawable of [...this.sprites, ...this.labels]) {
+      context.render(drawable);
+    }
   }
   destroy() {
-    this.hud.dispose();
-    this.matrix.destroy();
-    this.rampFilter.destroy();
-    this.cubeFilter.destroy();
-    this.ramp.destroy();
-    this.cube.destroy();
-    this.referenceLabel.destroy();
-    this.processedLabel.destroy();
+    for (const resource of this.owned) {
+      resource.destroy();
+    }
     super.destroy();
   }
 }
diff --git a/examples/filters/color-matrix-filter.ts b/examples/filters/color-matrix-filter.ts
index 5b7816a11..6134358bc 100644
--- a/examples/filters/color-matrix-filter.ts
+++ b/examples/filters/color-matrix-filter.ts
@@ -8,13 +8,11 @@ import {
   Scene,
   Sprite,
   Text,
-  type Texture,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const RAMP_SIZE = 256;
 const LUT_SIZE = 17;
-const MODES = ['Matrix: grayscale', 'Matrix: sepia', '1D ramp: channel curves', '3D LUT: cool grade', 'Bypass'] as const;
 
 const makeRamp = (): HTMLCanvasElement => {
   const canvas = document.createElement('canvas');
@@ -73,93 +71,68 @@ const makeCoolLut = (): HTMLCanvasElement => {
   return canvas;
 };
 
+const TILE = 220;
+
 class ColorTransformsScene extends Scene {
-  private reference!: Sprite;
-  private processed!: Sprite;
-  private referenceLabel!: Text;
-  private processedLabel!: Text;
-  private matrix!: ColorMatrixFilter;
-  private ramp!: Texture;
-  private rampFilter!: LutFilter;
-  private cube!: Texture;
-  private cubeFilter!: LutFilter;
-  private hud!: ReturnType<typeof mountControls>;
-
-  override init(): void {
+  private readonly sprites: Sprite[] = [];
+  private readonly labels: Text[] = [];
+  private readonly owned: Array<{ destroy(): void }> = [];
+
+  override async load(): Promise<void> {
+    const [ramp, art] = await Promise.all([this.loader.load(assets.primaryRamp), this.loader.load(assets.backgroundForest)]);
     const { width, height } = this.app;
-    const image = this.loader.get(assets.technical.color.primaryRamp);
-    this.reference = new Sprite(image)
-      .setAnchor(0.5)
-      .setScale(3)
-      .setPosition(width * 0.28, height / 2);
-    this.processed = new Sprite(image)
-      .setAnchor(0.5)
-      .setScale(3)
-      .setPosition(width * 0.72, height / 2);
-    this.referenceLabel = new Text('ORIGINAL', { fontSize: 22, fillColor: Color.white })
-      .setAnchor(0.5)
-      .setPosition(width * 0.28, height * 0.72);
-    this.processedLabel = new Text('TRANSFORMED', { fontSize: 22, fillColor: Color.white })
-      .setAnchor(0.5)
-      .setPosition(width * 0.72, height * 0.72);
-    // Grading is display-referred: the matrix and both lookups run on encoded
+
+    // Grading is display-referred: the matrices and both lookups run on encoded
     // sRGB values, which is what the numbers below were written against, and
     // the result returns to linear premultiplied colour. `'linear-srgb'` would
     // apply the same numbers to linear light instead. The LUT images are
-    // numeric tables (`fromImage` never decodes them), and a neutral matrix or
-    // identity table leaves colour and alpha untouched.
-    this.matrix = new ColorMatrixFilter(undefined, { colorSpace: 'srgb' });
-    this.ramp = LutFilter.fromImage(makeRamp());
-    this.rampFilter = new LutFilter({ mode: 'rgb1d', colorSpace: 'srgb' }).setLut(this.ramp);
-    this.cube = LutFilter.fromImage(makeCoolLut());
-    this.cubeFilter = new LutFilter({ mode: '3d', size: LUT_SIZE, colorSpace: 'srgb' }).setLut(this.cube);
-
-    this.hud = mountControls({
-      title: 'Color Transforms',
-      status: 'Matrix: grayscale',
-      hint: 'The left image is unchanged. Compare a channel-mixing matrix, independent per-channel curves, and a 3D color lookup on the same right-hand image.',
-    });
-    mountControlPanel({ title: 'Transform' }).addCycle({
-      label: 'Method',
-      options: [...MODES],
-      index: 0,
-      onChange: index => this.setMode(index),
-    });
-    this.setMode(0);
-  }
+    // numeric tables (`fromImage` never decodes them).
+    const curves = LutFilter.fromImage(makeRamp());
+    const cube = LutFilter.fromImage(makeCoolLut());
+    const columns = [
+      { label: 'Original', filter: null },
+      { label: 'Matrix: grayscale', filter: new ColorMatrixFilter(undefined, { colorSpace: 'srgb' }).grayscale() },
+      { label: 'Matrix: sepia', filter: new ColorMatrixFilter(undefined, { colorSpace: 'srgb' }).sepia() },
+      { label: '1D ramp: curves', filter: new LutFilter({ mode: 'rgb1d', colorSpace: 'srgb' }).setLut(curves) },
+      { label: '3D LUT: cool grade', filter: new LutFilter({ mode: '3d', size: LUT_SIZE, colorSpace: 'srgb' }).setLut(cube) },
+    ];
+    const step = width / columns.length;
+
+    this.owned.push(curves, cube);
+
+    columns.forEach(({ label, filter }, index) => {
+      const x = step * (index + 0.5);
+
+      if (filter) {
+        this.owned.push(filter);
+      }
 
-  private setMode(index: number): void {
-    if (index === 0) {
-      this.processed.filters = [this.matrix.reset().grayscale()];
-    } else if (index === 1) {
-      this.processed.filters = [this.matrix.reset().sepia()];
-    } else if (index === 2) {
-      this.processed.filters = [this.rampFilter];
-    } else if (index === 3) {
-      this.processed.filters = [this.cubeFilter];
-    } else {
-      this.processed.filters = [];
-    }
+      [ramp, art].forEach((texture, row) => {
+        const sprite = new Sprite(texture).setAnchor(0.5).setPosition(x, height / 2 + (row - 0.5) * (TILE + 24));
+
+        // The colour ramp is a short strip; stretching it to a square tile
+        // keeps every hue large enough to compare.
+        sprite.width = TILE;
+        sprite.height = texture === ramp ? TILE * 0.6 : (TILE * texture.height) / texture.width;
+        sprite.filters = filter ? [filter] : [];
+        this.sprites.push(sprite);
+      });
 
-    this.hud.setStatus(MODES[index] ?? MODES[4]);
+      this.labels.push(new Text(label, { fontSize: 17, fillColor: Color.white }).setAnchor(0.5).setPosition(x, 60));
+    });
   }
 
   override draw(context: RenderingContext): void {
-    context.render(this.reference);
-    context.render(this.processed);
-    context.render(this.referenceLabel);
-    context.render(this.processedLabel);
+    for (const drawable of [...this.sprites, ...this.labels]) {
+      context.render(drawable);
+    }
   }
 
   override destroy(): void {
-    this.hud.dispose();
-    this.matrix.destroy();
-    this.rampFilter.destroy();
-    this.cubeFilter.destroy();
-    this.ramp.destroy();
-    this.cube.destroy();
-    this.referenceLabel.destroy();
-    this.processedLabel.destroy();
+    for (const resource of this.owned) {
+      resource.destroy();
+    }
+
     super.destroy();
   }
 }
diff --git a/examples/filters/crt-scanlines.js b/examples/filters/crt-scanlines.js
index f17ea01ef..c2a5108ee 100644
--- a/examples/filters/crt-scanlines.js
+++ b/examples/filters/crt-scanlines.js
@@ -1,6 +1,7 @@
 // Auto-generated from crt-scanlines.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, Scene, ShaderFilter, Sprite, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, slider, toggle } from '@examples/runtime';
 const glsl = `#version 300 es
 precision highp float;
 uniform sampler2D uTexture;
@@ -48,64 +49,36 @@ fn hash(point: vec2<f32>) -> f32 {
 class RetroDisplayScene extends Scene {
   stage;
   filter;
-  hud;
-  enabled = true;
-  amount = 0.8;
-  split = 0.006;
+  panel;
   time = 0;
   init() {
     const { width, height } = this.app;
-    const background = new Sprite(this.loader.get(assets.technical.filtering.uvGrid256)).setAnchor(0.5).setPosition(width / 2, height / 2);
+    const background = new Sprite(this.loader.get(assets.uvGrid256)).setAnchor(0.5).setPosition(width / 2, height / 2);
     background.width = width;
     background.height = height;
     const title = new Text('SIGNAL LOST', { fillColor: Color.white, fontSize: 96, outlineColor: Color.black, outlineWidth: 4 });
     title.setAnchor(0.5).setPosition(width / 2, height / 2);
     this.stage = new Container();
     this.stage.addChild(background, title);
-    this.filter = new ShaderFilter({ glsl: { fragment: glsl }, wgsl, uniforms: { uTime: 0, uAmount: this.amount, uSplit: this.split } });
+    this.filter = new ShaderFilter({ glsl: { fragment: glsl }, wgsl, uniforms: { uTime: 0, uAmount: 0.8, uSplit: 0.006 } });
     this.stage.filters = [this.filter];
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Retro Display',
-      status: this.statusText(),
-      hint: 'One display filter combines barrel distortion, scanlines, animated grain, vignette, and RGB separation. Bypass it to compare the clean scene.',
-    });
-    const panel = mountControlPanel({ title: 'Display' });
-    panel.addToggle({
-      label: 'CRT',
-      value: true,
-      onChange: enabled => {
-        this.enabled = enabled;
-        this.stage.filters = enabled ? [this.filter] : [];
-        this.hud.setStatus(this.statusText());
+      controls: {
+        crt: toggle('CRT', true),
+        strength: slider('Effect strength', { min: 0, max: 1, value: 0.8, step: 0.05, format: value => `${Math.round(value * 100)}%` }),
+        split: slider('RGB separation', { min: 0, max: 0.02, value: 0.006, step: 0.001, format: value => value.toFixed(3) }),
       },
-    });
-    panel.addSlider({
-      label: 'Effect strength',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.amount,
-      onChange: value => {
-        this.amount = value;
-        this.filter.setUniform('uAmount', value);
-        this.hud.setStatus(this.statusText());
+      onChange: (key, _value, values) => {
+        if (key === 'crt') {
+          this.stage.filters = values.crt ? [this.filter] : [];
+        } else if (key === 'strength') {
+          this.filter.setUniform('uAmount', values.strength);
+        } else if (key === 'split') {
+          this.filter.setUniform('uSplit', values.split);
+        }
       },
     });
-    panel.addSlider({
-      label: 'RGB separation',
-      min: 0,
-      max: 0.02,
-      step: 0.001,
-      value: this.split,
-      onChange: value => {
-        this.split = value;
-        this.filter.setUniform('uSplit', value);
-        this.hud.setStatus(this.statusText());
-      },
-    });
-  }
-  statusText() {
-    return this.enabled ? `CRT ${Math.round(this.amount * 100)}% · RGB split ${this.split.toFixed(3)}` : 'CRT off · clean scene';
   }
   update(delta) {
     this.time += delta;
@@ -115,7 +88,7 @@ class RetroDisplayScene extends Scene {
     context.render(this.stage);
   }
   destroy() {
-    this.hud.dispose();
+    this.panel.dispose();
     this.filter.destroy();
     super.destroy();
   }
diff --git a/examples/filters/crt-scanlines.ts b/examples/filters/crt-scanlines.ts
index 35daf6526..ce1208e66 100644
--- a/examples/filters/crt-scanlines.ts
+++ b/examples/filters/crt-scanlines.ts
@@ -10,7 +10,8 @@ import {
   Sprite,
   Text,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { type DemoPanel, demoPanel, slider, type SliderSpec, toggle, type ToggleSpec } from '@examples/runtime';
 
 const glsl = `#version 300 es
 precision highp float;
@@ -61,15 +62,12 @@ fn hash(point: vec2<f32>) -> f32 {
 class RetroDisplayScene extends Scene {
   private stage!: Container;
   private filter!: ShaderFilter;
-  private hud!: ReturnType<typeof mountControls>;
-  private enabled = true;
-  private amount = 0.8;
-  private split = 0.006;
+  private panel!: DemoPanel<{ crt: ToggleSpec; strength: SliderSpec; split: SliderSpec }>;
   private time = 0;
 
   override init(): void {
     const { width, height } = this.app;
-    const background = new Sprite(this.loader.get(assets.technical.filtering.uvGrid256)).setAnchor(0.5).setPosition(width / 2, height / 2);
+    const background = new Sprite(this.loader.get(assets.uvGrid256)).setAnchor(0.5).setPosition(width / 2, height / 2);
     background.width = width;
     background.height = height;
     const title = new Text('SIGNAL LOST', { fillColor: Color.white, fontSize: 96, outlineColor: Color.black, outlineWidth: 4 });
@@ -77,54 +75,28 @@ class RetroDisplayScene extends Scene {
 
     this.stage = new Container();
     this.stage.addChild(background, title);
-    this.filter = new ShaderFilter({ glsl: { fragment: glsl }, wgsl, uniforms: { uTime: 0, uAmount: this.amount, uSplit: this.split } });
+    this.filter = new ShaderFilter({ glsl: { fragment: glsl }, wgsl, uniforms: { uTime: 0, uAmount: 0.8, uSplit: 0.006 } });
     this.stage.filters = [this.filter];
 
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Retro Display',
-      status: this.statusText(),
-      hint: 'One display filter combines barrel distortion, scanlines, animated grain, vignette, and RGB separation. Bypass it to compare the clean scene.',
-    });
-    const panel = mountControlPanel({ title: 'Display' });
-    panel.addToggle({
-      label: 'CRT',
-      value: true,
-      onChange: enabled => {
-        this.enabled = enabled;
-        this.stage.filters = enabled ? [this.filter] : [];
-        this.hud.setStatus(this.statusText());
-      },
-    });
-    panel.addSlider({
-      label: 'Effect strength',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.amount,
-      onChange: value => {
-        this.amount = value;
-        this.filter.setUniform('uAmount', value);
-        this.hud.setStatus(this.statusText());
+      controls: {
+        crt: toggle('CRT', true),
+        strength: slider('Effect strength', { min: 0, max: 1, value: 0.8, step: 0.05, format: value => `${Math.round(value * 100)}%` }),
+        split: slider('RGB separation', { min: 0, max: 0.02, value: 0.006, step: 0.001, format: value => value.toFixed(3) }),
       },
-    });
-    panel.addSlider({
-      label: 'RGB separation',
-      min: 0,
-      max: 0.02,
-      step: 0.001,
-      value: this.split,
-      onChange: value => {
-        this.split = value;
-        this.filter.setUniform('uSplit', value);
-        this.hud.setStatus(this.statusText());
+      onChange: (key, _value, values) => {
+        if (key === 'crt') {
+          this.stage.filters = values.crt ? [this.filter] : [];
+        } else if (key === 'strength') {
+          this.filter.setUniform('uAmount', values.strength);
+        } else if (key === 'split') {
+          this.filter.setUniform('uSplit', values.split);
+        }
       },
     });
   }
 
-  private statusText(): string {
-    return this.enabled ? `CRT ${Math.round(this.amount * 100)}% · RGB split ${this.split.toFixed(3)}` : 'CRT off · clean scene';
-  }
-
   override update(delta: Seconds): void {
     this.time += delta;
     this.filter.setUniform('uTime', this.time);
@@ -135,7 +107,7 @@ class RetroDisplayScene extends Scene {
   }
 
   override destroy(): void {
-    this.hud.dispose();
+    this.panel.dispose();
     this.filter.destroy();
     super.destroy();
   }
diff --git a/examples/filters/custom-fragment-shader.js b/examples/filters/custom-fragment-shader.js
index 1ddcb957a..54b6dc226 100644
--- a/examples/filters/custom-fragment-shader.js
+++ b/examples/filters/custom-fragment-shader.js
@@ -9,8 +9,8 @@ import {
   Sprite,
   UniformType,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
-const UV_GRID = assets.technical.filtering.uvGrid256;
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+const UV_GRID = assets.uvGrid256;
 // The filter input is linear, premultiplied colour, and the fragment returns
 // colour in that same representation, so a shader that only moves samples
 // (as this one does) needs no colour conversion. Only the numeric inputs - the
@@ -58,7 +58,6 @@ class CustomFragmentShaderScene extends Scene {
   time = 0;
   filter;
   sprite;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
@@ -68,12 +67,6 @@ class CustomFragmentShaderScene extends Scene {
       .setScale(4)
       .setPosition(width / 2, height / 2);
     this.sprite.filters = [this.filter];
-    this.hud = mountControls({
-      title: 'Write a Fragment Filter',
-      controls: [{ keys: 'Move pointer', action: 'place the ripple on the UV grid' }],
-      status: 'A moving ripple distorts the UV grid around the pointer.',
-      hint: 'The typed uniform schema generates matching GLSL and WGSL blocks for time and pointer position.',
-    });
     this.filter.uniforms.uPointer.set(0.5, 0.5);
     app.input.onPointerMove.add(this.onMove);
   }
@@ -93,7 +86,6 @@ class CustomFragmentShaderScene extends Scene {
   }
   destroy() {
     this.app.input.onPointerMove.remove(this.onMove);
-    this.hud?.dispose();
     this.sprite?.destroy();
     super.destroy();
   }
diff --git a/examples/filters/custom-fragment-shader.ts b/examples/filters/custom-fragment-shader.ts
index 596f3f02e..427f20591 100644
--- a/examples/filters/custom-fragment-shader.ts
+++ b/examples/filters/custom-fragment-shader.ts
@@ -10,9 +10,9 @@ import {
   Sprite,
   UniformType,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
-const UV_GRID = assets.technical.filtering.uvGrid256;
+const UV_GRID = assets.uvGrid256;
 
 // The filter input is linear, premultiplied colour, and the fragment returns
 // colour in that same representation, so a shader that only moves samples
@@ -63,7 +63,6 @@ class CustomFragmentShaderScene extends Scene {
   private time = 0;
   private filter!: ShaderFilter<typeof warpShader.uniforms>;
   private sprite!: Sprite;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const app = this.app;
@@ -76,12 +75,6 @@ class CustomFragmentShaderScene extends Scene {
       .setPosition(width / 2, height / 2);
     this.sprite.filters = [this.filter];
 
-    this.hud = mountControls({
-      title: 'Write a Fragment Filter',
-      controls: [{ keys: 'Move pointer', action: 'place the ripple on the UV grid' }],
-      status: 'A moving ripple distorts the UV grid around the pointer.',
-      hint: 'The typed uniform schema generates matching GLSL and WGSL blocks for time and pointer position.',
-    });
     this.filter.uniforms.uPointer.set(0.5, 0.5);
     app.input.onPointerMove.add(this.onMove);
   }
@@ -106,7 +99,6 @@ class CustomFragmentShaderScene extends Scene {
 
   override destroy(): void {
     this.app.input.onPointerMove.remove(this.onMove);
-    this.hud?.dispose();
     this.sprite?.destroy();
     super.destroy();
   }
diff --git a/examples/filters/displacement-filter.js b/examples/filters/displacement-filter.js
index 2932445b6..4a30dc45e 100644
--- a/examples/filters/displacement-filter.js
+++ b/examples/filters/displacement-filter.js
@@ -11,8 +11,9 @@ import {
   TextureFormat,
   WrapModes,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
-const SHIP = assets.demo.textures.shipA;
+const SHIP = assets.ship;
 const MAP_SIZE = 256;
 // The displacement map: red is the horizontal direction, green the vertical,
 // both decoded from [0, 1] to [-1, 1], so flat (0.5, 0.5) grey means "stay
@@ -110,8 +111,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 30, 46),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(DisplacementFilterScene);
diff --git a/examples/filters/displacement-filter.ts b/examples/filters/displacement-filter.ts
index fc9a0d06a..6ea49e8b6 100644
--- a/examples/filters/displacement-filter.ts
+++ b/examples/filters/displacement-filter.ts
@@ -13,9 +13,10 @@ import {
   TextureFormat,
   WrapModes,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 
-const SHIP = assets.demo.textures.shipA;
+const SHIP = assets.ship;
 const MAP_SIZE = 256;
 
 // The displacement map: red is the horizontal direction, green the vertical,
@@ -128,9 +129,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 30, 46),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(DisplacementFilterScene);
diff --git a/examples/filters/drop-shadow-filter.js b/examples/filters/drop-shadow-filter.js
index 08cdf2382..fd8703bc7 100644
--- a/examples/filters/drop-shadow-filter.js
+++ b/examples/filters/drop-shadow-filter.js
@@ -1,7 +1,8 @@
 // Auto-generated from drop-shadow-filter.ts - edit the .ts source, not this file.
 import { Application, Color, DropShadowFilter, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
-const SHIP = assets.demo.textures.shipA;
+const SHIP = assets.ship;
 class DropShadowFilterScene extends Scene {
   shadow;
   sprite;
@@ -101,8 +102,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(30, 34, 44),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(DropShadowFilterScene);
diff --git a/examples/filters/drop-shadow-filter.ts b/examples/filters/drop-shadow-filter.ts
index ab32edc4a..ca6344a9b 100644
--- a/examples/filters/drop-shadow-filter.ts
+++ b/examples/filters/drop-shadow-filter.ts
@@ -8,9 +8,10 @@ import {
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 
-const SHIP = assets.demo.textures.shipA;
+const SHIP = assets.ship;
 
 class DropShadowFilterScene extends Scene {
   private shadow!: DropShadowFilter;
@@ -121,9 +122,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(30, 34, 44),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(DropShadowFilterScene);
diff --git a/examples/filters/filter-stack.js b/examples/filters/filter-stack.js
index 5c182e143..ddb80f64b 100644
--- a/examples/filters/filter-stack.js
+++ b/examples/filters/filter-stack.js
@@ -1,7 +1,8 @@
 // Auto-generated from filter-stack.ts - edit the .ts source, not this file.
 import { Application, BlurFilter, Color, ColorMatrixFilter, FixedResolutionCanvasSizing, Scene, ShaderFilter, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
-const PRIMARY_RAMP = assets.technical.color.primaryRamp;
+const PRIMARY_RAMP = assets.primaryRamp;
 const glsl = `#version 300 es
 precision mediump float; uniform sampler2D uTexture; in vec2 vUv; out vec4 fragColor;
 void main(){ vec4 c=texture(uTexture,vUv); fragColor=vec4(c.rgb*vec3(1.0,0.9,1.2),c.a);} `;
diff --git a/examples/filters/filter-stack.ts b/examples/filters/filter-stack.ts
index 782d967c8..9bedda516 100644
--- a/examples/filters/filter-stack.ts
+++ b/examples/filters/filter-stack.ts
@@ -9,9 +9,10 @@ import {
   ShaderFilter,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 
-const PRIMARY_RAMP = assets.technical.color.primaryRamp;
+const PRIMARY_RAMP = assets.primaryRamp;
 
 const glsl = `#version 300 es
 precision mediump float; uniform sampler2D uTexture; in vec2 vUv; out vec4 fragColor;
diff --git a/examples/filters/metaballs.js b/examples/filters/metaballs.js
index 7a449614b..6c151c4a9 100644
--- a/examples/filters/metaballs.js
+++ b/examples/filters/metaballs.js
@@ -1,6 +1,6 @@
 // Auto-generated from metaballs.ts - edit the .ts source, not this file.
 import { Application, BlurFilter, Color, FixedResolutionCanvasSizing, Graphics, Scene, ShaderFilter } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { choice, demoPanel, slider } from '@examples/runtime';
 // Threshold pass: render solid cyan where the (blurred) red field is dense
 // enough, with a smooth edge. The blur in front of this builds the scalar field
 // from the hard circles, so neighbouring blobs merge where their fields sum.
@@ -21,6 +21,7 @@ const wgsl = `@group(0) @binding(1) var uTexture: texture_2d<f32>;
   let shape = smoothstep(0.28, 0.5, field);
   return vec4<f32>(vec3<f32>(0.2, 0.9, 1.0) * shape, shape);
 }`;
+const PASSES = ['Blur then threshold', 'Threshold then blur', 'No filters'];
 class MetaballsScene extends Scene {
   balls;
   points;
@@ -29,7 +30,7 @@ class MetaballsScene extends Scene {
   handle;
   dragPoint = { x: 0, y: 0 };
   dragging = false;
-  hud;
+  panel;
   onPointerDown = (_pointer, x, y) => {
     this.dragging = Math.hypot(x - this.dragPoint.x, y - this.dragPoint.y) < 58;
   };
@@ -48,28 +49,16 @@ class MetaballsScene extends Scene {
     this.points = Array.from({ length: 7 }, (_, i) => ({ a: (i / 7) * Math.PI * 2, r: 120 + (i % 3) * 56 }));
     this.blur = new BlurFilter({ strength: 6 });
     this.threshold = new ShaderFilter({ glsl: { fragment: glsl }, wgsl });
-    this.setOrder('field');
-    this.hud = mountControls({
-      title: 'Metaballs and Filter Order',
-      controls: [{ keys: 'Drag ring', action: 'move a blob into the others' }],
-      status: 'Blur → Threshold: merged shapes',
-      hint: 'Blur then threshold merges nearby circles. Reverse the filters or bypass them to compare the result.',
-    });
-    const panel = mountControlPanel({ title: 'Filter order' });
-    panel.addCycle({
-      label: 'Passes',
-      options: ['Blur → Threshold', 'Threshold → Blur', 'No filters'],
-      index: 0,
-      onChange: index => this.setOrder(['field', 'soft', 'raw'][index]),
-    });
-    panel.addSlider({
-      label: 'Blur strength',
-      min: 1,
-      max: 12,
-      step: 0.25,
-      value: 6,
-      onChange: value => {
-        this.blur.strength = value;
+    this.panel = demoPanel({
+      title: 'Filter order',
+      controls: {
+        passes: choice('Passes', PASSES),
+        blur: slider('Blur strength', { min: 1, max: 12, value: 6, step: 0.25, format: value => value.toFixed(2) }),
+      },
+      onChange: (_key, _value, values) => {
+        this.blur.strength = values.blur;
+        this.balls.filters =
+          values.passes === PASSES[0] ? [this.blur, this.threshold] : values.passes === PASSES[1] ? [this.threshold, this.blur] : [];
       },
     });
     this.app.input.onPointerDown.add(this.onPointerDown);
@@ -77,16 +66,6 @@ class MetaballsScene extends Scene {
     this.app.input.onPointerUp.add(this.onPointerEnd);
     this.app.input.onPointerCancel.add(this.onPointerEnd);
   }
-  setOrder(order) {
-    this.balls.filters = order === 'field' ? [this.blur, this.threshold] : order === 'soft' ? [this.threshold, this.blur] : [];
-    this.hud?.setStatus(
-      order === 'field'
-        ? 'Blur → Threshold: merged shapes'
-        : order === 'soft'
-          ? 'Threshold → Blur: soft circles'
-          : 'No filters: source circles',
-    );
-  }
   update(delta) {
     const app = this.app;
     const { width, height } = app;
@@ -114,7 +93,7 @@ class MetaballsScene extends Scene {
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerUp.remove(this.onPointerEnd);
     this.app.input.onPointerCancel.remove(this.onPointerEnd);
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
   }
 }
diff --git a/examples/filters/metaballs.ts b/examples/filters/metaballs.ts
index d39bbeb70..7206e16e6 100644
--- a/examples/filters/metaballs.ts
+++ b/examples/filters/metaballs.ts
@@ -9,7 +9,7 @@ import {
   type Seconds,
   ShaderFilter,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, slider, type SliderSpec } from '@examples/runtime';
 
 // Threshold pass: render solid cyan where the (blurred) red field is dense
 // enough, with a smooth edge. The blur in front of this builds the scalar field
@@ -32,6 +32,8 @@ const wgsl = `@group(0) @binding(1) var uTexture: texture_2d<f32>;
   return vec4<f32>(vec3<f32>(0.2, 0.9, 1.0) * shape, shape);
 }`;
 
+const PASSES = ['Blur then threshold', 'Threshold then blur', 'No filters'] as const;
+
 class MetaballsScene extends Scene {
   private balls!: Graphics;
   private points!: Array<{ a: number; r: number }>;
@@ -40,7 +42,7 @@ class MetaballsScene extends Scene {
   private handle!: Graphics;
   private dragPoint = { x: 0, y: 0 };
   private dragging = false;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ passes: ChoiceSpec<(typeof PASSES)[number]>; blur: SliderSpec }>;
   private readonly onPointerDown = (_pointer: unknown, x: number, y: number): void => {
     this.dragging = Math.hypot(x - this.dragPoint.x, y - this.dragPoint.y) < 58;
   };
@@ -62,29 +64,16 @@ class MetaballsScene extends Scene {
     this.blur = new BlurFilter({ strength: 6 });
     this.threshold = new ShaderFilter({ glsl: { fragment: glsl }, wgsl });
 
-    this.setOrder('field');
-
-    this.hud = mountControls({
-      title: 'Metaballs and Filter Order',
-      controls: [{ keys: 'Drag ring', action: 'move a blob into the others' }],
-      status: 'Blur → Threshold: merged shapes',
-      hint: 'Blur then threshold merges nearby circles. Reverse the filters or bypass them to compare the result.',
-    });
-    const panel = mountControlPanel({ title: 'Filter order' });
-    panel.addCycle({
-      label: 'Passes',
-      options: ['Blur → Threshold', 'Threshold → Blur', 'No filters'],
-      index: 0,
-      onChange: index => this.setOrder((['field', 'soft', 'raw'] as const)[index]),
-    });
-    panel.addSlider({
-      label: 'Blur strength',
-      min: 1,
-      max: 12,
-      step: 0.25,
-      value: 6,
-      onChange: value => {
-        this.blur.strength = value;
+    this.panel = demoPanel({
+      title: 'Filter order',
+      controls: {
+        passes: choice('Passes', PASSES),
+        blur: slider('Blur strength', { min: 1, max: 12, value: 6, step: 0.25, format: value => value.toFixed(2) }),
+      },
+      onChange: (_key, _value, values) => {
+        this.blur.strength = values.blur;
+        this.balls.filters =
+          values.passes === PASSES[0] ? [this.blur, this.threshold] : values.passes === PASSES[1] ? [this.threshold, this.blur] : [];
       },
     });
     this.app.input.onPointerDown.add(this.onPointerDown);
@@ -93,17 +82,6 @@ class MetaballsScene extends Scene {
     this.app.input.onPointerCancel.add(this.onPointerEnd);
   }
 
-  private setOrder(order: 'field' | 'soft' | 'raw'): void {
-    this.balls.filters = order === 'field' ? [this.blur, this.threshold] : order === 'soft' ? [this.threshold, this.blur] : [];
-    this.hud?.setStatus(
-      order === 'field'
-        ? 'Blur → Threshold: merged shapes'
-        : order === 'soft'
-          ? 'Threshold → Blur: soft circles'
-          : 'No filters: source circles',
-    );
-  }
-
   override update(delta: Seconds): void {
     const app = this.app;
     const { width, height } = app;
@@ -138,7 +116,7 @@ class MetaballsScene extends Scene {
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerUp.remove(this.onPointerEnd);
     this.app.input.onPointerCancel.remove(this.onPointerEnd);
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
   }
 }
diff --git a/examples/filters/noise-vignette.js b/examples/filters/noise-vignette.js
index 15d5eb967..ac51b27e1 100644
--- a/examples/filters/noise-vignette.js
+++ b/examples/filters/noise-vignette.js
@@ -1,9 +1,10 @@
 // Auto-generated from noise-vignette.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, ShaderFilter, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 // A detailed full-frame texture so grain + vignette read as a screen-wide post
 // effect rather than decorating one small sprite.
-const UV_GRID = assets.technical.filtering.uvGrid256;
+const UV_GRID = assets.uvGrid256;
 const glsl = `#version 300 es
 precision mediump float; uniform sampler2D uTexture; uniform float uTime; uniform float uIntensity; in vec2 vUv; out vec4 fragColor;
 float hash(vec2 p){ return fract(sin(dot(p,vec2(12.9898,78.233)))*43758.5453); }
diff --git a/examples/filters/noise-vignette.ts b/examples/filters/noise-vignette.ts
index bbc6485ba..f31bb8d27 100644
--- a/examples/filters/noise-vignette.ts
+++ b/examples/filters/noise-vignette.ts
@@ -8,11 +8,12 @@ import {
   ShaderFilter,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 
 // A detailed full-frame texture so grain + vignette read as a screen-wide post
 // effect rather than decorating one small sprite.
-const UV_GRID = assets.technical.filtering.uvGrid256;
+const UV_GRID = assets.uvGrid256;
 
 const glsl = `#version 300 es
 precision mediump float; uniform sampler2D uTexture; uniform float uTime; uniform float uIntensity; in vec2 vUv; out vec4 fragColor;
diff --git a/examples/filters/palette-cycling.js b/examples/filters/palette-cycling.js
index 923634697..53d15d7e9 100644
--- a/examples/filters/palette-cycling.js
+++ b/examples/filters/palette-cycling.js
@@ -1,7 +1,8 @@
 // Auto-generated from palette-cycling.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, LutFilter, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
-const PRIMARY_RAMP = assets.technical.color.primaryRamp;
+const PRIMARY_RAMP = assets.primaryRamp;
 const RAMP_SIZE = 256;
 // One sine curve per channel, each a third of a cycle out of phase. A 1D LUT
 // grades every channel through its OWN curve, so shifting all three by the same
diff --git a/examples/filters/palette-cycling.ts b/examples/filters/palette-cycling.ts
index 6167fc7de..7c013b354 100644
--- a/examples/filters/palette-cycling.ts
+++ b/examples/filters/palette-cycling.ts
@@ -9,9 +9,10 @@ import {
   Sprite,
   type Texture,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
-const PRIMARY_RAMP = assets.technical.color.primaryRamp;
+const PRIMARY_RAMP = assets.primaryRamp;
 
 const RAMP_SIZE = 256;
 
diff --git a/examples/geometry-graphics/immediate-mode-rendering.js b/examples/geometry-graphics/immediate-mode-rendering.js
index aebacc704..d15e0b245 100644
--- a/examples/geometry-graphics/immediate-mode-rendering.js
+++ b/examples/geometry-graphics/immediate-mode-rendering.js
@@ -1,6 +1,6 @@
 // Auto-generated from immediate-mode-rendering.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Geometry, Matrix, RenderBatch, Scene } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, toggle } from '@examples/runtime';
 // Number of instances drawn in the batched field. The whole field is one
 // instanced draw call no matter how large this is.
 const FIELD_COUNT = 2400;
@@ -66,7 +66,6 @@ class ImmediateModeScene extends Scene {
   scratch = new Matrix();
   elapsed = 0;
   batched = true;
-  hud;
   panel;
   init() {
     const app = this.app;
@@ -113,20 +112,11 @@ class ImmediateModeScene extends Scene {
         tint: new Color(tint.r, tint.g, tint.b, 1),
       });
     }
-    this.hud = mountControls({
-      title: 'Immediate-Mode Rendering',
-      controls: [
-        { keys: ['Batched'], action: `${FIELD_COUNT} sparks via RenderBatch + drawBatch (1 draw call)` },
-        { keys: ['Per-shape'], action: 'each gear via drawGeometry (1 draw call each)' },
-      ],
-      hint: 'Toggle the spark field between one instanced draw and one-draw-per-spark to compare draw calls.',
-    });
-    this.panel = mountControlPanel({ title: 'Render path' });
-    this.panel.addToggle({
-      label: 'Batch sparks',
-      value: this.batched,
-      onChange: value => {
-        this.batched = value;
+    this.panel = demoPanel({
+      title: 'Render path',
+      controls: { batched: toggle('Batch sparks', this.batched) },
+      onChange: (_key, batched) => {
+        this.batched = batched;
       },
     });
   }
@@ -167,16 +157,14 @@ class ImmediateModeScene extends Scene {
       composeTransform(this.scratch, gear.x, gear.y, time * gear.spin, scale);
       context.drawGeometry(gear.geometry, this.scratch, { tint: gear.tint });
     }
-    // drawCalls is the proof: batched → gears + 1, per-shape → gears + sparks.
-    const drawCalls = context.stats.drawCalls;
-    const path = this.batched ? 'RenderBatch (instanced)' : 'drawGeometry per spark';
-    this.hud.setStatus(`${path} · ${FIELD_COUNT} sparks · ${GEAR_COUNT} gears · drawCalls: ${drawCalls}`);
+    // The draw-call count is the proof: batched it is gears + 1, per shape it
+    // is gears + sparks.
+    this.panel.status(`${context.stats.drawCalls} draw calls`);
   }
   destroy() {
     this.dispose();
   }
   dispose() {
-    this.hud?.dispose();
     this.panel?.dispose();
     this.sparkBatch?.destroy();
     this.sparkGeometry?.destroy();
diff --git a/examples/geometry-graphics/immediate-mode-rendering.ts b/examples/geometry-graphics/immediate-mode-rendering.ts
index b35584203..d9f33cd03 100644
--- a/examples/geometry-graphics/immediate-mode-rendering.ts
+++ b/examples/geometry-graphics/immediate-mode-rendering.ts
@@ -9,7 +9,7 @@ import {
   Scene,
   type Seconds,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
 
 // Number of instances drawn in the batched field. The whole field is one
 // instanced draw call no matter how large this is.
@@ -103,8 +103,7 @@ class ImmediateModeScene extends Scene {
   private elapsed = 0;
   private batched = true;
 
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: DemoPanel<{ batched: ToggleSpec }>;
 
   override init(): void {
     const app = this.app;
@@ -161,21 +160,11 @@ class ImmediateModeScene extends Scene {
       });
     }
 
-    this.hud = mountControls({
-      title: 'Immediate-Mode Rendering',
-      controls: [
-        { keys: ['Batched'], action: `${FIELD_COUNT} sparks via RenderBatch + drawBatch (1 draw call)` },
-        { keys: ['Per-shape'], action: 'each gear via drawGeometry (1 draw call each)' },
-      ],
-      hint: 'Toggle the spark field between one instanced draw and one-draw-per-spark to compare draw calls.',
-    });
-
-    this.panel = mountControlPanel({ title: 'Render path' });
-    this.panel.addToggle({
-      label: 'Batch sparks',
-      value: this.batched,
-      onChange: value => {
-        this.batched = value;
+    this.panel = demoPanel({
+      title: 'Render path',
+      controls: { batched: toggle('Batch sparks', this.batched) },
+      onChange: (_key, batched) => {
+        this.batched = batched;
       },
     });
   }
@@ -226,11 +215,9 @@ class ImmediateModeScene extends Scene {
       context.drawGeometry(gear.geometry, this.scratch, { tint: gear.tint });
     }
 
-    // drawCalls is the proof: batched → gears + 1, per-shape → gears + sparks.
-    const drawCalls = context.stats.drawCalls;
-    const path = this.batched ? 'RenderBatch (instanced)' : 'drawGeometry per spark';
-
-    this.hud.setStatus(`${path} · ${FIELD_COUNT} sparks · ${GEAR_COUNT} gears · drawCalls: ${drawCalls}`);
+    // The draw-call count is the proof: batched it is gears + 1, per shape it
+    // is gears + sparks.
+    this.panel.status(`${context.stats.drawCalls} draw calls`);
   }
 
   override destroy(): void {
@@ -238,7 +225,6 @@ class ImmediateModeScene extends Scene {
   }
 
   private dispose(): void {
-    this.hud?.dispose();
     this.panel?.dispose();
     this.sparkBatch?.destroy();
     this.sparkGeometry?.destroy();
diff --git a/examples/geometry-graphics/infinite-grid.js b/examples/geometry-graphics/infinite-grid.js
index 8454a4b13..a9a1a9bb6 100644
--- a/examples/geometry-graphics/infinite-grid.js
+++ b/examples/geometry-graphics/infinite-grid.js
@@ -1,5 +1,6 @@
 // Auto-generated from infinite-grid.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Keyboard, Scene, ShaderFilter, Sprite, View } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const glsl = `#version 300 es
 precision mediump float;
 uniform vec2 uCenter;
@@ -50,7 +51,7 @@ class InfiniteGridScene extends Scene {
     const app = this.app;
     const { width, height } = app;
     this.view = new View(0, 0, width, height);
-    this.sprite = new Sprite(this.loader.get('image/uv-grid-256.png'));
+    this.sprite = new Sprite(this.loader.get(assets.uvGrid256));
     this.sprite.width = width;
     this.sprite.height = height;
     this.filter = new ShaderFilter({ glsl: { fragment: glsl }, wgsl, uniforms: { uCenter: [0, 0], uViewSize: [width, height] } });
@@ -123,8 +124,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(InfiniteGridScene);
diff --git a/examples/geometry-graphics/infinite-grid.ts b/examples/geometry-graphics/infinite-grid.ts
index 498e8d8e7..f2d134645 100644
--- a/examples/geometry-graphics/infinite-grid.ts
+++ b/examples/geometry-graphics/infinite-grid.ts
@@ -10,6 +10,7 @@ import {
   Sprite,
   View,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const glsl = `#version 300 es
 precision mediump float;
@@ -65,7 +66,7 @@ class InfiniteGridScene extends Scene {
     const { width, height } = app;
 
     this.view = new View(0, 0, width, height);
-    this.sprite = new Sprite(this.loader.get('image/uv-grid-256.png'));
+    this.sprite = new Sprite(this.loader.get(assets.uvGrid256));
     this.sprite.width = width;
     this.sprite.height = height;
     this.filter = new ShaderFilter({ glsl: { fragment: glsl }, wgsl, uniforms: { uCenter: [0, 0], uViewSize: [width, height] } });
@@ -141,9 +142,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(InfiniteGridScene);
diff --git a/examples/geometry-graphics/mesh-deformed-grid.js b/examples/geometry-graphics/mesh-deformed-grid.js
index f05953d52..0de41bdb1 100644
--- a/examples/geometry-graphics/mesh-deformed-grid.js
+++ b/examples/geometry-graphics/mesh-deformed-grid.js
@@ -1,5 +1,6 @@
 // Auto-generated from mesh-deformed-grid.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Mesh, Scene } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const COLS = 16;
 const ROWS = 16;
 const SIZE = 460;
@@ -37,7 +38,7 @@ const buildGrid = () => {
   }
   return { vertices, uvs, indices };
 };
-const UV_GRID = assets.technical.filtering.uvGrid256;
+const UV_GRID = assets.uvGrid256;
 class MeshDeformedGridScene extends Scene {
   restVertices;
   mesh;
diff --git a/examples/geometry-graphics/mesh-deformed-grid.ts b/examples/geometry-graphics/mesh-deformed-grid.ts
index 06a0318b5..65443cd60 100644
--- a/examples/geometry-graphics/mesh-deformed-grid.ts
+++ b/examples/geometry-graphics/mesh-deformed-grid.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, Mesh, type RenderingContext, Scene, type Seconds } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const COLS = 16;
 const ROWS = 16;
@@ -44,7 +45,7 @@ const buildGrid = (): { vertices: Float32Array; uvs: Float32Array; indices: Uint
   return { vertices, uvs, indices };
 };
 
-const UV_GRID = assets.technical.filtering.uvGrid256;
+const UV_GRID = assets.uvGrid256;
 
 class MeshDeformedGridScene extends Scene {
   private restVertices!: Float32Array;
diff --git a/examples/geometry-graphics/mesh-textured-quad.js b/examples/geometry-graphics/mesh-textured-quad.js
index 30d0b2887..825c882e0 100644
--- a/examples/geometry-graphics/mesh-textured-quad.js
+++ b/examples/geometry-graphics/mesh-textured-quad.js
@@ -1,6 +1,7 @@
 // Auto-generated from mesh-textured-quad.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Mesh, Scene, Text } from '@codexo/exojs';
-const UV_GRID = assets.technical.filtering.uvGrid256;
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+const UV_GRID = assets.uvGrid256;
 const HALF = 160;
 class MeshVerticesScene extends Scene {
   triangle;
diff --git a/examples/geometry-graphics/mesh-textured-quad.ts b/examples/geometry-graphics/mesh-textured-quad.ts
index df8168aa6..fe7e2c2f7 100644
--- a/examples/geometry-graphics/mesh-textured-quad.ts
+++ b/examples/geometry-graphics/mesh-textured-quad.ts
@@ -1,6 +1,7 @@
 import { Application, Color, FixedResolutionCanvasSizing, Mesh, type RenderingContext, Scene, type Seconds, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
-const UV_GRID = assets.technical.filtering.uvGrid256;
+const UV_GRID = assets.uvGrid256;
 const HALF = 160;
 
 class MeshVerticesScene extends Scene {
diff --git a/examples/geometry-graphics/mesh-typed-uniforms.js b/examples/geometry-graphics/mesh-typed-uniforms.js
index 806109983..9fdb828e4 100644
--- a/examples/geometry-graphics/mesh-typed-uniforms.js
+++ b/examples/geometry-graphics/mesh-typed-uniforms.js
@@ -11,7 +11,8 @@ import {
   UniformStruct,
   UniformType,
 } from '@codexo/exojs';
-const UV_GRID = assets.technical.filtering.uvGrid256;
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+const UV_GRID = assets.uvGrid256;
 const SIZE = 420;
 // Uniforms declared here are numeric: `time`, `warp` and `uvTransform` reach
 // the shader exactly as written, with no colour conversion. Colour comes from
diff --git a/examples/geometry-graphics/mesh-typed-uniforms.ts b/examples/geometry-graphics/mesh-typed-uniforms.ts
index 1d385ae3a..5fa5ec575 100644
--- a/examples/geometry-graphics/mesh-typed-uniforms.ts
+++ b/examples/geometry-graphics/mesh-typed-uniforms.ts
@@ -12,8 +12,9 @@ import {
   UniformStruct,
   UniformType,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
-const UV_GRID = assets.technical.filtering.uvGrid256;
+const UV_GRID = assets.uvGrid256;
 const SIZE = 420;
 
 // Uniforms declared here are numeric: `time`, `warp` and `uvTransform` reach
diff --git a/examples/getting-started/game-loop.js b/examples/getting-started/game-loop.js
index 69a053fc9..c77750d50 100644
--- a/examples/getting-started/game-loop.js
+++ b/examples/getting-started/game-loop.js
@@ -1,11 +1,12 @@
 // Auto-generated from game-loop.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class GameLoopScene extends Scene {
   sprite;
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
     this.sprite.setPosition(width / 2, height / 2);
   }
@@ -25,8 +26,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(GameLoopScene);
diff --git a/examples/getting-started/game-loop.ts b/examples/getting-started/game-loop.ts
index 7db0f84e6..a1605446f 100644
--- a/examples/getting-started/game-loop.ts
+++ b/examples/getting-started/game-loop.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, type Seconds, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class GameLoopScene extends Scene {
   private sprite!: Sprite;
@@ -7,7 +8,7 @@ class GameLoopScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
     this.sprite.setPosition(width / 2, height / 2);
   }
@@ -30,9 +31,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(GameLoopScene);
diff --git a/examples/getting-started/hello-world.js b/examples/getting-started/hello-world.js
index cddff32b7..cf6cf6d41 100644
--- a/examples/getting-started/hello-world.js
+++ b/examples/getting-started/hello-world.js
@@ -1,5 +1,6 @@
 // Auto-generated from hello-world.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 // #region guide:first-scene
 class HelloWorldScene extends Scene {
   sprite;
@@ -8,7 +9,7 @@ class HelloWorldScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
     this.sprite.setScale(1.5);
     this.sprite.setPosition(width / 2, height / 2);
@@ -39,8 +40,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(12, 16, 30),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(HelloWorldScene);
diff --git a/examples/getting-started/hello-world.ts b/examples/getting-started/hello-world.ts
index 6a0e31b2f..07f978068 100644
--- a/examples/getting-started/hello-world.ts
+++ b/examples/getting-started/hello-world.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, Scene, type Seconds, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 // #region guide:first-scene
 class HelloWorldScene extends Scene {
@@ -10,7 +11,7 @@ class HelloWorldScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
     this.sprite.setScale(1.5);
     this.sprite.setPosition(width / 2, height / 2);
@@ -45,9 +46,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(12, 16, 30),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(HelloWorldScene);
diff --git a/examples/getting-started/resize-and-dpr.js b/examples/getting-started/resize-and-dpr.js
index 43e0da23b..9cd0c1595 100644
--- a/examples/getting-started/resize-and-dpr.js
+++ b/examples/getting-started/resize-and-dpr.js
@@ -1,10 +1,11 @@
 // Auto-generated from resize-and-dpr.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class ResizeScene extends Scene {
   sprite;
   info;
   init() {
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
     this.info = new Text('', { fillColor: Color.white, fontSize: 16 });
     this.info.setAnchor(0.5, 0);
@@ -36,9 +37,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 // #endregion guide:app-setup
 document.body.style.margin = '0';
diff --git a/examples/getting-started/resize-and-dpr.ts b/examples/getting-started/resize-and-dpr.ts
index 2c0e1a6ff..a02b9cad0 100644
--- a/examples/getting-started/resize-and-dpr.ts
+++ b/examples/getting-started/resize-and-dpr.ts
@@ -1,11 +1,12 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class ResizeScene extends Scene {
   private sprite!: Sprite;
   private info!: Text;
 
   override init(): void {
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'));
+    this.sprite = new Sprite(this.loader.get(assets.ship));
     this.sprite.setAnchor(0.5);
 
     this.info = new Text('', { fillColor: Color.white, fontSize: 16 });
@@ -45,9 +46,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 // #endregion guide:app-setup
 
diff --git a/examples/guides/audio-effects/compressor-meter.ts b/examples/guides/audio-effects/compressor-meter.ts
index 0eb3ab2f0..4d224cb01 100644
--- a/examples/guides/audio-effects/compressor-meter.ts
+++ b/examples/guides/audio-effects/compressor-meter.ts
@@ -1,5 +1,5 @@
 import { Graphics, Scene, type Seconds } from '@codexo/exojs';
-import { CompressorEffect } from '@codexo/exojs-audio-fx';
+import { CompressorEffect } from '@codexo/exojs/audio-fx';
 
 class MeterScene extends Scene {
   private compressor = new CompressorEffect();
diff --git a/examples/guides/audio-reactive-scene/beat-hooks.ts b/examples/guides/audio-reactive-scene/beat-hooks.ts
index 0f335e878..5746e50ac 100644
--- a/examples/guides/audio-reactive-scene/beat-hooks.ts
+++ b/examples/guides/audio-reactive-scene/beat-hooks.ts
@@ -1,6 +1,6 @@
 import { Color, Ease, Scene, type Seconds, Sprite, View } from '@codexo/exojs';
-import { AudioAnalyser, BeatDetector, type BeatInfo } from '@codexo/exojs-audio-fx';
-import { BurstSpawn, Constant } from '@codexo/exojs-particles';
+import { AudioAnalyser, BeatDetector, type BeatInfo } from '@codexo/exojs/audio-fx';
+import { BurstSpawn, Constant } from '@codexo/exojs/particles';
 
 class BeatHookScene extends Scene {
   private analyser = new AudioAnalyser({ fftSize: 512 });
diff --git a/examples/guides/audio-reactive-scene/reactive-scene.ts b/examples/guides/audio-reactive-scene/reactive-scene.ts
index 3925bd812..e5322cc9f 100644
--- a/examples/guides/audio-reactive-scene/reactive-scene.ts
+++ b/examples/guides/audio-reactive-scene/reactive-scene.ts
@@ -10,8 +10,8 @@ import {
   Vector,
   View,
 } from '@codexo/exojs';
-import { AudioAnalyser, BeatDetector } from '@codexo/exojs-audio-fx';
-import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';
+import { AudioAnalyser, BeatDetector } from '@codexo/exojs/audio-fx';
+import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs/particles';
 
 // #region guide:reactive-scene
 const app = new Application({ extensions: [particlesExtension] });
diff --git a/examples/guides/audio-reactive-visualization/beat-reactive.ts b/examples/guides/audio-reactive-visualization/beat-reactive.ts
index cdb5a2949..a002e8406 100644
--- a/examples/guides/audio-reactive-visualization/beat-reactive.ts
+++ b/examples/guides/audio-reactive-visualization/beat-reactive.ts
@@ -1,5 +1,5 @@
 import { Scene } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 // #region guide:beat-reactive
 class BeatReactiveScene extends Scene {
diff --git a/examples/guides/audio-reactive-visualization/beat-visuals.ts b/examples/guides/audio-reactive-visualization/beat-visuals.ts
index 7ed736c15..5e54c823e 100644
--- a/examples/guides/audio-reactive-visualization/beat-visuals.ts
+++ b/examples/guides/audio-reactive-visualization/beat-visuals.ts
@@ -1,5 +1,5 @@
 import { Color, Scene, Sprite } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 class BeatVisualScene extends Scene {
   private detector = new BeatDetector();
diff --git a/examples/guides/audio-reactive-visualization/full-visualizer.ts b/examples/guides/audio-reactive-visualization/full-visualizer.ts
index 3f8d6d45c..8e9a24a66 100644
--- a/examples/guides/audio-reactive-visualization/full-visualizer.ts
+++ b/examples/guides/audio-reactive-visualization/full-visualizer.ts
@@ -1,6 +1,6 @@
 import type { RenderingContext, Seconds } from '@codexo/exojs';
 import { Application, Asset, type AudioStream, Color, Graphics, Scene } from '@codexo/exojs';
-import { AudioAnalyser, BeatDetector } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser, BeatDetector } from '@codexo/exojs/audio-fx';
 
 // #region guide:full-visualizer
 
diff --git a/examples/guides/audio-reactive-visualization/spectrogram.ts b/examples/guides/audio-reactive-visualization/spectrogram.ts
index 1d3d06837..a7f0c7040 100644
--- a/examples/guides/audio-reactive-visualization/spectrogram.ts
+++ b/examples/guides/audio-reactive-visualization/spectrogram.ts
@@ -1,5 +1,5 @@
 import { DataTexture, Scene, type Seconds, Sprite, TextureFormat } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
 
 class SpectrogramScene extends Scene {
   private analyser!: AudioAnalyser;
diff --git a/examples/guides/audio-reactive-visualization/spectrum-bands.ts b/examples/guides/audio-reactive-visualization/spectrum-bands.ts
index b73fea7b3..fd5f49b70 100644
--- a/examples/guides/audio-reactive-visualization/spectrum-bands.ts
+++ b/examples/guides/audio-reactive-visualization/spectrum-bands.ts
@@ -1,5 +1,5 @@
 import { Scene, type Seconds } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
 
 class BandScene extends Scene {
   private analyser = new AudioAnalyser({ fftSize: 1024 });
diff --git a/examples/guides/audio-reactive-visualization/spectrum-scene.ts b/examples/guides/audio-reactive-visualization/spectrum-scene.ts
index 61de56f01..3998bb929 100644
--- a/examples/guides/audio-reactive-visualization/spectrum-scene.ts
+++ b/examples/guides/audio-reactive-visualization/spectrum-scene.ts
@@ -1,6 +1,6 @@
 // #region guide:spectrum-scene
 import { Color, Graphics, Scene } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
 
 export class SpectrumScene extends Scene {
   private analyser!: AudioAnalyser;
diff --git a/examples/guides/audio-reactive-visualization/visualizer-scene.ts b/examples/guides/audio-reactive-visualization/visualizer-scene.ts
index e026d1c98..432c955b8 100644
--- a/examples/guides/audio-reactive-visualization/visualizer-scene.ts
+++ b/examples/guides/audio-reactive-visualization/visualizer-scene.ts
@@ -1,6 +1,6 @@
 import type { Seconds } from '@codexo/exojs';
 import { Asset, type AudioStream, Scene } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
 
 // #region guide:visualizer-scene
 class VisualizerScene extends Scene {
diff --git a/examples/guides/beat-detection/detector-scene.ts b/examples/guides/beat-detection/detector-scene.ts
index b874c6be2..29492d094 100644
--- a/examples/guides/beat-detection/detector-scene.ts
+++ b/examples/guides/beat-detection/detector-scene.ts
@@ -1,5 +1,5 @@
 import { Scene, type Seconds } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 class DetectorScene extends Scene {
   private detector = new BeatDetector();
diff --git a/examples/guides/character-movement/character-movement.ts b/examples/guides/character-movement/character-movement.ts
index 6daad5adf..b4e112c3f 100644
--- a/examples/guides/character-movement/character-movement.ts
+++ b/examples/guides/character-movement/character-movement.ts
@@ -9,7 +9,7 @@ import {
   PhysicsBody,
   PhysicsBodyComponent,
   type PhysicsWorld,
-} from '@codexo/exojs-physics';
+} from '@codexo/exojs/physics';
 
 declare const world: PhysicsWorld;
 declare const scene: Scene;
diff --git a/examples/guides/game-feel/screen-shake.ts b/examples/guides/game-feel/screen-shake.ts
index 0d4e7c3f5..be9f3239c 100644
--- a/examples/guides/game-feel/screen-shake.ts
+++ b/examples/guides/game-feel/screen-shake.ts
@@ -1,5 +1,5 @@
 import { Scene, Time, Vector, View } from '@codexo/exojs';
-import { BurstSpawn, Constant, type ParticleSystem } from '@codexo/exojs-particles';
+import { BurstSpawn, Constant, type ParticleSystem } from '@codexo/exojs/particles';
 
 class ShakeScene extends Scene {
   private view = new View(0, 0, 800, 600);
diff --git a/examples/guides/game-feel/thrust.ts b/examples/guides/game-feel/thrust.ts
index 80f127cc5..22b502144 100644
--- a/examples/guides/game-feel/thrust.ts
+++ b/examples/guides/game-feel/thrust.ts
@@ -1,5 +1,5 @@
 import { Scene, type Seconds, Sprite, type Voice } from '@codexo/exojs';
-import { Constant, type ParticleSystem } from '@codexo/exojs-particles';
+import { Constant, type ParticleSystem } from '@codexo/exojs/particles';
 
 class ThrustScene extends Scene {
   private thrust = { x: 0, y: 0 };
diff --git a/examples/guides/infinite-maps/chunk-streaming.ts b/examples/guides/infinite-maps/chunk-streaming.ts
index 4650b71c0..229846975 100644
--- a/examples/guides/infinite-maps/chunk-streaming.ts
+++ b/examples/guides/infinite-maps/chunk-streaming.ts
@@ -1,5 +1,5 @@
 import { View } from '@codexo/exojs';
-import { ChunkStreamer, createSampledChunkSource, TileLayer } from '@codexo/exojs-tilemap';
+import { ChunkStreamer, createSampledChunkSource, TileLayer } from '@codexo/exojs/tilemap';
 
 // #region guide:chunk-streaming
 const terrain = new TileLayer({ id: 1, name: 'terrain', tileWidth: 64, tileHeight: 64, tilesets: [] });
diff --git a/examples/guides/joints-and-dynamics/bullet-bodies.ts b/examples/guides/joints-and-dynamics/bullet-bodies.ts
index c60f9a480..0caf803a4 100644
--- a/examples/guides/joints-and-dynamics/bullet-bodies.ts
+++ b/examples/guides/joints-and-dynamics/bullet-bodies.ts
@@ -1,4 +1,4 @@
-import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:bullet-bodies
 const world = new PhysicsWorld({ gravity: { x: 0, y: 0 } });
diff --git a/examples/guides/joints-and-dynamics/contact-modifier.ts b/examples/guides/joints-and-dynamics/contact-modifier.ts
index ce631f7bd..82186d3b6 100644
--- a/examples/guides/joints-and-dynamics/contact-modifier.ts
+++ b/examples/guides/joints-and-dynamics/contact-modifier.ts
@@ -1,4 +1,4 @@
-import { PhysicsWorld } from '@codexo/exojs-physics';
+import { PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:contact-modifier
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/distance-joint.ts b/examples/guides/joints-and-dynamics/distance-joint.ts
index b3d618091..739684e95 100644
--- a/examples/guides/joints-and-dynamics/distance-joint.ts
+++ b/examples/guides/joints-and-dynamics/distance-joint.ts
@@ -1,4 +1,4 @@
-import { BoxShape, DistanceJoint, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, DistanceJoint, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:distance-joint
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/distance-limits.ts b/examples/guides/joints-and-dynamics/distance-limits.ts
index 5722078e7..19dae8b88 100644
--- a/examples/guides/joints-and-dynamics/distance-limits.ts
+++ b/examples/guides/joints-and-dynamics/distance-limits.ts
@@ -1,4 +1,4 @@
-import { BoxShape, DistanceJoint, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, DistanceJoint, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:distance-limits
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/joint-lifecycle.ts b/examples/guides/joints-and-dynamics/joint-lifecycle.ts
index 18653e04a..7abb13518 100644
--- a/examples/guides/joints-and-dynamics/joint-lifecycle.ts
+++ b/examples/guides/joints-and-dynamics/joint-lifecycle.ts
@@ -1,4 +1,4 @@
-import { BoxShape, PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs/physics';
 
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
 const bodyA = world.add(new PhysicsBody({ type: 'static', position: { x: 0, y: 0 } }));
diff --git a/examples/guides/joints-and-dynamics/mouse-joint.ts b/examples/guides/joints-and-dynamics/mouse-joint.ts
index 96e2d90f2..a58fc5357 100644
--- a/examples/guides/joints-and-dynamics/mouse-joint.ts
+++ b/examples/guides/joints-and-dynamics/mouse-joint.ts
@@ -1,4 +1,4 @@
-import { BoxShape, MouseJoint, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, MouseJoint, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:mouse-joint
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/one-way-platform.ts b/examples/guides/joints-and-dynamics/one-way-platform.ts
index c0c80e518..74ad6eca4 100644
--- a/examples/guides/joints-and-dynamics/one-way-platform.ts
+++ b/examples/guides/joints-and-dynamics/one-way-platform.ts
@@ -1,4 +1,4 @@
-import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:one-way-platform
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/prismatic-joint.ts b/examples/guides/joints-and-dynamics/prismatic-joint.ts
index 80986b362..7f060cad7 100644
--- a/examples/guides/joints-and-dynamics/prismatic-joint.ts
+++ b/examples/guides/joints-and-dynamics/prismatic-joint.ts
@@ -1,4 +1,4 @@
-import { BoxShape, PhysicsBody, PhysicsWorld, PrismaticJoint } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld, PrismaticJoint } from '@codexo/exojs/physics';
 
 // #region guide:prismatic-joint
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/revolute-joint.ts b/examples/guides/joints-and-dynamics/revolute-joint.ts
index 83bdd1860..6f5a98ae5 100644
--- a/examples/guides/joints-and-dynamics/revolute-joint.ts
+++ b/examples/guides/joints-and-dynamics/revolute-joint.ts
@@ -1,4 +1,4 @@
-import { BoxShape, PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs/physics';
 
 // #region guide:revolute-joint
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/sleeping.ts b/examples/guides/joints-and-dynamics/sleeping.ts
index b9e0ee11c..66390bbed 100644
--- a/examples/guides/joints-and-dynamics/sleeping.ts
+++ b/examples/guides/joints-and-dynamics/sleeping.ts
@@ -1,4 +1,4 @@
-import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:sleeping
 const world = new PhysicsWorld({
diff --git a/examples/guides/joints-and-dynamics/weld-joint.ts b/examples/guides/joints-and-dynamics/weld-joint.ts
index c983c45e0..ffac77d7a 100644
--- a/examples/guides/joints-and-dynamics/weld-joint.ts
+++ b/examples/guides/joints-and-dynamics/weld-joint.ts
@@ -1,4 +1,4 @@
-import { BoxShape, PhysicsBody, PhysicsWorld, WeldJoint } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld, WeldJoint } from '@codexo/exojs/physics';
 
 // #region guide:weld-joint
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/joints-and-dynamics/wheel-joint.ts b/examples/guides/joints-and-dynamics/wheel-joint.ts
index 9f756a2c5..83c75c297 100644
--- a/examples/guides/joints-and-dynamics/wheel-joint.ts
+++ b/examples/guides/joints-and-dynamics/wheel-joint.ts
@@ -1,4 +1,4 @@
-import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld, WheelJoint } from '@codexo/exojs-physics';
+import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld, WheelJoint } from '@codexo/exojs/physics';
 
 // #region guide:wheel-joint
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/lighting/basic-lightmap.ts b/examples/guides/lighting/basic-lightmap.ts
index 77072f31e..a03da0c86 100644
--- a/examples/guides/lighting/basic-lightmap.ts
+++ b/examples/guides/lighting/basic-lightmap.ts
@@ -1,6 +1,6 @@
 // #region guide:basic-lightmap
 import { Application, Color, Graphics, Scene } from '@codexo/exojs';
-import { LightmapLighting, PointLight } from '@codexo/exojs-lighting';
+import { LightmapLighting, PointLight } from '@codexo/exojs/lighting';
 
 class LightingScene extends Scene {
   override init(): void {
diff --git a/examples/guides/particles/basic-emitter.ts b/examples/guides/particles/basic-emitter.ts
index d4299ee08..6371a8e9e 100644
--- a/examples/guides/particles/basic-emitter.ts
+++ b/examples/guides/particles/basic-emitter.ts
@@ -9,7 +9,7 @@ import {
   ParticleSystem,
   RateSpawn,
   ScaleOverLifetime,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
 
 class FountainScene extends Scene {
   private particles!: ParticleSystem;
diff --git a/examples/guides/particles/death-module.ts b/examples/guides/particles/death-module.ts
index 1df3b57da..b0e1e5918 100644
--- a/examples/guides/particles/death-module.ts
+++ b/examples/guides/particles/death-module.ts
@@ -1,4 +1,4 @@
-import { DeathModule, type ParticleDeathContext, type ParticleSystem } from '@codexo/exojs-particles';
+import { DeathModule, type ParticleDeathContext, type ParticleSystem } from '@codexo/exojs/particles';
 
 // #region guide:splash-on-death
 class SplashOnDeath extends DeathModule {
diff --git a/examples/guides/particles/particle-scene.ts b/examples/guides/particles/particle-scene.ts
index a24ce3267..e8628f906 100644
--- a/examples/guides/particles/particle-scene.ts
+++ b/examples/guides/particles/particle-scene.ts
@@ -1,5 +1,5 @@
 import { type RenderingContext, Scene, type Seconds } from '@codexo/exojs';
-import { type ParticleSystem } from '@codexo/exojs-particles';
+import { type ParticleSystem } from '@codexo/exojs/particles';
 
 // #region guide:particle-scene
 class ParticleScene extends Scene {
diff --git a/examples/guides/particles/spawn-on-death.ts b/examples/guides/particles/spawn-on-death.ts
index 106d475d8..b3a938051 100644
--- a/examples/guides/particles/spawn-on-death.ts
+++ b/examples/guides/particles/spawn-on-death.ts
@@ -1,4 +1,4 @@
-import { type ParticleSystem, type SpawnModule, SpawnOnDeath } from '@codexo/exojs-particles';
+import { type ParticleSystem, type SpawnModule, SpawnOnDeath } from '@codexo/exojs/particles';
 
 declare const system: ParticleSystem;
 declare const childSystem: ParticleSystem;
diff --git a/examples/guides/particles/update-module.ts b/examples/guides/particles/update-module.ts
index d6f4df341..826d60ee6 100644
--- a/examples/guides/particles/update-module.ts
+++ b/examples/guides/particles/update-module.ts
@@ -1,4 +1,4 @@
-import { type ParticleBatch, UpdateModule } from '@codexo/exojs-particles';
+import { type ParticleBatch, UpdateModule } from '@codexo/exojs/particles';
 
 // #region guide:sway-module
 class Sway extends UpdateModule {
diff --git a/examples/guides/pathfinding/custom-space.ts b/examples/guides/pathfinding/custom-space.ts
index 87991ff1f..e7249750c 100644
--- a/examples/guides/pathfinding/custom-space.ts
+++ b/examples/guides/pathfinding/custom-space.ts
@@ -1,5 +1,5 @@
 import type { Vector } from '@codexo/exojs';
-import type { NavigationSpace } from '@codexo/exojs-pathfinding';
+import type { NavigationSpace } from '@codexo/exojs/pathfinding';
 
 declare const rooms: ReadonlyArray<{ x: number; y: number; exits: readonly number[]; travelTime: number }>;
 
diff --git a/examples/guides/pathfinding/grid-setup.ts b/examples/guides/pathfinding/grid-setup.ts
index 5bc1305e2..1acef0be3 100644
--- a/examples/guides/pathfinding/grid-setup.ts
+++ b/examples/guides/pathfinding/grid-setup.ts
@@ -1,4 +1,4 @@
-import { GridSpace } from '@codexo/exojs-pathfinding';
+import { GridSpace } from '@codexo/exojs/pathfinding';
 
 declare const isWall: (x: number, y: number) => boolean;
 declare const isMud: (x: number, y: number) => boolean;
diff --git a/examples/guides/pathfinding/navigation-agents.ts b/examples/guides/pathfinding/navigation-agents.ts
index 4066698c4..b39eabac2 100644
--- a/examples/guides/pathfinding/navigation-agents.ts
+++ b/examples/guides/pathfinding/navigation-agents.ts
@@ -1,7 +1,7 @@
 import { BehaviorComponent, type Container, type PointLike, type Seconds, type VectorAction } from '@codexo/exojs';
-import { NavigationAgentComponent, type NavigationMovement, TileNavigationSpace, WaypointGraph } from '@codexo/exojs-pathfinding';
-import { CircleShape, KinematicMovementComponent, PhysicsBodyComponent, type PhysicsWorld } from '@codexo/exojs-physics';
-import type { ResolvedTile, TileLayer } from '@codexo/exojs-tilemap';
+import { NavigationAgentComponent, type NavigationMovement, TileNavigationSpace, WaypointGraph } from '@codexo/exojs/pathfinding';
+import { CircleShape, KinematicMovementComponent, PhysicsBodyComponent, type PhysicsWorld } from '@codexo/exojs/physics';
+import type { ResolvedTile, TileLayer } from '@codexo/exojs/tilemap';
 
 declare const world: PhysicsWorld;
 declare const ground: TileLayer;
diff --git a/examples/guides/pathfinding/queries.ts b/examples/guides/pathfinding/queries.ts
index 98cbb9efc..c2e1dfb90 100644
--- a/examples/guides/pathfinding/queries.ts
+++ b/examples/guides/pathfinding/queries.ts
@@ -1,5 +1,5 @@
 import type { Vector } from '@codexo/exojs';
-import { GridSpace, Pathfinder } from '@codexo/exojs-pathfinding';
+import { GridSpace, Pathfinder } from '@codexo/exojs/pathfinding';
 
 declare const hero: { x: number; y: number; follow: (points: readonly Vector[]) => void };
 declare const target: { x: number; y: number };
diff --git a/examples/guides/pathfinding/reachable-area.ts b/examples/guides/pathfinding/reachable-area.ts
index 1e8a5b960..633ec56a6 100644
--- a/examples/guides/pathfinding/reachable-area.ts
+++ b/examples/guides/pathfinding/reachable-area.ts
@@ -1,4 +1,4 @@
-import { GridSpace, Pathfinder } from '@codexo/exojs-pathfinding';
+import { GridSpace, Pathfinder } from '@codexo/exojs/pathfinding';
 
 declare const unit: { tileX: number; tileY: number; movement: number };
 declare const highlight: (x: number, y: number, cost: number) => void;
diff --git a/examples/guides/pathfinding/tilemap-bridge.ts b/examples/guides/pathfinding/tilemap-bridge.ts
index 2ff27976b..d330eb62c 100644
--- a/examples/guides/pathfinding/tilemap-bridge.ts
+++ b/examples/guides/pathfinding/tilemap-bridge.ts
@@ -1,5 +1,5 @@
-import { GridSpace } from '@codexo/exojs-pathfinding';
-import type { ResolvedTile, TileLayer } from '@codexo/exojs-tilemap';
+import { GridSpace } from '@codexo/exojs/pathfinding';
+import type { ResolvedTile, TileLayer } from '@codexo/exojs/tilemap';
 
 declare const ground: TileLayer;
 declare const loaded: { x: number; y: number; width: number; height: number };
diff --git a/examples/guides/pathfinding/waypoint-graph.ts b/examples/guides/pathfinding/waypoint-graph.ts
index b366d13ee..186d6ce49 100644
--- a/examples/guides/pathfinding/waypoint-graph.ts
+++ b/examples/guides/pathfinding/waypoint-graph.ts
@@ -1,4 +1,4 @@
-import { Pathfinder, WaypointGraph } from '@codexo/exojs-pathfinding';
+import { Pathfinder, WaypointGraph } from '@codexo/exojs/pathfinding';
 
 declare const controller: { walkTo: (x: number, y: number) => void; jump: (impulse: number) => void };
 
diff --git a/examples/guides/physics-basics/binding-options.ts b/examples/guides/physics-basics/binding-options.ts
index 73294b977..5eb6e964b 100644
--- a/examples/guides/physics-basics/binding-options.ts
+++ b/examples/guides/physics-basics/binding-options.ts
@@ -1,5 +1,5 @@
 import { Sprite } from '@codexo/exojs';
-import { CircleShape, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:binding-options
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/physics-basics/body-component.ts b/examples/guides/physics-basics/body-component.ts
index 4ab00a33d..3d4a2e383 100644
--- a/examples/guides/physics-basics/body-component.ts
+++ b/examples/guides/physics-basics/body-component.ts
@@ -1,5 +1,5 @@
 import { Color, Graphics, Scene, SystemOrder } from '@codexo/exojs';
-import { BoxShape, CircleShape, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, CircleShape, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:body-component
 class ArenaScene extends Scene {
diff --git a/examples/guides/physics-basics/box-body.ts b/examples/guides/physics-basics/box-body.ts
index e43495cda..812d9e9e3 100644
--- a/examples/guides/physics-basics/box-body.ts
+++ b/examples/guides/physics-basics/box-body.ts
@@ -1,4 +1,4 @@
-import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:box-body
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/physics-basics/capsule-and-chain.ts b/examples/guides/physics-basics/capsule-and-chain.ts
index db85a8bf3..d0e2802da 100644
--- a/examples/guides/physics-basics/capsule-and-chain.ts
+++ b/examples/guides/physics-basics/capsule-and-chain.ts
@@ -1,4 +1,4 @@
-import { CapsuleShape, ChainShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { CapsuleShape, ChainShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:capsule-and-chain
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/physics-basics/circle-body.ts b/examples/guides/physics-basics/circle-body.ts
index 39260b3bf..602e13007 100644
--- a/examples/guides/physics-basics/circle-body.ts
+++ b/examples/guides/physics-basics/circle-body.ts
@@ -1,4 +1,4 @@
-import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:circle-body
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/physics-basics/drop-scene.ts b/examples/guides/physics-basics/drop-scene.ts
index 4c03d2498..db0299a11 100644
--- a/examples/guides/physics-basics/drop-scene.ts
+++ b/examples/guides/physics-basics/drop-scene.ts
@@ -1,5 +1,5 @@
 import { Scene, type Seconds, Sprite } from '@codexo/exojs';
-import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:drop-scene
 class DropScene extends Scene {
diff --git a/examples/guides/physics-basics/falling-box.ts b/examples/guides/physics-basics/falling-box.ts
index d0591cfa0..b996cabd2 100644
--- a/examples/guides/physics-basics/falling-box.ts
+++ b/examples/guides/physics-basics/falling-box.ts
@@ -1,6 +1,6 @@
 // #region guide:falling-box
 import { Application, Color, Graphics, Scene, SystemOrder } from '@codexo/exojs';
-import { BoxShape, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsWorld } from '@codexo/exojs/physics';
 
 class FallingBoxScene extends Scene {
   override init(): void {
diff --git a/examples/guides/physics-basics/manual-sync.ts b/examples/guides/physics-basics/manual-sync.ts
index 1be659198..be2d5e823 100644
--- a/examples/guides/physics-basics/manual-sync.ts
+++ b/examples/guides/physics-basics/manual-sync.ts
@@ -1,5 +1,5 @@
 import { radiansToDegrees, Sprite, Texture } from '@codexo/exojs';
-import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
 const body = world.add(new PhysicsBody({ type: 'dynamic', position: { x: 100, y: 0 }, colliders: [{ shape: new BoxShape(32, 32) }] }));
diff --git a/examples/guides/physics-basics/physics-scene.ts b/examples/guides/physics-basics/physics-scene.ts
index 81548f310..ca37dcb74 100644
--- a/examples/guides/physics-basics/physics-scene.ts
+++ b/examples/guides/physics-basics/physics-scene.ts
@@ -1,5 +1,5 @@
 import { Scene, type Seconds } from '@codexo/exojs';
-import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:physics-scene
 class GameScene extends Scene {
diff --git a/examples/guides/physics-basics/solver-tuning.ts b/examples/guides/physics-basics/solver-tuning.ts
index ab1ffdf38..a25e12edf 100644
--- a/examples/guides/physics-basics/solver-tuning.ts
+++ b/examples/guides/physics-basics/solver-tuning.ts
@@ -1,4 +1,4 @@
-import { PhysicsWorld } from '@codexo/exojs-physics';
+import { PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:solver-tuning
 const world = new PhysicsWorld({
diff --git a/examples/guides/physics-basics/sprite-binding.ts b/examples/guides/physics-basics/sprite-binding.ts
index 7c36b8776..72f26d03f 100644
--- a/examples/guides/physics-basics/sprite-binding.ts
+++ b/examples/guides/physics-basics/sprite-binding.ts
@@ -1,5 +1,5 @@
 import { Sprite } from '@codexo/exojs';
-import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:sprite-binding
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/physics-basics/variable-step.ts b/examples/guides/physics-basics/variable-step.ts
index 4e7e1cd4a..9caebee5d 100644
--- a/examples/guides/physics-basics/variable-step.ts
+++ b/examples/guides/physics-basics/variable-step.ts
@@ -1,5 +1,5 @@
 import { Scene, type Seconds } from '@codexo/exojs';
-import { PhysicsWorld } from '@codexo/exojs-physics';
+import { PhysicsWorld } from '@codexo/exojs/physics';
 
 class VariableStepScene extends Scene {
   private readonly world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/physics-basics/world-setup.ts b/examples/guides/physics-basics/world-setup.ts
index 3a57d90dc..d1cc23b29 100644
--- a/examples/guides/physics-basics/world-setup.ts
+++ b/examples/guides/physics-basics/world-setup.ts
@@ -1,4 +1,4 @@
-import { PhysicsWorld } from '@codexo/exojs-physics';
+import { PhysicsWorld } from '@codexo/exojs/physics';
 
 // #region guide:world-setup
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1000 } });
diff --git a/examples/guides/scenes-and-lifecycle/frame-alpha.ts b/examples/guides/scenes-and-lifecycle/frame-alpha.ts
index 5f68b5a84..d75a5301e 100644
--- a/examples/guides/scenes-and-lifecycle/frame-alpha.ts
+++ b/examples/guides/scenes-and-lifecycle/frame-alpha.ts
@@ -1,5 +1,5 @@
 import { Color, Graphics, Scene, SystemOrder } from '@codexo/exojs';
-import { CircleShape, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, PhysicsWorld } from '@codexo/exojs/physics';
 
 class GameScene extends Scene {
   // #region guide:frame-alpha
diff --git a/examples/guides/scenes-and-lifecycle/game-scene.ts b/examples/guides/scenes-and-lifecycle/game-scene.ts
index 042ad2bd7..3f356b473 100644
--- a/examples/guides/scenes-and-lifecycle/game-scene.ts
+++ b/examples/guides/scenes-and-lifecycle/game-scene.ts
@@ -1,5 +1,5 @@
 import { Keyboard, type RenderingContext, Scene, type Seconds, Sprite, Text } from '@codexo/exojs';
-import { PhysicsWorld } from '@codexo/exojs-physics';
+import { PhysicsWorld } from '@codexo/exojs/physics';
 
 interface Player {
   jump(): void;
diff --git a/examples/guides/tiled-maps/wang-sets.ts b/examples/guides/tiled-maps/wang-sets.ts
index 3c2cce6e3..85b8ccefd 100644
--- a/examples/guides/tiled-maps/wang-sets.ts
+++ b/examples/guides/tiled-maps/wang-sets.ts
@@ -1,6 +1,6 @@
 import { Asset, Scene } from '@codexo/exojs';
+import { autoTile, refreshCell } from '@codexo/exojs/tilemap';
 import { tiledWangSetToWangSet } from '@codexo/exojs-tiled';
-import { autoTile, refreshCell } from '@codexo/exojs-tilemap';
 
 class WangSetScene extends Scene {
   public override async load(): Promise<void> {
diff --git a/examples/guides/worlds-and-spawning/spawn-session.ts b/examples/guides/worlds-and-spawning/spawn-session.ts
index 75d8efb35..d22df60ac 100644
--- a/examples/guides/worlds-and-spawning/spawn-session.ts
+++ b/examples/guides/worlds-and-spawning/spawn-session.ts
@@ -1,5 +1,5 @@
 import type { Container } from '@codexo/exojs';
-import type { MapSpawnSession } from '@codexo/exojs-tilemap';
+import type { MapSpawnSession } from '@codexo/exojs/tilemap';
 
 // #region guide:spawn-session
 export const restore = (session: MapSpawnSession<Container>, saved: Map<string, boolean>): void => {
diff --git a/examples/guides/worlds-and-spawning/spawner-identify.ts b/examples/guides/worlds-and-spawning/spawner-identify.ts
index 5e0bab37e..2e6be0f22 100644
--- a/examples/guides/worlds-and-spawning/spawner-identify.ts
+++ b/examples/guides/worlds-and-spawning/spawner-identify.ts
@@ -1,5 +1,5 @@
 import { Container } from '@codexo/exojs';
-import { MapObjectSpawner } from '@codexo/exojs-tilemap';
+import { MapObjectSpawner } from '@codexo/exojs/tilemap';
 
 // #region guide:custom-identify
 class Enemy extends Container {}
diff --git a/examples/guides/worlds-and-spawning/spawner-strict.ts b/examples/guides/worlds-and-spawning/spawner-strict.ts
index b04375744..98b11bf3f 100644
--- a/examples/guides/worlds-and-spawning/spawner-strict.ts
+++ b/examples/guides/worlds-and-spawning/spawner-strict.ts
@@ -1,5 +1,5 @@
 import { Container } from '@codexo/exojs';
-import { MapObjectSpawner } from '@codexo/exojs-tilemap';
+import { MapObjectSpawner } from '@codexo/exojs/tilemap';
 
 // #region guide:unknown-error
 class Enemy extends Container {}
diff --git a/examples/guides/worlds-and-spawning/spawner.ts b/examples/guides/worlds-and-spawning/spawner.ts
index 5ba72d0df..efcfccf34 100644
--- a/examples/guides/worlds-and-spawning/spawner.ts
+++ b/examples/guides/worlds-and-spawning/spawner.ts
@@ -1,5 +1,5 @@
 import { Container } from '@codexo/exojs';
-import { MapObjectSpawner } from '@codexo/exojs-tilemap';
+import { MapObjectSpawner } from '@codexo/exojs/tilemap';
 
 // #region guide:object-spawner
 class Enemy extends Container {}
diff --git a/examples/guides/worlds-and-spawning/streaming.ts b/examples/guides/worlds-and-spawning/streaming.ts
index dd76cd5c4..1b0144b2f 100644
--- a/examples/guides/worlds-and-spawning/streaming.ts
+++ b/examples/guides/worlds-and-spawning/streaming.ts
@@ -1,4 +1,4 @@
-import type { MapBounds, MapWorld, MapWorldRuntime } from '@codexo/exojs-tilemap';
+import type { MapBounds, MapWorld, MapWorldRuntime } from '@codexo/exojs/tilemap';
 
 // #region guide:level-streaming
 export const updateStreaming = (runtime: MapWorldRuntime, world: MapWorld, cameraBounds: MapBounds): void => {
diff --git a/examples/guides/worlds-and-spawning/tiled-spawn.ts b/examples/guides/worlds-and-spawning/tiled-spawn.ts
index 1b379e46b..5d4aa4d30 100644
--- a/examples/guides/worlds-and-spawning/tiled-spawn.ts
+++ b/examples/guides/worlds-and-spawning/tiled-spawn.ts
@@ -1,5 +1,5 @@
 import { Asset, type Container, type LoaderScope } from '@codexo/exojs';
-import type { MapObjectSpawner } from '@codexo/exojs-tilemap';
+import type { MapObjectSpawner } from '@codexo/exojs/tilemap';
 
 // #region guide:tiled-spawn
 export const spawnTiledLevel = async (scope: LoaderScope, spawner: MapObjectSpawner<void, Container>): Promise<void> => {
diff --git a/examples/guides/worlds-and-spawning/tiled-world.ts b/examples/guides/worlds-and-spawning/tiled-world.ts
index 7bbc1f6a6..b6090e373 100644
--- a/examples/guides/worlds-and-spawning/tiled-world.ts
+++ b/examples/guides/worlds-and-spawning/tiled-world.ts
@@ -1,5 +1,5 @@
 import { Asset, type LoaderScope } from '@codexo/exojs';
-import { MapWorld, MapWorldRuntime } from '@codexo/exojs-tilemap';
+import { MapWorld, MapWorldRuntime } from '@codexo/exojs/tilemap';
 
 // #region guide:tiled-world
 export const createTiledWorld = (scope: LoaderScope): MapWorldRuntime => {
diff --git a/examples/input/action-mapping.js b/examples/input/action-mapping.js
index ebb88e82b..b08e4d30a 100644
--- a/examples/input/action-mapping.js
+++ b/examples/input/action-mapping.js
@@ -12,6 +12,7 @@ import {
   Sprite,
   VectorAction,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const PULSE_COLOR = new Color(255, 190, 90);
 class ActionMappingScene extends Scene {
@@ -29,20 +30,13 @@ class ActionMappingScene extends Scene {
     pulse: new ButtonAction([Keyboard.Space, GamepadButton.South]),
   });
   pulseRemaining = 0;
+  direction = 'none';
   hud;
   init() {
     const { width, height } = this.app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     this.inputs.attach(this.actions);
-    this.hud = mountControls({
-      title: 'Input Actions',
-      controls: [
-        { keys: 'WASD / Arrows / Left stick', action: 'move' },
-        { keys: 'Space / South button', action: 'pulse' },
-      ],
-      status: '',
-      hint: 'Keyboard and controller feed the same move and pulse actions.',
-    });
+    this.hud = mountControls();
   }
   update(delta) {
     const { x, y } = this.actions.move.value;
@@ -51,8 +45,16 @@ class ActionMappingScene extends Scene {
       Math.max(24, Math.min(width - 24, this.sprite.x + x * 260 * delta)),
       Math.max(24, Math.min(height - 24, this.sprite.y + y * 260 * delta)),
     );
+    // Logged on transitions only - the Output panel shows which binding the
+    // action map resolved, whether keyboard or gamepad produced it.
+    const direction = [y < -0.5 && 'up', y > 0.5 && 'down', x < -0.5 && 'left', x > 0.5 && 'right'].filter(Boolean).join('-') || 'none';
+    if (direction !== this.direction) {
+      this.direction = direction;
+      console.log(`Action: move ${direction}`);
+    }
     if (this.actions.pulse.pressed) {
       this.pulseRemaining = 0.35;
+      console.info('Action: pulse');
     }
     this.pulseRemaining = Math.max(0, this.pulseRemaining - delta);
     this.sprite.setTint(this.pulseRemaining > 0 ? PULSE_COLOR : Color.white);
@@ -75,8 +77,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(ActionMappingScene);
diff --git a/examples/input/action-mapping.ts b/examples/input/action-mapping.ts
index 82e003bbc..692693625 100644
--- a/examples/input/action-mapping.ts
+++ b/examples/input/action-mapping.ts
@@ -13,6 +13,7 @@ import {
   Sprite,
   VectorAction,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 const PULSE_COLOR = new Color(255, 190, 90);
@@ -32,22 +33,15 @@ class ActionMappingScene extends Scene {
     pulse: new ButtonAction([Keyboard.Space, GamepadButton.South]),
   });
   private pulseRemaining = 0;
+  private direction = 'none';
   private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const { width, height } = this.app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     this.inputs.attach(this.actions);
-    this.hud = mountControls({
-      title: 'Input Actions',
-      controls: [
-        { keys: 'WASD / Arrows / Left stick', action: 'move' },
-        { keys: 'Space / South button', action: 'pulse' },
-      ],
-      status: '',
-      hint: 'Keyboard and controller feed the same move and pulse actions.',
-    });
+    this.hud = mountControls();
   }
 
   override update(delta: Seconds): void {
@@ -59,8 +53,18 @@ class ActionMappingScene extends Scene {
       Math.max(24, Math.min(height - 24, this.sprite.y + y * 260 * delta)),
     );
 
+    // Logged on transitions only - the Output panel shows which binding the
+    // action map resolved, whether keyboard or gamepad produced it.
+    const direction = [y < -0.5 && 'up', y > 0.5 && 'down', x < -0.5 && 'left', x > 0.5 && 'right'].filter(Boolean).join('-') || 'none';
+
+    if (direction !== this.direction) {
+      this.direction = direction;
+      console.log(`Action: move ${direction}`);
+    }
+
     if (this.actions.pulse.pressed) {
       this.pulseRemaining = 0.35;
+      console.info('Action: pulse');
     }
 
     this.pulseRemaining = Math.max(0, this.pulseRemaining - delta);
@@ -87,9 +91,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(ActionMappingScene);
diff --git a/examples/input/gamepad.js b/examples/input/gamepad.js
index b4a6f059e..3ec1029f3 100644
--- a/examples/input/gamepad.js
+++ b/examples/input/gamepad.js
@@ -1,6 +1,5 @@
 // Auto-generated from gamepad.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, GamepadAxis, GamepadButton, Graphics, Scene, Text } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 const AXES = [
   { name: 'Left X', channel: GamepadAxis.LeftStickX },
   { name: 'Left Y', channel: GamepadAxis.LeftStickY },
@@ -27,7 +26,6 @@ class GamepadScene extends Scene {
   axisText;
   buttonText;
   graphics = new Graphics();
-  hud;
   init() {
     this.pad = this.app.input.getGamepad(0);
     this.axes = AXES.map(({ name, channel }) => ({ name, binding: this.pad.onActive(channel) }));
@@ -35,11 +33,6 @@ class GamepadScene extends Scene {
     this.status = new Text('', { fillColor: Color.white, fontSize: 23 }).setPosition(260, 130);
     this.axisText = new Text('', { fillColor: new Color(125, 215, 255), fontSize: 23 }).setPosition(270, 450);
     this.buttonText = new Text('', { fillColor: new Color(255, 195, 125), fontSize: 21 }).setPosition(800, 240);
-    this.hud = mountControls({
-      title: 'Controller Inspector',
-      status: 'Slot 1 is waiting for a controller.',
-      hint: 'Axes and button values update live; disconnected state stays visible.',
-    });
   }
   update() {
     this.status.text = this.pad.connected
@@ -65,7 +58,6 @@ class GamepadScene extends Scene {
     for (const entry of [...this.axes, ...this.buttons]) {
       entry.binding.unbind();
     }
-    this.hud?.dispose();
     this.status?.destroy();
     this.axisText?.destroy();
     this.buttonText?.destroy();
diff --git a/examples/input/gamepad.ts b/examples/input/gamepad.ts
index 741217491..c34db4baf 100644
--- a/examples/input/gamepad.ts
+++ b/examples/input/gamepad.ts
@@ -10,7 +10,6 @@ import {
   Scene,
   Text,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 
 const AXES = [
   { name: 'Left X', channel: GamepadAxis.LeftStickX },
@@ -40,7 +39,6 @@ class GamepadScene extends Scene {
   private axisText!: Text;
   private buttonText!: Text;
   private graphics = new Graphics();
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     this.pad = this.app.input.getGamepad(0);
@@ -49,11 +47,6 @@ class GamepadScene extends Scene {
     this.status = new Text('', { fillColor: Color.white, fontSize: 23 }).setPosition(260, 130);
     this.axisText = new Text('', { fillColor: new Color(125, 215, 255), fontSize: 23 }).setPosition(270, 450);
     this.buttonText = new Text('', { fillColor: new Color(255, 195, 125), fontSize: 21 }).setPosition(800, 240);
-    this.hud = mountControls({
-      title: 'Controller Inspector',
-      status: 'Slot 1 is waiting for a controller.',
-      hint: 'Axes and button values update live; disconnected state stays visible.',
-    });
   }
 
   override update(): void {
@@ -83,7 +76,6 @@ class GamepadScene extends Scene {
       entry.binding.unbind();
     }
 
-    this.hud?.dispose();
     this.status?.destroy();
     this.axisText?.destroy();
     this.buttonText?.destroy();
diff --git a/examples/input/key-rebinding.js b/examples/input/key-rebinding.js
index 4e8ec43fa..d44c0c1c2 100644
--- a/examples/input/key-rebinding.js
+++ b/examples/input/key-rebinding.js
@@ -74,27 +74,14 @@ class KeyRebindingScene extends Scene {
       saveProfile(this.profile);
       this.refreshHud();
     });
-    this.hud = mountControls({
-      title: 'Key Rebinding',
-      controls: this.hudControls(),
-      status: '',
-      hint: '',
-    });
+    this.hud = mountControls();
     this.refreshHud();
   }
   jumpToken() {
     return this.controls.jump.channels.map(inputToken)[0];
   }
-  hudControls() {
-    return [
-      { keys: keyName(this.jumpToken()), action: 'jump' },
-      { keys: 'J', action: 'rebind jump' },
-    ];
-  }
   refreshHud() {
-    this.hud.setControls(this.hudControls());
-    this.hud.setStatus(`Jump key: ${keyName(this.jumpToken())} (saved)`);
-    this.hud.setHint(this.rebindRequested ? 'Press any key to assign jump…' : 'Binding restored from localStorage on reload.');
+    this.hud.setStatus(this.rebindRequested ? 'Press any key to assign jump...' : `Jump: ${keyName(this.jumpToken())} (J to rebind)`);
   }
   update(delta) {
     // Arm on the RELEASE of J, so the J keydown itself is not captured as
@@ -136,8 +123,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(KeyRebindingScene);
diff --git a/examples/input/key-rebinding.ts b/examples/input/key-rebinding.ts
index e78094310..80071fc25 100644
--- a/examples/input/key-rebinding.ts
+++ b/examples/input/key-rebinding.ts
@@ -90,12 +90,7 @@ class KeyRebindingScene extends Scene {
       this.refreshHud();
     });
 
-    this.hud = mountControls({
-      title: 'Key Rebinding',
-      controls: this.hudControls(),
-      status: '',
-      hint: '',
-    });
+    this.hud = mountControls();
 
     this.refreshHud();
   }
@@ -104,17 +99,8 @@ class KeyRebindingScene extends Scene {
     return this.controls.jump.channels.map(inputToken)[0];
   }
 
-  private hudControls(): Array<{ keys: string; action: string }> {
-    return [
-      { keys: keyName(this.jumpToken()), action: 'jump' },
-      { keys: 'J', action: 'rebind jump' },
-    ];
-  }
-
   private refreshHud(): void {
-    this.hud.setControls(this.hudControls());
-    this.hud.setStatus(`Jump key: ${keyName(this.jumpToken())} (saved)`);
-    this.hud.setHint(this.rebindRequested ? 'Press any key to assign jump…' : 'Binding restored from localStorage on reload.');
+    this.hud.setStatus(this.rebindRequested ? 'Press any key to assign jump...' : `Jump: ${keyName(this.jumpToken())} (J to rebind)`);
   }
 
   override update(delta: Seconds): void {
@@ -166,9 +152,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(KeyRebindingScene);
diff --git a/examples/input/keyboard.js b/examples/input/keyboard.js
index 3f46cae88..5930a7701 100644
--- a/examples/input/keyboard.js
+++ b/examples/input/keyboard.js
@@ -11,6 +11,11 @@ import { mountControls } from '@examples/runtime';
 //
 // Both WASD and the arrow keys drive the same square via a single binding per
 // direction (each binding watches two channels at once).
+//
+// The Output panel under the preview shows the transitions: every key press
+// from `app.input.onKeyDown`, the recentre action, and changes in the held
+// set - logged when they happen, never once per frame.
+const keyName = channel => Keyboard[channel] ?? `Channel ${channel}`;
 class KeyboardScene extends Scene {
   square;
   position = { x: 400, y: 300 };
@@ -19,6 +24,8 @@ class KeyboardScene extends Scene {
   left;
   right;
   hud;
+  held = 'none';
+  onKeyDown = channel => console.log(`KeyDown: ${keyName(channel)}`);
   init() {
     const app = this.app;
     const { width, height } = app;
@@ -35,17 +42,10 @@ class KeyboardScene extends Scene {
     this.inputs.onStart(Keyboard.Escape, () => {
       this.position.x = width / 2;
       this.position.y = height / 2;
+      console.info('Action: Recentre');
     });
-    this.hud = mountControls({
-      title: 'Keyboard',
-      controls: [
-        { keys: ['W', 'A', 'S', 'D'], action: 'move (per-frame polling)' },
-        { keys: ['↑', '↓', '←', '→'], action: 'move (same bindings)' },
-        { keys: 'Esc', action: 'recentre (on-event)' },
-      ],
-      status: 'Held: none',
-      hint: 'Click the canvas first so it has keyboard focus.',
-    });
+    app.input.onKeyDown.add(this.onKeyDown);
+    this.hud = mountControls({ status: 'Held: none' });
   }
   update(delta) {
     const app = this.app;
@@ -58,7 +58,12 @@ class KeyboardScene extends Scene {
     const held = [this.up.active && 'Up', this.down.active && 'Down', this.left.active && 'Left', this.right.active && 'Right'].filter(
       Boolean,
     );
-    this.hud.setStatus(`Held: ${held.length ? held.join(' + ') : 'none'}`);
+    const label = held.length ? held.join(' + ') : 'none';
+    if (label !== this.held) {
+      this.held = label;
+      this.hud.setStatus(`Held: ${label}`);
+      console.log(`Held: ${label}`);
+    }
   }
   draw(context) {
     this.square.clear();
@@ -66,6 +71,11 @@ class KeyboardScene extends Scene {
     this.square.drawRectangle(this.position.x - 20, this.position.y - 20, 40, 40);
     context.render(this.square);
   }
+  destroy() {
+    this.app.input.onKeyDown.remove(this.onKeyDown);
+    this.hud.dispose();
+    super.destroy();
+  }
 }
 const app = new Application({
   scenes: { KeyboardScene },
@@ -76,8 +86,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(KeyboardScene);
diff --git a/examples/input/keyboard.ts b/examples/input/keyboard.ts
index 014d204b4..0b67e46ff 100644
--- a/examples/input/keyboard.ts
+++ b/examples/input/keyboard.ts
@@ -21,6 +21,12 @@ import { mountControls } from '@examples/runtime';
 //
 // Both WASD and the arrow keys drive the same square via a single binding per
 // direction (each binding watches two channels at once).
+//
+// The Output panel under the preview shows the transitions: every key press
+// from `app.input.onKeyDown`, the recentre action, and changes in the held
+// set - logged when they happen, never once per frame.
+const keyName = (channel: number): string => Keyboard[channel as Keyboard] ?? `Channel ${channel}`;
+
 class KeyboardScene extends Scene {
   private square!: Graphics;
   private position = { x: 400, y: 300 };
@@ -29,6 +35,8 @@ class KeyboardScene extends Scene {
   private left!: InputBinding;
   private right!: InputBinding;
   private hud!: ReturnType<typeof mountControls>;
+  private held = 'none';
+  private readonly onKeyDown = (channel: number): void => console.log(`KeyDown: ${keyName(channel)}`);
 
   override init(): void {
     const app = this.app;
@@ -49,18 +57,11 @@ class KeyboardScene extends Scene {
     this.inputs.onStart(Keyboard.Escape, () => {
       this.position.x = width / 2;
       this.position.y = height / 2;
+      console.info('Action: Recentre');
     });
 
-    this.hud = mountControls({
-      title: 'Keyboard',
-      controls: [
-        { keys: ['W', 'A', 'S', 'D'], action: 'move (per-frame polling)' },
-        { keys: ['↑', '↓', '←', '→'], action: 'move (same bindings)' },
-        { keys: 'Esc', action: 'recentre (on-event)' },
-      ],
-      status: 'Held: none',
-      hint: 'Click the canvas first so it has keyboard focus.',
-    });
+    app.input.onKeyDown.add(this.onKeyDown);
+    this.hud = mountControls({ status: 'Held: none' });
   }
 
   override update(delta: Seconds): void {
@@ -77,7 +78,13 @@ class KeyboardScene extends Scene {
       Boolean,
     );
 
-    this.hud.setStatus(`Held: ${held.length ? held.join(' + ') : 'none'}`);
+    const label = held.length ? held.join(' + ') : 'none';
+
+    if (label !== this.held) {
+      this.held = label;
+      this.hud.setStatus(`Held: ${label}`);
+      console.log(`Held: ${label}`);
+    }
   }
 
   override draw(context: RenderingContext): void {
@@ -86,6 +93,12 @@ class KeyboardScene extends Scene {
     this.square.drawRectangle(this.position.x - 20, this.position.y - 20, 40, 40);
     context.render(this.square);
   }
+
+  override destroy(): void {
+    this.app.input.onKeyDown.remove(this.onKeyDown);
+    this.hud.dispose();
+    super.destroy();
+  }
 }
 
 const app = new Application({
@@ -97,9 +110,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(KeyboardScene);
diff --git a/examples/input/mouse-and-pointer.js b/examples/input/mouse-and-pointer.js
index 5b39cf615..25d724096 100644
--- a/examples/input/mouse-and-pointer.js
+++ b/examples/input/mouse-and-pointer.js
@@ -1,5 +1,6 @@
 // Auto-generated from mouse-and-pointer.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 // Everything the pointer pipeline reports, surfaced at once:
 //   - live position (onPointerMove)
@@ -22,7 +23,7 @@ class MouseAndPointerScene extends Scene {
     const { width, height } = app;
     this.pointer = { x: width / 2, y: height / 2 };
     this.previous = { x: width / 2, y: height / 2 };
-    this.ship = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.ship = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     this.ship.interactive = true;
     this.ship.draggable = true;
     this.root.addChild(this.ship);
@@ -41,16 +42,7 @@ class MouseAndPointerScene extends Scene {
     app.input.onPointerTap.add(() => {
       this.clicks++;
     });
-    this.hud = mountControls({
-      title: 'Mouse and Pointer',
-      controls: [
-        { keys: 'Move', action: 'track position + delta' },
-        { keys: 'Click', action: 'count taps' },
-        { keys: 'Drag', action: 'move the ship sprite' },
-      ],
-      status: '',
-      hint: 'Drag the ship to move it; the crosshair follows the cursor.',
-    });
+    this.hud = mountControls();
   }
   buttonLabel() {
     const held = [this.buttons & 1 && 'Left', this.buttons & 2 && 'Right', this.buttons & 4 && 'Middle'].filter(Boolean);
@@ -84,8 +76,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(MouseAndPointerScene);
diff --git a/examples/input/mouse-and-pointer.ts b/examples/input/mouse-and-pointer.ts
index 92ae6f0b1..625030d49 100644
--- a/examples/input/mouse-and-pointer.ts
+++ b/examples/input/mouse-and-pointer.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 // Everything the pointer pipeline reports, surfaced at once:
@@ -25,7 +26,7 @@ class MouseAndPointerScene extends Scene {
     this.pointer = { x: width / 2, y: height / 2 };
     this.previous = { x: width / 2, y: height / 2 };
 
-    this.ship = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.ship = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     this.ship.interactive = true;
     this.ship.draggable = true;
     this.root.addChild(this.ship);
@@ -46,16 +47,7 @@ class MouseAndPointerScene extends Scene {
       this.clicks++;
     });
 
-    this.hud = mountControls({
-      title: 'Mouse and Pointer',
-      controls: [
-        { keys: 'Move', action: 'track position + delta' },
-        { keys: 'Click', action: 'count taps' },
-        { keys: 'Drag', action: 'move the ship sprite' },
-      ],
-      status: '',
-      hint: 'Drag the ship to move it; the crosshair follows the cursor.',
-    });
+    this.hud = mountControls();
   }
 
   private buttonLabel(): string {
@@ -96,9 +88,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(MouseAndPointerScene);
diff --git a/examples/input/multi-gamepad.js b/examples/input/multi-gamepad.js
index 76d3855ce..272e1cd19 100644
--- a/examples/input/multi-gamepad.js
+++ b/examples/input/multi-gamepad.js
@@ -1,5 +1,6 @@
 // Auto-generated from multi-gamepad.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, GamepadAxis, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const tints = [new Color(255, 140, 140), new Color(140, 255, 170), new Color(150, 180, 255), new Color(255, 230, 140)];
 // Each of the four stable gamepad slots gets its own ship and its own left-stick
@@ -15,7 +16,7 @@ class MultiGamepadScene extends Scene {
     const app = this.app;
     const { width, height } = app;
     this.players = app.input.gamepads.map((pad, index) => {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png'))
+      const sprite = new Sprite(this.loader.get(assets.ship))
         .setAnchor(0.5)
         .setScale(0.6)
         .setPosition(width * (0.2 + index * 0.2), height / 2)
@@ -80,8 +81,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(MultiGamepadScene);
diff --git a/examples/input/multi-gamepad.ts b/examples/input/multi-gamepad.ts
index 106f01de6..379c0c07f 100644
--- a/examples/input/multi-gamepad.ts
+++ b/examples/input/multi-gamepad.ts
@@ -10,6 +10,7 @@ import {
   Sprite,
   Text,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 const tints = [new Color(255, 140, 140), new Color(140, 255, 170), new Color(150, 180, 255), new Color(255, 230, 140)];
@@ -35,7 +36,7 @@ class MultiGamepadScene extends Scene {
     const { width, height } = app;
 
     this.players = app.input.gamepads.map((pad, index) => {
-      const sprite = new Sprite(this.loader.get('image/ship-a.png'))
+      const sprite = new Sprite(this.loader.get(assets.ship))
         .setAnchor(0.5)
         .setScale(0.6)
         .setPosition(width * (0.2 + index * 0.2), height / 2)
@@ -113,9 +114,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(MultiGamepadScene);
diff --git a/examples/input/multitouch.js b/examples/input/multitouch.js
index 14140dd28..c04676554 100644
--- a/examples/input/multitouch.js
+++ b/examples/input/multitouch.js
@@ -49,12 +49,7 @@ class MultitouchScene extends Scene {
       this.pointers.delete(pointer.id);
       this.refreshHud();
     });
-    this.hud = mountControls({
-      title: 'Multitouch',
-      controls: [{ keys: 'Touch', action: 'each finger draws a circle' }],
-      status: 'Active touches: 0 / 10',
-      hint: 'Touchscreen required — use multiple fingers (mouse gives one point).',
-    });
+    this.hud = mountControls({ status: 'Active touches: 0 / 10' });
   }
   refreshHud() {
     this.hud.setStatus(`Active touches: ${this.pointers.size} / ${MAX_TOUCHES}`);
@@ -87,8 +82,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(MultitouchScene);
diff --git a/examples/input/multitouch.ts b/examples/input/multitouch.ts
index d19bbeb5b..2137dcf54 100644
--- a/examples/input/multitouch.ts
+++ b/examples/input/multitouch.ts
@@ -63,12 +63,7 @@ class MultitouchScene extends Scene {
       this.refreshHud();
     });
 
-    this.hud = mountControls({
-      title: 'Multitouch',
-      controls: [{ keys: 'Touch', action: 'each finger draws a circle' }],
-      status: 'Active touches: 0 / 10',
-      hint: 'Touchscreen required — use multiple fingers (mouse gives one point).',
-    });
+    this.hud = mountControls({ status: 'Active touches: 0 / 10' });
   }
 
   private refreshHud(): void {
@@ -112,9 +107,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(MultitouchScene);
diff --git a/examples/input/pointer-to-world.js b/examples/input/pointer-to-world.js
index d2314d0c1..de54c47e4 100644
--- a/examples/input/pointer-to-world.js
+++ b/examples/input/pointer-to-world.js
@@ -98,8 +98,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(PointerToWorldScene);
diff --git a/examples/input/pointer-to-world.ts b/examples/input/pointer-to-world.ts
index 2c208befb..72af9b4ef 100644
--- a/examples/input/pointer-to-world.ts
+++ b/examples/input/pointer-to-world.ts
@@ -120,9 +120,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(10, 12, 20),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(PointerToWorldScene);
diff --git a/examples/lighting/light-cookies.js b/examples/lighting/light-cookies.js
index 0a3caaec9..8dbb57cda 100644
--- a/examples/lighting/light-cookies.js
+++ b/examples/lighting/light-cookies.js
@@ -1,7 +1,7 @@
 // Auto-generated from light-cookies.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, ScaleModes, Scene, Sprite, Texture, WrapModes } from '@codexo/exojs';
-import { AlphaOccluder, LightmapLighting, LineLight, PointLight, SpotLight, SunLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaOccluder, LightmapLighting, LineLight, PointLight, SpotLight, SunLight } from '@codexo/exojs/lighting';
+import { demoPanel, slider, toggle } from '@examples/runtime';
 // Four light shapes, one scene, and the shape of the light doing the work that
 // a texture would otherwise have to do.
 //
@@ -74,7 +74,7 @@ class LightCookiesScene extends Scene {
   canopy;
   tube;
   elapsed = 0;
-  hud;
+  panel;
   init() {
     const { width, height } = this.app;
     this.world = new Container();
@@ -132,38 +132,19 @@ class LightCookiesScene extends Scene {
       new LineLight({ length: 260, radius: 64, intensity: 2.6, softness: 0.05, color: new Color(120, 190, 255) }),
     );
     this.tube.setPosition(300, 640);
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Light Cookies',
-      hint: 'Every pattern here is one texture on ONE light, carried by that light - it turns and scales with the lamp rather than being projected onto the world. Watch the window drift: its bars travel with the lamp instead of staying put on the floor, which is exactly the difference between a cookie and a world projection.',
-      status: '',
-    });
-    const panel = mountControlPanel({ title: 'Lights', corner: 'top-right' });
-    panel.addSlider({
-      label: 'Time of day',
-      min: -60,
-      max: 60,
-      step: 1,
-      value: this.sun.rotation,
-      onChange: value => {
-        this.sun.rotation = value;
+      corner: 'top-right',
+      controls: {
+        time: slider('Time of day', { min: -60, max: 60, value: this.sun.rotation, step: 1, format: value => `${value}` }),
+        sun: slider('Sun intensity', { min: 0, max: 1.2, value: this.sun.intensity, step: 0.05, format: value => value.toFixed(2) }),
+        cookies: toggle('Cookies', true),
       },
-    });
-    panel.addSlider({
-      label: 'Sun',
-      min: 0,
-      max: 1.2,
-      step: 0.05,
-      value: this.sun.intensity,
-      onChange: value => {
-        this.sun.intensity = value;
-      },
-    });
-    panel.addToggle({
-      label: 'Cookies',
-      value: true,
-      onChange: value => {
-        this.window.cookie = value ? windowCookie : null;
-        this.canopy.cookie = value ? canopyCookie : null;
+      onChange: (_key, _value, values) => {
+        this.sun.rotation = values.time;
+        this.sun.intensity = values.sun;
+        this.window.cookie = values.cookies ? windowCookie : null;
+        this.canopy.cookie = values.cookies ? canopyCookie : null;
       },
     });
   }
@@ -179,7 +160,11 @@ class LightCookiesScene extends Scene {
   }
   draw(context) {
     context.render(this.world);
-    this.hud.setStatus(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+    this.panel.status(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+  }
+  destroy() {
+    this.panel.dispose();
+    super.destroy();
   }
 }
 const app = new Application({
diff --git a/examples/lighting/light-cookies.ts b/examples/lighting/light-cookies.ts
index 0919afd15..98923cd35 100644
--- a/examples/lighting/light-cookies.ts
+++ b/examples/lighting/light-cookies.ts
@@ -11,8 +11,8 @@ import {
   Texture,
   WrapModes,
 } from '@codexo/exojs';
-import { AlphaOccluder, type Lighting, LightmapLighting, LineLight, PointLight, SpotLight, SunLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaOccluder, type Lighting, LightmapLighting, LineLight, PointLight, SpotLight, SunLight } from '@codexo/exojs/lighting';
+import { type DemoPanel, demoPanel, slider, type SliderSpec, toggle, type ToggleSpec } from '@examples/runtime';
 
 // Four light shapes, one scene, and the shape of the light doing the work that
 // a texture would otherwise have to do.
@@ -100,7 +100,7 @@ class LightCookiesScene extends Scene {
   private canopy!: SpotLight;
   private tube!: LineLight;
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ time: SliderSpec; sun: SliderSpec; cookies: ToggleSpec }>;
 
   override init(): void {
     const { width, height } = this.app;
@@ -169,42 +169,19 @@ class LightCookiesScene extends Scene {
     );
     this.tube.setPosition(300, 640);
 
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Light Cookies',
-      hint: 'Every pattern here is one texture on ONE light, carried by that light - it turns and scales with the lamp rather than being projected onto the world. Watch the window drift: its bars travel with the lamp instead of staying put on the floor, which is exactly the difference between a cookie and a world projection.',
-      status: '',
-    });
-
-    const panel = mountControlPanel({ title: 'Lights', corner: 'top-right' });
-
-    panel.addSlider({
-      label: 'Time of day',
-      min: -60,
-      max: 60,
-      step: 1,
-      value: this.sun.rotation,
-      onChange: value => {
-        this.sun.rotation = value;
-      },
-    });
-
-    panel.addSlider({
-      label: 'Sun',
-      min: 0,
-      max: 1.2,
-      step: 0.05,
-      value: this.sun.intensity,
-      onChange: value => {
-        this.sun.intensity = value;
+      corner: 'top-right',
+      controls: {
+        time: slider('Time of day', { min: -60, max: 60, value: this.sun.rotation, step: 1, format: value => `${value}` }),
+        sun: slider('Sun intensity', { min: 0, max: 1.2, value: this.sun.intensity, step: 0.05, format: value => value.toFixed(2) }),
+        cookies: toggle('Cookies', true),
       },
-    });
-
-    panel.addToggle({
-      label: 'Cookies',
-      value: true,
-      onChange: value => {
-        this.window.cookie = value ? windowCookie : null;
-        this.canopy.cookie = value ? canopyCookie : null;
+      onChange: (_key, _value, values) => {
+        this.sun.rotation = values.time;
+        this.sun.intensity = values.sun;
+        this.window.cookie = values.cookies ? windowCookie : null;
+        this.canopy.cookie = values.cookies ? canopyCookie : null;
       },
     });
   }
@@ -223,7 +200,12 @@ class LightCookiesScene extends Scene {
 
   override draw(context: RenderingContext): void {
     context.render(this.world);
-    this.hud.setStatus(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+    this.panel.status(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+  }
+
+  override destroy(): void {
+    this.panel.dispose();
+    super.destroy();
   }
 }
 
diff --git a/examples/lighting/lightmap-normals.js b/examples/lighting/lightmap-normals.js
index 6a05ab675..896648b29 100644
--- a/examples/lighting/lightmap-normals.js
+++ b/examples/lighting/lightmap-normals.js
@@ -1,7 +1,7 @@
 // Auto-generated from lightmap-normals.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, ScaleModes, Scene, Sprite, Texture } from '@codexo/exojs';
-import { AlphaNormals, LightmapLighting, PointLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaNormals, LightmapLighting, PointLight } from '@codexo/exojs/lighting';
+import { demoPanel, mountControls, slider, toggle } from '@examples/runtime';
 // The lightmap renderer multiplies a frame that was already drawn, so by the
 // time the light field is composited there is no surface normal anywhere. A
 // normal prepass puts one back: register a drawable and the renderer draws its
@@ -10,9 +10,10 @@ import { mountControlPanel, mountControls } from '@examples/runtime';
 //
 // Nothing is required of a drawable that is not registered - the attachment's
 // alpha is coverage, and where it is zero the light lands with no `N dot L`
-// term at all. That is what the "Normals" toggle below shows: without them
-// every fragment takes the light head-on, so the relief flattens and the
-// stones read slightly BRIGHTER rather than darker. Normals redistribute
+// term at all. The two halves of the floor show it side by side: the left
+// cobbles are registered, the right ones are not, so there every fragment takes
+// the light head-on, the relief flattens and the stones read slightly BRIGHTER
+// rather than darker. Normals redistribute
 // light across a surface; they never add any.
 //
 // Nobody authored a normal map here either. `AlphaNormals` reads the
@@ -59,12 +60,10 @@ const cobbleTexture = canvasTexture(cobbleSize, cobbleSize, context => {
 class LightmapNormalsScene extends Scene {
   world;
   lighting;
-  cobbles = [];
   normals;
   torch;
   lantern;
   elapsed = 0;
-  hud;
   init() {
     const { width, height } = this.app;
     this.world = new Container();
@@ -90,45 +89,29 @@ class LightmapNormalsScene extends Scene {
         // a stone lit from the left must stay lit from the left however it sits.
         cobble.rotation = (row * 9 + column * 23) % 360;
         this.world.addChild(cobble);
-        this.cobbles.push(this.lighting.normalsFrom(cobble, this.normals));
+        if (cobble.x < width / 2) {
+          this.lighting.normalsFrom(cobble, this.normals);
+        }
       }
     }
     this.torch = this.lighting.add(new PointLight({ radius: 480, intensity: 2.4, height: 34, color: new Color(255, 190, 130) }));
     this.lantern = this.lighting.add(new PointLight({ radius: 360, intensity: 1.8, height: 90, color: new Color(150, 200, 255) }));
-    this.hud = mountControls({
-      title: 'Normals under the lightmap renderer',
-      hint: 'Nobody authored a normal map: the cobbles are round because their own alpha says so. Switch the normals off and every fragment takes the light head-on - the relief flattens and the stones read a little brighter, because a surface normal moves light around rather than adding any.',
-      status: '',
-    });
-    const panel = mountControlPanel({ title: 'Surfaces', corner: 'top-right' });
-    panel.addToggle({
-      label: 'Normals',
-      value: true,
-      onChange: value => {
-        for (const cobble of this.cobbles) {
-          if (value) {
-            this.lighting.normalsFrom(cobble, this.normals);
-          } else {
-            this.lighting.stopNormals(cobble);
-          }
-        }
+    // DOM labels: canvas text would sit under the lightmap and go dark with
+    // the floor.
+    mountControls({ status: 'Left half: with normals', corner: 'top-left' });
+    mountControls({ status: 'Right half: without normals', corner: 'bottom-right' });
+    demoPanel({
+      corner: 'top-right',
+      controls: {
+        height: slider('Light height', { min: 8, max: 160, step: 2, value: this.torch.height, format: v => v.toFixed(0) }),
+        debug: toggle('Show normals'),
       },
-    });
-    panel.addToggle({
-      label: 'Show normals',
-      value: false,
-      onChange: value => {
-        this.lighting.debug = value ? 'normals' : null;
-      },
-    });
-    panel.addSlider({
-      label: 'Light height',
-      min: 8,
-      max: 160,
-      step: 2,
-      value: this.torch.height,
-      onChange: value => {
-        this.torch.height = value;
+      onChange: (key, value) => {
+        if (key === 'height') {
+          this.torch.height = value;
+        } else {
+          this.lighting.debug = value ? 'normals' : null;
+        }
       },
     });
   }
@@ -139,9 +122,6 @@ class LightmapNormalsScene extends Scene {
   }
   draw(context) {
     context.render(this.world);
-    this.hud.setStatus(
-      `${this.lighting.activeSurfaceCount} lit surfaces - ${this.lighting.quality} renderer - draw calls ${context.stats.drawCalls}`,
-    );
   }
 }
 const app = new Application({
diff --git a/examples/lighting/lightmap-normals.ts b/examples/lighting/lightmap-normals.ts
index e7b5506cf..83dbc48fb 100644
--- a/examples/lighting/lightmap-normals.ts
+++ b/examples/lighting/lightmap-normals.ts
@@ -10,8 +10,8 @@ import {
   Sprite,
   Texture,
 } from '@codexo/exojs';
-import { AlphaNormals, type Lighting, LightmapLighting, type NormalSource, PointLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaNormals, type Lighting, LightmapLighting, type NormalSource, PointLight } from '@codexo/exojs/lighting';
+import { demoPanel, mountControls, slider, toggle } from '@examples/runtime';
 
 // The lightmap renderer multiplies a frame that was already drawn, so by the
 // time the light field is composited there is no surface normal anywhere. A
@@ -21,9 +21,10 @@ import { mountControlPanel, mountControls } from '@examples/runtime';
 //
 // Nothing is required of a drawable that is not registered - the attachment's
 // alpha is coverage, and where it is zero the light lands with no `N dot L`
-// term at all. That is what the "Normals" toggle below shows: without them
-// every fragment takes the light head-on, so the relief flattens and the
-// stones read slightly BRIGHTER rather than darker. Normals redistribute
+// term at all. The two halves of the floor show it side by side: the left
+// cobbles are registered, the right ones are not, so there every fragment takes
+// the light head-on, the relief flattens and the stones read slightly BRIGHTER
+// rather than darker. Normals redistribute
 // light across a surface; they never add any.
 //
 // Nobody authored a normal map here either. `AlphaNormals` reads the
@@ -78,12 +79,10 @@ const cobbleTexture = canvasTexture(cobbleSize, cobbleSize, context => {
 class LightmapNormalsScene extends Scene {
   private world!: Container;
   private lighting!: Lighting;
-  private cobbles: Sprite[] = [];
   private normals!: NormalSource;
   private torch!: PointLight;
   private lantern!: PointLight;
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const { width, height } = this.app;
@@ -116,51 +115,33 @@ class LightmapNormalsScene extends Scene {
         // a stone lit from the left must stay lit from the left however it sits.
         cobble.rotation = (row * 9 + column * 23) % 360;
         this.world.addChild(cobble);
-        this.cobbles.push(this.lighting.normalsFrom(cobble, this.normals));
+
+        if (cobble.x < width / 2) {
+          this.lighting.normalsFrom(cobble, this.normals);
+        }
       }
     }
 
     this.torch = this.lighting.add(new PointLight({ radius: 480, intensity: 2.4, height: 34, color: new Color(255, 190, 130) }));
     this.lantern = this.lighting.add(new PointLight({ radius: 360, intensity: 1.8, height: 90, color: new Color(150, 200, 255) }));
 
-    this.hud = mountControls({
-      title: 'Normals under the lightmap renderer',
-      hint: 'Nobody authored a normal map: the cobbles are round because their own alpha says so. Switch the normals off and every fragment takes the light head-on - the relief flattens and the stones read a little brighter, because a surface normal moves light around rather than adding any.',
-      status: '',
-    });
-
-    const panel = mountControlPanel({ title: 'Surfaces', corner: 'top-right' });
-
-    panel.addToggle({
-      label: 'Normals',
-      value: true,
-      onChange: value => {
-        for (const cobble of this.cobbles) {
-          if (value) {
-            this.lighting.normalsFrom(cobble, this.normals);
-          } else {
-            this.lighting.stopNormals(cobble);
-          }
-        }
-      },
-    });
+    // DOM labels: canvas text would sit under the lightmap and go dark with
+    // the floor.
+    mountControls({ status: 'Left half: with normals', corner: 'top-left' });
+    mountControls({ status: 'Right half: without normals', corner: 'bottom-right' });
 
-    panel.addToggle({
-      label: 'Show normals',
-      value: false,
-      onChange: value => {
-        this.lighting.debug = value ? 'normals' : null;
+    demoPanel({
+      corner: 'top-right',
+      controls: {
+        height: slider('Light height', { min: 8, max: 160, step: 2, value: this.torch.height, format: v => v.toFixed(0) }),
+        debug: toggle('Show normals'),
       },
-    });
-
-    panel.addSlider({
-      label: 'Light height',
-      min: 8,
-      max: 160,
-      step: 2,
-      value: this.torch.height,
-      onChange: value => {
-        this.torch.height = value;
+      onChange: (key, value) => {
+        if (key === 'height') {
+          this.torch.height = value as number;
+        } else {
+          this.lighting.debug = value ? 'normals' : null;
+        }
       },
     });
   }
@@ -174,9 +155,6 @@ class LightmapNormalsScene extends Scene {
 
   override draw(context: RenderingContext): void {
     context.render(this.world);
-    this.hud.setStatus(
-      `${this.lighting.activeSurfaceCount} lit surfaces - ${this.lighting.quality} renderer - draw calls ${context.stats.drawCalls}`,
-    );
   }
 }
 
diff --git a/examples/lighting/many-lights.js b/examples/lighting/many-lights.js
index 520ee044e..979fc01d3 100644
--- a/examples/lighting/many-lights.js
+++ b/examples/lighting/many-lights.js
@@ -11,8 +11,8 @@ import {
   Texture,
   TextureFormat,
 } from '@codexo/exojs';
-import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs/lighting';
+import { demoPanel, slider } from '@examples/runtime';
 // The FORWARD renderer under load: the light list is a data texture, not a
 // uniform array, so the light count is a shader loop bound rather than a
 // compiled-in constant, and the slider below walks from 1 to 48 lights without
@@ -103,7 +103,7 @@ class ManyLightsScene extends Scene {
   draggingFirst = false;
   manualFirst = true;
   elapsed = 0;
-  hud;
+  panel;
   onPointerDown = (_pointer, x, y) => {
     const marker = this.orbits[0]?.marker;
     this.draggingFirst = !!marker && Math.hypot(x - marker.x, y - marker.y) < 36;
@@ -152,22 +152,15 @@ class ManyLightsScene extends Scene {
     });
     this.orbits[0].light.setPosition(width * 0.25, height / 2);
     this.orbits[0].marker.setPosition(width * 0.25, height / 2);
-    this.setVisibleLights(this.visibleLights);
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Normal-Mapped Lighting',
-      hint: `Drag the large light marker across the normal-mapped tiles or change the count. Up to ${MAX_LIGHTS} lights share one material; this forward-lighting scene has no shadows.`,
-      status: '',
+      corner: 'top-right',
+      controls: {
+        lights: slider('Active lights', { min: 1, max: MAX_LIGHTS, value: this.visibleLights, step: 1, format: value => `${value}` }),
+      },
+      actions: { 'Resume first orbit': () => (this.manualFirst = false) },
+      onChange: (_key, value) => this.setVisibleLights(value),
     });
-    const panel = mountControlPanel({ title: 'Lights', corner: 'top-right' });
-    panel.addSlider({
-      label: 'Active lights',
-      min: 1,
-      max: MAX_LIGHTS,
-      step: 1,
-      value: this.visibleLights,
-      onChange: value => this.setVisibleLights(value),
-    });
-    panel.addButton({ label: 'Resume first orbit', onClick: () => (this.manualFirst = false) });
     this.app.input.onPointerDown.add(this.onPointerDown);
     this.app.input.onPointerMove.add(this.onPointerMove);
     this.app.input.onPointerUp.add(this.onPointerEnd);
@@ -203,14 +196,14 @@ class ManyLightsScene extends Scene {
   draw(context) {
     context.render(this.floor);
     context.render(this.markerLayer);
-    this.hud.setStatus(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+    this.panel.status(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
   }
   destroy() {
     this.app.input.onPointerDown.remove(this.onPointerDown);
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerUp.remove(this.onPointerEnd);
     this.app.input.onPointerCancel.remove(this.onPointerEnd);
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
   }
 }
diff --git a/examples/lighting/many-lights.ts b/examples/lighting/many-lights.ts
index ee4cfd65d..3d362fc9a 100644
--- a/examples/lighting/many-lights.ts
+++ b/examples/lighting/many-lights.ts
@@ -12,8 +12,8 @@ import {
   Texture,
   TextureFormat,
 } from '@codexo/exojs';
-import { ForwardLighting, type Lighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { ForwardLighting, type Lighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs/lighting';
+import { type DemoPanel, demoPanel, slider, type SliderSpec } from '@examples/runtime';
 
 // The FORWARD renderer under load: the light list is a data texture, not a
 // uniform array, so the light count is a shader loop bound rather than a
@@ -129,7 +129,7 @@ class ManyLightsScene extends Scene {
   private draggingFirst = false;
   private manualFirst = true;
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ lights: SliderSpec }>;
   private readonly onPointerDown = (_pointer: unknown, x: number, y: number): void => {
     const marker = this.orbits[0]?.marker;
     this.draggingFirst = !!marker && Math.hypot(x - marker.x, y - marker.y) < 36;
@@ -188,25 +188,15 @@ class ManyLightsScene extends Scene {
 
     this.orbits[0]!.light.setPosition(width * 0.25, height / 2);
     this.orbits[0]!.marker.setPosition(width * 0.25, height / 2);
-    this.setVisibleLights(this.visibleLights);
-
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Normal-Mapped Lighting',
-      hint: `Drag the large light marker across the normal-mapped tiles or change the count. Up to ${MAX_LIGHTS} lights share one material; this forward-lighting scene has no shadows.`,
-      status: '',
-    });
-
-    const panel = mountControlPanel({ title: 'Lights', corner: 'top-right' });
-
-    panel.addSlider({
-      label: 'Active lights',
-      min: 1,
-      max: MAX_LIGHTS,
-      step: 1,
-      value: this.visibleLights,
-      onChange: value => this.setVisibleLights(value),
+      corner: 'top-right',
+      controls: {
+        lights: slider('Active lights', { min: 1, max: MAX_LIGHTS, value: this.visibleLights, step: 1, format: value => `${value}` }),
+      },
+      actions: { 'Resume first orbit': () => (this.manualFirst = false) },
+      onChange: (_key, value) => this.setVisibleLights(value),
     });
-    panel.addButton({ label: 'Resume first orbit', onClick: () => (this.manualFirst = false) });
 
     this.app.input.onPointerDown.add(this.onPointerDown);
     this.app.input.onPointerMove.add(this.onPointerMove);
@@ -252,7 +242,7 @@ class ManyLightsScene extends Scene {
   override draw(context: RenderingContext): void {
     context.render(this.floor);
     context.render(this.markerLayer);
-    this.hud.setStatus(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+    this.panel.status(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
   }
 
   override destroy(): void {
@@ -260,7 +250,7 @@ class ManyLightsScene extends Scene {
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerUp.remove(this.onPointerEnd);
     this.app.input.onPointerCancel.remove(this.onPointerEnd);
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
   }
 }
diff --git a/examples/lighting/normal-mapped-sprites.js b/examples/lighting/normal-mapped-sprites.js
index 8d423af0e..af8b4d0cf 100644
--- a/examples/lighting/normal-mapped-sprites.js
+++ b/examples/lighting/normal-mapped-sprites.js
@@ -11,7 +11,7 @@ import {
   Texture,
   TextureFormat,
 } from '@codexo/exojs';
-import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs-lighting';
+import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs/lighting';
 import { mountControls } from '@examples/runtime';
 // Forward normal mapping on plain sprites. A LitMaterial samples a
 // tangent-space normal map next to the base texture and shades each fragment
diff --git a/examples/lighting/normal-mapped-sprites.ts b/examples/lighting/normal-mapped-sprites.ts
index ff5a04082..47f037643 100644
--- a/examples/lighting/normal-mapped-sprites.ts
+++ b/examples/lighting/normal-mapped-sprites.ts
@@ -12,7 +12,7 @@ import {
   Texture,
   TextureFormat,
 } from '@codexo/exojs';
-import { ForwardLighting, type Lighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs-lighting';
+import { ForwardLighting, type Lighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs/lighting';
 import { mountControls } from '@examples/runtime';
 
 // Forward normal mapping on plain sprites. A LitMaterial samples a
diff --git a/examples/lighting/radiance-rooms.js b/examples/lighting/radiance-rooms.js
index 857293f67..32cb084d4 100644
--- a/examples/lighting/radiance-rooms.js
+++ b/examples/lighting/radiance-rooms.js
@@ -4,14 +4,15 @@ import {
   Color,
   Container,
   FixedResolutionCanvasSizing,
+  Keyboard,
   RepeatingSprite,
   ScaleModes,
   Scene,
   Sprite,
   Texture,
 } from '@codexo/exojs';
-import { AlphaOccluder, LightmapLighting, PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaOccluder, LightmapLighting, PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs/lighting';
+import { choice, demoPanel, slider, toggle } from '@examples/runtime';
 // Two rooms, one doorway, one lamp - and a switch between the renderer that
 // draws a light and the one that transports it.
 //
@@ -121,7 +122,6 @@ const outline = wall => {
  */
 const bounceFactor = 0.9;
 /** Levels the debug cycle walks, in the order it walks them. */
-const debugViews = [null, 'light', 'mask', 'occluders'];
 /** Texels of light field per logical pixel. Stated here so the panel can show what was actually run at. */
 const lightResolution = 1;
 /**
@@ -132,15 +132,6 @@ const lampAt = phase => ({
   x: 340 + Math.sin(phase * 0.3) * 120,
   y: 360 + Math.cos(phase * 0.22) * 150,
 });
-/**
- * Seconds for one full loop of BOTH terms, so a phase slider covers the whole
- * path and the same phase is always the same place. The two rates are 0.3 and
- * 0.22, whose common period is `2 * pi` over their greatest common measure of
- * 0.02 - not over their difference.
- */
-const loopSeconds = (Math.PI * 2) / 0.02;
-/** Where the status line reads the lamp's real position into. */
-const lampPosition = { x: 0, y: 0 };
 class RadianceRoomsScene extends Scene {
   world;
   panel;
@@ -150,10 +141,7 @@ class RadianceRoomsScene extends Scene {
   softness = 0.35;
   bounce = true;
   moving = true;
-  debug = null;
   elapsed = 0;
-  hud;
-  phaseControl;
   init() {
     const { width, height } = this.app;
     this.world = new Container();
@@ -181,117 +169,46 @@ class RadianceRoomsScene extends Scene {
     this.panel.height = bouncePanel.height;
     this.panel.setPosition(bouncePanel.x, bouncePanel.y);
     this.world.addChild(this.panel);
-    this.build();
-    this.hud = mountControls({
-      title: 'Radiance Rooms',
-      hint: 'One lamp, one doorway. Switch the renderer to see the difference between a light that is drawn and light that is transported - they are different transport models and will not agree pixel for pixel. Pause the motion and set a phase to compare the two at the same instant.',
-      status: '',
-    });
-    const panel = mountControlPanel({ title: 'Lighting', corner: 'top-right' });
-    panel.addToggle({
-      label: 'Radiance',
-      value: true,
-      onChange: value => {
-        // A renderer is chosen by constructing it, so switching means building
-        // a new system - which is all a system is here: it owns its passes and
-        // takes them out again on `destroy()`. Importing the class is also what
-        // links it, so a project that only ever builds one leaves the other
-        // out of its bundle.
-        this.cascading = value;
-        this.build();
-      },
-    });
-    panel.addToggle({
-      label: 'Bounce',
-      value: this.bounce,
-      onChange: value => {
-        this.bounce = value;
-        // Only the cascades bounce; under the quads the toggle has nothing to
-        // rebuild.
-        if (this.cascading) {
-          this.build();
-        }
-      },
-    });
-    panel.addToggle({
-      label: 'Motion',
-      value: this.moving,
-      onChange: value => {
-        this.moving = value;
-      },
-    });
-    this.phaseControl = panel.addSlider({
-      label: 'Phase',
-      min: 0,
-      max: 1,
-      // A step is a step along the PATH, and the path is `loopSeconds` long:
-      // at this rate one is about ten pixels of lamp, which is what makes the
-      // slider a way to place the lamp rather than to jump it across the room.
-      step: 0.001,
-      value: 0,
-      onChange: value => {
-        // Placing the lamp by hand is what makes a comparison reproducible:
-        // the same phase is the same position in either renderer, however long
-        // either has been running.
-        this.elapsed = value * loopSeconds;
-        this.moveLamp();
-      },
-    });
-    panel.addCycle({
-      label: 'Field',
-      options: ['shaded', 'light', 'mask', 'occluders'],
-      index: 0,
-      onChange: index => {
-        this.debug = debugViews[index] ?? null;
-        this.lighting.debug = this.debug;
-      },
-    });
-    panel.addSlider({
-      label: 'Lamp',
-      min: 0.5,
-      max: 6,
-      step: 0.1,
-      value: this.intensity,
-      onChange: value => {
-        this.intensity = value;
-        this.lamp.intensity = value;
+    // A renderer is chosen by constructing it, so switching means building a
+    // new system - which is all a system is here: it owns its passes and takes
+    // them out again on `destroy()`. Importing the class is also what links it,
+    // so a project that only ever builds one leaves the other out of its bundle.
+    // Space pauses the lamp, so both renderers can be compared at one instant.
+    const panel = demoPanel({
+      title: 'Lighting',
+      corner: 'top-right',
+      controls: {
+        renderer: choice('Renderer', ['Radiance', 'Lightmap']),
+        bounce: toggle('Bounce', this.bounce),
+        moving: toggle('Motion', this.moving),
+        lamp: slider('Lamp', { min: 0.5, max: 6, step: 0.1, value: this.intensity, format: v => v.toFixed(1) }),
+        // Source size under radiance, filter width under lightmap. See the
+        // note at the top of the file: the two are not the same quantity.
+        softness: slider('Softness', { min: 0, max: 1, step: 0.05, value: this.softness }),
       },
-    });
-    panel.addSlider({
-      // Source size under radiance, filter width under lightmap. See the note
-      // at the top of the file: the two are not the same quantity, and the
-      // slider is labelled for neither so that the difference stays visible.
-      label: 'Softness',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.softness,
-      onChange: value => {
-        this.softness = value;
-        this.lamp.softness = value;
+      onChange: (_key, _value, values) => {
+        this.moving = values.moving;
+        this.intensity = values.lamp;
+        this.softness = values.softness;
+        // Only the cascades bounce; under the quads the toggle changes nothing.
+        this.build(values.renderer === 'Radiance', values.bounce);
+        this.lamp.intensity = this.intensity;
+        this.lamp.softness = this.softness;
       },
     });
+    this.inputs.onTrigger(Keyboard.Space, () => panel.step('moving'));
   }
   update(delta) {
     if (!this.moving) {
       return;
     }
     this.elapsed += delta;
-    this.phaseControl.set((this.elapsed % loopSeconds) / loopSeconds);
     // Moving the lamp is the clearest way to see that nothing about the far
     // room is baked: the wedge through the doorway sweeps with it.
     this.moveLamp();
   }
   draw(context) {
     context.render(this.world);
-    // Read off the lamp itself, not recomputed from the clock: the status line
-    // is what says two renderers were compared under the same conditions, so
-    // it has to report where the light actually is.
-    this.lamp.getWorldPosition(lampPosition);
-    const bounce = this.cascading && this.bounce ? 'bounce' : 'no bounce';
-    this.hud.setStatus(
-      `${this.lighting.quality} - ${bounce} - ${this.app.width}x${this.app.height} at ${lightResolution}x - lamp ${lampPosition.x.toFixed(1)}, ${lampPosition.y.toFixed(1)} - draw calls ${context.stats.drawCalls}`,
-    );
   }
   moveLamp() {
     const { x, y } = lampAt(this.elapsed);
@@ -300,8 +217,13 @@ class RadianceRoomsScene extends Scene {
   get lamp() {
     return this.lighting.lights[0];
   }
-  /** Build the lighting system for the renderer currently selected. */
-  build() {
+  /** Builds the lighting system for the selected renderer, unless it is already the one running. */
+  build(cascading, bounce) {
+    if (this.lighting !== undefined && cascading === this.cascading && (bounce === this.bounce || !cascading)) {
+      return;
+    }
+    this.cascading = cascading;
+    this.bounce = bounce;
     if (this.lighting !== undefined) {
       this.systems.remove(this.lighting);
       this.lighting.destroy();
@@ -310,7 +232,6 @@ class RadianceRoomsScene extends Scene {
     this.lighting = this.cascading
       ? new RadianceLighting(this.app, { ...options, bounce: this.bounce ? bounceFactor : 0 })
       : new LightmapLighting(this.app, options);
-    this.lighting.debug = this.debug;
     this.systems.add(this.lighting);
     this.lighting.add(new PointLight({ radius: 600, intensity: this.intensity, softness: this.softness, color: new Color(255, 226, 180) }));
     // Placed straight away rather than on the next tick: switching renderer
diff --git a/examples/lighting/radiance-rooms.ts b/examples/lighting/radiance-rooms.ts
index c85064b89..76e803ff7 100644
--- a/examples/lighting/radiance-rooms.ts
+++ b/examples/lighting/radiance-rooms.ts
@@ -3,6 +3,7 @@ import {
   Color,
   Container,
   FixedResolutionCanvasSizing,
+  Keyboard,
   type RenderingContext,
   RepeatingSprite,
   ScaleModes,
@@ -11,16 +12,8 @@ import {
   Sprite,
   Texture,
 } from '@codexo/exojs';
-import {
-  AlphaOccluder,
-  type Lighting,
-  type LightingDebugView,
-  LightmapLighting,
-  PointLight,
-  PolygonOccluder,
-  RadianceLighting,
-} from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaOccluder, type Lighting, LightmapLighting, PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs/lighting';
+import { choice, demoPanel, slider, toggle } from '@examples/runtime';
 
 // Two rooms, one doorway, one lamp - and a switch between the renderer that
 // draws a light and the one that transports it.
@@ -153,7 +146,6 @@ const outline = (wall: Wall): ReadonlyArray<{ x: number; y: number }> => {
 const bounceFactor = 0.9;
 
 /** Levels the debug cycle walks, in the order it walks them. */
-const debugViews: readonly LightingDebugView[] = [null, 'light', 'mask', 'occluders'];
 
 /** Texels of light field per logical pixel. Stated here so the panel can show what was actually run at. */
 const lightResolution = 1;
@@ -167,17 +159,6 @@ const lampAt = (phase: number): { x: number; y: number } => ({
   y: 360 + Math.cos(phase * 0.22) * 150,
 });
 
-/**
- * Seconds for one full loop of BOTH terms, so a phase slider covers the whole
- * path and the same phase is always the same place. The two rates are 0.3 and
- * 0.22, whose common period is `2 * pi` over their greatest common measure of
- * 0.02 - not over their difference.
- */
-const loopSeconds = (Math.PI * 2) / 0.02;
-
-/** Where the status line reads the lamp's real position into. */
-const lampPosition = { x: 0, y: 0 };
-
 class RadianceRoomsScene extends Scene {
   private world!: Container;
   private panel!: Sprite;
@@ -187,10 +168,7 @@ class RadianceRoomsScene extends Scene {
   private softness = 0.35;
   private bounce = true;
   private moving = true;
-  private debug: LightingDebugView = null;
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
-  private phaseControl!: { set(value: number): void };
 
   override init(): void {
     const { width, height } = this.app;
@@ -228,106 +206,35 @@ class RadianceRoomsScene extends Scene {
     this.panel.setPosition(bouncePanel.x, bouncePanel.y);
     this.world.addChild(this.panel);
 
-    this.build();
-
-    this.hud = mountControls({
-      title: 'Radiance Rooms',
-      hint: 'One lamp, one doorway. Switch the renderer to see the difference between a light that is drawn and light that is transported - they are different transport models and will not agree pixel for pixel. Pause the motion and set a phase to compare the two at the same instant.',
-      status: '',
-    });
-
-    const panel = mountControlPanel({ title: 'Lighting', corner: 'top-right' });
-
-    panel.addToggle({
-      label: 'Radiance',
-      value: true,
-      onChange: value => {
-        // A renderer is chosen by constructing it, so switching means building
-        // a new system - which is all a system is here: it owns its passes and
-        // takes them out again on `destroy()`. Importing the class is also what
-        // links it, so a project that only ever builds one leaves the other
-        // out of its bundle.
-        this.cascading = value;
-        this.build();
-      },
-    });
-
-    panel.addToggle({
-      label: 'Bounce',
-      value: this.bounce,
-      onChange: value => {
-        this.bounce = value;
-
-        // Only the cascades bounce; under the quads the toggle has nothing to
-        // rebuild.
-        if (this.cascading) {
-          this.build();
-        }
-      },
-    });
-
-    panel.addToggle({
-      label: 'Motion',
-      value: this.moving,
-      onChange: value => {
-        this.moving = value;
-      },
-    });
-
-    this.phaseControl = panel.addSlider({
-      label: 'Phase',
-      min: 0,
-      max: 1,
-      // A step is a step along the PATH, and the path is `loopSeconds` long:
-      // at this rate one is about ten pixels of lamp, which is what makes the
-      // slider a way to place the lamp rather than to jump it across the room.
-      step: 0.001,
-      value: 0,
-      onChange: value => {
-        // Placing the lamp by hand is what makes a comparison reproducible:
-        // the same phase is the same position in either renderer, however long
-        // either has been running.
-        this.elapsed = value * loopSeconds;
-        this.moveLamp();
-      },
-    });
-
-    panel.addCycle({
-      label: 'Field',
-      options: ['shaded', 'light', 'mask', 'occluders'],
-      index: 0,
-      onChange: index => {
-        this.debug = debugViews[index] ?? null;
-        this.lighting.debug = this.debug;
+    // A renderer is chosen by constructing it, so switching means building a
+    // new system - which is all a system is here: it owns its passes and takes
+    // them out again on `destroy()`. Importing the class is also what links it,
+    // so a project that only ever builds one leaves the other out of its bundle.
+    // Space pauses the lamp, so both renderers can be compared at one instant.
+    const panel = demoPanel({
+      title: 'Lighting',
+      corner: 'top-right',
+      controls: {
+        renderer: choice('Renderer', ['Radiance', 'Lightmap']),
+        bounce: toggle('Bounce', this.bounce),
+        moving: toggle('Motion', this.moving),
+        lamp: slider('Lamp', { min: 0.5, max: 6, step: 0.1, value: this.intensity, format: v => v.toFixed(1) }),
+        // Source size under radiance, filter width under lightmap. See the
+        // note at the top of the file: the two are not the same quantity.
+        softness: slider('Softness', { min: 0, max: 1, step: 0.05, value: this.softness }),
       },
-    });
-
-    panel.addSlider({
-      label: 'Lamp',
-      min: 0.5,
-      max: 6,
-      step: 0.1,
-      value: this.intensity,
-      onChange: value => {
-        this.intensity = value;
-        this.lamp.intensity = value;
+      onChange: (_key, _value, values) => {
+        this.moving = values.moving;
+        this.intensity = values.lamp;
+        this.softness = values.softness;
+        // Only the cascades bounce; under the quads the toggle changes nothing.
+        this.build(values.renderer === 'Radiance', values.bounce);
+        this.lamp.intensity = this.intensity;
+        this.lamp.softness = this.softness;
       },
     });
 
-    panel.addSlider({
-      // Source size under radiance, filter width under lightmap. See the note
-      // at the top of the file: the two are not the same quantity, and the
-      // slider is labelled for neither so that the difference stays visible.
-      label: 'Softness',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.softness,
-      onChange: value => {
-        this.softness = value;
-        this.lamp.softness = value;
-      },
-    });
+    this.inputs.onTrigger(Keyboard.Space, () => panel.step('moving'));
   }
 
   override update(delta: Seconds): void {
@@ -336,7 +243,6 @@ class RadianceRoomsScene extends Scene {
     }
 
     this.elapsed += delta;
-    this.phaseControl.set((this.elapsed % loopSeconds) / loopSeconds);
     // Moving the lamp is the clearest way to see that nothing about the far
     // room is baked: the wedge through the doorway sweeps with it.
     this.moveLamp();
@@ -344,16 +250,6 @@ class RadianceRoomsScene extends Scene {
 
   override draw(context: RenderingContext): void {
     context.render(this.world);
-
-    // Read off the lamp itself, not recomputed from the clock: the status line
-    // is what says two renderers were compared under the same conditions, so
-    // it has to report where the light actually is.
-    this.lamp.getWorldPosition(lampPosition);
-    const bounce = this.cascading && this.bounce ? 'bounce' : 'no bounce';
-
-    this.hud.setStatus(
-      `${this.lighting.quality} - ${bounce} - ${this.app.width}x${this.app.height} at ${lightResolution}x - lamp ${lampPosition.x.toFixed(1)}, ${lampPosition.y.toFixed(1)} - draw calls ${context.stats.drawCalls}`,
-    );
   }
 
   private moveLamp(): void {
@@ -366,8 +262,15 @@ class RadianceRoomsScene extends Scene {
     return this.lighting.lights[0] as PointLight;
   }
 
-  /** Build the lighting system for the renderer currently selected. */
-  private build(): void {
+  /** Builds the lighting system for the selected renderer, unless it is already the one running. */
+  private build(cascading: boolean, bounce: boolean): void {
+    if (this.lighting !== undefined && cascading === this.cascading && (bounce === this.bounce || !cascading)) {
+      return;
+    }
+
+    this.cascading = cascading;
+    this.bounce = bounce;
+
     if (this.lighting !== undefined) {
       this.systems.remove(this.lighting);
       this.lighting.destroy();
@@ -378,7 +281,6 @@ class RadianceRoomsScene extends Scene {
     this.lighting = this.cascading
       ? new RadianceLighting(this.app, { ...options, bounce: this.bounce ? bounceFactor : 0 })
       : new LightmapLighting(this.app, options);
-    this.lighting.debug = this.debug;
     this.systems.add(this.lighting);
     this.lighting.add(new PointLight({ radius: 600, intensity: this.intensity, softness: this.softness, color: new Color(255, 226, 180) }));
     // Placed straight away rather than on the next tick: switching renderer
diff --git a/examples/lighting/shadow-casters.js b/examples/lighting/shadow-casters.js
index 303126755..8b9aff1c9 100644
--- a/examples/lighting/shadow-casters.js
+++ b/examples/lighting/shadow-casters.js
@@ -1,7 +1,7 @@
 // Auto-generated from shadow-casters.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, ScaleModes, Scene, Sprite, Texture } from '@codexo/exojs';
-import { AlphaOccluder, LightmapLighting, PointLight, SpotLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaOccluder, LightmapLighting, PointLight, SpotLight } from '@codexo/exojs/lighting';
+import { demoPanel, slider, toggle } from '@examples/runtime';
 // Nothing here models a shadow. Each wall registers the outline it already
 // has - its own rectangle, or, for the pillar, the silhouette traced out of
 // its alpha channel - and the lightmap renderer turns that into a shadow for
@@ -54,7 +54,7 @@ class ShadowCastersScene extends Scene {
   beam;
   turntable;
   elapsed = 0;
-  hud;
+  panel;
   init() {
     const { width, height } = this.app;
     this.world = new Container();
@@ -87,28 +87,17 @@ class ShadowCastersScene extends Scene {
       new SpotLight({ radius: 760, angle: 28, coneSoftness: 0.35, intensity: 2.3, softness: 0.2, color: new Color(150, 210, 255) }),
     );
     this.beam.setPosition(120, 660);
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Shadow Casters',
-      hint: 'No object declares that it casts a shadow, and nothing here authors an outline: every caster is one line handing the lighting system the sprite it already draws.',
-      status: '',
-    });
-    const panel = mountControlPanel({ title: 'Shadows', corner: 'top-right' });
-    panel.addSlider({
-      label: 'Softness',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.torch.softness,
-      onChange: value => {
-        this.torch.softness = value;
-        this.beam.softness = value;
+      corner: 'top-right',
+      controls: {
+        softness: slider('Softness', { min: 0, max: 1, value: this.torch.softness, step: 0.05, format: value => value.toFixed(2) }),
+        occluders: toggle('Show occluders', false),
       },
-    });
-    panel.addToggle({
-      label: 'Show occluders',
-      value: false,
-      onChange: value => {
-        this.lighting.debug = value ? 'occluders' : null;
+      onChange: (_key, _value, values) => {
+        this.torch.softness = values.softness;
+        this.beam.softness = values.softness;
+        this.lighting.debug = values.occluders ? 'occluders' : null;
       },
     });
   }
@@ -124,7 +113,11 @@ class ShadowCastersScene extends Scene {
   }
   draw(context) {
     context.render(this.world);
-    this.hud.setStatus(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+    this.panel.status(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+  }
+  destroy() {
+    this.panel.dispose();
+    super.destroy();
   }
 }
 const app = new Application({
diff --git a/examples/lighting/shadow-casters.ts b/examples/lighting/shadow-casters.ts
index 4917fe9e6..e9ae82210 100644
--- a/examples/lighting/shadow-casters.ts
+++ b/examples/lighting/shadow-casters.ts
@@ -10,8 +10,8 @@ import {
   Sprite,
   Texture,
 } from '@codexo/exojs';
-import { AlphaOccluder, type Lighting, LightmapLighting, PointLight, SpotLight } from '@codexo/exojs-lighting';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { AlphaOccluder, type Lighting, LightmapLighting, PointLight, SpotLight } from '@codexo/exojs/lighting';
+import { type DemoPanel, demoPanel, slider, type SliderSpec, toggle, type ToggleSpec } from '@examples/runtime';
 
 // Nothing here models a shadow. Each wall registers the outline it already
 // has - its own rectangle, or, for the pillar, the silhouette traced out of
@@ -76,7 +76,7 @@ class ShadowCastersScene extends Scene {
   private beam!: SpotLight;
   private turntable!: Sprite;
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ softness: SliderSpec; occluders: ToggleSpec }>;
 
   override init(): void {
     const { width, height } = this.app;
@@ -120,31 +120,17 @@ class ShadowCastersScene extends Scene {
     );
     this.beam.setPosition(120, 660);
 
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Shadow Casters',
-      hint: 'No object declares that it casts a shadow, and nothing here authors an outline: every caster is one line handing the lighting system the sprite it already draws.',
-      status: '',
-    });
-
-    const panel = mountControlPanel({ title: 'Shadows', corner: 'top-right' });
-
-    panel.addSlider({
-      label: 'Softness',
-      min: 0,
-      max: 1,
-      step: 0.05,
-      value: this.torch.softness,
-      onChange: value => {
-        this.torch.softness = value;
-        this.beam.softness = value;
+      corner: 'top-right',
+      controls: {
+        softness: slider('Softness', { min: 0, max: 1, value: this.torch.softness, step: 0.05, format: value => value.toFixed(2) }),
+        occluders: toggle('Show occluders', false),
       },
-    });
-
-    panel.addToggle({
-      label: 'Show occluders',
-      value: false,
-      onChange: value => {
-        this.lighting.debug = value ? 'occluders' : null;
+      onChange: (_key, _value, values) => {
+        this.torch.softness = values.softness;
+        this.beam.softness = values.softness;
+        this.lighting.debug = values.occluders ? 'occluders' : null;
       },
     });
   }
@@ -163,7 +149,12 @@ class ShadowCastersScene extends Scene {
 
   override draw(context: RenderingContext): void {
     context.render(this.world);
-    this.hud.setStatus(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+    this.panel.status(`${this.lighting.activeLightCount} lights - draw calls ${context.stats.drawCalls}`);
+  }
+
+  override destroy(): void {
+    this.panel.dispose();
+    super.destroy();
   }
 }
 
diff --git a/examples/particles/bonfire.js b/examples/particles/bonfire.js
index e8f63588a..553066fd9 100644
--- a/examples/particles/bonfire.js
+++ b/examples/particles/bonfire.js
@@ -14,8 +14,9 @@ import {
   ScaleOverLifetime,
   Turbulence,
   VectorRange,
-} from '@codexo/exojs-particles';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, slider } from '@examples/runtime';
 class BonfireScene extends Scene {
   // Back to front: smoke behind the flames, embers in front.
   smoke;
@@ -33,19 +34,18 @@ class BonfireScene extends Scene {
   fireX = 0;
   fireY = 0;
   panel;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
-    const flame = this.loader.get(assets.demo.textures.particleFlame);
-    const smoke = this.loader.get(assets.demo.textures.particleSmoke);
-    const star = this.loader.get(assets.demo.textures.particleStar);
+    const flame = this.loader.get(assets.particleFlame);
+    const smoke = this.loader.get(assets.particleSmoke);
+    const star = this.loader.get(assets.particleStar);
     this.fireX = width / 2;
     this.fireY = height * 0.74;
     this.drawGround(width, height);
     // Firelight on the ground: the soft light texture squashed into an
     // ellipse, so it has no hard edge.
-    this.glow = new Sprite(this.loader.get(assets.demo.textures.particleLight))
+    this.glow = new Sprite(this.loader.get(assets.particleLight))
       .setAnchor(0.5)
       .setBlendMode(BlendModes.Additive)
       .setPosition(this.fireX, this.fireY + 30);
@@ -170,37 +170,23 @@ class BonfireScene extends Scene {
       this.winds.push(wind);
       this.systems.add(system);
     }
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Campfire',
-      status: 'Four particle layers: smoke, flames, a hot core and embers.',
-      hint: 'Each layer has its own texture, lifetime, size and colour curve. Wind pushes all of them.',
-    });
-    this.panel = mountControlPanel({ title: 'Fire controls' });
-    this.panel.addSlider({
-      label: 'Intensity',
-      min: 0.3,
-      max: 1.6,
-      step: 0.05,
-      value: 1,
-      onChange: value => {
-        this.intensity = value;
-        this.flameRate.value = 42 * value;
-        this.coreRate.value = 28 * value;
-        this.emberRate.value = 5 * value * value;
+      controls: {
+        intensity: slider('Intensity', { min: 0.3, max: 1.6, value: 1, step: 0.05, format: value => value.toFixed(2) }),
+        wind: slider('Wind', { min: -180, max: 180, value: 0, step: 5, format: value => `${value}` }),
       },
-    });
-    this.panel.addSlider({
-      label: 'Wind',
-      min: -180,
-      max: 180,
-      step: 5,
-      value: 0,
-      onChange: value => {
+      onChange: (_key, _value, values) => {
+        const { intensity, wind } = values;
+        this.intensity = intensity;
+        this.flameRate.value = 42 * intensity;
+        this.coreRate.value = 28 * intensity;
+        this.emberRate.value = 5 * intensity * intensity;
         // Light particles drift further than the dense flame body.
-        this.winds[0].accelerationX = value * 0.8;
-        this.winds[1].accelerationX = value * 0.5;
-        this.winds[2].accelerationX = value * 0.3;
-        this.winds[3].accelerationX = value;
+        this.winds[0].accelerationX = wind * 0.8;
+        this.winds[1].accelerationX = wind * 0.5;
+        this.winds[2].accelerationX = wind * 0.3;
+        this.winds[3].accelerationX = wind;
       },
     });
   }
@@ -237,7 +223,6 @@ class BonfireScene extends Scene {
   }
   destroy() {
     this.panel?.dispose();
-    this.hud?.dispose();
     this.ground.destroy();
     this.glow.destroy();
     super.destroy();
diff --git a/examples/particles/bonfire.ts b/examples/particles/bonfire.ts
index c4285ad76..a5b7bb545 100644
--- a/examples/particles/bonfire.ts
+++ b/examples/particles/bonfire.ts
@@ -24,8 +24,9 @@ import {
   ScaleOverLifetime,
   Turbulence,
   VectorRange,
-} from '@codexo/exojs-particles';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { type DemoPanel, demoPanel, slider, type SliderSpec } from '@examples/runtime';
 
 class BonfireScene extends Scene {
   // Back to front: smoke behind the flames, embers in front.
@@ -43,15 +44,14 @@ class BonfireScene extends Scene {
   private elapsed = 0;
   private fireX = 0;
   private fireY = 0;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ intensity: SliderSpec; wind: SliderSpec }>;
 
   override init(): void {
     const app = this.app;
     const { width, height } = app;
-    const flame = this.loader.get(assets.demo.textures.particleFlame);
-    const smoke = this.loader.get(assets.demo.textures.particleSmoke);
-    const star = this.loader.get(assets.demo.textures.particleStar);
+    const flame = this.loader.get(assets.particleFlame);
+    const smoke = this.loader.get(assets.particleSmoke);
+    const star = this.loader.get(assets.particleStar);
 
     this.fireX = width / 2;
     this.fireY = height * 0.74;
@@ -59,7 +59,7 @@ class BonfireScene extends Scene {
 
     // Firelight on the ground: the soft light texture squashed into an
     // ellipse, so it has no hard edge.
-    this.glow = new Sprite(this.loader.get(assets.demo.textures.particleLight))
+    this.glow = new Sprite(this.loader.get(assets.particleLight))
       .setAnchor(0.5)
       .setBlendMode(BlendModes.Additive)
       .setPosition(this.fireX, this.fireY + 30);
@@ -191,37 +191,24 @@ class BonfireScene extends Scene {
       this.systems.add(system);
     }
 
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Campfire',
-      status: 'Four particle layers: smoke, flames, a hot core and embers.',
-      hint: 'Each layer has its own texture, lifetime, size and colour curve. Wind pushes all of them.',
-    });
-    this.panel = mountControlPanel({ title: 'Fire controls' });
-    this.panel.addSlider({
-      label: 'Intensity',
-      min: 0.3,
-      max: 1.6,
-      step: 0.05,
-      value: 1,
-      onChange: value => {
-        this.intensity = value;
-        this.flameRate.value = 42 * value;
-        this.coreRate.value = 28 * value;
-        this.emberRate.value = 5 * value * value;
+      controls: {
+        intensity: slider('Intensity', { min: 0.3, max: 1.6, value: 1, step: 0.05, format: value => value.toFixed(2) }),
+        wind: slider('Wind', { min: -180, max: 180, value: 0, step: 5, format: value => `${value}` }),
       },
-    });
-    this.panel.addSlider({
-      label: 'Wind',
-      min: -180,
-      max: 180,
-      step: 5,
-      value: 0,
-      onChange: value => {
+      onChange: (_key, _value, values) => {
+        const { intensity, wind } = values;
+
+        this.intensity = intensity;
+        this.flameRate.value = 42 * intensity;
+        this.coreRate.value = 28 * intensity;
+        this.emberRate.value = 5 * intensity * intensity;
         // Light particles drift further than the dense flame body.
-        this.winds[0].accelerationX = value * 0.8;
-        this.winds[1].accelerationX = value * 0.5;
-        this.winds[2].accelerationX = value * 0.3;
-        this.winds[3].accelerationX = value;
+        this.winds[0].accelerationX = wind * 0.8;
+        this.winds[1].accelerationX = wind * 0.5;
+        this.winds[2].accelerationX = wind * 0.3;
+        this.winds[3].accelerationX = wind;
       },
     });
   }
@@ -267,7 +254,6 @@ class BonfireScene extends Scene {
 
   override destroy(): void {
     this.panel?.dispose();
-    this.hud?.dispose();
     this.ground.destroy();
     this.glow.destroy();
     super.destroy();
diff --git a/examples/particles/cursor-attractor-particles.js b/examples/particles/cursor-attractor-particles.js
index 6981ae941..348626790 100644
--- a/examples/particles/cursor-attractor-particles.js
+++ b/examples/particles/cursor-attractor-particles.js
@@ -9,9 +9,10 @@ import {
   ParticleSystem,
   RateSpawn,
   RepelFromPoint,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
-// Acceleration magnitude shared by both force modules (units / s²). Only the
+// Acceleration magnitude shared by both force modules (units per second squared). Only the
 // active mode's module carries this strength; the inactive one is held at 0.
 const forceStrength = 700;
 class CursorAttractorParticlesScene extends Scene {
@@ -23,7 +24,7 @@ class CursorAttractorParticlesScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.system = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 32000 });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 32000 });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height / 2);
     this.system.addSpawnModule(
@@ -44,28 +45,22 @@ class CursorAttractorParticlesScene extends Scene {
     this.system.addUpdateModule(this.attractor);
     this.system.addUpdateModule(this.repeller);
     this.system.addUpdateModule(new AlphaFadeOverLifetime());
-    app.input.onPointerMove.add(pointer => {
-      const localX = pointer.x - this.system.position.x;
-      const localY = pointer.y - this.system.position.y;
-      this.attractor.x = localX;
-      this.attractor.y = localY;
-      this.repeller.x = localX;
-      this.repeller.y = localY;
-    });
-    this.hud = mountControls({
-      title: 'Cursor Attractor Particles',
-      controls: [
-        { keys: 'Move', action: 'steer the force field' },
-        { keys: 'Toggle', action: 'switch attract / repel' },
-      ],
-      status: 'Mode: Attract',
-      hint: 'Move the cursor over the canvas to drag the particle field around.',
-    });
-    app.input.onPointerDown.add(() => {
-      this.setMode(this.mode === 'attract' ? 'repel' : 'attract');
-    });
+    this.hud = mountControls({ title: 'Cursor Attractor Particles', status: 'Mode: Attract' });
+    app.input.onPointerMove.add(this.onPointerMove);
+    app.input.onPointerDown.add(this.onPointerDown);
     this.setMode('attract');
   }
+  onPointerMove = pointer => {
+    const localX = pointer.x - this.system.position.x;
+    const localY = pointer.y - this.system.position.y;
+    this.attractor.x = localX;
+    this.attractor.y = localY;
+    this.repeller.x = localX;
+    this.repeller.y = localY;
+  };
+  onPointerDown = () => {
+    this.setMode(this.mode === 'attract' ? 'repel' : 'attract');
+  };
   setMode(mode) {
     this.mode = mode;
     if (mode === 'attract') {
@@ -81,6 +76,12 @@ class CursorAttractorParticlesScene extends Scene {
   draw(context) {
     context.render(this.system);
   }
+  destroy() {
+    this.app.input.onPointerMove.remove(this.onPointerMove);
+    this.app.input.onPointerDown.remove(this.onPointerDown);
+    this.hud.dispose();
+    super.destroy();
+  }
 }
 const app = new Application({
   scenes: { CursorAttractorParticlesScene },
diff --git a/examples/particles/cursor-attractor-particles.ts b/examples/particles/cursor-attractor-particles.ts
index f84e494c5..20ddcdd71 100644
--- a/examples/particles/cursor-attractor-particles.ts
+++ b/examples/particles/cursor-attractor-particles.ts
@@ -8,10 +8,11 @@ import {
   ParticleSystem,
   RateSpawn,
   RepelFromPoint,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
-// Acceleration magnitude shared by both force modules (units / s²). Only the
+// Acceleration magnitude shared by both force modules (units per second squared). Only the
 // active mode's module carries this strength; the inactive one is held at 0.
 const forceStrength = 700;
 
@@ -26,7 +27,7 @@ class CursorAttractorParticlesScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.system = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 32000 });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 32000 });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height / 2);
 
@@ -51,33 +52,27 @@ class CursorAttractorParticlesScene extends Scene {
     this.system.addUpdateModule(this.repeller);
     this.system.addUpdateModule(new AlphaFadeOverLifetime());
 
-    app.input.onPointerMove.add(pointer => {
-      const localX = pointer.x - this.system.position.x;
-      const localY = pointer.y - this.system.position.y;
-
-      this.attractor.x = localX;
-      this.attractor.y = localY;
-      this.repeller.x = localX;
-      this.repeller.y = localY;
-    });
-
-    this.hud = mountControls({
-      title: 'Cursor Attractor Particles',
-      controls: [
-        { keys: 'Move', action: 'steer the force field' },
-        { keys: 'Toggle', action: 'switch attract / repel' },
-      ],
-      status: 'Mode: Attract',
-      hint: 'Move the cursor over the canvas to drag the particle field around.',
-    });
-
-    app.input.onPointerDown.add(() => {
-      this.setMode(this.mode === 'attract' ? 'repel' : 'attract');
-    });
+    this.hud = mountControls({ title: 'Cursor Attractor Particles', status: 'Mode: Attract' });
+    app.input.onPointerMove.add(this.onPointerMove);
+    app.input.onPointerDown.add(this.onPointerDown);
 
     this.setMode('attract');
   }
 
+  private readonly onPointerMove = (pointer: { x: number; y: number }): void => {
+    const localX = pointer.x - this.system.position.x;
+    const localY = pointer.y - this.system.position.y;
+
+    this.attractor.x = localX;
+    this.attractor.y = localY;
+    this.repeller.x = localX;
+    this.repeller.y = localY;
+  };
+
+  private readonly onPointerDown = (): void => {
+    this.setMode(this.mode === 'attract' ? 'repel' : 'attract');
+  };
+
   private setMode(mode: 'attract' | 'repel'): void {
     this.mode = mode;
 
@@ -95,6 +90,13 @@ class CursorAttractorParticlesScene extends Scene {
   override draw(context: RenderingContext): void {
     context.render(this.system);
   }
+
+  override destroy(): void {
+    this.app.input.onPointerMove.remove(this.onPointerMove);
+    this.app.input.onPointerDown.remove(this.onPointerDown);
+    this.hud.dispose();
+    super.destroy();
+  }
 }
 
 const app = new Application({
diff --git a/examples/particles/custom-wgsl-module.js b/examples/particles/custom-wgsl-module.js
index 9befd47b5..6632f99c4 100644
--- a/examples/particles/custom-wgsl-module.js
+++ b/examples/particles/custom-wgsl-module.js
@@ -1,6 +1,7 @@
 // Auto-generated from custom-wgsl-module.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Vector } from '@codexo/exojs';
-import { Constant, particlesExtension, ParticleSystem, RateSpawn, UpdateModule } from '@codexo/exojs-particles';
+import { Constant, particlesExtension, ParticleSystem, RateSpawn, UpdateModule } from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 /** Adds horizontal sway after integration, using the same operation on every backend. */
 class SwayModule extends UpdateModule {
@@ -45,7 +46,7 @@ class CustomWgslModuleScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.system = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 26000 });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 26000 });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height - 60);
     this.system.addSpawnModule(
@@ -57,14 +58,9 @@ class CustomWgslModuleScene extends Scene {
       }),
     );
     this.system.addUpdateModule(new SwayModule(250, 8));
-    this.hud = mountControls({
-      title: 'Custom Particle Module',
-      controls: [{ keys: 'Auto', action: 'CPU / WebGL2 transform feedback / WebGPU compute' }],
-      // GPU vs CPU routing is decided on the first update() once the
-      // backend is known - show "detecting" until then.
-      status: 'Compute path: detecting…',
-      hint: 'SwayModule provides apply(), glsl() and wgsl() with shared uniforms. Inspect the selected simulation path below.',
-    });
+    // The simulation path (CPU, WebGL2 transform feedback or WebGPU compute)
+    // is chosen on the first update, once the backend is known.
+    this.hud = mountControls({ status: 'Simulation: detecting...' });
   }
   update(_delta) {
     this.hud.setStatus(`Simulation: ${this.system.simulationBackend}`);
diff --git a/examples/particles/custom-wgsl-module.ts b/examples/particles/custom-wgsl-module.ts
index bd020c76f..c824283af 100644
--- a/examples/particles/custom-wgsl-module.ts
+++ b/examples/particles/custom-wgsl-module.ts
@@ -8,7 +8,8 @@ import {
   RateSpawn,
   UpdateModule,
   type WgslContribution,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 /** Adds horizontal sway after integration, using the same operation on every backend. */
@@ -63,7 +64,7 @@ class CustomWgslModuleScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.system = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 26000 });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 26000 });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height - 60);
     this.system.addSpawnModule(
@@ -76,14 +77,9 @@ class CustomWgslModuleScene extends Scene {
     );
     this.system.addUpdateModule(new SwayModule(250, 8));
 
-    this.hud = mountControls({
-      title: 'Custom Particle Module',
-      controls: [{ keys: 'Auto', action: 'CPU / WebGL2 transform feedback / WebGPU compute' }],
-      // GPU vs CPU routing is decided on the first update() once the
-      // backend is known - show "detecting" until then.
-      status: 'Compute path: detecting…',
-      hint: 'SwayModule provides apply(), glsl() and wgsl() with shared uniforms. Inspect the selected simulation path below.',
-    });
+    // The simulation path (CPU, WebGL2 transform feedback or WebGPU compute)
+    // is chosen on the first update, once the backend is known.
+    this.hud = mountControls({ status: 'Simulation: detecting...' });
   }
 
   override update(_delta: Seconds): void {
diff --git a/examples/particles/emitter-basics.js b/examples/particles/emitter-basics.js
index 1d4ec68dc..e059e601b 100644
--- a/examples/particles/emitter-basics.js
+++ b/examples/particles/emitter-basics.js
@@ -12,19 +12,18 @@ import {
   Range,
   RateSpawn,
   ScaleOverLifetime,
-} from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class EmitterBasicsScene extends Scene {
   system;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.system = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 4000 });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 4000 });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height - 80);
     // Rate, lifetime, and a cone-shaped velocity spread: a fountain that
-    // shoots upward (-π/2) with a ±36° spread and 280-460 px/s speed.
+    // shoots upward (-pi/2) with a +/-36 degree spread and 280-460 px/s speed.
     this.system.addSpawnModule(
       new RateSpawn({
         rate: new Constant(180),
@@ -46,7 +45,7 @@ class EmitterBasicsScene extends Scene {
         ]),
       ),
     );
-    // Colour gradient over lifetime: white-hot core → orange → deep red, then
+    // Colour gradient over lifetime: white-hot core, then orange, then deep red, then
     // fading to transparent so particles dissolve at the end of their life.
     this.system.addUpdateModule(
       new ColorOverLifetime(
@@ -58,12 +57,6 @@ class EmitterBasicsScene extends Scene {
         ]),
       ),
     );
-    this.hud = mountControls({
-      title: 'Emitter Basics',
-      controls: [{ keys: 'Auto', action: 'continuous fountain emission' }],
-      status: 'Rate 180/s · lifetime 0.6–1.4s · gravity',
-      hint: 'RateSpawn drives emission; ScaleOverLifetime sizes and ColorOverLifetime tints each particle as it ages.',
-    });
   }
   draw(context) {
     context.render(this.system);
diff --git a/examples/particles/emitter-basics.ts b/examples/particles/emitter-basics.ts
index d6163bef8..6d3af8cde 100644
--- a/examples/particles/emitter-basics.ts
+++ b/examples/particles/emitter-basics.ts
@@ -11,23 +11,22 @@ import {
   Range,
   RateSpawn,
   ScaleOverLifetime,
-} from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class EmitterBasicsScene extends Scene {
   private system!: ParticleSystem;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const app = this.app;
     const { width, height } = app;
 
-    this.system = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 4000 });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 4000 });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height - 80);
 
     // Rate, lifetime, and a cone-shaped velocity spread: a fountain that
-    // shoots upward (-π/2) with a ±36° spread and 280-460 px/s speed.
+    // shoots upward (-pi/2) with a +/-36 degree spread and 280-460 px/s speed.
     this.system.addSpawnModule(
       new RateSpawn({
         rate: new Constant(180),
@@ -52,7 +51,7 @@ class EmitterBasicsScene extends Scene {
       ),
     );
 
-    // Colour gradient over lifetime: white-hot core → orange → deep red, then
+    // Colour gradient over lifetime: white-hot core, then orange, then deep red, then
     // fading to transparent so particles dissolve at the end of their life.
     this.system.addUpdateModule(
       new ColorOverLifetime(
@@ -64,13 +63,6 @@ class EmitterBasicsScene extends Scene {
         ]),
       ),
     );
-
-    this.hud = mountControls({
-      title: 'Emitter Basics',
-      controls: [{ keys: 'Auto', action: 'continuous fountain emission' }],
-      status: 'Rate 180/s · lifetime 0.6–1.4s · gravity',
-      hint: 'RateSpawn drives emission; ScaleOverLifetime sizes and ColorOverLifetime tints each particle as it ages.',
-    });
   }
 
   override draw(context: RenderingContext): void {
diff --git a/examples/particles/fireworks.js b/examples/particles/fireworks.js
index 5baa9d64e..6d1e994a3 100644
--- a/examples/particles/fireworks.js
+++ b/examples/particles/fireworks.js
@@ -27,8 +27,8 @@ import {
   ScaleOverLifetime,
   Turbulence,
   VectorRange,
-} from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const random = new Random(2026);
 const autoLaunchInterval = Time.seconds(1.6);
 // Upward launch speed range (px/s, negative = up). Higher = higher apex.
@@ -68,13 +68,11 @@ class FireworksScene extends Scene {
   autoLaunchTimer;
   rocketTexture;
   rockets = [];
-  launchCount = 0;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
-    const star = this.loader.get(assets.demo.textures.particleStar);
-    const light = this.loader.get(assets.demo.textures.particleLight);
+    const star = this.loader.get(assets.particleStar);
+    const light = this.loader.get(assets.particleLight);
     this.canvasSize = new Size(width, height);
     this.rocketTexture = star;
     // 1. Flash: one large, very short-lived glow that sells the detonation.
@@ -111,7 +109,7 @@ class FireworksScene extends Scene {
       position: new Constant(this.burstPosition),
       // A narrow speed band puts the sparks on one expanding shell.
       velocity: ConeDirection.omni(200, 320),
-      scale: new Constant(new Vector(0.1, 0.1)),
+      scale: new Constant(new Vector(0.2, 0.2)),
       tint: new Constant(fireworkColors[0]),
     });
     const sparks = createLayer(star, this.sparkBurst, { capacity: 4096 });
@@ -120,8 +118,8 @@ class FireworksScene extends Scene {
     sparks.addUpdateModule(
       new ScaleOverLifetime(
         new Curve([
-          { t: 0, v: 0.12 },
-          { t: 1, v: 0.04 },
+          { t: 0, v: 0.2 },
+          { t: 1, v: 0.06 },
         ]),
       ),
     );
@@ -140,7 +138,7 @@ class FireworksScene extends Scene {
       lifetime: new Range(2.2, 3.2),
       position: new Constant(this.burstPosition),
       velocity: ConeDirection.omni(15, 80),
-      scale: new Constant(new Vector(0.06, 0.06)),
+      scale: new Constant(new Vector(0.1, 0.1)),
       tint: new Constant(new Color(255, 214, 150)),
     });
     const embers = createLayer(star, this.emberBurst, { capacity: 1024 });
@@ -165,12 +163,6 @@ class FireworksScene extends Scene {
     app.input.onPointerDown.add(this.onPointerDown);
     // Ambient fallback: keep the sky alive even without clicks.
     this.autoLaunchTimer = new Timer(autoLaunchInterval, true);
-    this.hud = mountControls({
-      title: 'Fireworks',
-      controls: [{ keys: 'Click', action: 'launch a rocket' }],
-      status: 'Launched: 0 · in flight: 0',
-      hint: 'Three layers per burst: a short flash, sparks that brake and fall, and slow embers that linger.',
-    });
     this.launchRocket(width * 0.5);
   }
   // Application input outlives the scene, so the handler is removed in destroy().
@@ -188,8 +180,6 @@ class FireworksScene extends Scene {
       color,
       trail: [],
     });
-    this.launchCount++;
-    this.updateStatus();
   }
   detonate(rocket) {
     this.burstPosition.set(rocket.position.x, rocket.position.y);
@@ -201,9 +191,6 @@ class FireworksScene extends Scene {
     this.sparkBurst.reset();
     this.emberBurst.reset();
   }
-  updateStatus() {
-    this.hud.setStatus(`Launched: ${this.launchCount} · in flight: ${this.rockets.length}`);
-  }
   update(delta) {
     if (this.autoLaunchTimer.expired) {
       this.launchRocket(random.next(120, this.canvasSize.width - 120));
@@ -224,7 +211,6 @@ class FireworksScene extends Scene {
         this.detonate(rocket);
         rocket.sprite.destroy();
         this.rockets.splice(i, 1);
-        this.updateStatus();
       }
     }
   }
@@ -250,7 +236,6 @@ class FireworksScene extends Scene {
   }
   destroy() {
     this.app.input.onPointerDown.remove(this.onPointerDown);
-    this.hud.dispose();
     this.trails.destroy();
     for (const rocket of this.rockets) {
       rocket.sprite.destroy();
diff --git a/examples/particles/fireworks.ts b/examples/particles/fireworks.ts
index 5b90d75bb..1c3cbe4ff 100644
--- a/examples/particles/fireworks.ts
+++ b/examples/particles/fireworks.ts
@@ -30,8 +30,8 @@ import {
   ScaleOverLifetime,
   Turbulence,
   VectorRange,
-} from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const random = new Random(2026);
 const autoLaunchInterval = Time.seconds(1.6);
@@ -85,14 +85,12 @@ class FireworksScene extends Scene {
   private autoLaunchTimer!: Timer;
   private rocketTexture!: Texture;
   private rockets: Rocket[] = [];
-  private launchCount = 0;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const app = this.app;
     const { width, height } = app;
-    const star = this.loader.get(assets.demo.textures.particleStar);
-    const light = this.loader.get(assets.demo.textures.particleLight);
+    const star = this.loader.get(assets.particleStar);
+    const light = this.loader.get(assets.particleLight);
 
     this.canvasSize = new Size(width, height);
     this.rocketTexture = star;
@@ -132,7 +130,7 @@ class FireworksScene extends Scene {
       position: new Constant(this.burstPosition),
       // A narrow speed band puts the sparks on one expanding shell.
       velocity: ConeDirection.omni(200, 320),
-      scale: new Constant(new Vector(0.1, 0.1)),
+      scale: new Constant(new Vector(0.2, 0.2)),
       tint: new Constant(fireworkColors[0]),
     });
     const sparks = createLayer(star, this.sparkBurst, { capacity: 4096 });
@@ -141,8 +139,8 @@ class FireworksScene extends Scene {
     sparks.addUpdateModule(
       new ScaleOverLifetime(
         new Curve([
-          { t: 0, v: 0.12 },
-          { t: 1, v: 0.04 },
+          { t: 0, v: 0.2 },
+          { t: 1, v: 0.06 },
         ]),
       ),
     );
@@ -162,7 +160,7 @@ class FireworksScene extends Scene {
       lifetime: new Range(2.2, 3.2),
       position: new Constant(this.burstPosition),
       velocity: ConeDirection.omni(15, 80),
-      scale: new Constant(new Vector(0.06, 0.06)),
+      scale: new Constant(new Vector(0.1, 0.1)),
       tint: new Constant(new Color(255, 214, 150)),
     });
     const embers = createLayer(star, this.emberBurst, { capacity: 1024 });
@@ -192,13 +190,6 @@ class FireworksScene extends Scene {
     // Ambient fallback: keep the sky alive even without clicks.
     this.autoLaunchTimer = new Timer(autoLaunchInterval, true);
 
-    this.hud = mountControls({
-      title: 'Fireworks',
-      controls: [{ keys: 'Click', action: 'launch a rocket' }],
-      status: 'Launched: 0 · in flight: 0',
-      hint: 'Three layers per burst: a short flash, sparks that brake and fall, and slow embers that linger.',
-    });
-
     this.launchRocket(width * 0.5);
   }
 
@@ -222,9 +213,6 @@ class FireworksScene extends Scene {
       color,
       trail: [],
     });
-
-    this.launchCount++;
-    this.updateStatus();
   }
 
   private detonate(rocket: Rocket): void {
@@ -238,10 +226,6 @@ class FireworksScene extends Scene {
     this.emberBurst.reset();
   }
 
-  private updateStatus(): void {
-    this.hud.setStatus(`Launched: ${this.launchCount} · in flight: ${this.rockets.length}`);
-  }
-
   override update(delta: Seconds): void {
     if (this.autoLaunchTimer.expired) {
       this.launchRocket(random.next(120, this.canvasSize.width - 120));
@@ -266,7 +250,6 @@ class FireworksScene extends Scene {
         this.detonate(rocket);
         rocket.sprite.destroy();
         this.rockets.splice(i, 1);
-        this.updateStatus();
       }
     }
   }
@@ -301,7 +284,6 @@ class FireworksScene extends Scene {
 
   override destroy(): void {
     this.app.input.onPointerDown.remove(this.onPointerDown);
-    this.hud.dispose();
     this.trails.destroy();
 
     for (const rocket of this.rockets) {
diff --git a/examples/particles/gpu-particles.js b/examples/particles/gpu-particles.js
index e8851caf9..09ee94502 100644
--- a/examples/particles/gpu-particles.js
+++ b/examples/particles/gpu-particles.js
@@ -9,8 +9,9 @@ import {
   ParticleSystem,
   Range,
   RateSpawn,
-} from '@codexo/exojs-particles';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, slider } from '@examples/runtime';
 // Illustrative loads for the two GPU backends; measure on target hardware.
 const budgets = {
   webgpu: { capacity: 320_000, rate: 75_000 },
@@ -18,7 +19,7 @@ const budgets = {
 };
 class GpuParticlesScene extends Scene {
   system;
-  hud;
+  panel;
   capacity = 0;
   spawnRate;
   frameIntervalMs = 0;
@@ -30,7 +31,7 @@ class GpuParticlesScene extends Scene {
     const { capacity, rate } = isWebGpu ? budgets.webgpu : budgets.webgl2;
     this.capacity = capacity;
     this.spawnRate = new Constant(rate);
-    this.system = new ParticleSystem(this.loader.get('image/particle-light.png'), { capacity });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height - 80);
     this.system.addSpawnModule(
@@ -43,17 +44,18 @@ class GpuParticlesScene extends Scene {
     );
     this.system.addUpdateModule(new ApplyForce(0, 320));
     this.system.addUpdateModule(new AlphaFadeOverLifetime());
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Particle Capacity',
-      hint: 'Quad simulation uses WebGPU compute or WebGL2 transform feedback when eligible. Frame interval includes the whole application.',
-    });
-    mountControlPanel({ title: 'Load' }).addSlider({
-      label: 'Spawn / second',
-      min: 0,
-      max: rate,
-      step: isWebGpu ? 5000 : 250,
-      value: rate,
-      onChange: value => {
+      controls: {
+        rate: slider('Spawn / second', {
+          min: 0,
+          max: rate,
+          value: rate,
+          step: isWebGpu ? 5000 : 250,
+          format: value => value.toLocaleString(),
+        }),
+      },
+      onChange: (_key, value) => {
         this.spawnRate.value = value;
       },
     });
@@ -64,13 +66,17 @@ class GpuParticlesScene extends Scene {
     // slow frame; the raw frame-to-frame delta is what the display actually got.
     const { rawFrameDeltaMs } = this.app.backend.stats;
     this.frameIntervalMs = this.frameIntervalMs * 0.9 + rawFrameDeltaMs * 0.1;
-    this.hud.setStatus(
-      `${this.system.aliveCount.toLocaleString()} live / ${this.capacity.toLocaleString()} cap · ${this.spawnRate.value.toLocaleString()}/s · ${this.frameIntervalMs.toFixed(1)} ms between frames · ${backend}`,
+    this.panel.status(
+      `${this.system.aliveCount.toLocaleString()} live / ${this.capacity.toLocaleString()} cap, ${this.frameIntervalMs.toFixed(1)} ms between frames, ${backend}`,
     );
   }
   draw(context) {
     context.render(this.system);
   }
+  destroy() {
+    this.panel.dispose();
+    super.destroy();
+  }
 }
 const app = new Application({
   scenes: { GpuParticlesScene },
@@ -81,9 +87,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
   extensions: [particlesExtension],
 });
 await app.start(GpuParticlesScene);
diff --git a/examples/particles/gpu-particles.ts b/examples/particles/gpu-particles.ts
index 70af874e0..7f4e66cfd 100644
--- a/examples/particles/gpu-particles.ts
+++ b/examples/particles/gpu-particles.ts
@@ -8,8 +8,9 @@ import {
   ParticleSystem,
   Range,
   RateSpawn,
-} from '@codexo/exojs-particles';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { type DemoPanel, demoPanel, slider, type SliderSpec } from '@examples/runtime';
 
 // Illustrative loads for the two GPU backends; measure on target hardware.
 const budgets = {
@@ -19,7 +20,7 @@ const budgets = {
 
 class GpuParticlesScene extends Scene {
   private system!: ParticleSystem;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ rate: SliderSpec }>;
   private capacity = 0;
   private spawnRate!: Constant<number>;
   private frameIntervalMs = 0;
@@ -33,7 +34,7 @@ class GpuParticlesScene extends Scene {
 
     this.capacity = capacity;
     this.spawnRate = new Constant(rate);
-    this.system = new ParticleSystem(this.loader.get('image/particle-light.png'), { capacity });
+    this.system = new ParticleSystem(this.loader.get(assets.particleLight), { capacity });
     this.systems.add(this.system);
     this.system.setPosition(width / 2, height - 80);
     this.system.addSpawnModule(
@@ -47,17 +48,18 @@ class GpuParticlesScene extends Scene {
     this.system.addUpdateModule(new ApplyForce(0, 320));
     this.system.addUpdateModule(new AlphaFadeOverLifetime());
 
-    this.hud = mountControls({
+    this.panel = demoPanel({
       title: 'Particle Capacity',
-      hint: 'Quad simulation uses WebGPU compute or WebGL2 transform feedback when eligible. Frame interval includes the whole application.',
-    });
-    mountControlPanel({ title: 'Load' }).addSlider({
-      label: 'Spawn / second',
-      min: 0,
-      max: rate,
-      step: isWebGpu ? 5000 : 250,
-      value: rate,
-      onChange: value => {
+      controls: {
+        rate: slider('Spawn / second', {
+          min: 0,
+          max: rate,
+          value: rate,
+          step: isWebGpu ? 5000 : 250,
+          format: value => value.toLocaleString(),
+        }),
+      },
+      onChange: (_key, value) => {
         this.spawnRate.value = value;
       },
     });
@@ -70,14 +72,19 @@ class GpuParticlesScene extends Scene {
     const { rawFrameDeltaMs } = this.app.backend.stats;
 
     this.frameIntervalMs = this.frameIntervalMs * 0.9 + rawFrameDeltaMs * 0.1;
-    this.hud.setStatus(
-      `${this.system.aliveCount.toLocaleString()} live / ${this.capacity.toLocaleString()} cap · ${this.spawnRate.value.toLocaleString()}/s · ${this.frameIntervalMs.toFixed(1)} ms between frames · ${backend}`,
+    this.panel.status(
+      `${this.system.aliveCount.toLocaleString()} live / ${this.capacity.toLocaleString()} cap, ${this.frameIntervalMs.toFixed(1)} ms between frames, ${backend}`,
     );
   }
 
   override draw(context: RenderingContext): void {
     context.render(this.system);
   }
+
+  override destroy(): void {
+    this.panel.dispose();
+    super.destroy();
+  }
 }
 
 const app = new Application({
@@ -89,9 +96,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
   extensions: [particlesExtension],
 });
 
diff --git a/examples/pathfinding/grid-navigation.js b/examples/pathfinding/grid-navigation.js
index 5037f10b7..c8ca22fee 100644
--- a/examples/pathfinding/grid-navigation.js
+++ b/examples/pathfinding/grid-navigation.js
@@ -1,7 +1,7 @@
 // Auto-generated from grid-navigation.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene } from '@codexo/exojs';
-import { GridSpace, Pathfinder } from '@codexo/exojs-pathfinding';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { GridSpace, Pathfinder } from '@codexo/exojs/pathfinding';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 // Click-to-move over a weighted grid. Everything here is plain data: a GridSpace
 // of costs and a Pathfinder, neither of which is a scene node, neither of which
 // is registered with the Application. The Graphics below only *draws* what the
@@ -51,38 +51,44 @@ class GridNavigationScene extends Scene {
   pruning = true;
   agentSize = 1;
   diagonals = 'no-corner-cutting';
-  hud;
+  panel;
   init() {
     this.app.input.onPointerTap.add(pointer => this.applyPaint(pointer.x, pointer.y));
-    this.hud = mountControls({
-      title: 'Grid Navigation',
-      controls: [
-        { keys: 'Click', action: 'set the goal (or paint, see panel)' },
-        { keys: 'panel', action: 'pruning / smoothing / agent size' },
-      ],
-      status: '',
-      hint: 'Painting mud makes the grid non-uniform, which turns jump-point pruning off by itself — the expanded-node counter jumps.',
-    });
-    const panel = mountControlPanel({ title: 'Pathfinding' });
-    panel.addCycle({
-      label: 'Click paints',
-      options: ['goal', 'wall', 'mud'],
-      index: 0,
-      onChange: (_index, value) => (this.paint = value),
-    });
-    panel.addToggle({ label: 'Jump-point pruning', value: true, onChange: value => this.replan(() => (this.pruning = value)) });
-    panel.addToggle({ label: 'Smooth path', value: false, onChange: value => this.replan(() => (this.smooth = value)) });
-    panel.addToggle({ label: '2x2 agent', value: false, onChange: value => this.replan(() => (this.agentSize = value ? 2 : 1)) });
-    panel.addCycle({
-      label: 'Diagonals',
-      options: ['no-corner-cutting', 'never', 'always'],
-      index: 0,
-      // The diagonal policy is fixed at construction, so changing it rebuilds
-      // the window from the costs the current one holds.
-      onChange: (_index, value) => {
-        const previous = this.grid;
-        this.grid = GridSpace.from(COLUMNS, ROWS, (x, y) => previous.costAt(x, y), { cellSize: CELL, diagonals: value });
-        this.diagonals = value;
+    this.panel = demoPanel({
+      title: 'Pathfinding',
+      controls: {
+        paint: choice('Click paints', ['goal', 'wall', 'mud']),
+        pruning: toggle('Jump-point pruning', true),
+        smooth: toggle('Smooth path', false),
+        bigAgent: toggle('2x2 agent', false),
+        diagonals: choice('Diagonals', ['no-corner-cutting', 'never', 'always']),
+      },
+      onChange: (key, value) => {
+        switch (key) {
+          case 'paint':
+            this.paint = value;
+            return;
+          case 'pruning':
+            this.pruning = value;
+            break;
+          case 'smooth':
+            this.smooth = value;
+            break;
+          case 'bigAgent':
+            this.agentSize = value ? 2 : 1;
+            break;
+          case 'diagonals': {
+            // The diagonal policy is fixed at construction, so changing it
+            // rebuilds the window from the costs the current one holds.
+            const previous = this.grid;
+            this.grid = GridSpace.from(COLUMNS, ROWS, (x, y) => previous.costAt(x, y), {
+              cellSize: CELL,
+              diagonals: value,
+            });
+            this.diagonals = value;
+            break;
+          }
+        }
         this.replan();
       },
     });
@@ -162,10 +168,14 @@ class GridNavigationScene extends Scene {
     this.waypoint = 0;
     const { status, cost, nodes, expandedNodes } = this.result;
     const pruned = this.pruning && this.grid.pruning(this.agentSize) !== null;
-    this.hud.setStatus(
-      `${status} · cost ${cost.toFixed(1)} · ${nodes.length} waypoints · ${expandedNodes} nodes expanded · ${pruned ? 'jump-point' : 'plain A*'} · ${this.diagonals}`,
+    this.panel?.status(
+      `${status} · cost ${cost.toFixed(1)} · ${nodes.length} waypoints · ${expandedNodes} nodes expanded · ${pruned ? 'jump-point' : 'plain A*'}`,
     );
   }
+  destroy() {
+    this.panel?.dispose();
+    super.destroy();
+  }
   drawTerrain() {
     this.terrain.clear();
     for (let y = 0; y < ROWS; y++) {
diff --git a/examples/pathfinding/grid-navigation.ts b/examples/pathfinding/grid-navigation.ts
index 5201e855e..d88d137d5 100644
--- a/examples/pathfinding/grid-navigation.ts
+++ b/examples/pathfinding/grid-navigation.ts
@@ -1,6 +1,6 @@
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, type Seconds } from '@codexo/exojs';
-import { type DiagonalPolicy, GridSpace, Pathfinder, type PathResult } from '@codexo/exojs-pathfinding';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { type DiagonalPolicy, GridSpace, Pathfinder, type PathResult } from '@codexo/exojs/pathfinding';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 
 // Click-to-move over a weighted grid. Everything here is plain data: a GridSpace
 // of costs and a Pathfinder, neither of which is a scene node, neither of which
@@ -60,43 +60,49 @@ class GridNavigationScene extends Scene {
   private pruning = true;
   private agentSize = 1;
   private diagonals: DiagonalPolicy = 'no-corner-cutting';
-  private hud!: ReturnType<typeof mountControls>;
+  private panel?: ReturnType<typeof demoPanel>;
 
   override init(): void {
     this.app.input.onPointerTap.add(pointer => this.applyPaint(pointer.x, pointer.y));
 
-    this.hud = mountControls({
-      title: 'Grid Navigation',
-      controls: [
-        { keys: 'Click', action: 'set the goal (or paint, see panel)' },
-        { keys: 'panel', action: 'pruning / smoothing / agent size' },
-      ],
-      status: '',
-      hint: 'Painting mud makes the grid non-uniform, which turns jump-point pruning off by itself — the expanded-node counter jumps.',
-    });
-
-    const panel = mountControlPanel({ title: 'Pathfinding' });
+    this.panel = demoPanel({
+      title: 'Pathfinding',
+      controls: {
+        paint: choice('Click paints', ['goal', 'wall', 'mud']),
+        pruning: toggle('Jump-point pruning', true),
+        smooth: toggle('Smooth path', false),
+        bigAgent: toggle('2x2 agent', false),
+        diagonals: choice('Diagonals', ['no-corner-cutting', 'never', 'always']),
+      },
+      onChange: (key, value) => {
+        switch (key) {
+          case 'paint':
+            this.paint = value as PaintMode;
+
+            return;
+          case 'pruning':
+            this.pruning = value as boolean;
+            break;
+          case 'smooth':
+            this.smooth = value as boolean;
+            break;
+          case 'bigAgent':
+            this.agentSize = value ? 2 : 1;
+            break;
+          case 'diagonals': {
+            // The diagonal policy is fixed at construction, so changing it
+            // rebuilds the window from the costs the current one holds.
+            const previous = this.grid;
+
+            this.grid = GridSpace.from(COLUMNS, ROWS, (x, y) => previous.costAt(x, y), {
+              cellSize: CELL,
+              diagonals: value as DiagonalPolicy,
+            });
+            this.diagonals = value as DiagonalPolicy;
+            break;
+          }
+        }
 
-    panel.addCycle({
-      label: 'Click paints',
-      options: ['goal', 'wall', 'mud'],
-      index: 0,
-      onChange: (_index, value) => (this.paint = value as PaintMode),
-    });
-    panel.addToggle({ label: 'Jump-point pruning', value: true, onChange: value => this.replan(() => (this.pruning = value)) });
-    panel.addToggle({ label: 'Smooth path', value: false, onChange: value => this.replan(() => (this.smooth = value)) });
-    panel.addToggle({ label: '2x2 agent', value: false, onChange: value => this.replan(() => (this.agentSize = value ? 2 : 1)) });
-    panel.addCycle({
-      label: 'Diagonals',
-      options: ['no-corner-cutting', 'never', 'always'],
-      index: 0,
-      // The diagonal policy is fixed at construction, so changing it rebuilds
-      // the window from the costs the current one holds.
-      onChange: (_index, value) => {
-        const previous = this.grid;
-
-        this.grid = GridSpace.from(COLUMNS, ROWS, (x, y) => previous.costAt(x, y), { cellSize: CELL, diagonals: value as DiagonalPolicy });
-        this.diagonals = value as DiagonalPolicy;
         this.replan();
       },
     });
@@ -198,11 +204,16 @@ class GridNavigationScene extends Scene {
     const { status, cost, nodes, expandedNodes } = this.result;
     const pruned = this.pruning && this.grid.pruning(this.agentSize) !== null;
 
-    this.hud.setStatus(
-      `${status} · cost ${cost.toFixed(1)} · ${nodes.length} waypoints · ${expandedNodes} nodes expanded · ${pruned ? 'jump-point' : 'plain A*'} · ${this.diagonals}`,
+    this.panel?.status(
+      `${status} · cost ${cost.toFixed(1)} · ${nodes.length} waypoints · ${expandedNodes} nodes expanded · ${pruned ? 'jump-point' : 'plain A*'}`,
     );
   }
 
+  override destroy(): void {
+    this.panel?.dispose();
+    super.destroy();
+  }
+
   private drawTerrain(): void {
     this.terrain.clear();
 
diff --git a/examples/pathfinding/tilemap-navigation.js b/examples/pathfinding/tilemap-navigation.js
index 47aa20c48..db12a680f 100644
--- a/examples/pathfinding/tilemap-navigation.js
+++ b/examples/pathfinding/tilemap-navigation.js
@@ -2,7 +2,6 @@
 import {
   ActionMap,
   Application,
-  Asset,
   BehaviorComponent,
   Color,
   Container,
@@ -15,10 +14,11 @@ import {
   Vector,
   VectorAction,
 } from '@codexo/exojs';
-import { NavigationAgentComponent, TileNavigationSpace, WaypointGraph } from '@codexo/exojs-pathfinding';
-import { CircleShape, KinematicMovementComponent, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs-physics';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileSet } from '@codexo/exojs-tilemap';
-import { TileColliderStreamer } from '@codexo/exojs-tilemap-physics';
+import { NavigationAgentComponent, TileNavigationSpace, WaypointGraph } from '@codexo/exojs/pathfinding';
+import { CircleShape, KinematicMovementComponent, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs/physics';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileSet } from '@codexo/exojs/tilemap';
+import { TileColliderStreamer } from '@codexo/exojs/tilemap-physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 // Navigation, movement and collision over one tile map, with no package
 // depending on another:
@@ -121,7 +121,7 @@ class TilemapNavigationScene extends Scene {
   });
   hud;
   async load() {
-    const texture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const texture = await this.loader.load(assets.mapPackTilesheet);
     const tileset = new TileSet({
       name: 'map',
       texture: new TextureRegion(texture, { x: 0, y: 0, width: texture.width, height: texture.height }),
@@ -230,22 +230,14 @@ class TilemapNavigationScene extends Scene {
     this.patrol.agent.onStatusChange.add(this.onPatrolStatus);
     this.advancePatrol();
     this.app.input.onPointerTap.add(this.onTap);
-    this.hud = mountControls({
-      title: 'Tilemap Navigation',
-      controls: [
-        { keys: 'WASD / Arrows', action: 'move the player' },
-        { keys: 'Click', action: 'open or close a tile' },
-      ],
-      status: '',
-      hint: 'Hunters re-route when you move to another tile or edit the map; the blue patroller follows a waypoint graph.',
-    });
+    this.hud = mountControls();
   }
   update() {
     // Rebuilds only the collider blocks whose tiles changed; the navigation
     // space synchronises itself when the agents read it.
     this.colliders.sync();
     const statuses = this.hunters.map(({ agent }) => agent.status).join(', ');
-    this.hud.setStatus(`hunters: ${statuses} · patrol: ${this.patrol.agent.status} · navigation revision ${this.navigation.revision}`);
+    this.hud.setStatus(`hunters: ${statuses} · patrol: ${this.patrol.agent.status}`);
   }
   draw(context) {
     const overlay = this.overlay;
diff --git a/examples/pathfinding/tilemap-navigation.ts b/examples/pathfinding/tilemap-navigation.ts
index f93094aa5..9dc823f8f 100644
--- a/examples/pathfinding/tilemap-navigation.ts
+++ b/examples/pathfinding/tilemap-navigation.ts
@@ -1,7 +1,6 @@
 import {
   ActionMap,
   Application,
-  Asset,
   BehaviorComponent,
   Color,
   Container,
@@ -15,8 +14,8 @@ import {
   Vector,
   VectorAction,
 } from '@codexo/exojs';
-import { NavigationAgentComponent, type NavigationStatus, TileNavigationSpace, WaypointGraph } from '@codexo/exojs-pathfinding';
-import { CircleShape, KinematicMovementComponent, type PhysicsBody, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs-physics';
+import { NavigationAgentComponent, type NavigationStatus, TileNavigationSpace, WaypointGraph } from '@codexo/exojs/pathfinding';
+import { CircleShape, KinematicMovementComponent, type PhysicsBody, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs/physics';
 import {
   type ResolvedTile,
   TILE_TRANSFORM_IDENTITY,
@@ -25,8 +24,9 @@ import {
   tilemapExtension,
   type TileMapView,
   TileSet,
-} from '@codexo/exojs-tilemap';
-import { TileColliderStreamer } from '@codexo/exojs-tilemap-physics';
+} from '@codexo/exojs/tilemap';
+import { TileColliderStreamer } from '@codexo/exojs/tilemap-physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 // Navigation, movement and collision over one tile map, with no package
@@ -149,7 +149,7 @@ class TilemapNavigationScene extends Scene {
   private hud!: ReturnType<typeof mountControls>;
 
   override async load(): Promise<void> {
-    const texture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const texture = await this.loader.load(assets.mapPackTilesheet);
     const tileset = new TileSet({
       name: 'map',
       texture: new TextureRegion(texture, { x: 0, y: 0, width: texture.width, height: texture.height }),
@@ -274,15 +274,7 @@ class TilemapNavigationScene extends Scene {
     this.advancePatrol();
 
     this.app.input.onPointerTap.add(this.onTap);
-    this.hud = mountControls({
-      title: 'Tilemap Navigation',
-      controls: [
-        { keys: 'WASD / Arrows', action: 'move the player' },
-        { keys: 'Click', action: 'open or close a tile' },
-      ],
-      status: '',
-      hint: 'Hunters re-route when you move to another tile or edit the map; the blue patroller follows a waypoint graph.',
-    });
+    this.hud = mountControls();
   }
 
   override update(): void {
@@ -292,7 +284,7 @@ class TilemapNavigationScene extends Scene {
 
     const statuses = this.hunters.map(({ agent }) => agent.status).join(', ');
 
-    this.hud.setStatus(`hunters: ${statuses} · patrol: ${this.patrol.agent.status} · navigation revision ${this.navigation.revision}`);
+    this.hud.setStatus(`hunters: ${statuses} · patrol: ${this.patrol.agent.status}`);
   }
 
   override draw(context: RenderingContext): void {
diff --git a/examples/performance/backend-comparison.js b/examples/performance/backend-comparison.js
index 7f8090d00..1bd6852b7 100644
--- a/examples/performance/backend-comparison.js
+++ b/examples/performance/backend-comparison.js
@@ -1,7 +1,7 @@
 // Auto-generated from backend-comparison.ts - edit the .ts source, not this file.
 import { Application, Capabilities, Color, Container, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite, Texture } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
-import { mountControls } from '@examples/runtime';
+import { choice, demoPanel, slider } from '@examples/runtime';
 const MAX_SPRITES = 2400;
 const COUNT_STEP = 400;
 let spriteCount = 800;
@@ -33,7 +33,7 @@ class BatchingScene extends Scene {
   layer;
   sprites = [];
   textures = [];
-  hud;
+  panel;
   init() {
     this.layer = new Container();
     this.addChild(this.layer);
@@ -47,41 +47,38 @@ class BatchingScene extends Scene {
       this.layer.addChild(sprite);
       this.sprites.push(sprite);
     }
-    this.hud = mountControls({
-      title: 'Sprite Batching Laboratory',
+    // Keys and panel share one state; changing the backend rebuilds the whole
+    // application, which mounts a fresh panel from the same module state.
+    this.panel = demoPanel({
+      title: 'Workload',
       corner: 'top-right',
-      controls: [
-        { keys: 'Up / Down', action: 'change visible sprite count' },
-        { keys: 'T', action: 'use one or four textures' },
-        { keys: 'B', action: 'switch WebGL2 / WebGPU' },
-      ],
-      hint: 'The seeded positions and motion stay the same across settings. The overlay reports this workload, not a general backend benchmark.',
+      controls: {
+        count: slider('Sprites', { min: COUNT_STEP, max: MAX_SPRITES, step: COUNT_STEP, value: spriteCount, format: v => v.toFixed(0) }),
+        textures: choice('Textures', ['1', '4'], textureCount === 1 ? '1' : '4'),
+        backend: choice('Backend', ['webgl2', 'webgpu'], backendType),
+      },
+      onChange: (_key, _value, values) => {
+        spriteCount = values.count;
+        textureCount = Number(values.textures);
+        this.sprites.forEach((sprite, index) => {
+          sprite.visible = index < spriteCount;
+          sprite.setTexture(this.textures[index % textureCount]);
+        });
+        if (values.backend === backendType) {
+          return;
+        }
+        if (values.backend === 'webgpu' && !webGpuAvailable) {
+          this.panel.set('backend', 'webgl2');
+          this.panel.status('No WebGPU adapter: staying on WebGL2.');
+          return;
+        }
+        void boot(values.backend).catch(showStartupError);
+      },
     });
-    this.updateHud();
-    this.inputs.onTrigger(Keyboard.Up, () => this.setCount(Math.min(MAX_SPRITES, spriteCount + COUNT_STEP)));
-    this.inputs.onTrigger(Keyboard.Down, () => this.setCount(Math.max(COUNT_STEP, spriteCount - COUNT_STEP)));
-    this.inputs.onTrigger(Keyboard.T, () => {
-      textureCount = textureCount === 1 ? 4 : 1;
-      this.sprites.forEach((sprite, index) => sprite.setTexture(this.textures[index % textureCount]));
-      this.updateHud();
-    });
-    this.inputs.onTrigger(Keyboard.B, () => {
-      if (!webGpuAvailable) {
-        this.hud.setStatus('WebGPU adapter unavailable; using WebGL2');
-        return;
-      }
-      void boot(backendType === 'webgpu' ? 'webgl2' : 'webgpu').catch(showStartupError);
-    });
-  }
-  setCount(next) {
-    spriteCount = next;
-    this.sprites.forEach((sprite, index) => {
-      sprite.visible = index < spriteCount;
-    });
-    this.updateHud();
-  }
-  updateHud() {
-    this.hud.setStatus(`${backendType} · ${spriteCount} sprites · ${textureCount} texture${textureCount === 1 ? '' : 's'}`);
+    this.inputs.onTrigger(Keyboard.Up, () => this.panel.step('count', 1));
+    this.inputs.onTrigger(Keyboard.Down, () => this.panel.step('count', -1));
+    this.inputs.onTrigger(Keyboard.T, () => this.panel.step('textures'));
+    this.inputs.onTrigger(Keyboard.B, () => this.panel.step('backend'));
   }
   update(_delta) {
     const time = this.app.activeSeconds;
@@ -98,7 +95,7 @@ class BatchingScene extends Scene {
     context.render(this.layer);
   }
   destroy() {
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
     this.textures.forEach(texture => texture.destroy());
   }
diff --git a/examples/performance/backend-comparison.ts b/examples/performance/backend-comparison.ts
index e85d39931..1ef713b9e 100644
--- a/examples/performance/backend-comparison.ts
+++ b/examples/performance/backend-comparison.ts
@@ -12,7 +12,7 @@ import {
   Texture,
 } from '@codexo/exojs';
 import { DebugOverlay } from '@codexo/exojs/debug';
-import { mountControls } from '@examples/runtime';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, slider, type SliderSpec } from '@examples/runtime';
 
 const MAX_SPRITES = 2400;
 const COUNT_STEP = 400;
@@ -49,7 +49,7 @@ class BatchingScene extends Scene {
   private layer!: Container;
   private sprites: Sprite[] = [];
   private textures: Texture[] = [];
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ count: SliderSpec; textures: ChoiceSpec<'1' | '4'>; backend: ChoiceSpec<'webgl2' | 'webgpu'> }>;
 
   override init(): void {
     this.layer = new Container();
@@ -66,45 +66,42 @@ class BatchingScene extends Scene {
       this.sprites.push(sprite);
     }
 
-    this.hud = mountControls({
-      title: 'Sprite Batching Laboratory',
+    // Keys and panel share one state; changing the backend rebuilds the whole
+    // application, which mounts a fresh panel from the same module state.
+    this.panel = demoPanel({
+      title: 'Workload',
       corner: 'top-right',
-      controls: [
-        { keys: 'Up / Down', action: 'change visible sprite count' },
-        { keys: 'T', action: 'use one or four textures' },
-        { keys: 'B', action: 'switch WebGL2 / WebGPU' },
-      ],
-      hint: 'The seeded positions and motion stay the same across settings. The overlay reports this workload, not a general backend benchmark.',
+      controls: {
+        count: slider('Sprites', { min: COUNT_STEP, max: MAX_SPRITES, step: COUNT_STEP, value: spriteCount, format: v => v.toFixed(0) }),
+        textures: choice('Textures', ['1', '4'], textureCount === 1 ? '1' : '4'),
+        backend: choice('Backend', ['webgl2', 'webgpu'], backendType),
+      },
+      onChange: (_key, _value, values) => {
+        spriteCount = values.count;
+        textureCount = Number(values.textures);
+        this.sprites.forEach((sprite, index) => {
+          sprite.visible = index < spriteCount;
+          sprite.setTexture(this.textures[index % textureCount]);
+        });
+
+        if (values.backend === backendType) {
+          return;
+        }
+
+        if (values.backend === 'webgpu' && !webGpuAvailable) {
+          this.panel.set('backend', 'webgl2');
+          this.panel.status('No WebGPU adapter: staying on WebGL2.');
+
+          return;
+        }
+
+        void boot(values.backend).catch(showStartupError);
+      },
     });
-    this.updateHud();
-    this.inputs.onTrigger(Keyboard.Up, () => this.setCount(Math.min(MAX_SPRITES, spriteCount + COUNT_STEP)));
-    this.inputs.onTrigger(Keyboard.Down, () => this.setCount(Math.max(COUNT_STEP, spriteCount - COUNT_STEP)));
-    this.inputs.onTrigger(Keyboard.T, () => {
-      textureCount = textureCount === 1 ? 4 : 1;
-      this.sprites.forEach((sprite, index) => sprite.setTexture(this.textures[index % textureCount]));
-      this.updateHud();
-    });
-    this.inputs.onTrigger(Keyboard.B, () => {
-      if (!webGpuAvailable) {
-        this.hud.setStatus('WebGPU adapter unavailable; using WebGL2');
-
-        return;
-      }
-
-      void boot(backendType === 'webgpu' ? 'webgl2' : 'webgpu').catch(showStartupError);
-    });
-  }
-
-  private setCount(next: number): void {
-    spriteCount = next;
-    this.sprites.forEach((sprite, index) => {
-      sprite.visible = index < spriteCount;
-    });
-    this.updateHud();
-  }
-
-  private updateHud(): void {
-    this.hud.setStatus(`${backendType} · ${spriteCount} sprites · ${textureCount} texture${textureCount === 1 ? '' : 's'}`);
+    this.inputs.onTrigger(Keyboard.Up, () => this.panel.step('count', 1));
+    this.inputs.onTrigger(Keyboard.Down, () => this.panel.step('count', -1));
+    this.inputs.onTrigger(Keyboard.T, () => this.panel.step('textures'));
+    this.inputs.onTrigger(Keyboard.B, () => this.panel.step('backend'));
   }
 
   override update(_delta: Seconds): void {
@@ -125,7 +122,7 @@ class BatchingScene extends Scene {
   }
 
   override destroy(): void {
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
     this.textures.forEach(texture => texture.destroy());
   }
diff --git a/examples/performance/particle-stress.js b/examples/performance/particle-stress.js
index 5bd70ca69..faf81018c 100644
--- a/examples/performance/particle-stress.js
+++ b/examples/performance/particle-stress.js
@@ -12,7 +12,7 @@ import {
   ScaleOverLifetime,
   UpdateModule,
   VectorRange,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
 class TintCycle extends UpdateModule {
   palette;
   next = 0;
diff --git a/examples/performance/particle-stress.ts b/examples/performance/particle-stress.ts
index efe371bd4..ed8b3353b 100644
--- a/examples/performance/particle-stress.ts
+++ b/examples/performance/particle-stress.ts
@@ -12,7 +12,7 @@ import {
   ScaleOverLifetime,
   UpdateModule,
   VectorRange,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
 
 /** One emitter's tuning, as `buildSystem` reads it. */
 interface EmitterConfig {
diff --git a/examples/physics/character-movement.js b/examples/physics/character-movement.js
index 343e8f401..67846e30c 100644
--- a/examples/physics/character-movement.js
+++ b/examples/physics/character-movement.js
@@ -13,6 +13,7 @@ import {
   Scene,
   SystemOrder,
 } from '@codexo/exojs';
+import { PhysicsDebugDraw } from '@codexo/exojs/debug';
 import {
   BoxShape,
   CapsuleShape,
@@ -23,8 +24,7 @@ import {
   PhysicsBodyComponent,
   PhysicsWorld,
   PolygonShape,
-} from '@codexo/exojs-physics';
-import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
+} from '@codexo/exojs/physics';
 import { mountControls } from '@examples/runtime';
 // A platformer character on CharacterMovementComponent: it walks along the
 // ground, climbs the slope and the small step, slides off the steep face,
@@ -145,16 +145,7 @@ class CharacterMovementScene extends Scene {
     );
     this.addChild(hero);
     this.debug = new PhysicsDebugDraw(this.app, this.world, { drawShapes: true });
-    this.hud = mountControls({
-      title: 'Character Movement',
-      controls: [
-        { keys: 'A / D', action: 'walk' },
-        { keys: 'Space / W', action: 'jump (once more in the air)' },
-        { keys: 'S', action: 'drop through the one-way platform' },
-      ],
-      status: '',
-      hint: 'Climb the 30° slope and the low step; the steep face and the tall block stop a walk. Ride the moving platforms.',
-    });
+    this.hud = mountControls();
   }
   update() {
     const character = this.character;
@@ -214,7 +205,7 @@ class CharacterMovementScene extends Scene {
     ]) {
       level.addCollider({ shape: new BoxShape(width, height), offset: { x, y } });
     }
-    // A walkable 30° ramp up to a plateau, and a 60° face down the other side.
+    // A walkable 30 degree ramp up to a plateau, and a 60 degree face down the other side.
     const rampRise = Math.tan(Math.PI / 6) * 180;
     const faceRun = rampRise / Math.tan(Math.PI / 3);
     level.addCollider({
diff --git a/examples/physics/character-movement.ts b/examples/physics/character-movement.ts
index 6cd42f70c..371525c70 100644
--- a/examples/physics/character-movement.ts
+++ b/examples/physics/character-movement.ts
@@ -13,6 +13,7 @@ import {
   Scene,
   SystemOrder,
 } from '@codexo/exojs';
+import { PhysicsDebugDraw } from '@codexo/exojs/debug';
 import {
   BoxShape,
   CapsuleShape,
@@ -24,8 +25,7 @@ import {
   PhysicsBodyComponent,
   PhysicsWorld,
   PolygonShape,
-} from '@codexo/exojs-physics';
-import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
+} from '@codexo/exojs/physics';
 import { mountControls } from '@examples/runtime';
 
 // A platformer character on CharacterMovementComponent: it walks along the
@@ -161,16 +161,7 @@ class CharacterMovementScene extends Scene {
     this.addChild(hero);
 
     this.debug = new PhysicsDebugDraw(this.app, this.world, { drawShapes: true });
-    this.hud = mountControls({
-      title: 'Character Movement',
-      controls: [
-        { keys: 'A / D', action: 'walk' },
-        { keys: 'Space / W', action: 'jump (once more in the air)' },
-        { keys: 'S', action: 'drop through the one-way platform' },
-      ],
-      status: '',
-      hint: 'Climb the 30° slope and the low step; the steep face and the tall block stop a walk. Ride the moving platforms.',
-    });
+    this.hud = mountControls();
   }
 
   override update(): void {
@@ -245,7 +236,7 @@ class CharacterMovementScene extends Scene {
       level.addCollider({ shape: new BoxShape(width, height), offset: { x, y } });
     }
 
-    // A walkable 30° ramp up to a plateau, and a 60° face down the other side.
+    // A walkable 30 degree ramp up to a plateau, and a 60 degree face down the other side.
     const rampRise = Math.tan(Math.PI / 6) * 180;
     const faceRun = rampRise / Math.tan(Math.PI / 3);
 
diff --git a/examples/physics/joint-driven-shadows.js b/examples/physics/joint-driven-shadows.js
index b1545ce2c..6388b9fc2 100644
--- a/examples/physics/joint-driven-shadows.js
+++ b/examples/physics/joint-driven-shadows.js
@@ -1,9 +1,7 @@
 // Auto-generated from joint-driven-shadows.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, SystemOrder } from '@codexo/exojs';
-import { LightmapLighting, PhysicsOccluder, PointLight } from '@codexo/exojs-lighting';
-import { BoxShape, CircleShape, PhysicsWorld, RevoluteJoint } from '@codexo/exojs-physics';
-import { mountControls } from '@examples/runtime';
-const toDegrees = radians => Math.round((Math.atan2(Math.sin(radians), Math.cos(radians)) * 180) / Math.PI);
+import { LightmapLighting, PhysicsOccluder, PointLight } from '@codexo/exojs/lighting';
+import { BoxShape, CircleShape, PhysicsWorld, RevoluteJoint } from '@codexo/exojs/physics';
 const makeBar = (width, color) => {
   const bar = new Graphics();
   bar.fillColor = color;
@@ -23,8 +21,6 @@ class JointShadowsScene extends Scene {
   hinge;
   dragging = false;
   targetAngle = 0;
-  hud;
-  statusClock = 0;
   init() {
     this.backdrop.fillColor = new Color(27, 39, 56);
     this.backdrop.drawRectangle(0, 0, 1280, 720);
@@ -66,12 +62,6 @@ class JointShadowsScene extends Scene {
         collideConnected: false,
       }),
     );
-    this.hud = mountControls({
-      title: 'Joint-Driven Shadows',
-      controls: [{ keys: 'Drag', action: 'pull the hinged arm through the light' }],
-      status: 'The collider casts a shadow as its revolute joint moves.',
-      hint: 'PhysicsOccluder includes dynamic bodies here; its static-only default would omit the moving arm.',
-    });
     this.app.input.onPointerDown.add(this.onDown);
     this.app.input.onPointerMove.add(this.onMove);
     this.app.input.onPointerUp.add(this.onEnd);
@@ -85,7 +75,6 @@ class JointShadowsScene extends Scene {
     this.dragging = true;
     this.hinge.enableMotor = true;
     this.onMove(pointer);
-    this.hud.setStatus('Dragging the arm; its physics collider drives the changing shadow.');
   };
   onMove = pointer => {
     if (!this.dragging) {
@@ -93,7 +82,6 @@ class JointShadowsScene extends Scene {
     }
     this.targetAngle = Math.atan2(pointer.y - 220, pointer.x - 650);
     this.endBody.wake();
-    this.hud.setStatus(`Aim ${toDegrees(this.targetAngle)} degrees; arm ${toDegrees(this.endBody.angle)} degrees.`);
   };
   onEnd = () => {
     if (!this.dragging) {
@@ -102,9 +90,8 @@ class JointShadowsScene extends Scene {
     this.dragging = false;
     this.hinge.enableMotor = false;
     this.hinge.motorSpeed = 0;
-    this.hud.setStatus('Released. The hinged arm settles under gravity.');
   };
-  update(delta) {
+  update() {
     if (this.dragging) {
       // The body angle accumulates whole turns while atan2 stays within +-pi:
       // steer by the shortest signed difference, not the raw one.
@@ -112,16 +99,6 @@ class JointShadowsScene extends Scene {
       const error = Math.atan2(Math.sin(difference), Math.cos(difference));
       this.hinge.motorSpeed = Math.max(-6, Math.min(6, error * 10));
     }
-    this.statusClock += delta;
-    if (this.statusClock < 0.25) {
-      return;
-    }
-    this.statusClock = 0;
-    this.hud.setStatus(
-      this.dragging
-        ? `Aim ${toDegrees(this.targetAngle)} degrees; arm ${toDegrees(this.endBody.angle)} degrees.`
-        : `Arm at (${this.endBody.x.toFixed(0)}, ${this.endBody.y.toFixed(0)}). Drag it to change its shadow.`,
-    );
   }
   draw(context) {
     context.render(this.backdrop);
@@ -134,7 +111,6 @@ class JointShadowsScene extends Scene {
     this.app.input.onPointerMove.remove(this.onMove);
     this.app.input.onPointerUp.remove(this.onEnd);
     this.app.input.onPointerCancel.remove(this.onEnd);
-    this.hud?.dispose();
     this.backdrop.destroy();
     this.anchor.destroy();
     this.arm.destroy();
diff --git a/examples/physics/joint-driven-shadows.ts b/examples/physics/joint-driven-shadows.ts
index 9bc3de317..17fd04720 100644
--- a/examples/physics/joint-driven-shadows.ts
+++ b/examples/physics/joint-driven-shadows.ts
@@ -1,18 +1,6 @@
-import {
-  Application,
-  Color,
-  FixedResolutionCanvasSizing,
-  Graphics,
-  type RenderingContext,
-  Scene,
-  type Seconds,
-  SystemOrder,
-} from '@codexo/exojs';
-import { LightmapLighting, PhysicsOccluder, PointLight } from '@codexo/exojs-lighting';
-import { BoxShape, CircleShape, type PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs-physics';
-import { mountControls } from '@examples/runtime';
-
-const toDegrees = (radians: number): number => Math.round((Math.atan2(Math.sin(radians), Math.cos(radians)) * 180) / Math.PI);
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, SystemOrder } from '@codexo/exojs';
+import { LightmapLighting, PhysicsOccluder, PointLight } from '@codexo/exojs/lighting';
+import { BoxShape, CircleShape, type PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs/physics';
 
 const makeBar = (width: number, color: Color): Graphics => {
   const bar = new Graphics();
@@ -35,8 +23,6 @@ class JointShadowsScene extends Scene {
   private hinge!: RevoluteJoint;
   private dragging = false;
   private targetAngle = 0;
-  private hud!: ReturnType<typeof mountControls>;
-  private statusClock = 0;
 
   override init(): void {
     this.backdrop.fillColor = new Color(27, 39, 56);
@@ -84,12 +70,6 @@ class JointShadowsScene extends Scene {
       }),
     );
 
-    this.hud = mountControls({
-      title: 'Joint-Driven Shadows',
-      controls: [{ keys: 'Drag', action: 'pull the hinged arm through the light' }],
-      status: 'The collider casts a shadow as its revolute joint moves.',
-      hint: 'PhysicsOccluder includes dynamic bodies here; its static-only default would omit the moving arm.',
-    });
     this.app.input.onPointerDown.add(this.onDown);
     this.app.input.onPointerMove.add(this.onMove);
     this.app.input.onPointerUp.add(this.onEnd);
@@ -105,7 +85,6 @@ class JointShadowsScene extends Scene {
     this.dragging = true;
     this.hinge.enableMotor = true;
     this.onMove(pointer);
-    this.hud.setStatus('Dragging the arm; its physics collider drives the changing shadow.');
   };
   private readonly onMove = (pointer: { x: number; y: number }): void => {
     if (!this.dragging) {
@@ -114,7 +93,6 @@ class JointShadowsScene extends Scene {
 
     this.targetAngle = Math.atan2(pointer.y - 220, pointer.x - 650);
     this.endBody.wake();
-    this.hud.setStatus(`Aim ${toDegrees(this.targetAngle)} degrees; arm ${toDegrees(this.endBody.angle)} degrees.`);
   };
   private readonly onEnd = (): void => {
     if (!this.dragging) {
@@ -124,10 +102,9 @@ class JointShadowsScene extends Scene {
     this.dragging = false;
     this.hinge.enableMotor = false;
     this.hinge.motorSpeed = 0;
-    this.hud.setStatus('Released. The hinged arm settles under gravity.');
   };
 
-  override update(delta: Seconds): void {
+  override update(): void {
     if (this.dragging) {
       // The body angle accumulates whole turns while atan2 stays within +-pi:
       // steer by the shortest signed difference, not the raw one.
@@ -136,19 +113,6 @@ class JointShadowsScene extends Scene {
 
       this.hinge.motorSpeed = Math.max(-6, Math.min(6, error * 10));
     }
-
-    this.statusClock += delta;
-
-    if (this.statusClock < 0.25) {
-      return;
-    }
-
-    this.statusClock = 0;
-    this.hud.setStatus(
-      this.dragging
-        ? `Aim ${toDegrees(this.targetAngle)} degrees; arm ${toDegrees(this.endBody.angle)} degrees.`
-        : `Arm at (${this.endBody.x.toFixed(0)}, ${this.endBody.y.toFixed(0)}). Drag it to change its shadow.`,
-    );
   }
 
   override draw(context: RenderingContext): void {
@@ -163,7 +127,6 @@ class JointShadowsScene extends Scene {
     this.app.input.onPointerMove.remove(this.onMove);
     this.app.input.onPointerUp.remove(this.onEnd);
     this.app.input.onPointerCancel.remove(this.onEnd);
-    this.hud?.dispose();
     this.backdrop.destroy();
     this.anchor.destroy();
     this.arm.destroy();
diff --git a/examples/physics/kinematic-movement.js b/examples/physics/kinematic-movement.js
index 1fcbcc4e1..b12b4af59 100644
--- a/examples/physics/kinematic-movement.js
+++ b/examples/physics/kinematic-movement.js
@@ -12,8 +12,8 @@ import {
   SystemOrder,
   VectorAction,
 } from '@codexo/exojs';
-import { BoxShape, CircleShape, KinematicMovementComponent, PhysicsBody, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs-physics';
-import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
+import { PhysicsDebugDraw } from '@codexo/exojs/debug';
+import { BoxShape, CircleShape, KinematicMovementComponent, PhysicsBody, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs/physics';
 import { mountControls } from '@examples/runtime';
 // Collision-aware movement for a kinematic body, driven straight from input.
 // The movement casts the body's shape along the requested motion, stops at
@@ -71,12 +71,7 @@ class KinematicMovementScene extends Scene {
     hero.addComponent(new Steering(this.movement, this.controls.move));
     this.addChild(hero);
     this.debug = new PhysicsDebugDraw(this.app, this.world, { drawShapes: true });
-    this.hud = mountControls({
-      title: 'Kinematic Movement',
-      controls: [{ keys: 'WASD / Arrows', action: 'move' }],
-      status: '',
-      hint: 'Push into a wall at an angle to slide along it; drive into a corner of the room to stop there.',
-    });
+    this.hud = mountControls();
   }
   update() {
     const { blocked, contactNormal } = this.movement;
diff --git a/examples/physics/kinematic-movement.ts b/examples/physics/kinematic-movement.ts
index 90777dbb7..a7fa89551 100644
--- a/examples/physics/kinematic-movement.ts
+++ b/examples/physics/kinematic-movement.ts
@@ -12,8 +12,8 @@ import {
   SystemOrder,
   VectorAction,
 } from '@codexo/exojs';
-import { BoxShape, CircleShape, KinematicMovementComponent, PhysicsBody, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs-physics';
-import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
+import { PhysicsDebugDraw } from '@codexo/exojs/debug';
+import { BoxShape, CircleShape, KinematicMovementComponent, PhysicsBody, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs/physics';
 import { mountControls } from '@examples/runtime';
 
 // Collision-aware movement for a kinematic body, driven straight from input.
@@ -83,12 +83,7 @@ class KinematicMovementScene extends Scene {
     this.addChild(hero);
 
     this.debug = new PhysicsDebugDraw(this.app, this.world, { drawShapes: true });
-    this.hud = mountControls({
-      title: 'Kinematic Movement',
-      controls: [{ keys: 'WASD / Arrows', action: 'move' }],
-      status: '',
-      hint: 'Push into a wall at an angle to slide along it; drive into a corner of the room to stop there.',
-    });
+    this.hud = mountControls();
   }
 
   override update(): void {
diff --git a/examples/physics/sprite-follows-body.js b/examples/physics/sprite-follows-body.js
index 1b694249f..2a674d2f5 100644
--- a/examples/physics/sprite-follows-body.js
+++ b/examples/physics/sprite-follows-body.js
@@ -1,17 +1,7 @@
 // Auto-generated from sprite-follows-body.ts - edit the .ts source, not this file.
-import {
-  Application,
-  Asset,
-  Color,
-  FixedResolutionCanvasSizing,
-  Keyboard,
-  Scene,
-  Sprite,
-  Spritesheet,
-  SystemOrder,
-  Vector,
-} from '@codexo/exojs';
-import { BoxShape, MouseJoint, PhysicsWorld } from '@codexo/exojs-physics';
+import { Application, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite, Spritesheet, SystemOrder, Vector } from '@codexo/exojs';
+import { BoxShape, MouseJoint, PhysicsWorld } from '@codexo/exojs/physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 class SpriteFollowsBodyScene extends Scene {
   world;
@@ -19,36 +9,37 @@ class SpriteFollowsBodyScene extends Scene {
   actorBody;
   dragJoint = null;
   floor;
+  floorBody;
   floorY = 0;
   settled = 0;
   hud;
   spritesheetData;
   async load() {
-    this.spritesheetData = await this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data));
+    this.spritesheetData = await this.loader.load(assets.platformerCharactersAtlas);
   }
   init() {
     const app = this.app;
     const { width, height } = app;
-    // Gravity in px/s², +Y down - matches the engine's screen space.
+    // Gravity in px/s^2, +Y down - matches the engine's screen space.
     this.world = new PhysicsWorld({ gravity: { x: 0, y: 1400 }, fixedDelta: app.fixedTimeStep });
     this.systems.add(this.world, { order: SystemOrder.Physics });
-    const characters = new Spritesheet(this.loader.get(assets.demo.spritesheets.platformerCharacters.image), this.spritesheetData);
+    const characters = new Spritesheet(this.loader.get(assets.platformerCharactersImage), this.spritesheetData);
     this.floorY = height - 80;
-    // ── Static floor ──────────────────────────────────────────────────
+    // Static floor.
     // A wide static body. `world.attach` binds it to the floor sprite, so
     // the sprite is positioned from the body (no manual placement needed).
     const floorWidth = width - 120;
     const floorHeight = 48;
-    this.floor = new Sprite(this.loader.get(assets.demo.textures.pixelWhite)).setAnchor(0.5);
+    this.floor = new Sprite(this.loader.get(assets.pixelWhite)).setAnchor(0.5);
     this.floor.width = floorWidth;
     this.floor.height = floorHeight;
     this.floor.tint = new Color(70, 92, 120);
-    this.world.attach(this.floor, {
+    const floorBody = this.world.attach(this.floor, {
       type: 'static',
       position: { x: width / 2, y: this.floorY },
       shape: new BoxShape(floorWidth, floorHeight),
     });
-    // ── Dynamic actor ─────────────────────────────────────────────────
+    // Dynamic actor.
     // A dynamic body dropped from above. Its collider is a box sized to the
     // character art; `world.attach` binds the sprite, so it falls, lands and
     // tracks the body (position + rotation) every fixed step.
@@ -60,26 +51,30 @@ class SpriteFollowsBodyScene extends Scene {
       friction: 0.4,
       restitution: 0.15,
     });
-    this.hud = mountControls({
-      title: 'Drag and Throw Physics',
-      controls: [
-        { keys: 'Drag', action: 'pull and throw the actor' },
-        { keys: 'R', action: 'reset the actor' },
-      ],
-      status: 'Dropping…',
-      hint: 'world.attach binds the sprite to a body. MouseJoint pulls the body, and the sprite follows the simulated transform.',
-    });
+    // Contact begins are rare events - one per landing - so each is logged to
+    // the Output panel with the speed the actor hit the floor at.
+    this.world.onCollisionStart.add(this.onContact);
+    this.floorBody = floorBody;
+    this.hud = mountControls({ status: 'Dropping...' });
     app.input.onPointerDown.add(this.onDown);
     app.input.onPointerMove.add(this.onMove);
     app.input.onPointerUp.add(this.onEnd);
     app.input.onPointerCancel.add(this.onEnd);
     this.inputs.onTrigger(Keyboard.R, this.resetActor);
   }
+  onContact = event => {
+    const bodies = [event.bodyA, event.bodyB];
+    if (bodies.includes(this.actorBody) && bodies.includes(this.floorBody)) {
+      const speed = Math.hypot(this.actorBody.linearVelocityX, this.actorBody.linearVelocityY);
+      console.log(`Contact: actor landed on the floor at ${speed.toFixed(0)} px/s`);
+    }
+  };
   onDown = pointer => {
     if (Math.abs(pointer.x - this.actorBody.x) > 42 || Math.abs(pointer.y - this.actorBody.y) > 55) {
       return;
     }
     this.onEnd();
+    console.log('Grabbed: MouseJoint attached to the actor');
     this.dragJoint = this.world.addJoint(
       new MouseJoint({ body: this.actorBody, target: pointer, hertz: 7, dampingRatio: 0.8, maxForce: 400_000 }),
     );
@@ -95,6 +90,7 @@ class SpriteFollowsBodyScene extends Scene {
     }
     this.world.removeJoint(this.dragJoint);
     this.dragJoint = null;
+    console.log(`Released: thrown at ${Math.hypot(this.actorBody.linearVelocityX, this.actorBody.linearVelocityY).toFixed(0)} px/s`);
   };
   resetActor = () => {
     this.onEnd();
@@ -130,6 +126,7 @@ class SpriteFollowsBodyScene extends Scene {
   }
   destroy() {
     this.onEnd();
+    this.world.onCollisionStart.remove(this.onContact);
     this.app.input.onPointerDown.remove(this.onDown);
     this.app.input.onPointerMove.remove(this.onMove);
     this.app.input.onPointerUp.remove(this.onEnd);
diff --git a/examples/physics/sprite-follows-body.ts b/examples/physics/sprite-follows-body.ts
index 00cba28a0..ef5dd70fa 100644
--- a/examples/physics/sprite-follows-body.ts
+++ b/examples/physics/sprite-follows-body.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   Color,
   FixedResolutionCanvasSizing,
   Keyboard,
@@ -13,7 +12,8 @@ import {
   SystemOrder,
   Vector,
 } from '@codexo/exojs';
-import { BoxShape, MouseJoint, type PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, type CollisionEvent, MouseJoint, type PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 class SpriteFollowsBodyScene extends Scene {
@@ -22,47 +22,46 @@ class SpriteFollowsBodyScene extends Scene {
   private actorBody!: PhysicsBody;
   private dragJoint: MouseJoint | null = null;
   private floor!: Sprite;
+  private floorBody!: PhysicsBody;
   private floorY = 0;
   private settled = 0;
   private hud!: ReturnType<typeof mountControls>;
   private spritesheetData!: SpritesheetData;
 
   override async load(): Promise<void> {
-    this.spritesheetData = (await this.loader.load(
-      Asset.type('json', assets.demo.spritesheets.platformerCharacters.data),
-    )) as SpritesheetData;
+    this.spritesheetData = (await this.loader.load(assets.platformerCharactersAtlas)) as SpritesheetData;
   }
 
   override init(): void {
     const app = this.app;
     const { width, height } = app;
 
-    // Gravity in px/s², +Y down - matches the engine's screen space.
+    // Gravity in px/s^2, +Y down - matches the engine's screen space.
     this.world = new PhysicsWorld({ gravity: { x: 0, y: 1400 }, fixedDelta: app.fixedTimeStep });
     this.systems.add(this.world, { order: SystemOrder.Physics });
 
-    const characters = new Spritesheet(this.loader.get(assets.demo.spritesheets.platformerCharacters.image), this.spritesheetData);
+    const characters = new Spritesheet(this.loader.get(assets.platformerCharactersImage), this.spritesheetData);
 
     this.floorY = height - 80;
 
-    // ── Static floor ──────────────────────────────────────────────────
+    // Static floor.
     // A wide static body. `world.attach` binds it to the floor sprite, so
     // the sprite is positioned from the body (no manual placement needed).
     const floorWidth = width - 120;
     const floorHeight = 48;
 
-    this.floor = new Sprite(this.loader.get(assets.demo.textures.pixelWhite)).setAnchor(0.5);
+    this.floor = new Sprite(this.loader.get(assets.pixelWhite)).setAnchor(0.5);
     this.floor.width = floorWidth;
     this.floor.height = floorHeight;
     this.floor.tint = new Color(70, 92, 120);
 
-    this.world.attach(this.floor, {
+    const floorBody = this.world.attach(this.floor, {
       type: 'static',
       position: { x: width / 2, y: this.floorY },
       shape: new BoxShape(floorWidth, floorHeight),
     });
 
-    // ── Dynamic actor ─────────────────────────────────────────────────
+    // Dynamic actor.
     // A dynamic body dropped from above. Its collider is a box sized to the
     // character art; `world.attach` binds the sprite, so it falls, lands and
     // tracks the body (position + rotation) every fixed step.
@@ -75,15 +74,11 @@ class SpriteFollowsBodyScene extends Scene {
       restitution: 0.15,
     });
 
-    this.hud = mountControls({
-      title: 'Drag and Throw Physics',
-      controls: [
-        { keys: 'Drag', action: 'pull and throw the actor' },
-        { keys: 'R', action: 'reset the actor' },
-      ],
-      status: 'Dropping…',
-      hint: 'world.attach binds the sprite to a body. MouseJoint pulls the body, and the sprite follows the simulated transform.',
-    });
+    // Contact begins are rare events - one per landing - so each is logged to
+    // the Output panel with the speed the actor hit the floor at.
+    this.world.onCollisionStart.add(this.onContact);
+    this.floorBody = floorBody;
+    this.hud = mountControls({ status: 'Dropping...' });
     app.input.onPointerDown.add(this.onDown);
     app.input.onPointerMove.add(this.onMove);
     app.input.onPointerUp.add(this.onEnd);
@@ -91,12 +86,23 @@ class SpriteFollowsBodyScene extends Scene {
     this.inputs.onTrigger(Keyboard.R, this.resetActor);
   }
 
+  private readonly onContact = (event: CollisionEvent): void => {
+    const bodies = [event.bodyA, event.bodyB];
+
+    if (bodies.includes(this.actorBody) && bodies.includes(this.floorBody)) {
+      const speed = Math.hypot(this.actorBody.linearVelocityX, this.actorBody.linearVelocityY);
+
+      console.log(`Contact: actor landed on the floor at ${speed.toFixed(0)} px/s`);
+    }
+  };
+
   private readonly onDown = (pointer: { x: number; y: number }): void => {
     if (Math.abs(pointer.x - this.actorBody.x) > 42 || Math.abs(pointer.y - this.actorBody.y) > 55) {
       return;
     }
 
     this.onEnd();
+    console.log('Grabbed: MouseJoint attached to the actor');
     this.dragJoint = this.world.addJoint(
       new MouseJoint({ body: this.actorBody, target: pointer, hertz: 7, dampingRatio: 0.8, maxForce: 400_000 }),
     );
@@ -115,6 +121,7 @@ class SpriteFollowsBodyScene extends Scene {
 
     this.world.removeJoint(this.dragJoint);
     this.dragJoint = null;
+    console.log(`Released: thrown at ${Math.hypot(this.actorBody.linearVelocityX, this.actorBody.linearVelocityY).toFixed(0)} px/s`);
   };
 
   private readonly resetActor = (): void => {
@@ -158,6 +165,7 @@ class SpriteFollowsBodyScene extends Scene {
 
   override destroy(): void {
     this.onEnd();
+    this.world.onCollisionStart.remove(this.onContact);
     this.app.input.onPointerDown.remove(this.onDown);
     this.app.input.onPointerMove.remove(this.onMove);
     this.app.input.onPointerUp.remove(this.onEnd);
diff --git a/examples/physics/tiled-map-physics-actor.js b/examples/physics/tiled-map-physics-actor.js
index 7a0d80df3..0423aa26f 100644
--- a/examples/physics/tiled-map-physics-actor.js
+++ b/examples/physics/tiled-map-physics-actor.js
@@ -1,17 +1,17 @@
 // Auto-generated from tiled-map-physics-actor.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Spritesheet, SystemOrder, Vector } from '@codexo/exojs';
-import { BoxShape, PhysicsWorld } from '@codexo/exojs-physics';
-import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
+import { PhysicsDebugDraw } from '@codexo/exojs/debug';
+import { BoxShape, PhysicsWorld } from '@codexo/exojs/physics';
+import { buildObjectLayerColliders } from '@codexo/exojs/tilemap-physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import { buildObjectLayerColliders } from '@codexo/exojs-tilemap-physics';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, toggle } from '@examples/runtime';
 class TiledMapPhysicsActorScene extends Scene {
   world;
   mapNode;
   actor;
   actorBody;
   debug;
-  hud;
   panel;
   showOutlines = false;
   settled = 0;
@@ -20,9 +20,9 @@ class TiledMapPhysicsActorScene extends Scene {
   spritesheetData;
   async load() {
     const [map, charactersTexture, spritesheetData] = await Promise.all([
-      this.loader.load(Asset.type('tileMap', 'json/maps/physics-room.tmj')),
-      this.loader.load(Asset.type('texture', assets.demo.spritesheets.platformerCharacters.image)),
-      this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data)),
+      this.loader.load(Asset.type('tileMap', assets.physicsRoomMap.source)),
+      this.loader.load(assets.platformerCharactersImage),
+      this.loader.load(assets.platformerCharactersAtlas),
     ]);
     this.map = map;
     this.charactersTexture = charactersTexture;
@@ -36,7 +36,7 @@ class TiledMapPhysicsActorScene extends Scene {
     if (!collision) {
       throw new Error('physics-room.tmj needs a Collision object layer.');
     }
-    const colliders = buildObjectLayerColliders(this.world, collision, { friction: 0.7, restitution: 0.05 });
+    buildObjectLayerColliders(this.world, collision, { friction: 0.7, restitution: 0.05 });
     const characters = new Spritesheet(this.charactersTexture, this.spritesheetData);
     this.actor = characters.getFrameSprite('character_green_front').setAnchor(0.5);
     this.actorBody = this.world.attach(this.actor, {
@@ -48,17 +48,10 @@ class TiledMapPhysicsActorScene extends Scene {
     });
     this.actorBody.applyImpulse(2600, 0);
     this.debug = new PhysicsDebugDraw(this.app, this.world, { drawShapes: true, drawCenters: true });
-    this.hud = mountControls({
-      title: 'Tiled Collision Map',
-      controls: [{ keys: 'Panel', action: 'toggle authored collision outlines' }],
-      status: `${colliders.length} static colliders from the loaded Tiled map`,
-      hint: 'buildObjectLayerColliders() turns rectangles placed in the .tmj Collision layer into static physics bodies.',
-    });
-    this.panel = mountControlPanel({ title: 'Collision' });
-    this.panel.addToggle({
-      label: 'Show outlines',
-      value: false,
-      onChange: value => {
+    this.panel = demoPanel({
+      title: 'Collision',
+      controls: { outlines: toggle('Show outlines', false) },
+      onChange: (_key, value) => {
         this.showOutlines = value;
       },
     });
@@ -85,7 +78,6 @@ class TiledMapPhysicsActorScene extends Scene {
     }
   }
   destroy() {
-    this.hud?.dispose();
     this.panel?.dispose();
     this.debug?.destroy();
     this.mapNode?.destroy();
@@ -98,6 +90,5 @@ const app = new Application({
   canvas: { width: 1280, height: 704, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(38, 46, 66),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 await app.start(TiledMapPhysicsActorScene);
diff --git a/examples/physics/tiled-map-physics-actor.ts b/examples/physics/tiled-map-physics-actor.ts
index 82a22ca62..ace4a1e9b 100644
--- a/examples/physics/tiled-map-physics-actor.ts
+++ b/examples/physics/tiled-map-physics-actor.ts
@@ -13,12 +13,13 @@ import {
   type Texture,
   Vector,
 } from '@codexo/exojs';
-import { BoxShape, type PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
-import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
+import { PhysicsDebugDraw } from '@codexo/exojs/debug';
+import { BoxShape, type PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
+import type { TileMap } from '@codexo/exojs/tilemap';
+import { buildObjectLayerColliders } from '@codexo/exojs/tilemap-physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import type { TileMap } from '@codexo/exojs-tilemap';
-import { buildObjectLayerColliders } from '@codexo/exojs-tilemap-physics';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, toggle } from '@examples/runtime';
 
 class TiledMapPhysicsActorScene extends Scene {
   private world!: PhysicsWorld;
@@ -26,8 +27,7 @@ class TiledMapPhysicsActorScene extends Scene {
   private actor!: Sprite;
   private actorBody!: PhysicsBody;
   private debug!: PhysicsDebugDraw;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: ReturnType<typeof demoPanel>;
   private showOutlines = false;
   private settled = 0;
   private map!: TileMap;
@@ -36,9 +36,9 @@ class TiledMapPhysicsActorScene extends Scene {
 
   override async load(): Promise<void> {
     const [map, charactersTexture, spritesheetData] = await Promise.all([
-      this.loader.load(Asset.type('tileMap', 'json/maps/physics-room.tmj')),
-      this.loader.load(Asset.type('texture', assets.demo.spritesheets.platformerCharacters.image)),
-      this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data)),
+      this.loader.load(Asset.type('tileMap', assets.physicsRoomMap.source)),
+      this.loader.load(assets.platformerCharactersImage),
+      this.loader.load(assets.platformerCharactersAtlas),
     ]);
     this.map = map;
     this.charactersTexture = charactersTexture;
@@ -56,7 +56,7 @@ class TiledMapPhysicsActorScene extends Scene {
       throw new Error('physics-room.tmj needs a Collision object layer.');
     }
 
-    const colliders = buildObjectLayerColliders(this.world, collision, { friction: 0.7, restitution: 0.05 });
+    buildObjectLayerColliders(this.world, collision, { friction: 0.7, restitution: 0.05 });
 
     const characters = new Spritesheet(this.charactersTexture, this.spritesheetData);
     this.actor = characters.getFrameSprite('character_green_front').setAnchor(0.5);
@@ -70,17 +70,10 @@ class TiledMapPhysicsActorScene extends Scene {
     this.actorBody.applyImpulse(2600, 0);
 
     this.debug = new PhysicsDebugDraw(this.app, this.world, { drawShapes: true, drawCenters: true });
-    this.hud = mountControls({
-      title: 'Tiled Collision Map',
-      controls: [{ keys: 'Panel', action: 'toggle authored collision outlines' }],
-      status: `${colliders.length} static colliders from the loaded Tiled map`,
-      hint: 'buildObjectLayerColliders() turns rectangles placed in the .tmj Collision layer into static physics bodies.',
-    });
-    this.panel = mountControlPanel({ title: 'Collision' });
-    this.panel.addToggle({
-      label: 'Show outlines',
-      value: false,
-      onChange: value => {
+    this.panel = demoPanel({
+      title: 'Collision',
+      controls: { outlines: toggle('Show outlines', false) },
+      onChange: (_key, value) => {
         this.showOutlines = value;
       },
     });
@@ -113,7 +106,6 @@ class TiledMapPhysicsActorScene extends Scene {
   }
 
   override destroy(): void {
-    this.hud?.dispose();
     this.panel?.dispose();
     this.debug?.destroy();
     this.mapNode?.destroy();
@@ -127,7 +119,6 @@ const app = new Application({
   canvas: { width: 1280, height: 704, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(38, 46, 66),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(TiledMapPhysicsActorScene);
diff --git a/examples/render-targets/bloom-lite.js b/examples/render-targets/bloom-lite.js
index e0ba98da7..2bf8a4647 100644
--- a/examples/render-targets/bloom-lite.js
+++ b/examples/render-targets/bloom-lite.js
@@ -12,6 +12,7 @@ import {
   Scene,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class BloomLiteScene extends Scene {
   baseRt;
   glowRt;
@@ -28,7 +29,7 @@ class BloomLiteScene extends Scene {
     this.baseRt = new RenderTexture(width, height);
     this.glowRt = new RenderTexture(width, height);
     this.blurredRt = new RenderTexture(width, height);
-    this.bunny = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(1.9);
+    this.bunny = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(1.9);
     this.baseSprite = new Sprite(this.baseRt);
     this.glowSprite = new Sprite(this.blurredRt).setTint(new Color(255, 255, 255, 0.8)).setBlendMode(BlendModes.Additive);
     this.blur = new BlurFilter({ strength: 5 });
@@ -88,8 +89,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(BloomLiteScene);
diff --git a/examples/render-targets/bloom-lite.ts b/examples/render-targets/bloom-lite.ts
index efbff5a27..6fd6c1185 100644
--- a/examples/render-targets/bloom-lite.ts
+++ b/examples/render-targets/bloom-lite.ts
@@ -13,6 +13,7 @@ import {
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class BloomLiteScene extends Scene {
   private baseRt!: RenderTexture;
@@ -32,7 +33,7 @@ class BloomLiteScene extends Scene {
     this.baseRt = new RenderTexture(width, height);
     this.glowRt = new RenderTexture(width, height);
     this.blurredRt = new RenderTexture(width, height);
-    this.bunny = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(1.9);
+    this.bunny = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(1.9);
     this.baseSprite = new Sprite(this.baseRt);
     this.glowSprite = new Sprite(this.blurredRt).setTint(new Color(255, 255, 255, 0.8)).setBlendMode(BlendModes.Additive);
     this.blur = new BlurFilter({ strength: 5 });
@@ -97,9 +98,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(BloomLiteScene);
diff --git a/examples/render-targets/color-pipeline.js b/examples/render-targets/color-pipeline.js
index 068443624..ca8fd2420 100644
--- a/examples/render-targets/color-pipeline.js
+++ b/examples/render-targets/color-pipeline.js
@@ -58,7 +58,7 @@ class ColorPipelineScene extends Scene {
   nodes = [];
   textures = [];
   labels = [];
-  hud;
+  hud = null;
   numericTarget = null;
   srgbTarget = null;
   hdrTarget = null;
@@ -174,21 +174,17 @@ class ColorPipelineScene extends Scene {
       this.label('RGBA16F are not all supported here.', c2, r1 + 113);
       this.label('The SDR panels are unaffected.', c2, r1 + 150);
     }
-    this.hud = mountControls({
-      title: 'Colour Pipeline',
-      corner: 'top-left',
-      controls: this.hdrSupported ? [{ keys: 'Space', action: 'HDR panel: clamp or Reinhard' }] : [],
-      status: this.hdrSupported ? `HDR panel: ${TONE_MAPPINGS[this.toneIndex]}` : 'HDR panel unavailable',
-      hint: 'Colour blends in linear light and is encoded once at output; data stays numeric.',
-    });
     if (this.hdrSupported) {
-      this.inputs.onTrigger(Keyboard.Space, () => {
-        this.toneIndex = (this.toneIndex + 1) % TONE_MAPPINGS.length;
-        this.hud.setStatus(`HDR panel: ${TONE_MAPPINGS[this.toneIndex]}`);
-        void this.readHdr();
-      });
+      this.hud = mountControls({ title: 'Colour Pipeline', corner: 'top-left', status: `HDR panel: ${TONE_MAPPINGS[this.toneIndex]}` });
+      this.inputs.onTrigger(Keyboard.Space, this.cycleTone);
+      this.app.input.onPointerTap.add(this.cycleTone);
     }
   }
+  cycleTone = () => {
+    this.toneIndex = (this.toneIndex + 1) % TONE_MAPPINGS.length;
+    this.hud?.setStatus(`HDR panel: ${TONE_MAPPINGS[this.toneIndex]}`);
+    void this.readHdr();
+  };
   async readbacks() {
     const rendering = this.app.rendering;
     const numeric = this.numericTarget;
@@ -245,6 +241,7 @@ class ColorPipelineScene extends Scene {
     }
   }
   destroy() {
+    this.app.input.onPointerTap.remove(this.cycleTone);
     this.hud?.dispose();
     this.numericTarget?.destroy();
     this.srgbTarget?.destroy();
diff --git a/examples/render-targets/color-pipeline.ts b/examples/render-targets/color-pipeline.ts
index 13bfadd94..bd49bf837 100644
--- a/examples/render-targets/color-pipeline.ts
+++ b/examples/render-targets/color-pipeline.ts
@@ -73,7 +73,7 @@ class ColorPipelineScene extends Scene {
   private readonly nodes: RenderNode[] = [];
   private readonly textures: Texture[] = [];
   private readonly labels: Text[] = [];
-  private hud!: ReturnType<typeof mountControls>;
+  private hud: ReturnType<typeof mountControls> | null = null;
 
   private numericTarget: RenderTexture | null = null;
   private srgbTarget: RenderTexture | null = null;
@@ -207,23 +207,19 @@ class ColorPipelineScene extends Scene {
       this.label('The SDR panels are unaffected.', c2, r1 + 150);
     }
 
-    this.hud = mountControls({
-      title: 'Colour Pipeline',
-      corner: 'top-left',
-      controls: this.hdrSupported ? [{ keys: 'Space', action: 'HDR panel: clamp or Reinhard' }] : [],
-      status: this.hdrSupported ? `HDR panel: ${TONE_MAPPINGS[this.toneIndex]}` : 'HDR panel unavailable',
-      hint: 'Colour blends in linear light and is encoded once at output; data stays numeric.',
-    });
-
     if (this.hdrSupported) {
-      this.inputs.onTrigger(Keyboard.Space, () => {
-        this.toneIndex = (this.toneIndex + 1) % TONE_MAPPINGS.length;
-        this.hud.setStatus(`HDR panel: ${TONE_MAPPINGS[this.toneIndex]}`);
-        void this.readHdr();
-      });
+      this.hud = mountControls({ title: 'Colour Pipeline', corner: 'top-left', status: `HDR panel: ${TONE_MAPPINGS[this.toneIndex]}` });
+      this.inputs.onTrigger(Keyboard.Space, this.cycleTone);
+      this.app.input.onPointerTap.add(this.cycleTone);
     }
   }
 
+  private readonly cycleTone = (): void => {
+    this.toneIndex = (this.toneIndex + 1) % TONE_MAPPINGS.length;
+    this.hud?.setStatus(`HDR panel: ${TONE_MAPPINGS[this.toneIndex]}`);
+    void this.readHdr();
+  };
+
   private async readbacks(): Promise<void> {
     const rendering = this.app.rendering;
     const numeric = this.numericTarget!;
@@ -292,6 +288,7 @@ class ColorPipelineScene extends Scene {
   }
 
   override destroy(): void {
+    this.app.input.onPointerTap.remove(this.cycleTone);
     this.hud?.dispose();
     this.numericTarget?.destroy();
     this.srgbTarget?.destroy();
diff --git a/examples/render-targets/mini-map.js b/examples/render-targets/mini-map.js
index 0aabf2a6a..48371c83f 100644
--- a/examples/render-targets/mini-map.js
+++ b/examples/render-targets/mini-map.js
@@ -13,7 +13,6 @@ import {
   Sprite,
   View,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 const WORLD_WIDTH = 3200;
 const WORLD_HEIGHT = 1800;
 const MAP_SIZE = 200;
@@ -59,7 +58,6 @@ class MiniMapScene extends Scene {
   mapCamera;
   mapTexture;
   pipeline;
-  hud;
   time = 0;
   init() {
     const { width, height } = this.app;
@@ -88,11 +86,6 @@ class MiniMapScene extends Scene {
       .addPass(new RenderNodePass(this.world, { target: this.mapTexture, view: this.mapCamera, clear: Color.black }))
       .addPass(new RenderNodePass(this.world, { view: this.camera, clear: Color.black }))
       .addPass(new RenderNodePass(this.overlay));
-    this.hud = mountControls({
-      title: 'Minimap',
-      status: 'The player wanders a world larger than the screen.',
-      hint: 'Both views follow the same player through the same container; the minimap camera only frames a wider area into a small texture.',
-    });
   }
   update(delta) {
     this.time += delta * 0.35;
@@ -116,7 +109,6 @@ class MiniMapScene extends Scene {
     this.world.destroy();
     this.overlay.destroy();
     this.mask.destroy();
-    this.hud.dispose();
     super.destroy();
   }
 }
diff --git a/examples/render-targets/mini-map.ts b/examples/render-targets/mini-map.ts
index 11264c4f3..41e32ecd9 100644
--- a/examples/render-targets/mini-map.ts
+++ b/examples/render-targets/mini-map.ts
@@ -14,7 +14,6 @@ import {
   Sprite,
   View,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 
 const WORLD_WIDTH = 3200;
 const WORLD_HEIGHT = 1800;
@@ -69,7 +68,6 @@ class MiniMapScene extends Scene {
   private mapCamera!: View;
   private mapTexture!: RenderTexture;
   private pipeline!: RenderPipeline;
-  private hud!: ReturnType<typeof mountControls>;
   private time = 0;
 
   override init(): void {
@@ -104,12 +102,6 @@ class MiniMapScene extends Scene {
       .addPass(new RenderNodePass(this.world, { target: this.mapTexture, view: this.mapCamera, clear: Color.black }))
       .addPass(new RenderNodePass(this.world, { view: this.camera, clear: Color.black }))
       .addPass(new RenderNodePass(this.overlay));
-
-    this.hud = mountControls({
-      title: 'Minimap',
-      status: 'The player wanders a world larger than the screen.',
-      hint: 'Both views follow the same player through the same container; the minimap camera only frames a wider area into a small texture.',
-    });
   }
 
   override update(delta: Seconds): void {
@@ -139,7 +131,6 @@ class MiniMapScene extends Scene {
     this.world.destroy();
     this.overlay.destroy();
     this.mask.destroy();
-    this.hud.dispose();
     super.destroy();
   }
 }
diff --git a/examples/render-targets/post-processing-chain.js b/examples/render-targets/post-processing-chain.js
index d7bc58875..7f42cf759 100644
--- a/examples/render-targets/post-processing-chain.js
+++ b/examples/render-targets/post-processing-chain.js
@@ -85,8 +85,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(PostProcessingChainScene);
diff --git a/examples/render-targets/post-processing-chain.ts b/examples/render-targets/post-processing-chain.ts
index 3d72398a7..6016b7307 100644
--- a/examples/render-targets/post-processing-chain.ts
+++ b/examples/render-targets/post-processing-chain.ts
@@ -94,9 +94,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(PostProcessingChainScene);
diff --git a/examples/render-targets/render-pipeline.js b/examples/render-targets/render-pipeline.js
index eccd57289..c7d914f68 100644
--- a/examples/render-targets/render-pipeline.js
+++ b/examples/render-targets/render-pipeline.js
@@ -7,6 +7,7 @@ import {
   Container,
   FixedResolutionCanvasSizing,
   Graphics,
+  Keyboard,
   RenderNodePass,
   RenderPipeline,
   RenderTexture,
@@ -14,7 +15,7 @@ import {
   Sprite,
   TextureFormat,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { mountControls } from '@examples/runtime';
 // A composable frame, configured once: the world renders off-screen, a blur step turns it into its
 // blurred version, a composite step draws that to the screen, and a nested UI pipeline overlays a HUD.
 // The blur step toggles on and off via `pass.enabled`; the off-screen targets track the canvas size.
@@ -69,7 +70,7 @@ class RenderPipelineScene extends Scene {
         ),
       )
       .addPass(new RenderNodePass(this.hud, { view: screenView, label: 'hud' }));
-    // world → off-screen → blur → composite → UI overlay. A RenderPipeline is itself a RenderPass,
+    // world, off-screen, blur, composite, UI overlay. A RenderPipeline is itself a RenderPass,
     // so `ui` nests directly.
     this.frame = new RenderPipeline({ label: 'frame' })
       .addPass(new RenderNodePass(this.world, { target: this.sceneRt, clear: Color.black, label: 'world' }))
@@ -85,21 +86,16 @@ class RenderPipelineScene extends Scene {
     };
     app.onResize.add(handleResize);
     this.detachResize = () => app.onResize.remove(handleResize);
-    this.controls = mountControls({
-      title: 'Composable Render Pipeline',
-      status: 'Blur: on',
-      hint: 'Named world, blur, composite, custom callback, and HUD passes run in order. Disable blur to bypass to the current unblurred frame.',
-    });
-    mountControlPanel({ title: 'Passes' }).addToggle({
-      label: 'Blur',
-      value: true,
-      onChange: enabled => {
-        this.blurPass.enabled = enabled;
-        this.composite.setTexture(enabled ? this.blurredRt : this.sceneRt);
-        this.controls.setStatus(`Blur: ${enabled ? 'on' : 'off'}`);
-      },
-    });
+    this.controls = mountControls({ title: 'Composable Render Pipeline', status: 'Blur: on' });
+    this.inputs.onTrigger(Keyboard.Space, this.toggleBlur);
+    app.input.onPointerTap.add(this.toggleBlur);
   }
+  toggleBlur = () => {
+    const enabled = !this.blurPass.enabled;
+    this.blurPass.enabled = enabled;
+    this.composite.setTexture(enabled ? this.blurredRt : this.sceneRt);
+    this.controls.setStatus(`Blur: ${enabled ? 'on' : 'off'}`);
+  };
   update(delta) {
     const app = this.app;
     const { width, height } = app;
@@ -116,6 +112,7 @@ class RenderPipelineScene extends Scene {
   }
   destroy() {
     this.detachResize?.();
+    this.app.input.onPointerTap.remove(this.toggleBlur);
     // Cascades destroy() to every pass; the pipeline never destroys caller-owned nodes or targets.
     this.frame.destroy();
     this.sceneRt.destroy();
@@ -134,8 +131,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(RenderPipelineScene);
diff --git a/examples/render-targets/render-pipeline.ts b/examples/render-targets/render-pipeline.ts
index 64e99bcb6..5d3e41bde 100644
--- a/examples/render-targets/render-pipeline.ts
+++ b/examples/render-targets/render-pipeline.ts
@@ -6,6 +6,7 @@ import {
   Container,
   FixedResolutionCanvasSizing,
   Graphics,
+  Keyboard,
   type RenderingContext,
   RenderNodePass,
   RenderPipeline,
@@ -15,7 +16,7 @@ import {
   Sprite,
   TextureFormat,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { mountControls } from '@examples/runtime';
 
 // A composable frame, configured once: the world renders off-screen, a blur step turns it into its
 // blurred version, a composite step draws that to the screen, and a nested UI pipeline overlays a HUD.
@@ -78,7 +79,7 @@ class RenderPipelineScene extends Scene {
       )
       .addPass(new RenderNodePass(this.hud, { view: screenView, label: 'hud' }));
 
-    // world → off-screen → blur → composite → UI overlay. A RenderPipeline is itself a RenderPass,
+    // world, off-screen, blur, composite, UI overlay. A RenderPipeline is itself a RenderPass,
     // so `ui` nests directly.
     this.frame = new RenderPipeline({ label: 'frame' })
       .addPass(new RenderNodePass(this.world, { target: this.sceneRt, clear: Color.black, label: 'world' }))
@@ -97,22 +98,19 @@ class RenderPipelineScene extends Scene {
     app.onResize.add(handleResize);
     this.detachResize = () => app.onResize.remove(handleResize);
 
-    this.controls = mountControls({
-      title: 'Composable Render Pipeline',
-      status: 'Blur: on',
-      hint: 'Named world, blur, composite, custom callback, and HUD passes run in order. Disable blur to bypass to the current unblurred frame.',
-    });
-    mountControlPanel({ title: 'Passes' }).addToggle({
-      label: 'Blur',
-      value: true,
-      onChange: enabled => {
-        this.blurPass.enabled = enabled;
-        this.composite.setTexture(enabled ? this.blurredRt : this.sceneRt);
-        this.controls.setStatus(`Blur: ${enabled ? 'on' : 'off'}`);
-      },
-    });
+    this.controls = mountControls({ title: 'Composable Render Pipeline', status: 'Blur: on' });
+    this.inputs.onTrigger(Keyboard.Space, this.toggleBlur);
+    app.input.onPointerTap.add(this.toggleBlur);
   }
 
+  private readonly toggleBlur = (): void => {
+    const enabled = !this.blurPass.enabled;
+
+    this.blurPass.enabled = enabled;
+    this.composite.setTexture(enabled ? this.blurredRt : this.sceneRt);
+    this.controls.setStatus(`Blur: ${enabled ? 'on' : 'off'}`);
+  };
+
   override update(delta: Seconds): void {
     const app = this.app;
     const { width, height } = app;
@@ -133,6 +131,7 @@ class RenderPipelineScene extends Scene {
 
   override destroy(): void {
     this.detachResize?.();
+    this.app.input.onPointerTap.remove(this.toggleBlur);
     // Cascades destroy() to every pass; the pipeline never destroys caller-owned nodes or targets.
     this.frame.destroy();
     this.sceneRt.destroy();
@@ -152,9 +151,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(RenderPipelineScene);
diff --git a/examples/render-targets/render-to-texture.js b/examples/render-targets/render-to-texture.js
index 24790bb83..a75c87aa4 100644
--- a/examples/render-targets/render-to-texture.js
+++ b/examples/render-targets/render-to-texture.js
@@ -1,6 +1,6 @@
 // Auto-generated from render-to-texture.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, RenderTexture, Scene, Sprite, Text } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class RenderToTextureScene extends Scene {
   source;
   texture;
@@ -11,11 +11,9 @@ class RenderToTextureScene extends Scene {
   snapshot;
   labels;
   captureRequested = true;
-  captures = 0;
-  hud;
   time = 0;
   init() {
-    this.texture = this.loader.get(assets.demo.textures.shipA);
+    this.texture = this.loader.get(assets.ship);
     this.source = new Container();
     for (let i = 0; i < 25; i++) {
       const ship = new Sprite(this.texture)
@@ -33,16 +31,11 @@ class RenderToTextureScene extends Scene {
       new Text('Live source', { fillColor: Color.white, fontSize: 32 }).setPosition(170, 160),
       new Text('Frozen snapshot', { fillColor: Color.white, fontSize: 32 }).setPosition(790, 160),
     ];
-    this.hud = mountControls({
-      title: 'Capture a Texture',
-      controls: [{ keys: 'Click', action: 'capture the current source frame' }],
-      status: 'Waiting for the source texture...',
-      hint: 'The left group keeps moving while the right texture stays frozen until the next click.',
-    });
-    this.app.input.onPointerTap.add(() => {
-      this.captureRequested = true;
-    });
+    this.app.input.onPointerTap.add(this.onTap);
   }
+  onTap = () => {
+    this.captureRequested = true;
+  };
   update(delta) {
     this.time += delta;
     for (let i = 0; i < this.ships.length; i++) {
@@ -54,10 +47,6 @@ class RenderToTextureScene extends Scene {
     if (this.captureRequested && this.texture.ready) {
       context.renderTo(this.source, { target: this.target, clear: Color.black });
       this.captureRequested = false;
-      this.captures++;
-      this.hud.setStatus(`Captures: ${this.captures}`);
-    } else if (this.texture.state === 'failed') {
-      this.hud.setStatus('The source texture failed to load.');
     }
     context.render(this.live);
     context.render(this.snapshot);
@@ -66,6 +55,7 @@ class RenderToTextureScene extends Scene {
     }
   }
   destroy() {
+    this.app.input.onPointerTap.remove(this.onTap);
     this.liveTarget.destroy();
     this.target.destroy();
     super.destroy();
diff --git a/examples/render-targets/render-to-texture.ts b/examples/render-targets/render-to-texture.ts
index 2da379e97..2896e943e 100644
--- a/examples/render-targets/render-to-texture.ts
+++ b/examples/render-targets/render-to-texture.ts
@@ -11,7 +11,7 @@ import {
   Text,
   type Texture,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class RenderToTextureScene extends Scene {
   private source!: Container;
@@ -23,12 +23,10 @@ class RenderToTextureScene extends Scene {
   private snapshot!: Sprite;
   private labels!: Text[];
   private captureRequested = true;
-  private captures = 0;
-  private hud!: ReturnType<typeof mountControls>;
   private time = 0;
 
   override init(): void {
-    this.texture = this.loader.get(assets.demo.textures.shipA);
+    this.texture = this.loader.get(assets.ship);
     this.source = new Container();
 
     for (let i = 0; i < 25; i++) {
@@ -48,17 +46,13 @@ class RenderToTextureScene extends Scene {
       new Text('Live source', { fillColor: Color.white, fontSize: 32 }).setPosition(170, 160),
       new Text('Frozen snapshot', { fillColor: Color.white, fontSize: 32 }).setPosition(790, 160),
     ];
-    this.hud = mountControls({
-      title: 'Capture a Texture',
-      controls: [{ keys: 'Click', action: 'capture the current source frame' }],
-      status: 'Waiting for the source texture...',
-      hint: 'The left group keeps moving while the right texture stays frozen until the next click.',
-    });
-    this.app.input.onPointerTap.add(() => {
-      this.captureRequested = true;
-    });
+    this.app.input.onPointerTap.add(this.onTap);
   }
 
+  private readonly onTap = (): void => {
+    this.captureRequested = true;
+  };
+
   override update(delta: Seconds): void {
     this.time += delta;
 
@@ -73,10 +67,6 @@ class RenderToTextureScene extends Scene {
     if (this.captureRequested && this.texture.ready) {
       context.renderTo(this.source, { target: this.target, clear: Color.black });
       this.captureRequested = false;
-      this.captures++;
-      this.hud.setStatus(`Captures: ${this.captures}`);
-    } else if (this.texture.state === 'failed') {
-      this.hud.setStatus('The source texture failed to load.');
     }
 
     context.render(this.live);
@@ -88,6 +78,7 @@ class RenderToTextureScene extends Scene {
   }
 
   override destroy(): void {
+    this.app.input.onPointerTap.remove(this.onTap);
     this.liveTarget.destroy();
     this.target.destroy();
     super.destroy();
diff --git a/examples/render-targets/trail-feedback.js b/examples/render-targets/trail-feedback.js
index 82324cff4..805b7f3c4 100644
--- a/examples/render-targets/trail-feedback.js
+++ b/examples/render-targets/trail-feedback.js
@@ -11,6 +11,7 @@ import {
   Sprite,
   TextureFormat,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class TrailFeedbackScene extends Scene {
   // Two render targets, ping-ponged each frame. Reading from and writing to
   // the SAME render target forms a GL feedback loop (INVALID_OPERATION), so we
@@ -33,7 +34,7 @@ class TrailFeedbackScene extends Scene {
     // format: eight bits of linear storage quantize the dark end of the fade coarsely.
     this.rtA = new RenderTexture(width, height, { format: TextureFormat.Rgba8Srgb });
     this.rtB = new RenderTexture(width, height, { format: TextureFormat.Rgba8Srgb });
-    this.bunny = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5);
+    this.bunny = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5);
     this.decayA = new Sprite(this.rtA);
     this.decayB = new Sprite(this.rtB);
     const showA = new Sprite(this.rtA);
@@ -95,8 +96,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TrailFeedbackScene);
diff --git a/examples/render-targets/trail-feedback.ts b/examples/render-targets/trail-feedback.ts
index 6799791ff..66794b5b7 100644
--- a/examples/render-targets/trail-feedback.ts
+++ b/examples/render-targets/trail-feedback.ts
@@ -12,6 +12,7 @@ import {
   Sprite,
   TextureFormat,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class TrailFeedbackScene extends Scene {
   // Two render targets, ping-ponged each frame. Reading from and writing to
@@ -37,7 +38,7 @@ class TrailFeedbackScene extends Scene {
     // format: eight bits of linear storage quantize the dark end of the fade coarsely.
     this.rtA = new RenderTexture(width, height, { format: TextureFormat.Rgba8Srgb });
     this.rtB = new RenderTexture(width, height, { format: TextureFormat.Rgba8Srgb });
-    this.bunny = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5);
+    this.bunny = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5);
 
     this.decayA = new Sprite(this.rtA);
     this.decayB = new Sprite(this.rtB);
@@ -106,9 +107,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TrailFeedbackScene);
diff --git a/examples/render-targets/water-mirror.js b/examples/render-targets/water-mirror.js
index 4371888fe..e938df93f 100644
--- a/examples/render-targets/water-mirror.js
+++ b/examples/render-targets/water-mirror.js
@@ -17,7 +17,7 @@ import {
   TextureFormat,
   WrapModes,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const MAP_SIZE = 256;
 const createRippleMap = () => {
   const data = new Uint8Array(MAP_SIZE * MAP_SIZE * 4);
@@ -50,7 +50,6 @@ class WaterMirrorScene extends Scene {
   tint;
   waterline;
   pipeline;
-  hud;
   dragging = false;
   onPointerDown = (_pointer, x, y) => {
     if (y < this.app.height / 2) {
@@ -72,7 +71,7 @@ class WaterMirrorScene extends Scene {
     const half = height / 2;
     this.target = new RenderTexture(width, half);
     this.map = createRippleMap();
-    this.source = new Sprite(this.loader.get('image/ship-a.png'))
+    this.source = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setPosition(width / 2, half / 2)
       .setScale(5);
@@ -96,12 +95,6 @@ class WaterMirrorScene extends Scene {
       )
       .addPass(new RenderNodePass(this.source, { clear: new Color(18, 24, 36) }))
       .addPass(new RenderNodePass(this.mirror));
-    this.hud = mountControls({
-      title: 'Water Reflection and Distortion',
-      controls: [{ keys: 'Drag on water', action: 'change ripple strength' }],
-      status: 'Ripple strength: 24',
-      hint: 'The upper scene is captured into a RenderTexture, flipped, then displaced by a scrolling direction map. Drag across the reflection to change its strength.',
-    });
     this.app.input.onPointerDown.add(this.onPointerDown);
     this.app.input.onPointerMove.add(this.onPointerMove);
     this.app.input.onPointerUp.add(this.onPointerEnd);
@@ -110,7 +103,6 @@ class WaterMirrorScene extends Scene {
   setRippleStrength(x) {
     const strength = Math.round(Math.max(0, Math.min(1, x / this.app.width)) * 60);
     this.ripple.setScale(strength);
-    this.hud.setStatus(`Ripple strength: ${strength}`);
   }
   update(delta) {
     const { width, height } = this.app;
@@ -129,7 +121,6 @@ class WaterMirrorScene extends Scene {
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerUp.remove(this.onPointerEnd);
     this.app.input.onPointerCancel.remove(this.onPointerEnd);
-    this.hud.dispose();
     this.pipeline.destroy();
     this.target.destroy();
     this.ripple.destroy();
@@ -147,6 +138,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(WaterMirrorScene);
diff --git a/examples/render-targets/water-mirror.ts b/examples/render-targets/water-mirror.ts
index 3b37a3cbe..91a5cef5d 100644
--- a/examples/render-targets/water-mirror.ts
+++ b/examples/render-targets/water-mirror.ts
@@ -19,7 +19,7 @@ import {
   TextureFormat,
   WrapModes,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const MAP_SIZE = 256;
 
@@ -57,7 +57,6 @@ class WaterMirrorScene extends Scene {
   private tint!: ColorMatrixFilter;
   private waterline!: Graphics;
   private pipeline!: RenderPipeline;
-  private hud!: ReturnType<typeof mountControls>;
   private dragging = false;
   private readonly onPointerDown = (_pointer: unknown, x: number, y: number): void => {
     if (y < this.app.height / 2) {
@@ -81,7 +80,7 @@ class WaterMirrorScene extends Scene {
     const half = height / 2;
     this.target = new RenderTexture(width, half);
     this.map = createRippleMap();
-    this.source = new Sprite(this.loader.get('image/ship-a.png'))
+    this.source = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setPosition(width / 2, half / 2)
       .setScale(5);
@@ -108,12 +107,6 @@ class WaterMirrorScene extends Scene {
       .addPass(new RenderNodePass(this.source, { clear: new Color(18, 24, 36) }))
       .addPass(new RenderNodePass(this.mirror));
 
-    this.hud = mountControls({
-      title: 'Water Reflection and Distortion',
-      controls: [{ keys: 'Drag on water', action: 'change ripple strength' }],
-      status: 'Ripple strength: 24',
-      hint: 'The upper scene is captured into a RenderTexture, flipped, then displaced by a scrolling direction map. Drag across the reflection to change its strength.',
-    });
     this.app.input.onPointerDown.add(this.onPointerDown);
     this.app.input.onPointerMove.add(this.onPointerMove);
     this.app.input.onPointerUp.add(this.onPointerEnd);
@@ -123,7 +116,6 @@ class WaterMirrorScene extends Scene {
   private setRippleStrength(x: number): void {
     const strength = Math.round(Math.max(0, Math.min(1, x / this.app.width)) * 60);
     this.ripple.setScale(strength);
-    this.hud.setStatus(`Ripple strength: ${strength}`);
   }
 
   override update(delta: Seconds): void {
@@ -145,7 +137,6 @@ class WaterMirrorScene extends Scene {
     this.app.input.onPointerMove.remove(this.onPointerMove);
     this.app.input.onPointerUp.remove(this.onPointerEnd);
     this.app.input.onPointerCancel.remove(this.onPointerEnd);
-    this.hud.dispose();
     this.pipeline.destroy();
     this.target.destroy();
     this.ripple.destroy();
@@ -164,7 +155,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(WaterMirrorScene);
diff --git a/examples/scene-graph/containers.js b/examples/scene-graph/containers.js
index 9a2055e19..fb6ae103c 100644
--- a/examples/scene-graph/containers.js
+++ b/examples/scene-graph/containers.js
@@ -1,14 +1,13 @@
 // Auto-generated from containers.ts - edit the .ts source, not this file.
-import { Application, Asset, Assets, Color, Container, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
+import { Application, Assets, Color, Container, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class ContainersScene extends Scene {
   rainbow;
   bunnies;
   init() {
     const app = this.app;
     const { width, height } = app;
-    const { bunny, rainbow } = this.loader.get(
-      Assets.from({ bunny: Asset.type('texture', 'image/ship-a.png'), rainbow: Asset.type('texture', 'image/hue-ramp.png') }),
-    );
+    const { bunny, rainbow } = this.loader.get(Assets.from({ bunny: assets.ship, rainbow: assets.hueRamp }));
     this.rainbow = new Sprite(rainbow);
     this.bunnies = new Container();
     this.bunnies.setPosition((width / 2) | 0, (height / 2) | 0);
@@ -40,8 +39,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(ContainersScene);
diff --git a/examples/scene-graph/containers.ts b/examples/scene-graph/containers.ts
index 2657c8629..113ba32ff 100644
--- a/examples/scene-graph/containers.ts
+++ b/examples/scene-graph/containers.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   Assets,
   Color,
   Container,
@@ -10,6 +9,7 @@ import {
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class ContainersScene extends Scene {
   private rainbow!: Sprite;
@@ -18,9 +18,7 @@ class ContainersScene extends Scene {
   override init(): void {
     const app = this.app;
     const { width, height } = app;
-    const { bunny, rainbow } = this.loader.get(
-      Assets.from({ bunny: Asset.type('texture', 'image/ship-a.png'), rainbow: Asset.type('texture', 'image/hue-ramp.png') }),
-    );
+    const { bunny, rainbow } = this.loader.get(Assets.from({ bunny: assets.ship, rainbow: assets.hueRamp }));
 
     this.rainbow = new Sprite(rainbow);
 
@@ -62,9 +60,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(ContainersScene);
diff --git a/examples/scene-graph/local-vs-global-transform.js b/examples/scene-graph/local-vs-global-transform.js
index bd6e8ee18..2f1041718 100644
--- a/examples/scene-graph/local-vs-global-transform.js
+++ b/examples/scene-graph/local-vs-global-transform.js
@@ -1,5 +1,6 @@
 // Auto-generated from local-vs-global-transform.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class LocalVsGlobalTransformScene extends Scene {
   parent;
   localSprite;
@@ -9,7 +10,7 @@ class LocalVsGlobalTransformScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/ship-a.png');
+    const texture = this.loader.get(assets.ship);
     this.parent = new Container().setPosition(width / 4, height / 2);
     this.localSprite = new Sprite(texture)
       .setAnchor(0.5)
@@ -46,8 +47,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(LocalVsGlobalTransformScene);
diff --git a/examples/scene-graph/local-vs-global-transform.ts b/examples/scene-graph/local-vs-global-transform.ts
index 49c078f44..ff9371f92 100644
--- a/examples/scene-graph/local-vs-global-transform.ts
+++ b/examples/scene-graph/local-vs-global-transform.ts
@@ -9,6 +9,7 @@ import {
   Sprite,
   Text,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class LocalVsGlobalTransformScene extends Scene {
   private parent!: Container;
@@ -20,7 +21,7 @@ class LocalVsGlobalTransformScene extends Scene {
   override init(): void {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/ship-a.png');
+    const texture = this.loader.get(assets.ship);
 
     this.parent = new Container().setPosition(width / 4, height / 2);
     this.localSprite = new Sprite(texture)
@@ -62,9 +63,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(LocalVsGlobalTransformScene);
diff --git a/examples/scene-graph/masks.js b/examples/scene-graph/masks.js
index c47c91f75..e9966ebdc 100644
--- a/examples/scene-graph/masks.js
+++ b/examples/scene-graph/masks.js
@@ -1,6 +1,7 @@
 // Auto-generated from masks.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Rectangle, Scene, Sprite } from '@codexo/exojs';
-const ALPHA_RINGS = assets.technical.alpha.alphaGradientRings;
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+const ALPHA_RINGS = assets.alphaGradientRings;
 class MasksScene extends Scene {
   rectSprite;
   rectMask;
diff --git a/examples/scene-graph/masks.ts b/examples/scene-graph/masks.ts
index 91d485fa1..b6b687073 100644
--- a/examples/scene-graph/masks.ts
+++ b/examples/scene-graph/masks.ts
@@ -9,8 +9,9 @@ import {
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
-const ALPHA_RINGS = assets.technical.alpha.alphaGradientRings;
+const ALPHA_RINGS = assets.alphaGradientRings;
 
 class MasksScene extends Scene {
   private rectSprite!: Sprite;
diff --git a/examples/scene-graph/nested-transforms.js b/examples/scene-graph/nested-transforms.js
index 3cf2deeaa..fd885e451 100644
--- a/examples/scene-graph/nested-transforms.js
+++ b/examples/scene-graph/nested-transforms.js
@@ -61,8 +61,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(NestedTransformsScene);
diff --git a/examples/scene-graph/nested-transforms.ts b/examples/scene-graph/nested-transforms.ts
index 4c440ef26..0e8ccae72 100644
--- a/examples/scene-graph/nested-transforms.ts
+++ b/examples/scene-graph/nested-transforms.ts
@@ -79,9 +79,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(NestedTransformsScene);
diff --git a/examples/scene-graph/parallax-starfield.js b/examples/scene-graph/parallax-starfield.js
index 6196a7669..467c430d5 100644
--- a/examples/scene-graph/parallax-starfield.js
+++ b/examples/scene-graph/parallax-starfield.js
@@ -1,13 +1,11 @@
 // Auto-generated from parallax-starfield.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 const speeds = [0.15, 0.35, 0.6];
 const counts = [120, 80, 48];
 const colors = [new Color(120, 140, 200), new Color(170, 190, 255), new Color(255, 255, 255)];
 class ParallaxStarfieldScene extends Scene {
   layers;
   pointer = { x: 0, y: 0 };
-  hud;
   onPointerMove = pointer => {
     this.pointer.x = pointer.x;
     this.pointer.y = pointer.y;
@@ -28,11 +26,6 @@ class ParallaxStarfieldScene extends Scene {
       }
       return g;
     });
-    this.hud = mountControls({
-      title: 'Parallax Layers',
-      controls: [{ keys: 'Move pointer', action: 'shift the three depth layers' }],
-      hint: 'Near stars travel farther than distant stars for the same pointer movement.',
-    });
     app.input.onPointerMove.add(this.onPointerMove);
   }
   draw(context) {
@@ -47,7 +40,6 @@ class ParallaxStarfieldScene extends Scene {
   }
   destroy() {
     this.app.input.onPointerMove.remove(this.onPointerMove);
-    this.hud.dispose();
     super.destroy();
   }
 }
@@ -60,8 +52,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(ParallaxStarfieldScene);
diff --git a/examples/scene-graph/parallax-starfield.ts b/examples/scene-graph/parallax-starfield.ts
index 9d3c14f24..302cb78ac 100644
--- a/examples/scene-graph/parallax-starfield.ts
+++ b/examples/scene-graph/parallax-starfield.ts
@@ -1,5 +1,4 @@
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
 
 const speeds = [0.15, 0.35, 0.6];
 const counts = [120, 80, 48];
@@ -8,7 +7,6 @@ const colors = [new Color(120, 140, 200), new Color(170, 190, 255), new Color(25
 class ParallaxStarfieldScene extends Scene {
   private layers!: Graphics[];
   private pointer = { x: 0, y: 0 };
-  private hud!: ReturnType<typeof mountControls>;
   private readonly onPointerMove = (pointer: { x: number; y: number }): void => {
     this.pointer.x = pointer.x;
     this.pointer.y = pointer.y;
@@ -35,11 +33,6 @@ class ParallaxStarfieldScene extends Scene {
       return g;
     });
 
-    this.hud = mountControls({
-      title: 'Parallax Layers',
-      controls: [{ keys: 'Move pointer', action: 'shift the three depth layers' }],
-      hint: 'Near stars travel farther than distant stars for the same pointer movement.',
-    });
     app.input.onPointerMove.add(this.onPointerMove);
   }
 
@@ -57,7 +50,6 @@ class ParallaxStarfieldScene extends Scene {
 
   override destroy(): void {
     this.app.input.onPointerMove.remove(this.onPointerMove);
-    this.hud.dispose();
     super.destroy();
   }
 }
@@ -71,9 +63,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(ParallaxStarfieldScene);
diff --git a/examples/scene-graph/pivot-and-anchor.js b/examples/scene-graph/pivot-and-anchor.js
index 7ea7f990a..89e640ab9 100644
--- a/examples/scene-graph/pivot-and-anchor.js
+++ b/examples/scene-graph/pivot-and-anchor.js
@@ -1,65 +1,62 @@
 // Auto-generated from pivot-and-anchor.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sprite, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
-const modes = [
-  { name: 'corner', anchor: [0, 0], origin: [0, 0] },
-  { name: 'center', anchor: [0.5, 0.5], origin: null },
-  { name: 'off-canvas', anchor: [0.5, 0.5], origin: [180, -80] },
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+// Three copies of one sprite, each turning about a different origin. The red dot
+// is the sprite's position, which is always where its origin sits; the cyan box
+// is its world-space bounds.
+const VARIANTS = [
+  { title: 'Origin at the top-left corner', anchor: [0, 0], origin: null },
+  { title: 'Origin at the centre', anchor: [0.5, 0.5], origin: null },
+  { title: 'Origin outside the texture', anchor: [0.5, 0.5], origin: [110, -20] },
 ];
+const SCALE = 1.5;
 class PivotAndAnchorScene extends Scene {
-  sprite;
-  pivotMarker;
-  label;
-  hud;
-  panel;
-  init() {
-    const app = this.app;
-    const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setPosition(width / 2, height / 2);
-    this.pivotMarker = new Graphics();
-    this.label = new Text('', { fillColor: Color.white, fontSize: 18 });
-    this.label.setPosition(20, 20);
-    this.hud = mountControls({ title: 'Pivot and Anchor', controls: [{ keys: 'Preset', action: 'compare rotation around each origin' }] });
-    this.panel = mountControlPanel({ title: 'Origin presets' });
-    modes.forEach((mode, index) => this.panel.addButton({ label: mode.name, onClick: () => this.applyMode(index) }));
-    this.applyMode(0);
+  sprites = [];
+  labels = [];
+  overlay = new Graphics();
+  ship;
+  // The anchor derives the origin from the texture size, so the texture is
+  // awaited rather than claimed as a placeholder that is still 0 x 0.
+  async load() {
+    this.ship = await this.loader.load(assets.ship);
   }
-  applyMode(index) {
-    const mode = modes[index];
-    this.sprite.setAnchor(mode.anchor[0], mode.anchor[1]);
-    const bounds = this.sprite.getLocalBounds();
-    this.sprite.setOrigin(mode.origin?.[0] ?? bounds.width * mode.anchor[0], mode.origin?.[1] ?? bounds.height * mode.anchor[1]);
-    this.hud.setStatus(
-      `${mode.name}: anchor (${mode.anchor.join(', ')}), origin (${this.sprite.origin.x.toFixed(0)}, ${this.sprite.origin.y.toFixed(0)})`,
-    );
+  init() {
+    const { width, height } = this.app;
+    const column = width / VARIANTS.length;
+    VARIANTS.forEach((variant, index) => {
+      const x = column * (index + 0.5);
+      const sprite = new Sprite(this.ship).setScale(SCALE).setPosition(x, height / 2);
+      sprite.setAnchor(variant.anchor[0], variant.anchor[1]);
+      if (variant.origin) {
+        sprite.setOrigin(variant.origin[0], variant.origin[1]);
+      }
+      this.sprites.push(sprite);
+      this.labels.push(
+        new Text(variant.title, { fillColor: Color.white, fontSize: 18, align: 'center' }).setAnchor(0.5, 0).setPosition(x, 40),
+      );
+    });
   }
   update(delta) {
-    this.sprite.rotate(delta * 45);
+    for (const sprite of this.sprites) {
+      sprite.rotate(delta * 45);
+    }
   }
   draw(context) {
-    const m = this.sprite.getGlobalTransform();
-    const bounds = this.sprite.getBounds();
-    context.render(this.sprite);
-    this.pivotMarker.clear();
-    this.pivotMarker.lineColor = new Color(110, 215, 245);
-    this.pivotMarker.lineWidth = 2;
-    this.pivotMarker.drawLine(bounds.x, bounds.y, bounds.x + bounds.width, bounds.y);
-    this.pivotMarker.drawLine(bounds.x + bounds.width, bounds.y, bounds.x + bounds.width, bounds.y + bounds.height);
-    this.pivotMarker.drawLine(bounds.x + bounds.width, bounds.y + bounds.height, bounds.x, bounds.y + bounds.height);
-    this.pivotMarker.drawLine(bounds.x, bounds.y + bounds.height, bounds.x, bounds.y);
-    this.pivotMarker.fillColor = new Color(255, 80, 80);
-    this.pivotMarker.drawCircle(m.x, m.y, 6);
-    this.label.text = `position (${this.sprite.x.toFixed(0)}, ${this.sprite.y.toFixed(0)})  bounds (${bounds.x.toFixed(0)}, ${bounds.y.toFixed(0)}, ${bounds.width.toFixed(0)}, ${bounds.height.toFixed(0)})`;
-    context.render(this.pivotMarker);
-    context.render(this.label);
-  }
-  destroy() {
-    this.panel?.dispose();
-    this.hud?.dispose();
-    this.sprite?.destroy();
-    this.pivotMarker?.destroy();
-    this.label?.destroy();
-    super.destroy();
+    this.overlay.clear();
+    this.overlay.lineColor = new Color(110, 215, 245);
+    this.overlay.lineWidth = 2;
+    for (const sprite of this.sprites) {
+      const bounds = sprite.getBounds();
+      context.render(sprite);
+      this.overlay.fillColor = Color.transparent;
+      this.overlay.drawRectangle(bounds.x, bounds.y, bounds.width, bounds.height);
+      this.overlay.fillColor = new Color(255, 80, 80);
+      this.overlay.drawCircle(sprite.x, sprite.y, 6);
+    }
+    context.render(this.overlay);
+    for (const label of this.labels) {
+      context.render(label);
+    }
   }
 }
 const app = new Application({
@@ -71,8 +68,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(PivotAndAnchorScene);
diff --git a/examples/scene-graph/pivot-and-anchor.ts b/examples/scene-graph/pivot-and-anchor.ts
index 698d1934d..5b2b03fc8 100644
--- a/examples/scene-graph/pivot-and-anchor.ts
+++ b/examples/scene-graph/pivot-and-anchor.ts
@@ -8,75 +8,80 @@ import {
   type Seconds,
   Sprite,
   Text,
+  type Texture,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
-const modes = [
-  { name: 'corner', anchor: [0, 0] as [number, number], origin: [0, 0] as [number, number] | null },
-  { name: 'center', anchor: [0.5, 0.5] as [number, number], origin: null },
-  { name: 'off-canvas', anchor: [0.5, 0.5] as [number, number], origin: [180, -80] as [number, number] | null },
-];
+// Three copies of one sprite, each turning about a different origin. The red dot
+// is the sprite's position, which is always where its origin sits; the cyan box
+// is its world-space bounds.
+const VARIANTS = [
+  { title: 'Origin at the top-left corner', anchor: [0, 0], origin: null },
+  { title: 'Origin at the centre', anchor: [0.5, 0.5], origin: null },
+  { title: 'Origin outside the texture', anchor: [0.5, 0.5], origin: [110, -20] },
+] as const;
+
+const SCALE = 1.5;
 
 class PivotAndAnchorScene extends Scene {
-  private sprite!: Sprite;
-  private pivotMarker!: Graphics;
-  private label!: Text;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private readonly sprites: Sprite[] = [];
+  private readonly labels: Text[] = [];
+  private readonly overlay = new Graphics();
+  private ship!: Texture;
 
-  override init(): void {
-    const app = this.app;
-    const { width, height } = app;
-
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setPosition(width / 2, height / 2);
-    this.pivotMarker = new Graphics();
-    this.label = new Text('', { fillColor: Color.white, fontSize: 18 });
-    this.label.setPosition(20, 20);
-    this.hud = mountControls({ title: 'Pivot and Anchor', controls: [{ keys: 'Preset', action: 'compare rotation around each origin' }] });
-    this.panel = mountControlPanel({ title: 'Origin presets' });
-    modes.forEach((mode, index) => this.panel.addButton({ label: mode.name, onClick: () => this.applyMode(index) }));
-    this.applyMode(0);
+  // The anchor derives the origin from the texture size, so the texture is
+  // awaited rather than claimed as a placeholder that is still 0 x 0.
+  override async load(): Promise<void> {
+    this.ship = await this.loader.load(assets.ship);
   }
 
-  private applyMode(index: number): void {
-    const mode = modes[index];
-    this.sprite.setAnchor(mode.anchor[0], mode.anchor[1]);
-    const bounds = this.sprite.getLocalBounds();
-    this.sprite.setOrigin(mode.origin?.[0] ?? bounds.width * mode.anchor[0], mode.origin?.[1] ?? bounds.height * mode.anchor[1]);
-    this.hud.setStatus(
-      `${mode.name}: anchor (${mode.anchor.join(', ')}), origin (${this.sprite.origin.x.toFixed(0)}, ${this.sprite.origin.y.toFixed(0)})`,
-    );
+  override init(): void {
+    const { width, height } = this.app;
+    const column = width / VARIANTS.length;
+
+    VARIANTS.forEach((variant, index) => {
+      const x = column * (index + 0.5);
+      const sprite = new Sprite(this.ship).setScale(SCALE).setPosition(x, height / 2);
+
+      sprite.setAnchor(variant.anchor[0], variant.anchor[1]);
+
+      if (variant.origin) {
+        sprite.setOrigin(variant.origin[0], variant.origin[1]);
+      }
+
+      this.sprites.push(sprite);
+      this.labels.push(
+        new Text(variant.title, { fillColor: Color.white, fontSize: 18, align: 'center' }).setAnchor(0.5, 0).setPosition(x, 40),
+      );
+    });
   }
 
   override update(delta: Seconds): void {
-    this.sprite.rotate(delta * 45);
+    for (const sprite of this.sprites) {
+      sprite.rotate(delta * 45);
+    }
   }
 
   override draw(context: RenderingContext): void {
-    const m = this.sprite.getGlobalTransform();
-    const bounds = this.sprite.getBounds();
-    context.render(this.sprite);
-    this.pivotMarker.clear();
-    this.pivotMarker.lineColor = new Color(110, 215, 245);
-    this.pivotMarker.lineWidth = 2;
-    this.pivotMarker.drawLine(bounds.x, bounds.y, bounds.x + bounds.width, bounds.y);
-    this.pivotMarker.drawLine(bounds.x + bounds.width, bounds.y, bounds.x + bounds.width, bounds.y + bounds.height);
-    this.pivotMarker.drawLine(bounds.x + bounds.width, bounds.y + bounds.height, bounds.x, bounds.y + bounds.height);
-    this.pivotMarker.drawLine(bounds.x, bounds.y + bounds.height, bounds.x, bounds.y);
-    this.pivotMarker.fillColor = new Color(255, 80, 80);
-    this.pivotMarker.drawCircle(m.x, m.y, 6);
-    this.label.text = `position (${this.sprite.x.toFixed(0)}, ${this.sprite.y.toFixed(0)})  bounds (${bounds.x.toFixed(0)}, ${bounds.y.toFixed(0)}, ${bounds.width.toFixed(0)}, ${bounds.height.toFixed(0)})`;
-    context.render(this.pivotMarker);
-    context.render(this.label);
-  }
+    this.overlay.clear();
+    this.overlay.lineColor = new Color(110, 215, 245);
+    this.overlay.lineWidth = 2;
+
+    for (const sprite of this.sprites) {
+      const bounds = sprite.getBounds();
 
-  override destroy(): void {
-    this.panel?.dispose();
-    this.hud?.dispose();
-    this.sprite?.destroy();
-    this.pivotMarker?.destroy();
-    this.label?.destroy();
-    super.destroy();
+      context.render(sprite);
+      this.overlay.fillColor = Color.transparent;
+      this.overlay.drawRectangle(bounds.x, bounds.y, bounds.width, bounds.height);
+      this.overlay.fillColor = new Color(255, 80, 80);
+      this.overlay.drawCircle(sprite.x, sprite.y, 6);
+    }
+
+    context.render(this.overlay);
+
+    for (const label of this.labels) {
+      context.render(label);
+    }
   }
 }
 
@@ -89,9 +94,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(PivotAndAnchorScene);
diff --git a/examples/scene-graph/retained-container.js b/examples/scene-graph/retained-container.js
index 2a1b9aa53..d72680d99 100644
--- a/examples/scene-graph/retained-container.js
+++ b/examples/scene-graph/retained-container.js
@@ -10,7 +10,7 @@ import {
   Sprite,
   Texture,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, toggle } from '@examples/runtime';
 // A decor field far larger than the viewport: thousands of sprites that are
 // authored ONCE and never mutated again - the exact shape the retained tier is
 // built for. Only the group as a whole ever moves (the "camera" pan below).
@@ -63,25 +63,18 @@ class RetainedContainerScene extends Scene {
   // Exponential moving average of the wall-clock frame time, so the readout
   // is legible instead of flickering frame to frame.
   smoothedFrameMs = 0;
-  hud;
   panel;
   init() {
     this.atlas = createAtlasTexture();
     this.field = this.buildField(this.retained);
-    this.hud = mountControls({
-      title: 'Retained Container',
-      controls: [
-        { keys: ['Retained tier'], action: 'the whole static field replays as O(batches) — no per-child walk' },
-        { keys: ['Plain container'], action: 'every child is walked and re-collected each frame' },
-      ],
-      hint: 'The field only ever moves as a whole. Toggle the tier and watch the frame-time readout.',
-    });
-    this.panel = mountControlPanel({ title: 'Render tier' });
-    this.panel.addToggle({
-      label: 'Retained tier',
-      value: this.retained,
-      onChange: value => {
-        this.retained = value;
+    this.panel = demoPanel({
+      title: 'Render tier',
+      controls: { retained: toggle('Retained tier', this.retained) },
+      onChange: (_key, retained) => {
+        if (retained === this.retained) {
+          return;
+        }
+        this.retained = retained;
         // Rebuild the field into the other container type. Destroying the
         // OLD group is safe: it owns no child that outlives it, so the
         // whole subtree is torn down together (see the in-place-destroy
@@ -111,10 +104,8 @@ class RetainedContainerScene extends Scene {
     // retained tier removes. The gap widens with field size and on slower
     // machines; on a fast desktop with a few thousand sprites it can be small.
     this.smoothedFrameMs += (context.stats.frameTimeMs - this.smoothedFrameMs) * 0.1;
-    const tier = this.retained ? 'RetainedContainer' : 'plain Container';
-    this.hud.setStatus(
-      `${tier} · ${FIELD_COUNT} static sprites · submitted: ${context.stats.submittedNodes} · ` +
-        `drawCalls: ${context.stats.drawCalls} · frame: ${this.smoothedFrameMs.toFixed(2)} ms`,
+    this.panel.status(
+      `${FIELD_COUNT} sprites, ${context.stats.submittedNodes} nodes submitted, ${this.smoothedFrameMs.toFixed(2)} ms per frame`,
     );
   }
   /**
@@ -148,7 +139,6 @@ class RetainedContainerScene extends Scene {
     return group;
   }
   destroy() {
-    this.hud?.dispose();
     this.panel?.dispose();
     this.field?.destroy();
     this.atlas?.destroy();
diff --git a/examples/scene-graph/retained-container.ts b/examples/scene-graph/retained-container.ts
index 8111a7063..4dceddfd2 100644
--- a/examples/scene-graph/retained-container.ts
+++ b/examples/scene-graph/retained-container.ts
@@ -11,7 +11,7 @@ import {
   Sprite,
   Texture,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
 
 // A decor field far larger than the viewport: thousands of sprites that are
 // authored ONCE and never mutated again - the exact shape the retained tier is
@@ -82,28 +82,21 @@ class RetainedContainerScene extends Scene {
   // is legible instead of flickering frame to frame.
   private smoothedFrameMs = 0;
 
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: DemoPanel<{ retained: ToggleSpec }>;
 
   override init(): void {
     this.atlas = createAtlasTexture();
     this.field = this.buildField(this.retained);
 
-    this.hud = mountControls({
-      title: 'Retained Container',
-      controls: [
-        { keys: ['Retained tier'], action: 'the whole static field replays as O(batches) — no per-child walk' },
-        { keys: ['Plain container'], action: 'every child is walked and re-collected each frame' },
-      ],
-      hint: 'The field only ever moves as a whole. Toggle the tier and watch the frame-time readout.',
-    });
+    this.panel = demoPanel({
+      title: 'Render tier',
+      controls: { retained: toggle('Retained tier', this.retained) },
+      onChange: (_key, retained) => {
+        if (retained === this.retained) {
+          return;
+        }
 
-    this.panel = mountControlPanel({ title: 'Render tier' });
-    this.panel.addToggle({
-      label: 'Retained tier',
-      value: this.retained,
-      onChange: value => {
-        this.retained = value;
+        this.retained = retained;
         // Rebuild the field into the other container type. Destroying the
         // OLD group is safe: it owns no child that outlives it, so the
         // whole subtree is torn down together (see the in-place-destroy
@@ -139,10 +132,8 @@ class RetainedContainerScene extends Scene {
     // machines; on a fast desktop with a few thousand sprites it can be small.
     this.smoothedFrameMs += (context.stats.frameTimeMs - this.smoothedFrameMs) * 0.1;
 
-    const tier = this.retained ? 'RetainedContainer' : 'plain Container';
-    this.hud.setStatus(
-      `${tier} · ${FIELD_COUNT} static sprites · submitted: ${context.stats.submittedNodes} · ` +
-        `drawCalls: ${context.stats.drawCalls} · frame: ${this.smoothedFrameMs.toFixed(2)} ms`,
+    this.panel.status(
+      `${FIELD_COUNT} sprites, ${context.stats.submittedNodes} nodes submitted, ${this.smoothedFrameMs.toFixed(2)} ms per frame`,
     );
   }
 
@@ -184,7 +175,6 @@ class RetainedContainerScene extends Scene {
   }
 
   override destroy(): void {
-    this.hud?.dispose();
     this.panel?.dispose();
     this.field?.destroy();
     this.atlas?.destroy();
diff --git a/examples/scene-graph/z-ordering.js b/examples/scene-graph/z-ordering.js
index f2d42d9ec..36d3af4eb 100644
--- a/examples/scene-graph/z-ordering.js
+++ b/examples/scene-graph/z-ordering.js
@@ -1,5 +1,6 @@
 // Auto-generated from z-ordering.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class ZOrderingScene extends Scene {
   group;
   label;
@@ -7,7 +8,7 @@ class ZOrderingScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/ship-a.png');
+    const texture = this.loader.get(assets.ship);
     this.group = new Container();
     this.label = new Text('Press 1, 2, 3 — front: 3 (blue)', { fillColor: Color.white, fontSize: 18 });
     this.label.setPosition(18, 18);
@@ -48,8 +49,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(ZOrderingScene);
diff --git a/examples/scene-graph/z-ordering.ts b/examples/scene-graph/z-ordering.ts
index 4ac699357..33cffbbdf 100644
--- a/examples/scene-graph/z-ordering.ts
+++ b/examples/scene-graph/z-ordering.ts
@@ -9,6 +9,7 @@ import {
   Sprite,
   Text,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class ZOrderingScene extends Scene {
   private group!: Container;
@@ -18,7 +19,7 @@ class ZOrderingScene extends Scene {
   override init(): void {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/ship-a.png');
+    const texture = this.loader.get(assets.ship);
 
     this.group = new Container();
     this.label = new Text('Press 1, 2, 3 — front: 3 (blue)', { fillColor: Color.white, fontSize: 18 });
@@ -66,9 +67,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(ZOrderingScene);
diff --git a/examples/shared/assets-global.d.ts b/examples/shared/assets-global.d.ts
deleted file mode 100644
index b87cc4302..000000000
--- a/examples/shared/assets-global.d.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-// AUTO-GENERATED by `pnpm -C site examples:sync` - DO NOT EDIT BY HAND.
-// Source of truth: examples/assets/assets.ts (the canonical hierarchical catalog).
-// Regenerate with `tsx scripts/generate-examples-global-dts.ts`; drift is guarded
-// by test/examples/assets-global-dts.test.ts.
-//
-// Self-contained, importless typing for the globally-injected `assets` catalog.
-// The value is installed on `globalThis`/`window` by the controlled example
-// runtimes (Playground iframe, Example/Guide preview, Asset Browser, smoke
-// harness, Full Release harness) BEFORE the example module evaluates. Example
-// authors use it directly with full autocomplete and exact literal types - no
-// import:
-//
-//   assets.demo.textures.particleFlame;
-//   assets.demo.audio.musicLoop;
-//   assets.technical.alpha.alphaEdgeStraight;
-//
-// It is NOT part of the engine public API and is unavailable in consumer apps.
-
-interface ExampleAssetCatalog {
-    readonly demo: {
-        readonly isometricLandscape: 'json/maps/isometric-landscape.tmj';
-        readonly textures: {
-            readonly particleFlame: 'demo/textures/particle-flame.png';
-            readonly particleSmoke: 'demo/textures/particle-smoke.png';
-            readonly particleStar: 'demo/textures/particle-star.png';
-            readonly particleSpark: 'demo/textures/particle-spark.png';
-            readonly particleLight: 'demo/textures/particle-light.png';
-            readonly shipA: 'demo/textures/ship-a.png';
-            readonly pixelWhite: 'demo/textures/pixel-white.png';
-            readonly pixelBlack: 'demo/textures/pixel-black.png';
-            readonly pixelTransparent: 'demo/textures/pixel-transparent.png';
-            readonly checkerboardTransparent: 'demo/textures/checkerboard-transparent.png';
-            readonly kenneyUv: 'demo/textures/kenney-uv.png';
-            readonly prototypeDark01: 'demo/textures/prototype-dark-01.png';
-            readonly prototypeLight01: 'demo/textures/prototype-light-01.png';
-            readonly prototypeGrid: 'demo/textures/prototype-grid.png';
-        };
-        readonly sprites: {
-            readonly buttons: {
-                readonly image: 'demo/sprites/buttons.png';
-                readonly data: 'demo/sprites/buttons.json';
-            };
-        };
-        readonly spritesheets: {
-            readonly buttons: {
-                readonly image: 'demo/sprites/buttons.png';
-                readonly data: 'demo/sprites/buttons.json';
-            };
-            readonly platformerBackgrounds: {
-                readonly image: 'demo/spritesheets/kenney/platformer-backgrounds.png';
-                readonly data: 'demo/spritesheets/kenney/platformer-backgrounds.json';
-            };
-            readonly platformerCharacters: {
-                readonly image: 'demo/spritesheets/kenney/platformer-characters.png';
-                readonly data: 'demo/spritesheets/kenney/platformer-characters.json';
-            };
-            readonly platformerEnemies: {
-                readonly image: 'demo/spritesheets/kenney/platformer-enemies.png';
-                readonly data: 'demo/spritesheets/kenney/platformer-enemies.json';
-            };
-            readonly platformerTiles: {
-                readonly image: 'demo/spritesheets/kenney/platformer-tiles.png';
-                readonly data: 'demo/spritesheets/kenney/platformer-tiles.json';
-            };
-            readonly backgroundElements: {
-                readonly image: 'demo/spritesheets/kenney/background-elements.png';
-                readonly data: 'demo/spritesheets/kenney/background-elements.json';
-            };
-            readonly mapPack: {
-                readonly image: 'demo/spritesheets/kenney/map-pack.png';
-                readonly data: 'demo/spritesheets/kenney/map-pack.json';
-            };
-        };
-        readonly tilesets: {
-            readonly platformer: {
-                readonly image: 'demo/spritesheets/kenney/platformer-tiles.png';
-                readonly data: 'demo/spritesheets/kenney/platformer-tiles.json';
-                readonly tileWidth: 64;
-                readonly tileHeight: 64;
-            };
-            readonly map: {
-                readonly image: 'demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png';
-                readonly tileWidth: 64;
-                readonly tileHeight: 64;
-            };
-        };
-        readonly audio: {
-            readonly uiClick: 'demo/audio/ui-click.ogg';
-            readonly uiConfirm: 'demo/audio/ui-confirm.ogg';
-            readonly uiBong: 'demo/audio/ui-bong.ogg';
-            readonly impactLight: 'demo/audio/impact-light.ogg';
-            readonly impactHeavy: 'demo/audio/impact-heavy.ogg';
-            readonly musicA: 'demo/audio/demo-loop-a.ogg';
-            readonly musicB: 'demo/audio/demo-loop-b.ogg';
-            readonly musicLoop: 'demo/audio/demo-loop-main.ogg';
-        };
-        readonly voice: {
-            readonly congratulations: 'demo/voice/congratulations.ogg';
-            readonly missionComplete: 'demo/voice/mission-complete.ogg';
-            readonly objectiveAchieved: 'demo/voice/objective-achieved.ogg';
-        };
-        readonly sound: {
-            readonly uiClick: 'demo/sound/ui-click.ogg';
-            readonly uiConfirm: 'demo/sound/ui-confirm.ogg';
-            readonly uiBong: 'demo/sound/ui-bong.ogg';
-            readonly back: 'demo/sound/back.ogg';
-            readonly clickAlt: 'demo/sound/click-alt.ogg';
-            readonly switch: 'demo/sound/switch.ogg';
-            readonly impactLight: 'demo/sound/impact-light.ogg';
-            readonly impactHeavy: 'demo/sound/impact-heavy.ogg';
-            readonly impactWood: 'demo/sound/impact-wood.ogg';
-            readonly jump: 'demo/sound/jump.ogg';
-            readonly coin: 'demo/sound/coin.ogg';
-            readonly hurt: 'demo/sound/hurt.ogg';
-            readonly powerUp: 'demo/sound/power-up.ogg';
-            readonly laser: 'demo/sound/laser.ogg';
-        };
-        readonly music: {
-            readonly loopA: 'demo/music/demo-loop-a.ogg';
-            readonly loopB: 'demo/music/demo-loop-b.ogg';
-            readonly loopMain: 'demo/music/demo-loop-main.ogg';
-            readonly jingleSuccess: 'demo/music/jingle-success.ogg';
-            readonly jingleFailure: 'demo/music/jingle-failure.ogg';
-            readonly jingleRetroA: 'demo/music/jingle-retro-a.ogg';
-            readonly jingleRetroB: 'demo/music/jingle-retro-b.ogg';
-        };
-        readonly soundSprites: {
-            readonly ui: {
-                readonly audio: 'demo/sound-sprites/ui/ui.ogg';
-                readonly data: 'demo/sound-sprites/ui/ui.json';
-            };
-            readonly impacts: {
-                readonly audio: 'demo/sound-sprites/impacts/impacts.ogg';
-                readonly data: 'demo/sound-sprites/impacts/impacts.json';
-            };
-            readonly digital: {
-                readonly audio: 'demo/sound-sprites/digital/digital.ogg';
-                readonly data: 'demo/sound-sprites/digital/digital.json';
-            };
-        };
-        readonly fonts: {
-            readonly kenneyFuture: 'demo/fonts/Kenney Future.ttf';
-            readonly kenneyPixel: 'demo/fonts/Kenney Pixel.ttf';
-            readonly kenneyMini: 'demo/fonts/Kenney Mini.ttf';
-            readonly kenneyMiniSquareMono: 'demo/fonts/Kenney Mini Square Mono.ttf';
-            readonly kenneyBlocksFnt: 'demo/fonts/kenney-blocks-32.fnt';
-            readonly kenneyBlocksPng: 'demo/fonts/kenney-blocks-32.png';
-        };
-        readonly backgrounds: {
-            readonly platformerClouds: 'demo/backgrounds/platformer-clouds.png';
-            readonly platformerHills: 'demo/backgrounds/platformer-hills.png';
-            readonly castles: 'demo/backgrounds/castles.png';
-            readonly forest: 'demo/backgrounds/forest.png';
-        };
-        readonly cursors: {
-            readonly arrow: 'demo/cursors/arrow.svg';
-            readonly pointer: 'demo/cursors/pointer.svg';
-            readonly hand: 'demo/cursors/hand.svg';
-            readonly busy: 'demo/cursors/busy.svg';
-            readonly cross: 'demo/cursors/cross.svg';
-        };
-        readonly svg: {
-            readonly play: 'demo/svg/play.svg';
-            readonly pause: 'demo/svg/pause.svg';
-            readonly reset: 'demo/svg/reset.svg';
-            readonly arrowRight: 'demo/svg/arrow-right.svg';
-            readonly sparkle: 'demo/svg/sparkle.svg';
-            readonly audioWave: 'demo/svg/audio-wave.svg';
-            readonly imagePlaceholder: 'demo/svg/image-placeholder.svg';
-            readonly runeMark: 'demo/svg/rune-mark.svg';
-        };
-        readonly video: {
-            readonly demoLoop: 'demo/video/demo-loop.webm';
-            readonly highRes: 'demo/video/high-res.mp4';
-            readonly highFps: 'demo/video/high-fps.webm';
-            readonly hdr10: 'demo/video/hdr10.webm';
-        };
-        readonly inputPrompts: {
-            readonly generic: {
-                readonly image: 'demo/input-prompts/generic.png';
-                readonly data: 'demo/input-prompts/generic.json';
-            };
-            readonly xboxSeries: {
-                readonly image: 'demo/input-prompts/xbox-series.png';
-                readonly data: 'demo/input-prompts/xbox-series.json';
-            };
-            readonly playstationSeries: {
-                readonly image: 'demo/input-prompts/playstation-series.png';
-                readonly data: 'demo/input-prompts/playstation-series.json';
-            };
-            readonly nintendoSwitch: {
-                readonly image: 'demo/input-prompts/nintendo-switch.png';
-                readonly data: 'demo/input-prompts/nintendo-switch.json';
-            };
-            readonly keyboardMouse: {
-                readonly image: 'demo/input-prompts/keyboard-mouse.png';
-                readonly data: 'demo/input-prompts/keyboard-mouse.json';
-            };
-        };
-        readonly vendor: {
-            readonly kenneyManifest: 'demo/vendor/kenney/manifest.json';
-        };
-    };
-    readonly technical: {
-        readonly alpha: {
-            readonly alphaEdgeStraight: 'technical/alpha/alpha-edge-straight.png';
-            readonly alphaGradientRings: 'technical/alpha/alpha-gradient-rings.png';
-        };
-        readonly filtering: {
-            readonly checker256: 'technical/filtering/checker-256.png';
-            readonly pixelGrid128: 'technical/filtering/pixel-grid-128.png';
-            readonly uvGrid256: 'technical/filtering/uv-grid-256.png';
-        };
-        readonly color: {
-            readonly srgbRamp: 'technical/color/srgb-ramp.png';
-            readonly hueRamp: 'technical/color/hue-ramp.png';
-            readonly primaryRamp: 'technical/color/primary-ramp.png';
-        };
-    };
-}
-
-declare global {
-    const assets: ExampleAssetCatalog;
-
-    interface Window {
-        readonly assets: ExampleAssetCatalog;
-    }
-}
-
-export {};
diff --git a/examples/shared/runtime.d.ts b/examples/shared/runtime.d.ts
index 1b5d45a35..b1fc0e346 100644
--- a/examples/shared/runtime.d.ts
+++ b/examples/shared/runtime.d.ts
@@ -33,10 +33,6 @@ export interface ExampleRuntimeMeta {
     order?: number;
     status?: string;
 }
-export interface ExampleRuntime {
-    assets: Record<string, unknown>;
-    assetUrl?: (path: string) => string;
-}
 declare global {
     interface Window {
         __EXAMPLE_META__?: ExampleRuntimeMeta | null;
@@ -72,6 +68,8 @@ export interface ControlPanelHandle {
         max?: number;
         step?: number;
         value?: number;
+        /** Readout text for a value; two decimals when omitted. */
+        format?: (value: number) => string;
         onChange?: (value: number) => void;
     }): ControlBinding<number>;
     addToggle(options: {
@@ -141,3 +139,71 @@ export declare const trackPressButtons: (canvas: HTMLCanvasElement) => PressButt
  * consistent, discoverable way instead of hand-rolling canvas hit-tests.
  */
 export declare const mountControlPanel: (options?: MountControlPanelOptions) => ControlPanelHandle;
+/** A numeric range control. */
+export interface SliderSpec {
+    readonly kind: 'slider';
+    readonly label: string;
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly value: number;
+    readonly format?: (value: number) => string;
+}
+/** An on/off control. */
+export interface ToggleSpec {
+    readonly kind: 'toggle';
+    readonly label: string;
+    readonly value: boolean;
+}
+/** One of a fixed list of named options; shows the name and its position, e.g. `Screen (5/18)`. */
+export interface ChoiceSpec<T extends string = string> {
+    readonly kind: 'choice';
+    readonly label: string;
+    readonly options: readonly T[];
+    readonly value: T;
+}
+export type DemoControlSpec = SliderSpec | ToggleSpec | ChoiceSpec;
+/** The value type a control spec holds. */
+export type DemoControlValue<S> = S extends SliderSpec ? number : S extends ToggleSpec ? boolean : S extends ChoiceSpec<infer T> ? T : never;
+export type DemoPanelValues<C extends Record<string, DemoControlSpec>> = {
+    -readonly [K in keyof C]: DemoControlValue<C[K]>;
+};
+export declare const slider: (label: string, options: {
+    min: number;
+    max: number;
+    value: number;
+    step?: number;
+    format?: (value: number) => string;
+}) => SliderSpec;
+export declare const toggle: (label: string, value?: boolean) => ToggleSpec;
+export declare const choice: <const T extends string>(label: string, options: readonly T[], value?: T) => ChoiceSpec<T>;
+export interface DemoPanelOptions<C extends Record<string, DemoControlSpec>> {
+    title?: string;
+    corner?: OverlayCorner;
+    controls: C;
+    /** Buttons below the controls, in order. */
+    actions?: Record<string, () => void>;
+    /**
+     * Applies a changed value to the scene. Called once with every key on mount,
+     * then for each change from a control or from `set`/`step`.
+     */
+    onChange?: <K extends keyof C>(key: K, value: DemoControlValue<C[K]>, values: Readonly<DemoPanelValues<C>>) => void;
+}
+/** Handle returned by {@link demoPanel}. */
+export interface DemoPanel<C extends Record<string, DemoControlSpec>> {
+    readonly element: HTMLElement;
+    /** Current values; read-only, change them through `set` or `step`. */
+    readonly values: Readonly<DemoPanelValues<C>>;
+    set<K extends keyof C>(key: K, value: DemoControlValue<C[K]>): void;
+    /** Moves a choice by `delta` options (wrapping), a slider by `delta` steps (clamped), or flips a toggle. */
+    step(key: keyof C, delta?: number): void;
+    /** A short status line under the controls; an empty string hides it. */
+    status(text: string): void;
+    dispose(): void;
+}
+/**
+ * Mounts a small control panel from a declarative control list and keeps one
+ * value per control. Keyboard shortcuts should call `set`/`step` so the panel
+ * and the shortcut never disagree.
+ */
+export declare const demoPanel: <const C extends Record<string, DemoControlSpec>>(options: DemoPanelOptions<C>) => DemoPanel<C>;
diff --git a/examples/shared/runtime.js b/examples/shared/runtime.js
index b850f4d39..e96943d29 100644
--- a/examples/shared/runtime.js
+++ b/examples/shared/runtime.js
@@ -240,7 +240,7 @@ export const mountControlPanel = (options = {}) => {
   panel.addEventListener('pointerdown', stop);
   return {
     element: panel,
-    addSlider({ label, min = 0, max = 1, step = 0.01, value = min, onChange }) {
+    addSlider({ label, min = 0, max = 1, step = 0.01, value = min, format = v => v.toFixed(2), onChange }) {
       const row = createControlRowContainer();
       const input = document.createElement('input');
       const readout = document.createElement('span');
@@ -260,7 +260,7 @@ export const mountControlPanel = (options = {}) => {
         font: `600 12px ${FONT_STACK}`,
       });
       const render = v => {
-        readout.textContent = Number(v).toFixed(2);
+        readout.textContent = format(Number(v));
       };
       render(value);
       input.addEventListener('input', () => {
@@ -387,3 +387,109 @@ export const mountControlPanel = (options = {}) => {
     },
   };
 };
+export const slider = (label, options) => ({ kind: 'slider', step: (options.max - options.min) / 100, ...options, label });
+export const toggle = (label, value = false) => ({ kind: 'toggle', label, value });
+export const choice = (label, options, value = options[0]) => ({
+  kind: 'choice',
+  label,
+  options,
+  value,
+});
+/**
+ * Mounts a small control panel from a declarative control list and keeps one
+ * value per control. Keyboard shortcuts should call `set`/`step` so the panel
+ * and the shortcut never disagree.
+ */
+export const demoPanel = options => {
+  const panel = mountControlPanel({ title: options.title, corner: options.corner });
+  const values = {};
+  const renderers = new Map();
+  const keys = Object.keys(options.controls);
+  const statusEl = document.createElement('div');
+  const commit = (key, value, fromControl) => {
+    values[key] = value;
+    if (!fromControl) {
+      renderers.get(key)?.set(value);
+    }
+    options.onChange?.(key, value, values);
+  };
+  for (const key of keys) {
+    const spec = options.controls[key];
+    switch (spec.kind) {
+      case 'slider': {
+        values[key] = spec.value;
+        renderers.set(
+          key,
+          panel.addSlider({
+            label: spec.label,
+            min: spec.min,
+            max: spec.max,
+            step: spec.step,
+            value: spec.value,
+            format: spec.format,
+            onChange: value => commit(key, value, true),
+          }),
+        );
+        break;
+      }
+      case 'toggle': {
+        values[key] = spec.value;
+        renderers.set(
+          key,
+          panel.addToggle({
+            label: spec.label,
+            value: spec.value,
+            onChange: value => commit(key, value, true),
+          }),
+        );
+        break;
+      }
+      case 'choice': {
+        const labelled = spec.options.map((name, index) => `${name} (${index + 1}/${spec.options.length})`);
+        const binding = panel.addCycle({
+          label: spec.label,
+          options: labelled,
+          index: Math.max(0, spec.options.indexOf(spec.value)),
+          onChange: index => commit(key, spec.options[index], true),
+        });
+        values[key] = spec.value;
+        renderers.set(key, { set: value => binding.set(spec.options.indexOf(value)) });
+        break;
+      }
+    }
+  }
+  for (const [label, run] of Object.entries(options.actions ?? {})) {
+    panel.addButton({ label, onClick: run });
+  }
+  Object.assign(statusEl.style, { marginTop: '6px', font: `600 12px ${FONT_STACK}`, color: '#9fd0ff' });
+  statusEl.setAttribute('aria-live', 'polite');
+  statusEl.hidden = true;
+  panel.element.append(statusEl);
+  const handle = {
+    element: panel.element,
+    values,
+    set: (key, value) => commit(key, value, false),
+    step(key, delta = 1) {
+      const spec = options.controls[key];
+      if (spec.kind === 'toggle') {
+        commit(key, !values[key], false);
+      } else if (spec.kind === 'choice') {
+        const count = spec.options.length;
+        const index = spec.options.indexOf(values[key]);
+        commit(key, spec.options[(((index + delta) % count) + count) % count], false);
+      } else {
+        const next = Math.min(spec.max, Math.max(spec.min, values[key] + delta * spec.step));
+        commit(key, next, false);
+      }
+    },
+    status(text) {
+      statusEl.textContent = text;
+      statusEl.hidden = text === '';
+    },
+    dispose: () => panel.dispose(),
+  };
+  for (const key of keys) {
+    options.onChange?.(key, values[key], values);
+  }
+  return handle;
+};
diff --git a/examples/shared/runtime.ts b/examples/shared/runtime.ts
index 1a0b51c5b..624b335ae 100644
--- a/examples/shared/runtime.ts
+++ b/examples/shared/runtime.ts
@@ -46,16 +46,10 @@ export interface ExampleRuntimeMeta {
   status?: string;
 }
 
-export interface ExampleRuntime {
-  assets: Record<string, unknown>;
-  assetUrl?: (path: string) => string;
-}
-
 declare global {
   interface Window {
     __EXAMPLE_META__?: ExampleRuntimeMeta | null;
     __EXAMPLE_PREVIEW_AUTOPLAY__?: (() => void | Promise<void>) | null;
-    // `assets` is declared (typed) in assets-global.d.ts.
   }
 
   // Declared on the global scope as well as on `Window`: the runner injects the
@@ -97,6 +91,8 @@ export interface ControlPanelHandle {
     max?: number;
     step?: number;
     value?: number;
+    /** Readout text for a value; two decimals when omitted. */
+    format?: (value: number) => string;
     onChange?: (value: number) => void;
   }): ControlBinding<number>;
   addToggle(options: { label: string; value?: boolean; onChange?: (value: boolean) => void }): ControlBinding<boolean>;
@@ -443,7 +439,7 @@ export const mountControlPanel = (options: MountControlPanelOptions = {}): Contr
   return {
     element: panel,
 
-    addSlider({ label, min = 0, max = 1, step = 0.01, value = min, onChange }) {
+    addSlider({ label, min = 0, max = 1, step = 0.01, value = min, format = v => v.toFixed(2), onChange }) {
       const row = createControlRowContainer();
       const input = document.createElement('input');
       const readout = document.createElement('span');
@@ -466,7 +462,7 @@ export const mountControlPanel = (options: MountControlPanelOptions = {}): Contr
       });
 
       const render = (v: number) => {
-        readout.textContent = Number(v).toFixed(2);
+        readout.textContent = format(Number(v));
       };
 
       render(value);
@@ -620,3 +616,204 @@ export const mountControlPanel = (options: MountControlPanelOptions = {}): Contr
     },
   };
 };
+
+// ---------------------------------------------------------------------------
+// Declarative demo panel
+//
+// One state object drives both the visible controls and any keyboard or pointer
+// shortcut an example adds: shortcuts call `panel.set()`/`panel.step()`, the
+// controls re-render from the same value, and `onChange` applies it to the scene
+// in exactly one place.
+// ---------------------------------------------------------------------------
+
+/** A numeric range control. */
+export interface SliderSpec {
+  readonly kind: 'slider';
+  readonly label: string;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly value: number;
+  readonly format?: (value: number) => string;
+}
+
+/** An on/off control. */
+export interface ToggleSpec {
+  readonly kind: 'toggle';
+  readonly label: string;
+  readonly value: boolean;
+}
+
+/** One of a fixed list of named options; shows the name and its position, e.g. `Screen (5/18)`. */
+export interface ChoiceSpec<T extends string = string> {
+  readonly kind: 'choice';
+  readonly label: string;
+  readonly options: readonly T[];
+  readonly value: T;
+}
+
+export type DemoControlSpec = SliderSpec | ToggleSpec | ChoiceSpec;
+
+/** The value type a control spec holds. */
+export type DemoControlValue<S> = S extends SliderSpec
+  ? number
+  : S extends ToggleSpec
+    ? boolean
+    : S extends ChoiceSpec<infer T>
+      ? T
+      : never;
+
+export type DemoPanelValues<C extends Record<string, DemoControlSpec>> = { -readonly [K in keyof C]: DemoControlValue<C[K]> };
+
+export const slider = (
+  label: string,
+  options: { min: number; max: number; value: number; step?: number; format?: (value: number) => string },
+): SliderSpec => ({ kind: 'slider', step: (options.max - options.min) / 100, ...options, label });
+
+export const toggle = (label: string, value = false): ToggleSpec => ({ kind: 'toggle', label, value });
+
+export const choice = <const T extends string>(label: string, options: readonly T[], value: T = options[0]!): ChoiceSpec<T> => ({
+  kind: 'choice',
+  label,
+  options,
+  value,
+});
+
+export interface DemoPanelOptions<C extends Record<string, DemoControlSpec>> {
+  title?: string;
+  corner?: OverlayCorner;
+  controls: C;
+  /** Buttons below the controls, in order. */
+  actions?: Record<string, () => void>;
+  /**
+   * Applies a changed value to the scene. Called once with every key on mount,
+   * then for each change from a control or from `set`/`step`.
+   */
+  onChange?: <K extends keyof C>(key: K, value: DemoControlValue<C[K]>, values: Readonly<DemoPanelValues<C>>) => void;
+}
+
+/** Handle returned by {@link demoPanel}. */
+export interface DemoPanel<C extends Record<string, DemoControlSpec>> {
+  readonly element: HTMLElement;
+  /** Current values; read-only, change them through `set` or `step`. */
+  readonly values: Readonly<DemoPanelValues<C>>;
+  set<K extends keyof C>(key: K, value: DemoControlValue<C[K]>): void;
+  /** Moves a choice by `delta` options (wrapping), a slider by `delta` steps (clamped), or flips a toggle. */
+  step(key: keyof C, delta?: number): void;
+  /** A short status line under the controls; an empty string hides it. */
+  status(text: string): void;
+  dispose(): void;
+}
+
+/**
+ * Mounts a small control panel from a declarative control list and keeps one
+ * value per control. Keyboard shortcuts should call `set`/`step` so the panel
+ * and the shortcut never disagree.
+ */
+export const demoPanel = <const C extends Record<string, DemoControlSpec>>(options: DemoPanelOptions<C>): DemoPanel<C> => {
+  const panel = mountControlPanel({ title: options.title, corner: options.corner });
+  const values = {} as DemoPanelValues<C>;
+  const renderers = new Map<keyof C, ControlBinding<never>>();
+  const keys = Object.keys(options.controls) as Array<keyof C>;
+  const statusEl = document.createElement('div');
+
+  const commit = <K extends keyof C>(key: K, value: DemoControlValue<C[K]>, fromControl: boolean): void => {
+    values[key] = value as DemoPanelValues<C>[K];
+
+    if (!fromControl) {
+      renderers.get(key)?.set(value as never);
+    }
+
+    options.onChange?.(key, value, values);
+  };
+
+  for (const key of keys) {
+    const spec = options.controls[key]!;
+
+    switch (spec.kind) {
+      case 'slider': {
+        values[key] = spec.value as DemoPanelValues<C>[typeof key];
+        renderers.set(
+          key,
+          panel.addSlider({
+            label: spec.label,
+            min: spec.min,
+            max: spec.max,
+            step: spec.step,
+            value: spec.value,
+            format: spec.format,
+            onChange: value => commit(key, value as DemoControlValue<C[typeof key]>, true),
+          }) as ControlBinding<never>,
+        );
+        break;
+      }
+      case 'toggle': {
+        values[key] = spec.value as DemoPanelValues<C>[typeof key];
+        renderers.set(
+          key,
+          panel.addToggle({
+            label: spec.label,
+            value: spec.value,
+            onChange: value => commit(key, value as DemoControlValue<C[typeof key]>, true),
+          }) as ControlBinding<never>,
+        );
+        break;
+      }
+      case 'choice': {
+        const labelled = spec.options.map((name, index) => `${name} (${index + 1}/${spec.options.length})`);
+        const binding = panel.addCycle({
+          label: spec.label,
+          options: labelled,
+          index: Math.max(0, spec.options.indexOf(spec.value)),
+          onChange: index => commit(key, spec.options[index] as DemoControlValue<C[typeof key]>, true),
+        });
+
+        values[key] = spec.value as DemoPanelValues<C>[typeof key];
+        renderers.set(key, { set: (value: never) => binding.set(spec.options.indexOf(value)) });
+        break;
+      }
+    }
+  }
+
+  for (const [label, run] of Object.entries(options.actions ?? {})) {
+    panel.addButton({ label, onClick: run });
+  }
+
+  Object.assign(statusEl.style, { marginTop: '6px', font: `600 12px ${FONT_STACK}`, color: '#9fd0ff' });
+  statusEl.setAttribute('aria-live', 'polite');
+  statusEl.hidden = true;
+  panel.element.append(statusEl);
+
+  const handle: DemoPanel<C> = {
+    element: panel.element,
+    values,
+    set: (key, value) => commit(key, value, false),
+    step(key, delta = 1) {
+      const spec = options.controls[key]!;
+
+      if (spec.kind === 'toggle') {
+        commit(key, !values[key] as DemoControlValue<C[typeof key]>, false);
+      } else if (spec.kind === 'choice') {
+        const count = spec.options.length;
+        const index = spec.options.indexOf(values[key] as string);
+
+        commit(key, spec.options[(((index + delta) % count) + count) % count] as DemoControlValue<C[typeof key]>, false);
+      } else {
+        const next = Math.min(spec.max, Math.max(spec.min, (values[key] as number) + delta * spec.step));
+
+        commit(key, next as DemoControlValue<C[typeof key]>, false);
+      }
+    },
+    status(text) {
+      statusEl.textContent = text;
+      statusEl.hidden = text === '';
+    },
+    dispose: () => panel.dispose(),
+  };
+
+  for (const key of keys) {
+    options.onChange?.(key, values[key], values);
+  }
+
+  return handle;
+};
diff --git a/examples/showcase/audio-reactive-particles.js b/examples/showcase/audio-reactive-particles.js
index 546541c42..65ed7d6fd 100644
--- a/examples/showcase/audio-reactive-particles.js
+++ b/examples/showcase/audio-reactive-particles.js
@@ -1,8 +1,8 @@
 // Auto-generated from audio-reactive-particles.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Text, Vector } from '@codexo/exojs';
-import { AudioAnalyser, BeatDetector } from '@codexo/exojs-audio-fx';
-import { AlphaFadeOverLifetime, ConeDirection, Constant, particlesExtension, ParticleSystem, RateSpawn } from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Scene, Text, Vector } from '@codexo/exojs';
+import { AudioAnalyser, BeatDetector } from '@codexo/exojs/audio-fx';
+import { AlphaFadeOverLifetime, ConeDirection, Constant, particlesExtension, ParticleSystem, RateSpawn } from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const colors = [new Color(255, 120, 140), new Color(120, 220, 255), new Color(130, 255, 170), new Color(255, 220, 120)];
 class AudioReactiveParticlesScene extends Scene {
   music;
@@ -13,7 +13,6 @@ class AudioReactiveParticlesScene extends Scene {
   spawn;
   rate;
   cone;
-  hud;
   tapPrompt;
   async load() {
     const app = this.app;
@@ -21,13 +20,13 @@ class AudioReactiveParticlesScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
     // Two parallel taps of the same track: the analyser gives per-band
     // energy (drives emission), the detector gives beats (recolours).
     this.analyser = new AudioAnalyser({ fftSize: 1024, source: app.audio.music });
     this.detector = new BeatDetector();
     this.detector.source = app.audio.music;
-    this.ps = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 6000 });
+    this.ps = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 6000 });
     this.systems.add(this.ps);
     this.ps.setPosition(width / 2, height / 2);
     // The rate (density) and the cone speed range (spread) are mutated every
@@ -50,12 +49,6 @@ class AudioReactiveParticlesScene extends Scene {
     this.detector.onBeat.add(() => {
       this.spawn.config.tint = new Constant(colors[(Math.random() * colors.length) | 0]);
     });
-    this.hud = mountControls({
-      title: 'Audio Reactive Particles',
-      controls: [{ keys: 'Audio', action: 'bass → density · treble → spread' }],
-      status: 'Listening…',
-      hint: 'Density follows low-band energy; spread follows high-band energy. Silence = still.',
-    });
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued music starts.
     this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
@@ -63,21 +56,18 @@ class AudioReactiveParticlesScene extends Scene {
       .setPosition(width / 2, height - 64);
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
   update(_delta) {
     // Low band (bass) drives how MANY particles spawn this second.
     const low = this.analyser.getBandEnergy(20, 180);
     // High band (treble) drives how WIDE the velocity cone fans out.
     const high = this.analyser.getBandEnergy(2000, 16000);
-    // bass → density: 0 in silence, up to ~1200 particles/s on heavy bass.
+    // Bass drives density: 0 in silence, up to ~1200 particles/s on heavy bass.
     this.rate.value = low * low * 1200;
-    // treble → spread: a tight slow core grows into a fast wide burst.
+    // Treble drives spread: a tight slow core grows into a fast wide burst.
     this.cone.minSpeed = 40 + high * 120;
     this.cone.maxSpeed = 90 + high * 360;
-    if (this.musicVoice) {
-      this.hud.setStatus(`bass ${(low * 100) | 0}%  treble ${(high * 100) | 0}%`);
-    }
   }
   draw(context) {
     const app = this.app;
diff --git a/examples/showcase/audio-reactive-particles.ts b/examples/showcase/audio-reactive-particles.ts
index a14e4c1e4..bcc4ec39c 100644
--- a/examples/showcase/audio-reactive-particles.ts
+++ b/examples/showcase/audio-reactive-particles.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -11,9 +10,9 @@ import {
   Vector,
   type Voice,
 } from '@codexo/exojs';
-import { AudioAnalyser, BeatDetector } from '@codexo/exojs-audio-fx';
-import { AlphaFadeOverLifetime, ConeDirection, Constant, particlesExtension, ParticleSystem, RateSpawn } from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+import { AudioAnalyser, BeatDetector } from '@codexo/exojs/audio-fx';
+import { AlphaFadeOverLifetime, ConeDirection, Constant, particlesExtension, ParticleSystem, RateSpawn } from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const colors = [new Color(255, 120, 140), new Color(120, 220, 255), new Color(130, 255, 170), new Color(255, 220, 120)];
 
@@ -26,7 +25,6 @@ class AudioReactiveParticlesScene extends Scene {
   private spawn!: RateSpawn;
   private rate!: Constant<number>;
   private cone!: ConeDirection;
-  private hud!: ReturnType<typeof mountControls>;
   private tapPrompt!: Text;
 
   override async load(): Promise<void> {
@@ -36,7 +34,7 @@ class AudioReactiveParticlesScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
 
     // Two parallel taps of the same track: the analyser gives per-band
     // energy (drives emission), the detector gives beats (recolours).
@@ -44,7 +42,7 @@ class AudioReactiveParticlesScene extends Scene {
     this.detector = new BeatDetector();
     this.detector.source = app.audio.music;
 
-    this.ps = new ParticleSystem(this.loader.get(assets.demo.textures.particleLight), { capacity: 6000 });
+    this.ps = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 6000 });
     this.systems.add(this.ps);
     this.ps.setPosition(width / 2, height / 2);
 
@@ -70,13 +68,6 @@ class AudioReactiveParticlesScene extends Scene {
       this.spawn.config.tint = new Constant(colors[(Math.random() * colors.length) | 0]);
     });
 
-    this.hud = mountControls({
-      title: 'Audio Reactive Particles',
-      controls: [{ keys: 'Audio', action: 'bass → density · treble → spread' }],
-      status: 'Listening…',
-      hint: 'Density follows low-band energy; spread follows high-band energy. Silence = still.',
-    });
-
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued music starts.
     this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
@@ -85,7 +76,7 @@ class AudioReactiveParticlesScene extends Scene {
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
 
   override update(_delta: Seconds): void {
@@ -94,16 +85,12 @@ class AudioReactiveParticlesScene extends Scene {
     // High band (treble) drives how WIDE the velocity cone fans out.
     const high = this.analyser.getBandEnergy(2000, 16000);
 
-    // bass → density: 0 in silence, up to ~1200 particles/s on heavy bass.
+    // Bass drives density: 0 in silence, up to ~1200 particles/s on heavy bass.
     this.rate.value = low * low * 1200;
 
-    // treble → spread: a tight slow core grows into a fast wide burst.
+    // Treble drives spread: a tight slow core grows into a fast wide burst.
     this.cone.minSpeed = 40 + high * 120;
     this.cone.maxSpeed = 90 + high * 360;
-
-    if (this.musicVoice) {
-      this.hud.setStatus(`bass ${(low * 100) | 0}%  treble ${(high * 100) | 0}%`);
-    }
   }
 
   override draw(context: RenderingContext): void {
diff --git a/examples/showcase/audio-visualisation.js b/examples/showcase/audio-visualisation.js
index 10976a446..e66da30a2 100644
--- a/examples/showcase/audio-visualisation.js
+++ b/examples/showcase/audio-visualisation.js
@@ -1,7 +1,7 @@
 // Auto-generated from audio-visualisation.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text, Texture } from '@codexo/exojs';
-import { AudioAnalyser, BeatDetector } from '@codexo/exojs-audio-fx';
-import { mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text, Texture } from '@codexo/exojs';
+import { AudioAnalyser, BeatDetector } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const BAND_LABELS = ['Sub', 'Bass', 'Low mid', 'Mid', 'High mid', 'Presence', 'Treble', 'Air'];
 class AudioVisualisationScene extends Scene {
   music;
@@ -14,7 +14,6 @@ class AudioVisualisationScene extends Scene {
   progressStyle = 'rgba(255, 255, 255, 0.1)';
   texture;
   screen;
-  hud;
   tapPrompt;
   bandEdges = [];
   async load() {
@@ -23,7 +22,7 @@ class AudioVisualisationScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
     // One analyser tap for spectrum/waveform, one beat detector for the
     // beat-pulse ring. Both read the music bus the stream plays through,
     // without altering playback.
@@ -50,12 +49,6 @@ class AudioVisualisationScene extends Scene {
     this.gradientStyle.addColorStop(1, '#f70');
     this.texture = new Texture(this.canvas);
     this.screen = new Sprite(this.texture);
-    this.hud = mountControls({
-      title: 'Spectrum and Waveform',
-      controls: [{ keys: 'Click', action: 'play / pause' }],
-      status: 'Playing…',
-      hint: 'Live spectrum, waveform, eight frequency bands, and a beat pulse from the music bus.',
-    });
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued music starts.
     this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
@@ -72,11 +65,10 @@ class AudioVisualisationScene extends Scene {
       } else {
         this.musicVoice.pause();
       }
-      this.hud.setStatus(this.musicVoice.paused ? 'Paused' : 'Playing…');
     });
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
   draw(context) {
     const app = this.app;
@@ -144,7 +136,8 @@ class AudioVisualisationScene extends Scene {
     }
     this.screen.updateTexture();
     context.render(this.screen);
-    if (app.audio.locked) {
+    if (app.audio.locked || this.musicVoice.paused) {
+      this.tapPrompt.text = app.audio.locked ? 'Click or press any key to start the music' : 'Paused - click to resume';
       context.render(this.tapPrompt);
     }
   }
diff --git a/examples/showcase/audio-visualisation.ts b/examples/showcase/audio-visualisation.ts
index 971ef0aca..8428ccb9c 100644
--- a/examples/showcase/audio-visualisation.ts
+++ b/examples/showcase/audio-visualisation.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -13,8 +12,8 @@ import {
   Texture,
   type Voice,
 } from '@codexo/exojs';
-import { AudioAnalyser, BeatDetector } from '@codexo/exojs-audio-fx';
-import { mountControls } from '@examples/runtime';
+import { AudioAnalyser, BeatDetector } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const BAND_LABELS = ['Sub', 'Bass', 'Low mid', 'Mid', 'High mid', 'Presence', 'Treble', 'Air'];
 
@@ -29,7 +28,6 @@ class AudioVisualisationScene extends Scene {
   private progressStyle = 'rgba(255, 255, 255, 0.1)';
   private texture!: Texture;
   private screen!: Sprite;
-  private hud!: ReturnType<typeof mountControls>;
   private tapPrompt!: Text;
   private bandEdges: number[] = [];
 
@@ -40,7 +38,7 @@ class AudioVisualisationScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
 
     // One analyser tap for spectrum/waveform, one beat detector for the
     // beat-pulse ring. Both read the music bus the stream plays through,
@@ -75,13 +73,6 @@ class AudioVisualisationScene extends Scene {
     this.texture = new Texture(this.canvas);
     this.screen = new Sprite(this.texture);
 
-    this.hud = mountControls({
-      title: 'Spectrum and Waveform',
-      controls: [{ keys: 'Click', action: 'play / pause' }],
-      status: 'Playing…',
-      hint: 'Live spectrum, waveform, eight frequency bands, and a beat pulse from the music bus.',
-    });
-
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the queued music starts.
     this.tapPrompt = new Text('Click or press any key to start the music', { fillColor: Color.white, fontSize: 22, align: 'center' })
@@ -100,13 +91,11 @@ class AudioVisualisationScene extends Scene {
       } else {
         this.musicVoice.pause();
       }
-
-      this.hud.setStatus(this.musicVoice.paused ? 'Paused' : 'Playing…');
     });
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 }) as Voice & Pausable & Seekable;
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 }) as Voice & Pausable & Seekable;
   }
 
   override draw(context: RenderingContext): void {
@@ -191,7 +180,8 @@ class AudioVisualisationScene extends Scene {
 
     context.render(this.screen);
 
-    if (app.audio.locked) {
+    if (app.audio.locked || this.musicVoice.paused) {
+      this.tapPrompt.text = app.audio.locked ? 'Click or press any key to start the music' : 'Paused - click to resume';
       context.render(this.tapPrompt);
     }
   }
diff --git a/examples/showcase/boss-intro-cinematic.js b/examples/showcase/boss-intro-cinematic.js
index 87f4fd95e..431846afe 100644
--- a/examples/showcase/boss-intro-cinematic.js
+++ b/examples/showcase/boss-intro-cinematic.js
@@ -1,6 +1,6 @@
 // Auto-generated from boss-intro-cinematic.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Sprite, Text, Time, View } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Sprite, Text, Time, View } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const titleText = 'VOID EMPEROR';
 class BossIntroCinematicScene extends Scene {
   view;
@@ -12,7 +12,7 @@ class BossIntroCinematicScene extends Scene {
   boss;
   music;
   musicVoice;
-  hud;
+  finished = false;
   tapPrompt;
   width = 0;
   height = 0;
@@ -30,21 +30,13 @@ class BossIntroCinematicScene extends Scene {
     this.title = new Text('', { fillColor: Color.white, fontSize: 56, fontWeight: 'bold' });
     this.title.setPosition(width * 0.12, height * 0.2);
     this.titleState = { count: 0 };
-    this.boss = new Sprite(this.loader.get(assets.demo.textures.shipA))
+    this.boss = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(0.4)
       .setPosition(width * 0.62, height / 2)
       .setTint(new Color(255, 130, 130));
-    // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
-    // is loaded directly through `Asset.type('music', ...)` and awaited rather
-    // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.music.loopMain));
-    this.hud = mountControls({
-      title: 'Boss Intro Cinematic',
-      controls: [{ keys: ['R', 'Click'], action: 'replay sequence' }],
-      status: 'Playing…',
-      hint: 'Push-in, letterbox bars, a typewriter title reveal, and a screen shake punched on the reveal beat.',
-    });
+    // Music has no placeholder handle, so it is awaited with `load()`.
+    this.music = await this.loader.load(assets.musicLoopMain);
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the sting + cinematic start.
     this.tapPrompt = new Text('Click or press any key to start the cinematic', { fillColor: Color.white, fontSize: 22, align: 'center' })
@@ -69,7 +61,6 @@ class BossIntroCinematicScene extends Scene {
       this.musicVoice.resume();
     }
     this.playSequence();
-    this.hud.setStatus('Replaying…');
   };
   playSequence = () => {
     const { width, height } = this;
@@ -82,6 +73,7 @@ class BossIntroCinematicScene extends Scene {
     this.barSize.v = 0;
     this.titleState.count = 0;
     this.title.text = '';
+    this.finished = false;
     this.boss.setScale(0.4);
     // Letterbox bars slam in.
     this.sequenceTweens.push(this.tweens.create(this.barSize).to({ v: 84 }, 0.6).start());
@@ -106,10 +98,13 @@ class BossIntroCinematicScene extends Scene {
         .onUpdate(() => {
           this.title.text = titleText.slice(0, this.titleState.count | 0);
         })
+        .onComplete(() => {
+          this.finished = true;
+        })
         .start(),
     );
     // Music swells up under the reveal.
-    this.sequenceTweens.push(this.tweens.create(this.musicVoice).to({ volume: 0.85 }, 2).start());
+    this.sequenceTweens.push(this.tweens.create(this.musicVoice).to({ volume: 0.6 }, 2).start());
   };
   draw(context) {
     const app = this.app;
@@ -126,7 +121,10 @@ class BossIntroCinematicScene extends Scene {
     this.bars.drawRectangle(0, 0, width, this.barSize.v);
     this.bars.drawRectangle(0, height - this.barSize.v, width, this.barSize.v);
     context.render(this.bars, { view: context.screenView });
-    if (app.audio.locked) {
+    // The replay hint appears only once the sequence has played out, so it
+    // never competes with the cinematic itself.
+    if (app.audio.locked || this.finished) {
+      this.tapPrompt.text = app.audio.locked ? 'Click or press any key to start the cinematic' : 'Press R or click to replay';
       context.render(this.tapPrompt, { view: context.screenView });
     }
   }
@@ -137,7 +135,6 @@ class BossIntroCinematicScene extends Scene {
     this.app.audio.onUnlock.remove(this.playSequence);
     this.app.input.onPointerDown.remove(this.replay);
     this.musicVoice?.stop();
-    this.hud?.dispose();
     super.destroy();
   }
 }
diff --git a/examples/showcase/boss-intro-cinematic.ts b/examples/showcase/boss-intro-cinematic.ts
index d608986d4..b50ac8579 100644
--- a/examples/showcase/boss-intro-cinematic.ts
+++ b/examples/showcase/boss-intro-cinematic.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -16,7 +15,7 @@ import {
   View,
   type Voice,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const titleText = 'VOID EMPEROR';
 
@@ -30,7 +29,7 @@ class BossIntroCinematicScene extends Scene {
   private boss!: Sprite;
   private music!: AudioStream;
   private musicVoice!: Voice & Seekable & Pausable;
-  private hud!: ReturnType<typeof mountControls>;
+  private finished = false;
   private tapPrompt!: Text;
   private width = 0;
   private height = 0;
@@ -50,22 +49,13 @@ class BossIntroCinematicScene extends Scene {
     this.title = new Text('', { fillColor: Color.white, fontSize: 56, fontWeight: 'bold' });
     this.title.setPosition(width * 0.12, height * 0.2);
     this.titleState = { count: 0 };
-    this.boss = new Sprite(this.loader.get(assets.demo.textures.shipA))
+    this.boss = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(0.4)
       .setPosition(width * 0.62, height / 2)
       .setTint(new Color(255, 130, 130));
-    // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
-    // is loaded directly through `Asset.type('music', ...)` and awaited rather
-    // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.music.loopMain));
-
-    this.hud = mountControls({
-      title: 'Boss Intro Cinematic',
-      controls: [{ keys: ['R', 'Click'], action: 'replay sequence' }],
-      status: 'Playing…',
-      hint: 'Push-in, letterbox bars, a typewriter title reveal, and a screen shake punched on the reveal beat.',
-    });
+    // Music has no placeholder handle, so it is awaited with `load()`.
+    this.music = await this.loader.load(assets.musicLoopMain);
 
     // Shown while the browser still blocks audio (`app.audio.locked`); the
     // first click or keypress unlocks it and the sting + cinematic start.
@@ -98,7 +88,6 @@ class BossIntroCinematicScene extends Scene {
     }
 
     this.playSequence();
-    this.hud.setStatus('Replaying…');
   };
 
   private readonly playSequence = (): void => {
@@ -114,6 +103,7 @@ class BossIntroCinematicScene extends Scene {
     this.barSize.v = 0;
     this.titleState.count = 0;
     this.title.text = '';
+    this.finished = false;
     this.boss.setScale(0.4);
 
     // Letterbox bars slam in.
@@ -139,10 +129,13 @@ class BossIntroCinematicScene extends Scene {
         .onUpdate(() => {
           this.title.text = titleText.slice(0, this.titleState.count | 0);
         })
+        .onComplete(() => {
+          this.finished = true;
+        })
         .start(),
     );
     // Music swells up under the reveal.
-    this.sequenceTweens.push(this.tweens.create(this.musicVoice).to({ volume: 0.85 }, 2).start());
+    this.sequenceTweens.push(this.tweens.create(this.musicVoice).to({ volume: 0.6 }, 2).start());
   };
 
   override draw(context: RenderingContext): void {
@@ -162,7 +155,10 @@ class BossIntroCinematicScene extends Scene {
     this.bars.drawRectangle(0, height - this.barSize.v, width, this.barSize.v);
     context.render(this.bars, { view: context.screenView });
 
-    if (app.audio.locked) {
+    // The replay hint appears only once the sequence has played out, so it
+    // never competes with the cinematic itself.
+    if (app.audio.locked || this.finished) {
+      this.tapPrompt.text = app.audio.locked ? 'Click or press any key to start the cinematic' : 'Press R or click to replay';
       context.render(this.tapPrompt, { view: context.screenView });
     }
   }
@@ -175,7 +171,6 @@ class BossIntroCinematicScene extends Scene {
     this.app.audio.onUnlock.remove(this.playSequence);
     this.app.input.onPointerDown.remove(this.replay);
     this.musicVoice?.stop();
-    this.hud?.dispose();
     super.destroy();
   }
 }
diff --git a/examples/showcase/color-grading.js b/examples/showcase/color-grading.js
index a15fbee96..b93720577 100644
--- a/examples/showcase/color-grading.js
+++ b/examples/showcase/color-grading.js
@@ -1,5 +1,6 @@
 // Auto-generated from color-grading.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Keyboard, LutFilter, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const LUT_SIZE = 17;
 const buildLut3D = transform => {
@@ -59,7 +60,7 @@ const LOOKS = [
   },
   { name: 'Identity (off)', transform: (r, g, b) => [r, g, b] },
 ];
-const PRIMARY_RAMP = assets.technical.color.primaryRamp;
+const PRIMARY_RAMP = assets.primaryRamp;
 class ColorGradingScene extends Scene {
   luts;
   filter;
diff --git a/examples/showcase/color-grading.ts b/examples/showcase/color-grading.ts
index 5eb023b5c..21d8ab4c2 100644
--- a/examples/showcase/color-grading.ts
+++ b/examples/showcase/color-grading.ts
@@ -9,6 +9,7 @@ import {
   Sprite,
   type Texture,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 const LUT_SIZE = 17;
@@ -83,7 +84,7 @@ const LOOKS = [
   { name: 'Identity (off)', transform: (r: number, g: number, b: number): [number, number, number] => [r, g, b] },
 ];
 
-const PRIMARY_RAMP = assets.technical.color.primaryRamp;
+const PRIMARY_RAMP = assets.primaryRamp;
 
 class ColorGradingScene extends Scene {
   private luts!: Texture[];
diff --git a/examples/showcase/damage-flash.js b/examples/showcase/damage-flash.js
index e1381b583..1b49aa7b8 100644
--- a/examples/showcase/damage-flash.js
+++ b/examples/showcase/damage-flash.js
@@ -1,5 +1,6 @@
 // Auto-generated from damage-flash.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Signal, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 class DamageFlashScene extends Scene {
   hit;
@@ -11,7 +12,7 @@ class DamageFlashScene extends Scene {
     const app = this.app;
     const { width, height } = app;
     this.hit = new Signal();
-    this.ship = new Sprite(this.loader.get('image/ship-a.png'))
+    this.ship = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(2.2)
       .setPosition(width / 2, height / 2);
@@ -51,8 +52,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(DamageFlashScene);
diff --git a/examples/showcase/damage-flash.ts b/examples/showcase/damage-flash.ts
index 3270fc9ea..e6df966bb 100644
--- a/examples/showcase/damage-flash.ts
+++ b/examples/showcase/damage-flash.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Signal, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 class DamageFlashScene extends Scene {
@@ -13,7 +14,7 @@ class DamageFlashScene extends Scene {
     const { width, height } = app;
 
     this.hit = new Signal();
-    this.ship = new Sprite(this.loader.get('image/ship-a.png'))
+    this.ship = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(2.2)
       .setPosition(width / 2, height / 2);
@@ -58,9 +59,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(DamageFlashScene);
diff --git a/examples/showcase/dialog-system.js b/examples/showcase/dialog-system.js
index 8ae1953be..3a8b6424c 100644
--- a/examples/showcase/dialog-system.js
+++ b/examples/showcase/dialog-system.js
@@ -1,6 +1,6 @@
 // Auto-generated from dialog-system.ts - edit the .ts source, not this file.
-import { Application, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { Application, Button, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const lines = [
   { speaker: 'Commander Vale', text: 'Commander, the anomaly has entered low orbit.' },
   { speaker: 'Commander Vale', text: 'All wings hold formation and await my signal.' },
@@ -12,13 +12,13 @@ class DialogSystemScene extends Scene {
   box;
   choicePrompt;
   beep;
-  hud;
-  panel;
+  replyButtons = [];
   lineIndex = 0;
   chars = 0;
   timer = 0;
   done = false;
   awaitingChoice = false;
+  restartPending = false;
   init() {
     const app = this.app;
     const { width, height } = app;
@@ -29,19 +29,14 @@ class DialogSystemScene extends Scene {
     this.box.setPosition(textX, height * 0.56);
     this.choicePrompt = new Text('', { fillColor: new Color(150, 220, 255), fontSize: 20 });
     this.choicePrompt.setPosition(textX, height * 0.78);
-    this.beep = this.loader.get(assets.demo.sound.uiConfirm);
-    this.hud = mountControls({
-      title: 'Dialogue and Choices',
-      controls: [{ keys: 'Click', action: 'advance / reveal' }],
-      hint: 'Click anywhere to skip the typewriter, then click again to continue.',
+    this.beep = this.loader.get(assets.soundUiConfirm);
+    this.replyButtons = choices.map((reply, index) => {
+      const button = new Button({ label: reply, width: 220, height: 48 });
+      button.anchorIn(this.ui, 'top-left', textX + index * 240, height * 0.78);
+      button.onClick.add(() => this.choose(reply));
+      this.ui.addChild(button);
+      return button;
     });
-    // Choice buttons live in a predictable DOM panel so they never compete
-    // with the canvas pointer for "advance" taps. They stay hidden until the
-    // final line finishes typing.
-    this.panel = mountControlPanel({ title: 'Your reply', corner: 'bottom-left' });
-    for (const choice of choices) {
-      this.panel.addButton({ label: choice, onClick: () => this.choose(choice) });
-    }
     this.setChoicesVisible(false);
     app.input.onPointerTap.add(() => this.advance());
   }
@@ -74,19 +69,25 @@ class DialogSystemScene extends Scene {
     const app = this.app;
     app.audio.play(this.beep, { playbackRate: 1.2, volume: 0.3 });
     this.choicePrompt.text = `You chose: ${choice}`;
-    this.hud.setStatus(`Reply: ${choice}`);
-    this.awaitingChoice = false;
     this.setChoicesVisible(false);
-    // Loop back to the top so the demo can be replayed without a reload.
-    this.lineIndex = 0;
-    this.startLine();
+    // The tap that pressed the button must not also advance the restarted
+    // dialogue, so the loop back to the top waits for the next update.
+    this.restartPending = true;
   }
   setChoicesVisible(visible) {
-    this.panel.element.style.display = visible ? '' : 'none';
+    for (const button of this.replyButtons) {
+      button.visible = visible;
+    }
     this.choicePrompt.visible = !visible && this.choicePrompt.text.length > 0;
   }
   update(delta) {
     const app = this.app;
+    if (this.restartPending) {
+      this.restartPending = false;
+      this.awaitingChoice = false;
+      this.lineIndex = 0;
+      this.startLine();
+    }
     if (!this.done && !this.awaitingChoice) {
       this.timer += delta;
       while (this.timer > 0.035 && this.chars < lines[this.lineIndex].text.length) {
diff --git a/examples/showcase/dialog-system.ts b/examples/showcase/dialog-system.ts
index a96c6fcc0..9f8500c3d 100644
--- a/examples/showcase/dialog-system.ts
+++ b/examples/showcase/dialog-system.ts
@@ -1,5 +1,6 @@
 import {
   Application,
+  Button,
   Color,
   FixedResolutionCanvasSizing,
   type RenderingContext,
@@ -8,7 +9,7 @@ import {
   type Sound,
   Text,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 interface DialogLine {
   speaker: string;
@@ -28,13 +29,13 @@ class DialogSystemScene extends Scene {
   private box!: Text;
   private choicePrompt!: Text;
   private beep!: Sound;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private replyButtons: Button[] = [];
   private lineIndex = 0;
   private chars = 0;
   private timer = 0;
   private done = false;
   private awaitingChoice = false;
+  private restartPending = false;
 
   override init(): void {
     const app = this.app;
@@ -51,22 +52,17 @@ class DialogSystemScene extends Scene {
     this.choicePrompt = new Text('', { fillColor: new Color(150, 220, 255), fontSize: 20 });
     this.choicePrompt.setPosition(textX, height * 0.78);
 
-    this.beep = this.loader.get(assets.demo.sound.uiConfirm);
+    this.beep = this.loader.get(assets.soundUiConfirm);
 
-    this.hud = mountControls({
-      title: 'Dialogue and Choices',
-      controls: [{ keys: 'Click', action: 'advance / reveal' }],
-      hint: 'Click anywhere to skip the typewriter, then click again to continue.',
-    });
+    this.replyButtons = choices.map((reply, index) => {
+      const button = new Button({ label: reply, width: 220, height: 48 });
 
-    // Choice buttons live in a predictable DOM panel so they never compete
-    // with the canvas pointer for "advance" taps. They stay hidden until the
-    // final line finishes typing.
-    this.panel = mountControlPanel({ title: 'Your reply', corner: 'bottom-left' });
+      button.anchorIn(this.ui, 'top-left', textX + index * 240, height * 0.78);
+      button.onClick.add(() => this.choose(reply));
+      this.ui.addChild(button);
 
-    for (const choice of choices) {
-      this.panel.addButton({ label: choice, onClick: () => this.choose(choice) });
-    }
+      return button;
+    });
 
     this.setChoicesVisible(false);
 
@@ -109,22 +105,30 @@ class DialogSystemScene extends Scene {
     const app = this.app;
     app.audio.play(this.beep, { playbackRate: 1.2, volume: 0.3 });
     this.choicePrompt.text = `You chose: ${choice}`;
-    this.hud.setStatus(`Reply: ${choice}`);
-    this.awaitingChoice = false;
     this.setChoicesVisible(false);
-    // Loop back to the top so the demo can be replayed without a reload.
-    this.lineIndex = 0;
-    this.startLine();
+    // The tap that pressed the button must not also advance the restarted
+    // dialogue, so the loop back to the top waits for the next update.
+    this.restartPending = true;
   }
 
   private setChoicesVisible(visible: boolean): void {
-    this.panel.element.style.display = visible ? '' : 'none';
+    for (const button of this.replyButtons) {
+      button.visible = visible;
+    }
+
     this.choicePrompt.visible = !visible && this.choicePrompt.text.length > 0;
   }
 
   override update(delta: Seconds): void {
     const app = this.app;
 
+    if (this.restartPending) {
+      this.restartPending = false;
+      this.awaitingChoice = false;
+      this.lineIndex = 0;
+      this.startLine();
+    }
+
     if (!this.done && !this.awaitingChoice) {
       this.timer += delta;
 
diff --git a/examples/showcase/gamepad-spaceship.js b/examples/showcase/gamepad-spaceship.js
index 60fd56b24..3ef2d7a8d 100644
--- a/examples/showcase/gamepad-spaceship.js
+++ b/examples/showcase/gamepad-spaceship.js
@@ -33,7 +33,8 @@ import {
   ParticleSystem,
   Range,
   ScaleOverLifetime,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const random = new Random(7);
 class GamepadSpaceshipScene extends Scene {
@@ -75,7 +76,7 @@ class GamepadSpaceshipScene extends Scene {
       this.stars.fillColor = new Color(200, 215, 255, brightness);
       this.stars.drawCircle(random.next(0, width), random.next(0, height), random.next(0.6, 1.8));
     }
-    this.ship = new Sprite(this.loader.get(assets.demo.textures.shipA))
+    this.ship = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(0.75)
       .setPosition(width / 2, height / 2);
@@ -91,7 +92,7 @@ class GamepadSpaceshipScene extends Scene {
     // already unlocked.
     app.audio.onUnlock.add(this.startEngine);
     this.fx = new Graphics();
-    this.particles = new ParticleSystem(this.loader.get(assets.demo.textures.particleSpark), { capacity: 4000 });
+    this.particles = new ParticleSystem(this.loader.get(assets.particleSpark), { capacity: 4000 });
     this.particles.setBlendMode(BlendModes.Additive);
     this.systems.add(this.particles);
     this.burst = new BurstSpawn({
@@ -132,14 +133,7 @@ class GamepadSpaceshipScene extends Scene {
     })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 40);
-    this.hud = mountControls({
-      title: 'Fly a Spaceship',
-      controls: [
-        { keys: 'WASD / Arrows / Left stick', action: 'steer and thrust' },
-        { keys: 'Space / Right trigger', action: 'fire' },
-      ],
-      status: 'Score: 0',
-    });
+    this.hud = mountControls({ status: 'Score: 0' });
   }
   startEngine = () => {
     this.engine ??= this.app.audio.play(new AudioGenerator({ type: 'sawtooth', frequency: 55 }), { bus: this.engineBus, volume: 0 });
diff --git a/examples/showcase/gamepad-spaceship.ts b/examples/showcase/gamepad-spaceship.ts
index 56db2ad7e..5c7434bc4 100644
--- a/examples/showcase/gamepad-spaceship.ts
+++ b/examples/showcase/gamepad-spaceship.ts
@@ -36,7 +36,8 @@ import {
   ParticleSystem,
   Range,
   ScaleOverLifetime,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 interface Bullet {
@@ -105,7 +106,7 @@ class GamepadSpaceshipScene extends Scene {
       this.stars.drawCircle(random.next(0, width), random.next(0, height), random.next(0.6, 1.8));
     }
 
-    this.ship = new Sprite(this.loader.get(assets.demo.textures.shipA))
+    this.ship = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(0.75)
       .setPosition(width / 2, height / 2);
@@ -125,7 +126,7 @@ class GamepadSpaceshipScene extends Scene {
 
     this.fx = new Graphics();
 
-    this.particles = new ParticleSystem(this.loader.get(assets.demo.textures.particleSpark), { capacity: 4000 });
+    this.particles = new ParticleSystem(this.loader.get(assets.particleSpark), { capacity: 4000 });
     this.particles.setBlendMode(BlendModes.Additive);
     this.systems.add(this.particles);
     this.burst = new BurstSpawn({
@@ -169,14 +170,7 @@ class GamepadSpaceshipScene extends Scene {
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 40);
 
-    this.hud = mountControls({
-      title: 'Fly a Spaceship',
-      controls: [
-        { keys: 'WASD / Arrows / Left stick', action: 'steer and thrust' },
-        { keys: 'Space / Right trigger', action: 'fire' },
-      ],
-      status: 'Score: 0',
-    });
+    this.hud = mountControls({ status: 'Score: 0' });
   }
 
   private readonly startEngine = (): void => {
diff --git a/examples/showcase/loading-progress-with-shader.js b/examples/showcase/loading-progress-with-shader.js
index bcb071ef8..de2fef34b 100644
--- a/examples/showcase/loading-progress-with-shader.js
+++ b/examples/showcase/loading-progress-with-shader.js
@@ -1,5 +1,6 @@
 // Auto-generated from loading-progress-with-shader.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, ShaderFilter, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const glsl = `#version 300 es
 precision mediump float; uniform float uProgress; in vec2 vUv; out vec4 fragColor;
 void main(){ vec2 p=vUv-0.5; float r=length(p); float a=atan(p.y,p.x); float t=(a+3.1415926)/(6.2831852);
@@ -26,7 +27,7 @@ class LoadingProgressWithShaderScene extends Scene {
     this.progress = { v: 0 };
     this.label = new Text('0%', { fillColor: Color.white, fontSize: 42, align: 'center' });
     this.label.setAnchor(0.5, 0.5).setPosition(width / 2, height / 2);
-    this.ring = new Sprite(this.loader.get('image/uv-grid-256.png'))
+    this.ring = new Sprite(this.loader.get(assets.uvGrid256))
       .setAnchor(0.5)
       .setScale(2.4)
       .setPosition(width / 2, height / 2);
@@ -53,8 +54,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(14, 18, 28),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(LoadingProgressWithShaderScene);
diff --git a/examples/showcase/loading-progress-with-shader.ts b/examples/showcase/loading-progress-with-shader.ts
index fb6da61f9..40da1498d 100644
--- a/examples/showcase/loading-progress-with-shader.ts
+++ b/examples/showcase/loading-progress-with-shader.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, ShaderFilter, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const glsl = `#version 300 es
 precision mediump float; uniform float uProgress; in vec2 vUv; out vec4 fragColor;
@@ -29,7 +30,7 @@ class LoadingProgressWithShaderScene extends Scene {
     this.progress = { v: 0 };
     this.label = new Text('0%', { fillColor: Color.white, fontSize: 42, align: 'center' });
     this.label.setAnchor(0.5, 0.5).setPosition(width / 2, height / 2);
-    this.ring = new Sprite(this.loader.get('image/uv-grid-256.png'))
+    this.ring = new Sprite(this.loader.get(assets.uvGrid256))
       .setAnchor(0.5)
       .setScale(2.4)
       .setPosition(width / 2, height / 2);
@@ -60,9 +61,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(14, 18, 28),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(LoadingProgressWithShaderScene);
diff --git a/examples/showcase/low-band-camera-shake.js b/examples/showcase/low-band-camera-shake.js
index d86f8cb11..6e35af26f 100644
--- a/examples/showcase/low-band-camera-shake.js
+++ b/examples/showcase/low-band-camera-shake.js
@@ -1,6 +1,7 @@
 // Auto-generated from low-band-camera-shake.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text, Time, View } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite, Text, Time, View } from '@codexo/exojs';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 class LowBandCameraShakeScene extends Scene {
   music;
@@ -16,10 +17,10 @@ class LowBandCameraShakeScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
     this.analyser = new AudioAnalyser({ fftSize: 1024, source: app.audio.music });
     this.view = new View(width / 2, height / 2, width, height);
-    this.sprite = new Sprite(this.loader.get(assets.demo.textures.shipA))
+    this.sprite = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(3)
       .setPosition(width / 2, height / 2);
@@ -36,7 +37,7 @@ class LowBandCameraShakeScene extends Scene {
       .setPosition(width / 2, height - 64);
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
   update() {
     const low = this.analyser.getBandEnergy(20, 180);
diff --git a/examples/showcase/low-band-camera-shake.ts b/examples/showcase/low-band-camera-shake.ts
index 683b70d7f..97d9957cb 100644
--- a/examples/showcase/low-band-camera-shake.ts
+++ b/examples/showcase/low-band-camera-shake.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -12,7 +11,8 @@ import {
   View,
   type Voice,
 } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 class LowBandCameraShakeScene extends Scene {
@@ -31,10 +31,10 @@ class LowBandCameraShakeScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
     this.analyser = new AudioAnalyser({ fftSize: 1024, source: app.audio.music });
     this.view = new View(width / 2, height / 2, width, height);
-    this.sprite = new Sprite(this.loader.get(assets.demo.textures.shipA))
+    this.sprite = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(3)
       .setPosition(width / 2, height / 2);
@@ -54,7 +54,7 @@ class LowBandCameraShakeScene extends Scene {
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
 
   override update(): void {
diff --git a/examples/showcase/minimap-with-mask.js b/examples/showcase/minimap-with-mask.js
index 3e7637ef1..2d882eff9 100644
--- a/examples/showcase/minimap-with-mask.js
+++ b/examples/showcase/minimap-with-mask.js
@@ -106,8 +106,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(MinimapWithMaskScene);
diff --git a/examples/showcase/minimap-with-mask.ts b/examples/showcase/minimap-with-mask.ts
index 6e72a595b..ba211559e 100644
--- a/examples/showcase/minimap-with-mask.ts
+++ b/examples/showcase/minimap-with-mask.ts
@@ -121,9 +121,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(MinimapWithMaskScene);
diff --git a/examples/showcase/mouse-parallax.js b/examples/showcase/mouse-parallax.js
index 4bb9f00ad..99a02f6b7 100644
--- a/examples/showcase/mouse-parallax.js
+++ b/examples/showcase/mouse-parallax.js
@@ -55,8 +55,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 22, 34),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(MouseParallaxScene);
diff --git a/examples/showcase/mouse-parallax.ts b/examples/showcase/mouse-parallax.ts
index 26b47989c..da7ec05c8 100644
--- a/examples/showcase/mouse-parallax.ts
+++ b/examples/showcase/mouse-parallax.ts
@@ -67,9 +67,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 22, 34),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(MouseParallaxScene);
diff --git a/examples/showcase/pause-blur.js b/examples/showcase/pause-blur.js
index 14aaea6c7..d38eff2ad 100644
--- a/examples/showcase/pause-blur.js
+++ b/examples/showcase/pause-blur.js
@@ -11,6 +11,7 @@ import {
   SceneAvailability,
   Sprite,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const PAUSE_BLUR_STRENGTH = 3;
 const PAUSE_FADE_SECONDS = 0.35;
@@ -26,7 +27,7 @@ class GameScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'))
+    this.sprite = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(2)
       .setPosition(width * 0.72, height / 2);
@@ -40,12 +41,7 @@ class GameScene extends Scene {
     this.pauseLabel.anchorIn(this.ui, 'center');
     this.pauseLabel.visible = false;
     this.ui.addChild(this.pauseLabel);
-    this.hud = mountControls({
-      title: 'Pause Menu',
-      controls: [{ keys: 'Esc / Click', action: 'pause / resume' }],
-      status: 'Running',
-      hint: 'Scene updates stop while paused; the application tween still fades in the blur.',
-    });
+    this.hud = mountControls({ status: 'Running' });
     this.inputs.onTrigger(Keyboard.Escape, () => this.togglePause(), { when: SceneAvailability.Always });
     app.input.onPointerDown.add(this.onPointerDown);
   }
@@ -90,8 +86,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(20, 24, 34),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 void app.start(GameScene);
diff --git a/examples/showcase/pause-blur.ts b/examples/showcase/pause-blur.ts
index c16badbf2..fc48bce00 100644
--- a/examples/showcase/pause-blur.ts
+++ b/examples/showcase/pause-blur.ts
@@ -12,6 +12,7 @@ import {
   Sprite,
   type Tween,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 const PAUSE_BLUR_STRENGTH = 3;
@@ -31,7 +32,7 @@ class GameScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png'))
+    this.sprite = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(2)
       .setPosition(width * 0.72, height / 2);
@@ -48,12 +49,7 @@ class GameScene extends Scene {
     this.pauseLabel.visible = false;
     this.ui.addChild(this.pauseLabel);
 
-    this.hud = mountControls({
-      title: 'Pause Menu',
-      controls: [{ keys: 'Esc / Click', action: 'pause / resume' }],
-      status: 'Running',
-      hint: 'Scene updates stop while paused; the application tween still fades in the blur.',
-    });
+    this.hud = mountControls({ status: 'Running' });
 
     this.inputs.onTrigger(Keyboard.Escape, () => this.togglePause(), { when: SceneAvailability.Always });
     app.input.onPointerDown.add(this.onPointerDown);
@@ -106,9 +102,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(20, 24, 34),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 void app.start(GameScene);
diff --git a/examples/showcase/rectangles-collision.js b/examples/showcase/rectangles-collision.js
index 0be6d0aa7..0f23990b3 100644
--- a/examples/showcase/rectangles-collision.js
+++ b/examples/showcase/rectangles-collision.js
@@ -1,5 +1,6 @@
 // Auto-generated from rectangles-collision.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const CLEAR_TINT = new Color(120, 200, 255);
 const OVERLAP_TINT = new Color(255, 90, 90);
@@ -11,7 +12,7 @@ class RectanglesCollisionScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/hue-ramp.png');
+    const texture = this.loader.get(assets.hueRamp);
     // Two axis-aligned rectangles (no rotation) so collision is a true AABB
     // test. Explicit width/height drive the sprite scale; anchor 0.5 keeps the
     // drag offset and the bounds centred on the pointer-grabbed point.
@@ -24,12 +25,7 @@ class RectanglesCollisionScene extends Scene {
     this.addChild(this.boxA);
     this.addChild(this.boxB);
     this.overlap = new Graphics();
-    this.hud = mountControls({
-      title: 'Rectangles Collision',
-      controls: [{ keys: 'Drag', action: 'move a rectangle' }],
-      status: 'No overlap',
-      hint: 'Drag either rectangle over the other — the AABB overlap region lights up.',
-    });
+    this.hud = mountControls({ status: 'No overlap' });
   }
   makeBox(texture, w, h) {
     const box = new Sprite(texture).setAnchor(0.5);
@@ -76,8 +72,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 22, 30),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(RectanglesCollisionScene);
diff --git a/examples/showcase/rectangles-collision.ts b/examples/showcase/rectangles-collision.ts
index 0cf6f3ef5..43163a56e 100644
--- a/examples/showcase/rectangles-collision.ts
+++ b/examples/showcase/rectangles-collision.ts
@@ -8,6 +8,7 @@ import {
   Sprite,
   type Texture,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 const CLEAR_TINT = new Color(120, 200, 255);
@@ -22,7 +23,7 @@ class RectanglesCollisionScene extends Scene {
   override init(): void {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/hue-ramp.png');
+    const texture = this.loader.get(assets.hueRamp);
 
     // Two axis-aligned rectangles (no rotation) so collision is a true AABB
     // test. Explicit width/height drive the sprite scale; anchor 0.5 keeps the
@@ -40,12 +41,7 @@ class RectanglesCollisionScene extends Scene {
 
     this.overlap = new Graphics();
 
-    this.hud = mountControls({
-      title: 'Rectangles Collision',
-      controls: [{ keys: 'Drag', action: 'move a rectangle' }],
-      status: 'No overlap',
-      hint: 'Drag either rectangle over the other — the AABB overlap region lights up.',
-    });
+    this.hud = mountControls({ status: 'No overlap' });
   }
 
   private makeBox(texture: Texture, w: number, h: number): Sprite {
@@ -101,9 +97,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 22, 30),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(RectanglesCollisionScene);
diff --git a/examples/showcase/screen-shake-on-explosion.js b/examples/showcase/screen-shake-on-explosion.js
index 51170029a..cbf9d7c00 100644
--- a/examples/showcase/screen-shake-on-explosion.js
+++ b/examples/showcase/screen-shake-on-explosion.js
@@ -1,7 +1,7 @@
 // Auto-generated from screen-shake-on-explosion.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite, Time, Vector, View } from '@codexo/exojs';
-import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class ScreenShakeOnExplosionScene extends Scene {
   view;
   ps;
@@ -9,22 +9,15 @@ class ScreenShakeOnExplosionScene extends Scene {
   burst;
   ship;
   flash = new Color(255, 255, 255);
-  hits = 0;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
     this.view = new View(width / 2, height / 2, width, height);
-    this.ship = new Sprite(this.loader.get('image/ship-a.png'))
+    this.ship = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(2.2)
       .setPosition(width / 2, height / 2);
-    this.hud = mountControls({
-      title: 'Impact Feedback',
-      controls: [{ keys: 'Click', action: 'flash the ship, burst particles, and shake the camera' }],
-      status: 'Hits: 0',
-    });
-    this.ps = new ParticleSystem(this.loader.get('image/particle-light.png'), { capacity: 5000 });
+    this.ps = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 5000 });
     this.systems.add(this.ps);
     this.ps.setPosition(width / 2, height / 2);
     this.burstPos = new Vector(0, 0);
@@ -41,8 +34,6 @@ class ScreenShakeOnExplosionScene extends Scene {
       this.burstPos.set(p.x - this.ps.position.x, p.y - this.ps.position.y);
       this.burst.reset();
       this.view.shake(22, Time.seconds(0.28), { frequency: 26, decay: true });
-      this.hits++;
-      this.hud.setStatus(`Hits: ${this.hits}`);
       this.flash.set(255, 120, 120, 1);
       app.tweens.create(this.flash).to({ r: 255, g: 255, b: 255 }, 0.2).start();
     });
@@ -64,9 +55,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
   extensions: [particlesExtension],
 });
 await app.start(ScreenShakeOnExplosionScene);
diff --git a/examples/showcase/screen-shake-on-explosion.ts b/examples/showcase/screen-shake-on-explosion.ts
index 67d7d7e0e..e3c7a4823 100644
--- a/examples/showcase/screen-shake-on-explosion.ts
+++ b/examples/showcase/screen-shake-on-explosion.ts
@@ -1,6 +1,6 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Sprite, Time, Vector, View } from '@codexo/exojs';
-import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';
-import { mountControls } from '@examples/runtime';
+import { AlphaFadeOverLifetime, BurstSpawn, ConeDirection, Constant, particlesExtension, ParticleSystem } from '@codexo/exojs/particles';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class ScreenShakeOnExplosionScene extends Scene {
   private view!: View;
@@ -9,24 +9,17 @@ class ScreenShakeOnExplosionScene extends Scene {
   private burst!: BurstSpawn;
   private ship!: Sprite;
   private flash = new Color(255, 255, 255);
-  private hits = 0;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const app = this.app;
     const { width, height } = app;
 
     this.view = new View(width / 2, height / 2, width, height);
-    this.ship = new Sprite(this.loader.get('image/ship-a.png'))
+    this.ship = new Sprite(this.loader.get(assets.ship))
       .setAnchor(0.5)
       .setScale(2.2)
       .setPosition(width / 2, height / 2);
-    this.hud = mountControls({
-      title: 'Impact Feedback',
-      controls: [{ keys: 'Click', action: 'flash the ship, burst particles, and shake the camera' }],
-      status: 'Hits: 0',
-    });
-    this.ps = new ParticleSystem(this.loader.get('image/particle-light.png'), { capacity: 5000 });
+    this.ps = new ParticleSystem(this.loader.get(assets.particleLight), { capacity: 5000 });
     this.systems.add(this.ps);
     this.ps.setPosition(width / 2, height / 2);
     this.burstPos = new Vector(0, 0);
@@ -43,8 +36,6 @@ class ScreenShakeOnExplosionScene extends Scene {
       this.burstPos.set(p.x - this.ps.position.x, p.y - this.ps.position.y);
       this.burst.reset();
       this.view.shake(22, Time.seconds(0.28), { frequency: 26, decay: true });
-      this.hits++;
-      this.hud.setStatus(`Hits: ${this.hits}`);
       this.flash.set(255, 120, 120, 1);
       app.tweens.create(this.flash).to({ r: 255, g: 255, b: 255 }, 0.2).start();
     });
@@ -69,9 +60,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
   extensions: [particlesExtension],
 });
 
diff --git a/examples/showcase/typewriter-text.js b/examples/showcase/typewriter-text.js
index be63c8733..a67c82d40 100644
--- a/examples/showcase/typewriter-text.js
+++ b/examples/showcase/typewriter-text.js
@@ -1,5 +1,6 @@
 // Auto-generated from typewriter-text.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const message = 'ExoJS gives you explicit rendering control with a compact scene and asset workflow.';
 class TypewriterTextScene extends Scene {
   sound;
@@ -10,7 +11,7 @@ class TypewriterTextScene extends Scene {
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sound = this.loader.get('audio/ui-click.ogg');
+    this.sound = this.loader.get(assets.soundUiClick);
     this.text = new Text('', { fillColor: Color.white, fontSize: 40, lineHeight: 1.4, maxWidth: 900 });
     this.text.setAnchor(0, 0.5).setPosition(width * 0.12, height / 2);
     this.progress = { count: 0 };
@@ -53,8 +54,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TypewriterTextScene);
diff --git a/examples/showcase/typewriter-text.ts b/examples/showcase/typewriter-text.ts
index 60f79aefe..805c1874a 100644
--- a/examples/showcase/typewriter-text.ts
+++ b/examples/showcase/typewriter-text.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, type Sound, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const message = 'ExoJS gives you explicit rendering control with a compact scene and asset workflow.';
 
@@ -13,7 +14,7 @@ class TypewriterTextScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sound = this.loader.get('audio/ui-click.ogg');
+    this.sound = this.loader.get(assets.soundUiClick);
     this.text = new Text('', { fillColor: Color.white, fontSize: 40, lineHeight: 1.4, maxWidth: 900 });
     this.text.setAnchor(0, 0.5).setPosition(width * 0.12, height / 2);
     this.progress = { count: 0 };
@@ -62,9 +63,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TypewriterTextScene);
diff --git a/examples/showcase/vinyl-record.js b/examples/showcase/vinyl-record.js
index c78f6afa0..c0e437369 100644
--- a/examples/showcase/vinyl-record.js
+++ b/examples/showcase/vinyl-record.js
@@ -1,6 +1,7 @@
 // Auto-generated from vinyl-record.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 class VinylRecordScene extends Scene {
   music;
@@ -18,7 +19,7 @@ class VinylRecordScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
     this.analyser = new AudioAnalyser({ fftSize: 1024, source: app.audio.music });
     this.disc = new Graphics();
     this.bars = new Graphics();
@@ -35,7 +36,7 @@ class VinylRecordScene extends Scene {
       .setPosition(width / 2, height - 64);
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
   update(delta) {
     // Spin speed is driven by live audio energy, not a constant fallback BPM.
diff --git a/examples/showcase/vinyl-record.ts b/examples/showcase/vinyl-record.ts
index dfde49af8..7a2586b91 100644
--- a/examples/showcase/vinyl-record.ts
+++ b/examples/showcase/vinyl-record.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   type AudioStream,
   Color,
   FixedResolutionCanvasSizing,
@@ -11,7 +10,8 @@ import {
   Text,
   type Voice,
 } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 class VinylRecordScene extends Scene {
@@ -32,7 +32,7 @@ class VinylRecordScene extends Scene {
     // AudioStream is a non-leaf resource kind (no seamless placeholder), so it
     // is loaded directly through `Asset.type('music', ...)` and awaited rather
     // than fetched synchronously via `get()`.
-    this.music = await this.loader.load(Asset.type('music', assets.demo.audio.musicLoop));
+    this.music = await this.loader.load(assets.musicLoopMain);
     this.analyser = new AudioAnalyser({ fftSize: 1024, source: app.audio.music });
     this.disc = new Graphics();
     this.bars = new Graphics();
@@ -52,7 +52,7 @@ class VinylRecordScene extends Scene {
 
     // Core defers playback until the AudioContext unlocks on the first
     // gesture, then starts automatically - play() returns the Voice now.
-    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.8 });
+    this.musicVoice = app.audio.play(this.music, { loop: true, volume: 0.6 });
   }
 
   override update(delta: Seconds): void {
diff --git a/examples/spatial-audio/falloff-curves.js b/examples/spatial-audio/falloff-curves.js
index 5f24b1782..13625d724 100644
--- a/examples/spatial-audio/falloff-curves.js
+++ b/examples/spatial-audio/falloff-curves.js
@@ -1,5 +1,6 @@
 // Auto-generated from falloff-curves.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sound, Text } from '@codexo/exojs';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sound, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 // Horizontal placement (0..1 of canvas width) for each source; absolute pixel
 // positions are resolved against the canvas in init().
@@ -45,7 +46,7 @@ class FalloffCurvesScene extends Scene {
     // Each derived Sound below reads .audioBuffer synchronously, so the
     // shared source must be fully decoded first - await load() instead of
     // the deferred get() (whose placeholder audioBuffer is null until fill).
-    const source = await this.loader.load(Asset.type('sound', 'audio/impact-light.ogg'));
+    const source = await this.loader.load(assets.soundImpactLight);
     this.sounds = this.sources.map(() => new Sound(source.audioBuffer));
     this.graphics = new Graphics();
     this.labels = this.sources.map(({ model, x, y }) => {
@@ -137,8 +138,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(FalloffCurvesScene);
diff --git a/examples/spatial-audio/falloff-curves.ts b/examples/spatial-audio/falloff-curves.ts
index c0448fbbb..3cdee51ca 100644
--- a/examples/spatial-audio/falloff-curves.ts
+++ b/examples/spatial-audio/falloff-curves.ts
@@ -1,4 +1,5 @@
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, Sound, Text } from '@codexo/exojs';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, Sound, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 type FalloffModel = 'linear' | 'inverse' | 'exponential';
@@ -67,7 +68,7 @@ class FalloffCurvesScene extends Scene {
     // Each derived Sound below reads .audioBuffer synchronously, so the
     // shared source must be fully decoded first - await load() instead of
     // the deferred get() (whose placeholder audioBuffer is null until fill).
-    const source = await this.loader.load(Asset.type('sound', 'audio/impact-light.ogg'));
+    const source = await this.loader.load(assets.soundImpactLight);
     this.sounds = this.sources.map(() => new Sound(source.audioBuffer));
 
     this.graphics = new Graphics();
@@ -178,9 +179,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(FalloffCurvesScene);
diff --git a/examples/spatial-audio/listener-and-source.js b/examples/spatial-audio/listener-and-source.js
index 9441c3d0b..c93076252 100644
--- a/examples/spatial-audio/listener-and-source.js
+++ b/examples/spatial-audio/listener-and-source.js
@@ -1,6 +1,6 @@
 // Auto-generated from listener-and-source.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sound, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 // Spatial parameters tuned to the canvas so attenuation is visible across the
 // wide 1280px canvas. These mirror the Web Audio distance models (see
 // DistanceModel in src/audio/Sound.ts) so the on-screen readout matches what
@@ -56,11 +56,7 @@ class ListenerAndSourceScene extends Scene {
   graphics;
   readout;
   tapPrompt;
-  hud;
   panel;
-  mode = 'drag';
-  model = 'linear';
-  playing = true;
   angle = 0;
   init() {
     const app = this.app;
@@ -77,44 +73,25 @@ class ListenerAndSourceScene extends Scene {
     this.tapPrompt = new Text('Click or press any key to start audio', { fillColor: Color.white, fontSize: 22, align: 'center' })
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
-    this.hud = mountControls({
-      title: 'Spatial Audio',
-      controls: [{ keys: 'Drag', action: 'move the source in drag mode' }],
-      status: 'Click or press any key to start…',
-      hint: 'Best with headphones. Left/right follows the direction to the source; loudness follows the falloff model.',
-    });
-    this.panel = mountControlPanel({ title: 'Source and falloff' });
-    this.panel.addCycle({
-      label: 'Movement',
-      options: ['Drag', 'Orbit'],
-      onChange: index => {
-        this.mode = index === 0 ? 'drag' : 'orbit';
-        this.dragging = false;
-        this.angle = Math.atan2((this.source.y - this.listener.y) / 160, (this.source.x - this.listener.x) / 220);
-      },
-    });
-    this.panel.addCycle({
-      label: 'Falloff',
-      options: [...MODELS],
-      onChange: index => {
-        this.model = MODELS[index];
-        if (this.voice) {
-          this.voice.distanceModel = this.model;
-        }
+    this.source.x = width / 2 + 220;
+    this.source.y = height / 2;
+    this.panel = demoPanel({
+      title: 'Source and falloff',
+      controls: {
+        movement: choice('Movement', ['Drag', 'Orbit']),
+        falloff: choice('Falloff', MODELS),
+        sound: toggle('Sound', true),
       },
-    });
-    this.panel.addToggle({
-      label: 'Sound',
-      value: true,
-      onChange: value => {
-        this.playing = value;
-        if (this.voice) {
-          this.voice.volume = value ? SOURCE_VOLUME : 0;
+      onChange: (key, _value, values) => {
+        if (key === 'movement') {
+          this.dragging = false;
+          this.angle = Math.atan2((this.source.y - this.listener.y) / 160, (this.source.x - this.listener.x) / 220);
+        } else if (this.voice) {
+          this.voice.distanceModel = values.falloff;
+          this.voice.volume = values.sound ? SOURCE_VOLUME : 0;
         }
       },
     });
-    this.source.x = width / 2 + 220;
-    this.source.y = height / 2;
     app.input.onPointerDown.add(this.onPointerDown);
     app.input.onPointerMove.add(this.onPointerMove);
     app.input.onPointerUp.add(this.onPointerUp);
@@ -130,7 +107,7 @@ class ListenerAndSourceScene extends Scene {
     const dx = x - this.source.x;
     const dy = y - this.source.y;
     // Generous grab radius so the source is easy to pick up.
-    if (this.mode === 'drag' && dx * dx + dy * dy < SOURCE_RADIUS * SOURCE_RADIUS * 4) {
+    if (this.panel.values.movement === 'Drag' && dx * dx + dy * dy < SOURCE_RADIUS * SOURCE_RADIUS * 4) {
       this.dragging = true;
     }
   };
@@ -150,17 +127,16 @@ class ListenerAndSourceScene extends Scene {
   start = () => {
     this.voice ??= this.app.audio.play(this.sound, {
       loop: true,
-      volume: this.playing ? SOURCE_VOLUME : 0,
+      volume: this.panel.values.sound ? SOURCE_VOLUME : 0,
       position: this.source,
-      distanceModel: this.model,
+      distanceModel: this.panel.values.falloff,
       refDistance: REF_DISTANCE,
       maxDistance: MAX_DISTANCE,
       rolloffFactor: ROLLOFF,
     });
-    this.hud.setStatus(this.mode === 'drag' ? 'Drag the source around the listener' : 'The source orbits the listener');
   };
   update(delta) {
-    if (this.mode !== 'orbit') {
+    if (this.panel.values.movement !== 'Orbit') {
       return;
     }
     this.angle += delta * 1.1;
@@ -176,12 +152,12 @@ class ListenerAndSourceScene extends Scene {
     const dx = source.x - listener.x;
     const dy = source.y - listener.y;
     const dist = Math.sqrt(dx * dx + dy * dy);
-    const volume = attenuation(this.model, dist);
+    const volume = attenuation(this.panel.values.falloff, dist);
     // Equalpower pans by direction, not by horizontal offset: a source on the
     // listener's horizontal line is hard left/right, one straight above or below it is centred.
     const pan = dist > 0 ? Math.asin(dx / dist) / (Math.PI / 2) : 0;
     const panText = pan < -0.05 ? `left ${Math.abs(pan).toFixed(2)}` : pan > 0.05 ? `right ${pan.toFixed(2)}` : 'centre';
-    this.readout.text = `${this.model} falloff  ·  distance ${dist.toFixed(0)} px  ·  gain ${(volume * 100).toFixed(0)}%  ·  pan ${panText}`;
+    this.readout.text = `${this.panel.values.falloff} falloff  ·  distance ${dist.toFixed(0)} px  ·  gain ${(volume * 100).toFixed(0)}%  ·  pan ${panText}`;
     const g = this.graphics.clear();
     // Reference and maximum distance rings around the listener.
     g.lineWidth = 2;
@@ -222,8 +198,10 @@ class ListenerAndSourceScene extends Scene {
     input.onPointerUp.remove(this.onPointerUp);
     this.app.audio.onUnlock.remove(this.start);
     this.voice?.stop();
-    this.panel.dispose();
-    this.hud.dispose();
+    this.panel?.dispose();
+    this.graphics?.destroy();
+    this.readout?.destroy();
+    this.tapPrompt?.destroy();
     super.destroy();
   }
 }
@@ -236,8 +214,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(8, 10, 16),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(ListenerAndSourceScene);
diff --git a/examples/spatial-audio/listener-and-source.ts b/examples/spatial-audio/listener-and-source.ts
index 78d957d09..6dde6f3a2 100644
--- a/examples/spatial-audio/listener-and-source.ts
+++ b/examples/spatial-audio/listener-and-source.ts
@@ -1,6 +1,6 @@
 import type { RenderingContext, Seconds, Spatializable, Voice } from '@codexo/exojs';
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sound, Text } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
 
 // Spatial parameters tuned to the canvas so attenuation is visible across the
 // wide 1280px canvas. These mirror the Web Audio distance models (see
@@ -66,11 +66,7 @@ class ListenerAndSourceScene extends Scene {
   private graphics!: Graphics;
   private readout!: Text;
   private tapPrompt!: Text;
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private mode: 'drag' | 'orbit' = 'drag';
-  private model: FalloffModel = 'linear';
-  private playing = true;
+  private panel!: DemoPanel<{ movement: ChoiceSpec<'Drag' | 'Orbit'>; falloff: ChoiceSpec<FalloffModel>; sound: ToggleSpec }>;
   private angle = 0;
 
   override init(): void {
@@ -92,48 +88,27 @@ class ListenerAndSourceScene extends Scene {
       .setAnchor(0.5, 0.5)
       .setPosition(width / 2, height - 48);
 
-    this.hud = mountControls({
-      title: 'Spatial Audio',
-      controls: [{ keys: 'Drag', action: 'move the source in drag mode' }],
-      status: 'Click or press any key to start…',
-      hint: 'Best with headphones. Left/right follows the direction to the source; loudness follows the falloff model.',
-    });
-    this.panel = mountControlPanel({ title: 'Source and falloff' });
-    this.panel.addCycle({
-      label: 'Movement',
-      options: ['Drag', 'Orbit'],
-      onChange: index => {
-        this.mode = index === 0 ? 'drag' : 'orbit';
-        this.dragging = false;
-        this.angle = Math.atan2((this.source.y - this.listener.y) / 160, (this.source.x - this.listener.x) / 220);
-      },
-    });
-    this.panel.addCycle({
-      label: 'Falloff',
-      options: [...MODELS],
-      onChange: index => {
-        this.model = MODELS[index];
-
-        if (this.voice) {
-          this.voice.distanceModel = this.model;
-        }
+    this.source.x = width / 2 + 220;
+    this.source.y = height / 2;
+
+    this.panel = demoPanel({
+      title: 'Source and falloff',
+      controls: {
+        movement: choice('Movement', ['Drag', 'Orbit']),
+        falloff: choice('Falloff', MODELS),
+        sound: toggle('Sound', true),
       },
-    });
-    this.panel.addToggle({
-      label: 'Sound',
-      value: true,
-      onChange: value => {
-        this.playing = value;
-
-        if (this.voice) {
-          this.voice.volume = value ? SOURCE_VOLUME : 0;
+      onChange: (key, _value, values) => {
+        if (key === 'movement') {
+          this.dragging = false;
+          this.angle = Math.atan2((this.source.y - this.listener.y) / 160, (this.source.x - this.listener.x) / 220);
+        } else if (this.voice) {
+          this.voice.distanceModel = values.falloff;
+          this.voice.volume = values.sound ? SOURCE_VOLUME : 0;
         }
       },
     });
 
-    this.source.x = width / 2 + 220;
-    this.source.y = height / 2;
-
     app.input.onPointerDown.add(this.onPointerDown);
     app.input.onPointerMove.add(this.onPointerMove);
     app.input.onPointerUp.add(this.onPointerUp);
@@ -152,7 +127,7 @@ class ListenerAndSourceScene extends Scene {
     const dy = y - this.source.y;
 
     // Generous grab radius so the source is easy to pick up.
-    if (this.mode === 'drag' && dx * dx + dy * dy < SOURCE_RADIUS * SOURCE_RADIUS * 4) {
+    if (this.panel.values.movement === 'Drag' && dx * dx + dy * dy < SOURCE_RADIUS * SOURCE_RADIUS * 4) {
       this.dragging = true;
     }
   };
@@ -177,18 +152,17 @@ class ListenerAndSourceScene extends Scene {
   private readonly start = (): void => {
     this.voice ??= this.app.audio.play(this.sound, {
       loop: true,
-      volume: this.playing ? SOURCE_VOLUME : 0,
+      volume: this.panel.values.sound ? SOURCE_VOLUME : 0,
       position: this.source,
-      distanceModel: this.model,
+      distanceModel: this.panel.values.falloff,
       refDistance: REF_DISTANCE,
       maxDistance: MAX_DISTANCE,
       rolloffFactor: ROLLOFF,
     }) as Voice & Spatializable;
-    this.hud.setStatus(this.mode === 'drag' ? 'Drag the source around the listener' : 'The source orbits the listener');
   };
 
   override update(delta: Seconds): void {
-    if (this.mode !== 'orbit') {
+    if (this.panel.values.movement !== 'Orbit') {
       return;
     }
 
@@ -207,12 +181,12 @@ class ListenerAndSourceScene extends Scene {
     const dx = source.x - listener.x;
     const dy = source.y - listener.y;
     const dist = Math.sqrt(dx * dx + dy * dy);
-    const volume = attenuation(this.model, dist);
+    const volume = attenuation(this.panel.values.falloff, dist);
     // Equalpower pans by direction, not by horizontal offset: a source on the
     // listener's horizontal line is hard left/right, one straight above or below it is centred.
     const pan = dist > 0 ? Math.asin(dx / dist) / (Math.PI / 2) : 0;
     const panText = pan < -0.05 ? `left ${Math.abs(pan).toFixed(2)}` : pan > 0.05 ? `right ${pan.toFixed(2)}` : 'centre';
-    this.readout.text = `${this.model} falloff  ·  distance ${dist.toFixed(0)} px  ·  gain ${(volume * 100).toFixed(0)}%  ·  pan ${panText}`;
+    this.readout.text = `${this.panel.values.falloff} falloff  ·  distance ${dist.toFixed(0)} px  ·  gain ${(volume * 100).toFixed(0)}%  ·  pan ${panText}`;
 
     const g = this.graphics.clear();
 
@@ -262,8 +236,10 @@ class ListenerAndSourceScene extends Scene {
     input.onPointerUp.remove(this.onPointerUp);
     this.app.audio.onUnlock.remove(this.start);
     this.voice?.stop();
-    this.panel.dispose();
-    this.hud.dispose();
+    this.panel?.dispose();
+    this.graphics?.destroy();
+    this.readout?.destroy();
+    this.tapPrompt?.destroy();
     super.destroy();
   }
 }
@@ -277,9 +253,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(8, 10, 16),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(ListenerAndSourceScene);
diff --git a/examples/spatial-audio/moving-source.js b/examples/spatial-audio/moving-source.js
index 92998944e..c7fd61551 100644
--- a/examples/spatial-audio/moving-source.js
+++ b/examples/spatial-audio/moving-source.js
@@ -1,5 +1,6 @@
 // Auto-generated from moving-source.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sound, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 // Orbit + attenuation tuned to the wide canvas so the readout reflects what you
 // hear.
@@ -31,7 +32,7 @@ class MovingSourceScene extends Scene {
     // audible while there is sustained signal to pan/attenuate. The derived
     // Sound below reads .audioBuffer synchronously, so await load() instead
     // of the deferred get() (whose placeholder audioBuffer is null until fill).
-    const source = await this.loader.load(Asset.type('sound', 'audio/demo-loop-main.ogg'));
+    const source = await this.loader.load(Asset.type('sound', assets.musicLoopMain.source));
     this.sound = new Sound(source.audioBuffer);
     this.listener = { x: width / 2, y: height / 2 };
     app.audio.listener.target = this.listener;
@@ -118,8 +119,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(MovingSourceScene);
diff --git a/examples/spatial-audio/moving-source.ts b/examples/spatial-audio/moving-source.ts
index e51509649..ed564b8fe 100644
--- a/examples/spatial-audio/moving-source.ts
+++ b/examples/spatial-audio/moving-source.ts
@@ -1,5 +1,6 @@
 import type { RenderingContext, Spatializable, Voice } from '@codexo/exojs';
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, type Seconds, Sound, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 // Orbit + attenuation tuned to the wide canvas so the readout reflects what you
@@ -38,7 +39,7 @@ class MovingSourceScene extends Scene {
     // audible while there is sustained signal to pan/attenuate. The derived
     // Sound below reads .audioBuffer synchronously, so await load() instead
     // of the deferred get() (whose placeholder audioBuffer is null until fill).
-    const source = await this.loader.load(Asset.type('sound', 'audio/demo-loop-main.ogg'));
+    const source = await this.loader.load(Asset.type('sound', assets.musicLoopMain.source));
     this.sound = new Sound(source.audioBuffer);
     this.listener = { x: width / 2, y: height / 2 };
     app.audio.listener.target = this.listener;
@@ -140,9 +141,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(MovingSourceScene);
diff --git a/examples/sprites-textures/asset-catalogs.js b/examples/sprites-textures/asset-catalogs.js
index 8811d508a..6388092e8 100644
--- a/examples/sprites-textures/asset-catalogs.js
+++ b/examples/sprites-textures/asset-catalogs.js
@@ -1,13 +1,15 @@
 // Auto-generated from asset-catalogs.ts - edit the .ts source, not this file.
 import { Application, Asset, Assets, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 // #region guide:catalog-declare
-// A catalog is a named, typed group of assets. A bare path infers its type from
-// the file extension; anything else takes an explicit `Asset.type(...)`.
+// A catalog is a named, typed group of assets. Its entries are descriptors -
+// here from the demo catalog; in your own project usually a bare path, whose
+// file extension infers the type, or an explicit `Asset.type(...)`.
 const SharedAssets = Assets.from({
-  logo: 'image/uv-grid-256.png',
-  click: Asset.type('sound', 'audio/ui-click.ogg'),
-  atlas: Asset.type('json', 'json/buttons.json'),
+  logo: assets.uvGrid256,
+  click: assets.soundUiClick,
+  atlas: assets.platformerCharactersAtlas,
 });
 // #endregion guide:catalog-declare
 // #region guide:catalog-compose
@@ -15,8 +17,8 @@ const SharedAssets = Assets.from({
 // its inputs' handles instead of copying them, so `LevelAssets.logo` is the very
 // same Texture object as `SharedAssets.logo`.
 const LevelLocalAssets = Assets.from({
-  ship: 'image/ship-a.png',
-  ground: 'image/hue-ramp.png',
+  ship: assets.ship,
+  ground: assets.hueRamp,
 });
 const LevelAssets = Assets.compose(SharedAssets, LevelLocalAssets);
 // #endregion guide:catalog-compose
@@ -25,8 +27,8 @@ const LevelAssets = Assets.compose(SharedAssets, LevelLocalAssets);
 // ones are added. The base is never mutated - `LevelLocalAssets.ground` keeps
 // pointing at its own texture.
 const NightAssets = Assets.extend(LevelLocalAssets, {
-  ground: 'image/particle-light.png', // deliberate override
-  star: 'image/buttons.png', // new key
+  ground: assets.particleLight, // deliberate override
+  star: assets.particleStar, // new key
 });
 // #endregion guide:catalog-extend
 class AssetCatalogsScene extends Scene {
@@ -42,16 +44,7 @@ class AssetCatalogsScene extends Scene {
   loadError = '';
   night = false;
   async load() {
-    this.hud = mountControls({
-      title: 'Asset Catalogs',
-      controls: [
-        { keys: 'N', action: 'swap the ground texture for the derived night catalog' },
-        { keys: 'G', action: 'load a ground texture by a computed path' },
-        { keys: 'M', action: 'play the streamed theme (a non-leaf asset)' },
-      ],
-      status: 'Loading the shared and day catalogs...',
-      hint: 'Catalog handles expose their queue and cache state while loading.',
-    });
+    this.hud = mountControls({ status: 'Loading the shared and day catalogs...' });
     // #region guide:queue-progress
     // Every `load(...)` call returns a LoadingQueue. It is `PromiseLike`, so
     // it can be awaited directly, and it reports the progress of this one
@@ -73,7 +66,7 @@ class AssetCatalogsScene extends Scene {
     // Non-leaf types (`music`, `video`, `bmFont`, `font`, ...) have no
     // bare-path form and no placeholder to hand back, even for a literal
     // path - they are always loaded by reference and awaited.
-    this.theme = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    this.theme = await this.loader.load(assets.musicLoopMain);
     // #endregion guide:non-leaf-load
     // #region guide:catalog-failure
     // Awaiting a catalog rejects if any leaf fails. Every leaf still carries
@@ -117,16 +110,16 @@ class AssetCatalogsScene extends Scene {
       app.audio.play(this.theme, { volume: 0.5 });
     });
     this.inputs.onTrigger(Keyboard.G, () => {
-      void this.useVariant('hue-ramp');
+      void this.useVariant(assets.hueRamp.source);
     });
   }
   // #region guide:dynamic-path
   /** Replaces the ground texture with a variant chosen at runtime. */
-  async useVariant(variant) {
+  async useVariant(url) {
     const app = this.app;
-    // The path is computed rather than a literal, so its type cannot be
-    // inferred from the extension - name it with `Asset.type(...)`.
-    const texture = await app.loader.load(Asset.type('texture', `image/${variant}.png`));
+    // A URL chosen at runtime has no literal file extension to infer the type
+    // from - name it with `Asset.type(...)`.
+    const texture = await app.loader.load(Asset.type('texture', url));
     this.ground.setTexture(texture);
   }
   // #endregion guide:dynamic-path
@@ -154,8 +147,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(AssetCatalogsScene);
diff --git a/examples/sprites-textures/asset-catalogs.ts b/examples/sprites-textures/asset-catalogs.ts
index 4754cd63e..5c6f0bce6 100644
--- a/examples/sprites-textures/asset-catalogs.ts
+++ b/examples/sprites-textures/asset-catalogs.ts
@@ -12,15 +12,17 @@ import {
   Text,
   type Texture,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 // #region guide:catalog-declare
-// A catalog is a named, typed group of assets. A bare path infers its type from
-// the file extension; anything else takes an explicit `Asset.type(...)`.
+// A catalog is a named, typed group of assets. Its entries are descriptors -
+// here from the demo catalog; in your own project usually a bare path, whose
+// file extension infers the type, or an explicit `Asset.type(...)`.
 const SharedAssets = Assets.from({
-  logo: 'image/uv-grid-256.png',
-  click: Asset.type('sound', 'audio/ui-click.ogg'),
-  atlas: Asset.type<{ frames: Record<string, unknown> }>('json', 'json/buttons.json'),
+  logo: assets.uvGrid256,
+  click: assets.soundUiClick,
+  atlas: assets.platformerCharactersAtlas,
 });
 // #endregion guide:catalog-declare
 
@@ -29,8 +31,8 @@ const SharedAssets = Assets.from({
 // its inputs' handles instead of copying them, so `LevelAssets.logo` is the very
 // same Texture object as `SharedAssets.logo`.
 const LevelLocalAssets = Assets.from({
-  ship: 'image/ship-a.png',
-  ground: 'image/hue-ramp.png',
+  ship: assets.ship,
+  ground: assets.hueRamp,
 });
 
 const LevelAssets = Assets.compose(SharedAssets, LevelLocalAssets);
@@ -41,8 +43,8 @@ const LevelAssets = Assets.compose(SharedAssets, LevelLocalAssets);
 // ones are added. The base is never mutated - `LevelLocalAssets.ground` keeps
 // pointing at its own texture.
 const NightAssets = Assets.extend(LevelLocalAssets, {
-  ground: 'image/particle-light.png', // deliberate override
-  star: 'image/buttons.png', // new key
+  ground: assets.particleLight, // deliberate override
+  star: assets.particleStar, // new key
 });
 // #endregion guide:catalog-extend
 
@@ -62,16 +64,7 @@ class AssetCatalogsScene extends Scene {
   private night = false;
 
   override async load(): Promise<void> {
-    this.hud = mountControls({
-      title: 'Asset Catalogs',
-      controls: [
-        { keys: 'N', action: 'swap the ground texture for the derived night catalog' },
-        { keys: 'G', action: 'load a ground texture by a computed path' },
-        { keys: 'M', action: 'play the streamed theme (a non-leaf asset)' },
-      ],
-      status: 'Loading the shared and day catalogs...',
-      hint: 'Catalog handles expose their queue and cache state while loading.',
-    });
+    this.hud = mountControls({ status: 'Loading the shared and day catalogs...' });
     // #region guide:queue-progress
     // Every `load(...)` call returns a LoadingQueue. It is `PromiseLike`, so
     // it can be awaited directly, and it reports the progress of this one
@@ -97,7 +90,7 @@ class AssetCatalogsScene extends Scene {
     // Non-leaf types (`music`, `video`, `bmFont`, `font`, ...) have no
     // bare-path form and no placeholder to hand back, even for a literal
     // path - they are always loaded by reference and awaited.
-    this.theme = await this.loader.load(Asset.type('music', 'audio/demo-loop-main.ogg'));
+    this.theme = await this.loader.load(assets.musicLoopMain);
     // #endregion guide:non-leaf-load
 
     // #region guide:catalog-failure
@@ -150,18 +143,18 @@ class AssetCatalogsScene extends Scene {
     });
 
     this.inputs.onTrigger(Keyboard.G, () => {
-      void this.useVariant('hue-ramp');
+      void this.useVariant(assets.hueRamp.source);
     });
   }
 
   // #region guide:dynamic-path
   /** Replaces the ground texture with a variant chosen at runtime. */
-  private async useVariant(variant: string): Promise<void> {
+  private async useVariant(url: string): Promise<void> {
     const app = this.app;
 
-    // The path is computed rather than a literal, so its type cannot be
-    // inferred from the extension - name it with `Asset.type(...)`.
-    const texture = await app.loader.load(Asset.type('texture', `image/${variant}.png`));
+    // A URL chosen at runtime has no literal file extension to infer the type
+    // from - name it with `Asset.type(...)`.
+    const texture = await app.loader.load(Asset.type('texture', url));
 
     this.ground.setTexture(texture);
   }
@@ -194,9 +187,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(AssetCatalogsScene);
diff --git a/examples/sprites-textures/blendmodes.js b/examples/sprites-textures/blendmodes.js
index 1321a3fe7..dc53e798e 100644
--- a/examples/sprites-textures/blendmodes.js
+++ b/examples/sprites-textures/blendmodes.js
@@ -1,7 +1,8 @@
 // Auto-generated from blendmodes.ts - edit the .ts source, not this file.
-import { Application, Asset, BlendModes, Color, FixedResolutionCanvasSizing, ScaleModes, Scene, Sprite } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
-const ALPHA_RINGS = assets.technical.alpha.alphaGradientRings;
+import { Application, Asset, BlendModes, Color, FixedResolutionCanvasSizing, Keyboard, ScaleModes, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel } from '@examples/runtime';
+const ALPHA_RINGS = assets.alphaGradientRings;
 // Blending runs in linear light on premultiplied colour, so a mode reads
 // brighter and less muddy than the same equation on encoded values would. The
 // result alpha follows source-over coverage for the coverage-preserving modes
@@ -34,24 +35,14 @@ class BlendmodesScene extends Scene {
   background;
   left;
   right;
-  index = 0;
   ticker = 0;
-  hud;
-  // Note: passing `options` as a 3rd argument to `loader.get(...)` or
-  // `loader.load(Asset.type('texture', ...))` alongside a non-Json type currently mis-resolves
-  // the overload (falls through to the `Json` generic and types the result as
-  // `unknown`) - see the flagged deviation in the migration report. `load()`
-  // is awaited here purely to seed the fetch with `scaleMode: Nearest`; its
-  // return value is intentionally unused. The subsequent 2-argument `get()`
-  // calls for the same sources are unaffected and stay seamless.
   async load() {
     const app = this.app;
     const { width, height } = app;
+    // Nearest sampling keeps the ring edges and the ship's pixels crisp at 5x.
     const textureOptions = { scaleMode: ScaleModes.Nearest };
-    await this.loader.load(Asset.type('texture', ALPHA_RINGS, { textureOptions }));
-    await this.loader.load(Asset.type('texture', assets.demo.textures.shipA, { textureOptions }));
-    const backgroundTexture = this.loader.get(ALPHA_RINGS);
-    const shipTexture = this.loader.get(assets.demo.textures.shipA);
+    const backgroundTexture = await this.loader.load(Asset.type('texture', ALPHA_RINGS.source, { textureOptions }));
+    const shipTexture = await this.loader.load(Asset.type('texture', assets.ship.source, { textureOptions }));
     this.background = new Sprite(backgroundTexture);
     this.background.setPosition(width / 2, height / 2);
     this.background.setAnchor(0.5, 0.5);
@@ -67,23 +58,23 @@ class BlendmodesScene extends Scene {
     this.right.setAnchor(0.5, 0.5);
     this.right.setScale(5);
     this.right.setTint(new Color(255, 96, 200));
-    this.hud = mountControls({
-      title: 'Blend Modes',
-      controls: [{ keys: 'Click', action: 'next blend mode' }],
+    // Clicks, arrow keys and the panel buttons all move the same value.
+    const panel = demoPanel({
+      controls: {
+        mode: choice(
+          'Blend mode',
+          BLEND_MODES.map(entry => entry.name),
+        ),
+      },
+      onChange: (_key, name) => {
+        const { mode } = BLEND_MODES.find(entry => entry.name === name);
+        this.left.setBlendMode(mode);
+        this.right.setBlendMode(mode);
+      },
     });
-    app.input.onPointerDown.add(() => this.setIndex((this.index + 1) % BLEND_MODES.length));
-    // Apply the initial mode (Normal) without skipping it.
-    this.applyBlendMode();
-  }
-  setIndex(index) {
-    this.index = ((index % BLEND_MODES.length) + BLEND_MODES.length) % BLEND_MODES.length;
-    this.applyBlendMode();
-  }
-  applyBlendMode() {
-    const { mode, name } = BLEND_MODES[this.index];
-    this.left.setBlendMode(mode);
-    this.right.setBlendMode(mode);
-    this.hud.setStatus(`${name}  (${this.index + 1}/${BLEND_MODES.length})`);
+    app.input.onPointerDown.add(() => panel.step('mode', 1));
+    this.inputs.onTrigger(Keyboard.Right, () => panel.step('mode', 1));
+    this.inputs.onTrigger(Keyboard.Left, () => panel.step('mode', -1));
   }
   update(delta) {
     const app = this.app;
diff --git a/examples/sprites-textures/blendmodes.ts b/examples/sprites-textures/blendmodes.ts
index 431ff6db5..22ede45b7 100644
--- a/examples/sprites-textures/blendmodes.ts
+++ b/examples/sprites-textures/blendmodes.ts
@@ -4,15 +4,17 @@ import {
   BlendModes,
   Color,
   FixedResolutionCanvasSizing,
+  Keyboard,
   type RenderingContext,
   ScaleModes,
   Scene,
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel } from '@examples/runtime';
 
-const ALPHA_RINGS = assets.technical.alpha.alphaGradientRings;
+const ALPHA_RINGS = assets.alphaGradientRings;
 
 // Blending runs in linear light on premultiplied colour, so a mode reads
 // brighter and less muddy than the same equation on encoded values would. The
@@ -47,27 +49,16 @@ class BlendmodesScene extends Scene {
   private background!: Sprite;
   private left!: Sprite;
   private right!: Sprite;
-  private index = 0;
   private ticker = 0;
-  private hud!: ReturnType<typeof mountControls>;
-
-  // Note: passing `options` as a 3rd argument to `loader.get(...)` or
-  // `loader.load(Asset.type('texture', ...))` alongside a non-Json type currently mis-resolves
-  // the overload (falls through to the `Json` generic and types the result as
-  // `unknown`) - see the flagged deviation in the migration report. `load()`
-  // is awaited here purely to seed the fetch with `scaleMode: Nearest`; its
-  // return value is intentionally unused. The subsequent 2-argument `get()`
-  // calls for the same sources are unaffected and stay seamless.
+
   override async load(): Promise<void> {
     const app = this.app;
     const { width, height } = app;
 
+    // Nearest sampling keeps the ring edges and the ship's pixels crisp at 5x.
     const textureOptions = { scaleMode: ScaleModes.Nearest };
-    await this.loader.load(Asset.type('texture', ALPHA_RINGS, { textureOptions }));
-    await this.loader.load(Asset.type('texture', assets.demo.textures.shipA, { textureOptions }));
-
-    const backgroundTexture = this.loader.get(ALPHA_RINGS);
-    const shipTexture = this.loader.get(assets.demo.textures.shipA);
+    const backgroundTexture = await this.loader.load(Asset.type('texture', ALPHA_RINGS.source, { textureOptions }));
+    const shipTexture = await this.loader.load(Asset.type('texture', assets.ship.source, { textureOptions }));
 
     this.background = new Sprite(backgroundTexture);
     this.background.setPosition(width / 2, height / 2);
@@ -87,28 +78,25 @@ class BlendmodesScene extends Scene {
     this.right.setScale(5);
     this.right.setTint(new Color(255, 96, 200));
 
-    this.hud = mountControls({
-      title: 'Blend Modes',
-      controls: [{ keys: 'Click', action: 'next blend mode' }],
+    // Clicks, arrow keys and the panel buttons all move the same value.
+    const panel = demoPanel({
+      controls: {
+        mode: choice(
+          'Blend mode',
+          BLEND_MODES.map(entry => entry.name),
+        ),
+      },
+      onChange: (_key, name) => {
+        const { mode } = BLEND_MODES.find(entry => entry.name === name)!;
+
+        this.left.setBlendMode(mode);
+        this.right.setBlendMode(mode);
+      },
     });
 
-    app.input.onPointerDown.add(() => this.setIndex((this.index + 1) % BLEND_MODES.length));
-
-    // Apply the initial mode (Normal) without skipping it.
-    this.applyBlendMode();
-  }
-
-  private setIndex(index: number): void {
-    this.index = ((index % BLEND_MODES.length) + BLEND_MODES.length) % BLEND_MODES.length;
-    this.applyBlendMode();
-  }
-
-  private applyBlendMode(): void {
-    const { mode, name } = BLEND_MODES[this.index];
-
-    this.left.setBlendMode(mode);
-    this.right.setBlendMode(mode);
-    this.hud.setStatus(`${name}  (${this.index + 1}/${BLEND_MODES.length})`);
+    app.input.onPointerDown.add(() => panel.step('mode', 1));
+    this.inputs.onTrigger(Keyboard.Right, () => panel.step('mode', 1));
+    this.inputs.onTrigger(Keyboard.Left, () => panel.step('mode', -1));
   }
 
   override update(delta: Seconds): void {
diff --git a/examples/sprites-textures/sprite-basics.js b/examples/sprites-textures/sprite-basics.js
index 37e80a8a3..c2486671a 100644
--- a/examples/sprites-textures/sprite-basics.js
+++ b/examples/sprites-textures/sprite-basics.js
@@ -1,25 +1,19 @@
 // Auto-generated from sprite-basics.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class SpriteBasicsScene extends Scene {
   ship;
   // A single reusable tint colour whose alpha channel we animate each frame.
   tint = new Color(120, 200, 255, 1);
   elapsed = 0;
-  hud;
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.ship = new Sprite(this.loader.get('image/ship-a.png'));
+    this.ship = new Sprite(this.loader.get(assets.ship));
     this.ship.setPosition((width / 2) | 0, (height / 2) | 0);
     this.ship.setAnchor(0.5);
     this.ship.setScale(3);
     this.ship.setTint(this.tint);
-    this.hud = mountControls({
-      title: 'Sprite Basics',
-      hint: 'One Sprite, four transforms: position drifts, rotation spins, scale pulses, alpha fades.',
-      status: 'alpha 1.00',
-    });
   }
   update(delta) {
     const app = this.app;
@@ -37,7 +31,6 @@ class SpriteBasicsScene extends Scene {
     const alpha = 0.6 + Math.sin(this.elapsed * 2) * 0.4;
     this.tint.a = alpha;
     this.ship.setTint(this.tint);
-    this.hud.setStatus(`alpha ${alpha.toFixed(2)}`);
   }
   draw(context) {
     context.render(this.ship);
@@ -52,8 +45,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 20, 28),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(SpriteBasicsScene);
diff --git a/examples/sprites-textures/sprite-basics.ts b/examples/sprites-textures/sprite-basics.ts
index 1062f7432..f2a33c273 100644
--- a/examples/sprites-textures/sprite-basics.ts
+++ b/examples/sprites-textures/sprite-basics.ts
@@ -1,28 +1,21 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, type Seconds, Sprite } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class SpriteBasicsScene extends Scene {
   private ship!: Sprite;
   // A single reusable tint colour whose alpha channel we animate each frame.
   private tint = new Color(120, 200, 255, 1);
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
 
   override init(): void {
     const app = this.app;
     const { width, height } = app;
 
-    this.ship = new Sprite(this.loader.get('image/ship-a.png'));
+    this.ship = new Sprite(this.loader.get(assets.ship));
     this.ship.setPosition((width / 2) | 0, (height / 2) | 0);
     this.ship.setAnchor(0.5);
     this.ship.setScale(3);
     this.ship.setTint(this.tint);
-
-    this.hud = mountControls({
-      title: 'Sprite Basics',
-      hint: 'One Sprite, four transforms: position drifts, rotation spins, scale pulses, alpha fades.',
-      status: 'alpha 1.00',
-    });
   }
 
   override update(delta: Seconds): void {
@@ -46,8 +39,6 @@ class SpriteBasicsScene extends Scene {
     const alpha = 0.6 + Math.sin(this.elapsed * 2) * 0.4;
     this.tint.a = alpha;
     this.ship.setTint(this.tint);
-
-    this.hud.setStatus(`alpha ${alpha.toFixed(2)}`);
   }
 
   override draw(context: RenderingContext): void {
@@ -64,9 +55,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 20, 28),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(SpriteBasicsScene);
diff --git a/examples/sprites-textures/spritesheet-frames.js b/examples/sprites-textures/spritesheet-frames.js
index d5511c922..bde119814 100644
--- a/examples/sprites-textures/spritesheet-frames.js
+++ b/examples/sprites-textures/spritesheet-frames.js
@@ -1,5 +1,6 @@
 // Auto-generated from spritesheet-frames.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Spritesheet } from '@codexo/exojs';
+import { Application, Color, FixedResolutionCanvasSizing, Scene, Spritesheet } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 const CHARACTERS = ['beige', 'green', 'pink', 'purple', 'yellow'];
 class SpritesheetFramesScene extends Scene {
@@ -13,8 +14,8 @@ class SpritesheetFramesScene extends Scene {
   async load() {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/platformer-characters.png');
-    const data = await this.loader.load(Asset.type('json', 'json/platformer-characters.json'));
+    const texture = this.loader.get(assets.platformerCharactersImage);
+    const data = await this.loader.load(assets.platformerCharactersAtlas);
     this.spritesheet = new Spritesheet(texture, data);
     // The spritesheet caches one Sprite per named frame; configure them all
     // once so any frame we draw is centred and scaled up for visibility.
@@ -71,8 +72,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(24, 28, 38),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(SpritesheetFramesScene);
diff --git a/examples/sprites-textures/spritesheet-frames.ts b/examples/sprites-textures/spritesheet-frames.ts
index 11b0317e0..21cf11a85 100644
--- a/examples/sprites-textures/spritesheet-frames.ts
+++ b/examples/sprites-textures/spritesheet-frames.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   Color,
   FixedResolutionCanvasSizing,
   type RenderingContext,
@@ -9,6 +8,7 @@ import {
   Spritesheet,
   type SpritesheetData,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 
 const CHARACTERS = ['beige', 'green', 'pink', 'purple', 'yellow'];
@@ -25,8 +25,8 @@ class SpritesheetFramesScene extends Scene {
   override async load(): Promise<void> {
     const app = this.app;
     const { width, height } = app;
-    const texture = this.loader.get('image/platformer-characters.png');
-    const data = (await this.loader.load(Asset.type('json', 'json/platformer-characters.json'))) as SpritesheetData;
+    const texture = this.loader.get(assets.platformerCharactersImage);
+    const data = (await this.loader.load(assets.platformerCharactersAtlas)) as SpritesheetData;
 
     this.spritesheet = new Spritesheet(texture, data);
 
@@ -99,9 +99,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(24, 28, 38),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(SpritesheetFramesScene);
diff --git a/examples/sprites-textures/svg-drawable.js b/examples/sprites-textures/svg-drawable.js
index 4cc6f43a7..bb46c8e8e 100644
--- a/examples/sprites-textures/svg-drawable.js
+++ b/examples/sprites-textures/svg-drawable.js
@@ -1,5 +1,6 @@
 // Auto-generated from svg-drawable.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Sprite, Texture } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class SvgDrawableScene extends Scene {
   texture;
   sprite;
@@ -12,13 +13,7 @@ class SvgDrawableScene extends Scene {
     // it would rasterise to a 0x0 image. Request an explicit pixel size -
     // the SVG is vector, so it stays crisp at any rasterised resolution.
     //
-    // The cast below works around a pre-existing overload-resolution gap:
-    // every value-asset dispatch token (Json/TextAsset/SvgAsset/...) is an
-    // empty marker class, so they're structurally identical to `load()`'s
-    // `typeof Json` overload - which is declared first and wins, typing
-    // the result as `unknown` instead of `HTMLImageElement`. See the
-    // flagged deviation in the migration report.
-    const mark = await this.loader.load(Asset.type('svg', 'svg/exo-wordmark.svg', { width: 850, height: 324 }));
+    const mark = await this.loader.load(Asset.type('svg', assets.exoWordmark.source, { width: 850, height: 324 }));
     this.texture = new Texture(mark);
     this.sprite = new Sprite(this.texture);
     this.sprite.setAnchor(0.5);
@@ -37,8 +32,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(SvgDrawableScene);
diff --git a/examples/sprites-textures/svg-drawable.ts b/examples/sprites-textures/svg-drawable.ts
index f615f9212..b1df27fbd 100644
--- a/examples/sprites-textures/svg-drawable.ts
+++ b/examples/sprites-textures/svg-drawable.ts
@@ -1,4 +1,5 @@
 import { Application, Asset, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Sprite, Texture } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class SvgDrawableScene extends Scene {
   private texture!: Texture;
@@ -14,13 +15,7 @@ class SvgDrawableScene extends Scene {
     // it would rasterise to a 0x0 image. Request an explicit pixel size -
     // the SVG is vector, so it stays crisp at any rasterised resolution.
     //
-    // The cast below works around a pre-existing overload-resolution gap:
-    // every value-asset dispatch token (Json/TextAsset/SvgAsset/...) is an
-    // empty marker class, so they're structurally identical to `load()`'s
-    // `typeof Json` overload - which is declared first and wins, typing
-    // the result as `unknown` instead of `HTMLImageElement`. See the
-    // flagged deviation in the migration report.
-    const mark = (await this.loader.load(Asset.type('svg', 'svg/exo-wordmark.svg', { width: 850, height: 324 }))) as HTMLImageElement;
+    const mark = (await this.loader.load(Asset.type('svg', assets.exoWordmark.source, { width: 850, height: 324 }))) as HTMLImageElement;
 
     this.texture = new Texture(mark);
     this.sprite = new Sprite(this.texture);
@@ -42,9 +37,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(SvgDrawableScene);
diff --git a/examples/sprites-textures/texture-loader.js b/examples/sprites-textures/texture-loader.js
index 631ecbb59..2473b6669 100644
--- a/examples/sprites-textures/texture-loader.js
+++ b/examples/sprites-textures/texture-loader.js
@@ -1,5 +1,6 @@
 // Auto-generated from texture-loader.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, Sprite, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class TextureLoaderScene extends Scene {
   sprites;
   textures;
@@ -14,7 +15,7 @@ class TextureLoaderScene extends Scene {
     const { width, height } = app;
     // Seamless get() returns placeholder handles immediately; each pops in
     // (loadState → 'ready') as its fetch completes, polled in update().
-    this.textures = [this.loader.get('image/ship-a.png'), this.loader.get('image/hue-ramp.png'), this.loader.get('image/uv-grid-256.png')];
+    this.textures = [this.loader.get(assets.ship), this.loader.get(assets.hueRamp), this.loader.get(assets.uvGrid256)];
     // Spread the three textures evenly across the width, one per third.
     this.sprites = this.textures.map((texture, index) => {
       const sprite = new Sprite(texture);
@@ -58,8 +59,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TextureLoaderScene);
diff --git a/examples/sprites-textures/texture-loader.ts b/examples/sprites-textures/texture-loader.ts
index 4abda79e3..eede369cb 100644
--- a/examples/sprites-textures/texture-loader.ts
+++ b/examples/sprites-textures/texture-loader.ts
@@ -9,6 +9,7 @@ import {
   Text,
   type Texture,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class TextureLoaderScene extends Scene {
   private sprites!: Sprite[];
@@ -26,7 +27,7 @@ class TextureLoaderScene extends Scene {
 
     // Seamless get() returns placeholder handles immediately; each pops in
     // (loadState → 'ready') as its fetch completes, polled in update().
-    this.textures = [this.loader.get('image/ship-a.png'), this.loader.get('image/hue-ramp.png'), this.loader.get('image/uv-grid-256.png')];
+    this.textures = [this.loader.get(assets.ship), this.loader.get(assets.hueRamp), this.loader.get(assets.uvGrid256)];
 
     // Spread the three textures evenly across the width, one per third.
     this.sprites = this.textures.map((texture, index) => {
@@ -78,9 +79,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TextureLoaderScene);
diff --git a/examples/sprites-textures/texture-sampling.js b/examples/sprites-textures/texture-sampling.js
index 92905c252..9c999585e 100644
--- a/examples/sprites-textures/texture-sampling.js
+++ b/examples/sprites-textures/texture-sampling.js
@@ -11,7 +11,7 @@ import {
   Text,
   Texture,
 } from '@codexo/exojs';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, slider, toggle } from '@examples/runtime';
 // Colour textures are stored as sRGB and filtered in linear light, so the mips
 // of a checker average to the correct mid-grey rather than a darkened one.
 // Data textures (`colorSpace: 'none'`) filter their raw numeric values instead.
@@ -66,25 +66,21 @@ const makeZonePlate = () => {
   ctx.putImageData(image, 0, 0);
   return canvas;
 };
+const samplingControls = {
+  magnify: slider('Magnify', { min: 1, max: 8, value: 6, step: 0.1, format: value => `${value.toFixed(1)}x` }),
+  minify: slider('Minify', { min: 0.15, max: 0.7, value: 0.35, step: 0.01, format: value => `${value.toFixed(2)}x` }),
+  snap: toggle('Pixel snap', false),
+  motion: toggle('Motion', true),
+};
 class TextureSamplingScene extends Scene {
   textures = [];
   magnified = [];
   minified = [];
-  hud;
   panel;
-  zoom = 6;
-  minify = 0.35;
-  snap = false;
-  moving = true;
   elapsed = 0;
   onWheel = (_deltaX, deltaY) => {
-    this.zoom = Math.max(1, Math.min(8, this.zoom * Math.exp(-deltaY * 0.002)));
-    this.zoomControl.set(this.zoom);
-    this.updateHud();
+    this.panel.set('magnify', Math.max(1, Math.min(8, this.panel.values.magnify * Math.exp(-deltaY * 0.002))));
   };
-  zoomControl;
-  snapControl;
-  motionControl;
   init() {
     const pixelArt = makePixelArt();
     const zonePlate = makeZonePlate();
@@ -104,63 +100,25 @@ class TextureSamplingScene extends Scene {
           .setPosition(COLUMN_X[column], 46),
       );
     }
-    this.hud = mountControls({
-      title: 'Texture Sampling and Pixel Snapping',
-      controls: [
-        { keys: 'Wheel', action: 'magnify the top row' },
-        { keys: 'P', action: 'toggle pixel snapping' },
-        { keys: 'Space', action: 'pause the motion' },
-      ],
-      hint: 'Top row magnified, bottom row minified. Same texture, transform and time in every column; only the sampler differs.',
-      corner: 'top-right',
-    });
-    this.panel = mountControlPanel({ title: 'Sampling lab', corner: 'bottom-right' });
-    this.zoomControl = this.panel.addSlider({
-      label: 'Magnify',
-      min: 1,
-      max: 8,
-      step: 0.1,
-      value: this.zoom,
-      onChange: value => {
-        this.zoom = value;
-        this.updateHud();
-      },
-    });
-    this.panel.addSlider({
-      label: 'Minify',
-      min: 0.15,
-      max: 0.7,
-      step: 0.01,
-      value: this.minify,
-      onChange: value => {
-        this.minify = value;
-        this.updateHud();
+    this.panel = demoPanel({
+      title: 'Sampling lab',
+      corner: 'bottom-right',
+      controls: samplingControls,
+      onChange: (key, value) => {
+        if (key === 'snap') {
+          for (const sprite of this.magnified) {
+            sprite.pixelSnapMode = value ? PixelSnapMode.Geometry : PixelSnapMode.None;
+          }
+        }
       },
     });
-    this.snapControl = this.panel.addToggle({ label: 'Pixel snap', value: this.snap, onChange: value => this.setSnap(value) });
-    this.motionControl = this.panel.addToggle({ label: 'Motion', value: this.moving, onChange: value => this.setMoving(value) });
-    this.inputs.onTrigger(Keyboard.P, () => this.setSnap(!this.snap));
-    this.inputs.onTrigger(Keyboard.Space, () => this.setMoving(!this.moving));
+    this.inputs.onTrigger(Keyboard.P, () => this.panel.step('snap'));
+    this.inputs.onTrigger(Keyboard.Space, () => this.panel.step('motion'));
     this.app.input.onMouseWheel.add(this.onWheel);
-    this.updateHud();
-  }
-  setMoving(moving) {
-    this.moving = moving;
-    this.motionControl.set(moving);
-  }
-  setSnap(snap) {
-    this.snap = snap;
-    this.snapControl.set(snap);
-    for (const sprite of this.magnified) {
-      sprite.pixelSnapMode = snap ? PixelSnapMode.Geometry : PixelSnapMode.None;
-    }
-    this.updateHud();
-  }
-  updateHud() {
-    this.hud.setStatus(`Magnify ${this.zoom.toFixed(1)}x · minify ${this.minify.toFixed(2)}x · snap ${this.snap ? 'on' : 'off'}`);
   }
   update(delta) {
-    if (this.moving) {
+    const { magnify, minify, motion } = this.panel.values;
+    if (motion) {
       this.elapsed += delta;
     }
     // A slow sub-pixel drift shows snapping in the top row; a gentle scale
@@ -168,14 +126,13 @@ class TextureSamplingScene extends Scene {
     const drift = Math.sin(this.elapsed * 1.8) * 0.45;
     const pulse = 1 + Math.sin(this.elapsed * 0.7) * 0.12;
     for (let column = 0; column < MODES.length; column++) {
-      this.magnified[column].setPosition(COLUMN_X[column] + drift, MAGNIFIED_Y + drift).setScale(this.zoom);
-      this.minified[column].setPosition(COLUMN_X[column], MINIFIED_Y).setScale(this.minify * pulse);
+      this.magnified[column].setPosition(COLUMN_X[column] + drift, MAGNIFIED_Y + drift).setScale(magnify);
+      this.minified[column].setPosition(COLUMN_X[column], MINIFIED_Y).setScale(minify * pulse);
     }
   }
   destroy() {
     this.app.input.onMouseWheel.remove(this.onWheel);
     this.panel.dispose();
-    this.hud.dispose();
     super.destroy();
     for (const texture of this.textures) {
       texture.destroy();
diff --git a/examples/sprites-textures/texture-sampling.ts b/examples/sprites-textures/texture-sampling.ts
index 6721287e2..d9aec54d2 100644
--- a/examples/sprites-textures/texture-sampling.ts
+++ b/examples/sprites-textures/texture-sampling.ts
@@ -11,7 +11,7 @@ import {
   Text,
   Texture,
 } from '@codexo/exojs';
-import { type ControlBinding, mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel, slider, toggle } from '@examples/runtime';
 
 // Colour textures are stored as sRGB and filtered in linear light, so the mips
 // of a checker average to the correct mid-grey rather than a darkened one.
@@ -76,25 +76,24 @@ const makeZonePlate = (): HTMLCanvasElement => {
   return canvas;
 };
 
+const samplingControls = {
+  magnify: slider('Magnify', { min: 1, max: 8, value: 6, step: 0.1, format: value => `${value.toFixed(1)}x` }),
+  minify: slider('Minify', { min: 0.15, max: 0.7, value: 0.35, step: 0.01, format: value => `${value.toFixed(2)}x` }),
+  snap: toggle('Pixel snap', false),
+  motion: toggle('Motion', true),
+};
+
+type SamplingControls = typeof samplingControls;
+
 class TextureSamplingScene extends Scene {
   private textures: Texture[] = [];
   private magnified: Sprite[] = [];
   private minified: Sprite[] = [];
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private zoom = 6;
-  private minify = 0.35;
-  private snap = false;
-  private moving = true;
+  private panel!: ReturnType<typeof demoPanel<SamplingControls>>;
   private elapsed = 0;
   private readonly onWheel = (_deltaX: number, deltaY: number): void => {
-    this.zoom = Math.max(1, Math.min(8, this.zoom * Math.exp(-deltaY * 0.002)));
-    this.zoomControl.set(this.zoom);
-    this.updateHud();
+    this.panel.set('magnify', Math.max(1, Math.min(8, this.panel.values.magnify * Math.exp(-deltaY * 0.002))));
   };
-  private zoomControl!: ControlBinding<number>;
-  private snapControl!: ControlBinding<boolean>;
-  private motionControl!: ControlBinding<boolean>;
 
   override init(): void {
     const pixelArt = makePixelArt();
@@ -118,70 +117,28 @@ class TextureSamplingScene extends Scene {
       );
     }
 
-    this.hud = mountControls({
-      title: 'Texture Sampling and Pixel Snapping',
-      controls: [
-        { keys: 'Wheel', action: 'magnify the top row' },
-        { keys: 'P', action: 'toggle pixel snapping' },
-        { keys: 'Space', action: 'pause the motion' },
-      ],
-      hint: 'Top row magnified, bottom row minified. Same texture, transform and time in every column; only the sampler differs.',
-      corner: 'top-right',
-    });
-    this.panel = mountControlPanel({ title: 'Sampling lab', corner: 'bottom-right' });
-    this.zoomControl = this.panel.addSlider({
-      label: 'Magnify',
-      min: 1,
-      max: 8,
-      step: 0.1,
-      value: this.zoom,
-      onChange: value => {
-        this.zoom = value;
-        this.updateHud();
+    this.panel = demoPanel({
+      title: 'Sampling lab',
+      corner: 'bottom-right',
+      controls: samplingControls,
+      onChange: (key, value) => {
+        if (key === 'snap') {
+          for (const sprite of this.magnified) {
+            sprite.pixelSnapMode = value ? PixelSnapMode.Geometry : PixelSnapMode.None;
+          }
+        }
       },
     });
-    this.panel.addSlider({
-      label: 'Minify',
-      min: 0.15,
-      max: 0.7,
-      step: 0.01,
-      value: this.minify,
-      onChange: value => {
-        this.minify = value;
-        this.updateHud();
-      },
-    });
-    this.snapControl = this.panel.addToggle({ label: 'Pixel snap', value: this.snap, onChange: value => this.setSnap(value) });
-    this.motionControl = this.panel.addToggle({ label: 'Motion', value: this.moving, onChange: value => this.setMoving(value) });
 
-    this.inputs.onTrigger(Keyboard.P, () => this.setSnap(!this.snap));
-    this.inputs.onTrigger(Keyboard.Space, () => this.setMoving(!this.moving));
+    this.inputs.onTrigger(Keyboard.P, () => this.panel.step('snap'));
+    this.inputs.onTrigger(Keyboard.Space, () => this.panel.step('motion'));
     this.app.input.onMouseWheel.add(this.onWheel);
-    this.updateHud();
-  }
-
-  private setMoving(moving: boolean): void {
-    this.moving = moving;
-    this.motionControl.set(moving);
-  }
-
-  private setSnap(snap: boolean): void {
-    this.snap = snap;
-    this.snapControl.set(snap);
-
-    for (const sprite of this.magnified) {
-      sprite.pixelSnapMode = snap ? PixelSnapMode.Geometry : PixelSnapMode.None;
-    }
-
-    this.updateHud();
-  }
-
-  private updateHud(): void {
-    this.hud.setStatus(`Magnify ${this.zoom.toFixed(1)}x · minify ${this.minify.toFixed(2)}x · snap ${this.snap ? 'on' : 'off'}`);
   }
 
   override update(delta: Seconds): void {
-    if (this.moving) {
+    const { magnify, minify, motion } = this.panel.values;
+
+    if (motion) {
       this.elapsed += delta;
     }
 
@@ -191,15 +148,14 @@ class TextureSamplingScene extends Scene {
     const pulse = 1 + Math.sin(this.elapsed * 0.7) * 0.12;
 
     for (let column = 0; column < MODES.length; column++) {
-      this.magnified[column].setPosition(COLUMN_X[column] + drift, MAGNIFIED_Y + drift).setScale(this.zoom);
-      this.minified[column].setPosition(COLUMN_X[column], MINIFIED_Y).setScale(this.minify * pulse);
+      this.magnified[column].setPosition(COLUMN_X[column] + drift, MAGNIFIED_Y + drift).setScale(magnify);
+      this.minified[column].setPosition(COLUMN_X[column], MINIFIED_Y).setScale(minify * pulse);
     }
   }
 
   override destroy(): void {
     this.app.input.onMouseWheel.remove(this.onWheel);
     this.panel.dispose();
-    this.hud.dispose();
     super.destroy();
 
     for (const texture of this.textures) {
diff --git a/examples/sprites-textures/video-drawable.js b/examples/sprites-textures/video-drawable.js
index a28359fc2..a69311d70 100644
--- a/examples/sprites-textures/video-drawable.js
+++ b/examples/sprites-textures/video-drawable.js
@@ -1,6 +1,7 @@
 // Auto-generated from video-drawable.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { Application, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 // Every video in the asset catalog, switchable at runtime with the number
 // keys. Only the first entry is fetched up front - the others lazy-load on
 // first selection so startup stays fast.
@@ -9,54 +10,63 @@ import { mountControls } from '@examples/runtime';
 // in the browser's own display encoding and sampled as sRGB colour; the engine
 // makes no HDR-video promise, so no HDR clip is offered.
 const VIDEOS = [
-  { name: 'demoLoop', label: 'Demo loop (webm)', url: assets.demo.video.demoLoop },
-  { name: 'highRes', label: 'High-res (mp4)', url: assets.demo.video.highRes },
-  { name: 'highFps', label: 'High-fps (webm)', url: assets.demo.video.highFps },
+  { name: 'demoLoop', label: 'Demo loop (webm)', asset: assets.videoDemoLoop },
+  { name: 'highRes', label: '4K, 24 fps (mp4)', asset: assets.videoHighRes },
+  { name: 'highFps', label: '1080p, 60 fps (webm)', asset: assets.videoHighFps },
 ];
 class VideoDrawableScene extends Scene {
   video;
   overlay;
   elapsed = 0;
-  hud;
+  panel;
   videoIdx = 0;
   loadedVideos = new Set();
   switching = false;
   async load() {
     const app = this.app;
     const { width, height } = app;
-    // Video is a non-leaf resource kind (no seamless placeholder, unlike
-    // Texture/Sound), so it is loaded directly through `Asset.type('video', ...)`
-    // and awaited rather than fetched synchronously via `get()`.
-    this.video = await this.loader.load(Asset.type('video', VIDEOS[0].url));
+    // Video has no placeholder handle (unlike Texture and Sound), so it is
+    // awaited with `load()` rather than claimed synchronously with `get()`.
+    this.video = await this.loader.load(VIDEOS[0].asset);
     this.loadedVideos.add(VIDEOS[0].name);
     this.configureVideo();
     // A sprite composited on top of the live video texture - the same scene
     // graph draws video frames and regular sprites side by side. Texture IS
     // seamless, so it is fetched directly by source with no preload step.
-    this.overlay = new Sprite(this.loader.get(assets.demo.textures.shipA));
+    this.overlay = new Sprite(this.loader.get(assets.ship));
     this.overlay.setAnchor(0.5);
     this.overlay.setScale(3);
     this.overlay.setPosition(width / 2, height / 2);
-    this.hud = mountControls({
-      title: 'Video Drawable',
-      controls: [
-        { keys: 'Tap', action: 'play / pause' },
-        { keys: '1–3', action: 'switch video' },
-      ],
-      status: `Playing — ${VIDEOS[0].label}`,
-      hint: 'The video streams as a live GPU texture with a sprite composited over it.',
-    });
-    app.input.onPointerTap.add(() => {
-      this.video.toggle();
-      this.hud.setStatus(this.video.playing ? `Playing — ${VIDEOS[this.videoIdx].label}` : 'Paused');
+    this.video.play();
+    // Clicks and the number keys move the same panel state.
+    this.panel = demoPanel({
+      title: 'Video',
+      controls: {
+        video: choice(
+          'Clip',
+          VIDEOS.map(entry => entry.label),
+        ),
+        paused: toggle('Paused'),
+      },
+      onChange: (key, _value, values) => {
+        if (key === 'paused') {
+          if (values.paused) {
+            this.video.pause();
+          } else {
+            this.video.play();
+          }
+        } else {
+          void this.switchVideo(VIDEOS.findIndex(entry => entry.label === values.video));
+        }
+      },
     });
+    app.input.onPointerTap.add(() => this.panel.step('paused'));
     app.input.onKeyDown.add(channel => {
       const idx = [Keyboard.One, Keyboard.Two, Keyboard.Three].indexOf(channel);
       if (idx !== -1) {
-        void this.switchVideo(idx);
+        this.panel.set('video', VIDEOS[idx].label);
       }
     });
-    this.video.play();
   }
   /** Sizing + playback options shared by every video the example swaps in. */
   configureVideo() {
@@ -74,21 +84,28 @@ class VideoDrawableScene extends Scene {
     }
     const entry = VIDEOS[idx];
     this.switching = true;
-    this.hud.setStatus(`Loading — ${entry.label}…`);
+    this.panel.status(`Loading ${entry.label}...`);
     try {
-      const loaded = await this.loader.load(Asset.type('video', entry.url));
+      const loaded = await this.loader.load(entry.asset);
       this.loadedVideos.add(entry.name);
       this.video.pause();
       this.videoIdx = idx;
       this.video = loaded;
       this.configureVideo();
+      this.panel.set('paused', false);
       this.video.play();
-      this.hud.setStatus(`Playing — ${entry.label}`);
+      this.panel.status('');
     } catch {
-      this.hud.setStatus(`Failed to load — ${entry.label}`);
+      this.panel.status(`Failed to load ${entry.label}.`);
+      this.panel.set('video', VIDEOS[this.videoIdx].label);
     } finally {
       this.switching = false;
     }
+    // A choice made while this one was loading is honoured once it is done.
+    const wanted = VIDEOS.findIndex(candidate => candidate.label === this.panel.values.video);
+    if (wanted !== this.videoIdx) {
+      void this.switchVideo(wanted);
+    }
   }
   update(delta) {
     const app = this.app;
diff --git a/examples/sprites-textures/video-drawable.ts b/examples/sprites-textures/video-drawable.ts
index 955a68f58..253ecee54 100644
--- a/examples/sprites-textures/video-drawable.ts
+++ b/examples/sprites-textures/video-drawable.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   Color,
   FixedResolutionCanvasSizing,
   Keyboard,
@@ -10,7 +9,8 @@ import {
   Sprite,
   type Video,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, type ChoiceSpec, type DemoPanel, demoPanel, toggle, type ToggleSpec } from '@examples/runtime';
 
 // Every video in the asset catalog, switchable at runtime with the number
 // keys. Only the first entry is fetched up front - the others lazy-load on
@@ -20,16 +20,16 @@ import { mountControls } from '@examples/runtime';
 // in the browser's own display encoding and sampled as sRGB colour; the engine
 // makes no HDR-video promise, so no HDR clip is offered.
 const VIDEOS = [
-  { name: 'demoLoop', label: 'Demo loop (webm)', url: assets.demo.video.demoLoop },
-  { name: 'highRes', label: 'High-res (mp4)', url: assets.demo.video.highRes },
-  { name: 'highFps', label: 'High-fps (webm)', url: assets.demo.video.highFps },
+  { name: 'demoLoop', label: 'Demo loop (webm)', asset: assets.videoDemoLoop },
+  { name: 'highRes', label: '4K, 24 fps (mp4)', asset: assets.videoHighRes },
+  { name: 'highFps', label: '1080p, 60 fps (webm)', asset: assets.videoHighFps },
 ];
 
 class VideoDrawableScene extends Scene {
   private video!: Video;
   private overlay!: Sprite;
   private elapsed = 0;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: DemoPanel<{ video: ChoiceSpec; paused: ToggleSpec }>;
   private videoIdx = 0;
   private readonly loadedVideos = new Set<string>();
   private switching = false;
@@ -38,10 +38,9 @@ class VideoDrawableScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    // Video is a non-leaf resource kind (no seamless placeholder, unlike
-    // Texture/Sound), so it is loaded directly through `Asset.type('video', ...)`
-    // and awaited rather than fetched synchronously via `get()`.
-    this.video = await this.loader.load(Asset.type('video', VIDEOS[0].url));
+    // Video has no placeholder handle (unlike Texture and Sound), so it is
+    // awaited with `load()` rather than claimed synchronously with `get()`.
+    this.video = await this.loader.load(VIDEOS[0].asset);
     this.loadedVideos.add(VIDEOS[0].name);
 
     this.configureVideo();
@@ -49,35 +48,44 @@ class VideoDrawableScene extends Scene {
     // A sprite composited on top of the live video texture - the same scene
     // graph draws video frames and regular sprites side by side. Texture IS
     // seamless, so it is fetched directly by source with no preload step.
-    this.overlay = new Sprite(this.loader.get(assets.demo.textures.shipA));
+    this.overlay = new Sprite(this.loader.get(assets.ship));
     this.overlay.setAnchor(0.5);
     this.overlay.setScale(3);
     this.overlay.setPosition(width / 2, height / 2);
 
-    this.hud = mountControls({
-      title: 'Video Drawable',
-      controls: [
-        { keys: 'Tap', action: 'play / pause' },
-        { keys: '1–3', action: 'switch video' },
-      ],
-      status: `Playing — ${VIDEOS[0].label}`,
-      hint: 'The video streams as a live GPU texture with a sprite composited over it.',
-    });
+    this.video.play();
 
-    app.input.onPointerTap.add(() => {
-      this.video.toggle();
-      this.hud.setStatus(this.video.playing ? `Playing — ${VIDEOS[this.videoIdx].label}` : 'Paused');
+    // Clicks and the number keys move the same panel state.
+    this.panel = demoPanel({
+      title: 'Video',
+      controls: {
+        video: choice(
+          'Clip',
+          VIDEOS.map(entry => entry.label),
+        ),
+        paused: toggle('Paused'),
+      },
+      onChange: (key, _value, values) => {
+        if (key === 'paused') {
+          if (values.paused) {
+            this.video.pause();
+          } else {
+            this.video.play();
+          }
+        } else {
+          void this.switchVideo(VIDEOS.findIndex(entry => entry.label === values.video));
+        }
+      },
     });
 
+    app.input.onPointerTap.add(() => this.panel.step('paused'));
     app.input.onKeyDown.add(channel => {
       const idx = [Keyboard.One, Keyboard.Two, Keyboard.Three].indexOf(channel);
 
       if (idx !== -1) {
-        void this.switchVideo(idx);
+        this.panel.set('video', VIDEOS[idx]!.label);
       }
     });
-
-    this.video.play();
   }
 
   /** Sizing + playback options shared by every video the example swaps in. */
@@ -98,22 +106,31 @@ class VideoDrawableScene extends Scene {
 
     const entry = VIDEOS[idx];
     this.switching = true;
-    this.hud.setStatus(`Loading — ${entry.label}…`);
+    this.panel.status(`Loading ${entry.label}...`);
 
     try {
-      const loaded = await this.loader.load(Asset.type('video', entry.url));
+      const loaded = await this.loader.load(entry.asset);
       this.loadedVideos.add(entry.name);
       this.video.pause();
       this.videoIdx = idx;
       this.video = loaded;
       this.configureVideo();
+      this.panel.set('paused', false);
       this.video.play();
-      this.hud.setStatus(`Playing — ${entry.label}`);
+      this.panel.status('');
     } catch {
-      this.hud.setStatus(`Failed to load — ${entry.label}`);
+      this.panel.status(`Failed to load ${entry.label}.`);
+      this.panel.set('video', VIDEOS[this.videoIdx]!.label);
     } finally {
       this.switching = false;
     }
+
+    // A choice made while this one was loading is honoured once it is done.
+    const wanted = VIDEOS.findIndex(candidate => candidate.label === this.panel.values.video);
+
+    if (wanted !== this.videoIdx) {
+      void this.switchVideo(wanted);
+    }
   }
 
   override update(delta: Seconds): void {
diff --git a/examples/text-fonts/basic-text.js b/examples/text-fonts/basic-text.js
index 674402edd..3ac314434 100644
--- a/examples/text-fonts/basic-text.js
+++ b/examples/text-fonts/basic-text.js
@@ -1,11 +1,12 @@
 // Auto-generated from basic-text.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class BasicTextScene extends Scene {
   elapsed = 0;
   text;
   async load() {
     const app = this.app;
-    await this.loader.load(Asset.type('font', 'font/Kenney Future.ttf', { family: 'Kenney Future' }));
+    await this.loader.load(Asset.type('font', assets.fontKenneyFuture.source, { family: 'Kenney Future' }));
     const { width, height } = app;
     this.text = new Text('Hello World!', {
       align: 'left',
@@ -36,8 +37,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(BasicTextScene);
diff --git a/examples/text-fonts/basic-text.ts b/examples/text-fonts/basic-text.ts
index eb0a9fe3d..04a4b5370 100644
--- a/examples/text-fonts/basic-text.ts
+++ b/examples/text-fonts/basic-text.ts
@@ -1,4 +1,5 @@
 import { Application, Asset, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, type Seconds, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class BasicTextScene extends Scene {
   private elapsed = 0;
@@ -6,7 +7,7 @@ class BasicTextScene extends Scene {
 
   override async load(): Promise<void> {
     const app = this.app;
-    await this.loader.load(Asset.type('font', 'font/Kenney Future.ttf', { family: 'Kenney Future' }));
+    await this.loader.load(Asset.type('font', assets.fontKenneyFuture.source, { family: 'Kenney Future' }));
 
     const { width, height } = app;
 
@@ -43,9 +44,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(BasicTextScene);
diff --git a/examples/text-fonts/bitmap-text-basic.js b/examples/text-fonts/bitmap-text-basic.js
index f3b3fe50c..72c3d0015 100644
--- a/examples/text-fonts/bitmap-text-basic.js
+++ b/examples/text-fonts/bitmap-text-basic.js
@@ -1,5 +1,6 @@
 // Auto-generated from bitmap-text-basic.ts - edit the .ts source, not this file.
-import { Application, Asset, BitmapText, Color, FixedResolutionCanvasSizing, Scene } from '@codexo/exojs';
+import { Application, BitmapText, Color, FixedResolutionCanvasSizing, Scene } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class BitmapTextBasicScene extends Scene {
   font;
   title;
@@ -9,7 +10,7 @@ class BitmapTextBasicScene extends Scene {
   frame = 0;
   async load() {
     const app = this.app;
-    this.font = await this.loader.load(Asset.type('bmFont', assets.demo.fonts.kenneyBlocksFnt));
+    this.font = await this.loader.load(assets.fontKenneyBlocksFnt);
     const font = this.font;
     const { width, height } = app;
     const marginX = width * 0.08;
diff --git a/examples/text-fonts/bitmap-text-basic.ts b/examples/text-fonts/bitmap-text-basic.ts
index d55b213a1..39cae89a1 100644
--- a/examples/text-fonts/bitmap-text-basic.ts
+++ b/examples/text-fonts/bitmap-text-basic.ts
@@ -1,13 +1,5 @@
-import {
-  Application,
-  Asset,
-  BitmapText,
-  type BmFont,
-  Color,
-  FixedResolutionCanvasSizing,
-  type RenderingContext,
-  Scene,
-} from '@codexo/exojs';
+import { Application, BitmapText, type BmFont, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class BitmapTextBasicScene extends Scene {
   private font!: BmFont;
@@ -19,7 +11,7 @@ class BitmapTextBasicScene extends Scene {
 
   override async load(): Promise<void> {
     const app = this.app;
-    this.font = await this.loader.load(Asset.type('bmFont', assets.demo.fonts.kenneyBlocksFnt));
+    this.font = await this.loader.load(assets.fontKenneyBlocksFnt);
 
     const font = this.font;
     const { width, height } = app;
diff --git a/examples/text-fonts/stroke-and-shadow.js b/examples/text-fonts/stroke-and-shadow.js
index a119c9e6a..fda28f3b9 100644
--- a/examples/text-fonts/stroke-and-shadow.js
+++ b/examples/text-fonts/stroke-and-shadow.js
@@ -32,8 +32,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(24, 28, 42),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(StrokeAndShadowScene);
diff --git a/examples/text-fonts/stroke-and-shadow.ts b/examples/text-fonts/stroke-and-shadow.ts
index 2bd96e258..f03428e46 100644
--- a/examples/text-fonts/stroke-and-shadow.ts
+++ b/examples/text-fonts/stroke-and-shadow.ts
@@ -36,9 +36,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(24, 28, 42),
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(StrokeAndShadowScene);
diff --git a/examples/text-fonts/text-glitch.js b/examples/text-fonts/text-glitch.js
index 562f3a7d3..2e0b7ffc2 100644
--- a/examples/text-fonts/text-glitch.js
+++ b/examples/text-fonts/text-glitch.js
@@ -54,8 +54,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TextGlitchScene);
diff --git a/examples/text-fonts/text-glitch.ts b/examples/text-fonts/text-glitch.ts
index 9df2c6ab3..43ff48862 100644
--- a/examples/text-fonts/text-glitch.ts
+++ b/examples/text-fonts/text-glitch.ts
@@ -61,9 +61,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TextGlitchScene);
diff --git a/examples/text-fonts/typographic-styling.js b/examples/text-fonts/typographic-styling.js
index 022dd80b9..39f6870f8 100644
--- a/examples/text-fonts/typographic-styling.js
+++ b/examples/text-fonts/typographic-styling.js
@@ -1,9 +1,10 @@
 // Auto-generated from typographic-styling.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class TextStylesScene extends Scene {
   labels = [];
   async load() {
-    await this.loader.load(Asset.type('font', 'font/Kenney Future.ttf', { family: 'Kenney Future' }));
+    await this.loader.load(Asset.type('font', assets.fontKenneyFuture.source, { family: 'Kenney Future' }));
   }
   init() {
     const { width } = this.app;
@@ -60,6 +61,5 @@ const app = new Application({
   scenes: { TextStylesScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(18, 22, 34),
-  loader: { basePath: 'assets/' },
 });
 await app.start(TextStylesScene);
diff --git a/examples/text-fonts/typographic-styling.ts b/examples/text-fonts/typographic-styling.ts
index e0f07a4ef..a4de350d6 100644
--- a/examples/text-fonts/typographic-styling.ts
+++ b/examples/text-fonts/typographic-styling.ts
@@ -1,10 +1,11 @@
 import { Application, Asset, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class TextStylesScene extends Scene {
   private readonly labels: Text[] = [];
 
   override async load(): Promise<void> {
-    await this.loader.load(Asset.type('font', 'font/Kenney Future.ttf', { family: 'Kenney Future' }));
+    await this.loader.load(Asset.type('font', assets.fontKenneyFuture.source, { family: 'Kenney Future' }));
   }
 
   override init(): void {
@@ -68,7 +69,6 @@ const app = new Application({
   scenes: { TextStylesScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(18, 22, 34),
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(TextStylesScene);
diff --git a/examples/text-fonts/web-fonts.js b/examples/text-fonts/web-fonts.js
index 67c72ae5e..4f931cb2f 100644
--- a/examples/text-fonts/web-fonts.js
+++ b/examples/text-fonts/web-fonts.js
@@ -1,11 +1,12 @@
 // Auto-generated from web-fonts.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class WebFontsScene extends Scene {
   default;
   loaded;
   async load() {
     const app = this.app;
-    await this.loader.load(Asset.type('font', 'font/Kenney Future.ttf', { family: 'Kenney Future' }));
+    await this.loader.load(Asset.type('font', assets.fontKenneyFuture.source, { family: 'Kenney Future' }));
     const { width, height } = app;
     this.default = new Text('Default Font', { fillColor: Color.white, fontSize: 52, align: 'center' });
     this.default.setAnchor(0.5, 0.5);
@@ -28,8 +29,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(WebFontsScene);
diff --git a/examples/text-fonts/web-fonts.ts b/examples/text-fonts/web-fonts.ts
index 4100c23e9..cb07e7f03 100644
--- a/examples/text-fonts/web-fonts.ts
+++ b/examples/text-fonts/web-fonts.ts
@@ -1,4 +1,5 @@
 import { Application, Asset, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class WebFontsScene extends Scene {
   private default!: Text;
@@ -6,7 +7,7 @@ class WebFontsScene extends Scene {
 
   override async load(): Promise<void> {
     const app = this.app;
-    await this.loader.load(Asset.type('font', 'font/Kenney Future.ttf', { family: 'Kenney Future' }));
+    await this.loader.load(Asset.type('font', assets.fontKenneyFuture.source, { family: 'Kenney Future' }));
 
     const { width, height } = app;
 
@@ -33,9 +34,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(WebFontsScene);
diff --git a/examples/tilemap/editor-objects-gameplay.js b/examples/tilemap/editor-objects-gameplay.js
index 8c648c0f2..376ad2ef1 100644
--- a/examples/tilemap/editor-objects-gameplay.js
+++ b/examples/tilemap/editor-objects-gameplay.js
@@ -1,7 +1,8 @@
 // Auto-generated from editor-objects-gameplay.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { MapObjectSpawner } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import { MapObjectSpawner } from '@codexo/exojs-tilemap';
 import { mountControls } from '@examples/runtime';
 const makeMarker = (object, color) => {
   const marker = new Graphics();
@@ -20,7 +21,7 @@ class EditorObjectsScene extends Scene {
   doorOpen = false;
   collected = false;
   async load() {
-    const source = await this.loader.load(Asset.type('tiledSource', 'json/maps/harbor-plaza.tmj'));
+    const source = await this.loader.load(Asset.type('tiledSource', assets.harborPlazaMap.source));
     const map = source.toTileMap();
     this.mapNode = new TileMapNode(map);
     const spawn = (object, color) => {
@@ -36,12 +37,7 @@ class EditorObjectsScene extends Scene {
       Collectible: object => spawn(object, new Color(75, 225, 241)),
     });
     this.spawns = await spawner.spawn(map, undefined);
-    this.hud = mountControls({
-      title: 'Editor Objects Become Gameplay',
-      controls: [{ keys: 'Click', action: 'toggle the switch, then collect the gem' }],
-      status: 'The authored switch controls the door. Open it to collect the gem.',
-      hint: 'The three colored objects come from the Tiled object layer. MapObjectSpawner creates their runtime counterparts.',
-    });
+    this.hud = mountControls({ status: 'The authored switch controls the door. Open it to collect the gem.' });
     this.app.input.onPointerTap.add(this.onTap);
   }
   onTap = pointer => {
@@ -93,6 +89,5 @@ const app = new Application({
   canvas: { width: 1280, height: 768, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(28, 36, 46),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 await app.start(EditorObjectsScene);
diff --git a/examples/tilemap/editor-objects-gameplay.ts b/examples/tilemap/editor-objects-gameplay.ts
index 6ca4a7ff4..aa5c47b30 100644
--- a/examples/tilemap/editor-objects-gameplay.ts
+++ b/examples/tilemap/editor-objects-gameplay.ts
@@ -1,6 +1,7 @@
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, Text } from '@codexo/exojs';
+import { type MapObjectDescriptor, MapObjectSpawner, type MapSpawnSession } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import { type MapObjectDescriptor, MapObjectSpawner, type MapSpawnSession } from '@codexo/exojs-tilemap';
 import { mountControls } from '@examples/runtime';
 
 const makeMarker = (object: MapObjectDescriptor, color: Color): Graphics => {
@@ -25,7 +26,7 @@ class EditorObjectsScene extends Scene {
   private collected = false;
 
   override async load(): Promise<void> {
-    const source = await this.loader.load(Asset.type('tiledSource', 'json/maps/harbor-plaza.tmj'));
+    const source = await this.loader.load(Asset.type('tiledSource', assets.harborPlazaMap.source));
     const map = source.toTileMap();
     this.mapNode = new TileMapNode(map);
 
@@ -45,12 +46,7 @@ class EditorObjectsScene extends Scene {
     });
     this.spawns = await spawner.spawn(map, undefined);
 
-    this.hud = mountControls({
-      title: 'Editor Objects Become Gameplay',
-      controls: [{ keys: 'Click', action: 'toggle the switch, then collect the gem' }],
-      status: 'The authored switch controls the door. Open it to collect the gem.',
-      hint: 'The three colored objects come from the Tiled object layer. MapObjectSpawner creates their runtime counterparts.',
-    });
+    this.hud = mountControls({ status: 'The authored switch controls the door. Open it to collect the gem.' });
     this.app.input.onPointerTap.add(this.onTap);
   }
 
@@ -115,7 +111,6 @@ const app = new Application({
   canvas: { width: 1280, height: 768, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(28, 36, 46),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(EditorObjectsScene);
diff --git a/examples/tilemap/hexagonal-grid.js b/examples/tilemap/hexagonal-grid.js
index ae54f6d9f..97207b61c 100644
--- a/examples/tilemap/hexagonal-grid.js
+++ b/examples/tilemap/hexagonal-grid.js
@@ -1,7 +1,7 @@
 // Auto-generated from hexagonal-grid.ts - edit the .ts source, not this file.
 import { Application, Color, Container, FixedResolutionCanvasSizing, Graphics, Scene, Texture, TextureRegion } from '@codexo/exojs';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileMapNode, TileProjection, TileSet } from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileMapNode, TileProjection, TileSet } from '@codexo/exojs/tilemap';
+import { choice, demoPanel } from '@examples/runtime';
 // Staggered and hexagonal grids plus a collection-of-images tileset, all
 // built in code - no map file and no image assets.
 //
@@ -73,33 +73,24 @@ const paintTile = (projection, fill, edge, tree) => {
 class HexagonalGridScene extends Scene {
   worldRoot = new Container();
   highlight = new Graphics();
-  layoutIndex = 0;
   map;
   node;
   textures = [];
-  hud;
+  panel;
   init() {
-    this.hud = mountControls({
-      title: 'Hexagonal & Staggered Grids',
-      controls: [
-        { keys: 'Pointer', action: 'pick the cell under it' },
-        { keys: 'panel', action: 'switch the grid layout' },
-      ],
-      status: 'Move the pointer over the map.',
-      hint: 'Each tile is its own canvas texture in an image-collection TileSet; trees overhang the row above, as in Tiled.',
+    this.panel = demoPanel({
+      title: 'Grid',
+      controls: {
+        layout: choice(
+          'Layout',
+          layouts.map(layout => layout.name),
+        ),
+      },
+      onChange: (_key, name) => this.build(layouts.findIndex(layout => layout.name === name)),
     });
-    const panel = mountControlPanel({ title: 'Grid' });
-    panel.addCycle({
-      label: 'Layout',
-      options: layouts.map(layout => layout.name),
-      index: 0,
-      onChange: index => this.build(index),
-    });
-    this.build(0);
     this.app.input.onPointerMove.add(this.onPointerMove);
   }
   build(index) {
-    this.layoutIndex = index;
     this.node?.destroy();
     this.map?.destroy();
     for (const texture of this.textures) {
@@ -162,7 +153,7 @@ class HexagonalGridScene extends Scene {
     const { tx, ty } = this.map.pixelToTile(pointer.x - this.worldRoot.x, pointer.y - this.worldRoot.y);
     this.highlight.clear();
     if (tx < 0 || ty < 0 || tx >= COLUMNS || ty >= ROWS) {
-      this.hud.setStatus(`Outside the map - nearest cell (${tx}, ${ty}).`);
+      this.panel.status(`Outside the map - nearest cell (${tx}, ${ty}).`);
       return;
     }
     const corner = projection.tileToPixel(tx, ty);
@@ -173,14 +164,14 @@ class HexagonalGridScene extends Scene {
     this.highlight.drawPolygon(outline.map((value, i) => value + (i % 2 === 0 ? corner.x : corner.y)));
     const tile = this.map.getTileAt(1, tx, ty);
     const terrain = tile?.localTileId === TREE ? 'tree' : (['grass', 'water', 'sand'][tile?.localTileId ?? 0] ?? 'grass');
-    this.hud.setStatus(`${layouts[this.layoutIndex].name}: cell (${tx}, ${ty}) - ${terrain}`);
+    this.panel.status(`Cell (${tx}, ${ty}) - ${terrain}`);
   };
   draw(context) {
     context.render(this.worldRoot);
   }
   destroy() {
     this.app.input.onPointerMove.remove(this.onPointerMove);
-    this.hud?.dispose();
+    this.panel?.dispose();
     this.worldRoot.destroy();
     this.map?.destroy();
     for (const texture of this.textures) {
diff --git a/examples/tilemap/hexagonal-grid.ts b/examples/tilemap/hexagonal-grid.ts
index 034e16a16..22ea183be 100644
--- a/examples/tilemap/hexagonal-grid.ts
+++ b/examples/tilemap/hexagonal-grid.ts
@@ -19,8 +19,8 @@ import {
   TileProjection,
   type TileProjectionOptions,
   TileSet,
-} from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/tilemap';
+import { choice, demoPanel } from '@examples/runtime';
 
 // Staggered and hexagonal grids plus a collection-of-images tileset, all
 // built in code - no map file and no image assets.
@@ -116,38 +116,26 @@ const paintTile = (projection: TileProjection, fill: string, edge: string, tree:
 class HexagonalGridScene extends Scene {
   private readonly worldRoot = new Container();
   private readonly highlight = new Graphics();
-  private layoutIndex = 0;
   private map!: TileMap;
   private node!: TileMapNode;
   private textures: Texture[] = [];
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: ReturnType<typeof demoPanel>;
 
   override init(): void {
-    this.hud = mountControls({
-      title: 'Hexagonal & Staggered Grids',
-      controls: [
-        { keys: 'Pointer', action: 'pick the cell under it' },
-        { keys: 'panel', action: 'switch the grid layout' },
-      ],
-      status: 'Move the pointer over the map.',
-      hint: 'Each tile is its own canvas texture in an image-collection TileSet; trees overhang the row above, as in Tiled.',
+    this.panel = demoPanel({
+      title: 'Grid',
+      controls: {
+        layout: choice(
+          'Layout',
+          layouts.map(layout => layout.name),
+        ),
+      },
+      onChange: (_key, name) => this.build(layouts.findIndex(layout => layout.name === name)),
     });
-
-    const panel = mountControlPanel({ title: 'Grid' });
-
-    panel.addCycle({
-      label: 'Layout',
-      options: layouts.map(layout => layout.name),
-      index: 0,
-      onChange: index => this.build(index),
-    });
-
-    this.build(0);
     this.app.input.onPointerMove.add(this.onPointerMove);
   }
 
   private build(index: number): void {
-    this.layoutIndex = index;
     this.node?.destroy();
     this.map?.destroy();
 
@@ -223,7 +211,7 @@ class HexagonalGridScene extends Scene {
     this.highlight.clear();
 
     if (tx < 0 || ty < 0 || tx >= COLUMNS || ty >= ROWS) {
-      this.hud.setStatus(`Outside the map - nearest cell (${tx}, ${ty}).`);
+      this.panel.status(`Outside the map - nearest cell (${tx}, ${ty}).`);
 
       return;
     }
@@ -239,7 +227,7 @@ class HexagonalGridScene extends Scene {
     const tile = this.map.getTileAt(1, tx, ty);
     const terrain = tile?.localTileId === TREE ? 'tree' : (['grass', 'water', 'sand'][tile?.localTileId ?? 0] ?? 'grass');
 
-    this.hud.setStatus(`${layouts[this.layoutIndex]!.name}: cell (${tx}, ${ty}) - ${terrain}`);
+    this.panel.status(`Cell (${tx}, ${ty}) - ${terrain}`);
   };
 
   override draw(context: RenderingContext): void {
@@ -248,7 +236,7 @@ class HexagonalGridScene extends Scene {
 
   override destroy(): void {
     this.app.input.onPointerMove.remove(this.onPointerMove);
-    this.hud?.dispose();
+    this.panel?.dispose();
     this.worldRoot.destroy();
     this.map?.destroy();
 
diff --git a/examples/tilemap/infinite-terrain.js b/examples/tilemap/infinite-terrain.js
index a307d57f0..653949286 100644
--- a/examples/tilemap/infinite-terrain.js
+++ b/examples/tilemap/infinite-terrain.js
@@ -1,7 +1,6 @@
 // Auto-generated from infinite-terrain.ts - edit the .ts source, not this file.
 import {
   Application,
-  Asset,
   Color,
   Container,
   FixedResolutionCanvasSizing,
@@ -19,7 +18,8 @@ import {
   TileMap,
   tilemapExtension,
   TileSet,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 // An infinite, procedurally generated world: the TileLayer has NO width/height
 // (unbounded), and a ChunkStreamer keeps only the chunks near the camera
@@ -105,7 +105,7 @@ class InfiniteTerrainScene extends Scene {
   hudTimer = 0;
   hud;
   async load() {
-    const tilesTexture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const tilesTexture = await this.loader.load(assets.mapPackTilesheet);
     this.tileset = new TileSet({
       name: 'biomes',
       texture: new TextureRegion(tilesTexture, { x: 0, y: 0, width: tilesTexture.width, height: tilesTexture.height }),
@@ -126,8 +126,8 @@ class InfiniteTerrainScene extends Scene {
     });
     this.mapView = map.createView({ bands: { terrain: ['terrain'] } });
     const characters = new Spritesheet(
-      await this.loader.load(Asset.type('texture', assets.demo.spritesheets.platformerCharacters.image)),
-      await this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data)),
+      await this.loader.load(assets.platformerCharactersImage),
+      await this.loader.load(assets.platformerCharactersAtlas),
     );
     this.explorer = characters.getFrameSprite('character_green_front').setAnchor(0.5);
     this.explorer.setPosition(0, 0);
diff --git a/examples/tilemap/infinite-terrain.ts b/examples/tilemap/infinite-terrain.ts
index 0cd609dac..1a329f118 100644
--- a/examples/tilemap/infinite-terrain.ts
+++ b/examples/tilemap/infinite-terrain.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   Color,
   Container,
   FixedResolutionCanvasSizing,
@@ -23,7 +22,8 @@ import {
   tilemapExtension,
   type TileMapView,
   TileSet,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControlPanel, mountControls } from '@examples/runtime';
 
 // An infinite, procedurally generated world: the TileLayer has NO width/height
@@ -127,7 +127,7 @@ class InfiniteTerrainScene extends Scene {
   private hud!: ReturnType<typeof mountControls>;
 
   override async load(): Promise<void> {
-    const tilesTexture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const tilesTexture = await this.loader.load(assets.mapPackTilesheet);
     this.tileset = new TileSet({
       name: 'biomes',
       texture: new TextureRegion(tilesTexture, { x: 0, y: 0, width: tilesTexture.width, height: tilesTexture.height }),
@@ -150,8 +150,8 @@ class InfiniteTerrainScene extends Scene {
     this.mapView = map.createView({ bands: { terrain: ['terrain'] } });
 
     const characters = new Spritesheet(
-      await this.loader.load(Asset.type('texture', assets.demo.spritesheets.platformerCharacters.image)),
-      (await this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data))) as SpritesheetData,
+      await this.loader.load(assets.platformerCharactersImage),
+      (await this.loader.load(assets.platformerCharactersAtlas)) as SpritesheetData,
     );
 
     this.explorer = characters.getFrameSprite('character_green_front').setAnchor(0.5);
diff --git a/examples/tilemap/ldtk-world-import.js b/examples/tilemap/ldtk-world-import.js
index 3d0098e05..aaebb3bdd 100644
--- a/examples/tilemap/ldtk-world-import.js
+++ b/examples/tilemap/ldtk-world-import.js
@@ -1,8 +1,9 @@
 // Auto-generated from ldtk-world-import.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, Container, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { TileMapNode } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { getLdtkIntGridValueAt, ldtkExtension } from '@codexo/exojs-ldtk';
-import { TileMapNode } from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 // Loading an LDtk world (`.ldtk`) through @codexo/exojs-ldtk.
 //
 //   - `loader.load(Asset.type('ldtkMap', url))` fetches the world, loads every referenced
@@ -19,7 +20,7 @@ import { mountControlPanel, mountControls } from '@examples/runtime';
 //     `TileMapObject` shape a Tiled object layer produces, with entity
 //     fields (`Int`, `String`, ...) carried as `properties`.
 //
-// harbor-world.ldtk (examples/assets/json/maps/) defines two levels sharing
+// harbor-world.ldtk (`assets.harborWorldProject`) defines two levels sharing
 // one tileset: "Level_Harbor" and "Level_Lighthouse", each with a Ground
 // tile layer, a Walls IntGrid layer (Wall / Water), and an Entities layer.
 /** Parse an LDtk `"#rrggbb"` colour string into an engine `Color` with the given alpha. */
@@ -30,60 +31,44 @@ const hexToColor = (hex, alpha) => {
 class LdtkWorldImportScene extends Scene {
   world;
   content = new Container();
-  hud;
   panel;
-  showIntGrid = true;
+  summary = '';
   async load() {
-    // The .ldtk source must be an absolute URL: @codexo/exojs-ldtk resolves
-    // tileset relPaths with `new URL(relPath, source)`, which throws for a
-    // relative `source` (unlike the Tiled adapter's relative-base-aware
-    // resolver). Resolve against the page URL until the adapter handles
-    // relative bases itself.
-    const worldUrl = new URL('assets/json/maps/harbor-world.ldtk', window.location.href).href;
-    this.world = await this.loader.load(Asset.type('ldtkMap', worldUrl));
-    this.hud = mountControls({
-      title: 'LDtk World Import',
-      controls: [{ keys: 'panel', action: 'switch level / toggle the IntGrid overlay' }],
-      status: `${this.world.levels.length} levels loaded`,
-      hint: 'Coloured squares come from getLdtkIntGridValueAt() — the raw Walls IntGrid cell values, resolved to their LDtk-authored name + colour.',
-    });
-    this.panel = mountControlPanel({ title: 'LDtk' });
-    this.panel.addCycle({
-      label: 'Level',
-      options: this.world.levels.map(level => level.name),
-      index: 0,
-      onChange: index => this.showLevel(index),
-    });
-    this.panel.addToggle({
-      label: 'IntGrid overlay',
-      value: true,
-      onChange: on => {
-        this.showIntGrid = on;
-        this.showLevel(this.currentLevelIndex);
+    // The LDtk adapter resolves tileset paths with `new URL(relPath, source)`,
+    // so the world needs an absolute source; the demo catalog's URLs are.
+    this.world = await this.loader.load(Asset.type('ldtkMap', assets.harborWorldProject.source));
+    this.panel = demoPanel({
+      title: 'LDtk',
+      controls: {
+        level: choice(
+          'Level',
+          this.world.levels.map(level => level.name),
+        ),
+        intGrid: toggle('IntGrid overlay', true),
       },
+      onChange: (_key, _value, values) => this.showLevel(values.level, values.intGrid),
     });
-    this.showLevel(0);
+    this.panel.status(this.summary);
   }
-  currentLevelIndex = 0;
-  showLevel(index) {
-    this.currentLevelIndex = index;
+  showLevel(name, showIntGrid) {
     // The level view owns these nodes; detaching alone would leave each
     // TileLayerNode subscribed to its (loader-owned) layer.
     for (const child of [...this.content.children]) {
       child.destroy();
     }
-    const level = this.world.levels[index];
+    const level = this.world.levels.find(candidate => candidate.name === name);
     if (!level) {
       return;
     }
     const mapNode = new TileMapNode(level);
     this.content.addChild(mapNode);
-    if (this.showIntGrid) {
+    if (showIntGrid) {
       this.content.addChild(this.buildIntGridOverlay(level));
     }
     this.content.addChild(this.buildEntityLabels(level));
     const entities = level.getObjectLayer('Entities');
-    this.hud.setStatus(`${level.name}: ${entities?.objects.length ?? 0} entities, ${level.width}x${level.height} tiles`);
+    this.summary = `${level.name}: ${entities?.objects.length ?? 0} entities, ${level.width}x${level.height} tiles`;
+    this.panel?.status(this.summary);
   }
   /** Tint every IntGrid cell using its LDtk-authored name + colour (Wall / Water). */
   buildIntGridOverlay(level) {
@@ -125,7 +110,6 @@ class LdtkWorldImportScene extends Scene {
   }
   destroy() {
     this.content.destroy();
-    this.hud?.dispose();
     this.panel?.dispose();
     super.destroy();
   }
diff --git a/examples/tilemap/ldtk-world-import.ts b/examples/tilemap/ldtk-world-import.ts
index 53f23d2e2..f04e19938 100644
--- a/examples/tilemap/ldtk-world-import.ts
+++ b/examples/tilemap/ldtk-world-import.ts
@@ -9,9 +9,10 @@ import {
   Scene,
   Text,
 } from '@codexo/exojs';
+import { TileMapNode } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { getLdtkIntGridValueAt, ldtkExtension, type LdtkMap } from '@codexo/exojs-ldtk';
-import { TileMapNode } from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 
 // Loading an LDtk world (`.ldtk`) through @codexo/exojs-ldtk.
 //
@@ -29,7 +30,7 @@ import { mountControlPanel, mountControls } from '@examples/runtime';
 //     `TileMapObject` shape a Tiled object layer produces, with entity
 //     fields (`Int`, `String`, ...) carried as `properties`.
 //
-// harbor-world.ldtk (examples/assets/json/maps/) defines two levels sharing
+// harbor-world.ldtk (`assets.harborWorldProject`) defines two levels sharing
 // one tileset: "Level_Harbor" and "Level_Lighthouse", each with a Ground
 // tile layer, a Walls IntGrid layer (Wall / Water), and an Entities layer.
 
@@ -43,58 +44,36 @@ const hexToColor = (hex: string, alpha: number): Color => {
 class LdtkWorldImportScene extends Scene {
   private world!: LdtkMap;
   private content = new Container();
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
-  private showIntGrid = true;
+  private panel?: ReturnType<typeof demoPanel>;
+  private summary = '';
 
   override async load(): Promise<void> {
-    // The .ldtk source must be an absolute URL: @codexo/exojs-ldtk resolves
-    // tileset relPaths with `new URL(relPath, source)`, which throws for a
-    // relative `source` (unlike the Tiled adapter's relative-base-aware
-    // resolver). Resolve against the page URL until the adapter handles
-    // relative bases itself.
-    const worldUrl = new URL('assets/json/maps/harbor-world.ldtk', window.location.href).href;
-
-    this.world = await this.loader.load(Asset.type('ldtkMap', worldUrl));
-
-    this.hud = mountControls({
-      title: 'LDtk World Import',
-      controls: [{ keys: 'panel', action: 'switch level / toggle the IntGrid overlay' }],
-      status: `${this.world.levels.length} levels loaded`,
-      hint: 'Coloured squares come from getLdtkIntGridValueAt() — the raw Walls IntGrid cell values, resolved to their LDtk-authored name + colour.',
-    });
-
-    this.panel = mountControlPanel({ title: 'LDtk' });
-    this.panel.addCycle({
-      label: 'Level',
-      options: this.world.levels.map(level => level.name),
-      index: 0,
-      onChange: index => this.showLevel(index),
-    });
-    this.panel.addToggle({
-      label: 'IntGrid overlay',
-      value: true,
-      onChange: on => {
-        this.showIntGrid = on;
-        this.showLevel(this.currentLevelIndex);
+    // The LDtk adapter resolves tileset paths with `new URL(relPath, source)`,
+    // so the world needs an absolute source; the demo catalog's URLs are.
+    this.world = await this.loader.load(Asset.type('ldtkMap', assets.harborWorldProject.source));
+
+    this.panel = demoPanel({
+      title: 'LDtk',
+      controls: {
+        level: choice(
+          'Level',
+          this.world.levels.map(level => level.name),
+        ),
+        intGrid: toggle('IntGrid overlay', true),
       },
+      onChange: (_key, _value, values) => this.showLevel(values.level, values.intGrid),
     });
-
-    this.showLevel(0);
+    this.panel.status(this.summary);
   }
 
-  private currentLevelIndex = 0;
-
-  private showLevel(index: number): void {
-    this.currentLevelIndex = index;
-
+  private showLevel(name: string, showIntGrid: boolean): void {
     // The level view owns these nodes; detaching alone would leave each
     // TileLayerNode subscribed to its (loader-owned) layer.
     for (const child of [...this.content.children]) {
       child.destroy();
     }
 
-    const level = this.world.levels[index];
+    const level = this.world.levels.find(candidate => candidate.name === name);
 
     if (!level) {
       return;
@@ -103,7 +82,7 @@ class LdtkWorldImportScene extends Scene {
     const mapNode = new TileMapNode(level);
     this.content.addChild(mapNode);
 
-    if (this.showIntGrid) {
+    if (showIntGrid) {
       this.content.addChild(this.buildIntGridOverlay(level));
     }
 
@@ -111,11 +90,12 @@ class LdtkWorldImportScene extends Scene {
 
     const entities = level.getObjectLayer('Entities');
 
-    this.hud.setStatus(`${level.name}: ${entities?.objects.length ?? 0} entities, ${level.width}x${level.height} tiles`);
+    this.summary = `${level.name}: ${entities?.objects.length ?? 0} entities, ${level.width}x${level.height} tiles`;
+    this.panel?.status(this.summary);
   }
 
   /** Tint every IntGrid cell using its LDtk-authored name + colour (Wall / Water). */
-  private buildIntGridOverlay(level: import('@codexo/exojs-tilemap').TileMap): Graphics {
+  private buildIntGridOverlay(level: import('@codexo/exojs/tilemap').TileMap): Graphics {
     const overlay = new Graphics();
     const walls = level.layers.find(layer => layer.name === 'Walls');
 
@@ -142,7 +122,7 @@ class LdtkWorldImportScene extends Scene {
   }
 
   /** One small label per entity, naming it and its first custom field. */
-  private buildEntityLabels(level: import('@codexo/exojs-tilemap').TileMap): Container {
+  private buildEntityLabels(level: import('@codexo/exojs/tilemap').TileMap): Container {
     const labels = new Container();
     const entities = level.getObjectLayer('Entities');
 
@@ -167,7 +147,6 @@ class LdtkWorldImportScene extends Scene {
 
   override destroy(): void {
     this.content.destroy();
-    this.hud?.dispose();
     this.panel?.dispose();
     super.destroy();
   }
diff --git a/examples/tilemap/level-loading-and-ownership.js b/examples/tilemap/level-loading-and-ownership.js
index 4f56f129f..b3757206d 100644
--- a/examples/tilemap/level-loading-and-ownership.js
+++ b/examples/tilemap/level-loading-and-ownership.js
@@ -1,8 +1,9 @@
 // Auto-generated from level-loading-and-ownership.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Scene, Text } from '@codexo/exojs';
+import { MapLevelSide, MapWorld, MapWorldRuntime } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import { MapLevelSide, MapWorld, MapWorldRuntime } from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel } from '@examples/runtime';
 const ROOM_SIZE = { x: 0, y: 0, width: 1280, height: 768 };
 const world = new MapWorld({
   name: 'Two Rooms',
@@ -28,8 +29,8 @@ const world = new MapWorld({
   ],
 });
 const roomPath = {
-  harbor: 'json/maps/harbor-plaza.tmj',
-  workshop: 'json/maps/ownership-workshop.tmj',
+  harbor: assets.harborPlazaMap.source,
+  workshop: assets.ownershipWorkshopMap.source,
 };
 const waitForTransition = signal =>
   new Promise((resolve, reject) => {
@@ -53,7 +54,6 @@ class LevelOwnershipScene extends Scene {
   activeId = null;
   pending = null;
   roomLabel = new Text('No room loaded', { fillColor: new Color(31, 49, 54), fontSize: 34 });
-  hud;
   panel;
   init() {
     this.roomLabel.position.set(470, 80);
@@ -65,27 +65,20 @@ class LevelOwnershipScene extends Scene {
         return scope.load(Asset.type('tileMap', roomPath[level.id]));
       },
     });
-    this.hud = mountControls({
-      title: 'Level Loading and Asset Ownership',
-      controls: [{ keys: 'Panel', action: 'load a room, cancel a pending load, or unload it' }],
-      status: 'Each room gets a child loader scope. Both maps reference the same atlas.',
-      hint: 'A short delay makes cancellation observable; the map and its asset scope remain owned by MapWorldRuntime.',
-    });
-    this.panel = mountControlPanel({ title: 'Rooms' });
-    this.panel.addButton({
-      label: 'Enter Harbor',
-      onClick: () => {
-        void this.enter('harbor');
-      },
-    });
-    this.panel.addButton({
-      label: 'Enter Workshop',
-      onClick: () => {
-        void this.enter('workshop');
+    this.panel = demoPanel({
+      title: 'Rooms',
+      controls: {},
+      actions: {
+        'Enter Harbor': () => {
+          void this.enter('harbor');
+        },
+        'Enter Workshop': () => {
+          void this.enter('workshop');
+        },
+        'Cancel pending': () => this.cancelPending(),
+        'Unload room': () => this.unloadActive(),
       },
     });
-    this.panel.addButton({ label: 'Cancel pending', onClick: () => this.cancelPending() });
-    this.panel.addButton({ label: 'Unload room', onClick: () => this.unloadActive() });
     void this.enter('harbor');
   }
   async enter(id) {
@@ -97,7 +90,8 @@ class LevelOwnershipScene extends Scene {
     // settles after its replacement started, and must not touch its state.
     const request = { id };
     this.pending = request;
-    this.hud.setStatus(`Loading ${world.getLevel(id)?.name}... ${this.describeResidency()}`);
+    this.roomLabel.text = `Loading ${world.getLevel(id)?.name}...`;
+    this.panel.status(this.describeResidency());
     try {
       const level = await this.runtime.loadLevel(id);
       if (this.pending !== request) {
@@ -113,10 +107,10 @@ class LevelOwnershipScene extends Scene {
       if (previousId) {
         this.runtime.unloadLevel(previousId);
       }
-      this.hud.setStatus(`${level.level.name} ready. ${this.describeResidency()}`);
+      this.panel.status(this.describeResidency());
     } catch (error) {
       if (this.pending === request) {
-        this.hud.setStatus(error instanceof Error ? error.message : String(error));
+        this.panel.status(error instanceof Error ? error.message : String(error));
       }
     } finally {
       if (this.pending === request) {
@@ -131,7 +125,8 @@ class LevelOwnershipScene extends Scene {
     const { id } = this.pending;
     this.pending = null;
     this.runtime.unloadLevel(id);
-    this.hud.setStatus(`${world.getLevel(id)?.name} cancelled. ${this.describeResidency()}`);
+    this.roomLabel.text = this.activeId ? `${world.getLevel(this.activeId)?.name} loaded` : 'No room loaded';
+    this.panel.status(this.describeResidency());
   }
   unloadActive() {
     if (!this.activeId) {
@@ -143,7 +138,7 @@ class LevelOwnershipScene extends Scene {
     this.activeId = null;
     this.runtime.unloadLevel(id);
     this.roomLabel.text = 'No room loaded';
-    this.hud.setStatus(`${world.getLevel(id)?.name} unloaded. ${this.describeResidency()}`);
+    this.panel.status(this.describeResidency());
   }
   describeResidency() {
     const atlas = this.app.loader.inspect().find(row => row.aliases.some(alias => alias.includes('mapPack_tilesheet')));
@@ -160,7 +155,6 @@ class LevelOwnershipScene extends Scene {
     this.node?.destroy();
     this.runtime?.destroy();
     this.roomLabel.destroy();
-    this.hud?.dispose();
     this.panel?.dispose();
     super.destroy();
   }
@@ -170,6 +164,5 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(28, 36, 46),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 await app.start(LevelOwnershipScene);
diff --git a/examples/tilemap/level-loading-and-ownership.ts b/examples/tilemap/level-loading-and-ownership.ts
index 5aa713e44..9404e157c 100644
--- a/examples/tilemap/level-loading-and-ownership.ts
+++ b/examples/tilemap/level-loading-and-ownership.ts
@@ -1,7 +1,8 @@
 import { Application, Asset, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Text } from '@codexo/exojs';
+import { MapLevelSide, MapWorld, MapWorldRuntime } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import { MapLevelSide, MapWorld, MapWorldRuntime } from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { demoPanel } from '@examples/runtime';
 
 const ROOM_SIZE = { x: 0, y: 0, width: 1280, height: 768 };
 const world = new MapWorld({
@@ -29,8 +30,8 @@ const world = new MapWorld({
 });
 
 const roomPath: Record<string, string> = {
-  harbor: 'json/maps/harbor-plaza.tmj',
-  workshop: 'json/maps/ownership-workshop.tmj',
+  harbor: assets.harborPlazaMap.source,
+  workshop: assets.ownershipWorkshopMap.source,
 };
 
 const waitForTransition = (signal: AbortSignal): Promise<void> =>
@@ -59,8 +60,7 @@ class LevelOwnershipScene extends Scene {
   private activeId: string | null = null;
   private pending: { readonly id: string } | null = null;
   private readonly roomLabel = new Text('No room loaded', { fillColor: new Color(31, 49, 54), fontSize: 34 });
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: ReturnType<typeof demoPanel>;
 
   override init(): void {
     this.roomLabel.position.set(470, 80);
@@ -73,27 +73,20 @@ class LevelOwnershipScene extends Scene {
         return scope.load(Asset.type('tileMap', roomPath[level.id]!));
       },
     });
-    this.hud = mountControls({
-      title: 'Level Loading and Asset Ownership',
-      controls: [{ keys: 'Panel', action: 'load a room, cancel a pending load, or unload it' }],
-      status: 'Each room gets a child loader scope. Both maps reference the same atlas.',
-      hint: 'A short delay makes cancellation observable; the map and its asset scope remain owned by MapWorldRuntime.',
-    });
-    this.panel = mountControlPanel({ title: 'Rooms' });
-    this.panel.addButton({
-      label: 'Enter Harbor',
-      onClick: () => {
-        void this.enter('harbor');
-      },
-    });
-    this.panel.addButton({
-      label: 'Enter Workshop',
-      onClick: () => {
-        void this.enter('workshop');
+    this.panel = demoPanel({
+      title: 'Rooms',
+      controls: {},
+      actions: {
+        'Enter Harbor': () => {
+          void this.enter('harbor');
+        },
+        'Enter Workshop': () => {
+          void this.enter('workshop');
+        },
+        'Cancel pending': () => this.cancelPending(),
+        'Unload room': () => this.unloadActive(),
       },
     });
-    this.panel.addButton({ label: 'Cancel pending', onClick: () => this.cancelPending() });
-    this.panel.addButton({ label: 'Unload room', onClick: () => this.unloadActive() });
     void this.enter('harbor');
   }
 
@@ -109,7 +102,8 @@ class LevelOwnershipScene extends Scene {
     const request = { id };
 
     this.pending = request;
-    this.hud.setStatus(`Loading ${world.getLevel(id)?.name}... ${this.describeResidency()}`);
+    this.roomLabel.text = `Loading ${world.getLevel(id)?.name}...`;
+    this.panel.status(this.describeResidency());
 
     try {
       const level = await this.runtime.loadLevel(id);
@@ -131,10 +125,10 @@ class LevelOwnershipScene extends Scene {
         this.runtime.unloadLevel(previousId);
       }
 
-      this.hud.setStatus(`${level.level.name} ready. ${this.describeResidency()}`);
+      this.panel.status(this.describeResidency());
     } catch (error) {
       if (this.pending === request) {
-        this.hud.setStatus(error instanceof Error ? error.message : String(error));
+        this.panel.status(error instanceof Error ? error.message : String(error));
       }
     } finally {
       if (this.pending === request) {
@@ -152,7 +146,8 @@ class LevelOwnershipScene extends Scene {
 
     this.pending = null;
     this.runtime.unloadLevel(id);
-    this.hud.setStatus(`${world.getLevel(id)?.name} cancelled. ${this.describeResidency()}`);
+    this.roomLabel.text = this.activeId ? `${world.getLevel(this.activeId)?.name} loaded` : 'No room loaded';
+    this.panel.status(this.describeResidency());
   }
 
   private unloadActive(): void {
@@ -166,7 +161,7 @@ class LevelOwnershipScene extends Scene {
     this.activeId = null;
     this.runtime.unloadLevel(id);
     this.roomLabel.text = 'No room loaded';
-    this.hud.setStatus(`${world.getLevel(id)?.name} unloaded. ${this.describeResidency()}`);
+    this.panel.status(this.describeResidency());
   }
 
   private describeResidency(): string {
@@ -188,7 +183,6 @@ class LevelOwnershipScene extends Scene {
     this.node?.destroy();
     this.runtime?.destroy();
     this.roomLabel.destroy();
-    this.hud?.dispose();
     this.panel?.dispose();
     super.destroy();
   }
@@ -199,7 +193,6 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(28, 36, 46),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(LevelOwnershipScene);
diff --git a/examples/tilemap/paint-autotiled-room.js b/examples/tilemap/paint-autotiled-room.js
index ad5586fb9..7eb1027dc 100644
--- a/examples/tilemap/paint-autotiled-room.js
+++ b/examples/tilemap/paint-autotiled-room.js
@@ -1,5 +1,5 @@
 // Auto-generated from paint-autotiled-room.ts - edit the .ts source, not this file.
-import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, TextureRegion } from '@codexo/exojs';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, Scene, TextureRegion } from '@codexo/exojs';
 import {
   refreshCell,
   TILE_TRANSFORM_IDENTITY,
@@ -9,8 +9,9 @@ import {
   TileMapNode,
   TileSet,
   WangSet,
-} from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, toggle } from '@examples/runtime';
 const TILE = 64;
 const WIDTH = 16;
 const HEIGHT = 11;
@@ -52,7 +53,6 @@ class AutoTiledRoomScene extends Scene {
   tileset;
   node;
   grid = new Graphics();
-  hud;
   panel;
   wang = new WangSet({
     tilesetIndex: 0,
@@ -62,7 +62,7 @@ class AutoTiledRoomScene extends Scene {
   erase = false;
   painting = false;
   async load() {
-    const texture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const texture = await this.loader.load(assets.mapPackTilesheet);
     this.tileset = new TileSet({
       name: 'map-pack',
       texture: new TextureRegion(texture, { x: 0, y: 0, width: texture.width, height: texture.height }),
@@ -110,17 +110,10 @@ class AutoTiledRoomScene extends Scene {
     for (let y = 0; y <= HEIGHT; y++) {
       this.grid.drawLine(OFFSET_X, y * TILE, OFFSET_X + WIDTH * TILE, y * TILE);
     }
-    this.hud = mountControls({
-      title: 'Paint an Autotiled Room',
-      controls: [{ keys: 'Drag', action: 'paint or erase grass' }],
-      status: 'Paint grass. Each edit refreshes only the cell and its neighbors.',
-      hint: 'WangSet maps four-neighbor masks to tile variants in the existing map atlas.',
-    });
-    this.panel = mountControlPanel({ title: 'Brush' });
-    this.panel.addToggle({
-      label: 'Erase',
-      value: false,
-      onChange: value => {
+    this.panel = demoPanel({
+      title: 'Brush',
+      controls: { erase: toggle('Erase', false) },
+      onChange: (_key, value) => {
         this.erase = value;
       },
     });
@@ -141,7 +134,6 @@ class AutoTiledRoomScene extends Scene {
       this.layer.setTileAt(x, y, { tileset: this.tileset, localTileId: GRASS, transform: TILE_TRANSFORM_IDENTITY });
     }
     refreshCell(this.layer, x, y, this.wang, { wrapBorder: false });
-    this.hud.setStatus(`${this.erase ? 'Erased' : 'Painted'} (${x}, ${y}); local Wang neighbors updated.`);
   };
   onDown = pointer => {
     this.painting = true;
@@ -164,7 +156,6 @@ class AutoTiledRoomScene extends Scene {
     this.app.input.onPointerMove.remove(this.onMove);
     this.app.input.onPointerUp.remove(this.onEnd);
     this.app.input.onPointerCancel.remove(this.onEnd);
-    this.hud?.dispose();
     this.panel?.dispose();
     this.grid.destroy();
     this.node?.destroy();
@@ -176,6 +167,5 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(32, 44, 50),
   extensions: [tilemapExtension],
-  loader: { basePath: 'assets/' },
 });
 await app.start(AutoTiledRoomScene);
diff --git a/examples/tilemap/paint-autotiled-room.ts b/examples/tilemap/paint-autotiled-room.ts
index e2e64c608..10e9618bc 100644
--- a/examples/tilemap/paint-autotiled-room.ts
+++ b/examples/tilemap/paint-autotiled-room.ts
@@ -1,13 +1,4 @@
-import {
-  Application,
-  Asset,
-  Color,
-  FixedResolutionCanvasSizing,
-  Graphics,
-  type RenderingContext,
-  Scene,
-  TextureRegion,
-} from '@codexo/exojs';
+import { Application, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, TextureRegion } from '@codexo/exojs';
 import {
   refreshCell,
   TILE_TRANSFORM_IDENTITY,
@@ -17,8 +8,9 @@ import {
   TileMapNode,
   TileSet,
   WangSet,
-} from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { demoPanel, toggle } from '@examples/runtime';
 
 const TILE = 64;
 const WIDTH = 16;
@@ -72,8 +64,7 @@ class AutoTiledRoomScene extends Scene {
   private tileset!: TileSet;
   private node!: TileMapNode;
   private readonly grid = new Graphics();
-  private hud!: ReturnType<typeof mountControls>;
-  private panel!: ReturnType<typeof mountControlPanel>;
+  private panel!: ReturnType<typeof demoPanel>;
   private readonly wang = new WangSet({
     tilesetIndex: 0,
     type: 'edge',
@@ -83,7 +74,7 @@ class AutoTiledRoomScene extends Scene {
   private painting = false;
 
   override async load(): Promise<void> {
-    const texture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const texture = await this.loader.load(assets.mapPackTilesheet);
     this.tileset = new TileSet({
       name: 'map-pack',
       texture: new TextureRegion(texture, { x: 0, y: 0, width: texture.width, height: texture.height }),
@@ -138,17 +129,10 @@ class AutoTiledRoomScene extends Scene {
       this.grid.drawLine(OFFSET_X, y * TILE, OFFSET_X + WIDTH * TILE, y * TILE);
     }
 
-    this.hud = mountControls({
-      title: 'Paint an Autotiled Room',
-      controls: [{ keys: 'Drag', action: 'paint or erase grass' }],
-      status: 'Paint grass. Each edit refreshes only the cell and its neighbors.',
-      hint: 'WangSet maps four-neighbor masks to tile variants in the existing map atlas.',
-    });
-    this.panel = mountControlPanel({ title: 'Brush' });
-    this.panel.addToggle({
-      label: 'Erase',
-      value: false,
-      onChange: value => {
+    this.panel = demoPanel({
+      title: 'Brush',
+      controls: { erase: toggle('Erase', false) },
+      onChange: (_key, value) => {
         this.erase = value;
       },
     });
@@ -173,7 +157,6 @@ class AutoTiledRoomScene extends Scene {
     }
 
     refreshCell(this.layer, x, y, this.wang, { wrapBorder: false });
-    this.hud.setStatus(`${this.erase ? 'Erased' : 'Painted'} (${x}, ${y}); local Wang neighbors updated.`);
   };
   private readonly onDown = (pointer: { x: number; y: number }): void => {
     this.painting = true;
@@ -198,7 +181,6 @@ class AutoTiledRoomScene extends Scene {
     this.app.input.onPointerMove.remove(this.onMove);
     this.app.input.onPointerUp.remove(this.onEnd);
     this.app.input.onPointerCancel.remove(this.onEnd);
-    this.hud?.dispose();
     this.panel?.dispose();
     this.grid.destroy();
     this.node?.destroy();
@@ -211,7 +193,6 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(32, 44, 50),
   extensions: [tilemapExtension],
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(AutoTiledRoomScene);
diff --git a/examples/tilemap/tile-chunks-and-bands.js b/examples/tilemap/tile-chunks-and-bands.js
index 707348dc9..ccfb3634c 100644
--- a/examples/tilemap/tile-chunks-and-bands.js
+++ b/examples/tilemap/tile-chunks-and-bands.js
@@ -1,7 +1,6 @@
 // Auto-generated from tile-chunks-and-bands.ts - edit the .ts source, not this file.
 import {
   Application,
-  Asset,
   Color,
   Container,
   FixedResolutionCanvasSizing,
@@ -13,8 +12,9 @@ import {
   TextureRegion,
   View,
 } from '@codexo/exojs';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileSet } from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileSet } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 // Core @codexo/exojs-tilemap API, with no on-disk map format involved: a
 // procedural TileMap built entirely from code.
 //
@@ -48,14 +48,15 @@ class TileChunksAndBandsScene extends Scene {
   explorer;
   worldRoot;
   mapView;
-  moveX = 0;
-  moveY = 0;
-  hud;
+  up;
+  down;
+  left;
+  right;
   async load() {
-    // ── Tileset + two layers, built entirely in code ──────────────────
+    // Tileset + two layers, built entirely in code
     // Await the atlas load: TileSet needs a TextureRegion with real
     // dimensions, so a not-yet-hydrated `loader.get()` handle is not enough.
-    const tilesTexture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const tilesTexture = await this.loader.load(assets.mapPackTilesheet);
     const tileset = new TileSet({
       name: 'map',
       texture: new TextureRegion(tilesTexture, { x: 0, y: 0, width: tilesTexture.width, height: tilesTexture.height }),
@@ -108,11 +109,11 @@ class TileChunksAndBandsScene extends Scene {
       tilesets: [tileset],
       layers: [ground, canopy],
     });
-    // ── TileMapView: group layers into bands, place actors between ────
+    // TileMapView: group layers into bands, place actors between
     this.mapView = map.createView({ bands: { ground: ['ground'], canopy: ['canopy'] } });
     const characters = new Spritesheet(
-      this.loader.get(assets.demo.spritesheets.platformerCharacters.image),
-      await this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data)),
+      this.loader.get(assets.platformerCharactersImage),
+      await this.loader.load(assets.platformerCharactersAtlas),
     );
     this.explorer = characters.getFrameSprite('character_green_front').setAnchor(0.5);
     this.explorer.setPosition(MAP_WIDTH / 2, MAP_HEIGHT / 2);
@@ -123,7 +124,7 @@ class TileChunksAndBandsScene extends Scene {
     // Render order: ground band -> actors -> canopy band. The canopy
     // tiles visually cover the explorer whenever they overlap.
     this.worldRoot.addChild(this.mapView.band('ground'), actorLayer, this.mapView.band('canopy'));
-    // ── Camera: follows the explorer, clamped to the map bounds ───────
+    // Camera: follows the explorer, clamped to the map bounds
     const { width, height } = app;
     this.camera = new View(this.explorer.x, this.explorer.y, width, height);
     this.camera.follow(this.explorer, { lerp: 0.12 });
@@ -132,70 +133,34 @@ class TileChunksAndBandsScene extends Scene {
     this.setupHud();
   }
   setupInput() {
-    this.inputs.onActive(Keyboard.A, () => (this.moveX = -1));
-    this.inputs.onStop(Keyboard.A, () => {
-      if (this.moveX < 0) {
-        this.moveX = 0;
-      }
-    });
-    this.inputs.onActive(Keyboard.D, () => (this.moveX = 1));
-    this.inputs.onStop(Keyboard.D, () => {
-      if (this.moveX > 0) {
-        this.moveX = 0;
-      }
-    });
-    this.inputs.onActive(Keyboard.W, () => (this.moveY = -1));
-    this.inputs.onStop(Keyboard.W, () => {
-      if (this.moveY < 0) {
-        this.moveY = 0;
-      }
-    });
-    this.inputs.onActive(Keyboard.S, () => (this.moveY = 1));
-    this.inputs.onStop(Keyboard.S, () => {
-      if (this.moveY > 0) {
-        this.moveY = 0;
-      }
-    });
+    this.up = this.inputs.onActive([Keyboard.W, Keyboard.Up]);
+    this.down = this.inputs.onActive([Keyboard.S, Keyboard.Down]);
+    this.left = this.inputs.onActive([Keyboard.A, Keyboard.Left]);
+    this.right = this.inputs.onActive([Keyboard.D, Keyboard.Right]);
   }
   setupHud() {
-    const chunkCount = name => {
-      const layer = this.mapView.getLayerNodesByName(name)[0];
-      return layer ? layer.children.length : 0;
-    };
-    this.hud = mountControls({
-      title: 'Tilemap Chunks & Layer Bands',
-      controls: [
-        { keys: 'WASD', action: 'move the explorer' },
-        { keys: 'panel', action: 'toggle canopy band / pixel snapping' },
-      ],
-      status: `${chunkCount('ground')} ground chunks, ${chunkCount('canopy')} canopy chunks loaded`,
-      hint: 'The explorer renders between the ground and canopy TileMapBands — canopy tiles draw over it. Camera culling of off-screen chunks is automatic.',
-    });
-    const panel = mountControlPanel({ title: 'Tilemap' });
-    panel.addToggle({
-      label: 'Canopy band',
-      value: true,
-      onChange: visible => {
-        this.mapView.band('canopy').visible = visible;
+    // Starts on the view's default, `geometry`. Stepping to `none` shows what
+    // it buys: every boundary then samples between two device pixels and the
+    // seams shimmer as the camera moves.
+    const snapModes = { geometry: PixelSnapMode.Geometry, position: PixelSnapMode.Position, none: PixelSnapMode.None };
+    demoPanel({
+      title: 'Tilemap',
+      controls: {
+        canopy: toggle('Canopy band', true),
+        snap: choice('Pixel snap', ['geometry', 'position', 'none']),
       },
-    });
-    // Starts on the view's default, `geometry`. Cycling down to `none` shows
-    // what it buys: every boundary then samples between two device pixels and
-    // the seams shimmer as the camera moves.
-    panel.addCycle({
-      label: 'Pixel snap',
-      options: ['geometry', 'position', 'none'],
-      index: 0,
-      onChange: index => {
-        const modes = [PixelSnapMode.Geometry, PixelSnapMode.Position, PixelSnapMode.None];
-        this.mapView.pixelSnapMode = modes[index] ?? PixelSnapMode.Geometry;
+      onChange: (_key, _value, values) => {
+        this.mapView.band('canopy').visible = values.canopy;
+        this.mapView.pixelSnapMode = snapModes[values.snap];
       },
     });
   }
   update(delta) {
-    if (this.moveX !== 0 || this.moveY !== 0) {
-      const length = Math.hypot(this.moveX, this.moveY) || 1;
-      this.explorer.move((this.moveX / length) * MOVE_SPEED * delta, (this.moveY / length) * MOVE_SPEED * delta);
+    const moveX = (this.right.active ? 1 : 0) - (this.left.active ? 1 : 0);
+    const moveY = (this.down.active ? 1 : 0) - (this.up.active ? 1 : 0);
+    if (moveX !== 0 || moveY !== 0) {
+      const length = Math.hypot(moveX, moveY);
+      this.explorer.move((moveX / length) * MOVE_SPEED * delta, (moveY / length) * MOVE_SPEED * delta);
       this.explorer.x = Math.min(Math.max(this.explorer.x, 0), MAP_WIDTH);
       this.explorer.y = Math.min(Math.max(this.explorer.y, 0), MAP_HEIGHT);
     }
@@ -216,7 +181,5 @@ const app = new Application({
   // The tilemap extension wires the per-backend chunk renderer so
   // TileLayerNode (generated by TileMapView) can draw.
   extensions: [tilemapExtension],
-  // No loader.basePath here: every asset below comes from the shared
-  // `assets` catalog, whose URLs are already fully resolved.
 });
 await app.start(TileChunksAndBandsScene);
diff --git a/examples/tilemap/tile-chunks-and-bands.ts b/examples/tilemap/tile-chunks-and-bands.ts
index f0f2abfc5..8fde5a997 100644
--- a/examples/tilemap/tile-chunks-and-bands.ts
+++ b/examples/tilemap/tile-chunks-and-bands.ts
@@ -1,9 +1,9 @@
 import {
   Application,
-  Asset,
   Color,
   Container,
   FixedResolutionCanvasSizing,
+  type InputBinding,
   Keyboard,
   PixelSnapMode,
   Rectangle,
@@ -16,8 +16,9 @@ import {
   TextureRegion,
   View,
 } from '@codexo/exojs';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, type TileMapView, TileSet } from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, type TileMapView, TileSet } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, toggle } from '@examples/runtime';
 
 // Core @codexo/exojs-tilemap API, with no on-disk map format involved: a
 // procedural TileMap built entirely from code.
@@ -55,15 +56,16 @@ class TileChunksAndBandsScene extends Scene {
   private explorer!: Sprite;
   private worldRoot!: Container;
   private mapView!: TileMapView;
-  private moveX = 0;
-  private moveY = 0;
-  private hud!: ReturnType<typeof mountControls>;
+  private up!: InputBinding;
+  private down!: InputBinding;
+  private left!: InputBinding;
+  private right!: InputBinding;
 
   override async load(): Promise<void> {
-    // ── Tileset + two layers, built entirely in code ──────────────────
+    // Tileset + two layers, built entirely in code
     // Await the atlas load: TileSet needs a TextureRegion with real
     // dimensions, so a not-yet-hydrated `loader.get()` handle is not enough.
-    const tilesTexture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const tilesTexture = await this.loader.load(assets.mapPackTilesheet);
     const tileset = new TileSet({
       name: 'map',
       texture: new TextureRegion(tilesTexture, { x: 0, y: 0, width: tilesTexture.width, height: tilesTexture.height }),
@@ -121,12 +123,12 @@ class TileChunksAndBandsScene extends Scene {
       layers: [ground, canopy],
     });
 
-    // ── TileMapView: group layers into bands, place actors between ────
+    // TileMapView: group layers into bands, place actors between
     this.mapView = map.createView({ bands: { ground: ['ground'], canopy: ['canopy'] } });
 
     const characters = new Spritesheet(
-      this.loader.get(assets.demo.spritesheets.platformerCharacters.image),
-      (await this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data))) as SpritesheetData,
+      this.loader.get(assets.platformerCharactersImage),
+      (await this.loader.load(assets.platformerCharactersAtlas)) as SpritesheetData,
     );
 
     this.explorer = characters.getFrameSprite('character_green_front').setAnchor(0.5);
@@ -141,7 +143,7 @@ class TileChunksAndBandsScene extends Scene {
     // tiles visually cover the explorer whenever they overlap.
     this.worldRoot.addChild(this.mapView.band('ground'), actorLayer, this.mapView.band('canopy'));
 
-    // ── Camera: follows the explorer, clamped to the map bounds ───────
+    // Camera: follows the explorer, clamped to the map bounds
     const { width, height } = app;
 
     this.camera = new View(this.explorer.x, this.explorer.y, width, height);
@@ -153,77 +155,39 @@ class TileChunksAndBandsScene extends Scene {
   }
 
   private setupInput(): void {
-    this.inputs.onActive(Keyboard.A, () => (this.moveX = -1));
-    this.inputs.onStop(Keyboard.A, () => {
-      if (this.moveX < 0) {
-        this.moveX = 0;
-      }
-    });
-    this.inputs.onActive(Keyboard.D, () => (this.moveX = 1));
-    this.inputs.onStop(Keyboard.D, () => {
-      if (this.moveX > 0) {
-        this.moveX = 0;
-      }
-    });
-    this.inputs.onActive(Keyboard.W, () => (this.moveY = -1));
-    this.inputs.onStop(Keyboard.W, () => {
-      if (this.moveY < 0) {
-        this.moveY = 0;
-      }
-    });
-    this.inputs.onActive(Keyboard.S, () => (this.moveY = 1));
-    this.inputs.onStop(Keyboard.S, () => {
-      if (this.moveY > 0) {
-        this.moveY = 0;
-      }
-    });
+    this.up = this.inputs.onActive([Keyboard.W, Keyboard.Up]);
+    this.down = this.inputs.onActive([Keyboard.S, Keyboard.Down]);
+    this.left = this.inputs.onActive([Keyboard.A, Keyboard.Left]);
+    this.right = this.inputs.onActive([Keyboard.D, Keyboard.Right]);
   }
 
   private setupHud(): void {
-    const chunkCount = (name: string): number => {
-      const layer = this.mapView.getLayerNodesByName(name)[0];
-
-      return layer ? layer.children.length : 0;
-    };
-
-    this.hud = mountControls({
-      title: 'Tilemap Chunks & Layer Bands',
-      controls: [
-        { keys: 'WASD', action: 'move the explorer' },
-        { keys: 'panel', action: 'toggle canopy band / pixel snapping' },
-      ],
-      status: `${chunkCount('ground')} ground chunks, ${chunkCount('canopy')} canopy chunks loaded`,
-      hint: 'The explorer renders between the ground and canopy TileMapBands — canopy tiles draw over it. Camera culling of off-screen chunks is automatic.',
-    });
-
-    const panel = mountControlPanel({ title: 'Tilemap' });
-    panel.addToggle({
-      label: 'Canopy band',
-      value: true,
-      onChange: visible => {
-        this.mapView.band('canopy').visible = visible;
+    // Starts on the view's default, `geometry`. Stepping to `none` shows what
+    // it buys: every boundary then samples between two device pixels and the
+    // seams shimmer as the camera moves.
+    const snapModes = { geometry: PixelSnapMode.Geometry, position: PixelSnapMode.Position, none: PixelSnapMode.None } as const;
+
+    demoPanel({
+      title: 'Tilemap',
+      controls: {
+        canopy: toggle('Canopy band', true),
+        snap: choice('Pixel snap', ['geometry', 'position', 'none']),
       },
-    });
-    // Starts on the view's default, `geometry`. Cycling down to `none` shows
-    // what it buys: every boundary then samples between two device pixels and
-    // the seams shimmer as the camera moves.
-    panel.addCycle({
-      label: 'Pixel snap',
-      options: ['geometry', 'position', 'none'],
-      index: 0,
-      onChange: index => {
-        const modes = [PixelSnapMode.Geometry, PixelSnapMode.Position, PixelSnapMode.None] as const;
-
-        this.mapView.pixelSnapMode = modes[index] ?? PixelSnapMode.Geometry;
+      onChange: (_key, _value, values) => {
+        this.mapView.band('canopy').visible = values.canopy;
+        this.mapView.pixelSnapMode = snapModes[values.snap];
       },
     });
   }
 
   override update(delta: Seconds): void {
-    if (this.moveX !== 0 || this.moveY !== 0) {
-      const length = Math.hypot(this.moveX, this.moveY) || 1;
+    const moveX = (this.right.active ? 1 : 0) - (this.left.active ? 1 : 0);
+    const moveY = (this.down.active ? 1 : 0) - (this.up.active ? 1 : 0);
+
+    if (moveX !== 0 || moveY !== 0) {
+      const length = Math.hypot(moveX, moveY);
 
-      this.explorer.move((this.moveX / length) * MOVE_SPEED * delta, (this.moveY / length) * MOVE_SPEED * delta);
+      this.explorer.move((moveX / length) * MOVE_SPEED * delta, (moveY / length) * MOVE_SPEED * delta);
       this.explorer.x = Math.min(Math.max(this.explorer.x, 0), MAP_WIDTH);
       this.explorer.y = Math.min(Math.max(this.explorer.y, 0), MAP_HEIGHT);
     }
@@ -246,8 +210,6 @@ const app = new Application({
   // The tilemap extension wires the per-backend chunk renderer so
   // TileLayerNode (generated by TileMapView) can draw.
   extensions: [tilemapExtension],
-  // No loader.basePath here: every asset below comes from the shared
-  // `assets` catalog, whose URLs are already fully resolved.
 });
 
 await app.start(TileChunksAndBandsScene);
diff --git a/examples/tilemap/tiled-infinite-map.js b/examples/tilemap/tiled-infinite-map.js
index aba083e0a..daf0263d1 100644
--- a/examples/tilemap/tiled-infinite-map.js
+++ b/examples/tilemap/tiled-infinite-map.js
@@ -1,7 +1,8 @@
 // Auto-generated from tiled-infinite-map.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Keyboard, Scene, View } from '@codexo/exojs';
+import { ChunkStreamer, TileMapNode } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension } from '@codexo/exojs-tiled';
-import { ChunkStreamer, TileMapNode } from '@codexo/exojs-tilemap';
 import { mountControls } from '@examples/runtime';
 // A hand-authored Tiled `.tmj` infinite map, streamed the same way the
 // procedural-terrain examples stream generated worlds: TiledMap.toTileMap()
@@ -29,7 +30,7 @@ class TiledInfiniteMapScene extends Scene {
   hudTimer = 0;
   hud;
   async load() {
-    const source = await this.loader.load(Asset.type('tiledSource', 'json/maps/drift-fields.tmj'));
+    const source = await this.loader.load(Asset.type('tiledSource', assets.driftFieldsMap.source));
     const runtimeMap = source.toTileMap();
     this.mapNode = new TileMapNode(runtimeMap);
     const ground = runtimeMap.getTileLayer('Ground');
@@ -81,12 +82,7 @@ class TiledInfiniteMapScene extends Scene {
     });
   }
   setupHud() {
-    this.hud = mountControls({
-      title: 'Tiled Infinite Map Streaming',
-      controls: [{ keys: 'WASD', action: 'fly the free camera across the streamed map' }],
-      status: '',
-      hint: '"Ground" and "Props" each stream through their own ChunkStreamer, sourced from TiledMap.getChunkSource(layer.id) — Tiled\'s on-disk 16x16 chunks are re-sliced onto the runtime chunk grid on demand, one requested chunk at a time.',
-    });
+    this.hud = mountControls();
   }
   update(delta) {
     if (this.moveX !== 0 || this.moveY !== 0) {
@@ -116,8 +112,5 @@ const app = new Application({
   // tiledExtension depends on tilemapExtension, so registering it alone is
   // enough for both loading (.tmj) and rendering (TileMapNode).
   extensions: [tiledExtension],
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TiledInfiniteMapScene);
diff --git a/examples/tilemap/tiled-infinite-map.ts b/examples/tilemap/tiled-infinite-map.ts
index e6616ca49..697dadbf6 100644
--- a/examples/tilemap/tiled-infinite-map.ts
+++ b/examples/tilemap/tiled-infinite-map.ts
@@ -9,8 +9,9 @@ import {
   type Seconds,
   View,
 } from '@codexo/exojs';
+import { ChunkStreamer, TileMapNode } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension } from '@codexo/exojs-tiled';
-import { ChunkStreamer, TileMapNode } from '@codexo/exojs-tilemap';
 import { mountControls } from '@examples/runtime';
 
 // A hand-authored Tiled `.tmj` infinite map, streamed the same way the
@@ -42,7 +43,7 @@ class TiledInfiniteMapScene extends Scene {
   private hud!: ReturnType<typeof mountControls>;
 
   override async load(): Promise<void> {
-    const source = await this.loader.load(Asset.type('tiledSource', 'json/maps/drift-fields.tmj'));
+    const source = await this.loader.load(Asset.type('tiledSource', assets.driftFieldsMap.source));
     const runtimeMap = source.toTileMap();
 
     this.mapNode = new TileMapNode(runtimeMap);
@@ -105,12 +106,7 @@ class TiledInfiniteMapScene extends Scene {
   }
 
   private setupHud(): void {
-    this.hud = mountControls({
-      title: 'Tiled Infinite Map Streaming',
-      controls: [{ keys: 'WASD', action: 'fly the free camera across the streamed map' }],
-      status: '',
-      hint: '"Ground" and "Props" each stream through their own ChunkStreamer, sourced from TiledMap.getChunkSource(layer.id) — Tiled\'s on-disk 16x16 chunks are re-sliced onto the runtime chunk grid on demand, one requested chunk at a time.',
-    });
+    this.hud = mountControls();
   }
 
   override update(delta: Seconds): void {
@@ -147,9 +143,6 @@ const app = new Application({
   // tiledExtension depends on tilemapExtension, so registering it alone is
   // enough for both loading (.tmj) and rendering (TileMapNode).
   extensions: [tiledExtension],
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TiledInfiniteMapScene);
diff --git a/examples/tilemap/tiled-isometric.js b/examples/tilemap/tiled-isometric.js
index 89b74e3c5..17682371a 100644
--- a/examples/tilemap/tiled-isometric.js
+++ b/examples/tilemap/tiled-isometric.js
@@ -1,9 +1,10 @@
 // Auto-generated from tiled-isometric.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, Container, FixedResolutionCanvasSizing, Graphics, Scene, SystemOrder } from '@codexo/exojs';
-import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
+import { TileMapNode } from '@codexo/exojs/tilemap';
+import { buildObjectLayerColliders, TilePhysicsBinding } from '@codexo/exojs/tilemap-physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension } from '@codexo/exojs-tiled';
-import { TileMapNode } from '@codexo/exojs-tilemap';
-import { buildObjectLayerColliders, TilePhysicsBinding } from '@codexo/exojs-tilemap-physics';
 import { mountControls } from '@examples/runtime';
 const scale = 0.72;
 const origin = { x: 165, y: 115 };
@@ -18,7 +19,7 @@ class IsometricScene extends Scene {
   target = { x: 99, y: 99 };
   hud;
   async load() {
-    this.map = await this.loader.load(Asset.type('tileMap', assets.demo.isometricLandscape));
+    this.map = await this.loader.load(Asset.type('tileMap', assets.isometricLandscape.source));
   }
   init() {
     this.world = new PhysicsWorld({ gravity: { x: 0, y: 0 }, fixedDelta: this.app.fixedTimeStep });
@@ -65,12 +66,7 @@ class IsometricScene extends Scene {
       },
       { order: SystemOrder.Physics - 1 },
     );
-    this.hud = mountControls({
-      title: 'Isometric Landscape',
-      controls: [{ keys: 'Click', action: 'pick a diamond and move toward it' }],
-      status: 'Cross the canal through the central bridge. Cyan outlines show solid banks.',
-      hint: 'Kenney Isometric Tiles Landscape (CC0). The actor collides in logical space; its position is projected onto the map.',
-    });
+    this.hud = mountControls();
     this.app.input.onPointerTap.add(this.onTap);
   }
   onTap = pointer => {
@@ -99,7 +95,7 @@ class IsometricScene extends Scene {
         return [point.x, point.y];
       }),
     );
-    this.hud.setStatus(`Cell (${tx}, ${ty}) - logical target (${this.target.x}, ${this.target.y}). Click the bridge to pass the banks.`);
+    this.hud.setStatus(`Cell (${tx}, ${ty}) - logical target (${this.target.x}, ${this.target.y})`);
   };
   draw(context) {
     this.binding.sync();
@@ -117,6 +113,5 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(30, 43, 57),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 await app.start(IsometricScene);
diff --git a/examples/tilemap/tiled-isometric.ts b/examples/tilemap/tiled-isometric.ts
index 620d1c9e2..9fd237136 100644
--- a/examples/tilemap/tiled-isometric.ts
+++ b/examples/tilemap/tiled-isometric.ts
@@ -9,10 +9,11 @@ import {
   Scene,
   SystemOrder,
 } from '@codexo/exojs';
-import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
+import { type TileMap, TileMapNode } from '@codexo/exojs/tilemap';
+import { buildObjectLayerColliders, TilePhysicsBinding } from '@codexo/exojs/tilemap-physics';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension } from '@codexo/exojs-tiled';
-import { type TileMap, TileMapNode } from '@codexo/exojs-tilemap';
-import { buildObjectLayerColliders, TilePhysicsBinding } from '@codexo/exojs-tilemap-physics';
 import { mountControls } from '@examples/runtime';
 
 const scale = 0.72;
@@ -30,7 +31,7 @@ class IsometricScene extends Scene {
   private hud!: ReturnType<typeof mountControls>;
 
   override async load(): Promise<void> {
-    this.map = await this.loader.load(Asset.type('tileMap', assets.demo.isometricLandscape));
+    this.map = await this.loader.load(Asset.type('tileMap', assets.isometricLandscape.source));
   }
 
   override init(): void {
@@ -81,12 +82,7 @@ class IsometricScene extends Scene {
       },
       { order: SystemOrder.Physics - 1 },
     );
-    this.hud = mountControls({
-      title: 'Isometric Landscape',
-      controls: [{ keys: 'Click', action: 'pick a diamond and move toward it' }],
-      status: 'Cross the canal through the central bridge. Cyan outlines show solid banks.',
-      hint: 'Kenney Isometric Tiles Landscape (CC0). The actor collides in logical space; its position is projected onto the map.',
-    });
+    this.hud = mountControls();
     this.app.input.onPointerTap.add(this.onTap);
   }
 
@@ -119,7 +115,7 @@ class IsometricScene extends Scene {
         return [point.x, point.y];
       }),
     );
-    this.hud.setStatus(`Cell (${tx}, ${ty}) - logical target (${this.target.x}, ${this.target.y}). Click the bridge to pass the banks.`);
+    this.hud.setStatus(`Cell (${tx}, ${ty}) - logical target (${this.target.x}, ${this.target.y})`);
   };
 
   override draw(context: RenderingContext): void {
@@ -140,7 +136,6 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(30, 43, 57),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(IsometricScene);
diff --git a/examples/tilemap/tiled-map-import.js b/examples/tilemap/tiled-map-import.js
index 5a74337d4..fa950005d 100644
--- a/examples/tilemap/tiled-map-import.js
+++ b/examples/tilemap/tiled-map-import.js
@@ -1,7 +1,8 @@
 // Auto-generated from tiled-map-import.ts - edit the .ts source, not this file.
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, Scene, Text } from '@codexo/exojs';
+import { ObjectKind } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import { ObjectKind } from '@codexo/exojs-tilemap';
 import { mountControls } from '@examples/runtime';
 const contains = (object, x, y) => {
   if (object.kind === ObjectKind.Point) {
@@ -22,7 +23,7 @@ class TiledMapImportScene extends Scene {
   selectedId = null;
   hud;
   async load() {
-    const map = await this.loader.load(Asset.type('tileMap', 'json/maps/harbor-plaza.tmj'));
+    const map = await this.loader.load(Asset.type('tileMap', assets.harborPlazaMap.source));
     this.mapNode = new TileMapNode(map);
     this.zones = [...(map.getObjectLayer('Zones')?.objects ?? [])];
     for (const object of this.zones) {
@@ -31,12 +32,7 @@ class TiledMapImportScene extends Scene {
       this.labels.push(label);
     }
     this.redrawZones();
-    this.hud = mountControls({
-      title: 'Load a Tiled Map',
-      controls: [{ keys: 'Click', action: 'inspect an authored object' }],
-      status: `Loaded Harbor Plaza: ${this.zones.length} objects in the Zones layer.`,
-      hint: 'The common tileMap asset type imports the .tmj and TileMapNode renders it. Object inspection is optional.',
-    });
+    this.hud = mountControls({ status: `Loaded Harbor Plaza: ${this.zones.length} objects in the Zones layer.` });
     this.app.input.onPointerTap.add(this.onTap);
   }
   onTap = pointer => {
@@ -51,7 +47,7 @@ class TiledMapImportScene extends Scene {
     this.hud.setStatus(
       selected
         ? `${selected.name} (${selected.type || selected.kind})${properties ? ` - ${properties}` : ''}`
-        : 'Click a highlighted zone to inspect its authored data.',
+        : `Loaded Harbor Plaza: ${this.zones.length} objects in the Zones layer.`,
     );
   };
   redrawZones() {
@@ -91,6 +87,5 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(28, 36, 46),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 await app.start(TiledMapImportScene);
diff --git a/examples/tilemap/tiled-map-import.ts b/examples/tilemap/tiled-map-import.ts
index b238c9469..680ea4ad5 100644
--- a/examples/tilemap/tiled-map-import.ts
+++ b/examples/tilemap/tiled-map-import.ts
@@ -1,6 +1,7 @@
 import { Application, Asset, Color, FixedResolutionCanvasSizing, Graphics, type RenderingContext, Scene, Text } from '@codexo/exojs';
+import { ObjectKind, type TileMapObject } from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { tiledExtension, TileMapNode } from '@codexo/exojs-tiled';
-import { ObjectKind, type TileMapObject } from '@codexo/exojs-tilemap';
 import { mountControls } from '@examples/runtime';
 
 const contains = (object: TileMapObject, x: number, y: number): boolean => {
@@ -27,7 +28,7 @@ class TiledMapImportScene extends Scene {
   private hud!: ReturnType<typeof mountControls>;
 
   override async load(): Promise<void> {
-    const map = await this.loader.load(Asset.type('tileMap', 'json/maps/harbor-plaza.tmj'));
+    const map = await this.loader.load(Asset.type('tileMap', assets.harborPlazaMap.source));
     this.mapNode = new TileMapNode(map);
     this.zones = [...(map.getObjectLayer('Zones')?.objects ?? [])];
 
@@ -38,12 +39,7 @@ class TiledMapImportScene extends Scene {
     }
 
     this.redrawZones();
-    this.hud = mountControls({
-      title: 'Load a Tiled Map',
-      controls: [{ keys: 'Click', action: 'inspect an authored object' }],
-      status: `Loaded Harbor Plaza: ${this.zones.length} objects in the Zones layer.`,
-      hint: 'The common tileMap asset type imports the .tmj and TileMapNode renders it. Object inspection is optional.',
-    });
+    this.hud = mountControls({ status: `Loaded Harbor Plaza: ${this.zones.length} objects in the Zones layer.` });
     this.app.input.onPointerTap.add(this.onTap);
   }
 
@@ -59,7 +55,7 @@ class TiledMapImportScene extends Scene {
     this.hud.setStatus(
       selected
         ? `${selected.name} (${selected.type || selected.kind})${properties ? ` - ${properties}` : ''}`
-        : 'Click a highlighted zone to inspect its authored data.',
+        : `Loaded Harbor Plaza: ${this.zones.length} objects in the Zones layer.`,
     );
   };
 
@@ -106,7 +102,6 @@ const app = new Application({
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: new Color(28, 36, 46),
   extensions: [tiledExtension],
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(TiledMapImportScene);
diff --git a/examples/tilemap/worker-streamed-terrain.js b/examples/tilemap/worker-streamed-terrain.js
index 3eff9c4b3..d816b7a56 100644
--- a/examples/tilemap/worker-streamed-terrain.js
+++ b/examples/tilemap/worker-streamed-terrain.js
@@ -1,7 +1,6 @@
 // Auto-generated from worker-streamed-terrain.ts - edit the .ts source, not this file.
 import {
   Application,
-  Asset,
   Color,
   Container,
   FixedResolutionCanvasSizing,
@@ -20,8 +19,9 @@ import {
   TileMap,
   tilemapExtension,
   TileSet,
-} from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, slider } from '@examples/runtime';
 import { fbm } from '@examples/terrain-noise';
 const terrainWorkerSource =
   '"use strict";\n(() => {\n  // ../shared/terrain-noise.ts\n  var hash2D = (seed2, x, y) => {\n    let h = seed2 ^ Math.imul(x, 668265261) ^ Math.imul(y, 374761393) | 0;\n    h = Math.imul(h ^ h >>> 15, 2246822507);\n    h = Math.imul(h ^ h >>> 13, 3266489909);\n    h ^= h >>> 16;\n    return (h >>> 0) / 4294967296;\n  };\n  var valueNoise = (seed2, x, y) => {\n    const x0 = Math.floor(x);\n    const y0 = Math.floor(y);\n    const fx = x - x0;\n    const fy = y - y0;\n    const sx = fx * fx * (3 - 2 * fx);\n    const sy = fy * fy * (3 - 2 * fy);\n    const n00 = hash2D(seed2, x0, y0);\n    const n10 = hash2D(seed2, x0 + 1, y0);\n    const n01 = hash2D(seed2, x0, y0 + 1);\n    const n11 = hash2D(seed2, x0 + 1, y0 + 1);\n    const nx0 = n00 + (n10 - n00) * sx;\n    const nx1 = n01 + (n11 - n01) * sx;\n    return nx0 + (nx1 - nx0) * sy;\n  };\n  var fbm = (seed2, x, y) => {\n    let value = 0;\n    let amplitude = 0.5;\n    let frequency = 1;\n    for (let octave = 0; octave < 4; octave++) {\n      value += amplitude * valueNoise(seed2 + octave, x * frequency, y * frequency);\n      amplitude *= 0.5;\n      frequency *= 2;\n    }\n    return value;\n  };\n\n  // worker-streamed-terrain.worker.ts\n  var isInit = (message) => "type" in message && message.type === "terrain-init";\n  var seed = 0;\n  var featureSize = 1;\n  var extraCost = 0;\n  self.onmessage = (event) => {\n    const message = event.data;\n    if (isInit(message)) {\n      seed = message.seed;\n      featureSize = message.featureSize;\n      extraCost = message.extraCost;\n      return;\n    }\n    const { requestId, cx, cy, chunkWidth, chunkHeight } = message;\n    try {\n      const values = new Float64Array(chunkWidth * chunkHeight);\n      for (let localTy = 0; localTy < chunkHeight; localTy++) {\n        for (let localTx = 0; localTx < chunkWidth; localTx++) {\n          const tx = cx * chunkWidth + localTx;\n          const ty = cy * chunkHeight + localTy;\n          let value = fbm(seed, tx / featureSize, ty / featureSize);\n          for (let i = 0; i < extraCost; i++) {\n            value = fbm(seed, tx / featureSize, ty / featureSize);\n          }\n          values[localTy * chunkWidth + localTx] = value;\n        }\n      }\n      self.postMessage({ requestId, values }, [values.buffer]);\n    } catch (error) {\n      self.postMessage({ requestId, error: String(error) });\n    }\n  };\n})();\n';
@@ -79,9 +79,9 @@ class WorkerStreamedTerrainScene extends Scene {
   hudTimer = 0;
   frameIntervalMs = 0;
   streamingMs = 0;
-  hud;
+  panel;
   async load() {
-    const tilesTexture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const tilesTexture = await this.loader.load(assets.mapPackTilesheet);
     this.tileset = new TileSet({
       name: 'biomes',
       texture: new TextureRegion(tilesTexture, { x: 0, y: 0, width: tilesTexture.width, height: tilesTexture.height }),
@@ -102,8 +102,8 @@ class WorkerStreamedTerrainScene extends Scene {
     });
     this.mapView = map.createView({ bands: { terrain: ['terrain'] } });
     const characters = new Spritesheet(
-      await this.loader.load(Asset.type('texture', assets.demo.spritesheets.platformerCharacters.image)),
-      await this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data)),
+      await this.loader.load(assets.platformerCharactersImage),
+      await this.loader.load(assets.platformerCharactersAtlas),
     );
     this.explorer = characters.getFrameSprite('character_green_front').setAnchor(0.5);
     this.explorer.setPosition(0, 0);
@@ -194,40 +194,31 @@ class WorkerStreamedTerrainScene extends Scene {
     });
   }
   setupHud() {
-    this.hud = mountControls({
-      title: 'Streamed Terrain',
-      controls: [
-        { keys: 'WASD', action: 'fly across the endless world' },
-        { keys: 'panel', action: 'change seed, provider, and sample cost' },
-      ],
-      status: '',
-      hint: 'Both providers generate the same unbounded world from the current seed. Raise sample cost, then switch to worker to compare frame time while moving.',
-    });
-    const panel = mountControlPanel({ title: 'Provider' });
-    panel.addCycle({
-      label: 'Provider',
-      options: ['sync', 'worker'],
-      index: 0,
-      onChange: (_, mode) => {
-        this.providerMode = mode;
-        this.rebuildStreamer();
+    this.panel = demoPanel({
+      title: 'Provider',
+      controls: {
+        provider: choice('Provider', ['sync', 'worker']),
+        cost: slider('Sample cost', { min: 0, max: 500, value: 0, step: 50, format: value => `${value}` }),
       },
-    });
-    panel.addSlider({
-      label: 'Sample cost',
-      min: 0,
-      max: 500,
-      step: 50,
-      value: 0,
-      onChange: value => {
-        this.extraCost = value;
-        this.rebuildStreamer();
+      actions: {
+        'New seed': () => {
+          this.seed = (Math.random() * 0x7fffffff) | 0;
+          this.rebuildStreamer();
+        },
       },
-    });
-    panel.addButton({
-      label: 'New seed',
-      onClick: () => {
-        this.seed = (Math.random() * 0x7fffffff) | 0;
+      onChange: (key, value) => {
+        // The initial values match the fields, so mounting does not rebuild.
+        if (key === 'provider') {
+          if (value === this.providerMode) {
+            return;
+          }
+          this.providerMode = value;
+        } else {
+          if (value === this.extraCost) {
+            return;
+          }
+          this.extraCost = value;
+        }
         this.rebuildStreamer();
       },
     });
@@ -253,7 +244,7 @@ class WorkerStreamedTerrainScene extends Scene {
       const tx = Math.floor(this.explorer.x / TILE);
       const ty = Math.floor(this.explorer.y / TILE);
       this.hudTimer = 0;
-      this.hud.setStatus(
+      this.panel.status(
         `${this.providerMode} · ${this.frameIntervalMs.toFixed(1)} ms between frames · ${this.streamingMs.toFixed(1)} ms streaming on the main thread · ${this.streamer.residentCount} chunks · tile ${tx}, ${ty} · seed ${this.seed} · cost ${this.extraCost}`,
       );
     }
@@ -262,6 +253,7 @@ class WorkerStreamedTerrainScene extends Scene {
     context.render(this.worldRoot, { view: this.camera });
   }
   destroy() {
+    this.panel?.dispose();
     this.streamer?.destroy();
     this.workerSourceHandle?.destroy();
     this.workerSourceHandle = null;
diff --git a/examples/tilemap/worker-streamed-terrain.ts b/examples/tilemap/worker-streamed-terrain.ts
index 4aef6ec28..ef285d889 100644
--- a/examples/tilemap/worker-streamed-terrain.ts
+++ b/examples/tilemap/worker-streamed-terrain.ts
@@ -1,6 +1,5 @@
 import {
   Application,
-  Asset,
   Color,
   Container,
   FixedResolutionCanvasSizing,
@@ -25,8 +24,9 @@ import {
   tilemapExtension,
   type TileMapView,
   TileSet,
-} from '@codexo/exojs-tilemap';
-import { mountControlPanel, mountControls } from '@examples/runtime';
+} from '@codexo/exojs/tilemap';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel, slider } from '@examples/runtime';
 import { fbm } from '@examples/terrain-noise';
 
 import terrainWorkerSource from './worker-streamed-terrain.worker.ts?worker';
@@ -94,10 +94,10 @@ class WorkerStreamedTerrainScene extends Scene {
   private hudTimer = 0;
   private frameIntervalMs = 0;
   private streamingMs = 0;
-  private hud!: ReturnType<typeof mountControls>;
+  private panel!: ReturnType<typeof demoPanel>;
 
   override async load(): Promise<void> {
-    const tilesTexture = await this.loader.load(Asset.type('texture', assets.demo.tilesets.map.image));
+    const tilesTexture = await this.loader.load(assets.mapPackTilesheet);
     this.tileset = new TileSet({
       name: 'biomes',
       texture: new TextureRegion(tilesTexture, { x: 0, y: 0, width: tilesTexture.width, height: tilesTexture.height }),
@@ -120,8 +120,8 @@ class WorkerStreamedTerrainScene extends Scene {
     this.mapView = map.createView({ bands: { terrain: ['terrain'] } });
 
     const characters = new Spritesheet(
-      await this.loader.load(Asset.type('texture', assets.demo.spritesheets.platformerCharacters.image)),
-      (await this.loader.load(Asset.type('json', assets.demo.spritesheets.platformerCharacters.data))) as SpritesheetData,
+      await this.loader.load(assets.platformerCharactersImage),
+      (await this.loader.load(assets.platformerCharactersAtlas)) as SpritesheetData,
     );
 
     this.explorer = characters.getFrameSprite('character_green_front').setAnchor(0.5);
@@ -226,40 +226,34 @@ class WorkerStreamedTerrainScene extends Scene {
   }
 
   private setupHud(): void {
-    this.hud = mountControls({
-      title: 'Streamed Terrain',
-      controls: [
-        { keys: 'WASD', action: 'fly across the endless world' },
-        { keys: 'panel', action: 'change seed, provider, and sample cost' },
-      ],
-      status: '',
-      hint: 'Both providers generate the same unbounded world from the current seed. Raise sample cost, then switch to worker to compare frame time while moving.',
-    });
-    const panel = mountControlPanel({ title: 'Provider' });
-    panel.addCycle({
-      label: 'Provider',
-      options: ['sync', 'worker'],
-      index: 0,
-      onChange: (_, mode) => {
-        this.providerMode = mode as 'worker' | 'sync';
-        this.rebuildStreamer();
+    this.panel = demoPanel({
+      title: 'Provider',
+      controls: {
+        provider: choice('Provider', ['sync', 'worker']),
+        cost: slider('Sample cost', { min: 0, max: 500, value: 0, step: 50, format: value => `${value}` }),
       },
-    });
-    panel.addSlider({
-      label: 'Sample cost',
-      min: 0,
-      max: 500,
-      step: 50,
-      value: 0,
-      onChange: value => {
-        this.extraCost = value;
-        this.rebuildStreamer();
+      actions: {
+        'New seed': () => {
+          this.seed = (Math.random() * 0x7fffffff) | 0;
+          this.rebuildStreamer();
+        },
       },
-    });
-    panel.addButton({
-      label: 'New seed',
-      onClick: () => {
-        this.seed = (Math.random() * 0x7fffffff) | 0;
+      onChange: (key, value) => {
+        // The initial values match the fields, so mounting does not rebuild.
+        if (key === 'provider') {
+          if (value === this.providerMode) {
+            return;
+          }
+
+          this.providerMode = value as 'worker' | 'sync';
+        } else {
+          if (value === this.extraCost) {
+            return;
+          }
+
+          this.extraCost = value as number;
+        }
+
         this.rebuildStreamer();
       },
     });
@@ -295,7 +289,7 @@ class WorkerStreamedTerrainScene extends Scene {
       const ty = Math.floor(this.explorer.y / TILE);
 
       this.hudTimer = 0;
-      this.hud.setStatus(
+      this.panel.status(
         `${this.providerMode} · ${this.frameIntervalMs.toFixed(1)} ms between frames · ${this.streamingMs.toFixed(1)} ms streaming on the main thread · ${this.streamer.residentCount} chunks · tile ${tx}, ${ty} · seed ${this.seed} · cost ${this.extraCost}`,
       );
     }
@@ -306,6 +300,7 @@ class WorkerStreamedTerrainScene extends Scene {
   }
 
   override destroy(): void {
+    this.panel?.dispose();
     this.streamer?.destroy();
     this.workerSourceHandle?.destroy();
     this.workerSourceHandle = null;
diff --git a/examples/tweens-animation/easing-curves.js b/examples/tweens-animation/easing-curves.js
index 2bb49d093..e8caa52a1 100644
--- a/examples/tweens-animation/easing-curves.js
+++ b/examples/tweens-animation/easing-curves.js
@@ -1,6 +1,7 @@
 // Auto-generated from easing-curves.ts - edit the .ts source, not this file.
 import { Application, Color, Ease, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Sprite } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel } from '@examples/runtime';
 // Every built-in Ease function, in source order.
 const EASINGS = [
   ['linear', Ease.linear],
@@ -41,33 +42,26 @@ const V_MAX = 1.45;
 class EasingCurvesScene extends Scene {
   graphics = new Graphics();
   sprite;
-  hud;
-  selected = 0;
+  panel;
+  ease = EASINGS[0][1];
   t = 0;
   direction = 1;
-  onTap = pointer => this.select(pointer.x < this.app.width / 2 ? -1 : 1);
   init() {
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(2);
-    this.inputs.onTrigger(Keyboard.Left, () => this.select(-1));
-    this.inputs.onTrigger(Keyboard.Right, () => this.select(1));
-    this.app.input.onPointerTap.add(this.onTap);
-    this.hud = mountControls({
-      title: 'Easing Explorer',
-      controls: [
-        { keys: 'Left / Right', action: 'select a curve' },
-        { keys: 'Click left / right half', action: 'select a curve' },
-      ],
-      status: '',
-      hint: 'The ship moves along the selected easing curve. Overshoot remains visible above and below the 0–1 range.',
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(2);
+    this.panel = demoPanel({
+      title: 'Easing',
+      controls: {
+        easing: choice(
+          'Curve',
+          EASINGS.map(([name]) => name),
+        ),
+      },
+      onChange: (_key, name) => {
+        this.ease = EASINGS.find(([easingName]) => easingName === name)[1];
+      },
     });
-    this.refreshHud();
-  }
-  select(direction) {
-    this.selected = (this.selected + direction + EASINGS.length) % EASINGS.length;
-    this.refreshHud();
-  }
-  refreshHud() {
-    this.hud.setStatus(`${this.selected + 1} / ${EASINGS.length} · ${EASINGS[this.selected][0]}`);
+    this.inputs.onTrigger(Keyboard.Left, () => this.panel.step('easing', -1));
+    this.inputs.onTrigger(Keyboard.Right, () => this.panel.step('easing', 1));
   }
   update(delta) {
     this.t += this.direction * delta * 0.6;
@@ -86,7 +80,7 @@ class EasingCurvesScene extends Scene {
     const top = height * 0.14;
     const bottom = height * 0.9;
     const plotY = value => bottom - ((value - V_MIN) / (V_MAX - V_MIN)) * (bottom - top);
-    const ease = EASINGS[this.selected][1];
+    const ease = this.ease;
     const g = this.graphics;
     g.clear();
     g.lineWidth = 2;
@@ -106,8 +100,7 @@ class EasingCurvesScene extends Scene {
     context.render(this.sprite);
   }
   destroy() {
-    this.app.input.onPointerTap.remove(this.onTap);
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
   }
 }
@@ -120,6 +113,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 21, 30),
-  loader: { basePath: 'assets/' },
 });
 await app.start(EasingCurvesScene);
diff --git a/examples/tweens-animation/easing-curves.ts b/examples/tweens-animation/easing-curves.ts
index f55b9dfbe..cd165e8af 100644
--- a/examples/tweens-animation/easing-curves.ts
+++ b/examples/tweens-animation/easing-curves.ts
@@ -10,7 +10,8 @@ import {
   type Seconds,
   Sprite,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+import { choice, demoPanel } from '@examples/runtime';
 
 // Every built-in Ease function, in source order.
 const EASINGS: Array<[string, (t: number) => number]> = [
@@ -54,36 +55,27 @@ const V_MAX = 1.45;
 class EasingCurvesScene extends Scene {
   private graphics = new Graphics();
   private sprite!: Sprite;
-  private hud!: ReturnType<typeof mountControls>;
-  private selected = 0;
+  private panel!: ReturnType<typeof demoPanel>;
+  private ease = EASINGS[0][1];
   private t = 0;
   private direction = 1;
-  private readonly onTap = (pointer: { x: number }): void => this.select(pointer.x < this.app.width / 2 ? -1 : 1);
 
   override init(): void {
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setScale(2);
-    this.inputs.onTrigger(Keyboard.Left, () => this.select(-1));
-    this.inputs.onTrigger(Keyboard.Right, () => this.select(1));
-    this.app.input.onPointerTap.add(this.onTap);
-    this.hud = mountControls({
-      title: 'Easing Explorer',
-      controls: [
-        { keys: 'Left / Right', action: 'select a curve' },
-        { keys: 'Click left / right half', action: 'select a curve' },
-      ],
-      status: '',
-      hint: 'The ship moves along the selected easing curve. Overshoot remains visible above and below the 0–1 range.',
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setScale(2);
+    this.panel = demoPanel({
+      title: 'Easing',
+      controls: {
+        easing: choice(
+          'Curve',
+          EASINGS.map(([name]) => name),
+        ),
+      },
+      onChange: (_key, name) => {
+        this.ease = EASINGS.find(([easingName]) => easingName === name)![1];
+      },
     });
-    this.refreshHud();
-  }
-
-  private select(direction: number): void {
-    this.selected = (this.selected + direction + EASINGS.length) % EASINGS.length;
-    this.refreshHud();
-  }
-
-  private refreshHud(): void {
-    this.hud.setStatus(`${this.selected + 1} / ${EASINGS.length} · ${EASINGS[this.selected][0]}`);
+    this.inputs.onTrigger(Keyboard.Left, () => this.panel.step('easing', -1));
+    this.inputs.onTrigger(Keyboard.Right, () => this.panel.step('easing', 1));
   }
 
   override update(delta: Seconds): void {
@@ -105,7 +97,7 @@ class EasingCurvesScene extends Scene {
     const top = height * 0.14;
     const bottom = height * 0.9;
     const plotY = (value: number): number => bottom - ((value - V_MIN) / (V_MAX - V_MIN)) * (bottom - top);
-    const ease = EASINGS[this.selected][1];
+    const ease = this.ease;
     const g = this.graphics;
 
     g.clear();
@@ -130,8 +122,7 @@ class EasingCurvesScene extends Scene {
   }
 
   override destroy(): void {
-    this.app.input.onPointerTap.remove(this.onTap);
-    this.hud.dispose();
+    this.panel.dispose();
     super.destroy();
   }
 }
@@ -145,7 +136,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: new Color(18, 21, 30),
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(EasingCurvesScene);
diff --git a/examples/tweens-animation/frame-animation.js b/examples/tweens-animation/frame-animation.js
index e9937aa9a..64808d5b8 100644
--- a/examples/tweens-animation/frame-animation.js
+++ b/examples/tweens-animation/frame-animation.js
@@ -1,16 +1,14 @@
 // Auto-generated from frame-animation.ts - edit the .ts source, not this file.
-import { AnimatedSprite, Application, Asset, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Spritesheet } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { AnimatedSprite, Application, Color, FixedResolutionCanvasSizing, Keyboard, Scene, Spritesheet, Text } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 const CHARACTERS = ['beige', 'green', 'pink', 'purple', 'yellow'];
 const WALK_FPS = 8;
 class FrameAnimationScene extends Scene {
-  sprite;
-  hud;
-  characterIndex = 0;
+  sprites = [];
   playing = true;
   async load() {
-    const texture = this.loader.get('image/platformer-characters.png');
-    const data = await this.loader.load(Asset.type('json', 'json/platformer-characters.json'));
+    const texture = this.loader.get(assets.platformerCharactersImage);
+    const data = await this.loader.load(assets.platformerCharactersAtlas);
     const sheet = new Spritesheet(texture, data);
     const clips = Object.fromEntries(
       CHARACTERS.map(character => [
@@ -21,45 +19,30 @@ class FrameAnimationScene extends Scene {
         },
       ]),
     );
-    this.sprite = new AnimatedSprite(texture, clips)
-      .setAnchor(0.5)
-      .setScale(3)
-      .setPosition(this.app.width / 2, this.app.height / 2);
-    this.addChild(this.sprite);
-    this.sprite.onFrame.add((_clip, frame) => this.updateHud(frame));
-    this.hud = mountControls({
-      title: 'Sprite Animation',
-      controls: [
-        { keys: 'Right', action: 'change character' },
-        { keys: 'Space', action: 'pause / resume' },
-      ],
-      hint: 'AnimatedSprite plays named clips from a spritesheet. The scene tree advances it automatically.',
+    CHARACTERS.forEach((character, index) => {
+      const x = (this.app.width * (index + 0.5)) / CHARACTERS.length;
+      const sprite = new AnimatedSprite(texture, clips)
+        .setAnchor(0.5)
+        .setScale(1.6)
+        .setPosition(x, this.app.height / 2);
+      const label = new Text(character, { fillColor: Color.white, fontSize: 22, align: 'center' })
+        .setAnchor(0.5, 0)
+        .setPosition(x, this.app.height / 2 + 130);
+      this.addChild(sprite);
+      this.addChild(label);
+      sprite.play(character);
+      this.sprites.push(sprite);
     });
     this.inputs.onTrigger(Keyboard.Space, () => {
       this.playing = !this.playing;
-      if (this.playing) {
-        this.sprite.resume();
-      } else {
-        this.sprite.pause();
+      for (const sprite of this.sprites) {
+        if (this.playing) {
+          sprite.resume();
+        } else {
+          sprite.pause();
+        }
       }
-      this.updateHud(this.sprite.currentFrame);
     });
-    this.inputs.onTrigger(Keyboard.Right, () => this.selectCharacter());
-    this.sprite.play(CHARACTERS[0]);
-  }
-  selectCharacter() {
-    this.characterIndex = (this.characterIndex + 1) % CHARACTERS.length;
-    this.sprite.play(CHARACTERS[this.characterIndex]);
-    if (!this.playing) {
-      this.sprite.pause();
-    }
-  }
-  updateHud(frame) {
-    this.hud.setStatus(`${CHARACTERS[this.characterIndex]} · frame ${frame + 1}/2 · ${this.playing ? 'playing' : 'paused'}`);
-  }
-  destroy() {
-    this.hud.dispose();
-    super.destroy();
   }
 }
 const app = new Application({
@@ -71,6 +54,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(FrameAnimationScene);
diff --git a/examples/tweens-animation/frame-animation.ts b/examples/tweens-animation/frame-animation.ts
index 3d246f9b5..dfa13aa1f 100644
--- a/examples/tweens-animation/frame-animation.ts
+++ b/examples/tweens-animation/frame-animation.ts
@@ -1,28 +1,26 @@
 import {
   AnimatedSprite,
   Application,
-  Asset,
   Color,
   FixedResolutionCanvasSizing,
   Keyboard,
   Scene,
   Spritesheet,
   type SpritesheetData,
+  Text,
 } from '@codexo/exojs';
-import { mountControls } from '@examples/runtime';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 const CHARACTERS = ['beige', 'green', 'pink', 'purple', 'yellow'] as const;
 const WALK_FPS = 8;
 
 class FrameAnimationScene extends Scene {
-  private sprite!: AnimatedSprite;
-  private hud!: ReturnType<typeof mountControls>;
-  private characterIndex = 0;
+  private sprites: AnimatedSprite[] = [];
   private playing = true;
 
   override async load(): Promise<void> {
-    const texture = this.loader.get('image/platformer-characters.png');
-    const data = (await this.loader.load(Asset.type('json', 'json/platformer-characters.json'))) as SpritesheetData;
+    const texture = this.loader.get(assets.platformerCharactersImage);
+    const data = (await this.loader.load(assets.platformerCharactersAtlas)) as SpritesheetData;
     const sheet = new Spritesheet(texture, data);
     const clips = Object.fromEntries(
       CHARACTERS.map(character => [
@@ -34,52 +32,33 @@ class FrameAnimationScene extends Scene {
       ]),
     );
 
-    this.sprite = new AnimatedSprite(texture, clips)
-      .setAnchor(0.5)
-      .setScale(3)
-      .setPosition(this.app.width / 2, this.app.height / 2);
-    this.addChild(this.sprite);
-    this.sprite.onFrame.add((_clip, frame) => this.updateHud(frame));
+    CHARACTERS.forEach((character, index) => {
+      const x = (this.app.width * (index + 0.5)) / CHARACTERS.length;
+      const sprite = new AnimatedSprite(texture, clips)
+        .setAnchor(0.5)
+        .setScale(1.6)
+        .setPosition(x, this.app.height / 2);
+      const label = new Text(character, { fillColor: Color.white, fontSize: 22, align: 'center' })
+        .setAnchor(0.5, 0)
+        .setPosition(x, this.app.height / 2 + 130);
 
-    this.hud = mountControls({
-      title: 'Sprite Animation',
-      controls: [
-        { keys: 'Right', action: 'change character' },
-        { keys: 'Space', action: 'pause / resume' },
-      ],
-      hint: 'AnimatedSprite plays named clips from a spritesheet. The scene tree advances it automatically.',
+      this.addChild(sprite);
+      this.addChild(label);
+      sprite.play(character);
+      this.sprites.push(sprite);
     });
+
     this.inputs.onTrigger(Keyboard.Space, () => {
       this.playing = !this.playing;
 
-      if (this.playing) {
-        this.sprite.resume();
-      } else {
-        this.sprite.pause();
+      for (const sprite of this.sprites) {
+        if (this.playing) {
+          sprite.resume();
+        } else {
+          sprite.pause();
+        }
       }
-
-      this.updateHud(this.sprite.currentFrame);
     });
-    this.inputs.onTrigger(Keyboard.Right, () => this.selectCharacter());
-    this.sprite.play(CHARACTERS[0]);
-  }
-
-  private selectCharacter(): void {
-    this.characterIndex = (this.characterIndex + 1) % CHARACTERS.length;
-    this.sprite.play(CHARACTERS[this.characterIndex]);
-
-    if (!this.playing) {
-      this.sprite.pause();
-    }
-  }
-
-  private updateHud(frame: number): void {
-    this.hud.setStatus(`${CHARACTERS[this.characterIndex]} · frame ${frame + 1}/2 · ${this.playing ? 'playing' : 'paused'}`);
-  }
-
-  override destroy(): void {
-    this.hud.dispose();
-    super.destroy();
   }
 }
 
@@ -92,7 +71,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(FrameAnimationScene);
diff --git a/examples/tweens-animation/interrupt-and-replace.js b/examples/tweens-animation/interrupt-and-replace.js
index 02fecb1c6..18ebed2e9 100644
--- a/examples/tweens-animation/interrupt-and-replace.js
+++ b/examples/tweens-animation/interrupt-and-replace.js
@@ -1,12 +1,13 @@
 // Auto-generated from interrupt-and-replace.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class InterruptAndReplaceScene extends Scene {
   sprite;
   moveTween = null;
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     app.input.onPointerTap.add(pointer => {
       if (this.moveTween !== null) {
         this.moveTween.stop();
@@ -27,8 +28,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(InterruptAndReplaceScene);
diff --git a/examples/tweens-animation/interrupt-and-replace.ts b/examples/tweens-animation/interrupt-and-replace.ts
index 720a60a05..73e3b6e5e 100644
--- a/examples/tweens-animation/interrupt-and-replace.ts
+++ b/examples/tweens-animation/interrupt-and-replace.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Sprite, type Tween } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class InterruptAndReplaceScene extends Scene {
   private sprite!: Sprite;
@@ -8,7 +9,7 @@ class InterruptAndReplaceScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     app.input.onPointerTap.add(pointer => {
       if (this.moveTween !== null) {
         this.moveTween.stop();
@@ -32,9 +33,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(InterruptAndReplaceScene);
diff --git a/examples/tweens-animation/tween-basics.js b/examples/tweens-animation/tween-basics.js
index 21e161327..144a06e9d 100644
--- a/examples/tweens-animation/tween-basics.js
+++ b/examples/tweens-animation/tween-basics.js
@@ -1,5 +1,6 @@
 // Auto-generated from tween-basics.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Graphics, Keyboard, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 class InteractiveTweensScene extends Scene {
   sprite;
@@ -10,16 +11,9 @@ class InteractiveTweensScene extends Scene {
   onPointerDown = (_pointer, x, y) => this.moveTo(x, y);
   init() {
     const { width, height } = this.app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     this.target = new Graphics();
-    this.hud = mountControls({
-      title: 'Interactive Tweens',
-      controls: [
-        { keys: 'Click', action: 'move to target; click again to interrupt' },
-        { keys: 'Space', action: 'toggle round trip' },
-      ],
-      hint: 'A new tween starts from the current position. Round trip uses repeat(1) with yoyo().',
-    });
+    this.hud = mountControls();
     this.updateHud('Ready');
     this.app.input.onPointerDown.add(this.onPointerDown);
     this.inputs.onTrigger(Keyboard.Space, () => {
@@ -65,6 +59,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(InteractiveTweensScene);
diff --git a/examples/tweens-animation/tween-basics.ts b/examples/tweens-animation/tween-basics.ts
index 05885369c..b6b14fbe0 100644
--- a/examples/tweens-animation/tween-basics.ts
+++ b/examples/tweens-animation/tween-basics.ts
@@ -9,6 +9,7 @@ import {
   Sprite,
   type Tween,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 class InteractiveTweensScene extends Scene {
@@ -21,16 +22,9 @@ class InteractiveTweensScene extends Scene {
 
   override init(): void {
     const { width, height } = this.app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     this.target = new Graphics();
-    this.hud = mountControls({
-      title: 'Interactive Tweens',
-      controls: [
-        { keys: 'Click', action: 'move to target; click again to interrupt' },
-        { keys: 'Space', action: 'toggle round trip' },
-      ],
-      hint: 'A new tween starts from the current position. Round trip uses repeat(1) with yoyo().',
-    });
+    this.hud = mountControls();
     this.updateHud('Ready');
     this.app.input.onPointerDown.add(this.onPointerDown);
     this.inputs.onTrigger(Keyboard.Space, () => {
@@ -81,7 +75,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(InteractiveTweensScene);
diff --git a/examples/tweens-animation/tween-chains.js b/examples/tweens-animation/tween-chains.js
index 41b0ff7b2..58d13de3f 100644
--- a/examples/tweens-animation/tween-chains.js
+++ b/examples/tweens-animation/tween-chains.js
@@ -1,5 +1,6 @@
 // Auto-generated from tween-chains.ts - edit the .ts source, not this file.
 import { Application, Color, Ease, FixedResolutionCanvasSizing, Graphics, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 const WAYPOINTS = [
   { x: 0.2, y: 0.3 },
@@ -21,12 +22,8 @@ class TweenSequencesScene extends Scene {
       const next = points[(i + 1) % points.length];
       this.path.drawLine(points[i].x, points[i].y, next.x, next.y);
     }
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(points[0].x, points[0].y);
-    this.hud = mountControls({
-      title: 'Tween Sequences',
-      status: 'Leg 1 / 4',
-      hint: 'Four tweens are chained once, then the final completion restarts the sequence.',
-    });
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(points[0].x, points[0].y);
+    this.hud = mountControls({ status: 'Leg 1 / 4' });
     this.steps = points
       .slice(1)
       .concat(points[0])
@@ -57,6 +54,5 @@ const app = new Application({
   scenes: { TweenSequencesScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 await app.start(TweenSequencesScene);
diff --git a/examples/tweens-animation/tween-chains.ts b/examples/tweens-animation/tween-chains.ts
index 20d01b476..533338fff 100644
--- a/examples/tweens-animation/tween-chains.ts
+++ b/examples/tweens-animation/tween-chains.ts
@@ -9,6 +9,7 @@ import {
   Sprite,
   type Tween,
 } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 import { mountControls } from '@examples/runtime';
 
 const WAYPOINTS = [
@@ -35,12 +36,8 @@ class TweenSequencesScene extends Scene {
       this.path.drawLine(points[i].x, points[i].y, next.x, next.y);
     }
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(points[0].x, points[0].y);
-    this.hud = mountControls({
-      title: 'Tween Sequences',
-      status: 'Leg 1 / 4',
-      hint: 'Four tweens are chained once, then the final completion restarts the sequence.',
-    });
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(points[0].x, points[0].y);
+    this.hud = mountControls({ status: 'Leg 1 / 4' });
 
     this.steps = points
       .slice(1)
@@ -77,7 +74,6 @@ const app = new Application({
   scenes: { TweenSequencesScene },
   canvas: { width: 1280, height: 720, mount: document.body, sizing: new FixedResolutionCanvasSizing() },
   clearColor: Color.black,
-  loader: { basePath: 'assets/' },
 });
 
 await app.start(TweenSequencesScene);
diff --git a/examples/tweens-animation/tween-from-array.js b/examples/tweens-animation/tween-from-array.js
index 5b4cee3f0..4a106f4d2 100644
--- a/examples/tweens-animation/tween-from-array.js
+++ b/examples/tweens-animation/tween-from-array.js
@@ -1,5 +1,6 @@
 // Auto-generated from tween-from-array.ts - edit the .ts source, not this file.
 import { Application, Color, Ease, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 // A closed loop of waypoints expressed as fractions of the canvas so the path
 // spreads across the wider 16:9 frame instead of staying in an 800×600 box.
 const waypointFractions = [
@@ -19,7 +20,7 @@ class TweenFromArrayScene extends Scene {
     const app = this.app;
     const { width, height } = app;
     this.waypoints = waypointFractions.map(({ fx, fy }) => ({ x: fx * width, y: fy * height }));
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(this.waypoints[0].x, this.waypoints[0].y);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(this.waypoints[0].x, this.waypoints[0].y);
     this.buildPath();
   }
   buildPath() {
@@ -55,8 +56,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TweenFromArrayScene);
diff --git a/examples/tweens-animation/tween-from-array.ts b/examples/tweens-animation/tween-from-array.ts
index 1fbfb5207..23042fb96 100644
--- a/examples/tweens-animation/tween-from-array.ts
+++ b/examples/tweens-animation/tween-from-array.ts
@@ -1,4 +1,5 @@
 import { Application, Color, Ease, FixedResolutionCanvasSizing, type RenderingContext, Scene, Sprite, type Tween } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 // A closed loop of waypoints expressed as fractions of the canvas so the path
 // spreads across the wider 16:9 frame instead of staying in an 800×600 box.
@@ -22,7 +23,7 @@ class TweenFromArrayScene extends Scene {
     const { width, height } = app;
 
     this.waypoints = waypointFractions.map(({ fx, fy }) => ({ x: fx * width, y: fy * height }));
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(this.waypoints[0].x, this.waypoints[0].y);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(this.waypoints[0].x, this.waypoints[0].y);
     this.buildPath();
   }
 
@@ -66,9 +67,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TweenFromArrayScene);
diff --git a/examples/tweens-animation/tween-with-yoyo.js b/examples/tweens-animation/tween-with-yoyo.js
index b0a24bd6e..82fd885b7 100644
--- a/examples/tweens-animation/tween-with-yoyo.js
+++ b/examples/tweens-animation/tween-with-yoyo.js
@@ -1,11 +1,12 @@
 // Auto-generated from tween-with-yoyo.ts - edit the .ts source, not this file.
 import { Application, Color, FixedResolutionCanvasSizing, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 class TweenWithYoyoScene extends Scene {
   sprite;
   init() {
     const app = this.app;
     const { width, height } = app;
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     app.tweens.create(this.sprite.scale).to({ x: 1.5, y: 1.5 }, 0.8).yoyo(true).repeat(-1).start();
     app.tweens.create(this.sprite).to({ rotation: 20 }, 0.8).yoyo(true).repeat(-1).start();
   }
@@ -22,8 +23,5 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 await app.start(TweenWithYoyoScene);
diff --git a/examples/tweens-animation/tween-with-yoyo.ts b/examples/tweens-animation/tween-with-yoyo.ts
index cf812ddee..82c611743 100644
--- a/examples/tweens-animation/tween-with-yoyo.ts
+++ b/examples/tweens-animation/tween-with-yoyo.ts
@@ -1,4 +1,5 @@
 import { Application, Color, FixedResolutionCanvasSizing, type RenderingContext, Scene, Sprite } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
 
 class TweenWithYoyoScene extends Scene {
   private sprite!: Sprite;
@@ -7,7 +8,7 @@ class TweenWithYoyoScene extends Scene {
     const app = this.app;
     const { width, height } = app;
 
-    this.sprite = new Sprite(this.loader.get('image/ship-a.png')).setAnchor(0.5).setPosition(width / 2, height / 2);
+    this.sprite = new Sprite(this.loader.get(assets.ship)).setAnchor(0.5).setPosition(width / 2, height / 2);
     app.tweens.create(this.sprite.scale).to({ x: 1.5, y: 1.5 }, 0.8).yoyo(true).repeat(-1).start();
     app.tweens.create(this.sprite).to({ rotation: 20 }, 0.8).yoyo(true).repeat(-1).start();
   }
@@ -26,9 +27,6 @@ const app = new Application({
     sizing: new FixedResolutionCanvasSizing(),
   },
   clearColor: Color.black,
-  loader: {
-    basePath: 'assets/',
-  },
 });
 
 await app.start(TweenWithYoyoScene);
diff --git a/examples/ui/settings-menu.js b/examples/ui/settings-menu.js
index ffffd08f2..48cf78179 100644
--- a/examples/ui/settings-menu.js
+++ b/examples/ui/settings-menu.js
@@ -82,15 +82,20 @@ class SettingsMenuScene extends Scene {
       this.settings.volume = value;
       this.apply();
     });
+    // Discrete choices are logged to the Output panel; the volume slider is
+    // not, since it reports every step of a drag.
     this.motion.onChange.add(value => {
       this.settings.motion = value;
       this.apply();
+      console.log(`Setting: reduced motion ${value ? 'on' : 'off'}`);
     });
     this.theme.onChange.add(value => {
       this.settings.theme = value;
       this.apply();
+      console.log(`Setting: theme ${value}`);
     });
     reset.onClick.add(() => {
+      console.info('Setting: reset to defaults');
       this.volume.value = defaults.volume;
       this.motion.checked = defaults.motion;
       this.theme.selectedIndex = 0;
diff --git a/examples/ui/settings-menu.ts b/examples/ui/settings-menu.ts
index 514698ad9..533f12951 100644
--- a/examples/ui/settings-menu.ts
+++ b/examples/ui/settings-menu.ts
@@ -97,15 +97,20 @@ class SettingsMenuScene extends Scene {
       this.settings.volume = value;
       this.apply();
     });
+    // Discrete choices are logged to the Output panel; the volume slider is
+    // not, since it reports every step of a drag.
     this.motion.onChange.add(value => {
       this.settings.motion = value;
       this.apply();
+      console.log(`Setting: reduced motion ${value ? 'on' : 'off'}`);
     });
     this.theme.onChange.add(value => {
       this.settings.theme = value;
       this.apply();
+      console.log(`Setting: theme ${value}`);
     });
     reset.onClick.add(() => {
+      console.info('Setting: reset to defaults');
       this.volume.value = defaults.volume;
       this.motion.checked = defaults.motion;
       this.theme.selectedIndex = 0;
diff --git a/package.json b/package.json
index e9bfdc83d..c35c3ec2b 100644
--- a/package.json
+++ b/package.json
@@ -18,14 +18,6 @@
     "dist/exo.esm.js.map",
     "dist/exo.debug.esm.js",
     "dist/exo.debug.esm.js.map",
-    "dist/exo.iife.js",
-    "dist/exo.iife.js.map",
-    "dist/exo.iife.min.js",
-    "dist/exo.iife.min.js.map",
-    "dist/exo.full.iife.js",
-    "dist/exo.full.iife.js.map",
-    "dist/exo.full.iife.min.js",
-    "dist/exo.full.iife.min.js.map",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"
@@ -68,9 +60,49 @@
       "import": "./dist/esm/debug/index.js",
       "default": "./dist/esm/debug/index.js"
     },
+    "./tilemap": {
+      "types": "./dist/esm/tilemap/index.d.ts",
+      "import": "./dist/esm/tilemap/index.js",
+      "default": "./dist/esm/tilemap/index.js"
+    },
+    "./particles": {
+      "types": "./dist/esm/particles/index.d.ts",
+      "import": "./dist/esm/particles/index.js",
+      "default": "./dist/esm/particles/index.js"
+    },
+    "./audio-fx": {
+      "types": "./dist/esm/audio-fx/index.d.ts",
+      "import": "./dist/esm/audio-fx/index.js",
+      "default": "./dist/esm/audio-fx/index.js"
+    },
+    "./physics": {
+      "types": "./dist/esm/physics/index.d.ts",
+      "import": "./dist/esm/physics/index.js",
+      "default": "./dist/esm/physics/index.js"
+    },
+    "./tilemap-physics": {
+      "types": "./dist/esm/tilemap-physics/index.d.ts",
+      "import": "./dist/esm/tilemap-physics/index.js",
+      "default": "./dist/esm/tilemap-physics/index.js"
+    },
+    "./lighting": {
+      "types": "./dist/esm/lighting/index.d.ts",
+      "import": "./dist/esm/lighting/index.js",
+      "default": "./dist/esm/lighting/index.js"
+    },
+    "./pathfinding": {
+      "types": "./dist/esm/pathfinding/index.d.ts",
+      "import": "./dist/esm/pathfinding/index.js",
+      "default": "./dist/esm/pathfinding/index.js"
+    },
     "./package.json": "./package.json"
   },
   "imports": {
+    "#physics-debug": {
+      "@codexo/exojs-source": "./packages/exojs-physics/src/debug/index.ts",
+      "types": "./dist/esm/physics/debug/index.d.ts",
+      "default": "./dist/esm/physics/debug/index.js"
+    },
     "#*.vert": "./src/*.vert",
     "#*.frag": "./src/*.frag",
     "#*.wgsl": "./src/*.wgsl",
@@ -133,6 +165,8 @@
     "test:alloc": "vitest run --project=rendering-alloc",
     "test:physics-perf": "vitest run --project=physics-perf",
     "test:production-stripping": "vitest run --project=exojs test/build-defines/production-stripping.test.ts",
+    "test:release-dist": "vitest run --project=release-dist",
+    "test:esm-importmap": "tsx scripts/ci/verify-esm-importmap.ts",
     "test:skips": "pnpm test --reporter=default --reporter=junit --outputFile.junit=./test-results/unit.junit.xml && tsx scripts/check-skipped-tests.ts",
     "test:skips:check": "tsx scripts/check-skipped-tests.ts",
     "test:skips:update-baseline": "tsx scripts/check-skipped-tests.ts --update-baseline",
@@ -154,6 +188,7 @@
     "test:parity:firefox": "tsx ./scripts/run-parity.ts --project=browser-webgpu-firefox test/rendering/parity",
     "test:parity:safari": "tsx ./scripts/run-parity.ts --project=browser-parity-safari",
     "test:examples:smoke": "pnpm --filter @codexo/exojs-examples examples:smoke",
+    "test:playground:e2e": "pnpm --filter @codexo/exojs-examples playground:e2e",
     "gates": "tsx ./scripts/ci/gates.ts",
     "lanes": "tsx ./scripts/lanes.ts",
     "qualify": "tsx ./scripts/ci/qualify.ts",
@@ -174,7 +209,9 @@
     "assets:compact": "tsx scripts/compact-example-assets.ts --write",
     "assets:compact:check": "tsx scripts/compact-example-assets.ts",
     "examples:sync:check": "tsx scripts/check-examples-sync.ts",
-    "full-bundle:exports:check": "tsx scripts/check-dist-fresh.ts && tsx scripts/check-full-bundle-exports.ts",
+    "legacy-shims:generate": "tsx scripts/release/legacy-shims.ts",
+    "legacy-shims:check": "tsx scripts/release/legacy-shims.ts --check",
+    "dist:check": "tsx scripts/check-dist-fresh.ts",
     "sync:example-capabilities": "tsx ./scripts/sync-example-capabilities.ts",
     "site:build": "tsx scripts/check-dist-fresh.ts && pnpm --filter @codexo/exojs-examples build",
     "size": "size-limit",
@@ -196,6 +233,7 @@
     "release:publish": "tsx ./scripts/release/run.ts publish",
     "release:publish-independent": "tsx ./scripts/release/run.ts publish-independent",
     "release:bootstrap": "tsx ./scripts/release/run.ts bootstrap",
+    "release:registry-plan": "tsx ./scripts/release/run.ts registry-plan",
     "release:notes": "tsx ./scripts/generate-release-notes.ts",
     "release:changelog": "tsx ./scripts/release/generate-changelog.ts"
   },
@@ -218,42 +256,35 @@
       "gzip": true
     },
     {
-      "path": "dist/exo.iife.min.js",
-      "limit": "367 KB",
-      "gzip": true
-    },
-    {
-      "path": "dist/exo.full.iife.min.js",
-      "limit": "647 KB",
-      "gzip": true
-    },
-    {
-      "name": "@codexo/exojs-lighting",
-      "path": "packages/exojs-lighting/dist/esm/index.js",
+      "name": "@codexo/exojs/lighting",
+      "path": "dist/esm/lighting/index.js",
       "limit": "34 KB",
       "gzip": true,
       "ignore": [
-        "@codexo/exojs"
+        "../index.js",
+        "../../index.js"
       ]
     },
     {
-      "name": "@codexo/exojs-lighting (lightmap, no cascades)",
-      "path": "packages/exojs-lighting/dist/esm/index.js",
+      "name": "@codexo/exojs/lighting (lightmap, no cascades)",
+      "path": "dist/esm/lighting/index.js",
       "import": "{ LightmapLighting, PointLight, SpotLight, PolygonOccluder }",
       "limit": "14 KB",
       "gzip": true,
       "ignore": [
-        "@codexo/exojs"
+        "../index.js",
+        "../../index.js"
       ]
     },
     {
-      "name": "@codexo/exojs-lighting (forward, no occluder tracing)",
-      "path": "packages/exojs-lighting/dist/esm/index.js",
+      "name": "@codexo/exojs/lighting (forward, no occluder tracing)",
+      "path": "dist/esm/lighting/index.js",
       "import": "{ ForwardLighting, PointLight, SpotLight, LitMaterial, NormalMap }",
       "limit": "5 KB",
       "gzip": true,
       "ignore": [
-        "@codexo/exojs"
+        "../index.js",
+        "../../index.js"
       ]
     },
     {
diff --git a/packages/create-exo-app/templates/audio-reactive/package.json b/packages/create-exo-app/templates/audio-reactive/package.json
index 334853628..b92272227 100644
--- a/packages/create-exo-app/templates/audio-reactive/package.json
+++ b/packages/create-exo-app/templates/audio-reactive/package.json
@@ -11,8 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@codexo/exojs": "lockstep",
-    "@codexo/exojs-audio-fx": "lockstep"
+    "@codexo/exojs": "lockstep"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
diff --git a/packages/create-exo-app/templates/audio-reactive/src/scenes/AudioReactiveScene.ts b/packages/create-exo-app/templates/audio-reactive/src/scenes/AudioReactiveScene.ts
index 904ce98cb..bfe9f6d0f 100644
--- a/packages/create-exo-app/templates/audio-reactive/src/scenes/AudioReactiveScene.ts
+++ b/packages/create-exo-app/templates/audio-reactive/src/scenes/AudioReactiveScene.ts
@@ -1,6 +1,6 @@
 import type { RenderingContext } from '@codexo/exojs';
 import { Color, getAudioContext, Graphics, Scene, Text } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
 
 const BAR_COUNT = 32;
 
diff --git a/packages/create-exo-app/templates/platformer/package.json b/packages/create-exo-app/templates/platformer/package.json
index 05e791dfe..764950fe6 100644
--- a/packages/create-exo-app/templates/platformer/package.json
+++ b/packages/create-exo-app/templates/platformer/package.json
@@ -11,8 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@codexo/exojs": "lockstep",
-    "@codexo/exojs-physics": "lockstep"
+    "@codexo/exojs": "lockstep"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
diff --git a/packages/create-exo-app/templates/platformer/src/objects/Player.ts b/packages/create-exo-app/templates/platformer/src/objects/Player.ts
index 4039d55e2..6d3060665 100644
--- a/packages/create-exo-app/templates/platformer/src/objects/Player.ts
+++ b/packages/create-exo-app/templates/platformer/src/objects/Player.ts
@@ -1,7 +1,7 @@
 import type { Seconds, Spritesheet } from '@codexo/exojs';
 import { type Sprite } from '@codexo/exojs';
-import type { PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
-import { BoxShape } from '@codexo/exojs-physics';
+import type { PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
+import { BoxShape } from '@codexo/exojs/physics';
 
 const WIDTH = 56;
 const HEIGHT = 84;
diff --git a/packages/create-exo-app/templates/platformer/src/scenes/PlatformerScene.ts b/packages/create-exo-app/templates/platformer/src/scenes/PlatformerScene.ts
index 8e84184b3..fb522594d 100644
--- a/packages/create-exo-app/templates/platformer/src/scenes/PlatformerScene.ts
+++ b/packages/create-exo-app/templates/platformer/src/scenes/PlatformerScene.ts
@@ -14,7 +14,7 @@ import {
   SystemOrder,
   View,
 } from '@codexo/exojs';
-import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 import { Player } from '../objects/Player';
 
diff --git a/packages/create-exo-app/templates/top-down/package.json b/packages/create-exo-app/templates/top-down/package.json
index c3abaaff2..888eba091 100644
--- a/packages/create-exo-app/templates/top-down/package.json
+++ b/packages/create-exo-app/templates/top-down/package.json
@@ -12,11 +12,7 @@
   },
   "dependencies": {
     "@codexo/exojs": "lockstep",
-    "@codexo/exojs-pathfinding": "lockstep",
-    "@codexo/exojs-physics": "lockstep",
-    "@codexo/exojs-tiled": "lockstep",
-    "@codexo/exojs-tilemap": "lockstep",
-    "@codexo/exojs-tilemap-physics": "lockstep"
+    "@codexo/exojs-tiled": "lockstep"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
diff --git a/packages/create-exo-app/templates/top-down/src/actor.ts b/packages/create-exo-app/templates/top-down/src/actor.ts
index 1d02f13e9..0003e229f 100644
--- a/packages/create-exo-app/templates/top-down/src/actor.ts
+++ b/packages/create-exo-app/templates/top-down/src/actor.ts
@@ -1,7 +1,7 @@
 import { Container, type PointLike, Vector } from '@codexo/exojs';
-import { NavigationAgentComponent, type TileNavigationSpace } from '@codexo/exojs-pathfinding';
-import { CircleShape, KinematicMovementComponent, type PhysicsBody, PhysicsBodyComponent, type PhysicsWorld } from '@codexo/exojs-physics';
-import type { ResolvedTile } from '@codexo/exojs-tilemap';
+import { NavigationAgentComponent, type TileNavigationSpace } from '@codexo/exojs/pathfinding';
+import { CircleShape, KinematicMovementComponent, type PhysicsBody, PhysicsBodyComponent, type PhysicsWorld } from '@codexo/exojs/physics';
+import type { ResolvedTile } from '@codexo/exojs/tilemap';
 
 export interface ActorOptions {
   /** Where the actor's centre starts, in world pixels. */
diff --git a/packages/create-exo-app/templates/top-down/src/scenes/ProceduralMapScene.ts b/packages/create-exo-app/templates/top-down/src/scenes/ProceduralMapScene.ts
index dc0d8de40..8d811e7fa 100644
--- a/packages/create-exo-app/templates/top-down/src/scenes/ProceduralMapScene.ts
+++ b/packages/create-exo-app/templates/top-down/src/scenes/ProceduralMapScene.ts
@@ -1,5 +1,5 @@
 import { Asset, TextureRegion } from '@codexo/exojs';
-import { ObjectKind, ObjectLayer, TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, type TileMapObject, TileSet } from '@codexo/exojs-tilemap';
+import { ObjectKind, ObjectLayer, TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, type TileMapObject, TileSet } from '@codexo/exojs/tilemap';
 
 import { cellAt, COLUMNS, DOOR_TILE, findMarker, FLOOR_TILE, ROWS, TILE, WALL_TILE } from '../level';
 import { TopDownScene } from './TopDownScene';
diff --git a/packages/create-exo-app/templates/top-down/src/scenes/TiledMapScene.ts b/packages/create-exo-app/templates/top-down/src/scenes/TiledMapScene.ts
index 4d13bf82f..219b5b468 100644
--- a/packages/create-exo-app/templates/top-down/src/scenes/TiledMapScene.ts
+++ b/packages/create-exo-app/templates/top-down/src/scenes/TiledMapScene.ts
@@ -1,5 +1,5 @@
 import { Asset } from '@codexo/exojs';
-import type { TileMap } from '@codexo/exojs-tilemap';
+import type { TileMap } from '@codexo/exojs/tilemap';
 
 import { TopDownScene } from './TopDownScene';
 
diff --git a/packages/create-exo-app/templates/top-down/src/scenes/TopDownScene.ts b/packages/create-exo-app/templates/top-down/src/scenes/TopDownScene.ts
index 42d5a3802..bd38e6524 100644
--- a/packages/create-exo-app/templates/top-down/src/scenes/TopDownScene.ts
+++ b/packages/create-exo-app/templates/top-down/src/scenes/TopDownScene.ts
@@ -17,10 +17,10 @@ import {
   VectorAction,
   View,
 } from '@codexo/exojs';
-import { type NavigationStatus, TileNavigationSpace } from '@codexo/exojs-pathfinding';
-import { BoxShape, PhysicsWorld } from '@codexo/exojs-physics';
-import { type ResolvedTile, type TileLayer, type TileMap, TileMapNode } from '@codexo/exojs-tilemap';
-import { TileColliderStreamer } from '@codexo/exojs-tilemap-physics';
+import { type NavigationStatus, TileNavigationSpace } from '@codexo/exojs/pathfinding';
+import { BoxShape, PhysicsWorld } from '@codexo/exojs/physics';
+import { type ResolvedTile, type TileLayer, type TileMap, TileMapNode } from '@codexo/exojs/tilemap';
+import { TileColliderStreamer } from '@codexo/exojs/tilemap-physics';
 
 import { type Actor, type ActorOptions, spawnActor } from '../actor';
 
diff --git a/packages/exojs-audio-fx/README.md b/packages/exojs-audio-fx/README.md
index 114d4d3a4..d6c354940 100644
--- a/packages/exojs-audio-fx/README.md
+++ b/packages/exojs-audio-fx/README.md
@@ -16,7 +16,7 @@ This helper expects an initialized application with audio already playing on its
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { AudioAnalyser } from '@codexo/exojs-audio-fx';
+import { AudioAnalyser } from '@codexo/exojs/audio-fx';
 
 export const inspectMusic = (app: Application): { read: () => Uint8Array; destroy: () => void } => {
   const analyser = new AudioAnalyser({ source: app.audio.music, fftSize: 1024 });
diff --git a/packages/exojs-audio-fx/docs/pcm-streaming.md b/packages/exojs-audio-fx/docs/pcm-streaming.md
index db0b70ba0..654449b3f 100644
--- a/packages/exojs-audio-fx/docs/pcm-streaming.md
+++ b/packages/exojs-audio-fx/docs/pcm-streaming.md
@@ -4,7 +4,7 @@
 
 ```ts
 import { getAudioContext } from '@codexo/exojs';
-import { PcmStreamSource } from '@codexo/exojs-audio-fx';
+import { PcmStreamSource } from '@codexo/exojs/audio-fx';
 
 const stream = new PcmStreamSource({ channels: 2, capacityFrames: 8192, bus: app.audio.music });
 await stream.ready;
diff --git a/packages/exojs-audio-fx/package.json b/packages/exojs-audio-fx/package.json
index 14773962a..c4b3a2ea0 100644
--- a/packages/exojs-audio-fx/package.json
+++ b/packages/exojs-audio-fx/package.json
@@ -1,46 +1,18 @@
 {
-  "name": "@codexo/exojs-audio-fx",
-  "version": "0.19.1",
-  "description": "Audio effects, DSP, beat detection and analysis for ExoJS.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Exoridus/ExoJS.git",
-    "directory": "packages/exojs-audio-fx"
-  },
+  "name": "@codexo/exojs-module-audio-fx",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Audio effects, DSP, beat detection and analysis for ExoJS. Source of the @codexo/exojs/audio-fx subpath; built into and shipped with the Core package, never published on its own.",
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/esm/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist/esm/",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
-    "build": "tsx ../../scripts/build-extension.ts",
-    "build:dev": "tsx ../../scripts/build-extension.ts --dev",
     "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json && exo-tsc --noEmit -p tsconfig.worklets.json",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "vitest run --root ../.. --project=exojs-audio-fx"
   },
-  "peerDependencies": {
-    "@codexo/exojs": "0.19.x"
-  },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
     "@codexo/exojs-config": "workspace:*"
   },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }
diff --git a/packages/exojs-audio-fx/rolldown.config.ts b/packages/exojs-audio-fx/rolldown.config.ts
index 598217d0f..6c7cf50f5 100644
--- a/packages/exojs-audio-fx/rolldown.config.ts
+++ b/packages/exojs-audio-fx/rolldown.config.ts
@@ -1,9 +1,8 @@
-import { createExtensionBuildOptions } from '@codexo/exojs-config/rolldown';
+import { defineRuntimeModule } from '@codexo/exojs-config/rolldown';
 
-// Audio-fx is a library package (no `/register`): the effects, DSP, BeatDetector
-// and AudioAnalyser. Modules reference each other relatively, so no package
-// source condition is required.
-export default createExtensionBuildOptions({
+// The effects, DSP, BeatDetector and AudioAnalyser. Modules reference each
+// other relatively, so no package source condition is required.
+export default defineRuntimeModule({
   root: import.meta.dirname,
   sourceCondition: null,
   inputs: ['src/index.ts'],
diff --git a/packages/exojs-audio-fx/tsconfig.build.json b/packages/exojs-audio-fx/tsconfig.build.json
deleted file mode 100644
index b7937ed84..000000000
--- a/packages/exojs-audio-fx/tsconfig.build.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck). Worklet sources stay excluded (inherited from tsconfig.json) - see that file's comment.",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "customConditions": [],
-    "paths": {
-      "@codexo/exojs": ["../../dist/esm/index.d.ts"],
-      "@codexo/exojs/extensions": ["../../dist/esm/extensions/index.d.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../dist/esm/renderer-sdk.d.ts"],
-      "@codexo/exojs/debug": ["../../dist/esm/debug/index.d.ts"]
-    }
-  }
-}
diff --git a/packages/exojs-audio-fx/tsconfig.json b/packages/exojs-audio-fx/tsconfig.json
index 1204c18f7..265b8a383 100644
--- a/packages/exojs-audio-fx/tsconfig.json
+++ b/packages/exojs-audio-fx/tsconfig.json
@@ -1,13 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "src/typings.d.ts", "../../src/typings.d.ts"],
   // The `*.worklet.ts` sources typecheck against the AudioWorkletGlobalScope
diff --git a/packages/exojs-bench/package.json b/packages/exojs-bench/package.json
index 78b9a8b19..a36af20e0 100644
--- a/packages/exojs-bench/package.json
+++ b/packages/exojs-bench/package.json
@@ -21,10 +21,6 @@
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
     "@codexo/exojs-config": "workspace:*",
-    "@codexo/exojs-lighting": "workspace:*",
-    "@codexo/exojs-particles": "workspace:*",
-    "@codexo/exojs-physics": "workspace:*",
-    "@codexo/exojs-tilemap": "workspace:*",
     "@types/node": "^26.6.2",
     "@webgpu/types": "^0.1.74",
     "playwright": "^1.63.0",
diff --git a/packages/exojs-bench/src/physics/adapters/exojs-physics.ts b/packages/exojs-bench/src/physics/adapters/exojs-physics.ts
index 8986fbc17..4c15ce6a2 100644
--- a/packages/exojs-bench/src/physics/adapters/exojs-physics.ts
+++ b/packages/exojs-bench/src/physics/adapters/exojs-physics.ts
@@ -1,4 +1,4 @@
-import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs-physics';
+import { BoxShape, CircleShape, PhysicsBody, PhysicsWorld, RevoluteJoint } from '@codexo/exojs/physics';
 
 import type {
   PhysicsAdapter,
diff --git a/packages/exojs-bench/src/physics/driver.ts b/packages/exojs-bench/src/physics/driver.ts
index 85d080679..068e4b564 100644
--- a/packages/exojs-bench/src/physics/driver.ts
+++ b/packages/exojs-bench/src/physics/driver.ts
@@ -28,7 +28,7 @@ import type { PhysicsArmReport, PhysicsClockReport } from './page/contract';
 import type { PhysicsCellResult, PhysicsCellSpec } from './PhysicsAdapter';
 
 /** npm package name of the native physics arm, resolved for version provenance. */
-const NATIVE_PHYSICS_PACKAGE = '@codexo/exojs-physics';
+const NATIVE_PHYSICS_PACKAGE = '@codexo/exojs/physics';
 
 const HERE = dirname(fileURLToPath(import.meta.url));
 const PAGE_DIR = resolve(HERE, 'page');
diff --git a/packages/exojs-bench/src/physics/page/harness.ts b/packages/exojs-bench/src/physics/page/harness.ts
index 5e88016d2..d1d0dd8cd 100644
--- a/packages/exojs-bench/src/physics/page/harness.ts
+++ b/packages/exojs-bench/src/physics/page/harness.ts
@@ -102,7 +102,7 @@ const ARM_FACTORIES: ReadonlyArray<{
   {
     engine: 'exojs-physics',
     config: 'native',
-    library: '@codexo/exojs-physics',
+    library: '@codexo/exojs/physics',
     create: async (): Promise<PhysicsAdapter> => {
       const module = await import('../adapters/exojs-physics');
 
diff --git a/packages/exojs-bench/src/rendering/adapters/exojs.ts b/packages/exojs-bench/src/rendering/adapters/exojs.ts
index 866626f9a..a59773ffb 100644
--- a/packages/exojs-bench/src/rendering/adapters/exojs.ts
+++ b/packages/exojs-bench/src/rendering/adapters/exojs.ts
@@ -1,6 +1,6 @@
-import { type Lighting, LightmapLighting, PointLight, PolygonOccluder } from '@codexo/exojs-lighting';
-import { AlphaFadeOverLifetime, Curve, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileMapNode, TileSet } from '@codexo/exojs-tilemap';
+import { type Lighting, LightmapLighting, PointLight, PolygonOccluder } from '@codexo/exojs/lighting';
+import { AlphaFadeOverLifetime, Curve, particlesExtension, ParticleSystem } from '@codexo/exojs/particles';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileMapNode, TileSet } from '@codexo/exojs/tilemap';
 
 import { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/packages/exojs-bench/src/shared/viteServer.ts b/packages/exojs-bench/src/shared/viteServer.ts
index 338a456e9..b847b247c 100644
--- a/packages/exojs-bench/src/shared/viteServer.ts
+++ b/packages/exojs-bench/src/shared/viteServer.ts
@@ -33,9 +33,10 @@ const ENGINE_SRC = resolve(REPO_ROOT, 'src');
  * silently kept its default capacity instead of the one the cell asked for.
  */
 const SOURCE_PACKAGE_ALIASES: ReadonlyArray<{ find: string; replacement: string }> = [
-  { find: '@codexo/exojs-lighting', replacement: resolve(REPO_ROOT, 'packages/exojs-lighting/src/index.ts') },
-  { find: '@codexo/exojs-particles', replacement: resolve(REPO_ROOT, 'packages/exojs-particles/src/index.ts') },
-  { find: '@codexo/exojs-tilemap', replacement: resolve(REPO_ROOT, 'packages/exojs-tilemap/src/index.ts') },
+  { find: '@codexo/exojs/lighting', replacement: resolve(REPO_ROOT, 'packages/exojs-lighting/src/index.ts') },
+  { find: '@codexo/exojs/particles', replacement: resolve(REPO_ROOT, 'packages/exojs-particles/src/index.ts') },
+  { find: '@codexo/exojs/tilemap', replacement: resolve(REPO_ROOT, 'packages/exojs-tilemap/src/index.ts') },
+  { find: '@codexo/exojs/physics', replacement: resolve(REPO_ROOT, 'packages/exojs-physics/src/index.ts') },
   { find: '@codexo/exojs/renderer-sdk', replacement: resolve(ENGINE_SRC, 'renderer-sdk.ts') },
   { find: '@codexo/exojs/extensions', replacement: resolve(ENGINE_SRC, 'extensions/index.ts') },
   { find: '@codexo/exojs', replacement: resolve(ENGINE_SRC, 'index.ts') },
diff --git a/packages/exojs-bench/tsconfig.json b/packages/exojs-bench/tsconfig.json
index 675d97040..86a4fe7c2 100644
--- a/packages/exojs-bench/tsconfig.json
+++ b/packages/exojs-bench/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "The rendering domain benchmarks the engine through its internal `#*` subpath imports (resolved in the browser page by the driver's Vite alias, never in the Node CLI); the `#* -> ../../src/*` path reproduces the root package.json wildcard for the type-checker. The physics domain instead imports the `@codexo/exojs-physics` package (which itself imports the `@codexo/exojs` barrel), and the rendering extension arms import `@codexo/exojs-particles`, `@codexo/exojs-tilemap` and `@codexo/exojs-lighting`; none of those expose a `@codexo/exojs-source` export condition, and their package entries point at `dist`, which the type-check runs without, so their entries are mapped to source here - an arm that imports a package missing from this map type-checks locally off a stale `dist` and only fails in CI, where there is none; `@codexo/exojs-particles-source` is in `customConditions` for the same reason one level down, since `@codexo/exojs-particles` resolves its own `#*` imports through a package `imports` map that otherwise lands on stale `dist` declarations — mirroring the runtime aliasing in scripts/glsl-loader.ts and vitest.config.ts's aliasConfig.",
+  "_comment": "The rendering domain benchmarks the engine through its internal `#*` subpath imports (resolved in the browser page by the driver's Vite alias, never in the Node CLI); the `#* -> ../../src/*` path reproduces the root package.json wildcard for the type-checker. The physics domain instead imports the `@codexo/exojs/physics` subpath (which itself imports the `@codexo/exojs` barrel), and the rendering extension arms import `@codexo/exojs/particles`, `@codexo/exojs/tilemap` and `@codexo/exojs/lighting`; the Core exports map has no source condition, and its entries point at `dist`, which the type-check runs without, so their entries are mapped to source here - an arm that imports a package missing from this map type-checks locally off a stale `dist` and only fails in CI, where there is none; `@codexo/exojs-particles-source` is in `customConditions` for the same reason one level down, since the particles sources resolve their own `#*` imports through a package `imports` map that otherwise lands on stale `dist` declarations — mirroring the runtime aliasing in scripts/glsl-loader.ts and vitest.config.ts's aliasConfig.",
   "extends": "@codexo/exojs-config/typescript/test.json",
   "compilerOptions": {
     "noEmit": true,
@@ -8,10 +8,10 @@
     "types": ["vitest/globals", "node", "@webgpu/types"],
     "paths": {
       "#*": ["../../src/*"],
-      "@codexo/exojs-lighting": ["../exojs-lighting/src/index.ts"],
-      "@codexo/exojs-particles": ["../exojs-particles/src/index.ts"],
-      "@codexo/exojs-physics": ["../exojs-physics/src/index.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/src/index.ts"],
+      "@codexo/exojs/lighting": ["../exojs-lighting/src/index.ts"],
+      "@codexo/exojs/particles": ["../exojs-particles/src/index.ts"],
+      "@codexo/exojs/physics": ["../exojs-physics/src/index.ts"],
+      "@codexo/exojs/tilemap": ["../exojs-tilemap/src/index.ts"],
       "@codexo/exojs": ["../../src/index.ts"],
       "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
       "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
diff --git a/packages/exojs-config/package-policy/index.js b/packages/exojs-config/package-policy/index.js
index 304e450f8..90b7a68e1 100644
--- a/packages/exojs-config/package-policy/index.js
+++ b/packages/exojs-config/package-policy/index.js
@@ -195,6 +195,128 @@ export function verifyCliPackage(dir, opts) {
   return { ok: checks.every(c => c.ok), checks };
 }
 
+/**
+ * Verify a legacy shim: a published package that keeps a retired name
+ * importable by forwarding to Core subpaths.
+ *
+ * A shim must not be able to carry a second implementation or reach a consumer
+ * with anything but Core: it ships its forwarder files and nothing else,
+ * depends on nothing, peers on `@codexo/exojs` alone and runs no lifecycle
+ * script. Every file it ships is a statement of the form
+ * `export ... from '@codexo/exojs/<subpath>'`.
+ * @param {string} dir
+ * @param {{ name: string, targets: readonly string[] }} opts the Core specifiers the shim may forward to
+ * @returns {PolicyResult}
+ */
+export function verifyLegacyShimPackage(dir, opts) {
+  const pkg = read(dir);
+  /** @type {PolicyCheck[]} */
+  const checks = [];
+  /** @type {(name: string, cond: unknown, detail?: string) => number} */
+  const ok = (name, cond, detail) => checks.push({ name, ok: Boolean(cond), detail });
+  /** @type {string[]} */
+  const files = Array.isArray(pkg.files) ? pkg.files : [];
+  const code = files.filter(file => /\.(?:js|d\.ts)$/.test(file));
+  const forwarder = /^export (?:\*|\{[^}]+\}) from '([^']+)';$/;
+
+  ok('name matches', pkg.name === opts.name, `${pkg.name} vs ${opts.name}`);
+  ok('type: module', pkg.type === 'module');
+  ok('not private', pkg.private !== true);
+  ok('has version', typeof pkg.version === 'string');
+  ok('has repository field', pkg.repository != null);
+  ok('publishConfig public', pkg.publishConfig?.access === 'public');
+  ok('library sideEffects: false', pkg.sideEffects === false);
+  ok('exports "." entry', pkg.exports?.['.']?.types && pkg.exports['.'].import);
+  ok('exports ./package.json', pkg.exports?.['./package.json'] === './package.json');
+  ok('ships LICENSE and README', files.includes('LICENSE') && files.includes('README.md'));
+  ok('LICENSE file present', existsSync(join(dir, 'LICENSE')));
+  ok('README present', existsSync(join(dir, 'README.md')));
+  ok('ships forwarders only', files.length === code.length + 2, files.join(', '));
+  ok('peer @codexo/exojs only', JSON.stringify(Object.keys(pkg.peerDependencies ?? {})) === '["@codexo/exojs"]');
+  ok('no dependencies', !pkg.dependencies && !pkg.optionalDependencies && !pkg.bundleDependencies && !pkg.bundledDependencies);
+  ok('no lifecycle scripts', !pkg.scripts || Object.keys(pkg.scripts).length === 0);
+  ok('no imports map', pkg.imports === undefined);
+
+  for (const file of code) {
+    const path = join(dir, file);
+    const lines = existsSync(path) ? readFileSync(path, 'utf8').trim().split('\n') : [];
+    const targets = lines.map(line => forwarder.exec(line)?.[1]);
+    ok(
+      `${file} only forwards to Core`,
+      lines.length > 0 && targets.every(target => target !== undefined && opts.targets.includes(target)),
+      targets.join(', '),
+    );
+  }
+
+  return { ok: checks.every(c => c.ok), checks };
+}
+
+/**
+ * Verify a published content package (`@codexo/exojs-demo-assets`).
+ *
+ * Content ships data plus small descriptor factories, not engine code. It is
+ * judged against the same publish contract as a runtime package, except that
+ * its compiled tree lives under `dist/` (the default instance addresses its
+ * media with `new URL('../media/...', import.meta.url)`, which has to resolve
+ * from `dist/` as well as from `src/`), and it must not carry engine
+ * lifecycle scripts: installing it may copy nothing and run nothing.
+ *
+ * @param {string} dir
+ * @param {{ name: string }} opts
+ * @returns {PolicyResult}
+ */
+export function verifyContentPackage(dir, opts) {
+  const pkg = read(dir);
+  /** @type {PolicyCheck[]} */
+  const checks = [];
+  /** @type {(name: string, cond: unknown, detail?: string) => number} */
+  const ok = (name, cond, detail) => checks.push({ name, ok: Boolean(cond), detail });
+
+  ok('name matches', pkg.name === opts.name, `${pkg.name} vs ${opts.name}`);
+  ok('type: module', pkg.type === 'module');
+  ok('not private', pkg.private !== true);
+  ok('has version', typeof pkg.version === 'string');
+  ok('exports map', pkg.exports && typeof pkg.exports === 'object');
+  ok('exports "." entry', pkg.exports?.['.']?.types && pkg.exports['.'].import);
+  ok('exports ./extended entry', pkg.exports?.['./extended']?.types && pkg.exports['./extended'].import);
+  ok('exports ./manifest.json', pkg.exports?.['./manifest.json'] === './manifest.json');
+  ok('exports ./media/*', pkg.exports?.['./media/*'] === './media/*');
+  ok('exports ./package.json', pkg.exports?.['./package.json'] === './package.json');
+  ok('files allowlist', Array.isArray(pkg.files) && pkg.files.length > 0);
+  ok(
+    'files ship dist',
+    /** @type {string[]} */ (pkg.files ?? []).some(f => f.includes('dist')),
+  );
+  ok('files ship media', (pkg.files ?? []).includes('media/'));
+  ok('files ship manifest.json', (pkg.files ?? []).includes('manifest.json'));
+  ok('files ship THIRD_PARTY_NOTICES.md', (pkg.files ?? []).includes('THIRD_PARTY_NOTICES.md'));
+  ok('ships LICENSE', (pkg.files ?? []).includes('LICENSE'));
+  ok('publishConfig public', pkg.publishConfig?.access === 'public');
+  ok('LICENSE file present', existsSync(join(dir, 'LICENSE')));
+  ok('README present', existsSync(join(dir, 'README.md')));
+  ok('has repository field', pkg.repository != null);
+  ok('has copy bin', pkg.bin != null && typeof pkg.bin === 'object' && 'exojs-demo-assets-copy' in pkg.bin);
+  // Content is imported by a running engine, so it declares the engine as a
+  // peer - but never as a production dependency, which would install its own
+  // engine copy.
+  ok('peer @codexo/exojs', Boolean(pkg.peerDependencies?.['@codexo/exojs']));
+  ok('no production deps', !pkg.dependencies || Object.keys(pkg.dependencies).length === 0);
+  // No install-time behavior: install scripts and pre/post lifecycle hooks
+  // would run on every consumer install and break the no-IO import contract.
+  ok(
+    'no install scripts',
+    pkg.scripts?.postinstall === undefined && pkg.scripts?.preinstall === undefined && pkg.scripts?.install === undefined,
+  );
+  ok('library sideEffects: false', pkg.sideEffects === false);
+
+  const exportTargets = JSON.stringify(pkg.exports ?? {});
+  ok('no raw .ts runtime entry', !/\.ts"/.test(exportTargets.replace(/\.d\.ts"/g, '')));
+  ok('no @/ alias in manifest', !JSON.stringify(pkg).includes('"@/'));
+  ok('no workspace: in deps', !JSON.stringify(pkg.dependencies ?? {}).includes('workspace:'));
+
+  return { ok: checks.every(c => c.ok), checks };
+}
+
 /**
  * Verify the private shared-config package.
  * @param {string} dir
diff --git a/packages/exojs-config/package.json b/packages/exojs-config/package.json
index a244e72a9..f25304bfe 100644
--- a/packages/exojs-config/package.json
+++ b/packages/exojs-config/package.json
@@ -28,7 +28,8 @@
     "./typescript/extension.json": "./typescript/extension.json",
     "./typescript/test.json": "./typescript/test.json",
     "./typescript/package-test.json": "./typescript/package-test.json",
-    "./typescript/worker.json": "./typescript/worker.json"
+    "./typescript/worker.json": "./typescript/worker.json",
+    "./typescript/workspace-paths.json": "./typescript/workspace-paths.json"
   },
   "dependencies": {
     "@codecov/rollup-plugin": "^2.0.1",
diff --git a/packages/exojs-config/rolldown/index.js b/packages/exojs-config/rolldown/index.js
index 59725aef9..cffd44a17 100644
--- a/packages/exojs-config/rolldown/index.js
+++ b/packages/exojs-config/rolldown/index.js
@@ -1,10 +1,11 @@
-// Shared Rolldown build for official ExoJS extension packages: the
-// preserveModules ESM tree, Core externalization, source maps, build-constant
-// replacement, GLSL string imports, and package-private `#` resolution. No
-// `typescript()` transform - Rolldown transpiles TypeScript natively, with no
-// single-Program rootDir constraint. Declarations are a separate step, driven
-// by `scripts/build-extension.ts` against the package's own
-// `tsconfig.build.json`, since Rolldown has no declaration emitter.
+// Shared Rolldown builds for the official ExoJS packages: the preserveModules
+// ESM tree, Core externalization, source maps, build-constant replacement, GLSL
+// string imports, and package-private `#` resolution. No `typescript()`
+// transform - Rolldown transpiles TypeScript natively, with no single-Program
+// rootDir constraint. Declarations are a separate step, since Rolldown has no
+// declaration emitter: adapters emit theirs from `scripts/build-extension.ts`
+// against the package's own `tsconfig.build.json`, runtime modules from the
+// Core build's single declaration program.
 import { readFileSync } from 'node:fs';
 import { dirname, relative, resolve } from 'node:path';
 
@@ -35,27 +36,29 @@ function preservedModuleNaming(sourceRoot) {
 }
 
 /**
- * @param {{ root: string, sourceCondition: string | null, inputs?: string[], external?: string[] }} opts
- *   Same contract as `createExtensionConfig` in `../rollup/index.js`.
- * @returns {import('rolldown').RolldownOptions}
+ * @typedef {object} TreeOptions
+ * @property {string} root package directory the sources and inputs are relative to
+ * @property {string | null} sourceCondition package-private `#` source condition, if the package has `#` imports
+ * @property {string[]} inputs entry modules, relative to `root`
+ * @property {string} outDir output directory, absolute or relative to `root`
+ * @property {Record<string, string>} defines build-constant replacements
+ * @property {string} bundleName Codecov bundle name
+ * @property {(id: string) => boolean} [external]
+ * @property {import('rolldown').Plugin[]} [plugins] plugins that run before the shared ones
  */
-export function createExtensionBuildOptions(opts) {
-  const { root, sourceCondition, inputs = ['src/index.ts'], external = [] } = opts;
 
-  const defines = createBuildDefinesFromRepo({
-    mode: process.env.EXOJS_ENV === 'development' ? 'development' : 'production',
-    packageDir: root,
-  });
-
-  /** @param {string} id */
-  const isExternal = id => id.startsWith('@codexo/exojs') || external.some(name => id === name || id.startsWith(`${name}/`));
+/**
+ * @param {TreeOptions} opts
+ * @returns {import('rolldown').RolldownOptions}
+ */
+function createPreservedTreeOptions(opts) {
+  const { root, sourceCondition, inputs, outDir, defines, bundleName, external, plugins = [] } = opts;
 
-  const packageName = JSON.parse(readFileSync(resolve(root, 'package.json'), 'utf8')).name ?? 'extension';
   const codecovPlugins = process.env.CODECOV_TOKEN
     ? [
         codecovRollupPlugin({
           enableBundleAnalysis: true,
-          bundleName: packageName.replace(/^@codexo\//, ''),
+          bundleName,
           uploadToken: process.env.CODECOV_TOKEN,
           telemetry: false,
         }),
@@ -65,7 +68,7 @@ export function createExtensionBuildOptions(opts) {
   return {
     cwd: root,
     input: inputs,
-    external: isExternal,
+    ...(external ? { external } : {}),
     transform: { define: defines },
     resolve: sourceCondition
       ? { conditionNames: [sourceCondition, 'browser', 'module', 'import', 'default'], extensions: ['.ts', '.js'] }
@@ -73,9 +76,9 @@ export function createExtensionBuildOptions(opts) {
     // Shader text ships inside string literals, which no JavaScript minifier
     // descends into, so its comments are payload every consumer downloads:
     // stripped here, as the core's minified bundles strip them.
-    plugins: [createShaderPlugin({ minify: true }), createWorkletPlugin(), ...codecovPlugins],
+    plugins: [...plugins, createShaderPlugin({ minify: true }), createWorkletPlugin(), ...codecovPlugins],
     output: {
-      dir: 'dist/esm',
+      dir: outDir,
       format: 'es',
       sourcemap: true,
       preserveModules: true,
@@ -98,3 +101,119 @@ export function createExtensionBuildOptions(opts) {
     },
   };
 }
+
+/**
+ * Build options for a separately published extension package (an adapter): its
+ * own `dist/esm` tree, with every `@codexo/exojs` specifier left as a bare
+ * external import that the consumer's installed Core satisfies.
+ *
+ * @param {{ root: string, sourceCondition: string | null, inputs?: string[], external?: string[] }} opts
+ * @returns {import('rolldown').RolldownOptions}
+ */
+export function createExtensionBuildOptions(opts) {
+  const { root, sourceCondition, inputs = ['src/index.ts'], external = [] } = opts;
+
+  const defines = createBuildDefinesFromRepo({
+    mode: process.env.EXOJS_ENV === 'development' ? 'development' : 'production',
+    packageDir: root,
+  });
+
+  const packageName = JSON.parse(readFileSync(resolve(root, 'package.json'), 'utf8')).name ?? 'extension';
+
+  return createPreservedTreeOptions({
+    root,
+    sourceCondition,
+    inputs,
+    outDir: 'dist/esm',
+    defines,
+    bundleName: packageName.replace(/^@codexo\//, ''),
+    external: id => id.startsWith('@codexo/exojs') || external.some(name => id === name || id.startsWith(`${name}/`)),
+  });
+}
+
+/**
+ * @typedef {object} RuntimeModule
+ * @property {string} root source package directory
+ * @property {string | null} sourceCondition package-private `#` source condition, if the module has `#` imports
+ * @property {readonly string[]} inputs entry modules, relative to `root`
+ */
+
+/**
+ * Declares how a runtime module is compiled. The module ships inside the Core
+ * package, so the Core build supplies the output location and the resolution
+ * of every specifier that leaves the module; see
+ * {@link createRuntimeModuleBuildOptions}.
+ *
+ * @param {{ root: string, sourceCondition: string | null, inputs?: string[] }} opts
+ * @returns {Readonly<RuntimeModule>}
+ */
+export function defineRuntimeModule(opts) {
+  const { root, sourceCondition, inputs = ['src/index.ts'] } = opts;
+
+  return Object.freeze({ root, sourceCondition, inputs: Object.freeze([...inputs]) });
+}
+
+/**
+ * Build options for a runtime module compiled into the Core package tree.
+ *
+ * `resolveExternal` maps a specifier that leaves the module to the absolute
+ * file it ships as, or returns `undefined` to let normal resolution bundle it.
+ * A mapped import is emitted as a path relative to each importing chunk, so the
+ * module reaches Core and its sibling modules through the same files the Core
+ * entries load instead of through a bare package specifier.
+ *
+ * @param {Readonly<RuntimeModule>} module
+ * @param {{ outDir: string, defines: Record<string, string>, bundleName: string, resolveExternal: (specifier: string, importer: string | undefined) => string | undefined }} target
+ * @returns {import('rolldown').RolldownOptions}
+ */
+export function createRuntimeModuleBuildOptions(module, target) {
+  const outDir = resolve(module.root, target.outDir);
+
+  return createPreservedTreeOptions({
+    root: module.root,
+    sourceCondition: module.sourceCondition,
+    inputs: [...module.inputs],
+    outDir,
+    defines: target.defines,
+    bundleName: target.bundleName,
+    plugins: [createShippedExternalsPlugin({ sourceRoot: resolve(module.root, 'src'), outDir, resolveExternal: target.resolveExternal })],
+  });
+}
+
+/**
+ * Emits an import that leaves a preserveModules tree as a path relative to the
+ * importing module's own output file.
+ *
+ * The relative path is computed here rather than left to Rolldown: given an
+ * absolute external id, Rolldown relativizes it against the importer's SOURCE
+ * location, which lies in a different directory than the emitted file. A
+ * preserveModules chunk sits at `outDir/<path below sourceRoot>`, so the
+ * output location of every importer is known before bundling, and a relative
+ * external id is emitted verbatim.
+ *
+ * @param {{ sourceRoot: string, outDir: string, resolveExternal: (specifier: string, importer: string | undefined) => string | undefined }} opts
+ * @returns {import('rolldown').Plugin}
+ */
+export function createShippedExternalsPlugin(opts) {
+  const { sourceRoot, outDir, resolveExternal } = opts;
+
+  return {
+    name: 'exojs-shipped-externals',
+    resolveId(source, importer) {
+      const target = resolveExternal(source, importer);
+
+      if (target === undefined) {
+        return null;
+      }
+
+      if (importer === undefined) {
+        throw new Error(`"${source}" cannot be an entry of a preserveModules tree.`);
+      }
+
+      const importerOutput = resolve(outDir, relative(sourceRoot, importer));
+      const id = relative(dirname(importerOutput), target).replaceAll('\\', '/');
+
+      return { id: id.startsWith('.') ? id : `./${id}`, external: true };
+    },
+  };
+}
diff --git a/packages/exojs-config/typescript/consumer.json b/packages/exojs-config/typescript/consumer.json
index 28ea448da..90ea96d99 100644
--- a/packages/exojs-config/typescript/consumer.json
+++ b/packages/exojs-config/typescript/consumer.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Profile for code that consumes ExoJS the way an application does, rather than code that ships inside the engine: the example catalog, guide snippets, the full-bundle entry and the public-surface type tests. It deliberately mirrors what `create-exo-app` scaffolds (plain `strict: true`, `skipLibCheck`, no emit) instead of extending base.json, because base.json is the engine's own profile - `noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`, `verbatimModuleSyntax` and the unused-symbol checks are engine policy that no scaffold turns on, and checking a copy-paste surface under options its readers do not have makes the gate report drift that does not exist for them. `allowJs`/`checkJs` are on because the example catalog ships each `.ts` source alongside the `.js` twin the transpiler emits, and the gate checks both; they are inert in a program whose file set is `.ts` only. Consumers add their own include/exclude, workspace `paths` and `customConditions`.",
+  "_comment": "Profile for code that consumes ExoJS the way an application does, rather than code that ships inside the engine: the example catalog, guide snippets and the public-surface type tests. It deliberately mirrors what `create-exo-app` scaffolds (plain `strict: true`, `skipLibCheck`, no emit) instead of extending base.json, because base.json is the engine's own profile - `noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`, `verbatimModuleSyntax` and the unused-symbol checks are engine policy that no scaffold turns on, and checking a copy-paste surface under options its readers do not have makes the gate report drift that does not exist for them. `allowJs`/`checkJs` are on because the example catalog ships each `.ts` source alongside the `.js` twin the transpiler emits, and the gate checks both; they are inert in a program whose file set is `.ts` only. Consumers add their own include/exclude, workspace `paths` and `customConditions`.",
   "compilerOptions": {
     "target": "es2022",
     "module": "esnext",
diff --git a/packages/exojs-config/typescript/workspace-paths.json b/packages/exojs-config/typescript/workspace-paths.json
new file mode 100644
index 000000000..091392dc4
--- /dev/null
+++ b/packages/exojs-config/typescript/workspace-paths.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "_comment": "Source mappings for the public `@codexo/exojs` specifiers inside this repository, so a program type-checks against the workspace sources rather than against whatever `dist/` a previous build left behind. The paths are relative to this file. A config that needs further mappings has to repeat these, because TypeScript replaces an inherited `paths` object wholesale.",
+  "compilerOptions": {
+    "paths": {
+      "@codexo/exojs": ["../../../src/index.ts"],
+      "@codexo/exojs/extensions": ["../../../src/extensions/index.ts"],
+      "@codexo/exojs/renderer-sdk": ["../../../src/renderer-sdk.ts"],
+      "@codexo/exojs/debug": ["../../../src/debug/index.ts"],
+      "@codexo/exojs-demo-assets": ["../../exojs-demo-assets/src/index.ts"],
+      "@codexo/exojs-demo-assets/extended": ["../../exojs-demo-assets/src/extended.ts"],
+      "@codexo/exojs/tilemap": ["../../exojs-tilemap/src/index.ts"],
+      "@codexo/exojs/particles": ["../../exojs-particles/src/index.ts"],
+      "@codexo/exojs/audio-fx": ["../../exojs-audio-fx/src/index.ts"],
+      "@codexo/exojs/physics": ["../../exojs-physics/src/index.ts"],
+      "@codexo/exojs/tilemap-physics": ["../../exojs-tilemap-physics/src/index.ts"],
+      "@codexo/exojs/lighting": ["../../exojs-lighting/src/index.ts"],
+      "@codexo/exojs/pathfinding": ["../../exojs-pathfinding/src/index.ts"]
+    }
+  }
+}
diff --git a/packages/exojs-demo-assets/LICENSE b/packages/exojs-demo-assets/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/exojs-demo-assets/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/exojs-demo-assets/README.md b/packages/exojs-demo-assets/README.md
new file mode 100644
index 000000000..542901db1
--- /dev/null
+++ b/packages/exojs-demo-assets/README.md
@@ -0,0 +1,101 @@
+# @codexo/exojs-demo-assets
+
+Optional demo media for [ExoJS](https://github.com/Exoridus/ExoJS): a typed, flat catalog of asset descriptors for textures, sounds, music, fonts, bitmap fonts, maps, JSON atlases and videos, with licences and a hash manifest.
+
+This package is data and descriptors, not the Core asset system. Importing it or reading a property fetches nothing, decodes nothing and creates no placeholder resources. A resource exists only once a concrete loader has claimed its descriptor.
+
+## Install
+
+```sh
+npm install @codexo/exojs @codexo/exojs-demo-assets
+```
+
+## Usage
+
+```ts
+import { Application, type RenderingContext, Scene, Sprite, type Video } from '@codexo/exojs';
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+
+class DemoScene extends Scene {
+  private video!: Video;
+  private ship!: Sprite;
+
+  override async load(): Promise<void> {
+    // Video, music and fonts have no placeholder handle: await them in load().
+    this.video = await this.loader.load(assets.videoHighRes);
+  }
+
+  override init(): void {
+    // Textures and sounds can be claimed synchronously: get() returns a handle
+    // that fills in when the file arrives.
+    this.ship = new Sprite(this.loader.get(assets.ship)).setPosition(64, 64);
+    this.video.applyOptions({ loop: true, muted: true });
+    this.video.play();
+  }
+
+  override draw(context: RenderingContext): void {
+    context.render(this.video);
+    context.render(this.ship);
+  }
+}
+
+const app = new Application({ scenes: { DemoScene }, canvas: { mount: document.body } });
+
+await app.start(DemoScene);
+```
+
+Reading a property such as `assets.ship` only returns its descriptor. Textures and sounds support `loader.get()` and `await loader.load()`; video, music, fonts, bitmap fonts and SVG images have no synchronous handle and load with `await loader.load()`. The catalog object is frozen and reusable across scenes and applications; claims and payload sharing belong to each loader.
+
+## Bundlers
+
+Each descriptor in `demoAssets` is a literal `new URL('../media/<file>', import.meta.url)`, which Vite and other bundlers that understand the pattern follow. Two consequences matter for a production build:
+
+- The descriptors live in one object, so importing `demoAssets` makes the bundler emit every standard file (about 19 MB), not only the ones the code loads. That suits a demo or prototype; a shipped game should load its own media or copy just what it needs.
+- Tiled maps, LDtk projects and bitmap fonts reference sibling files by relative path. A bundler that renames files with content hashes, or inlines small ones as `data:` URLs, breaks those references. Serve these formats through the copy command and `createDemoAssets` below.
+
+The Vite dev server serves the media straight from the installed package, relative references included.
+
+## Hosting the media elsewhere
+
+The default `demoAssets` instance addresses the media shipped inside this package, which works in Node ESM and with bundlers that resolve `new URL(..., import.meta.url)`. Hosts that copy the media to their own directory use the factory:
+
+```ts
+import { createDemoAssets } from '@codexo/exojs-demo-assets';
+
+const assets = createDemoAssets(new URL('./demo-media/', import.meta.url));
+```
+
+`baseUrl` must be an absolute URL; a relative location has to be resolved by the caller first. Copy the media deterministically with the bundled command:
+
+```sh
+npx exojs-demo-assets-copy ./public/demo-media --clean
+```
+
+It copies exactly the standard-profile files listed in `manifest.json` to their manifest paths and verifies each file against its SHA-256.
+
+## Extended media
+
+The standard profile ships in this package (160 files, under 20 MB). The extended HDR10 video candidate does not: it is delivered as a separate archive (`exojs-demo-assets-extended-<version>.zip`) and served from a location you choose.
+
+```ts
+import type { Scene, Video } from '@codexo/exojs';
+import { createExtendedDemoAssets } from '@codexo/exojs-demo-assets/extended';
+
+const extended = createExtendedDemoAssets('https://media.example.com/exojs-demo-extended/');
+
+export const loadHdrClip = async (scene: Scene): Promise<Video> => await scene.loader.load(extended.videoHdr10);
+```
+
+The `videoHdr10` clip carries BT.2020/PQ metadata; whether it is shown as HDR depends on the browser, the display and the rendering path.
+
+## Content
+
+`catalog.json` is the authored source. `manifest.json`, `THIRD_PARTY_NOTICES.md`, the generated TypeScript and the `media/` tree are derived from it by `pnpm generate`. Media provenance, including third-party Kenney assets (CC0-1.0) and the Blender clip candidates, is recorded per file.
+
+## API
+
+- `demoAssets: DemoAssetDefinitions` – the frozen standard catalog.
+- `demoAssetCategories: Readonly<Record<DemoAssetKey, DemoAssetCategory>>` – browsing categories.
+- `createDemoAssets(baseUrl: string | URL): DemoAssetDefinitions`
+- `createExtendedDemoAssets(baseUrl: string | URL): ExtendedDemoAssetDefinitions` (from `/extended`)
+- `./manifest.json` – every shipped file with hash, size, role and provenance.
diff --git a/packages/exojs-demo-assets/THIRD_PARTY_NOTICES.md b/packages/exojs-demo-assets/THIRD_PARTY_NOTICES.md
new file mode 100644
index 000000000..15d9cca43
--- /dev/null
+++ b/packages/exojs-demo-assets/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,383 @@
+# Third-Party Notices
+
+Attribution for every media file this delivery contains. Paths are relative to the media root
+(`media/` in the npm package, the archive root in a media archive). Files whose license is
+MIT are original ExoJS work.
+
+## Kenney Impact Sounds
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/impact-sounds
+
+Files:
+
+- `audio/impactBell_heavy_000.ogg`
+- `audio/impactGlass_heavy_000.ogg`
+- `audio/impactMetal_heavy_000.ogg`
+- `audio/impactWood_heavy_000.ogg`
+- `demo/sound/impact-heavy.ogg`
+- `demo/sound/impact-light.ogg`
+- `demo/sound/impact-wood.ogg`
+- `demo/vendor/kenney/impact-sounds/License.txt`
+
+## Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses
+
+- Author: Adventure Kid / Kristoffer Ekstrand
+- License: CC-BY-4.0 (https://creativecommons.org/licenses/by/4.0/)
+- Source: https://www.adventurekid.se/akrt/free-reverb-impulse-responses/
+- Attribution: AK-SROOMS by Adventure Kid (Kristoffer Ekstrand), CC BY 4.0
+- Note: Unmodified; AK-SROOMS__018.wav renamed to AK-SROOMS_018.wav. AK-SROOMS_004.wav and AK-SROOMS_005.wav are byte-identical in the upstream set.
+
+Files:
+
+- `audio/ir/AK-SROOMS_001.wav`
+- `audio/ir/AK-SROOMS_002.wav`
+- `audio/ir/AK-SROOMS_003.wav`
+- `audio/ir/AK-SROOMS_004.wav`
+- `audio/ir/AK-SROOMS_005.wav`
+- `audio/ir/AK-SROOMS_006.wav`
+- `audio/ir/AK-SROOMS_007.wav`
+- `audio/ir/AK-SROOMS_008.wav`
+- `audio/ir/AK-SROOMS_009.wav`
+- `audio/ir/AK-SROOMS_010.wav`
+- `audio/ir/AK-SROOMS_011.wav`
+- `audio/ir/AK-SROOMS_012.wav`
+- `audio/ir/AK-SROOMS_013.wav`
+- `audio/ir/AK-SROOMS_014.wav`
+- `audio/ir/AK-SROOMS_015.wav`
+- `audio/ir/AK-SROOMS_016.wav`
+- `audio/ir/AK-SROOMS_017.wav`
+- `audio/ir/AK-SROOMS_018.wav`
+- `audio/ir/AK-SROOMS_019.wav`
+- `audio/ir/AK-SROOMS_020.wav`
+- `audio/ir/AK-SROOMS_021.wav`
+- `audio/ir/AK-SROOMS_022.wav`
+- `audio/ir/AK-SROOMS_023.wav`
+- `audio/ir/AK-SROOMS_024.wav`
+- `audio/ir/AK-SROOMS_025.wav`
+- `audio/ir/AK-SROOMS_026.wav`
+- `audio/ir/AK-SROOMS_027.wav`
+- `audio/ir/AK-SROOMS_028.wav`
+- `audio/ir/AK-SROOMS_029.wav`
+- `audio/ir/AK-SROOMS_030.wav`
+
+## Kenney Background Elements Remastered
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/background-elements-remastered
+
+Files:
+
+- `demo/backgrounds/castles.png`
+- `demo/backgrounds/forest.png`
+- `demo/spritesheets/kenney/background-elements.png`
+- `demo/vendor/kenney/background-elements-remastered/License.txt`
+
+## Kenney New Platformer Pack
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/new-platformer-pack
+
+Files:
+
+- `demo/backgrounds/platformer-clouds.png`
+- `demo/backgrounds/platformer-hills.png`
+- `demo/sound/coin.ogg`
+- `demo/sound/hurt.ogg`
+- `demo/sound/jump.ogg`
+- `demo/spritesheets/kenney/platformer-backgrounds.png`
+- `demo/spritesheets/kenney/platformer-characters.png`
+- `demo/spritesheets/kenney/platformer-enemies.png`
+- `demo/spritesheets/kenney/platformer-tiles.png`
+- `demo/vendor/kenney/new-platformer-pack/License.txt`
+
+## Kenney Cursor Pack
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/cursor-pack
+
+Files:
+
+- `demo/cursors/arrow.svg`
+- `demo/cursors/busy.svg`
+- `demo/cursors/cross.svg`
+- `demo/cursors/hand.svg`
+- `demo/cursors/pointer.svg`
+- `demo/vendor/kenney/cursor-pack/License.txt`
+
+## Kenney Fonts
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/kenney-fonts
+
+Files:
+
+- `demo/fonts/Kenney Future.ttf`
+- `demo/fonts/Kenney Mini Square Mono.ttf`
+- `demo/fonts/Kenney Mini.ttf`
+- `demo/fonts/Kenney Pixel.ttf`
+- `demo/vendor/kenney/kenney-fonts/License.txt`
+
+## Kenney Blocks bitmap font (32 px)
+
+- Author: Kenney (kenney.nl); rasterized for ExoJS
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/kenney-fonts
+- Note: Generated from Kenney Blocks.ttf.
+
+Files:
+
+- `demo/fonts/kenney-blocks-32.fnt`
+- `demo/fonts/kenney-blocks-32.png`
+
+## Kenney Input Prompts
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/input-prompts
+- Note: Packed into one atlas per device family; the atlas JSON is authored for ExoJS.
+
+Files:
+
+- `demo/input-prompts/generic.json`
+- `demo/input-prompts/generic.png`
+- `demo/input-prompts/keyboard-mouse.json`
+- `demo/input-prompts/keyboard-mouse.png`
+- `demo/input-prompts/nintendo-switch.json`
+- `demo/input-prompts/nintendo-switch.png`
+- `demo/input-prompts/playstation-series.json`
+- `demo/input-prompts/playstation-series.png`
+- `demo/input-prompts/xbox-series.json`
+- `demo/input-prompts/xbox-series.png`
+
+## ExoJS original work
+
+- Author: ExoJS contributors
+- License: MIT (https://opensource.org/license/mit)
+- Source: https://github.com/Exoridus/ExoJS
+
+Files:
+
+- `demo/music/demo-loop-a.ogg`
+- `demo/music/demo-loop-b.ogg`
+- `demo/music/demo-loop-main.ogg`
+- `demo/svg/arrow-right.svg`
+- `demo/svg/audio-wave.svg`
+- `demo/svg/image-placeholder.svg`
+- `demo/svg/pause.svg`
+- `demo/svg/play.svg`
+- `demo/svg/reset.svg`
+- `demo/svg/rune-mark.svg`
+- `demo/svg/sparkle.svg`
+- `demo/textures/ship-a.png`
+- `demo/video/demo-loop.webm`
+- `json/maps/drift-fields.tmj`
+- `json/maps/harbor-plaza.tmj`
+- `json/maps/harbor-world.ldtk`
+- `json/maps/isometric-landscape.tmj`
+- `json/maps/ownership-workshop.tmj`
+- `json/maps/physics-room.tmj`
+- `svg/exo-wordmark.svg`
+- `technical/alpha/alpha-edge-straight.png`
+- `technical/alpha/alpha-gradient-rings.png`
+- `technical/color/hue-ramp.png`
+- `technical/color/primary-ramp.png`
+- `technical/color/srgb-ramp.png`
+- `technical/filtering/checker-256.png`
+- `technical/filtering/pixel-grid-128.png`
+- `technical/filtering/uv-grid-256.png`
+
+## Kenney Music Jingles
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/music-jingles
+
+Files:
+
+- `demo/music/jingle-failure.ogg`
+- `demo/music/jingle-retro-a.ogg`
+- `demo/music/jingle-retro-b.ogg`
+- `demo/music/jingle-success.ogg`
+- `demo/vendor/kenney/music-jingles/License.txt`
+
+## Sound sprites assembled from Kenney Interface Sounds, UI Pack, Impact Sounds and Digital Audio
+
+- Author: Kenney (kenney.nl); assembled for ExoJS
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets
+- Note: Concatenated with a 100 ms gap between clips; the sprite JSON is authored for ExoJS.
+
+Files:
+
+- `demo/sound-sprites/digital/digital.json`
+- `demo/sound-sprites/digital/digital.ogg`
+- `demo/sound-sprites/impacts/impacts.json`
+- `demo/sound-sprites/impacts/impacts.ogg`
+- `demo/sound-sprites/ui/ui.json`
+- `demo/sound-sprites/ui/ui.ogg`
+
+## Kenney Interface Sounds
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/interface-sounds
+
+Files:
+
+- `demo/sound/back.ogg`
+- `demo/sound/ui-bong.ogg`
+- `demo/sound/ui-click.ogg`
+- `demo/sound/ui-confirm.ogg`
+- `demo/vendor/kenney/interface-sounds/License.txt`
+
+## Kenney UI Pack
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/ui-pack
+
+Files:
+
+- `demo/sound/click-alt.ogg`
+- `demo/sound/switch.ogg`
+- `demo/vendor/kenney/ui-pack/License.txt`
+
+## Kenney Digital Audio
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/digital-audio
+
+Files:
+
+- `demo/sound/laser.ogg`
+- `demo/sound/power-up.ogg`
+- `demo/vendor/kenney/digital-audio/License.txt`
+
+## Kenney spritesheets converted to ExoJS atlas JSON
+
+- Author: Kenney (kenney.nl); converted for ExoJS
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets
+- Note: Converted from the packs' TexturePacker XML. The `meta.image` field is not used to locate the image; load the matching image descriptor.
+
+Files:
+
+- `demo/spritesheets/kenney/background-elements.json`
+- `demo/spritesheets/kenney/map-pack.json`
+- `demo/spritesheets/kenney/platformer-backgrounds.json`
+- `demo/spritesheets/kenney/platformer-characters.json`
+- `demo/spritesheets/kenney/platformer-enemies.json`
+- `demo/spritesheets/kenney/platformer-tiles.json`
+
+## Kenney Map Pack
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/map-pack
+
+Files:
+
+- `demo/spritesheets/kenney/map-pack.png`
+- `demo/vendor/kenney/map-pack/License.txt`
+- `demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png`
+
+## Kenney Development Essentials
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/development-essentials
+
+Files:
+
+- `demo/textures/checkerboard-transparent.png`
+- `demo/textures/kenney-uv.png`
+- `demo/textures/pixel-black.png`
+- `demo/textures/pixel-transparent.png`
+- `demo/textures/pixel-white.png`
+- `demo/vendor/kenney/development-essentials/License.txt`
+
+## Kenney Particle Pack
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/particle-pack
+
+Files:
+
+- `demo/textures/particle-flame.png`
+- `demo/textures/particle-light.png`
+- `demo/textures/particle-smoke.png`
+- `demo/textures/particle-spark.png`
+- `demo/textures/particle-star.png`
+
+## Kenney Prototype Textures
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/prototype-textures
+
+Files:
+
+- `demo/textures/prototype-dark-01.png`
+- `demo/textures/prototype-grid.png`
+- `demo/textures/prototype-light-01.png`
+- `demo/vendor/kenney/prototype-textures/License.txt`
+
+## Kenney Isometric Tiles Landscape
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/isometric-tiles-landscape
+
+Files:
+
+- `demo/vendor/kenney/isometric-tiles-landscape/License.txt`
+- `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_000.png`
+- `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_001.png`
+- `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_005.png`
+- `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_020.png`
+- `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_030.png`
+- `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_040.png`
+
+## Big Buck Bunny, Sunflower version (60 fps)
+
+- Author: Blender Foundation 2008; 60 fps re-render Janus Bager Kristensen 2013
+- License: CC-BY-3.0 (https://creativecommons.org/licenses/by/3.0/)
+- Source: https://peach.blender.org/
+- Attribution: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
+- Note: 12.14 s excerpt cut by stream copy (no re-encode); title, artist and licence are also embedded in the file's metadata.
+
+Files:
+
+- `demo/video/clips/high-fps.webm`
+
+## Glass Half
+
+- Author: Blender Foundation; directed by Beorn Leonard
+- License: CC-BY-3.0 (https://creativecommons.org/licenses/by/3.0/)
+- Source: https://studio.blender.org/films/glass-half/
+- Attribution: (CC) Blender Foundation | studio.blender.org
+- Note: 12.19 s excerpt cut by stream copy (no re-encode) from the 3840x2160 encode.
+
+Files:
+
+- `demo/video/clips/high-res.mp4`
+
+## Kenney Voiceover Pack
+
+- Author: Kenney (kenney.nl)
+- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
+- Source: https://kenney.nl/assets/voiceover-pack
+
+Files:
+
+- `demo/voice/congratulations.ogg`
+- `demo/voice/mission-complete.ogg`
+- `demo/voice/objective-achieved.ogg`
diff --git a/packages/exojs-demo-assets/bin/copy-media.js b/packages/exojs-demo-assets/bin/copy-media.js
new file mode 100644
index 000000000..31d888493
--- /dev/null
+++ b/packages/exojs-demo-assets/bin/copy-media.js
@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+// Copies the package's standard media into a directory a host serves, so the
+// descriptors from `createDemoAssets(new URL(<that directory>))` resolve.
+//
+//   exojs-demo-assets-copy <target-directory> [--clean]
+//
+// The copy is deterministic: exactly the files `manifest.json` lists for the
+// standard profile, at their manifest paths, each verified against its SHA-256.
+// `--clean` removes the target first so no file from an older version survives.
+import { createHash } from 'node:crypto';
+import { copyFileSync, mkdirSync, readFileSync, rmSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const args = process.argv.slice(2);
+const target = args.find(arg => !arg.startsWith('--'));
+
+if (target === undefined) {
+  process.stderr.write('usage: exojs-demo-assets-copy <target-directory> [--clean]\n');
+  process.exit(2);
+}
+
+/** @type {{ files: Array<{ path: string; sha256: string; profile: string }> }} */
+const manifest = JSON.parse(readFileSync(resolve(packageRoot, 'manifest.json'), 'utf8'));
+const destinationRoot = resolve(target);
+
+if (args.includes('--clean')) {
+  rmSync(destinationRoot, { recursive: true, force: true });
+}
+
+let copied = 0;
+
+for (const file of manifest.files) {
+  if (file.profile !== 'standard') {
+    continue;
+  }
+
+  const destination = resolve(destinationRoot, file.path);
+  mkdirSync(dirname(destination), { recursive: true });
+  copyFileSync(resolve(packageRoot, 'media', file.path), destination);
+
+  if (createHash('sha256').update(readFileSync(destination)).digest('hex') !== file.sha256) {
+    process.stderr.write(`exojs-demo-assets-copy: ${file.path} does not match its manifest hash\n`);
+    process.exit(1);
+  }
+
+  copied += 1;
+}
+
+process.stdout.write(`exojs-demo-assets-copy: ${copied} files -> ${destinationRoot}\n`);
diff --git a/packages/exojs-demo-assets/catalog.json b/packages/exojs-demo-assets/catalog.json
new file mode 100644
index 000000000..27deced2b
--- /dev/null
+++ b/packages/exojs-demo-assets/catalog.json
@@ -0,0 +1,1097 @@
+{
+  "$comment": "Authored source of the demo catalog. Every other list (definitions, default instance, manifest, notices, packed media) is generated from this file by scripts/generate.ts. Paths are relative to examples/assets/.",
+  "sourceRoot": "../../examples/assets",
+  "provenance": {
+    "exojs": {
+      "title": "ExoJS original work",
+      "author": "ExoJS contributors",
+      "license": "MIT",
+      "licenseUrl": "https://opensource.org/license/mit",
+      "source": "https://github.com/Exoridus/ExoJS"
+    },
+    "kenney-background-elements-remastered": {
+      "title": "Kenney Background Elements Remastered",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/background-elements-remastered",
+      "licenseFile": "demo/vendor/kenney/background-elements-remastered/License.txt"
+    },
+    "kenney-cursor-pack": {
+      "title": "Kenney Cursor Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/cursor-pack",
+      "licenseFile": "demo/vendor/kenney/cursor-pack/License.txt"
+    },
+    "kenney-development-essentials": {
+      "title": "Kenney Development Essentials",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/development-essentials",
+      "licenseFile": "demo/vendor/kenney/development-essentials/License.txt"
+    },
+    "kenney-digital-audio": {
+      "title": "Kenney Digital Audio",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/digital-audio",
+      "licenseFile": "demo/vendor/kenney/digital-audio/License.txt"
+    },
+    "kenney-impact-sounds": {
+      "title": "Kenney Impact Sounds",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/impact-sounds",
+      "licenseFile": "demo/vendor/kenney/impact-sounds/License.txt"
+    },
+    "kenney-interface-sounds": {
+      "title": "Kenney Interface Sounds",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/interface-sounds",
+      "licenseFile": "demo/vendor/kenney/interface-sounds/License.txt"
+    },
+    "kenney-isometric-tiles-landscape": {
+      "title": "Kenney Isometric Tiles Landscape",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/isometric-tiles-landscape",
+      "licenseFile": "demo/vendor/kenney/isometric-tiles-landscape/License.txt"
+    },
+    "kenney-fonts": {
+      "title": "Kenney Fonts",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/kenney-fonts",
+      "licenseFile": "demo/vendor/kenney/kenney-fonts/License.txt"
+    },
+    "kenney-map-pack": {
+      "title": "Kenney Map Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/map-pack",
+      "licenseFile": "demo/vendor/kenney/map-pack/License.txt"
+    },
+    "kenney-music-jingles": {
+      "title": "Kenney Music Jingles",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/music-jingles",
+      "licenseFile": "demo/vendor/kenney/music-jingles/License.txt"
+    },
+    "kenney-new-platformer-pack": {
+      "title": "Kenney New Platformer Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/new-platformer-pack",
+      "licenseFile": "demo/vendor/kenney/new-platformer-pack/License.txt"
+    },
+    "kenney-prototype-textures": {
+      "title": "Kenney Prototype Textures",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/prototype-textures",
+      "licenseFile": "demo/vendor/kenney/prototype-textures/License.txt"
+    },
+    "kenney-ui-pack": {
+      "title": "Kenney UI Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/ui-pack",
+      "licenseFile": "demo/vendor/kenney/ui-pack/License.txt"
+    },
+    "kenney-particle-pack": {
+      "title": "Kenney Particle Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/particle-pack"
+    },
+    "kenney-input-prompts": {
+      "title": "Kenney Input Prompts",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/input-prompts",
+      "note": "Packed into one atlas per device family; the atlas JSON is authored for ExoJS."
+    },
+    "kenney-voiceover-pack": {
+      "title": "Kenney Voiceover Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/voiceover-pack"
+    },
+    "kenney-sound-sprites": {
+      "title": "Sound sprites assembled from Kenney Interface Sounds, UI Pack, Impact Sounds and Digital Audio",
+      "author": "Kenney (kenney.nl); assembled for ExoJS",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets",
+      "note": "Concatenated with a 100 ms gap between clips; the sprite JSON is authored for ExoJS."
+    },
+    "kenney-spritesheet-conversion": {
+      "title": "Kenney spritesheets converted to ExoJS atlas JSON",
+      "author": "Kenney (kenney.nl); converted for ExoJS",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets",
+      "note": "Converted from the packs' TexturePacker XML. The `meta.image` field is not used to locate the image; load the matching image descriptor."
+    },
+    "kenney-blocks-bitmap-font": {
+      "title": "Kenney Blocks bitmap font (32 px)",
+      "author": "Kenney (kenney.nl); rasterized for ExoJS",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/kenney-fonts",
+      "licenseFile": "demo/vendor/kenney/kenney-fonts/License.txt",
+      "note": "Generated from Kenney Blocks.ttf."
+    },
+    "blender-glass-half": {
+      "title": "Glass Half",
+      "author": "Blender Foundation; directed by Beorn Leonard",
+      "license": "CC-BY-3.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/3.0/",
+      "source": "https://studio.blender.org/films/glass-half/",
+      "attribution": "(CC) Blender Foundation | studio.blender.org",
+      "note": "12.19 s excerpt cut by stream copy (no re-encode) from the 3840x2160 encode."
+    },
+    "blender-big-buck-bunny": {
+      "title": "Big Buck Bunny, Sunflower version (60 fps)",
+      "author": "Blender Foundation 2008; 60 fps re-render Janus Bager Kristensen 2013",
+      "license": "CC-BY-3.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/3.0/",
+      "source": "https://peach.blender.org/",
+      "attribution": "(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org",
+      "note": "12.14 s excerpt cut by stream copy (no re-encode); title, artist and licence are also embedded in the file's metadata."
+    },
+    "blender-singularity": {
+      "title": "Singularity",
+      "author": "Blender Foundation; directed by Andy Goralczyk (2026)",
+      "license": "CC-BY-4.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/4.0/",
+      "source": "https://studio.blender.org/films/singularity/",
+      "attribution": "(CC) Blender Foundation | studio.blender.org",
+      "note": "8.02 s excerpt cut by stream copy (no re-encode) from the HDR10 AV1 encode."
+    },
+    "adventure-kid-ak-srooms": {
+      "title": "Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses",
+      "author": "Adventure Kid / Kristoffer Ekstrand",
+      "license": "CC-BY-4.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/4.0/",
+      "source": "https://www.adventurekid.se/akrt/free-reverb-impulse-responses/",
+      "attribution": "AK-SROOMS by Adventure Kid (Kristoffer Ekstrand), CC BY 4.0",
+      "note": "Unmodified; AK-SROOMS__018.wav renamed to AK-SROOMS_018.wav. AK-SROOMS_004.wav and AK-SROOMS_005.wav are byte-identical in the upstream set."
+    }
+  },
+  "media": {
+    "demo/video/clips/high-res.mp4": {
+      "container": "mp4",
+      "video": {
+        "codec": "h264",
+        "profile": "High",
+        "width": 3840,
+        "height": 2160,
+        "frameRate": "24/1",
+        "pixelFormat": "yuv420p",
+        "bitDepth": 8,
+        "colorRange": "tv",
+        "colorPrimaries": "bt709",
+        "colorTransfer": "bt709",
+        "colorMatrix": "bt709"
+      },
+      "audio": { "codec": "aac", "sampleRate": 48000, "channels": 2 },
+      "durationSeconds": 12.188313,
+      "dynamicRange": "SDR"
+    },
+    "demo/video/clips/high-fps.webm": {
+      "container": "webm",
+      "video": {
+        "codec": "vp9",
+        "profile": "Profile 0",
+        "width": 1920,
+        "height": 1080,
+        "frameRate": "60/1",
+        "pixelFormat": "yuv420p",
+        "bitDepth": 8,
+        "colorRange": "tv",
+        "colorPrimaries": null,
+        "colorTransfer": null,
+        "colorMatrix": null
+      },
+      "audio": { "codec": "opus", "sampleRate": 48000, "channels": 2 },
+      "durationSeconds": 12.141,
+      "dynamicRange": "SDR (colour primaries, transfer and matrix are not tagged in the stream)"
+    },
+    "demo/video/clips/hdr10.webm": {
+      "container": "webm",
+      "video": {
+        "codec": "av1",
+        "profile": "Main",
+        "width": 3840,
+        "height": 1608,
+        "frameRate": "24/1",
+        "pixelFormat": "yuv420p10le",
+        "bitDepth": 10,
+        "colorRange": "tv",
+        "colorPrimaries": "bt2020",
+        "colorTransfer": "smpte2084",
+        "colorMatrix": "bt2020nc",
+        "masteringDisplay": {
+          "redX": "17/25",
+          "redY": "8/25",
+          "greenX": "828/3125",
+          "greenY": "69/100",
+          "blueX": "3/20",
+          "blueY": "3/50",
+          "whitePointX": "3127/10000",
+          "whitePointY": "329/1000",
+          "minLuminance": "1/100",
+          "maxLuminance": "1000/1"
+        },
+        "contentLightLevel": { "maxContent": 1000, "maxAverage": 300 }
+      },
+      "audio": { "codec": "opus", "sampleRate": 48000, "channels": 2 },
+      "durationSeconds": 8.018,
+      "dynamicRange": "HDR10 metadata (PQ, BT.2020); display output is not verified by this metadata"
+    }
+  },
+  "entries": [
+    { "key": "ship", "type": "texture", "path": "demo/textures/ship-a.png", "category": "textures", "provenance": "exojs" },
+    {
+      "key": "particleFlame",
+      "type": "texture",
+      "path": "demo/textures/particle-flame.png",
+      "category": "textures",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleSmoke",
+      "type": "texture",
+      "path": "demo/textures/particle-smoke.png",
+      "category": "textures",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleStar",
+      "type": "texture",
+      "path": "demo/textures/particle-star.png",
+      "category": "textures",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleSpark",
+      "type": "texture",
+      "path": "demo/textures/particle-spark.png",
+      "category": "textures",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleLight",
+      "type": "texture",
+      "path": "demo/textures/particle-light.png",
+      "category": "textures",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "pixelWhite",
+      "type": "texture",
+      "path": "demo/textures/pixel-white.png",
+      "category": "textures",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "pixelBlack",
+      "type": "texture",
+      "path": "demo/textures/pixel-black.png",
+      "category": "textures",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "pixelTransparent",
+      "type": "texture",
+      "path": "demo/textures/pixel-transparent.png",
+      "category": "textures",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "checkerboardTransparent",
+      "type": "texture",
+      "path": "demo/textures/checkerboard-transparent.png",
+      "category": "textures",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "kenneyUv",
+      "type": "texture",
+      "path": "demo/textures/kenney-uv.png",
+      "category": "textures",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "prototypeDark01",
+      "type": "texture",
+      "path": "demo/textures/prototype-dark-01.png",
+      "category": "textures",
+      "provenance": "kenney-prototype-textures"
+    },
+    {
+      "key": "prototypeLight01",
+      "type": "texture",
+      "path": "demo/textures/prototype-light-01.png",
+      "category": "textures",
+      "provenance": "kenney-prototype-textures"
+    },
+    {
+      "key": "prototypeGrid",
+      "type": "texture",
+      "path": "demo/textures/prototype-grid.png",
+      "category": "textures",
+      "provenance": "kenney-prototype-textures"
+    },
+
+    {
+      "key": "alphaEdgeStraight",
+      "type": "texture",
+      "path": "technical/alpha/alpha-edge-straight.png",
+      "category": "technical",
+      "provenance": "exojs"
+    },
+    {
+      "key": "alphaGradientRings",
+      "type": "texture",
+      "path": "technical/alpha/alpha-gradient-rings.png",
+      "category": "technical",
+      "provenance": "exojs"
+    },
+    {
+      "key": "checker256",
+      "type": "texture",
+      "path": "technical/filtering/checker-256.png",
+      "category": "technical",
+      "provenance": "exojs"
+    },
+    {
+      "key": "pixelGrid128",
+      "type": "texture",
+      "path": "technical/filtering/pixel-grid-128.png",
+      "category": "technical",
+      "provenance": "exojs"
+    },
+    {
+      "key": "uvGrid256",
+      "type": "texture",
+      "path": "technical/filtering/uv-grid-256.png",
+      "category": "technical",
+      "provenance": "exojs"
+    },
+    { "key": "srgbRamp", "type": "texture", "path": "technical/color/srgb-ramp.png", "category": "technical", "provenance": "exojs" },
+    { "key": "hueRamp", "type": "texture", "path": "technical/color/hue-ramp.png", "category": "technical", "provenance": "exojs" },
+    { "key": "primaryRamp", "type": "texture", "path": "technical/color/primary-ramp.png", "category": "technical", "provenance": "exojs" },
+
+    {
+      "key": "backgroundPlatformerClouds",
+      "type": "texture",
+      "path": "demo/backgrounds/platformer-clouds.png",
+      "category": "backgrounds",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "backgroundPlatformerHills",
+      "type": "texture",
+      "path": "demo/backgrounds/platformer-hills.png",
+      "category": "backgrounds",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "backgroundCastles",
+      "type": "texture",
+      "path": "demo/backgrounds/castles.png",
+      "category": "backgrounds",
+      "provenance": "kenney-background-elements-remastered"
+    },
+    {
+      "key": "backgroundForest",
+      "type": "texture",
+      "path": "demo/backgrounds/forest.png",
+      "category": "backgrounds",
+      "provenance": "kenney-background-elements-remastered"
+    },
+
+    {
+      "key": "platformerBackgroundsImage",
+      "type": "texture",
+      "path": "demo/spritesheets/kenney/platformer-backgrounds.png",
+      "category": "spritesheets",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerBackgroundsAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/spritesheets/kenney/platformer-backgrounds.json",
+      "category": "spritesheets",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "platformerCharactersImage",
+      "type": "texture",
+      "path": "demo/spritesheets/kenney/platformer-characters.png",
+      "category": "spritesheets",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerCharactersAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/spritesheets/kenney/platformer-characters.json",
+      "category": "spritesheets",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "platformerEnemiesImage",
+      "type": "texture",
+      "path": "demo/spritesheets/kenney/platformer-enemies.png",
+      "category": "spritesheets",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerEnemiesAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/spritesheets/kenney/platformer-enemies.json",
+      "category": "spritesheets",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "platformerTilesImage",
+      "type": "texture",
+      "path": "demo/spritesheets/kenney/platformer-tiles.png",
+      "category": "spritesheets",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerTilesAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/spritesheets/kenney/platformer-tiles.json",
+      "category": "spritesheets",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "backgroundElementsImage",
+      "type": "texture",
+      "path": "demo/spritesheets/kenney/background-elements.png",
+      "category": "spritesheets",
+      "provenance": "kenney-background-elements-remastered"
+    },
+    {
+      "key": "backgroundElementsAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/spritesheets/kenney/background-elements.json",
+      "category": "spritesheets",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "mapPackImage",
+      "type": "texture",
+      "path": "demo/spritesheets/kenney/map-pack.png",
+      "category": "spritesheets",
+      "provenance": "kenney-map-pack"
+    },
+    {
+      "key": "mapPackAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/spritesheets/kenney/map-pack.json",
+      "category": "spritesheets",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "mapPackTilesheet",
+      "type": "texture",
+      "path": "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png",
+      "category": "spritesheets",
+      "provenance": "kenney-map-pack"
+    },
+
+    {
+      "key": "genericInputPromptsImage",
+      "type": "texture",
+      "path": "demo/input-prompts/generic.png",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "genericInputPromptsAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/input-prompts/generic.json",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "keyboardMouseInputPromptsImage",
+      "type": "texture",
+      "path": "demo/input-prompts/keyboard-mouse.png",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "keyboardMouseInputPromptsAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/input-prompts/keyboard-mouse.json",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "nintendoSwitchInputPromptsImage",
+      "type": "texture",
+      "path": "demo/input-prompts/nintendo-switch.png",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "nintendoSwitchInputPromptsAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/input-prompts/nintendo-switch.json",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "playstationSeriesInputPromptsImage",
+      "type": "texture",
+      "path": "demo/input-prompts/playstation-series.png",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "playstationSeriesInputPromptsAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/input-prompts/playstation-series.json",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "xboxSeriesInputPromptsImage",
+      "type": "texture",
+      "path": "demo/input-prompts/xbox-series.png",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "xboxSeriesInputPromptsAtlas",
+      "type": "json",
+      "valueType": "SpritesheetData",
+      "path": "demo/input-prompts/xbox-series.json",
+      "category": "inputPrompts",
+      "provenance": "kenney-input-prompts"
+    },
+
+    { "key": "iconPlay", "type": "svg", "path": "demo/svg/play.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "iconPause", "type": "svg", "path": "demo/svg/pause.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "iconReset", "type": "svg", "path": "demo/svg/reset.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "iconArrowRight", "type": "svg", "path": "demo/svg/arrow-right.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "iconSparkle", "type": "svg", "path": "demo/svg/sparkle.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "iconAudioWave", "type": "svg", "path": "demo/svg/audio-wave.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "iconImagePlaceholder", "type": "svg", "path": "demo/svg/image-placeholder.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "iconRuneMark", "type": "svg", "path": "demo/svg/rune-mark.svg", "category": "icons", "provenance": "exojs" },
+    { "key": "exoWordmark", "type": "svg", "path": "svg/exo-wordmark.svg", "category": "icons", "provenance": "exojs" },
+
+    { "key": "cursorArrow", "type": "svg", "path": "demo/cursors/arrow.svg", "category": "cursors", "provenance": "kenney-cursor-pack" },
+    {
+      "key": "cursorPointer",
+      "type": "svg",
+      "path": "demo/cursors/pointer.svg",
+      "category": "cursors",
+      "provenance": "kenney-cursor-pack"
+    },
+    { "key": "cursorHand", "type": "svg", "path": "demo/cursors/hand.svg", "category": "cursors", "provenance": "kenney-cursor-pack" },
+    { "key": "cursorBusy", "type": "svg", "path": "demo/cursors/busy.svg", "category": "cursors", "provenance": "kenney-cursor-pack" },
+    { "key": "cursorCross", "type": "svg", "path": "demo/cursors/cross.svg", "category": "cursors", "provenance": "kenney-cursor-pack" },
+
+    {
+      "key": "fontKenneyFuture",
+      "type": "font",
+      "path": "demo/fonts/Kenney Future.ttf",
+      "options": { "family": "Kenney Future" },
+      "category": "fonts",
+      "provenance": "kenney-fonts"
+    },
+    {
+      "key": "fontKenneyPixel",
+      "type": "font",
+      "path": "demo/fonts/Kenney Pixel.ttf",
+      "options": { "family": "Kenney Pixel" },
+      "category": "fonts",
+      "provenance": "kenney-fonts"
+    },
+    {
+      "key": "fontKenneyMini",
+      "type": "font",
+      "path": "demo/fonts/Kenney Mini.ttf",
+      "options": { "family": "Kenney Mini" },
+      "category": "fonts",
+      "provenance": "kenney-fonts"
+    },
+    {
+      "key": "fontKenneyMiniSquareMono",
+      "type": "font",
+      "path": "demo/fonts/Kenney Mini Square Mono.ttf",
+      "options": { "family": "Kenney Mini Square Mono" },
+      "category": "fonts",
+      "provenance": "kenney-fonts"
+    },
+    {
+      "key": "fontKenneyBlocksFnt",
+      "type": "bmFont",
+      "path": "demo/fonts/kenney-blocks-32.fnt",
+      "category": "fonts",
+      "provenance": "kenney-blocks-bitmap-font"
+    },
+    {
+      "key": "fontKenneyBlocksPng",
+      "type": "texture",
+      "path": "demo/fonts/kenney-blocks-32.png",
+      "category": "fonts",
+      "provenance": "kenney-blocks-bitmap-font"
+    },
+
+    {
+      "key": "soundUiClick",
+      "type": "sound",
+      "path": "demo/sound/ui-click.ogg",
+      "category": "sound",
+      "provenance": "kenney-interface-sounds"
+    },
+    {
+      "key": "soundUiConfirm",
+      "type": "sound",
+      "path": "demo/sound/ui-confirm.ogg",
+      "category": "sound",
+      "provenance": "kenney-interface-sounds"
+    },
+    {
+      "key": "soundUiBong",
+      "type": "sound",
+      "path": "demo/sound/ui-bong.ogg",
+      "category": "sound",
+      "provenance": "kenney-interface-sounds"
+    },
+    { "key": "soundBack", "type": "sound", "path": "demo/sound/back.ogg", "category": "sound", "provenance": "kenney-interface-sounds" },
+    { "key": "soundClickAlt", "type": "sound", "path": "demo/sound/click-alt.ogg", "category": "sound", "provenance": "kenney-ui-pack" },
+    { "key": "soundSwitch", "type": "sound", "path": "demo/sound/switch.ogg", "category": "sound", "provenance": "kenney-ui-pack" },
+    {
+      "key": "soundImpactLight",
+      "type": "sound",
+      "path": "demo/sound/impact-light.ogg",
+      "category": "sound",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactHeavy",
+      "type": "sound",
+      "path": "demo/sound/impact-heavy.ogg",
+      "category": "sound",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactWood",
+      "type": "sound",
+      "path": "demo/sound/impact-wood.ogg",
+      "category": "sound",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactBellHeavy",
+      "type": "sound",
+      "path": "audio/impactBell_heavy_000.ogg",
+      "category": "sound",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactGlassHeavy",
+      "type": "sound",
+      "path": "audio/impactGlass_heavy_000.ogg",
+      "category": "sound",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactWoodHeavy",
+      "type": "sound",
+      "path": "audio/impactWood_heavy_000.ogg",
+      "category": "sound",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactMetalHeavy",
+      "type": "sound",
+      "path": "audio/impactMetal_heavy_000.ogg",
+      "category": "sound",
+      "provenance": "kenney-impact-sounds"
+    },
+    { "key": "soundJump", "type": "sound", "path": "demo/sound/jump.ogg", "category": "sound", "provenance": "kenney-new-platformer-pack" },
+    { "key": "soundCoin", "type": "sound", "path": "demo/sound/coin.ogg", "category": "sound", "provenance": "kenney-new-platformer-pack" },
+    { "key": "soundHurt", "type": "sound", "path": "demo/sound/hurt.ogg", "category": "sound", "provenance": "kenney-new-platformer-pack" },
+    {
+      "key": "soundPowerUp",
+      "type": "sound",
+      "path": "demo/sound/power-up.ogg",
+      "category": "sound",
+      "provenance": "kenney-digital-audio"
+    },
+    { "key": "soundLaser", "type": "sound", "path": "demo/sound/laser.ogg", "category": "sound", "provenance": "kenney-digital-audio" },
+
+    {
+      "key": "uiSoundSprite",
+      "type": "sound",
+      "path": "demo/sound-sprites/ui/ui.ogg",
+      "options": { "sprites": { "$path": "demo/sound-sprites/ui/ui.json" } },
+      "category": "soundSprites",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "key": "impactsSoundSprite",
+      "type": "sound",
+      "path": "demo/sound-sprites/impacts/impacts.ogg",
+      "options": { "sprites": { "$path": "demo/sound-sprites/impacts/impacts.json" } },
+      "category": "soundSprites",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "key": "digitalSoundSprite",
+      "type": "sound",
+      "path": "demo/sound-sprites/digital/digital.ogg",
+      "options": { "sprites": { "$path": "demo/sound-sprites/digital/digital.json" } },
+      "category": "soundSprites",
+      "provenance": "kenney-sound-sprites"
+    },
+
+    { "key": "musicLoopMain", "type": "music", "path": "demo/music/demo-loop-main.ogg", "category": "music", "provenance": "exojs" },
+    { "key": "musicLoopA", "type": "music", "path": "demo/music/demo-loop-a.ogg", "category": "music", "provenance": "exojs" },
+    { "key": "musicLoopB", "type": "music", "path": "demo/music/demo-loop-b.ogg", "category": "music", "provenance": "exojs" },
+    {
+      "key": "musicJingleSuccess",
+      "type": "music",
+      "path": "demo/music/jingle-success.ogg",
+      "category": "music",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "key": "musicJingleFailure",
+      "type": "music",
+      "path": "demo/music/jingle-failure.ogg",
+      "category": "music",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "key": "musicJingleRetroA",
+      "type": "music",
+      "path": "demo/music/jingle-retro-a.ogg",
+      "category": "music",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "key": "musicJingleRetroB",
+      "type": "music",
+      "path": "demo/music/jingle-retro-b.ogg",
+      "category": "music",
+      "provenance": "kenney-music-jingles"
+    },
+
+    {
+      "key": "voiceCongratulations",
+      "type": "sound",
+      "path": "demo/voice/congratulations.ogg",
+      "category": "voice",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "key": "voiceMissionComplete",
+      "type": "sound",
+      "path": "demo/voice/mission-complete.ogg",
+      "category": "voice",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "key": "voiceObjectiveAchieved",
+      "type": "sound",
+      "path": "demo/voice/objective-achieved.ogg",
+      "category": "voice",
+      "provenance": "kenney-voiceover-pack"
+    },
+
+    {
+      "key": "impulseRoom001",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_001.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom002",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_002.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom003",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_003.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom004",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_004.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom005",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_005.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom006",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_006.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom007",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_007.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom008",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_008.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom009",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_009.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom010",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_010.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom011",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_011.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom012",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_012.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom013",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_013.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom014",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_014.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom015",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_015.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom016",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_016.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom017",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_017.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom018",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_018.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom019",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_019.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom020",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_020.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom021",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_021.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom022",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_022.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom023",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_023.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom024",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_024.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom025",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_025.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom026",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_026.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom027",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_027.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom028",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_028.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom029",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_029.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom030",
+      "type": "sound",
+      "path": "audio/ir/AK-SROOMS_030.wav",
+      "category": "impulseResponses",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+
+    { "key": "isometricLandscape", "type": "json", "path": "json/maps/isometric-landscape.tmj", "category": "maps", "provenance": "exojs" },
+    { "key": "driftFieldsMap", "type": "json", "path": "json/maps/drift-fields.tmj", "category": "maps", "provenance": "exojs" },
+    { "key": "harborPlazaMap", "type": "json", "path": "json/maps/harbor-plaza.tmj", "category": "maps", "provenance": "exojs" },
+    { "key": "harborWorldProject", "type": "json", "path": "json/maps/harbor-world.ldtk", "category": "maps", "provenance": "exojs" },
+    {
+      "key": "ownershipWorkshopMap",
+      "type": "json",
+      "path": "json/maps/ownership-workshop.tmj",
+      "category": "maps",
+      "provenance": "exojs"
+    },
+    { "key": "physicsRoomMap", "type": "json", "path": "json/maps/physics-room.tmj", "category": "maps", "provenance": "exojs" },
+
+    { "key": "videoDemoLoop", "type": "video", "path": "demo/video/demo-loop.webm", "category": "video", "provenance": "exojs" },
+    {
+      "key": "videoHighRes",
+      "type": "video",
+      "path": "demo/video/clips/high-res.mp4",
+      "category": "video",
+      "provenance": "blender-glass-half"
+    },
+    {
+      "key": "videoHighFps",
+      "type": "video",
+      "path": "demo/video/clips/high-fps.webm",
+      "category": "video",
+      "provenance": "blender-big-buck-bunny"
+    },
+
+    {
+      "key": "videoHdr10",
+      "type": "video",
+      "path": "demo/video/clips/hdr10.webm",
+      "category": "video",
+      "provenance": "blender-singularity",
+      "profile": "extended"
+    }
+  ],
+  "blocked": [
+    {
+      "path": "demo/sprites/buttons.png",
+      "reason": "Origin not recorded: the file predates the repository's asset provenance and matches no vendor pack."
+    },
+    { "path": "demo/sprites/buttons.json", "reason": "Atlas for the blocked demo/sprites/buttons.png." }
+  ]
+}
diff --git a/packages/exojs-demo-assets/manifest.json b/packages/exojs-demo-assets/manifest.json
new file mode 100644
index 000000000..46c159729
--- /dev/null
+++ b/packages/exojs-demo-assets/manifest.json
@@ -0,0 +1,3117 @@
+{
+  "schemaVersion": 1,
+  "package": "@codexo/exojs-demo-assets",
+  "version": "0.1.0",
+  "profiles": {
+    "standard": {
+      "files": 161,
+      "bytes": 18872156
+    },
+    "extended": {
+      "files": 1,
+      "bytes": 15436418
+    }
+  },
+  "entries": [
+    {
+      "key": "ship",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/ship-a.png",
+      "bytes": 3601,
+      "sha256": "d12532d8d6b36fe9d739475317dcc74f0d621810635766af3bda5d4fd5868c94",
+      "provenance": "exojs"
+    },
+    {
+      "key": "particleFlame",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/particle-flame.png",
+      "bytes": 54099,
+      "sha256": "92a70bcb90b1e21c57b2dae42843135703b2e988abee97433f84c3119723d144",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleSmoke",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/particle-smoke.png",
+      "bytes": 39737,
+      "sha256": "a71f8abcac64f8d73a94625cc9a10033dbeafa7eaea750560cba0daa73fe8752",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleStar",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/particle-star.png",
+      "bytes": 30613,
+      "sha256": "6485ac16c773663bd39346f3bedae04465ac14c661eb47cc5cfa935cdbf6c2ec",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleSpark",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/particle-spark.png",
+      "bytes": 79574,
+      "sha256": "90f322bebe5facea2f60afe88d98dd80a21479ed3212e605d61e88a896f3e1db",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "particleLight",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/particle-light.png",
+      "bytes": 93470,
+      "sha256": "caedcc5df5bcac4470244d2520d6a64b45b20c1ccf4d918da516c55e3fa365a6",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "key": "pixelWhite",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/pixel-white.png",
+      "bytes": 68,
+      "sha256": "5e3d382db4dd83d59aa5742793ad6b7903409e865c83bcbc54835049f043bc15",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "pixelBlack",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/pixel-black.png",
+      "bytes": 68,
+      "sha256": "431ced6916a2a21a156e38701afe55bbd7f88969fbbfc56d7fe099d47f265460",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "pixelTransparent",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/pixel-transparent.png",
+      "bytes": 68,
+      "sha256": "63ef318d96b5d0d0ceba6e04a4e622b1158335cdc67c49e27839132c6f655058",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "checkerboardTransparent",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/checkerboard-transparent.png",
+      "bytes": 106,
+      "sha256": "3d2f8d981dd0f62200a5069bb0ad26f6ceffd10ac456320510864bddd9864e1e",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "kenneyUv",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/kenney-uv.png",
+      "bytes": 8609,
+      "sha256": "0a525948c05d5b4936506033efe428e7b53221375a394e7b528670ae05c72186",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "key": "prototypeDark01",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/prototype-dark-01.png",
+      "bytes": 2774,
+      "sha256": "07e28d7a86396fa4f1d7c43040f8e57e2374f6fa35b02bc48e70f9ccd4041c1a",
+      "provenance": "kenney-prototype-textures"
+    },
+    {
+      "key": "prototypeLight01",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/prototype-light-01.png",
+      "bytes": 1338,
+      "sha256": "2e16ed21beacfe2f47f9d2e8a71cae2551d5e68701a80fead36c2e86cc7063e3",
+      "provenance": "kenney-prototype-textures"
+    },
+    {
+      "key": "prototypeGrid",
+      "type": "texture",
+      "category": "textures",
+      "profile": "standard",
+      "path": "demo/textures/prototype-grid.png",
+      "bytes": 2727,
+      "sha256": "72bb9b3cb2743de3f0eaba2188c931370085572e627168821310008f46dafccd",
+      "provenance": "kenney-prototype-textures"
+    },
+    {
+      "key": "alphaEdgeStraight",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/alpha/alpha-edge-straight.png",
+      "bytes": 1392,
+      "sha256": "29456f07c0e1e37c4e019a61e9b479775a746d29a5ef1a2ed3ea311b0ae58f0d",
+      "provenance": "exojs"
+    },
+    {
+      "key": "alphaGradientRings",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/alpha/alpha-gradient-rings.png",
+      "bytes": 64151,
+      "sha256": "fd8253b94d5d451c9ae92c5adc95b4b1c2a9b1081f5650d6eea53c6d253ff8f4",
+      "provenance": "exojs"
+    },
+    {
+      "key": "checker256",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/filtering/checker-256.png",
+      "bytes": 24976,
+      "sha256": "89c3836d91efafc6683c75ad5b1ba4c70dd8b76aec8dd1d332056c710ff43d2b",
+      "provenance": "exojs"
+    },
+    {
+      "key": "pixelGrid128",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/filtering/pixel-grid-128.png",
+      "bytes": 1149,
+      "sha256": "03596dfba23c1dbd223f593ca093eb80548d50e933b113c0289639f478af02d9",
+      "provenance": "exojs"
+    },
+    {
+      "key": "uvGrid256",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/filtering/uv-grid-256.png",
+      "bytes": 32164,
+      "sha256": "bc1cfefe6e5728cf097de8284cdbd384fe5006b9eb9bd3252fab5397f4b2a61e",
+      "provenance": "exojs"
+    },
+    {
+      "key": "srgbRamp",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/color/srgb-ramp.png",
+      "bytes": 633,
+      "sha256": "c6adad8495921088e22a849a14dda0ba621a72684055c987bbca1406d02be128",
+      "provenance": "exojs"
+    },
+    {
+      "key": "hueRamp",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/color/hue-ramp.png",
+      "bytes": 507,
+      "sha256": "04b21edfabf564edc84a5bfd60ae03b7475ef82cbfc725bf328669edb97f0edd",
+      "provenance": "exojs"
+    },
+    {
+      "key": "primaryRamp",
+      "type": "texture",
+      "category": "technical",
+      "profile": "standard",
+      "path": "technical/color/primary-ramp.png",
+      "bytes": 536,
+      "sha256": "7162d95998023c9a0d19e991a20ec0a301c42b451ff795ec979dd5eda8cd8e06",
+      "provenance": "exojs"
+    },
+    {
+      "key": "backgroundPlatformerClouds",
+      "type": "texture",
+      "category": "backgrounds",
+      "profile": "standard",
+      "path": "demo/backgrounds/platformer-clouds.png",
+      "bytes": 1800,
+      "sha256": "af584247f5df2ad50c0d53427ff34424038d0aed61f58d7861158e957166983e",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "backgroundPlatformerHills",
+      "type": "texture",
+      "category": "backgrounds",
+      "profile": "standard",
+      "path": "demo/backgrounds/platformer-hills.png",
+      "bytes": 1912,
+      "sha256": "4690d86430aae4b22f212173414213dca16637f1748a7fb7c75a21c5cf6cc4e4",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "backgroundCastles",
+      "type": "texture",
+      "category": "backgrounds",
+      "profile": "standard",
+      "path": "demo/backgrounds/castles.png",
+      "bytes": 14738,
+      "sha256": "debf2eb44ebc59eaa840275a2367ede555067f8cb450ecccdc441d3c345617aa",
+      "provenance": "kenney-background-elements-remastered"
+    },
+    {
+      "key": "backgroundForest",
+      "type": "texture",
+      "category": "backgrounds",
+      "profile": "standard",
+      "path": "demo/backgrounds/forest.png",
+      "bytes": 20205,
+      "sha256": "ad0c5883d876bca50fd83f73098df1e9c8a193d9de003c75ca84b56fe8809a69",
+      "provenance": "kenney-background-elements-remastered"
+    },
+    {
+      "key": "platformerBackgroundsImage",
+      "type": "texture",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-backgrounds.png",
+      "bytes": 20096,
+      "sha256": "ac8b1d9869a4e6eebdcd339af53e6f4be0a9b499242418d632bdeda85c3a9cae",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerBackgroundsAtlas",
+      "type": "json",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-backgrounds.json",
+      "bytes": 3011,
+      "sha256": "84bdf3cd81ffbf7391f034a1261580671259c99252878e823d917f3a601df7e0",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "platformerCharactersImage",
+      "type": "texture",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-characters.png",
+      "bytes": 69705,
+      "sha256": "f3d060ab294c262d51a8033074d1cd799506b7c536c941b4109ec35def178d3e",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerCharactersAtlas",
+      "type": "json",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-characters.json",
+      "bytes": 9387,
+      "sha256": "7ddb66209ea103ba928c6891bb3ee3ad94b052c8d8ccfeba9cab7bd6cea4eb65",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "platformerEnemiesImage",
+      "type": "texture",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-enemies.png",
+      "bytes": 36282,
+      "sha256": "2cab7bcb106db10c7ce261609ce5be9db80373920f8851e0a11bcd364e43f23e",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerEnemiesAtlas",
+      "type": "json",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-enemies.json",
+      "bytes": 11629,
+      "sha256": "e23e3b9f110bac83af29d4857be888c17675ddc441aa1f58f3b1ce00c456e43c",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "platformerTilesImage",
+      "type": "texture",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-tiles.png",
+      "bytes": 111650,
+      "sha256": "877e68a345fc8e668c913bb5798e98ecf0bc2784aa899bfb409769bf1feb50d7",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "platformerTilesAtlas",
+      "type": "json",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/platformer-tiles.json",
+      "bytes": 62598,
+      "sha256": "2a3d610e08802e4b52ec743a3da747026592c8196c1da59a73ba759a9db5137e",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "backgroundElementsImage",
+      "type": "texture",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/background-elements.png",
+      "bytes": 86748,
+      "sha256": "c9711e2d2d5089f2dbd6f6bd61de163c6419558e5b75e615597677dec6a495d0",
+      "provenance": "kenney-background-elements-remastered"
+    },
+    {
+      "key": "backgroundElementsAtlas",
+      "type": "json",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/background-elements.json",
+      "bytes": 13600,
+      "sha256": "8d52979f8d00eb630c90c36bd34d7fe1c1fd2f71e9671fe460aea3ecdc836208",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "mapPackImage",
+      "type": "texture",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/map-pack.png",
+      "bytes": 189463,
+      "sha256": "9c3d15242a9a844947bfef84164945b6ddcad449dc0e72e5af0e823792e4eca6",
+      "provenance": "kenney-map-pack"
+    },
+    {
+      "key": "mapPackAtlas",
+      "type": "json",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/spritesheets/kenney/map-pack.json",
+      "bytes": 36506,
+      "sha256": "396cd8334d25b66e2f7badf80b0aefd0ecdbcb0e335b3b08a8d2f9a765ed6884",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "key": "mapPackTilesheet",
+      "type": "texture",
+      "category": "spritesheets",
+      "profile": "standard",
+      "path": "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png",
+      "bytes": 204964,
+      "sha256": "07a9b51f66b6779723af2c1ce96861ef3344dd4b149a16d0555f912c248cd519",
+      "provenance": "kenney-map-pack"
+    },
+    {
+      "key": "genericInputPromptsImage",
+      "type": "texture",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/generic.png",
+      "bytes": 6965,
+      "sha256": "c5c22cf820724c1f394ffa56d13193496f99623592c4543dadc7b0330559381b",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "genericInputPromptsAtlas",
+      "type": "json",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/generic.json",
+      "bytes": 7430,
+      "sha256": "442f80e4bf8f28d30de0d85d69949667a7c210b7b40eb179124028b8757eb2cf",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "keyboardMouseInputPromptsImage",
+      "type": "texture",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/keyboard-mouse.png",
+      "bytes": 31036,
+      "sha256": "56fc0e5127487027fed5d937d8c5fd9ed782558c30b19dd7d0345c63d7907b0a",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "keyboardMouseInputPromptsAtlas",
+      "type": "json",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/keyboard-mouse.json",
+      "bytes": 50807,
+      "sha256": "8dcac7a7b065019365ec5839c869b894c9c93ade32976174f21c77973e009a8d",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "nintendoSwitchInputPromptsImage",
+      "type": "texture",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/nintendo-switch.png",
+      "bytes": 24328,
+      "sha256": "57e0efa28917993d1342d5ab1bb39489e19797ee598bc6e71fd995ecbd6eea09",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "nintendoSwitchInputPromptsAtlas",
+      "type": "json",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/nintendo-switch.json",
+      "bytes": 22603,
+      "sha256": "04f2998512552a6ade8c1ce6942130bed367c8fd3b9d16870b37c14cdfb2173a",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "playstationSeriesInputPromptsImage",
+      "type": "texture",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/playstation-series.png",
+      "bytes": 30398,
+      "sha256": "aac8d2a7e08e7e0b74c7d712e53cc0916c55999ddb4894910a05e5f467f636cc",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "playstationSeriesInputPromptsAtlas",
+      "type": "json",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/playstation-series.json",
+      "bytes": 27995,
+      "sha256": "f0d4dd69a35044b64df0b74e4de22fcce7179b449fd437285f6299c3737b0ae0",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "xboxSeriesInputPromptsImage",
+      "type": "texture",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/xbox-series.png",
+      "bytes": 21805,
+      "sha256": "bd4919042f34162688c2e600e9d71dc4a500167ade2cd2bc07e97e79ba3e849c",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "xboxSeriesInputPromptsAtlas",
+      "type": "json",
+      "category": "inputPrompts",
+      "profile": "standard",
+      "path": "demo/input-prompts/xbox-series.json",
+      "bytes": 19743,
+      "sha256": "b6530d0e003d319c5594f9c9d0c04559d9a723891ac21097d0257ab652a278af",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "key": "iconPlay",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/play.svg",
+      "bytes": 125,
+      "sha256": "ecd755ec36924726b8ff3f1f8c2641d1b63e57a3e4a3e46a085dec08c559089c",
+      "provenance": "exojs"
+    },
+    {
+      "key": "iconPause",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/pause.svg",
+      "bytes": 190,
+      "sha256": "2a0741e0835c65b6726f81d949367c9bed8c4fac0021686a1e30da494e6de35b",
+      "provenance": "exojs"
+    },
+    {
+      "key": "iconReset",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/reset.svg",
+      "bytes": 242,
+      "sha256": "7acc3ba4f9c72646e61e05a91fffa82c34baa6f7afb5a5e42484bfc54e9e0d46",
+      "provenance": "exojs"
+    },
+    {
+      "key": "iconArrowRight",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/arrow-right.svg",
+      "bytes": 217,
+      "sha256": "0b62cceb3274f3f6719134744c48e3326d501b547f07ffe1fc6096cb589c413e",
+      "provenance": "exojs"
+    },
+    {
+      "key": "iconSparkle",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/sparkle.svg",
+      "bytes": 162,
+      "sha256": "ededb2d5d03156d9a8cf21cee2bdd7049429114c9df0dfb1ecd04325f1cf3d03",
+      "provenance": "exojs"
+    },
+    {
+      "key": "iconAudioWave",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/audio-wave.svg",
+      "bytes": 341,
+      "sha256": "a9458bd12f44f7949f35027aab63bf8cd33a248620bd589ce02ce341b0a8ae7b",
+      "provenance": "exojs"
+    },
+    {
+      "key": "iconImagePlaceholder",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/image-placeholder.svg",
+      "bytes": 322,
+      "sha256": "60de556b566469e913e5f0095a08e4913826d795d913d27f82f0299a6bf27ad8",
+      "provenance": "exojs"
+    },
+    {
+      "key": "iconRuneMark",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "demo/svg/rune-mark.svg",
+      "bytes": 182,
+      "sha256": "9b1fd7542b8b9361272d820d34423c8a7c9733fc27341e3e22087339580de772",
+      "provenance": "exojs"
+    },
+    {
+      "key": "exoWordmark",
+      "type": "svg",
+      "category": "icons",
+      "profile": "standard",
+      "path": "svg/exo-wordmark.svg",
+      "bytes": 1392,
+      "sha256": "581d0b9611ff45503d889a4c223ffbefff9ff1dc680b011b9d085e60cec3b146",
+      "provenance": "exojs"
+    },
+    {
+      "key": "cursorArrow",
+      "type": "svg",
+      "category": "cursors",
+      "profile": "standard",
+      "path": "demo/cursors/arrow.svg",
+      "bytes": 397,
+      "sha256": "142d58fdbc33483829d5bf88691ec21ffd54dc65f5501460d13f2c5196cfd501",
+      "provenance": "kenney-cursor-pack"
+    },
+    {
+      "key": "cursorPointer",
+      "type": "svg",
+      "category": "cursors",
+      "profile": "standard",
+      "path": "demo/cursors/pointer.svg",
+      "bytes": 417,
+      "sha256": "44b739c5a1699376985288920e5336cf9d1f1ce65b0b4e9d8a42aad7679c7b59",
+      "provenance": "kenney-cursor-pack"
+    },
+    {
+      "key": "cursorHand",
+      "type": "svg",
+      "category": "cursors",
+      "profile": "standard",
+      "path": "demo/cursors/hand.svg",
+      "bytes": 550,
+      "sha256": "c5a0d112b3c8dc66426439e85667375a3a38d82af3ce80414a1fc27b3461ad06",
+      "provenance": "kenney-cursor-pack"
+    },
+    {
+      "key": "cursorBusy",
+      "type": "svg",
+      "category": "cursors",
+      "profile": "standard",
+      "path": "demo/cursors/busy.svg",
+      "bytes": 947,
+      "sha256": "88a140e7828cca498466c190730755d3e03728b5081c19857609823b4be7f5a8",
+      "provenance": "kenney-cursor-pack"
+    },
+    {
+      "key": "cursorCross",
+      "type": "svg",
+      "category": "cursors",
+      "profile": "standard",
+      "path": "demo/cursors/cross.svg",
+      "bytes": 552,
+      "sha256": "f539e315651106a9303a5d7e3e3a39002ff41d195de83cd0bfd4659a46a2c5b1",
+      "provenance": "kenney-cursor-pack"
+    },
+    {
+      "key": "fontKenneyFuture",
+      "type": "font",
+      "category": "fonts",
+      "profile": "standard",
+      "path": "demo/fonts/Kenney Future.ttf",
+      "bytes": 34116,
+      "sha256": "bd36e536cc26672bdba652547494a4877f2a446329bb7141840d9cd73bceffc2",
+      "provenance": "kenney-fonts",
+      "options": {
+        "family": "Kenney Future"
+      }
+    },
+    {
+      "key": "fontKenneyPixel",
+      "type": "font",
+      "category": "fonts",
+      "profile": "standard",
+      "path": "demo/fonts/Kenney Pixel.ttf",
+      "bytes": 28276,
+      "sha256": "174093d8b71aa808d7ffff70529c9087274515493add48134528c9136f621e92",
+      "provenance": "kenney-fonts",
+      "options": {
+        "family": "Kenney Pixel"
+      }
+    },
+    {
+      "key": "fontKenneyMini",
+      "type": "font",
+      "category": "fonts",
+      "profile": "standard",
+      "path": "demo/fonts/Kenney Mini.ttf",
+      "bytes": 26156,
+      "sha256": "5432343406838b5d14bbefc1d3c0b8940696bb811be93fa04d67761090d006a3",
+      "provenance": "kenney-fonts",
+      "options": {
+        "family": "Kenney Mini"
+      }
+    },
+    {
+      "key": "fontKenneyMiniSquareMono",
+      "type": "font",
+      "category": "fonts",
+      "profile": "standard",
+      "path": "demo/fonts/Kenney Mini Square Mono.ttf",
+      "bytes": 24612,
+      "sha256": "2b56b47d5d4525f6e2665ec137b5bd29ced7105584147d11942b3c07110a1545",
+      "provenance": "kenney-fonts",
+      "options": {
+        "family": "Kenney Mini Square Mono"
+      }
+    },
+    {
+      "key": "fontKenneyBlocksFnt",
+      "type": "bmFont",
+      "category": "fonts",
+      "profile": "standard",
+      "path": "demo/fonts/kenney-blocks-32.fnt",
+      "bytes": 11037,
+      "sha256": "a64d887a1131afedb2eb7965fa58e0715581dc22925f6c6f10b4e50608a937a2",
+      "provenance": "kenney-blocks-bitmap-font",
+      "transitive": [
+        "demo/fonts/kenney-blocks-32.png"
+      ]
+    },
+    {
+      "key": "fontKenneyBlocksPng",
+      "type": "texture",
+      "category": "fonts",
+      "profile": "standard",
+      "path": "demo/fonts/kenney-blocks-32.png",
+      "bytes": 2598,
+      "sha256": "0078edbb3f6966d40099170e9674b6a0f1a0d447b4b567c61dbc8ab2a5c111be",
+      "provenance": "kenney-blocks-bitmap-font"
+    },
+    {
+      "key": "soundUiClick",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/ui-click.ogg",
+      "bytes": 4876,
+      "sha256": "ccfb7fa0cccdd9faec0eb16033c732b1e308d139d80f799161495d58f7adcdb9",
+      "provenance": "kenney-interface-sounds"
+    },
+    {
+      "key": "soundUiConfirm",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/ui-confirm.ogg",
+      "bytes": 8968,
+      "sha256": "063564703b6094d70718a3e787a55cc9141611e4ecd6b6637f8828f79b4a8c3a",
+      "provenance": "kenney-interface-sounds"
+    },
+    {
+      "key": "soundUiBong",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/ui-bong.ogg",
+      "bytes": 4848,
+      "sha256": "d21d0f0b782445db579d11e2506b24cd1ac9d664ee33aeaf807761aa7b6fd710",
+      "provenance": "kenney-interface-sounds"
+    },
+    {
+      "key": "soundBack",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/back.ogg",
+      "bytes": 6997,
+      "sha256": "07db973f79f6ae0f2edc34561e7592e24d0577455919fb602cb8ecc0da991dcf",
+      "provenance": "kenney-interface-sounds"
+    },
+    {
+      "key": "soundClickAlt",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/click-alt.ogg",
+      "bytes": 10945,
+      "sha256": "c5faa31bbf4a921332cdc9e7d7f7d930ca73fc8cc96e35ccc70ed2de975b26e5",
+      "provenance": "kenney-ui-pack"
+    },
+    {
+      "key": "soundSwitch",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/switch.ogg",
+      "bytes": 9433,
+      "sha256": "1a4c90fed704b4f4b36d58f481117cfac5cdc25279a9af97d4765b71ff21ed48",
+      "provenance": "kenney-ui-pack"
+    },
+    {
+      "key": "soundImpactLight",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/impact-light.ogg",
+      "bytes": 5827,
+      "sha256": "f0e982611e97512fee5f777986b67e8b435434b601f94992ec044f7e89fb5acb",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactHeavy",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/impact-heavy.ogg",
+      "bytes": 6110,
+      "sha256": "e07045693e4a2b3d165c424e3dab4c781d9ff8880a386880ac89a51315d7f831",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactWood",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/impact-wood.ogg",
+      "bytes": 6575,
+      "sha256": "1723a9fd25103ed41af06054814e84e65f4a772bac86ab2dc927da93d9592ff5",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactBellHeavy",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "audio/impactBell_heavy_000.ogg",
+      "bytes": 13915,
+      "sha256": "94b8bb5f2d43ab65e4bcc32b28562416e9bc2c51d9fd4be1e333660ee52f977f",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactGlassHeavy",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "audio/impactGlass_heavy_000.ogg",
+      "bytes": 7403,
+      "sha256": "b44b39a940e8948e74b9bd3776bff980df43cf220abdaf0d467dc4c43c0244a5",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactWoodHeavy",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "audio/impactWood_heavy_000.ogg",
+      "bytes": 6233,
+      "sha256": "15ff82332f342c30e469215539e1cc57e11b221aa2cf7e11e811d313a9927f3d",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundImpactMetalHeavy",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "audio/impactMetal_heavy_000.ogg",
+      "bytes": 6110,
+      "sha256": "e07045693e4a2b3d165c424e3dab4c781d9ff8880a386880ac89a51315d7f831",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "key": "soundJump",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/jump.ogg",
+      "bytes": 5926,
+      "sha256": "7a0e42879c60350c6866976e8f6013943d9cb78a5ff1d126107ae3322566ee8f",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "soundCoin",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/coin.ogg",
+      "bytes": 5572,
+      "sha256": "38c897c7a0f056e8cda892ca4a31639e1397ef9c70490351ecb0c4df0cc95e45",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "soundHurt",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/hurt.ogg",
+      "bytes": 5804,
+      "sha256": "ee126f78cfd70e665c37d7afe7e1dc0fa84d6b2ab25ce27d797738d54d082ec6",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "key": "soundPowerUp",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/power-up.ogg",
+      "bytes": 9011,
+      "sha256": "8c361b624b560c0bc30ea3063b71212bc30caebf425c9df2481c13b25561485c",
+      "provenance": "kenney-digital-audio"
+    },
+    {
+      "key": "soundLaser",
+      "type": "sound",
+      "category": "sound",
+      "profile": "standard",
+      "path": "demo/sound/laser.ogg",
+      "bytes": 9315,
+      "sha256": "0bf468769b48a834dc1c6e38e457f2c71159b010225a9aedf84316795e8cc3e5",
+      "provenance": "kenney-digital-audio"
+    },
+    {
+      "key": "uiSoundSprite",
+      "type": "sound",
+      "category": "soundSprites",
+      "profile": "standard",
+      "path": "demo/sound-sprites/ui/ui.ogg",
+      "bytes": 17403,
+      "sha256": "28c1ddfcd2d4fb6555494b5cb59d3d1a9ad708c95e38378780c32e16cf03c1e0",
+      "provenance": "kenney-sound-sprites",
+      "options": {
+        "sprites": {
+          "$path": "demo/sound-sprites/ui/ui.json"
+        }
+      },
+      "transitive": [
+        "demo/sound-sprites/ui/ui.json"
+      ]
+    },
+    {
+      "key": "impactsSoundSprite",
+      "type": "sound",
+      "category": "soundSprites",
+      "profile": "standard",
+      "path": "demo/sound-sprites/impacts/impacts.ogg",
+      "bytes": 10916,
+      "sha256": "67c7fa99b0962866213c6a5706f9a5c87ecaf6d85543ed5c1aae313d7c2f6218",
+      "provenance": "kenney-sound-sprites",
+      "options": {
+        "sprites": {
+          "$path": "demo/sound-sprites/impacts/impacts.json"
+        }
+      },
+      "transitive": [
+        "demo/sound-sprites/impacts/impacts.json"
+      ]
+    },
+    {
+      "key": "digitalSoundSprite",
+      "type": "sound",
+      "category": "soundSprites",
+      "profile": "standard",
+      "path": "demo/sound-sprites/digital/digital.ogg",
+      "bytes": 23134,
+      "sha256": "054a96dd240ba182343de82b4cb1ab2740edffda5c837ede30b17a4a6d7e4ba5",
+      "provenance": "kenney-sound-sprites",
+      "options": {
+        "sprites": {
+          "$path": "demo/sound-sprites/digital/digital.json"
+        }
+      },
+      "transitive": [
+        "demo/sound-sprites/digital/digital.json"
+      ]
+    },
+    {
+      "key": "musicLoopMain",
+      "type": "music",
+      "category": "music",
+      "profile": "standard",
+      "path": "demo/music/demo-loop-main.ogg",
+      "bytes": 11871,
+      "sha256": "b24db39c00a8aea79fa5f953c8c34b0fc6ffc5519584b1559c1ef6b077f8e470",
+      "provenance": "exojs"
+    },
+    {
+      "key": "musicLoopA",
+      "type": "music",
+      "category": "music",
+      "profile": "standard",
+      "path": "demo/music/demo-loop-a.ogg",
+      "bytes": 16238,
+      "sha256": "f98845f077a58cbd20400036b78efcc39017b8567997bdd13da83da2182f55b2",
+      "provenance": "exojs"
+    },
+    {
+      "key": "musicLoopB",
+      "type": "music",
+      "category": "music",
+      "profile": "standard",
+      "path": "demo/music/demo-loop-b.ogg",
+      "bytes": 13430,
+      "sha256": "acc9e28bb9dd3cef9833d2a2f8f1e2996aa84166a9450508ec90fadf097bc9bc",
+      "provenance": "exojs"
+    },
+    {
+      "key": "musicJingleSuccess",
+      "type": "music",
+      "category": "music",
+      "profile": "standard",
+      "path": "demo/music/jingle-success.ogg",
+      "bytes": 39948,
+      "sha256": "1010c9b566d6c090ff03a4aaaf7439e26eb4cc4f20373800d0b7e6a9057b795d",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "key": "musicJingleFailure",
+      "type": "music",
+      "category": "music",
+      "profile": "standard",
+      "path": "demo/music/jingle-failure.ogg",
+      "bytes": 8650,
+      "sha256": "e23d8c9e971a4e34484bc834a3ec1d560811ec6f5edd5efa2c61e583c18c504a",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "key": "musicJingleRetroA",
+      "type": "music",
+      "category": "music",
+      "profile": "standard",
+      "path": "demo/music/jingle-retro-a.ogg",
+      "bytes": 10382,
+      "sha256": "b442ade3308a2bbda4b8c572c86f9f1071c7bdbcfb1e6f915d35c605b61bd475",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "key": "musicJingleRetroB",
+      "type": "music",
+      "category": "music",
+      "profile": "standard",
+      "path": "demo/music/jingle-retro-b.ogg",
+      "bytes": 15691,
+      "sha256": "8799eb726d784ae0aa1a9df80648a873ac60015bc00aea12c8e2dd1431a2bd7d",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "key": "voiceCongratulations",
+      "type": "sound",
+      "category": "voice",
+      "profile": "standard",
+      "path": "demo/voice/congratulations.ogg",
+      "bytes": 13609,
+      "sha256": "a2a09925af456d0b20c017cf57d217a18ccf4d6c95beed245acc54aa63c92c98",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "key": "voiceMissionComplete",
+      "type": "sound",
+      "category": "voice",
+      "profile": "standard",
+      "path": "demo/voice/mission-complete.ogg",
+      "bytes": 11493,
+      "sha256": "e6afa79a7e648291280d57454d7d09091c5a5af8b5865c9087bac233c567adb0",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "key": "voiceObjectiveAchieved",
+      "type": "sound",
+      "category": "voice",
+      "profile": "standard",
+      "path": "demo/voice/objective-achieved.ogg",
+      "bytes": 12594,
+      "sha256": "4c3f12a825d6f656c54aff93af25e9d6b63287a47821865a20c7ca638776a9c4",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "key": "impulseRoom001",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_001.wav",
+      "bytes": 83652,
+      "sha256": "4ff0c3ae675ec099e3d8b8c1f6e3e2d216a6cd3228ac0119612e13657d8f958b",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom002",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_002.wav",
+      "bytes": 7210,
+      "sha256": "bfb8b703b699dde9d72f1899bbec831250fb83bfc6094d87cb5a1e023b92e240",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom003",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_003.wav",
+      "bytes": 7210,
+      "sha256": "32d0f350c8944c4ca4a0ea53498a434029fa7ff41743402c0be9c119bd7bd340",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom004",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_004.wav",
+      "bytes": 108586,
+      "sha256": "43aba7e31cd33f3166da74db230b5e7428e9d9edbe01effe5e7cec51370586cd",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom005",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_005.wav",
+      "bytes": 108586,
+      "sha256": "43aba7e31cd33f3166da74db230b5e7428e9d9edbe01effe5e7cec51370586cd",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom006",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_006.wav",
+      "bytes": 47258,
+      "sha256": "411a39bf788b66392ae292a91eb6f63790934bef58b44a130ce29e7684a70236",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom007",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_007.wav",
+      "bytes": 123826,
+      "sha256": "02553a05de100688ba4c22a5395cb93e02197e6962982ac90e2827f085e8558e",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom008",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_008.wav",
+      "bytes": 123826,
+      "sha256": "640eee9293b77b52ec9e396205f482d2232af200daab831d8aa1388244b555cf",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom009",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_009.wav",
+      "bytes": 17146,
+      "sha256": "ba289c4d1ab303fc5bf244991f9d2e93143b9100623c7ce4356b42cf34d97348",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom010",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_010.wav",
+      "bytes": 10058,
+      "sha256": "08e7ea14e2774d23229ca011e19dd686ae87c24112a74d204156ad207d3ab892",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom011",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_011.wav",
+      "bytes": 4218,
+      "sha256": "2b07506e3c40f0076d849a9943016a76cbedc669669ea90d0af77814b073157e",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom012",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_012.wav",
+      "bytes": 2466,
+      "sha256": "9f7d54526e1aaa0122d3ebb50a369b87b299adba18ea30492945cea9b75a827e",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom013",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_013.wav",
+      "bytes": 1074,
+      "sha256": "befa9c415690abd2d3d11e13bd0005eda304ec1e21db38610d8a999b5bfe530f",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom014",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_014.wav",
+      "bytes": 530,
+      "sha256": "6d55f84164d9e888ade58ca145e015d59a3b25c5c07dc49e35f2ac50418f68a2",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom015",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_015.wav",
+      "bytes": 83226,
+      "sha256": "ce0cf66b4fc6dcb0311541face0b51ca0abdfc48b6dd824664ce410f90b2bc61",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom016",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_016.wav",
+      "bytes": 209474,
+      "sha256": "0572ddde23bccbb02a006f0865397252befd14664f29586921903cc35e5a9a89",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom017",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_017.wav",
+      "bytes": 194130,
+      "sha256": "0500824c7d906bbb1d7d3784ac63c66aab1930de18b826953cd69166590adc14",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom018",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_018.wav",
+      "bytes": 55370,
+      "sha256": "10e34f2c8b59479c94b50e2dcc8c3ae2987e732469f3637a126e82d8443ca598",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom019",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_019.wav",
+      "bytes": 18194,
+      "sha256": "687aff7c715da5dbbdf81ccad2bbe0dd51112b4c372817465f7b0fb32dc22827",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom020",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_020.wav",
+      "bytes": 33802,
+      "sha256": "f704d8cc9aa186b82bfada3dbfe23a8366503fac0a66bb154abacaf2360029aa",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom021",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_021.wav",
+      "bytes": 11834,
+      "sha256": "b6f0ff45f494504d69eba3cb4184b3486b0e73ab19bc012bf9c1d4f5c2895197",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom022",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_022.wav",
+      "bytes": 5570,
+      "sha256": "3f1d3676038d67951d889ae5463543c8dbe5a874317a324994d439d6b78c1685",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom023",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_023.wav",
+      "bytes": 1314,
+      "sha256": "4651d31ed8001db2e62b74c3c0b85178710a446af2bc82f509d57f1d80587d77",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom024",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_024.wav",
+      "bytes": 79898,
+      "sha256": "76a55db7f8d676e94de1f269d5eda77403ff68a68b791283d240d559dfc686ef",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom025",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_025.wav",
+      "bytes": 80898,
+      "sha256": "287bd43abae9621887dee6d81d69c1da0d9bc745bf459354ce007ff525cd5a9d",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom026",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_026.wav",
+      "bytes": 79914,
+      "sha256": "e8c4d247c341f263a72c35165ba0cbf76a7372d13e1ea03bb38852a5ea82bc0d",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom027",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_027.wav",
+      "bytes": 79914,
+      "sha256": "3f11e27fd11354ca5138a49224aab580f55688afa0d25b7bfb6ec222f8bbf8df",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom028",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_028.wav",
+      "bytes": 124866,
+      "sha256": "dbbe64b9cd39ab806b3a3c4020367e69c7ca83c5beb180577c56b449ced4657d",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom029",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_029.wav",
+      "bytes": 109058,
+      "sha256": "eafdfd47bc250dbcc513d5d60d4b44737894a1ff73eabfd5b58d260107730fd0",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "impulseRoom030",
+      "type": "sound",
+      "category": "impulseResponses",
+      "profile": "standard",
+      "path": "audio/ir/AK-SROOMS_030.wav",
+      "bytes": 94298,
+      "sha256": "a8f8325a95b54b03adb86c482279f3c9bddf7067de3b2ec88fb3c6a1297e47f8",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "key": "isometricLandscape",
+      "type": "json",
+      "category": "maps",
+      "profile": "standard",
+      "path": "json/maps/isometric-landscape.tmj",
+      "bytes": 2860,
+      "sha256": "13b1ba91d5eae0104d73ee0c36cd7fd6a4cabb6b81f16800bebdda4ca48c7bad",
+      "provenance": "exojs",
+      "transitive": [
+        "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_020.png",
+        "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_000.png",
+        "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_001.png",
+        "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_005.png",
+        "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_030.png",
+        "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_040.png"
+      ]
+    },
+    {
+      "key": "driftFieldsMap",
+      "type": "json",
+      "category": "maps",
+      "profile": "standard",
+      "path": "json/maps/drift-fields.tmj",
+      "bytes": 10563,
+      "sha256": "d12efc58f2e42ac225e9de39c984995c2e7d8406d78eb32701a6a0c74798fd46",
+      "provenance": "exojs",
+      "transitive": [
+        "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png"
+      ]
+    },
+    {
+      "key": "harborPlazaMap",
+      "type": "json",
+      "category": "maps",
+      "profile": "standard",
+      "path": "json/maps/harbor-plaza.tmj",
+      "bytes": 2727,
+      "sha256": "debe27d58dfe5f0f4b0f28eb59121fc8aa23a14a5a3d8765a7e9c5ee6ee8a7a9",
+      "provenance": "exojs",
+      "transitive": [
+        "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png"
+      ]
+    },
+    {
+      "key": "harborWorldProject",
+      "type": "json",
+      "category": "maps",
+      "profile": "standard",
+      "path": "json/maps/harbor-world.ldtk",
+      "bytes": 9490,
+      "sha256": "4afe2b04a432762751c5e51a6848daebdb9b46333f2d620910a4b29300d008f5",
+      "provenance": "exojs",
+      "transitive": [
+        "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png"
+      ]
+    },
+    {
+      "key": "ownershipWorkshopMap",
+      "type": "json",
+      "category": "maps",
+      "profile": "standard",
+      "path": "json/maps/ownership-workshop.tmj",
+      "bytes": 1380,
+      "sha256": "7f5a0f5fd9bd8733ade9f5b78523345481265a3d4d2ec020a8041c52cd9fac39",
+      "provenance": "exojs",
+      "transitive": [
+        "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png"
+      ]
+    },
+    {
+      "key": "physicsRoomMap",
+      "type": "json",
+      "category": "maps",
+      "profile": "standard",
+      "path": "json/maps/physics-room.tmj",
+      "bytes": 1927,
+      "sha256": "3f9d2391baa9120edc9dea63e7797102c0fc0a026b621a9852a8bd98cc6a3b67",
+      "provenance": "exojs",
+      "transitive": [
+        "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png"
+      ]
+    },
+    {
+      "key": "videoDemoLoop",
+      "type": "video",
+      "category": "video",
+      "profile": "standard",
+      "path": "demo/video/demo-loop.webm",
+      "bytes": 9428,
+      "sha256": "832736215c4c12572396899ee01c9679c476633f0bde4527865fb1727b85bf6d",
+      "provenance": "exojs"
+    },
+    {
+      "key": "videoHighRes",
+      "type": "video",
+      "category": "video",
+      "profile": "standard",
+      "path": "demo/video/clips/high-res.mp4",
+      "bytes": 4237758,
+      "sha256": "4fd15af94bcc04c10d8aa3b285d497451823f017be0366bc01d66a05cccb1e1c",
+      "provenance": "blender-glass-half",
+      "media": {
+        "container": "mp4",
+        "video": {
+          "codec": "h264",
+          "profile": "High",
+          "width": 3840,
+          "height": 2160,
+          "frameRate": "24/1",
+          "pixelFormat": "yuv420p",
+          "bitDepth": 8,
+          "colorRange": "tv",
+          "colorPrimaries": "bt709",
+          "colorTransfer": "bt709",
+          "colorMatrix": "bt709"
+        },
+        "audio": {
+          "codec": "aac",
+          "sampleRate": 48000,
+          "channels": 2
+        },
+        "durationSeconds": 12.188313,
+        "dynamicRange": "SDR"
+      }
+    },
+    {
+      "key": "videoHighFps",
+      "type": "video",
+      "category": "video",
+      "profile": "standard",
+      "path": "demo/video/clips/high-fps.webm",
+      "bytes": 10599067,
+      "sha256": "f1589c92fca1c96971f58ee608742b5e56936e87506427a560a773c4c9c5de87",
+      "provenance": "blender-big-buck-bunny",
+      "media": {
+        "container": "webm",
+        "video": {
+          "codec": "vp9",
+          "profile": "Profile 0",
+          "width": 1920,
+          "height": 1080,
+          "frameRate": "60/1",
+          "pixelFormat": "yuv420p",
+          "bitDepth": 8,
+          "colorRange": "tv",
+          "colorPrimaries": null,
+          "colorTransfer": null,
+          "colorMatrix": null
+        },
+        "audio": {
+          "codec": "opus",
+          "sampleRate": 48000,
+          "channels": 2
+        },
+        "durationSeconds": 12.141,
+        "dynamicRange": "SDR (colour primaries, transfer and matrix are not tagged in the stream)"
+      }
+    },
+    {
+      "key": "videoHdr10",
+      "type": "video",
+      "category": "video",
+      "profile": "extended",
+      "path": "demo/video/clips/hdr10.webm",
+      "bytes": 15436418,
+      "sha256": "2ee7e1ca88735107a4a801803d020f3eb25d06a54081d6e4f6326571908195e7",
+      "provenance": "blender-singularity",
+      "media": {
+        "container": "webm",
+        "video": {
+          "codec": "av1",
+          "profile": "Main",
+          "width": 3840,
+          "height": 1608,
+          "frameRate": "24/1",
+          "pixelFormat": "yuv420p10le",
+          "bitDepth": 10,
+          "colorRange": "tv",
+          "colorPrimaries": "bt2020",
+          "colorTransfer": "smpte2084",
+          "colorMatrix": "bt2020nc",
+          "masteringDisplay": {
+            "redX": "17/25",
+            "redY": "8/25",
+            "greenX": "828/3125",
+            "greenY": "69/100",
+            "blueX": "3/20",
+            "blueY": "3/50",
+            "whitePointX": "3127/10000",
+            "whitePointY": "329/1000",
+            "minLuminance": "1/100",
+            "maxLuminance": "1000/1"
+          },
+          "contentLightLevel": {
+            "maxContent": 1000,
+            "maxAverage": 300
+          }
+        },
+        "audio": {
+          "codec": "opus",
+          "sampleRate": 48000,
+          "channels": 2
+        },
+        "durationSeconds": 8.018,
+        "dynamicRange": "HDR10 metadata (PQ, BT.2020); display output is not verified by this metadata"
+      }
+    }
+  ],
+  "files": [
+    {
+      "path": "audio/impactBell_heavy_000.ogg",
+      "bytes": 13915,
+      "sha256": "94b8bb5f2d43ab65e4bcc32b28562416e9bc2c51d9fd4be1e333660ee52f977f",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds",
+      "upstream": "demo/vendor/kenney/impact-sounds/Audio/impactBell_heavy_000.ogg"
+    },
+    {
+      "path": "audio/impactGlass_heavy_000.ogg",
+      "bytes": 7403,
+      "sha256": "b44b39a940e8948e74b9bd3776bff980df43cf220abdaf0d467dc4c43c0244a5",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds",
+      "upstream": "demo/vendor/kenney/impact-sounds/Audio/impactGlass_heavy_000.ogg"
+    },
+    {
+      "path": "audio/impactMetal_heavy_000.ogg",
+      "bytes": 6110,
+      "sha256": "e07045693e4a2b3d165c424e3dab4c781d9ff8880a386880ac89a51315d7f831",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds",
+      "upstream": "demo/vendor/kenney/impact-sounds/Audio/impactMetal_heavy_000.ogg"
+    },
+    {
+      "path": "audio/impactWood_heavy_000.ogg",
+      "bytes": 6233,
+      "sha256": "15ff82332f342c30e469215539e1cc57e11b221aa2cf7e11e811d313a9927f3d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds",
+      "upstream": "demo/vendor/kenney/impact-sounds/Audio/impactWood_heavy_000.ogg"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_001.wav",
+      "bytes": 83652,
+      "sha256": "4ff0c3ae675ec099e3d8b8c1f6e3e2d216a6cd3228ac0119612e13657d8f958b",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_002.wav",
+      "bytes": 7210,
+      "sha256": "bfb8b703b699dde9d72f1899bbec831250fb83bfc6094d87cb5a1e023b92e240",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_003.wav",
+      "bytes": 7210,
+      "sha256": "32d0f350c8944c4ca4a0ea53498a434029fa7ff41743402c0be9c119bd7bd340",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_004.wav",
+      "bytes": 108586,
+      "sha256": "43aba7e31cd33f3166da74db230b5e7428e9d9edbe01effe5e7cec51370586cd",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_005.wav",
+      "bytes": 108586,
+      "sha256": "43aba7e31cd33f3166da74db230b5e7428e9d9edbe01effe5e7cec51370586cd",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_006.wav",
+      "bytes": 47258,
+      "sha256": "411a39bf788b66392ae292a91eb6f63790934bef58b44a130ce29e7684a70236",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_007.wav",
+      "bytes": 123826,
+      "sha256": "02553a05de100688ba4c22a5395cb93e02197e6962982ac90e2827f085e8558e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_008.wav",
+      "bytes": 123826,
+      "sha256": "640eee9293b77b52ec9e396205f482d2232af200daab831d8aa1388244b555cf",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_009.wav",
+      "bytes": 17146,
+      "sha256": "ba289c4d1ab303fc5bf244991f9d2e93143b9100623c7ce4356b42cf34d97348",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_010.wav",
+      "bytes": 10058,
+      "sha256": "08e7ea14e2774d23229ca011e19dd686ae87c24112a74d204156ad207d3ab892",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_011.wav",
+      "bytes": 4218,
+      "sha256": "2b07506e3c40f0076d849a9943016a76cbedc669669ea90d0af77814b073157e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_012.wav",
+      "bytes": 2466,
+      "sha256": "9f7d54526e1aaa0122d3ebb50a369b87b299adba18ea30492945cea9b75a827e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_013.wav",
+      "bytes": 1074,
+      "sha256": "befa9c415690abd2d3d11e13bd0005eda304ec1e21db38610d8a999b5bfe530f",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_014.wav",
+      "bytes": 530,
+      "sha256": "6d55f84164d9e888ade58ca145e015d59a3b25c5c07dc49e35f2ac50418f68a2",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_015.wav",
+      "bytes": 83226,
+      "sha256": "ce0cf66b4fc6dcb0311541face0b51ca0abdfc48b6dd824664ce410f90b2bc61",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_016.wav",
+      "bytes": 209474,
+      "sha256": "0572ddde23bccbb02a006f0865397252befd14664f29586921903cc35e5a9a89",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_017.wav",
+      "bytes": 194130,
+      "sha256": "0500824c7d906bbb1d7d3784ac63c66aab1930de18b826953cd69166590adc14",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_018.wav",
+      "bytes": 55370,
+      "sha256": "10e34f2c8b59479c94b50e2dcc8c3ae2987e732469f3637a126e82d8443ca598",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_019.wav",
+      "bytes": 18194,
+      "sha256": "687aff7c715da5dbbdf81ccad2bbe0dd51112b4c372817465f7b0fb32dc22827",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_020.wav",
+      "bytes": 33802,
+      "sha256": "f704d8cc9aa186b82bfada3dbfe23a8366503fac0a66bb154abacaf2360029aa",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_021.wav",
+      "bytes": 11834,
+      "sha256": "b6f0ff45f494504d69eba3cb4184b3486b0e73ab19bc012bf9c1d4f5c2895197",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_022.wav",
+      "bytes": 5570,
+      "sha256": "3f1d3676038d67951d889ae5463543c8dbe5a874317a324994d439d6b78c1685",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_023.wav",
+      "bytes": 1314,
+      "sha256": "4651d31ed8001db2e62b74c3c0b85178710a446af2bc82f509d57f1d80587d77",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_024.wav",
+      "bytes": 79898,
+      "sha256": "76a55db7f8d676e94de1f269d5eda77403ff68a68b791283d240d559dfc686ef",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_025.wav",
+      "bytes": 80898,
+      "sha256": "287bd43abae9621887dee6d81d69c1da0d9bc745bf459354ce007ff525cd5a9d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_026.wav",
+      "bytes": 79914,
+      "sha256": "e8c4d247c341f263a72c35165ba0cbf76a7372d13e1ea03bb38852a5ea82bc0d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_027.wav",
+      "bytes": 79914,
+      "sha256": "3f11e27fd11354ca5138a49224aab580f55688afa0d25b7bfb6ec222f8bbf8df",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_028.wav",
+      "bytes": 124866,
+      "sha256": "dbbe64b9cd39ab806b3a3c4020367e69c7ca83c5beb180577c56b449ced4657d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_029.wav",
+      "bytes": 109058,
+      "sha256": "eafdfd47bc250dbcc513d5d60d4b44737894a1ff73eabfd5b58d260107730fd0",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "audio/ir/AK-SROOMS_030.wav",
+      "bytes": 94298,
+      "sha256": "a8f8325a95b54b03adb86c482279f3c9bddf7067de3b2ec88fb3c6a1297e47f8",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "adventure-kid-ak-srooms"
+    },
+    {
+      "path": "demo/backgrounds/castles.png",
+      "bytes": 14738,
+      "sha256": "debf2eb44ebc59eaa840275a2367ede555067f8cb450ecccdc441d3c345617aa",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-background-elements-remastered",
+      "upstream": "demo/vendor/kenney/background-elements-remastered/Backgrounds/backgroundCastles.png"
+    },
+    {
+      "path": "demo/backgrounds/forest.png",
+      "bytes": 20205,
+      "sha256": "ad0c5883d876bca50fd83f73098df1e9c8a193d9de003c75ca84b56fe8809a69",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-background-elements-remastered",
+      "upstream": "demo/vendor/kenney/background-elements-remastered/Backgrounds/backgroundForest.png"
+    },
+    {
+      "path": "demo/backgrounds/platformer-clouds.png",
+      "bytes": 1800,
+      "sha256": "af584247f5df2ad50c0d53427ff34424038d0aed61f58d7861158e957166983e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Sprites/Backgrounds/Default/background_clouds.png"
+    },
+    {
+      "path": "demo/backgrounds/platformer-hills.png",
+      "bytes": 1912,
+      "sha256": "4690d86430aae4b22f212173414213dca16637f1748a7fb7c75a21c5cf6cc4e4",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Sprites/Backgrounds/Default/background_color_hills.png"
+    },
+    {
+      "path": "demo/cursors/arrow.svg",
+      "bytes": 397,
+      "sha256": "142d58fdbc33483829d5bf88691ec21ffd54dc65f5501460d13f2c5196cfd501",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-cursor-pack",
+      "upstream": "demo/vendor/kenney/cursor-pack/Vector/Basic/arrow_e.svg"
+    },
+    {
+      "path": "demo/cursors/busy.svg",
+      "bytes": 947,
+      "sha256": "88a140e7828cca498466c190730755d3e03728b5081c19857609823b4be7f5a8",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-cursor-pack",
+      "upstream": "demo/vendor/kenney/cursor-pack/Vector/Basic/cursor_busy.svg"
+    },
+    {
+      "path": "demo/cursors/cross.svg",
+      "bytes": 552,
+      "sha256": "f539e315651106a9303a5d7e3e3a39002ff41d195de83cd0bfd4659a46a2c5b1",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-cursor-pack",
+      "upstream": "demo/vendor/kenney/cursor-pack/Vector/Basic/cross_large.svg"
+    },
+    {
+      "path": "demo/cursors/hand.svg",
+      "bytes": 550,
+      "sha256": "c5a0d112b3c8dc66426439e85667375a3a38d82af3ce80414a1fc27b3461ad06",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-cursor-pack",
+      "upstream": "demo/vendor/kenney/cursor-pack/Vector/Basic/hand_point.svg"
+    },
+    {
+      "path": "demo/cursors/pointer.svg",
+      "bytes": 417,
+      "sha256": "44b739c5a1699376985288920e5336cf9d1f1ce65b0b4e9d8a42aad7679c7b59",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-cursor-pack",
+      "upstream": "demo/vendor/kenney/cursor-pack/Vector/Basic/pointer_a.svg"
+    },
+    {
+      "path": "demo/fonts/Kenney Future.ttf",
+      "bytes": 34116,
+      "sha256": "bd36e536cc26672bdba652547494a4877f2a446329bb7141840d9cd73bceffc2",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-fonts",
+      "upstream": "demo/vendor/kenney/kenney-fonts/Fonts/Kenney Future.ttf"
+    },
+    {
+      "path": "demo/fonts/Kenney Mini Square Mono.ttf",
+      "bytes": 24612,
+      "sha256": "2b56b47d5d4525f6e2665ec137b5bd29ced7105584147d11942b3c07110a1545",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-fonts",
+      "upstream": "demo/vendor/kenney/kenney-fonts/Fonts/Kenney Mini Square Mono.ttf"
+    },
+    {
+      "path": "demo/fonts/Kenney Mini.ttf",
+      "bytes": 26156,
+      "sha256": "5432343406838b5d14bbefc1d3c0b8940696bb811be93fa04d67761090d006a3",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-fonts",
+      "upstream": "demo/vendor/kenney/kenney-fonts/Fonts/Kenney Mini.ttf"
+    },
+    {
+      "path": "demo/fonts/Kenney Pixel.ttf",
+      "bytes": 28276,
+      "sha256": "174093d8b71aa808d7ffff70529c9087274515493add48134528c9136f621e92",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-fonts",
+      "upstream": "demo/vendor/kenney/kenney-fonts/Fonts/Kenney Pixel.ttf"
+    },
+    {
+      "path": "demo/fonts/kenney-blocks-32.fnt",
+      "bytes": 11037,
+      "sha256": "a64d887a1131afedb2eb7965fa58e0715581dc22925f6c6f10b4e50608a937a2",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-blocks-bitmap-font"
+    },
+    {
+      "path": "demo/fonts/kenney-blocks-32.png",
+      "bytes": 2598,
+      "sha256": "0078edbb3f6966d40099170e9674b6a0f1a0d447b4b567c61dbc8ab2a5c111be",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-blocks-bitmap-font"
+    },
+    {
+      "path": "demo/input-prompts/generic.json",
+      "bytes": 7430,
+      "sha256": "442f80e4bf8f28d30de0d85d69949667a7c210b7b40eb179124028b8757eb2cf",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/generic.png",
+      "bytes": 6965,
+      "sha256": "c5c22cf820724c1f394ffa56d13193496f99623592c4543dadc7b0330559381b",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/keyboard-mouse.json",
+      "bytes": 50807,
+      "sha256": "8dcac7a7b065019365ec5839c869b894c9c93ade32976174f21c77973e009a8d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/keyboard-mouse.png",
+      "bytes": 31036,
+      "sha256": "56fc0e5127487027fed5d937d8c5fd9ed782558c30b19dd7d0345c63d7907b0a",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/nintendo-switch.json",
+      "bytes": 22603,
+      "sha256": "04f2998512552a6ade8c1ce6942130bed367c8fd3b9d16870b37c14cdfb2173a",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/nintendo-switch.png",
+      "bytes": 24328,
+      "sha256": "57e0efa28917993d1342d5ab1bb39489e19797ee598bc6e71fd995ecbd6eea09",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/playstation-series.json",
+      "bytes": 27995,
+      "sha256": "f0d4dd69a35044b64df0b74e4de22fcce7179b449fd437285f6299c3737b0ae0",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/playstation-series.png",
+      "bytes": 30398,
+      "sha256": "aac8d2a7e08e7e0b74c7d712e53cc0916c55999ddb4894910a05e5f467f636cc",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/xbox-series.json",
+      "bytes": 19743,
+      "sha256": "b6530d0e003d319c5594f9c9d0c04559d9a723891ac21097d0257ab652a278af",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/input-prompts/xbox-series.png",
+      "bytes": 21805,
+      "sha256": "bd4919042f34162688c2e600e9d71dc4a500167ade2cd2bc07e97e79ba3e849c",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-input-prompts"
+    },
+    {
+      "path": "demo/music/demo-loop-a.ogg",
+      "bytes": 16238,
+      "sha256": "f98845f077a58cbd20400036b78efcc39017b8567997bdd13da83da2182f55b2",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/music/demo-loop-b.ogg",
+      "bytes": 13430,
+      "sha256": "acc9e28bb9dd3cef9833d2a2f8f1e2996aa84166a9450508ec90fadf097bc9bc",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/music/demo-loop-main.ogg",
+      "bytes": 11871,
+      "sha256": "b24db39c00a8aea79fa5f953c8c34b0fc6ffc5519584b1559c1ef6b077f8e470",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/music/jingle-failure.ogg",
+      "bytes": 8650,
+      "sha256": "e23d8c9e971a4e34484bc834a3ec1d560811ec6f5edd5efa2c61e583c18c504a",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-music-jingles",
+      "upstream": "demo/vendor/kenney/music-jingles/Audio/Hit jingles/jingles_HIT00.ogg"
+    },
+    {
+      "path": "demo/music/jingle-retro-a.ogg",
+      "bytes": 10382,
+      "sha256": "b442ade3308a2bbda4b8c572c86f9f1071c7bdbcfb1e6f915d35c605b61bd475",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-music-jingles",
+      "upstream": "demo/vendor/kenney/music-jingles/Audio/Pizzicato jingles/jingles_PIZZI00.ogg"
+    },
+    {
+      "path": "demo/music/jingle-retro-b.ogg",
+      "bytes": 15691,
+      "sha256": "8799eb726d784ae0aa1a9df80648a873ac60015bc00aea12c8e2dd1431a2bd7d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-music-jingles",
+      "upstream": "demo/vendor/kenney/music-jingles/Audio/Steel jingles/jingles_STEEL00.ogg"
+    },
+    {
+      "path": "demo/music/jingle-success.ogg",
+      "bytes": 39948,
+      "sha256": "1010c9b566d6c090ff03a4aaaf7439e26eb4cc4f20373800d0b7e6a9057b795d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-music-jingles",
+      "upstream": "demo/vendor/kenney/music-jingles/Audio/8-Bit jingles/jingles_NES00.ogg"
+    },
+    {
+      "path": "demo/sound-sprites/digital/digital.json",
+      "bytes": 74,
+      "sha256": "e82af9cea24f50732d85a4c7f0cff29bbdda271b07b7c186c45ec05144b4b2dd",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "path": "demo/sound-sprites/digital/digital.ogg",
+      "bytes": 23134,
+      "sha256": "054a96dd240ba182343de82b4cb1ab2740edffda5c837ede30b17a4a6d7e4ba5",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "path": "demo/sound-sprites/impacts/impacts.json",
+      "bytes": 127,
+      "sha256": "6f2d118a17bb09032faa6659361b33d761abe5b9fe3369f02cd6bcc024dae1b3",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "path": "demo/sound-sprites/impacts/impacts.ogg",
+      "bytes": 10916,
+      "sha256": "67c7fa99b0962866213c6a5706f9a5c87ecaf6d85543ed5c1aae313d7c2f6218",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "path": "demo/sound-sprites/ui/ui.json",
+      "bytes": 228,
+      "sha256": "7538dc55342ccd02079c828be15bd7de468ab7093a5ae4e61acc15f89368b86c",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "path": "demo/sound-sprites/ui/ui.ogg",
+      "bytes": 17403,
+      "sha256": "28c1ddfcd2d4fb6555494b5cb59d3d1a9ad708c95e38378780c32e16cf03c1e0",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-sound-sprites"
+    },
+    {
+      "path": "demo/sound/back.ogg",
+      "bytes": 6997,
+      "sha256": "07db973f79f6ae0f2edc34561e7592e24d0577455919fb602cb8ecc0da991dcf",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-interface-sounds",
+      "upstream": "demo/vendor/kenney/interface-sounds/Audio/back_001.ogg"
+    },
+    {
+      "path": "demo/sound/click-alt.ogg",
+      "bytes": 10945,
+      "sha256": "c5faa31bbf4a921332cdc9e7d7f7d930ca73fc8cc96e35ccc70ed2de975b26e5",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-ui-pack",
+      "upstream": "demo/vendor/kenney/ui-pack/Sounds/click-a.ogg"
+    },
+    {
+      "path": "demo/sound/coin.ogg",
+      "bytes": 5572,
+      "sha256": "38c897c7a0f056e8cda892ca4a31639e1397ef9c70490351ecb0c4df0cc95e45",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Sounds/sfx_coin.ogg"
+    },
+    {
+      "path": "demo/sound/hurt.ogg",
+      "bytes": 5804,
+      "sha256": "ee126f78cfd70e665c37d7afe7e1dc0fa84d6b2ab25ce27d797738d54d082ec6",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Sounds/sfx_hurt.ogg"
+    },
+    {
+      "path": "demo/sound/impact-heavy.ogg",
+      "bytes": 6110,
+      "sha256": "e07045693e4a2b3d165c424e3dab4c781d9ff8880a386880ac89a51315d7f831",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds",
+      "upstream": "demo/vendor/kenney/impact-sounds/Audio/impactMetal_heavy_000.ogg"
+    },
+    {
+      "path": "demo/sound/impact-light.ogg",
+      "bytes": 5827,
+      "sha256": "f0e982611e97512fee5f777986b67e8b435434b601f94992ec044f7e89fb5acb",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds",
+      "upstream": "demo/vendor/kenney/impact-sounds/Audio/impactGeneric_light_000.ogg"
+    },
+    {
+      "path": "demo/sound/impact-wood.ogg",
+      "bytes": 6575,
+      "sha256": "1723a9fd25103ed41af06054814e84e65f4a772bac86ab2dc927da93d9592ff5",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds",
+      "upstream": "demo/vendor/kenney/impact-sounds/Audio/impactWood_medium_000.ogg"
+    },
+    {
+      "path": "demo/sound/jump.ogg",
+      "bytes": 5926,
+      "sha256": "7a0e42879c60350c6866976e8f6013943d9cb78a5ff1d126107ae3322566ee8f",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Sounds/sfx_jump.ogg"
+    },
+    {
+      "path": "demo/sound/laser.ogg",
+      "bytes": 9315,
+      "sha256": "0bf468769b48a834dc1c6e38e457f2c71159b010225a9aedf84316795e8cc3e5",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-digital-audio",
+      "upstream": "demo/vendor/kenney/digital-audio/Audio/laser1.ogg"
+    },
+    {
+      "path": "demo/sound/power-up.ogg",
+      "bytes": 9011,
+      "sha256": "8c361b624b560c0bc30ea3063b71212bc30caebf425c9df2481c13b25561485c",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-digital-audio",
+      "upstream": "demo/vendor/kenney/digital-audio/Audio/powerUp1.ogg"
+    },
+    {
+      "path": "demo/sound/switch.ogg",
+      "bytes": 9433,
+      "sha256": "1a4c90fed704b4f4b36d58f481117cfac5cdc25279a9af97d4765b71ff21ed48",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-ui-pack",
+      "upstream": "demo/vendor/kenney/ui-pack/Sounds/switch-a.ogg"
+    },
+    {
+      "path": "demo/sound/ui-bong.ogg",
+      "bytes": 4848,
+      "sha256": "d21d0f0b782445db579d11e2506b24cd1ac9d664ee33aeaf807761aa7b6fd710",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-interface-sounds",
+      "upstream": "demo/vendor/kenney/interface-sounds/Audio/bong_001.ogg"
+    },
+    {
+      "path": "demo/sound/ui-click.ogg",
+      "bytes": 4876,
+      "sha256": "ccfb7fa0cccdd9faec0eb16033c732b1e308d139d80f799161495d58f7adcdb9",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-interface-sounds",
+      "upstream": "demo/vendor/kenney/interface-sounds/Audio/click_001.ogg"
+    },
+    {
+      "path": "demo/sound/ui-confirm.ogg",
+      "bytes": 8968,
+      "sha256": "063564703b6094d70718a3e787a55cc9141611e4ecd6b6637f8828f79b4a8c3a",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-interface-sounds",
+      "upstream": "demo/vendor/kenney/interface-sounds/Audio/confirmation_001.ogg"
+    },
+    {
+      "path": "demo/spritesheets/kenney/background-elements.json",
+      "bytes": 13600,
+      "sha256": "8d52979f8d00eb630c90c36bd34d7fe1c1fd2f71e9671fe460aea3ecdc836208",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "path": "demo/spritesheets/kenney/background-elements.png",
+      "bytes": 86748,
+      "sha256": "c9711e2d2d5089f2dbd6f6bd61de163c6419558e5b75e615597677dec6a495d0",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-background-elements-remastered",
+      "upstream": "demo/vendor/kenney/background-elements-remastered/Spritesheet/spritesheet_default.png"
+    },
+    {
+      "path": "demo/spritesheets/kenney/map-pack.json",
+      "bytes": 36506,
+      "sha256": "396cd8334d25b66e2f7badf80b0aefd0ecdbcb0e335b3b08a8d2f9a765ed6884",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "path": "demo/spritesheets/kenney/map-pack.png",
+      "bytes": 189463,
+      "sha256": "9c3d15242a9a844947bfef84164945b6ddcad449dc0e72e5af0e823792e4eca6",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-map-pack",
+      "upstream": "demo/vendor/kenney/map-pack/Spritesheet/mapPack_spritesheet.png"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-backgrounds.json",
+      "bytes": 3011,
+      "sha256": "84bdf3cd81ffbf7391f034a1261580671259c99252878e823d917f3a601df7e0",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-backgrounds.png",
+      "bytes": 20096,
+      "sha256": "ac8b1d9869a4e6eebdcd339af53e6f4be0a9b499242418d632bdeda85c3a9cae",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Spritesheets/spritesheet-backgrounds-default.png"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-characters.json",
+      "bytes": 9387,
+      "sha256": "7ddb66209ea103ba928c6891bb3ee3ad94b052c8d8ccfeba9cab7bd6cea4eb65",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-characters.png",
+      "bytes": 69705,
+      "sha256": "f3d060ab294c262d51a8033074d1cd799506b7c536c941b4109ec35def178d3e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Spritesheets/spritesheet-characters-default.png"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-enemies.json",
+      "bytes": 11629,
+      "sha256": "e23e3b9f110bac83af29d4857be888c17675ddc441aa1f58f3b1ce00c456e43c",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-enemies.png",
+      "bytes": 36282,
+      "sha256": "2cab7bcb106db10c7ce261609ce5be9db80373920f8851e0a11bcd364e43f23e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Spritesheets/spritesheet-enemies-default.png"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-tiles.json",
+      "bytes": 62598,
+      "sha256": "2a3d610e08802e4b52ec743a3da747026592c8196c1da59a73ba759a9db5137e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-spritesheet-conversion"
+    },
+    {
+      "path": "demo/spritesheets/kenney/platformer-tiles.png",
+      "bytes": 111650,
+      "sha256": "877e68a345fc8e668c913bb5798e98ecf0bc2784aa899bfb409769bf1feb50d7",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack",
+      "upstream": "demo/vendor/kenney/new-platformer-pack/Spritesheets/spritesheet-tiles-default.png"
+    },
+    {
+      "path": "demo/svg/arrow-right.svg",
+      "bytes": 217,
+      "sha256": "0b62cceb3274f3f6719134744c48e3326d501b547f07ffe1fc6096cb589c413e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/svg/audio-wave.svg",
+      "bytes": 341,
+      "sha256": "a9458bd12f44f7949f35027aab63bf8cd33a248620bd589ce02ce341b0a8ae7b",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/svg/image-placeholder.svg",
+      "bytes": 322,
+      "sha256": "60de556b566469e913e5f0095a08e4913826d795d913d27f82f0299a6bf27ad8",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/svg/pause.svg",
+      "bytes": 190,
+      "sha256": "2a0741e0835c65b6726f81d949367c9bed8c4fac0021686a1e30da494e6de35b",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/svg/play.svg",
+      "bytes": 125,
+      "sha256": "ecd755ec36924726b8ff3f1f8c2641d1b63e57a3e4a3e46a085dec08c559089c",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/svg/reset.svg",
+      "bytes": 242,
+      "sha256": "7acc3ba4f9c72646e61e05a91fffa82c34baa6f7afb5a5e42484bfc54e9e0d46",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/svg/rune-mark.svg",
+      "bytes": 182,
+      "sha256": "9b1fd7542b8b9361272d820d34423c8a7c9733fc27341e3e22087339580de772",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/svg/sparkle.svg",
+      "bytes": 162,
+      "sha256": "ededb2d5d03156d9a8cf21cee2bdd7049429114c9df0dfb1ecd04325f1cf3d03",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/textures/checkerboard-transparent.png",
+      "bytes": 106,
+      "sha256": "3d2f8d981dd0f62200a5069bb0ad26f6ceffd10ac456320510864bddd9864e1e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-development-essentials",
+      "upstream": "demo/vendor/kenney/development-essentials/Checkerboard/checkerboard-transparent.png"
+    },
+    {
+      "path": "demo/textures/kenney-uv.png",
+      "bytes": 8609,
+      "sha256": "0a525948c05d5b4936506033efe428e7b53221375a394e7b528670ae05c72186",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-development-essentials",
+      "upstream": "demo/vendor/kenney/development-essentials/UV texture/uv-texture.png"
+    },
+    {
+      "path": "demo/textures/particle-flame.png",
+      "bytes": 54099,
+      "sha256": "92a70bcb90b1e21c57b2dae42843135703b2e988abee97433f84c3119723d144",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "path": "demo/textures/particle-light.png",
+      "bytes": 93470,
+      "sha256": "caedcc5df5bcac4470244d2520d6a64b45b20c1ccf4d918da516c55e3fa365a6",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "path": "demo/textures/particle-smoke.png",
+      "bytes": 39737,
+      "sha256": "a71f8abcac64f8d73a94625cc9a10033dbeafa7eaea750560cba0daa73fe8752",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "path": "demo/textures/particle-spark.png",
+      "bytes": 79574,
+      "sha256": "90f322bebe5facea2f60afe88d98dd80a21479ed3212e605d61e88a896f3e1db",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "path": "demo/textures/particle-star.png",
+      "bytes": 30613,
+      "sha256": "6485ac16c773663bd39346f3bedae04465ac14c661eb47cc5cfa935cdbf6c2ec",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-particle-pack"
+    },
+    {
+      "path": "demo/textures/pixel-black.png",
+      "bytes": 68,
+      "sha256": "431ced6916a2a21a156e38701afe55bbd7f88969fbbfc56d7fe099d47f265460",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-development-essentials",
+      "upstream": "demo/vendor/kenney/development-essentials/1×1 Pixels/pixel-black.png"
+    },
+    {
+      "path": "demo/textures/pixel-transparent.png",
+      "bytes": 68,
+      "sha256": "63ef318d96b5d0d0ceba6e04a4e622b1158335cdc67c49e27839132c6f655058",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-development-essentials",
+      "upstream": "demo/vendor/kenney/development-essentials/1×1 Pixels/pixel-transparent.png"
+    },
+    {
+      "path": "demo/textures/pixel-white.png",
+      "bytes": 68,
+      "sha256": "5e3d382db4dd83d59aa5742793ad6b7903409e865c83bcbc54835049f043bc15",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-development-essentials",
+      "upstream": "demo/vendor/kenney/development-essentials/1×1 Pixels/pixel-white.png"
+    },
+    {
+      "path": "demo/textures/prototype-dark-01.png",
+      "bytes": 2774,
+      "sha256": "07e28d7a86396fa4f1d7c43040f8e57e2374f6fa35b02bc48e70f9ccd4041c1a",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-prototype-textures",
+      "upstream": "demo/vendor/kenney/prototype-textures/PNG/Dark/texture_01.png"
+    },
+    {
+      "path": "demo/textures/prototype-grid.png",
+      "bytes": 2727,
+      "sha256": "72bb9b3cb2743de3f0eaba2188c931370085572e627168821310008f46dafccd",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-prototype-textures",
+      "upstream": "demo/vendor/kenney/prototype-textures/PNG/Light/texture_02.png"
+    },
+    {
+      "path": "demo/textures/prototype-light-01.png",
+      "bytes": 1338,
+      "sha256": "2e16ed21beacfe2f47f9d2e8a71cae2551d5e68701a80fead36c2e86cc7063e3",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-prototype-textures",
+      "upstream": "demo/vendor/kenney/prototype-textures/PNG/Light/texture_01.png"
+    },
+    {
+      "path": "demo/textures/ship-a.png",
+      "bytes": 3601,
+      "sha256": "d12532d8d6b36fe9d739475317dcc74f0d621810635766af3bda5d4fd5868c94",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/vendor/kenney/background-elements-remastered/License.txt",
+      "bytes": 596,
+      "sha256": "2555b7f582b087a11a5a976f33a74ac36a9ed6da08534de7f84faa325a001f6d",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-background-elements-remastered"
+    },
+    {
+      "path": "demo/vendor/kenney/cursor-pack/License.txt",
+      "bytes": 569,
+      "sha256": "a134e52b4689ed8a57f170e0dacfcba5d64351cbd0858aa2e325b8486d0ca9d6",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-cursor-pack"
+    },
+    {
+      "path": "demo/vendor/kenney/development-essentials/License.txt",
+      "bytes": 679,
+      "sha256": "bb691710342a4ef7d0ab2469dbb820ada013ea1abb17583bff074d231a28971e",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-development-essentials"
+    },
+    {
+      "path": "demo/vendor/kenney/digital-audio/License.txt",
+      "bytes": 462,
+      "sha256": "48ac15b3c34deb0a7cddc80a43302654dc9e4cb23dad38fc620a6f70be2d55cd",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-digital-audio"
+    },
+    {
+      "path": "demo/vendor/kenney/impact-sounds/License.txt",
+      "bytes": 608,
+      "sha256": "b49aa9c56b04528b95913de13e506a0f7c5e807b9925db9bfef86af1f91120db",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-impact-sounds"
+    },
+    {
+      "path": "demo/vendor/kenney/interface-sounds/License.txt",
+      "bytes": 574,
+      "sha256": "f7966c773bbed0eca6a9c75081c44a178b38eae112724dbb5fdfbd4192d118a9",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-interface-sounds"
+    },
+    {
+      "path": "demo/vendor/kenney/isometric-tiles-landscape/License.txt",
+      "bytes": 602,
+      "sha256": "958b0d848ced5b9db7b6ebc5a281a0b078e3a6eabf992ed0410fc0a247f04d1a",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-isometric-tiles-landscape"
+    },
+    {
+      "path": "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_000.png",
+      "bytes": 4683,
+      "sha256": "3b7374147c9c168a6bfba17140e55b75b7366f105880499da7dbaf785a176f71",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-isometric-tiles-landscape"
+    },
+    {
+      "path": "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_001.png",
+      "bytes": 4814,
+      "sha256": "9a1eb511a965fea52343f5c8fbd5692ae8527f051a2a0f0e8e4159ba93877b5c",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-isometric-tiles-landscape"
+    },
+    {
+      "path": "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_005.png",
+      "bytes": 6996,
+      "sha256": "a60ef74ed33d2f647349cbacd995e631b89302252d9cce5b3bf552dda6c49619",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-isometric-tiles-landscape"
+    },
+    {
+      "path": "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_020.png",
+      "bytes": 939,
+      "sha256": "065df274787be55b428366ec0194e876a361ec76d9602fb2652fba07d3d80b23",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-isometric-tiles-landscape"
+    },
+    {
+      "path": "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_030.png",
+      "bytes": 5586,
+      "sha256": "92edc723b2509e0dbf05a02dff285d36f81cdd780f431821dc203ee0007dd784",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-isometric-tiles-landscape"
+    },
+    {
+      "path": "demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_040.png",
+      "bytes": 6853,
+      "sha256": "9e496413c5af24bfbf23456bd7e2102f0f4260efdc869b2e5f2127c212bd0f11",
+      "role": "transitive",
+      "profile": "standard",
+      "provenance": "kenney-isometric-tiles-landscape"
+    },
+    {
+      "path": "demo/vendor/kenney/kenney-fonts/License.txt",
+      "bytes": 564,
+      "sha256": "98402691e89c968502be5d2392c0de86bc787dd49f961fbb799e22c3bbb434e2",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-fonts"
+    },
+    {
+      "path": "demo/vendor/kenney/map-pack/License.txt",
+      "bytes": 460,
+      "sha256": "121a4da9dcaec5e11e315b041c527e936f468fd6c6c90183bacaf1f9fb98a43f",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-map-pack"
+    },
+    {
+      "path": "demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png",
+      "bytes": 204964,
+      "sha256": "07a9b51f66b6779723af2c1ce96861ef3344dd4b149a16d0555f912c248cd519",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-map-pack"
+    },
+    {
+      "path": "demo/vendor/kenney/music-jingles/License.txt",
+      "bytes": 462,
+      "sha256": "c2d2cc87aa90fa7c5ad7b8280f8c771ccc75dc1c7da825a44423b4d77aac9b18",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-music-jingles"
+    },
+    {
+      "path": "demo/vendor/kenney/new-platformer-pack/License.txt",
+      "bytes": 676,
+      "sha256": "eaad49f1a554c0ba5a697f46aa5e7b5bf13d4268d9ce5813e11847bc36efda7c",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-new-platformer-pack"
+    },
+    {
+      "path": "demo/vendor/kenney/prototype-textures/License.txt",
+      "bytes": 611,
+      "sha256": "b17db4082ba7794153340d83f5fcbd26a3d509ff31a3ce3d2c77cb175e35d308",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-prototype-textures"
+    },
+    {
+      "path": "demo/vendor/kenney/ui-pack/License.txt",
+      "bytes": 565,
+      "sha256": "69f7eaa5e05913b4d09cf5848f75390b5c3c9a409ef8555777803d9ca0c171fb",
+      "role": "license",
+      "profile": "standard",
+      "provenance": "kenney-ui-pack"
+    },
+    {
+      "path": "demo/video/clips/hdr10.webm",
+      "bytes": 15436418,
+      "sha256": "2ee7e1ca88735107a4a801803d020f3eb25d06a54081d6e4f6326571908195e7",
+      "role": "entry",
+      "profile": "extended",
+      "provenance": "blender-singularity"
+    },
+    {
+      "path": "demo/video/clips/high-fps.webm",
+      "bytes": 10599067,
+      "sha256": "f1589c92fca1c96971f58ee608742b5e56936e87506427a560a773c4c9c5de87",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "blender-big-buck-bunny"
+    },
+    {
+      "path": "demo/video/clips/high-res.mp4",
+      "bytes": 4237758,
+      "sha256": "4fd15af94bcc04c10d8aa3b285d497451823f017be0366bc01d66a05cccb1e1c",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "blender-glass-half"
+    },
+    {
+      "path": "demo/video/demo-loop.webm",
+      "bytes": 9428,
+      "sha256": "832736215c4c12572396899ee01c9679c476633f0bde4527865fb1727b85bf6d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "demo/voice/congratulations.ogg",
+      "bytes": 13609,
+      "sha256": "a2a09925af456d0b20c017cf57d217a18ccf4d6c95beed245acc54aa63c92c98",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "path": "demo/voice/mission-complete.ogg",
+      "bytes": 11493,
+      "sha256": "e6afa79a7e648291280d57454d7d09091c5a5af8b5865c9087bac233c567adb0",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "path": "demo/voice/objective-achieved.ogg",
+      "bytes": 12594,
+      "sha256": "4c3f12a825d6f656c54aff93af25e9d6b63287a47821865a20c7ca638776a9c4",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "kenney-voiceover-pack"
+    },
+    {
+      "path": "json/maps/drift-fields.tmj",
+      "bytes": 10563,
+      "sha256": "d12efc58f2e42ac225e9de39c984995c2e7d8406d78eb32701a6a0c74798fd46",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "json/maps/harbor-plaza.tmj",
+      "bytes": 2727,
+      "sha256": "debe27d58dfe5f0f4b0f28eb59121fc8aa23a14a5a3d8765a7e9c5ee6ee8a7a9",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "json/maps/harbor-world.ldtk",
+      "bytes": 9490,
+      "sha256": "4afe2b04a432762751c5e51a6848daebdb9b46333f2d620910a4b29300d008f5",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "json/maps/isometric-landscape.tmj",
+      "bytes": 2860,
+      "sha256": "13b1ba91d5eae0104d73ee0c36cd7fd6a4cabb6b81f16800bebdda4ca48c7bad",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "json/maps/ownership-workshop.tmj",
+      "bytes": 1380,
+      "sha256": "7f5a0f5fd9bd8733ade9f5b78523345481265a3d4d2ec020a8041c52cd9fac39",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "json/maps/physics-room.tmj",
+      "bytes": 1927,
+      "sha256": "3f9d2391baa9120edc9dea63e7797102c0fc0a026b621a9852a8bd98cc6a3b67",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "svg/exo-wordmark.svg",
+      "bytes": 1392,
+      "sha256": "581d0b9611ff45503d889a4c223ffbefff9ff1dc680b011b9d085e60cec3b146",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/alpha/alpha-edge-straight.png",
+      "bytes": 1392,
+      "sha256": "29456f07c0e1e37c4e019a61e9b479775a746d29a5ef1a2ed3ea311b0ae58f0d",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/alpha/alpha-gradient-rings.png",
+      "bytes": 64151,
+      "sha256": "fd8253b94d5d451c9ae92c5adc95b4b1c2a9b1081f5650d6eea53c6d253ff8f4",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/color/hue-ramp.png",
+      "bytes": 507,
+      "sha256": "04b21edfabf564edc84a5bfd60ae03b7475ef82cbfc725bf328669edb97f0edd",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/color/primary-ramp.png",
+      "bytes": 536,
+      "sha256": "7162d95998023c9a0d19e991a20ec0a301c42b451ff795ec979dd5eda8cd8e06",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/color/srgb-ramp.png",
+      "bytes": 633,
+      "sha256": "c6adad8495921088e22a849a14dda0ba621a72684055c987bbca1406d02be128",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/filtering/checker-256.png",
+      "bytes": 24976,
+      "sha256": "89c3836d91efafc6683c75ad5b1ba4c70dd8b76aec8dd1d332056c710ff43d2b",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/filtering/pixel-grid-128.png",
+      "bytes": 1149,
+      "sha256": "03596dfba23c1dbd223f593ca093eb80548d50e933b113c0289639f478af02d9",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    },
+    {
+      "path": "technical/filtering/uv-grid-256.png",
+      "bytes": 32164,
+      "sha256": "bc1cfefe6e5728cf097de8284cdbd384fe5006b9eb9bd3252fab5397f4b2a61e",
+      "role": "entry",
+      "profile": "standard",
+      "provenance": "exojs"
+    }
+  ],
+  "provenance": {
+    "exojs": {
+      "title": "ExoJS original work",
+      "author": "ExoJS contributors",
+      "license": "MIT",
+      "licenseUrl": "https://opensource.org/license/mit",
+      "source": "https://github.com/Exoridus/ExoJS"
+    },
+    "kenney-background-elements-remastered": {
+      "title": "Kenney Background Elements Remastered",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/background-elements-remastered",
+      "licenseFile": "demo/vendor/kenney/background-elements-remastered/License.txt"
+    },
+    "kenney-cursor-pack": {
+      "title": "Kenney Cursor Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/cursor-pack",
+      "licenseFile": "demo/vendor/kenney/cursor-pack/License.txt"
+    },
+    "kenney-development-essentials": {
+      "title": "Kenney Development Essentials",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/development-essentials",
+      "licenseFile": "demo/vendor/kenney/development-essentials/License.txt"
+    },
+    "kenney-digital-audio": {
+      "title": "Kenney Digital Audio",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/digital-audio",
+      "licenseFile": "demo/vendor/kenney/digital-audio/License.txt"
+    },
+    "kenney-impact-sounds": {
+      "title": "Kenney Impact Sounds",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/impact-sounds",
+      "licenseFile": "demo/vendor/kenney/impact-sounds/License.txt"
+    },
+    "kenney-interface-sounds": {
+      "title": "Kenney Interface Sounds",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/interface-sounds",
+      "licenseFile": "demo/vendor/kenney/interface-sounds/License.txt"
+    },
+    "kenney-isometric-tiles-landscape": {
+      "title": "Kenney Isometric Tiles Landscape",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/isometric-tiles-landscape",
+      "licenseFile": "demo/vendor/kenney/isometric-tiles-landscape/License.txt"
+    },
+    "kenney-fonts": {
+      "title": "Kenney Fonts",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/kenney-fonts",
+      "licenseFile": "demo/vendor/kenney/kenney-fonts/License.txt"
+    },
+    "kenney-map-pack": {
+      "title": "Kenney Map Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/map-pack",
+      "licenseFile": "demo/vendor/kenney/map-pack/License.txt"
+    },
+    "kenney-music-jingles": {
+      "title": "Kenney Music Jingles",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/music-jingles",
+      "licenseFile": "demo/vendor/kenney/music-jingles/License.txt"
+    },
+    "kenney-new-platformer-pack": {
+      "title": "Kenney New Platformer Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/new-platformer-pack",
+      "licenseFile": "demo/vendor/kenney/new-platformer-pack/License.txt"
+    },
+    "kenney-prototype-textures": {
+      "title": "Kenney Prototype Textures",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/prototype-textures",
+      "licenseFile": "demo/vendor/kenney/prototype-textures/License.txt"
+    },
+    "kenney-ui-pack": {
+      "title": "Kenney UI Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/ui-pack",
+      "licenseFile": "demo/vendor/kenney/ui-pack/License.txt"
+    },
+    "kenney-particle-pack": {
+      "title": "Kenney Particle Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/particle-pack"
+    },
+    "kenney-input-prompts": {
+      "title": "Kenney Input Prompts",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/input-prompts",
+      "note": "Packed into one atlas per device family; the atlas JSON is authored for ExoJS."
+    },
+    "kenney-voiceover-pack": {
+      "title": "Kenney Voiceover Pack",
+      "author": "Kenney (kenney.nl)",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/voiceover-pack"
+    },
+    "kenney-sound-sprites": {
+      "title": "Sound sprites assembled from Kenney Interface Sounds, UI Pack, Impact Sounds and Digital Audio",
+      "author": "Kenney (kenney.nl); assembled for ExoJS",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets",
+      "note": "Concatenated with a 100 ms gap between clips; the sprite JSON is authored for ExoJS."
+    },
+    "kenney-spritesheet-conversion": {
+      "title": "Kenney spritesheets converted to ExoJS atlas JSON",
+      "author": "Kenney (kenney.nl); converted for ExoJS",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets",
+      "note": "Converted from the packs' TexturePacker XML. The `meta.image` field is not used to locate the image; load the matching image descriptor."
+    },
+    "kenney-blocks-bitmap-font": {
+      "title": "Kenney Blocks bitmap font (32 px)",
+      "author": "Kenney (kenney.nl); rasterized for ExoJS",
+      "license": "CC0-1.0",
+      "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
+      "source": "https://kenney.nl/assets/kenney-fonts",
+      "licenseFile": "demo/vendor/kenney/kenney-fonts/License.txt",
+      "note": "Generated from Kenney Blocks.ttf."
+    },
+    "blender-glass-half": {
+      "title": "Glass Half",
+      "author": "Blender Foundation; directed by Beorn Leonard",
+      "license": "CC-BY-3.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/3.0/",
+      "source": "https://studio.blender.org/films/glass-half/",
+      "attribution": "(CC) Blender Foundation | studio.blender.org",
+      "note": "12.19 s excerpt cut by stream copy (no re-encode) from the 3840x2160 encode."
+    },
+    "blender-big-buck-bunny": {
+      "title": "Big Buck Bunny, Sunflower version (60 fps)",
+      "author": "Blender Foundation 2008; 60 fps re-render Janus Bager Kristensen 2013",
+      "license": "CC-BY-3.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/3.0/",
+      "source": "https://peach.blender.org/",
+      "attribution": "(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org",
+      "note": "12.14 s excerpt cut by stream copy (no re-encode); title, artist and licence are also embedded in the file's metadata."
+    },
+    "blender-singularity": {
+      "title": "Singularity",
+      "author": "Blender Foundation; directed by Andy Goralczyk (2026)",
+      "license": "CC-BY-4.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/4.0/",
+      "source": "https://studio.blender.org/films/singularity/",
+      "attribution": "(CC) Blender Foundation | studio.blender.org",
+      "note": "8.02 s excerpt cut by stream copy (no re-encode) from the HDR10 AV1 encode."
+    },
+    "adventure-kid-ak-srooms": {
+      "title": "Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses",
+      "author": "Adventure Kid / Kristoffer Ekstrand",
+      "license": "CC-BY-4.0",
+      "licenseUrl": "https://creativecommons.org/licenses/by/4.0/",
+      "source": "https://www.adventurekid.se/akrt/free-reverb-impulse-responses/",
+      "attribution": "AK-SROOMS by Adventure Kid (Kristoffer Ekstrand), CC BY 4.0",
+      "note": "Unmodified; AK-SROOMS__018.wav renamed to AK-SROOMS_018.wav. AK-SROOMS_004.wav and AK-SROOMS_005.wav are byte-identical in the upstream set."
+    }
+  },
+  "blocked": [
+    {
+      "path": "demo/sprites/buttons.png",
+      "reason": "Origin not recorded: the file predates the repository's asset provenance and matches no vendor pack."
+    },
+    {
+      "path": "demo/sprites/buttons.json",
+      "reason": "Atlas for the blocked demo/sprites/buttons.png."
+    }
+  ]
+}
diff --git a/packages/exojs-demo-assets/package.json b/packages/exojs-demo-assets/package.json
new file mode 100644
index 000000000..5857125de
--- /dev/null
+++ b/packages/exojs-demo-assets/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "@codexo/exojs-demo-assets",
+  "version": "0.1.0",
+  "description": "Optional demo media for ExoJS: typed, flat asset descriptors for textures, sounds, music, fonts, maps and video, with licences and a hash manifest.",
+  "keywords": [
+    "assets",
+    "demo",
+    "exojs",
+    "game-assets"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/exojs-demo-assets"
+  },
+  "homepage": "https://github.com/Exoridus/ExoJS",
+  "bugs": {
+    "url": "https://github.com/Exoridus/ExoJS/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./extended": {
+      "types": "./dist/extended.d.ts",
+      "import": "./dist/extended.js",
+      "default": "./dist/extended.js"
+    },
+    "./manifest.json": "./manifest.json",
+    "./media/*": "./media/*",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "exojs-demo-assets-copy": "./bin/copy-media.js"
+  },
+  "files": [
+    "dist/",
+    "media/",
+    "bin/",
+    "manifest.json",
+    "THIRD_PARTY_NOTICES.md",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "generate": "tsx scripts/generate.ts",
+    "build": "tsx scripts/generate.ts --check --media && exo-tsc -p tsconfig.build.json",
+    "archive": "tsx scripts/archive.ts",
+    "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json",
+    "lint": "eslint \"src/**/*.ts\"",
+    "test": "vitest run --root ../.. --project=exojs-demo-assets --project=exojs test/assets/demo-assets-loading.test.ts"
+  },
+  "peerDependencies": {
+    "@codexo/exojs": "0.20.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*",
+    "@codexo/exojs-config": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/exojs-demo-assets/scripts/archive.ts b/packages/exojs-demo-assets/scripts/archive.ts
new file mode 100644
index 000000000..ac003c1dd
--- /dev/null
+++ b/packages/exojs-demo-assets/scripts/archive.ts
@@ -0,0 +1,102 @@
+/**
+ * Packs the media profiles into self-contained archives for hosts that need a
+ * copy step (offline SDK, CDN staging):
+ *
+ * - `archives/exojs-demo-assets-standard-<version>.zip`: the standard media, at
+ *   the same relative paths `manifest.json` lists, taken from the generated
+ *   `media/` tree (run `scripts/generate.ts --media` first).
+ * - `archives/exojs-demo-assets-extended-<version>.zip`: the extended media,
+ *   taken from the content source. The npm package never contains these bytes;
+ *   the archive is the delivery for `createExtendedDemoAssets(baseUrl)`.
+ *
+ * Every file is verified against its manifest SHA-256 before it enters the
+ * archive, and each archive gets a `.sha256` sidecar. On Windows the archive is
+ * written with .NET `ZipFile` via `pwsh`; on POSIX with `zip -r`.
+ */
+import { execFileSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import { copyFileSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { basename, dirname, resolve } from 'node:path';
+
+import { type DemoAssetProfile, filesFor, packageRoot, resolveCatalog, sha256Of } from './catalog.ts';
+
+const catalog = resolveCatalog();
+const version = (JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf8')) as { version: string }).version;
+
+const archiveName = (profile: DemoAssetProfile): string => `exojs-demo-assets-${profile}-${version}`;
+
+/** Copies exactly `filesFor(profile)` into `staging`, at their manifest paths, verifying each hash. */
+const stageProfile = (profile: DemoAssetProfile, sourceRoot: string, staging: string): number => {
+  rmSync(staging, { recursive: true, force: true });
+  mkdirSync(staging, { recursive: true });
+  const staged: string[] = [];
+
+  for (const file of filesFor(catalog, profile)) {
+    const destination = resolve(staging, file.path);
+    mkdirSync(dirname(destination), { recursive: true });
+    copyFileSync(resolve(sourceRoot, file.path), destination);
+
+    if (sha256Of(destination) !== file.sha256) {
+      throw new Error(`[demo-assets] ${file.path} does not match its manifest hash`);
+    }
+
+    staged.push(file.path);
+  }
+
+  return staged.length;
+};
+
+/** Zips `tree` into `zipPath` with the platform zip tool the release scripts use. */
+const zipTree = (tree: string, zipPath: string): void => {
+  rmSync(zipPath, { force: true });
+
+  if (process.platform === 'win32') {
+    execFileSync(
+      'pwsh',
+      [
+        '-NoProfile',
+        '-Command',
+        `Add-Type -AssemblyName System.IO.Compression.FileSystem; [System.IO.Compression.ZipFile]::CreateFromDirectory('${tree}','${zipPath}')`,
+      ],
+      { stdio: 'inherit' },
+    );
+  } else {
+    execFileSync('zip', ['-r', '-q', zipPath, '.'], { cwd: tree, stdio: 'inherit' });
+  }
+
+  if (!existsSync(zipPath)) {
+    throw new Error(`[demo-assets] expected ${zipPath} after compression, but it is missing`);
+  }
+};
+
+const sha256File = (path: string): string => createHash('sha256').update(readFileSync(path)).digest('hex');
+
+const pack = (profile: DemoAssetProfile, sourceRoot: string): void => {
+  const staging = resolve(packageRoot, '.archive-staging', profile);
+  const fileCount = stageProfile(profile, sourceRoot, staging);
+
+  const archives = resolve(packageRoot, 'archives');
+  mkdirSync(archives, { recursive: true });
+  const zipPath = resolve(archives, `${archiveName(profile)}.zip`);
+  zipTree(staging, zipPath);
+  writeFileSync(`${zipPath}.sha256`, `${sha256File(zipPath)}  ${basename(zipPath)}\n`, 'utf8');
+
+  process.stdout.write(`[demo-assets] ${archiveName(profile)}.zip: ${fileCount} files\n`);
+};
+
+const main = (): void => {
+  // Standard bytes come from the generated media/ tree so the archive and the
+  // npm tarball are one delivery; extended bytes come straight from the
+  // content source and are never in the npm package.
+  const mediaRoot = resolve(packageRoot, 'media');
+
+  if (!existsSync(mediaRoot)) {
+    throw new Error('[demo-assets] media/ is missing; run `pnpm --filter @codexo/exojs-demo-assets generate -- --media` first');
+  }
+
+  pack('standard', mediaRoot);
+  pack('extended', catalog.sourceRoot);
+  rmSync(resolve(packageRoot, '.archive-staging'), { recursive: true, force: true });
+};
+
+main();
diff --git a/packages/exojs-demo-assets/scripts/catalog.ts b/packages/exojs-demo-assets/scripts/catalog.ts
new file mode 100644
index 000000000..2525bd150
--- /dev/null
+++ b/packages/exojs-demo-assets/scripts/catalog.ts
@@ -0,0 +1,337 @@
+/**
+ * Reads and validates `catalog.json`, the one authored source of the demo
+ * catalog, and derives everything a delivery needs from it: each entry's
+ * transitive files, the per-profile file sets with hashes and provenance, and
+ * the generated TypeScript and notices.
+ *
+ * Shared by `generate.ts` (writes the outputs), `archive.ts` (packs the media
+ * profiles) and the package tests (drift and closure checks).
+ */
+import { createHash } from 'node:crypto';
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import { posix, resolve } from 'node:path';
+
+export const packageRoot = resolve(import.meta.dirname, '..');
+
+export type DemoAssetProfile = 'standard' | 'extended';
+
+export type DemoAssetTypeName = 'texture' | 'json' | 'sound' | 'music' | 'video' | 'font' | 'bmFont' | 'svg';
+
+export interface ProvenanceRecord {
+  readonly title: string;
+  readonly author: string;
+  readonly license: string;
+  readonly licenseUrl: string;
+  readonly source: string;
+  readonly attribution?: string;
+  readonly note?: string;
+  readonly licenseFile?: string;
+}
+
+type OptionValue = string | number | boolean | { readonly $path: string };
+
+export interface CatalogEntry {
+  readonly key: string;
+  readonly type: DemoAssetTypeName;
+  readonly path: string;
+  readonly category: string;
+  readonly provenance: string;
+  readonly profile?: DemoAssetProfile;
+  readonly valueType?: 'SpritesheetData';
+  readonly options?: Readonly<Record<string, OptionValue>>;
+}
+
+export interface CatalogSource {
+  readonly sourceRoot: string;
+  readonly provenance: Readonly<Record<string, ProvenanceRecord>>;
+  readonly media: Readonly<Record<string, unknown>>;
+  readonly entries: readonly CatalogEntry[];
+  readonly blocked: ReadonlyArray<{ readonly path: string; readonly reason: string }>;
+}
+
+export interface ResolvedFile {
+  readonly path: string;
+  readonly bytes: number;
+  readonly sha256: string;
+  readonly role: 'entry' | 'transitive' | 'license';
+  readonly profile: DemoAssetProfile;
+  readonly provenance: string;
+  /** A byte-identical file in a vendored upstream pack, when there is one. */
+  readonly upstream?: string;
+}
+
+export interface ResolvedEntry extends CatalogEntry {
+  readonly profile: DemoAssetProfile;
+  readonly sha256: string;
+  readonly bytes: number;
+  readonly transitive: readonly string[];
+}
+
+export interface ResolvedCatalog {
+  readonly source: CatalogSource;
+  readonly sourceRoot: string;
+  readonly entries: readonly ResolvedEntry[];
+  readonly files: readonly ResolvedFile[];
+}
+
+const TYPES: ReadonlySet<string> = new Set(['texture', 'json', 'sound', 'music', 'video', 'font', 'bmFont', 'svg']);
+const KEY = /^[a-z][A-Za-z0-9]*$/;
+const MEDIA_SUFFIX =
+  /\.(png|jpe?g|webp|avif|gif|ktx2|svg|ogg|mp3|wav|m4a|mp4|webm|json|tmj|tsj|tj|tmx|tsx|tx|ldtk|ldtkl|fnt|ttf|otf|woff2?|vtt|srt)$/i;
+const VENDOR_PACK = /^demo\/vendor\/kenney\/([^/]+)\//;
+
+/** The provenance id of a Kenney pack directory. Most packs are named without the prefix; `kenney-fonts` already carries it. */
+const kenneyPackId = (pack: string): string => (pack.startsWith('kenney-') ? pack : `kenney-${pack}`);
+
+export const sha256Of = (file: string): string => createHash('sha256').update(readFileSync(file)).digest('hex');
+
+export const readCatalogSource = (): CatalogSource =>
+  JSON.parse(readFileSync(resolve(packageRoot, 'catalog.json'), 'utf8')) as CatalogSource;
+
+/**
+ * Files an asset names relative to itself: tilesets and images of a Tiled or
+ * LDtk map, and the pages of a bitmap font. Atlas JSON is deliberately not
+ * followed: its `meta.image` names the file the atlas was exported from, not
+ * the image shipped next to it.
+ */
+const referencedFiles = (sourceRoot: string, path: string): string[] => {
+  const absolute = resolve(sourceRoot, path);
+  const directory = posix.dirname(path);
+  const lower = path.toLowerCase();
+  const names: string[] = [];
+
+  if (/\.(tmj|tsj|tj|ldtk|ldtkl)$/.test(lower)) {
+    const walk = (value: unknown): void => {
+      if (typeof value === 'string') {
+        if (MEDIA_SUFFIX.test(value)) {
+          names.push(value);
+        }
+      } else if (Array.isArray(value)) {
+        value.forEach(walk);
+      } else if (value !== null && typeof value === 'object') {
+        Object.values(value).forEach(walk);
+      }
+    };
+
+    walk(JSON.parse(readFileSync(absolute, 'utf8')));
+  } else if (/\.(fnt|tsx|tx|tmx)$/.test(lower)) {
+    const text = readFileSync(absolute, 'utf8');
+
+    for (const match of text.matchAll(/(?:file|source)="([^"]+)"/g)) {
+      names.push(match[1]!);
+    }
+  }
+
+  return names.map(name => posix.normalize(posix.join(directory, name)));
+};
+
+const vendorIndex = (sourceRoot: string): Map<string, string> => {
+  const index = new Map<string, string>();
+  const vendorRoot = resolve(sourceRoot, 'demo', 'vendor');
+
+  if (!existsSync(vendorRoot)) {
+    return index;
+  }
+
+  const walk = (directory: string): void => {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+      const absolute = resolve(directory, entry.name);
+
+      if (entry.isDirectory()) {
+        walk(absolute);
+      } else if (statSync(absolute).size > 0) {
+        const hash = sha256Of(absolute);
+
+        if (!index.has(hash)) {
+          index.set(hash, absolute.slice(sourceRoot.length + 1).replaceAll('\\', '/'));
+        }
+      }
+    }
+  };
+
+  walk(vendorRoot);
+
+  return index;
+};
+
+/** Validates the authored catalog and resolves its file sets. Throws listing every problem found. */
+export const resolveCatalog = (source: CatalogSource = readCatalogSource()): ResolvedCatalog => {
+  const sourceRoot = resolve(packageRoot, source.sourceRoot);
+  const problems: string[] = [];
+  const seenKeys = new Set<string>();
+  const seenPaths = new Map<string, string>();
+  const blocked = new Set(source.blocked.map(item => item.path));
+  const upstream = vendorIndex(sourceRoot);
+  const files = new Map<string, ResolvedFile>();
+
+  const addFile = (path: string, role: ResolvedFile['role'], profile: DemoAssetProfile, provenance: string): void => {
+    const existing = files.get(path);
+
+    if (existing !== undefined) {
+      // A file both profiles need ships in the standard one; the extended
+      // archive only adds what the standard profile lacks.
+      if (existing.profile === 'extended' && profile === 'standard') {
+        files.set(path, { ...existing, profile });
+      }
+
+      return;
+    }
+
+    const absolute = resolve(sourceRoot, path);
+
+    if (!existsSync(absolute)) {
+      problems.push(`${path}: file does not exist under ${source.sourceRoot}`);
+
+      return;
+    }
+
+    const sha256 = sha256Of(absolute);
+    const match = upstream.get(sha256);
+    files.set(path, {
+      path,
+      bytes: statSync(absolute).size,
+      sha256,
+      role,
+      profile,
+      provenance,
+      ...(match !== undefined && match !== path ? { upstream: match } : {}),
+    });
+  };
+
+  const entries: ResolvedEntry[] = [];
+
+  for (const entry of source.entries) {
+    const profile = entry.profile ?? 'standard';
+
+    if (!KEY.test(entry.key)) {
+      problems.push(`${entry.key}: keys are lower camelCase identifiers`);
+    }
+
+    if (seenKeys.has(entry.key)) {
+      problems.push(`${entry.key}: duplicate key`);
+    }
+
+    seenKeys.add(entry.key);
+
+    if (!TYPES.has(entry.type)) {
+      problems.push(`${entry.key}: unknown type "${entry.type}"`);
+    }
+
+    if (blocked.has(entry.path)) {
+      problems.push(`${entry.key}: ${entry.path} is blocked from publication`);
+    }
+
+    const previous = seenPaths.get(entry.path);
+
+    if (previous !== undefined) {
+      problems.push(`${entry.key}: ${entry.path} is already published as ${previous}`);
+    }
+
+    seenPaths.set(entry.path, entry.key);
+
+    const provenance = source.provenance[entry.provenance];
+
+    if (provenance === undefined) {
+      problems.push(`${entry.key}: unknown provenance "${entry.provenance}"`);
+      continue;
+    }
+
+    addFile(entry.path, 'entry', profile, entry.provenance);
+    const entryFile = files.get(entry.path);
+
+    if (entryFile === undefined) {
+      continue;
+    }
+
+    // A curated copy of a vendored pack file must name that pack, so the notice
+    // can never attribute a file to the wrong upstream.
+    const pack = entryFile.upstream === undefined ? undefined : VENDOR_PACK.exec(entryFile.upstream)?.[1];
+    const expectedProvenance = pack === undefined ? undefined : kenneyPackId(pack);
+
+    if (expectedProvenance !== undefined && entry.provenance !== expectedProvenance) {
+      problems.push(
+        `${entry.key}: byte-identical to ${entryFile.upstream}, but attributed to ${entry.provenance} instead of ${expectedProvenance}`,
+      );
+    }
+
+    const transitive: string[] = [];
+    const pending = [entry.path, ...Object.values(entry.options ?? {}).flatMap(value => (typeof value === 'object' ? [value.$path] : []))];
+    const visited = new Set<string>();
+
+    while (pending.length > 0) {
+      const next = pending.shift()!;
+
+      if (visited.has(next)) {
+        continue;
+      }
+
+      visited.add(next);
+
+      if (next !== entry.path) {
+        transitive.push(next);
+
+        if (blocked.has(next)) {
+          problems.push(`${entry.key}: depends on blocked ${next}`);
+        }
+
+        const vendorPack = VENDOR_PACK.exec(next)?.[1];
+        const owner =
+          vendorPack !== undefined && source.provenance[kenneyPackId(vendorPack)] !== undefined
+            ? kenneyPackId(vendorPack)
+            : entry.provenance;
+        addFile(next, 'transitive', profile, owner);
+      }
+
+      if (existsSync(resolve(sourceRoot, next))) {
+        pending.push(...referencedFiles(sourceRoot, next));
+      }
+    }
+
+    const resolvedEntryFile = files.get(entry.path)!;
+    entries.push({ ...entry, profile, sha256: resolvedEntryFile.sha256, bytes: resolvedEntryFile.bytes, transitive });
+  }
+
+  const provenanceUsed = new Map<string, DemoAssetProfile>();
+
+  for (const file of files.values()) {
+    if (provenanceUsed.get(file.provenance) !== 'standard') {
+      provenanceUsed.set(file.provenance, file.profile);
+    }
+  }
+
+  for (const [id, profile] of provenanceUsed) {
+    const licenseFile = source.provenance[id]?.licenseFile;
+
+    if (licenseFile !== undefined) {
+      addFile(licenseFile, 'license', profile, id);
+    }
+  }
+
+  for (const id of Object.keys(source.provenance)) {
+    if (!provenanceUsed.has(id)) {
+      problems.push(`provenance "${id}" is not used by any entry`);
+    }
+  }
+
+  for (const path of Object.keys(source.media)) {
+    if (!files.has(path)) {
+      problems.push(`media metadata for ${path}, which no entry publishes`);
+    }
+  }
+
+  if (problems.length > 0) {
+    throw new Error(`catalog.json is invalid:\n  ${problems.join('\n  ')}`);
+  }
+
+  return {
+    source,
+    sourceRoot,
+    entries,
+    files: [...files.values()].sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0)),
+  };
+};
+
+export const filesFor = (catalog: ResolvedCatalog, profile: DemoAssetProfile): ResolvedFile[] =>
+  catalog.files.filter(file => file.profile === profile);
+
+export const bytesOf = (files: readonly ResolvedFile[]): number => files.reduce((sum, file) => sum + file.bytes, 0);
diff --git a/packages/exojs-demo-assets/scripts/generate.ts b/packages/exojs-demo-assets/scripts/generate.ts
new file mode 100644
index 000000000..292de3c16
--- /dev/null
+++ b/packages/exojs-demo-assets/scripts/generate.ts
@@ -0,0 +1,360 @@
+/**
+ * Generates every derived artifact of the demo catalog from `catalog.json`:
+ *
+ * - `src/catalog.generated.ts`: the `DemoAssetDefinitions` type, the category
+ *   table and the URL-parameterized builders behind the factories;
+ * - `src/standard.generated.ts`: the default instance, one literal
+ *   `new URL(..., import.meta.url)` per file so bundlers can see and emit it;
+ * - `manifest.json`: every shipped file with hash, size, role and provenance;
+ * - `THIRD_PARTY_NOTICES.md`: attribution for exactly the shipped files.
+ *
+ * Usage:
+ *   tsx scripts/generate.ts           write the generated sources
+ *   tsx scripts/generate.ts --check   fail when a generated source is stale
+ *   tsx scripts/generate.ts --media   also copy the standard media into media/
+ */
+import { copyFileSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import {
+  bytesOf,
+  type DemoAssetProfile,
+  filesFor,
+  packageRoot,
+  resolveCatalog,
+  type ResolvedCatalog,
+  type ResolvedEntry,
+  sha256Of,
+} from './catalog.ts';
+
+const RESOURCE_TYPES: Readonly<Record<string, { readonly wrapper: string; readonly resource: string }>> = {
+  texture: { wrapper: 'ResourceAsset', resource: 'Texture' },
+  sound: { wrapper: 'ResourceAsset', resource: 'Sound' },
+  json: { wrapper: 'ValueAsset', resource: 'unknown' },
+  music: { wrapper: 'LeaflessAsset', resource: 'AudioStream' },
+  video: { wrapper: 'LeaflessAsset', resource: 'Video' },
+  font: { wrapper: 'LeaflessAsset', resource: 'FontFace' },
+  bmFont: { wrapper: 'LeaflessAsset', resource: 'BmFont' },
+  svg: { wrapper: 'LeaflessAsset', resource: 'HTMLImageElement' },
+};
+
+const HEADER = '// Generated by scripts/generate.ts from catalog.json. Do not edit by hand.\n';
+
+const quote = (value: string): string => `'${value.replaceAll('\\', '\\\\').replaceAll("'", "\\'")}'`;
+
+const descriptorType = (entry: ResolvedEntry): string => {
+  const shape = RESOURCE_TYPES[entry.type]!;
+
+  return `${shape.wrapper}<${entry.valueType ?? shape.resource}>`;
+};
+
+const typeImports = (entries: readonly ResolvedEntry[]): string[] => {
+  const names = new Set<string>();
+
+  for (const entry of entries) {
+    const shape = RESOURCE_TYPES[entry.type]!;
+    names.add(shape.wrapper);
+    const resource = entry.valueType ?? shape.resource;
+
+    if (/^[A-Z]/.test(resource) && resource !== 'FontFace' && resource !== 'HTMLImageElement') {
+      names.add(resource);
+    }
+  }
+
+  return [...names].sort();
+};
+
+/** The value types named in `Asset.type<T>(...)` generics, which a generated module must import itself. */
+const valueTypeImports = (entries: readonly ResolvedEntry[]): string[] =>
+  [...new Set(entries.flatMap(entry => (entry.valueType === undefined ? [] : [entry.valueType])))].sort();
+
+const describe = (catalog: ResolvedCatalog, entry: ResolvedEntry): string => {
+  const provenance = catalog.source.provenance[entry.provenance]!;
+  const size =
+    entry.bytes >= 1_000_000 ? `${(entry.bytes / 1_000_000).toFixed(1)} MB` : `${Math.max(1, Math.round(entry.bytes / 1000))} kB`;
+  const loads = entry.type === 'texture' || entry.type === 'sound' ? '`loader.get()` or `await loader.load()`' : 'await `loader.load()`';
+  const extra = entry.transitive.length > 0 ? ` Also fetches ${entry.transitive.map(path => `\`${path}\``).join(', ')}.` : '';
+
+  return `  /** \`${entry.path}\` (${size}). ${provenance.title}, ${provenance.license}. Load with ${loads}.${extra} */`;
+};
+
+const urlExpression = (entry: ResolvedEntry, url: (path: string) => string): string => {
+  const options = Object.entries(entry.options ?? {});
+  const generic = entry.valueType === undefined ? '' : `<${entry.valueType}>`;
+  const args = [quote(entry.type), url(entry.path)];
+
+  if (options.length > 0) {
+    const rendered = options
+      .map(
+        ([name, value]) =>
+          `${name}: ${typeof value === 'object' ? url(value.$path) : typeof value === 'string' ? quote(value) : String(value)}`,
+      )
+      .join(', ');
+    args.push(`{ ${rendered} }`);
+  }
+
+  return `Asset.type${generic}(${args.join(', ')})`;
+};
+
+const renderInterface = (catalog: ResolvedCatalog, name: string, profile: DemoAssetProfile, doc: string): string => {
+  const entries = catalog.entries.filter(entry => entry.profile === profile);
+
+  return [
+    `/**\n${doc}\n */`,
+    `export interface ${name} {`,
+    ...entries.flatMap(entry => [describe(catalog, entry), `  readonly ${entry.key}: ${descriptorType(entry)};`]),
+    '}',
+  ].join('\n');
+};
+
+const renderBuilder = (catalog: ResolvedCatalog, name: string, typeName: string, profile: DemoAssetProfile): string => {
+  const entries = catalog.entries.filter(entry => entry.profile === profile);
+
+  return [
+    `/** @internal */`,
+    `export const ${name} = (url: (path: string) => string): ${typeName} =>`,
+    '  Object.freeze({',
+    ...entries.map(entry => `    ${entry.key}: ${urlExpression(entry, path => `url(${quote(path)})`)},`),
+    '  });',
+  ].join('\n');
+};
+
+/** Renders `src/catalog.generated.ts`. */
+export const renderCatalogModule = (catalog: ResolvedCatalog): string => {
+  const standard = catalog.entries.filter(entry => entry.profile === 'standard');
+  const categories = [...new Set(standard.map(entry => entry.category))];
+  const imports = typeImports(catalog.entries);
+
+  return `${[
+    HEADER,
+    `import type { ${imports.join(', ')} } from '@codexo/exojs';`,
+    `import { Asset } from '@codexo/exojs';`,
+    '',
+    renderInterface(
+      catalog,
+      'DemoAssetDefinitions',
+      'standard',
+      [
+        ' * The standard demo media, one readonly asset descriptor per file.',
+        ' *',
+        ' * Reading a property only returns its descriptor: nothing is fetched, decoded or',
+        ' * allocated until a loader is handed the descriptor. Textures and sounds can be',
+        ' * claimed synchronously with `loader.get()`; video, music, fonts, bitmap fonts and',
+        ' * SVG images have no synchronous handle and load with `await loader.load()`.',
+      ].join('\n'),
+    ),
+    '',
+    `/** The name of one standard demo asset. */`,
+    `export type DemoAssetKey = keyof DemoAssetDefinitions;`,
+    '',
+    `/** The browsing category a demo asset is listed under. */`,
+    `export type DemoAssetCategory = ${categories.map(quote).join(' | ')};`,
+    '',
+    `/** The category of every standard demo asset, for browsers and filters. Static data; reading it loads nothing. */`,
+    `export const demoAssetCategories: Readonly<Record<DemoAssetKey, DemoAssetCategory>> = Object.freeze({`,
+    ...standard.map(entry => `  ${entry.key}: ${quote(entry.category)},`),
+    '});',
+    '',
+    renderBuilder(catalog, 'buildDemoAssets', 'DemoAssetDefinitions', 'standard'),
+    '',
+    renderInterface(
+      catalog,
+      'ExtendedDemoAssetDefinitions',
+      'extended',
+      [
+        ' * The extended demo media, hosted separately from the npm package.',
+        ' *',
+        ' * These files are not in the package tarball: download the extended media archive,',
+        ' * serve it, and pass its location to `createExtendedDemoAssets()`.',
+      ].join('\n'),
+    ),
+    '',
+    renderBuilder(catalog, 'buildExtendedDemoAssets', 'ExtendedDemoAssetDefinitions', 'extended'),
+    '',
+  ].join('\n')}`;
+};
+
+/** Renders `src/standard.generated.ts`. */
+export const renderStandardModule = (catalog: ResolvedCatalog): string => {
+  const standard = catalog.entries.filter(entry => entry.profile === 'standard');
+  const imports = valueTypeImports(standard);
+  const valueTypeLine = imports.length === 0 ? '' : `import type { ${imports.join(', ')} } from '@codexo/exojs';`;
+
+  return `${[
+    HEADER,
+    valueTypeLine,
+    `import { Asset } from '@codexo/exojs';`,
+    '',
+    `import type { DemoAssetDefinitions } from './catalog.generated.js';`,
+    '',
+    '// One literal `new URL(..., import.meta.url)` per file is what lets a bundler',
+    '// find, copy and rewrite each media file; a computed path would hide them.',
+    '/**',
+    ' * The standard demo assets, resolved against the media shipped inside this',
+    ' * package. Importing or reading it fetches nothing; hand a descriptor to a',
+    ' * loader to load it.',
+    ' *',
+    ' * @example',
+    ' * ```ts',
+    " * import { demoAssets as assets } from '@codexo/exojs-demo-assets';",
+    ' *',
+    ' * const ship = new Sprite(this.loader.get(assets.ship));',
+    ' * const video = await this.loader.load(assets.videoHighRes);',
+    ' * ```',
+    ' */',
+    'export const demoAssets: DemoAssetDefinitions = Object.freeze({',
+    ...standard.map(
+      entry => `  ${entry.key}: ${urlExpression(entry, path => `new URL(${quote(`../media/${path}`)}, import.meta.url).href`)},`,
+    ),
+    '});',
+    '',
+  ].join('\n')}`;
+};
+
+/** Renders `manifest.json`. */
+export const renderManifest = (catalog: ResolvedCatalog, version: string): string => {
+  const profile = (name: DemoAssetProfile): object => {
+    const files = filesFor(catalog, name);
+
+    return { files: files.length, bytes: bytesOf(files) };
+  };
+
+  return `${JSON.stringify(
+    {
+      schemaVersion: 1,
+      package: '@codexo/exojs-demo-assets',
+      version,
+      profiles: { standard: profile('standard'), extended: profile('extended') },
+      entries: catalog.entries.map(entry => ({
+        key: entry.key,
+        type: entry.type,
+        category: entry.category,
+        profile: entry.profile,
+        path: entry.path,
+        bytes: entry.bytes,
+        sha256: entry.sha256,
+        provenance: entry.provenance,
+        ...(entry.options === undefined ? {} : { options: entry.options }),
+        ...(entry.transitive.length === 0 ? {} : { transitive: entry.transitive }),
+        ...(catalog.source.media[entry.path] === undefined ? {} : { media: catalog.source.media[entry.path] }),
+      })),
+      files: catalog.files,
+      provenance: catalog.source.provenance,
+      blocked: catalog.source.blocked,
+    },
+    null,
+    2,
+  )}\n`;
+};
+
+/** Renders the notices for one profile: every provenance record that one of its files uses. */
+export const renderNotices = (catalog: ResolvedCatalog, profiles: readonly DemoAssetProfile[]): string => {
+  const files = catalog.files.filter(file => profiles.includes(file.profile));
+  const byProvenance = new Map<string, string[]>();
+
+  for (const file of files) {
+    byProvenance.set(file.provenance, [...(byProvenance.get(file.provenance) ?? []), file.path]);
+  }
+
+  const sections = [...byProvenance.entries()].map(([id, paths]) => {
+    const record = catalog.source.provenance[id]!;
+    const lines = [
+      `## ${record.title}`,
+      '',
+      `- Author: ${record.author}`,
+      `- License: ${record.license} (${record.licenseUrl})`,
+      `- Source: ${record.source}`,
+      ...(record.attribution === undefined ? [] : [`- Attribution: ${record.attribution}`]),
+      ...(record.note === undefined ? [] : [`- Note: ${record.note}`]),
+      '',
+      'Files:',
+      '',
+      ...paths.map(path => `- \`${path}\``),
+    ];
+
+    return lines.join('\n');
+  });
+
+  return `${[
+    '# Third-Party Notices',
+    '',
+    'Attribution for every media file this delivery contains. Paths are relative to the media root',
+    '(`media/` in the npm package, the archive root in a media archive). Files whose license is',
+    'MIT are original ExoJS work.',
+    '',
+    ...sections.flatMap(section => [section, '']),
+  ].join('\n')}`;
+};
+
+const readVersion = (): string => (JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf8')) as { version: string }).version;
+
+/** Every generated file with its rendered content, keyed by package-relative path. */
+export const renderAll = (catalog: ResolvedCatalog = resolveCatalog()): Record<string, string> => ({
+  'src/catalog.generated.ts': renderCatalogModule(catalog),
+  'src/standard.generated.ts': renderStandardModule(catalog),
+  'manifest.json': renderManifest(catalog, readVersion()),
+  'THIRD_PARTY_NOTICES.md': renderNotices(catalog, ['standard']),
+});
+
+/** Replaces `media/` with exactly the standard files, verifying each copy against its manifest hash. */
+export const copyStandardMedia = (catalog: ResolvedCatalog, target: string): number => {
+  rmSync(target, { recursive: true, force: true });
+
+  for (const file of filesFor(catalog, 'standard')) {
+    const destination = resolve(target, file.path);
+    mkdirSync(dirname(destination), { recursive: true });
+    copyFileSync(resolve(catalog.sourceRoot, file.path), destination);
+
+    if (sha256Of(destination) !== file.sha256) {
+      throw new Error(`${file.path}: copy does not match its manifest hash`);
+    }
+  }
+
+  return filesFor(catalog, 'standard').length;
+};
+
+const main = (): void => {
+  const args = new Set(process.argv.slice(2));
+  const catalog = resolveCatalog();
+  const rendered = renderAll(catalog);
+  const stale: string[] = [];
+
+  for (const [path, content] of Object.entries(rendered)) {
+    const target = resolve(packageRoot, path);
+    let current: string;
+
+    try {
+      current = readFileSync(target, 'utf8');
+    } catch {
+      current = '';
+    }
+
+    if (current === content) {
+      continue;
+    }
+
+    if (args.has('--check')) {
+      stale.push(path);
+    } else {
+      writeFileSync(target, content, 'utf8');
+      process.stdout.write(`[demo-assets] wrote ${path}\n`);
+    }
+  }
+
+  if (stale.length > 0) {
+    process.stderr.write(
+      `[demo-assets] stale generated files (run \`pnpm --filter @codexo/exojs-demo-assets generate\`): ${stale.join(', ')}\n`,
+    );
+    process.exit(1);
+  }
+
+  if (args.has('--media')) {
+    const count = copyStandardMedia(catalog, resolve(packageRoot, 'media'));
+    process.stdout.write(`[demo-assets] copied ${count} standard media files into media/\n`);
+  }
+};
+
+if (process.argv[1] !== undefined && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  main();
+}
diff --git a/packages/exojs-demo-assets/src/baseUrl.ts b/packages/exojs-demo-assets/src/baseUrl.ts
new file mode 100644
index 000000000..a7720df16
--- /dev/null
+++ b/packages/exojs-demo-assets/src/baseUrl.ts
@@ -0,0 +1,42 @@
+/**
+ * Turns a caller's media location into the directory URL every catalog path is
+ * resolved against.
+ *
+ * A relative string is rejected rather than resolved against the document:
+ * what it is relative to differs between a page, a worker, a bundled chunk and
+ * a test runner, and guessing wrong fails only once a file is fetched.
+ *
+ * @internal
+ */
+export const resolveBaseUrl = (baseUrl: string | URL, caller: string): URL => {
+  const text = typeof baseUrl === 'string' ? baseUrl : (baseUrl as { readonly href?: unknown } | null)?.href;
+
+  if (typeof text !== 'string') {
+    throw new TypeError(`${caller}: expected the media base as a string or URL.`);
+  }
+
+  let base: URL;
+
+  try {
+    base = new URL(text);
+  } catch {
+    throw new TypeError(
+      `${caller}: the media base "${text}" is not an absolute URL. Resolve it first, for example ` +
+        `new URL('${text}', import.meta.url) or new URL('${text}', location.href).`,
+    );
+  }
+
+  // A base without a trailing slash would make every path resolve next to the
+  // directory rather than inside it.
+  if (!base.pathname.endsWith('/')) {
+    base.pathname = `${base.pathname}/`;
+  }
+
+  return base;
+};
+
+/** @internal */
+export const urlResolver =
+  (base: URL): ((path: string) => string) =>
+  (path: string): string =>
+    new URL(path, base).href;
diff --git a/packages/exojs-demo-assets/src/catalog.generated.ts b/packages/exojs-demo-assets/src/catalog.generated.ts
new file mode 100644
index 000000000..0951409eb
--- /dev/null
+++ b/packages/exojs-demo-assets/src/catalog.generated.ts
@@ -0,0 +1,603 @@
+// Generated by scripts/generate.ts from catalog.json. Do not edit by hand.
+
+import type { AudioStream, BmFont, LeaflessAsset, ResourceAsset, Sound, SpritesheetData, Texture, ValueAsset, Video } from '@codexo/exojs';
+import { Asset } from '@codexo/exojs';
+
+/**
+ * The standard demo media, one readonly asset descriptor per file.
+ *
+ * Reading a property only returns its descriptor: nothing is fetched, decoded or
+ * allocated until a loader is handed the descriptor. Textures and sounds can be
+ * claimed synchronously with `loader.get()`; video, music, fonts, bitmap fonts and
+ * SVG images have no synchronous handle and load with `await loader.load()`.
+ */
+export interface DemoAssetDefinitions {
+  /** `demo/textures/ship-a.png` (4 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly ship: ResourceAsset<Texture>;
+  /** `demo/textures/particle-flame.png` (54 kB). Kenney Particle Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly particleFlame: ResourceAsset<Texture>;
+  /** `demo/textures/particle-smoke.png` (40 kB). Kenney Particle Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly particleSmoke: ResourceAsset<Texture>;
+  /** `demo/textures/particle-star.png` (31 kB). Kenney Particle Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly particleStar: ResourceAsset<Texture>;
+  /** `demo/textures/particle-spark.png` (80 kB). Kenney Particle Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly particleSpark: ResourceAsset<Texture>;
+  /** `demo/textures/particle-light.png` (93 kB). Kenney Particle Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly particleLight: ResourceAsset<Texture>;
+  /** `demo/textures/pixel-white.png` (1 kB). Kenney Development Essentials, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly pixelWhite: ResourceAsset<Texture>;
+  /** `demo/textures/pixel-black.png` (1 kB). Kenney Development Essentials, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly pixelBlack: ResourceAsset<Texture>;
+  /** `demo/textures/pixel-transparent.png` (1 kB). Kenney Development Essentials, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly pixelTransparent: ResourceAsset<Texture>;
+  /** `demo/textures/checkerboard-transparent.png` (1 kB). Kenney Development Essentials, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly checkerboardTransparent: ResourceAsset<Texture>;
+  /** `demo/textures/kenney-uv.png` (9 kB). Kenney Development Essentials, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly kenneyUv: ResourceAsset<Texture>;
+  /** `demo/textures/prototype-dark-01.png` (3 kB). Kenney Prototype Textures, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly prototypeDark01: ResourceAsset<Texture>;
+  /** `demo/textures/prototype-light-01.png` (1 kB). Kenney Prototype Textures, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly prototypeLight01: ResourceAsset<Texture>;
+  /** `demo/textures/prototype-grid.png` (3 kB). Kenney Prototype Textures, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly prototypeGrid: ResourceAsset<Texture>;
+  /** `technical/alpha/alpha-edge-straight.png` (1 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly alphaEdgeStraight: ResourceAsset<Texture>;
+  /** `technical/alpha/alpha-gradient-rings.png` (64 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly alphaGradientRings: ResourceAsset<Texture>;
+  /** `technical/filtering/checker-256.png` (25 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly checker256: ResourceAsset<Texture>;
+  /** `technical/filtering/pixel-grid-128.png` (1 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly pixelGrid128: ResourceAsset<Texture>;
+  /** `technical/filtering/uv-grid-256.png` (32 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly uvGrid256: ResourceAsset<Texture>;
+  /** `technical/color/srgb-ramp.png` (1 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly srgbRamp: ResourceAsset<Texture>;
+  /** `technical/color/hue-ramp.png` (1 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly hueRamp: ResourceAsset<Texture>;
+  /** `technical/color/primary-ramp.png` (1 kB). ExoJS original work, MIT. Load with `loader.get()` or `await loader.load()`. */
+  readonly primaryRamp: ResourceAsset<Texture>;
+  /** `demo/backgrounds/platformer-clouds.png` (2 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly backgroundPlatformerClouds: ResourceAsset<Texture>;
+  /** `demo/backgrounds/platformer-hills.png` (2 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly backgroundPlatformerHills: ResourceAsset<Texture>;
+  /** `demo/backgrounds/castles.png` (15 kB). Kenney Background Elements Remastered, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly backgroundCastles: ResourceAsset<Texture>;
+  /** `demo/backgrounds/forest.png` (20 kB). Kenney Background Elements Remastered, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly backgroundForest: ResourceAsset<Texture>;
+  /** `demo/spritesheets/kenney/platformer-backgrounds.png` (20 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly platformerBackgroundsImage: ResourceAsset<Texture>;
+  /** `demo/spritesheets/kenney/platformer-backgrounds.json` (3 kB). Kenney spritesheets converted to ExoJS atlas JSON, CC0-1.0. Load with await `loader.load()`. */
+  readonly platformerBackgroundsAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/spritesheets/kenney/platformer-characters.png` (70 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly platformerCharactersImage: ResourceAsset<Texture>;
+  /** `demo/spritesheets/kenney/platformer-characters.json` (9 kB). Kenney spritesheets converted to ExoJS atlas JSON, CC0-1.0. Load with await `loader.load()`. */
+  readonly platformerCharactersAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/spritesheets/kenney/platformer-enemies.png` (36 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly platformerEnemiesImage: ResourceAsset<Texture>;
+  /** `demo/spritesheets/kenney/platformer-enemies.json` (12 kB). Kenney spritesheets converted to ExoJS atlas JSON, CC0-1.0. Load with await `loader.load()`. */
+  readonly platformerEnemiesAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/spritesheets/kenney/platformer-tiles.png` (112 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly platformerTilesImage: ResourceAsset<Texture>;
+  /** `demo/spritesheets/kenney/platformer-tiles.json` (63 kB). Kenney spritesheets converted to ExoJS atlas JSON, CC0-1.0. Load with await `loader.load()`. */
+  readonly platformerTilesAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/spritesheets/kenney/background-elements.png` (87 kB). Kenney Background Elements Remastered, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly backgroundElementsImage: ResourceAsset<Texture>;
+  /** `demo/spritesheets/kenney/background-elements.json` (14 kB). Kenney spritesheets converted to ExoJS atlas JSON, CC0-1.0. Load with await `loader.load()`. */
+  readonly backgroundElementsAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/spritesheets/kenney/map-pack.png` (189 kB). Kenney Map Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly mapPackImage: ResourceAsset<Texture>;
+  /** `demo/spritesheets/kenney/map-pack.json` (37 kB). Kenney spritesheets converted to ExoJS atlas JSON, CC0-1.0. Load with await `loader.load()`. */
+  readonly mapPackAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png` (205 kB). Kenney Map Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly mapPackTilesheet: ResourceAsset<Texture>;
+  /** `demo/input-prompts/generic.png` (7 kB). Kenney Input Prompts, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly genericInputPromptsImage: ResourceAsset<Texture>;
+  /** `demo/input-prompts/generic.json` (7 kB). Kenney Input Prompts, CC0-1.0. Load with await `loader.load()`. */
+  readonly genericInputPromptsAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/input-prompts/keyboard-mouse.png` (31 kB). Kenney Input Prompts, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly keyboardMouseInputPromptsImage: ResourceAsset<Texture>;
+  /** `demo/input-prompts/keyboard-mouse.json` (51 kB). Kenney Input Prompts, CC0-1.0. Load with await `loader.load()`. */
+  readonly keyboardMouseInputPromptsAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/input-prompts/nintendo-switch.png` (24 kB). Kenney Input Prompts, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly nintendoSwitchInputPromptsImage: ResourceAsset<Texture>;
+  /** `demo/input-prompts/nintendo-switch.json` (23 kB). Kenney Input Prompts, CC0-1.0. Load with await `loader.load()`. */
+  readonly nintendoSwitchInputPromptsAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/input-prompts/playstation-series.png` (30 kB). Kenney Input Prompts, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly playstationSeriesInputPromptsImage: ResourceAsset<Texture>;
+  /** `demo/input-prompts/playstation-series.json` (28 kB). Kenney Input Prompts, CC0-1.0. Load with await `loader.load()`. */
+  readonly playstationSeriesInputPromptsAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/input-prompts/xbox-series.png` (22 kB). Kenney Input Prompts, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly xboxSeriesInputPromptsImage: ResourceAsset<Texture>;
+  /** `demo/input-prompts/xbox-series.json` (20 kB). Kenney Input Prompts, CC0-1.0. Load with await `loader.load()`. */
+  readonly xboxSeriesInputPromptsAtlas: ValueAsset<SpritesheetData>;
+  /** `demo/svg/play.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconPlay: LeaflessAsset<HTMLImageElement>;
+  /** `demo/svg/pause.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconPause: LeaflessAsset<HTMLImageElement>;
+  /** `demo/svg/reset.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconReset: LeaflessAsset<HTMLImageElement>;
+  /** `demo/svg/arrow-right.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconArrowRight: LeaflessAsset<HTMLImageElement>;
+  /** `demo/svg/sparkle.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconSparkle: LeaflessAsset<HTMLImageElement>;
+  /** `demo/svg/audio-wave.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconAudioWave: LeaflessAsset<HTMLImageElement>;
+  /** `demo/svg/image-placeholder.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconImagePlaceholder: LeaflessAsset<HTMLImageElement>;
+  /** `demo/svg/rune-mark.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly iconRuneMark: LeaflessAsset<HTMLImageElement>;
+  /** `svg/exo-wordmark.svg` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly exoWordmark: LeaflessAsset<HTMLImageElement>;
+  /** `demo/cursors/arrow.svg` (1 kB). Kenney Cursor Pack, CC0-1.0. Load with await `loader.load()`. */
+  readonly cursorArrow: LeaflessAsset<HTMLImageElement>;
+  /** `demo/cursors/pointer.svg` (1 kB). Kenney Cursor Pack, CC0-1.0. Load with await `loader.load()`. */
+  readonly cursorPointer: LeaflessAsset<HTMLImageElement>;
+  /** `demo/cursors/hand.svg` (1 kB). Kenney Cursor Pack, CC0-1.0. Load with await `loader.load()`. */
+  readonly cursorHand: LeaflessAsset<HTMLImageElement>;
+  /** `demo/cursors/busy.svg` (1 kB). Kenney Cursor Pack, CC0-1.0. Load with await `loader.load()`. */
+  readonly cursorBusy: LeaflessAsset<HTMLImageElement>;
+  /** `demo/cursors/cross.svg` (1 kB). Kenney Cursor Pack, CC0-1.0. Load with await `loader.load()`. */
+  readonly cursorCross: LeaflessAsset<HTMLImageElement>;
+  /** `demo/fonts/Kenney Future.ttf` (34 kB). Kenney Fonts, CC0-1.0. Load with await `loader.load()`. */
+  readonly fontKenneyFuture: LeaflessAsset<FontFace>;
+  /** `demo/fonts/Kenney Pixel.ttf` (28 kB). Kenney Fonts, CC0-1.0. Load with await `loader.load()`. */
+  readonly fontKenneyPixel: LeaflessAsset<FontFace>;
+  /** `demo/fonts/Kenney Mini.ttf` (26 kB). Kenney Fonts, CC0-1.0. Load with await `loader.load()`. */
+  readonly fontKenneyMini: LeaflessAsset<FontFace>;
+  /** `demo/fonts/Kenney Mini Square Mono.ttf` (25 kB). Kenney Fonts, CC0-1.0. Load with await `loader.load()`. */
+  readonly fontKenneyMiniSquareMono: LeaflessAsset<FontFace>;
+  /** `demo/fonts/kenney-blocks-32.fnt` (11 kB). Kenney Blocks bitmap font (32 px), CC0-1.0. Load with await `loader.load()`. Also fetches `demo/fonts/kenney-blocks-32.png`. */
+  readonly fontKenneyBlocksFnt: LeaflessAsset<BmFont>;
+  /** `demo/fonts/kenney-blocks-32.png` (3 kB). Kenney Blocks bitmap font (32 px), CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly fontKenneyBlocksPng: ResourceAsset<Texture>;
+  /** `demo/sound/ui-click.ogg` (5 kB). Kenney Interface Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundUiClick: ResourceAsset<Sound>;
+  /** `demo/sound/ui-confirm.ogg` (9 kB). Kenney Interface Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundUiConfirm: ResourceAsset<Sound>;
+  /** `demo/sound/ui-bong.ogg` (5 kB). Kenney Interface Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundUiBong: ResourceAsset<Sound>;
+  /** `demo/sound/back.ogg` (7 kB). Kenney Interface Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundBack: ResourceAsset<Sound>;
+  /** `demo/sound/click-alt.ogg` (11 kB). Kenney UI Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundClickAlt: ResourceAsset<Sound>;
+  /** `demo/sound/switch.ogg` (9 kB). Kenney UI Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundSwitch: ResourceAsset<Sound>;
+  /** `demo/sound/impact-light.ogg` (6 kB). Kenney Impact Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundImpactLight: ResourceAsset<Sound>;
+  /** `demo/sound/impact-heavy.ogg` (6 kB). Kenney Impact Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundImpactHeavy: ResourceAsset<Sound>;
+  /** `demo/sound/impact-wood.ogg` (7 kB). Kenney Impact Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundImpactWood: ResourceAsset<Sound>;
+  /** `audio/impactBell_heavy_000.ogg` (14 kB). Kenney Impact Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundImpactBellHeavy: ResourceAsset<Sound>;
+  /** `audio/impactGlass_heavy_000.ogg` (7 kB). Kenney Impact Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundImpactGlassHeavy: ResourceAsset<Sound>;
+  /** `audio/impactWood_heavy_000.ogg` (6 kB). Kenney Impact Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundImpactWoodHeavy: ResourceAsset<Sound>;
+  /** `audio/impactMetal_heavy_000.ogg` (6 kB). Kenney Impact Sounds, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundImpactMetalHeavy: ResourceAsset<Sound>;
+  /** `demo/sound/jump.ogg` (6 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundJump: ResourceAsset<Sound>;
+  /** `demo/sound/coin.ogg` (6 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundCoin: ResourceAsset<Sound>;
+  /** `demo/sound/hurt.ogg` (6 kB). Kenney New Platformer Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundHurt: ResourceAsset<Sound>;
+  /** `demo/sound/power-up.ogg` (9 kB). Kenney Digital Audio, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundPowerUp: ResourceAsset<Sound>;
+  /** `demo/sound/laser.ogg` (9 kB). Kenney Digital Audio, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly soundLaser: ResourceAsset<Sound>;
+  /** `demo/sound-sprites/ui/ui.ogg` (17 kB). Sound sprites assembled from Kenney Interface Sounds, UI Pack, Impact Sounds and Digital Audio, CC0-1.0. Load with `loader.get()` or `await loader.load()`. Also fetches `demo/sound-sprites/ui/ui.json`. */
+  readonly uiSoundSprite: ResourceAsset<Sound>;
+  /** `demo/sound-sprites/impacts/impacts.ogg` (11 kB). Sound sprites assembled from Kenney Interface Sounds, UI Pack, Impact Sounds and Digital Audio, CC0-1.0. Load with `loader.get()` or `await loader.load()`. Also fetches `demo/sound-sprites/impacts/impacts.json`. */
+  readonly impactsSoundSprite: ResourceAsset<Sound>;
+  /** `demo/sound-sprites/digital/digital.ogg` (23 kB). Sound sprites assembled from Kenney Interface Sounds, UI Pack, Impact Sounds and Digital Audio, CC0-1.0. Load with `loader.get()` or `await loader.load()`. Also fetches `demo/sound-sprites/digital/digital.json`. */
+  readonly digitalSoundSprite: ResourceAsset<Sound>;
+  /** `demo/music/demo-loop-main.ogg` (12 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly musicLoopMain: LeaflessAsset<AudioStream>;
+  /** `demo/music/demo-loop-a.ogg` (16 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly musicLoopA: LeaflessAsset<AudioStream>;
+  /** `demo/music/demo-loop-b.ogg` (13 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly musicLoopB: LeaflessAsset<AudioStream>;
+  /** `demo/music/jingle-success.ogg` (40 kB). Kenney Music Jingles, CC0-1.0. Load with await `loader.load()`. */
+  readonly musicJingleSuccess: LeaflessAsset<AudioStream>;
+  /** `demo/music/jingle-failure.ogg` (9 kB). Kenney Music Jingles, CC0-1.0. Load with await `loader.load()`. */
+  readonly musicJingleFailure: LeaflessAsset<AudioStream>;
+  /** `demo/music/jingle-retro-a.ogg` (10 kB). Kenney Music Jingles, CC0-1.0. Load with await `loader.load()`. */
+  readonly musicJingleRetroA: LeaflessAsset<AudioStream>;
+  /** `demo/music/jingle-retro-b.ogg` (16 kB). Kenney Music Jingles, CC0-1.0. Load with await `loader.load()`. */
+  readonly musicJingleRetroB: LeaflessAsset<AudioStream>;
+  /** `demo/voice/congratulations.ogg` (14 kB). Kenney Voiceover Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly voiceCongratulations: ResourceAsset<Sound>;
+  /** `demo/voice/mission-complete.ogg` (11 kB). Kenney Voiceover Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly voiceMissionComplete: ResourceAsset<Sound>;
+  /** `demo/voice/objective-achieved.ogg` (13 kB). Kenney Voiceover Pack, CC0-1.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly voiceObjectiveAchieved: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_001.wav` (84 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom001: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_002.wav` (7 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom002: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_003.wav` (7 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom003: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_004.wav` (109 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom004: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_005.wav` (109 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom005: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_006.wav` (47 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom006: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_007.wav` (124 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom007: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_008.wav` (124 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom008: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_009.wav` (17 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom009: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_010.wav` (10 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom010: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_011.wav` (4 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom011: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_012.wav` (2 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom012: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_013.wav` (1 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom013: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_014.wav` (1 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom014: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_015.wav` (83 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom015: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_016.wav` (209 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom016: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_017.wav` (194 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom017: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_018.wav` (55 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom018: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_019.wav` (18 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom019: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_020.wav` (34 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom020: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_021.wav` (12 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom021: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_022.wav` (6 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom022: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_023.wav` (1 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom023: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_024.wav` (80 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom024: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_025.wav` (81 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom025: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_026.wav` (80 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom026: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_027.wav` (80 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom027: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_028.wav` (125 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom028: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_029.wav` (109 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom029: ResourceAsset<Sound>;
+  /** `audio/ir/AK-SROOMS_030.wav` (94 kB). Adventure Kid Reverb Toolkit, AK-SROOMS small-room impulse responses, CC-BY-4.0. Load with `loader.get()` or `await loader.load()`. */
+  readonly impulseRoom030: ResourceAsset<Sound>;
+  /** `json/maps/isometric-landscape.tmj` (3 kB). ExoJS original work, MIT. Load with await `loader.load()`. Also fetches `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_020.png`, `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_000.png`, `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_001.png`, `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_005.png`, `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_030.png`, `demo/vendor/kenney/isometric-tiles-landscape/PNG/landscapeTiles_040.png`. */
+  readonly isometricLandscape: ValueAsset<unknown>;
+  /** `json/maps/drift-fields.tmj` (11 kB). ExoJS original work, MIT. Load with await `loader.load()`. Also fetches `demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png`. */
+  readonly driftFieldsMap: ValueAsset<unknown>;
+  /** `json/maps/harbor-plaza.tmj` (3 kB). ExoJS original work, MIT. Load with await `loader.load()`. Also fetches `demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png`. */
+  readonly harborPlazaMap: ValueAsset<unknown>;
+  /** `json/maps/harbor-world.ldtk` (9 kB). ExoJS original work, MIT. Load with await `loader.load()`. Also fetches `demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png`. */
+  readonly harborWorldProject: ValueAsset<unknown>;
+  /** `json/maps/ownership-workshop.tmj` (1 kB). ExoJS original work, MIT. Load with await `loader.load()`. Also fetches `demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png`. */
+  readonly ownershipWorkshopMap: ValueAsset<unknown>;
+  /** `json/maps/physics-room.tmj` (2 kB). ExoJS original work, MIT. Load with await `loader.load()`. Also fetches `demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png`. */
+  readonly physicsRoomMap: ValueAsset<unknown>;
+  /** `demo/video/demo-loop.webm` (9 kB). ExoJS original work, MIT. Load with await `loader.load()`. */
+  readonly videoDemoLoop: LeaflessAsset<Video>;
+  /** `demo/video/clips/high-res.mp4` (4.2 MB). Glass Half, CC-BY-3.0. Load with await `loader.load()`. */
+  readonly videoHighRes: LeaflessAsset<Video>;
+  /** `demo/video/clips/high-fps.webm` (10.6 MB). Big Buck Bunny, Sunflower version (60 fps), CC-BY-3.0. Load with await `loader.load()`. */
+  readonly videoHighFps: LeaflessAsset<Video>;
+}
+
+/** The name of one standard demo asset. */
+export type DemoAssetKey = keyof DemoAssetDefinitions;
+
+/** The browsing category a demo asset is listed under. */
+export type DemoAssetCategory = 'textures' | 'technical' | 'backgrounds' | 'spritesheets' | 'inputPrompts' | 'icons' | 'cursors' | 'fonts' | 'sound' | 'soundSprites' | 'music' | 'voice' | 'impulseResponses' | 'maps' | 'video';
+
+/** The category of every standard demo asset, for browsers and filters. Static data; reading it loads nothing. */
+export const demoAssetCategories: Readonly<Record<DemoAssetKey, DemoAssetCategory>> = Object.freeze({
+  ship: 'textures',
+  particleFlame: 'textures',
+  particleSmoke: 'textures',
+  particleStar: 'textures',
+  particleSpark: 'textures',
+  particleLight: 'textures',
+  pixelWhite: 'textures',
+  pixelBlack: 'textures',
+  pixelTransparent: 'textures',
+  checkerboardTransparent: 'textures',
+  kenneyUv: 'textures',
+  prototypeDark01: 'textures',
+  prototypeLight01: 'textures',
+  prototypeGrid: 'textures',
+  alphaEdgeStraight: 'technical',
+  alphaGradientRings: 'technical',
+  checker256: 'technical',
+  pixelGrid128: 'technical',
+  uvGrid256: 'technical',
+  srgbRamp: 'technical',
+  hueRamp: 'technical',
+  primaryRamp: 'technical',
+  backgroundPlatformerClouds: 'backgrounds',
+  backgroundPlatformerHills: 'backgrounds',
+  backgroundCastles: 'backgrounds',
+  backgroundForest: 'backgrounds',
+  platformerBackgroundsImage: 'spritesheets',
+  platformerBackgroundsAtlas: 'spritesheets',
+  platformerCharactersImage: 'spritesheets',
+  platformerCharactersAtlas: 'spritesheets',
+  platformerEnemiesImage: 'spritesheets',
+  platformerEnemiesAtlas: 'spritesheets',
+  platformerTilesImage: 'spritesheets',
+  platformerTilesAtlas: 'spritesheets',
+  backgroundElementsImage: 'spritesheets',
+  backgroundElementsAtlas: 'spritesheets',
+  mapPackImage: 'spritesheets',
+  mapPackAtlas: 'spritesheets',
+  mapPackTilesheet: 'spritesheets',
+  genericInputPromptsImage: 'inputPrompts',
+  genericInputPromptsAtlas: 'inputPrompts',
+  keyboardMouseInputPromptsImage: 'inputPrompts',
+  keyboardMouseInputPromptsAtlas: 'inputPrompts',
+  nintendoSwitchInputPromptsImage: 'inputPrompts',
+  nintendoSwitchInputPromptsAtlas: 'inputPrompts',
+  playstationSeriesInputPromptsImage: 'inputPrompts',
+  playstationSeriesInputPromptsAtlas: 'inputPrompts',
+  xboxSeriesInputPromptsImage: 'inputPrompts',
+  xboxSeriesInputPromptsAtlas: 'inputPrompts',
+  iconPlay: 'icons',
+  iconPause: 'icons',
+  iconReset: 'icons',
+  iconArrowRight: 'icons',
+  iconSparkle: 'icons',
+  iconAudioWave: 'icons',
+  iconImagePlaceholder: 'icons',
+  iconRuneMark: 'icons',
+  exoWordmark: 'icons',
+  cursorArrow: 'cursors',
+  cursorPointer: 'cursors',
+  cursorHand: 'cursors',
+  cursorBusy: 'cursors',
+  cursorCross: 'cursors',
+  fontKenneyFuture: 'fonts',
+  fontKenneyPixel: 'fonts',
+  fontKenneyMini: 'fonts',
+  fontKenneyMiniSquareMono: 'fonts',
+  fontKenneyBlocksFnt: 'fonts',
+  fontKenneyBlocksPng: 'fonts',
+  soundUiClick: 'sound',
+  soundUiConfirm: 'sound',
+  soundUiBong: 'sound',
+  soundBack: 'sound',
+  soundClickAlt: 'sound',
+  soundSwitch: 'sound',
+  soundImpactLight: 'sound',
+  soundImpactHeavy: 'sound',
+  soundImpactWood: 'sound',
+  soundImpactBellHeavy: 'sound',
+  soundImpactGlassHeavy: 'sound',
+  soundImpactWoodHeavy: 'sound',
+  soundImpactMetalHeavy: 'sound',
+  soundJump: 'sound',
+  soundCoin: 'sound',
+  soundHurt: 'sound',
+  soundPowerUp: 'sound',
+  soundLaser: 'sound',
+  uiSoundSprite: 'soundSprites',
+  impactsSoundSprite: 'soundSprites',
+  digitalSoundSprite: 'soundSprites',
+  musicLoopMain: 'music',
+  musicLoopA: 'music',
+  musicLoopB: 'music',
+  musicJingleSuccess: 'music',
+  musicJingleFailure: 'music',
+  musicJingleRetroA: 'music',
+  musicJingleRetroB: 'music',
+  voiceCongratulations: 'voice',
+  voiceMissionComplete: 'voice',
+  voiceObjectiveAchieved: 'voice',
+  impulseRoom001: 'impulseResponses',
+  impulseRoom002: 'impulseResponses',
+  impulseRoom003: 'impulseResponses',
+  impulseRoom004: 'impulseResponses',
+  impulseRoom005: 'impulseResponses',
+  impulseRoom006: 'impulseResponses',
+  impulseRoom007: 'impulseResponses',
+  impulseRoom008: 'impulseResponses',
+  impulseRoom009: 'impulseResponses',
+  impulseRoom010: 'impulseResponses',
+  impulseRoom011: 'impulseResponses',
+  impulseRoom012: 'impulseResponses',
+  impulseRoom013: 'impulseResponses',
+  impulseRoom014: 'impulseResponses',
+  impulseRoom015: 'impulseResponses',
+  impulseRoom016: 'impulseResponses',
+  impulseRoom017: 'impulseResponses',
+  impulseRoom018: 'impulseResponses',
+  impulseRoom019: 'impulseResponses',
+  impulseRoom020: 'impulseResponses',
+  impulseRoom021: 'impulseResponses',
+  impulseRoom022: 'impulseResponses',
+  impulseRoom023: 'impulseResponses',
+  impulseRoom024: 'impulseResponses',
+  impulseRoom025: 'impulseResponses',
+  impulseRoom026: 'impulseResponses',
+  impulseRoom027: 'impulseResponses',
+  impulseRoom028: 'impulseResponses',
+  impulseRoom029: 'impulseResponses',
+  impulseRoom030: 'impulseResponses',
+  isometricLandscape: 'maps',
+  driftFieldsMap: 'maps',
+  harborPlazaMap: 'maps',
+  harborWorldProject: 'maps',
+  ownershipWorkshopMap: 'maps',
+  physicsRoomMap: 'maps',
+  videoDemoLoop: 'video',
+  videoHighRes: 'video',
+  videoHighFps: 'video',
+});
+
+/** @internal */
+export const buildDemoAssets = (url: (path: string) => string): DemoAssetDefinitions =>
+  Object.freeze({
+    ship: Asset.type('texture', url('demo/textures/ship-a.png')),
+    particleFlame: Asset.type('texture', url('demo/textures/particle-flame.png')),
+    particleSmoke: Asset.type('texture', url('demo/textures/particle-smoke.png')),
+    particleStar: Asset.type('texture', url('demo/textures/particle-star.png')),
+    particleSpark: Asset.type('texture', url('demo/textures/particle-spark.png')),
+    particleLight: Asset.type('texture', url('demo/textures/particle-light.png')),
+    pixelWhite: Asset.type('texture', url('demo/textures/pixel-white.png')),
+    pixelBlack: Asset.type('texture', url('demo/textures/pixel-black.png')),
+    pixelTransparent: Asset.type('texture', url('demo/textures/pixel-transparent.png')),
+    checkerboardTransparent: Asset.type('texture', url('demo/textures/checkerboard-transparent.png')),
+    kenneyUv: Asset.type('texture', url('demo/textures/kenney-uv.png')),
+    prototypeDark01: Asset.type('texture', url('demo/textures/prototype-dark-01.png')),
+    prototypeLight01: Asset.type('texture', url('demo/textures/prototype-light-01.png')),
+    prototypeGrid: Asset.type('texture', url('demo/textures/prototype-grid.png')),
+    alphaEdgeStraight: Asset.type('texture', url('technical/alpha/alpha-edge-straight.png')),
+    alphaGradientRings: Asset.type('texture', url('technical/alpha/alpha-gradient-rings.png')),
+    checker256: Asset.type('texture', url('technical/filtering/checker-256.png')),
+    pixelGrid128: Asset.type('texture', url('technical/filtering/pixel-grid-128.png')),
+    uvGrid256: Asset.type('texture', url('technical/filtering/uv-grid-256.png')),
+    srgbRamp: Asset.type('texture', url('technical/color/srgb-ramp.png')),
+    hueRamp: Asset.type('texture', url('technical/color/hue-ramp.png')),
+    primaryRamp: Asset.type('texture', url('technical/color/primary-ramp.png')),
+    backgroundPlatformerClouds: Asset.type('texture', url('demo/backgrounds/platformer-clouds.png')),
+    backgroundPlatformerHills: Asset.type('texture', url('demo/backgrounds/platformer-hills.png')),
+    backgroundCastles: Asset.type('texture', url('demo/backgrounds/castles.png')),
+    backgroundForest: Asset.type('texture', url('demo/backgrounds/forest.png')),
+    platformerBackgroundsImage: Asset.type('texture', url('demo/spritesheets/kenney/platformer-backgrounds.png')),
+    platformerBackgroundsAtlas: Asset.type<SpritesheetData>('json', url('demo/spritesheets/kenney/platformer-backgrounds.json')),
+    platformerCharactersImage: Asset.type('texture', url('demo/spritesheets/kenney/platformer-characters.png')),
+    platformerCharactersAtlas: Asset.type<SpritesheetData>('json', url('demo/spritesheets/kenney/platformer-characters.json')),
+    platformerEnemiesImage: Asset.type('texture', url('demo/spritesheets/kenney/platformer-enemies.png')),
+    platformerEnemiesAtlas: Asset.type<SpritesheetData>('json', url('demo/spritesheets/kenney/platformer-enemies.json')),
+    platformerTilesImage: Asset.type('texture', url('demo/spritesheets/kenney/platformer-tiles.png')),
+    platformerTilesAtlas: Asset.type<SpritesheetData>('json', url('demo/spritesheets/kenney/platformer-tiles.json')),
+    backgroundElementsImage: Asset.type('texture', url('demo/spritesheets/kenney/background-elements.png')),
+    backgroundElementsAtlas: Asset.type<SpritesheetData>('json', url('demo/spritesheets/kenney/background-elements.json')),
+    mapPackImage: Asset.type('texture', url('demo/spritesheets/kenney/map-pack.png')),
+    mapPackAtlas: Asset.type<SpritesheetData>('json', url('demo/spritesheets/kenney/map-pack.json')),
+    mapPackTilesheet: Asset.type('texture', url('demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png')),
+    genericInputPromptsImage: Asset.type('texture', url('demo/input-prompts/generic.png')),
+    genericInputPromptsAtlas: Asset.type<SpritesheetData>('json', url('demo/input-prompts/generic.json')),
+    keyboardMouseInputPromptsImage: Asset.type('texture', url('demo/input-prompts/keyboard-mouse.png')),
+    keyboardMouseInputPromptsAtlas: Asset.type<SpritesheetData>('json', url('demo/input-prompts/keyboard-mouse.json')),
+    nintendoSwitchInputPromptsImage: Asset.type('texture', url('demo/input-prompts/nintendo-switch.png')),
+    nintendoSwitchInputPromptsAtlas: Asset.type<SpritesheetData>('json', url('demo/input-prompts/nintendo-switch.json')),
+    playstationSeriesInputPromptsImage: Asset.type('texture', url('demo/input-prompts/playstation-series.png')),
+    playstationSeriesInputPromptsAtlas: Asset.type<SpritesheetData>('json', url('demo/input-prompts/playstation-series.json')),
+    xboxSeriesInputPromptsImage: Asset.type('texture', url('demo/input-prompts/xbox-series.png')),
+    xboxSeriesInputPromptsAtlas: Asset.type<SpritesheetData>('json', url('demo/input-prompts/xbox-series.json')),
+    iconPlay: Asset.type('svg', url('demo/svg/play.svg')),
+    iconPause: Asset.type('svg', url('demo/svg/pause.svg')),
+    iconReset: Asset.type('svg', url('demo/svg/reset.svg')),
+    iconArrowRight: Asset.type('svg', url('demo/svg/arrow-right.svg')),
+    iconSparkle: Asset.type('svg', url('demo/svg/sparkle.svg')),
+    iconAudioWave: Asset.type('svg', url('demo/svg/audio-wave.svg')),
+    iconImagePlaceholder: Asset.type('svg', url('demo/svg/image-placeholder.svg')),
+    iconRuneMark: Asset.type('svg', url('demo/svg/rune-mark.svg')),
+    exoWordmark: Asset.type('svg', url('svg/exo-wordmark.svg')),
+    cursorArrow: Asset.type('svg', url('demo/cursors/arrow.svg')),
+    cursorPointer: Asset.type('svg', url('demo/cursors/pointer.svg')),
+    cursorHand: Asset.type('svg', url('demo/cursors/hand.svg')),
+    cursorBusy: Asset.type('svg', url('demo/cursors/busy.svg')),
+    cursorCross: Asset.type('svg', url('demo/cursors/cross.svg')),
+    fontKenneyFuture: Asset.type('font', url('demo/fonts/Kenney Future.ttf'), { family: 'Kenney Future' }),
+    fontKenneyPixel: Asset.type('font', url('demo/fonts/Kenney Pixel.ttf'), { family: 'Kenney Pixel' }),
+    fontKenneyMini: Asset.type('font', url('demo/fonts/Kenney Mini.ttf'), { family: 'Kenney Mini' }),
+    fontKenneyMiniSquareMono: Asset.type('font', url('demo/fonts/Kenney Mini Square Mono.ttf'), { family: 'Kenney Mini Square Mono' }),
+    fontKenneyBlocksFnt: Asset.type('bmFont', url('demo/fonts/kenney-blocks-32.fnt')),
+    fontKenneyBlocksPng: Asset.type('texture', url('demo/fonts/kenney-blocks-32.png')),
+    soundUiClick: Asset.type('sound', url('demo/sound/ui-click.ogg')),
+    soundUiConfirm: Asset.type('sound', url('demo/sound/ui-confirm.ogg')),
+    soundUiBong: Asset.type('sound', url('demo/sound/ui-bong.ogg')),
+    soundBack: Asset.type('sound', url('demo/sound/back.ogg')),
+    soundClickAlt: Asset.type('sound', url('demo/sound/click-alt.ogg')),
+    soundSwitch: Asset.type('sound', url('demo/sound/switch.ogg')),
+    soundImpactLight: Asset.type('sound', url('demo/sound/impact-light.ogg')),
+    soundImpactHeavy: Asset.type('sound', url('demo/sound/impact-heavy.ogg')),
+    soundImpactWood: Asset.type('sound', url('demo/sound/impact-wood.ogg')),
+    soundImpactBellHeavy: Asset.type('sound', url('audio/impactBell_heavy_000.ogg')),
+    soundImpactGlassHeavy: Asset.type('sound', url('audio/impactGlass_heavy_000.ogg')),
+    soundImpactWoodHeavy: Asset.type('sound', url('audio/impactWood_heavy_000.ogg')),
+    soundImpactMetalHeavy: Asset.type('sound', url('audio/impactMetal_heavy_000.ogg')),
+    soundJump: Asset.type('sound', url('demo/sound/jump.ogg')),
+    soundCoin: Asset.type('sound', url('demo/sound/coin.ogg')),
+    soundHurt: Asset.type('sound', url('demo/sound/hurt.ogg')),
+    soundPowerUp: Asset.type('sound', url('demo/sound/power-up.ogg')),
+    soundLaser: Asset.type('sound', url('demo/sound/laser.ogg')),
+    uiSoundSprite: Asset.type('sound', url('demo/sound-sprites/ui/ui.ogg'), { sprites: url('demo/sound-sprites/ui/ui.json') }),
+    impactsSoundSprite: Asset.type('sound', url('demo/sound-sprites/impacts/impacts.ogg'), { sprites: url('demo/sound-sprites/impacts/impacts.json') }),
+    digitalSoundSprite: Asset.type('sound', url('demo/sound-sprites/digital/digital.ogg'), { sprites: url('demo/sound-sprites/digital/digital.json') }),
+    musicLoopMain: Asset.type('music', url('demo/music/demo-loop-main.ogg')),
+    musicLoopA: Asset.type('music', url('demo/music/demo-loop-a.ogg')),
+    musicLoopB: Asset.type('music', url('demo/music/demo-loop-b.ogg')),
+    musicJingleSuccess: Asset.type('music', url('demo/music/jingle-success.ogg')),
+    musicJingleFailure: Asset.type('music', url('demo/music/jingle-failure.ogg')),
+    musicJingleRetroA: Asset.type('music', url('demo/music/jingle-retro-a.ogg')),
+    musicJingleRetroB: Asset.type('music', url('demo/music/jingle-retro-b.ogg')),
+    voiceCongratulations: Asset.type('sound', url('demo/voice/congratulations.ogg')),
+    voiceMissionComplete: Asset.type('sound', url('demo/voice/mission-complete.ogg')),
+    voiceObjectiveAchieved: Asset.type('sound', url('demo/voice/objective-achieved.ogg')),
+    impulseRoom001: Asset.type('sound', url('audio/ir/AK-SROOMS_001.wav')),
+    impulseRoom002: Asset.type('sound', url('audio/ir/AK-SROOMS_002.wav')),
+    impulseRoom003: Asset.type('sound', url('audio/ir/AK-SROOMS_003.wav')),
+    impulseRoom004: Asset.type('sound', url('audio/ir/AK-SROOMS_004.wav')),
+    impulseRoom005: Asset.type('sound', url('audio/ir/AK-SROOMS_005.wav')),
+    impulseRoom006: Asset.type('sound', url('audio/ir/AK-SROOMS_006.wav')),
+    impulseRoom007: Asset.type('sound', url('audio/ir/AK-SROOMS_007.wav')),
+    impulseRoom008: Asset.type('sound', url('audio/ir/AK-SROOMS_008.wav')),
+    impulseRoom009: Asset.type('sound', url('audio/ir/AK-SROOMS_009.wav')),
+    impulseRoom010: Asset.type('sound', url('audio/ir/AK-SROOMS_010.wav')),
+    impulseRoom011: Asset.type('sound', url('audio/ir/AK-SROOMS_011.wav')),
+    impulseRoom012: Asset.type('sound', url('audio/ir/AK-SROOMS_012.wav')),
+    impulseRoom013: Asset.type('sound', url('audio/ir/AK-SROOMS_013.wav')),
+    impulseRoom014: Asset.type('sound', url('audio/ir/AK-SROOMS_014.wav')),
+    impulseRoom015: Asset.type('sound', url('audio/ir/AK-SROOMS_015.wav')),
+    impulseRoom016: Asset.type('sound', url('audio/ir/AK-SROOMS_016.wav')),
+    impulseRoom017: Asset.type('sound', url('audio/ir/AK-SROOMS_017.wav')),
+    impulseRoom018: Asset.type('sound', url('audio/ir/AK-SROOMS_018.wav')),
+    impulseRoom019: Asset.type('sound', url('audio/ir/AK-SROOMS_019.wav')),
+    impulseRoom020: Asset.type('sound', url('audio/ir/AK-SROOMS_020.wav')),
+    impulseRoom021: Asset.type('sound', url('audio/ir/AK-SROOMS_021.wav')),
+    impulseRoom022: Asset.type('sound', url('audio/ir/AK-SROOMS_022.wav')),
+    impulseRoom023: Asset.type('sound', url('audio/ir/AK-SROOMS_023.wav')),
+    impulseRoom024: Asset.type('sound', url('audio/ir/AK-SROOMS_024.wav')),
+    impulseRoom025: Asset.type('sound', url('audio/ir/AK-SROOMS_025.wav')),
+    impulseRoom026: Asset.type('sound', url('audio/ir/AK-SROOMS_026.wav')),
+    impulseRoom027: Asset.type('sound', url('audio/ir/AK-SROOMS_027.wav')),
+    impulseRoom028: Asset.type('sound', url('audio/ir/AK-SROOMS_028.wav')),
+    impulseRoom029: Asset.type('sound', url('audio/ir/AK-SROOMS_029.wav')),
+    impulseRoom030: Asset.type('sound', url('audio/ir/AK-SROOMS_030.wav')),
+    isometricLandscape: Asset.type('json', url('json/maps/isometric-landscape.tmj')),
+    driftFieldsMap: Asset.type('json', url('json/maps/drift-fields.tmj')),
+    harborPlazaMap: Asset.type('json', url('json/maps/harbor-plaza.tmj')),
+    harborWorldProject: Asset.type('json', url('json/maps/harbor-world.ldtk')),
+    ownershipWorkshopMap: Asset.type('json', url('json/maps/ownership-workshop.tmj')),
+    physicsRoomMap: Asset.type('json', url('json/maps/physics-room.tmj')),
+    videoDemoLoop: Asset.type('video', url('demo/video/demo-loop.webm')),
+    videoHighRes: Asset.type('video', url('demo/video/clips/high-res.mp4')),
+    videoHighFps: Asset.type('video', url('demo/video/clips/high-fps.webm')),
+  });
+
+/**
+ * The extended demo media, hosted separately from the npm package.
+ *
+ * These files are not in the package tarball: download the extended media archive,
+ * serve it, and pass its location to `createExtendedDemoAssets()`.
+ */
+export interface ExtendedDemoAssetDefinitions {
+  /** `demo/video/clips/hdr10.webm` (15.4 MB). Singularity, CC-BY-4.0. Load with await `loader.load()`. */
+  readonly videoHdr10: LeaflessAsset<Video>;
+}
+
+/** @internal */
+export const buildExtendedDemoAssets = (url: (path: string) => string): ExtendedDemoAssetDefinitions =>
+  Object.freeze({
+    videoHdr10: Asset.type('video', url('demo/video/clips/hdr10.webm')),
+  });
diff --git a/packages/exojs-demo-assets/src/createDemoAssets.ts b/packages/exojs-demo-assets/src/createDemoAssets.ts
new file mode 100644
index 000000000..a5de0f763
--- /dev/null
+++ b/packages/exojs-demo-assets/src/createDemoAssets.ts
@@ -0,0 +1,23 @@
+import { resolveBaseUrl, urlResolver } from './baseUrl.js';
+import { buildDemoAssets, type DemoAssetDefinitions } from './catalog.generated.js';
+
+/**
+ * Creates the standard demo descriptors for media served from another location,
+ * such as a copy made with the package's `exojs-demo-assets-copy` command or a
+ * CDN.
+ *
+ * `baseUrl` is the directory that holds the media tree (the contents of the
+ * package's `media/` directory). A string must be an absolute URL; resolve a
+ * relative location first with `new URL(path, import.meta.url)` or against the
+ * page URL. Nothing is fetched until a loader receives a descriptor.
+ *
+ * @throws If `baseUrl` is not an absolute URL.
+ *
+ * @example
+ * ```ts
+ * const assets = createDemoAssets(new URL('./demo-media/', import.meta.url));
+ * const ship = await this.loader.load(assets.ship);
+ * ```
+ */
+export const createDemoAssets = (baseUrl: string | URL): DemoAssetDefinitions =>
+  buildDemoAssets(urlResolver(resolveBaseUrl(baseUrl, 'createDemoAssets')));
diff --git a/packages/exojs-demo-assets/src/extended.ts b/packages/exojs-demo-assets/src/extended.ts
new file mode 100644
index 000000000..11a12f3b3
--- /dev/null
+++ b/packages/exojs-demo-assets/src/extended.ts
@@ -0,0 +1,26 @@
+import { resolveBaseUrl, urlResolver } from './baseUrl.js';
+import { buildExtendedDemoAssets, type ExtendedDemoAssetDefinitions } from './catalog.generated.js';
+
+export type { ExtendedDemoAssetDefinitions } from './catalog.generated.js';
+
+/**
+ * Creates the descriptors for the extended demo media, which the npm package
+ * does not contain.
+ *
+ * `baseUrl` is the directory the extended media archive was extracted to and
+ * served from. There is no default location and nothing is fetched until a
+ * loader receives a descriptor. A string must be an absolute URL.
+ *
+ * The HDR10 clip carries BT.2020/PQ metadata; whether it is shown as HDR depends
+ * on the browser, the display and the rendering path, not on this descriptor.
+ *
+ * @throws If `baseUrl` is not an absolute URL.
+ *
+ * @example
+ * ```ts
+ * const extended = createExtendedDemoAssets('https://media.example.com/exojs-demo-extended/');
+ * const video = await this.loader.load(extended.videoHdr10);
+ * ```
+ */
+export const createExtendedDemoAssets = (baseUrl: string | URL): ExtendedDemoAssetDefinitions =>
+  buildExtendedDemoAssets(urlResolver(resolveBaseUrl(baseUrl, 'createExtendedDemoAssets')));
diff --git a/packages/exojs-demo-assets/src/index.ts b/packages/exojs-demo-assets/src/index.ts
new file mode 100644
index 000000000..4803b710d
--- /dev/null
+++ b/packages/exojs-demo-assets/src/index.ts
@@ -0,0 +1,4 @@
+export type { DemoAssetCategory, DemoAssetDefinitions, DemoAssetKey } from './catalog.generated.js';
+export { demoAssetCategories } from './catalog.generated.js';
+export { createDemoAssets } from './createDemoAssets.js';
+export { demoAssets } from './standard.generated.js';
diff --git a/packages/exojs-demo-assets/src/standard.generated.ts b/packages/exojs-demo-assets/src/standard.generated.ts
new file mode 100644
index 000000000..ffb77eb30
--- /dev/null
+++ b/packages/exojs-demo-assets/src/standard.generated.ts
@@ -0,0 +1,163 @@
+// Generated by scripts/generate.ts from catalog.json. Do not edit by hand.
+
+import type { SpritesheetData } from '@codexo/exojs';
+import { Asset } from '@codexo/exojs';
+
+import type { DemoAssetDefinitions } from './catalog.generated.js';
+
+// One literal `new URL(..., import.meta.url)` per file is what lets a bundler
+// find, copy and rewrite each media file; a computed path would hide them.
+/**
+ * The standard demo assets, resolved against the media shipped inside this
+ * package. Importing or reading it fetches nothing; hand a descriptor to a
+ * loader to load it.
+ *
+ * @example
+ * ```ts
+ * import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+ *
+ * const ship = new Sprite(this.loader.get(assets.ship));
+ * const video = await this.loader.load(assets.videoHighRes);
+ * ```
+ */
+export const demoAssets: DemoAssetDefinitions = Object.freeze({
+  ship: Asset.type('texture', new URL('../media/demo/textures/ship-a.png', import.meta.url).href),
+  particleFlame: Asset.type('texture', new URL('../media/demo/textures/particle-flame.png', import.meta.url).href),
+  particleSmoke: Asset.type('texture', new URL('../media/demo/textures/particle-smoke.png', import.meta.url).href),
+  particleStar: Asset.type('texture', new URL('../media/demo/textures/particle-star.png', import.meta.url).href),
+  particleSpark: Asset.type('texture', new URL('../media/demo/textures/particle-spark.png', import.meta.url).href),
+  particleLight: Asset.type('texture', new URL('../media/demo/textures/particle-light.png', import.meta.url).href),
+  pixelWhite: Asset.type('texture', new URL('../media/demo/textures/pixel-white.png', import.meta.url).href),
+  pixelBlack: Asset.type('texture', new URL('../media/demo/textures/pixel-black.png', import.meta.url).href),
+  pixelTransparent: Asset.type('texture', new URL('../media/demo/textures/pixel-transparent.png', import.meta.url).href),
+  checkerboardTransparent: Asset.type('texture', new URL('../media/demo/textures/checkerboard-transparent.png', import.meta.url).href),
+  kenneyUv: Asset.type('texture', new URL('../media/demo/textures/kenney-uv.png', import.meta.url).href),
+  prototypeDark01: Asset.type('texture', new URL('../media/demo/textures/prototype-dark-01.png', import.meta.url).href),
+  prototypeLight01: Asset.type('texture', new URL('../media/demo/textures/prototype-light-01.png', import.meta.url).href),
+  prototypeGrid: Asset.type('texture', new URL('../media/demo/textures/prototype-grid.png', import.meta.url).href),
+  alphaEdgeStraight: Asset.type('texture', new URL('../media/technical/alpha/alpha-edge-straight.png', import.meta.url).href),
+  alphaGradientRings: Asset.type('texture', new URL('../media/technical/alpha/alpha-gradient-rings.png', import.meta.url).href),
+  checker256: Asset.type('texture', new URL('../media/technical/filtering/checker-256.png', import.meta.url).href),
+  pixelGrid128: Asset.type('texture', new URL('../media/technical/filtering/pixel-grid-128.png', import.meta.url).href),
+  uvGrid256: Asset.type('texture', new URL('../media/technical/filtering/uv-grid-256.png', import.meta.url).href),
+  srgbRamp: Asset.type('texture', new URL('../media/technical/color/srgb-ramp.png', import.meta.url).href),
+  hueRamp: Asset.type('texture', new URL('../media/technical/color/hue-ramp.png', import.meta.url).href),
+  primaryRamp: Asset.type('texture', new URL('../media/technical/color/primary-ramp.png', import.meta.url).href),
+  backgroundPlatformerClouds: Asset.type('texture', new URL('../media/demo/backgrounds/platformer-clouds.png', import.meta.url).href),
+  backgroundPlatformerHills: Asset.type('texture', new URL('../media/demo/backgrounds/platformer-hills.png', import.meta.url).href),
+  backgroundCastles: Asset.type('texture', new URL('../media/demo/backgrounds/castles.png', import.meta.url).href),
+  backgroundForest: Asset.type('texture', new URL('../media/demo/backgrounds/forest.png', import.meta.url).href),
+  platformerBackgroundsImage: Asset.type('texture', new URL('../media/demo/spritesheets/kenney/platformer-backgrounds.png', import.meta.url).href),
+  platformerBackgroundsAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/spritesheets/kenney/platformer-backgrounds.json', import.meta.url).href),
+  platformerCharactersImage: Asset.type('texture', new URL('../media/demo/spritesheets/kenney/platformer-characters.png', import.meta.url).href),
+  platformerCharactersAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/spritesheets/kenney/platformer-characters.json', import.meta.url).href),
+  platformerEnemiesImage: Asset.type('texture', new URL('../media/demo/spritesheets/kenney/platformer-enemies.png', import.meta.url).href),
+  platformerEnemiesAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/spritesheets/kenney/platformer-enemies.json', import.meta.url).href),
+  platformerTilesImage: Asset.type('texture', new URL('../media/demo/spritesheets/kenney/platformer-tiles.png', import.meta.url).href),
+  platformerTilesAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/spritesheets/kenney/platformer-tiles.json', import.meta.url).href),
+  backgroundElementsImage: Asset.type('texture', new URL('../media/demo/spritesheets/kenney/background-elements.png', import.meta.url).href),
+  backgroundElementsAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/spritesheets/kenney/background-elements.json', import.meta.url).href),
+  mapPackImage: Asset.type('texture', new URL('../media/demo/spritesheets/kenney/map-pack.png', import.meta.url).href),
+  mapPackAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/spritesheets/kenney/map-pack.json', import.meta.url).href),
+  mapPackTilesheet: Asset.type('texture', new URL('../media/demo/vendor/kenney/map-pack/Tilesheet/mapPack_tilesheet.png', import.meta.url).href),
+  genericInputPromptsImage: Asset.type('texture', new URL('../media/demo/input-prompts/generic.png', import.meta.url).href),
+  genericInputPromptsAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/input-prompts/generic.json', import.meta.url).href),
+  keyboardMouseInputPromptsImage: Asset.type('texture', new URL('../media/demo/input-prompts/keyboard-mouse.png', import.meta.url).href),
+  keyboardMouseInputPromptsAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/input-prompts/keyboard-mouse.json', import.meta.url).href),
+  nintendoSwitchInputPromptsImage: Asset.type('texture', new URL('../media/demo/input-prompts/nintendo-switch.png', import.meta.url).href),
+  nintendoSwitchInputPromptsAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/input-prompts/nintendo-switch.json', import.meta.url).href),
+  playstationSeriesInputPromptsImage: Asset.type('texture', new URL('../media/demo/input-prompts/playstation-series.png', import.meta.url).href),
+  playstationSeriesInputPromptsAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/input-prompts/playstation-series.json', import.meta.url).href),
+  xboxSeriesInputPromptsImage: Asset.type('texture', new URL('../media/demo/input-prompts/xbox-series.png', import.meta.url).href),
+  xboxSeriesInputPromptsAtlas: Asset.type<SpritesheetData>('json', new URL('../media/demo/input-prompts/xbox-series.json', import.meta.url).href),
+  iconPlay: Asset.type('svg', new URL('../media/demo/svg/play.svg', import.meta.url).href),
+  iconPause: Asset.type('svg', new URL('../media/demo/svg/pause.svg', import.meta.url).href),
+  iconReset: Asset.type('svg', new URL('../media/demo/svg/reset.svg', import.meta.url).href),
+  iconArrowRight: Asset.type('svg', new URL('../media/demo/svg/arrow-right.svg', import.meta.url).href),
+  iconSparkle: Asset.type('svg', new URL('../media/demo/svg/sparkle.svg', import.meta.url).href),
+  iconAudioWave: Asset.type('svg', new URL('../media/demo/svg/audio-wave.svg', import.meta.url).href),
+  iconImagePlaceholder: Asset.type('svg', new URL('../media/demo/svg/image-placeholder.svg', import.meta.url).href),
+  iconRuneMark: Asset.type('svg', new URL('../media/demo/svg/rune-mark.svg', import.meta.url).href),
+  exoWordmark: Asset.type('svg', new URL('../media/svg/exo-wordmark.svg', import.meta.url).href),
+  cursorArrow: Asset.type('svg', new URL('../media/demo/cursors/arrow.svg', import.meta.url).href),
+  cursorPointer: Asset.type('svg', new URL('../media/demo/cursors/pointer.svg', import.meta.url).href),
+  cursorHand: Asset.type('svg', new URL('../media/demo/cursors/hand.svg', import.meta.url).href),
+  cursorBusy: Asset.type('svg', new URL('../media/demo/cursors/busy.svg', import.meta.url).href),
+  cursorCross: Asset.type('svg', new URL('../media/demo/cursors/cross.svg', import.meta.url).href),
+  fontKenneyFuture: Asset.type('font', new URL('../media/demo/fonts/Kenney Future.ttf', import.meta.url).href, { family: 'Kenney Future' }),
+  fontKenneyPixel: Asset.type('font', new URL('../media/demo/fonts/Kenney Pixel.ttf', import.meta.url).href, { family: 'Kenney Pixel' }),
+  fontKenneyMini: Asset.type('font', new URL('../media/demo/fonts/Kenney Mini.ttf', import.meta.url).href, { family: 'Kenney Mini' }),
+  fontKenneyMiniSquareMono: Asset.type('font', new URL('../media/demo/fonts/Kenney Mini Square Mono.ttf', import.meta.url).href, { family: 'Kenney Mini Square Mono' }),
+  fontKenneyBlocksFnt: Asset.type('bmFont', new URL('../media/demo/fonts/kenney-blocks-32.fnt', import.meta.url).href),
+  fontKenneyBlocksPng: Asset.type('texture', new URL('../media/demo/fonts/kenney-blocks-32.png', import.meta.url).href),
+  soundUiClick: Asset.type('sound', new URL('../media/demo/sound/ui-click.ogg', import.meta.url).href),
+  soundUiConfirm: Asset.type('sound', new URL('../media/demo/sound/ui-confirm.ogg', import.meta.url).href),
+  soundUiBong: Asset.type('sound', new URL('../media/demo/sound/ui-bong.ogg', import.meta.url).href),
+  soundBack: Asset.type('sound', new URL('../media/demo/sound/back.ogg', import.meta.url).href),
+  soundClickAlt: Asset.type('sound', new URL('../media/demo/sound/click-alt.ogg', import.meta.url).href),
+  soundSwitch: Asset.type('sound', new URL('../media/demo/sound/switch.ogg', import.meta.url).href),
+  soundImpactLight: Asset.type('sound', new URL('../media/demo/sound/impact-light.ogg', import.meta.url).href),
+  soundImpactHeavy: Asset.type('sound', new URL('../media/demo/sound/impact-heavy.ogg', import.meta.url).href),
+  soundImpactWood: Asset.type('sound', new URL('../media/demo/sound/impact-wood.ogg', import.meta.url).href),
+  soundImpactBellHeavy: Asset.type('sound', new URL('../media/audio/impactBell_heavy_000.ogg', import.meta.url).href),
+  soundImpactGlassHeavy: Asset.type('sound', new URL('../media/audio/impactGlass_heavy_000.ogg', import.meta.url).href),
+  soundImpactWoodHeavy: Asset.type('sound', new URL('../media/audio/impactWood_heavy_000.ogg', import.meta.url).href),
+  soundImpactMetalHeavy: Asset.type('sound', new URL('../media/audio/impactMetal_heavy_000.ogg', import.meta.url).href),
+  soundJump: Asset.type('sound', new URL('../media/demo/sound/jump.ogg', import.meta.url).href),
+  soundCoin: Asset.type('sound', new URL('../media/demo/sound/coin.ogg', import.meta.url).href),
+  soundHurt: Asset.type('sound', new URL('../media/demo/sound/hurt.ogg', import.meta.url).href),
+  soundPowerUp: Asset.type('sound', new URL('../media/demo/sound/power-up.ogg', import.meta.url).href),
+  soundLaser: Asset.type('sound', new URL('../media/demo/sound/laser.ogg', import.meta.url).href),
+  uiSoundSprite: Asset.type('sound', new URL('../media/demo/sound-sprites/ui/ui.ogg', import.meta.url).href, { sprites: new URL('../media/demo/sound-sprites/ui/ui.json', import.meta.url).href }),
+  impactsSoundSprite: Asset.type('sound', new URL('../media/demo/sound-sprites/impacts/impacts.ogg', import.meta.url).href, { sprites: new URL('../media/demo/sound-sprites/impacts/impacts.json', import.meta.url).href }),
+  digitalSoundSprite: Asset.type('sound', new URL('../media/demo/sound-sprites/digital/digital.ogg', import.meta.url).href, { sprites: new URL('../media/demo/sound-sprites/digital/digital.json', import.meta.url).href }),
+  musicLoopMain: Asset.type('music', new URL('../media/demo/music/demo-loop-main.ogg', import.meta.url).href),
+  musicLoopA: Asset.type('music', new URL('../media/demo/music/demo-loop-a.ogg', import.meta.url).href),
+  musicLoopB: Asset.type('music', new URL('../media/demo/music/demo-loop-b.ogg', import.meta.url).href),
+  musicJingleSuccess: Asset.type('music', new URL('../media/demo/music/jingle-success.ogg', import.meta.url).href),
+  musicJingleFailure: Asset.type('music', new URL('../media/demo/music/jingle-failure.ogg', import.meta.url).href),
+  musicJingleRetroA: Asset.type('music', new URL('../media/demo/music/jingle-retro-a.ogg', import.meta.url).href),
+  musicJingleRetroB: Asset.type('music', new URL('../media/demo/music/jingle-retro-b.ogg', import.meta.url).href),
+  voiceCongratulations: Asset.type('sound', new URL('../media/demo/voice/congratulations.ogg', import.meta.url).href),
+  voiceMissionComplete: Asset.type('sound', new URL('../media/demo/voice/mission-complete.ogg', import.meta.url).href),
+  voiceObjectiveAchieved: Asset.type('sound', new URL('../media/demo/voice/objective-achieved.ogg', import.meta.url).href),
+  impulseRoom001: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_001.wav', import.meta.url).href),
+  impulseRoom002: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_002.wav', import.meta.url).href),
+  impulseRoom003: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_003.wav', import.meta.url).href),
+  impulseRoom004: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_004.wav', import.meta.url).href),
+  impulseRoom005: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_005.wav', import.meta.url).href),
+  impulseRoom006: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_006.wav', import.meta.url).href),
+  impulseRoom007: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_007.wav', import.meta.url).href),
+  impulseRoom008: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_008.wav', import.meta.url).href),
+  impulseRoom009: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_009.wav', import.meta.url).href),
+  impulseRoom010: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_010.wav', import.meta.url).href),
+  impulseRoom011: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_011.wav', import.meta.url).href),
+  impulseRoom012: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_012.wav', import.meta.url).href),
+  impulseRoom013: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_013.wav', import.meta.url).href),
+  impulseRoom014: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_014.wav', import.meta.url).href),
+  impulseRoom015: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_015.wav', import.meta.url).href),
+  impulseRoom016: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_016.wav', import.meta.url).href),
+  impulseRoom017: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_017.wav', import.meta.url).href),
+  impulseRoom018: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_018.wav', import.meta.url).href),
+  impulseRoom019: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_019.wav', import.meta.url).href),
+  impulseRoom020: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_020.wav', import.meta.url).href),
+  impulseRoom021: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_021.wav', import.meta.url).href),
+  impulseRoom022: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_022.wav', import.meta.url).href),
+  impulseRoom023: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_023.wav', import.meta.url).href),
+  impulseRoom024: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_024.wav', import.meta.url).href),
+  impulseRoom025: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_025.wav', import.meta.url).href),
+  impulseRoom026: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_026.wav', import.meta.url).href),
+  impulseRoom027: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_027.wav', import.meta.url).href),
+  impulseRoom028: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_028.wav', import.meta.url).href),
+  impulseRoom029: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_029.wav', import.meta.url).href),
+  impulseRoom030: Asset.type('sound', new URL('../media/audio/ir/AK-SROOMS_030.wav', import.meta.url).href),
+  isometricLandscape: Asset.type('json', new URL('../media/json/maps/isometric-landscape.tmj', import.meta.url).href),
+  driftFieldsMap: Asset.type('json', new URL('../media/json/maps/drift-fields.tmj', import.meta.url).href),
+  harborPlazaMap: Asset.type('json', new URL('../media/json/maps/harbor-plaza.tmj', import.meta.url).href),
+  harborWorldProject: Asset.type('json', new URL('../media/json/maps/harbor-world.ldtk', import.meta.url).href),
+  ownershipWorkshopMap: Asset.type('json', new URL('../media/json/maps/ownership-workshop.tmj', import.meta.url).href),
+  physicsRoomMap: Asset.type('json', new URL('../media/json/maps/physics-room.tmj', import.meta.url).href),
+  videoDemoLoop: Asset.type('video', new URL('../media/demo/video/demo-loop.webm', import.meta.url).href),
+  videoHighRes: Asset.type('video', new URL('../media/demo/video/clips/high-res.mp4', import.meta.url).href),
+  videoHighFps: Asset.type('video', new URL('../media/demo/video/clips/high-fps.webm', import.meta.url).href),
+});
diff --git a/packages/exojs-demo-assets/test/catalog-closure.test.ts b/packages/exojs-demo-assets/test/catalog-closure.test.ts
new file mode 100644
index 000000000..a4e6497bf
--- /dev/null
+++ b/packages/exojs-demo-assets/test/catalog-closure.test.ts
@@ -0,0 +1,101 @@
+/**
+ * The authored catalog and everything generated from it: file closure against
+ * the real content tree, hash correctness, profile budgets and generated-file
+ * drift. These run without Core so the content package can be verified before
+ * the engine is built.
+ */
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { bytesOf, filesFor, packageRoot, resolveCatalog, sha256Of } from '../scripts/catalog.ts';
+import { renderAll } from '../scripts/generate.ts';
+
+const catalog = resolveCatalog();
+
+describe('closure: every published file exists under examples/assets and hashes match', () => {
+  test.each(catalog.files.map(file => [file.path, file] as const))('%s', (_path, file) => {
+    const absolute = resolve(catalog.sourceRoot, file.path);
+
+    expect(existsSync(absolute)).toBe(true);
+    expect(sha256Of(absolute)).toBe(file.sha256);
+    expect(statSync(absolute).size).toBe(file.bytes);
+  });
+});
+
+describe('profiles: standard and extended are separate deliveries', () => {
+  const standard = filesFor(catalog, 'standard');
+  const extended = filesFor(catalog, 'extended');
+
+  test('the standard profile stays under the 20 MB media budget', () => {
+    expect(bytesOf(standard)).toBeLessThan(20_000_000);
+  });
+
+  test('the extended profile contains only the HDR candidate and is not smuggled into standard', () => {
+    expect(extended.map(file => file.path)).toEqual(['demo/video/clips/hdr10.webm']);
+    expect(standard.some(file => file.path.includes('hdr10'))).toBe(false);
+    expect(bytesOf(standard) + bytesOf(extended)).toBeGreaterThan(34_000_000);
+  });
+
+  test('no file ships in both profiles at once', () => {
+    const standardPaths = new Set(standard.map(file => file.path));
+
+    for (const file of extended) {
+      expect(standardPaths.has(file.path)).toBe(false);
+    }
+  });
+});
+
+describe('blocked sources: unrecorded-provenance files stay unpublished', () => {
+  test('no entry or transitive file under blocked paths is published', () => {
+    const blocked = new Set(catalog.source.blocked.map(item => item.path));
+
+    for (const file of catalog.files) {
+      expect(blocked.has(file.path)).toBe(false);
+    }
+  });
+});
+
+describe('sound sprite sidecars: the format the sound loader reads', () => {
+  const sidecars = catalog.entries.flatMap(entry =>
+    Object.entries(entry.options ?? {}).flatMap(([option, value]) =>
+      option === 'sprites' && typeof value === 'object' ? [[entry.key, value.$path] as const] : [],
+    ),
+  );
+
+  test('the catalog has sound sprite sidecars to check', () => {
+    expect(sidecars.length).toBeGreaterThan(0);
+  });
+
+  test.each(sidecars)('%s: %s maps each clip name to finite start and end seconds', (_key, path) => {
+    const sheet: unknown = JSON.parse(readFileSync(resolve(catalog.sourceRoot, path), 'utf8'));
+
+    expect(sheet).toBeTypeOf('object');
+    expect(Array.isArray(sheet)).toBe(false);
+    expect(Object.keys(sheet as object).length).toBeGreaterThan(0);
+
+    for (const clip of Object.values(sheet as Record<string, unknown>)) {
+      const { start, end } = clip as { start?: unknown; end?: unknown };
+
+      expect(Number.isFinite(start)).toBe(true);
+      expect(Number.isFinite(end)).toBe(true);
+      expect(end as number).toBeGreaterThan(start as number);
+    }
+  });
+});
+
+describe('generated artifacts: no drift against the authored catalog', () => {
+  test.each(Object.entries(renderAll(catalog)))('%s', (path, rendered) => {
+    expect(readFileSync(resolve(packageRoot, path), 'utf8')).toBe(rendered);
+  });
+
+  test('every generated descriptor names a shipped file', () => {
+    const manifest = JSON.parse(readFileSync(resolve(packageRoot, 'manifest.json'), 'utf8')) as {
+      readonly files: ReadonlyArray<{ readonly path: string }>;
+    };
+    const shipped = new Set(manifest.files.map(file => file.path));
+
+    for (const entry of catalog.entries) {
+      expect(shipped.has(entry.path)).toBe(true);
+    }
+  });
+});
diff --git a/packages/exojs-demo-assets/tsconfig.build.json b/packages/exojs-demo-assets/tsconfig.build.json
new file mode 100644
index 000000000..0dc7cb346
--- /dev/null
+++ b/packages/exojs-demo-assets/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "_comment": "Emit profile. `tsc` is the whole build: the package is data plus two small factories, so there is nothing for a bundler to do. The output goes to `dist/` rather than `dist/esm/` because the default instance addresses its media with `new URL('../media/...', import.meta.url)`, which has to be correct from `src/` and from `dist/` alike. `paths` resolves `@codexo/exojs` against Core's built declarations.",
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "rootDir": "src",
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "customConditions": [],
+    "paths": {
+      "@codexo/exojs": ["../../dist/esm/index.d.ts"]
+    }
+  },
+  "include": ["src/**/*"]
+}
diff --git a/packages/exojs-demo-assets/tsconfig.json b/packages/exojs-demo-assets/tsconfig.json
new file mode 100644
index 000000000..ff3bef6c2
--- /dev/null
+++ b/packages/exojs-demo-assets/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "compilerOptions": {
+    "customConditions": ["@codexo/exojs-source"],
+    "paths": {
+      "@codexo/exojs": ["../../src/index.ts"]
+    }
+  },
+  "include": ["src/**/*", "../../src/typings.d.ts"],
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/exojs-demo-assets/tsconfig.test.json b/packages/exojs-demo-assets/tsconfig.test.json
new file mode 100644
index 000000000..b8654fd13
--- /dev/null
+++ b/packages/exojs-demo-assets/tsconfig.test.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "_comment": "Type-checks this package's own test/** and scripts/**. The loosened flags live in the shared package-test profile.",
+  "extends": ["./tsconfig.json", "@codexo/exojs-config/typescript/package-test.json"],
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@codexo/exojs": ["../../src/index.ts"],
+      "@codexo/exojs-demo-assets": ["./src/index.ts"],
+      "@codexo/exojs-demo-assets/extended": ["./src/extended.ts"]
+    }
+  },
+  "include": ["test/**/*", "scripts/**/*", "../../src/typings.d.ts"],
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/exojs-ldtk/README.md b/packages/exojs-ldtk/README.md
index f25baabaf..51996cc44 100644
--- a/packages/exojs-ldtk/README.md
+++ b/packages/exojs-ldtk/README.md
@@ -13,7 +13,7 @@ Core and the tilemap runtime are peer dependencies. `ldtkExtension` depends on `
 ```ts
 import { Application, Scene } from '@codexo/exojs';
 import { ldtkExtension } from '@codexo/exojs-ldtk';
-import { TileMapNode } from '@codexo/exojs-tilemap';
+import { TileMapNode } from '@codexo/exojs/tilemap';
 
 class LevelScene extends Scene {
   override async load(): Promise<void> {
diff --git a/packages/exojs-ldtk/package.json b/packages/exojs-ldtk/package.json
index 09f0307fe..f5d9efbc2 100644
--- a/packages/exojs-ldtk/package.json
+++ b/packages/exojs-ldtk/package.json
@@ -33,13 +33,11 @@
     "test": "vitest run --root ../.. --project=exojs-ldtk"
   },
   "peerDependencies": {
-    "@codexo/exojs": "0.19.x",
-    "@codexo/exojs-tilemap": "0.19.x"
+    "@codexo/exojs": "0.19.x"
   },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
-    "@codexo/exojs-config": "workspace:*",
-    "@codexo/exojs-tilemap": "workspace:*"
+    "@codexo/exojs-config": "workspace:*"
   },
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/exojs-ldtk/src/LdtkData.ts b/packages/exojs-ldtk/src/LdtkData.ts
index 5967ccb9c..e78bbd590 100644
--- a/packages/exojs-ldtk/src/LdtkData.ts
+++ b/packages/exojs-ldtk/src/LdtkData.ts
@@ -8,7 +8,7 @@
  * @see https://ldtk.io/json/
  */
 
-import type { TilePropertyPoint, TilePropertyTileRef } from '@codexo/exojs-tilemap';
+import type { TilePropertyPoint, TilePropertyTileRef } from '@codexo/exojs/tilemap';
 
 // ── Tile data ─────────────────────────────────────────────────────────────────
 
diff --git a/packages/exojs-ldtk/src/LdtkMap.ts b/packages/exojs-ldtk/src/LdtkMap.ts
index 5a1a7173f..49ce88f56 100644
--- a/packages/exojs-ldtk/src/LdtkMap.ts
+++ b/packages/exojs-ldtk/src/LdtkMap.ts
@@ -1,4 +1,4 @@
-import type { MapWorld, TileMap } from '@codexo/exojs-tilemap';
+import type { MapWorld, TileMap } from '@codexo/exojs/tilemap';
 
 import type { LdtkData } from './LdtkData';
 import { getLdtkLevelEntries } from './ldtkLevelEntries';
diff --git a/packages/exojs-ldtk/src/LdtkProject.ts b/packages/exojs-ldtk/src/LdtkProject.ts
index 70740c9f1..8c39972db 100644
--- a/packages/exojs-ldtk/src/LdtkProject.ts
+++ b/packages/exojs-ldtk/src/LdtkProject.ts
@@ -1,7 +1,7 @@
 import type { LoaderScope } from '@codexo/exojs';
 import { Asset } from '@codexo/exojs';
-import type { MapLevelLoadContext, MapWorld, TileMap, TileSet } from '@codexo/exojs-tilemap';
-import { MapWorldRuntime } from '@codexo/exojs-tilemap';
+import type { MapLevelLoadContext, MapWorld, TileMap, TileSet } from '@codexo/exojs/tilemap';
+import { MapWorldRuntime } from '@codexo/exojs/tilemap';
 
 import type { LdtkData, LdtkLevel } from './LdtkData';
 import type { LdtkLevelEntry } from './ldtkLevelEntries';
diff --git a/packages/exojs-ldtk/src/ldtkExtension.ts b/packages/exojs-ldtk/src/ldtkExtension.ts
index 9c0b3ee12..695c4c0e8 100644
--- a/packages/exojs-ldtk/src/ldtkExtension.ts
+++ b/packages/exojs-ldtk/src/ldtkExtension.ts
@@ -1,5 +1,5 @@
 import type { Extension } from '@codexo/exojs/extensions';
-import { tilemapExtension } from '@codexo/exojs-tilemap';
+import { tilemapExtension } from '@codexo/exojs/tilemap';
 
 import { ldtkMapType, ldtkProjectType } from './ldtkTypes';
 
diff --git a/packages/exojs-ldtk/src/ldtkToMapWorld.ts b/packages/exojs-ldtk/src/ldtkToMapWorld.ts
index 0aa9508f8..4187e7dde 100644
--- a/packages/exojs-ldtk/src/ldtkToMapWorld.ts
+++ b/packages/exojs-ldtk/src/ldtkToMapWorld.ts
@@ -1,5 +1,5 @@
-import type { MapLevel, MapLevelNeighbour } from '@codexo/exojs-tilemap';
-import { MapLevelSide, MapWorld } from '@codexo/exojs-tilemap';
+import type { MapLevel, MapLevelNeighbour } from '@codexo/exojs/tilemap';
+import { MapLevelSide, MapWorld } from '@codexo/exojs/tilemap';
 
 import type { LdtkData, LdtkLevel } from './LdtkData';
 import { getLdtkLevelEntries } from './ldtkLevelEntries';
diff --git a/packages/exojs-ldtk/src/ldtkToTileMap.ts b/packages/exojs-ldtk/src/ldtkToTileMap.ts
index ea29b5c12..b06b49f26 100644
--- a/packages/exojs-ldtk/src/ldtkToTileMap.ts
+++ b/packages/exojs-ldtk/src/ldtkToTileMap.ts
@@ -1,5 +1,5 @@
-import type { TileCellSource, TileMapObject, TileProperties, TilePropertyValue, TileSet } from '@codexo/exojs-tilemap';
-import { ObjectLayer, TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TilePropertyKind } from '@codexo/exojs-tilemap';
+import type { TileCellSource, TileMapObject, TileProperties, TilePropertyValue, TileSet } from '@codexo/exojs/tilemap';
+import { ObjectLayer, TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TilePropertyKind } from '@codexo/exojs/tilemap';
 
 import type {
   LdtkData,
diff --git a/packages/exojs-ldtk/src/loadLdtkMap.ts b/packages/exojs-ldtk/src/loadLdtkMap.ts
index edc1bfaaf..e5c3d6bda 100644
--- a/packages/exojs-ldtk/src/loadLdtkMap.ts
+++ b/packages/exojs-ldtk/src/loadLdtkMap.ts
@@ -1,6 +1,6 @@
 import type { AssetFactoryContext } from '@codexo/exojs';
 import { Asset, logger, TextureRegion } from '@codexo/exojs';
-import { type TileDefinition, TileSet } from '@codexo/exojs-tilemap';
+import { type TileDefinition, TileSet } from '@codexo/exojs/tilemap';
 
 import type { LdtkData, LdtkLevel, LdtkTilesetDef } from './LdtkData';
 import { getLdtkLevelEntries } from './ldtkLevelEntries';
diff --git a/packages/exojs-ldtk/src/loadLdtkProject.ts b/packages/exojs-ldtk/src/loadLdtkProject.ts
index e770a7858..a5b087e3f 100644
--- a/packages/exojs-ldtk/src/loadLdtkProject.ts
+++ b/packages/exojs-ldtk/src/loadLdtkProject.ts
@@ -1,6 +1,6 @@
 import type { AssetFactoryContext } from '@codexo/exojs';
 import { Asset } from '@codexo/exojs';
-import type { TileSet } from '@codexo/exojs-tilemap';
+import type { TileSet } from '@codexo/exojs/tilemap';
 
 import { LdtkProject } from './LdtkProject';
 import { loadLdtkTileset } from './loadLdtkMap';
diff --git a/packages/exojs-ldtk/src/public.ts b/packages/exojs-ldtk/src/public.ts
index 01eaec167..219b27bf1 100644
--- a/packages/exojs-ldtk/src/public.ts
+++ b/packages/exojs-ldtk/src/public.ts
@@ -91,7 +91,7 @@ export type {
   TileSetOptions,
   TileTransform,
   UnknownMapObjectPolicy,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 export {
   MapLevelRuntime,
   MapLevelSide,
@@ -111,7 +111,7 @@ export {
   TileMapView,
   TilePropertyKind,
   TileSet,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 
 // ── Module augmentation - typed load calls ────────────────────────────────────
 import type { LdtkMap } from './LdtkMap';
diff --git a/packages/exojs-ldtk/test/ldtk-conversion.test.ts b/packages/exojs-ldtk/test/ldtk-conversion.test.ts
index ddb13cf12..8d4bf885e 100644
--- a/packages/exojs-ldtk/test/ldtk-conversion.test.ts
+++ b/packages/exojs-ldtk/test/ldtk-conversion.test.ts
@@ -1,6 +1,6 @@
 import { type Texture, TextureRegion } from '@codexo/exojs';
-import type { TileProperties } from '@codexo/exojs-tilemap';
-import { TileSet } from '@codexo/exojs-tilemap';
+import type { TileProperties } from '@codexo/exojs/tilemap';
+import { TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { LdtkData, LdtkEntityInstance, LdtkFieldInstance, LdtkLayerInstance, LdtkLevel } from '../src/LdtkData';
diff --git a/packages/exojs-ldtk/test/ldtk-extension.test.ts b/packages/exojs-ldtk/test/ldtk-extension.test.ts
index 97f213b70..b0350e498 100644
--- a/packages/exojs-ldtk/test/ldtk-extension.test.ts
+++ b/packages/exojs-ldtk/test/ldtk-extension.test.ts
@@ -3,7 +3,7 @@
 import '../src/index';
 
 import type { AssetFactoryContext } from '@codexo/exojs';
-import { tilemapExtension } from '@codexo/exojs-tilemap';
+import { tilemapExtension } from '@codexo/exojs/tilemap';
 import { describe, expect, it, vi } from 'vitest';
 
 import { buildSnapshot } from '../../../src/extensions/snapshot';
diff --git a/packages/exojs-ldtk/test/ldtk-map.test.ts b/packages/exojs-ldtk/test/ldtk-map.test.ts
index b1783e104..82011b728 100644
--- a/packages/exojs-ldtk/test/ldtk-map.test.ts
+++ b/packages/exojs-ldtk/test/ldtk-map.test.ts
@@ -1,4 +1,4 @@
-import type { TileMap } from '@codexo/exojs-tilemap';
+import type { TileMap } from '@codexo/exojs/tilemap';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { LdtkData, LdtkLevel, LdtkWorldData } from '../src/LdtkData';
diff --git a/packages/exojs-ldtk/test/ldtk-world.test.ts b/packages/exojs-ldtk/test/ldtk-world.test.ts
index c239b5a0e..2d7f12795 100644
--- a/packages/exojs-ldtk/test/ldtk-world.test.ts
+++ b/packages/exojs-ldtk/test/ldtk-world.test.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 import { basename, join } from 'node:path';
 
 import type { AssetFactoryContext, Destroyable, LoaderScope, Texture } from '@codexo/exojs';
-import { MapLevelSide, mapObjectDescriptors, MapObjectSpawner, TileMap } from '@codexo/exojs-tilemap';
+import { MapLevelSide, mapObjectDescriptors, MapObjectSpawner, TileMap } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import type { LdtkData } from '../src/LdtkData';
diff --git a/packages/exojs-ldtk/tsconfig.build.json b/packages/exojs-ldtk/tsconfig.build.json
index 341477a6f..32994c03b 100644
--- a/packages/exojs-ldtk/tsconfig.build.json
+++ b/packages/exojs-ldtk/tsconfig.build.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's and exojs-tilemap's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
+  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations, including its tilemap subpath (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "rootDir": "src",
@@ -10,7 +10,7 @@
       "@codexo/exojs/extensions": ["../../dist/esm/extensions/index.d.ts"],
       "@codexo/exojs/renderer-sdk": ["../../dist/esm/renderer-sdk.d.ts"],
       "@codexo/exojs/debug": ["../../dist/esm/debug/index.d.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/dist/esm/index.d.ts"]
+      "@codexo/exojs/tilemap": ["../../dist/esm/tilemap/index.d.ts"]
     }
   }
 }
diff --git a/packages/exojs-ldtk/tsconfig.json b/packages/exojs-ldtk/tsconfig.json
index 2a1735129..5a6d3c585 100644
--- a/packages/exojs-ldtk/tsconfig.json
+++ b/packages/exojs-ldtk/tsconfig.json
@@ -1,14 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/src/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules"]
diff --git a/packages/exojs-lighting/README.md b/packages/exojs-lighting/README.md
index 95931c461..e606cf456 100644
--- a/packages/exojs-lighting/README.md
+++ b/packages/exojs-lighting/README.md
@@ -14,7 +14,7 @@ Core is the peer dependency. This package exposes directly constructed systems,
 
 ```ts
 import { Color, Graphics, Scene } from '@codexo/exojs';
-import { LightmapLighting, PointLight } from '@codexo/exojs-lighting';
+import { LightmapLighting, PointLight } from '@codexo/exojs/lighting';
 
 export class LitScene extends Scene {
   override init(): void {
diff --git a/packages/exojs-lighting/package.json b/packages/exojs-lighting/package.json
index 31a2f4e7a..60588fb5e 100644
--- a/packages/exojs-lighting/package.json
+++ b/packages/exojs-lighting/package.json
@@ -1,46 +1,18 @@
 {
-  "name": "@codexo/exojs-lighting",
-  "version": "0.19.1",
-  "description": "Forward 2D normal-mapped point lighting for ExoJS sprites.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Exoridus/ExoJS.git",
-    "directory": "packages/exojs-lighting"
-  },
+  "name": "@codexo/exojs-module-lighting",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Forward 2D normal-mapped point lighting for ExoJS sprites. Source of the @codexo/exojs/lighting subpath; built into and shipped with the Core package, never published on its own.",
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/esm/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist/esm/",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
-    "build": "tsx ../../scripts/build-extension.ts",
-    "build:dev": "tsx ../../scripts/build-extension.ts --dev",
     "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "vitest run --root ../.. --project=exojs-lighting"
   },
-  "peerDependencies": {
-    "@codexo/exojs": "0.19.x"
-  },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
     "@codexo/exojs-config": "workspace:*"
   },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }
diff --git a/packages/exojs-lighting/rolldown.config.ts b/packages/exojs-lighting/rolldown.config.ts
index ae940b202..90cf74322 100644
--- a/packages/exojs-lighting/rolldown.config.ts
+++ b/packages/exojs-lighting/rolldown.config.ts
@@ -1,9 +1,8 @@
-import { createExtensionBuildOptions } from '@codexo/exojs-config/rolldown';
+import { defineRuntimeModule } from '@codexo/exojs-config/rolldown';
 
-// @codexo/exojs-lighting is a library package: a single side-effect-free entry.
-// No package-internal `#` imports (all same-directory `./`), so no source
-// condition / node-resolve is needed; Core's `#` resolves to its dist.
-export default createExtensionBuildOptions({
+// A single side-effect-free entry. No package-internal `#` imports (all
+// same-directory `./`), so no source condition is needed.
+export default defineRuntimeModule({
   root: import.meta.dirname,
   sourceCondition: null,
   inputs: ['src/index.ts'],
diff --git a/packages/exojs-lighting/tsconfig.build.json b/packages/exojs-lighting/tsconfig.build.json
deleted file mode 100644
index 037677bbc..000000000
--- a/packages/exojs-lighting/tsconfig.build.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "customConditions": [],
-    "paths": {
-      "@codexo/exojs": ["../../dist/esm/index.d.ts"]
-    }
-  }
-}
diff --git a/packages/exojs-lighting/tsconfig.json b/packages/exojs-lighting/tsconfig.json
index d9042e12c..7ce6ad85f 100644
--- a/packages/exojs-lighting/tsconfig.json
+++ b/packages/exojs-lighting/tsconfig.json
@@ -1,10 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules", "test"]
diff --git a/packages/exojs-particles/README.md b/packages/exojs-particles/README.md
index bf6bef51b..ddb8dd6f2 100644
--- a/packages/exojs-particles/README.md
+++ b/packages/exojs-particles/README.md
@@ -14,7 +14,7 @@ Core is a peer dependency. Add `particlesExtension` to the application that rend
 
 ```ts
 import { Application, Color, type RenderingContext, Scene } from '@codexo/exojs';
-import { ConeDirection, Constant, particlesExtension, ParticleSystem, RateSpawn } from '@codexo/exojs-particles';
+import { ConeDirection, Constant, particlesExtension, ParticleSystem, RateSpawn } from '@codexo/exojs/particles';
 
 class ParticleScene extends Scene {
   private particles!: ParticleSystem;
diff --git a/packages/exojs-particles/package.json b/packages/exojs-particles/package.json
index fe6cfcb51..7b9e3dcb1 100644
--- a/packages/exojs-particles/package.json
+++ b/packages/exojs-particles/package.json
@@ -1,53 +1,23 @@
 {
-  "name": "@codexo/exojs-particles",
-  "version": "0.19.1",
-  "description": "Particle system extension for ExoJS.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Exoridus/ExoJS.git",
-    "directory": "packages/exojs-particles"
-  },
+  "name": "@codexo/exojs-module-particles",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Particle system extension for ExoJS. Source of the @codexo/exojs/particles subpath; built into and shipped with the Core package, never published on its own.",
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/esm/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
   "imports": {
     "#*": {
-      "@codexo/exojs-particles-source": "./src/*.ts",
-      "types": "./dist/esm/*.d.ts",
-      "default": "./dist/esm/*.js"
+      "@codexo/exojs-particles-source": "./src/*.ts"
     }
   },
-  "files": [
-    "dist/esm/",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
-    "build": "tsx ../../scripts/build-extension.ts",
-    "build:dev": "tsx ../../scripts/build-extension.ts --dev",
     "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "vitest run --root ../.. --project=exojs-particles"
   },
-  "peerDependencies": {
-    "@codexo/exojs": "0.19.x"
-  },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
     "@codexo/exojs-config": "workspace:*"
   },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }
diff --git a/packages/exojs-particles/rolldown.config.ts b/packages/exojs-particles/rolldown.config.ts
index 47fd3f37e..b2545a897 100644
--- a/packages/exojs-particles/rolldown.config.ts
+++ b/packages/exojs-particles/rolldown.config.ts
@@ -1,8 +1,8 @@
-import { createExtensionBuildOptions } from '@codexo/exojs-config/rolldown';
+import { defineRuntimeModule } from '@codexo/exojs-config/rolldown';
 
 // Particles has package-internal `#` imports (renderers/gpu/modules/...), resolved
 // to source via its own `@codexo/exojs-particles-source` condition at build time.
-export default createExtensionBuildOptions({
+export default defineRuntimeModule({
   root: import.meta.dirname,
   sourceCondition: '@codexo/exojs-particles-source',
 });
diff --git a/packages/exojs-particles/test/readme-example.test.ts b/packages/exojs-particles/test/readme-example.test.ts
index 5f540cc6d..2205b790f 100644
--- a/packages/exojs-particles/test/readme-example.test.ts
+++ b/packages/exojs-particles/test/readme-example.test.ts
@@ -61,7 +61,7 @@ describe('README "Minimal working example"', () => {
         esModuleInterop: true,
         // The package's own source resolves its internal `#foo` subpath
         // imports through these two conditions (see package.json#imports) -
-        // without them every internal import inside @codexo/exojs-particles
+        // without them every internal import inside the particles module
         // fails to resolve and every export downgrades to `any`, masking
         // real type errors in the snippet under test.
         resolvePackageJsonImports: true,
@@ -69,7 +69,7 @@ describe('README "Minimal working example"', () => {
         baseUrl: repoRoot,
         paths: {
           '@codexo/exojs': ['./src/index.ts'],
-          '@codexo/exojs-particles': ['./packages/exojs-particles/src/index.ts'],
+          '@codexo/exojs/particles': ['./packages/exojs-particles/src/index.ts'],
         },
       };
 
diff --git a/packages/exojs-particles/tsconfig.build.json b/packages/exojs-particles/tsconfig.build.json
deleted file mode 100644
index ff8bfc995..000000000
--- a/packages/exojs-particles/tsconfig.build.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. Rolldown transpiles this package's own `#` imports directly, so it never sees a Core `#` import - but `paths` here still has to resolve the *public* `@codexo/exojs*` specifiers this package's source imports, and it must resolve them against Core's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "customConditions": ["@codexo/exojs-particles-source"],
-    "paths": {
-      "@codexo/exojs": ["../../dist/esm/index.d.ts"],
-      "@codexo/exojs/extensions": ["../../dist/esm/extensions/index.d.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../dist/esm/renderer-sdk.d.ts"],
-      "@codexo/exojs/debug": ["../../dist/esm/debug/index.d.ts"]
-    }
-  }
-}
diff --git a/packages/exojs-particles/tsconfig.json b/packages/exojs-particles/tsconfig.json
index 9dcf0951a..8173b138d 100644
--- a/packages/exojs-particles/tsconfig.json
+++ b/packages/exojs-particles/tsconfig.json
@@ -1,13 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source", "@codexo/exojs-particles-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source", "@codexo/exojs-particles-source"]
   },
   "include": ["src/**/*", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules"]
diff --git a/packages/exojs-pathfinding/README.md b/packages/exojs-pathfinding/README.md
index 65f5bb274..ab1c12769 100644
--- a/packages/exojs-pathfinding/README.md
+++ b/packages/exojs-pathfinding/README.md
@@ -13,7 +13,7 @@ This is a directly used library. It has no application extension descriptor or g
 ## Find a route on a grid
 
 ```ts
-import { GridSpace, Pathfinder } from '@codexo/exojs-pathfinding';
+import { GridSpace, Pathfinder } from '@codexo/exojs/pathfinding';
 
 const grid = GridSpace.from(12, 8, (x, y) => (x === 5 && y !== 4 ? 0 : 1), {
   cellSize: 32,
@@ -34,7 +34,7 @@ Zero-cost cells are blocked; positive costs describe traversal weight. `findPath
 
 ```ts
 import { Container, type PointLike, type Seconds } from '@codexo/exojs';
-import { GridSpace, NavigationAgentComponent, type NavigationMovement } from '@codexo/exojs-pathfinding';
+import { GridSpace, NavigationAgentComponent, type NavigationMovement } from '@codexo/exojs/pathfinding';
 
 class NodeMovement implements NavigationMovement {
   public constructor(
@@ -67,8 +67,8 @@ agent.onStatusChange.add(status => console.log(status));
 `TileNavigationSpace` turns a tile layer into a navigation space with a cost callback and keeps itself in step with tile edits and chunk streaming, resampling only the chunks that changed. It reads the layer through a structural contract, so the package has no dependency on `@codexo/exojs-tilemap`.
 
 ```ts
-import { TileNavigationSpace } from '@codexo/exojs-pathfinding';
-import type { TileLayer } from '@codexo/exojs-tilemap';
+import { TileNavigationSpace } from '@codexo/exojs/pathfinding';
+import type { TileLayer } from '@codexo/exojs/tilemap';
 
 declare const ground: TileLayer;
 
diff --git a/packages/exojs-pathfinding/package.json b/packages/exojs-pathfinding/package.json
index ccc7bf263..24757c41f 100644
--- a/packages/exojs-pathfinding/package.json
+++ b/packages/exojs-pathfinding/package.json
@@ -1,48 +1,18 @@
 {
-  "name": "@codexo/exojs-pathfinding",
-  "version": "0.19.1",
-  "description": "Deterministic, allocation-free 2D pathfinding for ExoJS: A*, jump-point search, weighted grids and waypoint graphs.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Exoridus/ExoJS.git",
-    "directory": "packages/exojs-pathfinding"
-  },
+  "name": "@codexo/exojs-module-pathfinding",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Deterministic, allocation-free 2D pathfinding for ExoJS: A*, jump-point search, weighted grids and waypoint graphs. Source of the @codexo/exojs/pathfinding subpath; built into and shipped with the Core package, never published on its own.",
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/esm/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist/esm/",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
-    "build": "tsx ../../scripts/build-extension.ts",
-    "build:dev": "tsx ../../scripts/build-extension.ts --dev",
     "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "vitest run --root ../.. --project=exojs-pathfinding"
   },
-  "peerDependencies": {
-    "@codexo/exojs": "0.19.x"
-  },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
-    "@codexo/exojs-config": "workspace:*",
-    "@codexo/exojs-physics": "workspace:*",
-    "@codexo/exojs-tilemap": "workspace:*"
+    "@codexo/exojs-config": "workspace:*"
   },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }
diff --git a/packages/exojs-pathfinding/rolldown.config.ts b/packages/exojs-pathfinding/rolldown.config.ts
index 682a481fd..cdc9cb4c3 100644
--- a/packages/exojs-pathfinding/rolldown.config.ts
+++ b/packages/exojs-pathfinding/rolldown.config.ts
@@ -1,9 +1,8 @@
-import { createExtensionBuildOptions } from '@codexo/exojs-config/rolldown';
+import { defineRuntimeModule } from '@codexo/exojs-config/rolldown';
 
-// @codexo/exojs-pathfinding is a library package: a single side-effect-free
-// entry. No package-internal `#` imports (all relative `./`), so no source
-// condition / node-resolve is needed; Core's `#` resolves to its dist.
-export default createExtensionBuildOptions({
+// A single side-effect-free entry. No package-internal `#` imports (all
+// relative `./`), so no source condition is needed.
+export default defineRuntimeModule({
   root: import.meta.dirname,
   sourceCondition: null,
   inputs: ['src/index.ts'],
diff --git a/packages/exojs-pathfinding/test/TileNavigationSpace.test.ts b/packages/exojs-pathfinding/test/TileNavigationSpace.test.ts
index 57ca12997..063218b17 100644
--- a/packages/exojs-pathfinding/test/TileNavigationSpace.test.ts
+++ b/packages/exojs-pathfinding/test/TileNavigationSpace.test.ts
@@ -1,5 +1,5 @@
 import { logger, type Texture, TextureRegion, Vector } from '@codexo/exojs';
-import { packTile, type ResolvedTile, TILE_TRANSFORM_IDENTITY, TileLayer, TileProjection, TileSet } from '@codexo/exojs-tilemap';
+import { packTile, type ResolvedTile, TILE_TRANSFORM_IDENTITY, TileLayer, TileProjection, TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, expectTypeOf, it, vi } from 'vitest';
 
 import { Pathfinder } from '../src/Pathfinder';
diff --git a/packages/exojs-pathfinding/test/physics-integration.test.ts b/packages/exojs-pathfinding/test/physics-integration.test.ts
index d5690f796..7e32b4d56 100644
--- a/packages/exojs-pathfinding/test/physics-integration.test.ts
+++ b/packages/exojs-pathfinding/test/physics-integration.test.ts
@@ -18,8 +18,8 @@ import {
   PhysicsBody,
   PhysicsBodyComponent,
   PhysicsWorld,
-} from '@codexo/exojs-physics';
-import { type ResolvedTile, TILE_TRANSFORM_IDENTITY, TileLayer, TileSet } from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/physics';
+import { type ResolvedTile, TILE_TRANSFORM_IDENTITY, TileLayer, TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, expectTypeOf, it, vi } from 'vitest';
 
 import { NavigationAgentComponent } from '../src/navigation/NavigationAgentComponent';
diff --git a/packages/exojs-pathfinding/tsconfig.build.json b/packages/exojs-pathfinding/tsconfig.build.json
deleted file mode 100644
index 037677bbc..000000000
--- a/packages/exojs-pathfinding/tsconfig.build.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "customConditions": [],
-    "paths": {
-      "@codexo/exojs": ["../../dist/esm/index.d.ts"]
-    }
-  }
-}
diff --git a/packages/exojs-pathfinding/tsconfig.json b/packages/exojs-pathfinding/tsconfig.json
index d9042e12c..7ce6ad85f 100644
--- a/packages/exojs-pathfinding/tsconfig.json
+++ b/packages/exojs-pathfinding/tsconfig.json
@@ -1,10 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules", "test"]
diff --git a/packages/exojs-pathfinding/tsconfig.test.json b/packages/exojs-pathfinding/tsconfig.test.json
index 393b7a5cb..9a9609ae6 100644
--- a/packages/exojs-pathfinding/tsconfig.test.json
+++ b/packages/exojs-pathfinding/tsconfig.test.json
@@ -1,17 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Type-checks this package's own test/** - the package's main program only includes src/**. Run by the package's 'typecheck' script. The loosened flags live in the shared package-test profile. The 'paths' below are test-only: the integration tests drive real tilemap and physics packages, which publish 'exports' pointing at dist/**, so they are mapped to source like the engine. TypeScript replaces an inherited 'paths' object wholesale rather than merging it, so the engine entries from tsconfig.json are repeated here.",
+  "_comment": "Type-checks this package's own test/** - the package's main program only includes src/**. Run by the package's 'typecheck' script. The loosened flags live in the shared package-test profile. The integration tests drive the real tilemap and physics modules, which the inherited workspace paths map to source like the engine.",
   "extends": ["./tsconfig.json", "@codexo/exojs-config/typescript/package-test.json"],
-  "compilerOptions": {
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/src/index.ts"],
-      "@codexo/exojs-physics": ["../exojs-physics/src/index.ts"]
-    }
-  },
   "include": ["test/**/*", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules"]
 }
diff --git a/packages/exojs-physics/README.md b/packages/exojs-physics/README.md
index f6396bdd1..670f02ee0 100644
--- a/packages/exojs-physics/README.md
+++ b/packages/exojs-physics/README.md
@@ -16,7 +16,7 @@ Core is a peer dependency. Keep the packages on a compatible release line.
 
 ```ts
 import { Scene, SystemOrder } from '@codexo/exojs';
-import { BoxShape, Collider, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, Collider, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 
 export class GameScene extends Scene {
   override init(): void {
@@ -49,7 +49,7 @@ The scene registry drives and destroys this world: it steps once per application
 
 ```ts
 import { Graphics } from '@codexo/exojs';
-import { CircleShape, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs/physics';
 
 const world = new PhysicsWorld({ gravity: { x: 0, y: 980 } });
 const ball = new Graphics();
@@ -66,7 +66,7 @@ Component-managed bodies do not support joints yet. `world.remove(body)` takes a
 
 ```ts
 import { BehaviorComponent, Container, Scene, SystemOrder } from '@codexo/exojs';
-import { CircleShape, KinematicMovementComponent, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs-physics';
+import { CircleShape, KinematicMovementComponent, PhysicsBodyComponent, PhysicsWorld } from '@codexo/exojs/physics';
 
 class Drift extends BehaviorComponent {
   public constructor(private readonly movement: KinematicMovementComponent) {
@@ -106,7 +106,7 @@ import {
   KinematicMovementComponent,
   PhysicsBodyComponent,
   PhysicsWorld,
-} from '@codexo/exojs-physics';
+} from '@codexo/exojs/physics';
 
 const controls = new ActionMap({
   walk: new AxisAction({ negative: Keyboard.A, positive: Keyboard.D }),
diff --git a/packages/exojs-physics/package.json b/packages/exojs-physics/package.json
index 5d37e81b1..fc1259c1d 100644
--- a/packages/exojs-physics/package.json
+++ b/packages/exojs-physics/package.json
@@ -1,51 +1,18 @@
 {
-  "name": "@codexo/exojs-physics",
-  "version": "0.19.1",
-  "description": "Native 2D collision, query and sensor runtime for ExoJS.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Exoridus/ExoJS.git",
-    "directory": "packages/exojs-physics"
-  },
+  "name": "@codexo/exojs-module-physics",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Native 2D collision, query and sensor runtime for ExoJS. Source of the @codexo/exojs/physics subpath; built into and shipped with the Core package, never published on its own.",
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/esm/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./debug": {
-      "types": "./dist/esm/debug/index.d.ts",
-      "import": "./dist/esm/debug/index.js",
-      "default": "./dist/esm/debug/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist/esm/",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
-    "build": "tsx ../../scripts/build-extension.ts",
-    "build:dev": "tsx ../../scripts/build-extension.ts --dev",
     "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "vitest run --root ../.. --project=exojs-physics"
   },
-  "peerDependencies": {
-    "@codexo/exojs": "0.19.x"
-  },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
     "@codexo/exojs-config": "workspace:*"
   },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }
diff --git a/packages/exojs-physics/rolldown.config.ts b/packages/exojs-physics/rolldown.config.ts
index 7ef6fe970..69bc9f5da 100644
--- a/packages/exojs-physics/rolldown.config.ts
+++ b/packages/exojs-physics/rolldown.config.ts
@@ -1,10 +1,10 @@
-import { createExtensionBuildOptions } from '@codexo/exojs-config/rolldown';
+import { defineRuntimeModule } from '@codexo/exojs-config/rolldown';
 
-// Physics is a library package (no `/register`); it ships two public subpaths:
-// the root world/collision API and the tree-shakeable `./debug` draw layer.
-// No package-internal `#` imports - modules reference each other relatively, so
-// no source condition is required.
-export default createExtensionBuildOptions({
+// Two entries: the world/collision API behind `@codexo/exojs/physics`, and the
+// debug draw layer that `@codexo/exojs/debug` re-exports. No package-internal
+// `#` imports - modules reference each other relatively, so no source
+// condition is required.
+export default defineRuntimeModule({
   root: import.meta.dirname,
   sourceCondition: null,
   inputs: ['src/index.ts', 'src/debug/index.ts'],
diff --git a/packages/exojs-physics/tsconfig.build.json b/packages/exojs-physics/tsconfig.build.json
deleted file mode 100644
index 3d479c36c..000000000
--- a/packages/exojs-physics/tsconfig.build.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "customConditions": [],
-    "paths": {
-      "@codexo/exojs": ["../../dist/esm/index.d.ts"],
-      "@codexo/exojs/extensions": ["../../dist/esm/extensions/index.d.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../dist/esm/renderer-sdk.d.ts"],
-      "@codexo/exojs/debug": ["../../dist/esm/debug/index.d.ts"]
-    }
-  }
-}
diff --git a/packages/exojs-physics/tsconfig.json b/packages/exojs-physics/tsconfig.json
index 84db4ce4f..8dbbc045b 100644
--- a/packages/exojs-physics/tsconfig.json
+++ b/packages/exojs-physics/tsconfig.json
@@ -1,13 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "src/typings.d.ts", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules"]
diff --git a/packages/exojs-tiled/package.json b/packages/exojs-tiled/package.json
index bf8eed6e8..fb5cba4ff 100644
--- a/packages/exojs-tiled/package.json
+++ b/packages/exojs-tiled/package.json
@@ -33,13 +33,11 @@
     "test": "vitest run --root ../.. --project=exojs-tiled"
   },
   "peerDependencies": {
-    "@codexo/exojs": "0.19.x",
-    "@codexo/exojs-tilemap": "0.19.x"
+    "@codexo/exojs": "0.19.x"
   },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
-    "@codexo/exojs-config": "workspace:*",
-    "@codexo/exojs-tilemap": "workspace:*"
+    "@codexo/exojs-config": "workspace:*"
   },
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/exojs-tiled/src/TiledMap.ts b/packages/exojs-tiled/src/TiledMap.ts
index 531239f29..8425b4a82 100644
--- a/packages/exojs-tiled/src/TiledMap.ts
+++ b/packages/exojs-tiled/src/TiledMap.ts
@@ -11,8 +11,8 @@ import type {
   TileProperties,
   TilePropertyValue,
   TileTransform,
-} from '@codexo/exojs-tilemap';
-import { ImageLayer, ObjectLayer, packTile, TileLayer, TileMap, TileProjection, TilePropertyKind, TileSet } from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
+import { ImageLayer, ObjectLayer, packTile, TileLayer, TileMap, TileProjection, TilePropertyKind, TileSet } from '@codexo/exojs/tilemap';
 
 import type {
   TiledChunkData,
diff --git a/packages/exojs-tiled/src/public.ts b/packages/exojs-tiled/src/public.ts
index 78335d44b..72030e01e 100644
--- a/packages/exojs-tiled/src/public.ts
+++ b/packages/exojs-tiled/src/public.ts
@@ -57,7 +57,7 @@ export type {
   TileTransform,
   UnknownMapObjectPolicy,
   WangSetOptions,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 export {
   MapLevelRuntime,
   MapLevelSide,
@@ -79,7 +79,7 @@ export {
   TileMapView,
   TileSet,
   WangSet,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 
 // ── Raw Tiled JSON (TMJ/TSJ) types ──────────────────────────────────────────
 export type {
@@ -132,7 +132,7 @@ export { tiledWangSetToWangSet } from './wangSets';
 export { TiledFormatError } from './validate';
 
 // ── Module augmentation - typed load calls ───────────────────────────────────
-import type { TileMap } from '@codexo/exojs-tilemap';
+import type { TileMap } from '@codexo/exojs/tilemap';
 
 import type { TiledMap } from './TiledMap';
 
diff --git a/packages/exojs-tiled/src/tileMapType.ts b/packages/exojs-tiled/src/tileMapType.ts
index 876c630b0..abe6616da 100644
--- a/packages/exojs-tiled/src/tileMapType.ts
+++ b/packages/exojs-tiled/src/tileMapType.ts
@@ -1,6 +1,6 @@
 import type { AssetFactory } from '@codexo/exojs';
 import { type AssetRequest, AssetType } from '@codexo/exojs';
-import { TileMap } from '@codexo/exojs-tilemap';
+import { TileMap } from '@codexo/exojs/tilemap';
 
 import { resolveTiledOptions, type TiledLoadOptions } from './tiledOptions';
 import { tiledSourceType } from './tiledSourceType';
diff --git a/packages/exojs-tiled/src/tiledExtension.ts b/packages/exojs-tiled/src/tiledExtension.ts
index 0e97990af..560abca0a 100644
--- a/packages/exojs-tiled/src/tiledExtension.ts
+++ b/packages/exojs-tiled/src/tiledExtension.ts
@@ -1,5 +1,5 @@
 import type { Extension } from '@codexo/exojs/extensions';
-import { tilemapExtension } from '@codexo/exojs-tilemap';
+import { tilemapExtension } from '@codexo/exojs/tilemap';
 
 import { tiledSourceType } from './tiledSourceType';
 import { tileMapType } from './tileMapType';
diff --git a/packages/exojs-tiled/src/wangSets.ts b/packages/exojs-tiled/src/wangSets.ts
index 4de466afe..8bbf163bd 100644
--- a/packages/exojs-tiled/src/wangSets.ts
+++ b/packages/exojs-tiled/src/wangSets.ts
@@ -1,4 +1,4 @@
-import { WangSet } from '@codexo/exojs-tilemap';
+import { WangSet } from '@codexo/exojs/tilemap';
 
 import type { TiledWangSetData } from './data';
 
diff --git a/packages/exojs-tiled/test/TiledMap.test.ts b/packages/exojs-tiled/test/TiledMap.test.ts
index 916b95222..e2593fac0 100644
--- a/packages/exojs-tiled/test/TiledMap.test.ts
+++ b/packages/exojs-tiled/test/TiledMap.test.ts
@@ -1,5 +1,5 @@
 import { Texture } from '@codexo/exojs';
-import { TileLayer, TileMap, TileSet } from '@codexo/exojs-tilemap';
+import { TileLayer, TileMap, TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, it, test } from 'vitest';
 
 import type { TiledChunkData, TiledLayerData, TiledMapData, TiledObjectData, TiledPropertyData } from '../src/data';
diff --git a/packages/exojs-tiled/test/collection-tileset.test.ts b/packages/exojs-tiled/test/collection-tileset.test.ts
index 5475299f4..03fecb95f 100644
--- a/packages/exojs-tiled/test/collection-tileset.test.ts
+++ b/packages/exojs-tiled/test/collection-tileset.test.ts
@@ -1,5 +1,5 @@
 import { Texture } from '@codexo/exojs';
-import { ObjectKind } from '@codexo/exojs-tilemap';
+import { ObjectKind } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import type { TiledTilesetData } from '../src/data';
diff --git a/packages/exojs-tiled/test/extension.test.ts b/packages/exojs-tiled/test/extension.test.ts
index b9c148884..5b78933b6 100644
--- a/packages/exojs-tiled/test/extension.test.ts
+++ b/packages/exojs-tiled/test/extension.test.ts
@@ -2,7 +2,7 @@
 // this package's asset type. Without it the augmentation is not in the program.
 import '../src/index';
 
-import { TileMap, tilemapExtension } from '@codexo/exojs-tilemap';
+import { TileMap, tilemapExtension } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { buildSnapshot } from '../../../src/extensions/snapshot';
diff --git a/packages/exojs-tiled/test/facade.test.ts b/packages/exojs-tiled/test/facade.test.ts
index ac461b0df..6921f257e 100644
--- a/packages/exojs-tiled/test/facade.test.ts
+++ b/packages/exojs-tiled/test/facade.test.ts
@@ -1,4 +1,4 @@
-import { TileLayer, TileLayerNode, TileMap, TileMapBand, TileMapNode, TileMapView, TileSet } from '@codexo/exojs-tilemap';
+import { TileLayer, TileLayerNode, TileMap, TileMapBand, TileMapNode, TileMapView, TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import * as tiled from '../src/public';
diff --git a/packages/exojs-tiled/test/templates.test.ts b/packages/exojs-tiled/test/templates.test.ts
index a5c3530e6..17ba6fb95 100644
--- a/packages/exojs-tiled/test/templates.test.ts
+++ b/packages/exojs-tiled/test/templates.test.ts
@@ -1,4 +1,4 @@
-import { ObjectKind } from '@codexo/exojs-tilemap';
+import { ObjectKind } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { TILED_FLIPPED_HORIZONTALLY_FLAG } from '../src/gid';
diff --git a/packages/exojs-tiled/test/tileMapType.test.ts b/packages/exojs-tiled/test/tileMapType.test.ts
index b3d890689..6a9af186c 100644
--- a/packages/exojs-tiled/test/tileMapType.test.ts
+++ b/packages/exojs-tiled/test/tileMapType.test.ts
@@ -1,5 +1,5 @@
 import { Asset, Texture } from '@codexo/exojs';
-import { TileMap } from '@codexo/exojs-tilemap';
+import { TileMap } from '@codexo/exojs/tilemap';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { tileMapType } from '../src/tileMapType';
diff --git a/packages/exojs-tiled/test/tiled-map-objects.test.ts b/packages/exojs-tiled/test/tiled-map-objects.test.ts
index b80dd6a71..d4b8dcac9 100644
--- a/packages/exojs-tiled/test/tiled-map-objects.test.ts
+++ b/packages/exojs-tiled/test/tiled-map-objects.test.ts
@@ -2,8 +2,8 @@ import { readFileSync } from 'node:fs';
 import { basename, join } from 'node:path';
 
 import type { Destroyable } from '@codexo/exojs';
-import type { TileMap } from '@codexo/exojs-tilemap';
-import { mapObjectDescriptors, MapObjectSpawner } from '@codexo/exojs-tilemap';
+import type { TileMap } from '@codexo/exojs/tilemap';
+import { mapObjectDescriptors, MapObjectSpawner } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { TiledObject } from '../src/TiledObject';
diff --git a/packages/exojs-tiled/test/toTileMap.test.ts b/packages/exojs-tiled/test/toTileMap.test.ts
index f3fe000ca..235a0c063 100644
--- a/packages/exojs-tiled/test/toTileMap.test.ts
+++ b/packages/exojs-tiled/test/toTileMap.test.ts
@@ -1,5 +1,5 @@
 import { View } from '@codexo/exojs';
-import { ChunkStreamer, ImageLayer, TileLayer, TileMap, TileSet } from '@codexo/exojs-tilemap';
+import { ChunkStreamer, ImageLayer, TileLayer, TileMap, TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { TiledGroupLayer, TiledImageLayer, TiledObjectLayer, TiledTileLayer } from '../src/TiledLayer';
@@ -421,7 +421,7 @@ describe('TiledMap.toTileMap() — infinite maps', () => {
     expect(payload!.width).toBe(32);
     expect(payload!.height).toBe(32);
 
-    const { unpackTile } = await import('@codexo/exojs-tilemap');
+    const { unpackTile } = await import('@codexo/exojs/tilemap');
     // (0,0): left on-disk chunk, gid 1 -> localTileId 0.
     expect(unpackTile(payload!.tiles[0 * 32 + 0])).toMatchObject({ localTileId: 0 });
     // (16,0): right on-disk chunk, gid 2 -> localTileId 1.
@@ -440,7 +440,7 @@ describe('TiledMap.toTileMap() — infinite maps', () => {
     const source = map.getChunkSource(1)!;
 
     const payload = await source.getChunk(0, 0);
-    const { unpackTile } = await import('@codexo/exojs-tilemap');
+    const { unpackTile } = await import('@codexo/exojs/tilemap');
     expect(unpackTile(payload!.tiles[0])).toMatchObject({ localTileId: 0, transform: { flipX: true, flipY: false, diagonal: false } });
   });
 
diff --git a/packages/exojs-tiled/test/type-context.ts b/packages/exojs-tiled/test/type-context.ts
index a6c0e2a19..bcc66f59d 100644
--- a/packages/exojs-tiled/test/type-context.ts
+++ b/packages/exojs-tiled/test/type-context.ts
@@ -3,7 +3,7 @@ import { basename, join } from 'node:path';
 
 import type { AssetFactoryContext } from '@codexo/exojs';
 import { Texture } from '@codexo/exojs';
-import type { TileMap } from '@codexo/exojs-tilemap';
+import type { TileMap } from '@codexo/exojs/tilemap';
 import { vi } from 'vitest';
 
 import type { TiledMap } from '../src/TiledMap';
diff --git a/packages/exojs-tiled/test/wangSets.test.ts b/packages/exojs-tiled/test/wangSets.test.ts
index ba8748638..a1e907339 100644
--- a/packages/exojs-tiled/test/wangSets.test.ts
+++ b/packages/exojs-tiled/test/wangSets.test.ts
@@ -1,4 +1,4 @@
-import { WangSet } from '@codexo/exojs-tilemap';
+import { WangSet } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import type { TiledWangSetData } from '../src/data';
diff --git a/packages/exojs-tiled/tsconfig.build.json b/packages/exojs-tiled/tsconfig.build.json
index 341477a6f..32994c03b 100644
--- a/packages/exojs-tiled/tsconfig.build.json
+++ b/packages/exojs-tiled/tsconfig.build.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's and exojs-tilemap's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
+  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations, including its tilemap subpath (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "rootDir": "src",
@@ -10,7 +10,7 @@
       "@codexo/exojs/extensions": ["../../dist/esm/extensions/index.d.ts"],
       "@codexo/exojs/renderer-sdk": ["../../dist/esm/renderer-sdk.d.ts"],
       "@codexo/exojs/debug": ["../../dist/esm/debug/index.d.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/dist/esm/index.d.ts"]
+      "@codexo/exojs/tilemap": ["../../dist/esm/tilemap/index.d.ts"]
     }
   }
 }
diff --git a/packages/exojs-tiled/tsconfig.json b/packages/exojs-tiled/tsconfig.json
index 2a1735129..5a6d3c585 100644
--- a/packages/exojs-tiled/tsconfig.json
+++ b/packages/exojs-tiled/tsconfig.json
@@ -1,14 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/src/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules"]
diff --git a/packages/exojs-tilemap-physics/README.md b/packages/exojs-tilemap-physics/README.md
index 8a6795c80..71d7e71e3 100644
--- a/packages/exojs-tilemap-physics/README.md
+++ b/packages/exojs-tilemap-physics/README.md
@@ -19,8 +19,8 @@ npm install @codexo/exojs @codexo/exojs-tilemap @codexo/exojs-physics @codexo/ex
 Only orthogonal and isometric layers have the rectangular logical cells required by tile collision. Constructing a `TileColliderStreamer` for a staggered or hexagonal layer throws immediately, before creating physics bodies; these grids require colliders built separately.
 
 ```ts
-import { PhysicsWorld } from '@codexo/exojs-physics';
-import { TileColliderStreamer } from '@codexo/exojs-tilemap-physics';
+import { PhysicsWorld } from '@codexo/exojs/physics';
+import { TileColliderStreamer } from '@codexo/exojs/tilemap-physics';
 
 const world = new PhysicsWorld({ gravity: { x: 0, y: 1600 } });
 const colliders = new TileColliderStreamer(world, groundLayer);
@@ -59,7 +59,7 @@ The source is sampled while a partition is built and is expected to answer ident
 An object layer is static data with no residency, so it gets a one-shot build:
 
 ```ts
-import { buildObjectLayerColliders } from '@codexo/exojs-tilemap-physics';
+import { buildObjectLayerColliders } from '@codexo/exojs/tilemap-physics';
 
 const built = buildObjectLayerColliders(world, triggersLayer, {
   isSensor: true,
diff --git a/packages/exojs-tilemap-physics/package.json b/packages/exojs-tilemap-physics/package.json
index 6001c841e..f5cbc2757 100644
--- a/packages/exojs-tilemap-physics/package.json
+++ b/packages/exojs-tilemap-physics/package.json
@@ -1,52 +1,20 @@
 {
-  "name": "@codexo/exojs-tilemap-physics",
-  "version": "0.19.1",
-  "description": "Static physics colliders from ExoJS tilemap collision geometry.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Exoridus/ExoJS.git",
-    "directory": "packages/exojs-tilemap-physics"
-  },
+  "name": "@codexo/exojs-module-tilemap-physics",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Static physics colliders from ExoJS tilemap collision geometry. Source of the @codexo/exojs/tilemap-physics subpath; built into and shipped with the Core package, never published on its own.",
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/esm/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist/esm/",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
-    "build": "tsx ../../scripts/build-extension.ts",
-    "build:dev": "tsx ../../scripts/build-extension.ts --dev",
     "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "vitest run --root ../.. --project=exojs-tilemap-physics"
   },
-  "peerDependencies": {
-    "@codexo/exojs": "0.19.x",
-    "@codexo/exojs-physics": "0.19.x",
-    "@codexo/exojs-tilemap": "0.19.x"
-  },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
     "@codexo/exojs-config": "workspace:*",
     "@codexo/exojs-ldtk": "workspace:*",
-    "@codexo/exojs-physics": "workspace:*",
-    "@codexo/exojs-tiled": "workspace:*",
-    "@codexo/exojs-tilemap": "workspace:*"
+    "@codexo/exojs-tiled": "workspace:*"
   },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }
diff --git a/packages/exojs-tilemap-physics/rolldown.config.ts b/packages/exojs-tilemap-physics/rolldown.config.ts
index fa1f7dd80..90cf74322 100644
--- a/packages/exojs-tilemap-physics/rolldown.config.ts
+++ b/packages/exojs-tilemap-physics/rolldown.config.ts
@@ -1,9 +1,8 @@
-import { createExtensionBuildOptions } from '@codexo/exojs-config/rolldown';
+import { defineRuntimeModule } from '@codexo/exojs-config/rolldown';
 
-// @codexo/exojs-tilemap-physics is a library package: a single side-effect-free entry. No
-// package-internal `#` imports (all same-directory `./`), so no source
-// condition / node-resolve is needed; Core's `#` resolves to its dist.
-export default createExtensionBuildOptions({
+// A single side-effect-free entry. No package-internal `#` imports (all
+// same-directory `./`), so no source condition is needed.
+export default defineRuntimeModule({
   root: import.meta.dirname,
   sourceCondition: null,
   inputs: ['src/index.ts'],
diff --git a/packages/exojs-tilemap-physics/src/TileColliderStreamer.ts b/packages/exojs-tilemap-physics/src/TileColliderStreamer.ts
index 9d5c1bcec..68d3f3598 100644
--- a/packages/exojs-tilemap-physics/src/TileColliderStreamer.ts
+++ b/packages/exojs-tilemap-physics/src/TileColliderStreamer.ts
@@ -1,6 +1,6 @@
-import { PhysicsBody, type PhysicsWorld } from '@codexo/exojs-physics';
-import type { ReadonlyTileChunk, TileCellSource, TileLayer, TileMapObject } from '@codexo/exojs-tilemap';
-import { buildTileCollisionGeometry } from '@codexo/exojs-tilemap';
+import { PhysicsBody, type PhysicsWorld } from '@codexo/exojs/physics';
+import type { ReadonlyTileChunk, TileCellSource, TileLayer, TileMapObject } from '@codexo/exojs/tilemap';
+import { buildTileCollisionGeometry } from '@codexo/exojs/tilemap';
 
 import { buildTileColliders } from './buildColliders';
 import { resolveDefaults, type ResolvedMaterial } from './material';
@@ -66,7 +66,7 @@ const blockExtent = (chunkExtent: number, layerExtent: number | undefined, start
  *
  * The bridge owns every body it creates and nothing else. It observes the layer
  * through its public revision counters, so it works with any chunk source -
- * {@link import('@codexo/exojs-tilemap').ChunkStreamer}, a hand-rolled loader,
+ * {@link import('@codexo/exojs/tilemap').ChunkStreamer}, a hand-rolled loader,
  * or a fully resident bounded layer.
  *
  * Tick it from `preFrame`, before the frame's fixed steps run - not from
diff --git a/packages/exojs-tilemap-physics/src/TilePhysicsBinding.ts b/packages/exojs-tilemap-physics/src/TilePhysicsBinding.ts
index 5c894f9b2..343b495bc 100644
--- a/packages/exojs-tilemap-physics/src/TilePhysicsBinding.ts
+++ b/packages/exojs-tilemap-physics/src/TilePhysicsBinding.ts
@@ -1,6 +1,6 @@
 import type { SceneNode } from '@codexo/exojs';
-import type { PhysicsBody } from '@codexo/exojs-physics';
-import type { TileProjection } from '@codexo/exojs-tilemap';
+import type { PhysicsBody } from '@codexo/exojs/physics';
+import type { TileProjection } from '@codexo/exojs/tilemap';
 
 /**
  * Explicit presentation of a logical physics body through a tile projection.
diff --git a/packages/exojs-tilemap-physics/src/buildColliders.ts b/packages/exojs-tilemap-physics/src/buildColliders.ts
index bd0b0b9ca..20e5e7576 100644
--- a/packages/exojs-tilemap-physics/src/buildColliders.ts
+++ b/packages/exojs-tilemap-physics/src/buildColliders.ts
@@ -1,12 +1,12 @@
 import { logger, type PointLike } from '@codexo/exojs';
-import { BoxShape, CapsuleShape, ChainShape, CircleShape, type ColliderOptions, toConvexPolygonShapes } from '@codexo/exojs-physics';
+import { BoxShape, CapsuleShape, ChainShape, CircleShape, type ColliderOptions, toConvexPolygonShapes } from '@codexo/exojs/physics';
 import {
   ObjectKind,
   type TileCollisionGeometry,
   type TileCollisionRect,
   type TileCollisionShape,
   type TileMapObject,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 
 import { materialKey, type ResolvedMaterial, resolveMaterial } from './material';
 import { traceCellOutlines } from './outline';
diff --git a/packages/exojs-tilemap-physics/src/material.ts b/packages/exojs-tilemap-physics/src/material.ts
index 7ade00893..93c496440 100644
--- a/packages/exojs-tilemap-physics/src/material.ts
+++ b/packages/exojs-tilemap-physics/src/material.ts
@@ -1,4 +1,4 @@
-import { type CollisionFilter, defaultFilter } from '@codexo/exojs-physics';
+import { type CollisionFilter, defaultFilter } from '@codexo/exojs/physics';
 
 import type { ColliderDefaults, TileColliderContext } from './types';
 
diff --git a/packages/exojs-tilemap-physics/src/objectLayer.ts b/packages/exojs-tilemap-physics/src/objectLayer.ts
index 0f961c04e..dad2996a2 100644
--- a/packages/exojs-tilemap-physics/src/objectLayer.ts
+++ b/packages/exojs-tilemap-physics/src/objectLayer.ts
@@ -1,5 +1,5 @@
-import { PhysicsBody, type PhysicsWorld } from '@codexo/exojs-physics';
-import type { ObjectLayer, TileMapObject } from '@codexo/exojs-tilemap';
+import { PhysicsBody, type PhysicsWorld } from '@codexo/exojs/physics';
+import type { ObjectLayer, TileMapObject } from '@codexo/exojs/tilemap';
 
 import { collidersForGeometry, objectLabel } from './buildColliders';
 import { resolveDefaults, resolveMaterial } from './material';
diff --git a/packages/exojs-tilemap-physics/src/types.ts b/packages/exojs-tilemap-physics/src/types.ts
index e017904cf..4dcee79f6 100644
--- a/packages/exojs-tilemap-physics/src/types.ts
+++ b/packages/exojs-tilemap-physics/src/types.ts
@@ -1,5 +1,5 @@
-import type { CollisionFilter } from '@codexo/exojs-physics';
-import type { TileMapObject } from '@codexo/exojs-tilemap';
+import type { CollisionFilter } from '@codexo/exojs/physics';
+import type { TileMapObject } from '@codexo/exojs/tilemap';
 
 /**
  * How a run of solid whole-cell tiles is turned into colliders.
diff --git a/packages/exojs-tilemap-physics/test/adapterEndToEnd.test.ts b/packages/exojs-tilemap-physics/test/adapterEndToEnd.test.ts
index e494c8382..2cda5f634 100644
--- a/packages/exojs-tilemap-physics/test/adapterEndToEnd.test.ts
+++ b/packages/exojs-tilemap-physics/test/adapterEndToEnd.test.ts
@@ -1,9 +1,9 @@
 import { type Texture, TextureRegion } from '@codexo/exojs';
+import { ChainShape, PhysicsWorld, PolygonShape } from '@codexo/exojs/physics';
+import type { TileLayer } from '@codexo/exojs/tilemap';
 import type { LdtkData } from '@codexo/exojs-ldtk';
 import { createLdtkIntGridCellSource, ldtkToTileMap } from '@codexo/exojs-ldtk';
-import { ChainShape, PhysicsWorld, PolygonShape } from '@codexo/exojs-physics';
 import { TiledMap, TiledTileset } from '@codexo/exojs-tiled';
-import type { TileLayer } from '@codexo/exojs-tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { TileColliderStreamer } from '../src/TileColliderStreamer';
diff --git a/packages/exojs-tilemap-physics/test/cellSource.test.ts b/packages/exojs-tilemap-physics/test/cellSource.test.ts
index 828df8a80..f84698d9f 100644
--- a/packages/exojs-tilemap-physics/test/cellSource.test.ts
+++ b/packages/exojs-tilemap-physics/test/cellSource.test.ts
@@ -1,5 +1,5 @@
-import { ChainShape, PhysicsWorld } from '@codexo/exojs-physics';
-import type { TileCellSource } from '@codexo/exojs-tilemap';
+import { ChainShape, PhysicsWorld } from '@codexo/exojs/physics';
+import type { TileCellSource } from '@codexo/exojs/tilemap';
 import { describe, expect, it, vi } from 'vitest';
 
 import { TileColliderStreamer } from '../src/TileColliderStreamer';
diff --git a/packages/exojs-tilemap-physics/test/helpers.ts b/packages/exojs-tilemap-physics/test/helpers.ts
index b36aeeb7b..065617ae6 100644
--- a/packages/exojs-tilemap-physics/test/helpers.ts
+++ b/packages/exojs-tilemap-physics/test/helpers.ts
@@ -8,7 +8,7 @@ import {
   type TileMapObject,
   TileSet,
   type TileTransform,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 
 export const TILE = 16;
 
diff --git a/packages/exojs-tilemap-physics/test/isometric.test.ts b/packages/exojs-tilemap-physics/test/isometric.test.ts
index 0aa67b844..bf6e524e2 100644
--- a/packages/exojs-tilemap-physics/test/isometric.test.ts
+++ b/packages/exojs-tilemap-physics/test/isometric.test.ts
@@ -1,5 +1,5 @@
 import { Container, type Texture, TextureRegion } from '@codexo/exojs';
-import { PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 import {
   buildTileCollisionGeometry,
   ObjectLayer,
@@ -7,7 +7,7 @@ import {
   TileLayer,
   TileProjection,
   TileSet,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { buildObjectLayerColliders } from '../src/objectLayer';
diff --git a/packages/exojs-tilemap-physics/test/mapping.test.ts b/packages/exojs-tilemap-physics/test/mapping.test.ts
index 0a59bfada..0d854c0d1 100644
--- a/packages/exojs-tilemap-physics/test/mapping.test.ts
+++ b/packages/exojs-tilemap-physics/test/mapping.test.ts
@@ -1,5 +1,5 @@
-import { BoxShape, PhysicsWorld } from '@codexo/exojs-physics';
-import { ObjectKind, type TileMapObject } from '@codexo/exojs-tilemap';
+import { BoxShape, PhysicsWorld } from '@codexo/exojs/physics';
+import { ObjectKind, type TileMapObject } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { buildObjectLayerColliders } from '../src/objectLayer';
diff --git a/packages/exojs-tilemap-physics/test/outline-mode.test.ts b/packages/exojs-tilemap-physics/test/outline-mode.test.ts
index 73a8fe8d5..71e6d0fe5 100644
--- a/packages/exojs-tilemap-physics/test/outline-mode.test.ts
+++ b/packages/exojs-tilemap-physics/test/outline-mode.test.ts
@@ -1,5 +1,5 @@
-import { BoxShape, ChainShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
-import type { TileLayer, TileSet } from '@codexo/exojs-tilemap';
+import { BoxShape, ChainShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
+import type { TileLayer, TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import type { TileColliderOptions } from '../src/TileColliderStreamer';
diff --git a/packages/exojs-tilemap-physics/test/streamer.test.ts b/packages/exojs-tilemap-physics/test/streamer.test.ts
index 42e11380d..c64d23918 100644
--- a/packages/exojs-tilemap-physics/test/streamer.test.ts
+++ b/packages/exojs-tilemap-physics/test/streamer.test.ts
@@ -1,5 +1,5 @@
 import { View } from '@codexo/exojs';
-import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody, PhysicsWorld } from '@codexo/exojs/physics';
 import {
   type ChunkPayload,
   type ChunkSource,
@@ -9,7 +9,7 @@ import {
   TileLayer,
   type TileOrientation,
   TileProjection,
-} from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/tilemap';
 import { describe, expect, it, vi } from 'vitest';
 
 import { TileColliderStreamer } from '../src/TileColliderStreamer';
diff --git a/packages/exojs-tilemap-physics/tsconfig.build.json b/packages/exojs-tilemap-physics/tsconfig.build.json
deleted file mode 100644
index 2074114c7..000000000
--- a/packages/exojs-tilemap-physics/tsconfig.build.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "customConditions": [],
-    "paths": {
-      "@codexo/exojs": ["../../dist/esm/index.d.ts"],
-      "@codexo/exojs/extensions": ["../../dist/esm/extensions/index.d.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../dist/esm/renderer-sdk.d.ts"],
-      "@codexo/exojs/debug": ["../../dist/esm/debug/index.d.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/dist/esm/index.d.ts"],
-      "@codexo/exojs-physics": ["../exojs-physics/dist/esm/index.d.ts"]
-    }
-  }
-}
diff --git a/packages/exojs-tilemap-physics/tsconfig.json b/packages/exojs-tilemap-physics/tsconfig.json
index 58a555d44..7ce6ad85f 100644
--- a/packages/exojs-tilemap-physics/tsconfig.json
+++ b/packages/exojs-tilemap-physics/tsconfig.json
@@ -1,15 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/src/index.ts"],
-      "@codexo/exojs-physics": ["../exojs-physics/src/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules", "test"]
diff --git a/packages/exojs-tilemap-physics/tsconfig.test.json b/packages/exojs-tilemap-physics/tsconfig.test.json
index df7a70660..985710c10 100644
--- a/packages/exojs-tilemap-physics/tsconfig.test.json
+++ b/packages/exojs-tilemap-physics/tsconfig.test.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Type-checks this package's own test/** - the package's main program only includes src/**. Run by the package's 'typecheck' script. The loosened flags live in the shared package-test profile. The 'paths' below are test-only: the end-to-end tests feed the bridge real Tiled and LDtk adapter output, and those two packages publish 'exports' pointing at dist/**, which a fresh checkout has not built. They are therefore mapped to source like the other workspace packages. TypeScript replaces an inherited 'paths' object wholesale rather than merging it, so the entries from tsconfig.json are repeated here; test/formatAgnostic.test.ts asserts that the production config never gains an adapter mapping.",
+  "_comment": "Type-checks this package's own test/** - the package's main program only includes src/**. Run by the package's 'typecheck' script. The loosened flags live in the shared package-test profile. The two adapter 'paths' below are test-only: the end-to-end tests feed the bridge real Tiled and LDtk adapter output, and those two packages publish 'exports' pointing at dist/**, which a fresh checkout has not built. TypeScript replaces an inherited 'paths' object wholesale rather than merging it, so the shared workspace entries are repeated here; test/formatAgnostic.test.ts asserts that the production config never gains an adapter mapping.",
   "extends": ["./tsconfig.json", "@codexo/exojs-config/typescript/package-test.json"],
   "compilerOptions": {
     "paths": {
@@ -8,8 +8,8 @@
       "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
       "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
       "@codexo/exojs/debug": ["../../src/debug/index.ts"],
-      "@codexo/exojs-tilemap": ["../exojs-tilemap/src/index.ts"],
-      "@codexo/exojs-physics": ["../exojs-physics/src/index.ts"],
+      "@codexo/exojs/tilemap": ["../exojs-tilemap/src/index.ts"],
+      "@codexo/exojs/physics": ["../exojs-physics/src/index.ts"],
       "@codexo/exojs-tiled": ["../exojs-tiled/src/index.ts"],
       "@codexo/exojs-ldtk": ["../exojs-ldtk/src/index.ts"]
     }
diff --git a/packages/exojs-tilemap/README.md b/packages/exojs-tilemap/README.md
index d8d66d38b..6dcf24295 100644
--- a/packages/exojs-tilemap/README.md
+++ b/packages/exojs-tilemap/README.md
@@ -43,7 +43,7 @@ npm install @codexo/exojs @codexo/exojs-tilemap
 
 ```ts
 import { Application, Scene, type Texture, TextureRegion } from '@codexo/exojs';
-import { TileLayer, TileMap, TileMapNode, TileSet, tilemapExtension, TILE_TRANSFORM_IDENTITY } from '@codexo/exojs-tilemap';
+import { TileLayer, TileMap, TileMapNode, TileSet, tilemapExtension, TILE_TRANSFORM_IDENTITY } from '@codexo/exojs/tilemap';
 
 class WorldScene extends Scene {
   private atlas: Texture | null = null;
diff --git a/packages/exojs-tilemap/package.json b/packages/exojs-tilemap/package.json
index 61fdb5a55..6e6d8d615 100644
--- a/packages/exojs-tilemap/package.json
+++ b/packages/exojs-tilemap/package.json
@@ -1,46 +1,18 @@
 {
-  "name": "@codexo/exojs-tilemap",
-  "version": "0.19.1",
-  "description": "Generic, format-independent tilemap runtime for ExoJS.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Exoridus/ExoJS.git",
-    "directory": "packages/exojs-tilemap"
-  },
+  "name": "@codexo/exojs-module-tilemap",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Generic, format-independent tilemap runtime for ExoJS. Source of the @codexo/exojs/tilemap subpath; built into and shipped with the Core package, never published on its own.",
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/esm/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist/esm/",
-    "README.md",
-    "LICENSE"
-  ],
   "scripts": {
-    "build": "tsx ../../scripts/build-extension.ts",
-    "build:dev": "tsx ../../scripts/build-extension.ts --dev",
     "typecheck": "exo-tsc --noEmit && exo-tsc --noEmit -p tsconfig.test.json",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "test": "vitest run --root ../.. --project=exojs-tilemap"
   },
-  "peerDependencies": {
-    "@codexo/exojs": "0.19.x"
-  },
   "devDependencies": {
     "@codexo/exojs": "workspace:*",
     "@codexo/exojs-config": "workspace:*"
   },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }
diff --git a/packages/exojs-tilemap/rolldown.config.ts b/packages/exojs-tilemap/rolldown.config.ts
index d33410a76..26f38f272 100644
--- a/packages/exojs-tilemap/rolldown.config.ts
+++ b/packages/exojs-tilemap/rolldown.config.ts
@@ -1,6 +1,6 @@
-import { createExtensionBuildOptions } from '@codexo/exojs-config/rolldown';
+import { defineRuntimeModule } from '@codexo/exojs-config/rolldown';
 
-export default createExtensionBuildOptions({
+export default defineRuntimeModule({
   root: import.meta.dirname,
   sourceCondition: null,
 });
diff --git a/packages/exojs-tilemap/test/object-schema-types.test.ts b/packages/exojs-tilemap/test/object-schema-types.test.ts
index 4918e1a14..1797fdabf 100644
--- a/packages/exojs-tilemap/test/object-schema-types.test.ts
+++ b/packages/exojs-tilemap/test/object-schema-types.test.ts
@@ -13,8 +13,8 @@
  * (un-schematised) form preserves the original untyped behaviour.
  */
 
-import type { PolygonObject, TileMapObject, TileProperties } from '@codexo/exojs-tilemap';
-import { ObjectKind, ObjectLayer, TileMap } from '@codexo/exojs-tilemap';
+import type { PolygonObject, TileMapObject, TileProperties } from '@codexo/exojs/tilemap';
+import { ObjectKind, ObjectLayer, TileMap } from '@codexo/exojs/tilemap';
 import { describe, expectTypeOf, it } from 'vitest';
 
 const EntityType = { Spawn: 'spawn', Trigger: 'trigger', Pickup: 'pickup' } as const;
@@ -40,7 +40,7 @@ describe('ObjectKind value object', () => {
   });
 
   it('TileMapObjectKind remains a structural alias of ObjectKind', () => {
-    expectTypeOf<import('@codexo/exojs-tilemap').TileMapObjectKind>().toEqualTypeOf<ObjectKind>();
+    expectTypeOf<import('@codexo/exojs/tilemap').TileMapObjectKind>().toEqualTypeOf<ObjectKind>();
   });
 });
 
diff --git a/packages/exojs-tilemap/test/pixel-snap-types.test.ts b/packages/exojs-tilemap/test/pixel-snap-types.test.ts
index a1f2441c1..78443278f 100644
--- a/packages/exojs-tilemap/test/pixel-snap-types.test.ts
+++ b/packages/exojs-tilemap/test/pixel-snap-types.test.ts
@@ -9,7 +9,7 @@
  */
 
 import { type Drawable, type NineSliceSprite, PixelSnapMode, type Sprite } from '@codexo/exojs';
-import type { TileLayerNode, TileMapNode, TileMapView } from '@codexo/exojs-tilemap';
+import type { TileLayerNode, TileMapNode, TileMapView } from '@codexo/exojs/tilemap';
 import { describe, expectTypeOf, it } from 'vitest';
 
 describe('PixelSnapMode type contracts', () => {
diff --git a/packages/exojs-tilemap/tsconfig.build.json b/packages/exojs-tilemap/tsconfig.build.json
deleted file mode 100644
index 3d479c36c..000000000
--- a/packages/exojs-tilemap/tsconfig.build.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "_comment": "Declaration emit for the Rolldown build (`rolldown.config.ts`), which has no declaration emitter. `paths` resolves the public `@codexo/exojs*` specifiers this package's source imports against Core's built declarations (not source, unlike tsconfig.json's own paths, which back the regular source-mode typecheck).",
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "customConditions": [],
-    "paths": {
-      "@codexo/exojs": ["../../dist/esm/index.d.ts"],
-      "@codexo/exojs/extensions": ["../../dist/esm/extensions/index.d.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../dist/esm/renderer-sdk.d.ts"],
-      "@codexo/exojs/debug": ["../../dist/esm/debug/index.d.ts"]
-    }
-  }
-}
diff --git a/packages/exojs-tilemap/tsconfig.json b/packages/exojs-tilemap/tsconfig.json
index bf71f3c8b..8dbbc045b 100644
--- a/packages/exojs-tilemap/tsconfig.json
+++ b/packages/exojs-tilemap/tsconfig.json
@@ -1,17 +1,7 @@
 {
-  "extends": "@codexo/exojs-config/typescript/extension.json",
+  "extends": ["@codexo/exojs-config/typescript/extension.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "customConditions": ["@codexo/exojs-source"],
-    "paths": {
-      "@codexo/exojs": ["../../src/index.ts"],
-      "@codexo/exojs/extensions": ["../../src/extensions/index.ts"],
-      "@codexo/exojs/renderer-sdk": ["../../src/renderer-sdk.ts"],
-      "@codexo/exojs/debug": ["../../src/debug/index.ts"],
-      // The type-contract tests import this package through its PUBLIC
-      // specifier, so the contracts cover what consumers see. Without this
-      // mapping that resolves to `dist/`, which only exists after a build.
-      "@codexo/exojs-tilemap": ["./src/index.ts"]
-    }
+    "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "src/typings.d.ts", "../../src/typings.d.ts"],
   "exclude": ["dist", "node_modules"]
diff --git a/packages/legacy/exojs-audio-fx/LICENSE b/packages/legacy/exojs-audio-fx/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/legacy/exojs-audio-fx/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/legacy/exojs-audio-fx/README.md b/packages/legacy/exojs-audio-fx/README.md
new file mode 100644
index 000000000..64c1c02e3
--- /dev/null
+++ b/packages/legacy/exojs-audio-fx/README.md
@@ -0,0 +1,13 @@
+# @codexo/exojs-audio-fx
+
+Since ExoJS v0.20, import from @codexo/exojs/audio-fx. This package is a compatibility shim for the 0.20 line; no independent feature development.
+
+Every export of this package is the very binding its Core entry exports, so code that still imports `@codexo/exojs-audio-fx` shares one engine instance with code that already imports `@codexo/exojs/audio-fx`. The package contains no implementation of its own and depends on nothing but its `@codexo/exojs` peer.
+
+| Import | Replace with | Forwards |
+| --- | --- | --- |
+| `@codexo/exojs-audio-fx` | `@codexo/exojs/audio-fx` | everything |
+
+## Migrating
+
+Change each import to the Core entry in the table, then remove this package with `npm uninstall @codexo/exojs-audio-fx`. `@codexo/exojs` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.
diff --git a/packages/legacy/exojs-audio-fx/index.d.ts b/packages/legacy/exojs-audio-fx/index.d.ts
new file mode 100644
index 000000000..bea22e8f5
--- /dev/null
+++ b/packages/legacy/exojs-audio-fx/index.d.ts
@@ -0,0 +1 @@
+export * from '@codexo/exojs/audio-fx';
diff --git a/packages/legacy/exojs-audio-fx/index.js b/packages/legacy/exojs-audio-fx/index.js
new file mode 100644
index 000000000..bea22e8f5
--- /dev/null
+++ b/packages/legacy/exojs-audio-fx/index.js
@@ -0,0 +1 @@
+export * from '@codexo/exojs/audio-fx';
diff --git a/packages/legacy/exojs-audio-fx/package.json b/packages/legacy/exojs-audio-fx/package.json
new file mode 100644
index 000000000..29c6613d1
--- /dev/null
+++ b/packages/legacy/exojs-audio-fx/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@codexo/exojs-audio-fx",
+  "version": "0.19.1",
+  "description": "Compatibility shim that forwards to @codexo/exojs/audio-fx. Since ExoJS v0.20, import from @codexo/exojs/audio-fx.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/legacy/exojs-audio-fx"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@codexo/exojs": "0.19.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/legacy/exojs-lighting/LICENSE b/packages/legacy/exojs-lighting/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/legacy/exojs-lighting/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/legacy/exojs-lighting/README.md b/packages/legacy/exojs-lighting/README.md
new file mode 100644
index 000000000..47401b025
--- /dev/null
+++ b/packages/legacy/exojs-lighting/README.md
@@ -0,0 +1,13 @@
+# @codexo/exojs-lighting
+
+Since ExoJS v0.20, import from @codexo/exojs/lighting. This package is a compatibility shim for the 0.20 line; no independent feature development.
+
+Every export of this package is the very binding its Core entry exports, so code that still imports `@codexo/exojs-lighting` shares one engine instance with code that already imports `@codexo/exojs/lighting`. The package contains no implementation of its own and depends on nothing but its `@codexo/exojs` peer.
+
+| Import | Replace with | Forwards |
+| --- | --- | --- |
+| `@codexo/exojs-lighting` | `@codexo/exojs/lighting` | everything |
+
+## Migrating
+
+Change each import to the Core entry in the table, then remove this package with `npm uninstall @codexo/exojs-lighting`. `@codexo/exojs` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.
diff --git a/packages/legacy/exojs-lighting/index.d.ts b/packages/legacy/exojs-lighting/index.d.ts
new file mode 100644
index 000000000..5f38be37b
--- /dev/null
+++ b/packages/legacy/exojs-lighting/index.d.ts
@@ -0,0 +1 @@
+export * from '@codexo/exojs/lighting';
diff --git a/packages/legacy/exojs-lighting/index.js b/packages/legacy/exojs-lighting/index.js
new file mode 100644
index 000000000..5f38be37b
--- /dev/null
+++ b/packages/legacy/exojs-lighting/index.js
@@ -0,0 +1 @@
+export * from '@codexo/exojs/lighting';
diff --git a/packages/legacy/exojs-lighting/package.json b/packages/legacy/exojs-lighting/package.json
new file mode 100644
index 000000000..da6616a56
--- /dev/null
+++ b/packages/legacy/exojs-lighting/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@codexo/exojs-lighting",
+  "version": "0.19.1",
+  "description": "Compatibility shim that forwards to @codexo/exojs/lighting. Since ExoJS v0.20, import from @codexo/exojs/lighting.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/legacy/exojs-lighting"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@codexo/exojs": "0.19.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/legacy/exojs-particles/LICENSE b/packages/legacy/exojs-particles/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/legacy/exojs-particles/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/legacy/exojs-particles/README.md b/packages/legacy/exojs-particles/README.md
new file mode 100644
index 000000000..6f6493f7f
--- /dev/null
+++ b/packages/legacy/exojs-particles/README.md
@@ -0,0 +1,13 @@
+# @codexo/exojs-particles
+
+Since ExoJS v0.20, import from @codexo/exojs/particles. This package is a compatibility shim for the 0.20 line; no independent feature development.
+
+Every export of this package is the very binding its Core entry exports, so code that still imports `@codexo/exojs-particles` shares one engine instance with code that already imports `@codexo/exojs/particles`. The package contains no implementation of its own and depends on nothing but its `@codexo/exojs` peer.
+
+| Import | Replace with | Forwards |
+| --- | --- | --- |
+| `@codexo/exojs-particles` | `@codexo/exojs/particles` | everything |
+
+## Migrating
+
+Change each import to the Core entry in the table, then remove this package with `npm uninstall @codexo/exojs-particles`. `@codexo/exojs` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.
diff --git a/packages/legacy/exojs-particles/index.d.ts b/packages/legacy/exojs-particles/index.d.ts
new file mode 100644
index 000000000..8821bd2ca
--- /dev/null
+++ b/packages/legacy/exojs-particles/index.d.ts
@@ -0,0 +1 @@
+export * from '@codexo/exojs/particles';
diff --git a/packages/legacy/exojs-particles/index.js b/packages/legacy/exojs-particles/index.js
new file mode 100644
index 000000000..8821bd2ca
--- /dev/null
+++ b/packages/legacy/exojs-particles/index.js
@@ -0,0 +1 @@
+export * from '@codexo/exojs/particles';
diff --git a/packages/legacy/exojs-particles/package.json b/packages/legacy/exojs-particles/package.json
new file mode 100644
index 000000000..62966eade
--- /dev/null
+++ b/packages/legacy/exojs-particles/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@codexo/exojs-particles",
+  "version": "0.19.1",
+  "description": "Compatibility shim that forwards to @codexo/exojs/particles. Since ExoJS v0.20, import from @codexo/exojs/particles.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/legacy/exojs-particles"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@codexo/exojs": "0.19.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/legacy/exojs-pathfinding/LICENSE b/packages/legacy/exojs-pathfinding/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/legacy/exojs-pathfinding/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/legacy/exojs-pathfinding/README.md b/packages/legacy/exojs-pathfinding/README.md
new file mode 100644
index 000000000..32f87f0a6
--- /dev/null
+++ b/packages/legacy/exojs-pathfinding/README.md
@@ -0,0 +1,13 @@
+# @codexo/exojs-pathfinding
+
+Since ExoJS v0.20, import from @codexo/exojs/pathfinding. This package is a compatibility shim for the 0.20 line; no independent feature development.
+
+Every export of this package is the very binding its Core entry exports, so code that still imports `@codexo/exojs-pathfinding` shares one engine instance with code that already imports `@codexo/exojs/pathfinding`. The package contains no implementation of its own and depends on nothing but its `@codexo/exojs` peer.
+
+| Import | Replace with | Forwards |
+| --- | --- | --- |
+| `@codexo/exojs-pathfinding` | `@codexo/exojs/pathfinding` | everything |
+
+## Migrating
+
+Change each import to the Core entry in the table, then remove this package with `npm uninstall @codexo/exojs-pathfinding`. `@codexo/exojs` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.
diff --git a/packages/legacy/exojs-pathfinding/index.d.ts b/packages/legacy/exojs-pathfinding/index.d.ts
new file mode 100644
index 000000000..b4d6ec183
--- /dev/null
+++ b/packages/legacy/exojs-pathfinding/index.d.ts
@@ -0,0 +1 @@
+export * from '@codexo/exojs/pathfinding';
diff --git a/packages/legacy/exojs-pathfinding/index.js b/packages/legacy/exojs-pathfinding/index.js
new file mode 100644
index 000000000..b4d6ec183
--- /dev/null
+++ b/packages/legacy/exojs-pathfinding/index.js
@@ -0,0 +1 @@
+export * from '@codexo/exojs/pathfinding';
diff --git a/packages/legacy/exojs-pathfinding/package.json b/packages/legacy/exojs-pathfinding/package.json
new file mode 100644
index 000000000..2e4f21fc7
--- /dev/null
+++ b/packages/legacy/exojs-pathfinding/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@codexo/exojs-pathfinding",
+  "version": "0.19.1",
+  "description": "Compatibility shim that forwards to @codexo/exojs/pathfinding. Since ExoJS v0.20, import from @codexo/exojs/pathfinding.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/legacy/exojs-pathfinding"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@codexo/exojs": "0.19.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/legacy/exojs-physics/LICENSE b/packages/legacy/exojs-physics/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/legacy/exojs-physics/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/legacy/exojs-physics/README.md b/packages/legacy/exojs-physics/README.md
new file mode 100644
index 000000000..065fa85ce
--- /dev/null
+++ b/packages/legacy/exojs-physics/README.md
@@ -0,0 +1,14 @@
+# @codexo/exojs-physics
+
+Since ExoJS v0.20, import from @codexo/exojs/physics. This package is a compatibility shim for the 0.20 line; no independent feature development.
+
+Every export of this package is the very binding its Core entry exports, so code that still imports `@codexo/exojs-physics` shares one engine instance with code that already imports `@codexo/exojs/physics`. The package contains no implementation of its own and depends on nothing but its `@codexo/exojs` peer.
+
+| Import | Replace with | Forwards |
+| --- | --- | --- |
+| `@codexo/exojs-physics` | `@codexo/exojs/physics` | everything |
+| `@codexo/exojs-physics/debug` | `@codexo/exojs/debug` | `PhysicsDebugDraw`, `PhysicsDebugDrawOptions` |
+
+## Migrating
+
+Change each import to the Core entry in the table, then remove this package with `npm uninstall @codexo/exojs-physics`. `@codexo/exojs` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.
diff --git a/packages/legacy/exojs-physics/debug.d.ts b/packages/legacy/exojs-physics/debug.d.ts
new file mode 100644
index 000000000..38d82b1b2
--- /dev/null
+++ b/packages/legacy/exojs-physics/debug.d.ts
@@ -0,0 +1 @@
+export { PhysicsDebugDraw, type PhysicsDebugDrawOptions } from '@codexo/exojs/debug';
diff --git a/packages/legacy/exojs-physics/debug.js b/packages/legacy/exojs-physics/debug.js
new file mode 100644
index 000000000..ec2a3d0f1
--- /dev/null
+++ b/packages/legacy/exojs-physics/debug.js
@@ -0,0 +1 @@
+export { PhysicsDebugDraw } from '@codexo/exojs/debug';
diff --git a/packages/legacy/exojs-physics/index.d.ts b/packages/legacy/exojs-physics/index.d.ts
new file mode 100644
index 000000000..dbc0ccb7f
--- /dev/null
+++ b/packages/legacy/exojs-physics/index.d.ts
@@ -0,0 +1 @@
+export * from '@codexo/exojs/physics';
diff --git a/packages/legacy/exojs-physics/index.js b/packages/legacy/exojs-physics/index.js
new file mode 100644
index 000000000..dbc0ccb7f
--- /dev/null
+++ b/packages/legacy/exojs-physics/index.js
@@ -0,0 +1 @@
+export * from '@codexo/exojs/physics';
diff --git a/packages/legacy/exojs-physics/package.json b/packages/legacy/exojs-physics/package.json
new file mode 100644
index 000000000..1f6ec5abd
--- /dev/null
+++ b/packages/legacy/exojs-physics/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@codexo/exojs-physics",
+  "version": "0.19.1",
+  "description": "Compatibility shim that forwards to @codexo/exojs/physics. Since ExoJS v0.20, import from @codexo/exojs/physics.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/legacy/exojs-physics"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./debug": {
+      "types": "./debug.d.ts",
+      "import": "./debug.js",
+      "default": "./debug.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "debug.js",
+    "debug.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@codexo/exojs": "0.19.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/legacy/exojs-tilemap-physics/LICENSE b/packages/legacy/exojs-tilemap-physics/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/legacy/exojs-tilemap-physics/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/legacy/exojs-tilemap-physics/README.md b/packages/legacy/exojs-tilemap-physics/README.md
new file mode 100644
index 000000000..af6497694
--- /dev/null
+++ b/packages/legacy/exojs-tilemap-physics/README.md
@@ -0,0 +1,13 @@
+# @codexo/exojs-tilemap-physics
+
+Since ExoJS v0.20, import from @codexo/exojs/tilemap-physics. This package is a compatibility shim for the 0.20 line; no independent feature development.
+
+Every export of this package is the very binding its Core entry exports, so code that still imports `@codexo/exojs-tilemap-physics` shares one engine instance with code that already imports `@codexo/exojs/tilemap-physics`. The package contains no implementation of its own and depends on nothing but its `@codexo/exojs` peer.
+
+| Import | Replace with | Forwards |
+| --- | --- | --- |
+| `@codexo/exojs-tilemap-physics` | `@codexo/exojs/tilemap-physics` | everything |
+
+## Migrating
+
+Change each import to the Core entry in the table, then remove this package with `npm uninstall @codexo/exojs-tilemap-physics`. `@codexo/exojs` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.
diff --git a/packages/legacy/exojs-tilemap-physics/index.d.ts b/packages/legacy/exojs-tilemap-physics/index.d.ts
new file mode 100644
index 000000000..f24ac6647
--- /dev/null
+++ b/packages/legacy/exojs-tilemap-physics/index.d.ts
@@ -0,0 +1 @@
+export * from '@codexo/exojs/tilemap-physics';
diff --git a/packages/legacy/exojs-tilemap-physics/index.js b/packages/legacy/exojs-tilemap-physics/index.js
new file mode 100644
index 000000000..f24ac6647
--- /dev/null
+++ b/packages/legacy/exojs-tilemap-physics/index.js
@@ -0,0 +1 @@
+export * from '@codexo/exojs/tilemap-physics';
diff --git a/packages/legacy/exojs-tilemap-physics/package.json b/packages/legacy/exojs-tilemap-physics/package.json
new file mode 100644
index 000000000..84e5a4a79
--- /dev/null
+++ b/packages/legacy/exojs-tilemap-physics/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@codexo/exojs-tilemap-physics",
+  "version": "0.19.1",
+  "description": "Compatibility shim that forwards to @codexo/exojs/tilemap-physics. Since ExoJS v0.20, import from @codexo/exojs/tilemap-physics.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/legacy/exojs-tilemap-physics"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@codexo/exojs": "0.19.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/legacy/exojs-tilemap/LICENSE b/packages/legacy/exojs-tilemap/LICENSE
new file mode 100644
index 000000000..dfb7cd04a
--- /dev/null
+++ b/packages/legacy/exojs-tilemap/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codexo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/legacy/exojs-tilemap/README.md b/packages/legacy/exojs-tilemap/README.md
new file mode 100644
index 000000000..caa29b6f2
--- /dev/null
+++ b/packages/legacy/exojs-tilemap/README.md
@@ -0,0 +1,13 @@
+# @codexo/exojs-tilemap
+
+Since ExoJS v0.20, import from @codexo/exojs/tilemap. This package is a compatibility shim for the 0.20 line; no independent feature development.
+
+Every export of this package is the very binding its Core entry exports, so code that still imports `@codexo/exojs-tilemap` shares one engine instance with code that already imports `@codexo/exojs/tilemap`. The package contains no implementation of its own and depends on nothing but its `@codexo/exojs` peer.
+
+| Import | Replace with | Forwards |
+| --- | --- | --- |
+| `@codexo/exojs-tilemap` | `@codexo/exojs/tilemap` | everything |
+
+## Migrating
+
+Change each import to the Core entry in the table, then remove this package with `npm uninstall @codexo/exojs-tilemap`. `@codexo/exojs` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.
diff --git a/packages/legacy/exojs-tilemap/index.d.ts b/packages/legacy/exojs-tilemap/index.d.ts
new file mode 100644
index 000000000..aa426e68d
--- /dev/null
+++ b/packages/legacy/exojs-tilemap/index.d.ts
@@ -0,0 +1 @@
+export * from '@codexo/exojs/tilemap';
diff --git a/packages/legacy/exojs-tilemap/index.js b/packages/legacy/exojs-tilemap/index.js
new file mode 100644
index 000000000..aa426e68d
--- /dev/null
+++ b/packages/legacy/exojs-tilemap/index.js
@@ -0,0 +1 @@
+export * from '@codexo/exojs/tilemap';
diff --git a/packages/legacy/exojs-tilemap/package.json b/packages/legacy/exojs-tilemap/package.json
new file mode 100644
index 000000000..1e3eee081
--- /dev/null
+++ b/packages/legacy/exojs-tilemap/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@codexo/exojs-tilemap",
+  "version": "0.19.1",
+  "description": "Compatibility shim that forwards to @codexo/exojs/tilemap. Since ExoJS v0.20, import from @codexo/exojs/tilemap.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Exoridus/ExoJS.git",
+    "directory": "packages/legacy/exojs-tilemap"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@codexo/exojs": "0.19.x"
+  },
+  "devDependencies": {
+    "@codexo/exojs": "workspace:*"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc282863b..8ce2fdc5d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,18 +191,6 @@ importers:
       '@codexo/exojs-config':
         specifier: workspace:*
         version: link:../exojs-config
-      '@codexo/exojs-lighting':
-        specifier: workspace:*
-        version: link:../exojs-lighting
-      '@codexo/exojs-particles':
-        specifier: workspace:*
-        version: link:../exojs-particles
-      '@codexo/exojs-physics':
-        specifier: workspace:*
-        version: link:../exojs-physics
-      '@codexo/exojs-tilemap':
-        specifier: workspace:*
-        version: link:../exojs-tilemap
       '@types/node':
         specifier: ^26.6.2
         version: 26.6.2
@@ -305,7 +293,7 @@ importers:
         specifier: ~8.70.1
         version: 8.70.1(eslint@10.11.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@6.0.3)
 
-  packages/exojs-ldtk:
+  packages/exojs-demo-assets:
     devDependencies:
       '@codexo/exojs':
         specifier: workspace:*
@@ -313,9 +301,15 @@ importers:
       '@codexo/exojs-config':
         specifier: workspace:*
         version: link:../exojs-config
-      '@codexo/exojs-tilemap':
+
+  packages/exojs-ldtk:
+    devDependencies:
+      '@codexo/exojs':
+        specifier: workspace:*
+        version: link:../..
+      '@codexo/exojs-config':
         specifier: workspace:*
-        version: link:../exojs-tilemap
+        version: link:../exojs-config
 
   packages/exojs-lighting:
     devDependencies:
@@ -343,12 +337,6 @@ importers:
       '@codexo/exojs-config':
         specifier: workspace:*
         version: link:../exojs-config
-      '@codexo/exojs-physics':
-        specifier: workspace:*
-        version: link:../exojs-physics
-      '@codexo/exojs-tilemap':
-        specifier: workspace:*
-        version: link:../exojs-tilemap
 
   packages/exojs-physics:
     devDependencies:
@@ -398,9 +386,6 @@ importers:
       '@codexo/exojs-config':
         specifier: workspace:*
         version: link:../exojs-config
-      '@codexo/exojs-tilemap':
-        specifier: workspace:*
-        version: link:../exojs-tilemap
 
   packages/exojs-tilemap:
     devDependencies:
@@ -422,15 +407,51 @@ importers:
       '@codexo/exojs-ldtk':
         specifier: workspace:*
         version: link:../exojs-ldtk
-      '@codexo/exojs-physics':
-        specifier: workspace:*
-        version: link:../exojs-physics
       '@codexo/exojs-tiled':
         specifier: workspace:*
         version: link:../exojs-tiled
-      '@codexo/exojs-tilemap':
+
+  packages/legacy/exojs-audio-fx:
+    devDependencies:
+      '@codexo/exojs':
+        specifier: workspace:*
+        version: link:../../..
+
+  packages/legacy/exojs-lighting:
+    devDependencies:
+      '@codexo/exojs':
+        specifier: workspace:*
+        version: link:../../..
+
+  packages/legacy/exojs-particles:
+    devDependencies:
+      '@codexo/exojs':
+        specifier: workspace:*
+        version: link:../../..
+
+  packages/legacy/exojs-pathfinding:
+    devDependencies:
+      '@codexo/exojs':
+        specifier: workspace:*
+        version: link:../../..
+
+  packages/legacy/exojs-physics:
+    devDependencies:
+      '@codexo/exojs':
+        specifier: workspace:*
+        version: link:../../..
+
+  packages/legacy/exojs-tilemap:
+    devDependencies:
+      '@codexo/exojs':
+        specifier: workspace:*
+        version: link:../../..
+
+  packages/legacy/exojs-tilemap-physics:
+    devDependencies:
+      '@codexo/exojs':
         specifier: workspace:*
-        version: link:../exojs-tilemap
+        version: link:../../..
 
   site:
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 5efaa464a..7842f44a3 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -17,6 +17,10 @@ packages:
   - packages/exojs-cli
   - packages/create-exo-app
   - packages/eslint-plugin-exojs
+  - packages/exojs-demo-assets
+  # Generated forwarders for the retired runtime package names; see
+  # scripts/release/legacy-shims.ts.
+  - packages/legacy/*
 
 # Packages permitted to run install/build scripts. pnpm v10+ blocks build
 # scripts by default and prompts for approval; this is the explicit allowlist.
diff --git a/scripts/build.ts b/scripts/build.ts
index f326a9f41..ae2153024 100644
--- a/scripts/build.ts
+++ b/scripts/build.ts
@@ -1,37 +1,49 @@
 /**
- * Builds the core package: `exo.esm.js`, `exo.debug.esm.js`, the preserveModules
- * `dist/esm` tree (with declarations), `exo.iife.js`, and (production only)
- * `exo.iife.min.js`, `exo.full.iife.js` and `exo.full.iife.min.js`.
+ * Builds the core package: `exo.esm.js`, `exo.debug.esm.js`, and the
+ * preserveModules `dist/esm` tree (with declarations) including every runtime
+ * module under `dist/esm/<subpath>/`.
  *
  * Bundling runs on Rolldown; declarations are a separate `tsc
- * --emitDeclarationOnly` pass over `dist/esm`, since Rolldown has no
- * declaration emitter. `EXOJS_ENV=development` selects the dev build
- * (`pnpm build:dev`); `--watch` runs Rolldown's watch mode instead of a single
- * build (`pnpm build:watch`) and skips declarations - they are not part of the
- * inner dev loop this mode serves, and `pnpm typecheck` already covers type
- * correctness.
+ * --emitDeclarationOnly` pass, since Rolldown has no declaration emitter. Core
+ * and the runtime modules are emitted from ONE program: the `./debug` entry
+ * re-exports the physics draw layer, whose declarations in turn name Core's
+ * debug types, so neither half can be emitted against the other's output.
+ * `EXOJS_ENV=development` selects the dev build (`pnpm build:dev`); `--watch`
+ * runs Rolldown's watch mode instead of a single build (`pnpm build:watch`)
+ * and skips declarations - they are not part of the inner dev loop this mode
+ * serves, and `pnpm typecheck` already covers type correctness.
  *
- * The production build also emits the all-in-one IIFE bundle (`exo.full.iife.js`
- * and its minified twin: core + every extension package except react, whose
- * peer cannot ship in a script-tag bundle), transpiling TypeScript source
- * across multiple rootDirs (src/ and each extension package's src/) -
- * Rolldown's built-in transpiler has no single-Program rootDir constraint, so
- * this needs no separate esbuild-based path the way the previous Rollup
- * pipeline did. The dev build and watch mode skip it: it is the slowest job of
- * the set and nothing in the inner loop reads it.
+ * The v0.20 distribution is ESM-only: the four prebuilt IIFE global bundles
+ * (`exo.iife.js`/`exo.full.iife.js` and their minified twins) were removed with
+ * v0.20. A script-tag consumer uses a module script with an import map against
+ * `dist/esm` (see the migration guide).
  */
-import { cpSync, mkdirSync } from 'node:fs';
-import { dirname, relative as relativePath, resolve as resolvePath } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { cpSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative as relativePath, resolve as resolvePath } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 
 import { codecovRollupPlugin } from '@codecov/rollup-plugin';
 import { createShaderPlugin, createWorkletPlugin } from '@codexo/exojs-build';
 import { createBuildDefinesFromRepo } from '@codexo/exojs-config/build-defines';
+import { createRuntimeModuleBuildOptions, createShippedExternalsPlugin, type RuntimeModule } from '@codexo/exojs-config/rolldown';
 import { runTypeScriptCompiler } from '@codexo/exojs-config/typescript/compiler';
 import { build as buildWorker } from 'esbuild';
 import { type OutputOptions, type Plugin, type PreRenderedChunk, rolldown, type RolldownOptions, watch } from 'rolldown';
-
-import { writeSourceStamp } from './source-hash.ts';
+import ts from 'typescript';
+
+import { rewriteModuleSpecifiers } from './lib/module-specifiers.ts';
+import {
+  createShippedLayout,
+  moduleOfShipped,
+  moduleOfSource,
+  relativeSpecifier,
+  resolveCoreExport,
+  resolvePackageImportSource,
+  shippedPathForSource,
+  SOURCE_CONDITIONS,
+} from './lib/shipped-specifiers.ts';
+import { RUNTIME_MODULES } from './release/lockstep-packages.ts';
+import { coreSourceRoots, writeSourceStamp } from './source-hash.ts';
 
 const rootDir = resolvePath(dirname(fileURLToPath(import.meta.url)), '..');
 const watchMode = process.argv.includes('--watch');
@@ -40,7 +52,10 @@ const watchMode = process.argv.includes('--watch');
 // still honored as a fallback for anything that invokes this script directly
 // with the env var set (matching the previous `rollup -c` convention).
 const buildMode = process.argv.includes('--dev') || process.env.EXOJS_ENV === 'development' ? 'development' : 'production';
+// One version for the whole tarball: runtime modules ship inside Core, so their
+// `__VERSION__` is Core's, not whatever their private source manifest says.
 const defines = createBuildDefinesFromRepo({ mode: buildMode, packageDir: rootDir });
+const layout = createShippedLayout(rootDir);
 
 // Activates the package-private `@codexo/exojs-source` condition in package.json#imports
 // so `#*` resolves to ./src/*.ts at build time. preserveModules then rewrites the
@@ -48,23 +63,6 @@ const defines = createBuildDefinesFromRepo({ mode: buildMode, packageDir: rootDi
 // standard conditions keep normal dependency resolution intact.
 const sourceConditions = ['@codexo/exojs-source', 'browser', 'module', 'import', 'default'];
 
-// Full-bundle source conditions: includes per-package source conditions for
-// the extension packages that use `#` subpath imports internally (e.g.
-// exojs-particles).
-const fullSourceConditions = ['@codexo/exojs-source', '@codexo/exojs-particles-source', 'browser', 'module', 'import', 'default'];
-
-// Resolves @codexo/exojs-<name> -> packages/exojs-<name>/src/index.ts so the
-// full IIFE bundle can be built entirely from TypeScript source without
-// requiring the extension packages to be pre-built.
-const extensionSourcePlugin: Plugin = {
-  name: 'extension-source',
-  resolveId(id: string) {
-    const match = /^@codexo\/exojs-([^/]+)$/.exec(id);
-
-    return match ? resolvePath(rootDir, 'packages', `exojs-${match[1]}`, 'src', 'index.ts') : null;
-  },
-};
-
 // The preserveModules tree emits `sources` one directory level too high
 // (`../../../../src/...` escapes the repo), so consumers (e.g. Vite serving the
 // site) warn about missing source files on every module. Re-anchor every
@@ -136,25 +134,24 @@ const shared = {
   resolve: { conditionNames: sourceConditions, mainFields: ['browser', 'module', 'main'] },
 };
 
-const basisWorkerUrls = (scriptTag = false): Plugin => ({
+const basisWorkerUrls = (): Plugin => ({
   name: 'basis-worker-url',
   transform(code, id) {
     if (!/\/BasisKtx2Runtime\.(?:ts|js)$/.test(id.replaceAll('\\', '/'))) {
       return null;
     }
 
-    const result = code.replace('basis/ktx2.worker.ts', 'basis/ktx2.worker.js');
-
     return {
-      code: scriptTag
-        ? `const basisBundleUrl = typeof document === 'undefined' ? undefined : (document.currentScript?.src ?? document.baseURI);\n${result.replace('import.meta.url', 'basisBundleUrl')}`
-        : result,
+      // `import.meta.url` is correct for every v0.20 ESM consumer, including
+      // module scripts; the former script-tag variant that derived the URL
+      // from `document.currentScript` left with the IIFE bundles.
+      code: code.replace('basis/ktx2.worker.ts', 'basis/ktx2.worker.js'),
       map: {
         version: 3,
         sources: [id],
         sourcesContent: [code],
         names: [],
-        mappings: `${scriptTag ? ';' : ''}AAAA${';AACA'.repeat(code.split('\n').length - 1)}`,
+        mappings: `AAAA${';AACA'.repeat(code.split('\n').length - 1)}`,
       },
     };
   },
@@ -194,9 +191,13 @@ const bundled = (minify: boolean): RolldownOptions => ({
   output: { file: 'dist/exo.esm.js', format: 'es', sourcemap: true, minify },
 });
 
+// The single-file family (`exo.esm.js` + `exo.debug.esm.js`) carries Core only;
+// the runtime modules ship in the `dist/esm` tree alone. The debug bundle is
+// therefore built from the Core debug layers, without the physics draw layer the
+// `./debug` entry adds.
 const debugBundled = (minify: boolean): RolldownOptions => ({
   ...shared,
-  input: 'src/debug/index.ts',
+  input: 'src/debug/core.ts',
   // All `#` imports are core dependencies - mark them external so the debug
   // bundle contains only debug code and imports from @codexo/exojs at
   // runtime. (Intra-debug imports are same-directory `./` and stay bundled.)
@@ -212,6 +213,26 @@ const debugBundled = (minify: boolean): RolldownOptions => ({
   },
 });
 
+// A Core source that reaches into a runtime module (the `./debug` entry's
+// physics re-export) must not pull the module's sources into the Core tree: the
+// module is built separately into its own subtree, and a second copy here would
+// be a second instance. The import is emitted as a relative path to the file
+// the module build writes.
+const runtimeModuleBoundary = createShippedExternalsPlugin({
+  sourceRoot: layout.coreSourceRoot,
+  outDir: layout.distEsm,
+  resolveExternal: (source, importer) => {
+    if (!source.startsWith('#') || importer === undefined || moduleOfSource(layout, importer) !== undefined) {
+      return;
+    }
+
+    const target = resolvePackageImportSource(rootDir, source);
+    const shipped = target === undefined || moduleOfSource(layout, target) === undefined ? undefined : shippedPathForSource(layout, target);
+
+    return shipped === undefined ? undefined : `${shipped}.js`;
+  },
+});
+
 const modules = (): RolldownOptions => ({
   ...shared,
   // `src/extensions/index.ts` is deliberately absent: it exports nothing but
@@ -220,7 +241,7 @@ const modules = (): RolldownOptions => ({
   // `./extensions` subpath resolves to.
   input: ['src/index.ts', 'src/debug/index.ts', 'src/renderer-sdk.ts'],
   resolve: { conditionNames: sourceConditions, mainFields: ['module', 'browser', 'main'] },
-  plugins: [basisWorkerUrls(), ...shaderAndWorkletPlugins(false), ...codecovBundlePlugin('exo-esm-modules')],
+  plugins: [runtimeModuleBoundary, basisWorkerUrls(), ...shaderAndWorkletPlugins(false), ...codecovBundlePlugin('exo-esm-modules')],
   output: {
     dir: 'dist/esm',
     format: 'es',
@@ -240,26 +261,59 @@ const modules = (): RolldownOptions => ({
   },
 });
 
-const iife = (minify: boolean): RolldownOptions => ({
-  ...shared,
-  input: 'src/index.ts',
-  plugins: [basisWorkerUrls(true), ...shaderAndWorkletPlugins(minify), ...codecovBundlePlugin(minify ? 'exo-iife-min' : 'exo-iife')],
-  output: { file: minify ? 'dist/exo.iife.min.js' : 'dist/exo.iife.js', format: 'iife', name: 'Exo', sourcemap: true, minify },
-});
+// Everything a runtime module imports from outside itself is a Core specifier:
+// Core, a Core subpath, or a sibling module. Each is emitted as a relative path
+// to the file the Core manifest exports for it, so the module joins the one
+// Core instance instead of naming a package. Anything else under `@codexo/` -
+// a retired package name in particular - fails the build: resolving it through
+// `node_modules` would bundle a second copy.
+const resolveRuntimeModuleExternal = (specifier: string, importer: string | undefined): string | undefined => {
+  if (!specifier.startsWith('@codexo/')) {
+    return undefined;
+  }
 
-const fullBundle = (minify: boolean): RolldownOptions => ({
-  cwd: rootDir,
-  input: 'scripts/exo-full.entry.ts',
-  transform: { define: defines },
-  resolve: { conditionNames: fullSourceConditions, mainFields: ['browser', 'module', 'main'] },
-  plugins: [
-    extensionSourcePlugin,
-    basisWorkerUrls(true),
-    ...shaderAndWorkletPlugins(minify),
-    ...codecovBundlePlugin(minify ? 'exo-full-iife-min' : 'exo-full-iife'),
-  ],
-  output: { file: minify ? 'dist/exo.full.iife.min.js' : 'dist/exo.full.iife.js', format: 'iife', name: 'Exo', sourcemap: true, minify },
-});
+  const target = resolveCoreExport(layout, specifier, 'js');
+
+  if (target === undefined) {
+    throw new Error(
+      `${importer ?? 'a runtime module'} imports "${specifier}"; runtime modules may only import @codexo/exojs and its subpaths.`,
+    );
+  }
+
+  return target;
+};
+
+const assertNoSubpathCollision = (): void => {
+  const coreDirectories = new Set(
+    readdirSync(layout.coreSourceRoot, { withFileTypes: true })
+      .filter(entry => entry.isDirectory())
+      .map(entry => entry.name),
+  );
+
+  for (const module of RUNTIME_MODULES) {
+    if (coreDirectories.has(module.subpath)) {
+      throw new Error(`Runtime module subpath "${module.subpath}" collides with the Core source directory src/${module.subpath}.`);
+    }
+  }
+};
+
+const runtimeModuleJobs = async (): Promise<RolldownOptions[]> => {
+  assertNoSubpathCollision();
+
+  return Promise.all(
+    RUNTIME_MODULES.map(async module => {
+      const config = resolvePath(rootDir, module.dir, 'rolldown.config.ts');
+      const { default: descriptor } = (await import(pathToFileURL(config).href)) as { default: Readonly<RuntimeModule> };
+
+      return createRuntimeModuleBuildOptions(descriptor, {
+        outDir: resolvePath(rootDir, 'dist', 'esm', module.subpath),
+        defines,
+        bundleName: `exo-esm-${module.subpath}`,
+        resolveExternal: resolveRuntimeModuleExternal,
+      });
+    }),
+  );
+};
 
 const runJob = async (options: RolldownOptions): Promise<void> => {
   const bundle = await rolldown(options);
@@ -267,31 +321,173 @@ const runJob = async (options: RolldownOptions): Promise<void> => {
   await bundle.close();
 };
 
+const DECLARATION_STAGING = resolvePath(rootDir, 'dist', '.declarations');
+
+/** The files a package's own `tsconfig.json` type-checks, so the composed emit sees exactly what each package does. */
+const programFiles = (configPath: string): string[] => {
+  const parsed = ts.getParsedCommandLineOfConfigFile(
+    configPath,
+    {},
+    {
+      ...ts.sys,
+      onUnRecoverableConfigFileDiagnostic: diagnostic => {
+        throw new Error(`cannot read ${configPath}: ${ts.flattenDiagnosticMessageText(diagnostic.messageText, ' ')}`);
+      },
+    },
+  );
+
+  if (parsed === undefined || parsed.errors.length > 0) {
+    const reason = parsed?.errors.map(error => ts.flattenDiagnosticMessageText(error.messageText, '\n')).join('; ') ?? 'unreadable';
+
+    throw new Error(`cannot read ${configPath}: ${reason}`);
+  }
+
+  return parsed.fileNames;
+};
+
+const listFiles = (dir: string): string[] =>
+  readdirSync(dir, { withFileTypes: true }).flatMap(entry => {
+    const path = join(dir, entry.name);
+
+    return entry.isDirectory() ? listFiles(path) : [path];
+  });
+
+/**
+ * Where an emitted declaration (or declaration map) ships: Core sources under
+ * `dist/esm/`, a runtime module's sources under `dist/esm/<subpath>/`.
+ */
+const shippedDeclarationPath = (stagingOut: string, emitted: string): string => {
+  const source = resolvePath(rootDir, relativePath(stagingOut, emitted));
+  const match = /\.d\.ts(\.map)?$/.exec(source);
+  const shipped = match === null ? undefined : shippedPathForSource(layout, `${source.slice(0, match.index)}.ts`);
+
+  if (match === null || shipped === undefined) {
+    throw new Error(`declaration emit produced ${emitted}, which belongs to no shipped source tree`);
+  }
+
+  return `${shipped}.d.ts${match[1] ?? ''}`;
+};
+
+/**
+ * The specifier a shipped declaration has to use instead of `specifier`, or
+ * `undefined` to keep it. A runtime module's declarations name Core, its
+ * subpaths and sibling modules through relative paths to the exported files,
+ * and their own `#` imports through the module's place in the Core tree, so no
+ * consumer needs the source repository's resolution to read them. Core's own
+ * `#` imports keep resolving through the Core `imports` map, except where they
+ * point into a runtime module.
+ *
+ * Every extensionless relative specifier gains the explicit `.js` (or
+ * `/index.js`) of the declaration it names. The emitter keeps specifiers as
+ * written, and Node's own resolution (`NodeNext`) rejects a relative ESM import
+ * without an extension, so without this a NodeNext consumer could not read any
+ * shipped declaration.
+ */
+const shippedDeclarationSpecifier = (file: string, specifier: string, shipped: ReadonlySet<string>): string | undefined => {
+  const module = moduleOfShipped(layout, file);
+
+  if (specifier.startsWith('./') || specifier.startsWith('../')) {
+    const base = resolvePath(dirname(file), specifier);
+
+    if (shipped.has(`${base}.d.ts`)) {
+      return `${specifier}.js`;
+    }
+
+    return shipped.has(join(base, 'index.d.ts')) ? `${specifier}/index.js` : undefined;
+  }
+
+  const toDeclarationSpecifier = (target: string): string => relativeSpecifier(file, target).replace(/\.d\.ts$/, '.js');
+
+  if (specifier.startsWith('#')) {
+    const source = resolvePackageImportSource(module?.packageDir ?? rootDir, specifier);
+    const shipped = source === undefined ? undefined : shippedPathForSource(layout, source);
+
+    if (source === undefined || shipped === undefined) {
+      throw new Error(`${file}: cannot resolve "${specifier}" to a shipped source`);
+    }
+
+    return module === undefined && moduleOfSource(layout, source) === undefined ? undefined : toDeclarationSpecifier(`${shipped}.d.ts`);
+  }
+
+  if (module !== undefined && specifier.startsWith('@codexo/')) {
+    const target = resolveCoreExport(layout, specifier, 'types');
+
+    if (target === undefined) {
+      throw new Error(`${file}: runtime module declarations may only name @codexo/exojs and its subpaths, found "${specifier}"`);
+    }
+
+    return toDeclarationSpecifier(target);
+  }
+
+  return undefined;
+};
+
+/** Re-anchors a moved declaration map's `sources` to the source files they named before the move. */
+const relocateDeclarationMap = (from: string, to: string): string => {
+  const map = JSON.parse(readFileSync(from, 'utf8')) as { sources: string[] };
+  map.sources = map.sources.map(source => relativePath(dirname(to), resolvePath(dirname(from), source)).replaceAll('\\', '/'));
+
+  return JSON.stringify(map);
+};
+
 const emitDeclarations = async (): Promise<void> => {
-  const { status } = runTypeScriptCompiler(
-    [
-      '-p',
-      'tsconfig.json',
-      '--emitDeclarationOnly',
-      '--outDir',
-      'dist/esm',
-      '--declarationDir',
-      'dist/esm',
-      '--inlineSources',
-      '--incremental',
-      'false',
-    ],
-    { cwd: rootDir },
+  const stagingOut = join(DECLARATION_STAGING, 'out');
+  const configs = [
+    resolvePath(rootDir, 'tsconfig.json'),
+    ...RUNTIME_MODULES.map(module => resolvePath(rootDir, module.dir, 'tsconfig.json')),
+  ];
+  const files = [...new Set(configs.flatMap(programFiles))];
+  const configPath = join(DECLARATION_STAGING, 'tsconfig.json');
+
+  rmSync(DECLARATION_STAGING, { recursive: true, force: true });
+  mkdirSync(DECLARATION_STAGING, { recursive: true });
+  writeFileSync(
+    configPath,
+    JSON.stringify(
+      {
+        extends: resolvePath(rootDir, 'tsconfig.json'),
+        compilerOptions: { rootDir, outDir: stagingOut, declarationDir: stagingOut, customConditions: SOURCE_CONDITIONS },
+        files,
+        include: [],
+      },
+      null,
+      2,
+    ),
   );
 
-  if (status !== 0) {
-    throw new Error(`declaration emit failed (tsc exit ${status})`);
+  try {
+    const { status } = runTypeScriptCompiler(['-p', configPath, '--emitDeclarationOnly', '--inlineSources', '--incremental', 'false'], {
+      cwd: rootDir,
+    });
+
+    if (status !== 0) {
+      throw new Error(`declaration emit failed (tsc exit ${status})`);
+    }
+
+    const emitted = listFiles(stagingOut).map(file => ({ file, target: shippedDeclarationPath(stagingOut, file) }));
+    const shipped = new Set(emitted.map(entry => entry.target).filter(target => target.endsWith('.d.ts')));
+
+    for (const { file, target } of emitted) {
+      mkdirSync(dirname(target), { recursive: true });
+
+      if (target.endsWith('.map')) {
+        writeFileSync(target, relocateDeclarationMap(file, target));
+      } else {
+        const text = readFileSync(file, 'utf8');
+        writeFileSync(
+          target,
+          rewriteModuleSpecifiers(target, text, specifier => shippedDeclarationSpecifier(target, specifier, shipped)),
+        );
+      }
+    }
+  } finally {
+    rmSync(DECLARATION_STAGING, { recursive: true, force: true });
   }
 };
 
 if (watchMode) {
   await emitBasisRuntime();
-  const jobs = [bundled(false), debugBundled(false), modules(), iife(false)];
+  const jobs = [bundled(false), debugBundled(false), modules(), ...(await runtimeModuleJobs())];
   const watcher = watch(jobs as never);
   watcher.on('event', event => {
     if (event.code === 'BUNDLE_END') {
@@ -307,10 +503,9 @@ if (watchMode) {
     }
   });
 } else {
-  const jobs =
-    buildMode === 'production'
-      ? [bundled(true), debugBundled(true), modules(), iife(false), iife(true), fullBundle(false), fullBundle(true)]
-      : [bundled(true), debugBundled(true), modules(), iife(false)];
+  // The runtime modules come after the Core tree they import.
+  const moduleJobs = await runtimeModuleJobs();
+  const jobs = [bundled(true), debugBundled(true), modules(), ...moduleJobs];
 
   for (const job of jobs) {
     await runJob(job);
@@ -318,5 +513,5 @@ if (watchMode) {
 
   await emitDeclarations();
   await emitBasisRuntime();
-  writeSourceStamp(resolvePath(rootDir, 'src'), resolvePath(rootDir, 'dist'));
+  writeSourceStamp(coreSourceRoots(rootDir), resolvePath(rootDir, 'dist'));
 }
diff --git a/scripts/check-dist-fresh.ts b/scripts/check-dist-fresh.ts
index 3a89a05ba..cb14e0c38 100644
--- a/scripts/check-dist-fresh.ts
+++ b/scripts/check-dist-fresh.ts
@@ -2,13 +2,12 @@
  * Refuse to run a dist-consuming step against a stale build, or bring the
  * build up to date first.
  *
- * The site build and the full-bundle export check read `dist/` (Core) and
- * `packages/exojs-*\/dist/` (extensions) rather than the sources. After a
- * pull or a local edit those artifacts silently lag behind: the site bundles
- * an engine without the new export and the example smoke then reports a black
- * canvas with no error; the export check names a symbol the package "does not
- * export". Each of those wasted a diagnosis before this check existed. The
- * API docs generator is not gated: it converts from the sources.
+ * The site build reads `dist/` (Core) and `packages/exojs-*\/dist/`
+ * (extensions) rather than the sources. After a pull or a local edit those
+ * artifacts silently lag behind: the site bundles an engine without the new
+ * export and the example smoke then reports a black canvas with no error.
+ * Each of those wasted a diagnosis before this check existed. The API docs
+ * generator is not gated: it converts from the sources.
  *
  * Without `--rebuild`, a stale unit fails the step with the rebuild command
  * named; a package that was never built is left to the consuming step's own
diff --git a/scripts/check-full-bundle-exports.ts b/scripts/check-full-bundle-exports.ts
deleted file mode 100644
index b4ef16ffe..000000000
--- a/scripts/check-full-bundle-exports.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-/**
- * Gate: the full-bundle IIFE entry must not silently omit a package's public
- * value exports.
- *
- * `scripts/exo-full.entry.ts` re-exports some packages with `export *` and
- * others through a hand-written named list, because tiled and ldtk re-export
- * tilemap's runtime classes and those must appear exactly once in the bundle.
- * A hand-written list drifts: a helper added to a package stays out of
- * `window.Exo` forever, and nothing fails.
- *
- * The rule this enforces: a package's public value export may be missing from
- * the entry only when the very same binding is already in the bundle from an
- * earlier package, or when it is listed below with a reason. Type-only exports
- * are out of scope - an IIFE global carries no types.
- *
- * A package the entry re-exports with `export *` cannot drift and is only read
- * here to record which bindings the bundle already carries. The gate therefore
- * has teeth exactly where the risk is: the hand-written lists.
- *
- * The comparison runs against the built `dist/esm` barrels, so `pnpm build`
- * must have produced them.
- */
-import { existsSync, readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { pathToFileURL } from 'node:url';
-
-const ROOT = join(import.meta.dirname, '..');
-const ENTRY = join(ROOT, 'scripts', 'exo-full.entry.ts');
-
-/**
- * Public value exports deliberately kept out of the full bundle, with the
- * reason. Anything not listed here and not re-exported is a gate failure.
- */
-const INTENTIONAL_OMISSIONS: Readonly<Record<string, string>> = {};
-
-interface EntryBlock {
-  readonly specifier: string;
-  /** `null` for `export *`, which covers everything the package exports. */
-  readonly names: readonly string[] | null;
-}
-
-/** Parse the entry's re-export blocks in source order. */
-const parseEntry = (source: string): EntryBlock[] => {
-  const blocks: EntryBlock[] = [];
-  const star = /^export \* from '([^']+)';$/gm;
-  const named = /^export \{([^}]*)\} from '([^']+)';$/gms;
-
-  for (const match of source.matchAll(star)) {
-    blocks.push({ specifier: match[1]!, names: null, index: match.index } as EntryBlock & { index: number });
-  }
-
-  for (const match of source.matchAll(named)) {
-    const names = match[1]!
-      .split(',')
-      .map(name =>
-        name
-          .trim()
-          .split(/\s+as\s+/)[0]!
-          .trim(),
-      )
-      .filter(name => name.length > 0);
-
-    blocks.push({ specifier: match[2]!, names, index: match.index } as EntryBlock & { index: number });
-  }
-
-  return blocks.sort((a, b) => (a as EntryBlock & { index: number }).index - (b as EntryBlock & { index: number }).index);
-};
-
-/** Absolute path of a workspace package's built ESM barrel, or `null`. */
-const barrelPath = (specifier: string): string | null => {
-  const directory = specifier === '@codexo/exojs' ? ROOT : join(ROOT, 'packages', specifier.replace('@codexo/', ''));
-  const barrel = join(directory, 'dist', 'esm', 'index.js');
-
-  return existsSync(barrel) ? barrel : null;
-};
-
-const blocks = parseEntry(readFileSync(ENTRY, 'utf8'));
-const missingBuilds: string[] = [];
-const failures: string[] = [];
-/** Every binding already reachable from the bundle, by identity. */
-const bundled = new Set<unknown>();
-
-for (const block of blocks) {
-  const barrel = barrelPath(block.specifier);
-
-  if (barrel === null) {
-    missingBuilds.push(block.specifier);
-    continue;
-  }
-
-  const module = (await import(pathToFileURL(barrel).href)) as Record<string, unknown>;
-  const exported = Object.keys(module).filter(name => name !== 'default');
-
-  if (block.names === null) {
-    for (const name of exported) {
-      bundled.add(module[name]);
-    }
-
-    continue;
-  }
-
-  const listed = new Set(block.names);
-
-  for (const name of exported) {
-    const value = module[name];
-
-    if (listed.has(name)) {
-      bundled.add(value);
-      continue;
-    }
-
-    // A binding already in the bundle under the same identity is a deliberate
-    // de-duplication, not an omission: tiled and ldtk re-export tilemap's
-    // runtime classes, and the bundle must carry each of those exactly once.
-    if (bundled.has(value)) {
-      continue;
-    }
-
-    if (Object.hasOwn(INTENTIONAL_OMISSIONS, name)) {
-      continue;
-    }
-
-    failures.push(`${block.specifier}: '${name}' is a public value export but the full-bundle entry omits it`);
-  }
-
-  for (const name of block.names) {
-    if (!exported.includes(name) && !Object.hasOwn(module, name)) {
-      failures.push(`${block.specifier}: entry re-exports '${name}', which the package does not export`);
-    }
-  }
-}
-
-if (missingBuilds.length > 0) {
-  console.error(`check-full-bundle-exports: no built barrel for ${missingBuilds.join(', ')}. Run \`pnpm build\` first.`);
-  process.exit(2);
-}
-
-if (failures.length > 0) {
-  console.error('Full-bundle entry is out of sync with the packages it bundles:\n');
-
-  for (const failure of failures) {
-    console.error(`  - ${failure}`);
-  }
-
-  console.error(
-    `\nAdd each symbol to scripts/exo-full.entry.ts, or record it in INTENTIONAL_OMISSIONS ` +
-      `in scripts/check-full-bundle-exports.ts with the reason it stays out.`,
-  );
-  process.exit(1);
-}
-
-console.log(`Full-bundle entry covers every public value export of ${blocks.length} bundled package(s).`);
diff --git a/scripts/check-javascript-files.ts b/scripts/check-javascript-files.ts
index 692f458fa..4787a47cd 100644
--- a/scripts/check-javascript-files.ts
+++ b/scripts/check-javascript-files.ts
@@ -46,10 +46,20 @@ const EXEMPTIONS: readonly Exemption[] = [
     reason:
       'npm/pnpm link this executable before builds; Node cannot strip TypeScript inside installed node_modules, and tsconfig.scripts.json checks it',
   },
+  {
+    path: 'packages/exojs-demo-assets/bin/copy-media.js',
+    reason:
+      'the media-copy command npm/pnpm link into a host project; Node cannot strip TypeScript inside installed node_modules, and tsconfig.scripts.json checks it',
+  },
   {
     path: 'examples/',
     reason: 'the playground catalog: `.ts` sources plus the `.js` twins the transpiler emits and `examples:sync:check` keeps in step',
   },
+  {
+    path: 'packages/legacy/',
+    reason:
+      'the published forwarders of the retired runtime package names, loaded as-is from an installed package; generated from the release matrix and pinned by `legacy-shims:check`',
+  },
   {
     path: 'packages/exojs-config/',
     reason:
diff --git a/scripts/check-skipped-tests.ts b/scripts/check-skipped-tests.ts
index 5a103ba4e..75cf05e73 100644
--- a/scripts/check-skipped-tests.ts
+++ b/scripts/check-skipped-tests.ts
@@ -14,8 +14,8 @@
  * The gate reads EVERY JUnit report under `test-results/*.junit.xml` - not
  * just the unit lane - and compares the summed skips per suite file against
  * `skipped-tests-baseline.json`. Each CI test suite (unit, webgl, webgl-build,
- * webgl-assets, webgl-core, webgpu, webgpu-media, firefox, audio, tilemap)
- * writes its own JUnit file; a dedicated `skip-budget` CI job downloads all of
+ * webgl-assets, webgl-core, webgpu, webgpu-media, firefox, audio, tilemap,
+ * and the build job's `release-dist` project) writes its own JUnit file; a dedicated `skip-budget` CI job downloads all of
  * them into `test-results/` before running this script, so the budget is ONE
  * global number per suite file, not one per lane - a file's runtime skips in
  * the WebGPU lane and its static skips in the unit lane land in the same
@@ -48,7 +48,7 @@ const DEFAULT_REPORT_DIR = 'test-results';
 const DEFAULT_REPORT_GLOB = `${DEFAULT_REPORT_DIR}/*.junit.xml`;
 
 const BASELINE_NOTE =
-  "Per-file budget of skipped tests, measured as the SUM across every CI test lane (unit + webgl + webgl-build + webgl-assets + webgl-core + webgpu + webgpu-media + firefox + audio + tilemap), aggregated from each lane's own JUnit report — one global budget, not one per lane. Skipping more than the budget fails `pnpm test:skips`, and so does any skip in a file with no budget — a conditional test (including a runtime `ctx.skip(...)`) must be a reviewed entry, not a quiet default. Skipping fewer only prints a note, because the count depends on which lanes actually ran (a local partial run, or a local `dist/` that unskips the production-stripping checks). Run `pnpm test:skips:update-baseline` against a full set of lane reports to record a change.";
+  "Per-file budget of skipped tests, measured as the SUM across every CI test lane (unit + webgl + webgl-build + webgl-assets + webgl-core + webgpu + webgpu-media + firefox + audio + tilemap + the build job), aggregated from each lane's own JUnit report — one global budget, not one per lane. Skipping more than the budget fails `pnpm test:skips`, and so does any skip in a file with no budget — a conditional test (including a runtime `ctx.skip(...)`) must be a reviewed entry, not a quiet default. Skipping fewer only prints a note, because the count depends on which lanes actually ran (a local partial run, or a local `dist/` that unskips the production-stripping checks). Run `pnpm test:skips:update-baseline` against a full set of lane reports to record a change.";
 
 interface Baseline {
   note: string;
diff --git a/scripts/ci/gate-groups.ts b/scripts/ci/gate-groups.ts
index 1e03cf336..6c0209cbb 100644
--- a/scripts/ci/gate-groups.ts
+++ b/scripts/ci/gate-groups.ts
@@ -36,12 +36,13 @@ export const GATE_GROUPS = {
   // a shared runner measures nothing meaningful. Every one of these executes
   // engine source in-process, so they rot silently against an API change or a
   // module-resolution change and no other lane touches them.
-  sync: ['docs:api:check', 'examples:sync:check', 'assets:compact:check', 'perf:smoke'],
-  // `full-bundle:exports:check` reads every bundled package's built ESM barrel,
-  // so it needs the same built dist this group's job already provides. It runs
-  // first because it also carries the freshness check: a dist that lags the
-  // sources fails in seconds here rather than after the site typecheck.
-  site: ['full-bundle:exports:check', 'typecheck:site', 'typecheck:site-scripts'],
+  sync: ['docs:api:check', 'examples:sync:check', 'legacy-shims:check', 'assets:compact:check', 'perf:smoke'],
+  // `dist:check` runs the freshness gate: a dist that lags the sources fails
+  // in seconds here rather than after the site typecheck. The site job already
+  // builds dist, so the check is a fast verification, and the hybrid-runtime
+  // export completeness of the built tree is covered by the CI build job's
+  // `test:release-dist`.
+  site: ['dist:check', 'typecheck:site', 'typecheck:site-scripts'],
 } as const satisfies Record<string, readonly string[]>;
 
 export type GateGroup = keyof typeof GATE_GROUPS;
diff --git a/scripts/ci/lanes.ts b/scripts/ci/lanes.ts
index e9db11d4d..42f05c0ea 100644
--- a/scripts/ci/lanes.ts
+++ b/scripts/ci/lanes.ts
@@ -357,6 +357,9 @@ export interface PlanInput {
 
 const COVERAGE_BRANCHES = new Set(['main', 'next']);
 
+/** Branches whose pushes publish a site channel; see `scripts/pages/site-channel.ts`. */
+const CHANNEL_BRANCHES = new Set(['main', 'next']);
+
 const ALL_AREAS: LaneAreas = {
   engine: true,
   site: true,
@@ -404,6 +407,10 @@ export const planCi = ({ eventName, changedFiles, refName }: PlanInput): CiPlan
   // The smoke drives the site job's artifact, so a catalog change builds the
   // site even when nothing under site/ changed.
   const site = areas.site || areas.exampleCatalog;
+  // A push to a channel branch uploads the tree the Pages publisher deploys, so
+  // that tree is always smoked at its real base before the run can turn green;
+  // one example per category suffices when the catalog itself is unchanged.
+  const candidate = eventName === 'push' && CHANNEL_BRANCHES.has(refName) && site;
 
   return {
     areas,
@@ -415,8 +422,8 @@ export const planCi = ({ eventName, changedFiles, refName }: PlanInput): CiPlan
     // changed.
     build: areas.engine || areas.createExoApp || site,
     site,
-    smoke: areas.exampleCatalog,
-    smokeSample: isPullRequest,
+    smoke: areas.exampleCatalog || candidate,
+    smokeSample: isPullRequest || !areas.exampleCatalog,
     skipBudget: effective.unit,
     coverage,
   };
diff --git a/scripts/ci/local-lanes.ts b/scripts/ci/local-lanes.ts
index 86fb99752..f13719ca0 100644
--- a/scripts/ci/local-lanes.ts
+++ b/scripts/ci/local-lanes.ts
@@ -16,7 +16,7 @@ const SMOKE_LANE: Lane = {
   id: 'smoke',
   stage: 'verify',
   when: 'exampleSmoke',
-  run: 'pnpm site:build && pnpm test:examples:smoke --sample',
+  run: 'pnpm site:build && pnpm test:examples:smoke --sample && pnpm test:playground:e2e',
   local: 'browser',
 };
 const eligible = (lane: Lane): boolean => lane.stage !== 'verify' && !lane.ciOnly;
diff --git a/scripts/ci/local-policy.ts b/scripts/ci/local-policy.ts
index d35e8f1ee..ab7843aca 100644
--- a/scripts/ci/local-policy.ts
+++ b/scripts/ci/local-policy.ts
@@ -43,6 +43,8 @@ export interface LocalPolicy {
 
 interface PackageManifest {
   name: string;
+  /** Directory under `packages/`, which is also the package's Vitest project name. */
+  directory: string;
   scripts?: Record<string, string>;
   dependencies?: Record<string, string>;
   devDependencies?: Record<string, string>;
@@ -54,14 +56,59 @@ const packages = (): PackageManifest[] =>
     .filter(entry => entry.isDirectory())
     .flatMap(entry => {
       try {
-        return [JSON.parse(readFileSync(resolve('packages', entry.name, 'package.json'), 'utf8')) as PackageManifest];
+        const manifest = JSON.parse(readFileSync(resolve('packages', entry.name, 'package.json'), 'utf8')) as Omit<
+          PackageManifest,
+          'directory'
+        >;
+
+        return [{ ...manifest, directory: entry.name }];
       } catch {
         return [];
       }
     });
 
+const RUNTIME_MODULE_PREFIX = '@codexo/exojs-module-';
+
+const listSources = (dir: string): string[] =>
+  existsSync(dir)
+    ? readdirSync(dir, { withFileTypes: true }).flatMap(entry => {
+        const path = resolve(dir, entry.name);
+
+        if (entry.isDirectory()) {
+          return listSources(path);
+        }
+
+        return /\.tsx?$/.test(entry.name) ? [path] : [];
+      })
+    : [];
+
+/**
+ * The Core subpaths of runtime modules a package imports. A runtime module is
+ * reached through `@codexo/exojs/<subpath>` rather than through a dependency
+ * declaration, so the manifest alone cannot say who depends on it.
+ */
+const importedModuleSubpaths = (manifest: PackageManifest, subpaths: readonly string[]): string[] => {
+  const text = ['src', 'test']
+    .flatMap(dir => listSources(resolve('packages', manifest.directory, dir)))
+    .map(file => readFileSync(file, 'utf8'));
+
+  return subpaths.filter(subpath => text.some(source => source.includes(`'@codexo/exojs/${subpath}'`)));
+};
+
 const affectedPackages = (name: string): PackageManifest[] => {
   const manifests = packages();
+  const subpaths = manifests
+    .filter(manifest => manifest.name.startsWith(RUNTIME_MODULE_PREFIX))
+    .map(manifest => manifest.name.slice(RUNTIME_MODULE_PREFIX.length));
+  const edges = new Map(
+    manifests.map(manifest => [
+      manifest.name,
+      [
+        ...Object.keys({ ...manifest.dependencies, ...manifest.devDependencies, ...manifest.peerDependencies }),
+        ...importedModuleSubpaths(manifest, subpaths).map(subpath => `${RUNTIME_MODULE_PREFIX}${subpath}`),
+      ],
+    ]),
+  );
   const selected = new Set([name]);
   let changed = true;
 
@@ -73,9 +120,7 @@ const affectedPackages = (name: string): PackageManifest[] => {
         continue;
       }
 
-      const dependencies = { ...manifest.dependencies, ...manifest.devDependencies, ...manifest.peerDependencies };
-
-      if (Object.keys(dependencies).some(dependency => selected.has(dependency))) {
+      if ((edges.get(manifest.name) ?? []).some(dependency => selected.has(dependency))) {
         selected.add(manifest.name);
         changed = true;
       }
@@ -86,7 +131,7 @@ const affectedPackages = (name: string): PackageManifest[] => {
 };
 
 const hasUnitProject = (manifest: PackageManifest): boolean =>
-  manifest.name.startsWith('@codexo/exojs-') && existsSync(resolve('packages', manifest.name.slice('@codexo/'.length), 'test'));
+  manifest.directory.startsWith('exojs-') && existsSync(resolve('packages', manifest.directory, 'test'));
 
 const isGlobal = (file: string): boolean =>
   file === 'package.json' ||
@@ -152,12 +197,12 @@ export const selectLocalPolicy = (changedFiles: readonly string[]): LocalPolicy
       projects.add('exojs');
 
       if (/^src\/(index\.ts|renderer-sdk\.ts|extensions\/)/.test(file) || file.endsWith('/index.ts')) {
-        add('typecheck:packages', 'full-bundle:exports:check');
+        add('typecheck:packages', 'dist:check');
         policy.needsDist = true;
 
         for (const manifest of packages()) {
           if (hasUnitProject(manifest)) {
-            projects.add(manifest.name.slice('@codexo/'.length));
+            projects.add(manifest.directory);
           }
         }
       }
@@ -179,6 +224,13 @@ export const selectLocalPolicy = (changedFiles: readonly string[]): LocalPolicy
         policy.smoke = true;
         policy.needsDist = true;
       }
+    } else if (file.startsWith('packages/legacy/')) {
+      // Generated forwarders: the generator check and the release tests that
+      // install them next to the Core tarball are what can notice a change.
+      siteOnlyUnits = false;
+      add('legacy-shims:check', 'format:check');
+      projects.add('exojs');
+      policy.needsDist = true;
     } else if (file.startsWith('packages/')) {
       siteOnlyUnits = false;
       const packageDirectory = file.split('/')[1]!;
@@ -199,7 +251,7 @@ export const selectLocalPolicy = (changedFiles: readonly string[]): LocalPolicy
         }
 
         if (hasUnitProject(affected)) {
-          projects.add(affected.name.slice('@codexo/'.length));
+          projects.add(affected.directory);
         }
       }
 
diff --git a/scripts/ci/select-lanes.ts b/scripts/ci/select-lanes.ts
index ac5b4cba3..e07e2bc16 100644
--- a/scripts/ci/select-lanes.ts
+++ b/scripts/ci/select-lanes.ts
@@ -312,6 +312,18 @@ const isExampleCatalogPath = (file: string): boolean => {
   return false;
 };
 
+/**
+ * Root tooling the site build runs or vendors the output of: the dist builders
+ * whose bundles the site serves, the freshness check `site:build` starts
+ * with, and the channel contract and manifest writer under `scripts/pages/`.
+ */
+const SITE_BUILD_TOOLING = new Set([
+  'scripts/build.ts',
+  'scripts/build-extension.ts',
+  'scripts/check-dist-fresh.ts',
+  'scripts/dist-freshness.ts',
+]);
+
 /**
  * Site area: anything that can change the generated examples site / API docs.
  * Gates the site-build lane. Mirrors (and intentionally keeps) the prior `site`
@@ -323,6 +335,10 @@ const isSitePath = (file: string): boolean => {
     return true;
   }
 
+  if (file.startsWith('scripts/pages/') || SITE_BUILD_TOOLING.has(file)) {
+    return true;
+  }
+
   if (file.startsWith('examples/')) {
     return true;
   }
@@ -428,6 +444,7 @@ export const CHECKED_README_PATHS: readonly string[] = [
     'exojs-aseprite',
     'exojs-audio-fx',
     'exojs-pathfinding',
+    'exojs-demo-assets',
   ].map(name => `packages/${name}/README.md`),
 ];
 
@@ -443,9 +460,8 @@ export const CHECKED_README_PATHS: readonly string[] = [
  *                                        URL state, the example catalog, source
  *                                        snippets, footgun diagnostics).
  *   - `examples/`                        the catalog sources and their generated
- *                                        twins, which `examples-sync`,
- *                                        `runtime-dts` and `assets-global-dts`
- *                                        read directly.
+ *                                        twins, which `examples-sync` and
+ *                                        `runtime-dts` read directly.
  *   - `packages/exojs-bench/results/`    the committed profiles, which
  *                                        `site/src/lib/bench-profiles` globs and
  *                                        three suites validate. The bench
@@ -557,6 +573,11 @@ const isReleasePath = (file: string): boolean => {
     return true;
   }
 
+  // The legacy shims are packed as they are committed; every file is release content.
+  if (file.startsWith('packages/legacy/')) {
+    return true;
+  }
+
   if (file === '.github/workflows/release.yml') {
     return true;
   }
diff --git a/scripts/ci/verify-esm-importmap.ts b/scripts/ci/verify-esm-importmap.ts
new file mode 100644
index 000000000..10a057ffd
--- /dev/null
+++ b/scripts/ci/verify-esm-importmap.ts
@@ -0,0 +1,204 @@
+/**
+ * E02: the built ESM tree, actually loaded by a browser as bare module
+ * specifiers through an import map.
+ *
+ * Serves the production `dist/` over a throwaway static server, opens a page
+ * whose import map resolves `@codexo/exojs` and its subpaths to the served
+ * `dist/esm` tree, and verifies in a real Chromium that:
+ *
+ * - every root/subpath import resolves without a bare-specifier error;
+ * - all of them share ONE Core instance (class identity across entries, no
+ *   duplicate Core copy introduced by the import map);
+ * - the KTX2/Basis worker and WASM files sit at the URLs the engine derives
+ *   from `import.meta.url`, with a JavaScript/WASM MIME type.
+ *
+ * This is the browser half of the hybrid-runtime contract the node tests
+ * (test/release/hybrid-runtime-*.test.ts) check through bundling and Node ESM.
+ * It needs `pnpm build` to have run; the CI build job runs it right after
+ * `test:release-dist`.
+ */
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { createServer, type Server } from 'node:http';
+import { dirname, extname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { chromium, type Page } from 'playwright';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, '..', '..');
+const distEsm = join(repoRoot, 'dist', 'esm');
+
+if (!existsSync(join(distEsm, 'index.js'))) {
+  console.error('verify-esm-importmap: dist/esm is missing; run `pnpm build` first.');
+  process.exit(1);
+}
+
+const MIME: Readonly<Record<string, string>> = {
+  '.js': 'text/javascript',
+  '.mjs': 'text/javascript',
+  '.json': 'application/json',
+  '.wasm': 'application/wasm',
+  '.map': 'application/json',
+  '.d.ts': 'text/plain',
+};
+
+const SUBPATHS = ['tilemap', 'particles', 'audio-fx', 'physics', 'tilemap-physics', 'lighting', 'pathfinding'] as const;
+
+const importMap = Object.fromEntries([
+  ['@codexo/exojs', '/esm/index.js'],
+  ['@codexo/exojs/debug', '/esm/debug/index.js'],
+  ...SUBPATHS.map(subpath => [`@codexo/exojs/${subpath}`, `/esm/${subpath}/index.js`]),
+]);
+
+const probeScript = `
+(async () => {
+  const report = { imports: {}, identity: {}, worker: {}, errors: [] };
+  try {
+    const core = await import('@codexo/exojs');
+    const debug = await import('@codexo/exojs/debug');
+    const subpaths = {${SUBPATHS.map(subpath => `'${subpath}': await import('@codexo/exojs/${subpath}')`).join(', ')}};
+
+    // One Core copy: entries that re-export Core classes must hand out the
+    // same constructors the root entry hands out. The root entry does not
+    // export the debug tree, so the debug check is between the two module
+    // trees that do share DebugLayer (debug and physics).
+    report.imports.root = typeof core.Application === 'function';
+    report.identity.physicsDebugDraw = debug.PhysicsDebugDraw.prototype instanceof debug.DebugLayer;
+    report.identity.tilemapNode = subpaths.tilemap.TileMapNode.prototype instanceof core.Container;
+    report.identity.particles = subpaths.particles.ParticleSystem.prototype instanceof core.Drawable;
+
+    // The engine derives the KTX2/Basis worker from import.meta.url; the files
+    // must be at those derived URLs with a served MIME type.
+    for (const path of ['/esm/assets/factories/basis/ktx2.worker.js', '/esm/assets/factories/basis/basis_transcoder.wasm']) {
+      const response = await fetch(path);
+      report.worker[path] = { status: response.status, contentType: response.headers.get('content-type') ?? '' };
+    }
+  } catch (error) {
+    report.errors.push(String(error));
+  }
+
+  window.__IMPORT_MAP_RESULT__ = report;
+})();
+`;
+
+const html = `<!doctype html>
+<html>
+  <body>
+    <script type="importmap">${JSON.stringify({ imports: importMap })}</script>
+    <script type="module">${probeScript}</script>
+  </body>
+</html>`;
+
+interface ProbeResult {
+  imports: { root?: boolean };
+  identity: Record<string, boolean | undefined>;
+  worker: Record<string, { status: number; contentType: string }>;
+  errors: string[];
+}
+
+declare global {
+  interface Window {
+    __IMPORT_MAP_RESULT__?: ProbeResult;
+  }
+}
+
+const startServer = async (): Promise<{ server: Server; base: string }> => {
+  const server = createServer((request, response) => {
+    const url = new URL(request.url ?? '/', 'http://localhost');
+
+    if (url.pathname === '/') {
+      response.writeHead(200, { 'content-type': 'text/html' });
+      response.end(html);
+
+      return;
+    }
+
+    if (!url.pathname.startsWith('/esm/')) {
+      response.writeHead(404);
+      response.end('not found');
+
+      return;
+    }
+
+    const relative = url.pathname.slice('/esm/'.length);
+    const file = resolve(distEsm, relative);
+
+    if (!file.startsWith(distEsm) || !existsSync(file) || !statSync(file).isFile()) {
+      response.writeHead(404);
+      response.end('not found');
+
+      return;
+    }
+
+    response.writeHead(200, { 'content-type': MIME[extname(file)] ?? 'application/octet-stream' });
+    response.end(readFileSync(file));
+  });
+
+  await new Promise<void>(resolveStart => server.listen(0, '127.0.0.1', resolveStart));
+  const address = server.address();
+
+  if (address === null || typeof address === 'string') {
+    server.close();
+
+    throw new Error('verify-esm-importmap: failed to bind the static server.');
+  }
+
+  return { server, base: `http://127.0.0.1:${address.port}` };
+};
+
+const readResult = async (page: Page): Promise<ProbeResult> => {
+  await page.goto('/');
+  await page.waitForFunction(() => window.__IMPORT_MAP_RESULT__ !== undefined, undefined, { timeout: 15_000 });
+
+  return (await page.evaluate(() => window.__IMPORT_MAP_RESULT__)) as ProbeResult;
+};
+
+const main = async (): Promise<void> => {
+  const { server, base } = await startServer();
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({ baseURL: base });
+
+  // A bare-specifier fetch failure surfaces as a module-script error before
+  // the probe reports; capture it so the verdict names the real cause.
+  const pageErrors: string[] = [];
+  page.on('pageerror', error => pageErrors.push(String(error)));
+
+  try {
+    const result = await readResult(page);
+    const failures: string[] = [];
+
+    if (!result.imports.root) {
+      failures.push('root import did not expose Application');
+    }
+
+    for (const [name, ok] of Object.entries(result.identity)) {
+      if (!ok) {
+        failures.push(`${name}: expected one Core copy across the import map`);
+      }
+    }
+
+    for (const [path, { status, contentType }] of Object.entries(result.worker)) {
+      if (status !== 200) {
+        failures.push(`${path}: HTTP ${status}`);
+      } else if (!contentType.includes('javascript') && !contentType.includes('wasm')) {
+        failures.push(`${path}: unexpected content type ${contentType}`);
+      }
+    }
+
+    for (const error of [...result.errors, ...pageErrors]) {
+      failures.push(error);
+    }
+
+    if (failures.length > 0) {
+      console.error(`verify-esm-importmap: ${failures.length} failure(s):\n  ${failures.join('\n  ')}`);
+      process.exitCode = 1;
+    } else {
+      console.log(`verify-esm-importmap: root + debug + ${SUBPATHS.length} subpaths share one Core; worker and WASM served.`);
+    }
+  } finally {
+    await browser.close();
+    server.close();
+  }
+};
+
+main();
diff --git a/scripts/codemods/migrate-v020-imports.ts b/scripts/codemods/migrate-v020-imports.ts
new file mode 100644
index 000000000..5c672567a
--- /dev/null
+++ b/scripts/codemods/migrate-v020-imports.ts
@@ -0,0 +1,239 @@
+/**
+ * Moves import specifiers from the seven runtime packages that ExoJS v0.20
+ * folds into Core to their `@codexo/exojs/<subpath>` entries:
+ *
+ *   import { TileMap } from '@codexo/exojs-tilemap';           // before
+ *   import { TileMap } from '@codexo/exojs/tilemap';           // after
+ *   import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
+ *   import { PhysicsDebugDraw } from '@codexo/exojs/debug';
+ *
+ * Only module specifiers are rewritten, found by parsing each file: import and
+ * export declarations, `import()`, `require()`, `declare module` names and
+ * test-runner module mocks in TypeScript and JavaScript sources, and the same
+ * inside fenced `ts`/`tsx`/`js`/`jsx` code blocks of Markdown and MDX files.
+ * Prose, URLs, comments and every other string are left alone, and so is a
+ * deep import of a retired package that has no v0.20 equivalent - those are
+ * listed for a manual decision.
+ *
+ * Usage:
+ *
+ *   tsx scripts/codemods/migrate-v020-imports.ts <path>...          # rewrite in place
+ *   tsx scripts/codemods/migrate-v020-imports.ts --check <path>...  # list, exit 1 if any
+ *
+ * A directory is walked recursively, skipping `node_modules`, `dist` and
+ * dot-directories. Package manifests are not touched: replace a dependency on
+ * a retired package with `@codexo/exojs` by hand.
+ */
+import { readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { extname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import ts from 'typescript';
+
+import { findModuleSpecifiers, rewriteModuleSpecifiers, scriptKindFor } from '../lib/module-specifiers.ts';
+
+/** Every specifier the codemod rewrites, with its v0.20 replacement. */
+export const V020_SPECIFIER_MIGRATIONS: Readonly<Record<string, string>> = Object.freeze({
+  '@codexo/exojs-tilemap': '@codexo/exojs/tilemap',
+  '@codexo/exojs-particles': '@codexo/exojs/particles',
+  '@codexo/exojs-audio-fx': '@codexo/exojs/audio-fx',
+  '@codexo/exojs-physics': '@codexo/exojs/physics',
+  '@codexo/exojs-physics/debug': '@codexo/exojs/debug',
+  '@codexo/exojs-tilemap-physics': '@codexo/exojs/tilemap-physics',
+  '@codexo/exojs-lighting': '@codexo/exojs/lighting',
+  '@codexo/exojs-pathfinding': '@codexo/exojs/pathfinding',
+});
+
+const RETIRED_PACKAGES = Object.keys(V020_SPECIFIER_MIGRATIONS).filter(specifier => !specifier.includes('/', '@codexo/'.length));
+
+/** The v0.20 replacement for `specifier`, or `undefined` when it needs none. */
+export const migrateSpecifier = (specifier: string): string | undefined =>
+  Object.hasOwn(V020_SPECIFIER_MIGRATIONS, specifier) ? V020_SPECIFIER_MIGRATIONS[specifier] : undefined;
+
+/** Whether `specifier` imports a retired package in a way the codemod cannot map. */
+export const isUnmappedRetiredSpecifier = (specifier: string): boolean =>
+  migrateSpecifier(specifier) === undefined && RETIRED_PACKAGES.some(name => specifier.startsWith(`${name}/`));
+
+const SOURCE_EXTENSIONS = new Set(['.ts', '.tsx', '.mts', '.cts', '.js', '.jsx', '.mjs', '.cjs']);
+const MARKDOWN_EXTENSIONS = new Set(['.md', '.mdx']);
+
+const FENCE_KINDS: Readonly<Record<string, ts.ScriptKind>> = {
+  ts: ts.ScriptKind.TS,
+  typescript: ts.ScriptKind.TS,
+  mts: ts.ScriptKind.TS,
+  cts: ts.ScriptKind.TS,
+  tsx: ts.ScriptKind.TSX,
+  js: ts.ScriptKind.JS,
+  javascript: ts.ScriptKind.JS,
+  mjs: ts.ScriptKind.JS,
+  cjs: ts.ScriptKind.JS,
+  jsx: ts.ScriptKind.JSX,
+};
+
+/** Rewrites the specifiers of one TypeScript or JavaScript source text. */
+export const migrateSource = (fileName: string, text: string, scriptKind = scriptKindFor(fileName)): string =>
+  rewriteModuleSpecifiers(fileName, text, migrateSpecifier, scriptKind);
+
+interface FencedBlock {
+  /** Offset of the first content character. */
+  readonly start: number;
+  /** Offset just past the last content character. */
+  readonly end: number;
+  readonly kind: ts.ScriptKind;
+}
+
+const OPENING_FENCE = /^ {0,3}(`{3,}|~{3,})[ \t]*([^\s`]*)/;
+
+/** The fenced code blocks of a Markdown/MDX text whose language the codemod understands. */
+export const findFencedCodeBlocks = (text: string): FencedBlock[] => {
+  const blocks: FencedBlock[] = [];
+  const lines = text.split('\n');
+  let offset = 0;
+  let open: { fence: string; contentStart: number; kind: ts.ScriptKind | undefined } | undefined;
+
+  for (const line of lines) {
+    const lineEnd = offset + line.length + 1;
+    const content = line.replace(/\r$/, '');
+
+    if (open === undefined) {
+      const match = OPENING_FENCE.exec(content);
+
+      if (match) {
+        open = { fence: match[1]!, contentStart: lineEnd, kind: FENCE_KINDS[match[2]!.toLowerCase()] };
+      }
+    } else {
+      const closing = /^ {0,3}(`{3,}|~{3,})[ \t]*$/.exec(content);
+
+      if (closing && closing[1]![0] === open.fence[0] && closing[1]!.length >= open.fence.length) {
+        if (open.kind !== undefined) {
+          blocks.push({ start: open.contentStart, end: offset, kind: open.kind });
+        }
+
+        open = undefined;
+      }
+    }
+
+    offset = lineEnd;
+  }
+
+  return blocks;
+};
+
+/** Rewrites the specifiers inside the recognized fenced code blocks of a Markdown/MDX text. */
+export const migrateMarkdown = (fileName: string, text: string): string => {
+  let result = text;
+
+  for (const block of findFencedCodeBlocks(text).reverse()) {
+    const code = text.slice(block.start, block.end);
+    const migrated = migrateSource(`${fileName}.block`, code, block.kind);
+
+    if (migrated !== code) {
+      result = `${result.slice(0, block.start)}${migrated}${result.slice(block.end)}`;
+    }
+  }
+
+  return result;
+};
+
+/** Specifiers in `text` that import a retired package but have no mapping. */
+export const findUnmappedSpecifiers = (fileName: string, text: string): string[] => {
+  const extension = extname(fileName).toLowerCase();
+  const sources = MARKDOWN_EXTENSIONS.has(extension)
+    ? findFencedCodeBlocks(text).map(block => ({ code: text.slice(block.start, block.end), kind: block.kind }))
+    : [{ code: text, kind: scriptKindFor(fileName) }];
+
+  return sources.flatMap(({ code, kind }) =>
+    findModuleSpecifiers(fileName, code, kind)
+      .map(occurrence => occurrence.specifier)
+      .filter(isUnmappedRetiredSpecifier),
+  );
+};
+
+/** The migrated text of a file, or `undefined` for a file type the codemod does not handle. */
+export const migrateText = (fileName: string, text: string): string | undefined => {
+  const extension = extname(fileName).toLowerCase();
+
+  if (MARKDOWN_EXTENSIONS.has(extension)) {
+    return migrateMarkdown(fileName, text);
+  }
+
+  return SOURCE_EXTENSIONS.has(extension) && !fileName.endsWith('.d.ts.map') ? migrateSource(fileName, text) : undefined;
+};
+
+const SKIPPED_DIRECTORIES = new Set(['node_modules', 'dist']);
+
+const collectFiles = (path: string, out: string[]): string[] => {
+  if (!statSync(path).isDirectory()) {
+    out.push(path);
+
+    return out;
+  }
+
+  for (const entry of readdirSync(path, { withFileTypes: true })) {
+    if (entry.isDirectory() && (entry.name.startsWith('.') || SKIPPED_DIRECTORIES.has(entry.name))) {
+      continue;
+    }
+
+    collectFiles(join(path, entry.name), out);
+  }
+
+  return out;
+};
+
+export interface MigrationReport {
+  readonly changed: readonly string[];
+  readonly unmapped: ReadonlyArray<{ readonly file: string; readonly specifier: string }>;
+}
+
+/** Migrates every handled file under `paths`; with `write: false` only reports. */
+export const migratePaths = (paths: readonly string[], options: { readonly write: boolean }): MigrationReport => {
+  const changed: string[] = [];
+  const unmapped: Array<{ file: string; specifier: string }> = [];
+
+  for (const file of paths.flatMap(path => collectFiles(resolve(path), []))) {
+    const text = readFileSync(file, 'utf8');
+    const migrated = migrateText(file, text);
+
+    if (migrated === undefined) {
+      continue;
+    }
+
+    unmapped.push(...findUnmappedSpecifiers(file, text).map(specifier => ({ file, specifier })));
+
+    if (migrated !== text) {
+      changed.push(file);
+
+      if (options.write) {
+        writeFileSync(file, migrated);
+      }
+    }
+  }
+
+  return { changed, unmapped };
+};
+
+if (import.meta.url.startsWith('file:') && fileURLToPath(import.meta.url) === resolve(process.argv[1] ?? '')) {
+  const args = process.argv.slice(2);
+  const check = args.includes('--check');
+  const paths = args.filter(arg => arg !== '--check');
+
+  if (paths.length === 0) {
+    console.error('usage: migrate-v020-imports.ts [--check] <path>...');
+    process.exit(2);
+  }
+
+  const report = migratePaths(paths, { write: !check });
+
+  for (const file of report.changed) {
+    console.log(`${check ? 'needs migration' : 'migrated'}: ${file}`);
+  }
+
+  for (const { file, specifier } of report.unmapped) {
+    console.warn(`no v0.20 equivalent, migrate by hand: ${specifier} in ${file}`);
+  }
+
+  console.log(
+    `${report.changed.length} file(s) ${check ? 'need migration' : 'migrated'}, ${report.unmapped.length} unmapped specifier(s).`,
+  );
+  process.exit(check && (report.changed.length > 0 || report.unmapped.length > 0) ? 1 : 0);
+}
diff --git a/scripts/create-exo-app-consumers.ts b/scripts/create-exo-app-consumers.ts
index 2ebd50d88..331cf9c73 100644
--- a/scripts/create-exo-app-consumers.ts
+++ b/scripts/create-exo-app-consumers.ts
@@ -21,15 +21,8 @@ import { join } from 'node:path';
 /** Packages a template may depend on, mapped to the workspace directory that builds it. */
 const PACKAGE_SOURCES: Record<string, string> = {
   '@codexo/exojs': '.',
-  '@codexo/exojs-audio-fx': 'packages/exojs-audio-fx',
   '@codexo/exojs-aseprite': 'packages/exojs-aseprite',
   '@codexo/exojs-ldtk': 'packages/exojs-ldtk',
-  '@codexo/exojs-lighting': 'packages/exojs-lighting',
-  '@codexo/exojs-particles': 'packages/exojs-particles',
-  '@codexo/exojs-pathfinding': 'packages/exojs-pathfinding',
-  '@codexo/exojs-physics': 'packages/exojs-physics',
-  '@codexo/exojs-tilemap': 'packages/exojs-tilemap',
-  '@codexo/exojs-tilemap-physics': 'packages/exojs-tilemap-physics',
   '@codexo/exojs-tiled': 'packages/exojs-tiled',
 };
 
diff --git a/scripts/create-package.ts b/scripts/create-package.ts
index 8cd58a4da..e4922677e 100644
--- a/scripts/create-package.ts
+++ b/scripts/create-package.ts
@@ -450,7 +450,7 @@ const wired: string[] = [];
 
 // 1. scripts/release/lockstep-packages.ts - append a LockstepPackage entry.
 {
-  const entry = `  { name: '${pkgName}', dir: '${pkgDirRel}', isExtension: true, inOfflineSmoke: ${inOfflineSmoke} },`;
+  const entry = `  { name: '${pkgName}', dir: '${pkgDirRel}', role: 'adapter', inOfflineSmoke: ${inOfflineSmoke} },`;
   const updated = insertBefore(lockstepSrc, '] as const satisfies readonly LockstepPackage[];', [entry]);
   writeFileSync(lockstepPath, updated, 'utf8');
   wired.push('scripts/release/lockstep-packages.ts (LOCKSTEP_PACKAGES)');
diff --git a/scripts/dist-freshness.ts b/scripts/dist-freshness.ts
index 841c373cc..64a3f7da0 100644
--- a/scripts/dist-freshness.ts
+++ b/scripts/dist-freshness.ts
@@ -13,13 +13,14 @@ import { existsSync, readdirSync } from 'node:fs';
 import { join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { hashSourceTree, readSourceStamp } from './source-hash.ts';
+import { coreSourceRoots, hashSourceTree, readSourceStamp } from './source-hash.ts';
 
 export const repoRoot = resolve(fileURLToPath(new URL('..', import.meta.url)));
 
 export interface BuildUnit {
   readonly name: string;
-  readonly sourceDir: string;
+  /** The source trees the unit's dist is built from. */
+  readonly sourceDirs: readonly string[];
   readonly distDir: string;
   /** Whether the dist directory holds an emitted entry point. */
   readonly built: boolean;
@@ -38,7 +39,7 @@ export const collectBuildUnits = (): BuildUnit[] => {
   const units: BuildUnit[] = [
     {
       name: '@codexo/exojs',
-      sourceDir: join(repoRoot, 'src'),
+      sourceDirs: coreSourceRoots(repoRoot),
       distDir: join(repoRoot, 'dist'),
       built: existsSync(join(repoRoot, 'dist', 'esm', 'index.js')),
     },
@@ -58,7 +59,7 @@ export const collectBuildUnits = (): BuildUnit[] => {
       continue;
     }
 
-    units.push({ name: `@codexo/${entry.name}`, sourceDir, distDir, built: existsSync(join(distDir, 'esm', 'index.js')) });
+    units.push({ name: `@codexo/${entry.name}`, sourceDirs: [sourceDir], distDir, built: existsSync(join(distDir, 'esm', 'index.js')) });
   }
 
   return units;
@@ -86,8 +87,9 @@ export const checkFreshness = (units: readonly BuildUnit[] = collectBuildUnits()
 
     if (recorded === null) {
       stale.push(`${unit.name}: ${relative(repoRoot, unit.distDir)} carries no source stamp (built before stamps existed, or not at all)`);
-    } else if (recorded !== hashSourceTree(unit.sourceDir)) {
-      stale.push(`${unit.name}: ${relative(repoRoot, unit.sourceDir)} changed since ${relative(repoRoot, unit.distDir)} was built`);
+    } else if (recorded !== hashSourceTree(unit.sourceDirs)) {
+      const sources = unit.sourceDirs.map(dir => relative(repoRoot, dir).replaceAll('\\', '/')).join(', ');
+      stale.push(`${unit.name}: ${sources} changed since ${relative(repoRoot, unit.distDir)} was built`);
     }
   }
 
diff --git a/scripts/exo-full.entry.ts b/scripts/exo-full.entry.ts
deleted file mode 100644
index 029324f18..000000000
--- a/scripts/exo-full.entry.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-// Full-bundle entry - bundles core + all extension packages into a single IIFE.
-// Global name: Exo (i.e. window.Exo after a <script> tag).
-//
-// Extension packages that re-export tilemap runtime classes (tiled, ldtk) are
-// listed with explicit named exports only, so that the tilemap runtime symbols
-// appear exactly once in the bundle (from exojs-tilemap below).
-
-// ── Core ──────────────────────────────────────────────────────────────────────
-export * from '@codexo/exojs';
-
-// ── Particles ──────────────────────────────────────────────────────────────────
-export * from '@codexo/exojs-particles';
-
-// ── Audio FX ──────────────────────────────────────────────────────────────────
-export * from '@codexo/exojs-audio-fx';
-
-// ── Tilemap (base) - value exports only. The package's object-layer
-// `TextStyle` interface collides with core's runtime `TextStyle` class, while
-// type-only exports do not exist on the IIFE global. Tiled + LDtk also
-// re-export these runtime symbols, so import them exactly once here. ──────────
-export {
-  autoTile,
-  buildTileCollisionGeometry,
-  ChunkStreamer,
-  createSampledChunkSource,
-  createWorkerSampledChunkSource,
-  ImageLayer,
-  ImageLayerNode,
-  MapLevelRuntime,
-  MapLevelSide,
-  mapObjectDescriptor,
-  mapObjectDescriptors,
-  MapObjectSpawner,
-  MapSpawnError,
-  MapSpawnSession,
-  MapWorld,
-  MapWorldRuntime,
-  ObjectKind,
-  ObjectLayer,
-  packTile,
-  refreshCell,
-  TILE_TRANSFORM_IDENTITY,
-  TileAnimator,
-  TileLayer,
-  TileLayerNode,
-  TileMap,
-  TileMapBand,
-  tilemapExtension,
-  TileMapNode,
-  TileMapView,
-  TileProjection,
-  TilePropertyKind,
-  TileSet,
-  tileToChunkCoord,
-  tileToLocalInChunk,
-  unpackTile,
-  WangSet,
-} from '@codexo/exojs-tilemap';
-
-// ── Physics ────────────────────────────────────────────────────────────────────
-export * from '@codexo/exojs-physics';
-
-// ── Aseprite ──────────────────────────────────────────────────────────────────
-export * from '@codexo/exojs-aseprite';
-
-// ── Tiled ─────────────────────────────────────────────────────────────────────
-// Unique value exports only - tilemap runtime classes (TileMap, TileSet, ...)
-// are already exported from exojs-tilemap above. Note: TiledMap / TiledLayer /
-// TiledObjectLayer are the *parsed source model* classes (distinct from the
-// runtime TileMap / TileLayer / ObjectLayer from tilemap).
-export {
-  createTiledLayer,
-  getTiledObjectAnchorOffset,
-  resolveTiledObjectAlignment,
-  TILED_OBJECT_ALIGNMENTS,
-  tiledBuildInfo,
-  tiledExtension,
-  TiledFormatError,
-  TiledGroupLayer,
-  TiledImageLayer,
-  TiledLayer,
-  TiledMap,
-  TiledObject,
-  TiledObjectLayer,
-  TiledSourceAssetType,
-  tiledSourceType,
-  TiledTileLayer,
-  TiledTileset,
-  tiledWangSetToWangSet,
-  TileMapAssetType,
-  tileMapType,
-} from '@codexo/exojs-tiled';
-
-// ── LDtk ──────────────────────────────────────────────────────────────────────
-// Unique value exports only - tilemap runtime classes already exported above.
-export {
-  createLdtkIntGridCellSource,
-  getLdtkIntGridValueAt,
-  isLdtkFieldEnumType,
-  LDTK_FLIP_NONE,
-  LDTK_FLIP_X,
-  LDTK_FLIP_XY,
-  LDTK_FLIP_Y,
-  ldtkExtension,
-  LdtkFormatError,
-  ldtkIntGridCsvProperty,
-  ldtkIntGridValuesProperty,
-  LdtkMap,
-  LdtkMapAssetType,
-  ldtkMapType,
-  LdtkProject,
-  LdtkProjectAssetType,
-  ldtkProjectType,
-  ldtkToMapWorld,
-  ldtkToTileMap,
-} from '@codexo/exojs-ldtk';
-
-// ── Lighting ───────────────────────────────────────────────────────────────
-export * from '@codexo/exojs-lighting';
-
-// ── Pathfinding ────────────────────────────────────────────────────────────
-export * from '@codexo/exojs-pathfinding';
-
-// ── Tilemap physics bridge ────────────────────────────────────────────────────
-export { buildObjectLayerColliders, TileColliderStreamer, TilePhysicsBinding } from '@codexo/exojs-tilemap-physics';
diff --git a/scripts/generate-examples-global-dts.ts b/scripts/generate-examples-global-dts.ts
deleted file mode 100644
index 33e368515..000000000
--- a/scripts/generate-examples-global-dts.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Deterministic generator for `examples/shared/assets-global.d.ts`.
- *
- * The playground/Monaco editor injects a typed `assets` global into every
- * example runtime (no import). For hierarchical autocomplete and exact literal
- * types to work in Monaco - which loads `.d.ts` extra-libs into an isolated
- * virtual filesystem and cannot follow a relative `import type` into the
- * canonical catalog module - the global declaration must be SELF-CONTAINED:
- * the full nested object type is inlined as string/number literals.
- *
- * Source of truth: `examples/assets/assets.ts` (the canonical hierarchical
- * catalog). This module renders that object into a `.d.ts` so there is exactly
- * one place the structure is authored. `examples:sync` regenerates the file;
- * `test/examples/assets-global-dts.test.ts` fails the build on any drift.
- *
- * Run directly to (re)write the file: `tsx scripts/generate-examples-global-dts.ts`.
- */
-import { readFileSync, writeFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const INDENT = '    ';
-
-const isSafeIdentifier = (key: string): boolean => /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key);
-
-const renderKey = (key: string): string => (isSafeIdentifier(key) ? key : JSON.stringify(key));
-
-/**
- * Renders a JS value into a TypeScript type literal with exact literals:
- *   - string → the single-quoted string literal
- *   - number → the numeric literal
- *   - object → `{ readonly key: <type>; ... }` (deterministic key order = source order)
- */
-const renderType = (value: unknown, depth: number): string => {
-  if (typeof value === 'string') {
-    // Single quotes to match the engine's Prettier/style; the catalog values
-    // are plain paths with no quotes to escape.
-    return `'${value.replace(/'/g, "\\'")}'`;
-  }
-
-  if (typeof value === 'number' || typeof value === 'boolean') {
-    return String(value);
-  }
-
-  if (value && typeof value === 'object') {
-    const innerPad = INDENT.repeat(depth + 1);
-    const closePad = INDENT.repeat(depth);
-    const lines = Object.entries(value as Record<string, unknown>).map(
-      ([key, child]) => `${innerPad}readonly ${renderKey(key)}: ${renderType(child, depth + 1)};`,
-    );
-
-    return `{\n${lines.join('\n')}\n${closePad}}`;
-  }
-
-  // The catalog only contains strings, numbers, and nested objects.
-  return 'never';
-};
-
-/**
- * Renders the full self-contained `assets-global.d.ts` content for a catalog
- * object. Deterministic: identical input always yields byte-identical output
- * (LF newlines, trailing newline).
- */
-export const renderAssetsGlobalDts = (assets: Record<string, unknown>): string => {
-  const catalogType = renderType(assets, 0);
-
-  return `${[
-    '// AUTO-GENERATED by `pnpm -C site examples:sync` - DO NOT EDIT BY HAND.',
-    '// Source of truth: examples/assets/assets.ts (the canonical hierarchical catalog).',
-    '// Regenerate with `tsx scripts/generate-examples-global-dts.ts`; drift is guarded',
-    '// by test/examples/assets-global-dts.test.ts.',
-    '//',
-    '// Self-contained, importless typing for the globally-injected `assets` catalog.',
-    '// The value is installed on `globalThis`/`window` by the controlled example',
-    '// runtimes (Playground iframe, Example/Guide preview, Asset Browser, smoke',
-    '// harness, Full Release harness) BEFORE the example module evaluates. Example',
-    '// authors use it directly with full autocomplete and exact literal types - no',
-    '// import:',
-    '//',
-    '//   assets.demo.textures.particleFlame;',
-    '//   assets.demo.audio.musicLoop;',
-    '//   assets.technical.alpha.alphaEdgeStraight;',
-    '//',
-    '// It is NOT part of the engine public API and is unavailable in consumer apps.',
-    '',
-    `interface ExampleAssetCatalog ${catalogType}`,
-    '',
-    'declare global {',
-    '    const assets: ExampleAssetCatalog;',
-    '',
-    '    interface Window {',
-    '        readonly assets: ExampleAssetCatalog;',
-    '    }',
-    '}',
-    '',
-    'export {};',
-  ].join('\n')}\n`;
-};
-
-/** Repository-root-relative path of the generated declaration. */
-export const ASSETS_GLOBAL_DTS_RELATIVE = 'examples/shared/assets-global.d.ts';
-
-// Resolved lazily so importing this module under Vite/Vitest (where
-// `import.meta.url` may be a non-file URL) never throws at module-eval time.
-const assetsGlobalDtsPath = (): string => resolve(dirname(fileURLToPath(import.meta.url)), '..', ASSETS_GLOBAL_DTS_RELATIVE);
-
-/**
- * Renders the declaration for the canonical catalog and writes it to disk only
- * when the content changed (keeps mtimes stable for incremental tooling).
- * Returns `true` when the file was rewritten.
- */
-export const writeAssetsGlobalDts = async (): Promise<boolean> => {
-  // Import the canonical catalog lazily so the pure renderer above stays
-  // dependency-free and trivially unit-testable.
-  const { assets } = (await import('../examples/assets/assets.ts')) as { assets: Record<string, unknown> };
-  const next = renderAssetsGlobalDts(assets);
-  const target = assetsGlobalDtsPath();
-
-  let current: string;
-
-  try {
-    current = readFileSync(target, 'utf8');
-  } catch {
-    current = '';
-  }
-
-  if (current === next) {
-    return false;
-  }
-
-  writeFileSync(target, next, 'utf8');
-
-  return true;
-};
-
-// Allow `tsx scripts/generate-examples-global-dts.ts` to regenerate in place.
-if (import.meta.url.startsWith('file:') && fileURLToPath(import.meta.url) === resolve(process.argv[1] ?? '')) {
-  writeAssetsGlobalDts()
-    .then(changed => {
-      process.stdout.write(
-        changed
-          ? `[generate-examples-global-dts] Wrote ${ASSETS_GLOBAL_DTS_RELATIVE}\n`
-          : `[generate-examples-global-dts] ${ASSETS_GLOBAL_DTS_RELATIVE} already up to date\n`,
-      );
-    })
-    .catch((error: unknown) => {
-      process.stderr.write(`[generate-examples-global-dts] ${error instanceof Error ? error.message : String(error)}\n`);
-      process.exit(1);
-    });
-}
diff --git a/scripts/generate-examples-runtime-dts.ts b/scripts/generate-examples-runtime-dts.ts
index 8f0653cc0..cfabd8b72 100644
--- a/scripts/generate-examples-runtime-dts.ts
+++ b/scripts/generate-examples-runtime-dts.ts
@@ -10,7 +10,7 @@
  * That file used to be hand-written alongside a hand-written `runtime.js`, which
  * left the editor's view of the helper kit free to drift from the helper kit.
  * Emitting it from the implementation removes the second copy; a drift test
- * pins the committed output the same way `assets-global.d.ts` is pinned.
+ * pins the committed output.
  */
 import path from 'node:path';
 
diff --git a/scripts/glsl-loader.ts b/scripts/glsl-loader.ts
index 1230f0b83..c7d0baae5 100644
--- a/scripts/glsl-loader.ts
+++ b/scripts/glsl-loader.ts
@@ -10,8 +10,8 @@
  *     file as its source text exported as `default` (exactly like the
  *     vitest/rollup transforms).
  *
- *  2. **Workspace package specifiers.** `@codexo/exojs` and the extension packages
- *     (`@codexo/exojs-tilemap` etc.) do NOT expose a `@codexo/exojs-source` export
+ *  2. **Workspace package specifiers.** `@codexo/exojs`, its subpaths and the adapter packages
+ *     (`@codexo/exojs-tiled` etc.) do NOT expose a `@codexo/exojs-source` export
  *     condition, so `--conditions=@codexo/exojs-source` cannot redirect them to `src`;
  *     the vitest config aliases them explicitly, and so do we. Their package-
  *     internal `#*` imports still resolve to `src` via the `@codexo/exojs-source`
@@ -38,11 +38,14 @@ const packageAliases = new Map([
   ['@codexo/exojs/renderer-sdk', 'src/renderer-sdk.ts'],
   ['@codexo/exojs/debug', 'src/debug/index.ts'],
   ['@codexo/exojs', 'src/index.ts'],
-  ['@codexo/exojs-tilemap', 'packages/exojs-tilemap/src/index.ts'],
+  ['@codexo/exojs/tilemap', 'packages/exojs-tilemap/src/index.ts'],
   ['@codexo/exojs-tiled', 'packages/exojs-tiled/src/index.ts'],
-  ['@codexo/exojs-physics', 'packages/exojs-physics/src/index.ts'],
-  ['@codexo/exojs-particles', 'packages/exojs-particles/src/index.ts'],
-  ['@codexo/exojs-audio-fx', 'packages/exojs-audio-fx/src/index.ts'],
+  ['@codexo/exojs/physics', 'packages/exojs-physics/src/index.ts'],
+  ['@codexo/exojs/particles', 'packages/exojs-particles/src/index.ts'],
+  ['@codexo/exojs/audio-fx', 'packages/exojs-audio-fx/src/index.ts'],
+  ['@codexo/exojs/tilemap-physics', 'packages/exojs-tilemap-physics/src/index.ts'],
+  ['@codexo/exojs/lighting', 'packages/exojs-lighting/src/index.ts'],
+  ['@codexo/exojs/pathfinding', 'packages/exojs-pathfinding/src/index.ts'],
 ]);
 
 const SHADER_EXTENSIONS = ['.vert', '.frag', '.wgsl'];
diff --git a/scripts/lib/module-specifiers.ts b/scripts/lib/module-specifiers.ts
new file mode 100644
index 000000000..38a74c98e
--- /dev/null
+++ b/scripts/lib/module-specifiers.ts
@@ -0,0 +1,130 @@
+/**
+ * Finds and rewrites the module specifiers of a TypeScript or JavaScript file
+ * without touching anything else in it.
+ *
+ * The file is parsed, not pattern-matched, so only real module references are
+ * visited: import and export declarations, `import x = require()`, `import()`
+ * expressions and types (including `typeof import()`), the names of
+ * `declare module` blocks, `require()` / `require.resolve()` /
+ * `import.meta.resolve()`, and the module argument of the test runners' module
+ * mocks (`vi.mock()` and friends). A specifier-shaped string anywhere else - a
+ * comment, a JSDoc example, a string literal type, a URL - is left alone.
+ */
+import ts from 'typescript';
+
+export interface SpecifierOccurrence {
+  readonly specifier: string;
+  /** Offset of the opening quote. */
+  readonly start: number;
+  /** Offset just past the closing quote. */
+  readonly end: number;
+}
+
+const MOCK_RECEIVERS = new Set(['vi', 'jest']);
+const MOCK_METHODS = new Set(['mock', 'doMock', 'unmock', 'doUnmock', 'importActual', 'importMock', 'requireActual', 'requireMock']);
+
+/**
+ * The script kind a file name implies. A `.ts` file is never parsed as TSX:
+ * there `<T>(x) => x` is a JSX element, not a generic arrow function.
+ */
+export const scriptKindFor = (fileName: string): ts.ScriptKind => {
+  if (/\.tsx$/i.test(fileName)) {
+    return ts.ScriptKind.TSX;
+  }
+
+  if (/\.jsx$/i.test(fileName)) {
+    return ts.ScriptKind.JSX;
+  }
+
+  if (/\.[cm]?js$/i.test(fileName)) {
+    return ts.ScriptKind.JS;
+  }
+
+  return ts.ScriptKind.TS;
+};
+
+const literalOf = (node: ts.Node | undefined): ts.StringLiteralLike | undefined =>
+  node !== undefined && ts.isStringLiteralLike(node) ? node : undefined;
+
+const isSpecifierCall = (node: ts.CallExpression): boolean => {
+  const callee = node.expression;
+
+  if (callee.kind === ts.SyntaxKind.ImportKeyword) {
+    return true;
+  }
+
+  if (ts.isIdentifier(callee)) {
+    return callee.text === 'require';
+  }
+
+  if (!ts.isPropertyAccessExpression(callee)) {
+    return false;
+  }
+
+  const receiver = callee.expression;
+  const method = callee.name.text;
+
+  if (ts.isIdentifier(receiver)) {
+    return (receiver.text === 'require' && method === 'resolve') || (MOCK_RECEIVERS.has(receiver.text) && MOCK_METHODS.has(method));
+  }
+
+  return ts.isMetaProperty(receiver) && receiver.keywordToken === ts.SyntaxKind.ImportKeyword && method === 'resolve';
+};
+
+/** Every module specifier the file references, in source order. */
+export const findModuleSpecifiers = (fileName: string, text: string, scriptKind = scriptKindFor(fileName)): SpecifierOccurrence[] => {
+  const source = ts.createSourceFile(fileName, text, ts.ScriptTarget.Latest, false, scriptKind);
+  const found: SpecifierOccurrence[] = [];
+
+  const record = (literal: ts.StringLiteralLike | undefined): void => {
+    if (literal !== undefined) {
+      found.push({ specifier: literal.text, start: literal.getStart(source), end: literal.getEnd() });
+    }
+  };
+
+  const visit = (node: ts.Node): void => {
+    if (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) {
+      record(literalOf(node.moduleSpecifier));
+    } else if (ts.isImportEqualsDeclaration(node) && ts.isExternalModuleReference(node.moduleReference)) {
+      record(literalOf(node.moduleReference.expression));
+    } else if (ts.isImportTypeNode(node) && ts.isLiteralTypeNode(node.argument)) {
+      record(literalOf(node.argument.literal));
+    } else if (ts.isModuleDeclaration(node) && ts.isStringLiteral(node.name)) {
+      record(node.name);
+    } else if (ts.isCallExpression(node) && isSpecifierCall(node)) {
+      record(literalOf(node.arguments[0]));
+    }
+
+    ts.forEachChild(node, visit);
+  };
+
+  visit(source);
+
+  return found;
+};
+
+/**
+ * Returns `text` with each module specifier replaced by `map(specifier)`, or
+ * kept when `map` returns `undefined`. The original quote character is kept.
+ */
+export const rewriteModuleSpecifiers = (
+  fileName: string,
+  text: string,
+  map: (specifier: string) => string | undefined,
+  scriptKind = scriptKindFor(fileName),
+): string => {
+  let result = text;
+
+  for (const occurrence of findModuleSpecifiers(fileName, text, scriptKind).reverse()) {
+    const replacement = map(occurrence.specifier);
+
+    if (replacement === undefined || replacement === occurrence.specifier) {
+      continue;
+    }
+
+    const quote = text[occurrence.start];
+    result = `${result.slice(0, occurrence.start)}${quote}${replacement}${quote}${result.slice(occurrence.end)}`;
+  }
+
+  return result;
+};
diff --git a/scripts/lib/shipped-specifiers.ts b/scripts/lib/shipped-specifiers.ts
new file mode 100644
index 000000000..4179c8603
--- /dev/null
+++ b/scripts/lib/shipped-specifiers.ts
@@ -0,0 +1,186 @@
+/**
+ * How a specifier written in Core or runtime-module source resolves once the
+ * Core package is installed, expressed as a file inside `dist/esm`.
+ *
+ * Runtime modules ship inside the Core tarball, so every import a module makes
+ * of `@codexo/exojs`, of another Core subpath, or of a sibling module has to
+ * land on the very file the Core manifest exports for that specifier - that is
+ * what keeps a single Core instance under Node, bundlers and import maps. The
+ * build therefore never invents a target: it reads the Core `exports` map (and,
+ * for package-private `#` keys, the owning package's `imports` map) the way an
+ * installed consumer would, and renders the result as a relative path.
+ */
+import { readFileSync } from 'node:fs';
+import { join, relative, resolve, sep } from 'node:path';
+
+import { RUNTIME_MODULES } from '../release/lockstep-packages.ts';
+
+export type ShippedKind = 'js' | 'types';
+
+export interface ShippedModule {
+  readonly name: string;
+  readonly subpath: string;
+  /** Absolute source package directory. */
+  readonly packageDir: string;
+  /** Absolute `src` directory of the source package. */
+  readonly sourceRoot: string;
+}
+
+export interface ShippedLayout {
+  readonly repoRoot: string;
+  /** Absolute `dist/esm` directory of the Core package. */
+  readonly distEsm: string;
+  /** Absolute Core `src` directory. */
+  readonly coreSourceRoot: string;
+  readonly modules: readonly ShippedModule[];
+}
+
+interface PackageManifest {
+  readonly exports?: Record<string, unknown>;
+  readonly imports?: Record<string, unknown>;
+}
+
+const CORE_NAME = '@codexo/exojs';
+
+/** Conditions a source checkout activates so `#` keys resolve to TypeScript sources. */
+export const SOURCE_CONDITIONS: readonly string[] = ['@codexo/exojs-source', '@codexo/exojs-particles-source'];
+
+const readManifest = (dir: string): PackageManifest => JSON.parse(readFileSync(join(dir, 'package.json'), 'utf8')) as PackageManifest;
+
+const isWithin = (file: string, dir: string): boolean => {
+  const rel = relative(dir, file);
+
+  return rel !== '' && !rel.startsWith('..') && !rel.startsWith(sep) && !/^[a-zA-Z]:/.test(rel);
+};
+
+export const createShippedLayout = (repoRoot: string): ShippedLayout => ({
+  repoRoot,
+  distEsm: resolve(repoRoot, 'dist', 'esm'),
+  coreSourceRoot: resolve(repoRoot, 'src'),
+  modules: RUNTIME_MODULES.map(module => ({
+    name: module.name,
+    subpath: module.subpath,
+    packageDir: resolve(repoRoot, module.dir),
+    sourceRoot: resolve(repoRoot, module.dir, 'src'),
+  })),
+});
+
+/** The runtime module whose source tree contains `file`, if any. */
+export const moduleOfSource = (layout: ShippedLayout, file: string): ShippedModule | undefined =>
+  layout.modules.find(module => isWithin(file, module.sourceRoot));
+
+/** The runtime module whose shipped subtree contains `file` (a path under `dist/esm`), if any. */
+export const moduleOfShipped = (layout: ShippedLayout, file: string): ShippedModule | undefined =>
+  layout.modules.find(module => isWithin(file, join(layout.distEsm, module.subpath)));
+
+/**
+ * The extensionless `dist/esm` location a Core or runtime-module source file
+ * ships at, or `undefined` for a file outside every shipped source tree.
+ */
+export const shippedPathForSource = (layout: ShippedLayout, sourceFile: string): string | undefined => {
+  const withoutExtension = sourceFile.replace(/\.(?:d\.)?[cm]?tsx?$/, '');
+  const module = moduleOfSource(layout, sourceFile);
+
+  if (module) {
+    return join(layout.distEsm, module.subpath, relative(module.sourceRoot, withoutExtension));
+  }
+
+  if (isWithin(sourceFile, layout.coreSourceRoot)) {
+    return join(layout.distEsm, relative(layout.coreSourceRoot, withoutExtension));
+  }
+
+  return undefined;
+};
+
+const pickTarget = (entry: unknown, conditions: readonly string[]): string | undefined => {
+  if (typeof entry === 'string') {
+    return entry;
+  }
+
+  if (entry === null || typeof entry !== 'object') {
+    return undefined;
+  }
+
+  for (const [condition, value] of Object.entries(entry as Record<string, unknown>)) {
+    if (conditions.includes(condition)) {
+      const target = pickTarget(value, conditions);
+
+      if (target !== undefined) {
+        return target;
+      }
+    }
+  }
+
+  return undefined;
+};
+
+/**
+ * Resolves `@codexo/exojs` or `@codexo/exojs/<subpath>` through the Core
+ * manifest's `exports`, returning the absolute target for the requested kind,
+ * or `undefined` when the specifier is not a Core specifier. Throws for a Core
+ * specifier the manifest does not export for that kind (a value import of the
+ * types-only `./extensions`, a misspelt subpath): either would ship a dangling
+ * import.
+ */
+export const resolveCoreExport = (layout: ShippedLayout, specifier: string, kind: ShippedKind): string | undefined => {
+  if (specifier !== CORE_NAME && !specifier.startsWith(`${CORE_NAME}/`)) {
+    return undefined;
+  }
+
+  const key = specifier === CORE_NAME ? '.' : `./${specifier.slice(CORE_NAME.length + 1)}`;
+  const entry = readManifest(layout.repoRoot).exports?.[key];
+  const target = pickTarget(entry, kind === 'types' ? ['types'] : ['import', 'default']);
+
+  if (target === undefined) {
+    throw new Error(`"${specifier}" has no ${kind === 'types' ? 'types' : 'runtime'} target in the Core package exports.`);
+  }
+
+  return resolve(layout.repoRoot, target);
+};
+
+/**
+ * Resolves a package-private `#` specifier through the `imports` map of the
+ * package at `packageDir`, under the source conditions, to the absolute source
+ * file it names. Supports exact keys and single-`*` patterns, exact keys first,
+ * as Node does.
+ */
+export const resolvePackageImportSource = (packageDir: string, specifier: string): string | undefined => {
+  const imports = readManifest(packageDir).imports ?? {};
+  const exact = imports[specifier];
+
+  if (exact !== undefined) {
+    const target = pickTarget(exact, SOURCE_CONDITIONS);
+
+    return target === undefined ? undefined : resolve(packageDir, target);
+  }
+
+  for (const [key, entry] of Object.entries(imports)) {
+    const star = key.indexOf('*');
+
+    if (star === -1) {
+      continue;
+    }
+
+    const prefix = key.slice(0, star);
+    const suffix = key.slice(star + 1);
+
+    if (!specifier.startsWith(prefix) || !specifier.endsWith(suffix) || specifier.length < key.length - 1) {
+      continue;
+    }
+
+    const target = pickTarget(entry, SOURCE_CONDITIONS);
+
+    if (target !== undefined) {
+      return resolve(packageDir, target.replace('*', specifier.slice(prefix.length, specifier.length - suffix.length)));
+    }
+  }
+
+  return undefined;
+};
+
+/** A relative module specifier from `fromFile` to `toFile`, in POSIX form with a leading `./` or `../`. */
+export const relativeSpecifier = (fromFile: string, toFile: string): string => {
+  const rel = relative(join(fromFile, '..'), toFile).replaceAll('\\', '/');
+
+  return rel.startsWith('.') ? rel : `./${rel}`;
+};
diff --git a/scripts/pages/archive-safety.ts b/scripts/pages/archive-safety.ts
new file mode 100644
index 000000000..0a659d642
--- /dev/null
+++ b/scripts/pages/archive-safety.ts
@@ -0,0 +1,556 @@
+import { lstatSync, mkdirSync, readdirSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve, sep } from 'node:path';
+import { crc32, inflateRawSync } from 'node:zlib';
+
+import { validateSitePath } from './site-manifest.ts';
+
+/**
+ * Inspection and extraction of the archives the Pages publisher handles: the
+ * zip of a channel candidate artifact and the tar inside a Pages artifact.
+ *
+ * Every entry is inspected before anything is written, and extraction trusts
+ * nothing it inspected: sizes and checksums are re-checked while inflating, so
+ * a header that lies about its size cannot unpack past the budget.
+ *
+ * Dependency-free and erasable TypeScript, run by the publisher with plain
+ * `node`.
+ */
+
+export type ArchiveEntryType = 'file' | 'directory' | 'symlink' | 'hardlink' | 'special';
+
+export interface ArchiveEntry {
+  /** Normalized root-relative path, without a trailing slash. */
+  name: string;
+  type: ArchiveEntryType;
+  /** Declared unpacked size. */
+  size: number;
+}
+
+export interface ZipEntry extends ArchiveEntry {
+  method: number;
+  compressedSize: number;
+  crc32: number;
+  encrypted: boolean;
+  localHeaderOffset: number;
+  rawName: Buffer;
+}
+
+export interface TarEntry extends ArchiveEntry {
+  dataOffset: number;
+}
+
+export interface ArchiveLimits {
+  /** Largest total of declared unpacked sizes accepted. */
+  maxUnpackedBytes: number;
+  /** Largest number of entries accepted. */
+  maxEntries?: number;
+}
+
+const DEFAULT_MAX_ENTRIES = 250_000;
+
+export class ArchiveSafetyError extends Error {
+  readonly problems: readonly string[];
+
+  constructor(problems: readonly string[]) {
+    super(`[archive-safety] archive refused:\n  ${problems.join('\n  ')}`);
+    this.name = 'ArchiveSafetyError';
+    this.problems = problems;
+  }
+}
+
+const S_IFMT = 0o170000;
+
+const typeFromMode = (mode: number): ArchiveEntryType | null => {
+  switch (mode & S_IFMT) {
+    case 0:
+      return null;
+    case 0o100000:
+      return 'file';
+    case 0o040000:
+      return 'directory';
+    case 0o120000:
+      return 'symlink';
+    default:
+      return 'special';
+  }
+};
+
+const ZIP_END = 0x06054b50;
+const ZIP64_END = 0x06064b50;
+const ZIP64_LOCATOR = 0x07064b50;
+const ZIP_CENTRAL = 0x02014b50;
+const ZIP_LOCAL = 0x04034b50;
+const U16_MAX = 0xffff;
+const U32_MAX = 0xffffffff;
+
+const readU64 = (buffer: Buffer, offset: number): number => {
+  const value = buffer.readBigUInt64LE(offset);
+
+  if (value > BigInt(Number.MAX_SAFE_INTEGER)) {
+    throw new ArchiveSafetyError([`zip field at ${offset} exceeds the safe integer range`]);
+  }
+
+  return Number(value);
+};
+
+const findZipEnd = (zip: Buffer): number => {
+  const lowest = Math.max(0, zip.length - 22 - U16_MAX);
+
+  for (let offset = zip.length - 22; offset >= lowest; offset--) {
+    if (zip.readUInt32LE(offset) === ZIP_END) {
+      return offset;
+    }
+  }
+
+  throw new ArchiveSafetyError(['not a zip archive: no end of central directory record']);
+};
+
+/** The central directory of `zip`, with entry types and normalized names. */
+export const readZipEntries = (zip: Buffer): ZipEntry[] => {
+  if (zip.length < 22) {
+    throw new ArchiveSafetyError(['not a zip archive: too short']);
+  }
+
+  const end = findZipEnd(zip);
+  let count = zip.readUInt16LE(end + 10);
+  let directorySize = zip.readUInt32LE(end + 12);
+  let directoryOffset = zip.readUInt32LE(end + 16);
+
+  if (count === U16_MAX || directorySize === U32_MAX || directoryOffset === U32_MAX) {
+    const locator = end - 20;
+
+    if (locator < 0 || zip.readUInt32LE(locator) !== ZIP64_LOCATOR) {
+      throw new ArchiveSafetyError(['zip64 archive without a zip64 end locator']);
+    }
+
+    const record = readU64(zip, locator + 8);
+
+    if (record + 56 > zip.length || zip.readUInt32LE(record) !== ZIP64_END) {
+      throw new ArchiveSafetyError(['zip64 end record missing']);
+    }
+
+    count = readU64(zip, record + 32);
+    directorySize = readU64(zip, record + 40);
+    directoryOffset = readU64(zip, record + 48);
+  }
+
+  if (directoryOffset + directorySize > zip.length) {
+    throw new ArchiveSafetyError(['zip central directory lies outside the archive']);
+  }
+
+  const entries: ZipEntry[] = [];
+  let offset = directoryOffset;
+
+  for (let index = 0; index < count; index++) {
+    if (offset + 46 > zip.length || zip.readUInt32LE(offset) !== ZIP_CENTRAL) {
+      throw new ArchiveSafetyError([`zip central directory entry ${index} is corrupt`]);
+    }
+
+    const madeBy = zip.readUInt16LE(offset + 4) >> 8;
+    const flags = zip.readUInt16LE(offset + 8);
+    const method = zip.readUInt16LE(offset + 10);
+    const crc = zip.readUInt32LE(offset + 16);
+    let compressedSize = zip.readUInt32LE(offset + 20);
+    let size = zip.readUInt32LE(offset + 24);
+    const nameLength = zip.readUInt16LE(offset + 28);
+    const extraLength = zip.readUInt16LE(offset + 30);
+    const commentLength = zip.readUInt16LE(offset + 32);
+    const external = zip.readUInt32LE(offset + 38);
+    let localHeaderOffset = zip.readUInt32LE(offset + 42);
+    const rawName = zip.subarray(offset + 46, offset + 46 + nameLength);
+    const extra = zip.subarray(offset + 46 + nameLength, offset + 46 + nameLength + extraLength);
+
+    if (size === U32_MAX || compressedSize === U32_MAX || localHeaderOffset === U32_MAX) {
+      for (let cursor = 0; cursor + 4 <= extra.length;) {
+        const id = extra.readUInt16LE(cursor);
+        const length = extra.readUInt16LE(cursor + 2);
+
+        if (id === 0x0001) {
+          let field = cursor + 4;
+
+          if (size === U32_MAX) {
+            size = readU64(extra, field);
+            field += 8;
+          }
+
+          if (compressedSize === U32_MAX) {
+            compressedSize = readU64(extra, field);
+            field += 8;
+          }
+
+          if (localHeaderOffset === U32_MAX) {
+            localHeaderOffset = readU64(extra, field);
+          }
+        }
+
+        cursor += 4 + length;
+      }
+    }
+
+    const decoded = rawName.toString('utf8');
+    const isDirectoryName = decoded.endsWith('/');
+    const modeType = madeBy === 3 ? typeFromMode(external >>> 16) : null;
+    const type: ArchiveEntryType = modeType ?? ((external & 0x10) !== 0 || isDirectoryName ? 'directory' : 'file');
+
+    entries.push({
+      name: isDirectoryName ? decoded.slice(0, -1) : decoded,
+      type: type === 'file' && isDirectoryName ? 'directory' : type,
+      size,
+      method,
+      compressedSize,
+      crc32: crc,
+      encrypted: (flags & 0x0001) !== 0,
+      localHeaderOffset,
+      rawName,
+    });
+    offset += 46 + nameLength + extraLength + commentLength;
+  }
+
+  return entries;
+};
+
+const parseTarNumber = (field: Buffer): number => {
+  if ((field[0]! & 0x80) !== 0) {
+    let value = 0;
+
+    for (let index = 1; index < field.length; index++) {
+      value = value * 256 + field[index]!;
+    }
+
+    return value;
+  }
+
+  const text = field
+    .toString('ascii')
+    .replace(/[\0 ]+$/, '')
+    .trim();
+
+  return text === '' ? 0 : Number.parseInt(text, 8);
+};
+
+const tarString = (field: Buffer): string => {
+  const end = field.indexOf(0);
+
+  return field.subarray(0, end === -1 ? field.length : end).toString('utf8');
+};
+
+const parsePax = (data: Buffer): Record<string, string> => {
+  const records: Record<string, string> = {};
+  let cursor = 0;
+
+  while (cursor < data.length) {
+    const space = data.indexOf(0x20, cursor);
+    const length = Number.parseInt(data.subarray(cursor, space).toString('ascii'), 10);
+
+    if (space === -1 || !Number.isFinite(length) || length <= 0 || cursor + length > data.length) {
+      throw new ArchiveSafetyError(['corrupt pax extended header']);
+    }
+
+    const record = data.subarray(space + 1, cursor + length - 1).toString('utf8');
+    const equals = record.indexOf('=');
+
+    if (equals > 0) {
+      records[record.slice(0, equals)] = record.slice(equals + 1);
+    }
+
+    cursor += length;
+  }
+
+  return records;
+};
+
+const normalizeTarName = (name: string): string => {
+  let normalized = name;
+
+  while (normalized.startsWith('./')) {
+    normalized = normalized.slice(2);
+  }
+
+  return normalized.endsWith('/') ? normalized.slice(0, -1) : normalized;
+};
+
+/** The members of a ustar/pax/GNU tar, without the `./` root entry. */
+export const readTarEntries = (tar: Buffer): TarEntry[] => {
+  const entries: TarEntry[] = [];
+  let offset = 0;
+  let pending: Record<string, string> = {};
+  let longName: string | null = null;
+
+  while (offset + 512 <= tar.length) {
+    const header = tar.subarray(offset, offset + 512);
+
+    if (header.every(byte => byte === 0)) {
+      return entries;
+    }
+
+    let sum = 0;
+
+    for (let index = 0; index < 512; index++) {
+      sum += index >= 148 && index < 156 ? 0x20 : header[index]!;
+    }
+
+    if (sum !== parseTarNumber(header.subarray(148, 156))) {
+      throw new ArchiveSafetyError([`tar header at ${offset} has a bad checksum`]);
+    }
+
+    const flag = String.fromCharCode(header[156]!);
+    let size = parseTarNumber(header.subarray(124, 136));
+    const dataOffset = offset + 512;
+
+    if (dataOffset + size > tar.length) {
+      throw new ArchiveSafetyError([`tar member at ${offset} is truncated`]);
+    }
+
+    const data = tar.subarray(dataOffset, dataOffset + size);
+    offset = dataOffset + Math.ceil(size / 512) * 512;
+
+    if (flag === 'x') {
+      pending = { ...pending, ...parsePax(data) };
+      continue;
+    }
+
+    if (flag === 'g') {
+      continue;
+    }
+
+    if (flag === 'L') {
+      longName = tarString(data);
+      continue;
+    }
+
+    if (flag === 'K') {
+      continue;
+    }
+
+    const magic = header.subarray(257, 262).toString('ascii');
+    const prefix = magic === 'ustar' ? tarString(header.subarray(345, 500)) : '';
+    const baseName = tarString(header.subarray(0, 100));
+    const name = pending['path'] ?? longName ?? (prefix === '' ? baseName : `${prefix}/${baseName}`);
+
+    if (pending['size'] !== undefined) {
+      size = Number.parseInt(pending['size'], 10);
+    }
+
+    pending = {};
+    longName = null;
+
+    const type: ArchiveEntryType =
+      flag === '0' || flag === '\0'
+        ? 'file'
+        : flag === '5'
+          ? 'directory'
+          : flag === '2'
+            ? 'symlink'
+            : flag === '1'
+              ? 'hardlink'
+              : 'special';
+    const normalized = normalizeTarName(name);
+
+    if (normalized === '' || normalized === '.') {
+      continue;
+    }
+
+    entries.push({ name: normalized, type, size: type === 'file' ? size : 0, dataOffset });
+  }
+
+  throw new ArchiveSafetyError(['tar archive ends without its end-of-archive blocks']);
+};
+
+/** Every reason the listed entries may not be unpacked; empty when they may. */
+export const checkArchiveEntries = (entries: readonly ArchiveEntry[], limits: ArchiveLimits): string[] => {
+  const problems: string[] = [];
+  const seen = new Set<string>();
+  let total = 0;
+
+  if (entries.length > (limits.maxEntries ?? DEFAULT_MAX_ENTRIES)) {
+    problems.push(`${entries.length} entries exceed the limit of ${limits.maxEntries ?? DEFAULT_MAX_ENTRIES}`);
+  }
+
+  for (const entry of entries) {
+    const pathProblem = validateSitePath(entry.name);
+
+    if (pathProblem !== null) {
+      problems.push(`unsafe path: ${pathProblem}`);
+      continue;
+    }
+
+    if (seen.has(entry.name)) {
+      problems.push(`duplicate entry ${entry.name}`);
+    }
+
+    seen.add(entry.name);
+
+    if (entry.type === 'symlink') {
+      problems.push(`symlink entry ${entry.name}`);
+    } else if (entry.type === 'hardlink') {
+      problems.push(`hardlink entry ${entry.name}`);
+    } else if (entry.type === 'special') {
+      problems.push(`special file entry ${entry.name}`);
+    }
+
+    const zip = entry as Partial<ZipEntry>;
+
+    if (zip.encrypted) {
+      problems.push(`encrypted entry ${entry.name}`);
+    }
+
+    if (zip.method !== undefined && entry.type === 'file' && zip.method !== 0 && zip.method !== 8) {
+      problems.push(`entry ${entry.name} uses unsupported compression method ${zip.method}`);
+    }
+
+    total += entry.type === 'file' ? entry.size : 0;
+  }
+
+  if (total > limits.maxUnpackedBytes) {
+    problems.push(`declared unpacked size ${total} exceeds the budget of ${limits.maxUnpackedBytes} bytes`);
+  }
+
+  return problems;
+};
+
+const assertSafe = (entries: readonly ArchiveEntry[], limits: ArchiveLimits): void => {
+  const problems = checkArchiveEntries(entries, limits);
+
+  if (problems.length > 0) {
+    throw new ArchiveSafetyError(problems);
+  }
+};
+
+const inflateZipEntry = (zip: Buffer, entry: ZipEntry): Buffer => {
+  const local = entry.localHeaderOffset;
+
+  if (local + 30 > zip.length || zip.readUInt32LE(local) !== ZIP_LOCAL) {
+    throw new ArchiveSafetyError([`local header of ${entry.name} is corrupt`]);
+  }
+
+  const nameLength = zip.readUInt16LE(local + 26);
+  const extraLength = zip.readUInt16LE(local + 28);
+
+  if (!zip.subarray(local + 30, local + 30 + nameLength).equals(entry.rawName)) {
+    throw new ArchiveSafetyError([`local header of ${entry.name} names a different file`]);
+  }
+
+  const start = local + 30 + nameLength + extraLength;
+
+  if (start + entry.compressedSize > zip.length) {
+    throw new ArchiveSafetyError([`data of ${entry.name} lies outside the archive`]);
+  }
+
+  const data = zip.subarray(start, start + entry.compressedSize);
+  let output: Buffer;
+
+  if (entry.method === 0) {
+    output = data;
+  } else {
+    try {
+      output = inflateRawSync(data, { maxOutputLength: Math.max(1, entry.size) });
+    } catch {
+      throw new ArchiveSafetyError([`entry ${entry.name} inflates past its declared size of ${entry.size} bytes or is corrupt`]);
+    }
+  }
+
+  if (output.length !== entry.size) {
+    throw new ArchiveSafetyError([`entry ${entry.name} unpacks to ${output.length} bytes, not its declared size of ${entry.size}`]);
+  }
+
+  if (crc32(output) !== entry.crc32) {
+    throw new ArchiveSafetyError([`entry ${entry.name} fails its CRC-32 check`]);
+  }
+
+  return output;
+};
+
+const insideDestination = (dest: string, name: string): string => {
+  const root = resolve(dest);
+  const target = resolve(root, ...name.split('/'));
+
+  if (!target.startsWith(root + sep)) {
+    throw new ArchiveSafetyError([`entry ${name} resolves outside the destination`]);
+  }
+
+  return target;
+};
+
+const writeEntries = (dest: string, entries: readonly ArchiveEntry[], read: (entry: ArchiveEntry) => Buffer): void => {
+  mkdirSync(dest, { recursive: true });
+
+  for (const entry of entries) {
+    const target = insideDestination(dest, entry.name);
+
+    if (entry.type === 'directory') {
+      mkdirSync(target, { recursive: true });
+      continue;
+    }
+
+    mkdirSync(dirname(target), { recursive: true });
+    writeFileSync(target, read(entry), { flag: 'wx' });
+  }
+};
+
+/** Unpacks `zip` into `dest` after inspecting every entry. */
+export const extractZip = (zip: Buffer, dest: string, limits: ArchiveLimits): void => {
+  const entries = readZipEntries(zip);
+  assertSafe(entries, limits);
+  writeEntries(dest, entries, entry => inflateZipEntry(zip, entry as ZipEntry));
+};
+
+/** The bytes of the single file `name` in `zip`, after inspecting every entry. */
+export const readZipFile = (zip: Buffer, name: string, limits: ArchiveLimits): Buffer => {
+  const entries = readZipEntries(zip);
+  assertSafe(entries, limits);
+  const entry = entries.find(candidate => candidate.name === name && candidate.type === 'file');
+
+  if (entry === undefined) {
+    throw new ArchiveSafetyError([`archive has no file ${name}`]);
+  }
+
+  return inflateZipEntry(zip, entry);
+};
+
+/** Unpacks `tar` into `dest` after inspecting every member. */
+export const extractTar = (tar: Buffer, dest: string, limits: ArchiveLimits): void => {
+  const entries = readTarEntries(tar);
+  assertSafe(entries, limits);
+  writeEntries(dest, entries, entry => {
+    const member = entry as TarEntry;
+
+    return tar.subarray(member.dataOffset, member.dataOffset + member.size);
+  });
+};
+
+/**
+ * Every entry below `root` the Pages artifact must not contain: a symbolic
+ * link, a hardlinked file, a special file or a name that is not a site path.
+ */
+export const checkTreeSafety = (root: string): string[] => {
+  const problems: string[] = [];
+
+  const visit = (directory: string, prefix: string): void => {
+    for (const name of readdirSync(directory)) {
+      const rel = prefix === '' ? name : `${prefix}/${name}`;
+      const pathProblem = validateSitePath(rel);
+
+      if (pathProblem !== null) {
+        problems.push(`unsafe path: ${pathProblem}`);
+        continue;
+      }
+
+      const abs = join(directory, name);
+      const stats = lstatSync(abs);
+
+      if (stats.isSymbolicLink()) {
+        problems.push(`symlink ${rel}`);
+      } else if (stats.isDirectory()) {
+        visit(abs, rel);
+      } else if (!stats.isFile()) {
+        problems.push(`special file ${rel}`);
+      } else if (stats.nlink > 1) {
+        problems.push(`hardlink ${rel} (${stats.nlink} links)`);
+      }
+    }
+  };
+
+  visit(root, '');
+
+  return problems;
+};
diff --git a/scripts/pages/channel-artifact.ts b/scripts/pages/channel-artifact.ts
new file mode 100644
index 000000000..f1d2a402c
--- /dev/null
+++ b/scripts/pages/channel-artifact.ts
@@ -0,0 +1,161 @@
+import { createHash } from 'node:crypto';
+import { pathToFileURL } from 'node:url';
+
+import { checkTreeSafety, extractZip } from './archive-safety.ts';
+import { evaluateSiteSize, SITE_SIZE_REFUSE_BYTES } from './site-budget.ts';
+import { SITE_CHANNEL_BASE, SITE_CHANNELS, type SiteChannel } from './site-channel.ts';
+import { readSiteBuildManifest, SITE_BUILD_FILE, type SiteBuildManifest, verifySiteTree } from './site-manifest.ts';
+
+/**
+ * One channel candidate: the zip of a built site tree with its
+ * `site-build.json`, uploaded by CI or Release as `site-<channel>-<sha>-<attempt>`.
+ *
+ * Dependency-free and erasable TypeScript, run by CI after the site build and
+ * by the publisher with plain `node`.
+ */
+
+const CANDIDATE_NAME = /^site-(stable|next)-([0-9a-f]{40})-([1-9][0-9]{0,3})$/;
+
+/** The artifact name a run uploads its channel tree under. */
+export const candidateArtifactName = (channel: SiteChannel, sha: string, attempt: number): string => `site-${channel}-${sha}-${attempt}`;
+
+export const parseCandidateArtifactName = (name: string): { channel: SiteChannel; sha: string; attempt: number } | null => {
+  const match = CANDIDATE_NAME.exec(name);
+
+  return match === null ? null : { channel: match[1] as SiteChannel, sha: match[2]!, attempt: Number(match[3]) };
+};
+
+/** Why `bytes` do not match the `sha256:<hex>` digest GitHub reported, or `null`. */
+export const verifyDigest = (bytes: Buffer, digest: string): string | null => {
+  if (!/^sha256:[0-9a-f]{64}$/.test(digest)) {
+    return `artifact digest ${JSON.stringify(digest)} is not a sha256 digest`;
+  }
+
+  const actual = `sha256:${createHash('sha256').update(bytes).digest('hex')}`;
+
+  return actual === digest ? null : `artifact digest mismatch: GitHub reported ${digest}, the download hashes to ${actual}`;
+};
+
+export interface ExpectedChannel {
+  channel: SiteChannel;
+  sourceSha: string;
+  /** Also require this exact content, for a snapshot that is being kept. */
+  contentHash?: string;
+}
+
+/** Checks a channel tree on disk against its manifest and the identity it must have. */
+export const verifyChannelTree = (dir: string, expected: ExpectedChannel): { problems: string[]; manifest: SiteBuildManifest | null } => {
+  let manifest: SiteBuildManifest;
+
+  try {
+    manifest = readSiteBuildManifest(dir);
+  } catch (error) {
+    return { problems: [`${SITE_BUILD_FILE}: ${error instanceof Error ? error.message : String(error)}`], manifest: null };
+  }
+
+  const problems: string[] = [];
+
+  if (manifest.channel !== expected.channel) {
+    problems.push(`channel ${manifest.channel} is not the expected ${expected.channel}`);
+  }
+
+  if (manifest.localTest) {
+    problems.push(`the tree is a local test build for ${manifest.basePath}`);
+  } else if (manifest.basePath !== SITE_CHANNEL_BASE[expected.channel]) {
+    problems.push(`basePath ${manifest.basePath} is not the ${expected.channel} base`);
+  }
+
+  if (manifest.sourceSha !== expected.sourceSha) {
+    problems.push(`sourceSha ${manifest.sourceSha} is not the run's commit ${expected.sourceSha}`);
+  }
+
+  if (expected.contentHash !== undefined && manifest.contentHash !== expected.contentHash) {
+    problems.push(`contentHash ${manifest.contentHash} is not the published ${expected.contentHash}`);
+  }
+
+  problems.push(...verifySiteTree(dir, manifest), ...checkTreeSafety(dir));
+
+  return { problems, manifest };
+};
+
+const CHANNEL_LIMITS = { maxUnpackedBytes: SITE_SIZE_REFUSE_BYTES };
+
+/**
+ * Verifies a downloaded candidate zip against its reported digest, unpacks it
+ * into `outDir` after inspecting every entry, and checks the unpacked tree.
+ * Throws on any problem.
+ */
+export const openChannelArchive = (
+  zip: Buffer,
+  options: ExpectedChannel & { digest: string; outDir: string },
+): { manifest: SiteBuildManifest } => {
+  const digestProblem = verifyDigest(zip, options.digest);
+
+  if (digestProblem !== null) {
+    throw new Error(`[channel-artifact] ${digestProblem}`);
+  }
+
+  extractZip(zip, options.outDir, CHANNEL_LIMITS);
+  const { problems, manifest } = verifyChannelTree(options.outDir, options);
+
+  if (problems.length > 0 || manifest === null) {
+    throw new Error(`[channel-artifact] ${options.channel} candidate refused:\n  ${problems.join('\n  ')}`);
+  }
+
+  return { manifest };
+};
+
+const argument = (name: string): string => {
+  const index = process.argv.indexOf(name);
+  const value = index === -1 ? undefined : process.argv[index + 1];
+
+  if (value === undefined || value.startsWith('--')) {
+    throw new Error(`[channel-artifact] missing ${name}`);
+  }
+
+  return value;
+};
+
+/**
+ * `verify --dir <tree> --channel <channel> --sha <commit>`: the check CI runs
+ * on its freshly built tree before uploading it as a candidate.
+ */
+const main = (): void => {
+  if (process.argv[2] !== 'verify') {
+    throw new Error('[channel-artifact] usage: channel-artifact.ts verify --dir <tree> --channel <stable|next> --sha <commit>');
+  }
+
+  const channel = argument('--channel');
+
+  if (!(SITE_CHANNELS as readonly string[]).includes(channel)) {
+    throw new Error(`[channel-artifact] unknown channel ${JSON.stringify(channel)}`);
+  }
+
+  const dir = argument('--dir');
+  const { problems, manifest } = verifyChannelTree(dir, { channel: channel as SiteChannel, sourceSha: argument('--sha') });
+  const budget = evaluateSiteSize(manifest?.totalBytes ?? 0);
+
+  if (budget.level === 'refuse') {
+    problems.push(`the ${channel} tree alone: ${budget.message}`);
+  } else if (budget.level === 'warn') {
+    console.log(`::warning::The ${channel} site tree alone: ${budget.message}`);
+  }
+
+  if (problems.length > 0 || manifest === null) {
+    throw new Error(`[channel-artifact] the ${channel} tree is not a publishable candidate:\n  ${problems.join('\n  ')}`);
+  }
+
+  console.log(
+    `[channel-artifact] ${channel} ${manifest.basePath} ${manifest.sourceSha} ${manifest.packageVersion}: ` +
+      `${manifest.fileCount} files, ${manifest.totalBytes} bytes, content ${manifest.contentHash}`,
+  );
+};
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  try {
+    main();
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exitCode = 1;
+  }
+}
diff --git a/scripts/pages/channels-document.ts b/scripts/pages/channels-document.ts
new file mode 100644
index 000000000..afbef284f
--- /dev/null
+++ b/scripts/pages/channels-document.ts
@@ -0,0 +1,222 @@
+import { createHash } from 'node:crypto';
+
+import { SITE_CHANNEL_BASE, type SiteChannel } from './site-channel.ts';
+import type { SiteBuildManifest } from './site-manifest.ts';
+
+/**
+ * `channels.json`: what the composed Pages site contains, written by the
+ * composer at the site root. It records, per channel, the commit, version,
+ * content hash and base of the deployed tree and the run and artifact its
+ * bytes came from.
+ *
+ * Dependency-free and erasable TypeScript, run by the publisher with plain
+ * `node`.
+ */
+
+export const CHANNELS_FILE = 'channels.json';
+
+export const CHANNEL_PATH: Readonly<Record<SiteChannel, '' | 'next/'>> = { stable: '', next: 'next/' };
+
+/** Where a channel's bytes came from, as GitHub reported it. */
+export interface ChannelSource {
+  kind: 'ci' | 'release';
+  workflowId: number;
+  runId: number;
+  runAttempt: number;
+  artifactId: number;
+  artifactName: string;
+  /** `sha256:<hex>` of the artifact zip. */
+  digest: string;
+}
+
+export interface ChannelEntry {
+  channel: SiteChannel;
+  /** Location inside the composed tree: `''` or `'next/'`. */
+  path: '' | 'next/';
+  basePath: string;
+  sourceSha: string;
+  packageVersion: string;
+  assetProfile: string;
+  createdAt: string;
+  contentHash: string;
+  fileCount: number;
+  totalBytes: number;
+  source: ChannelSource;
+}
+
+export interface ChannelsDocument {
+  schemaVersion: 1;
+  /** Identifies the pair of channel contents; equal pairings deploy nothing new. */
+  pairing: string;
+  channels: { stable: ChannelEntry; next: ChannelEntry | null };
+}
+
+interface ChannelRecord {
+  manifest: SiteBuildManifest;
+  source: ChannelSource;
+}
+
+const entryFor = (channel: SiteChannel, { manifest, source }: ChannelRecord): ChannelEntry => ({
+  channel,
+  path: CHANNEL_PATH[channel],
+  basePath: manifest.basePath,
+  sourceSha: manifest.sourceSha,
+  packageVersion: manifest.packageVersion,
+  assetProfile: manifest.assetProfile,
+  createdAt: manifest.createdAt,
+  contentHash: manifest.contentHash,
+  fileCount: manifest.fileCount,
+  totalBytes: manifest.totalBytes,
+  source,
+});
+
+export const pairingOf = (
+  stable: Pick<ChannelEntry, 'sourceSha' | 'contentHash'>,
+  next: Pick<ChannelEntry, 'sourceSha' | 'contentHash'> | null,
+): string =>
+  createHash('sha256')
+    .update(JSON.stringify([stable.sourceSha, stable.contentHash, next?.sourceSha ?? null, next?.contentHash ?? null]))
+    .digest('hex');
+
+export const buildChannelsDocument = (records: { stable: ChannelRecord; next: ChannelRecord | null }): ChannelsDocument => {
+  const stable = entryFor('stable', records.stable);
+  const next = records.next === null ? null : entryFor('next', records.next);
+
+  return { schemaVersion: 1, pairing: pairingOf(stable, next), channels: { stable, next } };
+};
+
+export const serializeChannelsDocument = (document: ChannelsDocument): string => `${JSON.stringify(document, null, 2)}\n`;
+
+const HEX64 = /^[0-9a-f]{64}$/;
+const SHA1 = /^[0-9a-f]{40}$/;
+
+const parseSource = (value: unknown, label: string, problems: string[]): ChannelSource | null => {
+  const raw = (typeof value === 'object' && value !== null ? value : {}) as Record<string, unknown>;
+
+  const integer = (key: string): number => {
+    const field = raw[key];
+
+    if (typeof field !== 'number' || !Number.isSafeInteger(field) || field <= 0) {
+      problems.push(`${label}.source.${key} is not a positive integer`);
+
+      return 0;
+    }
+
+    return field;
+  };
+
+  if (raw['kind'] !== 'ci' && raw['kind'] !== 'release') {
+    problems.push(`${label}.source.kind is not ci or release`);
+  }
+
+  if (typeof raw['artifactName'] !== 'string' || typeof raw['digest'] !== 'string' || !/^sha256:[0-9a-f]{64}$/.test(raw['digest'])) {
+    problems.push(`${label}.source needs an artifactName and a sha256 digest`);
+  }
+
+  const source: ChannelSource = {
+    kind: raw['kind'] as ChannelSource['kind'],
+    workflowId: integer('workflowId'),
+    runId: integer('runId'),
+    runAttempt: integer('runAttempt'),
+    artifactId: integer('artifactId'),
+    artifactName: raw['artifactName'] as string,
+    digest: raw['digest'] as string,
+  };
+
+  return source;
+};
+
+const parseEntry = (value: unknown, channel: SiteChannel, problems: string[]): ChannelEntry | null => {
+  if (typeof value !== 'object' || value === null) {
+    problems.push(`channels.${channel} is not an object`);
+
+    return null;
+  }
+
+  const raw = value as Record<string, unknown>;
+  const label = `channels.${channel}`;
+
+  if (raw['channel'] !== channel) {
+    problems.push(`${label}.channel is not ${channel}`);
+  }
+
+  if (raw['path'] !== CHANNEL_PATH[channel]) {
+    problems.push(`${label}.path is not ${JSON.stringify(CHANNEL_PATH[channel])}`);
+  }
+
+  if (raw['basePath'] !== SITE_CHANNEL_BASE[channel]) {
+    problems.push(`${label}.basePath is not ${SITE_CHANNEL_BASE[channel]}`);
+  }
+
+  if (typeof raw['sourceSha'] !== 'string' || !SHA1.test(raw['sourceSha'])) {
+    problems.push(`${label}.sourceSha is not a commit SHA`);
+  }
+
+  if (typeof raw['contentHash'] !== 'string' || !HEX64.test(raw['contentHash'])) {
+    problems.push(`${label}.contentHash is not a SHA-256 hex digest`);
+  }
+
+  for (const key of ['packageVersion', 'assetProfile', 'createdAt']) {
+    if (typeof raw[key] !== 'string') {
+      problems.push(`${label}.${key} is not a string`);
+    }
+  }
+
+  for (const key of ['fileCount', 'totalBytes']) {
+    if (typeof raw[key] !== 'number' || !Number.isSafeInteger(raw[key]) || (raw[key] as number) < 0) {
+      problems.push(`${label}.${key} is not a non-negative integer`);
+    }
+  }
+
+  const source = parseSource(raw['source'], label, problems);
+
+  return {
+    channel,
+    path: CHANNEL_PATH[channel],
+    basePath: raw['basePath'] as string,
+    sourceSha: raw['sourceSha'] as string,
+    packageVersion: raw['packageVersion'] as string,
+    assetProfile: raw['assetProfile'] as string,
+    createdAt: raw['createdAt'] as string,
+    contentHash: raw['contentHash'] as string,
+    fileCount: raw['fileCount'] as number,
+    totalBytes: raw['totalBytes'] as number,
+    source: source as ChannelSource,
+  };
+};
+
+/** Validates an untrusted, JSON-parsed `channels.json`; throws listing every problem. */
+export const parseChannelsDocument = (value: unknown): ChannelsDocument => {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    throw new Error(`[compose-site] ${CHANNELS_FILE} is not a JSON object`);
+  }
+
+  const raw = value as Record<string, unknown>;
+  const problems: string[] = [];
+  const channels = (typeof raw['channels'] === 'object' && raw['channels'] !== null ? raw['channels'] : {}) as Record<string, unknown>;
+
+  if (raw['schemaVersion'] !== 1) {
+    problems.push('schemaVersion is not 1');
+  }
+
+  if (typeof raw['pairing'] !== 'string' || !HEX64.test(raw['pairing'])) {
+    problems.push('pairing is not a SHA-256 hex digest');
+  }
+
+  const stable = channels['stable'] == null ? null : parseEntry(channels['stable'], 'stable', problems);
+  const next = channels['next'] == null ? null : parseEntry(channels['next'], 'next', problems);
+
+  if (stable === null) {
+    problems.push('channels.stable is missing; Stable is always published');
+  }
+
+  if (stable !== null && raw['pairing'] !== pairingOf(stable, next)) {
+    problems.push('pairing does not match the channel identities');
+  }
+
+  if (problems.length > 0) {
+    throw new Error(`[compose-site] invalid ${CHANNELS_FILE}:\n  ${problems.join('\n  ')}`);
+  }
+
+  return { schemaVersion: 1, pairing: raw['pairing'] as string, channels: { stable: stable!, next } };
+};
diff --git a/scripts/pages/compose-site.ts b/scripts/pages/compose-site.ts
new file mode 100644
index 000000000..a01e24f43
--- /dev/null
+++ b/scripts/pages/compose-site.ts
@@ -0,0 +1,444 @@
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { dirname, extname, join, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import { checkTreeSafety, extractTar, readZipFile } from './archive-safety.ts';
+import { type ExpectedChannel, openChannelArchive, verifyChannelTree, verifyDigest } from './channel-artifact.ts';
+import {
+  buildChannelsDocument,
+  CHANNELS_FILE,
+  type ChannelsDocument,
+  type ChannelSource,
+  serializeChannelsDocument,
+} from './channels-document.ts';
+import { createGitHubClient, type GitHubClient } from './github-api.ts';
+import { type ChannelPlan, parseSelection, type Transport } from './select-channels.ts';
+import { evaluateSiteSize, SITE_SIZE_REFUSE_BYTES, type SiteSizeThresholds, type SiteSizeVerdict } from './site-budget.ts';
+import { SITE_CHANNEL_BASE, type SiteChannel } from './site-channel.ts';
+import { readSiteBuildManifest, SITE_BUILD_FILE, type SiteBuildManifest, verifySiteTree } from './site-manifest.ts';
+
+export {
+  buildChannelsDocument,
+  type ChannelEntry,
+  CHANNELS_FILE,
+  type ChannelsDocument,
+  type ChannelSource,
+  pairingOf,
+  parseChannelsDocument,
+} from './channels-document.ts';
+
+/**
+ * Joins the Stable and the Next channel tree into the one tree GitHub Pages
+ * serves: Stable at the root, Next under `next/`. The composer adds
+ * `channels.json` and `.nojekyll` and nothing else, never runs or rebuilds
+ * site code, and proves that both channels arrive byte for byte.
+ *
+ * Dependency-free and erasable TypeScript, run by the publisher with plain
+ * `node` from the trusted default-branch checkout.
+ */
+
+export const NOJEKYLL_FILE = '.nojekyll';
+
+const COMPOSER_FILES = new Set([CHANNELS_FILE, NOJEKYLL_FILE]);
+
+export interface CrossChannelReference {
+  file: string;
+  url: string;
+}
+
+const URL_ATTRIBUTE = /\b(?:href|src|action|poster|content)=(["'])([^"']*)\1/g;
+
+/**
+ * URLs in the HTML of the channel tree at `dir` that point into the other
+ * channel. The bare base of the other channel is allowed: it is the explicit
+ * channel switch.
+ */
+export const findCrossChannelReferences = (dir: string, ownBase: string, otherBase: string): CrossChannelReference[] => {
+  const hits: CrossChannelReference[] = [];
+  const nested = ownBase.length > otherBase.length && ownBase.startsWith(otherBase);
+
+  const visit = (directory: string, prefix: string): void => {
+    for (const entry of readdirSync(directory, { withFileTypes: true }).sort((a, b) => (a.name < b.name ? -1 : 1))) {
+      const rel = prefix === '' ? entry.name : `${prefix}/${entry.name}`;
+      const abs = join(directory, entry.name);
+
+      if (entry.isDirectory()) {
+        visit(abs, rel);
+        continue;
+      }
+
+      if (extname(entry.name) !== '.html') {
+        continue;
+      }
+
+      for (const match of readFileSync(abs, 'utf8').matchAll(URL_ATTRIBUTE)) {
+        const url = match[2]!;
+
+        if (url.startsWith(otherBase) && url.length > otherBase.length && !(nested && url.startsWith(ownBase))) {
+          hits.push({ file: rel, url });
+        }
+      }
+    }
+  };
+
+  visit(dir, '');
+
+  return hits;
+};
+
+const treeBytes = (root: string): number => {
+  let bytes = 0;
+
+  const visit = (directory: string): void => {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+      const abs = join(directory, entry.name);
+
+      if (entry.isDirectory()) {
+        visit(abs);
+      } else {
+        bytes += statSync(abs).size;
+      }
+    }
+  };
+
+  visit(root);
+
+  return bytes;
+};
+
+const copyListed = (fromDir: string, toDir: string, manifest: SiteBuildManifest): void => {
+  for (const path of [...manifest.files.map(file => file.path), SITE_BUILD_FILE]) {
+    const target = join(toDir, ...path.split('/'));
+    mkdirSync(dirname(target), { recursive: true });
+    copyFileSync(join(fromDir, ...path.split('/')), target);
+  }
+};
+
+const isReserved = (path: string): boolean => path.startsWith('next/') || COMPOSER_FILES.has(path);
+
+export interface ComposeInput {
+  dir: string;
+  source: ChannelSource;
+}
+
+export interface ComposeOptions {
+  outDir: string;
+  stable: ComposeInput;
+  next: ComposeInput | null;
+  budget?: SiteSizeThresholds;
+}
+
+export interface ComposeReport {
+  problems: string[];
+  bytes: number;
+  budget: SiteSizeVerdict;
+  channels: ChannelsDocument | null;
+}
+
+const checkInput = (channel: SiteChannel, input: ComposeInput, problems: string[]): SiteBuildManifest | null => {
+  let manifest: SiteBuildManifest;
+
+  try {
+    manifest = readSiteBuildManifest(input.dir);
+  } catch (error) {
+    problems.push(`${channel}: ${error instanceof Error ? error.message : String(error)}`);
+
+    return null;
+  }
+
+  if (manifest.channel !== channel) {
+    problems.push(`${channel}: the tree was built for channel ${manifest.channel}`);
+  }
+
+  if (manifest.localTest) {
+    problems.push(`${channel}: the tree is a local test build for ${manifest.basePath}`);
+  } else if (manifest.basePath !== SITE_CHANNEL_BASE[channel]) {
+    problems.push(`${channel}: the tree was built for base ${manifest.basePath}, not ${SITE_CHANNEL_BASE[channel]}`);
+  }
+
+  problems.push(...verifySiteTree(input.dir, manifest).map(problem => `${channel}: ${problem}`));
+
+  return manifest;
+};
+
+/**
+ * Writes the composed tree to `outDir`, which must be empty or absent. Returns
+ * every problem found; the tree may only be uploaded when there is none.
+ */
+export const composeSite = (options: ComposeOptions): ComposeReport => {
+  const outDir = resolve(options.outDir);
+
+  if (existsSync(outDir) && readdirSync(outDir).length > 0) {
+    throw new Error(`[compose-site] the output directory ${outDir} must be empty`);
+  }
+
+  const problems: string[] = [];
+  const stable = checkInput('stable', options.stable, problems);
+  const next = options.next === null ? null : checkInput('next', options.next, problems);
+
+  for (const file of stable?.files ?? []) {
+    if (isReserved(file.path)) {
+      problems.push(`stable: ${file.path} is a reserved path of the composed site`);
+    }
+  }
+
+  const empty: ComposeReport = { problems, bytes: 0, budget: evaluateSiteSize(0, options.budget), channels: null };
+
+  if (problems.length > 0 || stable === null || (options.next !== null && next === null)) {
+    return empty;
+  }
+
+  mkdirSync(outDir, { recursive: true });
+  copyListed(options.stable.dir, outDir, stable);
+
+  if (next !== null && options.next !== null) {
+    copyListed(options.next.dir, join(outDir, 'next'), next);
+  }
+
+  const channels = buildChannelsDocument({
+    stable: { manifest: stable, source: options.stable.source },
+    next: next === null || options.next === null ? null : { manifest: next, source: options.next.source },
+  });
+  writeFileSync(join(outDir, NOJEKYLL_FILE), '');
+  writeFileSync(join(outDir, CHANNELS_FILE), serializeChannelsDocument(channels));
+
+  problems.push(...verifySiteTree(outDir, stable, { allowExtra: isReserved }).map(problem => `composed stable: ${problem}`));
+
+  if (next !== null) {
+    problems.push(...verifySiteTree(join(outDir, 'next'), next).map(problem => `composed next: ${problem}`));
+
+    for (const hit of findCrossChannelReferences(join(outDir, 'next'), SITE_CHANNEL_BASE.next, SITE_CHANNEL_BASE.stable)) {
+      problems.push(`composed next: next/${hit.file} references the Stable channel at ${hit.url}`);
+    }
+  }
+
+  for (const hit of findCrossChannelReferences(outDir, SITE_CHANNEL_BASE.stable, SITE_CHANNEL_BASE.next)) {
+    if (!hit.file.startsWith('next/')) {
+      problems.push(`composed stable: ${hit.file} references the Next channel at ${hit.url}`);
+    }
+  }
+
+  problems.push(...checkTreeSafety(outDir).map(problem => `composed tree: ${problem}`));
+
+  const bytes = treeBytes(outDir);
+  const budget = evaluateSiteSize(bytes, options.budget);
+
+  if (budget.level === 'refuse') {
+    problems.push(`composed tree: ${budget.message}; the upload is refused by the site budget`);
+  }
+
+  return { problems, bytes, budget, channels };
+};
+
+/**
+ * Copies one channel out of a composed tree into `destDir`, exactly the files
+ * its `site-build.json` lists. Throws unless the channel is intact.
+ */
+export const extractComposedChannel = (composedDir: string, path: '' | 'next/', destDir: string): SiteBuildManifest => {
+  const root = path === '' ? composedDir : join(composedDir, 'next');
+  const manifest = readSiteBuildManifest(root);
+  const problems = verifySiteTree(root, manifest, path === '' ? { allowExtra: isReserved } : {});
+
+  if (problems.length > 0) {
+    throw new Error(
+      `[compose-site] the ${path === '' ? 'stable' : 'next'} channel of the snapshot is not intact:\n  ${problems.join('\n  ')}`,
+    );
+  }
+
+  copyListed(root, destDir, manifest);
+
+  return manifest;
+};
+
+// A Pages artifact is a zip around one tar of the whole composed tree; the tar
+// adds a header block per member on top of the content budget.
+const PAGES_CONTAINER_LIMITS = { maxUnpackedBytes: SITE_SIZE_REFUSE_BYTES + 200_000_000 };
+
+export interface SnapshotCache {
+  /** Where unpacked Pages artifacts are kept, one directory per artifact id. */
+  dir: string;
+}
+
+export interface FetchedChannel {
+  dir: string;
+  manifest: SiteBuildManifest;
+  source: ChannelSource;
+  transport: string;
+}
+
+const openPagesSnapshot = async (
+  client: GitHubClient,
+  transport: Extract<Transport, { kind: 'snapshot' }>,
+  cache: SnapshotCache,
+): Promise<string> => {
+  const dir = join(cache.dir, String(transport.artifactId));
+
+  if (existsSync(dir)) {
+    return dir;
+  }
+
+  const zip = await client.download(`/repos/${client.repository}/actions/artifacts/${transport.artifactId}/zip`);
+  const digestProblem = verifyDigest(zip, transport.digest);
+
+  if (digestProblem !== null) {
+    throw new Error(`[compose-site] ${digestProblem}`);
+  }
+
+  const tar = readZipFile(zip, 'artifact.tar', PAGES_CONTAINER_LIMITS);
+  extractTar(tar, dir, PAGES_CONTAINER_LIMITS);
+
+  return dir;
+};
+
+/**
+ * Fetches the bytes one channel plan names into `dir` and proves they are the
+ * planned snapshot. A kept channel tries its transports in order and takes
+ * the first that verifies; throws when none does.
+ */
+export const fetchChannelSnapshot = async (
+  client: GitHubClient,
+  plan: ChannelPlan,
+  dir: string,
+  cache: SnapshotCache,
+): Promise<FetchedChannel> => {
+  const downloadCandidate = async (artifactId: number, digest: string, expected: ExpectedChannel): Promise<SiteBuildManifest> => {
+    const zip = await client.download(`/repos/${client.repository}/actions/artifacts/${artifactId}/zip`);
+
+    return openChannelArchive(zip, { ...expected, digest, outDir: dir }).manifest;
+  };
+
+  if (plan.action === 'absent') {
+    throw new Error(`[compose-site] ${plan.channel} is absent from the selection`);
+  }
+
+  if (plan.action === 'update') {
+    const manifest = await downloadCandidate(plan.source.artifactId, plan.source.digest, {
+      channel: plan.channel,
+      sourceSha: plan.sourceSha,
+    });
+
+    return { dir, manifest, source: plan.source, transport: `candidate ${plan.source.artifactName}` };
+  }
+
+  const failures: string[] = [];
+
+  for (const transport of plan.transports) {
+    rmSync(dir, { recursive: true, force: true });
+
+    try {
+      if (transport.kind === 'snapshot') {
+        const snapshot = await openPagesSnapshot(client, transport, cache);
+        mkdirSync(dir, { recursive: true });
+        extractComposedChannel(snapshot, transport.path, dir);
+        const { problems, manifest } = verifyChannelTree(dir, {
+          channel: plan.channel,
+          sourceSha: plan.published.sourceSha,
+          contentHash: plan.published.contentHash,
+        });
+
+        if (problems.length > 0 || manifest === null) {
+          throw new Error(problems.join('; '));
+        }
+
+        return { dir, manifest, source: plan.published.source, transport: `published snapshot of run ${transport.runId}` };
+      }
+
+      const exact = transport.kind === 'artifact';
+      const manifest = await downloadCandidate(transport.artifactId, transport.digest, {
+        channel: plan.channel,
+        sourceSha: plan.published.sourceSha,
+        ...(exact ? { contentHash: plan.published.contentHash } : {}),
+      });
+      const source: ChannelSource = exact
+        ? plan.published.source
+        : {
+            kind: 'release',
+            workflowId: transport.workflowId,
+            runId: transport.runId,
+            runAttempt: transport.runAttempt,
+            artifactId: transport.artifactId,
+            artifactName: transport.artifactName,
+            digest: transport.digest,
+          };
+
+      return { dir, manifest, source, transport: `${transport.kind} ${transport.artifactName}` };
+    } catch (error) {
+      failures.push(`${transport.kind} ${transport.artifactId}: ${error instanceof Error ? error.message : String(error)}`);
+      console.log(`::warning::${plan.channel}: ${failures.at(-1)}`);
+    }
+  }
+
+  throw new Error(`[compose-site] no trusted source of the published ${plan.channel} snapshot verified:\n  ${failures.join('\n  ')}`);
+};
+
+const argument = (name: string): string => {
+  const index = process.argv.indexOf(name);
+  const value = index === -1 ? undefined : process.argv[index + 1];
+
+  if (value === undefined || value.startsWith('--')) {
+    throw new Error(`[compose-site] missing ${name}`);
+  }
+
+  return value;
+};
+
+/**
+ * CLI for the publisher: reads the selection `select-channels.ts` wrote,
+ * fetches and verifies each channel's bytes, composes them into `--out`, and
+ * copies `channels.json` to `--channels-out` for the small provenance
+ * artifact. Exits non-zero on any problem, so nothing is uploaded.
+ */
+const main = async (): Promise<void> => {
+  const selection = parseSelection(JSON.parse(readFileSync(argument('--selection'), 'utf8')) as unknown);
+  const work = resolve(argument('--work'));
+  const outDir = argument('--out');
+  const channelsOut = argument('--channels-out');
+
+  if (!selection.deploy) {
+    throw new Error(`[compose-site] the selection deploys nothing (${selection.reason}); refusing to compose`);
+  }
+
+  const client = createGitHubClient(process.env);
+  const cache: SnapshotCache = { dir: join(work, 'snapshots') };
+  rmSync(work, { recursive: true, force: true });
+  mkdirSync(work, { recursive: true });
+
+  const fetchPlan = async (plan: ChannelPlan): Promise<ComposeInput | null> => {
+    if (plan.action === 'absent') {
+      return null;
+    }
+
+    const snapshot = await fetchChannelSnapshot(client, plan, join(work, plan.channel), cache);
+    console.log(`[compose-site] ${plan.channel}: ${plan.action} ${snapshot.manifest.sourceSha} via ${snapshot.transport}`);
+
+    return { dir: snapshot.dir, source: snapshot.source };
+  };
+
+  const stable = await fetchPlan(selection.channels.stable);
+  const next = await fetchPlan(selection.channels.next);
+
+  if (stable === null) {
+    throw new Error('[compose-site] Stable is always published; the selection has none');
+  }
+
+  const report = composeSite({ outDir, stable, next });
+
+  if (report.budget.level === 'warn') {
+    console.log(`::warning::Composed Pages tree: ${report.budget.message}`);
+  }
+
+  if (report.problems.length > 0 || report.channels === null) {
+    throw new Error(`[compose-site] the composed tree is refused:\n  ${report.problems.join('\n  ')}`);
+  }
+
+  mkdirSync(channelsOut, { recursive: true });
+  copyFileSync(join(outDir, CHANNELS_FILE), join(channelsOut, CHANNELS_FILE));
+  console.log(`[compose-site] composed ${report.bytes} bytes, pairing ${report.channels.pairing}; ${report.budget.message}`);
+};
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  main().catch((error: unknown) => {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exitCode = 1;
+  });
+}
diff --git a/scripts/pages/github-api.ts b/scripts/pages/github-api.ts
new file mode 100644
index 000000000..4df4bf256
--- /dev/null
+++ b/scripts/pages/github-api.ts
@@ -0,0 +1,90 @@
+/**
+ * The few GitHub REST calls the Pages publisher makes, with the workflow
+ * token. The token is only ever sent to the API host: an artifact download
+ * redirects to blob storage, and that request goes out without it. Errors
+ * name the status and the API path, never a header.
+ *
+ * Dependency-free and erasable TypeScript, run with plain `node`.
+ */
+
+export interface GitHubClient {
+  /** `owner/name` of the repository the workflow runs in. */
+  readonly repository: string;
+  /** GET an API path; `null` for a 404 when `allowMissing` is set. */
+  getJson<T>(path: string, options?: { allowMissing?: boolean }): Promise<T | null>;
+  /** GET an API path that answers with a redirect to a download, and return the bytes. */
+  download(path: string): Promise<Buffer>;
+}
+
+const REPOSITORY = /^[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+$/;
+
+export const createGitHubClient = (env: Readonly<Record<string, string | undefined>>): GitHubClient => {
+  const token = env['GITHUB_TOKEN'] ?? '';
+  const repository = env['GITHUB_REPOSITORY'] ?? '';
+  const apiUrl = (env['GITHUB_API_URL'] ?? 'https://api.github.com').replace(/\/+$/, '');
+
+  if (token === '') {
+    throw new Error('[github-api] GITHUB_TOKEN is not set');
+  }
+
+  if (!REPOSITORY.test(repository)) {
+    throw new Error(`[github-api] GITHUB_REPOSITORY ${JSON.stringify(repository)} is not owner/name`);
+  }
+
+  if (!apiUrl.startsWith('https://')) {
+    throw new Error('[github-api] GITHUB_API_URL must be an https URL');
+  }
+
+  const headers = {
+    Accept: 'application/vnd.github+json',
+    Authorization: `Bearer ${token}`,
+    'X-GitHub-Api-Version': '2022-11-28',
+  };
+
+  const request = (path: string, redirect: RequestRedirect): Promise<Response> => {
+    if (!path.startsWith('/')) {
+      throw new Error(`[github-api] API path must start with a slash: ${path}`);
+    }
+
+    return fetch(`${apiUrl}${path}`, { headers, redirect });
+  };
+
+  return {
+    repository,
+
+    async getJson<T>(path: string, options: { allowMissing?: boolean } = {}): Promise<T | null> {
+      const response = await request(path, 'follow');
+
+      if (response.status === 404 && options.allowMissing) {
+        return null;
+      }
+
+      if (!response.ok) {
+        throw new Error(`[github-api] GET ${path} answered ${response.status}`);
+      }
+
+      return (await response.json()) as T;
+    },
+
+    async download(path: string): Promise<Buffer> {
+      const response = await request(path, 'manual');
+      let body: Response = response;
+
+      if (response.status >= 300 && response.status < 400) {
+        const location = response.headers.get('location');
+
+        if (location === null || !location.startsWith('https://')) {
+          throw new Error(`[github-api] GET ${path} redirected without an https location`);
+        }
+
+        body = await fetch(location, { redirect: 'follow' });
+      }
+
+      if (!body.ok) {
+        throw new Error(`[github-api] download of ${path} answered ${body.status}`);
+      }
+
+      return Buffer.from(await body.arrayBuffer());
+    },
+  };
+};
diff --git a/scripts/pages/select-channels.ts b/scripts/pages/select-channels.ts
new file mode 100644
index 000000000..0e9d87f68
--- /dev/null
+++ b/scripts/pages/select-channels.ts
@@ -0,0 +1,603 @@
+import { appendFileSync, writeFileSync } from 'node:fs';
+import { pathToFileURL } from 'node:url';
+
+import { readZipFile } from './archive-safety.ts';
+import { parseCandidateArtifactName } from './channel-artifact.ts';
+import { type ChannelEntry, CHANNELS_FILE, type ChannelsDocument, type ChannelSource, parseChannelsDocument } from './channels-document.ts';
+import { createGitHubClient, type GitHubClient } from './github-api.ts';
+import { SITE_CHANNEL_BRANCH, SITE_CHANNELS, type SiteChannel } from './site-channel.ts';
+
+/**
+ * Decides what the Pages publisher deploys, from GitHub's own metadata.
+ *
+ * The run that triggered the publisher is only a wake-up call. Every start
+ * re-decides both channels: each gets the newest qualified candidate on its
+ * branch's current history, or keeps the snapshot that is already published.
+ * A queued or re-run event can therefore neither roll a channel back nor
+ * drop the other channel's update.
+ *
+ * Dependency-free and erasable TypeScript, run by the publisher with plain
+ * `node` from the trusted default-branch checkout.
+ */
+
+export const CI_WORKFLOW_PATH = '.github/workflows/ci.yml';
+export const RELEASE_WORKFLOW_PATH = '.github/workflows/release.yml';
+
+/** The small artifact a successful publisher run leaves its `channels.json` in. */
+export const channelsArtifactName = (runId: number): string => `pages-channels-${runId}`;
+
+export const PAGES_ARTIFACT_NAME = 'github-pages';
+
+const STABLE_RELEASE_TAG = /^v\d+\.\d+\.\d+$/;
+const DIGEST = /^sha256:[0-9a-f]{64}$/;
+
+export interface WorkflowRunMeta {
+  id: number;
+  attempt: number;
+  workflowId: number;
+  workflowPath: string;
+  event: string;
+  status: string;
+  conclusion: string | null;
+  /** Branch, or tag for a tag push. */
+  headBranch: string | null;
+  headSha: string;
+  /** `owner/name` the run belongs to. */
+  repository: string;
+  /** `owner/name` its commit came from; differs for a fork. */
+  headRepository: string | null;
+}
+
+export interface ArtifactMeta {
+  id: number;
+  name: string;
+  expired: boolean;
+  digest: string | null;
+  sizeInBytes: number;
+  runId: number;
+  runHeadSha: string | null;
+}
+
+export interface CandidateRun {
+  run: WorkflowRunMeta;
+  artifacts: readonly ArtifactMeta[];
+}
+
+export interface SelectionPolicy {
+  repository: string;
+  ciWorkflowId: number;
+  releaseWorkflowId: number;
+}
+
+export interface PreviousPublication {
+  /** The successful publisher run that deployed `channels`. */
+  runId: number;
+  channels: ChannelsDocument;
+  /** That run's Pages artifact, the composed snapshot. */
+  pagesArtifact: ArtifactMeta | null;
+}
+
+export interface SelectionInput {
+  policy: SelectionPolicy;
+  trigger: WorkflowRunMeta;
+  branchHeads: Record<SiteChannel, string | null>;
+  /**
+   * Per channel, how many commits its branch head is ahead of a commit, or
+   * `null` when the commit is not on the branch's current history. A commit
+   * missing from the map counts as not on it.
+   */
+  history: Record<SiteChannel, Readonly<Record<string, number | null>>>;
+  ciRuns: readonly CandidateRun[];
+  releaseRuns: readonly CandidateRun[];
+  previous: PreviousPublication | null;
+}
+
+export type Transport =
+  | { kind: 'artifact'; runId: number; artifactId: number; artifactName: string; digest: string }
+  | { kind: 'snapshot'; runId: number; artifactId: number; digest: string; path: '' | 'next/' }
+  | { kind: 'release'; workflowId: number; runId: number; runAttempt: number; artifactId: number; artifactName: string; digest: string };
+
+export type ChannelPlan =
+  | { channel: SiteChannel; action: 'update'; sourceSha: string; source: ChannelSource; reason: string }
+  | { channel: SiteChannel; action: 'keep'; published: ChannelEntry; transports: Transport[]; reason: string }
+  | { channel: SiteChannel; action: 'absent'; reason: string };
+
+export interface Selection {
+  deploy: boolean;
+  reason: string;
+  /** Reasons nothing may be deployed. */
+  problems: string[];
+  /** Candidates passed over, for the job log. */
+  notes: string[];
+  channels: Record<SiteChannel, ChannelPlan>;
+}
+
+const sameRepository = (run: WorkflowRunMeta, policy: SelectionPolicy): boolean =>
+  run.repository === policy.repository && run.headRepository === policy.repository;
+
+const completedSuccessfully = (run: WorkflowRunMeta): boolean => run.status === 'completed' && run.conclusion === 'success';
+
+const isTrustedCiPush = (run: WorkflowRunMeta, policy: SelectionPolicy): boolean =>
+  sameRepository(run, policy) &&
+  completedSuccessfully(run) &&
+  run.workflowId === policy.ciWorkflowId &&
+  run.workflowPath === CI_WORKFLOW_PATH &&
+  run.event === 'push' &&
+  SITE_CHANNELS.some(channel => SITE_CHANNEL_BRANCH[channel] === run.headBranch);
+
+const isTrustedRelease = (run: WorkflowRunMeta, policy: SelectionPolicy): boolean =>
+  sameRepository(run, policy) &&
+  completedSuccessfully(run) &&
+  run.workflowId === policy.releaseWorkflowId &&
+  run.workflowPath === RELEASE_WORKFLOW_PATH &&
+  run.event === 'push' &&
+  STABLE_RELEASE_TAG.test(run.headBranch ?? '');
+
+interface Qualified {
+  kind: 'ci' | 'release';
+  run: WorkflowRunMeta;
+  artifact: ArtifactMeta;
+  attempt: number;
+  distance: number;
+}
+
+/**
+ * The run's own candidate for `channel`, or a reason it has none. A run that
+ * carries any site artifact contradicting its own metadata is disqualified.
+ */
+const candidateOf = (entry: CandidateRun, channel: SiteChannel): { artifact: ArtifactMeta; attempt: number } | { note: string } | null => {
+  const { run } = entry;
+  let best: { artifact: ArtifactMeta; attempt: number } | null = null;
+
+  for (const artifact of entry.artifacts) {
+    const parsed = parseCandidateArtifactName(artifact.name);
+
+    if (parsed === null) {
+      continue;
+    }
+
+    if (
+      parsed.channel !== channel ||
+      parsed.sha !== run.headSha ||
+      parsed.attempt > run.attempt ||
+      artifact.runId !== run.id ||
+      (artifact.runHeadSha !== null && artifact.runHeadSha !== run.headSha)
+    ) {
+      return { note: `run ${run.id} carries ${artifact.name}, which contradicts its ${channel} metadata at ${run.headSha}` };
+    }
+
+    if (artifact.expired || artifact.digest === null || !DIGEST.test(artifact.digest)) {
+      continue;
+    }
+
+    if (best === null || parsed.attempt > best.attempt) {
+      best = { artifact, attempt: parsed.attempt };
+    }
+  }
+
+  return best;
+};
+
+const sourceOf = (candidate: Qualified): ChannelSource => ({
+  kind: candidate.kind,
+  workflowId: candidate.run.workflowId,
+  runId: candidate.run.id,
+  runAttempt: candidate.run.attempt,
+  artifactId: candidate.artifact.id,
+  artifactName: candidate.artifact.name,
+  digest: candidate.artifact.digest!,
+});
+
+const rank = (a: Qualified, b: Qualified): number =>
+  a.distance - b.distance || (a.kind === b.kind ? 0 : a.kind === 'ci' ? -1 : 1) || b.attempt - a.attempt || b.run.id - a.run.id;
+
+const qualify = (input: SelectionInput, channel: SiteChannel, notes: string[]): Qualified[] => {
+  const qualified: Qualified[] = [];
+
+  const consider = (kind: 'ci' | 'release', entry: CandidateRun): void => {
+    const found = candidateOf(entry, channel);
+
+    if (found === null) {
+      return;
+    }
+
+    if ('note' in found) {
+      notes.push(found.note);
+
+      return;
+    }
+
+    const distance = input.history[channel][entry.run.headSha];
+
+    if (distance === null || distance === undefined) {
+      notes.push(`${channel}: ${found.artifact.name} is not on the current ${SITE_CHANNEL_BRANCH[channel]} history`);
+
+      return;
+    }
+
+    qualified.push({ kind, run: entry.run, artifact: found.artifact, attempt: found.attempt, distance });
+  };
+
+  for (const entry of input.ciRuns) {
+    if (isTrustedCiPush(entry.run, input.policy) && entry.run.headBranch === SITE_CHANNEL_BRANCH[channel]) {
+      consider('ci', entry);
+    }
+  }
+
+  if (channel === 'stable') {
+    for (const entry of input.releaseRuns) {
+      if (isTrustedRelease(entry.run, input.policy)) {
+        consider('release', entry);
+      }
+    }
+  }
+
+  return qualified.sort(rank);
+};
+
+const transportsFor = (input: SelectionInput, published: ChannelEntry, qualified: readonly Qualified[]): Transport[] => {
+  const transports: Transport[] = [];
+  const original = [...input.ciRuns, ...input.releaseRuns]
+    .filter(entry => entry.run.id === published.source.runId && sameRepository(entry.run, input.policy))
+    .flatMap(entry => entry.artifacts)
+    .find(artifact => artifact.id === published.source.artifactId && !artifact.expired && artifact.digest === published.source.digest);
+
+  if (original !== undefined) {
+    transports.push({
+      kind: 'artifact',
+      runId: original.runId,
+      artifactId: original.id,
+      artifactName: original.name,
+      digest: original.digest!,
+    });
+  }
+
+  const pages = input.previous?.pagesArtifact ?? null;
+
+  if (pages !== null && !pages.expired && pages.digest !== null && DIGEST.test(pages.digest)) {
+    transports.push({ kind: 'snapshot', runId: input.previous!.runId, artifactId: pages.id, digest: pages.digest, path: published.path });
+  }
+
+  for (const candidate of qualified) {
+    if (candidate.kind === 'release' && candidate.run.headSha === published.sourceSha && candidate.artifact.id !== original?.id) {
+      const source = sourceOf(candidate);
+      transports.push({ ...source, kind: 'release' });
+    }
+  }
+
+  return transports;
+};
+
+const planChannel = (input: SelectionInput, channel: SiteChannel, notes: string[]): ChannelPlan => {
+  const qualified = qualify(input, channel, notes);
+  const newest = qualified[0] ?? null;
+  const published = input.previous?.channels.channels[channel] ?? null;
+
+  if (published === null) {
+    if (newest === null) {
+      return { channel, action: 'absent', reason: `no qualified ${channel} candidate and none published` };
+    }
+
+    return { channel, action: 'update', sourceSha: newest.run.headSha, source: sourceOf(newest), reason: `first ${channel} publication` };
+  }
+
+  const publishedDistance = input.history[channel][published.sourceSha];
+  const publishedOnHistory = publishedDistance !== null && publishedDistance !== undefined;
+
+  if (newest !== null && (!publishedOnHistory || newest.distance < publishedDistance)) {
+    return {
+      channel,
+      action: 'update',
+      sourceSha: newest.run.headSha,
+      source: sourceOf(newest),
+      reason: publishedOnHistory
+        ? `${newest.run.headSha} is ${publishedDistance - newest.distance} commit(s) ahead of the published ${published.sourceSha}`
+        : `the published ${published.sourceSha} is no longer on the ${SITE_CHANNEL_BRANCH[channel]} history`,
+    };
+  }
+
+  return {
+    channel,
+    action: 'keep',
+    published,
+    transports: transportsFor(input, published, qualified),
+    reason: newest === null ? 'no qualified candidate' : `no candidate newer than the published ${published.sourceSha}`,
+  };
+};
+
+/** The publisher's decision for both channels; pure, see `SelectionInput`. */
+export const selectChannels = (input: SelectionInput): Selection => {
+  const notes: string[] = [];
+  const trigger = input.trigger;
+
+  if (!isTrustedCiPush(trigger, input.policy) && !isTrustedRelease(trigger, input.policy)) {
+    return {
+      deploy: false,
+      reason: `untrusted trigger: run ${trigger.id} (${trigger.event} on ${String(trigger.headBranch)}, ${String(trigger.conclusion)}) is not a successful same-repository CI push to a channel branch or a stable Release tag`,
+      problems: [],
+      notes,
+      channels: {
+        stable: { channel: 'stable', action: 'absent', reason: 'not evaluated' },
+        next: { channel: 'next', action: 'absent', reason: 'not evaluated' },
+      },
+    };
+  }
+
+  const problems: string[] = [];
+
+  for (const channel of SITE_CHANNELS) {
+    if (input.branchHeads[channel] === null) {
+      problems.push(`the ${SITE_CHANNEL_BRANCH[channel]} branch head could not be resolved`);
+    }
+  }
+
+  const channels = { stable: planChannel(input, 'stable', notes), next: planChannel(input, 'next', notes) };
+
+  if (channels.stable.action === 'absent') {
+    problems.push('no qualified stable snapshot exists; Stable is always required');
+  }
+
+  const changed = input.previous === null || SITE_CHANNELS.some(channel => channels[channel].action === 'update');
+
+  if (problems.length === 0 && !changed) {
+    return { deploy: false, reason: 'unchanged pairing: both channels are already published', problems, notes, channels };
+  }
+
+  for (const channel of SITE_CHANNELS) {
+    const plan = channels[channel];
+
+    if (plan.action === 'keep' && plan.transports.length === 0) {
+      problems.push(`${channel}: no trusted source of the published snapshot ${plan.published.sourceSha} is left`);
+    }
+  }
+
+  if (problems.length > 0) {
+    return { deploy: false, reason: 'refused', problems, notes, channels };
+  }
+
+  return { deploy: true, reason: input.previous === null ? 'first publication' : 'channel update', problems, notes, channels };
+};
+
+/** Re-reads a selection the same job wrote; throws on anything malformed. */
+export const parseSelection = (value: unknown): Selection => {
+  const raw = (typeof value === 'object' && value !== null ? value : {}) as Partial<Selection>;
+  const channels = raw.channels as Partial<Record<SiteChannel, ChannelPlan>> | undefined;
+
+  if (typeof raw.deploy !== 'boolean' || typeof raw.reason !== 'string' || channels === undefined) {
+    throw new Error('[select-channels] the selection file is malformed');
+  }
+
+  for (const channel of SITE_CHANNELS) {
+    const plan = channels[channel];
+
+    if (plan === undefined || plan.channel !== channel || !['update', 'keep', 'absent'].includes(plan.action)) {
+      throw new Error(`[select-channels] the selection has no valid ${channel} plan`);
+    }
+  }
+
+  return raw as Selection;
+};
+
+interface ApiRun {
+  id: number;
+  run_attempt: number;
+  workflow_id: number;
+  path: string;
+  event: string;
+  status: string;
+  conclusion: string | null;
+  head_branch: string | null;
+  head_sha: string;
+  repository: { full_name: string };
+  head_repository: { full_name: string } | null;
+}
+
+interface ApiArtifact {
+  id: number;
+  name: string;
+  expired: boolean;
+  digest?: string | null;
+  size_in_bytes: number;
+  workflow_run?: { id?: number; head_sha?: string } | null;
+}
+
+const toRun = (run: ApiRun): WorkflowRunMeta => ({
+  id: run.id,
+  attempt: run.run_attempt,
+  workflowId: run.workflow_id,
+  // A run's `path` may carry an `@ref` suffix for reusable or dynamic workflows.
+  workflowPath: run.path.replace(/@.*$/, ''),
+  event: run.event,
+  status: run.status,
+  conclusion: run.conclusion,
+  headBranch: run.head_branch,
+  headSha: run.head_sha,
+  repository: run.repository.full_name,
+  headRepository: run.head_repository?.full_name ?? null,
+});
+
+const toArtifact = (artifact: ApiArtifact, runId: number): ArtifactMeta => ({
+  id: artifact.id,
+  name: artifact.name,
+  expired: artifact.expired,
+  digest: artifact.digest ?? null,
+  sizeInBytes: artifact.size_in_bytes,
+  runId: artifact.workflow_run?.id ?? runId,
+  runHeadSha: artifact.workflow_run?.head_sha ?? null,
+});
+
+const listArtifacts = async (client: GitHubClient, runId: number): Promise<ArtifactMeta[]> => {
+  const page = await client.getJson<{ artifacts: ApiArtifact[] }>(
+    `/repos/${client.repository}/actions/runs/${runId}/artifacts?per_page=100`,
+  );
+
+  return (page?.artifacts ?? []).map(artifact => toArtifact(artifact, runId));
+};
+
+const listRuns = async (client: GitHubClient, workflowId: number, query: string): Promise<WorkflowRunMeta[]> => {
+  const page = await client.getJson<{ workflow_runs: ApiRun[] }>(
+    `/repos/${client.repository}/actions/workflows/${workflowId}/runs?${query}`,
+  );
+
+  return (page?.workflow_runs ?? []).map(toRun);
+};
+
+const withArtifacts = async (client: GitHubClient, runs: readonly WorkflowRunMeta[]): Promise<CandidateRun[]> =>
+  Promise.all(runs.map(async run => ({ run, artifacts: await listArtifacts(client, run.id) })));
+
+const findPrevious = async (
+  client: GitHubClient,
+  publisherWorkflowId: number,
+  currentRunId: number,
+): Promise<PreviousPublication | null> => {
+  for (const run of await listRuns(client, publisherWorkflowId, 'status=success&per_page=30')) {
+    if (run.id === currentRunId) {
+      continue;
+    }
+
+    const artifacts = await listArtifacts(client, run.id);
+    const record = artifacts.find(artifact => artifact.name === channelsArtifactName(run.id) && !artifact.expired);
+
+    if (record === undefined) {
+      continue;
+    }
+
+    const zip = await client.download(`/repos/${client.repository}/actions/artifacts/${record.id}/zip`);
+    const channels = parseChannelsDocument(
+      JSON.parse(readZipFile(zip, CHANNELS_FILE, { maxUnpackedBytes: 1_000_000 }).toString('utf8')) as unknown,
+    );
+
+    return { runId: run.id, channels, pagesArtifact: artifacts.find(artifact => artifact.name === PAGES_ARTIFACT_NAME) ?? null };
+  }
+
+  return null;
+};
+
+const distanceTo = async (client: GitHubClient, sha: string, head: string): Promise<number | null> => {
+  const comparison = await client.getJson<{ status: string; ahead_by: number }>(
+    `/repos/${client.repository}/compare/${sha}...${head}?per_page=1`,
+    {
+      allowMissing: true,
+    },
+  );
+
+  if (comparison === null) {
+    return null;
+  }
+
+  if (comparison.status === 'identical') {
+    return 0;
+  }
+
+  return comparison.status === 'ahead' ? comparison.ahead_by : null;
+};
+
+const requireEnv = (name: string): string => {
+  const value = process.env[name] ?? '';
+
+  if (value === '') {
+    throw new Error(`[select-channels] ${name} is not set`);
+  }
+
+  return value;
+};
+
+/**
+ * CLI for the publisher job: gathers the metadata `selectChannels` needs from
+ * the GitHub API, writes the selection to `--out`, and `deploy=true|false`
+ * to `$GITHUB_OUTPUT`.
+ */
+const main = async (): Promise<void> => {
+  const outIndex = process.argv.indexOf('--out');
+  const out = outIndex === -1 ? undefined : process.argv[outIndex + 1];
+
+  if (out === undefined) {
+    throw new Error('[select-channels] usage: select-channels.ts --out <selection.json>');
+  }
+
+  const client = createGitHubClient(process.env);
+  const repo = `/repos/${client.repository}`;
+  const triggerId = Number(requireEnv('TRIGGER_RUN_ID'));
+  const currentId = Number(requireEnv('GITHUB_RUN_ID'));
+  const ci = await client.getJson<{ id: number }>(`${repo}/actions/workflows/ci.yml`);
+  const release = await client.getJson<{ id: number }>(`${repo}/actions/workflows/release.yml`);
+  const current = await client.getJson<ApiRun>(`${repo}/actions/runs/${currentId}`);
+  const trigger = await client.getJson<ApiRun>(`${repo}/actions/runs/${triggerId}`);
+
+  if (ci === null || release === null || current === null || trigger === null) {
+    throw new Error('[select-channels] the workflow metadata is incomplete');
+  }
+
+  const policy: SelectionPolicy = { repository: client.repository, ciWorkflowId: ci.id, releaseWorkflowId: release.id };
+  const branchHeads = {} as Record<SiteChannel, string | null>;
+
+  for (const channel of SITE_CHANNELS) {
+    const branch = await client.getJson<{ commit: { sha: string } }>(`${repo}/branches/${SITE_CHANNEL_BRANCH[channel]}`, {
+      allowMissing: true,
+    });
+    branchHeads[channel] = branch?.commit.sha ?? null;
+  }
+
+  const ciRuns: CandidateRun[] = [];
+
+  for (const channel of SITE_CHANNELS) {
+    const runs = await listRuns(client, ci.id, `branch=${SITE_CHANNEL_BRANCH[channel]}&event=push&status=success&per_page=25`);
+    ciRuns.push(...(await withArtifacts(client, runs)));
+  }
+
+  const releaseRuns = await withArtifacts(client, await listRuns(client, release.id, 'event=push&status=success&per_page=10'));
+  const previous = await findPrevious(client, current.workflow_id, currentId);
+  const history = { stable: {}, next: {} } as Record<SiteChannel, Record<string, number | null>>;
+
+  for (const channel of SITE_CHANNELS) {
+    const head = branchHeads[channel];
+
+    if (head === null) {
+      continue;
+    }
+
+    const shas = new Set<string>([
+      ...ciRuns.filter(entry => entry.run.headBranch === SITE_CHANNEL_BRANCH[channel]).map(entry => entry.run.headSha),
+      ...(channel === 'stable' ? releaseRuns.map(entry => entry.run.headSha) : []),
+      ...(previous?.channels.channels[channel] ? [previous.channels.channels[channel].sourceSha] : []),
+    ]);
+
+    for (const sha of shas) {
+      history[channel][sha] = /^[0-9a-f]{40}$/.test(sha) ? await distanceTo(client, sha, head) : null;
+    }
+  }
+
+  const selection = selectChannels({ policy, trigger: toRun(trigger), branchHeads, history, ciRuns, releaseRuns, previous });
+  writeFileSync(out, `${JSON.stringify(selection, null, 2)}\n`);
+
+  for (const channel of SITE_CHANNELS) {
+    const plan = selection.channels[channel];
+    const detail = plan.action === 'update' ? plan.sourceSha : plan.action === 'keep' ? plan.published.sourceSha : '';
+    console.log(`[select-channels] ${channel}: ${plan.action} ${detail} (${plan.reason})`);
+  }
+
+  for (const note of selection.notes) {
+    console.log(`[select-channels] note: ${note}`);
+  }
+
+  for (const problem of selection.problems) {
+    console.log(`::error::${problem}`);
+  }
+
+  console.log(`[select-channels] deploy=${selection.deploy}: ${selection.reason}`);
+
+  if (process.env['GITHUB_OUTPUT']) {
+    appendFileSync(process.env['GITHUB_OUTPUT'], `deploy=${selection.deploy}\n`);
+  }
+
+  if (selection.problems.length > 0) {
+    process.exitCode = 1;
+  }
+};
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  main().catch((error: unknown) => {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exitCode = 1;
+  });
+}
diff --git a/scripts/pages/site-budget.ts b/scripts/pages/site-budget.ts
new file mode 100644
index 000000000..929e6d4b4
--- /dev/null
+++ b/scripts/pages/site-budget.ts
@@ -0,0 +1,38 @@
+/**
+ * The project's budget for the published Pages tree, measured in unpacked
+ * bytes on disk. GitHub supports published sites up to 1 GB; these thresholds
+ * leave headroom below that and are a project decision, not a GitHub limit.
+ * A compressed artifact size says nothing about either.
+ */
+
+export const SITE_SIZE_WARN_BYTES = 750_000_000;
+
+export const SITE_SIZE_REFUSE_BYTES = 900_000_000;
+
+export interface SiteSizeThresholds {
+  warn: number;
+  refuse: number;
+}
+
+export interface SiteSizeVerdict {
+  level: 'ok' | 'warn' | 'refuse';
+  bytes: number;
+  message: string;
+}
+
+export const evaluateSiteSize = (
+  bytes: number,
+  thresholds: SiteSizeThresholds = { warn: SITE_SIZE_WARN_BYTES, refuse: SITE_SIZE_REFUSE_BYTES },
+): SiteSizeVerdict => {
+  const amount = `${bytes.toLocaleString('en-US')} unpacked bytes`;
+
+  if (bytes >= thresholds.refuse) {
+    return { level: 'refuse', bytes, message: `${amount} reaches the ${thresholds.refuse.toLocaleString('en-US')}-byte refusal budget` };
+  }
+
+  if (bytes >= thresholds.warn) {
+    return { level: 'warn', bytes, message: `${amount} reaches the ${thresholds.warn.toLocaleString('en-US')}-byte warning budget` };
+  }
+
+  return { level: 'ok', bytes, message: `${amount}, below the ${thresholds.warn.toLocaleString('en-US')}-byte warning budget` };
+};
diff --git a/scripts/pages/site-channel.ts b/scripts/pages/site-channel.ts
new file mode 100644
index 000000000..0ff9d2625
--- /dev/null
+++ b/scripts/pages/site-channel.ts
@@ -0,0 +1,134 @@
+import { pathToFileURL } from 'node:url';
+
+/**
+ * The site channel build contract.
+ *
+ * One Pages project site carries two channels: Stable at `/ExoJS/` and Next at
+ * `/ExoJS/next/`. A build selects its channel with `EXOJS_SITE_CHANNEL` and may
+ * name its base with `EXOJS_SITE_BASE`; the base ends up in every URL the
+ * build emits, so only the canonical pairs are accepted. A custom base exists
+ * for local experiments only (`EXOJS_SITE_LOCAL_TEST=1`), is refused on CI and
+ * is recorded in `site-build.json` so the publisher can refuse it as well.
+ *
+ * Dependency-free and erasable TypeScript: the Astro config, the site build
+ * and the Pages publisher (which runs with plain `node` and no install) all
+ * read this one table.
+ */
+
+export type SiteChannel = 'stable' | 'next';
+
+export const SITE_CHANNELS: readonly SiteChannel[] = ['stable', 'next'];
+
+export const SITE_CHANNEL_BASE: Readonly<Record<SiteChannel, string>> = { stable: '/ExoJS/', next: '/ExoJS/next/' };
+
+/** The branch whose pushes publish each channel. */
+export const SITE_CHANNEL_BRANCH: Readonly<Record<SiteChannel, string>> = { stable: 'main', next: 'next' };
+
+export interface SiteChannelConfig {
+  readonly channel: SiteChannel;
+  readonly basePath: string;
+  /** A non-canonical base accepted for a local experiment; never publishable. */
+  readonly localTest: boolean;
+}
+
+type Env = Readonly<Record<string, string | undefined>>;
+
+const SEGMENT = /^[A-Za-z0-9_-][A-Za-z0-9._-]*$/;
+
+/**
+ * A base path that can be interpolated into a URL, an HTML attribute or a
+ * shell word without escaping: `/`, or `/seg/.../` of letters, digits, `.`,
+ * `_` and `-`, with no empty, `.` or `..` segment.
+ */
+export const isSafeBasePath = (value: string): boolean => {
+  if (value === '/') {
+    return true;
+  }
+
+  if (!value.startsWith('/') || !value.endsWith('/')) {
+    return false;
+  }
+
+  return value
+    .slice(1, -1)
+    .split('/')
+    .every(segment => SEGMENT.test(segment) && segment !== '.' && segment !== '..');
+};
+
+const isChannel = (value: string): value is SiteChannel => (SITE_CHANNELS as readonly string[]).includes(value);
+
+const channelForBase = (base: string): SiteChannel | null => SITE_CHANNELS.find(channel => SITE_CHANNEL_BASE[channel] === base) ?? null;
+
+/**
+ * Resolves the channel a site build targets from its environment. Unset keeps
+ * the Stable site at `/ExoJS/`. Throws on an unknown channel, a contradictory
+ * pair, or a non-canonical base outside explicit local test mode.
+ */
+export const resolveSiteChannel = (env: Env): SiteChannelConfig => {
+  const rawChannel = env['EXOJS_SITE_CHANNEL'] ?? '';
+  const rawBase = env['EXOJS_SITE_BASE'] ?? '';
+  const localTest = env['EXOJS_SITE_LOCAL_TEST'] === '1';
+
+  if (rawChannel !== '' && !isChannel(rawChannel)) {
+    throw new Error(`EXOJS_SITE_CHANNEL must be one of ${SITE_CHANNELS.join(', ')}; got ${JSON.stringify(rawChannel)}.`);
+  }
+
+  if (rawBase === '') {
+    const channel = rawChannel === '' ? 'stable' : rawChannel;
+
+    return { channel, basePath: SITE_CHANNEL_BASE[channel], localTest: false };
+  }
+
+  if (!isSafeBasePath(rawBase)) {
+    throw new Error(`EXOJS_SITE_BASE must look like /segment/.../ with safe segments; got ${JSON.stringify(rawBase)}.`);
+  }
+
+  const canonicalChannel = channelForBase(rawBase);
+
+  if (canonicalChannel !== null) {
+    if (rawChannel !== '' && rawChannel !== canonicalChannel) {
+      throw new Error(`EXOJS_SITE_BASE ${rawBase} is the ${canonicalChannel} base and contradicts EXOJS_SITE_CHANNEL=${rawChannel}.`);
+    }
+
+    return { channel: canonicalChannel, basePath: rawBase, localTest: false };
+  }
+
+  if (!localTest) {
+    throw new Error(
+      `EXOJS_SITE_BASE ${rawBase} is not a published base (${SITE_CHANNELS.map(channel => SITE_CHANNEL_BASE[channel]).join(', ')}); ` +
+        'set EXOJS_SITE_LOCAL_TEST=1 to build it for a local experiment.',
+    );
+  }
+
+  if (env['GITHUB_ACTIONS'] === 'true' || env['CI'] === 'true') {
+    throw new Error('EXOJS_SITE_LOCAL_TEST is refused on CI: a CI site build must target a published base.');
+  }
+
+  if (rawChannel === '') {
+    throw new Error('EXOJS_SITE_LOCAL_TEST needs an explicit EXOJS_SITE_CHANNEL for its custom base.');
+  }
+
+  return { channel: rawChannel, basePath: rawBase, localTest: true };
+};
+
+/** The channel a push to `branch` publishes, or `null` for any other ref. */
+export const channelForBranch = (branch: string): SiteChannel | null =>
+  SITE_CHANNELS.find(channel => SITE_CHANNEL_BRANCH[channel] === branch) ?? null;
+
+/** Where an explicit channel switch leads; a local test build has no counterpart. */
+export const counterpartBasePath = (config: SiteChannelConfig): string | null =>
+  config.localTest ? null : SITE_CHANNEL_BASE[config.channel === 'stable' ? 'next' : 'stable'];
+
+/**
+ * `$GITHUB_OUTPUT` lines for building `ref`: a long-lived branch builds its own
+ * channel, every other ref the unconfigured default.
+ */
+export const siteChannelOutputs = (ref: string): string[] => {
+  const channel = channelForBranch(ref) ?? 'stable';
+
+  return [`channel=${channel}`, `base=${SITE_CHANNEL_BASE[channel]}`];
+};
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  process.stdout.write(`${siteChannelOutputs(process.env['SITE_REF'] ?? '').join('\n')}\n`);
+}
diff --git a/scripts/pages/site-manifest.ts b/scripts/pages/site-manifest.ts
new file mode 100644
index 000000000..06135ff0b
--- /dev/null
+++ b/scripts/pages/site-manifest.ts
@@ -0,0 +1,359 @@
+import { createHash } from 'node:crypto';
+import { lstatSync, readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { isSafeBasePath, SITE_CHANNEL_BASE, SITE_CHANNELS, type SiteChannel } from './site-channel.ts';
+
+/**
+ * `site-build.json`: the identity and the exact content of one built channel
+ * tree. It sits at the tree root and is not part of its own file list.
+ *
+ * Dependency-free and erasable TypeScript, so the Pages publisher can run it
+ * with plain `node`.
+ */
+
+export const SITE_BUILD_FILE = 'site-build.json';
+
+export const SITE_BUILD_SCHEMA_VERSION = 1;
+
+/**
+ * Which demo media profile the build ships. `standard` is the
+ * `@codexo/exojs-demo-assets` standard profile served under
+ * `vendor/exojs-demo-assets/media/`; the extended media are not part of a site.
+ */
+export const SITE_ASSET_PROFILES = ['standard'] as const;
+
+export type SiteAssetProfile = (typeof SITE_ASSET_PROFILES)[number];
+
+export interface SiteBuildIdentity {
+  channel: SiteChannel;
+  basePath: string;
+  /** The commit the tree was built from. */
+  sourceSha: string;
+  /** The root package version the tree was built from, unreleased or not. */
+  packageVersion: string;
+  assetProfile: SiteAssetProfile;
+  /** ISO 8601 UTC build time. */
+  createdAt: string;
+  /** Built for a non-canonical base; the publisher refuses it. */
+  localTest: boolean;
+}
+
+export interface SiteBuildFileEntry {
+  path: string;
+  size: number;
+  sha256: string;
+}
+
+export interface SiteBuildManifest extends SiteBuildIdentity {
+  schemaVersion: typeof SITE_BUILD_SCHEMA_VERSION;
+  fileCount: number;
+  totalBytes: number;
+  /** SHA-256 over the sorted file list; see `computeContentHash`. */
+  contentHash: string;
+  files: SiteBuildFileEntry[];
+}
+
+const SHA1_HEX = /^[0-9a-f]{40}$/;
+const SHA256_HEX = /^[0-9a-f]{64}$/;
+const SEMVER = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/;
+const ISO_UTC = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?Z$/;
+// Control characters, the Windows separator and the drive/stream separator.
+// eslint-disable-next-line no-control-regex
+const FORBIDDEN_PATH_CHARACTERS = /[\u0000-\u001F\u007F\\:]/;
+
+/**
+ * Why `path` cannot name a file in a site tree, or `null` when it can. A site
+ * path is relative, POSIX-separated and has no empty, `.` or `..` segment,
+ * so it can neither escape the tree nor alias another entry.
+ */
+export const validateSitePath = (path: string): string | null => {
+  if (path === '') {
+    return 'empty path';
+  }
+
+  if (path.startsWith('/')) {
+    return `absolute path ${JSON.stringify(path)}`;
+  }
+
+  if (FORBIDDEN_PATH_CHARACTERS.test(path)) {
+    return `path with a control character, backslash or colon ${JSON.stringify(path)}`;
+  }
+
+  for (const segment of path.split('/')) {
+    if (segment === '' || segment === '.' || segment === '..') {
+      return `path with an empty, '.' or '..' segment ${JSON.stringify(path)}`;
+    }
+  }
+
+  return null;
+};
+
+const compareCodeUnits = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0);
+
+const sha256 = (data: Buffer | string): string => createHash('sha256').update(data).digest('hex');
+
+/**
+ * Every regular file below `root`, sorted by code unit, with size and SHA-256.
+ * Throws on a symbolic link or any other non-regular entry, and on a name that
+ * is not a valid site path. `exclude` receives root-relative paths.
+ */
+export const hashTreeFiles = (root: string, exclude: (path: string) => boolean = () => false): SiteBuildFileEntry[] => {
+  const files: SiteBuildFileEntry[] = [];
+
+  const visit = (directory: string, prefix: string): void => {
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+      const rel = prefix === '' ? entry.name : `${prefix}/${entry.name}`;
+      const problem = validateSitePath(rel);
+
+      if (problem !== null) {
+        throw new Error(`[site-manifest] ${problem}`);
+      }
+
+      const abs = join(directory, entry.name);
+      const stats = lstatSync(abs);
+
+      if (stats.isSymbolicLink()) {
+        throw new Error(`[site-manifest] symlink in the site tree: ${rel}`);
+      }
+
+      if (stats.isDirectory()) {
+        visit(abs, rel);
+        continue;
+      }
+
+      if (!stats.isFile()) {
+        throw new Error(`[site-manifest] special file in the site tree: ${rel}`);
+      }
+
+      if (exclude(rel)) {
+        continue;
+      }
+
+      files.push({ path: rel, size: stats.size, sha256: sha256(readFileSync(abs)) });
+    }
+  };
+
+  visit(root, '');
+
+  return files.sort((a, b) => compareCodeUnits(a.path, b.path));
+};
+
+/** SHA-256 over one `<sha256> <size> <path>\n` line per file, in list order. */
+export const computeContentHash = (files: readonly SiteBuildFileEntry[]): string =>
+  sha256(files.map(file => `${file.sha256} ${file.size} ${file.path}\n`).join(''));
+
+const isRootManifest = (path: string): boolean => path === SITE_BUILD_FILE;
+
+const identityProblems = (identity: SiteBuildIdentity): string[] => {
+  const problems: string[] = [];
+
+  if (!(SITE_CHANNELS as readonly string[]).includes(identity.channel)) {
+    problems.push(`channel ${JSON.stringify(identity.channel)} is not a site channel`);
+  }
+
+  if (typeof identity.basePath !== 'string' || !isSafeBasePath(identity.basePath)) {
+    problems.push(`basePath ${JSON.stringify(identity.basePath)} is not a safe base path`);
+  } else if (typeof identity.localTest !== 'boolean') {
+    problems.push('localTest must be a boolean');
+  } else if (!identity.localTest && SITE_CHANNEL_BASE[identity.channel] !== identity.basePath) {
+    problems.push(`basePath ${identity.basePath} is not the ${identity.channel} base ${SITE_CHANNEL_BASE[identity.channel]}`);
+  }
+
+  if (typeof identity.sourceSha !== 'string' || !SHA1_HEX.test(identity.sourceSha)) {
+    problems.push(`sourceSha ${JSON.stringify(identity.sourceSha)} is not a full commit SHA`);
+  }
+
+  if (typeof identity.packageVersion !== 'string' || !SEMVER.test(identity.packageVersion)) {
+    problems.push(`packageVersion ${JSON.stringify(identity.packageVersion)} is not a semantic version`);
+  }
+
+  if (!(SITE_ASSET_PROFILES as readonly string[]).includes(identity.assetProfile)) {
+    problems.push(`assetProfile ${JSON.stringify(identity.assetProfile)} is not one of ${SITE_ASSET_PROFILES.join(', ')}`);
+  }
+
+  if (typeof identity.createdAt !== 'string' || !ISO_UTC.test(identity.createdAt) || Number.isNaN(Date.parse(identity.createdAt))) {
+    problems.push(`createdAt ${JSON.stringify(identity.createdAt)} is not an ISO 8601 UTC time`);
+  }
+
+  return problems;
+};
+
+/** Throws when `identity` could not describe a build of the declared channel. */
+export const assertSiteBuildIdentity = (identity: SiteBuildIdentity): void => {
+  const problems = identityProblems(identity);
+
+  if (problems.length > 0) {
+    throw new Error(`[site-manifest] invalid site build identity:\n  ${problems.join('\n  ')}`);
+  }
+};
+
+/** The manifest of the tree at `root`, excluding a `site-build.json` at its root. */
+export const createSiteBuildManifest = (root: string, identity: SiteBuildIdentity): SiteBuildManifest => {
+  assertSiteBuildIdentity(identity);
+  const files = hashTreeFiles(root, isRootManifest);
+
+  return {
+    schemaVersion: SITE_BUILD_SCHEMA_VERSION,
+    channel: identity.channel,
+    basePath: identity.basePath,
+    sourceSha: identity.sourceSha,
+    packageVersion: identity.packageVersion,
+    assetProfile: identity.assetProfile,
+    createdAt: identity.createdAt,
+    localTest: identity.localTest,
+    fileCount: files.length,
+    totalBytes: files.reduce((sum, file) => sum + file.size, 0),
+    contentHash: computeContentHash(files),
+    files,
+  };
+};
+
+/** Serialized form, stable for a given manifest. */
+export const serializeSiteBuildManifest = (manifest: SiteBuildManifest): string => `${JSON.stringify(manifest, null, 2)}\n`;
+
+/**
+ * Validates an untrusted, already JSON-parsed manifest. Throws listing every
+ * problem; the returned value is a fresh object with exactly the known fields.
+ */
+export const parseSiteBuildManifest = (value: unknown): SiteBuildManifest => {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    throw new Error(`[site-manifest] ${SITE_BUILD_FILE} is not a JSON object`);
+  }
+
+  const raw = value as Record<string, unknown>;
+  const problems: string[] = [];
+
+  if (raw['schemaVersion'] !== SITE_BUILD_SCHEMA_VERSION) {
+    problems.push(`schemaVersion ${JSON.stringify(raw['schemaVersion'])} is not ${SITE_BUILD_SCHEMA_VERSION}`);
+  }
+
+  const identity = {
+    channel: raw['channel'],
+    basePath: raw['basePath'],
+    sourceSha: raw['sourceSha'],
+    packageVersion: raw['packageVersion'],
+    assetProfile: raw['assetProfile'],
+    createdAt: raw['createdAt'],
+    localTest: raw['localTest'],
+  } as SiteBuildIdentity;
+
+  problems.push(...identityProblems(identity));
+
+  const files: SiteBuildFileEntry[] = [];
+
+  if (!Array.isArray(raw['files'])) {
+    problems.push('files is not an array');
+  } else {
+    let previous: string | null = null;
+
+    for (const [index, entry] of (raw['files'] as unknown[]).entries()) {
+      const file = (typeof entry === 'object' && entry !== null ? entry : {}) as Record<string, unknown>;
+      const path = file['path'];
+      const size = file['size'];
+      const hash = file['sha256'];
+
+      if (typeof path !== 'string' || validateSitePath(path) !== null) {
+        problems.push(`files[${index}].path: ${typeof path === 'string' ? validateSitePath(path) : 'not a string'}`);
+        continue;
+      }
+
+      if (path === SITE_BUILD_FILE) {
+        problems.push(`files[${index}] lists ${SITE_BUILD_FILE} itself`);
+      }
+
+      if (previous !== null && compareCodeUnits(previous, path) >= 0) {
+        problems.push(`files[${index}] ${path} is not sorted after ${previous} or is a duplicate`);
+      }
+
+      if (typeof size !== 'number' || !Number.isSafeInteger(size) || size < 0) {
+        problems.push(`files[${index}].size is not a non-negative integer`);
+      }
+
+      if (typeof hash !== 'string' || !SHA256_HEX.test(hash)) {
+        problems.push(`files[${index}].sha256 is not a SHA-256 hex digest`);
+      }
+
+      previous = path;
+      files.push({ path, size: size as number, sha256: hash as string });
+    }
+  }
+
+  if (raw['fileCount'] !== files.length) {
+    problems.push(`fileCount ${JSON.stringify(raw['fileCount'])} does not match the ${files.length} listed files`);
+  }
+
+  const totalBytes = files.reduce((sum, file) => sum + file.size, 0);
+
+  if (raw['totalBytes'] !== totalBytes) {
+    problems.push(`totalBytes ${JSON.stringify(raw['totalBytes'])} does not match the listed sizes (${totalBytes})`);
+  }
+
+  const contentHash = computeContentHash(files);
+
+  if (raw['contentHash'] !== contentHash) {
+    problems.push(`contentHash ${JSON.stringify(raw['contentHash'])} does not match the file list (${contentHash})`);
+  }
+
+  if (problems.length > 0) {
+    throw new Error(`[site-manifest] invalid ${SITE_BUILD_FILE}:\n  ${problems.join('\n  ')}`);
+  }
+
+  return {
+    schemaVersion: SITE_BUILD_SCHEMA_VERSION,
+    ...identity,
+    fileCount: files.length,
+    totalBytes,
+    contentHash,
+    files,
+  };
+};
+
+/** Reads and validates `<root>/site-build.json`. */
+export const readSiteBuildManifest = (root: string): SiteBuildManifest =>
+  parseSiteBuildManifest(JSON.parse(readFileSync(join(root, SITE_BUILD_FILE), 'utf8')) as unknown);
+
+export interface VerifySiteTreeOptions {
+  /** Root-relative paths that may exist beside the manifest's files. */
+  allowExtra?: (path: string) => boolean;
+}
+
+/**
+ * Every difference between the tree at `root` and `manifest`: a missing,
+ * unexpected or altered file, or an unsafe entry. Empty when they match.
+ */
+export const verifySiteTree = (root: string, manifest: SiteBuildManifest, options: VerifySiteTreeOptions = {}): string[] => {
+  const allowExtra = options.allowExtra ?? (() => false);
+  let actual: SiteBuildFileEntry[];
+
+  try {
+    actual = hashTreeFiles(root, path => isRootManifest(path) || allowExtra(path));
+  } catch (error) {
+    return [error instanceof Error ? error.message : String(error)];
+  }
+
+  const problems: string[] = [];
+  const actualByPath = new Map(actual.map(file => [file.path, file]));
+
+  for (const expected of manifest.files) {
+    const found = actualByPath.get(expected.path);
+
+    if (found === undefined) {
+      problems.push(`missing file ${expected.path}`);
+    } else if (found.size !== expected.size || found.sha256 !== expected.sha256) {
+      problems.push(`altered file ${expected.path}`);
+    }
+
+    actualByPath.delete(expected.path);
+  }
+
+  for (const path of actualByPath.keys()) {
+    problems.push(`unexpected file ${path}`);
+  }
+
+  if (computeContentHash(manifest.files) !== manifest.contentHash) {
+    problems.push('contentHash does not match the manifest file list');
+  }
+
+  return problems;
+};
diff --git a/scripts/release/RELEASING.md b/scripts/release/RELEASING.md
index 91350c2a4..01d811c50 100644
--- a/scripts/release/RELEASING.md
+++ b/scripts/release/RELEASING.md
@@ -87,3 +87,17 @@ pnpm release:publish-independent create-exo-app --execute    # publishes with --
 ```
 
 The command refuses a lockstep package (the coordinated release owns those), is a no-op for a version already on the registry, and points at `release:bootstrap` when the name does not exist yet. The very first publish of one of these names goes through `release:bootstrap` like any other new package, followed by its Trusted Publisher config on npmjs.com.
+
+## Legacy shims
+
+The seven runtime packages that moved into Core as subpaths in v0.20 (`@codexo/exojs-tilemap`, `-particles`, `-audio-fx`, `-physics`, `-tilemap-physics`, `-lighting`, `-pathfinding`) keep their npm names as forwarders under `packages/legacy/`. Each file of those packages is generated from `LEGACY_SHIMS` in `scripts/release/lockstep-packages.ts` by `pnpm legacy-shims:generate`, and `pnpm legacy-shims:check` (in the `sync` gate group) fails when one drifts. Every binding a shim exports is the object its Core subpath exports, and its only peer is `@codexo/exojs` on the 0.20 line.
+
+A shim is not republished on every release. `release:cut` sets a shim to the release version only when the cut opens the 0.20 line or the shim's forwarders differ from the ones tagged under its current version; otherwise the shim keeps its version, and `release:prepare` neither packs nor publishes it. No cut moves a shim onto another line.
+
+The registry steps of a release, including the deprecation of exactly the shim versions it publishes, are printed by a dry run that never touches the registry:
+
+```bash
+pnpm release:registry-plan --version 0.20.0   # writes .release/registry-plan.{json,txt}
+```
+
+The plan refuses ranges, wildcards, tags, releases before the 0.20 line and shim versions off it, and it has no unpublish action. `release:publish` does not deprecate anything; the deprecations in the plan are a separate, explicitly authorised step after the published versions passed their consumer checks.
diff --git a/scripts/release/bootstrap-publish.ts b/scripts/release/bootstrap-publish.ts
index 71df6272a..506c07d9b 100644
--- a/scripts/release/bootstrap-publish.ts
+++ b/scripts/release/bootstrap-publish.ts
@@ -32,7 +32,7 @@
  *   - No false success: any failed step yields `ok === false` and stops.
  */
 import type { CommandResult, CommandRunner } from './command-runner.ts';
-import { INDEPENDENT_PACKAGES, LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
+import { INDEPENDENT_PACKAGES, isEngineExtension, LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
 
 export interface BootstrapTarget {
   /** npm package name. */
@@ -45,7 +45,7 @@ export interface BootstrapTarget {
 
 /** Every package a bootstrap publish may target, from both release registries. */
 export const bootstrapTargets = (): readonly BootstrapTarget[] => [
-  ...LOCKSTEP_PACKAGES.filter(p => p.isExtension).map(p => ({ name: p.name, dir: p.dir, lockstep: true })),
+  ...LOCKSTEP_PACKAGES.filter(isEngineExtension).map(p => ({ name: p.name, dir: p.dir, lockstep: true })),
   ...INDEPENDENT_PACKAGES.map(p => ({ name: p.name, dir: p.dir, lockstep: false })),
 ];
 
diff --git a/scripts/release/cut.ts b/scripts/release/cut.ts
index a5927fb7c..f3d65360f 100644
--- a/scripts/release/cut.ts
+++ b/scripts/release/cut.ts
@@ -18,6 +18,9 @@
  *   2. Bumps `version` in all six lockstep package.json files.
  *   2. Updates every official peer range - the core and any sibling extension -
  *      to `"MAJOR.MINOR.x"` in the extension packages.
+ *   2. Sets a legacy shim to VERSION only when the cut opens the shim's line or
+ *      its forwarders changed since the version it is on (`planShimCut`); an
+ *      unchanged shim keeps its version and is not republished.
  *   3. Runs `pnpm verify:lockstep` and `pnpm verify:release-matrix` as a gate.
  *   4. Stages the six package.json files and commits.
  *   5. Creates an annotated git tag `vVERSION`.
@@ -36,7 +39,8 @@ import { fileURLToPath } from 'node:url';
 
 import { CHANGELOG_PATH, dateChangelogFile, hasCuttableChangelog, UNRELEASED_HEADING } from './changelog.ts';
 import { generateChangelog } from './generate-changelog.ts';
-import { LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
+import { lineOf, planShimCut, shimForwarderChanged } from './legacy-shims.ts';
+import { isEngineExtension, LEGACY_SHIMS, LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
 import {
   EVIDENCE_PATH,
   type EvidenceDocument,
@@ -54,7 +58,7 @@ const LOCKSTEP_DIRS: Array<{ name: string; dir: string }> = LOCKSTEP_PACKAGES.ma
 // `LOCKSTEP_PACKAGES` is `as const`, so mapping its names yields a literal
 // union and `Set.has` would accept only those literals - but the caller tests
 // names read back from a package manifest, which are plain strings.
-const EXTENSION_NAMES: ReadonlySet<string> = new Set(LOCKSTEP_PACKAGES.filter(p => p.isExtension).map(p => p.name));
+const EXTENSION_NAMES: ReadonlySet<string> = new Set(LOCKSTEP_PACKAGES.filter(isEngineExtension).map(p => p.name));
 const LOCKSTEP_NAMES: ReadonlySet<string> = new Set(LOCKSTEP_PACKAGES.map(p => p.name));
 
 const log = (msg: string): void => {
@@ -247,6 +251,36 @@ const bumpPackages = (version: string): boolean => {
   return anyChanged;
 };
 
+/** Applies `planShimCut` to every legacy shim and returns the manifests it rewrote. */
+const cutShims = (version: string): string[] => {
+  const written: string[] = [];
+
+  for (const shim of LEGACY_SHIMS) {
+    const absDir = resolve(repoRoot, shim.dir);
+    const pkg = readPackageJson(absDir);
+    const currentVersion = String(pkg['version']);
+    const decision = planShimCut({
+      line: shim.line,
+      currentVersion,
+      releaseVersion: version,
+      forwarderChanged: lineOf(currentVersion) === shim.line && shimForwarderChanged(repoRoot, shim.dir, currentVersion),
+    });
+
+    if (decision.action === 'keep') {
+      log(`  ${shim.name} stays at ${currentVersion} (${decision.reason})`);
+      continue;
+    }
+
+    pkg['version'] = decision.version;
+    pkg['peerDependencies'] = { ...(pkg['peerDependencies'] as Record<string, string>), '@codexo/exojs': decision.peerRange };
+    writePackageJson(absDir, pkg);
+    written.push(`${shim.dir}/package.json`);
+    log(`  set ${shim.name} → ${decision.version} (${decision.reason})`);
+  }
+
+  return written;
+};
+
 // ── Main ───────────────────────────────────────────────────────────────────
 
 const version = parseVersionArg(process.argv.slice(2));
@@ -291,7 +325,11 @@ writeEvidence(repoRoot, stampRelease(evidence, version));
 log(`  ✓ ${EVIDENCE_PATH} now claims ${version}`);
 
 log('\n→ bumping lockstep packages…');
-const bumped = bumpPackages(version);
+const bumpedLockstep = bumpPackages(version);
+
+log('\n→ legacy shims…');
+const shimManifests = cutShims(version);
+const bumped = bumpedLockstep || shimManifests.length > 0;
 
 if (bumped) {
   log('\n→ verifying lockstep + release-matrix…');
@@ -304,7 +342,7 @@ if (bumped) {
   }
 
   log('\n→ committing version bump…');
-  const packageJsonPaths = LOCKSTEP_DIRS.map(({ dir }) => resolve(dir, 'package.json')).join(' ');
+  const packageJsonPaths = [...LOCKSTEP_DIRS.map(({ dir }) => resolve(dir, 'package.json')), ...shimManifests].join(' ');
   run(`git add ${packageJsonPaths} ${EVIDENCE_PATH} ${CHANGELOG_PATH}`);
   run(`git commit -m "chore(release): bump to ${version}"`);
   log(`  ✓ committed`);
diff --git a/scripts/release/external-consumers.ts b/scripts/release/external-consumers.ts
index ed2103401..255a106a9 100644
--- a/scripts/release/external-consumers.ts
+++ b/scripts/release/external-consumers.ts
@@ -3,24 +3,33 @@
  *
  * Installs the packed tarballs into a throwaway project OUTSIDE the
  * repository (so no workspace/source resolution can leak in) and proves they
- * work for the three audiences a published release must serve:
+ * work for the audiences a published release must serve:
  *
- *   - Node (ESM runtime): `import` each package and assert key exports exist.
+ *   - Node (ESM runtime): `import` each package and every Core subpath, and
+ *     assert key exports exist and share one Core.
  *   - TypeScript / Vite (bundler resolution): type-check a consumer module with
  *     `moduleResolution: bundler` - exactly the resolution Vite/esbuild use -
  *     against the shipped `.d.ts`. Combined with `attw`'s `bundler 🟢` this is
  *     the Vite-consumer proof without needing Vite installed.
- *   - TypeScript subpath entry: the same type-check again, but through a
- *     documented subpath (`@codexo/exojs/renderer-sdk`) in its OWN program
- *     that never imports the root barrel. A root-barrel import anywhere in
- *     the same program would pull in whatever ambient globals the root's
- *     `.d.ts` carries and mask a defect that only affects a consumer whose
- *     program never reaches it.
+ *   - TypeScript under Node's own resolution (`NodeNext`), which reads the same
+ *     `exports` map but requires every relative specifier in the shipped
+ *     declarations to name a real file.
+ *   - TypeScript subpath entries: one program per documented subpath that never
+ *     imports the root barrel. A root-barrel import anywhere in the same
+ *     program would pull in whatever ambient globals the root's `.d.ts` carries
+ *     and mask a defect that only affects a consumer whose program never
+ *     reaches it.
  *
- * Fully offline: the only runtime dependency in the set (@codexo/exojs-tiled →
- * @codexo/exojs-tilemap) is satisfied by the tilemap tarball installed
- * alongside, so `npm install --offline` of all of them resolves with no
- * registry access.
+ *   - Legacy shims, when installed: every retired package name forwards the
+ *     very bindings of its Core entry, imports with no side effect, and
+ *     type-checks under both resolutions.
+ *
+ * Every TypeScript check is `strict`, with `skipLibCheck: false` and no
+ * `paths`: the shipped declarations have to stand on their own.
+ *
+ * Fully offline: the runtime modules ship inside the Core tarball, and the
+ * adapters and shims only peer on Core, so `npm install --offline` of the set
+ * resolves with no registry access.
  */
 import { execFileSync } from 'node:child_process';
 import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
@@ -29,7 +38,7 @@ import { tmpdir } from 'node:os';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
+import { LEGACY_SHIMS, type LegacyShim, LOCKSTEP_PACKAGES, RUNTIME_MODULES } from './lockstep-packages.ts';
 
 const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
 
@@ -47,7 +56,10 @@ export interface ConsumerCheck {
   detail?: string;
 }
 
-const run = (command: string, args: string[], cwd: string): { code: number; output: string } => {
+/** The Core subpaths a consumer can import, beyond the root entry. */
+export const CORE_SUBPATHS: readonly string[] = [...RUNTIME_MODULES.map(module => module.subpath), 'debug', 'renderer-sdk'];
+
+export const run = (command: string, args: string[], cwd: string): { code: number; output: string } => {
   try {
     const output = execFileSync(command, args, {
       cwd,
@@ -65,18 +77,115 @@ const run = (command: string, args: string[], cwd: string): { code: number; outp
   }
 };
 
+const lastLines = (output: string, count: number): string => output.trim().split('\n').slice(-count).join(' ');
+
+/**
+ * Packs the package in `packageDir` into `destination` without running its
+ * build scripts and returns the tarball path.
+ */
+export const packPackage = (packageDir: string, destination: string): string => {
+  const manifest = JSON.parse(readFileSync(join(packageDir, 'package.json'), 'utf8')) as { name: string; version: string };
+  const r = run('pnpm', ['pack', '--pack-destination', destination, '--config.ignore-scripts=true'], packageDir);
+
+  if (r.code !== 0) {
+    throw new Error(`pack failed for ${packageDir}:\n${r.output}`);
+  }
+
+  const tarball = join(destination, `${manifest.name.replace('@', '').replace('/', '-')}-${manifest.version}.tgz`);
+
+  if (!existsSync(tarball)) {
+    throw new Error(`pack of ${packageDir} produced no ${tarball}`);
+  }
+
+  return tarball;
+};
+
+/**
+ * Creates a throwaway ESM project outside the repository with `tarballs`
+ * installed offline. The caller removes the returned directory.
+ */
+export const createConsumerProject = (tarballs: readonly string[]): { dir: string; install: ConsumerCheck } => {
+  const dir = mkdtempSync(join(tmpdir(), 'exo-consumer-'));
+  writeFileSync(
+    join(dir, 'package.json'),
+    JSON.stringify({ name: 'exo-external-consumer', private: true, type: 'module', version: '1.0.0' }, null, 2),
+  );
+
+  // `--no-save` keeps package.json clean; tarballs are passed positionally.
+  const install = run('npm', ['install', '--no-audit', '--no-fund', '--offline', '--no-save', ...tarballs], dir);
+  const ok = install.code === 0 && existsSync(join(dir, 'node_modules', '@codexo', 'exojs'));
+
+  return {
+    dir,
+    install: { name: `install (offline, ${tarballs.length} tarballs)`, ok, ...(ok ? {} : { detail: lastLines(install.output, 3) }) },
+  };
+};
+
+/** Runs `source` as an ES module in the consumer project and expects it to print `marker`. */
+export const runNodeCheck = (dir: string, name: string, fileName: string, source: string, marker: string): ConsumerCheck => {
+  writeFileSync(join(dir, fileName), source);
+  const node = run('node', [fileName], dir);
+  const ok = node.code === 0 && node.output.includes(marker);
+
+  return { name, ok, ...(ok ? {} : { detail: lastLines(node.output, 5) }) };
+};
+
+export type ConsumerResolution = 'bundler' | 'nodenext';
+
+const consumerTsconfig = (resolution: ConsumerResolution, include: string): string =>
+  JSON.stringify(
+    {
+      compilerOptions: {
+        module: resolution === 'bundler' ? 'esnext' : 'nodenext',
+        moduleResolution: resolution,
+        target: 'es2022',
+        lib: ['es2022', 'dom', 'dom.iterable'],
+        strict: true,
+        noEmit: true,
+        skipLibCheck: false,
+        types: [],
+      },
+      include: [include],
+    },
+    null,
+    2,
+  );
+
+/**
+ * Type-checks `source` as its own program in the consumer project: strict, no
+ * `paths`, no `skipLibCheck`, resolving the installed packages only through
+ * their manifests.
+ */
+export const typecheckConsumer = (
+  dir: string,
+  name: string,
+  baseName: string,
+  source: string,
+  resolution: ConsumerResolution,
+): ConsumerCheck => {
+  writeFileSync(join(dir, `${baseName}.ts`), source);
+  writeFileSync(join(dir, `tsconfig.${baseName}.json`), consumerTsconfig(resolution, `${baseName}.ts`));
+  const tsc = run('node', [consumerTscBin, '--noEmit', '-p', `tsconfig.${baseName}.json`], dir);
+
+  return { name, ok: tsc.code === 0, ...(tsc.code === 0 ? {} : { detail: lastLines(tsc.output, 5) }) };
+};
+
+/** A program that reaches exactly one Core subpath and nothing else. */
+export const subpathConsumerSource = (subpath: string): string =>
+  `import * as entry from '@codexo/exojs/${subpath}';\n\nexport type Surface = typeof entry;\nexport const surface: Surface = entry;\n`;
+
 const CONSUMER_TS = `import { ActionMap, Application, ButtonAction, Container, Keyboard, Scene } from '@codexo/exojs';
-import { ParticleSystem, particlesExtension } from '@codexo/exojs-particles';
-import { TileMap, tilemapExtension } from '@codexo/exojs-tilemap';
+import { DebugLayer, DebugOverlay, PhysicsDebugDraw, type PhysicsDebugDrawOptions } from '@codexo/exojs/debug';
+import { ParticleSystem, particlesExtension } from '@codexo/exojs/particles';
+import { TileMap, tilemapExtension } from '@codexo/exojs/tilemap';
 import { TiledMap, tiledExtension } from '@codexo/exojs-tiled';
-import { PhysicsWorld } from '@codexo/exojs-physics';
-import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';
-import { AudioAnalyser, BeatDetector, ReverbEffect } from '@codexo/exojs-audio-fx';
+import { PhysicsWorld } from '@codexo/exojs/physics';
+import { AudioAnalyser, BeatDetector, ReverbEffect } from '@codexo/exojs/audio-fx';
 import { AsepriteSheet, asepriteExtension } from '@codexo/exojs-aseprite';
 import { LdtkMap, ldtkExtension } from '@codexo/exojs-ldtk';
-import { TileColliderStreamer } from '@codexo/exojs-tilemap-physics';
-import { Lighting, LitMaterial, PointLight } from '@codexo/exojs-lighting';
-import { GridSpace, Pathfinder, WaypointGraph } from '@codexo/exojs-pathfinding';
+import { TileColliderStreamer } from '@codexo/exojs/tilemap-physics';
+import { Lighting, LitMaterial, PointLight } from '@codexo/exojs/lighting';
+import { GridSpace, Pathfinder, WaypointGraph } from '@codexo/exojs/pathfinding';
 
 export class DemoScene extends Scene {}
 
@@ -96,13 +205,16 @@ export function verifyCoreProtocols(container: Container): void {
     void ownedBinding.active;
 }
 
+export function physicsLayer(app: Application, world: PhysicsWorld, options: PhysicsDebugDrawOptions): DebugLayer {
+    return new PhysicsDebugDraw(app, world, options);
+}
+
 export function bootstrap(): { app: Application; system: typeof ParticleSystem; tiles: typeof TileMap; map: typeof TiledMap } {
     const app = new Application();
     void particlesExtension;
     void tilemapExtension;
     void tiledExtension;
-    void PhysicsWorld;
-    void PhysicsDebugDraw;
+    void DebugOverlay;
     void AudioAnalyser;
     void BeatDetector;
     void ReverbEffect;
@@ -121,97 +233,68 @@ export function bootstrap(): { app: Application; system: typeof ParticleSystem;
 }
 `;
 
-const CONSUMER_TSCONFIG = JSON.stringify(
-  {
-    compilerOptions: {
-      module: 'esnext',
-      moduleResolution: 'bundler',
-      target: 'es2022',
-      lib: ['es2022', 'dom', 'dom.iterable'],
-      strict: true,
-      noEmit: true,
-      skipLibCheck: false,
-      types: [],
-    },
-    include: ['consumer.ts'],
-  },
-  null,
-  2,
-);
-
-// Entering through a documented SUBPATH - never the root barrel - in its
-// OWN program (a separate tsconfig/include, not merely a separate import
-// line in `CONSUMER_TS`). A root-barrel import anywhere in the same
-// TypeScript program would pull in whatever ambient declarations the root
-// barrel's `.d.ts` carries and mask a defect that only affects a consumer
-// whose program never includes it - exactly the shape of bug this lane
-// exists to catch (a `declare global` augmentation the shipped `.d.ts` tree
-// needs from a file OTHER than the one a subpath consumer actually reaches).
-// `renderer-sdk` is the documented path for writing a custom renderer.
-const CONSUMER_SUBPATH_TS = `import { AbstractWebGl2Renderer } from '@codexo/exojs/renderer-sdk';
-
-export type CustomRendererBase = typeof AbstractWebGl2Renderer;
-`;
+/**
+ * Core and every Core subpath in one program, with no adapter: the adapters'
+ * own declarations are not part of the Core contract under Node's resolution.
+ */
+const namespaceFor = (subpath: string): string => `${subpath.replaceAll('-', '_')}Entry`;
 
-const CONSUMER_SUBPATH_TSCONFIG = JSON.stringify(
-  {
-    compilerOptions: {
-      module: 'esnext',
-      moduleResolution: 'bundler',
-      target: 'es2022',
-      lib: ['es2022', 'dom', 'dom.iterable'],
-      strict: true,
-      noEmit: true,
-      skipLibCheck: false,
-      types: [],
-    },
-    include: ['consumer-subpath.ts'],
-  },
-  null,
-  2,
-);
+export const CORE_CONSUMER_TS = `import { Application, Container } from '@codexo/exojs';
+${CORE_SUBPATHS.map(subpath => `import * as ${namespaceFor(subpath)} from '@codexo/exojs/${subpath}';`).join('\n')}
+
+export const entries = { ${CORE_SUBPATHS.map(namespaceFor).join(', ')} };
+
+export function physicsLayer(app: Application, world: physicsEntry.PhysicsWorld): debugEntry.DebugLayer {
+    return new debugEntry.PhysicsDebugDraw(app, world);
+}
+
+export function isNode(value: unknown): value is Container {
+    return value instanceof Container;
+}
+`;
 
 const NODE_SMOKE = `import * as exo from '@codexo/exojs';
-import * as particles from '@codexo/exojs-particles';
-import * as tilemap from '@codexo/exojs-tilemap';
+import * as debug from '@codexo/exojs/debug';
+import * as particles from '@codexo/exojs/particles';
+import * as tilemap from '@codexo/exojs/tilemap';
 import * as tiled from '@codexo/exojs-tiled';
-import * as physics from '@codexo/exojs-physics';
-import * as physicsDebug from '@codexo/exojs-physics/debug';
-import * as audioFx from '@codexo/exojs-audio-fx';
+import * as physics from '@codexo/exojs/physics';
+import * as audioFx from '@codexo/exojs/audio-fx';
 import * as aseprite from '@codexo/exojs-aseprite';
 import * as ldtk from '@codexo/exojs-ldtk';
-import * as tilemapPhysics from '@codexo/exojs-tilemap-physics';
-import * as lighting from '@codexo/exojs-lighting';
-import * as pathfinding from '@codexo/exojs-pathfinding';
+import * as tilemapPhysics from '@codexo/exojs/tilemap-physics';
+import * as lighting from '@codexo/exojs/lighting';
+import * as pathfinding from '@codexo/exojs/pathfinding';
 
 const checks = [
   ['@codexo/exojs Application', typeof exo.Application === 'function'],
   ['@codexo/exojs Scene', typeof exo.Scene === 'function'],
-  ['@codexo/exojs-particles ParticleSystem', typeof particles.ParticleSystem === 'function'],
-  ['@codexo/exojs-particles particlesExtension', particles.particlesExtension != null],
-  ['@codexo/exojs-tilemap TileMap', typeof tilemap.TileMap === 'function'],
-  ['@codexo/exojs-tilemap tilemapExtension', tilemap.tilemapExtension != null],
+  ['@codexo/exojs/debug DebugOverlay', typeof debug.DebugOverlay === 'function'],
+  ['@codexo/exojs/debug PhysicsDebugDraw extends DebugLayer', Object.getPrototypeOf(debug.PhysicsDebugDraw) === debug.DebugLayer],
+  ['@codexo/exojs/particles ParticleSystem', typeof particles.ParticleSystem === 'function'],
+  ['@codexo/exojs/particles particlesExtension', particles.particlesExtension != null],
+  ['@codexo/exojs/tilemap TileMap', typeof tilemap.TileMap === 'function'],
+  ['@codexo/exojs/tilemap tilemapExtension', tilemap.tilemapExtension != null],
   ['@codexo/exojs-tiled TiledMap', typeof tiled.TiledMap === 'function'],
   ['@codexo/exojs-tiled tiledExtension', tiled.tiledExtension != null],
   ['facade TileMap identity (tiled === tilemap)', tiled.TileMap === tilemap.TileMap],
-  ['@codexo/exojs-physics PhysicsWorld', typeof physics.PhysicsWorld === 'function'],
-  ['@codexo/exojs-physics/debug PhysicsDebugDraw', typeof physicsDebug.PhysicsDebugDraw === 'function'],
-  ['@codexo/exojs-audio-fx AudioAnalyser', typeof audioFx.AudioAnalyser === 'function'],
-  ['@codexo/exojs-audio-fx BeatDetector', typeof audioFx.BeatDetector === 'function'],
-  ['@codexo/exojs-audio-fx ReverbEffect', typeof audioFx.ReverbEffect === 'function'],
+  ['@codexo/exojs/physics PhysicsWorld', typeof physics.PhysicsWorld === 'function'],
+  ['@codexo/exojs/audio-fx AudioAnalyser', typeof audioFx.AudioAnalyser === 'function'],
+  ['@codexo/exojs/audio-fx BeatDetector', typeof audioFx.BeatDetector === 'function'],
+  ['@codexo/exojs/audio-fx ReverbEffect', typeof audioFx.ReverbEffect === 'function'],
   ['@codexo/exojs-aseprite AsepriteSheet', typeof aseprite.AsepriteSheet === 'function'],
   ['@codexo/exojs-aseprite asepriteExtension', aseprite.asepriteExtension != null],
   ['@codexo/exojs-ldtk LdtkMap', typeof ldtk.LdtkMap === 'function'],
   ['@codexo/exojs-ldtk ldtkExtension', ldtk.ldtkExtension != null],
   ['facade ldtk TileMap identity (ldtk === tilemap)', ldtk.TileMap === tilemap.TileMap],
-  ['@codexo/exojs-tilemap-physics TileColliderStreamer', typeof tilemapPhysics.TileColliderStreamer === 'function'],
-  ['@codexo/exojs-tilemap-physics buildObjectLayerColliders', typeof tilemapPhysics.buildObjectLayerColliders === 'function'],
-  ['@codexo/exojs-lighting Lighting', typeof lighting.Lighting === 'function'],
-  ['@codexo/exojs-lighting LitMaterial', typeof lighting.LitMaterial === 'function'],
-  ['@codexo/exojs-lighting PointLight', typeof lighting.PointLight === 'function'],
-  ['@codexo/exojs-pathfinding Pathfinder', typeof pathfinding.Pathfinder === 'function'],
-  ['@codexo/exojs-pathfinding GridSpace', typeof pathfinding.GridSpace === 'function'],
-  ['@codexo/exojs-pathfinding WaypointGraph', typeof pathfinding.WaypointGraph === 'function'],
+  ['@codexo/exojs/tilemap-physics TileColliderStreamer', typeof tilemapPhysics.TileColliderStreamer === 'function'],
+  ['@codexo/exojs/tilemap-physics buildObjectLayerColliders', typeof tilemapPhysics.buildObjectLayerColliders === 'function'],
+  ['@codexo/exojs/lighting Lighting', typeof lighting.Lighting === 'function'],
+  ['@codexo/exojs/lighting LitMaterial', typeof lighting.LitMaterial === 'function'],
+  ['@codexo/exojs/lighting PointLight', typeof lighting.PointLight === 'function'],
+  ['@codexo/exojs/pathfinding Pathfinder', typeof pathfinding.Pathfinder === 'function'],
+  ['@codexo/exojs/pathfinding GridSpace', typeof pathfinding.GridSpace === 'function'],
+  ['@codexo/exojs/pathfinding WaypointGraph', typeof pathfinding.WaypointGraph === 'function'],
 ];
 const failed = checks.filter(([, ok]) => !ok).map(([name]) => name);
 if (failed.length > 0) {
@@ -221,64 +304,232 @@ if (failed.length > 0) {
 console.log('NODE_OK ' + checks.length);
 `;
 
+/** One import of a legacy shim and the Core entry it stands for. */
+interface ShimRoute {
+  readonly from: string;
+  readonly target: string;
+  /** The forwarded names, or `null` when the shim forwards the target's whole surface. */
+  readonly names: readonly string[] | null;
+}
+
+const shimRoutes = (shims: readonly LegacyShim[]): ShimRoute[] =>
+  shims.flatMap(shim =>
+    shim.entries.map(entry => ({
+      from: entry.entry === '.' ? shim.name : `${shim.name}/${entry.entry.slice(2)}`,
+      target: entry.target,
+      names: entry.names === undefined ? null : [...entry.names.values],
+    })),
+  );
+
+/**
+ * A Node program that proves each legacy shim forwards rather than copies: per
+ * entry, the shim exports exactly the target's value names and each is the very
+ * same object; `PhysicsDebugDraw` is one class through the retired entry, the
+ * Core debug entry and the physics module's own file; and every module loaded
+ * from an `@codexo` package comes from the one installed Core or from a shim,
+ * with Core's `Application` loaded once.
+ */
+export const legacyShimIdentityProbe = (shims: readonly LegacyShim[]): string => `import { registerHooks } from 'node:module';
+
+const loads = [];
+registerHooks({
+  load(url, context, nextLoad) {
+    loads.push(url);
+    return nextLoad(url, context);
+  },
+});
+
+const routes = ${JSON.stringify(shimRoutes(shims))};
+const shimNames = ${JSON.stringify(shims.map(shim => shim.name))};
+const problems = [];
+let compared = 0;
+
+for (const route of routes) {
+  const legacy = await import(route.from);
+  const modern = await import(route.target);
+  const expected = [...(route.names ?? Object.keys(modern))].sort();
+  const actual = Object.keys(legacy).sort();
+  if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+    problems.push(route.from + ' exports ' + actual.length + ' names, ' + route.target + ' ' + expected.length);
+  }
+  for (const name of expected) {
+    compared += 1;
+    if (legacy[name] !== modern[name]) problems.push(route.from + ' ' + name + ' is not the ' + route.target + ' binding');
+  }
+}
+
+const draws = [
+  (await import('@codexo/exojs/debug')).PhysicsDebugDraw,
+  (await import('@codexo/exojs-physics/debug')).PhysicsDebugDraw,
+  (await import(new URL('./node_modules/@codexo/exojs/dist/esm/physics/debug/index.js', import.meta.url).href)).PhysicsDebugDraw,
+];
+if (typeof draws[0] !== 'function' || draws.some(draw => draw !== draws[0])) problems.push('PhysicsDebugDraw differs across its three entries');
+
+const coreRoot = new URL('./node_modules/@codexo/exojs/', import.meta.url).href;
+const shimRoots = shimNames.map(name => new URL('./node_modules/' + name + '/', import.meta.url).href);
+const packaged = loads.filter(url => url.startsWith('file:') && url.includes('/node_modules/'));
+const foreign = packaged.filter(url => !url.startsWith(coreRoot) && !shimRoots.some(root => url.startsWith(root)));
+if (foreign.length > 0) problems.push('modules from outside Core and the shims: ' + foreign.join(', '));
+const applications = packaged.filter(url => url.endsWith('/dist/esm/core/Application.js')).length;
+if (applications !== 1) problems.push('Core Application loaded ' + applications + ' times');
+
+if (problems.length > 0) {
+  console.log('SHIM_IDENTITY_BAD ' + JSON.stringify(problems));
+  process.exit(1);
+}
+console.log('SHIM_IDENTITY_OK ' + JSON.stringify({ routes: routes.length, compared }));
+`;
+
+/**
+ * A Node program that imports `specifiers` with timers, animation frames, DOM,
+ * audio, workers, channels and the global symbol registry instrumented, and
+ * fails if any of them is touched or a global appears.
+ */
+export const importSideEffectProbe = (specifiers: readonly string[]): string => `const specifiers = ${JSON.stringify(specifiers)};
+const calls = [];
+const record = name => () => { calls.push(name); return 0; };
+for (const name of ['setTimeout', 'setInterval', 'setImmediate', 'queueMicrotask', 'requestAnimationFrame', 'requestIdleCallback']) {
+  globalThis[name] = record(name);
+}
+for (const name of ['AudioContext', 'OfflineAudioContext', 'AudioWorkletNode', 'Worker', 'MessageChannel', 'BroadcastChannel']) {
+  globalThis[name] = class { constructor() { calls.push(name); } };
+}
+globalThis.document = new Proxy({}, { get: (_target, key) => { calls.push('document.' + String(key)); return undefined; } });
+globalThis.window = new Proxy({}, { get: (_target, key) => { calls.push('window.' + String(key)); return undefined; } });
+const symbolFor = Symbol.for;
+Symbol.for = key => { if (key !== 'Symbol.dispose') calls.push('Symbol.for ' + key); return symbolFor(key); };
+const before = new Set(Reflect.ownKeys(globalThis));
+for (const specifier of specifiers) await import(specifier);
+const added = Reflect.ownKeys(globalThis).filter(key => !before.has(key)).map(String);
+if (calls.length > 0 || added.length > 0) {
+  console.log('SIDE_EFFECTS ' + JSON.stringify({ calls, added }));
+  process.exit(1);
+}
+console.log('NO_SIDE_EFFECTS ' + specifiers.length);
+`;
+
+/** A public type-only export of each runtime module, so a consumer program proves the shims forward types as well as values. */
+const SHIM_TYPE_PROBES: Readonly<Record<string, string>> = {
+  tilemap: 'TileOrientation',
+  particles: 'ParticlesBuildInfo',
+  'audio-fx': 'AutoWahEffectOptions',
+  physics: 'CharacterMovementOptions',
+  'tilemap-physics': 'TileColliderOptions',
+  lighting: 'LightingOptions',
+  pathfinding: 'NavigationAgentOptions',
+};
+
+/**
+ * A strict consumer program importing every legacy shim entry by its retired
+ * name: each shim's value surface must be the type of its Core entry's, and a
+ * type-only export must arrive as the identical type.
+ */
+export const legacyShimConsumerSource = (shims: readonly LegacyShim[]): string => {
+  const lines = ['type Equal<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? true : false;', ''];
+
+  shims.forEach((shim, index) => {
+    const typeName = SHIM_TYPE_PROBES[shim.subpath];
+
+    lines.push(`import * as legacy${index} from '${shim.name}';`, `import * as modern${index} from '@codexo/exojs/${shim.subpath}';`);
+    lines.push(`export const values${index}: Equal<typeof legacy${index}, typeof modern${index}> = true;`);
+
+    if (typeName !== undefined) {
+      lines.push(
+        `import type { ${typeName} as LegacyType${index} } from '${shim.name}';`,
+        `export const types${index}: Equal<LegacyType${index}, modern${index}.${typeName}> = true;`,
+      );
+    }
+
+    lines.push('');
+  });
+
+  lines.push(
+    "import { PhysicsDebugDraw as LegacyDraw, type PhysicsDebugDrawOptions as LegacyDrawOptions } from '@codexo/exojs-physics/debug';",
+    "import { PhysicsDebugDraw, type DebugLayer, type PhysicsDebugDrawOptions } from '@codexo/exojs/debug';",
+    'export const drawClass: Equal<typeof LegacyDraw, typeof PhysicsDebugDraw> = true;',
+    'export const drawOptions: Equal<LegacyDrawOptions, PhysicsDebugDrawOptions> = true;',
+    'export const drawLayer: DebugLayer = null as unknown as LegacyDraw;',
+    '',
+  );
+
+  return lines.join('\n');
+};
+
+/** The legacy shims among the installed packages of a consumer project. */
+const installedShims = (consumerDir: string): LegacyShim[] =>
+  LEGACY_SHIMS.filter(shim => existsSync(join(consumerDir, 'node_modules', ...shim.name.split('/'), 'package.json')));
+
+/** Every check of the legacy shims installed in `consumerDir`, or none when no shim is installed. */
+export const legacyShimChecks = (consumerDir: string): ConsumerCheck[] => {
+  const shims = installedShims(consumerDir);
+
+  if (shims.length === 0) {
+    return [];
+  }
+
+  const specifiers = shimRoutes(shims).map(route => route.from);
+  const source = legacyShimConsumerSource(shims);
+
+  return [
+    runNodeCheck(
+      consumerDir,
+      `legacy shims forward the Core bindings (${shims.length} shims)`,
+      'shim-identity.mjs',
+      legacyShimIdentityProbe(shims),
+      'SHIM_IDENTITY_OK',
+    ),
+    runNodeCheck(
+      consumerDir,
+      'legacy shims import without side effects',
+      'shim-side-effects.mjs',
+      importSideEffectProbe(specifiers),
+      'NO_SIDE_EFFECTS',
+    ),
+    ...(['bundler', 'nodenext'] as const).map(resolution =>
+      typecheckConsumer(
+        consumerDir,
+        `TypeScript ${resolution} type-check of the legacy shim names`,
+        `consumer-shims-${resolution}`,
+        source,
+        resolution,
+      ),
+    ),
+  ];
+};
+
 /**
  * Runs the external-consumer checks against the packed tarball paths. Returns
  * one {@link ConsumerCheck} per audience; `ok` overall is the conjunction.
  */
 export const verifyExternalConsumers = (tarballs: string[]): { ok: boolean; consumerDir: string; checks: ConsumerCheck[] } => {
-  const consumerDir = mkdtempSync(join(tmpdir(), 'exo-consumer-'));
-  const checks: ConsumerCheck[] = [];
+  const { dir: consumerDir, install } = createConsumerProject(tarballs);
+  const checks: ConsumerCheck[] = [install];
 
   try {
-    writeFileSync(
-      join(consumerDir, 'package.json'),
-      JSON.stringify({ name: 'exo-external-consumer', private: true, type: 'module', version: '1.0.0' }, null, 2),
-    );
-
-    // 1. Install all tarballs offline (tiled's tilemap dep resolves
-    // against the tilemap tarball installed alongside → no registry).
-    const install = run('npm', ['install', '--no-audit', '--no-fund', '--offline', '--no-save', ...tarballs], consumerDir);
-    // `--no-save` keeps package.json clean; pass tarballs positionally.
-    const installOk = install.code === 0 && existsSync(join(consumerDir, 'node_modules', '@codexo', 'exojs'));
-    checks.push({
-      name: `install (offline, ${tarballs.length} tarballs)`,
-      ok: installOk,
-      detail: installOk ? undefined : install.output.trim().split('\n').slice(-3).join(' '),
-    });
-
-    if (!installOk) {
+    if (!install.ok) {
       return { ok: false, consumerDir, checks };
     }
 
-    // 2. Node ESM runtime import smoke.
-    writeFileSync(join(consumerDir, 'node-smoke.mjs'), NODE_SMOKE);
-    const node = run('node', ['node-smoke.mjs'], consumerDir);
-    checks.push({
-      name: 'Node ESM import',
-      ok: node.code === 0 && node.output.includes('NODE_OK'),
-      detail: node.code === 0 ? undefined : node.output.trim().split('\n').slice(-3).join(' '),
-    });
+    checks.push(runNodeCheck(consumerDir, 'Node ESM import', 'node-smoke.mjs', NODE_SMOKE, 'NODE_OK'));
+    checks.push(typecheckConsumer(consumerDir, 'TypeScript bundler-resolution type-check', 'consumer', CONSUMER_TS, 'bundler'));
+    checks.push(
+      typecheckConsumer(
+        consumerDir,
+        'TypeScript NodeNext-resolution type-check (Core and subpaths)',
+        'consumer-core-node',
+        CORE_CONSUMER_TS,
+        'nodenext',
+      ),
+    );
 
-    // 3. TypeScript / Vite (bundler resolution) type-check against shipped .d.ts.
-    writeFileSync(join(consumerDir, 'consumer.ts'), CONSUMER_TS);
-    writeFileSync(join(consumerDir, 'tsconfig.json'), CONSUMER_TSCONFIG);
-    const tsc = run('node', [consumerTscBin, '--noEmit', '-p', 'tsconfig.json'], consumerDir);
-    checks.push({
-      name: 'TypeScript bundler-resolution type-check',
-      ok: tsc.code === 0,
-      detail: tsc.code === 0 ? undefined : tsc.output.trim().split('\n').slice(-5).join(' '),
-    });
+    for (const resolution of ['bundler', 'nodenext'] as const) {
+      for (const subpath of CORE_SUBPATHS) {
+        const name = `TypeScript subpath-entry (${subpath}, ${resolution}) type-check`;
+        checks.push(typecheckConsumer(consumerDir, name, `consumer-${resolution}-${subpath}`, subpathConsumerSource(subpath), resolution));
+      }
+    }
 
-    // 4. TypeScript subpath-entry type-check, in a program that never
-    // includes the root barrel - see `CONSUMER_SUBPATH_TS`'s doc comment.
-    writeFileSync(join(consumerDir, 'consumer-subpath.ts'), CONSUMER_SUBPATH_TS);
-    writeFileSync(join(consumerDir, 'tsconfig.subpath.json'), CONSUMER_SUBPATH_TSCONFIG);
-    const tscSubpath = run('node', [consumerTscBin, '--noEmit', '-p', 'tsconfig.subpath.json'], consumerDir);
-    checks.push({
-      name: 'TypeScript subpath-entry (renderer-sdk) type-check',
-      ok: tscSubpath.code === 0,
-      detail: tscSubpath.code === 0 ? undefined : tscSubpath.output.trim().split('\n').slice(-5).join(' '),
-    });
+    checks.push(...legacyShimChecks(consumerDir));
 
     return { ok: checks.every(c => c.ok), consumerDir, checks };
   } finally {
@@ -291,21 +542,18 @@ if (import.meta.url.startsWith('file:') && fileURLToPath(import.meta.url) === re
   const staging = mkdtempSync(join(tmpdir(), 'exo-cons-pack-'));
   // Offline-smoke subset (excludes @codexo/exojs-react - its react peers are not
   // resolvable offline). Derived from the single source of truth.
-  const smokePackages = LOCKSTEP_PACKAGES.filter(p => p.inOfflineSmoke);
-  const dirs = smokePackages.map(p => (p.dir === '.' ? repoRoot : resolve(repoRoot, p.dir)));
-  const version = (JSON.parse(readFileSync(resolve(repoRoot, 'package.json'), 'utf8')) as { version: string }).version;
-
-  for (const dir of dirs) {
-    const r = run('pnpm', ['pack', '--pack-destination', staging, '--config.ignore-scripts=true'], dir);
+  // The legacy shims are packed whatever their version: whether a release
+  // publishes them is a release decision, whether they forward correctly is not.
+  const smokeDirs = [...LOCKSTEP_PACKAGES.filter(p => p.inOfflineSmoke), ...LEGACY_SHIMS].map(p => p.dir);
+  let tarballs: string[];
 
-    if (r.code !== 0) {
-      process.stderr.write(`pack failed for ${dir}:\n${r.output}\n`);
-      process.exit(1);
-    }
+  try {
+    tarballs = smokeDirs.map(dir => packPackage(dir === '.' ? repoRoot : resolve(repoRoot, dir), staging));
+  } catch (error) {
+    process.stderr.write(`${(error as Error).message}\n`);
+    process.exit(1);
   }
 
-  const tarballs = smokePackages.map(p => join(staging, `${p.name.replace('@', '').replace('/', '-')}-${version}.tgz`));
-
   process.stdout.write('\n=== verify:external-consumers ===\n');
   const result = verifyExternalConsumers(tarballs);
 
diff --git a/scripts/release/full-zip.ts b/scripts/release/full-zip.ts
index decd68920..883e20400 100644
--- a/scripts/release/full-zip.ts
+++ b/scripts/release/full-zip.ts
@@ -5,9 +5,13 @@
  *
  *   npm/      every lockstep tarball (Core + extensions)
  *   vendor/   every lockstep package's ESM tree, plus Core's single-file
- *             bundles (exo.esm.js, the IIFE pair, the full IIFE pair)
- *   examples/ src/** (TS), js/** (transpiled), assets/**, examples.json
- *   site/     the built static site (itself servable; references ./vendor + ./examples)
+ *             ESM bundles (exo.esm.js, exo.debug.esm.js)
+ *   examples/ src/** (TS), js/** (transpiled), examples.json
+ *   site/     the built static site (itself servable; references ./vendor + ./examples).
+ *             The examples load their media through @codexo/exojs-demo-assets,
+ *             which the site serves with its standard media under
+ *             vendor/exojs-demo-assets/; the authoring media under
+ *             examples/assets/ are not shipped.
  *   README.md CHANGELOG.md LICENSE release-manifest.json checksums.sha256
  *
  * `assembleFullReleaseTree` is the testable core (pure fs assembly + a
@@ -19,7 +23,7 @@ import { basename, dirname, join, relative, resolve } from 'node:path';
 import { ModuleKind, ScriptTarget, transpileModule } from 'typescript';
 
 import type { CommandRunner } from './command-runner.ts';
-import { LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
+import { isEngineExtension, LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
 import { type ReleaseManifest, renderChecksums, serializeManifest, sha256File } from './manifest.ts';
 
 export interface AssembleOptions {
@@ -40,20 +44,7 @@ export interface AssembleOptions {
  * mirrors the bundle entries of the root `package.json#files`; the test suite
  * pins the two together.
  */
-export const CORE_BUNDLE_FILES = [
-  'exo.esm.js',
-  'exo.esm.js.map',
-  'exo.debug.esm.js',
-  'exo.debug.esm.js.map',
-  'exo.iife.js',
-  'exo.iife.js.map',
-  'exo.iife.min.js',
-  'exo.iife.min.js.map',
-  'exo.full.iife.js',
-  'exo.full.iife.js.map',
-  'exo.full.iife.min.js',
-  'exo.full.iife.min.js.map',
-] as const;
+export const CORE_BUNDLE_FILES = ['exo.esm.js', 'exo.esm.js.map', 'exo.debug.esm.js', 'exo.debug.esm.js.map'] as const;
 
 /** `vendor/<dir>` for a lockstep package: the npm name without its scope. */
 export const vendorDirFor = (packageName: string): string => packageName.replace(/^@codexo\//, '');
@@ -199,7 +190,8 @@ const assembleExamples = (rootDir: string, examplesOut: string): void => {
   for (const file of walk(examplesSrc)) {
     const rel = relative(examplesSrc, file).split('\\').join('/');
 
-    // assets/ and shared/ are copied wholesale below; skip here.
+    // assets/ is the authoring source of the demo-assets package, not shipped
+    // media; shared/ ships with the site's examples snapshot.
     if (rel.startsWith('assets/') || rel.startsWith('shared/')) {
       continue;
     }
@@ -215,8 +207,6 @@ const assembleExamples = (rootDir: string, examplesOut: string): void => {
     }
   }
 
-  // assets/** verbatim (catalog + binaries), and examples.json.
-  cpSync(resolve(examplesSrc, 'assets'), join(examplesOut, 'assets'), { recursive: true });
   cpSync(resolve(examplesSrc, 'examples.json'), join(examplesOut, 'examples.json'));
 };
 
@@ -249,7 +239,7 @@ export const assembleFullReleaseTree = (options: AssembleOptions): AssembleResul
   // something they run once to write a project. It has no `dist/esm` to vendor,
   // and requiring one would fail the release on a shape it never had.
   for (const pkg of LOCKSTEP_PACKAGES) {
-    if (!pkg.isExtension && pkg.dir !== '.') {
+    if (!isEngineExtension(pkg) && pkg.dir !== '.') {
       continue;
     }
 
@@ -263,7 +253,7 @@ export const assembleFullReleaseTree = (options: AssembleOptions): AssembleResul
     const vendorDir = join(treeDir, 'vendor', vendorDirFor(pkg.name));
     cpSync(from, join(vendorDir, 'esm'), { recursive: true });
 
-    if (pkg.isExtension) {
+    if (isEngineExtension(pkg)) {
       continue;
     }
 
@@ -280,7 +270,7 @@ export const assembleFullReleaseTree = (options: AssembleOptions): AssembleResul
     }
   }
 
-  // examples/ - src/** (TS), js/** (transpiled), assets/**, examples.json.
+  // examples/ - src/** (TS), js/** (transpiled), examples.json.
   assembleExamples(options.rootDir, join(treeDir, 'examples'));
 
   // site/ - the full built static site, plus the server that makes it usable.
diff --git a/scripts/release/legacy-shims.ts b/scripts/release/legacy-shims.ts
new file mode 100644
index 000000000..9f354af59
--- /dev/null
+++ b/scripts/release/legacy-shims.ts
@@ -0,0 +1,356 @@
+/**
+ * The legacy shim packages: generated forwarders that keep the seven retired
+ * runtime package names importable on the 0.20 line.
+ *
+ *   tsx scripts/release/legacy-shims.ts           # write every shim package
+ *   tsx scripts/release/legacy-shims.ts --check   # exit 1 if any file differs
+ *
+ * Every file of a shim package is generated from the release matrix
+ * (`LEGACY_SHIMS`), so the seven packages cannot drift apart. Only `version`
+ * and the Core peer range are owned by the release cut: the generator keeps
+ * whatever the manifest on disk carries, and a new shim starts on the lockstep
+ * version.
+ *
+ * The files are committed rather than built: a release packs with
+ * `--ignore-scripts`, and a forwarder has nothing to compile.
+ */
+import { execFileSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { LEGACY_SHIMS, type LegacyShim, type LegacyShimEntry } from './lockstep-packages.ts';
+import { deprecationMessage } from './registry-plan.ts';
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
+
+const REPOSITORY_URL = 'git+https://github.com/Exoridus/ExoJS.git';
+
+/** `MAJOR.MINOR` of an exact version. */
+export const lineOf = (version: string): string => version.split('.').slice(0, 2).join('.');
+
+/** The Core peer range a shim at `version` declares. */
+export const shimPeerRange = (version: string): string => `${lineOf(version)}.x`;
+
+const entryFileBase = (entry: LegacyShimEntry): string => (entry.entry === '.' ? 'index' : entry.entry.slice(2));
+
+const forwarderSource = (entry: LegacyShimEntry, declaration: boolean): string => {
+  if (entry.names === undefined) {
+    return `export * from '${entry.target}';\n`;
+  }
+
+  const names = declaration ? [...entry.names.values, ...entry.names.types.map(name => `type ${name}`)] : entry.names.values;
+
+  return `export { ${names.join(', ')} } from '${entry.target}';\n`;
+};
+
+const readme = (shim: LegacyShim): string => {
+  const rows = shim.entries.map(entry => {
+    const from = entry.entry === '.' ? shim.name : `${shim.name}/${entry.entry.slice(2)}`;
+    const forwarded =
+      entry.names === undefined ? 'everything' : [...entry.names.values, ...entry.names.types].map(name => `\`${name}\``).join(', ');
+
+    return `| \`${from}\` | \`${entry.target}\` | ${forwarded} |`;
+  });
+
+  return [
+    `# ${shim.name}`,
+    '',
+    `${deprecationMessage(shim.subpath)}`,
+    '',
+    `Every export of this package is the very binding its Core entry exports, so code that still imports \`${shim.name}\` shares one engine instance with code that already imports \`@codexo/exojs/${shim.subpath}\`. The package contains no implementation of its own and depends on nothing but its \`@codexo/exojs\` peer.`,
+    '',
+    '| Import | Replace with | Forwards |',
+    '| --- | --- | --- |',
+    ...rows,
+    '',
+    '## Migrating',
+    '',
+    `Change each import to the Core entry in the table, then remove this package with \`npm uninstall ${shim.name}\`. \`@codexo/exojs\` already contains the module; there is nothing else to install. The migration guide on the ExoJS site lists every renamed import.`,
+    '',
+  ].join('\n');
+};
+
+const manifest = (shim: LegacyShim, version: string, peerRange: string): string => {
+  const exportsMap: Record<string, unknown> = {};
+  const files: string[] = [];
+
+  for (const entry of shim.entries) {
+    const base = entryFileBase(entry);
+    exportsMap[entry.entry] = { types: `./${base}.d.ts`, import: `./${base}.js`, default: `./${base}.js` };
+    files.push(`${base}.js`, `${base}.d.ts`);
+  }
+
+  exportsMap['./package.json'] = './package.json';
+
+  return `${JSON.stringify(
+    {
+      name: shim.name,
+      version,
+      description: `Compatibility shim that forwards to @codexo/exojs/${shim.subpath}. Since ExoJS v0.20, import from @codexo/exojs/${shim.subpath}.`,
+      repository: { type: 'git', url: REPOSITORY_URL, directory: shim.dir },
+      type: 'module',
+      sideEffects: false,
+      main: './index.js',
+      types: './index.d.ts',
+      exports: exportsMap,
+      files: [...files, 'README.md', 'LICENSE'],
+      peerDependencies: { '@codexo/exojs': peerRange },
+      // Satisfies the peer inside the workspace, where pnpm would otherwise try
+      // to install the peer range from the registry. Never installed for a
+      // consumer, and packing rewrites it to the exact Core version.
+      devDependencies: { '@codexo/exojs': 'workspace:*' },
+      license: 'MIT',
+      publishConfig: { access: 'public' },
+    },
+    null,
+    2,
+  )}\n`;
+};
+
+/** Lockstep version every new shim starts on. */
+const lockstepVersion = (): string => (JSON.parse(readFileSync(resolve(repoRoot, 'package.json'), 'utf8')) as { version: string }).version;
+
+/** The version and peer range the shim manifest on disk carries, or the lockstep start values for a new shim. */
+export const currentShimVersion = (shim: LegacyShim, rootDir = repoRoot): { version: string; peerRange: string } => {
+  const path = resolve(rootDir, shim.dir, 'package.json');
+
+  if (!existsSync(path)) {
+    const version = lockstepVersion();
+
+    return { version, peerRange: shimPeerRange(version) };
+  }
+
+  const pkg = JSON.parse(readFileSync(path, 'utf8')) as { version: string; peerDependencies?: Record<string, string> };
+
+  return { version: pkg.version, peerRange: pkg.peerDependencies?.['@codexo/exojs'] ?? shimPeerRange(pkg.version) };
+};
+
+/** Every file of a shim package, by path relative to the package directory. */
+export const shimFiles = (shim: LegacyShim, options: { version: string; peerRange: string; license: string }): Map<string, string> => {
+  const files = new Map<string, string>();
+  files.set('package.json', manifest(shim, options.version, options.peerRange));
+
+  for (const entry of shim.entries) {
+    const base = entryFileBase(entry);
+    files.set(`${base}.js`, forwarderSource(entry, false));
+    files.set(`${base}.d.ts`, forwarderSource(entry, true));
+  }
+
+  files.set('README.md', readme(shim));
+  files.set('LICENSE', options.license);
+
+  return files;
+};
+
+/**
+ * Hash of what a shim forwards: its export map and forwarder files. The
+ * version, peer range, README and LICENSE are left out - a change there is no
+ * reason to publish a new version of the shim.
+ */
+export const forwarderFingerprint = (files: ReadonlyMap<string, string>): string => {
+  const hash = createHash('sha256');
+  const pkg = JSON.parse(files.get('package.json') ?? '{}') as { exports?: unknown };
+  hash.update(JSON.stringify(pkg.exports ?? null));
+
+  for (const path of [...files.keys()].filter(path => /\.(?:js|d\.ts)$/.test(path)).sort()) {
+    hash.update(`\0${path}\0${files.get(path) ?? ''}`);
+  }
+
+  return hash.digest('hex');
+};
+
+/**
+ * The published files of a shim as `read` returns them (`undefined` for a
+ * missing file), or `undefined` when the shim has no manifest there.
+ */
+export const readShimFiles = (read: (path: string) => string | undefined): Map<string, string> | undefined => {
+  const manifestText = read('package.json');
+
+  if (manifestText === undefined) {
+    return undefined;
+  }
+
+  const files = new Map<string, string>([['package.json', manifestText]]);
+
+  for (const path of (JSON.parse(manifestText) as { files?: string[] }).files ?? []) {
+    files.set(path, read(path) ?? '');
+  }
+
+  return files;
+};
+
+/**
+ * Whether a shim's forwarders differ from the ones published under
+ * `currentVersion`, read from that version's release tag. A shim with no tagged
+ * files counts as changed: nothing proves what that version forwarded.
+ */
+export const shimForwarderChanged = (rootDir: string, dir: string, currentVersion: string): boolean => {
+  const fromTag = readShimFiles(path => {
+    try {
+      return execFileSync('git', ['show', `v${currentVersion}:${dir}/${path}`], { encoding: 'utf8', stdio: 'pipe', cwd: rootDir });
+    } catch {
+      return;
+    }
+  });
+  const onDisk = readShimFiles(path => {
+    try {
+      return readFileSync(resolve(rootDir, dir, path), 'utf8');
+    } catch {
+      return;
+    }
+  });
+
+  return fromTag === undefined || onDisk === undefined || forwarderFingerprint(fromTag) !== forwarderFingerprint(onDisk);
+};
+
+export type ShimCutDecision =
+  | { readonly action: 'set'; readonly version: string; readonly peerRange: string; readonly reason: string }
+  | { readonly action: 'keep'; readonly reason: string };
+
+/**
+ * What the release cut to `releaseVersion` does to a shim currently at
+ * `currentVersion`. A shim is set to the release version when the cut opens
+ * its line, or when its forwarders changed since the version it is on;
+ * otherwise it keeps its version and is not republished. A cut on any other
+ * line never touches it: earlier lines are history, later ones are not
+ * promised.
+ */
+export const planShimCut = (input: {
+  readonly line: string;
+  readonly currentVersion: string;
+  readonly releaseVersion: string;
+  readonly forwarderChanged: boolean;
+}): ShimCutDecision => {
+  const releaseLine = lineOf(input.releaseVersion);
+
+  if (releaseLine !== input.line) {
+    return { action: 'keep', reason: `the cut is on ${releaseLine}, the shim serves ${input.line} only` };
+  }
+
+  if (lineOf(input.currentVersion) !== input.line) {
+    return {
+      action: 'set',
+      version: input.releaseVersion,
+      peerRange: shimPeerRange(input.releaseVersion),
+      reason: `first release on the ${input.line} line`,
+    };
+  }
+
+  if (input.forwarderChanged) {
+    return {
+      action: 'set',
+      version: input.releaseVersion,
+      peerRange: shimPeerRange(input.releaseVersion),
+      reason: `forwarders changed since ${input.currentVersion}`,
+    };
+  }
+
+  return { action: 'keep', reason: `forwarders unchanged since ${input.currentVersion}; not republished` };
+};
+
+/** Whether a shim at `version` is published by the release of `releaseVersion`. */
+export const isShimDue = (shim: { readonly line: string }, version: string, releaseVersion: string): boolean =>
+  version === releaseVersion && lineOf(version) === shim.line;
+
+/** What the release of a version does with one shim, as the registry plan reports it. */
+export interface ShimReleaseStatus {
+  readonly name: string;
+  readonly subpath: string;
+  readonly line: string;
+  /** The version the shim manifest carries now. */
+  readonly currentVersion: string;
+  /** The version the release publishes, or the one the shim keeps. */
+  readonly version: string;
+  readonly publish: boolean;
+  readonly reason: string;
+  /** {@link forwarderFingerprint} of the files on disk. */
+  readonly fingerprint: string;
+}
+
+/**
+ * The release status of `shim` for `releaseVersion`: published when the cut set
+ * (or, run before the cut, would set) its version to the release, kept
+ * otherwise.
+ */
+export const shimReleaseStatus = (rootDir: string, shim: LegacyShim, releaseVersion: string): ShimReleaseStatus => {
+  const files = readShimFiles(path => {
+    try {
+      return readFileSync(resolve(rootDir, shim.dir, path), 'utf8');
+    } catch {
+      return;
+    }
+  });
+
+  if (files === undefined) {
+    throw new Error(`${shim.name}: no package at ${shim.dir}; run pnpm legacy-shims:generate`);
+  }
+
+  const currentVersion = (JSON.parse(files.get('package.json') ?? '{}') as { version: string }).version;
+  const base = { name: shim.name, subpath: shim.subpath, line: shim.line, currentVersion, fingerprint: forwarderFingerprint(files) };
+
+  if (isShimDue(shim, currentVersion, releaseVersion)) {
+    return { ...base, version: currentVersion, publish: true, reason: `the cut set it to ${releaseVersion}` };
+  }
+
+  const decision = planShimCut({
+    line: shim.line,
+    currentVersion,
+    releaseVersion,
+    forwarderChanged: lineOf(currentVersion) === shim.line && shimForwarderChanged(rootDir, shim.dir, currentVersion),
+  });
+
+  return decision.action === 'set'
+    ? { ...base, version: decision.version, publish: true, reason: `${decision.reason}; the cut sets ${decision.version}` }
+    : { ...base, version: currentVersion, publish: false, reason: decision.reason };
+};
+
+/** Writes (or, with `check`, compares) every shim package. Returns the paths that differ. */
+export const syncLegacyShims = (options: { readonly check: boolean; readonly rootDir?: string }): string[] => {
+  const rootDir = options.rootDir ?? repoRoot;
+  const license = readFileSync(resolve(rootDir, 'LICENSE'), 'utf8');
+  const differing: string[] = [];
+
+  for (const shim of LEGACY_SHIMS) {
+    const dir = resolve(rootDir, shim.dir);
+    const files = shimFiles(shim, { ...currentShimVersion(shim, rootDir), license });
+
+    for (const [path, content] of files) {
+      const target = join(dir, path);
+      const current = existsSync(target) ? readFileSync(target, 'utf8') : undefined;
+
+      if (current === content) {
+        continue;
+      }
+
+      differing.push(`${shim.dir}/${path}`);
+
+      if (!options.check) {
+        mkdirSync(dirname(target), { recursive: true });
+        writeFileSync(target, content);
+      }
+    }
+  }
+
+  return differing;
+};
+
+if (import.meta.url.startsWith('file:') && fileURLToPath(import.meta.url) === resolve(process.argv[1] ?? '')) {
+  const check = process.argv.includes('--check');
+  const differing = syncLegacyShims({ check });
+
+  if (check && differing.length > 0) {
+    console.error(
+      `legacy-shims: ${differing.length} file(s) differ from the release matrix:\n${differing.map(path => `  - ${path}`).join('\n')}`,
+    );
+    console.error('\nRegenerate with: pnpm legacy-shims:generate');
+    process.exit(1);
+  }
+
+  console.log(
+    check
+      ? `legacy-shims: ${LEGACY_SHIMS.length} shim packages match the release matrix.`
+      : `legacy-shims: ${differing.length} file(s) written for ${LEGACY_SHIMS.length} shim packages.`,
+  );
+}
diff --git a/scripts/release/lockstep-packages.ts b/scripts/release/lockstep-packages.ts
index 0c6cc8c72..dcd2e9b66 100644
--- a/scripts/release/lockstep-packages.ts
+++ b/scripts/release/lockstep-packages.ts
@@ -1,10 +1,13 @@
 /**
- * Single source of truth for the lockstep-released ExoJS packages.
+ * Single source of truth for the ExoJS release matrix: which workspace package
+ * plays which role, which ones are released on the engine's lockstep line, and
+ * which runtime modules the Core build compiles into its own tarball.
  *
  * Every release script derives its package list from here - `manifest.ts`
  * (PUBLISH_ORDER), `prepare.ts` (officialPackages), `cut.ts` (bump targets),
- * `run.ts` (build set), `external-consumers.ts` (offline smoke set), and the
- * `verify-*` gates. Adding the N-th package is a single entry in this array
+ * `run.ts` (build set), `external-consumers.ts` (offline smoke set),
+ * `scripts/build.ts` (the runtime modules built into Core), and the `verify-*`
+ * gates. Adding the N-th package is a single entry in one of these arrays
  * instead of a hand-edit across ~10 files.
  *
  * NOT derivable from here (different runtimes - kept in sync manually, guarded
@@ -19,6 +22,31 @@
  *     set (the offline examples site only embeds packages it uses).
  */
 
+/**
+ * What a workspace package is to the release, which decides how it is built,
+ * checked and published:
+ *
+ * - `core`: `@codexo/exojs` itself, built at the repository root.
+ * - `runtime-module`: an optional engine module whose sources live in their own
+ *   workspace directory but ship inside the Core tarball as a subpath export.
+ *   Never published under its own name.
+ * - `adapter`: a separately published library loaded by a running engine; it
+ *   declares the engine as a peer and its built tree is vendored into the
+ *   offline full-zip release.
+ * - `tooling`: build, lint, project and scaffolding tools.
+ * - `content`: optional data packages with no engine code of their own.
+ * - `legacy-shim`: a forwarding package that keeps a retired name importable.
+ *   Not part of the supported product set: it is versioned and published only
+ *   when its forwarders change (`releasesWithEveryCut`).
+ */
+export type PackageRole = 'core' | 'runtime-module' | 'adapter' | 'tooling' | 'content' | 'legacy-shim';
+
+/** Roles whose packages are libraries loaded by a running engine and therefore declare it as a peer. */
+const ENGINE_PEER_ROLES: ReadonlySet<PackageRole> = new Set(['adapter', 'legacy-shim']);
+
+/** Whether a package declares `@codexo/exojs` as a peer and is vendored as an engine extension. */
+export const isEngineExtension = (pkg: { readonly role: PackageRole }): boolean => ENGINE_PEER_ROLES.has(pkg.role);
+
 /** Order is canonical PUBLISH_ORDER: Core first (peer of every extension), then extensions. */
 export interface LockstepPackage {
   /** npm package name. */
@@ -26,17 +54,13 @@ export interface LockstepPackage {
   /** Package directory relative to the repo root (`.` for Core). */
   readonly dir: string;
   /**
-   * Whether this is an engine extension: a library that is loaded *by* a running
-   * `@codexo/exojs`, that declares the engine as a peer, and whose built output
-   * is vendored into the offline full-zip release tree.
-   *
-   * Not the same question as "is released on the engine's version line". Core is
-   * on the line but is not an extension, and so is the app scaffolder: it moves
-   * with the engine release, but it is a command that writes a project rather
-   * than a library the engine loads, so it declares no engine peer and has no
-   * vendored runtime tree.
+   * Release role. Being on the engine's version line is a separate question:
+   * Core is on the line but is not an extension, and so is the app scaffolder,
+   * which moves with the engine release but is a command that writes a project
+   * rather than a library the engine loads, so it declares no engine peer and
+   * has no vendored runtime tree.
    */
-  readonly isExtension: boolean;
+  readonly role: Exclude<PackageRole, 'runtime-module'>;
   /**
    * Whether the package participates in the offline external-consumer smoke
    * (`npm install --offline` + Node/TS import in a throwaway project). `react`
@@ -53,26 +77,162 @@ export interface LockstepPackage {
 }
 
 export const LOCKSTEP_PACKAGES = [
-  { name: '@codexo/exojs', dir: '.', isExtension: false, inOfflineSmoke: true },
-  { name: '@codexo/exojs-particles', dir: 'packages/exojs-particles', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-tilemap', dir: 'packages/exojs-tilemap', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-tiled', dir: 'packages/exojs-tiled', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-physics', dir: 'packages/exojs-physics', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-audio-fx', dir: 'packages/exojs-audio-fx', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-aseprite', dir: 'packages/exojs-aseprite', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-ldtk', dir: 'packages/exojs-ldtk', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-react', dir: 'packages/exojs-react', isExtension: true, inOfflineSmoke: false },
-  { name: '@codexo/exojs-tilemap-physics', dir: 'packages/exojs-tilemap-physics', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-lighting', dir: 'packages/exojs-lighting', isExtension: true, inOfflineSmoke: true },
-  { name: '@codexo/exojs-pathfinding', dir: 'packages/exojs-pathfinding', isExtension: true, inOfflineSmoke: true },
+  { name: '@codexo/exojs', dir: '.', role: 'core', inOfflineSmoke: true },
+  { name: '@codexo/exojs-tiled', dir: 'packages/exojs-tiled', role: 'adapter', inOfflineSmoke: true },
+  { name: '@codexo/exojs-aseprite', dir: 'packages/exojs-aseprite', role: 'adapter', inOfflineSmoke: true },
+  { name: '@codexo/exojs-ldtk', dir: 'packages/exojs-ldtk', role: 'adapter', inOfflineSmoke: true },
+  { name: '@codexo/exojs-react', dir: 'packages/exojs-react', role: 'adapter', inOfflineSmoke: false },
   // The app scaffolder. It is on the engine's line because the version it
   // scaffolds is its own: `create-exo-app@0.19` writes a project that asks for
   // `@codexo/exojs@0.19.x`. The template source carries no engine version, so a
   // scaffolder-only patch never needs a template edit. It is not an extension -
-  // see `isExtension`.
-  { name: 'create-exo-app', dir: 'packages/create-exo-app', isExtension: false, inOfflineSmoke: false, profile: 'cli' },
+  // see `role`.
+  { name: 'create-exo-app', dir: 'packages/create-exo-app', role: 'tooling', inOfflineSmoke: false, profile: 'cli' },
 ] as const satisfies readonly LockstepPackage[];
 
+/**
+ * An optional engine module compiled into the Core package. Its sources stay in
+ * their own workspace directory; the Core build emits them under
+ * `dist/esm/<subpath>/` and the Core manifest exports them as
+ * `@codexo/exojs/<subpath>`, so every consumer shares the one Core instance the
+ * root entry loads.
+ */
+export interface RuntimeModule {
+  /** Workspace package name of the source package. Private; never published. */
+  readonly name: string;
+  /** Source package directory relative to the repo root. */
+  readonly dir: string;
+  readonly role: 'runtime-module';
+  /** Subpath under `@codexo/exojs` and directory under `dist/esm/`. */
+  readonly subpath: string;
+  /** The npm name the module was published under before it moved into Core. */
+  readonly legacyName: string;
+}
+
+export const RUNTIME_MODULES = [
+  {
+    name: '@codexo/exojs-module-tilemap',
+    dir: 'packages/exojs-tilemap',
+    role: 'runtime-module',
+    subpath: 'tilemap',
+    legacyName: '@codexo/exojs-tilemap',
+  },
+  {
+    name: '@codexo/exojs-module-particles',
+    dir: 'packages/exojs-particles',
+    role: 'runtime-module',
+    subpath: 'particles',
+    legacyName: '@codexo/exojs-particles',
+  },
+  {
+    name: '@codexo/exojs-module-audio-fx',
+    dir: 'packages/exojs-audio-fx',
+    role: 'runtime-module',
+    subpath: 'audio-fx',
+    legacyName: '@codexo/exojs-audio-fx',
+  },
+  {
+    name: '@codexo/exojs-module-physics',
+    dir: 'packages/exojs-physics',
+    role: 'runtime-module',
+    subpath: 'physics',
+    legacyName: '@codexo/exojs-physics',
+  },
+  {
+    name: '@codexo/exojs-module-tilemap-physics',
+    dir: 'packages/exojs-tilemap-physics',
+    role: 'runtime-module',
+    subpath: 'tilemap-physics',
+    legacyName: '@codexo/exojs-tilemap-physics',
+  },
+  {
+    name: '@codexo/exojs-module-lighting',
+    dir: 'packages/exojs-lighting',
+    role: 'runtime-module',
+    subpath: 'lighting',
+    legacyName: '@codexo/exojs-lighting',
+  },
+  {
+    name: '@codexo/exojs-module-pathfinding',
+    dir: 'packages/exojs-pathfinding',
+    role: 'runtime-module',
+    subpath: 'pathfinding',
+    legacyName: '@codexo/exojs-pathfinding',
+  },
+] as const satisfies readonly RuntimeModule[];
+
+/** The npm names the runtime modules were published under before they moved into Core. */
+export type LegacyShimName = (typeof RUNTIME_MODULES)[number]['legacyName'];
+
+/**
+ * The one release line the legacy shims serve. Their Core peer is this line's
+ * `.x` range: a later Core line is not promised to keep the forwarded surface,
+ * so the shims are never moved onto it.
+ */
+export const LEGACY_SHIM_LINE = '0.20';
+
+/** One export of a legacy shim package. */
+export interface LegacyShimEntry {
+  /** Export key in the shim manifest (`.` or `./<name>`). */
+  readonly entry: string;
+  /** The Core specifier whose bindings the entry forwards. */
+  readonly target: string;
+  /**
+   * The bindings forwarded, where the target is wider than the retired entry it
+   * replaces. Absent: the target's whole surface is forwarded.
+   */
+  readonly names?: { readonly values: readonly string[]; readonly types: readonly string[] };
+}
+
+/**
+ * A retired runtime package name kept importable on {@link LEGACY_SHIM_LINE}.
+ * The package holds forwarders only - every binding is the object the Core
+ * subpath exports - and peers on Core alone.
+ */
+export interface LegacyShim {
+  readonly name: LegacyShimName;
+  /** Package directory relative to the repo root. */
+  readonly dir: string;
+  readonly role: 'legacy-shim';
+  /** The Core subpath that replaced the package. */
+  readonly subpath: string;
+  readonly line: string;
+  readonly entries: readonly LegacyShimEntry[];
+}
+
+/** Entries a retired package had beyond its root, keyed by runtime module subpath. */
+const LEGACY_EXTRA_ENTRIES: Readonly<Record<string, readonly LegacyShimEntry[]>> = {
+  physics: [
+    {
+      entry: './debug',
+      target: '@codexo/exojs/debug',
+      names: { values: ['PhysicsDebugDraw'], types: ['PhysicsDebugDrawOptions'] },
+    },
+  ],
+};
+
+export const LEGACY_SHIMS: readonly LegacyShim[] = RUNTIME_MODULES.map(module => ({
+  name: module.legacyName,
+  // Below `packages/legacy/` rather than beside the module sources: the source
+  // directories keep the old names, and every discovery that walks the direct
+  // children of `packages/` treats what it finds as an active product.
+  dir: `packages/legacy/${module.legacyName.slice('@codexo/'.length)}`,
+  role: 'legacy-shim',
+  subpath: module.subpath,
+  line: LEGACY_SHIM_LINE,
+  entries: [{ entry: '.', target: `@codexo/exojs/${module.subpath}` }, ...(LEGACY_EXTRA_ENTRIES[module.subpath] ?? [])],
+}));
+
+/**
+ * Whether a coordinated release gives the package a new version every time.
+ * A legacy shim's files name Core subpaths rather than a Core version, so an
+ * unchanged shim keeps serving every Core patch on its line: it gets a new
+ * version only when the forwarders it publishes change (see
+ * `legacy-shims.ts#planShimCut`), and is published only in the release that
+ * sets that version.
+ */
+export const releasesWithEveryCut = (pkg: { readonly role: PackageRole }): boolean => pkg.role !== 'legacy-shim';
+
 /**
  * Published packages that are deliberately NOT on the engine's lockstep version
  * line, with the reason each one is off it.
@@ -89,6 +249,7 @@ export interface IndependentPackage {
   readonly name: string;
   /** Package directory relative to the repo root. */
   readonly dir: string;
+  readonly role: 'tooling' | 'content';
   /** Why this package is not on the lockstep line. */
   readonly reason: string;
 }
@@ -97,19 +258,28 @@ export const INDEPENDENT_PACKAGES = [
   {
     name: '@codexo/exojs-build',
     dir: 'packages/exojs-build',
+    role: 'tooling',
     reason: 'build-time tooling; a consumer keeps one version across engine upgrades and it depends on no engine API',
   },
   {
     name: '@codexo/exojs-cli',
     dir: 'packages/exojs-cli',
+    role: 'tooling',
     reason: 'project tooling; installed once via npx and never pinned to an engine version, and it depends on no engine API',
   },
   {
     name: '@codexo/eslint-plugin-exojs',
     dir: 'packages/eslint-plugin-exojs',
+    role: 'tooling',
     reason:
       'lint tooling; a consumer keeps one version in devDependencies across engine upgrades and its rules read source text, not engine API',
   },
+  {
+    name: '@codexo/exojs-demo-assets',
+    dir: 'packages/exojs-demo-assets',
+    role: 'content',
+    reason: 'optional demo media; content versions move independently of engine patches, and the descriptors only use public Core APIs',
+  },
 ] as const satisfies readonly IndependentPackage[];
 
 /**
@@ -126,8 +296,20 @@ const TOOLING_PACKAGE_NAMES = new Set<string>(['@codexo/exojs-build', '@codexo/e
 
 export const TOOLING_PACKAGES = INDEPENDENT_PACKAGES.filter(p => TOOLING_PACKAGE_NAMES.has(p.name));
 
-/** Union of the official package names (literal type, preserved for `OfficialPackageName`). */
-export type OfficialPackageName = (typeof LOCKSTEP_PACKAGES)[number]['name'];
+/** Union of the names a coordinated release can publish (literal type). */
+export type OfficialPackageName = (typeof LOCKSTEP_PACKAGES)[number]['name'] | LegacyShimName;
 
-/** The extension subset (everything except Core). */
-export const EXTENSION_PACKAGES = LOCKSTEP_PACKAGES.filter(p => p.isExtension);
+/** The engine-extension subset: published libraries that declare the engine as a peer. */
+export const EXTENSION_PACKAGES = LOCKSTEP_PACKAGES.filter(isEngineExtension);
+
+/**
+ * Every workspace package the release knows about, by role. The published sets
+ * above and the build set below are its projections; a package missing here is
+ * neither built into Core nor published.
+ */
+export const RELEASE_MATRIX: ReadonlyArray<{ readonly name: string; readonly dir: string; readonly role: PackageRole }> = [
+  ...LOCKSTEP_PACKAGES,
+  ...RUNTIME_MODULES,
+  ...INDEPENDENT_PACKAGES,
+  ...LEGACY_SHIMS,
+];
diff --git a/scripts/release/manifest.ts b/scripts/release/manifest.ts
index 5e1a13eaa..18ef790e0 100644
--- a/scripts/release/manifest.ts
+++ b/scripts/release/manifest.ts
@@ -11,10 +11,15 @@
 import { createHash } from 'node:crypto';
 import { readFileSync, statSync } from 'node:fs';
 
-import { LOCKSTEP_PACKAGES, type OfficialPackageName } from './lockstep-packages.ts';
+import { LEGACY_SHIMS, LOCKSTEP_PACKAGES, type OfficialPackageName } from './lockstep-packages.ts';
 
-/** Lockstep publish order - Core first (peer of the extensions), then the extensions. */
-export const PUBLISH_ORDER: readonly OfficialPackageName[] = LOCKSTEP_PACKAGES.map(p => p.name);
+/**
+ * Publish order - Core first (peer of everything else), then the lockstep
+ * packages, then the legacy shims. A release publishes a shim only when it set
+ * the shim's version (see `officialPackages`), so most releases publish a
+ * prefix of this list.
+ */
+export const PUBLISH_ORDER: readonly OfficialPackageName[] = [...LOCKSTEP_PACKAGES.map(p => p.name), ...LEGACY_SHIMS.map(p => p.name)];
 
 export type { OfficialPackageName };
 
diff --git a/scripts/release/prepare.ts b/scripts/release/prepare.ts
index 68c6d1c99..7c6667dd9 100644
--- a/scripts/release/prepare.ts
+++ b/scripts/release/prepare.ts
@@ -13,7 +13,8 @@ import { mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { basename, resolve } from 'node:path';
 
 import type { CommandRunner } from './command-runner.ts';
-import { LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
+import { isShimDue } from './legacy-shims.ts';
+import { LEGACY_SHIMS, LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
 import {
   type OfficialPackageName,
   PUBLISH_ORDER,
@@ -44,9 +45,20 @@ const readVersion = (packageJsonPath: string): { name: string; version: string }
   return { name: pkg.name, version: pkg.version };
 };
 
-/** Resolves the lockstep official packages in canonical publish order (PUBLISH_ORDER). */
-export const officialPackages = (rootDir: string): OfficialPackage[] =>
-  LOCKSTEP_PACKAGES.map(p => ({ name: p.name, dir: p.dir === '.' ? rootDir : resolve(rootDir, p.dir) }));
+/**
+ * The packages a release packs, in PUBLISH_ORDER: every lockstep package, then
+ * the legacy shims whose version the cut set to this release. An unchanged shim
+ * stays on the version it was last published under and is left out.
+ */
+export const officialPackages = (rootDir: string): OfficialPackage[] => {
+  const release = readVersion(resolve(rootDir, 'package.json')).version;
+  const lockstep = LOCKSTEP_PACKAGES.map(p => ({ name: p.name, dir: p.dir === '.' ? rootDir : resolve(rootDir, p.dir) }));
+  const shims = LEGACY_SHIMS.map(shim => ({ name: shim.name, dir: resolve(rootDir, shim.dir), line: shim.line })).filter(shim =>
+    isShimDue(shim, readVersion(resolve(shim.dir, 'package.json')).version, release),
+  );
+
+  return [...lockstep, ...shims.map(({ name, dir }) => ({ name, dir }))];
+};
 
 /**
  * Asserts all official packages share one lockstep version and returns it.
diff --git a/scripts/release/registry-plan.ts b/scripts/release/registry-plan.ts
new file mode 100644
index 000000000..6e0eb3801
--- /dev/null
+++ b/scripts/release/registry-plan.ts
@@ -0,0 +1,205 @@
+/**
+ * The registry action list of a coordinated release, as a dry run.
+ *
+ * `buildRegistryPlan` turns the versions a release publishes into the explicit,
+ * ordered list of registry actions the release would take: publish Core,
+ * confirm it is available and consumable, publish the lockstep packages and the
+ * legacy shims the release sets, confirm those, and finally deprecate exactly
+ * the shim versions this release published. `writeRegistryPlan` records the
+ * list for review.
+ *
+ * Nothing here talks to a registry or starts a process: the commands in the
+ * plan are text for a person or a later, separately authorised step. There is
+ * no unpublish action, a deprecation always names one exact version, and no
+ * action may target a version before the legacy shim line.
+ */
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { LEGACY_SHIM_LINE } from './lockstep-packages.ts';
+
+/** The deprecation message attached to every published shim version. */
+export const deprecationMessage = (subpath: string): string =>
+  `Since ExoJS v0.20, import from @codexo/exojs/${subpath}. This package is a compatibility shim for the 0.20 line; no independent feature development.`;
+
+export interface PlannedPackage {
+  readonly name: string;
+  readonly version: string;
+}
+
+export interface PlannedShim extends PlannedPackage {
+  readonly subpath: string;
+  /** The release line the shim serves. */
+  readonly line: string;
+  readonly publish: boolean;
+  /** Why the shim is published or kept. */
+  readonly reason: string;
+  /** Hash of the forwarders the version publishes. */
+  readonly fingerprint: string;
+}
+
+export interface RegistryPlanInput {
+  readonly releaseVersion: string;
+  readonly distTag: string;
+  readonly core: PlannedPackage;
+  /** The lockstep packages after Core, in publish order. */
+  readonly lockstep: readonly PlannedPackage[];
+  readonly shims: readonly PlannedShim[];
+}
+
+export type RegistryAction =
+  | { readonly kind: 'publish'; readonly name: string; readonly version: string; readonly command: string }
+  | { readonly kind: 'verify'; readonly targets: readonly string[]; readonly commands: readonly string[] }
+  | { readonly kind: 'deprecate'; readonly name: string; readonly version: string; readonly message: string; readonly command: string };
+
+export interface RegistryPlan {
+  readonly releaseVersion: string;
+  readonly distTag: string;
+  readonly actions: readonly RegistryAction[];
+  /** Every shim with the reason it is or is not part of this release. */
+  readonly shims: readonly PlannedShim[];
+}
+
+/** A plan that would touch the registry in a way a release must never do. */
+export class RegistryPlanError extends Error {
+  public override readonly name = 'RegistryPlanError';
+}
+
+const EXACT_VERSION = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*)?$/;
+
+const lineOf = (version: string): string => version.split('.').slice(0, 2).join('.');
+
+const compareLines = (a: string, b: string): number => {
+  const [aMajor = 0, aMinor = 0] = a.split('.').map(Number);
+  const [bMajor = 0, bMinor = 0] = b.split('.').map(Number);
+
+  return aMajor - bMajor || aMinor - bMinor;
+};
+
+const assertExact = (label: string, version: string): void => {
+  if (!EXACT_VERSION.test(version)) {
+    throw new RegistryPlanError(`${label}: "${version}" is not one exact version; ranges, wildcards and tags are refused`);
+  }
+};
+
+const shellQuote = (text: string): string => `"${text.replaceAll('"', '\\"')}"`;
+
+const publishAction = (pkg: PlannedPackage, distTag: string): RegistryAction => ({
+  kind: 'publish',
+  name: pkg.name,
+  version: pkg.version,
+  command: `npm publish <${pkg.name}@${pkg.version} tarball> --tag ${distTag} --access public --provenance`,
+});
+
+const verifyAction = (packages: readonly PlannedPackage[]): RegistryAction => ({
+  kind: 'verify',
+  targets: packages.map(pkg => `${pkg.name}@${pkg.version}`),
+  commands: [
+    ...packages.map(pkg => `npm view ${pkg.name}@${pkg.version} version`),
+    `install ${packages.map(pkg => `${pkg.name}@${pkg.version}`).join(' ')} from the registry into a fresh project and run the external consumer checks against it`,
+  ],
+});
+
+/**
+ * Builds the ordered registry action list. Throws {@link RegistryPlanError}
+ * for a version that is not one exact version, for a release before the shim
+ * line, for a shim published on a line it does not serve or under another
+ * version than the release, and for a package that appears twice.
+ */
+export const buildRegistryPlan = (input: RegistryPlanInput): RegistryPlan => {
+  assertExact('release', input.releaseVersion);
+
+  if (compareLines(lineOf(input.releaseVersion), LEGACY_SHIM_LINE) < 0) {
+    throw new RegistryPlanError(
+      `release ${input.releaseVersion} is before the ${LEGACY_SHIM_LINE} line; earlier releases are historical and get no registry action`,
+    );
+  }
+
+  const seen = new Set<string>();
+
+  for (const pkg of [input.core, ...input.lockstep, ...input.shims]) {
+    assertExact(pkg.name, pkg.version);
+
+    if (seen.has(pkg.name)) {
+      throw new RegistryPlanError(`${pkg.name} appears twice in the plan`);
+    }
+
+    seen.add(pkg.name);
+  }
+
+  for (const pkg of [input.core, ...input.lockstep]) {
+    if (pkg.version !== input.releaseVersion) {
+      throw new RegistryPlanError(`${pkg.name}@${pkg.version} is not on the release version ${input.releaseVersion}`);
+    }
+  }
+
+  const published = input.shims.filter(shim => shim.publish);
+
+  for (const shim of published) {
+    if (lineOf(shim.version) !== shim.line) {
+      throw new RegistryPlanError(`${shim.name}@${shim.version} is not on the ${shim.line} line the shim serves`);
+    }
+
+    if (shim.version !== input.releaseVersion) {
+      throw new RegistryPlanError(`${shim.name}@${shim.version} would be published by the ${input.releaseVersion} release`);
+    }
+  }
+
+  const second = [...input.lockstep, ...published];
+  const actions: RegistryAction[] = [
+    publishAction(input.core, input.distTag),
+    verifyAction([input.core]),
+    ...second.map(pkg => publishAction(pkg, input.distTag)),
+    ...(second.length > 0 ? [verifyAction(second)] : []),
+    ...published.map((shim): RegistryAction => ({
+      kind: 'deprecate',
+      name: shim.name,
+      version: shim.version,
+      message: deprecationMessage(shim.subpath),
+      command: `npm deprecate ${shim.name}@${shim.version} ${shellQuote(deprecationMessage(shim.subpath))}`,
+    })),
+  ];
+
+  return { releaseVersion: input.releaseVersion, distTag: input.distTag, actions, shims: input.shims };
+};
+
+/** Human-readable rendering of a plan, one numbered action per block. */
+export const renderRegistryPlan = (plan: RegistryPlan): string => {
+  const lines = [
+    `Registry plan for v${plan.releaseVersion} (DRY RUN - nothing here has been or will be executed)`,
+    `dist-tag: ${plan.distTag}`,
+    '',
+  ];
+
+  plan.actions.forEach((action, index) => {
+    const step = `${index + 1}.`;
+
+    if (action.kind === 'verify') {
+      lines.push(`${step} verify ${action.targets.join(', ')}`, ...action.commands.map(command => `     ${command}`));
+    } else {
+      lines.push(`${step} ${action.kind} ${action.name}@${action.version}`, `     ${action.command}`);
+    }
+  });
+
+  lines.push('', 'Legacy shims:');
+
+  for (const shim of plan.shims) {
+    lines.push(
+      `  ${shim.name}@${shim.version} -> @codexo/exojs/${shim.subpath}: ${shim.publish ? 'publish + deprecate' : 'not republished'} (${shim.reason})`,
+      `    forwarders sha256 ${shim.fingerprint}`,
+    );
+  }
+
+  return `${lines.join('\n')}\n`;
+};
+
+/** Writes `registry-plan.json` and `registry-plan.txt` into `outDir` and returns their paths. */
+export const writeRegistryPlan = (plan: RegistryPlan, outDir: string): { json: string; text: string } => {
+  mkdirSync(outDir, { recursive: true });
+  const json = join(outDir, 'registry-plan.json');
+  const text = join(outDir, 'registry-plan.txt');
+  writeFileSync(json, `${JSON.stringify(plan, null, 2)}\n`, 'utf8');
+  writeFileSync(text, renderRegistryPlan(plan), 'utf8');
+
+  return { json, text };
+};
diff --git a/scripts/release/run.ts b/scripts/release/run.ts
index a5a0c2756..bd0748085 100644
--- a/scripts/release/run.ts
+++ b/scripts/release/run.ts
@@ -8,6 +8,7 @@
  *   tsx scripts/release/run.ts publish   [--execute] [--no-check-existing]
  *   tsx scripts/release/run.ts bootstrap <package> [--execute] [--skip-build]
  *   tsx scripts/release/run.ts publish-independent <package> [--execute] [--skip-build]
+ *   tsx scripts/release/run.ts registry-plan [--version X.Y.Z]
  *
  * `prepare` builds (optionally), freezes the exact source revision (failing on
  * a dirty tree or unknown revision), packs one tarball per lockstep package WITHOUT
@@ -22,6 +23,12 @@
  * `publish-independent` publishes a further version of a package that is off
  * the engine's lockstep line, which no coordinated release ever touches. Both
  * stand outside the build-once pipeline and touch one package each.
+ *
+ * `registry-plan` prints and records (`.release/registry-plan.{json,txt}`) the
+ * ordered registry actions of the release of `--version` (default: the current
+ * Core version), including which legacy shims it publishes and deprecates and
+ * why the others are not republished. It is a dry run only: it reads the
+ * working tree and release tags and has no execute mode.
  */
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
@@ -34,10 +41,12 @@ import { bootstrapPublish, bootstrapTargets } from './bootstrap-publish.ts';
 import { createExecRunner } from './command-runner.ts';
 import { verifyExternalConsumers } from './external-consumers.ts';
 import { assembleFullReleaseTree, compressTree, treeBytes } from './full-zip.ts';
-import { LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
+import { shimReleaseStatus } from './legacy-shims.ts';
+import { LEGACY_SHIMS, LOCKSTEP_PACKAGES } from './lockstep-packages.ts';
 import { type ReleaseManifest, renderChecksums, serializeManifest } from './manifest.ts';
 import { prepareRelease } from './prepare.ts';
 import { defaultPublishOptions, publishRelease } from './publish.ts';
+import { buildRegistryPlan, RegistryPlanError, renderRegistryPlan, writeRegistryPlan } from './registry-plan.ts';
 
 const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
 const releaseDir = resolve(repoRoot, '.release');
@@ -183,7 +192,12 @@ const doPrepare = (): void => {
     // `react`/`react-dom` peers cannot be resolved in an offline throwaway
     // project. attw still type-checks every packed tarball (react included).
     // Literal union from `as const` again - the manifest supplies plain strings.
-    const smokeNames: ReadonlySet<string> = new Set(LOCKSTEP_PACKAGES.filter(p => p.inOfflineSmoke).map(p => p.name));
+    // The legacy shims a release packs are smoke-tested with it: they peer on Core
+    // alone, so they install offline next to the Core tarball.
+    const smokeNames: ReadonlySet<string> = new Set([
+      ...LOCKSTEP_PACKAGES.filter(p => p.inOfflineSmoke).map(p => p.name),
+      ...LEGACY_SHIMS.map(p => p.name),
+    ]);
     const smokeTarballs = manifest.packages.filter(p => smokeNames.has(p.name)).map(p => resolve(stagingDir, p.file));
     const consumers = verifyExternalConsumers(smokeTarballs);
 
@@ -330,6 +344,36 @@ const doSinglePackage = (mode: 'bootstrap' | 'release'): void => {
   log(`  Next: ${report.followUp ?? ''}`);
 };
 
+const doRegistryPlan = (): void => {
+  const versionIndex = argv.indexOf('--version');
+  const core = JSON.parse(readFileSync(resolve(repoRoot, 'package.json'), 'utf8')) as { name: string; version: string };
+  const releaseVersion = versionIndex === -1 ? core.version : (argv[versionIndex + 1] ?? '');
+
+  try {
+    // Every lockstep package is planned at the release version: before the cut
+    // that is what the cut will set, after it what the manifests carry.
+    const plan = buildRegistryPlan({
+      releaseVersion,
+      distTag: defaultPublishOptions(releaseVersion).distTag,
+      core: { name: core.name, version: releaseVersion },
+      lockstep: LOCKSTEP_PACKAGES.filter(pkg => pkg.dir !== '.').map(pkg => ({ name: pkg.name, version: releaseVersion })),
+      shims: LEGACY_SHIMS.map(shim => shimReleaseStatus(repoRoot, shim, releaseVersion)),
+    });
+    const written = writeRegistryPlan(plan, releaseDir);
+
+    log(`
+${renderRegistryPlan(plan)}`);
+    log(`  written: ${written.json}`);
+    log(`           ${written.text}`);
+  } catch (error) {
+    if (error instanceof RegistryPlanError) {
+      die(`registry plan refused: ${error.message}`);
+    }
+
+    throw error;
+  }
+};
+
 const command = argv[0];
 
 switch (command) {
@@ -348,6 +392,9 @@ switch (command) {
   case 'publish-independent':
     doSinglePackage('release');
     break;
+  case 'registry-plan':
+    doRegistryPlan();
+    break;
   default:
-    die(`Unknown command "${command ?? ''}". Use: prepare | full-zip | publish | bootstrap | publish-independent.`);
+    die(`Unknown command "${command ?? ''}". Use: prepare | full-zip | publish | bootstrap | publish-independent | registry-plan.`);
 }
diff --git a/scripts/skipped-tests-baseline.json b/scripts/skipped-tests-baseline.json
index 200a837e4..21287959b 100644
--- a/scripts/skipped-tests-baseline.json
+++ b/scripts/skipped-tests-baseline.json
@@ -1,5 +1,5 @@
 {
-  "note": "Per-file budget of skipped tests, measured as the SUM across every CI test lane (unit + webgl + webgl-build + webgl-assets + webgl-core + webgpu + webgpu-media + firefox + audio + tilemap), aggregated from each lane's own JUnit report — one global budget, not one per lane. Skipping more than the budget fails `pnpm test:skips`, and so does any skip in a file with no budget — a conditional test (including a runtime `ctx.skip(...)`) must be a reviewed entry, not a quiet default. Skipping fewer only prints a note, because the count depends on which lanes actually ran (a local partial run, or a local `dist/` that unskips the production-stripping checks). Run `pnpm test:skips:update-baseline` against a full set of lane reports to record a change.",
+  "note": "Per-file budget of skipped tests, measured as the SUM across every CI test lane (unit + webgl + webgl-build + webgl-assets + webgl-core + webgpu + webgpu-media + firefox + audio + tilemap + the build job), aggregated from each lane's own JUnit report — one global budget, not one per lane. Skipping more than the budget fails `pnpm test:skips`, and so does any skip in a file with no budget — a conditional test (including a runtime `ctx.skip(...)`) must be a reviewed entry, not a quiet default. Skipping fewer only prints a note, because the count depends on which lanes actually ran (a local partial run, or a local `dist/` that unskips the production-stripping checks). Run `pnpm test:skips:update-baseline` against a full set of lane reports to record a change.",
   "files": {
     "packages/exojs-bench/test/smoke.test.ts": 1,
     "packages/exojs-bench/test/split-screen.test.ts": 2,
diff --git a/scripts/source-hash.ts b/scripts/source-hash.ts
index a566af660..37eceb281 100644
--- a/scripts/source-hash.ts
+++ b/scripts/source-hash.ts
@@ -9,7 +9,9 @@
 
 import { createHash } from 'node:crypto';
 import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { join, relative } from 'node:path';
+import { join, relative, resolve } from 'node:path';
+
+import { RUNTIME_MODULES } from './release/lockstep-packages.ts';
 
 // No leading dot: the CI build artifact skips hidden files, and a stamp that
 // never reaches the consuming job would fail every dist-consuming lane.
@@ -33,12 +35,27 @@ const listFiles = (dir: string, out: string[]): string[] => {
   return out;
 };
 
-/** Hash every file under `sourceDir`, by relative path and content, in a stable order. */
-export const hashSourceTree = (sourceDir: string): string => {
+/**
+ * The source trees the Core `dist/` is built from: Core's own `src/` and the
+ * `src/` of every runtime module compiled into it.
+ */
+export const coreSourceRoots = (repoRoot: string): readonly string[] => [
+  resolve(repoRoot, 'src'),
+  ...RUNTIME_MODULES.map(module => resolve(repoRoot, module.dir, 'src')),
+];
+
+/**
+ * Hash every file under `sourceDirs`, by relative path and content, in a stable
+ * order. Paths are relative to the single directory, or to the repository root
+ * when several trees are hashed together.
+ */
+export const hashSourceTree = (sourceDirs: string | readonly string[]): string => {
+  const dirs = typeof sourceDirs === 'string' ? [sourceDirs] : sourceDirs;
+  const base = dirs.length === 1 ? dirs[0]! : resolve(dirs[0]!, '..');
   const hash = createHash('sha1');
 
-  for (const file of listFiles(sourceDir, []).sort()) {
-    hash.update(relative(sourceDir, file).replaceAll('\\', '/'));
+  for (const file of dirs.flatMap(dir => listFiles(dir, [])).sort()) {
+    hash.update(relative(base, file).replaceAll('\\', '/'));
     hash.update('\0');
     hash.update(readFileSync(file));
     hash.update('\0');
@@ -47,9 +64,9 @@ export const hashSourceTree = (sourceDir: string): string => {
   return hash.digest('hex');
 };
 
-/** Record the hash of `sourceDir` in `distDir`, to be read back by {@link readSourceStamp}. */
-export const writeSourceStamp = (sourceDir: string, distDir: string): void => {
-  const stamp: SourceStamp = { sourceHash: hashSourceTree(sourceDir) };
+/** Record the hash of `sourceDirs` in `distDir`, to be read back by {@link readSourceStamp}. */
+export const writeSourceStamp = (sourceDirs: string | readonly string[], distDir: string): void => {
+  const stamp: SourceStamp = { sourceHash: hashSourceTree(sourceDirs) };
 
   writeFileSync(join(distDir, SOURCE_STAMP_FILE), `${JSON.stringify(stamp, null, 2)}\n`);
 };
diff --git a/scripts/verify-bench-results.ts b/scripts/verify-bench-results.ts
index 7ab6521cf..a7022d5db 100644
--- a/scripts/verify-bench-results.ts
+++ b/scripts/verify-bench-results.ts
@@ -39,8 +39,12 @@ const RESULTS_DIR = join(REPO_ROOT, 'packages', 'exojs-bench', 'results');
 /** Version an arm carries when its manifest could not be resolved during the run. */
 const NOT_INSTALLED = 'not-installed';
 
-/** Packages released in lockstep with the engine, whose arm version must equal the profile's. */
-const LOCKSTEP_ARMS = new Set(['@codexo/exojs', '@codexo/exojs-physics']);
+/**
+ * Packages released in lockstep with the engine, whose arm version must equal the
+ * profile's. Physics is measured as the `@codexo/exojs/physics` subpath of Core;
+ * profiles recorded before it moved into Core name the retired package.
+ */
+const LOCKSTEP_ARMS = new Set(['@codexo/exojs', '@codexo/exojs/physics', '@codexo/exojs-physics']);
 
 /**
  * Separate harness runs a published profile must pool.
diff --git a/scripts/verify-lockstep-versions.ts b/scripts/verify-lockstep-versions.ts
index 1c6cf453d..710a1662a 100644
--- a/scripts/verify-lockstep-versions.ts
+++ b/scripts/verify-lockstep-versions.ts
@@ -7,12 +7,17 @@
  * them declares on another - the core or a sibling extension - must be
  * `<major>.<minor>.x`. A sibling peer left a minor behind resolves to nothing
  * once the line moves, which no install of the shipped package can satisfy.
+ *
+ * The legacy shims are off the per-release version but not off the line: each
+ * sits on the lockstep line until that line moves past the one it serves, is
+ * never ahead of Core, and peers on `<major>.<minor>.x` of its own version.
  */
 import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { EXTENSION_PACKAGES } from './release/lockstep-packages.ts';
+import { lineOf, shimPeerRange } from './release/legacy-shims.ts';
+import { EXTENSION_PACKAGES, LEGACY_SHIMS } from './release/lockstep-packages.ts';
 
 const rootDir = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 
@@ -80,6 +85,47 @@ if (peerProblems.length > 0) {
   process.exit(1);
 }
 
+const compareVersions = (a: string, b: string): number => {
+  const left = a.split('.').map(Number);
+  const right = b.split('.').map(Number);
+
+  for (let i = 0; i < Math.max(left.length, right.length); i++) {
+    const difference = (left[i] ?? 0) - (right[i] ?? 0);
+
+    if (difference !== 0) {
+      return difference;
+    }
+  }
+
+  return 0;
+};
+
+const shimProblems: string[] = [];
+const coreLine = lineOf(corePkg.version);
+
+for (const shim of LEGACY_SHIMS) {
+  const pkg = readPackage(`${shim.dir}/package.json`);
+  const expectedLine = compareVersions(coreLine, shim.line) <= 0 ? coreLine : shim.line;
+
+  if (lineOf(pkg.version) !== expectedLine) {
+    shimProblems.push(`  ${pkg.name}: v${pkg.version} is not on the ${expectedLine} line`);
+  }
+
+  if (compareVersions(pkg.version, corePkg.version) > 0) {
+    shimProblems.push(`  ${pkg.name}: v${pkg.version} is ahead of Core v${corePkg.version}`);
+  }
+
+  if (JSON.stringify(pkg.peers) !== JSON.stringify({ '@codexo/exojs': shimPeerRange(pkg.version) })) {
+    shimProblems.push(`  ${pkg.name}: peers ${JSON.stringify(pkg.peers)}, expected only "@codexo/exojs": "${shimPeerRange(pkg.version)}"`);
+  }
+}
+
+if (shimProblems.length > 0) {
+  process.stderr.write('verify-lockstep: LEGACY SHIM VERSION MISMATCH:\n');
+  process.stderr.write(`${shimProblems.join('\n')}\n`);
+  process.exit(1);
+}
+
 process.stdout.write(
-  `verify-lockstep: all ${packages.length} packages at v${versions[0]}; every official peer range = "${expectedPeer}" ✓\n`,
+  `verify-lockstep: all ${packages.length} packages at v${versions[0]}; every official peer range = "${expectedPeer}"; ${LEGACY_SHIMS.length} legacy shims on their line ✓\n`,
 );
diff --git a/scripts/verify-package-policy.ts b/scripts/verify-package-policy.ts
index f37e5fd05..cdf7ca4bb 100644
--- a/scripts/verify-package-policy.ts
+++ b/scripts/verify-package-policy.ts
@@ -1,11 +1,19 @@
 // Runs the central package-policy verifier (@codexo/exojs-config/package-policy)
-// against every official runtime package plus the private config package.
+// against every official runtime package, the legacy shims, published tooling
+// and content packages, and the private config package.
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { verifyCliPackage, verifyConfigPackage, verifyRuntimePackage, verifyToolingPackage } from '@codexo/exojs-config/package-policy';
+import {
+  verifyCliPackage,
+  verifyConfigPackage,
+  verifyContentPackage,
+  verifyLegacyShimPackage,
+  verifyRuntimePackage,
+  verifyToolingPackage,
+} from '@codexo/exojs-config/package-policy';
 
-import { LOCKSTEP_PACKAGES, TOOLING_PACKAGES } from './release/lockstep-packages.ts';
+import { INDEPENDENT_PACKAGES, isEngineExtension, LEGACY_SHIMS, LOCKSTEP_PACKAGES, TOOLING_PACKAGES } from './release/lockstep-packages.ts';
 
 // The verifier is plain JavaScript (see `scripts/untyped-config-modules.d.ts`),
 // so its result shape is named here - this script reads nothing else from it.
@@ -25,7 +33,7 @@ const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const targets = LOCKSTEP_PACKAGES.map(p => ({
   dir: p.dir === '.' ? root : resolve(root, p.dir),
   name: p.name,
-  isExtension: p.isExtension,
+  isExtension: isEngineExtension(p),
   profile: 'profile' in p ? p.profile : ('runtime' as const),
 }));
 
@@ -66,6 +74,42 @@ for (const tooling of TOOLING_PACKAGES) {
   }
 }
 
+// Published content: descriptors plus media, judged against the content
+// profile (engine peer, dist/ + media/ tree, no install-time behavior).
+for (const content of INDEPENDENT_PACKAGES.filter(p => p.role === 'content')) {
+  const result: PolicyResult = verifyContentPackage(resolve(root, content.dir), { name: content.name });
+  const bad = result.checks.filter(c => !c.ok);
+  console.log(`${result.ok ? '✓' : '✗'} ${content.name} (${result.checks.length} checks${bad.length ? `, ${bad.length} failed` : ''})`);
+
+  for (const c of bad) {
+    console.log(`    ✗ ${c.name}${c.detail ? ` — ${c.detail}` : ''}`);
+  }
+
+  if (!result.ok) {
+    failed++;
+  }
+}
+
+// Legacy shims: forwarders only, with no dist, dependency or script of their own.
+for (const shim of LEGACY_SHIMS) {
+  const result: PolicyResult = verifyLegacyShimPackage(resolve(root, shim.dir), {
+    name: shim.name,
+    targets: shim.entries.map(entry => entry.target),
+  });
+  const bad = result.checks.filter(c => !c.ok);
+  console.log(
+    `${result.ok ? '✓' : '✗'} ${shim.name} (legacy shim, ${result.checks.length} checks${bad.length ? `, ${bad.length} failed` : ''})`,
+  );
+
+  for (const c of bad) {
+    console.log(`    ✗ ${c.name}${c.detail ? ` — ${c.detail}` : ''}`);
+  }
+
+  if (!result.ok) {
+    failed++;
+  }
+}
+
 const cfg: PolicyResult = verifyConfigPackage(resolve(root, 'packages/exojs-config'));
 const cfgBad = cfg.checks.filter(c => !c.ok);
 console.log(`${cfg.ok ? '✓' : '✗'} @codexo/exojs-config (${cfg.checks.length} checks${cfgBad.length ? `, ${cfgBad.length} failed` : ''})`);
diff --git a/scripts/verify-publish.ts b/scripts/verify-publish.ts
index 42b7f5540..fa58e983f 100644
--- a/scripts/verify-publish.ts
+++ b/scripts/verify-publish.ts
@@ -2,12 +2,12 @@ import { resolve } from 'node:path';
 
 import { readOutputOptions } from './lib/output.ts';
 import { createExecRunner } from './release/command-runner.ts';
-import { INDEPENDENT_PACKAGES, LOCKSTEP_PACKAGES } from './release/lockstep-packages.ts';
+import { INDEPENDENT_PACKAGES, LEGACY_SHIMS, LOCKSTEP_PACKAGES } from './release/lockstep-packages.ts';
 
 const PUBLINT = 'publint@0.3.21';
 
 const rootDir = resolve(import.meta.dirname, '..');
-const packages = [...LOCKSTEP_PACKAGES, ...INDEPENDENT_PACKAGES];
+const packages = [...LOCKSTEP_PACKAGES, ...INDEPENDENT_PACKAGES, ...LEGACY_SHIMS];
 const { mode } = readOutputOptions(process.argv.slice(2));
 const logDirectory = resolve(rootDir, '.workspace/logs');
 const runner = createExecRunner({ logDirectory });
diff --git a/scripts/verify-release-matrix.ts b/scripts/verify-release-matrix.ts
index 623a0899c..f2eff17d7 100644
--- a/scripts/verify-release-matrix.ts
+++ b/scripts/verify-release-matrix.ts
@@ -16,6 +16,11 @@
  *     and never rebuilds.
  *  7. PUBLISH_ORDER equals the canonical `LOCKSTEP_PACKAGES` order (Core first),
  *     and `officialPackages()` (what `release:prepare` actually packs) covers it exactly.
+ *  8. Every runtime module is a private source package that Core exports as
+ *     `@codexo/exojs/<subpath>`, and is neither built nor published on its own.
+ *  9. Every legacy shim keeps its module's retired name, peers on Core alone
+ *     and forwards only to Core exports; `release:prepare` packs a shim only in
+ *     the release that set its version.
  *
  * Read-only: safe to run in dry-run/CI. Exits non-zero on any inconsistency.
  *
@@ -25,7 +30,8 @@ import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { EXTENSION_PACKAGES, INDEPENDENT_PACKAGES, LOCKSTEP_PACKAGES } from './release/lockstep-packages.ts';
+import { isShimDue } from './release/legacy-shims.ts';
+import { EXTENSION_PACKAGES, INDEPENDENT_PACKAGES, LEGACY_SHIMS, LOCKSTEP_PACKAGES, RUNTIME_MODULES } from './release/lockstep-packages.ts';
 import { PUBLISH_ORDER } from './release/manifest.ts';
 import { officialPackages } from './release/prepare.ts';
 
@@ -167,25 +173,32 @@ if (/run:\s*pnpm build\b/.test(publishSection)) {
   ok.push('publish job does not rebuild the runtime packages');
 }
 
-// 7. Canonical publish order = the LOCKSTEP_PACKAGES order (Core first), enforced in code.
-const expectedOrder = LOCKSTEP_PACKAGES.map(p => p.name);
+// 7. Canonical publish order = the LOCKSTEP_PACKAGES order (Core first), then
+// the legacy shims, enforced in code.
+const expectedOrder = [...LOCKSTEP_PACKAGES.map(p => p.name), ...LEGACY_SHIMS.map(p => p.name)];
 
 if (PUBLISH_ORDER.length === expectedOrder.length && PUBLISH_ORDER.every((name, i) => name === expectedOrder[i])) {
-  ok.push(`PUBLISH_ORDER matches LOCKSTEP_PACKAGES order (${expectedOrder.join(' → ')})`);
+  ok.push(`PUBLISH_ORDER matches LOCKSTEP_PACKAGES then LEGACY_SHIMS (${expectedOrder.join(' → ')})`);
 } else {
-  problems.push(`PUBLISH_ORDER must equal LOCKSTEP_PACKAGES order ${expectedOrder.join(' → ')}, got ${PUBLISH_ORDER.join(' → ')}`);
+  problems.push(`PUBLISH_ORDER must equal ${expectedOrder.join(' → ')}, got ${PUBLISH_ORDER.join(' → ')}`);
 }
 
-// 7b. What `release:prepare` actually packs (officialPackages) must cover the
-// canonical PUBLISH_ORDER exactly - a package missing here would silently never
-// be packed, and therefore never published.
+// 7b. What `release:prepare` actually packs (officialPackages) must be every
+// lockstep package plus exactly the legacy shims this release sets, in
+// PUBLISH_ORDER - a package missing here would silently never be packed, and
+// therefore never published; an unchanged shim packed here would be
+// republished on every Core patch.
 const packed = officialPackages(rootDir);
 const packedNames = packed.map(p => p.name);
+const dueShims: readonly string[] = LEGACY_SHIMS.filter(shim => isShimDue(shim, readPkg(`${shim.dir}/package.json`).version, version)).map(
+  shim => shim.name,
+);
+const expectedPacked = PUBLISH_ORDER.filter(name => LOCKSTEP_PACKAGES.some(p => p.name === name) || dueShims.includes(name));
 
-if (packedNames.length === PUBLISH_ORDER.length && packedNames.every((name, i) => name === PUBLISH_ORDER[i])) {
-  ok.push('officialPackages() packs exactly the PUBLISH_ORDER set, in order');
+if (packedNames.length === expectedPacked.length && packedNames.every((name, i) => name === expectedPacked[i])) {
+  ok.push(`officialPackages() packs the lockstep set plus ${dueShims.length} due legacy shim(s), in PUBLISH_ORDER`);
 } else {
-  problems.push(`officialPackages() must pack ${PUBLISH_ORDER.join(' → ')}, got ${packedNames.join(' → ')}`);
+  problems.push(`officialPackages() must pack ${expectedPacked.join(' → ')}, got ${packedNames.join(' → ')}`);
 }
 
 for (const pkg of packed) {
@@ -196,6 +209,71 @@ for (const pkg of packed) {
   }
 }
 
+// 8. Runtime modules ship inside the Core tarball and nowhere else: each is a
+// private source package, exported by Core under its subpath, and neither built
+// nor published on its own.
+const coreExports = (JSON.parse(readFileSync(resolve(rootDir, 'package.json'), 'utf8')) as { exports: Record<string, unknown> }).exports;
+
+for (const module of RUNTIME_MODULES) {
+  const manifest = JSON.parse(readFileSync(resolve(rootDir, module.dir, 'package.json'), 'utf8')) as {
+    name: string;
+    private?: boolean;
+    exports?: unknown;
+    scripts?: Record<string, string>;
+  };
+  const label = `runtime module ${module.subpath}`;
+  const issues = [
+    manifest.name === module.name ? undefined : `is named "${manifest.name}", expected "${module.name}"`,
+    manifest.private === true ? undefined : 'must be private',
+    manifest.exports === undefined ? undefined : 'must not declare exports of its own',
+    manifest.scripts?.['build'] === undefined ? undefined : 'must not have a build script (Core builds it)',
+    coreExports[`./${module.subpath}`] === undefined ? `is missing from the Core exports as "./${module.subpath}"` : undefined,
+    (PUBLISH_ORDER as readonly string[]).includes(module.name) ? 'must not be in PUBLISH_ORDER' : undefined,
+    // The retired name is published again, but only as the forwarder.
+    (PUBLISH_ORDER as readonly string[]).includes(module.legacyName) && !LEGACY_SHIMS.some(shim => shim.name === module.legacyName)
+      ? `is published as ${module.legacyName} without a legacy shim`
+      : undefined,
+    workflow.includes(`--filter ${module.name} build`) || workflow.includes(`--filter ${module.legacyName} build`)
+      ? 'must not be built on its own in release.yml'
+      : undefined,
+  ].filter((issue): issue is string => issue !== undefined);
+
+  if (issues.length === 0) {
+    ok.push(`${label} ships only as @codexo/exojs/${module.subpath}`);
+  } else {
+    problems.push(...issues.map(issue => `${label} (${module.dir}) ${issue}`));
+  }
+}
+
+// 9. Legacy shims: one per runtime module under its retired name, built by no
+// workflow step, peering on Core alone, and forwarding only to Core exports.
+for (const shim of LEGACY_SHIMS) {
+  const module = RUNTIME_MODULES.find(candidate => candidate.subpath === shim.subpath);
+  const manifest = JSON.parse(readFileSync(resolve(rootDir, shim.dir, 'package.json'), 'utf8')) as {
+    name: string;
+    peerDependencies?: Record<string, string>;
+    scripts?: Record<string, string>;
+  };
+  const issues = [
+    module?.legacyName === shim.name ? undefined : 'does not carry the retired name of its runtime module',
+    manifest.name === shim.name ? undefined : `is named "${manifest.name}"`,
+    JSON.stringify(Object.keys(manifest.peerDependencies ?? {})) === '["@codexo/exojs"]' ? undefined : 'must peer on @codexo/exojs alone',
+    manifest.scripts === undefined ? undefined : 'must not have scripts',
+    workflow.includes(`--filter ${shim.name} build`) ? 'must not be built in release.yml' : undefined,
+    ...shim.entries.map(entry =>
+      coreExports[`./${entry.target.slice('@codexo/exojs/'.length)}`] === undefined
+        ? `forwards ${entry.entry} to ${entry.target}, which Core does not export`
+        : undefined,
+    ),
+  ].filter((issue): issue is string => issue !== undefined);
+
+  if (issues.length === 0) {
+    ok.push(`legacy shim ${shim.name} forwards to ${shim.entries.map(entry => entry.target).join(', ')}`);
+  } else {
+    problems.push(...issues.map(issue => `legacy shim ${shim.name} (${shim.dir}) ${issue}`));
+  }
+}
+
 // --- Report ---
 if (problems.length > 0) {
   process.stderr.write('verify-release-matrix: FAILED\n');
diff --git a/scripts/webgpu-probe.ts b/scripts/webgpu-probe.ts
index 1a1932446..0aadda022 100644
--- a/scripts/webgpu-probe.ts
+++ b/scripts/webgpu-probe.ts
@@ -179,23 +179,11 @@ if (example) {
   } else {
     const source = readFileSync(srcFile, 'utf8');
     await page.evaluate(
-      async ({ exampleSource, meta }) => {
-        const host = window as typeof window & { __EXAMPLE_META__?: unknown; assets?: Record<string, unknown> };
+      ({ exampleSource, meta }) => {
+        const host = window as typeof window & { __EXAMPLE_META__?: unknown };
 
         host.__EXAMPLE_META__ = meta;
 
-        try {
-          // Built by the site at run time, so it must not be resolved statically:
-          // a non-literal specifier keeps the type checker out of the browser's
-          // module graph.
-          const catalogUrl = './assets/catalog.js';
-          const c = (await import(catalogUrl)) as { assets?: Record<string, unknown> };
-
-          host.assets = c.assets ?? {};
-        } catch {
-          host.assets = {};
-        }
-
         const s = document.createElement('script');
         s.type = 'module';
         s.textContent = `${exampleSource}\n`;
diff --git a/site/README.md b/site/README.md
index 3c9f9971a..44f7648bf 100644
--- a/site/README.md
+++ b/site/README.md
@@ -5,8 +5,8 @@ Astro + React docs/playground app for ExoJS. This package is private and is not
 ## Relationship to `../examples`
 
 - `../examples` is the canonical source for example scripts, manifest, and shared assets.
-- `examples:sync` mirrors `../examples` into `site/public/examples` and `site/public/assets` for playground runtime serving.
-- `site/public/examples` and `site/public/assets` are generated artifacts (gitignored).
+- `examples:sync` mirrors `../examples` (without the guide sources and the `assets/` authoring media) into `site/public/examples` for playground runtime serving; `vendor:sync` serves `@codexo/exojs-demo-assets` and its standard media under `site/public/vendor/exojs-demo-assets`.
+- `site/public/examples` and `site/public/vendor` are generated artifacts (gitignored).
 
 This keeps source ownership outside the site framework while preserving the existing runtime contract (`preview.html` + static `examples/*.js` + `assets/*` URLs).
 
diff --git a/site/astro.config.ts b/site/astro.config.ts
index 4f31cfc20..087658d6d 100644
--- a/site/astro.config.ts
+++ b/site/astro.config.ts
@@ -9,11 +9,17 @@ import codecovAstroPlugin from '@codecov/astro-plugin';
 import { defineConfig } from 'astro/config';
 
 import { isGeneratedAstroDirective } from './scripts/astro-warning-policy';
+import { installSiteBaseLinks } from './scripts/site-base-links';
+import { resolveSiteBuild, writeProvisionalSiteBuild } from './scripts/write-site-build';
 import { SHIKI_THEMES } from './src/lib/shiki-theme';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// The channel contract decides the base of every URL the build emits, so it is
+// resolved and validated here, once, before anything renders.
+const siteBuild = resolveSiteBuild(process.env);
+
 // Codecov Bundle Analysis for the site bundle - upload only when the token is
 // present (CI); local builds stay offline. Placed after all other integrations
 // per the plugin's docs.
@@ -29,9 +35,20 @@ const codecovIntegrations = process.env.CODECOV_TOKEN
   : [];
 
 export default defineConfig({
-  integrations: [react(), mdx(), ...codecovIntegrations],
+  integrations: [
+    react(),
+    mdx(),
+    {
+      name: 'exojs-site-build',
+      hooks: {
+        'astro:config:setup': ({ config }) => installSiteBaseLinks(config.markdown.processor, siteBuild.basePath),
+        'astro:build:done': ({ dir }) => writeProvisionalSiteBuild(fileURLToPath(dir), siteBuild),
+      },
+    },
+    ...codecovIntegrations,
+  ],
   output: 'static',
-  base: '/ExoJS/',
+  base: siteBuild.basePath,
   i18n: {
     locales: ['en', 'de'],
     defaultLocale: 'en',
@@ -50,6 +67,9 @@ export default defineConfig({
     assets: '_astro',
   },
   vite: {
+    define: {
+      __EXOJS_SITE_BUILD__: JSON.stringify(siteBuild),
+    },
     resolve: {
       alias: {
         '~examples': path.resolve(__dirname, '../examples'),
diff --git a/site/package.json b/site/package.json
index 48fd6c56a..ed3381693 100644
--- a/site/package.json
+++ b/site/package.json
@@ -15,11 +15,12 @@
     "assets:sync:input-prompts": "tsx scripts/sync-kenney-input-prompts.ts",
     "dev": "pnpm vendor:sync && pnpm examples:sync && astro dev",
     "build:api": "tsx scripts/build-api.ts",
-    "build": "pnpm vendor:sync && pnpm examples:sync && pnpm build:api && astro build && pagefind --site dist",
+    "build": "pnpm vendor:sync && pnpm examples:sync && pnpm build:api && astro build && pagefind --site dist && tsx scripts/write-site-build.ts",
     "preview": "astro preview",
     "check-ts": "astro check && exo-tsc --noEmit --pretty",
     "check-ts:scripts": "exo-tsc --noEmit --pretty -p tsconfig.scripts.json",
     "examples:smoke": "tsx scripts/smoke-examples.ts",
+    "playground:e2e": "tsx scripts/playground-e2e.ts",
     "check-example": "tsx scripts/check-example.ts",
     "brand:optimize": "tsx scripts/optimize-brand-assets.ts",
     "screenshots": "tsx scripts/capture-screenshots.ts",
diff --git a/site/public/preview.html b/site/public/preview.html
index 65029a253..b7a2aee3c 100644
--- a/site/public/preview.html
+++ b/site/public/preview.html
@@ -75,26 +75,27 @@
                 var tilemapPhysicsEntry;
                 var lightingEntry;
                 var pathfindingEntry;
+                var cdnBase;
                 if (!safeVersion || safeVersion === 'current') {
                     exoEntry = './vendor/exojs/esm/index.js?no-cache=' + noCache;
                     exoDebugEntry = './vendor/exojs/esm/debug/index.js?no-cache=' + noCache;
                     exoExtensionsEntry = './vendor/exojs/esm/extensions/index.js?no-cache=' + noCache;
                     exoRenderingEntry = './vendor/exojs/esm/rendering.js?no-cache=' + noCache;
                     exoRendererSdkEntry = './vendor/exojs/esm/renderer-sdk.js?no-cache=' + noCache;
-                    particlesEntry = './vendor/exojs-particles/esm/index.js?no-cache=' + noCache;
-                    audioFxEntry = './vendor/exojs-audio-fx/esm/index.js?no-cache=' + noCache;
+                    particlesEntry = './vendor/exojs/esm/particles/index.js?no-cache=' + noCache;
+                    audioFxEntry = './vendor/exojs/esm/audio-fx/index.js?no-cache=' + noCache;
                     tiledEntry = './vendor/exojs-tiled/esm/index.js?no-cache=' + noCache;
-                    tilemapEntry = './vendor/exojs-tilemap/esm/index.js?no-cache=' + noCache;
+                    tilemapEntry = './vendor/exojs/esm/tilemap/index.js?no-cache=' + noCache;
                     ldtkEntry = './vendor/exojs-ldtk/esm/index.js?no-cache=' + noCache;
-                    physicsEntry = './vendor/exojs-physics/esm/index.js?no-cache=' + noCache;
-                    physicsDebugEntry = './vendor/exojs-physics/esm/debug/index.js?no-cache=' + noCache;
-                    tilemapPhysicsEntry = './vendor/exojs-tilemap-physics/esm/index.js?no-cache=' + noCache;
-                    lightingEntry = './vendor/exojs-lighting/esm/index.js?no-cache=' + noCache;
-                    pathfindingEntry = './vendor/exojs-pathfinding/esm/index.js?no-cache=' + noCache;
+                    physicsEntry = './vendor/exojs/esm/physics/index.js?no-cache=' + noCache;
+                    physicsDebugEntry = exoDebugEntry;
+                    tilemapPhysicsEntry = './vendor/exojs/esm/tilemap-physics/index.js?no-cache=' + noCache;
+                    lightingEntry = './vendor/exojs/esm/lighting/index.js?no-cache=' + noCache;
+                    pathfindingEntry = './vendor/exojs/esm/pathfinding/index.js?no-cache=' + noCache;
                 } else {
                     // jsDelivr serves immutable npm tarballs — the version pin
                     // alone is enough, no cache-buster needed.
-                    var cdnBase = 'https://cdn.jsdelivr.net/npm/@codexo/';
+                    cdnBase = 'https://cdn.jsdelivr.net/npm/@codexo/';
                     exoEntry = cdnBase + 'exojs@' + safeVersion + '/dist/esm/index.js';
                     exoDebugEntry = cdnBase + 'exojs@' + safeVersion + '/dist/esm/debug/index.js';
                     exoExtensionsEntry = cdnBase + 'exojs@' + safeVersion + '/dist/esm/extensions/index.js';
@@ -112,6 +113,15 @@
                     pathfindingEntry = cdnBase + 'exojs-pathfinding@' + safeVersion + '/dist/esm/index.js';
                 }
 
+                // From v0.20 the runtime modules are Core subpaths. A snapshot
+                // from before that imports the retired package names, which
+                // resolve to those packages on the CDN; the current build maps
+                // both spellings to the same Core file, so either imports one
+                // instance.
+                var currentBuild = !safeVersion || safeVersion === 'current';
+                var subpathEntry = function (subpath, retiredEntry) {
+                    return currentBuild ? retiredEntry : cdnBase + 'exojs@' + safeVersion + '/dist/esm/' + subpath + '/index.js';
+                };
                 var importMap = {
                     imports: {
                         '@codexo/exojs': exoEntry,
@@ -119,6 +129,13 @@
                         '@codexo/exojs/extensions': exoExtensionsEntry,
                         '@codexo/exojs/rendering': exoRenderingEntry,
                         '@codexo/exojs/renderer-sdk': exoRendererSdkEntry,
+                        '@codexo/exojs/particles': subpathEntry('particles', particlesEntry),
+                        '@codexo/exojs/audio-fx': subpathEntry('audio-fx', audioFxEntry),
+                        '@codexo/exojs/tilemap': subpathEntry('tilemap', tilemapEntry),
+                        '@codexo/exojs/physics': subpathEntry('physics', physicsEntry),
+                        '@codexo/exojs/tilemap-physics': subpathEntry('tilemap-physics', tilemapPhysicsEntry),
+                        '@codexo/exojs/lighting': subpathEntry('lighting', lightingEntry),
+                        '@codexo/exojs/pathfinding': subpathEntry('pathfinding', pathfindingEntry),
                         '@codexo/exojs-particles': particlesEntry,
                         '@codexo/exojs-audio-fx': audioFxEntry,
                         '@codexo/exojs-tiled': tiledEntry,
@@ -129,6 +146,12 @@
                         '@codexo/exojs-tilemap-physics': tilemapPhysicsEntry,
                         '@codexo/exojs-lighting': lightingEntry,
                         '@codexo/exojs-pathfinding': pathfindingEntry,
+                        // The demo catalog is content, not runtime: it ships with
+                        // this deploy for every version, and resolves its media
+                        // next to itself under vendor/exojs-demo-assets/media/.
+                        '@codexo/exojs-demo-assets': './vendor/exojs-demo-assets/esm/index.js?no-cache=' + noCache,
+                        '@codexo/exojs-demo-assets/extended': './vendor/exojs-demo-assets/esm/extended.js?no-cache=' + noCache,
+                        '@codexo/exojs-demo-assets/manifest.json': './vendor/exojs-demo-assets/manifest.json?no-cache=' + noCache,
                         '@examples/runtime': './examples/shared/runtime.js?no-cache=' + noCache,
                         '@examples/terrain-noise': './examples/shared/terrain-noise.js?no-cache=' + noCache,
                     },
@@ -160,18 +183,9 @@
 
                 if (!source) return;
 
-                // The playground shell hands the example its asset catalog
-                // through the iframe window; a preview opened in its own tab
-                // has no shell, so the catalog is resolved here against this
-                // page's location before the example runs.
-                var prelude =
-                    "import { assets as rawAssets } from './assets/assets.js';\n" +
-                    "import { resolveAssetCatalog } from './assets/resolver.js';\n" +
-                    "window.assets = resolveAssetCatalog(rawAssets, new URL('assets/', window.location.href).href);\n";
-
                 var script = document.createElement('script');
                 script.type = 'module';
-                script.textContent = prelude + source + '\n';
+                script.textContent = source + '\n';
                 document.body.appendChild(script);
             })();
         </script>
diff --git a/site/scripts/build-api.ts b/site/scripts/build-api.ts
index 97b4a50fa..e54669982 100644
--- a/site/scripts/build-api.ts
+++ b/site/scripts/build-api.ts
@@ -76,21 +76,21 @@ interface ExtensionPackage {
 
 const EXTENSION_PACKAGES: readonly ExtensionPackage[] = [
   {
-    importPath: '@codexo/exojs-particles',
+    importPath: '@codexo/exojs/particles',
     subsystem: 'particles',
     entryPoint: 'packages/exojs-particles/src/index.ts',
     tsconfig: 'packages/exojs-particles/tsconfig.json',
     sourceMarker: 'packages/exojs-particles/src/',
   },
   {
-    importPath: '@codexo/exojs-audio-fx',
+    importPath: '@codexo/exojs/audio-fx',
     subsystem: 'audio',
     entryPoint: 'packages/exojs-audio-fx/src/index.ts',
     tsconfig: 'packages/exojs-audio-fx/tsconfig.json',
     sourceMarker: 'packages/exojs-audio-fx/src/',
   },
   {
-    importPath: '@codexo/exojs-tilemap',
+    importPath: '@codexo/exojs/tilemap',
     subsystem: 'tilemap',
     entryPoint: 'packages/exojs-tilemap/src/index.ts',
     tsconfig: 'packages/exojs-tilemap/tsconfig.json',
@@ -104,7 +104,7 @@ const EXTENSION_PACKAGES: readonly ExtensionPackage[] = [
     sourceMarker: 'packages/exojs-tiled/src/',
   },
   {
-    importPath: '@codexo/exojs-physics',
+    importPath: '@codexo/exojs/physics',
     subsystem: 'physics',
     entryPoint: 'packages/exojs-physics/src/index.ts',
     tsconfig: 'packages/exojs-physics/tsconfig.json',
@@ -118,21 +118,21 @@ const EXTENSION_PACKAGES: readonly ExtensionPackage[] = [
     sourceMarker: 'packages/exojs-aseprite/src/',
   },
   {
-    importPath: '@codexo/exojs-tilemap-physics',
+    importPath: '@codexo/exojs/tilemap-physics',
     subsystem: 'tilemap-physics',
     entryPoint: 'packages/exojs-tilemap-physics/src/index.ts',
     tsconfig: 'packages/exojs-tilemap-physics/tsconfig.json',
     sourceMarker: 'packages/exojs-tilemap-physics/src/',
   },
   {
-    importPath: '@codexo/exojs-lighting',
+    importPath: '@codexo/exojs/lighting',
     subsystem: 'lighting',
     entryPoint: 'packages/exojs-lighting/src/index.ts',
     tsconfig: 'packages/exojs-lighting/tsconfig.json',
     sourceMarker: 'packages/exojs-lighting/src/',
   },
   {
-    importPath: '@codexo/exojs-pathfinding',
+    importPath: '@codexo/exojs/pathfinding',
     subsystem: 'pathfinding',
     entryPoint: 'packages/exojs-pathfinding/src/index.ts',
     tsconfig: 'packages/exojs-pathfinding/tsconfig.json',
diff --git a/site/scripts/capture-screenshots.ts b/site/scripts/capture-screenshots.ts
index 504ec1429..e8c4e40b0 100644
--- a/site/scripts/capture-screenshots.ts
+++ b/site/scripts/capture-screenshots.ts
@@ -4,6 +4,8 @@ import { parseArgs } from 'node:util';
 
 import { type BrowserContext, chromium, type Page } from 'playwright';
 
+import { resolveSiteChannel } from '../../scripts/pages/site-channel.ts';
+
 type Theme = 'dark' | 'light';
 
 interface ViewportSpec {
@@ -49,7 +51,7 @@ const DEFAULT_MAX_PANEL_HEIGHT = 1568;
 const DEFAULT_CONCURRENCY = 3;
 const DEFAULT_STABLE_DELAY_MS = 300;
 const DEFAULT_NAVIGATION_TIMEOUT_MS = 45_000;
-const DEFAULT_BASE_URL = 'http://localhost:4321/ExoJS/';
+const DEFAULT_BASE_URL = `http://localhost:4321${resolveSiteChannel(process.env).basePath}`;
 
 const sleep = (ms: number): Promise<void> => new Promise(resolveSleep => setTimeout(resolveSleep, ms));
 
@@ -336,7 +338,7 @@ pnpm screenshots
 pnpm screenshots -- --base-url http://localhost:4321 --label desktop-pass
 
 Options:
-  --base-url      Preview URL (default: http://localhost:4321/ExoJS/)
+  --base-url      Preview URL (default: http://localhost:4321 plus the channel base, /ExoJS/ unless EXOJS_SITE_CHANNEL says otherwise)
   --label         Output folder label (default: ISO timestamp)
   --routes        Comma-separated route list
   --route         Additional route (repeatable)
diff --git a/site/scripts/check-example.ts b/site/scripts/check-example.ts
index 2bd190654..a0e03c07c 100644
--- a/site/scripts/check-example.ts
+++ b/site/scripts/check-example.ts
@@ -28,9 +28,11 @@ import { fileURLToPath } from 'node:url';
 
 import { chromium, type Frame } from 'playwright';
 
-// Matches `astro.config.ts`'s `base` - every URL in the served page carries
-// it, dev server included.
-const SITE_BASE = '/ExoJS';
+import { resolveSiteChannel } from '../../scripts/pages/site-channel.ts';
+
+// The base `astro.config.ts` resolves from the same environment - every URL in
+// the served page carries it, dev server included.
+const SITE_BASE = resolveSiteChannel(process.env).basePath.replace(/\/$/, '');
 const DEFAULT_HOST = 'http://localhost:4321';
 
 const here = dirname(fileURLToPath(import.meta.url));
diff --git a/site/scripts/playground-e2e.ts b/site/scripts/playground-e2e.ts
new file mode 100644
index 000000000..2e9d67a5c
--- /dev/null
+++ b/site/scripts/playground-e2e.ts
@@ -0,0 +1,919 @@
+/**
+ * Browser checks for the playground shell's Output panel and the Asset Browser
+ * example, against the built site (`site/dist`).
+ *
+ * The console bridge spans two realms - the parent shell patches the preview
+ * iframe's console - so these checks drive a real Chromium through the real
+ * playground route rather than a recreated bridge. They cover:
+ *
+ * - capture of all five console severities, several arguments, error stacks,
+ *   circular values and unhandled rejections, with DevTools still receiving
+ *   every message;
+ * - the bounded record (rate limit, ring buffer) and generation isolation
+ *   across preview reloads;
+ * - the panel in the split, swapped, stacked and phone layouts, keyboard use,
+ *   and that logging never moves focus out of the preview;
+ * - the Asset Browser: catalog listing, one asset of every preview kind,
+ *   spritesheet frame selection and animation settings, a late load that must
+ *   not surface after a newer selection, cancelled playback that waits for the
+ *   audio unlock, what stays resident after many switches, and switching away
+ *   from the example while a load is still in flight;
+ * - that every generated snippet type-checks against the engine sources.
+ *
+ * Needs `pnpm site:build` first. Exits 1 on any failed check.
+ *
+ * Usage:
+ *   pnpm --filter @codexo/exojs-examples playground:e2e
+ *   ... --only asset          # run checks whose name contains "asset"
+ *   ... --shots <dir>         # write a screenshot after each asset preview
+ *   ... --headed              # watch it run
+ */
+import { readFileSync } from 'node:fs';
+import { mkdir, readFile, rm, stat, writeFile } from 'node:fs/promises';
+import { createServer, type Server } from 'node:http';
+import { dirname, extname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseArgs } from 'node:util';
+
+import { type Browser, chromium, type Frame, type Page } from 'playwright';
+import ts from 'typescript';
+
+import { readSiteBuildManifest } from '../../scripts/pages/site-manifest.ts';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const projectRoot = resolve(here, '..');
+const repoRoot = resolve(projectRoot, '..');
+const distDir = resolve(projectRoot, 'dist');
+const snippetDir = resolve(repoRoot, '.workspace', 'playground-e2e', 'snippets');
+
+const { values: options } = parseArgs({
+  args: process.argv.slice(2),
+  options: {
+    only: { type: 'string' },
+    shots: { type: 'string' },
+    headed: { type: 'boolean', default: false },
+  },
+});
+
+const MIME: Record<string, string> = {
+  '.js': 'text/javascript',
+  '.mjs': 'text/javascript',
+  '.html': 'text/html; charset=utf-8',
+  '.json': 'application/json',
+  '.tmj': 'application/json',
+  '.ldtk': 'application/json',
+  '.map': 'application/json',
+  '.css': 'text/css',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.ico': 'image/x-icon',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.wasm': 'application/wasm',
+  '.ogg': 'audio/ogg',
+  '.wav': 'audio/wav',
+  '.webm': 'video/webm',
+  '.mp4': 'video/mp4',
+  '.fnt': 'text/plain',
+};
+
+const startServer = async (root: string, base: string): Promise<{ server: Server; origin: string }> => {
+  const server = createServer((request, response) => {
+    void (async () => {
+      let urlPath = decodeURIComponent((request.url ?? '/').split('?')[0]!);
+
+      if (urlPath !== base && !urlPath.startsWith(`${base}/`)) {
+        response.writeHead(404).end();
+
+        return;
+      }
+
+      urlPath = urlPath.slice(base.length) || '/';
+      let filePath = resolve(join(root, urlPath));
+
+      if (!filePath.startsWith(root)) {
+        response.writeHead(403).end();
+
+        return;
+      }
+
+      if ((await stat(filePath).catch(() => null))?.isDirectory()) {
+        filePath = join(filePath, 'index.html');
+      }
+
+      const body = await readFile(filePath).catch(() => null);
+
+      if (!body) {
+        response.writeHead(404).end();
+
+        return;
+      }
+
+      response.writeHead(200, { 'Content-Type': MIME[extname(filePath).toLowerCase()] ?? 'application/octet-stream' });
+      response.end(body);
+    })();
+  });
+
+  await new Promise<void>(done => server.listen(0, '127.0.0.1', done));
+  const address = server.address();
+
+  if (address === null || typeof address === 'string') {
+    throw new Error('The static server has no port.');
+  }
+
+  return { server, origin: `http://127.0.0.1:${address.port}` };
+};
+
+// --- Check harness ------------------------------------------------------------
+
+interface CheckResult {
+  name: string;
+  error: string | null;
+}
+
+const results: CheckResult[] = [];
+
+const check = async (name: string, run: () => Promise<void>): Promise<void> => {
+  if (options.only && !name.toLowerCase().includes(options.only.toLowerCase())) {
+    return;
+  }
+
+  const started = performance.now();
+
+  try {
+    await run();
+    results.push({ name, error: null });
+    console.log(`[e2e] PASS ${name} (${Math.round(performance.now() - started)} ms)`);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+
+    results.push({ name, error: message });
+    console.error(`[e2e] FAIL ${name}: ${message}`);
+  }
+};
+
+const assert: (condition: unknown, message: string) => asserts condition = (condition, message) => {
+  if (!condition) {
+    throw new Error(message);
+  }
+};
+
+const waitFor = async <T>(read: () => Promise<T>, accept: (value: T) => boolean, what: string, timeoutMs = 15_000): Promise<T> => {
+  const deadline = Date.now() + timeoutMs;
+  let last: T = await read();
+
+  while (!accept(last)) {
+    if (Date.now() > deadline) {
+      throw new Error(`Timed out waiting for ${what}; last value: ${JSON.stringify(last)?.slice(0, 300)}`);
+    }
+
+    await new Promise(done => setTimeout(done, 100));
+    last = await read();
+  }
+
+  return last;
+};
+
+// --- Page helpers ---------------------------------------------------------------
+
+interface Session {
+  page: Page;
+  /** Console messages of every realm, as Playwright saw them: DevTools' view. */
+  console: Array<{ type: string; text: string }>;
+  pageErrors: string[];
+}
+
+const openPlayground = async (
+  browser: Browser,
+  origin: string,
+  base: string,
+  example: string,
+  viewport = { width: 1600, height: 1000 },
+): Promise<Session> => {
+  const context = await browser.newContext({ viewport, permissions: ['clipboard-read', 'clipboard-write'] });
+  const page = await context.newPage();
+  const session: Session = { page, console: [], pageErrors: [] };
+
+  page.on('console', message => session.console.push({ type: message.type(), text: message.text() }));
+  page.on('pageerror', error => session.pageErrors.push(error.message));
+  await context.addInitScript({ content: "try { localStorage.setItem('exo-playground-layout', 'split'); } catch {}" });
+  await page.goto(`${origin}${base}/en/playground/?example=${encodeURIComponent(example)}`, { waitUntil: 'domcontentloaded' });
+  await previewFrame(page);
+
+  return session;
+};
+
+const previewFrame = async (page: Page): Promise<Frame> =>
+  waitFor(
+    async () => page.frames().find(frame => frame !== page.mainFrame() && frame.url().includes('preview.html')) ?? null,
+    frame => frame !== null,
+    'the preview iframe',
+  ) as Promise<Frame>;
+
+const outputEntries = async (page: Page): Promise<Array<{ severity: string; kind: string; text: string; details: string }>> =>
+  page.$$eval('[aria-label="Preview output"] li[data-severity]', items =>
+    items.map(item => ({
+      severity: item.getAttribute('data-severity') ?? '',
+      kind: item.getAttribute('data-kind') ?? '',
+      text: item.querySelector('[class*="text"]')?.textContent ?? '',
+      details: item.querySelector('pre')?.textContent ?? '',
+    })),
+  );
+
+const outputToggle = (page: Page) => page.locator('[aria-label="Preview output"] button[aria-expanded]');
+
+const outputOpen = async (page: Page): Promise<boolean> => (await outputToggle(page).getAttribute('aria-expanded')) === 'true';
+
+const setOutputOpen = async (page: Page, open: boolean): Promise<void> => {
+  if ((await outputOpen(page)) !== open) {
+    await outputToggle(page).click();
+  }
+};
+
+/** Replaces the editor's source and reloads the preview, the way a visitor runs their own code. */
+const runSource = async (page: Page, source: string): Promise<void> => {
+  await waitFor(
+    () =>
+      page.evaluate('Boolean(window.monaco && window.monaco.editor.getEditors()[0] && window.monaco.editor.getEditors()[0].getModel())'),
+    ready => ready === true,
+    'the editor model',
+  );
+  await page.evaluate(
+    `(() => {
+      // The editor's own model; the other models are type libraries and scratch buffers.
+      window.monaco.editor.getEditors()[0].getModel().setValue(${JSON.stringify(source)});
+    })()`,
+  );
+  await page.locator('button[aria-label="Reload preview"]').click();
+};
+
+const box = async (page: Page, selector: string): Promise<{ x: number; y: number; width: number; height: number }> => {
+  const rect = await page.locator(selector).first().boundingBox();
+
+  assert(rect, `${selector} has no layout box`);
+
+  return rect;
+};
+
+// --- Console bridge -------------------------------------------------------------
+
+const CONSOLE_SOURCE = `
+const marker = Math.random().toString(36).slice(2, 8);
+const circular: Record<string, unknown> = { name: 'loop' };
+circular.self = circular;
+
+console.log('log', marker, 1, { list: [1, 2] });
+console.info('info', marker);
+console.debug('debug', marker);
+console.warn('warn', marker);
+console.error('error', marker, new Error('logged failure'));
+console.log('circular', circular);
+
+for (let index = 0; index < 1500; index += 1) {
+  console.log('flood', index);
+}
+
+let tick = 0;
+setInterval(() => console.log('tick', marker, tick++), 60);
+setTimeout(() => void Promise.reject(new Error('first rejection ' + marker)), 400);
+setTimeout(() => void Promise.reject(new Error('second rejection ' + marker)), 1600);
+`;
+
+const consoleChecks = async (browser: Browser, origin: string, base: string): Promise<void> => {
+  const session = await openPlayground(browser, origin, base, 'getting-started/hello-world');
+  const { page } = session;
+  let marker = '';
+
+  await check('output panel is collapsed by default and plain logs keep it closed', async () => {
+    await setOutputOpen(page, false);
+    await page.evaluate("localStorage.removeItem('exo-playground-output-open')");
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await previewFrame(page);
+    await waitFor(
+      () => outputToggle(page).count(),
+      count => count === 1,
+      'the Output toggle',
+    );
+    assert(!(await outputOpen(page)), 'the Output panel opened without a failure');
+  });
+
+  await check('console bridge captures every severity and keeps DevTools output', async () => {
+    session.console.length = 0;
+    await runSource(page, CONSOLE_SOURCE);
+    // The first rejection opens the panel on its own.
+    await waitFor(
+      () => outputOpen(page),
+      open => open,
+      'the panel to open on the uncaught rejection',
+    );
+
+    const entries = await outputEntries(page);
+    const logEntry = entries.find(entry => entry.text.startsWith('log '));
+
+    assert(logEntry, `no log entry in ${JSON.stringify(entries.slice(0, 5))}`);
+    marker = logEntry.text.split(' ')[1]!;
+    assert(logEntry.text === `log ${marker} 1 {list: [1, 2]}`, `log formatted as ${logEntry.text}`);
+
+    for (const severity of ['info', 'debug', 'warn', 'error'] as const) {
+      const entry = entries.find(candidate => candidate.text.startsWith(`${severity} ${marker}`));
+
+      assert(entry?.severity === severity, `${severity} was recorded as ${entry?.severity}`);
+    }
+
+    const error = entries.find(entry => entry.text.startsWith(`error ${marker}`))!;
+
+    assert(error.text.endsWith('Error: logged failure'), `error text: ${error.text}`);
+    assert(error.details.includes('logged failure'), 'the error stack is missing from the details');
+    assert(
+      entries.some(entry => entry.text === 'circular {name: "loop", self: [Circular]}'),
+      'the circular object was not described',
+    );
+
+    for (const type of ['log', 'info', 'debug', 'warning', 'error']) {
+      assert(
+        session.console.some(message => message.type === type && message.text.includes(marker)),
+        `DevTools did not receive the ${type} message`,
+      );
+    }
+  });
+
+  await check('console bridge bounds a flood and counts what it dropped', async () => {
+    const entries = await outputEntries(page);
+    const floods = entries.filter(entry => entry.text.startsWith('flood '));
+    const dropped = entries.find(entry => entry.kind === 'suppressed');
+
+    assert(floods.length < 200, `${floods.length} flood entries recorded`);
+    assert(dropped && /^\d+ messages dropped/.test(dropped.text), `no dropped-messages entry: ${JSON.stringify(dropped)}`);
+    assert(entries.length <= 501, `${entries.length} entries exceed the ring buffer`);
+    assert(
+      session.console.filter(message => message.text.startsWith('flood ')).length === 1500,
+      'DevTools did not receive every flood message',
+    );
+  });
+
+  await check('an unhandled rejection is recorded once, as uncaught', async () => {
+    const entries = await outputEntries(page);
+    const rejections = entries.filter(entry => entry.text.includes(`first rejection ${marker}`));
+
+    assert(rejections.length === 1, `${rejections.length} entries for one rejection`);
+    assert(rejections[0]!.kind === 'exception', `the rejection was recorded as ${rejections[0]!.kind}`);
+
+    const badge = await page.locator('[aria-label="Preview output"] [class*="badge--error"]').textContent();
+
+    assert(badge?.startsWith('2 errors'), `error badge reads ${badge}`);
+  });
+
+  await check('a collapse holds for the rest of the run', async () => {
+    await outputToggle(page).click();
+    assert(!(await outputOpen(page)), 'the panel did not collapse');
+    await waitFor(
+      () => page.locator('[aria-label="Preview output"] [class*="badge--error"]').textContent(),
+      text => text?.startsWith('3 errors') ?? false,
+      'the second rejection',
+    );
+    assert(!(await outputOpen(page)), 'the second rejection reopened a panel the visitor collapsed');
+  });
+
+  await check('a reload starts a fresh record with nothing from the earlier preview', async () => {
+    await page.locator('button[aria-label="Reload preview"]').click();
+    await setOutputOpen(page, true);
+
+    const fresh = await waitFor(
+      () => outputEntries(page),
+      entries => entries.some(entry => entry.text.startsWith('log ') && !entry.text.includes(marker)),
+      'the reloaded preview to log',
+    );
+    const nextMarker = fresh.find(entry => entry.text.startsWith('log '))!.text.split(' ')[1]!;
+
+    await page.waitForTimeout(800);
+
+    const entries = await outputEntries(page);
+    const stale = entries.filter(entry => entry.text.includes(marker));
+
+    assert(nextMarker !== marker, 'the marker did not change across the reload');
+    assert(stale.length === 0, `entries of the earlier preview survived: ${JSON.stringify(stale.slice(0, 3))}`);
+    assert(entries.filter(entry => entry.text.startsWith(`log ${nextMarker}`)).length === 1, 'the reloaded preview logged twice');
+  });
+
+  await check('logging never moves focus out of the preview', async () => {
+    const frame = await box(page, '[data-preview-surface] iframe');
+
+    await page.mouse.click(frame.x + frame.width / 2, frame.y + frame.height / 2);
+    await page.waitForTimeout(700);
+
+    const focused = await page.evaluate('document.activeElement && document.activeElement.tagName');
+
+    assert(focused === 'IFRAME', `focus moved to ${String(focused)}`);
+  });
+
+  await check('the Output panel works from the keyboard', async () => {
+    await setOutputOpen(page, false);
+    await outputToggle(page).focus();
+    await page.keyboard.press('Enter');
+    assert(await outputOpen(page), 'Enter did not expand the panel');
+
+    const errors = page.locator('[aria-label="Preview output"] button[data-filter="error"]');
+
+    await errors.focus();
+    await page.keyboard.press('Space');
+    assert((await errors.getAttribute('aria-pressed')) === 'false', 'Space did not toggle the Errors filter');
+    assert(!(await outputEntries(page)).some(entry => entry.severity === 'error'), 'error entries stayed visible behind the filter');
+    await page.keyboard.press('Space');
+    await outputToggle(page).focus();
+    await page.keyboard.press('Space');
+    assert(!(await outputOpen(page)), 'Space did not collapse the panel');
+  });
+
+  await check('Clear empties the list without stopping capture', async () => {
+    await setOutputOpen(page, true);
+    await page.locator('[aria-label="Preview output"] button', { hasText: 'Clear' }).click();
+    await waitFor(
+      () => outputEntries(page),
+      entries => entries.length > 0 && entries.every(entry => entry.text.startsWith('tick ')),
+      'ticks after the clear',
+    );
+  });
+
+  await check('the panel sits under the preview in the split layout and follows a swap', async () => {
+    const preview = await box(page, 'section[aria-label="Example preview"]');
+    const output = await box(page, '[aria-label="Preview output"]');
+    const editor = await box(page, 'section[aria-label="Source editor"]');
+
+    assert(output.y >= preview.y + preview.height - 1, 'the panel overlaps the preview');
+    assert(Math.abs(output.x - preview.x) < 2, 'the panel is not in the preview column');
+    assert(editor.x > preview.x, 'the editor is not to the right of the preview');
+
+    await page.locator('button[aria-label="Swap the editor and the preview"]').click();
+
+    const swappedPreview = await box(page, 'section[aria-label="Example preview"]');
+    const swappedOutput = await box(page, '[aria-label="Preview output"]');
+
+    assert(swappedPreview.x > preview.x, 'the swap did not move the preview');
+    assert(Math.abs(swappedOutput.x - swappedPreview.x) < 2, 'the panel did not follow the preview');
+    assert(swappedOutput.y >= swappedPreview.y + swappedPreview.height - 1, 'the panel overlaps the swapped preview');
+    await page.locator('button[aria-label="Swap the editor and the preview"]').click();
+  });
+
+  await check('the panel sits between preview and editor in the stacked layout', async () => {
+    await page.locator('button[aria-label="Switch to stacked layout"]').click();
+
+    const preview = await box(page, 'section[aria-label="Example preview"]');
+    const output = await box(page, '[aria-label="Preview output"]');
+    const editor = await box(page, 'section[aria-label="Source editor"]');
+
+    assert(output.y >= preview.y + preview.height - 1, 'the panel overlaps the preview');
+    assert(editor.y >= output.y + output.height - 1, 'the editor is not below the panel');
+    await page.locator('button[aria-label="Switch to split layout"]').click();
+  });
+
+  await page.context().close();
+
+  await check('an input example explains itself in the Output panel', async () => {
+    const keyboard = await openPlayground(browser, origin, base, 'input/keyboard');
+    const frame = await previewFrame(keyboard.page);
+    const canvas = frame.locator('canvas');
+
+    await canvas.waitFor();
+    await canvas.click();
+    await keyboard.page.keyboard.press('Space');
+    await keyboard.page.keyboard.down('ArrowLeft');
+    await keyboard.page.waitForTimeout(300);
+    await keyboard.page.keyboard.up('ArrowLeft');
+    await setOutputOpen(keyboard.page, true);
+
+    const texts = await waitFor(
+      async () => (await outputEntries(keyboard.page)).map(entry => entry.text),
+      entries => entries.includes('KeyDown: Space') && entries.includes('Held: Left') && entries.includes('Held: none'),
+      'the keyboard example to log',
+    );
+
+    assert(texts.filter(text => text === 'Held: Left').length === 1, `the held state was logged per frame: ${texts.join(' | ')}`);
+    await keyboard.page.context().close();
+  });
+
+  await check('the panel stays usable at phone width', async () => {
+    const phone = await openPlayground(browser, origin, base, 'getting-started/hello-world', { width: 390, height: 844 });
+    const preview = await box(phone.page, 'section[aria-label="Example preview"]');
+    const output = await box(phone.page, '[aria-label="Preview output"]');
+    const scrollWidth = await phone.page.evaluate('document.documentElement.scrollWidth');
+
+    assert(output.y >= preview.y + preview.height - 1, 'the panel overlaps the preview');
+    assert(output.width <= 390 && output.width > 300, `the panel is ${output.width}px wide`);
+    assert(Number(scrollWidth) <= 390, `the page scrolls sideways (${String(scrollWidth)}px)`);
+    await setOutputOpen(phone.page, true);
+    assert(await outputOpen(phone.page), 'the panel did not open');
+    await phone.page.context().close();
+  });
+};
+
+// --- Asset Browser --------------------------------------------------------------
+
+interface CatalogEntry {
+  key: string;
+  type: string;
+  category: string;
+}
+
+const readCatalog = (): CatalogEntry[] => {
+  const catalog = JSON.parse(readFileSync(resolve(repoRoot, 'packages', 'exojs-demo-assets', 'manifest.json'), 'utf8')) as {
+    entries: Array<CatalogEntry & { profile: string }>;
+  };
+
+  return catalog.entries.filter(entry => entry.profile === 'standard');
+};
+
+/** One asset of every preview kind, by the id the browser lists it under. */
+const REPRESENTATIVES = [
+  'ship',
+  'iconPlay',
+  'platformerCharacters',
+  'keyboardMouseInputPrompts',
+  'harborPlazaMap',
+  'isometricLandscape',
+  'harborWorldProject',
+  'soundUiClick',
+  'uiSoundSprite',
+  'musicLoopMain',
+  'videoDemoLoop',
+  'fontKenneyFuture',
+  'fontKenneyBlocksFnt',
+];
+
+const assetFrame = async (page: Page): Promise<Frame> => {
+  const frame = await previewFrame(page);
+
+  await waitFor(
+    () => frame.locator('nav[aria-label="Demo assets"] button[data-asset]').count(),
+    count => count > 0,
+    'the asset list',
+  );
+
+  return frame;
+};
+
+/** Selects through the search box, so it works for an asset in any group. */
+const selectAsset = async (frame: Frame, id: string, options: { trusted?: boolean } = {}): Promise<void> => {
+  const search = frame.locator('nav[aria-label="Demo assets"] input[type="search"]');
+
+  if (options.trusted === false) {
+    await frame.evaluate(
+      `(() => {
+        const search = document.querySelector('nav[aria-label="Demo assets"] input[type="search"]');
+        search.value = ${JSON.stringify(id)};
+        search.dispatchEvent(new Event('input'));
+        document.querySelector('button[data-asset="${id}"]').click();
+      })()`,
+    );
+
+    return;
+  }
+
+  await search.fill(id);
+  await frame.locator(`button[data-asset="${id}"]`).click();
+};
+
+const inspectorHeading = (frame: Frame): Promise<string> => frame.locator('aside[aria-label="Selected asset"] h2').innerText();
+
+const residentRows = async (frame: Frame): Promise<string[]> =>
+  frame.$$eval('aside[aria-label="Selected asset"] details li', items => items.map(item => item.textContent ?? ''));
+
+const assetChecks = async (browser: Browser, origin: string, base: string): Promise<string[]> => {
+  const snippets: string[] = [];
+  const session = await openPlayground(browser, origin, base, 'debug-layer/asset-browser');
+  const { page } = session;
+  const frame = await assetFrame(page);
+  const catalog = readCatalog();
+
+  await check('asset browser lists the catalog by type', async () => {
+    const tabs = await frame.$$eval('nav[aria-label="Demo assets"] [role="group"] button', buttons =>
+      buttons.map(button => button.textContent ?? ''),
+    );
+    const total = tabs.reduce((sum, tab) => sum + Number(tab.split(' ').pop()), 0);
+    const atlases = catalog.filter(
+      entry => entry.key.endsWith('Atlas') && catalog.some(other => other.key === entry.key.replace(/Atlas$/, 'Image')),
+    ).length;
+
+    assert(
+      tabs.map(tab => tab.replace(/ \d+$/, '')).join(',') === 'Textures,Spritesheets,Maps,Audio,Video,Fonts',
+      `groups: ${tabs.join(', ')}`,
+    );
+    assert(total === catalog.length - atlases, `the groups list ${total} assets, the catalog has ${catalog.length - atlases}`);
+    assert(!tabs.some(tab => tab.startsWith('Meshes')), 'a Meshes group appeared without mesh assets');
+  });
+
+  for (const id of REPRESENTATIVES) {
+    await check(`asset browser previews ${id}`, async () => {
+      const before = session.console.length;
+
+      await selectAsset(frame, id);
+      await waitFor(
+        async () => session.console.slice(before).map(message => message.text),
+        texts => texts.some(text => text.startsWith('Loaded ') || text.startsWith('Failed to load')),
+        `${id} to load`,
+        30_000,
+      );
+
+      const failure = session.console.slice(before).find(message => message.text.startsWith('Failed to load'));
+
+      assert(!failure, failure?.text ?? '');
+      assert(!(await outputEntries(page)).some(entry => entry.kind === 'exception'), 'an uncaught error was recorded');
+
+      const resident = await residentRows(frame);
+
+      assert(resident.length >= 2 && resident.length <= 12, `the loader holds ${resident.length} assets: ${resident.join(', ')}`);
+
+      await frame.getByRole('button', { name: 'Code', exact: true }).click();
+
+      const code = await frame.locator('section[aria-label="Code"] pre').innerText();
+
+      assert(code.includes(`assets.${id}`), `the snippet does not reference assets.${id}: ${code.slice(0, 200)}`);
+      snippets.push(`// ${id}\n${code}`);
+      await frame.getByRole('button', { name: 'Close', exact: true }).click();
+
+      if (options.shots) {
+        await mkdir(options.shots, { recursive: true });
+        await page.locator('section[aria-label="Example preview"]').screenshot({ path: join(options.shots, `${id}.png`) });
+      }
+    });
+  }
+
+  await check('spritesheet frame selection and animation settings reach the snippet', async () => {
+    await selectAsset(frame, 'platformerCharacters');
+    await waitFor(
+      () => inspectorHeading(frame),
+      text => text === 'Platformer characters',
+      'the spritesheet',
+    );
+    // The panel mounts once the atlas has loaded; a tap before that has nothing to hit.
+    await frame.getByRole('slider', { name: 'FPS' }).waitFor();
+
+    const canvas = frame.locator('canvas');
+    const rect = await canvas.boundingBox();
+
+    assert(rect, 'the canvas has no box');
+
+    const before = session.console.length;
+
+    // `position` is in page pixels from the canvas's scaled box; the fitted
+    // atlas is centred in the preview area, above the frame strip.
+    await canvas.click({ position: { x: (610 * rect.width) / 1280, y: (150 * rect.height) / 720 } });
+    await waitFor(
+      async () => session.console.slice(before).map(message => message.text),
+      texts => texts.some(text => text.startsWith('Frame ')),
+      'a frame selection log',
+    );
+
+    await frame.getByRole('slider', { name: 'FPS' }).fill('14');
+    await frame.getByRole('slider', { name: 'Last frame' }).fill('3');
+    await frame.getByRole('button', { name: 'Code', exact: true }).click();
+
+    const code = await frame.locator('section[aria-label="Code"] pre').innerText();
+
+    assert(code.includes('fps: 14'), 'the FPS setting is not in the snippet');
+    assert((code.match(/"character_[a-z_]+"/g) ?? []).length === 4, `the frame range is not in the snippet: ${code}`);
+    snippets.push(`// spritesheet settings\n${code}`);
+    await frame.getByRole('button', { name: 'Close', exact: true }).click();
+  });
+
+  await check('texture filtering and zoom reach the snippet', async () => {
+    await selectAsset(frame, 'ship');
+    await waitFor(
+      () => inspectorHeading(frame),
+      text => text === 'Ship',
+      'the texture',
+    );
+    await frame.getByRole('slider', { name: 'Zoom' }).fill('3');
+    await frame.getByRole('button', { name: 'Next Filtering', exact: true }).click();
+    await frame.getByRole('button', { name: 'Code', exact: true }).click();
+
+    const code = await frame.locator('section[aria-label="Code"] pre').innerText();
+
+    assert(code.includes('ScaleModes.Nearest') && code.includes('setScale(3)'), `snippet: ${code}`);
+    snippets.push(`// texture settings\n${code}`);
+    await frame.getByRole('button', { name: 'Close', exact: true }).click();
+  });
+
+  await check('a late load never surfaces after a newer selection', async () => {
+    let release: () => void = () => undefined;
+    const held = new Promise<void>(done => (release = done));
+
+    await page.route('**/clips/high-res.mp4*', async route => {
+      await held;
+      await route.continue().catch(() => undefined);
+    });
+
+    const before = session.console.length;
+
+    await selectAsset(frame, 'videoHighRes');
+    await page.waitForTimeout(300);
+    await selectAsset(frame, 'ship');
+    await waitFor(
+      () => inspectorHeading(frame),
+      text => text === 'Ship',
+      'the newer selection',
+    );
+    release();
+    await page.waitForTimeout(2500);
+
+    const texts = session.console.slice(before).map(message => message.text);
+
+    assert(!texts.some(text => text.includes('High res')), `the late video surfaced: ${texts.join(' | ')}`);
+    assert((await inspectorHeading(frame)) === 'Ship', 'the inspector shows the late selection');
+    assert(!(await residentRows(frame)).some(row => row.includes('high-res')), 'the late video stayed resident');
+    await page.unroute('**/clips/high-res.mp4*');
+  });
+
+  await check('many quick switches leave only the current selection resident', async () => {
+    for (const id of [...REPRESENTATIVES, ...REPRESENTATIVES.slice().reverse()]) {
+      await selectAsset(frame, id, { trusted: false });
+    }
+
+    await selectAsset(frame, 'ship');
+    await waitFor(
+      () => inspectorHeading(frame),
+      text => text === 'Ship',
+      'the final selection',
+    );
+    await page.waitForTimeout(1500);
+    await selectAsset(frame, 'iconPlay');
+    await waitFor(
+      async () => (await residentRows(frame)).join(','),
+      rows => rows.includes('play.svg'),
+      'the last preview',
+    );
+
+    const rows = await residentRows(frame);
+
+    assert(rows.length === 2, `the loader holds ${rows.length} assets: ${rows.join(', ')}`);
+    assert(
+      rows.some(row => row.startsWith('manifest.json')),
+      'the manifest is missing',
+    );
+    assert(!(await outputEntries(page)).some(entry => entry.kind === 'exception'), 'a switch raised an uncaught error');
+  });
+
+  await check('a double press of Play starts one voice and Stop stays harmless', async () => {
+    await selectAsset(frame, 'musicLoopMain');
+    await waitFor(
+      () => inspectorHeading(frame),
+      text => text === 'Loop main',
+      'the music',
+    );
+
+    const before = session.console.length;
+    const play = frame.getByRole('button', { name: 'Play', exact: true });
+
+    await play.dblclick();
+    await page.waitForTimeout(600);
+    await frame.getByRole('button', { name: 'Stop', exact: true }).click();
+    await frame.getByRole('button', { name: 'Stop', exact: true }).click();
+
+    const played = session.console.slice(before).filter(message => message.text.startsWith('Playing'));
+
+    assert(played.length === 1, `${played.length} voices started`);
+    await selectAsset(frame, 'ship');
+  });
+
+  await check('leaving the example while a load is in flight raises nothing', async () => {
+    let release: () => void = () => undefined;
+    const held = new Promise<void>(done => (release = done));
+
+    await page.route('**/clips/high-fps.webm*', async route => {
+      await held;
+      await route.continue().catch(() => undefined);
+    });
+    await selectAsset(frame, 'videoHighFps');
+    await page.waitForTimeout(300);
+
+    const errorsBefore = session.pageErrors.length;
+
+    await page.locator('a[href$="/getting-started/hello-world"]').first().click();
+    await waitFor(
+      () => page.evaluate('location.hash'),
+      hash => String(hash).endsWith('hello-world'),
+      'the example switch',
+    );
+    release();
+    await page.waitForTimeout(2000);
+    assert(session.pageErrors.length === errorsBefore, `errors: ${session.pageErrors.slice(errorsBefore).join(' | ')}`);
+    assert(!(await outputEntries(page)).some(entry => entry.kind === 'exception'), 'an uncaught error reached the new preview');
+    await page.unroute('**/clips/high-fps.webm*');
+  });
+
+  await page.context().close();
+
+  await check('playback waiting for the audio unlock is cancelled by a switch', async () => {
+    // A fresh page: no real gesture has happened yet, so audio is still locked
+    // and every interaction below until the final click is a synthetic one.
+    const locked = await openPlayground(browser, origin, base, 'debug-layer/asset-browser');
+    const lockedFrame = await assetFrame(locked.page);
+    const clickPlay = `[...document.querySelectorAll('aside button')].find(button => button.textContent === 'Play').click()`;
+
+    await selectAsset(lockedFrame, 'soundUiClick', { trusted: false });
+    await lockedFrame.getByRole('button', { name: 'Play', exact: true }).waitFor();
+    await lockedFrame.evaluate(clickPlay);
+    await waitFor(
+      () => lockedFrame.locator('aside[aria-label="Selected asset"]').innerText(),
+      text => text.includes('Waiting for the browser to allow audio'),
+      'the locked state',
+    );
+    await selectAsset(lockedFrame, 'ship', { trusted: false });
+    await waitFor(
+      () => inspectorHeading(lockedFrame),
+      text => text === 'Ship',
+      'the switch',
+    );
+
+    // A real click: the gesture the browser unlocks audio for.
+    const canvas = lockedFrame.locator('canvas');
+    const rect = (await canvas.boundingBox())!;
+
+    await canvas.click({ position: { x: (610 * rect.width) / 1280, y: rect.height / 2 } });
+    await locked.page.waitForTimeout(800);
+    assert(!locked.console.some(message => message.text.startsWith('Playing')), 'a cancelled start played after the unlock');
+
+    // The same path without the switch does start once audio is allowed.
+    await selectAsset(lockedFrame, 'soundUiClick', { trusted: false });
+    await lockedFrame.getByRole('button', { name: 'Play', exact: true }).waitFor();
+    await lockedFrame.evaluate(clickPlay);
+    await waitFor(
+      async () => locked.console.filter(message => message.text.startsWith('Playing')).length,
+      count => count === 1,
+      'the uncancelled start',
+    );
+    await locked.page.context().close();
+  });
+
+  return snippets;
+};
+
+/** Type-checks every generated snippet as its own module against the engine sources. */
+const typecheckSnippets = async (snippets: string[]): Promise<void> => {
+  await check(`generated snippets type-check (${snippets.length})`, async () => {
+    assert(snippets.length > 0, 'no snippets were collected');
+    await rm(snippetDir, { recursive: true, force: true });
+    await mkdir(snippetDir, { recursive: true });
+
+    const files = await Promise.all(
+      snippets.map(async (snippet, index) => {
+        const file = join(snippetDir, `snippet-${String(index).padStart(2, '0')}.ts`);
+
+        await writeFile(file, snippet);
+
+        return file;
+      }),
+    );
+    const config = ts.getParsedCommandLineOfConfigFile(
+      resolve(repoRoot, 'tsconfig.examples.json'),
+      {},
+      {
+        ...ts.sys,
+        onUnRecoverableConfigFileDiagnostic: diagnostic => {
+          throw new Error(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+        },
+      },
+    );
+
+    assert(config, 'tsconfig.examples.json did not parse');
+
+    const program = ts.createProgram(files, { ...config.options, noEmit: true });
+    const diagnostics = ts
+      .getPreEmitDiagnostics(program)
+      .filter(diagnostic => diagnostic.file && files.includes(resolve(diagnostic.file.fileName)));
+
+    assert(
+      diagnostics.length === 0,
+      diagnostics
+        .slice(0, 8)
+        .map(diagnostic => `${diagnostic.file!.fileName}: ${ts.flattenDiagnosticMessageText(diagnostic.messageText, ' ')}`)
+        .join('\n'),
+    );
+  });
+};
+
+const main = async (): Promise<void> => {
+  const build = readSiteBuildManifest(distDir);
+  const base = build.basePath.replace(/\/$/, '');
+  const { server, origin } = await startServer(distDir, base);
+  const browser = await chromium.launch({
+    headless: !options.headed,
+    // Audio stays locked until a real gesture, as it does for a visitor.
+    ignoreDefaultArgs: ['--autoplay-policy=no-user-gesture-required'],
+    args: ['--autoplay-policy=user-gesture-required', '--enable-webgl', '--ignore-gpu-blocklist'],
+  });
+
+  try {
+    await consoleChecks(browser, origin, base);
+    await typecheckSnippets(await assetChecks(browser, origin, base));
+  } finally {
+    await browser.close();
+    server.close();
+  }
+
+  const failed = results.filter(result => result.error !== null);
+
+  console.log(`[e2e] ${results.length - failed.length} passed, ${failed.length} failed`);
+  process.exitCode = failed.length > 0 ? 1 : 0;
+};
+
+await main();
diff --git a/site/scripts/site-base-links.ts b/site/scripts/site-base-links.ts
new file mode 100644
index 000000000..0421fee99
--- /dev/null
+++ b/site/scripts/site-base-links.ts
@@ -0,0 +1,67 @@
+import { rewriteSiteHref, SOURCE_LINK_BASE } from '../src/lib/site-links.ts';
+
+/**
+ * Guide and API sources link site pages through the Stable base
+ * (`/ExoJS/en/guide/...`), the form `test/site/guide-prose-links.test.ts`
+ * validates. This Markdown syntax-tree plugin moves Markdown links,
+ * definitions and images onto the base the build targets, before rendering,
+ * so a Next build never links into Stable and no finished file is rewritten
+ * afterwards. Code and prose that merely mention the path stay as written.
+ *
+ * Components that take a page link as a prop (`NextStep`) apply the same
+ * rewrite themselves; the Markdown processor cannot change JSX attributes.
+ */
+
+export { rewriteSiteHref };
+
+interface UrlNode {
+  readonly url: string;
+}
+
+interface VisitorContext {
+  setProperty(node: unknown, key: string, value: unknown): void;
+}
+
+/**
+ * The Satteri mdast plugin for a build at `basePath`, or `null` for the
+ * Stable base, where every source link is already correct.
+ */
+export const siteBaseLinksPlugin = (basePath: string) => {
+  if (basePath === SOURCE_LINK_BASE) {
+    return null;
+  }
+
+  const rewriteUrl = (node: UrlNode, context: VisitorContext): void => {
+    const url = rewriteSiteHref(node.url, basePath);
+
+    if (url !== node.url) {
+      context.setProperty(node, 'url', url);
+    }
+  };
+
+  return { name: 'exojs-site-base-links', link: rewriteUrl, definition: rewriteUrl, image: rewriteUrl };
+};
+
+interface MarkdownProcessorLike {
+  readonly name: string;
+  readonly options?: { readonly mdastPlugins?: unknown[] };
+}
+
+/**
+ * Adds the plugin to the configured Markdown processor, which MDX inherits.
+ * Throws for a non-Stable base when the processor is not Satteri: building
+ * Next without the rewrite would ship links into Stable.
+ */
+export const installSiteBaseLinks = (processor: MarkdownProcessorLike, basePath: string): void => {
+  const plugin = siteBaseLinksPlugin(basePath);
+
+  if (plugin === null) {
+    return;
+  }
+
+  if (processor.name !== 'satteri' || !Array.isArray(processor.options?.mdastPlugins)) {
+    throw new Error(`[site-base-links] cannot add the base link rewrite to the ${JSON.stringify(processor.name)} Markdown processor`);
+  }
+
+  processor.options.mdastPlugins.push(plugin);
+};
diff --git a/site/scripts/smoke-examples.ts b/site/scripts/smoke-examples.ts
index 3a506153c..0612ec113 100644
--- a/site/scripts/smoke-examples.ts
+++ b/site/scripts/smoke-examples.ts
@@ -59,6 +59,8 @@ import { parseArgs } from 'node:util';
 
 import { type Browser, type BrowserContext, chromium, firefox, type Frame, type Page } from 'playwright';
 
+import { readSiteBuildManifest } from '../../scripts/pages/site-manifest.ts';
+
 const here = dirname(fileURLToPath(import.meta.url));
 const projectRoot = resolve(here, '..'); // site/
 const repoRoot = resolve(projectRoot, '..'); // repo root
@@ -68,10 +70,13 @@ const reportPath = resolve(repoRoot, '.workspace', 'reports', 'example-smoke.md'
 const artifactDir = resolve(repoRoot, '.workspace', 'reports', 'example-smoke-artifacts');
 
 /**
- * The site's configured base path. Every URL in the built HTML carries it, so
- * the throwaway server strips it and the playground URLs re-add it.
+ * The base path the tree in `dist` was built for, without its trailing slash,
+ * read from the tree's own `site-build.json` so the smoke drives exactly the
+ * channel and base that will be published. Every URL in the built HTML
+ * carries it; the server answers nothing outside it, so a URL that escapes
+ * the base fails the run instead of resolving by accident.
  */
-const SITE_BASE = '/ExoJS';
+let SITE_BASE = '';
 
 /**
  * Examples that legitimately paint nothing, so a uniform canvas is their
@@ -292,10 +297,15 @@ const startServer = (root: string): Promise<{ port: number; server: Server }> =>
 
     // The site is built with a configured `base`, so every URL the emitted
     // HTML references carries that prefix while `dist` itself is flat.
-    if (urlPath.startsWith(SITE_BASE)) {
-      urlPath = urlPath.slice(SITE_BASE.length) || '/';
+    if (urlPath !== SITE_BASE && !urlPath.startsWith(`${SITE_BASE}/`)) {
+      res.writeHead(404);
+      res.end('Outside the site base');
+
+      return;
     }
 
+    urlPath = urlPath.slice(SITE_BASE.length) || '/';
+
     if (!resolve(join(root, urlPath)).startsWith(root)) {
       res.writeHead(403);
       res.end('Forbidden');
@@ -660,7 +670,7 @@ const probeGraphics = async (browser: Browser, baseUrl: string, forceWebGl2: boo
       await page.addInitScript(withholdWebGpu);
     }
 
-    await page.goto(`${baseUrl}/preview.html`, { waitUntil: 'domcontentloaded', timeout: 10_000 });
+    await page.goto(`${baseUrl}${SITE_BASE}/preview.html`, { waitUntil: 'domcontentloaded', timeout: 10_000 });
 
     return await page.evaluate(async () => {
       const webgpu = await (async () => {
@@ -1083,6 +1093,10 @@ const main = async (): Promise<void> => {
     return;
   }
 
+  const build = readSiteBuildManifest(distDir);
+  SITE_BASE = build.basePath.replace(/\/$/, '');
+  console.log(`[smoke] Serving the ${build.channel} tree of ${build.sourceSha.slice(0, 12)} at ${build.basePath}`);
+
   const browserName = values.browser === 'firefox' ? 'firefox' : 'chromium';
   // Withholding `navigator.gpu` rather than passing a backend preference: the
   // playground picks its renderer from what the browser actually reports, so
diff --git a/site/scripts/sync-examples-static.ts b/site/scripts/sync-examples-static.ts
index 35b1b8704..f05d26f5a 100644
--- a/site/scripts/sync-examples-static.ts
+++ b/site/scripts/sync-examples-static.ts
@@ -2,10 +2,6 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { assets } from '../../examples/assets/assets.js';
-import { rawAssets } from '../../examples/assets/catalog.js';
-import { resolveAssetCatalog } from '../../examples/assets/resolver.js';
-import { renderAssetsGlobalDts } from '../../scripts/generate-examples-global-dts.ts';
 import { renderRuntimeDts } from '../../scripts/generate-examples-runtime-dts.ts';
 import { transpileTypescriptExamples } from '../../scripts/transpile-examples.ts';
 
@@ -15,14 +11,12 @@ const projectRoot = path.resolve(__dirname, '..');
 const repositoryRoot = path.resolve(projectRoot, '..');
 
 const sourceExamplesDir = path.resolve(repositoryRoot, 'examples');
-const sourceAssetsDir = path.resolve(sourceExamplesDir, 'assets');
-const sourceCatalogDemoDir = path.resolve(sourceExamplesDir, 'assets', 'demo');
-const sourceCatalogTechnicalDir = path.resolve(sourceExamplesDir, 'assets', 'technical');
 
 const targetExamplesDir = path.resolve(projectRoot, 'public', 'examples');
-const targetAssetsDir = path.resolve(projectRoot, 'public', 'assets');
-const targetCatalogDemoDir = path.resolve(targetAssetsDir, 'demo');
-const targetCatalogTechnicalDir = path.resolve(targetAssetsDir, 'technical');
+// Earlier syncs served the whole examples/assets tree here. The examples now
+// load their media through @codexo/exojs-demo-assets (vendor/exojs-demo-assets),
+// so a stale copy is removed rather than shipped.
+const staleAssetsDir = path.resolve(projectRoot, 'public', 'assets');
 
 const ensureSource = (dirPath: string): void => {
   if (!fs.existsSync(dirPath)) {
@@ -35,23 +29,19 @@ const resetDir = (dirPath: string): void => {
   fs.mkdirSync(path.dirname(dirPath), { recursive: true });
 };
 
-const copyRecursive = (sourceDir: string, targetDir: string): void => {
-  fs.cpSync(sourceDir, targetDir, { recursive: true, force: true });
-};
-
 /**
  * The guide sources under `examples/guides/` are read at build time by
- * `SourceSnippet`, straight from the repository. Nothing loads them over HTTP,
- * so they are left out of the served snapshot rather than shipped as dead
- * weight next to the runnable examples.
+ * `SourceSnippet`, straight from the repository, and the media under
+ * `examples/assets/` are the authoring source of the demo-assets package.
+ * Nothing loads either over HTTP, so both are left out of the served snapshot.
  */
 const copyExamples = (sourceDir: string, targetDir: string): void => {
-  const guidesDir = path.resolve(sourceDir, 'guides');
+  const skipped = new Set([path.resolve(sourceDir, 'guides'), path.resolve(sourceDir, 'assets')]);
 
   fs.cpSync(sourceDir, targetDir, {
     recursive: true,
     force: true,
-    filter: source => source !== guidesDir,
+    filter: source => !skipped.has(source),
   });
 };
 
@@ -99,9 +89,6 @@ const collapseImportLists = (dir: string): void => {
 
 const run = async (): Promise<void> => {
   ensureSource(sourceExamplesDir);
-  ensureSource(sourceAssetsDir);
-  ensureSource(sourceCatalogDemoDir);
-  ensureSource(sourceCatalogTechnicalDir);
 
   // Transpile TypeScript examples to JavaScript before copying so the
   // generated .js files are included in the public/examples snapshot.
@@ -111,14 +98,6 @@ const run = async (): Promise<void> => {
     console.log(`[examples:sync] Transpiled ${transpiled} TypeScript example(s) to JavaScript`);
   }
 
-  // Regenerate the self-contained typed `assets` global declaration from the
-  // canonical catalog so the Monaco editor (and typecheck:examples) get
-  // hierarchical autocomplete + exact literal types with no `@assets` import.
-  // Drift between this and the committed file is guarded by a unit test.
-  const globalDtsPath = path.resolve(sourceExamplesDir, 'shared', 'assets-global.d.ts');
-  fs.writeFileSync(globalDtsPath, renderAssetsGlobalDts(assets as unknown as Record<string, unknown>), 'utf8');
-  console.log(`[examples:sync] Generated ${globalDtsPath}`);
-
   // The Playground editor resolves `@examples/runtime` through a declaration
   // file it fetches from the served snapshot, so the shared helper kit needs one
   // beside its implementation. Emitted rather than hand-written: a second copy
@@ -128,41 +107,12 @@ const run = async (): Promise<void> => {
   console.log(`[examples:sync] Generated ${runtimeDtsPath}`);
 
   resetDir(targetExamplesDir);
-  resetDir(targetAssetsDir);
+  fs.rmSync(staleAssetsDir, { recursive: true, force: true });
 
   copyExamples(sourceExamplesDir, targetExamplesDir);
   collapseImportLists(targetExamplesDir);
-  copyRecursive(sourceAssetsDir, targetAssetsDir);
-  copyRecursive(sourceCatalogDemoDir, targetCatalogDemoDir);
-  copyRecursive(sourceCatalogTechnicalDir, targetCatalogTechnicalDir);
-
-  // Keep runtime serving deterministic: examples/assets is canonical source,
-  // but the playground runtime expects /assets/* URLs.
-  fs.rmSync(path.resolve(targetExamplesDir, 'assets'), { recursive: true, force: true });
-
-  // Generate assets/catalog.js - the resolved runtime catalog imported by the
-  // controlled example runtimes to populate the `assets` global. Paths are
-  // resolved relative to preview.html (i.e. 'assets/demo/...', 'assets/technical/...')
-  // so no basePath is needed in loaders.
-  const resolved = resolveAssetCatalog(rawAssets, 'assets/');
-  const resolvedAssets = resolveAssetCatalog(assets as unknown as Record<string, unknown>, 'assets/');
-  const catalogLines = [
-    '// Auto-generated by examples:sync — do not edit.',
-    '',
-    // Primary hierarchical export - used by all current examples.
-    `export const assets = ${JSON.stringify(resolvedAssets, null, 4)};`,
-    '',
-    // Legacy flat category exports - kept for Asset Browser introspection.
-    ...Object.entries(resolved).map(([key, value]) => `export const ${key} = ${JSON.stringify(value, null, 4)};`),
-    '',
-  ];
-  fs.writeFileSync(path.resolve(targetAssetsDir, 'catalog.js'), catalogLines.join('\n'), 'utf8');
 
   console.log(`[examples:sync] Copied ${sourceExamplesDir} -> ${targetExamplesDir}`);
-  console.log(`[examples:sync] Copied ${sourceAssetsDir} -> ${targetAssetsDir}`);
-  console.log(`[examples:sync] Copied ${sourceCatalogDemoDir} -> ${targetCatalogDemoDir}`);
-  console.log(`[examples:sync] Copied ${sourceCatalogTechnicalDir} -> ${targetCatalogTechnicalDir}`);
-  console.log(`[examples:sync] Generated ${path.resolve(targetAssetsDir, 'catalog.js')}`);
 };
 
 void run();
diff --git a/site/scripts/sync-exo-vendor.ts b/site/scripts/sync-exo-vendor.ts
index 5807affbe..cdecafca1 100644
--- a/site/scripts/sync-exo-vendor.ts
+++ b/site/scripts/sync-exo-vendor.ts
@@ -414,6 +414,58 @@ const syncBundlerClientTypes = (): void => {
   console.log('[vendor:sync] Copied @codexo/exojs-build client declarations -> vendor/exojs-build/client.d.ts');
 };
 
+/**
+ * Serves `@codexo/exojs-demo-assets` the way a consumer installs it: the
+ * compiled catalog under `esm/` and the standard media under `media/`, so each
+ * descriptor's `new URL('../media/...', import.meta.url)` resolves to a file
+ * the site actually ships, plus the package's `manifest.json`. Only the
+ * standard profile's media are copied; the extended media are not part of the
+ * site.
+ */
+const syncDemoAssets = (): void => {
+  const packageRoot = path.resolve(projectRoot, '..', 'packages', 'exojs-demo-assets');
+  const distDir = path.resolve(packageRoot, 'dist');
+  const mediaDir = path.resolve(packageRoot, 'media');
+
+  for (const required of [distDir, mediaDir]) {
+    if (!fs.existsSync(required)) {
+      throw new Error(
+        `[vendor:sync] @codexo/exojs-demo-assets is not built: ${required} is missing. ` +
+          'Build it first: pnpm --filter @codexo/exojs-demo-assets build',
+      );
+    }
+  }
+
+  const vendorDir = path.resolve(projectRoot, 'public', 'vendor', 'exojs-demo-assets');
+  fs.rmSync(vendorDir, { recursive: true, force: true });
+  fs.mkdirSync(vendorDir, { recursive: true });
+  fs.cpSync(distDir, path.resolve(vendorDir, 'esm'), { recursive: true });
+  fs.cpSync(mediaDir, path.resolve(vendorDir, 'media'), { recursive: true });
+  // The package exports its manifest (sizes, hashes, media metadata) as
+  // `@codexo/exojs-demo-assets/manifest.json`; the preview's import map
+  // resolves that specifier here.
+  fs.copyFileSync(path.resolve(packageRoot, 'manifest.json'), path.resolve(vendorDir, 'manifest.json'));
+
+  const dtsFiles = collectDeclarationFiles(distDir);
+  fs.writeFileSync(path.resolve(vendorDir, 'esm-typings.json'), `${JSON.stringify(dtsFiles, null, 2)}\n`, 'utf8');
+
+  const packageJson = JSON.parse(fs.readFileSync(path.resolve(packageRoot, 'package.json'), 'utf8')) as { version: string };
+  const registry: MonacoRegistry = {
+    packageJson: JSON.stringify({ name: '@codexo/exojs-demo-assets', version: packageJson.version, types: './dist/esm/index.d.ts' }),
+    subpathShims: [
+      {
+        virtualPath: 'file:///node_modules/@codexo/exojs-demo-assets/extended.d.ts',
+        content: "export * from './dist/esm/extended';\n",
+      },
+    ],
+  };
+  fs.writeFileSync(path.resolve(vendorDir, 'monaco-registry.json'), `${JSON.stringify(registry, null, 2)}\n`, 'utf8');
+
+  console.log(
+    `[vendor:sync] Copied @codexo/exojs-demo-assets (${dtsFiles.length} declarations, standard media) -> vendor/exojs-demo-assets/`,
+  );
+};
+
 const syncVendor = (): void => {
   ensureSourcePackage();
   syncWebGpuTypes();
@@ -448,24 +500,15 @@ const syncVendor = (): void => {
 
   console.log(`[vendor:sync] Copied ExoJS ESM runtime + declarations from ${sourceDistDir} -> ${flatTargetDir}`);
 
-  // Sync extension packages. Each gets the same Monaco-resolvable treatment as
+  // Sync the adapter packages; the runtime modules ship inside the Core tree
+  // copied above. Each adapter gets the same Monaco-resolvable treatment as
   // core: copy the ESM tree, rewrite '#'-subpath imports to relative paths
   // (Monaco can't resolve '#'), emit an `esm-typings.json` manifest, and emit a
   // `monaco-registry.json` (virtual package.json + subpath shims for e.g.
   // `/debug`). Without this the playground's TypeScript worker
-  // can't resolve `@codexo/exojs-particles` & co. and every extension example
+  // can't resolve `@codexo/exojs-tiled` & co. and every adapter example
   // shows a ts2307 "Cannot find module" error.
-  const extensionPackages = [
-    'exojs-particles',
-    'exojs-audio-fx',
-    'exojs-tilemap',
-    'exojs-tiled',
-    'exojs-ldtk',
-    'exojs-physics',
-    'exojs-tilemap-physics',
-    'exojs-lighting',
-    'exojs-pathfinding',
-  ] as const;
+  const extensionPackages = ['exojs-tiled', 'exojs-ldtk'] as const;
 
   for (const pkgName of extensionPackages) {
     let pkgRoot: string;
@@ -486,7 +529,7 @@ const syncVendor = (): void => {
       // "Cannot find module '@codexo/exojs-...'" - and nobody saw the warning.
       throw new Error(
         `[vendor:sync] Extension package @codexo/${pkgName} dist not found at ${pkgDist}. ` +
-          `Build the extension packages first: pnpm --filter "@codexo/exojs-*" build`,
+          `Build the adapter packages first: pnpm --filter "./packages/*" build`,
       );
     }
 
@@ -513,6 +556,8 @@ const syncVendor = (): void => {
       `[vendor:sync] Copied @codexo/${pkgName} ESM (${files.length} files, ${dtsFiles.length} declarations, ${rewritten} '#'-rewritten) -> vendor/${pkgName}/`,
     );
   }
+
+  syncDemoAssets();
 };
 
 syncVendor();
diff --git a/site/scripts/write-site-build.ts b/site/scripts/write-site-build.ts
new file mode 100644
index 000000000..c3a80455c
--- /dev/null
+++ b/site/scripts/write-site-build.ts
@@ -0,0 +1,107 @@
+import { execFileSync } from 'node:child_process';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+import { counterpartBasePath, resolveSiteChannel } from '../../scripts/pages/site-channel.ts';
+import {
+  assertSiteBuildIdentity,
+  createSiteBuildManifest,
+  serializeSiteBuildManifest,
+  SITE_BUILD_FILE,
+  type SiteBuildIdentity,
+} from '../../scripts/pages/site-manifest.ts';
+
+/**
+ * The identity of a site build and the step that turns it into the finished
+ * `site-build.json`.
+ *
+ * The Astro config resolves the identity once, renders it into the pages and
+ * leaves it in `dist/site-build.json` as a provisional record; after Pagefind
+ * has written its index, this script lists and hashes the finished tree and
+ * replaces the record with the manifest. The identity is therefore decided
+ * exactly once per build, and the manifest covers every file Pages will
+ * serve.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, '..', '..');
+const distDir = resolve(here, '..', 'dist');
+
+export interface SiteBuildInfo extends SiteBuildIdentity {
+  /** Base of the other channel for the explicit channel switch; `null` for a local test base. */
+  counterpartBase: string | null;
+}
+
+type Env = Readonly<Record<string, string | undefined>>;
+
+const resolveSourceSha = (env: Env): string => {
+  const pinned = env['EXOJS_SITE_SOURCE_SHA'];
+
+  if (pinned !== undefined && pinned !== '') {
+    return pinned;
+  }
+
+  return execFileSync('git', ['rev-parse', 'HEAD'], { cwd: repoRoot, encoding: 'utf8' }).trim();
+};
+
+/**
+ * The identity of the build the current environment describes. Throws when
+ * the channel contract or any identity field is invalid.
+ */
+export const resolveSiteBuild = (env: Env): SiteBuildInfo => {
+  const channel = resolveSiteChannel(env);
+  const rootPackage = JSON.parse(readFileSync(join(repoRoot, 'package.json'), 'utf8')) as { version?: string };
+  const identity: SiteBuildIdentity = {
+    channel: channel.channel,
+    basePath: channel.basePath,
+    sourceSha: resolveSourceSha(env),
+    packageVersion: rootPackage.version ?? '',
+    assetProfile: 'standard',
+    createdAt: env['EXOJS_SITE_BUILD_TIME'] || new Date().toISOString(),
+    localTest: channel.localTest,
+  };
+  assertSiteBuildIdentity(identity);
+
+  return { ...identity, counterpartBase: counterpartBasePath(channel) };
+};
+
+const PROVISIONAL_MARKER = 'provisional';
+
+/** Leaves the identity in the built tree for `finalizeSiteBuild`. */
+export const writeProvisionalSiteBuild = (dir: string, info: SiteBuildInfo): void => {
+  const { counterpartBase: _counterpartBase, ...identity } = info;
+  writeFileSync(join(dir, SITE_BUILD_FILE), `${JSON.stringify({ [PROVISIONAL_MARKER]: true, ...identity }, null, 2)}\n`);
+};
+
+/**
+ * Replaces the provisional record in `dir` with the manifest of the finished
+ * tree. Refuses a tree whose entry page was rendered for another base.
+ */
+export const finalizeSiteBuild = (dir: string): void => {
+  const record = JSON.parse(readFileSync(join(dir, SITE_BUILD_FILE), 'utf8')) as Record<string, unknown>;
+
+  if (record[PROVISIONAL_MARKER] !== true) {
+    throw new Error(`[site-build] ${join(dir, SITE_BUILD_FILE)} is not the provisional record of an Astro build; run the whole site build`);
+  }
+
+  const { [PROVISIONAL_MARKER]: _marker, ...identity } = record;
+  assertSiteBuildIdentity(identity as unknown as SiteBuildIdentity);
+  const { basePath } = identity as unknown as SiteBuildIdentity;
+  const entry = readFileSync(join(dir, 'index.html'), 'utf8');
+
+  if (!entry.includes(`const baseUrl = ${JSON.stringify(basePath)}`)) {
+    throw new Error(`[site-build] index.html was not rendered for the recorded base ${basePath}`);
+  }
+
+  const manifest = createSiteBuildManifest(dir, identity as unknown as SiteBuildIdentity);
+  writeFileSync(join(dir, SITE_BUILD_FILE), serializeSiteBuildManifest(manifest));
+  console.log(
+    `[site-build] ${manifest.channel} ${manifest.basePath} ${manifest.sourceSha.slice(0, 12)} ${manifest.packageVersion}: ` +
+      `${manifest.fileCount} files, ${manifest.totalBytes} bytes`,
+  );
+};
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  finalizeSiteBuild(distDir);
+}
diff --git a/site/src/components/ChannelBanner.astro b/site/src/components/ChannelBanner.astro
new file mode 100644
index 000000000..3035ea450
--- /dev/null
+++ b/site/src/components/ChannelBanner.astro
@@ -0,0 +1,98 @@
+---
+/**
+ * The Next channel's identity strip: channel, the real package version, the
+ * commit and the build time, plus the explicit switch to Stable. Stable
+ * renders nothing.
+ *
+ * The switch keeps the current route when Stable has it and otherwise lands
+ * on the Stable start page of the same locale.
+ */
+import { appInfo } from '../lib/app-info';
+import { siteBuild } from '../lib/site-build-info';
+
+interface Props {
+  locale: 'en' | 'de';
+}
+
+const { locale } = Astro.props;
+const shortSha = siteBuild.sourceSha.slice(0, 7);
+const builtAt = siteBuild.createdAt.replace('T', ' ').replace(/:\d{2}(?:\.\d+)?Z$/, ' UTC');
+const commitHref = appInfo.repositoryUrl ? `${appInfo.repositoryUrl}/commit/${siteBuild.sourceSha}` : null;
+const stableBase = siteBuild.counterpartBase;
+---
+
+{siteBuild.channel === 'next' && (
+  <aside class="channel-banner" aria-label="Site channel" data-channel-banner>
+    <strong class="channel-banner__name">Next</strong>
+    <span>unreleased preview of {siteBuild.packageVersion}</span>
+    {commitHref ? (
+      <a class="channel-banner__sha" href={commitHref} rel="noopener">
+        {shortSha}
+      </a>
+    ) : (
+      <code class="channel-banner__sha">{shortSha}</code>
+    )}
+    <time datetime={siteBuild.createdAt}>built {builtAt}</time>
+    {stableBase && (
+      <a
+        class="channel-banner__switch"
+        href={stableBase}
+        data-channel-switch
+        data-own-base={siteBuild.basePath}
+        data-target-base={stableBase}
+        data-fallback={`${stableBase}${locale}/`}
+      >
+        Switch to Stable
+      </a>
+    )}
+  </aside>
+)}
+
+<script>
+  const link = document.querySelector<HTMLAnchorElement>('[data-channel-switch]');
+
+  link?.addEventListener('click', event => {
+    const { ownBase = '', targetBase = '', fallback = '' } = link.dataset;
+
+    if (!window.location.pathname.startsWith(ownBase)) {
+      return;
+    }
+
+    event.preventDefault();
+    const target = `${targetBase}${window.location.pathname.slice(ownBase.length)}`;
+
+    void fetch(target, { method: 'HEAD' })
+      .then(response => (response.ok ? `${target}${window.location.search}${window.location.hash}` : fallback))
+      .catch(() => fallback)
+      .then(destination => window.location.assign(destination));
+  });
+</script>
+
+<style lang="scss">
+  .channel-banner {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.75rem;
+    align-items: baseline;
+    padding: 0.35rem 1rem;
+    border-bottom: 1px solid var(--line);
+    background: var(--bg-panel);
+    color: var(--fg-muted);
+    font-size: 0.8125rem;
+  }
+
+  .channel-banner__name {
+    color: var(--accent);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .channel-banner__sha {
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  .channel-banner__switch {
+    margin-left: auto;
+    color: var(--fg);
+  }
+</style>
diff --git a/site/src/components/ChannelHead.astro b/site/src/components/ChannelHead.astro
new file mode 100644
index 000000000..036b86500
--- /dev/null
+++ b/site/src/components/ChannelHead.astro
@@ -0,0 +1,9 @@
+---
+/**
+ * Channel metadata for a page head. Next is an unreleased preview, so search
+ * engines are asked not to index it; that is a hint, not an access control.
+ */
+import { siteBuild } from '../lib/site-build-info';
+---
+
+{siteBuild.channel === 'next' && <meta name="robots" content="noindex, nofollow" />}
diff --git a/site/src/components/Editor.module.scss b/site/src/components/Editor.module.scss
index 375162ca5..9c2be5604 100644
--- a/site/src/components/Editor.module.scss
+++ b/site/src/components/Editor.module.scss
@@ -163,7 +163,7 @@
     grid-template:
       'preview editor' auto
       'diag editor' auto
-      'errors editor' auto
+      'output editor' auto
       '. editor' 1fr / minmax(0, 1fr) minmax(0, 1fr);
     gap: 0.75rem;
     align-items: start;
@@ -173,7 +173,7 @@
     grid-template-areas:
       'editor preview'
       'editor diag'
-      'editor errors'
+      'editor output'
       'editor .';
   }
 
@@ -209,11 +209,13 @@
     grid-area: diag;
   }
 
-  .root[data-layout='split'] .errors-slot {
-    grid-area: errors;
+  .root[data-layout='split'] .output-slot {
+    grid-area: output;
+    min-width: 0;
   }
 
-  .root[data-layout='split'] .error-panel {
+  .root[data-layout='split'] .error-panel,
+  .root[data-layout='split'] .output-slot > * {
     margin: 0;
   }
 }
diff --git a/site/src/components/Editor.tsx b/site/src/components/Editor.tsx
index 0f2ad78b4..44780e388 100644
--- a/site/src/components/Editor.tsx
+++ b/site/src/components/Editor.tsx
@@ -1,6 +1,7 @@
 import { type FunctionComponent, lazy, type Ref, Suspense, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 import { loadExampleSource } from '../lib/example-store';
+import { PreviewConsole } from '../lib/preview-console';
 import { getExampleAvailability } from '../lib/runtime-support';
 import type { Example, PreviewErrorEntry } from '../lib/types';
 import { type DiagnosticJumpEvent, DiagnosticsStrip } from './DiagnosticsStrip';
@@ -8,6 +9,7 @@ import styles from './Editor.module.scss';
 import type { EditorCodeHandle, EditorCodeProps, EditorCursorEvent, EditorDiagnostic, ResetCodeEvent, UpdateCodeEvent } from './EditorCode';
 import { type CanvasSizeEvent, EditorPreview, type EditorPreviewHandle } from './EditorPreview';
 import { EditorStatusBar } from './EditorStatusBar';
+import { OutputPanel } from './OutputPanel';
 import { SidebarToggle, SwapButton } from './PlaygroundButtons';
 import { PreviewToolbar } from './PreviewToolbar';
 import { css, cx } from './react-utils';
@@ -67,7 +69,9 @@ export const Editor = ({
   const [executionCode, setExecutionCode] = useState<string | null>(null);
   const [originalExecutionCode, setOriginalExecutionCode] = useState<string | null>(null);
   const [sourceLoadError, setSourceLoadError] = useState<PreviewErrorEntry | null>(null);
-  const [previewErrors, setPreviewErrors] = useState<PreviewErrorEntry[]>([]);
+  const [output] = useState(() => new PreviewConsole());
+  // Counts explicit runs, so running unchanged code still restarts the preview.
+  const [runId, setRunId] = useState(0);
   const [canvasWidth, setCanvasWidth] = useState(0);
   const [canvasHeight, setCanvasHeight] = useState(0);
   const [previewZoom, setPreviewZoom] = useState(1);
@@ -121,7 +125,6 @@ export const Editor = ({
     setExecutionCode(null);
     setOriginalExecutionCode(null);
     setSourceLoadError(null);
-    setPreviewErrors([]);
     setDiagnostics([]);
     setViewMode('source');
     /* eslint-enable @eslint-react/set-state-in-effect */
@@ -182,6 +185,8 @@ export const Editor = ({
     };
   }, [activeExample, selectedVersionId]);
 
+  useEffect(() => () => output.dispose(), [output]);
+
   // Runs once the first client render has matched the server's output, which is
   // the point from which the editor can differ from it safely.
   useEffect(() => {
@@ -266,6 +271,7 @@ export const Editor = ({
   }, [syncExpandedWidth]);
 
   const onUpdateCode = (event: UpdateCodeEvent): void => {
+    setRunId(id => id + 1);
     setSourceCode(event.code);
     setExecutionCode(event.executionCode ?? null);
   };
@@ -275,7 +281,6 @@ export const Editor = ({
       return;
     }
 
-    setPreviewErrors([]);
     setSourceCode(originalSourceCode);
     setExecutionCode(originalExecutionCode);
   };
@@ -299,7 +304,6 @@ export const Editor = ({
   const combinedErrors = [
     ...(catalogLoadError ? [{ summary: 'Failed to load examples catalog', details: catalogLoadError }] : []),
     ...(sourceLoadError ? [sourceLoadError] : []),
-    ...previewErrors,
   ];
 
   if (!activeExample && combinedErrors.length > 0) {
@@ -363,9 +367,10 @@ export const Editor = ({
             <EditorPreview
               ref={previewRef}
               sourceCode={executionCode ?? sourceCode}
+              runId={runId}
               exampleMeta={activeExample}
               selectedVersionId={selectedVersionId}
-              onPreviewErrors={setPreviewErrors}
+              output={output}
               onCanvasSize={onCanvasSize}
             />
           </div>
@@ -386,7 +391,9 @@ export const Editor = ({
       <div className={css(styles, 'diagnostics-slot')}>
         <DiagnosticsStrip diagnostics={diagnostics} onDiagnosticJump={onDiagnosticJump} />
       </div>
-      <div className={css(styles, 'errors-slot')}>{renderErrors(combinedErrors)}</div>
+      <div className={css(styles, 'output-slot')}>
+        <OutputPanel output={output} systemErrors={combinedErrors} />
+      </div>
       <section className={css(styles, 'editor-frame')} aria-label="Source editor">
         {/*
           Held back until after hydration. The lazy loader resolves to an empty
diff --git a/site/src/components/EditorCode.tsx b/site/src/components/EditorCode.tsx
index e4a6f5cd1..3b5b4af40 100644
--- a/site/src/components/EditorCode.tsx
+++ b/site/src/components/EditorCode.tsx
@@ -96,8 +96,6 @@ interface MonacoTypeScriptApi {
   ScriptTarget: { ES2020: number; ESNext: number };
 }
 
-type AssetManifest = Record<string, string[]>;
-
 declare global {
   interface Window {
     MonacoEnvironment?: { getWorker(workerId: string, label: string): Worker };
@@ -109,7 +107,6 @@ const MONACO_FONT_FAMILY = '"JetBrains Mono", Consolas, "SFMono-Regular", Menlo,
 const SHARED_LIB_FILES = [
   { path: 'examples/shared/runtime.d.ts', virtualPath: 'file:///node_modules/@examples/runtime/index.d.ts' },
   { path: 'examples/shared/editor-support.d.ts', virtualPath: 'file:///node_modules/@examples/editor-support/index.d.ts' },
-  { path: 'examples/shared/assets-global.d.ts', virtualPath: 'file:///node_modules/@examples/assets-global/index.d.ts' },
   // Shared example module, imported by name from examples rather than declared:
   // without it every importer reports ts2307 for `@examples/terrain-noise`.
   { path: 'examples/shared/terrain-noise.ts', virtualPath: 'file:///node_modules/@examples/terrain-noise/index.ts' },
@@ -124,7 +121,6 @@ const SHARED_LIB_FILES = [
 
 const typingsCache = new Map<string, Promise<ReadonlyArray<ExtraLib>>>();
 let monacoConfiguredPromise: Promise<void> | null = null;
-let assetCompletionProviderRegistered = false;
 
 loader.config({ monaco });
 
@@ -822,19 +818,13 @@ const getTypingsForVersion = (versionId: string): Promise<ReadonlyArray<ExtraLib
 };
 
 // Extension packages whose declarations the editor registers alongside core, so
-// examples that import `@codexo/exojs-particles` & co. type-check instead of
+// examples that import `@codexo/exojs-tiled` & co. type-check instead of
 // reporting ts2307 "Cannot find module". These always load from the current
 // vendored copy (extension typings are not vendored per historical version).
 const EXTENSION_PACKAGES: ReadonlyArray<{ baseUrl: string; packageName: string }> = [
-  { baseUrl: 'vendor/exojs-particles/', packageName: '@codexo/exojs-particles' },
-  { baseUrl: 'vendor/exojs-audio-fx/', packageName: '@codexo/exojs-audio-fx' },
-  { baseUrl: 'vendor/exojs-tilemap/', packageName: '@codexo/exojs-tilemap' },
   { baseUrl: 'vendor/exojs-tiled/', packageName: '@codexo/exojs-tiled' },
   { baseUrl: 'vendor/exojs-ldtk/', packageName: '@codexo/exojs-ldtk' },
-  { baseUrl: 'vendor/exojs-physics/', packageName: '@codexo/exojs-physics' },
-  { baseUrl: 'vendor/exojs-tilemap-physics/', packageName: '@codexo/exojs-tilemap-physics' },
-  { baseUrl: 'vendor/exojs-lighting/', packageName: '@codexo/exojs-lighting' },
-  { baseUrl: 'vendor/exojs-pathfinding/', packageName: '@codexo/exojs-pathfinding' },
+  { baseUrl: 'vendor/exojs-demo-assets/', packageName: '@codexo/exojs-demo-assets' },
 ];
 
 const loadTypingsForVersion = async (versionId: string): Promise<ReadonlyArray<ExtraLib>> => {
@@ -1000,6 +990,9 @@ const configureLanguageDefaults = (): void => {
   // the Playground surfaces the same errors CI would.
   const tsCompilerOptions = {
     ...sharedCompilerOptions,
+    // The preview runs what the worker emits for the edited model; with
+    // `noEmit` the emit output is empty and an edit never reaches the preview.
+    noEmit: false,
     strict: true,
   };
   // JS mode is a deliberate low-friction path for writing/pasting plain JS with
@@ -1023,160 +1016,6 @@ const configureLanguageDefaults = (): void => {
   tsApi.typescriptDefaults.setCompilerOptions(tsCompilerOptions);
   tsApi.javascriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
   tsApi.typescriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
-
-  if (!assetCompletionProviderRegistered) {
-    assetCompletionProviderRegistered = true;
-    void registerAssetCompletionProvider();
-  }
-};
-
-const registerAssetCompletionProvider = async (): Promise<void> => {
-  let manifest: AssetManifest;
-
-  try {
-    const response = await fetch(buildPublicUrl('assets/assets.json'), { cache: 'no-cache' });
-
-    if (!response.ok) {
-      return;
-    }
-
-    manifest = (await response.json()) as AssetManifest;
-  } catch {
-    return;
-  }
-
-  monaco.languages.registerCompletionItemProvider('javascript', {
-    triggerCharacters: ["'", '"'],
-    provideCompletionItems: (model, position) => provideAssetCompletions(model, position, manifest),
-  });
-  monaco.languages.registerCompletionItemProvider('typescript', {
-    triggerCharacters: ["'", '"'],
-    provideCompletionItems: (model, position) => provideAssetCompletions(model, position, manifest),
-  });
-};
-
-const resolveAssetPaths = (tokenName: string, manifest: AssetManifest): string[] => {
-  let category: string | null = null;
-
-  switch (tokenName) {
-    case 'Texture':
-    case 'HTMLImageElement':
-      category = 'image';
-      break;
-    case 'FontFace':
-      category = 'font';
-      break;
-    case 'AudioStream':
-    case 'Sound':
-      category = 'audio';
-      break;
-    case 'Json':
-      category = 'json';
-      break;
-    case 'SvgAsset':
-      category = 'svg';
-      break;
-    case 'Video':
-      category = 'video';
-      break;
-  }
-
-  if (!category) {
-    return [];
-  }
-
-  return (manifest[category] ?? []).map(file => `${category}/${file}`);
-};
-
-const provideAssetCompletions = (
-  model: monaco.editor.ITextModel,
-  position: monaco.Position,
-  manifest: AssetManifest,
-): monaco.languages.CompletionList | null => {
-  const lineContent = model.getLineContent(position.lineNumber);
-  const column = position.column - 1;
-  let quoteChar = '';
-  let quoteStart = -1;
-
-  for (let index = column - 1; index >= 0; index -= 1) {
-    const character = lineContent[index];
-
-    if (character === '"' || character === "'") {
-      quoteChar = character;
-      quoteStart = index;
-      break;
-    }
-
-    if (character === '{' || character === '}' || character === ';') {
-      break;
-    }
-  }
-
-  if (quoteStart === -1) {
-    return null;
-  }
-
-  let cursor = quoteStart - 1;
-
-  while (cursor >= 0 && (lineContent[cursor] === ' ' || lineContent[cursor] === '\t')) {
-    cursor -= 1;
-  }
-
-  if (cursor < 0 || lineContent[cursor] !== ':') {
-    return null;
-  }
-
-  let quoteEnd = lineContent.length;
-
-  for (let index = column; index < lineContent.length; index += 1) {
-    if (lineContent[index] === quoteChar) {
-      quoteEnd = index;
-      break;
-    }
-  }
-
-  const startLine = Math.max(1, position.lineNumber - 30);
-  const textBefore = model.getValueInRange({
-    startLineNumber: startLine,
-    startColumn: 1,
-    endLineNumber: position.lineNumber,
-    endColumn: position.column,
-  });
-
-  const loaderLoadExpression = /loader\.load\(\s*([A-Z][A-Za-z]*)\s*,/g;
-  let lastMatch: RegExpExecArray | null = null;
-  let match: RegExpExecArray | null;
-
-  while ((match = loaderLoadExpression.exec(textBefore)) !== null) {
-    lastMatch = match;
-  }
-
-  if (!lastMatch) {
-    return null;
-  }
-
-  const paths = resolveAssetPaths(lastMatch[1], manifest);
-
-  if (paths.length === 0) {
-    return null;
-  }
-
-  const range: monaco.IRange = {
-    startLineNumber: position.lineNumber,
-    startColumn: quoteStart + 2,
-    endLineNumber: position.lineNumber,
-    endColumn: quoteEnd + 1,
-  };
-
-  return {
-    suggestions: paths.map(path => ({
-      label: path,
-      kind: monaco.languages.CompletionItemKind.File,
-      insertText: path,
-      range,
-    })),
-    incomplete: false,
-  };
 };
 
 const fetchTextFile = async (url: string): Promise<string> => {
diff --git a/site/src/components/EditorPreview.tsx b/site/src/components/EditorPreview.tsx
index 55730b9e8..2bc7f0beb 100644
--- a/site/src/components/EditorPreview.tsx
+++ b/site/src/components/EditorPreview.tsx
@@ -9,8 +9,8 @@ import {
   useState,
 } from 'react';
 
-import { assets } from '../lib/asset-catalog';
 import type { Capability } from '../lib/examples-catalog';
+import type { ConsoleWindow, PreviewConsole } from '../lib/preview-console';
 import { detectRuntimeSupport, getMissingCapabilities } from '../lib/runtime-support';
 import type { Example, PreviewErrorEntry, UrlParams } from '../lib/types';
 import { buildIframeUrl } from '../lib/url-builder';
@@ -51,15 +51,22 @@ export interface EditorPreviewProps {
   ref?: Ref<EditorPreviewHandle>;
   selectedVersionId: string;
   sourceCode: string | null;
+  /**
+   * Receives the preview's console output and uncaught errors. Each iframe load
+   * starts a new generation of it; without one, errors only blank the preview.
+   */
+  output?: PreviewConsole;
+  /** Changing it restarts the preview even when `sourceCode` is unchanged. */
+  runId?: number;
   onCanvasSize?(event: CanvasSizeEvent): void;
-  onPreviewErrors?(errors: PreviewErrorEntry[]): void;
 }
 
 export const EditorPreview = ({
   exampleMeta,
   onCanvasSize,
-  onPreviewErrors,
+  output,
   ref,
+  runId = 0,
   selectedVersionId,
   sourceCode,
 }: EditorPreviewProps): JSX.Element => {
@@ -69,6 +76,7 @@ export const EditorPreview = ({
   const sourceRef = useRef<string | null>(sourceCode);
   const exampleRef = useRef<Example | null>(exampleMeta);
   const versionRef = useRef(selectedVersionId);
+  const outputRef = useRef<PreviewConsole | undefined>(output);
   const canvasMutationObserverRef = useRef<MutationObserver | null>(null);
   const canvasAttributeObserverRef = useRef<MutationObserver | null>(null);
   const currentCanvasRef = useRef({ width: 0, height: 0, zoom: 1, resolutionWidth: 0, resolutionHeight: 0 });
@@ -81,12 +89,16 @@ export const EditorPreview = ({
     sourceRef.current = sourceCode;
     exampleRef.current = exampleMeta;
     versionRef.current = selectedVersionId;
+    outputRef.current = output;
   });
 
   useEffect(() => {
     // Bump the iframe cache-buster to force a reload when the source changes.
     // eslint-disable-next-line @eslint-react/set-state-in-effect, react-hooks/set-state-in-effect -- reload preview on source change
     setUpdateId(value => value + 1);
+    // The outgoing document can still log until the new one loads; its
+    // messages must not reach the record the next load starts.
+    outputRef.current?.detach();
     disconnectCanvasObservers(canvasMutationObserverRef, canvasAttributeObserverRef);
     currentCanvasRef.current = { width: 0, height: 0, zoom: 1, resolutionWidth: 0, resolutionHeight: 0 };
     // Before the example reports its canvas, the frame already takes the
@@ -98,7 +110,7 @@ export const EditorPreview = ({
     rootRef.current?.style.setProperty('--canvas-h', `${STAGE_HEIGHT}px`);
     rootRef.current?.style.setProperty('--preview-zoom', String(zoom));
     onCanvasSize?.({ width: 0, height: 0, zoom: 1 });
-  }, [onCanvasSize, sourceCode]);
+  }, [onCanvasSize, sourceCode, runId]);
 
   useEffect(() => {
     const recalculateZoom = (): void => {
@@ -133,6 +145,7 @@ export const EditorPreview = ({
       window.removeEventListener('resize', recalculateZoom);
       window.removeEventListener('keydown', preventScroll);
       disconnectCanvasObservers(canvasMutationObserverRef, canvasAttributeObserverRef);
+      outputRef.current?.detach();
     };
   }, [onCanvasSize]);
 
@@ -158,10 +171,6 @@ export const EditorPreview = ({
     [],
   );
 
-  const syncPreviewErrors = (errors: PreviewErrorEntry[]): void => {
-    onPreviewErrors?.(errors.filter(error => Boolean(error.summary)));
-  };
-
   const applyCanvasSize = (width: number, height: number, resolutionWidth: number, resolutionHeight: number): void => {
     if (!width || !height) {
       return;
@@ -233,16 +242,21 @@ export const EditorPreview = ({
     }
 
     const iframeWindow = iframe.contentWindow;
-    syncPreviewErrors([]);
 
     if (iframeWindow) {
+      const sink = outputRef.current;
+      // Attached before the example's module is appended, so its first
+      // top-level log is already captured.
+      const generation = sink?.attach(iframeWindow as ConsoleWindow) ?? 0;
+
       iframeWindow.__EXAMPLE_META__ = exampleRef.current;
-      iframeWindow.assets = assets;
-      installPreviewErrorHandlers(iframeWindow, iframeBody, syncPreviewErrors);
+      installPreviewErrorHandlers(iframeWindow, iframeBody, error => {
+        sink?.writeException(generation, error.summary, error.details ?? null);
+      });
     }
 
     iframeBody.tabIndex = -1;
-    void executePreviewSource(iframeBody, source, exampleRef.current, syncPreviewErrors);
+    void executePreviewSource(iframeBody, source, exampleRef.current);
     watchForCanvas(iframeBody);
     focusPreviewSurface(iframe);
   };
@@ -261,9 +275,11 @@ export const EditorPreview = ({
         ref={iframeRef}
         className={css(styles, 'preview')}
         onLoad={onLoadIframe}
-        onError={() =>
-          syncPreviewErrors([{ summary: 'The preview iframe failed to load.', details: 'The preview iframe failed to load.' }])
-        }
+        onError={() => {
+          const sink = outputRef.current;
+
+          sink?.writeException(sink.generation, 'The preview iframe failed to load.', null);
+        }}
         onPointerDown={() => focusPreviewSurface(iframeRef.current)}
         onKeyDown={(event: ReactKeyboardEvent<HTMLIFrameElement>) => {
           if (event.key === 'Enter') {
@@ -327,7 +343,7 @@ const focusPreviewSurface = (iframe: HTMLIFrameElement | null): void => {
 const installPreviewErrorHandlers = (
   iframeWindow: Window,
   iframeBody: HTMLBodyElement,
-  syncPreviewErrors: (errors: PreviewErrorEntry[]) => void,
+  reportError: (error: PreviewErrorEntry) => void,
 ): void => {
   iframeWindow.__EXAMPLE_PREVIEW_ERROR_RENDERED__ = false;
 
@@ -340,7 +356,7 @@ const installPreviewErrorHandlers = (
       return true;
     }
 
-    syncPreviewErrors([previewError]);
+    reportError(previewError);
     renderExecutionError(iframeBody);
 
     return true;
@@ -357,17 +373,12 @@ const installPreviewErrorHandlers = (
     }
 
     event.preventDefault();
-    syncPreviewErrors([previewError]);
+    reportError(previewError);
     renderExecutionError(iframeBody);
   };
 };
 
-const executePreviewSource = async (
-  iframeBody: HTMLBodyElement,
-  sourceCode: string,
-  exampleMeta: Example | null,
-  _syncPreviewErrors: (errors: PreviewErrorEntry[]) => void,
-): Promise<void> => {
+const executePreviewSource = async (iframeBody: HTMLBodyElement, sourceCode: string, exampleMeta: Example | null): Promise<void> => {
   const required = exampleMeta?.capabilities ?? [];
 
   if (required.length > 0) {
diff --git a/site/src/components/ExampleBrowser.tsx b/site/src/components/ExampleBrowser.tsx
index 0559cb8ff..a8c9bcc03 100644
--- a/site/src/components/ExampleBrowser.tsx
+++ b/site/src/components/ExampleBrowser.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { resolveExampleToolRelocation } from '../lib/example-aliases';
 import {
   getExampleByPath,
   getExamplesList,
@@ -35,10 +34,9 @@ import { ToastStack } from './ToastStack';
 
 export interface ExampleBrowserProps {
   baseUrl: string;
-  locale: 'en' | 'de';
 }
 
-export const ExampleBrowser = ({ baseUrl, locale }: ExampleBrowserProps): JSX.Element => {
+export const ExampleBrowser = ({ baseUrl }: ExampleBrowserProps): JSX.Element => {
   const [examples, setExamples] = useState<ExamplesMap>(() => new Map());
   const [activeExample, setActiveExample] = useState<Example | null>(null);
   const [selectedVersion, setSelectedVersion] = useState<VersionInfo | null>(null);
@@ -148,13 +146,6 @@ export const ExampleBrowser = ({ baseUrl, locale }: ExampleBrowserProps): JSX.El
 
       const versionId = selected.id;
       const requestedPath = readUrlState().example ?? null;
-      const relocation = resolveExampleToolRelocation(versionId, requestedPath);
-
-      if (relocation !== null) {
-        window.location.replace(`${baseUrl}${locale}/${relocation}`);
-
-        return;
-      }
 
       const requested = requestedPath ? getExampleByPath(versionId, requestedPath) : null;
       const fellBack = requestedPath !== null && requested === null;
@@ -179,7 +170,7 @@ export const ExampleBrowser = ({ baseUrl, locale }: ExampleBrowserProps): JSX.El
         }
       }
     },
-    [baseUrl, locale, showMissingExampleToast],
+    [showMissingExampleToast],
   );
 
   const syncExampleState = useCallback((): void => {
diff --git a/site/src/components/NextStep.astro b/site/src/components/NextStep.astro
index 94dc0ae89..cf45c03c7 100644
--- a/site/src/components/NextStep.astro
+++ b/site/src/components/NextStep.astro
@@ -13,13 +13,17 @@
  *   </NextStep>
  */
 
+import { rewriteSiteHref } from '../lib/site-links';
+
 interface Props {
   href: string;
   label: string;
   eyebrow?: string;
 }
 
-const { href, label, eyebrow = 'Next' } = Astro.props;
+const { label, eyebrow = 'Next' } = Astro.props;
+// Guide sources write the link against the Stable base; see site-links.ts.
+const href = rewriteSiteHref(Astro.props.href, import.meta.env.BASE_URL);
 const hasBody = Astro.slots.has('default');
 ---
 
diff --git a/site/src/components/OutputPanel.module.scss b/site/src/components/OutputPanel.module.scss
new file mode 100644
index 000000000..29b67ce20
--- /dev/null
+++ b/site/src/components/OutputPanel.module.scss
@@ -0,0 +1,265 @@
+.root {
+  width: min(100%, 1160px);
+  margin: 0 auto 0.62rem;
+  border: 1px solid oklch(30% 0.014 245);
+  border-radius: var(--r-2);
+  background: oklch(18% 0.012 245);
+  color: var(--fg-muted);
+  font-size: 0.69rem;
+  line-height: 1.35;
+  overflow: hidden;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 30px;
+  padding: 0 0.4rem 0 0;
+}
+
+.toggle {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 30px;
+  padding: 0 0.56rem;
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  font: inherit;
+  cursor: pointer;
+}
+
+.toggle:hover,
+.toggle:focus-visible {
+  background: var(--accent-soft);
+  outline: none;
+}
+
+.chevron {
+  transition: transform 120ms ease;
+}
+
+.root[data-open='true'] .chevron {
+  transform: rotate(90deg);
+}
+
+.title {
+  font-weight: 600;
+}
+
+.badge,
+.quiet-count {
+  font-family: var(--f-mono);
+  font-size: 0.66rem;
+}
+
+.badge {
+  padding: 1px 6px;
+  border-radius: var(--r-pill);
+}
+
+.badge--error {
+  background: oklch(76% 0.15 27 / 0.18);
+  color: oklch(82% 0.12 27);
+}
+
+.badge--warn {
+  background: oklch(74% 0.13 62 / 0.16);
+  color: oklch(84% 0.11 70);
+}
+
+.quiet-count {
+  color: var(--fg-faint);
+}
+
+.latest {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--f-mono);
+  font-size: 0.66rem;
+  color: var(--fg-faint);
+}
+
+.tools {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  padding: 0.25rem 0;
+}
+
+.filters {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.filter,
+.action {
+  appearance: none;
+  min-height: 22px;
+  padding: 0 0.5rem;
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-1);
+  background: transparent;
+  color: var(--fg-faint);
+  font: inherit;
+  font-size: 0.66rem;
+  cursor: pointer;
+}
+
+.filter[aria-pressed='true'] {
+  border-color: var(--accent-line, var(--line));
+  background: var(--accent-soft);
+  color: var(--fg);
+}
+
+.filter:focus-visible,
+.action:focus-visible,
+.list:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.action:hover:not(:disabled) {
+  color: var(--fg);
+}
+
+.action:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.list {
+  max-height: clamp(120px, 28vh, 260px);
+  margin: 0;
+  padding: 0.2rem 0;
+  border-top: 1px solid oklch(30% 0.014 245);
+  list-style: none;
+  overflow: auto;
+  overscroll-behavior: contain;
+  font-family: var(--f-mono);
+  font-size: 0.68rem;
+}
+
+.entry {
+  display: grid;
+  grid-template-columns: 3.6rem 0.35rem minmax(0, 1fr);
+  gap: 0.45rem;
+  padding: 0.18rem 0.56rem;
+  border-left: 2px solid transparent;
+  color: var(--fg);
+}
+
+.entry + .entry {
+  border-top: 1px solid oklch(26% 0.012 245);
+}
+
+.entry[data-severity='debug'] {
+  color: var(--fg-faint);
+}
+
+.entry[data-severity='info'] {
+  color: oklch(84% 0.06 235);
+}
+
+.entry[data-severity='warn'] {
+  border-left-color: oklch(74% 0.13 62 / 0.8);
+  background: oklch(74% 0.13 62 / 0.07);
+  color: oklch(88% 0.08 75);
+}
+
+.entry[data-severity='error'] {
+  border-left-color: oklch(76% 0.15 27 / 0.85);
+  background: oklch(76% 0.15 27 / 0.08);
+  color: oklch(86% 0.09 27);
+}
+
+.time {
+  color: var(--fg-faint);
+  text-align: right;
+}
+
+.severity {
+  width: 6px;
+  height: 6px;
+  margin-top: 0.38rem;
+  border-radius: 999px;
+  background: currentcolor;
+  opacity: 0.6;
+}
+
+.body {
+  min-width: 0;
+}
+
+.kind {
+  margin-right: 0.4rem;
+  padding: 0 4px;
+  border-radius: var(--r-1);
+  background: oklch(76% 0.15 27 / 0.22);
+  font-weight: 600;
+}
+
+.text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.repeat {
+  margin-left: 0.4rem;
+  padding: 0 5px;
+  border-radius: var(--r-pill);
+  background: var(--accent-soft);
+  color: var(--fg-muted);
+}
+
+.details {
+  margin-top: 0.15rem;
+  color: var(--fg-muted);
+}
+
+.details summary {
+  cursor: pointer;
+  color: var(--fg-faint);
+}
+
+.details pre {
+  margin: 0.2rem 0 0.1rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font: inherit;
+}
+
+.notice {
+  padding: 0.3rem 0.56rem;
+  color: var(--fg-faint);
+  font-family: var(--f-sans, inherit);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (width <= 1119px) {
+  .root {
+    width: 100%;
+    margin: 0 0 0.62rem;
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+}
diff --git a/site/src/components/OutputPanel.tsx b/site/src/components/OutputPanel.tsx
new file mode 100644
index 000000000..9330a30f7
--- /dev/null
+++ b/site/src/components/OutputPanel.tsx
@@ -0,0 +1,269 @@
+import { useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+
+import type { ConsoleSeverity, OutputEntry, PreviewConsole } from '../lib/preview-console';
+import type { PreviewErrorEntry } from '../lib/types';
+import styles from './OutputPanel.module.scss';
+import { css, cx } from './react-utils';
+
+export interface OutputPanelProps {
+  output: PreviewConsole;
+  /** Failures outside the preview - the catalog or the example source failed to load. */
+  systemErrors: readonly PreviewErrorEntry[];
+}
+
+type OutputFilter = 'error' | 'warn' | 'info' | 'log';
+
+const FILTERS: ReadonlyArray<{ id: OutputFilter; label: string }> = [
+  { id: 'error', label: 'Errors' },
+  { id: 'warn', label: 'Warnings' },
+  { id: 'info', label: 'Info' },
+  { id: 'log', label: 'Logs' },
+];
+
+const FILTER_OF: Record<ConsoleSeverity, OutputFilter> = { error: 'error', warn: 'warn', info: 'info', log: 'log', debug: 'log' };
+
+const SEVERITY_LABEL: Record<ConsoleSeverity, string> = { error: 'Error', warn: 'Warning', info: 'Info', log: 'Log', debug: 'Debug' };
+
+const ALL_FILTERS: ReadonlySet<OutputFilter> = new Set(FILTERS.map(filter => filter.id));
+
+const STORAGE_KEY = 'exo-playground-output-open';
+
+const readStoredOpen = (): boolean => {
+  try {
+    return window.localStorage.getItem(STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+
+const storeOpen = (open: boolean): void => {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, String(open));
+  } catch {
+    // Storage disabled - the panel still toggles for the session.
+  }
+};
+
+const subscribeNever = (): (() => void) => () => undefined;
+
+/**
+ * The preview's console, collapsed to one line under the preview by default.
+ * Plain logs never open it; the first uncaught error of a preview run, or a
+ * failed source load, does - unless the visitor collapsed it during that run.
+ */
+export const OutputPanel = ({ output, systemErrors }: OutputPanelProps): JSX.Element => {
+  const snapshot = useSyncExternalStore(output.subscribe, output.getSnapshot, output.getSnapshot);
+  const storedOpen = useSyncExternalStore(subscribeNever, readStoredOpen, () => false);
+  const [openChoice, setOpenChoice] = useState<boolean | null>(null);
+  const [dismissedGeneration, setDismissedGeneration] = useState(-1);
+  const [filters, setFilters] = useState<ReadonlySet<OutputFilter>>(ALL_FILTERS);
+  const [copied, setCopied] = useState(false);
+  const listId = useId();
+  const listRef = useRef<HTMLOListElement | null>(null);
+  const pinnedToBottomRef = useRef(true);
+
+  const hasFailure = snapshot.exceptions > 0 || systemErrors.length > 0;
+  const userOpen = openChoice ?? storedOpen;
+  const open = userOpen || (hasFailure && dismissedGeneration !== snapshot.generation);
+
+  const visible = open ? snapshot.entries.filter(entry => filters.has(FILTER_OF[entry.severity])) : [];
+  const errorCount = snapshot.counts.error + systemErrors.length;
+  const warningCount = snapshot.counts.warn;
+  const total = snapshot.counts.log + snapshot.counts.info + snapshot.counts.debug + warningCount + snapshot.counts.error;
+  const latest = snapshot.entries[snapshot.entries.length - 1] ?? null;
+
+  useLayoutEffect(() => {
+    const list = listRef.current;
+
+    if (list && pinnedToBottomRef.current) {
+      list.scrollTop = list.scrollHeight;
+    }
+  }, [open, snapshot]);
+
+  const toggle = (): void => {
+    const next = !open;
+
+    setOpenChoice(next);
+    storeOpen(next);
+
+    if (!next) {
+      setDismissedGeneration(snapshot.generation);
+    }
+  };
+
+  const toggleFilter = (id: OutputFilter): void => {
+    setFilters(current => {
+      const next = new Set(current);
+
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+
+      return next;
+    });
+  };
+
+  // Clearing also clears the failure that may have opened the panel; the
+  // visitor is looking at it, so it stays open.
+  const clear = (): void => {
+    setOpenChoice(true);
+    output.clear();
+  };
+
+  const copyAll = (): void => {
+    const text = [
+      ...systemErrors.map(error => `[error] ${error.summary}${error.details ? `\n${error.details}` : ''}`),
+      ...snapshot.entries.map(formatEntryForCopy),
+    ].join('\n');
+
+    void navigator.clipboard?.writeText(text).then(
+      () => setCopied(true),
+      () => setCopied(false),
+    );
+  };
+
+  return (
+    <section className={css(styles, 'root')} data-open={open ? 'true' : undefined} aria-label="Preview output">
+      <div className={css(styles, 'bar')}>
+        <button type="button" className={css(styles, 'toggle')} aria-expanded={open} aria-controls={listId} onClick={toggle}>
+          <svg className={css(styles, 'chevron')} width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
+            <path d="M4 2.5 7.5 6 4 9.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <span className={css(styles, 'title')}>Output</span>
+          {errorCount > 0 && (
+            <span className={cx(css(styles, 'badge'), css(styles, 'badge--error'))}>
+              {errorCount} error{errorCount === 1 ? '' : 's'}
+            </span>
+          )}
+          {warningCount > 0 && (
+            <span className={cx(css(styles, 'badge'), css(styles, 'badge--warn'))}>
+              {warningCount} warning{warningCount === 1 ? '' : 's'}
+            </span>
+          )}
+          {errorCount === 0 && warningCount === 0 && (
+            <span className={css(styles, 'quiet-count')}>{total === 0 ? 'No messages' : `${total} message${total === 1 ? '' : 's'}`}</span>
+          )}
+        </button>
+        {!open && latest && (
+          <span className={css(styles, 'latest')} data-severity={latest.severity} title={latest.text}>
+            {latest.text}
+          </span>
+        )}
+        {open && (
+          <div className={css(styles, 'tools')}>
+            <div className={css(styles, 'filters')} role="group" aria-label="Show messages">
+              {FILTERS.map(filter => (
+                <button
+                  key={filter.id}
+                  type="button"
+                  className={css(styles, 'filter')}
+                  data-filter={filter.id}
+                  aria-pressed={filters.has(filter.id)}
+                  onClick={() => toggleFilter(filter.id)}
+                >
+                  {filter.label}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              className={css(styles, 'action')}
+              onClick={copyAll}
+              onBlur={() => setCopied(false)}
+              disabled={total === 0 && systemErrors.length === 0}
+            >
+              {copied ? 'Copied' : 'Copy'}
+            </button>
+            <button type="button" className={css(styles, 'action')} onClick={clear} disabled={snapshot.entries.length === 0}>
+              Clear
+            </button>
+          </div>
+        )}
+      </div>
+      <ol
+        ref={listRef}
+        id={listId}
+        className={css(styles, 'list')}
+        hidden={!open}
+        tabIndex={open ? 0 : -1}
+        aria-label="Output messages"
+        onScroll={event => {
+          const list = event.currentTarget;
+
+          pinnedToBottomRef.current = list.scrollHeight - list.scrollTop - list.clientHeight < 8;
+        }}
+      >
+        {open &&
+          filters.has('error') &&
+          systemErrors.map(error => <SystemErrorRow key={`${error.summary}::${error.details ?? ''}`} error={error} />)}
+        {open && snapshot.evicted > 0 && (
+          <li className={css(styles, 'notice')}>{snapshot.evicted} older messages were removed to keep the list short.</li>
+        )}
+        {visible.map(entry => (
+          <EntryRow key={entry.id} entry={entry} />
+        ))}
+        {open && visible.length === 0 && systemErrors.length === 0 && (
+          <li className={css(styles, 'notice')}>
+            {snapshot.entries.length === 0 ? 'The example has not logged anything yet.' : 'No messages match the selected filters.'}
+          </li>
+        )}
+      </ol>
+      <span className={css(styles, 'sr-only')} role="status" aria-live="polite">
+        {snapshot.exceptions > 0 ? `${snapshot.exceptions} runtime error${snapshot.exceptions === 1 ? '' : 's'} in the preview` : ''}
+      </span>
+    </section>
+  );
+};
+
+const EntryRow = ({ entry }: { entry: OutputEntry }): JSX.Element => (
+  <li className={css(styles, 'entry')} data-severity={entry.severity} data-kind={entry.kind}>
+    <span className={css(styles, 'time')}>{formatTime(entry.time)}</span>
+    <span className={css(styles, 'severity')}>
+      <span className={css(styles, 'sr-only')}>{entry.kind === 'exception' ? 'Uncaught error' : SEVERITY_LABEL[entry.severity]}: </span>
+    </span>
+    <div className={css(styles, 'body')}>
+      {entry.kind === 'exception' && <span className={css(styles, 'kind')}>Uncaught</span>}
+      <span className={css(styles, 'text')}>{entry.text}</span>
+      {entry.count > 1 && (
+        <span className={css(styles, 'repeat')} title={`Repeated ${entry.count} times`}>
+          x{entry.count}
+        </span>
+      )}
+      {entry.details && (
+        <details className={css(styles, 'details')}>
+          <summary>Stack</summary>
+          <pre>{entry.details}</pre>
+        </details>
+      )}
+    </div>
+  </li>
+);
+
+const SystemErrorRow = ({ error }: { error: PreviewErrorEntry }): JSX.Element => (
+  <li className={css(styles, 'entry')} data-severity="error" data-kind="system">
+    <span className={css(styles, 'time')} aria-hidden="true">
+      -
+    </span>
+    <span className={css(styles, 'severity')} />
+    <div className={css(styles, 'body')}>
+      <span className={css(styles, 'text')}>{error.summary}</span>
+      {error.details && error.details !== error.summary && (
+        <details className={css(styles, 'details')} open>
+          <summary>Details</summary>
+          <pre>{error.details}</pre>
+        </details>
+      )}
+    </div>
+  </li>
+);
+
+const formatTime = (milliseconds: number): string => `${(milliseconds / 1000).toFixed(2)}s`;
+
+const formatEntryForCopy = (entry: OutputEntry): string => {
+  const label = entry.kind === 'exception' ? 'uncaught' : entry.severity;
+  const repeat = entry.count > 1 ? ` (x${entry.count})` : '';
+
+  return `[${formatTime(entry.time)}] [${label}] ${entry.text}${repeat}${entry.details ? `\n${entry.details}` : ''}`;
+};
diff --git a/site/src/components/pages/AssetBrowserToolPage.astro b/site/src/components/pages/AssetBrowserToolPage.astro
deleted file mode 100644
index 589307c34..000000000
--- a/site/src/components/pages/AssetBrowserToolPage.astro
+++ /dev/null
@@ -1,127 +0,0 @@
----
-import Layout from '../../layouts/Layout.astro';
-
-interface Props {
-  locale: 'en' | 'de';
-}
-
-const { locale } = Astro.props;
-const baseUrl = import.meta.env.BASE_URL;
-const playgroundHref = `${baseUrl}${locale}/playground/`;
-const sourceHref = `${baseUrl}examples/debug-layer/asset-browser.ts`;
-const scriptHref = `${baseUrl}examples/debug-layer/asset-browser.js`;
-const previewHref = `${baseUrl}preview.html`;
----
-
-<Layout
-  title="Asset Browser — ExoJS Tools"
-  description="Inspect the asset catalog and preview textures, sprites, audio, fonts, SVG, video, and input prompts."
->
-  <main class="tool-page">
-    <nav aria-label="Breadcrumb">
-      <a href={playgroundHref}>Playground</a> / Tools
-    </nav>
-    <div class="tool-heading">
-      <div>
-        <p class="eyebrow">Tools</p>
-        <h1>Asset Browser</h1>
-        <p>Inspect and preview the assets available to Playground examples.</p>
-      </div>
-      <a href={sourceHref}>View source</a>
-    </div>
-    <p class="tool-error" data-tool-error hidden></p>
-    <iframe
-      title="Asset Browser"
-      data-tool-preview
-      data-script={scriptHref}
-      data-preview={previewHref}
-      allow="autoplay; fullscreen"
-    ></iframe>
-  </main>
-</Layout>
-
-<script>
-  const frame = document.querySelector<HTMLIFrameElement>('[data-tool-preview]');
-  const error = document.querySelector<HTMLElement>('[data-tool-error]');
-
-  if (frame && error) {
-    try {
-      const response = await fetch(frame.dataset.script ?? '');
-      if (!response.ok) {
-        throw new Error(`Could not load the asset browser (${response.status}).`);
-      }
-      const source = await response.text();
-      const sourceKey = `exojs-tool-${crypto.randomUUID()}`;
-      sessionStorage.setItem(sourceKey, source);
-      const previewUrl = new URL(frame.dataset.preview ?? '', window.location.href);
-      previewUrl.searchParams.set('source-key', sourceKey);
-      frame.src = previewUrl.toString();
-    } catch (cause) {
-      error.textContent = cause instanceof Error ? cause.message : String(cause);
-      error.hidden = false;
-    }
-  }
-</script>
-
-<style>
-  .tool-page {
-    max-width: 1480px;
-    margin: 0 auto;
-    padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem;
-  }
-
-  nav {
-    color: var(--fg-muted);
-    font-size: 0.85rem;
-  }
-
-  .tool-heading {
-    display: flex;
-    align-items: end;
-    justify-content: space-between;
-    gap: 1rem;
-    margin: 1.25rem 0;
-  }
-
-  .tool-heading h1 {
-    margin: 0.2rem 0;
-  }
-
-  .tool-heading p {
-    margin: 0;
-    color: var(--fg-muted);
-  }
-
-  .eyebrow {
-    /* stylelint-disable-next-line declaration-no-important -- outranks the text colour the docs layout sets on paragraphs */
-    color: var(--accent) !important;
-    font-size: 0.75rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
-  .tool-error {
-    color: var(--color-error, #c44);
-  }
-
-  iframe {
-    display: block;
-    width: 100%;
-    min-height: min(72vw, 750px);
-    border: 1px solid var(--line-soft);
-    border-radius: 12px;
-    background: #121722;
-  }
-
-  @media (width <= 600px) {
-    .tool-heading {
-      align-items: start;
-      flex-direction: column;
-    }
-
-    iframe {
-      min-height: 65vh;
-    }
-  }
-</style>
diff --git a/site/src/content/api/alpha-fade-over-lifetime.json b/site/src/content/api/alpha-fade-over-lifetime.json
index d698b267d..fedb27c01 100644
--- a/site/src/content/api/alpha-fade-over-lifetime.json
+++ b/site/src/content/api/alpha-fade-over-lifetime.json
@@ -4,7 +4,7 @@
   "symbol": "AlphaFadeOverLifetime",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -23,7 +23,7 @@
         "The default curve `1 → 0` produces a linear fade-out. For a fade-in then fade-out, pass a curve like `[0,0]→[0.5,1]→[1,0]`.",
         "CPU, WebGL2 and WebGPU use the same 256-sample lookup table with explicit linear interpolation. Narrow keyframe features are approximated. Color channels are quantized to the nearest byte after interpolation."
       ],
-      "importLine": "import { AlphaFadeOverLifetime } from '@codexo/exojs-particles'",
+      "importLine": "import { AlphaFadeOverLifetime } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/alpha-normals.json b/site/src/content/api/alpha-normals.json
index e715bc431..fe4fc24e2 100644
--- a/site/src/content/api/alpha-normals.json
+++ b/site/src/content/api/alpha-normals.json
@@ -4,7 +4,7 @@
   "symbol": "AlphaNormals",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -24,7 +24,7 @@
         "The silhouette read as a height field, which gives edges that turn away from the light without anyone authoring a map. It knows nothing about the interior of a shape, so it is a floor rather than a replacement - but it is the difference between art that reacts to light and art that does not.",
         "The source must be drawable at construction: a texture that is still loading yields a flat map rather than waiting."
       ],
-      "importLine": "import { AlphaNormals } from '@codexo/exojs-lighting'",
+      "importLine": "import { AlphaNormals } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/alpha-occluder-drawable.json b/site/src/content/api/alpha-occluder-drawable.json
index 8ea812f32..b22616359 100644
--- a/site/src/content/api/alpha-occluder-drawable.json
+++ b/site/src/content/api/alpha-occluder-drawable.json
@@ -4,7 +4,7 @@
   "symbol": "AlphaOccluderDrawable",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A drawable whose own texture, frame and layout box describe where its silhouette belongs. Core's `Sprite` - and therefore `AnimatedSprite` and `Video`, which extend it - satisfies it as it stands, which is what lets one argument stand in for a texture, a region of it and a placement."
       ],
-      "importLine": "import { AlphaOccluderDrawable } from '@codexo/exojs-lighting'",
+      "importLine": "import { AlphaOccluderDrawable } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/alpha-occluder-options.json b/site/src/content/api/alpha-occluder-options.json
index 6a8530153..c293cb2ac 100644
--- a/site/src/content/api/alpha-occluder-options.json
+++ b/site/src/content/api/alpha-occluder-options.json
@@ -4,7 +4,7 @@
   "symbol": "AlphaOccluderOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Tuning for AlphaOccluder."
       ],
-      "importLine": "import { AlphaOccluderOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { AlphaOccluderOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/alpha-occluder.json b/site/src/content/api/alpha-occluder.json
index 22e10b5eb..9cb33534c 100644
--- a/site/src/content/api/alpha-occluder.json
+++ b/site/src/content/api/alpha-occluder.json
@@ -4,7 +4,7 @@
   "symbol": "AlphaOccluder",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -26,7 +26,7 @@
         "That leaves two cases with no outline rather than a wrong one, both reported on the `AlphaOccluder` log source in a development build. A render target has no pixels this side of the GPU and can never be traced. A texture that is not readable yet - still loading, or tainted by a cross-origin image - is retried on the next frame rather than cached.",
         "The outline follows the art, which is not always the shadow you want - a tree casts the shadow of its trunk, not of its canopy. Reach for PolygonOccluder where they differ."
       ],
-      "importLine": "import { AlphaOccluder } from '@codexo/exojs-lighting'",
+      "importLine": "import { AlphaOccluder } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/any-shape.json b/site/src/content/api/any-shape.json
index 0c223f2e4..079efd244 100644
--- a/site/src/content/api/any-shape.json
+++ b/site/src/content/api/any-shape.json
@@ -4,7 +4,7 @@
   "symbol": "AnyShape",
   "kind": "type",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Discriminated union of the concrete shape kinds. Narrow via the literal `shape.type` discriminant (`'circle'` → CircleShape, `'capsule'` → CapsuleShape, `'polygon'` → PolygonShape) - no `as` casts needed. BoxShape is a PolygonShape subclass and carries `type: 'polygon'`."
       ],
-      "importLine": "import { AnyShape } from '@codexo/exojs-physics'",
+      "importLine": "import { AnyShape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/apply-force.json b/site/src/content/api/apply-force.json
index 815b792d0..5d9c5fbe1 100644
--- a/site/src/content/api/apply-force.json
+++ b/site/src/content/api/apply-force.json
@@ -4,7 +4,7 @@
   "symbol": "ApplyForce",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -22,7 +22,7 @@
         "Adds a constant 2D acceleration to every live particle's velocity each frame. Use for gravity (`new ApplyForce(0, 980)`), wind, or any uniform force field. Force is applied to all particles equally - for per-particle variation, layer multiple ApplyForce modules with different gates.",
         "GPU-eligible: implements UpdateModule.wgsl so this module runs in the system's compute shader on WebGPU backends with no CPU readback."
       ],
-      "importLine": "import { ApplyForce } from '@codexo/exojs-particles'",
+      "importLine": "import { ApplyForce } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/atlas-tile-set-options.json b/site/src/content/api/atlas-tile-set-options.json
index 19b94e061..863ea97a3 100644
--- a/site/src/content/api/atlas-tile-set-options.json
+++ b/site/src/content/api/atlas-tile-set-options.json
@@ -4,7 +4,7 @@
   "symbol": "AtlasTileSetOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 11,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a TileSet cut from one atlas texture as a uniform grid."
       ],
-      "importLine": "import { AtlasTileSetOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { AtlasTileSetOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/attach-options.json b/site/src/content/api/attach-options.json
index e47e23e72..b7d0bf1f8 100644
--- a/site/src/content/api/attach-options.json
+++ b/site/src/content/api/attach-options.json
@@ -4,7 +4,7 @@
   "symbol": "AttachOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "PhysicsWorld.attach convenience options: a body type plus a single collider, attached to a scene node in one call."
       ],
-      "importLine": "import { AttachOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { AttachOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/attract-to-point.json b/site/src/content/api/attract-to-point.json
index d3c846da4..9c0009b59 100644
--- a/site/src/content/api/attract-to-point.json
+++ b/site/src/content/api/attract-to-point.json
@@ -4,7 +4,7 @@
   "symbol": "AttractToPoint",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -23,7 +23,7 @@
         "Use cases: orbit anchors, pin emitters to a moving target, simulate a \"black hole\" pickup. For repulsion, use RepelFromPoint; for tangential motion, layer with OrbitalForce.",
         "GPU-eligible."
       ],
-      "importLine": "import { AttractToPoint } from '@codexo/exojs-particles'",
+      "importLine": "import { AttractToPoint } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/audio-analyser-options.json b/site/src/content/api/audio-analyser-options.json
index 7379b2842..e360eec98 100644
--- a/site/src/content/api/audio-analyser-options.json
+++ b/site/src/content/api/audio-analyser-options.json
@@ -4,7 +4,7 @@
   "symbol": "AudioAnalyserOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for AudioAnalyser."
       ],
-      "importLine": "import { AudioAnalyserOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { AudioAnalyserOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/audio-analyser-source.json b/site/src/content/api/audio-analyser-source.json
index f8cc9b51e..69a7b2ebd 100644
--- a/site/src/content/api/audio-analyser-source.json
+++ b/site/src/content/api/audio-analyser-source.json
@@ -4,7 +4,7 @@
   "symbol": "AudioAnalyserSource",
   "kind": "type",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What to analyse: a bus or voice (the usual case), a `MediaStream` such as a microphone, or `null` for none yet. A raw `AudioNode` is Web Audio interop for graphs built outside the engine."
       ],
-      "importLine": "import { AudioAnalyserSource } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { AudioAnalyserSource } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/audio-analyser.json b/site/src/content/api/audio-analyser.json
index dcb6e2d17..8de4574f7 100644
--- a/site/src/content/api/audio-analyser.json
+++ b/site/src/content/api/audio-analyser.json
@@ -4,7 +4,7 @@
   "symbol": "AudioAnalyser",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 19,
   "counts": {
@@ -22,7 +22,7 @@
         "Lightweight visualisation analyser backed by a Web Audio AnalyserNode.",
         "Accepts any of: AudioBus, Voice, MediaStream, AudioNode, or null. The tap is a parallel branch - it does not affect the source's main routing. Tap a bus for a whole submix, or an individual Voice (its `output` node) for a single playing instance."
       ],
-      "importLine": "import { AudioAnalyser } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { AudioAnalyser } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/auto-tile-options.json b/site/src/content/api/auto-tile-options.json
index 3c165b411..a0fcd1f74 100644
--- a/site/src/content/api/auto-tile-options.json
+++ b/site/src/content/api/auto-tile-options.json
@@ -4,7 +4,7 @@
   "symbol": "AutoTileOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for autoTile and refreshCell."
       ],
-      "importLine": "import { AutoTileOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { AutoTileOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/auto-wah-effect-options.json b/site/src/content/api/auto-wah-effect-options.json
index 9d6778097..f0d56fd6f 100644
--- a/site/src/content/api/auto-wah-effect-options.json
+++ b/site/src/content/api/auto-wah-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "AutoWahEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for AutoWahEffect."
       ],
-      "importLine": "import { AutoWahEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { AutoWahEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/auto-wah-effect.json b/site/src/content/api/auto-wah-effect.json
index 5a185b7aa..1ee902c6c 100644
--- a/site/src/content/api/auto-wah-effect.json
+++ b/site/src/content/api/auto-wah-effect.json
@@ -4,7 +4,7 @@
   "symbol": "AutoWahEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -26,7 +26,7 @@
         "Envelope (control) path - parallel off inputGain, sums into wahFilter.frequency: inputGain → rectifier(WaveShaper,|x|) → smoothingLowpass(BiquadFilter,lowpass) → sensitivityGain → wahFilter.frequency (AudioParam) ```",
         "Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`."
       ],
-      "importLine": "import { AutoWahEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { AutoWahEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/band-energy.json b/site/src/content/api/band-energy.json
index 764dd517b..9d5663d64 100644
--- a/site/src/content/api/band-energy.json
+++ b/site/src/content/api/band-energy.json
@@ -4,7 +4,7 @@
   "symbol": "BandEnergy",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { BandEnergy } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BandEnergy } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/bar-info.json b/site/src/content/api/bar-info.json
index 99e7bb3f9..be18b5637 100644
--- a/site/src/content/api/bar-info.json
+++ b/site/src/content/api/bar-info.json
@@ -4,7 +4,7 @@
   "symbol": "BarInfo",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { BarInfo } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BarInfo } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/beat-analysis-discontinuity.json b/site/src/content/api/beat-analysis-discontinuity.json
index c96fa7900..0fb6ad0bf 100644
--- a/site/src/content/api/beat-analysis-discontinuity.json
+++ b/site/src/content/api/beat-analysis-discontinuity.json
@@ -4,7 +4,7 @@
   "symbol": "BeatAnalysisDiscontinuity",
   "kind": "type",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { BeatAnalysisDiscontinuity } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BeatAnalysisDiscontinuity } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/beat-detector-options.json b/site/src/content/api/beat-detector-options.json
index 8c8732783..70acf6282 100644
--- a/site/src/content/api/beat-detector-options.json
+++ b/site/src/content/api/beat-detector-options.json
@@ -4,7 +4,7 @@
   "symbol": "BeatDetectorOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 16,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { BeatDetectorOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BeatDetectorOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/beat-detector-source.json b/site/src/content/api/beat-detector-source.json
index f1ad4cc69..446d7afb0 100644
--- a/site/src/content/api/beat-detector-source.json
+++ b/site/src/content/api/beat-detector-source.json
@@ -4,7 +4,7 @@
   "symbol": "BeatDetectorSource",
   "kind": "type",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What to analyse: a bus or voice (the usual case), a `MediaStream` such as a microphone, or `null` for none yet. A raw `AudioNode` is Web Audio interop for graphs built outside the engine."
       ],
-      "importLine": "import { BeatDetectorSource } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BeatDetectorSource } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/beat-detector.json b/site/src/content/api/beat-detector.json
index 4f004d1db..9743cb62a 100644
--- a/site/src/content/api/beat-detector.json
+++ b/site/src/content/api/beat-detector.json
@@ -4,7 +4,7 @@
   "symbol": "BeatDetector",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 42,
   "counts": {
@@ -23,7 +23,7 @@
         "Accepts a wide range of BeatDetectorSources - a bus, an individual Voice, a raw MediaStream, or any AudioNode - and exposes a Signal for each notable event: - BeatDetector.onBeat - every detected beat - BeatDetector.onDownbeat - first beat of each bar - BeatDetector.onBarStart - bar boundary - BeatDetector.onTempoChange - when the tracked BPM changes - BeatDetector.onBeatPredicted - look-ahead schedule notice",
         "Early beats arrive with low latency tagged `status: 'provisional'` (after a short `minSettlingMs` warm-up, default 400 ms) for snappy visual reactivity, then promote to `status: 'locked'` once the tempo grid is trustworthy - a single BeatDetector.onBeat signal carries both via BeatInfo.status. Set `emitProvisionalBeats: false` to receive only locked beats. Time-signature detection is on by default; ambiguous meter leaves beats available without downbeats. Use a fixed four-beat convention with `enableTimeSignatureDetection: false`."
       ],
-      "importLine": "import { BeatDetector } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BeatDetector } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/beat-info.json b/site/src/content/api/beat-info.json
index 0d612eb17..6e0ba71d0 100644
--- a/site/src/content/api/beat-info.json
+++ b/site/src/content/api/beat-info.json
@@ -4,7 +4,7 @@
   "symbol": "BeatInfo",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { BeatInfo } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BeatInfo } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/beat-schedule.json b/site/src/content/api/beat-schedule.json
index fae5031ed..ddc74cd84 100644
--- a/site/src/content/api/beat-schedule.json
+++ b/site/src/content/api/beat-schedule.json
@@ -4,7 +4,7 @@
   "symbol": "BeatSchedule",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { BeatSchedule } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BeatSchedule } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/bit-crusher-effect-options.json b/site/src/content/api/bit-crusher-effect-options.json
index 41e2cd34a..6f56dc09e 100644
--- a/site/src/content/api/bit-crusher-effect-options.json
+++ b/site/src/content/api/bit-crusher-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "BitCrusherEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { BitCrusherEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BitCrusherEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/bit-crusher-effect.json b/site/src/content/api/bit-crusher-effect.json
index 48d416870..95f083fe7 100644
--- a/site/src/content/api/bit-crusher-effect.json
+++ b/site/src/content/api/bit-crusher-effect.json
@@ -4,7 +4,7 @@
   "symbol": "BitCrusherEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -23,7 +23,7 @@
         "1. **Bit-depth reduction** - each sample is quantized to `2^bits` discrete levels, adding harmonic distortion characteristic of low-resolution audio. 2. **Sample-rate reduction** - a phase-accumulator sample-and-hold circuit re-latches the (quantized) input only `normFreq` times per input sample on average, producing aliasing artefacts reminiscent of early digital hardware.",
         "The worklet emits a pure wet signal; dry/wet mixing is handled by the base class."
       ],
-      "importLine": "import { BitCrusherEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { BitCrusherEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/body-options.json b/site/src/content/api/body-options.json
index cb0b589ba..ad32deeca 100644
--- a/site/src/content/api/body-options.json
+++ b/site/src/content/api/body-options.json
@@ -4,7 +4,7 @@
   "symbol": "BodyOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a body."
       ],
-      "importLine": "import { BodyOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { BodyOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/body-type.json b/site/src/content/api/body-type.json
index c3013177b..5f69b2bad 100644
--- a/site/src/content/api/body-type.json
+++ b/site/src/content/api/body-type.json
@@ -4,7 +4,7 @@
   "symbol": "BodyType",
   "kind": "type",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "Simulation role of a PhysicsBody.",
         "- `dynamic` - fully simulated (finite mass); moved by the solver once dynamics ship, and by `setTransform` meanwhile. - `static` - never moves; infinite mass. Ground, walls, level geometry. - `kinematic` - moved only by `setTransform` (game-driven); infinite mass, unaffected by contacts. Platforms, doors."
       ],
-      "importLine": "import { BodyType } from '@codexo/exojs-physics'",
+      "importLine": "import { BodyType } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/box-area.json b/site/src/content/api/box-area.json
index 6239e0422..ee35796ab 100644
--- a/site/src/content/api/box-area.json
+++ b/site/src/content/api/box-area.json
@@ -4,7 +4,7 @@
   "symbol": "BoxArea",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Random point inside an axis-aligned box. With `mode: 'edge'` the result lies on the perimeter (uniform along all four edges combined); with `mode: 'volume'` (default) it's uniformly distributed across the area."
       ],
-      "importLine": "import { BoxArea } from '@codexo/exojs-particles'",
+      "importLine": "import { BoxArea } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/box-shape.json b/site/src/content/api/box-shape.json
index 086f5732a..9cae76856 100644
--- a/site/src/content/api/box-shape.json
+++ b/site/src/content/api/box-shape.json
@@ -4,7 +4,7 @@
   "symbol": "BoxShape",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Axis-aligned box of `width × height` centred on the collider's local origin - a convenience over PolygonShape. The result is a regular polygon, so it participates in the polygon narrow phase like any other convex shape."
       ],
-      "importLine": "import { BoxShape } from '@codexo/exojs-physics'",
+      "importLine": "import { BoxShape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/burst-schedule.json b/site/src/content/api/burst-schedule.json
index d109b3f66..cddf50421 100644
--- a/site/src/content/api/burst-schedule.json
+++ b/site/src/content/api/burst-schedule.json
@@ -4,7 +4,7 @@
   "symbol": "BurstSchedule",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Burst trigger schedule. The module fires at `time` seconds (since registration), spawning `count` particles in one frame."
       ],
-      "importLine": "import { BurstSchedule } from '@codexo/exojs-particles'",
+      "importLine": "import { BurstSchedule } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/burst-spawn-config.json b/site/src/content/api/burst-spawn-config.json
index e7ca800a1..018e51083 100644
--- a/site/src/content/api/burst-spawn-config.json
+++ b/site/src/content/api/burst-spawn-config.json
@@ -4,7 +4,7 @@
   "symbol": "BurstSpawnConfig",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Spawn configuration for BurstSpawn: the burst schedule plus the shared per-property fields."
       ],
-      "importLine": "import { BurstSpawnConfig } from '@codexo/exojs-particles'",
+      "importLine": "import { BurstSpawnConfig } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/burst-spawn.json b/site/src/content/api/burst-spawn.json
index 593dcaadb..d3eceb4a6 100644
--- a/site/src/content/api/burst-spawn.json
+++ b/site/src/content/api/burst-spawn.json
@@ -4,7 +4,7 @@
   "symbol": "BurstSpawn",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Discrete-burst spawner. Fires at scheduled times with a fixed count per burst. Useful for explosions, hit-impacts, level-up effects."
       ],
-      "importLine": "import { BurstSpawn } from '@codexo/exojs-particles'",
+      "importLine": "import { BurstSpawn } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/capsule-shape.json b/site/src/content/api/capsule-shape.json
index eb8126506..6e65030d9 100644
--- a/site/src/content/api/capsule-shape.json
+++ b/site/src/content/api/capsule-shape.json
@@ -4,7 +4,7 @@
   "symbol": "CapsuleShape",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -23,7 +23,7 @@
         "The spine is given as two points rather than a centre, a half-height and an angle: every consumer needs the two endpoints, and the collider already carries a local rotation, so an angle on the shape would be a second and redundant orientation.",
         "A zero-length spine is rejected rather than quietly becoming a circle - use CircleShape to say that."
       ],
-      "importLine": "import { CapsuleShape } from '@codexo/exojs-physics'",
+      "importLine": "import { CapsuleShape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chain-shape-options.json b/site/src/content/api/chain-shape-options.json
index cd358f6de..978163741 100644
--- a/site/src/content/api/chain-shape-options.json
+++ b/site/src/content/api/chain-shape-options.json
@@ -4,7 +4,7 @@
   "symbol": "ChainShapeOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a ChainShape."
       ],
-      "importLine": "import { ChainShapeOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { ChainShapeOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chain-shape.json b/site/src/content/api/chain-shape.json
index af7d84f53..60e50f836 100644
--- a/site/src/content/api/chain-shape.json
+++ b/site/src/content/api/chain-shape.json
@@ -4,7 +4,7 @@
   "symbol": "ChainShape",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -25,7 +25,7 @@
         "It has no interior, so Shape.massProperties is `null` and a `dynamic` body needs at least one mass-bearing collider alongside it. A `static` or `kinematic` body carries a chain on its own.",
         "Collinear vertices are kept. A straight run is authoring data, and dropping it would move the adjacency of the neighbouring edges."
       ],
-      "importLine": "import { ChainShape } from '@codexo/exojs-physics'",
+      "importLine": "import { ChainShape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/character-movement-component.json b/site/src/content/api/character-movement-component.json
index c29eda603..623d70bf3 100644
--- a/site/src/content/api/character-movement-component.json
+++ b/site/src/content/api/character-movement-component.json
@@ -4,7 +4,7 @@
   "symbol": "CharacterMovementComponent",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 30,
   "counts": {
@@ -25,7 +25,7 @@
         "A surface supports the character when it lies within the walkable angle of up and touches the body's underside. Sensors, and colliders the body's filters exclude, never support it. One-way platforms are open `ChainShape`s, which block only from the side their normal points to: the character jumps through one from below and lands on it from above. Dropping through one is a game rule; clear the platform's category from the character collider's filter mask until the character is below it.",
         "Standing on a moving body carries the character with the body's velocity at the character's position, including its rotation, but the character itself never rotates. Leaving the support keeps that velocity, and launching from it adds it to the launch. A support moved by teleporting carries nothing."
       ],
-      "importLine": "import { CharacterMovementComponent } from '@codexo/exojs-physics'",
+      "importLine": "import { CharacterMovementComponent } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/character-movement-options.json b/site/src/content/api/character-movement-options.json
index 863aa7abe..021606306 100644
--- a/site/src/content/api/character-movement-options.json
+++ b/site/src/content/api/character-movement-options.json
@@ -4,7 +4,7 @@
   "symbol": "CharacterMovementOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for CharacterMovementComponent."
       ],
-      "importLine": "import { CharacterMovementOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { CharacterMovementOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chorus-effect-options.json b/site/src/content/api/chorus-effect-options.json
index 386243255..e5e422e5e 100644
--- a/site/src/content/api/chorus-effect-options.json
+++ b/site/src/content/api/chorus-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "ChorusEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for ChorusEffect."
       ],
-      "importLine": "import { ChorusEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { ChorusEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chorus-effect.json b/site/src/content/api/chorus-effect.json
index 67ef89f20..468cb0788 100644
--- a/site/src/content/api/chorus-effect.json
+++ b/site/src/content/api/chorus-effect.json
@@ -4,7 +4,7 @@
   "symbol": "ChorusEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -24,7 +24,7 @@
         "Node graph: ``` inputGain ┬── dryGain ────────────────┐ │ ├── outputGain └── delayNode ── wetGain ────┘",
         "lfoOscillator ── lfoGain (depth) ── delayNode.delayTime ```"
       ],
-      "importLine": "import { ChorusEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { ChorusEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chunk-coord.json b/site/src/content/api/chunk-coord.json
index 74178336c..807cc7b64 100644
--- a/site/src/content/api/chunk-coord.json
+++ b/site/src/content/api/chunk-coord.json
@@ -4,7 +4,7 @@
   "symbol": "ChunkCoord",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A signed chunk coordinate pair."
       ],
-      "importLine": "import { ChunkCoord } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ChunkCoord } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chunk-payload.json b/site/src/content/api/chunk-payload.json
index 0e8bf7ac9..01e99654a 100644
--- a/site/src/content/api/chunk-payload.json
+++ b/site/src/content/api/chunk-payload.json
@@ -4,7 +4,7 @@
   "symbol": "ChunkPayload",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A chunk payload ready to install into a import('./TileLayer').TileLayer via import('./TileLayer').TileLayer._adoptChunk - the same shape import('./TileChunk').TileChunk's constructor accepts as its `source` parameter, named and exported so provider authors have a type to import instead of matching an inline shape."
       ],
-      "importLine": "import { ChunkPayload } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ChunkPayload } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chunk-range.json b/site/src/content/api/chunk-range.json
index 3b63567b5..fed6dde95 100644
--- a/site/src/content/api/chunk-range.json
+++ b/site/src/content/api/chunk-range.json
@@ -4,7 +4,7 @@
   "symbol": "ChunkRange",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The inclusive range of chunk coordinates that intersect a bounded TileLayer. `null` for an unbounded layer (no range limit)."
       ],
-      "importLine": "import { ChunkRange } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ChunkRange } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chunk-source.json b/site/src/content/api/chunk-source.json
index 842368a6a..3ee69fdaa 100644
--- a/site/src/content/api/chunk-source.json
+++ b/site/src/content/api/chunk-source.json
@@ -4,7 +4,7 @@
   "symbol": "ChunkSource",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 1,
   "counts": {
@@ -22,7 +22,7 @@
         "Supplies chunk data for one import('./TileLayer').TileLayer on demand, keyed by signed chunk coordinates - the abstraction a import('./ChunkStreamer').ChunkStreamer drives to implement chunk streaming, and the seam a format adapter or a procedural generator implements.",
         "`getChunk` may return synchronously (e.g. slicing already-parsed source data) or a `Promise` (e.g. an expensive procedural-generation algorithm, plausibly off the main thread) - import('./ChunkStreamer').ChunkStreamer installs a synchronous result in the same tick it was requested, with zero pop-in. Returning `null` (synchronously or via a resolved `Promise`) means \"no data for this coordinate\" - e.g. outside a finite provider's authored extent, even though the layer itself may be unbounded."
       ],
-      "importLine": "import { ChunkSource } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ChunkSource } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chunk-streamer-options.json b/site/src/content/api/chunk-streamer-options.json
index 265554e19..04770e2a7 100644
--- a/site/src/content/api/chunk-streamer-options.json
+++ b/site/src/content/api/chunk-streamer-options.json
@@ -4,7 +4,7 @@
   "symbol": "ChunkStreamerOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a ChunkStreamer. All optional."
       ],
-      "importLine": "import { ChunkStreamerOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ChunkStreamerOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/chunk-streamer.json b/site/src/content/api/chunk-streamer.json
index 8596631a7..c14b36758 100644
--- a/site/src/content/api/chunk-streamer.json
+++ b/site/src/content/api/chunk-streamer.json
@@ -4,7 +4,7 @@
   "symbol": "ChunkStreamer",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 4,
   "counts": {
@@ -25,7 +25,7 @@
         "Tick it from your update loop, like import('./TileAnimator').TileAnimator:",
         "```ts const streamer = new ChunkStreamer(layer, mySource, view); scene.systems.add({ update: () => streamer.update() }); ```"
       ],
-      "importLine": "import { ChunkStreamer } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ChunkStreamer } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/circle-area.json b/site/src/content/api/circle-area.json
index 51cdf1bff..e031384ee 100644
--- a/site/src/content/api/circle-area.json
+++ b/site/src/content/api/circle-area.json
@@ -4,7 +4,7 @@
   "symbol": "CircleArea",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -22,7 +22,7 @@
         "Random point on or inside a circle of radius `radius`, centred at `(centerX, centerY)`. With `mode: 'edge'` the result lies exactly on the circumference; with `mode: 'volume'` (default) it lies anywhere in the disk, with uniform area density (sqrt-of-random-radius distribution).",
         "Use as a spawn-position distribution for circular emitters."
       ],
-      "importLine": "import { CircleArea } from '@codexo/exojs-particles'",
+      "importLine": "import { CircleArea } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/circle-shape.json b/site/src/content/api/circle-shape.json
index 8e4cd9010..115e4f011 100644
--- a/site/src/content/api/circle-shape.json
+++ b/site/src/content/api/circle-shape.json
@@ -4,7 +4,7 @@
   "symbol": "CircleShape",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A circle of the given `radius` centred on the collider's local origin. The cheapest shape for both broad- and narrow-phase."
       ],
-      "importLine": "import { CircleShape } from '@codexo/exojs-physics'",
+      "importLine": "import { CircleShape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/collider-defaults.json b/site/src/content/api/collider-defaults.json
index ed9b7f86a..de07dc8c6 100644
--- a/site/src/content/api/collider-defaults.json
+++ b/site/src/content/api/collider-defaults.json
@@ -4,7 +4,7 @@
   "symbol": "ColliderDefaults",
   "kind": "interface",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Collider settings shared by every generated collider unless overridden."
       ],
-      "importLine": "import { ColliderDefaults } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { ColliderDefaults } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/collider-options.json b/site/src/content/api/collider-options.json
index aeeee885d..75086318b 100644
--- a/site/src/content/api/collider-options.json
+++ b/site/src/content/api/collider-options.json
@@ -4,7 +4,7 @@
   "symbol": "ColliderOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a collider."
       ],
-      "importLine": "import { ColliderOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { ColliderOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/collider.json b/site/src/content/api/collider.json
index 7ff3a81a7..6be43915d 100644
--- a/site/src/content/api/collider.json
+++ b/site/src/content/api/collider.json
@@ -4,7 +4,7 @@
   "symbol": "Collider",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 20,
   "counts": {
@@ -22,7 +22,7 @@
         "Geometry attached to a PhysicsBody: a Shape plus a body-local offset/rotation, material (friction/restitution/density) and a collision filter. A body may own several colliders (compound). The collider also caches its world-space geometry - refreshed by synchronize - which the broad phase, narrow phase and queries read directly.",
         "Material fields and the filter are mutable; the shape and local placement are immutable (rebuild the collider to change geometry)."
       ],
-      "importLine": "import { Collider } from '@codexo/exojs-physics'",
+      "importLine": "import { Collider } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/collision-event.json b/site/src/content/api/collision-event.json
index 12d69a41e..5357923c1 100644
--- a/site/src/content/api/collision-event.json
+++ b/site/src/content/api/collision-event.json
@@ -4,7 +4,7 @@
   "symbol": "CollisionEvent",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Immutable per-dispatch snapshot describing a solid (non-sensor) contact. Frozen: it is safe to read during the callback and to copy fields out, but it is never reused or mutated, so the classic \"stored a pooled event\" bug cannot occur. `normal` points from collider/body **A toward B**."
       ],
-      "importLine": "import { CollisionEvent } from '@codexo/exojs-physics'",
+      "importLine": "import { CollisionEvent } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/collision-filter.json b/site/src/content/api/collision-filter.json
index 2d47bb029..b03b7e60c 100644
--- a/site/src/content/api/collision-filter.json
+++ b/site/src/content/api/collision-filter.json
@@ -4,7 +4,7 @@
   "symbol": "CollisionFilter",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Per-collider collision filter. A pair is considered for collision only when each collider's mask includes the other's category. A non-zero group overrides category/mask: identical positive groups always collide, identical negative groups never do."
       ],
-      "importLine": "import { CollisionFilter } from '@codexo/exojs-physics'",
+      "importLine": "import { CollisionFilter } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/color-gradient-key.json b/site/src/content/api/color-gradient-key.json
index 5e2e6d5a8..2deeca25f 100644
--- a/site/src/content/api/color-gradient-key.json
+++ b/site/src/content/api/color-gradient-key.json
@@ -4,7 +4,7 @@
   "symbol": "ColorGradientKey",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A keyframe in a ColorGradient: color at lifetime ratio `t` in `[0, 1]`."
       ],
-      "importLine": "import { ColorGradientKey } from '@codexo/exojs-particles'",
+      "importLine": "import { ColorGradientKey } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/color-gradient.json b/site/src/content/api/color-gradient.json
index c2dbf3057..90c76e2cd 100644
--- a/site/src/content/api/color-gradient.json
+++ b/site/src/content/api/color-gradient.json
@@ -4,7 +4,7 @@
   "symbol": "ColorGradient",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -23,7 +23,7 @@
         "Two output paths: - evaluate - writes into a `Color` instance (own scratch by default). - evaluateRgba - returns the packed `0xAABBGGRR` u32 directly, skipping the Color object. Use this in tight per-particle inner loops that write into a `Uint32Array` instance buffer.",
         "Keyframe interpolation runs on the authored (encoded) color components as stored on `Color`, not in linear light. This keeps CPU evaluation, the WebGL2 transform-feedback lookup and the WebGPU compute lookup numerically identical: all three sample the same 256-entry authored-color table built from this interpolation. Linearization happens exactly once, in the consuming render vertex stage."
       ],
-      "importLine": "import { ColorGradient } from '@codexo/exojs-particles'",
+      "importLine": "import { ColorGradient } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/color-over-lifetime.json b/site/src/content/api/color-over-lifetime.json
index c1aa7fef1..551149d3e 100644
--- a/site/src/content/api/color-over-lifetime.json
+++ b/site/src/content/api/color-over-lifetime.json
@@ -4,7 +4,7 @@
   "symbol": "ColorOverLifetime",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -22,7 +22,7 @@
         "Per-frame, per-particle color sampler. Each live particle's tint is set to the gradient evaluated at the particle's current `elapsed / lifetime` ratio, packed RGBA. Replaces the per-particle blend of `ColorAffector` (legacy) with a multi-keyframe gradient.",
         "CPU, WebGL2 and WebGPU use the same 256-sample lookup table with explicit linear interpolation. Narrow keyframe features are approximated. Color channels are quantized to the nearest byte after interpolation."
       ],
-      "importLine": "import { ColorOverLifetime } from '@codexo/exojs-particles'",
+      "importLine": "import { ColorOverLifetime } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/color-over-speed.json b/site/src/content/api/color-over-speed.json
index 9bde23a2f..2273f0d13 100644
--- a/site/src/content/api/color-over-speed.json
+++ b/site/src/content/api/color-over-speed.json
@@ -4,7 +4,7 @@
   "symbol": "ColorOverSpeed",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -23,7 +23,7 @@
         "Use cases: heat-mapping (slow=blue, fast=red), velocity-tinted trails, speed-gated highlights.",
         "CPU, WebGL2 and WebGPU use the same 256-sample lookup table with explicit linear interpolation. Narrow keyframe features are approximated. Color channels are quantized to the nearest byte after interpolation."
       ],
-      "importLine": "import { ColorOverSpeed } from '@codexo/exojs-particles'",
+      "importLine": "import { ColorOverSpeed } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/compressor-effect-options.json b/site/src/content/api/compressor-effect-options.json
index 0a55ee602..820dd401c 100644
--- a/site/src/content/api/compressor-effect-options.json
+++ b/site/src/content/api/compressor-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "CompressorEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for CompressorEffect. All values are clamped to their valid ranges on assignment."
       ],
-      "importLine": "import { CompressorEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { CompressorEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/compressor-effect.json b/site/src/content/api/compressor-effect.json
index 40fd1df79..bbbf65d0b 100644
--- a/site/src/content/api/compressor-effect.json
+++ b/site/src/content/api/compressor-effect.json
@@ -4,7 +4,7 @@
   "symbol": "CompressorEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Dynamic-range compressor backed by a Web Audio `DynamicsCompressorNode`. Reduces the volume of loud signals above a threshold, evening out the perceived loudness of a mix. All parameter changes are applied with a short smoothing ramp so they are artifact-free during playback."
       ],
-      "importLine": "import { CompressorEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { CompressorEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/cone-direction.json b/site/src/content/api/cone-direction.json
index a1442d7b5..86a424965 100644
--- a/site/src/content/api/cone-direction.json
+++ b/site/src/content/api/cone-direction.json
@@ -4,7 +4,7 @@
   "symbol": "ConeDirection",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -23,7 +23,7 @@
         "The cone is centred on `directionAngle` (in radians, 0 = +X, π/2 = +Y for screen-down coordinates) and spans `±halfAngle` radians around it. Speed is sampled uniformly in `[minSpeed, maxSpeed]`.",
         "Use for emission cones, explosions, fountain spread - anywhere the direction has a preferred axis with bounded variance."
       ],
-      "importLine": "import { ConeDirection } from '@codexo/exojs-particles'",
+      "importLine": "import { ConeDirection } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/constant.json b/site/src/content/api/constant.json
index b632c2465..f45306d94 100644
--- a/site/src/content/api/constant.json
+++ b/site/src/content/api/constant.json
@@ -4,7 +4,7 @@
   "symbol": "Constant",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -22,7 +22,7 @@
         "Distribution that always returns the same value. Implements both Distribution and LifetimeFunction so it can stand in wherever a randomized or time-parameterised value is expected.",
         "For mutable types (Vector, Color, ...) the constant value is copied into `out` if provided, otherwise the constructor's value is returned directly. Mutating that returned reference mutates the distribution's source."
       ],
-      "importLine": "import { Constant } from '@codexo/exojs-particles'",
+      "importLine": "import { Constant } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/contact-modifier-context.json b/site/src/content/api/contact-modifier-context.json
index 2f4c6a099..b3bee3e11 100644
--- a/site/src/content/api/contact-modifier-context.json
+++ b/site/src/content/api/contact-modifier-context.json
@@ -4,7 +4,7 @@
   "symbol": "ContactModifierContext",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -24,7 +24,7 @@
         "Writing a control affects this step only; the values are re-derived from the two colliders before the modifier runs again.",
         "A chain collider is solved per edge, so a body touching several edges of one chain reaches the modifier once per edge, each time with the same authored collider pair. Decide from the contact's own normal and penetration rather than from the pair's identity if that distinction matters."
       ],
-      "importLine": "import { ContactModifierContext } from '@codexo/exojs-physics'",
+      "importLine": "import { ContactModifierContext } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/contact-modifier.json b/site/src/content/api/contact-modifier.json
index 062a52476..30a513f24 100644
--- a/site/src/content/api/contact-modifier.json
+++ b/site/src/content/api/contact-modifier.json
@@ -4,7 +4,7 @@
   "symbol": "ContactModifier",
   "kind": "type",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "Called once per solid contact per fixed step, after contact generation and before the solver runs, to adjust that contact for this step - the hook one-way platforms, conditional friction and per-pair material overrides are built on.",
         "A world has at most one modifier. It runs before islands are built, so disabling a contact also keeps the two bodies from sleeping as one."
       ],
-      "importLine": "import { ContactModifier } from '@codexo/exojs-physics'",
+      "importLine": "import { ContactModifier } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/contact-point.json b/site/src/content/api/contact-point.json
index ee4fa81cd..b4b42584a 100644
--- a/site/src/content/api/contact-point.json
+++ b/site/src/content/api/contact-point.json
@@ -4,7 +4,7 @@
   "symbol": "ContactPoint",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A single contact point on a CollisionEvent. World space."
       ],
-      "importLine": "import { ContactPoint } from '@codexo/exojs-physics'",
+      "importLine": "import { ContactPoint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/convolution-effect-options.json b/site/src/content/api/convolution-effect-options.json
index 3399e14eb..68b209103 100644
--- a/site/src/content/api/convolution-effect-options.json
+++ b/site/src/content/api/convolution-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "ConvolutionEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for ConvolutionEffect."
       ],
-      "importLine": "import { ConvolutionEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { ConvolutionEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/convolution-effect.json b/site/src/content/api/convolution-effect.json
index d37c0174a..11370d7e1 100644
--- a/site/src/content/api/convolution-effect.json
+++ b/site/src/content/api/convolution-effect.json
@@ -4,7 +4,7 @@
   "symbol": "ConvolutionEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -23,7 +23,7 @@
         "Pass the IR as an `AudioBuffer` (typically decoded via `AudioContext.decodeAudioData`) or as a `Sound` (its `audioBuffer` is used). Omitting the IR leaves `convolver.buffer` as `null`, making the wet path silent and the effect act as a passthrough until setImpulse is called - safe to add to a bus before an IR is available.",
         "Node graph: ``` input(GainNode) → dryGain → output(GainNode) input → convolver → wetGain → output ``` Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet × gain`."
       ],
-      "importLine": "import { ConvolutionEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { ConvolutionEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/curve-key.json b/site/src/content/api/curve-key.json
index 72e1b20f6..e59ba53a9 100644
--- a/site/src/content/api/curve-key.json
+++ b/site/src/content/api/curve-key.json
@@ -4,7 +4,7 @@
   "symbol": "CurveKey",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A keyframe in a Curve: value `v` at lifetime ratio `t` in `[0, 1]`."
       ],
-      "importLine": "import { CurveKey } from '@codexo/exojs-particles'",
+      "importLine": "import { CurveKey } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/curve.json b/site/src/content/api/curve.json
index 49dea09c8..3fae73445 100644
--- a/site/src/content/api/curve.json
+++ b/site/src/content/api/curve.json
@@ -4,7 +4,7 @@
   "symbol": "Curve",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -22,7 +22,7 @@
         "Piecewise-linear keyframe curve sampled by lifetime ratio `t` in `[0, 1]`.",
         "Keyframes are stored sorted by `t` and clamped at the endpoints - sampling outside the keyframe range returns the nearest endpoint value. The implementation tracks the last accessed segment so monotonically advancing `t` (the typical case for per-particle lifetime sampling) costs O(1) amortized per call instead of O(log n)."
       ],
-      "importLine": "import { Curve } from '@codexo/exojs-particles'",
+      "importLine": "import { Curve } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/death-module.json b/site/src/content/api/death-module.json
index 246429d0a..f039d56d3 100644
--- a/site/src/content/api/death-module.json
+++ b/site/src/content/api/death-module.json
@@ -4,7 +4,7 @@
   "symbol": "DeathModule",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -27,7 +27,7 @@
         "Implementation pattern:",
         "```ts onDeath(system, death) { this._childSystem.burstAt(death.x, death.y, 8); } ```"
       ],
-      "importLine": "import { DeathModule } from '@codexo/exojs-particles'",
+      "importLine": "import { DeathModule } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/delay-effect-options.json b/site/src/content/api/delay-effect-options.json
index 772bff62f..bdfbbf7e4 100644
--- a/site/src/content/api/delay-effect-options.json
+++ b/site/src/content/api/delay-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "DelayEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for DelayEffect."
       ],
-      "importLine": "import { DelayEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { DelayEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/delay-effect.json b/site/src/content/api/delay-effect.json
index 2a9756d6d..e7c0425b6 100644
--- a/site/src/content/api/delay-effect.json
+++ b/site/src/content/api/delay-effect.json
@@ -4,7 +4,7 @@
   "symbol": "DelayEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Echo/delay effect using a Web Audio `DelayNode` with a feedback loop and dry/wet mix. The feedback path feeds the delayed signal back into itself, producing repeating echoes that decay naturally. Setting `feedback` near its maximum of 0.95 produces a long, prominent tail; lower values create a single slap-back echo."
       ],
-      "importLine": "import { DelayEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { DelayEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/derive-normals-options.json b/site/src/content/api/derive-normals-options.json
index cf296177a..dfd689c3a 100644
--- a/site/src/content/api/derive-normals-options.json
+++ b/site/src/content/api/derive-normals-options.json
@@ -4,7 +4,7 @@
   "symbol": "DeriveNormalsOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Tuning for deriveNormalsFromAlpha."
       ],
-      "importLine": "import { DeriveNormalsOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { DeriveNormalsOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/diagonal-policy.json b/site/src/content/api/diagonal-policy.json
index 17b1c78a4..8f786ffe1 100644
--- a/site/src/content/api/diagonal-policy.json
+++ b/site/src/content/api/diagonal-policy.json
@@ -4,7 +4,7 @@
   "symbol": "DiagonalPolicy",
   "kind": "type",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "How diagonal steps are allowed on a GridSpace.",
         "- `never` - four-connected movement only. - `no-corner-cutting` - a diagonal step needs both cells it passes between to be walkable, which is what stops an agent from clipping through the corner where two walls meet. - `always` - eight-connected movement with no such restriction."
       ],
-      "importLine": "import { DiagonalPolicy } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { DiagonalPolicy } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/distance-joint-options.json b/site/src/content/api/distance-joint-options.json
index af6164eba..c1a182deb 100644
--- a/site/src/content/api/distance-joint-options.json
+++ b/site/src/content/api/distance-joint-options.json
@@ -4,7 +4,7 @@
   "symbol": "DistanceJointOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a DistanceJoint."
       ],
-      "importLine": "import { DistanceJointOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { DistanceJointOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/distance-joint.json b/site/src/content/api/distance-joint.json
index e9bbb9361..26719bf52 100644
--- a/site/src/content/api/distance-joint.json
+++ b/site/src/content/api/distance-joint.json
@@ -4,7 +4,7 @@
   "symbol": "DistanceJoint",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Holds the anchor points on two bodies at a target length along their connecting axis. With `hertz === 0` it is rigid; with `hertz > 0` it behaves as a damped spring. Solved as a soft constraint in the sub-step loop, warm- started across frames."
       ],
-      "importLine": "import { DistanceJoint } from '@codexo/exojs-physics'",
+      "importLine": "import { DistanceJoint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/distortion-effect-options.json b/site/src/content/api/distortion-effect-options.json
index 2b8c0553b..6b28a3676 100644
--- a/site/src/content/api/distortion-effect-options.json
+++ b/site/src/content/api/distortion-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "DistortionEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for DistortionEffect."
       ],
-      "importLine": "import { DistortionEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { DistortionEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/distortion-effect.json b/site/src/content/api/distortion-effect.json
index ff7f76bff..b2a69c65e 100644
--- a/site/src/content/api/distortion-effect.json
+++ b/site/src/content/api/distortion-effect.json
@@ -4,7 +4,7 @@
   "symbol": "DistortionEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -23,7 +23,7 @@
         "The input signal is split into a dry path and a wet path. The wet path runs through a `WaveShaperNode` loaded with a tanh-based soft-clip curve, then through a `BiquadFilterNode` (lowpass) acting as a tone control, before being mixed back with the dry signal. The wave-shaper curve is rebuilt any time `drive` changes. Oversampling is delegated directly to `WaveShaperNode.oversample`.",
         "Node graph: ``` input(GainNode) ──── dryGain ─────────────────────────── output(GainNode) input ──── waveShaper ── toneFilter ── wetGain ── output ``` Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`."
       ],
-      "importLine": "import { DistortionEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { DistortionEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/distribution.json b/site/src/content/api/distribution.json
index 7d591c9de..b7aacd6d3 100644
--- a/site/src/content/api/distribution.json
+++ b/site/src/content/api/distribution.json
@@ -4,7 +4,7 @@
   "symbol": "Distribution",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -23,7 +23,7 @@
         "Implementations come in two flavours:",
         "- **Stateless / scalar** (e.g. Constant, Range) just return a `T` directly. - **Mutable-target** (Vector / Color distributions) accept an optional `out` parameter and write into it in place. Pass your own scratch instance to avoid per-spawn heap allocations; omit it to use the distribution's internal scratch (only valid until the next call)."
       ],
-      "importLine": "import { Distribution } from '@codexo/exojs-particles'",
+      "importLine": "import { Distribution } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/drag.json b/site/src/content/api/drag.json
index 3b50b96b6..d1e178cfc 100644
--- a/site/src/content/api/drag.json
+++ b/site/src/content/api/drag.json
@@ -4,7 +4,7 @@
   "symbol": "Drag",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -23,7 +23,7 @@
         "`drag = 0` is no damping; `drag = 1` halves velocity in ~1 second; higher values slow particles faster. Negative values accelerate (don't do that unless you mean it).",
         "GPU-eligible."
       ],
-      "importLine": "import { Drag } from '@codexo/exojs-particles'",
+      "importLine": "import { Drag } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ducking-effect-options.json b/site/src/content/api/ducking-effect-options.json
index bda9fdc61..cadf01e33 100644
--- a/site/src/content/api/ducking-effect-options.json
+++ b/site/src/content/api/ducking-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "DuckingEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for DuckingEffect. `sidechain` is required."
       ],
-      "importLine": "import { DuckingEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { DuckingEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ducking-effect.json b/site/src/content/api/ducking-effect.json
index 43e0f71ed..37c2bbfa0 100644
--- a/site/src/content/api/ducking-effect.json
+++ b/site/src/content/api/ducking-effect.json
@@ -4,7 +4,7 @@
   "symbol": "DuckingEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 15,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Sidechain compressor (ducker) implemented as an WorkletEffect. Attenuates the main audio signal whenever the `sidechain` AudioBus exceeds the threshold, then releases when it drops back down. Commonly used to duck background music under dialogue or sound effects. Attack and release times are expressed in milliseconds and converted internally to one-pole filter coefficients."
       ],
-      "importLine": "import { DuckingEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { DuckingEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ellipse-object.json b/site/src/content/api/ellipse-object.json
index e57a6236a..89f05d889 100644
--- a/site/src/content/api/ellipse-object.json
+++ b/site/src/content/api/ellipse-object.json
@@ -4,7 +4,7 @@
   "symbol": "EllipseObject",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "An ellipse inscribed in `[x, y, width, height]`."
       ],
-      "importLine": "import { EllipseObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { EllipseObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/equalizer-effect-options.json b/site/src/content/api/equalizer-effect-options.json
index d5d979ad6..6dd3cbdc7 100644
--- a/site/src/content/api/equalizer-effect-options.json
+++ b/site/src/content/api/equalizer-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "EqualizerEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for EqualizerEffect."
       ],
-      "importLine": "import { EqualizerEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { EqualizerEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/equalizer-effect.json b/site/src/content/api/equalizer-effect.json
index ab4634462..040c7a76a 100644
--- a/site/src/content/api/equalizer-effect.json
+++ b/site/src/content/api/equalizer-effect.json
@@ -4,7 +4,7 @@
   "symbol": "EqualizerEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Three-band equalizer (low shelf / peaking mid / high shelf) built from a series chain of `BiquadFilterNode` instances. Gain values are in dB and clamped to ±40 dB. All six parameters (gains + frequencies) are adjustable at runtime via the corresponding setters; gain changes use a short exponential ramp to avoid clicks."
       ],
-      "importLine": "import { EqualizerEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { EqualizerEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/find-path-options.json b/site/src/content/api/find-path-options.json
index 30c9c776a..4ecedc5cd 100644
--- a/site/src/content/api/find-path-options.json
+++ b/site/src/content/api/find-path-options.json
@@ -4,7 +4,7 @@
   "symbol": "FindPathOptions",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for Pathfinder.findPath and Pathfinder.findPathBetween."
       ],
-      "importLine": "import { FindPathOptions } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { FindPathOptions } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/flanger-effect-options.json b/site/src/content/api/flanger-effect-options.json
index 104e27c0a..e8e6d3a9b 100644
--- a/site/src/content/api/flanger-effect-options.json
+++ b/site/src/content/api/flanger-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "FlangerEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for FlangerEffect."
       ],
-      "importLine": "import { FlangerEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { FlangerEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/flanger-effect.json b/site/src/content/api/flanger-effect.json
index eb9fd11f8..64fa52d16 100644
--- a/site/src/content/api/flanger-effect.json
+++ b/site/src/content/api/flanger-effect.json
@@ -4,7 +4,7 @@
   "symbol": "FlangerEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -25,7 +25,7 @@
         "lfoOscillator ── lfoGain (depth in seconds) ──▶ delayNode.delayTime ```",
         "Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`; `feedbackGain.gain = feedback`; `lfoGain.gain = depthMs / 1000`."
       ],
-      "importLine": "import { FlangerEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { FlangerEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/flood-options.json b/site/src/content/api/flood-options.json
index 013684b77..5c812fb6a 100644
--- a/site/src/content/api/flood-options.json
+++ b/site/src/content/api/flood-options.json
@@ -4,7 +4,7 @@
   "symbol": "FloodOptions",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for Pathfinder.floodFrom."
       ],
-      "importLine": "import { FloodOptions } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { FloodOptions } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/flood-region.json b/site/src/content/api/flood-region.json
index d1ff015b7..8290302c0 100644
--- a/site/src/content/api/flood-region.json
+++ b/site/src/content/api/flood-region.json
@@ -4,7 +4,7 @@
   "symbol": "FloodRegion",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Result of Pathfinder.floodFrom: every node reached, with its cost."
       ],
-      "importLine": "import { FloodRegion } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { FloodRegion } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/forward-lighting-options.json b/site/src/content/api/forward-lighting-options.json
index e8b91dced..fbf0d47ea 100644
--- a/site/src/content/api/forward-lighting-options.json
+++ b/site/src/content/api/forward-lighting-options.json
@@ -4,7 +4,7 @@
   "symbol": "ForwardLightingOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What ForwardLighting takes whether or not it was given a host."
       ],
-      "importLine": "import { ForwardLightingOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { ForwardLightingOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/forward-lighting.json b/site/src/content/api/forward-lighting.json
index 556d39705..0f87dc9b9 100644
--- a/site/src/content/api/forward-lighting.json
+++ b/site/src/content/api/forward-lighting.json
@@ -4,7 +4,7 @@
   "symbol": "ForwardLighting",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 24,
   "counts": {
@@ -27,7 +27,7 @@
         "```ts const lighting = new ForwardLighting({ maxLights: 16 }); ```",
         "A filter chain is a frame pass, so `post` needs the host - and, for a system built for one scene, LightingOptions.scene, which keeps the chain out of the frame while that scene is not the one on screen."
       ],
-      "importLine": "import { ForwardLighting } from '@codexo/exojs-lighting'",
+      "importLine": "import { ForwardLighting } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/frame-lighting-options.json b/site/src/content/api/frame-lighting-options.json
index 2c8fa93a6..fbee7d100 100644
--- a/site/src/content/api/frame-lighting-options.json
+++ b/site/src/content/api/frame-lighting-options.json
@@ -4,7 +4,7 @@
   "symbol": "FrameLightingOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What LightmapLighting and RadianceLighting both take."
       ],
-      "importLine": "import { FrameLightingOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { FrameLightingOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/functions.json b/site/src/content/api/functions.json
index 5aabedfdd..7b5497222 100644
--- a/site/src/content/api/functions.json
+++ b/site/src/content/api/functions.json
@@ -3974,7 +3974,7 @@
           ],
           "params": [],
           "returnType": null,
-          "description": "Signal that dispatches once the global AudioContext enters the running state. Handles browser autoplay-policy by listening for user-interaction events (mousedown, touchstart, touchend) and resuming a suspended context automatically. Dispatches once per run of the context: on the first unlock, and again on every later locked-to-running edge, so an object constructed while the context sits suspended (an iOS audio-session interruption, a bfcache restore, ...) still gets its setup callback. Handlers subscribed while the context is already running do not receive a dispatch for that run - check isAudioContextReady first and set up directly when it returns true, then subscribe only for the locked case and unsubscribe on the first dispatch."
+          "description": "Signal that dispatches once the global AudioContext enters the running state. Handles browser autoplay-policy by listening for user-interaction events (pointer press and release, mousedown, touchstart, touchend, keydown) in the capture phase and resuming a suspended context automatically. Dispatches once per run of the context: on the first unlock, and again on every later locked-to-running edge, so an object constructed while the context sits suspended (an iOS audio-session interruption, a bfcache restore, ...) still gets its setup callback. Handlers subscribed while the context is already running do not receive a dispatch for that run - check isAudioContextReady first and set up directly when it returns true, then subscribe only for the locked case and unsubscribe on the first dispatch."
         },
         {
           "name": "onAudioPlaybackBlocked",
diff --git a/site/src/content/api/glsl-contribution.json b/site/src/content/api/glsl-contribution.json
index 50f1a508b..ffa544247 100644
--- a/site/src/content/api/glsl-contribution.json
+++ b/site/src/content/api/glsl-contribution.json
@@ -4,7 +4,7 @@
   "symbol": "GlslContribution",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "GLSL ES 3.00 contribution executed once per live particle after integration. Mutable locals are `vec2 position`, `velocity`, `scale`, `rotation` (angle, angular speed), `timing` (elapsed, lifetime), and `uint color`, `textureIndex`. `float dt` and `uint idx` identify the frame delta and storage slot. Uniforms are `u_KEY.field`; textures are `sampler2D u_KEY_NAME` with height 1. The body runs in its own block. Helpers belong in `prelude`."
       ],
-      "importLine": "import { GlslContribution } from '@codexo/exojs-particles'",
+      "importLine": "import { GlslContribution } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/granular-effect-options.json b/site/src/content/api/granular-effect-options.json
index 6bab7da87..2d675ce71 100644
--- a/site/src/content/api/granular-effect-options.json
+++ b/site/src/content/api/granular-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "GranularEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { GranularEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { GranularEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/granular-effect.json b/site/src/content/api/granular-effect.json
index 4f736e592..ec4b68a08 100644
--- a/site/src/content/api/granular-effect.json
+++ b/site/src/content/api/granular-effect.json
@@ -4,7 +4,7 @@
   "symbol": "GranularEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 16,
   "counts": {
@@ -22,7 +22,7 @@
         "Granular synthesis filter - slices input into small Hann-windowed grains and replays them with randomized parameters. Use cases:",
         "- Ambient texture: long grain (200ms+), low density (10-30/s), high spread, pitch range 0.5-1.5x. Creates evolving pad-like sounds. - Glitch: short grain (10-20ms), high density (100+/s), very high spread, pitch range 0.7-1.3x. Stuttering, lo-fi effects. - Time-stretch (low pitch with overlap): grain ~50ms, density 50/s, spread 0, pitch 1.0. Pseudo-stretches the input by buffering. - Pitch cloud: medium grain, medium density, pitchMin 0.5, pitchMax 2.0 gives a \"shimmer\" effect of overlapping pitches."
       ],
-      "importLine": "import { GranularEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { GranularEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/grid-space-options.json b/site/src/content/api/grid-space-options.json
index 60e29edae..2d6325024 100644
--- a/site/src/content/api/grid-space-options.json
+++ b/site/src/content/api/grid-space-options.json
@@ -4,7 +4,7 @@
   "symbol": "GridSpaceOptions",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for GridSpace."
       ],
-      "importLine": "import { GridSpaceOptions } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { GridSpaceOptions } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/grid-space.json b/site/src/content/api/grid-space.json
index 1134d2a7e..47dcb859d 100644
--- a/site/src/content/api/grid-space.json
+++ b/site/src/content/api/grid-space.json
@@ -4,7 +4,7 @@
   "symbol": "GridSpace",
   "kind": "class",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 28,
   "counts": {
@@ -24,7 +24,7 @@
         "Cost `0` blocks a cell, `1` is ordinary ground and larger values are terrain an agent will route around when it is cheaper to do so. Diagonal steps cost their length, so the metric stays consistent with the octile heuristic.",
         "The space carries no scene node and no rendering: it is data plus a neighbour relation, and it is built and mutated entirely by the application."
       ],
-      "importLine": "import { GridSpace } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { GridSpace } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/image-collection-tile-set-options.json b/site/src/content/api/image-collection-tile-set-options.json
index beeac5ddb..c005c66c9 100644
--- a/site/src/content/api/image-collection-tile-set-options.json
+++ b/site/src/content/api/image-collection-tile-set-options.json
@@ -4,7 +4,7 @@
   "symbol": "ImageCollectionTileSetOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a TileSet whose tiles are separate images."
       ],
-      "importLine": "import { ImageCollectionTileSetOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ImageCollectionTileSetOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/image-layer-node.json b/site/src/content/api/image-layer-node.json
index b2e1613ba..2c165b180 100644
--- a/site/src/content/api/image-layer-node.json
+++ b/site/src/content/api/image-layer-node.json
@@ -4,7 +4,7 @@
   "symbol": "ImageLayerNode",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 103,
   "counts": {
@@ -25,7 +25,7 @@
         "The node references - but never owns - the ImageLayer and its Loader-owned texture: destroy frees the wrapped sprite but leaves the layer and texture intact. Image-layer nodes are band-selectable exactly like tile-layer nodes: list the image layer in a import('./TileMapView').TileMapViewOptions.bands definition and the band stacks it by the map's combined document order, or parent an unbanded node into the scene directly wherever the image belongs in draw order.",
         "For a `repeatX`/`repeatY` node, bounds and hit-test queries reflect the coverage geometry computed by the last _collectContent call (since that geometry is recomputed per collect, not maintained incrementally), which is also why such a node force-disables `cullable`. A repeating or parallax node also re-sizes its wrapped sprite as the camera crosses period boundaries, which content-dirties an enclosing retained group the same way a streamed layer does - give it the same treatment (its own `RetainedContainer`, or none)."
       ],
-      "importLine": "import { ImageLayerNode } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ImageLayerNode } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/image-layer-options.json b/site/src/content/api/image-layer-options.json
index 0e3555226..02755bbfb 100644
--- a/site/src/content/api/image-layer-options.json
+++ b/site/src/content/api/image-layer-options.json
@@ -4,7 +4,7 @@
   "symbol": "ImageLayerOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 16,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for an ImageLayer."
       ],
-      "importLine": "import { ImageLayerOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ImageLayerOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/image-layer.json b/site/src/content/api/image-layer.json
index ac9939afd..28dff8d75 100644
--- a/site/src/content/api/image-layer.json
+++ b/site/src/content/api/image-layer.json
@@ -4,7 +4,7 @@
   "symbol": "ImageLayer",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 18,
   "counts": {
@@ -22,7 +22,7 @@
         "A data-only image layer: a single image (texture + resolved URL) placed as a background or foreground layer. The layer itself holds no scene-graph state - it is rendered by an import('./ImageLayerNode').ImageLayerNode, which import('./TileMapNode').TileMapNode and import('./TileMapView').TileMapView generate and interleave with tile layers by the map's combined document order (import('./TileMap').TileMap.renderableLayers).",
         "Parallax, opacity, tint, offset, and repeat flags are carried from the source Tiled map."
       ],
-      "importLine": "import { ImageLayer } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ImageLayer } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/joint-options.json b/site/src/content/api/joint-options.json
index 42153fbc1..59edb3312 100644
--- a/site/src/content/api/joint-options.json
+++ b/site/src/content/api/joint-options.json
@@ -4,7 +4,7 @@
   "symbol": "JointOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options every joint accepts, whatever it constrains."
       ],
-      "importLine": "import { JointOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { JointOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/joint.json b/site/src/content/api/joint.json
index 301c29512..0addaaed5 100644
--- a/site/src/content/api/joint.json
+++ b/site/src/content/api/joint.json
@@ -4,7 +4,7 @@
   "symbol": "Joint",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Base class for a two-body constraint solved alongside contacts in the sub-step loop. Concrete joints (distance, revolute, weld) implement the three solver hooks; the world owns the joint list and drives them, and joins the two bodies into one sleep island so a jointed pair sleeps and wakes together."
       ],
-      "importLine": "import { Joint } from '@codexo/exojs-physics'",
+      "importLine": "import { Joint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/kinematic-movement-component.json b/site/src/content/api/kinematic-movement-component.json
index eb8d5a43e..20dd5005f 100644
--- a/site/src/content/api/kinematic-movement-component.json
+++ b/site/src/content/api/kinematic-movement-component.json
@@ -4,7 +4,7 @@
   "symbol": "KinematicMovementComponent",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 21,
   "counts": {
@@ -26,7 +26,7 @@
         "The component holds the body's movement while it is active: enabling a second movement for the same body throws. Disabling it zeroes the body's velocity. Positions and directions are in the world's simulation space.",
         "A `CharacterMovementComponent` composed over the movement takes over its commands while that character is enabled: move then throws, and the character is the body's only source of motion."
       ],
-      "importLine": "import { KinematicMovementComponent } from '@codexo/exojs-physics'",
+      "importLine": "import { KinematicMovementComponent } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/kinematic-movement-options.json b/site/src/content/api/kinematic-movement-options.json
index ae145e233..e95866dab 100644
--- a/site/src/content/api/kinematic-movement-options.json
+++ b/site/src/content/api/kinematic-movement-options.json
@@ -4,7 +4,7 @@
   "symbol": "KinematicMovementOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for KinematicMovementComponent."
       ],
-      "importLine": "import { KinematicMovementOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { KinematicMovementOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lifetime-function.json b/site/src/content/api/lifetime-function.json
index aa0079582..8c99efa07 100644
--- a/site/src/content/api/lifetime-function.json
+++ b/site/src/content/api/lifetime-function.json
@@ -4,7 +4,7 @@
   "symbol": "LifetimeFunction",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -22,7 +22,7 @@
         "Lifetime-parameterised function that produces a deterministic `T` for a given lifetime ratio `t` in `[0, 1]`. Used by per-frame update modules that interpolate over particle lifetime - `ColorOverLifetime` (ColorGradient), `ScaleOverLifetime` (Curve), etc.",
         "Mutable-target rule: same as Distribution - pass your own scratch via `out` for hot loops, omit for one-off calls."
       ],
-      "importLine": "import { LifetimeFunction } from '@codexo/exojs-particles'",
+      "importLine": "import { LifetimeFunction } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/light-options.json b/site/src/content/api/light-options.json
index 586367ab0..dec794380 100644
--- a/site/src/content/api/light-options.json
+++ b/site/src/content/api/light-options.json
@@ -4,7 +4,7 @@
   "symbol": "LightOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options every light shares. Each field is also mutable afterwards."
       ],
-      "importLine": "import { LightOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/light.json b/site/src/content/api/light.json
index 98dea1d72..10b13c808 100644
--- a/site/src/content/api/light.json
+++ b/site/src/content/api/light.json
@@ -4,7 +4,7 @@
   "symbol": "Light",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 91,
   "counts": {
@@ -25,7 +25,7 @@
         "A light draws nothing itself and has no bounds, so it is never culled, batched or captured; what it costs is one row in the lighting system's data for as long as it is registered.",
         "Registration is explicit (Lighting.add), because a package has no business scanning a scene tree it does not own. Destroying a registered light unregisters it."
       ],
-      "importLine": "import { Light } from '@codexo/exojs-lighting'",
+      "importLine": "import { Light } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lighting-debug-view.json b/site/src/content/api/lighting-debug-view.json
index 87a083f7f..b53089631 100644
--- a/site/src/content/api/lighting-debug-view.json
+++ b/site/src/content/api/lighting-debug-view.json
@@ -4,7 +4,7 @@
   "symbol": "LightingDebugView",
   "kind": "type",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "- `'light'` shows the accumulated light field on its own, which is how you see where a light reaches without the scene's own colours in the way. - `'mask'` shows the occluder mask: this frame's blocking edges and handed-over drawables, rasterised into a target of their own at the light field's resolution and widened so none of them can fall between two texels. It reaches past the view by `fieldMargin`; the view shows its own part. It is the input a GPU-resident occluder field marches, and the view that says whether a wall is thick enough to be seen at that resolution. - `'normals'` shows the normal prepass: the world-space normals the registered surfaces described this frame, encoded the way a normal map is. Black is where nothing described a surface, and light lands there with no `N dot L` term at all. - `'occluders'` draws the silhouettes the registered sources collected this frame over the shaded scene, which is how you see what the shadows are actually being cast from.",
         "A renderer with no such intermediate - `forward` shades inside the sprite shader and casts no shadows - ignores it."
       ],
-      "importLine": "import { LightingDebugView } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightingDebugView } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lighting-host.json b/site/src/content/api/lighting-host.json
index a4df1d9d1..295df2160 100644
--- a/site/src/content/api/lighting-host.json
+++ b/site/src/content/api/lighting-host.json
@@ -4,7 +4,7 @@
   "symbol": "LightingHost",
   "kind": "type",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "A renderer that composes the frame reads the drawn frame, installs its passes in the frame slot, lays its fields out over the camera's view and follows the surface when it resizes. Those six members are the whole of it, so an Application satisfies this structurally and a test host can satisfy it without standing in for an application.",
         "The system is handed one; it never owns or destroys it."
       ],
-      "importLine": "import { LightingHost } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightingHost } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lighting-options.json b/site/src/content/api/lighting-options.json
index 6246e5bec..d46be970d 100644
--- a/site/src/content/api/lighting-options.json
+++ b/site/src/content/api/lighting-options.json
@@ -4,7 +4,7 @@
   "symbol": "LightingOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What every lighting system takes, whichever renderer it is."
       ],
-      "importLine": "import { LightingOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightingOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lighting-quality.json b/site/src/content/api/lighting-quality.json
index e914b9b37..99049493c 100644
--- a/site/src/content/api/lighting-quality.json
+++ b/site/src/content/api/lighting-quality.json
@@ -4,7 +4,7 @@
   "symbol": "LightingQuality",
   "kind": "type",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "A scene never names one: it constructs the system it wants - see ForwardLighting, LightmapLighting and RadianceLighting - and reads this back to say which one is running.",
         "- `forward` shades inside the sprite shader against a capacity-bounded light texture. One draw, no extra targets, and the only renderer that does normal mapping - but every lit fragment walks every light, so the count is capped. - `lightmap` accumulates the lights into a target of their own and multiplies the frame by it. No light cap, shadows from the registered occluder sources, and normals from a prepass over the registered surfaces rather than from a material. - `radiance` fills the same light field from a chain of radiance cascades instead: light propagates from the emitters rather than falling off around each light, so a lamp fills the room it stands in, thins with distance instead of ending at a radius, and casts penumbrae that widen the way a source with a size does. It needs a renderable float target, and does NOT make a scene look the way the other two renderers make it look."
       ],
-      "importLine": "import { LightingQuality } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightingQuality } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lighting-scene.json b/site/src/content/api/lighting-scene.json
index 4ecfbd26c..8b3920e75 100644
--- a/site/src/content/api/lighting-scene.json
+++ b/site/src/content/api/lighting-scene.json
@@ -4,7 +4,7 @@
   "symbol": "LightingScene",
   "kind": "type",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "What a lighting system needs of the scene it belongs to: its state, and the lifecycle signals that move it into and out of the host's frame. A Scene satisfies this structurally. See LightingOptions.scene.",
         "The system only listens; it never drives or destroys the scene."
       ],
-      "importLine": "import { LightingScene } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightingScene } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lighting.json b/site/src/content/api/lighting.json
index 228aa3e13..c3acc08fe 100644
--- a/site/src/content/api/lighting.json
+++ b/site/src/content/api/lighting.json
@@ -4,7 +4,7 @@
   "symbol": "Lighting",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 23,
   "counts": {
@@ -30,7 +30,7 @@
         "# Ordering",
         "Register it with the registry that ticks AFTER the code moving the lights, so the frame it shades is the frame that was drawn. `app.systems` runs its update phase before the active scene's, so a system registered there sees lights the scene has not moved yet; `scene.systems` is usually what you want."
       ],
-      "importLine": "import { Lighting } from '@codexo/exojs-lighting'",
+      "importLine": "import { Lighting } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lightmap-lighting-options.json b/site/src/content/api/lightmap-lighting-options.json
index 770f5b382..d9ffc3065 100644
--- a/site/src/content/api/lightmap-lighting-options.json
+++ b/site/src/content/api/lightmap-lighting-options.json
@@ -4,7 +4,7 @@
   "symbol": "LightmapLightingOptions",
   "kind": "type",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for LightmapLighting."
       ],
-      "importLine": "import { LightmapLightingOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightmapLightingOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lightmap-lighting.json b/site/src/content/api/lightmap-lighting.json
index c4ea3b2aa..afe55d3be 100644
--- a/site/src/content/api/lightmap-lighting.json
+++ b/site/src/content/api/lightmap-lighting.json
@@ -4,7 +4,7 @@
   "symbol": "LightmapLighting",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 23,
   "counts": {
@@ -25,7 +25,7 @@
         "Light no longer costs a loop iteration per fragment per light, so there is no cap on how many there may be, and the accumulated field is a texture a shadow term folds into: each light gets one polar row built from the registered occluder sources. Normals come from a prepass over the surfaces registered with Lighting.normalsFrom rather than from a material.",
         "The host is required and is the first argument: this renderer lights the frame that host drew, installs its passes in that host's frame slot, and follows its surface when it resizes. It is read, never owned. Pass the scene the system belongs to as LightingOptions.scene, so its passes are in that frame slot only while the scene is the one on screen."
       ],
-      "importLine": "import { LightmapLighting } from '@codexo/exojs-lighting'",
+      "importLine": "import { LightmapLighting } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/limiter-effect-options.json b/site/src/content/api/limiter-effect-options.json
index 947f75b61..a50744475 100644
--- a/site/src/content/api/limiter-effect-options.json
+++ b/site/src/content/api/limiter-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "LimiterEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for LimiterEffect."
       ],
-      "importLine": "import { LimiterEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { LimiterEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/limiter-effect.json b/site/src/content/api/limiter-effect.json
index fa03becdf..2487f2eba 100644
--- a/site/src/content/api/limiter-effect.json
+++ b/site/src/content/api/limiter-effect.json
@@ -4,7 +4,7 @@
   "symbol": "LimiterEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -24,7 +24,7 @@
         "The compressor `ratio` and `knee` default to the hardest values (20 and 0 respectively) but remain configurable, unlike a truly fixed limiter, because callers occasionally want a softer, more compressor-like limiting curve (lower ratio) or a gentler transition into limiting (larger knee) without switching to CompressorEffect and losing the dry/wet mix. The effect also exposes a dry/wet mix for API consistency and parallel processing workflows, though a fully-wet signal (`wet = 1`) is the typical configuration.",
         "Node graph: ``` input(GainNode) → dryGain → output(GainNode) input → compressor → wetGain → output ``` Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`."
       ],
-      "importLine": "import { LimiterEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { LimiterEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/line-light-options.json b/site/src/content/api/line-light-options.json
index 2c84a5d70..a58510e39 100644
--- a/site/src/content/api/line-light-options.json
+++ b/site/src/content/api/line-light-options.json
@@ -4,7 +4,7 @@
   "symbol": "LineLightOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for LineLight. Every field is also mutable afterwards."
       ],
-      "importLine": "import { LineLightOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { LineLightOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/line-light.json b/site/src/content/api/line-light.json
index 7c100a603..e56db8703 100644
--- a/site/src/content/api/line-light.json
+++ b/site/src/content/api/line-light.json
@@ -4,7 +4,7 @@
   "symbol": "LineLight",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 94,
   "counts": {
@@ -27,7 +27,7 @@
         "# Shadows",
         "The shadow map is polar around the segment's CENTRE, the same as for a point light. That is exact for a fragment the segment subtends little of, and approximate near a long tube's ends, where a physically lit occluder would be lit from many points along the segment at once. LightOptions.softness is the knob that stands in for it."
       ],
-      "importLine": "import { LineLight } from '@codexo/exojs-lighting'",
+      "importLine": "import { LineLight } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/line-segment.json b/site/src/content/api/line-segment.json
index ad144c737..7db38ece3 100644
--- a/site/src/content/api/line-segment.json
+++ b/site/src/content/api/line-segment.json
@@ -4,7 +4,7 @@
   "symbol": "LineSegment",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Random point on a line segment between `(x0, y0)` and `(x1, y1)`. Uniform parameter distribution: `t = Math.random()` then `lerp(start, end, t)`."
       ],
-      "importLine": "import { LineSegment } from '@codexo/exojs-particles'",
+      "importLine": "import { LineSegment } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lit-material-options.json b/site/src/content/api/lit-material-options.json
index 5620165fb..93b6d8378 100644
--- a/site/src/content/api/lit-material-options.json
+++ b/site/src/content/api/lit-material-options.json
@@ -4,7 +4,7 @@
   "symbol": "LitMaterialOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for LitMaterial."
       ],
-      "importLine": "import { LitMaterialOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { LitMaterialOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/lit-material.json b/site/src/content/api/lit-material.json
index c779f4a15..db9889f05 100644
--- a/site/src/content/api/lit-material.json
+++ b/site/src/content/api/lit-material.json
@@ -4,7 +4,7 @@
   "symbol": "LitMaterial",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 19,
   "counts": {
@@ -27,7 +27,7 @@
         "# Ownership",
         "The material owns neither the lighting system nor the textures. `destroy()` releases only the GPU resources cached against this material."
       ],
-      "importLine": "import { LitMaterial } from '@codexo/exojs-lighting'",
+      "importLine": "import { LitMaterial } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/manual-meter.json b/site/src/content/api/manual-meter.json
index 5cd9b0913..f8785e40d 100644
--- a/site/src/content/api/manual-meter.json
+++ b/site/src/content/api/manual-meter.json
@@ -4,7 +4,7 @@
   "symbol": "ManualMeter",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Manual counting context; phase anchors at the first tracked beat after reset."
       ],
-      "importLine": "import { ManualMeter } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { ManualMeter } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-bounds.json b/site/src/content/api/map-bounds.json
index b6c04dcbb..412bf01f6 100644
--- a/site/src/content/api/map-bounds.json
+++ b/site/src/content/api/map-bounds.json
@@ -4,7 +4,7 @@
   "symbol": "MapBounds",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "An axis-aligned rectangle in world pixel space (+Y down)."
       ],
-      "importLine": "import { MapBounds } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapBounds } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level-cancel-options.json b/site/src/content/api/map-level-cancel-options.json
index 2aec3ee42..a54fa1370 100644
--- a/site/src/content/api/map-level-cancel-options.json
+++ b/site/src/content/api/map-level-cancel-options.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevelCancelOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a MapWorldRuntime.loadLevel that spawns nothing."
       ],
-      "importLine": "import { MapLevelCancelOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevelCancelOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level-load-context.json b/site/src/content/api/map-level-load-context.json
index 40a729220..65a4cf38c 100644
--- a/site/src/content/api/map-level-load-context.json
+++ b/site/src/content/api/map-level-load-context.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevelLoadContext",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What a MapLevelProvider is given for one level load."
       ],
-      "importLine": "import { MapLevelLoadContext } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevelLoadContext } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level-load-options.json b/site/src/content/api/map-level-load-options.json
index a0a55041d..4e9ed151c 100644
--- a/site/src/content/api/map-level-load-options.json
+++ b/site/src/content/api/map-level-load-options.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevelLoadOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a MapWorldRuntime.loadLevel that also spawns the level's map objects. `spawner` and `context` travel together: the context exists to be handed to that spawner's factories."
       ],
-      "importLine": "import { MapLevelLoadOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevelLoadOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level-neighbour.json b/site/src/content/api/map-level-neighbour.json
index 0e9b18d8b..57a5df5be 100644
--- a/site/src/content/api/map-level-neighbour.json
+++ b/site/src/content/api/map-level-neighbour.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevelNeighbour",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "One adjacency edge from a level to another level in the same MapWorld."
       ],
-      "importLine": "import { MapLevelNeighbour } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevelNeighbour } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level-provider.json b/site/src/content/api/map-level-provider.json
index ce86e0ba3..0037e995a 100644
--- a/site/src/content/api/map-level-provider.json
+++ b/site/src/content/api/map-level-provider.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevelProvider",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "Anything awaitable is accepted, so a provider can hand back a LoaderScope.load queue directly.",
         "The returned map becomes **owned by that level runtime**, which destroys it on unload. Return a map built for this load; handing back a shared map (an entry of an eagerly converted document, say) makes the runtime destroy an object other code still holds."
       ],
-      "importLine": "import { MapLevelProvider } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevelProvider } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level-runtime.json b/site/src/content/api/map-level-runtime.json
index 0e53b7992..faaee20fb 100644
--- a/site/src/content/api/map-level-runtime.json
+++ b/site/src/content/api/map-level-runtime.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevelRuntime",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -22,7 +22,7 @@
         "One loaded level and everything that load produced.",
         "Created by MapWorldRuntime.loadLevel; destroying it unloads the level. There is nothing else to release afterwards - the map, the spawned objects and the level's asset claims all end here."
       ],
-      "importLine": "import { MapLevelRuntime } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevelRuntime } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level-side.json b/site/src/content/api/map-level-side.json
index 2f4cad773..e55707a76 100644
--- a/site/src/content/api/map-level-side.json
+++ b/site/src/content/api/map-level-side.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevelSide",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Side discriminant for a MapLevelNeighbour."
       ],
-      "importLine": "import { MapLevelSide } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevelSide } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-level.json b/site/src/content/api/map-level.json
index 6109eb047..4a3d16c51 100644
--- a/site/src/content/api/map-level.json
+++ b/site/src/content/api/map-level.json
@@ -4,7 +4,7 @@
   "symbol": "MapLevel",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Immutable metadata for one level of a MapWorld - everything needed to decide whether to load it, without loading it."
       ],
-      "importLine": "import { MapLevel } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapLevel } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-object-descriptor.json b/site/src/content/api/map-object-descriptor.json
index 121ad5fad..ad96f2598 100644
--- a/site/src/content/api/map-object-descriptor.json
+++ b/site/src/content/api/map-object-descriptor.json
@@ -4,7 +4,7 @@
   "symbol": "MapObjectDescriptor",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -22,7 +22,7 @@
         "A format-neutral view of one map object, as handed to a import('./MapObjectSpawner').MapObjectFactory.",
         "The descriptor is what game code writes against: it resolves the two things that differ between authoring formats - stable identity and the dispatch key - and pairs the object with the layer it came from. The parsed object itself stays reachable through object, and the untouched source record through TileMapObject.source."
       ],
-      "importLine": "import { MapObjectDescriptor } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapObjectDescriptor } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-object-factories.json b/site/src/content/api/map-object-factories.json
index 29a65b72d..08c4904a1 100644
--- a/site/src/content/api/map-object-factories.json
+++ b/site/src/content/api/map-object-factories.json
@@ -4,7 +4,7 @@
   "symbol": "MapObjectFactories",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Dispatch key to factory. Keys are matched against the spawner's `identify` result."
       ],
-      "importLine": "import { MapObjectFactories } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapObjectFactories } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-object-factory.json b/site/src/content/api/map-object-factory.json
index 98713885b..972a0270b 100644
--- a/site/src/content/api/map-object-factory.json
+++ b/site/src/content/api/map-object-factory.json
@@ -4,7 +4,7 @@
   "symbol": "MapObjectFactory",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "Creates one runtime object from one map object, or `null` to deliberately create nothing for it.",
         "`signal` aborts with the spawn it belongs to; a factory that loads assets or awaits anything else should pass it on, so a level unloaded mid-load stops its own work too."
       ],
-      "importLine": "import { MapObjectFactory } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapObjectFactory } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-object-spawner-options.json b/site/src/content/api/map-object-spawner-options.json
index 4c8fb4e5a..45834e18d 100644
--- a/site/src/content/api/map-object-spawner-options.json
+++ b/site/src/content/api/map-object-spawner-options.json
@@ -4,7 +4,7 @@
   "symbol": "MapObjectSpawnerOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for MapObjectSpawner."
       ],
-      "importLine": "import { MapObjectSpawnerOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapObjectSpawnerOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-object-spawner.json b/site/src/content/api/map-object-spawner.json
index 3709d5441..d5499e7ce 100644
--- a/site/src/content/api/map-object-spawner.json
+++ b/site/src/content/api/map-object-spawner.json
@@ -4,7 +4,7 @@
   "symbol": "MapObjectSpawner",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -24,7 +24,7 @@
         "ExoJS owns the mechanism: identity, ordering, cancellation, rollback and lifetime. The game owns the policy: which object becomes what, and what those objects need - dependencies travel through `Context`, not through any service locator in the engine.",
         "A spawn is **atomic**: if any factory fails, everything already created is destroyed in reverse order and no session is produced."
       ],
-      "importLine": "import { MapObjectSpawner } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapObjectSpawner } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-spawn-error-reason.json b/site/src/content/api/map-spawn-error-reason.json
index 3916fd337..a95777ee5 100644
--- a/site/src/content/api/map-spawn-error-reason.json
+++ b/site/src/content/api/map-spawn-error-reason.json
@@ -4,7 +4,7 @@
   "symbol": "MapSpawnErrorReason",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Why a MapSpawnError was raised."
       ],
-      "importLine": "import { MapSpawnErrorReason } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapSpawnErrorReason } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-spawn-error.json b/site/src/content/api/map-spawn-error.json
index 6534d485a..7ee8c4afa 100644
--- a/site/src/content/api/map-spawn-error.json
+++ b/site/src/content/api/map-spawn-error.json
@@ -4,7 +4,7 @@
   "symbol": "MapSpawnError",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -22,7 +22,7 @@
         "A spawn failed. The whole spawn is rolled back before this is thrown - no partial session exists.",
         "For `'factory-failed'` the error a factory raised is preserved as `cause`."
       ],
-      "importLine": "import { MapSpawnError } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapSpawnError } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-spawn-options.json b/site/src/content/api/map-spawn-options.json
index a53ca8bc8..6c6e5c776 100644
--- a/site/src/content/api/map-spawn-options.json
+++ b/site/src/content/api/map-spawn-options.json
@@ -4,7 +4,7 @@
   "symbol": "MapSpawnOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for MapObjectSpawner.spawn."
       ],
-      "importLine": "import { MapSpawnOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapSpawnOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-spawn-session.json b/site/src/content/api/map-spawn-session.json
index 76afc1402..13863599c 100644
--- a/site/src/content/api/map-spawn-session.json
+++ b/site/src/content/api/map-spawn-session.json
@@ -4,7 +4,7 @@
   "symbol": "MapSpawnSession",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -23,7 +23,7 @@
         "A session is handed out by import('./MapObjectSpawner').MapObjectSpawner.spawn and owns every result in it. Destroying the session destroys them all; nothing else has to be tracked, and nothing scans the scene to find them again.",
         "A session is not reusable - destroy it and spawn again."
       ],
-      "importLine": "import { MapSpawnSession } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapSpawnSession } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-world-options.json b/site/src/content/api/map-world-options.json
index 473a69337..8666dceec 100644
--- a/site/src/content/api/map-world-options.json
+++ b/site/src/content/api/map-world-options.json
@@ -4,7 +4,7 @@
   "symbol": "MapWorldOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a MapWorld."
       ],
-      "importLine": "import { MapWorldOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapWorldOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-world-runtime-options.json b/site/src/content/api/map-world-runtime-options.json
index aec38abc5..0a81d7d59 100644
--- a/site/src/content/api/map-world-runtime-options.json
+++ b/site/src/content/api/map-world-runtime-options.json
@@ -4,7 +4,7 @@
   "symbol": "MapWorldRuntimeOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for MapWorldRuntime."
       ],
-      "importLine": "import { MapWorldRuntimeOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapWorldRuntimeOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-world-runtime.json b/site/src/content/api/map-world-runtime.json
index bb53da9f5..7c66c233b 100644
--- a/site/src/content/api/map-world-runtime.json
+++ b/site/src/content/api/map-world-runtime.json
@@ -4,7 +4,7 @@
   "symbol": "MapWorldRuntime",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -24,7 +24,7 @@
         "Scope layout - the runtime owns everything below its own scope and nothing above it:",
         "```text scene.loader (given to the runtime, never destroyed by it) └─ world (the runtime's own scope) ├─ level:forest └─ level:cave ```"
       ],
-      "importLine": "import { MapWorldRuntime } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapWorldRuntime } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/map-world.json b/site/src/content/api/map-world.json
index d8316170b..7b28f1914 100644
--- a/site/src/content/api/map-world.json
+++ b/site/src/content/api/map-world.json
@@ -4,7 +4,7 @@
   "symbol": "MapWorld",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -23,7 +23,7 @@
         "A `MapWorld` holds metadata only - no tiles, no textures, no runtime maps. It is what a game reads to decide which levels it needs; loading them is import('./MapWorldRuntime').MapWorldRuntime's job.",
         "Adapters build one from their source document (`@codexo/exojs-ldtk` does so from a `.ldtk` project). A format with no world concept of its own - Tiled, today - can be described by constructing one directly from whatever placement data the game keeps."
       ],
-      "importLine": "import { MapWorld } from '@codexo/exojs-tilemap'",
+      "importLine": "import { MapWorld } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/mesh-occluder-options.json b/site/src/content/api/mesh-occluder-options.json
index 48ec1a6f5..77a7b69a1 100644
--- a/site/src/content/api/mesh-occluder-options.json
+++ b/site/src/content/api/mesh-occluder-options.json
@@ -4,7 +4,7 @@
   "symbol": "MeshOccluderOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Tuning for MeshOccluder."
       ],
-      "importLine": "import { MeshOccluderOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { MeshOccluderOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/mesh-occluder.json b/site/src/content/api/mesh-occluder.json
index 9fc779c99..3e4bd5b70 100644
--- a/site/src/content/api/mesh-occluder.json
+++ b/site/src/content/api/mesh-occluder.json
@@ -4,7 +4,7 @@
   "symbol": "MeshOccluder",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -24,7 +24,7 @@
         "Only edges one triangle owns are kept: an edge two triangles share is interior and casts no shadow anybody can see, and a tessellated shape has far more of those than of the other kind. Holes come back as outlines of their own, so a ring shadows like a ring.",
         "The outline is extracted once. The mesh places it, so moving or rotating it moves its shadow; deforming its vertices afterwards does not, and wants a fresh occluder."
       ],
-      "importLine": "import { MeshOccluder } from '@codexo/exojs-lighting'",
+      "importLine": "import { MeshOccluder } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/mesh-particles-options.json b/site/src/content/api/mesh-particles-options.json
index 4216a1b64..976e4a2f3 100644
--- a/site/src/content/api/mesh-particles-options.json
+++ b/site/src/content/api/mesh-particles-options.json
@@ -4,7 +4,7 @@
   "symbol": "MeshParticlesOptions",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for MeshParticles."
       ],
-      "importLine": "import { MeshParticlesOptions } from '@codexo/exojs-particles'",
+      "importLine": "import { MeshParticlesOptions } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/mesh-particles.json b/site/src/content/api/mesh-particles.json
index d06ed09fc..e4d222847 100644
--- a/site/src/content/api/mesh-particles.json
+++ b/site/src/content/api/mesh-particles.json
@@ -4,7 +4,7 @@
   "symbol": "MeshParticles",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 14,
   "counts": {
@@ -26,7 +26,7 @@
         "**Atlas frames still work.** The mesh's own UVs are treated exactly like the quad's 0..1 corners: the shader mixes them across the particle's resolved frame (`uv = mix(uvMin, uvMax, meshUV)`), so `system.frames` plus a per-particle `textureIndex` selects a frame the same way. A geometry with **no texcoord attribute** therefore carries UV `(0, 0)` on every vertex and the mix degenerates to `uvMin` - the whole mesh samples the single texel at the frame's top-left corner, which on the default 1×1 white texture is exactly \"untextured, tinted by the particle's `color`\".",
         "**Sizing is the mesh's own.** Unlike the quad, which derives its footprint from the texture frame, a mesh particle's footprint is whatever its vertex positions say, in system-local units, multiplied by the per-particle `scaleX`/`scaleY`. The texture only supplies colour."
       ],
-      "importLine": "import { MeshParticles } from '@codexo/exojs-particles'",
+      "importLine": "import { MeshParticles } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/meter-candidate.json b/site/src/content/api/meter-candidate.json
index a05629f6a..d0c9a4e08 100644
--- a/site/src/content/api/meter-candidate.json
+++ b/site/src/content/api/meter-candidate.json
@@ -4,7 +4,7 @@
   "symbol": "MeterCandidate",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { MeterCandidate } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { MeterCandidate } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/meter-estimate-reason.json b/site/src/content/api/meter-estimate-reason.json
index 7e79c8200..e0593a2f2 100644
--- a/site/src/content/api/meter-estimate-reason.json
+++ b/site/src/content/api/meter-estimate-reason.json
@@ -4,7 +4,7 @@
   "symbol": "MeterEstimateReason",
   "kind": "type",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { MeterEstimateReason } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { MeterEstimateReason } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/meter-estimate.json b/site/src/content/api/meter-estimate.json
index 2bc946ab5..428eebc97 100644
--- a/site/src/content/api/meter-estimate.json
+++ b/site/src/content/api/meter-estimate.json
@@ -4,7 +4,7 @@
   "symbol": "MeterEstimate",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { MeterEstimate } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { MeterEstimate } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/meter-model.json b/site/src/content/api/meter-model.json
index 361a429d5..e873914a5 100644
--- a/site/src/content/api/meter-model.json
+++ b/site/src/content/api/meter-model.json
@@ -4,7 +4,7 @@
   "symbol": "MeterModel",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { MeterModel } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { MeterModel } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/mouse-joint-options.json b/site/src/content/api/mouse-joint-options.json
index 8e3514a18..88d128484 100644
--- a/site/src/content/api/mouse-joint-options.json
+++ b/site/src/content/api/mouse-joint-options.json
@@ -4,7 +4,7 @@
   "symbol": "MouseJointOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a MouseJoint."
       ],
-      "importLine": "import { MouseJointOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { MouseJointOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/mouse-joint.json b/site/src/content/api/mouse-joint.json
index 7042a9bad..43f58b1b6 100644
--- a/site/src/content/api/mouse-joint.json
+++ b/site/src/content/api/mouse-joint.json
@@ -4,7 +4,7 @@
   "symbol": "MouseJoint",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Softly pulls a single body's grab point toward a movable **target** point (typically the mouse cursor). The grab point is fixed on the body at creation; update target each frame to drag. A soft constraint bounded by maxForce - solved in the sub-step loop, warm-started. Internally the \"other\" body is a private static ground sentinel, so this is a single-body constraint that touches only the dragged body."
       ],
-      "importLine": "import { MouseJoint } from '@codexo/exojs-physics'",
+      "importLine": "import { MouseJoint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/navigation-agent-component.json b/site/src/content/api/navigation-agent-component.json
index f957752a9..20a6ce38c 100644
--- a/site/src/content/api/navigation-agent-component.json
+++ b/site/src/content/api/navigation-agent-component.json
@@ -4,7 +4,7 @@
   "symbol": "NavigationAgentComponent",
   "kind": "class",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 29,
   "counts": {
@@ -24,7 +24,7 @@
         "It steers in its fixed update, which a scene runs before its systems, so a movement backed by a physics world registered as a scene system receives each step's command before that world steps. Nothing is searched every step: a route is planned on a new command and replanned only when it went stale - the space's revision changed, a followed target moved to another node, a budget-limited partial route ran out, or the actor made no progress - and automatic replans are at most one per NavigationAgentOptions.repathInterval.",
         "Disabling the component stops the movement and keeps the command; enabling it again plans a fresh route to it. Pausing the scene pauses it."
       ],
-      "importLine": "import { NavigationAgentComponent } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { NavigationAgentComponent } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/navigation-agent-options.json b/site/src/content/api/navigation-agent-options.json
index ba226cbb0..acf2d14ce 100644
--- a/site/src/content/api/navigation-agent-options.json
+++ b/site/src/content/api/navigation-agent-options.json
@@ -4,7 +4,7 @@
   "symbol": "NavigationAgentOptions",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for NavigationAgentComponent."
       ],
-      "importLine": "import { NavigationAgentOptions } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { NavigationAgentOptions } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/navigation-movement.json b/site/src/content/api/navigation-movement.json
index 3a790b3f8..ae8e22ca9 100644
--- a/site/src/content/api/navigation-movement.json
+++ b/site/src/content/api/navigation-movement.json
@@ -4,7 +4,7 @@
   "symbol": "NavigationMovement",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -24,7 +24,7 @@
         "Directions are in the navigation space's coordinates, the same space an agent reads its position in. A movement working in another space - a projected display, say - converts at its own boundary.",
         "`KinematicMovementComponent` from `@codexo/exojs-physics` satisfies this contract as it is."
       ],
-      "importLine": "import { NavigationMovement } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { NavigationMovement } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/navigation-space.json b/site/src/content/api/navigation-space.json
index 482a734e6..79f5358fe 100644
--- a/site/src/content/api/navigation-space.json
+++ b/site/src/content/api/navigation-space.json
@@ -4,7 +4,7 @@
   "symbol": "NavigationSpace",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -22,7 +22,7 @@
         "The search core's view of a world: integer node ids, a neighbour relation and a heuristic. GridSpace and WaypointGraph implement it, and so can application code - a space needs no scene node, no renderer and no asset.",
         "Implementations must be deterministic: the same query on an unmutated space has to produce the same neighbours in the same order, or paths stop being reproducible across runs and machines."
       ],
-      "importLine": "import { NavigationSpace } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { NavigationSpace } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/navigation-status.json b/site/src/content/api/navigation-status.json
index 220022a29..903009c5c 100644
--- a/site/src/content/api/navigation-status.json
+++ b/site/src/content/api/navigation-status.json
@@ -4,7 +4,7 @@
   "symbol": "NavigationStatus",
   "kind": "type",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "- `idle` - no destination; the state before the first command and after NavigationAgentComponent.stop. - `navigating` - following a route, including a partial one that a search budget cut short. - `arrived` - within `arrivalDistance` of the destination. A followed target that moves away puts it back to `navigating`. - `unreachable` - no route leads to the destination, the search budget is too small to get past its own node, or it has reached the closest point a `snapToNearest` search could offer. - `blocked` - a route exists, but the movement made no progress along it even after a fresh search.",
         "`unreachable` and `blocked` are retried on their own when the space's revision changes or a followed target moves to another node; `blocked` is also retried after four repath intervals, since what stopped the actor - such as another actor - may have moved on without any revision changing."
       ],
-      "importLine": "import { NavigationStatus } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { NavigationStatus } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/normal-convention.json b/site/src/content/api/normal-convention.json
index d39ccf354..ae93d2e9e 100644
--- a/site/src/content/api/normal-convention.json
+++ b/site/src/content/api/normal-convention.json
@@ -4,7 +4,7 @@
   "symbol": "NormalConvention",
   "kind": "type",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -24,7 +24,7 @@
         "Which one a tool writes is a setting rather than a property of the tool - several bakers default to DirectX - so this is a declaration about the asset, not a claim about any authoring pipeline.",
         "It describes the CHANNELS, not the image: a map in the other convention is not an upside-down picture, and flipping the texture vertically is not a substitute for declaring this."
       ],
-      "importLine": "import { NormalConvention } from '@codexo/exojs-lighting'",
+      "importLine": "import { NormalConvention } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/normal-map-options.json b/site/src/content/api/normal-map-options.json
index 2c0a8f91d..609381bf7 100644
--- a/site/src/content/api/normal-map-options.json
+++ b/site/src/content/api/normal-map-options.json
@@ -4,7 +4,7 @@
   "symbol": "NormalMapOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for NormalMap."
       ],
-      "importLine": "import { NormalMapOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { NormalMapOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/normal-map.json b/site/src/content/api/normal-map.json
index d57970e65..d96bde42c 100644
--- a/site/src/content/api/normal-map.json
+++ b/site/src/content/api/normal-map.json
@@ -4,7 +4,7 @@
   "symbol": "NormalMap",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -24,7 +24,7 @@
         "The default input convention is OpenGL: green above the midpoint means the normal leans towards the top of the image, and a flat texel is `(128, 128, 255)`. A map authored the other way up lights its vertical detail from the wrong side while its horizontal detail stays correct; declare it as `directx` rather than editing the texture.",
         "`texture` is sampled as numeric data, so it must resolve to `colorSpace: 'none'`; neither `'srgb'` nor `'linear-srgb'` is accepted, since both treat the XYZ channels as colour. Build it as a `DataTexture`, or as an image `Texture` declared `colorSpace: 'none'`, or the constructor throws. The check repeats when a lit draw consumes the map, so a texture reinterpreted after construction fails there rather than shading with a corrupted normal."
       ],
-      "importLine": "import { NormalMap } from '@codexo/exojs-lighting'",
+      "importLine": "import { NormalMap } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/normal-source.json b/site/src/content/api/normal-source.json
index cc6254249..d1782a77c 100644
--- a/site/src/content/api/normal-source.json
+++ b/site/src/content/api/normal-source.json
@@ -4,7 +4,7 @@
   "symbol": "NormalSource",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -22,7 +22,7 @@
         "Where a LitMaterial takes its surface normals from.",
         "An object rather than a name, so a source carries its own parameters and a user can add one: anything that produces a tangent-space normal texture - derived from a height map, from two photographs, from a generator - is a valid source without this package knowing about it."
       ],
-      "importLine": "import { NormalSource } from '@codexo/exojs-lighting'",
+      "importLine": "import { NormalSource } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/normal-surface-drawable.json b/site/src/content/api/normal-surface-drawable.json
index 307b4794f..241d5afa5 100644
--- a/site/src/content/api/normal-surface-drawable.json
+++ b/site/src/content/api/normal-surface-drawable.json
@@ -4,7 +4,7 @@
   "symbol": "NormalSurfaceDrawable",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -22,7 +22,7 @@
         "A drawable whose own texture, frame and layout box say where its normals belong on screen. Core's `Sprite` - and therefore `AnimatedSprite` and `Video`, which extend it - satisfies it as it stands, which is what lets one argument stand in for a quad, a region of a texture and a placement.",
         "The texture is read for its alpha only. The quad a drawable occupies is a rectangle and its silhouette rarely fills one, so the alpha is what says where a surface was actually described."
       ],
-      "importLine": "import { NormalSurfaceDrawable } from '@codexo/exojs-lighting'",
+      "importLine": "import { NormalSurfaceDrawable } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/normal-surface.json b/site/src/content/api/normal-surface.json
index 9c8623a8d..64ccf5a79 100644
--- a/site/src/content/api/normal-surface.json
+++ b/site/src/content/api/normal-surface.json
@@ -4,7 +4,7 @@
   "symbol": "NormalSurface",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A registered drawable and the normals it contributes."
       ],
-      "importLine": "import { NormalSurface } from '@codexo/exojs-lighting'",
+      "importLine": "import { NormalSurface } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-collider-options.json b/site/src/content/api/object-collider-options.json
index dfcea6c3d..1fa6cf960 100644
--- a/site/src/content/api/object-collider-options.json
+++ b/site/src/content/api/object-collider-options.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectColliderOptions",
   "kind": "interface",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for buildObjectLayerColliders."
       ],
-      "importLine": "import { ObjectColliderOptions } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { ObjectColliderOptions } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-collider.json b/site/src/content/api/object-collider.json
index 49a5fcd16..8c0f7f29e 100644
--- a/site/src/content/api/object-collider.json
+++ b/site/src/content/api/object-collider.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectCollider",
   "kind": "interface",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "One static body built from one object, paired with its source."
       ],
-      "importLine": "import { ObjectCollider } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { ObjectCollider } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-kind.json b/site/src/content/api/object-kind.json
index b0113809e..5c7c8be98 100644
--- a/site/src/content/api/object-kind.json
+++ b/site/src/content/api/object-kind.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectKind",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Geometry discriminant for a TileMapObject."
       ],
-      "importLine": "import { ObjectKind } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ObjectKind } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-layer-options.json b/site/src/content/api/object-layer-options.json
index 528bfbc57..8641b0f78 100644
--- a/site/src/content/api/object-layer-options.json
+++ b/site/src/content/api/object-layer-options.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectLayerOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 15,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for an ObjectLayer."
       ],
-      "importLine": "import { ObjectLayerOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ObjectLayerOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-layer.json b/site/src/content/api/object-layer.json
index fbc7f35ee..6f12b83a7 100644
--- a/site/src/content/api/object-layer.json
+++ b/site/src/content/api/object-layer.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectLayer",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 24,
   "counts": {
@@ -23,7 +23,7 @@
         "The presentation fields the source format attaches to a layer - visible, opacity, offsetX/offsetY, parallaxX/parallaxY, parallaxScale, and tintColor - are carried through in full, with any enclosing group layers' contribution already folded in, so an object layer describes the same placement and shading its neighbouring tile and image layers do. Nothing here acts on them: code that draws these objects itself is what applies them.",
         "Query with query (untyped, fully back-compatible) or, when an ObjectSchema type argument `S` is supplied, with the typed accessors byType, byKind, and where - these narrow `properties` to the developer-declared shape. The schema is **opt-in**: the default type parameter reproduces the original untyped behaviour, so `new ObjectLayer(options)` and `map.getObjectLayer('x')` are unchanged."
       ],
-      "importLine": "import { ObjectLayer } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ObjectLayer } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-point.json b/site/src/content/api/object-point.json
index 193f4d041..1d2b3280f 100644
--- a/site/src/content/api/object-point.json
+++ b/site/src/content/api/object-point.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectPoint",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A point in object-layer space (pixels, relative to the object)."
       ],
-      "importLine": "import { ObjectPoint } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ObjectPoint } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-query.json b/site/src/content/api/object-query.json
index 1a4dfc62e..c9cfb6e9e 100644
--- a/site/src/content/api/object-query.json
+++ b/site/src/content/api/object-query.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectQuery",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Filter for ObjectLayer.query. Unspecified fields match everything."
       ],
-      "importLine": "import { ObjectQuery } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ObjectQuery } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/object-schema.json b/site/src/content/api/object-schema.json
index c2ded93e8..fea1cac66 100644
--- a/site/src/content/api/object-schema.json
+++ b/site/src/content/api/object-schema.json
@@ -4,7 +4,7 @@
   "symbol": "ObjectSchema",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A developer-declared mapping from object `type`/class strings to the property shape an object of that type is expected to carry. Supplied as the type parameter to ObjectLayer to unlock the typed accessors (ObjectLayer.byType, ObjectLayer.where)."
       ],
-      "importLine": "import { ObjectSchema } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ObjectSchema } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-collider-shape.json b/site/src/content/api/occluder-collider-shape.json
index f88fbad17..333038df2 100644
--- a/site/src/content/api/occluder-collider-shape.json
+++ b/site/src/content/api/occluder-collider-shape.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderColliderShape",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The local-space geometry an occluder reads off a collider shape. Every field but `type` is present only for the kinds that have it."
       ],
-      "importLine": "import { OccluderColliderShape } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderColliderShape } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-collider-transform.json b/site/src/content/api/occluder-collider-transform.json
index 5bffff2a3..e9cc34ddd 100644
--- a/site/src/content/api/occluder-collider-transform.json
+++ b/site/src/content/api/occluder-collider-transform.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderColliderTransform",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A collider's world placement, as physics stores it: a translation plus the precomputed sine and cosine of its rotation."
       ],
-      "importLine": "import { OccluderColliderTransform } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderColliderTransform } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-collider.json b/site/src/content/api/occluder-collider.json
index e1d7f9efb..c45d1d156 100644
--- a/site/src/content/api/occluder-collider.json
+++ b/site/src/content/api/occluder-collider.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderCollider",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What PhysicsOccluder reads off one collider."
       ],
-      "importLine": "import { OccluderCollider } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderCollider } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-drawable.json b/site/src/content/api/occluder-drawable.json
index 1b288b322..9ae8a2ff6 100644
--- a/site/src/content/api/occluder-drawable.json
+++ b/site/src/content/api/occluder-drawable.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderDrawable",
   "kind": "type",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A scene node offered whole, for a field that can rasterise a silhouette instead of tracing one. What blocks light is the node's own subtree as it draws, thresholded on alpha."
       ],
-      "importLine": "import { OccluderDrawable } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderDrawable } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-mesh.json b/site/src/content/api/occluder-mesh.json
index 6342e8131..660001fda 100644
--- a/site/src/content/api/occluder-mesh.json
+++ b/site/src/content/api/occluder-mesh.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderMesh",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -22,7 +22,7 @@
         "What MeshOccluder reads off a mesh: a flat `(x, y)` vertex stream in local space, its triangle list, and the transform that places it.",
         "Core's `Mesh` satisfies it as it stands. So does a plain object over geometry of your own, which is the point: the outline is derived from triangles, not from a class."
       ],
-      "importLine": "import { OccluderMesh } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderMesh } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-physics-world.json b/site/src/content/api/occluder-physics-world.json
index 79b1b95ce..28293d8c7 100644
--- a/site/src/content/api/occluder-physics-world.json
+++ b/site/src/content/api/occluder-physics-world.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderPhysicsWorld",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -22,7 +22,7 @@
         "What PhysicsOccluder needs of a physics world: an AABB query over its live colliders.",
         "Structural on purpose. `@codexo/exojs-physics` satisfies it as it stands, and this package does not depend on it, so a project without physics pulls none of it in and a project with a collision layer of its own can still feed shadows from it."
       ],
-      "importLine": "import { OccluderPhysicsWorld } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderPhysicsWorld } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-placement.json b/site/src/content/api/occluder-placement.json
index 38e4602ff..3754b921e 100644
--- a/site/src/content/api/occluder-placement.json
+++ b/site/src/content/api/occluder-placement.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderPlacement",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Something whose world transform places an occluder outline. Any scene node satisfies it, which is how an outline authored in a sprite's own pixels follows that sprite around without this package knowing what a sprite is."
       ],
-      "importLine": "import { OccluderPlacement } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderPlacement } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-sink.json b/site/src/content/api/occluder-sink.json
index 30ae9bdca..cb88811b1 100644
--- a/site/src/content/api/occluder-sink.json
+++ b/site/src/content/api/occluder-sink.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderSink",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -22,7 +22,7 @@
         "Where an OccluderSource writes what blocks light.",
         "The main channel is line segments in world space: an occluder has no thickness, no interior and no material, and what a shadow needs to know about a wall is where its edges are. A source whose silhouette is really a picture may offer the drawable itself instead - see addDrawable."
       ],
-      "importLine": "import { OccluderSink } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderSink } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-source.json b/site/src/content/api/occluder-source.json
index a5e1a90a5..81dd81c98 100644
--- a/site/src/content/api/occluder-source.json
+++ b/site/src/content/api/occluder-source.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderSource",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -24,7 +24,7 @@
         "Implement this to feed shadows from anything: a navmesh, a server message, a procedural generator. The stock occluders - PhysicsOccluder, TilemapOccluder, AlphaOccluder, MeshOccluder and PolygonOccluder - are ordinary implementations of the same interface, with no privilege over yours.",
         "```ts lighting.occludeFrom({ collect(bounds, out) { out.addSegment(bounds.left, 0, bounds.right, 0); }, }); ```"
       ],
-      "importLine": "import { OccluderSource } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderSource } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-tile-cell.json b/site/src/content/api/occluder-tile-cell.json
index aebd46314..816c4198f 100644
--- a/site/src/content/api/occluder-tile-cell.json
+++ b/site/src/content/api/occluder-tile-cell.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderTileCell",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "One occupied cell of a tile layer, as TilemapOccluder walks them."
       ],
-      "importLine": "import { OccluderTileCell } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderTileCell } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/occluder-tile-layer.json b/site/src/content/api/occluder-tile-layer.json
index 2bae4463b..69e0b3524 100644
--- a/site/src/content/api/occluder-tile-layer.json
+++ b/site/src/content/api/occluder-tile-layer.json
@@ -4,7 +4,7 @@
   "symbol": "OccluderTileLayer",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -22,7 +22,7 @@
         "What TilemapOccluder needs of a tile layer: its cell metrics, a way to walk the cells of a region, and a revision that changes when the cells do.",
         "Structural on purpose, and generic over whatever a layer calls a tile, so `@codexo/exojs-tilemap`'s `TileLayer` satisfies it as it stands while this package depends on neither it nor physics. Anything else that can answer \"which cells are occupied around here\" works as well."
       ],
-      "importLine": "import { OccluderTileLayer } from '@codexo/exojs-lighting'",
+      "importLine": "import { OccluderTileLayer } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/orbital-force.json b/site/src/content/api/orbital-force.json
index 524aa0f34..6470177f9 100644
--- a/site/src/content/api/orbital-force.json
+++ b/site/src/content/api/orbital-force.json
@@ -4,7 +4,7 @@
   "symbol": "OrbitalForce",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -24,7 +24,7 @@
         "Use cases: galactic spirals, smoke vortices around an attractor, wind eddies. Layer with AttractToPoint for stable orbits.",
         "GPU-eligible."
       ],
-      "importLine": "import { OrbitalForce } from '@codexo/exojs-particles'",
+      "importLine": "import { OrbitalForce } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/packed-tile.json b/site/src/content/api/packed-tile.json
index 7cb11130b..f270733fc 100644
--- a/site/src/content/api/packed-tile.json
+++ b/site/src/content/api/packed-tile.json
@@ -4,7 +4,7 @@
   "symbol": "PackedTile",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "A `PackedTile` is **not** a source-format GID - it is a fully resolved internal compact representation. Use packTile / unpackTile to convert between packed form and a ResolvedTile if writing adapters.",
         "In public APIs, prefer ResolvedTile or null for queries. `PackedTile` is exposed as `@advanced` so `ReadonlyTileChunk.getRawAt()` has a self-documenting return type."
       ],
-      "importLine": "import { PackedTile } from '@codexo/exojs-tilemap'",
+      "importLine": "import { PackedTile } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-batch.json b/site/src/content/api/particle-batch.json
index 217b8b1d7..abf65c37b 100644
--- a/site/src/content/api/particle-batch.json
+++ b/site/src/content/api/particle-batch.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleBatch",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -23,7 +23,7 @@
         "This is the bulk surface an UpdateModule and a ParticleRenderMode operate on. Channels are named for what they mean; how they are packed - one array per component today, something else tomorrow - is the simulation's business and may change. A loop reads the channel it needs once and then indexes plain typed arrays, so naming costs nothing per particle.",
         "Indices `[0, count)` are the range worth visiting. A batch can contain dead slots, so a loop that must not touch them checks isAlive; a purely arithmetic pass over dead slots is harmless and can skip the check."
       ],
-      "importLine": "import { ParticleBatch } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleBatch } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-buffer-layout-options.json b/site/src/content/api/particle-buffer-layout-options.json
index 1ba11ffd3..16d741ea0 100644
--- a/site/src/content/api/particle-buffer-layout-options.json
+++ b/site/src/content/api/particle-buffer-layout-options.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleBufferLayoutOptions",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for ParticleBufferLayout."
       ],
-      "importLine": "import { ParticleBufferLayoutOptions } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleBufferLayoutOptions } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-buffer-layout.json b/site/src/content/api/particle-buffer-layout.json
index 5c57dfdb8..34138ff80 100644
--- a/site/src/content/api/particle-buffer-layout.json
+++ b/site/src/content/api/particle-buffer-layout.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleBufferLayout",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -24,7 +24,7 @@
         "What is checked here is the subset that protects a real GPU binding: a positive stride, at least one attribute, unique names, and ranges that neither overlap each other nor reach past the stride.",
         "A layout is a description rather than a resource: it owns no GPU handle and needs no disposal."
       ],
-      "importLine": "import { ParticleBufferLayout } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleBufferLayout } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-death-context.json b/site/src/content/api/particle-death-context.json
index de16532ac..e3f0d841d 100644
--- a/site/src/content/api/particle-death-context.json
+++ b/site/src/content/api/particle-death-context.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleDeathContext",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -23,7 +23,7 @@
         "A snapshot, not a view: it is copied out of the simulation when the particle dies and stays valid for the whole callback, whichever backend ran the simulation and whether or not the slot has already been reused. It carries no slot index for that reason - there is nothing to read back afterwards.",
         "Every backend captures state after the terminal integration step and all update modules. GPU callbacks arrive asynchronously in submission order; within a batch particles are ordered by slot. Clearing or destroying the system cancels pending callbacks. GPU delivery uses bounded staging and a capacity-sized backlog; overflow drops excess callbacks with a development warning. Use CPU simulation when same-update delivery is required."
       ],
-      "importLine": "import { ParticleDeathContext } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleDeathContext } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-emitter.json b/site/src/content/api/particle-emitter.json
index f9a75d9fe..ec03289fb 100644
--- a/site/src/content/api/particle-emitter.json
+++ b/site/src/content/api/particle-emitter.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleEmitter",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -22,7 +22,7 @@
         "The emitting face of a particle system: the only supported way to bring particles into existence.",
         "Emission is the one per-particle write that is true on every backend, because spawn values always originate on the CPU and are uploaded from there."
       ],
-      "importLine": "import { ParticleEmitter } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleEmitter } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-material.json b/site/src/content/api/particle-material.json
index ac604dc6d..2b827c682 100644
--- a/site/src/content/api/particle-material.json
+++ b/site/src/content/api/particle-material.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleMaterial",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 14,
   "counts": {
@@ -23,7 +23,7 @@
         "`Material`'s constructor is protected, so every material family declares a thin subclass that fixes target and opens construction up - this is the particle counterpart of core's `MeshMaterial` and `SpriteMaterial`.",
         "Particle draws bind their system-level state (transform, local bounds, texture) through the renderer rather than through the material, so this subclass adds no behaviour of its own; it exists to name the contract."
       ],
-      "importLine": "import { ParticleMaterial } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleMaterial } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-module-key-collision-error.json b/site/src/content/api/particle-module-key-collision-error.json
index 280a0a313..3e383e686 100644
--- a/site/src/content/api/particle-module-key-collision-error.json
+++ b/site/src/content/api/particle-module-key-collision-error.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleModuleKeyCollisionError",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -23,7 +23,7 @@
         "A key names exactly one struct and one member of the composite compute shader's uniform block, so two contributions under it cannot be told apart: both bodies would read the same uniforms and only one instance's values would ever reach the device. Give one of them a distinct key, or combine them into a single module.",
         "Only the WebGPU path builds that shader - the CPU path runs each module's `apply()` independently and is unaffected - which is why the same scene used to run on WebGL2 and die with a raw WGSL error on WebGPU."
       ],
-      "importLine": "import { ParticleModuleKeyCollisionError } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleModuleKeyCollisionError } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-render-mode.json b/site/src/content/api/particle-render-mode.json
index e28c58f6f..e9fcfb2d5 100644
--- a/site/src/content/api/particle-render-mode.json
+++ b/site/src/content/api/particle-render-mode.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleRenderMode",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -25,7 +25,7 @@
         "**Limits of the seam.** The executors are deliberately thin, so a new mode has to stay inside what they can express:",
         "- The geometry's `stride` must be a multiple of 4. WebGPU's `queue.writeBuffer` validates its copy size against that alignment and rejects anything else, so a mode with, say, a 38-byte stride draws on WebGL2 and fails validation on WebGPU. - An **indexed, non-instanced** mode always draws the geometry's fixed `indexCount` and ignores count on both backends. That is right for a fixed-topology mode and wrong for one whose element count varies per frame; such a mode needs the executors taught to derive an index count from count first. No mode ships in that shape today. - An **instanced** mode that declares no vertexGeometry has to derive its vertices in the shader from the vertex index, and its dataLayout must carry the indices that address them. Without either there is nothing to tell the executors how many vertices one instance spans."
       ],
-      "importLine": "import { ParticleRenderMode } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleRenderMode } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-rotation-channel.json b/site/src/content/api/particle-rotation-channel.json
index 4a8595341..083cbc941 100644
--- a/site/src/content/api/particle-rotation-channel.json
+++ b/site/src/content/api/particle-rotation-channel.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleRotationChannel",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The rotation channel: current angle and the speed integrated into it each frame."
       ],
-      "importLine": "import { ParticleRotationChannel } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleRotationChannel } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-shader-contribution.json b/site/src/content/api/particle-shader-contribution.json
index 768ea8a20..c5cfd4620 100644
--- a/site/src/content/api/particle-shader-contribution.json
+++ b/site/src/content/api/particle-shader-contribution.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleShaderContribution",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Resource schema shared by explicitly authored WGSL and GLSL implementations."
       ],
-      "importLine": "import { ParticleShaderContribution } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleShaderContribution } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-spawn-fields.json b/site/src/content/api/particle-spawn-fields.json
index edd67ea0d..68b70ed9b 100644
--- a/site/src/content/api/particle-spawn-fields.json
+++ b/site/src/content/api/particle-spawn-fields.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleSpawnFields",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -22,7 +22,7 @@
         "Per-property spawn configuration shared by the built-in spawners.",
         "Every entry is a Distribution sampled once per emitted particle. Omitting an entry leaves that property at its spawn default: origin, no velocity, unit scale, no rotation, opaque white, frame 0, one second of life."
       ],
-      "importLine": "import { ParticleSpawnFields } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleSpawnFields } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-system-options.json b/site/src/content/api/particle-system-options.json
index 0e534dbec..0a70c71dd 100644
--- a/site/src/content/api/particle-system-options.json
+++ b/site/src/content/api/particle-system-options.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleSystemOptions",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for ParticleSystem's constructor - orthogonal config that's independent of the texture source. Texture / frames / spritesheet live in positional arguments to enforce mutual exclusivity at the type level (you can't pass both a texture and a spritesheet by accident)."
       ],
-      "importLine": "import { ParticleSystemOptions } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleSystemOptions } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-system.json b/site/src/content/api/particle-system.json
index fa816aeaf..cc445e1ae 100644
--- a/site/src/content/api/particle-system.json
+++ b/site/src/content/api/particle-system.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleSystem",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 120,
   "counts": {
@@ -26,7 +26,7 @@
         "**Per-frame order in update (CPU mode):** 1. Run every spawn module. 2. Integrate position from velocity, rotation from rotationSpeed, advance `elapsed`. 3. Run every update module on the live range. 4. Compact: scan `[0, liveCount)` forward, fire death modules on expired slots, copy survivors down. `liveCount` shrinks to the survivor count.",
         "**GPU update order:** spawn and upload initial values, advance CPU expiry clocks, mark terminal slots, then integrate and apply modules on the GPU. Terminal snapshots include that step's module results. Death callbacks are asynchronous and bounded; see ParticleDeathContext. Clearing or destroying the system cancels pending callbacks."
       ],
-      "importLine": "import { ParticleSystem } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleSystem } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-texture-binding.json b/site/src/content/api/particle-texture-binding.json
index ae375730e..e759533e3 100644
--- a/site/src/content/api/particle-texture-binding.json
+++ b/site/src/content/api/particle-texture-binding.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleTextureBinding",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A 256-sample lookup table. Float curves contain 256 values; RGBA tables contain 1024 bytes."
       ],
-      "importLine": "import { ParticleTextureBinding } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleTextureBinding } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-timing-channel.json b/site/src/content/api/particle-timing-channel.json
index ab02a85c6..bebaec5bd 100644
--- a/site/src/content/api/particle-timing-channel.json
+++ b/site/src/content/api/particle-timing-channel.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleTimingChannel",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The timing channel: seconds since spawn, and total seconds before expiry."
       ],
-      "importLine": "import { ParticleTimingChannel } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleTimingChannel } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-uniform-field.json b/site/src/content/api/particle-uniform-field.json
index e6d040a23..629484284 100644
--- a/site/src/content/api/particle-uniform-field.json
+++ b/site/src/content/api/particle-uniform-field.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleUniformField",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Ordered fields written by `UpdateModule.writeUniforms`. Scalars align to 4 bytes, vec2 to 8 and vec4 to 16."
       ],
-      "importLine": "import { ParticleUniformField } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleUniformField } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-uniform-primitive.json b/site/src/content/api/particle-uniform-primitive.json
index ef461dbd8..5f88dd2f8 100644
--- a/site/src/content/api/particle-uniform-primitive.json
+++ b/site/src/content/api/particle-uniform-primitive.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleUniformPrimitive",
   "kind": "type",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Scalar/vector wire types shared by shader backends. Names retain WGSL spelling; GLSL maps them to its corresponding types."
       ],
-      "importLine": "import { ParticleUniformPrimitive } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleUniformPrimitive } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-vector-channel.json b/site/src/content/api/particle-vector-channel.json
index dcc549bd1..d9eb80e23 100644
--- a/site/src/content/api/particle-vector-channel.json
+++ b/site/src/content/api/particle-vector-channel.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleVectorChannel",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -22,7 +22,7 @@
         "A two-component particle channel, one array per component.",
         "The arrays are the simulation's own storage rather than a copy: writing `position.x[i]` moves particle `i`. Their length is the system's capacity, so only indices below ParticleBatch.count carry meaning."
       ],
-      "importLine": "import { ParticleVectorChannel } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleVectorChannel } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-vector-writer.json b/site/src/content/api/particle-vector-writer.json
index a85c2cc3d..e654b7092 100644
--- a/site/src/content/api/particle-vector-writer.json
+++ b/site/src/content/api/particle-vector-writer.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleVectorWriter",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Writable two-component channel of a single particle."
       ],
-      "importLine": "import { ParticleVectorWriter } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleVectorWriter } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particle-writer.json b/site/src/content/api/particle-writer.json
index fd2af298b..0927e3001 100644
--- a/site/src/content/api/particle-writer.json
+++ b/site/src/content/api/particle-writer.json
@@ -4,7 +4,7 @@
   "symbol": "ParticleWriter",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -23,7 +23,7 @@
         "Every field starts at its default - zero position, velocity, rotation and rotation speed, unit scale, opaque white, frame 0, lifetime 1 - so a spawner writes only what it varies.",
         "The writer is a cursor onto the emitting system, not a particle object: it is reused by the next ParticleEmitter.emit call and must not be kept. Read what you need before emitting again."
       ],
-      "importLine": "import { ParticleWriter } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticleWriter } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particles-build-info.json b/site/src/content/api/particles-build-info.json
index 3ff399f1c..6f151ea39 100644
--- a/site/src/content/api/particles-build-info.json
+++ b/site/src/content/api/particles-build-info.json
@@ -4,7 +4,7 @@
   "symbol": "ParticlesBuildInfo",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -22,7 +22,7 @@
         "Immutable compile-time build metadata for `@codexo/exojs-particles`.",
         "`development` mirrors the `__DEV__` compile-time constant and is statically replaced before tree shaking. `version` is the exact `package.json` version of the Particles package at build time. `revision` is the short source-control revision (appended with `-dirty` when uncommitted changes are present) or `\"unknown\"` when no revision information is available."
       ],
-      "importLine": "import { ParticlesBuildInfo } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticlesBuildInfo } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particles-extension-options.json b/site/src/content/api/particles-extension-options.json
index a181535f6..aa07521bc 100644
--- a/site/src/content/api/particles-extension-options.json
+++ b/site/src/content/api/particles-extension-options.json
@@ -4,7 +4,7 @@
   "symbol": "ParticlesExtensionOptions",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for createParticlesExtension."
       ],
-      "importLine": "import { ParticlesExtensionOptions } from '@codexo/exojs-particles'",
+      "importLine": "import { ParticlesExtensionOptions } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/particles-functions.json b/site/src/content/api/particles-functions.json
index 4297cd20f..68e3552da 100644
--- a/site/src/content/api/particles-functions.json
+++ b/site/src/content/api/particles-functions.json
@@ -1,10 +1,10 @@
 {
   "title": "Particles Functions",
-  "description": "Free functions and constants exported from @codexo/exojs-particles.",
+  "description": "Free functions and constants exported from @codexo/exojs/particles.",
   "symbol": "Particles Functions",
   "kind": "namespace",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Overview",
       "members": [],
       "paragraphs": [
-        "Free functions and constants exported from @codexo/exojs-particles. Import any of them directly, for example `import { createParticlesExtension } from '@codexo/exojs-particles'`."
+        "Free functions and constants exported from @codexo/exojs/particles. Import any of them directly, for example `import { createParticlesExtension } from '@codexo/exojs/particles'`."
       ],
       "importLine": null,
       "sourceLink": null
diff --git a/site/src/content/api/path-edge.json b/site/src/content/api/path-edge.json
index 5e1cb2eee..6ffed4aa4 100644
--- a/site/src/content/api/path-edge.json
+++ b/site/src/content/api/path-edge.json
@@ -4,7 +4,7 @@
   "symbol": "PathEdge",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -22,7 +22,7 @@
         "One traversal step of a path, as described by the space it came from.",
         "Spaces that model traversal kinds - WaypointGraph is the one in this package - report them here, so a movement controller can react to a `'jump'` step differently than to a `'walk'` step. Grid spaces describe no edges."
       ],
-      "importLine": "import { PathEdge } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { PathEdge } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/path-result.json b/site/src/content/api/path-result.json
index 2879f903e..9612623da 100644
--- a/site/src/content/api/path-result.json
+++ b/site/src/content/api/path-result.json
@@ -4,7 +4,7 @@
   "symbol": "PathResult",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Result of Pathfinder.findPath and Pathfinder.findPathBetween."
       ],
-      "importLine": "import { PathResult } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { PathResult } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/path-status.json b/site/src/content/api/path-status.json
index 6f49c9b66..b75024f7a 100644
--- a/site/src/content/api/path-status.json
+++ b/site/src/content/api/path-status.json
@@ -4,7 +4,7 @@
   "symbol": "PathStatus",
   "kind": "type",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "Outcome of a path query.",
         "- `found` - a complete path from start to goal (or, with `snapToNearest`, to the reachable node closest to the goal). - `unreachable` - the search exhausted the space without reaching the goal. - `budget-exceeded` - `maxExpandedNodes` ran out first. The result still carries the best partial path found so far."
       ],
-      "importLine": "import { PathStatus } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { PathStatus } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/pathfinder.json b/site/src/content/api/pathfinder.json
index 0069c3bb9..4a3027c2c 100644
--- a/site/src/content/api/pathfinder.json
+++ b/site/src/content/api/pathfinder.json
@@ -4,7 +4,7 @@
   "symbol": "Pathfinder",
   "kind": "class",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -23,7 +23,7 @@
         "One pathfinder owns the search buffers and reuses them across every query, including queries against different spaces of different sizes, so a search itself allocates nothing once the buffers have reached their size. The result objects are freshly allocated by design: callers hold on to a path, and pooling something a caller retains trades a little garbage for use-after-reuse bugs.",
         "A pathfinder holds no world state and no lifecycle - construct one per system that needs paths, or share one, as long as queries do not interleave with a mutation of the space being searched."
       ],
-      "importLine": "import { Pathfinder } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { Pathfinder } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/pcm-stream-source-options.json b/site/src/content/api/pcm-stream-source-options.json
index 0081c11c5..1ee3bb66a 100644
--- a/site/src/content/api/pcm-stream-source-options.json
+++ b/site/src/content/api/pcm-stream-source-options.json
@@ -4,7 +4,7 @@
   "symbol": "PcmStreamSourceOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { PcmStreamSourceOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PcmStreamSourceOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/pcm-stream-source.json b/site/src/content/api/pcm-stream-source.json
index 2508fc1b0..141442633 100644
--- a/site/src/content/api/pcm-stream-source.json
+++ b/site/src/content/api/pcm-stream-source.json
@@ -4,7 +4,7 @@
   "symbol": "PcmStreamSource",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 26,
   "counts": {
@@ -24,7 +24,7 @@
         "Input arrays are copied synchronously and never detached. The private copy is transferred without requiring cross-origin isolation. Values must be finite; nominal full scale is -1..1, with no clipping or normalization here. Resampling, producer timestamps and audiovisual lookahead belong to callers.",
         "Own and destroy the source separately from its bus, for example with a scene DestroyScope. Destroying an AudioSystem or bus does not destroy this source."
       ],
-      "importLine": "import { PcmStreamSource } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PcmStreamSource } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/pcm-stream-state.json b/site/src/content/api/pcm-stream-state.json
index 85d84fc47..b42ce9095 100644
--- a/site/src/content/api/pcm-stream-state.json
+++ b/site/src/content/api/pcm-stream-state.json
@@ -4,7 +4,7 @@
   "symbol": "PcmStreamState",
   "kind": "type",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { PcmStreamState } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PcmStreamState } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/phaser-effect-options.json b/site/src/content/api/phaser-effect-options.json
index d2819096b..b51799902 100644
--- a/site/src/content/api/phaser-effect-options.json
+++ b/site/src/content/api/phaser-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "PhaserEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for PhaserEffect."
       ],
-      "importLine": "import { PhaserEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PhaserEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/phaser-effect.json b/site/src/content/api/phaser-effect.json
index e607d8729..ca3abc38f 100644
--- a/site/src/content/api/phaser-effect.json
+++ b/site/src/content/api/phaser-effect.json
@@ -4,7 +4,7 @@
   "symbol": "PhaserEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -24,7 +24,7 @@
         "Node graph: ``` inputGain ┬── dryGain ───────────────────────────────────────┐ │ ├── outputGain └── allpass[0] ─► ... ─► allpass[N-1] ── wetGain ───┘ ▲ │ └── feedbackDelay ◄── feedbackGain ◄─────────┘",
         "lfoOscillator ── lfoGain (depth × baseFrequency Hz) ──► each allpass.frequency ``` Note: `feedbackDelay` is a DelayNode with `delayTime = 0`. Even at zero delay the node itself breaks the zero-latency cycle, which spec-compliant browsers (Chrome, Edge, Safari) would otherwise mute entirely. Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`; `feedbackGain.gain = feedback`; `lfoGain.gain = depth × baseFrequency`."
       ],
-      "importLine": "import { PhaserEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PhaserEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-binding.json b/site/src/content/api/physics-binding.json
index 5c823acd9..126c4cf90 100644
--- a/site/src/content/api/physics-binding.json
+++ b/site/src/content/api/physics-binding.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsBinding",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -23,7 +23,7 @@
         "The two angles have opposite signs: a body angle turns clockwise on the Y-down screen, a `SceneNode.rotation` counter-clockwise, so a body at `+30°` (in radians) shows as a node rotation of `-30°`.",
         "By default the node snaps to the latest fixed-step state after each step. With `PhysicsWorld`'s interpolation enabled the node is instead placed between the body's previous and current fixed states, which smooths motion when the fixed rate is below the frame rate. Either way this is presentation: nothing written onto the node is read back into the simulation."
       ],
-      "importLine": "import { PhysicsBinding } from '@codexo/exojs-physics'",
+      "importLine": "import { PhysicsBinding } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-body-component.json b/site/src/content/api/physics-body-component.json
index 6a95b8fb5..9e2a2ec04 100644
--- a/site/src/content/api/physics-body-component.json
+++ b/site/src/content/api/physics-body-component.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsBodyComponent",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 16,
   "counts": {
@@ -23,7 +23,7 @@
         "The body exists from construction, so body can be configured before the node enters a scene. Unless `options.position` or `options.angle` is given, the first activation places the body at the node's current world position or rotation. The node must be world-space-rooted, as for PhysicsWorld.bind; the body keeps writing world coordinates to the node, so moving it under a transformed parent is not corrected.",
         "The world is never inferred: a node moved into a scene that steps another world keeps this component's body in the world it was given. A component-managed body cannot be constrained by a joint, and PhysicsWorld.addJoint rejects it; use a manually managed PhysicsBody for jointed bodies."
       ],
-      "importLine": "import { PhysicsBodyComponent } from '@codexo/exojs-physics'",
+      "importLine": "import { PhysicsBodyComponent } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-body.json b/site/src/content/api/physics-body.json
index 18f519ede..bc6625a3c 100644
--- a/site/src/content/api/physics-body.json
+++ b/site/src/content/api/physics-body.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsBody",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 40,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A rigid body: a world transform plus mass properties aggregated from its colliders. Dynamic bodies integrate under gravity, accumulated forces/torque and contact impulses each fixed sub-step; static bodies never move; kinematic bodies move by their velocity only and stay immovable under contacts. Drive a body with applyForce, applyTorque and applyImpulse, or set linearVelocityX/linearVelocityY/angularVelocity directly; reposition it (teleport, no velocity) with setTransform. The force, torque, impulse and transform methods wake a sleeping body; the velocity fields are plain fields and do not, so call wake before steering a body that may have fallen asleep by writing its velocity."
       ],
-      "importLine": "import { PhysicsBody } from '@codexo/exojs-physics'",
+      "importLine": "import { PhysicsBody } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-build-info.json b/site/src/content/api/physics-build-info.json
index 97182920d..d15b6ea3d 100644
--- a/site/src/content/api/physics-build-info.json
+++ b/site/src/content/api/physics-build-info.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsBuildInfo",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -22,7 +22,7 @@
         "Immutable compile-time build metadata for `@codexo/exojs-physics`.",
         "`development` mirrors the `__DEV__` compile-time constant and is statically replaced before tree shaking. `version` is the exact `package.json` version of the Physics package at build time. `revision` is the short source-control revision (appended with `-dirty` when uncommitted changes are present) or `\"unknown\"` when no revision information is available."
       ],
-      "importLine": "import { PhysicsBuildInfo } from '@codexo/exojs-physics'",
+      "importLine": "import { PhysicsBuildInfo } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-debug-draw-options.json b/site/src/content/api/physics-debug-draw-options.json
new file mode 100644
index 000000000..05da94245
--- /dev/null
+++ b/site/src/content/api/physics-debug-draw-options.json
@@ -0,0 +1,250 @@
+{
+  "title": "PhysicsDebugDrawOptions",
+  "description": "Toggles for the physics debug overlay.",
+  "symbol": "PhysicsDebugDrawOptions",
+  "kind": "interface",
+  "subsystem": "debug",
+  "importPath": "@codexo/exojs/debug",
+  "tier": "stable",
+  "memberCount": 8,
+  "counts": {
+    "constructors": 0,
+    "methods": 0,
+    "properties": 8,
+    "events": 0
+  },
+  "sections": [
+    {
+      "id": "import",
+      "title": "Import",
+      "members": [],
+      "paragraphs": [
+        "Toggles for the physics debug overlay."
+      ],
+      "importLine": "import { PhysicsDebugDrawOptions } from '@codexo/exojs/debug'",
+      "sourceLink": null
+    },
+    {
+      "id": "properties",
+      "title": "Properties",
+      "members": [
+        {
+          "name": "drawAabb",
+          "signature": "drawAabb?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawAabb",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "World AABBs of the geometry the broad phase holds - a chain as its per-edge leaves. Default false."
+        },
+        {
+          "name": "drawBroadphase",
+          "signature": "drawBroadphase?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawBroadphase",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Broad-phase candidate links between AABB-overlapping leaves - a chain links per edge. Default false."
+        },
+        {
+          "name": "drawCenters",
+          "signature": "drawCenters?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawCenters",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Body origins (centre markers). Default false."
+        },
+        {
+          "name": "drawContacts",
+          "signature": "drawContacts?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawContacts",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Contact points. Default false."
+        },
+        {
+          "name": "drawJoints",
+          "signature": "drawJoints?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawJoints",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Lines connecting the bodies of each joint. Default false."
+        },
+        {
+          "name": "drawNormals",
+          "signature": "drawNormals?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawNormals",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Contact normals. Default false."
+        },
+        {
+          "name": "drawShapes",
+          "signature": "drawShapes?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawShapes",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Collider shape outlines, coloured by body type. Default true."
+        },
+        {
+          "name": "drawSleeping",
+          "signature": "drawSleeping?: boolean",
+          "signatureTokens": [
+            {
+              "text": "drawSleeping",
+              "kind": "name"
+            },
+            {
+              "text": "?",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Tint sleeping bodies distinctly (applies to the shape outline). Default false."
+        }
+      ],
+      "paragraphs": [],
+      "importLine": null,
+      "sourceLink": null
+    },
+    {
+      "id": "source",
+      "title": "Source",
+      "members": [],
+      "paragraphs": [],
+      "importLine": null,
+      "sourceLink": {
+        "label": "packages/exojs-physics/src/debug/PhysicsDebugDraw.ts",
+        "href": "https://github.com/Exoridus/ExoJS/blob/main/packages/exojs-physics/src/debug/PhysicsDebugDraw.ts"
+      }
+    }
+  ],
+  "sourcePath": "packages/exojs-physics/src/debug/PhysicsDebugDraw.ts",
+  "sourceUrl": "https://github.com/Exoridus/ExoJS/blob/main/packages/exojs-physics/src/debug/PhysicsDebugDraw.ts"
+}
diff --git a/site/src/content/api/physics-debug-draw.json b/site/src/content/api/physics-debug-draw.json
new file mode 100644
index 000000000..0cca00cd4
--- /dev/null
+++ b/site/src/content/api/physics-debug-draw.json
@@ -0,0 +1,337 @@
+{
+  "title": "PhysicsDebugDraw",
+  "description": "`DebugLayer` that visualises a PhysicsWorld - shapes, AABBs, contacts, normals, centres and broad-phase links. It reads the world's public state and recomputes contacts/broad-phase locally only while visible, so it never perturbs the simulation and works over any backend. Lives in the `./debug` subpath so it tree-shakes out of production bundles.",
+  "symbol": "PhysicsDebugDraw",
+  "kind": "class",
+  "subsystem": "debug",
+  "importPath": "@codexo/exojs/debug",
+  "tier": "stable",
+  "memberCount": 7,
+  "counts": {
+    "constructors": 1,
+    "methods": 3,
+    "properties": 3,
+    "events": 0
+  },
+  "sections": [
+    {
+      "id": "import",
+      "title": "Import",
+      "members": [],
+      "paragraphs": [
+        "`DebugLayer` that visualises a PhysicsWorld - shapes, AABBs, contacts, normals, centres and broad-phase links. It reads the world's public state and recomputes contacts/broad-phase locally only while visible, so it never perturbs the simulation and works over any backend. Lives in the `./debug` subpath so it tree-shakes out of production bundles."
+      ],
+      "importLine": "import { PhysicsDebugDraw } from '@codexo/exojs/debug'",
+      "sourceLink": null
+    },
+    {
+      "id": "constructors",
+      "title": "Constructors",
+      "members": [
+        {
+          "name": "new",
+          "signature": "new(app: Application, world: PhysicsWorld, options: PhysicsDebugDrawOptions): PhysicsDebugDraw",
+          "signatureTokens": [
+            {
+              "text": "new",
+              "kind": "keyword"
+            },
+            {
+              "text": "(",
+              "kind": "punctuation"
+            },
+            {
+              "text": "app",
+              "kind": "param"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "Application",
+              "kind": "type"
+            },
+            {
+              "text": ", ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "world",
+              "kind": "param"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "PhysicsWorld",
+              "kind": "type"
+            },
+            {
+              "text": ", ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "options",
+              "kind": "param"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "PhysicsDebugDrawOptions",
+              "kind": "type"
+            },
+            {
+              "text": ")",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "PhysicsDebugDraw",
+              "kind": "type"
+            }
+          ],
+          "params": [
+            {
+              "name": "app",
+              "type": "Application",
+              "optional": false
+            },
+            {
+              "name": "world",
+              "type": "PhysicsWorld",
+              "optional": false
+            },
+            {
+              "name": "options",
+              "type": "PhysicsDebugDrawOptions",
+              "optional": false
+            }
+          ],
+          "returnType": "PhysicsDebugDraw",
+          "description": ""
+        }
+      ],
+      "paragraphs": [],
+      "importLine": null,
+      "sourceLink": null
+    },
+    {
+      "id": "methods",
+      "title": "Methods",
+      "members": [
+        {
+          "name": "destroy",
+          "signature": "destroy(): void",
+          "signatureTokens": [
+            {
+              "text": "destroy",
+              "kind": "name"
+            },
+            {
+              "text": "(",
+              "kind": "punctuation"
+            },
+            {
+              "text": ")",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "void",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": "void",
+          "description": "Release any scene-graph nodes or resources owned by this layer. Called by DebugOverlay.destroy. The base implementation is a no-op; subclasses override to tear down their Container subtrees."
+        },
+        {
+          "name": "render",
+          "signature": "render(backend: RenderBackend): void",
+          "signatureTokens": [
+            {
+              "text": "render",
+              "kind": "name"
+            },
+            {
+              "text": "(",
+              "kind": "punctuation"
+            },
+            {
+              "text": "backend",
+              "kind": "param"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "RenderBackend",
+              "kind": "type"
+            },
+            {
+              "text": ")",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "void",
+              "kind": "keyword"
+            }
+          ],
+          "params": [
+            {
+              "name": "backend",
+              "type": "RenderBackend",
+              "optional": false
+            }
+          ],
+          "returnType": "void",
+          "description": "Render the layer's content using the backend. The DebugOverlay manages the active view based on this layer's viewMode; restore is handled by the overlay. Called only when visible."
+        },
+        {
+          "name": "update",
+          "signature": "update(): void",
+          "signatureTokens": [
+            {
+              "text": "update",
+              "kind": "name"
+            },
+            {
+              "text": "(",
+              "kind": "punctuation"
+            },
+            {
+              "text": ")",
+              "kind": "punctuation"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "void",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": "void",
+          "description": "Update internal state from this frame's data. Called only when visible."
+        }
+      ],
+      "paragraphs": [],
+      "importLine": null,
+      "sourceLink": null
+    },
+    {
+      "id": "properties",
+      "title": "Properties",
+      "members": [
+        {
+          "name": "options",
+          "signature": "options: Required<PhysicsDebugDrawOptions>",
+          "signatureTokens": [
+            {
+              "text": "options",
+              "kind": "name"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "Required",
+              "kind": "type"
+            },
+            {
+              "text": "<",
+              "kind": "punctuation"
+            },
+            {
+              "text": "PhysicsDebugDrawOptions",
+              "kind": "type"
+            },
+            {
+              "text": ">",
+              "kind": "punctuation"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Mutable option flags (read each frame)."
+        },
+        {
+          "name": "visible",
+          "signature": "visible: boolean",
+          "signatureTokens": [
+            {
+              "text": "visible",
+              "kind": "name"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "boolean",
+              "kind": "keyword"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": ""
+        },
+        {
+          "name": "viewMode",
+          "signature": "viewMode: DebugLayerViewMode",
+          "signatureTokens": [
+            {
+              "text": "viewMode",
+              "kind": "name"
+            },
+            {
+              "text": ": ",
+              "kind": "punctuation"
+            },
+            {
+              "text": "DebugLayerViewMode",
+              "kind": "type"
+            }
+          ],
+          "params": [],
+          "returnType": null,
+          "description": "Whether this layer renders in the scene's world-space view or in a screen-space (canvas-pixel) view. Defaults to 'screen'. Subclasses override to return 'world' when rendering at actual scene positions."
+        }
+      ],
+      "paragraphs": [],
+      "importLine": null,
+      "sourceLink": null
+    },
+    {
+      "id": "source",
+      "title": "Source",
+      "members": [],
+      "paragraphs": [],
+      "importLine": null,
+      "sourceLink": {
+        "label": "packages/exojs-physics/src/debug/PhysicsDebugDraw.ts",
+        "href": "https://github.com/Exoridus/ExoJS/blob/main/packages/exojs-physics/src/debug/PhysicsDebugDraw.ts"
+      }
+    }
+  ],
+  "sourcePath": "packages/exojs-physics/src/debug/PhysicsDebugDraw.ts",
+  "sourceUrl": "https://github.com/Exoridus/ExoJS/blob/main/packages/exojs-physics/src/debug/PhysicsDebugDraw.ts"
+}
diff --git a/site/src/content/api/physics-functions.json b/site/src/content/api/physics-functions.json
index 43fa0ef3e..81f5e5afb 100644
--- a/site/src/content/api/physics-functions.json
+++ b/site/src/content/api/physics-functions.json
@@ -1,10 +1,10 @@
 {
   "title": "Physics Functions",
-  "description": "Free functions and constants exported from @codexo/exojs-physics.",
+  "description": "Free functions and constants exported from @codexo/exojs/physics.",
   "symbol": "Physics Functions",
   "kind": "namespace",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Overview",
       "members": [],
       "paragraphs": [
-        "Free functions and constants exported from @codexo/exojs-physics. Import any of them directly, for example `import { shouldCollide } from '@codexo/exojs-physics'`."
+        "Free functions and constants exported from @codexo/exojs/physics. Import any of them directly, for example `import { shouldCollide } from '@codexo/exojs/physics'`."
       ],
       "importLine": null,
       "sourceLink": null
diff --git a/site/src/content/api/physics-occluder-options.json b/site/src/content/api/physics-occluder-options.json
index 98acb984b..c11f07619 100644
--- a/site/src/content/api/physics-occluder-options.json
+++ b/site/src/content/api/physics-occluder-options.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsOccluderOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Tuning for PhysicsOccluder."
       ],
-      "importLine": "import { PhysicsOccluderOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { PhysicsOccluderOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-occluder.json b/site/src/content/api/physics-occluder.json
index 95e021f36..6cc289b85 100644
--- a/site/src/content/api/physics-occluder.json
+++ b/site/src/content/api/physics-occluder.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsOccluder",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -24,7 +24,7 @@
         "Static colliders only by default, and never sensors. The world is queried per frame for the region the lights reach, so a body that moves casts a shadow that moves with it, at the cost of rebuilding the field.",
         "Circles and capsules are approximated by their outline; polygons, segments and chains are exact."
       ],
-      "importLine": "import { PhysicsOccluder } from '@codexo/exojs-lighting'",
+      "importLine": "import { PhysicsOccluder } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-world-options.json b/site/src/content/api/physics-world-options.json
index 6e1d05bc7..351ed1368 100644
--- a/site/src/content/api/physics-world-options.json
+++ b/site/src/content/api/physics-world-options.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsWorldOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a PhysicsWorld."
       ],
-      "importLine": "import { PhysicsWorldOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { PhysicsWorldOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/physics-world.json b/site/src/content/api/physics-world.json
index 45c1748c4..a952dd658 100644
--- a/site/src/content/api/physics-world.json
+++ b/site/src/content/api/physics-world.json
@@ -4,7 +4,7 @@
   "symbol": "PhysicsWorld",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 41,
   "counts": {
@@ -23,7 +23,7 @@
         "The dynamics are a native, warm-started **TGS-Soft** solver (Box2D-v3 \"soft step\"): each fixed step runs detection once, then several sub-steps, each integrating gravity over the sub-step and solving contacts with a soft position bias plus a bias-free relax pass; a 2-point block normal solve propagates stack loads, and restitution is a separate final pass. Decoupling stiffness from the iteration count keeps tall towers stable. The detection backend sits behind an internal seam, so the solver is swappable without touching this public surface.",
         "**Operating envelope.** The soft solver trades a little accuracy for robustness, so it has a few documented limits - each stays finite and stable, and each is pinned by a gate in `dynamics.test.ts` or `contact-push-out.test.ts`: - **Resting contacts** settle within a small, fixed tolerance. A face contact settles at exactly that tolerance; a single-point contact settles slightly deeper, and that gap grows with acceleration. Very high accelerations eventually exceed what the push-out can resolve within a step, at which point the contact holds a slightly deeper resting depth instead of the tolerance - keep gravity in the range ordinary 2D games use. - **Mass ratio** - contacts between bodies of very different mass degrade gradually rather than at a fixed ratio. What sets the practical limit is how thick the supporting geometry is relative to the lighter body, not the ratio alone: a light body squeezed against a boundary thinner than itself is the case that fails first, and it fails by sinking through. - **Scale-relative behaviour** - the solver's tolerances are absolute lengths, so a very small shape sees them as a large fraction of itself, and a very large one as a negligible one. Keep the shapes of one world within a couple of orders of magnitude of each other. - **CCD is opt-in and translation-only** - detection runs once per fixed step, so an ordinary body that crosses more than roughly half a barrier's total thickness within one step may end up on the wrong side of it, either passing through or being resolved out of the far face. Flag fast projectiles with PhysicsBody.isBullet: each of the body's colliders is then shape-cast along the step's motion (an exact translation-only sweep of the full shape, not just the centre) and clamped at the first impact. Rotation over the step is not swept - a long body spinning fast enough to sweep past an obstacle within one step can still miss it. - **PhysicsWorldOptions.subStepCount** - the default `4` is load-bearing for tall-stack stability; lowering it below `2` visibly degrades stacking, so do not reduce it for performance. - **Broad phase is a dynamic AABB tree** (`AabbTreeBroadPhase`), stateful across fixed steps: a collider whose tight AABB stays inside its stored fat AABB costs nothing to re-sync, and only colliders that actually move outside their margin trigger a tree update and a local re-query for new neighbours. Detection still walks every live collider once per step (a cheap containment check for each), so there is a small linear floor, but the dominant cost - reinsertion and neighbour discovery - is driven by how much actually moved, not by the total live collider count; sleeping bodies skip that dominant cost entirely. Scales to tens of thousands of simultaneously-live colliders, including dense clusters that would degrade a sort-and-sweep broad phase; very large or highly dynamic worlds may still benefit from splitting into several smaller `PhysicsWorld` instances (e.g. per room/chunk)."
       ],
-      "importLine": "import { PhysicsWorld } from '@codexo/exojs-physics'",
+      "importLine": "import { PhysicsWorld } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ping-pong-delay-effect-options.json b/site/src/content/api/ping-pong-delay-effect-options.json
index afd0744d5..909e9060f 100644
--- a/site/src/content/api/ping-pong-delay-effect-options.json
+++ b/site/src/content/api/ping-pong-delay-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "PingPongDelayEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for PingPongDelayEffect."
       ],
-      "importLine": "import { PingPongDelayEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PingPongDelayEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ping-pong-delay-effect.json b/site/src/content/api/ping-pong-delay-effect.json
index f8433d4a3..bef3e87b1 100644
--- a/site/src/content/api/ping-pong-delay-effect.json
+++ b/site/src/content/api/ping-pong-delay-effect.json
@@ -4,7 +4,7 @@
   "symbol": "PingPongDelayEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -22,7 +22,7 @@
         "Stereo ping-pong delay effect using two cross-fed DelayNodes that bounce the signal alternately between left and right channels. The input feeds only the left delay; cross-feedback (L→R and R→L) then causes the signal to alternate channels on every tap, producing the characteristic L↔R slapback cascade. Each tap is routed through a StereoPannerNode panned hard left or right, maintaining hard-left / hard-right stereo separation throughout the feedback tail.",
         "Node graph: ``` input(GainNode) → dryGain ────────────────────────────────── output(GainNode) input → delayL → feedbackGainA → delayR ↑ delayR → feedbackGainB → delayL │ delayL → pannerL (pan = -1, hard left) → wetGain ─────────┘ delayR → pannerR (pan = +1, hard right) → wetGain ``` Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`."
       ],
-      "importLine": "import { PingPongDelayEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PingPongDelayEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/pitch-shift-effect-options.json b/site/src/content/api/pitch-shift-effect-options.json
index 175a084d9..d650145d3 100644
--- a/site/src/content/api/pitch-shift-effect-options.json
+++ b/site/src/content/api/pitch-shift-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "PitchShiftEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { PitchShiftEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PitchShiftEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/pitch-shift-effect.json b/site/src/content/api/pitch-shift-effect.json
index ebf3c13ed..0e4032ac4 100644
--- a/site/src/content/api/pitch-shift-effect.json
+++ b/site/src/content/api/pitch-shift-effect.json
@@ -4,7 +4,7 @@
   "symbol": "PitchShiftEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -24,7 +24,7 @@
         "Latency: ~one frame + search ≈ 30ms at the default 1024-sample grain (at 48kHz). Not suitable for live monitoring; fine for games / playback.",
         "Use cases: - Sound variation: random ±200 cent pitch on each footstep / bullet - Voice effects: chipmunk (1.5x) or demon (0.7x) for game NPCs - Detune layering: stack 0.99x and 1.01x for thick chorused sound"
       ],
-      "importLine": "import { PitchShiftEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { PitchShiftEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/point-light-options.json b/site/src/content/api/point-light-options.json
index 4e0a7919b..15d6719af 100644
--- a/site/src/content/api/point-light-options.json
+++ b/site/src/content/api/point-light-options.json
@@ -4,7 +4,7 @@
   "symbol": "PointLightOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for PointLight. Every field is also mutable afterwards."
       ],
-      "importLine": "import { PointLightOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { PointLightOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/point-light.json b/site/src/content/api/point-light.json
index da6a6e65c..90af8b3c0 100644
--- a/site/src/content/api/point-light.json
+++ b/site/src/content/api/point-light.json
@@ -4,7 +4,7 @@
   "symbol": "PointLight",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 93,
   "counts": {
@@ -22,7 +22,7 @@
         "A point light: equal in every direction, falling off quadratically to nothing at radius.",
         "```ts player.addChild(new PointLight({ radius: 260, color: Color.amber, intensity: 1.4 })); ```"
       ],
-      "importLine": "import { PointLight } from '@codexo/exojs-lighting'",
+      "importLine": "import { PointLight } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/point-object.json b/site/src/content/api/point-object.json
index 9a54e891f..97b51c78f 100644
--- a/site/src/content/api/point-object.json
+++ b/site/src/content/api/point-object.json
@@ -4,7 +4,7 @@
   "symbol": "PointObject",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A single point at `(x, y)`."
       ],
-      "importLine": "import { PointObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { PointObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/polygon-object.json b/site/src/content/api/polygon-object.json
index 3bff692dd..8b9bd8772 100644
--- a/site/src/content/api/polygon-object.json
+++ b/site/src/content/api/polygon-object.json
@@ -4,7 +4,7 @@
   "symbol": "PolygonObject",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 14,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A closed polygon; `points` are relative to the object origin."
       ],
-      "importLine": "import { PolygonObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { PolygonObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/polygon-occluder-options.json b/site/src/content/api/polygon-occluder-options.json
index f06159bbc..d3ed6ba28 100644
--- a/site/src/content/api/polygon-occluder-options.json
+++ b/site/src/content/api/polygon-occluder-options.json
@@ -4,7 +4,7 @@
   "symbol": "PolygonOccluderOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Tuning for PolygonOccluder."
       ],
-      "importLine": "import { PolygonOccluderOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { PolygonOccluderOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/polygon-occluder.json b/site/src/content/api/polygon-occluder.json
index 76ff519e7..15f2c94d8 100644
--- a/site/src/content/api/polygon-occluder.json
+++ b/site/src/content/api/polygon-occluder.json
@@ -4,7 +4,7 @@
   "symbol": "PolygonOccluder",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -24,7 +24,7 @@
         "The escape hatch, and the right answer whenever the shadow silhouette is not the drawn one.",
         "The points are read once. The node places them, so moving or rotating it moves the shadow with it."
       ],
-      "importLine": "import { PolygonOccluder } from '@codexo/exojs-lighting'",
+      "importLine": "import { PolygonOccluder } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/polygon-shape.json b/site/src/content/api/polygon-shape.json
index 190321813..a5c7fb88b 100644
--- a/site/src/content/api/polygon-shape.json
+++ b/site/src/content/api/polygon-shape.json
@@ -4,7 +4,7 @@
   "symbol": "PolygonShape",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -22,7 +22,7 @@
         "A convex polygon defined by ≥3 local-space vertices. Input vertices may be given in either winding; they are canonicalised to counter-clockwise and the outward edge normals are precomputed. Construction throws on any non-convex, degenerate, or under-specified input - there is no silent repair.",
         "Vertices and normals are exposed as flat `[x0, y0, x1, y1, ...]` arrays to keep the narrow phase allocation-free; both are frozen."
       ],
-      "importLine": "import { PolygonShape } from '@codexo/exojs-physics'",
+      "importLine": "import { PolygonShape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/polyline-object.json b/site/src/content/api/polyline-object.json
index a842c7b30..d2e854dcb 100644
--- a/site/src/content/api/polyline-object.json
+++ b/site/src/content/api/polyline-object.json
@@ -4,7 +4,7 @@
   "symbol": "PolylineObject",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 14,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "An open polyline; `points` are relative to the object origin."
       ],
-      "importLine": "import { PolylineObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { PolylineObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/prismatic-joint-options.json b/site/src/content/api/prismatic-joint-options.json
index 53d9192db..a84bcb145 100644
--- a/site/src/content/api/prismatic-joint-options.json
+++ b/site/src/content/api/prismatic-joint-options.json
@@ -4,7 +4,7 @@
   "symbol": "PrismaticJointOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a PrismaticJoint."
       ],
-      "importLine": "import { PrismaticJointOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { PrismaticJointOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/prismatic-joint.json b/site/src/content/api/prismatic-joint.json
index 1db512bdb..6f307ad1f 100644
--- a/site/src/content/api/prismatic-joint.json
+++ b/site/src/content/api/prismatic-joint.json
@@ -4,7 +4,7 @@
   "symbol": "PrismaticJoint",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Constrains a body to **slide along a single axis** relative to another: the perpendicular translation and the relative rotation are locked (a 2×2 block); only translation along the axis is free, optionally driven by a motor and/or bounded by a translation limit. Solved in the sub-step loop, warm-started."
       ],
-      "importLine": "import { PrismaticJoint } from '@codexo/exojs-physics'",
+      "importLine": "import { PrismaticJoint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/pruned-expansion.json b/site/src/content/api/pruned-expansion.json
index 4f4d2c980..02b2d88b4 100644
--- a/site/src/content/api/pruned-expansion.json
+++ b/site/src/content/api/pruned-expansion.json
@@ -4,7 +4,7 @@
   "symbol": "PrunedExpansion",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -22,7 +22,7 @@
         "A parent-dependent successor generator that prunes symmetric alternatives without losing optimality - the shape jump-point search takes.",
         "Obtained from NavigationSpace.pruning for the duration of one search."
       ],
-      "importLine": "import { PrunedExpansion } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { PrunedExpansion } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/quad-particles.json b/site/src/content/api/quad-particles.json
index 35f753f79..6849f885f 100644
--- a/site/src/content/api/quad-particles.json
+++ b/site/src/content/api/quad-particles.json
@@ -4,7 +4,7 @@
   "symbol": "QuadParticles",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -23,7 +23,7 @@
         "build fills the shared 40-byte per-instance layout described by instanceAttributes. UVs are baked per-particle so the system can carry an atlas of frames - `system.frames` declares the rectangles and each particle's `textureIndex` selects one, resolved to UVs once per particle per frame; no per-instance shader-side indexing needed.",
         "GPU-eligible: the system's compute pipeline emits exactly that layout into its instance buffer, so a system running on the GPU path can bind that buffer directly and skip build entirely."
       ],
-      "importLine": "import { QuadParticles } from '@codexo/exojs-particles'",
+      "importLine": "import { QuadParticles } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/query-filter.json b/site/src/content/api/query-filter.json
index 7f48f79cd..fb6e0cd05 100644
--- a/site/src/content/api/query-filter.json
+++ b/site/src/content/api/query-filter.json
@@ -4,7 +4,7 @@
   "symbol": "QueryFilter",
   "kind": "type",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A category/mask/group filter applied to a query. Omitting it matches everything."
       ],
-      "importLine": "import { QueryFilter } from '@codexo/exojs-physics'",
+      "importLine": "import { QueryFilter } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/radiance-lighting-options.json b/site/src/content/api/radiance-lighting-options.json
index 4c1a23f84..df2025b9d 100644
--- a/site/src/content/api/radiance-lighting-options.json
+++ b/site/src/content/api/radiance-lighting-options.json
@@ -4,7 +4,7 @@
   "symbol": "RadianceLightingOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for RadianceLighting."
       ],
-      "importLine": "import { RadianceLightingOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { RadianceLightingOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/radiance-lighting.json b/site/src/content/api/radiance-lighting.json
index 90b5c9d50..cb8c905c9 100644
--- a/site/src/content/api/radiance-lighting.json
+++ b/site/src/content/api/radiance-lighting.json
@@ -4,7 +4,7 @@
   "symbol": "RadianceLighting",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 23,
   "counts": {
@@ -26,7 +26,7 @@
         "It does NOT make a scene look the way LightmapLighting makes it look, and it is the only renderer whose cost is per probe rather than per light. Registered normal surfaces are recorded and ignored: the gather averages a probe's rays into one arriving colour, which leaves no incident direction for a normal to be measured against.",
         "The host is required and is the first argument, and the scene the system belongs to goes in LightingOptions.scene. Float render targets are required too - a field of radiance has no ceiling to clamp at - and a device without them is refused at construction rather than shaded differently under the same name."
       ],
-      "importLine": "import { RadianceLighting } from '@codexo/exojs-lighting'",
+      "importLine": "import { RadianceLighting } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/range.json b/site/src/content/api/range.json
index 3fbf3de77..bf07d7ad1 100644
--- a/site/src/content/api/range.json
+++ b/site/src/content/api/range.json
@@ -4,7 +4,7 @@
   "symbol": "Range",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Uniform random number in `[min, max]`. Each `sample()` returns a fresh roll; the bounds are inclusive on both ends (modulo the rounding bias inherent to `Math.random()`)."
       ],
-      "importLine": "import { Range } from '@codexo/exojs-particles'",
+      "importLine": "import { Range } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/rate-spawn-config.json b/site/src/content/api/rate-spawn-config.json
index b558ea49f..e2faabe85 100644
--- a/site/src/content/api/rate-spawn-config.json
+++ b/site/src/content/api/rate-spawn-config.json
@@ -4,7 +4,7 @@
   "symbol": "RateSpawnConfig",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Spawn configuration for RateSpawn: the emission rate plus the shared per-property fields."
       ],
-      "importLine": "import { RateSpawnConfig } from '@codexo/exojs-particles'",
+      "importLine": "import { RateSpawnConfig } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/rate-spawn.json b/site/src/content/api/rate-spawn.json
index 5852cbf70..497102a10 100644
--- a/site/src/content/api/rate-spawn.json
+++ b/site/src/content/api/rate-spawn.json
@@ -4,7 +4,7 @@
   "symbol": "RateSpawn",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -22,7 +22,7 @@
         "Continuous, rate-based spawner. Emits a RateSpawnConfig.rate sample per second; sub-frame fractions accumulate so low rates (e.g. 0.5 particles/s) remain accurate over time.",
         "Each property is independently randomised via its Distribution. Every spawned particle gets a fresh sample for every configured field."
       ],
-      "importLine": "import { RateSpawn } from '@codexo/exojs-particles'",
+      "importLine": "import { RateSpawn } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ray-hit.json b/site/src/content/api/ray-hit.json
index bdf3f9cb8..a859611cb 100644
--- a/site/src/content/api/ray-hit.json
+++ b/site/src/content/api/ray-hit.json
@@ -4,7 +4,7 @@
   "symbol": "RayHit",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A single ray-cast intersection."
       ],
-      "importLine": "import { RayHit } from '@codexo/exojs-physics'",
+      "importLine": "import { RayHit } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/readonly-tile-chunk.json b/site/src/content/api/readonly-tile-chunk.json
index 220e995fc..3cbb6a3db 100644
--- a/site/src/content/api/readonly-tile-chunk.json
+++ b/site/src/content/api/readonly-tile-chunk.json
@@ -4,7 +4,7 @@
   "symbol": "ReadonlyTileChunk",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 8,
   "counts": {
@@ -22,7 +22,7 @@
         "Public readonly view of a tile chunk.",
         "Provides read-only inspection access for iteration, queries, and the future renderer. The underlying storage is never exposed directly."
       ],
-      "importLine": "import { ReadonlyTileChunk } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ReadonlyTileChunk } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/rectangle-object.json b/site/src/content/api/rectangle-object.json
index 0aff766c6..27b9cf9e7 100644
--- a/site/src/content/api/rectangle-object.json
+++ b/site/src/content/api/rectangle-object.json
@@ -4,7 +4,7 @@
   "symbol": "RectangleObject",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "An axis-aligned rectangle object spanning `[x, y, width, height]`."
       ],
-      "importLine": "import { RectangleObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { RectangleObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/repel-from-point.json b/site/src/content/api/repel-from-point.json
index 7a2680479..cf5c3a28a 100644
--- a/site/src/content/api/repel-from-point.json
+++ b/site/src/content/api/repel-from-point.json
@@ -4,7 +4,7 @@
   "symbol": "RepelFromPoint",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -23,7 +23,7 @@
         "Use cases: shockwaves, explosion blast, mouse-cursor repel field.",
         "GPU-eligible."
       ],
-      "importLine": "import { RepelFromPoint } from '@codexo/exojs-particles'",
+      "importLine": "import { RepelFromPoint } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/resolved-tile.json b/site/src/content/api/resolved-tile.json
index 4619c98a5..45c875234 100644
--- a/site/src/content/api/resolved-tile.json
+++ b/site/src/content/api/resolved-tile.json
@@ -4,7 +4,7 @@
   "symbol": "ResolvedTile",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A fully resolved, format-independent tile reference returned by queries. Materialised on-demand from the packed storage; never stored as a per-cell heap object."
       ],
-      "importLine": "import { ResolvedTile } from '@codexo/exojs-tilemap'",
+      "importLine": "import { ResolvedTile } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/reverb-effect-options.json b/site/src/content/api/reverb-effect-options.json
index c4495b91b..e31e857ef 100644
--- a/site/src/content/api/reverb-effect-options.json
+++ b/site/src/content/api/reverb-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "ReverbEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for ReverbEffect."
       ],
-      "importLine": "import { ReverbEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { ReverbEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/reverb-effect.json b/site/src/content/api/reverb-effect.json
index 2f5a10c18..b0997d36e 100644
--- a/site/src/content/api/reverb-effect.json
+++ b/site/src/content/api/reverb-effect.json
@@ -4,7 +4,7 @@
   "symbol": "ReverbEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Convolution reverb using a procedurally-generated impulse response loaded into a `ConvolverNode`. The impulse response is a stereo noise burst whose amplitude decays exponentially, simulating room reflections. Adjusting `durationSeconds` or `decay` rebuilds the impulse response immediately, so avoid animating these properties at audio rate - use `wet` for real-time mix control instead."
       ],
-      "importLine": "import { ReverbEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { ReverbEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/revolute-joint-options.json b/site/src/content/api/revolute-joint-options.json
index 41875bd6f..49f381dea 100644
--- a/site/src/content/api/revolute-joint-options.json
+++ b/site/src/content/api/revolute-joint-options.json
@@ -4,7 +4,7 @@
   "symbol": "RevoluteJointOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a RevoluteJoint."
       ],
-      "importLine": "import { RevoluteJointOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { RevoluteJointOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/revolute-joint.json b/site/src/content/api/revolute-joint.json
index 65b69d7e9..7b2524a5f 100644
--- a/site/src/content/api/revolute-joint.json
+++ b/site/src/content/api/revolute-joint.json
@@ -4,7 +4,7 @@
   "symbol": "RevoluteJoint",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Pins a shared anchor point on two bodies (a hinge): the bodies may rotate freely about the pivot but the anchor points stay coincident. Solved as a 2-DOF point constraint (a 2×2 block) in the sub-step loop, warm-started."
       ],
-      "importLine": "import { RevoluteJoint } from '@codexo/exojs-physics'",
+      "importLine": "import { RevoluteJoint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ribbon-particles-options.json b/site/src/content/api/ribbon-particles-options.json
index 12a2aa6ec..76595c096 100644
--- a/site/src/content/api/ribbon-particles-options.json
+++ b/site/src/content/api/ribbon-particles-options.json
@@ -4,7 +4,7 @@
   "symbol": "RibbonParticlesOptions",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for RibbonParticles."
       ],
-      "importLine": "import { RibbonParticlesOptions } from '@codexo/exojs-particles'",
+      "importLine": "import { RibbonParticlesOptions } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ribbon-particles.json b/site/src/content/api/ribbon-particles.json
index db1bf0193..98a90cf27 100644
--- a/site/src/content/api/ribbon-particles.json
+++ b/site/src/content/api/ribbon-particles.json
@@ -4,7 +4,7 @@
   "symbol": "RibbonParticles",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 14,
   "counts": {
@@ -26,7 +26,7 @@
         "**No ribbon-specific styling parameters.** Half-width comes from the particle's `scaleX` and the tint from its `color`, so the existing update modules already produce the expected look: `ScaleOverLifetime` tapers the tail, `ColorOverLifetime` gradients along the streak, and `AlphaFadeOverLifetime` fades it out. RibbonParticlesOptions.width only sets the base the scale multiplies.",
         "**The strip is built on the CPU**, so this mode is not GPU-eligible and a system using it stays on the CPU simulation path (observable through `ParticleSystem.gpuMode`). That is what guarantees the builder reads valid positions in emission order: CPU-mode slots are dense and compaction copies survivors forward stably, which is exactly the ordering a connected strip needs."
       ],
-      "importLine": "import { RibbonParticles } from '@codexo/exojs-particles'",
+      "importLine": "import { RibbonParticles } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ring-modulator-effect-options.json b/site/src/content/api/ring-modulator-effect-options.json
index e2b8bbe72..c7f8f4d66 100644
--- a/site/src/content/api/ring-modulator-effect-options.json
+++ b/site/src/content/api/ring-modulator-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "RingModulatorEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for RingModulatorEffect."
       ],
-      "importLine": "import { RingModulatorEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { RingModulatorEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/ring-modulator-effect.json b/site/src/content/api/ring-modulator-effect.json
index 996b89166..5da064950 100644
--- a/site/src/content/api/ring-modulator-effect.json
+++ b/site/src/content/api/ring-modulator-effect.json
@@ -4,7 +4,7 @@
   "symbol": "RingModulatorEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -24,7 +24,7 @@
         "Node graph: ``` input(GainNode) ┬── dryGain ──────────────────────────┐ │ ├── output(GainNode) └── ringGain ── wetGain ────────────────┘",
         "carrierOsc ── ringGain.gain (AudioParam, base = 0) ``` Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`; `ringGain.gain` base = 0 (carrier provides the ±1 modulation)."
       ],
-      "importLine": "import { RingModulatorEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { RingModulatorEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/rotate-over-lifetime.json b/site/src/content/api/rotate-over-lifetime.json
index 4fabd8270..c0109e507 100644
--- a/site/src/content/api/rotate-over-lifetime.json
+++ b/site/src/content/api/rotate-over-lifetime.json
@@ -4,7 +4,7 @@
   "symbol": "RotateOverLifetime",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -23,7 +23,7 @@
         "Units: degrees per second². Negative values decelerate spin.",
         "GPU-eligible."
       ],
-      "importLine": "import { RotateOverLifetime } from '@codexo/exojs-particles'",
+      "importLine": "import { RotateOverLifetime } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/sampled-chunk-source-options.json b/site/src/content/api/sampled-chunk-source-options.json
index 9cf98cdaf..cc7e8c7a9 100644
--- a/site/src/content/api/sampled-chunk-source-options.json
+++ b/site/src/content/api/sampled-chunk-source-options.json
@@ -4,7 +4,7 @@
   "symbol": "SampledChunkSourceOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for createSampledChunkSource."
       ],
-      "importLine": "import { SampledChunkSourceOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { SampledChunkSourceOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/scale-over-lifetime.json b/site/src/content/api/scale-over-lifetime.json
index c521b706b..6b9951adc 100644
--- a/site/src/content/api/scale-over-lifetime.json
+++ b/site/src/content/api/scale-over-lifetime.json
@@ -4,7 +4,7 @@
   "symbol": "ScaleOverLifetime",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -23,7 +23,7 @@
         "Common patterns: shrink-to-zero (start at 1, end at 0), pulse (sine-like curve up to peak then down), slow-grow (linear ramp).",
         "CPU, WebGL2 and WebGPU use the same 256-sample lookup table with explicit linear interpolation. Narrow keyframe features are approximated."
       ],
-      "importLine": "import { ScaleOverLifetime } from '@codexo/exojs-particles'",
+      "importLine": "import { ScaleOverLifetime } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/segment-shape.json b/site/src/content/api/segment-shape.json
index 4c7466b4f..d1a17277c 100644
--- a/site/src/content/api/segment-shape.json
+++ b/site/src/content/api/segment-shape.json
@@ -4,7 +4,7 @@
   "symbol": "SegmentShape",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -24,7 +24,7 @@
         "A segment blocks from **both** sides. There is no inside for it to be outside of, and a one-sided segment would be a gameplay rule in a geometry costume: express that with the world's `contactModifier`, which decides per contact and per step whether it is solved.",
         "Being zero-thickness makes it the worst case for discrete detection - a body that crosses it entirely within one fixed step misses it. Continuous collision covers a fast body against a segment; a fast segment is not swept."
       ],
-      "importLine": "import { SegmentShape } from '@codexo/exojs-physics'",
+      "importLine": "import { SegmentShape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/sensor-event.json b/site/src/content/api/sensor-event.json
index b64af113d..c26c87618 100644
--- a/site/src/content/api/sensor-event.json
+++ b/site/src/content/api/sensor-event.json
@@ -4,7 +4,7 @@
   "symbol": "SensorEvent",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Immutable per-dispatch snapshot for a sensor overlap. `sensor` is the sensor-flagged collider; `other` is the collider that entered/left it. When both colliders are sensors, the lower-id collider is reported as `sensor`."
       ],
-      "importLine": "import { SensorEvent } from '@codexo/exojs-physics'",
+      "importLine": "import { SensorEvent } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/shape-cast-hit.json b/site/src/content/api/shape-cast-hit.json
index 1b4497e02..ed57cb453 100644
--- a/site/src/content/api/shape-cast-hit.json
+++ b/site/src/content/api/shape-cast-hit.json
@@ -4,7 +4,7 @@
   "symbol": "ShapeCastHit",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The first obstacle a PhysicsWorld.shapeCast meets. Pass one as `out` to reuse it across casts."
       ],
-      "importLine": "import { ShapeCastHit } from '@codexo/exojs-physics'",
+      "importLine": "import { ShapeCastHit } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/shape-cast-options.json b/site/src/content/api/shape-cast-options.json
index 39db5ff12..48f9bfcbb 100644
--- a/site/src/content/api/shape-cast-options.json
+++ b/site/src/content/api/shape-cast-options.json
@@ -4,7 +4,7 @@
   "symbol": "ShapeCastOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for PhysicsWorld.shapeCast."
       ],
-      "importLine": "import { ShapeCastOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { ShapeCastOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/shape-mass-properties.json b/site/src/content/api/shape-mass-properties.json
index a40e2b9f3..6b5e42f11 100644
--- a/site/src/content/api/shape-mass-properties.json
+++ b/site/src/content/api/shape-mass-properties.json
@@ -4,7 +4,7 @@
   "symbol": "ShapeMassProperties",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Area-based mass properties of a solid shape, from which a Collider's density derives the owning body's mass and rotational inertia. Computed once at shape construction and frozen."
       ],
-      "importLine": "import { ShapeMassProperties } from '@codexo/exojs-physics'",
+      "importLine": "import { ShapeMassProperties } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/shape-type.json b/site/src/content/api/shape-type.json
index eebc3ab93..5948448d7 100644
--- a/site/src/content/api/shape-type.json
+++ b/site/src/content/api/shape-type.json
@@ -4,7 +4,7 @@
   "symbol": "ShapeType",
   "kind": "type",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Discriminant for the concrete shape kinds supported in the MVP."
       ],
-      "importLine": "import { ShapeType } from '@codexo/exojs-physics'",
+      "importLine": "import { ShapeType } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/shape.json b/site/src/content/api/shape.json
index 931f658a7..15f5b9f3c 100644
--- a/site/src/content/api/shape.json
+++ b/site/src/content/api/shape.json
@@ -4,7 +4,7 @@
   "symbol": "Shape",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -22,7 +22,7 @@
         "Immutable local-space collision geometry. A `Shape` carries no transform - a Collider positions it in a body.",
         "Having an interior is a capability, not a given: solid shapes expose massProperties, while boundary geometry (a segment, a chain of edges) reports `null` and contributes nothing to the owning body's mass. Read the property rather than assuming an area exists."
       ],
-      "importLine": "import { Shape } from '@codexo/exojs-physics'",
+      "importLine": "import { Shape } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/spawn-module.json b/site/src/content/api/spawn-module.json
index 1d843658c..d8ddaac74 100644
--- a/site/src/content/api/spawn-module.json
+++ b/site/src/content/api/spawn-module.json
@@ -4,7 +4,7 @@
   "symbol": "SpawnModule",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -25,7 +25,7 @@
         "A writer belongs to the emission that produced it: the next `emit()` rebinds it, so fill it before emitting again.",
         "Spawn modules run before integration each frame. Multiple modules can be registered on one system and execute in registration order."
       ],
-      "importLine": "import { SpawnModule } from '@codexo/exojs-particles'",
+      "importLine": "import { SpawnModule } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/spawn-on-death.json b/site/src/content/api/spawn-on-death.json
index a0f2d0fc7..032a72bae 100644
--- a/site/src/content/api/spawn-on-death.json
+++ b/site/src/content/api/spawn-on-death.json
@@ -4,7 +4,7 @@
   "symbol": "SpawnOnDeath",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -23,7 +23,7 @@
         "The child module receives a synthesized `dt` of 0 - it must spawn immediately rather than rely on rate accumulation. BurstSpawn works naturally; RateSpawn is the wrong fit here.",
         "Position is the only field taken from the dying particle - child distributions decide everything else, and their sampled positions are treated as offsets from the death position. To keep child particles riding the parent's velocity, configure the child's velocity distribution to match, or read ParticleDeathContext.velocityX in a custom death module - see that type's docs for how it can be one frame stale on the GPU backend."
       ],
-      "importLine": "import { SpawnOnDeath } from '@codexo/exojs-particles'",
+      "importLine": "import { SpawnOnDeath } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/spectrum-mapping-options.json b/site/src/content/api/spectrum-mapping-options.json
index 6f5c5f9aa..a960ac6c7 100644
--- a/site/src/content/api/spectrum-mapping-options.json
+++ b/site/src/content/api/spectrum-mapping-options.json
@@ -4,7 +4,7 @@
   "symbol": "SpectrumMappingOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Mapping options for AudioAnalyser.getSpectrumMel and AudioAnalyser.getSpectrumLog."
       ],
-      "importLine": "import { SpectrumMappingOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { SpectrumMappingOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/spot-light-options.json b/site/src/content/api/spot-light-options.json
index efc4d0f6c..926f7cc09 100644
--- a/site/src/content/api/spot-light-options.json
+++ b/site/src/content/api/spot-light-options.json
@@ -4,7 +4,7 @@
   "symbol": "SpotLightOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for SpotLight. Every field is also mutable afterwards."
       ],
-      "importLine": "import { SpotLightOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { SpotLightOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/spot-light.json b/site/src/content/api/spot-light.json
index 0f8a05abc..138484a3e 100644
--- a/site/src/content/api/spot-light.json
+++ b/site/src/content/api/spot-light.json
@@ -4,7 +4,7 @@
   "symbol": "SpotLight",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 95,
   "counts": {
@@ -22,7 +22,7 @@
         "A cone of light. The cone points along the node's own rotation, so aiming a spot is rotating it - a headlight parented to a car needs no direction of its own.",
         "```ts lamp.addChild(new SpotLight({ radius: 400, angle: 35, coneSoftness: 0.3 })); ```"
       ],
-      "importLine": "import { SpotLight } from '@codexo/exojs-lighting'",
+      "importLine": "import { SpotLight } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/standalone-forward-lighting-options.json b/site/src/content/api/standalone-forward-lighting-options.json
index 92f6ba3c9..f949a3f39 100644
--- a/site/src/content/api/standalone-forward-lighting-options.json
+++ b/site/src/content/api/standalone-forward-lighting-options.json
@@ -4,7 +4,7 @@
   "symbol": "StandaloneForwardLightingOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The same, for a system built without a host - which has no frame slot for a filter chain to run in."
       ],
-      "importLine": "import { StandaloneForwardLightingOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { StandaloneForwardLightingOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/sun-light-options.json b/site/src/content/api/sun-light-options.json
index d98c70728..00bbe15f5 100644
--- a/site/src/content/api/sun-light-options.json
+++ b/site/src/content/api/sun-light-options.json
@@ -4,7 +4,7 @@
   "symbol": "SunLightOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for SunLight. Every field is also mutable afterwards."
       ],
-      "importLine": "import { SunLightOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { SunLightOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/sun-light.json b/site/src/content/api/sun-light.json
index 9715354c8..dad88a525 100644
--- a/site/src/content/api/sun-light.json
+++ b/site/src/content/api/sun-light.json
@@ -4,7 +4,7 @@
   "symbol": "SunLight",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 92,
   "counts": {
@@ -26,7 +26,7 @@
         "A sun's shadow map is a LINE, not a circle. There is no centre to measure angles from, so instead of an angular bin per direction it has one bin per strip across the light's direction, holding how far along the light the nearest occluder in that strip sits. The strips span the region the registered occluder sources were collected for, which is the visible world.",
         "Because the shape has no radius, LightOptions.softness widens the penumbra in strips rather than in degrees - the same knob, a different unit."
       ],
-      "importLine": "import { SunLight } from '@codexo/exojs-lighting'",
+      "importLine": "import { SunLight } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tempo-candidate.json b/site/src/content/api/tempo-candidate.json
index 36240ce30..fb873fcac 100644
--- a/site/src/content/api/tempo-candidate.json
+++ b/site/src/content/api/tempo-candidate.json
@@ -4,7 +4,7 @@
   "symbol": "TempoCandidate",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { TempoCandidate } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { TempoCandidate } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/text-object.json b/site/src/content/api/text-object.json
index 71c87f18f..29d9145e5 100644
--- a/site/src/content/api/text-object.json
+++ b/site/src/content/api/text-object.json
@@ -4,7 +4,7 @@
   "symbol": "TextObject",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 14,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A text object carrying styled text content within `[x, y, width, height]`."
       ],
-      "importLine": "import { TextObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TextObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/text-style-2.json b/site/src/content/api/text-style-2.json
index d7017aa1c..6692bacbe 100644
--- a/site/src/content/api/text-style-2.json
+++ b/site/src/content/api/text-style-2.json
@@ -4,7 +4,7 @@
   "symbol": "TextStyle",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Text styling options carried by a TextObject."
       ],
-      "importLine": "import { TextStyle } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TextStyle } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-animation-frame.json b/site/src/content/api/tile-animation-frame.json
index 4b824af6d..3ef6cc033 100644
--- a/site/src/content/api/tile-animation-frame.json
+++ b/site/src/content/api/tile-animation-frame.json
@@ -4,7 +4,7 @@
   "symbol": "TileAnimationFrame",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "One frame of a tile animation: which local tile to show, and for how long. Mirrors Tiled's per-tile animation frame model."
       ],
-      "importLine": "import { TileAnimationFrame } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileAnimationFrame } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-animator.json b/site/src/content/api/tile-animator.json
index 15c26feb7..6024d5514 100644
--- a/site/src/content/api/tile-animator.json
+++ b/site/src/content/api/tile-animator.json
@@ -4,7 +4,7 @@
   "symbol": "TileAnimator",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 7,
   "counts": {
@@ -26,7 +26,7 @@
         "```ts const animator = new TileAnimator(map.layers); scene.systems.add({ update: (t) => animator.update(t.deltaSeconds) }); ```",
         "The animator references - but never owns - the layers and their tilesets; destroy only drops its own cell registry."
       ],
-      "importLine": "import { TileAnimator } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileAnimator } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-cell-source.json b/site/src/content/api/tile-cell-source.json
index 32fadf86a..72628804d 100644
--- a/site/src/content/api/tile-cell-source.json
+++ b/site/src/content/api/tile-cell-source.json
@@ -4,7 +4,7 @@
   "symbol": "TileCellSource",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "Returns the class/type string for the cell, or `null` when the cell carries no collision. The string is opaque: it is the merge key for adjacent cells and reaches the consumer unchanged, exactly like the `type` of a tile collision object.",
         "A source is sampled while geometry is being built and is expected to answer identically for as long as the geometry is used. Changing what it returns does not invalidate geometry that was already built; rebuild instead."
       ],
-      "importLine": "import { TileCellSource } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileCellSource } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collider-context.json b/site/src/content/api/tile-collider-context.json
index d45b104d6..4e12ce826 100644
--- a/site/src/content/api/tile-collider-context.json
+++ b/site/src/content/api/tile-collider-context.json
@@ -4,7 +4,7 @@
   "symbol": "TileColliderContext",
   "kind": "interface",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What a TileColliderMaterialResolver is asked about."
       ],
-      "importLine": "import { TileColliderContext } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { TileColliderContext } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collider-material-resolver.json b/site/src/content/api/tile-collider-material-resolver.json
index abbcc83ca..24d17b206 100644
--- a/site/src/content/api/tile-collider-material-resolver.json
+++ b/site/src/content/api/tile-collider-material-resolver.json
@@ -4,7 +4,7 @@
   "symbol": "TileColliderMaterialResolver",
   "kind": "type",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "Per-object collider settings, merged over the call-level defaults. Return `null` to accept the defaults unchanged.",
         "Called only while a chunk is being built or rebuilt, never during a no-change import('./TileColliderStreamer').TileColliderStreamer.sync. It is a build-time mapping, not a live rule: changing what the resolver would return has no effect until the layer itself changes."
       ],
-      "importLine": "import { TileColliderMaterialResolver } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { TileColliderMaterialResolver } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collider-material.json b/site/src/content/api/tile-collider-material.json
index 98ab985ee..65aaa76a3 100644
--- a/site/src/content/api/tile-collider-material.json
+++ b/site/src/content/api/tile-collider-material.json
@@ -4,7 +4,7 @@
   "symbol": "TileColliderMaterial",
   "kind": "interface",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Collider settings a TileColliderMaterialResolver may override."
       ],
-      "importLine": "import { TileColliderMaterial } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { TileColliderMaterial } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collider-options.json b/site/src/content/api/tile-collider-options.json
index b23612c7d..8a24ca23e 100644
--- a/site/src/content/api/tile-collider-options.json
+++ b/site/src/content/api/tile-collider-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileColliderOptions",
   "kind": "interface",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 10,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a TileColliderStreamer. All optional."
       ],
-      "importLine": "import { TileColliderOptions } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { TileColliderOptions } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collider-streamer.json b/site/src/content/api/tile-collider-streamer.json
index 2fe9f7d2f..f9ecfdd15 100644
--- a/site/src/content/api/tile-collider-streamer.json
+++ b/site/src/content/api/tile-collider-streamer.json
@@ -1,10 +1,10 @@
 {
   "title": "TileColliderStreamer",
-  "description": "Keeps a physics world's static tile colliders in sync with a TileLayer: one static body per chunk-sized partition of the layer, rebuilt when that partition changes, destroyed when it is evicted. The bridge owns every body it creates and nothing else. It observes the layer through its public revision counters, so it works with any chunk source - import('@codexo/exojs-tilemap').ChunkStreamer, a hand-rolled loader, or a fully resident bounded layer. Tick it from `preFrame`, before the frame's fixed steps run - not from `update`, which runs after them: ```ts const colliders = new TileColliderStreamer(world, layer); scene.systems.add({ preFrame: () => colliders.sync() }); ``` `SceneScope` runs `preFrame` once per frame, before any of that frame's fixed steps, and `update` after all of them. A chunk that becomes resident this frame needs its collider body built before the world steps over the hole, and a chunk evicted this frame must not keep its body for a whole extra frame of stepping - `update` gets both of those one step too late. Wiring `sync()` into `fixedUpdate` instead (ordered before SystemOrder.Physics) also works, and additionally re-syncs on every fixed step within a frame rather than once per frame. Two consequences worth knowing before shipping a level: - Whole-cell merging never crosses a partition boundary, so a solid run spanning two of them is at least two rectangles. This is what makes the result independent of the order chunks were loaded in. - A dynamic body resting on a chunk that gets evicted falls. Eviction is the chunk source's decision; widen its unload radius if that matters. - With TileColliderOptions.cells, a bounded layer's partitions are all covered, resident or not - collision authored per cell does not depend on tiles being placed.",
+  "description": "Keeps a physics world's static tile colliders in sync with a TileLayer: one static body per chunk-sized partition of the layer, rebuilt when that partition changes, destroyed when it is evicted. The bridge owns every body it creates and nothing else. It observes the layer through its public revision counters, so it works with any chunk source - import('@codexo/exojs/tilemap').ChunkStreamer, a hand-rolled loader, or a fully resident bounded layer. Tick it from `preFrame`, before the frame's fixed steps run - not from `update`, which runs after them: ```ts const colliders = new TileColliderStreamer(world, layer); scene.systems.add({ preFrame: () => colliders.sync() }); ``` `SceneScope` runs `preFrame` once per frame, before any of that frame's fixed steps, and `update` after all of them. A chunk that becomes resident this frame needs its collider body built before the world steps over the hole, and a chunk evicted this frame must not keep its body for a whole extra frame of stepping - `update` gets both of those one step too late. Wiring `sync()` into `fixedUpdate` instead (ordered before SystemOrder.Physics) also works, and additionally re-syncs on every fixed step within a frame rather than once per frame. Two consequences worth knowing before shipping a level: - Whole-cell merging never crosses a partition boundary, so a solid run spanning two of them is at least two rectangles. This is what makes the result independent of the order chunks were loaded in. - A dynamic body resting on a chunk that gets evicted falls. Eviction is the chunk source's decision; widen its unload radius if that matters. - With TileColliderOptions.cells, a bounded layer's partitions are all covered, resident or not - collision authored per cell does not depend on tiles being placed.",
   "symbol": "TileColliderStreamer",
   "kind": "class",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -20,14 +20,14 @@
       "members": [],
       "paragraphs": [
         "Keeps a physics world's static tile colliders in sync with a TileLayer: one static body per chunk-sized partition of the layer, rebuilt when that partition changes, destroyed when it is evicted.",
-        "The bridge owns every body it creates and nothing else. It observes the layer through its public revision counters, so it works with any chunk source - import('@codexo/exojs-tilemap').ChunkStreamer, a hand-rolled loader, or a fully resident bounded layer.",
+        "The bridge owns every body it creates and nothing else. It observes the layer through its public revision counters, so it works with any chunk source - import('@codexo/exojs/tilemap').ChunkStreamer, a hand-rolled loader, or a fully resident bounded layer.",
         "Tick it from `preFrame`, before the frame's fixed steps run - not from `update`, which runs after them:",
         "```ts const colliders = new TileColliderStreamer(world, layer); scene.systems.add({ preFrame: () => colliders.sync() }); ```",
         "`SceneScope` runs `preFrame` once per frame, before any of that frame's fixed steps, and `update` after all of them. A chunk that becomes resident this frame needs its collider body built before the world steps over the hole, and a chunk evicted this frame must not keep its body for a whole extra frame of stepping - `update` gets both of those one step too late. Wiring `sync()` into `fixedUpdate` instead (ordered before SystemOrder.Physics) also works, and additionally re-syncs on every fixed step within a frame rather than once per frame.",
         "Two consequences worth knowing before shipping a level:",
         "- Whole-cell merging never crosses a partition boundary, so a solid run spanning two of them is at least two rectangles. This is what makes the result independent of the order chunks were loaded in. - A dynamic body resting on a chunk that gets evicted falls. Eviction is the chunk source's decision; widen its unload radius if that matters. - With TileColliderOptions.cells, a bounded layer's partitions are all covered, resident or not - collision authored per cell does not depend on tiles being placed."
       ],
-      "importLine": "import { TileColliderStreamer } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { TileColliderStreamer } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collision-geometry.json b/site/src/content/api/tile-collision-geometry.json
index 30a4546ab..ec1e6801a 100644
--- a/site/src/content/api/tile-collision-geometry.json
+++ b/site/src/content/api/tile-collision-geometry.json
@@ -4,7 +4,7 @@
   "symbol": "TileCollisionGeometry",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Collision geometry extracted from a tile layer: whole-cell boxes merged into as few TileCollisionRects as a greedy pass can manage, plus every other shape passed through individually."
       ],
-      "importLine": "import { TileCollisionGeometry } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileCollisionGeometry } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collision-options.json b/site/src/content/api/tile-collision-options.json
index 38ef97e10..969a25a26 100644
--- a/site/src/content/api/tile-collision-options.json
+++ b/site/src/content/api/tile-collision-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileCollisionOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for buildTileCollisionGeometry."
       ],
-      "importLine": "import { TileCollisionOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileCollisionOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collision-rect.json b/site/src/content/api/tile-collision-rect.json
index b6f702283..dd3fb06ef 100644
--- a/site/src/content/api/tile-collision-rect.json
+++ b/site/src/content/api/tile-collision-rect.json
@@ -4,7 +4,7 @@
   "symbol": "TileCollisionRect",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 5,
   "counts": {
@@ -22,7 +22,7 @@
         "An axis-aligned collision rectangle in logical tile-layer pixel space (+Y down), covering one or more whole tile cells.",
         "Rectangles are synthesized geometry, not source objects: a merged run has no single originating object, so it carries no object `id`/`name`/`properties` - only the `type` string shared by every shape merged into it. Anything that does not exactly cover whole cells stays a TileCollisionShape, which does keep its source object."
       ],
-      "importLine": "import { TileCollisionRect } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileCollisionRect } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collision-shape-kind.json b/site/src/content/api/tile-collision-shape-kind.json
index 6dfd9bf7b..aed321c3d 100644
--- a/site/src/content/api/tile-collision-shape-kind.json
+++ b/site/src/content/api/tile-collision-shape-kind.json
@@ -4,7 +4,7 @@
   "symbol": "TileCollisionShapeKind",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The geometry kinds a TileCollisionShape can carry. Tile (GID) and text objects describe no collision area and are never emitted, so they are excluded from the union."
       ],
-      "importLine": "import { TileCollisionShapeKind } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileCollisionShapeKind } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-collision-shape.json b/site/src/content/api/tile-collision-shape.json
index eaaf54dfe..eed916c61 100644
--- a/site/src/content/api/tile-collision-shape.json
+++ b/site/src/content/api/tile-collision-shape.json
@@ -4,7 +4,7 @@
   "symbol": "TileCollisionShape",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 10,
   "counts": {
@@ -22,7 +22,7 @@
         "A per-tile collision shape placed in logical tile-layer pixel space (+Y down).",
         "Emitted for every collision shape that does not exactly cover a whole tile cell: partial boxes, ellipses, polygons, polylines, points, and rotated geometry. Shapes are never merged with one another."
       ],
-      "importLine": "import { TileCollisionShape } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileCollisionShape } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-definition.json b/site/src/content/api/tile-definition.json
index e79fc6187..57641beb1 100644
--- a/site/src/content/api/tile-definition.json
+++ b/site/src/content/api/tile-definition.json
@@ -4,7 +4,7 @@
   "symbol": "TileDefinition",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Optional per-tile metadata in a TileSet. Sparse - only defined tiles carry a definition."
       ],
-      "importLine": "import { TileDefinition } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileDefinition } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-layer-node-options.json b/site/src/content/api/tile-layer-node-options.json
index 06853a824..3f259e7cc 100644
--- a/site/src/content/api/tile-layer-node-options.json
+++ b/site/src/content/api/tile-layer-node-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileLayerNodeOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a TileLayerNode. All optional; reserved for forward compatibility."
       ],
-      "importLine": "import { TileLayerNodeOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileLayerNodeOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-layer-node.json b/site/src/content/api/tile-layer-node.json
index a08ca9e71..bc1a3ccf8 100644
--- a/site/src/content/api/tile-layer-node.json
+++ b/site/src/content/api/tile-layer-node.json
@@ -4,7 +4,7 @@
   "symbol": "TileLayerNode",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 104,
   "counts": {
@@ -25,7 +25,7 @@
         "The node references - but never owns - the TileLayer: destroying it frees its chunk nodes and their cached geometry but leaves the layer, map, and Loader-owned textures intact.",
         "Structural changes made via `_adoptChunk`/`_evictChunk` (chunk streaming) are picked up incrementally as they happen, without a full rebuild. TileLayerNode.refresh remains available for callers that mutate chunk structure by other means (e.g. a bulk edit that bypasses `_adoptChunk`/`_evictChunk`) and need a full resync. In-place tile edits to existing chunks are picked up automatically via chunk revisions."
       ],
-      "importLine": "import { TileLayerNode } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileLayerNode } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-layer-options.json b/site/src/content/api/tile-layer-options.json
index 065ac9068..295a53b16 100644
--- a/site/src/content/api/tile-layer-options.json
+++ b/site/src/content/api/tile-layer-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileLayerOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 20,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for constructing a TileLayer."
       ],
-      "importLine": "import { TileLayerOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileLayerOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-layer-selector.json b/site/src/content/api/tile-layer-selector.json
index 919f93121..8b2d4273d 100644
--- a/site/src/content/api/tile-layer-selector.json
+++ b/site/src/content/api/tile-layer-selector.json
@@ -4,7 +4,7 @@
   "symbol": "TileLayerSelector",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A layer selector inside a TileMapBandDefinition: either a stable layer **id** (`number`) or a **unique** layer **name** (`string`). Selectors resolve across the map's tile **and** image layers. Names that are shared by more than one layer (of either kind) are rejected as ambiguous - reference such layers by id. An id shared by a tile layer and an image layer (possible only in fallback-ordered maps, which never validated cross-kind uniqueness) is equally ambiguous - reference such layers by a unique name."
       ],
-      "importLine": "import { TileLayerSelector } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileLayerSelector } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-layer.json b/site/src/content/api/tile-layer.json
index a7127f2c4..25077bb59 100644
--- a/site/src/content/api/tile-layer.json
+++ b/site/src/content/api/tile-layer.json
@@ -4,7 +4,7 @@
   "symbol": "TileLayer",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 42,
   "counts": {
@@ -24,7 +24,7 @@
         "**Mutation must go through the layer's public APIs only.** `setTileAt` / `clearTileAt` validate coordinates, tileset references, and increment revision counters only when the stored value actually changes. Direct chunk mutation is not supported - the layer owns chunk storage and exposes only a ReadonlyTileChunk view.",
         "The layer is NOT a SceneNode - that integration lives in import('./TileLayerNode').TileLayerNode."
       ],
-      "importLine": "import { TileLayer } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileLayer } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-band-definition.json b/site/src/content/api/tile-map-band-definition.json
index 18ab8fa5b..ed0315b2b 100644
--- a/site/src/content/api/tile-map-band-definition.json
+++ b/site/src/content/api/tile-map-band-definition.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapBandDefinition",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The layers composing one band, by id or unique name, in any order. Tile and image layers may be freely mixed. Rendering order always follows the map's combined document order (import('./TileMap').TileMap.renderableLayers) regardless of the order listed here - a definition *selects* layers, it never reorders them. The band's name is the key it is registered under in TileMapViewOptions.bands."
       ],
-      "importLine": "import { TileMapBandDefinition } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapBandDefinition } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-band.json b/site/src/content/api/tile-map-band.json
index 7b01953f0..8c59881d6 100644
--- a/site/src/content/api/tile-map-band.json
+++ b/site/src/content/api/tile-map-band.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapBand",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 104,
   "counts": {
@@ -27,7 +27,7 @@
         "Bounds are the union of the band's layer-node bounds (an empty band collapses to a degenerate rect at the band's transformed origin).",
         "Bands are created by TileMapView; construct them through TileMapView rather than directly."
       ],
-      "importLine": "import { TileMapBand } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapBand } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-node-options.json b/site/src/content/api/tile-map-node-options.json
index 4874f374c..86cf22faf 100644
--- a/site/src/content/api/tile-map-node-options.json
+++ b/site/src/content/api/tile-map-node-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapNodeOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a TileMapNode."
       ],
-      "importLine": "import { TileMapNodeOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapNodeOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-node.json b/site/src/content/api/tile-map-node.json
index 0035fada6..744ad00c1 100644
--- a/site/src/content/api/tile-map-node.json
+++ b/site/src/content/api/tile-map-node.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapNode",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 107,
   "counts": {
@@ -24,7 +24,7 @@
         "The node references - but never owns - the TileMap: destroying the node frees its layer/chunk nodes and their cached GPU geometry, while the `TileMap` data and Loader-owned textures survive (free them via `TileMap.destroy()` / `Loader.destroy()` respectively).",
         "Layers added to or removed from the map after construction are reflected only after TileMapNode.refreshLayers."
       ],
-      "importLine": "import { TileMapNode } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapNode } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-object-kind.json b/site/src/content/api/tile-map-object-kind.json
index 885a63cee..7a9cfafb6 100644
--- a/site/src/content/api/tile-map-object-kind.json
+++ b/site/src/content/api/tile-map-object-kind.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapObjectKind",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Geometry discriminant for a TileMapObject. Structural alias of ObjectKind; retained so existing code keeps compiling. New code may prefer ObjectKind."
       ],
-      "importLine": "import { TileMapObjectKind } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapObjectKind } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-object.json b/site/src/content/api/tile-map-object.json
index f5bbd8ca8..25bf000fd 100644
--- a/site/src/content/api/tile-map-object.json
+++ b/site/src/content/api/tile-map-object.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapObject",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "A format-independent map object. The geometry kind is the discriminant; narrow on `kind` to read shape-specific fields. Template objects are not yet represented.",
         "The optional property-shape parameter `P` lets typed accessors (see ObjectLayer.byType) narrow `properties` to a developer-declared schema. It defaults to the generic TileProperties bag, so the plain `TileMapObject` form is unchanged."
       ],
-      "importLine": "import { TileMapObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-options.json b/site/src/content/api/tile-map-options.json
index a78b03ddd..05429af63 100644
--- a/site/src/content/api/tile-map-options.json
+++ b/site/src/content/api/tile-map-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 17,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for constructing a TileMap."
       ],
-      "importLine": "import { TileMapOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-view-options.json b/site/src/content/api/tile-map-view-options.json
index 6145c7524..528585b0e 100644
--- a/site/src/content/api/tile-map-view-options.json
+++ b/site/src/content/api/tile-map-view-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapViewOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for a TileMapView."
       ],
-      "importLine": "import { TileMapViewOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapViewOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map-view.json b/site/src/content/api/tile-map-view.json
index 65aa32e87..73b53492e 100644
--- a/site/src/content/api/tile-map-view.json
+++ b/site/src/content/api/tile-map-view.json
@@ -4,7 +4,7 @@
   "symbol": "TileMapView",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 15,
   "counts": {
@@ -26,7 +26,7 @@
         "**Ownership:** the view owns its generated layer nodes and bands. A layer assigned to a band is owned by that band; an unbanded layer is owned by the view directly. TileMapView.destroy destroys every band and layer node (detaching them from their application parents) but leaves actors, the map, its layers, and Loader-owned textures untouched. There is no map-replacement mutation API: to swap maps, destroy the old view, construct a new one, and re-parent its bands - the actor tree is never involved.",
         "**Image layers.** A view also produces exactly one canonical ImageLayerNode per TileMap.imageLayers entry (stable identity, map document order), reachable through imageLayerNodes, getImageLayerNodeById, and getImageLayerNodeByName. Image layers are selectable in TileMapViewOptions.bands exactly like tile layers: a band member list may mix both kinds, and the band stacks its members by the map's combined document order (import('./TileMap').TileMap.renderableLayers). A banded image node is owned by its band; an unbanded one is owned by the view directly, and the application parents it wherever the image belongs in draw order - the same way actors are interleaved."
       ],
-      "importLine": "import { TileMapView } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMapView } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-map.json b/site/src/content/api/tile-map.json
index ca087f495..6048ccade 100644
--- a/site/src/content/api/tile-map.json
+++ b/site/src/content/api/tile-map.json
@@ -4,7 +4,7 @@
   "symbol": "TileMap",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 44,
   "counts": {
@@ -24,7 +24,7 @@
         "The map does NOT own tileset textures (those are Loader-owned) and does NOT own SceneNode children - see import('./TileMapNode').TileMapNode, which owns those.",
         "Multiple tilesets are supported: each cell stores a packed tileset index and local tile ID, so different tilesets may have different tile dimensions."
       ],
-      "importLine": "import { TileMap } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileMap } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-navigation-chunk.json b/site/src/content/api/tile-navigation-chunk.json
index 747d22611..1d73ebd73 100644
--- a/site/src/content/api/tile-navigation-chunk.json
+++ b/site/src/content/api/tile-navigation-chunk.json
@@ -4,7 +4,7 @@
   "symbol": "TileNavigationChunk",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The part of a tile chunk TileNavigationSpace reads: whether it changed."
       ],
-      "importLine": "import { TileNavigationChunk } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { TileNavigationChunk } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-navigation-projection.json b/site/src/content/api/tile-navigation-projection.json
index c5581c3c1..fe349211c 100644
--- a/site/src/content/api/tile-navigation-projection.json
+++ b/site/src/content/api/tile-navigation-projection.json
@@ -4,7 +4,7 @@
   "symbol": "TileNavigationProjection",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "The cell grid geometry of a TileNavigationSource, in the shape a tilemap projection describes it."
       ],
-      "importLine": "import { TileNavigationProjection } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { TileNavigationProjection } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-navigation-source.json b/site/src/content/api/tile-navigation-source.json
index 151b4fc69..f2fd20c78 100644
--- a/site/src/content/api/tile-navigation-source.json
+++ b/site/src/content/api/tile-navigation-source.json
@@ -4,7 +4,7 @@
   "symbol": "TileNavigationSource",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -22,7 +22,7 @@
         "Tile data a TileNavigationSpace can navigate: a `TileLayer` from `@codexo/exojs-tilemap` matches it as it is, and so does any other grid that can answer what sits in a cell and when anything changed.",
         "Cell coordinates are integers; navigation coordinates are the logical space a cell `(x, y)` covers `[x, x + 1) * logicalTileWidth` of, shifted by logicalOffset - the same space tilemap physics colliders live in."
       ],
-      "importLine": "import { TileNavigationSource } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { TileNavigationSource } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-navigation-space-options.json b/site/src/content/api/tile-navigation-space-options.json
index 433afc3d0..ddb1a585b 100644
--- a/site/src/content/api/tile-navigation-space-options.json
+++ b/site/src/content/api/tile-navigation-space-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileNavigationSpaceOptions",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for TileNavigationSpace."
       ],
-      "importLine": "import { TileNavigationSpaceOptions } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { TileNavigationSpaceOptions } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-navigation-space.json b/site/src/content/api/tile-navigation-space.json
index f43f7b1c1..0c6c4b67e 100644
--- a/site/src/content/api/tile-navigation-space.json
+++ b/site/src/content/api/tile-navigation-space.json
@@ -4,7 +4,7 @@
   "symbol": "TileNavigationSpace",
   "kind": "class",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 24,
   "counts": {
@@ -24,7 +24,7 @@
         "Routes, positions and agent coordinates are logical: for an isometric map that is the unprojected grid of `tileHeight`-sized squares, not the screen diamonds, matching the tilemap's physics colliders. Orthogonal maps need square tiles; non-square orthogonal tiles and other orientations are rejected, since the grid's distance metric would misprice them.",
         "The space holds no listener on its source and owns nothing but its cost grid, so dropping it is all the cleanup it needs. When its source is destroyed, the next synchronisation turns the space invalidated: every cell becomes blocked and the revision advances once, so routes in flight go stale and agents navigating it settle on `unreachable` and stop their movement. A warning is logged once; the space never reads the source again."
       ],
-      "importLine": "import { TileNavigationSpace } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { TileNavigationSpace } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-navigation-window.json b/site/src/content/api/tile-navigation-window.json
index 1ef6e3579..72a181e58 100644
--- a/site/src/content/api/tile-navigation-window.json
+++ b/site/src/content/api/tile-navigation-window.json
@@ -4,7 +4,7 @@
   "symbol": "TileNavigationWindow",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A rectangle of cells, in absolute cell coordinates."
       ],
-      "importLine": "import { TileNavigationWindow } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { TileNavigationWindow } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-object.json b/site/src/content/api/tile-object.json
index cd3f90ccb..2a512eb45 100644
--- a/site/src/content/api/tile-object.json
+++ b/site/src/content/api/tile-object.json
@@ -4,7 +4,7 @@
   "symbol": "TileObject",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 15,
   "counts": {
@@ -23,7 +23,7 @@
         "`x`/`y` are the top-left corner of the bounding box, the same convention as every other object kind. Source formats that anchor a tile object elsewhere normalise to the corner on import: Tiled stores the position at the tileset's `objectalignment` point (bottom-left by default on an orthogonal map, bottom-centre on an isometric one) and rotates the tile image about that point, so a non-zero TileMapObjectBase.rotation on a tile object still pivots about the source anchor rather than about `(x, y)`. Isometric Tiled objects expose this anchor as `rotationOrigin`; `getDisplayObject` projects both the unrotated corner and this pivot.",
         "The owning tileset's drawing offset (Tiled `tileoffset`, reachable as `tile.tileset.offsetX`/`offsetY`) is likewise **not** folded into `x`/`y`. Object layers are data-only, so nothing in this package draws a tile object; code that does has to add that offset itself to match how a tile layer places the same tile."
       ],
-      "importLine": "import { TileObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-orientation.json b/site/src/content/api/tile-orientation.json
index 384a2dbbf..4e0d964ca 100644
--- a/site/src/content/api/tile-orientation.json
+++ b/site/src/content/api/tile-orientation.json
@@ -4,7 +4,7 @@
   "symbol": "TileOrientation",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "How cells are laid out.",
         "- `orthogonal`: rectangles in rows and columns. - `isometric`: diamonds along two diagonal axes. - `staggered`: diamonds in rows and columns, every other row (or column) shifted by half a cell. - `hexagonal`: hexagons laid out like `staggered`, with straight sides of TileProjectionOptions.hexSideLength along the stagger axis."
       ],
-      "importLine": "import { TileOrientation } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileOrientation } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-physics-binding.json b/site/src/content/api/tile-physics-binding.json
index fab3bfa54..8f9e27547 100644
--- a/site/src/content/api/tile-physics-binding.json
+++ b/site/src/content/api/tile-physics-binding.json
@@ -4,7 +4,7 @@
   "symbol": "TilePhysicsBinding",
   "kind": "class",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Explicit presentation of a logical physics body through a tile projection. Call after stepping the world, or use syncInterpolated with the fixed-step interpolation fraction. The node's parent must use map display coordinates. Owns neither body nor node; does not register with the world. Sprite rotation and scale remain application-owned because projection is not a rigid rotation."
       ],
-      "importLine": "import { TilePhysicsBinding } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { TilePhysicsBinding } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-projection-options.json b/site/src/content/api/tile-projection-options.json
index 03493dbd1..f9ad16e0e 100644
--- a/site/src/content/api/tile-projection-options.json
+++ b/site/src/content/api/tile-projection-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileProjectionOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Immutable grid geometry shared by a map and its independently usable layers."
       ],
-      "importLine": "import { TileProjectionOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileProjectionOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-projection.json b/site/src/content/api/tile-projection.json
index f55f7b31a..7a969b510 100644
--- a/site/src/content/api/tile-projection.json
+++ b/site/src/content/api/tile-projection.json
@@ -4,7 +4,7 @@
   "symbol": "TileProjection",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 19,
   "counts": {
@@ -22,7 +22,7 @@
         "Converts between grid vertices, display pixels and unprojected logical pixels. Isometric logical cells are squares of side `tileHeight`; orthogonal logical coordinates are display coordinates before the origin translation.",
         "Staggered and hexagonal grids follow Tiled's layout. Their logical space is display space before the origin translation, as for orthogonal grids, but their cells are not rectangles in it: code that treats logical cells as squares (tile collision, grid navigation) rejects these grids."
       ],
-      "importLine": "import { TileProjection } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileProjection } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-properties.json b/site/src/content/api/tile-properties.json
index 31daf45e0..e52d64a73 100644
--- a/site/src/content/api/tile-properties.json
+++ b/site/src/content/api/tile-properties.json
@@ -4,7 +4,7 @@
   "symbol": "TileProperties",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -22,7 +22,7 @@
         "An immutable, flat key-value bag of generic tile properties. Adapters copy and freeze source properties; the runtime never retains a caller-owned mutable object.",
         "Declared as an interface (not a `Record<...>` type alias) so it can mutually recurse with TilePropertyValue - a nested-bag member of that union - without TypeScript's \"circularly references itself\" alias restriction; structurally it behaves exactly like `Readonly<Record<string, TilePropertyValue>>`."
       ],
-      "importLine": "import { TileProperties } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileProperties } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-property-kind.json b/site/src/content/api/tile-property-kind.json
index 93b1ca69e..d941e33be 100644
--- a/site/src/content/api/tile-property-kind.json
+++ b/site/src/content/api/tile-property-kind.json
@@ -4,7 +4,7 @@
   "symbol": "TilePropertyKind",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Structured-value discriminant for TilePropertyValue."
       ],
-      "importLine": "import { TilePropertyKind } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TilePropertyKind } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-property-object-ref.json b/site/src/content/api/tile-property-object-ref.json
index fca83494c..ecb3c7638 100644
--- a/site/src/content/api/tile-property-object-ref.json
+++ b/site/src/content/api/tile-property-object-ref.json
@@ -4,7 +4,7 @@
   "symbol": "TilePropertyObjectRef",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A reference to another object/entity. `id` is the referenced object's identity - Tiled's numeric object id, or LDtk's `entityIid`. The extra fields are LDtk-only navigation context (`undefined` for Tiled-sourced refs) that lets a consumer resolve the reference without searching the whole level tree."
       ],
-      "importLine": "import { TilePropertyObjectRef } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TilePropertyObjectRef } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-property-point.json b/site/src/content/api/tile-property-point.json
index f9fd633b7..c93454dc0 100644
--- a/site/src/content/api/tile-property-point.json
+++ b/site/src/content/api/tile-property-point.json
@@ -4,7 +4,7 @@
   "symbol": "TilePropertyPoint",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A 2D point-valued tile property (e.g. an LDtk `Point` field)."
       ],
-      "importLine": "import { TilePropertyPoint } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TilePropertyPoint } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-property-tile-ref.json b/site/src/content/api/tile-property-tile-ref.json
index 04760aa55..a1c06c258 100644
--- a/site/src/content/api/tile-property-tile-ref.json
+++ b/site/src/content/api/tile-property-tile-ref.json
@@ -4,7 +4,7 @@
   "symbol": "TilePropertyTileRef",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A reference into a tileset region (e.g. an LDtk `Tile`-typed field)."
       ],
-      "importLine": "import { TilePropertyTileRef } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TilePropertyTileRef } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-property-value.json b/site/src/content/api/tile-property-value.json
index 2fa4c4498..2418091d7 100644
--- a/site/src/content/api/tile-property-value.json
+++ b/site/src/content/api/tile-property-value.json
@@ -4,7 +4,7 @@
   "symbol": "TilePropertyValue",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Union of legal tile-property value types in the generic runtime. Format-neutral; adapters map their native property systems into this set - including the structured TilePropertyPoint, TilePropertyObjectRef, and TilePropertyTileRef variants, arrays of any of the above, and nested property bags (e.g. Tiled `class`-typed properties)."
       ],
-      "importLine": "import { TilePropertyValue } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TilePropertyValue } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-region-mode.json b/site/src/content/api/tile-region-mode.json
index f83886ad2..d17b1e039 100644
--- a/site/src/content/api/tile-region-mode.json
+++ b/site/src/content/api/tile-region-mode.json
@@ -4,7 +4,7 @@
   "symbol": "TileRegionMode",
   "kind": "type",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -23,7 +23,7 @@
         "`'boxes'` keeps the merged rectangles as solid `BoxShape` colliders: the region has an interior, so point queries, overlaps and sensors behave, and a body that starts inside solid tiles is pushed out. Adjacent rectangles share an internal edge, which a body sliding across can catch on.",
         "`'outline'` traces the boundary of each solid region into closed one-sided chains. Nothing is left to catch on inside a region, which is what a side-scroller wants, but the region has no interior: queries inside it find nothing and a body spawned inside it falls through."
       ],
-      "importLine": "import { TileRegionMode } from '@codexo/exojs-tilemap-physics'",
+      "importLine": "import { TileRegionMode } from '@codexo/exojs/tilemap-physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-region.json b/site/src/content/api/tile-region.json
index 1605880dc..5cc6ea5d6 100644
--- a/site/src/content/api/tile-region.json
+++ b/site/src/content/api/tile-region.json
@@ -4,7 +4,7 @@
   "symbol": "TileRegion",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 4,
   "counts": {
@@ -22,7 +22,7 @@
         "A half-open tile-coordinate rectangle covering `[x, x + width)` × `[y, y + height)`.",
         "Used to scope buildTileCollisionGeometry to part of a layer - a streamed chunk, the tiles around the player, a hand-picked room - instead of always rebuilding the whole map."
       ],
-      "importLine": "import { TileRegion } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileRegion } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-set-base-options.json b/site/src/content/api/tile-set-base-options.json
index 14ec52ac2..2799c2c91 100644
--- a/site/src/content/api/tile-set-base-options.json
+++ b/site/src/content/api/tile-set-base-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileSetBaseOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options shared by both kinds of TileSet."
       ],
-      "importLine": "import { TileSetBaseOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileSetBaseOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-set-options.json b/site/src/content/api/tile-set-options.json
index d7a31ccb9..825300ced 100644
--- a/site/src/content/api/tile-set-options.json
+++ b/site/src/content/api/tile-set-options.json
@@ -4,7 +4,7 @@
   "symbol": "TileSetOptions",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for constructing a TileSet: an atlas grid or an image collection."
       ],
-      "importLine": "import { TileSetOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileSetOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-set.json b/site/src/content/api/tile-set.json
index e73072f8b..5665f9d3e 100644
--- a/site/src/content/api/tile-set.json
+++ b/site/src/content/api/tile-set.json
@@ -4,7 +4,7 @@
   "symbol": "TileSet",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 20,
   "counts": {
@@ -23,7 +23,7 @@
         "Does **not** own its textures - the Loader or application code retains texture ownership. Tileset dimensions are validated at construction and frozen thereafter.",
         "Multiple tilesets are supported per TileMap; each carries its own tile dimensions, spacing, and optional per-tile metadata. Tiles that stay inside their cells batch into one draw per texture and chunk, so an atlas costs one draw where a collection costs one per image. Artwork that overhangs its cell, and the tiles drawn over it, keep cell order, and each change of texture in that order costs another draw, so prefer atlases for dense layers."
       ],
-      "importLine": "import { TileSet } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileSet } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tile-transform.json b/site/src/content/api/tile-transform.json
index f1f01e0dd..dcdb1a747 100644
--- a/site/src/content/api/tile-transform.json
+++ b/site/src/content/api/tile-transform.json
@@ -4,7 +4,7 @@
   "symbol": "TileTransform",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -22,7 +22,7 @@
         "Describes the orientation of a placed tile independent of source-format flip-bit encodings. The eight legal combinations map to the eight distinct 90°-rotation-and-flip states of a rectangular texture quad.",
         "Applying the transform at geometry-build time (reordering UV corners) avoids per-tile runtime cost and per-frame matrix allocation."
       ],
-      "importLine": "import { TileTransform } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TileTransform } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tilemap-functions.json b/site/src/content/api/tilemap-functions.json
index 5c0e749f2..8161ee400 100644
--- a/site/src/content/api/tilemap-functions.json
+++ b/site/src/content/api/tilemap-functions.json
@@ -1,10 +1,10 @@
 {
   "title": "Tilemap Functions",
-  "description": "Free functions and constants exported from @codexo/exojs-tilemap.",
+  "description": "Free functions and constants exported from @codexo/exojs/tilemap.",
   "symbol": "Tilemap Functions",
   "kind": "namespace",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Overview",
       "members": [],
       "paragraphs": [
-        "Free functions and constants exported from @codexo/exojs-tilemap. Import any of them directly, for example `import { autoTile } from '@codexo/exojs-tilemap'`."
+        "Free functions and constants exported from @codexo/exojs/tilemap. Import any of them directly, for example `import { autoTile } from '@codexo/exojs/tilemap'`."
       ],
       "importLine": null,
       "sourceLink": null
diff --git a/site/src/content/api/tilemap-occluder-options.json b/site/src/content/api/tilemap-occluder-options.json
index cbf2d4310..faa8a1f2d 100644
--- a/site/src/content/api/tilemap-occluder-options.json
+++ b/site/src/content/api/tilemap-occluder-options.json
@@ -4,7 +4,7 @@
   "symbol": "TilemapOccluderOptions",
   "kind": "interface",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Tuning for TilemapOccluder."
       ],
-      "importLine": "import { TilemapOccluderOptions } from '@codexo/exojs-lighting'",
+      "importLine": "import { TilemapOccluderOptions } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tilemap-occluder.json b/site/src/content/api/tilemap-occluder.json
index ab4b6d8e1..06b6ce168 100644
--- a/site/src/content/api/tilemap-occluder.json
+++ b/site/src/content/api/tilemap-occluder.json
@@ -4,7 +4,7 @@
   "symbol": "TilemapOccluder",
   "kind": "class",
   "subsystem": "lighting",
-  "importPath": "@codexo/exojs-lighting",
+  "importPath": "@codexo/exojs/lighting",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -24,7 +24,7 @@
         "Only the boundary between occupied and empty cells is emitted, and runs of it are merged, so a corridor costs a handful of segments rather than one per tile. Outlines are cached per block of cells and rebuilt when the layer's revision changes, which is what lets a streamed map bring its shadows in with its chunks.",
         "Every tile in the layer blocks light unless `solid` says otherwise, which suits a layer dedicated to walls."
       ],
-      "importLine": "import { TilemapOccluder } from '@codexo/exojs-lighting'",
+      "importLine": "import { TilemapOccluder } from '@codexo/exojs/lighting'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tilemap-physics-functions.json b/site/src/content/api/tilemap-physics-functions.json
index 7a35bc694..13cf79884 100644
--- a/site/src/content/api/tilemap-physics-functions.json
+++ b/site/src/content/api/tilemap-physics-functions.json
@@ -1,10 +1,10 @@
 {
   "title": "Tilemap-physics Functions",
-  "description": "Free functions and constants exported from @codexo/exojs-tilemap-physics.",
+  "description": "Free functions and constants exported from @codexo/exojs/tilemap-physics.",
   "symbol": "Tilemap-physics Functions",
   "kind": "namespace",
   "subsystem": "tilemap-physics",
-  "importPath": "@codexo/exojs-tilemap-physics",
+  "importPath": "@codexo/exojs/tilemap-physics",
   "tier": "stable",
   "memberCount": 1,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Overview",
       "members": [],
       "paragraphs": [
-        "Free functions and constants exported from @codexo/exojs-tilemap-physics. Import any of them directly, for example `import { buildObjectLayerColliders } from '@codexo/exojs-tilemap-physics'`."
+        "Free functions and constants exported from @codexo/exojs/tilemap-physics. Import any of them directly, for example `import { buildObjectLayerColliders } from '@codexo/exojs/tilemap-physics'`."
       ],
       "importLine": null,
       "sourceLink": null
diff --git a/site/src/content/api/time-signature.json b/site/src/content/api/time-signature.json
index ea1ce2ec8..0645b3bf1 100644
--- a/site/src/content/api/time-signature.json
+++ b/site/src/content/api/time-signature.json
@@ -4,7 +4,7 @@
   "symbol": "TimeSignature",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { TimeSignature } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { TimeSignature } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/time-stepper-options.json b/site/src/content/api/time-stepper-options.json
index e881c53ea..b855c48e5 100644
--- a/site/src/content/api/time-stepper-options.json
+++ b/site/src/content/api/time-stepper-options.json
@@ -4,7 +4,7 @@
   "symbol": "TimeStepperOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 2,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for TimeStepper."
       ],
-      "importLine": "import { TimeStepperOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { TimeStepperOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/time-stepper.json b/site/src/content/api/time-stepper.json
index 87b12e845..c7e2f4360 100644
--- a/site/src/content/api/time-stepper.json
+++ b/site/src/content/api/time-stepper.json
@@ -4,7 +4,7 @@
   "symbol": "TimeStepper",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -23,7 +23,7 @@
         "alpha is the leftover fraction of a step `[0, 1)`, for interpolating bound transforms between sub-steps.",
         "The stepper holds no mutable module-level state - two stepper instances are fully independent (world isolation)."
       ],
-      "importLine": "import { TimeStepper } from '@codexo/exojs-physics'",
+      "importLine": "import { TimeStepper } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/trail-particles-options.json b/site/src/content/api/trail-particles-options.json
index f2331c4a5..492801d37 100644
--- a/site/src/content/api/trail-particles-options.json
+++ b/site/src/content/api/trail-particles-options.json
@@ -4,7 +4,7 @@
   "symbol": "TrailParticlesOptions",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for TrailParticles."
       ],
-      "importLine": "import { TrailParticlesOptions } from '@codexo/exojs-particles'",
+      "importLine": "import { TrailParticlesOptions } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/trail-particles.json b/site/src/content/api/trail-particles.json
index db1a31c80..5fc3a11ed 100644
--- a/site/src/content/api/trail-particles.json
+++ b/site/src/content/api/trail-particles.json
@@ -4,7 +4,7 @@
   "symbol": "TrailParticles",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 14,
   "counts": {
@@ -27,7 +27,7 @@
         "**One instance per system.** The history is per-particle state carried across frames and addressed by simulation slot, so two systems sharing one instance would overwrite each other's trails.",
         "**The strips are built on the CPU**, so this mode is not GPU-eligible and a system using it stays on the CPU simulation path (observable through `ParticleSystem.gpuMode`). That is also what lets the history survive a death: CPU-mode slots are dense and compaction copies survivors forward stably, which is what build re-aligns the history rows against. It identifies a particle by its age and its lifetime, so an update module that rewrites a live particle's lifetime restarts that particle's trail."
       ],
-      "importLine": "import { TrailParticles } from '@codexo/exojs-particles'",
+      "importLine": "import { TrailParticles } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tremolo-effect-options.json b/site/src/content/api/tremolo-effect-options.json
index 1b80fd799..84fda1083 100644
--- a/site/src/content/api/tremolo-effect-options.json
+++ b/site/src/content/api/tremolo-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "TremoloEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for TremoloEffect."
       ],
-      "importLine": "import { TremoloEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { TremoloEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/tremolo-effect.json b/site/src/content/api/tremolo-effect.json
index c9f989650..099c41d00 100644
--- a/site/src/content/api/tremolo-effect.json
+++ b/site/src/content/api/tremolo-effect.json
@@ -4,7 +4,7 @@
   "symbol": "TremoloEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -27,7 +27,7 @@
         "lfoOscillator ── lfoGain (depth / 2) ── tremoloGain.gain lfoOscillator ── panGain (depth) ── panner.pan ```",
         "Gains: `dryGain.gain = 1 - wet`; `wetGain.gain = wet`; `tremoloGain.gain` base = `1 - depth / 2`."
       ],
-      "importLine": "import { TremoloEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { TremoloEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/turbulence.json b/site/src/content/api/turbulence.json
index 08682d2bb..8dd53c197 100644
--- a/site/src/content/api/turbulence.json
+++ b/site/src/content/api/turbulence.json
@@ -4,7 +4,7 @@
   "symbol": "Turbulence",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 11,
   "counts": {
@@ -24,7 +24,7 @@
         "Use cases: smoke turbulence, organic swirls, wind eddies, dust haze. Pair with Drag to keep particle velocities bounded.",
         "CPU and GPU use the same integer lattice hash, avoiding backend-specific transcendental approximations. Interpolation still has float rounding error."
       ],
-      "importLine": "import { Turbulence } from '@codexo/exojs-particles'",
+      "importLine": "import { Turbulence } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/typed-object.json b/site/src/content/api/typed-object.json
index b74fc2790..4d34fcf03 100644
--- a/site/src/content/api/typed-object.json
+++ b/site/src/content/api/typed-object.json
@@ -4,7 +4,7 @@
   "symbol": "TypedObject",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A TileMapObject whose `properties` are narrowed to the schema shape declared for the object `type` `T` in schema `S`."
       ],
-      "importLine": "import { TypedObject } from '@codexo/exojs-tilemap'",
+      "importLine": "import { TypedObject } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/unknown-map-object-policy.json b/site/src/content/api/unknown-map-object-policy.json
index e29e99426..c0b6518d7 100644
--- a/site/src/content/api/unknown-map-object-policy.json
+++ b/site/src/content/api/unknown-map-object-policy.json
@@ -4,7 +4,7 @@
   "symbol": "UnknownMapObjectPolicy",
   "kind": "type",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "What to do with an object no factory is registered for."
       ],
-      "importLine": "import { UnknownMapObjectPolicy } from '@codexo/exojs-tilemap'",
+      "importLine": "import { UnknownMapObjectPolicy } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/upcoming-beat.json b/site/src/content/api/upcoming-beat.json
index 0f3c98dca..b86a56ef4 100644
--- a/site/src/content/api/upcoming-beat.json
+++ b/site/src/content/api/upcoming-beat.json
@@ -4,7 +4,7 @@
   "symbol": "UpcomingBeat",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { UpcomingBeat } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { UpcomingBeat } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/update-module.json b/site/src/content/api/update-module.json
index d4f5207ab..bcd0dc1fe 100644
--- a/site/src/content/api/update-module.json
+++ b/site/src/content/api/update-module.json
@@ -4,7 +4,7 @@
   "symbol": "UpdateModule",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -23,7 +23,7 @@
         "GPU support is explicit per backend: `wgsl()` opts into WebGPU compute, `glsl()` into WebGL2 transform feedback. If any module lacks the attached backend's contribution, the entire system uses the supported CPU fallback. Built-in modules provide all three implementations. GPU bodies must preserve the CPU operation, channel ownership and module ordering.",
         "Shader sources and lookup tables are captured when the module list is compiled. Remove and re-add a module after replacing lookup configuration; uniform values are refreshed each frame without recompilation."
       ],
-      "importLine": "import { UpdateModule } from '@codexo/exojs-particles'",
+      "importLine": "import { UpdateModule } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/vector-range.json b/site/src/content/api/vector-range.json
index 4201a674b..7fa7f8928 100644
--- a/site/src/content/api/vector-range.json
+++ b/site/src/content/api/vector-range.json
@@ -4,7 +4,7 @@
   "symbol": "VectorRange",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 6,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Uniform random vector with each axis sampled independently in its own `[min, max]` range. Each `sample()` writes into the provided `out` Vector (or an internal scratch instance when `out` is omitted)."
       ],
-      "importLine": "import { VectorRange } from '@codexo/exojs-particles'",
+      "importLine": "import { VectorRange } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/velocity-over-lifetime.json b/site/src/content/api/velocity-over-lifetime.json
index 4da3e73b8..b774d90e8 100644
--- a/site/src/content/api/velocity-over-lifetime.json
+++ b/site/src/content/api/velocity-over-lifetime.json
@@ -4,7 +4,7 @@
   "symbol": "VelocityOverLifetime",
   "kind": "class",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -22,7 +22,7 @@
         "Multiplies velocity by the ratio between a curve sampled at the current lifetime ratio and at `(elapsed - dt) / lifetime`. The previous sample is clamped to at least `1e-6`, keeping zero crossings finite; negative previous samples use the same lower bound. All backends use the same stateless ratio, so particle compaction and slot reuse cannot inherit another particle's state.",
         "Uses a 256-sample float lookup table with linear interpolation on CPU, WebGL2 and WebGPU. Features narrower than one lookup interval are approximated."
       ],
-      "importLine": "import { VelocityOverLifetime } from '@codexo/exojs-particles'",
+      "importLine": "import { VelocityOverLifetime } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/vocoder-effect-options.json b/site/src/content/api/vocoder-effect-options.json
index 6861b5725..0c10ba2c9 100644
--- a/site/src/content/api/vocoder-effect-options.json
+++ b/site/src/content/api/vocoder-effect-options.json
@@ -4,7 +4,7 @@
   "symbol": "VocoderEffectOptions",
   "kind": "interface",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { VocoderEffectOptions } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { VocoderEffectOptions } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/vocoder-effect.json b/site/src/content/api/vocoder-effect.json
index 321ba68df..c8cf346a5 100644
--- a/site/src/content/api/vocoder-effect.json
+++ b/site/src/content/api/vocoder-effect.json
@@ -4,7 +4,7 @@
   "symbol": "VocoderEffect",
   "kind": "class",
   "subsystem": "audio",
-  "importPath": "@codexo/exojs-audio-fx",
+  "importPath": "@codexo/exojs/audio-fx",
   "tier": "stable",
   "memberCount": 12,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Phase-vocoder-style effect implemented as a WorkletEffect. Analyzes the spectral envelope of a `modulator` AudioBus across a bank of log-spaced bandpass filters and applies that envelope to the carrier signal (the main input). The result is the classic \"robot voice\" or talking-synth effect. Band count, frequency range, and Q are compile-time parameters set at construction; only `wet` and `envelopeSmoothing` are adjustable at runtime."
       ],
-      "importLine": "import { VocoderEffect } from '@codexo/exojs-audio-fx'",
+      "importLine": "import { VocoderEffect } from '@codexo/exojs/audio-fx'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wang-set-options.json b/site/src/content/api/wang-set-options.json
index e09f32456..f66052936 100644
--- a/site/src/content/api/wang-set-options.json
+++ b/site/src/content/api/wang-set-options.json
@@ -4,7 +4,7 @@
   "symbol": "WangSetOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 4,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for constructing a WangSet."
       ],
-      "importLine": "import { WangSetOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { WangSetOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wang-set.json b/site/src/content/api/wang-set.json
index 736e0e171..fe1f27f82 100644
--- a/site/src/content/api/wang-set.json
+++ b/site/src/content/api/wang-set.json
@@ -4,7 +4,7 @@
   "symbol": "WangSet",
   "kind": "class",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "stable",
   "memberCount": 7,
   "counts": {
@@ -24,7 +24,7 @@
         "Diagonal (corner) bits are only set when both adjacent cardinal directions are also set - reducing 256 raw combinations to 47 meaningful blob states.",
         "Edge bitmask bit layout: - Bit 0 (1): Top - Bit 1 (2): Right - Bit 2 (4): Bottom - Bit 3 (8): Left"
       ],
-      "importLine": "import { WangSet } from '@codexo/exojs-tilemap'",
+      "importLine": "import { WangSet } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/waypoint-edge-options.json b/site/src/content/api/waypoint-edge-options.json
index b0338ba22..31949610a 100644
--- a/site/src/content/api/waypoint-edge-options.json
+++ b/site/src/content/api/waypoint-edge-options.json
@@ -4,7 +4,7 @@
   "symbol": "WaypointEdgeOptions",
   "kind": "interface",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for WaypointGraph.addEdge and WaypointGraph.connect."
       ],
-      "importLine": "import { WaypointEdgeOptions } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { WaypointEdgeOptions } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/waypoint-graph.json b/site/src/content/api/waypoint-graph.json
index e1618c8dc..6f75c39bd 100644
--- a/site/src/content/api/waypoint-graph.json
+++ b/site/src/content/api/waypoint-graph.json
@@ -4,7 +4,7 @@
   "symbol": "WaypointGraph",
   "kind": "class",
   "subsystem": "pathfinding",
-  "importPath": "@codexo/exojs-pathfinding",
+  "importPath": "@codexo/exojs/pathfinding",
   "tier": "stable",
   "memberCount": 16,
   "counts": {
@@ -23,7 +23,7 @@
         "This is the representation for worlds a grid cannot describe: a platformer where traversal is a topology of walk, jump and fall links rather than cell walkability, or a purely abstract graph with no geometry at all. Nodes carry an optional position, edges carry a cost, a WaypointEdgeOptions.kind and an arbitrary payload, and the resulting path reports the edges it took so the game can execute each step in its own way.",
         "With positions the search is A* over straight-line distance; without them the heuristic is zero and the same search degrades cleanly to Dijkstra."
       ],
-      "importLine": "import { WaypointGraph } from '@codexo/exojs-pathfinding'",
+      "importLine": "import { WaypointGraph } from '@codexo/exojs/pathfinding'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/weld-joint-options.json b/site/src/content/api/weld-joint-options.json
index 56efd8faf..74feb227a 100644
--- a/site/src/content/api/weld-joint-options.json
+++ b/site/src/content/api/weld-joint-options.json
@@ -4,7 +4,7 @@
   "symbol": "WeldJointOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 8,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a WeldJoint."
       ],
-      "importLine": "import { WeldJointOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { WeldJointOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/weld-joint.json b/site/src/content/api/weld-joint.json
index 84aeddd4d..7fe923b9d 100644
--- a/site/src/content/api/weld-joint.json
+++ b/site/src/content/api/weld-joint.json
@@ -4,7 +4,7 @@
   "symbol": "WeldJoint",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 9,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Rigidly fixes the relative position and orientation of two bodies (they move as one rigid body). A 2-DOF point constraint (like RevoluteJoint) plus a 1-DOF angular constraint, solved in the sub-step loop. Both locks default to rigid; set `linearHertz`/`angularHertz` for a springy weld."
       ],
-      "importLine": "import { WeldJoint } from '@codexo/exojs-physics'",
+      "importLine": "import { WeldJoint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wgsl-contribution.json b/site/src/content/api/wgsl-contribution.json
index 9f358a7a8..741487543 100644
--- a/site/src/content/api/wgsl-contribution.json
+++ b/site/src/content/api/wgsl-contribution.json
@@ -4,7 +4,7 @@
   "symbol": "WgslContribution",
   "kind": "interface",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 5,
   "counts": {
@@ -23,7 +23,7 @@
         "- `idx: u32` - the particle slot index (already gated on `< sim.liveCount` and skip-on-dead via the reserved lifecycle lane). - `dt: f32` - frame delta in seconds (mirrors `sim.dt`). - **Packed SoA bindings** (see body of doc) - channels are packed into `vec2<f32>`-typed storage buffers to fit within WebGPU's default 8-buffer limit. Access x/y components for the per-axis values: - `positions[idx].x` / `.y` (was posX/posY) - `velocities[idx].x` / `.y` (was velX/velY) - `scales[idx].x` / `.y` (was scaleX/scaleY) - `rotInfo[idx].x` / `.y` (rotation, rotationSpeed; z is the frame index and w is reserved) - `timing[idx].x` / `.y` (elapsed, lifetime) - `color[idx]` - packed RGBA u32, single channel (no .x/.y) - `sim: SimUniforms` - `{ dt: f32, liveCount: u32 }`. - `modules.u_${key}: ${Key}Uniforms` - your module's uniform struct (if declared). - `u_${key}_${textureName}` and `u_${key}_${textureName}_sampler` - texture bindings (if any).",
         "The body should not declare new functions or top-level statements; it runs inline in the main function. Use comments and parentheses generously - composition concatenates several module bodies and any syntax mistake surfaces only at pipeline-creation time."
       ],
-      "importLine": "import { WgslContribution } from '@codexo/exojs-particles'",
+      "importLine": "import { WgslContribution } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wgsl-primitive.json b/site/src/content/api/wgsl-primitive.json
index b827bd642..51a5649cd 100644
--- a/site/src/content/api/wgsl-primitive.json
+++ b/site/src/content/api/wgsl-primitive.json
@@ -4,7 +4,7 @@
   "symbol": "WgslPrimitive",
   "kind": "type",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Compatibility names for the backend-neutral shader resource schema."
       ],
-      "importLine": "import { WgslPrimitive } from '@codexo/exojs-particles'",
+      "importLine": "import { WgslPrimitive } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wgsl-texture-binding.json b/site/src/content/api/wgsl-texture-binding.json
index 4ab47c023..a7a72c4b8 100644
--- a/site/src/content/api/wgsl-texture-binding.json
+++ b/site/src/content/api/wgsl-texture-binding.json
@@ -4,7 +4,7 @@
   "symbol": "WgslTextureBinding",
   "kind": "type",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { WgslTextureBinding } from '@codexo/exojs-particles'",
+      "importLine": "import { WgslTextureBinding } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wgsl-uniform-field.json b/site/src/content/api/wgsl-uniform-field.json
index 7eb015daf..edbaa38ad 100644
--- a/site/src/content/api/wgsl-uniform-field.json
+++ b/site/src/content/api/wgsl-uniform-field.json
@@ -4,7 +4,7 @@
   "symbol": "WgslUniformField",
   "kind": "type",
   "subsystem": "particles",
-  "importPath": "@codexo/exojs-particles",
+  "importPath": "@codexo/exojs/particles",
   "tier": "stable",
   "memberCount": 0,
   "counts": {
@@ -19,7 +19,7 @@
       "title": "Import",
       "members": [],
       "paragraphs": [],
-      "importLine": "import { WgslUniformField } from '@codexo/exojs-particles'",
+      "importLine": "import { WgslUniformField } from '@codexo/exojs/particles'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wheel-joint-options.json b/site/src/content/api/wheel-joint-options.json
index 33de82bd3..ee8546cf0 100644
--- a/site/src/content/api/wheel-joint-options.json
+++ b/site/src/content/api/wheel-joint-options.json
@@ -4,7 +4,7 @@
   "symbol": "WheelJointOptions",
   "kind": "interface",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Construction options for a WheelJoint."
       ],
-      "importLine": "import { WheelJointOptions } from '@codexo/exojs-physics'",
+      "importLine": "import { WheelJointOptions } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/wheel-joint.json b/site/src/content/api/wheel-joint.json
index 2b2dc0984..92773ffc9 100644
--- a/site/src/content/api/wheel-joint.json
+++ b/site/src/content/api/wheel-joint.json
@@ -4,7 +4,7 @@
   "symbol": "WheelJoint",
   "kind": "class",
   "subsystem": "physics",
-  "importPath": "@codexo/exojs-physics",
+  "importPath": "@codexo/exojs/physics",
   "tier": "stable",
   "memberCount": 13,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "A wheel attached to a chassis: free to **spin** (no rotation lock) and sprung along a **suspension axis** (a soft spring), but locked **laterally** (it cannot slide perpendicular to the axis). Optionally driven by a rotation motor and/or bounded by a suspension-travel limit. Used for vehicles. Solved in the sub-step loop, warm-started."
       ],
-      "importLine": "import { WheelJoint } from '@codexo/exojs-physics'",
+      "importLine": "import { WheelJoint } from '@codexo/exojs/physics'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/api/worker-sampled-chunk-source-options.json b/site/src/content/api/worker-sampled-chunk-source-options.json
index 6c8dc6716..e42507a51 100644
--- a/site/src/content/api/worker-sampled-chunk-source-options.json
+++ b/site/src/content/api/worker-sampled-chunk-source-options.json
@@ -4,7 +4,7 @@
   "symbol": "WorkerSampledChunkSourceOptions",
   "kind": "interface",
   "subsystem": "tilemap",
-  "importPath": "@codexo/exojs-tilemap",
+  "importPath": "@codexo/exojs/tilemap",
   "tier": "advanced",
   "memberCount": 3,
   "counts": {
@@ -21,7 +21,7 @@
       "paragraphs": [
         "Options for createWorkerSampledChunkSource."
       ],
-      "importLine": "import { WorkerSampledChunkSourceOptions } from '@codexo/exojs-tilemap'",
+      "importLine": "import { WorkerSampledChunkSourceOptions } from '@codexo/exojs/tilemap'",
       "sourceLink": null
     },
     {
diff --git a/site/src/content/guide/assets/ldtk.mdx b/site/src/content/guide/assets/ldtk.mdx
index 364c5c8fc..288b871d3 100644
--- a/site/src/content/guide/assets/ldtk.mdx
+++ b/site/src/content/guide/assets/ldtk.mdx
@@ -105,7 +105,7 @@ level.properties.ldtkWorldIid; // string | undefined — set only for multi-worl
 Wrap a level's `TileMap` in a `TileMapNode` and add it to the scene. `TileMapNode` is the generic tilemap node from `@codexo/exojs-tilemap` (the package LDtk builds on):
 
 ```ts
-import { TileMapNode } from '@codexo/exojs-tilemap';
+import { TileMapNode } from '@codexo/exojs/tilemap';
 
 const level = world.getLevelByName('Level_0') ?? world.levels[0];
 scene.root.addChild(new TileMapNode(level));
@@ -126,7 +126,7 @@ for (const level of world.levels) {
 Every custom field an entity carries in the LDtk editor ends up as a property on that entity's `TileMapObject` (found on the entity layer's `ObjectLayer`). Scalar field types — Int, Float, Bool, String, Multilines, Color, FilePath, Enum — convert directly to their JS scalar. Three structured field types — **Point**, **EntityRef**, and **Tile** — convert into the tagged `TilePropertyValue` variants from `@codexo/exojs-tilemap`, discriminated by a `kind` string:
 
 ```ts
-import { TilePropertyKind } from '@codexo/exojs-tilemap';
+import { TilePropertyKind } from '@codexo/exojs/tilemap';
 
 const entities = level.getObjectLayer('Entities');
 const chest = entities?.objects.find((object) => object.type === 'Chest');
diff --git a/site/src/content/guide/assets/loading-and-resources.mdx b/site/src/content/guide/assets/loading-and-resources.mdx
index d5feb38d5..d6b430fa0 100644
--- a/site/src/content/guide/assets/loading-and-resources.mdx
+++ b/site/src/content/guide/assets/loading-and-resources.mdx
@@ -102,10 +102,22 @@ export const prefetchLevel = async (scope: LoaderScope): Promise<void> => {
 
 The caller handles a rejected prefetch promise just as it handles another load. Keep prefetch work in a scope whose lifetime is intentional; using the application loader pins the claim until application teardown. `awaitBackground()` waits for the background queue to drain, including failed items, and does not reject for those individual failures.
 
+## Demo media for prototypes
+
+The playground examples load their textures, sounds, maps and videos from the optional `@codexo/exojs-demo-assets` package. Its catalog is a frozen object of ordinary descriptors, so the same calls apply: `this.loader.get(assets.ship)` claims a texture placeholder, and `await this.loader.load(assets.videoHighRes)` waits for a video. Importing the catalog or reading a property fetches nothing.
+
+```ts
+import { demoAssets as assets } from '@codexo/exojs-demo-assets';
+```
+
+It is meant for prototypes and learning. A bundler that follows its `new URL(..., import.meta.url)` descriptors copies the whole standard set into a production build, and formats that reference sibling files (Tiled maps, LDtk projects, bitmap fonts) need the package's copy command; its README describes both.
+
+The [Asset Browser](/ExoJS/en/playground/?example=debug-layer/asset-browser) example lists the whole standard set by type and previews each asset with these APIs. Every selection loads into a child scope of the scene, so browsing never keeps earlier media resident, and its Code button turns the current preview settings into a scene you can paste.
+
 ## Residency is not offline storage
 
 A resident texture is a live runtime resource. A persistent cache holds source representations that can be decoded on a later visit. One does not imply the other. `cacheSource()` can warm configured source storage without constructing a resident resource, but it still acquires data, consumes storage, and follows the selected cache policy.
 
 Use [Offline and caching](/ExoJS/en/guide/assets/offline/) for persistence and connectivity, [Device variants](/ExoJS/en/guide/assets/device-variants/) for choosing a source before loading, and [Worlds and level streaming](/ExoJS/en/guide/assets/worlds-and-spawning/) for level-owned scopes. Custom asset-type authors should continue with [Authoring extensions](/ExoJS/en/guide/debugging/authoring-extensions/), not add application-specific decoders to ordinary scene code.
 
-<TryIt examples={['application-scenes/loading-screen', 'tilemap/level-loading-and-ownership']} api={['loader', 'loader-scope', 'asset', 'assets', 'asset-ref', 'loading-queue']} />
+<TryIt examples={['application-scenes/loading-screen', 'tilemap/level-loading-and-ownership', 'debug-layer/asset-browser']} api={['loader', 'loader-scope', 'asset', 'assets', 'asset-ref', 'loading-queue']} />
diff --git a/site/src/content/guide/assets/tiled-maps.mdx b/site/src/content/guide/assets/tiled-maps.mdx
index df02009c9..41c2c7367 100644
--- a/site/src/content/guide/assets/tiled-maps.mdx
+++ b/site/src/content/guide/assets/tiled-maps.mdx
@@ -102,7 +102,7 @@ Two Tiled property types aren't plain scalars and convert to structured values i
 - **`object`-typed properties** — a reference to another Tiled object by numeric id — convert to a `TilePropertyObjectRef`: `{ kind: 'objectRef', id }`. Resolve it by matching `id` against another object's `id` in the same map:
 
   ```js no-check -- reading a custom property needs the object narrowing the block leaves out for brevity
-  import { TilePropertyKind } from '@codexo/exojs-tilemap';
+  import { TilePropertyKind } from '@codexo/exojs/tilemap';
 
   const door = spawnLayer.objects.find(object => object.name === 'Door');
   const target = door.properties.linkedSwitch;
@@ -127,7 +127,7 @@ Before this conversion existed, `object`- and `class`-typed properties were indi
 An object placed with Tiled's *insert tile* tool converts to a `TileObject` — `kind` is `'tile'` and `tile` carries the resolved `ResolvedTile` (tileset, local tile id, flip flags):
 
 ```ts
-import { ObjectKind } from '@codexo/exojs-tilemap';
+import { ObjectKind } from '@codexo/exojs/tilemap';
 
 const tileMap = map.toTileMap();
 const [propLayer] = tileMap.objectLayers;
@@ -160,7 +160,7 @@ The two helpers behind this are exported for when you work with the parsed sourc
 An object drawn with Tiled's text tool converts to a `TextObject` — a `TileMapObject` whose `kind` is `'text'` and whose `text` field carries the styled content:
 
 ```ts
-import { ObjectKind } from '@codexo/exojs-tilemap';
+import { ObjectKind } from '@codexo/exojs/tilemap';
 
 const tileMap = map.toTileMap();
 const [captionLayer] = tileMap.objectLayers;
@@ -224,9 +224,9 @@ To go straight to colliders, `@codexo/exojs-tilemap-physics` builds and streams
 
 ```ts
 import { Scene, SystemOrder } from '@codexo/exojs';
-import { PhysicsWorld } from '@codexo/exojs-physics';
-import type { TileLayer } from '@codexo/exojs-tilemap';
-import { TileColliderStreamer } from '@codexo/exojs-tilemap-physics';
+import { PhysicsWorld } from '@codexo/exojs/physics';
+import type { TileLayer } from '@codexo/exojs/tilemap';
+import { TileColliderStreamer } from '@codexo/exojs/tilemap-physics';
 
 declare const ground: TileLayer;
 
@@ -270,7 +270,7 @@ Wang sets — Tiled's terrain/auto-tile definitions — parse onto `TiledTileset
 Tiled's tile editor lets you give a tile an animation: a sequence of frames, each showing a different local tile ID for a set duration. `toTileMap()` carries these frames into `TileDefinition.animation`; `@codexo/exojs-tilemap` ships `TileAnimator` to drive them at runtime, RPG-Maker style — advancing every animated cell across one or more layers on a shared clock:
 
 ```ts
-import { TileAnimator } from '@codexo/exojs-tilemap';
+import { TileAnimator } from '@codexo/exojs/tilemap';
 
 const tileMap = map.toTileMap();
 const animator = new TileAnimator(tileMap.layers);
diff --git a/site/src/content/guide/assets/worlds-and-spawning.mdx b/site/src/content/guide/assets/worlds-and-spawning.mdx
index 7dff2f794..2722cee52 100644
--- a/site/src/content/guide/assets/worlds-and-spawning.mdx
+++ b/site/src/content/guide/assets/worlds-and-spawning.mdx
@@ -29,7 +29,7 @@ A [`MapWorld`](/ExoJS/en/api/map-world/) is metadata about *where* levels are 
 
 ```ts
 import { Asset, type LoaderScope } from '@codexo/exojs';
-import type { MapBounds, MapWorld } from '@codexo/exojs-tilemap';
+import type { MapBounds, MapWorld } from '@codexo/exojs/tilemap';
 
 export async function readWorld(scope: LoaderScope, cameraBounds: MapBounds): Promise<MapWorld> {
     const project = await scope.load(Asset.type('ldtkProject', 'https://example.com/world.ldtk'));
@@ -148,7 +148,7 @@ Pass it to a level load, or spawn from a `TileMap` directly:
 
 ```ts
 import type { Container } from '@codexo/exojs';
-import type { MapObjectSpawner, MapWorldRuntime } from '@codexo/exojs-tilemap';
+import type { MapObjectSpawner, MapWorldRuntime } from '@codexo/exojs/tilemap';
 
 interface GameContext {
     difficulty: number;
@@ -172,7 +172,7 @@ export async function loadForest(
 A factory receives a `MapObjectDescriptor` — the same shape for Tiled and for LDtk:
 
 ```ts
-import type { MapObjectDescriptor } from '@codexo/exojs-tilemap';
+import type { MapObjectDescriptor } from '@codexo/exojs/tilemap';
 
 export function describe(object: MapObjectDescriptor): void {
     object.id;          // stable id: LDtk entity iid, or the Tiled object id as a string
diff --git a/site/src/content/guide/audio/audio-basics.mdx b/site/src/content/guide/audio/audio-basics.mdx
index 11f9f3741..7d0b51dc9 100644
--- a/site/src/content/guide/audio/audio-basics.mdx
+++ b/site/src/content/guide/audio/audio-basics.mdx
@@ -39,7 +39,7 @@ A `Sound` is a data descriptor that holds a decoded buffer; each `app.audio.play
 
 ## AudioContext auto-unlock
 
-Browsers require a user gesture before Web Audio starts. ExoJS handles this automatically: the `AudioContext` is created on first use and resumed (un-suspended) on the first `mousedown`, `touchstart`, or `touchend` event observed on `document`.
+Browsers require a user gesture before Web Audio starts. ExoJS handles this automatically: the `AudioContext` is created on first use and resumed (un-suspended) on the first pointer press or release, `mousedown`, `touchstart`, `touchend` or `keydown` observed on `document`. The listeners run in the capture phase, so a click on the application's canvas unlocks audio even though the input system consumes the press there.
 
 `app.audio.play(asset, ...)` always returns a `Voice` immediately, even while audio is still locked — but what that voice does depends on the asset:
 
diff --git a/site/src/content/guide/audio/audio-effects.mdx b/site/src/content/guide/audio/audio-effects.mdx
index db7a97907..6bd47f2d3 100644
--- a/site/src/content/guide/audio/audio-effects.mdx
+++ b/site/src/content/guide/audio/audio-effects.mdx
@@ -17,7 +17,7 @@ A bus's filter chain is `inputNode → [filter₁ → filter₂ → ...] → pan
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { CompressorEffect, DelayEffect, ReverbEffect } from '@codexo/exojs-audio-fx';
+import { CompressorEffect, DelayEffect, ReverbEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -34,7 +34,7 @@ Remove a filter to take it out of the chain without destroying it:
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { ReverbEffect } from '@codexo/exojs-audio-fx';
+import { ReverbEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 declare const reverb: ReverbEffect;
@@ -58,7 +58,7 @@ A dynamics compressor that clamps the dynamic range of audio passing through it.
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { CompressorEffect } from '@codexo/exojs-audio-fx';
+import { CompressorEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -87,7 +87,7 @@ All properties are live get/set. The `compressor.reduction` getter returns the c
 `ReverbEffect` simulates acoustic space by convolving audio through a procedurally-generated impulse response:
 
 ```ts
-import { ReverbEffect } from '@codexo/exojs-audio-fx';
+import { ReverbEffect } from '@codexo/exojs/audio-fx';
 
 const reverb = new ReverbEffect({
     durationSeconds: 2,   // IR length — longer = bigger space
@@ -103,7 +103,7 @@ Changing `durationSeconds` or `decay` on a live `ReverbEffect` rebuilds its impu
 `DelayEffect` creates an echo with configurable feedback:
 
 ```ts
-import { DelayEffect } from '@codexo/exojs-audio-fx';
+import { DelayEffect } from '@codexo/exojs/audio-fx';
 
 const delay = new DelayEffect({
     delaySeconds: 0.3,    // echo interval
@@ -120,7 +120,7 @@ A sidechain compressor — when the sidechain bus exceeds a threshold, the main
 
 ```ts
 import { type Application, AudioBus } from '@codexo/exojs';
-import { DuckingEffect } from '@codexo/exojs-audio-fx';
+import { DuckingEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -146,7 +146,7 @@ Several filters cover tone shaping and modulation effects:
 
 ```ts
 import { HighpassFilter, LowpassFilter } from '@codexo/exojs';
-import { ChorusEffect, EqualizerEffect } from '@codexo/exojs-audio-fx';
+import { ChorusEffect, EqualizerEffect } from '@codexo/exojs/audio-fx';
 
 // Three-band equalizer — low shelf, peaking mid, high shelf
 const eq = new EqualizerEffect({ low: 3, mid: -2, high: 4 });
@@ -171,7 +171,7 @@ Soft-clip saturation through a tanh-based `WaveShaperNode` curve, followed by a
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { DistortionEffect } from '@codexo/exojs-audio-fx';
+import { DistortionEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -185,7 +185,7 @@ Sweeps a cascade of allpass filters with a sine LFO, producing moving notches in
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { PhaserEffect } from '@codexo/exojs-audio-fx';
+import { PhaserEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -199,7 +199,7 @@ A short (0.5–20 ms) LFO-modulated delay with a feedback loop, producing the cl
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { FlangerEffect } from '@codexo/exojs-audio-fx';
+import { FlangerEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -213,7 +213,7 @@ Amplitude-modulates the signal with a sine LFO for classic volume pulsing: the g
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { TremoloEffect } from '@codexo/exojs-audio-fx';
+import { TremoloEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -227,7 +227,7 @@ Multiplies the input by a carrier oscillator, producing sum/difference sidebands
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { RingModulatorEffect } from '@codexo/exojs-audio-fx';
+import { RingModulatorEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -241,7 +241,7 @@ An envelope-driven wah: a rectifier and smoothing filter track input loudness an
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { AutoWahEffect } from '@codexo/exojs-audio-fx';
+import { AutoWahEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -257,7 +257,7 @@ A stereo delay whose taps cross-feed between channels, bouncing echoes hard-left
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { PingPongDelayEffect } from '@codexo/exojs-audio-fx';
+import { PingPongDelayEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -271,7 +271,7 @@ A limiter-style compressor — a `DynamicsCompressorNode` at its highest ratio w
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { LimiterEffect } from '@codexo/exojs-audio-fx';
+import { LimiterEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
@@ -287,7 +287,7 @@ An impulse response is just an audio file, so it loads like any other sound —
 
 ```ts
 import { type Application, Sound } from '@codexo/exojs';
-import { ConvolutionEffect } from '@codexo/exojs-audio-fx';
+import { ConvolutionEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 declare const hall: Sound;
@@ -309,7 +309,7 @@ A `WorkletEffect` loads its processor asynchronously — the bus rewires itself
 </Callout>
 
 ```ts no-check -- effect-constructor tour; modulatorBus is the caller's own bus
-import { BitCrusherEffect, GranularEffect, PitchShiftEffect, VocoderEffect } from '@codexo/exojs-audio-fx';
+import { BitCrusherEffect, GranularEffect, PitchShiftEffect, VocoderEffect } from '@codexo/exojs/audio-fx';
 
 // Granular pitch shifting (0.25x to 4x)
 const shifter = new PitchShiftEffect({ pitch: 1.2, wet: 1.0 });
@@ -332,7 +332,7 @@ Bus-level filters affect everything on that bus. Create isolated chains for spec
 
 ```ts
 import { type Application, AudioBus, LowpassFilter, Sound } from '@codexo/exojs';
-import { ReverbEffect } from '@codexo/exojs-audio-fx';
+import { ReverbEffect } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 declare const wind: Sound;
diff --git a/site/src/content/guide/audio/beat-detection.mdx b/site/src/content/guide/audio/beat-detection.mdx
index d917a87f3..b611e8047 100644
--- a/site/src/content/guide/audio/beat-detection.mdx
+++ b/site/src/content/guide/audio/beat-detection.mdx
@@ -19,7 +19,7 @@ The detector taps a live audio source — an `AudioBus`, a `Voice`, an `AudioNod
 
 ```ts
 import { type Application, AudioStream } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 declare const track: AudioStream;
@@ -34,7 +34,7 @@ You can also pass the source as a constructor option, or point it at a single vo
 
 ```ts
 import { type Application, AudioStream } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 declare const track: AudioStream;
@@ -61,7 +61,7 @@ Two read-only getters give you the detector's current tempo estimate:
 `tempo` returns 0 until the detector has enough data to lock onto a stable beat. `confidence` rises as the beat grid stabilises. The `onTempoChange` signal fires when the detector settles on a new tempo:
 
 ```ts
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const detector: BeatDetector;
 
@@ -86,7 +86,7 @@ Four signals fire at discrete moments in the music:
 Use `onBeat` for things that should happen on every beat — a sprite pulses, a particle burst fires, a UI element flashes:
 
 ```ts
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const detector: BeatDetector;
 declare const particleBurst: { reset(): void };
@@ -105,7 +105,7 @@ detector.onBeat.add(info => {
 Use `onDownbeat` for events that should only fire on the "one" — a brighter flash, a bar-level visual change, a camera shake:
 
 ```ts
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const detector: BeatDetector;
 const visualState = { barFlash: 0 };
@@ -118,7 +118,7 @@ detector.onDownbeat.add(info => {
 `BeatInfo` carries `isDownbeat` and `beatInBar` so you can use the general `onBeat` signal and filter inside the callback:
 
 ```ts
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const detector: BeatDetector;
 
@@ -136,7 +136,7 @@ detector.onBeat.add(info => {
 The detector exposes read-only state you can poll every frame:
 
 ```ts
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const detector: BeatDetector;
 
@@ -176,7 +176,7 @@ The times use the audio-context clock. A current interpretation can expire befor
 Set detection `false` for an explicit four-beat counting convention, anchored to the first tracked beat rather than an inferred musical bar. Its estimate has `origin: 'convention'` and score 1, which describes the chosen rule rather than certainty about the music:
 
 ```ts
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 const detector = new BeatDetector({
     enableTimeSignatureDetection: false,
@@ -190,7 +190,7 @@ When migrating existing callers, allow missing automatic bar events during acqui
 Provide explicit context when the intended cycle is already known:
 
 ```ts
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const detector: BeatDetector;
 
@@ -216,7 +216,7 @@ Construction options with their defaults:
 
 ```ts
 import type { Application } from '@codexo/exojs';
-import { BeatDetector } from '@codexo/exojs-audio-fx';
+import { BeatDetector } from '@codexo/exojs/audio-fx';
 
 declare const application: Application;
 
diff --git a/site/src/content/guide/debugging/debugging-and-inspection.mdx b/site/src/content/guide/debugging/debugging-and-inspection.mdx
index 484e8de8e..ff367a3c0 100644
--- a/site/src/content/guide/debugging/debugging-and-inspection.mdx
+++ b/site/src/content/guide/debugging/debugging-and-inspection.mdx
@@ -78,6 +78,8 @@ Keep logging at the boundary that can add meaningful context: which scene, asset
 
 A logger sink is an external subscription. Retain and call its unsubscribe function when its owner ends. Do not log private save data, access tokens, or full user documents merely to identify a decoding failure.
 
+In the playground, the Output panel under the preview shows what the running example writes with `console.log`, `info`, `debug`, `warn` and `error`, together with uncaught errors and unhandled promise rejections. It records the console of the preview page itself; workers and audio worklets have consoles of their own, and their messages stay in the browser's developer tools. The panel keeps the most recent messages of the current run and drops a burst it cannot keep up with, counting what it dropped, while the developer tools still receive every message.
+
 ## Turn the observation into a regression test
 
 Once the failure is understood, capture the smallest useful contract: a resource releases when its scope ends, a scene navigation rejects cleanly, an interaction scope traps focus, or a render tree contains the intended filter. A structural assertion catches structural drift; a visual or GPU claim still needs the corresponding rendering evidence.
diff --git a/site/src/content/guide/getting-started/migration-v020.mdx b/site/src/content/guide/getting-started/migration-v020.mdx
new file mode 100644
index 000000000..7fce53495
--- /dev/null
+++ b/site/src/content/guide/getting-started/migration-v020.mdx
@@ -0,0 +1,70 @@
+---
+title: 'Migrating to ExoJS v0.20'
+description: 'Move runtime imports to Core subpaths, replace script-tag bundles with module scripts, and understand the legacy compatibility shims.'
+---
+
+# Migrating to ExoJS v0.20
+
+ExoJS v0.20 folds the seven runtime packages into Core subpaths, consolidates the debug entry, and ships ESM only. This page is the breaking-change reference for that migration. Nothing here removes the older releases: published 0.19.x packages and the v0.19 script-tag bundles keep working for applications that pin them.
+
+## Runtime imports move to Core subpaths
+
+The seven runtime packages are no longer installed or published on their own. Import the same symbols from a Core subpath:
+
+| Before (0.19.x)                    | After (v0.20)                   |
+| ---------------------------------- | ------------------------------- |
+| `@codexo/exojs-tilemap`            | `@codexo/exojs/tilemap`         |
+| `@codexo/exojs-particles`          | `@codexo/exojs/particles`       |
+| `@codexo/exojs-audio-fx`           | `@codexo/exojs/audio-fx`        |
+| `@codexo/exojs-physics`            | `@codexo/exojs/physics`         |
+| `@codexo/exojs-tilemap-physics`    | `@codexo/exojs/tilemap-physics` |
+| `@codexo/exojs-lighting`           | `@codexo/exojs/lighting`        |
+| `@codexo/exojs/pathfinding`        | `@codexo/exojs/pathfinding`     |
+| `@codexo/exojs-physics/debug`      | `@codexo/exojs/debug`           |
+
+`@codexo/exojs/debug` is the one debug entry. It exports the existing debug layers plus `PhysicsDebugDraw` and `PhysicsDebugDrawOptions`; the former `@codexo/exojs-physics/debug` entry now forwards to it through the legacy shim. The adapters `@codexo/exojs-tiled`, `@codexo/exojs-ldtk`, `@codexo/exojs-aseprite` and `@codexo/exojs-react` stay separate packages, now consuming the Core tilemap subpath and declaring a `0.20.x` Core peer.
+
+Remove the seven retired package names from your `package.json` dependencies and install the matching `@codexo/exojs` version. Then move the import specifiers. An AST-based codemod in the repository does exactly this without touching prose, URLs or strings:
+
+```sh
+npx tsx scripts/codemods/migrate-v020-imports.ts src/
+npx tsx scripts/codemods/migrate-v020-imports.ts --check src/
+```
+
+It rewrites import/export declarations, `import()`, `require()`, `declare module` names and test-runner mocks in TypeScript, JavaScript, Markdown and MDX files. Deep imports of a retired package with no v0.20 equivalent are reported for a manual decision rather than rewritten. Package manifests are left alone.
+
+## Script tags: IIFE bundles are gone
+
+v0.20 ships no `exo.iife.js` / `exo.full.iife.js` and no `Exo` global. A page that used a classic script tag moves to a module script with an import map over the ESM tree:
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "@codexo/exojs": "./vendor/exojs/esm/index.js",
+      "@codexo/exojs/physics": "./vendor/exojs/esm/physics/index.js"
+    }
+  }
+</script>
+<script type="module">
+  import { Application, Scene } from '@codexo/exojs';
+</script>
+```
+
+Import maps require module scripts and a JavaScript MIME type for every file they resolve. The Full Release ZIP's `vendor/exojs/esm/` tree (or the npm package's `dist/esm/`) is what to serve. Keep the map, engine, debug module and optional packages version-aligned, and do not mix a bundled Core with a second Core instance loaded from the module tree.
+
+## Legacy compatibility shims for the 0.20 line
+
+For the 0.20 line, thin ESM/TypeScript shim packages keep the seven retired names importable: they re-export the exact objects from the new subpaths, carry no second implementation, and declare a `0.20.x` Core peer. They exist so an application can move its imports without a flag day; feature work happens only on the subpaths. The shims are not republished for unchanged Core patches, and the planned deprecation (with the per-package notice that v0.20 imports come from `@codexo/exojs/<subpath>`) has been prepared but not executed.
+
+## TypeScript resolution
+
+Core's declarations resolve under `"moduleResolution": "bundler"` and under `node16`/`nodenext`; every shipped declaration names its imports with explicit `.js` specifiers. No consumer `paths` mapping or `skipLibCheck` is needed.
+
+## What did not change
+
+Core's root entry, `Assets`, `Sprite`, the KTX2/Basis worker and WASM integration, the scene and loader semantics, and the serialized values all keep their behavior. The playground examples no longer read an injected `assets` global: they import their media from the optional `@codexo/exojs-demo-assets` package, whose descriptors load through the existing `loader.get()` / `await loader.load()` contract, so an example copied out of the playground runs wherever that package is installed.
+
+## Where to go next
+
+For static hosting and import-map specifics see [Deployment](/ExoJS/en/guide/shipping/deployment/). For the asset catalog see its package README and the [Assets](/ExoJS/en/guide/assets/) guide.
diff --git a/site/src/content/guide/getting-started/what-is-exojs.mdx b/site/src/content/guide/getting-started/what-is-exojs.mdx
index 7b240acfd..ec8be2701 100644
--- a/site/src/content/guide/getting-started/what-is-exojs.mdx
+++ b/site/src/content/guide/getting-started/what-is-exojs.mdx
@@ -27,7 +27,7 @@ Those boundaries are useful when embedding a canvas in a web application: the br
 
 ## Distribution and maturity
 
-ExoJS provides ESM, TypeScript declarations, and prebuilt script-tag bundles. `exo.iife.js` contains Core; `exo.full.iife.js` also includes the official runtime extensions except React and tilemap physics. Both expose `Exo`. The [Setup guide](/ExoJS/en/guide/getting-started/setup/) starts with ESM and a bundler.
+ExoJS ships ESM and TypeScript declarations; since v0.20 there are no prebuilt IIFE global bundles. A page loads the runtime as a module script - either bundled, or directly from `dist/esm` with an import map. The [Setup guide](/ExoJS/en/guide/getting-started/setup/) starts with ESM and a bundler; the [v0.20 migration guide](/ExoJS/en/guide/getting-started/migration-v020/) covers the script-tag and import changes.
 
 The project is pre-1.0. Pin exact package versions and read release notes before upgrading. Match documentation to your installed release: the `next` branch can describe features not yet published on npm.
 
diff --git a/site/src/content/guide/rendering/infinite-maps.mdx b/site/src/content/guide/rendering/infinite-maps.mdx
index 79063bbff..ba14b009d 100644
--- a/site/src/content/guide/rendering/infinite-maps.mdx
+++ b/site/src/content/guide/rendering/infinite-maps.mdx
@@ -21,7 +21,7 @@ Omit `width` and `height` together (they are paired — provide both or neither)
 - `pixelWidth` and `pixelHeight` are `undefined` — **not** `Infinity`. There is no finite extent to report, so there is no number to give.
 
 ```ts
-import { TileLayer, TileMap } from '@codexo/exojs-tilemap';
+import { TileLayer, TileMap } from '@codexo/exojs/tilemap';
 
 // No width/height: the layer (and map) are unbounded. Chunk storage now
 // accepts any signed chunk coordinate instead of a fixed 0..N grid.
@@ -65,7 +65,7 @@ Both must be pure and deterministic, for the reason the callout above spells out
 
 ```ts
 import { View } from '@codexo/exojs';
-import { ChunkStreamer, createSampledChunkSource, TILE_TRANSFORM_IDENTITY, TileLayer, type TileSet } from '@codexo/exojs-tilemap';
+import { ChunkStreamer, createSampledChunkSource, TILE_TRANSFORM_IDENTITY, TileLayer, type TileSet } from '@codexo/exojs/tilemap';
 
 // The tileset you built from your tilesheet (see the Tilesets guide).
 declare const tileset: TileSet;
@@ -151,7 +151,7 @@ A sampling function that is expensive per tile can stall the main thread while a
 You cannot hand it a live function: functions cannot cross a `postMessage` boundary. Instead you pass `workerSource` — a complete, self-contained worker script as a **string** (a template literal in your own module). It is Blob-URL'd into a real `Worker` at construction, the same technique the audio package uses to spin up AudioWorklet processors from a source string. Because it shares no scope with your module, the worker must carry its own copy of the sampling code. The script implements a small request/response protocol:
 
 ```ts
-import { createWorkerSampledChunkSource, TILE_TRANSFORM_IDENTITY, type TileLayer, type TileSet } from '@codexo/exojs-tilemap';
+import { createWorkerSampledChunkSource, TILE_TRANSFORM_IDENTITY, type TileLayer, type TileSet } from '@codexo/exojs/tilemap';
 
 declare const terrain: TileLayer;
 declare const tileset: TileSet;
@@ -217,7 +217,7 @@ You do not have to generate terrain procedurally — you can stream a hand-autho
 
 ```ts
 import { View } from '@codexo/exojs';
-import { ChunkStreamer } from '@codexo/exojs-tilemap';
+import { ChunkStreamer } from '@codexo/exojs/tilemap';
 import type { TiledMap } from '@codexo/exojs-tiled';
 
 declare const tiled: TiledMap; // loaded through the @codexo/exojs-tiled Loader
diff --git a/site/src/content/guide/rendering/pixel-snapping.mdx b/site/src/content/guide/rendering/pixel-snapping.mdx
index 8bab50bfb..7f324f851 100644
--- a/site/src/content/guide/rendering/pixel-snapping.mdx
+++ b/site/src/content/guide/rendering/pixel-snapping.mdx
@@ -11,7 +11,7 @@ When a drawable lands between device pixels — a camera at a fractional offset,
 
 ```ts
 import { type NineSliceSprite, PixelSnapMode, type Sprite } from '@codexo/exojs';
-import type { TileMapNode } from '@codexo/exojs-tilemap';
+import type { TileMapNode } from '@codexo/exojs/tilemap';
 
 declare const sprite: Sprite;
 declare const panel: NineSliceSprite;
@@ -77,7 +77,7 @@ Both modes are resolved in the vertex shaders against the composed device grid,
 
 ```ts
 import { PixelSnapMode } from '@codexo/exojs';
-import { TileLayerNode, TileMap, TileMapNode, TileMapView } from '@codexo/exojs-tilemap';
+import { TileLayerNode, TileMap, TileMapNode, TileMapView } from '@codexo/exojs/tilemap';
 
 declare const map: TileMap;
 
diff --git a/site/src/content/guide/shipping/deployment.mdx b/site/src/content/guide/shipping/deployment.mdx
index 93565f6f8..fdc20062a 100644
--- a/site/src/content/guide/shipping/deployment.mdx
+++ b/site/src/content/guide/shipping/deployment.mdx
@@ -54,20 +54,28 @@ Verify JavaScript MIME types, font and media responses, HTTPS, and any required
 
 ## Using a release bundle without a bundler
 
-Core provides ESM and classic-script bundles. Prefer a bundler-based project for dependency resolution and tree shaking; importing selected names from an already bundled browser module does not make the browser download only those exports.
+Core ships ESM only. Prefer a bundler-based project for dependency resolution and tree shaking; importing selected names from an already bundled browser module does not make the browser download only those exports.
 
-For a classic script, copy a specific release's Core bundle into your deployed files:
+For a module script, copy a specific release's `dist/esm/` tree (or the Full Release ZIP's `vendor/exojs/esm/`) into your deployed files and map the package name with an import map:
 
 ```html
-<script src="./vendor/exo.iife.min.js"></script>
-<script>
-  const { Application, Scene } = Exo;
+<script type="importmap">
+  {
+    "imports": {
+      "@codexo/exojs": "./vendor/exojs/esm/index.js",
+      "@codexo/exojs/physics": "./vendor/exojs/esm/physics/index.js"
+    }
+  }
+</script>
+<script type="module">
+  import { Application, Scene } from '@codexo/exojs';
+  import { PhysicsDebugDraw } from '@codexo/exojs/physics';
 </script>
 ```
 
-The Core-only bundle is `exo.iife.min.js`. `exo.full.iife.min.js` contains Core and the official runtime packages except React and tilemap physics on the same `Exo` global. Choose one; do not load separate independent Core copies together. The full bundle includes APIs, but package-specific systems and application configuration still need to be used correctly.
+Import maps require the page's scripts to be modules and the files to be served with a JavaScript MIME type. The classic-script bundles of earlier lines (`exo.iife.min.js`, `exo.full.iife.min.js` and the `Exo` global) are gone since v0.20; see the [v0.20 migration guide](/ExoJS/en/guide/getting-started/migration-v020/) for the replacement patterns.
 
-For browser ESM, the debug bundle is external-Core and needs `@codexo/exojs` resolved to the same Core module, for example through an import map. Keep the map, engine, debug module, and optional packages version-aligned. Avoid unversioned CDN URLs in a reproducible production deployment.
+The debug bundle (`exo.debug.esm.js`) is external-Core and needs `@codexo/exojs` resolved to the same Core module, for example through the same import map. Keep the map, engine, debug module, and optional packages version-aligned. Avoid unversioned CDN URLs in a reproducible production deployment.
 
 ## Policies and optional features
 
diff --git a/site/src/env.d.ts b/site/src/env.d.ts
index a57688d03..3f3e0180c 100644
--- a/site/src/env.d.ts
+++ b/site/src/env.d.ts
@@ -7,7 +7,6 @@ declare namespace JSX {
 interface Window {
   __EXAMPLE_META__?: import('./lib/types').Example | null;
   __EXAMPLE_PREVIEW_ERROR_RENDERED__?: boolean;
-  assets?: Record<string, unknown>;
 }
 
 declare module '*.scss?inline' {
@@ -29,3 +28,15 @@ declare module '*?worker' {
   const WorkerConstructor: new () => Worker;
   export default WorkerConstructor;
 }
+
+/** The site build identity the Astro config resolved; see `site/scripts/write-site-build.ts`. */
+declare const __EXOJS_SITE_BUILD__: {
+  readonly channel: 'stable' | 'next';
+  readonly basePath: string;
+  readonly sourceSha: string;
+  readonly packageVersion: string;
+  readonly assetProfile: string;
+  readonly createdAt: string;
+  readonly localTest: boolean;
+  readonly counterpartBase: string | null;
+};
diff --git a/site/src/layouts/AppShell.astro b/site/src/layouts/AppShell.astro
index 3fb5f5120..b6cc38789 100644
--- a/site/src/layouts/AppShell.astro
+++ b/site/src/layouts/AppShell.astro
@@ -6,6 +6,8 @@ import '@fontsource/jetbrains-mono/400.css';
 import '@fontsource/jetbrains-mono/500.css';
 import '../styles/global.scss';
 
+import ChannelBanner from '../components/ChannelBanner.astro';
+import ChannelHead from '../components/ChannelHead.astro';
 import { ExoHeader } from '../components/ExoHeader';
 
 interface Props {
@@ -24,6 +26,7 @@ const currentLocale = Astro.currentLocale === 'de' ? 'de' : 'en';
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content={description} />
+    <ChannelHead />
     <link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}favicon.svg`} />
     <link rel="icon" type="image/png" sizes="96x96" href={`${import.meta.env.BASE_URL}favicon-96x96.png`} />
     <link rel="shortcut icon" href={`${import.meta.env.BASE_URL}favicon.ico`} />
@@ -50,6 +53,7 @@ const currentLocale = Astro.currentLocale === 'de' ? 'de' : 'en';
     <a class="skip-link" href="#main-content">
       Skip to main content
     </a>
+    <ChannelBanner locale={currentLocale} />
     <div class="app-shell">
       <ExoHeader client:load baseUrl={import.meta.env.BASE_URL} currentPath={currentPath} locale={currentLocale} />
       <main id="main-content" tabindex="-1" class="app-shell__main">
diff --git a/site/src/lib/api-reference.ts b/site/src/lib/api-reference.ts
index f479cf35e..f0b3d68f3 100644
--- a/site/src/lib/api-reference.ts
+++ b/site/src/lib/api-reference.ts
@@ -48,8 +48,8 @@ export const API_SUBSYSTEM_META: Record<ApiSubsystem, { label: string; descripti
     description: 'Playback, analysis, spatialization, and effect chains.',
   },
   particles: {
-    label: 'Particles (official extension)',
-    description: 'The @codexo/exojs-particles package: particle systems, modules, distributions, and GPU-backed simulation.',
+    label: 'Particles (Core subpath)',
+    description: 'The @codexo/exojs/particles subpath: particle systems, modules, distributions, and GPU-backed simulation.',
   },
   animation: {
     label: 'Animation',
@@ -72,16 +72,16 @@ export const API_SUBSYSTEM_META: Record<ApiSubsystem, { label: string; descripti
     description: 'The extension system: renderer/asset/serializer bindings and the extension registry.',
   },
   tilemap: {
-    label: 'Tilemap (official extension)',
-    description: 'The @codexo/exojs-tilemap package: generic tilemap runtime, chunks, layers, and views.',
+    label: 'Tilemap (Core subpath)',
+    description: 'The @codexo/exojs/tilemap subpath: generic tilemap runtime, chunks, layers, and views.',
   },
   tiled: {
     label: 'Tiled (official extension)',
     description: 'The @codexo/exojs-tiled package: load Tiled (.tmj) tilemaps through the loader.',
   },
   physics: {
-    label: 'Physics (official extension)',
-    description: 'The @codexo/exojs-physics package: rigid bodies, colliders, joints, sleeping, CCD, queries, and the TGS-Soft solver.',
+    label: 'Physics (Core subpath)',
+    description: 'The @codexo/exojs/physics subpath: rigid bodies, colliders, joints, sleeping, CCD, queries, and the TGS-Soft solver.',
   },
   aseprite: {
     label: 'Aseprite (official extension)',
@@ -92,16 +92,16 @@ export const API_SUBSYSTEM_META: Record<ApiSubsystem, { label: string; descripti
     description: 'The @codexo/exojs-ldtk package: load LDtk levels and layers through the loader.',
   },
   'tilemap-physics': {
-    label: 'Tilemap physics (official extension)',
-    description: 'The @codexo/exojs-tilemap-physics package: static physics colliders built and streamed from tilemap collision geometry.',
+    label: 'Tilemap physics (Core subpath)',
+    description: 'The @codexo/exojs/tilemap-physics subpath: static physics colliders built and streamed from tilemap collision geometry.',
   },
   lighting: {
-    label: 'Lighting (official extension)',
-    description: 'The @codexo/exojs-lighting package: forward normal-mapped point lighting for sprites, in one batch and one pass.',
+    label: 'Lighting (Core subpath)',
+    description: 'The @codexo/exojs/lighting subpath: forward normal-mapped point lighting for sprites, in one batch and one pass.',
   },
   pathfinding: {
-    label: 'Pathfinding (official extension)',
-    description: 'The @codexo/exojs-pathfinding package: deterministic A* and jump-point search over weighted grids and waypoint graphs.',
+    label: 'Pathfinding (Core subpath)',
+    description: 'The @codexo/exojs/pathfinding subpath: deterministic A* and jump-point search over weighted grids and waypoint graphs.',
   },
 };
 
diff --git a/site/src/lib/asset-catalog.ts b/site/src/lib/asset-catalog.ts
deleted file mode 100644
index 730cd6f40..000000000
--- a/site/src/lib/asset-catalog.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { assets as rawAssets } from '../../../examples/assets/assets.js';
-import { resolveAssetCatalog } from '../../../examples/assets/resolver.js';
-
-const SITE_BASE = import.meta.env.BASE_URL;
-const ASSET_BASE = `${SITE_BASE}assets/`;
-
-export const assets = resolveAssetCatalog(rawAssets as unknown as Record<string, unknown>, ASSET_BASE);
-
-export const assetUrl = (path: string): string => `${ASSET_BASE}${path.startsWith('/') ? path.slice(1) : path}`;
diff --git a/site/src/lib/example-aliases.ts b/site/src/lib/example-aliases.ts
index 34ba3b9de..80e1866ad 100644
--- a/site/src/lib/example-aliases.ts
+++ b/site/src/lib/example-aliases.ts
@@ -1,5 +1,3 @@
-import { isCurrentVersion } from './versions';
-
 export const EXAMPLE_ALIASES: Readonly<Record<string, string>> = {
   'getting-started/game-loop.js': 'getting-started/hello-world.js',
   'sprites-textures/spritesheet-frames.js': 'tweens-animation/frame-animation.js',
@@ -59,26 +57,3 @@ export const EXAMPLE_ALIASES: Readonly<Record<string, string>> = {
 };
 
 export const resolveExampleAlias = (path: string): string => EXAMPLE_ALIASES[path] ?? path;
-
-/**
- * Former examples that now live on a site tool page, keyed by catalog path.
- * Values are relative to a locale root (`<base>/<locale>/`). These are not
- * example aliases: a relocated path has no example to fall back to in the
- * current catalog.
- */
-export const EXAMPLE_TOOL_RELOCATIONS: Readonly<Record<string, string>> = {
-  'debug-layer/asset-browser.js': 'tools/asset-browser/',
-};
-
-/**
- * The tool page a playground request should leave for, or `null` to open it as
- * an example. Only the current version relocates: a historical version still
- * ships the example at its original path.
- */
-export const resolveExampleToolRelocation = (versionId: string, path: string | null): string | null => {
-  if (path === null || !isCurrentVersion(versionId)) {
-    return null;
-  }
-
-  return EXAMPLE_TOOL_RELOCATIONS[path] ?? null;
-};
diff --git a/site/src/lib/guide-structure.ts b/site/src/lib/guide-structure.ts
index d3b5808b1..9ee47d505 100644
--- a/site/src/lib/guide-structure.ts
+++ b/site/src/lib/guide-structure.ts
@@ -87,6 +87,17 @@ const RAW_PARTS: ReadonlyArray<RawPart> = [
         examples: ['getting-started/resize-and-dpr'],
         apiLinks: ['application'],
       },
+      {
+        path: 'getting-started/migration-v020',
+        level: 'intermediate',
+        learningGoals: [
+          'Replace the retired runtime package names with Core subpaths',
+          'Move script-tag consumers from the removed IIFE bundles to module scripts with an import map',
+        ],
+        prerequisites: ['getting-started/setup'],
+        examples: [],
+        apiLinks: ['application', 'loader'],
+      },
     ],
   },
   {
diff --git a/site/src/lib/preview-console.ts b/site/src/lib/preview-console.ts
new file mode 100644
index 000000000..6d72e26ff
--- /dev/null
+++ b/site/src/lib/preview-console.ts
@@ -0,0 +1,730 @@
+/**
+ * The playground's preview console: captures what an example writes to the
+ * console of its preview iframe, plus the uncaught errors the preview reports,
+ * and keeps a bounded, generation-scoped record for the Output panel.
+ *
+ * Capture is a same-origin patch of the preview window's `console` methods,
+ * installed by the parent before the example's module is appended. Each patch
+ * calls the original method first, so DevTools keeps every message. Workers
+ * and audio worklets have consoles of their own that are not patched; their
+ * output stays in DevTools only.
+ */
+
+export type ConsoleSeverity = 'log' | 'info' | 'debug' | 'warn' | 'error';
+
+export const CONSOLE_METHODS: readonly ConsoleSeverity[] = ['log', 'info', 'debug', 'warn', 'error'];
+
+/** A window whose console the bridge can patch; `Window` itself does not declare `console`. */
+export type ConsoleWindow = Window & { readonly console: Console };
+
+/**
+ * - `console`: a console call made by the preview.
+ * - `exception`: an uncaught error or unhandled rejection; the example stopped.
+ * - `suppressed`: stands in for messages dropped by the rate limit.
+ */
+export type OutputEntryKind = 'console' | 'exception' | 'suppressed';
+
+export interface OutputEntry {
+  readonly id: number;
+  readonly kind: OutputEntryKind;
+  readonly severity: ConsoleSeverity;
+  readonly text: string;
+  readonly details: string | null;
+  /** Milliseconds since the preview generation started. */
+  readonly time: number;
+  /** How many identical consecutive messages this entry stands for. */
+  readonly count: number;
+}
+
+export interface OutputCounts {
+  readonly log: number;
+  readonly info: number;
+  readonly debug: number;
+  readonly warn: number;
+  readonly error: number;
+}
+
+export interface OutputSnapshot {
+  readonly generation: number;
+  readonly entries: readonly OutputEntry[];
+  readonly counts: OutputCounts;
+  /** Uncaught errors in this generation, counted separately from `console.error`. */
+  readonly exceptions: number;
+  /** Messages the rate limit dropped in this generation. */
+  readonly suppressed: number;
+  /** Entries evicted from the front of the ring buffer in this generation. */
+  readonly evicted: number;
+}
+
+export interface FormatLimits {
+  readonly maxLength: number;
+  readonly maxDepth: number;
+  readonly maxItems: number;
+}
+
+export interface PreviewConsoleOptions {
+  readonly capacity?: number;
+  readonly limits?: Partial<FormatLimits>;
+  /** Messages accepted in a burst before the rate limit applies. */
+  readonly burst?: number;
+  /** Sustained messages per second the rate limit lets through. */
+  readonly ratePerSecond?: number;
+  /** Delay before subscribers hear about a change; changes in between coalesce. */
+  readonly notifyDelay?: number;
+  readonly schedule?: (callback: () => void, delay: number) => () => void;
+}
+
+export const DEFAULT_FORMAT_LIMITS: FormatLimits = { maxLength: 2000, maxDepth: 3, maxItems: 20 };
+const MAX_DETAILS_LENGTH = 6000;
+// An engine that reports a failure through `console.error` and then throws
+// the same error produces two records of one event within the same task.
+const EXCEPTION_MERGE_WINDOW_MS = 250;
+
+const EMPTY_COUNTS: OutputCounts = { log: 0, info: 0, debug: 0, warn: 0, error: 0 };
+
+const defaultSchedule = (callback: () => void, delay: number): (() => void) => {
+  const handle = setTimeout(callback, delay);
+
+  return () => clearTimeout(handle);
+};
+
+interface MutableEntry {
+  id: number;
+  kind: OutputEntryKind;
+  severity: ConsoleSeverity;
+  text: string;
+  details: string | null;
+  time: number;
+  count: number;
+}
+
+export class PreviewConsole {
+  private readonly _capacity: number;
+  private readonly _limits: FormatLimits;
+  private readonly _burst: number;
+  private readonly _ratePerSecond: number;
+  private readonly _notifyDelay: number;
+  private readonly _schedule: (callback: () => void, delay: number) => () => void;
+  private readonly _listeners = new Set<() => void>();
+
+  private _generation = 0;
+  private _entries: MutableEntry[] = [];
+  private _counts: { -readonly [K in keyof OutputCounts]: number } = { ...EMPTY_COUNTS };
+  private _exceptions = 0;
+  private _suppressed = 0;
+  private _evicted = 0;
+  private _nextId = 1;
+  private _tokens: number;
+  private _tokensAt = 0;
+  private _openSuppressed: MutableEntry | null = null;
+  private _snapshot: OutputSnapshot | null = null;
+  private _cancelNotify: (() => void) | null = null;
+  private _detachBridge: (() => void) | null = null;
+  private _elapsed: () => number = () => 0;
+
+  public constructor(options: PreviewConsoleOptions = {}) {
+    this._capacity = options.capacity ?? 500;
+    this._limits = { ...DEFAULT_FORMAT_LIMITS, ...options.limits };
+    this._burst = options.burst ?? 100;
+    this._ratePerSecond = options.ratePerSecond ?? 50;
+    this._notifyDelay = options.notifyDelay ?? 100;
+    this._schedule = options.schedule ?? defaultSchedule;
+    this._tokens = this._burst;
+  }
+
+  public get generation(): number {
+    return this._generation;
+  }
+
+  /**
+   * Starts a new preview generation: drops every entry, detaches the bridge of
+   * the previous preview window and returns the token that later writes must
+   * carry. Writes carrying an older token are ignored.
+   */
+  public begin(): number {
+    this._detachBridge?.();
+    this._detachBridge = null;
+    this._generation += 1;
+    this._resetRecord();
+    this._changed(true);
+
+    return this._generation;
+  }
+
+  /**
+   * Starts a new generation for `target` and patches its console. Returns the
+   * generation token, for reporting the window's uncaught errors.
+   */
+  public attach(target: ConsoleWindow): number {
+    const generation = this.begin();
+    const clock = target.performance;
+    const start = clock.now();
+    const elapsed = (): number => clock.now() - start;
+
+    this._elapsed = elapsed;
+    this._detachBridge = installConsoleBridge(target, (severity, args) => {
+      this.write(generation, severity, args, elapsed());
+    });
+
+    return generation;
+  }
+
+  /**
+   * Restores the console of the attached window, if any, stops accepting its
+   * writes and drops its record, so nothing of it shows while the next preview
+   * loads.
+   */
+  public detach(): void {
+    this._detachBridge?.();
+    this._detachBridge = null;
+    this._generation += 1;
+    this._resetRecord();
+    this._changed(true);
+  }
+
+  public write(generation: number, severity: ConsoleSeverity, args: readonly unknown[], time: number): void {
+    if (generation !== this._generation) {
+      return;
+    }
+
+    if (!this._takeToken(time)) {
+      this._suppressed += 1;
+      this._counts[severity] += 1;
+
+      if (this._openSuppressed) {
+        this._openSuppressed.count += 1;
+        this._openSuppressed.text = suppressedText(this._openSuppressed.count);
+      } else {
+        this._openSuppressed = this._append({
+          kind: 'suppressed',
+          severity: 'warn',
+          text: suppressedText(1),
+          details: null,
+          time,
+          count: 1,
+        });
+      }
+
+      this._changed(false);
+
+      return;
+    }
+
+    this._openSuppressed = null;
+
+    const { text, details } = formatConsoleArguments(args, this._limits);
+    const last = this._entries[this._entries.length - 1];
+
+    this._counts[severity] += 1;
+
+    if (last?.kind === 'console' && last.severity === severity && last.text === text && last.details === details) {
+      last.count += 1;
+      last.time = time;
+    } else {
+      this._append({ kind: 'console', severity, text, details, time, count: 1 });
+    }
+
+    this._changed(false);
+  }
+
+  /**
+   * Records an uncaught error. A `console.error` of the same message moments
+   * earlier is upgraded in place rather than listed twice.
+   */
+  public writeException(generation: number, summary: string, details: string | null, time = this._elapsed()): void {
+    if (generation !== this._generation) {
+      return;
+    }
+
+    const text = truncate(summary, this._limits.maxLength);
+    const fullDetails = details && details !== summary ? truncate(details, MAX_DETAILS_LENGTH) : null;
+
+    this._exceptions += 1;
+
+    for (let index = this._entries.length - 1; index >= 0 && index >= this._entries.length - 5; index -= 1) {
+      const entry = this._entries[index];
+
+      if (time - entry.time > EXCEPTION_MERGE_WINDOW_MS) {
+        break;
+      }
+
+      if (
+        entry.kind === 'console' &&
+        entry.severity === 'error' &&
+        (entry.text === text || entry.text.endsWith(`: ${text}`) || entry.text.endsWith(` ${text}`))
+      ) {
+        entry.kind = 'exception';
+        entry.details = fullDetails ?? entry.details;
+        this._changed(true);
+
+        return;
+      }
+    }
+
+    this._counts.error += 1;
+    this._append({ kind: 'exception', severity: 'error', text, details: fullDetails, time, count: 1 });
+    this._changed(true);
+  }
+
+  /** Empties the list of the current generation; the counters restart from zero. */
+  public clear(): void {
+    this._resetRecord();
+    this._changed(true);
+  }
+
+  public subscribe = (listener: () => void): (() => void) => {
+    this._listeners.add(listener);
+
+    return () => {
+      this._listeners.delete(listener);
+    };
+  };
+
+  public getSnapshot = (): OutputSnapshot => {
+    this._snapshot ??= Object.freeze({
+      generation: this._generation,
+      entries: Object.freeze(this._entries.map(entry => Object.freeze({ ...entry }))),
+      counts: Object.freeze({ ...this._counts }),
+      exceptions: this._exceptions,
+      suppressed: this._suppressed,
+      evicted: this._evicted,
+    });
+
+    return this._snapshot;
+  };
+
+  /** Number of live subscribers; exposed for leak checks. */
+  public get listenerCount(): number {
+    return this._listeners.size;
+  }
+
+  /** Detaches the bridge and cancels any pending notification. Subscribers are kept. */
+  public dispose(): void {
+    this._detachBridge?.();
+    this._detachBridge = null;
+    this._generation += 1;
+    this._cancelNotify?.();
+    this._cancelNotify = null;
+  }
+
+  private _resetRecord(): void {
+    this._entries = [];
+    this._counts = { ...EMPTY_COUNTS };
+    this._exceptions = 0;
+    this._suppressed = 0;
+    this._evicted = 0;
+    this._openSuppressed = null;
+    this._tokens = this._burst;
+    this._tokensAt = 0;
+  }
+
+  private _append(entry: Omit<MutableEntry, 'id'>): MutableEntry {
+    const stored: MutableEntry = { id: this._nextId++, ...entry };
+
+    this._entries.push(stored);
+
+    if (this._entries.length > this._capacity) {
+      const removed = this._entries.splice(0, this._entries.length - this._capacity);
+
+      this._evicted += removed.length;
+    }
+
+    return stored;
+  }
+
+  private _takeToken(time: number): boolean {
+    const elapsed = Math.max(0, time - this._tokensAt);
+
+    this._tokensAt = time;
+    this._tokens = Math.min(this._burst, this._tokens + (elapsed / 1000) * this._ratePerSecond);
+
+    if (this._tokens < 1) {
+      return false;
+    }
+
+    this._tokens -= 1;
+
+    return true;
+  }
+
+  private _changed(immediate: boolean): void {
+    this._snapshot = null;
+
+    if (immediate) {
+      this._cancelNotify?.();
+      this._cancelNotify = null;
+      this._notify();
+
+      return;
+    }
+
+    this._cancelNotify ??= this._schedule(() => {
+      this._cancelNotify = null;
+      this._notify();
+    }, this._notifyDelay);
+  }
+
+  private _notify(): void {
+    for (const listener of [...this._listeners]) {
+      listener();
+    }
+  }
+}
+
+const suppressedText = (count: number): string =>
+  `${count} message${count === 1 ? '' : 's'} dropped: the preview logged faster than the Output panel records. DevTools still has them.`;
+
+/**
+ * Patches `log`, `info`, `debug`, `warn` and `error` on `target.console`. Each
+ * patch calls the original method before `capture`, and a throwing `capture`
+ * never reaches the caller. The returned function restores every method that
+ * still holds its patch.
+ */
+export const installConsoleBridge = (
+  target: ConsoleWindow,
+  capture: (severity: ConsoleSeverity, args: readonly unknown[]) => void,
+): (() => void) => {
+  const console = target.console;
+  const restore: Array<() => void> = [];
+
+  for (const method of CONSOLE_METHODS) {
+    const original = console[method];
+
+    const patched = function (this: unknown, ...args: unknown[]): void {
+      Reflect.apply(original, this ?? console, args);
+
+      try {
+        capture(method, args);
+      } catch {
+        // A formatter failure must never turn a log call into a crash.
+      }
+    };
+
+    console[method] = patched;
+    restore.push(() => {
+      if (console[method] === patched) {
+        console[method] = original;
+      }
+    });
+  }
+
+  return () => {
+    for (const undo of restore.splice(0)) {
+      undo();
+    }
+  };
+};
+
+/**
+ * Formats console arguments the way a console shows them: `%s`, `%d`, `%i`,
+ * `%f`, `%o`, `%O` and `%c` in a leading string are substituted, every other
+ * argument is appended. Values from another realm are handled by shape, never
+ * by `instanceof`. Output is plain text, bounded by `limits`.
+ */
+export const formatConsoleArguments = (
+  args: readonly unknown[],
+  limits: FormatLimits = DEFAULT_FORMAT_LIMITS,
+): { text: string; details: string | null } => {
+  const parts: string[] = [];
+  let details: string | null = null;
+  let rest = args;
+
+  const first = args[0];
+
+  if (typeof first === 'string' && first.includes('%')) {
+    let index = 1;
+    const substituted = first.replace(/%([sdifoOc%])/g, (match, specifier: string) => {
+      if (specifier === '%') {
+        return '%';
+      }
+
+      if (index >= args.length) {
+        return match;
+      }
+
+      const value = args[index++];
+
+      switch (specifier) {
+        case 'c':
+          return '';
+        case 's':
+          return typeof value === 'string' ? value : formatValue(value, limits);
+        case 'd':
+        case 'i':
+          return typeof value === 'bigint' ? `${value}n` : String(Math.trunc(Number(value)));
+        case 'f':
+          return String(Number(value));
+        default:
+          return formatValue(value, limits);
+      }
+    });
+
+    parts.push(substituted);
+    rest = args.slice(index);
+  } else if (args.length > 0) {
+    parts.push(typeof first === 'string' ? first : formatValue(first, limits));
+    rest = args.slice(1);
+
+    if (typeof first !== 'string') {
+      details = errorStack(first);
+    }
+  }
+
+  for (const value of rest) {
+    parts.push(typeof value === 'string' ? value : formatValue(value, limits));
+    details ??= errorStack(value);
+  }
+
+  return { text: truncate(parts.join(' '), limits.maxLength), details: details === null ? null : truncate(details, MAX_DETAILS_LENGTH) };
+};
+
+const truncate = (text: string, maxLength: number): string =>
+  text.length <= maxLength ? text : `${text.slice(0, maxLength)}... (${text.length - maxLength} more characters)`;
+
+const tagOf = (value: object): string => {
+  try {
+    return Object.prototype.toString.call(value).slice(8, -1);
+  } catch {
+    return 'Object';
+  }
+};
+
+const isErrorLike = (value: unknown): value is { name?: unknown; message: string; stack?: unknown } => {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  try {
+    return (
+      tagOf(value) === 'Error' ||
+      (typeof (value as { message?: unknown }).message === 'string' && typeof (value as { stack?: unknown }).stack === 'string')
+    );
+  } catch {
+    return false;
+  }
+};
+
+const errorStack = (value: unknown): string | null => {
+  if (!isErrorLike(value)) {
+    return null;
+  }
+
+  try {
+    return typeof value.stack === 'string' && value.stack.trim() ? value.stack : null;
+  } catch {
+    return null;
+  }
+};
+
+const constructorName = (value: object): string | null => {
+  try {
+    const prototype: unknown = Object.getPrototypeOf(value);
+
+    if (prototype === null) {
+      return null;
+    }
+
+    const name: unknown = (prototype as { constructor?: { name?: unknown } }).constructor?.name;
+
+    return typeof name === 'string' && name !== 'Object' && name !== '' ? name : null;
+  } catch {
+    return null;
+  }
+};
+
+/** Formats one value as a bounded, single-line description. */
+export const formatValue = (value: unknown, limits: FormatLimits = DEFAULT_FORMAT_LIMITS): string => {
+  const budget = { remaining: limits.maxLength };
+
+  return describe(value, 0, new Set(), limits, budget, false);
+};
+
+const describe = (
+  value: unknown,
+  depth: number,
+  seen: Set<object>,
+  limits: FormatLimits,
+  budget: { remaining: number },
+  nested: boolean,
+): string => {
+  if (budget.remaining <= 0) {
+    return '...';
+  }
+
+  const result = describeUnbounded(value, depth, seen, limits, budget, nested);
+
+  budget.remaining -= result.length;
+
+  return result;
+};
+
+const describeUnbounded = (
+  value: unknown,
+  depth: number,
+  seen: Set<object>,
+  limits: FormatLimits,
+  budget: { remaining: number },
+  nested: boolean,
+): string => {
+  switch (typeof value) {
+    case 'string':
+      return nested ? JSON.stringify(value.length > limits.maxLength ? `${value.slice(0, limits.maxLength)}...` : value) : value;
+    case 'number':
+      return Object.is(value, -0) ? '-0' : String(value);
+    case 'bigint':
+      return `${value}n`;
+    case 'boolean':
+    case 'undefined':
+      return String(value);
+    case 'symbol':
+      return value.toString();
+    case 'function': {
+      const name = (value as { name?: unknown }).name;
+
+      return `[Function${typeof name === 'string' && name ? `: ${name}` : ''}]`;
+    }
+    default:
+      break;
+  }
+
+  if (value === null) {
+    return 'null';
+  }
+
+  const object = value as object;
+
+  if (isErrorLike(object)) {
+    try {
+      const name = typeof object.name === 'string' && object.name ? object.name : 'Error';
+
+      return object.message ? `${name}: ${object.message}` : name;
+    } catch {
+      return 'Error';
+    }
+  }
+
+  if (seen.has(object)) {
+    return '[Circular]';
+  }
+
+  const tag = tagOf(object);
+
+  if (typeof (object as { nodeType?: unknown }).nodeType === 'number' && typeof (object as { nodeName?: unknown }).nodeName === 'string') {
+    return describeNode(object as { nodeName: string; id?: unknown; className?: unknown });
+  }
+
+  if (tag === 'Date') {
+    try {
+      return (object as Date).toISOString();
+    } catch {
+      return 'Invalid Date';
+    }
+  }
+
+  if (tag === 'RegExp') {
+    return RegExp.prototype.toString.call(object);
+  }
+
+  const name = constructorName(object);
+
+  if (depth >= limits.maxDepth) {
+    if (Array.isArray(object)) {
+      return `Array(${object.length})`;
+    }
+
+    return name ? `${name} {...}` : '{...}';
+  }
+
+  seen.add(object);
+
+  try {
+    if (Array.isArray(object) || ArrayBuffer.isView(object)) {
+      const list = object as ArrayLike<unknown>;
+      const shown = Math.min(list.length, limits.maxItems);
+      const items: string[] = [];
+
+      for (let index = 0; index < shown && budget.remaining > 0; index += 1) {
+        items.push(describe(list[index], depth + 1, seen, limits, budget, true));
+      }
+
+      if (list.length > items.length) {
+        items.push(`... ${list.length - items.length} more`);
+      }
+
+      const prefix = Array.isArray(object) ? '' : `${tag}(${list.length}) `;
+
+      return `${prefix}[${items.join(', ')}]`;
+    }
+
+    if (tag === 'Map' || tag === 'Set') {
+      const collection = object as Map<unknown, unknown> | Set<unknown>;
+      const items: string[] = [];
+      let index = 0;
+
+      for (const item of collection as Iterable<unknown>) {
+        if (index >= limits.maxItems || budget.remaining <= 0) {
+          break;
+        }
+
+        items.push(
+          tag === 'Map'
+            ? `${describe((item as [unknown, unknown])[0], depth + 1, seen, limits, budget, true)} => ${describe((item as [unknown, unknown])[1], depth + 1, seen, limits, budget, true)}`
+            : describe(item, depth + 1, seen, limits, budget, true),
+        );
+        index += 1;
+      }
+
+      if (collection.size > items.length) {
+        items.push(`... ${collection.size - items.length} more`);
+      }
+
+      return `${tag}(${collection.size}) {${items.join(', ')}}`;
+    }
+
+    let keys: string[];
+
+    try {
+      keys = Object.keys(object);
+    } catch {
+      return name ? `${name} {}` : '{}';
+    }
+
+    const fields: string[] = [];
+
+    for (const key of keys.slice(0, limits.maxItems)) {
+      if (budget.remaining <= 0) {
+        break;
+      }
+
+      let field: unknown;
+
+      try {
+        field = (object as Record<string, unknown>)[key];
+      } catch {
+        field = '[Getter threw]';
+      }
+
+      fields.push(
+        `${/^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key)}: ${describe(field, depth + 1, seen, limits, budget, true)}`,
+      );
+    }
+
+    if (keys.length > fields.length) {
+      fields.push(`... ${keys.length - fields.length} more`);
+    }
+
+    const body = fields.length > 0 ? `{${fields.join(', ')}}` : '{}';
+
+    return name ? `${name} ${body}` : body;
+  } finally {
+    seen.delete(object);
+  }
+};
+
+const describeNode = (node: { nodeName: string; id?: unknown; className?: unknown }): string => {
+  const tag = node.nodeName.toLowerCase();
+  const id = typeof node.id === 'string' && node.id ? `#${node.id}` : '';
+  const classes = typeof node.className === 'string' && node.className.trim() ? `.${node.className.trim().split(/\s+/).join('.')}` : '';
+
+  return tag.startsWith('#') ? tag : `<${tag}${id}${classes}>`;
+};
diff --git a/site/src/lib/site-build-info.ts b/site/src/lib/site-build-info.ts
new file mode 100644
index 000000000..17a2e399f
--- /dev/null
+++ b/site/src/lib/site-build-info.ts
@@ -0,0 +1,31 @@
+/**
+ * The channel this site was built for, with the version, commit and time of
+ * the build. Stable and Next share one origin, so anything a page stores per
+ * channel goes through `channelStorageKey`.
+ */
+
+export interface SiteBuildInfo {
+  readonly channel: 'stable' | 'next';
+  readonly basePath: string;
+  readonly sourceSha: string;
+  readonly packageVersion: string;
+  readonly createdAt: string;
+  /** Base of the other channel for an explicit switch; `null` when there is none. */
+  readonly counterpartBase: string | null;
+}
+
+// Outside a site build (unit tests importing site modules) the build constant
+// is not defined; those callers get an unconfigured Stable identity.
+export const siteBuild: SiteBuildInfo =
+  typeof __EXOJS_SITE_BUILD__ === 'undefined'
+    ? { channel: 'stable', basePath: '/ExoJS/', sourceSha: '', packageVersion: '', createdAt: '', counterpartBase: null }
+    : __EXOJS_SITE_BUILD__;
+
+const STORAGE_SCHEMA = 1;
+
+/**
+ * A Web Storage key scoped to this channel and base, so Stable and Next never
+ * read each other's state on the shared origin.
+ */
+export const channelStorageKey = (name: string): string =>
+  `exojs-site:v${STORAGE_SCHEMA}:${siteBuild.channel}:${siteBuild.basePath}:${name}`;
diff --git a/site/src/lib/site-links.ts b/site/src/lib/site-links.ts
new file mode 100644
index 000000000..ceedf20fa
--- /dev/null
+++ b/site/src/lib/site-links.ts
@@ -0,0 +1,10 @@
+/**
+ * Guide sources link site pages through the Stable base, `/ExoJS/`. A build
+ * for another base moves those links onto its own base while it renders, so
+ * Next pages stay under `/ExoJS/next/`.
+ */
+export const SOURCE_LINK_BASE = '/ExoJS/';
+
+/** `href` on `basePath` when it is written against the source base; anything else unchanged. */
+export const rewriteSiteHref = (href: string, basePath: string): string =>
+  basePath !== SOURCE_LINK_BASE && href.startsWith(SOURCE_LINK_BASE) ? `${basePath}${href.slice(SOURCE_LINK_BASE.length)}` : href;
diff --git a/site/src/lib/url-state.ts b/site/src/lib/url-state.ts
index ab186157e..6030babce 100644
--- a/site/src/lib/url-state.ts
+++ b/site/src/lib/url-state.ts
@@ -8,7 +8,10 @@
 // stripped on write and restored on read.  Slashes in the example path are
 // preserved as-is - no `%2F` encoding.
 
-const VERSION_STORAGE_KEY = 'exojs-examples:selected-version';
+import { channelStorageKey } from './site-build-info';
+
+// Scoped per channel: "current" means a different build on Stable and on Next.
+const VERSION_STORAGE_KEY = channelStorageKey('examples:selected-version');
 
 export interface UrlState {
   version: string | null;
diff --git a/site/src/pages/de/benchmarks/physics/index.astro b/site/src/pages/de/benchmarks/physics/index.astro
index baad9db74..7a39deb80 100644
--- a/site/src/pages/de/benchmarks/physics/index.astro
+++ b/site/src/pages/de/benchmarks/physics/index.astro
@@ -7,12 +7,15 @@
  * of that page. A redirect rather than a second copy of the page: two pages
  * carrying one profile would eventually disagree about it.
  */
+import ChannelHead from '../../../../components/ChannelHead.astro';
+
 const target = `${import.meta.env.BASE_URL}de/benchmarks/#physics`;
 ---
 
 <html lang="de">
   <head>
     <meta charset="utf-8" />
+    <ChannelHead />
     <meta http-equiv="refresh" content={`0; url=${target}`} />
     <link rel="canonical" href={target} />
     <title>ExoJS physics benchmarks</title>
diff --git a/site/src/pages/de/playground/examples/[...path].astro b/site/src/pages/de/playground/examples/[...path].astro
index e9750fea2..35594eb46 100644
--- a/site/src/pages/de/playground/examples/[...path].astro
+++ b/site/src/pages/de/playground/examples/[...path].astro
@@ -1,29 +1,14 @@
 ---
 import PlaygroundExamplePage from '../../../../components/pages/PlaygroundExamplePage.astro';
-import { EXAMPLE_ALIASES, EXAMPLE_TOOL_RELOCATIONS, resolveExampleToolRelocation } from '../../../../lib/example-aliases';
+import { EXAMPLE_ALIASES } from '../../../../lib/example-aliases';
 import { getAllExamples } from '../../../../lib/examples-catalog';
-import { CURRENT_VERSION_ID } from '../../../../lib/versions';
 
 export const getStaticPaths = async () =>
-  [...getAllExamples().map(entry => entry.path), ...Object.keys(EXAMPLE_ALIASES), ...Object.keys(EXAMPLE_TOOL_RELOCATIONS)].map(path => ({
+  [...getAllExamples().map(entry => entry.path), ...Object.keys(EXAMPLE_ALIASES)].map(path => ({
     params: { path: path.replace(/\.js$/, '') },
   }));
 
 const routePath = (Astro.params as Record<string, string | undefined>).path ?? '';
-const relocation = resolveExampleToolRelocation(CURRENT_VERSION_ID, `${routePath}.js`);
-const toolHref = relocation === null ? null : `${import.meta.env.BASE_URL}de/${relocation}`;
 ---
 
-{toolHref !== null ? (
-  <html lang="de">
-    <head>
-      <meta http-equiv="refresh" content={`0;url=${toolHref}`} />
-      <link rel="canonical" href={toolHref} />
-    </head>
-    <body>
-      <a href={toolHref}>Asset Browser öffnen</a>
-    </body>
-  </html>
-) : (
-  <PlaygroundExamplePage locale="de" path={`${routePath}.js`} />
-)}
+<PlaygroundExamplePage locale="de" path={`${routePath}.js`} />
diff --git a/site/src/pages/de/playground/index.astro b/site/src/pages/de/playground/index.astro
index 8da356a21..3b6ff6acb 100644
--- a/site/src/pages/de/playground/index.astro
+++ b/site/src/pages/de/playground/index.astro
@@ -8,30 +8,6 @@ import Layout from '../../../layouts/Layout.astro';
          actually lands on something keyboard-traversable. Focus then tabs into the
          shadow tree of <example-browser> as normal. -->
   <div class="playground-main">
-    <p class="playground-tool-link">
-      Verfügbare Bilder, Sounds oder Schriftarten ansehen?{' '}
-      <a href={`${import.meta.env.BASE_URL}de/tools/asset-browser/`}>Asset Browser öffnen</a>.
-    </p>
-    <ExampleBrowser client:load baseUrl={import.meta.env.BASE_URL} locale="de" />
+    <ExampleBrowser client:load baseUrl={import.meta.env.BASE_URL} />
   </div>
 </Layout>
-
-<style>
-  /* The playground fills the viewport under the header minus this row, so its
-     height is fixed and shared with ExampleBrowser through --playground-offset. */
-  .playground-main {
-    --playground-offset: 2.25rem;
-  }
-
-  .playground-tool-link {
-    box-sizing: border-box;
-    height: var(--playground-offset);
-    line-height: var(--playground-offset);
-    margin: 0;
-    padding: 0 1rem;
-    overflow: hidden;
-    white-space: nowrap;
-    font-size: 0.82rem;
-    color: var(--fg-muted);
-  }
-</style>
diff --git a/site/src/pages/de/tools/asset-browser/index.astro b/site/src/pages/de/tools/asset-browser/index.astro
index 20137642a..264d9287f 100644
--- a/site/src/pages/de/tools/asset-browser/index.astro
+++ b/site/src/pages/de/tools/asset-browser/index.astro
@@ -1,5 +1,18 @@
 ---
-import AssetBrowserToolPage from '../../../../components/pages/AssetBrowserToolPage.astro';
+import ChannelHead from '../../../../components/ChannelHead.astro';
+
+// The Asset Browser is a playground example; this address only forwards links
+// published while it had a page of its own.
+const target = `${import.meta.env.BASE_URL}de/playground/?version=current&example=debug-layer/asset-browser`;
 ---
 
-<AssetBrowserToolPage locale="de" />
+<html lang="de">
+  <head>
+    <ChannelHead />
+    <meta http-equiv="refresh" content={`0;url=${target}`} />
+    <link rel="canonical" href={target} />
+  </head>
+  <body>
+    <a href={target}>Asset-Browser-Example öffnen</a>
+  </body>
+</html>
diff --git a/site/src/pages/en/benchmarks/physics/index.astro b/site/src/pages/en/benchmarks/physics/index.astro
index 4394cb82c..151fecefa 100644
--- a/site/src/pages/en/benchmarks/physics/index.astro
+++ b/site/src/pages/en/benchmarks/physics/index.astro
@@ -7,12 +7,15 @@
  * of that page. A redirect rather than a second copy of the page: two pages
  * carrying one profile would eventually disagree about it.
  */
+import ChannelHead from '../../../../components/ChannelHead.astro';
+
 const target = `${import.meta.env.BASE_URL}en/benchmarks/#physics`;
 ---
 
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <ChannelHead />
     <meta http-equiv="refresh" content={`0; url=${target}`} />
     <link rel="canonical" href={target} />
     <title>ExoJS physics benchmarks</title>
diff --git a/site/src/pages/en/playground/examples/[...path].astro b/site/src/pages/en/playground/examples/[...path].astro
index 866d9bd95..0215b4b17 100644
--- a/site/src/pages/en/playground/examples/[...path].astro
+++ b/site/src/pages/en/playground/examples/[...path].astro
@@ -1,29 +1,14 @@
 ---
 import PlaygroundExamplePage from '../../../../components/pages/PlaygroundExamplePage.astro';
-import { EXAMPLE_ALIASES, EXAMPLE_TOOL_RELOCATIONS, resolveExampleToolRelocation } from '../../../../lib/example-aliases';
+import { EXAMPLE_ALIASES } from '../../../../lib/example-aliases';
 import { getAllExamples } from '../../../../lib/examples-catalog';
-import { CURRENT_VERSION_ID } from '../../../../lib/versions';
 
 export const getStaticPaths = async () =>
-  [...getAllExamples().map(entry => entry.path), ...Object.keys(EXAMPLE_ALIASES), ...Object.keys(EXAMPLE_TOOL_RELOCATIONS)].map(path => ({
+  [...getAllExamples().map(entry => entry.path), ...Object.keys(EXAMPLE_ALIASES)].map(path => ({
     params: { path: path.replace(/\.js$/, '') },
   }));
 
 const routePath = (Astro.params as Record<string, string | undefined>).path ?? '';
-const relocation = resolveExampleToolRelocation(CURRENT_VERSION_ID, `${routePath}.js`);
-const toolHref = relocation === null ? null : `${import.meta.env.BASE_URL}en/${relocation}`;
 ---
 
-{toolHref !== null ? (
-  <html lang="en">
-    <head>
-      <meta http-equiv="refresh" content={`0;url=${toolHref}`} />
-      <link rel="canonical" href={toolHref} />
-    </head>
-    <body>
-      <a href={toolHref}>Open Asset Browser</a>
-    </body>
-  </html>
-) : (
-  <PlaygroundExamplePage locale="en" path={`${routePath}.js`} />
-)}
+<PlaygroundExamplePage locale="en" path={`${routePath}.js`} />
diff --git a/site/src/pages/en/playground/index.astro b/site/src/pages/en/playground/index.astro
index dddeeb0e1..3b6ff6acb 100644
--- a/site/src/pages/en/playground/index.astro
+++ b/site/src/pages/en/playground/index.astro
@@ -8,30 +8,6 @@ import Layout from '../../../layouts/Layout.astro';
          actually lands on something keyboard-traversable. Focus then tabs into the
          shadow tree of <example-browser> as normal. -->
   <div class="playground-main">
-    <p class="playground-tool-link">
-      Need to inspect available art, sound, or fonts?{' '}
-      <a href={`${import.meta.env.BASE_URL}en/tools/asset-browser/`}>Open the Asset Browser</a>.
-    </p>
-    <ExampleBrowser client:load baseUrl={import.meta.env.BASE_URL} locale="en" />
+    <ExampleBrowser client:load baseUrl={import.meta.env.BASE_URL} />
   </div>
 </Layout>
-
-<style>
-  /* The playground fills the viewport under the header minus this row, so its
-     height is fixed and shared with ExampleBrowser through --playground-offset. */
-  .playground-main {
-    --playground-offset: 2.25rem;
-  }
-
-  .playground-tool-link {
-    box-sizing: border-box;
-    height: var(--playground-offset);
-    line-height: var(--playground-offset);
-    margin: 0;
-    padding: 0 1rem;
-    overflow: hidden;
-    white-space: nowrap;
-    font-size: 0.82rem;
-    color: var(--fg-muted);
-  }
-</style>
diff --git a/site/src/pages/en/tools/asset-browser/index.astro b/site/src/pages/en/tools/asset-browser/index.astro
index 9e6d170f1..b9a089c2f 100644
--- a/site/src/pages/en/tools/asset-browser/index.astro
+++ b/site/src/pages/en/tools/asset-browser/index.astro
@@ -1,5 +1,18 @@
 ---
-import AssetBrowserToolPage from '../../../../components/pages/AssetBrowserToolPage.astro';
+import ChannelHead from '../../../../components/ChannelHead.astro';
+
+// The Asset Browser is a playground example; this address only forwards links
+// published while it had a page of its own.
+const target = `${import.meta.env.BASE_URL}en/playground/?version=current&example=debug-layer/asset-browser`;
 ---
 
-<AssetBrowserToolPage locale="en" />
+<html lang="en">
+  <head>
+    <ChannelHead />
+    <meta http-equiv="refresh" content={`0;url=${target}`} />
+    <link rel="canonical" href={target} />
+  </head>
+  <body>
+    <a href={target}>Open the Asset Browser example</a>
+  </body>
+</html>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 47b5c84bb..c3b989f74 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -1,4 +1,6 @@
 ---
+import ChannelHead from '../components/ChannelHead.astro';
+
 const baseUrl = import.meta.env.BASE_URL;
 ---
 
@@ -7,6 +9,7 @@ const baseUrl = import.meta.env.BASE_URL;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <ChannelHead />
     <title>ExoJS</title>
     <script is:inline define:vars={{ baseUrl }}>
       (() => {
diff --git a/src/audio/audioContext.ts b/src/audio/audioContext.ts
index 3da78a1fd..dd47dfc11 100644
--- a/src/audio/audioContext.ts
+++ b/src/audio/audioContext.ts
@@ -7,7 +7,12 @@ interface AudioContextEventTarget {
   addEventListener?: (type: string, listener: () => void) => void;
 }
 
-const interactionEvents = ['mousedown', 'touchstart', 'touchend', 'keydown'] as const;
+// `pointerdown` and `pointerup` are activation-triggering in their own right.
+// They matter because the input system cancels `pointerdown` on the canvas,
+// which suppresses the compatibility `mousedown` a mouse click would otherwise
+// produce, and stops its propagation there: the listeners therefore run in the
+// capture phase, before any element on the path can stop the event.
+const interactionEvents = ['pointerdown', 'pointerup', 'mousedown', 'touchstart', 'touchend', 'keydown'] as const;
 
 /**
  * Sample rate used for the decoding {@link OfflineAudioContext} when no live
@@ -72,7 +77,7 @@ const removeInteractionListeners = (): void => {
   }
 
   for (const eventName of interactionEvents) {
-    document.removeEventListener(eventName, onUserInteraction, false);
+    document.removeEventListener(eventName, onUserInteraction, true);
   }
 
   interactionListenersAdded = false;
@@ -129,7 +134,7 @@ const addInteractionListeners = (): void => {
   }
 
   for (const eventName of interactionEvents) {
-    document.addEventListener(eventName, onUserInteraction, false);
+    document.addEventListener(eventName, onUserInteraction, true);
   }
 
   interactionListenersAdded = true;
@@ -219,8 +224,9 @@ class AudioContextReadySignal extends Signal<[AudioContext]> {
 /**
  * Signal that dispatches once the global `AudioContext` enters the `running`
  * state. Handles browser autoplay-policy by listening for user-interaction
- * events (`mousedown`, `touchstart`, `touchend`) and resuming a suspended
- * context automatically.
+ * events (pointer press and release, `mousedown`, `touchstart`, `touchend`,
+ * `keydown`) in the capture phase and resuming a suspended context
+ * automatically.
  *
  * Dispatches once per run of the context: on the first unlock, and again on
  * every later locked-to-running edge, so an object constructed while the
diff --git a/src/debug/core.ts b/src/debug/core.ts
new file mode 100644
index 000000000..ae25e5d2b
--- /dev/null
+++ b/src/debug/core.ts
@@ -0,0 +1,8 @@
+export { AssetCacheLayer } from './AssetCacheLayer';
+export { BoundingBoxesLayer } from './BoundingBoxesLayer';
+export { DebugLayer, type DebugLayerViewMode } from './DebugLayer';
+export { DebugOverlay } from './DebugOverlay';
+export { HitTestLayer } from './HitTestLayer';
+export { PerformanceLayer } from './PerformanceLayer';
+export { PointerStackLayer } from './PointerStackLayer';
+export { type RenderPassInspectorEntry, RenderPassInspectorLayer, type RenderPipelineRow } from './RenderPassInspectorLayer';
diff --git a/src/debug/index.ts b/src/debug/index.ts
index ae25e5d2b..25c004980 100644
--- a/src/debug/index.ts
+++ b/src/debug/index.ts
@@ -1,8 +1,6 @@
-export { AssetCacheLayer } from './AssetCacheLayer';
-export { BoundingBoxesLayer } from './BoundingBoxesLayer';
-export { DebugLayer, type DebugLayerViewMode } from './DebugLayer';
-export { DebugOverlay } from './DebugOverlay';
-export { HitTestLayer } from './HitTestLayer';
-export { PerformanceLayer } from './PerformanceLayer';
-export { PointerStackLayer } from './PointerStackLayer';
-export { type RenderPassInspectorEntry, RenderPassInspectorLayer, type RenderPipelineRow } from './RenderPassInspectorLayer';
+export * from './core';
+// The physics draw layer extends `DebugLayer` from this entry, so this entry and
+// the physics debug module import each other. The re-export has to stay last:
+// ES modules evaluate dependencies in import order, and the core layers above
+// must be evaluated before the physics module's class declaration reads them.
+export { PhysicsDebugDraw, type PhysicsDebugDrawOptions } from '#physics-debug';
diff --git a/test/assets/demo-assets-loading.test.ts b/test/assets/demo-assets-loading.test.ts
new file mode 100644
index 000000000..f15280975
--- /dev/null
+++ b/test/assets/demo-assets-loading.test.ts
@@ -0,0 +1,391 @@
+/**
+ * The demo catalog against the real Core loader: reading it does no IO, each
+ * descriptor is claimed and loaded by exactly the loader it is handed to, and
+ * the existing claim, cancellation, failure and catalog contracts are what a
+ * caller of the catalog gets - none of them is changed for it.
+ */
+import { createDemoAssets, demoAssets } from '@codexo/exojs-demo-assets';
+
+import { Asset } from '#assets/Asset';
+import { AssetRef } from '#assets/AssetRef';
+import { Assets } from '#assets/Assets';
+import { coreAssetTypes } from '#assets/coreAssetTypes';
+import { Loader } from '#assets/Loader';
+import type { Application } from '#core/Application';
+import { SceneLoader } from '#core/scene/SceneLoader';
+import { materializeAssetTypes } from '#extensions/materialize';
+import { BmFont } from '#rendering/text/BmFont';
+import { Texture } from '#rendering/texture/Texture';
+import { Video } from '#rendering/video/Video';
+
+const createCoreLoader = (): Loader => {
+  const loader = new Loader();
+  materializeAssetTypes(loader, coreAssetTypes);
+
+  return loader;
+};
+
+const sceneOf = (loader: Loader): SceneLoader => new SceneLoader({ loader } as unknown as Application);
+
+interface FetchCall {
+  readonly url: string;
+  readonly signal: AbortSignal | undefined;
+  settle(): void;
+}
+
+interface FetchControl {
+  readonly calls: FetchCall[];
+  /** URLs answered with HTTP 500 instead of a body, consumed one failure at a time. */
+  readonly failures: Map<string, number>;
+  /** When set, responses wait for `settle()`. */
+  hold: boolean;
+}
+
+const FNT_TEXT = [
+  'info face="Kenney Blocks" size=32',
+  'common lineHeight=32 base=27 scaleW=256 scaleH=256 pages=1 packed=0',
+  'page id=0 file="kenney-blocks-32.png"',
+  'chars count=1',
+  'char id=65 x=0 y=0 width=10 height=10 xoffset=0 yoffset=0 xadvance=10 page=0 chnl=15',
+].join('\n');
+
+const bodyFor = (url: string): { readonly text: string; readonly bytes: ArrayBuffer } => {
+  if (url.endsWith('.fnt')) {
+    return { text: FNT_TEXT, bytes: new TextEncoder().encode(FNT_TEXT).buffer };
+  }
+
+  if (url.endsWith('.json')) {
+    return { text: '{"frames":{},"meta":{}}', bytes: new ArrayBuffer(2) };
+  }
+
+  // WebM magic: enough for the media type sniffing to accept the blob.
+  return { text: '', bytes: new Uint8Array([0x1a, 0x45, 0xdf, 0xa3]).buffer };
+};
+
+const installFetch = (): FetchControl => {
+  const control: FetchControl = { calls: [], failures: new Map(), hold: false };
+
+  globalThis.fetch = vi.fn(
+    async (input: unknown, init?: RequestInit): Promise<Response> =>
+      new Promise<Response>((resolve, reject) => {
+        const url = String(input);
+        const signal = init?.signal ?? undefined;
+        const remaining = control.failures.get(url) ?? 0;
+        const failing = remaining > 0;
+
+        if (failing) {
+          control.failures.set(url, remaining - 1);
+        }
+
+        const { text, bytes } = bodyFor(url);
+        const response = {
+          ok: !failing,
+          status: failing ? 500 : 200,
+          statusText: failing ? 'Internal Server Error' : 'OK',
+          url,
+          headers: new Headers(),
+          text: async () => text,
+          json: async () => JSON.parse(text) as unknown,
+          arrayBuffer: async () => bytes,
+          blob: async () => new Blob([bytes]),
+        } as unknown as Response;
+
+        signal?.addEventListener('abort', () => reject(signal.reason as Error));
+
+        const call = { url, signal, settle: () => resolve(response) };
+        control.calls.push(call);
+
+        if (!control.hold) {
+          call.settle();
+        }
+      }),
+  ) as unknown as typeof fetch;
+
+  return control;
+};
+
+const flush = async (): Promise<void> => {
+  for (let i = 0; i < 10; i++) {
+    await Promise.resolve();
+  }
+};
+
+const originalFetch = globalThis.fetch;
+
+beforeEach(() => {
+  vi.stubGlobal(
+    'createImageBitmap',
+    vi.fn(async () => ({ width: 16, height: 16, close: () => undefined })),
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+  globalThis.fetch = originalFetch;
+});
+
+describe('A01: importing and reading the catalog does no IO', () => {
+  test('reading every property fetches, decodes and creates nothing', async () => {
+    const fetchSpy = vi.fn();
+    const bitmapSpy = vi.fn();
+    const audioContextSpy = vi.fn();
+    const fontFaceSpy = vi.fn();
+    vi.stubGlobal('fetch', fetchSpy);
+    vi.stubGlobal('createImageBitmap', bitmapSpy);
+    vi.stubGlobal('AudioContext', audioContextSpy);
+    vi.stubGlobal('FontFace', fontFaceSpy);
+    const createElement = vi.spyOn(document, 'createElement');
+    const imageSpy = vi.spyOn(globalThis, 'Image');
+
+    vi.resetModules();
+    const fresh = await import('@codexo/exojs-demo-assets');
+    const extended = await import('@codexo/exojs-demo-assets/extended');
+
+    const descriptors = Object.values(fresh.demoAssets);
+    const seen = descriptors.map(descriptor => [descriptor.type, descriptor.source]);
+    // Spread, serialization and enumeration are the reads a getter-based
+    // catalog would turn into loads; here they must stay plain reads.
+    void { ...fresh.demoAssets };
+    void JSON.stringify(Object.keys(fresh.demoAssets));
+    void extended.createExtendedDemoAssets('https://media.example.test/extended/').videoHdr10.source;
+    void fresh.createDemoAssets('https://media.example.test/standard/').ship.source;
+
+    expect(seen.length).toBeGreaterThan(100);
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(bitmapSpy).not.toHaveBeenCalled();
+    expect(audioContextSpy).not.toHaveBeenCalled();
+    expect(fontFaceSpy).not.toHaveBeenCalled();
+    expect(createElement).not.toHaveBeenCalled();
+    expect(imageSpy).not.toHaveBeenCalled();
+  });
+
+  test('every value is a descriptor, never a placeholder resource', () => {
+    for (const descriptor of Object.values(demoAssets)) {
+      expect(descriptor).toBeInstanceOf(Asset);
+      expect(descriptor).not.toBeInstanceOf(Texture);
+      expect(descriptor).not.toBeInstanceOf(AssetRef);
+    }
+  });
+
+  test('the shared catalog is frozen, so one application cannot rewrite what another reads', () => {
+    expect(Object.isFrozen(demoAssets)).toBe(true);
+  });
+});
+
+describe('A02: one get() requests one asset and only its own files', () => {
+  test('SceneLoader.get(ship) fetches the ship and nothing else', async () => {
+    const control = installFetch();
+    const scene = sceneOf(createCoreLoader());
+
+    const texture = scene.get(demoAssets.ship);
+    await texture.loaded;
+
+    expect(control.calls.map(call => call.url)).toEqual([demoAssets.ship.source]);
+  });
+
+  test('a bitmap font fetches its descriptor plus exactly the page it names', async () => {
+    const control = installFetch();
+    const scene = sceneOf(createCoreLoader());
+
+    const font = await scene.load(demoAssets.fontKenneyBlocksFnt);
+
+    expect(font).toBeInstanceOf(BmFont);
+    expect(control.calls.map(call => call.url)).toEqual([demoAssets.fontKenneyBlocksFnt.source, demoAssets.fontKenneyBlocksPng.source]);
+  });
+});
+
+describe('A03: await load() yields the finished resource and surfaces failures', () => {
+  test('load(ship) resolves a ready Texture', async () => {
+    installFetch();
+    const scene = sceneOf(createCoreLoader());
+
+    const texture = await scene.load(demoAssets.ship);
+
+    expect(texture).toBeInstanceOf(Texture);
+    expect(texture.state).toBe('ready');
+  });
+
+  test('a failed fetch rejects load() and fails the handle instead of reporting success', async () => {
+    const control = installFetch();
+    control.failures.set(demoAssets.ship.source, 1);
+    const loader = createCoreLoader();
+    const errors: Error[] = [];
+    loader.onError.add((_type, _alias, error) => errors.push(error));
+    const scene = sceneOf(loader);
+
+    await expect(scene.load(demoAssets.ship)).rejects.toThrow();
+    expect(errors).toHaveLength(1);
+  });
+
+  test('a JSON atlas keeps the AssetRef contract', async () => {
+    installFetch();
+    const scene = sceneOf(createCoreLoader());
+
+    const ref = scene.get(demoAssets.platformerCharactersAtlas);
+
+    expect(ref).toBeInstanceOf(AssetRef);
+    await ref.loaded;
+    expect(ref.value).toEqual({ frames: {}, meta: {} });
+  });
+});
+
+describe('A04: leafless media load explicitly and offer no synchronous handle', () => {
+  test.each([
+    ['videoHighRes'],
+    ['videoHighFps'],
+    ['videoDemoLoop'],
+    ['musicLoopMain'],
+    ['fontKenneyFuture'],
+    ['fontKenneyBlocksFnt'],
+    ['iconPlay'],
+  ] as const)('get(%s) is rejected at runtime with guidance to load() instead', key => {
+    const loader = createCoreLoader();
+
+    expect(() => loader.get(demoAssets[key] as never)).toThrow(/load/);
+  });
+
+  test('await load(videoHighRes) resolves a Video', async () => {
+    installFetch();
+    const originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation(((tagName: string, options?: ElementCreationOptions) => {
+      const element = originalCreateElement(tagName, options);
+
+      if (tagName === 'video') {
+        queueMicrotask(() => element.dispatchEvent(new Event('canplay')));
+      }
+
+      return element;
+    }) as typeof document.createElement);
+    const scene = sceneOf(createCoreLoader());
+
+    const video = await scene.load(demoAssets.videoHighRes);
+
+    expect(video).toBeInstanceOf(Video);
+    video.destroy();
+  });
+
+  test('await load(fontKenneyFuture) registers the font under its family', async () => {
+    installFetch();
+    const families: string[] = [];
+
+    class FontFaceStub {
+      public constructor(public readonly family: string) {
+        families.push(family);
+      }
+
+      public load(): Promise<this> {
+        return Promise.resolve(this);
+      }
+    }
+
+    vi.stubGlobal('FontFace', FontFaceStub);
+    Object.defineProperty(document, 'fonts', { configurable: true, value: { add: vi.fn(), delete: vi.fn() } });
+    const scene = sceneOf(createCoreLoader());
+
+    await scene.load(demoAssets.fontKenneyFuture);
+
+    expect(families).toEqual(['Kenney Future']);
+    Reflect.deleteProperty(document, 'fonts');
+  });
+});
+
+describe('A05: two scenes on one loader share the payload, not the claim', () => {
+  test('one fetch, and destroying one scene keeps the other scene resource intact', async () => {
+    const control = installFetch();
+    const loader = createCoreLoader();
+    const sceneA = sceneOf(loader);
+    const sceneB = sceneOf(loader);
+
+    const fromA = await sceneA.load(demoAssets.ship);
+    const fromB = await sceneB.load(demoAssets.ship);
+
+    expect(control.calls).toHaveLength(1);
+    expect(fromB).toBe(fromA);
+
+    sceneA.destroy();
+
+    expect(fromB.state).toBe('ready');
+    expect(loader.inspect().some(row => row.aliases.includes(demoAssets.ship.source))).toBe(true);
+
+    sceneB.destroy();
+
+    expect(loader.inspect().some(row => row.aliases.includes(demoAssets.ship.source))).toBe(false);
+  });
+});
+
+describe('A06: two applications reuse the definitions, never the resources', () => {
+  test('each loader claims, fetches and owns its own texture', async () => {
+    const control = installFetch();
+    const first = sceneOf(createCoreLoader());
+    const second = sceneOf(createCoreLoader());
+
+    const a = first.get(demoAssets.ship);
+    const b = second.get(demoAssets.ship);
+    await Promise.all([a.loaded, b.loaded]);
+
+    expect(a).not.toBe(b);
+    expect(control.calls.map(call => call.url)).toEqual([demoAssets.ship.source, demoAssets.ship.source]);
+  });
+
+  test('a factory-made catalog is equally reusable across loaders', async () => {
+    installFetch();
+    const hosted = createDemoAssets('https://cdn.example.test/demo/');
+
+    await expect(sceneOf(createCoreLoader()).load(hosted.ship)).resolves.toBeInstanceOf(Texture);
+    await expect(sceneOf(createCoreLoader()).load(hosted.ship)).resolves.toBeInstanceOf(Texture);
+  });
+});
+
+describe('A07: destroying a scope mid-fetch, failure and retry keep their contracts', () => {
+  test('destroying the only claiming scene aborts its fetch', async () => {
+    const control = installFetch();
+    control.hold = true;
+    const scene = sceneOf(createCoreLoader());
+
+    const queue = scene.load(demoAssets.ship);
+    await flush();
+    scene.destroy();
+
+    expect(control.calls[0]?.signal?.aborted).toBe(true);
+    await expect(queue).rejects.toMatchObject({ name: 'AbortError' });
+  });
+
+  test('a failed load is retried by the next load and then heals', async () => {
+    const control = installFetch();
+    control.failures.set(demoAssets.ship.source, 1);
+    const scene = sceneOf(createCoreLoader());
+
+    await expect(scene.load(demoAssets.ship)).rejects.toThrow();
+    const texture = await scene.load(demoAssets.ship);
+
+    expect(texture.state).toBe('ready');
+    expect(control.calls).toHaveLength(2);
+  });
+});
+
+describe('A08: a materialized Assets.from() catalog keeps its whole-catalog semantics', () => {
+  test('get(catalog) claims and loads every leaf, not only the one read', async () => {
+    const control = installFetch();
+    const catalog = Assets.from({ ship: demoAssets.ship, flame: demoAssets.particleFlame });
+    const loader = createCoreLoader();
+
+    loader.get(catalog);
+    await flush();
+
+    expect(control.calls.map(call => call.url).sort()).toEqual([demoAssets.particleFlame.source, demoAssets.ship.source].sort());
+  });
+
+  test('its leaves stay bound to the first loader', () => {
+    installFetch();
+    const catalog = Assets.from({ ship: demoAssets.ship });
+
+    createCoreLoader().get(catalog);
+
+    expect(() => createCoreLoader().get(catalog)).toThrow(/already belongs to another loader/);
+  });
+
+  test('a leafless descriptor still cannot be held by a catalog', () => {
+    expect(() => Assets.from({ video: demoAssets.videoHighRes as never })).toThrow(/no catalog leaf/);
+  });
+});
diff --git a/test/assets/ktx2-texture-options.test.ts b/test/assets/ktx2-texture-options.test.ts
index 5d9120cb6..7b770fa99 100644
--- a/test/assets/ktx2-texture-options.test.ts
+++ b/test/assets/ktx2-texture-options.test.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { NormalMap } from '@codexo/exojs-lighting';
+import { NormalMap } from '@codexo/exojs/lighting';
 import { describe, expect, test } from 'vitest';
 
 import { type TextureAssetOptions, TextureFactory } from '#assets/factories/TextureFactory';
diff --git a/test/audio/audio-context.test.ts b/test/audio/audio-context.test.ts
index 0eadf550e..64357ab16 100644
--- a/test/audio/audio-context.test.ts
+++ b/test/audio/audio-context.test.ts
@@ -277,6 +277,32 @@ describe('audio/audio-context — interaction-gesture unlock lifecycle', () => {
     expect(removedEvents).toContain('keydown');
   });
 
+  it('unlocks on a mouse press the canvas consumes before it reaches the document', async () => {
+    Object.defineProperty(globalThis, 'AudioContext', { configurable: true, value: UnlockableAudioContext });
+    Object.defineProperty(globalThis, 'OfflineAudioContext', { configurable: true, value: class {} });
+
+    const { getAudioContext } = await import('#audio/audioContext');
+    const ctx = getAudioContext();
+    const canvas = document.createElement('canvas');
+
+    // What the input system does with a press on its surface: cancel it, so no
+    // compatibility `mousedown` follows, and stop it from propagating further.
+    canvas.addEventListener('pointerdown', event => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    });
+    document.body.append(canvas);
+
+    try {
+      canvas.dispatchEvent(new Event('pointerdown', { bubbles: true, cancelable: true }));
+      await Promise.resolve();
+
+      expect(ctx.state).toBe('running');
+    } finally {
+      canvas.remove();
+    }
+  });
+
   it('a second interaction event arriving synchronously after the first sees the context already running', async () => {
     // Deliberately no addEventListener/statechange support here: unlike
     // UnlockableAudioContext, resume() must NOT synchronously cascade into
diff --git a/test/build/migrate-v020-imports.test.ts b/test/build/migrate-v020-imports.test.ts
new file mode 100644
index 000000000..975f5bee8
--- /dev/null
+++ b/test/build/migrate-v020-imports.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  findUnmappedSpecifiers,
+  migrateMarkdown,
+  migrateSource,
+  migrateText,
+  V020_SPECIFIER_MIGRATIONS,
+} from '../../scripts/codemods/migrate-v020-imports';
+import { RUNTIME_MODULES } from '../../scripts/release/lockstep-packages';
+
+describe('V020_SPECIFIER_MIGRATIONS', () => {
+  it('maps every retired runtime package to its Core subpath, and nothing else', () => {
+    const expected = Object.fromEntries([
+      ...RUNTIME_MODULES.map(module => [module.legacyName, `@codexo/exojs/${module.subpath}`]),
+      ['@codexo/exojs-physics/debug', '@codexo/exojs/debug'],
+    ]);
+
+    expect(V020_SPECIFIER_MIGRATIONS).toEqual(expected);
+  });
+});
+
+describe('migrateSource', () => {
+  it('rewrites value, type, re-export, dynamic and mocked imports', () => {
+    const before = [
+      "import { TileMap } from '@codexo/exojs-tilemap';",
+      "import type { PhysicsWorld } from '@codexo/exojs-physics';",
+      "import { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';",
+      'export { ParticleSystem } from "@codexo/exojs-particles";',
+      "const fx = await import('@codexo/exojs-audio-fx');",
+      "vi.mock('@codexo/exojs-lighting');",
+    ].join('\n');
+
+    expect(migrateSource('scene.ts', before)).toBe(
+      [
+        "import { TileMap } from '@codexo/exojs/tilemap';",
+        "import type { PhysicsWorld } from '@codexo/exojs/physics';",
+        "import { PhysicsDebugDraw } from '@codexo/exojs/debug';",
+        'export { ParticleSystem } from "@codexo/exojs/particles";',
+        "const fx = await import('@codexo/exojs/audio-fx');",
+        "vi.mock('@codexo/exojs/lighting');",
+      ].join('\n'),
+    );
+  });
+
+  it('leaves packages that stay separate, prose, URLs and comments alone', () => {
+    const text = [
+      "import { TiledMap } from '@codexo/exojs-tiled';",
+      "import { Application } from '@codexo/exojs';",
+      '// Install @codexo/exojs-tilemap from https://www.npmjs.com/package/@codexo/exojs-tilemap',
+      "const label = '@codexo/exojs-physics';",
+      'console.log(TiledMap, Application, label);',
+    ].join('\n');
+
+    expect(migrateSource('keep.ts', text)).toBe(text);
+  });
+
+  it('is idempotent', () => {
+    const once = migrateSource('a.ts', "import { Pathfinder } from '@codexo/exojs-pathfinding';\n");
+
+    expect(migrateSource('a.ts', once)).toBe(once);
+  });
+
+  it('keeps a JSX file parseable as JSX', () => {
+    const text =
+      "import { LightmapLighting } from '@codexo/exojs-lighting';\nexport const View = () => <div>{String(LightmapLighting)}</div>;\n";
+
+    expect(migrateSource('View.tsx', text)).toContain("from '@codexo/exojs/lighting'");
+  });
+});
+
+describe('migrateMarkdown', () => {
+  it('rewrites fenced TypeScript and JavaScript blocks only', () => {
+    const before = [
+      'Install `@codexo/exojs-tilemap` and import it:',
+      '',
+      '```ts',
+      "import { TileMap } from '@codexo/exojs-tilemap';",
+      '```',
+      '',
+      '```bash',
+      'npm install @codexo/exojs-tilemap',
+      '```',
+      '',
+      '~~~js title="tiles.js"',
+      "import { TileSet } from '@codexo/exojs-tilemap';",
+      '~~~',
+      '',
+      "See [the package](https://www.npmjs.com/package/@codexo/exojs-tilemap) or import from '@codexo/exojs-tilemap'.",
+    ].join('\n');
+
+    expect(migrateMarkdown('README.md', before)).toBe(
+      before
+        .replace("import { TileMap } from '@codexo/exojs-tilemap';", "import { TileMap } from '@codexo/exojs/tilemap';")
+        .replace("import { TileSet } from '@codexo/exojs-tilemap';", "import { TileSet } from '@codexo/exojs/tilemap';"),
+    );
+  });
+
+  it('keeps CRLF line endings and longer fences intact', () => {
+    const before = "````tsx\r\nimport { ParticleSystem } from '@codexo/exojs-particles';\r\n```\r\nstill code\r\n````\r\n";
+
+    expect(migrateMarkdown('guide.mdx', before)).toBe(before.replace('@codexo/exojs-particles', '@codexo/exojs/particles'));
+  });
+
+  it('skips an unterminated fence rather than rewriting the rest of the document', () => {
+    const before = "```ts\nimport { TileMap } from '@codexo/exojs-tilemap';\n";
+
+    expect(migrateMarkdown('broken.md', before)).toBe(before);
+  });
+});
+
+describe('migrateText', () => {
+  it('ignores file types it does not understand', () => {
+    expect(migrateText('package.json', '{"dependencies":{"@codexo/exojs-tilemap":"0.19.x"}}')).toBeUndefined();
+  });
+});
+
+describe('findUnmappedSpecifiers', () => {
+  it('reports deep imports of a retired package that have no v0.20 entry', () => {
+    const text =
+      "import data from '@codexo/exojs-tilemap/package.json';\nimport { PhysicsDebugDraw } from '@codexo/exojs-physics/debug';\n";
+
+    expect(findUnmappedSpecifiers('x.ts', text)).toEqual(['@codexo/exojs-tilemap/package.json']);
+  });
+});
diff --git a/test/build/module-specifiers.test.ts b/test/build/module-specifiers.test.ts
new file mode 100644
index 000000000..f83291beb
--- /dev/null
+++ b/test/build/module-specifiers.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest';
+
+import { findModuleSpecifiers, rewriteModuleSpecifiers } from '../../scripts/lib/module-specifiers';
+
+const specifiers = (fileName: string, text: string): string[] =>
+  findModuleSpecifiers(fileName, text).map(occurrence => occurrence.specifier);
+
+describe('findModuleSpecifiers', () => {
+  it('finds every module reference a declaration file can carry', () => {
+    const declaration = [
+      "import { Container } from '@codexo/exojs';",
+      "import type { DebugLayer } from '@codexo/exojs/debug';",
+      "export { Curve } from '#distributions/Curve';",
+      "export * from './TileMap';",
+      "export type Grid = import('@codexo/exojs/tilemap').TileMap;",
+      "export declare const ctor: typeof import('#ParticleSystem');",
+      "import legacy = require('@codexo/exojs/renderer-sdk');",
+      "declare module '@codexo/exojs/extensions' {}",
+    ].join('\n');
+
+    expect(specifiers('x.d.ts', declaration)).toEqual([
+      '@codexo/exojs',
+      '@codexo/exojs/debug',
+      '#distributions/Curve',
+      './TileMap',
+      '@codexo/exojs/tilemap',
+      '#ParticleSystem',
+      '@codexo/exojs/renderer-sdk',
+      '@codexo/exojs/extensions',
+    ]);
+  });
+
+  it('finds dynamic imports, require forms and test-runner module mocks', () => {
+    const source = [
+      "const lazy = await import('@codexo/exojs-physics');",
+      "const cjs = require('@codexo/exojs-tilemap');",
+      "const path = require.resolve('@codexo/exojs-lighting/package.json');",
+      "const url = import.meta.resolve('@codexo/exojs-particles');",
+      "vi.mock('@codexo/exojs-audio-fx', () => ({}));",
+      "const actual = await vi.importActual('@codexo/exojs-pathfinding');",
+    ].join('\n');
+
+    expect(specifiers('x.ts', source)).toEqual([
+      '@codexo/exojs-physics',
+      '@codexo/exojs-tilemap',
+      '@codexo/exojs-lighting/package.json',
+      '@codexo/exojs-particles',
+      '@codexo/exojs-audio-fx',
+      '@codexo/exojs-pathfinding',
+    ]);
+  });
+
+  it('ignores specifier-shaped text that is not a module reference', () => {
+    const source = [
+      "// import { TileMap } from '@codexo/exojs-tilemap';",
+      '/** @example import { TileMap } from "@codexo/exojs-tilemap"; */',
+      "const name = '@codexo/exojs-tilemap';",
+      "type Name = '@codexo/exojs-tilemap';",
+      "const shader = '#version 300 es';",
+      "const docs = 'https://www.npmjs.com/package/@codexo/exojs-tilemap';",
+      'console.log(name, shader, docs);',
+    ].join('\n');
+
+    expect(specifiers('x.ts', source)).toEqual([]);
+  });
+
+  it('parses a .ts file as TypeScript, not TSX', () => {
+    const source = "const identity = <T,>(value: T): T => value;\nimport { TileMap } from '@codexo/exojs-tilemap';\n";
+
+    expect(specifiers('generic.ts', source)).toEqual(['@codexo/exojs-tilemap']);
+  });
+});
+
+describe('rewriteModuleSpecifiers', () => {
+  it('replaces only the mapped specifiers and keeps quotes and surrounding text', () => {
+    const text = 'import { a } from "@codexo/exojs";\nexport { b } from \'#b\';\nexport * from "./c";\n';
+    const rewritten = rewriteModuleSpecifiers('x.d.ts', text, specifier =>
+      specifier === '@codexo/exojs' ? '../index.js' : specifier === '#b' ? './b.js' : undefined,
+    );
+
+    expect(rewritten).toBe('import { a } from "../index.js";\nexport { b } from \'./b.js\';\nexport * from "./c";\n');
+  });
+
+  it('rewrites several references on one line independently', () => {
+    const text = "export declare const pair: [typeof import('#a'), typeof import('#b')];";
+
+    expect(rewriteModuleSpecifiers('x.d.ts', text, specifier => `./${specifier.slice(1)}.js`)).toBe(
+      "export declare const pair: [typeof import('./a.js'), typeof import('./b.js')];",
+    );
+  });
+
+  it('returns the text unchanged when nothing maps', () => {
+    const text = "import { a } from './a';\n";
+
+    expect(rewriteModuleSpecifiers('x.ts', text, () => undefined)).toBe(text);
+  });
+});
diff --git a/test/ci/gate-parity.test.ts b/test/ci/gate-parity.test.ts
index b6ae223a6..23f7f590f 100644
--- a/test/ci/gate-parity.test.ts
+++ b/test/ci/gate-parity.test.ts
@@ -65,9 +65,9 @@ describe('the typecheck group covers the type-level gates verify:quick knows abo
     expect(GATE_GROUPS.typecheck).toContain(script);
   });
 
-  it('type-checks the full-bundle entry as part of the example program', () => {
+  it('type-checks the example program against the workspace sources', () => {
     const examplesConfig = readFileSync(resolve(repoRoot, 'tsconfig.examples.json'), 'utf8');
-    expect(examplesConfig).toContain('"scripts/exo-full.entry.ts"');
+    expect(examplesConfig).toContain('"examples/**/*.ts"');
   });
 
   it('keeps `typecheck:site` out of the ungated typecheck group - it needs the built dist', () => {
diff --git a/test/ci/local-policy.test.ts b/test/ci/local-policy.test.ts
index d0cb32707..ea3b1c187 100644
--- a/test/ci/local-policy.test.ts
+++ b/test/ci/local-policy.test.ts
@@ -55,7 +55,7 @@ describe('local validation policy', () => {
 
   it('uses package dependencies and special browser contracts', () => {
     const pathfinding = selectLocalPolicy(['packages/exojs-pathfinding/src/Grid.ts']);
-    expect(pathfinding.packageTypechecks).toContain('@codexo/exojs-pathfinding');
+    expect(pathfinding.packageTypechecks).toContain('@codexo/exojs-module-pathfinding');
     expect(pathfinding.gates).toContain('lint');
     expect(pathfinding.unitProjects).toContain('exojs-pathfinding');
     expect(pathfinding.browser).toEqual([]);
diff --git a/test/ci/pages-deployment.test.ts b/test/ci/pages-deployment.test.ts
index 7b5812384..f23d6847e 100644
--- a/test/ci/pages-deployment.test.ts
+++ b/test/ci/pages-deployment.test.ts
@@ -6,10 +6,13 @@ import { describe, expect, it } from 'vitest';
 /**
  * Locks the build-once/deploy-once contract for GitHub Pages.
  *
- * The site is built and validated exactly once, by the `site-build` job in
- * `ci.yml`, which publishes `site/dist/**` as an artifact named after
- * the commit it was built from. `deploy-pages.yml` then downloads exactly that
- * artifact - from exactly the workflow run that triggered it - and deploys it.
+ * Each channel is built and validated exactly once: by the `site` job in
+ * `ci.yml` for a push to main (Stable) or next (Next), or by a Release for a
+ * stable tag. The tree goes up as `site-<channel>-<sha>-<attempt>` with its
+ * `site-build.json`. `deploy-pages.yml` is the one publisher: it re-decides
+ * both channels from GitHub metadata, verifies the chosen bytes with scripts
+ * from the trusted default branch, composes Stable at the root and Next under
+ * `next/`, and deploys that one tree.
  *
  * The defect this prevents: the Pages workflow used to check the sources out
  * and rebuild the library and the site itself, so what went live was a second,
@@ -24,9 +27,7 @@ const ci = readWorkflow('ci.yml');
 const release = readWorkflow('release.yml');
 const deployPages = readWorkflow('deploy-pages.yml');
 
-/** The artifact name is derived from the commit on both sides of the handover. */
-const SITE_ARTIFACT_UPLOAD = 'site-dist-${{ github.sha }}';
-const SITE_ARTIFACT_DOWNLOAD = 'site-dist-${{ github.event.workflow_run.head_sha }}';
+const CANDIDATE_UPLOAD = 'site-${{ steps.channel.outputs.channel }}-${{ github.sha }}-${{ github.run_attempt }}';
 
 /** Everything between `<job>:` and the next top-level job key. */
 const jobBlock = (workflow: string, job: string) => {
@@ -38,71 +39,132 @@ const jobBlock = (workflow: string, job: string) => {
   return next === -1 ? rest : rest.slice(0, next);
 };
 
-describe('site artifact production (ci.yml)', () => {
-  const siteBuild = jobBlock(ci, 'site');
+/** The script bodies of every `run:` step, single-line and block form. */
+const runScripts = (workflow: string): string[] =>
+  [...workflow.matchAll(/^( *)(?:- )?run: ?(?:[|>]-?\n((?:\1 {2,}.*\n?)+)|(.*))$/gm)].map(match => (match[2] ?? match[3] ?? '').trim());
 
-  it('uploads the built site as a commit-identified artifact', () => {
-    expect(siteBuild).toContain('actions/upload-artifact@v7');
-    expect(siteBuild).toContain(`name: ${SITE_ARTIFACT_UPLOAD}`);
-    expect(siteBuild).toContain('path: site/dist/');
+describe('site candidate production (ci.yml)', () => {
+  const site = jobBlock(ci, 'site');
+
+  it('builds the channel the branch publishes, from the one channel table', () => {
+    expect(site).toContain('node scripts/pages/site-channel.ts >> "$GITHUB_OUTPUT"');
+    expect(site).toContain("SITE_REF: ${{ github.event_name == 'pull_request' && github.base_ref || github.ref_name }}");
+    expect(site).toContain('EXOJS_SITE_CHANNEL: ${{ steps.channel.outputs.channel }}');
+    expect(site).toContain('EXOJS_SITE_BASE: ${{ steps.channel.outputs.base }}');
+  });
+
+  it('uploads the built tree as a channel candidate, kept 90 days for a push', () => {
+    expect(site).toContain('actions/upload-artifact@v7');
+    expect(site).toContain(`name: ${CANDIDATE_UPLOAD}`);
+    expect(site).toContain('path: site/dist/');
+    expect(site).toContain("retention-days: ${{ github.event_name == 'push' && 90 || 1 }}");
+    expect(site).toContain(`candidate: ${CANDIDATE_UPLOAD}`);
   });
 
   it('fails the build rather than publishing an empty site artifact', () => {
-    expect(siteBuild).toContain('if-no-files-found: error');
+    expect(site).toContain('if-no-files-found: error');
   });
 
-  it('uploads only after the site typecheck gate and the site build have passed', () => {
-    const gateIndex = siteBuild.indexOf('pnpm gates site');
-    const buildIndex = siteBuild.indexOf('pnpm site:build');
-    const uploadIndex = siteBuild.indexOf('actions/upload-artifact@v7');
+  it('uploads only after the site gate, the build and the candidate verification have passed', () => {
+    const gateIndex = site.indexOf('pnpm gates site');
+    const buildIndex = site.indexOf('pnpm site:build');
+    const verifyIndex = site.indexOf('node scripts/pages/channel-artifact.ts verify --dir site/dist');
+    const uploadIndex = site.indexOf('actions/upload-artifact@v7\n        with:\n          name: site-');
     expect(gateIndex).toBeGreaterThan(-1);
     expect(buildIndex).toBeGreaterThan(gateIndex);
-    expect(uploadIndex).toBeGreaterThan(buildIndex);
+    expect(verifyIndex).toBeGreaterThan(buildIndex);
+    expect(uploadIndex).toBeGreaterThan(verifyIndex);
+  });
+
+  it('smokes exactly that candidate', () => {
+    const smoke = jobBlock(ci, 'smoke');
+    expect(smoke).toContain('name: ${{ needs.site.outputs.candidate }}');
+    expect(smoke).toContain('path: site/dist');
   });
 });
 
-describe('site artifact production at a release (release.yml)', () => {
-  it('uploads the site under the tagged commit so Deploy Pages finds it', () => {
+describe('site candidate production at a release (release.yml)', () => {
+  it('builds Stable and uploads it under the tagged commit for the publisher', () => {
     const prepare = jobBlock(release, 'prepare');
-    expect(prepare).toContain('name: site-dist-${{ needs.trust.outputs.sha }}');
+    expect(prepare).toContain('EXOJS_SITE_CHANNEL: stable');
+    expect(prepare).toContain('node scripts/pages/channel-artifact.ts verify --dir site/dist --channel stable --sha "$RELEASE_SHA"');
+    expect(prepare).toContain('name: site-stable-${{ needs.trust.outputs.sha }}-${{ github.run_attempt }}');
     expect(prepare).toContain('path: site/dist/');
+    expect(prepare).toContain('retention-days: 90');
   });
 });
 
-describe('Pages deployment (deploy-pages.yml)', () => {
+describe('Pages publisher (deploy-pages.yml)', () => {
+  const compose = jobBlock(deployPages, 'compose');
+  const deploy = jobBlock(deployPages, 'deploy');
+
   it('builds no source code of its own', () => {
-    for (const forbidden of [
-      'pnpm install',
-      'pnpm build',
-      'pnpm site:build',
-      'pnpm --filter',
-      'pnpm/action-setup',
-      'actions/setup-node',
-      'actions/checkout',
+    for (const forbidden of ['pnpm', './.github/actions/setup', 'npm install', 'npx ', 'actions/download-artifact']) {
+      expect(deployPages, `deploy-pages.yml must not use '${forbidden}'`).not.toContain(forbidden);
+    }
+  });
+
+  it('runs only its own scripts from the trusted default-branch checkout, never a downloaded file', () => {
+    expect(compose).toContain('ref: ${{ github.event.repository.default_branch }}');
+    expect(compose).toContain('persist-credentials: false');
+    expect(compose).toContain('/scripts/pages/');
+    expect(deployPages.match(/actions\/checkout@/g)).toHaveLength(1);
+
+    const scripts = runScripts(deployPages);
+    expect(scripts.length).toBeGreaterThan(0);
+
+    for (const script of scripts) {
+      expect(script, 'every step runs a publisher script with node').toMatch(/^node scripts\/pages\/[a-z-]+\.ts\b/);
+      // Event text must never be interpolated into a shell script.
+      expect(script).not.toContain('${{');
+    }
+  });
+
+  it('is woken by a finished CI or Release run and has no other trigger', () => {
+    const triggers = deployPages.slice(deployPages.indexOf('\non:\n'), deployPages.indexOf('\npermissions:'));
+    expect(triggers).toContain("workflows: ['Release', 'CI']");
+    expect(triggers).toContain('types: [completed]');
+
+    for (const other of ['workflow_dispatch', 'pull_request', 'push:', 'schedule']) {
+      expect(triggers).not.toContain(other);
+    }
+  });
+
+  it('acts only on a successful same-repository push run, and re-decides from metadata', () => {
+    for (const condition of [
+      "github.event.workflow_run.conclusion == 'success'",
+      "github.event.workflow_run.event == 'push'",
+      'github.event.workflow_run.repository.full_name == github.repository',
+      'github.event.workflow_run.head_repository.full_name == github.repository',
     ]) {
-      expect(deployPages, `deploy-pages.yml must not run '${forbidden}'`).not.toContain(forbidden);
+      expect(compose).toContain(condition);
     }
+
+    expect(compose).toContain('TRIGGER_RUN_ID: ${{ github.event.workflow_run.id }}');
+    expect(compose).toContain('node scripts/pages/select-channels.ts');
+    expect(compose).toContain('node scripts/pages/compose-site.ts');
   });
 
-  it('deploys the artifact of the run that triggered it', () => {
-    expect(deployPages).toContain('actions/download-artifact@v8');
-    expect(deployPages).toContain(`name: ${SITE_ARTIFACT_DOWNLOAD}`);
-    expect(deployPages).toContain('run-id: ${{ github.event.workflow_run.id }}');
-    // Cross-run artifact reads need an explicit token and `actions: read`.
-    expect(deployPages).toContain('actions: read');
-    expect(deployPages).toContain('github-token: ${{ github.token }}');
+  it('serializes the whole site without cancelling a running deployment', () => {
+    expect(deployPages).toContain('concurrency:\n  group: pages-combined\n  cancel-in-progress: false');
   });
 
-  it('refuses to deploy when it has no triggering run to read the artifact from', () => {
-    expect(deployPages).toContain('workflow_run.id');
-    expect(deployPages).toMatch(/github\.event_name == 'workflow_run'/);
-    // A manual dispatch has no triggering run, so it must not be a trigger.
-    const triggers = deployPages.slice(deployPages.indexOf('\non:\n'), deployPages.indexOf('\npermissions:\n'));
-    expect(triggers).not.toContain('workflow_dispatch');
+  it('grants each job only what it needs', () => {
+    expect(deployPages).toContain('\npermissions: {}\n');
+    expect(compose).toContain(
+      'permissions:\n      contents: read\n      # Listing runs and reading artifacts of other workflow runs.\n      actions: read\n    outputs:',
+    );
+    expect(compose).not.toMatch(/pages: write|id-token: write/);
+    expect(deploy).toContain('permissions:\n      pages: write\n      id-token: write\n    environment:');
+    expect(deploy).not.toMatch(/contents:|actions:/);
   });
 
-  it('still hands the deployed tree to the Pages actions', () => {
-    expect(deployPages).toContain('actions/upload-pages-artifact@v5');
-    expect(deployPages).toContain('actions/deploy-pages@v5');
+  it('uploads exactly one Pages artifact and keeps it with the deployed pairing', () => {
+    expect(deployPages.match(/actions\/upload-pages-artifact@v5/g)).toHaveLength(1);
+    expect(deployPages.match(/actions\/deploy-pages@v5/g)).toHaveLength(1);
+    expect(compose).toContain('retention-days: 90');
+    expect(compose).toContain('name: pages-channels-${{ github.run_id }}');
+    expect(deploy).toContain("if: needs.compose.outputs.deploy == 'true'");
+    expect(deploy).toContain('name: github-pages');
   });
 });
diff --git a/test/ci/plan.test.ts b/test/ci/plan.test.ts
index 672123d6a..5dd249e54 100644
--- a/test/ci/plan.test.ts
+++ b/test/ci/plan.test.ts
@@ -112,6 +112,36 @@ describe('plan for a push with a resolved diff', () => {
   });
 });
 
+describe('plan for a push that publishes a site channel', () => {
+  // A green push to main or next is what the Pages publisher deploys from, so
+  // every change that can alter the served bytes has to produce a candidate,
+  // and that candidate has to have been smoked at its real base path.
+  it.each(['main', 'next'])('builds and smokes a candidate for a guide-only change on %s, sampled', refName => {
+    const plan = push(['site/src/content/guide/audio/audio-basics.mdx'], refName);
+    expect(plan).toMatchObject({ build: true, site: true, smoke: true, smokeSample: true });
+  });
+
+  it('builds a candidate when the tooling that builds the vendored dist or the manifest changes', () => {
+    for (const file of [
+      'scripts/build.ts',
+      'scripts/build-extension.ts',
+      'scripts/pages/site-manifest.ts',
+      'scripts/check-dist-fresh.ts',
+    ]) {
+      expect(push([file]), `${file}`).toMatchObject({ site: true, smoke: true });
+    }
+  });
+
+  it('smokes the whole catalog when the catalog itself changed', () => {
+    expect(push(['examples/sprites/basic.ts'])).toMatchObject({ smoke: true, smokeSample: false });
+  });
+
+  it('does not smoke a guide-only change of a pull request or another branch', () => {
+    expect(pullRequest(['site/src/content/guide/audio/audio-basics.mdx'])).toMatchObject({ site: true, smoke: false });
+    expect(push(['site/src/content/guide/audio/audio-basics.mdx'], 'release/0.15.x')).toMatchObject({ site: true, smoke: false });
+  });
+});
+
 describe('plan for events that always validate everything', () => {
   it('ignores a changed-file list on a manual dispatch', () => {
     const plan = planCi({ eventName: 'workflow_dispatch', changedFiles: ['README.md'], refName: 'next' });
diff --git a/test/ci/select-lanes.test.ts b/test/ci/select-lanes.test.ts
index ebfa9c19d..b9f1bb3cb 100644
--- a/test/ci/select-lanes.test.ts
+++ b/test/ci/select-lanes.test.ts
@@ -176,6 +176,20 @@ describe('CI lane selection — engine/site areas', () => {
     expect(lanes.lint).toBe(true);
   });
 
+  it('treats the site manifest and the dist build tooling as site changes', () => {
+    for (const file of [
+      'scripts/pages/compose-site.ts',
+      'scripts/build.ts',
+      'scripts/build-extension.ts',
+      'scripts/check-dist-fresh.ts',
+      'scripts/dist-freshness.ts',
+    ]) {
+      expect(selectAreas([file]).site, `${file}`).toBe(true);
+    }
+
+    expect(selectAreas(['scripts/ci/gates.ts']).site).toBe(false);
+  });
+
   it('handles Windows backslash separators and blank/whitespace entries', () => {
     expect(selectAreas(['packages\\exojs-tilemap\\src\\TileMap.ts', '', '   '])).toMatchObject({
       engine: true,
@@ -364,7 +378,6 @@ describe('CI lane selection - example-smoke lane', () => {
   it('the generated `.js` twin and the catalog manifest run the lane too', () => {
     expect(decide('examples/input/key-rebinding.js').lanes.exampleSmoke).toBe(true);
     expect(decide('examples/examples.json').lanes.exampleSmoke).toBe(true);
-    expect(decide('examples/assets/catalog.js').lanes.exampleSmoke).toBe(true);
   });
 
   it('the harness, the preview page and the catalog sync script run the lane', () => {
diff --git a/test/ci/vitest-project-parity.test.ts b/test/ci/vitest-project-parity.test.ts
index 286f78c2a..d5d92d63d 100644
--- a/test/ci/vitest-project-parity.test.ts
+++ b/test/ci/vitest-project-parity.test.ts
@@ -54,8 +54,13 @@ const scriptsRunning = (project: string): string[] =>
     .filter(([, command]) => runsVitest(command) && projectPatterns(command).some(pattern => matchesPattern(pattern, project)))
     .map(([name]) => name);
 
-/** Scripts reachable from a lane, following one level of `pnpm <script>` delegation (`test:coverage` -> `test`). */
-const laneText = LANES.map(lane => [lane.run, lane.ciRun ?? '', lane.coverageRun ?? ''].join(' ')).join(' ');
+/**
+ * Scripts reachable from a lane or from the CI build job (which runs the
+ * projects that need the built dist), following one level of `pnpm <script>`
+ * delegation (`test:coverage` -> `test`).
+ */
+const buildJob = /^ {2}build:\n[\s\S]*?(?=^ {2}\w)/m.exec(readFileSync(resolve(repoRoot, '.github/workflows/ci.yml'), 'utf8'))?.[0] ?? '';
+const laneText = [...LANES.map(lane => [lane.run, lane.ciRun ?? '', lane.coverageRun ?? ''].join(' ')), buildJob].join(' ');
 const reachesLane = (script: string): boolean =>
   laneText.includes(`pnpm ${script}`) ||
   Object.entries(packageJson.scripts).some(([name, command]) => command.startsWith(`pnpm ${script} `) && laneText.includes(`pnpm ${name}`));
diff --git a/test/core/logging-production-filter.test.ts b/test/core/logging-production-filter.test.ts
index d3ef06be8..81cec81c0 100644
--- a/test/core/logging-production-filter.test.ts
+++ b/test/core/logging-production-filter.test.ts
@@ -61,6 +61,9 @@ const buildProductionLogging = async (pureFuncs: string[]): Promise<string> => {
   });
 
   try {
+    // `iife` is the vm-harness vehicle (a plain function scope the sandbox
+    // binding can read), not a claim about the v0.20 distribution, which is
+    // ESM-only: this test verifies production define stripping.
     const { output } = await bundle.generate({ format: 'iife', name: 'logging' });
 
     return output[0]!.code;
diff --git a/test/core/scene-scope-sync-hooks.test.ts b/test/core/scene-scope-sync-hooks.test.ts
index 4dc52bc71..46b4f7538 100644
--- a/test/core/scene-scope-sync-hooks.test.ts
+++ b/test/core/scene-scope-sync-hooks.test.ts
@@ -410,6 +410,9 @@ const buildProductionSyncHooks = async (pureFuncs: string[]): Promise<string> =>
   });
 
   try {
+    // `iife` is the vm-harness vehicle (a plain function scope the sandbox
+    // binding can read), not a claim about the v0.20 distribution, which is
+    // ESM-only: this test verifies production define stripping.
     const { output } = await bundle.generate({ format: 'iife', name: 'syncHooks' });
 
     return output[0]!.code;
diff --git a/test/perf/rendering/structural-tilemap.test.ts b/test/perf/rendering/structural-tilemap.test.ts
index a26c545b3..9b3ec7473 100644
--- a/test/perf/rendering/structural-tilemap.test.ts
+++ b/test/perf/rendering/structural-tilemap.test.ts
@@ -6,7 +6,7 @@
  * per chunk cost one page (draw) each. Cached chunk geometry means a camera pan
  * rebuilds nothing, and a single tile edit rebuilds exactly one chunk.
  */
-import { TileSet } from '@codexo/exojs-tilemap';
+import { TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, it } from 'vitest';
 
 import { Texture } from '#rendering/texture/Texture';
diff --git a/test/perf/rendering/tilemapFixtures.ts b/test/perf/rendering/tilemapFixtures.ts
index 5fa377ccb..578d528d4 100644
--- a/test/perf/rendering/tilemapFixtures.ts
+++ b/test/perf/rendering/tilemapFixtures.ts
@@ -6,7 +6,7 @@
  *
  * @internal Test/perf-only.
  */
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileMapNode, TileSet } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileMapNode, TileSet } from '@codexo/exojs/tilemap';
 
 import { materializeRendererBindings } from '#extensions/materialize';
 import type { RenderBackend } from '#rendering/RenderBackend';
diff --git a/test/release/bootstrap-publish.test.ts b/test/release/bootstrap-publish.test.ts
index 6dbf7ad23..3c62ff249 100644
--- a/test/release/bootstrap-publish.test.ts
+++ b/test/release/bootstrap-publish.test.ts
@@ -31,9 +31,12 @@ describe('bootstrapTargets', () => {
   it('offers every extension and every independent package, and never Core', () => {
     const names = bootstrapTargets().map(target => target.name);
 
-    expect(names).toContain('@codexo/exojs-tilemap-physics');
+    expect(names).toContain('@codexo/exojs-tiled');
     expect(names).toContain('@codexo/exojs-build');
     expect(names).not.toContain('@codexo/exojs');
+    // Runtime modules ship inside the Core tarball, so no name of theirs,
+    // private or retired, is ever published on its own.
+    expect(names.filter(name => name.startsWith('@codexo/exojs-module-') || name === '@codexo/exojs-tilemap-physics')).toEqual([]);
     // The scaffolder is on the engine's lockstep line, so the coordinated
     // release owns it - bootstrap publish must not offer it.
     expect(names).not.toContain('create-exo-app');
@@ -42,7 +45,7 @@ describe('bootstrapTargets', () => {
   it('marks the lockstep line so a caller can tell the two version lines apart', () => {
     const targets = bootstrapTargets();
 
-    expect(targets.find(t => t.name === '@codexo/exojs-tilemap-physics')?.lockstep).toBe(true);
+    expect(targets.find(t => t.name === '@codexo/exojs-tiled')?.lockstep).toBe(true);
     expect(targets.find(t => t.name === '@codexo/exojs-build')?.lockstep).toBe(false);
   });
 });
@@ -87,8 +90,8 @@ describe('bootstrapPublish', () => {
   });
 
   it('refuses a name that is already on the registry and names the path to use instead', () => {
-    const runner = createRecordingRunner(invocation => (invocation.args[0] === 'view' ? ok('@codexo/exojs-tilemap-physics\n') : ok()));
-    const report = bootstrapPublish('@codexo/exojs-tilemap-physics', { dryRun: true, skipBuild: false }, runner, repoRoot);
+    const runner = createRecordingRunner(invocation => (invocation.args[0] === 'view' ? ok('@codexo/exojs-tiled\n') : ok()));
+    const report = bootstrapPublish('@codexo/exojs-tiled', { dryRun: true, skipBuild: false }, runner, repoRoot);
 
     expect(report.ok).toBe(false);
     expect(report.failedStep).toBe('registry-check');
@@ -215,8 +218,8 @@ describe('bootstrapPublish - release mode, for the packages off the lockstep lin
   });
 
   it('refuses a lockstep package, which the coordinated release owns', () => {
-    const runner = createRecordingRunner(invocation => (invocation.args[0] === 'view' ? ok('@codexo/exojs-tilemap-physics\n') : ok()));
-    const report = bootstrapPublish('@codexo/exojs-tilemap-physics', { dryRun: true, skipBuild: false, mode: 'release' }, runner, repoRoot);
+    const runner = createRecordingRunner(invocation => (invocation.args[0] === 'view' ? ok('@codexo/exojs-tiled\n') : ok()));
+    const report = bootstrapPublish('@codexo/exojs-tiled', { dryRun: true, skipBuild: false, mode: 'release' }, runner, repoRoot);
 
     expect(report.ok).toBe(false);
     expect(report.reason).toMatch(/coordinated release publishes it/);
diff --git a/test/release/full-zip.test.ts b/test/release/full-zip.test.ts
index a1918dfa8..41bbf1ccb 100644
--- a/test/release/full-zip.test.ts
+++ b/test/release/full-zip.test.ts
@@ -44,7 +44,7 @@ describe('scanForbiddenContent', () => {
     write('vendor/exojs/esm/index.js', "export * from './core/index.js';\n");
     write('vendor/exojs/esm/index.d.ts', 'export declare const x: number;\n');
     write('examples/js/sprites/basic.js', "import { Application } from '@codexo/exojs';\n");
-    write('examples/src/sprites/basic.ts', "import { Application } from '@codexo/exojs';\nconst p = assets.demo.textures.shipA;\n");
+    write('examples/src/sprites/basic.ts', "import { Application } from '@codexo/exojs';\nconst p = assets.ship;\n");
     write('examples/examples.json', '{"sprites":[]}');
     expect(scanForbiddenContent(tree)).toEqual([]);
   });
@@ -81,7 +81,7 @@ describe('scanForbiddenContent', () => {
   });
 
   it('allows .ts under examples/src (lesson sources are not runtime entrypoints)', () => {
-    write('examples/src/a/b.ts', 'const p = assets.demo.audio.musicLoop;\nexport {};\n');
+    write('examples/src/a/b.ts', 'const p = assets.musicLoopMain;\nexport {};\n');
     expect(scanForbiddenContent(tree)).toEqual([]);
   });
 });
diff --git a/test/release/hybrid-runtime-exports.test.ts b/test/release/hybrid-runtime-exports.test.ts
new file mode 100644
index 000000000..9c672a4bd
--- /dev/null
+++ b/test/release/hybrid-runtime-exports.test.ts
@@ -0,0 +1,186 @@
+/**
+ * The Core tarball alone carries every runtime module: installed with nothing
+ * else, it resolves all seven subpaths and the debug entry at runtime and under
+ * both TypeScript module resolutions, ships every file its `exports` map names,
+ * and its module declarations need no source checkout to resolve.
+ */
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+
+import { findModuleSpecifiers } from '../../scripts/lib/module-specifiers';
+import { CORE_CONSUMER_TS, runNodeCheck, subpathConsumerSource, typecheckConsumer } from '../../scripts/release/external-consumers';
+import { RUNTIME_MODULES } from '../../scripts/release/lockstep-packages';
+import { type InstalledConsumer, installHybridConsumer, runsAgainstBuild } from '../support/hybrid-runtime-package';
+
+const RUNTIME_SUBPATHS = ['tilemap', 'particles', 'audio-fx', 'physics', 'tilemap-physics', 'lighting', 'pathfinding'] as const;
+const RETIRED_PACKAGES = RUNTIME_SUBPATHS.map(subpath => `@codexo/exojs-${subpath}`);
+
+const listFiles = (dir: string): string[] =>
+  readdirSync(dir, { withFileTypes: true }).flatMap(entry =>
+    entry.isDirectory() ? listFiles(join(dir, entry.name)) : [join(dir, entry.name)],
+  );
+
+const collectTargets = (value: unknown): string[] => {
+  if (typeof value === 'string') {
+    return [value];
+  }
+
+  return value !== null && typeof value === 'object' ? Object.values(value as Record<string, unknown>).flatMap(collectTargets) : [];
+};
+
+const ENTRY_IMPORTS = `const entries = ['@codexo/exojs', ${[...RUNTIME_SUBPATHS, 'debug', 'renderer-sdk'].map(subpath => `'@codexo/exojs/${subpath}'`).join(', ')}];`;
+
+const importOrderScript = (physicsDebugFirst: boolean): string => `${ENTRY_IMPORTS}
+const physicsDebugUrl = new URL('./node_modules/@codexo/exojs/dist/esm/physics/debug/index.js', import.meta.url);
+${physicsDebugFirst ? 'const physicsDebug = await import(physicsDebugUrl.href);' : ''}
+const debug = await import('@codexo/exojs/debug');
+${physicsDebugFirst ? '' : 'const physicsDebug = await import(physicsDebugUrl.href);'}
+const empty = [];
+for (const entry of entries) {
+  if (Object.keys(await import(entry)).length === 0) empty.push(entry);
+}
+const ok =
+  empty.length === 0 &&
+  typeof debug.PhysicsDebugDraw === 'function' &&
+  debug.PhysicsDebugDraw === physicsDebug.PhysicsDebugDraw &&
+  Object.getPrototypeOf(debug.PhysicsDebugDraw) === debug.DebugLayer;
+console.log(ok ? 'ENTRIES_OK' : 'ENTRIES_BAD ' + JSON.stringify({ empty, draw: typeof debug.PhysicsDebugDraw }));
+`;
+
+const SIDE_EFFECT_PROBE = `${ENTRY_IMPORTS}
+const calls = [];
+const record = name => () => { calls.push(name); return 0; };
+for (const name of ['setTimeout', 'setInterval', 'setImmediate', 'requestAnimationFrame', 'requestIdleCallback']) {
+  globalThis[name] = record(name);
+}
+for (const name of ['AudioContext', 'OfflineAudioContext', 'Worker', 'MessageChannel', 'BroadcastChannel']) {
+  globalThis[name] = class { constructor() { calls.push(name); } };
+}
+globalThis.document = new Proxy({}, { get: (_target, key) => { calls.push('document.' + String(key)); return undefined; } });
+const before = new Set(Reflect.ownKeys(globalThis));
+for (const entry of entries) await import(entry);
+const added = Reflect.ownKeys(globalThis).filter(key => !before.has(key)).map(String);
+if (calls.length > 0 || added.length > 0) {
+  console.log('SIDE_EFFECTS ' + JSON.stringify({ calls, added }));
+  process.exit(1);
+}
+console.log('NO_SIDE_EFFECTS');
+`;
+
+describe.runIf(runsAgainstBuild(['dist/esm/index.js']))('hybrid runtime: Core tarball alone', () => {
+  let consumer: InstalledConsumer;
+
+  beforeAll(() => {
+    consumer = installHybridConsumer();
+  }, 180_000);
+
+  afterAll(() => consumer?.dispose());
+
+  it('lists exactly the seven runtime modules in the release matrix', () => {
+    expect(RUNTIME_MODULES.map(module => module.subpath)).toEqual([...RUNTIME_SUBPATHS]);
+  });
+
+  it('installs without any retired runtime package and depends on none', () => {
+    const manifest = JSON.parse(readFileSync(join(consumer.coreDir, 'package.json'), 'utf8')) as Record<
+      string,
+      Record<string, string> | undefined
+    >;
+    const declared = Object.keys({ ...manifest['dependencies'], ...manifest['peerDependencies'], ...manifest['optionalDependencies'] });
+
+    expect(declared.filter(name => name.startsWith('@codexo/'))).toEqual([]);
+    expect(readdirSync(join(consumer.dir, 'node_modules', '@codexo'))).toEqual(['exojs']);
+  });
+
+  it('exports every runtime module subpath with the same condition shape as the root', () => {
+    const exports = (JSON.parse(readFileSync(join(consumer.coreDir, 'package.json'), 'utf8')) as { exports: Record<string, unknown> })
+      .exports;
+
+    const expected = Object.fromEntries(
+      RUNTIME_SUBPATHS.map(subpath => [
+        `./${subpath}`,
+        { types: `./dist/esm/${subpath}/index.d.ts`, import: `./dist/esm/${subpath}/index.js`, default: `./dist/esm/${subpath}/index.js` },
+      ]),
+    );
+
+    expect(Object.fromEntries(RUNTIME_SUBPATHS.map(subpath => [`./${subpath}`, exports[`./${subpath}`]]))).toEqual(expected);
+    expect(['.', './extensions', './renderer-sdk', './debug', './package.json'].filter(key => exports[key] === undefined)).toEqual([]);
+  });
+
+  it('ships every exports target in the tarball', () => {
+    const exports = (JSON.parse(readFileSync(join(consumer.coreDir, 'package.json'), 'utf8')) as { exports: unknown }).exports;
+    const missing = collectTargets(exports).filter(target => !existsSync(resolve(consumer.coreDir, target)));
+
+    expect(missing).toEqual([]);
+  });
+
+  it.each([false, true])('imports every subpath and the debug entry in Node (physics debug module first: %s)', physicsDebugFirst => {
+    const check = runNodeCheck(
+      consumer.dir,
+      'entries',
+      `entries-${String(physicsDebugFirst)}.mjs`,
+      importOrderScript(physicsDebugFirst),
+      'ENTRIES_OK',
+    );
+
+    expect(check.detail ?? 'ok').toBe('ok');
+    expect(check.ok).toBe(true);
+  });
+
+  it('ships runtime module declarations that name no package and no # import', () => {
+    // Core's own declarations keep resolving `#` through the Core imports map;
+    // the debug entry is checked because it is where Core reaches into physics.
+    const moduleDeclarations = RUNTIME_SUBPATHS.flatMap(subpath => listFiles(join(consumer.coreDir, 'dist', 'esm', subpath))).filter(path =>
+      path.endsWith('.d.ts'),
+    );
+    const offending: string[] = [];
+    const dangling: string[] = [];
+
+    for (const file of [...moduleDeclarations, join(consumer.coreDir, 'dist', 'esm', 'debug', 'index.d.ts')]) {
+      for (const { specifier } of findModuleSpecifiers(file, readFileSync(file, 'utf8'))) {
+        if (specifier.startsWith('@codexo/') || specifier.startsWith('#')) {
+          offending.push(`${file}: ${specifier}`);
+        } else if (specifier.startsWith('.') && !existsSync(resolve(dirname(file), specifier.replace(/\.js$/, '.d.ts')))) {
+          dangling.push(`${file}: ${specifier}`);
+        }
+      }
+    }
+
+    expect(offending).toEqual([]);
+    expect(dangling).toEqual([]);
+  });
+
+  it.each(['bundler', 'nodenext'] as const)(
+    'type-checks a strict %s consumer of every subpath without paths or skipLibCheck',
+    resolution => {
+      const combined = typecheckConsumer(consumer.dir, 'combined', `combined-${resolution}`, CORE_CONSUMER_TS, resolution);
+      const isolated = [...RUNTIME_SUBPATHS, 'debug'].map(subpath =>
+        typecheckConsumer(consumer.dir, subpath, `isolated-${resolution}-${subpath}`, subpathConsumerSource(subpath), resolution),
+      );
+      const failures = [combined, ...isolated].filter(check => !check.ok).map(check => `${check.name}: ${check.detail ?? ''}`);
+
+      expect(failures).toEqual([]);
+    },
+    180_000,
+  );
+
+  it('creates no DOM access, timer, audio context, worker or global on import', () => {
+    const check = runNodeCheck(consumer.dir, 'side effects', 'side-effects.mjs', SIDE_EFFECT_PROBE, 'NO_SIDE_EFFECTS');
+
+    expect(check.detail ?? 'ok').toBe('ok');
+    expect(check.ok).toBe(true);
+  });
+
+  it('does not reference a retired runtime package anywhere in the shipped tree', () => {
+    const files = listFiles(join(consumer.coreDir, 'dist', 'esm')).filter(path => /\.(?:js|d\.ts)$/.test(path));
+    const offending = files.flatMap(file =>
+      findModuleSpecifiers(file, readFileSync(file, 'utf8'))
+        .map(occurrence => occurrence.specifier)
+        .filter(specifier => RETIRED_PACKAGES.some(name => specifier === name || specifier.startsWith(`${name}/`)))
+        .map(specifier => `${file}: ${specifier}`),
+    );
+
+    expect(offending).toEqual([]);
+  });
+});
diff --git a/test/release/hybrid-runtime-identity.test.ts b/test/release/hybrid-runtime-identity.test.ts
new file mode 100644
index 000000000..284ebe002
--- /dev/null
+++ b/test/release/hybrid-runtime-identity.test.ts
@@ -0,0 +1,200 @@
+/**
+ * One Core, one instance per module: a consumer that installs Core next to
+ * adapters and imports Core's root, every runtime subpath and the adapters gets
+ * the same class objects everywhere, loads each shipped file once from the one
+ * installed Core, and a bundler sees the same single Core. A Core-only
+ * production bundle carries no runtime module or debug code at all.
+ */
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { rolldown } from 'rolldown';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+
+import { runNodeCheck } from '../../scripts/release/external-consumers';
+import { type InstalledConsumer, installHybridConsumer, repoRoot, runsAgainstBuild } from '../support/hybrid-runtime-package';
+
+const RUNTIME_SUBPATHS = ['tilemap', 'particles', 'audio-fx', 'physics', 'tilemap-physics', 'lighting', 'pathfinding'] as const;
+const ADAPTERS = ['packages/exojs-tiled', 'packages/exojs-ldtk', 'packages/exojs-aseprite'] as const;
+const OPTIONAL_TREES = [...RUNTIME_SUBPATHS, 'debug'] as const;
+
+const IDENTITY_PROBE = `import { registerHooks } from 'node:module';
+
+const loaded = new Set();
+registerHooks({
+  resolve(specifier, context, nextResolve) {
+    const result = nextResolve(specifier, context);
+    loaded.add(result.url);
+    return result;
+  },
+});
+
+const specifiers = ['@codexo/exojs', ${[...RUNTIME_SUBPATHS, 'debug', 'renderer-sdk'].map(subpath => `'@codexo/exojs/${subpath}'`).join(', ')}, '@codexo/exojs-tiled', '@codexo/exojs-ldtk', '@codexo/exojs-aseprite'];
+const namespaces = Object.fromEntries(await Promise.all(specifiers.map(async specifier => [specifier, await import(specifier)])));
+
+// Every exported value, by name, across all entries: a name exported from two
+// entries must be the same object, or a second copy is loaded.
+const byName = new Map();
+const problems = [];
+for (const [specifier, namespace] of Object.entries(namespaces)) {
+  for (const [name, value] of Object.entries(namespace)) {
+    if (!byName.has(name)) byName.set(name, { specifier, value });
+    else if (byName.get(name).value !== value) problems.push('duplicate ' + name + ' in ' + specifier + ' and ' + byName.get(name).specifier);
+  }
+}
+
+// Every ancestor class of every exported class that some entry also exports
+// must be that very export: \`instanceof\` across entries depends on it.
+let ancestry = 0;
+for (const [specifier, namespace] of Object.entries(namespaces)) {
+  for (const [name, value] of Object.entries(namespace)) {
+    if (typeof value !== 'function') continue;
+    for (let base = Object.getPrototypeOf(value); base && base !== Function.prototype; base = Object.getPrototypeOf(base)) {
+      const exported = byName.get(base.name);
+      if (exported === undefined) continue;
+      ancestry += 1;
+      if (exported.value !== base) problems.push(specifier + ' ' + name + ' extends a second ' + base.name);
+    }
+  }
+}
+
+const core = namespaces['@codexo/exojs'];
+const tilemap = namespaces['@codexo/exojs/tilemap'];
+const layer = new tilemap.TileMapNode(new tilemap.TileMap({ width: 1, height: 1, tileWidth: 1, tileHeight: 1 }));
+if (!(layer instanceof core.Container)) problems.push('TileMapNode is not a Core Container');
+
+const files = [...loaded].filter(url => url.startsWith('file:'));
+const coreRoot = new URL('./node_modules/@codexo/exojs/', import.meta.url).href;
+const foreign = files.filter(url => url.includes('/@codexo/') && !url.startsWith(coreRoot) && !/\\/@codexo\\/exojs-(tiled|ldtk|aseprite)\\//.test(url));
+const shipped = files.filter(url => url.startsWith(coreRoot)).map(url => url.slice(coreRoot.length));
+if (foreign.length > 0) problems.push('foreign @codexo files: ' + foreign.join(', '));
+if (new Set(shipped).size !== shipped.length) problems.push('a Core file was loaded twice');
+
+if (problems.length > 0) {
+  console.log('IDENTITY_BAD ' + JSON.stringify(problems));
+  process.exit(1);
+}
+console.log('IDENTITY_OK ' + JSON.stringify({ names: byName.size, ancestry, coreFiles: shipped.length }));
+`;
+
+interface BundleReport {
+  readonly name: string;
+  readonly bytes: number;
+  readonly moduleIds: readonly string[];
+}
+
+const posix = (path: string): string => path.replaceAll('\\', '/');
+
+describe.runIf(runsAgainstBuild(['dist/esm/index.js']))('hybrid runtime: one Core across entries, adapters and bundles', () => {
+  let consumer: InstalledConsumer;
+  const reports: BundleReport[] = [];
+
+  const bundle = async (name: string, source: string): Promise<BundleReport> => {
+    const entry = join(consumer.dir, `bundle-${name}.js`);
+    writeFileSync(entry, source);
+    const build = await rolldown({ input: entry, cwd: consumer.dir, platform: 'browser', logLevel: 'silent' });
+    const { output } = await build.generate({ format: 'es', minify: true });
+    await build.close();
+    const chunks = output.filter(item => item.type === 'chunk');
+    const report = {
+      name,
+      bytes: chunks.reduce((sum, chunk) => sum + Buffer.byteLength(chunk.code), 0),
+      moduleIds: chunks.flatMap(chunk => chunk.moduleIds).map(posix),
+    };
+    reports.push(report);
+
+    return report;
+  };
+
+  const shippedTrees = (report: BundleReport): string[] => [
+    ...new Set(
+      report.moduleIds.flatMap(id => {
+        const match = /\/node_modules\/@codexo\/exojs\/dist\/esm\/([^/]+)\//.exec(id);
+
+        return match && (OPTIONAL_TREES as readonly string[]).includes(match[1]!) ? [match[1]!] : [];
+      }),
+    ),
+  ];
+
+  /** The installed Core roots a bundle drew shipped files from, and how often it drew `Application`. */
+  const coreCopies = (report: BundleReport): { roots: number; applications: number } => {
+    const shipped = report.moduleIds.filter(id => id.includes('/@codexo/exojs/dist/esm/'));
+
+    return {
+      roots: new Set(shipped.map(id => id.slice(0, id.indexOf('/@codexo/exojs/dist/esm/')))).size,
+      applications: shipped.filter(id => id.endsWith('/dist/esm/core/Application.js')).length,
+    };
+  };
+
+  beforeAll(() => {
+    consumer = installHybridConsumer(ADAPTERS);
+  }, 240_000);
+
+  afterAll(() => {
+    // The bundle sizes are evidence a reviewer compares against a baseline build;
+    // they are written next to the other test reports rather than asserted.
+    if (reports.length > 0) {
+      const directory = join(repoRoot, 'test-results');
+      const summary = reports.map(report => ({
+        name: report.name,
+        minifiedBytes: report.bytes,
+        modules: report.moduleIds.length,
+        trees: shippedTrees(report),
+      }));
+      mkdirSync(directory, { recursive: true });
+      writeFileSync(join(directory, 'hybrid-runtime-bundles.json'), `${JSON.stringify(summary, null, 2)}\n`);
+    }
+
+    consumer?.dispose();
+  });
+
+  it('shares every class across the root, the subpaths and the adapters, and loads each file once', () => {
+    const check = runNodeCheck(consumer.dir, 'identity', 'identity.mjs', IDENTITY_PROBE, 'IDENTITY_OK');
+
+    expect(check.detail ?? 'ok').toBe('ok');
+    expect(check.ok).toBe(true);
+  });
+
+  it('keeps every runtime module and debug code out of a Core-only production bundle', async () => {
+    const whole = await bundle('core-all', "export * from '@codexo/exojs';\n");
+    const app = await bundle(
+      'core-app',
+      "import { Application, Scene, Sprite } from '@codexo/exojs';\nexport const app = new Application();\nexport { Scene, Sprite };\n",
+    );
+
+    expect(shippedTrees(whole)).toEqual([]);
+    expect(shippedTrees(app)).toEqual([]);
+  });
+
+  it('bundles Core exactly once next to one module and next to several', async () => {
+    const one = await bundle(
+      'core-tilemap',
+      "import { Application } from '@codexo/exojs';\nimport { TileMap } from '@codexo/exojs/tilemap';\nexport { Application, TileMap };\n",
+    );
+    const several = await bundle(
+      'core-modules-debug',
+      [
+        "export { Application } from '@codexo/exojs';",
+        "export { TileMap } from '@codexo/exojs/tilemap';",
+        "export { PhysicsWorld } from '@codexo/exojs/physics';",
+        "export { TileColliderStreamer } from '@codexo/exojs/tilemap-physics';",
+        "export { ParticleSystem } from '@codexo/exojs/particles';",
+        "export { PhysicsDebugDraw } from '@codexo/exojs/debug';",
+        "export { TiledMap } from '@codexo/exojs-tiled';",
+        '',
+      ].join('\n'),
+    );
+
+    const shape = (report: BundleReport): object => ({
+      ...coreCopies(report),
+      duplicateModules: report.moduleIds.length - new Set(report.moduleIds).size,
+      nestedInstalls: report.moduleIds.filter(id => /\/@codexo\/exojs\/.*\/node_modules\//.test(id)),
+    });
+    const single = { roots: 1, applications: 1, duplicateModules: 0, nestedInstalls: [] };
+
+    expect({ one: shape(one), several: shape(several) }).toEqual({ one: single, several: single });
+
+    expect(shippedTrees(one)).toEqual(['tilemap']);
+    expect(shippedTrees(several).sort()).toEqual(['debug', 'particles', 'physics', 'tilemap', 'tilemap-physics']);
+  }, 120_000);
+});
diff --git a/test/release/legacy-shims-tarball.test.ts b/test/release/legacy-shims-tarball.test.ts
new file mode 100644
index 000000000..cc71bc7cf
--- /dev/null
+++ b/test/release/legacy-shims-tarball.test.ts
@@ -0,0 +1,73 @@
+/**
+ * The seven retired runtime package names, packed and installed next to the
+ * Core tarball: each shim hands out the very bindings of its Core entry, adds
+ * no second Core and no side effect, and type-checks under both TypeScript
+ * resolutions. Reads the built Core, so it runs in the `release-dist` project.
+ */
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+
+import {
+  importSideEffectProbe,
+  legacyShimConsumerSource,
+  legacyShimIdentityProbe,
+  runNodeCheck,
+  typecheckConsumer,
+} from '../../scripts/release/external-consumers';
+import { LEGACY_SHIMS } from '../../scripts/release/lockstep-packages';
+import { type InstalledConsumer, installHybridConsumer, runsAgainstBuild } from '../support/hybrid-runtime-package';
+
+describe.runIf(runsAgainstBuild(['dist/esm/index.js']))('legacy shims: installed next to the Core tarball', () => {
+  let consumer: InstalledConsumer;
+
+  beforeAll(() => {
+    consumer = installHybridConsumer(LEGACY_SHIMS.map(shim => shim.dir));
+  }, 240_000);
+
+  afterAll(() => consumer?.dispose());
+
+  it('forwards every binding of every entry, PhysicsDebugDraw included, from one Core', () => {
+    const check = runNodeCheck(
+      consumer.dir,
+      'shim identity',
+      'shim-identity.mjs',
+      legacyShimIdentityProbe(LEGACY_SHIMS),
+      'SHIM_IDENTITY_OK',
+    );
+
+    expect(check.detail ?? 'ok').toBe('ok');
+    expect(check.ok).toBe(true);
+  });
+
+  it('creates no DOM access, timer, audio context, worker, registry entry or global on import', () => {
+    const specifiers = LEGACY_SHIMS.flatMap(shim =>
+      shim.entries.map(entry => (entry.entry === '.' ? shim.name : `${shim.name}/${entry.entry.slice(2)}`)),
+    );
+    const check = runNodeCheck(
+      consumer.dir,
+      'shim side effects',
+      'shim-side-effects.mjs',
+      importSideEffectProbe(specifiers),
+      'NO_SIDE_EFFECTS',
+    );
+
+    expect(check.detail ?? 'ok').toBe('ok');
+    expect(check.ok).toBe(true);
+  });
+
+  it.each(['bundler', 'nodenext'] as const)(
+    'type-checks a strict %s consumer of the retired names without paths or skipLibCheck',
+    resolution => {
+      const check = typecheckConsumer(
+        consumer.dir,
+        'shim types',
+        `shims-${resolution}`,
+        legacyShimConsumerSource(LEGACY_SHIMS),
+        resolution,
+      );
+
+      expect(check.detail ?? 'ok').toBe('ok');
+      expect(check.ok).toBe(true);
+    },
+    120_000,
+  );
+});
diff --git a/test/release/legacy-shims.test.ts b/test/release/legacy-shims.test.ts
new file mode 100644
index 000000000..931a8ce16
--- /dev/null
+++ b/test/release/legacy-shims.test.ts
@@ -0,0 +1,116 @@
+/**
+ * The seven retired runtime package names stay importable on the 0.20 line as
+ * forwarders. The shim files are generated from the release matrix and carry
+ * nothing but forwarders; their behaviour against the packed Core is covered by
+ * `legacy-shims-tarball.test.ts`.
+ */
+import { readFileSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+
+import { describe, expect, it } from 'vitest';
+
+import { isShimDue, planShimCut, shimPeerRange, syncLegacyShims } from '../../scripts/release/legacy-shims';
+import { LEGACY_SHIM_LINE, LEGACY_SHIMS, releasesWithEveryCut, RUNTIME_MODULES } from '../../scripts/release/lockstep-packages';
+import { repoRoot } from '../support/hybrid-runtime-package';
+
+interface ShimManifest {
+  name: string;
+  version: string;
+  files: string[];
+  exports: Record<string, unknown>;
+  scripts?: Record<string, string>;
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+  optionalDependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+}
+
+const readShimManifest = (dir: string): ShimManifest =>
+  JSON.parse(readFileSync(resolve(repoRoot, dir, 'package.json'), 'utf8')) as ShimManifest;
+
+describe('legacy shims: the release matrix', () => {
+  it('keeps one shim per runtime module under its retired name', () => {
+    expect(LEGACY_SHIMS.map(shim => shim.name)).toEqual(RUNTIME_MODULES.map(module => module.legacyName));
+    expect(LEGACY_SHIMS.every(shim => shim.role === 'legacy-shim' && shim.line === LEGACY_SHIM_LINE)).toBe(true);
+    expect(LEGACY_SHIMS.some(releasesWithEveryCut)).toBe(false);
+  });
+
+  it('forwards the retired physics debug entry to the Core debug entry, nothing wider', () => {
+    const physics = LEGACY_SHIMS.find(shim => shim.subpath === 'physics');
+
+    expect(physics?.entries).toEqual([
+      { entry: '.', target: '@codexo/exojs/physics' },
+      { entry: './debug', target: '@codexo/exojs/debug', names: { values: ['PhysicsDebugDraw'], types: ['PhysicsDebugDrawOptions'] } },
+    ]);
+  });
+
+  it('has every shim package file exactly as the generator writes it', () => {
+    expect(syncLegacyShims({ check: true })).toEqual([]);
+  });
+
+  it.each(LEGACY_SHIMS.map(shim => [shim.name, shim.dir] as const))(
+    '%s peers on Core alone, depends on nothing and runs no script',
+    (_name, dir) => {
+      const manifest = readShimManifest(dir);
+
+      expect({
+        dependencies: manifest.dependencies,
+        devDependencies: manifest.devDependencies,
+        optionalDependencies: manifest.optionalDependencies,
+        scripts: manifest.scripts,
+        peers: Object.keys(manifest.peerDependencies ?? {}),
+        peerRange: manifest.peerDependencies?.['@codexo/exojs'],
+      }).toEqual({
+        dependencies: undefined,
+        devDependencies: { '@codexo/exojs': 'workspace:*' },
+        optionalDependencies: undefined,
+        scripts: undefined,
+        peers: ['@codexo/exojs'],
+        peerRange: shimPeerRange(manifest.version),
+      });
+    },
+  );
+
+  it.each(LEGACY_SHIMS.map(shim => [shim.name, shim.dir] as const))('%s ships forwarders and nothing else', (_name, dir) => {
+    const manifest = readShimManifest(dir);
+    const code = manifest.files.filter(file => /\.(?:js|d\.ts)$/.test(file));
+
+    expect(manifest.files.filter(file => !code.includes(file))).toEqual(['README.md', 'LICENSE']);
+
+    for (const file of code) {
+      const statements = readFileSync(join(repoRoot, dir, file), 'utf8')
+        .trim()
+        .split('\n');
+
+      expect(statements.every(line => /^export (?:\*|\{[^}]+\}) from '@codexo\/exojs\/[a-z-]+';$/.test(line))).toBe(true);
+    }
+  });
+});
+
+describe('legacy shims: the release cut', () => {
+  const cut = (currentVersion: string, releaseVersion: string, forwarderChanged = false): ReturnType<typeof planShimCut> =>
+    planShimCut({ line: '0.20', currentVersion, releaseVersion, forwarderChanged });
+
+  it('sets the release version when the cut opens the shim line', () => {
+    expect(cut('0.19.1', '0.20.0')).toMatchObject({ action: 'set', version: '0.20.0', peerRange: '0.20.x' });
+  });
+
+  it('does not republish an unchanged forwarder on a Core patch', () => {
+    expect(cut('0.20.0', '0.20.1')).toMatchObject({ action: 'keep' });
+  });
+
+  it('gives a changed forwarder the patch version', () => {
+    expect(cut('0.20.0', '0.20.3', true)).toMatchObject({ action: 'set', version: '0.20.3', peerRange: '0.20.x' });
+  });
+
+  it('never moves a shim onto another line', () => {
+    expect(cut('0.19.1', '0.19.2', true)).toMatchObject({ action: 'keep' });
+    expect(cut('0.20.4', '0.21.0', true)).toMatchObject({ action: 'keep' });
+  });
+
+  it('publishes a shim only in the release that set its version on its line', () => {
+    expect(isShimDue({ line: '0.20' }, '0.20.0', '0.20.0')).toBe(true);
+    expect(isShimDue({ line: '0.20' }, '0.20.0', '0.20.1')).toBe(false);
+    expect(isShimDue({ line: '0.20' }, '0.19.1', '0.19.1')).toBe(false);
+  });
+});
diff --git a/test/release/prepare.test.ts b/test/release/prepare.test.ts
index 58c9c34c7..41995f148 100644
--- a/test/release/prepare.test.ts
+++ b/test/release/prepare.test.ts
@@ -4,16 +4,26 @@ import { fileURLToPath } from 'node:url';
 
 import { describe, expect, it } from 'vitest';
 
+import { isShimDue } from '../../scripts/release/legacy-shims';
+import { LEGACY_SHIMS, LOCKSTEP_PACKAGES } from '../../scripts/release/lockstep-packages';
 import { PUBLISH_ORDER } from '../../scripts/release/manifest';
 import { assertLockstepVersion, officialPackages } from '../../scripts/release/prepare';
 
 const rootDir = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
 
 describe('officialPackages — the set release:prepare actually packs', () => {
-  it('covers the canonical PUBLISH_ORDER exactly, in order', () => {
+  it('covers every lockstep package and only the due legacy shims, in PUBLISH_ORDER', () => {
     // A package missing here is silently never packed - and therefore never
     // published - while verify:lockstep and the publish unit tests still pass.
-    expect(officialPackages(rootDir).map(p => p.name)).toEqual([...PUBLISH_ORDER]);
+    const release = (JSON.parse(readFileSync(resolve(rootDir, 'package.json'), 'utf8')) as { version: string }).version;
+    const due = LEGACY_SHIMS.filter(shim => {
+      const { version } = JSON.parse(readFileSync(resolve(rootDir, shim.dir, 'package.json'), 'utf8')) as { version: string };
+
+      return isShimDue(shim, version, release);
+    }).map(shim => shim.name);
+    const expected = new Set<string>([...LOCKSTEP_PACKAGES.map(p => p.name), ...due]);
+
+    expect(officialPackages(rootDir).map(p => p.name)).toEqual(PUBLISH_ORDER.filter(name => expected.has(name)));
   });
 
   it('maps every package name to the directory that declares it', () => {
diff --git a/test/release/publish.test.ts b/test/release/publish.test.ts
index 72d587b44..1f483693b 100644
--- a/test/release/publish.test.ts
+++ b/test/release/publish.test.ts
@@ -134,7 +134,7 @@ describe('publishRelease — partial failure stops the chain', () => {
       return ok();
     });
 
-  it('Core fails → Particles/Tilemap/Tiled never attempted, ok=false', () => {
+  it('Core fails → the adapters are never attempted, ok=false', () => {
     const runner = failOn('@codexo/exojs');
     const report = publishRelease(manifest, liveOptions(), runner, resolveArtifact);
 
@@ -148,8 +148,8 @@ describe('publishRelease — partial failure stops the chain', () => {
     expect(publishCalls(runner.invocations)).toHaveLength(1);
   });
 
-  it('Particles fails → Core published, Tilemap/Tiled never attempted, ok=false', () => {
-    const runner = failOn('@codexo/exojs-particles');
+  it('Tiled fails → Core published, Aseprite/LDtk never attempted, ok=false', () => {
+    const runner = failOn('@codexo/exojs-tiled');
     const report = publishRelease(manifest, liveOptions(), runner, resolveArtifact);
 
     expect(report.ok).toBe(false);
@@ -160,12 +160,12 @@ describe('publishRelease — partial failure stops the chain', () => {
     expect(distTagCalls(runner.invocations)).toHaveLength(0);
   });
 
-  it('Tiled fails → Core+Particles+Tilemap published but chain stops, ok=false', () => {
-    const runner = failOn('@codexo/exojs-tiled');
+  it('LDtk fails → Core+Tiled+Aseprite published but chain stops, ok=false', () => {
+    const runner = failOn('@codexo/exojs-ldtk');
     const report = publishRelease(manifest, liveOptions(), runner, resolveArtifact);
 
     expect(report.ok).toBe(false);
-    // Tiled is index 3 (Core, Particles, Tilemap published; Tiled fails; rest never attempted).
+    // LDtk is index 3 (Core, Tiled, Aseprite published; LDtk fails; rest never attempted).
     const expected = PUBLISH_ORDER.map((_, i) => (i < 3 ? 'published' : i === 3 ? 'failed' : 'not-attempted'));
     expect(report.packages.map(p => p.publish)).toEqual(expected);
     expect(distTagCalls(runner.invocations)).toHaveLength(0);
diff --git a/test/release/registry-plan.test.ts b/test/release/registry-plan.test.ts
new file mode 100644
index 000000000..b3894ce51
--- /dev/null
+++ b/test/release/registry-plan.test.ts
@@ -0,0 +1,221 @@
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+
+import ts from 'typescript';
+import { describe, expect, it } from 'vitest';
+
+import { createRecordingRunner, ok } from '../../scripts/release/command-runner';
+import { LEGACY_SHIMS } from '../../scripts/release/lockstep-packages';
+import { PUBLISH_ORDER, type ReleaseManifest, sha256File } from '../../scripts/release/manifest';
+import { defaultPublishOptions, publishRelease } from '../../scripts/release/publish';
+import {
+  buildRegistryPlan,
+  deprecationMessage,
+  type PlannedShim,
+  RegistryPlanError,
+  type RegistryPlanInput,
+  renderRegistryPlan,
+  writeRegistryPlan,
+} from '../../scripts/release/registry-plan';
+
+const repoRoot = resolve(import.meta.dirname, '..', '..');
+
+const shim = (subpath: string, overrides: Partial<PlannedShim> = {}): PlannedShim => ({
+  name: `@codexo/exojs-${subpath}`,
+  version: '0.20.0',
+  subpath,
+  line: '0.20',
+  publish: true,
+  reason: 'first release on the 0.20 line',
+  fingerprint: 'f'.repeat(64),
+  ...overrides,
+});
+
+const input = (overrides: Partial<RegistryPlanInput> = {}): RegistryPlanInput => ({
+  releaseVersion: '0.20.0',
+  distTag: 'latest',
+  core: { name: '@codexo/exojs', version: '0.20.0' },
+  lockstep: [
+    { name: '@codexo/exojs-tiled', version: '0.20.0' },
+    { name: '@codexo/exojs-ldtk', version: '0.20.0' },
+  ],
+  shims: [shim('tilemap'), shim('physics')],
+  ...overrides,
+});
+
+describe('buildRegistryPlan - order', () => {
+  it('publishes Core, verifies it, publishes the rest, verifies them, then deprecates the published shims', () => {
+    const plan = buildRegistryPlan(input());
+
+    expect(
+      plan.actions.map(action =>
+        action.kind === 'verify' ? `verify ${action.targets.join(' ')}` : `${action.kind} ${action.name}@${action.version}`,
+      ),
+    ).toEqual([
+      'publish @codexo/exojs@0.20.0',
+      'verify @codexo/exojs@0.20.0',
+      'publish @codexo/exojs-tiled@0.20.0',
+      'publish @codexo/exojs-ldtk@0.20.0',
+      'publish @codexo/exojs-tilemap@0.20.0',
+      'publish @codexo/exojs-physics@0.20.0',
+      'verify @codexo/exojs-tiled@0.20.0 @codexo/exojs-ldtk@0.20.0 @codexo/exojs-tilemap@0.20.0 @codexo/exojs-physics@0.20.0',
+      'deprecate @codexo/exojs-tilemap@0.20.0',
+      'deprecate @codexo/exojs-physics@0.20.0',
+    ]);
+  });
+
+  it('deprecates one exact version with the canonical message and never unpublishes', () => {
+    const plan = buildRegistryPlan(input());
+    const deprecations = plan.actions.filter(action => action.kind === 'deprecate');
+
+    expect(deprecations.map(action => action.command)).toEqual([
+      `npm deprecate @codexo/exojs-tilemap@0.20.0 "${deprecationMessage('tilemap')}"`,
+      `npm deprecate @codexo/exojs-physics@0.20.0 "${deprecationMessage('physics')}"`,
+    ]);
+    expect(deprecationMessage('physics')).toBe(
+      'Since ExoJS v0.20, import from @codexo/exojs/physics. This package is a compatibility shim for the 0.20 line; no independent feature development.',
+    );
+    expect(new Set(plan.actions.map(action => action.kind))).toEqual(new Set(['publish', 'verify', 'deprecate']));
+    expect(JSON.stringify(plan)).not.toMatch(/unpublish|@\*|@[^"\s]*\.x\b/);
+  });
+
+  it('neither republishes nor deprecates a kept shim, and reports why', () => {
+    const kept = shim('lighting', { publish: false, reason: 'forwarders unchanged since 0.20.0; not republished' });
+    const plan = buildRegistryPlan(
+      input({ releaseVersion: '0.20.1', core: { name: '@codexo/exojs', version: '0.20.1' }, lockstep: [], shims: [kept] }),
+    );
+
+    expect(plan.actions.map(action => action.kind)).toEqual(['publish', 'verify']);
+    expect(plan.shims).toEqual([kept]);
+    expect(renderRegistryPlan(plan)).toContain(
+      '@codexo/exojs-lighting@0.20.0 -> @codexo/exojs/lighting: not republished (forwarders unchanged since 0.20.0; not republished)',
+    );
+  });
+});
+
+describe('buildRegistryPlan - refusals', () => {
+  it.each(['*', '0.20.*', '0.20.x', '^0.20.0', '~0.20.0', '>=0.20.0', 'latest', '0.20', ''])('refuses the shim version "%s"', version => {
+    expect(() => buildRegistryPlan(input({ shims: [shim('tilemap', { version })] }))).toThrow(RegistryPlanError);
+  });
+
+  it.each(['*', '0.20.x', 'latest'])('refuses the release version "%s"', version => {
+    expect(() => buildRegistryPlan(input({ releaseVersion: version }))).toThrow(RegistryPlanError);
+  });
+
+  it('refuses a release before the shim line', () => {
+    const historical = { releaseVersion: '0.19.2', core: { name: '@codexo/exojs', version: '0.19.2' }, lockstep: [], shims: [] };
+
+    expect(() => buildRegistryPlan(input(historical))).toThrow(/historical/);
+  });
+
+  it('refuses to publish or deprecate a historical shim version', () => {
+    expect(() => buildRegistryPlan(input({ shims: [shim('tilemap', { version: '0.19.1' })] }))).toThrow(/0\.20 line/);
+  });
+
+  it('refuses a shim version other than the release', () => {
+    const release = { releaseVersion: '0.20.1', core: { name: '@codexo/exojs', version: '0.20.1' }, lockstep: [] };
+
+    expect(() => buildRegistryPlan(input({ ...release, shims: [shim('tilemap', { version: '0.20.0' })] }))).toThrow(RegistryPlanError);
+  });
+
+  it('refuses a lockstep package off the release version and a package listed twice', () => {
+    expect(() => buildRegistryPlan(input({ lockstep: [{ name: '@codexo/exojs-tiled', version: '0.20.1' }] }))).toThrow(RegistryPlanError);
+    expect(() => buildRegistryPlan(input({ shims: [shim('tilemap'), shim('tilemap')] }))).toThrow(/twice/);
+  });
+});
+
+describe('writeRegistryPlan', () => {
+  it('records the plan as JSON and as the rendered dry-run text', () => {
+    const dir = mkdtempSync(join(tmpdir(), 'exo-registry-plan-'));
+
+    try {
+      const plan = buildRegistryPlan(input());
+      const written = writeRegistryPlan(plan, dir);
+
+      expect(JSON.parse(readFileSync(written.json, 'utf8'))).toEqual(JSON.parse(JSON.stringify(plan)));
+      expect(readFileSync(written.text, 'utf8')).toBe(renderRegistryPlan(plan));
+      expect(renderRegistryPlan(plan)).toMatch(/^Registry plan for v0\.20\.0 \(DRY RUN/);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
+/** Every module specifier a file imports, following relative imports through the repository. */
+const importGraph = (entry: string, seen = new Map<string, string[]>()): Map<string, string[]> => {
+  if (seen.has(entry)) {
+    return seen;
+  }
+
+  const source = ts.createSourceFile(entry, readFileSync(entry, 'utf8'), ts.ScriptTarget.Latest, true);
+  const specifiers = source.statements.flatMap(statement =>
+    (ts.isImportDeclaration(statement) || ts.isExportDeclaration(statement)) &&
+    statement.moduleSpecifier &&
+    ts.isStringLiteral(statement.moduleSpecifier)
+      ? [statement.moduleSpecifier.text]
+      : [],
+  );
+  seen.set(entry, specifiers);
+
+  for (const specifier of specifiers.filter(value => value.startsWith('.'))) {
+    importGraph(resolve(dirname(entry), specifier), seen);
+  }
+
+  return seen;
+};
+
+describe('the registry plan cannot reach the registry', () => {
+  it('imports no process-spawning module, directly or through its own imports', () => {
+    const graph = importGraph(resolve(repoRoot, 'scripts/release/registry-plan.ts'));
+    const external = [...new Set([...graph.values()].flat().filter(specifier => !specifier.startsWith('.')))].sort();
+    const local = [...graph.keys()].map(file => file.slice(repoRoot.length + 1).replaceAll('\\', '/')).sort();
+
+    expect(external).toEqual(['node:fs', 'node:path']);
+    expect(local).toEqual(['scripts/release/lockstep-packages.ts', 'scripts/release/registry-plan.ts']);
+  });
+
+  it('leaves deprecation out of the publish stage, shims included', () => {
+    const staging = mkdtempSync(join(tmpdir(), 'exo-registry-publish-'));
+
+    try {
+      const packages = PUBLISH_ORDER.map(name => {
+        const file = `${name.replace('@', '').replace('/', '-')}-0.20.0.tgz`;
+        writeFileSync(join(staging, file), `tarball-${name}`);
+
+        return { name, version: '0.20.0', file, ...sha256File(join(staging, file)) };
+      });
+      const manifest: ReleaseManifest = {
+        version: '0.20.0',
+        revision: 'a'.repeat(40),
+        shortRevision: 'aaaaaaa',
+        tag: 'v0.20.0',
+        generatedAt: new Date(0).toISOString(),
+        publishOrder: [...PUBLISH_ORDER],
+        packages,
+      };
+
+      for (const dryRun of [true, false]) {
+        const runner = createRecordingRunner(() => ok());
+        const report = publishRelease(manifest, { ...defaultPublishOptions('0.20.0'), dryRun, checkExisting: false }, runner, file =>
+          join(staging, file),
+        );
+
+        expect(report.ok).toBe(true);
+        expect(runner.invocations.map(invocation => invocation.args[0])).toEqual(PUBLISH_ORDER.map(() => 'publish'));
+      }
+    } finally {
+      rmSync(staging, { recursive: true, force: true });
+    }
+
+    expect(readFileSync(resolve(repoRoot, 'scripts/release/publish.ts'), 'utf8')).not.toMatch(/deprecate|unpublish/);
+  });
+
+  it('plans a deprecation for every legacy shim the 0.20.0 release publishes', () => {
+    const plan = buildRegistryPlan(input({ shims: LEGACY_SHIMS.map(entry => shim(entry.subpath, { name: entry.name })) }));
+
+    expect(plan.actions.filter(action => action.kind === 'deprecate').map(action => action.name)).toEqual(
+      LEGACY_SHIMS.map(entry => entry.name),
+    );
+  });
+});
diff --git a/test/release/release-coherence.test.ts b/test/release/release-coherence.test.ts
index c0cdf4fe0..37ae7a0c6 100644
--- a/test/release/release-coherence.test.ts
+++ b/test/release/release-coherence.test.ts
@@ -4,6 +4,8 @@ import { fileURLToPath } from 'node:url';
 
 import { describe, expect, it } from 'vitest';
 
+import { INDEPENDENT_PACKAGES } from '../../scripts/release/lockstep-packages.ts';
+
 const repoRoot = resolve(fileURLToPath(import.meta.url), '..', '..', '..');
 
 interface Manifest {
@@ -27,6 +29,9 @@ const peerRange = `${releaseVersion.split('.').slice(0, 2).join('.')}.x`;
 
 // A lockstep extension is any package under packages/ that peers on the core.
 // Discovered from disk so new extension packages are covered automatically.
+// Independent packages (build tooling, content) also declare the engine peer
+// but move on their own version line, so the release matrix excludes them.
+const independentNames = new Set<string>(INDEPENDENT_PACKAGES.map(pkg => pkg.name));
 const packagesDir = resolve(repoRoot, 'packages');
 const lockstepExtensions = readdirSync(packagesDir)
   .map(dir => {
@@ -36,7 +41,10 @@ const lockstepExtensions = readdirSync(packagesDir)
       return null;
     }
   })
-  .filter((manifest): manifest is Manifest => manifest?.peerDependencies?.['@codexo/exojs'] !== undefined);
+  .filter(
+    (manifest): manifest is Manifest =>
+      manifest?.peerDependencies?.['@codexo/exojs'] !== undefined && manifest.name !== undefined && !independentNames.has(manifest.name),
+  );
 
 describe('release coherence', () => {
   it('CHANGELOG opens with a concrete, dated release section', () => {
@@ -58,16 +66,17 @@ describe('release coherence', () => {
     });
   }
 
-  // exojs-tiled and exojs-ldtk both render tiles via exojs-tilemap's runtime
-  // classes, but consumers only get one copy of those classes if the host app
-  // supplies exojs-tilemap itself - hence a peerDependency (not a runtime
-  // `dependencies` entry) backed by a workspace:* devDependency for local dev/test.
+  // exojs-tiled and exojs-ldtk render tiles through the tilemap runtime, which
+  // ships inside Core as `@codexo/exojs/tilemap`. Their Core peer is therefore
+  // the only engine dependency they may declare: a dependency on the retired
+  // tilemap package would install a second, separate tilemap implementation.
   for (const consumer of ['exojs-tiled', 'exojs-ldtk']) {
-    it(`@codexo/${consumer} declares @codexo/exojs-tilemap as a peerDependency`, () => {
+    it(`@codexo/${consumer} reaches the tilemap runtime through its Core peer only`, () => {
       const manifest = readManifest(resolve(packagesDir, consumer, 'package.json'));
-      expect(manifest.peerDependencies?.['@codexo/exojs-tilemap']).toBeDefined();
-      expect(manifest.devDependencies?.['@codexo/exojs-tilemap']).toBe('workspace:*');
-      expect(manifest.dependencies?.['@codexo/exojs-tilemap']).toBeUndefined();
+      const declared = Object.keys({ ...manifest.dependencies, ...manifest.devDependencies, ...manifest.peerDependencies });
+
+      expect(manifest.peerDependencies?.['@codexo/exojs']).toBeDefined();
+      expect(declared.filter(name => name.startsWith('@codexo/exojs-') && name !== '@codexo/exojs-config')).toEqual([]);
     });
   }
 });
diff --git a/test/release/verify-publish.test.ts b/test/release/verify-publish.test.ts
index 1815bdedc..491c2f02c 100644
--- a/test/release/verify-publish.test.ts
+++ b/test/release/verify-publish.test.ts
@@ -1,5 +1,11 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { INDEPENDENT_PACKAGES, LEGACY_SHIMS, LOCKSTEP_PACKAGES } from '../../scripts/release/lockstep-packages';
+
+const published = LOCKSTEP_PACKAGES.length + INDEPENDENT_PACKAGES.length + LEGACY_SHIMS.length;
+// Two checks per published package: `pnpm pack --dry-run` and publint.
+const checks = published * 2;
+
 const state = vi.hoisted(() => ({
   run: vi.fn(),
   create: vi.fn(),
@@ -36,7 +42,7 @@ describe('publish verification output', () => {
   it.each(['normal', 'compact'])('summarizes successful packages in %s mode and still runs every check', async mode => {
     const { log, stdout, stderr } = setup();
     await load(mode);
-    expect(state.run).toHaveBeenCalledTimes(32);
+    expect(state.run).toHaveBeenCalledTimes(checks);
     expect(state.run.mock.calls[0]?.[0]).toMatchObject({ command: 'pnpm', args: ['pack', '--dry-run'] });
     expect(state.run.mock.calls[1]?.[0]).toMatchObject({ command: 'pnpm', args: ['dlx', 'publint@0.3.21', '--strict', '.'] });
     expect(log.mock.calls.flat().join('\n')).toContain('@codexo/exojs: pack OK, publint OK');
@@ -47,7 +53,7 @@ describe('publish verification output', () => {
   it('keeps silent successes silent', async () => {
     const { log, stdout, stderr } = setup();
     await load('silent');
-    expect(state.run).toHaveBeenCalledTimes(32);
+    expect(state.run).toHaveBeenCalledTimes(checks);
     expect(log).not.toHaveBeenCalled();
     expect(stdout).not.toHaveBeenCalled();
     expect(stderr).not.toHaveBeenCalled();
@@ -75,9 +81,9 @@ describe('publish verification output', () => {
       throw new Error('exit 1');
     });
     await expect(load('silent')).rejects.toThrow('exit 1');
-    expect(state.run).toHaveBeenCalledTimes(failingCheck === 0 ? 31 : 32);
+    expect(state.run).toHaveBeenCalledTimes(failingCheck === 0 ? checks - 1 : checks);
     expect(stdout).toHaveBeenCalledWith(failingCheck === 0 ? 'full pack diagnostic\n' : 'full publint diagnostic\n');
     expect(stderr).toHaveBeenCalledWith(failingCheck === 0 ? 'pack error\n' : 'publint error\n');
-    expect(error.mock.calls.flat().join('\n')).toContain('1 of 16 published package(s) failed.');
+    expect(error.mock.calls.flat().join('\n')).toContain(`1 of ${published} published package(s) failed.`);
   });
 });
diff --git a/test/rendering/browser/_bounceScene.ts b/test/rendering/browser/_bounceScene.ts
index 0ac5f72b7..4bb08eb8a 100644
--- a/test/rendering/browser/_bounceScene.ts
+++ b/test/rendering/browser/_bounceScene.ts
@@ -16,7 +16,7 @@
  * which is what the product path does too.
  */
 
-import { AlphaOccluder, type Lighting, PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs-lighting';
+import { AlphaOccluder, type Lighting, PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs/lighting';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/_colorTilemapProbes.ts b/test/rendering/browser/_colorTilemapProbes.ts
index 46266dbda..a76fe21cd 100644
--- a/test/rendering/browser/_colorTilemapProbes.ts
+++ b/test/rendering/browser/_colorTilemapProbes.ts
@@ -4,7 +4,7 @@
  * A tileset texture is ordinary color content: it decodes on sample, layer
  * opacity is applied once as coverage, and the write encodes once.
  */
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 import { describe, onTestFinished, test } from 'vitest';
 
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/_particleParity.ts b/test/rendering/browser/_particleParity.ts
index 39826eb3f..84599b28d 100644
--- a/test/rendering/browser/_particleParity.ts
+++ b/test/rendering/browser/_particleParity.ts
@@ -16,7 +16,7 @@ import {
   Turbulence,
   type UpdateModule,
   VelocityOverLifetime,
-} from '@codexo/exojs-particles';
+} from '@codexo/exojs/particles';
 
 const curve = (): Curve =>
   new Curve([
diff --git a/test/rendering/browser/_tilemapScene.ts b/test/rendering/browser/_tilemapScene.ts
index 836b0af1c..4c62fe4db 100644
--- a/test/rendering/browser/_tilemapScene.ts
+++ b/test/rendering/browser/_tilemapScene.ts
@@ -1,6 +1,6 @@
+import type { TileTransform } from '@codexo/exojs/tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileProjection, TileSet } from '@codexo/exojs/tilemap';
 import { tiledExtension } from '@codexo/exojs-tiled';
-import type { TileTransform } from '@codexo/exojs-tilemap';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, tilemapExtension, TileProjection, TileSet } from '@codexo/exojs-tilemap';
 
 import { materializeRendererBindings } from '#extensions/materialize';
 import { buildSnapshot } from '#extensions/snapshot';
diff --git a/test/rendering/browser/_transportMaskScene.ts b/test/rendering/browser/_transportMaskScene.ts
index 4379a7dd6..d66778e4a 100644
--- a/test/rendering/browser/_transportMaskScene.ts
+++ b/test/rendering/browser/_transportMaskScene.ts
@@ -11,7 +11,7 @@
  * the mask at all, and that an outline reaches the tables instead of the mask.
  */
 
-import { AlphaOccluder, type Lighting, PolygonOccluder, RadianceLighting } from '@codexo/exojs-lighting';
+import { AlphaOccluder, type Lighting, PolygonOccluder, RadianceLighting } from '@codexo/exojs/lighting';
 import { expect } from 'vitest';
 
 import type { Application } from '#core/Application';
diff --git a/test/rendering/browser/webgl2-authored-tilemap.test.ts b/test/rendering/browser/webgl2-authored-tilemap.test.ts
index 37c02d09a..2752e9282 100644
--- a/test/rendering/browser/webgl2-authored-tilemap.test.ts
+++ b/test/rendering/browser/webgl2-authored-tilemap.test.ts
@@ -7,8 +7,8 @@
  * Run via:  pnpm test:browser:webgl
  */
 
+import { type TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 import { tiledExtension } from '@codexo/exojs-tiled';
-import { type TileMap, TileMapNode } from '@codexo/exojs-tilemap';
 
 import { Asset } from '#assets/Asset';
 import { Loader } from '#assets/Loader';
diff --git a/test/rendering/browser/webgl2-group-content-caching.test.ts b/test/rendering/browser/webgl2-group-content-caching.test.ts
index ff0ea5a55..b4fc30474 100644
--- a/test/rendering/browser/webgl2-group-content-caching.test.ts
+++ b/test/rendering/browser/webgl2-group-content-caching.test.ts
@@ -9,7 +9,7 @@
  * Run via:  pnpm test:browser:webgl
  */
 
-import { TileMapNode } from '@codexo/exojs-tilemap';
+import { TileMapNode } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-lighting-audit.test.ts b/test/rendering/browser/webgl2-lighting-audit.test.ts
index 06fd2d53f..a8455c887 100644
--- a/test/rendering/browser/webgl2-lighting-audit.test.ts
+++ b/test/rendering/browser/webgl2-lighting-audit.test.ts
@@ -21,7 +21,7 @@ import {
   PolygonOccluder,
   RadianceLighting,
   SpotLight,
-} from '@codexo/exojs-lighting';
+} from '@codexo/exojs/lighting';
 
 import { type Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-lighting-hdr-composite.test.ts b/test/rendering/browser/webgl2-lighting-hdr-composite.test.ts
index b2fb3f81c..ae23981b6 100644
--- a/test/rendering/browser/webgl2-lighting-hdr-composite.test.ts
+++ b/test/rendering/browser/webgl2-lighting-hdr-composite.test.ts
@@ -6,7 +6,7 @@
  *
  * Run via:  pnpm test:browser:webgl
  */
-import { type Lighting, LightmapLighting, PointLight } from '@codexo/exojs-lighting';
+import { type Lighting, LightmapLighting, PointLight } from '@codexo/exojs/lighting';
 import { expect, test } from 'vitest';
 
 import type { Application } from '#core/Application';
diff --git a/test/rendering/browser/webgl2-lighting-scene-lifecycle.test.ts b/test/rendering/browser/webgl2-lighting-scene-lifecycle.test.ts
index 2ed3aaa2d..fccafb346 100644
--- a/test/rendering/browser/webgl2-lighting-scene-lifecycle.test.ts
+++ b/test/rendering/browser/webgl2-lighting-scene-lifecycle.test.ts
@@ -10,7 +10,7 @@
  * Run via:  pnpm test:browser:webgl
  */
 
-import { LightmapLighting } from '@codexo/exojs-lighting';
+import { LightmapLighting } from '@codexo/exojs/lighting';
 
 import { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-lighting.test.ts b/test/rendering/browser/webgl2-lighting.test.ts
index 3b91eecf2..d06083c9e 100644
--- a/test/rendering/browser/webgl2-lighting.test.ts
+++ b/test/rendering/browser/webgl2-lighting.test.ts
@@ -7,7 +7,7 @@
  * Run via:  pnpm test:browser:webgl2
  */
 
-import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs-lighting';
+import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs/lighting';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-lightmap.test.ts b/test/rendering/browser/webgl2-lightmap.test.ts
index 731c684da..9f7b5fdb4 100644
--- a/test/rendering/browser/webgl2-lightmap.test.ts
+++ b/test/rendering/browser/webgl2-lightmap.test.ts
@@ -19,7 +19,7 @@ import {
   RadianceLighting,
   SpotLight,
   SunLight,
-} from '@codexo/exojs-lighting';
+} from '@codexo/exojs/lighting';
 
 import { type Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-renderer-perf.test.ts b/test/rendering/browser/webgl2-renderer-perf.test.ts
index 1c90b4a39..a06be01c2 100644
--- a/test/rendering/browser/webgl2-renderer-perf.test.ts
+++ b/test/rendering/browser/webgl2-renderer-perf.test.ts
@@ -28,7 +28,7 @@
 // Imports (after vi.mock hoisting)
 // ---------------------------------------------------------------------------
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-tilemap-interleave.test.ts b/test/rendering/browser/webgl2-tilemap-interleave.test.ts
index 2590a12cc..0acebe503 100644
--- a/test/rendering/browser/webgl2-tilemap-interleave.test.ts
+++ b/test/rendering/browser/webgl2-tilemap-interleave.test.ts
@@ -13,7 +13,7 @@
  */
 
 import { Container } from '@codexo/exojs';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-tilemap-retained-instruction-replay.test.ts b/test/rendering/browser/webgl2-tilemap-retained-instruction-replay.test.ts
index 137c8eefe..370f1bc3a 100644
--- a/test/rendering/browser/webgl2-tilemap-retained-instruction-replay.test.ts
+++ b/test/rendering/browser/webgl2-tilemap-retained-instruction-replay.test.ts
@@ -18,7 +18,7 @@
  * Run via:  pnpm test:browser:webgl
  */
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-tilemap-snap.test.ts b/test/rendering/browser/webgl2-tilemap-snap.test.ts
index 275cd49fb..13d5b1098 100644
--- a/test/rendering/browser/webgl2-tilemap-snap.test.ts
+++ b/test/rendering/browser/webgl2-tilemap-snap.test.ts
@@ -14,7 +14,7 @@
  * Run via:  pnpm test:browser:webgl2
  */
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-tilemap-state-leak.test.ts b/test/rendering/browser/webgl2-tilemap-state-leak.test.ts
index f6c8f57fc..2844326f0 100644
--- a/test/rendering/browser/webgl2-tilemap-state-leak.test.ts
+++ b/test/rendering/browser/webgl2-tilemap-state-leak.test.ts
@@ -10,7 +10,7 @@
  * Run via:  pnpm test:browser:webgl2
  */
 
-import { TileMapNode } from '@codexo/exojs-tilemap';
+import { TileMapNode } from '@codexo/exojs/tilemap';
 
 import { Color } from '#core/Color';
 import { Container } from '#rendering/Container';
diff --git a/test/rendering/browser/webgl2-tilemap.test.ts b/test/rendering/browser/webgl2-tilemap.test.ts
index 2276aaec4..5fc3f1b3d 100644
--- a/test/rendering/browser/webgl2-tilemap.test.ts
+++ b/test/rendering/browser/webgl2-tilemap.test.ts
@@ -12,7 +12,7 @@
  * Run via:  pnpm test:browser:webgl2
  */
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileLayerNode, TileMap, TileMapNode, TileSet } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileLayerNode, TileMap, TileMapNode, TileSet } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgl2-transport-cascade.test.ts b/test/rendering/browser/webgl2-transport-cascade.test.ts
index 935c5a419..88d1ea221 100644
--- a/test/rendering/browser/webgl2-transport-cascade.test.ts
+++ b/test/rendering/browser/webgl2-transport-cascade.test.ts
@@ -9,7 +9,7 @@
  * Run via:  pnpm test:browser:webgl
  */
 
-import { PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs-lighting';
+import { PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs/lighting';
 import { describe, expect, test } from 'vitest';
 
 import type { Application } from '#core/Application';
diff --git a/test/rendering/browser/webgpu-lighting.test.ts b/test/rendering/browser/webgpu-lighting.test.ts
index c263e02ea..717a476ee 100644
--- a/test/rendering/browser/webgpu-lighting.test.ts
+++ b/test/rendering/browser/webgpu-lighting.test.ts
@@ -7,7 +7,7 @@
  * Run via:  pnpm test:browser:webgpu
  */
 
-import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs-lighting';
+import { ForwardLighting, LitMaterial, NormalMap, PointLight } from '@codexo/exojs/lighting';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-lightmap.test.ts b/test/rendering/browser/webgpu-lightmap.test.ts
index f5214c9ea..f08fd076e 100644
--- a/test/rendering/browser/webgpu-lightmap.test.ts
+++ b/test/rendering/browser/webgpu-lightmap.test.ts
@@ -17,7 +17,7 @@ import {
   RadianceLighting,
   SpotLight,
   SunLight,
-} from '@codexo/exojs-lighting';
+} from '@codexo/exojs/lighting';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-native-retained-replay.test.ts b/test/rendering/browser/webgpu-native-retained-replay.test.ts
index 999a959e9..faa2eba0d 100644
--- a/test/rendering/browser/webgpu-native-retained-replay.test.ts
+++ b/test/rendering/browser/webgpu-native-retained-replay.test.ts
@@ -1,4 +1,4 @@
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs/tilemap';
 import { describe, expect, test, vi } from 'vitest';
 
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-particle-parity.test.ts b/test/rendering/browser/webgpu-particle-parity.test.ts
index b5f647d5f..15bf7b4f1 100644
--- a/test/rendering/browser/webgpu-particle-parity.test.ts
+++ b/test/rendering/browser/webgpu-particle-parity.test.ts
@@ -1,5 +1,5 @@
 import { Rectangle, Texture, Time } from '@codexo/exojs';
-import { DeathModule, type ParticleDeathContext, particlesExtension, ParticleSystem } from '@codexo/exojs-particles';
+import { DeathModule, type ParticleDeathContext, particlesExtension, ParticleSystem } from '@codexo/exojs/particles';
 
 import { materializeRendererBindings } from '#extensions/materialize';
 import type { WebGl2Backend } from '#rendering/webgl2/WebGl2Backend';
diff --git a/test/rendering/browser/webgpu-tilechunk-single-pass.test.ts b/test/rendering/browser/webgpu-tilechunk-single-pass.test.ts
index 21c05803c..bb7e1d6e1 100644
--- a/test/rendering/browser/webgpu-tilechunk-single-pass.test.ts
+++ b/test/rendering/browser/webgpu-tilechunk-single-pass.test.ts
@@ -26,7 +26,7 @@
  * Run via:  pnpm test:browser:webgpu
  */
 
-import { TileMapNode } from '@codexo/exojs-tilemap';
+import { TileMapNode } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-tilemap-interleave.test.ts b/test/rendering/browser/webgpu-tilemap-interleave.test.ts
index 6698a8544..8a3277f01 100644
--- a/test/rendering/browser/webgpu-tilemap-interleave.test.ts
+++ b/test/rendering/browser/webgpu-tilemap-interleave.test.ts
@@ -12,7 +12,7 @@
  */
 
 import { Container } from '@codexo/exojs';
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-tilemap-retained-instruction-replay.test.ts b/test/rendering/browser/webgpu-tilemap-retained-instruction-replay.test.ts
index 16d8991a4..09610c17e 100644
--- a/test/rendering/browser/webgpu-tilemap-retained-instruction-replay.test.ts
+++ b/test/rendering/browser/webgpu-tilemap-retained-instruction-replay.test.ts
@@ -18,7 +18,7 @@
  * Run via:  pnpm test:browser:webgpu
  */
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode, TileSet } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-tilemap-snap.test.ts b/test/rendering/browser/webgpu-tilemap-snap.test.ts
index 7255e04ee..09dcd13b8 100644
--- a/test/rendering/browser/webgpu-tilemap-snap.test.ts
+++ b/test/rendering/browser/webgpu-tilemap-snap.test.ts
@@ -14,7 +14,7 @@
  * Run via:  pnpm test:browser:webgpu
  */
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-tilemap.test.ts b/test/rendering/browser/webgpu-tilemap.test.ts
index dfd1e556d..30ca6a17f 100644
--- a/test/rendering/browser/webgpu-tilemap.test.ts
+++ b/test/rendering/browser/webgpu-tilemap.test.ts
@@ -11,7 +11,7 @@
  * Run via:  pnpm test:browser:webgpu
  */
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileLayerNode, TileMap, TileMapNode } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileLayerNode, TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 
 import type { Application } from '#core/Application';
 import { Color } from '#core/Color';
diff --git a/test/rendering/browser/webgpu-transport-cascade.test.ts b/test/rendering/browser/webgpu-transport-cascade.test.ts
index 7e3a2c131..812c33fe2 100644
--- a/test/rendering/browser/webgpu-transport-cascade.test.ts
+++ b/test/rendering/browser/webgpu-transport-cascade.test.ts
@@ -10,7 +10,7 @@
  * Run via:  pnpm test:browser:webgpu
  */
 
-import { PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs-lighting';
+import { PointLight, PolygonOccluder, RadianceLighting } from '@codexo/exojs/lighting';
 import { describe, expect, test } from 'vitest';
 
 import type { Application } from '#core/Application';
diff --git a/test/rendering/package-color-contract.test.ts b/test/rendering/package-color-contract.test.ts
index 1d9fb13dd..7aa18d7fc 100644
--- a/test/rendering/package-color-contract.test.ts
+++ b/test/rendering/package-color-contract.test.ts
@@ -50,6 +50,10 @@ const PACKAGE_OUTCOMES: Readonly<Record<string, PackageOutcome>> = {
     evidence: [{ file: 'packages/exojs-cli/test/assets-pack.test.ts', includes: 'keeps its bytes and its DFD transfer and alpha meaning' }],
   },
   'exojs-config': { outcome: 'NONE', evidence: [] },
+  'exojs-demo-assets': {
+    outcome: 'CHANGE',
+    evidence: [{ file: 'packages/exojs-demo-assets/catalog.json', includes: 'technical/color/srgb-ramp.png' }],
+  },
   'exojs-ldtk': { outcome: 'TEST', evidence: [{ file: 'packages/exojs-ldtk/src/loadLdtkMap.ts', includes: "Asset.type('texture'" }] },
   'exojs-lighting': {
     outcome: 'CHANGE',
diff --git a/test/rendering/parity/scenes/tilemap.ts b/test/rendering/parity/scenes/tilemap.ts
index 765b22184..e0217a53d 100644
--- a/test/rendering/parity/scenes/tilemap.ts
+++ b/test/rendering/parity/scenes/tilemap.ts
@@ -10,7 +10,7 @@
  * a half-texel offset shows up as visible seams between tiles.
  */
 
-import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs-tilemap';
+import { TILE_TRANSFORM_IDENTITY, TileLayer, TileMap, TileMapNode } from '@codexo/exojs/tilemap';
 
 import { Container } from '#rendering/Container';
 
diff --git a/test/site/assets-global-dts.test.ts b/test/site/assets-global-dts.test.ts
deleted file mode 100644
index 5a0982f08..000000000
--- a/test/site/assets-global-dts.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { describe, expect, it } from 'vitest';
-
-import { assets } from '../../examples/assets/assets';
-import { ASSETS_GLOBAL_DTS_RELATIVE, renderAssetsGlobalDts } from '../../scripts/generate-examples-global-dts';
-
-// Vitest runs with the repository root as the working directory.
-const committedPath = join(process.cwd(), ASSETS_GLOBAL_DTS_RELATIVE);
-const committed = readFileSync(committedPath, 'utf8').replace(/\r\n/g, '\n');
-const generated = renderAssetsGlobalDts(assets as unknown as Record<string, unknown>);
-
-describe('assets-global.d.ts drift guard', () => {
-  it('matches the deterministically generated declaration (run `pnpm -C site examples:sync`)', () => {
-    expect(committed).toBe(generated);
-  });
-
-  it('is self-contained — no imports into the canonical catalog module', () => {
-    // The whole point of the generated decl is that Monaco can load it as a
-    // single extra-lib without following a relative `import type` into a module
-    // that does not exist in its virtual filesystem.
-    expect(committed).not.toMatch(/^\s*import\b/m);
-    expect(committed).toContain('declare global');
-    expect(committed.trimEnd().endsWith('export {};')).toBe(true);
-  });
-
-  it('exposes the typed global both as a const and on Window', () => {
-    expect(committed).toContain('const assets: ExampleAssetCatalog');
-    expect(committed).toContain('readonly assets: ExampleAssetCatalog');
-  });
-
-  it('emits exact string literals for nested leaves (hierarchical + literal types)', () => {
-    expect(committed).toContain("readonly musicLoop: 'demo/audio/demo-loop-main.ogg';");
-    expect(committed).toContain("readonly alphaEdgeStraight: 'technical/alpha/alpha-edge-straight.png';");
-    // numeric leaves stay numeric literals, not widened to `number`.
-    expect(committed).toContain('readonly tileWidth: 64;');
-  });
-});
diff --git a/test/site/demo-panel.test.ts b/test/site/demo-panel.test.ts
new file mode 100644
index 000000000..95694e182
--- /dev/null
+++ b/test/site/demo-panel.test.ts
@@ -0,0 +1,76 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { choice, demoPanel, slider, toggle } from '../../examples/shared/runtime.ts';
+
+const controls = () => ({
+  mode: choice('Mode', ['Normal', 'Additive', 'Screen']),
+  amount: slider('Amount', { min: 0, max: 1, value: 0.5, step: 0.25 }),
+  paused: toggle('Paused'),
+});
+
+afterEach(() => document.body.replaceChildren());
+
+describe('demoPanel', () => {
+  it('applies every initial value once through onChange', () => {
+    const onChange = vi.fn();
+
+    demoPanel({ controls: controls(), onChange });
+
+    expect(onChange.mock.calls.map(([key, value]) => [key, value])).toEqual([
+      ['mode', 'Normal'],
+      ['amount', 0.5],
+      ['paused', false],
+    ]);
+  });
+
+  it('keeps one state for shortcuts and controls', () => {
+    const onChange = vi.fn();
+    const panel = demoPanel({ controls: controls(), onChange });
+    const readout = () => panel.element.querySelector('[aria-live="polite"]')?.textContent;
+
+    panel.step('mode');
+    expect(panel.values.mode).toBe('Additive');
+    expect(readout()).toBe('Additive (2/3)');
+
+    panel.step('mode', -2);
+    expect(panel.values.mode).toBe('Screen');
+
+    panel.element.querySelector<HTMLButtonElement>('[aria-label="Next Mode"]')!.click();
+    expect(panel.values.mode).toBe('Normal');
+    expect(onChange).toHaveBeenLastCalledWith('mode', 'Normal', panel.values);
+
+    panel.step('paused');
+    expect(panel.values.paused).toBe(true);
+    expect(panel.element.querySelector('[aria-label="Paused"]')?.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('clamps slider steps and mirrors set() into the input', () => {
+    const panel = demoPanel({ controls: controls() });
+    const input = panel.element.querySelector<HTMLInputElement>('input[type="range"]')!;
+
+    panel.step('amount', 10);
+    expect(panel.values.amount).toBe(1);
+
+    panel.set('amount', 0.25);
+    expect(input.value).toBe('0.25');
+  });
+
+  it('shows the status line only while it has text', () => {
+    const panel = demoPanel({ controls: {} });
+    const status = panel.element.lastElementChild as HTMLElement;
+
+    expect(status.hidden).toBe(true);
+    panel.status('3 lights');
+    expect(status.hidden).toBe(false);
+    expect(status.textContent).toBe('3 lights');
+    panel.status('');
+    expect(status.hidden).toBe(true);
+  });
+
+  it('removes its element on dispose', () => {
+    const panel = demoPanel({ controls: controls() });
+
+    panel.dispose();
+    expect(panel.element.isConnected).toBe(false);
+  });
+});
diff --git a/test/site/example-aliases.test.ts b/test/site/example-aliases.test.ts
index 2d916446d..71cc4c442 100644
--- a/test/site/example-aliases.test.ts
+++ b/test/site/example-aliases.test.ts
@@ -1,30 +1,24 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import {
-  EXAMPLE_ALIASES,
-  EXAMPLE_TOOL_RELOCATIONS,
-  resolveExampleAlias,
-  resolveExampleToolRelocation,
-} from '../../site/src/lib/example-aliases';
+import { EXAMPLE_ALIASES, resolveExampleAlias } from '../../site/src/lib/example-aliases';
 import { EXAMPLES_CATALOG } from '../../site/src/lib/examples-catalog';
 import { readUrlState } from '../../site/src/lib/url-state';
 import { CURRENT_VERSION_ID } from '../../site/src/lib/versions';
 
 const catalogPaths = new Set(Object.values(EXAMPLES_CATALOG).flatMap(list => list.map(entry => entry.path)));
 
-/** What a playground URL opens: a tool page (relative to the locale root) or a catalog example path. */
-const resolveRequest = (url: string): { tool: string | null; example: string | null } => {
+/** The catalog example path a playground URL opens. */
+const resolveRequest = (url: string): string | null => {
   window.history.replaceState(null, '', url);
 
   const { version, example } = readUrlState();
   const versionId = version ?? CURRENT_VERSION_ID;
-  const tool = resolveExampleToolRelocation(versionId, example);
 
-  if (tool !== null || example === null) {
-    return { tool, example: null };
+  if (example === null) {
+    return null;
   }
 
-  return { tool: null, example: versionId === CURRENT_VERSION_ID ? resolveExampleAlias(example) : example };
+  return versionId === CURRENT_VERSION_ID ? resolveExampleAlias(example) : example;
 };
 
 describe('playground legacy routes', () => {
@@ -32,53 +26,32 @@ describe('playground legacy routes', () => {
     window.history.replaceState(null, '', '/en/playground/');
   });
 
-  it('sends a current-version query link to a relocated example to its tool page', () => {
-    expect(resolveRequest('/en/playground/?version=current&example=debug-layer/asset-browser')).toEqual({
-      tool: 'tools/asset-browser/',
-      example: null,
-    });
+  it('opens the asset browser as a current example from query and hash links', () => {
+    expect(resolveRequest('/en/playground/?version=current&example=debug-layer/asset-browser')).toBe('debug-layer/asset-browser.js');
+    expect(resolveRequest('/en/playground/#/current/debug-layer/asset-browser')).toBe('debug-layer/asset-browser.js');
+    expect(catalogPaths.has('debug-layer/asset-browser.js')).toBe(true);
   });
 
-  it('sends a current-version hash link to a relocated example to its tool page', () => {
-    expect(resolveRequest('/en/playground/#/current/debug-layer/asset-browser')).toEqual({ tool: 'tools/asset-browser/', example: null });
-  });
-
-  it('keeps a historical version on its own copy of a relocated example', () => {
-    expect(resolveRequest('/en/playground/#/0.17.0/debug-layer/asset-browser')).toEqual({
-      tool: null,
-      example: 'debug-layer/asset-browser.js',
-    });
-    expect(resolveRequest('/en/playground/?version=0.17.0&example=debug-layer/asset-browser')).toEqual({
-      tool: null,
-      example: 'debug-layer/asset-browser.js',
-    });
+  it('keeps a historical version on its own copy of an example', () => {
+    expect(resolveRequest('/en/playground/#/0.17.0/debug-layer/asset-browser')).toBe('debug-layer/asset-browser.js');
   });
 
   it('keeps a historical version on its own copy of a merged example', () => {
-    expect(resolveRequest('/en/playground/#/0.17.0/text-fonts/basic-text')).toEqual({ tool: null, example: 'text-fonts/basic-text.js' });
+    expect(resolveRequest('/en/playground/#/0.17.0/text-fonts/basic-text')).toBe('text-fonts/basic-text.js');
   });
 
   it('maps a merged example to its current replacement', () => {
-    expect(resolveRequest('/en/playground/#/current/text-fonts/basic-text')).toEqual({
-      tool: null,
-      example: 'text-fonts/typographic-styling.js',
-    });
-    expect(resolveRequest('/en/playground/?example=text-fonts/basic-text')).toEqual({
-      tool: null,
-      example: 'text-fonts/typographic-styling.js',
-    });
+    expect(resolveRequest('/en/playground/#/current/text-fonts/basic-text')).toBe('text-fonts/typographic-styling.js');
+    expect(resolveRequest('/en/playground/?example=text-fonts/basic-text')).toBe('text-fonts/typographic-styling.js');
   });
 
   it('opens a current example unchanged', () => {
-    expect(resolveRequest('/en/playground/#/current/text-fonts/typographic-styling')).toEqual({
-      tool: null,
-      example: 'text-fonts/typographic-styling.js',
-    });
+    expect(resolveRequest('/en/playground/#/current/text-fonts/typographic-styling')).toBe('text-fonts/typographic-styling.js');
   });
 
   it('resolves nothing for a link without an example', () => {
-    expect(resolveRequest('/en/playground/#/current')).toEqual({ tool: null, example: null });
-    expect(resolveRequest('/en/playground/?version=current')).toEqual({ tool: null, example: null });
+    expect(resolveRequest('/en/playground/#/current')).toBeNull();
+    expect(resolveRequest('/en/playground/?version=current')).toBeNull();
   });
 });
 
@@ -92,11 +65,4 @@ describe('playground legacy route tables', () => {
   it('never aliases a path that is still in the catalog', () => {
     expect(Object.keys(EXAMPLE_ALIASES).filter(path => catalogPaths.has(path))).toEqual([]);
   });
-
-  it('keeps tool relocations apart from example aliases and the catalog', () => {
-    for (const path of Object.keys(EXAMPLE_TOOL_RELOCATIONS)) {
-      expect(EXAMPLE_ALIASES[path]).toBeUndefined();
-      expect(catalogPaths.has(path)).toBe(false);
-    }
-  });
 });
diff --git a/test/site/pages-archive-safety.test.ts b/test/site/pages-archive-safety.test.ts
new file mode 100644
index 000000000..fb9816daf
--- /dev/null
+++ b/test/site/pages-archive-safety.test.ts
@@ -0,0 +1,171 @@
+import { existsSync, linkSync, mkdirSync, mkdtempSync, readFileSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  checkArchiveEntries,
+  checkTreeSafety,
+  extractTar,
+  extractZip,
+  readTarEntries,
+  readZipEntries,
+  readZipFile,
+} from '../../scripts/pages/archive-safety';
+import { evaluateSiteSize, SITE_SIZE_REFUSE_BYTES, SITE_SIZE_WARN_BYTES } from '../../scripts/pages/site-budget';
+import { createTar, createZip } from '../support/archive-fixtures';
+
+/**
+ * Candidate artifacts are downloaded by a workflow that can deploy, so every
+ * archive is inspected before a single byte is written, and the composed tree
+ * is inspected again before it is uploaded.
+ */
+
+let work: string;
+
+beforeEach(() => {
+  work = mkdtempSync(join(tmpdir(), 'exo-archive-'));
+});
+
+afterEach(() => rmSync(work, { recursive: true, force: true }));
+
+const limits = { maxUnpackedBytes: 1_000_000 };
+
+describe('zip archives', () => {
+  it('reads and extracts a well-formed archive', () => {
+    const zip = createZip([
+      { name: 'en/' },
+      { name: 'en/index.html', data: '<p>hi</p>' },
+      { name: 'index.html', data: 'root', store: true },
+    ]);
+    expect(readZipEntries(zip).map(entry => [entry.name, entry.type])).toEqual([
+      ['en', 'directory'],
+      ['en/index.html', 'file'],
+      ['index.html', 'file'],
+    ]);
+    extractZip(zip, work, limits);
+    expect(readFileSync(join(work, 'en/index.html'), 'utf8')).toBe('<p>hi</p>');
+    expect(readFileSync(join(work, 'index.html'), 'utf8')).toBe('root');
+  });
+
+  it('reads one named file without extracting anything', () => {
+    const zip = createZip([{ name: 'artifact.tar', data: 'tar bytes' }]);
+    expect(readZipFile(zip, 'artifact.tar', limits).toString('utf8')).toBe('tar bytes');
+    expect(() => readZipFile(zip, 'other.tar', limits)).toThrow(/other\.tar/);
+  });
+
+  it.each([
+    ['an absolute path', '/etc/cron.d/x'],
+    ['a parent traversal', '../outside.html'],
+    ['a nested traversal', 'en/../../outside.html'],
+    ['a Windows drive', 'C:/Windows/x.dll'],
+    ['a backslash', 'en\\..\\x.html'],
+  ])('refuses %s before writing anything', (_label, name) => {
+    const zip = createZip([
+      { name: 'ok.html', data: 'ok' },
+      { name, data: 'evil' },
+    ]);
+    expect(() => extractZip(zip, work, limits)).toThrow(/path/i);
+    expect(existsSync(join(work, 'ok.html'))).toBe(false);
+  });
+
+  it('refuses symbolic links and special files', () => {
+    expect(() => extractZip(createZip([{ name: 'link', data: '/etc/passwd', mode: 0o120777 }]), work, limits)).toThrow(/symlink/);
+    expect(() => extractZip(createZip([{ name: 'fifo', mode: 0o010644 }]), work, limits)).toThrow(/special/);
+  });
+
+  it('refuses duplicate entries and encrypted entries', () => {
+    expect(() =>
+      extractZip(
+        createZip([
+          { name: 'a.html', data: '1' },
+          { name: 'a.html', data: '2' },
+        ]),
+        work,
+        limits,
+      ),
+    ).toThrow(/duplicate/);
+    expect(() => extractZip(createZip([{ name: 'a.html', data: '1', encrypted: true }]), work, limits)).toThrow(/encrypt/);
+  });
+
+  it('refuses an archive whose declared unpacked size exceeds the budget', () => {
+    const zip = createZip([{ name: 'big.bin', data: Buffer.alloc(2048) }]);
+    expect(() => extractZip(zip, work, { maxUnpackedBytes: 1024 })).toThrow(/budget/);
+  });
+
+  it('refuses an entry that inflates past its declared size', () => {
+    const bomb = createZip([{ name: 'bomb.bin', data: Buffer.alloc(500_000), declaredSize: 10 }]);
+    expect(checkArchiveEntries(readZipEntries(bomb), limits)).toEqual([]);
+    expect(() => extractZip(bomb, work, limits)).toThrow(/size/);
+  });
+
+  it('refuses a truncated or foreign file', () => {
+    expect(() => readZipEntries(Buffer.from('not a zip at all'))).toThrow(/zip/i);
+    const zip = createZip([{ name: 'a.html', data: 'x' }]);
+    expect(() => readZipEntries(zip.subarray(0, zip.length - 4))).toThrow();
+  });
+});
+
+describe('tar archives', () => {
+  it('reads and extracts the shape the Pages upload action writes', () => {
+    const tar = createTar([{ name: './' }, { name: './en/' }, { name: './en/index.html', data: 'hello' }, { name: './.nojekyll' }]);
+    expect(readTarEntries(tar).map(entry => [entry.name, entry.type])).toEqual([
+      ['en', 'directory'],
+      ['en/index.html', 'file'],
+      ['.nojekyll', 'file'],
+    ]);
+    extractTar(tar, work, limits);
+    expect(readFileSync(join(work, 'en/index.html'), 'utf8')).toBe('hello');
+  });
+
+  it('honours a pax path and still validates it', () => {
+    const long = `${'deep/'.repeat(30)}file.html`;
+    expect(readTarEntries(createTar([{ name: long, data: 'x', pax: true }]))[0]?.name).toBe(long);
+    expect(() => extractTar(createTar([{ name: '../escape.html', data: 'x', pax: true }]), work, limits)).toThrow(/path/i);
+  });
+
+  it('refuses symlinks, hardlinks and special files', () => {
+    expect(() => extractTar(createTar([{ name: 'a', type: '2', linkName: '/etc/passwd' }]), work, limits)).toThrow(/symlink/);
+    expect(() => extractTar(createTar([{ name: 'b', type: '1', linkName: 'a' }]), work, limits)).toThrow(/hardlink/);
+    expect(() => extractTar(createTar([{ name: 'c', type: '3' }]), work, limits)).toThrow(/special/);
+  });
+
+  it('refuses an archive past the unpacked budget', () => {
+    expect(() => extractTar(createTar([{ name: 'big.bin', data: Buffer.alloc(4096) }]), work, { maxUnpackedBytes: 1000 })).toThrow(
+      /budget/,
+    );
+  });
+});
+
+describe('checkTreeSafety', () => {
+  it('passes a tree of plain files and directories', () => {
+    mkdirSync(join(work, 'en'));
+    writeFileSync(join(work, 'en/index.html'), 'x');
+    expect(checkTreeSafety(work)).toEqual([]);
+  });
+
+  it('reports a hardlinked file', () => {
+    writeFileSync(join(work, 'a.html'), 'x');
+    linkSync(join(work, 'a.html'), join(work, 'b.html'));
+    expect(checkTreeSafety(work).join('\n')).toMatch(/hardlink/);
+  });
+
+  it('reports a linked directory', () => {
+    mkdirSync(join(work, 'target'));
+    // A junction needs no privilege on Windows and is a plain symlink elsewhere.
+    symlinkSync(join(work, 'target'), join(work, 'link'), 'junction');
+    expect(checkTreeSafety(work).join('\n')).toMatch(/symlink/);
+  });
+});
+
+describe('evaluateSiteSize', () => {
+  it('measures against the project budget in unpacked bytes', () => {
+    expect(SITE_SIZE_WARN_BYTES).toBe(750_000_000);
+    expect(SITE_SIZE_REFUSE_BYTES).toBe(900_000_000);
+    expect(evaluateSiteSize(749_999_999).level).toBe('ok');
+    expect(evaluateSiteSize(750_000_000).level).toBe('warn');
+    expect(evaluateSiteSize(899_999_999).level).toBe('warn');
+    expect(evaluateSiteSize(900_000_000).level).toBe('refuse');
+  });
+});
diff --git a/test/site/pages-channel-artifact.test.ts b/test/site/pages-channel-artifact.test.ts
new file mode 100644
index 000000000..69352e0a9
--- /dev/null
+++ b/test/site/pages-channel-artifact.test.ts
@@ -0,0 +1,121 @@
+import { createHash } from 'node:crypto';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  candidateArtifactName,
+  openChannelArchive,
+  parseCandidateArtifactName,
+  verifyChannelTree,
+  verifyDigest,
+} from '../../scripts/pages/channel-artifact';
+import { createSiteBuildManifest, SITE_BUILD_FILE, type SiteBuildIdentity } from '../../scripts/pages/site-manifest';
+import { createZip } from '../support/archive-fixtures';
+
+/**
+ * A channel candidate is the zip of one built tree plus its `site-build.json`.
+ * Its name, its bytes and its manifest have to agree with the run metadata
+ * GitHub reports before the publisher uses it.
+ */
+
+const SHA = 'c'.repeat(40);
+
+let work: string;
+
+const identity: SiteBuildIdentity = {
+  channel: 'next',
+  basePath: '/ExoJS/next/',
+  sourceSha: SHA,
+  packageVersion: '0.19.1',
+  assetProfile: 'standard',
+  createdAt: '2026-10-21T12:00:00.000Z',
+  localTest: false,
+};
+
+const buildTree = (overrides: Partial<SiteBuildIdentity> = {}): string => {
+  const dir = join(work, 'tree');
+  mkdirSync(join(dir, 'en'), { recursive: true });
+  writeFileSync(join(dir, 'index.html'), 'x');
+  writeFileSync(join(dir, 'en/index.html'), 'y');
+  writeFileSync(join(dir, SITE_BUILD_FILE), JSON.stringify(createSiteBuildManifest(dir, { ...identity, ...overrides })));
+
+  return dir;
+};
+
+beforeEach(() => {
+  work = mkdtempSync(join(tmpdir(), 'exo-channel-artifact-'));
+});
+
+afterEach(() => rmSync(work, { recursive: true, force: true }));
+
+describe('candidate artifact names', () => {
+  it('round-trips site-<channel>-<sha>-<attempt>', () => {
+    expect(candidateArtifactName('next', SHA, 2)).toBe(`site-next-${SHA}-2`);
+    expect(parseCandidateArtifactName(`site-stable-${SHA}-1`)).toEqual({ channel: 'stable', sha: SHA, attempt: 1 });
+  });
+
+  it('rejects anything else', () => {
+    for (const name of [
+      `site-dist-${SHA}`,
+      `site-beta-${SHA}-1`,
+      `site-next-${SHA.slice(1)}-1`,
+      `site-next-${SHA}-0`,
+      `site-next-${SHA}-1x`,
+      'github-pages',
+    ]) {
+      expect(parseCandidateArtifactName(name), `${name}`).toBeNull();
+    }
+  });
+});
+
+describe('verifyDigest', () => {
+  it('compares the archive bytes against the digest GitHub reported', () => {
+    const bytes = Buffer.from('zip bytes');
+    const digest = `sha256:${createHash('sha256').update(bytes).digest('hex')}`;
+    expect(verifyDigest(bytes, digest)).toBeNull();
+    expect(verifyDigest(Buffer.from('other'), digest)).toMatch(/digest/);
+    expect(verifyDigest(bytes, 'sha1:abc')).toMatch(/digest/);
+  });
+});
+
+describe('verifyChannelTree', () => {
+  it('accepts a tree that matches the expected channel and commit', () => {
+    expect(verifyChannelTree(buildTree(), { channel: 'next', sourceSha: SHA }).problems).toEqual([]);
+  });
+
+  it.each<[string, Partial<SiteBuildIdentity>, RegExp]>([
+    ['another commit', { sourceSha: 'd'.repeat(40) }, /sourceSha/],
+    ['another channel', { channel: 'stable', basePath: '/ExoJS/' }, /channel/],
+    ['a local test base', { basePath: '/sandbox/', localTest: true }, /local test/],
+  ])('refuses %s', (_label, overrides, pattern) => {
+    expect(verifyChannelTree(buildTree(overrides), { channel: 'next', sourceSha: SHA }).problems.join('\n')).toMatch(pattern);
+  });
+
+  it('refuses a tree without a manifest or with a tampered file', () => {
+    const dir = buildTree();
+    writeFileSync(join(dir, 'en/index.html'), 'tampered');
+    expect(verifyChannelTree(dir, { channel: 'next', sourceSha: SHA }).problems.join('\n')).toMatch(/en\/index\.html/);
+    rmSync(join(dir, SITE_BUILD_FILE));
+    expect(verifyChannelTree(dir, { channel: 'next', sourceSha: SHA }).problems.join('\n')).toMatch(SITE_BUILD_FILE);
+  });
+});
+
+describe('openChannelArchive', () => {
+  it('extracts a verified candidate zip and checks its manifest', () => {
+    const tree = buildTree();
+    const zip = createZip([
+      { name: 'index.html', data: 'x' },
+      { name: 'en/index.html', data: 'y' },
+      { name: SITE_BUILD_FILE, data: JSON.stringify(createSiteBuildManifest(tree, identity)) },
+    ]);
+    const digest = `sha256:${createHash('sha256').update(zip).digest('hex')}`;
+    const out = join(work, 'out');
+    expect(openChannelArchive(zip, { digest, channel: 'next', sourceSha: SHA, outDir: out }).manifest.contentHash).toHaveLength(64);
+    expect(() =>
+      openChannelArchive(zip, { digest: `sha256:${'0'.repeat(64)}`, channel: 'next', sourceSha: SHA, outDir: join(work, 'o2') }),
+    ).toThrow(/digest/);
+  });
+});
diff --git a/test/site/pages-compose-site.test.ts b/test/site/pages-compose-site.test.ts
new file mode 100644
index 000000000..04d916fdd
--- /dev/null
+++ b/test/site/pages-compose-site.test.ts
@@ -0,0 +1,271 @@
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  buildChannelsDocument,
+  type ChannelSource,
+  composeSite,
+  extractComposedChannel,
+  findCrossChannelReferences,
+  parseChannelsDocument,
+} from '../../scripts/pages/compose-site';
+import {
+  createSiteBuildManifest,
+  hashTreeFiles,
+  SITE_BUILD_FILE,
+  type SiteBuildIdentity,
+  verifySiteTree,
+} from '../../scripts/pages/site-manifest';
+
+/**
+ * The composer joins two independently qualified channel trees into the one
+ * tree Pages serves: Stable at the root, Next under `next/`. It adds only
+ * `channels.json` and `.nojekyll`, and it proves that neither channel's bytes
+ * changed on the way.
+ */
+
+let work: string;
+
+const sha = (seed: string): string => seed.repeat(40);
+
+const identity = (channel: 'stable' | 'next', seed: string): SiteBuildIdentity => ({
+  channel,
+  basePath: channel === 'stable' ? '/ExoJS/' : '/ExoJS/next/',
+  sourceSha: sha(seed),
+  packageVersion: channel === 'stable' ? '0.19.1' : '0.19.1',
+  assetProfile: 'standard',
+  createdAt: '2026-10-21T12:00:00.000Z',
+  localTest: false,
+});
+
+const source = (channel: string, seed: string): ChannelSource => ({
+  kind: 'ci',
+  workflowId: 11,
+  runId: 100,
+  runAttempt: 1,
+  artifactId: 200,
+  artifactName: `site-${channel}-${sha(seed)}-1`,
+  digest: `sha256:${'d'.repeat(64)}`,
+});
+
+const buildChannel = (channel: 'stable' | 'next', seed: string, files: Record<string, string>): string => {
+  const dir = join(work, `${channel}-${seed}`);
+
+  for (const [rel, content] of Object.entries(files)) {
+    mkdirSync(join(dir, rel, '..'), { recursive: true });
+    writeFileSync(join(dir, rel), content);
+  }
+
+  const manifest = createSiteBuildManifest(dir, identity(channel, seed));
+  writeFileSync(join(dir, SITE_BUILD_FILE), JSON.stringify(manifest));
+
+  return dir;
+};
+
+const stableFiles = {
+  'index.html': '<script>const baseUrl = "/ExoJS/";</script>',
+  'en/index.html': '<a href="/ExoJS/en/guide/">Guide</a>',
+  'preview.html': 'preview',
+  'pagefind/pagefind.js': 'pf',
+};
+
+const nextFiles = {
+  'index.html': '<script>const baseUrl = "/ExoJS/next/";</script>',
+  'en/index.html': '<a href="/ExoJS/next/en/guide/">Guide</a><a href="/ExoJS/">Stable</a>',
+  'preview.html': 'preview next',
+  'pagefind/pagefind.js': 'pf next',
+};
+
+beforeEach(() => {
+  work = mkdtempSync(join(tmpdir(), 'exo-compose-'));
+});
+
+afterEach(() => rmSync(work, { recursive: true, force: true }));
+
+const compose = (out: string, stableDir: string, nextDir: string | null) =>
+  composeSite({
+    outDir: out,
+    stable: { dir: stableDir, source: source('stable', 'a') },
+    next: nextDir === null ? null : { dir: nextDir, source: source('next', '1') },
+  });
+
+describe('composeSite (W02)', () => {
+  it('puts Stable at the root and Next under next/, adding only channels.json and .nojekyll', () => {
+    const out = join(work, 'out');
+    const report = compose(out, buildChannel('stable', 'a', stableFiles), buildChannel('next', '1', nextFiles));
+
+    expect(report.problems).toEqual([]);
+    expect(readdirSync(out).sort()).toEqual([
+      '.nojekyll',
+      'channels.json',
+      'en',
+      'index.html',
+      'next',
+      'pagefind',
+      'preview.html',
+      SITE_BUILD_FILE,
+    ]);
+    expect(readFileSync(join(out, 'next/preview.html'), 'utf8')).toBe('preview next');
+    expect(readFileSync(join(out, '.nojekyll'), 'utf8')).toBe('');
+  });
+
+  it('leaves both channels byte-identical to their manifests', () => {
+    const stableDir = buildChannel('stable', 'a', stableFiles);
+    const nextDir = buildChannel('next', '1', nextFiles);
+    const out = join(work, 'out');
+    compose(out, stableDir, nextDir);
+
+    const stableManifest = createSiteBuildManifest(stableDir, identity('stable', 'a'));
+    const nextManifest = createSiteBuildManifest(nextDir, identity('next', '1'));
+    const composerFiles = new Set(['channels.json', '.nojekyll']);
+    expect(verifySiteTree(out, stableManifest, { allowExtra: path => path.startsWith('next/') || composerFiles.has(path) })).toEqual([]);
+    expect(verifySiteTree(join(out, 'next'), nextManifest)).toEqual([]);
+  });
+
+  it('records both channels in channels.json', () => {
+    const out = join(work, 'out');
+    compose(out, buildChannel('stable', 'a', stableFiles), buildChannel('next', '1', nextFiles));
+    const channels = parseChannelsDocument(JSON.parse(readFileSync(join(out, 'channels.json'), 'utf8')));
+
+    expect(channels.channels.stable).toMatchObject({ basePath: '/ExoJS/', path: '', sourceSha: sha('a'), packageVersion: '0.19.1' });
+    expect(channels.channels.next).toMatchObject({ basePath: '/ExoJS/next/', path: 'next/', sourceSha: sha('1'), source: { runId: 100 } });
+  });
+
+  it('composes Stable alone while Next is absent, without a next/ directory', () => {
+    const out = join(work, 'out');
+    const report = compose(out, buildChannel('stable', 'a', stableFiles), null);
+    expect(report.problems).toEqual([]);
+    expect(existsSync(join(out, 'next'))).toBe(false);
+    expect(parseChannelsDocument(JSON.parse(readFileSync(join(out, 'channels.json'), 'utf8'))).channels.next).toBeNull();
+  });
+
+  it('is idempotent for the same pairing', () => {
+    const stableDir = buildChannel('stable', 'a', stableFiles);
+    const nextDir = buildChannel('next', '1', nextFiles);
+    compose(join(work, 'one'), stableDir, nextDir);
+    compose(join(work, 'two'), stableDir, nextDir);
+    expect(hashTreeFiles(join(work, 'one'))).toEqual(hashTreeFiles(join(work, 'two')));
+  });
+
+  it('copies only the files a manifest lists', () => {
+    const stableDir = buildChannel('stable', 'a', stableFiles);
+    writeFileSync(join(stableDir, 'smuggled.js'), 'x');
+    const report = compose(join(work, 'out'), stableDir, null);
+    expect(report.problems.join('\n')).toMatch(/smuggled\.js/);
+  });
+});
+
+describe('composeSite refuses inconsistent channels (W07)', () => {
+  it('refuses swapped channels', () => {
+    const report = compose(join(work, 'out'), buildChannel('next', '1', nextFiles), buildChannel('stable', 'a', stableFiles));
+    expect(report.problems.join('\n')).toMatch(/channel/);
+  });
+
+  it('refuses a Stable tree that carries its own next/, channels.json or .nojekyll', () => {
+    for (const [index, extra] of ['next/index.html', 'channels.json', '.nojekyll'].entries()) {
+      const seed = ['b', 'c', 'e'][index]!;
+      const report = compose(join(work, `out-${seed}`), buildChannel('stable', seed, { ...stableFiles, [extra]: 'x' }), null);
+      expect(report.problems.join('\n'), `${extra}`).toMatch(/reserved/);
+    }
+  });
+
+  it('refuses a local test build', () => {
+    const dir = join(work, 'local');
+    mkdirSync(dir);
+    writeFileSync(join(dir, 'index.html'), 'x');
+    writeFileSync(
+      join(dir, SITE_BUILD_FILE),
+      JSON.stringify(createSiteBuildManifest(dir, { ...identity('stable', 'a'), localTest: true })),
+    );
+    expect(compose(join(work, 'out'), dir, null).problems.join('\n')).toMatch(/local test/);
+  });
+
+  it('refuses an output directory that is not empty', () => {
+    const out = join(work, 'out');
+    mkdirSync(out);
+    writeFileSync(join(out, 'old.html'), 'x');
+    expect(() => compose(out, buildChannel('stable', 'a', stableFiles), null)).toThrow(/empty/);
+  });
+});
+
+describe('composeSite size budget (W12)', () => {
+  it('warns from 750,000,000 and refuses from 900,000,000 unpacked bytes', () => {
+    const stableDir = buildChannel('stable', 'a', stableFiles);
+    const warn = composeSite({
+      outDir: join(work, 'warn'),
+      stable: { dir: stableDir, source: source('stable', 'a') },
+      next: null,
+      budget: { warn: 10, refuse: 10_000 },
+    });
+    expect(warn.budget.level).toBe('warn');
+    expect(warn.problems).toEqual([]);
+    const refuse = composeSite({
+      outDir: join(work, 'refuse'),
+      stable: { dir: stableDir, source: source('stable', 'a') },
+      next: null,
+      budget: { warn: 10, refuse: 20 },
+    });
+    expect(refuse.budget.level).toBe('refuse');
+    expect(refuse.problems.join('\n')).toMatch(/budget/);
+  });
+});
+
+describe('extractComposedChannel', () => {
+  it('recovers each channel from a composed snapshot with its hash intact', () => {
+    const stableDir = buildChannel('stable', 'a', stableFiles);
+    const nextDir = buildChannel('next', '1', nextFiles);
+    const out = join(work, 'out');
+    compose(out, stableDir, nextDir);
+
+    const stableBack = join(work, 'stable-back');
+    const nextBack = join(work, 'next-back');
+    const stableManifest = extractComposedChannel(out, '', stableBack);
+    const nextManifest = extractComposedChannel(out, 'next/', nextBack);
+
+    expect(stableManifest.contentHash).toBe(createSiteBuildManifest(stableDir, identity('stable', 'a')).contentHash);
+    expect(nextManifest.channel).toBe('next');
+    expect(existsSync(join(stableBack, 'next'))).toBe(false);
+    expect(existsSync(join(stableBack, 'channels.json'))).toBe(false);
+    expect(hashTreeFiles(nextBack)).toEqual(hashTreeFiles(nextDir));
+  });
+});
+
+describe('buildChannelsDocument and parseChannelsDocument', () => {
+  it('derives the pairing from both channel identities only', () => {
+    const stableDir = buildChannel('stable', 'a', stableFiles);
+    const nextDir = buildChannel('next', '1', nextFiles);
+    const stable = createSiteBuildManifest(stableDir, identity('stable', 'a'));
+    const next = createSiteBuildManifest(nextDir, identity('next', '1'));
+    const first = buildChannelsDocument({
+      stable: { manifest: stable, source: source('stable', 'a') },
+      next: { manifest: next, source: source('next', '1') },
+    });
+    const again = buildChannelsDocument({
+      stable: { manifest: stable, source: source('stable', 'a') },
+      next: { manifest: next, source: source('next', '1') },
+    });
+    const stableOnly = buildChannelsDocument({ stable: { manifest: stable, source: source('stable', 'a') }, next: null });
+    expect(first.pairing).toBe(again.pairing);
+    expect(stableOnly.pairing).not.toBe(first.pairing);
+    expect(parseChannelsDocument(JSON.parse(JSON.stringify(first)))).toEqual(first);
+  });
+
+  it('rejects a document without Stable or with a wrong path', () => {
+    expect(() => parseChannelsDocument({ schemaVersion: 1, pairing: 'x', channels: { stable: null, next: null } })).toThrow(/stable/);
+    expect(() => parseChannelsDocument(null)).toThrow();
+  });
+});
+
+describe('findCrossChannelReferences (W01)', () => {
+  it('flags a Next page that links deep into Stable, but not the explicit switch to the Stable root', () => {
+    const dir = buildChannel('next', '2', {
+      'ok.html': '<a href="/ExoJS/next/en/">x</a><a href="/ExoJS/">Stable</a>',
+      'bad.html': '<script src="/ExoJS/_astro/app.js"></script><img src="/ExoJS/brand/x.svg">',
+    });
+    const hits = findCrossChannelReferences(dir, '/ExoJS/next/', '/ExoJS/');
+    expect(hits.map(hit => hit.file)).toEqual(['bad.html', 'bad.html']);
+  });
+});
diff --git a/test/site/pages-select-channels.test.ts b/test/site/pages-select-channels.test.ts
new file mode 100644
index 000000000..4e1d462c2
--- /dev/null
+++ b/test/site/pages-select-channels.test.ts
@@ -0,0 +1,439 @@
+import { describe, expect, it } from 'vitest';
+
+import type { ChannelEntry, ChannelsDocument } from '../../scripts/pages/compose-site';
+import {
+  type ArtifactMeta,
+  type CandidateRun,
+  selectChannels,
+  type SelectionInput,
+  type WorkflowRunMeta,
+} from '../../scripts/pages/select-channels';
+
+/**
+ * The publisher re-decides both channels every time it starts. The trigger
+ * only wakes it up: what is deployed is the newest qualified snapshot of each
+ * channel on its branch's current history, or the snapshot that is already
+ * live, never something older and never something untrusted.
+ */
+
+const REPO = 'Exoridus/ExoJS';
+const CI_ID = 11;
+const RELEASE_ID = 22;
+const sha = (seed: string): string => seed.repeat(40).slice(0, 40);
+
+let nextId = 1000;
+
+const run = (overrides: Partial<WorkflowRunMeta> = {}): WorkflowRunMeta => ({
+  id: nextId++,
+  attempt: 1,
+  workflowId: CI_ID,
+  workflowPath: '.github/workflows/ci.yml',
+  event: 'push',
+  status: 'completed',
+  conclusion: 'success',
+  headBranch: 'next',
+  headSha: sha('1'),
+  repository: REPO,
+  headRepository: REPO,
+  ...overrides,
+});
+
+const artifact = (owner: WorkflowRunMeta, overrides: Partial<ArtifactMeta> = {}): ArtifactMeta => ({
+  id: owner.id * 10,
+  name: `site-${owner.headBranch === 'main' || owner.workflowId === RELEASE_ID ? 'stable' : 'next'}-${owner.headSha}-${owner.attempt}`,
+  expired: false,
+  digest: `sha256:${'d'.repeat(64)}`,
+  sizeInBytes: 1000,
+  runId: owner.id,
+  runHeadSha: owner.headSha,
+  ...overrides,
+});
+
+const candidate = (overrides: Partial<WorkflowRunMeta> = {}, artifactOverrides?: Partial<ArtifactMeta> | null): CandidateRun => {
+  const owner = run(overrides);
+
+  return { run: owner, artifacts: artifactOverrides === null ? [] : [artifact(owner, artifactOverrides)] };
+};
+
+const entryFor = (source: CandidateRun, channel: 'stable' | 'next'): ChannelEntry => {
+  const art = source.artifacts[0]!;
+
+  return {
+    channel,
+    path: channel === 'stable' ? '' : 'next/',
+    basePath: channel === 'stable' ? '/ExoJS/' : '/ExoJS/next/',
+    sourceSha: source.run.headSha,
+    packageVersion: '0.19.1',
+    assetProfile: 'standard',
+    createdAt: '2026-10-20T10:00:00.000Z',
+    contentHash: `${channel === 'stable' ? 'a' : 'b'}${source.run.headSha.slice(0, 1)}`.repeat(32),
+    fileCount: 10,
+    totalBytes: 1000,
+    source: {
+      kind: source.run.workflowId === RELEASE_ID ? 'release' : 'ci',
+      workflowId: source.run.workflowId,
+      runId: source.run.id,
+      runAttempt: source.run.attempt,
+      artifactId: art.id,
+      artifactName: art.name,
+      digest: art.digest!,
+    },
+  };
+};
+
+const doc = (stable: ChannelEntry, next: ChannelEntry | null): ChannelsDocument => ({
+  schemaVersion: 1,
+  pairing: 'p'.repeat(64),
+  channels: { stable, next },
+});
+
+const PAGES_ARTIFACT: ArtifactMeta = {
+  id: 9_999,
+  name: 'github-pages',
+  expired: false,
+  digest: `sha256:${'e'.repeat(64)}`,
+  sizeInBytes: 1000,
+  runId: 900,
+  runHeadSha: null,
+};
+
+/** A history in which `shas` sit on the branch, newest first. */
+const history = (...shas: string[]): Record<string, number | null> => Object.fromEntries(shas.map((value, index) => [value, index]));
+
+const base = (overrides: Partial<SelectionInput> = {}): SelectionInput => ({
+  policy: { repository: REPO, ciWorkflowId: CI_ID, releaseWorkflowId: RELEASE_ID },
+  trigger: run(),
+  branchHeads: { stable: sha('a'), next: sha('1') },
+  history: { stable: history(sha('a')), next: history(sha('1')) },
+  ciRuns: [],
+  releaseRuns: [],
+  previous: null,
+  ...overrides,
+});
+
+describe('bootstrap (W10)', () => {
+  it('publishes Stable alone while Next has never qualified', () => {
+    const stable = candidate({ headBranch: 'main', headSha: sha('a') });
+    const result = selectChannels(base({ trigger: stable.run, ciRuns: [stable] }));
+    expect(result.deploy).toBe(true);
+    expect(result.channels.stable).toMatchObject({ action: 'update', sourceSha: sha('a') });
+    expect(result.channels.next).toMatchObject({ action: 'absent' });
+  });
+
+  it('refuses to deploy without any qualified Stable snapshot', () => {
+    const next = candidate({ headBranch: 'next', headSha: sha('1') });
+    const result = selectChannels(base({ trigger: next.run, ciRuns: [next] }));
+    expect(result.deploy).toBe(false);
+    expect(result.problems.join('\n')).toMatch(/stable/i);
+  });
+});
+
+describe('one channel moves (W03/W04)', () => {
+  const stableRun = candidate({ headBranch: 'main', headSha: sha('a') });
+  const oldNext = candidate({ headBranch: 'next', headSha: sha('1') });
+  const previous = { runId: 900, channels: doc(entryFor(stableRun, 'stable'), entryFor(oldNext, 'next')), pagesArtifact: PAGES_ARTIFACT };
+
+  it('updates only Next when only Next produced a newer candidate', () => {
+    const newNext = candidate({ headBranch: 'next', headSha: sha('2') });
+    const result = selectChannels(
+      base({
+        trigger: newNext.run,
+        ciRuns: [newNext, oldNext, stableRun],
+        branchHeads: { stable: sha('a'), next: sha('2') },
+        history: { stable: history(sha('a')), next: history(sha('2'), sha('1')) },
+        previous,
+      }),
+    );
+    expect(result.deploy).toBe(true);
+    expect(result.channels.next).toMatchObject({ action: 'update', sourceSha: sha('2') });
+    expect(result.channels.stable).toMatchObject({ action: 'keep' });
+  });
+
+  it('updates only Stable when only main produced a newer candidate', () => {
+    const newStable = candidate({ headBranch: 'main', headSha: sha('b') });
+    const result = selectChannels(
+      base({
+        trigger: newStable.run,
+        ciRuns: [newStable, stableRun, oldNext],
+        branchHeads: { stable: sha('b'), next: sha('1') },
+        history: { stable: history(sha('b'), sha('a')), next: history(sha('1')) },
+        previous,
+      }),
+    );
+    expect(result.channels.stable).toMatchObject({ action: 'update', sourceSha: sha('b') });
+    expect(result.channels.next).toMatchObject({ action: 'keep' });
+  });
+
+  it('keeps a channel from its original artifact first, then from the last published snapshot', () => {
+    const newNext = candidate({ headBranch: 'next', headSha: sha('2') });
+    const input = base({
+      trigger: newNext.run,
+      ciRuns: [newNext, stableRun],
+      branchHeads: { stable: sha('a'), next: sha('2') },
+      history: { stable: history(sha('a')), next: history(sha('2'), sha('1')) },
+      previous,
+    });
+    const keep = selectChannels(input).channels.stable;
+    expect(keep.action).toBe('keep');
+    expect(keep.action === 'keep' && keep.transports.map(transport => transport.kind)).toEqual(['artifact', 'snapshot']);
+  });
+});
+
+describe('a green run without a site candidate (W05)', () => {
+  it('changes nothing and claims no new SHA', () => {
+    const stableRun = candidate({ headBranch: 'main', headSha: sha('a') });
+    const nextRun = candidate({ headBranch: 'next', headSha: sha('1') });
+    const bare = candidate({ headBranch: 'next', headSha: sha('2') }, null);
+    const result = selectChannels(
+      base({
+        trigger: bare.run,
+        ciRuns: [bare, nextRun, stableRun],
+        branchHeads: { stable: sha('a'), next: sha('2') },
+        history: { stable: history(sha('a')), next: history(sha('2'), sha('1')) },
+        previous: { runId: 900, channels: doc(entryFor(stableRun, 'stable'), entryFor(nextRun, 'next')), pagesArtifact: PAGES_ARTIFACT },
+      }),
+    );
+    expect(result.deploy).toBe(false);
+    expect(result.reason).toMatch(/unchanged/);
+    expect(result.channels.next).toMatchObject({ action: 'keep', published: { sourceSha: sha('1') } });
+  });
+});
+
+describe('untrusted runs (W06)', () => {
+  const stable = candidate({ headBranch: 'main', headSha: sha('a') });
+
+  it.each<[string, Partial<WorkflowRunMeta>]>([
+    ['a pull request', { event: 'pull_request' }],
+    ['a manual dispatch', { event: 'workflow_dispatch' }],
+    ['a fork', { headRepository: 'mallory/ExoJS' }],
+    ['another repository', { repository: 'mallory/ExoJS' }],
+    ['a failed run', { conclusion: 'failure' }],
+    ['a cancelled run', { conclusion: 'cancelled' }],
+    ['an unlisted workflow', { workflowId: 33, workflowPath: '.github/workflows/other.yml' }],
+    ['a feature branch', { headBranch: 'feature/x' }],
+  ])('deploys nothing when triggered by %s', (_label, overrides) => {
+    const result = selectChannels(base({ trigger: run({ headBranch: 'main', headSha: sha('a'), ...overrides }), ciRuns: [stable] }));
+    expect(result.deploy).toBe(false);
+    expect(result.reason).toMatch(/trigger/);
+  });
+
+  it.each<[string, Partial<WorkflowRunMeta>]>([
+    ['a pull request', { event: 'pull_request' }],
+    ['a dispatch', { event: 'workflow_dispatch' }],
+    ['a fork', { headRepository: 'mallory/ExoJS' }],
+    ['a failed run', { conclusion: 'failure' }],
+    ['a still running run', { status: 'in_progress', conclusion: null }],
+  ])('never selects a candidate from %s', (_label, overrides) => {
+    const trusted = candidate({ headBranch: 'main', headSha: sha('a') });
+    const hostile = candidate({ headBranch: 'main', headSha: sha('b'), ...overrides });
+    const result = selectChannels(
+      base({
+        trigger: trusted.run,
+        ciRuns: [hostile, trusted],
+        branchHeads: { stable: sha('b'), next: sha('1') },
+        history: { stable: history(sha('b'), sha('a')), next: history(sha('1')) },
+      }),
+    );
+    expect(result.channels.stable).toMatchObject({ action: 'update', sourceSha: sha('a') });
+  });
+
+  it('accepts a Release run only for a version tag push on main history', () => {
+    const release = candidate({
+      workflowId: RELEASE_ID,
+      workflowPath: '.github/workflows/release.yml',
+      headBranch: 'v0.19.2',
+      headSha: sha('b'),
+    });
+    const dispatched = candidate({
+      workflowId: RELEASE_ID,
+      workflowPath: '.github/workflows/release.yml',
+      event: 'workflow_dispatch',
+      headBranch: 'main',
+      headSha: sha('c'),
+    });
+    const input = base({
+      trigger: release.run,
+      releaseRuns: [dispatched, release],
+      branchHeads: { stable: sha('c'), next: sha('1') },
+      history: { stable: history(sha('c'), sha('b')), next: history(sha('1')) },
+    });
+    expect(selectChannels(input).channels.stable).toMatchObject({ action: 'update', sourceSha: sha('b'), source: { kind: 'release' } });
+    expect(selectChannels({ ...input, trigger: dispatched.run }).deploy).toBe(false);
+  });
+});
+
+describe('contradictory metadata (W07)', () => {
+  it.each<[string, Partial<ArtifactMeta>]>([
+    ['another commit in the name', { name: `site-stable-${sha('f')}-1` }],
+    ['the other channel in the name', { name: `site-next-${sha('a')}-1` }],
+    ['a later attempt than the run has', { name: `site-stable-${sha('a')}-2` }],
+    ['another run', { runId: 1 }],
+    ['another head SHA', { runHeadSha: sha('f') }],
+    ['no digest', { digest: null }],
+    ['a malformed digest', { digest: 'md5:abc' }],
+    ['an expired artifact', { expired: true }],
+  ])('refuses an artifact with %s', (_label, overrides) => {
+    const stable = candidate({ headBranch: 'main', headSha: sha('a') }, overrides);
+    const result = selectChannels(base({ trigger: stable.run, ciRuns: [stable] }));
+    expect(result.channels.stable.action).not.toBe('update');
+    expect(result.deploy).toBe(false);
+  });
+
+  it('refuses a candidate whose commit is not on the branch history', () => {
+    const stable = candidate({ headBranch: 'main', headSha: sha('a') });
+    const result = selectChannels(base({ trigger: stable.run, ciRuns: [stable], history: { stable: { [sha('a')]: null }, next: {} } }));
+    expect(result.deploy).toBe(false);
+  });
+
+  it('accepts an earlier attempt of a re-run whose site job was not repeated', () => {
+    const stable = candidate({ headBranch: 'main', headSha: sha('a'), attempt: 2 }, { name: `site-stable-${sha('a')}-1` });
+    expect(selectChannels(base({ trigger: stable.run, ciRuns: [stable] })).channels.stable).toMatchObject({ action: 'update' });
+  });
+});
+
+describe('expired artifacts (W08)', () => {
+  const stableRun = candidate({ headBranch: 'main', headSha: sha('a') });
+  const nextRun = candidate({ headBranch: 'next', headSha: sha('1') });
+  const published = doc(entryFor(stableRun, 'stable'), entryFor(nextRun, 'next'));
+
+  it('keeps an unchanged channel from the last published snapshot when its candidate expired', () => {
+    const newNext = candidate({ headBranch: 'next', headSha: sha('2') });
+    const expiredStable = { run: stableRun.run, artifacts: [{ ...stableRun.artifacts[0]!, expired: true }] };
+    const result = selectChannels(
+      base({
+        trigger: newNext.run,
+        ciRuns: [newNext, nextRun, expiredStable],
+        branchHeads: { stable: sha('a'), next: sha('2') },
+        history: { stable: history(sha('a')), next: history(sha('2'), sha('1')) },
+        previous: { runId: 900, channels: published, pagesArtifact: PAGES_ARTIFACT },
+      }),
+    );
+    expect(result.deploy).toBe(true);
+    expect(result.channels.stable.action === 'keep' && result.channels.stable.transports).toEqual([
+      { kind: 'snapshot', runId: 900, artifactId: PAGES_ARTIFACT.id, digest: PAGES_ARTIFACT.digest, path: '' },
+    ]);
+  });
+
+  it('falls back to the Release artifact of the same commit for Stable', () => {
+    const release = candidate({
+      workflowId: RELEASE_ID,
+      workflowPath: '.github/workflows/release.yml',
+      headBranch: 'v0.19.1',
+      headSha: sha('a'),
+    });
+    const newNext = candidate({ headBranch: 'next', headSha: sha('2') });
+    const result = selectChannels(
+      base({
+        trigger: newNext.run,
+        ciRuns: [newNext, nextRun],
+        releaseRuns: [release],
+        branchHeads: { stable: sha('a'), next: sha('2') },
+        history: { stable: history(sha('a')), next: history(sha('2'), sha('1')) },
+        previous: { runId: 900, channels: published, pagesArtifact: { ...PAGES_ARTIFACT, expired: true } },
+      }),
+    );
+    expect(result.channels.stable.action === 'keep' && result.channels.stable.transports.map(transport => transport.kind)).toEqual([
+      'release',
+    ]);
+  });
+
+  it('deploys nothing when no trusted source of a kept channel is left', () => {
+    const newNext = candidate({ headBranch: 'next', headSha: sha('2') });
+    const result = selectChannels(
+      base({
+        trigger: newNext.run,
+        ciRuns: [newNext],
+        branchHeads: { stable: sha('a'), next: sha('2') },
+        history: { stable: history(sha('a')), next: history(sha('2'), sha('1')) },
+        previous: { runId: 900, channels: published, pagesArtifact: null },
+      }),
+    );
+    expect(result.deploy).toBe(false);
+    expect(result.problems.join('\n')).toMatch(/stable/i);
+  });
+});
+
+describe('ordering (W09)', () => {
+  const stableRun = candidate({ headBranch: 'main', headSha: sha('a') });
+
+  it('picks the commit nearest the branch head, not the run that finished last', () => {
+    const newer = candidate({ headBranch: 'next', headSha: sha('3') });
+    const olderRerun = candidate({ headBranch: 'next', headSha: sha('2'), attempt: 2 }, { name: `site-next-${sha('2')}-2` });
+    const result = selectChannels(
+      base({
+        trigger: olderRerun.run,
+        ciRuns: [olderRerun, newer, stableRun],
+        branchHeads: { stable: sha('a'), next: sha('3') },
+        history: { stable: history(sha('a')), next: history(sha('3'), sha('2')) },
+      }),
+    );
+    expect(result.channels.next).toMatchObject({ action: 'update', sourceSha: sha('3') });
+  });
+
+  it('never rolls a published channel back to an older candidate', () => {
+    const published = candidate({ headBranch: 'next', headSha: sha('3') });
+    const oldRerun = candidate({ headBranch: 'next', headSha: sha('2'), attempt: 3 }, { name: `site-next-${sha('2')}-3` });
+    const result = selectChannels(
+      base({
+        trigger: oldRerun.run,
+        ciRuns: [oldRerun, stableRun],
+        branchHeads: { stable: sha('a'), next: sha('4') },
+        history: { stable: history(sha('a')), next: history(sha('4'), sha('3'), sha('2')) },
+        previous: { runId: 900, channels: doc(entryFor(stableRun, 'stable'), entryFor(published, 'next')), pagesArtifact: PAGES_ARTIFACT },
+      }),
+    );
+    expect(result.channels.next).toMatchObject({ action: 'keep', published: { sourceSha: sha('3') } });
+    expect(result.deploy).toBe(false);
+  });
+
+  it('picks up both channels when main and next finished in either order', () => {
+    const newStable = candidate({ headBranch: 'main', headSha: sha('b') });
+    const newNext = candidate({ headBranch: 'next', headSha: sha('2') });
+    const oldNext = candidate({ headBranch: 'next', headSha: sha('1') });
+    const input = base({
+      ciRuns: [newNext, newStable, oldNext, stableRun],
+      branchHeads: { stable: sha('b'), next: sha('2') },
+      history: { stable: history(sha('b'), sha('a')), next: history(sha('2'), sha('1')) },
+      previous: { runId: 900, channels: doc(entryFor(stableRun, 'stable'), entryFor(oldNext, 'next')), pagesArtifact: PAGES_ARTIFACT },
+    });
+
+    for (const trigger of [newStable.run, newNext.run]) {
+      const result = selectChannels({ ...input, trigger });
+      expect(result.channels.stable).toMatchObject({ action: 'update', sourceSha: sha('b') });
+      expect(result.channels.next).toMatchObject({ action: 'update', sourceSha: sha('2') });
+    }
+  });
+
+  it('replaces a published snapshot that left the branch history with the current one', () => {
+    const rewritten = candidate({ headBranch: 'next', headSha: sha('5') });
+    const orphan = candidate({ headBranch: 'next', headSha: sha('4') });
+    const result = selectChannels(
+      base({
+        trigger: rewritten.run,
+        ciRuns: [rewritten, stableRun],
+        branchHeads: { stable: sha('a'), next: sha('5') },
+        history: { stable: history(sha('a')), next: { [sha('5')]: 0, [sha('4')]: null } },
+        previous: { runId: 900, channels: doc(entryFor(stableRun, 'stable'), entryFor(orphan, 'next')), pagesArtifact: PAGES_ARTIFACT },
+      }),
+    );
+    expect(result.channels.next).toMatchObject({ action: 'update', sourceSha: sha('5') });
+  });
+});
+
+describe('Next after its first publication', () => {
+  it('stays published when its newest candidate failed', () => {
+    const stableRun = candidate({ headBranch: 'main', headSha: sha('a') });
+    const goodNext = candidate({ headBranch: 'next', headSha: sha('1') });
+    const failed = candidate({ headBranch: 'next', headSha: sha('2'), conclusion: 'failure' });
+    const result = selectChannels(
+      base({
+        trigger: stableRun.run,
+        ciRuns: [failed, goodNext, stableRun],
+        branchHeads: { stable: sha('a'), next: sha('2') },
+        history: { stable: history(sha('a')), next: history(sha('2'), sha('1')) },
+        previous: { runId: 900, channels: doc(entryFor(stableRun, 'stable'), entryFor(goodNext, 'next')), pagesArtifact: PAGES_ARTIFACT },
+      }),
+    );
+    expect(result.channels.next).toMatchObject({ action: 'keep', published: { sourceSha: sha('1') } });
+  });
+});
diff --git a/test/site/pages-site-base-links.test.ts b/test/site/pages-site-base-links.test.ts
new file mode 100644
index 000000000..f55569b4f
--- /dev/null
+++ b/test/site/pages-site-base-links.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+
+import { installSiteBaseLinks, rewriteSiteHref, siteBaseLinksPlugin } from '../../site/scripts/site-base-links';
+
+/**
+ * Guide sources link pages as `/ExoJS/<locale>/...`, the Stable base. A Next
+ * build rewrites those links in the Markdown syntax tree during the build, so
+ * its pages stay under `/ExoJS/next/` without touching the finished output.
+ */
+
+describe('rewriteSiteHref', () => {
+  it('moves a source-base link onto the build base', () => {
+    expect(rewriteSiteHref('/ExoJS/en/guide/', '/ExoJS/next/')).toBe('/ExoJS/next/en/guide/');
+    expect(rewriteSiteHref('/ExoJS/', '/ExoJS/next/')).toBe('/ExoJS/next/');
+    expect(rewriteSiteHref('/ExoJS/en/api/sprite/#methods', '/ExoJS/next/')).toBe('/ExoJS/next/en/api/sprite/#methods');
+  });
+
+  it('leaves Stable links, external links and lookalikes alone', () => {
+    expect(rewriteSiteHref('/ExoJS/en/guide/', '/ExoJS/')).toBe('/ExoJS/en/guide/');
+    expect(rewriteSiteHref('https://exoridus.github.io/ExoJS/en/', '/ExoJS/next/')).toBe('https://exoridus.github.io/ExoJS/en/');
+    expect(rewriteSiteHref('/ExoJSX/en/', '/ExoJS/next/')).toBe('/ExoJSX/en/');
+    expect(rewriteSiteHref('#anchor', '/ExoJS/next/')).toBe('#anchor');
+    expect(rewriteSiteHref('../relative/', '/ExoJS/next/')).toBe('../relative/');
+  });
+});
+
+describe('siteBaseLinksPlugin', () => {
+  const run = (plugin: NonNullable<ReturnType<typeof siteBaseLinksPlugin>>, node: Record<string, unknown>): Record<string, unknown> => {
+    const updates: Record<string, unknown> = {};
+    const context = { setProperty: (_node: unknown, key: string, value: unknown) => (updates[key] = value) };
+    const visitor = (plugin as unknown as Record<string, (node: unknown, context: unknown) => void>)[node['type'] as string];
+    visitor?.(node, context);
+
+    return updates;
+  };
+
+  it('rewrites links, definitions and images', () => {
+    const plugin = siteBaseLinksPlugin('/ExoJS/next/')!;
+    expect(run(plugin, { type: 'link', url: '/ExoJS/en/guide/setup/' })).toEqual({ url: '/ExoJS/next/en/guide/setup/' });
+    expect(run(plugin, { type: 'definition', url: '/ExoJS/de/api/' })).toEqual({ url: '/ExoJS/next/de/api/' });
+    expect(run(plugin, { type: 'image', url: '/ExoJS/brand/logo.svg' })).toEqual({ url: '/ExoJS/next/brand/logo.svg' });
+  });
+
+  it('changes nothing that needs no change and never visits code', () => {
+    const plugin = siteBaseLinksPlugin('/ExoJS/next/')!;
+    expect(run(plugin, { type: 'link', url: 'https://example.com/ExoJS/' })).toEqual({});
+    expect('code' in plugin || 'inlineCode' in plugin || 'text' in plugin).toBe(false);
+  });
+
+  it('is left out of a Stable build', () => {
+    expect(siteBaseLinksPlugin('/ExoJS/')).toBeNull();
+  });
+});
+
+describe('installSiteBaseLinks', () => {
+  it('adds the plugin to a Satteri processor', () => {
+    const processor = { name: 'satteri', options: { mdastPlugins: [] as unknown[] } };
+    installSiteBaseLinks(processor, '/ExoJS/next/');
+    expect(processor.options.mdastPlugins).toHaveLength(1);
+  });
+
+  it('refuses a processor it cannot extend, so a Next build never ships Stable links', () => {
+    expect(() => installSiteBaseLinks({ name: 'unified', options: {} }, '/ExoJS/next/')).toThrow(/processor/);
+    expect(() => installSiteBaseLinks({ name: 'unified', options: {} }, '/ExoJS/')).not.toThrow();
+  });
+});
diff --git a/test/site/pages-site-channel.test.ts b/test/site/pages-site-channel.test.ts
new file mode 100644
index 000000000..95656e692
--- /dev/null
+++ b/test/site/pages-site-channel.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  channelForBranch,
+  counterpartBasePath,
+  isSafeBasePath,
+  resolveSiteChannel,
+  SITE_CHANNEL_BASE,
+  siteChannelOutputs,
+} from '../../scripts/pages/site-channel';
+
+/**
+ * The channel build contract: `EXOJS_SITE_CHANNEL` and `EXOJS_SITE_BASE`
+ * decide the base path every generated URL carries, so an invalid or
+ * contradictory pair must never reach a build.
+ */
+
+describe('resolveSiteChannel', () => {
+  it('keeps the stable site at /ExoJS/ when nothing is configured', () => {
+    expect(resolveSiteChannel({})).toEqual({ channel: 'stable', basePath: '/ExoJS/', localTest: false });
+  });
+
+  it('derives the canonical base from the channel', () => {
+    expect(resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'next' })).toEqual({ channel: 'next', basePath: '/ExoJS/next/', localTest: false });
+    expect(resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'stable' }).basePath).toBe('/ExoJS/');
+  });
+
+  it('accepts the canonical pairs and infers the channel from a canonical base', () => {
+    expect(resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'next', EXOJS_SITE_BASE: '/ExoJS/next/' }).channel).toBe('next');
+    expect(resolveSiteChannel({ EXOJS_SITE_BASE: '/ExoJS/next/' }).channel).toBe('next');
+    expect(resolveSiteChannel({ EXOJS_SITE_BASE: '/ExoJS/' }).channel).toBe('stable');
+  });
+
+  it('treats empty values as unset', () => {
+    expect(resolveSiteChannel({ EXOJS_SITE_CHANNEL: '', EXOJS_SITE_BASE: '' }).channel).toBe('stable');
+  });
+
+  it('rejects an unknown channel', () => {
+    expect(() => resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'beta' })).toThrow(/EXOJS_SITE_CHANNEL/);
+    expect(() => resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'Next' })).toThrow(/EXOJS_SITE_CHANNEL/);
+  });
+
+  it('rejects a contradictory channel/base pair', () => {
+    expect(() => resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'stable', EXOJS_SITE_BASE: '/ExoJS/next/' })).toThrow(/contradicts/);
+    expect(() => resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'next', EXOJS_SITE_BASE: '/ExoJS/' })).toThrow(/contradicts/);
+  });
+
+  it('rejects a non-canonical base outside local test mode', () => {
+    expect(() => resolveSiteChannel({ EXOJS_SITE_BASE: '/preview/' })).toThrow(/EXOJS_SITE_LOCAL_TEST/);
+    expect(() => resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'next', EXOJS_SITE_BASE: '/ExoJS/next' })).toThrow();
+  });
+
+  it('allows a safe custom base only in explicit local test mode, and never on CI', () => {
+    expect(resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'next', EXOJS_SITE_BASE: '/sandbox/next/', EXOJS_SITE_LOCAL_TEST: '1' })).toEqual({
+      channel: 'next',
+      basePath: '/sandbox/next/',
+      localTest: true,
+    });
+    expect(() =>
+      resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'next', EXOJS_SITE_BASE: '/sandbox/', EXOJS_SITE_LOCAL_TEST: '1', GITHUB_ACTIONS: 'true' }),
+    ).toThrow(/CI/);
+    expect(() => resolveSiteChannel({ EXOJS_SITE_BASE: '/sandbox/', EXOJS_SITE_LOCAL_TEST: '1' })).toThrow(/EXOJS_SITE_CHANNEL/);
+  });
+
+  it('rejects an unsafe base even in local test mode', () => {
+    for (const base of [
+      '/a/../b/',
+      '/a//b/',
+      'relative/',
+      '/a b/',
+      '/a/"x/',
+      "/a/'/",
+      '/a/<x>/',
+      '/a/$(id)/',
+      '//evil.example/',
+      '/a/./',
+    ]) {
+      expect(
+        () => resolveSiteChannel({ EXOJS_SITE_CHANNEL: 'stable', EXOJS_SITE_BASE: base, EXOJS_SITE_LOCAL_TEST: '1' }),
+        `${base}`,
+      ).toThrow();
+    }
+  });
+});
+
+describe('isSafeBasePath', () => {
+  it('accepts the canonical bases and the root', () => {
+    expect(isSafeBasePath('/')).toBe(true);
+    expect(isSafeBasePath(SITE_CHANNEL_BASE.stable)).toBe(true);
+    expect(isSafeBasePath(SITE_CHANNEL_BASE.next)).toBe(true);
+  });
+
+  it('refuses a base without both slashes', () => {
+    expect(isSafeBasePath('/ExoJS')).toBe(false);
+    expect(isSafeBasePath('ExoJS/')).toBe(false);
+    expect(isSafeBasePath('')).toBe(false);
+  });
+});
+
+describe('channel relations', () => {
+  it('maps the long-lived branches to their channels and nothing else', () => {
+    expect(channelForBranch('main')).toBe('stable');
+    expect(channelForBranch('next')).toBe('next');
+    expect(channelForBranch('feature/x')).toBeNull();
+    expect(channelForBranch('refs/heads/main')).toBeNull();
+  });
+
+  it('names the other channel as the explicit switch target, but not for a local test base', () => {
+    expect(counterpartBasePath({ channel: 'next', basePath: '/ExoJS/next/', localTest: false })).toBe('/ExoJS/');
+    expect(counterpartBasePath({ channel: 'stable', basePath: '/ExoJS/', localTest: false })).toBe('/ExoJS/next/');
+    expect(counterpartBasePath({ channel: 'next', basePath: '/sandbox/', localTest: true })).toBeNull();
+  });
+});
+
+describe('siteChannelOutputs', () => {
+  it('builds a long-lived branch for its channel', () => {
+    expect(siteChannelOutputs('next')).toEqual(['channel=next', 'base=/ExoJS/next/']);
+    expect(siteChannelOutputs('main')).toEqual(['channel=stable', 'base=/ExoJS/']);
+  });
+
+  it('builds any other ref as stable, the unconfigured default', () => {
+    expect(siteChannelOutputs('feature/x')).toEqual(['channel=stable', 'base=/ExoJS/']);
+    expect(siteChannelOutputs('')).toEqual(['channel=stable', 'base=/ExoJS/']);
+  });
+});
diff --git a/test/site/pages-site-manifest.test.ts b/test/site/pages-site-manifest.test.ts
new file mode 100644
index 000000000..03ac30854
--- /dev/null
+++ b/test/site/pages-site-manifest.test.ts
@@ -0,0 +1,198 @@
+import { createHash } from 'node:crypto';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  computeContentHash,
+  createSiteBuildManifest,
+  hashTreeFiles,
+  parseSiteBuildManifest,
+  SITE_BUILD_FILE,
+  SITE_BUILD_SCHEMA_VERSION,
+  type SiteBuildIdentity,
+  validateSitePath,
+  verifySiteTree,
+} from '../../scripts/pages/site-manifest';
+
+/**
+ * `site-build.json` identifies one built channel tree: which commit, version,
+ * channel and base it was built for, and exactly which bytes it consists of.
+ * The publisher trusts a tree only when it matches this manifest, so the
+ * format, the path rules and the hash are pinned here.
+ */
+
+let tree: string;
+
+const write = (rel: string, content: string): void => {
+  const abs = join(tree, rel);
+  mkdirSync(join(abs, '..'), { recursive: true });
+  writeFileSync(abs, content);
+};
+
+const identity: SiteBuildIdentity = {
+  channel: 'next',
+  basePath: '/ExoJS/next/',
+  sourceSha: 'a'.repeat(40),
+  packageVersion: '0.19.1',
+  assetProfile: 'standard',
+  createdAt: '2026-10-21T12:00:00.000Z',
+  localTest: false,
+};
+
+beforeEach(() => {
+  tree = mkdtempSync(join(tmpdir(), 'exo-site-manifest-'));
+  write('index.html', '<html></html>');
+  write('en/index.html', 'en');
+  write('vendor/exojs/esm/index.js', 'export {};');
+  write('B.txt', 'upper');
+  write('a.txt', 'lower');
+});
+
+afterEach(() => rmSync(tree, { recursive: true, force: true }));
+
+describe('validateSitePath', () => {
+  it('accepts plain relative POSIX paths', () => {
+    for (const path of ['index.html', 'en/guide/index.html', '_astro/x.CbA9.js', 'pagefind/fragment/en_1.pf_fragment', '.nojekyll']) {
+      expect(validateSitePath(path), `${path}`).toBeNull();
+    }
+  });
+
+  it('rejects absolute, traversing, Windows-shaped and control-character paths', () => {
+    for (const path of [
+      '',
+      '/etc/passwd',
+      '../outside',
+      'a/../../b',
+      'a/./b',
+      'a//b',
+      'a/',
+      'C:/x',
+      'c:x',
+      'a\\b',
+      'a\u0000b',
+      'a\nb',
+      'a:b',
+      '.',
+      '..',
+    ]) {
+      expect(validateSitePath(path), `${JSON.stringify(path)}`).not.toBeNull();
+    }
+  });
+});
+
+describe('hashTreeFiles and computeContentHash', () => {
+  it('lists every file once, sorted by code unit, with size and SHA-256', () => {
+    const files = hashTreeFiles(tree);
+    expect(files.map(file => file.path)).toEqual(['B.txt', 'a.txt', 'en/index.html', 'index.html', 'vendor/exojs/esm/index.js']);
+    expect(files.find(file => file.path === 'a.txt')).toEqual({
+      path: 'a.txt',
+      size: 5,
+      sha256: createHash('sha256').update('lower').digest('hex'),
+    });
+  });
+
+  it('is deterministic and changes with any byte or path', () => {
+    const first = computeContentHash(hashTreeFiles(tree));
+    expect(computeContentHash(hashTreeFiles(tree))).toBe(first);
+    write('a.txt', 'Lower');
+    const edited = computeContentHash(hashTreeFiles(tree));
+    expect(edited).not.toBe(first);
+    rmSync(join(tree, 'a.txt'));
+    write('c.txt', 'Lower');
+    expect(computeContentHash(hashTreeFiles(tree))).not.toBe(edited);
+  });
+});
+
+describe('createSiteBuildManifest', () => {
+  it('records the identity, the file list and its hash, excluding itself', () => {
+    write(SITE_BUILD_FILE, '{"stale":true}');
+    const manifest = createSiteBuildManifest(tree, identity);
+
+    expect(manifest).toMatchObject({ schemaVersion: SITE_BUILD_SCHEMA_VERSION, ...identity, fileCount: 5 });
+    expect(manifest.files.some(file => file.path === SITE_BUILD_FILE)).toBe(false);
+    expect(manifest.totalBytes).toBe(manifest.files.reduce((sum, file) => sum + file.size, 0));
+    expect(manifest.contentHash).toBe(computeContentHash(manifest.files));
+  });
+
+  it('only excludes the manifest at the tree root', () => {
+    write(`nested/${SITE_BUILD_FILE}`, '{}');
+    expect(createSiteBuildManifest(tree, identity).files.some(file => file.path === `nested/${SITE_BUILD_FILE}`)).toBe(true);
+  });
+
+  it('refuses an identity that is not publishable as declared', () => {
+    expect(() => createSiteBuildManifest(tree, { ...identity, sourceSha: 'abc' })).toThrow(/sourceSha/);
+    expect(() => createSiteBuildManifest(tree, { ...identity, packageVersion: '0.20' })).toThrow(/packageVersion/);
+    expect(() => createSiteBuildManifest(tree, { ...identity, basePath: '/ExoJS/' })).toThrow(/basePath/);
+    expect(() => createSiteBuildManifest(tree, { ...identity, createdAt: 'yesterday' })).toThrow(/createdAt/);
+    expect(() => createSiteBuildManifest(tree, { ...identity, assetProfile: 'tiny' as 'standard' })).toThrow(/assetProfile/);
+  });
+
+  it('keeps a local test base and flags it, so the publisher can refuse it', () => {
+    const manifest = createSiteBuildManifest(tree, { ...identity, basePath: '/sandbox/', localTest: true });
+    expect(manifest).toMatchObject({ basePath: '/sandbox/', localTest: true });
+  });
+});
+
+describe('parseSiteBuildManifest', () => {
+  const valid = (): Record<string, unknown> =>
+    JSON.parse(JSON.stringify(createSiteBuildManifest(tree, identity))) as Record<string, unknown>;
+
+  it('round-trips a written manifest', () => {
+    const manifest = createSiteBuildManifest(tree, identity);
+    expect(parseSiteBuildManifest(JSON.parse(JSON.stringify(manifest)))).toEqual(manifest);
+  });
+
+  it('rejects an unknown schema version, a missing field and a forged count or hash', () => {
+    expect(() => parseSiteBuildManifest({ ...valid(), schemaVersion: 2 })).toThrow(/schemaVersion/);
+    const { channel: _channel, ...withoutChannel } = valid();
+    expect(() => parseSiteBuildManifest(withoutChannel)).toThrow(/channel/);
+    expect(() => parseSiteBuildManifest({ ...valid(), fileCount: 99 })).toThrow(/fileCount/);
+    expect(() => parseSiteBuildManifest({ ...valid(), contentHash: 'f'.repeat(64) })).toThrow(/contentHash/);
+  });
+
+  it('rejects unsafe, duplicate or unsorted file paths', () => {
+    const files = valid()['files'] as Array<Record<string, unknown>>;
+    expect(() => parseSiteBuildManifest({ ...valid(), files: [{ ...files[0], path: '../x' }, ...files.slice(1)] })).toThrow(/path/);
+    expect(() => parseSiteBuildManifest({ ...valid(), files: [files[0], ...files] })).toThrow(/sorted|duplicate/);
+    expect(() => parseSiteBuildManifest({ ...valid(), files: [...files].reverse() })).toThrow(/sorted|duplicate/);
+  });
+
+  it('rejects a non-object and a list that names the manifest itself', () => {
+    expect(() => parseSiteBuildManifest(null)).toThrow();
+    expect(() => parseSiteBuildManifest('{}')).toThrow();
+    const files = valid()['files'] as Array<Record<string, unknown>>;
+    const selfListed = [...files, { path: SITE_BUILD_FILE, size: 1, sha256: '0'.repeat(64) }].sort((a, b) =>
+      String(a['path']) < String(b['path']) ? -1 : 1,
+    );
+    expect(() => parseSiteBuildManifest({ ...valid(), files: selfListed, fileCount: selfListed.length })).toThrow(SITE_BUILD_FILE);
+  });
+});
+
+describe('verifySiteTree', () => {
+  it('passes the tree the manifest was made from', () => {
+    const manifest = createSiteBuildManifest(tree, identity);
+    write(SITE_BUILD_FILE, JSON.stringify(manifest));
+    expect(verifySiteTree(tree, manifest)).toEqual([]);
+  });
+
+  it('reports a changed, a missing and an unexpected file', () => {
+    const manifest = createSiteBuildManifest(tree, identity);
+    write('a.txt', 'tampered');
+    rmSync(join(tree, 'B.txt'));
+    write('extra.js', 'alert(1)');
+    const problems = verifySiteTree(tree, manifest).join('\n');
+    expect(problems).toMatch(/a\.txt/);
+    expect(problems).toMatch(/missing.*B\.txt/);
+    expect(problems).toMatch(/unexpected.*extra\.js/);
+  });
+
+  it('tolerates only the extra paths the caller names', () => {
+    const manifest = createSiteBuildManifest(tree, identity);
+    write('next/index.html', 'next');
+    expect(verifySiteTree(tree, manifest, { allowExtra: path => path.startsWith('next/') })).toEqual([]);
+    expect(verifySiteTree(tree, manifest)).not.toEqual([]);
+  });
+});
diff --git a/test/site/preview-console.test.ts b/test/site/preview-console.test.ts
new file mode 100644
index 000000000..1e0875adc
--- /dev/null
+++ b/test/site/preview-console.test.ts
@@ -0,0 +1,352 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  type ConsoleWindow,
+  formatConsoleArguments,
+  formatValue,
+  installConsoleBridge,
+  PreviewConsole,
+} from '../../site/src/lib/preview-console';
+
+/** A scheduler the test flushes by hand, so coalescing is observable. */
+const manualSchedule = (): { schedule: (callback: () => void) => () => void; flush: () => void; pending: () => number } => {
+  const queue = new Set<() => void>();
+
+  return {
+    schedule: callback => {
+      queue.add(callback);
+
+      return () => queue.delete(callback);
+    },
+    flush: () => {
+      for (const callback of [...queue]) {
+        queue.delete(callback);
+        callback();
+      }
+    },
+    pending: () => queue.size,
+  };
+};
+
+const frames: HTMLIFrameElement[] = [];
+
+/** A same-origin window with its own realm, like the playground's preview iframe. */
+const createPreviewWindow = (): ConsoleWindow => {
+  const frame = document.createElement('iframe');
+
+  document.body.append(frame);
+  frames.push(frame);
+
+  return frame.contentWindow as ConsoleWindow;
+};
+
+afterEach(() => {
+  for (const frame of frames.splice(0)) {
+    frame.remove();
+  }
+});
+
+describe('preview console bridge', () => {
+  it('captures all five severities and still calls the original methods', () => {
+    const target = createPreviewWindow();
+    const originals = Object.fromEntries((['log', 'info', 'debug', 'warn', 'error'] as const).map(method => [method, vi.fn()]));
+
+    Object.assign(target.console, originals);
+
+    const output = new PreviewConsole();
+
+    output.attach(target);
+    target.console.log('a log');
+    target.console.info('an info');
+    target.console.debug('a debug');
+    target.console.warn('a warning');
+    target.console.error('an error');
+
+    expect(output.getSnapshot().entries.map(entry => [entry.severity, entry.text])).toEqual([
+      ['log', 'a log'],
+      ['info', 'an info'],
+      ['debug', 'a debug'],
+      ['warn', 'a warning'],
+      ['error', 'an error'],
+    ]);
+
+    for (const method of ['log', 'info', 'debug', 'warn', 'error'] as const) {
+      expect(originals[method]).toHaveBeenCalledTimes(1);
+    }
+
+    expect(originals.log).toHaveBeenCalledWith('a log');
+  });
+
+  it('formats several arguments and format specifiers', () => {
+    const target = createPreviewWindow();
+
+    target.console.log = vi.fn();
+
+    const output = new PreviewConsole();
+
+    output.attach(target);
+    target.console.log('KeyDown:', 'Space', 3, true, null, undefined);
+    target.console.log('%s pressed %d times, %c styled', 'Jump', 2.7, 'color: red');
+
+    expect(output.getSnapshot().entries.map(entry => entry.text)).toEqual([
+      'KeyDown: Space 3 true null undefined',
+      'Jump pressed 2 times,  styled',
+    ]);
+  });
+
+  it('keeps the stack of an error from another realm as details', () => {
+    const target = createPreviewWindow();
+
+    target.console.error = vi.fn();
+
+    const output = new PreviewConsole();
+    const error = new (target as unknown as { Error: ErrorConstructor }).Error('boom');
+
+    expect(error instanceof Error).toBe(false);
+    output.attach(target);
+    target.console.error('Load failed:', error);
+
+    const [entry] = output.getSnapshot().entries;
+
+    expect(entry?.text).toBe('Load failed: Error: boom');
+    expect(entry?.details).toContain('boom');
+  });
+
+  it('describes circular, deep and large values within bounds', () => {
+    const circular: Record<string, unknown> = { name: 'node' };
+
+    circular.self = circular;
+
+    expect(formatValue(circular)).toBe('{name: "node", self: [Circular]}');
+    expect(formatValue({ a: { b: { c: { d: { e: 1 } } } } })).toBe('{a: {b: {c: {...}}}}');
+    expect(formatValue(Array.from({ length: 50 }, (_, index) => index))).toMatch(/^\[0, 1, .*19, \.\.\. 30 more\]$/);
+    expect(formatValue(new Map([['k', 1]]))).toBe('Map(1) {"k" => 1}');
+
+    const shared = { x: 1 };
+
+    expect(formatValue([shared, shared])).toBe('[{x: 1}, {x: 1}]');
+
+    const text = formatConsoleArguments(['x'.repeat(5000)], { maxLength: 100, maxDepth: 3, maxItems: 20 }).text;
+
+    expect(text.length).toBeLessThan(160);
+    expect(text).toContain('more characters');
+  });
+
+  it('survives getters that throw and never interprets text as markup', () => {
+    const hostile = {
+      get value(): never {
+        throw new Error('no');
+      },
+    };
+
+    expect(formatValue(hostile)).toBe('{value: "[Getter threw]"}');
+    expect(formatConsoleArguments(['<img src=x onerror=alert(1)>']).text).toBe('<img src=x onerror=alert(1)>');
+  });
+
+  it('restores the original methods when detached', () => {
+    const target = createPreviewWindow();
+    const original = vi.fn();
+
+    target.console.warn = original;
+
+    const output = new PreviewConsole();
+
+    output.attach(target);
+    expect(target.console.warn).not.toBe(original);
+    output.detach();
+    expect(target.console.warn).toBe(original);
+  });
+
+  it('never lets a formatter failure reach the caller', () => {
+    const target = createPreviewWindow();
+
+    target.console.log = vi.fn();
+
+    const detach = installConsoleBridge(target, () => {
+      throw new Error('capture failed');
+    });
+
+    expect(() => target.console.log('still fine')).not.toThrow();
+    detach();
+  });
+});
+
+describe('preview console record', () => {
+  it('ignores writes from an earlier preview generation', () => {
+    const first = createPreviewWindow();
+    const second = createPreviewWindow();
+
+    first.console.log = vi.fn();
+    second.console.log = vi.fn();
+
+    const output = new PreviewConsole();
+
+    output.attach(first);
+    const firstLog = first.console.log;
+
+    first.console.log('first run');
+    output.attach(second);
+    firstLog('late message from the old preview');
+    second.console.log('second run');
+
+    expect(output.getSnapshot().entries.map(entry => entry.text)).toEqual(['second run']);
+    expect(first.console.log).not.toBe(firstLog);
+  });
+
+  it('does not duplicate entries when the same window is attached twice', () => {
+    const target = createPreviewWindow();
+
+    target.console.log = vi.fn();
+
+    const output = new PreviewConsole();
+
+    output.attach(target);
+    output.attach(target);
+    target.console.log('once');
+
+    expect(output.getSnapshot().entries).toHaveLength(1);
+  });
+
+  it('bounds the record and counts what the rate limit drops', () => {
+    const output = new PreviewConsole({ capacity: 50, burst: 20, ratePerSecond: 10 });
+    const generation = output.begin();
+
+    for (let index = 0; index < 500; index += 1) {
+      output.write(generation, 'log', [`message ${index}`], 0);
+    }
+
+    const snapshot = output.getSnapshot();
+
+    expect(snapshot.entries.filter(entry => entry.kind === 'console')).toHaveLength(20);
+    expect(snapshot.suppressed).toBe(480);
+    expect(snapshot.counts.log).toBe(500);
+    expect(snapshot.entries.at(-1)?.kind).toBe('suppressed');
+    expect(snapshot.entries.at(-1)?.count).toBe(480);
+
+    // Once the bucket refills, messages are recorded again.
+    output.write(generation, 'log', ['after the burst'], 1000);
+    expect(output.getSnapshot().entries.at(-1)?.text).toBe('after the burst');
+  });
+
+  it('evicts the oldest entries beyond its capacity', () => {
+    const output = new PreviewConsole({ capacity: 10, burst: 1000 });
+    const generation = output.begin();
+
+    for (let index = 0; index < 25; index += 1) {
+      output.write(generation, 'info', [`message ${index}`], index);
+    }
+
+    const snapshot = output.getSnapshot();
+
+    expect(snapshot.entries).toHaveLength(10);
+    expect(snapshot.entries[0]?.text).toBe('message 15');
+    expect(snapshot.evicted).toBe(15);
+  });
+
+  it('collapses identical consecutive messages into one counted entry', () => {
+    const output = new PreviewConsole();
+    const generation = output.begin();
+
+    output.write(generation, 'log', ['tick'], 0);
+    output.write(generation, 'log', ['tick'], 5);
+    output.write(generation, 'warn', ['tick'], 6);
+
+    expect(output.getSnapshot().entries.map(entry => [entry.severity, entry.count])).toEqual([
+      ['log', 2],
+      ['warn', 1],
+    ]);
+  });
+
+  it('records an uncaught error once even when it was also logged', () => {
+    const output = new PreviewConsole();
+    const generation = output.begin();
+
+    output.write(
+      generation,
+      'error',
+      ['Failed to start:', { name: 'TypeError', message: 'x is undefined', stack: 'TypeError: x is undefined\n at a.js:1' }],
+      10,
+    );
+    output.writeException(generation, 'TypeError: x is undefined', 'TypeError: x is undefined\n at a.js:1', 12);
+    output.writeException(generation, 'Another failure', null, 900);
+
+    const snapshot = output.getSnapshot();
+
+    expect(snapshot.entries.map(entry => [entry.kind, entry.text])).toEqual([
+      ['exception', 'Failed to start: TypeError: x is undefined'],
+      ['exception', 'Another failure'],
+    ]);
+    expect(snapshot.exceptions).toBe(2);
+    expect(snapshot.counts.error).toBe(2);
+  });
+
+  it('never folds a second uncaught error into the first', () => {
+    const output = new PreviewConsole();
+    const generation = output.begin();
+
+    output.writeException(generation, 'boom', null, 0);
+    output.writeException(generation, 'boom', null, 10);
+
+    expect(output.getSnapshot().entries).toHaveLength(2);
+  });
+
+  it('drops the record of a detached preview, failures included', () => {
+    const output = new PreviewConsole();
+    const generation = output.begin();
+
+    output.write(generation, 'log', ['before the reload'], 0);
+    output.writeException(generation, 'boom', null, 5);
+    output.detach();
+
+    const snapshot = output.getSnapshot();
+
+    expect(snapshot.entries).toEqual([]);
+    expect(snapshot.exceptions).toBe(0);
+    expect(snapshot.counts.error).toBe(0);
+  });
+
+  it('keeps console.error and a later unrelated exception apart', () => {
+    const output = new PreviewConsole();
+    const generation = output.begin();
+
+    output.write(generation, 'error', ['handled problem'], 0);
+    output.writeException(generation, 'unhandled problem', null, 5);
+
+    expect(output.getSnapshot().entries.map(entry => entry.kind)).toEqual(['console', 'exception']);
+  });
+
+  it('coalesces notifications and releases its subscribers', () => {
+    const scheduler = manualSchedule();
+    const output = new PreviewConsole({ schedule: scheduler.schedule });
+    const listener = vi.fn();
+    const unsubscribe = output.subscribe(listener);
+    const generation = output.begin();
+
+    listener.mockClear();
+
+    for (let index = 0; index < 100; index += 1) {
+      output.write(generation, 'log', [index], index);
+    }
+
+    expect(listener).not.toHaveBeenCalled();
+    expect(scheduler.pending()).toBe(1);
+    scheduler.flush();
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+    expect(output.listenerCount).toBe(0);
+    output.write(generation, 'log', ['after unsubscribe'], 200);
+    output.dispose();
+    expect(scheduler.pending()).toBe(0);
+  });
+
+  it('returns the same snapshot until something changes', () => {
+    const output = new PreviewConsole();
+    const generation = output.begin();
+    const before = output.getSnapshot();
+
+    expect(output.getSnapshot()).toBe(before);
+    output.write(generation, 'log', ['changed'], 0);
+    expect(output.getSnapshot()).not.toBe(before);
+  });
+});
diff --git a/test/support/archive-fixtures.ts b/test/support/archive-fixtures.ts
new file mode 100644
index 000000000..9157e60a5
--- /dev/null
+++ b/test/support/archive-fixtures.ts
@@ -0,0 +1,177 @@
+import { crc32, deflateRawSync } from 'node:zlib';
+
+/**
+ * Hand-built archives for the Pages archive-safety suites. The writers emit
+ * exactly what they are told, including entries no well-behaved archiver
+ * would produce, so the readers can be tested against hostile input.
+ */
+
+export interface ZipFixtureEntry {
+  name: string;
+  data?: Buffer | string;
+  /** Unix mode including the file-type bits; defaults to a regular file or a directory by name. */
+  mode?: number;
+  /** Stored instead of deflated. */
+  store?: boolean;
+  /** Overrides the uncompressed size written to the headers. */
+  declaredSize?: number;
+  /** Sets the encryption flag. */
+  encrypted?: boolean;
+}
+
+const u16 = (value: number): Buffer => {
+  const buffer = Buffer.alloc(2);
+  buffer.writeUInt16LE(value);
+
+  return buffer;
+};
+
+const u32 = (value: number): Buffer => {
+  const buffer = Buffer.alloc(4);
+  buffer.writeUInt32LE(value >>> 0);
+
+  return buffer;
+};
+
+export const createZip = (entries: readonly ZipFixtureEntry[]): Buffer => {
+  const locals: Buffer[] = [];
+  const centrals: Buffer[] = [];
+  let offset = 0;
+
+  for (const entry of entries) {
+    const name = Buffer.from(entry.name, 'utf8');
+    const raw = Buffer.isBuffer(entry.data) ? entry.data : Buffer.from(entry.data ?? '', 'utf8');
+    const isDirectory = entry.name.endsWith('/');
+    const method = entry.store || isDirectory ? 0 : 8;
+    const payload = method === 8 ? deflateRawSync(raw) : raw;
+    const size = entry.declaredSize ?? raw.length;
+    const mode = entry.mode ?? (isDirectory ? 0o040755 : 0o100644);
+    const flags = 0x0800 | (entry.encrypted ? 0x0001 : 0);
+    const crc = crc32(raw);
+
+    const local = Buffer.concat([
+      u32(0x04034b50),
+      u16(20),
+      u16(flags),
+      u16(method),
+      u16(0),
+      u16(0),
+      u32(crc),
+      u32(payload.length),
+      u32(size),
+      u16(name.length),
+      u16(0),
+      name,
+      payload,
+    ]);
+    const central = Buffer.concat([
+      u32(0x02014b50),
+      u16((3 << 8) | 20),
+      u16(20),
+      u16(flags),
+      u16(method),
+      u16(0),
+      u16(0),
+      u32(crc),
+      u32(payload.length),
+      u32(size),
+      u16(name.length),
+      u16(0),
+      u16(0),
+      u16(0),
+      u16(0),
+      u32(mode << 16),
+      u32(offset),
+      name,
+    ]);
+
+    locals.push(local);
+    centrals.push(central);
+    offset += local.length;
+  }
+
+  const centralDirectory = Buffer.concat(centrals);
+  const end = Buffer.concat([
+    u32(0x06054b50),
+    u16(0),
+    u16(0),
+    u16(entries.length),
+    u16(entries.length),
+    u32(centralDirectory.length),
+    u32(offset),
+    u16(0),
+  ]);
+
+  return Buffer.concat([...locals, centralDirectory, end]);
+};
+
+export interface TarFixtureEntry {
+  name: string;
+  data?: Buffer | string;
+  /** Tar type flag: `0` file, `5` directory, `2` symlink, `1` hardlink, `3`-`7` special. */
+  type?: string;
+  linkName?: string;
+  /** Emits the path through a pax extended header instead of the ustar name field. */
+  pax?: boolean;
+}
+
+const octal = (value: number, width: number): string => `${value.toString(8).padStart(width - 1, '0')}\0`;
+
+const tarHeader = (name: string, size: number, type: string, linkName = ''): Buffer => {
+  const header = Buffer.alloc(512);
+  header.write(name.slice(0, 100), 0, 'utf8');
+  header.write(octal(type === '5' ? 0o755 : 0o644, 8), 100, 'ascii');
+  header.write(octal(0, 8), 108, 'ascii');
+  header.write(octal(0, 8), 116, 'ascii');
+  header.write(octal(size, 12), 124, 'ascii');
+  header.write(octal(0, 12), 136, 'ascii');
+  header.write('        ', 148, 'ascii');
+  header.write(type, 156, 'ascii');
+  header.write(linkName.slice(0, 100), 157, 'utf8');
+  header.write('ustar\0', 257, 'ascii');
+  header.write('00', 263, 'ascii');
+
+  let sum = 0;
+
+  for (const byte of header) {
+    sum += byte;
+  }
+
+  header.write(`${sum.toString(8).padStart(6, '0')}\0 `, 148, 'ascii');
+
+  return header;
+};
+
+const padded = (data: Buffer): Buffer => Buffer.concat([data, Buffer.alloc((512 - (data.length % 512)) % 512)]);
+
+export const createTar = (entries: readonly TarFixtureEntry[]): Buffer => {
+  const blocks: Buffer[] = [];
+
+  for (const entry of entries) {
+    const data = Buffer.isBuffer(entry.data) ? entry.data : Buffer.from(entry.data ?? '', 'utf8');
+    const type = entry.type ?? (entry.name.endsWith('/') ? '5' : '0');
+
+    if (entry.pax) {
+      const body = ` path=${entry.name}\n`;
+      let length = body.length;
+
+      while (`${length}${body}`.length !== length) {
+        length = `${length}${body}`.length;
+      }
+
+      const record = Buffer.from(`${length}${body}`, 'utf8');
+      blocks.push(tarHeader('PaxHeader', record.length, 'x'), padded(record));
+      blocks.push(tarHeader('placeholder', type === '0' ? data.length : 0, type, entry.linkName));
+    } else {
+      blocks.push(tarHeader(entry.name, type === '0' ? data.length : 0, type, entry.linkName));
+    }
+
+    if (type === '0') {
+      blocks.push(padded(data));
+    }
+  }
+
+  blocks.push(Buffer.alloc(1024));
+
+  return Buffer.concat(blocks);
+};
diff --git a/test/support/hybrid-runtime-package.ts b/test/support/hybrid-runtime-package.ts
new file mode 100644
index 000000000..b46bb8abf
--- /dev/null
+++ b/test/support/hybrid-runtime-package.ts
@@ -0,0 +1,52 @@
+/**
+ * Packs the built Core package (and optionally adapters) and installs the
+ * tarballs into a throwaway project outside the repository, for the release
+ * tests that judge what a consumer of the published runtime actually gets.
+ *
+ * These tests read built output. They skip when `dist/` has not been built -
+ * unless `EXOJS_REQUIRE_PRODUCTION_BUILD=1` demands them, as the build lane
+ * does. `EXOJS_HYBRID_PACKAGE_DIR` points them at another checkout's built Core
+ * (for example a baseline build) instead of this repository's.
+ */
+import { existsSync, mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+
+import { createConsumerProject, packPackage } from '../../scripts/release/external-consumers';
+
+export const repoRoot = resolve(import.meta.dirname, '..', '..');
+
+/** The Core package directory under test. */
+export const corePackageDir = resolve(process.env['EXOJS_HYBRID_PACKAGE_DIR'] ?? repoRoot);
+
+const mustHaveBuild = process.env['EXOJS_REQUIRE_PRODUCTION_BUILD'] === '1';
+
+/** Whether the tests should run: the build exists, or the lane demands it (and a missing build then fails). */
+export const runsAgainstBuild = (requiredFiles: readonly string[]): boolean =>
+  mustHaveBuild || requiredFiles.every(file => existsSync(resolve(corePackageDir, file)));
+
+export interface InstalledConsumer {
+  /** Consumer project directory. */
+  readonly dir: string;
+  /** Installed Core package directory inside the consumer. */
+  readonly coreDir: string;
+  readonly dispose: () => void;
+}
+
+/** Packs Core plus the given workspace package directories and installs them, offline, into a fresh consumer. */
+export const installHybridConsumer = (adapterDirs: readonly string[] = []): InstalledConsumer => {
+  const staging = mkdtempSync(join(tmpdir(), 'exo-hybrid-pack-'));
+  const tarballs = [corePackageDir, ...adapterDirs.map(dir => resolve(repoRoot, dir))].map(dir => packPackage(dir, staging));
+  const { dir, install } = createConsumerProject(tarballs);
+  rmSync(staging, { recursive: true, force: true });
+
+  const dispose = (): void => rmSync(dir, { recursive: true, force: true });
+
+  if (!install.ok) {
+    dispose();
+
+    throw new Error(`consumer install failed: ${install.detail ?? 'unknown'}`);
+  }
+
+  return { dir, coreDir: join(dir, 'node_modules', '@codexo', 'exojs'), dispose };
+};
diff --git a/test/templates/top-down-consumer.test.ts b/test/templates/top-down-consumer.test.ts
index cf5b8fd25..571e7e4f6 100644
--- a/test/templates/top-down-consumer.test.ts
+++ b/test/templates/top-down-consumer.test.ts
@@ -14,9 +14,9 @@ import { readFileSync } from 'node:fs';
 import { basename, join } from 'node:path';
 
 import { Application, Scene, SceneNavigationAbortedError, Signal } from '@codexo/exojs';
-import { BoxShape, PhysicsBody } from '@codexo/exojs-physics';
+import { BoxShape, PhysicsBody } from '@codexo/exojs/physics';
+import { TileLayerNode } from '@codexo/exojs/tilemap';
 import { tiledExtension } from '@codexo/exojs-tiled';
-import { TileLayerNode } from '@codexo/exojs-tilemap';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { type GlyphAtlasPool, resetDefaultGlyphAtlasPool } from '#rendering/text/GlyphAtlasPool';
diff --git a/test/tsconfig.json b/test/tsconfig.json
index 8ae8720dc..3a4ce9a67 100644
--- a/test/tsconfig.json
+++ b/test/tsconfig.json
@@ -63,16 +63,17 @@
       "@codexo/exojs/extensions": ["../src/extensions/index.ts"],
       "@codexo/exojs/renderer-sdk": ["../src/renderer-sdk.ts"],
       "@codexo/exojs/debug": ["../src/debug/index.ts"],
-      "@codexo/exojs-particles": ["../packages/exojs-particles/src/index.ts"],
-      "@codexo/exojs-tilemap": ["../packages/exojs-tilemap/src/index.ts"],
+      "@codexo/exojs-demo-assets": ["../packages/exojs-demo-assets/src/index.ts"],
+      "@codexo/exojs-demo-assets/extended": ["../packages/exojs-demo-assets/src/extended.ts"],
+      "@codexo/exojs/particles": ["../packages/exojs-particles/src/index.ts"],
+      "@codexo/exojs/tilemap": ["../packages/exojs-tilemap/src/index.ts"],
       "@codexo/exojs-tiled": ["../packages/exojs-tiled/src/index.ts"],
-      "@codexo/exojs-physics": ["../packages/exojs-physics/src/index.ts"],
-      "@codexo/exojs-audio-fx": ["../packages/exojs-audio-fx/src/index.ts"],
+      "@codexo/exojs/physics": ["../packages/exojs-physics/src/index.ts"],
+      "@codexo/exojs/audio-fx": ["../packages/exojs-audio-fx/src/index.ts"],
       "@codexo/exojs-aseprite": ["../packages/exojs-aseprite/src/index.ts"],
       "@codexo/exojs-ldtk": ["../packages/exojs-ldtk/src/index.ts"],
-      "@codexo/exojs-lighting": ["../packages/exojs-lighting/src/index.ts"],
-      "@codexo/exojs-pathfinding": ["../packages/exojs-pathfinding/src/index.ts"],
-      "@codexo/exojs-physics/debug": ["../packages/exojs-physics/src/debug/index.ts"]
+      "@codexo/exojs/lighting": ["../packages/exojs-lighting/src/index.ts"],
+      "@codexo/exojs/pathfinding": ["../packages/exojs-pathfinding/src/index.ts"]
     }
   },
   "include": ["**/*", "typings.d.ts", "../src/typings.d.ts"],
diff --git a/test/type-tests/occluder-structural-arguments.type-test.ts b/test/type-tests/occluder-structural-arguments.type-test.ts
index 28fbb3919..a16d7b306 100644
--- a/test/type-tests/occluder-structural-arguments.type-test.ts
+++ b/test/type-tests/occluder-structural-arguments.type-test.ts
@@ -18,9 +18,9 @@ import {
   type OccluderTileLayer,
   PhysicsOccluder,
   TilemapOccluder,
-} from '@codexo/exojs-lighting';
-import type { PhysicsWorld } from '@codexo/exojs-physics';
-import type { ResolvedTile, TileLayer } from '@codexo/exojs-tilemap';
+} from '@codexo/exojs/lighting';
+import type { PhysicsWorld } from '@codexo/exojs/physics';
+import type { ResolvedTile, TileLayer } from '@codexo/exojs/tilemap';
 
 declare const world: PhysicsWorld;
 declare const layer: TileLayer;
diff --git a/test/type-tests/package-bare-path-inference.type-test.ts b/test/type-tests/package-bare-path-inference.type-test.ts
index a4ca3702f..53dc38283 100644
--- a/test/type-tests/package-bare-path-inference.type-test.ts
+++ b/test/type-tests/package-bare-path-inference.type-test.ts
@@ -15,10 +15,10 @@ import '@codexo/exojs-ldtk';
 import '@codexo/exojs-tiled';
 
 import { Asset, type AssetRef, Assets, type KindByPath, type Loader, type LoadingQueue, type Texture } from '@codexo/exojs';
+import type { TileMap } from '@codexo/exojs/tilemap';
 import type { AsepriteSheet } from '@codexo/exojs-aseprite';
 import type { LdtkMap } from '@codexo/exojs-ldtk';
 import type { TiledMap } from '@codexo/exojs-tiled';
-import type { TileMap } from '@codexo/exojs-tilemap';
 
 import type { CatalogValueLeaf } from './helpers/catalog-leaf';
 
diff --git a/tsconfig.examples.json b/tsconfig.examples.json
index 8ca78902b..acaec4efc 100644
--- a/tsconfig.examples.json
+++ b/tsconfig.examples.json
@@ -1,7 +1,6 @@
 {
   // Static type-check for the consumer-facing code the repository ships as
-  // copy-paste material: the playground example catalog and the opt-in
-  // all-in-one IIFE entry.
+  // copy-paste material: the playground example catalog.
   //
   // The runtime example smoke (site/scripts/smoke-examples.ts) only catches
   // crashes and missing canvases - stale TextStyle keys like `fill`, `stroke`,
@@ -22,13 +21,9 @@
   // `Scene.tweens` / `Scene.loader` getters, which throw the same way when
   // accessed before the scene is attached).
   //
-  // Scope: the full example catalog plus `scripts/exo-full.entry.ts`. Every
-  // authored `.ts` under `examples/` is type-checked against the engine source
-  // types, so stale TextStyle keys are caught catalog-wide. The full-bundle entry is the
-  // same kind of program - a named re-export surface resolved against every
-  // extension package's source - and the production build only compiles it when
-  // EXOJS_FULL_BUNDLE=1, so without it here a stale named export is visible only
-  // in the CI build lane. `examples/shared/runtime.ts` supplies the shared
+  // Scope: the full example catalog. Every authored `.ts` under `examples/` is
+  // type-checked against the engine source types, so stale TextStyle keys are
+  // caught catalog-wide. `examples/shared/runtime.ts` supplies the shared
   // helper kit and the playground-only globals (`window.assets`,
   // `__EXAMPLE_META__`).
   //
@@ -64,21 +59,22 @@
       "@codexo/exojs/extensions": ["./src/extensions/index.ts"],
       "@codexo/exojs/renderer-sdk": ["./src/renderer-sdk.ts"],
       "@codexo/exojs/debug": ["./src/debug/index.ts"],
-      "@codexo/exojs-particles": ["./packages/exojs-particles/src/index.ts"],
+      "@codexo/exojs-demo-assets": ["./packages/exojs-demo-assets/src/index.ts"],
+      "@codexo/exojs-demo-assets/extended": ["./packages/exojs-demo-assets/src/extended.ts"],
+      "@codexo/exojs/particles": ["./packages/exojs-particles/src/index.ts"],
       "@codexo/exojs-tiled": ["./packages/exojs-tiled/src/index.ts"],
-      "@codexo/exojs-tilemap": ["./packages/exojs-tilemap/src/index.ts"],
+      "@codexo/exojs/tilemap": ["./packages/exojs-tilemap/src/index.ts"],
       "@codexo/exojs-aseprite": ["./packages/exojs-aseprite/src/index.ts"],
       "@codexo/exojs-ldtk": ["./packages/exojs-ldtk/src/index.ts"],
-      "@codexo/exojs-physics": ["./packages/exojs-physics/src/index.ts"],
-      "@codexo/exojs-physics/debug": ["./packages/exojs-physics/src/debug/index.ts"],
-      "@codexo/exojs-tilemap-physics": ["./packages/exojs-tilemap-physics/src/index.ts"],
-      "@codexo/exojs-lighting": ["./packages/exojs-lighting/src/index.ts"],
-      "@codexo/exojs-pathfinding": ["./packages/exojs-pathfinding/src/index.ts"],
-      "@codexo/exojs-audio-fx": ["./packages/exojs-audio-fx/src/index.ts"],
+      "@codexo/exojs/physics": ["./packages/exojs-physics/src/index.ts"],
+      "@codexo/exojs/tilemap-physics": ["./packages/exojs-tilemap-physics/src/index.ts"],
+      "@codexo/exojs/lighting": ["./packages/exojs-lighting/src/index.ts"],
+      "@codexo/exojs/pathfinding": ["./packages/exojs-pathfinding/src/index.ts"],
+      "@codexo/exojs/audio-fx": ["./packages/exojs-audio-fx/src/index.ts"],
       "@examples/runtime": ["./examples/shared/runtime.ts"],
       "@examples/terrain-noise": ["./examples/shared/terrain-noise.ts"]
     }
   },
-  "include": ["examples/**/*.ts", "examples/tilemap/worker-streamed-terrain.js", "scripts/exo-full.entry.ts", "src/typings.d.ts"],
+  "include": ["examples/**/*.ts", "examples/tilemap/worker-streamed-terrain.js", "src/typings.d.ts"],
   "exclude": ["examples/shared/editor-support.d.ts", "examples/**/*.worker.ts"]
 }
diff --git a/tsconfig.guides.json b/tsconfig.guides.json
index d24dcb960..0736e6154 100644
--- a/tsconfig.guides.json
+++ b/tsconfig.guides.json
@@ -43,16 +43,17 @@
       "@codexo/exojs/renderer-sdk": ["./src/renderer-sdk.ts"],
       "@codexo/exojs/debug": ["./src/debug/index.ts"],
       "@codexo/exojs-build": ["./packages/exojs-build/src/index.ts"],
-      "@codexo/exojs-particles": ["./packages/exojs-particles/src/index.ts"],
-      "@codexo/exojs-audio-fx": ["./packages/exojs-audio-fx/src/index.ts"],
+      "@codexo/exojs/particles": ["./packages/exojs-particles/src/index.ts"],
+      "@codexo/exojs/audio-fx": ["./packages/exojs-audio-fx/src/index.ts"],
       "@codexo/exojs-tiled": ["./packages/exojs-tiled/src/index.ts"],
-      "@codexo/exojs-tilemap": ["./packages/exojs-tilemap/src/index.ts"],
-      "@codexo/exojs-physics": ["./packages/exojs-physics/src/index.ts"],
+      "@codexo/exojs/tilemap": ["./packages/exojs-tilemap/src/index.ts"],
+      "@codexo/exojs/physics": ["./packages/exojs-physics/src/index.ts"],
       "@codexo/exojs-aseprite": ["./packages/exojs-aseprite/src/index.ts"],
       "@codexo/exojs-ldtk": ["./packages/exojs-ldtk/src/index.ts"],
-      "@codexo/exojs-tilemap-physics": ["./packages/exojs-tilemap-physics/src/index.ts"],
-      "@codexo/exojs-lighting": ["./packages/exojs-lighting/src/index.ts"],
-      "@codexo/exojs-pathfinding": ["./packages/exojs-pathfinding/src/index.ts"]
+      "@codexo/exojs-demo-assets": ["./packages/exojs-demo-assets/src/index.ts"],
+      "@codexo/exojs/tilemap-physics": ["./packages/exojs-tilemap-physics/src/index.ts"],
+      "@codexo/exojs/lighting": ["./packages/exojs-lighting/src/index.ts"],
+      "@codexo/exojs/pathfinding": ["./packages/exojs-pathfinding/src/index.ts"]
     }
   },
   "include": [".workspace/generated/guide-typecheck/**/*.ts", ".workspace/generated/guide-typecheck/**/*.js", "src/typings.d.ts"]
diff --git a/tsconfig.json b/tsconfig.json
index 257e4b57f..0e1cec94d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,6 @@
 {
-  "extends": "@codexo/exojs-config/typescript/library.json",
+  "extends": ["@codexo/exojs-config/typescript/library.json", "@codexo/exojs-config/typescript/workspace-paths.json"],
   "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
     "customConditions": ["@codexo/exojs-source"]
   },
   "include": ["src/**/*", "src/typings.d.ts"],
diff --git a/tsconfig.scripts.json b/tsconfig.scripts.json
index d74f76d99..0ff9d1a1d 100644
--- a/tsconfig.scripts.json
+++ b/tsconfig.scripts.json
@@ -51,9 +51,6 @@
     "noUncheckedIndexedAccess": false,
     "exactOptionalPropertyTypes": false
   },
-  // `exo-full.entry.ts` is a bundler entry, not a Node program: it re-exports
-  // every extension package and is type-checked by `tsconfig.examples.json`
-  // against their sources.
   // `competitors/link.ts` is bench SETUP rather than bench code: it imports only
   // `node:` built-ins and runs before the competitor install exists, so it
   // belongs to this always-checked tooling program rather than to the bench
@@ -66,10 +63,10 @@
     "*.config.ts",
     "packages/exojs-config/**/*.js",
     "packages/create-exo-app/bin/*.js",
+    "packages/exojs-demo-assets/bin/*.js",
     "packages/exojs-bench/competitors/*.ts"
   ],
   "exclude": [
-    "scripts/exo-full.entry.ts",
     // Consumer programs for `verify:declaration-semantics`, not repository code.
     // They are compiled against the *built* declarations as an external package
     // would, in a throwaway workspace, and the contracts they assert are about
diff --git a/tsconfig.templates.json b/tsconfig.templates.json
index 3c99a5012..61d16ed5b 100644
--- a/tsconfig.templates.json
+++ b/tsconfig.templates.json
@@ -28,17 +28,16 @@
       "@codexo/exojs/extensions": ["./src/extensions/index.ts"],
       "@codexo/exojs/renderer-sdk": ["./src/renderer-sdk.ts"],
       "@codexo/exojs/debug": ["./src/debug/index.ts"],
-      "@codexo/exojs-particles": ["./packages/exojs-particles/src/index.ts"],
+      "@codexo/exojs/particles": ["./packages/exojs-particles/src/index.ts"],
       "@codexo/exojs-tiled": ["./packages/exojs-tiled/src/index.ts"],
-      "@codexo/exojs-tilemap": ["./packages/exojs-tilemap/src/index.ts"],
+      "@codexo/exojs/tilemap": ["./packages/exojs-tilemap/src/index.ts"],
       "@codexo/exojs-aseprite": ["./packages/exojs-aseprite/src/index.ts"],
       "@codexo/exojs-ldtk": ["./packages/exojs-ldtk/src/index.ts"],
-      "@codexo/exojs-physics": ["./packages/exojs-physics/src/index.ts"],
-      "@codexo/exojs-physics/debug": ["./packages/exojs-physics/src/debug/index.ts"],
-      "@codexo/exojs-tilemap-physics": ["./packages/exojs-tilemap-physics/src/index.ts"],
-      "@codexo/exojs-lighting": ["./packages/exojs-lighting/src/index.ts"],
-      "@codexo/exojs-pathfinding": ["./packages/exojs-pathfinding/src/index.ts"],
-      "@codexo/exojs-audio-fx": ["./packages/exojs-audio-fx/src/index.ts"]
+      "@codexo/exojs/physics": ["./packages/exojs-physics/src/index.ts"],
+      "@codexo/exojs/tilemap-physics": ["./packages/exojs-tilemap-physics/src/index.ts"],
+      "@codexo/exojs/lighting": ["./packages/exojs-lighting/src/index.ts"],
+      "@codexo/exojs/pathfinding": ["./packages/exojs-pathfinding/src/index.ts"],
+      "@codexo/exojs/audio-fx": ["./packages/exojs-audio-fx/src/index.ts"]
     }
   },
   // `src/typings.d.ts` carries the engine build constants and the ambient
diff --git a/vitest.config.ts b/vitest.config.ts
index 5d9615f25..69bdde51d 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -22,26 +22,34 @@ const aliasConfig = [
   { find: '@codexo/exojs/extensions', replacement: fileURLToPath(new URL('./src/extensions/index.ts', import.meta.url)) },
   { find: '@codexo/exojs/renderer-sdk', replacement: fileURLToPath(new URL('./src/renderer-sdk.ts', import.meta.url)) },
   { find: '@codexo/exojs/debug', replacement: fileURLToPath(new URL('./src/debug/index.ts', import.meta.url)) },
+  // The demo-assets package is data plus factories; alias it to source like the
+  // other content packages. The subpath must come before the root alias.
+  {
+    find: '@codexo/exojs-demo-assets/extended',
+    replacement: fileURLToPath(new URL('./packages/exojs-demo-assets/src/extended.ts', import.meta.url)),
+  },
+  {
+    find: '@codexo/exojs-demo-assets',
+    replacement: fileURLToPath(new URL('./packages/exojs-demo-assets/src/index.ts', import.meta.url)),
+  },
+  // The runtime-module subpaths map to the module sources; the build compiles
+  // the same sources into `dist/esm/<subpath>/`, which this lane never builds.
+  { find: '@codexo/exojs/particles', replacement: fileURLToPath(new URL('./packages/exojs-particles/src/index.ts', import.meta.url)) },
+  { find: '@codexo/exojs/audio-fx', replacement: fileURLToPath(new URL('./packages/exojs-audio-fx/src/index.ts', import.meta.url)) },
+  {
+    find: '@codexo/exojs/tilemap-physics',
+    replacement: fileURLToPath(new URL('./packages/exojs-tilemap-physics/src/index.ts', import.meta.url)),
+  },
+  { find: '@codexo/exojs/tilemap', replacement: fileURLToPath(new URL('./packages/exojs-tilemap/src/index.ts', import.meta.url)) },
+  { find: '@codexo/exojs/physics', replacement: fileURLToPath(new URL('./packages/exojs-physics/src/index.ts', import.meta.url)) },
+  { find: '@codexo/exojs/lighting', replacement: fileURLToPath(new URL('./packages/exojs-lighting/src/index.ts', import.meta.url)) },
+  { find: '@codexo/exojs/pathfinding', replacement: fileURLToPath(new URL('./packages/exojs-pathfinding/src/index.ts', import.meta.url)) },
   { find: '@codexo/exojs', replacement: fileURLToPath(new URL('./src/index.ts', import.meta.url)) },
-  // @codexo/exojs-tiled depends on @codexo/exojs-tilemap; neither package
-  // exports a `@codexo/exojs-source` condition, so alias to source for in-repo tests.
-  // @codexo/exojs-physics is aliased too so the example physics↔tilemap bridge
-  // recipe (examples/shared/physics-tilemap.ts) can be unit-tested in-repo.
-  // @codexo/exojs-particles and @codexo/exojs-tilemap are aliased for the same
-  // reason: the benchmark's extension arms import them, and this lane runs
-  // without building the packages, so their `dist` entries resolve to nothing.
-  { find: '@codexo/exojs-particles', replacement: fileURLToPath(new URL('./packages/exojs-particles/src/index.ts', import.meta.url)) },
-  { find: '@codexo/exojs-tilemap', replacement: fileURLToPath(new URL('./packages/exojs-tilemap/src/index.ts', import.meta.url)) },
+  // The adapters publish no `@codexo/exojs-source` condition, so they are
+  // aliased to source for in-repo tests too.
   { find: '@codexo/exojs-tiled', replacement: fileURLToPath(new URL('./packages/exojs-tiled/src/index.ts', import.meta.url)) },
   { find: '@codexo/exojs-aseprite', replacement: fileURLToPath(new URL('./packages/exojs-aseprite/src/index.ts', import.meta.url)) },
   { find: '@codexo/exojs-ldtk', replacement: fileURLToPath(new URL('./packages/exojs-ldtk/src/index.ts', import.meta.url)) },
-  { find: '@codexo/exojs-physics', replacement: fileURLToPath(new URL('./packages/exojs-physics/src/index.ts', import.meta.url)) },
-  {
-    find: '@codexo/exojs-tilemap-physics',
-    replacement: fileURLToPath(new URL('./packages/exojs-tilemap-physics/src/index.ts', import.meta.url)),
-  },
-  { find: '@codexo/exojs-lighting', replacement: fileURLToPath(new URL('./packages/exojs-lighting/src/index.ts', import.meta.url)) },
-  { find: '@codexo/exojs-pathfinding', replacement: fileURLToPath(new URL('./packages/exojs-pathfinding/src/index.ts', import.meta.url)) },
   // The CLI's `exo create` calls the scaffolder's library entry, whose package
   // resolves to built output. The unit lane runs without building the packages,
   // so an in-repo test would resolve nothing at all without this.
@@ -63,7 +71,7 @@ const EXTENSION_SOURCE_ROOTS = [
  *
  * A blanket alias cannot do this: each extension package carries its own `#*`
  * map pointing at its own `src`, so `#distributions/Curve` imported from inside
- * `@codexo/exojs-particles` would be sent into the engine tree, where no such
+ * the particles module would be sent into the engine tree, where no such
  * module exists. Declining for those importers leaves the specifier to Vite's
  * normal `imports` resolution, which `srcConditions` already steers to the
  * package's own sources.
@@ -158,6 +166,12 @@ const webgpuMediaTests = ['test/rendering/browser/webgpu-*video*.test.ts'];
 const webgpuCoreTests = ['test/rendering/browser/webgpu-*.test.ts', 'test/rendering/parity/**/*.test.ts'];
 const webgpuCoreExclude = [...configDefaults.exclude, ...webgpuMediaTests];
 
+const releaseDistTests = [
+  'test/release/hybrid-runtime-exports.test.ts',
+  'test/release/hybrid-runtime-identity.test.ts',
+  'test/release/legacy-shims-tarball.test.ts',
+];
+
 // Specs that can take a Firefox process down or wedge it on Windows, so they run
 // in a browser of their own with a short deadline and cannot cost the whole Core
 // run: the device-churn regression (96 create/destroy cycles) crashes the GPU
@@ -314,8 +328,21 @@ export default defineConfig({
           // `InlineWorker` needs a real Worker and a real object URL, neither
           // of which jsdom has; browser-core-chromium runs this suite.
           'test/core/browser/**/*.test.ts',
+          ...releaseDistTests,
         ],
       }),
+      // Packs and installs the built Core, so it runs in the CI build job right
+      // after `pnpm build`, where `EXOJS_REQUIRE_PRODUCTION_BUILD=1` turns a
+      // missing dist into a failure. Inside the parallel suite these files
+      // could only skip, and a skip verifies nothing.
+      createJsdomTestProject({
+        name: 'release-dist',
+        include: releaseDistTests,
+      }),
+      createJsdomTestProject({
+        name: 'exojs-demo-assets',
+        include: ['packages/exojs-demo-assets/test/**/*.test.ts'],
+      }),
       createJsdomTestProject({
         name: 'exojs-particles',
         include: ['packages/exojs-particles/test/**/*.test.ts'],