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

package/dist/2-core/ds-text.js

@@ -0,0 +1,83 @@
+import { LitElement, html, css } from "lit";
+import { getText } from "../utils/language";
+/**
+ * A component for displaying text from translations
+ *
+ * @element ds-text
+ * @prop {string} key - The translation key to use
+ * @prop {string} defaultValue - Default value if translation is not found
+ * @prop {string} fallback - Optional fallback text if translation is not found (deprecated, use defaultValue)
+ */
+export class Text extends LitElement {
+    static get properties() {
+        return {
+            key: { type: String, reflect: true },
+            defaultValue: { type: String, reflect: true, attribute: "default-value" },
+            fallback: { type: String, reflect: true }, // Kept for backward compatibility
+            _text: { type: String, state: true },
+        };
+    }
+    constructor() {
+        super();
+        this.key = "";
+        this.defaultValue = "";
+        this.fallback = "";
+        this._text = "";
+        // Create bound event handlers for proper cleanup
+        this.boundHandlers = {
+            languageChanged: (() => {
+                console.log("Language changed event received in ds-text");
+                this._loadText();
+            }),
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._loadText();
+        // Listen for language changes
+        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+        // Also listen for translations loaded event
+        window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
+        // Listen for language changes via events instead of signals
+        // The currentLanguage signal changes will trigger the language-changed event
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
+        window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("key") || changedProperties.has("defaultValue")) {
+            this._loadText();
+        }
+    }
+    _loadText() {
+        if (!this.key) {
+            this._text = this.defaultValue || this.fallback || "";
+            return;
+        }
+        try {
+            const text = getText(this.key);
+            this._text = text || this.defaultValue || this.fallback || this.key;
+        }
+        catch (error) {
+            console.error("Error loading text for key:", this.key, error);
+            this._text = this.defaultValue || this.fallback || this.key;
+        }
+        this.requestUpdate();
+    }
+    render() {
+        return html `<span>${this._text || this.defaultValue || this.key}</span>`;
+    }
+}
+Text.styles = css `
+    :host {
+      display: inline;
+    }
+
+    .loading {
+      opacity: 0.6;
+    }
+  `;
+customElements.define("ds-text", Text);

package/dist/2-core/home-v1.js

@@ -63,7 +63,7 @@ export class Home extends LitElement {
         @click="${this._navigateHome}"
         @keydown="${this._onKeyDown}"
       >
-        <text-v1 key="home"></text-v1>
+        <ds-text key="home"></ds-text>
       </div>
     `;
     }
@@ -107,7 +107,7 @@ Home.styles = css `
     }
 
     /* Inner text spacing without affecting the 80px outer width */
-    .home > text-v1 {
+    .home > ds-text {
       padding: 0 calc(var(--1) * 0.15 * var(--scaling-factor));
       box-sizing: border-box;
       height: 100%;

package/dist/3-unit/doublenav-v1.js

@@ -33,14 +33,14 @@ export class DoubleNav extends LitElement {
             ? html `
             <a href="${this.previous}" class="nav-previous">
               <icon-v1 type="left"></icon-v1>
-              <text-v1>${this.previousText || "Previous"}</text-v1>
+              <ds-text>${this.previousText || "Previous"}</ds-text>
             </a>
           `
             : html `<div></div>`}
       ${this.next
             ? html `
             <a href="${this.next}" class="nav-next">
-              <text-v1>${this.nextText || "Next"}</text-v1>
+              <ds-text>${this.nextText || "Next"}</ds-text>
               <icon-v1 type="right"></icon-v1>
             </a>
           `

package/dist/3-unit/singlenav-v1.js

@@ -22,7 +22,7 @@ export class SingleNav extends LitElement {
         const href = this.to || navConfig.href;
         return html `
       <a href="${href}">
-        <text-v1 key="${navConfig.key}"></text-v1>
+        <ds-text key="${navConfig.key}"></ds-text>
         <icon-v1 type="right"></icon-v1>
       </a>
     `;

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,0BAqCX;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;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"}

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

@@ -14,7 +14,7 @@ Grid.styles = css `
       margin-top: 0.5px !important;
       margin-left: 0.5px !important;
       display: grid;
-      width: 100%;
+      width: 1440px;
       height: 100%;
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
@@ -24,7 +24,7 @@ Grid.styles = css `
       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);
-      position: absolute;
+      position: fixed;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
@@ -32,6 +32,17 @@ 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;
+      }
+    }
+
     :host([align="left"]) {
       left: 0;
       transform: none;
@@ -43,8 +54,9 @@ Grid.styles = css `
     }
 
     :host([align="right"]) {
-      left: 100%;
-      transform: translateX(-100%);
+      left: auto;
+      right: 0;
+      transform: none;
     }
   `;
 customElements.define("ds-grid", Grid);

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

@@ -1 +1 @@
-{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.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,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,MAAM,0BAmKX;IAEF,MAAM;CA6BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.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,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,MAAM,0BAgJX;IAEF,MAAM;CA6BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -54,7 +54,7 @@ Layout.styles = css `
         ". footer ."
         ". . .";
       min-height: 600px;
-      background-color: rgba(235, 231, 231, 0.44);
+      background-color: rgba(165, 165, 165, 0.03);
       position: relative;
       width: 100%;
       max-width: 640px;
@@ -90,10 +90,6 @@ Layout.styles = css `
       justify-self: end;
     }
 
-    :host([mode="debug"]) {
-      background-color: rgba(200, 114, 114, 0.1);
-    }
-
     .debug-overlay {
       position: absolute;
       margin-left: -1px;
@@ -142,7 +138,6 @@ Layout.styles = css `
       font-size: 10px;
       font-weight: var(--type-weight-default);
       font-family: var(--typeface);
-      background-color: var(--slate);
       color: var(--black);
       border: 1px solid red;
       opacity: 1;
@@ -150,53 +145,39 @@ Layout.styles = css `
 
     .debug-square {
       grid-area: square;
-      background-color: rgba(255, 0, 0, 0.2);
     }
 
     .debug-title {
       grid-area: title;
-      background-color: rgba(0, 255, 0, 0.2);
     }
 
     .debug-header {
       grid-area: header;
-      background-color: rgba(0, 0, 255, 0.2);
       border-color: #0000ff;
     }
 
     .debug-projects {
       grid-area: projects;
-      background-color: rgba(255, 255, 0, 0.2);
       border-color: #ffff00;
     }
 
     .debug-bio {
       grid-area: bio;
-      background-color: rgba(255, 0, 255, 0.2);
       border-color: #ff00ff;
     }
 
     .debug-nav {
       grid-area: nav;
-      background-color: rgba(0, 255, 255, 0.2);
       border-color: #00ffff;
     }
 
     .debug-footer {
       grid-area: footer;
-      background-color: rgba(255, 165, 0, 0.2);
       border-color: #ffa500;
     }
 
-    .debug-header {
-      grid-area: header;
-      background-color: rgba(0, 0, 255, 0.2);
-      border-color: #0000ff;
-    }
-
     .debug-content {
       grid-area: content;
-      background-color: rgba(21, 169, 21, 0.57);
       border-color: rgba(71, 231, 71, 0.63);
     }
   `;

package/dist/ds-one.bundle.js

@@ -1,3 +1,67 @@
+// dist/0-face/2025-04-23-device.js
+function detectMobileDevice() {
+  if (typeof navigator === "undefined" || typeof window === "undefined") {
+    return false;
+  }
+  const nav = navigator;
+  const win = window;
+  const ua = nav && (nav.userAgent || nav.vendor) || win && win.opera || "";
+  const uaMatchesMobile = /Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(ua);
+  const touchPoints = nav && nav.maxTouchPoints || 0;
+  const isTouchCapable = touchPoints > 1;
+  const narrowViewport = win ? Math.min(win.innerWidth || 0, win.innerHeight || 0) <= 820 : false;
+  return uaMatchesMobile || isTouchCapable && narrowViewport;
+}
+function getDeviceInfo() {
+  const isMobile = detectMobileDevice();
+  const nav = navigator;
+  const win = window;
+  const touchPoints = nav && nav.maxTouchPoints || 0;
+  const isTouchCapable = touchPoints > 1;
+  const screenWidth = win?.innerWidth || 0;
+  const screenHeight = win?.innerHeight || 0;
+  const isTablet = isMobile && Math.min(screenWidth, screenHeight) >= 600;
+  return {
+    isMobile,
+    isTablet,
+    isDesktop: !isMobile,
+    isTouchCapable,
+    deviceType: isMobile ? isTablet ? "tablet" : "mobile" : "desktop",
+    userAgent: nav && (nav.userAgent || nav.vendor) || "",
+    screenWidth,
+    screenHeight
+  };
+}
+function initDeviceDetection() {
+  const deviceInfo = getDeviceInfo();
+  if (deviceInfo.isMobile) {
+    console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
+  } else {
+    console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
+  }
+  if (typeof window !== "undefined" && window.DS_ONE_DEBUG) {
+    console.log("[DS one] Device Info:", {
+      type: deviceInfo.deviceType,
+      isMobile: deviceInfo.isMobile,
+      isTablet: deviceInfo.isTablet,
+      isDesktop: deviceInfo.isDesktop,
+      isTouchCapable: deviceInfo.isTouchCapable,
+      viewport: `${deviceInfo.screenWidth}x${deviceInfo.screenHeight}`,
+      userAgent: deviceInfo.userAgent
+    });
+  }
+  return deviceInfo;
+}
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      initDeviceDetection();
+    });
+  } else {
+    initDeviceDetection();
+  }
+}
+
 // dist/utils/cdn-loader.js
 var loadAttempted = false;
 var DEFAULT_TRANSLATION_FILES = [
@@ -69,11 +133,14 @@ function validateTranslationMap(candidate) {
 }
 async function fetchTranslationFile(source) {
   try {
+    console.log(`[DS one] Attempting to fetch translations from: ${source}`);
     const response = await fetch(source);
     if (!response.ok) {
+      console.log(`[DS one] Failed to fetch ${source} (${response.status})`);
       return null;
     }
     const translations = await response.json();
+    console.log(`[DS one] Successfully fetched JSON from ${source}`);
     if (!validateTranslationMap(translations)) {
       console.warn(`[DS one] Invalid translation format in ${source}. Expected object with language codes as keys.`);
       return null;
@@ -83,9 +150,11 @@ async function fetchTranslationFile(source) {
       console.warn(`[DS one] No languages found in ${source}`);
       return null;
     }
+    console.log(`[DS one] Valid translations found: ${languages.join(", ")}`);
     return translations;
   } catch (error) {
     if (error instanceof TypeError && error.message.includes("Failed to fetch")) {
+      console.log(`[DS one] Network error fetching ${source}`);
       return null;
     }
     console.error(`[DS one] Error loading external translations from ${source}:`, error);
@@ -681,7 +750,47 @@ o4?.({ LitElement: i4 });
 (s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.1");
 
 // dist/utils/keys.json
-var keys_default = {};
+var keys_default = {
+  en: {
+    language: "Language",
+    theme: "Theme",
+    home: "Home",
+    about: "About",
+    contact: "Contact",
+    welcome: "Welcome",
+    description: "Description",
+    learnMore: "Learn More",
+    copyright: "\xA9 2025",
+    siteTitle: "Site Title",
+    downloadCV: "Download CV"
+  },
+  da: {
+    language: "Sprog",
+    theme: "Tema",
+    home: "Hjem",
+    about: "Om",
+    contact: "Kontakt",
+    welcome: "Velkommen",
+    description: "Beskrivelse",
+    learnMore: "L\xE6r Mere",
+    copyright: "\xA9 2025",
+    siteTitle: "Site Titel",
+    downloadCV: "Download CV"
+  },
+  ja: {
+    language: "\u8A00\u8A9E",
+    theme: "\u30C6\u30FC\u30DE",
+    home: "\u30DB\u30FC\u30E0",
+    about: "\u306B\u3064\u3044\u3066",
+    contact: "\u304A\u554F\u3044\u5408\u308F\u305B",
+    welcome: "\u3088\u3046\u3053\u305D",
+    description: "\u8AAC\u660E",
+    learnMore: "\u8A73\u7D30\u3092\u898B\u308B",
+    copyright: "\xA9 2025",
+    siteTitle: "\u30B5\u30A4\u30C8\u30BF\u30A4\u30C8\u30EB",
+    downloadCV: "CV\u3092\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9"
+  }
+};
 
 // dist/utils/language.js
 var LANGUAGE_PRIORITY_ORDER = [
@@ -1169,7 +1278,7 @@ Button.styles = i`
   `;
 customElements.define("ds-button", Button);
 
-// dist/2-core/text-v1.js
+// dist/2-core/ds-text.js
 var Text = class extends i4 {
   static get properties() {
     return {
@@ -1188,7 +1297,7 @@ var Text = class extends i4 {
     this._text = "";
     this.boundHandlers = {
       languageChanged: (() => {
-        console.log("Language changed event received in text-v1");
+        console.log("Language changed event received in ds-text");
         this._loadText();
       })
     };
@@ -1237,7 +1346,7 @@ Text.styles = i`
       opacity: 0.6;
     }
   `;
-customElements.define("text-v1", Text);
+customElements.define("ds-text", Text);
 
 // node_modules/lit-html/directive.js
 var t3 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
@@ -3283,7 +3392,7 @@ var Home = class extends i4 {
         @click="${this._navigateHome}"
         @keydown="${this._onKeyDown}"
       >
-        <text-v1 key="home"></text-v1>
+        <ds-text key="home"></ds-text>
       </div>
     `;
   }
@@ -3328,7 +3437,7 @@ Home.styles = i`
     }
 
     /* Inner text spacing without affecting the 80px outer width */
-    .home > text-v1 {
+    .home > ds-text {
       padding: 0 calc(var(--1) * 0.15 * var(--scaling-factor));
       box-sizing: border-box;
       height: 100%;
@@ -4370,7 +4479,7 @@ var SingleNav = class extends i4 {
     const href = this.to || navConfig.href;
     return x`
       <a href="${href}">
-        <text-v1 key="${navConfig.key}"></text-v1>
+        <ds-text key="${navConfig.key}"></ds-text>
         <icon-v1 type="right"></icon-v1>
       </a>
     `;
@@ -4433,12 +4542,12 @@ var DoubleNav = class extends i4 {
       ${this.previous ? x`
             <a href="${this.previous}" class="nav-previous">
               <icon-v1 type="left"></icon-v1>
-              <text-v1>${this.previousText || "Previous"}</text-v1>
+              <ds-text>${this.previousText || "Previous"}</ds-text>
             </a>
           ` : x`<div></div>`}
       ${this.next ? x`
             <a href="${this.next}" class="nav-next">
-              <text-v1>${this.nextText || "Next"}</text-v1>
+              <ds-text>${this.nextText || "Next"}</ds-text>
               <icon-v1 type="right"></icon-v1>
             </a>
           ` : x`<div></div>`}
@@ -4621,7 +4730,7 @@ Grid.styles = i`
       margin-top: 0.5px !important;
       margin-left: 0.5px !important;
       display: grid;
-      width: 100%;
+      width: 1440px;
       height: 100%;
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
@@ -4631,7 +4740,7 @@ Grid.styles = i`
       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);
-      position: absolute;
+      position: fixed;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
@@ -4639,6 +4748,17 @@ 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;
+      }
+    }
+
     :host([align="left"]) {
       left: 0;
       transform: none;
@@ -4650,8 +4770,9 @@ Grid.styles = i`
     }
 
     :host([align="right"]) {
-      left: 100%;
-      transform: translateX(-100%);
+      left: auto;
+      right: 0;
+      transform: none;
     }
   `;
 customElements.define("ds-grid", Grid);
@@ -4706,7 +4827,7 @@ Layout.styles = i`
         ". footer ."
         ". . .";
       min-height: 600px;
-      background-color: rgba(235, 231, 231, 0.44);
+      background-color: rgba(165, 165, 165, 0.03);
       position: relative;
       width: 100%;
       max-width: 640px;
@@ -4742,10 +4863,6 @@ Layout.styles = i`
       justify-self: end;
     }
 
-    :host([mode="debug"]) {
-      background-color: rgba(200, 114, 114, 0.1);
-    }
-
     .debug-overlay {
       position: absolute;
       margin-left: -1px;
@@ -4794,7 +4911,6 @@ Layout.styles = i`
       font-size: 10px;
       font-weight: var(--type-weight-default);
       font-family: var(--typeface);
-      background-color: var(--slate);
       color: var(--black);
       border: 1px solid red;
       opacity: 1;
@@ -4802,53 +4918,39 @@ Layout.styles = i`
 
     .debug-square {
       grid-area: square;
-      background-color: rgba(255, 0, 0, 0.2);
     }
 
     .debug-title {
       grid-area: title;
-      background-color: rgba(0, 255, 0, 0.2);
     }
 
     .debug-header {
       grid-area: header;
-      background-color: rgba(0, 0, 255, 0.2);
       border-color: #0000ff;
     }
 
     .debug-projects {
       grid-area: projects;
-      background-color: rgba(255, 255, 0, 0.2);
       border-color: #ffff00;
     }
 
     .debug-bio {
       grid-area: bio;
-      background-color: rgba(255, 0, 255, 0.2);
       border-color: #ff00ff;
     }
 
     .debug-nav {
       grid-area: nav;
-      background-color: rgba(0, 255, 255, 0.2);
       border-color: #00ffff;
     }
 
     .debug-footer {
       grid-area: footer;
-      background-color: rgba(255, 165, 0, 0.2);
       border-color: #ffa500;
     }
 
-    .debug-header {
-      grid-area: header;
-      background-color: rgba(0, 0, 255, 0.2);
-      border-color: #0000ff;
-    }
-
     .debug-content {
       grid-area: content;
-      background-color: rgba(21, 169, 21, 0.57);
       border-color: rgba(71, 231, 71, 0.63);
     }
   `;
@@ -4987,9 +5089,11 @@ export {
   clearScrollPosition,
   currentLanguage,
   currentTheme,
+  detectMobileDevice,
   getAvailableLanguages,
   getAvailableLanguagesSync,
   getBrowserLanguage,
+  getDeviceInfo,
   getLanguageDisplayName,
   getNotionText,
   getPriceLabel,
@@ -4997,6 +5101,7 @@ export {
   getText,
   getViewMode,
   hasTranslation,
+  initDeviceDetection,
   initScrollManagement,
   loadTranslations,
   restoreScrollPosition,