@serve.zone/catalog

--- package/ts_web/elements/sz-demo-view-config.ts (excerpt) ---
import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { IConfigField, IConfigSectionAction } from './sz-config-section.js';
import './index.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-demo-view-config': SzDemoViewConfig;
  }
}

@customElement('sz-demo-view-config')
export class SzDemoViewConfig extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }
    `,
  ];

  public render(): TemplateResult {
    const systemFields: IConfigField[] = [
      { key: 'Base Directory', value: '/home/user/.serve.zone/dcrouter' },
      { key: 'Data Directory', value: '/home/user/.serve.zone/dcrouter/data' },
      { key: 'Public IP', value: '203.0.113.50' },
      { key: 'Proxy IPs', value: ['203.0.113.10', '203.0.113.11'], type: 'pills' },
      { key: 'Uptime', value: '3d 14h 22m' },
      { key: 'Storage Backend', value: 'filesystem', type: 'badge' },
    ];

    const proxyFields: IConfigField[] = [
      { key: 'Route Count', value: 12 },
      { key: 'ACME Enabled', value: true, type: 'boolean' },
      { key: 'Account Email', value: 'admin@serve.zone' },
      { key: 'Use Production', value: true, type: 'boolean' },
      { key: 'Auto Renew', value: true, type: 'boolean' },
      { key: 'Renew Thre

--- package/ts_web/elements/sz-demo-view-mta.ts (excerpt) ---
import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  state,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { DeesAppui } from '@design.estate/dees-catalog';
import type { IEmail, TEmailDirection } from './sz-mta-list-view.js';
import type { IEmailDetail } from './sz-mta-detail-view.js';
import './index.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-demo-view-mta': SzDemoViewMta;
  }
}

@customElement('sz-demo-view-mta')
export class SzDemoViewMta extends DeesElement {
  private appui: DeesAppui | null = null;

  @state()
  private accessor currentView: 'list' | 'detail' = 'list';

  @state()
  private accessor selectedEmail: IEmailDetail | null = null;

  @state()
  private accessor currentDirectionFilter: TEmailDirection | 'all' = 'all';

  private demoEmails: IEmail[] = [
    { id: '1', direction: 'outbound', status: 'delivered', from: 'noreply@serve.zone', to: 'user@example.com', subject: 'Welcome to serve.zone', timestamp: '2024-01-15 14:30:22', messageId: '<abc123@serve.zone>', size: '12.4 KB' },
    { id: '2', direction: 'outbound', status: 'bounced', from: 'alerts@serve.zone', to: 'invalid@nowhere.test', subject: 'Service Alert: CPU Usage High', timestamp: '2024-01-15 14:28:10', messageId: '<def456@serve.zone>', size: '8.2 KB' },
    { id: '3', direction: 'inbound', status: 'delivered', from: 'support@customer.com', to: 'admin@serve.zone', subject: 'Re: Infrastructure Review', timestamp: '2024-01-15 14:25

--- package/ts_web/elements/sz-mta-detail-view.ts (excerpt) ---
import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';

import type { IEmail } from './sz-mta-list-view.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-mta-detail-view': SzMtaDetailView;
  }
}

export interface ISmtpLogEntry {
  timestamp: string;
  direction: 'client' | 'server';
  command: string;
  responseCode?: number;
}

export interface IConnectionInfo {
  sourceIp: string;
  sourceHostname: string;
  destinationIp: string;
  destinationPort: number;
  tlsVersion: string;
  tlsCipher: string;
  authenticated: boolean;
  authMethod: string;
  authUser: string;
}

export interface IAuthenticationResults {
  spf: 'pass' | 'fail' | 'softfail' | 'neutral' | 'none';
  spfDomain: string;
  dkim: 'pass' | 'fail' | 'none';
  dkimDomain: string;
  dmarc: 'pass' | 'fail' | 'none';
  dmarcPolicy: string;
}

export interface IEmailDetail extends IEmail {
  to: string;
  toList: string[];
  cc?: string[];
  smtpLog: ISmtpLogEntry[];
  connectionInfo: IConnectionInfo;
  authenticationResults: IAuthenticationResults;
  rejectionReason?: string;
  bounceMessage?: string;
  headers: Record<string, string>;
  body: string;
}

@customElement('sz-mta-detail-view')
export class SzMtaDetailView extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-mta-detail-view
        .email=${{
          id: '1',
          direction: '