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

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

@@ -1,4 +1,138 @@
 // 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();
+
+  // 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
+  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,3 +1,5 @@
+/* version 0.1.11-alpha.8 */
+
 input {
   padding: 0;
 }
@@ -32,9 +34,10 @@ input {
   --ds1-docs-search-bg: light-dark(#f0f0f0, #171717);
   --ds1-docs-divider: light-dark(#e0e0e0, #000000);
 
-  /* ezo-type */
+  /* typefaces */
   --typeface: "GT-America-Standard-Regular";
   --typeface-medium: "GT-America-Standard-Medium";
+  --typeface-compressed: "GT-America-Compressed-Regular";
   --typeface-japanese: "Noto Sans JP";
   --typeface-mono: "Iosevka";
   --type-size-default: calc(14px * var(--scaling-factor));
@@ -54,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 */
@@ -149,6 +152,17 @@ html {
   font-display: swap;
 }
 
+@font-face {
+  font-family: GT-America-Compressed-Regular;
+  src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
+  font-display: swap;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
 .matrix__board {
   position: relative;
   top: calc(21.5px * var(--scaling-factor));

package/DS1/2-core/{text-v1.ts → ds-text.ts}

@@ -4,7 +4,7 @@ import { getText } from "../utils/language";
 /**
  * A component for displaying text from translations
  *
- * @element text-v1
+ * @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)
@@ -35,7 +35,7 @@ export class Text extends LitElement {
     // Create bound event handlers for proper cleanup
     this.boundHandlers = {
       languageChanged: (() => {
-        console.log("Language changed event received in text-v1");
+        console.log("Language changed event received in ds-text");
         this._loadText();
       }) as EventListener,
     };
@@ -112,10 +112,10 @@ export class Text extends LitElement {
   }
 }
 
-customElements.define("text-v1", Text);
+customElements.define("ds-text", Text);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "text-v1": Text;
+    "ds-text": Text;
   }
 }

package/DS1/2-core/home-v1.ts

@@ -86,7 +86,7 @@ export class Home extends LitElement {
     }
 
     /* 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%;
@@ -152,7 +152,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>
     `;
   }

package/DS1/3-unit/doublenav-v1.ts

@@ -80,14 +80,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/DS1/3-unit/singlenav-v1.ts

@@ -47,7 +47,7 @@ export class SingleNav extends LitElement {
 
     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/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,26 +14,61 @@ 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 {
       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);
       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);
-      position: absolute;
+      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%;
       transform: translateX(-50%);
@@ -40,6 +76,25 @@ export class Grid extends LitElement {
       z-index: 300;
     }
 
+    /* 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"]) {
       left: 0;
       transform: none;
@@ -51,11 +106,21 @@ export class Grid extends LitElement {
     }
 
     :host([align="right"]) {
-      left: 100%;
-      transform: translateX(-100%);
+      left: auto;
+      right: 0;
+      transform: none;
     }
   `;
 
+  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/DS1/4-page/ds-layout.ts

@@ -39,7 +39,7 @@ export class Layout extends LitElement {
         ". 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;
@@ -75,10 +75,6 @@ export class Layout extends LitElement {
       justify-self: end;
     }
 
-    :host([mode="debug"]) {
-      background-color: rgba(200, 114, 114, 0.1);
-    }
-
     .debug-overlay {
       position: absolute;
       margin-left: -1px;
@@ -127,7 +123,6 @@ export class Layout extends LitElement {
       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;
@@ -135,53 +130,39 @@ export class Layout extends LitElement {
 
     .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/DS1/index.ts

@@ -1,12 +1,15 @@
 // 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";
 
 // Core components
 export * from "./2-core/ds-button";
-export * from "./2-core/text-v1";
+export * from "./2-core/ds-text";
 export * from "./2-core/icon-v1";
 export * from "./2-core/link-v1";
 export * from "./2-core/cycle-v1";
@@ -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

@@ -6,7 +6,7 @@ Build modern UIs with web components!
 
 [![npm version](https://badge.fury.io/js/ds-one.svg)](https://badge.fury.io/js/ds-one)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Version](https://img.shields.io/badge/version-0.1.11--alpha.0-orange.svg)](https://github.com/Jo4712/ds-one)
+[![Version](https://img.shields.io/badge/version-0.1.11--alpha.1-orange.svg)](https://github.com/Jo4712/ds-one)
 
 **DS one** is a modern design system that provides a comprehensive set of reusable UI components built with Web Components. Think "Material Design meets Web Standards"—a simple, accessible component library that works with any framework or vanilla JavaScript.
 
@@ -27,7 +27,7 @@ npm install ds-one@alpha
 yarn add ds-one@alpha
 ```
 
-**Note**: Currently published as alpha version `0.1.11-alpha.0`. Use `@alpha` tag to install.
+**Note**: Currently published as alpha version `0.1.11-alpha.11`. Use `@alpha` tag to install.
 
 ### Basic Usage
 
@@ -45,12 +45,12 @@ yarn add ds-one@alpha
     ></script>
     <script
       type="module"
-      src="node_modules/design-system-one/2 Core/text-v1.ts"
+      src="node_modules/design-system-one/2 Core/ds-text.ts"
     ></script>
   </head>
   <body>
     <ds-button variant="primary" key="welcomeButton">Get Started</ds-button>
-    <text-v1 variant="heading" key="mainHeading">Welcome to DS one</text-v1>
+    <ds-text variant="heading" key="mainHeading">Welcome to DS one</ds-text>
   </body>
 </html>
 ```
@@ -96,7 +96,7 @@ Try DS one in your browser: **[dsone.dev](https://dsone.dev)** (documentation sl
 
 ### Completed Features
 
-- ✅ Core component library (ds-button, text-v1, icon-v1, etc.)
+- ✅ Core component library (ds-button, ds-text, icon-v1, etc.)
 - ✅ Theming system with accent color support
 - ✅ Internationalization with language keys
 - ✅ Responsive design with mobile scaling

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,CA8ChD"}