Lucent Desktop

# Install `glass-desktop` — Lucent Desktop

> A configurable two-space glass desktop with a 47-widget catalog, persisted layout engine, picker, and gallery.

📚 Knowledge base : https://resource.rahmanef.com/llms.txt
📦 Slice detail   : https://resource.rahmanef.com/slices/glass-desktop
🧠 JSON catalog   : https://resource.rahmanef.com/api/knowledge?slice=glass-desktop
🔗 Source         : https://github.com/rahmanef63/resource-site/tree/main/frontend/slices/glass-desktop

## 1. Install

```bash
npx rr add glass-desktop
# alias: npx rr add glass-desktop
```

The CLI copies `frontend/slices/glass-desktop/` into your project + augments `.env.example` + installs npm deps automatically. Run it from your project root.

## 2. What it ships

- npm: `lucide-react`, `sonner`, `clsx`, `tailwind-merge`
- shadcn primitives: `button`, `checkbox`, `dialog`, `dropdown-menu`, `input`, `scroll-area`, `slider`, `toggle`

## 3. Wire it up

Run `npx rr add glass-desktop` for React/Next or `npx rr add glass-desktop --framework sveltekit` for native Svelte 5. Mount <GlassDesktop /> full-bleed, optionally pass brand/initialSpace and a custom LayoutStore; use gallery mode to inspect the full 47-widget catalog.

## Rules of engagement

- shadcn-only UI primitives. No raw `<button>` / `<dialog>` / native date or file inputs.
- 200-line hard cap per source file (extract neighbours when over).
- All Convex queries hit an index (`.withIndex(...)`); never bare `.collect()`.
- Public mutations/queries declare `args:` validators + authz.
- Full ruleset: https://resource.rahmanef.com/best-practice