@oxyhq/bloom 0.21.0 → 0.23.0

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PANEL_TOP_INSET = exports.PANEL_BOTTOM_INSET = exports.GUTTER_MASK_SPREAD = exports.ContentPanel = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _nestingContext = require("./nesting-context.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -47,15 +48,20 @@ const ContentPanelComponent = ({
   contentClassName,
   contentStyle
 }) => {
+  // 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(' ');
   const contentClass = ['flex-1', contentClassName].filter(Boolean).join(' ');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    className: surfaceClass,
-    style: surfaceStyle,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_nestingContext.ContentPanelNestingContext.Provider, {
+    value: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: contentClass,
-      style: contentStyle,
-      children: children
+      className: surfaceClass,
+      style: surfaceStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        className: contentClass,
+        style: contentStyle,
+        children: children
+      })
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_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","surfaceClass","join","contentClass","filter","Boolean","jsx","View","className","style","ContentPanel","memo","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.tsx"],"mappings":";;;;;;AAsBA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAoE,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,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;AAvBpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;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;AAsBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ,MAAMC,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,oBACE,IAAA/B,WAAA,CAAAmC,GAAA,EAACpC,YAAA,CAAAqC,IAAI;IACIC,SAAS,EAAEP,YAAY;IAC9BQ,KAAK,EAAEX,YAAa;IAAAF,QAAA,eAEpB,IAAAzB,WAAA,CAAAmC,GAAA,EAACpC,YAAA,CAAAqC,IAAI;MACIC,SAAS,EAAEL,YAAY;MAC9BM,KAAK,EAAET,YAAa;MAAAJ,QAAA,EAEnBA;IAAQ,CACL;EAAC,CACH,CAAC;AAEX,CAAC;AAEM,MAAMc,YAAY,GAAAlB,OAAA,CAAAkB,YAAA,gBAAG,IAAAC,WAAI,EAAChB,qBAAqB,CAAC;AACvDe,YAAY,CAACE,WAAW,GAAG,cAAc","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","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":";;;;;;AAsBA,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;AA5B3B;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;AA2BnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ;EACA,IAAAC,2CAA2B,EAAC,CAAC;EAE7B,MAAMC,YAAY,GAAG,CACnB,QAAQ,EACR,mBAAmB,EACnB,sCAAsC,EACtCL,gBAAgB,IAAI,SAAS,CAC9B,CAACM,IAAI,CAAC,GAAG,CAAC;EACX,MAAMC,YAAY,GAAG,CAAC,QAAQ,EAAEL,gBAAgB,CAAC,CAACM,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE3E,oBACE,IAAAhC,WAAA,CAAAoC,GAAA,EAACrC,eAAA,CAAAsC,0BAA0B,CAACC,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAAd,QAAA,eAC/C,IAAAzB,WAAA,CAAAoC,GAAA,EAACtC,YAAA,CAAA0C,IAAI;MACIC,SAAS,EAAEV,YAAY;MAC9BW,KAAK,EAAEf,YAAa;MAAAF,QAAA,eAEpB,IAAAzB,WAAA,CAAAoC,GAAA,EAACtC,YAAA,CAAA0C,IAAI;QACIC,SAAS,EAAER,YAAY;QAC9BS,KAAK,EAAEb,YAAa;QAAAJ,QAAA,EAEnBA;MAAQ,CACL;IAAC,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAEM,MAAMkB,YAAY,GAAAtB,OAAA,CAAAsB,YAAA,gBAAG,IAAAC,WAAI,EAACpB,qBAAqB,CAAC;AACvDmB,YAAY,CAACE,WAAW,GAAG,cAAc","ignoreList":[]}

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

@@ -7,6 +7,7 @@ exports.PANEL_TOP_INSET = exports.PANEL_BOTTOM_INSET = exports.GUTTER_MASK_SPREA
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _useTheme = require("../theme/use-theme.js");
+var _nestingContext = require("./nesting-context.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -59,39 +60,49 @@ const ContentPanelComponent = ({
   surfaceStyle,
   contentClassName,
   contentStyle,
-  showStickyFrame
+  showStickyFrame,
+  maskColor
 }) => {
+  // Dev-only invariant — must run unconditionally before the early `!framed`
+  // return so the hook order stays stable across renders (rules of hooks).
+  (0, _nestingContext.useContentPanelNestingGuard)();
   const {
     colors
   } = (0, _useTheme.useTheme)();
   if (!framed) {
     // Full-bleed: a single flat surface. No rounding, no sticky overlays.
     const fullBleedClass = ['flex-1', surfaceClassName ?? 'bg-card', contentClassName].filter(Boolean).join(' ');
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: fullBleedClass,
-      style: [surfaceStyle, contentStyle],
-      children: children
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_nestingContext.ContentPanelNestingContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        className: fullBleedClass,
+        style: [surfaceStyle, contentStyle],
+        children: children
+      })
     });
   }
   const surfaceClass = ['flex-1', 'rounded-radius-28', surfaceClassName ?? 'bg-card'].join(' ');
   const contentClass = ['flex-1', 'rounded-radius-28 web:overflow-x-clip', contentClassName].filter(Boolean).join(' ');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    className: surfaceClass,
-    style: surfaceStyle,
-    children: [/*#__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)]',
-      style: {
-        boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${colors.background}`
-      }
-    }), 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)]'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: contentClass,
-      style: contentStyle,
-      children: children
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_nestingContext.ContentPanelNestingContext.Provider, {
+    value: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: surfaceClass,
+      style: surfaceStyle,
+      children: [/*#__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)]',
+        style: {
+          boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}`
+        }
+      }), 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)]'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        className: contentClass,
+        style: contentStyle,
+        children: children
+      })]
+    })
   });
 };
 const ContentPanel = exports.ContentPanel = /*#__PURE__*/(0, _react.memo)(ContentPanelComponent);

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_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","colors","useTheme","fullBleedClass","filter","Boolean","join","jsx","View","className","style","surfaceClass","contentClass","jsxs","pointerEvents","boxShadow","background","ContentPanel","memo","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":"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","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","ContentPanelComponent","children","framed","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","useContentPanelNestingGuard","colors","useTheme","fullBleedClass","filter","Boolean","join","jsx","ContentPanelNestingContext","Provider","value","View","className","style","surfaceClass","contentClass","jsxs","pointerEvents","boxShadow","background","ContentPanel","memo","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/content-panel/nesting-context.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentPanelNestingContext = void 0;
+exports.useContentPanelNestingGuard = useContentPanelNestingGuard;
+var _react = require("react");
+/**
+ * Tracks whether the current subtree is already inside a `ContentPanel`.
+ *
+ * Every `ContentPanel` variant (web + native) wraps its rendered tree in
+ * `<ContentPanelNestingContext.Provider value={true}>`, so any DESCENDANT
+ * `ContentPanel` reads `true` here and can reject the invalid nesting. Context
+ * only flows downward, so side-by-side sibling panels each read the default
+ * `false` at their own level — siblings are valid, only true parent→child
+ * nesting trips the guard.
+ */
+const ContentPanelNestingContext = exports.ContentPanelNestingContext = /*#__PURE__*/(0, _react.createContext)(false);
+ContentPanelNestingContext.displayName = 'BloomContentPanelNestingContext';
+
+/**
+ * Dev-only invariant: a `ContentPanel` must NEVER be rendered inside another
+ * `ContentPanel`. Nesting two content surfaces is meaningless and breaks the
+ * sticky / 100dvh framed frame. Call this unconditionally at the top of every
+ * `ContentPanel` variant — before any early return — so the hook order stays
+ * stable (rules of hooks).
+ *
+ * The throw is guarded by `process.env.NODE_ENV !== 'production'`, so bundlers
+ * (Metro on RN, Vite/Rolldown on web) statically strip the check from
+ * production builds for zero runtime overhead.
+ */
+function useContentPanelNestingGuard() {
+  const isNested = (0, _react.useContext)(ContentPanelNestingContext);
+  if (process.env.NODE_ENV !== 'production' && isNested) {
+    throw new Error('ContentPanel cannot be nested inside another ContentPanel. ' + 'Render panels as siblings (e.g. side-by-side columns), not nested.');
+  }
+}
+//# sourceMappingURL=nesting-context.js.map

package/lib/commonjs/content-panel/nesting-context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","ContentPanelNestingContext","exports","createContext","displayName","useContentPanelNestingGuard","isNested","useContext","process","env","NODE_ENV","Error"],"sourceRoot":"../../../src","sources":["content-panel/nesting-context.ts"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,gBAAG,IAAAE,oBAAa,EAAU,KAAK,CAAC;AACvEF,0BAA0B,CAACG,WAAW,GAAG,iCAAiC;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,2BAA2BA,CAAA,EAAS;EAClD,MAAMC,QAAQ,GAAG,IAAAC,iBAAU,EAACN,0BAA0B,CAAC;EACvD,IAAIO,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIJ,QAAQ,EAAE;IACrD,MAAM,IAAIK,KAAK,CACb,6DAA6D,GAC3D,oEACJ,CAAC;EACH;AACF","ignoreList":[]}

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

@@ -24,6 +24,7 @@
  */
 import React, { memo } from 'react';
 import { View } from 'react-native';
+import { ContentPanelNestingContext, useContentPanelNestingGuard } from "./nesting-context.js";
 
 /**
  * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
@@ -42,15 +43,20 @@ const ContentPanelComponent = ({
   contentClassName,
   contentStyle
 }) => {
+  // 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(' ');
   const contentClass = ['flex-1', contentClassName].filter(Boolean).join(' ');
-  return /*#__PURE__*/_jsx(View, {
-    className: surfaceClass,
-    style: surfaceStyle,
+  return /*#__PURE__*/_jsx(ContentPanelNestingContext.Provider, {
+    value: true,
     children: /*#__PURE__*/_jsx(View, {
-      className: contentClass,
-      style: contentStyle,
-      children: children
+      className: surfaceClass,
+      style: surfaceStyle,
+      children: /*#__PURE__*/_jsx(View, {
+        className: contentClass,
+        style: contentStyle,
+        children: children
+      })
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","View","jsx","_jsx","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","surfaceClassName","surfaceStyle","contentClassName","contentStyle","surfaceClass","join","contentClass","filter","Boolean","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;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;AAsBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ,MAAMC,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,CAACF,IAAI;IACIiB,SAAS,EAAEL,YAAY;IAC9BM,KAAK,EAAET,YAAa;IAAAF,QAAA,eAEpBL,IAAA,CAACF,IAAI;MACIiB,SAAS,EAAEH,YAAY;MAC9BI,KAAK,EAAEP,YAAa;MAAAJ,QAAA,EAEnBA;IAAQ,CACL;EAAC,CACH,CAAC;AAEX,CAAC;AAED,OAAO,MAAMY,YAAY,gBAAGpB,IAAI,CAACO,qBAAqB,CAAC;AACvDa,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","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":[]}

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

@@ -39,6 +39,7 @@
 import React, { memo } from 'react';
 import { View } from 'react-native';
 import { useTheme } from "../theme/use-theme.js";
+import { ContentPanelNestingContext, useContentPanelNestingGuard } from "./nesting-context.js";
 
 /** Width (in px) of the sticky gutter-mask box-shadow ring. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,39 +55,49 @@ const ContentPanelComponent = ({
   surfaceStyle,
   contentClassName,
   contentStyle,
-  showStickyFrame
+  showStickyFrame,
+  maskColor
 }) => {
+  // Dev-only invariant — must run unconditionally before the early `!framed`
+  // return so the hook order stays stable across renders (rules of hooks).
+  useContentPanelNestingGuard();
   const {
     colors
   } = useTheme();
   if (!framed) {
     // Full-bleed: a single flat surface. No rounding, no sticky overlays.
     const fullBleedClass = ['flex-1', surfaceClassName ?? 'bg-card', contentClassName].filter(Boolean).join(' ');
-    return /*#__PURE__*/_jsx(View, {
-      className: fullBleedClass,
-      style: [surfaceStyle, contentStyle],
-      children: children
+    return /*#__PURE__*/_jsx(ContentPanelNestingContext.Provider, {
+      value: true,
+      children: /*#__PURE__*/_jsx(View, {
+        className: fullBleedClass,
+        style: [surfaceStyle, contentStyle],
+        children: children
+      })
     });
   }
   const surfaceClass = ['flex-1', 'rounded-radius-28', surfaceClassName ?? 'bg-card'].join(' ');
   const contentClass = ['flex-1', 'rounded-radius-28 web:overflow-x-clip', contentClassName].filter(Boolean).join(' ');
-  return /*#__PURE__*/_jsxs(View, {
-    className: surfaceClass,
-    style: surfaceStyle,
-    children: [/*#__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)]',
-      style: {
-        boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${colors.background}`
-      }
-    }), 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)]'
-    }), /*#__PURE__*/_jsx(View, {
-      className: contentClass,
-      style: contentStyle,
-      children: children
-    })]
+  return /*#__PURE__*/_jsx(ContentPanelNestingContext.Provider, {
+    value: true,
+    children: /*#__PURE__*/_jsxs(View, {
+      className: surfaceClass,
+      style: surfaceStyle,
+      children: [/*#__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)]',
+        style: {
+          boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}`
+        }
+      }), 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)]'
+      }), /*#__PURE__*/_jsx(View, {
+        className: contentClass,
+        style: contentStyle,
+        children: children
+      })]
+    })
   });
 };
 export const ContentPanel = /*#__PURE__*/memo(ContentPanelComponent);

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","View","useTheme","jsx","_jsx","jsxs","_jsxs","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","framed","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","colors","fullBleedClass","filter","Boolean","join","className","style","surfaceClass","contentClass","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;;AAE7C;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;AAgBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAO,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EAE7B,IAAI,CAACU,MAAM,EAAE;IACX;IACA,MAAMO,cAAc,GAAG,CACrB,QAAQ,EACRN,gBAAgB,IAAI,SAAS,EAC7BE,gBAAgB,CACjB,CACEK,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;IACZ,oBACElB,IAAA,CAACH,IAAI;MACIsB,SAAS,EAAEJ,cAAc;MAChCK,KAAK,EAAE,CAACV,YAAY,EAAEE,YAAY,CAAE;MAAAL,QAAA,EAEnCA;IAAQ,CACL,CAAC;EAEX;EAEA,MAAMc,YAAY,GAAG,CAAC,QAAQ,EAAE,mBAAmB,EAAEZ,gBAAgB,IAAI,SAAS,CAAC,CAACS,IAAI,CAAC,GAAG,CAAC;EAC7F,MAAMI,YAAY,GAAG,CAAC,QAAQ,EAAE,uCAAuC,EAAEX,gBAAgB,CAAC,CACvFK,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;EAEZ,oBACEhB,KAAA,CAACL,IAAI;IACIsB,SAAS,EAAEE,YAAY;IAC9BD,KAAK,EAAEV,YAAa;IAAAH,QAAA,gBAGpBP,IAAA,CAACH,IAAI;MACH0B,aAAa,EAAC,MAAM;MAElBJ,SAAS,EACP,8IAA8I;MAElJC,KAAK,EAAE;QAAEI,SAAS,EAAE,SAASrB,kBAAkB,MAAMW,MAAM,CAACW,UAAU;MAAG;IAAE,CAC5E,CAAC,EAEDZ,eAAe,KAAK,KAAK,iBACxBb,IAAA,CAACH,IAAI;MACH0B,aAAa,EAAC,MAAM;MAElBJ,SAAS,EACP;IAAyI,CAE9I,CACF,eAEDnB,IAAA,CAACH,IAAI;MACIsB,SAAS,EAAEG,YAAY;MAC9BF,KAAK,EAAER,YAAa;MAAAL,QAAA,EAEnBA;IAAQ,CACL,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAED,OAAO,MAAMmB,YAAY,gBAAG9B,IAAI,CAACU,qBAAqB,CAAC;AACvDoB,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","ContentPanelComponent","children","framed","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","maskColor","colors","fullBleedClass","filter","Boolean","join","Provider","value","className","style","surfaceClass","contentClass","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,IAAI,CAACY,MAAM,EAAE;IACX;IACA,MAAMQ,cAAc,GAAG,CACrB,QAAQ,EACRP,gBAAgB,IAAI,SAAS,EAC7BE,gBAAgB,CACjB,CACEM,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;IACZ,oBACEnB,IAAA,CAACH,0BAA0B,CAACuB,QAAQ;MAACC,KAAK,EAAE,IAAK;MAAAd,QAAA,eAC/CP,IAAA,CAACL,IAAI;QACI2B,SAAS,EAAEN,cAAc;QAChCO,KAAK,EAAE,CAACb,YAAY,EAAEE,YAAY,CAAE;QAAAL,QAAA,EAEnCA;MAAQ,CACL;IAAC,CAC4B,CAAC;EAE1C;EAEA,MAAMiB,YAAY,GAAG,CAAC,QAAQ,EAAE,mBAAmB,EAAEf,gBAAgB,IAAI,SAAS,CAAC,CAACU,IAAI,CAAC,GAAG,CAAC;EAC7F,MAAMM,YAAY,GAAG,CAAC,QAAQ,EAAE,uCAAuC,EAAEd,gBAAgB,CAAC,CACvFM,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;EAEZ,oBACEnB,IAAA,CAACH,0BAA0B,CAACuB,QAAQ;IAACC,KAAK,EAAE,IAAK;IAAAd,QAAA,eAC/CL,KAAA,CAACP,IAAI;MACI2B,SAAS,EAAEE,YAAY;MAC9BD,KAAK,EAAEb,YAAa;MAAAH,QAAA,gBAGpBP,IAAA,CAACL,IAAI;QACH+B,aAAa,EAAC,MAAM;QAElBJ,SAAS,EACP,8IAA8I;QAElJC,KAAK,EAAE;UAAEI,SAAS,EAAE,SAASxB,kBAAkB,MAAMW,SAAS,IAAIC,MAAM,CAACa,UAAU;QAAG;MAAE,CACzF,CAAC,EAEDf,eAAe,KAAK,KAAK,iBACxBb,IAAA,CAACL,IAAI;QACH+B,aAAa,EAAC,MAAM;QAElBJ,SAAS,EACP;MAAyI,CAE9I,CACF,eAEDtB,IAAA,CAACL,IAAI;QACI2B,SAAS,EAAEG,YAAY;QAC9BF,KAAK,EAAEX,YAAa;QAAAL,QAAA,EAEnBA;MAAQ,CACL,CAAC;IAAA,CACH;EAAC,CAC4B,CAAC;AAE1C,CAAC;AAED,OAAO,MAAMsB,YAAY,gBAAGnC,IAAI,CAACY,qBAAqB,CAAC;AACvDuB,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/content-panel/nesting-context.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { createContext, useContext } from 'react';
+
+/**
+ * Tracks whether the current subtree is already inside a `ContentPanel`.
+ *
+ * Every `ContentPanel` variant (web + native) wraps its rendered tree in
+ * `<ContentPanelNestingContext.Provider value={true}>`, so any DESCENDANT
+ * `ContentPanel` reads `true` here and can reject the invalid nesting. Context
+ * only flows downward, so side-by-side sibling panels each read the default
+ * `false` at their own level — siblings are valid, only true parent→child
+ * nesting trips the guard.
+ */
+export const ContentPanelNestingContext = /*#__PURE__*/createContext(false);
+ContentPanelNestingContext.displayName = 'BloomContentPanelNestingContext';
+
+/**
+ * Dev-only invariant: a `ContentPanel` must NEVER be rendered inside another
+ * `ContentPanel`. Nesting two content surfaces is meaningless and breaks the
+ * sticky / 100dvh framed frame. Call this unconditionally at the top of every
+ * `ContentPanel` variant — before any early return — so the hook order stays
+ * stable (rules of hooks).
+ *
+ * The throw is guarded by `process.env.NODE_ENV !== 'production'`, so bundlers
+ * (Metro on RN, Vite/Rolldown on web) statically strip the check from
+ * production builds for zero runtime overhead.
+ */
+export function useContentPanelNestingGuard() {
+  const isNested = useContext(ContentPanelNestingContext);
+  if (process.env.NODE_ENV !== 'production' && isNested) {
+    throw new Error('ContentPanel cannot be nested inside another ContentPanel. ' + 'Render panels as siblings (e.g. side-by-side columns), not nested.');
+  }
+}
+//# sourceMappingURL=nesting-context.js.map

package/lib/module/content-panel/nesting-context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","ContentPanelNestingContext","displayName","useContentPanelNestingGuard","isNested","process","env","NODE_ENV","Error"],"sourceRoot":"../../../src","sources":["content-panel/nesting-context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,gBAAGF,aAAa,CAAU,KAAK,CAAC;AACvEE,0BAA0B,CAACC,WAAW,GAAG,iCAAiC;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,2BAA2BA,CAAA,EAAS;EAClD,MAAMC,QAAQ,GAAGJ,UAAU,CAACC,0BAA0B,CAAC;EACvD,IAAII,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIH,QAAQ,EAAE;IACrD,MAAM,IAAII,KAAK,CACb,6DAA6D,GAC3D,oEACJ,CAAC;EACH;AACF","ignoreList":[]}

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

@@ -49,6 +49,11 @@ export interface ContentPanelProps {
      * is always part of the surface).
      */
     showStickyFrame?: boolean;
+    /**
+     * Color of the WEB sticky bleed-mask gutter ring. Accepted for cross-platform
+     * API parity — no-op on native (there is no bleed-mask), like `framed`.
+     */
+    maskColor?: string;
 }
 export declare const ContentPanel: React.NamedExoticComponent<ContentPanelProps>;
 //# sourceMappingURL=index.d.ts.map

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;AAEpE;;;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;CAC3B;AAgCD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}
+{"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"}

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

@@ -54,6 +54,15 @@ export interface ContentPanelProps {
     contentStyle?: StyleProp<ViewStyle>;
     /** Render the sticky border frame (defaults to true when framed). */
     showStickyFrame?: boolean;
+    /**
+     * Color of the sticky bleed-mask gutter ring. The ring is meant to match the
+     * UNSCOPED outer gutter band (the app's background), so consumers that wrap
+     * `<ContentPanel>` in a `BloomColorScope` (e.g. a tinted per-profile color)
+     * should pass the unscoped background here — otherwise the internally-read
+     * scoped `background` token would tint the ring and leave a faint corner seam.
+     * Defaults to the current theme's `background` token.
+     */
+    maskColor?: string;
 }
 export declare const ContentPanel: React.NamedExoticComponent<ContentPanelProps>;
 //# sourceMappingURL=index.web.d.ts.map

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

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

package/lib/typescript/commonjs/content-panel/nesting-context.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tracks whether the current subtree is already inside a `ContentPanel`.
+ *
+ * Every `ContentPanel` variant (web + native) wraps its rendered tree in
+ * `<ContentPanelNestingContext.Provider value={true}>`, so any DESCENDANT
+ * `ContentPanel` reads `true` here and can reject the invalid nesting. Context
+ * only flows downward, so side-by-side sibling panels each read the default
+ * `false` at their own level — siblings are valid, only true parent→child
+ * nesting trips the guard.
+ */
+export declare const ContentPanelNestingContext: import("react").Context<boolean>;
+/**
+ * Dev-only invariant: a `ContentPanel` must NEVER be rendered inside another
+ * `ContentPanel`. Nesting two content surfaces is meaningless and breaks the
+ * sticky / 100dvh framed frame. Call this unconditionally at the top of every
+ * `ContentPanel` variant — before any early return — so the hook order stays
+ * stable (rules of hooks).
+ *
+ * The throw is guarded by `process.env.NODE_ENV !== 'production'`, so bundlers
+ * (Metro on RN, Vite/Rolldown on web) statically strip the check from
+ * production builds for zero runtime overhead.
+ */
+export declare function useContentPanelNestingGuard(): void;
+//# sourceMappingURL=nesting-context.d.ts.map

package/lib/typescript/commonjs/content-panel/nesting-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nesting-context.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/nesting-context.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,0BAA0B,kCAAgC,CAAC;AAGxE;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,IAAI,IAAI,CAQlD"}

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

@@ -49,6 +49,11 @@ export interface ContentPanelProps {
      * is always part of the surface).
      */
     showStickyFrame?: boolean;
+    /**
+     * Color of the WEB sticky bleed-mask gutter ring. Accepted for cross-platform
+     * API parity — no-op on native (there is no bleed-mask), like `framed`.
+     */
+    maskColor?: string;
 }
 export declare const ContentPanel: React.NamedExoticComponent<ContentPanelProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE;;;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;CAC3B;AAgCD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}
+{"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"}

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

@@ -54,6 +54,15 @@ export interface ContentPanelProps {
     contentStyle?: StyleProp<ViewStyle>;
     /** Render the sticky border frame (defaults to true when framed). */
     showStickyFrame?: boolean;
+    /**
+     * Color of the sticky bleed-mask gutter ring. The ring is meant to match the
+     * UNSCOPED outer gutter band (the app's background), so consumers that wrap
+     * `<ContentPanel>` in a `BloomColorScope` (e.g. a tinted per-profile color)
+     * should pass the unscoped background here — otherwise the internally-read
+     * scoped `background` token would tint the ring and leave a faint corner seam.
+     * Defaults to the current theme's `background` token.
+     */
+    maskColor?: string;
 }
 export declare const ContentPanel: React.NamedExoticComponent<ContentPanelProps>;
 //# sourceMappingURL=index.web.d.ts.map

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

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

package/lib/typescript/module/content-panel/nesting-context.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tracks whether the current subtree is already inside a `ContentPanel`.
+ *
+ * Every `ContentPanel` variant (web + native) wraps its rendered tree in
+ * `<ContentPanelNestingContext.Provider value={true}>`, so any DESCENDANT
+ * `ContentPanel` reads `true` here and can reject the invalid nesting. Context
+ * only flows downward, so side-by-side sibling panels each read the default
+ * `false` at their own level — siblings are valid, only true parent→child
+ * nesting trips the guard.
+ */
+export declare const ContentPanelNestingContext: import("react").Context<boolean>;
+/**
+ * Dev-only invariant: a `ContentPanel` must NEVER be rendered inside another
+ * `ContentPanel`. Nesting two content surfaces is meaningless and breaks the
+ * sticky / 100dvh framed frame. Call this unconditionally at the top of every
+ * `ContentPanel` variant — before any early return — so the hook order stays
+ * stable (rules of hooks).
+ *
+ * The throw is guarded by `process.env.NODE_ENV !== 'production'`, so bundlers
+ * (Metro on RN, Vite/Rolldown on web) statically strip the check from
+ * production builds for zero runtime overhead.
+ */
+export declare function useContentPanelNestingGuard(): void;
+//# sourceMappingURL=nesting-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nesting-context.d.ts","sourceRoot":"","sources":["../../../../src/content-panel/nesting-context.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,0BAA0B,kCAAgC,CAAC;AAGxE;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,IAAI,IAAI,CAQlD"}

package/package.json

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { ContentPanel } from '../content-panel';
+
+// 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
+// variants.
+describe('ContentPanel nesting guard', () => {
+  it('renders a single (non-nested) panel', () => {
+    const { getByText } = render(
+      <ContentPanel framed>
+        <Text>content</Text>
+      </ContentPanel>,
+    );
+    expect(getByText('content')).toBeTruthy();
+  });
+
+  it('renders side-by-side sibling panels without tripping the guard', () => {
+    const { getByText } = render(
+      <React.Fragment>
+        <ContentPanel framed>
+          <Text>left</Text>
+        </ContentPanel>
+        <ContentPanel framed>
+          <Text>right</Text>
+        </ContentPanel>
+      </React.Fragment>,
+    );
+    expect(getByText('left')).toBeTruthy();
+    expect(getByText('right')).toBeTruthy();
+  });
+
+  it('throws when a ContentPanel is nested inside another ContentPanel', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() =>
+      render(
+        <ContentPanel framed>
+          <ContentPanel framed>
+            <Text>nested</Text>
+          </ContentPanel>
+        </ContentPanel>,
+      ),
+    ).toThrow(
+      'ContentPanel cannot be nested inside another ContentPanel. ' +
+        'Render panels as siblings (e.g. side-by-side columns), not nested.',
+    );
+    consoleError.mockRestore();
+  });
+});

package/src/content-panel/index.tsx

@@ -23,6 +23,11 @@
 import React, { memo } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 
+import {
+  ContentPanelNestingContext,
+  useContentPanelNestingGuard,
+} from './nesting-context';
+
 /**
  * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
  * cross-platform API parity (it has no effect on native).
@@ -51,6 +56,11 @@ export interface ContentPanelProps {
    * is always part of the surface).
    */
   showStickyFrame?: boolean;
+  /**
+   * Color of the WEB sticky bleed-mask gutter ring. Accepted for cross-platform
+   * API parity — no-op on native (there is no bleed-mask), like `framed`.
+   */
+  maskColor?: string;
 }
 
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
@@ -60,6 +70,9 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   contentClassName,
   contentStyle,
 }) => {
+  // Dev-only invariant — a ContentPanel must never be nested inside another.
+  useContentPanelNestingGuard();
+
   const surfaceClass = [
     'flex-1',
     'rounded-radius-28',
@@ -69,17 +82,19 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   const contentClass = ['flex-1', contentClassName].filter(Boolean).join(' ');
 
   return (
-    <View
-      {...({ className: surfaceClass } as Record<string, string>)}
-      style={surfaceStyle}
-    >
+    <ContentPanelNestingContext.Provider value={true}>
       <View
-        {...({ className: contentClass } as Record<string, string>)}
-        style={contentStyle}
+        {...({ className: surfaceClass } as Record<string, string>)}
+        style={surfaceStyle}
       >
-        {children}
+        <View
+          {...({ className: contentClass } as Record<string, string>)}
+          style={contentStyle}
+        >
+          {children}
+        </View>
       </View>
-    </View>
+    </ContentPanelNestingContext.Provider>
   );
 };
 

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

@@ -38,6 +38,10 @@ import React, { memo } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import {
+  ContentPanelNestingContext,
+  useContentPanelNestingGuard,
+} from './nesting-context';
 
 /** Width (in px) of the sticky gutter-mask box-shadow ring. */
 export const GUTTER_MASK_SPREAD = 40;
@@ -58,6 +62,15 @@ export interface ContentPanelProps {
   contentStyle?: StyleProp<ViewStyle>;
   /** Render the sticky border frame (defaults to true when framed). */
   showStickyFrame?: boolean;
+  /**
+   * Color of the sticky bleed-mask gutter ring. The ring is meant to match the
+   * UNSCOPED outer gutter band (the app's background), so consumers that wrap
+   * `<ContentPanel>` in a `BloomColorScope` (e.g. a tinted per-profile color)
+   * should pass the unscoped background here — otherwise the internally-read
+   * scoped `background` token would tint the ring and leave a faint corner seam.
+   * Defaults to the current theme's `background` token.
+   */
+  maskColor?: string;
 }
 
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
@@ -68,7 +81,11 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   contentClassName,
   contentStyle,
   showStickyFrame,
+  maskColor,
 }) => {
+  // Dev-only invariant — must run unconditionally before the early `!framed`
+  // return so the hook order stays stable across renders (rules of hooks).
+  useContentPanelNestingGuard();
   const { colors } = useTheme();
 
   if (!framed) {
@@ -81,12 +98,14 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
       .filter(Boolean)
       .join(' ');
     return (
-      <View
-        {...({ className: fullBleedClass } as Record<string, string>)}
-        style={[surfaceStyle, contentStyle]}
-      >
-        {children}
-      </View>
+      <ContentPanelNestingContext.Provider value={true}>
+        <View
+          {...({ className: fullBleedClass } as Record<string, string>)}
+          style={[surfaceStyle, contentStyle]}
+        >
+          {children}
+        </View>
+      </ContentPanelNestingContext.Provider>
     );
   }
 
@@ -96,37 +115,39 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
     .join(' ');
 
   return (
-    <View
-      {...({ className: surfaceClass } as Record<string, string>)}
-      style={surfaceStyle}
-    >
-      {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. */}
+    <ContentPanelNestingContext.Provider value={true}>
       <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)]',
-        } as Record<string, string>)}
-        style={{ boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${colors.background}` }}
-      />
-      {/* (2) Border-frame overlay — one continuous rounded border, above all. */}
-      {showStickyFrame !== false && (
+        {...({ className: surfaceClass } as Record<string, string>)}
+        style={surfaceStyle}
+      >
+        {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. */}
         <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)]',
+              '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}` }}
         />
-      )}
-      {/* Content wrapper — clipped to the rounded panel shape on web. */}
-      <View
-        {...({ className: contentClass } as Record<string, string>)}
-        style={contentStyle}
-      >
-        {children}
+        {/* (2) Border-frame overlay — one continuous rounded border, above all. */}
+        {showStickyFrame !== false && (
+          <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)]',
+            } as Record<string, string>)}
+          />
+        )}
+        {/* Content wrapper — clipped to the rounded panel shape on web. */}
+        <View
+          {...({ className: contentClass } as Record<string, string>)}
+          style={contentStyle}
+        >
+          {children}
+        </View>
       </View>
-    </View>
+    </ContentPanelNestingContext.Provider>
   );
 };
 

package/src/content-panel/nesting-context.ts

@@ -0,0 +1,35 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Tracks whether the current subtree is already inside a `ContentPanel`.
+ *
+ * Every `ContentPanel` variant (web + native) wraps its rendered tree in
+ * `<ContentPanelNestingContext.Provider value={true}>`, so any DESCENDANT
+ * `ContentPanel` reads `true` here and can reject the invalid nesting. Context
+ * only flows downward, so side-by-side sibling panels each read the default
+ * `false` at their own level — siblings are valid, only true parent→child
+ * nesting trips the guard.
+ */
+export const ContentPanelNestingContext = createContext<boolean>(false);
+ContentPanelNestingContext.displayName = 'BloomContentPanelNestingContext';
+
+/**
+ * Dev-only invariant: a `ContentPanel` must NEVER be rendered inside another
+ * `ContentPanel`. Nesting two content surfaces is meaningless and breaks the
+ * sticky / 100dvh framed frame. Call this unconditionally at the top of every
+ * `ContentPanel` variant — before any early return — so the hook order stays
+ * stable (rules of hooks).
+ *
+ * The throw is guarded by `process.env.NODE_ENV !== 'production'`, so bundlers
+ * (Metro on RN, Vite/Rolldown on web) statically strip the check from
+ * production builds for zero runtime overhead.
+ */
+export function useContentPanelNestingGuard(): void {
+  const isNested = useContext(ContentPanelNestingContext);
+  if (process.env.NODE_ENV !== 'production' && isNested) {
+    throw new Error(
+      'ContentPanel cannot be nested inside another ContentPanel. ' +
+        'Render panels as siblings (e.g. side-by-side columns), not nested.',
+    );
+  }
+}