@oxyhq/bloom 0.35.6 → 0.35.8

package/lib/typescript/commonjs/content-panel/index.web.d.ts

@@ -23,16 +23,33 @@
  * content rather than displacing it). They render BEFORE the content wrapper so
  * z-index — not DOM order — decides layering.
  *
- * When `framed` is false (narrow screens) the panel is full-bleed: a single
- * flat surface, no rounding, no overlays.
+ * Framing is tri-state via the `framed` prop:
+ *
+ *  - `undefined` (DEFAULT) → RESPONSIVE, driven purely by NativeWind: full-bleed
+ *    below the `framedFrom` breakpoint, framed at/above it. The breakpoint is
+ *    configurable per consumer (`framedFrom`, default `768` / Tailwind `md`); the
+ *    rounding is gated by that breakpoint's `min-*:` variant and both overlays
+ *    are always rendered but carry the matching `max-*:hidden` literal
+ *    (`display:none` below the breakpoint), so the breakpoint is decided entirely
+ *    in CSS — no consumer JS breakpoint hook.
+ *  - `false` → NEVER framed (full-bleed at every size): a single flat surface,
+ *    no rounding, no overlays.
+ *  - `true` → ALWAYS framed (rounded + overlays at every size).
+ *
+ * The overlays are gated by VISIBILITY (a `max-*:hidden` literal for the chosen
+ * breakpoint) rather than by conditional mounting for the responsive case, so
+ * crossing the breakpoint never remounts them. The content wrapper likewise
+ * keeps a stable `key` so `{children}` reconciles in place across the breakpoint
+ * instead of remounting (which would reset feed scroll / the virtualizer +
+ * refetch).
  *
  * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
  * select this file via the `"browser"` export condition in `package.json`.
  *
  * Styling is NativeWind-className-first; the literal class strings below MUST
  * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
- * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
- * parts).
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28` /
+ * `md:` parts — whole class strings are selected per mode instead).
  */
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
@@ -42,10 +59,36 @@ export declare const GUTTER_MASK_SPREAD = 40;
 export declare const PANEL_TOP_INSET = 8;
 /** Bottom sticky inset (px) of the framed panel chrome. */
 export declare const PANEL_BOTTOM_INSET = 8;
+/**
+ * Viewport width (px) at which a RESPONSIVE `ContentPanel` (`framed` undefined)
+ * switches from full-bleed to framed. Each value maps to a PRE-SHIPPED literal
+ * Tailwind class bundle — `768` (default) uses the named `md:`/`max-md:` screens
+ * (byte-identical to prior behavior), `640` uses `sm:`/`max-sm:`, `1024` uses
+ * `lg:`/`max-lg:`, and `500` uses the arbitrary `min-[500px]:`/`max-[500px]:`
+ * variants (there is no named screen at 500px). The breakpoint tokens are never
+ * built at runtime, so a consumer's Tailwind content-scan over `lib/**` resolves
+ * them verbatim.
+ */
+export type ContentPanelFramedBreakpoint = 500 | 640 | 768 | 1024;
 export interface ContentPanelProps {
     children: React.ReactNode;
-    /** Framed (wide screens) vs full-bleed (narrow screens). */
-    framed: boolean;
+    /**
+     * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
+     * breakpoint hook needed:
+     * - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
+     *   breakpoint, framed at/above it (rounded corners + sticky bleed-mask/border
+     *   overlays).
+     * - `false` → never framed (full-bleed at every size).
+     * - `true` → always framed (rounded + overlays at every size).
+     */
+    framed?: boolean;
+    /**
+     * Viewport width at which the RESPONSIVE panel switches from full-bleed to
+     * framed. Only meaningful when `framed` is `undefined` (responsive) — ignored
+     * when `framed` is `true` (always framed) or `false` (never framed). Defaults
+     * to `768` (Tailwind `md`), reproducing the prior fixed behavior exactly.
+     */
+    framedFrom?: ContentPanelFramedBreakpoint;
     /** Override the surface background utility (defaults to `bg-card`). */
     surfaceClassName?: string;
     surfaceStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/content-panel/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/index.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpE,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqED,eAAO,MAAM,YAAY,+CAA8B,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/index.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpE,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,MAAM,4BAA4B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,4BAA4B,CAAC;IAC1C,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqID,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

package/lib/typescript/module/content-panel/index.d.ts

@@ -7,11 +7,21 @@
  * the rounded corners / lateral gutters is masked while a single seamless border
  * is drawn around the panel — see `index.web.tsx`.
  *
- * On NATIVE none of that applies: there is no document scroll, no sticky
- * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
- * surface wrapping its content. The `framed` and `showStickyFrame` props are
- * accepted for cross-platform API parity but are intentionally no-ops here
- * (mirroring the no-op native fork of `../scroll`).
+ * On NATIVE none of the WEB overlay machinery applies: there is no document
+ * scroll, no sticky positioning, and no bleed to mask, so the panel is simply a
+ * surface wrapping its content. The `framed` prop still drives whether that
+ * surface is rounded + bordered, tri-state and resolved with pure NativeWind
+ * (the breakpoint's `min-*:` variant evaluates against the window width on
+ * native too — no JS breakpoint hook needed):
+ *
+ *  - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
+ *    breakpoint (default `768` / Tailwind `md`), rounded + bordered at/above it
+ *    (e.g. `md:rounded-radius-28 md:border md:border-border`).
+ *  - `false` → never framed (plain full-bleed at every size).
+ *  - `true` → always rounded + bordered.
+ *
+ * `showStickyFrame` and `maskColor` are accepted for cross-platform API parity
+ * but are no-ops here (there are no sticky overlays on native).
  *
  * Web bundlers select `./index.web` via the `"browser"` export condition in
  * `package.json`; native bundlers fall through to this file.
@@ -31,13 +41,34 @@ export declare const GUTTER_MASK_SPREAD = 40;
 export declare const PANEL_TOP_INSET = 8;
 /** Bottom sticky inset (px) of the framed panel chrome. */
 export declare const PANEL_BOTTOM_INSET = 8;
+/**
+ * Viewport width (px) at which a RESPONSIVE `ContentPanel` (`framed` undefined)
+ * switches from full-bleed to framed. Each value maps to a PRE-SHIPPED literal
+ * Tailwind class bundle — `768` (default) uses the named `md:` screen
+ * (byte-identical to prior behavior), `640` uses `sm:`, `1024` uses `lg:`, and
+ * `500` uses the arbitrary `min-[500px]:` variant (there is no named screen at
+ * 500px). The breakpoint tokens are never built at runtime, so a consumer's
+ * Tailwind content-scan over `src/**`/`lib/**` resolves them verbatim.
+ */
+export type ContentPanelFramedBreakpoint = 500 | 640 | 768 | 1024;
 export interface ContentPanelProps {
     children: React.ReactNode;
     /**
-     * Whether the panel is framed (wide screens) or full-bleed (narrow screens).
-     * No-op on native — the surface is always a rounded, bordered View.
+     * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
+     * breakpoint hook needed:
+     * - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
+     *   breakpoint, rounded + bordered at/above it.
+     * - `false` → never framed (plain full-bleed at every size).
+     * - `true` → always rounded + bordered.
+     */
+    framed?: boolean;
+    /**
+     * Viewport width at which the RESPONSIVE panel switches from full-bleed to
+     * framed. Only meaningful when `framed` is `undefined` (responsive) — ignored
+     * when `framed` is `true` (always framed) or `false` (never framed). Defaults
+     * to `768` (Tailwind `md`), reproducing the prior fixed behavior exactly.
      */
-    framed: boolean;
+    framedFrom?: ContentPanelFramedBreakpoint;
     /** Override the surface background utility (defaults to `bg-card`). */
     surfaceClassName?: string;
     surfaceStyle?: StyleProp<ViewStyle>;

package/lib/typescript/module/content-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOpE;;;GAGG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,wDAAwD;AACxD,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqCD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOpE;;;GAGG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,wDAAwD;AACxD,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC;;;;;;;;GAQG;AACH,MAAM,MAAM,4BAA4B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,4BAA4B,CAAC;IAC1C,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4DD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

package/lib/typescript/module/content-panel/index.web.d.ts

@@ -23,16 +23,33 @@
  * content rather than displacing it). They render BEFORE the content wrapper so
  * z-index — not DOM order — decides layering.
  *
- * When `framed` is false (narrow screens) the panel is full-bleed: a single
- * flat surface, no rounding, no overlays.
+ * Framing is tri-state via the `framed` prop:
+ *
+ *  - `undefined` (DEFAULT) → RESPONSIVE, driven purely by NativeWind: full-bleed
+ *    below the `framedFrom` breakpoint, framed at/above it. The breakpoint is
+ *    configurable per consumer (`framedFrom`, default `768` / Tailwind `md`); the
+ *    rounding is gated by that breakpoint's `min-*:` variant and both overlays
+ *    are always rendered but carry the matching `max-*:hidden` literal
+ *    (`display:none` below the breakpoint), so the breakpoint is decided entirely
+ *    in CSS — no consumer JS breakpoint hook.
+ *  - `false` → NEVER framed (full-bleed at every size): a single flat surface,
+ *    no rounding, no overlays.
+ *  - `true` → ALWAYS framed (rounded + overlays at every size).
+ *
+ * The overlays are gated by VISIBILITY (a `max-*:hidden` literal for the chosen
+ * breakpoint) rather than by conditional mounting for the responsive case, so
+ * crossing the breakpoint never remounts them. The content wrapper likewise
+ * keeps a stable `key` so `{children}` reconciles in place across the breakpoint
+ * instead of remounting (which would reset feed scroll / the virtualizer +
+ * refetch).
  *
  * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
  * select this file via the `"browser"` export condition in `package.json`.
  *
  * Styling is NativeWind-className-first; the literal class strings below MUST
  * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
- * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
- * parts).
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28` /
+ * `md:` parts — whole class strings are selected per mode instead).
  */
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
@@ -42,10 +59,36 @@ export declare const GUTTER_MASK_SPREAD = 40;
 export declare const PANEL_TOP_INSET = 8;
 /** Bottom sticky inset (px) of the framed panel chrome. */
 export declare const PANEL_BOTTOM_INSET = 8;
+/**
+ * Viewport width (px) at which a RESPONSIVE `ContentPanel` (`framed` undefined)
+ * switches from full-bleed to framed. Each value maps to a PRE-SHIPPED literal
+ * Tailwind class bundle — `768` (default) uses the named `md:`/`max-md:` screens
+ * (byte-identical to prior behavior), `640` uses `sm:`/`max-sm:`, `1024` uses
+ * `lg:`/`max-lg:`, and `500` uses the arbitrary `min-[500px]:`/`max-[500px]:`
+ * variants (there is no named screen at 500px). The breakpoint tokens are never
+ * built at runtime, so a consumer's Tailwind content-scan over `lib/**` resolves
+ * them verbatim.
+ */
+export type ContentPanelFramedBreakpoint = 500 | 640 | 768 | 1024;
 export interface ContentPanelProps {
     children: React.ReactNode;
-    /** Framed (wide screens) vs full-bleed (narrow screens). */
-    framed: boolean;
+    /**
+     * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
+     * breakpoint hook needed:
+     * - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
+     *   breakpoint, framed at/above it (rounded corners + sticky bleed-mask/border
+     *   overlays).
+     * - `false` → never framed (full-bleed at every size).
+     * - `true` → always framed (rounded + overlays at every size).
+     */
+    framed?: boolean;
+    /**
+     * Viewport width at which the RESPONSIVE panel switches from full-bleed to
+     * framed. Only meaningful when `framed` is `undefined` (responsive) — ignored
+     * when `framed` is `true` (always framed) or `false` (never framed). Defaults
+     * to `768` (Tailwind `md`), reproducing the prior fixed behavior exactly.
+     */
+    framedFrom?: ContentPanelFramedBreakpoint;
     /** Override the surface background utility (defaults to `bg-card`). */
     surfaceClassName?: string;
     surfaceStyle?: StyleProp<ViewStyle>;

package/lib/typescript/module/content-panel/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/index.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpE,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqED,eAAO,MAAM,YAAY,+CAA8B,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/index.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpE,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,6DAA6D;AAC7D,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,MAAM,4BAA4B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,4BAA4B,CAAC;IAC1C,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,qEAAqE;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqID,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.35.6",
+  "version": "0.35.8",
   "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__/ContentPanelNesting.test.tsx

@@ -4,6 +4,14 @@ import { render } from '@testing-library/react-native';
 
 import { ContentPanel } from '../content-panel';
 
+/** Read the outer surface View's `className` from the rendered native tree. */
+function surfaceClassName(node: ReturnType<typeof render>): string {
+  const json = node.toJSON();
+  const el = Array.isArray(json) ? json[0] : json;
+  const className = el?.props?.className;
+  return typeof className === 'string' ? className : '';
+}
+
 // Jest resolves `../content-panel` to the native variant (`index.tsx`), which
 // does not read the theme — so these render without a BloomThemeProvider. The
 // nesting guard lives in the shared `nesting-context` module exercised by both
@@ -50,3 +58,69 @@ describe('ContentPanel nesting guard', () => {
     consoleError.mockRestore();
   });
 });
+
+// The responsive framing breakpoint is configurable via `framedFrom` and is
+// resolved entirely with literal NativeWind classes. These assert the native
+// surface picks up the pre-shipped literal bundle for each breakpoint value.
+describe('ContentPanel framedFrom breakpoint', () => {
+  it('defaults to the md (768) named-screen bundle when omitted', () => {
+    const className = surfaceClassName(
+      render(
+        <ContentPanel>
+          <Text>content</Text>
+        </ContentPanel>,
+      ),
+    );
+    expect(className).toContain('md:rounded-radius-28');
+    expect(className).toContain('md:border');
+    expect(className).not.toContain('min-[500px]:');
+  });
+
+  it('uses the arbitrary min-[500px] bundle for framedFrom={500}', () => {
+    const className = surfaceClassName(
+      render(
+        <ContentPanel framedFrom={500}>
+          <Text>content</Text>
+        </ContentPanel>,
+      ),
+    );
+    expect(className).toContain('min-[500px]:rounded-radius-28');
+    expect(className).toContain('min-[500px]:border');
+    expect(className).not.toContain('md:');
+  });
+
+  it('uses named sm (640) and lg (1024) bundles', () => {
+    expect(
+      surfaceClassName(
+        render(
+          <ContentPanel framedFrom={640}>
+            <Text>content</Text>
+          </ContentPanel>,
+        ),
+      ),
+    ).toContain('sm:rounded-radius-28');
+    expect(
+      surfaceClassName(
+        render(
+          <ContentPanel framedFrom={1024}>
+            <Text>content</Text>
+          </ContentPanel>,
+        ),
+      ),
+    ).toContain('lg:rounded-radius-28');
+  });
+
+  it('ignores framedFrom when framed is explicitly true (always framed)', () => {
+    const className = surfaceClassName(
+      render(
+        <ContentPanel framed framedFrom={500}>
+          <Text>content</Text>
+        </ContentPanel>,
+      ),
+    );
+    // Always-framed uses unconditional (non-breakpoint) rounding + border.
+    expect(className).toContain('rounded-radius-28');
+    expect(className).not.toContain('min-[500px]:');
+    expect(className).not.toContain('md:');
+  });
+});

package/src/content-panel/index.tsx

@@ -7,11 +7,21 @@
  * the rounded corners / lateral gutters is masked while a single seamless border
  * is drawn around the panel — see `index.web.tsx`.
  *
- * On NATIVE none of that applies: there is no document scroll, no sticky
- * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
- * surface wrapping its content. The `framed` and `showStickyFrame` props are
- * accepted for cross-platform API parity but are intentionally no-ops here
- * (mirroring the no-op native fork of `../scroll`).
+ * On NATIVE none of the WEB overlay machinery applies: there is no document
+ * scroll, no sticky positioning, and no bleed to mask, so the panel is simply a
+ * surface wrapping its content. The `framed` prop still drives whether that
+ * surface is rounded + bordered, tri-state and resolved with pure NativeWind
+ * (the breakpoint's `min-*:` variant evaluates against the window width on
+ * native too — no JS breakpoint hook needed):
+ *
+ *  - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
+ *    breakpoint (default `768` / Tailwind `md`), rounded + bordered at/above it
+ *    (e.g. `md:rounded-radius-28 md:border md:border-border`).
+ *  - `false` → never framed (plain full-bleed at every size).
+ *  - `true` → always rounded + bordered.
+ *
+ * `showStickyFrame` and `maskColor` are accepted for cross-platform API parity
+ * but are no-ops here (there are no sticky overlays on native).
  *
  * Web bundlers select `./index.web` via the `"browser"` export condition in
  * `package.json`; native bundlers fall through to this file.
@@ -38,13 +48,35 @@ export const PANEL_TOP_INSET = 8;
 /** Bottom sticky inset (px) of the framed panel chrome. */
 export const PANEL_BOTTOM_INSET = 8;
 
+/**
+ * Viewport width (px) at which a RESPONSIVE `ContentPanel` (`framed` undefined)
+ * switches from full-bleed to framed. Each value maps to a PRE-SHIPPED literal
+ * Tailwind class bundle — `768` (default) uses the named `md:` screen
+ * (byte-identical to prior behavior), `640` uses `sm:`, `1024` uses `lg:`, and
+ * `500` uses the arbitrary `min-[500px]:` variant (there is no named screen at
+ * 500px). The breakpoint tokens are never built at runtime, so a consumer's
+ * Tailwind content-scan over `src/**`/`lib/**` resolves them verbatim.
+ */
+export type ContentPanelFramedBreakpoint = 500 | 640 | 768 | 1024;
+
 export interface ContentPanelProps {
   children: React.ReactNode;
   /**
-   * Whether the panel is framed (wide screens) or full-bleed (narrow screens).
-   * No-op on native — the surface is always a rounded, bordered View.
+   * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
+   * breakpoint hook needed:
+   * - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
+   *   breakpoint, rounded + bordered at/above it.
+   * - `false` → never framed (plain full-bleed at every size).
+   * - `true` → always rounded + bordered.
    */
-  framed: boolean;
+  framed?: boolean;
+  /**
+   * Viewport width at which the RESPONSIVE panel switches from full-bleed to
+   * framed. Only meaningful when `framed` is `undefined` (responsive) — ignored
+   * when `framed` is `true` (always framed) or `false` (never framed). Defaults
+   * to `768` (Tailwind `md`), reproducing the prior fixed behavior exactly.
+   */
+  framedFrom?: ContentPanelFramedBreakpoint;
   /** Override the surface background utility (defaults to `bg-card`). */
   surfaceClassName?: string;
   surfaceStyle?: StyleProp<ViewStyle>;
@@ -63,8 +95,24 @@ export interface ContentPanelProps {
   maskColor?: string;
 }
 
+/**
+ * Per-breakpoint literal Tailwind surface class bundle for the NATIVE responsive
+ * mode. Each value is a WHOLE literal string (never assembled from parts at
+ * runtime) so the Tailwind content-scan over `src/**`/`lib/**` picks up every
+ * `min-*`/`sm:`/`md:`/`lg:` token verbatim. Selecting a bundle by `framedFrom`
+ * value is the only runtime decision.
+ */
+const RESPONSIVE_SURFACE: Record<ContentPanelFramedBreakpoint, string> = {
+  500: 'min-[500px]:overflow-hidden min-[500px]:rounded-radius-28 min-[500px]:border min-[500px]:border-border',
+  640: 'sm:overflow-hidden sm:rounded-radius-28 sm:border sm:border-border',
+  768: 'md:overflow-hidden md:rounded-radius-28 md:border md:border-border',
+  1024: 'lg:overflow-hidden lg:rounded-radius-28 lg:border lg:border-border',
+};
+
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   children,
+  framed,
+  framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -73,12 +121,19 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   useContentPanelNestingGuard();
 
-  const surfaceClass = [
-    'flex-1',
-    'rounded-radius-28',
-    'overflow-hidden border border-border',
-    surfaceClassName ?? 'bg-card',
-  ].join(' ');
+  // Tri-state: `undefined` → responsive (breakpoint-gated), `true` → always
+  // framed, `false` → never framed (plain full-bleed). Whole literal class
+  // strings are selected per mode so the Tailwind content-scan over `src/**`
+  // picks up every `min-*`/`sm:`/`md:`/`lg:` / `rounded-radius-28` token verbatim
+  // (the breakpoint bundle lives whole in `RESPONSIVE_SURFACE`; `framed ===
+  // true`/`false` ignore `framedFrom` for fixed always/never framing).
+  const surfaceBase =
+    framed === undefined
+      ? `flex-1 ${RESPONSIVE_SURFACE[framedFrom]}`
+      : framed
+        ? 'flex-1 overflow-hidden rounded-radius-28 border border-border'
+        : 'flex-1';
+  const surfaceClass = [surfaceBase, surfaceClassName ?? 'bg-card'].join(' ');
   const contentClass = ['flex-1', contentClassName].filter(Boolean).join(' ');
 
   return (