@oxyhq/bloom 0.35.5 → 0.35.7

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

@@ -7,11 +7,20 @@
  * 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
+ * (`md:` evaluates against the window width on native too — no JS breakpoint
+ * hook needed):
+ *
+ *  - `undefined` (DEFAULT) → responsive: full-bleed below `md`, rounded +
+ *    bordered at `md`+ (`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.
@@ -34,10 +43,14 @@ export declare const PANEL_BOTTOM_INSET = 8;
 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 `md`, rounded +
+     *   bordered at `md`+.
+     * - `false` → never framed (plain full-bleed at every size).
+     * - `true` → always rounded + bordered.
      */
-    framed: boolean;
+    framed?: boolean;
     /** Override the surface background utility (defaults to `bg-card`). */
     surfaceClassName?: string;
     surfaceStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;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;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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;AA2CD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

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

@@ -23,16 +23,29 @@
  * 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 `md`, framed at `md`+. The rounding is `md:`-gated and both overlays
+ *    are always rendered but carry `max-md:hidden` (`display:none` below `md`),
+ *    so the breakpoint is decided 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-md:hidden` literal) 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';
@@ -44,8 +57,15 @@ export declare const PANEL_TOP_INSET = 8;
 export declare const PANEL_BOTTOM_INSET = 8;
 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 `md`, framed at
+     *   `md`+ (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;
     /** 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;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;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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;AAyFD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

package/lib/typescript/commonjs/fonts/font-assets.d.ts

@@ -1,7 +1,3 @@
-export declare const FONT_ASSETS: {
-    readonly BlomusModernus: any;
-    readonly 'BlomusModernus-Bold': any;
-    readonly Inter: any;
-    readonly 'Geist Mono': any;
-};
+import type { FontAssetMap } from './tokens';
+export declare const FONT_ASSETS: FontAssetMap;
 //# sourceMappingURL=font-assets.d.ts.map

package/lib/typescript/commonjs/fonts/font-assets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-assets.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,WAAW;;;;;CAKd,CAAC"}
+{"version":3,"file":"font-assets.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAAiB,CAAC"}

package/lib/typescript/commonjs/fonts/font-assets.native.d.ts

@@ -0,0 +1,3 @@
+import type { FontAssetMap } from './tokens';
+export declare const FONT_ASSETS: FontAssetMap;
+//# sourceMappingURL=font-assets.native.d.ts.map

package/lib/typescript/commonjs/fonts/font-assets.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-assets.native.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.native.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAKzB,CAAC"}

package/lib/typescript/commonjs/fonts/font-assets.web.d.ts

@@ -0,0 +1,3 @@
+import type { FontAssetMap } from './tokens';
+export declare const FONT_ASSETS: FontAssetMap;
+//# sourceMappingURL=font-assets.web.d.ts.map

package/lib/typescript/commonjs/fonts/font-assets.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-assets.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.web.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAAiB,CAAC"}

package/lib/typescript/commonjs/fonts/index.web.d.ts

@@ -1,7 +1,7 @@
 export { fontFamilies, fontCssVars } from './tokens';
 export type { FontFamilyName } from './tokens';
 export { applyFontFaces } from './apply-font-faces.web';
-export { FONT_ASSETS } from './font-assets';
+export { FONT_ASSETS } from './font-assets.web';
 export { FontLoader } from './FontLoader';
 export type { FontLoaderProps } from './FontLoader';
 //# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/commonjs/fonts/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/index.web.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/index.web.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/typescript/commonjs/fonts/tokens.d.ts

@@ -18,4 +18,16 @@ export declare const fontCssVars: {
     readonly mono: "--bloom-font-mono";
 };
 export type FontFamilyName = keyof typeof fontFamilies;
+/**
+ * Shape of the font asset map handed to `expo-font`'s `useFonts()`.
+ *
+ * Values are Metro asset-registry ids produced by `require('./assets/*.ttf')`,
+ * so the map is only ever populated under Metro (`font-assets.native.ts`).
+ * Every other platform resolves an empty map — web installs the same families
+ * as `@font-face` rules instead (`apply-font-faces.web.ts`).
+ *
+ * Declared here, in the platform-neutral tokens module, so all three
+ * `font-assets` variants can share it without importing each other.
+ */
+export type FontAssetMap = Record<string, number>;
 //# sourceMappingURL=tokens.d.ts.map

package/lib/typescript/commonjs/fonts/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/fonts/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/fonts/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC;AAEvD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC"}

package/lib/typescript/commonjs/theme/init-css-interop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init-css-interop.d.ts","sourceRoot":"","sources":["../../../../src/theme/init-css-interop.ts"],"names":[],"mappings":"AA2GA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C"}
+{"version":3,"file":"init-css-interop.d.ts","sourceRoot":"","sources":["../../../../src/theme/init-css-interop.ts"],"names":[],"mappings":"AAuHA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C"}

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

@@ -7,11 +7,20 @@
  * 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
+ * (`md:` evaluates against the window width on native too — no JS breakpoint
+ * hook needed):
+ *
+ *  - `undefined` (DEFAULT) → responsive: full-bleed below `md`, rounded +
+ *    bordered at `md`+ (`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.
@@ -34,10 +43,14 @@ export declare const PANEL_BOTTOM_INSET = 8;
 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 `md`, rounded +
+     *   bordered at `md`+.
+     * - `false` → never framed (plain full-bleed at every size).
+     * - `true` → always rounded + bordered.
      */
-    framed: boolean;
+    framed?: boolean;
     /** 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;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;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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;AA2CD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

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

@@ -23,16 +23,29 @@
  * 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 `md`, framed at `md`+. The rounding is `md:`-gated and both overlays
+ *    are always rendered but carry `max-md:hidden` (`display:none` below `md`),
+ *    so the breakpoint is decided 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-md:hidden` literal) 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';
@@ -44,8 +57,15 @@ export declare const PANEL_TOP_INSET = 8;
 export declare const PANEL_BOTTOM_INSET = 8;
 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 `md`, framed at
+     *   `md`+ (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;
     /** 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;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;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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;AAyFD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

package/lib/typescript/module/fonts/font-assets.d.ts

@@ -1,7 +1,3 @@
-export declare const FONT_ASSETS: {
-    readonly BlomusModernus: any;
-    readonly 'BlomusModernus-Bold': any;
-    readonly Inter: any;
-    readonly 'Geist Mono': any;
-};
+import type { FontAssetMap } from './tokens';
+export declare const FONT_ASSETS: FontAssetMap;
 //# sourceMappingURL=font-assets.d.ts.map

package/lib/typescript/module/fonts/font-assets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-assets.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,WAAW;;;;;CAKd,CAAC"}
+{"version":3,"file":"font-assets.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAAiB,CAAC"}

package/lib/typescript/module/fonts/font-assets.native.d.ts

@@ -0,0 +1,3 @@
+import type { FontAssetMap } from './tokens';
+export declare const FONT_ASSETS: FontAssetMap;
+//# sourceMappingURL=font-assets.native.d.ts.map

package/lib/typescript/module/fonts/font-assets.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-assets.native.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.native.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAKzB,CAAC"}

package/lib/typescript/module/fonts/font-assets.web.d.ts

@@ -0,0 +1,3 @@
+import type { FontAssetMap } from './tokens';
+export declare const FONT_ASSETS: FontAssetMap;
+//# sourceMappingURL=font-assets.web.d.ts.map

package/lib/typescript/module/fonts/font-assets.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-assets.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/font-assets.web.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAAiB,CAAC"}

package/lib/typescript/module/fonts/index.web.d.ts

@@ -1,7 +1,7 @@
 export { fontFamilies, fontCssVars } from './tokens';
 export type { FontFamilyName } from './tokens';
 export { applyFontFaces } from './apply-font-faces.web';
-export { FONT_ASSETS } from './font-assets';
+export { FONT_ASSETS } from './font-assets.web';
 export { FontLoader } from './FontLoader';
 export type { FontLoaderProps } from './FontLoader';
 //# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/module/fonts/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/index.web.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/fonts/index.web.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/typescript/module/fonts/tokens.d.ts

@@ -18,4 +18,16 @@ export declare const fontCssVars: {
     readonly mono: "--bloom-font-mono";
 };
 export type FontFamilyName = keyof typeof fontFamilies;
+/**
+ * Shape of the font asset map handed to `expo-font`'s `useFonts()`.
+ *
+ * Values are Metro asset-registry ids produced by `require('./assets/*.ttf')`,
+ * so the map is only ever populated under Metro (`font-assets.native.ts`).
+ * Every other platform resolves an empty map — web installs the same families
+ * as `@font-face` rules instead (`apply-font-faces.web.ts`).
+ *
+ * Declared here, in the platform-neutral tokens module, so all three
+ * `font-assets` variants can share it without importing each other.
+ */
+export type FontAssetMap = Record<string, number>;
 //# sourceMappingURL=tokens.d.ts.map

package/lib/typescript/module/fonts/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/fonts/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/fonts/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC;AAEvD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC"}

package/lib/typescript/module/theme/init-css-interop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init-css-interop.d.ts","sourceRoot":"","sources":["../../../../src/theme/init-css-interop.ts"],"names":[],"mappings":"AA2GA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C"}
+{"version":3,"file":"init-css-interop.d.ts","sourceRoot":"","sources":["../../../../src/theme/init-css-interop.ts"],"names":[],"mappings":"AAuHA;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.35.5",
+  "version": "0.35.7",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -1033,7 +1033,7 @@
     "type": "git",
     "url": "https://github.com/OxyHQ/Bloom.git"
   },
-  "license": "MIT",
+  "license": "AGPL-3.0-only",
   "scripts": {
     "generate:exports": "node scripts/generate-platform-exports.mjs",
     "generate:font-data": "node scripts/generate-font-data.mjs",

package/src/content-panel/index.tsx

@@ -7,11 +7,20 @@
  * 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
+ * (`md:` evaluates against the window width on native too — no JS breakpoint
+ * hook needed):
+ *
+ *  - `undefined` (DEFAULT) → responsive: full-bleed below `md`, rounded +
+ *    bordered at `md`+ (`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.
@@ -41,10 +50,14 @@ export const PANEL_BOTTOM_INSET = 8;
 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 `md`, rounded +
+   *   bordered at `md`+.
+   * - `false` → never framed (plain full-bleed at every size).
+   * - `true` → always rounded + bordered.
    */
-  framed: boolean;
+  framed?: boolean;
   /** Override the surface background utility (defaults to `bg-card`). */
   surfaceClassName?: string;
   surfaceStyle?: StyleProp<ViewStyle>;
@@ -65,6 +78,7 @@ export interface ContentPanelProps {
 
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   children,
+  framed,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -73,12 +87,17 @@ 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 (md:-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
+  // `md:` / `rounded-radius-28` token verbatim (no dynamic concatenation).
+  const surfaceBase =
+    framed === undefined
+      ? 'flex-1 md:overflow-hidden md:rounded-radius-28 md:border md:border-border'
+      : 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 (

package/src/content-panel/index.web.tsx

@@ -23,16 +23,29 @@
  * 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 `md`, framed at `md`+. The rounding is `md:`-gated and both overlays
+ *    are always rendered but carry `max-md:hidden` (`display:none` below `md`),
+ *    so the breakpoint is decided 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-md:hidden` literal) 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, { memo } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
@@ -52,8 +65,15 @@ export const PANEL_BOTTOM_INSET = 8;
 
 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 `md`, framed at
+   *   `md`+ (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;
   /** Override the surface background utility (defaults to `bg-card`). */
   surfaceClassName?: string;
   surfaceStyle?: StyleProp<ViewStyle>;
@@ -83,17 +103,32 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   showStickyFrame,
   maskColor,
 }) => {
-  // Dev-only invariant — must run unconditionally before the early `!framed`
-  // return so the hook order stays stable across renders (rules of hooks).
+  // Dev-only invariant — must run unconditionally (before deriving any
+  // mode-specific branch) so the hook order stays stable (rules of hooks).
   useContentPanelNestingGuard();
   const { colors } = useTheme();
 
-  const surfaceClass = framed
-    ? ['flex-1 rounded-radius-28', surfaceClassName ?? 'bg-card'].join(' ')
-    : ['flex-1', surfaceClassName ?? 'bg-card'].join(' ');
-  const contentClass = framed
-    ? ['flex-1 rounded-radius-28 web:overflow-x-clip', contentClassName].filter(Boolean).join(' ')
-    : ['flex-1', contentClassName].filter(Boolean).join(' ');
+  // Tri-state: `undefined` → responsive (md:-gated), `true` → always framed,
+  // `false` → never framed (full-bleed).
+  const responsive = framed === undefined;
+  const showOverlays = framed !== false;
+
+  // Whole literal class strings selected per mode (the Tailwind content-scan
+  // over `lib/**` requires each arbitrary/`md:`/`web:` token stay literal).
+  // `web:md:overflow-x-clip` is platform-first-then-breakpoint, matching the
+  // consumer convention (`web:sm:flex` in `@mercaria/ui`).
+  const surfaceBase = responsive
+    ? 'flex-1 md:rounded-radius-28'
+    : framed
+      ? 'flex-1 rounded-radius-28'
+      : 'flex-1';
+  const contentBase = responsive
+    ? 'flex-1 md:rounded-radius-28 web:md:overflow-x-clip'
+    : framed
+      ? 'flex-1 rounded-radius-28 web:overflow-x-clip'
+      : 'flex-1';
+  const surfaceClass = [surfaceBase, surfaceClassName ?? 'bg-card'].join(' ');
+  const contentClass = [contentBase, contentClassName].filter(Boolean).join(' ');
 
   return (
     <ContentPanelNestingContext.Provider value={true}>
@@ -101,26 +136,31 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
         {...({ className: surfaceClass } as Record<string, string>)}
         style={surfaceStyle}
       >
-        {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. Framed only. */}
-        {framed && (
+        {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. Not
+            rendered when never-framed; `max-md:hidden` (display:none <md) when
+            responsive, so the breakpoint is decided in CSS, not by remounting. */}
+        {showOverlays && (
           <View
             key="bleed-mask"
             pointerEvents="none"
             {...({
-              className:
-                'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
+              className: responsive
+                ? 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 max-md:hidden web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]'
+                : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
             } as Record<string, string>)}
             style={{ boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}` }}
           />
         )}
-        {/* (2) Border-frame overlay — one continuous rounded border, above all. Framed only. */}
-        {framed && showStickyFrame !== false && (
+        {/* (2) Border-frame overlay — one continuous rounded border, above all.
+            Same visibility gating as the bleed-mask. */}
+        {showOverlays && showStickyFrame !== false && (
           <View
             key="border-frame"
             pointerEvents="none"
             {...({
-              className:
-                'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]',
+              className: responsive
+                ? 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border max-md:hidden web:[margin-bottom:calc(-100dvh+16px)]'
+                : 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]',
             } as Record<string, string>)}
           />
         )}