ds-one 0.2.0-alpha.3 → 0.2.5-alpha.10

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

@@ -93,9 +93,14 @@ export function initDeviceDetection(): DeviceInfo {
     const actualWidth = deviceInfo.screenWidth;
     const scalingFactor = actualWidth / designWidth;
 
-    // Set CSS custom property for scaling
+    // Set CSS custom property for scaling on html element
     document.documentElement.style.setProperty(
-      "--scaling-factor-mobile",
+      "--sf",
+      scalingFactor.toFixed(3)
+    );
+    // Also set --sf for backwards compatibility
+    document.documentElement.style.setProperty(
+      "--sf",
       scalingFactor.toFixed(3)
     );
 
@@ -105,10 +110,9 @@ export function initDeviceDetection(): DeviceInfo {
   } else {
     // Desktop - no scaling
     if (typeof document !== "undefined") {
-      document.documentElement.style.setProperty(
-        "--scaling-factor-mobile",
-        "1"
-      );
+      document.documentElement.style.setProperty("--sf", "1");
+      // Also set --sf for backwards compatibility
+      document.documentElement.style.setProperty("--sf", "1");
     }
     console.log(
       `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`

package/DS1/{utils/language.ts → 0-face/i18n.ts}

@@ -8,21 +8,22 @@ type TranslationData = {
 
 type TranslationMap = Record<string, TranslationData>;
 
-// Import the JSON directly to ensure it's bundled
-import translationKeys from "./keys.json";
+// Bundled translations (keys.json may not exist - will use external translations if not available)
+// This is a fallback for when external translations aren't loaded
+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>(
@@ -33,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>();
@@ -67,6 +68,187 @@ declare global {
   }
 }
 
+// CDN Loader: Automatically detects and loads translation JSON files
+// for CDN users who want to use external translations
+
+const DEFAULT_TRANSLATION_FILE = "./translations.json";
+let loadAttempted = false;
+
+function normalizeCandidate(path: string): string | null {
+  if (!path) {
+    return null;
+  }
+  const trimmed = path.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  if (
+    trimmed.startsWith("./") ||
+    trimmed.startsWith("../") ||
+    trimmed.startsWith("/") ||
+    /^https?:\/\//i.test(trimmed)
+  ) {
+    return trimmed;
+  }
+
+  return `./${trimmed}`;
+}
+
+function findAttributeCandidate(): string | null {
+  if (typeof document === "undefined") {
+    return null;
+  }
+
+  const scriptWithAttribute = document.querySelector(
+    "script[data-ds-one-translations]"
+  );
+  const scriptCandidate = scriptWithAttribute?.getAttribute(
+    "data-ds-one-translations"
+  );
+  if (scriptCandidate) {
+    return scriptCandidate;
+  }
+
+  const metaCandidate = document
+    .querySelector('meta[name="ds-one:translations"]')
+    ?.getAttribute("content");
+  if (metaCandidate) {
+    return metaCandidate;
+  }
+
+  const linkCandidate = document
+    .querySelector('link[rel="ds-one-translations"]')
+    ?.getAttribute("href");
+  if (linkCandidate) {
+    return linkCandidate;
+  }
+
+  return null;
+}
+
+function resolveTranslationSources(): string[] {
+  const candidates: string[] = [];
+
+  const windowCandidate =
+    typeof window !== "undefined" ? window.DS_ONE_TRANSLATIONS_FILE : null;
+  const attributeCandidate = findAttributeCandidate();
+
+  // Only use explicitly configured paths, or the single default
+  const windowNormalized = normalizeCandidate(windowCandidate ?? "");
+  if (windowNormalized) {
+    candidates.push(windowNormalized);
+  }
+
+  const attrNormalized = normalizeCandidate(attributeCandidate ?? "");
+  if (attrNormalized && !candidates.includes(attrNormalized)) {
+    candidates.push(attrNormalized);
+  }
+
+  // Only try default if no explicit path was configured
+  if (candidates.length === 0) {
+    candidates.push(DEFAULT_TRANSLATION_FILE);
+  }
+
+  return candidates;
+}
+
+function validateTranslationMap(
+  candidate: unknown
+): candidate is TranslationMap {
+  if (!candidate || typeof candidate !== "object") {
+    return false;
+  }
+
+  return Object.values(candidate).every(
+    (entry) => entry && typeof entry === "object"
+  );
+}
+
+async function fetchTranslationFile(
+  source: string
+): Promise<TranslationMap | null> {
+  try {
+    const response = await fetch(source);
+
+    if (!response.ok) {
+      // 404 is expected if no translations file exists - don't log as error
+      return null;
+    }
+
+    const translations = await response.json();
+
+    if (!validateTranslationMap(translations)) {
+      console.warn(
+        `[DS one] Invalid translation format in ${source}. Expected object with language codes as keys.`
+      );
+      return null;
+    }
+
+    const languages = Object.keys(translations);
+    if (languages.length === 0) {
+      console.warn(`[DS one] No languages found in ${source}`);
+      return null;
+    }
+
+    return translations;
+  } catch {
+    // Silently fail - file likely doesn't exist or isn't valid JSON
+    return null;
+  }
+}
+
+/**
+ * Attempts to load translations from a JSON file in the same directory
+ */
+async function loadExternalTranslations(): Promise<boolean> {
+  // Only attempt once
+  if (loadAttempted) {
+    return false;
+  }
+  loadAttempted = true;
+
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  // Check if translations are already loaded (e.g., by the application)
+  if (
+    window.DS_ONE_TRANSLATIONS &&
+    Object.keys(window.DS_ONE_TRANSLATIONS).length > 0
+  ) {
+    console.log(
+      `[DS one] Translations already loaded (${Object.keys(window.DS_ONE_TRANSLATIONS).length} languages), skipping auto-load`
+    );
+    return true;
+  }
+
+  const sources = resolveTranslationSources();
+
+  for (const source of sources) {
+    const translations = await fetchTranslationFile(source);
+    if (!translations) {
+      continue;
+    }
+
+    window.DS_ONE_TRANSLATIONS = translations;
+
+    const languages = Object.keys(translations);
+    console.log(
+      `[DS one] External translations loaded from ${source}: ${languages.length} language(s) – ${languages.join(", ")}`
+    );
+
+    window.dispatchEvent(new CustomEvent("translations-ready"));
+    return true;
+  }
+
+  console.info(
+    `[DS one] No external translations found at ${sources[0] ?? DEFAULT_TRANSLATION_FILE}. Using bundled translations.`
+  );
+
+  return false;
+}
+
 // Get translation data - prioritize external, fall back to bundled
 function getTranslationData(): TranslationMap {
   // Check for externally loaded translations first (CDN usage)
@@ -81,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 {
@@ -227,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 {
@@ -329,6 +505,19 @@ export const currentLanguage = {
   },
 };
 
+// Auto-load translations when this module is imported (for CDN bundle)
+if (typeof window !== "undefined") {
+  // Wait a bit to ensure the DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      loadExternalTranslations();
+    });
+  } else {
+    // DOM is already ready
+    loadExternalTranslations();
+  }
+}
+
 // Listen for external translations being loaded
 if (typeof window !== "undefined") {
   window.addEventListener("translations-ready", () => {
@@ -337,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;
@@ -356,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;
@@ -384,7 +571,9 @@ export function translate(key: string): string {
     return translationData[defaultLanguage][key];
   }
 
-  console.warn(`[translate] No translation found for key "${key}"`);
+  console.warn(
+    `[DS one (Internationalization)] No translation found for key "${key}"`
+  );
   return key;
 }
 
@@ -417,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/preferences.ts

@@ -0,0 +1,23 @@
+import type { LanguageCode } from "./i18n";
+import type { ThemeType } from "./theme";
+
+export type Preferences = {
+  language?: LanguageCode;
+  theme?: ThemeType;
+  [key: string]: unknown;
+};
+
+export function savePreferences(preferences: Preferences): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    const raw = window.localStorage?.getItem("ds-one:preferences");
+    const existing = raw ? (JSON.parse(raw) as Record<string, unknown>) : {};
+    const next = { ...existing, ...preferences };
+    window.localStorage?.setItem("ds-one:preferences", JSON.stringify(next));
+  } catch (error) {
+    console.warn("ds-one: unable to persist preferences", error);
+  }
+}

package/DS1/0-face/pricing.ts

@@ -0,0 +1,57 @@
+/**
+ * Currency label utilities for regional price display
+ *
+ * Note: This module provides currency symbols/labels based on language and region.
+ * Consider moving this functionality into i18n.ts as it's region/locale-related.
+ * Actual price values will be stored in a database or managed via Stripe.
+ */
+
+import type { LanguageCode } from "./i18n";
+
+type PriceLabelOptions = {
+  language: LanguageCode;
+  country?: string;
+};
+
+// Simple price label mapping based on language/country
+const PRICE_LABELS: Record<string, string> = {
+  da: "kr.",
+  nb: "kr.",
+  sv: "kr.",
+  de: "€",
+  en: "$",
+  pt: "€",
+  es: "€",
+  zh: "¥",
+  ja: "¥",
+  ko: "₩",
+};
+
+export function getPriceLabel(options: PriceLabelOptions): string {
+  const { language, country } = options;
+
+  // If country is provided, try to map it to a currency
+  if (country) {
+    const countryUpper = country.toUpperCase();
+    // Add country-specific mappings if needed
+    if (countryUpper === "US" || countryUpper === "USA") {
+      return "$";
+    }
+    if (countryUpper === "GB" || countryUpper === "UK") {
+      return "£";
+    }
+    if (countryUpper === "JP" || countryUpper === "JPN") {
+      return "¥";
+    }
+    if (countryUpper === "CN" || countryUpper === "CHN") {
+      return "¥";
+    }
+    if (countryUpper === "KR" || countryUpper === "KOR") {
+      return "₩";
+    }
+  }
+
+  // Fall back to language-based mapping
+  const primaryLang = language.toLowerCase().split(/[-_]/)[0];
+  return PRICE_LABELS[primaryLang] || "$";
+}