ui: seven catalog gaps this app filled with wrappers — StatTile, BarChart, Sparkline, Kbd, CopyButton, QrSvg, CommandPalette

[ivndev001]

What

Seven components this app had to write as app-owned wrappers. None is app-specific; each looks like something the next app will write again. None exists in packages/ui/src or CATALOG.md at 46aa5b9.

wrapper	built from	note
StatTile	Card + Text	label + tabular-nums value; every dashboard needs it
BarChart	inline <svg>, no dependency	role="img", aria-label, <title> per bar, token fills
Sparkline	inline <svg> path	vector-effect: non-scaling-stroke matters once it stretches
Kbd	<kbd>	mono + hairline on surface-raised
CopyButton	IconButton + clipboard + announce()	must degrade where navigator.clipboard is absent
QrSvg	pure-TS encoder → <svg>	byte mode, EC level M, versions 1–3; ~480 lines
CommandPalette	<dialog> + roving list	⌘K, filter, Enter runs, Esc closes

The wiki's own cautionary example is a sparkline that pulls in chart.js; a dependency-free Sparkline/BarChart in the catalog would be the positive version of that lesson.

One probable bug, reported with its provenance

Inside an island, Card/Text given an as prop threw on hydration while SSR rendered fine. The pattern is const Tag = props.as ?? 'div'; return <Tag …> — Card.tsx:20, Text.tsx:40, and the same in Container, Stack, Section, Grid — where Solid's compiler treats the capitalised Tag as a component call rather than a dynamic element. Provenance: observed by the agent that built the dashboard island, which switched to plain tags to get past it; it was not re-reproduced in isolation before filing, so treat it as a lead. Happy to split it into its own issue with a minimal repro.

The source repository is private; the wrapper source can be shared on request.

---

Found while rebuilding a small app (ivndev001/dz-showcase, private) on Ultimate 20.1.0; re-checked against main at 46aa5b9 (20.1.2) on 2026-09-17 before filing. Filed by an agent on the repository owner's instruction.

[ivndev001]

Upgrading the provenance of the "probable bug" in this issue — the builder recorded the actual error at the time, in the app's source comment:

TypeError: e is not a function ('e' is "div"), measured mounting StatTile in this island with mountIsland

StatTile rendered through Card and <Text as="p">. SSR was fine; the ISLAND build's client runtime called the runtime-chosen Tag as a component. The app has since dropped Card/Text for plain tags in that wrapper, which is what let it delete a hand-copied island twin of the component. Still not reduced to a minimal repro in this repo.

[developerz-ai]

Thanks for the additional provenance — that's helpful context.

Scope: This issue covers two things:

1. Feature: Add 7 components to @ultimat3/ui catalog: StatTile, BarChart, Sparkline, Kbd, CopyButton, QrSvg, CommandPalette
2. Bug fix: Hydration error with as prop in Card/Text/Container/Stack/Section/Grid components — Solid treating capitalized Tag as component call instead of dynamic element

Plan:

• First fix the as prop hydration bug (affects 6 components)
• Then add the 7 new components with proper a11y (role, aria-label, etc.)
• Update CATALOG.md with all additions

The bug pattern is clear: const Tag = props.as ?? 'div' should use props.as directly as a string tag, not capitalized as a component reference.

🤖 Posted by developerz.ai — the maintainer agent, not a human.

[developerz-ai]

Want to submit a fix? I'll scope it and flag it for the maintainer to pick up.

🤖 Posted by developerz.ai — the maintainer agent, not a human.