@hjmds/react 1.42.0 → 1.43.0

package/dist/styles.layered.css

@@ -3531,14 +3531,17 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Wrapped bubbles (reaction trigger anchors) must shrink so the time stays beside them. */
 .hjm-chat-message__body > :not(.hjm-chat-message__meta) { flex: 0 1 auto; min-inline-size: 0; }
 .hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__body { flex-direction: row-reverse; }
-.hjm-chat-message__bubble { border-radius: 14px; background: var(--hjm-color-surface); padding: 6px 10px; min-inline-size: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
-.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__bubble { background: var(--hjm-color-surface-accent); }
+/* Incoming bubbles use the alternate surface because the light canvas and surface are both white. */
+.hjm-chat-message__bubble { border-radius: 14px; background: var(--hjm-color-surface-alt); padding: 6px 10px; min-inline-size: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+/* iMessage-style filled authorship contrast; the product primary/onPrimary pair stays authoritative. */
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__bubble { background: var(--hjm-color-primary); color: var(--hjm-color-on-primary); }
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__bubble .hjm-text:is([data-tone="primary"], [data-tone="body"], [data-tone="muted"], [data-tone="subtle"], [data-tone="weak"]) { color: var(--hjm-color-on-primary); }
 /* Tighten the first corner to join the overlapping rounded tip. */
 .hjm-chat-message[data-tail] .hjm-chat-message__bubble { position: relative; border-start-start-radius: 4px; }
 /* The reference tip follows the top edge; its curved underside joins the bubble (2026-10-20). */
-.hjm-chat-message[data-tail] .hjm-chat-message__bubble::before { content: ""; position: absolute; top: 0; inset-inline-start: -6px; width: 11px; height: 10px; border-start-start-radius: 1px; border-end-start-radius: 10px; background: var(--hjm-color-surface); pointer-events: none; }
+.hjm-chat-message[data-tail] .hjm-chat-message__bubble::before { content: ""; position: absolute; top: 0; inset-inline-start: -6px; width: 11px; height: 10px; border-start-start-radius: 1px; border-end-start-radius: 10px; background: var(--hjm-color-surface-alt); pointer-events: none; }
 .hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble { border-start-start-radius: 14px; border-start-end-radius: 4px; }
-.hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble::before { inset-inline-start: auto; inset-inline-end: -6px; border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 1px; border-end-end-radius: 10px; background: var(--hjm-color-surface-accent); }
+.hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble::before { inset-inline-start: auto; inset-inline-end: -6px; border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 1px; border-end-end-radius: 10px; background: var(--hjm-color-primary); }
 /* Logical corner radii and insets mirror the curved tail in RTL. */
 
 .hjm-chat-message__meta { display: flex; flex-shrink: 0; align-items: center; gap: var(--hjm-space-xs); }
@@ -3556,8 +3559,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 @media (prefers-reduced-motion: reduce) { .hjm-typing-indicator__dot { animation: none; } }
 @keyframes hjm-typing-pulse { 0%, 100% { opacity: var(--hjm-typing-rest); } 50% { opacity: 1; } }
 /* A quoted reply heads the bubble and is divided from the answer. */
-.hjm-chat-message__reply { border-block-end: 1px solid var(--hjm-color-border); padding-block-end: var(--hjm-space-xs); margin-block-end: var(--hjm-space-xs); display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
-.hjm-chat-message__quote { inline-size: 100%; border-inline: 0; border-block-start: 0; background: none; padding-inline: 0; padding-block-start: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__reply { border-color: var(--hjm-color-on-primary); }
+.hjm-chat-message__reply { border-inline-start: 3px solid var(--hjm-color-content-brand); padding-inline-start: var(--hjm-space-xs); margin-block-end: var(--hjm-space-xs); display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
+.hjm-chat-message__quote { inline-size: 100%; border-inline-end: 0; border-block: 0; background: none; padding-inline-end: 0; padding-block-start: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
 .hjm-chat-message__quote:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
 .hjm-chat-message__quote-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hjm-chat-message__media { display: grid; border-radius: 14px; overflow: hidden; max-inline-size: 100%; }
@@ -3965,4 +3969,19 @@ button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm
 .hjm-surface[data-tone="selected"][data-bordered="true"] { border-color: var(--hjm-color-border-control); }
 .hjm-data-table__table tr[aria-selected="true"] > :is(td, th) { background-color: var(--hjm-color-surface-selected); }
 
+/* Borrow room-info hierarchy only; canvas and surfaces follow the HJM/product theme. */
+.hjm-chat-room { background:var(--hjm-color-bg); padding:var(--hjm-space-md); }
+.hjm-chat-room__group { background:var(--hjm-color-surface); padding:var(--hjm-space-md); border-radius:var(--hjm-radius-lg); }
+.hjm-chat-room__tools { display:flex; gap:var(--hjm-space-xs); }
+.hjm-chat-room__tool { flex:1; min-width:0; min-height:64px; border:0; border-radius:var(--hjm-radius-md); padding:var(--hjm-space-xs); background:var(--hjm-color-surface); color:var(--hjm-color-content-brand); cursor:pointer; }
+.hjm-chat-room__tool:focus-visible { outline:2px solid var(--hjm-color-content-brand); outline-offset:2px; }
+.hjm-chat-room__tool:disabled { cursor:default; opacity:.6; }
+
+/* Telegram quoted replies carry an inset tint as well as the leading rail. */
+.hjm-chat-message__reply { padding:var(--hjm-space-xs); border-radius:var(--hjm-radius-sm); background:color-mix(in srgb,var(--hjm-color-content-brand) 12%,transparent); }
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__reply { background:color-mix(in srgb,var(--hjm-color-on-primary) 12%,transparent); }
+
+.hjm-chat-room__photo { display:block; padding:0; border:0; background:transparent; border-radius:50%; cursor:pointer; color:inherit; }
+.hjm-chat-room__photo:focus-visible { outline:2px solid var(--hjm-color-content-brand); outline-offset:2px; }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/react",
-  "version": "1.42.0",
+  "version": "1.43.0",
   "description": "Accessible React 19 renderers for HJM design contracts.",
   "license": "MIT",
   "publishConfig": {
@@ -623,7 +623,7 @@
     "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
-    "@hjmds/design-contracts": ">=1.42.0 <1.43.0",
+    "@hjmds/design-contracts": ">=1.43.0 <1.44.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "@number-flow/react": "0.6.2",
@@ -661,7 +661,7 @@
     "@blobatar/react": "2.7.0",
     "lucide-react": "1.59.0",
     "vite": "8.3.4",
-    "@hjmds/design-contracts": "1.42.0"
+    "@hjmds/design-contracts": "1.43.0"
   },
   "peerDependenciesMeta": {
     "@number-flow/react": {