ds-one 0.1.11-alpha.6 → 0.1.11-alpha.9

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

@@ -1,4 +1,120 @@
 // 2025-04-23-device.ts
 // Device detection and context utilities
 
-// TODO: Implement device detection utilities 
+export type DeviceType = "mobile" | "tablet" | "desktop";
+
+export interface DeviceInfo {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+  isTouchCapable: boolean;
+  deviceType: DeviceType;
+  userAgent: string;
+  screenWidth: number;
+  screenHeight: number;
+}
+
+/**
+ * Comprehensive mobile device detection
+ * Combines user agent detection, touch capability, and viewport size
+ */
+export function detectMobileDevice(): boolean {
+  if (typeof navigator === "undefined" || typeof window === "undefined") {
+    return false;
+  }
+
+  const nav = navigator as any;
+  const win = window as any;
+  const ua: string =
+    (nav && (nav.userAgent || nav.vendor)) || (win && win.opera) || "";
+
+  // User agent based detection
+  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
+    );
+
+  // Touch capability detection
+  const touchPoints = (nav && nav.maxTouchPoints) || 0;
+  const isTouchCapable = touchPoints > 1;
+
+  // Viewport detection
+  const narrowViewport = win
+    ? Math.min(win.innerWidth || 0, win.innerHeight || 0) <= 820
+    : false;
+
+  return uaMatchesMobile || (isTouchCapable && narrowViewport);
+}
+
+/**
+ * Get detailed device information
+ */
+export function getDeviceInfo(): DeviceInfo {
+  const isMobile = detectMobileDevice();
+  const nav = navigator as any;
+  const win = window as any;
+
+  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,
+  };
+}
+
+/**
+ * Initialize device detection and log to console
+ */
+export function initDeviceDetection(): DeviceInfo {
+  const deviceInfo = getDeviceInfo();
+
+  // Log device detection results
+  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})`
+    );
+  }
+
+  // Log additional details in development mode
+  if (typeof window !== "undefined" && (window as any).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;
+}
+
+// Auto-initialize when module loads
+if (typeof window !== "undefined") {
+  // Wait for DOM to be ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      initDeviceDetection();
+    });
+  } else {
+    // DOM is already ready
+    initDeviceDetection();
+  }
+}

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.1.11-alpha.5 */
+/* version 0.1.11-alpha.8 */
 
 input {
   padding: 0;

package/DS1/index.ts

@@ -1,6 +1,9 @@
 // DS one - Main entry point for all components
 // Export all components for easy importing
 
+// Initialize device detection (will auto-detect and log on load)
+import "./0-face/2025-04-23-device";
+
 // Initialize CDN loader (will auto-load external translations if available)
 import "./utils/cdn-loader";
 
@@ -42,3 +45,6 @@ export * from "./utils/viewMode";
 export * from "./utils/settings";
 export * from "./utils/pricing";
 export * from "./utils/scroll";
+
+// Device detection
+export * from "./0-face/2025-04-23-device";

package/DS1/utils/cdn-loader.ts

@@ -124,13 +124,16 @@ async function fetchTranslationFile(
   source: string
 ): Promise<TranslationMap | null> {
   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(
@@ -145,12 +148,14 @@ async function fetchTranslationFile(
       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;
     }
 

package/DS1/utils/keys.json

@@ -1 +1,41 @@
-{}
+{
+  "en": {
+    "language": "Language",
+    "theme": "Theme",
+    "home": "Home",
+    "about": "About",
+    "contact": "Contact",
+    "welcome": "Welcome",
+    "description": "Description",
+    "learnMore": "Learn More",
+    "copyright": "© 2025",
+    "siteTitle": "Site Title",
+    "downloadCV": "Download CV"
+  },
+  "da": {
+    "language": "Sprog",
+    "theme": "Tema",
+    "home": "Hjem",
+    "about": "Om",
+    "contact": "Kontakt",
+    "welcome": "Velkommen",
+    "description": "Beskrivelse",
+    "learnMore": "Lær Mere",
+    "copyright": "© 2025",
+    "siteTitle": "Site Titel",
+    "downloadCV": "Download CV"
+  },
+  "ja": {
+    "language": "言語",
+    "theme": "テーマ",
+    "home": "ホーム",
+    "about": "について",
+    "contact": "お問い合わせ",
+    "welcome": "ようこそ",
+    "description": "説明",
+    "learnMore": "詳細を見る",
+    "copyright": "© 2025",
+    "siteTitle": "サイトタイトル",
+    "downloadCV": "CVをダウンロード"
+  }
+}

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.6`. Use `@alpha` tag to install.
+**Note**: Currently published as alpha version `0.1.11-alpha.9`. Use `@alpha` tag to install.
 
 ### Basic Usage
 

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

@@ -1 +1,25 @@
+export type DeviceType = "mobile" | "tablet" | "desktop";
+export interface DeviceInfo {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isTouchCapable: boolean;
+    deviceType: DeviceType;
+    userAgent: string;
+    screenWidth: number;
+    screenHeight: number;
+}
+/**
+ * Comprehensive mobile device detection
+ * Combines user agent detection, touch capability, and viewport size
+ */
+export declare function detectMobileDevice(): boolean;
+/**
+ * Get detailed device information
+ */
+export declare function getDeviceInfo(): DeviceInfo;
+/**
+ * Initialize device detection and log to console
+ */
+export declare function initDeviceDetection(): DeviceInfo;
 //# sourceMappingURL=2025-04-23-device.d.ts.map

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":""}
+{"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"}

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

@@ -1,3 +1,86 @@
 // 2025-04-23-device.ts
 // Device detection and context utilities
-// TODO: Implement device detection utilities 
+/**
+ * Comprehensive mobile device detection
+ * Combines user agent detection, touch capability, and viewport size
+ */
+export 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) || "";
+    // User agent based detection
+    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);
+    // Touch capability detection
+    const touchPoints = (nav && nav.maxTouchPoints) || 0;
+    const isTouchCapable = touchPoints > 1;
+    // Viewport detection
+    const narrowViewport = win
+        ? Math.min(win.innerWidth || 0, win.innerHeight || 0) <= 820
+        : false;
+    return uaMatchesMobile || (isTouchCapable && narrowViewport);
+}
+/**
+ * Get detailed device information
+ */
+export 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,
+    };
+}
+/**
+ * Initialize device detection and log to console
+ */
+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})`);
+    }
+    else {
+        console.log(`[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`);
+    }
+    // Log additional details in development mode
+    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;
+}
+// Auto-initialize when module loads
+if (typeof window !== "undefined") {
+    // Wait for DOM to be ready
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
+            initDeviceDetection();
+        });
+    }
+    else {
+        // DOM is already ready
+        initDeviceDetection();
+    }
+}

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 = [
@@ -4969,9 +5078,11 @@ export {
   clearScrollPosition,
   currentLanguage,
   currentTheme,
+  detectMobileDevice,
   getAvailableLanguages,
   getAvailableLanguagesSync,
   getBrowserLanguage,
+  getDeviceInfo,
   getLanguageDisplayName,
   getNotionText,
   getPriceLabel,
@@ -4979,6 +5090,7 @@ export {
   getText,
   getViewMode,
   hasTranslation,
+  initDeviceDetection,
   initScrollManagement,
   loadTranslations,
   restoreScrollPosition,