ClintchizandClaude Opus 5
5ce2771718
The scroll lock was mine, and it broke every page carrying a Drawer or Modal. Making dialog visibility testable, I replaced a size check with a data-show check -- but a Drawer animates open, so its panel cannot be hidden with data-show at all: display:none is not transitionable. Every closed Drawer therefore looked open, took the body scroll lock and never released it, and the page could not be scrolled. Both components publish data-open, which is the signal that actually means open, and that is what is read now. Stepper gains the wizard surface: showPanel renders each step body and shows only the active one, the same contract Tabs uses, and controls adds Back, Skip and Next, which becomes Finish on the last step. nextDisabled lets a form hold the step; the component never validates anything itself, since the page owns the form. Stepper also gets a single root. The panels and controls were siblings of the list, so the component had several roots and anything scoped to data-ui-component missed most of it. Tabs panels now slide in the direction of travel rather than fading upward. 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.