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.