@motir/design-system 0.11.0 → 0.13.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { DEFAULT_STYLE_ID, STYLE_DEFAULT_TYPE, STYLE_DIMENSIONS, STYLE_IDS, STYLE_REGISTRY, StyleDefinition, StyleDimensionKey, StyleId, defaultTypeForStyle, isStyleId, resolveStyle } from './theme/styles.js';
 export { BASE_PALETTE_ID, DEFAULT_PALETTE_ID, DEFAULT_PROJECT_PALETTE_ID, PALETTE_IDS, PALETTE_REGISTRY, PaletteDefinition, PaletteId, isPaletteId, resolvePalette } from './theme/palettes.js';
 export { DEFAULT_TYPE_ID, TYPE_IDS, TYPE_REGISTRY, TypeId, TypographyDefinition, isTypeId, resolveType } from './theme/typography.js';
+export { DEFAULT_FONT_SET_ID, FONT_SET_IDS, FONT_SET_LOCALES, FONT_SET_REGISTRY, FONT_SET_ROLES, FontSet, FontSetId, FontSetLocale, FontSetMember, FontSetMemberSource, FontSetRole, FontSetRoleMembers, LOCALE_FONT_SET, fontSetMemberVar, isFontSetLocale, resolveFontSet, resolveFontSetMember } from './theme/fontSets.js';
 export { PALETTE_IDS_VERSION, PALETTE_ID_MIGRATION, ResolvedThemePattern, THEME_DEFAULTS, THEME_STORAGE_KEYS, ThemePattern, isThemePattern, migrateStoredPaletteId, resolvePattern } from './theme/types.js';
 export { buildThemeInitScript, themeInitScript } from './theme/init-script.js';
 export { AppearanceAxesInput, LocalAppearanceSnapshot, resolveAppliedAppearance, resolveAxesToApplied } from './theme/appearance-resolution.js';

package/dist/index.js

@@ -20,6 +20,7 @@
 export * from './theme/styles.js';
 export * from './theme/palettes.js';
 export * from './theme/typography.js';
+export * from './theme/fontSets.js';
 
 // ── Pattern axis + storage/defaults (owned by ./theme/types) ─────────────────
 export { THEME_STORAGE_KEYS, THEME_DEFAULTS, isThemePattern, resolvePattern } from './theme/types.js';

package/dist/theme/fontSets.d.ts

@@ -0,0 +1,222 @@
+/**
+ * The Motir FONT-SET REGISTRY: which faces each locale's script is drawn in
+ * (Story MOTIR-7733 · Subtask MOTIR-7843).
+ *
+ * A Type pairing (`./typography.ts`) decides the LATIN faces of the three roles
+ * (sans / serif / mono). A font set decides the SCRIPT face that sits BEHIND
+ * them, so a ja page draws its Latin in the pairing's face and its kana and
+ * kanji in the ja set's face, under every pairing. The two axes are
+ * independent: a set never changes which pairing is active, and a pairing never
+ * changes which set a locale uses.
+ *
+ * ── Where the rows come from ────────────────────────────────────────────
+ * Every set, member and default below is taken from
+ * `docs/typography/font-sets.md` (MOTIR-7841), which read dooooWeb's mapping at
+ * `225af77` and filled the roles dooooWeb leaves empty from cited references.
+ * `inDooooWeb` carries that document's `in dooooWeb` / `added (not in dooooWeb)`
+ * tag. Change a row here only together with that document; the package test
+ * holds the two equal.
+ *
+ * ── What this module is NOT ─────────────────────────────────────────────
+ * Data and pure resolvers only. It names CSS custom properties (the contract
+ * between the app's `next/font` loader and `theme.css`) but sets none, loads no
+ * face, and writes no CSS. Loading stays in the consuming app.
+ */
+/** The eleven locales app.motir.co ships in. A closed product decision. */
+declare const FONT_SET_LOCALES: readonly ["en", "zh", "ja", "ko", "de", "fr", "es", "it", "nl", "pl", "pt"];
+/** A locale the font-set registry knows. */
+type FontSetLocale = (typeof FONT_SET_LOCALES)[number];
+/** The three type roles every set covers: the same roles `--font-*` carries. */
+declare const FONT_SET_ROLES: readonly ["sans", "serif", "mono"];
+/** One of the three type roles. */
+type FontSetRole = (typeof FONT_SET_ROLES)[number];
+/**
+ * Where a member's face comes from.
+ *
+ * - `type-pairing`: the active Type pairing's own face for the role. The Latin
+ *   set's only member; it loads nothing and has no CSS variable.
+ * - `next/font/google`: a Google Fonts face the app loads with `next/font`;
+ *   `googleFamily` is the loader's export name (`Noto_Sans_JP`).
+ */
+type FontSetMemberSource = {
+    readonly kind: 'type-pairing';
+} | {
+    readonly kind: 'next/font/google';
+    readonly googleFamily: string;
+};
+/** One selectable face in one role of one set. */
+interface FontSetMember {
+    /** Stable kebab-case slug, unique within its role. The value a pick stores. */
+    readonly id: string;
+    /** The display name, or `null` for the `type-pairing` member. */
+    readonly family: string | null;
+    readonly source: FontSetMemberSource;
+    /** `docs/typography/font-sets.md`'s tag: `in dooooWeb` (true) or `added` (false). */
+    readonly inDooooWeb: boolean;
+    /**
+     * The role whose member of the SAME id this member re-uses the face of. A
+     * CJK set's mono role draws its Han glyphs from the set's sans face (the Noto
+     * Sans Mono CJK practice, see the doc), so the face is loaded once and both
+     * roles read one variable.
+     */
+    readonly sameFaceAs?: FontSetRole;
+}
+/** One role of one set: its members, and which one a page uses by default. */
+interface FontSetRoleMembers {
+    /** The id of the member used when nobody has picked one. */
+    readonly default: string;
+    readonly members: readonly FontSetMember[];
+}
+/** A locale group's font set. */
+interface FontSet {
+    readonly id: string;
+    /** Display name for `/tokens` and the picker. */
+    readonly label: string;
+    /**
+     * The BCP 47 tag the set's `:lang()` rule matches. It is the tag the app
+     * renders on `<html lang>` (`zh`, not `zh-Hans`), because `:lang(zh)`
+     * matches `zh` and `zh-Hans` while `:lang(zh-Hans)` does not match `zh`.
+     * `null` for the Latin set, which is matched by its locales instead.
+     */
+    readonly lang: string | null;
+    /** True for a CJK set: its faces are unicode-range sliced and never preloaded. */
+    readonly cjk: boolean;
+    readonly roles: Readonly<Record<FontSetRole, FontSetRoleMembers>>;
+}
+/**
+ * The registry, one entry per set. Ids are the doc's registry ids; dooooWeb's
+ * own group names are noted beside each.
+ */
+declare const FONT_SET_REGISTRY: {
+    readonly latin: {
+        readonly id: "latin";
+        readonly label: "Latin";
+        readonly lang: null;
+        readonly cjk: false;
+        readonly roles: {
+            readonly sans: {
+                readonly default: "type-pairing";
+                readonly members: readonly [FontSetMember];
+            };
+            readonly serif: {
+                readonly default: "type-pairing";
+                readonly members: readonly [FontSetMember];
+            };
+            readonly mono: {
+                readonly default: "type-pairing";
+                readonly members: readonly [FontSetMember];
+            };
+        };
+    };
+    readonly 'zh-Hans': {
+        readonly id: "zh-Hans";
+        readonly label: "Simplified Chinese";
+        readonly lang: "zh";
+        readonly cjk: true;
+        readonly roles: {
+            readonly sans: {
+                readonly default: "noto-sans-sc";
+                readonly members: readonly [FontSetMember];
+            };
+            readonly serif: {
+                readonly default: "noto-serif-sc";
+                readonly members: readonly [FontSetMember, FontSetMember];
+            };
+            readonly mono: {
+                readonly default: "noto-sans-sc";
+                readonly members: readonly [FontSetMember];
+            };
+        };
+    };
+    readonly ja: {
+        readonly id: "ja";
+        readonly label: "Japanese";
+        readonly lang: "ja";
+        readonly cjk: true;
+        readonly roles: {
+            readonly sans: {
+                readonly default: "noto-sans-jp";
+                readonly members: readonly [FontSetMember, FontSetMember];
+            };
+            readonly serif: {
+                readonly default: "noto-serif-jp";
+                readonly members: readonly [FontSetMember];
+            };
+            readonly mono: {
+                readonly default: "noto-sans-jp";
+                readonly members: readonly [FontSetMember];
+            };
+        };
+    };
+    readonly ko: {
+        readonly id: "ko";
+        readonly label: "Korean";
+        readonly lang: "ko";
+        readonly cjk: true;
+        readonly roles: {
+            readonly sans: {
+                readonly default: "noto-sans-kr";
+                readonly members: readonly [FontSetMember, FontSetMember];
+            };
+            readonly serif: {
+                readonly default: "noto-serif-kr";
+                readonly members: readonly [FontSetMember];
+            };
+            readonly mono: {
+                readonly default: "noto-sans-kr";
+                readonly members: readonly [FontSetMember];
+            };
+        };
+    };
+};
+/** The id of every registered set. */
+type FontSetId = keyof typeof FONT_SET_REGISTRY;
+/** All set ids, in registry order. */
+declare const FONT_SET_IDS: FontSetId[];
+/** The set an unknown or empty page language falls back to: the app renders it in English. */
+declare const DEFAULT_FONT_SET_ID: FontSetId;
+/** Which set each locale is drawn in (font-sets.md § Locale → set). */
+declare const LOCALE_FONT_SET: {
+    readonly en: "latin";
+    readonly zh: "zh-Hans";
+    readonly ja: "ja";
+    readonly ko: "ko";
+    readonly de: "latin";
+    readonly fr: "latin";
+    readonly es: "latin";
+    readonly it: "latin";
+    readonly nl: "latin";
+    readonly pl: "latin";
+    readonly pt: "latin";
+};
+/** Narrowing guard: is an arbitrary value one of the eleven locales? */
+declare function isFontSetLocale(value: unknown): value is FontSetLocale;
+/**
+ * The set for an `<html lang>` value. Matches the primary subtag
+ * case-insensitively (`ja-JP` → ja, `PT-br` → pt, `zh-Hans` → zh).
+ *
+ * The fallback is explicit: an empty or unknown tag returns the Latin set,
+ * because the app renders an unknown language in English. It never falls back
+ * to "the nearest CJK set". Use `isFontSetLocale` on the primary subtag to tell
+ * a fallback from a match.
+ */
+declare function resolveFontSet(lang: string): FontSet;
+/**
+ * A member of one role of one set, by id. A missing or unknown id (a stored
+ * pick naming a member that has since been removed) returns that role's
+ * default, never another set's face.
+ */
+declare function resolveFontSetMember(setId: FontSetId, role: FontSetRole, memberId?: string): FontSetMember;
+/**
+ * The CSS custom property the app's `next/font` loader assigns to a member's
+ * face and `theme.css` reads: `--font-set-<set>-<role>-<member>`. This name is
+ * the contract between the registry, the loader and the stylesheet, so it is
+ * built here and nowhere else.
+ *
+ * A member that re-uses another role's face (`sameFaceAs`) returns THAT role's
+ * variable, so the face is declared once. The `type-pairing` member, and an id
+ * the role does not have, return `null`.
+ */
+declare function fontSetMemberVar(setId: FontSetId, role: FontSetRole, memberId: string): string | null;
+
+export { DEFAULT_FONT_SET_ID, FONT_SET_IDS, FONT_SET_LOCALES, FONT_SET_REGISTRY, FONT_SET_ROLES, type FontSet, type FontSetId, type FontSetLocale, type FontSetMember, type FontSetMemberSource, type FontSetRole, type FontSetRoleMembers, LOCALE_FONT_SET, fontSetMemberVar, isFontSetLocale, resolveFontSet, resolveFontSetMember };

package/dist/theme/fontSets.js

@@ -0,0 +1,155 @@
+// 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 FONT_SET_IDS = Object.keys(FONT_SET_REGISTRY);
+var DEFAULT_FONT_SET_ID = "latin";
+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 resolveFontSet(lang) {
+  const primary = lang.trim().split(/[-_]/)[0]?.toLowerCase() ?? "";
+  const id = isFontSetLocale(primary) ? LOCALE_FONT_SET[primary] : DEFAULT_FONT_SET_ID;
+  return FONT_SET_REGISTRY[id];
+}
+function resolveFontSetMember(setId, role, memberId) {
+  const r = FONT_SET_REGISTRY[setId].roles[role];
+  const named = memberId === void 0 ? void 0 : r.members.find((m) => m.id === memberId);
+  return named ?? r.members.find((m) => m.id === r.default);
+}
+function fontSetMemberVar(setId, role, memberId) {
+  const member = FONT_SET_REGISTRY[setId].roles[role].members.find(
+    (m) => m.id === memberId
+  );
+  if (!member || member.source.kind === "type-pairing") return null;
+  const faceRole = member.sameFaceAs ?? role;
+  return `--font-set-${setId}-${faceRole}-${member.id}`;
+}
+
+export { DEFAULT_FONT_SET_ID, FONT_SET_IDS, FONT_SET_LOCALES, FONT_SET_REGISTRY, FONT_SET_ROLES, LOCALE_FONT_SET, fontSetMemberVar, isFontSetLocale, resolveFontSet, resolveFontSetMember };
+//# sourceMappingURL=fontSets.js.map
+//# sourceMappingURL=fontSets.js.map

package/dist/theme/fontSets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/fontSets.ts"],"names":[],"mappings":";AA0BO,IAAM,gBAAA,GAAmB;AAAA,EAC9B,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF;AAMO,IAAM,cAAA,GAAiB,CAAC,MAAA,EAAQ,OAAA,EAAS,MAAM;AA2DtD,IAAM,YAAA,GAA8B;AAAA,EAClC,EAAA,EAAI,cAAA;AAAA,EACJ,MAAA,EAAQ,IAAA;AAAA,EACR,MAAA,EAAQ,EAAE,IAAA,EAAM,cAAA,EAAe;AAAA,EAC/B,UAAA,EAAY;AACd,CAAA;AAEA,SAAS,MAAA,CACP,EAAA,EACA,MAAA,EACA,UAAA,EACA,UAAA,EACe;AACf,EAAA,OAAO;AAAA,IACL,EAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA,EAAQ,EAAE,IAAA,EAAM,kBAAA,EAAoB,cAAc,MAAA,CAAO,OAAA,CAAQ,IAAA,EAAM,GAAG,CAAA,EAAE;AAAA,IAC5E,UAAA;AAAA,IACA,GAAI,UAAA,GAAa,EAAE,UAAA,KAAe;AAAC,GACrC;AACF;AAMO,IAAM,iBAAA,GAAoB;AAAA;AAAA;AAAA,EAG/B,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,OAAA;AAAA,IACJ,KAAA,EAAO,OAAA;AAAA,IACP,IAAA,EAAM,IAAA;AAAA,IACN,GAAA,EAAK,KAAA;AAAA,IACL,KAAA,EAAO;AAAA,MACL,MAAM,EAAE,OAAA,EAAS,gBAAgB,OAAA,EAAS,CAAC,YAAY,CAAA,EAAE;AAAA,MACzD,OAAO,EAAE,OAAA,EAAS,gBAAgB,OAAA,EAAS,CAAC,YAAY,CAAA,EAAE;AAAA,MAC1D,MAAM,EAAE,OAAA,EAAS,gBAAgB,OAAA,EAAS,CAAC,YAAY,CAAA;AAAE;AAC3D,GACF;AAAA;AAAA,EAEA,SAAA,EAAW;AAAA,IACT,EAAA,EAAI,SAAA;AAAA,IACJ,KAAA,EAAO,oBAAA;AAAA,IACP,IAAA,EAAM,IAAA;AAAA,IACN,GAAA,EAAK,IAAA;AAAA,IACL,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAE,OAAA,EAAS,cAAA,EAAgB,OAAA,EAAS,CAAC,MAAA,CAAO,cAAA,EAAgB,cAAA,EAAgB,KAAK,CAAC,CAAA,EAAE;AAAA,MAC1F,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,eAAA;AAAA,QACT,OAAA,EAAS;AAAA,UACP,MAAA,CAAO,eAAA,EAAiB,eAAA,EAAiB,IAAI,CAAA;AAAA;AAAA,UAE7C,MAAA,CAAO,gBAAA,EAAkB,gBAAA,EAAkB,IAAI;AAAA;AACjD,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,cAAA;AAAA,QACT,SAAS,CAAC,MAAA,CAAO,gBAAgB,cAAA,EAAgB,KAAA,EAAO,MAAM,CAAC;AAAA;AACjE;AACF,GACF;AAAA;AAAA,EAEA,EAAA,EAAI;AAAA,IACF,EAAA,EAAI,IAAA;AAAA,IACJ,KAAA,EAAO,UAAA;AAAA,IACP,IAAA,EAAM,IAAA;AAAA,IACN,GAAA,EAAK,IAAA;AAAA,IACL,KAAA,EAAO;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,cAAA;AAAA,QACT,OAAA,EAAS;AAAA,UACP,MAAA,CAAO,cAAA,EAAgB,cAAA,EAAgB,IAAI,CAAA;AAAA,UAC3C,MAAA,CAAO,mBAAA,EAAqB,mBAAA,EAAqB,IAAI;AAAA;AACvD,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,eAAA;AAAA,QACT,SAAS,CAAC,MAAA,CAAO,eAAA,EAAiB,eAAA,EAAiB,KAAK,CAAC;AAAA,OAC3D;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,cAAA;AAAA,QACT,SAAS,CAAC,MAAA,CAAO,gBAAgB,cAAA,EAAgB,KAAA,EAAO,MAAM,CAAC;AAAA;AACjE;AACF,GACF;AAAA;AAAA,EAEA,EAAA,EAAI;AAAA,IACF,EAAA,EAAI,IAAA;AAAA,IACJ,KAAA,EAAO,QAAA;AAAA,IACP,IAAA,EAAM,IAAA;AAAA,IACN,GAAA,EAAK,IAAA;AAAA,IACL,KAAA,EAAO;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,cAAA;AAAA,QACT,OAAA,EAAS;AAAA,UACP,MAAA,CAAO,cAAA,EAAgB,cAAA,EAAgB,IAAI,CAAA;AAAA,UAC3C,MAAA,CAAO,cAAA,EAAgB,cAAA,EAAgB,IAAI;AAAA;AAC7C,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,eAAA;AAAA,QACT,SAAS,CAAC,MAAA,CAAO,eAAA,EAAiB,eAAA,EAAiB,KAAK,CAAC;AAAA,OAC3D;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,cAAA;AAAA,QACT,SAAS,CAAC,MAAA,CAAO,gBAAgB,cAAA,EAAgB,KAAA,EAAO,MAAM,CAAC;AAAA;AACjE;AACF;AAEJ;AAMO,IAAM,YAAA,GAAe,MAAA,CAAO,IAAA,CAAK,iBAAiB;AAGlD,IAAM,mBAAA,GAAiC;AAGvC,IAAM,eAAA,GAAkB;AAAA,EAC7B,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAGO,SAAS,gBAAgB,KAAA,EAAwC;AACtE,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,IAAa,gBAAA,CAAuC,SAAS,KAAK,CAAA;AAC5F;AAWO,SAAS,eAAe,IAAA,EAAuB;AACpD,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,IAAA,EAAK,CAAE,KAAA,CAAM,MAAM,CAAA,CAAE,CAAC,CAAA,EAAG,WAAA,EAAY,IAAK,EAAA;AAC/D,EAAA,MAAM,KAAK,eAAA,CAAgB,OAAO,CAAA,GAAI,eAAA,CAAgB,OAAO,CAAA,GAAI,mBAAA;AACjE,EAAA,OAAO,kBAAkB,EAAE,CAAA;AAC7B;AAOO,SAAS,oBAAA,CACd,KAAA,EACA,IAAA,EACA,QAAA,EACe;AACf,EAAA,MAAM,CAAA,GAAwB,iBAAA,CAAkB,KAAK,CAAA,CAAE,MAAM,IAAI,CAAA;AACjE,EAAA,MAAM,KAAA,GAAQ,QAAA,KAAa,MAAA,GAAY,MAAA,GAAY,CAAA,CAAE,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,EAAA,KAAO,QAAQ,CAAA;AAC1F,EAAA,OAAO,KAAA,IAAS,EAAE,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,EAAA,KAAO,CAAA,CAAE,OAAO,CAAA;AAC1D;AAYO,SAAS,gBAAA,CACd,KAAA,EACA,IAAA,EACA,QAAA,EACe;AACf,EAAA,MAAM,SAAS,iBAAA,CAAkB,KAAK,EAAE,KAAA,CAAM,IAAI,EAAE,OAAA,CAAQ,IAAA;AAAA,IAC1D,CAAC,CAAA,KAAqB,CAAA,CAAE,EAAA,KAAO;AAAA,GACjC;AACA,EAAA,IAAI,CAAC,MAAA,IAAU,MAAA,CAAO,MAAA,CAAO,IAAA,KAAS,gBAAgB,OAAO,IAAA;AAC7D,EAAA,MAAM,QAAA,GAAW,OAAO,UAAA,IAAc,IAAA;AACtC,EAAA,OAAO,cAAc,KAAK,CAAA,CAAA,EAAI,QAAQ,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA,CAAA;AACrD","file":"fontSets.js","sourcesContent":["/**\n * The Motir FONT-SET REGISTRY: which faces each locale's script is drawn in\n * (Story MOTIR-7733 · Subtask MOTIR-7843).\n *\n * A Type pairing (`./typography.ts`) decides the LATIN faces of the three roles\n * (sans / serif / mono). A font set decides the SCRIPT face that sits BEHIND\n * them, so a ja page draws its Latin in the pairing's face and its kana and\n * kanji in the ja set's face, under every pairing. The two axes are\n * independent: a set never changes which pairing is active, and a pairing never\n * changes which set a locale uses.\n *\n * ── Where the rows come from ────────────────────────────────────────────\n * Every set, member and default below is taken from\n * `docs/typography/font-sets.md` (MOTIR-7841), which read dooooWeb's mapping at\n * `225af77` and filled the roles dooooWeb leaves empty from cited references.\n * `inDooooWeb` carries that document's `in dooooWeb` / `added (not in dooooWeb)`\n * tag. Change a row here only together with that document; the package test\n * holds the two equal.\n *\n * ── What this module is NOT ─────────────────────────────────────────────\n * Data and pure resolvers only. It names CSS custom properties (the contract\n * between the app's `next/font` loader and `theme.css`) but sets none, loads no\n * face, and writes no CSS. Loading stays in the consuming app.\n */\n\n/** The eleven locales app.motir.co ships in. A closed product decision. */\nexport const FONT_SET_LOCALES = [\n  'en',\n  'zh',\n  'ja',\n  'ko',\n  'de',\n  'fr',\n  'es',\n  'it',\n  'nl',\n  'pl',\n  'pt',\n] as const;\n\n/** A locale the font-set registry knows. */\nexport type FontSetLocale = (typeof FONT_SET_LOCALES)[number];\n\n/** The three type roles every set covers: the same roles `--font-*` carries. */\nexport const FONT_SET_ROLES = ['sans', 'serif', 'mono'] as const;\n\n/** One of the three type roles. */\nexport type FontSetRole = (typeof FONT_SET_ROLES)[number];\n\n/**\n * Where a member's face comes from.\n *\n * - `type-pairing`: the active Type pairing's own face for the role. The Latin\n *   set's only member; it loads nothing and has no CSS variable.\n * - `next/font/google`: a Google Fonts face the app loads with `next/font`;\n *   `googleFamily` is the loader's export name (`Noto_Sans_JP`).\n */\nexport type FontSetMemberSource =\n  | { readonly kind: 'type-pairing' }\n  | { readonly kind: 'next/font/google'; readonly googleFamily: string };\n\n/** One selectable face in one role of one set. */\nexport interface FontSetMember {\n  /** Stable kebab-case slug, unique within its role. The value a pick stores. */\n  readonly id: string;\n  /** The display name, or `null` for the `type-pairing` member. */\n  readonly family: string | null;\n  readonly source: FontSetMemberSource;\n  /** `docs/typography/font-sets.md`'s tag: `in dooooWeb` (true) or `added` (false). */\n  readonly inDooooWeb: boolean;\n  /**\n   * The role whose member of the SAME id this member re-uses the face of. A\n   * CJK set's mono role draws its Han glyphs from the set's sans face (the Noto\n   * Sans Mono CJK practice, see the doc), so the face is loaded once and both\n   * roles read one variable.\n   */\n  readonly sameFaceAs?: FontSetRole;\n}\n\n/** One role of one set: its members, and which one a page uses by default. */\nexport interface FontSetRoleMembers {\n  /** The id of the member used when nobody has picked one. */\n  readonly default: string;\n  readonly members: readonly FontSetMember[];\n}\n\n/** A locale group's font set. */\nexport interface FontSet {\n  readonly id: string;\n  /** Display name for `/tokens` and the picker. */\n  readonly label: string;\n  /**\n   * The BCP 47 tag the set's `:lang()` rule matches. It is the tag the app\n   * renders on `<html lang>` (`zh`, not `zh-Hans`), because `:lang(zh)`\n   * matches `zh` and `zh-Hans` while `:lang(zh-Hans)` does not match `zh`.\n   * `null` for the Latin set, which is matched by its locales instead.\n   */\n  readonly lang: string | null;\n  /** True for a CJK set: its faces are unicode-range sliced and never preloaded. */\n  readonly cjk: boolean;\n  readonly roles: Readonly<Record<FontSetRole, FontSetRoleMembers>>;\n}\n\nconst TYPE_PAIRING: FontSetMember = {\n  id: 'type-pairing',\n  family: null,\n  source: { kind: 'type-pairing' },\n  inDooooWeb: false,\n};\n\nfunction google(\n  id: string,\n  family: string,\n  inDooooWeb: boolean,\n  sameFaceAs?: FontSetRole,\n): FontSetMember {\n  return {\n    id,\n    family,\n    source: { kind: 'next/font/google', googleFamily: family.replace(/ /g, '_') },\n    inDooooWeb,\n    ...(sameFaceAs ? { sameFaceAs } : {}),\n  };\n}\n\n/**\n * The registry, one entry per set. Ids are the doc's registry ids; dooooWeb's\n * own group names are noted beside each.\n */\nexport const FONT_SET_REGISTRY = {\n  // dooooWeb: `latin`. Its Latin picker faces are deliberately not members:\n  // behind the pairing's face they would never draw a glyph (font-sets.md § latin).\n  latin: {\n    id: 'latin',\n    label: 'Latin',\n    lang: null,\n    cjk: false,\n    roles: {\n      sans: { default: 'type-pairing', members: [TYPE_PAIRING] },\n      serif: { default: 'type-pairing', members: [TYPE_PAIRING] },\n      mono: { default: 'type-pairing', members: [TYPE_PAIRING] },\n    },\n  },\n  // dooooWeb: `chinese-simplified`.\n  'zh-Hans': {\n    id: 'zh-Hans',\n    label: 'Simplified Chinese',\n    lang: 'zh',\n    cjk: true,\n    roles: {\n      sans: { default: 'noto-sans-sc', members: [google('noto-sans-sc', 'Noto Sans SC', false)] },\n      serif: {\n        default: 'noto-serif-sc',\n        members: [\n          google('noto-serif-sc', 'Noto Serif SC', true),\n          // Draws Traditional / inherited forms, so never the default (font-sets.md § Region forms).\n          google('lxgw-wenkai-tc', 'LXGW WenKai TC', true),\n        ],\n      },\n      mono: {\n        default: 'noto-sans-sc',\n        members: [google('noto-sans-sc', 'Noto Sans SC', false, 'sans')],\n      },\n    },\n  },\n  // dooooWeb: `japanese`.\n  ja: {\n    id: 'ja',\n    label: 'Japanese',\n    lang: 'ja',\n    cjk: true,\n    roles: {\n      sans: {\n        default: 'noto-sans-jp',\n        members: [\n          google('noto-sans-jp', 'Noto Sans JP', true),\n          google('m-plus-rounded-1c', 'M PLUS Rounded 1c', true),\n        ],\n      },\n      serif: {\n        default: 'noto-serif-jp',\n        members: [google('noto-serif-jp', 'Noto Serif JP', false)],\n      },\n      mono: {\n        default: 'noto-sans-jp',\n        members: [google('noto-sans-jp', 'Noto Sans JP', false, 'sans')],\n      },\n    },\n  },\n  // dooooWeb: `korean`.\n  ko: {\n    id: 'ko',\n    label: 'Korean',\n    lang: 'ko',\n    cjk: true,\n    roles: {\n      sans: {\n        default: 'noto-sans-kr',\n        members: [\n          google('noto-sans-kr', 'Noto Sans KR', true),\n          google('nanum-gothic', 'Nanum Gothic', true),\n        ],\n      },\n      serif: {\n        default: 'noto-serif-kr',\n        members: [google('noto-serif-kr', 'Noto Serif KR', false)],\n      },\n      mono: {\n        default: 'noto-sans-kr',\n        members: [google('noto-sans-kr', 'Noto Sans KR', false, 'sans')],\n      },\n    },\n  },\n} as const satisfies Record<string, FontSet>;\n\n/** The id of every registered set. */\nexport type FontSetId = keyof typeof FONT_SET_REGISTRY;\n\n/** All set ids, in registry order. */\nexport const FONT_SET_IDS = Object.keys(FONT_SET_REGISTRY) as FontSetId[];\n\n/** The set an unknown or empty page language falls back to: the app renders it in English. */\nexport const DEFAULT_FONT_SET_ID: FontSetId = 'latin';\n\n/** Which set each locale is drawn in (font-sets.md § Locale → set). */\nexport const LOCALE_FONT_SET = {\n  en: 'latin',\n  zh: 'zh-Hans',\n  ja: 'ja',\n  ko: 'ko',\n  de: 'latin',\n  fr: 'latin',\n  es: 'latin',\n  it: 'latin',\n  nl: 'latin',\n  pl: 'latin',\n  pt: 'latin',\n} as const satisfies Record<FontSetLocale, FontSetId>;\n\n/** Narrowing guard: is an arbitrary value one of the eleven locales? */\nexport function isFontSetLocale(value: unknown): value is FontSetLocale {\n  return typeof value === 'string' && (FONT_SET_LOCALES as readonly string[]).includes(value);\n}\n\n/**\n * The set for an `<html lang>` value. Matches the primary subtag\n * case-insensitively (`ja-JP` → ja, `PT-br` → pt, `zh-Hans` → zh).\n *\n * The fallback is explicit: an empty or unknown tag returns the Latin set,\n * because the app renders an unknown language in English. It never falls back\n * to \"the nearest CJK set\". Use `isFontSetLocale` on the primary subtag to tell\n * a fallback from a match.\n */\nexport function resolveFontSet(lang: string): FontSet {\n  const primary = lang.trim().split(/[-_]/)[0]?.toLowerCase() ?? '';\n  const id = isFontSetLocale(primary) ? LOCALE_FONT_SET[primary] : DEFAULT_FONT_SET_ID;\n  return FONT_SET_REGISTRY[id];\n}\n\n/**\n * A member of one role of one set, by id. A missing or unknown id (a stored\n * pick naming a member that has since been removed) returns that role's\n * default, never another set's face.\n */\nexport function resolveFontSetMember(\n  setId: FontSetId,\n  role: FontSetRole,\n  memberId?: string,\n): FontSetMember {\n  const r: FontSetRoleMembers = FONT_SET_REGISTRY[setId].roles[role];\n  const named = memberId === undefined ? undefined : r.members.find((m) => m.id === memberId);\n  return named ?? r.members.find((m) => m.id === r.default)!;\n}\n\n/**\n * The CSS custom property the app's `next/font` loader assigns to a member's\n * face and `theme.css` reads: `--font-set-<set>-<role>-<member>`. This name is\n * the contract between the registry, the loader and the stylesheet, so it is\n * built here and nowhere else.\n *\n * A member that re-uses another role's face (`sameFaceAs`) returns THAT role's\n * variable, so the face is declared once. The `type-pairing` member, and an id\n * the role does not have, return `null`.\n */\nexport function fontSetMemberVar(\n  setId: FontSetId,\n  role: FontSetRole,\n  memberId: string,\n): string | null {\n  const member = FONT_SET_REGISTRY[setId].roles[role].members.find(\n    (m: FontSetMember) => m.id === memberId,\n  );\n  if (!member || member.source.kind === 'type-pairing') return null;\n  const faceRole = member.sameFaceAs ?? role;\n  return `--font-set-${setId}-${faceRole}-${member.id}`;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motir/design-system",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Motir's 3-axis design system (colour · style · type): distributable token CSS, the axis registries, the theme-apply API, and framework-agnostic React primitives. Shared by motir-core and planner-scaffolded products.",
   "license": "GPL-3.0-only",
   "repository": {
@@ -66,6 +66,6 @@
     "happy-dom": "^20.9.0",
     "tsup": "^8.5.0",
     "typescript": "^5",
-    "vitest": "^4.1.7"
+    "vitest": "^4.1.11"
   }
 }

package/theme.css

@@ -135,11 +135,20 @@
   --color-link-pressed: #005bab;
 
   /* ── Typography ─────────────────────────────────────────────────── */
-  /* CSS variables set by next/font in app/layout.tsx. */
+  /* The three role tokens, composed from a pairing chain, a script face and a
+     generic tail (MOTIR-7845). Declared here so Tailwind registers the
+     font-sans / font-serif / font-mono utilities; the same composition is
+     re-declared, unlayered, in the FONT SETS section, which is where it is
+     explained. The -source variables are set by next/font in app/fonts.ts. */
   --font-sans:
-    var(--font-sans-source, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-serif: var(--font-serif-source, Georgia), serif;
-  --font-mono: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+    var(--font-sans-pairing, 'Segoe UI'),
+    var(--font-script-sans, var(--font-sans-tail, sans-serif)), var(--font-sans-tail, sans-serif);
+  --font-serif:
+    var(--font-serif-pairing, Georgia), var(--font-script-serif, var(--font-serif-tail, serif)),
+    var(--font-serif-tail, serif);
+  --font-mono:
+    var(--font-mono-pairing, 'SF Mono'), var(--font-script-mono, var(--font-mono-tail, monospace)),
+    var(--font-mono-tail, monospace);
 
   /* Type scale — Notion-ish hierarchy.
      Headings (xl and up) default to serif; body defaults to sans. */
@@ -262,6 +271,22 @@
   --focus-ring-color: var(--color-primary);
 }
 
+/* The BASE (motir) pairing's chains for the three roles (MOTIR-7845). Kept
+   outside @theme so Tailwind does not mint font-sans-pairing utilities, and
+   placed before every [data-type] block so each pairing overrides it. The
+   pairing chain names faces only; its generic keywords live in the tail, and
+   so do -apple-system and BlinkMacSystemFont, which name the platform's UI font
+   with its own CJK cascade (PingFang, Hiragino) and would draw the commonest
+   Han glyphs ahead of the font set's face (MOTIR-7880). */
+:root {
+  --font-sans-pairing: var(--font-sans-source, 'Segoe UI'), 'Segoe UI', Roboto;
+  --font-sans-tail: -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-serif-pairing: var(--font-serif-source, Georgia);
+  --font-serif-tail: serif;
+  --font-mono-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-mono-tail: monospace;
+}
+
 /* ═══════════════════════════════════════════════════════════════════════
    TIER 1 — Dark mode color overrides
    Activated when [data-theme="dark"] is set on <html> (by the init
@@ -4006,6 +4031,18 @@
   --el-showcase-wave-1: var(--color-primary);
   --el-showcase-wave-2: var(--color-accent-teal);
   --el-showcase-wave-3: var(--color-accent);
+  /* motir.co's live link ("Motir builds itself" in the header): its square
+     and its words walk the wave hues. The mark is each hue as is; the text
+     is each hue mixed 60/40 with the primary ink, because the raw teal and
+     warm hues fall below AA as text in most light palettes (down to 2.4:1),
+     and at 60% every hue clears 4.5:1 on the page and the surface in every
+     palette and theme. */
+  --el-live-mark-1: var(--color-primary);
+  --el-live-mark-2: var(--color-accent-teal);
+  --el-live-mark-3: var(--color-accent);
+  --el-live-text-1: color-mix(in srgb, var(--color-primary) 60%, var(--color-foreground));
+  --el-live-text-2: color-mix(in srgb, var(--color-accent-teal) 60%, var(--color-foreground));
+  --el-live-text-3: color-mix(in srgb, var(--color-accent) 60%, var(--color-foreground));
 }
 
 /* Dark-mode lift for the sidebar hover token. The other three --el-sidebar-*
@@ -4331,12 +4368,14 @@
 
 /* The `motir` BASE type pairing, re-asserted (MOTIR-3933) — same reason as
    the base palette above. The type axis carries no descendant rules, so these
-   three role tokens are the whole of it. */
+   three roles' pairing chains and tails are the whole of it. */
 [data-appearance-scope][data-type='motir'] {
-  --font-mono: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
-  --font-sans:
-    var(--font-sans-source, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-serif: var(--font-serif-source, Georgia), serif;
+  --font-mono-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-mono-tail: monospace;
+  --font-sans-pairing: var(--font-sans-source, 'Segoe UI'), 'Segoe UI', Roboto;
+  --font-sans-tail: -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-serif-pairing: var(--font-serif-source, Georgia);
+  --font-serif-tail: serif;
 }
 
 /* ── Palette: Cobalt (data-palette="cobalt") — Subtask 7.3.49 ───────────────
@@ -4968,17 +5007,18 @@
 
 [data-type='motir-sans'] {
   /* Sans headlines — re-point the editorial serif role at the sans stack. */
-  --font-serif:
-    var(--font-sans-source, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-serif-pairing: var(--font-sans-source, 'Segoe UI'), 'Segoe UI', Roboto;
+  --font-serif-tail: -apple-system, BlinkMacSystemFont, sans-serif;
   /* Re-asserted at the BASE value, not omitted (MOTIR-3933). An omitted role
        inherits the ANCESTOR's, which is invisible on `<html>` and wrong in a
        nested scope: this pairing under a mono ancestor rendered mono. Unlike the
        colour axis there is no `[data-appearance-scope]` layer to fall back
        through — `--font-*` are role tokens, not `--el-*` — so every
        `[data-type]` block must be TOTAL over the three roles. */
-  --font-sans:
-    var(--font-sans-source, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-sans-pairing: var(--font-sans-source, 'Segoe UI'), 'Segoe UI', Roboto;
+  --font-sans-tail: -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-mono-tail: monospace;
 }
 
 [data-type='motir-mono'] {
@@ -4987,15 +5027,18 @@
      content) re-types to a code-native monospace voice, not just headlines (Yue,
      2026-06-19: the type axis must re-type the whole UI, chrome included). Meta
      already is mono. ONLY --font-* tokens (the disjointness guard). */
-  --font-serif: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
-  --font-sans: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-serif-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-serif-tail: monospace;
+  --font-sans-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-sans-tail: monospace;
   /* Re-asserted at the BASE value, not omitted (MOTIR-3933). An omitted role
        inherits the ANCESTOR's, which is invisible on `<html>` and wrong in a
        nested scope: this pairing under a mono ancestor rendered mono. Unlike the
        colour axis there is no `[data-appearance-scope]` layer to fall back
        through — `--font-*` are role tokens, not `--el-*` — so every
        `[data-type]` block must be TOTAL over the three roles. */
-  --font-mono: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-mono-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-mono-tail: monospace;
 }
 
 /* ── Palette: Spectrum (data-palette="spectrum") — Subtask 7.3.52 ───────────
@@ -6011,15 +6054,18 @@
      (Yue, 2026-06-19: the type axis must re-type the whole UI, chrome included).
      Meta stays JetBrains Mono (--font-mono). ONLY font tokens here (the
      disjointness guard): no colour (--el / --color) or shape token. */
-  --font-serif: var(--font-grotesk-source), ui-sans-serif, system-ui, sans-serif;
-  --font-sans: var(--font-grotesk-source), ui-sans-serif, system-ui, sans-serif;
+  --font-serif-pairing: var(--font-grotesk-source);
+  --font-serif-tail: ui-sans-serif, system-ui, sans-serif;
+  --font-sans-pairing: var(--font-grotesk-source);
+  --font-sans-tail: ui-sans-serif, system-ui, sans-serif;
   /* Re-asserted at the BASE value, not omitted (MOTIR-3933). An omitted role
        inherits the ANCESTOR's, which is invisible on `<html>` and wrong in a
        nested scope: this pairing under a mono ancestor rendered mono. Unlike the
        colour axis there is no `[data-appearance-scope]` layer to fall back
        through — `--font-*` are role tokens, not `--el-*` — so every
        `[data-type]` block must be TOTAL over the three roles. */
-  --font-mono: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-mono-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-mono-tail: monospace;
 }
 
 [data-type='editorial'] {
@@ -6030,16 +6076,18 @@
      so the change is a real, visible FACE swap — magazine, considered — not a
      size tweak. ONLY --font-* role tokens here (the disjointness guard): no
      colour (--el/--color) or shape (--radius/--spacing/--shadow) token. */
-  --font-serif: var(--font-editorial-source), 'Fraunces', Georgia, serif;
+  --font-serif-pairing: var(--font-editorial-source), 'Fraunces', Georgia;
+  --font-serif-tail: serif;
   /* Re-asserted at the BASE value, not omitted (MOTIR-3933). An omitted role
        inherits the ANCESTOR's, which is invisible on `<html>` and wrong in a
        nested scope: this pairing under a mono ancestor rendered mono. Unlike the
        colour axis there is no `[data-appearance-scope]` layer to fall back
        through — `--font-*` are role tokens, not `--el-*` — so every
        `[data-type]` block must be TOTAL over the three roles. */
-  --font-sans:
-    var(--font-sans-source, -apple-system), BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: var(--font-mono-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-sans-pairing: var(--font-sans-source, 'Segoe UI'), 'Segoe UI', Roboto;
+  --font-sans-tail: -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono-pairing: var(--font-mono-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-mono-tail: monospace;
 }
 
 [data-type='mono-technical'] {
@@ -6052,7 +6100,132 @@
      JetBrains mono stack). Only --font-* role tokens are touched — colour
      (--el/--color) and shape (--radius/--spacing) are the other two, independent
      axes (the disjointness guard). */
-  --font-serif: var(--font-mono-technical-source, ui-monospace), 'SF Mono', Menlo, monospace;
-  --font-mono: var(--font-mono-technical-source, ui-monospace), 'SF Mono', Menlo, monospace;
-  --font-sans: var(--font-mono-technical-source, ui-monospace), 'SF Mono', Menlo, monospace;
+  --font-serif-pairing: var(--font-mono-technical-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-serif-tail: monospace;
+  --font-mono-pairing: var(--font-mono-technical-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-mono-tail: monospace;
+  --font-sans-pairing: var(--font-mono-technical-source, 'SF Mono'), 'SF Mono', Menlo;
+  --font-sans-tail: monospace;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   FONT SETS — the script face behind the pairing (Story MOTIR-7733 · MOTIR-7845)
+   A Type pairing (the [data-type] blocks above) decides each role's LATIN
+   faces. A font set decides the SCRIPT face that sits BEHIND them, chosen by
+   the language of the element: on <html lang="ja" data-type="editorial">
+   --font-serif resolves to Fraunces (Latin glyphs), then the ja set's serif
+   face (kana and kanji), then the generic tail.
+
+   The two axes are composed ONCE, in the rule below, from three tokens per
+   role, so neither axis multiplies the other:
+     --font-<role>-pairing  the pairing's named faces, with NO generic keyword.
+                            A generic (serif, sans-serif, system-ui, ui-*) maps
+                            to one system font, which on a CJK system covers
+                            CJK and would pre-empt the set's face.
+     --font-script-<role>   the set's face for the language (the blocks below).
+     --font-<role>-tail     the pairing's generic tail, as it was before.
+
+   Every name in this section comes from packages/design-system/src/theme/
+   fontSets.ts (FONT_SET_REGISTRY, LOCALE_FONT_SET, fontSetMemberVar). The
+   consuming app's next/font loader assigns the --font-set-* variables; this
+   file assigns none of them. motir.co imports this file and loads no CJK
+   face, so every var() here carries a fallback: an undefined variable without
+   one would make the whole font-family invalid at computed time, and the
+   pairing's Latin face would be lost with it.
+
+   Only --font-* custom properties are set here: no @font-face, no
+   unicode-range, no colour or shape token.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* The composition. A custom property's var() is resolved on the element that
+   DECLARES it, so every element that can change one of the inputs (a pairing,
+   a language, a picked member) re-composes the three roles itself. */
+:root,
+[data-type],
+[lang],
+[data-font-set-sans],
+[data-font-set-serif],
+[data-font-set-mono] {
+  --font-sans:
+    var(--font-sans-pairing, 'Segoe UI'),
+    var(--font-script-sans, var(--font-sans-tail, sans-serif)), var(--font-sans-tail, sans-serif);
+  --font-serif:
+    var(--font-serif-pairing, Georgia), var(--font-script-serif, var(--font-serif-tail, serif)),
+    var(--font-serif-tail, serif);
+  --font-mono:
+    var(--font-mono-pairing, 'SF Mono'), var(--font-script-mono, var(--font-mono-tail, monospace)),
+    var(--font-mono-tail, monospace);
+}
+
+/* The script token is declared only on an element that carries a lang
+   attribute, and every element below it INHERITS the value. `:lang()` alone
+   would match every descendant and re-declare the set's default on each one,
+   so a nested [data-type] preview inside a page with a picked member would
+   re-compose with the default and lose the pick.
+
+   Latin: no script face. `initial` makes the token the guaranteed-invalid
+   value, so the composition's fallback (the pairing's own tail) takes the slot
+   and the stack equals the pairing's stack exactly. Listed per locale so a
+   Latin-language element nested in a CJK page resets. A page whose language no
+   set lists matches no block and also gets Latin, as resolveFontSet falls
+   back. */
+[lang]:lang(en),
+[lang]:lang(de),
+[lang]:lang(fr),
+[lang]:lang(es),
+[lang]:lang(it),
+[lang]:lang(nl),
+[lang]:lang(pl),
+[lang]:lang(pt) {
+  --font-script-sans: initial;
+  --font-script-serif: initial;
+  --font-script-mono: initial;
+}
+
+/* Simplified Chinese (zh-Hans): each role's default member. A CJK mono role
+   draws its Han glyphs from the set's sans face (fontSets.ts sameFaceAs), so
+   the block stays total over the three roles while loading no extra face. */
+[lang]:lang(zh) {
+  --font-script-sans: var(--font-set-zh-Hans-sans-noto-sans-sc, sans-serif);
+  --font-script-serif: var(--font-set-zh-Hans-serif-noto-serif-sc, serif);
+  --font-script-mono: var(--font-set-zh-Hans-sans-noto-sans-sc, monospace);
+}
+
+/* A member picked by name. Comes after the set's block, so on an element
+   carrying both a lang and the attribute this one wins the specificity tie.
+   An id the registry does not list matches nothing and keeps the default. */
+:lang(zh)[data-font-set-serif='lxgw-wenkai-tc'] {
+  --font-script-serif: var(--font-set-zh-Hans-serif-lxgw-wenkai-tc, serif);
+}
+
+/* Japanese (ja): each role's default member. A CJK mono role
+   draws its Han glyphs from the set's sans face (fontSets.ts sameFaceAs), so
+   the block stays total over the three roles while loading no extra face. */
+[lang]:lang(ja) {
+  --font-script-sans: var(--font-set-ja-sans-noto-sans-jp, sans-serif);
+  --font-script-serif: var(--font-set-ja-serif-noto-serif-jp, serif);
+  --font-script-mono: var(--font-set-ja-sans-noto-sans-jp, monospace);
+}
+
+/* A member picked by name. Comes after the set's block, so on an element
+   carrying both a lang and the attribute this one wins the specificity tie.
+   An id the registry does not list matches nothing and keeps the default. */
+:lang(ja)[data-font-set-sans='m-plus-rounded-1c'] {
+  --font-script-sans: var(--font-set-ja-sans-m-plus-rounded-1c, sans-serif);
+}
+
+/* Korean (ko): each role's default member. A CJK mono role
+   draws its Han glyphs from the set's sans face (fontSets.ts sameFaceAs), so
+   the block stays total over the three roles while loading no extra face. */
+[lang]:lang(ko) {
+  --font-script-sans: var(--font-set-ko-sans-noto-sans-kr, sans-serif);
+  --font-script-serif: var(--font-set-ko-serif-noto-serif-kr, serif);
+  --font-script-mono: var(--font-set-ko-sans-noto-sans-kr, monospace);
+}
+
+/* A member picked by name. Comes after the set's block, so on an element
+   carrying both a lang and the attribute this one wins the specificity tie.
+   An id the registry does not list matches nothing and keeps the default. */
+:lang(ko)[data-font-set-sans='nanum-gothic'] {
+  --font-script-sans: var(--font-set-ko-sans-nanum-gothic, sans-serif);
 }