@oxyhq/bloom 0.20.0 → 0.22.0

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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); }
+/**
+ * Native variant of `ContentPanel` — the framed app-content surface.
+ *
+ * `ContentPanel` is the rounded, bordered panel that holds an app's routed
+ * content. On WEB it adds two sticky overlays (a gutter "bleed-mask" box-shadow
+ * ring and a continuous rounded border frame) so feed content that bleeds into
+ * the rounded corners / lateral gutters is masked while a single seamless border
+ * is drawn around the panel — see `index.web.tsx`.
+ *
+ * On NATIVE none of that applies: there is no document scroll, no sticky
+ * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
+ * surface wrapping its content. The `framed` and `showStickyFrame` props are
+ * accepted for cross-platform API parity but are intentionally no-ops here
+ * (mirroring the no-op native fork of `../scroll`).
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below must
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` (and the
+ * native `src/**`) picks them up.
+ */
+
+/**
+ * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
+ * cross-platform API parity (it has no effect on native).
+ */
+const GUTTER_MASK_SPREAD = exports.GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) of the framed panel chrome. */
+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;
+const ContentPanelComponent = ({
+  children,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle
+}) => {
+  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,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: contentClass,
+      style: contentStyle,
+      children: children
+    })
+  });
+};
+const ContentPanel = exports.ContentPanel = /*#__PURE__*/(0, _react.memo)(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;AA2BnC,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":[]}

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _useTheme = require("../theme/use-theme.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); }
+/**
+ * Web variant of `ContentPanel` — the framed app-content surface.
+ *
+ * On the web, app content scrolls the DOCUMENT, and a multi-column shell keeps
+ * the routed content in a rounded, bordered center panel. Two problems follow
+ * from letting feed content bleed to the rounded panel edge, both solved here
+ * with sticky, full-viewport-height overlays inside the panel surface:
+ *
+ *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
+ *     (Bloom `background` token) drawn OVER content that bleeds into the thin
+ *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
+ *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     so it only masks the content's bleed, never the chrome. No border.
+ *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *
+ *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
+ *     outline with a transparent interior, ABOVE all content. Being one element
+ *     above everything, it draws ONE continuous rounded border around all four
+ *     sides — no seams, no double lines, no per-chrome borders.
+ *
+ * Both overlays are `position: sticky; top: 8px` with a negative
+ * `margin-bottom` so they occupy zero layout height (they overlay the scrolled
+ * content rather than displacing it). They render BEFORE the content wrapper so
+ * z-index — not DOM order — decides layering.
+ *
+ * When `framed` is false (narrow screens) the panel is full-bleed: a single
+ * flat surface, no rounding, no overlays.
+ *
+ * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
+ * select this file via the `"browser"` export condition in `package.json`.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below MUST
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
+ * parts).
+ */
+
+/** Width (in px) of the sticky gutter-mask box-shadow ring. */
+const GUTTER_MASK_SPREAD = exports.GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) the framed panel chrome pins to. */
+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;
+const ContentPanelComponent = ({
+  children,
+  framed,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle,
+  showStickyFrame,
+  maskColor
+}) => {
+  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
+    });
+  }
+  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 ${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);
+ContentPanel.displayName = 'ContentPanel';
+//# sourceMappingURL=index.web.js.map

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

@@ -0,0 +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","maskColor","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":[]}

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

@@ -0,0 +1,59 @@
+"use strict";
+
+/**
+ * Native variant of `ContentPanel` — the framed app-content surface.
+ *
+ * `ContentPanel` is the rounded, bordered panel that holds an app's routed
+ * content. On WEB it adds two sticky overlays (a gutter "bleed-mask" box-shadow
+ * ring and a continuous rounded border frame) so feed content that bleeds into
+ * the rounded corners / lateral gutters is masked while a single seamless border
+ * is drawn around the panel — see `index.web.tsx`.
+ *
+ * On NATIVE none of that applies: there is no document scroll, no sticky
+ * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
+ * surface wrapping its content. The `framed` and `showStickyFrame` props are
+ * accepted for cross-platform API parity but are intentionally no-ops here
+ * (mirroring the no-op native fork of `../scroll`).
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below must
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` (and the
+ * native `src/**`) picks them up.
+ */
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+/**
+ * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
+ * cross-platform API parity (it has no effect on native).
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) of the framed panel chrome. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+const ContentPanelComponent = ({
+  children,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle
+}) => {
+  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,
+    children: /*#__PURE__*/_jsx(View, {
+      className: contentClass,
+      style: contentStyle,
+      children: children
+    })
+  });
+};
+export const ContentPanel = /*#__PURE__*/memo(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;AA2BnC,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":[]}

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

@@ -0,0 +1,95 @@
+"use strict";
+
+/**
+ * Web variant of `ContentPanel` — the framed app-content surface.
+ *
+ * On the web, app content scrolls the DOCUMENT, and a multi-column shell keeps
+ * the routed content in a rounded, bordered center panel. Two problems follow
+ * from letting feed content bleed to the rounded panel edge, both solved here
+ * with sticky, full-viewport-height overlays inside the panel surface:
+ *
+ *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
+ *     (Bloom `background` token) drawn OVER content that bleeds into the thin
+ *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
+ *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     so it only masks the content's bleed, never the chrome. No border.
+ *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *
+ *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
+ *     outline with a transparent interior, ABOVE all content. Being one element
+ *     above everything, it draws ONE continuous rounded border around all four
+ *     sides — no seams, no double lines, no per-chrome borders.
+ *
+ * Both overlays are `position: sticky; top: 8px` with a negative
+ * `margin-bottom` so they occupy zero layout height (they overlay the scrolled
+ * content rather than displacing it). They render BEFORE the content wrapper so
+ * z-index — not DOM order — decides layering.
+ *
+ * When `framed` is false (narrow screens) the panel is full-bleed: a single
+ * flat surface, no rounding, no overlays.
+ *
+ * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
+ * select this file via the `"browser"` export condition in `package.json`.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below MUST
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
+ * parts).
+ */
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../theme/use-theme.js";
+
+/** Width (in px) of the sticky gutter-mask box-shadow ring. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) the framed panel chrome pins to. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+const ContentPanelComponent = ({
+  children,
+  framed,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle,
+  showStickyFrame,
+  maskColor
+}) => {
+  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
+    });
+  }
+  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 ${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);
+ContentPanel.displayName = 'ContentPanel';
+//# sourceMappingURL=index.web.js.map

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

@@ -0,0 +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","maskColor","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;AAyBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAO,CAAC,GAAGjB,QAAQ,CAAC,CAAC;EAE7B,IAAI,CAACU,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,IAAI;MACIuB,SAAS,EAAEJ,cAAc;MAChCK,KAAK,EAAE,CAACX,YAAY,EAAEE,YAAY,CAAE;MAAAL,QAAA,EAEnCA;IAAQ,CACL,CAAC;EAEX;EAEA,MAAMe,YAAY,GAAG,CAAC,QAAQ,EAAE,mBAAmB,EAAEb,gBAAgB,IAAI,SAAS,CAAC,CAACU,IAAI,CAAC,GAAG,CAAC;EAC7F,MAAMI,YAAY,GAAG,CAAC,QAAQ,EAAE,uCAAuC,EAAEZ,gBAAgB,CAAC,CACvFM,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;EAEZ,oBACEjB,KAAA,CAACL,IAAI;IACIuB,SAAS,EAAEE,YAAY;IAC9BD,KAAK,EAAEX,YAAa;IAAAH,QAAA,gBAGpBP,IAAA,CAACH,IAAI;MACH2B,aAAa,EAAC,MAAM;MAElBJ,SAAS,EACP,8IAA8I;MAElJC,KAAK,EAAE;QAAEI,SAAS,EAAE,SAAStB,kBAAkB,MAAMW,SAAS,IAAIC,MAAM,CAACW,UAAU;MAAG;IAAE,CACzF,CAAC,EAEDb,eAAe,KAAK,KAAK,iBACxBb,IAAA,CAACH,IAAI;MACH2B,aAAa,EAAC,MAAM;MAElBJ,SAAS,EACP;IAAyI,CAE9I,CACF,eAEDpB,IAAA,CAACH,IAAI;MACIuB,SAAS,EAAEG,YAAY;MAC9BF,KAAK,EAAET,YAAa;MAAAL,QAAA,EAEnBA;IAAQ,CACL,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAED,OAAO,MAAMoB,YAAY,gBAAG/B,IAAI,CAACU,qBAAqB,CAAC;AACvDqB,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}

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

@@ -0,0 +1,59 @@
+/**
+ * Native variant of `ContentPanel` — the framed app-content surface.
+ *
+ * `ContentPanel` is the rounded, bordered panel that holds an app's routed
+ * content. On WEB it adds two sticky overlays (a gutter "bleed-mask" box-shadow
+ * ring and a continuous rounded border frame) so feed content that bleeds into
+ * the rounded corners / lateral gutters is masked while a single seamless border
+ * is drawn around the panel — see `index.web.tsx`.
+ *
+ * On NATIVE none of that applies: there is no document scroll, no sticky
+ * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
+ * surface wrapping its content. The `framed` and `showStickyFrame` props are
+ * accepted for cross-platform API parity but are intentionally no-ops here
+ * (mirroring the no-op native fork of `../scroll`).
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below must
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` (and the
+ * native `src/**`) picks them up.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
+ * cross-platform API parity (it has no effect on native).
+ */
+export declare const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) of the framed panel chrome. */
+export declare const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export declare const PANEL_BOTTOM_INSET = 8;
+export interface ContentPanelProps {
+    children: React.ReactNode;
+    /**
+     * Whether the panel is framed (wide screens) or full-bleed (narrow screens).
+     * No-op on native — the surface is always a rounded, bordered View.
+     */
+    framed: boolean;
+    /** Override the surface background utility (defaults to `bg-card`). */
+    surfaceClassName?: string;
+    surfaceStyle?: StyleProp<ViewStyle>;
+    /** Extra utilities for the inner content wrapper. */
+    contentClassName?: string;
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether to render the WEB sticky border frame. No-op on native (the border
+     * 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

@@ -0,0 +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;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgCD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

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

@@ -0,0 +1,68 @@
+/**
+ * Web variant of `ContentPanel` — the framed app-content surface.
+ *
+ * On the web, app content scrolls the DOCUMENT, and a multi-column shell keeps
+ * the routed content in a rounded, bordered center panel. Two problems follow
+ * from letting feed content bleed to the rounded panel edge, both solved here
+ * with sticky, full-viewport-height overlays inside the panel surface:
+ *
+ *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
+ *     (Bloom `background` token) drawn OVER content that bleeds into the thin
+ *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
+ *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     so it only masks the content's bleed, never the chrome. No border.
+ *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *
+ *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
+ *     outline with a transparent interior, ABOVE all content. Being one element
+ *     above everything, it draws ONE continuous rounded border around all four
+ *     sides — no seams, no double lines, no per-chrome borders.
+ *
+ * Both overlays are `position: sticky; top: 8px` with a negative
+ * `margin-bottom` so they occupy zero layout height (they overlay the scrolled
+ * content rather than displacing it). They render BEFORE the content wrapper so
+ * z-index — not DOM order — decides layering.
+ *
+ * When `framed` is false (narrow screens) the panel is full-bleed: a single
+ * flat surface, no rounding, no overlays.
+ *
+ * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
+ * select this file via the `"browser"` export condition in `package.json`.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below MUST
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
+ * parts).
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/** Width (in px) of the sticky gutter-mask box-shadow ring. */
+export declare const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) the framed panel chrome pins to. */
+export declare const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export declare const PANEL_BOTTOM_INSET = 8;
+export interface ContentPanelProps {
+    children: React.ReactNode;
+    /** Framed (wide screens) vs full-bleed (narrow screens). */
+    framed: boolean;
+    /** Override the surface background utility (defaults to `bg-card`). */
+    surfaceClassName?: string;
+    surfaceStyle?: StyleProp<ViewStyle>;
+    /** Extra utilities for the inner content wrapper. */
+    contentClassName?: string;
+    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

@@ -0,0 +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;IAC1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyED,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

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

@@ -0,0 +1,59 @@
+/**
+ * Native variant of `ContentPanel` — the framed app-content surface.
+ *
+ * `ContentPanel` is the rounded, bordered panel that holds an app's routed
+ * content. On WEB it adds two sticky overlays (a gutter "bleed-mask" box-shadow
+ * ring and a continuous rounded border frame) so feed content that bleeds into
+ * the rounded corners / lateral gutters is masked while a single seamless border
+ * is drawn around the panel — see `index.web.tsx`.
+ *
+ * On NATIVE none of that applies: there is no document scroll, no sticky
+ * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
+ * surface wrapping its content. The `framed` and `showStickyFrame` props are
+ * accepted for cross-platform API parity but are intentionally no-ops here
+ * (mirroring the no-op native fork of `../scroll`).
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below must
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` (and the
+ * native `src/**`) picks them up.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
+ * cross-platform API parity (it has no effect on native).
+ */
+export declare const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) of the framed panel chrome. */
+export declare const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export declare const PANEL_BOTTOM_INSET = 8;
+export interface ContentPanelProps {
+    children: React.ReactNode;
+    /**
+     * Whether the panel is framed (wide screens) or full-bleed (narrow screens).
+     * No-op on native — the surface is always a rounded, bordered View.
+     */
+    framed: boolean;
+    /** Override the surface background utility (defaults to `bg-card`). */
+    surfaceClassName?: string;
+    surfaceStyle?: StyleProp<ViewStyle>;
+    /** Extra utilities for the inner content wrapper. */
+    contentClassName?: string;
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether to render the WEB sticky border frame. No-op on native (the border
+     * 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

@@ -0,0 +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;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgCD,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

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

@@ -0,0 +1,68 @@
+/**
+ * Web variant of `ContentPanel` — the framed app-content surface.
+ *
+ * On the web, app content scrolls the DOCUMENT, and a multi-column shell keeps
+ * the routed content in a rounded, bordered center panel. Two problems follow
+ * from letting feed content bleed to the rounded panel edge, both solved here
+ * with sticky, full-viewport-height overlays inside the panel surface:
+ *
+ *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
+ *     (Bloom `background` token) drawn OVER content that bleeds into the thin
+ *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
+ *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     so it only masks the content's bleed, never the chrome. No border.
+ *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *
+ *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
+ *     outline with a transparent interior, ABOVE all content. Being one element
+ *     above everything, it draws ONE continuous rounded border around all four
+ *     sides — no seams, no double lines, no per-chrome borders.
+ *
+ * Both overlays are `position: sticky; top: 8px` with a negative
+ * `margin-bottom` so they occupy zero layout height (they overlay the scrolled
+ * content rather than displacing it). They render BEFORE the content wrapper so
+ * z-index — not DOM order — decides layering.
+ *
+ * When `framed` is false (narrow screens) the panel is full-bleed: a single
+ * flat surface, no rounding, no overlays.
+ *
+ * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
+ * select this file via the `"browser"` export condition in `package.json`.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below MUST
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
+ * parts).
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/** Width (in px) of the sticky gutter-mask box-shadow ring. */
+export declare const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) the framed panel chrome pins to. */
+export declare const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export declare const PANEL_BOTTOM_INSET = 8;
+export interface ContentPanelProps {
+    children: React.ReactNode;
+    /** Framed (wide screens) vs full-bleed (narrow screens). */
+    framed: boolean;
+    /** Override the surface background utility (defaults to `bg-card`). */
+    surfaceClassName?: string;
+    surfaceStyle?: StyleProp<ViewStyle>;
+    /** Extra utilities for the inner content wrapper. */
+    contentClassName?: string;
+    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

@@ -0,0 +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;IAC1B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyED,eAAO,MAAM,YAAY,+CAA8B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -778,6 +778,22 @@
         "default": "./lib/commonjs/scroll/index.js"
       }
     },
+    "./content-panel": {
+      "react-native": "./src/content-panel/index.tsx",
+      "browser": {
+        "types": "./lib/typescript/module/content-panel/index.web.d.ts",
+        "import": "./lib/module/content-panel/index.web.js",
+        "require": "./lib/commonjs/content-panel/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/content-panel/index.d.ts",
+        "default": "./lib/module/content-panel/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/content-panel/index.d.ts",
+        "default": "./lib/commonjs/content-panel/index.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "files": [

package/src/content-panel/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * Native variant of `ContentPanel` — the framed app-content surface.
+ *
+ * `ContentPanel` is the rounded, bordered panel that holds an app's routed
+ * content. On WEB it adds two sticky overlays (a gutter "bleed-mask" box-shadow
+ * ring and a continuous rounded border frame) so feed content that bleeds into
+ * the rounded corners / lateral gutters is masked while a single seamless border
+ * is drawn around the panel — see `index.web.tsx`.
+ *
+ * On NATIVE none of that applies: there is no document scroll, no sticky
+ * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
+ * surface wrapping its content. The `framed` and `showStickyFrame` props are
+ * accepted for cross-platform API parity but are intentionally no-ops here
+ * (mirroring the no-op native fork of `../scroll`).
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below must
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` (and the
+ * native `src/**`) picks them up.
+ */
+import React, { memo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+/**
+ * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
+ * cross-platform API parity (it has no effect on native).
+ */
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) of the framed panel chrome. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+
+export interface ContentPanelProps {
+  children: React.ReactNode;
+  /**
+   * Whether the panel is framed (wide screens) or full-bleed (narrow screens).
+   * No-op on native — the surface is always a rounded, bordered View.
+   */
+  framed: boolean;
+  /** Override the surface background utility (defaults to `bg-card`). */
+  surfaceClassName?: string;
+  surfaceStyle?: StyleProp<ViewStyle>;
+  /** Extra utilities for the inner content wrapper. */
+  contentClassName?: string;
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Whether to render the WEB sticky border frame. No-op on native (the border
+   * 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> = ({
+  children,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle,
+}) => {
+  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 (
+    <View
+      {...({ className: surfaceClass } as Record<string, string>)}
+      style={surfaceStyle}
+    >
+      <View
+        {...({ className: contentClass } as Record<string, string>)}
+        style={contentStyle}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export const ContentPanel = memo(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';

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

@@ -0,0 +1,144 @@
+/**
+ * Web variant of `ContentPanel` — the framed app-content surface.
+ *
+ * On the web, app content scrolls the DOCUMENT, and a multi-column shell keeps
+ * the routed content in a rounded, bordered center panel. Two problems follow
+ * from letting feed content bleed to the rounded panel edge, both solved here
+ * with sticky, full-viewport-height overlays inside the panel surface:
+ *
+ *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
+ *     (Bloom `background` token) drawn OVER content that bleeds into the thin
+ *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
+ *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     so it only masks the content's bleed, never the chrome. No border.
+ *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *
+ *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
+ *     outline with a transparent interior, ABOVE all content. Being one element
+ *     above everything, it draws ONE continuous rounded border around all four
+ *     sides — no seams, no double lines, no per-chrome borders.
+ *
+ * Both overlays are `position: sticky; top: 8px` with a negative
+ * `margin-bottom` so they occupy zero layout height (they overlay the scrolled
+ * content rather than displacing it). They render BEFORE the content wrapper so
+ * z-index — not DOM order — decides layering.
+ *
+ * When `framed` is false (narrow screens) the panel is full-bleed: a single
+ * flat surface, no rounding, no overlays.
+ *
+ * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
+ * select this file via the `"browser"` export condition in `package.json`.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below MUST
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
+ * parts).
+ */
+import React, { memo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+
+/** Width (in px) of the sticky gutter-mask box-shadow ring. */
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) the framed panel chrome pins to. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+
+export interface ContentPanelProps {
+  children: React.ReactNode;
+  /** Framed (wide screens) vs full-bleed (narrow screens). */
+  framed: boolean;
+  /** Override the surface background utility (defaults to `bg-card`). */
+  surfaceClassName?: string;
+  surfaceStyle?: StyleProp<ViewStyle>;
+  /** Extra utilities for the inner content wrapper. */
+  contentClassName?: string;
+  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> = ({
+  children,
+  framed,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle,
+  showStickyFrame,
+  maskColor,
+}) => {
+  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 (
+      <View
+        {...({ className: fullBleedClass } as Record<string, string>)}
+        style={[surfaceStyle, contentStyle]}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  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 (
+    <View
+      {...({ 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-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
+        } as Record<string, string>)}
+        style={{ boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}` }}
+      />
+      {/* (2) Border-frame overlay — one continuous rounded border, above all. */}
+      {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>
+  );
+};
+
+export const ContentPanel = memo(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';