@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/cjs/layouts/timeline.cjs

@@ -33,15 +33,33 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var timeline_exports = {};
 __export(timeline_exports, {
-  Timeline: () => Timeline
+  Timeline: () => Timeline,
+  formatRelativeTimestamp: () => import_theme2.formatRelativeTimestamp,
+  getEntryDisplayName: () => getEntryDisplayName,
+  prettifyAuthorName: () => prettifyAuthorName,
+  threadEntries: () => threadEntries
 });
 module.exports = __toCommonJS(timeline_exports);
 var import_react = require("@phosphor-icons/react");
+var import_useDirection = require("../hooks/useDirection.cjs");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = __toESM(require("react"));
+var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
+var import_Avatar = require("../Avatar/index.cjs");
 var import_componentColors = require("../componentColors.cjs");
+var import_t = require("../shared/t.cjs");
+var import_Skeleton = require("../Skeleton/index.cjs");
+var import_AsyncBoundary = require("./AsyncBoundary.cjs");
+var import_theme2 = require("@multiplatform.one/theme");
 var import_jsx_runtime = require("react/jsx-runtime");
+const TIMELINE_HEADING_TAGS = {
+  2: import_tamagui.H2,
+  3: import_tamagui.H3,
+  4: import_tamagui.H4,
+  5: import_tamagui.H5,
+  6: import_tamagui.H6
+};
 function getEntryIcon(entry, size) {
   switch (entry.type) {
     case "comment":
@@ -70,22 +88,68 @@ function getEntryIcon(entry, size) {
       });
   }
 }
-function getInitials(name) {
-  const parts = name.split(/[\s@]/);
-  if (parts.length >= 2) {
-    return (parts[0][0] + parts[1][0]).toUpperCase();
-  }
-  return name.substring(0, 2).toUpperCase();
+function prettifyAuthorName(raw) {
+  const name = (raw ?? "").trim();
+  if (!name) return "Unknown";
+  if (!name.includes("@")) return name;
+  const local = name.split("@")[0];
+  const words = local.split(/[._+\-\d]+/).filter(Boolean);
+  if (words.length === 0) return local || "Unknown";
+  return words.map(w => w[0].toUpperCase() + w.slice(1)).join(" ");
+}
+function getEntryDisplayName(entry) {
+  return entry.authorName?.trim() || prettifyAuthorName(entry.author);
 }
 function defaultFormatTimestamp(timestamp) {
-  try {
-    return new Date(timestamp).toLocaleString();
-  } catch {
-    return timestamp;
-  }
+  return (0, import_theme.formatAbsoluteDateTime)(timestamp);
 }
-function getEntrySubTitle(entry, formatTimestamp) {
-  return formatTimestamp(entry.timestamp);
+function threadEntries(entries) {
+  const byId = new Map(entries.map(e => [e.id, e]));
+  const rootOf = entry => {
+    let current = entry;
+    const seen = /* @__PURE__ */new Set([current.id]);
+    while (current.parentId) {
+      const parent = byId.get(current.parentId);
+      if (!parent || seen.has(parent.id)) break;
+      seen.add(parent.id);
+      current = parent;
+    }
+    return current;
+  };
+  const threads = [];
+  const threadByRootId = /* @__PURE__ */new Map();
+  for (const entry of entries) {
+    if (rootOf(entry).id !== entry.id) continue;
+    const thread = {
+      entry,
+      replies: []
+    };
+    threads.push(thread);
+    threadByRootId.set(entry.id, thread);
+  }
+  for (const entry of entries) {
+    const root = rootOf(entry);
+    if (root.id === entry.id) continue;
+    const thread = threadByRootId.get(root.id);
+    if (thread) {
+      thread.replies.push(entry);
+    } else {
+      const fallback = {
+        entry,
+        replies: []
+      };
+      threads.push(fallback);
+      threadByRootId.set(entry.id, fallback);
+    }
+  }
+  const time = e => {
+    const t = new Date(e.timestamp).getTime();
+    return Number.isNaN(t) ? 0 : t;
+  };
+  for (const thread of threads) {
+    thread.replies.sort((a, b) => time(a) - time(b));
+  }
+  return threads;
 }
 function getEntryActionLabel(entry, labels) {
   if (entry.type === "version") return labels.madeChanges;
@@ -93,61 +157,152 @@ function getEntryActionLabel(entry, labels) {
   if (entry.type === "assignment") return labels.assigned;
   return void 0;
 }
+function TimelineSkeleton({
+  compact,
+  avatarPx,
+  loadingLabel
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    gap: compact ? "$3" : "$4",
+    width: "100%",
+    "data-async-skeleton": "timeline",
+    "aria-busy": true,
+    "aria-label": loadingLabel,
+    children: Array.from({
+      length: 3
+    }).map((_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: compact ? "$2" : "$3",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: avatarPx,
+        height: avatarPx
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        flex: 1,
+        gap: "$1.5",
+        paddingTop: 2,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: "35%",
+          height: compact ? 10 : 12
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: "80%",
+          height: compact ? 12 : 14
+        })]
+      })]
+    }, i))
+  });
+}
 function Timeline({
   entries,
   label,
+  headingLevel = 2,
   disabled = false,
+  isLoading = false,
+  error = null,
+  onRetry,
   enableAddComment = true,
   onCommentAdded,
+  onCommentSubmit,
+  onReply,
   onEntryClick,
+  commentValue,
+  defaultCommentValue = "",
+  onCommentChange,
   renderEmpty,
   renderEntry,
-  formatTimestamp = defaultFormatTimestamp,
+  formatTimestamp,
   compact = false,
   labels = {},
-  placeholder = "Add a comment...",
+  placeholder: placeholderProp,
+  replyPlaceholder: replyPlaceholderProp,
   ...stackProps
 }) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const [commentText, setCommentText] = (0, import_react2.useState)("");
+  const LabelTag = TIMELINE_HEADING_TAGS[headingLevel];
+  const ReplyIcon = (0, import_useDirection.useDirection)() === "rtl" ? import_react.ArrowBendUpRightIcon : import_react.ArrowBendUpLeftIcon;
+  const placeholder = placeholderProp ?? t("Add a comment...");
+  const replyPlaceholder = replyPlaceholderProp ?? t("Write a reply...");
+  const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultCommentValue);
+  const [composerFocused, setComposerFocused] = (0, import_react2.useState)(false);
   const [isAddingComment, setIsAddingComment] = (0, import_react2.useState)(false);
-  const [showCommentInput, setShowCommentInput] = (0, import_react2.useState)(false);
+  const [replyTarget, setReplyTarget] = (0, import_react2.useState)(null);
+  const [replyText, setReplyText] = (0, import_react2.useState)("");
+  const composerText = commentValue !== void 0 ? commentValue : internalValue;
   const {
-    noActivity: noActivityLabel = "No activity yet",
-    addComment: addCommentLabel = "Add Comment",
-    cancel: cancelLabel = "Cancel",
-    comment: commentLabel = "Comment",
-    sending: sendingLabel = "Sending...",
-    madeChanges: madeChangesLabel = "made changes",
-    addedAttachment: addedAttachmentLabel = "added an attachment",
-    assigned: assignedLabel = "assigned",
-    entry: entryLabel = "entry",
-    entries: entriesLabel = "entries"
+    noActivity: noActivityLabel = t("No activity yet"),
+    addComment: addCommentLabel = t("Add Comment"),
+    cancel: cancelLabel = t("Cancel"),
+    comment: commentLabel = t("Comment"),
+    sending: sendingLabel = t("Sending..."),
+    reply: replyLabel = t("Reply"),
+    madeChanges: madeChangesLabel = t("made changes"),
+    addedAttachment: addedAttachmentLabel = t("added an attachment"),
+    assigned: assignedLabel = t("assigned"),
+    entry: entryLabel = t("entry"),
+    entries: entriesLabel = t("entries"),
+    loadFailed: loadFailedLabel = t("Couldn't load activity")
   } = labels;
-  const handleAddComment = (0, import_react2.useCallback)(async () => {
-    const content = commentText.trim();
+  const hasError = (0, import_AsyncBoundary.resolveAsyncStatus)({
+    error
+  }) === "error";
+  const showSkeleton = !hasError && isLoading && entries.length === 0;
+  const threads = (0, import_react2.useMemo)(() => threadEntries(entries), [entries]);
+  const submitComment = (0, import_react2.useCallback)((content, parentId) => {
+    if (onCommentSubmit) onCommentSubmit(content, parentId ? {
+      parentId
+    } : void 0);else onCommentAdded?.(content);
+  }, [onCommentSubmit, onCommentAdded]);
+  const canCompose = enableAddComment && !disabled && !!(onCommentSubmit || onCommentAdded);
+  const showReplyAction = !disabled && (!!onReply || canCompose);
+  const setComposerText = (0, import_react2.useCallback)(text => {
+    if (commentValue === void 0) setInternalValue(text);
+    onCommentChange?.(text);
+  }, [commentValue, onCommentChange]);
+  const handleAddComment = (0, import_react2.useCallback)(() => {
+    const content = composerText.trim();
     if (!content || isAddingComment) return;
     setIsAddingComment(true);
     try {
-      onCommentAdded?.(content);
-      setCommentText("");
-      setShowCommentInput(false);
+      submitComment(content);
+      setComposerText("");
+      setComposerFocused(false);
     } finally {
       setIsAddingComment(false);
     }
-  }, [commentText, isAddingComment, onCommentAdded]);
-  const handleKeyPress = (0, import_react2.useCallback)(e => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleAddComment();
-    } else if (e.key === "Escape") {
-      setShowCommentInput(false);
-      setCommentText("");
+  }, [composerText, isAddingComment, submitComment, setComposerText]);
+  const handleSubmitReply = (0, import_react2.useCallback)(() => {
+    const content = replyText.trim();
+    if (!content || !replyTarget) return;
+    submitComment(content, replyTarget.parentId);
+    setReplyText("");
+    setReplyTarget(null);
+  }, [replyText, replyTarget, submitComment]);
+  const handleReplyPress = (0, import_react2.useCallback)((entry, rootId) => {
+    if (onReply) {
+      onReply(entry);
+      return;
     }
-  }, [handleAddComment]);
+    if (!canCompose) return;
+    setReplyTarget({
+      rootId,
+      parentId: entry.id
+    });
+    setReplyText("");
+  }, [onReply, canCompose]);
   const sz = knobProps.sizeToken;
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const mutedColor = knobProps.textAccentColor === "$color" ? "$color12" : knobProps.textAccentColor;
+  const bodyFontSize = compact ? "$2" : sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
+  const nameFontSize = compact ? "$2" : sz === "$3" ? "$2" : sz === "$5" ? "$4" : "$3";
+  const metaFontSize = compact ? "$1" : "$2";
+  const systemFontSize = compact ? "$1" : "$2";
+  const avatarSize = compact ? "$1.5" : sz === "$5" ? "$3" : "$2";
+  const replyAvatarSize = compact ? "$1" : "$1.5";
   const emptyIconSize = compact ? sz === "$3" ? 20 : sz === "$5" ? 28 : 24 : sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
   const emptyState = renderEmpty ? renderEmpty() : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...(compact ? {
@@ -164,6 +319,29 @@ function Timeline({
       children: noActivityLabel
     })]
   });
+  const formatVisibleTimestamp = entry => {
+    if (formatTimestamp) return formatTimestamp(entry.timestamp);
+    if (entry.type === "comment" || knobProps.timestampStyle === "relative") {
+      return (0, import_theme.formatRelativeTimestamp)(entry.timestamp);
+    }
+    return defaultFormatTimestamp(entry.timestamp);
+  };
+  const renderTimestamp = (entry, fontSize) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    fontSize,
+    color: mutedColor,
+    ...{
+      title: defaultFormatTimestamp(entry.timestamp)
+    },
+    "aria-label": defaultFormatTimestamp(entry.timestamp),
+    children: formatVisibleTimestamp(entry)
+  });
+  const renderAvatar = (entry, size) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Avatar.Avatar, {
+    circular: false,
+    borderRadius: radiusToken,
+    size,
+    name: getEntryDisplayName(entry),
+    fallbackBackgroundColor: "$accentBackground"
+  });
   const renderVersionChanges = changes => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     gap: "$1",
     marginTop: "$1",
@@ -196,172 +374,314 @@ function Timeline({
       children: ["+", changes.length - 5, " more changes"]
     })]
   });
-  const renderTimelineEntry = entry => {
-    const sz2 = knobProps.sizeToken;
-    const iconSize = compact ? 14 : sz2 === "$3" ? 14 : sz2 === "$5" ? 18 : 16;
-    const containerSize = compact ? sz2 === "$3" ? 20 : sz2 === "$5" ? 28 : 24 : sz2 === "$3" ? 24 : sz2 === "$5" ? 40 : 32;
-    const entryIcon = entry.type === "comment" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar, {
-      circular: true,
-      size: compact ? "$1.5" : "$2",
+  const renderComposerBox = ({
+    value,
+    onChange,
+    onSubmit,
+    onCancel,
+    placeholder: composerPlaceholder,
+    autoFocus,
+    expanded,
+    onFocus,
+    onBlur,
+    ariaLabel,
+    avatar
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    ...knobProps.gap,
+    alignItems: "flex-start",
+    children: [avatar, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.TextArea, {
+        value,
+        onChangeText: onChange,
+        placeholder: composerPlaceholder,
+        "aria-label": ariaLabel,
+        size: compact ? "$2" : "$3",
+        minHeight: expanded ? compact ? 60 : 80 : compact ? 32 : 40,
+        backgroundColor: knobProps.inputBackground,
+        ...{
+          borderRadius: radiusToken
+        },
+        autoFocus,
+        onFocus,
+        onBlur,
+        onKeyDown: e => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            onSubmit();
+          } else if (e.key === "Escape") {
+            onCancel();
+          }
+        }
+      }), expanded && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...knobProps.gap,
+        justifyContent: "flex-end",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          size: compact ? "$2" : "$3",
+          variant: "outlined",
+          borderRadius: radiusToken,
+          onPress: onCancel,
+          disabled: isAddingComment,
+          children: cancelLabel
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+          size: compact ? "$2" : "$3",
+          borderRadius: radiusToken,
+          icon: isAddingComment ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+            size: "small"
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PaperPlaneTiltIcon, {
+            size: 14
+          }),
+          onPress: onSubmit,
+          disabled: !value.trim() || isAddingComment,
+          children: isAddingComment ? sendingLabel : commentLabel
+        })]
+      })]
+    })]
+  });
+  const renderComposer = () => {
+    if (!canCompose) return null;
+    const expanded = composerFocused || composerText.trim().length > 0;
+    return renderComposerBox({
+      value: composerText,
+      onChange: setComposerText,
+      onSubmit: handleAddComment,
+      onCancel: () => {
+        setComposerText("");
+        setComposerFocused(false);
+      },
+      placeholder,
+      expanded,
+      onFocus: () => setComposerFocused(true),
+      onBlur: () => {
+        if (!composerText.trim()) setComposerFocused(false);
+      },
+      ariaLabel: addCommentLabel,
+      avatar: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Avatar.Avatar, {
+        circular: false,
+        borderRadius: radiusToken,
+        size: avatarSize,
+        backgroundColor: import_componentColors.componentColors.interactive.hover,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Avatar.Avatar.Fallback, {
+          backgroundColor: import_componentColors.componentColors.interactive.hover,
+          alignItems: "center",
+          justifyContent: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserIcon, {
+            size: compact ? 12 : 14
+          })
+        })
+      })
+    });
+  };
+  const renderReplyComposer = parentEntry => renderComposerBox({
+    value: replyText,
+    onChange: setReplyText,
+    onSubmit: handleSubmitReply,
+    onCancel: () => {
+      setReplyText("");
+      setReplyTarget(null);
+    },
+    placeholder: replyPlaceholder,
+    autoFocus: true,
+    expanded: true,
+    ariaLabel: `${replyLabel} ${getEntryDisplayName(parentEntry)}`,
+    avatar: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Avatar.Avatar, {
+      circular: false,
+      borderRadius: radiusToken,
+      size: replyAvatarSize,
       backgroundColor: import_componentColors.componentColors.interactive.hover,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Avatar.Avatar.Fallback, {
         backgroundColor: import_componentColors.componentColors.interactive.hover,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$1",
-          color: "$accentColor",
-          fontWeight: "600",
-          children: getInitials(entry.author)
+        alignItems: "center",
+        justifyContent: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserIcon, {
+          size: compact ? 10 : 12
         })
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      width: containerSize,
-      height: containerSize,
-      borderRadius: "$10",
-      backgroundColor: entry.type === "version" ? "$orange4" : import_componentColors.componentColors.surface.background,
-      alignItems: "center",
-      justifyContent: "center",
-      children: getEntryIcon(entry, iconSize)
+    })
+  });
+  const renderCommentEntry = (entry, rootId, isReply) => {
+    const displayName = getEntryDisplayName(entry);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      role: "article",
+      "aria-label": `${displayName}, ${formatVisibleTimestamp(entry)}`,
+      gap: compact ? "$2" : "$3",
+      alignItems: "flex-start",
+      borderRadius: radiusToken,
+      onPress: onEntryClick ? () => onEntryClick(entry) : void 0,
+      cursor: onEntryClick ? "pointer" : "default",
+      children: [renderAvatar(entry, isReply ? replyAvatarSize : avatarSize), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        flex: 1,
+        gap: "$1",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          flexWrap: "wrap",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: nameFontSize,
+            fontWeight: "600",
+            color: import_componentColors.componentColors.text.primary,
+            children: displayName
+          }), renderTimestamp(entry, metaFontSize)]
+        }), entry.content && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.body,
+          fontSize: bodyFontSize,
+          color: import_componentColors.componentColors.text.primary,
+          whiteSpace: "pre-wrap",
+          children: entry.content
+        }), showReplyAction && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          marginInlineStart: -8,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            chromeless: true,
+            size: compact ? "$1" : "$2",
+            ...(0, import_theme.pressTargetStyle)(),
+            marginVertical: -Math.ceil((import_theme.MIN_PRESS_TARGET - (compact ? 20 : 28)) / 2),
+            hitSlop: (0, import_theme.pressTargetHitSlop)(compact ? 20 : 28),
+            borderRadius: radiusToken,
+            opacity: 0.8,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ReplyIcon, {
+              size: compact ? 10 : 12
+            }),
+            "aria-label": `${replyLabel} ${displayName}`,
+            onPress: e => {
+              e.stopPropagation?.();
+              handleReplyPress(entry, rootId);
+            },
+            children: replyLabel
+          })
+        })]
+      })]
     });
-    const subTitle = getEntrySubTitle(entry, formatTimestamp);
+  };
+  const renderSystemEntry = entry => {
+    const displayName = getEntryDisplayName(entry);
     const actionLabel = getEntryActionLabel(entry, {
       madeChanges: madeChangesLabel,
       addedAttachment: addedAttachmentLabel,
       assigned: assignedLabel
     });
-    const defaultContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.ListItem, {
-      title: entry.author,
-      subTitle,
-      icon: entryIcon,
-      size: compact ? "$3" : knobProps.sizeToken,
-      hoverStyle: {
-        backgroundColor: import_componentColors.componentColors.surface.background
-      },
-      pressStyle: {
-        backgroundColor: import_componentColors.componentColors.interactive.background
-      },
-      onPress: () => onEntryClick?.(entry),
+    const iconSize = compact ? 12 : 14;
+    const discSize = compact ? 20 : 24;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      role: "article",
+      "aria-label": `${displayName} ${actionLabel ?? entry.content ?? ""}`.trim(),
+      gap: compact ? "$2" : "$3",
+      alignItems: "flex-start",
+      borderRadius: radiusToken,
+      onPress: onEntryClick ? () => onEntryClick(entry) : void 0,
       cursor: onEntryClick ? "pointer" : "default",
-      children: [actionLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: compact ? "$1" : "$2",
-        color: import_componentColors.componentColors.text.muted,
-        marginTop: "$1",
-        children: actionLabel
-      }), entry.content && entry.type === "comment" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: compact ? "$2" : knobProps.sizeToken,
-        color: import_componentColors.componentColors.text.muted,
-        marginTop: "$1",
-        whiteSpace: "pre-wrap",
-        children: entry.content
-      }), entry.content && entry.type === "info" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: compact ? "$1" : "$2",
-        color: import_componentColors.componentColors.text.muted,
-        fontStyle: "italic",
-        children: entry.content
-      }), entry.type === "version" && entry.changes && entry.changes.length > 0 && renderVersionChanges(entry.changes)]
-    }, entry.id);
-    if (renderEntry) {
-      return renderEntry(entry, defaultContent);
-    }
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        width: discSize,
+        height: discSize,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: 0.6,
+        children: getEntryIcon(entry, iconSize)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        flex: 1,
+        gap: "$0.5",
+        paddingTop: 2,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$1.5",
+          alignItems: "center",
+          flexWrap: "wrap",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: systemFontSize,
+            fontWeight: "600",
+            color: mutedColor,
+            children: displayName
+          }), actionLabel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: systemFontSize,
+            color: mutedColor,
+            children: actionLabel
+          }), entry.content && entry.type !== "info" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: systemFontSize,
+            color: mutedColor,
+            children: entry.content
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: systemFontSize,
+            color: mutedColor,
+            opacity: 0.75,
+            children: "\xB7"
+          }), renderTimestamp(entry, systemFontSize)]
+        }), entry.content && entry.type === "info" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: systemFontSize,
+          color: mutedColor,
+          fontStyle: "italic",
+          children: entry.content
+        }), entry.type === "version" && entry.changes && entry.changes.length > 0 && renderVersionChanges(entry.changes)]
+      })]
+    });
+  };
+  const renderEntryNode = (entry, rootId, isReply) => {
+    const defaultContent = entry.type === "comment" ? renderCommentEntry(entry, rootId, isReply) : renderSystemEntry(entry);
+    if (renderEntry) return renderEntry(entry, defaultContent);
     return defaultContent;
   };
-  const renderCommentInput = () => {
-    if (!enableAddComment || disabled || !onCommentAdded) return null;
-    if (!showCommentInput) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        size: compact ? "$3" : "$4",
-        variant: "outlined",
-        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
-          size: compact ? 14 : 16
+  const renderThread = thread => {
+    const rootId = thread.entry.id;
+    const hasThreadTail = thread.replies.length > 0 || replyTarget && replyTarget.rootId === rootId;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: compact ? "$2" : "$3",
+      children: [renderEntryNode(thread.entry, rootId, false), hasThreadTail &&
+      // Avatar-inset: replies indent by the parent avatar column width.
+      // Logical start rail so the thread indent mirrors in RTL; tamagui
+      // borderStartWidth does not compile to working CSS on web (SB-M-1215).
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        marginInlineStart: compact ? 28 : sz === "$5" ? 46 : 36,
+        gap: compact ? "$2" : "$3",
+        paddingInlineStart: compact ? "$2" : "$3",
+        ...(import_tamagui.isWeb ? {
+          borderInlineStartWidth: 1,
+          borderInlineStartStyle: "solid",
+          borderInlineStartColor: import_componentColors.componentColors.divider
+        } : {
+          borderStartWidth: 1,
+          borderStartColor: import_componentColors.componentColors.divider
         }),
-        onPress: () => setShowCommentInput(true),
-        alignSelf: "flex-start",
-        children: addCommentLabel
-      });
-    }
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      ...knobProps.gap,
-      ...(compact ? {
-        padding: "$2"
-      } : knobProps.panelPadding),
-      ...{
-        backgroundColor: import_componentColors.componentColors.surface.background
-      },
-      ...knobProps.borderRadius,
-      borderColor: "$borderColor",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        ...knobProps.gap,
-        alignItems: "flex-start",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar, {
-          circular: true,
-          size: compact ? "$1.5" : "$2",
-          backgroundColor: import_componentColors.componentColors.interactive.hover,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, {
-            backgroundColor: import_componentColors.componentColors.interactive.hover,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserIcon, {
-              size: compact ? 12 : 14
-            })
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          flex: 1,
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.TextArea, {
-            value: commentText,
-            onChangeText: setCommentText,
-            placeholder,
-            size: compact ? "$2" : "$3",
-            minHeight: compact ? 60 : 80,
-            autoFocus: true,
-            onKeyDown: handleKeyPress
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            ...knobProps.gap,
-            justifyContent: "flex-end",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-              size: compact ? "$2" : "$3",
-              variant: "outlined",
-              onPress: () => {
-                setShowCommentInput(false);
-                setCommentText("");
-              },
-              disabled: isAddingComment,
-              children: cancelLabel
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-              size: compact ? "$2" : "$3",
-              icon: isAddingComment ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
-                size: "small"
-              }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PaperPlaneTiltIcon, {
-                size: 14
-              }),
-              onPress: handleAddComment,
-              disabled: !commentText.trim() || isAddingComment,
-              children: isAddingComment ? sendingLabel : commentLabel
-            })]
-          })]
-        })]
-      })
-    });
+        children: [thread.replies.map(reply => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.default.Fragment, {
+          children: renderEntryNode(reply, rootId, true)
+        }, reply.id)), replyTarget && replyTarget.rootId === rootId && renderReplyComposer(entries.find(e => e.id === replyTarget.parentId) ?? thread.entry)]
+      })]
+    }, rootId);
   };
+  const skeletonAvatarPx = compact ? 20 : sz === "$5" ? 34 : 24;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
     ...stackProps,
     children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       alignItems: "center",
       justifyContent: "space-between",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H4, {
-        fontSize: compact ? "$4" : "$5",
-        fontWeight: "600",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(LabelTag, {
+        ...(compact ? {
+          fontSize: "$4",
+          fontWeight: "600"
+        } : import_componentColors.sectionHeading),
         children: label
-      }), entries.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+      }), entries.length > 0 && !hasError && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: "$2",
         color: import_componentColors.componentColors.text.muted,
-        children: [entries.length, " ", entries.length === 1 ? entryLabel : entriesLabel]
+        children: (0, import_t.bidiIsolate)(`${entries.length} ${entries.length === 1 ? entryLabel : entriesLabel}`)
       })]
-    }), renderCommentInput(), enableAddComment && !disabled && onCommentAdded && entries.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
-      marginVertical: "$2"
-    }), entries.length === 0 ? emptyState : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      gap: "$1",
-      children: entries.map(entry => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.default.Fragment, {
-        children: renderTimelineEntry(entry)
-      }, entry.id))
+    }), !hasError && renderComposer(), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {
+      compact: true,
+      error,
+      onRetry,
+      errorTitle: loadFailedLabel,
+      loading: showSkeleton ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimelineSkeleton, {
+        compact,
+        avatarPx: skeletonAvatarPx,
+        loadingLabel: t("Loading")
+      }) : false,
+      empty: !hasError && entries.length === 0 ? emptyState : false,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        role: "feed",
+        "aria-label": label ?? t("Activity feed"),
+        gap: compact ? "$3" : knobProps.gapLg.gap,
+        marginTop: canCompose ? "$2" : void 0,
+        children: threads.map(thread => renderThread(thread))
+      })
     })]
   });
 }