@oxyhq/bloom 0.71.0 → 0.72.1

package/lib/typescript/module/fonts/apply-font-faces.web.d.ts

@@ -2,18 +2,16 @@
  * Inject @font-face rules and font CSS variables onto :root.
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
- * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * the font payload out of the native bundle entirely. Idempotent: safe to
- * call multiple times; subsequent calls early-return after the
- * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
- * `typeof document === 'undefined'` guard.
+ * stub — native loads its fonts through `useFonts(FONT_ASSETS)`, so the file
+ * split keeps the web font payload out of the native bundle entirely.
+ * Idempotent: safe to call multiple times; subsequent calls early-return
+ * after the `<style id="bloom-fonts">` tag has been mounted. SSR-safe via
+ * the `typeof document === 'undefined'` guard.
  *
- * The font URLs come from `./font-data.web`, a generated module that
- * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
- * relying on bundler asset loaders for `.woff2`) means consumers do not
- * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
- * the published JS is self-contained. See `scripts/generate-font-data.mjs`
- * for the rationale and trade-offs.
+ * The URLs come from `./font-urls.web`, which imports the `.woff2` files so
+ * the consuming bundler emits them as separate, cacheable assets. See that
+ * module for the per-bundler details and for the one thing a consumer has to
+ * provide (Metro needs `woff2` in `assetExts`).
  */
 export declare function applyFontFaces(): void;
 //# sourceMappingURL=apply-font-faces.web.d.ts.map

package/lib/typescript/module/fonts/apply-font-faces.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-font-faces.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/apply-font-faces.web.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAkBrC"}
+{"version":3,"file":"apply-font-faces.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/apply-font-faces.web.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAkBrC"}

package/lib/typescript/module/fonts/font-assets.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-assets.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.web.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAAiB,CAAC"}
+{"version":3,"file":"font-assets.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.web.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAAiB,CAAC"}

package/lib/typescript/module/fonts/font-urls.web.d.ts

@@ -0,0 +1,6 @@
+import blomusModernusBold from './assets/BlomusModernus-Bold.woff2';
+import blomusModernusRegular from './assets/BlomusModernus-Regular.woff2';
+import geistMonoVariable from './assets/GeistMono-Variable.woff2';
+import interVariable from './assets/InterVariable.woff2';
+export { blomusModernusRegular, blomusModernusBold, interVariable, geistMonoVariable };
+//# sourceMappingURL=font-urls.web.d.ts.map

package/lib/typescript/module/fonts/font-urls.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-urls.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-urls.web.ts"],"names":[],"mappings":"AAwBA,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,aAAa,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/typescript/module/fonts/index.node.d.ts

@@ -0,0 +1,7 @@
+export { fontFamilies, fontCssVars } from './tokens';
+export type { FontFamilyName } from './tokens';
+export { applyFontFaces } from './apply-font-faces';
+export { FONT_ASSETS } from './font-assets';
+export { FontLoader } from './FontLoader.node';
+export type { FontLoaderProps } from './FontLoader.node';
+//# sourceMappingURL=index.node.d.ts.map

package/lib/typescript/module/fonts/index.node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.node.d.ts","sourceRoot":"","sources":["../../../../src/fonts/index.node.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.71.0",
+  "version": "0.72.1",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -1233,6 +1233,11 @@
         "import": "./lib/module/fonts/index.web.js",
         "require": "./lib/commonjs/fonts/index.web.js"
       },
+      "node": {
+        "types": "./lib/typescript/module/fonts/index.node.d.ts",
+        "import": "./lib/module/fonts/index.node.js",
+        "require": "./lib/commonjs/fonts/index.node.js"
+      },
       "import": {
         "types": "./lib/typescript/module/fonts/index.d.ts",
         "default": "./lib/module/fonts/index.js"
@@ -1419,19 +1424,16 @@
   "license": "AGPL-3.0-only",
   "scripts": {
     "generate:exports": "node scripts/generate-platform-exports.mjs",
-    "generate:font-data": "node scripts/generate-font-data.mjs",
     "generate:theme-css": "bun scripts/generate-theme-css.ts",
-    "prebuild": "node scripts/generate-platform-exports.mjs && node scripts/generate-font-data.mjs && bun scripts/generate-theme-css.ts",
+    "prebuild": "node scripts/generate-platform-exports.mjs && bun scripts/generate-theme-css.ts",
     "build": "bob build",
     "postbuild": "node scripts/verify-package.mjs",
     "verify:package": "node scripts/verify-package.mjs",
     "test": "jest",
-    "pretest": "node scripts/generate-font-data.mjs",
     "typescript": "tsc --noEmit",
-    "pretypescript": "node scripts/generate-font-data.mjs",
     "clean": "rm -rf lib",
     "prepack": "bun run clean && bun run build",
-    "prepare": "bun run build || true",
+    "prepare": "[ -n \"$BLOOM_VERIFY_PACKAGE_RUNNING\" ] || bun run build || true",
     "release": "rm -rf lib && bun run build && release-it",
     "storybook": "storybook dev -p 6006 --no-open",
     "storybook:build": "storybook build -o storybook-static"
@@ -1539,7 +1541,7 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
-    "exclude": "{**/{__tests__,__fixtures__,__mocks__}/**,**/*.stories.{ts,tsx},**/*.{test,spec}.{ts,tsx},**/*.woff2}",
+    "exclude": "{**/{__tests__,__fixtures__,__mocks__}/**,**/*.stories.{ts,tsx},**/*.{test,spec}.{ts,tsx}}",
     "targets": [
       [
         "commonjs",

package/src/__tests__/apply-font-faces.test.ts

@@ -54,4 +54,36 @@ describe('applyFontFaces (web)', () => {
     expect(cssText).toMatch(/font-family: 'Inter'/);
     expect(cssText).toMatch(/font-family: 'Geist Mono'/);
   });
+
+  // The whole point of `font-urls.web.ts` is that the browser fetches and
+  // caches the four families on their own. Re-inlining them as `data:` URLs
+  // would still render correctly in every test above, so this is the only
+  // assertion that would notice.
+  it('points every src at a bundler-emitted URL, never an inlined data: URL', () => {
+    applyFontFaces();
+    const cssText = document.getElementById('bloom-fonts')?.textContent ?? '';
+    const sources = [...cssText.matchAll(/src: url\("([^"]*)"\)/g)].map((m) => m[1]);
+    expect(sources).toHaveLength(4);
+    for (const source of sources) {
+      expect(source).not.toMatch(/^data:/);
+      expect(source).toBeTruthy();
+    }
+  });
+});
+
+describe('applyFontFaces (native stub)', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  // Native loads `.ttf` through `useFonts`, so the default export must stay
+  // inert. If it ever forwarded to the web implementation, Metro would follow
+  // `font-urls.web.ts` and bundle a second, unusable copy of all four fonts
+  // into every iOS and Android build.
+  it('injects nothing', async () => {
+    const native = await import('../fonts/apply-font-faces');
+    native.applyFontFaces();
+    expect(document.getElementById('bloom-fonts')).toBeNull();
+    expect(document.head.innerHTML).toBe('');
+  });
 });

package/src/fonts/FontLoader.node.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export interface FontLoaderProps {
+  /** Ignored — there is nothing to load. Kept so the API matches every platform. */
+  enabled: boolean;
+  /** Ignored — nothing is ever pending, so children render immediately. */
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * Node font loader: a pass-through.
+ *
+ * There is no font registry to load into and no document to inject
+ * `@font-face` rules on, so the correct behaviour is to render children and
+ * stay out of the way — the same thing `FontLoader.tsx` ends up doing under
+ * Node once `applyFontFaces()` hits its `typeof document === 'undefined'`
+ * guard.
+ *
+ * It exists as a separate file rather than reusing that one because
+ * `FontLoader.tsx` imports `./apply-font-faces.web` outright, which reaches
+ * `font-urls.web`'s `.woff2` imports. Node hands a `.woff2` to the JS parser,
+ * so merely LOADING that module is fatal — the guard inside the function never
+ * gets a chance to run. Reached only through the `node` export condition on
+ * `./fonts`; see `scripts/generate-platform-exports.mjs` for why conditions
+ * are the only lever available here.
+ */
+export function FontLoader({ children }: FontLoaderProps) {
+  return <>{children}</>;
+}

package/src/fonts/apply-font-faces.ts

@@ -2,10 +2,11 @@
 // is selected by bundlers via the package.json conditions. RN consumers
 // never need font-face injection — useFonts handles loading on native.
 //
-// The web variant does NOT pull in any `.woff2` files via asset imports —
-// it imports base64 data URLs from `font-data.web.ts`. This stub stays
-// here so the file split (`*.ts` vs `*.web.ts`) makes the platform
-// intent explicit and so the runtime API surface matches across platforms.
+// The split is load-bearing, not decorative: the web variant reaches
+// `font-urls.web.ts`, whose module-level `.woff2` imports would otherwise
+// drag a second, unusable copy of every font into the native bundle
+// (Metro resolves an asset import on native to a registry id, not a URL).
+// Keeping this stub empty is what guarantees native pays nothing for them.
 export function applyFontFaces(): void {
   // intentionally empty
 }

package/src/fonts/apply-font-faces.web.ts

@@ -3,7 +3,7 @@ import {
   blomusModernusBold,
   interVariable,
   geistMonoVariable,
-} from './font-data.web';
+} from './font-urls.web';
 import { fontFamilies } from './tokens';
 
 const STYLE_ID = 'bloom-fonts';
@@ -12,18 +12,16 @@ const STYLE_ID = 'bloom-fonts';
  * Inject @font-face rules and font CSS variables onto :root.
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
- * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * the font payload out of the native bundle entirely. Idempotent: safe to
- * call multiple times; subsequent calls early-return after the
- * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
- * `typeof document === 'undefined'` guard.
+ * stub — native loads its fonts through `useFonts(FONT_ASSETS)`, so the file
+ * split keeps the web font payload out of the native bundle entirely.
+ * Idempotent: safe to call multiple times; subsequent calls early-return
+ * after the `<style id="bloom-fonts">` tag has been mounted. SSR-safe via
+ * the `typeof document === 'undefined'` guard.
  *
- * The font URLs come from `./font-data.web`, a generated module that
- * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
- * relying on bundler asset loaders for `.woff2`) means consumers do not
- * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
- * the published JS is self-contained. See `scripts/generate-font-data.mjs`
- * for the rationale and trade-offs.
+ * The URLs come from `./font-urls.web`, which imports the `.woff2` files so
+ * the consuming bundler emits them as separate, cacheable assets. See that
+ * module for the per-bundler details and for the one thing a consumer has to
+ * provide (Metro needs `woff2` in `assetExts`).
  */
 export function applyFontFaces(): void {
   if (typeof document === 'undefined') return;
@@ -32,10 +30,10 @@ export function applyFontFaces(): void {
   const style = document.createElement('style');
   style.id = STYLE_ID;
   style.textContent = `
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusRegular}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Inter'; src: url(${interVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Geist Mono'; src: url(${geistMonoVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusRegular}") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusBold}") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Inter'; src: url("${interVariable}") format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url("${geistMonoVariable}") format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
     :root {
       --bloom-font-display: ${fontFamilies.display};
       --bloom-font-sans: ${fontFamilies.sans};

package/src/fonts/font-assets.web.ts

@@ -2,8 +2,9 @@
 //
 // `useFonts()` is native-only — the web `FontLoader` (`FontLoader.tsx`) calls
 // `applyFontFaces()` instead, which injects the same four families as
-// `@font-face` rules from base64 data URLs (`apply-font-faces.web.ts` /
-// `font-data.web.ts`). So the map is empty by design, not by omission.
+// `@font-face` rules pointing at bundler-emitted `.woff2` URLs
+// (`apply-font-faces.web.ts` / `font-urls.web.ts`). So the map is empty by
+// design, not by omission.
 //
 // This file exists so `index.web.ts` can name its font-asset source
 // explicitly, exactly as it already does for `./apply-font-faces.web`. The

package/src/fonts/font-urls.web.ts

@@ -0,0 +1,30 @@
+// Web font URLs, resolved by whatever bundler is building the consuming app.
+//
+// WEB-ONLY. Each import below hands the `.woff2` to the app's asset pipeline,
+// which emits it as a standalone file and gives us back its URL:
+//
+//   - Metro (Expo web) rewrites the import to the exported asset path — its
+//     asset transformer emits a bare string module whenever the platform is
+//     `web`, so the imported value is the URL itself, not an asset id.
+//   - Vite, Rollup and webpack 5 resolve it through their own asset handling
+//     and return a content-hashed URL.
+//
+// Either way the browser fetches the four families alongside the JS and caches
+// them under their own URLs, instead of re-parsing ~310 KB of base64 out of the
+// entry bundle on every cold load. No consumer ever writes an asset filename
+// down, so a font swap here cannot leave a downstream app pointing at a file
+// that no longer exists.
+//
+// Metro does not carry `woff2` in its default `assetExts`, so a consumer
+// bundling for web with Metro has to register it; `@oxyhq/app-preset`'s Metro
+// base already does that for every Oxy app.
+//
+// Native never reaches this module. The default `apply-font-faces.ts` is a
+// no-op stub and `FontLoader.native.tsx` loads the `.ttf` variants through
+// `useFonts` instead, so no web font bytes enter a native bundle.
+import blomusModernusBold from './assets/BlomusModernus-Bold.woff2';
+import blomusModernusRegular from './assets/BlomusModernus-Regular.woff2';
+import geistMonoVariable from './assets/GeistMono-Variable.woff2';
+import interVariable from './assets/InterVariable.woff2';
+
+export { blomusModernusRegular, blomusModernusBold, interVariable, geistMonoVariable };

package/src/fonts/index.node.ts

@@ -0,0 +1,21 @@
+// Node variant of the `./fonts` barrel, selected by the `node` export
+// condition. Same surface as `./index.ts`, with every member resolved to the
+// inert implementation:
+//
+// - `./apply-font-faces` is the no-op stub. The web one is unreachable here on
+//   purpose: it imports `font-urls.web`, whose `.woff2` imports Node feeds to
+//   the JS parser, so loading it throws `SyntaxError` before any runtime guard
+//   can help.
+// - `./font-assets` is the empty map — there is no native font registry.
+// - `./FontLoader.node` renders children and nothing else.
+//
+// Both platform-forked members are named OUTRIGHT rather than left
+// extensionless, for the same reason `index.web.ts` does it: Node performs no
+// platform-extension resolution, so a bare specifier would fall through to
+// whichever file happens to sit at that path.
+export { fontFamilies, fontCssVars } from './tokens';
+export type { FontFamilyName } from './tokens';
+export { applyFontFaces } from './apply-font-faces';
+export { FONT_ASSETS } from './font-assets';
+export { FontLoader } from './FontLoader.node';
+export type { FontLoaderProps } from './FontLoader.node';

package/src/fonts/index.web.ts

@@ -6,9 +6,9 @@
 // of the box), so an extensionless specifier here would quietly fall through
 // to the default file.
 //
-// - `./apply-font-faces.web` performs the real `@font-face` injection using
-//   inlined base64 data URLs (see `font-data.web.ts`); the default
-//   `./apply-font-faces` is a no-op stub for native.
+// - `./apply-font-faces.web` performs the real `@font-face` injection against
+//   the `.woff2` URLs the consuming bundler emits (see `font-urls.web.ts`);
+//   the default `./apply-font-faces` is a no-op stub for native.
 // - `./font-assets.web` is an empty map. The native map is built from Metro
 //   asset `require()` calls, and importing it from an ES module throws
 //   `ReferenceError: require is not defined` during module evaluation — which