@nebutra/fonts 2.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebutra/fonts",
-  "version": "2.0.0",
+  "version": "4.0.0",
   "type": "module",
   "description": "Self-hosted OSS font registry — build-time next/font faces + a name→CSS-var resolver so theme / DESIGN.md fonts render with zero runtime external requests",
   "private": false,
@@ -25,10 +25,10 @@
   "files": [
     "dist",
     "src",
-    "generated/noto-sans-sc.css",
     "generated/subset-manifest.json",
     "generated/index.ts",
-    "vendor/noto-sans-sc/OFL.txt",
+    "vendor/misans/LICENSE.txt",
+    "vendor/dm-sans/OFL.txt",
     "NOTICE-FONTS.md",
     "README.md",
     "LICENSE",
@@ -57,12 +57,38 @@
       "import": "./src/next-cjk.ts",
       "default": "./src/next-cjk.ts"
     },
+    "./font-face": {
+      "types": "./src/cjk-font-face.tsx",
+      "import": "./src/cjk-font-face.tsx",
+      "default": "./src/cjk-font-face.tsx"
+    },
     "./cjk": {
       "types": "./dist/generated/index.d.ts",
       "import": "./dist/generated/index.js",
       "default": "./dist/generated/index.js"
-    },
-    "./cjk.css": "./generated/noto-sans-sc.css"
+    }
+  },
+  "dependencies": {
+    "@fontsource-variable/dm-sans": "5.3.0",
+    "@fontsource-variable/figtree": "5.3.0",
+    "@fontsource-variable/fira-code": "5.3.0",
+    "@fontsource-variable/fraunces": "5.3.0",
+    "@fontsource-variable/inter": "5.3.0",
+    "@fontsource-variable/inter-tight": "5.3.0",
+    "@fontsource-variable/jetbrains-mono": "5.3.0",
+    "@fontsource-variable/lexend": "5.3.0",
+    "@fontsource-variable/manrope": "5.3.0",
+    "@fontsource-variable/montserrat": "5.3.0",
+    "@fontsource-variable/outfit": "5.3.0",
+    "@fontsource-variable/playfair-display": "5.3.0",
+    "@fontsource-variable/plus-jakarta-sans": "5.3.0",
+    "@fontsource-variable/roboto-mono": "5.3.0",
+    "@fontsource-variable/sora": "5.3.0",
+    "@fontsource-variable/source-code-pro": "5.3.0",
+    "@fontsource-variable/source-serif-4": "5.3.0",
+    "@fontsource-variable/space-grotesk": "5.3.0",
+    "@fontsource-variable/work-sans": "5.3.0",
+    "@nebutra/brand": "4.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/cjk-font-face.tsx

@@ -0,0 +1,53 @@
+/**
+ * MiSans @font-face, rendered at request time rather than shipped as CSS.
+ *
+ * The MiSans licence forbids distributing the font on its own and this
+ * repository is public, so the subsets live in the deployment's public asset
+ * bucket and only their keys are committed (../generated/index.ts). A static
+ * stylesheet would have to spell out a host, and the host differs per
+ * deployment: Nebutra's CDN for Nebutra, the scaffold's own for a template
+ * user. publicAssetUrl() resolves it the way it resolves every other public
+ * asset — NEXT_PUBLIC_R2_PUBLIC_URL, then R2_PUBLIC_URL, then the brand's cdn
+ * origin.
+ *
+ * Before the subsets have been uploaded (a fresh scaffold, `pnpm subset:cjk
+ * --upload` not yet run) the requests 404 and the token stacks fall through to
+ * PingFang / YaHei. That is the intended degraded state, not an error.
+ */
+
+import { publicAssetUrl } from "@nebutra/brand/metadata-helpers";
+import { MISANS_FAMILY, MISANS_FILES, MISANS_UNICODE_RANGE } from "../generated/index";
+
+/** One @font-face per weight, CJK-only unicode-range, `swap` so text is never invisible. */
+export function misansFontFaceCss(origin?: string): string {
+  return MISANS_FILES.map(
+    (face) =>
+      `@font-face{font-family:"${MISANS_FAMILY}";font-style:normal;font-weight:${face.weight};` +
+      `font-display:swap;src:url("${publicAssetUrl(face.key, origin)}") format("woff2");` +
+      `unicode-range:${MISANS_UNICODE_RANGE}}`,
+  ).join("\n");
+}
+
+export interface CjkFontFaceProps {
+  /** Asset origin override; defaults to the publicAssetUrl() resolution. */
+  origin?: string;
+  /**
+   * CSP nonce, for apps whose style-src allows inline styles only by nonce
+   * (apps/web). Without it the whole @font-face block is refused. The page's
+   * font-src must also allow publicAssetOrigin().
+   */
+  nonce?: string;
+}
+
+/**
+ * Render once in each root layout, next to `cjkFontClassName` on <html>.
+ * React 19 hoists a `<style>` carrying `href` + `precedence` into <head> and
+ * dedupes it by `href`, so rendering it twice costs nothing.
+ */
+export function CjkFontFace({ origin, nonce }: CjkFontFaceProps) {
+  return (
+    <style href="nebutra-misans" precedence="default" nonce={nonce || undefined}>
+      {misansFontFaceCss(origin)}
+    </style>
+  );
+}

package/src/index.ts

@@ -23,11 +23,12 @@ export const FONT_REGISTRY: Record<string, string> = {
   geist: "--font-geist-sans",
   "geist sans": "--font-geist-sans",
   "geist mono": "--font-geist-mono",
-  // Self-hosted via next/font/local from the subset built in ./generated (see
-  // ./next-cjk). The Simplified-Chinese face — CJK only via unicode-range, so it
-  // cannot take Latin away from Geist.
-  "noto sans sc": "--font-noto-sans-sc",
-  // Self-hosted via next/font/google (see ./next)
+  // Self-hosted via next/font/local (see ./next-cjk). MiSans is the
+  // Simplified-Chinese face — CJK only via unicode-range, so it cannot take
+  // Latin away from Geist. DM Sans is the Latin display/heading face.
+  misans: "--font-misans",
+  "dm sans display": "--font-dm-sans",
+  // Self-hosted via next/font/local over @fontsource-variable/* (see ./next)
   inter: "--font-inter",
   "inter tight": "--font-reg-inter-tight",
   "space grotesk": "--font-space-grotesk",

package/src/next-cjk.test.ts

@@ -1,49 +1,56 @@
 import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
-import {
-  NOTO_SANS_SC_SOURCES,
-  NOTO_SANS_SC_UNICODE_RANGE,
-  NOTO_SANS_SC_VARIABLE,
-} from "../generated/index";
+import { MISANS_FILES, MISANS_UNICODE_RANGE } from "../generated/index";
+import { misansFontFaceCss } from "./cjk-font-face";
 import { FONT_REGISTRY } from "./index";
 
 /**
- * next/font is a compile-time transform: the options object passed to
- * localFont() must be a literal, so ./next-cjk.ts cannot spread the generated
- * metadata. These tests read that file as TEXT (importing it would pull in
- * next/font/local, which only exists inside a Next build) and assert the
- * literals still agree with what the subsetter actually emitted.
+ * MiSans is CDN-hosted (its licence forbids distributing the font on its own,
+ * and this repo is public). Only content-hashed keys are committed; the host is
+ * resolved per deployment by publicAssetUrl(). DM Sans is self-hosted through
+ * next/font/local in ./next-cjk.ts, a compile-time transform — read as TEXT.
  */
-const NEXT_CJK_SOURCE = readFileSync(
-  fileURLToPath(new URL("./next-cjk.ts", import.meta.url)),
-  "utf8",
-);
+const read = (rel: string) => readFileSync(fileURLToPath(new URL(rel, import.meta.url)), "utf8");
+const NEXT_CJK_SOURCE = read("./next-cjk.ts");
+const GENERATED_INDEX = read("../generated/index.ts");
 
-describe("Noto Sans SC wiring", () => {
-  it("declares every generated weight, with the file the subsetter wrote", () => {
-    for (const { path, weight } of NOTO_SANS_SC_SOURCES) {
-      const file = path.replace(/^\.\//, "");
-      expect(NEXT_CJK_SOURCE).toContain(`"../generated/${file}", weight: "${weight}"`);
+describe("MiSans wiring", () => {
+  it("commits keys, never a host", () => {
+    for (const { key } of MISANS_FILES) {
+      expect(key).toMatch(/^fonts\/misans\/misans-\d{3}\.[0-9a-f]{10}\.woff2$/);
     }
+    expect(GENERATED_INDEX).not.toMatch(/https?:\/\//);
   });
 
-  it("declares no weight that has no file (nothing can be synthesised)", () => {
-    const declared = [...NEXT_CJK_SOURCE.matchAll(/weight: "(\d+)"/g)].map((m) => m[1]);
-    expect(declared.sort()).toEqual(NOTO_SANS_SC_SOURCES.map((s) => s.weight).sort());
+  it("declares one @font-face per weight against the given origin", () => {
+    const css = misansFontFaceCss("https://assets.example.test/");
+    for (const { key, weight } of MISANS_FILES) {
+      expect(css).toContain(`font-weight:${weight};`);
+      expect(css).toContain(`src:url("https://assets.example.test/${key}") format("woff2")`);
+    }
+    expect(css.match(/@font-face/g)).toHaveLength(MISANS_FILES.length);
+    expect(css).toContain("font-display:swap");
+  });
+
+  it("carries a CJK-only unicode-range, so Latin never downloads a CJK file", () => {
+    expect(misansFontFaceCss("https://a.test")).toContain(`unicode-range:${MISANS_UNICODE_RANGE}`);
+    expect(MISANS_UNICODE_RANGE).not.toMatch(/U\+00[0-7]/i);
   });
 
-  it("carries the generated unicode-range verbatim (CJK only, no Latin)", () => {
-    expect(NEXT_CJK_SOURCE).toContain(NOTO_SANS_SC_UNICODE_RANGE);
-    expect(NOTO_SANS_SC_UNICODE_RANGE).not.toMatch(/U\+00[0-7]/i);
+  it("never loads a MiSans binary through next/font", () => {
+    expect(NEXT_CJK_SOURCE).not.toMatch(/misans-\d{3}\.woff2/);
   });
 
-  it("uses the CSS variable the registry and the token stacks reference", () => {
-    expect(NEXT_CJK_SOURCE).toContain(`variable: "${NOTO_SANS_SC_VARIABLE}"`);
-    expect(FONT_REGISTRY["noto sans sc"]).toBe(NOTO_SANS_SC_VARIABLE);
+  it("registers the variable the token stacks reference", () => {
+    expect(FONT_REGISTRY.misans).toBe("--font-misans");
   });
+});
 
-  it("never preloads (a CJK weight must be demand-loaded)", () => {
-    expect(NEXT_CJK_SOURCE).toContain("preload: false");
+describe("DM Sans wiring", () => {
+  it("self-hosts the variable Latin subset under the heading variable", () => {
+    expect(NEXT_CJK_SOURCE).toContain('path: "../generated/dm-sans.woff2"');
+    expect(NEXT_CJK_SOURCE).toContain('variable: "--font-dm-sans"');
+    expect(FONT_REGISTRY["dm sans display"]).toBe("--font-dm-sans");
   });
 });

package/src/next-cjk.ts

@@ -1,70 +1,54 @@
 /**
- * @nebutra/fonts/next/cjk — the self-hosted Simplified-Chinese face (server-only).
+ * @nebutra/fonts/next/cjk — the self-hosted brand faces (server-only).
  *
- * WHY A SEPARATE ENTRY FROM `./next`: that module declares ~16 `next/font/google`
- * faces for the theme / DESIGN.md registry. Importing it just to get the CJK face
- * would drag those build-time Google downloads into every app — and this repo has
- * a known trap where `next/font/google` fails outright in a network-sandboxed dev
- * server. This file imports `next/font/local` ONLY: the woff2 files live in the
- * workspace `generated/` directory (not the npm tarball), so first-party apps
- * work offline, in CI, and in the sandbox. `./next` re-exports it,
- * so an app already applying `fontRegistryClassName` still only needs one import.
+ * The Latin brand face lives here through `next/font/local` so first-party apps work
+ * offline, in CI and in the network sandbox (the registry in `./next` is local too):
  *
- * WHY SELF-HOSTED AT ALL: Geist has no CJK coverage, so without this every Chinese
- * character falls back to whatever the OS supplies — PingFang on macOS, Microsoft
- * YaHei on Windows, something else on Android. Chinese copy is a first-class
- * surface here (see docs/microcopy/), so the face is pinned rather than left to
- * the OS.
+ *  - MiSans — the Simplified-Chinese face — is CDN-hosted; see <CjkFontFace /> below.
+ *  - DM Sans — the Latin display/heading face (SIL OFL). Chosen the same day
+ *    from the same measurement (DeepSeek, Databricks). Body/UI Latin stays
+ *    Geist: its tabular figures are what dense dashboard tables need.
  *
- * The files are built by `pnpm --filter @nebutra/fonts subset:cjk` from
- * Noto Sans SC (SIL OFL) and live in the workspace `generated/` directory.
- * The literal `src` list below mirrors NOTO_SANS_SC_SOURCES in
- * ../generated/index.ts (a drift test in ./next-cjk.test.ts asserts they agree).
- * It is spelled out rather than spread because next/font is a compile-time
- * transform — SWC statically analyses this call, so the options object cannot
- * be computed.
+ * WHY A SEPARATE ENTRY FROM `./next`: that module declares 19
+ * faces for the theme / DESIGN.md registry; importing it for the brand faces
+ * would put all of them into every app's CSS. `./next`
+ * re-exports this file, so an app already applying `fontRegistryClassName`
+ * still needs one import.
+ *
+ * next/font is a compile-time transform: SWC statically analyses the call, so
+ * the options object is spelled out as a literal.
  */
 
 import localFont from "next/font/local";
 
 /**
- * Noto Sans SC — 400 / 500 / 600 / 700 static subsets.
- *
- * - `preload: false` on purpose. Each weight is hundreds of KB; preloading them
- *   on every route would tax Latin-only pages for nothing. The browser fetches
- *   a weight only when a glyph in the `unicode-range` below actually renders.
- * - `declarations` carries that `unicode-range` (CJK blocks only — no ASCII, no
- *   Latin, no general punctuation), so a Latin-only page can never trigger a CJK
- *   download even if a font stack somewhere is written the wrong way round.
- * - `adjustFontFallback: false` — next/font's metric-matched fallback is derived
- *   from Arial, which is meaningless for a Han face.
+ * MiSans is NOT loaded here: its licence forbids distributing the font on its
+ * own and this repository is public (vivo Sans was removed for the same reason,
+ * b5e73db35). The subsets are served from the deployment's asset CDN and
+ * declared by <CjkFontFace />, re-exported below — render it in the root
+ * layout next to this class name. The token stacks reference
+ * var(--font-misans, "MiSans"): with no variable set, the literal family name
+ * resolves to that @font-face.
+ */
+export { CjkFontFace, misansFontFaceCss } from "./cjk-font-face";
+
+/**
+ * DM Sans — one variable file (opsz 9–40, wght 100–1000), Latin subset, 67KB.
+ * Preloaded: headings render above the fold on most pages.
  */
-export const notoSansSc = localFont({
-  src: [
-    { path: "../generated/noto-sans-sc-400.woff2", weight: "400", style: "normal" },
-    { path: "../generated/noto-sans-sc-500.woff2", weight: "500", style: "normal" },
-    { path: "../generated/noto-sans-sc-600.woff2", weight: "600", style: "normal" },
-    { path: "../generated/noto-sans-sc-700.woff2", weight: "700", style: "normal" },
-  ],
-  declarations: [
-    {
-      prop: "unicode-range",
-      value: "U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF",
-    },
-  ],
+export const dmSans = localFont({
+  src: [{ path: "../generated/dm-sans.woff2", weight: "100 1000", style: "normal" }],
   display: "swap",
-  preload: false,
-  adjustFontFallback: false,
-  variable: "--font-noto-sans-sc",
+  variable: "--font-dm-sans",
 });
 
 /**
- * Apply to <html> next to the Geist loaders so `--font-noto-sans-sc` exists:
+ * Apply to <html> next to the Geist loaders so `--font-dm-sans` exists:
  *
  *   className={`${GeistSans.variable} ${GeistMono.variable} ${cjkFontClassName}`}
  *
- * The token stacks (`--font-sans` / `--font-cn` / `--font-display` in
- * @nebutra/tokens) reference the variable AFTER Geist, so Geist keeps Latin and
- * the numerals and only CJK falls through to this face.
+ * The name predates DM Sans; it now carries both brand faces so every app that
+ * already applies it picks them up without a layout change.
  */
-export const cjkFontClassName = notoSansSc.variable;
+export const brandFontClassName = dmSans.variable;
+export const cjkFontClassName = brandFontClassName;

package/src/next.test.ts

@@ -0,0 +1,68 @@
+import { existsSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { FONT_REGISTRY } from "./index";
+
+/**
+ * ./next.ts is a next/font compile-time transform, so it is read as TEXT: the
+ * point is what the build will do, and the build must not need the network.
+ */
+const here = (rel: string) => fileURLToPath(new URL(rel, import.meta.url));
+const SOURCE = readFileSync(here("./next.ts"), "utf8");
+const faces = [
+  ...SOURCE.matchAll(
+    /const (\w+) = localFont\(\{\s*src: \[\s*\{\s*path: "([^"]+)",\s*weight: "(\d+ \d+)",\s*style: "normal",\s*\},\s*\],\s*display: "swap",\s*(?:adjustFontFallback: "Times New Roman",\s*)?declarations: \[\{ prop: "font-family", value: "'([^']+)'" \}\],\s*(?:adjustFontFallback: "Times New Roman",\s*)?variable: "(--font-[\w-]+)",/g,
+  ),
+].map(([, name = "", path = "", weight = "", family = "", variable = ""]) => ({
+  name,
+  path,
+  weight,
+  family,
+  variable,
+}));
+
+describe("registry faces (@nebutra/fonts/next)", () => {
+  it("never fetches from Google at build or dev time", () => {
+    expect(SOURCE).not.toMatch(/from\s+["']next\/font\/google["']/);
+    expect(SOURCE).toContain('import localFont from "next/font/local";');
+  });
+
+  it("declares every face the registry list exports", () => {
+    const listed = /FONT_REGISTRY_FACES = \[([^\]]+)\]/.exec(SOURCE)?.[1] ?? "";
+    const names = listed
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    expect(names).toHaveLength(19);
+    expect(faces.map((f) => f.name).sort()).toEqual([...names].sort());
+  });
+
+  it("loads each face from an installed @fontsource-variable package (Latin, upright, wght)", () => {
+    for (const { path } of faces) {
+      expect(path).toMatch(
+        /^\.\.\/node_modules\/@fontsource-variable\/([a-z0-9-]+)\/files\/\1-latin-wght-normal\.woff2$/,
+      );
+      expect(existsSync(here(path)), path).toBe(true);
+    }
+  });
+
+  it("depends on every package it loads from, pinned", () => {
+    const pkg = JSON.parse(readFileSync(here("../package.json"), "utf8")) as {
+      dependencies: Record<string, string>;
+    };
+    for (const { path } of faces) {
+      const name = /@fontsource-variable\/[a-z0-9-]+/.exec(path)?.[0] ?? "";
+      expect(pkg.dependencies[name], name).toMatch(/^\d+\.\d+\.\d+$/);
+    }
+  });
+
+  it("keeps the variables FONT_REGISTRY resolves to, and distinct family names", () => {
+    const registryVars = new Set(Object.values(FONT_REGISTRY));
+    for (const { variable } of faces) expect(registryVars.has(variable), variable).toBe(true);
+    const families = faces.map((f) => f.family);
+    expect(new Set(families).size).toBe(families.length);
+    // The brand heading face in ./next-cjk is family "dmSans"; the registry's
+    // must not share it, or one @font-face family serves two files.
+    expect(families).not.toContain("dmSans");
+  });
+});