Auxiliary UI components (@spatial-kit/react-ui) #46

Context

@spatial-kit/react gives you the canvas (SpatialCanvas) and hooks (useSpatialCore, useSelection, useViewport, useCoreEvent). Every app still builds the same surrounding UI by hand: zoom buttons, a zoom percentage, "fit to screen", a minimap, a properties panel for the selection.

The idea is an optional package, @spatial-kit/react-ui, with small, unstyled-by-default components built only on the public hooks. That makes it a good showcase of the API and a quick start for apps. This issue is design-first: agree on scope and styling in the comments.

What changes (proposal)

A first, small set of components:

<SpatialCanvas core={core} drawEntity={drawEntity} />
<ZoomControls core={core} />
<Minimap core={core} width={200} />

Each component should be easy to restyle (className, style, or render props) and should not ship a CSS framework.

Open questions

• Styling: unstyled with minimal inline defaults, or a small optional CSS file?
• Which components go into the first version? Proposal: ZoomControls and Minimap, then the rest as follow-up issues (good entry points for contributors).
• Separate package, or a subpath export of @spatial-kit/react (@spatial-kit/react/ui)?

Affected files

Invariants to preserve

• Only public APIs from @spatial-kit/core and @spatial-kit/react, no internal imports.
• react, @spatial-kit/core and @spatial-kit/react are peer dependencies; no other runtime dependencies.
• Works with React 18 and 19, like @spatial-kit/react.

Implementation checklist

• Agree on scope and styling in this issue
• Package scaffold (build, tests, exports, LICENSE, README)
• ZoomControls with tests
• Minimap with tests
• Used in the React example
• Changeset
• Run pnpm typecheck && pnpm test && pnpm lint