@repzo/widget-react-native 1.0.9 → 1.2.0

package/lib/module/ui/components/Post.js

@@ -0,0 +1,1236 @@
+"use strict";
+
+/**
+ * A Send post over the host app — the mobile side of Send → Post.
+ *
+ * Sent as a badge or a snippet, it waits at the bottom of the screen (a pill
+ * or a card); tapping opens it in full. Sent as "full" it opens right away. A
+ * small post opens as a sheet over the app, a large one as a full screen.
+ * The full post has the body (paragraphs, lists, code, a button, social
+ * links), what the visitor already replied, and a reply box or reactions.
+ * Replies stay under the post and go to the inbox, where the team answers.
+ * A reaction answers it: the emoji pops, it says thanks, and goes.
+ *
+ * "Not now" — the ⌄ button, swiping the top down, tapping outside a sheet, or
+ * Android's back — minimizes it back to its pill (or snippet card), where it
+ * stays, on later launches too. × closes it for good (the next post loads).
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Modal, PanResponder, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, useWindowDimensions } from 'react-native';
+import { formatLabel } from "../../i18n.js";
+import { useKeyboardOverlap } from "../hooks/use-keyboard-overlap.js";
+import { useReduceMotion } from "../hooks/use-reduce-motion.js";
+import { contrastingTextColor, fontSize, palette, radius, shadows, spacing, withAlpha } from "../styles/theme.js";
+import { openExternalUrl } from "../utils/safe-url.js";
+import { parsePostHtml } from "../utils/post-html.js";
+import { START_ALIGN } from "../utils/rtl.js";
+import { Avatar } from "./Avatar.js";
+import { ArrowUpIcon, ChevronIcon, CloseIcon } from "./icons.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function PostOverlay(props) {
+  const {
+    post,
+    expanded,
+    onShown
+  } = props;
+  // Reported once per post per session (the store dedupes).
+  useEffect(() => {
+    onShown(post.id);
+  }, [onShown, post.id]);
+  if (expanded) return /*#__PURE__*/_jsx(PostFull, {
+    ...props
+  });
+  // A snippet waits as its card; a badge — or a full post put away for later — as the pill.
+  return post.sentAs === 'snippet' ? /*#__PURE__*/_jsx(PostCard, {
+    ...props
+  }) : /*#__PURE__*/_jsx(PostBadge, {
+    ...props
+  });
+}
+function senderLine(post, labels) {
+  if (post.sender && post.workspaceName) {
+    return formatLabel(labels.from, {
+      name: post.sender.name,
+      workspace: post.workspaceName
+    });
+  }
+  return post.sender?.name || post.workspaceName || labels.newMessage;
+}
+
+/**
+ * Slides a card in from below and tells screen-reader users it arrived — the
+ * way the in-app notification card does. Holds still under Reduce Motion.
+ */
+function useArrival(accessibilityLabel) {
+  const reduceMotion = useReduceMotion();
+  // Read as "hold still" until the setting is known (see useReduceMotion).
+  const animate = reduceMotion === false;
+  const entry = useRef(new Animated.Value(animate ? 0 : 1)).current;
+
+  // Runs per mount: a new post, or the card coming back after the messenger.
+  useEffect(() => {
+    if (animate) {
+      Animated.spring(entry, {
+        toValue: 1,
+        useNativeDriver: true,
+        speed: 16,
+        bounciness: 4
+      }).start();
+    }
+    AccessibilityInfo.announceForAccessibility(accessibilityLabel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    opacity: entry,
+    transform: [{
+      translateY: entry.interpolate({
+        inputRange: [0, 1],
+        outputRange: [spacing.lg, 0]
+      })
+    }]
+  };
+}
+function CloseButton({
+  label,
+  onPress,
+  color = palette.textMuted
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    hitSlop: 10,
+    style: ({
+      pressed
+    }) => [styles.close, pressed && styles.pressed],
+    children: /*#__PURE__*/_jsx(CloseIcon, {
+      size: 14,
+      color: color
+    })
+  });
+}
+function MinimizeButton({
+  label,
+  onPress
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    hitSlop: 10,
+    style: ({
+      pressed
+    }) => [styles.close, pressed && styles.pressed],
+    children: /*#__PURE__*/_jsx(ChevronIcon, {
+      size: 16,
+      direction: "down",
+      color: palette.textMuted
+    })
+  });
+}
+
+/** How far the top must be dragged down to minimize — or a quick flick. */
+const MINIMIZE_DISTANCE = 120;
+const MINIMIZE_VELOCITY = 0.8;
+
+/**
+ * Dragging the post's top edge down minimizes it, the way a sheet slides away.
+ * Pure JS (PanResponder), like the in-app notification's swipe.
+ */
+function useSwipeToMinimize(onMinimize) {
+  const {
+    height
+  } = useWindowDimensions();
+  const reduceMotion = useReduceMotion();
+  const drag = useRef(new Animated.Value(0)).current;
+  // Read through a ref: the provider re-renders on every store change, and a
+  // PanResponder rebuilt mid-drag would restart the gesture.
+  const minimizeRef = useRef(onMinimize);
+  minimizeRef.current = onMinimize;
+  const handlers = useMemo(() => {
+    const settle = () => Animated.spring(drag, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 4
+    }).start();
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 6 && gesture.dy > Math.abs(gesture.dx) * 1.5,
+      onPanResponderMove: (_, gesture) => drag.setValue(Math.max(0, gesture.dy)),
+      onPanResponderRelease: (_, gesture) => {
+        if (gesture.dy < MINIMIZE_DISTANCE && gesture.vy < MINIMIZE_VELOCITY) {
+          settle();
+          return;
+        }
+        Animated.timing(drag, {
+          toValue: height,
+          duration: reduceMotion === false ? 200 : 0,
+          useNativeDriver: true
+        }).start(() => minimizeRef.current());
+      },
+      onPanResponderTerminate: settle
+    });
+  }, [drag, height, reduceMotion]);
+  return {
+    panHandlers: handlers.panHandlers,
+    // Never above where it started.
+    translateY: drag.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+      extrapolateLeft: 'clamp'
+    }),
+    // The dimmed backdrop lightens as the sheet goes.
+    backdropOpacity: drag.interpolate({
+      inputRange: [0, 400],
+      outputRange: [1, 0],
+      extrapolate: 'clamp'
+    })
+  };
+}
+
+/** Snippet: a card at the bottom with who it's from and the first words. */
+function PostCard({
+  post,
+  color,
+  insets,
+  labels,
+  onExpand,
+  onInteract
+}) {
+  const accessibilityLabel = [senderLine(post, labels), post.snippet].filter(Boolean).join(': ');
+  const arrival = useArrival(accessibilityLabel);
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    style: [styles.bottomWrap, {
+      bottom: insets.bottom + spacing.md
+    }],
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.card, arrival],
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        onPress: () => onExpand(post.id),
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel,
+        accessibilityHint: labels.openHint,
+        style: ({
+          pressed
+        }) => [styles.cardBody, pressed && styles.pressed],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.cardHead,
+          children: [/*#__PURE__*/_jsx(Avatar, {
+            avatar: post.sender?.avatarUrl,
+            name: post.sender?.name ?? post.workspaceName,
+            color: color,
+            size: 28
+          }), /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: styles.senderText,
+            children: senderLine(post, labels)
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 3,
+          style: styles.snippet,
+          children: post.snippet || labels.newMessage
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.cardClose,
+        children: /*#__PURE__*/_jsx(CloseButton, {
+          label: labels.close,
+          onPress: () => void onInteract(post.id, 'dismiss')
+        })
+      })]
+    })
+  });
+}
+
+/** Badge: a small pill — the sender and a dot — that opens the post. */
+function PostBadge({
+  post,
+  color,
+  insets,
+  labels,
+  onExpand,
+  onInteract
+}) {
+  const accessibilityLabel = [post.sender?.name || labels.newMessage, post.snippet].filter(Boolean).join(': ');
+  const arrival = useArrival(accessibilityLabel);
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    pointerEvents: "box-none",
+    style: [styles.badgeWrap, {
+      bottom: insets.bottom + spacing.md
+    }, arrival],
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => onExpand(post.id),
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: labels.openHint,
+      style: ({
+        pressed
+      }) => [styles.pill, pressed && styles.pressed],
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        avatar: post.sender?.avatarUrl,
+        name: post.sender?.name ?? post.workspaceName,
+        color: color,
+        size: 28
+      }), /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: styles.pillText,
+        children: post.sender?.name ?? labels.newMessage
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.dot
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.pillClose,
+      children: /*#__PURE__*/_jsx(CloseButton, {
+        label: labels.close,
+        onPress: () => void onInteract(post.id, 'dismiss')
+      })
+    })]
+  });
+}
+
+/** The post in full: a sheet (small) or a full screen (large). */
+/** How long iOS gets to present the post before it's treated as blocked (another modal was up). */
+const PRESENT_TIMEOUT_MS = 2500;
+function PostFull({
+  post,
+  color,
+  insets,
+  labels,
+  onMinimize,
+  onCollapse,
+  onOpenConversation,
+  onInteract
+}) {
+  const large = post.format === 'large';
+  // KeyboardAvoidingView misplaces the composer inside a modal (see the hook);
+  // this is the same lift the messenger's panel uses.
+  const keyboard = useKeyboardOverlap(true, insets.bottom);
+  const dismiss = () => void onInteract(post.id, 'dismiss');
+  const minimize = () => onMinimize(post.id);
+  const swipe = useSwipeToMinimize(minimize);
+  const click = href => {
+    void onInteract(post.id, 'click', href);
+    void openExternalUrl(href);
+    // A link the app routes in-app would otherwise open behind the post.
+    onCollapse(post.id);
+  };
+
+  // iOS presents one modal at a time: if the app had its own up (a Modal, an
+  // alert, a modal screen), this one never shows and onShow never fires. Fall
+  // back to the pill instead of leaving an invisible post.
+  const shown = useRef(false);
+  const collapseRef = useRef(onCollapse);
+  collapseRef.current = onCollapse;
+  useEffect(() => {
+    if (Platform.OS !== 'ios') return undefined;
+    const timer = setTimeout(() => {
+      if (!shown.current) collapseRef.current(post.id);
+    }, PRESENT_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [post.id]);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      ...swipe.panHandlers,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.grabber
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.fullHead,
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          avatar: post.sender?.avatarUrl,
+          name: post.sender?.name ?? post.workspaceName,
+          color: color,
+          size: 32
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [styles.senderText, styles.fullSender],
+          children: senderLine(post, labels)
+        }), /*#__PURE__*/_jsx(MinimizeButton, {
+          label: labels.minimize,
+          onPress: minimize
+        }), /*#__PURE__*/_jsx(CloseButton, {
+          label: labels.close,
+          onPress: dismiss
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      style: large ? styles.flex : styles.fullScroll,
+      contentContainerStyle: styles.fullBody,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/_jsx(PostBody, {
+        html: post.bodyHtml,
+        color: color,
+        onLink: click
+      }), post.thread.length > 0 ? /*#__PURE__*/_jsxs(View, {
+        style: styles.replies,
+        accessibilityLabel: labels.conversation,
+        children: [post.thread.map((message, index) => {
+          const team = message.from === 'team';
+          const previous = post.thread[index - 1];
+          // The teammate's name over the first of their answers in a row.
+          const showName = team && !!message.senderName && !(previous?.from === 'team' && previous.senderName === message.senderName);
+          return /*#__PURE__*/_jsxs(View, {
+            style: team ? styles.answerWrap : styles.replyWrap,
+            children: [showName ? /*#__PURE__*/_jsx(Text, {
+              style: styles.replyMeta,
+              children: message.senderName
+            }) : null, /*#__PURE__*/_jsx(View, {
+              style: team ? styles.answer : [styles.reply, {
+                backgroundColor: color
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.replyText, {
+                  color: team ? palette.text : contrastingTextColor(color)
+                }],
+                children: message.text
+              })
+            }), team ? null : /*#__PURE__*/_jsx(Text, {
+              style: styles.replyMeta,
+              children: labels.sent
+            })]
+          }, `${message.at}-${index}`);
+        }), post.conversationId ? /*#__PURE__*/_jsx(Pressable, {
+          onPress: () => onOpenConversation(post.id, post.conversationId),
+          accessibilityRole: "button",
+          accessibilityLabel: labels.continueChat,
+          hitSlop: 8,
+          style: ({
+            pressed
+          }) => [styles.continue, pressed && styles.pressed],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.continueText, {
+              color: contrastingTextColor(color) === palette.ink ? palette.text : color
+            }],
+            children: labels.continueChat
+          })
+        }) : null]
+      }) : null]
+    }), /*#__PURE__*/_jsx(PostFooter, {
+      post: post,
+      color: color,
+      labels: labels,
+      onInteract: onInteract
+    })]
+  });
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true
+    // Transparent either way, so swiping a large post down shows the app under it.
+    ,
+    transparent: true,
+    animationType: large ? 'slide' : 'fade',
+    presentationStyle: "overFullScreen",
+    statusBarTranslucent: true,
+    onShow: () => {
+      shown.current = true;
+    }
+    // Back is "not now", not ×.
+    ,
+    onRequestClose: minimize,
+    children: large ? /*#__PURE__*/_jsx(Animated.View, {
+      accessibilityViewIsModal: true
+      // VoiceOver's two-finger scrub: "not now".
+      ,
+      onAccessibilityEscape: minimize,
+      style: [styles.flex, styles.page, {
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        transform: [{
+          translateY: swipe.translateY
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        onLayout: keyboard.onLayout,
+        style: [styles.flex, {
+          paddingBottom: keyboard.overlap
+        }],
+        children: content
+      })
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: styles.flex,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [StyleSheet.absoluteFill, styles.backdropTint, {
+          opacity: swipe.backdropOpacity
+        }]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.backdrop, {
+          paddingTop: insets.top + spacing.xl,
+          paddingBottom: insets.bottom + spacing.md
+        }],
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: minimize,
+          accessibilityRole: "button",
+          accessibilityLabel: labels.minimize
+        }), /*#__PURE__*/_jsx(View, {
+          onLayout: keyboard.onLayout,
+          pointerEvents: "box-none",
+          style: [styles.sheetArea, {
+            paddingBottom: keyboard.overlap
+          }],
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: minimize,
+            style: [styles.sheet, {
+              transform: [{
+                translateY: swipe.translateY
+              }]
+            }],
+            children: content
+          })
+        })]
+      })]
+    })
+  });
+}
+function PostFooter({
+  post,
+  color,
+  labels,
+  onInteract
+}) {
+  const [text, setText] = useState('');
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [focused, setFocused] = useState(false);
+  if (post.replyType === 'reaction' && post.reactions.length > 0) {
+    return /*#__PURE__*/_jsx(PostReactions, {
+      post: post,
+      color: color,
+      labels: labels,
+      onInteract: onInteract
+    });
+  }
+  if (post.replyType !== 'text') return null;
+  const value = text.trim();
+  const canSend = !!value && !sending;
+  const send = async () => {
+    if (!canSend) return;
+    setSending(true);
+    setFailed(false);
+    try {
+      await onInteract(post.id, 'reply', value);
+      setText('');
+    } catch {
+      setFailed(true);
+    } finally {
+      setSending(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.footer,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.composer, focused && styles.composerFocused],
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        value: text,
+        onChangeText: setText,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        placeholder: labels.replyPlaceholder,
+        placeholderTextColor: palette.textSubtle,
+        accessibilityLabel: labels.replyPlaceholder,
+        maxLength: 2000,
+        multiline: true,
+        editable: !sending,
+        style: styles.input
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: send,
+        disabled: !canSend,
+        accessibilityRole: "button",
+        accessibilityLabel: labels.send,
+        accessibilityState: {
+          disabled: !canSend
+        }
+        // 36pt circle + 4pt on every side = a 44pt target.
+        ,
+        hitSlop: 4,
+        style: ({
+          pressed
+        }) => [styles.send, canSend ? {
+          backgroundColor: color
+        } : styles.sendDisabled, pressed && canSend && styles.pressed],
+        children: /*#__PURE__*/_jsx(ArrowUpIcon, {
+          size: 18,
+          color: canSend ? contrastingTextColor(color) : palette.textSubtle
+        })
+      })]
+    }), failed ? /*#__PURE__*/_jsx(Text, {
+      accessibilityRole: "alert",
+      style: styles.error,
+      children: labels.replyFailed
+    }) : null]
+  });
+}
+
+/**
+ * The reaction row. A tap pops the emoji and throws a few copies of it (the
+ * shared reaction burst), then thanks them; the store takes the post away a
+ * moment later. Another tap in that moment changes their pick.
+ */
+function PostReactions({
+  post,
+  color,
+  labels,
+  onInteract
+}) {
+  const [thanked, setThanked] = useState(false);
+  const react = emoji => {
+    if (!thanked) {
+      setThanked(true);
+      AccessibilityInfo.announceForAccessibility(labels.thanks);
+    }
+    void onInteract(post.id, 'reaction', emoji);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.footer,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.reactions,
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: labels.reactions,
+      children: post.reactions.map(emoji => /*#__PURE__*/_jsx(ReactionChip, {
+        emoji: emoji,
+        color: color,
+        picked: post.reacted === emoji,
+        dimmed: !!post.reacted && post.reacted !== emoji,
+        onPress: () => react(emoji)
+      }, emoji))
+    }), thanked && post.reacted ? /*#__PURE__*/_jsx(Text, {
+      accessibilityLiveRegion: "polite",
+      style: styles.thanks,
+      children: labels.thanks
+    }) : null]
+  });
+}
+
+/** Where the burst's copies fly: a fan above the chip. */
+const SPARKS = [-70, -40, -12, 12, 40, 70].map((degrees, index) => {
+  const angle = (degrees - 90) * Math.PI / 180;
+  const distance = index % 2 ? 54 : 44;
+  return {
+    x: Math.cos(angle) * distance,
+    y: Math.sin(angle) * distance
+  };
+});
+function ReactionChip({
+  emoji,
+  color,
+  picked,
+  dimmed,
+  onPress
+}) {
+  const reduceMotion = useReduceMotion();
+  const scale = useRef(new Animated.Value(1)).current;
+  const spark = useRef(new Animated.Value(0)).current;
+  const [bursting, setBursting] = useState(false);
+  const press = () => {
+    onPress();
+    if (reduceMotion !== false) return;
+    scale.setValue(1);
+    Animated.sequence([Animated.timing(scale, {
+      toValue: 1.35,
+      duration: 120,
+      useNativeDriver: true
+    }), Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 14,
+      bounciness: 12
+    })]).start();
+    spark.setValue(0);
+    setBursting(true);
+    Animated.timing(spark, {
+      toValue: 1,
+      duration: 650,
+      useNativeDriver: true
+    }).start(({
+      finished
+    }) => {
+      if (finished) setBursting(false);
+    });
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: press,
+    accessibilityRole: "radio",
+    accessibilityState: {
+      checked: picked
+    },
+    accessibilityLabel: emoji,
+    style: ({
+      pressed
+    }) => [styles.reaction, picked && {
+      borderColor: color,
+      backgroundColor: withAlpha(color, 0.12)
+    }, dimmed ? styles.reactionDim : null, pressed && styles.pressed],
+    children: [/*#__PURE__*/_jsx(Animated.Text, {
+      style: [styles.reactionEmoji, {
+        transform: [{
+          scale
+        }]
+      }],
+      children: emoji
+    }), bursting ? SPARKS.map((to, index) => /*#__PURE__*/_jsx(Animated.Text, {
+      pointerEvents: "none",
+      importantForAccessibility: "no-hide-descendants",
+      accessibilityElementsHidden: true,
+      style: [styles.spark, {
+        opacity: spark.interpolate({
+          inputRange: [0, 0.6, 1],
+          outputRange: [1, 0.9, 0]
+        }),
+        transform: [{
+          translateX: spark.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, to.x]
+          })
+        }, {
+          translateY: spark.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, to.y]
+          })
+        }, {
+          scale: spark.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.6, 1.1]
+          })
+        }]
+      }],
+      children: emoji
+    }, index)) : null]
+  });
+}
+
+// ─── Body ──────────────────────────────────────────────────────────────────
+
+const ALIGN_ITEMS = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+
+/** Brand marks drawn as a colored circle and letters — the SDK ships no SVG renderer. */
+const SOCIAL = {
+  facebook: {
+    label: 'Facebook',
+    glyph: 'f',
+    color: '#1877F2'
+  },
+  // A plain X: the math-letter 𝕏 is missing from some Android fonts.
+  x: {
+    label: 'X',
+    glyph: 'X',
+    color: '#000000'
+  },
+  linkedin: {
+    label: 'LinkedIn',
+    glyph: 'in',
+    color: '#0A66C2'
+  },
+  instagram: {
+    label: 'Instagram',
+    glyph: 'IG',
+    color: '#E4405F'
+  },
+  youtube: {
+    label: 'YouTube',
+    glyph: '▶',
+    color: '#FF0000'
+  }
+};
+function Runs({
+  runs,
+  color,
+  onLink
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: runs.map((run, index) => /*#__PURE__*/_jsx(Text, {
+      onPress: run.href ? () => onLink(run.href) : undefined,
+      accessibilityRole: run.href ? 'link' : undefined,
+      style: [run.bold && styles.bold, run.italic && styles.italic, run.code && styles.inlineCode, run.href ? [styles.link, {
+        color: contrastingTextColor(color) === palette.ink ? palette.text : color
+      }] : null],
+      children: run.text
+    }, index))
+  });
+}
+
+/** "1." / "•" per item, numbering each nested list on its own. */
+function listMarkers(levels) {
+  const counts = [];
+  return levels.map(({
+    depth,
+    ordered
+  }) => {
+    counts.length = depth + 1;
+    counts[depth] = (counts[depth] ?? 0) + 1;
+    if (ordered) return `${counts[depth]}.`;
+    return depth === 0 ? '•' : '◦';
+  });
+}
+export function PostBody({
+  html,
+  color,
+  onLink
+}) {
+  // The provider re-renders on every store change (typing, new messages).
+  const blocks = useMemo(() => parsePostHtml(html), [html]);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.body,
+    children: blocks.map((block, index) => {
+      if (block.type === 'paragraph') {
+        return /*#__PURE__*/_jsx(Text, {
+          style: styles.paragraph,
+          children: /*#__PURE__*/_jsx(Runs, {
+            runs: block.runs,
+            color: color,
+            onLink: onLink
+          })
+        }, index);
+      }
+      if (block.type === 'list') {
+        const markers = listMarkers(block.levels);
+        return /*#__PURE__*/_jsx(View, {
+          style: styles.list,
+          children: block.items.map((item, itemIndex) => /*#__PURE__*/_jsxs(View, {
+            style: [styles.listItem, {
+              paddingStart: (block.levels[itemIndex]?.depth ?? 0) * spacing.lg
+            }],
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.marker,
+              children: markers[itemIndex]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.paragraph, styles.listText],
+              children: /*#__PURE__*/_jsx(Runs, {
+                runs: item,
+                color: color,
+                onLink: onLink
+              })
+            })]
+          }, itemIndex))
+        }, index);
+      }
+      if (block.type === 'code') {
+        return /*#__PURE__*/_jsx(View, {
+          style: styles.codeBlock,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.codeText,
+            children: block.text
+          })
+        }, index);
+      }
+      if (block.type === 'button') {
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            alignItems: ALIGN_ITEMS[block.align]
+          },
+          children: /*#__PURE__*/_jsx(Pressable, {
+            onPress: () => onLink(block.href),
+            accessibilityRole: "link",
+            style: ({
+              pressed
+            }) => [styles.button, {
+              backgroundColor: color
+            }, pressed && styles.pressed],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.buttonText, {
+                color: contrastingTextColor(color)
+              }],
+              children: block.label
+            })
+          })
+        }, index);
+      }
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.social, {
+          justifyContent: ALIGN_ITEMS[block.align]
+        }],
+        children: block.links.map(link => {
+          const mark = SOCIAL[link.network];
+          return /*#__PURE__*/_jsx(Pressable, {
+            onPress: () => onLink(link.href),
+            accessibilityRole: "link",
+            accessibilityLabel: mark.label,
+            hitSlop: 6,
+            style: ({
+              pressed
+            }) => [styles.socialMark, {
+              backgroundColor: mark.color
+            }, pressed && styles.pressed],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.socialGlyph,
+              children: mark.glyph
+            })
+          }, `${link.network}-${link.href}`);
+        })
+      }, index);
+    })
+  });
+}
+const CLOSE_SIZE = 32;
+const LINE_HEIGHT = 1.45;
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  pressed: {
+    opacity: 0.85
+  },
+  close: {
+    width: CLOSE_SIZE,
+    height: CLOSE_SIZE,
+    borderRadius: radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  bottomWrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingHorizontal: spacing.lg,
+    alignItems: 'center',
+    zIndex: 1000,
+    elevation: 1000
+  },
+  card: {
+    width: '100%',
+    maxWidth: 480,
+    borderRadius: radius.xl,
+    backgroundColor: palette.white,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    ...shadows.floating
+  },
+  cardBody: {
+    paddingVertical: spacing.md,
+    paddingStart: spacing.lg,
+    // Room for the × in the corner.
+    paddingEnd: CLOSE_SIZE + spacing.lg,
+    gap: spacing.sm,
+    borderRadius: radius.xl
+  },
+  cardHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm
+  },
+  cardClose: {
+    position: 'absolute',
+    top: spacing.sm,
+    end: spacing.sm
+  },
+  senderText: {
+    flexShrink: 1,
+    color: palette.textMuted,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    textAlign: START_ALIGN
+  },
+  snippet: {
+    color: palette.text,
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * LINE_HEIGHT,
+    textAlign: START_ALIGN
+  },
+  badgeWrap: {
+    position: 'absolute',
+    end: spacing.lg,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    zIndex: 1000,
+    elevation: 1000
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: 44,
+    paddingVertical: spacing.xs,
+    paddingStart: spacing.xs,
+    paddingEnd: spacing.md,
+    borderRadius: radius.pill,
+    backgroundColor: palette.white,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    ...shadows.floating
+  },
+  pillText: {
+    maxWidth: 180,
+    color: palette.text,
+    fontSize: fontSize.meta,
+    fontWeight: '600'
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: palette.danger
+  },
+  pillClose: {
+    borderRadius: radius.pill,
+    backgroundColor: palette.white,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    ...shadows.card
+  },
+  backdrop: {
+    flex: 1,
+    paddingHorizontal: spacing.md
+  },
+  backdropTint: {
+    backgroundColor: 'rgba(15, 23, 42, 0.45)'
+  },
+  sheetArea: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  sheet: {
+    maxHeight: '100%',
+    borderRadius: radius.xl,
+    backgroundColor: palette.white,
+    overflow: 'hidden',
+    ...shadows.floating
+  },
+  page: {
+    backgroundColor: palette.white
+  },
+  grabber: {
+    alignSelf: 'center',
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    marginTop: spacing.sm,
+    backgroundColor: palette.border
+  },
+  fullHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingStart: spacing.lg,
+    paddingEnd: spacing.sm,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.md
+  },
+  fullSender: {
+    flex: 1
+  },
+  fullScroll: {
+    flexGrow: 0,
+    flexShrink: 1
+  },
+  fullBody: {
+    paddingHorizontal: spacing.lg,
+    paddingBottom: spacing.lg,
+    gap: spacing.lg
+  },
+  body: {
+    gap: spacing.md
+  },
+  paragraph: {
+    color: palette.text,
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * LINE_HEIGHT,
+    textAlign: START_ALIGN
+  },
+  bold: {
+    fontWeight: '700'
+  },
+  italic: {
+    fontStyle: 'italic'
+  },
+  inlineCode: {
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      default: 'monospace'
+    }),
+    fontSize: fontSize.meta,
+    backgroundColor: palette.surfaceAlt
+  },
+  link: {
+    textDecorationLine: 'underline',
+    fontWeight: '600'
+  },
+  list: {
+    gap: spacing.xs
+  },
+  listItem: {
+    flexDirection: 'row',
+    gap: spacing.sm
+  },
+  marker: {
+    minWidth: spacing.lg,
+    color: palette.textMuted,
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * LINE_HEIGHT
+  },
+  listText: {
+    flex: 1
+  },
+  codeBlock: {
+    borderRadius: radius.md,
+    backgroundColor: palette.surfaceAlt,
+    padding: spacing.md
+  },
+  codeText: {
+    color: palette.text,
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      default: 'monospace'
+    }),
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * LINE_HEIGHT
+  },
+  button: {
+    minHeight: 44,
+    paddingHorizontal: spacing.lg,
+    borderRadius: radius.md,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonText: {
+    fontSize: fontSize.body,
+    fontWeight: '700'
+  },
+  social: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.sm
+  },
+  socialMark: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  socialGlyph: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: '800'
+  },
+  replies: {
+    gap: spacing.sm
+  },
+  replyWrap: {
+    alignItems: 'flex-end',
+    gap: spacing.xs / 2
+  },
+  answerWrap: {
+    alignItems: 'flex-start',
+    gap: spacing.xs / 2
+  },
+  answer: {
+    maxWidth: '85%',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.xl,
+    borderBottomStartRadius: spacing.xs,
+    backgroundColor: palette.surfaceAlt
+  },
+  continue: {
+    alignSelf: 'center',
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    marginTop: spacing.xs
+  },
+  continueText: {
+    fontSize: fontSize.meta,
+    fontWeight: '600'
+  },
+  reply: {
+    maxWidth: '85%',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: radius.xl,
+    borderBottomEndRadius: spacing.xs
+  },
+  replyText: {
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * LINE_HEIGHT
+  },
+  replyMeta: {
+    color: palette.textSubtle,
+    fontSize: fontSize.caption
+  },
+  footer: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: palette.border,
+    backgroundColor: palette.white,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    gap: spacing.xs
+  },
+  // Matches the messenger's composer (ChatView.styles.ts).
+  composer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: spacing.sm,
+    minHeight: 48,
+    backgroundColor: palette.surfaceAlt,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: palette.border,
+    paddingStart: spacing.lg,
+    paddingEnd: spacing.xs + 2,
+    paddingVertical: spacing.xs + 2
+  },
+  composerFocused: {
+    backgroundColor: palette.white
+  },
+  input: {
+    flex: 1,
+    maxHeight: 120,
+    padding: 0,
+    paddingTop: 6,
+    paddingBottom: 6,
+    color: palette.ink,
+    fontSize: fontSize.input,
+    lineHeight: fontSize.input * 1.4,
+    textAlign: START_ALIGN
+  },
+  send: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  sendDisabled: {
+    backgroundColor: palette.surfaceAlt
+  },
+  error: {
+    color: palette.danger,
+    fontSize: fontSize.caption
+  },
+  reactions: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.xs
+  },
+  reaction: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.white,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  reactionDim: {
+    opacity: 0.5
+  },
+  reactionEmoji: {
+    fontSize: 24
+  },
+  spark: {
+    position: 'absolute',
+    fontSize: 16
+  },
+  thanks: {
+    textAlign: 'center',
+    color: palette.text,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+    paddingBottom: spacing.xs
+  }
+});
+//# sourceMappingURL=Post.js.map