# Project Hints

## Project Structure
- `html/index.ts` - WccTools setup with sections for Pages and Elements
- `ts_web/elements/` - All web components (27 elements + 6 demo-view wrappers)
- `ts_web/elements/index.ts` - Barrel export for all element components
- `ts_web/pages/` - Page components

## Web Components Pattern
- Each element extends `DeesElement` from `@design.estate/dees-element`
- Uses TC39 standard decorators (`@customElement`, `@property`, `accessor` keyword)
- Each element has `public static demo` for wcctools dashboard preview
- Each element has `public static demoGroups` for sidebar categorization
- Demo views (`sz-demo-view-*`) are full-page orchestration wrappers, filtered out from the wcctools dashboard

## Demo Groups
| Group | Elements |
|-------|----------|
| Dashboard | sz-dashboard-view, sz-stat-card, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
| Dashboard Grids | sz-status-grid-cluster, sz-status-grid-services, sz-status-grid-network, sz-status-grid-infra |
| Platform | sz-platform-services-card, sz-platform-service-detail-view |
| Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view |
| Services | sz-services-list-view, sz-services-backups-view, sz-service-detail-view, sz-service-create-view |
| Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-advertisement, sz-registry-external-view |

## Build
- `pnpm run build` - tsbuild tsfolders + tsbundle element --production
- `pnpm run watch` - starts wcctools dev server