@hjmds/react 1.26.1 → 1.27.1

package/dist/screen-flows.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { CompositionLayout, ScreenLayout } from "./screens.js";
+import { ScreenExitButton } from "./internal/screen-exit.js";
 import { Button, IconButton } from "./actions.js";
+import { MessageReactions } from "./internal/message-reactions.js";
 import { Stack, Text, Grid, VisuallyHidden } from "./layout.js";
 import { SearchField } from "./forms.js";
 import { Chip, RadioGroup } from "./selection.js";
@@ -9,13 +11,14 @@ import { AlertDialog, Menu, Sheet } from "./overlays.js";
 import { UploadItem } from "./upload-item.js";
 import {} from "@hjmds/design-contracts/components/upload-item";
 import {} from "@hjmds/design-contracts/components/alert-dialog";
-import { validateCommentThread, resolvePermissionAction, resolveOnboardingStep, resolveSearchCommit, resolveSearchDebounceMs, resolveSearchEmptyCause, resolveSearchScreenPhase, resolveFocusAfterRemoval, screenPatternRecipe, profileSummaryRecipe, searchScreenRecipe } from "@hjmds/design-contracts/screen-patterns";
+import { validateCommentThread, resolvePermissionAction, resolveOnboardingStep, resolveSearchCommit, resolveSearchDebounceMs, resolveSearchEmptyCause, resolveSearchScreenPhase, resolveFocusAfterRemoval, screenPatternRecipe, commentThreadRecipe, profileSummaryRecipe, searchScreenRecipe, resolveCommentMenuItems } from "@hjmds/design-contracts/screen-patterns";
 import { resolveWindowClass } from "@hjmds/design-contracts/responsive";
 import { containerRecipe } from "@hjmds/design-contracts/components/container";
 import { ListRow } from "./display.js";
 import { Heading } from "./heading.js";
 import { EmptyState, Skeleton } from "./feedback.js";
-function Action({ action, secondary = false, buttonRef }) { return _jsx(Button, { ref: buttonRef, tone: secondary ? "ghost" : "primary", disabled: !!(action.disabled || action.pending), loading: action.pending ?? false, onClick: action.onAction, children: action.label }); }
+function Action({ action, secondary = false, buttonRef }) { if (action.icon)
+    return _jsx(IconButton, { ref: buttonRef, label: action.label, tone: "ghost", disabled: !!(action.disabled || action.pending), onClick: action.onAction, children: action.icon }); return _jsx(Button, { ref: buttonRef, tone: secondary ? "ghost" : "primary", disabled: !!(action.disabled || action.pending), loading: action.pending ?? false, onClick: action.onAction, children: action.label }); }
 /** Keep the list mounted so input and scroll survive a detail visit. Routers may instead restore host scroll state. */
 export function ListDetailScreen({ list, detail, back, refresh, loadMore, layoutStyle, ...screen }) {
     const open = !!detail;
@@ -39,7 +42,8 @@ export function ListDetailScreen({ list, detail, back, refresh, loadMore, layout
         wasOpen.current = open;
     }, [open]);
     // layoutStyle places the outer host that owns both panes, not the inner list ScreenLayout.
-    return _jsxs("div", { style: { height: "100%", ...layoutStyle }, children: [_jsx("div", { ref: listHost, tabIndex: -1, hidden: open, style: { height: "100%" }, onFocusCapture: event => { returnFocus.current = event.target; }, children: _jsx(ScreenLayout, { ...screen, actions: refresh ? _jsx(Action, { action: refresh, secondary: true }) : screen.actions, footer: loadMore ? _jsx(Action, { action: loadMore, secondary: true }) : null, children: list }) }), detail ? _jsx("div", { ref: detailHost, style: { height: "100%" }, children: _jsx(ScreenLayout, { title: detail.title, ...(detail.titleVisibility === undefined ? {} : { titleVisibility: detail.titleVisibility }), ...(detail.headerAlignment === undefined ? {} : { headerAlignment: detail.headerAlignment }), ...(detail.state === undefined ? {} : { state: detail.state }), stateAction: detail.stateAction, notice: detail.notice, leading: _jsx(Action, { action: back, secondary: true }), children: detail.content }) }) : null] });
+    // "더 보기" ends the list inside the scroll body, centered like LoadMore; the fixed footer is the bottom CTA slot (2026-10-17 review).
+    return _jsxs("div", { style: { height: "100%", ...layoutStyle }, children: [_jsx("div", { ref: listHost, tabIndex: -1, hidden: open, style: { height: "100%" }, onFocusCapture: event => { returnFocus.current = event.target; }, children: _jsx(ScreenLayout, { ...screen, ...(refresh || screen.actions ? { actions: _jsxs(Stack, { axis: "inline", gap: "xs", align: "center", children: [screen.actions, refresh ? _jsx(Action, { action: refresh, secondary: true }) : null] }) } : {}), children: loadMore ? _jsxs("div", { style: { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0, gap: screenPatternRecipe.itemGap }, children: [list, _jsx("div", { style: { display: "flex", justifyContent: "center" }, children: _jsx(Action, { action: loadMore, secondary: true }) })] }) : list }) }), detail ? _jsx("div", { ref: detailHost, style: { height: "100%" }, children: _jsx(ScreenLayout, { title: detail.title, ...(detail.titleVisibility === undefined ? {} : { titleVisibility: detail.titleVisibility }), ...(detail.headerAlignment === undefined ? {} : { headerAlignment: detail.headerAlignment }), ...(detail.state === undefined ? {} : { state: detail.state }), stateAction: detail.stateAction, notice: detail.notice, exit: { kind: "back", label: back.label, onClick: back.onAction, disabled: !!(back.disabled || back.pending) }, children: detail.content }) }) : null] });
 }
 export function EditorScreen({ children, dirty, submitPlacement = "footer", submit, cancel, discard, draftStatus, ...screen }) {
     const [confirm, setConfirm] = useState(false);
@@ -52,11 +56,11 @@ export function EditorScreen({ children, dirty, submitPlacement = "footer", subm
     // Preserve an async host result so AlertDialog can retain failure and retry.
     const leave = () => { if (!cancelLocked)
         return cancel.onAction(); };
-    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, leading: _jsx(Action, { action: { ...cancel, disabled: cancelLocked, onAction: () => { if (cancelLocked)
-                            return; if (dirty)
-                            setConfirm(true);
-                        else
-                            leave(); } }, secondary: true }), actions: submitPlacement === "header" ? _jsx(Action, { action: submitAction }) : screen.actions, footer: submitPlacement === "header" ? draftStatus : _jsxs(Stack, { gap: "sm", children: [draftStatus, _jsx(Action, { action: submitAction })] }), children: children }), _jsx(AlertDialog, { open: confirm && !cancelLocked, onOpenChange: setConfirm, request: { ...discard, mode: "confirm", onConfirm: leave } })] });
+    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, exit: { kind: "close", label: cancel.label, disabled: cancelLocked, onClick: () => { if (cancelLocked)
+                        return; if (dirty)
+                        setConfirm(true);
+                    else
+                        leave(); } }, actions: submitPlacement === "header" ? _jsx(Action, { action: submitAction }) : screen.actions, footer: submitPlacement === "header" ? draftStatus : _jsxs(Stack, { gap: "sm", children: [draftStatus, _jsx(Action, { action: submitAction })] }), children: children }), _jsx(AlertDialog, { open: confirm && !cancelLocked, onOpenChange: setConfirm, request: { ...discard, mode: "confirm", onConfirm: leave } })] });
 }
 export function ProfileScreen({ summary, edit, children, accountActions, ...screen }) { return _jsx(ScreenLayout, { ...screen, children: _jsxs(Stack, { gap: "xl", children: [_jsx(CompositionLayout, { footer: _jsx(Action, { action: edit, secondary: true }), children: summary }), children, accountActions] }) }); }
 export function ModerationScreen({ reasonPicker, reasons, reason, onReasonChange, reasonLabel, children, submit, block, ...screen }) {
@@ -66,7 +70,7 @@ export function ModerationScreen({ reasonPicker, reasons, reason, onReasonChange
     // a new explicit press even if the screen itself stays mounted.
     useEffect(() => { if (!hasBlock)
         setConfirm(false); }, [hasBlock]);
-    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, footer: _jsxs(Stack, { gap: "sm", children: [_jsx(Action, { action: { ...submit, disabled: submit.disabled || !!screen.state && screen.state.kind !== "ready" || !reasons.some(item => item.value === reason) } }), block ? _jsx(Action, { action: { ...block.action, onAction: () => setConfirm(true) }, secondary: true }) : null] }), children: _jsxs(Stack, { gap: "lg", children: [reasonPicker ?? (reasons.length ? _jsx(RadioGroup, { accessibilityLabel: reasonLabel, orientation: "vertical", items: reasons, value: reason, onValueChange: value => { if (value)
+    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, footer: _jsxs(Stack, { gap: "xs", children: [_jsx(Action, { action: { ...submit, disabled: submit.disabled || !!screen.state && screen.state.kind !== "ready" || !reasons.some(item => item.value === reason) } }), block ? _jsx(Action, { action: { ...block.action, onAction: () => setConfirm(true) }, secondary: true }) : null] }), children: _jsxs(Stack, { gap: "lg", children: [reasonPicker ?? (reasons.length ? _jsx(RadioGroup, { accessibilityLabel: reasonLabel, orientation: "vertical", items: reasons, value: reason, onValueChange: value => { if (value)
                                 onReasonChange(value); } }) : null), children] }) }), block ? _jsx(AlertDialog, { open: confirm, onOpenChange: setConfirm, request: block.confirmation }) : null] });
 }
 export function PhotoSourceSheet({ open, onOpenChange, onSelect, labels, disabled = false, cameraAvailable = true }) {
@@ -74,7 +78,7 @@ export function PhotoSourceSheet({ open, onOpenChange, onSelect, labels, disable
     // sheet animation ends can cause browsers to reject camera/album selection.
     const select = (source) => { if (disabled)
         return; onOpenChange(false); onSelect(source); };
-    return _jsx(Sheet, { open: open, onOpenChange: onOpenChange, title: labels.title, closeLabel: labels.cancel, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { tone: "secondary", disabled: disabled, onClick: () => select("library"), children: labels.library }), cameraAvailable ? _jsx(Button, { tone: "secondary", disabled: disabled, onClick: () => select("camera"), children: labels.camera }) : null] }) });
+    return _jsx(Sheet, { open: open, onOpenChange: onOpenChange, title: labels.title, closeLabel: labels.cancel, children: _jsxs(Stack, { gap: "xs", children: [_jsx(Button, { tone: "secondary", disabled: disabled, onClick: () => select("library"), children: labels.library }), cameraAvailable ? _jsx(Button, { tone: "secondary", disabled: disabled, onClick: () => select("camera"), children: labels.camera }) : null] }) });
 }
 /** A photo is the primary content; upload status stays below it instead of replacing the thumbnail. */
 export function MediaSelectionScreen({ library, selectionSummary, items, add, done, labels, actionLabels, removeLabel, moveUpLabel, moveDownLabel, onRemove, onMove, onRetry, onCancel, ...screen }) {
@@ -127,7 +131,7 @@ export function MediaSelectionScreen({ library, selectionSummary, items, add, do
             reveal(target);
         }
     });
-    return _jsx(ScreenLayout, { ...screen, actions: _jsx(Action, { action: add, secondary: true, buttonRef: addButton }), footer: _jsxs(Stack, { gap: "sm", children: [selectionSummary, _jsx(Action, { action: done })] }), children: library ?? _jsx(Grid, { ref: grid, columns: { compact: 2, expanded: 3 }, gap: { compact: "md" }, onFocusCapture: event => {
+    return _jsx(ScreenLayout, { ...screen, ...(add || screen.actions ? { actions: _jsxs(Stack, { axis: "inline", gap: "xs", align: "center", children: [screen.actions, add ? _jsx(Action, { action: add, buttonRef: addButton }) : null] }) } : {}), footer: _jsxs(Stack, { gap: "sm", children: [selectionSummary, _jsx(Action, { action: done })] }), children: library ?? _jsx(Grid, { ref: grid, columns: { compact: 2, expanded: 3 }, gap: { compact: "md" }, onFocusCapture: event => {
                 const node = event.target, row = node.closest("[data-hjm-media-item]");
                 const id = row?.dataset.hjmMediaItem;
                 if (id !== undefined)
@@ -292,9 +296,14 @@ export function SearchScreen({ query, queryLabel, queryField, queryClearLabel, o
     const body = phase === "idle" ? _jsxs(_Fragment, { children: [idle, committedQuery === undefined ? children : null] })
         : phase === "typing" ? (suggestions ? _jsx(SearchSuggestionList, { query: query, suggestions: suggestions, onCommit: pick }) : null)
             : _jsxs(_Fragment, { children: [_jsx(SearchResultsHeader, { summary: resultSummary, applied: appliedFilters, cause: cause, appliedHost: focus.appliedHost, onRemove: removeApplied, onClearAll: clearApplied, onSortChange: changeSort }), _jsx(SearchResultsBody, { summary: resultSummary, applied: appliedFilters, suggested: suggestedQueries, cause: cause, onCommit: pick, onClearAll: clearApplied, children: children })] });
-    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, notice: _jsxs(Stack, { gap: "sm", ref: fieldHost, children: [queryField ?? _jsx(SearchField, { ...labelProps, clearLabel: queryClearLabel, value: query, onValueChange: onQueryChange, loading: searching ?? false, ...submitProps }), filterSlot, screen.notice] }), children: _jsxs(Stack, { gap: "lg", ref: bodyHost, className: "hjm-search-screen__results", tabIndex: -1, children: [suggestions || resultSummary || searchingLabel ? _jsx(SearchAnnouncement, { text: announcement }) : null, body] }) }), filterSheet ? _jsx(SearchFilterSheetView, { sheet: filterSheet }) : null] });
+    // Search-first routes have no visible heading: navigation and input share one row.
+    // Keep explicit host headers and described/titled screens in their existing layout.
+    const inlineNavigation = screen.titleVisibility === "hidden" && screen.header == null && !screen.description;
+    const searchInput = queryField ?? _jsx(SearchField, { ...labelProps, clearLabel: queryClearLabel, value: query, onValueChange: onQueryChange, loading: searching ?? false, ...submitProps });
+    const queryRow = inlineNavigation ? _jsxs(Stack, { axis: "inline", align: "center", gap: "sm", children: [screen.exit ? _jsx(ScreenExitButton, { ...screen.exit }) : null, _jsx("div", { style: { flex: 1, minWidth: 0 }, children: searchInput }), screen.actions] }) : searchInput;
+    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, ...(inlineNavigation ? { header: _jsx(_Fragment, {}) } : {}), notice: _jsxs(Stack, { gap: "sm", ref: fieldHost, children: [queryRow, filterSlot, screen.notice] }), children: _jsxs(Stack, { gap: "lg", ref: bodyHost, className: "hjm-search-screen__results", tabIndex: -1, children: [suggestions || resultSummary || searchingLabel ? _jsx(SearchAnnouncement, { text: announcement }) : null, body] }) }), filterSheet ? _jsx(SearchFilterSheetView, { sheet: filterSheet }) : null] });
 }
-export function PermissionScreen({ status, illustration, explanation, request, settings, continueAction, skip, ...screen }) { const kind = resolvePermissionAction(status); const primary = kind === "request" ? request : kind === "settings" ? settings : kind === "continue" ? continueAction : null; return _jsx(ScreenLayout, { ...screen, footer: _jsxs(Stack, { gap: "sm", children: [primary ? _jsx(Action, { action: primary }) : null, skip ? _jsx(Action, { action: skip, secondary: true }) : null] }), children: _jsxs(Stack, { gap: "xl", align: "center", children: [illustration, explanation] }) }); }
+export function PermissionScreen({ status, illustration, explanation, request, settings, continueAction, skip, ...screen }) { const kind = resolvePermissionAction(status); const primary = kind === "request" ? request : kind === "settings" ? settings : kind === "continue" ? continueAction : null; return _jsx(ScreenLayout, { ...screen, footer: _jsxs(Stack, { gap: "xs", children: [primary ? _jsx(Action, { action: primary }) : null, skip ? _jsx(Action, { action: skip, secondary: true }) : null] }), children: _jsxs(Stack, { gap: "xl", align: "center", children: [illustration, explanation] }) }); }
 export function OnboardingScreen({ steps, index, onIndexChange, nextLabel, backLabel, complete, skip, progressLabel, layoutStyle }) {
     const position = resolveOnboardingStep(steps.length, index);
     const step = steps[index];
@@ -304,14 +313,34 @@ export function OnboardingScreen({ steps, index, onIndexChange, nextLabel, backL
     useLayoutEffect(() => { const body = host.current?.querySelector(".hjm-screen__body"); if (body)
         body.scrollTop = 0; }, [index]);
     const pending = !!(complete.pending || skip?.pending);
-    return _jsx("div", { ref: host, style: { display: "contents" }, children: _jsx(ScreenLayout, { ...(layoutStyle === undefined ? {} : { layoutStyle }), title: step.title, description: step.description, actions: skip ? _jsx(Action, { action: { ...skip, disabled: !!(skip.disabled || pending) }, secondary: true }) : null, notice: _jsx(Text, { variant: "caption", tone: "muted", children: progressLabel(index + 1, steps.length) }), footer: _jsxs(Stack, { gap: "sm", children: [_jsx(Action, { action: position.last ? { ...complete, disabled: !!(complete.disabled || pending) } : { label: nextLabel, disabled: pending, onAction: () => onIndexChange(index + 1) } }), !position.first ? _jsx(Action, { action: { label: backLabel, disabled: pending, onAction: () => onIndexChange(index - 1) }, secondary: true }) : null] }), children: step.content }) });
+    return _jsx("div", { ref: host, style: { display: "contents" }, children: _jsx(ScreenLayout, { ...(layoutStyle === undefined ? {} : { layoutStyle }), title: step.title, description: step.description, actions: skip ? _jsx(Action, { action: { ...skip, disabled: !!(skip.disabled || pending) }, secondary: true }) : null, notice: _jsx(Text, { variant: "caption", tone: "muted", children: progressLabel(index + 1, steps.length) }), footer: _jsxs(Stack, { gap: "xs", children: [_jsx(Action, { action: position.last ? { ...complete, disabled: !!(complete.disabled || pending) } : { label: nextLabel, disabled: pending, onAction: () => onIndexChange(index + 1) } }), !position.first ? _jsx(Action, { action: { label: backLabel, disabled: pending, onAction: () => onIndexChange(index - 1) }, secondary: true }) : null] }), children: step.content }) });
+}
+/** Quiet secondary actions (reply, expand) read as muted copy beside the body, not as filled buttons. */
+function CommentTextAction({ label, onPress, disabled = false, expanded }) {
+    return _jsx("button", { type: "button", className: "hjm-comment-row__action", disabled: disabled, "aria-expanded": expanded, onClick: onPress, children: label });
+}
+/** Vertical dots drawn in the icon grid, matching Native's drawn glyph (the semantic `more` icon is horizontal). */
+function CommentMenuGlyph() { const size = commentThreadRecipe.menuGlyphSize; return _jsx("svg", { "aria-hidden": "true", focusable: "false", width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", children: [5, 12, 19].map(y => _jsx("circle", { cx: "12", cy: y, r: "1.75" }, y)) }); }
+function CommentMenuButton({ item, menu }) {
+    const items = resolveCommentMenuItems(menu.items(item));
+    if (!items.length)
+        return null;
+    const label = menu.label(item);
+    return _jsx(Menu, { label: label, align: "end", trigger: _jsx(IconButton, { label: label, tone: "ghost", children: _jsx(CommentMenuGlyph, {}) }), items: items.map(entry => ({ id: entry.id, label: entry.label, textValue: entry.label, ...(entry.tone === undefined ? {} : { tone: entry.tone }), ...(entry.disabled === undefined ? {} : { disabled: entry.disabled }) })), onActionAfterDismiss: id => menu.onAction(item, id) });
 }
 /** Virtualized hosts reuse the same row as CommentThreadScreen; product slots add content, not a second layout. */
-export function CommentThreadRow({ item, onLike, onReply, replyLabel, layoutStyle }) {
-    return _jsxs(Stack, { axis: "inline", align: "start", gap: "sm", ...(layoutStyle === undefined ? {} : { layoutStyle }), children: [item.avatar, _jsxs(Stack, { gap: "xxs", layoutStyle: { flex: 1, minWidth: 0 }, children: [item.bodyText !== undefined ? _jsxs(Text, { children: [_jsx(Text, { emphasis: "strong", children: item.author }), " ", item.bodyText] }) : (item.author || item.timeLabel) ? _jsxs(Stack, { axis: "inline", gap: "sm", align: "center", layoutStyle: { flexWrap: "wrap" }, children: [item.author ? _jsx(Text, { emphasis: "strong", children: item.author }) : null, item.timeLabel ? _jsx("time", { dateTime: item.timeDateTime, children: _jsx(Text, { variant: "caption", tone: "muted", children: item.timeLabel }) }) : null] }) : null, item.body, _jsxs(Stack, { axis: "inline", gap: "sm", align: "center", layoutStyle: { flexWrap: "wrap" }, children: [item.bodyText !== undefined && item.timeLabel ? _jsx("time", { dateTime: item.timeDateTime, children: _jsx(Text, { variant: "caption", tone: "muted", children: item.timeLabel }) }) : null, item.likeCountLabel ? _jsx(Text, { variant: "caption", tone: "muted", children: item.likeCountLabel }) : null, (item.canReply ?? item.parentId === null) ? _jsx(Button, { size: "small", tone: "ghost", disabled: item.replyDisabled ?? false, onClick: () => onReply(item.id), children: replyLabel }) : null] })] }), _jsxs(Stack, { axis: "inline", gap: "xxs", align: "center", layoutStyle: { flexShrink: 0 }, children: [item.likeAction !== undefined ? item.likeAction : _jsx(IconButton, { label: item.likeLabel, tone: "ghost", onClick: () => onLike(item.id), children: item.likeIcon }), item.actions] })] }, item.id);
+export function CommentThreadRow({ item, onLike, onReply, replyLabel, layoutStyle, commentMenu }) {
+    const avatarSize = item.parentId === null ? commentThreadRecipe.avatarSize : commentThreadRecipe.replyAvatarSize;
+    const canReply = item.canReply ?? item.parentId === null;
+    const time = item.timeLabel ? _jsx("time", { dateTime: item.timeDateTime, children: _jsx(Text, { variant: "caption", tone: "muted", children: item.timeLabel }) }) : null;
+    // The like count sits under the heart so the text column carries only identity, body and reply.
+    return _jsxs(Stack, { axis: "inline", align: "start", gap: "xs", ...(layoutStyle === undefined ? {} : { layoutStyle }), children: [item.avatar ? _jsx("div", { className: "hjm-comment-row__avatar", style: { inlineSize: avatarSize }, children: item.avatar }) : null, _jsxs("div", { className: "hjm-comment-row__text", style: { gap: commentThreadRecipe.lineGap }, children: [(() => {
+                        const identity = _jsxs(_Fragment, { children: [item.bodyText !== undefined ? _jsxs(Text, { children: [_jsx(Text, { emphasis: "strong", children: item.author }), " ", item.bodyText] }) : (item.author || item.timeLabel) ? _jsxs(Stack, { axis: "inline", gap: "xxs", align: "center", layoutStyle: { flexWrap: "wrap" }, children: [item.author ? _jsx(Text, { variant: "caption", emphasis: "strong", children: item.author }) : null, time] }) : null, item.body, item.media ? _jsx("div", { className: "hjm-comment-row__media", style: { maxInlineSize: commentThreadRecipe.mediaMaxWidth, borderRadius: commentThreadRecipe.mediaRadius }, children: item.media }) : null] });
+                        return item.reactions ? _jsx(MessageReactions, { ...item.reactions, ...((item.canReply ?? item.parentId === null) && !item.replyDisabled ? { replyAction: { label: replyLabel, onPress: () => onReply(item.id), ...(item.reactions.replyIcon === undefined ? {} : { icon: item.reactions.replyIcon }) } } : {}), triggerClassName: "hjm-comment-row__reactions", children: identity }) : identity;
+                    })(), (item.bodyText !== undefined && time) || canReply || item.reactionSummary ? _jsxs(Stack, { axis: "inline", gap: "sm", align: "center", layoutStyle: { flexWrap: "wrap" }, children: [item.bodyText !== undefined ? time : null, item.reactionSummary, canReply ? _jsx(CommentTextAction, { label: replyLabel, disabled: item.replyDisabled ?? false, onPress: () => onReply(item.id) }) : null] }) : null] }), _jsxs("div", { className: "hjm-comment-row__like", children: [_jsxs(Stack, { axis: "inline", gap: "xxs", align: "center", layoutStyle: { flexShrink: 0 }, children: [item.likeAction !== undefined ? item.likeAction : _jsx(IconButton, { label: item.likeLabel, tone: "ghost", onClick: () => onLike(item.id), children: item.likeIcon }), item.actions, commentMenu ? _jsx(CommentMenuButton, { item: item, menu: commentMenu }) : null] }), item.likeCountLabel ? _jsx("div", { className: "hjm-comment-row__like-count", style: { inlineSize: commentThreadRecipe.likeColumnWidth }, children: _jsx(Text, { variant: "caption", tone: "muted", children: item.likeCountLabel }) }) : null] })] }, item.id);
 }
 /** Controlled thread: server ordering, permission checks and receipt-based draft clearing belong to the product. */
-export function CommentThreadScreen({ items, expandedIds, onExpandedChange, onLike, onReply, replyLabel, repliesLabel, composer, threadHeader, threadFooter, ...screen }) {
+export function CommentThreadScreen({ items, expandedIds, onExpandedChange, onLike, onReply, replyLabel, repliesLabel, composer, threadHeader, threadFooter, commentMenu, ...screen }) {
     validateCommentThread(items);
     // Index replies once; rescanning every item for each root makes long threads quadratic.
     const roots = [], repliesByParent = new Map();
@@ -327,10 +356,10 @@ export function CommentThreadScreen({ items, expandedIds, onExpandedChange, onLi
                 repliesByParent.set(item.parentId, [item]);
         }
     }
-    const row = (item) => _jsx(CommentThreadRow, { item: item, onLike: onLike, onReply: onReply, replyLabel: replyLabel }, item.id);
+    const row = (item) => _jsx(CommentThreadRow, { item: item, onLike: onLike, onReply: onReply, replyLabel: replyLabel, ...(commentMenu === undefined ? {} : { commentMenu }) }, item.id);
     // Product context belongs in the same scroll body as comments. Putting a tall
     // overview in the fixed header forced a second scroll region in Spint (2026-10-08).
-    return _jsx(ScreenLayout, { ...screen, footer: !screen.state || screen.state.kind === "ready" || screen.state.kind === "empty" ? composer : null, children: _jsxs(Stack, { gap: "lg", children: [threadHeader, roots.map(item => { const replies = repliesByParent.get(item.id) ?? []; return _jsxs(Stack, { gap: "xs", children: [row(item), replies.length ? _jsxs(Stack, { gap: "md", layoutStyle: { marginInlineStart: screenPatternRecipe.sectionGap }, children: [_jsx(Button, { layoutStyle: { alignSelf: "flex-start" }, tone: "ghost", size: "small", "aria-expanded": expanded.has(item.id), onClick: () => onExpandedChange(item.id), children: repliesLabel(replies.length, expanded.has(item.id)) }), expanded.has(item.id) ? replies.map(row) : null] }) : null] }, item.id); }), threadFooter] }) });
+    return _jsx(ScreenLayout, { ...screen, footer: !screen.state || screen.state.kind === "ready" || screen.state.kind === "empty" ? composer : null, children: _jsxs(Stack, { gap: "lg", children: [threadHeader, _jsx("div", { className: "hjm-comment-thread", style: { gap: commentThreadRecipe.rowGap }, children: roots.map(item => { const replies = repliesByParent.get(item.id) ?? []; return _jsxs("div", { className: "hjm-comment-thread", style: { gap: commentThreadRecipe.rowGap }, children: [row(item), replies.length ? _jsxs("div", { className: "hjm-comment-thread", style: { gap: commentThreadRecipe.rowGap, marginInlineStart: commentThreadRecipe.replyIndent }, children: [_jsx(CommentTextAction, { label: repliesLabel(replies.length, expanded.has(item.id)), expanded: expanded.has(item.id), onPress: () => onExpandedChange(item.id) }), expanded.has(item.id) ? replies.map(row) : null] }) : null] }, item.id); }) }), threadFooter] }) });
 }
 /** Profile identity and counts are common; routing and mutations stay controlled by the product. */
 export function ProfileSummary({ name, headingLevel = 2, avatar, badge, nameActions, stats = [], actions, children }) {