@hjmds/react 1.30.0 → 1.31.0

package/dist/internal/initial-focus.js

@@ -10,6 +10,20 @@ import { getTopModal, subscribeModalClose } from "../modal.js";
 const InitialFocusContext = createContext(null);
 /** Layer of the enclosing HJM overlay; null on the page itself. A ScreenLayout inside a sheet uses the sheet's. */
 const ModalLayerContext = createContext(null);
+/**
+ * Screen scopes rendered inside an HJM overlay, keyed by that overlay's layer. Their fields register with the screen,
+ * not the overlay, so the overlay's activation asks them for the entry field instead of focusing its first control
+ * over them (BurnTok search: a ScreenLayout in a Sheet left focus on the close button, 2026-10-18).
+ */
+const nestedScopes = new WeakMap();
+/**
+ * Product modals (not on the HJM stack) layered above the scope. A product modal that contains the scope's own fields
+ * wraps the screen rather than covering it, so it does not block (BurnTok search overlay, 2026-10-18).
+ */
+function productModalAbove(fields) {
+    return [...document.querySelectorAll('[aria-modal="true"], dialog[open]')]
+        .some(modal => !fields.some(field => modal.contains(field)));
+}
 function isEditable(element) {
     return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement
         || (element instanceof HTMLElement && element.isContentEditable);
@@ -28,11 +42,18 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
     const scope = useMemo(() => {
         const s = state.current;
         const blocked = () => {
+            const own = layer?.current ?? null;
+            // Inside an HJM overlay that is not on the stack yet: its activation runs this scope's entry (`nestedScopes`).
+            if (layer !== null && own === null)
+                return true;
             const top = getTopModal();
             if (top)
-                return top !== (layer?.current ?? null);
-            // A product's own modal (not on the HJM stack) still covers the page.
-            return layer === null && document.querySelector('[aria-modal="true"], dialog[open]') !== null;
+                return top !== own;
+            // A product's own modal above the page still covers it; overlay content is portaled outside product markup.
+            if (layer !== null)
+                return false;
+            const fields = [...s.entries].map(entry => entry.element()).filter((element) => element !== null);
+            return productModalAbove(fields);
         };
         const dispatch = (event) => {
             const candidates = [...s.entries].map(entry => ({ entry, order: entry.order, preference: entry.preference, focusable: entry.focusable() }));
@@ -67,17 +88,29 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
                 return () => { s.entries.delete(entry); s.fresh.delete(entry); };
             },
         };
+        const settle = () => { s.phase = "settled"; };
         const enter = (explicit) => {
             s.fresh.clear();
             dispatch({ kind: "activate" });
+            const nested = overlay && layer ? [...(nestedScopes.get(layer) ?? [])] : [];
             if (explicit) {
-                s.phase = "settled";
+                settle();
+                for (const scope of nested)
+                    scope.settle();
                 return null;
             }
-            return dispatch({ kind: "enter" });
+            const own = dispatch({ kind: "enter" });
+            if (own)
+                return own;
+            for (const scope of nested) {
+                const target = scope.enter();
+                if (target)
+                    return target;
+            }
+            return null;
         };
-        return { registry, layer, dispatch, focus, enter };
-    }, [layer]);
+        return { registry, layer, dispatch, focus, enter, settle };
+    }, [layer, overlay]);
     useEffect(() => {
         if (!active) {
             scope.dispatch({ kind: "deactivate" });
@@ -89,6 +122,14 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
         if (!overlay)
             queueMicrotask(() => { if (!cancelled)
                 scope.focus(scope.enter(false)); });
+        // A screen inside an overlay that activates later enters when the overlay does (see `enter`).
+        let nested;
+        const nestedEntry = { enter: () => scope.enter(false), settle: scope.settle };
+        if (!overlay && scope.layer) {
+            nested = nestedScopes.get(scope.layer) ?? new Set();
+            nestedScopes.set(scope.layer, nested);
+            nested.add(nestedEntry);
+        }
         const interact = () => { scope.dispatch({ kind: "interact" }); };
         const events = ["pointerdown", "keydown", "wheel", "touchstart"];
         for (const type of events)
@@ -97,6 +138,7 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
         const unsubscribe = subscribeModalClose(() => scope.focus(scope.dispatch({ kind: "unblock" })));
         return () => {
             cancelled = true;
+            nested?.delete(nestedEntry);
             for (const type of events)
                 document.removeEventListener(type, interact, true);
             unsubscribe();

package/dist/internal/initial-focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"initial-focus.js","sourceRoot":"","sources":["../../src/internal/initial-focus.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAiG,MAAM,yCAAyC,CAAC;AAC3K,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAkC,MAAM,OAAO,CAAC;AAC/H,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAoB,MAAM,aAAa,CAAC;AAOjF;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,aAAa,CAAkB,IAAI,CAAC,CAAC;AACjE,mHAAmH;AACnH,MAAM,iBAAiB,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAEpE,SAAS,UAAU,CAAC,OAAuB;IACzC,OAAO,OAAO,YAAY,gBAAgB,IAAI,OAAO,YAAY,mBAAmB,IAAI,OAAO,YAAY,iBAAiB;WACvH,CAAC,OAAO,YAAY,WAAW,IAAI,OAAO,CAAC,iBAAiB,CAAC,CAAC;AACrE,CAAC;AAaD;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAuE;IAChJ,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAChD,MAAM,KAAK,GAAG,QAAQ,IAAI,SAAS,CAAC;IACpC,MAAM,OAAO,GAAG,QAAQ,KAAK,SAAS,CAAC;IACvC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,UAA6B,EAAE,OAAO,EAAE,IAAI,GAAG,EAAS,EAAE,KAAK,EAAE,IAAI,GAAG,EAAS,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;IAEnJ,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;QACxB,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,GAAG,GAAG,WAAW,EAAE,CAAC;YAC1B,IAAI,GAAG;gBAAE,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC;YACjD,sEAAsE;YACtE,OAAO,KAAK,KAAK,IAAI,IAAI,QAAQ,CAAC,aAAa,CAAC,mCAAmC,CAAC,KAAK,IAAI,CAAC;QAChG,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,CAAC,KAAsE,EAAsB,EAAE;YAC9G,MAAM,UAAU,GAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;YACzJ,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,IAAI,KAAK;gBAC5D,CAAC,CAAC,EAAE,IAAI,EAAE,UAAmB,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAE,EAAE;gBACtG,CAAC,CAAC,KAAmC,CAAC;YACxC,MAAM,MAAM,GAAG,iBAAiB,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,gBAAgB,EAAE,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;YACrK,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YACvB,OAAO,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC;QAChD,CAAC,CAAC;QACF,MAAM,KAAK,GAAG,CAAC,MAA0B,EAAE,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QACrF,qDAAqD;QACrD,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,CAAC,CAAC,WAAW,GAAG,KAAK,CAAC;YACtB,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;YACnG,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAChB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;YACzE,IAAI,KAAK;gBAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC;QACF,MAAM,QAAQ,GAAa;YACzB,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE;YAC5B,QAAQ,CAAC,KAAK,EAAE,OAAO;gBACrB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACrB,IAAI,OAAO,EAAE,CAAC;oBAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBAAC,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;wBAAC,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC;wBAAC,cAAc,CAAC,KAAK,CAAC,CAAC;oBAAC,CAAC;gBAAC,CAAC;gBACzG,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACnE,CAAC;SACF,CAAC;QACF,MAAM,KAAK,GAAG,CAAC,QAAiB,EAAE,EAAE;YAClC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAChB,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YAC/B,IAAI,QAAQ,EAAE,CAAC;gBAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC;gBAAC,OAAO,IAAI,CAAC;YAAC,CAAC;YACnD,OAAO,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QACrC,CAAC,CAAC;QACF,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;YAAC,OAAO,SAAS,CAAC;QAAC,CAAC;QAC1E,2GAA2G;QAC3G,gGAAgG;QAChG,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO;YAAE,cAAc,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS;gBAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzF,MAAM,QAAQ,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACjE,MAAM,MAAM,GAAG,CAAC,aAAa,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,CAAU,CAAC;QAC1E,KAAK,MAAM,IAAI,IAAI,MAAM;YAAE,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;QAC3E,4EAA4E;QAC5E,MAAM,WAAW,GAAG,mBAAmB,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QAChG,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;YACjB,KAAK,MAAM,IAAI,IAAI,MAAM;gBAAE,QAAQ,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;YAC9E,WAAW,EAAE,CAAC;YACd,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7B,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACxG,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA2D;IAC/G,OAAO,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAAE,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,YAAG,QAAQ,GAAgC,GAA6B,CAAC;AACrL,CAAC;AAED,iHAAiH;AACjH,MAAM,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAmD;IACnG,MAAM,KAAK,GAAG,oBAAoB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,OAAO,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAwB,CAAC;AAC/E,CAAC;AAED,8GAA8G;AAC9G,MAAM,UAAU,qBAAqB,CAAC,OAAsC,EAAE,UAA+B;IAC3G,MAAM,QAAQ,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACjD,gHAAgH;IAChH,MAAM,KAAK,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC1C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,QAAQ;YAAE,OAAO,SAAS,CAAC;QAChC,iHAAiH;QACjH,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC;QACvC,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,SAAS,EAAE,CAAC;QACvC,OAAO,QAAQ,CAAC,QAAQ,CAAC;YACvB,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO;YAChE,4DAA4D;YAC5D,SAAS,EAAE,GAAG,EAAE,GAAG,MAAM,IAAI,GAAG,OAAO,CAAC,OAA0D,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;SACzJ,EAAE,OAAO,CAAC,CAAC;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AACtC,CAAC","sourcesContent":["import { resolveEntryFocus, type EntryFocusEvent, type EntryFocusPhase, type InitialFocusCandidate, type InitialFocusMode } from \"@hjmds/design-contracts/screen-patterns\";\nimport { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, type ReactNode, type RefObject } from \"react\";\nimport { getTopModal, subscribeModalClose, type ActiveModal } from \"../modal.js\";\n\ntype Entry = { order: number; preference: boolean | undefined; element(): HTMLElement | null; focusable(): boolean };\ntype Registry = { nextOrder(): number; register(entry: Entry, mounted: boolean): () => void };\n/** The overlay's own entry on the shared modal stack while it is active (set by `useModalFocus`). */\nexport type ModalLayerRef = { current: ActiveModal | null };\n\n/**\n * Nearest screen/overlay scope that chooses the field focused on entry (rules: screen-patterns `resolveEntryFocus`,\n * shared with Native). Fields register by context, the same model as Native, instead of the scope querying the DOM; a\n * scope with mode \"none\" still owns its fields so they never reach an outer scope.\n */\nconst InitialFocusContext = createContext<Registry | null>(null);\n/** Layer of the enclosing HJM overlay; null on the page itself. A ScreenLayout inside a sheet uses the sheet's. */\nconst ModalLayerContext = createContext<ModalLayerRef | null>(null);\n\nfunction isEditable(element: Element | null): boolean {\n  return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement\n    || (element instanceof HTMLElement && element.isContentEditable);\n}\n\ntype Candidate = InitialFocusCandidate & { entry: Entry };\nexport type InitialFocusScopeHandle = Readonly<{\n  registry: Registry;\n  layer: ModalLayerRef | null;\n  /**\n   * Overlays only: runs entry when the modal activates and returns the field for `useModalFocus` to focus. `explicit`\n   * means the overlay already has an `initialFocusRef`, so entry settles without choosing a field.\n   */\n  enter(explicit: boolean): HTMLElement | null;\n}>;\n\n/**\n * Screen scopes enter on mount (Web has no enter transition to wait for); overlays pass `layer` and enter through\n * `useModalFocus`. User pointer, key, wheel or touch input while no modal is above the scope ends the entry window.\n */\nexport function useInitialFocusScope({ mode, active = true, layer: ownLayer }: { mode: InitialFocusMode; active?: boolean; layer?: ModalLayerRef }): InitialFocusScopeHandle {\n  const inherited = useContext(ModalLayerContext);\n  const layer = ownLayer ?? inherited;\n  const overlay = ownLayer !== undefined;\n  const modeRef = useRef(mode); modeRef.current = mode;\n  const state = useRef({ phase: \"inactive\" as EntryFocusPhase, entries: new Set<Entry>(), fresh: new Set<Entry>(), counter: 0, flushQueued: false });\n\n  const scope = useMemo(() => {\n    const s = state.current;\n    const blocked = () => {\n      const top = getTopModal();\n      if (top) return top !== (layer?.current ?? null);\n      // A product's own modal (not on the HJM stack) still covers the page.\n      return layer === null && document.querySelector('[aria-modal=\"true\"], dialog[open]') !== null;\n    };\n    const dispatch = (event: EntryFocusEvent<Candidate> | { kind: \"register\"; entry: Entry }): HTMLElement | null => {\n      const candidates: Candidate[] = [...s.entries].map(entry => ({ entry, order: entry.order, preference: entry.preference, focusable: entry.focusable() }));\n      const resolved = event.kind === \"register\" && \"entry\" in event\n        ? { kind: \"register\" as const, field: candidates.find(candidate => candidate.entry === event.entry)! }\n        : event as EntryFocusEvent<Candidate>;\n      const result = resolveEntryFocus(s.phase, resolved, { mode: modeRef.current, candidates, blocked: blocked(), textEntryFocused: isEditable(document.activeElement) });\n      s.phase = result.phase;\n      return result.target?.entry.element() ?? null;\n    };\n    const focus = (target: HTMLElement | null) => target?.focus({ preventScroll: true });\n    // Fields mounting in one commit are judged together.\n    const flush = () => {\n      s.flushQueued = false;\n      const fresh = [...s.fresh].filter(entry => s.entries.has(entry)).sort((a, b) => a.order - b.order);\n      s.fresh.clear();\n      const field = fresh.find(entry => entry.preference === true) ?? fresh[0];\n      if (field) focus(dispatch({ kind: \"register\", entry: field }));\n    };\n    const registry: Registry = {\n      nextOrder: () => s.counter++,\n      register(entry, mounted) {\n        s.entries.add(entry);\n        if (mounted) { s.fresh.add(entry); if (!s.flushQueued) { s.flushQueued = true; queueMicrotask(flush); } }\n        return () => { s.entries.delete(entry); s.fresh.delete(entry); };\n      },\n    };\n    const enter = (explicit: boolean) => {\n      s.fresh.clear();\n      dispatch({ kind: \"activate\" });\n      if (explicit) { s.phase = \"settled\"; return null; }\n      return dispatch({ kind: \"enter\" });\n    };\n    return { registry, layer, dispatch, focus, enter };\n  }, [layer]);\n\n  useEffect(() => {\n    if (!active) { scope.dispatch({ kind: \"deactivate\" }); return undefined; }\n    // After every effect of this commit, so a modal opening in the same commit (an app-root consent dialog) is\n    // already on the stack and blocks entry instead of taking focus away and handing it back later.\n    let cancelled = false;\n    if (!overlay) queueMicrotask(() => { if (!cancelled) scope.focus(scope.enter(false)); });\n    const interact = () => { scope.dispatch({ kind: \"interact\" }); };\n    const events = [\"pointerdown\", \"keydown\", \"wheel\", \"touchstart\"] as const;\n    for (const type of events) document.addEventListener(type, interact, true);\n    // A modal above closed (after its return focus ran): retry a pending entry.\n    const unsubscribe = subscribeModalClose(() => scope.focus(scope.dispatch({ kind: \"unblock\" })));\n    return () => {\n      cancelled = true;\n      for (const type of events) document.removeEventListener(type, interact, true);\n      unsubscribe();\n      scope.dispatch({ kind: \"deactivate\" });\n    };\n  }, [active, overlay, scope]);\n\n  return useMemo(() => ({ registry: scope.registry, layer: scope.layer, enter: scope.enter }), [scope]);\n}\n\nexport function InitialFocusProvider({ scope, children }: { scope: InitialFocusScopeHandle; children: ReactNode }) {\n  return <ModalLayerContext.Provider value={scope.layer}><InitialFocusContext.Provider value={scope.registry}>{children}</InitialFocusContext.Provider></ModalLayerContext.Provider>;\n}\n\n/** Screen scope: focuses the chosen field on mount, never over a field the user is in or under an open modal. */\nexport function InitialFocusScope({ mode, children }: { mode: InitialFocusMode; children: ReactNode }) {\n  const scope = useInitialFocusScope({ mode });\n  return <InitialFocusProvider scope={scope}>{children}</InitialFocusProvider>;\n}\n\n/** Registers a text field with the nearest scope. `preference` is the field's public `initialFocusTarget`. */\nexport function useInitialFocusTarget(element: RefObject<HTMLElement | null>, preference: boolean | undefined) {\n  const registry = useContext(InitialFocusContext);\n  // Tree order is fixed at first registration, so changing `preference` later does not move the field to the end.\n  const order = useRef<number | null>(null);\n  useLayoutEffect(() => {\n    if (!registry) return undefined;\n    // Only the first registration of this field instance counts as \"appeared\"; a later `preference` change does not.\n    const mounted = order.current === null;\n    order.current ??= registry.nextOrder();\n    return registry.register({\n      order: order.current, preference, element: () => element.current,\n      // Disabled and read-only fields are never focused on entry.\n      focusable: () => { const node = element.current as (HTMLInputElement | HTMLTextAreaElement | null); return !!node && !node.disabled && !node.readOnly; },\n    }, mounted);\n  }, [registry, preference, element]);\n}\n"]}
+{"version":3,"file":"initial-focus.js","sourceRoot":"","sources":["../../src/internal/initial-focus.tsx"],"names":[],"mappings":"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","sourcesContent":["import { resolveEntryFocus, type EntryFocusEvent, type EntryFocusPhase, type InitialFocusCandidate, type InitialFocusMode } from \"@hjmds/design-contracts/screen-patterns\";\nimport { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, type ReactNode, type RefObject } from \"react\";\nimport { getTopModal, subscribeModalClose, type ActiveModal } from \"../modal.js\";\n\ntype Entry = { order: number; preference: boolean | undefined; element(): HTMLElement | null; focusable(): boolean };\ntype Registry = { nextOrder(): number; register(entry: Entry, mounted: boolean): () => void };\n/** The overlay's own entry on the shared modal stack while it is active (set by `useModalFocus`). */\nexport type ModalLayerRef = { current: ActiveModal | null };\n\n/**\n * Nearest screen/overlay scope that chooses the field focused on entry (rules: screen-patterns `resolveEntryFocus`,\n * shared with Native). Fields register by context, the same model as Native, instead of the scope querying the DOM; a\n * scope with mode \"none\" still owns its fields so they never reach an outer scope.\n */\nconst InitialFocusContext = createContext<Registry | null>(null);\n/** Layer of the enclosing HJM overlay; null on the page itself. A ScreenLayout inside a sheet uses the sheet's. */\nconst ModalLayerContext = createContext<ModalLayerRef | null>(null);\n\ntype NestedScope = { enter(): HTMLElement | null; settle(): void };\n/**\n * Screen scopes rendered inside an HJM overlay, keyed by that overlay's layer. Their fields register with the screen,\n * not the overlay, so the overlay's activation asks them for the entry field instead of focusing its first control\n * over them (BurnTok search: a ScreenLayout in a Sheet left focus on the close button, 2026-10-18).\n */\nconst nestedScopes = new WeakMap<ModalLayerRef, Set<NestedScope>>();\n\n/**\n * Product modals (not on the HJM stack) layered above the scope. A product modal that contains the scope's own fields\n * wraps the screen rather than covering it, so it does not block (BurnTok search overlay, 2026-10-18).\n */\nfunction productModalAbove(fields: readonly HTMLElement[]): boolean {\n  return [...document.querySelectorAll('[aria-modal=\"true\"], dialog[open]')]\n    .some(modal => !fields.some(field => modal.contains(field)));\n}\n\nfunction isEditable(element: Element | null): boolean {\n  return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement\n    || (element instanceof HTMLElement && element.isContentEditable);\n}\n\ntype Candidate = InitialFocusCandidate & { entry: Entry };\nexport type InitialFocusScopeHandle = Readonly<{\n  registry: Registry;\n  layer: ModalLayerRef | null;\n  /**\n   * Overlays only: runs entry when the modal activates and returns the field for `useModalFocus` to focus. `explicit`\n   * means the overlay already has an `initialFocusRef`, so entry settles without choosing a field.\n   */\n  enter(explicit: boolean): HTMLElement | null;\n}>;\n\n/**\n * Screen scopes enter on mount (Web has no enter transition to wait for); overlays pass `layer` and enter through\n * `useModalFocus`. User pointer, key, wheel or touch input while no modal is above the scope ends the entry window.\n */\nexport function useInitialFocusScope({ mode, active = true, layer: ownLayer }: { mode: InitialFocusMode; active?: boolean; layer?: ModalLayerRef }): InitialFocusScopeHandle {\n  const inherited = useContext(ModalLayerContext);\n  const layer = ownLayer ?? inherited;\n  const overlay = ownLayer !== undefined;\n  const modeRef = useRef(mode); modeRef.current = mode;\n  const state = useRef({ phase: \"inactive\" as EntryFocusPhase, entries: new Set<Entry>(), fresh: new Set<Entry>(), counter: 0, flushQueued: false });\n\n  const scope = useMemo(() => {\n    const s = state.current;\n    const blocked = () => {\n      const own = layer?.current ?? null;\n      // Inside an HJM overlay that is not on the stack yet: its activation runs this scope's entry (`nestedScopes`).\n      if (layer !== null && own === null) return true;\n      const top = getTopModal();\n      if (top) return top !== own;\n      // A product's own modal above the page still covers it; overlay content is portaled outside product markup.\n      if (layer !== null) return false;\n      const fields = [...s.entries].map(entry => entry.element()).filter((element): element is HTMLElement => element !== null);\n      return productModalAbove(fields);\n    };\n    const dispatch = (event: EntryFocusEvent<Candidate> | { kind: \"register\"; entry: Entry }): HTMLElement | null => {\n      const candidates: Candidate[] = [...s.entries].map(entry => ({ entry, order: entry.order, preference: entry.preference, focusable: entry.focusable() }));\n      const resolved = event.kind === \"register\" && \"entry\" in event\n        ? { kind: \"register\" as const, field: candidates.find(candidate => candidate.entry === event.entry)! }\n        : event as EntryFocusEvent<Candidate>;\n      const result = resolveEntryFocus(s.phase, resolved, { mode: modeRef.current, candidates, blocked: blocked(), textEntryFocused: isEditable(document.activeElement) });\n      s.phase = result.phase;\n      return result.target?.entry.element() ?? null;\n    };\n    const focus = (target: HTMLElement | null) => target?.focus({ preventScroll: true });\n    // Fields mounting in one commit are judged together.\n    const flush = () => {\n      s.flushQueued = false;\n      const fresh = [...s.fresh].filter(entry => s.entries.has(entry)).sort((a, b) => a.order - b.order);\n      s.fresh.clear();\n      const field = fresh.find(entry => entry.preference === true) ?? fresh[0];\n      if (field) focus(dispatch({ kind: \"register\", entry: field }));\n    };\n    const registry: Registry = {\n      nextOrder: () => s.counter++,\n      register(entry, mounted) {\n        s.entries.add(entry);\n        if (mounted) { s.fresh.add(entry); if (!s.flushQueued) { s.flushQueued = true; queueMicrotask(flush); } }\n        return () => { s.entries.delete(entry); s.fresh.delete(entry); };\n      },\n    };\n    const settle = () => { s.phase = \"settled\"; };\n    const enter = (explicit: boolean) => {\n      s.fresh.clear();\n      dispatch({ kind: \"activate\" });\n      const nested = overlay && layer ? [...(nestedScopes.get(layer) ?? [])] : [];\n      if (explicit) { settle(); for (const scope of nested) scope.settle(); return null; }\n      const own = dispatch({ kind: \"enter\" });\n      if (own) return own;\n      for (const scope of nested) { const target = scope.enter(); if (target) return target; }\n      return null;\n    };\n    return { registry, layer, dispatch, focus, enter, settle };\n  }, [layer, overlay]);\n\n  useEffect(() => {\n    if (!active) { scope.dispatch({ kind: \"deactivate\" }); return undefined; }\n    // After every effect of this commit, so a modal opening in the same commit (an app-root consent dialog) is\n    // already on the stack and blocks entry instead of taking focus away and handing it back later.\n    let cancelled = false;\n    if (!overlay) queueMicrotask(() => { if (!cancelled) scope.focus(scope.enter(false)); });\n    // A screen inside an overlay that activates later enters when the overlay does (see `enter`).\n    let nested: Set<NestedScope> | undefined;\n    const nestedEntry: NestedScope = { enter: () => scope.enter(false), settle: scope.settle };\n    if (!overlay && scope.layer) {\n      nested = nestedScopes.get(scope.layer) ?? new Set();\n      nestedScopes.set(scope.layer, nested);\n      nested.add(nestedEntry);\n    }\n    const interact = () => { scope.dispatch({ kind: \"interact\" }); };\n    const events = [\"pointerdown\", \"keydown\", \"wheel\", \"touchstart\"] as const;\n    for (const type of events) document.addEventListener(type, interact, true);\n    // A modal above closed (after its return focus ran): retry a pending entry.\n    const unsubscribe = subscribeModalClose(() => scope.focus(scope.dispatch({ kind: \"unblock\" })));\n    return () => {\n      cancelled = true;\n      nested?.delete(nestedEntry);\n      for (const type of events) document.removeEventListener(type, interact, true);\n      unsubscribe();\n      scope.dispatch({ kind: \"deactivate\" });\n    };\n  }, [active, overlay, scope]);\n\n  return useMemo(() => ({ registry: scope.registry, layer: scope.layer, enter: scope.enter }), [scope]);\n}\n\nexport function InitialFocusProvider({ scope, children }: { scope: InitialFocusScopeHandle; children: ReactNode }) {\n  return <ModalLayerContext.Provider value={scope.layer}><InitialFocusContext.Provider value={scope.registry}>{children}</InitialFocusContext.Provider></ModalLayerContext.Provider>;\n}\n\n/** Screen scope: focuses the chosen field on mount, never over a field the user is in or under an open modal. */\nexport function InitialFocusScope({ mode, children }: { mode: InitialFocusMode; children: ReactNode }) {\n  const scope = useInitialFocusScope({ mode });\n  return <InitialFocusProvider scope={scope}>{children}</InitialFocusProvider>;\n}\n\n/** Registers a text field with the nearest scope. `preference` is the field's public `initialFocusTarget`. */\nexport function useInitialFocusTarget(element: RefObject<HTMLElement | null>, preference: boolean | undefined) {\n  const registry = useContext(InitialFocusContext);\n  // Tree order is fixed at first registration, so changing `preference` later does not move the field to the end.\n  const order = useRef<number | null>(null);\n  useLayoutEffect(() => {\n    if (!registry) return undefined;\n    // Only the first registration of this field instance counts as \"appeared\"; a later `preference` change does not.\n    const mounted = order.current === null;\n    order.current ??= registry.nextOrder();\n    return registry.register({\n      order: order.current, preference, element: () => element.current,\n      // Disabled and read-only fields are never focused on entry.\n      focusable: () => { const node = element.current as (HTMLInputElement | HTMLTextAreaElement | null); return !!node && !node.disabled && !node.readOnly; },\n    }, mounted);\n  }, [registry, preference, element]);\n}\n"]}

package/dist/internal/media-album.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+type MediaAlbumBase = Readonly<{
+    /** Number of photos in the set; at least one. */
+    count: number;
+    /**
+     * Draws one page. HJM calls it only for the page on screen, so the product can fetch, authorize and decode that
+     * photo alone instead of mounting every image in the set.
+     */
+    renderPage(index: number): ReactNode;
+    /** Localized accessible name of a page, e.g. "Photo 2 of 5". */
+    pageLabel(index: number, count: number): string;
+    /** Localized accessible names of the previous/next icon buttons. */
+    previousLabel: string;
+    nextLabel: string;
+    /** Page frame width / height. Defaults to `mediaAlbumRecipe.defaultAspectRatio` (square). */
+    aspectRatio?: number;
+    /** Opens the shown page (viewer); without it the page is a static image. */
+    onPress?(index: number): void;
+}>;
+/**
+ * Paged photo set (2026-10-18). Products own image sources, authorization and the viewer; HJM owns the frame,
+ * the counter row and which page is mounted. Controlled with `index` + `onIndexChange`, or uncontrolled from
+ * `defaultIndex`.
+ */
+export type MediaAlbum = MediaAlbumBase & (Readonly<{
+    index: number;
+    onIndexChange(index: number): void;
+    defaultIndex?: never;
+}> | Readonly<{
+    index?: never;
+    defaultIndex?: number;
+    onIndexChange?(index: number): void;
+}>);
+/**
+ * Hosts keep the page state so every copy of the album they render (the message and its hold-menu preview) shows
+ * the same page. Called unconditionally; `album` may be absent.
+ */
+export declare function useMediaAlbumIndex(album: MediaAlbum | undefined): readonly [number, (index: number) => void];
+export declare function MediaAlbumView({ album, index, onIndexChange, width, radius, className }: Readonly<{
+    album: MediaAlbum;
+    index: number;
+    onIndexChange(index: number): void;
+    /** Host media width (chat `mediaWidth`, comment `mediaMaxWidth`); the album never grows past its container. */
+    width: number;
+    radius: number;
+    className?: string;
+}>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=media-album.d.ts.map

package/dist/internal/media-album.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-album.d.ts","sourceRoot":"","sources":["../../src/internal/media-album.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrE,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,gEAAgE;IAChE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAChD,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,CACtC,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACrF,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,CAC1F,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAS5G;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,QAAQ,CAAC;IACjG,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrE,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnD,CAAC,+BAgBD"}

package/dist/internal/media-album.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { mediaAlbumRecipe, resolveMediaAlbumIndex, validateMediaAlbum } from "@hjmds/design-contracts/screen-patterns";
+import { IconButton } from "../actions.js";
+import { Text } from "../layout.js";
+import { Icon } from "../supplemental-display.js";
+/**
+ * Hosts keep the page state so every copy of the album they render (the message and its hold-menu preview) shows
+ * the same page. Called unconditionally; `album` may be absent.
+ */
+export function useMediaAlbumIndex(album) {
+    const [own, setOwn] = useState(album?.defaultIndex ?? 0);
+    if (!album)
+        return [0, setOwn];
+    if (album.index !== undefined) {
+        validateMediaAlbum(album.count, album.index);
+        return [album.index, album.onIndexChange];
+    }
+    const current = resolveMediaAlbumIndex(album.count, own);
+    return [current, (next) => { setOwn(next); album.onIndexChange?.(next); }];
+}
+export function MediaAlbumView({ album, index, onIndexChange, width, radius, className }) {
+    validateMediaAlbum(album.count, index);
+    const label = album.pageLabel(index, album.count);
+    const frame = { aspectRatio: album.aspectRatio ?? mediaAlbumRecipe.defaultAspectRatio, borderRadius: radius };
+    const page = album.renderPage(index);
+    return _jsxs("div", { className: ["hjm-media-album", className].filter(Boolean).join(" "), style: { inlineSize: width, gap: mediaAlbumRecipe.controlGap }, children: [album.onPress
+                ? _jsx("button", { type: "button", className: "hjm-media-album__page", "aria-label": label, style: frame, onClick: () => album.onPress?.(index), children: page })
+                : _jsx("div", { role: "img", "aria-label": label, className: "hjm-media-album__page", style: frame, children: page }), album.count > 1 ? _jsxs("div", { className: "hjm-media-album__controls", children: [_jsx(IconButton, { label: album.previousLabel, tone: "ghost", size: mediaAlbumRecipe.controlSize, edge: "start", disabled: index === 0, onClick: () => onIndexChange(index - 1), children: _jsx(Icon, { name: "chevronStart" }) }), _jsxs(Text, { variant: "caption", "aria-live": "polite", children: [index + 1, "/", album.count] }), _jsx(IconButton, { label: album.nextLabel, tone: "ghost", size: mediaAlbumRecipe.controlSize, edge: "end", disabled: index === album.count - 1, onClick: () => onIndexChange(index + 1), children: _jsx(Icon, { name: "chevronEnd" }) })] }) : null] });
+}
+//# sourceMappingURL=media-album.js.map

package/dist/internal/media-album.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-album.js","sourceRoot":"","sources":["../../src/internal/media-album.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, type CSSProperties, type ReactNode } from \"react\";\nimport { mediaAlbumRecipe, resolveMediaAlbumIndex, validateMediaAlbum } from \"@hjmds/design-contracts/screen-patterns\";\nimport { IconButton } from \"../actions.js\";\nimport { Text } from \"../layout.js\";\nimport { Icon } from \"../supplemental-display.js\";\n\ntype MediaAlbumBase = Readonly<{\n  /** Number of photos in the set; at least one. */\n  count: number;\n  /**\n   * Draws one page. HJM calls it only for the page on screen, so the product can fetch, authorize and decode that\n   * photo alone instead of mounting every image in the set.\n   */\n  renderPage(index: number): ReactNode;\n  /** Localized accessible name of a page, e.g. \"Photo 2 of 5\". */\n  pageLabel(index: number, count: number): string;\n  /** Localized accessible names of the previous/next icon buttons. */\n  previousLabel: string;\n  nextLabel: string;\n  /** Page frame width / height. Defaults to `mediaAlbumRecipe.defaultAspectRatio` (square). */\n  aspectRatio?: number;\n  /** Opens the shown page (viewer); without it the page is a static image. */\n  onPress?(index: number): void;\n}>;\n\n/**\n * Paged photo set (2026-10-18). Products own image sources, authorization and the viewer; HJM owns the frame,\n * the counter row and which page is mounted. Controlled with `index` + `onIndexChange`, or uncontrolled from\n * `defaultIndex`.\n */\nexport type MediaAlbum = MediaAlbumBase & (\n  | Readonly<{ index: number; onIndexChange(index: number): void; defaultIndex?: never }>\n  | Readonly<{ index?: never; defaultIndex?: number; onIndexChange?(index: number): void }>\n);\n\n/**\n * Hosts keep the page state so every copy of the album they render (the message and its hold-menu preview) shows\n * the same page. Called unconditionally; `album` may be absent.\n */\nexport function useMediaAlbumIndex(album: MediaAlbum | undefined): readonly [number, (index: number) => void] {\n  const [own, setOwn] = useState(album?.defaultIndex ?? 0);\n  if (!album) return [0, setOwn];\n  if (album.index !== undefined) {\n    validateMediaAlbum(album.count, album.index);\n    return [album.index, album.onIndexChange];\n  }\n  const current = resolveMediaAlbumIndex(album.count, own);\n  return [current, (next: number) => { setOwn(next); album.onIndexChange?.(next); }];\n}\n\nexport function MediaAlbumView({ album, index, onIndexChange, width, radius, className }: Readonly<{\n  album: MediaAlbum; index: number; onIndexChange(index: number): void;\n  /** Host media width (chat `mediaWidth`, comment `mediaMaxWidth`); the album never grows past its container. */\n  width: number; radius: number; className?: string;\n}>) {\n  validateMediaAlbum(album.count, index);\n  const label = album.pageLabel(index, album.count);\n  const frame = { aspectRatio: album.aspectRatio ?? mediaAlbumRecipe.defaultAspectRatio, borderRadius: radius } as CSSProperties;\n  const page = album.renderPage(index);\n  return <div className={[\"hjm-media-album\", className].filter(Boolean).join(\" \")} style={{ inlineSize: width, gap: mediaAlbumRecipe.controlGap }}>\n    {album.onPress\n      ? <button type=\"button\" className=\"hjm-media-album__page\" aria-label={label} style={frame} onClick={() => album.onPress?.(index)}>{page}</button>\n      : <div role=\"img\" aria-label={label} className=\"hjm-media-album__page\" style={frame}>{page}</div>}\n    {album.count > 1 ? <div className=\"hjm-media-album__controls\">\n      {/* Same counter presentation as CarouselMotion navigation=\"counter\"; logical chevrons mirror in RTL. */}\n      <IconButton label={album.previousLabel} tone=\"ghost\" size={mediaAlbumRecipe.controlSize} edge=\"start\" disabled={index === 0} onClick={() => onIndexChange(index - 1)}><Icon name=\"chevronStart\" /></IconButton>\n      <Text variant=\"caption\" aria-live=\"polite\">{index + 1}/{album.count}</Text>\n      <IconButton label={album.nextLabel} tone=\"ghost\" size={mediaAlbumRecipe.controlSize} edge=\"end\" disabled={index === album.count - 1} onClick={() => onIndexChange(index + 1)}><Icon name=\"chevronEnd\" /></IconButton>\n    </div> : null}\n  </div>;\n}\n"]}

package/dist/internal/message-reactions.d.ts

@@ -1,4 +1,6 @@
-import { type ReactNode } from "react";
+import { type ReactNode, type Ref } from "react";
+import { type ChatReactionSummaryItem } from "@hjmds/design-contracts/screen-patterns";
+import type { MenuItemTone } from "@hjmds/design-contracts/recipes";
 import { type ReactionPickerProps } from "../reaction-picker.js";
 /** One row of the hold menu. Products supply copy and icons; HJM owns order, size and tone. */
 export type MessageMenuAction = Readonly<{
@@ -8,6 +10,11 @@ export type MessageMenuAction = Readonly<{
     onPress(): void;
     disabled?: boolean; /** Shows › for rows that open a further list. */
     submenu?: boolean;
+    /** Same vocabulary as Menu items: `danger` for destructive rows such as delete (default `neutral`). */ tone?: MenuItemTone;
+}>;
+/** Lets the owning message open the same hold menu from its reaction summary. */
+export type MessageReactionsHandle = Readonly<{
+    open(): void;
 }>;
 type Props = ReactionPickerProps & Readonly<{
     closeLabel: string;
@@ -35,8 +42,27 @@ type Props = ReactionPickerProps & Readonly<{
         disabled?: boolean;
         icon?: ReactNode;
     }>;
+    menuRef?: Ref<MessageReactionsHandle>;
 }>;
 /** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */
-export declare function MessageReactions({ children, closeLabel, menuAction, interactiveContent, triggerClassName, replyAction, menuTitle, menuActions, reportAction, ...picker }: Props): import("react").JSX.Element;
+export declare function MessageReactions({ children, closeLabel, menuAction, interactiveContent, triggerClassName, replyAction, menuTitle, menuActions, reportAction, menuRef, ...picker }: Props): import("react").JSX.Element;
+/** ChatMessage strips its summary before spreading the rest into the hold menu. */
+export declare function omitReactionSummary<T extends Readonly<{
+    summary?: unknown;
+}>>({ summary: _summary, ...rest }: T): Omit<T, "summary">;
+/**
+ * Current reactions as one button beside the time; pressing it opens the hold menu (the press target and its name
+ * are the whole pill, so per-emoji parts are hidden from assistive tech). The pill shows the brand border when the
+ * reader's own reaction is among the items.
+ */
+export declare function ReactionSummaryButton({ label, items, selected, disabled, onPress }: Readonly<{
+    label: string;
+    items: readonly (ChatReactionSummaryItem & Readonly<{
+        showCount: boolean;
+    }>)[];
+    selected: string | null;
+    disabled: boolean;
+    onPress(): void;
+}>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=message-reactions.d.ts.map

package/dist/internal/message-reactions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-reactions.d.ts","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjF,+FAA+F;AAC/F,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,OAAO,IAAI,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,iDAAiD;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpM,KAAK,KAAK,GAAG,mBAAmB,GAAG,QAAQ,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAC,MAAM,CAAC;QAAA,OAAO,IAAG,IAAI,CAAC;QAAA,QAAQ,CAAC,EAAC,OAAO,CAAA;KAAC,CAAC,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,kBAAkB,CAAC,EAAC,OAAO,CAAC,CAAC,gEAAgE;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACrR,WAAW,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAC,MAAM,CAAC;QAAA,OAAO,IAAG,IAAI,CAAC;QAAA,QAAQ,CAAC,EAAC,OAAO,CAAC;QAAA,IAAI,CAAC,EAAC,SAAS,CAAA;KAAC,CAAC,CAAC;IACxF,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAC3C,6FAA6F;IAC7F,YAAY,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAC,MAAM,CAAC;QAAA,OAAO,IAAG,IAAI,CAAC;QAAA,QAAQ,CAAC,EAAC,OAAO,CAAC;QAAA,IAAI,CAAC,EAAC,SAAS,CAAA;KAAC,CAAC,CAAA;CAAE,CAAC,CAAC;AAC9F,yGAAyG;AACzG,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,kBAAwB,EAAE,gBAA6C,EAAE,WAAW,EAAE,SAAS,EAAE,WAAgB,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK,+BAuCvN"}
+{"version":3,"file":"message-reactions.d.ts","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":"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"}

package/dist/internal/message-reactions.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { screenPatternRecipe } from "@hjmds/design-contracts/screen-patterns";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { chatMessageRecipe, screenPatternRecipe } from "@hjmds/design-contracts/screen-patterns";
 import { Text } from "../layout.js";
 import { Popover } from "../popover.js";
 import { ReactionPicker } from "../reaction-picker.js";
 /** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */
-export function MessageReactions({ children, closeLabel, menuAction, interactiveContent = false, triggerClassName = "hjm-chat-message__bubble", replyAction, menuTitle, menuActions = [], reportAction, ...picker }) {
+export function MessageReactions({ children, closeLabel, menuAction, interactiveContent = false, triggerClassName = "hjm-chat-message__bubble", replyAction, menuTitle, menuActions = [], reportAction, menuRef, ...picker }) {
     // Reply leads and report trails; legacy single menuAction keeps its place before report.
     const rows = [
         ...(replyAction ? [{ id: "reply", ...replyAction }] : []),
         ...menuActions,
         ...(menuAction ? [{ id: "menu", ...menuAction }] : []),
-        ...(reportAction ? [{ id: "report", ...reportAction, danger: true }] : []),
+        ...(reportAction ? [{ id: "report", ...reportAction, tone: "danger" }] : []),
     ];
     const [open, setOpen] = useState(false);
     const press = useRef(null);
@@ -24,6 +24,8 @@ export function MessageReactions({ children, closeLabel, menuAction, interactive
         cancel();
         setOpen(false);
     } }, [picker.disabled]);
+    useImperativeHandle(menuRef, () => ({ open: () => { if (!picker.disabled)
+            setOpen(true); } }), [picker.disabled]);
     return _jsxs(Popover, { open: open && !picker.disabled, onOpenChange: (next) => { if (!next)
             setOpen(false); }, title: picker.label, closeLabel: closeLabel, descriptor: { placement: "top", align: "start" }, className: "hjm-message-reactions", trigger: _jsx("div", { className: triggerClassName, tabIndex: picker.disabled ? -1 : 0, role: interactiveContent ? "group" : "button", "aria-label": picker.label, "aria-disabled": picker.disabled, onContextMenu: event => { event.preventDefault(); cancel(); if (!picker.disabled)
                 setOpen(true); }, 
@@ -44,6 +46,20 @@ export function MessageReactions({ children, closeLabel, menuAction, interactive
                 event.preventDefault();
                 event.stopPropagation();
                 held.current = false;
-            } }, children: children }), children: [picker.options.length ? _jsx(ReactionPicker, { ...picker, layout: "strip", onValueChange: value => { picker.onValueChange(value); setOpen(false); } }) : null, menuTitle || rows.length ? _jsxs("div", { className: "hjm-message-menu", children: [menuTitle ? _jsx(Text, { variant: "caption", tone: "muted", className: "hjm-message-menu__title", children: menuTitle }) : null, rows.map(row => _jsxs("button", { type: "button", className: "hjm-message-menu__item", "data-tone": row.danger ? "danger" : undefined, disabled: row.disabled, onClick: () => { setOpen(false); row.onPress(); }, children: [row.icon ? _jsx("span", { className: "hjm-message-menu__icon", "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: "hjm-message-menu__label", children: row.label }), row.submenu ? _jsx("span", { className: "hjm-message-menu__chevron", "aria-hidden": "true", children: "\u203A" }) : null] }, row.id))] }) : null] });
+            } }, children: children }), children: [picker.options.length ? _jsx(ReactionPicker, { ...picker, layout: "strip", onValueChange: value => { picker.onValueChange(value); setOpen(false); } }) : null, menuTitle || rows.length ? _jsxs("div", { className: "hjm-message-menu", children: [menuTitle ? _jsx(Text, { variant: "caption", tone: "muted", className: "hjm-message-menu__title", children: menuTitle }) : null, rows.map(row => _jsxs("button", { type: "button", className: "hjm-message-menu__item", "data-tone": row.tone === "danger" ? "danger" : undefined, disabled: row.disabled, onClick: () => { setOpen(false); row.onPress(); }, children: [row.icon ? _jsx("span", { className: "hjm-message-menu__icon", "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: "hjm-message-menu__label", children: row.label }), row.submenu ? _jsx("span", { className: "hjm-message-menu__chevron", "aria-hidden": "true", children: "\u203A" }) : null] }, row.id))] }) : null] });
+}
+/** ChatMessage strips its summary before spreading the rest into the hold menu. */
+export function omitReactionSummary({ summary: _summary, ...rest }) {
+    return rest;
+}
+/**
+ * Current reactions as one button beside the time; pressing it opens the hold menu (the press target and its name
+ * are the whole pill, so per-emoji parts are hidden from assistive tech). The pill shows the brand border when the
+ * reader's own reaction is among the items.
+ */
+export function ReactionSummaryButton({ label, items, selected, disabled, onPress }) {
+    const r = chatMessageRecipe.reactionSummary;
+    const mine = items.some(item => item.id === selected);
+    return _jsx("button", { type: "button", className: "hjm-chat-message__reaction-summary", "aria-label": label, disabled: disabled, "data-selected": mine || undefined, onClick: onPress, style: { minBlockSize: r.minHeight, paddingInline: r.paddingInline, gap: r.itemGap }, children: items.map(item => _jsxs("span", { "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", gap: r.emojiGap }, children: [_jsx("span", { children: item.emoji }), item.showCount ? _jsx(Text, { as: "span", variant: "caption", children: item.count }) : null] }, item.id)) });
 }
 //# sourceMappingURL=message-reactions.js.map

package/dist/internal/message-reactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-reactions.js","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { screenPatternRecipe } from \"@hjmds/design-contracts/screen-patterns\";\nimport { Text } from \"../layout.js\";\nimport { Popover } from \"../popover.js\";\nimport { ReactionPicker, type ReactionPickerProps } from \"../reaction-picker.js\";\n\n/** One row of the hold menu. Products supply copy and icons; HJM owns order, size and tone. */\nexport type MessageMenuAction = Readonly<{ id: string; label: string; icon?: ReactNode; onPress(): void; disabled?: boolean; /** Shows › for rows that open a further list. */ submenu?: boolean }>;\ntype Props = ReactionPickerProps & Readonly<{ closeLabel: string; menuAction?: Readonly<{label:string;onPress():void;disabled?:boolean}>; children: ReactNode; interactiveContent?:boolean; /** Comments reuse the hold menu without chat bubble styling. */ triggerClassName?: string;\n  replyAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}>;\n  /** Shown above the actions, e.g. the exact send time that a run only shows once. */\n  menuTitle?: string;\n  menuActions?: readonly MessageMenuAction[];\n  /** Always last and in the danger tone, matching the measured reference menu (2026-10-16). */\n  reportAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}> }>;\n/** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */\nexport function MessageReactions({ children, closeLabel, menuAction, interactiveContent=false, triggerClassName = \"hjm-chat-message__bubble\", replyAction, menuTitle, menuActions = [], reportAction, ...picker }: Props) {\n  // Reply leads and report trails; legacy single menuAction keeps its place before report.\n  const rows: (MessageMenuAction & { danger?: boolean })[] = [\n    ...(replyAction ? [{ id: \"reply\", ...replyAction }] : []),\n    ...menuActions,\n    ...(menuAction ? [{ id: \"menu\", ...menuAction }] : []),\n    ...(reportAction ? [{ id: \"report\", ...reportAction, danger: true }] : []),\n  ];\n  const [open, setOpen] = useState(false);\n  const press = useRef<{ timer: ReturnType<typeof setTimeout>; x: number; y: number } | null>(null);\n  const held = useRef(false);\n  const cancel = () => { if (press.current) clearTimeout(press.current.timer); press.current = null; };\n  useEffect(() => () => { if (press.current) clearTimeout(press.current.timer); }, []);\n  useEffect(() => { if (picker.disabled) { cancel(); setOpen(false); } }, [picker.disabled]);\n  return <Popover open={open && !picker.disabled} onOpenChange={(next) => { if (!next) setOpen(false); }} title={picker.label} closeLabel={closeLabel}\n    descriptor={{ placement: \"top\", align: \"start\" }} className=\"hjm-message-reactions\" trigger={<div\n      className={triggerClassName} tabIndex={picker.disabled ? -1 : 0} role={interactiveContent?\"group\":\"button\"} aria-label={picker.label} aria-disabled={picker.disabled}\n      onContextMenu={event => { event.preventDefault(); cancel(); if (!picker.disabled) setOpen(true); }}\n      // Only the bubble itself opens reactions: with interactiveContent, Enter/Space on a nested\n      // link or button must keep its native activation instead of being swallowed here.\n      onKeyDown={event => { if (event.target === event.currentTarget && (event.key === \"Enter\" || event.key === \" \") && !picker.disabled) { event.preventDefault(); setOpen(true); } }}\n      onPointerDown={event => {\n        if (picker.disabled || event.button !== 0 || (event.target as HTMLElement).closest(\"button,a,input,textarea\")) return;\n        cancel(); held.current = false;\n        const { clientX: x, clientY: y } = event;\n        press.current = { x, y, timer: setTimeout(() => { held.current = true; press.current = null; setOpen(true); }, screenPatternRecipe.reactionHoldMs) };\n      }}\n      onPointerMove={event => { const start = press.current; if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > screenPatternRecipe.reactionMoveTolerance) cancel(); }}\n      onPointerCancel={cancel} onPointerLeave={cancel} onPointerUp={cancel}\n      onClickCapture={event => { if (held.current) { event.preventDefault(); event.stopPropagation(); held.current = false; } }}\n    >{children}</div>}>\n    {/* Action-only menus (comments, 2026-10-16 reference) pass no options and show no strip. */}\n    {picker.options.length ? <ReactionPicker {...picker} layout=\"strip\" onValueChange={value => { picker.onValueChange(value); setOpen(false); }} /> : null}\n    {menuTitle || rows.length ? <div className=\"hjm-message-menu\">\n      {menuTitle ? <Text variant=\"caption\" tone=\"muted\" className=\"hjm-message-menu__title\">{menuTitle}</Text> : null}\n      {rows.map(row => <button key={row.id} type=\"button\" className=\"hjm-message-menu__item\" data-tone={row.danger ? \"danger\" : undefined} disabled={row.disabled} onClick={() => { setOpen(false); row.onPress(); }}>\n        {row.icon ? <span className=\"hjm-message-menu__icon\" aria-hidden=\"true\">{row.icon}</span> : null}<span className=\"hjm-message-menu__label\">{row.label}</span>{row.submenu ? <span className=\"hjm-message-menu__chevron\" aria-hidden=\"true\">›</span> : null}</button>)}\n    </div> : null}\n  </Popover>;\n}\n"]}
+{"version":3,"file":"message-reactions.js","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { chatMessageRecipe, screenPatternRecipe, type ChatReactionSummaryItem } from \"@hjmds/design-contracts/screen-patterns\";\nimport type { MenuItemTone } from \"@hjmds/design-contracts/recipes\";\nimport { Text } from \"../layout.js\";\nimport { Popover } from \"../popover.js\";\nimport { ReactionPicker, type ReactionPickerProps } from \"../reaction-picker.js\";\n\n/** One row of the hold menu. Products supply copy and icons; HJM owns order, size and tone. */\nexport type MessageMenuAction = Readonly<{ id: string; label: string; icon?: ReactNode; onPress(): void; disabled?: boolean; /** Shows › for rows that open a further list. */ submenu?: boolean;\n  /** Same vocabulary as Menu items: `danger` for destructive rows such as delete (default `neutral`). */ tone?: MenuItemTone }>;\n/** Lets the owning message open the same hold menu from its reaction summary. */\nexport type MessageReactionsHandle = Readonly<{ open(): void }>;\ntype Props = ReactionPickerProps & Readonly<{ closeLabel: string; menuAction?: Readonly<{label:string;onPress():void;disabled?:boolean}>; children: ReactNode; interactiveContent?:boolean; /** Comments reuse the hold menu without chat bubble styling. */ triggerClassName?: string;\n  replyAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}>;\n  /** Shown above the actions, e.g. the exact send time that a run only shows once. */\n  menuTitle?: string;\n  menuActions?: readonly MessageMenuAction[];\n  /** Always last and in the danger tone, matching the measured reference menu (2026-10-16). */\n  reportAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}>;\n  menuRef?: Ref<MessageReactionsHandle> }>;\n/** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */\nexport function MessageReactions({ children, closeLabel, menuAction, interactiveContent=false, triggerClassName = \"hjm-chat-message__bubble\", replyAction, menuTitle, menuActions = [], reportAction, menuRef, ...picker }: Props) {\n  // Reply leads and report trails; legacy single menuAction keeps its place before report.\n  const rows: MessageMenuAction[] = [\n    ...(replyAction ? [{ id: \"reply\", ...replyAction }] : []),\n    ...menuActions,\n    ...(menuAction ? [{ id: \"menu\", ...menuAction }] : []),\n    ...(reportAction ? [{ id: \"report\", ...reportAction, tone: \"danger\" as const }] : []),\n  ];\n  const [open, setOpen] = useState(false);\n  const press = useRef<{ timer: ReturnType<typeof setTimeout>; x: number; y: number } | null>(null);\n  const held = useRef(false);\n  const cancel = () => { if (press.current) clearTimeout(press.current.timer); press.current = null; };\n  useEffect(() => () => { if (press.current) clearTimeout(press.current.timer); }, []);\n  useEffect(() => { if (picker.disabled) { cancel(); setOpen(false); } }, [picker.disabled]);\n  useImperativeHandle(menuRef, () => ({ open: () => { if (!picker.disabled) setOpen(true); } }), [picker.disabled]);\n  return <Popover open={open && !picker.disabled} onOpenChange={(next) => { if (!next) setOpen(false); }} title={picker.label} closeLabel={closeLabel}\n    descriptor={{ placement: \"top\", align: \"start\" }} className=\"hjm-message-reactions\" trigger={<div\n      className={triggerClassName} tabIndex={picker.disabled ? -1 : 0} role={interactiveContent?\"group\":\"button\"} aria-label={picker.label} aria-disabled={picker.disabled}\n      onContextMenu={event => { event.preventDefault(); cancel(); if (!picker.disabled) setOpen(true); }}\n      // Only the bubble itself opens reactions: with interactiveContent, Enter/Space on a nested\n      // link or button must keep its native activation instead of being swallowed here.\n      onKeyDown={event => { if (event.target === event.currentTarget && (event.key === \"Enter\" || event.key === \" \") && !picker.disabled) { event.preventDefault(); setOpen(true); } }}\n      onPointerDown={event => {\n        if (picker.disabled || event.button !== 0 || (event.target as HTMLElement).closest(\"button,a,input,textarea\")) return;\n        cancel(); held.current = false;\n        const { clientX: x, clientY: y } = event;\n        press.current = { x, y, timer: setTimeout(() => { held.current = true; press.current = null; setOpen(true); }, screenPatternRecipe.reactionHoldMs) };\n      }}\n      onPointerMove={event => { const start = press.current; if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > screenPatternRecipe.reactionMoveTolerance) cancel(); }}\n      onPointerCancel={cancel} onPointerLeave={cancel} onPointerUp={cancel}\n      onClickCapture={event => { if (held.current) { event.preventDefault(); event.stopPropagation(); held.current = false; } }}\n    >{children}</div>}>\n    {/* Action-only menus (comments, 2026-10-16 reference) pass no options and show no strip. */}\n    {picker.options.length ? <ReactionPicker {...picker} layout=\"strip\" onValueChange={value => { picker.onValueChange(value); setOpen(false); }} /> : null}\n    {menuTitle || rows.length ? <div className=\"hjm-message-menu\">\n      {menuTitle ? <Text variant=\"caption\" tone=\"muted\" className=\"hjm-message-menu__title\">{menuTitle}</Text> : null}\n      {rows.map(row => <button key={row.id} type=\"button\" className=\"hjm-message-menu__item\" data-tone={row.tone === \"danger\" ? \"danger\" : undefined} disabled={row.disabled} onClick={() => { setOpen(false); row.onPress(); }}>\n        {row.icon ? <span className=\"hjm-message-menu__icon\" aria-hidden=\"true\">{row.icon}</span> : null}<span className=\"hjm-message-menu__label\">{row.label}</span>{row.submenu ? <span className=\"hjm-message-menu__chevron\" aria-hidden=\"true\">›</span> : null}</button>)}\n    </div> : null}\n  </Popover>;\n}\n\n/** ChatMessage strips its summary before spreading the rest into the hold menu. */\nexport function omitReactionSummary<T extends Readonly<{ summary?: unknown }>>({ summary: _summary, ...rest }: T): Omit<T, \"summary\"> {\n  return rest;\n}\n\n/**\n * Current reactions as one button beside the time; pressing it opens the hold menu (the press target and its name\n * are the whole pill, so per-emoji parts are hidden from assistive tech). The pill shows the brand border when the\n * reader's own reaction is among the items.\n */\nexport function ReactionSummaryButton({ label, items, selected, disabled, onPress }: Readonly<{ label: string; items: readonly (ChatReactionSummaryItem & Readonly<{ showCount: boolean }>)[]; selected: string | null; disabled: boolean; onPress(): void }>) {\n  const r = chatMessageRecipe.reactionSummary;\n  const mine = items.some(item => item.id === selected);\n  return <button type=\"button\" className=\"hjm-chat-message__reaction-summary\" aria-label={label} disabled={disabled} data-selected={mine || undefined} onClick={onPress}\n    style={{ minBlockSize: r.minHeight, paddingInline: r.paddingInline, gap: r.itemGap }}>\n    {items.map(item => <span key={item.id} aria-hidden=\"true\" style={{ display: \"inline-flex\", alignItems: \"center\", gap: r.emojiGap }}><span>{item.emoji}</span>{item.showCount ? <Text as=\"span\" variant=\"caption\">{item.count}</Text> : null}</span>)}\n  </button>;\n}\n"]}

package/dist/layout.d.ts

@@ -4,7 +4,7 @@ import { type ContainerGutter, type ContainerSize } from "@hjmds/design-contract
 import { type LayoutSidebarRole } from "@hjmds/design-contracts/components/layout";
 import { type SurfacePadding, type SurfaceRadius, type SurfaceTone } from "@hjmds/design-contracts/recipes/base";
 import { type StackAlign, type StackAxis, type StackGap, type StackJustify, type TextEmphasis, type TextTone } from "@hjmds/design-contracts/recipes";
-import { type FontRole, type TextVariant } from "@hjmds/design-contracts/foundations";
+import { type FontRole, type NumericVariant, type TextVariant } from "@hjmds/design-contracts/foundations";
 import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import type { HjmCompositionStyleProp } from "./composition-style.js";
 export type { SurfacePadding, SurfaceRadius, SurfaceTone, } from "@hjmds/design-contracts/recipes/base";
@@ -62,24 +62,40 @@ export declare const Layout: import("react").ForwardRefExoticComponent<Omit<HTML
     /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */
     layoutStyle?: HjmCompositionStyleProp;
 }> & import("react").RefAttributes<HTMLDivElement>>;
-export type TextProps = Omit<HTMLAttributes<HTMLElement>, "children"> & Readonly<{
+export type TextProps = Omit<HTMLAttributes<HTMLElement>, "children" | "color"> & Readonly<{
     children: ReactNode;
     as?: "span" | "p" | "div" | "strong" | "small";
     variant?: TextVariant;
     /** Overrides the variant family role; never changes its semantic element or metrics. */
     fontRole?: FontRole;
     tone?: TextTone;
+    /**
+     * Product-owned color role (team, sentiment, chart series) replacing the `tone` color while the HJM variant
+     * metrics and font face stay. Mirrors Native, where dropping to a raw text host lost the face (2026-10-18).
+     * Replaces the legacy HTML `color` attribute type, which no browser applies to text. Contrast is the product's.
+     */
+    color?: string;
+    /** Digit spacing; `tabular` keeps changing numbers (scores, timers, counts) from shifting the layout. */
+    numeric?: NumericVariant;
     emphasis?: TextEmphasis;
     /** Canonical layout-only placement. Controlled visual keys are excluded. */
     layoutStyle?: HjmCompositionStyleProp;
 }>;
-export declare const Text: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & Readonly<{
+export declare const Text: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "color" | "children"> & Readonly<{
     children: ReactNode;
     as?: "span" | "p" | "div" | "strong" | "small";
     variant?: TextVariant;
     /** Overrides the variant family role; never changes its semantic element or metrics. */
     fontRole?: FontRole;
     tone?: TextTone;
+    /**
+     * Product-owned color role (team, sentiment, chart series) replacing the `tone` color while the HJM variant
+     * metrics and font face stay. Mirrors Native, where dropping to a raw text host lost the face (2026-10-18).
+     * Replaces the legacy HTML `color` attribute type, which no browser applies to text. Contrast is the product's.
+     */
+    color?: string;
+    /** Digit spacing; `tabular` keeps changing numbers (scores, timers, counts) from shifting the layout. */
+    numeric?: NumericVariant;
     emphasis?: TextEmphasis;
     /** Canonical layout-only placement. Controlled visual keys are excluded. */
     layoutStyle?: HjmCompositionStyleProp;

package/dist/layout.d.ts.map

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

package/dist/layout.js

@@ -9,7 +9,7 @@ import { resolveContainerDescriptor, } from "@hjmds/design-contracts/components/
 import { layoutRecipe, validateLayoutWebDescriptor, } from "@hjmds/design-contracts/components/layout";
 import { surfaceDefaults, surfaceGeometry, surfaceRecipe, } from "@hjmds/design-contracts/recipes/base";
 import { resolveTextDefaultWeight, stackRecipe, textRecipe, } from "@hjmds/design-contracts/recipes";
-import { resolveTextFontRole, typography } from "@hjmds/design-contracts/foundations";
+import { numeric as numericVariants, resolveTextFontRole, typography } from "@hjmds/design-contracts/foundations";
 import { createElement, forwardRef, useId, useRef, } from "react";
 import { classNames, composeRefs, useElementWidth, useWindowWidth, } from "./internal.js";
 function hasRegionContent(content) {
@@ -94,7 +94,7 @@ export const Layout = forwardRef(function Layout({ children, header, footer, sid
                     ...mainStyle,
                 }, children: children }), hasFooter ? (_jsx("footer", { ...restFooterProps, className: classNames("hjm-layout__footer", footerClassName), children: footer })) : null] }));
 });
-export const Text = forwardRef(function Text({ as = "span", variant = textRecipe.defaults.variant, fontRole, tone = textRecipe.defaults.tone, emphasis: suppliedEmphasis, className, layoutStyle, style, ...props }, ref) {
+export const Text = forwardRef(function Text({ as = "span", variant = textRecipe.defaults.variant, fontRole, tone = textRecipe.defaults.tone, color, numeric, emphasis: suppliedEmphasis, className, layoutStyle, style, ...props }, ref) {
     const profile = useDesignProfileDefaults();
     const emphasis = suppliedEmphasis ?? textRecipe.defaults.emphasis;
     const defaultWeight = suppliedEmphasis === undefined
@@ -110,7 +110,14 @@ export const Text = forwardRef(function Text({ as = "span", variant = textRecipe
         "data-emphasis": emphasis,
         // The variant default weight goes first so caller `style`/placement win, matching Native's style order
         // (it used to be spread last and overrode an explicit style weight under a profile).
-        style: { ...(defaultWeight === undefined ? {} : { fontWeight: defaultWeight }), ...style, ...layoutStyle },
+        "data-numeric": numeric,
+        style: {
+            ...(defaultWeight === undefined ? {} : { fontWeight: defaultWeight }),
+            ...(color === undefined ? {} : { color }),
+            ...(numeric === undefined ? {} : { fontVariantNumeric: numericVariants[numeric] }),
+            ...style,
+            ...layoutStyle,
+        },
     });
 });
 export const Surface = forwardRef(function Surface({ as = "div", tone = surfaceDefaults.tone, bordered, padding = surfaceDefaults.padding, radius = surfaceDefaults.radius, className, layoutStyle, style, ...props }, ref) {