feat: sync showcase with WRNexusJS 0.8.7

README.md

@@ -1,23 +1,71 @@
 # WRNexus UI component showcase
 
-This example renders every component from `@wrnexus/ui` with representative,
-prop-driven data. Pages are generated from `packages/ui/component-reference.json`
-so coverage stays synchronized with the packaged component catalog.
+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`. The index links to the category catalog, and every
-component card opens a dedicated documentation page with three live use cases,
-usage examples, its prop API, events, slots, and related navigation.
+Open `http://localhost:3000`.
 
-After changing UI component props, regenerate and verify the catalog:
+## 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
 ```
 
-Files under `app/pages/` are generated. Customize the generator or stylesheet
-instead of editing those pages directly.
+Review representative component pages at mobile, tablet, and desktop widths and
+in light, dark, keyboard-only, and reduced-motion modes before publishing.