Product Engineering Lab

The problem

Most component playgrounds are a drawer of unrelated widgets: each one demonstrates that something can be rendered, none of them is something you would actually install. I wanted the opposite — a small set of primitives that share a design system, a build pipeline and a standard, where the package is the deliverable and the showcase is just how you look at it.

The constraints

Four rules, set before any code and applied to every package. Headless first, so the logic lives in pure functions and hooks and the presentation is swappable. A stated performance budget, proved rather than asserted. Accessibility as a requirement, not a later pass. And a written case study for each primitive explaining the one interesting trade-off it makes.

What I built

Three primitives and the design tokens that connect them. A command palette with typed async providers, shown driving a fake issue tracker so you can see a real product respond rather than a widget in isolation. A spatial canvas engine handling pan, zoom-toward-cursor, marquee selection and culling, with a live counter showing how many of a thousand nodes are genuinely mounted. And a set of explorable data-viz primitives — an activity heatmap, a zoomable timeline, and a brushable scatter of 290 Swedish municipalities.

Every package has the same three layers: a pure core with no React, hooks that own state and input, components that render.

The result

Three primitives finished and two more designed but not built — listed as planned rather than quietly implied. 211 tests across the workspace, none of them snapshots, and every component suite runs an accessibility check over its own rendered output.