add fullscreen mode

ts_web/elements/wcc-dashboard.ts

@@ -29,6 +29,9 @@ export class WccDashboard extends DeesElement {
   @property()
   public selectedTheme: TTheme = 'dark';
 
+  @property()
+  public isFullscreen: boolean = false;
+
   @property()
   public pages: { [key: string]: () => TemplateResult } = {};
 
@@ -76,6 +79,7 @@ export class WccDashboard extends DeesElement {
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
+        .isFullscreen=${this.isFullscreen}
         @selectedType=${(eventArg) => {
           this.selectedType = eventArg.detail;
         }}
@@ -92,6 +96,7 @@ export class WccDashboard extends DeesElement {
         .selectedItem=${this.selectedItem}
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
+        .isFullscreen=${this.isFullscreen}
         @selectedViewport=${(eventArg) => {
           this.selectedViewport = eventArg.detail;
           this.scheduleUpdate();
@@ -106,8 +111,11 @@ export class WccDashboard extends DeesElement {
             frame.requestUpdate();
           }
         }}
+        @toggleFullscreen=${() => {
+          this.toggleFullscreen();
+        }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isFullscreen=${this.isFullscreen}>
       </wcc-frame>
     `;
   }
@@ -122,9 +130,20 @@ export class WccDashboard extends DeesElement {
     }
   }
 
+  public toggleFullscreen() {
+    this.isFullscreen = !this.isFullscreen;
+  }
+
   public async firstUpdated() {
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
     
+    // Add ESC key handler for fullscreen mode
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && this.isFullscreen) {
+        this.isFullscreen = false;
+      }
+    });
+    
     // Set up scroll listeners after DOM is ready
     setTimeout(() => {
       this.setupScrollListeners();

ts_web/elements/wcc-frame.ts

@@ -16,6 +16,9 @@ export class WccFrame extends DeesElement {
   @property({ type: Boolean })
   public advancedEditorOpen: boolean = false;
 
+  @property({ type: Boolean })
+  public isFullscreen: boolean = false;
+
   public static styles = [
     css`
       :host {
@@ -43,9 +46,19 @@ export class WccFrame extends DeesElement {
     return html`
       <style>
         :host {
+          ${this.isFullscreen ? `
+            border: none !important;
+            left: 0px !important;
+            right: 0px !important;
+            top: 0px !important;
+            bottom: 0px !important;
+          ` : `
             bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
-          transition: bottom 0.3s ease;
-          ${(() => {
+            border: 10px solid #ffaeaf;
+            left: 200px;
+          `}
+          transition: all 0.3s ease;
+          ${this.isFullscreen ? 'padding: 0px;' : (() => {
           switch (this.viewport) {
             case 'desktop':
               return `
@@ -74,7 +87,7 @@ export class WccFrame extends DeesElement {
         }
 
         .viewport {
-          ${this.viewport !== 'desktop'
+          ${!this.isFullscreen && this.viewport !== 'desktop'
             ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
             : html``
           }

ts_web/elements/wcc-properties.ts

@@ -31,6 +31,9 @@ export class WccProperties extends DeesElement {
   @property()
   public warning: string = null;
 
+  @property()
+  public isFullscreen: boolean = false;
+
   @state()
   propertyContent: TemplateResult[] = [];
 
@@ -80,6 +83,7 @@ export class WccProperties extends DeesElement {
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
+          display: ${this.isFullscreen ? 'none' : 'block'};
         }
         .grid {
           display: grid;
@@ -644,7 +648,11 @@ export class WccProperties extends DeesElement {
               </div>
             </div>
           </div>
-          <div class="docs">Docs</div>
+          <div class="docs" @click=${() => this.toggleFullscreen()}>
+            <i class="material-symbols-outlined" style="font-size: 20px;">
+              ${this.isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
+            </i>
+          </div>
         </div>
         ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
       </div>
@@ -977,4 +985,12 @@ export class WccProperties extends DeesElement {
       })
     );
   }
+
+  private toggleFullscreen() {
+    this.dispatchEvent(
+      new CustomEvent('toggleFullscreen', {
+        bubbles: true
+      })
+    );
+  }
 }

ts_web/elements/wcc-sidebar.ts

@@ -15,6 +15,9 @@ export class WccSidebar extends DeesElement {
   @property()
   public dashboardRef: WccDashboard;
 
+  @property()
+  public isFullscreen: boolean = false;
+
   public render(): TemplateResult {
     return html`
       <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
@@ -36,7 +39,7 @@ export class WccSidebar extends DeesElement {
           --ring: #3b82f6;
           --radius: 4px;
 
-          display: block;
+          display: ${this.isFullscreen ? 'none' : 'block'};
           border-right: 1px solid rgba(255, 255, 255, 0.08);
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           font-size: 14px;