npm - @oxyhq/bloom - Versions diffs - 0.35.7 → 0.35.8 - Mend

@oxyhq/bloom 0.35.7 → 0.35.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/lib/commonjs/content-panel/index.js +37 -9
package/lib/commonjs/content-panel/index.js.map +1 -1
package/lib/commonjs/content-panel/index.web.js +71 -15
package/lib/commonjs/content-panel/index.web.js.map +1 -1
package/lib/module/content-panel/index.js +37 -9
package/lib/module/content-panel/index.js.map +1 -1
package/lib/module/content-panel/index.web.js +71 -15
package/lib/module/content-panel/index.web.js.map +1 -1
package/lib/typescript/commonjs/content-panel/index.d.ts +24 -6
package/lib/typescript/commonjs/content-panel/index.d.ts.map +1 -1
package/lib/typescript/commonjs/content-panel/index.web.d.ts +33 -10
package/lib/typescript/commonjs/content-panel/index.web.d.ts.map +1 -1
package/lib/typescript/module/content-panel/index.d.ts +24 -6
package/lib/typescript/module/content-panel/index.d.ts.map +1 -1
package/lib/typescript/module/content-panel/index.web.d.ts +33 -10
package/lib/typescript/module/content-panel/index.web.d.ts.map +1 -1
package/package.json +1 -1
package/src/__tests__/ContentPanelNesting.test.tsx +74 -0
package/src/content-panel/index.tsx +47 -11
package/src/content-panel/index.web.tsx +85 -17

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

@@ -22,11 +22,12 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 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):
+ * (the breakpoint's `min-*:` variant 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`).
+ *  - `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.
  *
@@ -50,9 +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,
@@ -61,11 +87,13 @@ const ContentPanelComponent = ({
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   (0, _nestingContext.useContentPanelNestingGuard)();
-  // 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';
+  // 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, {

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

	@@ -1 +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","framed","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":";;;;;;~~AA+BA~~,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAF,OAAA;AAG2B,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,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;~~AArC3B~~;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;;AASA;AACA;AACA;AACA;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;~~AA+BnC~~,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ;EACA,IAAAC,2CAA2B,EAAC,CAAC;;EAE7B;EACA;EACA;EACA;EACA,MAAMC,WAAW,~~GACfN~~,MAAM,~~KAAKO~~,SAAS,GAChB,~~2EAA2E~~,~~GAC3EP~~,MAAM,GACJ,+DAA+D,GAC/D,QAAQ;EAChB,~~MAAMQ~~,YAAY,GAAG,CAACF,WAAW,EAAEL,gBAAgB,IAAI,SAAS,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAC;EAC3E,MAAMC,YAAY,GAAG,CAAC,QAAQ,EAAEP,gBAAgB,CAAC,CAACQ,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE3E,oBACE,~~IAAAnC~~,WAAA,~~CAAAuC~~,GAAA,~~EAACxC~~,eAAA,~~CAAAyC~~,0BAA0B,CAACC,QAAQ;IAACC,KAAK,EAAE,IAAK;~~IAAAjB~~,QAAA,eAC/C,~~IAAAzB~~,WAAA,~~CAAAuC~~,GAAA,~~EAACzC~~,YAAA,~~CAAA6C~~,IAAI;MACIC,SAAS,EAAEV,YAAY;MAC9BW,KAAK,EAAEjB,YAAa;~~MAAAH~~,QAAA,eAEpB,~~IAAAzB~~,WAAA,~~CAAAuC~~,GAAA,~~EAACzC~~,YAAA,~~CAAA6C~~,IAAI;QACIC,SAAS,EAAER,YAAY;QAC9BS,KAAK,EAAEf,YAAa;~~QAAAL~~,QAAA,EAEnBA;MAAQ,CACL;IAAC,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAEM,~~MAAMqB~~,YAAY,~~GAAAzB~~,OAAA,~~CAAAyB~~,YAAA,gBAAG,IAAAC,WAAI,~~EAACvB~~,qBAAqB,CAAC;~~AACvDsB~~,YAAY,CAACE,WAAW,GAAG,cAAc","ignoreList":[]}
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","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 CHANGED Viewed

@@ -38,18 +38,22 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 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.
+ *    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-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).
+ * 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`.
@@ -66,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,
@@ -87,13 +140,16 @@ const ContentPanelComponent = ({
   // `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/`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';
+  // 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, {
@@ -103,13 +159,13 @@ const ContentPanelComponent = ({
       style: surfaceStyle,
       children: [showOverlays && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         pointerEvents: "none",
-        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)]',
+        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"), showOverlays && showStickyFrame !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         pointerEvents: "none",
-        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)]'
+        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 CHANGED Viewed

	@@ -1 +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","responsive","undefined","showOverlays","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":";;;;;;~~AAiDA~~,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;~~AAxD3B~~;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;~~AAgCnC~~,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;EACA;EACA,MAAMC,UAAU,~~GAAGV~~,MAAM,~~KAAKW~~,SAAS;EACvC,MAAMC,YAAY,~~GAAGZ~~,MAAM,KAAK,KAAK;;EAErC;EACA;EACA;EACA;EACA,~~MAAMa~~,WAAW,~~GAAGH~~,UAAU,GAC1B,~~6BAA6B~~,~~GAC7BV~~,MAAM,GACJ,0BAA0B,GAC1B,QAAQ;EACd,~~MAAMc~~,WAAW,~~GAAGJ~~,UAAU,GAC1B,~~oDAAoD~~,~~GACpDV~~,MAAM,GACJ,8CAA8C,GAC9C,QAAQ;EACd,~~MAAMe~~,YAAY,GAAG,CAACF,WAAW,~~EAAEZ~~,gBAAgB,IAAI,SAAS,CAAC,~~CAACe~~,IAAI,CAAC,GAAG,CAAC;EAC3E,MAAMC,YAAY,GAAG,CAACH,WAAW,~~EAAEX~~,gBAAgB,CAAC,~~CAACe~~,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE9E,oBACE,~~IAAA1C~~,WAAA,~~CAAA8C~~,GAAA,~~EAAC/C~~,eAAA,~~CAAAgD~~,0BAA0B,CAACC,QAAQ;IAACC,KAAK,EAAE,IAAK;~~IAAAxB~~,QAAA,eAC/C,~~IAAAzB~~,WAAA,~~CAAAkD~~,IAAA,~~EAACrD~~,YAAA,~~CAAAsD~~,IAAI;MACIC,SAAS,EAAEX,YAAY;MAC9BY,KAAK,~~EAAEzB~~,YAAa;~~MAAAH~~,QAAA,~~GAKnBa~~,YAAY,iBACX,~~IAAAtC~~,WAAA,~~CAAA8C~~,GAAA,~~EAACjD~~,YAAA,~~CAAAsD~~,IAAI;QAEHG,aAAa,EAAC,MAAM;QAElBF,SAAS,~~EAAEhB~~,UAAU,GACjB,~~4JAA4J~~,~~GAC5J~~,8IAA8I;~~QAEpJiB~~,KAAK,EAAE;UAAEE,SAAS,EAAE,~~SAASnC~~,kBAAkB,~~MAAMY~~,SAAS,IAAIE,MAAM,~~CAACsB~~,UAAU;QAAG;MAAE,GAPpF,YAQL,CACF,~~EAGAlB~~,YAAY,IAAIP,eAAe,KAAK,KAAK,iBACxC,~~IAAA/B~~,WAAA,~~CAAA8C~~,GAAA,~~EAACjD~~,YAAA,~~CAAAsD~~,IAAI;QAEHG,aAAa,EAAC,MAAM;QAElBF,SAAS,~~EAAEhB~~,UAAU,GACjB,~~uJAAuJ~~,~~GACvJ~~;MAAyI,GAL3I,cAOL,CACF,eAKD,~~IAAApC~~,WAAA,~~CAAA8C~~,GAAA,~~EAACjD~~,YAAA,~~CAAAsD~~,IAAI;QAEIC,SAAS,EAAET,YAAY;QAC9BU,KAAK,~~EAAEvB~~,YAAa;~~QAAAL~~,QAAA,EAEnBA;MAAQ,GAJL,SAKA,CAAC;IAAA,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAEM,~~MAAMgC~~,YAAY,~~GAAApC~~,OAAA,~~CAAAoC~~,YAAA,gBAAG,IAAAC,WAAI,~~EAAClC~~,qBAAqB,CAAC;~~AACvDiC~~,YAAY,CAACE,WAAW,GAAG,cAAc","ignoreList":[]}
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","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":"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","ignoreList":[]}

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

@@ -13,11 +13,12 @@
  * 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):
+ * (the breakpoint's `min-*:` variant 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`).
+ *  - `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.
  *
@@ -45,9 +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,
@@ -56,11 +82,13 @@ const ContentPanelComponent = ({
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   useContentPanelNestingGuard();
-  // 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';
+  // 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, {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["React","memo","View","ContentPanelNestingContext","useContentPanelNestingGuard","jsx","_jsx","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","framed","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,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;~~AA+BnC~~,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ;~~EACAZ~~,2BAA2B,CAAC,CAAC;;EAE7B;EACA;EACA;EACA;EACA,~~MAAMa~~,WAAW,~~GACfL~~,MAAM,~~KAAKM~~,SAAS,GAChB,~~2EAA2E~~,~~GAC3EN~~,MAAM,GACJ,+DAA+D,GAC/D,QAAQ;EAChB,~~MAAMO~~,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,~~oBACEd~~,IAAA,CAACH,0BAA0B,~~CAACqB~~,QAAQ;IAACC,KAAK,EAAE,IAAK;~~IAAAd~~,QAAA,eAC/CL,IAAA,CAACJ,IAAI;~~MACIwB~~,SAAS,EAAEP,YAAY;MAC9BQ,KAAK,EAAEb,YAAa;~~MAAAH~~,QAAA,~~eAEpBL~~,IAAA,CAACJ,IAAI;~~QACIwB~~,SAAS,EAAEL,YAAY;QAC9BM,KAAK,EAAEX,YAAa;~~QAAAL~~,QAAA,EAEnBA;MAAQ,CACL;IAAC,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,~~MAAMiB~~,YAAY,~~gBAAG3B~~,IAAI,~~CAACS~~,qBAAqB,CAAC;~~AACvDkB~~,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}
1	+ {"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 CHANGED Viewed

@@ -28,18 +28,22 @@
  * 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.
+ *    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-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).
+ * 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`.
@@ -61,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,
@@ -82,13 +135,16 @@ const ContentPanelComponent = ({
   // `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/`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';
+  // 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, {
@@ -98,13 +154,13 @@ const ContentPanelComponent = ({
       style: surfaceStyle,
       children: [showOverlays && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
-        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)]',
+        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"), showOverlays && showStickyFrame !== false && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
-        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)]'
+        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 CHANGED Viewed

	@@ -1 +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","responsive","undefined","showOverlays","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":";;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;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;~~AAgCnC~~,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;EACA;EACA,~~MAAMoB~~,UAAU,~~GAAGR~~,MAAM,~~KAAKS~~,SAAS;EACvC,MAAMC,YAAY,~~GAAGV~~,MAAM,KAAK,KAAK;;EAErC;EACA;EACA;EACA;EACA,~~MAAMW~~,WAAW,~~GAAGH~~,UAAU,GAC1B,~~6BAA6B~~,~~GAC7BR~~,MAAM,GACJ,0BAA0B,GAC1B,QAAQ;EACd,~~MAAMY~~,WAAW,~~GAAGJ~~,UAAU,GAC1B,~~oDAAoD~~,~~GACpDR~~,MAAM,GACJ,8CAA8C,GAC9C,QAAQ;EACd,~~MAAMa~~,YAAY,GAAG,CAACF,WAAW,~~EAAEV~~,gBAAgB,IAAI,SAAS,CAAC,~~CAACa~~,IAAI,CAAC,GAAG,CAAC;EAC3E,MAAMC,YAAY,GAAG,CAACH,WAAW,~~EAAET~~,gBAAgB,CAAC,~~CAACa~~,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE9E,~~oBACEtB~~,IAAA,CAACH,0BAA0B,~~CAAC6B~~,QAAQ;IAACC,KAAK,EAAE,IAAK;~~IAAApB~~,QAAA,eAC/CL,KAAA,CAACP,IAAI;~~MACIiC~~,SAAS,EAAEP,YAAY;MAC9BQ,KAAK,~~EAAEnB~~,YAAa;~~MAAAH~~,QAAA,~~GAKnBW~~,YAAY,~~iBACXlB~~,IAAA,CAACL,IAAI;~~QAEHmC~~,aAAa,EAAC,MAAM;QAElBF,SAAS,~~EAAEZ~~,UAAU,GACjB,~~4JAA4J~~,~~GAC5J~~,8IAA8I;~~QAEpJa~~,KAAK,EAAE;UAAEE,SAAS,EAAE,~~SAAS5B~~,kBAAkB,~~MAAMW~~,SAAS,IAAIC,MAAM,~~CAACiB~~,UAAU;QAAG;MAAE,GAPpF,YAQL,CACF,~~EAGAd~~,YAAY,IAAIL,eAAe,KAAK,KAAK,~~iBACxCb~~,IAAA,CAACL,IAAI;~~QAEHmC~~,aAAa,EAAC,MAAM;QAElBF,SAAS,~~EAAEZ~~,UAAU,GACjB,~~uJAAuJ~~,~~GACvJ~~;MAAyI,GAL3I,cAOL,CACF,~~eAKDhB~~,IAAA,CAACL,IAAI;~~QAEIiC~~,SAAS,EAAEL,YAAY;QAC9BM,KAAK,~~EAAEjB~~,YAAa;~~QAAAL~~,QAAA,EAEnBA;MAAQ,GAJL,SAKA,CAAC;IAAA,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,~~MAAM0B~~,YAAY,~~gBAAGvC~~,IAAI,~~CAACY~~,qBAAqB,CAAC;~~AACvD2B~~,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}
1	+ {"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 CHANGED Viewed

@@ -11,11 +11,12 @@
  * 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):
+ * (the breakpoint's `min-*:` variant 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`).
+ *  - `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.
  *
@@ -40,17 +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;
     /**
      * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
      * breakpoint hook needed:
-     * - `undefined` (DEFAULT) → responsive: full-bleed below `md`, rounded +
-     *   bordered at `md`+.
+     * - `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.
+     */
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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/commonjs/content-panel/index.web.d.ts CHANGED Viewed

@@ -26,18 +26,22 @@
  * 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.
+ *    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-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).
+ * 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`.
@@ -55,17 +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;
     /**
      * 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).
+     * - `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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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 CHANGED Viewed

@@ -11,11 +11,12 @@
  * 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):
+ * (the breakpoint's `min-*:` variant 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`).
+ *  - `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.
  *
@@ -40,17 +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;
     /**
      * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
      * breakpoint hook needed:
-     * - `undefined` (DEFAULT) → responsive: full-bleed below `md`, rounded +
-     *   bordered at `md`+.
+     * - `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.
+     */
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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 CHANGED Viewed

@@ -26,18 +26,22 @@
  * 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.
+ *    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-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).
+ * 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`.
@@ -55,17 +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;
     /**
      * 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).
+     * - `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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.35.7",
+  "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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -11,11 +11,12 @@
  * 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):
+ * (the breakpoint's `min-*:` variant 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`).
+ *  - `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.
  *
@@ -47,17 +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;
   /**
    * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
    * breakpoint hook needed:
-   * - `undefined` (DEFAULT) → responsive: full-bleed below `md`, rounded +
-   *   bordered at `md`+.
+   * - `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.
+   */
+  framedFrom?: ContentPanelFramedBreakpoint;
   /** Override the surface background utility (defaults to `bg-card`). */
   surfaceClassName?: string;
   surfaceStyle?: StyleProp<ViewStyle>;
@@ -76,9 +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,
@@ -87,13 +121,15 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   useContentPanelNestingGuard();
-  // 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).
+  // 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 md:overflow-hidden md:rounded-radius-28 md:border md:border-border'
+      ? `flex-1 ${RESPONSIVE_SURFACE[framedFrom]}`
       : framed
         ? 'flex-1 overflow-hidden rounded-radius-28 border border-border'
         : 'flex-1';

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

@@ -26,18 +26,22 @@
  * 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.
+ *    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-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).
+ * 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`.
@@ -63,17 +67,37 @@ 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.
+ */
+export type ContentPanelFramedBreakpoint = 500 | 640 | 768 | 1024;
 export interface ContentPanelProps {
   children: React.ReactNode;
   /**
    * 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).
+   * - `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>;
@@ -93,9 +117,50 @@ export interface ContentPanelProps {
   maskColor?: string;
 }
+/**
+ * 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: Record<
+  ContentPanelFramedBreakpoint,
+  { surface: string; content: string; overlayHidden: string }
+> = {
+  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: React.FC<ContentPanelProps> = ({
   children,
   framed,
+  framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
   contentClassName,
@@ -112,18 +177,21 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // `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/`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`).
+  // 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 md:rounded-radius-28'
+    ? `flex-1 ${bp.surface}`
     : framed
       ? 'flex-1 rounded-radius-28'
       : 'flex-1';
   const contentBase = responsive
-    ? 'flex-1 md:rounded-radius-28 web:md:overflow-x-clip'
+    ? `flex-1 ${bp.content}`
     : framed
       ? 'flex-1 rounded-radius-28 web:overflow-x-clip'
       : 'flex-1';
@@ -145,7 +213,7 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             pointerEvents="none"
             {...({
               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 ${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)]',
             } as Record<string, string>)}
             style={{ boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}` }}
@@ -159,7 +227,7 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             pointerEvents="none"
             {...({
               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 ${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)]',
             } as Record<string, string>)}
           />