# XWUISuperApp

The abstract foundation every `XWUISuper<Domain>` shell extends: an opinionated wrapper around `basic/XWUIShellApp` that publishes its navigation as introspectable static data. Subclasses override only two statics - `menuTree()` returning `XWUIMenuNode[]` and `pages()` returning a menu-key → page-factory map - while this base owns the instance plumbing: it merges those statics with `data.menuTree` / `data.pages` and any `conf_comp.extraTree` / `extraPages`, renders the dashboard-layout shell with a tree nav, resolves the initial leaf (explicit `data.activeKey`, then the first `meta.default: true` leaf, then the first leaf overall), and mounts/destroys one page-class at a time into the main slot as the user navigates or follows a hash route. Its static `merge(...apps)` union-folds several Super apps into one plain `{ menuTree, pages }` descriptor, namespacing any colliding key as `<ClassName>:<key>` so both pages stay reachable. The base also reads `conf_comp.title` (defaults to the subclass `componentName`), `sidebarWidth` (default `260px`), `sidebarCollapsed`, `className`, plus `data.user` for the sidebar-footer identity, `data.locale` (`ar` flips to RTL and prefers `user.nameAr`) and `data.notifications` for a header badge.

Subclassing is not required: a host can pass `data.menuTree` (a plain `XWUIMenuNode[]`) and `data.pages` (a menu-key → page-source map) straight to the base `XWUISuperApp` and get the same shell with no TypeScript class. Each `data.pages` entry is either an in-process factory `(container) => XWUIComponent`, or - for hosts that author `data` as a serialized JSON attribute and can't embed a function - a `{ module, export? }` descriptor resolved via dynamic `import()` on first navigation to that key. The menu tree also accepts nested `<xwui-item>` children (recursive, for sub-menus) as sugar for `data.menuTree`, per [`COMPOSITION.md`](../../COMPOSITION.md); JSON wins on `key` collisions. Instance-level `getMenuTree()` / `getPages()` expose the fully-merged result for introspection.

## Basic Usage

A minimal `XWUISuperDemo` subclass with one group of two leaves, each backed by a stand-in `XWUICard`, showing the smallest viable shell and the default-landing flag.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Subclasses XWUISuperApp with two leaves and two XWUICard pages, landing on the meta.default demo-dashboard and swapping pages as the sidebar leaves are clicked.
```

## Merged Apps

Combines two demo subclasses (a Sales group and an HR group) through the static `merge(...apps)` API and mounts the result on a bare host `XWUISuperApp` via `extraTree` / `extraPages`.

```example
file: examples/MergedApps.ts
html: examples/MergedApps.html
title: Merged Apps
description: Merges AppA and AppB into one JSON-shaped descriptor and feeds it as extraTree/extraPages to a host XWUISuperApp, rendering the Sales and HR groups in one shell with no anonymous subclass.
```

## Branded Fleet Ops app

A single-domain subclass with three leaves, a text-mark logo, a header toolbar slot and a notifications badge.

```example
file: examples/BrandedFleetApp.ts
html: examples/BrandedFleetApp.html
title: Branded Fleet Ops app
description: Three-leaf Fleet Ops subclass with a logo, mainHeader slot and notifications badge.
```

## Three-app suite

Folds three sibling Super-apps into one shell via `merge()`, booting deep onto a Billing leaf with the sidebar collapsed.

```example
file: examples/ThreeAppSuite.ts
html: examples/ThreeAppSuite.html
title: Three-app suite
description: merge() of Sales + Support + Billing into one host shell, landing on billing-invoices, sidebar collapsed.
```

```api
```