fix: harden media and WebAssembly delivery

.env.example

@@ -4,5 +4,5 @@ TRAEFIK_NETWORK=internal
 TRAEFIK_CERT_RESOLVER=netcup
 
 # Keep these two values paired when deploying a newer published toolbox release.
-TOOLBOX_RELEASE_VERSION=0.4.2
+TOOLBOX_RELEASE_VERSION=0.5.0
-TOOLBOX_RELEASE_SHA256=20c1eacbcf03a9c8f0beeb53d2326a963e54dd9ca93e4f0118f95f10aec45389
+TOOLBOX_RELEASE_SHA256=375eccf44d8294839ae71f5fd54677f7771e7d865a23d447aebab7aeb40020a1

Containerfile.release

@@ -2,8 +2,8 @@ ARG NGINX_IMAGE=nginxinc/nginx-unprivileged:1.31.3-alpine@sha256:18d67281256ded3
 
 FROM ${NGINX_IMAGE} AS release
 
-ARG TOOLBOX_RELEASE_VERSION=0.4.2
+ARG TOOLBOX_RELEASE_VERSION=0.5.0
-ARG TOOLBOX_RELEASE_SHA256=20c1eacbcf03a9c8f0beeb53d2326a963e54dd9ca93e4f0118f95f10aec45389
+ARG TOOLBOX_RELEASE_SHA256=375eccf44d8294839ae71f5fd54677f7771e7d865a23d447aebab7aeb40020a1
 ARG TOOLBOX_RELEASE_BASE_URL=https://git.add-ideas.de/zemion/toolbox-portal/releases/download
 
 RUN set -eu; \
@@ -21,6 +21,7 @@ RUN set -eu; \
     test -f /tmp/toolbox/apps/pdf/toolbox-app.json; \
     test -f /tmp/toolbox/apps/xslt/toolbox-app.json; \
     test -f /tmp/toolbox/apps/onenote/toolbox-app.json; \
+    test -f /tmp/toolbox/apps/av/toolbox-app.json; \
     rm "/tmp/${archive}"
 
 FROM ${NGINX_IMAGE}

README.md

@@ -1,8 +1,8 @@
 # add·ideas Toolbox Portal
 
 `toolbox-portal` is the static launcher and release assembler for the add·ideas
-browser toolbox. Version `0.2.2` reads one same-origin catalogue, shows each app
+browser toolbox. Version `0.2.4` reads one same-origin catalogue, shows each app
-as a full-page launch tile, and keeps personal pins, drag-and-drop ordering,
+as a compact launch tile, and keeps personal pins, drag-and-drop ordering,
 visibility, and appearance in the current browser. Pinned tools have their own
 section; search, category, and clickable tag filters stay close to the tool
 list.
@@ -36,9 +36,9 @@ the SDK and portal together.
 
 Vite uses `base: './'`, so the built portal works at `/` or a nested static path.
 The development catalogue at `public/toolbox.catalog.json` points to assembled
-paths (`./apps/pdf/`, `./apps/xslt/`, and `./apps/onenote/`). Those manifests
+paths (`./apps/pdf/`, `./apps/xslt/`, `./apps/onenote/`, and `./apps/av/`).
-will correctly appear as unavailable until an assembled release is being
+Those manifests will correctly appear as unavailable until an assembled release
-served.
+is being served.
 
 ## Catalogue and launches
 
@@ -68,7 +68,7 @@ privacy and executable-code warning. Light, dark, and system modes are supported
 ## Production deployment behind Traefik
 
 The committed `compose.yaml` is the shortest production path. Its release
-container downloads the immutable Toolbox 0.4.2 ZIP during the image build,
+container downloads the immutable Toolbox 0.5.0 ZIP during the image build,
 verifies SHA-256 before extracting it, and then copies only the verified static
 files into the pinned unprivileged nginx image. Node.js and a local portal
 assembly are not required on the deployment host.
@@ -119,9 +119,9 @@ The app release should also publish a matching `.sha256` sidecar. The manifest
 must declare the pinned reverse-DNS id and version. Application and portal
 versions are independent.
 
-`release/toolbox.lock.json` is the reviewed v0.4.2 lock. Its URLs and checksums
+`release/toolbox.lock.json` is the reviewed v0.5.0 lock. Its URLs and checksums
-pin the published PDF Tools 0.4.2, XSLT Tools 0.4.2, and OneNote Tools 0.3.2
+pin the published PDF Tools 0.4.3, XSLT Tools 0.4.2, OneNote Tools 0.3.3, and
-release bytes. Use
+Audio & Video Tools 0.1.0 release bytes. Use
 `release/toolbox.lock.example.json` as the template for a future release and
 verify every downloaded asset before committing updated values. Artifacts may be:
 
@@ -142,7 +142,7 @@ npm run assemble -- \
   --lock release/toolbox.lock.json \
   --portal-dist dist \
   --output build/toolbox \
-  --archive build/add-ideas-toolbox-0.4.2.zip
+  --archive build/add-ideas-toolbox-0.5.0.zip
 ```
 
 Existing output is refused. Pass `--force` only when replacing those exact
@@ -160,10 +160,11 @@ build/toolbox/
 └── apps/
     ├── pdf/
     ├── xslt/
-    └── onenote/
+    ├── onenote/
+    └── av/
 
-build/add-ideas-toolbox-0.4.2.zip
+build/add-ideas-toolbox-0.5.0.zip
-build/add-ideas-toolbox-0.4.2.zip.sha256
+build/add-ideas-toolbox-0.5.0.zip.sha256
 ```
 
 The assembler verifies SHA-256 before opening an artifact, validates every app
@@ -184,16 +185,17 @@ directory separately:
 ```sh
 npm run package:static -- \
   --input build/toolbox \
-  --output artifacts/add-ideas-toolbox-0.4.2.zip
+  --output artifacts/add-ideas-toolbox-0.5.0.zip
 ```
 
 This also emits a `.sha256` sidecar.
 
 ## Local assembled container and publication
 
-`Containerfile` serves only the assembled files with unprivileged nginx on port 8080. It adds restrictive browser headers, same-origin isolation, immutable
+`Containerfile` serves only the assembled files with unprivileged nginx on port 8080. It adds restrictive browser headers, same-origin isolation, explicit
-caching only for Vite-hashed assets, and revalidation for all other files.
+`application/wasm`, immutable caching only for Vite-hashed assets and narrowly
-Assemble first, then:
+matched semver-versioned FFmpeg core files, and revalidation for all other
+files. Assemble first, then:
 
 The packaged policy intentionally does not grant CSP `unsafe-eval`. SaxonJS's
 `ixsl:eval()` extension is therefore unsupported in this deployment profile;
@@ -201,9 +203,9 @@ normal local XML/XSLT transformations do not require that permission.
 
 ```sh
 podman build -f Containerfile \
-  -t git.add-ideas.de/zemion/toolbox:0.4.2 .
+  -t git.add-ideas.de/zemion/toolbox:0.5.0 .
 podman run --rm -p 8080:8080 \
-  git.add-ideas.de/zemion/toolbox:0.4.2
+  git.add-ideas.de/zemion/toolbox:0.5.0
 ```
 
 For a direct-port local deployment after assembly, use the separate example:
@@ -220,8 +222,8 @@ docker login git.add-ideas.de
 docker buildx build \
   --platform linux/amd64,linux/arm64 \
   --file Containerfile.release \
-  --tag git.add-ideas.de/zemion/toolbox:0.4.2 \
+  --tag git.add-ideas.de/zemion/toolbox:0.5.0 \
-  --tag git.add-ideas.de/zemion/toolbox:0.4 \
+  --tag git.add-ideas.de/zemion/toolbox:0.5 \
   --push .
 ```
 
@@ -232,9 +234,9 @@ notes.
 
 ## Manual Gitea publication checklist
 
-No credentials belong in this repository. Before the first release, create the
+No credentials belong in this repository. The publishing workstation or runner
-`zemion/toolbox-portal` Gitea repository and grant the workstation or runner
+needs permission to push code, releases, and container packages to
-permission to push code, releases, and container packages.
+`zemion/toolbox-portal`.
 
 1. Run `npm ci`, `npm test`, `npm run lint`, and `npm run build` from a clean
    checkout of the intended portal tag.
@@ -243,11 +245,11 @@ permission to push code, releases, and container packages.
 3. Verify downloaded app assets with `sha256sum -c <asset>.sha256`; copy those
    exact values into a reviewed toolbox lock.
 4. Run the assembler and serve `build/toolbox` from a nested test path. Open
-   all three apps, switch between them, and confirm the encoded `toolbox`
+   all four apps, switch between them, and confirm the encoded `toolbox`
    context.
 5. Verify the distribution with
-   `(cd build && sha256sum -c add-ideas-toolbox-0.4.2.zip.sha256)`.
+   `(cd build && sha256sum -c add-ideas-toolbox-0.5.0.zip.sha256)`.
-6. Commit the reviewed lock, tag the toolbox release (for example `v0.4.2`), and
+6. Commit the reviewed lock, tag the toolbox release (for example `v0.5.0`), and
    push the branch and tag to Gitea.
 7. In Gitea, open **Releases → New release**, select the tag, and upload the
    static ZIP plus its `.sha256` file. Do not use a mutable “latest” URL in a
@@ -263,59 +265,66 @@ must not re-resolve app versions or substitute a newer release.
 ## Existing tools
 
 | Tool                | State and boundary                                        | Principal workflows                                                    | Important concrete scope                                                                                                                                               | Critical considerations and integrations                                                                                                                                                       |
-| ------------------- | -------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`pdf-tools`**     | Existing; dedicated repository                            | Merge, split, reorder, rotate and export PDF pages                     | Thumbnail workspace; multi-document operations; ZIP and PDF output; saved local workspace                                                                              | Workers and IndexedDB; large-document memory control; future signature inspection through `crypto-tools`; metadata and safe-sharing through `privacy-tools`                                    |
 | **`xslt-tools`**    | Existing; dedicated repository                            | Develop, test and run XSLT transformations                             | XML/XSLT editors; transformation results; local files; saved projects; validation and diagnostics                                                                      | Lazy SaxonJS loading; relocatable assets; useful handoffs to `data-tools`, `schema-tools` and `diff-tools`                                                                                     |
 | **`onenote-tools`** | Existing rich-reader release; dedicated repository        | Open, browse, inspect and export OneNote sections and packages locally | Desktop/unfragmented FSSHTTPB `.one`/`.onetoc2`; none/LZX/MSZIP/Quantum and multi-cabinet `.onepkg`; trees, rich text, images, tables, ink, attachments and export     | Native TypeScript worker with no Wasm; bounded parsing, rendering and export; fragmented FSSHTTP fails safely; no editing or pixel-perfect fidelity                                            |
+| **`av-tools`**      | Existing local-first v0.1.0 release; dedicated repository | Convert and lightly edit audio and video locally in the browser        | Quick conversion; trim, split and concatenate; crop, resize, normalize, fades, waveform, metadata, chapters, subtitles, thumbnails, contact sheets, presets and export | Self-hosted ffmpeg.wasm 0.12.10 ST/MT cores; bounded queue, temporary storage and resource policy; isolation enables MT with automatic ST fallback; semver-versioned core assets are immutable |
 
 ## Planned tools
 
 | Tool                 | State and boundary                            | Principal workflows                                                                                                                                                      | Important concrete scope                                                                                                                                                       | Critical considerations and integrations                                                                                                                                                                          |
-| -------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`svg-tools`**      | Planned; dedicated repository                                | Source and visual SVG editing                                                                                                                                                             | Synchronized DOM tree, code and canvas; optimization; path simplification; symbols; accessibility; animation; sanitization                                                        | SVG is potentially active content; previews require sanitization or sandboxing; integrate with `colour-tools`, `token-tools`, `image-tools` and `label-tools`                                                     |
-| **`regex-tools`**    | Planned; dedicated repository                                | Develop, test and apply regular expressions                                                                                                                                               | Corpus mode; replacement preview; capture table; flavour comparison; performance visualization; generated test cases; failing-input minimization                                  | Never claim exact equivalence across regex engines without qualification; bound execution; integrate with `text-tools`, `log-tools` and `minimize-tools`                                                          |
-| **`colour-tools`**   | Planned; small-to-medium dedicated repository                | Colour conversion, calculation and palette work                                                                                                                                           | sRGB, Display P3, Lab, LCH, OKLab and OKLCH; gamut mapping; contrast; colour-vision simulation; gradients; palette extraction; design-token export                                | Make colour-space assumptions explicit; distinguish mathematical conversion from display simulation; integrate with SVG, image and token tools                                                                    |
-| **`rand-tools`**     | Planned; small dedicated repository                          | Generate random numbers, strings, identifiers and samples                                                                                                                                 | Cryptographically secure generation; deterministic seeded generation; UUIDs, ULIDs, passphrases, dice notation, distributions, weighted selection and shuffling                   | Clearly separate secure randomness from reproducible pseudorandomness; no misleading “strength” claims; natural foundation for `fixture-tools`                                                                    |
-| **`barcode-tools`**  | Planned; dedicated repository                                | Generate, inspect and decode QR and barcodes                                                                                                                                              | QR, common one- and two-dimensional codes; camera/image decoding; GS1 assistance; CSV batch generation; quiet-zone and print-size checks; structured payload builders             | Treat decoded payloads as untrusted; never open links automatically; camera permission must be optional; integrate with `label-tools`, `contact-tools` and `crypto-tools`                                         |
-| **`av-tools`**       | Planned; large dedicated repository                          | Light audio and video editing and transcoding                                                                                                                                             | Trim, split, concatenate, crop, resize, normalize, fades, waveform, metadata, chapters, subtitles, thumbnail/contact-sheet generation and export presets                          | Heavy WASM and worker workloads; temporary-file storage; configurable memory limits; possibly special cross-origin-isolation headers; integrate with `subtitle-tools` and `image-tools`                           |
-| **`crypto-tools`**   | Planned; dedicated repository                                | Inspect keys, certificates and signatures; validate chains                                                                                                                                | X.509 PEM/DER, CSR, CRL, PKCS #8, encrypted PKCS #8, PKCS #12/PFX, JWK/JWKS; key/certificate matching; path construction; hostname, purpose and time checks; CMS/JWS later        | Inspection-first; explicit trust anchors; no implication that browser/OS trust stores are used; no private-key persistence; offline revocation first; network checks opt-in; restrictive CSP and worker isolation |
-| **`data-tools`**     | High priority; dedicated repository                          | Inspect, edit, validate, query and convert structured data                                                                                                                                | JSON, YAML, TOML, XML, CSV and NDJSON; tree/table/source views; schema inference; flattening; filtering; field mapping; JSONPath-style queries; conversion recipes                | Every conversion should disclose information loss, coercion and round-trip instability; XML-specialist workflows hand off to `xslt-tools`                                                                         |
-| **`image-tools`**    | High priority; dedicated repository                          | Edit and batch-process raster images                                                                                                                                                      | Crop, resize, rotate, compress, convert, contact sheets, sprites, responsive sets, favicon generation, metadata removal and visual quality comparison                             | Use workers and off-main-thread rendering; preserve or deliberately remove colour profiles; integrate with colour, SVG, PDF and privacy tools                                                                     |
-| **`diff-tools`**     | High priority; dedicated repository or shared engine plus UI | Compare documents and files semantically                                                                                                                                                  | Text; JSON object-aware comparison; XML normalization; CSV keyed comparison; images with overlay/heatmap; archives and directories; PDF pages; optional audio waveform comparison | Normalization and ignored properties must be visible; produce portable reports and standard patch formats where possible                                                                                          |
-| **`file-tools`**     | High priority; dedicated repository                          | Identify, inspect and organize local files                                                                                                                                                | Magic-byte detection; hex view; decoded strings; checksums; directory manifests; split/join; duplicate detection; trailing-data detection; batch-rename preview                   | All inputs are untrusted; format inspectors require strict size and nesting limits; natural entry point to archive, privacy, crypto and package tools                                                             |
-| **`archive-tools`**  | Medium-to-high priority; dedicated repository                | Inspect, create, compare and extract archives                                                                                                                                             | ZIP, TAR, gzip and selected additional formats; selective extraction; content preview; deterministic archives; timestamp normalization; archive comparison                        | Expansion-ratio, entry-count and total-size limits; traversal-safe extraction; never execute extracted files                                                                                                      |
-| **`text-tools`**     | Medium priority; one app with deep-linked panels             | Transform and normalize plain text                                                                                                                                                        | Unicode normalization; line-ending conversion; encoding; sorting; deduplication; case changes; transliteration; escaping; column operations; transformation pipelines             | Preserve exact input/output visibility; warn about lossy encodings and Unicode confusables; integrate regex operations                                                                                            |
-| **`query-tools`**    | High-value but large; dedicated repository                   | Analyse local tabular and relational data with SQL                                                                                                                                        | CSV, JSON, NDJSON, Parquet and SQLite; schema inference; joins; aggregation; pivots; charts; export to common data formats                                                        | WASM memory and streaming; distinguish this analytical product from document-oriented `data-tools`; query work must remain local                                                                                  |
-| **`privacy-tools`**  | High priority; dedicated repository                          | Inspect and remove metadata before sharing                                                                                                                                                | EXIF and GPS; document author/comments; embedded thumbnails; PDF metadata and attachments; hidden package entries; AV tags; personal filenames; structured safe-sharing report    | Never promise absolute anonymity; explicitly state inspected, removed, preserved and unsupported structures; integrate with most file-oriented apps                                                               |
-| **`time-tools`**     | Medium priority; small dedicated app or helper family        | Work with dates, timestamps, time zones and recurrences                                                                                                                                   | Unix timestamps; date arithmetic; durations; ISO 8601; timezone comparison; cron; RRULE; ICS generation; business days; DST-transition visualization                              | Visualize actual recurrence instances and ambiguous/skipped local times; do not rely on simplified fixed-offset calculations                                                                                      |
-| **`subtitle-tools`** | Medium priority; dedicated repository                        | Edit, validate and synchronize captions                                                                                                                                                   | SRT, WebVTT and ASS; timing shifts; stretching; frame-rate conversion; overlap and reading-speed checks; waveform synchronization; revision comparison                            | Direct integration with `av-tools`; preserve style information when supported and disclose conversion losses                                                                                                      |
-| **`font-tools`**     | Medium priority; dedicated repository                        | Inspect, preview and prepare fonts                                                                                                                                                        | Glyph coverage; variable axes; metadata; fallback comparison; subsetting; CSS generation; arbitrary-text previews                                                                 | Font licensing and embedding restrictions must be visible; use untrusted-font isolation and strict parser limits                                                                                                  |
-| **`label-tools`**    | Medium priority; dedicated repository                        | Generate labels and badges from templates and data                                                                                                                                        | CSV/JSON merge into SVG templates; QR/barcode fields; serial numbers; A4 label sheets; badges; asset tags; cut marks; calibration                                                 | Strong suite demonstration linking data, SVG, barcode, random and PDF capabilities; print dimensions must be explicit and testable                                                                                |
 | **`flow-tools`**     | Later platform layer                          | Compose local processing operations across tools                                                                                                                         | Example: CSV → filter → QR generation → SVG template → PDF → ZIP; reusable recipes; typed inputs and outputs; progress and cancellation                                        | Do not load complete React applications into one runtime; expose separate worker-safe operation packages only after several apps have stable operations                                                           |
+| **`file-tools`**     | High priority; dedicated repository           | Identify, inspect and organize local files                                                                                                                               | Magic-byte detection; hex view; decoded strings; checksums; directory manifests; split/join; duplicate detection; trailing-data detection; batch-rename preview                | All inputs are untrusted; format inspectors require strict size and nesting limits; natural entry point to archive, privacy, crypto and package tools                                                             |
+| **`svg-tools`**      | Planned; dedicated repository                 | Source and visual SVG editing                                                                                                                                            | Synchronized DOM tree, code and canvas; optimization; path simplification; symbols; accessibility; animation; sanitization                                                     | SVG is potentially active content; previews require sanitization or sandboxing; integrate with `colour-tools`, `token-tools`, `image-tools` and `label-tools`                                                     |
+| **`image-tools`**    | High priority; dedicated repository           | Edit and batch-process raster images                                                                                                                                     | Crop, resize, rotate, compress, convert, contact sheets, sprites, responsive sets, favicon generation, metadata removal and visual quality comparison                          | Use workers and off-main-thread rendering; preserve or deliberately remove colour profiles; integrate with colour, SVG, PDF and privacy tools                                                                     |
+| **`subtitle-tools`** | Medium priority; dedicated repository         | Edit, validate and synchronize captions                                                                                                                                  | SRT, WebVTT and ASS; timing shifts; stretching; frame-rate conversion; overlap and reading-speed checks; waveform synchronization; revision comparison                         | Direct integration with `av-tools`; preserve style information when supported and disclose conversion losses                                                                                                      |
+| **`midi-tools`**     | Medium specialist app                         | MIDI event inspection and editing; transpose, quantize, tempo maps and controller data; device access should remain optional                                             |                                                                                                                                                                                |
+| **`3d-tools`**       | Large specialist app                          | Inspect STL, OBJ and glTF; dimensions, bounding boxes, mesh simplification and common geometry defects; worker/GPU use and file limits                                   |                                                                                                                                                                                |
+| **`query-tools`**    | High-value but large; dedicated repository    | Analyse local tabular and relational data with SQL                                                                                                                       | CSV, JSON, NDJSON, Parquet and SQLite; schema inference; joins; aggregation; pivots; charts; export to common data formats                                                     | WASM memory and streaming; distinguish this analytical product from document-oriented `data-tools`; query work must remain local                                                                                  |
+| **`regex-tools`**    | Planned; dedicated repository                 | Develop, test and apply regular expressions                                                                                                                              | Corpus mode; replacement preview; capture table; flavour comparison; performance visualization; generated test cases; failing-input minimization                               | Never claim exact equivalence across regex engines without qualification; bound execution; integrate with `text-tools`, `log-tools` and `minimize-tools`                                                          |
+| **`epub-tools`**     | Medium app                                    | EPUB inspection, metadata and cover editing, link validation, chapter extraction and structural repair; sanitize embedded HTML and SVG                                   |                                                                                                                                                                                |
+| **`scan-tools`**     | Large app                                     | Camera/document correction; crop, deskew and threshold; page assembly; local OCR; PDF output; model downloads and memory use must be explicit                            |                                                                                                                                                                                |
+| **`office-tools`**   | Medium-to-large app                           | Inspect rather than reproduce an office suite: package structure, relationships, metadata, comments, embedded images and basic repairs                                   |                                                                                                                                                                                |
+| **`package-tools`**  | Medium priority                               | Inspect compound and package-based formats                                                                                                                               | EPUB; DOCX/XLSX/PPTX; ODF; JAR; APK; browser extensions; package trees; manifests; relationships; embedded media; signatures; orphaned parts                                   | Generic container inspector with format adapters; complements rather than replaces `onenote-tools`, `epub-tools` and `office-tools`                                                                               |
+| **`archive-tools`**  | Medium-to-high priority; dedicated repository | Inspect, create, compare and extract archives                                                                                                                            | ZIP, TAR, gzip and selected additional formats; selective extraction; content preview; deterministic archives; timestamp normalization; archive comparison                     | Expansion-ratio, entry-count and total-size limits; traversal-safe extraction; never execute extracted files                                                                                                      |
+| **`privacy-tools`**  | High priority; dedicated repository           | Inspect and remove metadata before sharing                                                                                                                               | EXIF and GPS; document author/comments; embedded thumbnails; PDF metadata and attachments; hidden package entries; AV tags; personal filenames; structured safe-sharing report | Never promise absolute anonymity; explicitly state inspected, removed, preserved and unsupported structures; integrate with most file-oriented apps                                                               |
+| **`crypto-tools`**   | Planned; dedicated repository                 | Inspect keys, certificates and signatures; validate chains                                                                                                               | X.509 PEM/DER, CSR, CRL, PKCS #8, encrypted PKCS #8, PKCS #12/PFX, JWK/JWKS; key/certificate matching; path construction; hostname, purpose and time checks; CMS/JWS later     | Inspection-first; explicit trust anchors; no implication that browser/OS trust stores are used; no private-key persistence; offline revocation first; network checks opt-in; restrictive CSP and worker isolation |
+| **`barcode-tools`**  | Planned; dedicated repository                 | Generate, inspect and decode QR and barcodes                                                                                                                             | QR, common one- and two-dimensional codes; camera/image decoding; GS1 assistance; CSV batch generation; quiet-zone and print-size checks; structured payload builders          | Treat decoded payloads as untrusted; never open links automatically; camera permission must be optional; integrate with `label-tools`, `contact-tools` and `crypto-tools`                                         |
+| **`label-tools`**    | Medium priority; dedicated repository         | Generate labels and badges from templates and data                                                                                                                       | CSV/JSON merge into SVG templates; QR/barcode fields; serial numbers; A4 label sheets; badges; asset tags; cut marks; calibration                                              | Strong suite demonstration linking data, SVG, barcode, random and PDF capabilities; print dimensions must be explicit and testable                                                                                |
+| **`font-tools`**     | Medium priority; dedicated repository         | Inspect, preview and prepare fonts                                                                                                                                       | Glyph coverage; variable axes; metadata; fallback comparison; subsetting; CSS generation; arbitrary-text previews                                                              | Font licensing and embedding restrictions must be visible; use untrusted-font isolation and strict parser limits                                                                                                  |
 | **`fixture-tools`**  | Medium priority                               | Generate deterministic test data                                                                                                                                         | JSON Schema, XSD, SQL DDL, CSV headings or interactive models to JSON, CSV, XML, SQL and NDJSON; foreign keys; distributions; boundary and invalid cases                       | Seeded reproducibility; uniqueness constraints; privacy-safe synthetic data; natural extension of `rand-tools`                                                                                                    |
 | **`minimize-tools`** | Distinctive specialist tool                   | Reduce a failing input while preserving a failure                                                                                                                        | Minimize XML triggering an XSLT error; shortest regex pathological input; smallest JSON schema failure; selectable failure predicates                                          | Expensive repeated execution must be bounded and cancellable; record the exact predicate and transformation versions                                                                                              |
 | **`format-lab`**     | Later, distinctive product                    | Explore conversion paths and information loss                                                                                                                            | Format graph; round-trip tests; property preservation; type coercion; metadata loss; recommended path selection across data, image, AV and subtitle formats                    | No conversion should be described as lossless without testing relevant properties                                                                                                                                 |
 | **`repro-tools`**    | Medium-to-later                               | Create manifests and provenance records                                                                                                                                  | File hashes; directory manifests; operation history; tool/version/parameter records; deterministic package creation; verification reports                                      | Useful foundation for reproducible workflows and signed manifests; integrates with crypto, archive and flow tools                                                                                                 |
-| **`package-tools`**  | Medium priority                                              | Inspect compound and package-based formats                                                                                                                                                | EPUB; DOCX/XLSX/PPTX; ODF; JAR; APK; browser extensions; package trees; manifests; relationships; embedded media; signatures; orphaned parts                                      | Generic container inspector with format adapters; complements rather than replaces `onenote-tools`, `epub-tools` and `office-tools`                                                                               |
 | **`schema-tools`**   | Dedicated specialist app                      | Validate, inspect and generate examples for JSON Schema, XSD, Relax NG, Schematron and OpenAPI; visualize references and incompatibilities                               |                                                                                                                                                                                |
 | **`log-tools`**      | Dedicated app                                 | Stream and filter large logs; parse common formats; correlate records; build timelines; extract fields; anonymize values; avoid loading the complete file into memory    |                                                                                                                                                                                |
 | **`network-tools`**  | Helper family or small app                    | IPv4/IPv6 subnetting; CIDR ranges; URL and query parsing; DNS-record construction; HTTP headers; CSP generation; MIME lookup; avoid turning it into an intrusive scanner |                                                                                                                                                                                |
 | **`binary-tools`**   | Dedicated specialist app                      | Base64, hexadecimal, CBOR, MessagePack, ASN.1 and Protocol Buffers; schema-assisted decoding; byte-range highlighting; strict depth and size limits                      |                                                                                                                                                                                |
 | **`git-tools`**      | Small-to-medium app                           | Patch inspection and editing; `.gitignore` testing; semantic-version comparison; conventional commits; changelog normalization; no repository-hosting dependency         |                                                                                                                                                                                |
 | **`api-tools`**      | Medium app                                    | OpenAPI validation; request and response examples; curl and client-command generation; saved HTTP-exchange inspection; direct browser requests remain subject to CORS    |                                                                                                                                                                                |
+| **`mail-tools`**     | Medium app                                    | EML and MIME inspection; header analysis; attachment extraction; body-part comparison; HTML mail must be heavily sandboxed                                               |                                                                                                                                                                                |
 | **`calendar-tools`** | Small-to-medium app                           | ICS inspection, merging, deduplication, repair, recurrence visualization and timezone diagnostics                                                                        |                                                                                                                                                                                |
 | **`contact-tools`**  | Small-to-medium app                           | vCard inspection and editing; CSV mapping; deduplication; contact QR generation; treat all contact data as sensitive                                                     |                                                                                                                                                                                |
-| **`mail-tools`**     | Medium app                                                   | EML and MIME inspection; header analysis; attachment extraction; body-part comparison; HTML mail must be heavily sandboxed                                                                |                                                                                                                                                                                   |
-| **`epub-tools`**     | Medium app                                                   | EPUB inspection, metadata and cover editing, link validation, chapter extraction and structural repair; sanitize embedded HTML and SVG                                                    |                                                                                                                                                                                   |
-| **`scan-tools`**     | Large app                                                    | Camera/document correction; crop, deskew and threshold; page assembly; local OCR; PDF output; model downloads and memory use must be explicit                                             |                                                                                                                                                                                   |
-| **`office-tools`**   | Medium-to-large app                                          | Inspect rather than reproduce an office suite: package structure, relationships, metadata, comments, embedded images and basic repairs                                                    |                                                                                                                                                                                   |
 | **`geo-tools`**      | Medium app                                    | GeoJSON, GPX, KML and coordinate CSV; format conversion; track simplification; distance/elevation analysis; coordinate-reference assumptions must be explicit            |                                                                                                                                                                                |
 | **`diagram-tools`**  | Medium app                                    | Code and visual editing for Mermaid, Graphviz and related representations; renderers require sanitization and sandboxing                                                 |                                                                                                                                                                                |
 | **`token-tools`**    | Small-to-medium app                           | Design-token editing and conversion between JSON, CSS custom properties, Sass, Android and iOS forms; integrate with colour and SVG tools                                |                                                                                                                                                                                |
-| **`3d-tools`**       | Large specialist app                                         | Inspect STL, OBJ and glTF; dimensions, bounding boxes, mesh simplification and common geometry defects; worker/GPU use and file limits                                                    |                                                                                                                                                                                   |
-| **`midi-tools`**     | Medium specialist app                                        | MIDI event inspection and editing; transpose, quantize, tempo maps and controller data; device access should remain optional                                                              |                                                                                                                                                                                   |
 | **`device-tools`**   | Specialist app                                | Serial terminal, sensor logger, microcontroller console and controlled firmware installation; explicit permission and browser-capability checks                          |                                                                                                                                                                                |
+
+## Planned helpers
+
+Helpers export funcionality for other tools to use. They may also present a tool surface to be used directly
+
+| Tool                | State and boundary                                           | Principal workflows                                                                                                                                                                       | Important concrete scope                                                                                                                                                          | Critical considerations and integrations                                                                                                       |
+| ------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`helpers-tools`** | One shared artifact with deep links                          | Stateless Base64, URL encoding, case conversion, number bases, Unicode code points, unit conversion, small checksums, subnet and timestamp calculators; avoid a repository per calculator |                                                                                                                                                                                   |
+| **`colour-tools`**  | Planned; small-to-medium dedicated repository                | Colour conversion, calculation and palette work                                                                                                                                           | sRGB, Display P3, Lab, LCH, OKLab and OKLCH; gamut mapping; contrast; colour-vision simulation; gradients; palette extraction; design-token export                                | Make colour-space assumptions explicit; distinguish mathematical conversion from display simulation; integrate with SVG, image and token tools |
+| **`rand-tools`**    | Planned; small dedicated repository                          | Generate random numbers, strings, identifiers and samples                                                                                                                                 | Cryptographically secure generation; deterministic seeded generation; UUIDs, ULIDs, passphrases, dice notation, distributions, weighted selection and shuffling                   | Clearly separate secure randomness from reproducible pseudorandomness; no misleading “strength” claims; natural foundation for `fixture-tools` |
+| **`data-tools`**    | High priority; dedicated repository                          | Inspect, edit, validate, query and convert structured data                                                                                                                                | JSON, YAML, TOML, XML, CSV and NDJSON; tree/table/source views; schema inference; flattening; filtering; field mapping; JSONPath-style queries; conversion recipes                | Every conversion should disclose information loss, coercion and round-trip instability; XML-specialist workflows hand off to `xslt-tools`      |
+| **`diff-tools`**    | High priority; dedicated repository or shared engine plus UI | Compare documents and files semantically                                                                                                                                                  | Text; JSON object-aware comparison; XML normalization; CSV keyed comparison; images with overlay/heatmap; archives and directories; PDF pages; optional audio waveform comparison | Normalization and ignored properties must be visible; produce portable reports and standard patch formats where possible                       |
+| **`text-tools`**    | Medium priority; one app with deep-linked panels             | Transform and normalize plain text                                                                                                                                                        | Unicode normalization; line-ending conversion; encoding; sorting; deduplication; case changes; transliteration; escaping; column operations; transformation pipelines             | Preserve exact input/output visibility; warn about lossy encodings and Unicode confusables; integrate regex operations                         |
+| **`time-tools`**    | Medium priority; small dedicated app or helper family        | Work with dates, timestamps, time zones and recurrences                                                                                                                                   | Unix timestamps; date arithmetic; durations; ISO 8601; timezone comparison; cron; RRULE; ICS generation; business days; DST-transition visualization                              | Visualize actual recurrence instances and ambiguous/skipped local times; do not rely on simplified fixed-offset calculations                   |
 
 ## Licensing
 

compose.example.yaml

@@ -3,7 +3,7 @@ services:
     build:
       context: .
       dockerfile: Containerfile
-    image: git.add-ideas.de/zemion/toolbox:0.4.2
+    image: git.add-ideas.de/zemion/toolbox:0.5.0
     restart: unless-stopped
     read_only: true
     ports:

compose.yaml

@@ -6,9 +6,9 @@ services:
       context: .
       dockerfile: Containerfile.release
       args:
-        TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.4.2}"
+        TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.5.0}"
-        TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-20c1eacbcf03a9c8f0beeb53d2326a963e54dd9ca93e4f0118f95f10aec45389}"
+        TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-375eccf44d8294839ae71f5fd54677f7771e7d865a23d447aebab7aeb40020a1}"
-    image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.4.2}"
+    image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.5.0}"
     restart: unless-stopped
     read_only: true
     tmpfs:

deploy/nginx.conf

@@ -1,6 +1,7 @@
 map $uri $toolbox_cache_control {
   default "no-cache";
   "~^/(?:.*/)?assets/.*-[A-Za-z0-9_-]{8,}\.[^/]+$" "public, max-age=31536000, immutable";
+  "~^/apps/[a-z0-9][a-z0-9-]*/vendor/ffmpeg/(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)/(?:version\.json|(?:st|mt)/ffmpeg-core\.(?:js|wasm)|mt/ffmpeg-core\.worker\.js)$" "public, max-age=31536000, immutable";
 }
 
 server {
@@ -20,7 +21,7 @@ server {
   add_header Cross-Origin-Embedder-Policy "require-corp" always;
   add_header Cross-Origin-Resource-Policy "same-origin" always;
   add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=(), usb=()" always;
-  add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; worker-src 'self' blob:; manifest-src 'self'" always;
+  add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; form-action 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; media-src 'self' blob:; font-src 'self' data:; connect-src 'self'; worker-src 'self' blob:; manifest-src 'self'" always;
   add_header Cache-Control $toolbox_cache_control always;
 
   gzip on;
@@ -32,7 +33,14 @@ server {
     try_files $uri =404;
   }
 
-  location ~* \.(?:css|js|mjs|wasm|woff2?|png|jpe?g|gif|webp|svg|ico|webmanifest)$ {
+  location ~* \.wasm$ {
+    types {
+      application/wasm wasm;
+    }
+    try_files $uri =404;
+  }
+
+  location ~* \.(?:css|js|mjs|woff2?|png|jpe?g|gif|webp|svg|ico|webmanifest)$ {
     try_files $uri =404;
   }
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@add-ideas/toolbox-portal",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@add-ideas/toolbox-portal",
-      "version": "0.2.2",
+      "version": "0.2.4",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@add-ideas/toolbox-contract": "^0.2.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@add-ideas/toolbox-portal",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "license": "AGPL-3.0-only",
   "private": true,
   "type": "module",

public/SOURCE.md

@@ -1,8 +1,8 @@
 # Corresponding source
 
-The source code corresponding to add·ideas Toolbox Portal 0.2.2 is available at:
+The source code corresponding to add·ideas Toolbox Portal 0.2.4 is available at:
 
-https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.2
+https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.5.0
 
 Each bundled application contains its own `SOURCE.md`, license, and third-party
 license materials. The application sources are also linked from the portal.

public/toolbox.catalog.json

@@ -20,6 +20,10 @@
     {
       "manifest": "./apps/onenote/toolbox-app.json",
       "enabled": true
+    },
+    {
+      "manifest": "./apps/av/toolbox-app.json",
+      "enabled": true
     }
   ]
 }

release/toolbox.lock.example.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./toolbox-release-lock.schema.json",
   "schemaVersion": 1,
-  "releaseVersion": "0.4.2",
+  "releaseVersion": "0.5.0",
-  "portalVersion": "0.2.2",
+  "portalVersion": "0.2.4",
   "catalogue": {
     "id": "de.add-ideas.toolbox",
     "name": "add·ideas Toolbox",
@@ -15,9 +15,9 @@
   "apps": [
     {
       "id": "de.add-ideas.pdf-tools",
-      "version": "0.4.2",
+      "version": "0.4.3",
-      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.2/pdf-tools-0.4.2.zip",
+      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.3/pdf-tools-0.4.3.zip",
-      "sha256": "ebb6711e149a59abf51eddc0927debba9118205bde91faf7dded132478bc23d0",
+      "sha256": "f2dfd3bade49a4b8be9c0c54c6c2bf1bbb153fc0505a38af14de5ab52d5183cf",
       "target": "pdf"
     },
     {
@@ -29,10 +29,17 @@
     },
     {
       "id": "de.add-ideas.onenote-tools",
-      "version": "0.3.2",
+      "version": "0.3.3",
-      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.2/onenote-tools-0.3.2.zip",
+      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.3/onenote-tools-0.3.3.zip",
-      "sha256": "c07e6909ae57bd7681f26ec29c7a4e927b6919123ef9e28aa2d8c55b842b65d2",
+      "sha256": "37c0ef7cdc7f435d0d4f5a341523f4e522118d5b258c374b5a7ef7b8e6c27cec",
       "target": "onenote"
+    },
+    {
+      "id": "de.add-ideas.av-tools",
+      "version": "0.1.0",
+      "artifact": "https://git.add-ideas.de/zemion/av-tools/releases/download/v0.1.0/av-tools-0.1.0.zip",
+      "sha256": "a10889f80f8e30a71737125d8c05d3ff0264249726845700ab95bf37feb64595",
+      "target": "av"
     }
   ]
 }

release/toolbox.lock.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./toolbox-release-lock.schema.json",
   "schemaVersion": 1,
-  "releaseVersion": "0.4.2",
+  "releaseVersion": "0.5.0",
-  "portalVersion": "0.2.2",
+  "portalVersion": "0.2.4",
   "catalogue": {
     "id": "de.add-ideas.toolbox",
     "name": "add·ideas Toolbox",
@@ -15,9 +15,9 @@
   "apps": [
     {
       "id": "de.add-ideas.pdf-tools",
-      "version": "0.4.2",
+      "version": "0.4.3",
-      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.2/pdf-tools-0.4.2.zip",
+      "artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.3/pdf-tools-0.4.3.zip",
-      "sha256": "ebb6711e149a59abf51eddc0927debba9118205bde91faf7dded132478bc23d0",
+      "sha256": "f2dfd3bade49a4b8be9c0c54c6c2bf1bbb153fc0505a38af14de5ab52d5183cf",
       "target": "pdf"
     },
     {
@@ -29,10 +29,17 @@
     },
     {
       "id": "de.add-ideas.onenote-tools",
-      "version": "0.3.2",
+      "version": "0.3.3",
-      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.2/onenote-tools-0.3.2.zip",
+      "artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.3/onenote-tools-0.3.3.zip",
-      "sha256": "c07e6909ae57bd7681f26ec29c7a4e927b6919123ef9e28aa2d8c55b842b65d2",
+      "sha256": "37c0ef7cdc7f435d0d4f5a341523f4e522118d5b258c374b5a7ef7b8e6c27cec",
       "target": "onenote"
+    },
+    {
+      "id": "de.add-ideas.av-tools",
+      "version": "0.1.0",
+      "artifact": "https://git.add-ideas.de/zemion/av-tools/releases/download/v0.1.0/av-tools-0.1.0.zip",
+      "sha256": "a10889f80f8e30a71737125d8c05d3ff0264249726845700ab95bf37feb64595",
+      "target": "av"
     }
   ]
 }

scripts/assembler.test.ts

@@ -83,7 +83,7 @@ function makeLock(artifact: string, sha256: string) {
   return {
     schemaVersion: 1,
     releaseVersion: '0.1.0',
-    portalVersion: '0.2.2',
+    portalVersion: '0.2.4',
     catalogue: {
       id: 'de.add-ideas.toolbox',
       name: 'Test Toolbox',

scripts/deployment.test.ts

@@ -4,10 +4,18 @@ import { describe, expect, it } from 'vitest';
 
 const projectRoot = process.cwd();
 const compose = readFileSync(path.join(projectRoot, 'compose.yaml'), 'utf8');
+const composeExample = readFileSync(
+  path.join(projectRoot, 'compose.example.yaml'),
+  'utf8'
+);
 const containerfile = readFileSync(
   path.join(projectRoot, 'Containerfile.release'),
   'utf8'
 );
+const environmentExample = readFileSync(
+  path.join(projectRoot, '.env.example'),
+  'utf8'
+);
 const nginxConfig = readFileSync(
   path.join(projectRoot, 'deploy', 'nginx.conf'),
   'utf8'
@@ -16,6 +24,23 @@ const releaseLock = JSON.parse(
   readFileSync(path.join(projectRoot, 'release', 'toolbox.lock.json'), 'utf8')
 ) as { releaseVersion: string };
 
+const immutableCacheControl = 'public, max-age=31536000, immutable';
+const immutableUriPatterns = Array.from(
+  nginxConfig.matchAll(
+    new RegExp(
+      `^\\s*"~([^"]+)"\\s+"${immutableCacheControl.replaceAll(
+        ', ',
+        ',\\s+'
+      )}";$`,
+      'gmu'
+    )
+  ),
+  (match) => new RegExp(match[1], 'u')
+);
+
+const isImmutable = (uri: string): boolean =>
+  immutableUriPatterns.some((pattern) => pattern.test(uri));
+
 describe('production deployment', () => {
   it('keeps the release version and checksum pins synchronized', () => {
     const containerVersion = containerfile.match(
@@ -30,10 +55,22 @@ describe('production deployment', () => {
     const composeChecksum = compose.match(
       /\$\{TOOLBOX_RELEASE_SHA256:-([a-f0-9]{64})\}/u
     )?.[1];
+    const environmentVersion = environmentExample.match(
+      /^TOOLBOX_RELEASE_VERSION=(\S+)$/mu
+    )?.[1];
+    const environmentChecksum = environmentExample.match(
+      /^TOOLBOX_RELEASE_SHA256=([a-f0-9]{64})$/mu
+    )?.[1];
+    const localImageVersion = composeExample.match(
+      /^\s+image: git\.add-ideas\.de\/zemion\/toolbox:(\S+)$/mu
+    )?.[1];
 
     expect(containerVersion).toBe(releaseLock.releaseVersion);
     expect(composeVersion).toBe(containerVersion);
     expect(composeChecksum).toBe(containerChecksum);
+    expect(environmentVersion).toBe(containerVersion);
+    expect(environmentChecksum).toBe(containerChecksum);
+    expect(localImageVersion).toBe(containerVersion);
   });
 
   it('verifies the release before extraction and retains a rootless final image', () => {
@@ -45,6 +82,11 @@ describe('production deployment', () => {
     expect(containerfile).toContain(
       'COPY --from=release --chown=101:101 /tmp/toolbox/'
     );
+    for (const app of ['pdf', 'xslt', 'onenote', 'av']) {
+      expect(containerfile).toContain(
+        `test -f /tmp/toolbox/apps/${app}/toolbox-app.json`
+      );
+    }
     expect(containerfile).toMatch(/\nUSER 101:101\nEXPOSE 8080\n/u);
   });
 
@@ -73,4 +115,56 @@ describe('production deployment', () => {
     );
     expect(nginxConfig).not.toMatch(/^\s*~[^\n]*\{\d/mu);
   });
+
+  it('caches only hashed assets and the versioned FFmpeg runtime immutably', () => {
+    expect(immutableUriPatterns).toHaveLength(2);
+
+    for (const uri of [
+      '/assets/index-Bp9nK_3a.js',
+      '/apps/av/vendor/ffmpeg/0.12.10/version.json',
+      '/apps/av/vendor/ffmpeg/0.12.10/st/ffmpeg-core.js',
+      '/apps/av/vendor/ffmpeg/0.12.10/st/ffmpeg-core.wasm',
+      '/apps/av/vendor/ffmpeg/0.12.10/mt/ffmpeg-core.js',
+      '/apps/av/vendor/ffmpeg/0.12.10/mt/ffmpeg-core.wasm',
+      '/apps/av/vendor/ffmpeg/0.12.10/mt/ffmpeg-core.worker.js',
+    ]) {
+      expect(isImmutable(uri), uri).toBe(true);
+    }
+
+    for (const uri of [
+      '/',
+      '/index.html',
+      '/SOURCE.md',
+      '/LICENSE',
+      '/toolbox.catalog.json',
+      '/toolbox.release.json',
+      '/apps/av/toolbox-app.json',
+      '/apps/av/THIRD_PARTY_NOTICES.md',
+      '/apps/av/vendor/ffmpeg/version.json',
+      '/apps/av/vendor/ffmpeg/latest/st/ffmpeg-core.wasm',
+      '/apps/av/vendor/ffmpeg/0.12/st/ffmpeg-core.wasm',
+      '/apps/av/vendor/ffmpeg/01.2.3/st/ffmpeg-core.wasm',
+      '/apps/av/vendor/ffmpeg/0.12.10/st/other.wasm',
+      '/apps/av/vendor/ffmpeg/0.12.10/mt/ffmpeg-core.worker.wasm',
+      '/apps/av/vendor/ffmpeg/0.12.10/ffmpeg-core.wasm',
+    ]) {
+      expect(isImmutable(uri), uri).toBe(false);
+    }
+  });
+
+  it('serves WebAssembly through an explicit MIME-mapped location', () => {
+    expect(nginxConfig).toMatch(
+      /location ~\* \\\.wasm\$\s*\{\s*types\s*\{\s*application\/wasm wasm;\s*\}\s*try_files \$uri =404;\s*\}/mu
+    );
+    expect(nginxConfig).not.toMatch(
+      /location ~\* [^\n]*\(\?:[^\n|)]*\bwasm\b[^\n)]*\)/u
+    );
+  });
+
+  it('allows same-origin WebAssembly workers and local blob media previews', () => {
+    expect(nginxConfig).toContain("script-src 'self' 'wasm-unsafe-eval'");
+    expect(nginxConfig).toContain("worker-src 'self' blob:");
+    expect(nginxConfig).toContain("media-src 'self' blob:");
+    expect(nginxConfig).not.toContain("'unsafe-eval'");
+  });
 });

src/App.test.tsx

@@ -13,35 +13,48 @@ import { catalogue, catalogueFetch } from './test/fixtures';
 
 afterEach(() => vi.unstubAllGlobals());
 
+function toolLink(name: string) {
+  return screen.getByRole('link', { name: `Open ${name}` });
+}
+
+function queryToolLink(name: string) {
+  return screen.queryByRole('link', { name: `Open ${name}` });
+}
+
+function findToolLink(name = 'PDF Workbench') {
+  return screen.findByRole('link', { name: `Open ${name}` });
+}
+
 describe('portal UI', () => {
-  it('renders app cards and persists accessible pin/hide controls', async () => {
+  it('renders compact actionable tiles and persists pin/hide controls', async () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     render(<App />);
+    const launch = await findToolLink();
+    const card = screen.getByTestId('app-card-de.add-ideas.pdf-tools');
+    expect(within(card).getByRole('heading', { level: 3 })).toHaveTextContent(
+      'PDF'
+    );
+    expect(within(card).getByText('Arrange PDF pages locally.')).toBeVisible();
     expect(
-      await screen.findByRole('heading', { name: 'PDF Workbench' })
+      screen.getByTestId('app-card-de.add-ideas.xslt-tools')
-    ).toBeInTheDocument();
+    ).toHaveTextContent('XSLT');
     expect(
-      screen.getAllByText(
+      screen.getByTestId('app-card-de.add-ideas.onenote-tools')
+    ).toHaveTextContent('OneNote');
+    expect(
+      screen.queryByText(
+        'Page-level PDF operations performed locally in the browser.'
+      )
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
         'Local processing · no file uploads declared · no telemetry declared'
       )
-    ).toHaveLength(3);
+    ).not.toBeInTheDocument();
-    const sourceLinks = screen.getAllByRole('link', {
-      name: 'Source and license',
-    });
-    expect(sourceLinks).toHaveLength(4);
     expect(
-      sourceLinks.find(
+      screen.getAllByRole('link', { name: 'Source and license' })
-        (link) =>
+    ).toHaveLength(1);
-          link.getAttribute('href') ===
-          'https://git.add-ideas.de/zemion/pdf-tools'
-      )
-    ).toHaveAttribute('rel', 'noopener noreferrer');
-    expect(
-      sourceLinks.find((link) =>
-        link.getAttribute('href')?.endsWith('/toolbox-portal/src/tag/v0.4.2')
-      )
-    ).toBeDefined();
     expect(
       screen.queryByRole('region', { name: 'Pinned' })
     ).not.toBeInTheDocument();
@@ -50,12 +63,20 @@ describe('portal UI', () => {
     });
     expect(showHidden).toBeDisabled();
     expect(showHidden).not.toBeChecked();
-    const launch = screen
+    expect(launch).toHaveClass('app-card__launch-link');
-      .getAllByRole('link', { name: 'PDF Workbench' })
-      .find((link) => link.classList.contains('app-card__launch-link'))!;
     expect(
       new URL(launch.getAttribute('href')!).searchParams.get('toolbox')
     ).toContain('toolbox.catalog.json');
+    const actions = within(card).getByRole('group', {
+      name: 'Actions for PDF Workbench',
+    });
+    const info = within(actions).getByRole('button', {
+      name: 'More information about PDF Workbench',
+    });
+    expect(info).toHaveAttribute('aria-haspopup', 'dialog');
+    for (const control of within(actions).getAllByRole('button'))
+      expect(control.closest('a')).toBeNull();
+    expect(launch).not.toContainElement(info);
 
     await user.click(screen.getByRole('button', { name: 'Pin PDF Workbench' }));
     await waitFor(() =>
@@ -69,6 +90,12 @@ describe('portal UI', () => {
     expect(
       screen.queryByRole('button', { name: /Move PDF Workbench/i })
     ).not.toBeInTheDocument();
+    const unpin = screen.getByRole('button', {
+      name: 'Unpin PDF Workbench',
+    });
+    expect(unpin).toHaveAttribute('aria-pressed', 'true');
+    expect(unpin).toHaveClass('is-active');
+    await waitFor(() => expect(unpin).toHaveFocus());
     expect(
       screen.getByRole('button', { name: 'Reorder PDF Workbench' })
     ).toBeInTheDocument();
@@ -76,27 +103,92 @@ describe('portal UI', () => {
     await user.click(
       screen.getByRole('button', { name: 'Hide PDF Workbench' })
     );
-    expect(
+    expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
-      screen.queryByRole('heading', { name: 'PDF Workbench' })
-    ).not.toBeInTheDocument();
     expect(showHidden).toBeEnabled();
     expect(showHidden).toHaveAccessibleName('Show hidden (1)');
+    await waitFor(() => expect(showHidden).toHaveFocus());
     fireEvent.click(showHidden);
-    expect(
+    expect(toolLink('PDF Workbench')).toBeInTheDocument();
-      screen.getByRole('heading', { name: 'PDF Workbench' })
-    ).toBeInTheDocument();
     await user.click(
       screen.getByRole('button', { name: 'Show PDF Workbench' })
     );
     expect(showHidden).toBeDisabled();
     expect(showHidden).not.toBeChecked();
+    await waitFor(() =>
+      expect(
+        screen.getByRole('button', { name: 'Hide PDF Workbench' })
+      ).toHaveFocus()
+    );
+  });
+
+  it('moves the full disclosure into an accessible modal', async () => {
+    vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
+    const user = userEvent.setup();
+    const { container } = render(<App />);
+    await findToolLink();
+    const info = screen.getByRole('button', {
+      name: 'More information about PDF Workbench',
+    });
+
+    await user.click(info);
+    const dialog = screen.getByRole('dialog', { name: 'PDF Workbench' });
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+    expect(dialog).toHaveTextContent(
+      'Page-level PDF operations performed locally in the browser.'
+    );
+    expect(dialog).toHaveTextContent(
+      'Local processing · no file uploads declared · no telemetry declared'
+    );
+    expect(dialog).toHaveTextContent(
+      'Needs Secure context · Web workers · IndexedDB'
+    );
+    expect(dialog).toHaveTextContent('v0.4.3');
+    expect(
+      within(dialog).getByRole('button', { name: 'documents' })
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole('button', { name: '#merge' })
+    ).toBeInTheDocument();
+    const sourceLink = within(dialog).getByRole('link', {
+      name: 'Source and license',
+    });
+    expect(sourceLink).toHaveAttribute(
+      'href',
+      'https://git.add-ideas.de/zemion/pdf-tools'
+    );
+    expect(sourceLink).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(
+      within(dialog).getByRole('link', { name: 'Open PDF' })
+    ).toBeInTheDocument();
+    expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
+    expect(container.querySelector('.site-shell')).toHaveAttribute(
+      'aria-hidden',
+      'true'
+    );
+    expect(document.documentElement).toHaveStyle({ overflow: 'hidden' });
+
+    const close = within(dialog).getByRole('button', {
+      name: 'Close information for PDF Workbench',
+    });
+    expect(close).toHaveFocus();
+    within(dialog).getByRole('link', { name: 'Open PDF' }).focus();
+    await user.tab();
+    expect(close).toHaveFocus();
+
+    await user.keyboard('{Escape}');
+    expect(
+      screen.queryByRole('dialog', { name: 'PDF Workbench' })
+    ).not.toBeInTheDocument();
+    expect(info).toHaveFocus();
+    expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
+    expect(document.documentElement).not.toHaveStyle({ overflow: 'hidden' });
   });
 
   it('keeps search and category controls together and filters with each', async () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
 
     const search = screen.getByRole('searchbox', { name: 'Search tools' });
     const category = screen.getByRole('combobox', {
@@ -107,28 +199,37 @@ describe('portal UI', () => {
     );
 
     await user.type(search, 'xslt');
-    expect(
+    expect(toolLink('XSLT Workbench')).toBeInTheDocument();
-      screen.getByRole('heading', { name: 'XSLT Workbench' })
+    expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByRole('heading', { name: 'PDF Workbench' })
-    ).not.toBeInTheDocument();
 
     await user.clear(search);
     await user.selectOptions(category, 'notes');
-    expect(
+    expect(toolLink('OneNote Reader')).toBeInTheDocument();
-      screen.getByRole('heading', { name: 'OneNote Reader' })
+    expect(queryToolLink('XSLT Workbench')).not.toBeInTheDocument();
-    ).toBeInTheDocument();
+
-    expect(
+    await user.selectOptions(category, '');
-      screen.queryByRole('heading', { name: 'XSLT Workbench' })
+    await user.click(
-    ).not.toBeInTheDocument();
+      screen.getByRole('button', {
+        name: 'More information about PDF Workbench',
+      })
+    );
+    await user.click(
+      within(screen.getByRole('dialog', { name: 'PDF Workbench' })).getByRole(
+        'button',
+        { name: 'pdf' }
+      )
+    );
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(category).toHaveValue('pdf');
+    expect(toolLink('PDF Workbench')).toBeInTheDocument();
+    expect(queryToolLink('OneNote Reader')).not.toBeInTheDocument();
   });
 
   it('keeps remaining hidden tools visible while editing the hidden set', async () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
 
     await user.click(
       screen.getByRole('button', { name: 'Hide PDF Workbench' })
@@ -147,16 +248,14 @@ describe('portal UI', () => {
 
     expect(showHidden).toBeChecked();
     expect(showHidden).toHaveAccessibleName('Show hidden (1)');
-    expect(
+    expect(toolLink('XSLT Workbench')).toBeInTheDocument();
-      screen.getByRole('heading', { name: 'XSLT Workbench' })
-    ).toBeInTheDocument();
   });
 
   it('clears search filters without revealing hidden tools', async () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
     await user.click(
       screen.getByRole('button', { name: 'Hide PDF Workbench' })
     );
@@ -166,12 +265,8 @@ describe('portal UI', () => {
     );
     await user.click(screen.getByRole('button', { name: 'Clear filters' }));
 
-    expect(
+    expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
-      screen.queryByRole('heading', { name: 'PDF Workbench' })
+    expect(toolLink('XSLT Workbench')).toBeInTheDocument();
-    ).not.toBeInTheDocument();
-    expect(
-      screen.getByRole('heading', { name: 'XSLT Workbench' })
-    ).toBeInTheDocument();
     expect(
       screen.getByRole('checkbox', { name: 'Show hidden (1)' })
     ).not.toBeChecked();
@@ -181,7 +276,7 @@ describe('portal UI', () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
     await user.click(screen.getByRole('button', { name: 'Apps' }));
     const navigation = screen.getByRole('navigation', {
       name: 'Toolbox applications',
@@ -197,7 +292,7 @@ describe('portal UI', () => {
   it('uses the shared accessible header identity and control order', async () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
 
     const header = document.querySelector<HTMLElement>('.portal-header')!;
     expect(
@@ -263,7 +358,7 @@ describe('portal UI', () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
     const personalize = screen.getByRole('button', { name: 'Personalize' });
     await user.click(personalize);
     expect(
@@ -299,7 +394,7 @@ describe('portal UI', () => {
   it('supports keyboard drag ordering from each tile grip', async () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
     const cards = [
       screen.getByTestId('app-card-de.add-ideas.pdf-tools'),
       screen.getByTestId('app-card-de.add-ideas.xslt-tools'),
@@ -309,11 +404,11 @@ describe('portal UI', () => {
       const rect = {
         x: index * 220,
         y: 0,
-        width: 200,
+        width: 188,
-        height: 320,
+        height: 188,
         top: 0,
-        right: index * 220 + 200,
+        right: index * 220 + 188,
-        bottom: 320,
+        bottom: 188,
         left: index * 220,
         toJSON: () => ({}),
       } as DOMRect;
@@ -334,7 +429,7 @@ describe('portal UI', () => {
         within(tools)
           .getAllByRole('heading', { level: 3 })
           .map((heading) => heading.textContent)
-      ).toEqual(['XSLT Workbench', 'PDF Workbench', 'OneNote Reader']);
+      ).toEqual(['XSLT', 'PDF', 'OneNote']);
     });
     expect(
       JSON.parse(localStorage.getItem(PREFERENCES_KEY) ?? '{}').order
@@ -349,41 +444,53 @@ describe('portal UI', () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     render(<App />);
-    const merge = await screen.findByRole('button', { name: '#merge' });
+    await findToolLink();
-    await user.click(merge);
+    await user.click(
-    expect(merge).toHaveAttribute('aria-pressed', 'true');
+      screen.getByRole('button', {
-    expect(
+        name: 'More information about PDF Workbench',
-      screen.getByRole('heading', { name: 'PDF Workbench' })
+      })
-    ).toBeInTheDocument();
+    );
-    expect(
+    const dialog = screen.getByRole('dialog', { name: 'PDF Workbench' });
-      screen.queryByRole('heading', { name: 'XSLT Workbench' })
+    await user.click(within(dialog).getByRole('button', { name: '#merge' }));
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('heading', { name: 'OneNote Reader' })
-    ).not.toBeInTheDocument();
 
-    await user.click(screen.getByRole('button', { name: '#merge' }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    expect(
+    expect(toolLink('PDF Workbench')).toBeInTheDocument();
-      await screen.findByRole('heading', { name: 'XSLT Workbench' })
+    expect(queryToolLink('XSLT Workbench')).not.toBeInTheDocument();
-    ).toBeInTheDocument();
+    expect(queryToolLink('OneNote Reader')).not.toBeInTheDocument();
-    expect(
+
-      screen.getByRole('heading', { name: 'OneNote Reader' })
+    const activeTag = screen.getByRole('button', {
-    ).toBeInTheDocument();
+      name: /#merge.*Clear tag filter/i,
+    });
+    await user.click(activeTag);
+    expect(await findToolLink('XSLT Workbench')).toBeInTheDocument();
+    expect(toolLink('OneNote Reader')).toBeInTheDocument();
   });
 
   it('opens the standard help control and explains tile interaction', async () => {
     vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
     const user = userEvent.setup();
     const { container } = render(<App />);
-    await screen.findByRole('heading', { name: 'PDF Workbench' });
+    await findToolLink();
-    await user.click(screen.getByRole('button', { name: 'Help' }));
+    const help = screen.getByRole('button', { name: 'Help' });
-    expect(
+    await user.click(help);
-      screen.getByRole('dialog', { name: 'Choose and arrange your tools' })
+    const dialog = screen.getByRole('dialog', {
-    ).toHaveTextContent('click anywhere on a tool tile');
+      name: 'Choose and arrange your tools',
+    });
+    expect(dialog).toHaveTextContent('click anywhere on a tool tile');
+    expect(dialog).toHaveTextContent('use the light bulb');
     expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
-    await user.click(screen.getByRole('button', { name: 'Close help' }));
+    expect(container.querySelector('.site-shell')).toHaveAttribute(
+      'aria-hidden',
+      'true'
+    );
+    const close = within(dialog).getByRole('button', { name: 'Close help' });
+    expect(close).toHaveFocus();
+    await user.tab();
+    expect(close).toHaveFocus();
+    await user.keyboard('{Escape}');
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
+    expect(help).toHaveFocus();
   });
 
   it('shows a recoverable catalogue error', async () => {
@@ -397,9 +504,7 @@ describe('portal UI', () => {
       await screen.findByRole('heading', { name: 'Toolbox unavailable' })
     ).toBeInTheDocument();
     fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
-    expect(
+    expect(await findToolLink()).toBeInTheDocument();
-      await screen.findByRole('heading', { name: 'PDF Workbench' })
-    ).toBeInTheDocument();
   });
 
   it('shows a dedicated empty state for a valid catalogue', async () => {

src/App.tsx

@@ -16,8 +16,9 @@ import {
   ToolboxHeader,
   type ToolboxHeaderApp,
 } from '@add-ideas/toolbox-shell-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AppCard } from './components/AppCard';
+import { AppDetailsPanel } from './components/AppDetailsPanel';
 import { HelpPanel } from './components/HelpPanel';
 import { Logo } from './components/Logo';
 import { PreferencesPanel } from './components/PreferencesPanel';
@@ -34,6 +35,9 @@ type LoadState =
   | { status: 'error'; message: string }
   | { status: 'ready'; value: LoadedCatalogue };
 
+type PortalOverlay =
+  { kind: 'help' } | { kind: 'details'; appId: string } | null;
+
 function appMatches(
   app: ResolvedApp,
   query: string,
@@ -50,29 +54,25 @@ function appMatches(
 }
 
 interface AppSectionProps {
-  activeTag: string;
   apps: ResolvedApp[];
   catalogueUrl: string;
   hiddenIds: readonly string[];
   id: string;
-  onCategory: (category: string) => void;
+  onDetails: (id: string) => void;
   onHide: (id: string) => void;
   onPin: (id: string) => void;
-  onTag: (tag: string) => void;
   pinned: boolean;
   title: string;
 }
 
 function AppSection({
-  activeTag,
   apps,
   catalogueUrl,
   hiddenIds,
   id,
-  onCategory,
+  onDetails,
   onHide,
   onPin,
-  onTag,
   pinned,
   title,
 }: AppSectionProps) {
@@ -97,11 +97,9 @@ function AppSection({
               contextualUrl={contextualLaunchUrl}
               pinned={pinned}
               hidden={hiddenIds.includes(app.id)}
-              activeTag={activeTag}
+              onDetails={() => onDetails(app.id)}
-              onCategory={onCategory}
               onPin={() => onPin(app.id)}
               onHide={() => onHide(app.id)}
-              onTag={onTag}
             />
           ))}
         </div>
@@ -119,9 +117,10 @@ export default function App() {
   const [shownHiddenIds, setShownHiddenIds] = useState<
     readonly string[] | null
   >(null);
-  const [helpOpen, setHelpOpen] = useState(false);
+  const [overlay, setOverlay] = useState<PortalOverlay>(null);
+  const hiddenToggle = useRef<HTMLInputElement>(null);
   const [preferences, setPreferences, storageAvailable] = usePreferences();
-  const closeHelp = useCallback(() => setHelpOpen(false), []);
+  const closeOverlay = useCallback(() => setOverlay(null), []);
   const showHidden =
     preferences.hidden.length > 0 &&
     shownHiddenIds?.some((id) => preferences.hidden.includes(id)) === true;
@@ -150,6 +149,11 @@ export default function App() {
 
   const loaded = loadState.status === 'ready' ? loadState.value : undefined;
   const apps = useMemo(() => loaded?.apps ?? [], [loaded]);
+  const detailsApp =
+    overlay?.kind === 'details'
+      ? apps.find((app) => app.id === overlay.appId)
+      : undefined;
+  const overlayOpen = overlay?.kind === 'help' || detailsApp !== undefined;
 
   useEffect(() => {
     if (!loaded) return;
@@ -206,6 +210,7 @@ export default function App() {
   }));
 
   function toggleListItem(field: 'pinned' | 'hidden', id: string) {
+    const keepCardVisible = field === 'pinned' || showHidden;
     if (field === 'hidden' && showHidden && !preferences.hidden.includes(id)) {
       setShownHiddenIds((current) => [...new Set([...(current ?? []), id])]);
     }
@@ -215,6 +220,20 @@ export default function App() {
         ? current[field].filter((item) => item !== id)
         : [...current[field], id],
     }));
+    window.requestAnimationFrame(() => {
+      if (!keepCardVisible) {
+        hiddenToggle.current?.focus();
+        return;
+      }
+      const action = field === 'pinned' ? 'pin' : 'visibility';
+      [
+        ...document.querySelectorAll<HTMLButtonElement>(
+          `[data-card-action="${action}"]`
+        ),
+      ]
+        .find((button) => button.dataset.appId === id)
+        ?.focus();
+    });
   }
 
   function handleDragEnd(event: DragEndEvent) {
@@ -243,8 +262,8 @@ export default function App() {
     <>
       <div
         className="site-shell"
-        inert={helpOpen}
+        inert={overlayOpen}
-        aria-hidden={helpOpen || undefined}
+        aria-hidden={overlayOpen || undefined}
       >
         <a className="skip-link" href="#main-content">
           Skip to tools
@@ -257,7 +276,7 @@ export default function App() {
           homeHref={loaded?.homeUrl ?? './'}
           homeLabel="add·ideas Toolbox"
           brandIconUrl="./favicon.svg"
-          helpAction={{ onClick: () => setHelpOpen(true) }}
+          helpAction={{ onClick: () => setOverlay({ kind: 'help' }) }}
           sourceHref={PORTAL_SOURCE}
           sourceLabel="Toolbox source on Gitea"
           personalizeContent={
@@ -286,6 +305,7 @@ export default function App() {
                 tool. Choose one and keep your work moving.
               </p>
             </div>
+          </section>
 
           {loaded && (
             <section className="tool-controls" aria-label="Find a tool">
@@ -331,6 +351,7 @@ export default function App() {
                 }`}
               >
                 <input
+                  ref={hiddenToggle}
                   type="checkbox"
                   checked={showHidden}
                   disabled={preferences.hidden.length === 0}
@@ -344,7 +365,6 @@ export default function App() {
               </label>
             </section>
           )}
-          </section>
 
           {loadState.status === 'loading' && (
             <section className="state-card" aria-live="polite">
@@ -415,30 +435,26 @@ export default function App() {
                       title="Pinned"
                       apps={pinnedApps}
                       pinned
-                      activeTag={activeTag}
                       catalogueUrl={loaded.catalogueUrl.href}
                       hiddenIds={preferences.hidden}
-                      onCategory={setCategory}
+                      onDetails={(id) =>
+                        setOverlay({ kind: 'details', appId: id })
+                      }
                       onPin={(id) => toggleListItem('pinned', id)}
                       onHide={(id) => toggleListItem('hidden', id)}
-                      onTag={(tag) =>
-                        setActiveTag((current) => (current === tag ? '' : tag))
-                      }
                     />
                     <AppSection
                       id="regular-apps"
                       title="Tools"
                       apps={regularApps}
                       pinned={false}
-                      activeTag={activeTag}
                       catalogueUrl={loaded.catalogueUrl.href}
                       hiddenIds={preferences.hidden}
-                      onCategory={setCategory}
+                      onDetails={(id) =>
+                        setOverlay({ kind: 'details', appId: id })
+                      }
                       onPin={(id) => toggleListItem('pinned', id)}
                       onHide={(id) => toggleListItem('hidden', id)}
-                      onTag={(tag) =>
-                        setActiveTag((current) => (current === tag ? '' : tag))
-                      }
                     />
                   </div>
                 </DndContext>
@@ -473,9 +489,9 @@ export default function App() {
             </span>
           </p>
           <span>
-            Portal v0.2.2 ·{' '}
+            Portal v0.2.4 ·{' '}
             <a
-              href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.2"
+              href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.5.0"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -485,7 +501,26 @@ export default function App() {
         </footer>
       </div>
 
-      <HelpPanel open={helpOpen} onClose={closeHelp} />
+      <HelpPanel open={overlay?.kind === 'help'} onClose={closeOverlay} />
+      {detailsApp && loaded ? (
+        <AppDetailsPanel
+          app={detailsApp}
+          catalogueUrl={loaded.catalogueUrl.href}
+          contextualUrl={contextualLaunchUrl}
+          pinned={preferences.pinned.includes(detailsApp.id)}
+          hidden={preferences.hidden.includes(detailsApp.id)}
+          activeTag={activeTag}
+          onCategory={(nextCategory) => {
+            setCategory(nextCategory);
+            closeOverlay();
+          }}
+          onTag={(tag) => {
+            setActiveTag((current) => (current === tag ? '' : tag));
+            closeOverlay();
+          }}
+          onClose={closeOverlay}
+        />
+      ) : null}
     </>
   );
 }

src/components/AppCard.tsx

@@ -1,5 +1,7 @@
+import { useId } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { shortToolDescription, shortToolTitle } from '../toolPresentation';
 import type { ResolvedApp } from '../types';
 
 interface AppCardProps {
@@ -7,48 +9,74 @@ interface AppCardProps {
   catalogueUrl: string;
   hidden: boolean;
   pinned: boolean;
-  activeTag: string;
+  onDetails: () => void;
-  onCategory: (category: string) => void;
   onHide: () => void;
   onPin: () => void;
-  onTag: (tag: string) => void;
   contextualUrl: (entryUrl: string, catalogueUrl: string) => string;
 }
 
-function RequirementSummary({ app }: { app: ResolvedApp }) {
+function MoveIcon() {
-  if (!app.requirements) return null;
+  return (
-  const requirements = [
+    <svg viewBox="0 0 20 80" aria-hidden="true">
-    app.requirements.secureContext && 'Secure context',
+      <circle cx="7" cy="5" r="1.2" />
-    app.requirements.workers && 'Web workers',
+      <circle cx="13" cy="5" r="1.2" />
-    app.requirements.indexedDb && 'IndexedDB',
+      <circle cx="7" cy="10" r="1.2" />
-    app.requirements.crossOriginIsolated && 'Cross-origin isolation',
+      <circle cx="13" cy="10" r="1.2" />
-  ].filter(Boolean);
+      <circle cx="7" cy="15" r="1.2" />
-  if (requirements.length === 0) return null;
+      <circle cx="13" cy="15" r="1.2" />
-  return <p className="requirements">Needs {requirements.join(' · ')}</p>;
+      <circle cx="7" cy="20" r="1.2" />
+      <circle cx="13" cy="20" r="1.2" />
+      <circle cx="7" cy="25" r="1.2" />
+      <circle cx="13" cy="25" r="1.2" />
+      <circle cx="7" cy="30" r="1.2" />
+      <circle cx="13" cy="30" r="1.2" />
+      <circle cx="7" cy="35" r="1.2" />
+      <circle cx="13" cy="35" r="1.2" />
+      <circle cx="7" cy="40" r="1.2" />
+      <circle cx="13" cy="40" r="1.2" />
+      <circle cx="7" cy="45" r="1.2" />
+      <circle cx="13" cy="45" r="1.2" />
+      <circle cx="7" cy="50" r="1.2" />
+      <circle cx="13" cy="50" r="1.2" />
+      <circle cx="7" cy="55" r="1.2" />
+      <circle cx="13" cy="55" r="1.2" />
+      <circle cx="7" cy="60" r="1.2" />
+      <circle cx="13" cy="60" r="1.2" />
+      <circle cx="7" cy="65" r="1.2" />
+      <circle cx="13" cy="65" r="1.2" />
+      <circle cx="7" cy="70" r="1.2" />
+      <circle cx="13" cy="70" r="1.2" />
+      <circle cx="7" cy="75" r="1.2" />
+      <circle cx="13" cy="75" r="1.2" />
+    </svg>
+  );
 }
 
-function PrivacySummary({ app }: { app: ResolvedApp }) {
+function LightBulbIcon() {
-  if (!app.privacy)
   return (
-      <p className="privacy-summary">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
-        External destination · review its privacy terms
+      <path d="M9 18h6M10 21h4" />
-      </p>
+      <path d="M8.4 14.8A6 6 0 1 1 15.6 14.8c-.9.7-1.4 1.4-1.6 2.2h-4c-.2-.8-.7-1.5-1.6-2.2Z" />
+    </svg>
   );
-  if (app.privacy.label)
+}
-    return <p className="privacy-summary">{app.privacy.label}</p>;
+
-  const processing = {
+function PinIcon() {
-    local: 'Local processing',
-    remote: 'Remote processing',
-    mixed: 'Local and remote capabilities',
-  }[app.privacy.processing];
   return (
-    <p className="privacy-summary">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
-      {processing} ·{' '}
+      <path d="M8 3h8l-1 6 3 3v2H6v-2l3-3-1-6Z" />
-      {app.privacy.fileUploads
+      <path d="M12 14v7" />
-        ? 'file/data transmission declared'
+    </svg>
-        : 'no file uploads declared'}{' '}
+  );
-      · {app.privacy.telemetry ? 'telemetry declared' : 'no telemetry declared'}
+}
-    </p>
+
+function VisibilityIcon({ hidden }: { hidden: boolean }) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M3 12s3.2-5 9-5 9 5 9 5-3.2 5-9 5-9-5-9-5Z" />
+      <circle cx="12" cy="12" r="2.3" />
+      {!hidden && <path d="m4 4 16 16" />}
+    </svg>
   );
 }
 
@@ -57,13 +85,12 @@ export function AppCard({
   catalogueUrl,
   hidden,
   pinned,
-  activeTag,
+  onDetails,
-  onCategory,
   onHide,
   onPin,
-  onTag,
   contextualUrl,
 }: AppCardProps) {
+  const titleId = useId();
   const {
     attributes,
     isDragging,
@@ -84,10 +111,23 @@ export function AppCard({
       className={`app-card${hidden ? ' app-card--hidden' : ''}${
         isDragging ? ' app-card--dragging' : ''
       }`}
+      aria-labelledby={titleId}
       data-testid={`app-card-${app.id}`}
       style={{ transform: CSS.Transform.toString(transform), transition }}
     >
-      <div className="app-card__top">
+      <button
+        ref={setActivatorNodeRef}
+        {...attributes}
+        {...listeners}
+        className="drag-handle"
+        type="button"
+        aria-label={`Reorder ${app.name}`}
+        title="Drag to reorder"
+      >
+        <MoveIcon />
+      </button>
+
+      <div className="app-card__face">
         <div className="app-card__icon" aria-hidden="true">
           {app.iconUrl ? (
             <img src={app.iconUrl} alt="" loading="lazy" />
@@ -95,112 +135,60 @@ export function AppCard({
             <span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
           )}
         </div>
-        <div
+        <h3 id={titleId}>
-          className="app-card__actions"
-          aria-label={`Personalize ${app.name}`}
-        >
-          <button
-            ref={setActivatorNodeRef}
-            {...attributes}
-            {...listeners}
-            className="icon-button drag-handle"
-            type="button"
-            aria-label={`Reorder ${app.name}`}
-            title="Drag to reorder"
-          >
-            <span aria-hidden="true">⠿</span>
-          </button>
-          <button
-            className={`icon-button${pinned ? ' is-active' : ''}`}
-            type="button"
-            aria-label={pinned ? `Unpin ${app.name}` : `Pin ${app.name}`}
-            aria-pressed={pinned}
-            title={pinned ? 'Unpin' : 'Pin'}
-            onClick={onPin}
-          >
-            <span aria-hidden="true">⌁</span>
-          </button>
-          <button
-            className="icon-button"
-            type="button"
-            aria-label={hidden ? `Show ${app.name}` : `Hide ${app.name}`}
-            onClick={onHide}
-          >
-            <span aria-hidden="true">{hidden ? '○' : '—'}</span>
-          </button>
-        </div>
-      </div>
-      <div className="app-card__body">
-        <div className="title-line">
-          <h3>
           <a
             className="app-card__launch-link"
             href={launchUrl}
             target={target}
             rel={target ? 'noopener noreferrer' : undefined}
+            aria-label={`Open ${app.name}`}
           >
-              {app.name}
+            {shortToolTitle(app)}
           </a>
         </h3>
-          {pinned && <span className="status-chip">Pinned</span>}
+        <p>{shortToolDescription(app)}</p>
-          {hidden && (
-            <span className="status-chip status-chip--muted">Hidden</span>
-          )}
-          {app.isExternal && (
-            <span className="status-chip status-chip--muted">External</span>
-          )}
       </div>
-        <p>{app.description}</p>
+
-        <PrivacySummary app={app} />
+      <div
-        <RequirementSummary app={app} />
+        className="app-card__actions"
-        {app.categories.length > 0 && (
+        role="group"
-          <div className="category-row" aria-label="Categories">
+        aria-label={`Actions for ${app.name}`}
-            {app.categories.slice(0, 3).map((category) => (
+      >
         <button
+          className="icon-button info-button"
           type="button"
-                key={category}
+          aria-label={`More information about ${app.name}`}
-                onClick={() => onCategory(category)}
+          aria-haspopup="dialog"
+          title="More information"
+          data-details-trigger={app.id}
+          onClick={onDetails}
         >
-                {category}
+          <LightBulbIcon />
         </button>
-            ))}
-          </div>
-        )}
-        {app.tags.length > 0 && (
-          <div className="tag-row" aria-label="Tags">
-            {app.tags.map((tag) => (
         <button
+          className={`icon-button pin-button${pinned ? ' is-active' : ''}`}
           type="button"
-                key={tag}
+          data-app-id={app.id}
-                aria-pressed={activeTag === tag}
+          data-card-action="pin"
-                onClick={() => onTag(tag)}
+          aria-label={pinned ? `Unpin ${app.name}` : `Pin ${app.name}`}
+          aria-pressed={pinned}
+          title={pinned ? 'Unpin' : 'Pin'}
+          onClick={onPin}
         >
-                #{tag}
+          <PinIcon />
         </button>
-            ))}
+        <button
-          </div>
+          className="icon-button visibility-button"
-        )}
+          type="button"
-      </div>
+          data-app-id={app.id}
-      <footer className="app-card__footer">
+          data-card-action="visibility"
-        <div className="app-card__meta">
+          aria-label={hidden ? `Show ${app.name}` : `Hide ${app.name}`}
-          <span className="version">
+          title={hidden ? 'Show' : 'Hide'}
-            {app.version ? `v${app.version}` : 'External service'}
+          onClick={onHide}
-          </span>
-          {app.sourceUrl && (
-            <a
-              className="source-link"
-              href={app.sourceUrl}
-              target="_blank"
-              rel="noopener noreferrer"
         >
-              Source and license
+          <VisibilityIcon hidden={hidden} />
-            </a>
+        </button>
-          )}
       </div>
-        <span className="open-hint">
-          Open tool <span aria-hidden="true">↗</span>
-        </span>
-      </footer>
     </article>
   );
 }

src/components/AppDetailsPanel.tsx

@@ -0,0 +1,172 @@
+import { useId } from 'react';
+import type { ResolvedApp } from '../types';
+import { shortToolTitle } from '../toolPresentation';
+import { ModalPanel } from './ModalPanel';
+
+interface AppDetailsPanelProps {
+  activeTag: string;
+  app: ResolvedApp;
+  catalogueUrl: string;
+  hidden: boolean;
+  pinned: boolean;
+  contextualUrl: (entryUrl: string, catalogueUrl: string) => string;
+  onCategory: (category: string) => void;
+  onClose: () => void;
+  onTag: (tag: string) => void;
+}
+
+function RequirementSummary({ app }: { app: ResolvedApp }) {
+  if (!app.requirements) return null;
+  const requirements = [
+    app.requirements.secureContext && 'Secure context',
+    app.requirements.workers && 'Web workers',
+    app.requirements.indexedDb && 'IndexedDB',
+    app.requirements.crossOriginIsolated && 'Cross-origin isolation',
+  ].filter(Boolean);
+  if (requirements.length === 0) return null;
+  return <p className="requirements">Needs {requirements.join(' · ')}</p>;
+}
+
+function PrivacySummary({ app }: { app: ResolvedApp }) {
+  if (!app.privacy)
+    return (
+      <p className="privacy-summary">
+        External destination · review its privacy terms
+      </p>
+    );
+  if (app.privacy.label)
+    return <p className="privacy-summary">{app.privacy.label}</p>;
+  const processing = {
+    local: 'Local processing',
+    remote: 'Remote processing',
+    mixed: 'Local and remote capabilities',
+  }[app.privacy.processing];
+  return (
+    <p className="privacy-summary">
+      {processing} ·{' '}
+      {app.privacy.fileUploads
+        ? 'file/data transmission declared'
+        : 'no file uploads declared'}{' '}
+      · {app.privacy.telemetry ? 'telemetry declared' : 'no telemetry declared'}
+    </p>
+  );
+}
+
+export function AppDetailsPanel({
+  activeTag,
+  app,
+  catalogueUrl,
+  hidden,
+  pinned,
+  contextualUrl,
+  onCategory,
+  onClose,
+  onTag,
+}: AppDetailsPanelProps) {
+  const titleId = useId();
+  const launchUrl = app.isExternal
+    ? app.entryUrl
+    : contextualUrl(app.entryUrl, catalogueUrl);
+  const target = app.launchModes.includes('navigate') ? undefined : '_blank';
+
+  return (
+    <ModalPanel
+      className="app-info-panel"
+      labelledBy={titleId}
+      onClose={onClose}
+    >
+      <header className="app-info-panel__header">
+        <div className="app-info-panel__identity">
+          <div className="app-info-panel__icon" aria-hidden="true">
+            {app.iconUrl ? (
+              <img src={app.iconUrl} alt="" />
+            ) : (
+              <span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
+            )}
+          </div>
+          <div>
+            <p className="eyebrow">Tool information</p>
+            <div className="title-line">
+              <h2 id={titleId}>{app.name}</h2>
+              {pinned && <span className="status-chip">Pinned</span>}
+              {hidden && (
+                <span className="status-chip status-chip--muted">Hidden</span>
+              )}
+              {app.isExternal && (
+                <span className="status-chip status-chip--muted">External</span>
+              )}
+            </div>
+          </div>
+        </div>
+        <button
+          className="close-button"
+          type="button"
+          aria-label={`Close information for ${app.name}`}
+          onClick={onClose}
+        >
+          ×
+        </button>
+      </header>
+
+      <div className="app-info-panel__body">
+        <p className="app-info-panel__description">{app.description}</p>
+        <PrivacySummary app={app} />
+        <RequirementSummary app={app} />
+
+        {app.categories.length > 0 && (
+          <div className="category-row" role="group" aria-label="Categories">
+            {app.categories.slice(0, 3).map((category) => (
+              <button
+                type="button"
+                key={category}
+                onClick={() => onCategory(category)}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        )}
+        {app.tags.length > 0 && (
+          <div className="tag-row" role="group" aria-label="Tags">
+            {app.tags.map((tag) => (
+              <button
+                type="button"
+                key={tag}
+                aria-pressed={activeTag === tag}
+                onClick={() => onTag(tag)}
+              >
+                #{tag}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <footer className="app-info-panel__footer">
+        <div className="app-info-panel__meta">
+          <span className="version">
+            {app.version ? `v${app.version}` : 'External service'}
+          </span>
+          {app.sourceUrl && (
+            <a
+              className="source-link"
+              href={app.sourceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Source and license
+            </a>
+          )}
+        </div>
+        <a
+          className="app-info-panel__launch"
+          href={launchUrl}
+          target={target}
+          rel={target ? 'noopener noreferrer' : undefined}
+        >
+          Open {shortToolTitle(app)} <span aria-hidden="true">↗</span>
+        </a>
+      </footer>
+    </ModalPanel>
+  );
+}

src/components/HelpPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { ModalPanel } from './ModalPanel';
 
 interface HelpPanelProps {
   open: boolean;
@@ -6,61 +6,12 @@ interface HelpPanelProps {
 }
 
 export function HelpPanel({ open, onClose }: HelpPanelProps) {
-  const panel = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    const returnFocus =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-    const dialog = panel.current;
-    const focusable = () =>
-      dialog
-        ? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)]
-        : [];
-    focusable()[0]?.focus();
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        onClose();
-        return;
-      }
-      if (event.key !== 'Tab') return;
-      const elements = focusable();
-      const first = elements[0];
-      const last = elements.at(-1);
-      if (!first || !last) return;
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      returnFocus?.focus();
-    };
-  }, [open, onClose]);
-
   if (!open) return null;
   return (
-    <div
+    <ModalPanel
-      className="dialog-backdrop"
-      role="presentation"
-      onMouseDown={(event) => event.target === event.currentTarget && onClose()}
-    >
-      <section
-        ref={panel}
       className="help-panel"
-        role="dialog"
+      labelledBy="help-title"
-        aria-modal="true"
+      onClose={onClose}
-        aria-labelledby="help-title"
-        tabIndex={-1}
     >
       <header>
         <div>
@@ -82,28 +33,19 @@ export function HelpPanel({ open, onClose }: HelpPanelProps) {
           control.
         </p>
         <p>
-            <strong>Filter:</strong> search, choose a category, or click a tag.
+          <strong>Details:</strong> use the light bulb to review privacy,
-            Click the selected tag again to clear it.
+          requirements, categories, tags, version, and source before opening.
+        </p>
+        <p>
+          <strong>Filter:</strong> search, choose a category, or select a tag
+          from a tool's information panel. Select the tag again to clear it.
         </p>
         <p>
           <strong>Arrange:</strong> pin frequently used tools into their own
           section, then drag the grip to reorder. The grip also supports
           keyboard dragging with Space, arrow keys, and Escape.
         </p>
-          <p>
-            <strong>Privacy:</strong> each tile reports its declared processing,
-            uploads, telemetry, and browser requirements before you open it.
-          </p>
-        </div>
-      </section>
       </div>
+    </ModalPanel>
   );
 }
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',');

src/components/ModalPanel.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+interface ModalPanelProps {
+  children: ReactNode;
+  className: string;
+  labelledBy: string;
+  onClose: () => void;
+}
+
+export function ModalPanel({
+  children,
+  className,
+  labelledBy,
+  onClose,
+}: ModalPanelProps) {
+  const panel = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const returnFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const dialog = panel.current;
+    const focusable = () =>
+      dialog
+        ? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(
+            (element) => !element.hasAttribute('disabled')
+          )
+        : [];
+
+    (focusable()[0] ?? dialog)?.focus();
+    const previousOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = 'hidden';
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+      if (event.key !== 'Tab') return;
+
+      const elements = focusable();
+      const first = elements[0];
+      const last = elements.at(-1);
+      if (!first || !last) {
+        event.preventDefault();
+        dialog?.focus();
+        return;
+      }
+
+      const active = document.activeElement;
+      if (!dialog?.contains(active)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      } else if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.documentElement.style.overflow = previousOverflow;
+      if (returnFocus?.isConnected) returnFocus.focus();
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      className="dialog-backdrop"
+      role="presentation"
+      onPointerDown={(event) =>
+        event.target === event.currentTarget && onClose()
+      }
+    >
+      <section
+        ref={panel}
+        className={className}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        tabIndex={-1}
+      >
+        {children}
+      </section>
+    </div>
+  );
+}
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');

src/styles.css

@@ -125,8 +125,9 @@ summary:focus-visible {
 
 main,
 .site-footer {
-  width: min(1160px, calc(100% - 2.5rem));
+  width: min(100%, 90rem);
   margin-inline: auto;
+  padding-inline: 1rem;
 }
 
 .state-card button,
@@ -150,14 +151,14 @@ main {
 
 .hero {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
+  grid-template-columns: 1fr;
   align-items: end;
   gap: clamp(2rem, 6vw, 5rem);
   padding: clamp(3.5rem, 7vw, 6.8rem) 0 clamp(2.5rem, 5vw, 4.2rem);
 }
 
 .hero-intro {
-  max-width: 750px;
+  max-width: 100%;
 }
 
 .eyebrow {
@@ -305,23 +306,31 @@ main {
 
 .app-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(
-  gap: 1.1rem;
+    auto-fill,
+    minmax(min(10.5rem, 100%), 11.75rem)
+  );
+  align-items: start;
+  justify-content: start;
+  gap: 0.9rem;
 }
 
 .app-card {
   position: relative;
-  min-height: 340px;
+  aspect-ratio: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
   overflow: hidden;
+  padding: 1rem 0.85rem 0.75rem;
   border: 1px solid var(--line);
-  border-radius: 1.2rem;
+  border-radius: 1rem;
   background: var(--surface);
   box-shadow: var(--shadow);
   transition:
     border-color 180ms ease,
-    transform 180ms ease,
     box-shadow 180ms ease;
 }
 
@@ -333,33 +342,35 @@ main {
 
 .app-card:hover {
   border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
-  transform: translateY(-2px);
   box-shadow: 0 20px 54px rgba(24, 34, 68, 0.13);
 }
 
 .app-card--hidden {
   border-style: dashed;
-  opacity: 0.7;
+  background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
 }
 
-.app-card__top {
+.app-card__face {
-  display: flex;
+  min-height: 0;
-  align-items: flex-start;
+  display: grid;
-  justify-content: space-between;
+  flex: 1;
-  padding: 1.35rem 1.35rem 0;
+  align-content: center;
+  justify-items: center;
+  padding: 0.2rem 0.25rem 0;
+  text-align: center;
 }
 
 .app-card__icon {
-  width: 52px;
+  width: 3.6rem;
-  height: 52px;
+  height: 3.6rem;
   display: grid;
   place-items: center;
   overflow: hidden;
-  border-radius: 0.95rem;
+  border-radius: 0.9rem;
   background: var(--brand-soft);
   color: var(--brand);
   font-family: Inter, Avenir, 'Segoe UI', sans-serif;
-  font-size: 1.45rem;
+  font-size: 1.35rem;
   font-weight: 700;
 }
 
@@ -369,51 +380,130 @@ main {
   object-fit: contain;
 }
 
-.app-card__actions {
+.app-card__face h3 {
-  position: relative;
+  margin: 0.7rem 0 0;
-  z-index: 2;
+  font-family: Inter, Avenir, 'Segoe UI', sans-serif;
-  display: flex;
+  font-size: 1.05rem;
-  gap: 0.15rem;
+  letter-spacing: -0.025em;
+}
+
+.app-card__face p {
+  display: -webkit-box;
+  margin: 0.35rem 0 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.72rem;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .drag-handle {
-  touch-action: none;
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 0.35rem;
+  width: 1rem;
+  height: 5rem;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 0.55rem;
+  background: var(--surface);
+  color: var(--muted);
+  opacity: 0;
   cursor: grab;
+  pointer-events: none;
+  touch-action: none;
+  transform: translate(-0.2rem, -50%);
+  transition:
+    opacity 150ms ease,
+    color 150ms ease,
+    transform 150ms ease;
+}
+
+.app-card:hover .drag-handle,
+.app-card:focus-within .drag-handle,
+.drag-handle:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(0, -50%);
+}
+
+.drag-handle:hover {
+  color: var(--brand);
 }
 
 .drag-handle:active {
   cursor: grabbing;
 }
 
+.drag-handle svg {
+  width: calc(1rem - 2px);
+  height: 4rem;
+  fill: currentColor;
+}
+
+.app-card__actions {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  pointer-events: none;
+}
+
 .icon-button,
 .close-button {
-  width: 32px;
+  width: 2.15rem;
-  height: 32px;
+  height: 2.15rem;
   display: grid;
   place-items: center;
-  border: 0;
+  padding: 0;
+  border: 1px solid var(--line);
   border-radius: 50%;
-  background: transparent;
+  background: var(--surface-soft);
   color: var(--muted);
   cursor: pointer;
 }
 
+.app-card__actions .icon-button {
+  pointer-events: auto;
+}
+
 .icon-button:hover:not(:disabled),
 .icon-button.is-active {
+  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
   background: var(--brand-soft);
   color: var(--brand);
 }
 
+.icon-button svg {
+  width: 1.05rem;
+  height: 1.05rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
+
+.pin-button svg {
+  transform: rotate(0);
+  transition: transform 180ms ease;
+}
+
+.pin-button.is-active svg {
+  transform: rotate(45deg);
+}
+
 .icon-button:disabled {
   cursor: not-allowed;
   opacity: 0.28;
 }
 
-.app-card__body {
-  flex: 1;
-  padding: 1.25rem 1.35rem 1rem;
-}
-
 .title-line {
   display: flex;
   flex-wrap: wrap;
@@ -421,10 +511,10 @@ main {
   gap: 0.45rem;
 }
 
-.title-line h3 {
+.title-line h2 {
   margin: 0;
   font-family: Inter, Avenir, 'Segoe UI', sans-serif;
-  font-size: 1.3rem;
+  font-size: 1.35rem;
   letter-spacing: -0.025em;
 }
 
@@ -472,22 +562,6 @@ main {
   color: var(--muted);
 }
 
-.app-card__body > p {
-  margin: 0.75rem 0 0;
-  color: var(--muted);
-  line-height: 1.6;
-}
-
-.app-card__body .requirements {
-  font-size: 0.72rem;
-}
-
-.app-card__body .privacy-summary {
-  color: var(--text);
-  font-size: 0.76rem;
-  font-weight: 650;
-}
-
 .tag-row,
 .category-row {
   display: flex;
@@ -521,26 +595,11 @@ main {
   color: var(--brand);
 }
 
-.app-card__footer {
-  min-height: 68px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.85rem 1.35rem;
-  border-top: 1px solid var(--line);
-}
-
 .version {
   color: var(--muted);
   font-size: 0.78rem;
 }
 
-.app-card__meta {
-  display: grid;
-  gap: 0.25rem;
-}
-
 .source-link,
 .site-footer a {
   position: relative;
@@ -548,12 +607,6 @@ main {
   color: var(--brand);
 }
 
-.open-hint {
-  color: var(--brand);
-  font-size: 0.84rem;
-  font-weight: 700;
-}
-
 .state-card {
   max-width: 600px;
   margin: 0 auto 5rem;
@@ -657,14 +710,16 @@ main {
   inset: 0;
   display: grid;
   place-items: center;
+  overflow-y: auto;
   padding: 1rem;
   background: rgba(5, 9, 22, 0.56);
   backdrop-filter: blur(5px);
 }
 
-.help-panel {
+.help-panel,
-  width: min(560px, 100%);
+.app-info-panel {
   max-height: calc(100vh - 2rem);
+  max-height: calc(100dvh - 2rem);
   overflow: auto;
   padding: 1.5rem;
   border: 1px solid var(--line);
@@ -673,6 +728,15 @@ main {
   box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
 }
 
+.help-panel {
+  width: min(560px, 100%);
+}
+
+.app-info-panel {
+  position: relative;
+  width: min(680px, 100%);
+}
+
 .help-panel > header {
   display: flex;
   align-items: flex-start;
@@ -686,6 +750,105 @@ main {
   letter-spacing: -0.025em;
 }
 
+.app-info-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.app-info-panel__identity {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-info-panel__icon {
+  width: 4rem;
+  height: 4rem;
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 1rem;
+  background: var(--brand-soft);
+  color: var(--brand);
+  font-size: 1.45rem;
+  font-weight: 700;
+}
+
+.app-info-panel__icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.app-info-panel .eyebrow {
+  margin-bottom: 0.4rem;
+}
+
+.app-info-panel__body {
+  margin-top: 1.35rem;
+  padding: 1.1rem;
+  border: 1px solid var(--line);
+  border-radius: 0.85rem;
+  background: var(--surface);
+}
+
+.app-info-panel__description {
+  margin: 0;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.app-info-panel__body .privacy-summary {
+  margin: 1rem 0 0;
+  color: var(--text);
+  font-size: 0.8rem;
+  font-weight: 650;
+  line-height: 1.5;
+}
+
+.app-info-panel__body .requirements {
+  margin: 0.55rem 0 0;
+  color: var(--muted);
+  font-size: 0.76rem;
+  line-height: 1.5;
+}
+
+.app-info-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.25rem;
+}
+
+.app-info-panel__meta {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.app-info-panel__launch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.7rem 0.9rem;
+  border-radius: 0.7rem;
+  background: var(--brand);
+  color: var(--surface) !important;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.app-info-panel__launch:hover {
+  background: var(--brand-hover);
+  text-decoration: none;
+}
+
 .help-panel .eyebrow {
   margin-bottom: 0.5rem;
 }
@@ -790,7 +953,8 @@ main {
 @media (max-width: 700px) {
   main,
   .site-footer {
-    width: min(100% - 1.4rem, 1160px);
+    width: min(100%, 90rem);
+    padding-inline: 0.7rem;
   }
 
   .hero {
@@ -811,14 +975,6 @@ main {
     margin: 0.25rem 0;
   }
 
-  .app-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .app-card {
-    min-height: 320px;
-  }
-
   .site-footer {
     min-height: 130px;
     align-items: flex-start;
@@ -842,15 +998,35 @@ main {
   .hidden-toggle {
     justify-self: start;
   }
+
+  .app-info-panel__header,
+  .app-info-panel__footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .app-info-panel__header .close-button {
+    position: absolute;
+    top: 1.1rem;
+    right: 1.1rem;
+  }
+
+  .app-info-panel__identity {
+    padding-right: 2.5rem;
+  }
 }
 
 @media (min-width: 701px) and (max-width: 960px) {
   .hero {
-    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
+    grid-template-columns: 1fr;
   }
+}
 
-  .app-grid {
+@media (hover: none) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .drag-handle {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate(0, -50%);
   }
 }
 

src/test/fixtures.ts

@@ -7,7 +7,7 @@ export const pdfManifest: ToolboxAppManifest = {
   schemaVersion: 1,
   id: 'de.add-ideas.pdf-tools',
   name: 'PDF Workbench',
-  version: '0.4.2',
+  version: '0.4.3',
   description: 'Page-level PDF operations performed locally in the browser.',
   entry: './',
   icon: './favicon.svg',
@@ -54,7 +54,7 @@ export const onenoteManifest: ToolboxAppManifest = {
   ...pdfManifest,
   id: 'de.add-ideas.onenote-tools',
   name: 'OneNote Reader',
-  version: '0.3.2',
+  version: '0.3.3',
   description: 'Inspect OneNote packages locally in the browser.',
   icon: './onenote.svg',
   categories: ['documents', 'notes'],

src/toolPresentation.ts

@@ -0,0 +1,27 @@
+import type { ResolvedApp } from './types';
+
+const PRESENTATION: Record<string, { title: string; description: string }> = {
+  'de.add-ideas.pdf-tools': {
+    title: 'PDF',
+    description: 'Arrange PDF pages locally.',
+  },
+  'de.add-ideas.xslt-tools': {
+    title: 'XSLT',
+    description: 'Transform XML locally.',
+  },
+  'de.add-ideas.onenote-tools': {
+    title: 'OneNote',
+    description: 'Open OneNote files locally.',
+  },
+};
+
+export function shortToolTitle(app: ResolvedApp): string {
+  return (
+    PRESENTATION[app.id]?.title ??
+    app.name.replace(/\s+(?:reader|tools?|workbench)$/iu, '')
+  );
+}
+
+export function shortToolDescription(app: ResolvedApp): string {
+  return PRESENTATION[app.id]?.description ?? app.description;
+}