Project Hints
Project Structure
html/index.ts- WccTools setup with sections for Pages and Elementsts_web/elements/- All web components (27 elements + 6 demo-view wrappers)ts_web/elements/index.ts- Barrel export for all element componentsts_web/pages/- Page components
Web Components Pattern
- Each element extends
DeesElementfrom@design.estate/dees-element - Uses TC39 standard decorators (
@customElement,@property,accessorkeyword) - Each element has
public static demofor wcctools dashboard preview - Each element has
public static demoGroupsfor 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 --productionpnpm run watch- starts wcctools dev server