ClintchizandClaude Opus 5
8aa28205e0
Container, Columns, Grid, Divider, Image, Link, Typography and Kbd were built from utility classes and class: conditionals. That works only where Tailwind is present, and every variant cost a dozen conditional lines -- Divider spent eleven of them saying which token to paint the rule. They now carry wire-* classes with a local style block, and variants are data attributes the style block selects on. Divider went from eleven conditionals to five rules, and Typography lost thirteen. Behaviour is preserved rather than improved on. Container keeps columns and gap even though a container is not really a grid, because applications depend on them, and its columns default stays 2: the redesign contract test caught that changing it would silently reflow every Container already published. Additive only: Grid gains minItemWidth for an auto-fit track, Divider gains dashed and dotted variants, Image gains fit, and Link gains underline. Verified in a browser rather than by eye, since the pane cannot screenshot: track counts match the declared columns at desktop and collapse correctly below each breakpoint. Co-Authored-By: Claude Opus 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.