@hjmds/react 1.30.0 → 1.32.0

package/dist/screen-flows.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createContext, useContext } from "react";
+import { TextArea } from "./forms.js";
 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 { MediaAlbumView, useMediaAlbumIndex } from "./internal/media-album.js";
+import { validateMediaSetChoice } from "@hjmds/design-contracts/screen-patterns";
 import { Stack, Text, Grid, VisuallyHidden } from "./layout.js";
 import { SearchField } from "./forms.js";
 import { Chip, RadioGroup } from "./selection.js";
@@ -11,7 +15,7 @@ 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 { initialFocusDefaults, validateCommentThread, resolvePermissionAction, resolveOnboardingStep, resolveSearchCommit, resolveSearchDebounceMs, resolveSearchEmptyCause, resolveSearchScreenPhase, resolveFocusAfterRemoval, screenPatternRecipe, commentThreadRecipe, profileSummaryRecipe, searchScreenRecipe, resolveCommentMenuItems } from "@hjmds/design-contracts/screen-patterns";
+import { initialFocusDefaults, validateCommentThread, resolvePermissionAction, resolveOnboardingStep, resolveSearchCommit, resolveSearchDebounceMs, resolveSearchEmptyCause, resolveSearchFilterRailVisible, 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";
@@ -46,34 +50,82 @@ export function ListDetailScreen({ list, detail, back, refresh, loadMore, layout
     // "Load more" 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, edge: "end" }) : 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, initialFocus = initialFocusDefaults.editor, ...screen }) {
+export function EditorScreen({ children, dirty, submitPlacement = "footer", submit, cancel, discard, draftStatus, stepBack, initialFocus = initialFocusDefaults.editor, ...screen }) {
     const [confirm, setConfirm] = useState(false);
     const cancelLocked = !!(cancel.disabled || cancel.pending || submit.pending);
     const submitAction = { ...submit, disabled: !!(submit.disabled || screen.state && screen.state.kind !== "ready") };
     // A prompt opened before an external save must not bypass the current leave lock
     // or reappear once the save finishes. Keep the draft mounted throughout.
-    useEffect(() => { if (cancelLocked)
-        setConfirm(false); }, [cancelLocked]);
+    const stepping = !!stepBack, stepLocked = !!(stepBack?.disabled || stepBack?.pending || submit.pending);
+    // A step-back exit replaces the cancel exit, so a discard prompt opened from the cancel exit cannot outlive it.
+    useEffect(() => { if (cancelLocked || stepping)
+        setConfirm(false); }, [cancelLocked, stepping]);
     // Preserve an async host result so AlertDialog can retain failure and retry.
     const leave = () => { if (!cancelLocked)
         return cancel.onAction(); };
     // Writing is the screen's purpose: focus the first field on entry unless the host opts out (2026-10-18).
-    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, initialFocus: initialFocus, 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 } })] });
+    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, initialFocus: initialFocus, exit: stepBack ? { kind: "back", label: stepBack.label, disabled: stepLocked, onClick: () => { if (!stepLocked)
+                        stepBack.onAction(); } }
+                    : { 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 && !stepping, 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 }) {
+// Hands ProfileScreen's edit action to the ProfileSummary inside its summary slot, wherever the product nests it.
+const ProfileEditContext = createContext(undefined);
+export function ProfileScreen({ summary, edit, children, accountActions, editPlacement = "below-summary", ...screen }) { return _jsx(ScreenLayout, { ...screen, children: _jsxs(Stack, { gap: "xl", children: [editPlacement === "summary" ? _jsx(ProfileEditContext.Provider, { value: edit, children: summary }) : _jsx(CompositionLayout, { footer: _jsx(Action, { action: edit, secondary: true }), children: summary }), children, accountActions] }) }); }
+/** Body, stacked actions and confirmations shared by ModerationScreen (screen chrome) and ModerationForm (none). */
+function useModeration(fields, ready, cancel) {
     const [confirm, setConfirm] = useState(false);
-    const hasBlock = !!block;
+    const [confirmId, setConfirmId] = useState(null);
+    const review = fields.variant === "review" ? fields : null, report = fields.variant === "review" ? null : fields;
+    const hasBlock = !!report?.block;
     // Withdrawing the action ends that confirmation session; a later action needs
     // 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: "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] });
+    const confirming = review && !review.resolution ? review.decisions.find(decision => decision.id === confirmId && decision.confirmation) : undefined;
+    // Same rule for a decision: its confirmation closes when the decision or its confirmation is withdrawn or resolved.
+    useEffect(() => { if (confirmId !== null && !confirming)
+        setConfirmId(null); }, [confirmId, confirming]);
+    const cancelAction = cancel ? _jsx(Action, { action: cancel, secondary: true }) : null;
+    if (review) {
+        const busy = review.decisions.some(decision => decision.pending);
+        const reasonMissing = (review.decisionReason.required ?? true) && !review.decisionReason.value.trim();
+        const field = review.resolution ?? _jsx(TextArea, { label: review.decisionReason.label, value: review.decisionReason.value, onChange: event => review.decisionReason.onValueChange(event.currentTarget.value), ...(review.decisionReason.description === undefined ? {} : { description: review.decisionReason.description }), ...(review.decisionReason.maxLength === undefined ? {} : { maxLength: review.decisionReason.maxLength }), required: review.decisionReason.required ?? true, disabled: !!review.decisionReason.disabled || busy });
+        // One decision at a time: a pending decision locks the others and the reason it was taken with.
+        const decisions = review.resolution ? [] : review.decisions.map(decision => {
+            const locked = !!decision.disabled || busy || !ready || reasonMissing;
+            return _jsx(Button, { tone: decision.tone ?? "secondary", disabled: locked, loading: decision.pending ?? false, onClick: () => { if (locked)
+                    return; if (decision.confirmation)
+                    setConfirmId(decision.id);
+                else
+                    decision.onAction(); }, children: decision.label }, decision.id);
+        });
+        return { body: _jsxs(Stack, { gap: "lg", children: [review.children, field] }),
+            actions: decisions.length || cancelAction ? _jsxs(Stack, { gap: "xs", children: [decisions, cancelAction] }) : null,
+            dialogs: confirming?.confirmation ? _jsx(AlertDialog, { open: true, onOpenChange: open => { if (!open)
+                    setConfirmId(null); }, request: confirming.confirmation }) : null };
+    }
+    const r = report;
+    return { body: _jsxs(Stack, { gap: "lg", children: [r.reasonPicker ?? (r.reasons.length ? _jsx(RadioGroup, { accessibilityLabel: r.reasonLabel, orientation: "vertical", items: r.reasons, value: r.reason, onValueChange: value => { if (value)
+                        r.onReasonChange(value); } }) : null), r.children] }),
+        actions: _jsxs(Stack, { gap: "xs", children: [_jsx(Action, { action: { ...r.submit, disabled: r.submit.disabled || !ready || !r.reasons.some(item => item.value === r.reason) } }), r.block ? _jsx(Action, { action: { ...r.block.action, onAction: () => setConfirm(true) }, secondary: true }) : null, cancelAction] }),
+        dialogs: r.block ? _jsx(AlertDialog, { open: confirm, onOpenChange: setConfirm, request: r.block.confirmation }) : null };
+}
+// Every key of either variant, so the rest of the props reach ScreenLayout unchanged whichever variant is used.
+const moderationFieldKeys = ["variant", "reasonPicker", "reasons", "reason", "onReasonChange", "reasonLabel", "children", "submit", "block", "decisionReason", "decisions", "resolution"];
+export function ModerationScreen(props) {
+    const screen = { ...props };
+    for (const key of moderationFieldKeys)
+        delete screen[key];
+    const { body, actions, dialogs } = useModeration(props, !props.state || props.state.kind === "ready");
+    return _jsxs(_Fragment, { children: [_jsx(ScreenLayout, { ...screen, footer: actions, children: body }), dialogs] });
+}
+export function ModerationForm(props) {
+    const { body, actions, dialogs } = useModeration(props, true, props.cancel);
+    return _jsxs(_Fragment, { children: [_jsx(CompositionLayout, { ...(props.title === undefined ? {} : { title: props.title }), ...(props.headingLevel === undefined ? {} : { headingLevel: props.headingLevel }), ...(props.description === undefined ? {} : { description: props.description }), ...(props.actions === undefined ? {} : { actions: props.actions }), ...(props.layoutStyle === undefined ? {} : { layoutStyle: props.layoutStyle }), footer: actions, children: body }), dialogs] });
 }
 export function PhotoSourceSheet({ open, onOpenChange, onSelect, labels, disabled = false, cameraAvailable = true }) {
     // File-input click must stay in the user's activation stack. Deferring until the
@@ -82,8 +134,21 @@ export function PhotoSourceSheet({ open, onOpenChange, onSelect, labels, disable
         return; onOpenChange(false); onSelect(source); };
     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] }) });
 }
+/**
+ * One picked item: preview, upload status, then move/rotate/remove. Exported (2026-10-18, Utilverse photo tools) so a
+ * virtualized host (VirtualList, FlatList renderItem) renders the same cell as the screen grid instead of a copy.
+ * Web keyboard focus recovery after removal belongs to the screen grid; a virtualized host owns its own.
+ */
+export function MediaSelectionCell({ item, index, count, labels, actionLabels, removeLabel, moveUpLabel, moveDownLabel, onRemove, onMove, onRetry, onCancel, rotate, disabled = false }) {
+    const id = item.descriptor.id;
+    // The job lock is temporary, so it keeps the focused action focusable (aria-disabled; Button drops the click) instead
+    // of throwing keyboard focus to <body> for the length of the job. The list boundaries stay natively disabled.
+    const lock = disabled ? { "aria-disabled": true } : {};
+    return _jsxs(Stack, { "data-hjm-media-item": id, gap: "xs", children: [item.preview, _jsx(UploadItem, { descriptor: item.descriptor, labels: labels, onRetry: onRetry, onCancel: onCancel }), _jsxs(Stack, { axis: "inline", gap: "xxs", layoutStyle: { flexWrap: "wrap" }, children: [_jsx(Button, { "data-media-action": "up", "aria-label": moveUpLabel(item), size: "small", tone: "ghost", disabled: index === 0, ...lock, onClick: () => onMove(id, -1), children: actionLabels.moveUp }), _jsx(Button, { "data-media-action": "down", "aria-label": moveDownLabel(item), size: "small", tone: "ghost", disabled: index === count - 1, ...lock, onClick: () => onMove(id, 1), children: actionLabels.moveDown }), rotate ? _jsx(Button, { "data-media-action": "rotate", "aria-label": rotate.itemLabel(item), size: "small", tone: "ghost", ...lock, onClick: () => rotate.onRotate(id), children: rotate.label }) : null, _jsx(Button, { "data-media-action": "remove", "aria-label": removeLabel(item), size: "small", tone: "ghost", ...lock, onClick: () => onRemove(id), children: actionLabels.remove })] })] });
+}
 /** 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 }) {
+export function MediaSelectionScreen({ library, selectionSummary, items, add, done, labels, actionLabels, removeLabel, moveUpLabel, moveDownLabel, onRemove, onMove, onRetry, onCancel, rotate, disabled, ...screen }) {
+    const itemActions = { labels, actionLabels, removeLabel, moveUpLabel, moveDownLabel, onRemove, onMove, onRetry, onCancel, ...(rotate === undefined ? {} : { rotate }), ...(disabled === undefined ? {} : { disabled }) };
     const grid = useRef(null), addButton = useRef(null);
     const focusedItem = useRef(null);
     useLayoutEffect(() => {
@@ -144,7 +209,7 @@ export function MediaSelectionScreen({ library, selectionSummary, items, add, do
                 // disabled move button retain it until the layout effect chooses a successor.
                 if (event.relatedTarget ? !event.currentTarget.contains(event.relatedTarget) : node.isConnected && !node.matches(":disabled"))
                     focusedItem.current = null;
-            }, children: items.map((item, index) => _jsxs(Stack, { "data-hjm-media-item": item.descriptor.id, gap: "xs", children: [item.preview, _jsx(UploadItem, { descriptor: item.descriptor, labels: labels, onRetry: onRetry, onCancel: onCancel }), _jsxs(Stack, { axis: "inline", gap: "xxs", layoutStyle: { flexWrap: "wrap" }, children: [_jsx(Button, { "data-media-action": "up", "aria-label": moveUpLabel(item), size: "small", tone: "ghost", disabled: index === 0, onClick: () => onMove(item.descriptor.id, -1), children: actionLabels.moveUp }), _jsx(Button, { "data-media-action": "down", "aria-label": moveDownLabel(item), size: "small", tone: "ghost", disabled: index === items.length - 1, onClick: () => onMove(item.descriptor.id, 1), children: actionLabels.moveDown }), _jsx(Button, { "data-media-action": "remove", "aria-label": removeLabel(item), size: "small", tone: "ghost", onClick: () => onRemove(item.descriptor.id), children: actionLabels.remove })] })] }, item.descriptor.id)) }) });
+            }, children: items.map((item, index) => _jsx(MediaSelectionCell, { item: item, index: index, count: items.length, ...itemActions }, item.descriptor.id)) }) });
 }
 function Highlighted({ text, match }) {
     if (!match || match.start < 0 || match.end <= match.start || match.end > text.length)
@@ -240,7 +305,7 @@ function SearchFilterSheetView({ sheet }) {
     return _jsx(Sheet, { open: sheet.open, onOpenChange: open => sheet.onOpenChange(open), title: sheet.title, closeLabel: sheet.labels.close, placement: session?.side ? "end" : "bottom", size: sheet.size ?? "large", footer: footer, children: sheet.renderContent(draft, setDraft) });
 }
 /** Abort is supplied to the host request; the host must ignore aborted responses before committing results. */
-export function SearchScreen({ query, queryLabel, queryField, queryClearLabel, onQueryChange, onSearch, debounceMs, filters, recentSearches, children, onSubmit, committedQuery, filtersOverflow = "wrap", hostGutter = "none", queryLabelVisibility = "visible", searching, searchingLabel, recentQueries, suggestedQueries, suggestions, resultSummary, appliedFilters, filterSheet, initialFocus = initialFocusDefaults.search, ...screen }) {
+export function SearchScreen({ query, queryLabel, queryField, queryClearLabel, onQueryChange, onSearch, debounceMs, filters, recentSearches, children, onSubmit, committedQuery, filtersOverflow = "wrap", filtersRole = "narrow", hostGutter = "none", queryLabelVisibility = "visible", searching, searchingLabel, recentQueries, suggestedQueries, suggestions, resultSummary, appliedFilters, filterSheet, initialFocus = initialFocusDefaults.search, ...screen }) {
     // The host owns localized copy. A custom queryField owns its own clear affordance.
     if (queryField == null && !queryClearLabel?.trim())
         throw new TypeError("SearchScreen requires a localized queryClearLabel for its default search field");
@@ -275,9 +340,9 @@ export function SearchScreen({ query, queryLabel, queryField, queryClearLabel, o
     const phase = resolveSearchScreenPhase(query, committedQuery);
     const appliedCount = appliedFilters?.items.length ?? 0;
     const cause = phase === "results" && resultSummary ? resolveSearchEmptyCause(resultSummary.count, appliedCount) : "none";
-    // Two-step search shows the rail only beside results (typing keeps the pinned area short), and a
-    // query-caused zero hides it because no filter can fix that; a filter-caused zero keeps it to undo the filter.
-    const showRail = (committedQuery === undefined || phase === "results") && cause !== "query";
+    // Two-step search shows the rail only beside results; a query-caused zero hides narrowing filters (none can fix it)
+    // but keeps scope filters, which are that zero's recovery (resolveSearchFilterRailVisible, Native twin).
+    const showRail = resolveSearchFilterRailVisible(phase, committedQuery !== undefined, cause, filtersRole);
     const trigger = filterSheet?.trigger ? _jsx(SearchFilterTrigger, { sheet: filterSheet, appliedCount: appliedCount, triggerRef: focus.filterTrigger }) : null;
     const rail = !showRail ? null : trigger && filters != null ? _jsxs(Stack, { axis: "inline", gap: "xs", wrap: filtersOverflow === "wrap", children: [trigger, filters] }) : trigger ?? filters;
     // Wrapping chips grow the pinned area line by line at large text; the scroll rail caps it at one row.
@@ -332,15 +397,19 @@ function CommentMenuButton({ item, menu, items }) {
 }
 /** Virtualized hosts reuse the same row as CommentThreadScreen; product slots add content, not a second layout. */
 export function CommentThreadRow({ item, onLike, onReply, replyLabel, layoutStyle, commentMenu }) {
+    validateMediaSetChoice(item.media != null, item.mediaAlbum !== undefined);
+    const [albumIndex, setAlbumIndex] = useMediaAlbumIndex(item.mediaAlbum);
+    // bodyText inlines the author, so its time always moves under the body; rich bodies opt in with timePlacement.
+    const timeInActions = item.bodyText !== undefined || item.timePlacement === "actions";
     const avatarSize = item.parentId === null ? commentThreadRecipe.avatarSize : commentThreadRecipe.replyAvatarSize;
     const canReply = item.canReply ?? item.parentId === null;
     const menuItems = commentMenu ? resolveCommentMenuItems(commentMenu.items(item)) : [];
     const time = item.timeLabel ? _jsx("time", { className: "hjm-comment-row__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] });
+                        const identity = _jsxs(_Fragment, { children: [item.bodyText !== undefined ? _jsxs(Text, { children: [_jsx(Text, { emphasis: "strong", children: item.author }), " ", item.bodyText] }) : (item.author || (item.timeLabel && !timeInActions)) ? _jsxs(Stack, { axis: "inline", gap: "xxs", align: "center", layoutStyle: { flexWrap: "wrap" }, children: [item.author ? _jsx(Text, { variant: "caption", emphasis: "strong", children: item.author }) : null, timeInActions ? 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", ...(menuItems.length || item.actions == null && item.likeAction === undefined ? { "data-edge": "end" } : {}), style: { "--hjm-comment-anchor-line": `var(--hjm-type-${item.bodyText !== undefined ? commentThreadRecipe.actionAnchor.inlineTextVariant : commentThreadRecipe.actionAnchor.authorTextVariant}-line-height)` }, 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 && menuItems.length ? _jsx(CommentMenuButton, { item: item, menu: commentMenu, items: menuItems }) : 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);
+                    })(), item.mediaAlbum ? _jsx(MediaAlbumView, { className: "hjm-comment-row__album", album: item.mediaAlbum, index: albumIndex, onIndexChange: setAlbumIndex, width: commentThreadRecipe.mediaMaxWidth, radius: commentThreadRecipe.mediaRadius }) : null, (timeInActions && time) || canReply || item.reactionSummary ? _jsxs(Stack, { axis: "inline", gap: "sm", align: "center", layoutStyle: { flexWrap: "wrap" }, children: [timeInActions ? time : null, item.reactionSummary, canReply ? _jsx(CommentTextAction, { label: replyLabel, disabled: item.replyDisabled ?? false, onPress: () => onReply(item.id) }) : null] }) : null, item.panel != null ? _jsx("div", { className: "hjm-comment-row__panel", style: { marginBlockStart: commentThreadRecipe.panelGap - commentThreadRecipe.lineGap }, children: item.panel }) : null] }), _jsxs("div", { className: "hjm-comment-row__like", ...(menuItems.length || item.actions == null && item.likeAction === undefined ? { "data-edge": "end" } : {}), style: { "--hjm-comment-anchor-line": `var(--hjm-type-${item.bodyText !== undefined ? commentThreadRecipe.actionAnchor.inlineTextVariant : commentThreadRecipe.actionAnchor.authorTextVariant}-line-height)` }, 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 && menuItems.length ? _jsx(CommentMenuButton, { item: item, menu: commentMenu, items: menuItems }) : 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, commentMenu, ...screen }) {
@@ -366,7 +435,10 @@ export function CommentThreadScreen({ items, expandedIds, onExpandedChange, onLi
 }
 /** 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 }) {
+    const edit = useContext(ProfileEditContext);
+    const { tone: editTone, size: editSize } = profileSummaryRecipe.editAction;
+    const editButton = edit ? _jsx(Button, { tone: editTone, size: editSize, disabled: !!(edit.disabled || edit.pending), loading: edit.pending ?? false, onClick: edit.onAction, children: edit.label }) : null;
     return _jsxs(CompositionLayout, { title: name, headingLevel: headingLevel, leading: _jsx("span", { style: { display: "flex", width: profileSummaryRecipe.avatarSize, height: profileSummaryRecipe.avatarSize, flexShrink: 0, borderRadius: "50%", overflow: "hidden" }, children: avatar }), badge: badge, actions: nameActions, footer: children, children: [stats.length ? _jsx(Stack, { axis: "inline", gap: "md", align: "stretch", layoutStyle: { width: "100%" }, children: stats.map(stat => _jsx(Stack, { gap: "xxs", align: "center", justify: "center", layoutStyle: { flex: 1, minWidth: 0 }, children: stat.onPress ? _jsx(Button, { tone: "ghost", "aria-label": `${stat.value} ${stat.label}`, disabled: stat.disabled ?? false, onClick: stat.onPress, layoutStyle: { width: "100%" }, children: _jsxs(Stack, { gap: "xxs", align: "center", children: [_jsx(Text, { emphasis: "strong", children: stat.value }), _jsx(Text, { variant: "caption", tone: "muted", children: stat.label })] }) })
-                        : _jsxs(_Fragment, { children: [_jsx(Text, { emphasis: "strong", children: stat.value }), _jsx(Text, { variant: "caption", tone: "muted", children: stat.label })] }) }, stat.id)) }) : null, actions ? _jsx(Stack, { axis: "inline", gap: "sm", wrap: true, children: actions }) : null] });
+                        : _jsxs(_Fragment, { children: [_jsx(Text, { emphasis: "strong", children: stat.value }), _jsx(Text, { variant: "caption", tone: "muted", children: stat.label })] }) }, stat.id)) }) : null, editButton || actions ? _jsxs(Stack, { axis: "inline", gap: "sm", wrap: true, children: [editButton, actions] }) : null] });
 }
 //# sourceMappingURL=screen-flows.js.map