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

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

@@ -8,8 +8,9 @@ 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 = [
@@ -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)
@@ -329,6 +511,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", () => {

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] || "$";
+}

package/DS1/2-core/ds-button.ts

@@ -2,7 +2,7 @@
 // Core button component
 
 import { LitElement, html, css, type PropertyValues } from "lit";
-import { getText, currentLanguage } from "../utils/language";
+import { getText, currentLanguage } from "../0-face/i18n";
 
 export class Button extends LitElement {
   static properties = {

package/DS1/2-core/ds-cycle.ts

@@ -5,11 +5,11 @@ import {
   getAvailableLanguagesSync,
   getLanguageDisplayName,
   setLanguage,
-} from "../utils/language";
-import type { LanguageCode } from "../utils/language";
-import { currentTheme, setTheme } from "../utils/theme";
-import type { ThemeType } from "../utils/theme";
-import { saveSettings } from "../utils/settings";
+} from "../0-face/i18n";
+import type { LanguageCode } from "../0-face/i18n";
+import { currentTheme, setTheme } from "../0-face/theme";
+import type { ThemeType } from "../0-face/theme";
+import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
 
@@ -362,8 +362,8 @@ export class Cycle extends LitElement {
         setLanguage(newLanguage as LanguageCode);
       }
 
-      // Save settings
-      saveSettings({ language: newLanguage as LanguageCode });
+      // Save preferences
+      savePreferences({ language: newLanguage as LanguageCode });
 
       // Dispatch language change event
       window.dispatchEvent(
@@ -383,8 +383,8 @@ export class Cycle extends LitElement {
       // Set the new theme using the shared helper
       setTheme(newTheme as ThemeType);
 
-      // Save settings
-      saveSettings({ theme: newTheme as ThemeType });
+      // Save preferences
+      savePreferences({ theme: newTheme as ThemeType });
 
       // Theme helper already emits the change event, so no manual dispatch here
     } else if (this.type === "accent-color") {
@@ -402,8 +402,8 @@ export class Cycle extends LitElement {
       // Apply the new accent color
       applyAccentColor();
 
-      // Save settings
-      saveSettings({ accentColor: newColor });
+      // Save preferences
+      savePreferences({ accentColor: newColor });
 
       // Dispatch accent color change event
       window.dispatchEvent(
@@ -423,8 +423,8 @@ export class Cycle extends LitElement {
       // Save the new notes style medium
       saveNotesStyleMedium(newStyle);
 
-      // Save settings
-      saveSettings({ notesStyleMedium: newStyle });
+      // Save preferences
+      savePreferences({ notesStyleMedium: newStyle });
 
       // Dispatch notes style medium change event
       window.dispatchEvent(
@@ -444,8 +444,8 @@ export class Cycle extends LitElement {
       // Save the new note behavior
       savePageStyle(newBehavior);
 
-      // Save settings
-      saveSettings({ pageStyle: newBehavior });
+      // Save preferences
+      savePreferences({ pageStyle: newBehavior });
 
       // Dispatch note behavior change event
       window.dispatchEvent(
@@ -465,8 +465,8 @@ export class Cycle extends LitElement {
       // Save the new page style
       savePageStyle(newIconOnlyValue);
 
-      // Save settings
-      saveSettings({ pageStyle: newIconOnlyValue });
+      // Save preferences
+      savePreferences({ pageStyle: newIconOnlyValue });
 
       // No label update for icon-only type
       this.label = "";
@@ -736,4 +736,3 @@ declare global {
     "ds-cycle": Cycle;
   }
 }
-

package/DS1/2-core/{ds-year.ts → ds-date.ts}

@@ -3,9 +3,9 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for displaying the current year
  *
- * @element ds-year
+ * @element ds-date
  */
-export class Year extends LitElement {
+export class DateComponent extends LitElement {
   static styles = css`
     :host {
       display: inline;
@@ -21,11 +21,11 @@ export class Year extends LitElement {
   }
 }
 
-customElements.define("ds-year", Year);
+customElements.define("ds-date", DateComponent);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ds-year": Year;
+    "ds-date": DateComponent;
   }
 }
 

package/DS1/2-core/ds-input.ts

@@ -0,0 +1 @@
+// here should be an input component

package/DS1/2-core/ds-text.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
+import { getText } from "../0-face/i18n";
 
 /**
  * A component for displaying text from translations

package/DS1/2-core/ds-tooltip.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { translate, getNotionText } from "../utils/language";
+import { translate, getNotionText } from "../0-face/i18n";
 
 export class Tooltip extends LitElement {
   static properties = {
@@ -84,7 +84,9 @@ export class Tooltip extends LitElement {
       pointer-events: none;
       height: calc(var(--08) * var(--scaling-factor));
       opacity: 0;
-      transition: opacity 120ms ease, transform 120ms ease;
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease;
       background-color: light-dark(var(--black), var(--white));
       color: light-dark(var(--white), var(--black));
       border-radius: 0;
@@ -192,4 +194,3 @@ declare global {
     "ds-tooltip": Tooltip;
   }
 }
-

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

@@ -0,0 +1,105 @@
+import { LitElement, html, css } from "lit";
+
+/**
+ * A component for double navigation (previous/next)
+ *
+ * @element doublenav-v1
+ * @prop {string} previous - URL for previous link
+ * @prop {string} next - URL for next link
+ * @prop {string} previousText - Text for previous link
+ * @prop {string} nextText - Text for next link
+ * @prop {string} overlay - Overlay color (blue, red, orange, green, yellow)
+ */
+export class DoubleNav extends LitElement {
+  static get properties() {
+    return {
+      previous: { type: String, reflect: true },
+      next: { type: String, reflect: true },
+      previousText: { type: String, reflect: true, attribute: "previous-text" },
+      nextText: { type: String, reflect: true, attribute: "next-text" },
+      overlay: { type: String, reflect: true },
+    };
+  }
+
+  declare previous: string;
+  declare next: string;
+  declare previousText: string;
+  declare nextText: string;
+  declare overlay?: string;
+
+  constructor() {
+    super();
+    this.previous = "";
+    this.next = "";
+    this.previousText = "";
+    this.nextText = "";
+    this.overlay = "";
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: space-between;
+      gap: calc(5px * var(--scaling-factor));
+      padding: calc(2px * var(--scaling-factor));
+      align-items: center;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(5px * var(--scaling-factor));
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .nav-previous {
+      justify-self: start;
+    }
+
+    .nav-next {
+      justify-self: end;
+    }
+
+    .nav-previous icon-v1 {
+      order: -1;
+    }
+
+    .nav-next icon-v1 {
+      padding-top: 3px;
+    }
+
+    .nav-previous icon-v1 {
+      padding-top: 3px;
+    }
+  `;
+
+  render() {
+    return html`
+      ${this.previous
+        ? html`
+            <a href="${this.previous}" class="nav-previous">
+              <icon-v1 type="left"></icon-v1>
+              <ds-text>${this.previousText || "Previous"}</ds-text>
+            </a>
+          `
+        : html`<div></div>`}
+      ${this.next
+        ? html`
+            <a href="${this.next}" class="nav-next">
+              <ds-text>${this.nextText || "Next"}</ds-text>
+              <icon-v1 type="right"></icon-v1>
+            </a>
+          `
+        : html`<div></div>`}
+    `;
+  }
+}
+
+customElements.define("doublenav-v1", DoubleNav);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "doublenav-v1": DoubleNav;
+  }
+}

package/DS1/3-unit/{ds-doublenav.ts → ds-portfolio-doublenav.ts}

@@ -3,14 +3,14 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for double navigation (previous/next)
  *
- * @element ds-doublenav
+ * @element portfolio-doublenav
  * @prop {string} previous - URL for previous link
  * @prop {string} next - URL for next link
  * @prop {string} previousText - Text for previous link
  * @prop {string} nextText - Text for next link
  * @prop {string} overlay - Overlay color (blue, red, orange, green, yellow)
  */
-export class DoubleNav extends LitElement {
+export class PortfolioDoubleNav extends LitElement {
   static get properties() {
     return {
       previous: { type: String, reflect: true },
@@ -96,11 +96,10 @@ export class DoubleNav extends LitElement {
   }
 }
 
-customElements.define("ds-doublenav", DoubleNav);
+customElements.define("portfolio-doublenav", PortfolioDoubleNav);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ds-doublenav": DoubleNav;
+    "portfolio-doublenav": PortfolioDoubleNav;
   }
 }
-

package/DS1/3-unit/ds-portfolio-panel.ts

@@ -0,0 +1,27 @@
+
+import { LitElement, html, css } from "lit";
+
+export class PortfolioPanel extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      height: var(--08);
+      align-items: end;
+      gap: var(--025);
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define("portfolio-panel", PortfolioPanel);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "portfolio-panel": PortfolioPanel;
+  }
+}
+