diff --git a/dashboards/ux-lab/README.md b/dashboards/ux-lab/README.md index 029b535e..88d53a87 100644 --- a/dashboards/ux-lab/README.md +++ b/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`. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/.gitignore b/dashboards/ux-lab/bolt-command-palette-kit/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/bolt-command-palette-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/bolt-command-palette-kit/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/bolt-command-palette-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/bolt-command-palette-kit/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..7b283c0f --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/bolt-command-palette-kit/INTEGRATION_NOTES.md new file mode 100644 index 00000000..2f556f1f --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md b/dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md new file mode 100644 index 00000000..b620ba12 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/README.md b/dashboards/ux-lab/bolt-command-palette-kit/README.md new file mode 100644 index 00000000..921c0f67 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/bolt-command-palette-kit/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/bolt-command-palette-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/bolt-command-palette-kit/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..9767e1f7 --- /dev/null +++ b/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)]` diff --git a/dashboards/ux-lab/lovable-notify-states-kit/.gitignore b/dashboards/ux-lab/lovable-notify-states-kit/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-notify-states-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-notify-states-kit/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-notify-states-kit/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..f15e713d --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-notify-states-kit/INTEGRATION_NOTES.md new file mode 100644 index 00000000..def7d237 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md b/dashboards/ux-lab/lovable-notify-states-kit/PROMPT.md new file mode 100644 index 00000000..8e78d687 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/README.md b/dashboards/ux-lab/lovable-notify-states-kit/README.md new file mode 100644 index 00000000..1ed9c92f --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-notify-states-kit/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-notify-states-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-notify-states-kit/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..db508f0a --- /dev/null +++ b/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)]` diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/.gitignore b/dashboards/ux-lab/lovable-settings-ux-kit/.gitignore new file mode 100644 index 00000000..3b966cbf --- /dev/null +++ b/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 diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/ACCEPTANCE_CHECKLIST.md b/dashboards/ux-lab/lovable-settings-ux-kit/ACCEPTANCE_CHECKLIST.md new file mode 100644 index 00000000..c05a2377 --- /dev/null +++ b/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`). diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/DESIGN_SYSTEM_BRIEF.md b/dashboards/ux-lab/lovable-settings-ux-kit/DESIGN_SYSTEM_BRIEF.md new file mode 100644 index 00000000..e99bc721 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/INTEGRATION_NOTES.md b/dashboards/ux-lab/lovable-settings-ux-kit/INTEGRATION_NOTES.md new file mode 100644 index 00000000..f9bf365d --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md b/dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md new file mode 100644 index 00000000..94b6bb83 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/README.md b/dashboards/ux-lab/lovable-settings-ux-kit/README.md new file mode 100644 index 00000000..23a2852f --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/REPO_SCOPING_RULES.md b/dashboards/ux-lab/lovable-settings-ux-kit/REPO_SCOPING_RULES.md new file mode 100644 index 00000000..3764afa5 --- /dev/null +++ b/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. diff --git a/dashboards/ux-lab/lovable-settings-ux-kit/UX_TOKEN_CONTRACT.md b/dashboards/ux-lab/lovable-settings-ux-kit/UX_TOKEN_CONTRACT.md new file mode 100644 index 00000000..4849f874 --- /dev/null +++ b/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`