@serve.zone/catalog 1.0.1

package/ts_web/elements/sz-traffic-card.ts

@@ -0,0 +1,222 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-traffic-card': SzTrafficCard;
+  }
+}
+
+export interface ITrafficData {
+  requests: number;
+  errors: number;
+  errorPercent: number;
+  avgResponse: number;
+  reqPerMin: number;
+  status2xx: number;
+  status3xx: number;
+  status4xx: number;
+  status5xx: number;
+}
+
+@customElement('sz-traffic-card')
+export class SzTrafficCard extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 500px;">
+      <sz-traffic-card
+        .data=${{
+          requests: 1250,
+          errors: 15,
+          errorPercent: 1.2,
+          avgResponse: 145,
+          reqPerMin: 21,
+          status2xx: 85,
+          status3xx: 5,
+          status4xx: 8,
+          status5xx: 2,
+        }}
+      ></sz-traffic-card>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor data: ITrafficData = {
+    requests: 0,
+    errors: 0,
+    errorPercent: 0,
+    avgResponse: 0,
+    reqPerMin: 0,
+    status2xx: 0,
+    status3xx: 0,
+    status4xx: 0,
+    status5xx: 0,
+  };
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .header {
+        margin-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .metrics {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+        margin-bottom: 16px;
+      }
+
+      .metric {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .metric-label {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .metric-value {
+        font-size: 18px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .status-bar-container {
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+      }
+
+      .status-bar {
+        display: flex;
+        height: 8px;
+        border-radius: 4px;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        margin-bottom: 8px;
+      }
+
+      .status-segment {
+        height: 100%;
+        transition: width 300ms ease;
+      }
+
+      .status-2xx {
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+      }
+
+      .status-3xx {
+        background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .status-4xx {
+        background: ${cssManager.bdTheme('#facc15', '#facc15')};
+      }
+
+      .status-5xx {
+        background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+      }
+
+      .status-legend {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .legend-item {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const total = this.data.status2xx + this.data.status3xx + this.data.status4xx + this.data.status5xx;
+    const p2xx = total > 0 ? (this.data.status2xx / total) * 100 : 0;
+    const p3xx = total > 0 ? (this.data.status3xx / total) * 100 : 0;
+    const p4xx = total > 0 ? (this.data.status4xx / total) * 100 : 0;
+    const p5xx = total > 0 ? (this.data.status5xx / total) * 100 : 0;
+
+    return html`
+      <div class="card">
+        <div class="header">
+          <div class="title">Traffic (Last Hour)</div>
+          <div class="subtitle">Request metrics from access logs</div>
+        </div>
+
+        <div class="metrics">
+          <div class="metric">
+            <span class="metric-label">Requests</span>
+            <span class="metric-value">${this.formatNumber(this.data.requests)}</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Errors</span>
+            <span class="metric-value">${this.data.errors} (${this.data.errorPercent}%)</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Avg Response</span>
+            <span class="metric-value">${this.data.avgResponse}ms</span>
+          </div>
+          <div class="metric">
+            <span class="metric-label">Req/min</span>
+            <span class="metric-value">${this.data.reqPerMin}</span>
+          </div>
+        </div>
+
+        <div class="status-bar-container">
+          <div class="status-bar">
+            <div class="status-segment status-2xx" style="width: ${p2xx}%"></div>
+            <div class="status-segment status-3xx" style="width: ${p3xx}%"></div>
+            <div class="status-segment status-4xx" style="width: ${p4xx}%"></div>
+            <div class="status-segment status-5xx" style="width: ${p5xx}%"></div>
+          </div>
+          <div class="status-legend">
+            <span class="legend-item">2xx</span>
+            <span class="legend-item">3xx</span>
+            <span class="legend-item">4xx</span>
+            <span class="legend-item">5xx</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private formatNumber(num: number): string {
+    if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+    if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+    return num.toString();
+  }
+}

package/ts_web/index.ts

@@ -0,0 +1,2 @@
+export * from './elements/index.js';
+export * from './pages/index.js';

package/ts_web/pages/index.ts

@@ -0,0 +1,3 @@
+export * from './mainpage.js';
+export * from './sz-demo-app.js';
+export * from './sz-demo-app-shell.js';

package/ts_web/pages/mainpage.ts

@@ -0,0 +1,46 @@
+import { html } from '@design.estate/dees-element';
+
+export const mainpage = () => html`
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+    }
+    .demo-container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+    .demo-section {
+      background: white;
+      border-radius: 12px;
+      padding: 48px;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+      max-width: 600px;
+      width: 100%;
+    }
+    h1 {
+      margin: 0 0 32px 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 28px;
+      color: #1a1a1a;
+    }
+    .component-demo {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  </style>
+  <div class="demo-container">
+    <div class="demo-section">
+      <h1>Serve.Zone Catalog</h1>
+      <div class="component-demo">
+        <sz-hello></sz-hello>
+        <sz-hello text="Welcome to Serve.Zone!"></sz-hello>
+      </div>
+    </div>
+  </div>
+`;

package/ts_web/pages/sz-demo-app-shell.ts

@@ -0,0 +1,179 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { DeesAppui } from '@design.estate/dees-catalog';
+import '@design.estate/dees-catalog';
+import '../elements/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-app-shell': SzDemoAppShell;
+  }
+}
+
+@customElement('sz-demo-app-shell')
+export class SzDemoAppShell extends DeesElement {
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+
+      dees-appui {
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <dees-appui></dees-appui>
+    `;
+  }
+
+  async firstUpdated() {
+    const appui = this.shadowRoot?.querySelector('dees-appui') as DeesAppui;
+
+    if (!appui) return;
+
+    // Configure the application shell
+    appui.configure({
+      branding: {
+        logoIcon: 'lucide:Box',
+        logoText: 'serve.zone',
+      },
+      appBar: {
+        showSearch: true,
+        breadcrumbs: 'serve.zone',
+        menuItems: [
+          {
+            name: 'File',
+            action: async () => {},
+            submenu: [
+              { name: 'New Service', shortcut: 'Cmd+N', action: async () => { console.log('New Service'); } },
+              { name: 'Import Configuration', action: async () => { console.log('Import'); } },
+              { name: 'Export Configuration', action: async () => { console.log('Export'); } },
+              { divider: true },
+              { name: 'Preferences', shortcut: 'Cmd+,', action: async () => { appui.navigateToView('settings'); } },
+            ],
+          },
+          {
+            name: 'View',
+            action: async () => {},
+            submenu: [
+              { name: 'Dashboard', shortcut: 'Cmd+1', action: async () => { appui.navigateToView('dashboard'); } },
+              { name: 'Services', shortcut: 'Cmd+2', action: async () => { appui.navigateToView('services'); } },
+              { name: 'Network', shortcut: 'Cmd+3', action: async () => { appui.navigateToView('network'); } },
+              { divider: true },
+              { name: 'Activity Log', shortcut: 'Cmd+Shift+A', action: async () => { appui.toggleActivityLog(); } },
+              { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => { appui.setMainMenuCollapsed(!(appui as any).mainmenuCollapsed); } },
+            ],
+          },
+          {
+            name: 'Services',
+            action: async () => {},
+            submenu: [
+              { name: 'Deploy New Service', action: async () => { console.log('Deploy'); } },
+              { name: 'Start All', action: async () => { console.log('Start all'); } },
+              { name: 'Stop All', action: async () => { console.log('Stop all'); } },
+              { divider: true },
+              { name: 'Garbage Collect', action: async () => { console.log('GC'); } },
+            ],
+          },
+          {
+            name: 'Help',
+            action: async () => {},
+            submenu: [
+              { name: 'Documentation', action: async () => { window.open('https://docs.serve.zone', '_blank'); } },
+              { name: 'Release Notes', action: async () => { console.log('Release notes'); } },
+              { divider: true },
+              { name: 'About serve.zone', action: async () => { console.log('About'); } },
+            ],
+          },
+        ],
+      },
+      views: [
+        {
+          id: 'dashboard',
+          name: 'Dashboard',
+          iconName: 'lucide:LayoutDashboard',
+          content: 'sz-demo-view-dashboard',
+        },
+        {
+          id: 'services',
+          name: 'Services',
+          iconName: 'lucide:Server',
+          content: 'sz-demo-view-services',
+        },
+        {
+          id: 'network',
+          name: 'Network',
+          iconName: 'lucide:Network',
+          content: 'sz-demo-view-network',
+        },
+        {
+          id: 'registries',
+          name: 'Registries',
+          iconName: 'lucide:Archive',
+          content: 'sz-demo-view-registries',
+        },
+        {
+          id: 'tokens',
+          name: 'Tokens',
+          iconName: 'lucide:Key',
+          content: 'sz-demo-view-tokens',
+        },
+        {
+          id: 'settings',
+          name: 'Settings',
+          iconName: 'lucide:Settings',
+          content: 'sz-demo-view-settings',
+        },
+      ],
+      mainMenu: {
+        sections: [
+          {
+            name: 'Overview',
+            views: ['dashboard'],
+          },
+          {
+            name: 'Infrastructure',
+            views: ['services', 'network', 'registries'],
+          },
+          {
+            name: 'Administration',
+            views: ['tokens', 'settings'],
+          },
+        ],
+      },
+      defaultView: 'dashboard',
+      onViewChange: (viewId, view) => {
+        console.log('View changed to:', viewId, view);
+      },
+    });
+
+    // Set user profile
+    appui.setUser({
+      name: 'Admin User',
+      email: 'admin@serve.zone',
+      status: 'online',
+    });
+
+    // Set profile menu items
+    appui.setProfileMenuItems([
+      { name: 'Profile', iconName: 'lucide:User', action: async () => { console.log('Profile'); } },
+      { name: 'Preferences', iconName: 'lucide:SlidersHorizontal', action: async () => { console.log('Preferences'); } },
+      { divider: true },
+      { name: 'Sign Out', iconName: 'lucide:LogOut', action: async () => { console.log('Sign Out'); } },
+    ]);
+  }
+}

package/ts_web/pages/sz-demo-app.ts

@@ -0,0 +1,20 @@
+import { html } from '@design.estate/dees-element';
+import '../elements/index.js';
+
+export const szDemoApp = () => html`
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+    }
+    sz-demo-app-shell {
+      display: block;
+      height: 100vh;
+      width: 100vw;
+    }
+  </style>
+  <sz-demo-app-shell></sz-demo-app-shell>
+`;