@oxyhq/bloom 0.35.6 → 0.35.8

package/lib/commonjs/content-panel/index.js

@@ -18,11 +18,21 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 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.
@@ -41,8 +51,34 @@ const GUTTER_MASK_SPREAD = exports.GUTTER_MASK_SPREAD = 40;
 const PANEL_TOP_INSET = exports.PANEL_TOP_INSET = 8;
 /** Bottom sticky inset (px) of the framed panel chrome. */
 const PANEL_BOTTOM_INSET = exports.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.
+ */
+
+/**
+ * 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 = {
+  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 = ({
   children,
+  framed,
+  framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -50,7 +86,15 @@ const ContentPanelComponent = ({
 }) => {
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   (0, _nestingContext.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_nestingContext.ContentPanelNestingContext.Provider, {
     value: true,

package/lib/commonjs/content-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_nestingContext","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GUTTER_MASK_SPREAD","exports","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","surfaceClassName","surfaceStyle","contentClassName","contentStyle","useContentPanelNestingGuard","surfaceClass","join","contentClass","filter","Boolean","jsx","ContentPanelNestingContext","Provider","value","View","className","style","ContentPanel","memo","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_nestingContext","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GUTTER_MASK_SPREAD","exports","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","RESPONSIVE_SURFACE","ContentPanelComponent","children","framed","framedFrom","surfaceClassName","surfaceStyle","contentClassName","contentStyle","useContentPanelNestingGuard","surfaceBase","undefined","surfaceClass","join","contentClass","filter","Boolean","jsx","ContentPanelNestingContext","Provider","value","View","className","style","ContentPanel","memo","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/content-panel/index.web.js

@@ -35,16 +35,33 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 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).
  */
 
 /** Width (in px) of the sticky gutter-mask box-shadow ring. */
@@ -53,9 +70,58 @@ const GUTTER_MASK_SPREAD = exports.GUTTER_MASK_SPREAD = 40;
 const PANEL_TOP_INSET = exports.PANEL_TOP_INSET = 8;
 /** Bottom sticky inset (px) of the framed panel chrome. */
 const PANEL_BOTTOM_INSET = exports.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.
+ */
+
+/**
+ * Per-breakpoint literal Tailwind variant tokens for the WEB responsive mode.
+ * Each field is a WHOLE literal class string (never assembled from parts at
+ * runtime) so the consumer's content-scan over `lib/**` picks up every
+ * arbitrary/`min-*`/`max-*`/`web:` token verbatim. Selecting a bundle by
+ * `framedFrom` value is the only runtime decision:
+ * - `surface`       → framing rounding on the surface at/above the breakpoint.
+ * - `content`       → the same rounding + a web-only horizontal clip on the
+ *   inner content wrapper (`web:<bp>:overflow-x-clip`, platform-first-then-
+ *   breakpoint — matching the consumer convention `web:sm:flex` in `@mercaria/ui`).
+ * - `overlayHidden` → `display:none` for the sticky overlays BELOW the breakpoint.
+ *   `min-[500px]:` (≥500) and `max-[500px]:` (<500) are exactly complementary
+ *   (meet at 500, no overlap/gap), mirroring the named `md:`/`max-md:` pair.
+ */
+const RESPONSIVE_WEB = {
+  500: {
+    surface: 'min-[500px]:rounded-radius-28',
+    content: 'min-[500px]:rounded-radius-28 web:min-[500px]:overflow-x-clip',
+    overlayHidden: 'max-[500px]:hidden'
+  },
+  640: {
+    surface: 'sm:rounded-radius-28',
+    content: 'sm:rounded-radius-28 web:sm:overflow-x-clip',
+    overlayHidden: 'max-sm:hidden'
+  },
+  768: {
+    surface: 'md:rounded-radius-28',
+    content: 'md:rounded-radius-28 web:md:overflow-x-clip',
+    overlayHidden: 'max-md:hidden'
+  },
+  1024: {
+    surface: 'lg:rounded-radius-28',
+    content: 'lg:rounded-radius-28 web:lg:overflow-x-clip',
+    overlayHidden: 'max-lg:hidden'
+  }
+};
 const ContentPanelComponent = ({
   children,
   framed,
+  framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -63,28 +129,43 @@ const ContentPanelComponent = ({
   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).
   (0, _nestingContext.useContentPanelNestingGuard)();
   const {
     colors
   } = (0, _useTheme.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;
+  // Responsive mode selects a pre-shipped literal breakpoint bundle by value;
+  // `framed === true`/`false` ignore `framedFrom` (fixed always/never framing).
+  const bp = RESPONSIVE_WEB[framedFrom];
+
+  // Whole literal class strings selected per mode (the Tailwind content-scan
+  // over `lib/**` requires each arbitrary/`min-*`/`max-*`/`web:` token stay
+  // literal — the breakpoint tokens live whole in `RESPONSIVE_WEB` above and are
+  // only spliced in, never assembled from parts).
+  const surfaceBase = responsive ? `flex-1 ${bp.surface}` : framed ? 'flex-1 rounded-radius-28' : 'flex-1';
+  const contentBase = responsive ? `flex-1 ${bp.content}` : 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_nestingContext.ContentPanelNestingContext.Provider, {
     value: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       className: surfaceClass,
       style: surfaceStyle,
-      children: [framed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [showOverlays && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         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 ${bp.overlayHidden} 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)]',
         style: {
           boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}`
         }
-      }, "bleed-mask"), framed && showStickyFrame !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }, "bleed-mask"), showOverlays && showStickyFrame !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         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 ${bp.overlayHidden} 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)]'
       }, "border-frame"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         className: contentClass,
         style: contentStyle,

package/lib/commonjs/content-panel/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_nestingContext","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GUTTER_MASK_SPREAD","exports","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","framed","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","useContentPanelNestingGuard","colors","useTheme","surfaceClass","join","contentClass","filter","Boolean","jsx","ContentPanelNestingContext","Provider","value","jsxs","View","className","style","pointerEvents","boxShadow","background","ContentPanel","memo","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":";;;;;;AAoCA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAG2B,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AA3C3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA;AACO,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,EAAE;AACpC;AACO,MAAME,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,CAAC;AAChC;AACO,MAAMC,kBAAkB,GAAAF,OAAA,CAAAE,kBAAA,GAAG,CAAC;AAyBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ;EACA;EACA,IAAAC,2CAA2B,EAAC,CAAC;EAC7B,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAE7B,MAAMC,YAAY,GAAGV,MAAM,GACvB,CAAC,0BAA0B,EAAEC,gBAAgB,IAAI,SAAS,CAAC,CAACU,IAAI,CAAC,GAAG,CAAC,GACrE,CAAC,QAAQ,EAAEV,gBAAgB,IAAI,SAAS,CAAC,CAACU,IAAI,CAAC,GAAG,CAAC;EACvD,MAAMC,YAAY,GAAGZ,MAAM,GACvB,CAAC,8CAA8C,EAAEG,gBAAgB,CAAC,CAACU,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC,GAC5F,CAAC,QAAQ,EAAER,gBAAgB,CAAC,CAACU,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE1D,oBACE,IAAArC,WAAA,CAAAyC,GAAA,EAAC1C,eAAA,CAAA2C,0BAA0B,CAACC,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAAnB,QAAA,eAC/C,IAAAzB,WAAA,CAAA6C,IAAA,EAAChD,YAAA,CAAAiD,IAAI;MACIC,SAAS,EAAEX,YAAY;MAC9BY,KAAK,EAAEpB,YAAa;MAAAH,QAAA,GAGnBC,MAAM,iBACL,IAAA1B,WAAA,CAAAyC,GAAA,EAAC5C,YAAA,CAAAiD,IAAI;QAEHG,aAAa,EAAC,MAAM;QAElBF,SAAS,EACP,8IAA8I;QAElJC,KAAK,EAAE;UAAEE,SAAS,EAAE,SAAS9B,kBAAkB,MAAMY,SAAS,IAAIE,MAAM,CAACiB,UAAU;QAAG;MAAE,GANpF,YAOL,CACF,EAEAzB,MAAM,IAAIK,eAAe,KAAK,KAAK,iBAClC,IAAA/B,WAAA,CAAAyC,GAAA,EAAC5C,YAAA,CAAAiD,IAAI;QAEHG,aAAa,EAAC,MAAM;QAElBF,SAAS,EACP;MAAyI,GAJzI,cAML,CACF,eAKD,IAAA/C,WAAA,CAAAyC,GAAA,EAAC5C,YAAA,CAAAiD,IAAI;QAEIC,SAAS,EAAET,YAAY;QAC9BU,KAAK,EAAElB,YAAa;QAAAL,QAAA,EAEnBA;MAAQ,GAJL,SAKA,CAAC;IAAA,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAEM,MAAM2B,YAAY,GAAA/B,OAAA,CAAA+B,YAAA,gBAAG,IAAAC,WAAI,EAAC7B,qBAAqB,CAAC;AACvD4B,YAAY,CAACE,WAAW,GAAG,cAAc","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_nestingContext","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GUTTER_MASK_SPREAD","exports","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","RESPONSIVE_WEB","surface","content","overlayHidden","ContentPanelComponent","children","framed","framedFrom","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","useContentPanelNestingGuard","colors","useTheme","responsive","undefined","showOverlays","bp","surfaceBase","contentBase","surfaceClass","join","contentClass","filter","Boolean","jsx","ContentPanelNestingContext","Provider","value","jsxs","View","className","style","pointerEvents","boxShadow","background","ContentPanel","memo","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":";;;;;;AAqDA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAG2B,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AA5D3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA;AACO,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,EAAE;AACpC;AACO,MAAME,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,CAAC;AAChC;AACO,MAAMC,kBAAkB,GAAAF,OAAA,CAAAE,kBAAA,GAAG,CAAC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAyCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAGL,GAAG;EACF,GAAG,EAAE;IACHC,OAAO,EAAE,+BAA+B;IACxCC,OAAO,EAAE,+DAA+D;IACxEC,aAAa,EAAE;EACjB,CAAC;EACD,GAAG,EAAE;IACHF,OAAO,EAAE,sBAAsB;IAC/BC,OAAO,EAAE,6CAA6C;IACtDC,aAAa,EAAE;EACjB,CAAC;EACD,GAAG,EAAE;IACHF,OAAO,EAAE,sBAAsB;IAC/BC,OAAO,EAAE,6CAA6C;IACtDC,aAAa,EAAE;EACjB,CAAC;EACD,IAAI,EAAE;IACJF,OAAO,EAAE,sBAAsB;IAC/BC,OAAO,EAAE,6CAA6C;IACtDC,aAAa,EAAE;EACjB;AACF,CAAC;AAED,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,UAAU,GAAG,GAAG;EAChBC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ;EACA;EACA,IAAAC,2CAA2B,EAAC,CAAC;EAC7B,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAQ,EAAC,CAAC;;EAE7B;EACA;EACA,MAAMC,UAAU,GAAGX,MAAM,KAAKY,SAAS;EACvC,MAAMC,YAAY,GAAGb,MAAM,KAAK,KAAK;EACrC;EACA;EACA,MAAMc,EAAE,GAAGpB,cAAc,CAACO,UAAU,CAAC;;EAErC;EACA;EACA;EACA;EACA,MAAMc,WAAW,GAAGJ,UAAU,GAC1B,UAAUG,EAAE,CAACnB,OAAO,EAAE,GACtBK,MAAM,GACJ,0BAA0B,GAC1B,QAAQ;EACd,MAAMgB,WAAW,GAAGL,UAAU,GAC1B,UAAUG,EAAE,CAAClB,OAAO,EAAE,GACtBI,MAAM,GACJ,8CAA8C,GAC9C,QAAQ;EACd,MAAMiB,YAAY,GAAG,CAACF,WAAW,EAAEb,gBAAgB,IAAI,SAAS,CAAC,CAACgB,IAAI,CAAC,GAAG,CAAC;EAC3E,MAAMC,YAAY,GAAG,CAACH,WAAW,EAAEZ,gBAAgB,CAAC,CAACgB,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE9E,oBACE,IAAAhD,WAAA,CAAAoD,GAAA,EAACrD,eAAA,CAAAsD,0BAA0B,CAACC,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAA1B,QAAA,eAC/C,IAAA7B,WAAA,CAAAwD,IAAA,EAAC3D,YAAA,CAAA4D,IAAI;MACIC,SAAS,EAAEX,YAAY;MAC9BY,KAAK,EAAE1B,YAAa;MAAAJ,QAAA,GAKnBc,YAAY,iBACX,IAAA3C,WAAA,CAAAoD,GAAA,EAACvD,YAAA,CAAA4D,IAAI;QAEHG,aAAa,EAAC,MAAM;QAElBF,SAAS,EAAEjB,UAAU,GACjB,4EAA4EG,EAAE,CAACjB,aAAa,sEAAsE,GAClK,8IAA8I;QAEpJgC,KAAK,EAAE;UAAEE,SAAS,EAAE,SAASzC,kBAAkB,MAAMiB,SAAS,IAAIE,MAAM,CAACuB,UAAU;QAAG;MAAE,GAPpF,YAQL,CACF,EAGAnB,YAAY,IAAIP,eAAe,KAAK,KAAK,iBACxC,IAAApC,WAAA,CAAAoD,GAAA,EAACvD,YAAA,CAAA4D,IAAI;QAEHG,aAAa,EAAC,MAAM;QAElBF,SAAS,EAAEjB,UAAU,GACjB,oGAAoGG,EAAE,CAACjB,aAAa,yCAAyC,GAC7J;MAAyI,GAL3I,cAOL,CACF,eAKD,IAAA3B,WAAA,CAAAoD,GAAA,EAACvD,YAAA,CAAA4D,IAAI;QAEIC,SAAS,EAAET,YAAY;QAC9BU,KAAK,EAAExB,YAAa;QAAAN,QAAA,EAEnBA;MAAQ,GAJL,SAKA,CAAC;IAAA,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAEM,MAAMkC,YAAY,GAAA1C,OAAA,CAAA0C,YAAA,gBAAG,IAAAC,WAAI,EAACpC,qBAAqB,CAAC;AACvDmC,YAAY,CAACE,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/content-panel/index.js

@@ -9,11 +9,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.
@@ -36,8 +46,34 @@ export const GUTTER_MASK_SPREAD = 40;
 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.
+ */
+
+/**
+ * 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 = {
+  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 = ({
   children,
+  framed,
+  framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -45,7 +81,15 @@ const ContentPanelComponent = ({
 }) => {
   // 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 /*#__PURE__*/_jsx(ContentPanelNestingContext.Provider, {
     value: true,

package/lib/module/content-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","View","ContentPanelNestingContext","useContentPanelNestingGuard","jsx","_jsx","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","surfaceClassName","surfaceStyle","contentClassName","contentStyle","surfaceClass","join","contentClass","filter","Boolean","Provider","value","className","style","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,QAAwC,cAAc;AAEnE,SACEC,0BAA0B,EAC1BC,2BAA2B,QACtB,sBAAmB;;AAE1B;AACA;AACA;AACA;AAHA,SAAAC,GAAA,IAAAC,IAAA;AAIA,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC;AACA,OAAO,MAAMC,eAAe,GAAG,CAAC;AAChC;AACA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;AA2BnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ;EACAX,2BAA2B,CAAC,CAAC;EAE7B,MAAMY,YAAY,GAAG,CACnB,QAAQ,EACR,mBAAmB,EACnB,sCAAsC,EACtCJ,gBAAgB,IAAI,SAAS,CAC9B,CAACK,IAAI,CAAC,GAAG,CAAC;EACX,MAAMC,YAAY,GAAG,CAAC,QAAQ,EAAEJ,gBAAgB,CAAC,CAACK,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE3E,oBACEX,IAAA,CAACH,0BAA0B,CAACkB,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAAX,QAAA,eAC/CL,IAAA,CAACJ,IAAI;MACIqB,SAAS,EAAEP,YAAY;MAC9BQ,KAAK,EAAEX,YAAa;MAAAF,QAAA,eAEpBL,IAAA,CAACJ,IAAI;QACIqB,SAAS,EAAEL,YAAY;QAC9BM,KAAK,EAAET,YAAa;QAAAJ,QAAA,EAEnBA;MAAQ,CACL;IAAC,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,MAAMc,YAAY,gBAAGxB,IAAI,CAACS,qBAAqB,CAAC;AACvDe,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}
+{"version":3,"names":["React","memo","View","ContentPanelNestingContext","useContentPanelNestingGuard","jsx","_jsx","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","RESPONSIVE_SURFACE","ContentPanelComponent","children","framed","framedFrom","surfaceClassName","surfaceStyle","contentClassName","contentStyle","surfaceBase","undefined","surfaceClass","join","contentClass","filter","Boolean","Provider","value","className","style","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,QAAwC,cAAc;AAEnE,SACEC,0BAA0B,EAC1BC,2BAA2B,QACtB,sBAAmB;;AAE1B;AACA;AACA;AACA;AAHA,SAAAC,GAAA,IAAAC,IAAA;AAIA,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC;AACA,OAAO,MAAMC,eAAe,GAAG,CAAC;AAChC;AACA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAgE,GAAG;EACvE,GAAG,EAAE,wGAAwG;EAC7G,GAAG,EAAE,oEAAoE;EACzE,GAAG,EAAE,oEAAoE;EACzE,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,UAAU,GAAG,GAAG;EAChBC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ;EACAd,2BAA2B,CAAC,CAAC;;EAE7B;EACA;EACA;EACA;EACA;EACA;EACA,MAAMe,WAAW,GACfN,MAAM,KAAKO,SAAS,GAChB,UAAUV,kBAAkB,CAACI,UAAU,CAAC,EAAE,GAC1CD,MAAM,GACJ,+DAA+D,GAC/D,QAAQ;EAChB,MAAMQ,YAAY,GAAG,CAACF,WAAW,EAAEJ,gBAAgB,IAAI,SAAS,CAAC,CAACO,IAAI,CAAC,GAAG,CAAC;EAC3E,MAAMC,YAAY,GAAG,CAAC,QAAQ,EAAEN,gBAAgB,CAAC,CAACO,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE3E,oBACEhB,IAAA,CAACH,0BAA0B,CAACuB,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAAf,QAAA,eAC/CN,IAAA,CAACJ,IAAI;MACI0B,SAAS,EAAEP,YAAY;MAC9BQ,KAAK,EAAEb,YAAa;MAAAJ,QAAA,eAEpBN,IAAA,CAACJ,IAAI;QACI0B,SAAS,EAAEL,YAAY;QAC9BM,KAAK,EAAEX,YAAa;QAAAN,QAAA,EAEnBA;MAAQ,CACL;IAAC,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,MAAMkB,YAAY,gBAAG7B,IAAI,CAACU,qBAAqB,CAAC;AACvDmB,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/content-panel/index.web.js

@@ -25,16 +25,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, { memo } from 'react';
 import { View } from 'react-native';
@@ -48,9 +65,58 @@ export const GUTTER_MASK_SPREAD = 40;
 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:`/`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.
+ */
+
+/**
+ * Per-breakpoint literal Tailwind variant tokens for the WEB responsive mode.
+ * Each field is a WHOLE literal class string (never assembled from parts at
+ * runtime) so the consumer's content-scan over `lib/**` picks up every
+ * arbitrary/`min-*`/`max-*`/`web:` token verbatim. Selecting a bundle by
+ * `framedFrom` value is the only runtime decision:
+ * - `surface`       → framing rounding on the surface at/above the breakpoint.
+ * - `content`       → the same rounding + a web-only horizontal clip on the
+ *   inner content wrapper (`web:<bp>:overflow-x-clip`, platform-first-then-
+ *   breakpoint — matching the consumer convention `web:sm:flex` in `@mercaria/ui`).
+ * - `overlayHidden` → `display:none` for the sticky overlays BELOW the breakpoint.
+ *   `min-[500px]:` (≥500) and `max-[500px]:` (<500) are exactly complementary
+ *   (meet at 500, no overlap/gap), mirroring the named `md:`/`max-md:` pair.
+ */
+const RESPONSIVE_WEB = {
+  500: {
+    surface: 'min-[500px]:rounded-radius-28',
+    content: 'min-[500px]:rounded-radius-28 web:min-[500px]:overflow-x-clip',
+    overlayHidden: 'max-[500px]:hidden'
+  },
+  640: {
+    surface: 'sm:rounded-radius-28',
+    content: 'sm:rounded-radius-28 web:sm:overflow-x-clip',
+    overlayHidden: 'max-sm:hidden'
+  },
+  768: {
+    surface: 'md:rounded-radius-28',
+    content: 'md:rounded-radius-28 web:md:overflow-x-clip',
+    overlayHidden: 'max-md:hidden'
+  },
+  1024: {
+    surface: 'lg:rounded-radius-28',
+    content: 'lg:rounded-radius-28 web:lg:overflow-x-clip',
+    overlayHidden: 'max-lg:hidden'
+  }
+};
 const ContentPanelComponent = ({
   children,
   framed,
+  framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -58,28 +124,43 @@ const ContentPanelComponent = ({
   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;
+  // Responsive mode selects a pre-shipped literal breakpoint bundle by value;
+  // `framed === true`/`false` ignore `framedFrom` (fixed always/never framing).
+  const bp = RESPONSIVE_WEB[framedFrom];
+
+  // Whole literal class strings selected per mode (the Tailwind content-scan
+  // over `lib/**` requires each arbitrary/`min-*`/`max-*`/`web:` token stay
+  // literal — the breakpoint tokens live whole in `RESPONSIVE_WEB` above and are
+  // only spliced in, never assembled from parts).
+  const surfaceBase = responsive ? `flex-1 ${bp.surface}` : framed ? 'flex-1 rounded-radius-28' : 'flex-1';
+  const contentBase = responsive ? `flex-1 ${bp.content}` : 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 /*#__PURE__*/_jsx(ContentPanelNestingContext.Provider, {
     value: true,
     children: /*#__PURE__*/_jsxs(View, {
       className: surfaceClass,
       style: surfaceStyle,
-      children: [framed && /*#__PURE__*/_jsx(View, {
+      children: [showOverlays && /*#__PURE__*/_jsx(View, {
         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 ${bp.overlayHidden} 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)]',
         style: {
           boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}`
         }
-      }, "bleed-mask"), framed && showStickyFrame !== false && /*#__PURE__*/_jsx(View, {
+      }, "bleed-mask"), showOverlays && showStickyFrame !== false && /*#__PURE__*/_jsx(View, {
         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 ${bp.overlayHidden} 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)]'
       }, "border-frame"), /*#__PURE__*/_jsx(View, {
         className: contentClass,
         style: contentStyle,

package/lib/module/content-panel/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","View","useTheme","ContentPanelNestingContext","useContentPanelNestingGuard","jsx","_jsx","jsxs","_jsxs","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","framed","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","colors","surfaceClass","join","contentClass","filter","Boolean","Provider","value","className","style","pointerEvents","boxShadow","background","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,QAAwC,cAAc;AAEnE,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SACEC,0BAA0B,EAC1BC,2BAA2B,QACtB,sBAAmB;;AAE1B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC;AACA,OAAO,MAAMC,eAAe,GAAG,CAAC;AAChC;AACA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;AAyBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ;EACA;EACAhB,2BAA2B,CAAC,CAAC;EAC7B,MAAM;IAAEiB;EAAO,CAAC,GAAGnB,QAAQ,CAAC,CAAC;EAE7B,MAAMoB,YAAY,GAAGR,MAAM,GACvB,CAAC,0BAA0B,EAAEC,gBAAgB,IAAI,SAAS,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAC,GACrE,CAAC,QAAQ,EAAER,gBAAgB,IAAI,SAAS,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAC;EACvD,MAAMC,YAAY,GAAGV,MAAM,GACvB,CAAC,8CAA8C,EAAEG,gBAAgB,CAAC,CAACQ,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC,GAC5F,CAAC,QAAQ,EAAEN,gBAAgB,CAAC,CAACQ,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE1D,oBACEjB,IAAA,CAACH,0BAA0B,CAACwB,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAAf,QAAA,eAC/CL,KAAA,CAACP,IAAI;MACI4B,SAAS,EAAEP,YAAY;MAC9BQ,KAAK,EAAEd,YAAa;MAAAH,QAAA,GAGnBC,MAAM,iBACLR,IAAA,CAACL,IAAI;QAEH8B,aAAa,EAAC,MAAM;QAElBF,SAAS,EACP,8IAA8I;QAElJC,KAAK,EAAE;UAAEE,SAAS,EAAE,SAASvB,kBAAkB,MAAMW,SAAS,IAAIC,MAAM,CAACY,UAAU;QAAG;MAAE,GANpF,YAOL,CACF,EAEAnB,MAAM,IAAIK,eAAe,KAAK,KAAK,iBAClCb,IAAA,CAACL,IAAI;QAEH8B,aAAa,EAAC,MAAM;QAElBF,SAAS,EACP;MAAyI,GAJzI,cAML,CACF,eAKDvB,IAAA,CAACL,IAAI;QAEI4B,SAAS,EAAEL,YAAY;QAC9BM,KAAK,EAAEZ,YAAa;QAAAL,QAAA,EAEnBA;MAAQ,GAJL,SAKA,CAAC;IAAA,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,MAAMqB,YAAY,gBAAGlC,IAAI,CAACY,qBAAqB,CAAC;AACvDsB,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}
+{"version":3,"names":["React","memo","View","useTheme","ContentPanelNestingContext","useContentPanelNestingGuard","jsx","_jsx","jsxs","_jsxs","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","RESPONSIVE_WEB","surface","content","overlayHidden","ContentPanelComponent","children","framed","framedFrom","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","colors","responsive","undefined","showOverlays","bp","surfaceBase","contentBase","surfaceClass","join","contentClass","filter","Boolean","Provider","value","className","style","pointerEvents","boxShadow","background","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/commonjs/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/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}