@oxy.so/bloom 6.4.0 → 7.0.0

package/src/agent-creator/shared.ts

@@ -0,0 +1,102 @@
+import { FOLD_SHAPES, type AvatarConfig } from '../agent-avatar';
+import {
+  AGENT_LANGUAGES,
+  AGENT_SPEECH_RATES,
+  DEFAULT_AGENT_PREFERENCES,
+} from './constants';
+import type { AgentPreferences } from './types';
+
+export function normalizeAgentPreferences(
+  value: Partial<AgentPreferences> | null | undefined,
+): AgentPreferences {
+  return {
+    voice:
+      typeof value?.voice === 'string'
+        ? value.voice.slice(0, 200)
+        : DEFAULT_AGENT_PREFERENCES.voice,
+    speed: AGENT_SPEECH_RATES.some((rate) => rate === value?.speed)
+      ? value!.speed!
+      : 1,
+    language: AGENT_LANGUAGES.some(
+      (language) => language.id === value?.language,
+    )
+      ? value!.language!
+      : 'auto',
+    notifications:
+      typeof value?.notifications === 'boolean' ? value.notifications : true,
+  };
+}
+export function avatarHex(
+  c: Pick<AvatarConfig, 'hue' | 'saturation' | 'lightness'>,
+) {
+  const light = (c.lightness ?? 76) / 100,
+    a = (c.saturation / 100) * Math.min(light, 1 - light);
+  const channel = (n: number) => {
+    const k = (n + c.hue / 30) % 12;
+    return Math.round(
+      255 * (light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))),
+    )
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${channel(0)}${channel(8)}${channel(4)}`;
+}
+export function hexAppearance(hex: string): Partial<AvatarConfig> | null {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) return null;
+  const [r = 0, g = 0, b = 0] = [1, 3, 5].map(
+    (i) => parseInt(hex.slice(i, i + 2), 16) / 255,
+  );
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b),
+    delta = max - min,
+    light = (max + min) / 2;
+  let hue = 0;
+  if (delta)
+    hue =
+      max === r
+        ? ((g - b) / delta + 6) % 6
+        : max === g
+          ? (b - r) / delta + 2
+          : (r - g) / delta + 4;
+  return {
+    hue: hue * 60,
+    saturation: delta ? (delta / (1 - Math.abs(2 * light - 1))) * 100 : 0,
+    lightness: light * 100,
+    lightEyes: light < 0.35,
+  };
+}
+export const wrapShape = (index: number) =>
+  ((index % FOLD_SHAPES.length) + FOLD_SHAPES.length) % FOLD_SHAPES.length;
+export function shapeArcPoint(distance: number) {
+  const angle = distance * 0.34;
+  return { x: Math.sin(angle) * 210, y: Math.cos(angle) * 210 - 176 };
+}
+export type Hsv = { h: number; s: number; v: number };
+export function hexToHsv(hex: string): Hsv | null {
+  const match = hex.trim().match(/^#?([0-9a-f]{6})$/i);
+  if (!match?.[1]) return null;
+  const [r = 0, g = 0, b = 0] = [0, 2, 4].map(
+    (i) => parseInt(match[1]!.slice(i, i + 2), 16) / 255,
+  );
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b),
+    delta = max - min;
+  let h = 0;
+  if (delta)
+    h =
+      max === r
+        ? ((g - b) / delta + (g < b ? 6 : 0)) * 60
+        : max === g
+          ? ((b - r) / delta + 2) * 60
+          : ((r - g) / delta + 4) * 60;
+  return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+export function hsvToHex({ h, s, v }: Hsv) {
+  const channel = (n: number) => {
+    const k = (n + h / 60) % 6;
+    return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${channel(5)}${channel(3)}${channel(1)}`;
+}

package/src/agent-creator/types.ts

@@ -0,0 +1,34 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { AvatarConfig } from '../agent-avatar';
+import type { AgentCreatorMessages } from './messages';
+
+export type AgentLanguage =
+  'auto' | 'en' | 'tr' | 'es' | 'fr' | 'de' | 'ja' | 'pt';
+export type AgentPreferences = {
+  voice: string;
+  speed: number;
+  language: AgentLanguage;
+  notifications: boolean;
+};
+export type AgentCreatorAgent = {
+  id: string;
+  name: string;
+  label: string;
+  description: string;
+  avatar: AvatarConfig;
+  preferences?: AgentPreferences;
+};
+export type AgentVoice = { id: string; name: string; language: string };
+export interface AgentCreatorProps {
+  locale?: string;
+  labels?: Partial<AgentCreatorMessages>;
+  agent: AgentCreatorAgent;
+  onChange: (agent: AgentCreatorAgent) => void;
+  onClose?: () => void;
+  className?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Native hosts can supply their speech provider's catalog. Web uses local device voices by default. */
+  voices?: readonly AgentVoice[];
+  /** Host-owned speech preview, used on native and optionally on web. */
+  onPreviewVoice?: (text: string, preferences: AgentPreferences) => void;
+}

package/src/agent-creator/use-agent-voices.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import { PREVIEW_TEXT } from './constants';
+import type { AgentCreatorProps, AgentPreferences, AgentVoice } from './types';
+
+/** Browser speech is read behind a platform boundary; native speech belongs to the host. */
+export function useAgentVoices({
+  voices: suppliedVoices,
+  onPreviewVoice,
+}: Pick<AgentCreatorProps, 'voices' | 'onPreviewVoice'>) {
+  const [voices, setVoices] = useState<AgentVoice[]>([]);
+  const [browserVoices, setBrowserVoices] = useState<SpeechSynthesisVoice[]>(
+    [],
+  );
+  const [canPreview, setCanPreview] = useState(false);
+  useEffect(() => {
+    if (
+      Platform.OS !== 'web' ||
+      typeof window === 'undefined' ||
+      !('speechSynthesis' in window)
+    )
+      return;
+    const synth = window.speechSynthesis;
+    const refresh = () => {
+      const local = synth.getVoices().filter((voice) => voice.localService);
+      setBrowserVoices(local);
+      setVoices(
+        local.map((voice) => ({
+          id: voice.voiceURI,
+          name: voice.name,
+          language: voice.lang,
+        })),
+      );
+      setCanPreview(true);
+    };
+    refresh();
+    synth.addEventListener('voiceschanged', refresh);
+    return () => {
+      synth.removeEventListener('voiceschanged', refresh);
+      synth.cancel();
+    };
+  }, []);
+  const preview = (preferences: AgentPreferences) => {
+    if (onPreviewVoice) {
+      onPreviewVoice(PREVIEW_TEXT[preferences.language], preferences);
+      return;
+    }
+    if (!canPreview || !preferences.voice) return;
+    const voice = browserVoices.find((voice) =>
+      preferences.voice === 'alice'
+        ? voice.name.toLowerCase() === 'alice'
+        : voice.voiceURI === preferences.voice,
+    );
+    const utterance = new SpeechSynthesisUtterance(
+      PREVIEW_TEXT[preferences.language],
+    );
+    if (voice) utterance.voice = voice;
+    utterance.rate = preferences.speed;
+    utterance.lang =
+      preferences.language === 'auto'
+        ? (voice?.lang ?? navigator.language)
+        : preferences.language;
+    window.speechSynthesis.cancel();
+    window.speechSynthesis.speak(utterance);
+  };
+  return {
+    voices: suppliedVoices ?? voices,
+    canPreview: !!onPreviewVoice || canPreview,
+    canSelect: suppliedVoices !== undefined || canPreview,
+    preview,
+  };
+}

package/src/agent-creator/use-track-events.ts

@@ -0,0 +1,42 @@
+import { useEffect, type RefObject } from 'react';
+import { Platform, type View } from 'react-native';
+
+/** Extra browser inputs use the same state and geometry as native gestures. */
+export function useTrackEvents(
+  ref: RefObject<View | null>,
+  onWheel: ((deltaX: number, deltaY: number) => void) | undefined,
+  onKey?: (key: string, shiftKey: boolean) => boolean,
+  onFocus?: (focused: boolean) => void,
+) {
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+    const element = ref.current as unknown as HTMLElement | null;
+    if (!element?.addEventListener) return;
+    const wheel = (event: WheelEvent) => {
+      if (event.ctrlKey || !onWheel) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const multiplier =
+        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 120 : 1;
+      onWheel(event.deltaX * multiplier, event.deltaY * multiplier);
+    };
+    const key = (event: KeyboardEvent) => {
+      if (onKey?.(event.key, event.shiftKey)) event.preventDefault();
+    };
+    const focus = () => onFocus?.(true);
+    const blur = (event: FocusEvent) => {
+      if (!element.contains(event.relatedTarget as Node | null))
+        onFocus?.(false);
+    };
+    element.addEventListener('wheel', wheel, { passive: false });
+    element.addEventListener('keydown', key);
+    element.addEventListener('focusin', focus);
+    element.addEventListener('focusout', blur);
+    return () => {
+      element.removeEventListener('wheel', wheel);
+      element.removeEventListener('keydown', key);
+      element.removeEventListener('focusin', focus);
+      element.removeEventListener('focusout', blur);
+    };
+  }, [ref, onWheel, onKey, onFocus]);
+}

package/src/button/CloseButton.tsx

@@ -1,5 +1,6 @@
 import React, { memo, useMemo } from 'react';
-import { Platform, Pressable } from 'react-native';
+import { Platform } from 'react-native';
+import { StyledPressable } from '../styles/styled-primitives';
 import Svg, { Path } from 'react-native-svg';
 
 import { useTheme } from '../theme/use-theme';
@@ -69,6 +70,7 @@ function CloseButtonComponent({
   disabled = false,
   accessibilityLabel,
   style,
+  className,
   testID,
 }: CloseButtonProps) {
   const theme = useTheme();
@@ -90,7 +92,8 @@ function CloseButtonComponent({
   };
 
   return (
-    <Pressable
+    <StyledPressable
+      className={className}
       {...(IS_WEB ? ({ dataSet: { bloomButtonClose: '' } } as Record<string, unknown>) : {})}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
@@ -120,7 +123,7 @@ function CloseButtonComponent({
           strokeLinecap="round"
         />
       </Svg>
-    </Pressable>
+    </StyledPressable>
   );
 }
 

package/src/button/types.ts

@@ -244,6 +244,8 @@ export type LinkButtonProps = ButtonProps;
 
 /** Props of `CloseButton`. */
 export interface CloseButtonProps {
+  /** Utility classes applied to the control laid out by its parent. */
+  className?: string;
   onPress?: () => void;
   /** `2xs` 16 · `xs` 20 (default) · `sm` 24 · `md` 32. */
   size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';

package/src/chip/Chip.tsx

@@ -18,6 +18,7 @@ import { NOT_DISABLED, interactiveWebCss, useInteractiveWebCss } from '../styles
 import type { WebCssStyle } from '../styles/web-view-style';
 import { CHIP_GEOMETRY, resolveChipPaint, resolveChipRing } from './shared';
 import type { ChipProps } from './types';
+import { StyledView, StyledPressable } from '../styles/styled-primitives';
 
 /**
  * The chip, five rungs and four fills. The rung table and the paint recipe are
@@ -129,6 +130,8 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
     onKeyDown,
     style,
     textStyle,
+    className,
+    textClassName,
     accessibilityLabel,
     testID,
   },
@@ -159,15 +162,17 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
   const geometry = CHIP_GEOMETRY[size];
 
   const containerStyle = useMemo((): WebCssStyle => ({
+    ...(className ? {} : {
     height: geometry.height,
     borderRadius: borderRadius.full,
     paddingHorizontal: geometry.paddingHorizontal,
     backgroundColor: paint.background,
     borderWidth: paint.borderWidth,
     borderColor: paint.border,
+    }),
     flexDirection: 'row',
     alignItems: 'center',
-    gap: geometry.iconGap,
+    ...(className ? {} : { gap: geometry.iconGap }),
     alignSelf: 'flex-start',
     ...(geometry.minWidth ? { minWidth: geometry.minWidth, justifyContent: 'center' } : null),
     // A pill is a fixed-size token. In a flex row of chips (a filter bar, a tag
@@ -175,19 +180,19 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
     // neighbours into ellipsis. `overflow: hidden` keeps the content inside the
     // radius.
     flexShrink: 0,
-    overflow: 'hidden',
+    ...(className ? {} : { overflow: 'hidden' as const }),
     // The `:focus-visible` ring colour, read by the adopted sheet. A custom
     // property because the value is a resolved theme token the static sheet
     // cannot know; native has no such style key and ignores it.
     '--bloom-chip-ring': ring,
-  }), [geometry, paint, ring]);
+  }), [className, geometry, paint, ring]);
 
   const labelStyle = useMemo((): TextStyle => ({
-    color: paint.foreground,
+    ...(className ? {} : { color: paint.foreground }),
     // The label yields before the pill does: a chip narrower than its text
     // ellipsises rather than overflowing its own radius.
     flexShrink: 1,
-  }), [paint]);
+  }), [className, paint]);
 
   // Icons inside the pill are sized to the RUNG, not to whatever the caller
   // happened to pass. A slot with a fixed box does that without reaching into
@@ -223,7 +228,7 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
     <>
       {startIcon != null ? <View style={iconSlotStyle}>{startIcon}</View> : null}
       {typeof children === 'string' ? (
-        <Text variant={geometry.type} numberOfLines={1} style={[labelStyle, textStyle]}>
+        <Text className={textClassName ?? className?.split(/\s+/).filter(token => /^(text-|font-|leading-|tracking-|whitespace-)/.test(token)).join(" ")} variant={geometry.type} numberOfLines={1} style={[labelStyle, textStyle]}>
           {children}
         </Text>
       ) : (
@@ -252,7 +257,8 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
           : { accessibilityState: { disabled, selected }, 'aria-pressed': selected };
 
     return (
-      <Pressable
+      <StyledPressable
+        className={className}
         ref={ref}
         // The DOM hook the adopted sheet above hangs off.
         //
@@ -304,19 +310,20 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
         testID={testID}
       >
         {content}
-      </Pressable>
+      </StyledPressable>
     );
   }
 
   return (
-    <View
+    <StyledView
+      className={className}
       ref={ref}
       style={[containerStyle, disabled && { opacity: 0.5 }, style]}
       accessibilityLabel={accessibilityLabel}
       testID={testID}
     >
       {content}
-    </View>
+    </StyledView>
   );
 });
 

package/src/chip/types.ts

@@ -105,6 +105,9 @@ export interface ChipProps {
   onKeyDown?: (event: { key: string; preventDefault: () => void }) => void;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
+  /** NativeWind recipe override; omitted keeps the standard pill. */
+  className?: string;
+  textClassName?: string;
   accessibilityLabel?: string;
   testID?: string;
 }

package/src/design-tokens/component-roles.ts

@@ -0,0 +1,93 @@
+/** Semantic utility names used by the component recipes. Values stay owned by Bloom's theme. */
+export const COMPONENT_COLOR_ROLES = {
+  'status-blue-background': 'var(--info-subtle)',
+  'status-blue-text': 'var(--info-text)',
+  'status-yellow-background': 'var(--warning-subtle)',
+  'status-yellow-text': 'var(--warning-text)',
+  'status-orange-background': 'var(--warning-subtle)',
+  'status-orange-text': 'var(--warning-text)',
+  'status-rose-background': 'var(--error-subtle)',
+  'status-rose-text': 'var(--error-text)',
+  'ticket-detail-surface': 'var(--card)',
+  'ticket-detail-favorite': 'var(--warning)',
+  'ticket-detail-low-background': 'var(--info-subtle)',
+  'ticket-detail-low-text': 'var(--info-text)',
+  'ticket-detail-low-hover': 'var(--info-subtle)',
+  'ticket-detail-medium-hover': 'var(--warning-subtle)',
+  'ticket-detail-high-hover': 'var(--warning-subtle)',
+  'ticket-detail-urgent-hover': 'var(--error-subtle)',
+  'ticket-detail-resource-background': 'var(--info-subtle)',
+  'ticket-detail-resource-text': 'var(--info-text)',
+  'project-board-empty-panel': 'var(--surface)',
+  'project-board-empty-back': 'var(--muted)',
+  'project-board-empty-middle': 'var(--popover)',
+  'project-board-empty-front': 'var(--border)',
+  'project-board-empty-detail': 'var(--card)',
+  'background-full': 'var(--background)',
+  'background-primary-default': 'var(--card)',
+  'background-primary-hover': 'var(--surface)',
+  'background-primary-active': 'var(--popover)',
+  'background-secondary-default': 'var(--surface)',
+  'background-secondary-hover': 'var(--popover)',
+  'background-secondary-active': 'var(--accent)',
+  'background-tertiary-default': 'var(--popover)',
+  'background-tertiary-hover': 'var(--accent)',
+  'background-tertiary-active': 'var(--muted)',
+  'text-primary': 'var(--foreground)',
+  'text-white': '#ffffff',
+  'text-destructive': 'var(--error-text)',
+  'foreground-icon-primary': 'var(--foreground)',
+  'foreground-icon-secondary': 'var(--muted-foreground)',
+  'foreground-icon-tertiary': 'var(--muted-foreground)',
+  'border-button-default': 'var(--border)',
+  'border-button-white': 'var(--input)',
+  'border-focus-ring': 'var(--ring)',
+  'border-input-default': 'var(--input)',
+  'separator-border': 'var(--border)',
+  'button-primary': 'var(--primary)',
+  'dropdown-item-hover-background': 'var(--accent)',
+  'accent-50': 'var(--primary-subtle)',
+  'accent-100': 'var(--primary-subtle)',
+  'accent-200': 'var(--primary-subtle)',
+  'accent-300': 'var(--primary)',
+  'accent-400': 'var(--primary)',
+  'accent-500': 'var(--primary)',
+  'accent-600': 'var(--primary-text)',
+  'accent-700': 'var(--primary-text)',
+  'accent-800': 'var(--primary-text)',
+  'accent-900': 'var(--primary-text)',
+  'accent-950': 'var(--primary-text)',
+} as const;
+
+/** Numeric utilities use the authored 4px grid on both platforms, independent of rem. */
+export const COMPONENT_SPACING = Object.fromEntries(
+  [
+    0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20,
+    24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96,
+  ].map((value) => [String(value), `${value * 4}px`]),
+);
+export const COMPONENT_RADIUS = {
+  xs: '2px',
+  sm: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  '2xl': '16px',
+  '3xl': '24px',
+  '4xl': '32px',
+  '2lg': '10px',
+  '2-5xl': '20px',
+} as const;
+export const COMPONENT_CONTAINERS = {
+  xs: '320px',
+  sm: '384px',
+  md: '448px',
+  lg: '512px',
+  xl: '576px',
+} as const;
+export const COMPONENT_SHADOWS = {
+  sidebar:
+    '0 1px 0 0 rgb(0 0 0 / 0.0196), 0 1px 12px 0 rgb(0 0 0 / 0.0588), 0 0 1px 0 rgb(0 0 0 / 0.3216)',
+  card: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
+  dropdown: '0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02)',
+} as const;

package/src/design-tokens/tailwind-preset.ts

@@ -1,3 +1,5 @@
+import { COMPONENT_SPACING, COMPONENT_CONTAINERS, COMPONENT_COLOR_ROLES, COMPONENT_RADIUS, COMPONENT_SHADOWS } from './component-roles';
+import { TYPE_SCALE } from '../typography/scale';
 /**
  * The Bloom Tailwind / NativeWind preset — the SINGLE opt-in that gives every
  * Oxy app the same semantic design-token utility classes.
@@ -13,8 +15,8 @@
  *   };
  *
  * The preset only EXTENDS `theme` (everything lives under `theme.extend`), so it
- * is purely additive: existing Tailwind built-ins (`p-4`, `rounded-lg`,
- * `text-sm`) and the app's own `var(--x)`-backed color utilities keep working.
+ * keeps the authored utility names. Numeric spacing and radii use px so
+ * NativeWind's default 14px rem cannot shrink the 4px layout grid.
  *
  * Cross-platform: NativeWind reads the same `tailwind.config.js`, so the SAME
  * class names (`bg-fill`, `text-text-tertiary`, `p-space-8`, `rounded-radius-20`,
@@ -38,7 +40,7 @@ import {
 import { SHADOW_BOX } from './shadows';
 
 /** A Tailwind `fontSize` value: `[size, { lineHeight }]`. */
-type FontSizeValue = [string, { lineHeight: string }];
+type FontSizeValue = [string, { lineHeight: string; fontWeight?: string; letterSpacing?: string }];
 /** A Tailwind `fontFamily` value: `[family, { fontWeight }]`. */
 type FontFamilyValue = [string, { fontWeight: string }];
 
@@ -48,6 +50,7 @@ export interface TailwindPresetThemeExtend {
   textColor: Record<string, string>;
   borderColor: Record<string, string>;
   spacing: Record<string, string>;
+  maxWidth: Record<string, string>;
   borderRadius: Record<string, string>;
   borderWidth: Record<string, string>;
   fontSize: Record<string, FontSizeValue>;
@@ -121,20 +124,21 @@ export const bloomTailwindPreset: TailwindPreset = Object.freeze({
   theme: {
     extend: {
       // Generic color bucket — feeds every color utility family.
-      colors: { ...COLOR_ROLES },
+      colors: { ...COMPONENT_COLOR_ROLES, ...COLOR_ROLES },
       // Targeted buckets so the namespaced roles resolve on the right utility.
       backgroundColor: { ...FILL_ROLES },
       textColor: { ...TEXT_ROLES, ...ACCENT_TEXT_ROLES },
       borderColor: { ...BORDER_ROLES },
 
-      spacing: SPACING_PX,
-      borderRadius: RADIUS_PX,
+      spacing: { ...COMPONENT_SPACING, ...SPACING_PX },
+      maxWidth: { ...COMPONENT_CONTAINERS },
+      borderRadius: { ...RADIUS_PX, ...COMPONENT_RADIUS },
       borderWidth: BORDER_WIDTH_PX,
 
-      fontSize: buildFontSize(),
+      fontSize: { ...buildFontSize(), ...Object.fromEntries(Object.entries(TYPE_SCALE).map(([name, role]) => [name, [`${role.fontSize}px`, { lineHeight: `${role.lineHeight}px`, fontWeight: String(role.fontWeight), letterSpacing: `${role.letterSpacing}px` }] satisfies FontSizeValue])) },
       fontFamily: buildFontFamily(),
 
-      boxShadow: { s: SHADOW_BOX.s, m: SHADOW_BOX.m },
+      boxShadow: { ...COMPONENT_SHADOWS, s: SHADOW_BOX.s, m: SHADOW_BOX.m },
     },
   },
 });

package/src/design-tokens/theme-css.ts

@@ -1,3 +1,5 @@
+import { COMPONENT_CONTAINERS, COMPONENT_COLOR_ROLES, COMPONENT_RADIUS, COMPONENT_SHADOWS } from './component-roles';
+import { TYPE_SCALE } from '../typography/scale';
 /**
  * Tailwind v4 `@theme` block generator for the Oxy Unified Design Language.
  *
@@ -62,6 +64,7 @@ export function bloomThemeCss(): string {
 
   // Bloom's namespaced semantic color roles (bg-fill, text-text-*, border-*).
   for (const [role, value] of Object.entries({
+    ...COMPONENT_COLOR_ROLES,
     ...FILL_ROLES,
     ...TEXT_ROLES,
     ...ACCENT_TEXT_ROLES,
@@ -89,6 +92,11 @@ export function bloomThemeCss(): string {
   // `bg-divider` / `border-divider` read intentionally in list/section UIs.
   lines.push('  --color-divider: var(--border);');
 
+  // A rem defaults to 14px in the native CSS compiler. Authored numeric
+  // utilities use the same 4px grid as the web, without consumer configuration.
+  lines.push('  --spacing: 4px;');
+  for (const [name, width] of Object.entries(COMPONENT_CONTAINERS)) lines.push(`  --container-${name}: ${width};`);
+
   // Spacing.
   for (const [key, value] of Object.entries(SPACING)) {
     lines.push(`  --spacing-${key}: ${value}px;`);
@@ -123,6 +131,16 @@ export function bloomThemeCss(): string {
     lines.push(`  --font-${name}: ${FONT_FAMILY_VARS[role.family]};`);
   }
 
+  // The detailed component typography vocabulary shares Typography's exact ramp.
+  for (const [name, role] of Object.entries(TYPE_SCALE)) {
+    lines.push(`  --text-${name}: ${role.fontSize}px;`);
+    lines.push(`  --text-${name}--line-height: ${lineHeightRatio(role.lineHeight, role.fontSize)};`);
+    lines.push(`  --text-${name}--font-weight: ${role.fontWeight};`);
+    lines.push(`  --text-${name}--letter-spacing: ${role.letterSpacing}px;`);
+  }
+  for (const [name, radius] of Object.entries(COMPONENT_RADIUS)) lines.push(`  --radius-${name}: ${radius};`);
+  for (const [name, shadow] of Object.entries(COMPONENT_SHADOWS)) lines.push(`  --shadow-${name}: ${shadow};`);
+
   // Bloom raw families.
   lines.push(`  --font-bloom-sans: ${FONT_FAMILY_VARS.sans};`);
   lines.push(`  --font-bloom-display: ${FONT_FAMILY_VARS.display};`);