@oxyhq/bloom 0.87.0 → 0.88.0

package/src/__tests__/adopt-style-sheet.node.test.ts

@@ -0,0 +1,21 @@
+/**
+ * @jest-environment node
+ */
+
+import { adoptStyleSheet, dropStyleSheet } from '../styles/adopt-style-sheet';
+
+/* Centralising the injection also centralised the `typeof document` guard that
+ * used to sit in each fork. It has to stay: `adoptStyleSheet` is reached from a
+ * platform-neutral component (`BottomSheetBase`) and from every server render,
+ * where throwing would take the whole page down rather than lose a stylesheet.
+ * Needs its own file — jest picks the environment per file. */
+describe('adoptStyleSheet with no document (native / SSR)', () => {
+  it('the environment under test genuinely has no document', () => {
+    expect(typeof document).toBe('undefined');
+  });
+
+  it('is a no-op rather than a throw', () => {
+    expect(() => adoptStyleSheet('bloom-test', '.x {}')).not.toThrow();
+    expect(() => dropStyleSheet('bloom-test')).not.toThrow();
+  });
+});

package/src/__tests__/adopt-style-sheet.test.ts

@@ -0,0 +1,165 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  installConstructedStyleSheets,
+  type ConstructedStyleSheetsHarness,
+} from './support/constructed-style-sheets';
+
+type AdoptStyleSheetModule = typeof import('../styles/adopt-style-sheet');
+
+/**
+ * A fresh copy of the module per test. It keeps the sheets it has constructed in
+ * a module-scope registry, so without this a later test would see the previous
+ * one's sheet and the idempotence cases would prove nothing.
+ */
+function freshModule(): AdoptStyleSheetModule {
+  let loaded: AdoptStyleSheetModule | undefined;
+  jest.isolateModules(() => {
+    loaded = require('../styles/adopt-style-sheet') as AdoptStyleSheetModule;
+  });
+  if (!loaded) throw new Error('adopt-style-sheet failed to load');
+  return loaded;
+}
+
+describe('adoptStyleSheet — constructed stylesheets (the CSP-safe path)', () => {
+  let harness: ConstructedStyleSheetsHarness;
+
+  beforeEach(() => {
+    document.head.innerHTML = '';
+    harness = installConstructedStyleSheets();
+  });
+
+  afterEach(() => {
+    harness.uninstall();
+  });
+
+  /* THE point of the whole change. A `<style>` element carrying text content is
+   * what `style-src 'self'` blocks, silently — so "no style element" is the
+   * assertion that fails if the adoption branch is ever removed, and it is the
+   * only one a CSP can tell apart. */
+  it('applies the CSS through an adopted sheet, creating no <style> element', () => {
+    const { adoptStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x { color: red; }');
+
+    expect(document.querySelectorAll('style')).toHaveLength(0);
+    expect(harness.adopted()).toHaveLength(1);
+    expect(harness.adopted()[0]?.cssText).toBe('.x { color: red; }');
+  });
+
+  it('repeat calls with the same CSS re-parse nothing and adopt nothing twice', () => {
+    const { adoptStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x { color: red; }');
+    adoptStyleSheet('bloom-test', '.x { color: red; }');
+    adoptStyleSheet('bloom-test', '.x { color: red; }');
+
+    expect(harness.adopted()).toHaveLength(1);
+    expect(harness.adopted()[0]?.replaceSyncCalls).toBe(1);
+  });
+
+  it('new CSS under the same id replaces the sheet content in place', () => {
+    const { adoptStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x { color: red; }');
+    const first = harness.adopted()[0];
+    adoptStyleSheet('bloom-test', '.x { color: blue; }');
+
+    expect(harness.adopted()).toHaveLength(1);
+    expect(harness.adopted()[0]).toBe(first);
+    expect(harness.adopted()[0]?.cssText).toBe('.x { color: blue; }');
+  });
+
+  it('keeps one sheet per id', () => {
+    const { adoptStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-a', '.a {}');
+    adoptStyleSheet('bloom-b', '.b {}');
+
+    expect(harness.adopted()).toHaveLength(2);
+  });
+
+  /* A consumer that owns `document.adoptedStyleSheets` can reassign it — a
+   * framework swapping its own sheets, a test resetting the document. Bloom's
+   * CSS has to come back, and without re-parsing. */
+  it('re-adopts the same sheet after the document list is reset', () => {
+    const { adoptStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x {}');
+    const first = harness.adopted()[0];
+    document.adoptedStyleSheets = [];
+    adoptStyleSheet('bloom-test', '.x {}');
+
+    expect(harness.adopted()).toHaveLength(1);
+    expect(harness.adopted()[0]).toBe(first);
+    expect(harness.adopted()[0]?.replaceSyncCalls).toBe(1);
+  });
+
+  it('dropStyleSheet un-adopts only its own sheet', () => {
+    const { adoptStyleSheet, dropStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-a', '.a {}');
+    adoptStyleSheet('bloom-b', '.b {}');
+    dropStyleSheet('bloom-a');
+
+    expect(harness.adopted()).toHaveLength(1);
+    expect(harness.adopted()[0]?.cssText).toBe('.b {}');
+  });
+
+  it('a dropped id can be adopted again', () => {
+    const { adoptStyleSheet, dropStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x {}');
+    dropStyleSheet('bloom-test');
+    adoptStyleSheet('bloom-test', '.y {}');
+
+    expect(harness.adopted()).toHaveLength(1);
+    expect(harness.adopted()[0]?.cssText).toBe('.y {}');
+  });
+});
+
+describe('adoptStyleSheet — <style> fallback', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  /* Plain jsdom: no `adoptedStyleSheets`, no `replaceSync`. Same for a browser
+   * older than Chrome 73 / Safari 16.4 / Firefox 101. The CSS still has to
+   * apply — under a permissive CSP, which is what those pages have. */
+  it('the environment under test genuinely lacks the constructed API', () => {
+    expect('adoptedStyleSheets' in document).toBe(false);
+  });
+
+  it('creates one <style> element carrying the CSS', () => {
+    const { adoptStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x { color: red; }');
+
+    const element = document.getElementById('bloom-test');
+    expect(element?.tagName).toBe('STYLE');
+    expect(element?.textContent).toBe('.x { color: red; }');
+  });
+
+  it('does not duplicate the element across calls, and updates its content', () => {
+    const { adoptStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x { color: red; }');
+    adoptStyleSheet('bloom-test', '.x { color: blue; }');
+
+    expect(document.querySelectorAll('style#bloom-test')).toHaveLength(1);
+    expect(document.getElementById('bloom-test')?.textContent).toBe(
+      '.x { color: blue; }',
+    );
+  });
+
+  it('dropStyleSheet removes the element', () => {
+    const { adoptStyleSheet, dropStyleSheet } = freshModule();
+
+    adoptStyleSheet('bloom-test', '.x {}');
+    dropStyleSheet('bloom-test');
+
+    expect(document.getElementById('bloom-test')).toBeNull();
+  });
+});

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

@@ -9,7 +9,12 @@
 // resolution; here we reach for it explicitly so the test exercises the
 // actual implementation under jsdom.
 import { applyFontFaces } from '../fonts/apply-font-faces.web';
+import { installConstructedStyleSheets } from './support/constructed-style-sheets';
 
+/* jsdom has no constructed-stylesheet API, so everything in this block
+ * exercises `adoptStyleSheet`'s `<style>` fallback. The CSP-safe path a real
+ * browser takes is asserted in the last block, and in
+ * `adopt-style-sheet.test.ts`. */
 describe('applyFontFaces (web)', () => {
   beforeEach(() => {
     document.head.innerHTML = '';
@@ -71,6 +76,33 @@ describe('applyFontFaces (web)', () => {
   });
 });
 
+/* The font faces are the one injection `BloomThemeProvider` performs by
+ * default, so they are the first thing a page under `style-src 'self'` loses —
+ * and it loses them silently, as text rendered in the fallback family with no
+ * console output. Everything else Bloom injects is per-component; this is
+ * every consumer, every page. */
+describe('applyFontFaces under a page that forbids inline styles', () => {
+  it('adopts a constructed sheet and creates no <style> element', () => {
+    document.head.innerHTML = '';
+    const harness = installConstructedStyleSheets();
+    try {
+      let fonts: typeof import('../fonts/apply-font-faces.web') | undefined;
+      jest.isolateModules(() => {
+        fonts = require('../fonts/apply-font-faces.web') as typeof fonts;
+      });
+      fonts?.applyFontFaces();
+
+      expect(document.querySelectorAll('style')).toHaveLength(0);
+      expect(harness.adopted()).toHaveLength(1);
+      const css = harness.adopted()[0]?.cssText ?? '';
+      expect(css.match(/@font-face\s*{/g) ?? []).toHaveLength(4);
+      expect(css).toMatch(/--bloom-font-sans:/);
+    } finally {
+      harness.uninstall();
+    }
+  });
+});
+
 describe('applyFontFaces (native stub)', () => {
   beforeEach(() => {
     document.head.innerHTML = '';

package/src/__tests__/design-tokens-json.test.ts

@@ -0,0 +1,112 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import {
+  bloomDesignTokens,
+  renderBloomTokensJson,
+  resolvedColorToHex,
+  type PresetGroup,
+} from '../design-tokens/tokens-json';
+import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
+import { CANONICAL_TOKENS, getResolvedTokens } from '../theme/token-registry';
+
+const TOKENS_PATH = join(__dirname, '..', 'design-tokens', 'tokens.json');
+
+describe('the shipped tokens.json is generated, not maintained', () => {
+  it('is byte-identical to a fresh render', () => {
+    // The whole guarantee: a token changed in the engine and not regenerated
+    // fails here rather than shipping a JSON that describes a palette Bloom no
+    // longer paints.
+    expect(readFileSync(TOKENS_PATH, 'utf8')).toBe(renderBloomTokensJson());
+  });
+
+  it('says so in its own $description', () => {
+    expect(bloomDesignTokens().$description).toContain('AUTO-GENERATED');
+  });
+});
+
+describe('tokens.json shape contract', () => {
+  /* Astro codegens C++ SkColor tables from these paths, so the shape is a
+   * published interface: new groups may be added, existing paths may not move. */
+  const tokens = bloomDesignTokens();
+
+  it('covers every preset Bloom ships, and nothing else', () => {
+    const presets = Object.keys(tokens.color).filter((key) => !key.startsWith('$'));
+    expect(presets.sort()).toEqual([...APP_COLOR_NAMES].sort());
+  });
+
+  it('carries both schemes and every canonical token, for every preset', () => {
+    for (const name of APP_COLOR_NAMES) {
+      const preset = tokens.color[name] as PresetGroup;
+      for (const scheme of ['light', 'dark'] as const) {
+        expect(Object.keys(preset[scheme]).sort()).toEqual([...CANONICAL_TOKENS].sort());
+      }
+    }
+  });
+
+  it('names tokens as the CSS custom property without the leading --', () => {
+    // What makes the mapping mechanical for a consumer. A token renamed on one
+    // side only would break it silently.
+    const preset = tokens.color.oxy as PresetGroup;
+    for (const token of Object.keys(preset.light)) {
+      expect(token.startsWith('--')).toBe(false);
+      expect(getResolvedTokens('oxy', 'light')[`--${token}`]).toBeDefined();
+    }
+  });
+
+  it('resolves every colour to an sRGB hex string', () => {
+    for (const name of APP_COLOR_NAMES) {
+      const preset = tokens.color[name] as PresetGroup;
+      for (const scheme of ['light', 'dark'] as const) {
+        for (const [token, entry] of Object.entries(preset[scheme])) {
+          expect(`${name}.${scheme}.${token} = ${String(entry.$value)}`).toMatch(
+            /= #[0-9a-f]{6}([0-9a-f]{2})?$/,
+          );
+        }
+      }
+    }
+  });
+
+  it('records each preset’s seed and variant', () => {
+    for (const name of APP_COLOR_NAMES) {
+      const preset = tokens.color[name] as PresetGroup;
+      expect(preset.$extensions['so.oxy.bloom']).toMatchObject({
+        seed: APP_COLOR_PRESETS[name].hex,
+        variant: APP_COLOR_PRESETS[name].variant,
+      });
+    }
+  });
+
+  it('emits the numeric scales as px dimensions', () => {
+    expect(tokens.spacing['space-8']).toEqual({ $value: '8px' });
+    expect(tokens.radius['radius-max']).toEqual({ $value: '9999px' });
+    expect(tokens.borderWidth['hairline']).toEqual({ $value: '0.5px' });
+    expect(tokens.typography['body']).toMatchObject({
+      fontSize: { $value: '15px' },
+      fontWeight: { $value: 400 },
+    });
+  });
+});
+
+describe('resolvedColorToHex', () => {
+  it('converts the engine’s two output forms', () => {
+    expect(resolvedColorToHex('rgb(255 239 253)')).toBe('#ffeffd');
+    expect(resolvedColorToHex('rgb(0 0 0)')).toBe('#000000');
+    // 0.13 × 255 = 33.15 → 33 → 0x21. An 8-bit alpha is exactly what an SkColor
+    // holds, so nothing is lost downstream.
+    expect(resolvedColorToHex('rgba(213, 86, 255, 0.13)')).toBe('#d556ff21');
+  });
+
+  it('drops a fully opaque alpha rather than emitting #rrggbbff', () => {
+    expect(resolvedColorToHex('rgba(1, 2, 3, 1)')).toBe('#010203');
+  });
+
+  /* The engine emitting a third form — an oklch(), a bare hex, a named colour —
+   * would otherwise reach a C++ colour table as an unparseable string. Failing
+   * at generation time is the only place anyone would notice. */
+  it('throws on anything that is not an rgb()/rgba() colour', () => {
+    expect(() => resolvedColorToHex('oklch(0.7 0.1 300)')).toThrow(/not an rgb/);
+    expect(() => resolvedColorToHex('#ffeffd')).toThrow(/not an rgb/);
+    expect(() => resolvedColorToHex('0.5rem')).toThrow(/not an rgb/);
+  });
+});

package/src/__tests__/exports-map-contract.test.ts

@@ -37,7 +37,11 @@ const pkg = JSON.parse(readFileSync(PKG_PATH, 'utf8')) as {
 const exportsMap = pkg.exports;
 
 /** Non-subpath entries that are legitimately plain strings (static assets). */
-const STRING_ENTRIES = ['./design-tokens/theme.css', './package.json'];
+const STRING_ENTRIES = [
+  './design-tokens/theme.css',
+  './design-tokens/tokens.json',
+  './package.json',
+];
 
 /**
  * Vacuity floor. `SUBPATHS` in the generator is 86 entries today; a traversal

package/src/__tests__/support/constructed-style-sheets.ts

@@ -0,0 +1,68 @@
+/**
+ * A spec-shaped stand-in for constructed stylesheets, for the jsdom suites.
+ *
+ * jsdom 26 ships the `CSSStyleSheet` CONSTRUCTOR but neither `replaceSync` nor
+ * `document.adoptedStyleSheets`, so every jsdom test takes Bloom's `<style>`
+ * fallback. That makes the whole CSP-safe path — the reason
+ * `styles/adopt-style-sheet.ts` exists — invisible to jest unless a test
+ * installs the API itself. Without this, a mutation that deleted the adoption
+ * branch entirely would leave the suite green.
+ *
+ * Not collected as a suite: jest's `testMatch` wants `*.test.ts` / `*.spec.ts`.
+ */
+
+export interface FakeStyleSheet {
+  /** The CSS most recently handed to `replaceSync`. */
+  cssText: string;
+  /** How many times the sheet has been re-parsed, so a test can prove it wasn't. */
+  replaceSyncCalls: number;
+  replaceSync(css: string): void;
+}
+
+export interface ConstructedStyleSheetsHarness {
+  /** The document's adopted sheets, read live (the code reassigns the array). */
+  adopted(): readonly FakeStyleSheet[];
+  /** Drop the API again, restoring jsdom's own `CSSStyleSheet`. */
+  uninstall(): void;
+}
+
+export function installConstructedStyleSheets(): ConstructedStyleSheetsHarness {
+  class FakeCSSStyleSheet implements FakeStyleSheet {
+    cssText = '';
+    replaceSyncCalls = 0;
+
+    replaceSync(css: string): void {
+      this.cssText = css;
+      this.replaceSyncCalls += 1;
+    }
+  }
+
+  const previousConstructor = Object.getOwnPropertyDescriptor(
+    globalThis,
+    'CSSStyleSheet',
+  );
+
+  Object.defineProperty(globalThis, 'CSSStyleSheet', {
+    value: FakeCSSStyleSheet,
+    writable: true,
+    configurable: true,
+  });
+  Object.defineProperty(document, 'adoptedStyleSheets', {
+    value: [],
+    writable: true,
+    configurable: true,
+  });
+
+  return {
+    adopted: () =>
+      document.adoptedStyleSheets as unknown as readonly FakeStyleSheet[],
+    uninstall: () => {
+      Reflect.deleteProperty(document, 'adoptedStyleSheets');
+      if (previousConstructor) {
+        Object.defineProperty(globalThis, 'CSSStyleSheet', previousConstructor);
+      } else {
+        Reflect.deleteProperty(globalThis, 'CSSStyleSheet');
+      }
+    },
+  };
+}

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -11,6 +11,7 @@ import {
     type StyleProp,
 } from 'react-native';
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler';
+import { adoptStyleSheet, dropStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Z_INDEX } from '../styles/z-index';
 import Animated, {
@@ -921,15 +922,7 @@ const styles = StyleSheet.create({
 
 // Create web scrollbar styles dynamically based on theme
 const createWebScrollbarStyle = (borderColor: string) => {
-    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
-
-    let styleElement = document.getElementById(SCROLLBAR_STYLE_ID) as HTMLStyleElement | null;
-
-    if (!styleElement) {
-        styleElement = document.createElement('style');
-        styleElement.id = SCROLLBAR_STYLE_ID;
-        document.head.appendChild(styleElement);
-    }
+    if (Platform.OS !== 'web') return;
 
     // Derive a slightly darker scrollbar hover color from the border color
     const scrollbarColor = borderColor;
@@ -937,7 +930,9 @@ const createWebScrollbarStyle = (borderColor: string) => {
         ? borderColor.replace(/\)$/, ' / 0.7)')  // add alpha for hover
         : '#888';
 
-    styleElement.textContent = `
+    adoptStyleSheet(
+        SCROLLBAR_STYLE_ID,
+        `
         .bottom-sheet-scrollview::-webkit-scrollbar {
             width: 6px;
         }
@@ -952,13 +947,14 @@ const createWebScrollbarStyle = (borderColor: string) => {
         .bottom-sheet-scrollview::-webkit-scrollbar-thumb:hover {
             background: ${scrollbarHoverColor};
         }
-    `;
+    `,
+    );
 };
 
 const SCROLLBAR_STYLE_ID = 'bottom-sheet-scrollbar-style';
 
-/** Remove the injected scrollbar <style> tag on unmount. */
+/** Detach the scrollbar rules on unmount. */
 const removeWebScrollbarStyle = () => {
-    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
-    document.getElementById(SCROLLBAR_STYLE_ID)?.remove();
+    if (Platform.OS !== 'web') return;
+    dropStyleSheet(SCROLLBAR_STYLE_ID);
 };

package/src/button/Button.web.tsx

@@ -12,6 +12,7 @@ import React, {
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
 import { SpinnerIcon } from '../loading/SpinnerIcon.web';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import type { ButtonProps, ButtonSize, ButtonVariant } from './types';
 
@@ -128,12 +129,7 @@ const BLOOM_BUTTON_CSS = `
 
 function useButtonCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_BUTTON_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_BUTTON_CSS);
   }, []);
 }
 

package/src/connection-dots/ConnectionDots.web.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { ConnectionDotsBase } from './ConnectionDotsBase';
@@ -31,12 +32,7 @@ export const BLOOM_CONNECTION_DOTS_CSS = `
 
 function useKeyframes(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(KEYFRAMES_ID)) return;
-    const style = document.createElement('style');
-    style.id = KEYFRAMES_ID;
-    style.textContent = BLOOM_CONNECTION_DOTS_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(KEYFRAMES_ID, BLOOM_CONNECTION_DOTS_CSS);
   }, []);
 }
 

package/src/design-tokens/index.ts

@@ -27,6 +27,22 @@ export type {
 
 export { bloomThemeCss, bloomThemeBlock } from './theme-css';
 
+/* The same tokens as a data structure rather than a stylesheet, for a consumer
+ * that is not a browser (`@oxyhq/bloom/design-tokens/tokens.json` is the
+ * generated artifact; these rebuild it in memory). Both come from the colour
+ * engine, so the JSON and the CSS cannot disagree. */
+export {
+  bloomDesignTokens,
+  renderBloomTokensJson,
+  resolvedColorToHex,
+} from './tokens-json';
+export type {
+  BloomDesignTokens,
+  DesignToken,
+  PresetExtensions,
+  PresetGroup,
+} from './tokens-json';
+
 /* The resolved counterpart of `bloomThemeCss()`. That emits the alias layer
  * (`--color-x: var(--x)`); these resolve `--x` itself, so a build script can
  * write a static `:root` / `.dark` block and a prerendered page paints the real