@oxy.so/bloom 2.10.0 → 2.11.0

package/lib/module/message-media/PollMessage.js

@@ -0,0 +1,315 @@
+"use strict";
+
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { webDataSet } from "../styles/web-data.js";
+import { RiCheckLine } from "../icons/remix/RiCheckLine.js";
+import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
+import { borderRadius, space } from "../styles/tokens.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { useHovered, useMessageMediaCss } from "./parts.js";
+import { formatVoteCount, MESSAGE_MEDIA_RADIUS, MESSAGE_MEDIA_WIDTH, pollPercentages, resolveMessageMediaPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The mark's box. 20px: a radio you can hit without hitting the row. */
+const MARK = 20;
+/** The results bar. */
+const BAR_HEIGHT = 4;
+/**
+ * One option.
+ *
+ * BEFORE the results it is a `radio` (single) or a `checkbox` (multiple)
+ * carrying `aria-checked` — both spellings, because react-native-web reads only
+ * the `aria-*` one and React Native folds it back into `accessibilityState`.
+ * AFTER them it is no longer a control at all: it is a `progressbar` with its own
+ * name and the three `aria-value*` attributes, because pressing it does nothing
+ * and a disabled checkbox that still announces "not checked" invites a press
+ * that is never going to land.
+ *
+ * A QUIZ marks the right answer green and the viewer's wrong pick negative, and
+ * it marks BOTH — not just whichever one the viewer chose. A quiz that hides the
+ * right answer after a wrong guess has taught nobody anything.
+ */
+const OptionRow = /*#__PURE__*/memo(function OptionRow({
+  option,
+  percent,
+  results,
+  multiple,
+  quiz,
+  picked,
+  paint,
+  onPress,
+  testID
+}) {
+  const [hovered, handlers] = useHovered();
+  const correct = quiz && option.correct === true;
+  const wrong = quiz && results && picked && option.correct !== true;
+  const markColor = correct ? paint.correct : wrong ? paint.danger : paint.accent;
+  const marked = results ? picked || correct : picked;
+  const mark = /*#__PURE__*/_jsx(View, {
+    style: {
+      width: MARK,
+      height: MARK,
+      borderRadius: multiple && !results ? 6 : borderRadius.full,
+      borderWidth: marked ? 0 : 1.5,
+      borderColor: paint.rail,
+      backgroundColor: marked ? markColor : 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    testID: testID ? `${testID}-mark` : undefined,
+    children: marked ? wrong ? /*#__PURE__*/_jsx(RiCloseLine, {
+      width: 13,
+      height: 13,
+      fill: paint.onAccent
+    }) : /*#__PURE__*/_jsx(RiCheckLine, {
+      width: 13,
+      height: 13,
+      fill: paint.onAccent
+    }) : null
+  });
+  const label = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexGrow: 1,
+      flexShrink: 1,
+      minWidth: 0,
+      gap: 6
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: space.sm
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-2-regular",
+        style: {
+          color: paint.text,
+          flexGrow: 1,
+          flexShrink: 1
+        },
+        children: option.label
+      }), results ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-medium",
+        style: {
+          color: paint.textMuted,
+          fontVariant: ['tabular-nums']
+        },
+        testID: testID ? `${testID}-percent` : undefined,
+        children: `${percent}%`
+      }) : null]
+    }), results ? /*#__PURE__*/_jsx(View, {
+      style: {
+        height: BAR_HEIGHT,
+        borderRadius: borderRadius.full,
+        backgroundColor: paint.rail,
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: `${percent}%`,
+          height: BAR_HEIGHT,
+          borderRadius: borderRadius.full,
+          backgroundColor: correct ? paint.correct : wrong ? paint.danger : paint.accent
+        },
+        testID: testID ? `${testID}-bar` : undefined
+      })
+    }) : null]
+  });
+  const rowStyle = {
+    flexDirection: 'row',
+    alignItems: results ? 'flex-start' : 'center',
+    gap: space.md,
+    paddingTop: 7,
+    paddingBottom: 7,
+    paddingLeft: 6,
+    paddingRight: 6,
+    borderRadius: 10,
+    backgroundColor: hovered && onPress ? paint.wash : 'transparent',
+    '--bloom-message-media-ring': paint.ring
+  };
+  if (results) {
+    const name = `${option.label}, ${percent}%${correct ? ', correct answer' : ''}${wrong ? ', your answer' : ''}`;
+    return /*#__PURE__*/_jsxs(View, {
+      role: "progressbar",
+      accessibilityLabel: name,
+      "aria-valuenow": percent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": `${percent}%`,
+      accessibilityValue: {
+        now: percent,
+        min: 0,
+        max: 100,
+        text: `${percent}%`
+      },
+      style: rowStyle,
+      testID: testID,
+      children: [mark, label]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Pressable, {
+    ...webDataSet({
+      bloomMessageMediaPressable: ''
+    }),
+    ...handlers,
+    role: multiple ? 'checkbox' : 'radio',
+    accessibilityLabel: option.label,
+    "aria-checked": picked,
+    accessibilityState: {
+      checked: picked
+    },
+    onPress: onPress,
+    style: rowStyle,
+    testID: testID,
+    children: [mark, label]
+  });
+});
+
+/**
+ * A poll or a quiz in a bubble.
+ *
+ * The percentages come from `pollPercentages()`, which distributes the rounding
+ * remainder by largest fraction so the column sums to exactly 100. Rounding each
+ * share on its own gives three equal options 33/33/33 and two equal ones
+ * 51/51 — a poll that visibly cannot add up is a poll nobody believes.
+ *
+ * MULTIPLE choice keeps its picks locally until the viewer presses "Vote", and
+ * that is the only reason this component holds state at all: a multi-select
+ * poll where each tap is a separate commit has no way to change your mind.
+ * Single choice commits on the tap, since there is nothing to accumulate —
+ * unless it is `multiple`, when the action row is the commit.
+ *
+ * `anonymous` and `quiz` are LABELS on the question, not styling: they change
+ * what voting means, and a reader has to be told before they vote rather than
+ * after.
+ */
+function PollMessageComponent({
+  question,
+  options,
+  totalVotes,
+  multiple = false,
+  anonymous = false,
+  quiz = false,
+  voted = false,
+  showResults = false,
+  onVote,
+  onViewResults,
+  voteLabel = 'Vote',
+  viewResultsLabel = 'View results',
+  anonymousLabel = 'Anonymous voting',
+  quizLabel = 'Quiz',
+  formatVotes = formatVoteCount,
+  hintLabel,
+  width = MESSAGE_MEDIA_WIDTH,
+  radius = MESSAGE_MEDIA_RADIUS,
+  tone = 'incoming',
+  onColor,
+  bubbleColor,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useMessageMediaCss();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, tone, onColor, bubbleColor), [theme, tone, onColor, bubbleColor]);
+  const [pending, setPending] = useState([]);
+  const results = voted || showResults;
+  const percentages = useMemo(() => pollPercentages(options.map(o => o.votes ?? 0), totalVotes), [options, totalVotes]);
+  const total = totalVotes ?? options.reduce((sum, option) => sum + (option.votes ?? 0), 0);
+  const isPicked = useCallback(option => results ? option.selected === true : pending.includes(option.id), [results, pending]);
+  const pick = useCallback(option => {
+    if (multiple) {
+      setPending(current => current.includes(option.id) ? current.filter(id => id !== option.id) : [...current, option.id]);
+      return;
+    }
+    setPending([option.id]);
+    onVote?.([option.id]);
+  }, [multiple, onVote]);
+  const hint = hintLabel ?? (multiple ? 'Select one or more' : 'Select one');
+  const labels = [quiz ? quizLabel : undefined, anonymous ? anonymousLabel : undefined].filter(l => Boolean(l));
+  const [actionHovered, actionHandlers] = useHovered();
+  const actionStyle = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 7,
+    paddingBottom: 7,
+    borderRadius: borderRadius.full,
+    marginTop: space.sm,
+    backgroundColor: actionHovered ? paint.washStrong : paint.wash,
+    '--bloom-message-media-ring': paint.ring
+  };
+  const action = results ? onViewResults ? {
+    label: viewResultsLabel,
+    press: onViewResults
+  } : null : multiple && onVote ? {
+    label: voteLabel,
+    press: () => onVote(pending)
+  } : null;
+  return /*#__PURE__*/_jsxs(View, {
+    role: "group",
+    accessibilityLabel: question,
+    style: [{
+      width,
+      borderRadius: radius
+    }, style ?? null],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "body-medium",
+      style: {
+        color: paint.text
+      },
+      children: question
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      style: {
+        color: paint.textMuted,
+        paddingTop: 2
+      },
+      testID: testID ? `${testID}-labels` : undefined,
+      children: [...labels, results ? undefined : hint].filter(Boolean).join(' · ')
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingTop: space.sm
+      },
+      children: options.map((option, index) => /*#__PURE__*/_jsx(OptionRow, {
+        option: option,
+        percent: percentages[index] ?? 0,
+        results: results,
+        multiple: multiple,
+        quiz: quiz,
+        picked: isPicked(option),
+        paint: paint,
+        onPress: results ? undefined : () => pick(option),
+        testID: testID ? `${testID}-option-${option.id}` : undefined
+      }, option.id))
+    }), action ? /*#__PURE__*/_jsx(Pressable, {
+      ...webDataSet({
+        bloomMessageMediaPressable: ''
+      }),
+      ...actionHandlers,
+      role: "button",
+      accessibilityLabel: action.label,
+      onPress: action.press,
+      style: actionStyle,
+      testID: testID ? `${testID}-action` : undefined,
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-medium",
+        style: {
+          color: paint.accent
+        },
+        children: action.label
+      })
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      style: {
+        color: paint.textMuted,
+        paddingTop: space.sm
+      },
+      testID: testID ? `${testID}-total` : undefined,
+      children: formatVotes(total)
+    })]
+  });
+}
+export const PollMessage = /*#__PURE__*/memo(PollMessageComponent);
+PollMessage.displayName = 'PollMessage';
+//# sourceMappingURL=PollMessage.js.map

package/lib/module/message-media/PollMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","useState","Pressable","View","webDataSet","RiCheckLine","RiCloseLine","borderRadius","space","useTheme","Text","useHovered","useMessageMediaCss","formatVoteCount","MESSAGE_MEDIA_RADIUS","MESSAGE_MEDIA_WIDTH","pollPercentages","resolveMessageMediaPaint","jsx","_jsx","jsxs","_jsxs","MARK","BAR_HEIGHT","OptionRow","option","percent","results","multiple","quiz","picked","paint","onPress","testID","hovered","handlers","correct","wrong","markColor","danger","accent","marked","mark","style","width","height","full","borderWidth","borderColor","rail","backgroundColor","alignItems","justifyContent","undefined","children","fill","onAccent","label","flexGrow","flexShrink","minWidth","gap","flexDirection","sm","variant","color","text","textMuted","fontVariant","overflow","rowStyle","md","paddingTop","paddingBottom","paddingLeft","paddingRight","wash","ring","name","role","accessibilityLabel","accessibilityValue","now","min","max","bloomMessageMediaPressable","accessibilityState","checked","PollMessageComponent","question","options","totalVotes","anonymous","voted","showResults","onVote","onViewResults","voteLabel","viewResultsLabel","anonymousLabel","quizLabel","formatVotes","hintLabel","radius","tone","onColor","bubbleColor","theme","pending","setPending","percentages","map","o","votes","total","reduce","sum","isPicked","selected","includes","id","pick","current","filter","hint","labels","l","Boolean","actionHovered","actionHandlers","actionStyle","marginTop","washStrong","action","press","join","index","PollMessage","displayName"],"sourceRoot":"../../../src","sources":["message-media/PollMessage.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/message-media/SharedMediaGrid.js

@@ -0,0 +1,121 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { formatDuration } from "../media-controls/index.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MediaImage, MediaOverlay, MediaPill, MediaPressable } from "./parts.js";
+import { ALBUM_GAP, resolveMessageMediaPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** `total` split into `parts` integers summing to exactly `total`. */
+function split(total, parts) {
+  const base = Math.floor(total / parts);
+  const remainder = total - base * parts;
+  return Array.from({
+    length: parts
+  }, (_, i) => base + (i < remainder ? 1 : 0));
+}
+
+/**
+ * The media tab of a chat's info panel: a tight 3-column grid of everything that
+ * has been sent.
+ *
+ * Column widths are INTEGERS that sum to the grid width, the same arithmetic
+ * `albumLayout` uses and for the same reason — a 340px grid divided three ways
+ * leaves a remainder, and handing it to the first columns keeps the right edge
+ * flush instead of a pixel short.
+ *
+ * The tiles are square and the radius is 4, not 16. This is a grid, not a row of
+ * cards: at three columns a 16px radius on every tile turns the grid into a
+ * pattern of gaps, and the grid's own outer corners belong to whatever panel
+ * holds it.
+ *
+ * "+N more" replaces the LAST tile rather than being appended after it, so the
+ * grid stays rectangular — a trailing overflow tile on its own row is a row with
+ * two holes in it.
+ */
+function SharedMediaGridComponent({
+  items,
+  columns = 3,
+  width = 340,
+  gap = ALBUM_GAP,
+  maxItems,
+  formatOverflow = remaining => `+${remaining} more`,
+  radius = 4,
+  onPressItem,
+  onPressOverflow,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, 'incoming'), [theme]);
+  const cols = Math.max(1, Math.floor(columns));
+  const widths = useMemo(() => split(width - gap * (cols - 1), cols), [width, gap, cols]);
+  const tile = widths[0] ?? 0;
+  const visible = maxItems === undefined ? items.length : Math.min(items.length, Math.max(0, maxItems));
+  const overflow = items.length - visible;
+  const shown = items.slice(0, visible);
+  const gridName = accessibilityLabel ?? `Shared media, ${items.length} item${items.length === 1 ? '' : 's'}`;
+  return /*#__PURE__*/_jsx(View, {
+    role: "group",
+    accessibilityLabel: gridName,
+    style: [{
+      width,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap
+    }, style ?? null],
+    testID: testID,
+    children: shown.map((item, index) => {
+      const column = index % cols;
+      const tileWidth = widths[column] ?? tile;
+      const last = overflow > 0 && index === shown.length - 1;
+      const isVideo = item.kind === 'video';
+      const duration = item.durationLabel ?? (typeof item.duration === 'number' ? formatDuration(item.duration) : undefined);
+      const name = item.accessibilityLabel ?? `${isVideo ? 'Video' : 'Photo'} ${index + 1} of ${items.length}`;
+      const cell = {
+        width: tileWidth,
+        height: tileWidth,
+        borderRadius: radius,
+        overflow: 'hidden',
+        position: 'relative'
+      };
+      return /*#__PURE__*/_jsxs(MediaPressable, {
+        accessibilityLabel: last ? formatOverflow(overflow) : name,
+        onPress: last && onPressOverflow ? onPressOverflow : onPressItem ? () => onPressItem(index) : undefined,
+        ring: paint.ring,
+        style: cell,
+        testID: testID ? `${testID}-tile-${index}` : undefined,
+        children: [/*#__PURE__*/_jsx(MediaImage, {
+          source: item.source,
+          sourceVariant: item.sourceVariant,
+          radius: radius,
+          placeholder: item.placeholderColor ?? paint.placeholder
+        }), !last && isVideo && duration ? /*#__PURE__*/_jsx(MediaPill, {
+          label: duration,
+          paint: paint,
+          leadingPlay: true,
+          position: {
+            left: 4,
+            bottom: 4
+          }
+        }) : null, last ? /*#__PURE__*/_jsx(MediaOverlay, {
+          scrim: "rgba(0, 0, 0, 0.55)",
+          children: /*#__PURE__*/_jsx(Text, {
+            variant: "body-2-medium",
+            style: {
+              color: paint.onScrim,
+              textAlign: 'center'
+            },
+            children: formatOverflow(overflow)
+          })
+        }) : null]
+      }, item.id);
+    })
+  });
+}
+export const SharedMediaGrid = /*#__PURE__*/memo(SharedMediaGridComponent);
+SharedMediaGrid.displayName = 'SharedMediaGrid';
+//# sourceMappingURL=SharedMediaGrid.js.map

package/lib/module/message-media/SharedMediaGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","formatDuration","useTheme","Text","MediaImage","MediaOverlay","MediaPill","MediaPressable","ALBUM_GAP","resolveMessageMediaPaint","jsx","_jsx","jsxs","_jsxs","split","total","parts","base","Math","floor","remainder","Array","from","length","_","i","SharedMediaGridComponent","items","columns","width","gap","maxItems","formatOverflow","remaining","radius","onPressItem","onPressOverflow","accessibilityLabel","style","testID","theme","paint","cols","max","widths","tile","visible","undefined","min","overflow","shown","slice","gridName","role","flexDirection","flexWrap","children","map","item","index","column","tileWidth","last","isVideo","kind","duration","durationLabel","name","cell","height","borderRadius","position","onPress","ring","source","sourceVariant","placeholder","placeholderColor","label","leadingPlay","left","bottom","scrim","variant","color","onScrim","textAlign","id","SharedMediaGrid","displayName"],"sourceRoot":"../../../src","sources":["message-media/SharedMediaGrid.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/message-media/StickerMessage.js

@@ -0,0 +1,84 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../theme/use-theme.js";
+import { MediaFailure, MediaImage, MediaOverlay, MediaPressable, MediaProgressRing } from "./parts.js";
+import { resolveMessageMediaPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A sticker: a transparent image and nothing else.
+ *
+ * IT DRAWS NO SURFACE AT ALL — no background, no radius, no padding — because a
+ * sticker with a bubble behind it is a picture of a sticker. The shell renders it
+ * with `variant="bare"`, which is `message-bubble`'s no-chrome mode; a bubble
+ * around one would also put a scrim behind the transparent parts and turn a
+ * cut-out into a square.
+ *
+ * `resizeMode` is `contain`, not `cover`: a sticker is authored at its own aspect
+ * and cropping one cuts the drawing.
+ *
+ * The NAME matters more here than anywhere else in the family. A sticker IS its
+ * meaning — there is no caption beside it and no text in the bubble — so a
+ * sticker with no `accessibilityLabel` announces "Sticker" and conveys nothing.
+ * Pass the emotion the pack author gave it.
+ */
+function StickerMessageComponent({
+  source,
+  sourceVariant,
+  size = 128,
+  accessibilityLabel = 'Sticker',
+  onPress,
+  state = 'idle',
+  onRetry,
+  tone = 'incoming',
+  onColor,
+  bubbleColor,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMessageMediaPaint(theme, tone, onColor, bubbleColor), [theme, tone, onColor, bubbleColor]);
+  const sending = state === 'sending';
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width: size
+    }, style ?? null],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(MediaPressable, {
+      accessibilityLabel: accessibilityLabel,
+      onPress: onPress,
+      ring: paint.ring,
+      style: {
+        width: size,
+        height: size,
+        position: 'relative'
+      },
+      ariaBusy: sending,
+      testID: testID ? `${testID}-frame` : undefined,
+      children: [/*#__PURE__*/_jsx(MediaImage, {
+        source: source,
+        sourceVariant: sourceVariant,
+        placeholder: "transparent",
+        resizeMode: "contain",
+        testID: testID ? `${testID}-image` : undefined
+      }), sending ? /*#__PURE__*/_jsx(MediaOverlay, {
+        children: /*#__PURE__*/_jsx(MediaProgressRing, {
+          size: 32,
+          color: paint.accent,
+          track: paint.rail,
+          fill: "transparent",
+          glyph: "none",
+          accessibilityLabel: "Sending sticker",
+          ring: paint.ring
+        })
+      }) : null]
+    }), state === 'failed' ? /*#__PURE__*/_jsx(MediaFailure, {
+      paint: paint,
+      onRetry: onRetry
+    }) : null]
+  });
+}
+export const StickerMessage = /*#__PURE__*/memo(StickerMessageComponent);
+StickerMessage.displayName = 'StickerMessage';
+//# sourceMappingURL=StickerMessage.js.map

package/lib/module/message-media/StickerMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","useTheme","MediaFailure","MediaImage","MediaOverlay","MediaPressable","MediaProgressRing","resolveMessageMediaPaint","jsx","_jsx","jsxs","_jsxs","StickerMessageComponent","source","sourceVariant","size","accessibilityLabel","onPress","state","onRetry","tone","onColor","bubbleColor","style","testID","theme","paint","sending","width","children","ring","height","position","ariaBusy","undefined","placeholder","resizeMode","color","accent","track","rail","fill","glyph","StickerMessage","displayName"],"sourceRoot":"../../../src","sources":["message-media/StickerMessage.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,YAAY,EAAEC,UAAU,EAAEC,YAAY,EAAEC,cAAc,EAAEC,iBAAiB,QAAQ,YAAS;AACnG,SAASC,wBAAwB,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAC;EAC/BC,MAAM;EACNC,aAAa;EACbC,IAAI,GAAG,GAAG;EACVC,kBAAkB,GAAG,SAAS;EAC9BC,OAAO;EACPC,KAAK,GAAG,MAAM;EACdC,OAAO;EACPC,IAAI,GAAG,UAAU;EACjBC,OAAO;EACPC,WAAW;EACXC,KAAK;EACLC;AACmB,CAAC,EAAE;EACtB,MAAMC,KAAK,GAAGxB,QAAQ,CAAC,CAAC;EACxB,MAAMyB,KAAK,GAAG3B,OAAO,CACnB,MAAMQ,wBAAwB,CAACkB,KAAK,EAAEL,IAAI,EAAEC,OAAO,EAAEC,WAAW,CAAC,EACjE,CAACG,KAAK,EAAEL,IAAI,EAAEC,OAAO,EAAEC,WAAW,CACpC,CAAC;EACD,MAAMK,OAAO,GAAGT,KAAK,KAAK,SAAS;EAEnC,oBACEP,KAAA,CAACX,IAAI;IAACuB,KAAK,EAAE,CAAC;MAAEK,KAAK,EAAEb;IAAK,CAAC,EAAEQ,KAAK,IAAI,IAAI,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAK,QAAA,gBAC5DlB,KAAA,CAACN,cAAc;MACbW,kBAAkB,EAAEA,kBAAmB;MACvCC,OAAO,EAAEA,OAAQ;MACjBa,IAAI,EAAEJ,KAAK,CAACI,IAAK;MACjBP,KAAK,EAAE;QAAEK,KAAK,EAAEb,IAAI;QAAEgB,MAAM,EAAEhB,IAAI;QAAEiB,QAAQ,EAAE;MAAW,CAAE;MAC3DC,QAAQ,EAAEN,OAAQ;MAClBH,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGU,SAAU;MAAAL,QAAA,gBAE/CpB,IAAA,CAACN,UAAU;QACTU,MAAM,EAAEA,MAAO;QACfC,aAAa,EAAEA,aAAc;QAC7BqB,WAAW,EAAC,aAAa;QACzBC,UAAU,EAAC,SAAS;QACpBZ,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGU;MAAU,CAChD,CAAC,EACDP,OAAO,gBACNlB,IAAA,CAACL,YAAY;QAAAyB,QAAA,eACXpB,IAAA,CAACH,iBAAiB;UAChBS,IAAI,EAAE,EAAG;UACTsB,KAAK,EAAEX,KAAK,CAACY,MAAO;UACpBC,KAAK,EAAEb,KAAK,CAACc,IAAK;UAClBC,IAAI,EAAC,aAAa;UAClBC,KAAK,EAAC,MAAM;UACZ1B,kBAAkB,EAAC,iBAAiB;UACpCc,IAAI,EAAEJ,KAAK,CAACI;QAAK,CAClB;MAAC,CACU,CAAC,GACb,IAAI;IAAA,CACM,CAAC,EAChBZ,KAAK,KAAK,QAAQ,gBAAGT,IAAA,CAACP,YAAY;MAACwB,KAAK,EAAEA,KAAM;MAACP,OAAO,EAAEA;IAAQ,CAAE,CAAC,GAAG,IAAI;EAAA,CACzE,CAAC;AAEX;AAEA,OAAO,MAAMwB,cAAc,gBAAG7C,IAAI,CAACc,uBAAuB,CAAC;AAC3D+B,cAAc,CAACC,WAAW,GAAG,gBAAgB","ignoreList":[]}