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();
       }
     });