feat(elements): add demoGroups metadata, filter demo view wrappers in wcctools, and update demo payloads

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-02-20 - 1.1.0 - feat(elements)
+add demoGroups metadata, filter demo view wrappers in wcctools, and update demo payloads
+
+- Add public static demoGroups to many web components to enable sidebar categorization in the wcctools dashboard (groups like Dashboard, Dashboard Grids, Network, Services, Platform, Auth & Settings).
+- Filter out demo-view wrapper components from the wcctools elements list (html/index.ts) so full-page demo orchestration wrappers are not shown as regular elements.
+- Adjust demo/example payload shapes for sz-status-grid-network and sz-status-grid-services (renamed and flattened traffic/status and resource usage properties for the demo fixtures).
+- Add readme.hints.md with project structure, web component patterns, demo groups and build/watch instructions.
+
 ## 2026-02-20 - 1.0.1 - fix(deps)
 bump dependencies and devDependencies, update watch script, add npmextra preset, and remove Playwright artifacts
 

html/index.ts

@@ -13,6 +13,7 @@ deesWccTools.setupWccTools({
       name: 'Elements',
       type: 'elements',
       items: elements,
+      filter: (name) => !name.toLowerCase().includes('demoview'),
       sort: ([a], [b]) => a.localeCompare(b),
     },
   ],

readme.hints.md

@@ -0,0 +1,28 @@
+# 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-onebox-view, sz-registry-external-view |
+
+## Build
+- `pnpm run build` - tsbuild tsfolders + tsbundle element --production
+- `pnpm run watch` - starts wcctools dev server

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '1.0.1',
+  version: '1.1.0',
   description: 'UI component catalog for serve.zone'
 }

ts_web/elements/sz-certificates-card.ts

@@ -24,6 +24,8 @@ export class SzCertificatesCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Number })
   public accessor validCount: number = 0;
 

ts_web/elements/sz-dashboard-view.ts

@@ -103,6 +103,8 @@ export class SzDashboardView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Object })
   public accessor data: IDashboardData = {
     cluster: {

ts_web/elements/sz-dns-ssl-card.ts

@@ -25,6 +25,8 @@ export class SzDnsSslCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Boolean })
   public accessor dnsConfigured: boolean = false;
 

ts_web/elements/sz-domain-detail-view.ts

@@ -78,6 +78,8 @@ export class SzDomainDetailView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Object })
   public accessor domain: IDomainDetail | null = null;
 

ts_web/elements/sz-login-view.ts

@@ -22,6 +22,8 @@ export class SzLoginView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Boolean })
   public accessor loading: boolean = false;
 

ts_web/elements/sz-network-dns-view.ts

@@ -37,6 +37,8 @@ export class SzNetworkDnsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Array })
   public accessor records: IDnsRecord[] = [];
 

ts_web/elements/sz-network-domains-view.ts

@@ -39,6 +39,8 @@ export class SzNetworkDomainsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: Array })
   public accessor domains: IDomainRecord[] = [];
 

ts_web/elements/sz-network-proxy-view.ts

@@ -58,6 +58,8 @@ export class SzNetworkProxyView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: String })
   public accessor proxyStatus: 'running' | 'stopped' = 'stopped';
 

ts_web/elements/sz-platform-service-detail-view.ts

@@ -70,6 +70,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Platform'];
+
   @property({ type: Object })
   public accessor service: IPlatformServiceDetail | null = null;
 

ts_web/elements/sz-platform-services-card.ts

@@ -36,6 +36,8 @@ export class SzPlatformServicesCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Platform'];
+
   @property({ type: Array })
   public accessor services: IPlatformService[] = [];
 

ts_web/elements/sz-quick-actions-card.ts

@@ -36,6 +36,8 @@ export class SzQuickActionsCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Array })
   public accessor actions: IQuickAction[] = [];
 

ts_web/elements/sz-registry-external-view.ts

@@ -35,6 +35,8 @@ export class SzRegistryExternalView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Array })
   public accessor registries: IExternalRegistry[] = [];
 

ts_web/elements/sz-registry-onebox-view.ts

@@ -25,6 +25,8 @@ export class SzRegistryOneboxView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: String })
   public accessor status: 'running' | 'stopped' = 'stopped';
 

ts_web/elements/sz-resource-usage-card.ts

@@ -44,6 +44,8 @@ export class SzResourceUsageCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Object })
   public accessor data: IResourceUsage = {
     cpu: 0,

ts_web/elements/sz-reverse-proxy-card.ts

@@ -28,6 +28,8 @@ export class SzReverseProxyCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Network'];
+
   @property({ type: String })
   public accessor httpPort: string = '80';
 

ts_web/elements/sz-service-create-view.ts

@@ -63,6 +63,8 @@ export class SzServiceCreateView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Array })
   public accessor registries: IRegistry[] = [];
 

ts_web/elements/sz-service-detail-view.ts

@@ -88,6 +88,8 @@ export class SzServiceDetailView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Object })
   public accessor service: IServiceDetail = {
     name: '',

ts_web/elements/sz-services-backups-view.ts

@@ -50,6 +50,8 @@ export class SzServicesBackupsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Array })
   public accessor schedules: IBackupSchedule[] = [];
 

ts_web/elements/sz-services-list-view.ts

@@ -36,6 +36,8 @@ export class SzServicesListView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Services'];
+
   @property({ type: Array })
   public accessor services: IService[] = [];
 

ts_web/elements/sz-settings-view.ts

@@ -47,6 +47,8 @@ export class SzSettingsView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Object })
   public accessor settings: ISettings = {
     darkMode: false,

ts_web/elements/sz-stat-card.ts

@@ -53,6 +53,8 @@ export class SzStatCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: String })
   public accessor label: string = '';
 

ts_web/elements/sz-status-grid-cluster.ts

@@ -38,6 +38,8 @@ export class SzStatusGridCluster extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Object })
   public accessor stats: IClusterStats = {
     totalServices: 0,

ts_web/elements/sz-status-grid-infra.ts

@@ -36,6 +36,8 @@ export class SzStatusGridInfra extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Boolean })
   public accessor dnsConfigured: boolean = false;
 

ts_web/elements/sz-status-grid-network.ts

@@ -40,16 +40,15 @@ export class SzStatusGridNetwork extends DeesElement {
     <div style="padding: 24px; max-width: 1400px;">
       <sz-status-grid-network
         .traffic=${{
-          totalRequests: 125420,
-          requestsPerMinute: 847,
-          errorRate: 0.12,
-          avgResponseTime: 45,
-          statusDistribution: {
-            '2xx': 95.2,
-            '3xx': 2.1,
-            '4xx': 2.3,
-            '5xx': 0.4,
-          },
+          requests: 125420,
+          errors: 150,
+          errorPercent: 0.12,
+          avgResponse: 45,
+          reqPerMin: 847,
+          status2xx: 95.2,
+          status3xx: 2.1,
+          status4xx: 2.3,
+          status5xx: 0.4,
         }}
         .proxy=${{
           httpPort: '80',
@@ -67,6 +66,8 @@ export class SzStatusGridNetwork extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Object })
   public accessor traffic: ITrafficData = {
     requests: 0,

ts_web/elements/sz-status-grid-services.ts

@@ -26,25 +26,29 @@ export class SzStatusGridServices extends DeesElement {
     <div style="padding: 24px; max-width: 1200px;">
       <sz-status-grid-services
         .resourceUsage=${{
-          cpu: { percentage: 45, label: 'CPU Usage' },
-          memory: { percentage: 62, label: 'Memory', used: '4.96 GB', total: '8 GB' },
-          network: { percentage: 23, label: 'Network I/O', rate: '1.2 MB/s' },
+          cpu: 45,
+          memoryUsed: '4.96 GB',
+          memoryTotal: '8 GB',
+          networkIn: '1.2 MB/s',
+          networkOut: '0.8 MB/s',
           topConsumers: [
-            { name: 'api-service', cpu: 25, memory: 512 },
-            { name: 'web-frontend', cpu: 15, memory: 256 },
-            { name: 'worker', cpu: 5, memory: 128 },
+            { name: 'api-service', memory: '512 MB' },
+            { name: 'web-frontend', memory: '256 MB' },
+            { name: 'worker', memory: '128 MB' },
           ],
         }}
         .platformServices=${[
-          { name: 'MongoDB', status: 'running' },
-          { name: 'S3 Storage', status: 'running' },
-          { name: 'ClickHouse', status: 'stopped' },
-          { name: 'Redis Cache', status: 'running' },
+          { name: 'MongoDB', status: '1 DB', running: true },
+          { name: 'S3 Storage', status: '1 bucket', running: true },
+          { name: 'ClickHouse', status: 'Stopped', running: false },
+          { name: 'Redis Cache', status: 'Running', running: true },
         ]}
       ></sz-status-grid-services>
     </div>
   `;
 
+  public static demoGroups = ['Dashboard Grids'];
+
   @property({ type: Object })
   public accessor resourceUsage: IResourceUsage = {
     cpu: 0,

ts_web/elements/sz-tokens-view.ts

@@ -40,6 +40,8 @@ export class SzTokensView extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Auth & Settings'];
+
   @property({ type: Array })
   public accessor globalTokens: IToken[] = [];
 

ts_web/elements/sz-traffic-card.ts

@@ -46,6 +46,8 @@ export class SzTrafficCard extends DeesElement {
     </div>
   `;
 
+  public static demoGroups = ['Dashboard'];
+
   @property({ type: Object })
   public accessor data: ITrafficData = {
     requests: 0,