# WRNexusJS component showcase complete update

This patch upgrades `examples/component-showcase` so the showcase follows the
current `@wrnexus/ui` source automatically and documents the new and recently
repaired components through real detail-page examples.

## Apply

From the extracted patch directory:

```powershell
powershell `
  -ExecutionPolicy Bypass `
  -File ".\APPLY_COMPONENT_SHOWCASE_UPDATE.ps1" `
  -Root "E:\WireJS"
```

The script backs up replaced source files, the generated component reference,
the generated pages, layouts, and showcase manifest under:

```text
E:\WireJS\.wrnexus\component-showcase-backup-<timestamp>
```

It then regenerates the current UI reference, regenerates every showcase page,
and runs the component showcase check. Use `-SkipValidation` only when you need
to copy and generate first and validate manually afterward.

## Main changes

### Complete dynamic catalog

- Generates one detail page for every unique component declaration.
- Deduplicates legacy lowercase component files in the reference generator and
  prefers the canonical `<ComponentName>.wrn` source.
- Uses only explicitly declared `@event ... = function` entries as the public
  event contract.
- Generates `showcase-manifest.json` with component, category, demo, prop, slot,
  event, and profile coverage.

### Component-specific examples

`scripts/showcase-profiles.mjs` contains production use cases for the new and
recently repaired components, including:

- PublicPageShell, Section, SectionHeader, MarketingSectionHeader
- AnnouncementBar, Breadcrumb, PageHeader, TextLink
- Hero, HeroActions, SplitHero
- FeatureGrid, FeatureCard, FeatureIconCard
- MetricGrid, MetricCard, StatsBar
- CTASection, BackToTop, Footer
- ContextMenu, Drawer, Dropdown, Modal, Popover, Tooltip
- Container, Grid, Columns, Card, Link, Image, SearchBox, Map, List, Marquee,
  Tabs, Timeline, Typography, and Divider

Every other catalog component keeps responsive generated baseline examples.

### Correct WRN source generation

- Uses public component tags such as `<MetricGrid />` instead of legacy mounts.
- Self-closes components without slots and uses paired tags only when content is
  present.
- Uses `data-slot="..."` for named WRNexusJS slots.
- Uses single-quoted dynamic WRN expressions in playground previews.
- Safely serializes arrays and objects without breaking on apostrophes in data
  or data URLs.

### Typed playground

- Boolean controls preserve explicit `true` and `false` values.
- Number controls remain numbers.
- Array and object controls are validated JSON and remain structured values.
- Free-form props such as icons, labels, IDs, and URLs remain text inputs.
- Enum controls come from explicit public showcase profiles rather than source
  comparisons, preventing false VS Code-style restrictions.
- Preview replacement uses `replaceChildren`, rehydrates WRN scopes, rebinds the
  theme runtime, and never uses unsafe `innerHTML`.
- Interactive components display live `event.detail` output.

### Responsive detail pages

The showcase stylesheet now gives shell, hero, grid, statistics, CTA, footer,
and overlay components the correct preview width and height. In particular,
MetricGrid and FeatureGrid use the complete available stage instead of being
compressed into narrow cards.

### Event documentation

Every component with declared public events receives:

- a complete event list
- declarative `.wrn` handler examples
- browser `addEventListener` examples
- live event output in the playground

### Tests

The test suite is manifest-driven rather than using hardcoded component or demo
counts. It verifies generated coverage, typed playground behavior, safe source
syntax, profile coverage, event documentation, responsive stages, specialized
form examples, and compilation of every generated page.

## Manual commands

```powershell
cd E:\WireJS
bun run scripts/generate-ui-component-reference.mjs

cd E:\WireJS\examples\component-showcase
bun run generate
bun run test
bun run build
```

For the complete example validation:

```powershell
bun run check
```