@leumas/ui

The ONE Leumas component + layout kit — data-agnostic, token-driven primitives every product composes. No product ships its own header/footer/sidebar; they import these and pass their own data.

Absorbs (DRY-consolidated from): z.Domains2/core/src/Globals/{Headers,Footers,Menus,Sidebars,Loaders,SpeedDials}

• Shared/Components; leumas-tech/src/components/{Layout,HUDLayout,WorkspaceLayout,…};

LeumasMedia/core/shared-ui; leumas-school/packages/ui. The heavy product-specific logic (mega-menus, wakeword, wallet, hard-coded routes) is deliberately left in the product — @leumas/ui stays presentational.

Usage

import '@leumas/theme/global.css';
import '@leumas/ui/ui.css';
import { AppShell, Header, Aside, Footer, NavMenu, ThemeToggle } from '@leumas/ui';
import { NavLink } from 'react-router-dom';

<AppShell
  header={<Header logo="/logo.svg" title="Leumas" nav={<NavMenu items={nav} orientation="horizontal" LinkComponent={NavLink} />} utils={<ThemeToggle />} />}
  {/* ONE contextual panel — the current section's pages, not a copy of the header nav. */}
  sidebar={<Aside title="This section" items={sectionNav} LinkComponent={NavLink} />}
 footer={<Footer left="(c) Leumas" right={socials} />}
>
  <Outlet />
</AppShell>

Exports

• Layout: AppShell, Header, Aside (one contextual panel), Footer, NavMenu / NavItem, AppsGrid.
• Primitives: Card (+ glow), Button (primary/ghost), PageContainer, Loader.
• Theme: ThemeToggle, useTheme (re-exported from @leumas/theme).

Router-agnostic: pass LinkComponent (e.g. NavLink) or it falls back to <a>.