anentrypoint-design 0.0.436 → 0.0.438

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.436",
+  "version": "0.0.438",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/community-app.js

@@ -8,7 +8,8 @@
 // Adapter contract (all fields optional; the app degrades when one is absent):
 //   adapter.get() -> snapshot {
 //     channels, categories, servers, currentChannel, currentServerId, homeMode,
-//     messages, chatInputValue, currentUser, userId,
+//     messages,  // each message may carry reactions: [{emoji, count, users?, you?}]
+//     chatInputValue, currentUser, userId,
 //     isConnected, voiceConnected, voiceChannelName, voiceConnectionState,
 //     voiceParticipants, micMuted, voiceDeafened,
 //     audioQueueItems, audioQueueCurrentId, audioQueuePaused,
@@ -24,6 +25,7 @@
 //     goHome(), openServers(), memberMenu(id, name, x, y),
 //     replaySegment(id), skipSegment(), pauseQueue(), resumeQueue(),
 //     setInput(v), startReply(msg), cancelReply(), deleteMessage(id),
+//     reactToMessage(id, authorUserId, emoji)  // optional; emoji defaults ('+') when omitted from the trigger
 //     createChannel()  // optional; when present + canManage, rail shows a "+" next to "rooms"
 //   }
 //   adapter.helpers = { avatarColor(id), initial(name), formatTime(ts) }
@@ -152,10 +154,11 @@ export function mountCommunityApp(root, adapter = {}) {
             const isYou = selfId && String(m.userId) === String(selfId);
             const reactions = Array.isArray(m.reactions) ? m.reactions.map(r => ({ emoji: r.emoji, count: r.count != null ? r.count : (r.users ? r.users.length : 1), you: !!(r.you || (r.users && selfId && r.users.includes(selfId))) })) : null;
             const msgActions = [
+                { label: 'react', title: 'react to ' + username + '\'s message', icon: 'smile', onClick: () => A.reactToMessage && A.reactToMessage(m.id, m.userId) },
                 { label: 'reply', title: 'reply to ' + username, icon: 'corner-up-left', onClick: () => A.startReply && A.startReply({ id: m.id, userId: m.userId, username, content: m.content }) },
                 isYou ? { label: 'delete', title: 'delete message', icon: 'trash', onClick: () => A.deleteMessage && A.deleteMessage(m.id) } : null,
             ].filter(Boolean);
-            return { key: m.id || ('m' + i), who: isYou ? 'you' : 'them', name: isYou ? null : username, avatar: initial(username), time: formatTime(m.timestamp), parts: partsFromMessage(m), reactions, actions: msgActions, receipt: isYou && m.read ? 'read' : (isYou && m.delivered ? 'delivered' : null) };
+            return { key: m.id || ('m' + i), who: isYou ? 'you' : 'them', name: isYou ? null : username, avatar: initial(username), time: formatTime(m.timestamp), parts: partsFromMessage(m), reactions, onToggleReaction: A.reactToMessage ? (emoji) => A.reactToMessage(m.id, m.userId, emoji) : null, actions: msgActions, receipt: isYou && m.read ? 'read' : (isYou && m.delivered ? 'delivered' : null) };
         });
     };
 

package/src/components/chat/message.js

@@ -13,7 +13,7 @@ import { countMessage, renderPart } from './stats.js';
 
 const h = webjsx.createElement;
 
-export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped, flat, error, onRetry }) {
+export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped, flat, error, onRetry, onToggleReaction }) {
     countMessage();
     // Support legacy 'who' prop, prefer 'role' with mapping:
     //   'user'      -> 'you'   (right-aligned, accent bubble)
@@ -77,7 +77,12 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
             // text. So the visible label/count stay in the accessibility tree
             // as content, and an .sr-only span supplies just the wording the
             // visuals imply but do not spell out.
-            ...reactions.map((r, i) => h('span', { class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i },
+            ...reactions.map((r, i) => h('button', {
+                type: 'button', class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i,
+                'aria-pressed': String(!!r.you),
+                title: (r.you ? 'remove your ' : 'add ') + r.emoji + ' reaction',
+                onclick: onToggleReaction ? (e) => { e.preventDefault(); onToggleReaction(r.emoji); } : undefined,
+            },
                 h('span', { class: 'e' }, r.emoji),
                 h('span', { class: 'n' }, String(r.count)),
                 h('span', { class: 'sr-only' }, ` ${String(r.count) === '1' ? 'reaction' : 'reactions'}${r.you ? ', you reacted' : ''}`))))

package/src/css/app-shell/chat-polish.css

@@ -357,12 +357,13 @@
   display: inline-flex; align-items: center; gap: var(--space-1);
   padding: var(--space-hair) var(--space-2); background: var(--bg-2);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: var(--r-pill); font-size: var(--fs-xs);
-  cursor: pointer; user-select: none;
+  border-radius: var(--r-pill); font-size: var(--fs-xs); font-family: inherit;
+  cursor: pointer; user-select: none; appearance: none;
   transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
   position: relative;
 }
 .chat-reactions .rxn:hover { background: var(--bg-3); transform: scale(1.06); }
+.chat-reactions .rxn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .chat-reactions .rxn.you {
   background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);

package/types/components.d.ts

@@ -838,6 +838,7 @@ export interface ChatMessageProps {
     flat?: any;
     error?: any;
     onRetry?: (...args: any[]) => any;
+    onToggleReaction?: (...args: any[]) => any;
 }
 export declare function ChatMessage(props?: ChatMessageProps): VNode;