@hjmds/react 1.30.0 → 1.32.0

package/dist/screens.d.ts

@@ -1,10 +1,13 @@
-import { type ScreenInitialFocus } from "@hjmds/design-contracts/screen-patterns";
+import { type ScreenInitialFocus, type IconTileArtwork, type IconTileFrame, type IconTileShape, type IconTileSize } from "@hjmds/design-contracts/screen-patterns";
 import { type ComposerLengthFeedback } from "@hjmds/design-contracts/communication";
 import { type DesignProfileScreenPresentation } from "@hjmds/design-contracts/design-profile-layout";
 import { type MessageMenuAction } from "./internal/message-reactions.js";
+import { type MediaAlbum } from "./internal/media-album.js";
+export type { MediaAlbum, MediaAlbumPageStatusProps } from "./internal/media-album.js";
+export { MediaAlbumPageStatus } from "./internal/media-album.js";
 import type { ReactionPickerProps } from "./reaction-picker.js";
 import { type Ref, type ReactNode } from "react";
-import { type MessageAttachmentDescriptor, type ChatMessageDescriptor, type MessageComposerDescriptor, type ScreenContentState, type ScreenContentInset } from "@hjmds/design-contracts/screen-patterns";
+import { type MessageAttachmentDescriptor, type ChatReactionSummary, type ChatMessageDescriptor, type MessageComposerDescriptor, type ScreenContentState, type ScreenContentInset } from "@hjmds/design-contracts/screen-patterns";
 import { type ScreenExit } from "./internal/screen-exit.js";
 import { type ListRowProps } from "./display.js";
 import type { HjmCompositionStyleProp } from "./composition-style.js";
@@ -12,13 +15,22 @@ export type ScreenLayoutProps = Readonly<{
     title: string;
     /** The shared header owns badge placement; the product supplies its meaning and label. */
     titleBadge?: ReactNode;
+    /**
+     * Identity mark or artwork before the title (team logo, tool artwork). Decorative: the title stays the heading and
+     * the accessible name. With `titleVisibility="hidden"` the mark stands alone in the title slot as the heading,
+     * named by `title` (2026-10-18: yajalal team detail and Utilverse tool headers rebuilt the header to get this).
+     */
+    titleLeading?: ReactNode;
     /** Hide redundant route names while retaining descriptions and a named screen. */
     titleVisibility?: "visible" | "hidden";
     /** Centered by default (2026-10-17 user rule); `start` remains available. Extra actions sit at the trailing edge. */
     headerAlignment?: "start" | "center";
     /** Preserve host navigation while the shared shell owns content and state. */
     header?: ReactNode;
-    /** `none`: host owns every inset. `body-edge`: only the body drops its inline padding so list rows own their inset. */
+    /**
+     * `none`: host owns every inset. `body-edge`: only the body drops its inline padding so list rows own their inset.
+     * `body-bleed`: the body drops every padding (header, notice and footer keep theirs) for an edge-to-edge map or canvas.
+     */
     contentInset?: ScreenContentInset;
     /** Center a product prompt in the available body without inventing a query state. */
     contentAlignment?: "start" | "center";
@@ -37,6 +49,8 @@ export type ScreenLayoutProps = Readonly<{
     footer?: ReactNode;
     state?: ScreenContentState;
     stateAction?: ReactNode;
+    /** Brand visual for `state.kind === "loading"`; the shared state group keeps copy, centering and announcement (as CompositionLayout). */
+    loadingIndicator?: ReactNode;
     children?: ReactNode;
     /** A virtualized list must own scrolling; never nest it inside a second scroll container. */
     scroll?: "screen" | "content";
@@ -57,9 +71,7 @@ export type ScreenLayoutProps = Readonly<{
     initialFocus?: ScreenInitialFocus;
 }>;
 /** Shared screen shell. Routing, data, permission checks and mutation state remain product-owned. */
-export declare function ScreenLayout({ title, titleBadge, titleVisibility, headerAlignment, header, contentInset, contentAlignment, surface, presentation: suppliedPresentation, description, exit, actions, notice, footer, state, stateAction, children, scroll, as: Element, className, layoutStyle, initialFocus, hjmTitleLeading }: ScreenLayoutProps & Readonly<{
-    hjmTitleLeading?: ReactNode;
-}>): import("react").JSX.Element;
+export declare function ScreenLayout({ title, titleBadge, titleLeading, titleVisibility, headerAlignment, header, contentInset, contentAlignment, surface, presentation: suppliedPresentation, description, exit, actions, notice, footer, state, stateAction, loadingIndicator, children, scroll, as: Element, className, layoutStyle, initialFocus }: ScreenLayoutProps): import("react").JSX.Element;
 /**
  * Style for a product scroller that owns the body with `scroll="content"`: it reaches across the body gutter
  * (`--hjm-screen-body-inline`) and pads it back, so items stay on the gutter while the clip moves to the screen edges and
@@ -93,7 +105,7 @@ export type NotificationItemProps = Omit<ListRowProps, "description" | "selected
     description?: ReactNode;
 }>;
 export declare function NotificationItem({ read, statusLabel, timestamp, description, title, className, ...props }: NotificationItemProps): import("react").JSX.Element;
-export type ChatScreenProps = Omit<ScreenLayoutProps, "footer"> & Readonly<{
+export type ChatScreenProps = Omit<ScreenLayoutProps, "footer" | "titleLeading"> & Readonly<{
     composer: ReactNode;
     /** Shown while the reader is away from the latest message; the host owns scroll position and visibility. */
     jumpToLatest?: Readonly<{
@@ -195,11 +207,24 @@ export type ChatMessageProps = ChatMessageDescriptor & Readonly<{
             disabled?: boolean;
             icon?: ReactNode;
         }>;
+        summary?: ChatMessageReactionSummary;
     }>;
     /** Canonical layout-only placement on the message row. The swipe offset still owns `transform`. */
     layoutStyle?: HjmCompositionStyleProp;
+}> & Readonly<{
+    /**
+     * Paged alternative to `media` (2026-10-18, Utilverse): HJM mounts only the shown photo, so a product that authorizes
+     * each image fetches one page at a time. Exclusive with `media` (validated at render): one message has one photo set.
+     */
+    mediaAlbum?: MediaAlbum;
 }>;
-export declare function ChatMessage({ direction, author, timestamp, timestampPresentation, bubbleTail, groupPosition, deliveryLabel, avatar, reply, replyQuote, media, actions, replyAction, replyLink, reactions, children, interactiveContent, layoutStyle }: ChatMessageProps): import("react").JSX.Element;
+/**
+ * Current reactions drawn beside the time as one button that opens the same hold menu (2026-10-18 BurnTok DM, which
+ * showed counts as status tags because the menu could not be opened from outside). Counts and the localized
+ * accessible name ("Reactions: heart 2. Open menu") come from the product; `items` in display order.
+ */
+export type ChatMessageReactionSummary = ChatReactionSummary;
+export declare function ChatMessage({ direction, author, timestamp, timestampPresentation, bubbleTail, groupPosition, deliveryLabel, avatar, reply, replyQuote, media, mediaAlbum, actions, replyAction, replyLink, reactions, children, interactiveContent, layoutStyle }: ChatMessageProps): import("react").JSX.Element;
 /** Shared structure for embedded compositions. The parent supplies size; this never creates a second scroller. */
 export type CompositionLayoutProps = Readonly<{
     title?: string;
@@ -231,12 +256,46 @@ export type NotificationRowProps = Readonly<{
 /** Router host owns the sole target and localized accessible name, as with ConversationRow. */
 export declare function NotificationRow({ preview, metadata, avatar, avatarBadge, thumbnail, unread }: NotificationRowProps): import("react").JSX.Element;
 export type IconTileProps = Readonly<{
-    icon: ReactNode;
+    /**
+     * Icon artwork. A function receives the rendered edge (`IconTileArtwork`) so fixed-size artwork such as an image
+     * sizes itself to a `size="fill"` icon without the product re-computing the cell clamp.
+     */
+    icon: ReactNode | ((artwork: IconTileArtwork) => ReactNode);
     label: string;
     overlay?: ReactNode;
     labelLines?: 1 | 2;
     ghost?: boolean;
+    /** `none`: the icon is complete product artwork, so no frame fill or hairline is drawn. */
+    frame?: IconTileFrame;
+    /** Frame (and ghost outline) corner shape from the product's icon theme. */
+    shape?: IconTileShape;
+    /** `fill`: the icon spans the grid cell between iconTileRecipe.fillMinSize and fillMaxSize. */
+    size?: IconTileSize;
 }>;
 /** Presentation shared by launcher and profile grids; the host owns navigation or drag behavior. */
-export declare function IconTile({ icon, label, overlay, labelLines, ghost }: IconTileProps): import("react").JSX.Element;
+export declare function IconTile({ icon, label, overlay, labelLines, ghost, frame, shape, size }: IconTileProps): import("react").JSX.Element;
+export type TypingIndicatorProps = Readonly<{
+    /** Localized status read by assistive tech ("Seoyeon is typing"); the visible row shows only the dots. */
+    label: string;
+    /** Typer's photo in a group room, sized like ChatMessage avatars (`chatMessageRecipe.avatarSize`). */
+    avatar?: ReactNode;
+    layoutStyle?: HjmCompositionStyleProp;
+}>;
+/**
+ * Incoming "is typing" row for a ChatScreen timeline (2026-10-18 BurnTok DM drew its own). The host shows it only while
+ * presence says someone is typing and places it after the last message; HJM owns the bubble, dots and announcement.
+ */
+export declare function TypingIndicator({ label, avatar, layoutStyle }: TypingIndicatorProps): import("react").JSX.Element;
+export type ChatDateSeparatorProps = Readonly<{
+    /** Product-formatted date or time ("Today", "Oct 18", "3:04 PM"). */
+    label: string;
+    /** Machine-readable value for the Web `<time>` element; Native ignores it. */
+    dateTime?: string;
+    layoutStyle?: HjmCompositionStyleProp;
+}>;
+/**
+ * Centered date (or time) row between ChatScreen timeline groups (2026-10-18 Utilverse chat drew a caption). Grouping
+ * rules stay with the product; the next message keeps its own group gap, so this row adds only the space before it.
+ */
+export declare function ChatDateSeparator({ label, dateTime, layoutStyle }: ChatDateSeparatorProps): import("react").JSX.Element;
 //# sourceMappingURL=screens.d.ts.map

package/dist/screens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../src/screens.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../src/screens.tsx"],"names":[],"mappings":"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"}

package/dist/screens.js

@@ -5,29 +5,34 @@ import { iconButtonRecipe, listRowRecipe } from "@hjmds/design-contracts/recipes
 import { resolveComposerLimit } from "@hjmds/design-contracts/communication";
 import { Progress } from "./feedback.js";
 import { resolveDesignProfileScreen } from "@hjmds/design-contracts/design-profile-layout";
-import { MessageReactions } from "./internal/message-reactions.js";
+import { MessageReactions, ReactionSummaryButton, ReactionSummaryText, omitReactionSummary } from "./internal/message-reactions.js";
+import { MediaAlbumView, useMediaAlbumIndex } from "./internal/media-album.js";
+import { validateMediaSetChoice } from "@hjmds/design-contracts/screen-patterns";
+// Loading/failed page rendered inside `mediaAlbum.renderPage` (2026-10-18); comment rows use the same component.
+export { MediaAlbumPageStatus } from "./internal/media-album.js";
 import { Button, IconButton } from "./actions.js";
 import { useOptionalHjmTheme } from "./provider.js";
 import { TextArea } from "./forms.js";
 import { useId, useLayoutEffect, useRef, useState } from "react";
-import { isReplySwipe, timestampRevealOffset, shouldSubmitMessageKey, canSubmitMessage, validateMessageAttachments, resolveScreenContentState, screenPatternRecipe, chatMessageRecipe, composerQuickInsertRecipe, resolveChatMessageGroupDisplay, resolveChatMediaColumns, screenHeaderRecipe, validateScreenExit } from "@hjmds/design-contracts/screen-patterns";
+import { isReplySwipe, timestampRevealOffset, shouldSubmitMessageKey, canSubmitMessage, validateMessageAttachments, resolveScreenContentState, screenPatternRecipe, chatMessageRecipe, composerQuickInsertRecipe, resolveChatMessageGroupDisplay, resolveChatMediaColumns, resolveChatReactionSummary, typingIndicatorRecipe, chatDateSeparatorRecipe, screenHeaderRecipe, validateScreenExit } from "@hjmds/design-contracts/screen-patterns";
 import { Heading } from "./heading.js";
 import { Spinner } from "./internal/spinner.js";
 import { ScreenExitButton } from "./internal/screen-exit.js";
 import { ScreenFooterContext } from "./internal/screen-footer.js";
-import { Section, Stack, Text } from "./layout.js";
+import { Section, Stack, Text, VisuallyHidden } from "./layout.js";
 import { ListRow } from "./display.js";
 import { classNames, useDesignProfileDefaults } from "./internal.js";
 /** Shared screen shell. Routing, data, permission checks and mutation state remain product-owned. */
-export function ScreenLayout({ title, titleBadge, titleVisibility = "visible", headerAlignment = "center", header, contentInset = "default", contentAlignment = "start", surface = "default", presentation: suppliedPresentation, description, exit, actions, notice, footer, state = { kind: "ready" }, stateAction, children, scroll = "screen", as: Element = "main", className, layoutStyle, initialFocus = initialFocusDefaults.screen, hjmTitleLeading }) {
+export function ScreenLayout({ title, titleBadge, titleLeading, titleVisibility = "visible", headerAlignment = "center", header, contentInset = "default", contentAlignment = "start", surface = "default", presentation: suppliedPresentation, description, exit, actions, notice, footer, state = { kind: "ready" }, stateAction, loadingIndicator, children, scroll = "screen", as: Element = "main", className, layoutStyle, initialFocus = initialFocusDefaults.screen }) {
     const id = useId();
     if (exit)
         validateScreenExit(exit, false);
     const leading = exit ? _jsx(ScreenExitButton, { ...exit }) : null;
-    const showHeader = titleVisibility === "visible" || !!description || !!leading || !!actions;
+    const hasMark = titleLeading !== undefined && titleLeading !== null && titleLeading !== false;
+    const showHeader = titleVisibility === "visible" || hasMark || !!description || !!leading || !!actions;
     // Same header band as Native (screenHeaderRecipe): a fixed 52 band (48 icon-only) so the title sits at the same
     // height with or without exit/actions buttons (2026-10-17: Web grew 58→76 when a 44 button was present).
-    const compactHeader = header == null && headerAlignment === "center" && titleVisibility === "hidden" && !description;
+    const compactHeader = header == null && headerAlignment === "center" && titleVisibility === "hidden" && !hasMark && !description;
     // Screens historically work with the stylesheet alone. Optional context keeps
     // that path while inheriting profiles from an enclosing Provider when present.
     const designProfile = useDesignProfileDefaults();
@@ -50,13 +55,18 @@ export function ScreenLayout({ title, titleBadge, titleVisibility = "visible", h
             lastBodyFocus.current = null;
     });
     const recipe = screenPatternRecipe;
-    return _jsx(Element, { "aria-labelledby": header || titleVisibility === "hidden" ? undefined : id, "aria-label": header || titleVisibility === "hidden" ? title : undefined, "data-content-inset": contentInset, "data-presentation": presentation, className: classNames("hjm-screen", className), style: { backgroundColor: surface === "transparent" || designProfile?.material.canvas ? "transparent" : undefined, "--hjm-screen-width": `${profileLayout?.maxWidth ?? recipe.maxWidth}px`, "--hjm-screen-padding": `${contentInset === "none" ? 0 : recipe.padding}px`, "--hjm-screen-gap": `${profileLayout?.gap ?? recipe.sectionGap}px`, "--hjm-screen-item-gap": `${recipe.itemGap}px`, "--hjm-screen-state-gap": `${recipe.stateGap}px`, "--hjm-screen-header-min": `${recipe.headerMinWidth}px`, ...layoutStyle }, children: _jsxs(InitialFocusScope, { mode: initialFocus, children: [header ?? (showHeader ? headerAlignment === "center" ? _jsxs("header", { className: "hjm-screen__header", style: { display: "grid", gridTemplateColumns: "1fr minmax(0, auto) 1fr", alignItems: "center", boxSizing: "border-box", minBlockSize: compactHeader ? screenHeaderRecipe.compactMinHeight : screenHeaderRecipe.minHeight, paddingBlock: compactHeader ? screenHeaderRecipe.compactPaddingVertical : screenHeaderRecipe.paddingVertical }, children: [_jsx("div", { children: leading }), _jsxs("div", { className: "hjm-screen__heading", style: { textAlign: "center", minWidth: 0 }, children: [titleVisibility === "visible" && _jsxs(Stack, { axis: "inline", gap: "xs", align: "center", justify: "center", wrap: true, children: [hjmTitleLeading, _jsx(Heading, { level: screenHeaderRecipe.centeredTitleLevel, semanticLevel: 1, id: id, children: title }), titleBadge] }), description ? _jsx(Text, { as: "p", tone: "muted", children: description }) : null] }), _jsx("div", { style: { justifySelf: "end" }, children: actions })] }) : _jsxs("header", { className: "hjm-screen__header", style: profileLayout ? { flexDirection: profileLayout.headerAxis, alignItems: profileLayout.centered ? "center" : undefined, textAlign: profileLayout.centered ? "center" : undefined } : undefined, children: [leading, _jsxs("div", { className: "hjm-screen__heading", children: [titleVisibility === "visible" && _jsxs(Stack, { axis: "inline", gap: "xs", align: "center", justify: profileLayout?.centered ? "center" : "start", wrap: true, children: [_jsx(Heading, { level: screenHeaderRecipe.titleLevel, semanticLevel: 1, id: id, children: title }), titleBadge] }), description ? _jsx(Text, { as: "p", tone: "muted", children: description }) : null] }), actions] }) : null), notice ? _jsx("div", { className: "hjm-screen__notice", children: notice }) : null, _jsx("div", { ref: bodyRef, role: "region", "aria-label": title, tabIndex: bodyScroll === "content" ? -1 : 0, onFocusCapture: event => { lastBodyFocus.current = event.target; }, onBlurCapture: event => {
+    // The mark is decorative beside a visible title; standing alone it becomes the heading, named by `title`.
+    const mark = hasMark ? _jsx("span", { className: "hjm-screen__title-leading", "aria-hidden": "true", children: titleLeading }) : null;
+    const titleRow = (level, justify) => titleVisibility === "visible"
+        ? _jsxs(Stack, { axis: "inline", gap: "xs", align: "center", justify: justify, wrap: true, children: [mark, _jsx(Heading, { level: level, semanticLevel: 1, id: id, children: title }), titleBadge] })
+        : mark ? _jsx("div", { role: "heading", "aria-level": 1, "aria-label": title, style: { display: "flex", justifyContent: justify === "center" ? "center" : "flex-start" }, children: mark }) : null;
+    return _jsx(Element, { "aria-labelledby": header || titleVisibility === "hidden" ? undefined : id, "aria-label": header || titleVisibility === "hidden" ? title : undefined, "data-content-inset": contentInset, "data-presentation": presentation, className: classNames("hjm-screen", className), style: { backgroundColor: surface === "transparent" || designProfile?.material.canvas ? "transparent" : undefined, "--hjm-screen-width": `${profileLayout?.maxWidth ?? recipe.maxWidth}px`, "--hjm-screen-padding": `${contentInset === "none" ? 0 : recipe.padding}px`, "--hjm-screen-gap": `${profileLayout?.gap ?? recipe.sectionGap}px`, "--hjm-screen-item-gap": `${recipe.itemGap}px`, "--hjm-screen-state-gap": `${recipe.stateGap}px`, "--hjm-screen-header-min": `${recipe.headerMinWidth}px`, ...layoutStyle }, children: _jsxs(InitialFocusScope, { mode: initialFocus, children: [header ?? (showHeader ? headerAlignment === "center" ? _jsxs("header", { className: "hjm-screen__header", style: { display: "grid", gridTemplateColumns: "1fr minmax(0, auto) 1fr", alignItems: "center", boxSizing: "border-box", minBlockSize: compactHeader ? screenHeaderRecipe.compactMinHeight : screenHeaderRecipe.minHeight, paddingBlock: compactHeader ? screenHeaderRecipe.compactPaddingVertical : screenHeaderRecipe.paddingVertical }, children: [_jsx("div", { children: leading }), _jsxs("div", { className: "hjm-screen__heading", style: { textAlign: "center", minWidth: 0 }, children: [titleRow(screenHeaderRecipe.centeredTitleLevel, "center"), description ? _jsx(Text, { as: "p", tone: "muted", children: description }) : null] }), _jsx("div", { style: { justifySelf: "end" }, children: actions })] }) : _jsxs("header", { className: "hjm-screen__header", style: profileLayout ? { flexDirection: profileLayout.headerAxis, alignItems: profileLayout.centered ? "center" : undefined, textAlign: profileLayout.centered ? "center" : undefined } : undefined, children: [leading, _jsxs("div", { className: "hjm-screen__heading", children: [titleRow(screenHeaderRecipe.titleLevel, profileLayout?.centered ? "center" : "start"), description ? _jsx(Text, { as: "p", tone: "muted", children: description }) : null] }), actions] }) : null), notice ? _jsx("div", { className: "hjm-screen__notice", children: notice }) : null, _jsx("div", { ref: bodyRef, role: "region", "aria-label": title, tabIndex: bodyScroll === "content" ? -1 : 0, onFocusCapture: event => { lastBodyFocus.current = event.target; }, onBlurCapture: event => {
                         // A connected input blurred to the document intentionally relinquishes
                         // focus too; only removal of the currently focused node needs recovery.
                         if (event.relatedTarget ? !event.currentTarget.contains(event.relatedTarget) : event.target.isConnected) {
                             lastBodyFocus.current = null;
                         }
-                    }, className: "hjm-screen__body", "data-content-alignment": contentAlignment, "data-scroll": bodyScroll, "data-replacement": resolved.replacesContent || undefined, "aria-busy": resolved.busy || undefined, children: state.kind === "ready" ? (contentAlignment === "center" ? _jsx("div", { className: "hjm-screen__centered-content", children: children }) : children) : _jsxs("div", { className: "hjm-screen__state", children: [resolved.busy ? _jsx(Spinner, { label: [state.title, state.description].filter(Boolean).join(". ") }) : _jsx("div", { role: state.kind === "error" ? "alert" : "status", children: _jsxs(Stack, { gap: "sm", align: "center", children: [_jsx(Text, { variant: "title", children: state.title }), state.description ? _jsx(Text, { tone: "muted", children: state.description }) : null] }) }), stateAction] }) }), footer ? _jsx("footer", { className: "hjm-screen__footer", children: _jsx(ScreenFooterContext.Provider, { value: contentInset !== "none", children: footer }) }) : null] }) });
+                    }, className: "hjm-screen__body", "data-content-alignment": contentAlignment, "data-scroll": bodyScroll, "data-replacement": resolved.replacesContent || undefined, "aria-busy": resolved.busy || undefined, children: state.kind === "ready" ? (contentAlignment === "center" ? _jsx("div", { className: "hjm-screen__centered-content", children: children }) : children) : _jsxs("div", { className: "hjm-screen__state", children: [resolved.busy ? (loadingIndicator ? _jsx("div", { role: "status", "aria-busy": "true", "aria-label": [state.title, state.description].filter(Boolean).join(". "), children: _jsx("div", { "aria-hidden": "true", children: loadingIndicator }) }) : _jsx(Spinner, { label: [state.title, state.description].filter(Boolean).join(". ") })) : _jsx("div", { role: state.kind === "error" ? "alert" : "status", children: _jsxs(Stack, { gap: "sm", align: "center", children: [_jsx(Text, { variant: "title", children: state.title }), state.description ? _jsx(Text, { tone: "muted", children: state.description }) : null] }) }), stateAction] }) }), footer ? _jsx("footer", { className: "hjm-screen__footer", children: _jsx(ScreenFooterContext.Provider, { value: contentInset !== "none", children: footer }) }) : null] }) });
 }
 /**
  * Style for a product scroller that owns the body with `scroll="content"`: it reaches across the body gutter
@@ -83,7 +93,7 @@ export function ChatScreen({ composer, jumpToLatest, avatar, scroll = "content",
     const showComposer = !props.state || props.state.kind === "ready" || props.state.kind === "empty";
     // Anchor the jump control to the composer edge so it floats over the timeline without measuring the footer.
     // Conversations center the peer between back and tools and use the measured 10px timeline gutter (2026-10-16).
-    return _jsx(ScreenLayout, { ...props, className: classNames("hjm-chat-screen", props.className) ?? "hjm-chat-screen", hjmTitleLeading: avatar, scroll: scroll, footer: showComposer ? _jsxs("div", { className: "hjm-chat-screen__footer", children: [jumpToLatest ? _jsx("div", { className: "hjm-chat-screen__jump", children: _jsx(IconButton, { label: jumpToLatest.label, size: "small", shape: "circle", tone: "secondary", onClick: jumpToLatest.onPress, children: jumpToLatest.icon }) }) : null, composer] }) : null });
+    return _jsx(ScreenLayout, { ...props, className: classNames("hjm-chat-screen", props.className) ?? "hjm-chat-screen", titleLeading: avatar, scroll: scroll, footer: showComposer ? _jsxs("div", { className: "hjm-chat-screen__footer", children: [jumpToLatest ? _jsx("div", { className: "hjm-chat-screen__jump", children: _jsx(IconButton, { label: jumpToLatest.label, size: "small", shape: "circle", tone: "secondary", onClick: jumpToLatest.onPress, children: jumpToLatest.icon }) }) : null, composer] }) : null });
 }
 export function MessageComposer({ leading, quickInserts, value, label, sendLabel, placeholder = label, description, error, invalid = false, submitMode = "newline", onBlur, disabled = false, pending = false, onValueChange, onSend, maxLength, lengthFeedback, sendDisabled = false, additionalContent = false, leadingAction, inputRef, context, replyTo, sendIcon, sendPresentation = "inline", attachmentAction, attachments = [], onRemoveAttachment, layoutStyle }) {
     validateMessageAttachments(attachments);
@@ -111,24 +121,33 @@ export function MessageComposer({ leading, quickInserts, value, label, sendLabel
                         } }, onChange: event => { if (!locked)
                             onValueChange(event.currentTarget.value); }, minVisibleLines: screenPatternRecipe.composerMinLines, maxVisibleLines: screenPatternRecipe.composerMaxLines, ...(sendIcon ? { trailing: _jsx("span", { className: "hjm-message-composer__trailing", style: { minInlineSize: sendDiameter, minBlockSize: sendDiameter }, children: _jsx("span", { className: "hjm-message-composer__visible", children: hasContent || pending ? send : attach }) }) } : {}) }), sendIcon ? null : send] })] });
     const quickRow = quickInserts?.items.length ? _jsx("div", { className: "hjm-message-composer__quick", role: "group", "aria-label": quickInserts.label, style: { "--hjm-quick-size": `${composerQuickInsertRecipe.itemSize}px`, "--hjm-quick-emoji": `${composerQuickInsertRecipe.emojiSize}px` }, children: quickInserts.items.map(item => _jsx("button", { type: "button", className: "hjm-message-composer__quick-item", "aria-label": item.label, disabled: locked, onClick: () => onValueChange(value + item.emoji), children: item.emoji }, item.id)) }) : null;
+    // The error is announced by TextArea's shared Field error region (internal/field-error.tsx); no composer-only copy.
     return _jsxs("div", { className: "hjm-message-composer", "data-send-presentation": sendPresentation, style: { "--hjm-message-composer-gap": `${screenPatternRecipe.itemGap}px`, "--hjm-attachment-size": `${screenPatternRecipe.attachmentSize}px`, "--hjm-attachment-remove-size": `${screenPatternRecipe.attachmentRemoveSize}px`, ...layoutStyle }, children: [context, quickRow, _jsxs("div", { className: "hjm-message-composer__reply-card", "data-replying": replyTo ? true : undefined, children: [replyTo ? _jsxs("div", { className: "hjm-message-composer__reply", children: [_jsxs("div", { className: "hjm-message-composer__reply-text", children: [_jsx(Text, { emphasis: "strong", children: replyTo.author }), _jsx(Text, { variant: "caption", tone: "muted", className: "hjm-message-composer__reply-excerpt", children: replyTo.excerpt })] }), _jsx(IconButton, { label: replyTo.cancelLabel, tone: "secondary", size: "small", shape: "circle", disabled: locked, onClick: replyTo.onCancel, children: _jsx(Text, { children: "\u00D7" }) })] }) : null, composerBody] }), lengthFeedback && limit?.near ? _jsx(Progress, { shape: "circular", label: lengthFeedback.label, value: Math.min(limit.used, limit.max), max: limit.max, valueText: lengthFeedback.formatCount(limit.used, limit.max), children: _jsx(Text, { variant: "caption", children: lengthFeedback.formatCount(limit.used, limit.max) }) }) : null] });
 }
-export function ChatMessage({ direction, author, timestamp, timestampPresentation = "always", bubbleTail = true, groupPosition = "single", deliveryLabel, avatar, reply, replyQuote, media = [], actions, replyAction, replyLink, reactions, children, interactiveContent = false, layoutStyle }) {
+export function ChatMessage({ direction, author, timestamp, timestampPresentation = "always", bubbleTail = true, groupPosition = "single", deliveryLabel, avatar, reply, replyQuote, media = [], mediaAlbum, actions, replyAction, replyLink, reactions, children, interactiveContent = false, layoutStyle }) {
     const theme = useOptionalHjmTheme();
     const display = resolveChatMessageGroupDisplay(groupPosition);
     // A run shows its time once, beside its last bubble; delivery state stays on every bubble.
     const visibleTime = display.showTimestamp ? timestamp : "";
     const quote = replyQuote ? _jsxs(_Fragment, { children: [_jsx(Text, { emphasis: "strong", children: replyQuote.title }), _jsx(Text, { tone: "muted", className: "hjm-chat-message__quote-excerpt", children: replyQuote.excerpt })] }) : reply;
     // The quote stays inside the bubble; with replyLink a click on it jumps to the original (2026-10-16 reference).
-    const mediaBlock = media.length ? _jsx("div", { className: "hjm-chat-message__media", style: { inlineSize: chatMessageRecipe.mediaWidth, gap: chatMessageRecipe.mediaGap, gridTemplateColumns: `repeat(${resolveChatMediaColumns(media.length)}, minmax(0, 1fr))` }, children: media.map(item => { const style = { aspectRatio: media.length > 1 ? 1 : item.aspectRatio ?? 1 }; return item.onPress ? _jsx("button", { type: "button", className: "hjm-chat-message__media-item", "aria-label": item.label, style: style, onClick: item.onPress, children: item.preview }, item.id) : _jsx("div", { role: "img", "aria-label": item.label, className: "hjm-chat-message__media-item", style: style, children: item.preview }, item.id); }) }) : null;
+    validateMediaSetChoice(media.length > 0, mediaAlbum !== undefined);
+    const [albumIndex, setAlbumIndex] = useMediaAlbumIndex(mediaAlbum);
+    const mediaBlock = mediaAlbum ? _jsx(MediaAlbumView, { album: mediaAlbum, index: albumIndex, onIndexChange: setAlbumIndex, width: chatMessageRecipe.mediaWidth, radius: chatMessageRecipe.bubbleRadius })
+        : media.length ? _jsx("div", { className: "hjm-chat-message__media", style: { inlineSize: chatMessageRecipe.mediaWidth, gap: chatMessageRecipe.mediaGap, gridTemplateColumns: `repeat(${resolveChatMediaColumns(media.length)}, minmax(0, 1fr))` }, children: media.map(item => { const style = { aspectRatio: media.length > 1 ? 1 : item.aspectRatio ?? 1 }; return item.onPress ? _jsx("button", { type: "button", className: "hjm-chat-message__media-item", "aria-label": item.label, style: style, onClick: item.onPress, children: item.preview }, item.id) : _jsx("div", { role: "img", "aria-label": item.label, className: "hjm-chat-message__media-item", style: style, children: item.preview }, item.id); }) }) : null;
     // A photo-only message drops the bubble surface so the photo itself is the message.
-    const photoOnly = media.length > 0 && !reply && !replyQuote && (children === null || children === undefined || children === false || children === "");
+    const photoOnly = (media.length > 0 || mediaAlbum !== undefined) && !reply && !replyQuote && (children === null || children === undefined || children === false || children === "");
     const quoteBlock = quote ? (replyLink ? _jsx("button", { type: "button", className: "hjm-chat-message__reply hjm-chat-message__quote", "aria-label": replyLink.label, onClick: replyLink.onPress, children: quote }) : _jsx("div", { className: "hjm-chat-message__reply", children: quote })) : null;
     const revealTime = timestampPresentation === "swipe" && !!timestamp;
     // Only the pointer that began a drag can finish it; another touch must not reply or cancel it.
     const start = useRef(null);
     const [offset, setOffset] = useState(0);
     const finish = () => { start.current = null; setOffset(0); };
+    const menu = useRef(null);
+    const summary = reactions?.summary;
+    const reactionMenu = reactions ? omitReactionSummary(reactions) : undefined;
+    const summaryItems = summary ? resolveChatReactionSummary(summary) : [];
+    const summaryButton = reactions && summary && summaryItems.length ? (summary.readOnly ? _jsx(ReactionSummaryText, { label: summary.label, items: summaryItems }) : _jsx(ReactionSummaryButton, { label: summary.label, items: summaryItems, selected: reactions.value, disabled: reactions.disabled ?? false, onPress: () => menu.current?.open() })) : null;
     return _jsxs("article", { tabIndex: replyAction && !replyAction.disabled ? 0 : undefined, "aria-keyshortcuts": replyAction ? "Alt+ArrowLeft Alt+ArrowRight" : undefined, "aria-description": replyAction?.label, onKeyDown: event => { if (event.target === event.currentTarget && event.altKey && (event.key === "ArrowLeft" || event.key === "ArrowRight") && replyAction && !replyAction.disabled) {
             event.preventDefault();
             replyAction.onPress();
@@ -146,7 +165,7 @@ export function ChatMessage({ direction, author, timestamp, timestampPresentatio
             finish(); }, onPointerLeave: event => { if (start.current?.pointerId === event.pointerId)
             finish(); }, style: { ...layoutStyle, position: "relative", overflow: "hidden", marginBlockStart: display.spacingBefore,
             // Reserve tip room only where it protrudes (own trailing edge, or leading edge without an avatar column).
-            ...(bubbleTail ? (direction === "outgoing" ? { paddingInlineEnd: chatMessageRecipe.tailWidth } : avatar ? {} : { paddingInlineStart: chatMessageRecipe.tailWidth }) : {}), touchAction: revealTime || replyAction ? "pan-y" : undefined }, "aria-label": author, children: [revealTime ? _jsx("time", { style: { position: "absolute", ...(direction === "outgoing" ? { right: 0, justifyContent: "flex-end" } : { left: 0 }), top: 0, bottom: 0, width: 80, display: "flex", alignItems: "center", opacity: offset !== 0 ? 1 : 0, pointerEvents: "none" }, children: _jsx(Text, { variant: "caption", tone: "muted", children: timestamp }) }) : null, _jsxs("div", { className: "hjm-chat-message", style: { transform: `translateX(${offset}px)`, transition: start.current || theme?.environment.reducedMotion ? "none" : "transform var(--hjm-motion-normal, 200ms) ease-out", "--hjm-message-max-width": screenPatternRecipe.messageMaxWidth, "--hjm-chat-avatar-size": `${chatMessageRecipe.avatarSize}px` }, "data-direction": direction, "data-tail": (bubbleTail && display.showTail) || undefined, children: [avatar ? _jsx("div", { className: "hjm-chat-message__avatar", "aria-hidden": display.showAvatar ? undefined : true, children: display.showAvatar ? avatar : null }) : null, _jsxs("div", { className: "hjm-chat-message__content", children: [author && display.showAuthor && direction !== "outgoing" ? _jsx(Text, { variant: "caption", tone: "muted", children: author }) : null, _jsxs("div", { className: "hjm-chat-message__body", children: [reactions ? _jsxs(MessageReactions, { ...reactions, interactiveContent: interactiveContent, ...(timestamp ? { menuTitle: timestamp } : {}), ...(replyAction && !replyAction.disabled ? { replyAction } : {}), children: [quoteBlock, mediaBlock, photoOnly ? null : children] }) : _jsxs("div", { className: "hjm-chat-message__bubble", "data-photo-only": photoOnly || undefined, children: [quoteBlock, mediaBlock, photoOnly ? null : children] }), (!revealTime && visibleTime) || deliveryLabel || actions ? _jsxs("div", { className: "hjm-chat-message__meta", children: [(!revealTime && visibleTime) || deliveryLabel ? _jsx(Text, { variant: "caption", tone: "muted", children: [revealTime ? "" : visibleTime, deliveryLabel].filter(Boolean).join(" · ") }) : null, actions] }) : null] })] })] })] });
+            ...(bubbleTail ? (direction === "outgoing" ? { paddingInlineEnd: chatMessageRecipe.tailWidth } : avatar ? {} : { paddingInlineStart: chatMessageRecipe.tailWidth }) : {}), touchAction: revealTime || replyAction ? "pan-y" : undefined }, "aria-label": author, children: [revealTime ? _jsx("time", { style: { position: "absolute", ...(direction === "outgoing" ? { right: 0, justifyContent: "flex-end" } : { left: 0 }), top: 0, bottom: 0, width: 80, display: "flex", alignItems: "center", opacity: offset !== 0 ? 1 : 0, pointerEvents: "none" }, children: _jsx(Text, { variant: "caption", tone: "muted", children: timestamp }) }) : null, _jsxs("div", { className: "hjm-chat-message", style: { transform: `translateX(${offset}px)`, transition: start.current || theme?.environment.reducedMotion ? "none" : "transform var(--hjm-motion-normal, 200ms) ease-out", "--hjm-message-max-width": screenPatternRecipe.messageMaxWidth, "--hjm-chat-avatar-size": `${chatMessageRecipe.avatarSize}px` }, "data-direction": direction, "data-tail": (bubbleTail && display.showTail) || undefined, children: [avatar ? _jsx("div", { className: "hjm-chat-message__avatar", "aria-hidden": display.showAvatar ? undefined : true, children: display.showAvatar ? avatar : null }) : null, _jsxs("div", { className: "hjm-chat-message__content", children: [author && display.showAuthor && direction !== "outgoing" ? _jsx(Text, { variant: "caption", tone: "muted", children: author }) : null, _jsxs("div", { className: "hjm-chat-message__body", children: [reactionMenu ? _jsxs(MessageReactions, { ...reactionMenu, menuRef: menu, interactiveContent: interactiveContent || mediaAlbum !== undefined, ...(timestamp ? { menuTitle: timestamp } : {}), ...(replyAction && !replyAction.disabled ? { replyAction } : {}), children: [quoteBlock, mediaBlock, photoOnly ? null : children] }) : _jsxs("div", { className: "hjm-chat-message__bubble", "data-photo-only": photoOnly || undefined, children: [quoteBlock, mediaBlock, photoOnly ? null : children] }), (!revealTime && visibleTime) || deliveryLabel || actions || summaryButton ? _jsxs("div", { className: "hjm-chat-message__meta", children: [summaryButton, (!revealTime && visibleTime) || deliveryLabel ? _jsx(Text, { variant: "caption", tone: "muted", children: [revealTime ? "" : visibleTime, deliveryLabel].filter(Boolean).join(" · ") }) : null, actions] }) : null] })] })] })] });
 }
 export function CompositionLayout({ title, headingLevel = 3, description, badge, leading, actions, notice, children, footer, state = { kind: "ready" }, stateAction, loadingIndicator, layoutStyle }) {
     const resolved = resolveScreenContentState(state);
@@ -158,8 +177,51 @@ export function NotificationRow({ preview, metadata, avatar, avatarBadge, thumbn
     return _jsxs("span", { "aria-hidden": "true", "data-hjm-notification-row": "true", style: { display: "flex", alignItems: "center", gap: r.gap, padding: `${r.paddingBlock}px ${r.paddingInline}px`, width: "100%", minWidth: 0, boxSizing: "border-box" }, children: [_jsxs("span", { style: { position: "relative", width: r.avatarSize, height: r.avatarSize, flexShrink: 0 }, children: [_jsx("span", { style: { display: "flex", width: "100%", height: "100%", overflow: "hidden", borderRadius: "50%" }, children: avatar }), avatarBadge ? _jsx("span", { style: { position: "absolute", bottom: 0, right: 0, display: "flex", alignItems: "center", justifyContent: "center", width: r.avatarBadgeSize, height: r.avatarBadgeSize, borderRadius: "50%", background: "var(--hjm-color-surface)", border: "2px solid var(--hjm-color-surface)", boxSizing: "border-box" }, children: avatarBadge }) : null] }), _jsxs("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: r.contentGap }, children: [_jsx(Text, { style: { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: r.previewLines, overflow: "hidden" }, children: preview }), _jsxs("span", { style: { display: "flex", alignItems: "center", gap: r.contentGap }, children: [_jsx(Text, { variant: "caption", tone: "muted", children: metadata }), unread ? _jsx("span", { "data-hjm-unread-dot": "true", style: { width: r.unreadSize, height: r.unreadSize, borderRadius: "50%", flexShrink: 0, background: "var(--hjm-color-content-brand)" } }) : null] })] }), thumbnail ? _jsx("span", { style: { width: r.thumbnailSize, height: r.thumbnailSize, flexShrink: 0, overflow: "hidden", borderRadius: "var(--hjm-radius-sm)" }, children: thumbnail }) : null] });
 }
 /** Presentation shared by launcher and profile grids; the host owns navigation or drag behavior. */
-export function IconTile({ icon, label, overlay, labelLines = 1, ghost = false }) {
+export function IconTile({ icon, label, overlay, labelLines = 1, ghost = false, frame = iconTileRecipe.defaults.frame, shape = iconTileRecipe.defaults.shape, size = iconTileRecipe.defaults.size }) {
     const r = iconTileRecipe;
-    return _jsxs("span", { "data-hjm-icon-tile": "true", style: { display: "flex", flexDirection: "column", alignItems: "center", gap: r.gap, minWidth: 0, width: "100%", overflow: "visible" }, children: [_jsxs("span", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: r.iconSize, height: r.iconSize, flexShrink: 0, borderRadius: r.iconRadius, background: "var(--hjm-color-surface-alt)", color: "var(--hjm-color-text)", boxShadow: ghost ? undefined : "0 0 0 1px var(--hjm-color-border)", outline: ghost ? "1px dashed var(--hjm-color-text-muted)" : undefined, opacity: ghost ? r.ghostOpacity : 1, fontSize: 32 }, children: [icon, overlay] }), _jsx(Text, { variant: "caption", style: { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: labelLines, width: "100%", maxWidth: labelLines === 2 ? r.multilineLabelMaxWidth : r.labelMaxWidth, minHeight: labelLines === 2 ? r.multilineLabelMinHeight : undefined, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal", overflowWrap: "anywhere", textAlign: "center", fontWeight: 500 }, children: label })] });
+    const framed = frame === "surface";
+    // Percent radius follows the rendered size, so a filling icon keeps its shape at every cell width.
+    const dimensions = size === "fill" ? { width: "100%", minWidth: r.fillMinSize, maxWidth: r.fillMaxSize, aspectRatio: "1" } : { width: r.iconSize, height: r.iconSize };
+    // A render-function icon needs the filling edge as a number. It is read before paint and on every resize; the
+    // computed width ignores transforms (a host's press scale) and keeps fractional cell widths.
+    const frameRef = useRef(null);
+    const measureEdge = size === "fill" && typeof icon === "function";
+    const [fillEdge, setFillEdge] = useState(r.fillMinSize);
+    useLayoutEffect(() => {
+        const element = frameRef.current;
+        if (!measureEdge || !element)
+            return;
+        setFillEdge(Number.parseFloat(getComputedStyle(element).width) || r.fillMinSize);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => { const width = entry?.borderBoxSize?.[0]?.inlineSize; if (width)
+            setFillEdge(width); });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [measureEdge, r.fillMinSize]);
+    const edge = size === "fill" ? fillEdge : r.iconSize;
+    return _jsxs("span", { "data-hjm-icon-tile": "true", "data-frame": frame, "data-shape": shape, "data-size": size, style: { display: "flex", flexDirection: "column", alignItems: "center", gap: r.gap, minWidth: 0, width: "100%", overflow: "visible" }, children: [_jsxs("span", { ref: frameRef, style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", ...dimensions, boxSizing: "border-box", flexShrink: 0, borderRadius: `${Math.round(r.shapes[shape] * 100)}%`, background: framed ? "var(--hjm-color-surface-alt)" : undefined, color: "var(--hjm-color-text)", boxShadow: ghost || !framed ? undefined : "0 0 0 1px var(--hjm-color-border)", outline: ghost ? "1px dashed var(--hjm-color-text-muted)" : undefined, opacity: ghost ? r.ghostOpacity : 1, fontSize: 32 }, children: [typeof icon === "function" ? icon({ edge }) : icon, overlay] }), _jsx(Text, { variant: "caption", style: { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: labelLines, width: "100%", maxWidth: labelLines === 2 ? r.multilineLabelMaxWidth : r.labelMaxWidth, minHeight: labelLines === 2 ? r.multilineLabelMinHeight : undefined, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal", overflowWrap: "anywhere", textAlign: "center", fontWeight: 500 }, children: label })] });
+}
+/**
+ * Incoming "is typing" row for a ChatScreen timeline (2026-10-18 BurnTok DM drew its own). The host shows it only while
+ * presence says someone is typing and places it after the last message; HJM owns the bubble, dots and announcement.
+ */
+export function TypingIndicator({ label, avatar, layoutStyle }) {
+    if (!label.trim())
+        throw new TypeError("TypingIndicator requires a localized label");
+    const theme = useOptionalHjmTheme();
+    const r = typingIndicatorRecipe, m = chatMessageRecipe;
+    // A polite status: appearing is announced once without interrupting, and the dots stay hidden from assistive tech.
+    return _jsxs("div", { role: "status", className: "hjm-typing-indicator", "data-reduced-motion": theme?.environment.reducedMotion || undefined, style: { display: "flex", alignItems: "flex-start", gap: m.avatarGap, marginBlockStart: m.groupGap, paddingInlineStart: avatar ? 0 : m.tailWidth, ...layoutStyle, "--hjm-typing-dot": `${r.dotSize}px`, "--hjm-typing-cycle": `${r.cycleMs}ms`, "--hjm-typing-rest": r.restOpacity }, children: [avatar ? _jsx("span", { "aria-hidden": "true", style: { display: "flex", justifyContent: "center", flex: `0 0 ${m.avatarSize}px`, inlineSize: m.avatarSize }, children: avatar }) : null, _jsx("span", { "aria-hidden": "true", className: "hjm-typing-indicator__bubble", style: { display: "inline-flex", alignItems: "center", gap: r.dotGap, boxSizing: "border-box", minBlockSize: `calc(var(--hjm-type-body-line-height) + ${m.bubblePaddingBlock * 2}px)`, paddingBlock: m.bubblePaddingBlock, paddingInline: m.bubblePaddingInline, borderRadius: m.bubbleRadius, background: "var(--hjm-color-surface)" }, children: [0, 1, 2].map(index => _jsx("span", { className: "hjm-typing-indicator__dot", style: { animationDelay: `${index * r.staggerMs}ms` } }, index)) }), _jsx(VisuallyHidden, { children: label })] });
+}
+/**
+ * Centered date (or time) row between ChatScreen timeline groups (2026-10-18 Utilverse chat drew a caption). Grouping
+ * rules stay with the product; the next message keeps its own group gap, so this row adds only the space before it.
+ */
+export function ChatDateSeparator({ label, dateTime, layoutStyle }) {
+    if (!label.trim())
+        throw new TypeError("ChatDateSeparator requires a localized label");
+    const r = chatDateSeparatorRecipe;
+    return _jsx("div", { className: "hjm-chat-date-separator", style: { display: "flex", justifyContent: "center", textAlign: "center", paddingBlockStart: r.paddingTop, paddingBlockEnd: r.paddingBottom, ...layoutStyle }, children: _jsx(Text, { variant: r.textVariant, tone: r.tone, children: dateTime ? _jsx("time", { dateTime: dateTime, children: label }) : label }) });
 }
 //# sourceMappingURL=screens.js.map