@add-ideas/toolbox-shell-react (0.2.1)
Installation
@add-ideas:registry=npm install @add-ideas/toolbox-shell-react@0.2.1"@add-ideas/toolbox-shell-react": "0.2.1"About this package
@add-ideas/toolbox-shell-react
import { AppShell } from "@add-ideas/toolbox-shell-react";
import "@add-ideas/toolbox-shell-react/styles.css";
<AppShell app={manifest} helpAction={{ onClick: () => setHelpOpen(true) }}>
<App />
</AppShell>;
AppShell discovers ?toolbox=... or <meta name="toolbox">, but continues in
standalone mode if context is absent, unavailable, cross-origin, or invalid. Its
app switcher is exposed as the accessible navigation landmark
Toolbox applications and all destinations use ordinary document navigation.
The fixed top row exposes Personalize, Apps, Gitea source, and Help in that
order, a centered title/subtitle, and a Toolbox home/brand block. Personalize
offers light/dark/system mode by default. Version, privacy, and application
actions render in the standard footer so connected and standalone headers keep
the same geometry.
ToolboxHeader is exported separately for custom shells. Its
personalizeContent prop puts custom preferences inside the shared controlled
popover, while brandIconUrl supplies a portal favicon; an inline Toolbox cube
is the fallback. Personalize and Apps popovers are mutually exclusive and close
on Escape, outside interaction, or link selection.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @add-ideas/toolbox-contract | 0.2.1 |
Peer Dependencies
| ID | Version |
|---|---|
| react | >=18 <20 |
| react-dom | >=18 <20 |