catalog/readme.hints.md

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