@serve.zone/catalog 2.12.4 → 2.12.5

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@serve.zone/catalog',
-    version: '2.12.4',
+    version: '2.12.5',
     description: 'UI component catalog for serve.zone'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUscUJBQXFCO0lBQzNCLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxxQ0FBcUM7Q0FDbkQsQ0FBQSJ9

package/dist_ts_web/elements/sz-status-grid-services.js

@@ -126,7 +126,7 @@ let SzStatusGridServices = (() => {
             return html `
       <div class="grid">
         <sz-resource-usage-card
-          .usage=${this.resourceUsage}
+          .data=${this.resourceUsage}
         ></sz-resource-usage-card>
         <sz-platform-services-card
           .services=${this.platformServices}
@@ -145,4 +145,4 @@ let SzStatusGridServices = (() => {
     return SzStatusGridServices = _classThis;
 })();
 export { SzStatusGridServices };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3otc3RhdHVzLWdyaWQtc2VydmljZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc3otc3RhdHVzLWdyaWQtc2VydmljZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsYUFBYSxFQUNiLElBQUksRUFDSixHQUFHLEVBQ0gsVUFBVSxFQUNWLFFBQVEsR0FFVCxNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxnQ0FBZ0MsQ0FBQztJQVkzQixvQkFBb0I7NEJBRGhDLGFBQWEsQ0FBQyx5QkFBeUIsQ0FBQzs7OztzQkFDQyxXQUFXOzs7Ozs7O29DQUFuQixTQUFRLFdBQVc7Ozs7eUNBNEJsRCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7NENBVTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQztZQVQxQiw0TEFBZ0IsYUFBYSw2QkFBYixhQUFhLHFHQU8zQjtZQUdGLHFNQUFnQixnQkFBZ0IsNkJBQWhCLGdCQUFnQiwyR0FBMEI7WUF2QzVELDZLQStFQzs7OztRQTlFUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O3lCQUdSO1lBQ2YsR0FBRyxFQUFFLEVBQUU7WUFDUCxVQUFVLEVBQUUsU0FBUztZQUNyQixXQUFXLEVBQUUsTUFBTTtZQUNuQixTQUFTLEVBQUUsVUFBVTtZQUNyQixVQUFVLEVBQUUsVUFBVTtZQUN0QixZQUFZLEVBQUU7Z0JBQ1osRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUU7Z0JBQ3pDLEVBQUUsSUFBSSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFO2dCQUMxQyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRTthQUNyQztTQUNGOzRCQUNtQjtZQUNsQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFO1lBQ2xELEVBQUUsSUFBSSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUU7WUFDekQsRUFBRSxJQUFJLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRTtZQUN6RCxFQUFFLElBQUksRUFBRSxhQUFhLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFO1NBQzFEOzs7R0FHTixDQUFDO1FBRUssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFHL0MsdUZBQWdEO1lBQzlDLEdBQUcsRUFBRSxDQUFDO1lBQ04sVUFBVSxFQUFFLE1BQU07WUFDbEIsV0FBVyxFQUFFLE1BQU07WUFDbkIsU0FBUyxFQUFFLFFBQVE7WUFDbkIsVUFBVSxFQUFFLFFBQVE7WUFDcEIsWUFBWSxFQUFFLEVBQUU7U0FDakIsRUFBQztRQVBGLElBQWdCLGFBQWEsbURBTzNCO1FBUEYsSUFBZ0IsYUFBYSx5REFPM0I7UUFHRix5SkFBdUQsRUFBRSxHQUFDO1FBQTFELElBQWdCLGdCQUFnQixzREFBMEI7UUFBMUQsSUFBZ0IsZ0JBQWdCLDREQUEwQjtRQUVuRCxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLFVBQVUsQ0FBQyxhQUFhO1lBQ3hCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBcUJGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTs7O21CQUdJLElBQUksQ0FBQyxhQUFhOzs7c0JBR2YsSUFBSSxDQUFDLGdCQUFnQjs7O0tBR3RDLENBQUM7UUFDSixDQUFDOzs7Ozs7WUE5RVUsdURBQW9COzs7OztTQUFwQixvQkFBb0IifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3otc3RhdHVzLWdyaWQtc2VydmljZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc3otc3RhdHVzLWdyaWQtc2VydmljZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsYUFBYSxFQUNiLElBQUksRUFDSixHQUFHLEVBQ0gsVUFBVSxFQUNWLFFBQVEsR0FFVCxNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxnQ0FBZ0MsQ0FBQztJQVkzQixvQkFBb0I7NEJBRGhDLGFBQWEsQ0FBQyx5QkFBeUIsQ0FBQzs7OztzQkFDQyxXQUFXOzs7Ozs7O29DQUFuQixTQUFRLFdBQVc7Ozs7eUNBNEJsRCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7NENBVTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQztZQVQxQiw0TEFBZ0IsYUFBYSw2QkFBYixhQUFhLHFHQU8zQjtZQUdGLHFNQUFnQixnQkFBZ0IsNkJBQWhCLGdCQUFnQiwyR0FBMEI7WUF2QzVELDZLQStFQzs7OztRQTlFUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O3lCQUdSO1lBQ2YsR0FBRyxFQUFFLEVBQUU7WUFDUCxVQUFVLEVBQUUsU0FBUztZQUNyQixXQUFXLEVBQUUsTUFBTTtZQUNuQixTQUFTLEVBQUUsVUFBVTtZQUNyQixVQUFVLEVBQUUsVUFBVTtZQUN0QixZQUFZLEVBQUU7Z0JBQ1osRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUU7Z0JBQ3pDLEVBQUUsSUFBSSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFO2dCQUMxQyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRTthQUNyQztTQUNGOzRCQUNtQjtZQUNsQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFO1lBQ2xELEVBQUUsSUFBSSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUU7WUFDekQsRUFBRSxJQUFJLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRTtZQUN6RCxFQUFFLElBQUksRUFBRSxhQUFhLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFO1NBQzFEOzs7R0FHTixDQUFDO1FBRUssTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFHL0MsdUZBQWdEO1lBQzlDLEdBQUcsRUFBRSxDQUFDO1lBQ04sVUFBVSxFQUFFLE1BQU07WUFDbEIsV0FBVyxFQUFFLE1BQU07WUFDbkIsU0FBUyxFQUFFLFFBQVE7WUFDbkIsVUFBVSxFQUFFLFFBQVE7WUFDcEIsWUFBWSxFQUFFLEVBQUU7U0FDakIsRUFBQztRQVBGLElBQWdCLGFBQWEsbURBTzNCO1FBUEYsSUFBZ0IsYUFBYSx5REFPM0I7UUFHRix5SkFBdUQsRUFBRSxHQUFDO1FBQTFELElBQWdCLGdCQUFnQixzREFBMEI7UUFBMUQsSUFBZ0IsZ0JBQWdCLDREQUEwQjtRQUVuRCxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLFVBQVUsQ0FBQyxhQUFhO1lBQ3hCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBcUJGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTs7O2tCQUdHLElBQUksQ0FBQyxhQUFhOzs7c0JBR2QsSUFBSSxDQUFDLGdCQUFnQjs7O0tBR3RDLENBQUM7UUFDSixDQUFDOzs7Ozs7WUE5RVUsdURBQW9COzs7OztTQUFwQixvQkFBb0IifQ==

package/package.json

@@ -1,32 +1,27 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "2.12.4",
+  "version": "2.12.5",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "type": "module",
-  "scripts": {
-    "test": "tstest test/",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
-    "watch": "tswatch"
-  },
-  "author": "Lossless GmbH",
+  "author": "Task Venture Capital GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-catalog": "^3.70.0",
-    "@design.estate/dees-domtools": "^2.5.4",
+    "@design.estate/dees-catalog": "^3.81.0",
+    "@design.estate/dees-domtools": "^2.5.6",
     "@design.estate/dees-element": "^2.2.4",
-    "@design.estate/dees-wcctools": "^3.8.0"
+    "@design.estate/dees-wcctools": "^3.9.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.4.0",
-    "@git.zone/tsbundle": "^2.10.0",
-    "@git.zone/tsrun": "^2.0.2",
-    "@git.zone/tstest": "^3.6.3",
-    "@git.zone/tswatch": "^3.3.2",
+    "@git.zone/tsbuild": "^4.4.2",
+    "@git.zone/tsbundle": "^2.10.4",
+    "@git.zone/tsrun": "^2.0.4",
+    "@git.zone/tstest": "^3.6.6",
+    "@git.zone/tswatch": "^3.3.5",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^25.5.2"
+    "@types/node": "^25.6.2"
   },
   "files": [
     "ts_web/**/*",
@@ -40,5 +35,10 @@
   ],
   "browserslist": [
     "last 1 Chrome versions"
-  ]
-}
+  ],
+  "scripts": {
+    "test": "tstest test/",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
+    "watch": "tswatch"
+  }
+}

package/readme.md

@@ -1,255 +1,155 @@
 # @serve.zone/catalog
 
-The complete UI component library for **serve.zone** — a full-featured admin and management interface for onebox server management, built as a collection of reusable web components.
-
-## Install
-
-```bash
-pnpm install @serve.zone/catalog
-```
+`@serve.zone/catalog` is the shared web-component catalog for serve.zone dashboards. It packages the UI building blocks used by Onebox, DcRouter-style operations views, and other serve.zone admin surfaces: dashboards, service views, app-store screens, DNS and routing tools, registry panels, email views, settings, tokens, and demo shells.
 
 ## Issue Reporting and Security
 
 For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
 
-## 🚀 What It Does
-
-`@serve.zone/catalog` provides **34 production-ready web components** covering every aspect of server management:
-
-- 📊 **Dashboard** — Real-time cluster overview, resource usage, traffic metrics, quick actions
-- 🐳 **Services** — Docker container management, deployment, logs, live stats, backups, and an integrated IDE workspace
-- 🛒 **App Store** — Browse and deploy pre-configured application templates (WordPress, Gitea, etc.)
-- 🌐 **Network** — Reverse proxy configuration, DNS record management, domain & SSL certificate monitoring
-- 🔀 **Routes** — SmartProxy route configuration, match criteria, TLS modes, security profiles, forwarding targets
-- 📧 **MTA / Email** — Inbound and outbound email management, SMTP transaction logs, authentication results
-- 📦 **Registries** — Container registry management (onebox + external registries like Docker Hub, GHCR, ECR)
-- 🔑 **Auth** — Login view, API token management (global + CI tokens)
-- ⚙️ **Settings** — Appearance, Cloudflare integration, SSL/TLS config, network settings, account management
-- 🏗️ **Platform Services** — MongoDB, MinIO, ClickHouse, Redis, Caddy monitoring and control
-- 📋 **Configuration** — Read-only overview of the running server configuration with collapsible sections
+## Install
 
-Every component supports **light and dark themes** out of the box and communicates via standard `CustomEvent` dispatching.
+```bash
+pnpm add @serve.zone/catalog
+```
 
-## 📦 Usage
+## What It Provides
 
-### Import
+The package exports browser-first TypeScript modules from `ts_web/index.ts`:
 
 ```typescript
-// Import everything
-import * as szCatalog from '@serve.zone/catalog';
-
-// Or import specific components
-import { SzDashboardView, SzLoginView, SzServiceDetailView } from '@serve.zone/catalog';
-```
-
-Components auto-register as custom elements when imported. Use them directly in your HTML:
-
-```html
-<sz-dashboard-view .data="${dashboardData}"></sz-dashboard-view>
-<sz-login-view @login="${handleLogin}"></sz-login-view>
-<sz-service-detail-view .service="${serviceData}" .logs="${logEntries}"></sz-service-detail-view>
+export * from './elements/index.js';
+export * from './pages/index.js';
 ```
 
-### Full Application Shell
-
-For a complete app experience, use the demo app shell which wires up sidebar navigation, app bar menus, and all views via `dees-appui`:
+Importing a component registers its custom element through `@design.estate/dees-element` decorators. Components use the Dees design system, support light and dark themes through Dees theme helpers, and communicate through DOM properties plus `CustomEvent` dispatching.
 
 ```typescript
-import '@serve.zone/catalog';
-// Then use <sz-demo-app-shell> for a fully configured application
+import {
+  SzDashboardView,
+  SzLoginView,
+  SzServiceDetailView,
+} from '@serve.zone/catalog';
 ```
 
-## 🧩 Component Reference
-
-### Dashboard
-
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzDashboardView` | `<sz-dashboard-view>` | Main dashboard orchestrating all grid sections — cluster, services, network, infrastructure |
-| `SzStatCard` | `<sz-stat-card>` | Single statistic card with label, value, icon, and color variant |
-| `SzResourceUsageCard` | `<sz-resource-usage-card>` | CPU/memory progress bars, network I/O, top memory consumers |
-| `SzTrafficCard` | `<sz-traffic-card>` | HTTP traffic metrics — requests, errors, response time, status distribution |
-| `SzQuickActionsCard` | `<sz-quick-actions-card>` | Configurable action button grid |
-
-### Dashboard Grids
-
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzStatusGridCluster` | `<sz-status-grid-cluster>` | 4-column stat card grid — total/running/stopped services, Docker status |
-| `SzStatusGridServices` | `<sz-status-grid-services>` | Resource usage + platform services side by side |
-| `SzStatusGridNetwork` | `<sz-status-grid-network>` | Traffic, reverse proxy, and certificates in a responsive grid |
-| `SzStatusGridInfra` | `<sz-status-grid-infra>` | DNS/SSL status + quick actions |
-
-### Services
-
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzServicesListView` | `<sz-services-list-view>` | Table of deployed services with status badges and action buttons |
-| `SzServiceDetailView` | `<sz-service-detail-view>` | Full service detail page — info, logs, live stats, actions, backups, and integrated workspace/IDE mode |
-| `SzServiceCreateView` | `<sz-service-create-view>` | Service deployment form — image, ports, env vars, volumes, resource limits |
-| `SzServicesBackupsView` | `<sz-services-backups-view>` | Backup schedule and backup history management |
-
-### App Store
-
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzAppStoreView` | `<sz-app-store-view>` | App marketplace for deploying pre-configured templates (WordPress, Gitea, etc.) with category filtering |
-
-### Platform Services
+```html
+<sz-dashboard-view></sz-dashboard-view>
+<sz-login-view></sz-login-view>
+<sz-service-detail-view></sz-service-detail-view>
+```
 
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzPlatformServicesCard` | `<sz-platform-services-card>` | Lists infrastructure services (MongoDB, MinIO, etc.) with status indicators |
-| `SzPlatformServiceDetailView` | `<sz-platform-service-detail-view>` | Detailed platform service view — connection info, config, metrics, logs |
+## Component Areas
 
-### Network
+| Area | Components |
+| --- | --- |
+| Dashboard | `SzDashboardView`, `SzResourceUsageCard`, `SzTrafficCard`, `SzPlatformServicesCard`, `SzCertificatesCard`, `SzReverseProxyCard`, `SzDnsSslCard`, `SzQuickActionsCard`, and status-grid components. |
+| Services | `SzServicesListView`, `SzServiceDetailView`, `SzServiceCreateView`, `SzServicesBackupsView`, and `SzAppStoreView`. |
+| Network and domains | `SzNetworkProxyView`, `SzNetworkDnsView`, `SzNetworkDomainsView`, and `SzDomainDetailView`. |
+| Routes | `SzRouteListView` and `SzRouteCard` for route configuration, match criteria, actions, TLS mode, and security profile display. |
+| Mail | `SzMtaListView` and `SzMtaDetailView` for inbound/outbound email operations views. |
+| Registries | `SzRegistryAdvertisement` and `SzRegistryExternalView`. |
+| Auth and settings | `SzLoginView`, `SzTokensView`, and `SzSettingsView`. |
+| Configuration | `SzConfigOverview` and `SzConfigSection`. |
+| Demo pages | `SzDemoAppShell`, `SzDemoApp`, `Mainpage`, and `SzDemoView*` components used by the development/demo environment. |
 
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzNetworkProxyView` | `<sz-network-proxy-view>` | Reverse proxy management — traffic targets table and access log viewer |
-| `SzNetworkDnsView` | `<sz-network-dns-view>` | DNS record management with Cloudflare sync |
-| `SzNetworkDomainsView` | `<sz-network-domains-view>` | Domain list with certificate status and provider info |
-| `SzDomainDetailView` | `<sz-domain-detail-view>` | Domain detail — SSL certificate info, proxy routes, DNS records |
-| `SzReverseProxyCard` | `<sz-reverse-proxy-card>` | Compact proxy status card (HTTP/HTTPS ports, route count) |
-| `SzDnsSslCard` | `<sz-dns-ssl-card>` | Cloudflare DNS and ACME config status |
-| `SzCertificatesCard` | `<sz-certificates-card>` | Certificate status counts — valid, expiring, expired |
+The exported catalog currently contains more than 30 product UI components plus demo orchestration components. Prefer the exported barrel imports over deep file imports unless you are working inside this repository.
 
-### Routes
+## Usage Patterns
 
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzRouteListView` | `<sz-route-list-view>` | Route configuration list with type filtering (HTTPS, email, DNS, etc.) |
-| `SzRouteCard` | `<sz-route-card>` | Single route card — match criteria, action type, TLS mode, targets, security profile |
+Most components expose data through typed properties and emit actions as DOM events.
 
-### MTA / Email
+```typescript
+import { html } from '@design.estate/dees-element';
+import '@serve.zone/catalog';
 
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzMtaListView` | `<sz-mta-list-view>` | Email management — inbound/outbound messages with status badges and filtering |
-| `SzMtaDetailView` | `<sz-mta-detail-view>` | Email detail — SMTP transaction log, TLS info, SPF/DKIM/DMARC results, headers, body |
+const dashboardTemplate = html`
+  <sz-dashboard-view
+    .data=${dashboardData}
+    @action-click=${(event: CustomEvent) => {
+      console.log('dashboard action selected', event.detail);
+    }}
+  ></sz-dashboard-view>
+`;
+```
 
-### Registries
+For a full app-style demo shell with navigation, import the package and render `<sz-demo-app-shell>`:
 
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzRegistryAdvertisement` | `<sz-registry-advertisement>` | Onebox registry info card with docker quick-start commands |
-| `SzRegistryExternalView` | `<sz-registry-external-view>` | External registry management (Docker Hub, GHCR, GCR, ECR) |
+```html
+<sz-demo-app-shell></sz-demo-app-shell>
+```
 
-### Auth & Settings
+The demo shell is useful for development and visual review. Production apps usually compose the lower-level components into their own routing and data-fetching layer.
 
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzLoginView` | `<sz-login-view>` | Login page with serve.zone branding, credentials form, error display |
-| `SzTokensView` | `<sz-tokens-view>` | API token management — global and CI tokens with copy/regenerate/delete |
-| `SzSettingsView` | `<sz-settings-view>` | Full settings panel — appearance, Cloudflare, SSL/TLS, network, account |
+## TypeScript Interfaces
 
-### Configuration
+Many components export their own data interfaces alongside the custom element class. These interfaces are intended for UI-facing view models, not as replacements for backend contracts from `@serve.zone/interfaces`.
 
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| `SzConfigOverview` | `<sz-config-overview>` | Top-level configuration overview with informational banner |
-| `SzConfigSection` | `<sz-config-section>` | Collapsible config section — icon, enabled/disabled badge, key-value fields, action buttons |
+```typescript
+import type {
+  IDashboardData,
+  IRouteConfig,
+  IServiceDetail,
+  IAppTemplate,
+} from '@serve.zone/catalog';
+```
 
-## 🏗️ Architecture
+Use these types to shape component props in the frontend. Use `@serve.zone/interfaces` for API and persisted platform contracts.
 
-### Component Pattern
+## Architecture
 
-All components follow a consistent pattern:
+The catalog follows a consistent component pattern:
 
 ```typescript
-import { DeesElement, customElement, html, css, cssManager, property } from '@design.estate/dees-element';
-
-@customElement('sz-my-component')
-export class SzMyComponent extends DeesElement {
-  // TC39 standard decorators with accessor keyword
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+} from '@design.estate/dees-element';
+
+@customElement('sz-example-card')
+export class SzExampleCard extends DeesElement {
   @property({ type: String })
-  public accessor label: string = '';
+  public accessor label = '';
 
   public static styles = [
     cssManager.defaultStyles,
     css`
-      /* Light/dark theme support */
-      :host { color: ${cssManager.bdTheme('#18181b', '#fafafa')}; }
+      :host {
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
     `,
   ];
 
-  // Events via CustomEvent (bubbles + composed for shadow DOM)
-  private handleClick() {
-    this.dispatchEvent(new CustomEvent('action', {
-      detail: { id: this.id },
-      bubbles: true,
-      composed: true,
-    }));
+  public render() {
+    return html`<span>${this.label}</span>`;
   }
 }
 ```
 
-### Project Structure
+Project layout:
 
-```
+```text
 @serve.zone/catalog/
-├── html/                    # WccTools dev server entry point
-│   ├── index.html           # HTML shell
-│   └── index.ts             # WccTools config (pages + elements sections)
+├── html/                 # WccTools dev server shell
 ├── ts_web/
-│   ├── index.ts             # Barrel export
-│   ├── elements/            # All web components
-│   │   ├── index.ts         # Element barrel export
-│   │   ├── sz-*.ts          # Individual components
-│   │   └── sz-demo-view-*.ts  # Demo orchestration wrappers
-│   └── pages/               # Page-level components
-│       ├── sz-demo-app-shell.ts  # Full app shell (dees-appui)
-│       └── ...
-└── dist_ts_web/             # Compiled output (npm entry point)
-```
-
-### TypeScript Interfaces
-
-The library exports comprehensive TypeScript interfaces for all data structures:
-
-```typescript
-// Dashboard
-import type { IDashboardData, IResourceUsage, ITrafficData, IClusterStats } from '@serve.zone/catalog';
-
-// Services
-import type { IServiceDetail, IServiceStats, ILogEntry, IServiceBackup } from '@serve.zone/catalog';
-
-// Network
-import type { IDomainDetail, ICertificateDetail, IDnsRecord, ITrafficTarget } from '@serve.zone/catalog';
-
-// Routes
-import type { IRouteConfig, IRouteMatch, IRouteAction, IRouteTls, IRouteSecurity } from '@serve.zone/catalog';
-
-// MTA / Email
-import type { IEmail, IEmailDetail, ISmtpLogEntry, IConnectionInfo, IAuthenticationResults } from '@serve.zone/catalog';
-
-// Configuration
-import type { IConfigField, IConfigSectionAction } from '@serve.zone/catalog';
-
-// Settings & Auth
-import type { ISettings, IToken, IExternalRegistry } from '@serve.zone/catalog';
-
-// App Store
-import type { IAppTemplate } from '@serve.zone/catalog';
+│   ├── index.ts          # package barrel export
+│   ├── elements/         # reusable sz-* web components
+│   └── pages/            # demo app and shell pages
+└── dist_ts_web/          # compiled npm entry point
 ```
 
-## 🛠️ Development
+## Development
 
 ```bash
-# Install dependencies
 pnpm install
-
-# Start dev server (wcctools dashboard with live reload)
 pnpm run watch
-
-# Production build
 pnpm run build
-
-# Run tests
 pnpm test
 ```
 
-The **wcctools dev server** provides an interactive dashboard where every component is rendered with demo data. Components are organized by group (Dashboard, Services, Network, etc.) in the sidebar. Demo view wrappers (`sz-demo-view-*`) are filtered out from the element list — they serve as full-page orchestration demos accessible through the Pages section.
+`pnpm run watch` starts the WccTools development environment for browsing the catalog with demo data. `pnpm run build` compiles TypeScript folders and creates the browser bundle with `tsbundle`.
 
 ## License and Legal Information
 
@@ -265,7 +165,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
 
 ### Company Information
 
-Task Venture Capital GmbH  
+Task Venture Capital GmbH
 Registered at District Court Bremen HRB 35230 HB, Germany
 
 For any legal inquiries or further information, please contact us via email at hello@task.vc.

package/ts_web/00_commitinfo_data.ts

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

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

@@ -92,7 +92,7 @@ export class SzStatusGridServices extends DeesElement {
     return html`
       <div class="grid">
         <sz-resource-usage-card
-          .usage=${this.resourceUsage}
+          .data=${this.resourceUsage}
         ></sz-resource-usage-card>
         <sz-platform-services-card
           .services=${this.platformServices}