# Project Hints

## Project Overview
**@uptime.link/statuspage** - A comprehensive web components catalog for building status pages for UptimeLink.

## Architecture
- **Package Type**: Web Component Catalog (wcc)
- **Module Type**: ESM
- **License**: MIT
- **Registry**: Public on npm and verdaccio.lossless.digital

## Technology Stack
- **Framework**: @design.estate/dees-element (Lit-based web components)
- **Build Tools**: tsbuild, tsbundle, tswatch
- **TypeScript**: ES2022 target with NodeNext module resolution

## Component Library
9 components total:
1. `upl-statuspage-header` - Page header with branding and action buttons
2. `upl-statuspage-pagetitle` - Hero section with title/subtitle
3. `upl-statuspage-statusbar` - Overall system status indicator
4. `upl-statuspage-statsgrid` - Key metrics grid (uptime, response time, incidents)
5. `upl-statuspage-assetsselector` - Service selection with filtering
6. `upl-statuspage-statusdetails` - 48-hour status timeline
7. `upl-statuspage-statusmonth` - Monthly calendar uptime view
8. `upl-statuspage-incidents` - Current and past incidents feed
9. `upl-statuspage-footer` - Full-featured footer with social/subscription

## Build Output
- Source: `ts_web/`
- Compiled: `dist_ts_web/`
- Bundle: `dist_bundle/`
- Development: `dist_watch/`

## Commands
- `pnpm build` - Compile TypeScript and create bundle
- `pnpm watch` - Development server with hot reload
- `pnpm test` - Runs build (no actual tests)

## Demo System
- Uses `dees-demowrapper` from `@design.estate/dees-wcctools/demotools`
- Each component has a `.demo.ts` file with runAfterRender callbacks
- Pre-built page templates in `ts_web/pages/`

## Important Notes
- Import `@design.estate/dees-wcctools/demotools` in html/index.ts for demos to work
- All components support light/dark theme via cssManager.bdTheme()
- Components are designed to work standalone or composed together