1.4 KiB
@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 a Toolbox home/brand block at the far left, a centered
title/subtitle, and Help, Gitea source, Apps, and Personalize at the far right
in that order. Personalize uses the portal-style panel and 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. ToolboxPersonalizePanel shares the portal heading, optional
storage warning, and appearance picker with custom preference content.
Personalize and Apps popovers are mutually exclusive and close on Escape,
outside interaction, or link selection.