BREAKING CHANGE(ts_web): Replace fullscreen boolean with native viewport mode across components, add native viewport selector and toggle, and update dev deps and npmextra config

ts_web/elements/wcc-dashboard.ts

@@ -34,8 +34,10 @@ export class WccDashboard extends DeesElement {
   @property()
   accessor selectedTheme: TTheme = 'dark';
 
-  @property()
-  accessor isFullscreen: boolean = false;
+  // Derived from selectedViewport - no need for separate property
+  public get isNative(): boolean {
+    return this.selectedViewport === 'native';
+  }
 
   @property()
   accessor pages: Record<string, TTemplateFactory> = {};
@@ -84,7 +86,7 @@ export class WccDashboard extends DeesElement {
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
-        .isFullscreen=${this.isFullscreen}
+        .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
           this.selectedType = eventArg.detail;
         }}
@@ -101,7 +103,7 @@ export class WccDashboard extends DeesElement {
         .selectedItem=${this.selectedItem}
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
-        .isFullscreen=${this.isFullscreen}
+        .isNative=${this.isNative}
         @selectedViewport=${(eventArg) => {
           this.selectedViewport = eventArg.detail;
           this.scheduleUpdate();
@@ -116,11 +118,11 @@ export class WccDashboard extends DeesElement {
             frame.requestUpdate();
           }
         }}
-        @toggleFullscreen=${() => {
-          this.toggleFullscreen();
+        @toggleNative=${() => {
+          this.toggleNative();
         }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isFullscreen=${this.isFullscreen}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative}>
       </wcc-frame>
     `;
   }
@@ -135,17 +137,20 @@ export class WccDashboard extends DeesElement {
     }
   }
 
-  public toggleFullscreen() {
-    this.isFullscreen = !this.isFullscreen;
+  public toggleNative() {
+    // Toggle between 'native' and 'desktop' viewports
+    this.selectedViewport = this.selectedViewport === 'native' ? 'desktop' : 'native';
+    this.buildUrl();
   }
 
   public async firstUpdated() {
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
     
-    // Add ESC key handler for fullscreen mode
+    // Add ESC key handler for native mode
     document.addEventListener('keydown', (event) => {
-      if (event.key === 'Escape' && this.isFullscreen) {
-        this.isFullscreen = false;
+      if (event.key === 'Escape' && this.isNative) {
+        this.selectedViewport = 'desktop';
+        this.buildUrl();
       }
     });
     

ts_web/elements/wcc-frame.ts

@@ -17,7 +17,7 @@ export class WccFrame extends DeesElement {
   accessor advancedEditorOpen: boolean = false;
 
   @property({ type: Boolean })
-  accessor isFullscreen: boolean = false;
+  accessor isNative: boolean = false;
 
   public static styles = [
     css`
@@ -46,7 +46,7 @@ export class WccFrame extends DeesElement {
     return html`
       <style>
         :host {
-          ${this.isFullscreen ? `
+          ${this.isNative ? `
             border: none !important;
             left: 0px !important;
             right: 0px !important;
@@ -58,7 +58,7 @@ export class WccFrame extends DeesElement {
             left: 200px;
           `}
           transition: all 0.3s ease;
-          ${this.isFullscreen ? 'padding: 0px;' : (() => {
+          ${this.isNative ? 'padding: 0px;' : (() => {
           switch (this.viewport) {
             case 'desktop':
               return `
@@ -87,7 +87,7 @@ export class WccFrame extends DeesElement {
         }
 
         .viewport {
-          ${!this.isFullscreen && this.viewport !== 'desktop'
+          ${!this.isNative && this.viewport !== 'desktop'
             ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
             : html``
           }

ts_web/elements/wcc-properties.ts

@@ -35,7 +35,7 @@ export class WccProperties extends DeesElement {
   accessor warning: string = null;
 
   @property()
-  accessor isFullscreen: boolean = false;
+  accessor isNative: boolean = false;
 
   @state()
   accessor propertyContent: TemplateResult[] = [];
@@ -96,11 +96,11 @@ export class WccProperties extends DeesElement {
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
-          display: ${this.isFullscreen ? 'none' : 'block'};
+          display: ${this.isNative ? 'none' : 'block'};
         }
         .grid {
           display: grid;
-          grid-template-columns: 1fr 150px 300px 70px 70px;
+          grid-template-columns: 1fr 150px 350px 70px;
           height: 100%;
         }
         .properties {
@@ -214,6 +214,11 @@ export class WccProperties extends DeesElement {
           grid-template-columns: repeat(4, 1fr);
           flex: 1;
         }
+        .selectorButtons5 {
+          display: grid;
+          grid-template-columns: repeat(5, 1fr);
+          flex: 1;
+        }
         .button {
           display: flex;
           flex-direction: column;
@@ -623,7 +628,7 @@ export class WccProperties extends DeesElement {
           </div>
           <div class="viewportSelector">
             <div class="panelheading">Viewport</div>
-            <div class="selectorButtons4">
+            <div class="selectorButtons5">
               <div
                 class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
                 @click=${() => {
@@ -649,23 +654,23 @@ export class WccProperties extends DeesElement {
                 Tablet<i class="material-symbols-outlined">tablet</i>
               </div>
               <div
-                class="button ${this.selectedViewport === 'desktop' ||
-                this.selectedViewport === 'native'
-                  ? 'selected'
-                  : null}"
+                class="button ${this.selectedViewport === 'desktop' ? 'selected' : null}"
                 @click=${() => {
-                  this.selectViewport('native');
+                  this.selectViewport('desktop');
                 }}
               >
                 Desktop<i class="material-symbols-outlined">desktop_windows</i>
               </div>
+              <div
+                class="button ${this.selectedViewport === 'native' ? 'selected' : null}"
+                @click=${() => {
+                  this.selectViewport('native');
+                }}
+              >
+                Native<i class="material-symbols-outlined">fullscreen</i>
+              </div>
             </div>
           </div>
-          <div class="docs" @click=${() => this.toggleFullscreen()}>
-            <i class="material-symbols-outlined" style="font-size: 20px;">
-              ${this.isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
-            </i>
-          </div>
           <!-- Recording Button -->
           <wcc-record-button
             .state=${this.isRecording ? 'recording' : 'idle'}
@@ -1016,9 +1021,9 @@ export class WccProperties extends DeesElement {
     );
   }
 
-  private toggleFullscreen() {
+  private toggleNative() {
     this.dispatchEvent(
-      new CustomEvent('toggleFullscreen', {
+      new CustomEvent('toggleNative', {
         bubbles: true
       })
     );

ts_web/elements/wcc-sidebar.ts

@@ -18,7 +18,7 @@ export class WccSidebar extends DeesElement {
   accessor dashboardRef: WccDashboard;
 
   @property()
-  accessor isFullscreen: boolean = false;
+  accessor isNative: boolean = false;
 
   // Track which elements are expanded (for multi-demo elements)
   @state()
@@ -45,7 +45,7 @@ export class WccSidebar extends DeesElement {
           --ring: #3b82f6;
           --radius: 4px;
 
-          display: ${this.isFullscreen ? 'none' : 'block'};
+          display: ${this.isNative ? '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;