@0001-labs/design-system-1 0.0.0-stage → 0.3.0-alpha.13

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/0-face/scaling.ts

@@ -0,0 +1,25 @@
+/* Design system 1 responsive scale calculation, shared with native HTML sites */
+export type ScalingMode = "auto" | "fixed" | "fluid";
+
+export interface ScalingConfig {
+  mode: ScalingMode;
+  baseWidth: number;
+  minScale: number;
+  maxScale: number;
+}
+
+// ============================================================================
+// Configuration & Signals
+// ============================================================================
+
+export const defaultScalingConfig: ScalingConfig = {
+  mode: "auto",
+  baseWidth: 280,
+  minScale: 0.75,
+  maxScale: 2.0,
+};
+
+export function calculateScalingFactor(viewportWidth: number, config: ScalingConfig = defaultScalingConfig): number {
+  if (config.mode === "fixed") return 1;
+  return Number(Math.max(config.minScale, Math.min(config.maxScale, viewportWidth / config.baseWidth)).toFixed(3));
+}

package/DS1/0-face/shared-words.ts

@@ -0,0 +1,45 @@
+/**
+ * The interface words every product shares: common buttons, sign-in, empty
+ * states, dates, the settings ds-cycle shows, ds-banner's words and the
+ * names of the languages. Keyed by the English sentence, in the translations
+ * file format, one file per language in `./translations/`.
+ *
+ * A product turns them on with `configureI18n({ sharedWords: true })`; they
+ * sit beneath the product's own words, so the product's text wins. `nn` and
+ * `no` have no file of their own and read `nb`'s; a word missing from a
+ * language reads English.
+ */
+import type { TranslationsFile } from "./translations-format";
+import da from "./translations/da.json";
+import de from "./translations/de.json";
+import en from "./translations/en.json";
+import es from "./translations/es.json";
+import fi from "./translations/fi.json";
+import fr from "./translations/fr.json";
+import is from "./translations/is.json";
+import it from "./translations/it.json";
+import ja from "./translations/ja.json";
+import ko from "./translations/ko.json";
+import nb from "./translations/nb.json";
+import pt from "./translations/pt.json";
+import ptBR from "./translations/pt-BR.json";
+import sv from "./translations/sv.json";
+import zh from "./translations/zh.json";
+
+export const SHARED_WORDS: TranslationsFile = {
+  ...en,
+  ...da,
+  ...de,
+  ...es,
+  ...fi,
+  ...fr,
+  ...is,
+  ...it,
+  ...ja,
+  ...ko,
+  ...nb,
+  ...pt,
+  ...ptBR,
+  ...sv,
+  ...zh,
+};

package/DS1/0-face/theme.ts

@@ -0,0 +1,58 @@
+import { signal } from "@lit-labs/signals";
+import { preferenceStorageKey } from "./preferences";
+
+export type ThemeType = "light" | "dark";
+
+function getInitialTheme(): ThemeType {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+
+  let storedTheme: string | null = null;
+  try { storedTheme = window.localStorage?.getItem(preferenceStorageKey("theme")); } catch { /* Storage can be unavailable. */ }
+  if (storedTheme === "light" || storedTheme === "dark") {
+    return storedTheme;
+  }
+
+  // Check system preference
+  const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  return prefersDark ? "dark" : "light";
+}
+
+export const currentTheme = signal<ThemeType>(getInitialTheme());
+
+export function setTheme(theme: ThemeType): void {
+  if (theme === currentTheme.get()) {
+    return;
+  }
+
+  currentTheme.set(theme);
+
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage?.setItem(preferenceStorageKey("theme"), theme);
+    } catch (error) {
+      console.warn("ds-one: unable to persist theme preference", error);
+    }
+
+    const root = window.document?.documentElement;
+    if (root) {
+      root.classList.remove("light-theme", "dark-theme");
+      root.classList.add(`${theme}-theme`);
+    }
+
+    window.dispatchEvent(
+      new CustomEvent("theme-changed", { detail: { theme } })
+    );
+  }
+}
+
+// Initialize theme on load
+if (typeof window !== "undefined") {
+  const theme = currentTheme.get();
+  const root = window.document?.documentElement;
+  if (root) {
+    root.classList.remove("light-theme", "dark-theme");
+    root.classList.add(`${theme}-theme`);
+  }
+}

package/DS1/0-face/tooltips.ts

@@ -0,0 +1,82 @@
+/**
+ * One tooltip for a whole page: any element with `data-tooltip="…"` shows its text in Design system 1's tooltip,
+ * Ezo's label: 16px high, black with white text (white on black in dark mode), 4px corners, 14px regular, 2.5px at
+ * the sides, two pixels above the element, shown at once. `data-tooltip-colour` gives it a colour of its own. The same look as `<ds-tooltip>`, without wrapping each element in a component, so a table of
+ * hundreds of cells can carry one each. Long text wraps at 320px on 20px lines.
+ */
+export function initTooltips(): void {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (root.hasAttribute("data-ds-tooltips-ready")) return;
+  root.setAttribute("data-ds-tooltips-ready", "");
+
+  const bubble = document.createElement("div");
+  bubble.setAttribute("data-ds-tooltip", "");
+  bubble.setAttribute("role", "tooltip");
+  bubble.id = "ds-tooltip";
+  const style = document.createElement("style");
+  style.textContent = `
+    [data-ds-tooltip] {
+      position: fixed; z-index: 2147483646; top: 0; left: 0; pointer-events: none; visibility: hidden;
+      max-width: 320px; min-height: 16px; box-sizing: border-box; padding: 0 2.5px; border-radius: 4px;
+      background: var(--ds-tooltip-background, light-dark(#000, #fff));
+      color: var(--ds-tooltip-color, light-dark(#fff, #000));
+      font-family: var(--typeface-regular, var(--font-regular, system-ui)), sans-serif;
+      font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: 0; white-space: nowrap;
+    }
+    [data-ds-tooltip].is-wide { white-space: normal; }
+    [data-ds-tooltip].is-visible { visibility: visible; }
+    @media print { [data-ds-tooltip] { display: none; } }
+  `;
+  document.head.appendChild(style);
+  document.body.appendChild(bubble);
+
+  let current: HTMLElement | null = null;
+  const place = (target: HTMLElement) => {
+    const box = target.getBoundingClientRect();
+    const width = bubble.offsetWidth;
+    const height = bubble.offsetHeight;
+    const left = Math.min(Math.max(4, box.left + box.width / 2 - width / 2), window.innerWidth - width - 4);
+    // Above the element, two pixels clear; below it when there is no room above.
+    const top = box.top - height - 2 >= 4 ? box.top - height - 2 : box.bottom + 2;
+    bubble.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+  };
+  const show = (target: HTMLElement) => {
+    const text = target.dataset.tooltip;
+    if (!text) return;
+    current = target;
+    bubble.textContent = text;
+    // A colour of its own, as Ezo's labels take the accent: data-tooltip-colour="#f5aad1", lettered in the ink.
+    const colour = target.dataset.tooltipColour;
+    bubble.style.setProperty("--ds-tooltip-background", colour || "");
+    bubble.style.setProperty("--ds-tooltip-color", colour ? "#1e1e1e" : "");
+    if (!colour) { bubble.style.removeProperty("--ds-tooltip-background"); bubble.style.removeProperty("--ds-tooltip-color"); }
+    // One line, as Ezo's; a long text wraps at 320px instead of running off the page.
+    bubble.classList.remove("is-wide");
+    if (bubble.scrollWidth > 320) bubble.classList.add("is-wide");
+    target.setAttribute("aria-describedby", bubble.id);
+    place(target);
+    bubble.classList.add("is-visible");
+  };
+  const hide = () => {
+    current?.removeAttribute("aria-describedby");
+    current = null;
+    bubble.classList.remove("is-visible");
+  };
+  const find = (event: Event) => (event.target as Element | null)?.closest?.<HTMLElement>("[data-tooltip]") ?? null;
+
+  document.addEventListener("pointerover", (event) => {
+    const target = find(event);
+    if (target !== current) target ? show(target) : hide();
+  }, { passive: true });
+  document.addEventListener("pointerleave", hide, { passive: true });
+  document.addEventListener("focusin", (event) => { const target = find(event); if (target) show(target); });
+  document.addEventListener("focusout", hide);
+  document.addEventListener("keydown", (event) => { if (event.key === "Escape") hide(); });
+  window.addEventListener("scroll", hide, { passive: true, capture: true });
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", initTooltips, { once: true });
+  else initTooltips();
+}

package/DS1/0-face/translations/da.json

@@ -0,0 +1,63 @@
+{
+  "da": {
+    "Save": "Gem",
+    "Cancel": "Annuller",
+    "Delete": "Slet",
+    "Close": "Luk",
+    "Back": "Tilbage",
+    "Next": "Næste",
+    "Done": "Færdig",
+    "Continue": "Fortsæt",
+    "Search": "Søg",
+    "Edit": "Rediger",
+    "Yes": "Ja",
+    "No": "Nej",
+    "Sign in": "Log ind",
+    "Sign out": "Log ud",
+    "Email": "E-mail",
+    "Password": "Adgangskode",
+    "Nothing here yet": "Intet her endnu",
+    "Today": "I dag",
+    "Yesterday": "I går",
+    "Tomorrow": "I morgen",
+    "Settings": "Indstillinger",
+    "Language": "Sprog",
+    "Theme": "Tema",
+    "Light": "Lys",
+    "Dark": "Mørk",
+    "Note": "Note",
+    "Page": "Side",
+    "Red": "Rød",
+    "Orange": "Orange",
+    "Yellow": "Gul",
+    "Apple green": "Æblegrøn",
+    "Green": "Grøn",
+    "Light blue": "Lyseblå",
+    "Blue": "Blå",
+    "Pink": "Lyserød",
+    "This is a beta version": "Dette er en betaversion",
+    "Report issue": "Rapportér et problem",
+    "Issue report": "Problemrapport",
+    "Describe the issue:": "Beskriv problemet:",
+    "App version:": "App-version:",
+    "Danish": "Dansk",
+    "German": "Tysk",
+    "English": "Engelsk",
+    "Spanish": "Spansk",
+    "Finnish": "Finsk",
+    "French": "Fransk",
+    "Icelandic": "Islandsk",
+    "Italian": "Italiensk",
+    "Japanese": "Japansk",
+    "Korean": "Koreansk",
+    "Norwegian Bokmål": "Norsk bokmål",
+    "Norwegian Nynorsk": "Nynorsk",
+    "Norwegian": "Norsk",
+    "Portuguese": "Portugisisk",
+    "Brazilian Portuguese": "Brasiliansk portugisisk",
+    "Swedish": "Svensk",
+    "Chinese": "Kinesisk",
+    "Show password": "Vis adgangskode",
+    "Hide password": "Skjul adgangskode"
+  }
+}

package/DS1/0-face/translations/de.json

@@ -0,0 +1,63 @@
+{
+  "de": {
+    "Save": "Speichern",
+    "Cancel": "Abbrechen",
+    "Delete": "Löschen",
+    "Close": "Schließen",
+    "Back": "Zurück",
+    "Next": "Weiter",
+    "Done": "Fertig",
+    "Continue": "Weiter",
+    "Search": "Suchen",
+    "Edit": "Bearbeiten",
+    "Yes": "Ja",
+    "No": "Nein",
+    "Sign in": "Anmelden",
+    "Sign out": "Abmelden",
+    "Email": "E-Mail",
+    "Password": "Passwort",
+    "Nothing here yet": "Hier ist noch nichts",
+    "Today": "Heute",
+    "Yesterday": "Gestern",
+    "Tomorrow": "Morgen",
+    "Settings": "Einstellungen",
+    "Language": "Sprache",
+    "Theme": "Thema",
+    "Light": "Hell",
+    "Dark": "Dunkel",
+    "Note": "Notiz",
+    "Page": "Seite",
+    "Red": "Rot",
+    "Orange": "Orange",
+    "Yellow": "Gelb",
+    "Apple green": "Apfelgrün",
+    "Green": "Grün",
+    "Light blue": "Hellblau",
+    "Blue": "Blau",
+    "Pink": "Rosa",
+    "This is a beta version": "Dies ist eine Betaversion",
+    "Report issue": "Problem melden",
+    "Issue report": "Problembericht",
+    "Describe the issue:": "Beschreiben Sie das Problem:",
+    "App version:": "App-Version:",
+    "Danish": "Dänisch",
+    "German": "Deutsch",
+    "English": "Englisch",
+    "Spanish": "Spanisch",
+    "Finnish": "Finnisch",
+    "French": "Französisch",
+    "Icelandic": "Isländisch",
+    "Italian": "Italienisch",
+    "Japanese": "Japanisch",
+    "Korean": "Koreanisch",
+    "Norwegian Bokmål": "Norwegisch (Bokmål)",
+    "Norwegian Nynorsk": "Norwegisch (Nynorsk)",
+    "Norwegian": "Norwegisch",
+    "Portuguese": "Portugiesisch",
+    "Brazilian Portuguese": "Brasilianisches Portugiesisch",
+    "Swedish": "Schwedisch",
+    "Chinese": "Chinesisch",
+    "Show password": "Passwort anzeigen",
+    "Hide password": "Passwort verbergen"
+  }
+}

package/DS1/0-face/translations/en.json

@@ -0,0 +1,63 @@
+{
+  "en": {
+    "Save": "Save",
+    "Cancel": "Cancel",
+    "Delete": "Delete",
+    "Close": "Close",
+    "Back": "Back",
+    "Next": "Next",
+    "Done": "Done",
+    "Continue": "Continue",
+    "Search": "Search",
+    "Edit": "Edit",
+    "Yes": "Yes",
+    "No": "No",
+    "Sign in": "Sign in",
+    "Sign out": "Sign out",
+    "Email": "Email",
+    "Password": "Password",
+    "Nothing here yet": "Nothing here yet",
+    "Today": "Today",
+    "Yesterday": "Yesterday",
+    "Tomorrow": "Tomorrow",
+    "Settings": "Settings",
+    "Language": "Language",
+    "Theme": "Theme",
+    "Light": "Light",
+    "Dark": "Dark",
+    "Note": "Note",
+    "Page": "Page",
+    "Red": "Red",
+    "Orange": "Orange",
+    "Yellow": "Yellow",
+    "Apple green": "Apple green",
+    "Green": "Green",
+    "Light blue": "Light blue",
+    "Blue": "Blue",
+    "Pink": "Pink",
+    "This is a beta version": "This is a beta version",
+    "Report issue": "Report issue",
+    "Issue report": "Issue report",
+    "Describe the issue:": "Describe the issue:",
+    "App version:": "App version:",
+    "Danish": "Danish",
+    "German": "German",
+    "English": "English",
+    "Spanish": "Spanish",
+    "Finnish": "Finnish",
+    "French": "French",
+    "Icelandic": "Icelandic",
+    "Italian": "Italian",
+    "Japanese": "Japanese",
+    "Korean": "Korean",
+    "Norwegian Bokmål": "Norwegian Bokmål",
+    "Norwegian Nynorsk": "Norwegian Nynorsk",
+    "Norwegian": "Norwegian",
+    "Portuguese": "Portuguese",
+    "Brazilian Portuguese": "Brazilian Portuguese",
+    "Swedish": "Swedish",
+    "Chinese": "Chinese",
+    "Show password": "Show password",
+    "Hide password": "Hide password"
+  }
+}

package/DS1/0-face/translations/es.json

@@ -0,0 +1,63 @@
+{
+  "es": {
+    "Save": "Guardar",
+    "Cancel": "Cancelar",
+    "Delete": "Eliminar",
+    "Close": "Cerrar",
+    "Back": "Atrás",
+    "Next": "Siguiente",
+    "Done": "Listo",
+    "Continue": "Continuar",
+    "Search": "Buscar",
+    "Edit": "Editar",
+    "Yes": "Sí",
+    "No": "No",
+    "Sign in": "Iniciar sesión",
+    "Sign out": "Cerrar sesión",
+    "Email": "Correo electrónico",
+    "Password": "Contraseña",
+    "Nothing here yet": "Aún no hay nada aquí",
+    "Today": "Hoy",
+    "Yesterday": "Ayer",
+    "Tomorrow": "Mañana",
+    "Settings": "Ajustes",
+    "Language": "Idioma",
+    "Theme": "Tema",
+    "Light": "Claro",
+    "Dark": "Oscuro",
+    "Note": "Nota",
+    "Page": "Página",
+    "Red": "Rojo",
+    "Orange": "Naranja",
+    "Yellow": "Amarillo",
+    "Apple green": "Verde manzana",
+    "Green": "Verde",
+    "Light blue": "Azul claro",
+    "Blue": "Azul",
+    "Pink": "Rosa",
+    "This is a beta version": "Esta es una versión beta",
+    "Report issue": "Informar de un problema",
+    "Issue report": "Informe de problema",
+    "Describe the issue:": "Describe el problema:",
+    "App version:": "Versión de la app:",
+    "Danish": "Danés",
+    "German": "Alemán",
+    "English": "Inglés",
+    "Spanish": "Español",
+    "Finnish": "Finés",
+    "French": "Francés",
+    "Icelandic": "Islandés",
+    "Italian": "Italiano",
+    "Japanese": "Japonés",
+    "Korean": "Coreano",
+    "Norwegian Bokmål": "Noruego bokmal",
+    "Norwegian Nynorsk": "Noruego nynorsk",
+    "Norwegian": "Noruego",
+    "Portuguese": "Portugués",
+    "Brazilian Portuguese": "Portugués de Brasil",
+    "Swedish": "Sueco",
+    "Chinese": "Chino",
+    "Show password": "Mostrar contraseña",
+    "Hide password": "Ocultar contraseña"
+  }
+}

package/DS1/0-face/translations/fi.json

@@ -0,0 +1,63 @@
+{
+  "fi": {
+    "Save": "Tallenna",
+    "Cancel": "Peruuta",
+    "Delete": "Poista",
+    "Close": "Sulje",
+    "Back": "Takaisin",
+    "Next": "Seuraava",
+    "Done": "Valmis",
+    "Continue": "Jatka",
+    "Search": "Hae",
+    "Edit": "Muokkaa",
+    "Yes": "Kyllä",
+    "No": "Ei",
+    "Sign in": "Kirjaudu sisään",
+    "Sign out": "Kirjaudu ulos",
+    "Email": "Sähköposti",
+    "Password": "Salasana",
+    "Nothing here yet": "Täällä ei ole vielä mitään",
+    "Today": "Tänään",
+    "Yesterday": "Eilen",
+    "Tomorrow": "Huomenna",
+    "Settings": "Asetukset",
+    "Language": "Kieli",
+    "Theme": "Teema",
+    "Light": "Vaalea",
+    "Dark": "Tumma",
+    "Note": "Muistiinpano",
+    "Page": "Sivu",
+    "Red": "Punainen",
+    "Orange": "Oranssi",
+    "Yellow": "Keltainen",
+    "Apple green": "Omenanvihreä",
+    "Green": "Vihreä",
+    "Light blue": "Vaaleansininen",
+    "Blue": "Sininen",
+    "Pink": "Vaaleanpunainen",
+    "This is a beta version": "Tämä on beetaversio",
+    "Report issue": "Ilmoita ongelmasta",
+    "Issue report": "Ongelmaraportti",
+    "Describe the issue:": "Kuvaile ongelma:",
+    "App version:": "Sovelluksen versio:",
+    "Danish": "Tanska",
+    "German": "Saksa",
+    "English": "Englanti",
+    "Spanish": "Espanja",
+    "Finnish": "Suomi",
+    "French": "Ranska",
+    "Icelandic": "Islanti",
+    "Italian": "Italia",
+    "Japanese": "Japani",
+    "Korean": "Korea",
+    "Norwegian Bokmål": "Norjan bokmål",
+    "Norwegian Nynorsk": "Norjan nynorsk",
+    "Norwegian": "Norja",
+    "Portuguese": "Portugali",
+    "Brazilian Portuguese": "Brasilianportugali",
+    "Swedish": "Ruotsi",
+    "Chinese": "Kiina",
+    "Show password": "Näytä salasana",
+    "Hide password": "Piilota salasana"
+  }
+}

package/DS1/0-face/translations/fr.json

@@ -0,0 +1,63 @@
+{
+  "fr": {
+    "Save": "Enregistrer",
+    "Cancel": "Annuler",
+    "Delete": "Supprimer",
+    "Close": "Fermer",
+    "Back": "Retour",
+    "Next": "Suivant",
+    "Done": "Terminé",
+    "Continue": "Continuer",
+    "Search": "Rechercher",
+    "Edit": "Modifier",
+    "Yes": "Oui",
+    "No": "Non",
+    "Sign in": "Se connecter",
+    "Sign out": "Se déconnecter",
+    "Email": "E-mail",
+    "Password": "Mot de passe",
+    "Nothing here yet": "Rien ici pour l’instant",
+    "Today": "Aujourd’hui",
+    "Yesterday": "Hier",
+    "Tomorrow": "Demain",
+    "Settings": "Paramètres",
+    "Language": "Langue",
+    "Theme": "Thème",
+    "Light": "Clair",
+    "Dark": "Sombre",
+    "Note": "Note",
+    "Page": "Page",
+    "Red": "Rouge",
+    "Orange": "Orange",
+    "Yellow": "Jaune",
+    "Apple green": "Vert pomme",
+    "Green": "Vert",
+    "Light blue": "Bleu clair",
+    "Blue": "Bleu",
+    "Pink": "Rose",
+    "This is a beta version": "Ceci est une version bêta",
+    "Report issue": "Signaler un problème",
+    "Issue report": "Rapport de problème",
+    "Describe the issue:": "Décrivez le problème :",
+    "App version:": "Version de l’app :",
+    "Danish": "Danois",
+    "German": "Allemand",
+    "English": "Anglais",
+    "Spanish": "Espagnol",
+    "Finnish": "Finnois",
+    "French": "Français",
+    "Icelandic": "Islandais",
+    "Italian": "Italien",
+    "Japanese": "Japonais",
+    "Korean": "Coréen",
+    "Norwegian Bokmål": "Norvégien bokmål",
+    "Norwegian Nynorsk": "Norvégien nynorsk",
+    "Norwegian": "Norvégien",
+    "Portuguese": "Portugais",
+    "Brazilian Portuguese": "Portugais brésilien",
+    "Swedish": "Suédois",
+    "Chinese": "Chinois",
+    "Show password": "Afficher le mot de passe",
+    "Hide password": "Masquer le mot de passe"
+  }
+}