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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/DS1/0-face/2025-04-23-device.ts +30 -3
  2. package/DS1/1-root/one.css +6 -1
  3. package/DS1/4-page/ds-grid.ts +69 -14
  4. package/README.md +1 -1
  5. package/dist/0-face/2025-04-23-device.d.ts.map +1 -1
  6. package/dist/0-face/2025-04-23-device.js +21 -3
  7. package/dist/4-page/ds-grid.d.ts +7 -0
  8. package/dist/4-page/ds-grid.d.ts.map +1 -1
  9. package/dist/4-page/ds-grid.js +64 -14
  10. package/dist/ds-one.bundle.js +72 -17
  11. package/dist/ds-one.bundle.js.map +2 -2
  12. package/dist/ds-one.bundle.min.js +37 -27
  13. package/dist/ds-one.bundle.min.js.map +3 -3
  14. package/package.json +1 -1
package/DS1/0-face/2025-04-23-device.ts CHANGED
@@ -79,12 +79,30 @@ export function getDeviceInfo(): DeviceInfo {
79
79
  export function initDeviceDetection(): DeviceInfo {
80
80
  const deviceInfo = getDeviceInfo();
81
81
 
82
- // Log device detection results
83
- if (deviceInfo.isMobile) {
82
+ // Calculate and set scaling factor for mobile
83
+ if (deviceInfo.isMobile && typeof document !== "undefined") {
84
+ // Design width: 280px (14 columns × 20px)
85
+ const designWidth = 280;
86
+ const actualWidth = deviceInfo.screenWidth;
87
+ const scalingFactor = actualWidth / designWidth;
88
+
89
+ // Set CSS custom property for scaling
90
+ document.documentElement.style.setProperty(
91
+ "--scaling-factor-mobile",
92
+ scalingFactor.toFixed(3)
93
+ );
94
+
84
95
  console.log(
85
- `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`
96
+ `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`
86
97
  );
87
98
  } else {
99
+ // Desktop - no scaling
100
+ if (typeof document !== "undefined") {
101
+ document.documentElement.style.setProperty(
102
+ "--scaling-factor-mobile",
103
+ "1"
104
+ );
105
+ }
88
106
  console.log(
89
107
  `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`
90
108
  );
@@ -117,4 +135,13 @@ if (typeof window !== "undefined") {
117
135
  // DOM is already ready
118
136
  initDeviceDetection();
119
137
  }
138
+
139
+ // Recalculate on resize (debounced)
140
+ let resizeTimeout: any;
141
+ window.addEventListener("resize", () => {
142
+ clearTimeout(resizeTimeout);
143
+ resizeTimeout = setTimeout(() => {
144
+ initDeviceDetection();
145
+ }, 100);
146
+ });
120
147
  }
package/DS1/1-root/one.css CHANGED
@@ -57,7 +57,7 @@ input {
57
57
  --type-lineheight-book: 15px;
58
58
 
59
59
  /* ezo-scaling-factor */
60
- --scaling-factor: round(var(--scaling-factor-mobile), 1);
60
+ --scaling-factor: var(--scaling-factor-mobile);
61
61
  --scaling-factor-mobile: 1;
62
62
 
63
63
  /* size */
@@ -158,6 +158,11 @@ html {
158
158
  font-display: swap;
159
159
  }
160
160
 
161
+ body {
162
+ margin: 0;
163
+ padding: 0;
164
+ }
165
+
161
166
  .matrix__board {
162
167
  position: relative;
163
168
  top: calc(21.5px * var(--scaling-factor));
package/DS1/4-page/ds-grid.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  // Simple grid layout component
3
3
 
4
4
  import { LitElement, html, css } from "lit";
5
+ import { detectMobileDevice } from "../0-face/2025-04-23-device";
5
6
 
6
7
  declare global {
7
8
  interface CustomElementRegistry {
@@ -13,9 +14,44 @@ declare global {
13
14
  export class Grid extends LitElement {
14
15
  static properties = {
15
16
  align: { type: String },
17
+ _isMobile: { type: Boolean, state: true },
16
18
  };
17
19
 
18
20
  align?: string;
21
+ _isMobile: boolean = false;
22
+
23
+ connectedCallback() {
24
+ super.connectedCallback();
25
+ this._isMobile = detectMobileDevice();
26
+ console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
27
+
28
+ // Apply mobile class immediately
29
+ if (this._isMobile) {
30
+ this.classList.add("mobile");
31
+ console.log(`[ds-grid] Mobile class added`);
32
+ }
33
+
34
+ // Calculate mobile grid dimensions to fit screen
35
+ if (this._isMobile && typeof window !== "undefined") {
36
+ const screenWidth = window.innerWidth;
37
+ const columns = 14;
38
+ const gap = 0.5;
39
+
40
+ // Calculate column size accounting for gaps between columns
41
+ // Total width = (columns * columnSize) + ((columns - 1) * gap)
42
+ // Therefore: columnSize = (screenWidth - ((columns - 1) * gap)) / columns
43
+ const totalGapWidth = (columns - 1) * gap;
44
+ const columnSize = (screenWidth - totalGapWidth) / columns;
45
+
46
+ console.log(
47
+ `[ds-grid] Mobile grid: ${columns} columns × ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`
48
+ );
49
+
50
+ // Set custom property for this grid instance
51
+ this.style.setProperty("--mobile-column-size", `${columnSize}px`);
52
+ this.style.setProperty("--mobile-gap", `${gap}px`);
53
+ }
54
+ }
19
55
 
20
56
  static styles = css`
21
57
  :host {
@@ -27,11 +63,13 @@ export class Grid extends LitElement {
27
63
  grid-template-columns: repeat(auto-fill, 19px);
28
64
  grid-template-rows: repeat(auto-fill, 19px);
29
65
  gap: 1px;
30
- row-rule: 1px solid
31
- light-dark(rgba(0, 0, 0, 0.03), rgba(215, 215, 215, 0.022));
32
- column-rule: 1px solid
33
- light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
34
- outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
66
+ row-rule: calc(1px * var(--scaling-factor)) solid
67
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
68
+ column-rule: calc(1px * var(--scaling-factor)) solid
69
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
70
+ outline:
71
+ 1px solid light-dark(rgb(147, 147, 147)),
72
+ rgb(147, 147, 147);
35
73
  position: fixed;
36
74
  top: 0;
37
75
  left: 50%;
@@ -40,15 +78,23 @@ export class Grid extends LitElement {
40
78
  z-index: 300;
41
79
  }
42
80
 
43
- /* Mobile styles - 15 columns with smaller gap */
44
- @media (max-width: 768px) {
45
- :host {
46
- width: 100%;
47
- max-width: 375px;
48
- grid-template-columns: repeat(15, 1fr);
49
- grid-template-rows: repeat(auto-fill, 20px);
50
- gap: 0.5px;
51
- }
81
+ /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
82
+ :host(.mobile) {
83
+ outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
84
+ width: calc(100% - calc(1px * var(--scaling-factor)));
85
+ max-width: 100vw;
86
+ margin-left: 0 !important;
87
+ margin-top: 0 !important;
88
+ box-sizing: border-box;
89
+ position: fixed;
90
+ top: calc(0.5px * var(--scaling-factor));
91
+ left: 50%;
92
+ transform: translateX(-50%);
93
+ pointer-events: none;
94
+ z-index: 300;
95
+ gap: calc(1px * var(--scaling-factor));
96
+ grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
97
+ grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
52
98
  }
53
99
 
54
100
  :host([align="left"]) {
@@ -68,6 +114,15 @@ export class Grid extends LitElement {
68
114
  }
69
115
  `;
70
116
 
117
+ updated() {
118
+ // Apply mobile class if detected as mobile device
119
+ if (this._isMobile) {
120
+ this.classList.add("mobile");
121
+ } else {
122
+ this.classList.remove("mobile");
123
+ }
124
+ }
125
+
71
126
  render() {
72
127
  return html``;
73
128
  }
package/README.md CHANGED
@@ -27,7 +27,7 @@ npm install ds-one@alpha
27
27
  yarn add ds-one@alpha
28
28
  ```
29
29
 
30
- **Note**: Currently published as alpha version `0.1.11-alpha.10`. Use `@alpha` tag to install.
30
+ **Note**: Currently published as alpha version `0.1.11-alpha.12`. Use `@alpha` tag to install.
31
31
 
32
32
  ### Basic Usage
33
33
 
package/dist/0-face/2025-04-23-device.d.ts.map CHANGED
@@ -1 +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"}
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,CA8ChD"}
package/dist/0-face/2025-04-23-device.js CHANGED
@@ -50,11 +50,21 @@ export function getDeviceInfo() {
50
50
  */
51
51
  export function initDeviceDetection() {
52
52
  const deviceInfo = getDeviceInfo();
53
- // Log device detection results
54
- if (deviceInfo.isMobile) {
55
- console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
53
+ // Calculate and set scaling factor for mobile
54
+ if (deviceInfo.isMobile && typeof document !== "undefined") {
55
+ // Design width: 280px (14 columns × 20px)
56
+ const designWidth = 280;
57
+ const actualWidth = deviceInfo.screenWidth;
58
+ const scalingFactor = actualWidth / designWidth;
59
+ // Set CSS custom property for scaling
60
+ document.documentElement.style.setProperty("--scaling-factor-mobile", scalingFactor.toFixed(3));
61
+ console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
56
62
  }
57
63
  else {
64
+ // Desktop - no scaling
65
+ if (typeof document !== "undefined") {
66
+ document.documentElement.style.setProperty("--scaling-factor-mobile", "1");
67
+ }
58
68
  console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
59
69
  }
60
70
  // Log additional details in development mode
@@ -83,4 +93,12 @@ if (typeof window !== "undefined") {
83
93
  // DOM is already ready
84
94
  initDeviceDetection();
85
95
  }
96
+ // Recalculate on resize (debounced)
97
+ let resizeTimeout;
98
+ window.addEventListener("resize", () => {
99
+ clearTimeout(resizeTimeout);
100
+ resizeTimeout = setTimeout(() => {
101
+ initDeviceDetection();
102
+ }, 100);
103
+ });
86
104
  }
package/dist/4-page/ds-grid.d.ts CHANGED
@@ -10,9 +10,16 @@ export declare class Grid extends LitElement {
10
10
  align: {
11
11
  type: StringConstructor;
12
12
  };
13
+ _isMobile: {
14
+ type: BooleanConstructor;
15
+ state: boolean;
16
+ };
13
17
  };
14
18
  align?: string;
19
+ _isMobile: boolean;
20
+ connectedCallback(): void;
15
21
  static styles: import("lit").CSSResult;
22
+ updated(): void;
16
23
  render(): import("lit-html").TemplateResult<1>;
17
24
  }
18
25
  declare global {
package/dist/4-page/ds-grid.d.ts.map CHANGED
@@ -1 +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"}
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;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,0BA2DX;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 CHANGED
@@ -1,13 +1,53 @@
1
1
  // ds-grid.ts
2
2
  // Simple grid layout component
3
3
  import { LitElement, html, css } from "lit";
4
+ import { detectMobileDevice } from "../0-face/2025-04-23-device";
4
5
  export class Grid extends LitElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ this._isMobile = false;
9
+ }
10
+ connectedCallback() {
11
+ super.connectedCallback();
12
+ this._isMobile = detectMobileDevice();
13
+ console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
14
+ // Apply mobile class immediately
15
+ if (this._isMobile) {
16
+ this.classList.add("mobile");
17
+ console.log(`[ds-grid] Mobile class added`);
18
+ }
19
+ // Calculate mobile grid dimensions to fit screen
20
+ if (this._isMobile && typeof window !== "undefined") {
21
+ const screenWidth = window.innerWidth;
22
+ const columns = 14;
23
+ const gap = 0.5;
24
+ // Calculate column size accounting for gaps between columns
25
+ // Total width = (columns * columnSize) + ((columns - 1) * gap)
26
+ // Therefore: columnSize = (screenWidth - ((columns - 1) * gap)) / columns
27
+ const totalGapWidth = (columns - 1) * gap;
28
+ const columnSize = (screenWidth - totalGapWidth) / columns;
29
+ console.log(`[ds-grid] Mobile grid: ${columns} columns × ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`);
30
+ // Set custom property for this grid instance
31
+ this.style.setProperty("--mobile-column-size", `${columnSize}px`);
32
+ this.style.setProperty("--mobile-gap", `${gap}px`);
33
+ }
34
+ }
35
+ updated() {
36
+ // Apply mobile class if detected as mobile device
37
+ if (this._isMobile) {
38
+ this.classList.add("mobile");
39
+ }
40
+ else {
41
+ this.classList.remove("mobile");
42
+ }
43
+ }
5
44
  render() {
6
45
  return html ``;
7
46
  }
8
47
  }
9
48
  Grid.properties = {
10
49
  align: { type: String },
50
+ _isMobile: { type: Boolean, state: true },
11
51
  };
12
52
  Grid.styles = css `
13
53
  :host {
@@ -19,11 +59,13 @@ Grid.styles = css `
19
59
  grid-template-columns: repeat(auto-fill, 19px);
20
60
  grid-template-rows: repeat(auto-fill, 19px);
21
61
  gap: 1px;
22
- row-rule: 1px solid
23
- light-dark(rgba(0, 0, 0, 0.03), rgba(215, 215, 215, 0.022));
24
- column-rule: 1px solid
25
- light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
26
- outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
62
+ row-rule: calc(1px * var(--scaling-factor)) solid
63
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
64
+ column-rule: calc(1px * var(--scaling-factor)) solid
65
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
66
+ outline:
67
+ 1px solid light-dark(rgb(147, 147, 147)),
68
+ rgb(147, 147, 147);
27
69
  position: fixed;
28
70
  top: 0;
29
71
  left: 50%;
@@ -32,15 +74,23 @@ Grid.styles = css `
32
74
  z-index: 300;
33
75
  }
34
76
 
35
- /* Mobile styles - 15 columns with smaller gap */
36
- @media (max-width: 768px) {
37
- :host {
38
- width: 100%;
39
- max-width: 375px;
40
- grid-template-columns: repeat(15, 1fr);
41
- grid-template-rows: repeat(auto-fill, 20px);
42
- gap: 0.5px;
43
- }
77
+ /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
78
+ :host(.mobile) {
79
+ outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
80
+ width: calc(100% - calc(1px * var(--scaling-factor)));
81
+ max-width: 100vw;
82
+ margin-left: 0 !important;
83
+ margin-top: 0 !important;
84
+ box-sizing: border-box;
85
+ position: fixed;
86
+ top: calc(0.5px * var(--scaling-factor));
87
+ left: 50%;
88
+ transform: translateX(-50%);
89
+ pointer-events: none;
90
+ z-index: 300;
91
+ gap: calc(1px * var(--scaling-factor));
92
+ grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
93
+ grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
44
94
  }
45
95
 
46
96
  :host([align="left"]) {
package/dist/ds-one.bundle.js CHANGED
@@ -34,9 +34,16 @@ function getDeviceInfo() {
34
34
  }
35
35
  function initDeviceDetection() {
36
36
  const deviceInfo = getDeviceInfo();
37
- if (deviceInfo.isMobile) {
38
- console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
37
+ if (deviceInfo.isMobile && typeof document !== "undefined") {
38
+ const designWidth = 280;
39
+ const actualWidth = deviceInfo.screenWidth;
40
+ const scalingFactor = actualWidth / designWidth;
41
+ document.documentElement.style.setProperty("--scaling-factor-mobile", scalingFactor.toFixed(3));
42
+ console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
39
43
  } else {
44
+ if (typeof document !== "undefined") {
45
+ document.documentElement.style.setProperty("--scaling-factor-mobile", "1");
46
+ }
40
47
  console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
41
48
  }
42
49
  if (typeof window !== "undefined" && window.DS_ONE_DEBUG) {
@@ -60,6 +67,13 @@ if (typeof window !== "undefined") {
60
67
  } else {
61
68
  initDeviceDetection();
62
69
  }
70
+ let resizeTimeout;
71
+ window.addEventListener("resize", () => {
72
+ clearTimeout(resizeTimeout);
73
+ resizeTimeout = setTimeout(() => {
74
+ initDeviceDetection();
75
+ }, 100);
76
+ });
63
77
  }
64
78
 
65
79
  // dist/utils/cdn-loader.js
@@ -4718,12 +4732,43 @@ customElements.define("ds-table", DsTable);
4718
4732
 
4719
4733
  // dist/4-page/ds-grid.js
4720
4734
  var Grid = class extends i4 {
4735
+ constructor() {
4736
+ super(...arguments);
4737
+ this._isMobile = false;
4738
+ }
4739
+ connectedCallback() {
4740
+ super.connectedCallback();
4741
+ this._isMobile = detectMobileDevice();
4742
+ console.log(`[ds-grid] Mobile device: ${this._isMobile}`);
4743
+ if (this._isMobile) {
4744
+ this.classList.add("mobile");
4745
+ console.log(`[ds-grid] Mobile class added`);
4746
+ }
4747
+ if (this._isMobile && typeof window !== "undefined") {
4748
+ const screenWidth = window.innerWidth;
4749
+ const columns = 14;
4750
+ const gap = 0.5;
4751
+ const totalGapWidth = (columns - 1) * gap;
4752
+ const columnSize = (screenWidth - totalGapWidth) / columns;
4753
+ console.log(`[ds-grid] Mobile grid: ${columns} columns \xD7 ${columnSize.toFixed(2)}px + ${totalGapWidth}px gaps = ${screenWidth}px`);
4754
+ this.style.setProperty("--mobile-column-size", `${columnSize}px`);
4755
+ this.style.setProperty("--mobile-gap", `${gap}px`);
4756
+ }
4757
+ }
4758
+ updated() {
4759
+ if (this._isMobile) {
4760
+ this.classList.add("mobile");
4761
+ } else {
4762
+ this.classList.remove("mobile");
4763
+ }
4764
+ }
4721
4765
  render() {
4722
4766
  return x``;
4723
4767
  }
4724
4768
  };
4725
4769
  Grid.properties = {
4726
- align: { type: String }
4770
+ align: { type: String },
4771
+ _isMobile: { type: Boolean, state: true }
4727
4772
  };
4728
4773
  Grid.styles = i`
4729
4774
  :host {
@@ -4735,11 +4780,13 @@ Grid.styles = i`
4735
4780
  grid-template-columns: repeat(auto-fill, 19px);
4736
4781
  grid-template-rows: repeat(auto-fill, 19px);
4737
4782
  gap: 1px;
4738
- row-rule: 1px solid
4739
- light-dark(rgba(0, 0, 0, 0.03), rgba(215, 215, 215, 0.022));
4740
- column-rule: 1px solid
4741
- light-dark(rgba(0, 0, 0, 0.03), rgba(238, 238, 238, 0.022));
4742
- outline: 1px solid light-dark(rgba(0, 0, 0, 0.15), #100101e7);
4783
+ row-rule: calc(1px * var(--scaling-factor)) solid
4784
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
4785
+ column-rule: calc(1px * var(--scaling-factor)) solid
4786
+ light-dark(rgb(147, 147, 147), rgb(147, 147, 147));
4787
+ outline:
4788
+ 1px solid light-dark(rgb(147, 147, 147)),
4789
+ rgb(147, 147, 147);
4743
4790
  position: fixed;
4744
4791
  top: 0;
4745
4792
  left: 50%;
@@ -4748,15 +4795,23 @@ Grid.styles = i`
4748
4795
  z-index: 300;
4749
4796
  }
4750
4797
 
4751
- /* Mobile styles - 15 columns with smaller gap */
4752
- @media (max-width: 768px) {
4753
- :host {
4754
- width: 100%;
4755
- max-width: 375px;
4756
- grid-template-columns: repeat(15, 1fr);
4757
- grid-template-rows: repeat(auto-fill, 20px);
4758
- gap: 0.5px;
4759
- }
4798
+ /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
4799
+ :host(.mobile) {
4800
+ outline: calc(2px * var(--scaling-factor)) solid rgba(251, 255, 0, 0.9);
4801
+ width: calc(100% - calc(1px * var(--scaling-factor)));
4802
+ max-width: 100vw;
4803
+ margin-left: 0 !important;
4804
+ margin-top: 0 !important;
4805
+ box-sizing: border-box;
4806
+ position: fixed;
4807
+ top: calc(0.5px * var(--scaling-factor));
4808
+ left: 50%;
4809
+ transform: translateX(-50%);
4810
+ pointer-events: none;
4811
+ z-index: 300;
4812
+ gap: calc(1px * var(--scaling-factor));
4813
+ grid-template-columns: repeat(14, calc(19px * var(--scaling-factor)));
4814
+ grid-template-rows: repeat(auto-fill, calc(19px * var(--scaling-factor)));
4760
4815
  }
4761
4816
 
4762
4817
  :host([align="left"]) {