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

changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2025-12-19 - 3.0.0 - 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
+
+- Introduce isNative (derived from selectedViewport === 'native') replacing isFullscreen on WccDashboard, WccFrame, WccProperties and WccSidebar (property and styling changes).
+- WccDashboard: remove isFullscreen property, add isNative getter, implement toggleNative to switch selectedViewport between 'native' and 'desktop', update ESC handler to exit native mode and call buildUrl().
+- WccProperties: add Native button to viewport selector, adjust grid columns and selector layout, replace fullscreen toggle with toggleNative (dispatches 'toggleNative' event).
+- WccFrame: rename isFullscreen -> isNative and update style/markup branching to use isNative.
+- WccSidebar: visibility now driven by isNative instead of isFullscreen.
+- API/event changes: 'toggleFullscreen' event renamed to 'toggleNative' — this is an incompatible change for consumers relying on the old event/property.
+- package.json: bump devDependencies @git.zone/tsbuild -> ^4.0.2, @git.zone/tsrun -> ^2.0.1, @git.zone/tswatch -> ^2.3.13, @types/node -> ^25.0.3.
+- npmextra.json: rename keys (e.g. "gitzone" -> "@git.zone/cli", "tsdoc" -> "@git.zone/tsdoc"), add @ship.zone/szci entry and add release registries/accessLevel for @git.zone/cli.
+
 ## 2025-12-11 - 2.0.1 - fix(@git.zone/tswatch)
 Bump @git.zone/tswatch devDependency to ^2.3.12
 

npmextra.json

@@ -1,5 +1,5 @@
 {
-  "gitzone": {
+  "@git.zone/cli": {
     "projectType": "wcc",
     "module": {
       "githost": "code.foss.global",
@@ -21,13 +21,19 @@
         "element testing",
         "page development"
       ]
+    },
+    "release": {
+      "registries": [
+        "https://verdaccio.lossless.digital",
+        "https://registry.npmjs.org"
+      ],
+      "accessLevel": "public"
     }
   },
-  "npmci": {
+  "@git.zone/tsdoc": {
-    "npmGlobalTools": [],
-    "npmAccessLevel": "public"
-  },
-  "tsdoc": {
     "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
+  },
+  "@ship.zone/szci": {
+    "npmGlobalTools": []
   }
 }

package.json

@@ -24,13 +24,13 @@
   },
   "devDependencies": {
     "@api.global/typedserver": "^7.11.1",
-    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbuild": "^4.0.2",
     "@git.zone/tsbundle": "^2.6.3",
-    "@git.zone/tsrun": "^2.0.0",
+    "@git.zone/tsrun": "^2.0.1",
     "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.3.12",
+    "@git.zone/tswatch": "^2.3.13",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.0"
+    "@types/node": "^25.0.3"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '2.0.1',
+  version: '3.0.0',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

ts_web/elements/wcc-dashboard.ts

@@ -34,8 +34,10 @@ export class WccDashboard extends DeesElement {
   @property()
   accessor selectedTheme: TTheme = 'dark';
 
-  @property()
+  // Derived from selectedViewport - no need for separate property
-  accessor isFullscreen: boolean = false;
+  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=${() => {
+        @toggleNative=${() => {
-          this.toggleFullscreen();
+          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() {
+  public toggleNative() {
-    this.isFullscreen = !this.isFullscreen;
+    // 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) {
+      if (event.key === 'Escape' && this.isNative) {
-        this.isFullscreen = false;
+        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' ||
+                class="button ${this.selectedViewport === 'desktop' ? 'selected' : null}"
-                this.selectedViewport === 'native'
-                  ? '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;