# XWUIComponent

The single canonical abstract base class that every XWUI component (across the basic, power, super, chart, and game tiers) extends. It owns the shared foundation: a `container` + delegated `logic` object, a per-instance `config` (settings/defaults) overridden by `data` and merged with the global settings registered via `XWUIComponent.configure(...)` (exposed as a read-only `effectiveConfig`), ref-counted lazy CSS auto-load, optional cookie/localStorage persistence with cross-tab sync, locale/direction (LTR/RTL) handling, child-component lifecycle, and IntersectionObserver-based lazy mounting. It is never instantiated directly - subclasses provide a `setupDOM()` renderer and forward their public API to `this.logic`.

## Usage

Extend `XWUIComponent`, parameterise it with your logic type, set a static `componentName`, and call `super(container, createLogic(data, config))` from the constructor - then build the DOM in a private `setupDOM()`:

```ts
import { XWUIComponent } from '../XWUIComponent/XWUIComponent';
import { createXWUIFooLogic, type XWUIFooLogic } from './XWUIFoo.logic';
import type { XWUIFooConfig, XWUIFooData } from './XWUIFoo.types';

export class XWUIFoo extends XWUIComponent<XWUIFooLogic> {
  declare readonly logic: XWUIFooLogic;
  static readonly componentName = 'XWUIFoo';

  // The contract is the same three arguments for every component:
  constructor(
    container: HTMLElement,
    data: XWUIFooData = {},
    config: XWUIFooConfig = {}
  ) {
    super(container, createXWUIFooLogic(data, config));
    this.setupDOM();
  }

  private setupDOM(): void {
    this.container.innerHTML = '';
    // ...render from this.data / this.config...
  }
}
```

> Global settings (locale, timezone, formats, active theme/brand presets) are **not** constructor arguments - they are set once via `XWUIComponent.configure({ system, user })` and merged into `logic.effectiveConfig` for every component.

```api
```