@oxy.so/bloom 2.12.4 → 3.0.0

package/lib/typescript/module/layout/top-edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-edge.d.ts","sourceRoot":"","sources":["../../../../src/layout/top-edge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAOL,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAMf;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAG9D;yBAHe,eAAe;;;AAO/B;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAOxC;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CASpD"}

package/lib/typescript/module/page-header/EdgeScrim.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+/**
+ * The floating header's EDGE EFFECT: the page colour at the top, fading to
+ * nothing below the islands.
+ *
+ * ── WHY IT IS A GRADIENT AND NOT A BLUR ─────────────────────────────────────
+ *
+ * It is the thing that lets a title sit on a photograph and still be read, and
+ * it has exactly one job: no horizontal line anywhere. A translucent rectangle
+ * — even a blurred one — ends at its own bottom edge, and that edge is a line
+ * across the screen whether or not it is drawn. Apple's scroll edge effect is
+ * described the same way: it protects legibility at the edge and must not read
+ * as a slab over the content.
+ *
+ * It is NOT a blur of varying intensity, and saying so matters because the two
+ * are easy to conflate and only one of them is here. `backdrop-filter` and
+ * `expo-blur` both take a single radius for the whole surface; a falloff would
+ * need the ten stacked layers `progressive-blur` uses, which is a real cost for
+ * a strip this size. This is an opacity ramp of one flat colour, and that is
+ * all it claims to be.
+ *
+ * ── THE STOPS ───────────────────────────────────────────────────────────────
+ *
+ * Four of them, shaped as an ease-out rather than a straight line. A LINEAR
+ * ramp of opacity is perceptually not linear: it holds too much colour through
+ * the middle and then falls off visibly in the last fifth, which puts a soft
+ * but findable band across the content. Weighting the fall earlier spends the
+ * gradient's height where the eye is looking — the region behind the title —
+ * and arrives at zero gently.
+ *
+ * `TAIL_RATIO` extends the ramp BELOW the header's own box. The header is as
+ * tall as its islands plus its padding; the fade needs room after that, or it
+ * finishes at the same place the layout does, which is the line again.
+ *
+ * ── `stopOpacity`, NOT AN `rgba()` STOP ─────────────────────────────────────
+ *
+ * `react-native-svg` parses `stopColor` for its RGB and DISCARDS the alpha
+ * channel, so an `rgba(…, 0.4)` stop renders at FULL strength on native and
+ * correctly on web. That is the exact defect documented on `GLASS_SHEEN` in
+ * `theme/glass-colors.ts`, where it painted an Android pane as an achromatic
+ * white-to-black wipe while every gate stayed green. The colour and the opacity
+ * travel here in separate props for the same reason.
+ *
+ * ── `width="100%"` IS NOT REDUNDANT ─────────────────────────────────────────
+ *
+ * An `<svg>` is a REPLACED element. With `width: auto` its used width is its
+ * INTRINSIC width, and an SVG with no intrinsic size falls back to CSS's
+ * default 300 x 150 — so `position: absolute; left: 0; right: 0` does NOT
+ * stretch it: `right` is over-constrained and dropped. Measured in Chrome
+ * before this prop existed: a 760px-wide header painted a 300 x 150 block of
+ * scrim with a hard vertical edge down the middle of the screen, over content
+ * that was otherwise untouched.
+ *
+ * Native is unaffected — react-native-svg lays its host view out with flexbox
+ * there — which is exactly why the omission survives review: it is correct on
+ * the platform most of this library is tested on. Gate:
+ * `src/__tests__/svg-absolute-fill-size.test.ts`.
+ *
+ * ── THE GRADIENT ID ─────────────────────────────────────────────────────────
+ *
+ * From `useSvgIdPrefix`, which is `useId` with React's punctuation stripped.
+ * Two headers on one page (a split view) must not resolve each other's
+ * `url(#…)`, and a module-scope counter — which is what `GlassSurface` uses,
+ * and which is right for a native-only surface — increments in a different
+ * order on the server than during hydration, so an SSR'd page would reference a
+ * gradient that is not there.
+ */
+/** How far past the header's own height the fade continues, as a ratio of it. */
+export declare const SCRIM_TAIL_RATIO = 0.55;
+/**
+ * Offset down the ramp -> how much of the page colour survives there.
+ *
+ * Read as: solid behind the title, nine tenths gone by three quarters of the
+ * way down, nothing at the bottom.
+ */
+export declare const SCRIM_STOPS: readonly [{
+    readonly offset: 0;
+    readonly opacity: 1;
+}, {
+    readonly offset: 0.42;
+    readonly opacity: 0.86;
+}, {
+    readonly offset: 0.72;
+    readonly opacity: 0.38;
+}, {
+    readonly offset: 1;
+    readonly opacity: 0;
+}];
+export interface EdgeScrimProps {
+    /** The page colour the ramp starts from — opaque, alpha travels separately. */
+    color: string;
+    testID?: string;
+}
+export declare const EdgeScrim: React.NamedExoticComponent<EdgeScrimProps>;
+//# sourceMappingURL=EdgeScrim.d.ts.map

package/lib/typescript/module/page-header/EdgeScrim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeScrim.d.ts","sourceRoot":"","sources":["../../../../src/page-header/EdgeScrim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;EAKd,CAAC;AAEX,MAAM,WAAW,cAAc;IAC7B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuBD,eAAO,MAAM,SAAS,4CAA2B,CAAC"}

package/lib/typescript/module/page-header/PageHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { PageHeaderProps } from './types';
-declare function PageHeaderComponent({ title, subtitle, titleAlign, headingLevel, onBack, backLabel, leading, actions, border, transparent, scrollY: externalScrollY, scrollThreshold, sticky, safeArea, style, testID, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function PageHeaderComponent({ title, subtitle, titleAlign, headingLevel, titleReveal, presentation, placement, onBack, backLabel, leading, actions, border, transparent, scrim, scrimColor, scrollY: externalScrollY, scrollThreshold, sticky, safeArea, style, testID, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare const PageHeader: React.MemoExoticComponent<typeof PageHeaderComponent>;
 export {};
 //# sourceMappingURL=PageHeader.d.ts.map

package/lib/typescript/module/page-header/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/page-header/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAwB9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiC/C,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,UAAoB,EACpB,YAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,OAAO,EACP,OAAO,EACP,MAAe,EACf,WAAmB,EACnB,OAAO,EAAE,eAAe,EACxB,eAAmC,EACnC,MAAa,EACb,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,eAAe,2CAuLjB;AA4DD,eAAO,MAAM,UAAU,uDAA4B,CAAC"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/page-header/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AA6B9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA8E/C,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,UAAoB,EACpB,YAAgB,EAChB,WAAsB,EACtB,YAAyB,EACzB,SAAoB,EACpB,MAAM,EACN,SAAkB,EAClB,OAAO,EACP,OAAO,EACP,MAAe,EACf,WAAmB,EACnB,KAAc,EACd,UAAU,EACV,OAAO,EAAE,eAAe,EACxB,eAAmC,EACnC,MAAa,EACb,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,eAAe,2CAqTjB;AAuED,eAAO,MAAM,UAAU,uDAA4B,CAAC"}

package/lib/typescript/module/page-header/index.d.ts

@@ -1,3 +1,3 @@
 export { PageHeader } from './PageHeader';
-export type { PageHeaderBorder, PageHeaderProps, PageHeaderTitleAlign } from './types';
+export type { PageHeaderBorder, PageHeaderPlacement, PageHeaderPresentation, PageHeaderProps, PageHeaderScrim, PageHeaderTitleAlign, PageHeaderTitleReveal, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/page-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}

package/lib/typescript/module/page-header/types.d.ts

@@ -3,11 +3,64 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 /** Where the title sits: after the back button, or centred on the bar. */
 export type PageHeaderTitleAlign = 'start' | 'center';
+/**
+ * How the header presents itself.
+ *
+ * `floating` is the default: no bar at all. The back button sits in its own
+ * translucent capsule, related actions share one island, the title floats
+ * between them, and the whole thing ends in a soft vertical gradient instead of
+ * a horizontal edge. Content passes UNDER it.
+ *
+ * `bar` is Bloom's original flat header — an opaque full-width strip with a
+ * hairline separator and a scroll-linked shadow. It is still the right shape
+ * for a dense tool screen, a split-pane sidebar header or anywhere the chrome
+ * must not be mistaken for content; it is no longer the default.
+ */
+export type PageHeaderPresentation = 'floating' | 'bar';
+/**
+ * Who reserves the space the header occupies.
+ *
+ * `inline` (default): the header is a sibling ABOVE the content, in a column.
+ * It occupies layout, so nothing passes under it and nothing needs padding.
+ *
+ * `overlay`: the header is absolutely positioned over the content, which starts
+ * at the top of the container and scrolls under the islands. The header then
+ * CLAIMS its measured height on `layout/top-edge`, and the content reads it
+ * with `useTopEdgeInset()` so its first item is not born underneath. This is
+ * the placement the floating presentation was designed for; the two are
+ * separate props because a floating header above a fixed panel is also a real
+ * arrangement.
+ */
+export type PageHeaderPlacement = 'inline' | 'overlay';
 /**
  * The bottom separator: `auto` fades it in once the page has scrolled past
  * `scrollThreshold`, `always` draws it at rest, `none` never draws it.
+ *
+ * `presentation="bar"` only. A floating header has no edge to separate.
  */
 export type PageHeaderBorder = 'auto' | 'always' | 'none';
+/**
+ * The floating header's edge effect: a vertical gradient from the page colour
+ * to full transparency, behind the title and the islands.
+ *
+ * `auto` (default) fades it in over `[0, scrollThreshold]` of the scroll
+ * offset, so it appears exactly when content starts passing under it. `always`
+ * paints it at rest — for a header that is born over a photograph. `none`
+ * removes it, which leaves the islands to carry legibility on their own.
+ */
+export type PageHeaderScrim = 'auto' | 'always' | 'none';
+/**
+ * When the title is visible.
+ *
+ * `always` (default) is the ordinary screen header. `onScroll` holds the title
+ * back and fades it in with the scrim — the shape a header over a hero photo
+ * wants, where the photo already names the screen.
+ *
+ * It is a prop of its own rather than a side effect of the background, because
+ * the two are different questions and conflating them is how every header that
+ * turned transparent also lost its title.
+ */
+export type PageHeaderTitleReveal = 'always' | 'onScroll';
 export interface PageHeaderProps {
     /** A string renders as the heading; a node renders as-is (and owns its own semantics). */
     title?: ReactNode;
@@ -17,6 +70,12 @@ export interface PageHeaderProps {
     titleAlign?: PageHeaderTitleAlign;
     /** The title's heading level. Default 1. */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Default `always`. */
+    titleReveal?: PageHeaderTitleReveal;
+    /** Default `floating`. */
+    presentation?: PageHeaderPresentation;
+    /** Default `inline`. */
+    placement?: PageHeaderPlacement;
     /**
      * Renders the back button and is called when it is pressed. The header is
      * router-agnostic: pass `router.back`, or your app's safe-back helper.
@@ -26,24 +85,52 @@ export interface PageHeaderProps {
     backLabel?: string;
     /** Rendered after the back button, before the title (an avatar, a logo). */
     leading?: ReactNode;
-    /** Rendered at the end of the bar, 10 apart — typically Bloom `Button`s. */
+    /**
+     * Rendered at the end of the bar. In the floating presentation this slot is
+     * wrapped in a `ControlSurface` with `material: 'glass'`, so a `ButtonGroup`
+     * inside it becomes one island with no prop written on it. Declare the
+     * grouping yourself — the header never infers it by reading children.
+     */
     actions?: ReactNode;
-    /** Default `auto`. */
+    /** `presentation="bar"` only. Default `auto`. */
     border?: PageHeaderBorder;
     /**
-     * The bar's background, shadow and title fade in with scroll instead of
-     * showing at rest — for a header over media. The back button and actions
-     * stay visible (their own fill reads over any image).
+     * `presentation="bar"` only: the bar's background and shadow fade in with
+     * scroll instead of showing at rest.
+     *
+     * It no longer hides the title — that is `titleReveal="onScroll"`, and the
+     * two are set independently. A `bar` header that wants the old combined
+     * behaviour asks for both.
      */
     transparent?: boolean;
+    /** `presentation="floating"` only. Default `auto`. */
+    scrim?: PageHeaderScrim;
+    /**
+     * The colour the edge effect fades FROM. Defaults to `theme.colors.background`
+     * — the page colour, which is what the content scrolling under the header is
+     * disappearing into.
+     *
+     * Pass it when the screen paints a background the theme does not know about:
+     * a tinted section, a brand panel, a dark surface inside a light app. The
+     * header cannot read the colour behind it, and a scrim in the theme's
+     * background over a page in some other colour is a wash of the wrong hue
+     * rather than a fade.
+     *
+     * It must be OPAQUE. The alpha is the ramp's, and a colour that brings its
+     * own would multiply with it — `rgba(0,0,0,0.5)` at the ramp's 0.86 paints
+     * 0.43 and reads as a weak, dirty veil rather than the colour you asked for.
+     */
+    scrimColor?: string;
     /**
-     * The scroll offset driving `border="auto"`, `transparent` and the shadow.
-     * Pass it from a Reanimated scroll handler on native or for any scroll
-     * container. Omitted on web, the header follows `window.scrollY`; omitted on
-     * native, the header stays at rest.
+     * The scroll offset driving the scrim, the separator and the shadow.
+     *
+     * Resolution order: this prop, then the nearest `ScrollOffsetProvider`
+     * (`@oxy.so/bloom/layout`) — which is how a header inside a Bloom scroll
+     * composition gets it with no wiring — then, on web only, `window.scrollY`.
+     * On native with none of the three, the header stays at rest.
      */
     scrollY?: SharedValue<number>;
-    /** The offset (px) over which border, background and shadow fade in. Default 20. */
+    /** The offset (px) over which the scrim, separator and shadow fade in. Default 20. */
     scrollThreshold?: number;
     /** Web only: pin the bar to the top of its scroll container. Default true. */
     sticky?: boolean;

package/lib/typescript/module/page-header/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/page-header/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,0EAA0E;AAC1E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEtD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC9B,0FAA0F;IAC1F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,sBAAsB;IACtB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/page-header/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,0EAA0E;AAC1E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,KAAK,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1D;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC9B,0FAA0F;IAC1F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,wBAAwB;IACxB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IAEpC,0BAA0B;IAC1B,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,wBAAwB;IACxB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,iDAAiD;IACjD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,sFAAsF;IACtF,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/module/provider/BloomProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BloomProvider.d.ts","sourceRoot":"","sources":["../../../../src/provider/BloomProvider.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,OAAc,EACd,GAAG,UAAU,EACd,EAAE,kBAAkB,2CAoCpB;yBAzCe,aAAa"}
+{"version":3,"file":"BloomProvider.d.ts","sourceRoot":"","sources":["../../../../src/provider/BloomProvider.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,aAAa,EACb,OAAc,EACd,GAAG,UAAU,EACd,EAAE,kBAAkB,2CA8CpB;yBAnDe,aAAa"}

package/lib/typescript/module/styles/svg-id.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A DOM-safe id prefix, per component instance.
+ *
+ * Two SVGs of one shape on a page must not resolve each other's `url(#…)`, and
+ * React's `useId` carries characters an SVG id cannot (`:r0:`). Stripping them
+ * keeps the id UNIQUE — `useId` is unique per instance before the strip and the
+ * strip is injective over React's own alphabet — while staying a legal XML name.
+ *
+ * It is `useId` rather than a module-scope counter for one reason a counter
+ * cannot give: SSR. A counter increments in a different order on the server than
+ * during hydration, so the markup React sends and the markup it re-renders
+ * reference different gradients and one of them is not there. `useId` is the
+ * hook React added for exactly this and is stable across the two passes.
+ *
+ * Lives in `styles/` rather than beside its first caller because it now has
+ * three (`social-button`'s mark and button, `page-header`'s edge gradient) —
+ * the second real need is the bar for extracting it, and this cleared it.
+ */
+export declare function useSvgIdPrefix(prefix: string): string;
+//# sourceMappingURL=svg-id.d.ts.map

package/lib/typescript/module/styles/svg-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-id.d.ts","sourceRoot":"","sources":["../../../../src/styles/svg-id.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/lib/typescript/module/text-field/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/text-field/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,kBAAkB,EAQxB,MAAM,cAAc,CAAC;AAMtB,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAmBL,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAkCjB;;;;;;;;GAQG;AACH,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,qBAAqB,4DAAyD,CAAC;AAiD5F,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EAAE,aAAqB,EAChC,QAAQ,EAAE,YAAoB,EAC9B,IAAI,EAAE,QAAmB,EACzB,MAA0B,EAC1B,YAAY,EACZ,KAAK,GACN,EAAE,cAAc,2CA6EhB;AAsFD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAwJrB;AAmKD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,KAAK,GACN,EAAE,mBAAmB,2CA6BrB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,KAAK,GACN,EAAE,kBAAkB,2CAkBpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAoB,EAAE,EAAE,kBAAkB,2CA4BrF;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CACxB,aAAa,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CAC7D,CACF,2CAyBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,2CAqCA"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/text-field/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,kBAAkB,EAQxB,MAAM,cAAc,CAAC;AAOtB,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAmBL,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAkCjB;;;;;;;;GAQG;AACH,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,qBAAqB,4DAAyD,CAAC;AAiD5F,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EAAE,aAAqB,EAChC,QAAQ,EAAE,YAAoB,EAC9B,IAAI,EAAE,QAAmB,EACzB,MAA0B,EAC1B,YAAY,EACZ,KAAK,GACN,EAAE,cAAc,2CA6EhB;AAsFD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA8LrB;AAmKD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,OAAe,EACf,KAAK,GACN,EAAE,mBAAmB,2CA6BrB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,KAAK,GACN,EAAE,kBAAkB,2CAkBpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAoB,EAAE,EAAE,kBAAkB,2CA4BrF;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CACxB,aAAa,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CAC7D,CACF,2CAyBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,2CAqCA"}

package/lib/typescript/module/theme/glass-colors.d.ts

@@ -192,4 +192,71 @@ export interface GlassColors {
  * and pins both on every alpha or surface change.
  */
 export declare function resolveGlassColors(fill: string): GlassColors;
+/**
+ * The CHROME alpha — the neutral counterpart of {@link GLASS_FILL_ALPHA}.
+ *
+ * ── WHY A SECOND ALPHA AND NOT THE SAME ONE ─────────────────────────────────
+ *
+ * {@link GLASS_FILL_ALPHA} prices a BRAND fill: a `primary` button whose label
+ * is that fill's own on-colour, sitting on one of Bloom's five neutral
+ * surfaces. A page header's island is neither of those things. It is a NEUTRAL
+ * surface off the existing ladder (`styles/surface-levels`, rung 1 — the same
+ * fill a card and a menu panel paint) and it floats over content Bloom does not
+ * own: a photograph, a video still, a map, a list that scrolls under it. Its
+ * label is the theme's own `text`, not an on-fill token.
+ *
+ * So the two materials are priced against different backdrops, and the number
+ * that is right for one is wrong for the other in a measurable direction:
+ *
+ *   brand fill   backdrop ∈ Bloom's own five surfaces      worst case: light mode,
+ *                                                          a white-ish page LIFTS
+ *                                                          the pane under a white
+ *                                                          label
+ *   chrome fill  backdrop ∈ [black, white] — anything      worst case: DARK mode
+ *                                                          over a WHITE backdrop,
+ *                                                          which lifts a dark pane
+ *                                                          under a white label
+ *
+ * That is why dark carries the HIGHER alpha here and light the lower one, which
+ * is the opposite of the intuition that a dark UI can afford more transparency.
+ * A dark island has the whole luminance range above it to be washed out INTO; a
+ * light island over the same white backdrop barely moves, because it is already
+ * near white.
+ *
+ * ── WHAT THESE TWO VALUES BUY ───────────────────────────────────────────────
+ *
+ * Measured over 64 presets x the two extremes of the backdrop range, with the
+ * theme's own `text` as the label, in `theme/__tests__/glass-colors.test.ts`.
+ * The gate pins the floors EXACTLY, in both directions, so a hundredth in
+ * either direction has to be a decision:
+ *
+ *   light 0.72  worst AA ratio over the range  …pinned by the gate
+ *   dark  0.80  worst AA ratio over the range  …pinned by the gate
+ *
+ * and both remain genuinely translucent: the gate also measures how far the
+ * PAINTED pane moves between a black and a white backdrop, asserts that
+ * movement is non-zero, and asserts it is monotonic in the alpha — so an alpha
+ * quietly raised to 1.0 to buy contrast fails on the translucency side rather
+ * than passing on the legibility side.
+ */
+export declare const GLASS_CHROME_ALPHA: {
+    readonly light: 0.72;
+    readonly dark: 0.8;
+};
+/**
+ * Resolve the pane around a NEUTRAL chrome fill — an island of controls
+ * floating over content.
+ *
+ * Both arguments are resolved colour strings the caller already holds, for the
+ * same reason {@link resolveGlassColors} takes one: the caller is the only one
+ * who knows which rung of the surface ladder its container sits on. In practice
+ * that is `resolveSurfaceLevel(theme, 1)` — `.background` for `fill`, `.border`
+ * for `hairline` — which is the fill a card and a menu panel already paint, so
+ * an island reads as Bloom chrome rather than as a fourth material.
+ *
+ * The LABEL is not returned, exactly as in `resolveGlassColors`: a neutral pane
+ * carries the theme's own `text`, and the rungs under it come from
+ * `surfaceTextOn(theme, fill)` — the caller is already holding both.
+ */
+export declare function resolveChromeGlassColors(fill: string, hairline: string, isDark: boolean): GlassColors;
 //# sourceMappingURL=glass-colors.d.ts.map

package/lib/typescript/module/theme/glass-colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glass-colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/glass-colors.ts"],"names":[],"mappings":"AAyEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;IAItB,0EAA0E;;CAElE,CAAC;AAEX,wFAAwF;AACxF,MAAM,MAAM,cAAc,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAElF,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAE1D;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,6CAA6C,CAAC;AAE9E,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,eAAoC,CAAC;AAEnE;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAA4K,CAAC;AAE9M;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,oBAAoB,QAA6B,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAM5D"}
+{"version":3,"file":"glass-colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/glass-colors.ts"],"names":[],"mappings":"AAyEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;IAItB,0EAA0E;;CAElE,CAAC;AAEX,wFAAwF;AACxF,MAAM,MAAM,cAAc,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAElF,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAE1D;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,6CAA6C,CAAC;AAE9E,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,eAAoC,CAAC;AAEnE;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAA4K,CAAC;AAE9M;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,oBAAoB,QAA6B,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAM5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,kBAAkB;;;CAAsC,CAAC;AAEtE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,OAAO,GACd,WAAW,CAUb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "2.12.4",
+  "version": "3.0.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -272,6 +272,20 @@
         "default": "./lib/commonjs/button-group/index.js"
       }
     },
+    "./control-surface": {
+      "react-native": {
+        "types": "./lib/typescript/module/control-surface/index.d.ts",
+        "default": "./src/control-surface/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/control-surface/index.d.ts",
+        "default": "./lib/module/control-surface/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/control-surface/index.d.ts",
+        "default": "./lib/commonjs/control-surface/index.js"
+      }
+    },
     "./layout": {
       "react-native": {
         "types": "./lib/typescript/module/layout/index.d.ts",

package/src/button/Button.tsx

@@ -135,7 +135,16 @@ const ButtonGradientFill = memo(function ButtonGradientFill({
       pointerEvents="none"
       style={[StyleSheet.absoluteFill, { borderRadius: radius, overflow: 'hidden' }]}
     >
-      <Svg style={StyleSheet.absoluteFill}>
+      {/*
+        `width`/`height` are load-bearing beside `absoluteFill`: an `<svg>` is a
+        REPLACED element, so `width: auto` resolves to its intrinsic size and an
+        SVG without one falls back to CSS's 300 x 150 — `left: 0; right: 0` does
+        not stretch it. A button wider than 300px stopped its gradient dead at
+        300, and every narrower one scaled the vertical ramp over 150px instead
+        of its own 36, so only the top quarter of the gradient was ever visible.
+        Native is unaffected. Gate: `src/__tests__/svg-absolute-fill-size.test.ts`.
+      */}
+      <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>
         <Defs>
           <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
             <Stop offset="0" stopColor={gradient[0]} />