lotobo/toolbox-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

Compare commits

base: lotobo:v0.4.0
Branches Tags
lotobo:main
lotobo:v0.9.3 lotobo:v0.9.2 lotobo:v0.9.1 lotobo:v0.9.0 lotobo:v0.8.0 lotobo:v0.7.0 lotobo:v0.6.0 lotobo:v0.5.0 lotobo:v0.4.3 lotobo:v0.4.2 lotobo:v0.4.1 lotobo:v0.4.0 lotobo:v0.3.1 lotobo:v0.3.0 lotobo:v0.2.0 lotobo:v0.1.0
...
compare: lotobo:v0.9.3
Branches Tags
lotobo:main
lotobo:v0.9.3 lotobo:v0.9.2 lotobo:v0.9.1 lotobo:v0.9.0 lotobo:v0.8.0 lotobo:v0.7.0 lotobo:v0.6.0 lotobo:v0.5.0 lotobo:v0.4.3 lotobo:v0.4.2 lotobo:v0.4.1 lotobo:v0.4.0 lotobo:v0.3.1 lotobo:v0.3.0 lotobo:v0.2.0 lotobo:v0.1.0

14 Commits
v0.4.0 ... v0.9.3

Author SHA1 Message Date
Albrecht Degering
55b2b12434 feat: publish Toolbox 0.9.3 with AV Tools 0.3.0 2026-07-28 00:33:36 +02:00
Albrecht Degering
f0b2ce34e4 feat: publish Toolbox 0.9.2 from LocalToolBox 2026-07-27 15:58:41 +02:00
Albrecht Degering
43670a5824 fix: serve engine modules with JavaScript MIME 2026-07-27 13:08:06 +02:00
Albrecht Degering
a50944e7cb feat: publish Toolbox 0.9.0 2026-07-27 11:48:21 +02:00
Albrecht Degering
9347554324 feat: publish Toolbox 0.8.0 2026-07-27 02:09:09 +02:00
Albrecht Degering
470ee49ca2 feat: publish Toolbox 0.7.0 2026-07-27 01:16:20 +02:00
Albrecht Degering
5c052bc6d1 feat: publish Toolbox 0.6.0 with regex-tools 2026-07-24 18:14:47 +02:00
Albrecht Degering
a9c31c8986 fix: harden media and WebAssembly delivery 2026-07-24 15:09:33 +02:00
Albrecht Degering
1f00e6def1 feat: publish Toolbox 0.5.0 with av-tools 2026-07-24 15:09:28 +02:00
Albrecht Degering
bda9da044d drag handle adjustment 2026-07-23 14:41:21 +02:00
Albrecht Degering
2c13c56362 feat: add compact Toolbox tiles and details overlay 2026-07-23 13:02:29 +02:00
Albrecht Degering
803397ff52 fix: reverse Toolbox header orientation 2026-07-23 01:57:52 +02:00
Albrecht Degering
21283ce25f fix: preserve hidden tool visibility 2026-07-23 01:23:32 +02:00
Albrecht Degering
e44d35fdfb fix: stabilize Toolbox navigation layout 2026-07-23 01:21:16 +02:00
30 changed files with 1843 additions and 1415 deletions
Expand all files Collapse all files

4
.env.example
View File

@@ -4,5 +4,5 @@ TRAEFIK_NETWORK=internal
TRAEFIK_CERT_RESOLVER=netcup TRAEFIK_CERT_RESOLVER=netcup
# Keep these two values paired when deploying a newer published toolbox release. # Keep these two values paired when deploying a newer published toolbox release.
TOOLBOX_RELEASE_VERSION=0.4.0 TOOLBOX_RELEASE_VERSION=0.9.3
TOOLBOX_RELEASE_SHA256=0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112 TOOLBOX_RELEASE_SHA256=e8e6cae8c68bacb71d803e37ff2661389841642db0ccc827fd10655c6cceb18e

2
.npmrc
View File

@@ -1 +1 @@
@add-ideas:registry=https://git.add-ideas.de/api/packages/zemion/npm/ @add-ideas:registry=https://git.add-ideas.de/api/packages/lotobo/npm/

8
Containerfile.release
View File

@@ -2,9 +2,9 @@ ARG NGINX_IMAGE=nginxinc/nginx-unprivileged:1.31.3-alpine@sha256:18d67281256ded3
FROM ${NGINX_IMAGE} AS release FROM ${NGINX_IMAGE} AS release
ARG TOOLBOX_RELEASE_VERSION=0.4.0 ARG TOOLBOX_RELEASE_VERSION=0.9.3
ARG TOOLBOX_RELEASE_SHA256=0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112 ARG TOOLBOX_RELEASE_SHA256=e8e6cae8c68bacb71d803e37ff2661389841642db0ccc827fd10655c6cceb18e
ARG TOOLBOX_RELEASE_BASE_URL=https://git.add-ideas.de/zemion/toolbox-portal/releases/download ARG TOOLBOX_RELEASE_BASE_URL=https://git.add-ideas.de/lotobo/toolbox-portal/releases/download
RUN set -eu; \ RUN set -eu; \
archive="add-ideas-toolbox-${TOOLBOX_RELEASE_VERSION}.zip"; \ archive="add-ideas-toolbox-${TOOLBOX_RELEASE_VERSION}.zip"; \
@@ -21,6 +21,8 @@ RUN set -eu; \
test -f /tmp/toolbox/apps/pdf/toolbox-app.json; \ test -f /tmp/toolbox/apps/pdf/toolbox-app.json; \
test -f /tmp/toolbox/apps/xslt/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/onenote/toolbox-app.json; \
test -f /tmp/toolbox/apps/av/toolbox-app.json; \
test -f /tmp/toolbox/apps/regex/toolbox-app.json; \
rm "/tmp/${archive}" rm "/tmp/${archive}"
FROM ${NGINX_IMAGE} FROM ${NGINX_IMAGE}

133
README.md
View File

@@ -1,8 +1,8 @@
# add·ideas Toolbox Portal # add·ideas Toolbox Portal
`toolbox-portal` is the static launcher and release assembler for the add·ideas `toolbox-portal` is the static launcher and release assembler for the add·ideas
browser toolbox. Version `0.2.0` reads one same-origin catalogue, shows each app browser toolbox. Version `0.2.11` 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 visibility, and appearance in the current browser. Pinned tools have their own
section; search, category, and clickable tag filters stay close to the tool section; search, category, and clickable tag filters stay close to the tool
list. list.
@@ -30,15 +30,16 @@ npm run build
npm run dev npm run dev
``` ```
The package lock resolves the `^0.2.0` SDK ranges to the published `0.2.0` The package lock resolves the `^0.2.3` SDK ranges to the published `0.2.3`
packages. A sibling SDK checkout is only needed when intentionally developing packages. A sibling SDK checkout is only needed when intentionally developing
the SDK and portal together. the SDK and portal together.
Vite uses `base: './'`, so the built portal works at `/` or a nested static path. 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 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/`, `./apps/av/`, and
will correctly appear as unavailable until an assembled release is being `./apps/regex/`).
served. Those manifests will correctly appear as unavailable until an assembled release
is being served.
## Catalogue and launches ## Catalogue and launches
@@ -68,7 +69,7 @@ privacy and executable-code warning. Light, dark, and system modes are supported
## Production deployment behind Traefik ## Production deployment behind Traefik
The committed `compose.yaml` is the shortest production path. Its release The committed `compose.yaml` is the shortest production path. Its release
container downloads the immutable Toolbox 0.4.0 ZIP during the image build, container downloads the immutable Toolbox 0.9.3 ZIP during the image build,
verifies SHA-256 before extracting it, and then copies only the verified static 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 files into the pinned unprivileged nginx image. Node.js and a local portal
assembly are not required on the deployment host. assembly are not required on the deployment host.
@@ -77,7 +78,7 @@ Prerequisites:
- Docker with the Compose plugin; - Docker with the Compose plugin;
- Traefik attached to the existing external Docker network `internal`; - Traefik attached to the existing external Docker network `internal`;
- a Traefik HTTPS entrypoint named `websecure`; - Traefik HTTP and HTTPS entrypoints named `web` and `websecure`;
- a certificate resolver named `netcup`; - a certificate resolver named `netcup`;
- DNS for `toolbox.add-ideas.de` pointing to that Traefik instance; and - DNS for `toolbox.add-ideas.de` pointing to that Traefik instance; and
- outbound HTTPS access to `git.add-ideas.de` while the image is built. - outbound HTTPS access to `git.add-ideas.de` while the image is built.
@@ -85,14 +86,15 @@ Prerequisites:
Deploy a fresh clone with: Deploy a fresh clone with:
```sh ```sh
git clone https://git.add-ideas.de/zemion/toolbox-portal.git git clone https://git.add-ideas.de/lotobo/toolbox-portal.git
cd toolbox-portal cd toolbox-portal
docker compose up -d --build docker compose up -d --build
docker compose ps docker compose ps
``` ```
No host port is published. Traefik routes No host port is published. Traefik permanently redirects
`https://toolbox.add-ideas.de` to nginx on the shared network at port 8080 and `http://toolbox.add-ideas.de` to HTTPS, routes
`https://toolbox.add-ideas.de` to nginx on the shared network at port 8080, and
obtains its TLS certificate through `netcup`. The hostname, network, resolver, obtains its TLS certificate through `netcup`. The hostname, network, resolver,
release version, and matching checksum can be overridden through environment release version, and matching checksum can be overridden through environment
variables; copy `.env.example` to `.env` only when an override is needed. For variables; copy `.env.example` to `.env` only when an override is needed. For
@@ -119,9 +121,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 must declare the pinned reverse-DNS id and version. Application and portal
versions are independent. versions are independent.
`release/toolbox.lock.json` is the reviewed v0.4.0 lock. Its URLs and checksums `release/toolbox.lock.json` is the reviewed v0.9.3 lock. Its URLs and checksums
pin the published PDF Tools 0.4.0, XSLT Tools 0.4.0, and OneNote Tools 0.3.0 pin the published PDF Tools 0.4.4, XSLT Tools 0.4.3, OneNote Tools 0.3.4,
release bytes. Use Audio & Video Tools 0.3.0, and Regex Tools 0.4.2 release bytes. Use
`release/toolbox.lock.example.json` as the template for a future release and `release/toolbox.lock.example.json` as the template for a future release and
verify every downloaded asset before committing updated values. Artifacts may be: verify every downloaded asset before committing updated values. Artifacts may be:
@@ -142,7 +144,7 @@ npm run assemble -- \
--lock release/toolbox.lock.json \ --lock release/toolbox.lock.json \
--portal-dist dist \ --portal-dist dist \
--output build/toolbox \ --output build/toolbox \
--archive build/add-ideas-toolbox-0.4.0.zip --archive build/add-ideas-toolbox-0.9.3.zip
``` ```
Existing output is refused. Pass `--force` only when replacing those exact Existing output is refused. Pass `--force` only when replacing those exact
@@ -160,10 +162,12 @@ build/toolbox/
└── apps/ └── apps/
├── pdf/ ├── pdf/
├── xslt/ ├── xslt/
└── onenote/ ├── onenote/
├── av/
└── regex/
build/add-ideas-toolbox-0.4.0.zip build/add-ideas-toolbox-0.9.3.zip
build/add-ideas-toolbox-0.4.0.zip.sha256 build/add-ideas-toolbox-0.9.3.zip.sha256
``` ```
The assembler verifies SHA-256 before opening an artifact, validates every app The assembler verifies SHA-256 before opening an artifact, validates every app
@@ -184,16 +188,18 @@ directory separately:
```sh ```sh
npm run package:static -- \ npm run package:static -- \
--input build/toolbox \ --input build/toolbox \
--output artifacts/add-ideas-toolbox-0.4.0.zip --output artifacts/add-ideas-toolbox-0.9.3.zip
``` ```
This also emits a `.sha256` sidecar. This also emits a `.sha256` sidecar.
## Local assembled container and publication ## 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/javascript` for `.mjs` engine modules and `application/wasm`,
Assemble first, then: immutable caching only for Vite-hashed assets and narrowly
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 The packaged policy intentionally does not grant CSP `unsafe-eval`. SaxonJS's
`ixsl:eval()` extension is therefore unsupported in this deployment profile; `ixsl:eval()` extension is therefore unsupported in this deployment profile;
@@ -201,9 +207,9 @@ normal local XML/XSLT transformations do not require that permission.
```sh ```sh
podman build -f Containerfile \ podman build -f Containerfile \
-t git.add-ideas.de/zemion/toolbox:0.4.0 . -t git.add-ideas.de/lotobo/toolbox:0.9.3 .
podman run --rm -p 8080:8080 \ podman run --rm -p 8080:8080 \
git.add-ideas.de/zemion/toolbox:0.4.0 git.add-ideas.de/lotobo/toolbox:0.9.3
``` ```
For a direct-port local deployment after assembly, use the separate example: For a direct-port local deployment after assembly, use the separate example:
@@ -220,8 +226,8 @@ docker login git.add-ideas.de
docker buildx build \ docker buildx build \
--platform linux/amd64,linux/arm64 \ --platform linux/amd64,linux/arm64 \
--file Containerfile.release \ --file Containerfile.release \
--tag git.add-ideas.de/zemion/toolbox:0.4.0 \ --tag git.add-ideas.de/lotobo/toolbox:0.9.3 \
--tag git.add-ideas.de/zemion/toolbox:0.4 \ --tag git.add-ideas.de/lotobo/toolbox:0.9 \
--push . --push .
``` ```
@@ -232,9 +238,9 @@ notes.
## Manual Gitea publication checklist ## 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. `lotobo/toolbox-portal`.
1. Run `npm ci`, `npm test`, `npm run lint`, and `npm run build` from a clean 1. Run `npm ci`, `npm test`, `npm run lint`, and `npm run build` from a clean
checkout of the intended portal tag. checkout of the intended portal tag.
@@ -243,11 +249,11 @@ permission to push code, releases, and container packages.
3. Verify downloaded app assets with `sha256sum -c <asset>.sha256`; copy those 3. Verify downloaded app assets with `sha256sum -c <asset>.sha256`; copy those
exact values into a reviewed toolbox lock. exact values into a reviewed toolbox lock.
4. Run the assembler and serve `build/toolbox` from a nested test path. Open 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 five apps, switch between them, and confirm the encoded `toolbox`
context. context.
5. Verify the distribution with 5. Verify the distribution with
`(cd build && sha256sum -c add-ideas-toolbox-0.4.0.zip.sha256)`. `(cd build && sha256sum -c add-ideas-toolbox-0.9.3.zip.sha256)`.
6. Commit the reviewed lock, tag the toolbox release (for example `v0.4.0`), and 6. Commit the reviewed lock, tag the toolbox release (for example `v0.9.3`), and
push the branch and tag to Gitea. push the branch and tag to Gitea.
7. In Gitea, open **Releases → New release**, select the tag, and upload the 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 static ZIP plus its `.sha256` file. Do not use a mutable “latest” URL in a
@@ -263,59 +269,66 @@ must not re-resolve app versions or substitute a newer release.
## Existing tools ## Existing tools
| Tool | State and boundary | Principal workflows | Important concrete scope | Critical considerations and integrations | | 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` | | **`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` | | **`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 | | **`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.3.0 release; dedicated repository | Convert and lightly edit audio and video locally in the browser | Immediate native playback and basic file information; progressive stream inspection on demand; quick conversion; trim, split and crossfade concatenate; crop, resize, normalize, fades, waveform, metadata, chapters, subtitles, scene thumbnails/contact sheets, presets and export | Reviewed ffmpeg.wasm 0.12.10 ST/MT build with verified Opus and bundled label font; bounded queue, temporary storage and resource policy; isolation enables MT with automatic ST fallback; versioned core assets are immutable |
| **`regex-tools`** | Current local-first v0.4.2 release; dedicated repository | Develop, explain, test and apply JavaScript, PCRE2, PHP, Perl, Python, Ruby, Java, C++, Go, .NET, Rust and Scala/JVM-compatible regular expressions | Deterministic syntax trees; engine-native matching, captures and bounded replacement; stable double-buffered live results; PCRE2 tracing and C17 generation; comparison; corpus apply; tests; risk/growth/benchmark analysis; generated cases; bounded minimization; validated ECMAScript formatting; project import/export and optional local persistence | Open-source regexpp and pinned local WebAssembly runtimes for PCRE2, PHP preg, legacy Perl, CPython, CRuby, TeaVM Java/Scala compatibility, libc++ C++, Go, .NET and Rust in killable workers; explicit source/licence inventories, resource limits and engine-specific offset semantics |
## Planned tools ## Planned tools
| Tool | State and boundary | Principal workflows | Important concrete scope | Critical considerations and integrations | | 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 | | **`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 |
| **`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` | | **`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 | | **`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 | | **`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 | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 | | | **`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 ## Licensing

2
compose.example.yaml
View File

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

13
compose.yaml
View File

@@ -6,9 +6,9 @@ services:
context: . context: .
dockerfile: Containerfile.release dockerfile: Containerfile.release
args: args:
TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.4.0}" TOOLBOX_RELEASE_VERSION: "${TOOLBOX_RELEASE_VERSION:-0.9.3}"
TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-0264f5ee2c545c10c50b96a5b6d55c3576b39bb29c546e1e4f1459fec4e8e112}" TOOLBOX_RELEASE_SHA256: "${TOOLBOX_RELEASE_SHA256:-e8e6cae8c68bacb71d803e37ff2661389841642db0ccc827fd10655c6cceb18e}"
image: "git.add-ideas.de/zemion/toolbox:${TOOLBOX_RELEASE_VERSION:-0.4.0}" image: "git.add-ideas.de/lotobo/toolbox:${TOOLBOX_RELEASE_VERSION:-0.9.3}"
restart: unless-stopped restart: unless-stopped
read_only: true read_only: true
tmpfs: tmpfs:
@@ -30,6 +30,13 @@ services:
traefik.http.routers.addideas-toolbox.tls: "true" traefik.http.routers.addideas-toolbox.tls: "true"
traefik.http.routers.addideas-toolbox.tls.certresolver: "${TRAEFIK_CERT_RESOLVER:-netcup}" traefik.http.routers.addideas-toolbox.tls.certresolver: "${TRAEFIK_CERT_RESOLVER:-netcup}"
traefik.http.routers.addideas-toolbox.service: addideas-toolbox traefik.http.routers.addideas-toolbox.service: addideas-toolbox
traefik.http.routers.addideas-toolbox-http.rule: "Host(`${TOOLBOX_HOST:-toolbox.add-ideas.de}`)"
traefik.http.routers.addideas-toolbox-http.priority: 900
traefik.http.routers.addideas-toolbox-http.entrypoints: web
traefik.http.routers.addideas-toolbox-http.middlewares: addideas-toolbox-https-redirect
traefik.http.routers.addideas-toolbox-http.service: addideas-toolbox
traefik.http.middlewares.addideas-toolbox-https-redirect.redirectscheme.scheme: https
traefik.http.middlewares.addideas-toolbox-https-redirect.redirectscheme.permanent: "true"
traefik.http.services.addideas-toolbox.loadbalancer.server.port: "8080" traefik.http.services.addideas-toolbox.loadbalancer.server.port: "8080"
networks: networks:

19
deploy/nginx.conf
View File

@@ -1,6 +1,7 @@
map $uri $toolbox_cache_control { map $uri $toolbox_cache_control {
default "no-cache"; default "no-cache";
"~^/(?:.*/)?assets/.*-[A-Za-z0-9_-]{8,}\.[^/]+$" "public, max-age=31536000, immutable"; "~^/(?:.*/)?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]*)|0\.12\.10-reviewed-stack5m\.1)/(?:version\.json|(?:st|mt)/ffmpeg-core\.(?:js|wasm)|mt/ffmpeg-core\.worker\.js)$" "public, max-age=31536000, immutable";
} }
server { server {
@@ -20,7 +21,7 @@ server {
add_header Cross-Origin-Embedder-Policy "require-corp" always; add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Resource-Policy "same-origin" always; add_header Cross-Origin-Resource-Policy "same-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=(), usb=()" 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; add_header Cache-Control $toolbox_cache_control always;
gzip on; gzip on;
@@ -32,7 +33,21 @@ server {
try_files $uri =404; 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 ~* \.mjs$ {
types {
application/javascript mjs;
}
try_files $uri =404;
}
location ~* \.(?:css|js|mjs|woff2?|png|jpe?g|gif|webp|svg|ico|webmanifest)$ {
try_files $uri =404; try_files $uri =404;
} }

575
package-lock.json generated
View File

@@ -1,16 +1,16 @@
{ {
"name": "@add-ideas/toolbox-portal", "name": "@add-ideas/toolbox-portal",
"version": "0.2.0", "version": "0.2.11",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@add-ideas/toolbox-portal", "name": "@add-ideas/toolbox-portal",
"version": "0.2.0", "version": "0.2.11",
"license": "AGPL-3.0-only", "license": "AGPL-3.0-only",
"dependencies": { "dependencies": {
"@add-ideas/toolbox-contract": "^0.2.0", "@add-ideas/toolbox-contract": "^0.2.3",
"@add-ideas/toolbox-shell-react": "^0.2.0", "@add-ideas/toolbox-shell-react": "^0.2.3",
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0", "@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2", "@dnd-kit/utilities": "^3.2.2",
@@ -26,7 +26,7 @@
"@types/react": "^19.2.14", "@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.2", "@vitejs/plugin-react": "^6.0.2",
"archiver": "^7.0.1", "archiver": "^8.0.0",
"eslint": "^10.4.0", "eslint": "^10.4.0",
"eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.2", "eslint-plugin-react-refresh": "^0.5.2",
@@ -44,18 +44,18 @@
} }
}, },
"node_modules/@add-ideas/toolbox-contract": { "node_modules/@add-ideas/toolbox-contract": {
"version": "0.2.0", "version": "0.2.3",
"resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-contract/-/0.2.0/toolbox-contract-0.2.0.tgz", "resolved": "https://git.add-ideas.de/api/packages/lotobo/npm/%40add-ideas%2Ftoolbox-contract/-/0.2.3/toolbox-contract-0.2.3.tgz",
"integrity": "sha512-up+wY+ft1L7TbXrflcTeTOwEdcFwHBWFlGFj8skQvcLy5z2mDBpd6/7PVQKDvDTkiODu2npviHm6AFglFw+17Q==", "integrity": "sha512-T0PVSuMT40GjTDfQJhEEY3ZawQq8zz1/ry95JdKI6W39CdLacaRXdGnEpDCMHt+jUbf1Jz7Nat/M5dFCgKVM9A==",
"license": "Apache-2.0" "license": "Apache-2.0"
}, },
"node_modules/@add-ideas/toolbox-shell-react": { "node_modules/@add-ideas/toolbox-shell-react": {
"version": "0.2.0", "version": "0.2.3",
"resolved": "https://git.add-ideas.de/api/packages/zemion/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.2.0/toolbox-shell-react-0.2.0.tgz", "resolved": "https://git.add-ideas.de/api/packages/lotobo/npm/%40add-ideas%2Ftoolbox-shell-react/-/0.2.3/toolbox-shell-react-0.2.3.tgz",
"integrity": "sha512-qYR+OBXX8rfB+BYCsUbpiCzo2xK12SIPWVNXHre158Da5uT6usr8rRvp5qa5u2oQJ50PNzlXyXMyTeRp0Vz5wg==", "integrity": "sha512-DT5lQDH48BFkFcmFLZnQh7+Cm73JzBPcmp5WzUXypfkUXpEyDYHzaXgmW4kZ0edSwh4RK4sPmx+JPtK0X4aKCQ==",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@add-ideas/toolbox-contract": "0.2.0" "@add-ideas/toolbox-contract": "0.2.3"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=18 <20", "react": ">=18 <20",
@@ -822,24 +822,6 @@
"url": "https://github.com/sponsors/nzakas" "url": "https://github.com/sponsors/nzakas"
} }
}, },
"node_modules/@isaacs/cliui": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
"integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
"dev": true,
"license": "ISC",
"dependencies": {
"string-width": "^5.1.2",
"string-width-cjs": "npm:string-width@^4.2.0",
"strip-ansi": "^7.0.1",
"strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
"wrap-ansi": "^8.1.0",
"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13", "version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -919,17 +901,6 @@
"url": "https://github.com/sponsors/Boshen" "url": "https://github.com/sponsors/Boshen"
} }
}, },
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
"integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
"dev": true,
"license": "MIT",
"optional": true,
"engines": {
"node": ">=14"
}
},
"node_modules/@rolldown/binding-android-arm64": { "node_modules/@rolldown/binding-android-arm64": {
"version": "1.1.5", "version": "1.1.5",
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz",
@@ -1838,6 +1809,7 @@
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
} }
@@ -1857,41 +1829,24 @@
} }
}, },
"node_modules/archiver": { "node_modules/archiver": {
"version": "7.0.1", "version": "8.0.0",
"resolved": "https://registry.npmjs.org/archiver/-/archiver-7.0.1.tgz", "resolved": "https://registry.npmjs.org/archiver/-/archiver-8.0.0.tgz",
"integrity": "sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==", "integrity": "sha512-fV1orZfsnPn9BaSByR/qE67rJCLJEy2Ox5bq7nJh+jquWaNh6Sfec75kJ2T6PtdGUbPQlrVoSVCEOa5SdiTQ1g==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"archiver-utils": "^5.0.2",
"async": "^3.2.4", "async": "^3.2.4",
"buffer-crc32": "^1.0.0", "buffer-crc32": "^1.0.0",
"readable-stream": "^4.0.0", "is-stream": "^4.0.0",
"readdir-glob": "^1.1.2",
"tar-stream": "^3.0.0",
"zip-stream": "^6.0.1"
},
"engines": {
"node": ">= 14"
}
},
"node_modules/archiver-utils": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-5.0.2.tgz",
"integrity": "sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==",
"dev": true,
"license": "MIT",
"dependencies": {
"glob": "^10.0.0",
"graceful-fs": "^4.2.0",
"is-stream": "^2.0.1",
"lazystream": "^1.0.0", "lazystream": "^1.0.0",
"lodash": "^4.17.15",
"normalize-path": "^3.0.0", "normalize-path": "^3.0.0",
"readable-stream": "^4.0.0" "readable-stream": "^4.0.0",
"readdir-glob": "^3.0.0",
"tar-stream": "^3.0.0",
"zip-stream": "^7.0.2"
}, },
"engines": { "engines": {
"node": ">= 14" "node": ">=18"
} }
}, },
"node_modules/aria-query": { "node_modules/aria-query": {
@@ -2076,16 +2031,16 @@
} }
}, },
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "5.0.7", "version": "5.0.8",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.8.tgz",
"integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==", "integrity": "sha512-JZyDyq3D4AUifKTPOB7DELf6XsB3WdPuNxCtob1vFXPsSXhdAiHBWJ/tJ8HAc9aH84BK+5JFZLNkJKx3G9kzQg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"balanced-match": "^4.0.2" "balanced-match": "^4.0.2"
}, },
"engines": { "engines": {
"node": "18 || 20 || >=22" "node": "20 || >=22"
} }
}, },
"node_modules/browserslist": { "node_modules/browserslist": {
@@ -2188,41 +2143,21 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"license": "MIT"
},
"node_modules/compress-commons": { "node_modules/compress-commons": {
"version": "6.0.2", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-6.0.2.tgz", "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-7.0.1.tgz",
"integrity": "sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==", "integrity": "sha512-g0S8KAD8qf4+V//pr3BfB1aBnARLXNz2Gx+jmHU0LEriUuoQUOPOulVquHKTJ8+EAIIO7fhseNDr9wK5Q9FKBQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"crc-32": "^1.2.0", "crc-32": "^1.2.0",
"crc32-stream": "^6.0.0", "crc32-stream": "^7.0.1",
"is-stream": "^2.0.1", "is-stream": "^4.0.0",
"normalize-path": "^3.0.0", "normalize-path": "^3.0.0",
"readable-stream": "^4.0.0" "readable-stream": "^4.0.0"
}, },
"engines": { "engines": {
"node": ">= 14" "node": ">=18"
} }
}, },
"node_modules/convert-source-map": { "node_modules/convert-source-map": {
@@ -2253,9 +2188,9 @@
} }
}, },
"node_modules/crc32-stream": { "node_modules/crc32-stream": {
"version": "6.0.0", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-6.0.0.tgz", "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-7.0.1.tgz",
"integrity": "sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==", "integrity": "sha512-IBWsY8xznyQrcHn8h4bC8/4ErNke5elzgG8GcqF4RFPw6aHkWWRc7Tgw6upjaTX/CT/yQgqYENkxYsTYN+hW2g==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@@ -2263,7 +2198,7 @@
"readable-stream": "^4.0.0" "readable-stream": "^4.0.0"
}, },
"engines": { "engines": {
"node": ">= 14" "node": ">=18"
} }
}, },
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
@@ -2383,13 +2318,6 @@
"license": "MIT", "license": "MIT",
"peer": true "peer": true
}, },
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
"dev": true,
"license": "MIT"
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.393", "version": "1.5.393",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.393.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.393.tgz",
@@ -2397,13 +2325,6 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
"dev": true,
"license": "MIT"
},
"node_modules/entities": { "node_modules/entities": {
"version": "8.0.0", "version": "8.0.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz", "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
@@ -2779,23 +2700,6 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/foreground-child": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
"integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
"dev": true,
"license": "ISC",
"dependencies": {
"cross-spawn": "^7.0.6",
"signal-exit": "^4.0.1"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/fsevents": { "node_modules/fsevents": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2821,28 +2725,6 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/glob": {
"version": "10.5.0",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
"integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
"deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
"dev": true,
"license": "ISC",
"dependencies": {
"foreground-child": "^3.1.0",
"jackspeak": "^3.1.2",
"minimatch": "^9.0.4",
"minipass": "^7.1.2",
"package-json-from-dist": "^1.0.0",
"path-scurry": "^1.11.1"
},
"bin": {
"glob": "dist/esm/bin.mjs"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/glob-parent": { "node_modules/glob-parent": {
"version": "6.0.2", "version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2856,39 +2738,6 @@
"node": ">=10.13.0" "node": ">=10.13.0"
} }
}, },
"node_modules/glob/node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true,
"license": "MIT"
},
"node_modules/glob/node_modules/brace-expansion": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.2.tgz",
"integrity": "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
}
},
"node_modules/glob/node_modules/minimatch": {
"version": "9.0.9",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.2"
},
"engines": {
"node": ">=16 || 14 >=14.17"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/globals": { "node_modules/globals": {
"version": "17.7.0", "version": "17.7.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-17.7.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-17.7.0.tgz",
@@ -2902,13 +2751,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"dev": true,
"license": "ISC"
},
"node_modules/hermes-estree": { "node_modules/hermes-estree": {
"version": "0.25.1", "version": "0.25.1",
"resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz", "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -3007,16 +2849,6 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/is-glob": { "node_modules/is-glob": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3038,13 +2870,13 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/is-stream": { "node_modules/is-stream": {
"version": "2.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=8" "node": ">=18"
}, },
"funding": { "funding": {
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
@@ -3064,22 +2896,6 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/jackspeak": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/cliui": "^8.0.2"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
},
"optionalDependencies": {
"@pkgjs/parseargs": "^0.11.0"
}
},
"node_modules/js-tokens": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3544,13 +3360,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/lodash": {
"version": "4.18.1",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
"integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
"dev": true,
"license": "MIT"
},
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3615,16 +3424,6 @@
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
} }
}, },
"node_modules/minipass": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
"integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
"dev": true,
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3742,13 +3541,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/package-json-from-dist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
"dev": true,
"license": "BlueOak-1.0.0"
},
"node_modules/parse5": { "node_modules/parse5": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz", "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
@@ -3782,30 +3574,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/path-scurry": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
"integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"lru-cache": "^10.2.0",
"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
},
"engines": {
"node": ">=16 || 14 >=14.18"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/path-scurry/node_modules/lru-cache": {
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"dev": true,
"license": "ISC"
},
"node_modules/pathe": { "node_modules/pathe": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -3985,43 +3753,19 @@
} }
}, },
"node_modules/readdir-glob": { "node_modules/readdir-glob": {
"version": "1.1.3", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz", "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-3.0.0.tgz",
"integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==", "integrity": "sha512-AhNB2KgKeVJr16nK9LLZbJNWnYoT23ZrumNKFDebHBdkC8KHSqWo871JAUhoWC/RtjEVdqNMFpM6qrwRbaUqpw==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"minimatch": "^5.1.0" "minimatch": "^10.2.2"
}
},
"node_modules/readdir-glob/node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true,
"license": "MIT"
},
"node_modules/readdir-glob/node_modules/brace-expansion": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.2.tgz",
"integrity": "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
}
},
"node_modules/readdir-glob/node_modules/minimatch": {
"version": "5.1.9",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
"integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
}, },
"engines": { "engines": {
"node": ">=10" "node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/yqnn"
} }
}, },
"node_modules/redent": { "node_modules/redent": {
@@ -4162,19 +3906,6 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/signal-exit": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/source-map-js": { "node_modules/source-map-js": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4221,103 +3952,6 @@
"safe-buffer": "~5.2.0" "safe-buffer": "~5.2.0"
} }
}, },
"node_modules/string-width": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
"dev": true,
"license": "MIT",
"dependencies": {
"eastasianwidth": "^0.2.0",
"emoji-regex": "^9.2.2",
"strip-ansi": "^7.0.1"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/string-width-cjs": {
"name": "string-width",
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/string-width-cjs/node_modules/emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true,
"license": "MIT"
},
"node_modules/string-width-cjs/node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/strip-ansi": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
"integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^6.2.2"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/strip-ansi?sponsor=1"
}
},
"node_modules/strip-ansi-cjs": {
"name": "strip-ansi",
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/strip-ansi/node_modules/ansi-regex": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
"integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/ansi-regex?sponsor=1"
}
},
"node_modules/strip-indent": { "node_modules/strip-indent": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -4855,107 +4489,6 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/wrap-ansi": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^6.1.0",
"string-width": "^5.0.1",
"strip-ansi": "^7.0.1"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
},
"node_modules/wrap-ansi-cjs": {
"name": "wrap-ansi",
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
},
"node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true,
"license": "MIT"
},
"node_modules/wrap-ansi-cjs/node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
"strip-ansi": "^6.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/wrap-ansi/node_modules/ansi-styles": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
"integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/xml-name-validator": { "node_modules/xml-name-validator": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
@@ -5007,18 +4540,18 @@
} }
}, },
"node_modules/zip-stream": { "node_modules/zip-stream": {
"version": "6.0.1", "version": "7.0.5",
"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-6.0.1.tgz", "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-7.0.5.tgz",
"integrity": "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==", "integrity": "sha512-dSvYKdvLsAHCDqPOhIwk/q5CvuWtTB3Dgpoe0uVEFjTzIOAmsQpprX25InCvrvJsirEbu1OHyy67n/kAj1Sw/w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"archiver-utils": "^5.0.0", "compress-commons": "^7.0.0",
"compress-commons": "^6.0.2", "normalize-path": "^3.0.0",
"readable-stream": "^4.0.0" "readable-stream": "^4.0.0"
}, },
"engines": { "engines": {
"node": ">= 14" "node": ">=18"
} }
}, },
"node_modules/zod": { "node_modules/zod": {

16
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@add-ideas/toolbox-portal", "name": "@add-ideas/toolbox-portal",
"version": "0.2.0", "version": "0.2.11",
"license": "AGPL-3.0-only", "license": "AGPL-3.0-only",
"private": true, "private": true,
"type": "module", "type": "module",
@@ -21,8 +21,8 @@
"package:static": "node scripts/package-static.mjs" "package:static": "node scripts/package-static.mjs"
}, },
"dependencies": { "dependencies": {
"@add-ideas/toolbox-contract": "^0.2.0", "@add-ideas/toolbox-contract": "^0.2.3",
"@add-ideas/toolbox-shell-react": "^0.2.0", "@add-ideas/toolbox-shell-react": "^0.2.3",
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0", "@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2", "@dnd-kit/utilities": "^3.2.2",
@@ -38,7 +38,7 @@
"@types/react": "^19.2.14", "@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.2", "@vitejs/plugin-react": "^6.0.2",
"archiver": "^7.0.1", "archiver": "^8.0.0",
"eslint": "^10.4.0", "eslint": "^10.4.0",
"eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.2", "eslint-plugin-react-refresh": "^0.5.2",
@@ -53,5 +53,13 @@
}, },
"engines": { "engines": {
"node": ">=22" "node": ">=22"
},
"repository": {
"type": "git",
"url": "git+https://git.add-ideas.de/lotobo/toolbox-portal.git"
},
"homepage": "https://git.add-ideas.de/lotobo/toolbox-portal",
"bugs": {
"url": "https://git.add-ideas.de/lotobo/toolbox-portal/issues"
} }
} }

4
public/SOURCE.md
View File

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

10
public/toolbox.catalog.json
View File

@@ -1,5 +1,5 @@
{ {
"$schema": "https://git.add-ideas.de/zemion/toolbox-sdk/raw/branch/main/schemas/toolbox-catalog.v1.schema.json", "$schema": "https://git.add-ideas.de/lotobo/toolbox-sdk/raw/branch/main/schemas/toolbox-catalog.v1.schema.json",
"schemaVersion": 1, "schemaVersion": 1,
"id": "de.add-ideas.toolbox", "id": "de.add-ideas.toolbox",
"name": "add·ideas Toolbox", "name": "add·ideas Toolbox",
@@ -20,6 +20,14 @@
{ {
"manifest": "./apps/onenote/toolbox-app.json", "manifest": "./apps/onenote/toolbox-app.json",
"enabled": true "enabled": true
},
{
"manifest": "./apps/av/toolbox-app.json",
"enabled": true
},
{
"manifest": "./apps/regex/toolbox-app.json",
"enabled": true
} }
] ]
} }

2
release/toolbox-release-lock.schema.json
View File

@@ -1,6 +1,6 @@
{ {
"$schema": "https://json-schema.org/draft/2020-12/schema", "$schema": "https://json-schema.org/draft/2020-12/schema",
"$id": "https://git.add-ideas.de/zemion/toolbox-portal/raw/branch/main/release/toolbox-release-lock.schema.json", "$id": "https://git.add-ideas.de/lotobo/toolbox-portal/raw/branch/main/release/toolbox-release-lock.schema.json",
"title": "add·ideas Toolbox release lock v1", "title": "add·ideas Toolbox release lock v1",
"description": "Pins the exact portal and checksummed application archives used to assemble one static toolbox release.", "description": "Pins the exact portal and checksummed application archives used to assemble one static toolbox release.",
"type": "object", "type": "object",

36
release/toolbox.lock.example.json
View File

@@ -1,8 +1,8 @@
{ {
"$schema": "./toolbox-release-lock.schema.json", "$schema": "./toolbox-release-lock.schema.json",
"schemaVersion": 1, "schemaVersion": 1,
"releaseVersion": "0.4.0", "releaseVersion": "0.9.3",
"portalVersion": "0.2.0", "portalVersion": "0.2.11",
"catalogue": { "catalogue": {
"id": "de.add-ideas.toolbox", "id": "de.add-ideas.toolbox",
"name": "add·ideas Toolbox", "name": "add·ideas Toolbox",
@@ -15,24 +15,38 @@
"apps": [ "apps": [
{ {
"id": "de.add-ideas.pdf-tools", "id": "de.add-ideas.pdf-tools",
"version": "0.4.0", "version": "0.4.4",
"artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.0/pdf-tools-0.4.0.zip", "artifact": "https://git.add-ideas.de/lotobo/pdf-tools/releases/download/v0.4.4/pdf-tools-0.4.4.zip",
"sha256": "c9a2d3bed41c41dc6664f6ab7ecefebb5ef4895ce49cd7b0726e3d47d62a66ca", "sha256": "fa93c4c004be74d6a1f68f62a0f64f44c99218f387441ca3630a7f5af3c09d7d",
"target": "pdf" "target": "pdf"
}, },
{ {
"id": "de.add-ideas.xslt-tools", "id": "de.add-ideas.xslt-tools",
"version": "0.4.0", "version": "0.4.3",
"artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.0/xslt-tools-0.4.0.zip", "artifact": "https://git.add-ideas.de/lotobo/xslt-tools/releases/download/v0.4.3/xslt-tools-0.4.3.zip",
"sha256": "62e02c08d25456cd0a876d4005dfdcadf69471619230cb5f03f62451f501f142", "sha256": "e44012af214d24e3d97d10a6017fa3d9dbf063de36673ab04dd15a0a8643afcc",
"target": "xslt" "target": "xslt"
}, },
{ {
"id": "de.add-ideas.onenote-tools", "id": "de.add-ideas.onenote-tools",
"version": "0.3.0", "version": "0.3.4",
"artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.0/onenote-tools-0.3.0.zip", "artifact": "https://git.add-ideas.de/lotobo/onenote-tools/releases/download/v0.3.4/onenote-tools-0.3.4.zip",
"sha256": "44fa28252995b4bf7789b7a546091ee70d43990ab893481d9f4831d5cf5525e3", "sha256": "c0ed791d1ae64fdf6a90bceebf97a7a3252989f2434204d009f87f5a2d1cc341",
"target": "onenote" "target": "onenote"
},
{
"id": "de.add-ideas.av-tools",
"version": "0.3.0",
"artifact": "https://git.add-ideas.de/lotobo/av-tools/releases/download/v0.3.0/av-tools-0.3.0.zip",
"sha256": "3476c5d43ae43ce66b5aeebe8c11334f7cd4d153586348b72f10bfbdbada9be7",
"target": "av"
},
{
"id": "de.add-ideas.regex-tools",
"version": "0.4.2",
"artifact": "https://git.add-ideas.de/lotobo/regex-tools/releases/download/v0.4.2/regex-tools-0.4.2.zip",
"sha256": "a3e7342d1f0746aa9c88e6568e7fbc04ab429c94604ba5fb1094ffdb096a54fe",
"target": "regex"
} }
] ]
} }

36
release/toolbox.lock.json
View File

@@ -1,8 +1,8 @@
{ {
"$schema": "./toolbox-release-lock.schema.json", "$schema": "./toolbox-release-lock.schema.json",
"schemaVersion": 1, "schemaVersion": 1,
"releaseVersion": "0.4.0", "releaseVersion": "0.9.3",
"portalVersion": "0.2.0", "portalVersion": "0.2.11",
"catalogue": { "catalogue": {
"id": "de.add-ideas.toolbox", "id": "de.add-ideas.toolbox",
"name": "add·ideas Toolbox", "name": "add·ideas Toolbox",
@@ -15,24 +15,38 @@
"apps": [ "apps": [
{ {
"id": "de.add-ideas.pdf-tools", "id": "de.add-ideas.pdf-tools",
"version": "0.4.0", "version": "0.4.4",
"artifact": "https://git.add-ideas.de/zemion/pdf-tools/releases/download/v0.4.0/pdf-tools-0.4.0.zip", "artifact": "https://git.add-ideas.de/lotobo/pdf-tools/releases/download/v0.4.4/pdf-tools-0.4.4.zip",
"sha256": "c9a2d3bed41c41dc6664f6ab7ecefebb5ef4895ce49cd7b0726e3d47d62a66ca", "sha256": "fa93c4c004be74d6a1f68f62a0f64f44c99218f387441ca3630a7f5af3c09d7d",
"target": "pdf" "target": "pdf"
}, },
{ {
"id": "de.add-ideas.xslt-tools", "id": "de.add-ideas.xslt-tools",
"version": "0.4.0", "version": "0.4.3",
"artifact": "https://git.add-ideas.de/zemion/xslt-tools/releases/download/v0.4.0/xslt-tools-0.4.0.zip", "artifact": "https://git.add-ideas.de/lotobo/xslt-tools/releases/download/v0.4.3/xslt-tools-0.4.3.zip",
"sha256": "62e02c08d25456cd0a876d4005dfdcadf69471619230cb5f03f62451f501f142", "sha256": "e44012af214d24e3d97d10a6017fa3d9dbf063de36673ab04dd15a0a8643afcc",
"target": "xslt" "target": "xslt"
}, },
{ {
"id": "de.add-ideas.onenote-tools", "id": "de.add-ideas.onenote-tools",
"version": "0.3.0", "version": "0.3.4",
"artifact": "https://git.add-ideas.de/zemion/onenote-tools/releases/download/v0.3.0/onenote-tools-0.3.0.zip", "artifact": "https://git.add-ideas.de/lotobo/onenote-tools/releases/download/v0.3.4/onenote-tools-0.3.4.zip",
"sha256": "44fa28252995b4bf7789b7a546091ee70d43990ab893481d9f4831d5cf5525e3", "sha256": "c0ed791d1ae64fdf6a90bceebf97a7a3252989f2434204d009f87f5a2d1cc341",
"target": "onenote" "target": "onenote"
},
{
"id": "de.add-ideas.av-tools",
"version": "0.3.0",
"artifact": "https://git.add-ideas.de/lotobo/av-tools/releases/download/v0.3.0/av-tools-0.3.0.zip",
"sha256": "3476c5d43ae43ce66b5aeebe8c11334f7cd4d153586348b72f10bfbdbada9be7",
"target": "av"
},
{
"id": "de.add-ideas.regex-tools",
"version": "0.4.2",
"artifact": "https://git.add-ideas.de/lotobo/regex-tools/releases/download/v0.4.2/regex-tools-0.4.2.zip",
"sha256": "a3e7342d1f0746aa9c88e6568e7fbc04ab429c94604ba5fb1094ffdb096a54fe",
"target": "regex"
} }
] ]
} }

4
scripts/archive.mjs
View File

@@ -2,7 +2,7 @@ import { createReadStream, createWriteStream } from 'node:fs';
import { mkdir, readdir, stat } from 'node:fs/promises'; import { mkdir, readdir, stat } from 'node:fs/promises';
import path from 'node:path'; import path from 'node:path';
import { pipeline } from 'node:stream/promises'; import { pipeline } from 'node:stream/promises';
import archiver from 'archiver'; import { ZipArchive } from 'archiver';
import { import {
canonicalExistingPath, canonicalExistingPath,
canonicalPathsOverlap, canonicalPathsOverlap,
@@ -56,7 +56,7 @@ export async function createStaticArchive(inputDirectory, outputFile) {
throw new Error(`Archive input is not a directory: ${source}`); throw new Error(`Archive input is not a directory: ${source}`);
await mkdir(path.dirname(output), { recursive: true }); await mkdir(path.dirname(output), { recursive: true });
const archive = archiver('zip', { zlib: { level: 9 } }); const archive = new ZipArchive({ zlib: { level: 9 } });
const destination = createWriteStream(output, { flags: 'wx' }); const destination = createWriteStream(output, { flags: 'wx' });
archive.on('warning', (error) => { archive.on('warning', (error) => {
if (error.code !== 'ENOENT') destination.destroy(error); if (error.code !== 'ENOENT') destination.destroy(error);

8
scripts/assembler.test.ts
View File

@@ -14,7 +14,7 @@ import os from 'node:os';
import path from 'node:path'; import path from 'node:path';
import { pipeline } from 'node:stream/promises'; import { pipeline } from 'node:stream/promises';
import { pathToFileURL } from 'node:url'; import { pathToFileURL } from 'node:url';
import archiver from 'archiver'; import { ZipArchive } from 'archiver';
import { afterEach, describe, expect, it, vi } from 'vitest'; import { afterEach, describe, expect, it, vi } from 'vitest';
import { assembleRelease } from './assemble.mjs'; import { assembleRelease } from './assemble.mjs';
import { createStaticArchive } from './archive.mjs'; import { createStaticArchive } from './archive.mjs';
@@ -46,7 +46,7 @@ async function zipEntries(
output: string, output: string,
entries: Array<{ name: string; content: string }> entries: Array<{ name: string; content: string }>
) { ) {
const archive = archiver('zip', { zlib: { level: 9 } }); const archive = new ZipArchive({ zlib: { level: 9 } });
const writing = pipeline(archive, createWriteStream(output, { flags: 'wx' })); const writing = pipeline(archive, createWriteStream(output, { flags: 'wx' }));
for (const entry of entries) for (const entry of entries)
archive.append(entry.content, { name: entry.name }); archive.append(entry.content, { name: entry.name });
@@ -83,7 +83,7 @@ function makeLock(artifact: string, sha256: string) {
return { return {
schemaVersion: 1, schemaVersion: 1,
releaseVersion: '0.1.0', releaseVersion: '0.1.0',
portalVersion: '0.2.0', portalVersion: '0.2.11',
catalogue: { catalogue: {
id: 'de.add-ideas.toolbox', id: 'de.add-ideas.toolbox',
name: 'Test Toolbox', name: 'Test Toolbox',
@@ -238,7 +238,7 @@ describe('release assembly integrity', () => {
it('blocks symbolic links before extraction', async () => { it('blocks symbolic links before extraction', async () => {
const directory = await temporaryDirectory(); const directory = await temporaryDirectory();
const artifact = path.join(directory, 'symlink.zip'); const artifact = path.join(directory, 'symlink.zip');
const archive = archiver('zip', { zlib: { level: 9 } }); const archive = new ZipArchive({ zlib: { level: 9 } });
const writing = pipeline( const writing = pipeline(
archive, archive,
createWriteStream(artifact, { flags: 'wx' }) createWriteStream(artifact, { flags: 'wx' })

143
scripts/deployment.test.ts
View File

@@ -4,10 +4,18 @@ import { describe, expect, it } from 'vitest';
const projectRoot = process.cwd(); const projectRoot = process.cwd();
const compose = readFileSync(path.join(projectRoot, 'compose.yaml'), 'utf8'); const compose = readFileSync(path.join(projectRoot, 'compose.yaml'), 'utf8');
const composeExample = readFileSync(
path.join(projectRoot, 'compose.example.yaml'),
'utf8'
);
const containerfile = readFileSync( const containerfile = readFileSync(
path.join(projectRoot, 'Containerfile.release'), path.join(projectRoot, 'Containerfile.release'),
'utf8' 'utf8'
); );
const environmentExample = readFileSync(
path.join(projectRoot, '.env.example'),
'utf8'
);
const nginxConfig = readFileSync( const nginxConfig = readFileSync(
path.join(projectRoot, 'deploy', 'nginx.conf'), path.join(projectRoot, 'deploy', 'nginx.conf'),
'utf8' 'utf8'
@@ -16,6 +24,23 @@ const releaseLock = JSON.parse(
readFileSync(path.join(projectRoot, 'release', 'toolbox.lock.json'), 'utf8') readFileSync(path.join(projectRoot, 'release', 'toolbox.lock.json'), 'utf8')
) as { releaseVersion: string }; ) 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', () => { describe('production deployment', () => {
it('keeps the release version and checksum pins synchronized', () => { it('keeps the release version and checksum pins synchronized', () => {
const containerVersion = containerfile.match( const containerVersion = containerfile.match(
@@ -30,10 +55,25 @@ describe('production deployment', () => {
const composeChecksum = compose.match( const composeChecksum = compose.match(
/\$\{TOOLBOX_RELEASE_SHA256:-([a-f0-9]{64})\}/u /\$\{TOOLBOX_RELEASE_SHA256:-([a-f0-9]{64})\}/u
)?.[1]; )?.[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\/lotobo\/toolbox:(\S+)$/mu
)?.[1];
expect(containerVersion).toBe(releaseLock.releaseVersion); expect(containerVersion).toBe(releaseLock.releaseVersion);
expect(composeVersion).toBe(containerVersion); expect(composeVersion).toBe(containerVersion);
expect(containerChecksum).toMatch(/^[a-f0-9]{64}$/u);
expect(composeChecksum).toMatch(/^[a-f0-9]{64}$/u);
expect(environmentChecksum).toMatch(/^[a-f0-9]{64}$/u);
expect(composeChecksum).toBe(containerChecksum); 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', () => { it('verifies the release before extraction and retains a rootless final image', () => {
@@ -45,10 +85,15 @@ describe('production deployment', () => {
expect(containerfile).toContain( expect(containerfile).toContain(
'COPY --from=release --chown=101:101 /tmp/toolbox/' 'COPY --from=release --chown=101:101 /tmp/toolbox/'
); );
for (const app of ['pdf', 'xslt', 'onenote', 'av', 'regex']) {
expect(containerfile).toContain(
`test -f /tmp/toolbox/apps/${app}/toolbox-app.json`
);
}
expect(containerfile).toMatch(/\nUSER 101:101\nEXPOSE 8080\n/u); expect(containerfile).toMatch(/\nUSER 101:101\nEXPOSE 8080\n/u);
}); });
it('uses only the requested external Traefik network and HTTPS router', () => { it('uses only the requested external Traefik network and redirects HTTP to HTTPS', () => {
expect(compose).toContain('dockerfile: Containerfile.release'); expect(compose).toContain('dockerfile: Containerfile.release');
expect(compose).toContain('traefik.enable: "true"'); expect(compose).toContain('traefik.enable: "true"');
expect(compose).toContain( expect(compose).toContain(
@@ -63,6 +108,27 @@ describe('production deployment', () => {
expect(compose).toContain( expect(compose).toContain(
'traefik.http.routers.addideas-toolbox.tls.certresolver: "${TRAEFIK_CERT_RESOLVER:-netcup}"' 'traefik.http.routers.addideas-toolbox.tls.certresolver: "${TRAEFIK_CERT_RESOLVER:-netcup}"'
); );
expect(compose).toContain(
'traefik.http.routers.addideas-toolbox-http.rule: "Host(`${TOOLBOX_HOST:-toolbox.add-ideas.de}`)"'
);
expect(compose).toContain(
'traefik.http.routers.addideas-toolbox-http.entrypoints: web'
);
expect(compose).toContain(
'traefik.http.routers.addideas-toolbox-http.priority: 900'
);
expect(compose).toContain(
'traefik.http.routers.addideas-toolbox-http.middlewares: addideas-toolbox-https-redirect'
);
expect(compose).toContain(
'traefik.http.routers.addideas-toolbox-http.service: addideas-toolbox'
);
expect(compose).toContain(
'traefik.http.middlewares.addideas-toolbox-https-redirect.redirectscheme.scheme: https'
);
expect(compose).toContain(
'traefik.http.middlewares.addideas-toolbox-https-redirect.redirectscheme.permanent: "true"'
);
expect(compose).toContain('external: true'); expect(compose).toContain('external: true');
expect(compose).not.toMatch(/^\s+ports:/mu); expect(compose).not.toMatch(/^\s+ports:/mu);
}); });
@@ -73,4 +139,79 @@ describe('production deployment', () => {
); );
expect(nginxConfig).not.toMatch(/^\s*~[^\n]*\{\d/mu); 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',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed-stack5m.1/version.json',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed-stack5m.1/st/ffmpeg-core.js',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed-stack5m.1/st/ffmpeg-core.wasm',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed-stack5m.1/mt/ffmpeg-core.js',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed-stack5m.1/mt/ffmpeg-core.wasm',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed-stack5m.1/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',
'/apps/av/vendor/ffmpeg/0.12.10-/st/ffmpeg-core.wasm',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed_/st/ffmpeg-core.wasm',
'/apps/av/vendor/ffmpeg/0.12.10-latest/st/ffmpeg-core.wasm',
'/apps/av/vendor/ffmpeg/0.12.10-SNAPSHOT/st/ffmpeg-core.wasm',
'/apps/av/vendor/ffmpeg/0.12.10-reviewed-stack5m.2/st/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('serves ES modules as JavaScript before the broad static location', () => {
const moduleLocation =
/location ~\* \\\.mjs\$\s*\{\s*types\s*\{\s*application\/javascript mjs;\s*\}\s*try_files \$uri =404;\s*\}/mu;
const moduleLocationIndex = nginxConfig.search(moduleLocation);
const staticLocationIndex = nginxConfig.search(
/location ~\* \\\.\(\?:css\|js\|mjs\|/u
);
expect(moduleLocationIndex).toBeGreaterThanOrEqual(0);
expect(staticLocationIndex).toBeGreaterThan(moduleLocationIndex);
});
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'");
});
}); });

2
scripts/release-lock.mjs
View File

@@ -131,7 +131,7 @@ export function buildCatalogue(lock) {
}; };
return { return {
$schema: $schema:
'https://git.add-ideas.de/zemion/toolbox-sdk/raw/branch/main/schemas/toolbox-catalog.v1.schema.json', 'https://git.add-ideas.de/lotobo/toolbox-sdk/raw/branch/main/schemas/toolbox-catalog.v1.schema.json',
...parseToolboxCatalog(catalogue), ...parseToolboxCatalog(catalogue),
}; };
} }

467
src/App.test.tsx
View File

@@ -13,44 +13,70 @@ import { catalogue, catalogueFetch } from './test/fixtures';
afterEach(() => vi.unstubAllGlobals()); 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', () => { 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())); vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup(); const user = userEvent.setup();
render(<App />); 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( expect(
await screen.findByRole('heading', { name: 'PDF Workbench' }) screen.getByTestId('app-card-de.add-ideas.xslt-tools')
).toBeInTheDocument(); ).toHaveTextContent('XSLT');
expect( 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' '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( 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.0')
)
).toBeDefined();
expect( expect(
screen.queryByRole('region', { name: 'Pinned' }) screen.queryByRole('region', { name: 'Pinned' })
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
const launch = screen const showHidden = screen.getByRole('checkbox', {
.getAllByRole('link', { name: 'PDF Workbench' }) name: 'Show hidden (0)',
.find((link) => link.classList.contains('app-card__launch-link'))!; });
expect(showHidden).toBeDisabled();
expect(showHidden).not.toBeChecked();
expect(launch).toHaveClass('app-card__launch-link');
expect( expect(
new URL(launch.getAttribute('href')!).searchParams.get('toolbox') new URL(launch.getAttribute('href')!).searchParams.get('toolbox')
).toContain('toolbox.catalog.json'); ).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 user.click(screen.getByRole('button', { name: 'Pin PDF Workbench' }));
await waitFor(() => await waitFor(() =>
@@ -64,6 +90,12 @@ describe('portal UI', () => {
expect( expect(
screen.queryByRole('button', { name: /Move PDF Workbench/i }) screen.queryByRole('button', { name: /Move PDF Workbench/i })
).not.toBeInTheDocument(); ).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( expect(
screen.getByRole('button', { name: 'Reorder PDF Workbench' }) screen.getByRole('button', { name: 'Reorder PDF Workbench' })
).toBeInTheDocument(); ).toBeInTheDocument();
@@ -71,21 +103,206 @@ describe('portal UI', () => {
await user.click( await user.click(
screen.getByRole('button', { name: 'Hide PDF Workbench' }) screen.getByRole('button', { name: 'Hide PDF Workbench' })
); );
expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
expect(showHidden).toBeEnabled();
expect(showHidden).toHaveAccessibleName('Show hidden (1)');
await waitFor(() => expect(showHidden).toHaveFocus());
fireEvent.click(showHidden);
expect(toolLink('PDF Workbench')).toBeInTheDocument();
await user.click(
screen.getByRole('button', { name: 'Show PDF Workbench' })
);
expect(showHidden).toBeDisabled();
expect(showHidden).not.toBeChecked();
await waitFor(() =>
expect( expect(
screen.queryByRole('heading', { name: 'PDF Workbench' }) screen.getByRole('button', { name: 'Hide PDF Workbench' })
).not.toBeInTheDocument(); ).toHaveFocus()
fireEvent.click(screen.getByRole('checkbox', { name: /show hidden/i })); );
});
it('uses the compact Regex presentation for the released tool', async () => {
vi.stubGlobal(
'fetch',
vi.fn(
catalogueFetch({
'/toolbox.catalog.json': Response.json({
...catalogue,
apps: [
...catalogue.apps,
{ manifest: './apps/regex/toolbox-app.json', enabled: true },
],
}),
})
)
);
render(<App />);
await findToolLink();
const card = screen.getByTestId('app-card-de.add-ideas.regex-tools');
expect(within(card).getByRole('heading', { level: 3 })).toHaveTextContent(
'Regex'
);
expect(within(card).getByText('Explain and test locally.')).toBeVisible();
});
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( expect(
screen.getByRole('heading', { name: 'PDF Workbench' }) within(dialog).getByRole('button', { name: 'documents' })
).toBeInTheDocument(); ).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/lotobo/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 findToolLink();
const search = screen.getByRole('searchbox', { name: 'Search tools' });
const category = screen.getByRole('combobox', {
name: 'Filter by category',
});
expect(search.closest('.tool-controls')).toBe(
category.closest('.tool-controls')
);
await user.type(search, 'xslt');
expect(toolLink('XSLT Workbench')).toBeInTheDocument();
expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
await user.clear(search);
await user.selectOptions(category, 'notes');
expect(toolLink('OneNote Reader')).toBeInTheDocument();
expect(queryToolLink('XSLT Workbench')).not.toBeInTheDocument();
await user.selectOptions(category, '');
await user.click(
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 findToolLink();
await user.click(
screen.getByRole('button', { name: 'Hide PDF Workbench' })
);
const showHidden = screen.getByRole('checkbox', {
name: 'Show hidden (1)',
});
await user.click(showHidden);
await user.click(
screen.getByRole('button', { name: 'Hide XSLT Workbench' })
);
expect(showHidden).toHaveAccessibleName('Show hidden (2)');
await user.click(
screen.getByRole('button', { name: 'Show PDF Workbench' })
);
expect(showHidden).toBeChecked();
expect(showHidden).toHaveAccessibleName('Show hidden (1)');
expect(toolLink('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 findToolLink();
await user.click(
screen.getByRole('button', { name: 'Hide PDF Workbench' })
);
await user.type(
screen.getByRole('searchbox', { name: 'Search tools' }),
'no tool has this phrase'
);
await user.click(screen.getByRole('button', { name: 'Clear filters' }));
expect(queryToolLink('PDF Workbench')).not.toBeInTheDocument();
expect(toolLink('XSLT Workbench')).toBeInTheDocument();
expect(
screen.getByRole('checkbox', { name: 'Show hidden (1)' })
).not.toBeChecked();
}); });
it('lists contextual destinations in the Apps menu', async () => { it('lists contextual destinations in the Apps menu', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch())); vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup(); const user = userEvent.setup();
render(<App />); render(<App />);
await screen.findByRole('heading', { name: 'PDF Workbench' }); await findToolLink();
await user.click(screen.getByText('Apps').closest('summary')!); await user.click(screen.getByRole('button', { name: 'Apps' }));
const navigation = screen.getByRole('navigation', { const navigation = screen.getByRole('navigation', {
name: 'Toolbox applications', name: 'Toolbox applications',
}); });
@@ -97,18 +314,87 @@ describe('portal UI', () => {
).toContain('toolbox.catalog.json'); ).toContain('toolbox.catalog.json');
}); });
it('uses the shared accessible header identity and control order', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
render(<App />);
await findToolLink();
const header = document.querySelector<HTMLElement>('.portal-header')!;
expect(
within(header).getByRole('heading', { level: 1, name: 'Toolbox' })
).toBeInTheDocument();
expect(
within(header).getByText('Local-first browser tools')
).toBeInTheDocument();
expect(
screen.getByRole('heading', {
level: 2,
name: 'Your document tools, in one calm place.',
})
).toBeInTheDocument();
expect(
screen.getAllByRole('heading', {
name: 'Your document tools, in one calm place.',
})
).toHaveLength(1);
const personalize = within(header).getByRole('button', {
name: 'Personalize',
});
const apps = within(header).getByRole('button', { name: 'Apps' });
const source = within(header).getByRole('link', {
name: 'Toolbox source on Gitea',
});
const help = within(header).getByRole('button', { name: 'Help' });
const brand = within(header).getByRole('link', {
name: 'add·ideas Toolbox',
});
const controls = within(header).getByRole('group', {
name: 'Toolbox controls',
});
expect(
Array.from(controls.children, (element) =>
element.getAttribute('aria-label')
)
).toEqual(['Help', 'Toolbox source on Gitea', 'Apps', 'Personalize']);
expect(help.compareDocumentPosition(source)).toBe(
Node.DOCUMENT_POSITION_FOLLOWING
);
expect(source.compareDocumentPosition(apps)).toBe(
Node.DOCUMENT_POSITION_FOLLOWING
);
expect(apps.compareDocumentPosition(personalize)).toBe(
Node.DOCUMENT_POSITION_FOLLOWING
);
expect(
Array.from(
header.querySelector('.toolbox-shell__bar')?.children ?? [],
(element) => element.className
)
).toEqual([
'toolbox-shell__brand',
'toolbox-shell__identity',
'toolbox-shell__controls',
]);
expect(brand.querySelector('img')).toHaveAttribute('src', './favicon.svg');
});
it('persists an explicit appearance and accepts cross-tab updates', async () => { it('persists an explicit appearance and accepts cross-tab updates', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch())); vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup(); const user = userEvent.setup();
render(<App />); render(<App />);
await screen.findByRole('heading', { name: 'PDF Workbench' }); await findToolLink();
await user.click(screen.getByRole('button', { name: 'Personalize' })); const personalize = screen.getByRole('button', { name: 'Personalize' });
await user.click(personalize);
expect(
screen.getByRole('heading', { name: 'Personalize your toolbox' })
).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: 'Dark' })); await user.click(screen.getByRole('button', { name: 'Dark' }));
expect(document.documentElement).toHaveAttribute('data-theme', 'dark'); expect(document.documentElement).toHaveAttribute('data-theme', 'dark');
await waitFor(() => await waitFor(() =>
expect(localStorage.getItem(PREFERENCES_KEY)).toContain('"theme":"dark"') expect(localStorage.getItem(PREFERENCES_KEY)).toContain('"theme":"dark"')
); );
await user.click(screen.getByRole('button', { name: 'Close preferences' })); await user.click(personalize);
fireEvent( fireEvent(
window, window,
@@ -133,7 +419,7 @@ describe('portal UI', () => {
it('supports keyboard drag ordering from each tile grip', async () => { it('supports keyboard drag ordering from each tile grip', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch())); vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
render(<App />); render(<App />);
await screen.findByRole('heading', { name: 'PDF Workbench' }); await findToolLink();
const cards = [ const cards = [
screen.getByTestId('app-card-de.add-ideas.pdf-tools'), screen.getByTestId('app-card-de.add-ideas.pdf-tools'),
screen.getByTestId('app-card-de.add-ideas.xslt-tools'), screen.getByTestId('app-card-de.add-ideas.xslt-tools'),
@@ -143,11 +429,11 @@ describe('portal UI', () => {
const rect = { const rect = {
x: index * 220, x: index * 220,
y: 0, y: 0,
width: 200, width: 188,
height: 320, height: 188,
top: 0, top: 0,
right: index * 220 + 200, right: index * 220 + 188,
bottom: 320, bottom: 188,
left: index * 220, left: index * 220,
toJSON: () => ({}), toJSON: () => ({}),
} as DOMRect; } as DOMRect;
@@ -168,7 +454,7 @@ describe('portal UI', () => {
within(tools) within(tools)
.getAllByRole('heading', { level: 3 }) .getAllByRole('heading', { level: 3 })
.map((heading) => heading.textContent) .map((heading) => heading.textContent)
).toEqual(['XSLT Workbench', 'PDF Workbench', 'OneNote Reader']); ).toEqual(['XSLT', 'PDF', 'OneNote']);
}); });
expect( expect(
JSON.parse(localStorage.getItem(PREFERENCES_KEY) ?? '{}').order JSON.parse(localStorage.getItem(PREFERENCES_KEY) ?? '{}').order
@@ -183,39 +469,53 @@ describe('portal UI', () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch())); vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup(); const user = userEvent.setup();
render(<App />); 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 () => { it('opens the standard help control and explains tile interaction', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch())); vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup(); const user = userEvent.setup();
render(<App />); 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',
await user.click(screen.getByRole('button', { name: 'Close help' })); });
expect(dialog).toHaveTextContent('click anywhere on a tool tile');
expect(dialog).toHaveTextContent('use the light bulb');
expect(container.querySelector('.site-shell')).toHaveAttribute('inert');
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(screen.queryByRole('dialog')).not.toBeInTheDocument();
expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
expect(help).toHaveFocus();
}); });
it('shows a recoverable catalogue error', async () => { it('shows a recoverable catalogue error', async () => {
@@ -229,9 +529,7 @@ describe('portal UI', () => {
await screen.findByRole('heading', { name: 'Toolbox unavailable' }) await screen.findByRole('heading', { name: 'Toolbox unavailable' })
).toBeInTheDocument(); ).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: 'Try again' })); 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 () => { it('shows a dedicated empty state for a valid catalogue', async () => {
@@ -249,31 +547,42 @@ describe('portal UI', () => {
).toBeInTheDocument(); ).toBeInTheDocument();
}); });
it('contains preference focus and restores it to Personalize', async () => { it('hosts compact preferences in the shared Personalize popover', async () => {
vi.stubGlobal('fetch', vi.fn(catalogueFetch())); vi.stubGlobal('fetch', vi.fn(catalogueFetch()));
const user = userEvent.setup(); const user = userEvent.setup();
const { container } = render(<App />); const { container } = render(<App />);
const personalize = screen.getByRole('button', { name: 'Personalize' }); const personalize = screen.getByRole('button', { name: 'Personalize' });
await user.click(personalize); await user.click(personalize);
const dialog = screen.getByRole('dialog', { const heading = screen.getByRole('heading', {
name: 'Personalize your toolbox', name: 'Personalize your toolbox',
}); });
const close = screen.getByRole('button', { name: 'Close preferences' }); const popover = screen.getByRole('dialog', { name: 'Personalize Toolbox' });
expect(close).toHaveFocus(); expect(popover).toContainElement(heading);
expect(container.querySelector('.site-shell')).toHaveAttribute('inert'); expect(popover).toContainElement(screen.getByText('On this device'));
expect(dialog).toBeInTheDocument(); expect(
within(popover).getByRole('group', { name: 'Appearance' })
).toBeInTheDocument();
expect(
popover.querySelector('.toolbox-shell__preferences-content')
).toBeInTheDocument();
expect(popover).not.toHaveAttribute('aria-modal');
expect(container.querySelector('.site-shell')).not.toHaveAttribute('inert');
expect(screen.getByText(/does not transmit them/i)).toHaveTextContent( expect(screen.getByText(/does not transmit them/i)).toHaveTextContent(
/Trusted code in another Toolbox app on this site can access same-origin storage/i /Trusted code in another Toolbox app on this site can access same-origin storage/i
); );
expect(
const reset = screen.getByRole('button', { name: 'Reset' }); screen.getByRole('button', { name: 'Export JSON' })
reset.focus(); ).toBeInTheDocument();
await user.tab(); expect(
expect(close).toHaveFocus(); screen.getByRole('button', { name: 'Import JSON' })
).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Reset' })).toBeInTheDocument();
await user.keyboard('{Escape}'); await user.keyboard('{Escape}');
expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); expect(
screen.queryByRole('dialog', { name: 'Personalize Toolbox' })
).not.toBeInTheDocument();
expect(personalize).toHaveFocus(); expect(personalize).toHaveFocus();
}); });
}); });

153
src/App.tsx
View File

@@ -16,8 +16,9 @@ import {
ToolboxHeader, ToolboxHeader,
type ToolboxHeaderApp, type ToolboxHeaderApp,
} from '@add-ideas/toolbox-shell-react'; } 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 { AppCard } from './components/AppCard';
import { AppDetailsPanel } from './components/AppDetailsPanel';
import { HelpPanel } from './components/HelpPanel'; import { HelpPanel } from './components/HelpPanel';
import { Logo } from './components/Logo'; import { Logo } from './components/Logo';
import { PreferencesPanel } from './components/PreferencesPanel'; import { PreferencesPanel } from './components/PreferencesPanel';
@@ -27,13 +28,16 @@ import type { LoadedCatalogue, ResolvedApp } from './types';
import { usePreferences } from './usePreferences'; import { usePreferences } from './usePreferences';
const CATALOGUE_HREF = './toolbox.catalog.json'; const CATALOGUE_HREF = './toolbox.catalog.json';
const PORTAL_SOURCE = 'https://git.add-ideas.de/zemion/toolbox-portal'; const PORTAL_SOURCE = 'https://git.add-ideas.de/lotobo/toolbox-portal';
type LoadState = type LoadState =
| { status: 'loading' } | { status: 'loading' }
| { status: 'error'; message: string } | { status: 'error'; message: string }
| { status: 'ready'; value: LoadedCatalogue }; | { status: 'ready'; value: LoadedCatalogue };
type PortalOverlay =
{ kind: 'help' } | { kind: 'details'; appId: string } | null;
function appMatches( function appMatches(
app: ResolvedApp, app: ResolvedApp,
query: string, query: string,
@@ -50,29 +54,25 @@ function appMatches(
} }
interface AppSectionProps { interface AppSectionProps {
activeTag: string;
apps: ResolvedApp[]; apps: ResolvedApp[];
catalogueUrl: string; catalogueUrl: string;
hiddenIds: readonly string[]; hiddenIds: readonly string[];
id: string; id: string;
onCategory: (category: string) => void; onDetails: (id: string) => void;
onHide: (id: string) => void; onHide: (id: string) => void;
onPin: (id: string) => void; onPin: (id: string) => void;
onTag: (tag: string) => void;
pinned: boolean; pinned: boolean;
title: string; title: string;
} }
function AppSection({ function AppSection({
activeTag,
apps, apps,
catalogueUrl, catalogueUrl,
hiddenIds, hiddenIds,
id, id,
onCategory, onDetails,
onHide, onHide,
onPin, onPin,
onTag,
pinned, pinned,
title, title,
}: AppSectionProps) { }: AppSectionProps) {
@@ -97,11 +97,9 @@ function AppSection({
contextualUrl={contextualLaunchUrl} contextualUrl={contextualLaunchUrl}
pinned={pinned} pinned={pinned}
hidden={hiddenIds.includes(app.id)} hidden={hiddenIds.includes(app.id)}
activeTag={activeTag} onDetails={() => onDetails(app.id)}
onCategory={onCategory}
onPin={() => onPin(app.id)} onPin={() => onPin(app.id)}
onHide={() => onHide(app.id)} onHide={() => onHide(app.id)}
onTag={onTag}
/> />
))} ))}
</div> </div>
@@ -116,13 +114,16 @@ export default function App() {
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const [category, setCategory] = useState(''); const [category, setCategory] = useState('');
const [activeTag, setActiveTag] = useState(''); const [activeTag, setActiveTag] = useState('');
const [showHidden, setShowHidden] = useState(false); const [shownHiddenIds, setShownHiddenIds] = useState<
const [settingsOpen, setSettingsOpen] = useState(false); readonly string[] | null
const [helpOpen, setHelpOpen] = useState(false); >(null);
const [overlay, setOverlay] = useState<PortalOverlay>(null);
const hiddenToggle = useRef<HTMLInputElement>(null);
const [preferences, setPreferences, storageAvailable] = usePreferences(); const [preferences, setPreferences, storageAvailable] = usePreferences();
const closeSettings = useCallback(() => setSettingsOpen(false), []); const closeOverlay = useCallback(() => setOverlay(null), []);
const closeHelp = useCallback(() => setHelpOpen(false), []); const showHidden =
const dialogOpen = settingsOpen || helpOpen; preferences.hidden.length > 0 &&
shownHiddenIds?.some((id) => preferences.hidden.includes(id)) === true;
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
@@ -148,6 +149,11 @@ export default function App() {
const loaded = loadState.status === 'ready' ? loadState.value : undefined; const loaded = loadState.status === 'ready' ? loadState.value : undefined;
const apps = useMemo(() => loaded?.apps ?? [], [loaded]); 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(() => { useEffect(() => {
if (!loaded) return; if (!loaded) return;
@@ -204,12 +210,30 @@ export default function App() {
})); }));
function toggleListItem(field: 'pinned' | 'hidden', id: string) { 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])]);
}
setPreferences((current) => ({ setPreferences((current) => ({
...current, ...current,
[field]: current[field].includes(id) [field]: current[field].includes(id)
? current[field].filter((item) => item !== id) ? current[field].filter((item) => item !== id)
: [...current[field], 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) { function handleDragEnd(event: DragEndEvent) {
@@ -231,33 +255,37 @@ export default function App() {
setQuery(''); setQuery('');
setCategory(''); setCategory('');
setActiveTag(''); setActiveTag('');
if (preferences.hidden.length > 0) setShowHidden(true); setShownHiddenIds(null);
} }
const title = loaded?.catalogue.name ?? 'add·ideas Toolbox';
const brand = loaded?.catalogue.theme.brand ?? 'add·ideas';
return ( return (
<> <>
<div <div
className="site-shell" className="site-shell"
inert={dialogOpen} inert={overlayOpen}
aria-hidden={dialogOpen || undefined} aria-hidden={overlayOpen || undefined}
> >
<a className="skip-link" href="#main-content"> <a className="skip-link" href="#main-content">
Skip to tools Skip to tools
</a> </a>
<ToolboxHeader <ToolboxHeader
className="portal-header" className="portal-header"
title={title} title="Toolbox"
iconUrl="./favicon.svg" subtitle="Local-first browser tools"
theme={preferences.theme} theme={preferences.theme}
homeHref={loaded?.homeUrl ?? './'} homeHref={loaded?.homeUrl ?? './'}
homeLabel={brand} homeLabel="add·ideas Toolbox"
helpAction={{ onClick: () => setHelpOpen(true) }} brandIconUrl="./favicon.svg"
helpAction={{ onClick: () => setOverlay({ kind: 'help' }) }}
sourceHref={PORTAL_SOURCE} sourceHref={PORTAL_SOURCE}
sourceLabel="Toolbox source on Gitea" sourceLabel="Toolbox source on Gitea"
onPersonalize={() => setSettingsOpen(true)} personalizeContent={
<PreferencesPanel
preferences={preferences}
storageAvailable={storageAvailable}
onChange={setPreferences}
/>
}
apps={headerApps} apps={headerApps}
allAppsHref="#main-content" allAppsHref="#main-content"
/> />
@@ -270,14 +298,14 @@ export default function App() {
</p> </p>
<h2 id="page-title"> <h2 id="page-title">
Your document tools, Your document tools,
<br /> <br /> <span>in one calm place.</span>
<span>in one calm place.</span>
</h2> </h2>
<p className="hero-copy"> <p className="hero-copy">
Focused browser utilities with a privacy disclosure for each Focused browser utilities with a privacy disclosure for each
tool. Choose one and keep your work moving. tool. Choose one and keep your work moving.
</p> </p>
</div> </div>
</section>
{loaded && ( {loaded && (
<section className="tool-controls" aria-label="Find a tool"> <section className="tool-controls" aria-label="Find a tool">
@@ -315,19 +343,28 @@ export default function App() {
<span className="visually-hidden">Clear tag filter</span> <span className="visually-hidden">Clear tag filter</span>
</button> </button>
)} )}
{preferences.hidden.length > 0 && ( <label
<label className="hidden-toggle"> className={`hidden-toggle${
preferences.hidden.length === 0
? ' hidden-toggle--disabled'
: ''
}`}
>
<input <input
ref={hiddenToggle}
type="checkbox" type="checkbox"
checked={showHidden} checked={showHidden}
onChange={(event) => setShowHidden(event.target.checked)} disabled={preferences.hidden.length === 0}
onChange={(event) =>
setShownHiddenIds(
event.target.checked ? [...preferences.hidden] : null
)
}
/> />
Show hidden ({preferences.hidden.length}) Show hidden ({preferences.hidden.length})
</label> </label>
)}
</section> </section>
)} )}
</section>
{loadState.status === 'loading' && ( {loadState.status === 'loading' && (
<section className="state-card" aria-live="polite"> <section className="state-card" aria-live="polite">
@@ -398,30 +435,26 @@ export default function App() {
title="Pinned" title="Pinned"
apps={pinnedApps} apps={pinnedApps}
pinned pinned
activeTag={activeTag}
catalogueUrl={loaded.catalogueUrl.href} catalogueUrl={loaded.catalogueUrl.href}
hiddenIds={preferences.hidden} hiddenIds={preferences.hidden}
onCategory={setCategory} onDetails={(id) =>
setOverlay({ kind: 'details', appId: id })
}
onPin={(id) => toggleListItem('pinned', id)} onPin={(id) => toggleListItem('pinned', id)}
onHide={(id) => toggleListItem('hidden', id)} onHide={(id) => toggleListItem('hidden', id)}
onTag={(tag) =>
setActiveTag((current) => (current === tag ? '' : tag))
}
/> />
<AppSection <AppSection
id="regular-apps" id="regular-apps"
title="Tools" title="Tools"
apps={regularApps} apps={regularApps}
pinned={false} pinned={false}
activeTag={activeTag}
catalogueUrl={loaded.catalogueUrl.href} catalogueUrl={loaded.catalogueUrl.href}
hiddenIds={preferences.hidden} hiddenIds={preferences.hidden}
onCategory={setCategory} onDetails={(id) =>
setOverlay({ kind: 'details', appId: id })
}
onPin={(id) => toggleListItem('pinned', id)} onPin={(id) => toggleListItem('pinned', id)}
onHide={(id) => toggleListItem('hidden', id)} onHide={(id) => toggleListItem('hidden', id)}
onTag={(tag) =>
setActiveTag((current) => (current === tag ? '' : tag))
}
/> />
</div> </div>
</DndContext> </DndContext>
@@ -456,9 +489,9 @@ export default function App() {
</span> </span>
</p> </p>
<span> <span>
Portal v0.2.0 ·{' '} Portal v0.2.11 ·{' '}
<a <a
href="https://git.add-ideas.de/zemion/toolbox-portal/src/tag/v0.4.0" href="https://git.add-ideas.de/lotobo/toolbox-portal/src/tag/v0.9.3"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -468,14 +501,26 @@ export default function App() {
</footer> </footer>
</div> </div>
<PreferencesPanel <HelpPanel open={overlay?.kind === 'help'} onClose={closeOverlay} />
open={settingsOpen} {detailsApp && loaded ? (
preferences={preferences} <AppDetailsPanel
storageAvailable={storageAvailable} app={detailsApp}
onChange={setPreferences} catalogueUrl={loaded.catalogueUrl.href}
onClose={closeSettings} 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}
/> />
<HelpPanel open={helpOpen} onClose={closeHelp} /> ) : null}
</> </>
); );
} }

2
src/catalogue.test.ts
View File

@@ -15,7 +15,7 @@ describe('catalogue loading', () => {
id: 'de.add-ideas.pdf-tools', id: 'de.add-ideas.pdf-tools',
name: 'PDF Workbench', name: 'PDF Workbench',
entryUrl: 'http://localhost:3000/apps/pdf/', entryUrl: 'http://localhost:3000/apps/pdf/',
sourceUrl: 'https://git.add-ideas.de/zemion/pdf-tools', sourceUrl: 'https://git.add-ideas.de/lotobo/pdf-tools',
}); });
}); });

234
src/components/AppCard.tsx
View File

@@ -1,5 +1,7 @@
import { useId } from 'react';
import { useSortable } from '@dnd-kit/sortable'; import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities'; import { CSS } from '@dnd-kit/utilities';
import { shortToolDescription, shortToolTitle } from '../toolPresentation';
import type { ResolvedApp } from '../types'; import type { ResolvedApp } from '../types';
interface AppCardProps { interface AppCardProps {
@@ -7,48 +9,74 @@ interface AppCardProps {
catalogueUrl: string; catalogueUrl: string;
hidden: boolean; hidden: boolean;
pinned: boolean; pinned: boolean;
activeTag: string; onDetails: () => void;
onCategory: (category: string) => void;
onHide: () => void; onHide: () => void;
onPin: () => void; onPin: () => void;
onTag: (tag: string) => void;
contextualUrl: (entryUrl: string, catalogueUrl: string) => string; 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 ( 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 ( 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, catalogueUrl,
hidden, hidden,
pinned, pinned,
activeTag, onDetails,
onCategory,
onHide, onHide,
onPin, onPin,
onTag,
contextualUrl, contextualUrl,
}: AppCardProps) { }: AppCardProps) {
const titleId = useId();
const { const {
attributes, attributes,
isDragging, isDragging,
@@ -84,10 +111,23 @@ export function AppCard({
className={`app-card${hidden ? ' app-card--hidden' : ''}${ className={`app-card${hidden ? ' app-card--hidden' : ''}${
isDragging ? ' app-card--dragging' : '' isDragging ? ' app-card--dragging' : ''
}`} }`}
aria-labelledby={titleId}
data-testid={`app-card-${app.id}`} data-testid={`app-card-${app.id}`}
style={{ transform: CSS.Transform.toString(transform), transition }} 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"> <div className="app-card__icon" aria-hidden="true">
{app.iconUrl ? ( {app.iconUrl ? (
<img src={app.iconUrl} alt="" loading="lazy" /> <img src={app.iconUrl} alt="" loading="lazy" />
@@ -95,112 +135,60 @@ export function AppCard({
<span>{app.name.slice(0, 1).toLocaleUpperCase()}</span> <span>{app.name.slice(0, 1).toLocaleUpperCase()}</span>
)} )}
</div> </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 <a
className="app-card__launch-link" className="app-card__launch-link"
href={launchUrl} href={launchUrl}
target={target} target={target}
rel={target ? 'noopener noreferrer' : undefined} rel={target ? 'noopener noreferrer' : undefined}
aria-label={`Open ${app.name}`}
> >
{app.name} {shortToolTitle(app)}
</a> </a>
</h3> </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> </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 <button
className="icon-button info-button"
type="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> </button>
))}
</div>
)}
{app.tags.length > 0 && (
<div className="tag-row" aria-label="Tags">
{app.tags.map((tag) => (
<button <button
className={`icon-button pin-button${pinned ? ' is-active' : ''}`}
type="button" 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>
))} <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> </div>
<span className="open-hint">
Open tool <span aria-hidden="true">↗</span>
</span>
</footer>
</article> </article>
); );
} }

172
src/components/AppDetailsPanel.tsx Normal file
View File

@@ -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>
);
}

80
src/components/HelpPanel.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef } from 'react'; import { ModalPanel } from './ModalPanel';
interface HelpPanelProps { interface HelpPanelProps {
open: boolean; open: boolean;
@@ -6,61 +6,12 @@ interface HelpPanelProps {
} }
export function HelpPanel({ open, onClose }: 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; if (!open) return null;
return ( return (
<div <ModalPanel
className="dialog-backdrop"
role="presentation"
onMouseDown={(event) => event.target === event.currentTarget && onClose()}
>
<section
ref={panel}
className="help-panel" className="help-panel"
role="dialog" labelledBy="help-title"
aria-modal="true" onClose={onClose}
aria-labelledby="help-title"
tabIndex={-1}
> >
<header> <header>
<div> <div>
@@ -82,28 +33,19 @@ export function HelpPanel({ open, onClose }: HelpPanelProps) {
control. control.
</p> </p>
<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>
<p> <p>
<strong>Arrange:</strong> pin frequently used tools into their own <strong>Arrange:</strong> pin frequently used tools into their own
section, then drag the grip to reorder. The grip also supports section, then drag the grip to reorder. The grip also supports
keyboard dragging with Space, arrow keys, and Escape. keyboard dragging with Space, arrow keys, and Escape.
</p> </p>
<p>
<strong>Privacy:</strong> each tile reports its declared processing,
uploads, telemetry, and browser requirements before you open it.
</p>
</div>
</section>
</div> </div>
</ModalPanel>
); );
} }
const FOCUSABLE_SELECTOR = [
'a[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'[tabindex]:not([tabindex="-1"])',
].join(',');

102
src/components/ModalPanel.tsx Normal file
View File

@@ -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(',');

145
src/components/PreferencesPanel.tsx
View File

@@ -1,93 +1,25 @@
import { useEffect, useRef, useState, type ChangeEvent } from 'react'; import { useRef, useState, type ChangeEvent } from 'react';
import { ToolboxPersonalizePanel } from '@add-ideas/toolbox-shell-react';
import { import {
defaultPreferences, defaultPreferences,
parsePreferences, parsePreferences,
type Preferences, type Preferences,
} from '../preferences'; } from '../preferences';
import type { ThemeMode } from '../types';
interface PreferencesPanelProps { interface PreferencesPanelProps {
open: boolean;
preferences: Preferences; preferences: Preferences;
storageAvailable: boolean; storageAvailable: boolean;
onChange: (preferences: Preferences) => void; onChange: (preferences: Preferences) => void;
onClose: () => void;
} }
export function PreferencesPanel({ export function PreferencesPanel({
open,
preferences, preferences,
storageAvailable, storageAvailable,
onChange, onChange,
onClose,
}: PreferencesPanelProps) { }: PreferencesPanelProps) {
const fileInput = useRef<HTMLInputElement>(null); const fileInput = useRef<HTMLInputElement>(null);
const panel = useRef<HTMLElement>(null);
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
useEffect(() => {
if (!open) return;
const returnFocus =
document.activeElement instanceof HTMLElement
? document.activeElement
: null;
const dialog = panel.current;
const focusableElements = () =>
dialog
? [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(
(element) => !element.hasAttribute('disabled')
)
: [];
focusableElements()[0]?.focus();
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
event.preventDefault();
onClose();
return;
}
if (event.key !== 'Tab') return;
const elements = focusableElements();
if (elements.length === 0) {
event.preventDefault();
dialog?.focus();
return;
}
const first = elements[0]!;
const last = elements.at(-1)!;
const activeElement = document.activeElement;
if (
event.shiftKey &&
(activeElement === first || !dialog?.contains(activeElement))
) {
event.preventDefault();
last.focus();
} else if (
!event.shiftKey &&
(activeElement === last || !dialog?.contains(activeElement))
) {
event.preventDefault();
first.focus();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
returnFocus?.focus();
};
}, [open, onClose]);
if (!open) return null;
function setTheme(theme: ThemeMode) {
onChange({ ...preferences, theme });
}
function exportPreferences() { function exportPreferences() {
const blob = new Blob([`${JSON.stringify(preferences, null, 2)}\n`], { const blob = new Blob([`${JSON.stringify(preferences, null, 2)}\n`], {
type: 'application/json', type: 'application/json',
@@ -119,58 +51,11 @@ export function PreferencesPanel({
} }
return ( return (
<div <ToolboxPersonalizePanel
className="dialog-backdrop" theme={preferences.theme}
role="presentation" onThemeChange={(theme) => onChange({ ...preferences, theme })}
onMouseDown={(event) => event.target === event.currentTarget && onClose()} storageAvailable={storageAvailable}
> >
<section
ref={panel}
className="preferences-panel"
role="dialog"
aria-modal="true"
aria-labelledby="preferences-title"
tabIndex={-1}
>
<header>
<div>
<p className="eyebrow">On this device</p>
<h2 id="preferences-title">Personalize your toolbox</h2>
</div>
<button
className="close-button"
type="button"
aria-label="Close preferences"
onClick={onClose}
>
×
</button>
</header>
{!storageAvailable && (
<p className="inline-warning" role="status">
Browser storage is unavailable. Changes will last only until this
page closes.
</p>
)}
<fieldset className="theme-choice">
<legend>Appearance</legend>
<div>
{(['system', 'light', 'dark'] as const).map((theme) => (
<button
key={theme}
type="button"
aria-pressed={preferences.theme === theme}
className={preferences.theme === theme ? 'is-selected' : ''}
onClick={() => setTheme(theme)}
>
{theme.slice(0, 1).toLocaleUpperCase() + theme.slice(1)}
</button>
))}
</div>
</fieldset>
<div className="preference-summary"> <div className="preference-summary">
<div> <div>
<strong>{preferences.pinned.length}</strong> <strong>{preferences.pinned.length}</strong>
@@ -188,9 +73,9 @@ export function PreferencesPanel({
<p className="preferences-copy"> <p className="preferences-copy">
The portal stores pins, visibility, order, and appearance in this The portal stores pins, visibility, order, and appearance in this
browser and does not transmit them. Trusted code in another Toolbox browser and does not transmit them. Trusted code in another Toolbox app
app on this site can access same-origin storage. Export a JSON backup on this site can access same-origin storage. Export a JSON backup to
to move them to another device. move them to another device.
</p> </p>
<div className="preferences-actions"> <div className="preferences-actions">
@@ -222,16 +107,6 @@ export function PreferencesPanel({
<p className="action-message" role="status" aria-live="polite"> <p className="action-message" role="status" aria-live="polite">
{message} {message}
</p> </p>
</section> </ToolboxPersonalizePanel>
</div>
); );
} }
const FOCUSABLE_SELECTOR = [
'a[href]',
'button:not([disabled])',
'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"])',
'select:not([disabled])',
'textarea:not([disabled])',
'[tabindex]:not([tabindex="-1"])',
].join(',');

462
src/styles.css
View File

@@ -123,11 +123,11 @@ summary:focus-visible {
transform: translateY(0); transform: translateY(0);
} }
.portal-header .toolbox-shell__bar,
main, main,
.site-footer { .site-footer {
width: min(1160px, calc(100% - 2.5rem)); width: min(100%, 90rem);
margin-inline: auto; margin-inline: auto;
padding-inline: 1rem;
} }
.state-card button, .state-card button,
@@ -151,14 +151,14 @@ main {
.hero { .hero {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem); grid-template-columns: 1fr;
align-items: end; align-items: end;
gap: clamp(2rem, 6vw, 5rem); gap: clamp(2rem, 6vw, 5rem);
padding: clamp(3.5rem, 7vw, 6.8rem) 0 clamp(2.5rem, 5vw, 4.2rem); padding: clamp(3.5rem, 7vw, 6.8rem) 0 clamp(2.5rem, 5vw, 4.2rem);
} }
.hero-intro { .hero-intro {
max-width: 750px; max-width: 100%;
} }
.eyebrow { .eyebrow {
@@ -192,13 +192,9 @@ main {
.tool-controls { .tool-controls {
display: grid; display: grid;
align-content: end; grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 10.5rem);
align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow: var(--shadow);
} }
.search-field, .search-field,
@@ -212,7 +208,7 @@ main {
} }
.search-field { .search-field {
width: 100%; min-width: 0;
padding: 0 0.85rem; padding: 0 0.85rem;
gap: 0.55rem; gap: 0.55rem;
} }
@@ -235,7 +231,7 @@ main {
} }
.category-field { .category-field {
width: 100%; min-width: 0;
padding: 0 0.65rem; padding: 0 0.65rem;
} }
@@ -244,15 +240,21 @@ main {
} }
.hidden-toggle { .hidden-toggle {
grid-column: 2;
display: flex; display: flex;
align-items: center; align-items: center;
justify-self: end;
gap: 0.45rem; gap: 0.45rem;
margin: 0.15rem 0 0;
color: var(--muted); color: var(--muted);
cursor: pointer; cursor: pointer;
font-size: 0.88rem; font-size: 0.88rem;
} }
.hidden-toggle--disabled {
cursor: default;
opacity: 0.58;
}
.hidden-toggle input { .hidden-toggle input {
width: 1.05rem; width: 1.05rem;
height: 1.05rem; height: 1.05rem;
@@ -260,6 +262,7 @@ main {
} }
.active-filter { .active-filter {
grid-column: 1;
justify-self: start; justify-self: start;
padding: 0.4rem 0.65rem; padding: 0.4rem 0.65rem;
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
@@ -303,23 +306,31 @@ main {
.app-grid { .app-grid {
display: 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 { .app-card {
position: relative; position: relative;
min-height: 340px; aspect-ratio: 1;
min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden; overflow: hidden;
padding: 1rem 0.85rem 0.75rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 1.2rem; border-radius: 1rem;
background: var(--surface); background: var(--surface);
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: transition:
border-color 180ms ease, border-color 180ms ease,
transform 180ms ease,
box-shadow 180ms ease; box-shadow 180ms ease;
} }
@@ -331,33 +342,35 @@ main {
.app-card:hover { .app-card:hover {
border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); 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); box-shadow: 0 20px 54px rgba(24, 34, 68, 0.13);
} }
.app-card--hidden { .app-card--hidden {
border-style: dashed; 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 { .app-card__icon {
width: 52px; width: 3.6rem;
height: 52px; height: 3.6rem;
display: grid; display: grid;
place-items: center; place-items: center;
overflow: hidden; overflow: hidden;
border-radius: 0.95rem; border-radius: 0.9rem;
background: var(--brand-soft); background: var(--brand-soft);
color: var(--brand); color: var(--brand);
font-family: Inter, Avenir, 'Segoe UI', sans-serif; font-family: Inter, Avenir, 'Segoe UI', sans-serif;
font-size: 1.45rem; font-size: 1.35rem;
font-weight: 700; font-weight: 700;
} }
@@ -367,51 +380,130 @@ main {
object-fit: contain; 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 { .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; 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 { .drag-handle:active {
cursor: grabbing; 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, .icon-button,
.close-button { .close-button {
width: 32px; width: 2.15rem;
height: 32px; height: 2.15rem;
display: grid; display: grid;
place-items: center; place-items: center;
border: 0; padding: 0;
border: 1px solid var(--line);
border-radius: 50%; border-radius: 50%;
background: transparent; background: var(--surface-soft);
color: var(--muted); color: var(--muted);
cursor: pointer; cursor: pointer;
} }
.app-card__actions .icon-button {
pointer-events: auto;
}
.icon-button:hover:not(:disabled), .icon-button:hover:not(:disabled),
.icon-button.is-active { .icon-button.is-active {
border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
background: var(--brand-soft); background: var(--brand-soft);
color: var(--brand); 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 { .icon-button:disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.28; opacity: 0.28;
} }
.app-card__body {
flex: 1;
padding: 1.25rem 1.35rem 1rem;
}
.title-line { .title-line {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -419,10 +511,10 @@ main {
gap: 0.45rem; gap: 0.45rem;
} }
.title-line h3 { .title-line h2 {
margin: 0; margin: 0;
font-family: Inter, Avenir, 'Segoe UI', sans-serif; font-family: Inter, Avenir, 'Segoe UI', sans-serif;
font-size: 1.3rem; font-size: 1.35rem;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
@@ -470,22 +562,6 @@ main {
color: var(--muted); 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, .tag-row,
.category-row { .category-row {
display: flex; display: flex;
@@ -519,26 +595,11 @@ main {
color: var(--brand); 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 { .version {
color: var(--muted); color: var(--muted);
font-size: 0.78rem; font-size: 0.78rem;
} }
.app-card__meta {
display: grid;
gap: 0.25rem;
}
.source-link, .source-link,
.site-footer a { .site-footer a {
position: relative; position: relative;
@@ -546,12 +607,6 @@ main {
color: var(--brand); color: var(--brand);
} }
.open-hint {
color: var(--brand);
font-size: 0.84rem;
font-weight: 700;
}
.state-card { .state-card {
max-width: 600px; max-width: 600px;
margin: 0 auto 5rem; margin: 0 auto 5rem;
@@ -655,15 +710,16 @@ main {
inset: 0; inset: 0;
display: grid; display: grid;
place-items: center; place-items: center;
overflow-y: auto;
padding: 1rem; padding: 1rem;
background: rgba(5, 9, 22, 0.56); background: rgba(5, 9, 22, 0.56);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }
.preferences-panel, .help-panel,
.help-panel { .app-info-panel {
width: min(560px, 100%);
max-height: calc(100vh - 2rem); max-height: calc(100vh - 2rem);
max-height: calc(100dvh - 2rem);
overflow: auto; overflow: auto;
padding: 1.5rem; padding: 1.5rem;
border: 1px solid var(--line); border: 1px solid var(--line);
@@ -672,7 +728,15 @@ main {
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
} }
.preferences-panel > header, .help-panel {
width: min(560px, 100%);
}
.app-info-panel {
position: relative;
width: min(680px, 100%);
}
.help-panel > header { .help-panel > header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -680,14 +744,111 @@ main {
gap: 1rem; gap: 1rem;
} }
.preferences-panel h2,
.help-panel h2 { .help-panel h2 {
margin: 0; margin: 0;
font-family: Inter, Avenir, 'Segoe UI', sans-serif; font-family: Inter, Avenir, 'Segoe UI', sans-serif;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
.preferences-panel .eyebrow, .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 { .help-panel .eyebrow {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -720,44 +881,6 @@ main {
font-size: 1.3rem; font-size: 1.3rem;
} }
.theme-choice {
margin: 1.5rem 0;
padding: 0;
border: 0;
}
.theme-choice legend {
margin-bottom: 0.6rem;
color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
}
.theme-choice > div {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.45rem;
padding: 0.35rem;
border-radius: 0.75rem;
background: var(--surface-soft);
}
.theme-choice button {
padding: 0.62rem;
border: 0;
border-radius: 0.5rem;
background: transparent;
cursor: pointer;
}
.theme-choice button.is-selected {
background: var(--surface);
color: var(--brand);
box-shadow: 0 2px 8px rgba(20, 30, 60, 0.09);
font-weight: 700;
}
.preference-summary { .preference-summary {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@@ -767,7 +890,7 @@ main {
.preference-summary > div { .preference-summary > div {
display: grid; display: grid;
gap: 0.2rem; gap: 0.2rem;
padding: 0.9rem; padding: 0.65rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 0.7rem; border-radius: 0.7rem;
text-align: center; text-align: center;
@@ -775,7 +898,7 @@ main {
.preference-summary strong { .preference-summary strong {
font-family: Inter, Avenir, 'Segoe UI', sans-serif; font-family: Inter, Avenir, 'Segoe UI', sans-serif;
font-size: 1.25rem; font-size: 1.05rem;
} }
.preference-summary span, .preference-summary span,
@@ -785,8 +908,11 @@ main {
font-size: 0.8rem; font-size: 0.8rem;
} }
.preferences-copy { .portal-header .preferences-copy {
margin: 1.1rem 0; margin: 0.9rem 0;
padding: 0;
color: var(--toolbox-muted, var(--muted));
font-size: 0.78rem;
line-height: 1.55; line-height: 1.55;
} }
@@ -797,7 +923,7 @@ main {
} }
.preferences-actions button { .preferences-actions button {
padding: 0.62rem 0.78rem; padding: 0.52rem 0.68rem;
} }
.preferences-actions .danger-button { .preferences-actions .danger-button {
@@ -805,17 +931,12 @@ main {
color: var(--danger); color: var(--danger);
} }
.action-message { .portal-header .action-message {
min-height: 1.2em; min-height: 1.2em;
margin: 0.8rem 0 0; margin: 0.8rem 0 0;
} padding: 0;
color: var(--toolbox-muted, var(--muted));
.inline-warning { font-size: 0.78rem;
padding: 0.7rem 0.8rem;
border-radius: 0.6rem;
background: color-mix(in srgb, var(--danger) 8%, var(--surface));
color: var(--danger);
font-size: 0.82rem;
} }
.visually-hidden { .visually-hidden {
@@ -830,10 +951,10 @@ main {
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.portal-header .toolbox-shell__bar,
main, main,
.site-footer { .site-footer {
width: min(100% - 1.4rem, 1160px); width: min(100%, 90rem);
padding-inline: 0.7rem;
} }
.hero { .hero {
@@ -854,14 +975,6 @@ main {
margin: 0.25rem 0; margin: 0.25rem 0;
} }
.app-grid {
grid-template-columns: 1fr;
}
.app-card {
min-height: 320px;
}
.site-footer { .site-footer {
min-height: 130px; min-height: 130px;
align-items: flex-start; align-items: flex-start;
@@ -870,13 +983,50 @@ main {
} }
} }
@media (min-width: 701px) and (max-width: 960px) { @media (max-width: 520px) {
.hero { .tool-controls {
grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); grid-template-columns: 1fr;
} }
.app-grid { .search-field,
grid-template-columns: repeat(2, minmax(0, 1fr)); .category-field,
.active-filter,
.hidden-toggle {
grid-column: 1;
}
.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: 1fr;
}
}
@media (hover: none) {
.drag-handle {
opacity: 1;
pointer-events: auto;
transform: translate(0, -50%);
} }
} }

36
src/test/fixtures.ts
View File

@@ -7,7 +7,7 @@ export const pdfManifest: ToolboxAppManifest = {
schemaVersion: 1, schemaVersion: 1,
id: 'de.add-ideas.pdf-tools', id: 'de.add-ideas.pdf-tools',
name: 'PDF Workbench', name: 'PDF Workbench',
version: '0.4.0', version: '0.4.3',
description: 'Page-level PDF operations performed locally in the browser.', description: 'Page-level PDF operations performed locally in the browser.',
entry: './', entry: './',
icon: './favicon.svg', icon: './favicon.svg',
@@ -30,7 +30,7 @@ export const pdfManifest: ToolboxAppManifest = {
telemetry: false, telemetry: false,
}, },
source: { source: {
repository: 'https://git.add-ideas.de/zemion/pdf-tools', repository: 'https://git.add-ideas.de/lotobo/pdf-tools',
license: 'AGPL-3.0-only', license: 'AGPL-3.0-only',
}, },
}; };
@@ -39,13 +39,13 @@ export const xsltManifest: ToolboxAppManifest = {
...pdfManifest, ...pdfManifest,
id: 'de.add-ideas.xslt-tools', id: 'de.add-ideas.xslt-tools',
name: 'XSLT Workbench', name: 'XSLT Workbench',
version: '0.4.0', version: '0.4.2',
description: 'Transform XML locally with XSLT in the browser.', description: 'Transform XML locally with XSLT in the browser.',
icon: './xslt.svg', icon: './xslt.svg',
categories: ['documents', 'developer'], categories: ['documents', 'developer'],
tags: ['transform', 'xml'], tags: ['transform', 'xml'],
source: { source: {
repository: 'https://git.add-ideas.de/zemion/xslt-tools', repository: 'https://git.add-ideas.de/lotobo/xslt-tools',
license: 'AGPL-3.0-only', license: 'AGPL-3.0-only',
}, },
}; };
@@ -54,17 +54,39 @@ export const onenoteManifest: ToolboxAppManifest = {
...pdfManifest, ...pdfManifest,
id: 'de.add-ideas.onenote-tools', id: 'de.add-ideas.onenote-tools',
name: 'OneNote Reader', name: 'OneNote Reader',
version: '0.3.0', version: '0.3.3',
description: 'Inspect OneNote packages locally in the browser.', description: 'Inspect OneNote packages locally in the browser.',
icon: './onenote.svg', icon: './onenote.svg',
categories: ['documents', 'notes'], categories: ['documents', 'notes'],
tags: ['onepkg', 'import'], tags: ['onepkg', 'import'],
source: { source: {
repository: 'https://git.add-ideas.de/zemion/onenote-tools', repository: 'https://git.add-ideas.de/lotobo/onenote-tools',
license: 'AGPL-3.0-only', license: 'AGPL-3.0-only',
}, },
}; };
export const regexManifest: ToolboxAppManifest = {
...pdfManifest,
id: 'de.add-ideas.regex-tools',
name: 'Regex Tools',
version: '0.4.1',
description:
'Develop, explain, test and apply regular expressions locally in the browser.',
icon: './regex.svg',
categories: ['developer', 'text', 'regex'],
tags: ['regular-expression', 'match', 'replace', 'explain', 'test'],
requirements: {
secureContext: false,
workers: true,
indexedDb: true,
crossOriginIsolated: false,
},
source: {
repository: 'https://git.add-ideas.de/lotobo/regex-tools',
license: 'GPL-3.0-or-later',
},
};
export const catalogue: ToolboxCatalog = { export const catalogue: ToolboxCatalog = {
schemaVersion: 1, schemaVersion: 1,
id: 'de.add-ideas.toolbox', id: 'de.add-ideas.toolbox',
@@ -94,6 +116,8 @@ export function catalogueFetch(overrides: Record<string, Response> = {}) {
return Response.json(xsltManifest); return Response.json(xsltManifest);
if (url.pathname.endsWith('/apps/onenote/toolbox-app.json')) if (url.pathname.endsWith('/apps/onenote/toolbox-app.json'))
return Response.json(onenoteManifest); return Response.json(onenoteManifest);
if (url.pathname.endsWith('/apps/regex/toolbox-app.json'))
return Response.json(regexManifest);
return new Response('Not found', { status: 404 }); return new Response('Not found', { status: 404 });
}; };
} }

31
src/toolPresentation.test.ts Normal file
View File

@@ -0,0 +1,31 @@
import { describe, expect, it } from 'vitest';
import { shortToolDescription, shortToolTitle } from './toolPresentation';
import type { ResolvedApp } from './types';
function app(id: string, name: string, description: string): ResolvedApp {
return { id, name, description } as ResolvedApp;
}
describe('compact tool presentation', () => {
it('uses the requested Audio & Video tile copy', () => {
const audioVideo = app(
'de.add-ideas.av-tools',
'Audio & Video Tools',
'Convert and lightly edit audio and video locally in the browser.'
);
expect(shortToolTitle(audioVideo)).toBe('Audio & Video');
expect(shortToolDescription(audioVideo)).toBe('Convert and edit locally.');
});
it('uses the requested Regex tile copy', () => {
const regex = app(
'de.add-ideas.regex-tools',
'Regex Tools',
'Develop, explain, test and apply regular expressions locally in the browser.'
);
expect(shortToolTitle(regex)).toBe('Regex');
expect(shortToolDescription(regex)).toBe('Explain and test locally.');
});
});

35
src/toolPresentation.ts Normal file
View File

@@ -0,0 +1,35 @@
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.',
},
'de.add-ideas.av-tools': {
title: 'Audio & Video',
description: 'Convert and edit locally.',
},
'de.add-ideas.regex-tools': {
title: 'Regex',
description: 'Explain and test 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;
}