@oxy.so/bloom 5.1.0 → 5.2.0

package/lib/module/chat-composer/create-message-context-menu.js

@@ -0,0 +1,114 @@
+"use strict";
+
+/**
+ * The long-press / right-click menu for one message: the quick reaction bar on
+ * top, then the rows the app decided apply.
+ *
+ * Built on `DropdownMenu`, which is already an anchored panel on a pointer and
+ * a bottom sheet on a phone — so the rows, their destructive colour, their
+ * dismissal and their keyboard behaviour are the ones Bloom already gates,
+ * and this part only decides what goes in them.
+ *
+ * `items` is a prop and not a fixed list: which actions exist depends on who
+ * sent the message, how old it is and what the channel allows, and a menu that
+ * hid its own rows would be deciding policy the app owns.
+ */
+import React from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../theme/use-theme.js";
+import { REACTION_PICKER_EMOJIS, resolveChatComposerPalette } from "./shared.js";
+import { useMessages } from "../locale/messages.js";
+import { CHAT_COMPOSER_MESSAGES } from "./messages.js";
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createMessageContextMenu({
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  ReactionPicker
+}) {
+  function MessageContextMenu({
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    items,
+    onSelect,
+    reactions = REACTION_PICKER_EMOJIS,
+    selectedReaction,
+    onSelectReaction,
+    onMoreReactions,
+    label: labelProp,
+    style,
+    reactionBarStyle,
+    testID
+  }) {
+    const theme = useTheme();
+    const {
+      messages
+    } = useMessages(CHAT_COMPOSER_MESSAGES);
+    const label = labelProp ?? messages.messageActions;
+    const palette = resolveChatComposerPalette(theme);
+    const showReactions = reactions !== false && reactions.length > 0;
+    return /*#__PURE__*/_jsxs(DropdownMenu, {
+      open: open,
+      defaultOpen: defaultOpen,
+      onOpenChange: onOpenChange,
+      children: [/*#__PURE__*/_jsx(DropdownMenuTrigger, {
+        asChild: true,
+        children: children
+      }), /*#__PURE__*/_jsxs(DropdownMenuContent, {
+        label: label,
+        minWidth: 224,
+        style: style,
+        testID: testID,
+        children: [showReactions ? /*#__PURE__*/_jsxs(View, {
+          style: {
+            paddingBottom: 4
+          },
+          children: [/*#__PURE__*/_jsx(ReactionPicker, {
+            emojis: reactions,
+            selected: selectedReaction,
+            onSelectEmoji: onSelectReaction,
+            onMorePress: onMoreReactions,
+            size: "small",
+            surface: false,
+            style: [{
+              alignSelf: 'stretch',
+              justifyContent: 'space-between'
+            }, reactionBarStyle],
+            testID: testID ? `${testID}-reactions` : undefined
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              height: 1,
+              backgroundColor: palette.border,
+              marginTop: 4
+            }
+          })]
+        }) : null, items.map(item => /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [item.separated ? /*#__PURE__*/_jsx(DropdownMenuSeparator, {}) : null, /*#__PURE__*/_jsx(DropdownMenuItem, {
+            disabled: item.disabled,
+            variant: item.variant,
+            leading: item.icon ? /*#__PURE__*/_jsx(item.icon, {
+              width: 18,
+              height: 18,
+              fill: item.variant === 'destructive' ? palette.destructive : palette.iconSecondary
+            }) : undefined,
+            trailing: item.shortcut ? /*#__PURE__*/_jsx(DropdownMenuShortcut, {
+              children: item.shortcut
+            }) : undefined,
+            onPress: () => onSelect?.(item.id, item),
+            testID: testID ? `${testID}-${item.id}` : undefined,
+            children: item.label
+          })]
+        }, item.id))]
+      })]
+    });
+  }
+  return MessageContextMenu;
+}
+//# sourceMappingURL=create-message-context-menu.js.map

package/lib/module/chat-composer/create-message-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","useTheme","REACTION_PICKER_EMOJIS","resolveChatComposerPalette","useMessages","CHAT_COMPOSER_MESSAGES","jsx","_jsx","jsxs","_jsxs","createMessageContextMenu","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuSeparator","DropdownMenuShortcut","DropdownMenuTrigger","ReactionPicker","MessageContextMenu","children","open","defaultOpen","onOpenChange","items","onSelect","reactions","selectedReaction","onSelectReaction","onMoreReactions","label","labelProp","style","reactionBarStyle","testID","theme","messages","messageActions","palette","showReactions","length","asChild","minWidth","paddingBottom","emojis","selected","onSelectEmoji","onMorePress","size","surface","alignSelf","justifyContent","undefined","height","backgroundColor","border","marginTop","map","item","Fragment","separated","disabled","variant","leading","icon","width","fill","destructive","iconSecondary","trailing","shortcut","onPress","id"],"sourceRoot":"../../../src","sources":["chat-composer/create-message-context-menu.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chat-composer/create-reaction-picker.js

@@ -0,0 +1,115 @@
+"use strict";
+
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { useCardFill } from "../card/use-card-fill.js";
+/**
+ * The quick reaction bar: six glyphs and a "+" that hands over to the full
+ * `EmojiPicker`. It is its own part rather than a mode of the picker because it
+ * is shown in a different place (over a message, above its menu) and must stay
+ * one row tall at 390px.
+ */
+import React from 'react';
+import { View } from 'react-native';
+import { RiAddLine } from "../icons/remix/RiAddLine.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { REACTION_PICKER_EMOJIS, resolveChatComposerPalette } from "./shared.js";
+import { useChatComposerWebCss } from "./web-hooks.js";
+import { useMessages } from "../locale/messages.js";
+import { CHAT_COMPOSER_MESSAGES } from "./messages.js";
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createReactionPicker({
+  Surface,
+  Button
+}) {
+  const BOX = {
+    small: 30,
+    medium: 36
+  };
+  const GLYPH = {
+    small: 'title-3-regular',
+    medium: 'title-2-regular'
+  };
+  function ReactionPicker({
+    emojis = REACTION_PICKER_EMOJIS,
+    selected,
+    onSelectEmoji,
+    onMorePress,
+    moreLabel: moreLabelProp,
+    size = 'medium',
+    surface = true,
+    style,
+    testID,
+    accessibilityLabel: accessibilityLabelProp,
+    emojiLabel
+  }) {
+    const theme = useTheme();
+    const raisedFill = useCardFill(style);
+    const parentFill = useSurfaceFill();
+    const palette = resolveChatComposerPalette(theme, surface ? raisedFill : parentFill);
+    const {
+      messages
+    } = useMessages(CHAT_COMPOSER_MESSAGES);
+    const moreLabel = moreLabelProp ?? messages.moreReactions;
+    const accessibilityLabel = accessibilityLabelProp ?? messages.quickReactions;
+    useChatComposerWebCss();
+    const box = BOX[size];
+    const Container = surface ? Surface : View;
+    const bar = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 2,
+      alignSelf: 'flex-start',
+      borderRadius: 9999,
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingTop: 4,
+      paddingBottom: 4,
+      '--bloom-chat-composer-ring': palette.focusRing
+    };
+    const cell = {
+      width: box,
+      height: box,
+      minWidth: box,
+      minHeight: box,
+      flexShrink: 0,
+      padding: 0,
+      borderRadius: 9999
+    };
+    return /*#__PURE__*/_jsxs(Container, {
+      accessibilityLabel: accessibilityLabel,
+      style: [bar, style],
+      testID: testID,
+      children: [emojis.map(emoji => {
+        const active = selected === emoji;
+        return /*#__PURE__*/_jsx(Button, {
+          appearance: "plain",
+          tone: active ? 'accent' : 'neutral',
+          accessibilityLabel: emojiLabel ? emojiLabel(emoji) : emoji,
+          pressed: active,
+          onPress: () => onSelectEmoji?.(emoji),
+          style: cell,
+          testID: testID ? `${testID}-${emoji}` : undefined,
+          children: /*#__PURE__*/_jsx(Text, {
+            variant: GLYPH[size],
+            children: emoji
+          })
+        }, emoji);
+      }), onMorePress ? /*#__PURE__*/_jsx(Button, {
+        appearance: "subtle",
+        tone: "neutral",
+        accessibilityLabel: moreLabel,
+        onPress: onMorePress,
+        iconOnly: true,
+        icon: RiAddLine,
+        iconSize: 18,
+        style: cell,
+        testID: testID ? `${testID}-more` : undefined
+      }) : null]
+    });
+  }
+  return ReactionPicker;
+}
+//# sourceMappingURL=create-reaction-picker.js.map

package/lib/module/chat-composer/create-reaction-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSurfaceFill","useCardFill","React","View","RiAddLine","useTheme","Text","REACTION_PICKER_EMOJIS","resolveChatComposerPalette","useChatComposerWebCss","useMessages","CHAT_COMPOSER_MESSAGES","jsx","_jsx","jsxs","_jsxs","createReactionPicker","Surface","Button","BOX","small","medium","GLYPH","ReactionPicker","emojis","selected","onSelectEmoji","onMorePress","moreLabel","moreLabelProp","size","surface","style","testID","accessibilityLabel","accessibilityLabelProp","emojiLabel","theme","raisedFill","parentFill","palette","messages","moreReactions","quickReactions","box","Container","bar","flexDirection","alignItems","gap","alignSelf","borderRadius","paddingLeft","paddingRight","paddingTop","paddingBottom","focusRing","cell","width","height","minWidth","minHeight","flexShrink","padding","children","map","emoji","active","appearance","tone","pressed","onPress","undefined","variant","iconOnly","icon","iconSize"],"sourceRoot":"../../../src","sources":["chat-composer/create-reaction-picker.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chat-composer/create-suggestion-list.js

@@ -0,0 +1,229 @@
+"use strict";
+
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { useCardFill } from "../card/use-card-fill.js";
+/**
+ * The anchored list above the composer: `@mention`, `/command` and `:shortcode`
+ * are ONE part with a `kind`, because the row geometry, the keyboard model and
+ * the announced role are identical — only the leading slot differs.
+ *
+ * It is a listbox the composer's field OWNS: `activeIndex` arrives as a prop and
+ * the arrow keys are handled on the input, never here. A list that kept its own
+ * highlight would fight the field for it the first time a pointer moved.
+ */
+import React from 'react';
+import { Image, Pressable, ScrollView, View } from 'react-native';
+import { RiHashtag } from "../icons/remix/RiHashtag.js";
+import { useImageResolver } from "../image-resolver/context.js";
+import { useMessages } from "../locale/messages.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { PANEL_RADIUS, SUGGESTION_MAX_HEIGHT, SUGGESTION_ROW_HEIGHT, resolveChatComposerPalette } from "./shared.js";
+import { CHAT_COMPOSER_MESSAGES } from "./messages.js";
+import { dataHook, IS_WEB } from "./web-hooks.js";
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createSuggestionList({
+  Surface
+}) {
+  function isUrl(value) {
+    return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
+  }
+  function Leading({
+    kind,
+    suggestion
+  }) {
+    const theme = useTheme();
+    const palette = resolveChatComposerPalette(theme, useSurfaceFill());
+    const resolveImage = useImageResolver();
+    if (kind === 'emoji') {
+      return /*#__PURE__*/_jsx(Text, {
+        variant: "title-2-regular",
+        style: {
+          width: 28,
+          textAlign: 'center'
+        },
+        children: suggestion.emoji ?? suggestion.label
+      });
+    }
+    if (kind === 'mention') {
+      const uri = suggestion.avatar === undefined ? undefined : isUrl(suggestion.avatar) ? suggestion.avatar : resolveImage?.(suggestion.avatar, 'thumb');
+      return uri ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri
+        },
+        accessibilityIgnoresInvertColors: true,
+        style: {
+          width: 28,
+          height: 28,
+          borderRadius: 14,
+          backgroundColor: palette.inset
+        }
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 28,
+          height: 28,
+          borderRadius: 14,
+          backgroundColor: palette.inset,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-medium",
+          style: {
+            color: palette.textSecondary
+          },
+          children: suggestion.label.slice(0, 1).toUpperCase()
+        })
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 28,
+        height: 28,
+        borderRadius: 8,
+        backgroundColor: palette.inset,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(RiHashtag, {
+        width: 16,
+        height: 16,
+        fill: palette.iconSecondary
+      })
+    });
+  }
+  function SuggestionList({
+    kind,
+    suggestions,
+    activeIndex = -1,
+    onSelectSuggestion,
+    onActiveIndexChange,
+    header,
+    maxHeight = SUGGESTION_MAX_HEIGHT,
+    style,
+    testID,
+    accessibilityLabel
+  }) {
+    const theme = useTheme();
+    const palette = resolveChatComposerPalette(theme, useCardFill(style));
+    const {
+      messages
+    } = useMessages(CHAT_COMPOSER_MESSAGES);
+    if (suggestions.length === 0) return null;
+
+    // React Native's `Role` union has no `listbox`; react-native-web passes the
+    // DOM `role` straight through, so it travels as a web-only prop.
+    const listRole = IS_WEB ? {
+      role: 'listbox'
+    } : {
+      accessibilityRole: 'list'
+    };
+    const panel = {
+      borderRadius: PANEL_RADIUS,
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 6,
+      paddingRight: 6
+    };
+    return /*#__PURE__*/_jsxs(Surface, {
+      style: [panel, style],
+      testID: testID,
+      children: [header ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-medium",
+        style: {
+          color: palette.textSecondary,
+          paddingLeft: 8,
+          paddingRight: 8,
+          paddingTop: 2,
+          paddingBottom: 6
+        },
+        children: header
+      }) : null, /*#__PURE__*/_jsx(ScrollView, {
+        ...dataHook('bloomChatComposerScroll'),
+        ...listRole,
+        accessibilityLabel: accessibilityLabel ?? messages.suggestions[kind],
+        style: {
+          maxHeight
+        },
+        showsVerticalScrollIndicator: false,
+        children: suggestions.map((suggestion, index) => {
+          const active = index === activeIndex;
+          const row = {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 10,
+            minHeight: SUGGESTION_ROW_HEIGHT,
+            borderRadius: 10,
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingTop: 6,
+            paddingBottom: 6,
+            opacity: suggestion.disabled ? 0.5 : 1,
+            backgroundColor: active ? palette.hover : 'transparent',
+            cursor: suggestion.disabled ? 'auto' : 'pointer',
+            '--bloom-chat-composer-ring': palette.focusRing
+          };
+          const name = suggestion.handle ? `${suggestion.label} ${suggestion.handle}` : suggestion.label;
+          return /*#__PURE__*/_jsxs(Pressable, {
+            ...dataHook('bloomChatComposerRow'),
+            role: "option",
+            accessibilityLabel: name,
+            "aria-selected": active,
+            accessibilityState: {
+              selected: active,
+              disabled: suggestion.disabled
+            },
+            disabled: suggestion.disabled,
+            onPress: () => onSelectSuggestion?.(suggestion, index),
+            onHoverIn: () => onActiveIndexChange?.(index),
+            style: row,
+            testID: testID ? `${testID}-row-${suggestion.id}` : undefined,
+            children: [/*#__PURE__*/_jsx(Leading, {
+              kind: kind,
+              suggestion: suggestion
+            }), /*#__PURE__*/_jsxs(View, {
+              style: {
+                flexShrink: 1,
+                flexGrow: 1
+              },
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: {
+                  flexDirection: 'row',
+                  alignItems: 'baseline',
+                  gap: 6
+                },
+                children: [/*#__PURE__*/_jsx(Text, {
+                  variant: "body-medium",
+                  numberOfLines: 1,
+                  style: {
+                    color: palette.text
+                  },
+                  children: suggestion.label
+                }), suggestion.handle ? /*#__PURE__*/_jsx(Text, {
+                  variant: "body-2-regular",
+                  numberOfLines: 1,
+                  style: {
+                    color: palette.textSecondary,
+                    flexShrink: 1
+                  },
+                  children: suggestion.handle
+                }) : null]
+              }), suggestion.description ? /*#__PURE__*/_jsx(Text, {
+                variant: "caption-1-regular",
+                numberOfLines: 1,
+                style: {
+                  color: palette.textPlaceholder
+                },
+                children: suggestion.description
+              }) : null]
+            })]
+          }, suggestion.id);
+        })
+      })]
+    });
+  }
+  return SuggestionList;
+}
+//# sourceMappingURL=create-suggestion-list.js.map

package/lib/module/chat-composer/create-suggestion-list.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSurfaceFill","useCardFill","React","Image","Pressable","ScrollView","View","RiHashtag","useImageResolver","useMessages","useTheme","Text","PANEL_RADIUS","SUGGESTION_MAX_HEIGHT","SUGGESTION_ROW_HEIGHT","resolveChatComposerPalette","CHAT_COMPOSER_MESSAGES","dataHook","IS_WEB","jsx","_jsx","jsxs","_jsxs","createSuggestionList","Surface","isUrl","value","test","startsWith","Leading","kind","suggestion","theme","palette","resolveImage","variant","style","width","textAlign","children","emoji","label","uri","avatar","undefined","source","accessibilityIgnoresInvertColors","height","borderRadius","backgroundColor","inset","alignItems","justifyContent","color","textSecondary","slice","toUpperCase","fill","iconSecondary","SuggestionList","suggestions","activeIndex","onSelectSuggestion","onActiveIndexChange","header","maxHeight","testID","accessibilityLabel","messages","length","listRole","role","accessibilityRole","panel","paddingTop","paddingBottom","paddingLeft","paddingRight","showsVerticalScrollIndicator","map","index","active","row","flexDirection","gap","minHeight","opacity","disabled","hover","cursor","focusRing","name","handle","accessibilityState","selected","onPress","onHoverIn","id","flexShrink","flexGrow","numberOfLines","text","description","textPlaceholder"],"sourceRoot":"../../../src","sources":["chat-composer/create-suggestion-list.tsx"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,6BAA0B;AACzD,SAASC,WAAW,QAAQ,0BAAuB;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEjE,SAASC,SAAS,QAAQ,6BAA0B;AACpD,SAASC,gBAAgB,QAAQ,8BAA2B;AAC5D,SAASC,WAAW,QAAQ,uBAAoB;AAChD,SAASC,QAAQ,QAAQ,uBAAoB;AAE7C,SAASC,IAAI,QAAQ,wBAAe;AACpC,SACEC,YAAY,EACZC,qBAAqB,EACrBC,qBAAqB,EACrBC,0BAA0B,QACrB,aAAU;AACjB,SAASC,sBAAsB,QAAQ,eAAY;AAEnD,SAASC,QAAQ,EAAEC,MAAM,QAAQ,gBAAa;;AAE9C;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,OAAO,SAASC,oBAAoBA,CAAC;EAAEC;AAEvC,CAAC,EAAE;EAED,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,OAAOA,CAAC;IACfC,IAAI;IACJC;EAIF,CAAC,EAAE;IACD,MAAMC,KAAK,GAAGtB,QAAQ,CAAC,CAAC;IACxB,MAAMuB,OAAO,GAAGlB,0BAA0B,CAACiB,KAAK,EAAEhC,cAAc,CAAC,CAAC,CAAC;IACnE,MAAMkC,YAAY,GAAG1B,gBAAgB,CAAC,CAAC;IAEvC,IAAIsB,IAAI,KAAK,OAAO,EAAE;MACpB,oBACEV,IAAA,CAACT,IAAI;QAACwB,OAAO,EAAC,iBAAiB;QAACC,KAAK,EAAE;UAAEC,KAAK,EAAE,EAAE;UAAEC,SAAS,EAAE;QAAS,CAAE;QAAAC,QAAA,EACvER,UAAU,CAACS,KAAK,IAAIT,UAAU,CAACU;MAAK,CACjC,CAAC;IAEX;IACA,IAAIX,IAAI,KAAK,SAAS,EAAE;MACtB,MAAMY,GAAG,GACPX,UAAU,CAACY,MAAM,KAAKC,SAAS,GAC3BA,SAAS,GACTnB,KAAK,CAACM,UAAU,CAACY,MAAM,CAAC,GACtBZ,UAAU,CAACY,MAAM,GACjBT,YAAY,GAAGH,UAAU,CAACY,MAAM,EAAE,OAAO,CAAC;MAClD,OAAOD,GAAG,gBACRtB,IAAA,CAACjB,KAAK;QACJ0C,MAAM,EAAE;UAAEH;QAAI,CAAE;QAChBI,gCAAgC;QAChCV,KAAK,EAAE;UAAEC,KAAK,EAAE,EAAE;UAAEU,MAAM,EAAE,EAAE;UAAEC,YAAY,EAAE,EAAE;UAAEC,eAAe,EAAEhB,OAAO,CAACiB;QAAM;MAAE,CACpF,CAAC,gBAEF9B,IAAA,CAACd,IAAI;QACH8B,KAAK,EAAE;UACLC,KAAK,EAAE,EAAE;UACTU,MAAM,EAAE,EAAE;UACVC,YAAY,EAAE,EAAE;UAChBC,eAAe,EAAEhB,OAAO,CAACiB,KAAK;UAC9BC,UAAU,EAAE,QAAQ;UACpBC,cAAc,EAAE;QAClB,CAAE;QAAAb,QAAA,eACFnB,IAAA,CAACT,IAAI;UAACwB,OAAO,EAAC,eAAe;UAACC,KAAK,EAAE;YAAEiB,KAAK,EAAEpB,OAAO,CAACqB;UAAc,CAAE;UAAAf,QAAA,EACnER,UAAU,CAACU,KAAK,CAACc,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAACC,WAAW,CAAC;QAAC,CACvC;MAAC,CACH,CACP;IACH;IACA,oBACEpC,IAAA,CAACd,IAAI;MACH8B,KAAK,EAAE;QACLC,KAAK,EAAE,EAAE;QACTU,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,CAAC;QACfC,eAAe,EAAEhB,OAAO,CAACiB,KAAK;QAC9BC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE;MAClB,CAAE;MAAAb,QAAA,eACFnB,IAAA,CAACb,SAAS;QAAC8B,KAAK,EAAE,EAAG;QAACU,MAAM,EAAE,EAAG;QAACU,IAAI,EAAExB,OAAO,CAACyB;MAAc,CAAE;IAAC,CAC7D,CAAC;EAEX;EAEA,SAASC,cAAcA,CAAC;IACtB7B,IAAI;IACJ8B,WAAW;IACXC,WAAW,GAAG,CAAC,CAAC;IAChBC,kBAAkB;IAClBC,mBAAmB;IACnBC,MAAM;IACNC,SAAS,GAAGpD,qBAAqB;IACjCuB,KAAK;IACL8B,MAAM;IACNC;EACmB,CAAC,EAAE;IACtB,MAAMnC,KAAK,GAAGtB,QAAQ,CAAC,CAAC;IACxB,MAAMuB,OAAO,GAAGlB,0BAA0B,CAACiB,KAAK,EAAE/B,WAAW,CAACmC,KAAK,CAAC,CAAC;IACrE,MAAM;MAAEgC;IAAS,CAAC,GAAG3D,WAAW,CAACO,sBAAsB,CAAC;IACxD,IAAI4C,WAAW,CAACS,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;;IAEzC;IACA;IACA,MAAMC,QAAiC,GAAGpD,MAAM,GAAG;MAAEqD,IAAI,EAAE;IAAU,CAAC,GAAG;MAAEC,iBAAiB,EAAE;IAAO,CAAC;IAEtG,MAAMC,KAAkB,GAAG;MACzBzB,YAAY,EAAEpC,YAAY;MAC1B8D,UAAU,EAAE,CAAC;MACbC,aAAa,EAAE,CAAC;MAChBC,WAAW,EAAE,CAAC;MACdC,YAAY,EAAE;IAChB,CAAC;IAED,oBACEvD,KAAA,CAACE,OAAO;MAACY,KAAK,EAAE,CAACqC,KAAK,EAAErC,KAAK,CAAE;MAAC8B,MAAM,EAAEA,MAAO;MAAA3B,QAAA,GAC5CyB,MAAM,gBACL5C,IAAA,CAACT,IAAI;QACHwB,OAAO,EAAC,kBAAkB;QAC1BC,KAAK,EAAE;UACLiB,KAAK,EAAEpB,OAAO,CAACqB,aAAa;UAC5BsB,WAAW,EAAE,CAAC;UACdC,YAAY,EAAE,CAAC;UACfH,UAAU,EAAE,CAAC;UACbC,aAAa,EAAE;QACjB,CAAE;QAAApC,QAAA,EACDyB;MAAM,CACH,CAAC,GACL,IAAI,eACR5C,IAAA,CAACf,UAAU;QAAA,GACLY,QAAQ,CAAC,yBAAyB,CAAC;QAAA,GACnCqD,QAAQ;QACZH,kBAAkB,EAAEA,kBAAkB,IAAIC,QAAQ,CAACR,WAAW,CAAC9B,IAAI,CAAE;QACrEM,KAAK,EAAE;UAAE6B;QAAU,CAAE;QACrBa,4BAA4B,EAAE,KAAM;QAAAvC,QAAA,EACnCqB,WAAW,CAACmB,GAAG,CAAC,CAAChD,UAAU,EAAEiD,KAAK,KAAK;UACtC,MAAMC,MAAM,GAAGD,KAAK,KAAKnB,WAAW;UACpC,MAAMqB,GAAgB,GAAG;YACvBC,aAAa,EAAE,KAAK;YACpBhC,UAAU,EAAE,QAAQ;YACpBiC,GAAG,EAAE,EAAE;YACPC,SAAS,EAAEvE,qBAAqB;YAChCkC,YAAY,EAAE,EAAE;YAChB4B,WAAW,EAAE,CAAC;YACdC,YAAY,EAAE,CAAC;YACfH,UAAU,EAAE,CAAC;YACbC,aAAa,EAAE,CAAC;YAChBW,OAAO,EAAEvD,UAAU,CAACwD,QAAQ,GAAG,GAAG,GAAG,CAAC;YACtCtC,eAAe,EAAEgC,MAAM,GAAGhD,OAAO,CAACuD,KAAK,GAAG,aAAa;YACvDC,MAAM,EAAE1D,UAAU,CAACwD,QAAQ,GAAG,MAAM,GAAG,SAAS;YAChD,4BAA4B,EAAEtD,OAAO,CAACyD;UACxC,CAAC;UACD,MAAMC,IAAI,GAAG5D,UAAU,CAAC6D,MAAM,GAC1B,GAAG7D,UAAU,CAACU,KAAK,IAAIV,UAAU,CAAC6D,MAAM,EAAE,GAC1C7D,UAAU,CAACU,KAAK;UACpB,oBACEnB,KAAA,CAAClB,SAAS;YAAA,GAEJa,QAAQ,CAAC,sBAAsB,CAAC;YACpCsD,IAAI,EAAC,QAAQ;YACbJ,kBAAkB,EAAEwB,IAAK;YACzB,iBAAeV,MAAO;YACtBY,kBAAkB,EAAE;cAAEC,QAAQ,EAAEb,MAAM;cAAEM,QAAQ,EAAExD,UAAU,CAACwD;YAAS,CAAE;YACxEA,QAAQ,EAAExD,UAAU,CAACwD,QAAS;YAC9BQ,OAAO,EAAEA,CAAA,KAAMjC,kBAAkB,GAAG/B,UAAU,EAAEiD,KAAK,CAAE;YACvDgB,SAAS,EAAEA,CAAA,KAAMjC,mBAAmB,GAAGiB,KAAK,CAAE;YAC9C5C,KAAK,EAAE8C,GAAI;YACXhB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQnC,UAAU,CAACkE,EAAE,EAAE,GAAGrD,SAAU;YAAAL,QAAA,gBAC9DnB,IAAA,CAACS,OAAO;cAACC,IAAI,EAAEA,IAAK;cAACC,UAAU,EAAEA;YAAW,CAAE,CAAC,eAC/CT,KAAA,CAAChB,IAAI;cAAC8B,KAAK,EAAE;gBAAE8D,UAAU,EAAE,CAAC;gBAAEC,QAAQ,EAAE;cAAE,CAAE;cAAA5D,QAAA,gBAC1CjB,KAAA,CAAChB,IAAI;gBAAC8B,KAAK,EAAE;kBAAE+C,aAAa,EAAE,KAAK;kBAAEhC,UAAU,EAAE,UAAU;kBAAEiC,GAAG,EAAE;gBAAE,CAAE;gBAAA7C,QAAA,gBACpEnB,IAAA,CAACT,IAAI;kBAACwB,OAAO,EAAC,aAAa;kBAACiE,aAAa,EAAE,CAAE;kBAAChE,KAAK,EAAE;oBAAEiB,KAAK,EAAEpB,OAAO,CAACoE;kBAAK,CAAE;kBAAA9D,QAAA,EAC1ER,UAAU,CAACU;gBAAK,CACb,CAAC,EACNV,UAAU,CAAC6D,MAAM,gBAChBxE,IAAA,CAACT,IAAI;kBACHwB,OAAO,EAAC,gBAAgB;kBACxBiE,aAAa,EAAE,CAAE;kBACjBhE,KAAK,EAAE;oBAAEiB,KAAK,EAAEpB,OAAO,CAACqB,aAAa;oBAAE4C,UAAU,EAAE;kBAAE,CAAE;kBAAA3D,QAAA,EACtDR,UAAU,CAAC6D;gBAAM,CACd,CAAC,GACL,IAAI;cAAA,CACJ,CAAC,EACN7D,UAAU,CAACuE,WAAW,gBACrBlF,IAAA,CAACT,IAAI;gBACHwB,OAAO,EAAC,mBAAmB;gBAC3BiE,aAAa,EAAE,CAAE;gBACjBhE,KAAK,EAAE;kBAAEiB,KAAK,EAAEpB,OAAO,CAACsE;gBAAgB,CAAE;gBAAAhE,QAAA,EACzCR,UAAU,CAACuE;cAAW,CACnB,CAAC,GACL,IAAI;YAAA,CACJ,CAAC;UAAA,GAlCFvE,UAAU,CAACkE,EAmCP,CAAC;QAEhB,CAAC;MAAC,CACQ,CAAC;IAAA,CACN,CAAC;EAEd;EAEA,OAAOtC,cAAc;AACvB","ignoreList":[]}