# Nimbus implementation guide

Read DESIGN.md and use demo/index.html as the visual reference.

- The direction is tinted frosted glass: translucent surfaces, soft edge reflections, violet and aqua controls, and a softly iridescent card.
- Use the warm mineral/slate scene and full dark override. Do not revert to pale opaque blue pills.
- Reuse the shared lens material in actual interactive controls. No pointed displacement artefacts, decorative stars, or filtered text.
- Preserve the component kit above the working sample dashboard. Tint selection, layers, local search, session-only save, service/range filters and diffusion controls must work.
- Default diffusion and reset are 8 px. Keep the documented opaque fallback.
- Embed assets, prevent iframe navigation, respect reduced motion and retain visible keyboard focus and accessible state labels.
- Verify 360 px, tablet and desktop layouts in light and dark modes; keep the two kit columns usable on mobile.

## shadcn coverage

Use the full integration matrix and copyable stylesheet in DESIGN.md (also available as shadcn.css). Apply it to shared components and set data-design="nimbus" on html so portals inherit it. Keep provider behaviour intact, forward data-slot/data-variant, handle Sonner and DayPicker via their class-name APIs, and test all interactive states. Do not claim complete React integration from the HTML preview alone.

- Glass lenses must remain transparent: violet 22%, aqua 18%, 2 px blur, broad subdued highlights. No straight white lower stripe. Match the clear-glass correction in shadcn.css; dark text in light mode, pale text in dark mode.