@sakaniui/react 0.8.13 → 0.10.0

package/AGENTS.md

@@ -16,7 +16,7 @@ import manifest from '@sakaniui/react/manifest.json';
 const button = manifest.components.find((c) => c.name === 'Button'); // props[], contract.requiredProps
 ```
 Editors can query the same data through the bundled MCP server
-(`npx -y @sakaniui/mcp`): `search_components`, `get_component`, `search_icons`,
+(`npx -y @sakaniui/mcp`): `search_components`, `get_component`, `search_icons`, `search_emoji`,
 `check_code`, `check_usage`, `get_tokens`, `get_guide`, `check_compatibility`, `get_changelog`.
 
 **Object props have a shape.** A prop such as `columns`, `items`, `options`, `plans` or `data` takes an array
@@ -78,7 +78,7 @@ import { Button, Card } from '@sakaniui/react';
    (`aria-label`, or `label` on `socialLinks`). Status changes use live regions (`Alert`, `Toast`,
    `Spinner`, `EmptyState` are `role="status"`/`alert`). Never remove focus rings.
 7. **Don't fake what the system doesn't do.** `Toast` is presentational — you own queueing and
-   positioning. `Menu` is a surface — you own anchoring (pair it with `Popover`). Dragging is a
+   positioning (for a ready-made stack, use `Toaster` and `toast()`). `Menu` is a surface — you own anchoring (pair it with `Popover`). Dragging is a
    look, not a behaviour. Check "Behaviour you must supply" in the table below before assuming.
 8. **Compose in slots, don't fork.** Components expose slots (`leading`, `trailing`, `meta`,
    `assignees`, `icon`, `actions`). Fill a slot with other system components rather than copying a
@@ -148,12 +148,27 @@ CSS of a component into your own file.
 - Component props that take an icon (`icon`, `leftIcon` ...) take the component itself, typed
   `IconComponent`; Sakani, Lucide and Tabler React icons all fit.
 
+## 4d. Emoji
+
+- Full-colour emoji (Fluent Emoji, Flat) live in `@sakaniui/react/emoji`, one component per emoji:
+  `EmojiRocket`, `EmojiPartyPopper`, `EmojiWavingHand` (1,594 emoji; names are `Emoji` + PascalCase of the
+  Unicode name, so find them with `search_emoji` instead of guessing). Each is tree-shaken on its own.
+- They are pictures, not icons: render them as elements (`<EmojiRocket />`), never pass them to an `icon`
+  prop, and do not expect `currentColor` (they keep their own colours). Use an icon for UI chrome and an
+  emoji for expression: reactions, empty states, celebration, user-chosen labels.
+- 311 people and hand emoji take `tone`: `<EmojiWavingHand tone="medium-dark" />` (`light`, `medium-light`,
+  `medium`, `medium-dark`, `dark`). Emoji with tones weigh more (about 16 kB) because all six tones ship in
+  the module; the others are about 2 kB.
+- Props: `size` (default 24; `'1em'` follows the text), `tone`, `title`. Without `title` the emoji is
+  decorative (`aria-hidden`); add `title` when it carries meaning alone. `emojiCatalog` lists every emoji
+  with its label, Unicode character and category, for pickers and search.
+
 ## 5. Component guide — what it's for, why it behaves that way, when not to use it
 
 Format: **Use for** · **Why it is built this way** · **Not for / instead**.
 
 **Looking for a component by another name?** SakaniUI uses its own names. A *dialog* or *alert dialog* is
-`Modal`; a *snackbar* is `Toast`; a *dropdown menu* is `Menu`; a *navbar* or *app bar* is `TopBar`; a
+`Modal`; a *snackbar* is `Toast` (or `Toaster` + `toast()` for a managed stack); a *dropdown menu* is `Menu`; a *navbar* or *app bar* is `TopBar`; a
 *date picker* is `Calendar`; a *loader* is `Spinner`; a *toggle* is `Switch`; a *banner* is `Announcement`;
 *autocomplete* is `Combobox`. There is no `Dialog`, `AlertDialog`, `Snackbar` or `Navbar`. Each component
 lists its other names under `aliases` in `manifest.json`, and `search_components` understands them.
@@ -174,6 +189,11 @@ lists its other names under `aliases` in `manifest.json`, and `search_components
 - **Toast** — Use for short-lived confirmation or error after an action. *Why:* presentational only;
   queueing and positioning are the app's job, so it fits any notification system. *Not for* anything the user
   must act on — a toast disappears.
+- **Toaster + toast()** — Use for notifications you trigger from code: mount one `<Toaster />`, call
+  `toast.success('Saved')` from anywhere. *Why:* it owns queueing, position (6), the 4s timer, the pile that
+  spreads on hover and swipe-to-dismiss, so the app does not. `toast.promise` turns one toast from loading
+  into success or error. *Not for* anything the user must act on — a toast disappears; a plain static card
+  → `Toast`. Needs `Toaster` mounted once, and `toast()` is a function, not a component.
 - **Badge** — Use for a short status, category or count. *Why:* 6 colours × subtle/solid, no sizes, no
   borders — it is a label, not a control. *Not for* clickable filters → `FilterChip`.
 - **Tooltip** — Use for brief supplementary text on hover/focus. *Why:* pure CSS, so it works with
@@ -261,7 +281,8 @@ and **tell the user when you are composing** rather than implying a dedicated co
 
 | Component | You own |
 |---|---|
-| Toast | queueing, positioning, auto-dismiss timing |
+| Toast | queueing, positioning, auto-dismiss timing (or use `Toaster`) |
+| Toaster | mounting it once; it handles the rest |
 | Menu | anchoring/positioning (pair with Popover) |
 | BoardCard `dragging` | drag-and-drop logic and drop targets |
 | BoardColumn `loading` | the skeleton cards inside it |

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 0.10.0
+
+- **New: `@sakaniui/react/emoji`**, 1,594 full-colour emoji (Fluent Emoji, Flat style, by Microsoft, MIT), built
+  from the new *↳ Emoji* page in Figma. One component per emoji, tree-shaken on its own:
+  `<EmojiRocket />`, `<EmojiPartyPopper size={32} />`.
+  - 311 people and hand emoji take a skin tone: `<EmojiWavingHand tone="medium-dark" />`
+    (`light`, `medium-light`, `medium`, `medium-dark`, `dark`).
+  - Props: `size` (default 24, `'1em'` follows the text), `tone`, `title` (without it the emoji is decorative).
+  - `emojiCatalog`, `emojiCategories` and `emojiNames` list every emoji with its label, Unicode character and
+    category, for pickers and search; `createEmoji` builds one from your own artwork.
+  - The docs *Icons* page is now *Icons & emoji*, with a searchable emoji gallery (category, skin tone, copy
+    JSX or the character).
+- Agent contract: the MCP server has a new `search_emoji` tool, `check_code` validates imports from
+  `@sakaniui/react/emoji`, and `emoji-index.json` ships next to `icon-index.json`.
+- Licence notice for Fluent Emoji added to `THIRD_PARTY_NOTICES.md`.
+
+## 0.9.0
+
+- **New: `Toaster` and `toast()`**, a managed toast stack (Sonner-style) built from the new *↳ Sonner* page in Figma.
+  Mount one `<Toaster />`, then call `toast()`, `toast.success()`, `.info()`, `.warning()`, `.error()`,
+  `.loading()`, `.promise()` and `.dismiss()` from anywhere.
+  - New toasts rise in from the edge; older ones pile up behind the newest (lifted 14px, shrunk 5% per level,
+    content hidden, three visible). Hover or focus spreads the pile into a list and pauses the 4s timers;
+    leaving folds it back. Swipe a toast towards its edge to dismiss it (past 45px, or a quick flick, it flies
+    out in 200ms; otherwise it springs back in 400ms). Motion is 400ms `ease`.
+  - Options per toast: `description`, `icon`, `action`, `cancel`, `closeButton`, `duration`, `dismissible`,
+    `richColors`, `id` (update in place), `onDismiss`, `onAutoClose`. On `Toaster`: `position` (six),
+    `richColors`, `closeButton`, `expand`, `visibleToasts`, `duration`, `gap`, `offset`, `mobileOffset`,
+    `hotkey` (alt+T focuses the stack; Escape folds it).
+  - Light, dark and glass surfaces through the existing tokens; reduced motion keeps the fades only; errors
+    are announced assertively.
+  - The existing `Toast` is unchanged: it stays the static, presentational card.
+- Agent contract: `Toaster` is in the manifest with recipes (show a toast, a promise toast) and the aliases
+  *sonner*, *toast stack*, *toast provider*. (`toaster` now means this component, not `Toast`.)
+
 ## 0.8.13
 
 A user reported the MCP server "didn't work". Reproduced: on a Node older than 16.9 the server connected

package/README.md

@@ -1,6 +1,6 @@
 # SakaniUI
 
-An open-source, token-driven React component library for SaaS products — **1,500+ accessible components and variants**, built 1:1 from a Figma design system, across light and dark modes, with **built-in glass and Apple-style liquid glass surfaces**.
+An open-source, token-driven React component library for SaaS products — **1500+ accessible components and variants**, built 1:1 from a Figma design system, across light and dark modes, with **built-in glass and Apple-style liquid glass surfaces**.
 
 **[Live Storybook →](https://main--6a5a658b3681fcc010430db5.chromatic.com)** · **[Figma file →](https://www.figma.com/community/file/1661001585975776295)**
 
@@ -10,14 +10,14 @@ An open-source, token-driven React component library for SaaS products — **1,5
 
 ## Why SakaniUI
 
-Most component libraries start in code and retrofit the design. SakaniUI was built the other way: every component is designed first in Figma with a strict three-layer token architecture, then implemented 1:1 in React — same variants, same states, same tokens. The Figma file has grown into a 1,500+ component-and-variant system across light and dark mode; the React library mirrors it component by component, with new ones landing as they're built out.
+Most component libraries start in code and retrofit the design. SakaniUI was built the other way: every component is designed first in Figma with a strict three-layer token architecture, then implemented 1:1 in React — same variants, same states, same tokens. The Figma file has grown into a 1500+ component-and-variant system across light and dark mode; the React library mirrors it component by component, with new ones landing as they're built out.
 
 - **Token-driven** — components bind only to semantic tokens (`bg/surface`, `fg/muted`, `accent/default`…), so the entire library re-themes from one place
 - **Light & dark mode** — add the `.dark` class to any container; every component re-themes automatically, no per-component dark styles
 - **Glass & liquid glass** — a third theme axis, *Surface* (Solid · Glass · Liquid): frosted glassmorphism and Apple-style liquid glass with real lens refraction, switched per area with one attribute — see [Glass & liquid glass](#glass--liquid-glass)
 - **Accessible by default** — WCAG AA contrast audited, global focus-ring system, `prefers-reduced-motion` support, full ARIA semantics (combobox active-descendant, calendar date labels, live-region toasts, focus-return popovers)
 - **Typed & composable** — strict TypeScript, generic `Table<T>`, slot-based composition, controlled + uncontrolled patterns
-- **Geist typography** and **Tabler Icons** (5,184 outline + 1,054 filled), matching the Figma source exactly
+- **Geist typography**, **Tabler Icons** (5,184 outline + 1,054 filled) and **Fluent Emoji** (1,594, 311 with skin tones), matching the Figma source exactly
 
 
 ## Icons
@@ -37,6 +37,22 @@ Names follow Tabler (`IconName` / `IconNameFilled`), so tabler.io/icons is the s
 lucide-react (`size`, `color`, `strokeWidth`), and every component prop that takes an icon still
 accepts Lucide or Tabler React icons. See `THIRD_PARTY_NOTICES.md` for the MIT licence.
 
+## Emoji
+
+Full-colour emoji from [Fluent Emoji](https://github.com/microsoft/fluentui-emoji) (Flat style, MIT): 1,594
+of them, the same as the Figma *↳ Emoji* page. One component per emoji, tree-shaken individually:
+
+```tsx
+import { EmojiRocket, EmojiPartyPopper, EmojiWavingHand } from '@sakaniui/react/emoji';
+
+<EmojiRocket />                              {/* 24px */}
+<EmojiPartyPopper size={32} />
+<EmojiWavingHand tone="medium-dark" />       {/* 311 people and hand emoji take a skin tone */}
+<EmojiRocket size="1em" />                   {/* follows the surrounding text */}
+```
+
+`emojiCatalog` lists every emoji with its label, Unicode character and category, for pickers and search.
+
 ## Install
 
 ```bash
@@ -141,7 +157,7 @@ or `claude mcp add sakaniui -- cmd /c npx -y @sakaniui/mcp`). Needs Node.js 18 o
 
 The server is its own tiny package, [`@sakaniui/mcp`](https://www.npmjs.com/package/@sakaniui/mcp) (about 1 MB, starts in a couple of seconds; it does not install the component library). The copy bundled in `@sakaniui/react` (`npx -y -p @sakaniui/react sakaniui-mcp`) still works but downloads far more.
 
-Tools: `search_components`, `get_component` (with a type-checked `example`), `search_icons`,
+Tools: `search_components`, `get_component` (with a type-checked `example`), `search_icons`, `search_emoji`,
 `check_code` (checks a whole snippet: imports, required props, values, icon names, and the field names of object props such as table columns), `check_usage`,
 `list_components`, `get_tokens`, `get_guide`, `check_compatibility` and `get_changelog`.
 
@@ -256,13 +272,13 @@ Three layers, defined in Figma and exported to `tokens.css`:
 
 Change a semantic token and every component follows — in both the design file and the code.
 
-## Components (114+, syncing toward Figma's 1,500+)
+## Components (1500+ components and variants)
 
 **Core** — Button · Icon Button · Badge · Label · Divider · Link · Kbd · Spinner · Skeleton · Progress · Tooltip · Avatar · Avatar Group
 
 **Forms** — Input · Textarea · Select · Checkbox · Radio · Switch · Slider · Combobox (single/multi, async loading) · File Upload
 
-**Composite** — Card · Alert · Toast · Accordion · Tabs · Breadcrumb · Table (generic, selectable) · Stat Card (sparklines) · Stepper · Calendar (single + range, dropdown navigation) · Pagination · Popover · Segmented Control · List Item
+**Composite** — Card · Alert · Toast · Toaster (Sonner-style `toast()` stack) · Accordion · Tabs · Breadcrumb · Table (generic, selectable) · Stat Card (sparklines) · Stepper · Calendar (single + range, dropdown navigation) · Pagination · Popover · Segmented Control · List Item
 
 **Sidebar kit** — Sidebar · Header · Search · Item · Sub Item · Group Label · Divider · Promo · Footer — nine standalone parts that compose into full navigation
 

package/THIRD_PARTY_NOTICES.md

@@ -29,3 +29,33 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
+
+## Fluent Emoji
+
+The emoji set (`@sakaniui/react/emoji`) is Fluent Emoji (Flat style) by Microsoft
+(https://github.com/microsoft/fluentui-emoji), taken from the `@iconify-json/fluent-emoji-flat` data
+package. It is distributed under the MIT licence below, which is reproduced as it requires.
+
+```
+MIT License
+
+Copyright (c) Microsoft Corporation.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/bin/sakaniui-mcp.mjs

@@ -42,7 +42,7 @@ const readJson = (root, rel) => { try { return JSON.parse(readText(root, rel));
 function loadInstall(root) {
   const pkg = readJson(root, 'package.json');
   if (!pkg || pkg.name !== '@sakaniui/react') return null;
-  return { root, version: pkg.version, manifest: readJson(root, 'dist/manifest.json'), icons: readJson(root, 'dist/icon-index.json'), guide: readText(root, 'AGENTS.md'), changelog: readText(root, 'CHANGELOG.md') };
+  return { root, version: pkg.version, manifest: readJson(root, 'dist/manifest.json'), icons: readJson(root, 'dist/icon-index.json'), emoji: readJson(root, 'dist/emoji-index.json'), guide: readText(root, 'AGENTS.md'), changelog: readText(root, 'CHANGELOG.md') };
 }
 
 function findProjectInstall() {
@@ -93,6 +93,7 @@ const manifest = active.manifest;
 const guide = active.guide || bundled.guide || '';
 const changelog = active.changelog || bundled.changelog || '';
 const iconIndex = (active.icons && active.icons.icons) || (bundled.icons && bundled.icons.icons) || [];
+const emojiIndex = (active.emoji && active.emoji.emoji) || (bundled.emoji && bundled.emoji.emoji) || [];
 const projectVersion = project ? project.version : null;
 
 // The HTML attributes React accepts (shipped in the manifest since 0.8.10; older manifests use the fallback list).
@@ -312,6 +313,34 @@ function iconProblem(propName, raw, importedElsewhere = new Set(), localNames =
   return `"${v}" is not a SakaniUI icon.${hint.length ? ` Did you mean: ${hint.join(', ')}?` : ''} Use search_icons to find the real name.`;
 }
 
+/* ---------- emoji ---------- */
+const emojiNames = new Set(emojiIndex.map((e) => e.name));
+const emojiOtherExports = new Set(((active.emoji && active.emoji.other) || (bundled.emoji && bundled.emoji.other)) || []);
+const EMOJI_SINCE = '0.10.0';
+const emojiWords = (name) => name.replace(/^Emoji/, '').replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Za-z])(\d)/g, '$1 $2').toLowerCase();
+
+function searchEmoji(query, limit = 12) {
+  const terms = String(query).toLowerCase().replace(/emoji/g, ' ').split(/[^a-z0-9]+/).filter(Boolean);
+  if (!terms.length) return [];
+  return emojiIndex
+    .map((e) => {
+      const words = emojiWords(e.name).split(' ');
+      let s = 0;
+      for (const t of terms) {
+        if (words.join(' ') === t) s += 30;
+        else if (words[0] === t) s += 12;
+        else if (words.includes(t)) s += 8;
+        else if (words.some((w) => w.startsWith(t))) s += 4;
+        if ((e.category || '').toLowerCase().includes(t)) s += 1;
+      }
+      return [s - words.length * 0.1, e];
+    })
+    .filter(([s]) => s > 0.5)
+    .sort((a, b) => b[0] - a[0])
+    .slice(0, limit)
+    .map(([, e]) => e);
+}
+
 // Attributes every component forwards to its root element. A prop outside this list and the contract is worth a warning.
 const NATIVE_FALLBACK = /^(className|style|id|ref|key|children|role|tabIndex|title|hidden|lang|dir|slot|on[A-Z].*|aria-.*|data-.*|href|target|rel|download|name|type|value|defaultValue|checked|defaultChecked|disabled|required|readOnly|placeholder|htmlFor|form|autoFocus|autoComplete|autoCapitalize|spellCheck|inputMode|pattern|min|max|step|minLength|maxLength|rows|cols|multiple|accept|src|srcSet|alt|width|height|loading|draggable|tabindex|ariaLabel)$/;
 
@@ -461,15 +490,26 @@ function checkCode(source) {
   for (const imp of imports) {
     if (!imp.from.startsWith('@sakaniui/react')) continue;
     const entry = imp.from;
-    if (!['@sakaniui/react', '@sakaniui/react/blocks', '@sakaniui/react/icons'].includes(entry)) {
-      if (imp.names.length) errors.push({ line: imp.line, message: `"${entry}" has no named exports. Import components from @sakaniui/react, blocks from @sakaniui/react/blocks and icons from @sakaniui/react/icons.` });
+    if (!['@sakaniui/react', '@sakaniui/react/blocks', '@sakaniui/react/icons', '@sakaniui/react/emoji'].includes(entry)) {
+      if (imp.names.length) errors.push({ line: imp.line, message: `"${entry}" has no named exports. Import components from @sakaniui/react, blocks from @sakaniui/react/blocks icons from @sakaniui/react/icons and emoji from @sakaniui/react/emoji.` });
       continue;
     }
     if (imp.def) errors.push({ line: imp.line, message: `${entry} has no default export; use a named import: import { ${imp.def} } from '${entry}';` });
     for (const n of imp.names) {
       if (n.typeOnly) continue;
-      const c = byName.get(n.imported.toLowerCase());
-      const isUtility = manifest.utilities?.some((u) => u.name === n.imported);
+      const util = manifest.utilities?.find((u) => u.name === n.imported);
+      const isUtility = !!util;
+      // an exact helper name (toast) is not a mis-cased component (Toast)
+      const c = isUtility ? undefined : byName.get(n.imported.toLowerCase());
+      if (entry === '@sakaniui/react/emoji') {
+        if (!emojiNames.has(n.imported) && !emojiOtherExports.has(n.imported)) {
+          const hint = searchEmoji(n.imported, 3).map((e) => e.name);
+          errors.push({ line: imp.line, message: `${n.imported} is not exported by @sakaniui/react/emoji.${hint.length ? ` Did you mean: ${hint.join(', ')}?` : ''} Use search_emoji to find the real name.` });
+        } else if (inInstalled({ since: EMOJI_SINCE }) === false) {
+          errors.push({ line: imp.line, message: `@sakaniui/react/emoji was added in ${EMOJI_SINCE}; the project has ${projectVersion}.` });
+        }
+        continue;
+      }
       if (entry === '@sakaniui/react/icons') {
         if (!iconNames.has(n.imported) && !iconOtherExports.has(n.imported)) {
           const hint = searchIcons(n.imported, 3).map((i) => i.name);
@@ -489,6 +529,7 @@ function checkCode(source) {
         errors.push({ line: imp.line, message: `${n.imported} is not exported by @sakaniui/react.${aliasHint(n.imported)}${near.length ? ` Did you mean: ${near.join(', ')}?` : ''} Use search_components.` });
       }
       if (c && inInstalled(c) === false) errors.push({ line: imp.line, message: `${c.name} was added in ${c.since}; the project has ${projectVersion}.` });
+      if (util && inInstalled(util) === false) errors.push({ line: imp.line, message: `${util.name} was added in ${util.since}; the project has ${projectVersion}.` });
     }
   }
 
@@ -784,8 +825,20 @@ const tools = {
       return text({ import: "import { IconName } from '@sakaniui/react/icons';", usage: 'icon={IconName} (the component, not <IconName />)', icons: hits });
     },
   },
+  search_emoji: {
+    description: 'Find real emoji component names (Fluent Emoji, exported from @sakaniui/react/emoji) by meaning, e.g. "rocket", "party", "thumbs up". Emoji are full colour and rendered as elements (<EmojiRocket />), not passed to icon props. Only names returned here exist.',
+    inputSchema: { type: 'object', properties: { query: { type: 'string' }, limit: { type: 'number' } }, required: ['query'] },
+    run(args) {
+      const q = strArg(args, 'query', { required: true }); if (q.err) return fail(q.err);
+      if (!emojiIndex.length) return fail('The emoji index is not available in this install (emoji arrived in 0.10.0).');
+      const limit = Number.isInteger(args.limit) ? Math.min(Math.max(args.limit, 1), 30) : 12;
+      const hits = searchEmoji(q.value, limit).map((e) => { const o = { name: e.name, label: e.label, char: e.char, category: e.category }; if (e.tones) o.tones = true; return o; });
+      if (!hits.length) return text(`No emoji matches "${q.value}". Try a simpler word (e.g. "party" rather than "celebration").`);
+      return text({ import: "import { EmojiName } from '@sakaniui/react/emoji';", usage: '<EmojiName size={24} /> (an element, not an icon prop). Where tones is true: tone="light" | "medium-light" | "medium" | "medium-dark" | "dark".', emoji: hits });
+    },
+  },
   check_code: {
-    description: 'Check a JSX/TSX snippet you wrote: imports from @sakaniui/react (and /blocks, /icons) must exist, every SakaniUI element must have its required props, prop values must be allowed, and icon props must be real icon components passed as components. The code is only read, never run. Run it on every snippet before you answer.',
+    description: 'Check a JSX/TSX snippet you wrote: imports from @sakaniui/react (and /blocks, /icons, /emoji) must exist, every SakaniUI element must have its required props, prop values must be allowed, and icon props must be real icon components passed as components. The code is only read, never run. Run it on every snippet before you answer.',
     inputSchema: { type: 'object', properties: { code: { type: 'string', description: 'The snippet, including its import lines.' } }, required: ['code'] },
     run(args) {
       const code = args.code;
@@ -836,7 +889,7 @@ function handle(msg) {
           protocolVersion: asked && PROTOCOL_VERSIONS.includes(asked) ? asked : PROTOCOL_VERSIONS[0],
           capabilities: { tools: { listChanged: false } },
           serverInfo: { name: 'sakaniui', title: 'SakaniUI', version: bundled.version }, // the server's own version, not the data's
-          instructions: `SakaniUI ${refVersion}${projectVersion ? ` (project has ${projectVersion})` : ''}. Read-only reference. Look components up with search_components / get_component and start from their \`example\`; find icon names with search_icons (never guess them); search by the name you would normally use (dialog, snackbar, navbar, date picker) and it maps to the real component; run check_code on every snippet before you answer; style anything beyond props with the design tokens from get_tokens (CSS variables), not hard-coded colours or utility classes the project may not have; read get_guide when nothing fits.${note ? ` ${note}` : ''}`,
+          instructions: `SakaniUI ${refVersion}${projectVersion ? ` (project has ${projectVersion})` : ''}. Read-only reference. Look components up with search_components / get_component and start from their \`example\`; find icon names with search_icons and emoji names with search_emoji (never guess them); search by the name you would normally use (dialog, snackbar, navbar, date picker) and it maps to the real component; run check_code on every snippet before you answer; style anything beyond props with the design tokens from get_tokens (CSS variables), not hard-coded colours or utility classes the project may not have; read get_guide when nothing fits.${note ? ` ${note}` : ''}`,
         } });
       }
       case 'ping':