# WRNexus UI component showcase

The showcase is generated from `packages/ui/component-reference.json`. It stays
synchronized with the current component source rather than maintaining a second
hand-written catalog.

```bash
bun run --cwd examples/component-showcase dev
```

Open `http://localhost:3000`.

## Detail-page coverage

Every current UI component receives a dedicated detail page with:

- an interactive server-rendered playground for every declared prop
- typed boolean, number, array, and object controls
- public component-tag syntax with single-quoted dynamic WRN expressions
- component-specific production use cases when a profile exists
- responsive fallback examples for every remaining component
- copyable `.wrn` source beside every live preview
- complete props, slots, and explicitly declared public events
- live `event.detail` output for interactive components
- previous and next component navigation

The specialized profiles for new and recently repaired components live in:

```text
scripts/showcase-profiles.mjs
```

Update that file to add product-quality examples or public enum options. Do not
infer allowed prop values from implementation comparisons; unrestricted values
such as icon classes, labels, IDs, and URLs must remain free-form inputs.

## Generated files

The generator creates:

```text
app/layouts/showcase.wrn
app/layouts/document.wrn
app/pages/*.wrn
app/pages/components/*.wrn
showcase-manifest.json
```

`showcase-manifest.json` records component, category, demo, prop, slot, and event
coverage and is used by the test suite. Do not hand-edit generated pages.

## Validation

After changing UI components, metadata, profiles, the playground, or showcase
styles, run:

```bash
bun run scripts/generate-ui-component-reference.mjs
bun run --cwd examples/component-showcase generate
bun run --cwd examples/component-showcase test
bun run --cwd examples/component-showcase build
```

The complete local check is:

```bash
bun run --cwd examples/component-showcase check
```

Review representative component pages at mobile, tablet, and desktop widths and
in light, dark, keyboard-only, and reduced-motion modes before publishing.