@expcat/tigercat-react 2.1.2 → 2.1.4

package/README.md

@@ -35,25 +35,12 @@ function App() {
 
 ## Components
 
-172 public component entries across 9 categories. The authoritative list with
-import subpaths lives in
-[component-index.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/component-index.md)
-(generated); the table below is only a sampler.
-
-| Category       | Count | Examples                                                      |
-| -------------- | ----- | ------------------------------------------------------------- |
-| **Basic**      | 30    | Button, Alert, Avatar, Badge, Icon, Tag, Text, Result, QRCode |
-| **Form**       | 31    | Input, Select, DatePicker, Form, Upload, InputOTP, TagsInput  |
-| **Layout**     | 19    | Card, Row/Col, Layout, List, Descriptions, Skeleton, Space    |
-| **Navigation** | 33    | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree     |
-| **Feedback**   | 13    | Modal, Drawer, Message, Popover, Tooltip, Progress, Tour      |
-| **Data**       | 7     | Table, Calendar, Collapse, Timeline, DataExport               |
-| **Charts**     | 20    | BarChart, LineChart, PieChart, RadarChart, GaugeChart, Gantt  |
-| **Advanced**   | 12    | VirtualTable, VirtualList, RichTextEditor, CodeEditor         |
-| **Composite**  | 7     | DataTableWithToolbar, ChatWindow, FormWizard, TaskBoard       |
-
-`Message` and `notification` are also available as imperative command APIs from
-the package root; `notification` is a command API, not a component.
+Sampler: Button, Avatar, Badge, Input, Select, DatePicker, Form, Card, Layout, Menu, Tabs, Modal, Drawer, Table, BarChart, LineChart, VirtualTable, RichTextEditor, DataTableWithToolbar, ChatWindow. The generated catalog with import subpaths is
+[component-index.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/component-index.md).
+
+`Message`, `notification`, and `LoadingBar` are root command APIs;
+[command-apis.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/command-apis.md).
+`notification` is not a component.
 
 ## Hooks
 
@@ -63,6 +50,13 @@ the package root; `notification` is a command API, not a component.
 `useBreadcrumbContext` and `useStepsContext`. Signatures are listed in
 [api-summary.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/shared/api-summary.md).
 
+## Next
+
+- Install, compatibility, and MCP client config:
+  [root README](https://github.com/expcat/Tigercat/blob/main/README.md)
+- Agent docs:
+  [SKILL.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/SKILL.md)
+
 ## License
 
 [MIT](https://opensource.org/licenses/MIT)

package/dist/{chunk-4C2X5PZO.mjs → chunk-25BKSXTX.mjs}

@@ -1,61 +1,60 @@
 import {
   Textarea
-} from "./chunk-PMQJ6AYT.mjs";
-import {
-  Button
-} from "./chunk-5TE7KLE5.mjs";
+} from "./chunk-ZG6WST55.mjs";
 import {
   Tag
-} from "./chunk-7EXOY7GD.mjs";
+} from "./chunk-FVA5VKN2.mjs";
 import {
   Text
-} from "./chunk-HLS4CHWX.mjs";
+} from "./chunk-VDBLI5Y3.mjs";
 import {
   Avatar
-} from "./chunk-OO562MFD.mjs";
+} from "./chunk-3KBFOO2E.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/CommentThread.tsx
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   classNames,
-  buildCommentTree,
+  canSubmitCommentReply,
   clipCommentTreeDepth,
+  formatBadgeCountLabel,
   formatCommentTime,
+  getCommentRepliesView,
+  nextCommentRevealedCount,
+  resolveCommentNodes,
   getCommentThreadLabels,
   mergeTigerLocale,
   nextCommentLikeState,
   resolveCommentLikeState,
   resolveLocaleText,
-  writeCommentLikeOverlay
+  writeCommentLikeOverlay,
+  commentThreadActionButtonClasses,
+  commentThreadPrimaryButtonClasses,
+  commentThreadLikeButtonClasses,
+  commentThreadLikedButtonClasses,
+  commentThreadReplyButtonClasses,
+  commentThreadNeutralButtonClasses,
+  commentThreadLikeIconClasses,
+  commentThreadDividerClasses,
+  commentThreadAvatarClasses,
+  commentThreadAuthorClasses,
+  commentThreadUserTitleClasses,
+  commentThreadTimeClasses,
+  commentThreadContentClasses,
+  commentThreadReplyEditorClasses,
+  commentThreadReplyTextareaClasses,
+  commentThreadCancelButtonClasses,
+  commentThreadSubmitButtonClasses,
+  commentThreadRepliesClasses,
+  commentThreadEmptyClasses,
+  commentThreadEmptyIconClasses
 } from "@expcat/tigercat-core";
-
-// ../core/src/internal/comment-thread-styles.ts
-var buttonBaseClasses = "tiger-motion-aware px-2 py-0.5 h-auto min-h-0 text-xs rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadActionButtonClasses = `${buttonBaseClasses} text-[var(--tiger-text-muted,#6b7280)] font-medium flex items-center gap-1.5`;
-var commentThreadPrimaryButtonClasses = `${buttonBaseClasses} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-semibold hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]`;
-var commentThreadLikeButtonClasses = "hover:text-[var(--tiger-primary,#2563eb)] hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]";
-var commentThreadLikedButtonClasses = "text-[var(--tiger-primary,#2563eb)] bg-[var(--tiger-outline-bg-hover,#eff6ff)] font-semibold border-[var(--tiger-primary,#2563eb)]/40";
-var commentThreadReplyButtonClasses = "hover:text-[var(--tiger-success,#16a34a)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]";
-var commentThreadNeutralButtonClasses = "hover:text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f3f4f6)]";
-var commentThreadLikeIconClasses = "tiger-motion-aware w-3.5 h-3.5 transition-transform active:scale-125";
-var commentThreadDividerClasses = "border-b border-[var(--tiger-border,#e5e7eb)]";
-var commentThreadAvatarClasses = "tiger-motion-aware shrink-0 mt-0.5 ring-1 ring-[var(--tiger-border,#e5e7eb)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:scale-105";
-var commentThreadAuthorClasses = "tiger-motion-aware text-[var(--tiger-text,#111827)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer";
-var commentThreadUserTitleClasses = "bg-[var(--tiger-surface-muted,#f3f4f6)] px-1.5 py-0.5 rounded text-[var(--tiger-text-muted,#6b7280)] font-medium";
-var commentThreadTimeClasses = "ml-auto text-[var(--tiger-text-muted,#6b7280)] font-normal";
-var commentThreadContentClasses = "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-2 mb-3 pr-2";
-var commentThreadReplyEditorClasses = "tiger-motion-aware mt-3 space-y-3 bg-[var(--tiger-surface-muted,#f9fafb)] border border-[var(--tiger-border,#e5e7eb)] p-4 rounded-[var(--tiger-radius-lg,0.75rem)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadReplyTextareaClasses = "tiger-motion-aware bg-[var(--tiger-surface,#ffffff)] border-[var(--tiger-border,#d1d5db)] focus:ring-2 focus:ring-[var(--tiger-primary,#2563eb)]/20 focus:border-[var(--tiger-primary,#2563eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-inner [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadCancelButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)] rounded-[var(--tiger-radius-md,0.5rem)] transition-colors";
-var commentThreadSubmitButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs font-semibold shadow-sm hover:shadow rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadRepliesClasses = "tiger-motion-aware mt-4 ml-1 pl-4 border-l-2 border-[var(--tiger-border,#e5e7eb)] hover:border-[var(--tiger-primary,#2563eb)]/40 space-y-4 transition-colors";
-var commentThreadEmptyClasses = "tiger-motion-aware flex flex-col items-center justify-center border border-dashed border-[var(--tiger-border,#d1d5db)] rounded-[var(--tiger-radius-lg,0.75rem)] py-12 px-4 bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors";
-var commentThreadEmptyIconClasses = "w-10 h-10 text-[var(--tiger-text-muted,#9ca3af)] mb-3";
-
-// src/components/CommentThread.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var CommentThread = ({
   nodes,
@@ -81,11 +80,13 @@ var CommentThread = ({
   showDivider = true,
   showLike = true,
   showReply = true,
-  showMore = true,
+  showMore = false,
+  showComposer = true,
   onLike,
   onReply,
   onMore,
   onAction,
+  onUserClick,
   onExpandedChange,
   onLoadMore,
   className,
@@ -101,19 +102,31 @@ var CommentThread = ({
     [mergedLocale, labelsOverride]
   );
   const [innerExpandedKeys, setInnerExpandedKeys] = useState(defaultExpandedKeys);
-  const [expandedAllKeys, setExpandedAllKeys] = useState(/* @__PURE__ */ new Set());
+  const [revealedCounts, setRevealedCounts] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
   const [likeOverlay, setLikeOverlay] = useState(() => /* @__PURE__ */ new Map());
   const [replyingTo, setReplyingTo] = useState(null);
   const [replyValue, setReplyValue] = useState("");
+  const [composerValue, setComposerValue] = useState("");
+  const replyInFlight = useRef(false);
   const mergedExpandedKeys = expandedKeys ?? innerExpandedKeys;
   const expandedSet = useMemo(
     () => new Set(mergedExpandedKeys),
     [mergedExpandedKeys]
   );
-  const resolvedNodes = useMemo(() => {
-    const tree = nodes && nodes.length > 0 ? nodes : buildCommentTree(items ?? []);
-    return clipCommentTreeDepth(tree, maxDepth);
-  }, [nodes, items, maxDepth]);
+  const { resolvedNodes, clippedIds } = useMemo(() => {
+    const clipped = /* @__PURE__ */ new Set();
+    const tree = resolveCommentNodes(nodes, items);
+    return {
+      resolvedNodes: clipCommentTreeDepth(tree, maxDepth, clipped),
+      clippedIds: clipped
+    };
+  }, [items, maxDepth, nodes]);
+  useEffect(() => {
+    setLikeOverlay(/* @__PURE__ */ new Map());
+    setRevealedCounts(/* @__PURE__ */ new Map());
+  }, [nodes, items]);
   const updateExpandedKeys = (next) => {
     if (!expandedKeys) {
       setInnerExpandedKeys(next);
@@ -124,12 +137,24 @@ var CommentThread = ({
     const next = expandedSet.has(id) ? mergedExpandedKeys.filter((key) => key !== id) : [...mergedExpandedKeys, id];
     updateExpandedKeys(next);
   };
+  const hasLoadMoreHandler = typeof onLoadMore === "function";
+  const hasReplyHandler = typeof onReply === "function";
   const handleLoadMore = (node) => {
-    setExpandedAllKeys((prev) => {
-      const next = new Set(prev);
-      next.add(node.id);
-      return next;
+    const children = node.children ?? [];
+    const current = revealedCounts.get(node.id) ?? maxReplies;
+    const view = getCommentRepliesView(children, {
+      maxReplies,
+      revealedCount: current,
+      hasLoadMoreHandler
     });
+    if (view.loadMoreKind === "remaining") {
+      setRevealedCounts((prev) => {
+        const next = new Map(prev);
+        next.set(node.id, nextCommentRevealedCount(current, maxReplies, children.length));
+        return next;
+      });
+      return;
+    }
     onLoadMore?.(node);
   };
   const handleLike = (node) => {
@@ -138,25 +163,36 @@ var CommentThread = ({
     onLike?.(node, next.liked);
   };
   const handleReplySubmit = (node) => {
-    const trimmed = replyValue.trim();
-    if (!trimmed) return;
-    onReply?.(node, replyValue);
-    setReplyValue("");
-    setReplyingTo(null);
-    if (!expandedSet.has(node.id)) {
-      const next = [...mergedExpandedKeys, node.id];
-      updateExpandedKeys(next);
+    const source = node ? replyValue : composerValue;
+    if (!canSubmitCommentReply(source, replyInFlight.current) || !hasReplyHandler) return;
+    replyInFlight.current = true;
+    onReply?.(node, source.trim());
+    if (node) {
+      setReplyValue("");
+      setReplyingTo(null);
+      if (!expandedSet.has(node.id)) updateExpandedKeys([...mergedExpandedKeys, node.id]);
+    } else {
+      setComposerValue("");
     }
+    queueMicrotask(() => {
+      replyInFlight.current = false;
+    });
   };
-  const renderNode = (node, depth, isLast) => {
+  const renderNode = (node, depth, isLast, pos2) => {
     const children = node.children ?? [];
-    const hasChildren = children.length > 0;
+    const hasChildren = children.length > 0 || clippedIds.has(node.id);
     const isExpanded = expandedSet.has(node.id);
-    const showReplies = hasChildren && isExpanded;
-    const showAllReplies = expandedAllKeys.has(node.id);
+    const repliesView = getCommentRepliesView(children, {
+      maxReplies,
+      revealedCount: revealedCounts.get(node.id) ?? maxReplies,
+      hasLoadMoreHandler
+    });
+    const showReplies = hasChildren && isExpanded && children.length > 0;
     const repliesId = `tiger-comment-replies-${node.id}`;
-    const visibleChildren = showReplies ? maxReplies > 0 && !showAllReplies ? children.slice(0, maxReplies) : children : [];
-    const showLoadMoreBtn = showReplies && maxReplies > 0 && children.length > maxReplies && !showAllReplies;
+    const visibleChildren = showReplies ? repliesView.visible : [];
+    const showLoadMoreBtn = showReplies && repliesView.loadMoreKind != null;
+    pos2.current += 1;
+    const posinset = pos2.current;
     const actions = [];
     if (showLike) {
       const { liked, likes } = resolveCommentLikeState(node, likeOverlay);
@@ -168,6 +204,7 @@ var CommentThread = ({
           {
             size: "sm",
             variant: "ghost",
+            "aria-pressed": liked,
             className: classNames(
               commentThreadActionButtonClasses,
               commentThreadLikeButtonClasses,
@@ -178,6 +215,7 @@ var CommentThread = ({
               /* @__PURE__ */ jsx(
                 "svg",
                 {
+                  "aria-hidden": "true",
                   className: classNames(
                     commentThreadLikeIconClasses,
                     liked ? "fill-current" : "stroke-current fill-none"
@@ -217,6 +255,7 @@ var CommentThread = ({
               /* @__PURE__ */ jsx(
                 "svg",
                 {
+                  "aria-hidden": "true",
                   className: "w-3.5 h-3.5",
                   viewBox: "0 0 24 24",
                   fill: "none",
@@ -239,7 +278,7 @@ var CommentThread = ({
         )
       );
     }
-    if (showMore) {
+    if (showMore && (onMore || node.actions && node.actions.length > 0)) {
       actions.push(
         /* @__PURE__ */ jsxs(
           Button,
@@ -255,6 +294,7 @@ var CommentThread = ({
               /* @__PURE__ */ jsx(
                 "svg",
                 {
+                  "aria-hidden": "true",
                   className: "w-3.5 h-3.5",
                   viewBox: "0 0 24 24",
                   fill: "none",
@@ -292,8 +332,8 @@ var CommentThread = ({
               ),
               disabled: action.disabled,
               onClick: () => {
-                action.onClick?.(node, action);
-                onAction?.(node, action);
+                if (action.onClick) action.onClick(node, action);
+                else onAction?.(node, action);
               },
               children: action.label
             },
@@ -303,13 +343,15 @@ var CommentThread = ({
       });
     }
     return /* @__PURE__ */ jsx(
-      "div",
+      "article",
       {
         className: classNames(
           "tiger-comment-thread-item",
           depth === 1 && "py-5",
           depth === 1 && !isLast && showDivider && commentThreadDividerClasses
         ),
+        "aria-posinset": posinset,
+        "aria-setsize": pos2.total,
         children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
           showAvatar && node.user ? /* @__PURE__ */ jsx(
             Avatar,
@@ -317,12 +359,30 @@ var CommentThread = ({
               size: depth === 1 ? "md" : "sm",
               src: node.user.avatar,
               text: node.user.name,
-              className: commentThreadAvatarClasses
+              className: commentThreadAvatarClasses,
+              "aria-hidden": Boolean(node.user.name)
             }
           ) : null,
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-              node.user?.name ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "sm", weight: "bold", className: commentThreadAuthorClasses, children: node.user.name }) : null,
+              node.user?.name ? onUserClick ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: commentThreadAuthorClasses,
+                  onClick: () => onUserClick(node),
+                  children: /* @__PURE__ */ jsx(Text, { tag: "span", size: "sm", weight: "bold", children: node.user.name })
+                }
+              ) : /* @__PURE__ */ jsx(
+                Text,
+                {
+                  tag: "span",
+                  size: "sm",
+                  weight: "bold",
+                  className: commentThreadAuthorClasses.replace("cursor-pointer", ""),
+                  children: node.user.name
+                }
+              ) : null,
               node.user?.title ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "xs", color: "muted", className: commentThreadUserTitleClasses, children: node.user.title }) : null,
               node.tag ? /* @__PURE__ */ jsx(
                 Tag,
@@ -343,7 +403,7 @@ var CommentThread = ({
                 },
                 `${node.id}-tag-${index}`
               )),
-              node.time ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "xs", color: "muted", className: commentThreadTimeClasses, children: formatCommentTime(node.time) }) : null
+              formatCommentTime(node.time, mergedLocale) ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "xs", color: "muted", className: commentThreadTimeClasses, children: formatCommentTime(node.time, mergedLocale) }) : null
             ] }),
             /* @__PURE__ */ jsx("div", { className: commentThreadContentClasses, children: node.content }),
             actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: actions }) : null,
@@ -355,6 +415,7 @@ var CommentThread = ({
                   value: replyValue,
                   placeholder: resolveLocaleText(labels.replyPlaceholder, replyPlaceholder),
                   className: commentThreadReplyTextareaClasses,
+                  "aria-label": resolveLocaleText(labels.replyText, replyText),
                   onChange: (event) => setReplyValue(event.target.value)
                 }
               ),
@@ -378,8 +439,9 @@ var CommentThread = ({
                     size: "sm",
                     variant: "primary",
                     className: commentThreadSubmitButtonClasses,
+                    disabled: !canSubmitCommentReply(replyValue, false) || !hasReplyHandler,
                     onClick: () => handleReplySubmit(node),
-                    children: resolveLocaleText(labels.replyButtonText, replyButtonText)
+                    children: resolveLocaleText(labels.replySubmitText, replyButtonText)
                   }
                 )
               ] })
@@ -391,17 +453,22 @@ var CommentThread = ({
                 variant: "ghost",
                 className: classNames("mt-2 font-semibold", commentThreadPrimaryButtonClasses),
                 "aria-expanded": isExpanded,
-                "aria-controls": repliesId,
-                onClick: () => toggleExpanded(node.id),
-                children: isExpanded ? resolveLocaleText(labels.collapseRepliesText, collapseRepliesText) : resolveLocaleText(labels.expandRepliesText, expandRepliesText).replace(
-                  "{count}",
-                  String(children.length)
+                "aria-controls": children.length > 0 ? repliesId : void 0,
+                disabled: clippedIds.has(node.id) && children.length === 0,
+                onClick: () => {
+                  if (clippedIds.has(node.id) && children.length === 0) return;
+                  toggleExpanded(node.id);
+                },
+                children: clippedIds.has(node.id) && children.length === 0 ? labels.maxDepthReachedText : isExpanded ? resolveLocaleText(labels.collapseRepliesText, collapseRepliesText) : formatBadgeCountLabel(
+                  resolveLocaleText(labels.expandRepliesText, expandRepliesText),
+                  children.length,
+                  mergedLocale?.locale
                 )
               }
             ) : null,
             showReplies ? /* @__PURE__ */ jsxs("div", { id: repliesId, className: commentThreadRepliesClasses, children: [
               visibleChildren.map(
-                (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
+                (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1, pos2)
               ),
               showLoadMoreBtn ? /* @__PURE__ */ jsx(
                 Button,
@@ -410,7 +477,11 @@ var CommentThread = ({
                   variant: "ghost",
                   className: commentThreadPrimaryButtonClasses,
                   onClick: () => handleLoadMore(node),
-                  children: resolveLocaleText(labels.loadMoreText, loadMoreText)
+                  children: repliesView.loadMoreKind === "remaining" ? formatBadgeCountLabel(
+                    labels.remainingRepliesText,
+                    repliesView.remaining,
+                    mergedLocale?.locale
+                  ) : resolveLocaleText(labels.loadMoreText, loadMoreText)
                 }
               ) : null
             ] }) : null
@@ -420,35 +491,75 @@ var CommentThread = ({
       node.id
     );
   };
-  return /* @__PURE__ */ jsx(
+  const countVisible = (list) => list.reduce((sum, node) => {
+    if (!expandedSet.has(node.id)) return sum + 1;
+    const view = getCommentRepliesView(node.children, {
+      maxReplies,
+      revealedCount: revealedCounts.get(node.id) ?? maxReplies,
+      hasLoadMoreHandler
+    });
+    return sum + 1 + countVisible(view.visible);
+  }, 0);
+  const pos = { current: 0, total: countVisible(resolvedNodes) };
+  const composer = showComposer ? /* @__PURE__ */ jsxs("div", { className: commentThreadReplyEditorClasses, children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        rows: 3,
+        value: composerValue,
+        placeholder: resolveLocaleText(labels.replyPlaceholder, replyPlaceholder),
+        className: commentThreadReplyTextareaClasses,
+        "aria-label": resolveLocaleText(labels.replyPlaceholder, replyPlaceholder),
+        onChange: (event) => setComposerValue(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 justify-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "primary",
+        className: commentThreadSubmitButtonClasses,
+        disabled: !canSubmitCommentReply(composerValue, false) || !hasReplyHandler,
+        onClick: () => handleReplySubmit(),
+        children: resolveLocaleText(labels.replySubmitText, replyButtonText)
+      }
+    ) })
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classNames("tiger-comment-thread flex flex-col", className),
       role: divProps.role ?? "feed",
       "data-tiger-comment-thread": true,
-      "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : "Comment thread"),
+      "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : labels.listAriaLabel),
       ...divProps,
-      children: resolvedNodes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: commentThreadEmptyClasses, children: [
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: commentThreadEmptyIconClasses,
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: "font-medium", children: resolveLocaleText(labels.emptyText, emptyText) })
-      ] }) : resolvedNodes.map((node, index) => renderNode(node, 1, index === resolvedNodes.length - 1))
+      children: [
+        composer,
+        resolvedNodes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: commentThreadEmptyClasses, children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: commentThreadEmptyIconClasses,
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: "font-medium", children: resolveLocaleText(labels.emptyText, emptyText) })
+        ] }) : resolvedNodes.map(
+          (node, index) => renderNode(node, 1, index === resolvedNodes.length - 1, pos)
+        )
+      ]
     }
   );
 };