ds-one 0.1.11-alpha.10 → 0.1.11-alpha.11

package/DS1/0-face/2025-04-23-device.ts

@@ -79,12 +79,30 @@ export function getDeviceInfo(): DeviceInfo {
 export function initDeviceDetection(): DeviceInfo {
   const deviceInfo = getDeviceInfo();
 
-  // Log device detection results
-  if (deviceInfo.isMobile) {
+  // Calculate and set scaling factor for mobile
+  if (deviceInfo.isMobile && typeof document !== "undefined") {
+    // Design width: 280px (14 columns × 20px)
+    const designWidth = 280;
+    const actualWidth = deviceInfo.screenWidth;
+    const scalingFactor = actualWidth / designWidth;
+
+    // Set CSS custom property for scaling
+    document.documentElement.style.setProperty(
+      "--scaling-factor-mobile",
+      scalingFactor.toFixed(3)
+    );
+
     console.log(
-      `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`
+      `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`
     );
   } else {
+    // Desktop - no scaling
+    if (typeof document !== "undefined") {
+      document.documentElement.style.setProperty(
+        "--scaling-factor-mobile",
+        "1"
+      );
+    }
     console.log(
       `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`
     );

package/DS1/1-root/one.css

@@ -57,7 +57,7 @@ input {
   --type-lineheight-book: 15px;
 
   /* ezo-scaling-factor */
-  --scaling-factor: round(var(--scaling-factor-mobile), 1);
+  --scaling-factor: var(--scaling-factor-mobile);
   --scaling-factor-mobile: 1;
 
   /* size */
@@ -158,6 +158,11 @@ html {
   font-display: swap;
 }
 
+body {
+  margin: 0;
+  padding: 0;
+}
+
 .matrix__board {
   position: relative;
   top: calc(21.5px * var(--scaling-factor));

package/DS1/4-page/ds-grid.ts

@@ -2,6 +2,7 @@
 // Simple grid layout component
 
 import { LitElement, html, css } from "lit";
+import { detectMobileDevice } from "../0-face/2025-04-23-device";
 
 declare global {
   interface CustomElementRegistry {
@@ -13,9 +14,44 @@ declare global {
 export class Grid extends LitElement {
   static properties = {
     align: { type: String },
+    _isMobile: { type: Boolean, state: true },
   };
 
   align?: string;
+  _isMobile: boolean = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._isMobile = detectMobileDevice();
+    console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
+
+    // Apply mobile class immediately
+    if (this._isMobile) {
+      this.classList.add("mobile");
+      console.log(`[ds-grid] Mobile class added`);
+    }
+
+    // Calculate mobile grid dimensions to fit screen
+    if (this._isMobile && typeof window !== "undefined") {
+      const screenWidth = window.innerWidth;
+      const columns = 14;
+      const gap = 0.5;
+
+      // Calculate column size accounting for gaps between columns
+      // Total width = (columns * columnSize) + ((columns - 1) * gap)
+      // Therefore: columnSize = (screenWidth - ((columns - 1) * gap)) / columns
+      const totalGapWidth = (columns - 1) * gap;
+      const columnSize = (screenWidth - totalGapWidth) / columns;
+
+      console.log(
+        `[ds-grid] Mobile grid: ${columns} columns × ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`
+      );
+
+      // Set custom property for this grid instance
+      this.style.setProperty("--mobile-column-size", `${columnSize}px`);
+      this.style.setProperty("--mobile-gap", `${gap}px`);
+    }
+  }
 
   static styles = css`
     :host {
@@ -27,11 +63,11 @@ export class Grid extends LitElement {
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
-      row-rule: 1px solid
-        light-dark(rgba(0, 0, 0, 0.03), rgba(215, 215, 215, 0.022));
-      column-rule: 1px solid
-        light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
-      outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
+      row-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
+      column-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
+      outline:
+        1px solid light-dark(rgb(147, 147, 147)),
+        rgb(147, 147, 147);
       position: fixed;
       top: 0;
       left: 50%;
@@ -40,15 +76,23 @@ export class Grid extends LitElement {
       z-index: 300;
     }
 
-    /* Mobile styles - 15 columns with smaller gap */
-    @media (max-width: 768px) {
-      :host {
-        width: 100%;
-        max-width: 375px;
-        grid-template-columns: repeat(15, 1fr);
-        grid-template-rows: repeat(auto-fill, 20px);
-        gap: 0.5px;
-      }
+    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
+    :host(.mobile) {
+      outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
+      width: calc(100% - calc(1px * var(--scaling-factor)));
+      max-width: 100vw;
+      margin-left: 0 !important;
+      margin-top: 0 !important;
+      box-sizing: border-box;
+      position: fixed;
+      top: calc(0.5px * var(--scaling-factor));
+      left: 50%;
+      transform: translateX(-50%);
+      pointer-events: none;
+      z-index: 300;
+      gap: calc(1px * var(--scaling-factor));
+      grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
+      grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
     }
 
     :host([align="left"]) {
@@ -68,6 +112,15 @@ export class Grid extends LitElement {
     }
   `;
 
+  updated() {
+    // Apply mobile class if detected as mobile device
+    if (this._isMobile) {
+      this.classList.add("mobile");
+    } else {
+      this.classList.remove("mobile");
+    }
+  }
+
   render() {
     return html``;
   }

package/README.md

@@ -27,7 +27,7 @@ npm install ds-one@alpha
 yarn add ds-one@alpha
 ```
 
-**Note**: Currently published as alpha version `0.1.11-alpha.10`. Use `@alpha` tag to install.
+**Note**: Currently published as alpha version `0.1.11-alpha.11`. Use `@alpha` tag to install.
 
 ### Basic Usage
 

package/dist/0-face/2025-04-23-device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"2025-04-23-device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/2025-04-23-device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAsB1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA4BhD"}
+{"version":3,"file":"2025-04-23-device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/2025-04-23-device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAsB1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD"}

package/dist/0-face/2025-04-23-device.js

@@ -50,11 +50,21 @@ export function getDeviceInfo() {
  */
 export function initDeviceDetection() {
     const deviceInfo = getDeviceInfo();
-    // Log device detection results
-    if (deviceInfo.isMobile) {
-        console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
+    // Calculate and set scaling factor for mobile
+    if (deviceInfo.isMobile && typeof document !== "undefined") {
+        // Design width: 280px (14 columns × 20px)
+        const designWidth = 280;
+        const actualWidth = deviceInfo.screenWidth;
+        const scalingFactor = actualWidth / designWidth;
+        // Set CSS custom property for scaling
+        document.documentElement.style.setProperty("--scaling-factor-mobile", scalingFactor.toFixed(3));
+        console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
     }
     else {
+        // Desktop - no scaling
+        if (typeof document !== "undefined") {
+            document.documentElement.style.setProperty("--scaling-factor-mobile", "1");
+        }
         console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
     }
     // Log additional details in development mode

package/dist/4-page/ds-grid.d.ts

@@ -10,9 +10,16 @@ export declare class Grid extends LitElement {
         align: {
             type: StringConstructor;
         };
+        _isMobile: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
     };
     align?: string;
+    _isMobile: boolean;
+    connectedCallback(): void;
     static styles: import("lit").CSSResult;
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/4-page/ds-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,MAAM,0BAiDX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;MAGf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAS;IAE3B,iBAAiB;IAiCjB,MAAM,CAAC,MAAM,0BAyDX;IAEF,OAAO;IASP,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/4-page/ds-grid.js

@@ -1,13 +1,53 @@
 // ds-grid.ts
 // Simple grid layout component
 import { LitElement, html, css } from "lit";
+import { detectMobileDevice } from "../0-face/2025-04-23-device";
 export class Grid extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._isMobile = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._isMobile = detectMobileDevice();
+        console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
+        // Apply mobile class immediately
+        if (this._isMobile) {
+            this.classList.add("mobile");
+            console.log(`[ds-grid] Mobile class added`);
+        }
+        // Calculate mobile grid dimensions to fit screen
+        if (this._isMobile && typeof window !== "undefined") {
+            const screenWidth = window.innerWidth;
+            const columns = 14;
+            const gap = 0.5;
+            // Calculate column size accounting for gaps between columns
+            // Total width = (columns * columnSize) + ((columns - 1) * gap)
+            // Therefore: columnSize = (screenWidth - ((columns - 1) * gap)) / columns
+            const totalGapWidth = (columns - 1) * gap;
+            const columnSize = (screenWidth - totalGapWidth) / columns;
+            console.log(`[ds-grid] Mobile grid: ${columns} columns × ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`);
+            // Set custom property for this grid instance
+            this.style.setProperty("--mobile-column-size", `${columnSize}px`);
+            this.style.setProperty("--mobile-gap", `${gap}px`);
+        }
+    }
+    updated() {
+        // Apply mobile class if detected as mobile device
+        if (this._isMobile) {
+            this.classList.add("mobile");
+        }
+        else {
+            this.classList.remove("mobile");
+        }
+    }
     render() {
         return html ``;
     }
 }
 Grid.properties = {
     align: { type: String },
+    _isMobile: { type: Boolean, state: true },
 };
 Grid.styles = css `
     :host {
@@ -19,11 +59,11 @@ Grid.styles = css `
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
-      row-rule: 1px solid
-        light-dark(rgba(0, 0, 0, 0.03), rgba(215, 215, 215, 0.022));
-      column-rule: 1px solid
-        light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
-      outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
+      row-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
+      column-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
+      outline:
+        1px solid light-dark(rgb(147, 147, 147)),
+        rgb(147, 147, 147);
       position: fixed;
       top: 0;
       left: 50%;
@@ -32,15 +72,23 @@ Grid.styles = css `
       z-index: 300;
     }
 
-    /* Mobile styles - 15 columns with smaller gap */
-    @media (max-width: 768px) {
-      :host {
-        width: 100%;
-        max-width: 375px;
-        grid-template-columns: repeat(15, 1fr);
-        grid-template-rows: repeat(auto-fill, 20px);
-        gap: 0.5px;
-      }
+    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
+    :host(.mobile) {
+      outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
+      width: calc(100% - calc(1px * var(--scaling-factor)));
+      max-width: 100vw;
+      margin-left: 0 !important;
+      margin-top: 0 !important;
+      box-sizing: border-box;
+      position: fixed;
+      top: calc(0.5px * var(--scaling-factor));
+      left: 50%;
+      transform: translateX(-50%);
+      pointer-events: none;
+      z-index: 300;
+      gap: calc(1px * var(--scaling-factor));
+      grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
+      grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
     }
 
     :host([align="left"]) {

package/dist/ds-one.bundle.js

@@ -34,9 +34,16 @@ function getDeviceInfo() {
 }
 function initDeviceDetection() {
   const deviceInfo = getDeviceInfo();
-  if (deviceInfo.isMobile) {
-    console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
+  if (deviceInfo.isMobile && typeof document !== "undefined") {
+    const designWidth = 280;
+    const actualWidth = deviceInfo.screenWidth;
+    const scalingFactor = actualWidth / designWidth;
+    document.documentElement.style.setProperty("--scaling-factor-mobile", scalingFactor.toFixed(3));
+    console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
   } else {
+    if (typeof document !== "undefined") {
+      document.documentElement.style.setProperty("--scaling-factor-mobile", "1");
+    }
     console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
   }
   if (typeof window !== "undefined" && window.DS_ONE_DEBUG) {
@@ -4718,12 +4725,43 @@ customElements.define("ds-table", DsTable);
 
 // dist/4-page/ds-grid.js
 var Grid = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this._isMobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._isMobile = detectMobileDevice();
+    console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
+    if (this._isMobile) {
+      this.classList.add("mobile");
+      console.log(`[ds-grid] Mobile class added`);
+    }
+    if (this._isMobile && typeof window !== "undefined") {
+      const screenWidth = window.innerWidth;
+      const columns = 14;
+      const gap = 0.5;
+      const totalGapWidth = (columns - 1) * gap;
+      const columnSize = (screenWidth - totalGapWidth) / columns;
+      console.log(`[ds-grid] Mobile grid: ${columns} columns \xD7 ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`);
+      this.style.setProperty("--mobile-column-size", `${columnSize}px`);
+      this.style.setProperty("--mobile-gap", `${gap}px`);
+    }
+  }
+  updated() {
+    if (this._isMobile) {
+      this.classList.add("mobile");
+    } else {
+      this.classList.remove("mobile");
+    }
+  }
   render() {
     return x``;
   }
 };
 Grid.properties = {
-  align: { type: String }
+  align: { type: String },
+  _isMobile: { type: Boolean, state: true }
 };
 Grid.styles = i`
     :host {
@@ -4735,11 +4773,11 @@ Grid.styles = i`
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
-      row-rule: 1px solid
-        light-dark(rgba(0, 0, 0, 0.03), rgba(215, 215, 215, 0.022));
-      column-rule: 1px solid
-        light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
-      outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
+      row-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
+      column-rule: 1px solid light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
+      outline:
+        1px solid light-dark(rgb(147, 147, 147)),
+        rgb(147, 147, 147);
       position: fixed;
       top: 0;
       left: 50%;
@@ -4748,15 +4786,23 @@ Grid.styles = i`
       z-index: 300;
     }
 
-    /* Mobile styles - 15 columns with smaller gap */
-    @media (max-width: 768px) {
-      :host {
-        width: 100%;
-        max-width: 375px;
-        grid-template-columns: repeat(15, 1fr);
-        grid-template-rows: repeat(auto-fill, 20px);
-        gap: 0.5px;
-      }
+    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
+    :host(.mobile) {
+      outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
+      width: calc(100% - calc(1px * var(--scaling-factor)));
+      max-width: 100vw;
+      margin-left: 0 !important;
+      margin-top: 0 !important;
+      box-sizing: border-box;
+      position: fixed;
+      top: calc(0.5px * var(--scaling-factor));
+      left: 50%;
+      transform: translateX(-50%);
+      pointer-events: none;
+      z-index: 300;
+      gap: calc(1px * var(--scaling-factor));
+      grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
+      grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
     }
 
     :host([align="left"]) {