@oxy.so/bloom 2.10.0 → 2.12.0

package/lib/module/chat-screen/ChatBackground.js

@@ -0,0 +1,185 @@
+"use strict";
+
+import React, { memo, useId } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Path, Pattern, Rect, Stop } from 'react-native-svg';
+import { CHAT_PATTERN_GLYPHS, CHAT_PATTERN_TILE, DEFAULT_PATTERN_OPACITY, useChatScreenPaint, useResolvedImageSource } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The repeated-glyph wallpaper, as ONE `<Pattern>` tile the renderer repeats.
+ *
+ * The glyphs are stroked, not filled, and written directly in tile coordinates —
+ * `react-native-svg`'s per-element transform props are deprecated and the string
+ * form has to agree across two renderers, so nothing here is placed by a
+ * transform.
+ *
+ * The ink is a neutral ramp step, never the accent: an accent-tinted wallpaper
+ * competes with the outgoing bubble, which IS the accent.
+ */
+function PatternLayer({
+  paint,
+  tint,
+  opacity
+}) {
+  // One id per instance. Two wallpapers on one page (a split layout showing two
+  // conversations) would otherwise both resolve `url(#chat-pattern)` to whichever
+  // `<Defs>` the document happened to parse last.
+  const id = `chat-pattern-${useId().replace(/[^A-Za-z0-9-]/g, '')}`;
+  const ink = tint ?? paint.patternTint;
+  return (
+    /*#__PURE__*/
+    // The `testID` sits on a View, not on the `<Svg>`: an SVG host element is not
+    // a react-native-web View, so `testID` reaches it as a lowercase DOM
+    // attribute and never becomes `data-testid`.
+    _jsx(View, {
+      pointerEvents: "none",
+      testID: "chat-background-pattern",
+      style: StyleSheet.absoluteFillObject,
+      children: /*#__PURE__*/_jsxs(Svg, {
+        style: StyleSheet.absoluteFillObject,
+        width: "100%",
+        height: "100%",
+        children: [/*#__PURE__*/_jsx(Defs, {
+          children: /*#__PURE__*/_jsx(Pattern, {
+            id: id,
+            x: 0,
+            y: 0,
+            width: CHAT_PATTERN_TILE,
+            height: CHAT_PATTERN_TILE,
+            patternUnits: "userSpaceOnUse",
+            children: CHAT_PATTERN_GLYPHS.map((d, i) => /*#__PURE__*/_jsx(Path, {
+              d: d,
+              fill: "none",
+              stroke: ink,
+              strokeOpacity: opacity,
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }, i))
+          })
+        }), /*#__PURE__*/_jsx(Rect, {
+          x: 0,
+          y: 0,
+          width: "100%",
+          height: "100%",
+          fill: `url(#${id})`
+        })]
+      })
+    })
+  );
+}
+function GradientLayer({
+  colors
+}) {
+  const id = `chat-gradient-${useId().replace(/[^A-Za-z0-9-]/g, '')}`;
+  const last = colors.length - 1;
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    testID: "chat-background-gradient",
+    style: StyleSheet.absoluteFillObject,
+    children: /*#__PURE__*/_jsxs(Svg, {
+      style: StyleSheet.absoluteFillObject,
+      width: "100%",
+      height: "100%",
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsx(LinearGradient, {
+          id: id,
+          x1: "0",
+          y1: "0",
+          x2: "0.35",
+          y2: "1",
+          children: colors.map((color, i) =>
+          /*#__PURE__*/
+          // Opaque stops only: react-native-svg DISCARDS the alpha inside
+          // `stopColor`, so an `rgba()` token here renders correctly on web
+          // and opaque on native — the wallpaper would differ per platform
+          // with nothing to say so.
+          _jsx(Stop, {
+            offset: last === 0 ? 0 : i / last,
+            stopColor: color
+          }, i))
+        })
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: 0,
+        y: 0,
+        width: "100%",
+        height: "100%",
+        fill: `url(#${id})`
+      })]
+    })
+  });
+}
+
+/**
+ * The wallpaper behind the transcript, and the container the transcript sits in.
+ *
+ * Four variants, all of them OPAQUE from the page colour up, so a bubble drawn
+ * over any of them is composited over a known colour rather than over whatever
+ * the app's own background happens to be.
+ *
+ * WHY THE IMAGE DIM IS NOT OPTIONAL: a consumer photo has no knowable extremes,
+ * so nothing can be proven about a bubble's separation from it. Dimming toward a
+ * fixed neutral (a mid-light step in light, near-black in dark) at a fixed
+ * opacity gives the wallpaper a measurable lightest and darkest pixel — see
+ * `chatBackgroundExtremes` and the measured table in `docs/chat-screen.mdx`.
+ * Dimming toward pure WHITE was the first attempt and it is the bug: the
+ * wallpaper's brightest reachable pixel then lands exactly on the card colour, so
+ * a white incoming bubble over a bright photo separates by 1.00. Lowering
+ * `overlayOpacity` is a legibility decision, not a taste one.
+ *
+ * Bubble text is unaffected by any of this: a bubble is an opaque fill, so its
+ * own label contrast is a property of the bubble, not of what is behind it. What
+ * the wallpaper CAN do is stop the bubble being told apart from the page.
+ */
+function ChatBackgroundComponent({
+  variant = 'plain',
+  source,
+  overlayOpacity,
+  tint,
+  patternOpacity = DEFAULT_PATTERN_OPACITY,
+  colors,
+  children,
+  style,
+  testID
+}) {
+  const paint = useChatScreenPaint();
+  const image = useResolvedImageSource(source, 'large');
+  const dim = overlayOpacity ?? paint.imageDimOpacity;
+  const gradientColors = colors ?? [...paint.gradient];
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [{
+      flex: 1,
+      overflow: 'hidden',
+      backgroundColor: paint.page
+    }, style],
+    children: [variant === 'pattern' ? /*#__PURE__*/_jsx(PatternLayer, {
+      paint: paint,
+      tint: tint,
+      opacity: patternOpacity
+    }) : null, variant === 'gradient' ? /*#__PURE__*/_jsx(GradientLayer, {
+      colors: gradientColors
+    }) : null, variant === 'image' && image ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Image, {
+        source: image,
+        resizeMode: "cover",
+        accessibilityIgnoresInvertColors: true,
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        testID: "chat-background-image",
+        style: StyleSheet.absoluteFillObject
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        testID: "chat-background-dim",
+        style: [StyleSheet.absoluteFillObject, {
+          backgroundColor: paint.imageDim,
+          opacity: dim
+        }]
+      })]
+    }) : null, children]
+  });
+}
+export const ChatBackground = /*#__PURE__*/memo(ChatBackgroundComponent);
+ChatBackground.displayName = 'ChatBackground';
+//# sourceMappingURL=ChatBackground.js.map

package/lib/module/chat-screen/ChatBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useId","Image","StyleSheet","View","Svg","Defs","LinearGradient","Path","Pattern","Rect","Stop","CHAT_PATTERN_GLYPHS","CHAT_PATTERN_TILE","DEFAULT_PATTERN_OPACITY","useChatScreenPaint","useResolvedImageSource","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PatternLayer","paint","tint","opacity","id","replace","ink","patternTint","pointerEvents","testID","style","absoluteFillObject","children","width","height","x","y","patternUnits","map","d","i","fill","stroke","strokeOpacity","strokeWidth","strokeLinecap","strokeLinejoin","GradientLayer","colors","last","length","x1","y1","x2","y2","color","offset","stopColor","ChatBackgroundComponent","variant","source","overlayOpacity","patternOpacity","image","dim","imageDimOpacity","gradientColors","gradient","flex","overflow","backgroundColor","page","resizeMode","accessibilityIgnoresInvertColors","accessibilityElementsHidden","importantForAccessibility","imageDim","ChatBackground","displayName"],"sourceRoot":"../../../src","sources":["chat-screen/ChatBackground.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chat-screen/ChatDateHeader.js

@@ -0,0 +1,94 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { Text } from "../typography/index.js";
+import { useChatScreenPaint } from "./shared.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The date pill that hovers over the transcript.
+ *
+ * `label` is PRE-FORMATTED — "Today", "Yesterday", "14 March". Nothing here
+ * reads a clock, and nothing here decides what "today" means in the reader's
+ * timezone.
+ *
+ * `visible={false}` fades the pill to nothing and hides it from assistive tech
+ * rather than unmounting it — unlike the jump buttons, this control is not
+ * focusable, so there is no phantom tab stop to worry about, and keeping it
+ * mounted stops the label re-announcing every time a scroll crosses a day
+ * boundary. Hiding is `opacity`, never `display: none`: collapsing an element
+ * inside a scroller is how a restored scroll offset gets clamped to 0.
+ *
+ * `floating` (the default) positions itself over the transcript, so the pill is
+ * `pointerEvents="none"` inside a `box-none` wrapper — a strip across the top of
+ * a conversation that swallowed taps would eat every press on the newest
+ * messages. Both are PROPS, not style entries: react-native-web drops
+ * `pointerEvents` given as a style.
+ */
+function ChatDateHeaderComponent({
+  label,
+  visible = true,
+  placement = 'floating',
+  offset = 8,
+  style,
+  textStyle,
+  testID
+}) {
+  const paint = useChatScreenPaint();
+  const pill = {
+    alignSelf: 'center',
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 4,
+    paddingBottom: 4,
+    borderRadius: 999,
+    backgroundColor: paint.floatingSurface,
+    borderWidth: 1,
+    borderColor: paint.floatingBorder,
+    boxShadow: paint.floatingShadow,
+    opacity: visible ? 1 : 0
+  };
+  const pillNode = /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    "aria-hidden": visible ? undefined : true,
+    accessibilityElementsHidden: !visible,
+    importantForAccessibility: visible ? 'yes' : 'no-hide-descendants',
+    testID: testID ? `${testID}-pill` : undefined,
+    style: pill,
+    children: /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-medium",
+      numberOfLines: 1,
+      style: [{
+        color: paint.textSecondary
+      }, textStyle],
+      children: label
+    })
+  });
+  if (placement === 'inline') {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: [{
+        alignItems: 'center',
+        paddingTop: 8,
+        paddingBottom: 8
+      }, style],
+      children: pillNode
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    testID: testID,
+    style: [{
+      position: 'absolute',
+      top: offset,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+      zIndex: 1
+    }, style],
+    children: pillNode
+  });
+}
+export const ChatDateHeader = /*#__PURE__*/memo(ChatDateHeaderComponent);
+ChatDateHeader.displayName = 'ChatDateHeader';
+//# sourceMappingURL=ChatDateHeader.js.map

package/lib/module/chat-screen/ChatDateHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","View","Text","useChatScreenPaint","jsx","_jsx","ChatDateHeaderComponent","label","visible","placement","offset","style","textStyle","testID","paint","pill","alignSelf","paddingLeft","paddingRight","paddingTop","paddingBottom","borderRadius","backgroundColor","floatingSurface","borderWidth","borderColor","floatingBorder","boxShadow","floatingShadow","opacity","pillNode","pointerEvents","undefined","accessibilityElementsHidden","importantForAccessibility","children","variant","numberOfLines","color","textSecondary","alignItems","position","top","left","right","zIndex","ChatDateHeader","displayName"],"sourceRoot":"../../../src","sources":["chat-screen/ChatDateHeader.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,QAAQ,cAAc;AAGnC,SAASC,IAAI,QAAQ,wBAAe;AACpC,SAASC,kBAAkB,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAC;EAC/BC,KAAK;EACLC,OAAO,GAAG,IAAI;EACdC,SAAS,GAAG,UAAU;EACtBC,MAAM,GAAG,CAAC;EACVC,KAAK;EACLC,SAAS;EACTC;AACmB,CAAC,EAAE;EACtB,MAAMC,KAAK,GAAGX,kBAAkB,CAAC,CAAC;EAElC,MAAMY,IAAiB,GAAG;IACxBC,SAAS,EAAE,QAAQ;IACnBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE,GAAG;IACjBC,eAAe,EAAER,KAAK,CAACS,eAAe;IACtCC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEX,KAAK,CAACY,cAAc;IACjCC,SAAS,EAAEb,KAAK,CAACc,cAAc;IAC/BC,OAAO,EAAErB,OAAO,GAAG,CAAC,GAAG;EACzB,CAAC;EAED,MAAMsB,QAAQ,gBACZzB,IAAA,CAACJ,IAAI;IACH8B,aAAa,EAAC,MAAM;IACpB,eAAavB,OAAO,GAAGwB,SAAS,GAAG,IAAK;IACxCC,2BAA2B,EAAE,CAACzB,OAAQ;IACtC0B,yBAAyB,EAAE1B,OAAO,GAAG,KAAK,GAAG,qBAAsB;IACnEK,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAGmB,SAAU;IAC9CrB,KAAK,EAAEI,IAAK;IAAAoB,QAAA,eAEZ9B,IAAA,CAACH,IAAI;MACHkC,OAAO,EAAC,kBAAkB;MAC1BC,aAAa,EAAE,CAAE;MACjB1B,KAAK,EAAE,CAAC;QAAE2B,KAAK,EAAExB,KAAK,CAACyB;MAAc,CAAC,EAAE3B,SAAS,CAAE;MAAAuB,QAAA,EAElD5B;IAAK,CACF;EAAC,CACH,CACP;EAED,IAAIE,SAAS,KAAK,QAAQ,EAAE;IAC1B,oBACEJ,IAAA,CAACJ,IAAI;MACHY,MAAM,EAAEA,MAAO;MACfF,KAAK,EAAE,CAAC;QAAE6B,UAAU,EAAE,QAAQ;QAAErB,UAAU,EAAE,CAAC;QAAEC,aAAa,EAAE;MAAE,CAAC,EAAET,KAAK,CAAE;MAAAwB,QAAA,EAEzEL;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEzB,IAAA,CAACJ,IAAI;IACH8B,aAAa,EAAC,UAAU;IACxBlB,MAAM,EAAEA,MAAO;IACfF,KAAK,EAAE,CACL;MAAE8B,QAAQ,EAAE,UAAU;MAAEC,GAAG,EAAEhC,MAAM;MAAEiC,IAAI,EAAE,CAAC;MAAEC,KAAK,EAAE,CAAC;MAAEJ,UAAU,EAAE,QAAQ;MAAEK,MAAM,EAAE;IAAE,CAAC,EACzFlC,KAAK,CACL;IAAAwB,QAAA,EAEDL;EAAQ,CACL,CAAC;AAEX;AAEA,OAAO,MAAMgB,cAAc,gBAAG9C,IAAI,CAACM,uBAAuB,CAAC;AAC3DwC,cAAc,CAACC,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/lib/module/chat-screen/ChatEmptyState.js

@@ -0,0 +1,110 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { RiLock2Line } from "../icons/remix/RiLock2Line.js";
+import { Text } from "../typography/index.js";
+import { CHAT_SCREEN_LABELS, useChatScreenPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What a conversation with nothing in it shows.
+ *
+ * THE NOTICE HAS NO DEFAULT, and that is the point. "Messages are end-to-end
+ * encrypted" is a claim about an app's transport, not about a component — a
+ * default would make it on behalf of every app that mounts this, including the
+ * ones that cannot keep it. Pass the wording you can stand behind, or pass
+ * nothing and the line is not drawn.
+ *
+ * The title DOES default ("No messages yet"), because an empty transcript is a
+ * fact this component can see for itself.
+ */
+function ChatEmptyStateComponent({
+  title = CHAT_SCREEN_LABELS.emptyTitle,
+  description,
+  illustration,
+  notice,
+  noticeIcon,
+  action,
+  style,
+  testID
+}) {
+  const paint = useChatScreenPaint();
+  const NoticeIcon = noticeIcon === false ? null : noticeIcon ?? RiLock2Line;
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [{
+      flexGrow: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 16,
+      paddingLeft: 24,
+      paddingRight: 24,
+      paddingTop: 32,
+      paddingBottom: 32
+    }, style],
+    children: [illustration ? /*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-illustration` : undefined,
+      children: illustration
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        gap: 6,
+        maxWidth: 360
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "headline-semibold",
+        accessibilityRole: "header",
+        style: {
+          color: paint.text,
+          textAlign: 'center'
+        },
+        children: title
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-regular",
+        style: {
+          color: paint.textSecondary,
+          textAlign: 'center'
+        },
+        children: description
+      }) : null]
+    }), notice ? /*#__PURE__*/_jsxs(View, {
+      testID: testID ? `${testID}-notice` : undefined,
+      style: {
+        flexDirection: 'row',
+        // `alignSelf` so the pill hugs its text; `flex-start` on the cross
+        // axis so a wrapped second line still sits under the first rather
+        // than the glyph drifting to the middle of two lines.
+        alignSelf: 'center',
+        alignItems: 'flex-start',
+        gap: 6,
+        maxWidth: 340,
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderRadius: 12,
+        backgroundColor: paint.surfaceSubtle
+      },
+      children: [NoticeIcon ? /*#__PURE__*/_jsx(View, {
+        style: {
+          paddingTop: 1
+        },
+        children: /*#__PURE__*/_jsx(NoticeIcon, {
+          width: 14,
+          height: 14,
+          fill: paint.textSecondary
+        })
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-regular",
+        style: {
+          flexShrink: 1,
+          color: paint.textSecondary
+        },
+        children: notice
+      })]
+    }) : null, action]
+  });
+}
+export const ChatEmptyState = /*#__PURE__*/memo(ChatEmptyStateComponent);
+ChatEmptyState.displayName = 'ChatEmptyState';
+//# sourceMappingURL=ChatEmptyState.js.map

package/lib/module/chat-screen/ChatEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","View","RiLock2Line","Text","CHAT_SCREEN_LABELS","useChatScreenPaint","jsx","_jsx","jsxs","_jsxs","ChatEmptyStateComponent","title","emptyTitle","description","illustration","notice","noticeIcon","action","style","testID","paint","NoticeIcon","flexGrow","alignItems","justifyContent","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","children","undefined","maxWidth","variant","accessibilityRole","color","text","textAlign","textSecondary","flexDirection","alignSelf","borderRadius","backgroundColor","surfaceSubtle","width","height","fill","flexShrink","ChatEmptyState","displayName"],"sourceRoot":"../../../src","sources":["chat-screen/ChatEmptyState.tsx"],"mappings":"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","ignoreList":[]}