chore(ux-lab): add notify/states, settings, and command palette kits

dashboards/ux-lab/README.md

@@ -15,19 +15,26 @@ This folder is intentionally **greenfield** and exists to let external UI/UX gen
 
 ## Micro-apps
 
-This folder contains **6 separate micro-app projects**:
+This folder contains multiple micro-app projects:
 
-### Bolt apps (3)
+### Bolt apps
 
 - `bolt-ops-ui-kit/` — reusable ops dashboard patterns (tables, filters, states, drawers)
 - `bolt-timeline-studio/` — timeline/scheduler builder UI patterns
 - `bolt-telemetry-explorer/` — local-only telemetry explorer UI patterns
 
-### Lovable apps (3)
+### Lovable apps
+
+This folder contains multiple Lovable-led micro-app projects:
 
-- `lovable-ops-ui-kit/` — ops dashboard UI kit (Lovable-led design)
 - `lovable-design-tokens-playground/` — design tokens playground + component previews
 - `lovable-onboarding-flow/` — onboarding + settings wizard UI patterns
+- `lovable-notify-states-kit/` — notifications (toasts/banners) + loading/empty/error states kit
+- `lovable-settings-ux-kit/` — settings page UX kit (layout, autosave, danger zone)
+
+This folder also contains additional Bolt-led micro-app projects:
+
+- `bolt-command-palette-kit/` — command palette + keyboard shortcuts kit
 
 Each micro-app folder contains a single `PROMPT.md`.
 

dashboards/ux-lab/bolt-command-palette-kit/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/bolt-command-palette-kit/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/bolt-command-palette-kit/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,26 @@
+# Design System Brief (Must Follow)
+
+This repo is a **command palette + keyboard shortcuts kit** intended for production reuse.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No network calls.
+- No hardcoded colors (no hex/rgb/hsl). Use CSS variables only.
+
+## Token usage
+
+- Use `UX_TOKEN_CONTRACT.md`.
+- Style via CSS variables (`--ux-*`) and Tailwind utilities.
+
+## Component architecture
+
+- Reusable components in `src/components/**`.
+- Pages in `src/app/**` compose components.
+- Components must NOT import from `src/app/**`.
+
+## Accessibility
+
+- Focus trap for dialogs/palette.
+- `Esc` closes.
+- Keyboard-first UX.

dashboards/ux-lab/bolt-command-palette-kit/INTEGRATION_NOTES.md

@@ -0,0 +1,13 @@
+# Integration Notes
+
+This repo provides reusable primitives for:
+
+- Command palette (`Cmd+K`)
+- Keyboard shortcut registry
+- Action search + grouping
+- Recent actions
+
+Integration pattern:
+
+- Copy `src/components/**` + any `src/lib/**` helpers into target app.
+- Map `--ux-*` tokens to target app tokens.

dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md

@@ -0,0 +1,92 @@
+# Bolt — Command Palette + Keyboard Shortcuts Kit (Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`.
+
+## Mission
+
+Build a production-grade **command palette + keyboard shortcuts kit** micro-app (Next.js App Router) that we can copy into:
+
+- `dashboards/admin-web`
+- `dashboards/tracker-web`
+- product web apps
+
+This is implementation-heavy: correctness, a11y, and clean component boundaries matter.
+
+## Constraints
+
+- Only modify files in this repository.
+- pnpm only.
+- Next.js 16 App Router, React 19, TypeScript strict.
+- TailwindCSS v4.
+- No network calls.
+- No `console.log`.
+- No hardcoded colors — use `--ux-*` CSS variables from `UX_TOKEN_CONTRACT.md`.
+- Avoid unnecessary dependencies. If you add a dependency, justify why it is required.
+
+## Must-have routes
+
+- `/` overview landing
+- `/palette` command palette demo
+- `/shortcuts` shortcuts reference + editor demo
+- `/integration` copy/paste integration guide page (UI-only)
+
+## Core deliverable: Command palette
+
+Build `CommandPalette` with:
+
+- Open via `Cmd+K` (and `Ctrl+K` fallback)
+- Search box
+- Grouped actions (e.g., Navigation, Actions, Settings)
+- Optional action keywords (alias terms)
+- Recent actions (persist to localStorage)
+- Favorites/pinned actions (localStorage)
+- Keyboard navigation:
+  - Up/Down
+  - Enter to execute
+  - Esc to close
+- Mouse support
+
+Accessibility requirements:
+
+- Proper dialog semantics
+- Focus trap while open
+- Focus returns to opener on close
+- ARIA labels for listbox/options
+
+## Shortcuts registry
+
+Create a small shortcuts registry system:
+
+- `registerShortcut({ id, keys, description, scope })`
+- Scopes: global vs page-specific (simple; no complex routing coupling)
+- A `/shortcuts` page that lists all registered shortcuts
+- A UI to remap a shortcut (client-side only) and persist to localStorage
+- Collision detection (warn if two actions use the same key combo)
+
+## Demo content
+
+Include 20–30 demo actions:
+
+- Navigation actions to pages
+- Theme toggle
+- “Copy JSON” demo action
+- “Clear local data” demo action with confirm dialog
+
+## Deliverables
+
+- Full Next.js app with scripts:
+  - `dev`
+  - `check` (must run `tsc --noEmit` + `eslint`)
+  - `build` (must run `next build --webpack`)
+
+## Verification
+
+From repo root:
+
+- `pnpm install`
+- `pnpm run check`
+- `pnpm run build`
+
+## Output expectation
+
+Open a PR that only changes files in this repo.

dashboards/ux-lab/bolt-command-palette-kit/README.md

@@ -0,0 +1,21 @@
+# Bolt — Command Palette + Keyboard Shortcuts Kit
+
+This folder is designed to be used as a standalone repo.
+
+## What it is
+
+A token-driven UI kit for:
+
+- Command palette (Cmd+K)
+- Keyboard shortcut registry
+- Action search + grouping
+- Recent/favorites actions
+
+## How to use
+
+- Read `PROMPT.md` for the build assignment.
+- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly.
+
+## Reuse goal
+
+Components should be copy/paste reusable into other dashboards/apps.

dashboards/ux-lab/bolt-command-palette-kit/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/bolt-command-palette-kit/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,23 @@
+# UX Token Contract (Shared)
+
+Define these CSS variables in `src/app/globals.css` under `:root` and optionally provide a `.dark` override.
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+- `--ux-text`
+- `--ux-text-muted`
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+- `--ux-ring`
+- `--ux-shadow`
+
+Usage examples:
+
+- `bg-[var(--ux-surface)]`
+- `text-[var(--ux-text)]`
+- `border-[var(--ux-border)]`

dashboards/ux-lab/lovable-notify-states-kit/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/lovable-notify-states-kit/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,26 @@
+# Design System Brief (Must Follow)
+
+This repo is a **notifications + UI states kit** meant to be copied into real dashboards/apps.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No network calls.
+- No hardcoded colors (no hex/rgb/hsl). Use CSS variables only.
+
+## Token usage
+
+- Use `UX_TOKEN_CONTRACT.md`.
+- Style with `bg-[var(--ux-*)]`, `text-[var(--ux-*)]`, `border-[var(--ux-*)]`.
+
+## Component architecture
+
+- Reusable components in `src/components/**`.
+- Pages in `src/app/**` compose components.
+- Components must NOT import from `src/app/**`.
+
+## Accessibility
+
+- Toasts must use an ARIA live region.
+- `Esc` closes dialogs/drawers.
+- Focus returns to trigger when overlays close.

dashboards/ux-lab/lovable-notify-states-kit/INTEGRATION_NOTES.md

@@ -0,0 +1,19 @@
+# Integration Notes
+
+This repo provides reusable primitives for notifications and common UI states.
+
+## Expected reusable components
+
+- `ToastProvider` / `useToast()`
+- `ToastViewport` / `ToastItem`
+- `Banner`
+- `EmptyState`
+- `Skeleton` primitives
+- `ConfirmDialog`
+- `FormField` helpers (error, helper text)
+
+## Integration pattern
+
+- Copy `src/components/**` into target app.
+- Map `--ux-*` tokens to the target app’s token system.
+- Keep logic UI-only and framework-agnostic within React.

dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md

@@ -0,0 +1,120 @@
+# Lovable — Notifications + UI States Kit (Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`.
+
+## Goal
+
+Build a **UI/UX-rich** Next.js micro-app that serves as a reusable **Notifications + UI States Kit** we can copy into:
+
+- `dashboards/admin-web`
+- `dashboards/tracker-web`
+- product web dashboards
+
+This is design-led: prioritize interaction polish, spacing, typography, and accessibility.
+
+## Constraints
+
+- Only modify files in this repository.
+- pnpm only.
+- Next.js 16 App Router, React 19, TypeScript strict.
+- TailwindCSS v4.
+- No network calls.
+- No `console.log`.
+- No hardcoded colors — use `--ux-*` CSS variables from `UX_TOKEN_CONTRACT.md`.
+- Avoid unnecessary dependencies. If you add a dependency, justify why it is required.
+
+## Must-have routes
+
+- `/` overview landing + links
+- `/toasts` toast system demos
+- `/banners` inline banner demos
+- `/states` loading / empty / error patterns
+- `/dialogs` confirm dialog patterns
+- `/forms` validation + helper text patterns
+
+## App shell
+
+- Left sidebar navigation
+- Top bar with:
+  - theme toggle (light/dark)
+  - “Shortcuts” button
+
+## Toast system (core deliverable)
+
+Build a toast system that supports:
+
+- Variants: info, success, warning, error
+- Title + optional description
+- Optional action button (e.g. Undo)
+- Optional progress countdown bar
+- Stacking / queue behavior (max visible, overflow count)
+- Dismiss: close button, swipe (optional), timeout
+- Position selector demo: top-right (default), bottom-right, bottom-center
+
+Accessibility requirements:
+
+- ARIA live region (`polite` for info/success, `assertive` for error)
+- Focus behavior: toasts should not steal focus by default
+
+## Banners
+
+Create inline banners for page-level messaging:
+
+- Variants: info/success/warn/error
+- Optional “Retry” action
+- Dismissible
+
+## States gallery
+
+Create reusable components:
+
+- `Skeleton` primitives (text line, avatar, card)
+- `EmptyState` with icon + title + description + CTA
+- `ErrorState` with retry + “copy details” action (copies JSON)
+
+Provide demos:
+
+- Table loading skeleton
+- Card grid loading skeleton
+- Detail drawer loading skeleton
+
+## Dialogs
+
+- Confirm dialog (destructive)
+- Confirm dialog (non-destructive)
+- Modal focus trap + Esc close
+
+## Forms
+
+Create a small form with:
+
+- Required fields + inline errors
+- Disabled state
+- Helper text
+- Success state
+
+## Visual / UX bar
+
+- Premium spacing/typography
+- Subtle animations (not flashy)
+- Excellent focus rings (token-driven)
+- Mobile responsive
+
+## Deliverables
+
+- Full Next.js app with scripts:
+  - `dev`
+  - `check` (must run `tsc --noEmit` + `eslint`)
+  - `build` (must run `next build --webpack`)
+
+## Verification
+
+From repo root:
+
+- `pnpm install`
+- `pnpm run check`
+- `pnpm run build`
+
+## Output expectation
+
+Open a PR that only changes files in this repo.

dashboards/ux-lab/lovable-notify-states-kit/README.md

@@ -0,0 +1,22 @@
+# Lovable — Notifications + UI States Kit
+
+This folder is designed to be used as a standalone repo.
+
+## What it is
+
+A token-driven UI kit for:
+
+- Toasts
+- Inline banners
+- Loading/empty/error states
+- Confirm dialogs
+- Form validation states
+
+## How to use
+
+- Read `PROMPT.md` for the build assignment.
+- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly.
+
+## Reuse goal
+
+Components should be copy/paste reusable into other dashboards/apps.

dashboards/ux-lab/lovable-notify-states-kit/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/lovable-notify-states-kit/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,35 @@
+# UX Token Contract (Shared)
+
+This repo must use the following CSS custom properties (tokens). Define them in `src/app/globals.css` under `:root` and optionally provide a `.dark` override.
+
+## Core surfaces
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+
+## Text
+
+- `--ux-text`
+- `--ux-text-muted`
+
+## Brand / states
+
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+
+## Focus + shadows
+
+- `--ux-ring`
+- `--ux-shadow`
+
+## Usage examples
+
+- Background: `bg-[var(--ux-bg)]`
+- Card: `bg-[var(--ux-surface)] border border-[var(--ux-border)]`
+- Primary button: `bg-[var(--ux-accent)] text-[var(--ux-accent-foreground)]`
+- Muted text: `text-[var(--ux-text-muted)]`

dashboards/ux-lab/lovable-settings-ux-kit/.gitignore

@@ -0,0 +1,27 @@
+.next
+out
+node_modules
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env
+.env
+.env.*
+
+# vercel
+.vercel
+
+# misc
+.DS_Store
+*.tsbuildinfo
+
+# test output
+playwright-report
+coverage
+
+# local
+*.local

dashboards/ux-lab/lovable-settings-ux-kit/ACCEPTANCE_CHECKLIST.md

@@ -0,0 +1,11 @@
+# Acceptance Checklist
+
+- Before push: `git status` is clean except for the intended app source changes.
+- Before push: review `git diff` and confirm no unrelated formatting/refactors.
+- No `console.log`.
+- No hardcoded colors.
+- No network calls.
+- Forbidden files are NOT committed: `.env*`, `.next/`, `node_modules/`, `.vercel/`.
+- Components in `src/components/**`; no imports from `src/app/**`.
+- `pnpm run check` passes.
+- `pnpm run build` passes (`next build --webpack`).

dashboards/ux-lab/lovable-settings-ux-kit/DESIGN_SYSTEM_BRIEF.md

@@ -0,0 +1,25 @@
+# Design System Brief (Must Follow)
+
+This repo is a **settings UX kit** intended for production reuse.
+
+## Non-negotiable rules
+
+- No `console.log`.
+- No network calls.
+- No hardcoded colors (no hex/rgb/hsl). Use CSS variables only.
+
+## Token usage
+
+- Use `UX_TOKEN_CONTRACT.md`.
+
+## Component architecture
+
+- Reusable components in `src/components/**`.
+- Pages in `src/app/**` compose components.
+- Components must NOT import from `src/app/**`.
+
+## Accessibility
+
+- Keyboard accessible.
+- Proper labels/aria for form inputs.
+- `Esc` closes dialogs.

dashboards/ux-lab/lovable-settings-ux-kit/INTEGRATION_NOTES.md

@@ -0,0 +1,15 @@
+# Integration Notes
+
+This repo provides reusable patterns for settings pages.
+
+Expected reusable components:
+
+- `SettingsLayout` (sidebar + content)
+- `SettingsSection`
+- `ToggleRow`
+- `SelectRow`
+- `DangerZone`
+- `InlineSaveStatus` (saved/saving/error)
+- `SettingsSearch`
+
+All styling must use `--ux-*` tokens.

dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md

@@ -0,0 +1,94 @@
+# Lovable — Settings Page UX Kit (Micro-App)
+
+Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`.
+
+## Goal
+
+Build a **UI/UX-rich settings dashboard** micro-app demonstrating premium settings patterns that we can reuse across dashboards and product web apps.
+
+This is design-led: prioritize spacing, typography, states, and interaction polish.
+
+## Constraints
+
+- Only modify files in this repository.
+- pnpm only.
+- Next.js 16 App Router, React 19, TypeScript strict.
+- TailwindCSS v4.
+- No network calls.
+- No `console.log`.
+- No hardcoded colors — use `--ux-*` CSS variables from `UX_TOKEN_CONTRACT.md`.
+- Avoid unnecessary dependencies. If you add a dependency, justify why it is required.
+
+## Must-have routes
+
+- `/` overview landing
+- `/settings` main settings dashboard
+- `/settings/account` account settings section
+- `/settings/notifications` notifications settings section
+- `/settings/privacy` privacy settings section
+- `/settings/appearance` appearance settings section
+
+## App shell / IA
+
+- Left settings nav (section list)
+- Main content area
+- Sticky top header with:
+  - search settings (filters visible settings rows)
+  - “Reset changes” (revert local edits)
+  - save status indicator (Saved / Saving / Error)
+
+## Core UX requirements
+
+### Settings layout patterns
+
+- Section headers with description
+- Rows with:
+  - label
+  - description
+  - control (toggle/select/input)
+  - optional inline error
+
+### Autosave behavior (local-only)
+
+- Changes persist to localStorage
+- Simulate async save:
+  - show “Saving…” for 400–800ms
+  - then “Saved”
+  - provide a demo toggle to simulate “Save failed” state
+
+### Danger zone
+
+- “Delete local profile” action
+- confirm dialog (destructive)
+- requires typing a confirmation word (e.g. DELETE)
+
+### Accessibility
+
+- Full keyboard navigation
+- Correct labels for inputs
+- Focus rings are token-driven
+
+## Visual / UX bar
+
+- Premium spacing/typography
+- Subtle animations
+- Mobile responsive (nav collapses to drawer on small screens)
+
+## Deliverables
+
+- Full Next.js app with scripts:
+  - `dev`
+  - `check` (must run `tsc --noEmit` + `eslint`)
+  - `build` (must run `next build --webpack`)
+
+## Verification
+
+From repo root:
+
+- `pnpm install`
+- `pnpm run check`
+- `pnpm run build`
+
+## Output expectation
+
+Open a PR that only changes files in this repo.

dashboards/ux-lab/lovable-settings-ux-kit/README.md

@@ -0,0 +1,21 @@
+# Lovable — Settings Page UX Kit
+
+This folder is designed to be used as a standalone repo.
+
+## What it is
+
+A token-driven settings UI kit for:
+
+- Settings layout + sectioning
+- Autosave status patterns
+- Search/filter settings
+- Danger zone patterns
+
+## How to use
+
+- Read `PROMPT.md` for the build assignment.
+- Follow `DESIGN_SYSTEM_BRIEF.md` and `UX_TOKEN_CONTRACT.md` strictly.
+
+## Reuse goal
+
+Components should be copy/paste reusable into other dashboards/apps.

dashboards/ux-lab/lovable-settings-ux-kit/REPO_SCOPING_RULES.md

@@ -0,0 +1,4 @@
+# Repo Scoping Rules
+
+- Only modify files inside this repository.
+- If you believe a change is needed outside this repo, stop and ask.

dashboards/ux-lab/lovable-settings-ux-kit/UX_TOKEN_CONTRACT.md

@@ -0,0 +1,17 @@
+# UX Token Contract (Shared)
+
+Define these CSS variables in `src/app/globals.css` under `:root` and optionally provide a `.dark` override.
+
+- `--ux-bg`
+- `--ux-surface`
+- `--ux-surface-2`
+- `--ux-border`
+- `--ux-text`
+- `--ux-text-muted`
+- `--ux-accent`
+- `--ux-accent-foreground`
+- `--ux-danger`
+- `--ux-warning`
+- `--ux-success`
+- `--ux-ring`
+- `--ux-shadow`