@design.estate/dees-catalog 9.3.0 → 9.4.0

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts

@@ -1,395 +1,149 @@
-import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
-import type { IView, IGlobalMessage } from './dees-simple-appdash.js';
+import { html, DeesElement, customElement, property, state, css, cssManager } from '@design.estate/dees-element';
+import type { IView, DeesSimpleAppDash } from './dees-simple-appdash.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import { demoApp } from '../../../demos/templates.js';
+import { WebContainerEnvironment } from '../../00group-runtime/index.js';
 import '../../00group-form/dees-form/dees-form.js';
-import '../../00group-input/dees-input-text/dees-input-text.js';
-import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
-import '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
-import '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
 import '../../00group-form/dees-form-submit/dees-form-submit.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
+import '../../00group-input/dees-input-toggle/dees-input-toggle.js';
 import '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
-import type { IStatsTile } from '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
+import '../../00group-dataview/dees-table/dees-table.js';
+import type { Column, ITableAction } from '../../00group-dataview/dees-table/types.js';
 
-// Create demo view components
-@customElement('demo-view-dashboard')
-class DemoViewDashboard extends DeesElement {
-  static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        padding: 40px;
-      }
-      h1 {
-        margin: 0 0 20px 0;
-        color: ${cssManager.bdTheme('#000', '#fff')};
-      }
-      dees-statsgrid {
-        margin-top: 20px;
-      }
-    `
-  ];
-  
-  private statsTiles: IStatsTile[] = [
-    {
-      id: 'users',
-      title: 'Active Users',
-      value: 1234,
-      type: 'number',
-      icon: 'faUsers',
-      description: '+15% from last week',
-      color: '#22c55e'
-    },
-    {
-      id: 'pageviews',
-      title: 'Page Views',
-      value: 56700,
-      type: 'number',
-      icon: 'faEye',
-      description: '56.7k total views',
-      color: '#3b82f6'
-    },
-    {
-      id: 'uptime',
-      title: 'System Uptime',
-      value: 89,
-      unit: '%',
-      type: 'gauge',
-      icon: 'faServer',
-      description: 'Last 30 days',
-      color: '#10b981',
-      gaugeOptions: {
-        min: 0,
-        max: 100,
-        thresholds: [
-          { value: 80, color: '#ef4444' },
-          { value: 90, color: '#f59e0b' },
-          { value: 100, color: '#10b981' }
-        ]
-      }
-    },
-    {
-      id: 'response',
-      title: 'Avg Response Time',
-      value: 3.2,
-      unit: 's',
-      type: 'number',
-      icon: 'faClock',
-      description: '-0.5s improvement',
-      color: '#f59e0b'
-    },
-    {
-      id: 'revenue',
-      title: 'Monthly Revenue',
-      value: 48520,
-      unit: '$',
-      type: 'trend',
-      icon: 'faDollarSign',
-      description: '+8.2% growth',
-      color: '#22c55e',
-      trendData: [35000, 38000, 37500, 41000, 39800, 42000, 44100, 43200, 45600, 47100, 46800, 48520]
-    },
-    {
-      id: 'traffic',
-      title: 'Traffic Trend',
-      value: 1680,
-      type: 'trend',
-      icon: 'faChartLine',
-      description: 'Last 7 days',
-      color: '#3b82f6',
-      trendData: [1200, 1350, 1100, 1450, 1600, 1550, 1680]
-    }
-  ];
-  
-  render() {
-    return html`
-      <h1>Dashboard</h1>
-      <p>Welcome to your application dashboard. Here's an overview of your metrics:</p>
-      <dees-statsgrid
-        .tiles=${this.statsTiles}
-        @tile-action=${(e: CustomEvent) => {
-          console.log('Tile action:', e.detail);
-        }}
-      ></dees-statsgrid>
+interface IStudioProject { id: string; name: string; client: string; state: string; }
+interface IStudioState { name: string; projects: IStudioProject[]; notifications: boolean; activity: string[]; }
+const initialState = (): IStudioState => ({ name: 'Studio', notifications: true, projects: [
+  { id: 'atlas', name: 'Atlas identity', client: 'Atlas', state: 'In progress' },
+  { id: 'field', name: 'Field notes', client: 'Fieldwork', state: 'Ready for review' },
+  { id: 'mono', name: 'Mono storefront', client: 'Mono', state: 'Completed' },
+], activity: ['Alex shared the first Atlas concepts.', 'Field notes is ready for a final review.', 'Mono storefront was delivered to the client.'] });
 
-      <h2 style="margin-top: 40px;">Recent Activity</h2>
-      <p>Below is a log of recent system events and user activity to demonstrate scrollable content.</p>
+type TStudioPage = 'Overview' | 'Projects' | 'Profile' | 'Notifications';
+type TStudioAction = { type: 'archive'; id: string } | { type: 'navigate'; page: TStudioPage } | { type: 'profile'; name: string } | { type: 'notifications'; enabled: boolean };
 
-      ${[
-        { time: '2 min ago', event: 'User john@example.com logged in from 192.168.1.42', type: 'info' },
-        { time: '5 min ago', event: 'Deployment v3.52.1 completed successfully on production', type: 'success' },
-        { time: '12 min ago', event: 'Database backup finished — 2.4 GB compressed', type: 'info' },
-        { time: '18 min ago', event: 'SSL certificate renewed for api.example.com (expires 2027-04-03)', type: 'success' },
-        { time: '25 min ago', event: 'Memory usage spike on worker-03 (92%) — auto-scaled to 4 instances', type: 'warning' },
-        { time: '31 min ago', event: 'New user registration: sarah@company.io', type: 'info' },
-        { time: '45 min ago', event: 'Scheduled job "cleanup-temp-files" completed — removed 1,247 files', type: 'info' },
-        { time: '1 hour ago', event: 'API rate limit reached for client app-mobile-client (429 responses)', type: 'warning' },
-        { time: '1.5 hours ago', event: 'CDN cache purged for /assets/* — 340 objects invalidated', type: 'info' },
-        { time: '2 hours ago', event: 'Failed login attempt for admin@example.com from 203.0.113.50 (blocked)', type: 'error' },
-        { time: '2.5 hours ago', event: 'Webhook delivery to https://hooks.slack.com succeeded (200 OK)', type: 'info' },
-        { time: '3 hours ago', event: 'Cron job "generate-reports" started — processing Q1 2026 data', type: 'info' },
-        { time: '3.5 hours ago', event: 'Load balancer health check: all 8 nodes healthy', type: 'success' },
-        { time: '4 hours ago', event: 'DNS propagation complete for new subdomain staging.example.com', type: 'success' },
-      ].map(item => html`
-        <div style="
-          display: flex;
-          align-items: baseline;
-          gap: 12px;
-          padding: 10px 0;
-          border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
-          font-size: 13px;
-        ">
-          <span style="
-            flex-shrink: 0;
-            width: 100px;
-            font-size: 11px;
-            color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
-          ">${item.time}</span>
-          <span style="
-            color: ${item.type === 'error' ? cssManager.bdTheme('hsl(0 72% 50%)', 'hsl(0 72% 65%)') :
-              item.type === 'warning' ? cssManager.bdTheme('hsl(25 95% 50%)', 'hsl(25 95% 63%)') :
-              item.type === 'success' ? cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)') :
-              cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 75%)')};
-          ">${item.event}</span>
-        </div>
-      `)}
-    `;
+class DeesDemoSimpleView extends DeesElement {
+  @property({ attribute: false }) accessor model = initialState();
+  protected page: TStudioPage = 'Overview';
+  private action(detail: TStudioAction): void { this.dispatchEvent(new CustomEvent('studio-action', { detail, bubbles: true, composed: true })); }
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
+    :host { display: block; container-type: inline-size; font: 13px/1.5 var(--dees-font-family); color: var(--dees-color-text-primary); }
+    main { display: grid; gap: 28px; max-width: 1040px; margin: auto; padding: 32px; }
+    h1 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; margin: 0 0 8px; }
+    h2 { font-size: 15px; font-weight: 600; margin: 0; }
+    p { margin: 0; color: var(--dees-color-text-secondary); }
+    .eyebrow { font-size: 12px; color: var(--dees-color-text-secondary); margin-bottom: 12px; }
+    .sectionHeader { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+    .project { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-xl); background: var(--dees-color-bg-primary); }
+    .project > dees-icon { color: var(--dees-color-text-secondary); }
+    .project .text { flex: 1 1 140px; }
+    .project p { font-size: 12px; margin-top: 4px; }
+    .activity { list-style: none; padding: 0; margin: 0; }
+    .activity li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--dees-color-border-subtle); }
+    .activity li::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; background: var(--dees-color-text-muted); border-radius: 50%; }
+    dees-form { display: grid; gap: 24px; max-width: 440px; }
+    .settings { padding: 20px; border-radius: var(--dees-radius-xl); border: 1px solid var(--dees-color-border-subtle); background: var(--dees-color-bg-primary); }
+    @container (max-width: 600px) { main { padding: 24px 20px; gap: 24px; } h1 { font-size: 24px; } }
+  `];
+  public render() {
+    const model = this.model;
+    if (this.page === 'Projects') {
+      const columns: Column<IStudioProject>[] = [{ key: 'name', header: 'Project' }, { key: 'client', header: 'Client' }, { key: 'state', header: 'Status' }];
+      const actions: ITableAction<IStudioProject>[] = [{ name: 'Archive project', iconName: 'lucide:Archive', type: ['inRow', 'contextmenu'], actionFunc: async ({ item }) => this.action({ type: 'archive', id: item.id }) }];
+      return html`<main><header><h1>Projects</h1><p>Everything your studio is working on.</p></header>
+        <dees-table heading1="Studio projects" heading2="Archive a delivered project to clear space." dataName="projects" .data=${model.projects} .columns=${columns} rowKey="id" .dataActions=${actions}></dees-table></main>`;
+    }
+    if (this.page === 'Profile') return html`<main><header><h1>Make it yours.</h1><p>A name for the space you work in.</p></header>
+      <dees-form @formData=${(event: CustomEvent) => this.action({ type: 'profile', name: String(event.detail.data.name).trim() })}>
+        <dees-input-text key="name" label="Workspace name" .value=${model.name} required></dees-input-text>
+        <dees-form-submit type="accent" icon="lucide:check">Save changes</dees-form-submit>
+      </dees-form></main>`;
+    if (this.page === 'Notifications') return html`<main><header><h1>Stay in the loop.</h1><p>Choose how this workspace keeps you informed.</p></header><div class="settings">
+      <dees-input-toggle label="Project updates" description="Show a notice when a project is archived." .value=${model.notifications}
+        @newValue=${(event: CustomEvent<boolean>) => this.action({ type: 'notifications', enabled: event.detail })}></dees-input-toggle>
+    </div></main>`;
+    return html`<main><header><div class="eyebrow">Your workspace</div><h1>Room for good work.</h1><p>A clear view of your projects, people, and progress.</p></header>
+      <dees-statsgrid .minTileWidth=${160} .tiles=${[
+        { id: 'projects', title: 'Open projects', value: model.projects.length, type: 'number', icon: 'lucide:Layers', description: 'Across the studio' },
+        { id: 'review', title: 'Ready for review', value: model.projects.filter(project => project.state === 'Ready for review').length, type: 'number', icon: 'lucide:CircleCheck', description: 'Waiting for your feedback' },
+        { id: 'people', title: 'Collaborators', value: 4, type: 'number', icon: 'lucide:Users', description: 'One shared workspace' },
+      ]}></dees-statsgrid>
+      <section><div class="sectionHeader"><h2>On your desk</h2><dees-button type="ghost" size="sm" text="View projects" icon="lucide:arrowUpRight" @clicked=${() => this.action({ type: 'navigate', page: 'Projects' })}></dees-button></div>
+        <div class="project"><dees-icon icon="lucide:folderOpen" iconSize="28"></dees-icon><div class="text"><h2>${model.projects[0]?.name || 'A fresh start'}</h2><p>${model.projects[0]?.state || 'All projects are archived. Reset the demo to start again.'}</p></div>
+          ${model.projects.length ? html`<dees-button type="outline" text="Open projects" @clicked=${() => this.action({ type: 'navigate', page: 'Projects' })}></dees-button>` : ''}</div>
+      </section><section><div class="sectionHeader"><h2>Recent activity</h2></div><ul class="activity">${model.activity.map(entry => html`<li>${entry}</li>`)}</ul></section>
+    </main>`;
   }
 }
+@customElement('dees-demo-simple-overview') class DeesDemoSimpleOverview extends DeesDemoSimpleView {}
+@customElement('dees-demo-simple-projects') class DeesDemoSimpleProjects extends DeesDemoSimpleView { protected override page: TStudioPage = 'Projects'; }
+@customElement('dees-demo-simple-profile') class DeesDemoSimpleProfile extends DeesDemoSimpleView { protected override page: TStudioPage = 'Profile'; }
+@customElement('dees-demo-simple-notifications') class DeesDemoSimpleNotifications extends DeesDemoSimpleView { protected override page: TStudioPage = 'Notifications'; }
 
-@customElement('demo-view-analytics')
-class DemoViewAnalytics extends DeesElement {
-  static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        padding: 40px;
-      }
-      h1 {
-        margin: 0 0 20px 0;
-        color: ${cssManager.bdTheme('#000', '#fff')};
-      }
-    `
+@customElement('dees-demo-simple-studio')
+class DeesDemoSimpleStudio extends DeesElement {
+  @state() private accessor model = initialState();
+  @state() private accessor signedOut = false;
+  @state() private accessor message = 'Local sample workspace. Archive a project or change its settings.';
+  private environment = new WebContainerEnvironment();
+  private views: IView[] = [
+    { name: 'Overview', iconName: 'layoutGrid', element: DeesDemoSimpleOverview },
+    { name: 'Projects', iconName: 'folder', element: DeesDemoSimpleProjects },
+    { name: 'Settings', iconName: 'settings2', subViews: [
+      { name: 'Profile', iconName: 'contact', element: DeesDemoSimpleProfile },
+      { name: 'Notifications', iconName: 'bell', element: DeesDemoSimpleNotifications },
+    ] },
   ];
-  
-  render() {
-    return html`
-      <h1>Analytics</h1>
-      <p>This is the analytics view. You can add charts and metrics here.</p>
-    `;
+  private get app(): DeesSimpleAppDash | null { return this.shadowRoot?.querySelector('dees-simple-appdash') || null; }
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
+    :host { display: grid; height: 100%; min-height: 600px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; font: 12px/1.5 var(--dees-font-family); }
+    .toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; color: var(--dees-color-text-secondary); }
+    .toolbar div { display: flex; flex-wrap: wrap; gap: 8px; }
+    .frame { min-height: 0; overflow: hidden; border-radius: var(--dees-radius-2xl); corner-shape: var(--dees-corner-shape); border: 1px solid var(--dees-color-border-default); }
+    output { color: var(--dees-color-text-secondary); }
+    .signedOut { height: 100%; display: grid; place-content: center; justify-items: center; gap: 16px; }
+    .signedOut h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
+  `];
+  private syncView(): void {
+    const view = this.app?.shadowRoot?.querySelector('.appcontent')?.firstElementChild as DeesDemoSimpleView | null;
+    if (view) view.model = this.model;
   }
-}
-
-@customElement('demo-view-settings')
-class DemoViewSettings extends DeesElement {
-  static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        padding: 40px;
-      }
-      h1 {
-        margin: 0 0 20px 0;
-        color: ${cssManager.bdTheme('#000', '#fff')};
-      }
-      .settings-section {
-        margin-top: 30px;
-      }
-      .settings-section h2 {
-        font-size: 18px;
-        margin: 0 0 15px 0;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-      }
-      .horizontal-form-section {
-        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
-        padding: 20px;
-        border-radius: 8px;
-        margin: 15px 0;
-      }
-    `
-  ];
-  
-  render() {
-    return html`
-      <h1>Settings</h1>
-      <p>Configure your application settings below:</p>
-      
-      <div class="settings-section">
-        <h2>General Settings</h2>
-        <dees-form>
-          <dees-input-text key="appName" label="Application Name" value="My App"></dees-input-text>
-          <dees-input-text key="apiEndpoint" label="API Endpoint" value="https://api.example.com"></dees-input-text>
-          <dees-input-dropdown
-            key="environment"
-            label="Environment"
-            .options=${[
-              { option: 'Development', key: 'dev' },
-              { option: 'Staging', key: 'staging' },
-              { option: 'Production', key: 'prod' }
-            ]}
-            .selectedOption=${{ option: 'Production', key: 'prod' }}
-          ></dees-input-dropdown>
-          <dees-input-checkbox key="enableNotifications" label="Enable Notifications" value="true"></dees-input-checkbox>
-          <dees-input-checkbox key="enableAnalytics" label="Enable Analytics" value="false"></dees-input-checkbox>
-          <dees-form-submit>Save General Settings</dees-form-submit>
-        </dees-form>
-      </div>
-      
-      <div class="settings-section">
-        <h2>Display Preferences</h2>
-        <div class="horizontal-form-section">
-          <p style="margin-top: 0; margin-bottom: 16px;">Quick display settings using horizontal layout:</p>
-          <dees-form horizontal-layout>
-            <dees-input-dropdown
-              key="theme"
-              label="Theme"
-              .enableSearch=${false}
-              .options=${[
-                { option: 'Light', key: 'light' },
-                { option: 'Dark', key: 'dark' },
-                { option: 'Auto', key: 'auto' }
-              ]}
-              .selectedOption=${{ option: 'Dark', key: 'dark' }}
-            ></dees-input-dropdown>
-            <dees-input-dropdown
-              key="language"
-              label="Language"
-              .enableSearch=${false}
-              .options=${[
-                { option: 'English', key: 'en' },
-                { option: 'German', key: 'de' },
-                { option: 'Spanish', key: 'es' },
-                { option: 'French', key: 'fr' }
-              ]}
-              .selectedOption=${{ option: 'English', key: 'en' }}
-            ></dees-input-dropdown>
-            <dees-input-checkbox key="compactMode" label="Compact Mode"></dees-input-checkbox>
-          </dees-form>
-        </div>
-      </div>
-      
-      <div class="settings-section">
-        <h2>Notification Settings</h2>
-        <dees-form>
-          <dees-input-radiogroup
-            .label=${'Email Frequency'}
-            .options=${['Real-time', 'Daily Digest', 'Weekly Summary', 'Never']}
-            .selectedOption=${'Real-time'}
-            .key=${'emailFrequency'}
-          ></dees-input-radiogroup>
-          <dees-input-checkbox key="pushNotifications" label="Enable Push Notifications" value="true"></dees-input-checkbox>
-          <dees-input-checkbox key="soundAlerts" label="Play Sound for Alerts" value="true"></dees-input-checkbox>
-          <dees-form-submit>Update Notifications</dees-form-submit>
-        </dees-form>
-      </div>
-    `;
+  public updated(changes: Map<string, unknown>): void { super.updated(changes); this.syncView(); }
+  private async resetDemo(): Promise<void> {
+    this.model = initialState(); this.signedOut = false; this.message = 'Workspace reset.';
+    await this.updateComplete;
+    this.app?.clearMessages();
+    await this.app?.loadView(this.views[0]);
   }
-}
-
-export const demoFunc = () => html`
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-    }
-    .demo-container {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
+  private navigate(page: TStudioPage): void {
+    const view = this.views.flatMap(entry => [entry, ...(entry.subViews || [])]).find(entry => entry.name === page);
+    if (view) void this.app?.loadView(view);
+  }
+  private handleAction(event: CustomEvent<TStudioAction>): void {
+    const action = event.detail;
+    if (action.type === 'navigate') { this.navigate(action.page); return; }
+    if (action.type === 'archive') {
+      const project = this.model.projects.find(project => project.id === action.id);
+      if (!project) return;
+      this.message = `${project.name} archived.`;
+      this.model = { ...this.model, projects: this.model.projects.filter(project => project.id !== action.id), activity: [this.message, ...this.model.activity].slice(0, 6) };
+      this.app?.removeMessage('storage');
+      if (this.model.notifications) this.app?.addMessage({ id: 'project-update', type: 'success', message: this.message });
+    } else if (action.type === 'profile' && action.name) {
+      this.model = { ...this.model, name: action.name }; this.message = 'Workspace name saved.';
+      this.app?.addMessage({ id: 'settings-update', type: 'success', message: this.message });
+    } else if (action.type === 'notifications') {
+      this.model = { ...this.model, notifications: action.enabled }; this.message = `Project notices ${action.enabled ? 'enabled' : 'disabled'}.`;
     }
-  </style>
-  <div class="demo-container">
-    <dees-simple-appdash
-      name="My Application"
-      terminalSetupCommand="echo 'Welcome to the terminal!'"
-      .globalMessages=${[
-        {
-          id: 'update',
-          type: 'info',
-          message: 'A new version (v3.50.0) is available with performance improvements and bug fixes.',
-          dismissible: true,
-          actions: [
-            {
-              name: 'Update Now',
-              iconName: 'lucide:download',
-              action: () => alert('Updating...'),
-            },
-            {
-              name: 'Release Notes',
-              action: () => alert('Opening release notes...'),
-            },
-          ],
-        },
-        {
-          id: 'maintenance',
-          type: 'warning',
-          message: 'Scheduled maintenance window: April 5, 2026 02:00–06:00 UTC. Some services may be temporarily unavailable.',
-          dismissible: true,
-        },
-        {
-          id: 'critical',
-          type: 'error',
-          message: 'Your SSL certificate expires in 3 days. Renew now to avoid service disruption.',
-          dismissible: false,
-          actions: [
-            {
-              name: 'Renew Certificate',
-              iconName: 'lucide:shieldCheck',
-              action: () => alert('Renewing certificate...'),
-            },
-          ],
-        },
-      ] as IGlobalMessage[]}
-      .viewTabs=${[
-        {
-          name: 'Dashboard',
-          iconName: 'lucide:home',
-          element: DemoViewDashboard,
-        },
-        {
-          name: 'Analytics',
-          iconName: 'lucide:lineChart',
-          element: DemoViewAnalytics,
-          subViews: [
-            {
-              name: 'Overview',
-              iconName: 'lucide:activity',
-              element: DemoViewAnalytics,
-            },
-            {
-              name: 'Reports',
-              iconName: 'lucide:fileText',
-              element: DemoViewDashboard,
-            },
-          ],
-        },
-        {
-          name: 'Settings',
-          iconName: 'lucide:settings',
-          subViews: [
-            {
-              name: 'Profile',
-              iconName: 'lucide:user',
-              element: DemoViewSettings,
-            },
-            {
-              name: 'Billing',
-              iconName: 'lucide:creditCard',
-              element: DemoViewSettings,
-            },
-          ],
-        },
-      ] as IView[]}
-      @logout=${() => {
-        console.log('Logout event triggered');
-        alert('Logout clicked!');
-      }}
-      @view-select=${(e: CustomEvent) => {
-        console.log('View selected:', e.detail.view.name);
-      }}
-    ></dees-simple-appdash>
-  </div>
-`;
+  }
+  public render() {
+    return html`<div class="toolbar"><span>Simple app · One connected studio</span><div>
+      <dees-button type="outline" size="sm" text="Show storage notice" @clicked=${() => this.app?.addMessage({ id: 'storage', type: 'warning', message: 'Your workspace is nearly full. Archive a delivered project to make room.', dismissible: false, actions: [{ name: 'Review projects', action: async () => this.navigate('Projects') }] })}></dees-button>
+      <dees-button type="ghost" size="sm" text="Reset demo" @clicked=${this.resetDemo}></dees-button>
+    </div></div><div class="frame">${this.signedOut ? html`<div class="signedOut"><dees-icon icon="lucide:layers" iconSize="32"></dees-icon><h2>See you soon.</h2><dees-button type="accent" text="Return to Studio" @clicked=${() => { this.signedOut = false; }}></dees-button></div>` : html`
+      <dees-simple-appdash .name=${this.model.name} .viewTabs=${this.views} .executionEnvironment=${this.environment}
+        @view-select=${this.syncView} @studio-action=${this.handleAction} @logout=${() => { this.signedOut = true; this.message = 'Signed out of the sample workspace.'; }}></dees-simple-appdash>`}
+    </div><output role="status">${this.message}</output>`;
+  }
+}
+export const demoFunc = () => demoApp(html`<dees-demo-simple-studio></dees-demo-simple-studio>`);