feat: add shared toolbox header and appearance

This commit is contained in:
2026-07-23 00:11:13 +02:00
parent 5e206baf42
commit a058858b50
17 changed files with 982 additions and 216 deletions

View File

@@ -5,7 +5,7 @@ tools. An app always works by itself. When it receives a trusted same-origin
catalog URL, the same app gains a toolbox home link and an app switcher without
becoming coupled to a portal or client-side router.
Version `0.1.0` contains three publish-ready packages:
Version `0.2.0` contains three publish-ready packages:
- `@add-ideas/toolbox-contract` — types, strict v1 runtime parsing, context
discovery/loading, resolved URLs, and contextual link helpers.
@@ -160,23 +160,26 @@ import "@add-ideas/toolbox-shell-react/styles.css";
<AppShell
app={manifest}
manifestUrl="/toolbox-app.json"
appActions={<a href="./help/">Help</a>}
helpAction={{ onClick: () => setHelpOpen(true) }}
onContextError={(error) => console.warn(error)}
>
<Application />
</AppShell>;
```
The shell always renders app identity as an `h1`, version, derived privacy
facts, manifest actions, and `appActions`. With valid context it additionally
renders the catalog brand/home and a switcher at the accessible navigation
landmark `Toolbox applications`. Destinations are ordinary links, so switching
performs full-page navigation. On missing, cross-origin, invalid, or unavailable
context the shell quietly remains usable in standalone mode; `onContextError` is
optional observability.
The shell always renders a centered app identity, version, derived privacy
facts, standard Help and source controls, Personalize, Apps, manifest actions,
and legacy `appActions`. With valid context it additionally renders the catalog
brand/home and available app destinations. Destinations are ordinary links, so
switching performs full-page navigation. On missing, cross-origin, invalid, or
unavailable context the shell quietly remains usable in standalone mode;
`onContextError` is optional observability.
CSS custom properties prefixed with `--toolbox-` are the v1 theme surface. The
catalog `light`, `dark`, or `system` mode selects the built-in palette.
user's `light`, `dark`, or `system` preference is shared with same-origin apps
under `TOOLBOX_PREFERENCES_KEY`; the catalog mode is used until a preference is
saved. `ToolboxHeader` is also exported for portal-like pages that do not need
the complete application shell.
## Validate a build
@@ -210,6 +213,8 @@ The main exports are:
`fetchToolboxCatalog()`, `loadToolboxCatalog()`, and `loadToolboxContext()`.
- URLs: `resolveWebUrl()`, `resolveToolboxApp()`, `requireSameOrigin()`, and
`contextualizeToolboxLink()`.
- Preferences: `parseToolboxPreferences()`, `readToolboxPreferences()`,
`writeToolboxPreferences()`, and `TOOLBOX_PREFERENCES_KEY`.
See each emitted `.d.ts` file for the complete signatures.