# XWUIPageView

Renders one piece of content whose *format is data*, not code: Markdown, HTML, a
JSON form schema, a registered JSON DSL, or runnable JavaScript/TypeScript. The
page decides what it is showing at runtime, which is what makes it the right
component for content a product stores rather than compiles - documentation
pages, CMS bodies, plugin panels, AI-generated snippets.

The interesting part is the trust boundary. Runnable content (`js`, `ts`, and
untrusted `html`) is **sandboxed by default**, not because a flag was set but
because that is the default value of `config.execution`.

## When to use

- Content whose format is only known at runtime, or is chosen by an author.
- Any surface that renders code or markup the first party did not write:
  user-generated, plugin-supplied, or model-generated.
- Documentation and in-product help, where Markdown and a live example sit in
  the same pipeline.

Reach for `XWUIMarkdown` when the content is always Markdown, and for
`XWUIScriptEditor` when the user is editing code rather than viewing its result.

## Content and trust lanes

`data.source` is the renderable unit: `format` plus one of `source` (inline
text), `value` (a pre-parsed object for `json-form` / `json`) or `src` (a URL to
fetch). `format: 'json'` also takes `dsl`, the registered DSL key that renders
it. New formats are added by registering a renderer, so the built-in union is a
starting set, not a ceiling.

`config.execution` picks the lane for runnable content:

- `sandboxed` - **the default**. An `<iframe sandbox="allow-scripts">` with no
  same-origin access; host and module talk over a validated `postMessage`
  bridge. No host DOM, cookies or storage.
- `untrusted` - the sandbox plus CSP `default-src 'none'`; network and storage
  stay denied whatever the grants say, and a strict execution timeout applies.
  This is the lane for user-generated, plugin and AI-generated code.
- `trusted` - in-realm ES module with the full XWUI API. Only for code you
  author and ship yourself. Choosing it is a security decision, so make it
  deliberately and never in response to "the sandbox blocked something".

`config.grants` is default-deny: `network` (`false`, `true`, or an origin
allowlist that becomes the iframe's `connect-src`), `storage` and `navigation`
all start off, and the `untrusted` lane ignores grants that would widen the
sandbox.

## Configuration surface

- `execution`, `grants`, `execTimeoutMs` (wall-clock budget before a runnable
  mount is torn down, default `5000`).
- `transpileEngine` - TS to JS engine, default `strip`; the sandboxed and
  untrusted lanes upgrade it to `auto` with `require: true` so a regex
  transform cannot end up in the trust path.
- `runtimeHead` - HTML injected into the sandbox `<head>` (importmap, loader,
  stylesheets) so a runnable module can resolve the XWUI runtime. Ignored by
  the `trusted` lane.
- `maxWidth`, `padding` (default `'0'`), `minHeight`, `className` for layout.

`data.props` are handed to renderers and runnable modules; across the sandbox
boundary they are structured-cloned, so keep them JSON-serialisable.
`data.onEvent` receives whatever a runnable module emits through
`ctx.emit(event, detail)`, and `data.onError` fires on a fetch, parse or
transpile failure, or when no renderer is registered for the format.

## Markdown

Markdown source rendered with raw HTML disabled, the safe default.

```example
file: examples/Markdown.ts
html: examples/Markdown.html
title: Markdown
description: Markdown content rendered with raw HTML disabled.
```

## JSON Form

A form schema rendered through the dynamic field renderer, so a stored schema
becomes a working form with no per-form code.

```example
file: examples/JsonForm.ts
html: examples/JsonForm.html
title: JSON Form
description: A stored JSON schema rendered as a live form.
```

## Runnable (Sandboxed)

Executable content in the default lane: the module runs inside a sandboxed
iframe with no same-origin access and talks to the host over the bridge.

```example
file: examples/RunnableSandboxed.ts
html: examples/RunnableSandboxed.html
title: Runnable (Sandboxed)
description: Runnable code in the default sandboxed trust lane.
```

## Showcase

The formats side by side, showing how one component fronts several content
lanes.

```example
file: examples/Showcase.ts
html: examples/Showcase.html
title: Showcase
description: Several content formats rendered by the same component.
```

```api
```
