# Lovable App 1 — Ops UI Kit (Design-led Micro-App)

Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.

## Goal

Create a visually polished **Ops Dashboard UI Kit** micro-app that feels like a premium admin console. This app is design-led: prioritize typography, spacing, states, and interaction polish.

## Scope constraints

- Only modify files in this repository.
- No backend calls; mock data + localStorage only
- No `console.log`
- No hardcoded colors (use CSS variables)

## Must-have pages

- `/` overview landing
- `/components` gallery of:
  - buttons, inputs, selects
  - badges, tabs
  - dialogs/drawers
  - toasts
  - empty/loading/error states
- `/table` table demo with filters

## UX requirements

- Theme toggle (light/dark)
- Keyboard accessibility:
  - Esc closes overlays
  - focus returns to triggering element
- Micro-interactions:
  - hover, press, focus rings
  - subtle animation for drawer/dialog

## Table requirements

- Mock dataset: incidents
- Sort + filter + pagination
- Row actions menu
- Details drawer with tabs

## Deliverables

- Next.js 16 App Router app
- Tailwind v4
- TypeScript strict
- Scripts: `dev`, `check`, `build` (build uses `next build --webpack`)

## Success criteria

- Looks and feels premium
- Fully self-contained
- Ready to copy components into other dashboards