anentrypoint-design 0.0.230 → 0.0.231

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.230",
+  "version": "0.0.231",
   "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/components/chat.js

@@ -8,6 +8,12 @@ import { isDegraded as isMarkdownDegraded } from '../markdown.js';
 import { register } from '../debug.js';
 import { Icon } from './shell.js';
 import { fmtFileSize } from './files.js';
+import { EmojiPicker } from './overlay-primitives.js';
+
+// Matches a trailing `:keyword` at the end of the composer draft (optionally
+// preceded by whitespace/start-of-string) so typing `:smile` opens an inline
+// filtered EmojiPicker without requiring the toolbar button or Ctrl+;.
+const EMOJI_TRIGGER_RE = /(?:^|\s)(:([a-zA-Z0-9_+-]{0,24}))$/;
 
 const h = webjsx.createElement;
 let _stats = { messages: 0, lastKindCounts: {} };
@@ -447,6 +453,24 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         if (!v || disabled) return;
         if (onSend) onSend(v);
     };
+    const triggerMatch = EMOJI_TRIGGER_RE.exec(value || '');
+    // taEl is only assigned by taRef during DOM diffing, which happens AFTER
+    // this render function returns — so on first paint of a trigger it is
+    // still null here. Fall back to the live DOM textarea from the previous
+    // paint (same composer, content patched in place) so the picker anchors
+    // near the input instead of the viewport origin.
+    const anchorEl = taEl || (typeof document !== 'undefined' ? document.querySelector('.chat-composer textarea') : null);
+    const insertEmoji = (ch) => {
+        const v = (taEl && taEl.value) || value || '';
+        const m = EMOJI_TRIGGER_RE.exec(v);
+        const next = m ? (v.slice(0, m.index) + (m[0].startsWith(':') ? '' : v[m.index]) + ch + ' ') : (v + ch);
+        if (onInput) onInput(next);
+        if (taEl) {
+            taEl.value = next;
+            taEl.focus();
+            taEl.selectionStart = taEl.selectionEnd = next.length;
+        }
+    };
     let autoGrowScheduled = false;
     const autoGrow = (e) => {
         const ta = e.target;
@@ -517,6 +541,14 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         }, joined);
     }
     const hasDraft = !!(value && value.trim());
+    const triggerPicker = triggerMatch ? EmojiPicker({
+        open: true,
+        anchorX: (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect().left : 0,
+        anchorY: (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect().top : 0,
+        query: triggerMatch[2] || '',
+        onSelect: (ch) => insertEmoji(ch),
+        onClose: () => { if (taEl) { const v = taEl.value.replace(EMOJI_TRIGGER_RE, (full, tail) => full.slice(0, full.length - tail.length)); if (onInput) onInput(v); taEl.value = v; taEl.focus(); } },
+    }) : null;
     return h('div', {
         class: 'chat-composer' + (hasDraft ? ' has-draft' : '') + (disabled ? ' is-disabled' : ''),
         // A drop on the composer must NEVER navigate the browser away from the
@@ -535,6 +567,7 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         },
     },
         contextLine,
+        triggerPicker,
         h('textarea', { ref: taRef, placeholder, rows: 1,
             'aria-label': label || (disabled && disabledReason ? 'message input — ' + disabledReason : 'message input'),
             disabled: !!disabled, 'aria-disabled': disabled ? 'true' : null,

package/src/components/overlay-primitives.js

@@ -375,14 +375,38 @@ export function CommandPalette({ open, items = [], onSelect, onClose } = {}) {
 // per-emoji <button> labels below. This is intentional product content, not
 // decorative chrome.
 const EMOJI_CATEGORIES = [
-    { id: 'smileys', label: '😀', emoji: ['😀','😁','😂','🤣','😊','😍','😘','😎','🤔','😅','😉','🙂','😇','🥳','😴','🤩','😜','😢','😭','😡','😱','🥺','😤','😬'] },
-    { id: 'gestures', label: '👍', emoji: ['👍','👎','👌','✌️','🤞','🙏','👏','🙌','💪','👀','🤝','✋','🤙','👋','🤟','☝️'] },
-    { id: 'hearts', label: '❤️', emoji: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','💔','💕','💖','💗'] },
-    { id: 'symbols', label: '✅', emoji: ['🔥','💯','✅','❌','⭐','🎉','🎊','✨','💡','⚡','💢','💀','🚀','🏆'] },
+    { id: 'smileys', label: '😀', emoji: [
+        ['😀', 'grinning smile'], ['😁', 'grinning smile happy'], ['😂', 'joy tears laugh'], ['🤣', 'rofl laugh'],
+        ['😊', 'smile blush happy'], ['😍', 'heart eyes love'], ['😘', 'kiss'], ['😎', 'cool sunglasses'],
+        ['🤔', 'thinking'], ['😅', 'sweat smile'], ['😉', 'wink'], ['🙂', 'smile slight'],
+        ['😇', 'angel innocent'], ['🥳', 'party'], ['😴', 'sleep'], ['🤩', 'starstruck'],
+        ['😜', 'wink tongue'], ['😢', 'cry sad'], ['😭', 'sob cry'], ['😡', 'angry mad'],
+        ['😱', 'scream shock'], ['🥺', 'pleading'], ['😤', 'huff'], ['😬', 'grimace'],
+    ] },
+    { id: 'gestures', label: '👍', emoji: [
+        ['👍', 'thumbsup yes good'], ['👎', 'thumbsdown no bad'], ['👌', 'ok'], ['✌️', 'peace'],
+        ['🤞', 'fingers crossed'], ['🙏', 'pray thanks'], ['👏', 'clap'], ['🙌', 'raised hands'],
+        ['💪', 'muscle strong'], ['👀', 'eyes look'], ['🤝', 'handshake'], ['✋', 'hand stop'],
+        ['🤙', 'call'], ['👋', 'wave hi bye'], ['🤟', 'love you'], ['☝️', 'point up'],
+    ] },
+    { id: 'hearts', label: '❤️', emoji: [
+        ['❤️', 'heart love red'], ['🧡', 'heart orange'], ['💛', 'heart yellow'], ['💚', 'heart green'],
+        ['💙', 'heart blue'], ['💜', 'heart purple'], ['🖤', 'heart black'], ['🤍', 'heart white'],
+        ['💔', 'broken heart'], ['💕', 'hearts'], ['💖', 'sparkling heart'], ['💗', 'growing heart'],
+    ] },
+    { id: 'symbols', label: '✅', emoji: [
+        ['🔥', 'fire lit'], ['💯', 'hundred'], ['✅', 'check yes done'], ['❌', 'cross no'],
+        ['⭐', 'star'], ['🎉', 'party tada'], ['🎊', 'confetti'], ['✨', 'sparkles'],
+        ['💡', 'idea lightbulb'], ['⚡', 'zap lightning'], ['💢', 'anger'], ['💀', 'skull dead'],
+        ['🚀', 'rocket launch'], ['🏆', 'trophy win'],
+    ] },
 ];
+const ALL_EMOJI = EMOJI_CATEGORIES.flatMap((c) => c.emoji);
 
 // EmojiPicker — fixed popover near (anchorX, anchorY) with category tabs + grid.
-export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose } = {}) {
+// `query`, when non-empty, filters across all categories by name/keyword
+// substring match (case-insensitive) instead of showing the active tab.
+export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose, query = '' } = {}) {
     if (!open) return null;
     let cat = EMOJI_CATEGORIES[0].id;
     let rootEl = null, gridEl = null;
@@ -390,12 +414,15 @@ export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose
 
     const renderGrid = () => {
         if (!gridEl) return;
-        const c = EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0];
+        const q = (query || '').trim().toLowerCase();
+        const cells = q
+            ? ALL_EMOJI.filter(([, name]) => name.toLowerCase().includes(q))
+            : (EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0]).emoji;
         webjsx.applyDiff(gridEl, h('div', { class: 'ov-emoji-grid-inner' },
-            ...c.emoji.map((ch) => h('button', {
-                type: 'button', class: 'ov-emoji-cell', 'aria-label': ch,
+            cells.length ? cells.map(([ch, name]) => h('button', {
+                type: 'button', class: 'ov-emoji-cell', 'aria-label': name || ch, title: name || ch,
                 onclick: () => { if (onSelect) onSelect(ch); },
-            }, ch))));
+            }, ch)) : h('div', { class: 'ov-emoji-empty' }, 'no emoji found')));
     };
 
     const tabNavKey = (e) => {
@@ -420,7 +447,7 @@ export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose
             el._ovEmojiCleanup = _anchoredOverlayLifecycle(el, { anchorX, anchorY, fallbackW: 260, fallbackH: 240, close });
         },
     },
-        h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
+        (query || '').trim() ? null : h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
             ...EMOJI_CATEGORIES.map((c) => h('button', {
                 type: 'button', class: 'ov-emoji-tab', role: 'tab',
                 'aria-selected': c.id === cat ? 'true' : 'false',