@oxy.so/bloom 5.1.0 → 5.1.1

package/lib/commonjs/chat-composer/create-composer-banner.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createComposerBanner = createComposerBanner;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _RiCloseLine = require("../icons/remix/RiCloseLine.js");
+var _context = require("../image-resolver/context.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _shared = require("./shared.js");
+var _commonMessages = require("../locale/common-messages.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * The stack above the input: a reply / edit / forward preview, or the one-line
+ * `note` a slow-mode countdown and a scheduled send use.
+ *
+ * Every banner is the same row — rail, glyph, optional thumbnail, two lines of
+ * text, a close button — because they are the same affordance ("the next
+ * message is about THIS, and here is how to get out of it"). `note` drops the
+ * rail and the surface, which is the difference between "you are in a mode" and
+ * "here is a fact about sending".
+ */
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+function createComposerBanner({
+  ComposerIconButton
+}) {
+  /** A URL passes through; a bare id goes to the app's `ImageResolver`. */
+  function isUrl(value) {
+    return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
+  }
+  function ComposerBanner({
+    kind,
+    title,
+    preview,
+    thumbnail,
+    icon,
+    accentColor,
+    onClose,
+    closeLabel: closeLabelProp,
+    trailing,
+    style,
+    testID,
+    accessibilityLabel
+  }) {
+    const common = (0, _commonMessages.useCommonMessages)();
+    const closeLabel = closeLabelProp ?? common.cancel;
+    const theme = (0, _useTheme.useTheme)();
+    const palette = (0, _shared.resolveChatComposerPalette)(theme);
+    const resolveImage = (0, _context.useImageResolver)();
+    const Icon = icon ?? _shared.BANNER_ICONS[kind];
+    const accent = accentColor ?? palette.accent;
+    const note = kind === 'note';
+    const thumbUri = thumbnail === undefined ? undefined : isUrl(thumbnail) ? thumbnail : resolveImage?.(thumbnail, 'thumb');
+    if (note) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        accessibilityRole: "text",
+        accessibilityLabel: accessibilityLabel ?? (preview ? `${title}. ${preview}` : title),
+        style: [{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          paddingLeft: 10,
+          paddingRight: 6,
+          paddingTop: 2,
+          paddingBottom: 2
+        }, style],
+        testID: testID,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          width: 14,
+          height: 14,
+          fill: palette.iconSecondary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: palette.textSecondary,
+            flexShrink: 1
+          },
+          children: title
+        }), preview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: palette.textPlaceholder,
+            flexShrink: 1
+          },
+          children: preview
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexGrow: 1
+          }
+        }), trailing, onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ComposerIconButton, {
+          icon: _RiCloseLine.RiCloseLine,
+          accessibilityLabel: closeLabel,
+          onPress: onClose,
+          size: 24,
+          iconSize: 14
+        }) : null]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      accessibilityLabel: accessibilityLabel ?? (preview ? `${title}. ${preview}` : title),
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        borderRadius: _shared.BANNER_RADIUS,
+        backgroundColor: palette.accentSoft,
+        paddingLeft: 8,
+        paddingRight: 4,
+        paddingTop: 6,
+        paddingBottom: 6
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        testID: testID ? `${testID}-rail` : undefined,
+        style: {
+          width: _shared.BANNER_RAIL_WIDTH,
+          alignSelf: 'stretch',
+          minHeight: 32,
+          borderRadius: 2,
+          backgroundColor: accent
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        width: 18,
+        height: 18,
+        fill: accent
+      }), thumbUri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: {
+          uri: thumbUri
+        },
+        accessibilityIgnoresInvertColors: true,
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 8,
+          backgroundColor: palette.inset
+        }
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexShrink: 1,
+          flexGrow: 1,
+          gap: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "body-2-medium",
+          numberOfLines: 1,
+          style: {
+            color: accent
+          },
+          children: title
+        }), preview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "body-2-regular",
+          numberOfLines: 1,
+          style: {
+            color: palette.textSecondary
+          },
+          children: preview
+        }) : null]
+      }), trailing, onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ComposerIconButton, {
+        icon: _RiCloseLine.RiCloseLine,
+        accessibilityLabel: closeLabel,
+        onPress: onClose,
+        size: 28,
+        iconSize: 16
+      }) : null]
+    });
+  }
+  return ComposerBanner;
+}
+//# sourceMappingURL=create-composer-banner.js.map

package/lib/commonjs/chat-composer/create-composer-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_RiCloseLine","_context","_useTheme","_index","_shared","_commonMessages","_jsxRuntime","e","__esModule","default","createComposerBanner","ComposerIconButton","isUrl","value","test","startsWith","ComposerBanner","kind","title","preview","thumbnail","icon","accentColor","onClose","closeLabel","closeLabelProp","trailing","style","testID","accessibilityLabel","common","useCommonMessages","cancel","theme","useTheme","palette","resolveChatComposerPalette","resolveImage","useImageResolver","Icon","BANNER_ICONS","accent","note","thumbUri","undefined","jsxs","View","accessibilityRole","flexDirection","alignItems","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","children","jsx","width","height","fill","iconSecondary","Text","variant","numberOfLines","color","textSecondary","flexShrink","textPlaceholder","flexGrow","RiCloseLine","onPress","size","iconSize","borderRadius","BANNER_RADIUS","backgroundColor","accentSoft","BANNER_RAIL_WIDTH","alignSelf","minHeight","Image","source","uri","accessibilityIgnoresInvertColors","inset"],"sourceRoot":"../../../src","sources":["chat-composer/create-composer-banner.tsx"],"mappings":";;;;;;AAUA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,OAAA,GAAAN,OAAA;AAOA,IAAAO,eAAA,GAAAP,OAAA;AAA8D,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAzB9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA;AACO,SAASG,oBAAoBA,CAAC;EAAEC;AAEvC,CAAC,EAAE;EAED;EACA,SAASC,KAAKA,CAACC,KAAa,EAAW;IACrC,OAAO,iBAAiB,CAACC,IAAI,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,UAAU,CAAC,OAAO,CAAC,IAAIF,KAAK,CAACE,UAAU,CAAC,OAAO,CAAC;EAChG;EAEA,SAASC,cAAcA,CAAC;IACtBC,IAAI;IACJC,KAAK;IACLC,OAAO;IACPC,SAAS;IACTC,IAAI;IACJC,WAAW;IACXC,OAAO;IACPC,UAAU,EAAEC,cAAc;IAC1BC,QAAQ;IACRC,KAAK;IACLC,MAAM;IACNC;EACmB,CAAC,EAAE;IACtB,MAAMC,MAAM,GAAG,IAAAC,iCAAiB,EAAC,CAAC;IAClC,MAAMP,UAAU,GAAGC,cAAc,IAAIK,MAAM,CAACE,MAAM;IAClD,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;IACxB,MAAMC,OAAO,GAAG,IAAAC,kCAA0B,EAACH,KAAK,CAAC;IACjD,MAAMI,YAAY,GAAG,IAAAC,yBAAgB,EAAC,CAAC;IACvC,MAAMC,IAAI,GAAGlB,IAAI,IAAImB,oBAAY,CAACvB,IAAI,CAAC;IACvC,MAAMwB,MAAM,GAAGnB,WAAW,IAAIa,OAAO,CAACM,MAAM;IAC5C,MAAMC,IAAI,GAAGzB,IAAI,KAAK,MAAM;IAE5B,MAAM0B,QAAQ,GACZvB,SAAS,KAAKwB,SAAS,GAAGA,SAAS,GAAGhC,KAAK,CAACQ,SAAS,CAAC,GAAGA,SAAS,GAAGiB,YAAY,GAAGjB,SAAS,EAAE,OAAO,CAAC;IAEzG,IAAIsB,IAAI,EAAE;MACR,oBACE,IAAApC,WAAA,CAAAuC,IAAA,EAAC9C,YAAA,CAAA+C,IAAI;QACHC,iBAAiB,EAAC,MAAM;QACxBlB,kBAAkB,EAAEA,kBAAkB,KAAKV,OAAO,GAAG,GAAGD,KAAK,KAAKC,OAAO,EAAE,GAAGD,KAAK,CAAE;QACrFS,KAAK,EAAE,CACL;UACEqB,aAAa,EAAE,KAAK;UACpBC,UAAU,EAAE,QAAQ;UACpBC,GAAG,EAAE,CAAC;UACNC,WAAW,EAAE,EAAE;UACfC,YAAY,EAAE,CAAC;UACfC,UAAU,EAAE,CAAC;UACbC,aAAa,EAAE;QACjB,CAAC,EACD3B,KAAK,CACL;QACFC,MAAM,EAAEA,MAAO;QAAA2B,QAAA,gBACf,IAAAjD,WAAA,CAAAkD,GAAA,EAACjB,IAAI;UAACkB,KAAK,EAAE,EAAG;UAACC,MAAM,EAAE,EAAG;UAACC,IAAI,EAAExB,OAAO,CAACyB;QAAc,CAAE,CAAC,eAC5D,IAAAtD,WAAA,CAAAkD,GAAA,EAACrD,MAAA,CAAA0D,IAAI;UAACC,OAAO,EAAC,mBAAmB;UAACC,aAAa,EAAE,CAAE;UAACpC,KAAK,EAAE;YAAEqC,KAAK,EAAE7B,OAAO,CAAC8B,aAAa;YAAEC,UAAU,EAAE;UAAE,CAAE;UAAAX,QAAA,EACxGrC;QAAK,CACF,CAAC,EACNC,OAAO,gBACN,IAAAb,WAAA,CAAAkD,GAAA,EAACrD,MAAA,CAAA0D,IAAI;UAACC,OAAO,EAAC,mBAAmB;UAACC,aAAa,EAAE,CAAE;UAACpC,KAAK,EAAE;YAAEqC,KAAK,EAAE7B,OAAO,CAACgC,eAAe;YAAED,UAAU,EAAE;UAAE,CAAE;UAAAX,QAAA,EAC1GpC;QAAO,CACJ,CAAC,GACL,IAAI,eACR,IAAAb,WAAA,CAAAkD,GAAA,EAACzD,YAAA,CAAA+C,IAAI;UAACnB,KAAK,EAAE;YAAEyC,QAAQ,EAAE;UAAE;QAAE,CAAE,CAAC,EAC/B1C,QAAQ,EACRH,OAAO,gBACN,IAAAjB,WAAA,CAAAkD,GAAA,EAAC7C,kBAAkB;UACjBU,IAAI,EAAEgD,wBAAY;UAClBxC,kBAAkB,EAAEL,UAAW;UAC/B8C,OAAO,EAAE/C,OAAQ;UACjBgD,IAAI,EAAE,EAAG;UACTC,QAAQ,EAAE;QAAG,CACd,CAAC,GACA,IAAI;MAAA,CACJ,CAAC;IAEX;IAEA,oBACE,IAAAlE,WAAA,CAAAuC,IAAA,EAAC9C,YAAA,CAAA+C,IAAI;MACHjB,kBAAkB,EAAEA,kBAAkB,KAAKV,OAAO,GAAG,GAAGD,KAAK,KAAKC,OAAO,EAAE,GAAGD,KAAK,CAAE;MACrFS,KAAK,EAAE,CACL;QACEqB,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAE,QAAQ;QACpBC,GAAG,EAAE,EAAE;QACPuB,YAAY,EAAEC,qBAAa;QAC3BC,eAAe,EAAExC,OAAO,CAACyC,UAAU;QACnCzB,WAAW,EAAE,CAAC;QACdC,YAAY,EAAE,CAAC;QACfC,UAAU,EAAE,CAAC;QACbC,aAAa,EAAE;MACjB,CAAC,EACD3B,KAAK,CACL;MACFC,MAAM,EAAEA,MAAO;MAAA2B,QAAA,gBACf,IAAAjD,WAAA,CAAAkD,GAAA,EAACzD,YAAA,CAAA+C,IAAI;QACHlB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAGgB,SAAU;QAC9CjB,KAAK,EAAE;UACL8B,KAAK,EAAEoB,yBAAiB;UACxBC,SAAS,EAAE,SAAS;UACpBC,SAAS,EAAE,EAAE;UACbN,YAAY,EAAE,CAAC;UACfE,eAAe,EAAElC;QACnB;MAAE,CACH,CAAC,eACF,IAAAnC,WAAA,CAAAkD,GAAA,EAACjB,IAAI;QAACkB,KAAK,EAAE,EAAG;QAACC,MAAM,EAAE,EAAG;QAACC,IAAI,EAAElB;MAAO,CAAE,CAAC,EAC5CE,QAAQ,gBACP,IAAArC,WAAA,CAAAkD,GAAA,EAACzD,YAAA,CAAAiF,KAAK;QACJC,MAAM,EAAE;UAAEC,GAAG,EAAEvC;QAAS,CAAE;QAC1BwC,gCAAgC;QAChCxD,KAAK,EAAE;UAAE8B,KAAK,EAAE,EAAE;UAAEC,MAAM,EAAE,EAAE;UAAEe,YAAY,EAAE,CAAC;UAAEE,eAAe,EAAExC,OAAO,CAACiD;QAAM;MAAE,CACnF,CAAC,GACA,IAAI,eACR,IAAA9E,WAAA,CAAAuC,IAAA,EAAC9C,YAAA,CAAA+C,IAAI;QAACnB,KAAK,EAAE;UAAEuC,UAAU,EAAE,CAAC;UAAEE,QAAQ,EAAE,CAAC;UAAElB,GAAG,EAAE;QAAE,CAAE;QAAAK,QAAA,gBAClD,IAAAjD,WAAA,CAAAkD,GAAA,EAACrD,MAAA,CAAA0D,IAAI;UAACC,OAAO,EAAC,eAAe;UAACC,aAAa,EAAE,CAAE;UAACpC,KAAK,EAAE;YAAEqC,KAAK,EAAEvB;UAAO,CAAE;UAAAc,QAAA,EACtErC;QAAK,CACF,CAAC,EACNC,OAAO,gBACN,IAAAb,WAAA,CAAAkD,GAAA,EAACrD,MAAA,CAAA0D,IAAI;UAACC,OAAO,EAAC,gBAAgB;UAACC,aAAa,EAAE,CAAE;UAACpC,KAAK,EAAE;YAAEqC,KAAK,EAAE7B,OAAO,CAAC8B;UAAc,CAAE;UAAAV,QAAA,EACtFpC;QAAO,CACJ,CAAC,GACL,IAAI;MAAA,CACJ,CAAC,EACNO,QAAQ,EACRH,OAAO,gBACN,IAAAjB,WAAA,CAAAkD,GAAA,EAAC7C,kBAAkB;QACjBU,IAAI,EAAEgD,wBAAY;QAClBxC,kBAAkB,EAAEL,UAAW;QAC/B8C,OAAO,EAAE/C,OAAQ;QACjBgD,IAAI,EAAE,EAAG;QACTC,QAAQ,EAAE;MAAG,CACd,CAAC,GACA,IAAI;IAAA,CACJ,CAAC;EAEX;EAEA,OAAOxD,cAAc;AACvB","ignoreList":[]}

package/lib/commonjs/chat-composer/create-emoji-picker.js

@@ -0,0 +1,456 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEmojiPicker = createEmojiPicker;
+var _useCardFill = require("../card/use-card-fill.js");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _RiEmotionLine = require("../icons/remix/RiEmotionLine.js");
+var _RiSearchLine = require("../icons/remix/RiSearchLine.js");
+var _useControllableState = require("../hooks/use-controllable-state.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _scale = require("../typography/scale.js");
+var _shared = require("./shared.js");
+var _webHooks = require("./web-hooks.js");
+var _messages = require("../locale/messages.js");
+var _messages2 = require("./messages.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); }
+/**
+ * A controlled, presentational emoji grid.
+ *
+ * BLOOM SHIPS NO EMOJI DATASET, and that is the design rather than an omission:
+ * a full set with names and keywords is tens of kilobytes that every app with
+ * its own would still pay for, and emoji names are localised. `groups` arrives
+ * as a prop. The object form of an entry (`{ char, name, keywords }`) is what
+ * the built-in search matches on; a dataset of bare glyphs still renders, it
+ * just only matches a pasted glyph — which is the honest behaviour, not a
+ * silent one.
+ *
+ * The grid is a `FlatList` on BOTH platforms, over pre-chunked ROWS rather than
+ * single emoji, with exact `getItemLayout` offsets. A few thousand entries is
+ * the normal case: at eight columns that is a few hundred rows, of which a
+ * dozen are mounted, and the exact offsets are what let a category tab jump
+ * straight to its header instead of estimating.
+ */
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+function createEmojiPicker({
+  Surface,
+  Button
+}) {
+  const HEADER_HEIGHT = 26;
+  const EMOJI_TAB = '__emoji';
+  function chunk(entries, columns) {
+    const out = [];
+    for (let i = 0; i < entries.length; i += columns) out.push(entries.slice(i, i + columns));
+    return out;
+  }
+  function entryName(entry, char) {
+    return typeof entry === 'string' ? char : entry.name ?? char;
+  }
+  function EmojiPicker({
+    groups,
+    onSelectEmoji,
+    activeGroup,
+    defaultActiveGroup,
+    onActiveGroupChange,
+    query,
+    defaultQuery = '',
+    onQueryChange,
+    filter = true,
+    frequentlyUsed,
+    skinTone,
+    defaultSkinTone = 0,
+    onSkinToneChange,
+    columns = 8,
+    height = 288,
+    tabs,
+    activeTab,
+    onActiveTabChange,
+    labels: labelOverrides,
+    style,
+    testID,
+    accessibilityLabel: accessibilityLabelProp
+  }) {
+    const theme = (0, _useTheme.useTheme)();
+    const palette = (0, _shared.resolveChatComposerPalette)(theme, (0, _useCardFill.useCardFill)(style));
+    (0, _webHooks.useChatComposerWebCss)();
+    const {
+      messages
+    } = (0, _messages.useMessages)(_messages2.CHAT_COMPOSER_MESSAGES);
+    const accessibilityLabel = accessibilityLabelProp ?? messages.emojiPicker;
+    const labels = {
+      search: messages.searchEmoji,
+      empty: messages.noEmoji,
+      frequent: messages.frequentlyUsed,
+      skinTone: messages.skinTone,
+      emojiTab: messages.emoji,
+      ...labelOverrides
+    };
+    const [search, setSearch] = (0, _useControllableState.useControllableState)({
+      value: query,
+      defaultValue: defaultQuery,
+      onChange: onQueryChange
+    });
+    const [tone, setTone] = (0, _useControllableState.useControllableState)({
+      value: skinTone,
+      defaultValue: defaultSkinTone,
+      onChange: onSkinToneChange
+    });
+    const [category, setCategory] = (0, _useControllableState.useControllableState)({
+      value: activeGroup,
+      defaultValue: defaultActiveGroup ?? groups[0]?.key ?? '',
+      onChange: onActiveGroupChange
+    });
+    const [tab, setTab] = (0, _useControllableState.useControllableState)({
+      value: activeTab,
+      defaultValue: EMOJI_TAB,
+      onChange: onActiveTabChange
+    });
+    const [toneOpen, setToneOpen] = (0, _react.useState)(false);
+    const listRef = (0, _react.useRef)(null);
+    const visible = (0, _react.useMemo)(() => filter ? (0, _shared.filterEmojiGroups)(groups, search) : groups, [filter, groups, search]);
+    const {
+      rows,
+      offsets,
+      heights,
+      headerIndex
+    } = (0, _react.useMemo)(() => {
+      const all = [];
+      if (frequentlyUsed && frequentlyUsed.length > 0 && !search.trim()) {
+        all.push({
+          key: 'frequent',
+          label: labels.frequent,
+          emojis: frequentlyUsed
+        });
+      }
+      all.push(...visible);
+      const built = [];
+      const index = {};
+      for (const group of all) {
+        index[group.key] = built.length;
+        built.push({
+          kind: 'header',
+          key: `h-${group.key}`,
+          label: group.label
+        });
+        chunk(group.emojis, columns).forEach((entries, i) => built.push({
+          kind: 'emojis',
+          key: `${group.key}-${i}`,
+          entries
+        }));
+      }
+      const rowHeights = built.map(row => row.kind === 'header' ? HEADER_HEIGHT : _shared.EMOJI_CELL);
+      const rowOffsets = [];
+      let running = 0;
+      for (const h of rowHeights) {
+        rowOffsets.push(running);
+        running += h;
+      }
+      return {
+        rows: built,
+        offsets: rowOffsets,
+        heights: rowHeights,
+        headerIndex: index
+      };
+    }, [columns, frequentlyUsed, labels.frequent, search, visible]);
+    const jumpTo = (0, _react.useCallback)(key => {
+      setCategory(key);
+      const at = headerIndex[key];
+      if (at === undefined) return;
+      listRef.current?.scrollToOffset({
+        offset: offsets[at] ?? 0,
+        animated: true
+      });
+    }, [headerIndex, offsets, setCategory]);
+    const renderRow = (0, _react.useCallback)(({
+      item
+    }) => {
+      if (item.kind === 'header') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            height: HEADER_HEIGHT,
+            justifyContent: 'flex-end',
+            paddingLeft: 6
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            variant: "caption-1-medium",
+            style: {
+              color: palette.textSecondary
+            },
+            children: item.label
+          })
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          height: _shared.EMOJI_CELL
+        },
+        children: item.entries.map((entry, i) => {
+          const base = (0, _shared.emojiChar)(entry);
+          const char = (0, _shared.applySkinTone)(base, tone);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            appearance: "plain",
+            tone: "neutral",
+            accessibilityLabel: entryName(entry, char),
+            onPress: () => onSelectEmoji?.(char),
+            style: {
+              padding: 0,
+              minWidth: 0,
+              minHeight: 0,
+              flexShrink: 0,
+              width: _shared.EMOJI_CELL,
+              height: _shared.EMOJI_CELL,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 8
+            },
+            testID: testID ? `${testID}-emoji-${base}` : undefined,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+              variant: "title-2-regular",
+              children: char
+            })
+          }, `${base}-${i}`);
+        })
+      });
+    }, [onSelectEmoji, palette.textSecondary, testID, tone]);
+    const panel = {
+      borderRadius: _shared.PANEL_RADIUS,
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 8,
+      paddingRight: 8,
+      gap: 8,
+      '--bloom-chat-composer-ring': palette.focusRing
+    };
+    const topTabs = [{
+      key: EMOJI_TAB,
+      label: labels.emojiTab,
+      icon: _RiEmotionLine.RiEmotionLine
+    }, ...(tabs ?? [])];
+    const activeCustom = tabs?.find(t => t.key === tab);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, {
+      accessibilityLabel: accessibilityLabel,
+      style: [panel, style],
+      testID: testID,
+      children: [tabs && tabs.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        accessibilityRole: "tablist",
+        style: {
+          flexDirection: 'row',
+          gap: 4
+        },
+        testID: testID ? `${testID}-tabs` : undefined,
+        children: topTabs.map(entry => {
+          const selected = entry.key === tab;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            ...(0, _webHooks.dataHook)('bloomChatComposerRow'),
+            accessibilityRole: "tab",
+            accessibilityLabel: entry.label,
+            "aria-selected": selected,
+            accessibilityState: {
+              selected
+            },
+            onPress: () => setTab(entry.key),
+            style: {
+              flexGrow: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: 30,
+              borderRadius: 9999,
+              backgroundColor: selected ? palette.accentSoft : 'transparent'
+            },
+            testID: testID ? `${testID}-tab-${entry.key}` : undefined,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+              variant: "body-2-medium",
+              style: {
+                color: selected ? palette.accentStrong : palette.textSecondary
+              },
+              children: entry.label
+            })
+          }, entry.key);
+        })
+      }) : null, activeCustom ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          height
+        },
+        children: activeCustom.content
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: {
+              flexGrow: 1,
+              flexShrink: 1,
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 6,
+              height: 32,
+              borderRadius: 10,
+              backgroundColor: palette.inset,
+              paddingLeft: 8,
+              paddingRight: 8
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RiSearchLine.RiSearchLine, {
+              width: 16,
+              height: 16,
+              fill: palette.iconSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+              ...(0, _webHooks.dataHook)('bloomChatComposerInput'),
+              accessibilityLabel: labels.search,
+              placeholder: labels.search,
+              placeholderTextColor: palette.textPlaceholder,
+              value: search,
+              onChangeText: setSearch,
+              selectionColor: palette.accent,
+              style: {
+                flexGrow: 1,
+                flexShrink: 1,
+                padding: 0,
+                margin: 0,
+                ..._scale.TYPE_SCALE['body-2-regular'],
+                color: palette.text,
+                backgroundColor: 'transparent'
+              },
+              testID: testID ? `${testID}-search` : undefined
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            appearance: "plain",
+            tone: "neutral",
+            accessibilityLabel: labels.skinTone,
+            "aria-expanded": toneOpen,
+            onPress: () => setToneOpen(!toneOpen),
+            style: {
+              padding: 0,
+              minWidth: 0,
+              minHeight: 0,
+              flexShrink: 0,
+              width: 32,
+              height: 32,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 9999,
+              backgroundColor: toneOpen ? palette.hover : palette.inset
+            },
+            testID: testID ? `${testID}-skin-tone` : undefined,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+              variant: "body-regular",
+              children: _shared.SKIN_TONE_SWATCHES[tone] ?? _shared.SKIN_TONE_SWATCHES[0]
+            })
+          })]
+        }), toneOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            gap: 2,
+            justifyContent: 'flex-end'
+          },
+          testID: testID ? `${testID}-skin-tones` : undefined,
+          children: _shared.SKIN_TONE_SWATCHES.map((swatch, index) => {
+            const selected = index === tone;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+              appearance: "plain",
+              tone: "neutral",
+              accessibilityLabel: `${labels.skinTone} ${index + 1}`,
+              pressed: selected,
+              onPress: () => {
+                setTone(index);
+                setToneOpen(false);
+              },
+              style: {
+                padding: 0,
+                minWidth: 0,
+                minHeight: 0,
+                flexShrink: 0,
+                width: 30,
+                height: 30,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 9999,
+                backgroundColor: selected ? palette.accentSoft : 'transparent'
+              },
+              testID: testID ? `${testID}-skin-tone-${index}` : undefined,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+                variant: "body-regular",
+                children: swatch
+              })
+            }, index);
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          accessibilityRole: "tablist",
+          style: {
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+          },
+          testID: testID ? `${testID}-categories` : undefined,
+          children: groups.map(group => {
+            const selected = group.key === category;
+            const Glyph = group.icon ?? _shared.EMOJI_CATEGORY_ICONS[group.key] ?? _RiEmotionLine.RiEmotionLine;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+              ...(0, _webHooks.dataHook)('bloomChatComposerControl'),
+              accessibilityRole: "tab",
+              accessibilityLabel: group.label,
+              "aria-selected": selected,
+              accessibilityState: {
+                selected
+              },
+              onPress: () => jumpTo(group.key),
+              style: {
+                width: _shared.EMOJI_CATEGORY_SIZE,
+                height: _shared.EMOJI_CATEGORY_SIZE,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 9999,
+                backgroundColor: selected ? palette.accentSoft : 'transparent'
+              },
+              testID: testID ? `${testID}-category-${group.key}` : undefined,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Glyph, {
+                width: 18,
+                height: 18,
+                fill: selected ? palette.accentStrong : palette.iconSecondary
+              })
+            }, group.key);
+          })
+        }), rows.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            height,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            variant: "body-2-regular",
+            style: {
+              color: palette.textSecondary
+            },
+            children: labels.empty
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+          ref: listRef,
+          ...(0, _webHooks.dataHook)('bloomChatComposerScroll'),
+          data: rows,
+          keyExtractor: row => row.key,
+          renderItem: renderRow,
+          getItemLayout: (_data, index) => ({
+            length: heights[index] ?? _shared.EMOJI_CELL,
+            offset: offsets[index] ?? 0,
+            index
+          }),
+          style: {
+            height
+          },
+          showsVerticalScrollIndicator: false,
+          testID: testID ? `${testID}-grid` : undefined
+        })]
+      })]
+    });
+  }
+  return EmojiPicker;
+}
+//# sourceMappingURL=create-emoji-picker.js.map