@pure-ds/core 0.7.30 → 0.7.32

package/public/assets/pds/components/pds-live-edit.js

@@ -1,4 +1,4 @@
-import { PDS } from "#pds";
+import { PDS, msg } from "#pds";
 
 const EDITOR_TAG = "pds-live-edit";
 const STYLE_ID = "pds-live-editor-styles";
@@ -1631,6 +1631,462 @@ function setStoredConfig(nextConfig) {
   } catch (e) {}
 }
 
+function normalizeLocaleTag(locale) {
+  return String(locale || "").trim().toLowerCase();
+}
+
+let __startupLocalizationLocales = null;
+let __startupLocalizationLocalesPromise = null;
+
+const LOCALE_PROBE_CANDIDATES = [
+  "en", "nl", "de", "fr", "es", "it", "pt", "sv", "no", "da", "fi",
+  "pl", "cs", "sk", "sl", "hu", "ro", "bg", "hr", "sr", "ru", "uk",
+  "tr", "el", "he", "ar", "fa", "hi", "ja", "ko", "zh", "zh-cn", "zh-tw",
+];
+
+function toBaseLocale(locale) {
+  const normalized = normalizeLocaleTag(locale);
+  if (!normalized) return "";
+  return normalized.split("-")[0] || normalized;
+}
+
+function isLocalizationActive() {
+  const configLocalization =
+    PDS?.currentConfig?.localization && typeof PDS.currentConfig.localization === "object"
+      ? PDS.currentConfig.localization
+      : null;
+
+  const runtimeState =
+    typeof PDS?.getLocalizationState === "function"
+      ? PDS.getLocalizationState()
+      : null;
+
+  const hasRuntimeProvider = Boolean(runtimeState?.hasProvider);
+
+  const hasConfigProvider = Boolean(
+    configLocalization?.provider ||
+      typeof configLocalization?.translate === "function" ||
+      typeof configLocalization?.loadLocale === "function" ||
+      typeof configLocalization?.setLocale === "function"
+  );
+
+  const hasConfigMessages = Boolean(
+    configLocalization?.messages &&
+      typeof configLocalization.messages === "object" &&
+      Object.keys(configLocalization.messages).length > 0
+  );
+
+  const hasRuntimeMessages = Boolean(
+    runtimeState?.messages &&
+      typeof runtimeState.messages === "object" &&
+      Object.keys(runtimeState.messages).length > 0
+  );
+
+  return hasRuntimeProvider || hasConfigProvider || hasConfigMessages || hasRuntimeMessages;
+}
+
+function isLocaleBundle(bundle) {
+  if (!bundle || typeof bundle !== "object" || Array.isArray(bundle)) {
+    return false;
+  }
+
+  return Object.values(bundle).some((value) => {
+    if (typeof value === "string") return true;
+    return Boolean(value && typeof value === "object" && typeof value.content === "string");
+  });
+}
+
+function normalizeMessageBundle(bundle) {
+  if (!bundle || typeof bundle !== "object" || Array.isArray(bundle)) {
+    return {};
+  }
+
+  const normalized = {};
+  Object.entries(bundle).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      normalized[key] = value;
+      return;
+    }
+
+    if (value && typeof value === "object" && typeof value.content === "string") {
+      normalized[key] = value.content;
+    }
+  });
+
+  return normalized;
+}
+
+function getLocalizationProviderLoader(configLocalization) {
+  if (!configLocalization || typeof configLocalization !== "object") return null;
+
+  return (
+    (typeof configLocalization?.loadLocale === "function"
+      ? configLocalization.loadLocale
+      : null) ||
+    (typeof configLocalization?.provider?.loadLocale === "function"
+      ? configLocalization.provider.loadLocale
+      : null) ||
+    (typeof configLocalization?.setLocale === "function"
+      ? configLocalization.setLocale
+      : null) ||
+    (typeof configLocalization?.provider?.setLocale === "function"
+      ? configLocalization.provider.setLocale
+      : null)
+  );
+}
+
+function buildLocaleProbeList({ defaultLocale, runtimeState, knownLocales }) {
+  const candidates = new Set();
+
+  const normalizedDefault = normalizeLocaleTag(defaultLocale);
+  if (normalizedDefault) {
+    candidates.add(normalizedDefault);
+  }
+
+  if (Array.isArray(runtimeState?.loadedLocales)) {
+    runtimeState.loadedLocales.forEach((locale) => {
+      const normalized = normalizeLocaleTag(locale);
+      if (normalized) {
+        candidates.add(normalized);
+        candidates.add(toBaseLocale(normalized));
+      }
+    });
+  }
+
+  if (Array.isArray(knownLocales)) {
+    knownLocales.forEach((locale) => {
+      const normalized = normalizeLocaleTag(locale);
+      if (normalized) {
+        candidates.add(normalized);
+        candidates.add(toBaseLocale(normalized));
+      }
+    });
+  }
+
+  if (typeof navigator !== "undefined" && Array.isArray(navigator.languages)) {
+    navigator.languages.forEach((locale) => {
+      const normalized = normalizeLocaleTag(locale);
+      if (normalized) {
+        candidates.add(normalized);
+        candidates.add(toBaseLocale(normalized));
+      }
+    });
+  }
+
+  LOCALE_PROBE_CANDIDATES.forEach((locale) => {
+    const normalized = normalizeLocaleTag(locale);
+    if (normalized) {
+      candidates.add(normalized);
+      candidates.add(toBaseLocale(normalized));
+    }
+  });
+
+  candidates.delete("");
+  return Array.from(candidates).sort((a, b) => a.localeCompare(b));
+}
+
+function bundlesDifferFromOrigin(originBundle, candidateBundle) {
+  const originEntries = normalizeMessageBundle(originBundle);
+  const candidateEntries = normalizeMessageBundle(candidateBundle);
+
+  const originKeys = Object.keys(originEntries);
+  const candidateKeys = Object.keys(candidateEntries);
+  if (!originKeys.length || !candidateKeys.length) {
+    return false;
+  }
+
+  return originKeys.some((key) => {
+    if (!Object.prototype.hasOwnProperty.call(candidateEntries, key)) return false;
+    return String(candidateEntries[key]) !== String(originEntries[key]);
+  });
+}
+
+function collectLocalesFromMessageRows(source, locales) {
+  if (!source || typeof source !== "object" || Array.isArray(source)) return;
+
+  Object.values(source).forEach((row) => {
+    if (!row || typeof row !== "object" || Array.isArray(row)) return;
+    if (typeof row.content === "string") return;
+
+    Object.entries(row).forEach(([localeKey, translatedValue]) => {
+      const normalized = normalizeLocaleTag(localeKey);
+      if (!normalized) return;
+
+      const hasValue =
+        typeof translatedValue === "string" ||
+        Boolean(
+          translatedValue &&
+            typeof translatedValue === "object" &&
+            typeof translatedValue.content === "string"
+        );
+
+      if (hasValue) {
+        locales.add(normalized);
+      }
+    });
+  });
+}
+
+function collectLocalesFromLocaleBundles(source, locales) {
+  if (!source || typeof source !== "object" || Array.isArray(source)) return;
+
+  Object.entries(source).forEach(([localeKey, bundle]) => {
+    const normalized = normalizeLocaleTag(localeKey);
+    if (!normalized) return;
+    if (!isLocaleBundle(bundle)) return;
+    locales.add(normalized);
+  });
+}
+
+function collectLocalesFromConfiguredList(source, locales) {
+  if (!Array.isArray(source)) return;
+
+  source.forEach((localeValue) => {
+    const normalized = normalizeLocaleTag(localeValue);
+    if (normalized) {
+      locales.add(normalized);
+    }
+  });
+}
+
+async function detectStartupLocalizationLocales() {
+  const locales = new Set();
+
+  const configLocalization =
+    PDS?.currentConfig?.localization && typeof PDS.currentConfig.localization === "object"
+      ? PDS.currentConfig.localization
+      : null;
+
+  const defaultLocale = normalizeLocaleTag(configLocalization?.locale);
+  if (defaultLocale) {
+    locales.add(defaultLocale);
+  }
+
+  collectLocalesFromConfiguredList(configLocalization?.locales, locales);
+  collectLocalesFromConfiguredList(configLocalization?.provider?.locales, locales);
+
+  if (locales.size >= 2) {
+    return Array.from(locales).sort((a, b) => a.localeCompare(b));
+  }
+
+  const runtimeState =
+    typeof PDS?.getLocalizationState === "function"
+      ? PDS.getLocalizationState()
+      : null;
+  const runtimeDefaultLocale = normalizeLocaleTag(runtimeState?.locale);
+  if (runtimeDefaultLocale) {
+    locales.add(runtimeDefaultLocale);
+  }
+
+  const messageSources = [
+    configLocalization?.messages,
+    configLocalization?.messagesByLocale,
+    configLocalization?.i18n,
+    configLocalization?.translations,
+    configLocalization?.provider?.messages,
+    configLocalization?.provider?.messagesByLocale,
+    configLocalization?.provider?.i18n,
+    configLocalization?.provider?.translations,
+  ];
+
+  messageSources.forEach((source) => {
+    collectLocalesFromMessageRows(source, locales);
+    collectLocalesFromLocaleBundles(source, locales);
+  });
+
+  const localeListFromRows = Array.from(locales).sort((a, b) => a.localeCompare(b));
+  if (localeListFromRows.length >= 2) {
+    return localeListFromRows;
+  }
+
+  const providerLoader = getLocalizationProviderLoader(configLocalization);
+  const runtimeLoadLocale =
+    typeof PDS?.loadLocale === "function" ? PDS.loadLocale.bind(PDS) : null;
+
+  if (typeof providerLoader !== "function" && typeof runtimeLoadLocale !== "function") {
+    return localeListFromRows;
+  }
+
+  const originLocale =
+    normalizeLocaleTag(configLocalization?.locale) ||
+    normalizeLocaleTag(runtimeState?.locale) ||
+    "en";
+
+  locales.add(originLocale);
+
+  let originBundle = normalizeMessageBundle(runtimeState?.messages || configLocalization?.messages);
+  if (!Object.keys(originBundle).length) {
+    try {
+      let loadedOrigin = null;
+
+      if (typeof runtimeLoadLocale === "function") {
+        loadedOrigin = await Promise.resolve(runtimeLoadLocale(originLocale));
+      } else {
+        loadedOrigin = await Promise.resolve(
+          providerLoader({
+            locale: originLocale,
+            defaultLocale: originLocale,
+            reason: "startup-locale-detect-origin",
+            loadedLocales: Array.from(locales),
+            messages: {},
+            load: true,
+          })
+        );
+      }
+
+      originBundle = normalizeMessageBundle(loadedOrigin);
+    } catch (error) {}
+  }
+
+  const probeLocales = buildLocaleProbeList({
+    defaultLocale: originLocale,
+    runtimeState,
+    knownLocales: Array.from(locales),
+  });
+
+  for (const candidateLocale of probeLocales) {
+    if (!candidateLocale || candidateLocale === originLocale) {
+      continue;
+    }
+
+    try {
+      let candidateBundle = null;
+
+      if (typeof runtimeLoadLocale === "function") {
+        candidateBundle = await Promise.resolve(runtimeLoadLocale(candidateLocale));
+      } else {
+        candidateBundle = await Promise.resolve(
+          providerLoader({
+            locale: candidateLocale,
+            defaultLocale: originLocale,
+            reason: "startup-locale-detect-probe",
+            loadedLocales: Array.from(locales),
+            messages: {},
+            load: true,
+          })
+        );
+      }
+
+      if (bundlesDifferFromOrigin(originBundle, candidateBundle)) {
+        locales.add(candidateLocale);
+        if (locales.size >= 2) {
+          break;
+        }
+      }
+    } catch (error) {}
+  }
+
+  return Array.from(locales).sort((a, b) => a.localeCompare(b));
+}
+
+async function getStartupLocalizationLocales() {
+  if (Array.isArray(__startupLocalizationLocales)) {
+    return [...__startupLocalizationLocales];
+  }
+
+  if (__startupLocalizationLocalesPromise) {
+    const inFlight = await __startupLocalizationLocalesPromise;
+    return [...inFlight];
+  }
+
+  __startupLocalizationLocalesPromise = detectStartupLocalizationLocales()
+    .then((locales) => {
+      __startupLocalizationLocales = Array.isArray(locales) ? locales : [];
+      return __startupLocalizationLocales;
+    })
+    .catch(() => {
+      __startupLocalizationLocales = [];
+      return __startupLocalizationLocales;
+    })
+    .finally(() => {
+      __startupLocalizationLocalesPromise = null;
+    });
+
+  const resolved = await __startupLocalizationLocalesPromise;
+  return [...resolved];
+}
+
+function localeOptionLabel(locale) {
+  const normalized = normalizeLocaleTag(locale);
+  if (!normalized) return "";
+
+  try {
+    const currentDocLang =
+      normalizeLocaleTag(document.documentElement?.getAttribute?.("lang")) || "en";
+    const displayNames = new Intl.DisplayNames([currentDocLang], {
+      type: "language",
+    });
+    const named = displayNames.of(normalized);
+    if (named && String(named).trim()) {
+      return named;
+    }
+  } catch (error) {}
+
+  return normalized;
+}
+
+function localeMatches(selectedLocale, activeLocale) {
+  const selected = normalizeLocaleTag(selectedLocale);
+  const active = normalizeLocaleTag(activeLocale);
+  if (!selected || !active) return false;
+  return selected === active || toBaseLocale(selected) === toBaseLocale(active);
+}
+
+async function buildQuickLanguageSelector() {
+  if (typeof document === "undefined") return null;
+  if (!isLocalizationActive()) return null;
+
+  const detectedLocales = await getStartupLocalizationLocales();
+  if (detectedLocales.length < 2) return null;
+
+  const languageGroup = document.createElement("div");
+  languageGroup.className = "stack-xs";
+
+  const languageText = document.createElement("span");
+  languageText.setAttribute("data-label", "");
+  languageText.textContent = msg("Language");
+
+  const languageFieldset = document.createElement("fieldset");
+  languageFieldset.setAttribute("role", "radiogroup");
+  languageFieldset.className = "buttons";
+
+  const activeDocumentLang =
+    normalizeLocaleTag(document.documentElement?.getAttribute?.("lang")) ||
+    detectedLocales[0];
+
+  const radioName = `pds-live-language-${Date.now()}`;
+
+  detectedLocales.forEach((locale) => {
+    const optionLabel = document.createElement("label");
+
+    const optionInput = document.createElement("input");
+    optionInput.type = "radio";
+    optionInput.name = radioName;
+    optionInput.value = locale;
+    optionInput.checked = localeMatches(locale, activeDocumentLang);
+
+    const optionText = document.createElement("span");
+
+    optionText.textContent = localeOptionLabel(locale);
+
+    optionLabel.append(optionInput, optionText);
+    languageFieldset.appendChild(optionLabel);
+  });
+
+  languageFieldset.addEventListener("change", (event) => {
+    const selected = event.target;
+    if (!(selected instanceof HTMLInputElement)) return;
+    if (selected.type !== "radio") return;
+
+    const nextLocale = normalizeLocaleTag(selected.value);
+    if (!nextLocale) return;
+    document.documentElement.setAttribute("lang", nextLocale);
+  });
+
+  languageGroup.append(languageText, languageFieldset);
+  return languageGroup;
+}
+
 function getPresetOptions() {
   const presets = PDS?.presets || {};
   return Object.values(presets)
@@ -1792,7 +2248,7 @@ async function exportFromLiveEdit(format) {
       const config = getLiveEditExportConfig();
       const content = buildConfigModuleContent(config);
       downloadTextFile(content, "pds.config.js", "text/javascript");
-      await PDS?.toast?.("Exported config file", { type: "success" });
+      await PDS?.toast?.(msg("Exported config file"), { type: "success" });
       return;
     }
 
@@ -1807,12 +2263,12 @@ async function exportFromLiveEdit(format) {
       const figmaTokens = figmafyTokens(rawTokens);
       const content = JSON.stringify(figmaTokens, null, 2);
       downloadTextFile(content, "design-tokens.figma.json", "application/json");
-      await PDS?.toast?.("Exported Figma tokens", { type: "success" });
+      await PDS?.toast?.(msg("Exported Figma tokens"), { type: "success" });
       return;
     }
   } catch (error) {
     console.warn("[pds-live-edit] Export failed", error);
-    await PDS?.toast?.("Export failed", { type: "error" });
+    await PDS?.toast?.(msg("Export failed"), { type: "error" });
   }
 }
 
@@ -1999,7 +2455,7 @@ async function createConfiguredForm({
   const applyBtn = document.createElement("button");
   applyBtn.className = "btn-primary btn-sm";
   applyBtn.type = "button";
-  applyBtn.textContent = "Apply";
+  applyBtn.textContent = msg("Apply");
   applyBtn.addEventListener("click", async () => {
     if (typeof form.getValuesFlat === "function") {
       if (!customElements.get("pds-form")) {
@@ -2027,8 +2483,8 @@ async function createConfiguredForm({
   const undoBtn = document.createElement("button");
   undoBtn.className = "btn-secondary btn-sm icon-only";
   undoBtn.type = "button";
-  undoBtn.setAttribute("aria-label", "Undo");
-  undoBtn.setAttribute("title", "Undo");
+  undoBtn.setAttribute("aria-label", msg("Undo"));
+  undoBtn.setAttribute("title", msg("Undo"));
   const undoIcon = document.createElement("pds-icon");
   undoIcon.setAttribute("icon", "arrow-counter-clockwise");
   undoIcon.setAttribute("size", "sm");
@@ -2185,8 +2641,8 @@ function withThemeConditionalSchema(schema, uiSchema) {
   baseSchema.properties[FORM_THEME_CONTEXT_FIELD] = {
     type: "string",
     oneOf: [
-      { const: "light", title: "Light" },
-      { const: "dark", title: "Dark" },
+      { const: "light", title: msg("Light") },
+      { const: "dark", title: msg("Dark") },
     ],
   };
 
@@ -2342,7 +2798,7 @@ function buildGroupedFullConfigPayload(payload, design) {
       ...Object.fromEntries(scalarKeys.map((key) => [key, rootProperties[key]])),
       [FULL_CONFIG_GROUPS_KEY]: {
         type: "object",
-        title: "Design Groups",
+        title: msg("Design Groups"),
         properties: Object.fromEntries(
           groupedKeys.map((key) => [key, rootProperties[key]])
         ),
@@ -2984,7 +3440,7 @@ class PdsLiveEdit extends HTMLElement {
     button.className = `context-edit btn-primary btn-xs icon-only ${MARKER_CLASS}`;
     button.setAttribute("type", "button");
     button.setAttribute("data-direction", "auto");
-    button.setAttribute("aria-label", "Edit design settings");
+    button.setAttribute("aria-label", msg("Edit design settings"));
 
     const icon = document.createElement("pds-icon");
     icon.setAttribute("icon", "pencil");
@@ -3000,7 +3456,7 @@ class PdsLiveEdit extends HTMLElement {
 
     const title = document.createElement("span");
     title.className = "pds-live-editor-title";
-    title.textContent = "Quick edit";
+    title.textContent = msg("Quick edit");
     header.appendChild(title);
 
     quickItem.appendChild(header);
@@ -3055,7 +3511,7 @@ class PdsLiveEdit extends HTMLElement {
     } catch (error) {
       const fallback = document.createElement("p");
       fallback.className = "text-muted";
-      fallback.textContent = "Editor form unavailable. Lazy component definition did not complete in time.";
+      fallback.textContent = msg("Editor form unavailable. Lazy component definition did not complete in time.");
       container.appendChild(fallback);
       console.warn("[PDS Live Edit] Failed to render quick form:", error);
       return;
@@ -3074,7 +3530,7 @@ class PdsLiveEdit extends HTMLElement {
     const gearBtn = document.createElement("button");
     gearBtn.className = "btn-outline btn-sm icon-only";
     gearBtn.type = "button";
-    gearBtn.setAttribute("aria-label", "More settings");
+    gearBtn.setAttribute("aria-label", msg("More settings"));
     const gearIcon = document.createElement("pds-icon");
     gearIcon.setAttribute("icon", "caret-right");
     gearIcon.setAttribute("size", "sm");
@@ -3104,7 +3560,7 @@ class PdsLiveEdit extends HTMLElement {
     const button = document.createElement("button");
     button.type = "button";
     button.className = "btn-outline btn-sm icon-only";
-    button.setAttribute("aria-label", "Quick theme and preset");
+    button.setAttribute("aria-label", msg("Quick theme, preset and language"));
 
     const icon = document.createElement("pds-icon");
     icon.setAttribute("icon", "palette");
@@ -3125,15 +3581,20 @@ class PdsLiveEdit extends HTMLElement {
     const themeLabel = document.createElement("label");
     themeLabel.className = "stack-xs";
     const themeText = document.createElement("span");
-    themeText.textContent = "Theme";
+    themeText.textContent = msg("Theme");
     const themeToggle = document.createElement("pds-theme");
     themeLabel.append(themeText, themeToggle);
     content.appendChild(themeLabel);
 
+    const languageSelector = await buildQuickLanguageSelector();
+    if (languageSelector) {
+      content.appendChild(languageSelector);
+    }
+
     const presetLabel = document.createElement("label");
     presetLabel.className = "stack-xs";
     const presetText = document.createElement("span");
-    presetText.textContent = "Preset";
+    presetText.textContent = msg("Preset");
     presetLabel.appendChild(presetText);
 
     let presetControlRendered = false;
@@ -3142,7 +3603,7 @@ class PdsLiveEdit extends HTMLElement {
 
       const presetOmnibox = document.createElement("pds-omnibox");
       presetOmnibox.setAttribute("item-grid", "0 1fr 0");
-      presetOmnibox.setAttribute("placeholder", "Search presets...");
+      presetOmnibox.setAttribute("placeholder", msg("Search presets..."));
 
       const activePresetId = getActivePresetId();
       const activePresetName = getPresetNameById(activePresetId);
@@ -3238,7 +3699,7 @@ class PdsLiveEdit extends HTMLElement {
     const header = document.createElement("div");
     header.setAttribute("slot", "drawer-header");
     header.className = "flex items-center justify-between";
-    header.textContent = "Design settings";
+    header.textContent = msg("Design settings");
 
     const content = document.createElement("div");
     content.setAttribute("slot", "drawer-content");
@@ -3248,14 +3709,14 @@ class PdsLiveEdit extends HTMLElement {
     presetCard.className = "card surface-elevated stack-sm";
 
     const presetTitle = document.createElement("h4");
-    presetTitle.textContent = "Preset";
+    presetTitle.textContent = msg("Preset");
     presetCard.appendChild(presetTitle);
 
     const presetLabel = document.createElement("label");
     presetLabel.className = "stack-xs";
 
     const presetText = document.createElement("span");
-    presetText.textContent = "Choose a base style";
+    presetText.textContent = msg("Choose a base style");
     presetLabel.appendChild(presetText);
 
     let presetControlRendered = false;
@@ -3264,7 +3725,7 @@ class PdsLiveEdit extends HTMLElement {
 
       const presetOmnibox = document.createElement("pds-omnibox");
       presetOmnibox.setAttribute("item-grid", "0 1fr 0");
-      presetOmnibox.setAttribute("placeholder", "Search presets...");
+      presetOmnibox.setAttribute("placeholder", msg("Search presets..."));
 
       const activePresetId = getActivePresetId();
       const activePresetName = getPresetNameById(activePresetId);
@@ -3330,7 +3791,7 @@ class PdsLiveEdit extends HTMLElement {
     themeCard.className = "card surface-elevated stack-sm";
 
     const themeTitle = document.createElement("h4");
-    themeTitle.textContent = "Theme";
+    themeTitle.textContent = msg("Theme");
     themeCard.appendChild(themeTitle);
 
     const themeToggle = document.createElement("pds-theme");
@@ -3340,13 +3801,13 @@ class PdsLiveEdit extends HTMLElement {
     configCard.className = "card surface-elevated stack-sm";
 
     const configTitle = document.createElement("h4");
-    configTitle.textContent = "Configuration";
+    configTitle.textContent = msg("Configuration");
     configCard.appendChild(configTitle);
 
     const configDescription = document.createElement("p");
     configDescription.className = "text-muted";
     configDescription.textContent =
-      "Edit the full design config generated from PDS metadata.";
+      msg("Edit the full design config generated from PDS metadata.");
     configCard.appendChild(configDescription);
 
     const configFormContainer = document.createElement("div");
@@ -3376,7 +3837,7 @@ class PdsLiveEdit extends HTMLElement {
       const unavailable = document.createElement("p");
       unavailable.className = "text-muted";
       unavailable.textContent =
-        "Full config metadata is unavailable in this runtime.";
+        msg("Full config metadata is unavailable in this runtime.");
       configFormContainer.appendChild(unavailable);
     }
 
@@ -3384,7 +3845,7 @@ class PdsLiveEdit extends HTMLElement {
     templateCard.className = "card surface-elevated stack-sm";
 
     const templateTitle = document.createElement("h4");
-    templateTitle.textContent = "Canvas Templates";
+    templateTitle.textContent = msg("Canvas Templates");
     templateCard.appendChild(templateTitle);
 
     const templateCanvas = document.createElement("pds-live-template-canvas");
@@ -3397,7 +3858,7 @@ class PdsLiveEdit extends HTMLElement {
     importCard.className = "card surface-elevated stack-sm";
 
     const importTitle = document.createElement("h4");
-    importTitle.textContent = "Import & Convert";
+    importTitle.textContent = msg("Import & Convert");
     importCard.appendChild(importTitle);
 
     const importer = document.createElement("pds-live-importer");
@@ -3418,7 +3879,7 @@ class PdsLiveEdit extends HTMLElement {
     exportCard.className = "card surface-elevated stack-sm";
 
     const exportTitle = document.createElement("h4");
-    exportTitle.textContent = "Export";
+    exportTitle.textContent = msg("Export");
     exportCard.appendChild(exportTitle);
 
     const exportNav = document.createElement("nav");
@@ -3431,7 +3892,7 @@ class PdsLiveEdit extends HTMLElement {
     exportIcon.setAttribute("icon", "download");
     exportIcon.setAttribute("size", "sm");
     const exportLabel = document.createElement("span");
-    exportLabel.textContent = "Download";
+    exportLabel.textContent = msg("Download");
     const exportCaret = document.createElement("pds-icon");
     exportCaret.setAttribute("icon", "caret-down");
     exportCaret.setAttribute("size", "sm");
@@ -3450,7 +3911,7 @@ class PdsLiveEdit extends HTMLElement {
     configIcon.setAttribute("icon", "file-js");
     configIcon.setAttribute("size", "sm");
     const configLabel = document.createElement("span");
-    configLabel.textContent = "Config File";
+    configLabel.textContent = msg("Config File");
     configLink.append(configIcon, configLabel);
     configItem.appendChild(configLink);
 
@@ -3465,7 +3926,7 @@ class PdsLiveEdit extends HTMLElement {
     figmaIcon.setAttribute("icon", "brackets-curly");
     figmaIcon.setAttribute("size", "sm");
     const figmaLabel = document.createElement("span");
-    figmaLabel.textContent = "Figma Tokens (JSON)";
+    figmaLabel.textContent = msg("Figma Tokens (JSON)");
     figmaLink.append(figmaIcon, figmaLabel);
     figmaItem.appendChild(figmaLink);
 
@@ -3476,7 +3937,7 @@ class PdsLiveEdit extends HTMLElement {
     const resetButton = document.createElement("button");
     resetButton.type = "button";
     resetButton.className = "btn-outline pds-live-editor-reset-btn";
-    resetButton.textContent = "Reset Config";
+    resetButton.textContent = msg("Reset Config");
     resetButton.addEventListener("click", async () => {
       await this.resetConfig();
     });
@@ -3487,7 +3948,7 @@ class PdsLiveEdit extends HTMLElement {
 
     const accordion = document.createElement("section");
     accordion.className = "accordion";
-    accordion.setAttribute("aria-label", "Design settings groups");
+    accordion.setAttribute("aria-label", msg("Design settings groups"));
 
     const buildAccordionGroup = (title, nodes = [], open = false, sectionId = "") => {
       const details = document.createElement("details");
@@ -3507,11 +3968,11 @@ class PdsLiveEdit extends HTMLElement {
       return details;
     };
 
-    accordion.appendChild(buildAccordionGroup("Preset & Theme", [presetCard, themeCard], true, "preset-theme"));
-    accordion.appendChild(buildAccordionGroup("Configuration", [configCard], false, "configuration"));
-    accordion.appendChild(buildAccordionGroup("Canvas", [templateCard], false, "canvas"));
+    accordion.appendChild(buildAccordionGroup(msg("Preset & Theme"), [presetCard, themeCard], true, "preset-theme"));
+    accordion.appendChild(buildAccordionGroup(msg("Configuration"), [configCard], false, "configuration"));
+    accordion.appendChild(buildAccordionGroup(msg("Canvas"), [templateCard], false, "canvas"));
     accordion.appendChild(
-      buildAccordionGroup("Import & Export", [importCard, exportCard], false, "import-convert-export")
+      buildAccordionGroup(msg("Import & Export"), [importCard, exportCard], false, "import-convert-export")
     );
 
     content.appendChild(accordion);
@@ -3582,13 +4043,13 @@ class PdsLiveEdit extends HTMLElement {
     let confirmed = true;
     if (typeof PDS?.ask === "function") {
       confirmed = await PDS.ask(
-        "This clears your saved local configuration and reloads the page.",
+        msg("This clears your saved local configuration and reloads the page."),
         {
-          title: "Reset Config?",
+          title: msg("Reset Config?"),
           type: "confirm",
           buttons: {
-            ok: { name: "Reset", variant: "danger" },
-            cancel: { name: "Cancel", cancel: true },
+            ok: { name: msg("Reset"), variant: "danger" },
+            cancel: { name: msg("Cancel"), cancel: true },
           },
         }
       );