@oxyhq/bloom 0.7.1 → 0.7.3

package/lib/typescript/commonjs/portal/index.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
+declare function createPortalGroup(): {
+    Provider: (props: React.PropsWithChildren<object>) => import("react/jsx-runtime").JSX.Element;
+    Outlet: () => import("react/jsx-runtime").JSX.Element | null;
+    Portal: ({ children }: React.PropsWithChildren<object>) => null;
+};
+type PortalGroup = ReturnType<typeof createPortalGroup>;
+declare global {
+    var __oxyhq_bloom_portal_group__: PortalGroup | undefined;
+}
 export declare const Provider: (props: React.PropsWithChildren<object>) => import("react/jsx-runtime").JSX.Element;
 export declare const Outlet: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;
 export declare const Portal: ({ children }: React.PropsWithChildren<object>) => null;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/portal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAWN,MAAM,OAAO,CAAC;AA0Ef,eAAO,MAAM,QAAQ,UAnDM,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,4CAmDZ,CAAC;AAC/C,eAAO,MAAM,MAAM,iFAA6B,CAAC;AACjD,eAAO,MAAM,MAAM,iBAnBa,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,SAmBrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAWN,MAAM,OAAO,CAAC;AAef,iBAAS,iBAAiB;sBAQC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC;;2BAkC1B,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC;EAa9D;AAED,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAExD,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,4BAA4B,EAAE,WAAW,GAAG,SAAS,CAAC;CAC3D;AAsBD,eAAO,MAAM,QAAQ,UA5EM,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,4CA4EZ,CAAC;AAC/C,eAAO,MAAM,MAAM,iFAA6B,CAAC;AACjD,eAAO,MAAM,MAAM,iBA5Ca,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,SA4CrB,CAAC"}

package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts

@@ -17,6 +17,29 @@ export interface BloomThemeContextValue {
      */
     resetTheme: () => void;
 }
+declare global {
+    var __oxyhq_bloom_theme_context__: React.Context<BloomThemeContextValue | null> | undefined;
+}
+/**
+ * `BloomThemeContext` is a `globalThis`-guarded singleton so that every physical
+ * copy of this module returns the SAME React context object.
+ *
+ * Why this is required: `package.json`'s `exports["./theme"]` ships a
+ * `react-native` → `./src/...` condition alongside the `import` → `./lib/module/...`
+ * and `require` → `./lib/commonjs/...` forks, so up to three physical copies of the
+ * theme module can coexist in a single bundle. A bundler can resolve them through
+ * DIFFERENT conditions across import paths — e.g. an app importing `@oxyhq/bloom/theme`
+ * lands on the `src` copy while `@oxyhq/bloom/toast`'s `Toast.tsx` imports
+ * `../theme/use-theme` relatively and lands on a different physical copy. With a plain
+ * module-level `createContext(...)`, each copy creates its OWN context object: the
+ * mounted `<BloomThemeProvider>` writes into context A while `useTheme`/`useBloomTheme`/
+ * `Toast`/`Dialog` read context B, so `useContext` returns `null` and they throw
+ * "must be used within a <BloomThemeProvider>" even when correctly wrapped. This is the
+ * same src-vs-lib dual-instance class react-native-css guards its `StyleCollection`/
+ * root-variable families against. Anchoring the context on `globalThis` (keyed by the
+ * `__oxyhq_bloom_theme_context__` property) collapses all copies onto one object. The
+ * `??=` runs `createContext` at most once per process.
+ */
 export declare const BloomThemeContext: React.Context<BloomThemeContextValue | null>;
 export interface BloomThemeProviderProps {
     /** Controlled mode. Omit to use Bloom's internal state (with optional persistence). */

package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}
+{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,6BAA6B,EAC7B,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,GAC5C,SAAS,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAEpB,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}

package/lib/typescript/commonjs/theme/apply-dark-class.d.ts

@@ -5,10 +5,13 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
+ * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
+ * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
+ * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
+ * them.
  */
 export declare function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark'): void;
 //# sourceMappingURL=apply-dark-class.d.ts.map

package/lib/typescript/commonjs/theme/apply-dark-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}
+{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}

package/lib/typescript/commonjs/theme/native-root-vars.d.ts

@@ -24,11 +24,16 @@ import { type AppColorName } from './color-presets';
  * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
  * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
  * triples themselves — those are injected at runtime), so the whole tree below the
- * navigator renders monochrome. Writing the triples into `rootVariables` here is the
+ * navigator renders monochrome. Writing the vars into `rootVariables` here is the
  * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
  * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
  * content resolves the palette identically regardless of React-tree position.
  *
+ * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
+ * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
+ * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
+ * on native (see `getPresetVars` / `hslTripletToRgb`).
+ *
  * Why a STATIC `import`, not a runtime `require` (critical)
  * ---------------------------------------------------------
  * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and

package/lib/typescript/commonjs/theme/native-root-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}
+{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}

package/lib/typescript/commonjs/theme/preset-vars.d.ts

@@ -1,11 +1,44 @@
 import { type AppColorName, type PresetTokens } from './color-presets';
+/**
+ * Convert a shadcn-style HSL triple (`'H S% L%'`, optionally with an alpha tail
+ * `'H S% L% / A'`) into an sRGB `rgb(...)` string.
+ *
+ * Why rgb and not hsl (the native alpha-utility bug this fixes)
+ * -------------------------------------------------------------
+ * Tailwind v4 compiles an alpha-on-theme-color utility (`bg-primary/10`) into a
+ * `color-mix(... var(--color-primary) 10%, transparent)` declaration. On native,
+ * react-native-css resolves that `color-mix` at runtime via `colorjs.io/fn`, but
+ * its `color-mix` implementation registers ONLY the `sRGB`, `P3`, and `OKLab`
+ * color spaces — never `HSL`. So if `--color-primary` resolves to an `hsl(...)`
+ * string, `parse('hsl(...)')` throws, the mix is swallowed, and the utility
+ * silently produces no color. Emitting the resolved var as `rgb(...)` (a space
+ * colorjs.io always has registered) makes the alpha utilities resolve on native,
+ * matching web. Full (non-alpha) utilities already worked because React Native's
+ * native color parser handles `hsl()` directly; only `color-mix` was affected.
+ *
+ * Output is space-separated channels (`rgb(31 153 239)`), the modern CSS syntax
+ * parsed by both `colorjs.io/fn` (with only sRGB/P3/OKLab registered) and
+ * react-native-web / browsers. An alpha tail emits `rgb(r g b / a)`, likewise
+ * parsed by both.
+ *
+ * Pure function — standard HSL→sRGB conversion, channels rounded to integers.
+ * Tolerates a `deg` suffix on the hue and `%` suffixes on saturation/lightness.
+ */
+export declare function hslTripletToRgb(triplet: string): string;
 export interface PresetVarsOptions {
     /**
-     * Also emit Tailwind v4 resolved `--color-*` vars (wrapped in `hsl(...)`)
+     * Also emit Tailwind v4 resolved `--color-*` vars (as sRGB `rgb(...)` strings)
      * alongside the raw HSL triples. Needed when scoping a subtree where
      * Tailwind's `@theme` block has already precomputed `--color-*` at `:root`,
      * so overriding `--background` alone wouldn't cascade to `bg-background`.
-     * Default `false`.
+     *
+     * The resolved vars are emitted as `rgb(...)` rather than `hsl(...)` so the
+     * alpha-on-theme-color utilities (`bg-primary/10`, `text-foreground/50`)
+     * resolve on native: Tailwind compiles those to a runtime `color-mix(...)` that
+     * react-native-css evaluates via `colorjs.io/fn`, which only registers the
+     * sRGB/P3/OKLab spaces (not HSL) — so an `hsl(...)` var would throw and the
+     * utility would silently render no color. See `hslTripletToRgb`. Default
+     * `false`.
      */
     includeResolvedColorVars?: boolean;
 }

package/lib/typescript/commonjs/theme/preset-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}
+{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU1F;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA+CvD;AAyBD,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;;;;OAaG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}

package/lib/typescript/module/portal/index.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
+declare function createPortalGroup(): {
+    Provider: (props: React.PropsWithChildren<object>) => import("react/jsx-runtime").JSX.Element;
+    Outlet: () => import("react/jsx-runtime").JSX.Element | null;
+    Portal: ({ children }: React.PropsWithChildren<object>) => null;
+};
+type PortalGroup = ReturnType<typeof createPortalGroup>;
+declare global {
+    var __oxyhq_bloom_portal_group__: PortalGroup | undefined;
+}
 export declare const Provider: (props: React.PropsWithChildren<object>) => import("react/jsx-runtime").JSX.Element;
 export declare const Outlet: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;
 export declare const Portal: ({ children }: React.PropsWithChildren<object>) => null;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/portal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAWN,MAAM,OAAO,CAAC;AA0Ef,eAAO,MAAM,QAAQ,UAnDM,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,4CAmDZ,CAAC;AAC/C,eAAO,MAAM,MAAM,iFAA6B,CAAC;AACjD,eAAO,MAAM,MAAM,iBAnBa,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,SAmBrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAWN,MAAM,OAAO,CAAC;AAef,iBAAS,iBAAiB;sBAQC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC;;2BAkC1B,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC;EAa9D;AAED,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAExD,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,4BAA4B,EAAE,WAAW,GAAG,SAAS,CAAC;CAC3D;AAsBD,eAAO,MAAM,QAAQ,UA5EM,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,4CA4EZ,CAAC;AAC/C,eAAO,MAAM,MAAM,iFAA6B,CAAC;AACjD,eAAO,MAAM,MAAM,iBA5Ca,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,SA4CrB,CAAC"}

package/lib/typescript/module/theme/BloomThemeProvider.d.ts

@@ -17,6 +17,29 @@ export interface BloomThemeContextValue {
      */
     resetTheme: () => void;
 }
+declare global {
+    var __oxyhq_bloom_theme_context__: React.Context<BloomThemeContextValue | null> | undefined;
+}
+/**
+ * `BloomThemeContext` is a `globalThis`-guarded singleton so that every physical
+ * copy of this module returns the SAME React context object.
+ *
+ * Why this is required: `package.json`'s `exports["./theme"]` ships a
+ * `react-native` → `./src/...` condition alongside the `import` → `./lib/module/...`
+ * and `require` → `./lib/commonjs/...` forks, so up to three physical copies of the
+ * theme module can coexist in a single bundle. A bundler can resolve them through
+ * DIFFERENT conditions across import paths — e.g. an app importing `@oxyhq/bloom/theme`
+ * lands on the `src` copy while `@oxyhq/bloom/toast`'s `Toast.tsx` imports
+ * `../theme/use-theme` relatively and lands on a different physical copy. With a plain
+ * module-level `createContext(...)`, each copy creates its OWN context object: the
+ * mounted `<BloomThemeProvider>` writes into context A while `useTheme`/`useBloomTheme`/
+ * `Toast`/`Dialog` read context B, so `useContext` returns `null` and they throw
+ * "must be used within a <BloomThemeProvider>" even when correctly wrapped. This is the
+ * same src-vs-lib dual-instance class react-native-css guards its `StyleCollection`/
+ * root-variable families against. Anchoring the context on `globalThis` (keyed by the
+ * `__oxyhq_bloom_theme_context__` property) collapses all copies onto one object. The
+ * `??=` runs `createContext` at most once per process.
+ */
 export declare const BloomThemeContext: React.Context<BloomThemeContextValue | null>;
 export interface BloomThemeProviderProps {
     /** Controlled mode. Omit to use Bloom's internal state (with optional persistence). */

package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}
+{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,6BAA6B,EAC7B,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,GAC5C,SAAS,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAEpB,CAAC;AAExD,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}

package/lib/typescript/module/theme/apply-dark-class.d.ts

@@ -5,10 +5,13 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
+ * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
+ * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
+ * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
+ * them.
  */
 export declare function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark'): void;
 //# sourceMappingURL=apply-dark-class.d.ts.map

package/lib/typescript/module/theme/apply-dark-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}
+{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}

package/lib/typescript/module/theme/native-root-vars.d.ts

@@ -24,11 +24,16 @@ import { type AppColorName } from './color-presets';
  * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
  * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
  * triples themselves — those are injected at runtime), so the whole tree below the
- * navigator renders monochrome. Writing the triples into `rootVariables` here is the
+ * navigator renders monochrome. Writing the vars into `rootVariables` here is the
  * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
  * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
  * content resolves the palette identically regardless of React-tree position.
  *
+ * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
+ * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
+ * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
+ * on native (see `getPresetVars` / `hslTripletToRgb`).
+ *
  * Why a STATIC `import`, not a runtime `require` (critical)
  * ---------------------------------------------------------
  * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and

package/lib/typescript/module/theme/native-root-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}
+{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}

package/lib/typescript/module/theme/preset-vars.d.ts

@@ -1,11 +1,44 @@
 import { type AppColorName, type PresetTokens } from './color-presets';
+/**
+ * Convert a shadcn-style HSL triple (`'H S% L%'`, optionally with an alpha tail
+ * `'H S% L% / A'`) into an sRGB `rgb(...)` string.
+ *
+ * Why rgb and not hsl (the native alpha-utility bug this fixes)
+ * -------------------------------------------------------------
+ * Tailwind v4 compiles an alpha-on-theme-color utility (`bg-primary/10`) into a
+ * `color-mix(... var(--color-primary) 10%, transparent)` declaration. On native,
+ * react-native-css resolves that `color-mix` at runtime via `colorjs.io/fn`, but
+ * its `color-mix` implementation registers ONLY the `sRGB`, `P3`, and `OKLab`
+ * color spaces — never `HSL`. So if `--color-primary` resolves to an `hsl(...)`
+ * string, `parse('hsl(...)')` throws, the mix is swallowed, and the utility
+ * silently produces no color. Emitting the resolved var as `rgb(...)` (a space
+ * colorjs.io always has registered) makes the alpha utilities resolve on native,
+ * matching web. Full (non-alpha) utilities already worked because React Native's
+ * native color parser handles `hsl()` directly; only `color-mix` was affected.
+ *
+ * Output is space-separated channels (`rgb(31 153 239)`), the modern CSS syntax
+ * parsed by both `colorjs.io/fn` (with only sRGB/P3/OKLab registered) and
+ * react-native-web / browsers. An alpha tail emits `rgb(r g b / a)`, likewise
+ * parsed by both.
+ *
+ * Pure function — standard HSL→sRGB conversion, channels rounded to integers.
+ * Tolerates a `deg` suffix on the hue and `%` suffixes on saturation/lightness.
+ */
+export declare function hslTripletToRgb(triplet: string): string;
 export interface PresetVarsOptions {
     /**
-     * Also emit Tailwind v4 resolved `--color-*` vars (wrapped in `hsl(...)`)
+     * Also emit Tailwind v4 resolved `--color-*` vars (as sRGB `rgb(...)` strings)
      * alongside the raw HSL triples. Needed when scoping a subtree where
      * Tailwind's `@theme` block has already precomputed `--color-*` at `:root`,
      * so overriding `--background` alone wouldn't cascade to `bg-background`.
-     * Default `false`.
+     *
+     * The resolved vars are emitted as `rgb(...)` rather than `hsl(...)` so the
+     * alpha-on-theme-color utilities (`bg-primary/10`, `text-foreground/50`)
+     * resolve on native: Tailwind compiles those to a runtime `color-mix(...)` that
+     * react-native-css evaluates via `colorjs.io/fn`, which only registers the
+     * sRGB/P3/OKLab spaces (not HSL) — so an `hsl(...)` var would throw and the
+     * utility would silently render no color. See `hslTripletToRgb`. Default
+     * `false`.
      */
     includeResolvedColorVars?: boolean;
 }

package/lib/typescript/module/theme/preset-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}
+{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU1F;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA+CvD;AAyBD,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;;;;OAaG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/native-root-vars.test.ts

@@ -51,9 +51,11 @@ describe('applyNativeRootVars (native variant)', () => {
     expect(sets).not.toHaveProperty('--primary');
     expect(sets.primary).toEqual([['205 87% 53%']]);
 
-    // Resolved Tailwind v4 `--color-*` vars are written too, also bare-keyed.
+    // Resolved Tailwind v4 `--color-*` vars are written too, also bare-keyed,
+    // and as sRGB `rgb(...)` (not `hsl(...)`) so native `color-mix` alpha
+    // utilities resolve — `205 87% 53%` → `rgb(31 153 239)`.
     expect(sets).toHaveProperty('color-primary');
-    expect(sets['color-primary']).toEqual([['hsl(205 87% 53%)']]);
+    expect(sets['color-primary']).toEqual([['rgb(31 153 239)']]);
 
     // Every value is a single-element value-array `[[value]]` of strings.
     for (const value of Object.values(sets)) {

package/src/__tests__/preset-vars.test.ts

@@ -1,5 +1,5 @@
 import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
-import { getPresetVars } from '../theme/preset-vars';
+import { getPresetVars, hslTripletToRgb } from '../theme/preset-vars';
 
 const EXTENDED_KEYS = [
   '--card',
@@ -50,9 +50,50 @@ describe('getPresetVars', () => {
     expect(vars['--color-primary']).toBeUndefined();
   });
 
-  it('emits resolved --color-* vars wrapped in hsl() when requested', () => {
+  it('emits resolved --color-* vars as rgb() when requested', () => {
     const vars = getPresetVars('green', 'dark', { includeResolvedColorVars: true });
-    expect(vars['--color-primary']).toBe(`hsl(${APP_COLOR_PRESETS.green.dark['--primary']})`);
-    expect(vars['--color-card']).toBe(`hsl(${vars['--card']})`);
+    const primaryTriple = APP_COLOR_PRESETS.green.dark['--primary'] ?? '';
+    expect(vars['--color-primary']).toBe(hslTripletToRgb(primaryTriple));
+    expect(vars['--color-primary']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
+    expect(vars['--color-card']).toBe(hslTripletToRgb(vars['--card'] ?? ''));
+  });
+
+  it('resolves --color-primary to rgb for the blue preset (matches web reference)', () => {
+    // `blue` preset light `--primary` is `205 87% 53%` → rgb(31 153 239).
+    const vars = getPresetVars('blue', 'light', { includeResolvedColorVars: true });
+    expect(vars['--color-primary']).toBe('rgb(31 153 239)');
+  });
+});
+
+describe('hslTripletToRgb', () => {
+  it('converts a plain HSL triple to a space-separated rgb() string', () => {
+    expect(hslTripletToRgb('205 87% 53%')).toBe('rgb(31 153 239)');
+  });
+
+  it('converts the achromatic extremes', () => {
+    expect(hslTripletToRgb('0 0% 0%')).toBe('rgb(0 0 0)');
+    expect(hslTripletToRgb('0 0% 100%')).toBe('rgb(255 255 255)');
+    expect(hslTripletToRgb('0 0% 12%')).toBe('rgb(31 31 31)');
+  });
+
+  it('converts a saturated triple within ±1 per channel of the reference', () => {
+    // teal `185 100% 20%` ≈ rgb(0 94 102).
+    const match = /^rgb\((\d+) (\d+) (\d+)\)$/.exec(hslTripletToRgb('185 100% 20%'));
+    expect(match).not.toBeNull();
+    const r = Number(match?.[1] ?? NaN);
+    const g = Number(match?.[2] ?? NaN);
+    const b = Number(match?.[3] ?? NaN);
+    expect(Math.abs(r - 0)).toBeLessThanOrEqual(1);
+    expect(Math.abs(g - 94)).toBeLessThanOrEqual(1);
+    expect(Math.abs(b - 102)).toBeLessThanOrEqual(1);
+  });
+
+  it('tolerates a deg suffix on the hue', () => {
+    expect(hslTripletToRgb('205deg 87% 53%')).toBe('rgb(31 153 239)');
+  });
+
+  it('emits rgb(r g b / a) for an alpha tail (decimal or percentage)', () => {
+    expect(hslTripletToRgb('205 87% 53% / 0.5')).toBe('rgb(31 153 239 / 0.5)');
+    expect(hslTripletToRgb('205 87% 53% / 50%')).toBe('rgb(31 153 239 / 0.5)');
   });
 });

package/src/portal/index.tsx

@@ -81,7 +81,32 @@ function createPortalGroup() {
   return { Provider, Outlet, Portal };
 }
 
-const DefaultPortal = createPortalGroup();
+type PortalGroup = ReturnType<typeof createPortalGroup>;
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __oxyhq_bloom_portal_group__: PortalGroup | undefined;
+}
+
+/**
+ * `DefaultPortal` is a `globalThis`-guarded singleton so that every physical copy of
+ * this module shares ONE portal group (one `Context`, one `Provider`/`Outlet`/`Portal`
+ * triple).
+ *
+ * Why this is required: like the theme module, `exports["./portal"]` ships a
+ * `react-native` → `./src/...` condition alongside the `lib/module` / `lib/commonjs`
+ * forks, and the `Portal` component is consumed cross-subpath from `./tooltip`,
+ * `./prompt-input`, `./dialog`, `./select`, `./menu`, `./context-menu`, and `./popover`
+ * while the `Provider`/`Outlet` are mounted once at the app root via `@oxyhq/bloom/portal`.
+ * A bundler can resolve those subpaths through different export conditions, so without a
+ * guard each physical copy runs its own `createPortalGroup()` and a `<Portal>` from copy
+ * A would register against the `Provider`'s map in copy B — its content would never reach
+ * the `Outlet`. Anchoring the group on `globalThis` (keyed by `__oxyhq_bloom_portal_group__`)
+ * collapses all copies onto one group. Same src-vs-lib dual-instance class as
+ * `BloomThemeContext`.
+ */
+const DefaultPortal: PortalGroup = (globalThis.__oxyhq_bloom_portal_group__ ??=
+  createPortalGroup());
 
 export const Provider = DefaultPortal.Provider;
 export const Outlet = memo(DefaultPortal.Outlet);

package/src/react-native-css.d.ts

@@ -20,8 +20,9 @@
 declare module 'react-native-css/native-internal' {
   /**
    * A leaf style value. Mirrors react-native-css's `compiler.types`
-   * `StyleDescriptor`. Bloom only ever writes string HSL triples / `hsl(...)`
-   * strings, but the family is typed against the full descriptor union.
+   * `StyleDescriptor`. Bloom only ever writes string color values (raw HSL
+   * triples for the `--*` vars, sRGB `rgb(...)` for the resolved `--color-*`
+   * vars), but the family is typed against the full descriptor union.
    */
   type StyleDescriptor =
     | string

package/src/theme/BloomThemeProvider.tsx

@@ -58,7 +58,36 @@ export interface BloomThemeContextValue {
   resetTheme: () => void;
 }
 
-export const BloomThemeContext = createContext<BloomThemeContextValue | null>(null);
+declare global {
+  // eslint-disable-next-line no-var
+  var __oxyhq_bloom_theme_context__:
+    | React.Context<BloomThemeContextValue | null>
+    | undefined;
+}
+
+/**
+ * `BloomThemeContext` is a `globalThis`-guarded singleton so that every physical
+ * copy of this module returns the SAME React context object.
+ *
+ * Why this is required: `package.json`'s `exports["./theme"]` ships a
+ * `react-native` → `./src/...` condition alongside the `import` → `./lib/module/...`
+ * and `require` → `./lib/commonjs/...` forks, so up to three physical copies of the
+ * theme module can coexist in a single bundle. A bundler can resolve them through
+ * DIFFERENT conditions across import paths — e.g. an app importing `@oxyhq/bloom/theme`
+ * lands on the `src` copy while `@oxyhq/bloom/toast`'s `Toast.tsx` imports
+ * `../theme/use-theme` relatively and lands on a different physical copy. With a plain
+ * module-level `createContext(...)`, each copy creates its OWN context object: the
+ * mounted `<BloomThemeProvider>` writes into context A while `useTheme`/`useBloomTheme`/
+ * `Toast`/`Dialog` read context B, so `useContext` returns `null` and they throw
+ * "must be used within a <BloomThemeProvider>" even when correctly wrapped. This is the
+ * same src-vs-lib dual-instance class react-native-css guards its `StyleCollection`/
+ * root-variable families against. Anchoring the context on `globalThis` (keyed by the
+ * `__oxyhq_bloom_theme_context__` property) collapses all copies onto one object. The
+ * `??=` runs `createContext` at most once per process.
+ */
+export const BloomThemeContext: React.Context<BloomThemeContextValue | null> =
+  (globalThis.__oxyhq_bloom_theme_context__ ??=
+    createContext<BloomThemeContextValue | null>(null));
 
 export interface BloomThemeProviderProps {
   /** Controlled mode. Omit to use Bloom's internal state (with optional persistence). */

package/src/theme/apply-dark-class.ts

@@ -13,10 +13,13 @@ export function applyDarkClass(resolved: 'light' | 'dark') {
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
+ * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
+ * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
+ * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
+ * them.
  */
 export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark') {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;

package/src/theme/native-root-vars.ts

@@ -28,11 +28,16 @@ import { type AppColorName } from './color-presets';
  * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
  * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
  * triples themselves — those are injected at runtime), so the whole tree below the
- * navigator renders monochrome. Writing the triples into `rootVariables` here is the
+ * navigator renders monochrome. Writing the vars into `rootVariables` here is the
  * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
  * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
  * content resolves the palette identically regardless of React-tree position.
  *
+ * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
+ * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
+ * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
+ * on native (see `getPresetVars` / `hslTripletToRgb`).
+ *
  * Why a STATIC `import`, not a runtime `require` (critical)
  * ---------------------------------------------------------
  * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and