update

package.json

@@ -24,7 +24,7 @@
     "@design.estate/dees-catalog": "^3.3.0",
     "@design.estate/dees-domtools": "^2.3.6",
     "@design.estate/dees-element": "^2.1.3",
-    "@design.estate/dees-wcctools": "^1.2.1",
+    "@design.estate/dees-wcctools": "^1.3.0",
     "@git.zone/tsrun": "^2.0.0",
     "@push.rocks/smartfile": "^13.1.0",
     "@push.rocks/smartfs": "^1.2.0",
@@ -42,7 +42,7 @@
     "@git.zone/tsbuild": "^3.1.2",
     "@git.zone/tsbundle": "^2.6.3",
     "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.3.9",
+    "@git.zone/tswatch": "^2.3.10",
     "@push.rocks/projectinfo": "^5.0.2"
   },
   "files": [

pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: ^2.1.3
         version: 2.1.3
       '@design.estate/dees-wcctools':
-        specifier: ^1.2.1
+        specifier: ^1.3.0
-        version: 1.2.1
+        version: 1.3.0
       '@git.zone/tsrun':
         specifier: ^2.0.0
         version: 2.0.0
@@ -67,8 +67,8 @@ importers:
         specifier: ^3.1.3
         version: 3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)
       '@git.zone/tswatch':
-        specifier: ^2.3.9
+        specifier: ^2.3.10
-        version: 2.3.9(@tiptap/pm@2.27.1)
+        version: 2.3.10(@tiptap/pm@2.27.1)
       '@push.rocks/projectinfo':
         specifier: ^5.0.2
         version: 5.0.2
@@ -301,8 +301,8 @@ packages:
   '@design.estate/dees-element@2.1.3':
     resolution: {integrity: sha512-TjXWxVcdSPaT1IOk31ckfxvAZnJLuTxhFGsNCKoh63/UE2FVf6slp8//UFvN+ADigiA9ZsY0azkY99XbJCwDDA==}
 
-  '@design.estate/dees-wcctools@1.2.1':
+  '@design.estate/dees-wcctools@1.3.0':
-    resolution: {integrity: sha512-ESFas1MPPwDUcXRssyHRsc63XPTBJSTBA+5RhYXDZx8mbV6HxEKiJR8Oz1Mv7DBdW+ZSuUTD/fA6Aa/fCxGYTQ==}
+    resolution: {integrity: sha512-+yd8c1gTIKNRQYCvG0xu6Am8dHsRm7ymluX2gnoBQN4aFOpZgIBi/v9CvGyPhTD1p/VRouIBz1wsUCejnwrFCA==}
 
   '@emnapi/core@1.7.1':
     resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
@@ -509,8 +509,8 @@ packages:
     resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==}
     hasBin: true
 
-  '@git.zone/tswatch@2.3.9':
+  '@git.zone/tswatch@2.3.10':
-    resolution: {integrity: sha512-lm3rwkeLXrT8arsQYTTnLSobyXYio+Q70vciBTflpf2Sf4I9fd4QH/89EmKSLysJso2Gnrz63brLzTYCtbdlQQ==}
+    resolution: {integrity: sha512-88bdzD15mYoG0T0AUTg8ATNkV/dN5ecqfiYcQRX1gJHmLrE2yqymFGkb0W0/xWgpcRakc08V+wRbSI7pqg+EOQ==}
     hasBin: true
 
   '@happy-dom/global-registrator@15.11.7':
@@ -1188,8 +1188,8 @@ packages:
   '@push.rocks/smartversion@3.0.5':
     resolution: {integrity: sha512-8MZSo1yqyaKxKq0Q5N188l4un++9GFWVbhCAX5mXJwewZHn97ujffTeL+eOQYpWFTEpUhaq1QhL4NhqObBCt1Q==}
 
-  '@push.rocks/smartwatch@6.2.3':
+  '@push.rocks/smartwatch@6.2.4':
-    resolution: {integrity: sha512-M7rMLdcO423JIF7PbMnqy730h4seAx8lXkP3d7yGhIXep2jizPP+KlkdbdkBdaVp7YupcFZiTnu2HY66SKVtpQ==}
+    resolution: {integrity: sha512-cxGx/RJXSU45cfyJn0DNgXA1jPwmzraJhy+8J8hL2Bjn0K+DxatQRyeIvRVCSLLgBhVTN6yYaUjUtjs19gJLkA==}
     engines: {node: '>=20.0.0'}
 
   '@push.rocks/smartxml@2.0.0':
@@ -4360,7 +4360,7 @@ snapshots:
       '@push.rocks/smartsitemap': 2.0.4
       '@push.rocks/smartstream': 3.2.5
       '@push.rocks/smarttime': 4.1.1
-      '@push.rocks/smartwatch': 6.2.3
+      '@push.rocks/smartwatch': 6.2.4
       '@push.rocks/taskbuffer': 3.5.0
       '@push.rocks/webrequest': 4.0.1
       '@push.rocks/webstore': 2.0.20
@@ -4913,7 +4913,7 @@ snapshots:
     dependencies:
       '@design.estate/dees-domtools': 2.3.6
       '@design.estate/dees-element': 2.1.3
-      '@design.estate/dees-wcctools': 1.2.1
+      '@design.estate/dees-wcctools': 1.3.0
       '@fortawesome/fontawesome-svg-core': 7.1.0
       '@fortawesome/free-brands-svg-icons': 7.1.0
       '@fortawesome/free-regular-svg-icons': 7.1.0
@@ -4990,7 +4990,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@1.2.1':
+  '@design.estate/dees-wcctools@1.3.0':
     dependencies:
       '@design.estate/dees-domtools': 2.3.6
       '@design.estate/dees-element': 2.1.3
@@ -5230,7 +5230,7 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@git.zone/tswatch@2.3.9(@tiptap/pm@2.27.1)':
+  '@git.zone/tswatch@2.3.10(@tiptap/pm@2.27.1)':
     dependencies:
       '@api.global/typedserver': 7.11.1(@tiptap/pm@2.27.1)
       '@git.zone/tsbundle': 2.6.3
@@ -5243,7 +5243,7 @@ snapshots:
       '@push.rocks/smartlog': 3.1.10
       '@push.rocks/smartlog-destination-local': 9.0.2
       '@push.rocks/smartshell': 3.3.0
-      '@push.rocks/smartwatch': 6.2.3
+      '@push.rocks/smartwatch': 6.2.4
       '@push.rocks/taskbuffer': 3.5.0
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -6539,7 +6539,7 @@ snapshots:
       '@types/semver': 7.7.1
       semver: 7.7.3
 
-  '@push.rocks/smartwatch@6.2.3':
+  '@push.rocks/smartwatch@6.2.4':
     dependencies:
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartenv': 6.0.0

ts_web/elements/viewer.ts

@@ -316,6 +316,12 @@ export class DeDocumentViewer extends DeesElement {
         margin-right: 4px;
       }
 
+      .spacing-presets {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
       .spacing-slider-container {
         display: flex;
         align-items: center;
@@ -393,6 +399,36 @@ export class DeDocumentViewer extends DeesElement {
         align-items: center;
       }
     `,
+    // Tablet styles
+    cssManager.cssForTablet(css`
+      .zoom-slider-container {
+        display: none;
+      }
+      .spacing-slider-container {
+        display: none;
+      }
+    `),
+    // Phone styles
+    cssManager.cssForPhone(css`
+      .zoom-slider-container {
+        display: none;
+      }
+      .spacing-label {
+        display: none;
+      }
+      .spacing-presets {
+        display: none;
+      }
+      .controls__divider {
+        display: none;
+      }
+      .controls {
+        padding: 0 8px;
+      }
+      .controls__section {
+        gap: 2px;
+      }
+    `),
   ];
 
   public render(): TemplateResult {
@@ -486,17 +522,19 @@ export class DeDocumentViewer extends DeesElement {
         <span class="spacing-label">Spacing</span>
 
         <!-- Spacing Presets -->
-        ${SPACING_PRESETS.map(
+        <div class="spacing-presets">
-          (preset) => html`
+          ${SPACING_PRESETS.map(
-            <button
+            (preset) => html`
-              class="controls__button ${this.pageGap === preset.value ? "controls__button--active" : ""}"
+              <button
-              @click=${() => this.handleSpacingPreset(preset.value)}
+                class="controls__button ${this.pageGap === preset.value ? "controls__button--active" : ""}"
-              title="${preset.label} (${preset.value}px)"
+                @click=${() => this.handleSpacingPreset(preset.value)}
-            >
+                title="${preset.label} (${preset.value}px)"
-              <dees-icon icon="${preset.icon}"></dees-icon>
+              >
-            </button>
+                <dees-icon icon="${preset.icon}"></dees-icon>
-          `
+              </button>
-        )}
+            `
+          )}
+        </div>
 
         <div class="controls__divider"></div>