ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

package/DS1/0-face/device.ts

@@ -104,6 +104,10 @@ export function initDeviceDetection(): DeviceInfo {
       scalingFactor.toFixed(3)
     );
 
+    // Add .mobile class to html element for CSS targeting
+    document.documentElement.classList.add("mobile");
+    document.documentElement.classList.remove("desktop");
+
     console.log(
       `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`
     );
@@ -113,6 +117,10 @@ export function initDeviceDetection(): DeviceInfo {
       document.documentElement.style.setProperty("--sf", "1");
       // Also set --sf for backwards compatibility
       document.documentElement.style.setProperty("--sf", "1");
+
+      // Add .desktop class and remove .mobile class
+      document.documentElement.classList.add("desktop");
+      document.documentElement.classList.remove("mobile");
     }
     console.log(
       `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`
@@ -156,3 +164,133 @@ if (typeof window !== "undefined") {
     }, 100);
   });
 }
+
+/**
+ * Disable double-tap to zoom in the browser (app-like behavior)
+ * Prevents all zoom gestures including double-tap and pinch-to-zoom
+ */
+export function applike(): void {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return;
+  }
+
+  // Set viewport meta tag to prevent zoom - this is the most important step
+  let viewport = document.querySelector('meta[name="viewport"]');
+  if (!viewport) {
+    viewport = document.createElement("meta");
+    viewport.setAttribute("name", "viewport");
+    document.head.appendChild(viewport);
+  }
+  viewport.setAttribute(
+    "content",
+    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+  );
+
+  // Apply touch-action: pan-x pan-y globally to prevent zoom but allow panning
+  const style = document.createElement("style");
+  style.id = "ds-one-applike-style";
+  style.textContent = `
+    * {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+    html, body {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+  `;
+  // Remove existing style if present
+  const existingStyle = document.getElementById("ds-one-applike-style");
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+  document.head.appendChild(style);
+
+  // Track touch events to prevent double-tap zoom
+  let lastTouchEnd = 0;
+  let touchStartTime = 0;
+
+  const preventZoom = (event: TouchEvent | WheelEvent | Event) => {
+    // Prevent pinch zoom (two fingers)
+    if (event instanceof TouchEvent) {
+      if (event.touches.length > 1) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      const now = Date.now();
+
+      if (event.type === "touchstart") {
+        // If touchstart happens within 300ms of last touchend, it's likely a double-tap
+        if (now - lastTouchEnd < 300) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        touchStartTime = now;
+      } else if (event.type === "touchend") {
+        const touchDuration = now - touchStartTime;
+        // If this is a quick tap (< 300ms) and happened soon after previous touchend, prevent it
+        if (touchDuration < 300 && now - lastTouchEnd < 300) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        lastTouchEnd = now;
+      } else if (event.type === "touchmove") {
+        // Prevent any touchmove that might trigger zoom
+        if (event.touches.length > 1) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+    }
+
+    // Prevent wheel zoom with ctrl/cmd key (common on trackpads)
+    if (event instanceof WheelEvent && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+  };
+
+  // Use capture phase to catch events earlier
+  const options = { passive: false, capture: true };
+
+  // Prevent all zoom gestures - use capture phase
+  document.addEventListener("touchstart", preventZoom, options);
+  document.addEventListener("touchmove", preventZoom, options);
+  document.addEventListener("touchend", preventZoom, options);
+  document.addEventListener("touchcancel", preventZoom, options);
+
+  // Prevent wheel zoom
+  document.addEventListener("wheel", preventZoom, options);
+
+  // Prevent gesture events (iOS Safari) - use capture phase
+  document.addEventListener(
+    "gesturestart",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    options
+  );
+  document.addEventListener(
+    "gesturechange",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    options
+  );
+  document.addEventListener(
+    "gestureend",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    options
+  );
+}

package/DS1/0-face/i18n.ts

@@ -15,15 +15,15 @@ let translationKeys: TranslationMap = {};
 // Primary language list – prioritise the 10 requested languages when cycling
 const LANGUAGE_PRIORITY_ORDER = [
   "da",
-  "nb",
-  "sv",
-  "pt",
+  "de",
+  "en",
   "es",
-  "zh",
-  "ko",
+  "fr",
+  "it",
   "ja",
-  "en",
-  "de",
+  "pt",
+  "sv",
+  "zh",
 ] as const;
 
 const LANGUAGE_PRIORITY_LOOKUP = new Map<string, number>(
@@ -34,27 +34,27 @@ const LANGUAGE_PRIORITY_LOOKUP = new Map<string, number>(
 const FALLBACK_LANGUAGE_NAMES: Record<string, string> = {
   da: "Danish",
   "da-dk": "Danish",
-  nb: "Norwegian",
-  "nb-no": "Norwegian",
-  sv: "Swedish",
-  "sv-se": "Swedish",
   de: "German",
   "de-de": "German",
   en: "English",
   "en-us": "English",
-  pt: "Portuguese",
-  "pt-pt": "Portuguese",
-  "pt-br": "Portuguese (Brazil)",
   es: "Spanish",
   "es-es": "Spanish",
-  "es-mx": "Spanish (Mexico)",
-  zh: "Chinese",
-  "zh-hans": "Chinese (Simplified)",
-  "zh-hant": "Chinese (Traditional)",
+  fr: "French",
+  "fr-fr": "French",
+  it: "Italian",
+  "it-it": "Italian",
   ja: "Japanese",
   "ja-jp": "Japanese",
-  ko: "Korean",
-  "ko-kr": "Korean",
+  pt: "Portuguese",
+  "pt-pt": "Portuguese",
+  sv: "Swedish",
+  "sv-se": "Swedish",
+  zh: "Chinese",
+  "zh-cn": "Chinese",
+  "zh-tw": "Chinese",
+  "zh-hans": "Chinese",
+  "zh-hant": "Chinese",
 };
 
 const DISPLAY_NAME_CACHE = new Map<string, Intl.DisplayNames>();
@@ -263,9 +263,6 @@ function getTranslationData(): TranslationMap {
 // Cached translation data - use getter to always get fresh data
 let translationData = getTranslationData();
 
-type NotionCache = Map<string, string>;
-
-const notionStore = new Map<LanguageCode, NotionCache>();
 const defaultLanguage: LanguageCode = "en";
 
 function extractPrimarySubtag(code: LanguageCode): string {
@@ -409,33 +406,30 @@ export function getLanguageDisplayName(
 const BROWSER_LANGUAGE_PREFERENCES: Record<string, LanguageCode> = {
   da: "da",
   "da-dk": "da",
-  no: "nb",
-  nb: "nb",
-  "nb-no": "nb",
-  nn: "nn",
-  "nn-no": "nn",
-  sv: "sv",
-  "sv-se": "sv",
-  pt: "pt",
-  "pt-pt": "pt",
-  "pt-br": "pt",
+  de: "de",
+  "de-de": "de",
+  en: "en",
+  "en-us": "en",
+  "en-gb": "en",
   es: "es",
   "es-es": "es",
   "es-mx": "es",
+  fr: "fr",
+  "fr-fr": "fr",
+  it: "it",
+  "it-it": "it",
+  ja: "ja",
+  "ja-jp": "ja",
+  pt: "pt",
+  "pt-pt": "pt",
+  "pt-br": "pt",
+  sv: "sv",
+  "sv-se": "sv",
   zh: "zh",
   "zh-cn": "zh",
   "zh-hans": "zh",
   "zh-tw": "zh",
   "zh-hant": "zh",
-  ko: "ko",
-  "ko-kr": "ko",
-  ja: "ja",
-  "ja-jp": "ja",
-  en: "en",
-  "en-us": "en",
-  "en-gb": "en",
-  de: "de",
-  "de-de": "de",
 };
 
 function resolvePreferredLanguage(languageTag: string): LanguageCode | null {
@@ -532,7 +526,6 @@ if (typeof window !== "undefined") {
 
     // Dispatch that translations are loaded
     window.dispatchEvent(new CustomEvent("translations-loaded"));
-    (window as any).notionDataLoaded = true;
 
     // Dispatch language-changed to update all components
     const currentLang = currentLanguage.value;
@@ -551,7 +544,6 @@ if (typeof window !== "undefined") {
 setTimeout(() => {
   // Since we directly imported the data, just dispatch the events
   window.dispatchEvent(new CustomEvent("translations-loaded"));
-  (window as any).notionDataLoaded = true;
 
   // Also dispatch language-changed with the current language
   const currentLang = currentLanguage.value;
@@ -614,51 +606,6 @@ export function getText(key: string): string {
   return translate(key);
 }
 
-// Get text from translation data (async for compatibility)
-export async function getNotionText(
-  key: string,
-  language: LanguageCode = currentLanguage.value
-): Promise<string | null> {
-  if (!key) {
-    return null;
-  }
-
-  if (!translationData || !translationData[language]) {
-    return null;
-  }
-
-  const text = translationData[language][key];
-  if (text) {
-    return text;
-  }
-
-  // Fallback to English
-  if (language !== defaultLanguage && translationData[defaultLanguage]?.[key]) {
-    return translationData[defaultLanguage][key];
-  }
-
-  return null;
-}
-
-// Store Notion text (for dynamic updates)
-export function setNotionText(
-  key: string,
-  value: string,
-  language: LanguageCode = currentLanguage.value
-): void {
-  if (!key) return;
-
-  const bucket = getLanguageBucket(language);
-  bucket.set(key, value);
-}
-
-function getLanguageBucket(language: LanguageCode): NotionCache {
-  if (!notionStore.has(language)) {
-    notionStore.set(language, new Map());
-  }
-  return notionStore.get(language)!;
-}
-
 // Get available languages - dynamically detect from loaded data
 export function getAvailableLanguages(): Promise<LanguageCode[]> {
   // Always get fresh translation data

package/DS1/0-face/scaling.ts

@@ -0,0 +1,152 @@
+// scaling.ts
+// Responsive scaling utilities for the design system
+
+import { signal } from "@lit-labs/signals";
+
+export type ScalingMode = "auto" | "fixed" | "fluid";
+
+export interface ScalingConfig {
+  mode: ScalingMode;
+  baseWidth: number;
+  minScale: number;
+  maxScale: number;
+}
+
+const defaultConfig: ScalingConfig = {
+  mode: "auto",
+  baseWidth: 280,
+  minScale: 0.75,
+  maxScale: 2.0,
+};
+
+// Reactive scaling factor signal
+export const scalingFactor = signal<number>(1);
+
+// Current scaling configuration
+export const scalingConfig = signal<ScalingConfig>(defaultConfig);
+
+/**
+ * Calculate the scaling factor based on viewport width
+ * @param viewportWidth - Current viewport width in pixels
+ * @param config - Scaling configuration
+ * @returns The calculated scaling factor
+ */
+export function calculateScalingFactor(
+  viewportWidth: number,
+  config: ScalingConfig = scalingConfig.get()
+): number {
+  if (config.mode === "fixed") {
+    return 1;
+  }
+
+  const rawScale = viewportWidth / config.baseWidth;
+  const clampedScale = Math.max(
+    config.minScale,
+    Math.min(config.maxScale, rawScale)
+  );
+
+  return Number(clampedScale.toFixed(3));
+}
+
+/**
+ * Set the scaling configuration
+ * @param config - Partial scaling configuration to apply
+ */
+export function setScalingConfig(config: Partial<ScalingConfig>): void {
+  const currentConfig = scalingConfig.get();
+  const newConfig = { ...currentConfig, ...config };
+  scalingConfig.set(newConfig);
+
+  // Recalculate scaling factor if in browser
+  if (typeof window !== "undefined") {
+    updateScalingFactor();
+  }
+}
+
+/**
+ * Update the scaling factor based on current viewport
+ */
+export function updateScalingFactor(): void {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+
+  const viewportWidth = document.documentElement.clientWidth;
+  const config = scalingConfig.get();
+  const newFactor = calculateScalingFactor(viewportWidth, config);
+
+  scalingFactor.set(newFactor);
+
+  // Update CSS custom property
+  document.documentElement.style.setProperty("--sf", newFactor.toString());
+
+  // Dispatch event for components that need to react
+  window.dispatchEvent(
+    new CustomEvent("scaling-changed", {
+      detail: { scalingFactor: newFactor, config },
+    })
+  );
+}
+
+/**
+ * Get the current scaling factor
+ * @returns The current scaling factor
+ */
+export function getScalingFactor(): number {
+  return scalingFactor.get();
+}
+
+/**
+ * Convert a design pixel value to scaled pixels
+ * @param designPx - The design pixel value (based on 280px width)
+ * @returns The scaled pixel value
+ */
+export function scale(designPx: number): number {
+  return designPx * scalingFactor.get();
+}
+
+/**
+ * Convert a scaled pixel value back to design pixels
+ * @param scaledPx - The scaled pixel value
+ * @returns The design pixel value
+ */
+export function unscale(scaledPx: number): number {
+  const factor = scalingFactor.get();
+  return factor === 0 ? scaledPx : scaledPx / factor;
+}
+
+/**
+ * Initialize scaling system
+ * This is typically called automatically when the module loads
+ */
+export function initScaling(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  // Initial calculation
+  updateScalingFactor();
+
+  // Update on resize (debounced)
+  let resizeTimeout: ReturnType<typeof setTimeout>;
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      updateScalingFactor();
+    }, 100);
+  });
+
+  // Update on orientation change
+  window.addEventListener("orientationchange", () => {
+    setTimeout(updateScalingFactor, 100);
+  });
+}
+
+// Auto-initialize when module loads in browser
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initScaling);
+  } else {
+    initScaling();
+  }
+}