@oxy.so/bloom 3.6.0 → 4.1.0

package/lib/module/mail-thread/MailMessage.js

@@ -0,0 +1,319 @@
+"use strict";
+
+import React, { useEffect, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { Avatar } from "../avatar/index.js";
+import { ButtonGroup, ButtonGroupItem } from "../button-group/index.js";
+import { Card } from "../card/index.js";
+import { useContainerWidth } from "../hooks/use-container-width.js";
+import { ComposerAttachmentStrip } from "../chat-composer/index.js";
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { RiAttachment2 } from "../icons/remix/RiAttachment2.js";
+import { RiCornerUpLeftLine } from "../icons/remix/RiCornerUpLeftLine.js";
+import { RiGroupLine } from "../icons/remix/RiGroupLine.js";
+import { RiShareForwardLine } from "../icons/remix/RiShareForwardLine.js";
+import { MailStar } from "../mail-list/parts.js";
+import { mailStrings, resolveMailPaint } from "../mail-list/shared.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MailAddressLine } from "./MailAddressLine.js";
+import { MailQuoteToggle } from "./MailQuoteToggle.js";
+import { MAIL_BODY_INSET, MAIL_THREAD_CSS, MAIL_THREAD_GEOMETRY, MAIL_THREAD_STYLE_ID, addressName, mailThreadStrings, replyLabelsFit } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One message in a thread, collapsed or open.
+ *
+ * COLLAPSED it is one line: who, the first words, and when. OPEN it grows a
+ * full header (the addresses, the full date), the body slot, the trimmed-content
+ * toggle, the attachments and the three replies.
+ *
+ * THE TWO STATES SHARE ONE HEADER ROW, and that is the whole reason the
+ * transition does not leave a gap. Both draw the same avatar at the same
+ * `paddingVertical` in the same leading column; the only thing that changes is
+ * what the text column holds and whether a body is drawn under it. A collapsed
+ * state written as its own compact row — its own padding, its own avatar size —
+ * is a row that jumps by a few pixels every time it opens, which reads as the
+ * list resettling rather than as the message opening.
+ *
+ * THE BODY IS A SLOT. This family renders no HTML and no rich text; a mail body
+ * is markup from a stranger and sanitising it is the app's decision, not a
+ * component's. What Bloom owns around it is the frame, the indent (the body
+ * starts under the NAME, not under the avatar) and the trimmed-content toggle.
+ *
+ * ACCESSIBILITY: the disclosure is a `button` carrying `aria-expanded` and the
+ * native `accessibilityState.expanded`, named "Expand message: <sender>" so a
+ * list of them is not eight identically-named buttons. The star, the overflow
+ * slot and the three replies are SIBLINGS of it, never children — a button
+ * inside a button is invalid, and the press target would be ambiguous.
+ */
+export function MailMessage({
+  sender,
+  to,
+  cc,
+  date,
+  time,
+  preview,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  unread = false,
+  starred = false,
+  onStarredChange,
+  attachments,
+  children,
+  trimmed,
+  onReply,
+  onReplyAll,
+  onForward,
+  menu,
+  strings,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const rowStrings = useMemo(() => mailStrings({
+    starred: text.starred,
+    star: text.star
+  }), [text.star, text.starred]);
+  const [open, setOpen] = useControllableState({
+    value: expanded,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange
+  });
+  const geo = MAIL_THREAD_GEOMETRY;
+  const {
+    width,
+    onLayout
+  } = useContainerWidth();
+  const name = addressName(sender);
+  const stamp = open ? date ?? time : time ?? date;
+  const hasAttachments = (attachments ?? []).length > 0;
+  const toggleStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    minWidth: 0,
+    borderRadius: 6,
+    '--bloom-mail-ring': paint.accent
+  };
+  const replies = [onReply === undefined ? null : {
+    key: 'reply',
+    label: text.reply,
+    icon: RiCornerUpLeftLine,
+    onPress: onReply
+  }, onReplyAll === undefined ? null : {
+    key: 'reply-all',
+    label: text.replyAll,
+    icon: RiGroupLine,
+    onPress: onReplyAll
+  }, onForward === undefined ? null : {
+    key: 'forward',
+    label: text.forward,
+    icon: RiShareForwardLine,
+    onPress: onForward
+  }].filter(entry => entry !== null);
+
+  // An OPEN message is a surface, and Bloom's surface is a `Card` — the card
+  // fill, the hairline, the radius scale — not a grey wash painted by hand. A
+  // COLLAPSED one paints nothing, so a thread reads as one list with a card
+  // opened inside it rather than as a column of blocks.
+  // Three labelled actions need about 320 of the message's own width; under
+  // that the group keeps the glyphs and drops the words, which is what
+  // `ButtonGroupItem` is built for — the accessible name is the label either
+  // way, so nothing is lost by the labels going.
+  const compactReplies = !replyLabelsFit(width);
+  const Shell = open ? Card : View;
+  const shellProps = open ? {
+    variant: 'outlined',
+    radius: 'radius-16',
+    testID
+  } : {
+    testID
+  };
+  return /*#__PURE__*/_jsxs(Shell, {
+    ...shellProps,
+    style: [open ? {
+      paddingBottom: geo.paddingVertical
+    } : null, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: open ? 'flex-start' : 'center',
+        paddingTop: geo.paddingVertical,
+        paddingBottom: geo.paddingVertical,
+        paddingLeft: geo.paddingHorizontal,
+        paddingRight: geo.paddingHorizontal,
+        gap: geo.gap
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        "aria-hidden": true,
+        importantForAccessibility: "no-hide-descendants",
+        children: /*#__PURE__*/_jsx(Avatar, {
+          source: sender.avatar ?? null,
+          name: name,
+          size: geo.avatar,
+          testID: testID ? `${testID}-avatar` : undefined
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          gap: 2
+        },
+        children: [/*#__PURE__*/_jsxs(Pressable, {
+          ...webDataSet({
+            bloomMailThreadFocusable: ''
+          }),
+          role: "button",
+          accessibilityLabel: `${open ? text.collapse : text.expand}: ${name}`,
+          "aria-expanded": open,
+          accessibilityState: {
+            expanded: open
+          },
+          onPress: () => setOpen(!open),
+          style: toggleStyle,
+          testID: testID ? `${testID}-toggle` : undefined,
+          children: [/*#__PURE__*/_jsx(Text, {
+            variant: unread ? 'body-semibold' : 'body-medium',
+            numberOfLines: 1
+            // Shrinkable: the row's own date is not, so a long sender on a
+            // narrow pane has to give way or it overruns the star beside it
+            // (measured at 390px, where the two overlapped by a few pixels).
+            ,
+            style: {
+              color: paint.text,
+              flexShrink: 1,
+              minWidth: 0,
+              maxWidth: '60%'
+            },
+            testID: testID ? `${testID}-sender` : undefined,
+            children: name
+          }), open ? /*#__PURE__*/_jsx(View, {
+            style: {
+              flex: 1
+            }
+          }) : /*#__PURE__*/_jsx(Text, {
+            variant: "body-2-regular",
+            numberOfLines: 1,
+            style: {
+              color: paint.textTertiary,
+              flex: 1,
+              minWidth: 0
+            },
+            testID: testID ? `${testID}-preview` : undefined,
+            children: preview
+          }), hasAttachments ? /*#__PURE__*/_jsx(View, {
+            "aria-hidden": true,
+            importantForAccessibility: "no-hide-descendants",
+            style: {
+              flexShrink: 0
+            },
+            testID: testID ? `${testID}-attachment-marker` : undefined,
+            children: /*#__PURE__*/_jsx(RiAttachment2, {
+              width: geo.glyph,
+              height: geo.glyph,
+              fill: paint.textGraphical
+            })
+          }) : null, stamp === undefined ? null : /*#__PURE__*/_jsx(Text, {
+            variant: "caption-1-regular",
+            numberOfLines: 1,
+            style: {
+              color: paint.textTertiary,
+              flexShrink: 0
+            },
+            testID: testID ? `${testID}-time` : undefined,
+            children: stamp
+          })]
+        }), open ? /*#__PURE__*/_jsxs(View, {
+          style: {
+            gap: 2
+          },
+          children: [(to ?? []).length > 0 ? /*#__PURE__*/_jsx(MailAddressLine, {
+            label: text.to,
+            addresses: to,
+            strings: strings,
+            testID: testID ? `${testID}-to` : undefined
+          }) : null, (cc ?? []).length > 0 ? /*#__PURE__*/_jsx(MailAddressLine, {
+            label: text.cc,
+            addresses: cc,
+            strings: strings,
+            testID: testID ? `${testID}-cc` : undefined
+          }) : null]
+        }) : null]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 2,
+          flexShrink: 0
+        },
+        children: [/*#__PURE__*/_jsx(MailStar, {
+          starred: starred,
+          onStarredChange: onStarredChange,
+          size: geo.action,
+          glyph: 18,
+          paint: paint,
+          strings: rowStrings,
+          testID: testID ? `${testID}-star` : undefined
+        }), menu]
+      })]
+    }), open ? /*#__PURE__*/_jsxs(View
+    // The BODY is what measures itself, not the card: the reply group
+    // lives in here, and `Card` has no `onLayout` of its own to borrow.
+    , {
+      onLayout: onLayout,
+      style: {
+        paddingLeft: MAIL_BODY_INSET,
+        paddingRight: geo.paddingHorizontal,
+        gap: 12
+      },
+      testID: testID ? `${testID}-body` : undefined,
+      children: [children, trimmed === undefined ? null : /*#__PURE__*/_jsx(MailQuoteToggle, {
+        strings: strings,
+        testID: testID ? `${testID}-trimmed` : undefined,
+        children: trimmed
+      }), hasAttachments ? /*#__PURE__*/_jsx(ComposerAttachmentStrip
+      // The tile's one line is the NAME: a column of "1.2 MB" says
+      // nothing about which file it is. The size travels in the
+      // accessible name instead, where it costs no width.
+      , {
+        attachments: (attachments ?? []).map(attachment => ({
+          id: attachment.id,
+          name: attachment.name,
+          icon: attachment.icon
+        })),
+        openLabel: tile => {
+          const size = (attachments ?? []).find(entry => entry.id === tile.id)?.size;
+          return size === undefined ? tile.name : `${tile.name} · ${size}`;
+        },
+        onOpen: id => (attachments ?? []).find(entry => entry.id === id)?.onPress?.(),
+        accessibilityLabel: text.attachments,
+        testID: testID ? `${testID}-attachments` : undefined
+      }) : null, replies.length > 0 ? /*#__PURE__*/_jsx(ButtonGroup, {
+        accessibilityLabel: text.attachments,
+        style: {
+          alignSelf: 'flex-start'
+        },
+        children: replies.map(reply => /*#__PURE__*/_jsx(ButtonGroupItem, {
+          leadingIcon: reply.icon,
+          iconOnly: compactReplies,
+          accessibilityLabel: reply.label,
+          onPress: reply.onPress,
+          testID: testID ? `${testID}-${reply.key}` : undefined,
+          children: reply.label
+        }, reply.key))
+      }) : null]
+    }) : null]
+  });
+}
+//# sourceMappingURL=MailMessage.js.map

package/lib/module/mail-thread/MailMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","Pressable","View","Avatar","ButtonGroup","ButtonGroupItem","Card","useContainerWidth","ComposerAttachmentStrip","useControllableState","RiAttachment2","RiCornerUpLeftLine","RiGroupLine","RiShareForwardLine","MailStar","mailStrings","resolveMailPaint","adoptStyleSheet","useSurfaceFill","webDataSet","useTheme","Text","MailAddressLine","MailQuoteToggle","MAIL_BODY_INSET","MAIL_THREAD_CSS","MAIL_THREAD_GEOMETRY","MAIL_THREAD_STYLE_ID","addressName","mailThreadStrings","replyLabelsFit","jsx","_jsx","jsxs","_jsxs","MailMessage","sender","to","cc","date","time","preview","expanded","defaultExpanded","onExpandedChange","unread","starred","onStarredChange","attachments","children","trimmed","onReply","onReplyAll","onForward","menu","strings","style","testID","theme","surface","paint","text","rowStrings","star","open","setOpen","value","defaultValue","onChange","geo","width","onLayout","name","stamp","hasAttachments","length","toggleStyle","flexDirection","alignItems","gap","minWidth","borderRadius","accent","replies","undefined","key","label","reply","icon","onPress","replyAll","forward","filter","entry","compactReplies","Shell","shellProps","variant","radius","paddingBottom","paddingVertical","paddingTop","paddingLeft","paddingHorizontal","paddingRight","pointerEvents","importantForAccessibility","source","avatar","size","flex","bloomMailThreadFocusable","role","accessibilityLabel","collapse","expand","accessibilityState","numberOfLines","color","flexShrink","maxWidth","textTertiary","glyph","height","fill","textGraphical","addresses","action","map","attachment","id","openLabel","tile","find","onOpen","alignSelf","leadingIcon","iconOnly"],"sourceRoot":"../../../src","sources":["mail-thread/MailMessage.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAE9C,SAASC,MAAM,QAAQ,oBAAW;AAClC,SAASC,WAAW,EAAEC,eAAe,QAAQ,0BAAiB;AAC9D,SAASC,IAAI,QAAQ,kBAAS;AAC9B,SAASC,iBAAiB,QAAQ,iCAA8B;AAChE,SAASC,uBAAuB,QAAQ,2BAAkB;AAE1D,SAASC,oBAAoB,QAAQ,oCAAiC;AACtE,SAASC,aAAa,QAAQ,iCAA8B;AAC5D,SAASC,kBAAkB,QAAQ,sCAAmC;AAEtE,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,kBAAkB,QAAQ,sCAAmC;AACtE,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,WAAW,EAAEC,gBAAgB,QAAQ,wBAAqB;AACnE,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,cAAc,QAAQ,6BAA0B;AACzD,SAASC,UAAU,QAAQ,uBAAoB;AAE/C,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,IAAI,QAAQ,wBAAe;AACpC,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SACEC,eAAe,EACfC,eAAe,EACfC,oBAAoB,EACpBC,oBAAoB,EACpBC,WAAW,EACXC,iBAAiB,EACjBC,cAAc,QACT,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlB;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,OAAO,SAASC,WAAWA,CAAC;EAC1BC,MAAM;EACNC,EAAE;EACFC,EAAE;EACFC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,eAAe,GAAG,KAAK;EACvBC,gBAAgB;EAChBC,MAAM,GAAG,KAAK;EACdC,OAAO,GAAG,KAAK;EACfC,eAAe;EACfC,WAAW;EACXC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,UAAU;EACVC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC,KAAK;EACLC;AACgB,CAAC,EAAE;EACnB,MAAMC,KAAK,GAAGtC,QAAQ,CAAC,CAAC;EACxB,MAAMuC,OAAO,GAAGzC,cAAc,CAAC,CAAC;EAChCnB,SAAS,CAAC,MAAM;IACdkB,eAAe,CAACU,oBAAoB,EAAEF,eAAe,CAAC;EACxD,CAAC,EAAE,EAAE,CAAC;EACN,MAAMmC,KAAK,GAAG5D,OAAO,CAAC,MAAMgB,gBAAgB,CAAC0C,KAAK,EAAEC,OAAO,CAAC,EAAE,CAACD,KAAK,EAAEC,OAAO,CAAC,CAAC;EAC/E,MAAME,IAAI,GAAG7D,OAAO,CAAC,MAAM6B,iBAAiB,CAAC0B,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EACjE,MAAMO,UAAU,GAAG9D,OAAO,CACxB,MAAMe,WAAW,CAAC;IAAE+B,OAAO,EAAEe,IAAI,CAACf,OAAO;IAAEiB,IAAI,EAAEF,IAAI,CAACE;EAAK,CAAC,CAAC,EAC7D,CAACF,IAAI,CAACE,IAAI,EAAEF,IAAI,CAACf,OAAO,CAC1B,CAAC;EACD,MAAM,CAACkB,IAAI,EAAEC,OAAO,CAAC,GAAGxD,oBAAoB,CAAU;IACpDyD,KAAK,EAAExB,QAAQ;IACfyB,YAAY,EAAExB,eAAe;IAC7ByB,QAAQ,EAAExB;EACZ,CAAC,CAAC;EAEF,MAAMyB,GAAG,GAAG3C,oBAAoB;EAChC,MAAM;IAAE4C,KAAK;IAAEC;EAAS,CAAC,GAAGhE,iBAAiB,CAAC,CAAC;EAC/C,MAAMiE,IAAI,GAAG5C,WAAW,CAACQ,MAAM,CAAC;EAChC,MAAMqC,KAAK,GAAGT,IAAI,GAAIzB,IAAI,IAAIC,IAAI,GAAKA,IAAI,IAAID,IAAK;EACpD,MAAMmC,cAAc,GAAG,CAAC1B,WAAW,IAAI,EAAE,EAAE2B,MAAM,GAAG,CAAC;EAErD,MAAMC,WAAwB,GAAG;IAC/BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE,CAAC;IACNC,QAAQ,EAAE,CAAC;IACXC,YAAY,EAAE,CAAC;IACf,mBAAmB,EAAErB,KAAK,CAACsB;EAC7B,CAAC;EAED,MAAMC,OAAO,GAAG,CACdhC,OAAO,KAAKiC,SAAS,GACjB,IAAI,GACJ;IAAEC,GAAG,EAAE,OAAO;IAAEC,KAAK,EAAEzB,IAAI,CAAC0B,KAAK;IAAEC,IAAI,EAAE7E,kBAAkB;IAAE8E,OAAO,EAAEtC;EAAQ,CAAC,EACnFC,UAAU,KAAKgC,SAAS,GACpB,IAAI,GACJ;IAAEC,GAAG,EAAE,WAAW;IAAEC,KAAK,EAAEzB,IAAI,CAAC6B,QAAQ;IAAEF,IAAI,EAAE5E,WAAW;IAAE6E,OAAO,EAAErC;EAAW,CAAC,EACtFC,SAAS,KAAK+B,SAAS,GACnB,IAAI,GACJ;IAAEC,GAAG,EAAE,SAAS;IAAEC,KAAK,EAAEzB,IAAI,CAAC8B,OAAO;IAAEH,IAAI,EAAE3E,kBAAkB;IAAE4E,OAAO,EAAEpC;EAAU,CAAC,CAC1F,CAACuC,MAAM,CAAEC,KAAK,IAAyCA,KAAK,KAAK,IAAI,CAAC;;EAEvE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMC,cAAc,GAAG,CAAChE,cAAc,CAACwC,KAAK,CAAC;EAC7C,MAAMyB,KAAK,GAAG/B,IAAI,GAAG1D,IAAI,GAAGJ,IAAI;EAChC,MAAM8F,UAAU,GAAGhC,IAAI,GACnB;IAAEiC,OAAO,EAAE,UAAmB;IAAEC,MAAM,EAAE,WAAoB;IAAEzC;EAAO,CAAC,GACtE;IAAEA;EAAO,CAAC;EACd,oBACEvB,KAAA,CAAC6D,KAAK;IAAA,GACAC,UAAU;IACdxC,KAAK,EAAE,CAACQ,IAAI,GAAG;MAAEmC,aAAa,EAAE9B,GAAG,CAAC+B;IAAgB,CAAC,GAAG,IAAI,EAAE5C,KAAK,CAAE;IAAAP,QAAA,gBAErEf,KAAA,CAAChC,IAAI;MACHsD,KAAK,EAAE;QACLqB,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAEd,IAAI,GAAG,YAAY,GAAG,QAAQ;QAC1CqC,UAAU,EAAEhC,GAAG,CAAC+B,eAAe;QAC/BD,aAAa,EAAE9B,GAAG,CAAC+B,eAAe;QAClCE,WAAW,EAAEjC,GAAG,CAACkC,iBAAiB;QAClCC,YAAY,EAAEnC,GAAG,CAACkC,iBAAiB;QACnCxB,GAAG,EAAEV,GAAG,CAACU;MACX,CAAE;MAAA9B,QAAA,gBAEFjB,IAAA,CAAC9B,IAAI;QAACuG,aAAa,EAAC,MAAM;QAAC,mBAAW;QAACC,yBAAyB,EAAC,qBAAqB;QAAAzD,QAAA,eACpFjB,IAAA,CAAC7B,MAAM;UACLwG,MAAM,EAAEvE,MAAM,CAACwE,MAAM,IAAI,IAAK;UAC9BpC,IAAI,EAAEA,IAAK;UACXqC,IAAI,EAAExC,GAAG,CAACuC,MAAO;UACjBnD,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAG2B;QAAU,CACjD;MAAC,CACE,CAAC,eACPlD,KAAA,CAAChC,IAAI;QAACsD,KAAK,EAAE;UAAEsD,IAAI,EAAE,CAAC;UAAE9B,QAAQ,EAAE,CAAC;UAAED,GAAG,EAAE;QAAE,CAAE;QAAA9B,QAAA,gBAC5Cf,KAAA,CAACjC,SAAS;UAAA,GACJkB,UAAU,CAAC;YAAE4F,wBAAwB,EAAE;UAAG,CAAC,CAAC;UAChDC,IAAI,EAAC,QAAQ;UACbC,kBAAkB,EAAE,GAAGjD,IAAI,GAAGH,IAAI,CAACqD,QAAQ,GAAGrD,IAAI,CAACsD,MAAM,KAAK3C,IAAI,EAAG;UACrE,iBAAeR,IAAK;UACpBoD,kBAAkB,EAAE;YAAE1E,QAAQ,EAAEsB;UAAK,CAAE;UACvCyB,OAAO,EAAEA,CAAA,KAAMxB,OAAO,CAAC,CAACD,IAAI,CAAE;UAC9BR,KAAK,EAAEoB,WAAY;UACnBnB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAG2B,SAAU;UAAAnC,QAAA,gBAEhDjB,IAAA,CAACX,IAAI;YACH4E,OAAO,EAAEpD,MAAM,GAAG,eAAe,GAAG,aAAc;YAClDwE,aAAa,EAAE;YACf;YACA;YACA;YAAA;YACA7D,KAAK,EAAE;cAAE8D,KAAK,EAAE1D,KAAK,CAACC,IAAI;cAAE0D,UAAU,EAAE,CAAC;cAAEvC,QAAQ,EAAE,CAAC;cAAEwC,QAAQ,EAAE;YAAM,CAAE;YAC1E/D,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAG2B,SAAU;YAAAnC,QAAA,EAE/CuB;UAAI,CACD,CAAC,EACNR,IAAI,gBACHhC,IAAA,CAAC9B,IAAI;YAACsD,KAAK,EAAE;cAAEsD,IAAI,EAAE;YAAE;UAAE,CAAE,CAAC,gBAE5B9E,IAAA,CAACX,IAAI;YACH4E,OAAO,EAAC,gBAAgB;YACxBoB,aAAa,EAAE,CAAE;YACjB7D,KAAK,EAAE;cAAE8D,KAAK,EAAE1D,KAAK,CAAC6D,YAAY;cAAEX,IAAI,EAAE,CAAC;cAAE9B,QAAQ,EAAE;YAAE,CAAE;YAC3DvB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,UAAU,GAAG2B,SAAU;YAAAnC,QAAA,EAEhDR;UAAO,CACJ,CACP,EACAiC,cAAc,gBACb1C,IAAA,CAAC9B,IAAI;YACH,mBAAW;YACXwG,yBAAyB,EAAC,qBAAqB;YAC/ClD,KAAK,EAAE;cAAE+D,UAAU,EAAE;YAAE,CAAE;YACzB9D,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,oBAAoB,GAAG2B,SAAU;YAAAnC,QAAA,eAE3DjB,IAAA,CAACtB,aAAa;cAAC4D,KAAK,EAAED,GAAG,CAACqD,KAAM;cAACC,MAAM,EAAEtD,GAAG,CAACqD,KAAM;cAACE,IAAI,EAAEhE,KAAK,CAACiE;YAAc,CAAE;UAAC,CAC7E,CAAC,GACL,IAAI,EACPpD,KAAK,KAAKW,SAAS,GAAG,IAAI,gBACzBpD,IAAA,CAACX,IAAI;YACH4E,OAAO,EAAC,mBAAmB;YAC3BoB,aAAa,EAAE,CAAE;YACjB7D,KAAK,EAAE;cAAE8D,KAAK,EAAE1D,KAAK,CAAC6D,YAAY;cAAEF,UAAU,EAAE;YAAE,CAAE;YACpD9D,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAG2B,SAAU;YAAAnC,QAAA,EAE7CwB;UAAK,CACF,CACP;QAAA,CACQ,CAAC,EACXT,IAAI,gBACH9B,KAAA,CAAChC,IAAI;UAACsD,KAAK,EAAE;YAAEuB,GAAG,EAAE;UAAE,CAAE;UAAA9B,QAAA,GACrB,CAACZ,EAAE,IAAI,EAAE,EAAEsC,MAAM,GAAG,CAAC,gBACpB3C,IAAA,CAACV,eAAe;YACdgE,KAAK,EAAEzB,IAAI,CAACxB,EAAG;YACfyF,SAAS,EAAEzF,EAA6B;YACxCkB,OAAO,EAAEA,OAAQ;YACjBE,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,KAAK,GAAG2B;UAAU,CAC7C,CAAC,GACA,IAAI,EACP,CAAC9C,EAAE,IAAI,EAAE,EAAEqC,MAAM,GAAG,CAAC,gBACpB3C,IAAA,CAACV,eAAe;YACdgE,KAAK,EAAEzB,IAAI,CAACvB,EAAG;YACfwF,SAAS,EAAExF,EAA6B;YACxCiB,OAAO,EAAEA,OAAQ;YACjBE,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,KAAK,GAAG2B;UAAU,CAC7C,CAAC,GACA,IAAI;QAAA,CACJ,CAAC,GACL,IAAI;MAAA,CACJ,CAAC,eACPlD,KAAA,CAAChC,IAAI;QAACsD,KAAK,EAAE;UAAEqB,aAAa,EAAE,KAAK;UAAEC,UAAU,EAAE,QAAQ;UAAEC,GAAG,EAAE,CAAC;UAAEwC,UAAU,EAAE;QAAE,CAAE;QAAAtE,QAAA,gBACjFjB,IAAA,CAAClB,QAAQ;UACPgC,OAAO,EAAEA,OAAQ;UACjBC,eAAe,EAAEA,eAAgB;UACjC8D,IAAI,EAAExC,GAAG,CAAC0D,MAAO;UACjBL,KAAK,EAAE,EAAG;UACV9D,KAAK,EAAEA,KAAM;UACbL,OAAO,EAAEO,UAAW;UACpBL,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAG2B;QAAU,CAC/C,CAAC,EACD9B,IAAI;MAAA,CACD,CAAC;IAAA,CACH,CAAC,EAENU,IAAI,gBACH9B,KAAA,CAAChC;IACC;IACA;IAAA;MACAqE,QAAQ,EAAEA,QAAS;MACnBf,KAAK,EAAE;QACL8C,WAAW,EAAE9E,eAAe;QAC5BgF,YAAY,EAAEnC,GAAG,CAACkC,iBAAiB;QACnCxB,GAAG,EAAE;MACP,CAAE;MACFtB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAG2B,SAAU;MAAAnC,QAAA,GAE7CA,QAAQ,EACRC,OAAO,KAAKkC,SAAS,GAAG,IAAI,gBAC3BpD,IAAA,CAACT,eAAe;QACdgC,OAAO,EAAEA,OAAQ;QACjBE,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,UAAU,GAAG2B,SAAU;QAAAnC,QAAA,EAEhDC;MAAO,CACO,CAClB,EACAwB,cAAc,gBACb1C,IAAA,CAACxB;MACC;MACA;MACA;MAAA;QACAwC,WAAW,EAAE,CAACA,WAAW,IAAI,EAAE,EAAEgF,GAAG,CAAEC,UAAU,KAAM;UACpDC,EAAE,EAAED,UAAU,CAACC,EAAE;UACjB1D,IAAI,EAAEyD,UAAU,CAACzD,IAAI;UACrBgB,IAAI,EAAEyC,UAAU,CAACzC;QACnB,CAAC,CAAC,CAAE;QACJ2C,SAAS,EAAGC,IAAI,IAAK;UACnB,MAAMvB,IAAI,GAAG,CAAC7D,WAAW,IAAI,EAAE,EAAEqF,IAAI,CAAExC,KAAK,IAAKA,KAAK,CAACqC,EAAE,KAAKE,IAAI,CAACF,EAAE,CAAC,EAAErB,IAAI;UAC5E,OAAOA,IAAI,KAAKzB,SAAS,GAAGgD,IAAI,CAAC5D,IAAI,GAAG,GAAG4D,IAAI,CAAC5D,IAAI,MAAMqC,IAAI,EAAE;QAClE,CAAE;QACFyB,MAAM,EAAGJ,EAAE,IAAK,CAAClF,WAAW,IAAI,EAAE,EAAEqF,IAAI,CAAExC,KAAK,IAAKA,KAAK,CAACqC,EAAE,KAAKA,EAAE,CAAC,EAAEzC,OAAO,GAAG,CAAE;QAClFwB,kBAAkB,EAAEpD,IAAI,CAACb,WAAY;QACrCS,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,cAAc,GAAG2B;MAAU,CACtD,CAAC,GACA,IAAI,EACPD,OAAO,CAACR,MAAM,GAAG,CAAC,gBACjB3C,IAAA,CAAC5B,WAAW;QAAC6G,kBAAkB,EAAEpD,IAAI,CAACb,WAAY;QAACQ,KAAK,EAAE;UAAE+E,SAAS,EAAE;QAAa,CAAE;QAAAtF,QAAA,EACnFkC,OAAO,CAAC6C,GAAG,CAAEzC,KAAK,iBACjBvD,IAAA,CAAC3B,eAAe;UAEdmI,WAAW,EAAEjD,KAAK,CAACC,IAAK;UACxBiD,QAAQ,EAAE3C,cAAe;UACzBmB,kBAAkB,EAAE1B,KAAK,CAACD,KAAM;UAChCG,OAAO,EAAEF,KAAK,CAACE,OAAQ;UACvBhC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,IAAI8B,KAAK,CAACF,GAAG,EAAE,GAAGD,SAAU;UAAAnC,QAAA,EAErDsC,KAAK,CAACD;QAAK,GAPPC,KAAK,CAACF,GAQI,CAClB;MAAC,CACS,CAAC,GACZ,IAAI;IAAA,CACJ,CAAC,GACL,IAAI;EAAA,CACH,CAAC;AAEZ","ignoreList":[]}

package/lib/module/mail-thread/MailQuoteToggle.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import React, { useEffect, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { RiMoreLine } from "../icons/remix/RiMoreLine.js";
+import { resolveMailPaint } from "../mail-list/shared.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { MAIL_THREAD_CSS, MAIL_THREAD_STYLE_ID, mailThreadStrings } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The "show trimmed content" control, and the place the trimmed content lands.
+ *
+ * THE CONTENT IS THE APP'S AND THE PRESENTATION IS BLOOM'S, which is the whole
+ * division of labour in this family. Where a quote starts, what counts as
+ * trimmed, and how the quoted HTML renders are questions only the app's parser
+ * can answer; what a reader sees while it is hidden is a question every mail
+ * client answers the same way and each one re-solves.
+ *
+ * It draws as a short dotted lozenge rather than as a labelled button
+ * deliberately: it sits at the END of a message's own words, where a second
+ * labelled control would read as a fourth action beside Reply and Forward. It
+ * still carries a full accessible name, and the name FLIPS with the state — a
+ * toggle whose name does not change is a toggle a screen-reader user cannot
+ * tell the state of.
+ */
+export function MailQuoteToggle({
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  strings,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const [open, setOpen] = useControllableState({
+    value: expanded,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange
+  });
+  const buttonStyle = {
+    width: 32,
+    height: 20,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: paint.hover,
+    '--bloom-mail-ring': paint.accent
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: 8,
+      alignItems: 'flex-start'
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      ...webDataSet({
+        bloomMailThreadFocusable: ''
+      }),
+      role: "button",
+      accessibilityLabel: open ? text.hideTrimmed : text.showTrimmed,
+      "aria-expanded": open,
+      accessibilityState: {
+        expanded: open
+      },
+      onPress: () => setOpen(!open),
+      style: buttonStyle,
+      testID: testID ? `${testID}-button` : undefined,
+      children: /*#__PURE__*/_jsx(RiMoreLine, {
+        width: 16,
+        height: 16,
+        fill: paint.textSecondary
+      })
+    }), open ? /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%'
+      },
+      testID: testID ? `${testID}-content` : undefined,
+      children: children
+    }) : null]
+  });
+}
+//# sourceMappingURL=MailQuoteToggle.js.map

package/lib/module/mail-thread/MailQuoteToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","Pressable","View","useControllableState","RiMoreLine","resolveMailPaint","adoptStyleSheet","useSurfaceFill","webDataSet","useTheme","MAIL_THREAD_CSS","MAIL_THREAD_STYLE_ID","mailThreadStrings","jsx","_jsx","jsxs","_jsxs","MailQuoteToggle","expanded","defaultExpanded","onExpandedChange","children","strings","style","testID","theme","surface","paint","text","open","setOpen","value","defaultValue","onChange","buttonStyle","width","height","borderRadius","alignItems","justifyContent","backgroundColor","hover","accent","gap","bloomMailThreadFocusable","role","accessibilityLabel","hideTrimmed","showTrimmed","accessibilityState","onPress","undefined","fill","textSecondary"],"sourceRoot":"../../../src","sources":["mail-thread/MailQuoteToggle.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/mail-thread/MailThread.js

@@ -0,0 +1,164 @@
+"use strict";
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { Button } from '../button';
+import { Divider } from "../divider/index.js";
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { MailLabelChips, MailStar } from "../mail-list/parts.js";
+import { mailStrings, resolveMailPaint, visibleLabels } from "../mail-list/shared.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MailMessage } from "./MailMessage.js";
+import { MAIL_BODY_INSET, MAIL_THREAD_CSS, MAIL_THREAD_GEOMETRY, MAIL_THREAD_STYLE_ID, collapseThread, defaultExpandedIds, mailThreadStrings } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One conversation: the subject, the stack of messages, and the quick reply.
+ *
+ * THE NEWEST MESSAGE IS OPEN AND THE REST ARE CLOSED. That is the arrangement
+ * a reader arriving at a thread wants every time, so it is the default rather
+ * than a prop the app has to remember; `expandedIds` takes it over when the app
+ * has its own idea (a deep link to one message, "expand all").
+ *
+ * THE MIDDLE FOLDS, NOT THE TAIL. A long thread hides everything between the
+ * first message and the last two behind one "N earlier messages" control: the
+ * message that started the conversation and the two that are the conversation
+ * NOW are the three a reader needs, and folding from the top instead would hide
+ * the first, which is the one that says what the thread is about. `collapseAfter`
+ * moves the threshold; `0` turns it off. The arithmetic is pure and lives in
+ * `collapseThread`.
+ *
+ * The quick reply is a SLOT. What a reply box is — a one-line field, a row of
+ * suggested replies, a full composer — is an app's decision, and a thread that
+ * shipped one of them would be wrong in the other two apps.
+ */
+export function MailThread({
+  subject,
+  labels,
+  starred = false,
+  onStarredChange,
+  messages,
+  expandedIds,
+  onExpandedIdsChange,
+  collapseAfter = 4,
+  quickReply,
+  header,
+  strings,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const rowStrings = useMemo(() => mailStrings({
+    starred: text.starred,
+    star: text.star
+  }), [text.star, text.starred]);
+  const geo = MAIL_THREAD_GEOMETRY;
+  const [openIds, setOpenIds] = useControllableState({
+    value: expandedIds,
+    defaultValue: useMemo(() => defaultExpandedIds(messages), [messages]),
+    onChange: onExpandedIdsChange ? next => onExpandedIdsChange([...next]) : undefined
+  });
+  const open = useMemo(() => new Set(openIds), [openIds]);
+  const [revealed, setRevealed] = useState(false);
+  const entries = useMemo(() => collapseThread(messages, revealed ? 0 : collapseAfter), [collapseAfter, messages, revealed]);
+  const {
+    shown,
+    overflow
+  } = visibleLabels(labels, 3);
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: accessibilityLabel ?? subject,
+    style: style,
+    testID: testID,
+    children: [header, subject !== undefined || onStarredChange !== undefined ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 8,
+        paddingTop: geo.paddingVertical,
+        paddingBottom: geo.paddingVertical,
+        paddingLeft: geo.paddingHorizontal,
+        paddingRight: geo.paddingHorizontal
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          gap: 6
+        },
+        children: [subject === undefined ? null : /*#__PURE__*/_jsx(Text, {
+          variant: "title-3-semibold",
+          style: {
+            color: paint.text
+          },
+          testID: testID ? `${testID}-subject` : undefined,
+          children: subject
+        }), shown.length > 0 || overflow > 0 ? /*#__PURE__*/_jsx(MailLabelChips, {
+          labels: shown,
+          overflow: overflow,
+          surface: paint.surface,
+          strings: rowStrings,
+          testID: testID ? `${testID}-labels` : undefined
+        }) : null]
+      }), /*#__PURE__*/_jsx(MailStar, {
+        starred: starred,
+        onStarredChange: onStarredChange,
+        size: geo.action,
+        glyph: 18,
+        paint: paint,
+        strings: rowStrings,
+        testID: testID ? `${testID}-star` : undefined
+      })]
+    }) : null, /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingTop: 4,
+        paddingBottom: 4
+      },
+      children: entries.map(entry => entry.kind === 'message' ? /*#__PURE__*/_jsx(MailMessage, {
+        ...entry.message,
+        strings: entry.message.strings ?? strings,
+        expanded: open.has(entry.message.id),
+        onExpandedChange: next => {
+          const ids = new Set(open);
+          if (next) ids.add(entry.message.id);else ids.delete(entry.message.id);
+          setOpenIds([...ids]);
+        },
+        testID: testID ? `${testID}-message-${entry.message.id}` : undefined
+      }, entry.message.id) :
+      /*#__PURE__*/
+      // The fold is a CONTROL, so it is Bloom's control: a hand-drawn
+      // pill here was a shape the library does not otherwise use, and it
+      // carried its own focus ring, its own fill and its own hover.
+      _jsx(Button, {
+        variant: "secondary",
+        size: "small",
+        onPress: () => setRevealed(true),
+        accessibilityLabel: text.earlierMessages(entry.count),
+        style: {
+          alignSelf: 'flex-start',
+          marginLeft: MAIL_BODY_INSET
+        },
+        testID: testID ? `${testID}-earlier` : undefined,
+        children: text.earlierMessages(entry.count)
+      }, "earlier"))
+    }), quickReply === undefined ? null : /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingTop: geo.paddingVertical,
+        paddingBottom: geo.paddingVertical,
+        paddingLeft: geo.paddingHorizontal,
+        paddingRight: geo.paddingHorizontal
+      },
+      testID: testID ? `${testID}-quick-reply` : undefined,
+      children: quickReply
+    })]
+  });
+}
+//# sourceMappingURL=MailThread.js.map

package/lib/module/mail-thread/MailThread.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","useState","View","Button","Divider","useControllableState","MailLabelChips","MailStar","mailStrings","resolveMailPaint","visibleLabels","adoptStyleSheet","useSurfaceFill","useTheme","Text","MailMessage","MAIL_BODY_INSET","MAIL_THREAD_CSS","MAIL_THREAD_GEOMETRY","MAIL_THREAD_STYLE_ID","collapseThread","defaultExpandedIds","mailThreadStrings","jsx","_jsx","jsxs","_jsxs","MailThread","subject","labels","starred","onStarredChange","messages","expandedIds","onExpandedIdsChange","collapseAfter","quickReply","header","strings","accessibilityLabel","style","testID","theme","surface","paint","text","rowStrings","star","geo","openIds","setOpenIds","value","defaultValue","onChange","next","undefined","open","Set","revealed","setRevealed","entries","shown","overflow","children","flexDirection","alignItems","gap","paddingTop","paddingVertical","paddingBottom","paddingLeft","paddingHorizontal","paddingRight","flex","minWidth","variant","color","length","size","action","glyph","map","entry","kind","message","expanded","has","id","onExpandedChange","ids","add","delete","onPress","earlierMessages","count","alignSelf","marginLeft"],"sourceRoot":"../../../src","sources":["mail-thread/MailThread.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/mail-thread/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export { MailAddressLine } from "./MailAddressLine.js";
+export { MailMessage } from "./MailMessage.js";
+export { MailQuoteToggle } from "./MailQuoteToggle.js";
+export { MailThread } from "./MailThread.js";
+export { DEFAULT_MAIL_THREAD_STRINGS, MAIL_BODY_INSET, MAIL_REPLY_LABELS_FROM, MAIL_THREAD_GEOMETRY, addressName, collapseThread, defaultExpandedIds, mailThreadStrings, replyLabelsFit, visibleAddresses } from "./shared.js";
+//# sourceMappingURL=index.js.map

package/lib/module/mail-thread/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MailAddressLine","MailMessage","MailQuoteToggle","MailThread","DEFAULT_MAIL_THREAD_STRINGS","MAIL_BODY_INSET","MAIL_REPLY_LABELS_FROM","MAIL_THREAD_GEOMETRY","addressName","collapseThread","defaultExpandedIds","mailThreadStrings","replyLabelsFit","visibleAddresses"],"sourceRoot":"../../../src","sources":["mail-thread/index.ts"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,sBAAmB;AACnD,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,UAAU,QAAQ,iBAAc;AACzC,SACEC,2BAA2B,EAC3BC,eAAe,EACfC,sBAAsB,EACtBC,oBAAoB,EACpBC,WAAW,EACXC,cAAc,EACdC,kBAAkB,EAClBC,iBAAiB,EACjBC,cAAc,EACdC,gBAAgB,QACX,aAAU","ignoreList":[]}