fix: live mosaic + ISO data + broken legacy pages

Three intertwined fixes:

1. Script mosaic was showing (error) on every cell
   Root cause: components used import.meta.glob("/maps/*.json") to
   preload map IR, but Vite's glob doesn't see files in public/ in dev
   (only source files). The strategy was registered with an empty map
   dictionary, so every transliterate() call threw "Map dependency
   missing".
   Fix: switched ScriptMosaic, MapExplorer, MapPreview, MapCatalogue,
   HeroMorph, QuickBox to use fetch() at runtime, walking transitive
   dependencies in two passes so multi-stage pipelines resolve.
   Also corrected six system codes in the mosaic that never existed
   (un-hin-Deva-Latn-1972 -> un-hin-Deva-Latn-2016, etc.).

2. /about, /docs, /blog rendered without styles
   Root cause: those pages used legacy design tokens (--muted, --text,
   --border, --accent, --bg, --surface) that no longer exist after the
   redesign.
   Fix: bulk-migrated every legacy token to the new design system
   (--color-stone, --color-ink, --color-rule, --color-brand, etc.).

3. Wired in @iso24229/iso15924-data and @iso24229/iso639-data
   Every transliteration system carries ISO 15924 script codes (source
   + destination) and ISO 639 language info (or multiple for
   cross-language systems). New src/data/iso.ts resolves codes to
   human names at build time:
   - scriptName("Cyrl") -> "Cyrillic"
   - scriptNumber("Cyrl") -> 220
   - languageName("eng") -> "English"
   - parseLanguageField("iso-639-2:eng|iso-639-2:fr") -> "English / French"
   Map detail pages now show "Cyrillic · 220" instead of bare "Cyrl",
   and language fields render as "English / French" instead of raw
   "iso-639-2:eng|iso-639-2:fr".

Tests:
- Added test/iso-data.test.ts (10 tests covering script + lang resolution)
- Updated script-mosaic.test.ts to mock fetch()
- All 129 tests pass

Author: ronaldtse

package-lock.json

@@ -25,6 +25,8 @@
     "@fontsource-variable/inter-tight": "^5.3.0",
     "@fontsource-variable/newsreader": "^5.3.0",
     "@fontsource/jetbrains-mono": "^5.3.0",
+    "@iso24229/iso15924-data": "^0.2.0",
+    "@iso24229/iso639-data": "^0.2.0",
     "@tailwindcss/vite": "^4.0.0",
     "astro": "^7.0.0",
     "interscript-ts": "file:../interscript-ts",

package.json

@@ -48,12 +48,18 @@ async function ensureEngine() {
   if (transliterateFn) return
   try {
     const mod = await import("interscript-ts")
-    const modules = import.meta.glob("/maps/*.json", { eager: true, as: "raw" })
+    const wanted = new Set<string>(morphs.map((m) => m.system))
     const maps: Record<string, unknown> = {}
-    for (const [path, raw] of Object.entries(modules)) {
-      const code = path.match(/\/maps\/(.+)\.json$/)?.[1]
-      if (code) maps[code] = JSON.parse(raw as string)
+    const fetchOne = async (code: string) => {
+      if (maps[code]) return
+      const res = await fetch(`/maps/${code}.json`)
+      if (!res.ok) return
+      const json = (await res.json()) as { dependencies?: string[] }
+      maps[code] = json
+      for (const dep of json.dependencies ?? []) wanted.add(dep)
     }
+    for (const code of wanted) await fetchOne(code)
+    for (const code of [...wanted]) await fetchOne(code)
     mod.reset()
     mod.configure({ strategies: [mod.bundledStrategy(maps)] })
     transliterateFn = mod.transliterate

src/components/HeroMorph.vue

@@ -21,12 +21,20 @@ async function ensureEngine() {
   engine.value = "loading"
   try {
     const mod = await import("interscript-ts")
-    const modules = import.meta.glob("/maps/*.json", { eager: true, as: "raw" })
+    // fetch() the systems we need + their transitive deps. import.meta.glob
+    // doesn't see files under public/ in dev.
+    const wanted = new Set<string>(props.systems.map((s) => s.code))
     const maps: Record<string, unknown> = {}
-    for (const [path, raw] of Object.entries(modules)) {
-      const code = path.match(/\/maps\/(.+)\.json$/)?.[1]
-      if (code) maps[code] = JSON.parse(raw as string)
+    const fetchOne = async (code: string) => {
+      if (maps[code]) return
+      const res = await fetch(`/maps/${code}.json`)
+      if (!res.ok) return
+      const json = (await res.json()) as { dependencies?: string[] }
+      maps[code] = json
+      for (const dep of json.dependencies ?? []) wanted.add(dep)
     }
+    for (const code of wanted) await fetchOne(code)
+    for (const code of [...wanted]) await fetchOne(code)
     mod.reset()
     mod.configure({ strategies: [mod.bundledStrategy(maps)] })
     transliterateFn = mod.transliterate

src/components/MapExplorer.vue

@@ -38,12 +38,20 @@ async function ensureEngine() {
   engine.value = "loading"
   try {
     const mod = await import("interscript-ts")
-    const modules = import.meta.glob("/maps/*.json", { eager: true, as: "raw" })
+    // Fetch this system + its transitive deps. import.meta.glob can't
+    // see public/ files in dev.
+    const wanted = new Set<string>([props.systemCode])
     const maps: Record<string, unknown> = {}
-    for (const [path, raw] of Object.entries(modules)) {
-      const code = path.match(/\/maps\/(.+)\.json$/)?.[1]
-      if (code) maps[code] = JSON.parse(raw as string)
+    const fetchOne = async (code: string) => {
+      if (maps[code]) return
+      const res = await fetch(`/maps/${code}.json`)
+      if (!res.ok) return
+      const json = (await res.json()) as { dependencies?: string[] }
+      maps[code] = json
+      for (const dep of json.dependencies ?? []) wanted.add(dep)
     }
+    for (const code of wanted) await fetchOne(code)
+    for (const code of [...wanted]) await fetchOne(code)
     mod.reset()
     mod.configure({ strategies: [mod.bundledStrategy(maps)] })
     transliterateFn = mod.transliterate

src/components/MapPreview.vue

@@ -40,12 +40,18 @@ async function ensureEngine() {
   if (transliterateFn) return
   try {
     const mod = await import("interscript-ts")
-    const modules = import.meta.glob("/maps/*.json", { eager: true, as: "raw" })
+    const wanted = new Set<string>(systems.map((s) => s.code))
     const maps: Record<string, unknown> = {}
-    for (const [path, raw] of Object.entries(modules)) {
-      const code = path.match(/\/maps\/(.+)\.json$/)?.[1]
-      if (code) maps[code] = JSON.parse(raw as string)
+    const fetchOne = async (code: string) => {
+      if (maps[code]) return
+      const res = await fetch(`/maps/${code}.json`)
+      if (!res.ok) return
+      const json = (await res.json()) as { dependencies?: string[] }
+      maps[code] = json
+      for (const dep of json.dependencies ?? []) wanted.add(dep)
     }
+    for (const code of wanted) await fetchOne(code)
+    for (const code of [...wanted]) await fetchOne(code)
     mod.reset()
     mod.configure({ strategies: [mod.bundledStrategy(maps)] })
     transliterateFn = mod.transliterate

src/components/QuickBox.vue

@@ -61,8 +61,8 @@ const cells: Cell[] = [
     id: "devanagari",
     script: "Devanagari",
     transforms: [
-      { system: "un-hin-Deva-Latn-1972", input: "महात्मा", authority: "UN", note: "Hindi · 1972" },
-      { system: "alalc-mar-Deva-Latn-1997", input: "मुंबई", authority: "ALA-LC", note: "Marathi · 1997" },
+      { system: "un-hin-Deva-Latn-2016", input: "महात्मा", authority: "UN", note: "Hindi · 2016" },
+      { system: "alalc-hin-Deva-Latn-2011", input: "मुंबई", authority: "ALA-LC", note: "Hindi · 2011" },
       { system: "iso-hin-Deva-Latn-15919-2001", input: "फिलिपींस", authority: "ISO", note: "ISO 15919" },
     ],
   },
@@ -71,8 +71,8 @@ const cells: Cell[] = [
     script: "Han",
     transforms: [
       { system: "acadsin-zho-Hani-Latn-2002", input: "台北", authority: "Academia Sinica", note: "Tongyong · 2002" },
-      { system: "bgnpcgn-zho-Hani-Latn-1979", input: "北京", authority: "BGN/PCGN", note: "Hanyu Pinyin · 1979" },
-      { system: "iso-zho-Hani-Latn-1996", input: "香港", authority: "ISO", note: "ISO 7098 · 1996" },
+      { system: "bgnpcgn-zho-Hans-Latn-1979", input: "北京", authority: "BGN/PCGN", note: "Hanyu Pinyin · 1979" },
+      { system: "sac-zho-Hans-Latn-1979", input: "香港", authority: "SAC", note: "Hans · 1979" },
     ],
   },
   {
@@ -87,9 +87,9 @@ const cells: Cell[] = [
     id: "greek",
     script: "Greek",
     transforms: [
-      { system: "iso-grc-Grek-Latn-843-1997", input: "Αθήνα", authority: "ISO", note: "Greek · 843/1997" },
-      { system: "alalc-grc-Grek-Latn-1997", input: "Θεσσαλονίκη", authority: "ALA-LC", note: "Greek · 1997" },
-      { system: "bgnpcgn-grc-Grek-Latn-1962", input: "Ελλάδα", authority: "BGN/PCGN", note: "Greek · 1962" },
+      { system: "iso-ell-Grek-Latn-843-1997-t1", input: "Αθήνα", authority: "ISO", note: "Greek · 843/1997" },
+      { system: "alalc-ell-Grek-Latn-1997", input: "Θεσσαλονίκη", authority: "ALA-LC", note: "Greek · 1997" },
+      { system: "bgnpcgn-ell-Grek-Latn-1962", input: "Ελλάδα", authority: "BGN/PCGN", note: "Greek · 1962" },
     ],
   },
 ]
@@ -105,12 +105,30 @@ async function ensureEngine() {
   if (transliterateFn) return
   try {
     const mod = await import("interscript-ts")
-    const modules = import.meta.glob("/maps/*.json", { eager: true, as: "raw" })
+    // Collect every system code referenced by the mosaic, plus their
+    // transitive dependencies. fetch() each one — import.meta.glob
+    // doesn't see files under public/ in dev.
+    const wanted = new Set<string>()
+    for (const cell of cells) {
+      for (const tf of cell.transforms) {
+        wanted.add(tf.system)
+      }
+    }
     const maps: Record<string, unknown> = {}
-    for (const [path, raw] of Object.entries(modules)) {
-      const code = path.match(/\/maps\/(.+)\.json$/)?.[1]
-      if (code) maps[code] = JSON.parse(raw as string)
+    // Fetch in two passes: first the systems themselves, then any
+    // transitive deps they declare (so multi-stage pipelines resolve).
+    const fetchOne = async (code: string) => {
+      if (maps[code]) return
+      const res = await fetch(`/maps/${code}.json`)
+      if (!res.ok) return
+      const json = (await res.json()) as { dependencies?: string[] }
+      maps[code] = json
+      for (const dep of json.dependencies ?? []) wanted.add(dep)
     }
+    for (const code of wanted) await fetchOne(code)
+    // Second pass for any deps discovered above.
+    for (const code of [...wanted]) await fetchOne(code)
+
     mod.reset()
     mod.configure({ strategies: [mod.bundledStrategy(maps)] })
     transliterateFn = mod.transliterate

src/components/ScriptMosaic.vue

@@ -0,0 +1,87 @@
+/**
+ * Build-time helpers for ISO 15924 (script) and ISO 639 (language)
+ * code resolution. Powered by @iso24229/iso15924-data and
+ * @iso24229/iso639-data — the canonical ISO registries, kept in sync
+ * with the upstream sources via npm.
+ *
+ * Server-only: imports `node:fs`. Used in Astro frontmatter, not in
+ * browser islands.
+ */
+
+import { codes as scriptCodes } from "@iso24229/iso15924-data"
+import { parts as langParts } from "@iso24229/iso639-data"
+
+const langIndex = new Map<string, string>()
+for (const part of ["639-1", "639-2", "639-3", "639-5"] as const) {
+  for (const [code, entry] of Object.entries(langParts[part] ?? {})) {
+    const name = (entry as { name?: { en?: string } }).name?.en
+    if (name && !langIndex.has(code)) langIndex.set(code, name)
+  }
+}
+
+const scriptIndex = new Map<string, { name: string; number: string | number }>()
+for (const [code, entry] of Object.entries(scriptCodes)) {
+  const name = (entry as { name?: { en?: string }; pva?: string }).name?.en
+    ?? (entry as { pva?: string }).pva
+    ?? code
+  scriptIndex.set(code, { name, number: (entry as { number: string | number }).number })
+}
+
+/**
+ * Resolve an ISO 15924 script code (e.g. "Cyrl", "Arab") to its
+ * English display name. Falls back to the code itself if unknown.
+ */
+export function scriptName(code: string): string {
+  return scriptIndex.get(code)?.name ?? code
+}
+
+/**
+ * Resolve an ISO 15924 script code to its numeric identifier.
+ */
+export function scriptNumber(code: string): string | number | undefined {
+  return scriptIndex.get(code)?.number
+}
+
+/**
+ * Resolve an ISO 639 language code (any of 639-1/2/3/5 — e.g. "en",
+ * "eng", "deu", "ger") to its English display name.
+ */
+export function languageName(code: string): string {
+  return langIndex.get(code) ?? code
+}
+
+/**
+ * Parse a catalogue `language` field which may take the form
+ * `iso-639-2:eng` or `iso-639-2:eng|iso-639-2:en` (cross-language).
+ * Returns the resolved display name(s), comma-separated.
+ */
+export function parseLanguageField(field: string | undefined): string {
+  if (!field) return ""
+  const parts = field.split("|").map((p) => p.trim())
+  const names = parts
+    .map((p) => {
+      const m = p.match(/^iso-639-\d:(.+)$/)
+      if (!m) return p
+      return languageName(m[1]!)
+    })
+    .filter(Boolean)
+  return names.join(" / ")
+}
+
+export interface ScriptInfo {
+  code: string
+  name: string
+  number?: string | number
+}
+
+export interface LanguageInfo {
+  code: string
+  name: string
+}
+
+/** All known script codes — used to populate filter facets. */
+export function allScripts(): ScriptInfo[] {
+  return [...scriptIndex.entries()]
+    .map(([code, { name, number }]) => ({ code, name, number }))
+    .sort((a, b) => a.code.localeCompare(b.code))
+}

src/data/iso.ts

@@ -29,7 +29,7 @@ import Base from "../layouts/Base.astro"
   h1 {
     font-size: clamp(4rem, 12vw, 8rem);
     margin: 0;
-    color: var(--accent);
+    color: var(--color-brand);
     letter-spacing: -0.05em;
   }
   .lead {
@@ -45,13 +45,13 @@ import Base from "../layouts/Base.astro"
   }
   .suggestions li {
     padding: 0.5rem 0;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--color-rule);
   }
   .search-hint {
-    color: var(--muted);
+    color: var(--color-stone);
     margin-top: 2rem;
   }
   a {
-    color: var(--accent);
+    color: var(--color-brand);
   }
 </style>

src/pages/404.astro

@@ -70,9 +70,9 @@ import Base from "../layouts/Base.astro"
   }
   p {
     line-height: 1.7;
-    color: var(--text);
+    color: var(--color-ink);
   }
   a {
-    color: var(--accent);
+    color: var(--color-brand);
   }
 </style>