ClintchizandClaude Opus 5.5
c0ac38c572
- Sync app, public, scripts, test and examples from the framework's component-showcase: redesigned component demos, marketing blocks under /blocks, template and preview galleries, distinct Timeline/Section variants, Chat Bubble receipts, a top-placement Drawer demo, and the playground code panel fix (objects in array props no longer blank out). - Standalone adaptations kept: the generator and tests read component-reference.json from the published @wrnexus/ui, and tests use the published @wrnexus/compiler and @wrnexus/syntax. - Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88, styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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.
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
.wrnsource beside every live preview - complete props, slots, and explicitly declared public events
- live
event.detailoutput for interactive components - previous and next component navigation
The specialized profiles for new and recently repaired components live in:
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:
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:
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:
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.