@motir/design-system 0.13.0 → 0.15.1

package/dist/contexts/theme-context.js

@@ -354,7 +354,14 @@ var THEME_STORAGE_KEYS = {
    * before MOTIR-6471 swapped the palette identities, so it is read through
    * {@link PALETTE_ID_MIGRATION} once and the marker is then written.
    */
-  paletteIds: "motir.theme.paletteIds"
+  paletteIds: "motir.theme.paletteIds",
+  /**
+   * The signed-in person's per-language font picks as `<html>` attributes,
+   * `{ [locale]: { 'data-font-set-<role>': member } }` (MOTIR-7896). Written by
+   * every signed-in layout render and cleared by every signed-out one, so only
+   * the error page — which cannot read the database — ever reads it back.
+   */
+  fontPicks: "motir.theme.fontPicks"
 };
 var PALETTE_IDS_VERSION = "2";
 var PALETTE_ID_MIGRATION = {
@@ -369,6 +376,162 @@ function migrateStoredPaletteId(value, marker) {
 var THEME_DEFAULTS = {
   pattern: "system",
   style: DEFAULT_STYLE_ID};
+
+// src/theme/fontSets.ts
+var FONT_SET_LOCALES = [
+  "en",
+  "zh",
+  "ja",
+  "ko",
+  "de",
+  "fr",
+  "es",
+  "it",
+  "nl",
+  "pl",
+  "pt"
+];
+var FONT_SET_ROLES = ["sans", "serif", "mono"];
+var TYPE_PAIRING = {
+  id: "type-pairing",
+  family: null,
+  source: { kind: "type-pairing" },
+  inDooooWeb: false
+};
+function google(id, family, inDooooWeb, sameFaceAs) {
+  return {
+    id,
+    family,
+    source: { kind: "next/font/google", googleFamily: family.replace(/ /g, "_") },
+    inDooooWeb,
+    ...sameFaceAs ? { sameFaceAs } : {}
+  };
+}
+var FONT_SET_REGISTRY = {
+  // dooooWeb: `latin`. Its Latin picker faces are deliberately not members:
+  // behind the pairing's face they would never draw a glyph (font-sets.md § latin).
+  latin: {
+    id: "latin",
+    label: "Latin",
+    lang: null,
+    cjk: false,
+    roles: {
+      sans: { default: "type-pairing", members: [TYPE_PAIRING] },
+      serif: { default: "type-pairing", members: [TYPE_PAIRING] },
+      mono: { default: "type-pairing", members: [TYPE_PAIRING] }
+    }
+  },
+  // dooooWeb: `chinese-simplified`.
+  "zh-Hans": {
+    id: "zh-Hans",
+    label: "Simplified Chinese",
+    lang: "zh",
+    cjk: true,
+    roles: {
+      sans: { default: "noto-sans-sc", members: [google("noto-sans-sc", "Noto Sans SC", false)] },
+      serif: {
+        default: "noto-serif-sc",
+        members: [
+          google("noto-serif-sc", "Noto Serif SC", true),
+          // Draws Traditional / inherited forms, so never the default (font-sets.md § Region forms).
+          google("lxgw-wenkai-tc", "LXGW WenKai TC", true)
+        ]
+      },
+      mono: {
+        default: "noto-sans-sc",
+        members: [google("noto-sans-sc", "Noto Sans SC", false, "sans")]
+      }
+    }
+  },
+  // dooooWeb: `japanese`.
+  ja: {
+    id: "ja",
+    label: "Japanese",
+    lang: "ja",
+    cjk: true,
+    roles: {
+      sans: {
+        default: "noto-sans-jp",
+        members: [
+          google("noto-sans-jp", "Noto Sans JP", true),
+          google("m-plus-rounded-1c", "M PLUS Rounded 1c", true)
+        ]
+      },
+      serif: {
+        default: "noto-serif-jp",
+        members: [google("noto-serif-jp", "Noto Serif JP", false)]
+      },
+      mono: {
+        default: "noto-sans-jp",
+        members: [google("noto-sans-jp", "Noto Sans JP", false, "sans")]
+      }
+    }
+  },
+  // dooooWeb: `korean`.
+  ko: {
+    id: "ko",
+    label: "Korean",
+    lang: "ko",
+    cjk: true,
+    roles: {
+      sans: {
+        default: "noto-sans-kr",
+        members: [
+          google("noto-sans-kr", "Noto Sans KR", true),
+          google("nanum-gothic", "Nanum Gothic", true)
+        ]
+      },
+      serif: {
+        default: "noto-serif-kr",
+        members: [google("noto-serif-kr", "Noto Serif KR", false)]
+      },
+      mono: {
+        default: "noto-sans-kr",
+        members: [google("noto-sans-kr", "Noto Sans KR", false, "sans")]
+      }
+    }
+  }
+};
+var LOCALE_FONT_SET = {
+  en: "latin",
+  zh: "zh-Hans",
+  ja: "ja",
+  ko: "ko",
+  de: "latin",
+  fr: "latin",
+  es: "latin",
+  it: "latin",
+  nl: "latin",
+  pl: "latin",
+  pt: "latin"
+};
+function isFontSetLocale(value) {
+  return typeof value === "string" && FONT_SET_LOCALES.includes(value);
+}
+function fontSetPickAttributes(locale, memberId) {
+  if (memberId === null) return {};
+  const set = FONT_SET_REGISTRY[LOCALE_FONT_SET[locale]];
+  const attrs = {};
+  for (const role of FONT_SET_ROLES) {
+    const r = set.roles[role];
+    if (memberId === r.default) continue;
+    const member = r.members.find((m) => m.id === memberId);
+    if (member && member.source.kind !== "type-pairing") attrs[`data-font-set-${role}`] = memberId;
+  }
+  return attrs;
+}
+function pageFontSetLocale() {
+  if (typeof document === "undefined") return null;
+  const primary = document.documentElement.lang.trim().split(/[-_]/)[0]?.toLowerCase() ?? "";
+  return isFontSetLocale(primary) ? primary : null;
+}
+function applyPageFontPick(locale, memberId) {
+  const root = document.documentElement;
+  for (const role of FONT_SET_ROLES) root.removeAttribute(`data-font-set-${role}`);
+  for (const [attr, value] of Object.entries(fontSetPickAttributes(locale, memberId))) {
+    root.setAttribute(attr, value);
+  }
+}
 var SYNC_DEBOUNCE_MS = 250;
 var ThemeContext = createContext(null);
 function readStorage(key, fallback) {
@@ -448,11 +611,28 @@ function ThemeProvider({
   const syncSeqRef = useRef(0);
   const pendingPatchRef = useRef({});
   const debounceRef = useRef(null);
+  const [fontPicks, setFontPicksState] = useState(
+    {}
+  );
+  const appliedPageFontPickRef = useRef(void 0);
   const reconcile = useCallback((sent, resolved) => {
     if ("pattern" in sent) setPatternState(resolved.pattern);
     if ("styleId" in sent && isStyleId(resolved.styleId)) setStyleIdState(resolved.styleId);
     if ("paletteId" in sent && isPaletteId(resolved.paletteId)) setPaletteState(resolved.paletteId);
     if ("typeId" in sent && isTypeId(resolved.typeId)) setTypeChoiceState(resolved.typeId);
+    if (sent.fontPicks) {
+      const pageLocale = pageFontSetLocale();
+      const adopted = {};
+      for (const locale of Object.keys(sent.fontPicks)) {
+        const value2 = resolved.fontPicks?.[locale] ?? null;
+        adopted[locale] = value2;
+        if (locale === pageLocale && value2 !== appliedPageFontPickRef.current) {
+          applyPageFontPick(locale, value2);
+          appliedPageFontPickRef.current = value2;
+        }
+      }
+      setFontPicksState((prev) => ({ ...prev, ...adopted }));
+    }
   }, []);
   const flushSync = useCallback(() => {
     debounceRef.current = null;
@@ -478,7 +658,12 @@ function ThemeProvider({
   const queueSync = useCallback(
     (patch) => {
       if (!signedIn) return;
-      pendingPatchRef.current = { ...pendingPatchRef.current, ...patch };
+      const prev = pendingPatchRef.current;
+      const next = { ...prev, ...patch };
+      if (prev.fontPicks || patch.fontPicks) {
+        next.fontPicks = { ...prev.fontPicks, ...patch.fontPicks };
+      }
+      pendingPatchRef.current = next;
       if (debounceRef.current) clearTimeout(debounceRef.current);
       debounceRef.current = setTimeout(flushSync, SYNC_DEBOUNCE_MS);
     },
@@ -537,6 +722,18 @@ function ThemeProvider({
     },
     [queueSync]
   );
+  const setFontPick = useCallback(
+    (locale, memberId) => {
+      if (!signedIn) return;
+      setFontPicksState((prev) => ({ ...prev, [locale]: memberId }));
+      if (locale === pageFontSetLocale()) {
+        applyPageFontPick(locale, memberId);
+        appliedPageFontPickRef.current = memberId;
+      }
+      queueSync({ fontPicks: { [locale]: memberId } });
+    },
+    [signedIn, queueSync]
+  );
   const value = useMemo(
     () => ({
       pattern,
@@ -548,6 +745,8 @@ function ThemeProvider({
       setStyleId,
       setPalette,
       setType,
+      fontPicks,
+      setFontPick,
       syncState
     }),
     [
@@ -560,6 +759,8 @@ function ThemeProvider({
       setStyleId,
       setPalette,
       setType,
+      fontPicks,
+      setFontPick,
       syncState
     ]
   );