# XWUITester

The base harness that powers every XWUI component tester page. It renders a chrome around a component under test: a header (XWUI logo + component title/description), a sidebar tree of all components (loaded from `components_manifest.json`), a Preview / Code / Console toolbar, device-frame switching (desktop / tablet / mobile with rotate), a theme switch, and a settings drawer for live-editing system/user config and the component's `conf_comp` / `data`. Pass the component's `title`, `desc`, and `componentName` (plus an optional `componentInstance` to drive); set `embedded: true` to drop the header and sidebar for inline docs use, and use `defaultPlatform` / `defaultOrientation` / `defaultDirection` to set the initial viewport. Mount components into the area returned by `getTestArea()` (or per-scenario panels via `addPanel()`), and `await waitForReady()` before asserting.

## Usage

```ts
import { XWUITester } from './XWUITester';

const tester = new XWUITester(
  document.body,
  { title: 'XWUIButton', desc: 'Clickable button', componentName: 'XWUIButton' },
  { defaultPlatform: 'desktop', defaultDirection: 'ltr' }
);

await tester.waitForReady();
const area = tester.getTestArea();
// mount the component under test into `area`
```

## Basic Usage

The full tester chrome - header, component sidebar, and Preview/Code/Console toolbar with device frames - hosting a live XWUIButton.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Full tester chrome hosting a live XWUIButton.
```

## Embedded Docs Mode

`embedded: true` drops the header and sidebar for inline docs, with the viewport pre-set to a mobile frame.

```example
file: examples/EmbeddedDocs.ts
html: examples/EmbeddedDocs.html
title: Embedded Docs Mode
description: Header/sidebar-less embedded chrome on a mobile frame.
```

## Scenario Panels

`addPanel()` adds named scenario sections, each with its own toolbar - three button variants side by side.

```example
file: examples/ScenarioPanels.ts
html: examples/ScenarioPanels.html
title: Scenario Panels
description: Multiple scenario panels, each with its own toolbar.
```

```api
```