@oxyhq/bloom 0.35.8 → 0.37.0

package/lib/typescript/module/theme/color-engine/lab-point-provider.d.ts

@@ -0,0 +1,6 @@
+export type LabPoint = [number, number, number];
+export declare function labFromInt(argb: number): LabPoint;
+export declare function intFromLab(point: LabPoint): number;
+/** Squared Euclidean distance in L*a*b* (cheaper than the real distance). */
+export declare function labDistance(from: LabPoint, to: LabPoint): number;
+//# sourceMappingURL=lab-point-provider.d.ts.map

package/lib/typescript/module/theme/color-engine/lab-point-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lab-point-provider.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/lab-point-provider.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAEjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAElD;AAED,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,GAAG,MAAM,CAKhE"}

package/lib/typescript/module/theme/color-engine/math-utils.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Bloom colour engine — scalar/vector maths.
+ *
+ * Self-contained port of the Material Color Utilities maths helpers (the same
+ * primitives MaterialKolor uses), reimplemented in Bloom's own TypeScript so the
+ * theme has ZERO external colour dependencies. Algorithm © Google, Apache-2.0;
+ * this is a faithful derivative kept byte-compatible via golden tests.
+ */
+/** 1 if `n > 0`, -1 if `n < 0`, 0 if `n === 0`. */
+export declare function signum(n: number): number;
+/** Linear interpolation: `start` at `amount = 0`, `stop` at `amount = 1`. */
+export declare function lerp(start: number, stop: number, amount: number): number;
+/** Clamp `input` into `[min, max]`. */
+export declare function clampInt(min: number, max: number, input: number): number;
+/** Clamp `input` into `[min, max]` (floating point). */
+export declare function clampDouble(min: number, max: number, input: number): number;
+/** Wrap a degree measure into `[0, 360)` as an integer. */
+export declare function sanitizeDegreesInt(degrees: number): number;
+/** Wrap a degree measure into `[0, 360)` as a float. */
+export declare function sanitizeDegreesDouble(degrees: number): number;
+/**
+ * Sign of the shortest rotation from `from` to `to` on a circle.
+ * @returns 1 if increasing `from` is shortest, -1 if decreasing is.
+ */
+export declare function rotationDirection(from: number, to: number): number;
+/** Shortest angular distance (degrees) between two hues. */
+export declare function differenceDegrees(a: number, b: number): number;
+/** Multiply a 1×3 row vector by a 3×3 matrix. */
+export declare function matrixMultiply(row: [number, number, number], matrix: [
+    [
+        number,
+        number,
+        number
+    ],
+    [
+        number,
+        number,
+        number
+    ],
+    [
+        number,
+        number,
+        number
+    ]
+]): [number, number, number];
+//# sourceMappingURL=math-utils.d.ts.map

package/lib/typescript/module/theme/color-engine/math-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"math-utils.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/math-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,mDAAmD;AACnD,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAExC;AAED,6EAA6E;AAC7E,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAExE;AAED,uCAAuC;AACvC,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAExE;AAED,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE3E;AAED,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAG1D;AAED,wDAAwD;AACxD,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAG7D;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAGlE;AAED,4DAA4D;AAC5D,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,iDAAiD;AACjD,wBAAgB,cAAc,CAC5B,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAC7B,MAAM,EAAE;IACN;QAAC,MAAM;QAAE,MAAM;QAAE,MAAM;KAAC;IACxB;QAAC,MAAM;QAAE,MAAM;QAAE,MAAM;KAAC;IACxB;QAAC,MAAM;QAAE,MAAM;QAAE,MAAM;KAAC;CACzB,GACA,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAK1B"}

package/lib/typescript/module/theme/color-engine/quantizer-map.d.ts

@@ -0,0 +1,3 @@
+/** Count opaque pixels by exact ARGB. Fully-transparent pixels are dropped. */
+export declare function countByColor(pixels: number[]): Map<number, number>;
+//# sourceMappingURL=quantizer-map.d.ts.map

package/lib/typescript/module/theme/color-engine/quantizer-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantizer-map.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/quantizer-map.ts"],"names":[],"mappings":"AAQA,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAOlE"}

package/lib/typescript/module/theme/color-engine/quantizer-wu.d.ts

@@ -0,0 +1,3 @@
+/** Wu-quantize `pixels` into at most `maxColors` representative ARGB colours. */
+export declare function quantizeWu(pixels: number[], maxColors: number): number[];
+//# sourceMappingURL=quantizer-wu.d.ts.map

package/lib/typescript/module/theme/color-engine/quantizer-wu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantizer-wu.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/quantizer-wu.ts"],"names":[],"mappings":"AAqDA,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAyQxE"}

package/lib/typescript/module/theme/color-engine/scheme-variants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Bloom colour engine — scheme variants.
+ *
+ * How each variant derives its five tonal palettes from the seed HCT. Faithful
+ * port of Material Color Utilities' `Scheme*` families (Apache-2.0), expressed
+ * as plain builder functions (our style) rather than subclasses. Fidelity/
+ * Content are intentionally left out — they need the temperature-cache complement
+ * and aren't useful for Bloom's fixed brand seeds.
+ */
+import { DynamicScheme } from './dynamic-scheme';
+import type { Hct } from './hct';
+export type SchemeVariant = 'vibrant' | 'expressive' | 'tonalSpot' | 'neutral';
+/** Maxed-out colourfulness at each position of the primary palette. */
+export declare function schemeVibrant(source: Hct, isDark: boolean, contrastLevel: number): DynamicScheme;
+/** Playful, intentionally detached from the seed hue (primary rotated 240°). */
+export declare function schemeExpressive(source: Hct, isDark: boolean, contrastLevel: number): DynamicScheme;
+/** The Material You default — a calm, balanced treatment of the seed. */
+export declare function schemeTonalSpot(source: Hct, isDark: boolean, contrastLevel: number): DynamicScheme;
+/** Near-greyscale — the seed hue is present only as a whisper. */
+export declare function schemeNeutral(source: Hct, isDark: boolean, contrastLevel: number): DynamicScheme;
+/** Build a scheme by variant name. */
+export declare function buildScheme(variant: SchemeVariant, source: Hct, isDark: boolean, contrastLevel?: number): DynamicScheme;
+//# sourceMappingURL=scheme-variants.d.ts.map

package/lib/typescript/module/theme/color-engine/scheme-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheme-variants.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/scheme-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;AAU/E,uEAAuE;AACvE,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,aAAa,CAkBhG;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,aAAa,CAkBnG;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,aAAa,CAYlG;AAED,kEAAkE;AAClE,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,aAAa,CAYhG;AASD,sCAAsC;AACtC,wBAAgB,WAAW,CACzB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,OAAO,EACf,aAAa,SAAI,GAChB,aAAa,CAEf"}

package/lib/typescript/module/theme/color-engine/score.d.ts

@@ -0,0 +1,8 @@
+export interface ScoreOptions {
+    desired?: number;
+    fallbackColorARGB?: number;
+    filter?: boolean;
+}
+/** Rank quantized colours as theme seeds. Best first. */
+export declare function score(colorsToPopulation: Map<number, number>, options?: ScoreOptions): number[];
+//# sourceMappingURL=score.d.ts.map

package/lib/typescript/module/theme/color-engine/score.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"score.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/score.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,yDAAyD;AACzD,wBAAgB,KAAK,CAAC,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,EAAE,CAwDnG"}

package/lib/typescript/module/theme/color-engine/seed-from-image.d.ts

@@ -0,0 +1,13 @@
+import { type ScoreOptions } from './score';
+/**
+ * Quantize `pixels` to a representative palette with its populations. Uses Wu
+ * (deterministic) for the palette, then assigns every pixel to its nearest
+ * representative in L*a*b* — no randomness, so the same image always yields the
+ * same result.
+ */
+export declare function quantizeImage(pixels: number[], maxColors?: number): Map<number, number>;
+/** Ranked seed candidates (best first) extracted from an image's pixels (ARGB). */
+export declare function seedsFromImagePixels(pixels: number[], options?: ScoreOptions): number[];
+/** The single best seed colour from an image, as `#rrggbb`. */
+export declare function seedHexFromImagePixels(pixels: number[]): string;
+//# sourceMappingURL=seed-from-image.d.ts.map

package/lib/typescript/module/theme/color-engine/seed-from-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seed-from-image.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/seed-from-image.ts"],"names":[],"mappings":"AAcA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,SAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CA6BpF;AAED,mFAAmF;AACnF,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,CAEvF;AAED,+DAA+D;AAC/D,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAI/D"}

package/lib/typescript/module/theme/color-engine/tonal-palette.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Bloom colour engine — tonal palettes.
+ *
+ * Faithful port of Material Color Utilities' `TonalPalette` (Apache-2.0). A
+ * palette holds a fixed hue + chroma and yields a colour for any tone (0–100).
+ * Schemes build primary/secondary/tertiary/neutral palettes and read specific
+ * tones per role.
+ */
+import { Hct } from './hct';
+export declare class TonalPalette {
+    readonly hue: number;
+    readonly chroma: number;
+    readonly keyColor: Hct;
+    private readonly cache;
+    private constructor();
+    static fromInt(argb: number): TonalPalette;
+    static fromHct(hct: Hct): TonalPalette;
+    static fromHueAndChroma(hue: number, chroma: number): TonalPalette;
+    /** ARGB of this palette at the given tone. */
+    tone(tone: number): number;
+    /** HCT of this palette at the given tone. */
+    getHct(tone: number): Hct;
+}
+//# sourceMappingURL=tonal-palette.d.ts.map

package/lib/typescript/module/theme/color-engine/tonal-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tonal-palette.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/tonal-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,qBAAa,YAAY;IAIrB,QAAQ,CAAC,GAAG,EAAE,MAAM;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM;IACvB,QAAQ,CAAC,QAAQ,EAAE,GAAG;IALxB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA6B;IAEnD,OAAO;IAMP,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY;IAI1C,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,YAAY;IAItC,MAAM,CAAC,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,YAAY;IAKlE,8CAA8C;IAC9C,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAS1B,6CAA6C;IAC7C,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG;CAG1B"}

package/lib/typescript/module/theme/color-engine/tone-delta-pair.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Bloom colour engine — tone-delta pair.
+ *
+ * Faithful port of Material Color Utilities' `ToneDeltaPair` (Apache-2.0).
+ * Constrains two related roles to keep a minimum tonal distance in a given
+ * direction (e.g. a fixed colour must stay lighter than its dim variant), so
+ * paired roles never collapse into each other.
+ */
+import type { ColorRole } from './color-role';
+export type TonePolarity = 'darker' | 'lighter' | 'nearer' | 'farther';
+export declare class ToneDeltaPair {
+    readonly roleA: ColorRole;
+    readonly roleB: ColorRole;
+    readonly delta: number;
+    readonly polarity: TonePolarity;
+    readonly stayTogether: boolean;
+    constructor(roleA: ColorRole, roleB: ColorRole, delta: number, polarity: TonePolarity, stayTogether: boolean);
+}
+//# sourceMappingURL=tone-delta-pair.d.ts.map

package/lib/typescript/module/theme/color-engine/tone-delta-pair.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone-delta-pair.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/tone-delta-pair.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE,qBAAa,aAAa;IAEtB,QAAQ,CAAC,KAAK,EAAE,SAAS;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM;IACtB,QAAQ,CAAC,QAAQ,EAAE,YAAY;IAC/B,QAAQ,CAAC,YAAY,EAAE,OAAO;gBAJrB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,OAAO;CAEjC"}

package/lib/typescript/module/theme/color-engine/variant.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Bloom colour engine — scheme variants.
+ *
+ * The families of dynamic-colour scheme supported by the engine. Bloom exposes
+ * the useful subset (Vibrant, Expressive, TonalSpot, Neutral, Fidelity); the
+ * numeric values match Material Color Utilities so ported scheme logic lines up.
+ */
+export declare enum Variant {
+    MONOCHROME = 0,
+    NEUTRAL = 1,
+    TONAL_SPOT = 2,
+    VIBRANT = 3,
+    EXPRESSIVE = 4,
+    FIDELITY = 5,
+    CONTENT = 6,
+    RAINBOW = 7,
+    FRUIT_SALAD = 8
+}
+//# sourceMappingURL=variant.d.ts.map

package/lib/typescript/module/theme/color-engine/variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/variant.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,oBAAY,OAAO;IACjB,UAAU,IAAI;IACd,OAAO,IAAI;IACX,UAAU,IAAI;IACd,OAAO,IAAI;IACX,UAAU,IAAI;IACd,QAAQ,IAAI;IACZ,OAAO,IAAI;IACX,OAAO,IAAI;IACX,WAAW,IAAI;CAChB"}

package/lib/typescript/module/theme/color-engine/viewing-conditions.d.ts

@@ -0,0 +1,18 @@
+export declare class ViewingConditions {
+    readonly n: number;
+    readonly aw: number;
+    readonly nbb: number;
+    readonly ncb: number;
+    readonly c: number;
+    readonly nc: number;
+    readonly rgbD: [number, number, number];
+    readonly fl: number;
+    readonly fLRoot: number;
+    readonly z: number;
+    private static _default;
+    /** sRGB-like viewing conditions (the only ones Bloom uses). */
+    static get DEFAULT(): ViewingConditions;
+    private constructor();
+    static make(whitePoint?: [number, number, number], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
+}
+//# sourceMappingURL=viewing-conditions.d.ts.map

package/lib/typescript/module/theme/color-engine/viewing-conditions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewing-conditions.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/viewing-conditions.ts"],"names":[],"mappings":"AAWA,qBAAa,iBAAiB;IAQ1B,QAAQ,CAAC,CAAC,EAAE,MAAM;IAClB,QAAQ,CAAC,EAAE,EAAE,MAAM;IACnB,QAAQ,CAAC,GAAG,EAAE,MAAM;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM;IAClB,QAAQ,CAAC,EAAE,EAAE,MAAM;IACnB,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,EAAE,EAAE,MAAM;IACnB,QAAQ,CAAC,MAAM,EAAE,MAAM;IACvB,QAAQ,CAAC,CAAC,EAAE,MAAM;IAhBpB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAgC;IACvD,+DAA+D;IAC/D,MAAM,KAAK,OAAO,IAAI,iBAAiB,CAEtC;IAED,OAAO;IAaP,MAAM,CAAC,IAAI,CACT,UAAU,GAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAmB,EACtD,iBAAiB,GAAE,MAAuD,EAC1E,eAAe,SAAO,EACtB,QAAQ,SAAM,EACd,qBAAqB,UAAQ,GAC5B,iBAAiB;CAuCrB"}

package/lib/typescript/module/theme/color-presets.d.ts

@@ -1,35 +1,40 @@
+import type { SchemeVariant } from './color-engine';
 export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'yellow' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint' | 'oxy' | 'faircoin';
 /**
- * Palette tokens for a single mode (light or dark) of a color preset.
+ * A single colour preset: a brand SEED colour plus the tonal scheme variant to
+ * derive its full role set with.
  *
- * Keys carry a leading `--` for historical reasons (shadcn-style CSS variable
- * names) — keep in mind the values are platform-agnostic **raw HSL triples**
- * (e.g. `'185 100% 20%'` or `'185 100% 20% / 0.5'`), not CSS-resolved colors.
- * The single canonical resolver `getResolvedTokens` (in `token-registry.ts`)
- * converts this raw map to sRGB `rgb(...)` for every runtime write — the same
- * values drive BOTH layers:
- *   - the web layer: `getResolvedTokens`'s `rgb(...)` strings are written to
- *     `document.documentElement` / a `BloomColorScope` element, so `var(--x)` —
- *     the form Tailwind v4 `@theme inline` compiles its color utilities to —
- *     resolves to a valid color directly, and
- *   - the native layer (`buildTheme` resolves the raw triples into `hsl(...)`
- *     strings consumable by React Native styles; `native-root-vars.native.ts`
- *     writes the same canonical `rgb(...)` values into react-native-css's
- *     `rootVariables` family).
- *
- * The `--` prefix is an implementation detail we will drop in a future major.
+ * Every preset's palette is now GENERATED by Bloom's dependency-free colour
+ * engine (`color-engine/`) from this seed — no hand-authored HSL triples. The
+ * engine's `generateRoleColors({ seed, variant, isDark })` yields the full
+ * Material-3 role set for light and dark; `getPresetVars` (in `preset-vars.ts`)
+ * maps those roles onto Bloom's canonical token names. A user-picked colour
+ * flows through the identical path — a preset is just a fixed seed.
  */
-export type PresetTokens = Record<string, string>;
 export interface AppColorPreset {
     name: AppColorName;
+    /** The brand seed colour, `#rrggbb`. Also the value the colour picker matches. */
     hex: string;
-    light: PresetTokens;
-    dark: PresetTokens;
+    /** The tonal scheme variant the engine derives roles with. */
+    variant: SchemeVariant;
 }
+/**
+ * Historically each preset carried a full light/dark map of raw HSL triples.
+ * That map is gone — the engine derives every role from {@link AppColorPreset.hex}.
+ * The type alias is retained for the public `PresetTokens` export shape (the
+ * resolved `--token -> value` record that `getPresetVars` produces).
+ */
+export type PresetTokens = Record<string, string>;
 export declare const APP_COLOR_NAMES: readonly AppColorName[];
 /** Premium-exclusive presets, hidden from the standard color picker. */
 export declare const PREMIUM_COLOR_NAMES: readonly AppColorName[];
 export declare const HEX_TO_APP_COLOR: Record<string, AppColorName>;
 export declare function hexToAppColorName(hex: string): AppColorName;
+/**
+ * The 13 named presets, each a brand seed + scheme variant. The engine derives
+ * the full role set (light + dark) from the seed. Seeds are the brand hex of
+ * each preset; `oxy` reads most faithfully as `vibrant`, everything else keeps a
+ * bold `vibrant` derivation to match the prior saturated palette.
+ */
 export declare const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset>;
 //# sourceMappingURL=color-presets.d.ts.map

package/lib/typescript/module/theme/color-presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;AAEvJ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,YAAY,EAAsH,CAAC;AAE1K,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,EAAE,SAAS,YAAY,EAAwB,CAAC;AAEhF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAczD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAE3D;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAkmBlE,CAAC"}
+{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,MAAM,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,KAAK,GACL,UAAU,CAAC;AAEf;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,kFAAkF;IAClF,GAAG,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,OAAO,EAAE,aAAa,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,eAAe,EAAE,SAAS,YAAY,EAAsH,CAAC;AAE1K,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,EAAE,SAAS,YAAY,EAAwB,CAAC;AAEhF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAczD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAE3D;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAclE,CAAC"}

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

@@ -1,16 +1,20 @@
 import { type AppColorName, type PresetTokens } from './color-presets';
 /**
- * Bloom's base preset tokens extended with the surface/card/chart/sidebar
- * tokens that apps layer on top of the core shadcn palette. Synthesized from
- * the preset's primary hue so every preset stays in sync automatically.
+ * Map a preset (seed + variant) and mode onto Bloom's canonical CSS-var token
+ * set, sourcing EVERY colour from the colour engine's Material-3 role output.
+ *
+ * This replaces the old hand-authored HSL triples: the engine derives a full,
+ * self-consistent, WCAG-legible role set from the seed for light and dark, and
+ * this function assigns those roles to Bloom's token names. The token NAMES are
+ * unchanged (see `CANONICAL_TOKENS` in `token-registry.ts`) — only the SOURCE of
+ * each colour moved to the engine, so every downstream consumer keeps working.
+ *
+ * Values are full `rgb(r g b)` strings straight from the engine. `getResolvedTokens`
+ * passes non-HSL-triple values through untouched, so these flow through the whole
+ * pipeline (web document writes, native `rootVariables`, JS `ThemeColors`) unchanged.
  *
  * This is the single source of truth for extended theming vars — consumer apps
  * must not redefine these per-app.
- *
- * Values are platform-agnostic **raw HSL triples** (`'185 100% 20%'`, optionally
- * with a `/ A` alpha tail). The single canonical resolver `getResolvedTokens`
- * (in `token-registry.ts`) converts these to sRGB `rgb(...)` for BOTH web and
- * native runtime writes — this function only produces the raw triple map.
  */
 export declare function getPresetVars(colorName: AppColorName, mode: 'light' | 'dark'): PresetTokens;
 /**
@@ -19,10 +23,10 @@ export declare function getPresetVars(colorName: AppColorName, mode: 'light' | '
  * call this only when an app needs the extended (card/chart/sidebar) tokens on
  * the document root.
  *
- * Tokens are resolved to sRGB `rgb(...)` via the single canonical
- * `getResolvedTokens` pipeline, so `var(--x)` — the form Tailwind v4
- * `@theme inline` compiles its color utilities to — resolves directly to a
- * valid color on web.
+ * Tokens are resolved via the single canonical `getResolvedTokens` pipeline
+ * (already full `rgb(...)` colours from the engine), so `var(--x)` — the form
+ * Tailwind v4 `@theme inline` compiles its color utilities to — resolves
+ * directly to a valid color on web.
  */
 export declare function applyPresetVarsToDocument(colorName: AppColorName, mode: 'light' | 'dark'): void;
 //# sourceMappingURL=preset-vars.d.ts.map

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;AAe1F;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,YAAY,CAiCd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,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;AAQ1F;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,YAAY,CAoDd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,IAAI,CAQN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.35.8",
+  "version": "0.37.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -158,6 +158,22 @@
         "default": "./lib/commonjs/fab/index.js"
       }
     },
+    "./frosted-icon-button": {
+      "react-native": "./src/frosted-icon-button/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/frosted-icon-button/index.web.d.ts",
+        "import": "./lib/module/frosted-icon-button/index.web.js",
+        "require": "./lib/commonjs/frosted-icon-button/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/frosted-icon-button/index.d.ts",
+        "default": "./lib/module/frosted-icon-button/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/frosted-icon-button/index.d.ts",
+        "default": "./lib/commonjs/frosted-icon-button/index.js"
+      }
+    },
     "./grouped-buttons": {
       "react-native": "./src/grouped-buttons/index.ts",
       "import": {

package/src/__tests__/BloomThemeProvider.test.tsx

@@ -4,6 +4,7 @@ import { render } from '@testing-library/react-native';
 
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 import { useTheme, useThemeColor, useBloomTheme } from '../theme/use-theme';
+import { buildTheme } from '../theme/build-theme';
 import type { AppColorName } from '../theme/color-presets';
 
 function ThemeDisplay() {
@@ -72,8 +73,10 @@ describe('BloomThemeProvider', () => {
         <ThemeDisplay />
       </BloomThemeProvider>,
     );
-    // Blue preset primary is HSL(205, 87%, 53%) → canonical sRGB rgb(31 153 239)
-    expect(getByTestId('primary').props.children).toBe('rgb(31 153 239)');
+    // Blue preset primary is now engine-derived from the blue seed.
+    expect(getByTestId('primary').props.children).toBe(
+      buildTheme('blue', 'light').colors.primary,
+    );
   });
 
   it('generates different background colors for light and dark modes', () => {
@@ -135,8 +138,10 @@ describe('useThemeColor', () => {
         <ColorDisplay colorKey="primary" />
       </BloomThemeProvider>,
     );
-    // teal preset primary HSL(185, 100%, 20%) → canonical sRGB rgb(0 94 102)
-    expect(getByTestId('color').props.children).toBe('rgb(0 94 102)');
+    // teal preset primary is now engine-derived from the teal seed.
+    expect(getByTestId('color').props.children).toBe(
+      buildTheme('teal', 'light').colors.primary,
+    );
   });
 });
 

package/src/__tests__/FrostedIconButton.test.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { Text, type ViewStyle } from 'react-native';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { FrostedIconButton } from '../frosted-icon-button';
+import { buildTheme } from '../theme/build-theme';
+import { parseRgb } from '../theme/color-utils';
+import { resolveFrostedPalette, resolveFrostedSize } from '../frosted-icon-button/shared';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="dark" colorPreset="blue">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+function findGeometry(style: unknown): ViewStyle | undefined {
+  const arr = Array.isArray(style) ? style : [style];
+  return arr.find(
+    (s): s is ViewStyle => typeof s === 'object' && s !== null && 'width' in s,
+  );
+}
+
+/** A minimal icon element that accepts a `fill` prop (like a Bloom icon). */
+function MockIcon({ fill, testID }: { fill?: string; testID?: string }) {
+  return React.createElement('MockIcon', { fill, testID });
+}
+
+describe('FrostedIconButton (native)', () => {
+  it('renders its icon content', () => {
+    const { getByText } = renderWithTheme(
+      <FrostedIconButton accessibilityLabel="Back" icon={<Text>x</Text>} />,
+    );
+    expect(getByText('x')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <FrostedIconButton testID="btn" accessibilityLabel="Back" onPress={onPress} icon={<Text>x</Text>} />,
+    );
+    fireEvent.press(getByTestId('btn'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('marks the disabled a11y state and drops the press handler', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <FrostedIconButton testID="btn" disabled accessibilityLabel="Back" onPress={onPress} icon={<Text>x</Text>} />,
+    );
+    const btn = getByTestId('btn');
+    expect(btn.props.accessibilityState).toEqual({ disabled: true, selected: false });
+    expect(btn.props.onPress).toBeUndefined();
+  });
+
+  it('reports the selected a11y state when active', () => {
+    const { getByTestId } = renderWithTheme(
+      <FrostedIconButton testID="btn" active accessibilityLabel="Mute" icon={<Text>x</Text>} />,
+    );
+    expect(getByTestId('btn').props.accessibilityState).toEqual({ disabled: false, selected: true });
+  });
+
+  it('injects the theme icon color as a fallback fill on a bare icon', () => {
+    const { getByTestId } = renderWithTheme(
+      <FrostedIconButton accessibilityLabel="Back" icon={<MockIcon testID="ic" />} />,
+    );
+    // Frosted (rest) icon color === foreground token.
+    expect(getByTestId('ic').props.fill).toMatch(/^rgb/);
+  });
+
+  it('never overrides an explicit fill on the icon', () => {
+    const { getByTestId } = renderWithTheme(
+      <FrostedIconButton accessibilityLabel="Back" icon={<MockIcon testID="ic" fill="rgb(1, 2, 3)" />} />,
+    );
+    expect(getByTestId('ic').props.fill).toBe('rgb(1, 2, 3)');
+  });
+
+  it('resolves preset sizes to concrete geometry (md=36, sm=32)', () => {
+    const { getByTestId, rerender } = renderWithTheme(
+      <FrostedIconButton testID="btn" size="md" accessibilityLabel="Back" icon={<Text>x</Text>} />,
+    );
+    expect(findGeometry(getByTestId('btn').props.style)?.width).toBe(36);
+    rerender(
+      <BloomThemeProvider mode="dark" colorPreset="blue">
+        <FrostedIconButton testID="btn" size="sm" accessibilityLabel="Back" icon={<Text>x</Text>} />
+      </BloomThemeProvider>,
+    );
+    expect(findGeometry(getByTestId('btn').props.style)?.width).toBe(32);
+  });
+
+  it('accepts children as an icon alias', () => {
+    const { getByText } = renderWithTheme(
+      <FrostedIconButton accessibilityLabel="Back">
+        <Text>★</Text>
+      </FrostedIconButton>,
+    );
+    expect(getByText('★')).toBeTruthy();
+  });
+});
+
+// Browser-independent proof of the visual contract: the frosted surface is a
+// LIGHT translucent tint on a dark theme (never a dark card fill), so it reads on
+// a solid dark page. Pure token math — no renderer / platform involved.
+describe('FrostedIconButton palette math', () => {
+  it('dark surface is a light low-opacity tint that composites lighter than the page', () => {
+    const theme = buildTheme('blue', 'dark');
+    const palette = resolveFrostedPalette(theme.colors, true);
+
+    const base = parseRgb(palette.surface);
+    expect(base).not.toBeNull();
+    if (!base) throw new Error('unreachable');
+    // Light base (foreground), not a dark card.
+    expect(base.r).toBeGreaterThanOrEqual(200);
+
+    // Low opacity → composited over rgb(11,11,15) it is clearly lighter.
+    expect(palette.surface).toMatch(/, 0\.14\)$/);
+    const a = 0.14;
+    const page = 11;
+    const composite = Math.round(page * (1 - a) + base.r * a);
+    expect(composite - page).toBeGreaterThanOrEqual(15);
+  });
+
+  it('active surface is the opaque primary token (solid on-state, no alpha)', () => {
+    const theme = buildTheme('blue', 'dark');
+    const palette = resolveFrostedPalette(theme.colors, true);
+    expect(palette.activeSurface).toBe(theme.colors.primary);
+    expect(palette.activeSurface).toMatch(/^rgb\(/);
+  });
+
+  it('scales a numeric size to a concrete diameter + icon box', () => {
+    const geo = resolveFrostedSize(44);
+    expect(geo.diameter).toBe(44);
+    expect(geo.iconBox).toBe(Math.round(44 * 0.56));
+  });
+});