cursedbelt 5.79.3 → 5.79.4

package/dist/looks.css

@@ -252,10 +252,22 @@
  * node_modules, which a library preview (tools/lib-preview.ts) never installs into, and which a
  * nested install would miss. LATIN ONLY, one variable file for
  * every weight: the fleet's copy is English, and the rest of the alphabet falls through to the
- * system stack behind it. `font-display: swap` paints in the system face at once and swaps when the
- * file lands; the metrics of the two are close enough that a TopBar does not move (the app's
- * browser gate reads the layout shift). cv11 is the single-storey a, ss01 the open digits — the
- * pair Linear sets.
+ * system stack behind it. cv11 is the single-storey a, ss01 the open digits — the pair Linear sets.
+ *
+ * `font-display: swap` paints at once in a fallback and swaps when the file lands — and the
+ * system face is NOT close enough to swap from: SF sets the same English 14% narrower than Inter,
+ * so on a slow load every line re-wrapped when the face came (0.0037 of layout shift at 390 in
+ * family's tree, and its TopBar moved 0.0023 under a loaded machine — forge task 3177). So the
+ * stack's second entry is 'Inter Fallback': Arial, which every Mac, iPhone and Windows box has,
+ * scaled with `size-adjust` and given Inter's own ascent and descent, the technique `next/font` and
+ * Fontaine ship. Measured in Chromium against this file with cv11 + ss01 on: within ±0.5% of
+ * Inter's width at 400, 500, 600 and 700 (SF: −14%), and the same line box. Two faces, because
+ * Arial has two weights: Regular stands for 100–549 and Bold for 550–900, each sized to the middle
+ * of its band, so no weight is synthesised. The overrides are Inter's metrics over the size-adjust
+ * (ascent 0.96875 em, descent 0.2412 em, no line gap). Same `unicode-range` as the face, so what
+ * Inter does not cover still falls through to the system stack, unscaled. Android has no Arial:
+ * the face fails there and the swap is from Roboto, as before. Re-measure if the woff2 is bumped
+ * (the family app's font browser test holds the swap's shift to nothing, with the file held back).
  */
 @font-face {
   font-family: 'Inter Variable';
@@ -267,8 +279,34 @@
     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: 'Inter Fallback';
+  font-style: normal;
+  font-weight: 100 549;
+  src: local('Arial'), local('ArialMT');
+  size-adjust: 106.25%;
+  ascent-override: 91.18%;
+  descent-override: 22.7%;
+  line-gap-override: 0%;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter Fallback';
+  font-style: normal;
+  font-weight: 550 900;
+  src: local('Arial Bold'), local('Arial-BoldMT');
+  size-adjust: 101.2%;
+  ascent-override: 95.73%;
+  descent-override: 23.83%;
+  line-gap-override: 0%;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 .cb-font-inter {
-  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+  --font-sans: 'Inter Variable', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   /* Tailwind's preflight reads these two on <html>; re-run them here, where --font-sans changed. */
   --default-font-family: var(--font-sans);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.79.3",
+	"version": "5.79.4",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",

package/src/looks.css

@@ -252,10 +252,22 @@
  * node_modules, which a library preview (tools/lib-preview.ts) never installs into, and which a
  * nested install would miss. LATIN ONLY, one variable file for
  * every weight: the fleet's copy is English, and the rest of the alphabet falls through to the
- * system stack behind it. `font-display: swap` paints in the system face at once and swaps when the
- * file lands; the metrics of the two are close enough that a TopBar does not move (the app's
- * browser gate reads the layout shift). cv11 is the single-storey a, ss01 the open digits — the
- * pair Linear sets.
+ * system stack behind it. cv11 is the single-storey a, ss01 the open digits — the pair Linear sets.
+ *
+ * `font-display: swap` paints at once in a fallback and swaps when the file lands — and the
+ * system face is NOT close enough to swap from: SF sets the same English 14% narrower than Inter,
+ * so on a slow load every line re-wrapped when the face came (0.0037 of layout shift at 390 in
+ * family's tree, and its TopBar moved 0.0023 under a loaded machine — forge task 3177). So the
+ * stack's second entry is 'Inter Fallback': Arial, which every Mac, iPhone and Windows box has,
+ * scaled with `size-adjust` and given Inter's own ascent and descent, the technique `next/font` and
+ * Fontaine ship. Measured in Chromium against this file with cv11 + ss01 on: within ±0.5% of
+ * Inter's width at 400, 500, 600 and 700 (SF: −14%), and the same line box. Two faces, because
+ * Arial has two weights: Regular stands for 100–549 and Bold for 550–900, each sized to the middle
+ * of its band, so no weight is synthesised. The overrides are Inter's metrics over the size-adjust
+ * (ascent 0.96875 em, descent 0.2412 em, no line gap). Same `unicode-range` as the face, so what
+ * Inter does not cover still falls through to the system stack, unscaled. Android has no Arial:
+ * the face fails there and the swap is from Roboto, as before. Re-measure if the woff2 is bumped
+ * (the family app's font browser test holds the swap's shift to nothing, with the file held back).
  */
 @font-face {
   font-family: 'Inter Variable';
@@ -267,8 +279,34 @@
     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: 'Inter Fallback';
+  font-style: normal;
+  font-weight: 100 549;
+  src: local('Arial'), local('ArialMT');
+  size-adjust: 106.25%;
+  ascent-override: 91.18%;
+  descent-override: 22.7%;
+  line-gap-override: 0%;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter Fallback';
+  font-style: normal;
+  font-weight: 550 900;
+  src: local('Arial Bold'), local('Arial-BoldMT');
+  size-adjust: 101.2%;
+  ascent-override: 95.73%;
+  descent-override: 23.83%;
+  line-gap-override: 0%;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 .cb-font-inter {
-  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+  --font-sans: 'Inter Variable', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   /* Tailwind's preflight reads these two on <html>; re-run them here, where --font-sans changed. */
   --default-font-family: var(--font-sans);

package/src/looks.spec.ts

@@ -135,7 +135,14 @@ describe('looks.css', () => {
  * package without re-copying the file is red here rather than a stale face in every app.
  */
 describe('cb-font-inter', () => {
-  const faces = [...LOOKS_CSS.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/@font-face\s*\{([^}]*)\}/g)].map((m) => m[1] ?? '');
+  const allFaces = [...LOOKS_CSS.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/@font-face\s*\{([^}]*)\}/g)].map((m) => m[1] ?? '');
+  const faces = allFaces.filter((face) => face.includes("'Inter Variable'"));
+  const fallbacks = allFaces.filter((face) => face.includes("'Inter Fallback'"));
+
+  /** One descriptor of a face, as written. */
+  const descriptor = (face: string, name: string): string | undefined =>
+    face.match(new RegExp(`(?:^|;)\\s*${name}:\\s*([^;]+);`))?.[1]?.replace(/\s+/g, ' ').trim();
+  const percent = (face: string, name: string): number => Number.parseFloat(descriptor(face, name) ?? 'NaN');
 
   /** Every face's `src: url(…)`, as written. */
   const urls = (css: string[]): string[] => css.flatMap((face) => [...face.matchAll(/url\('([^']+)'\)/g)].map((m) => m[1] as string));
@@ -171,9 +178,41 @@ describe('cb-font-inter', () => {
     for (const url of urls(stale)) expect(await Bun.file(onDisk(url)).exists()).toBe(false);
   });
 
-  test('re-binds the sans stack with Inter first, and the cv11 + ss01 features', () => {
+  /*
+   * The swap's fallback (forge task 3177): the system face sets English 14% narrower than Inter,
+   * so a late woff2 re-wrapped every line. The numbers were measured in Chromium (looks.css says
+   * how); this holds the shape that makes them mean anything. The family app's font browser test
+   * is what holds the swap's shift to nothing.
+   */
+  test("the swap is from 'Inter Fallback': Arial scaled to Inter, Regular and Bold, no file", () => {
+    expect(allFaces).toHaveLength(faces.length + fallbacks.length);
+    expect(fallbacks.map((face) => descriptor(face, 'font-weight'))).toEqual(['100 549', '550 900']);
+    expect(fallbacks.map((face) => descriptor(face, 'src'))).toEqual([
+      "local('Arial'), local('ArialMT')",
+      "local('Arial Bold'), local('Arial-BoldMT')",
+    ]);
+    for (const face of fallbacks) {
+      expect(face).not.toContain('url(');
+      // What Inter does not cover falls through to the system stack, not to a scaled Arial.
+      expect(descriptor(face, 'unicode-range')).toBe(descriptor(faces[0] as string, 'unicode-range'));
+      // Inter's own line box (ascent 0.96875 em, descent 0.2412 em, no gap), over the scale.
+      const scale = percent(face, 'size-adjust') / 100;
+      expect(scale).toBeGreaterThan(1);
+      expect(percent(face, 'ascent-override')).toBeCloseTo(96.875 / scale, 1);
+      expect(percent(face, 'descent-override')).toBeCloseTo(24.12 / scale, 1);
+      expect(descriptor(face, 'line-gap-override')).toBe('0%');
+    }
+  });
+
+  test('🔴 the failure path: a fallback whose overrides ignore its size-adjust is caught', () => {
+    const unscaled = (fallbacks[0] as string).replace(/ascent-override:\s*[^;]+;/, 'ascent-override: 96.88%;');
+    const scale = percent(unscaled, 'size-adjust') / 100;
+    expect(percent(unscaled, 'ascent-override')).not.toBeCloseTo(96.875 / scale, 1);
+  });
+
+  test('re-binds the sans stack with Inter first, its fallback second, and the cv11 + ss01 features', () => {
     const decls = declarationsOf(LOOKS_CSS, '.cb-font-inter');
-    expect(decls?.get('--font-sans')).toStartWith("'Inter Variable',");
+    expect(decls?.get('--font-sans')).toStartWith("'Inter Variable', 'Inter Fallback', -apple-system,");
     expect(decls?.get('--default-font-family')).toBe('var(--font-sans)');
     expect(decls?.get('--default-font-feature-settings')).toBe("'cv11', 'ss01'");
   });