@sveltia/ui 0.65.1 → 0.65.2

package/dist/components/emoji/emoji-suggestions.svelte

@@ -40,11 +40,17 @@
   } = $props();
 
   /**
-   * Estimated size of the dropdown, used to decide whether it fits below the caret. The width is
-   * also enforced in the stylesheet below.
+   * Width of the dropdown, also enforced in the stylesheet below.
    */
   const LIST_WIDTH = 280;
-  const LIST_MAX_HEIGHT = 280;
+  /**
+   * How many suggestions are visible at once. The rest are reached by scrolling.
+   */
+  const VISIBLE_ROWS = 5;
+  /**
+   * Height to assume until a row has been measured, so the first open is positioned sensibly.
+   */
+  const FALLBACK_MAX_HEIGHT = 180;
   /**
    * Gap between the dropdown and the caret, and the minimum margin to the viewport edges.
    */
@@ -93,6 +99,23 @@
 
   const open = $derived(!!trigger && !!candidates.length);
 
+  /**
+   * Height of one suggestion, measured rather than assumed so the dropdown still shows exactly
+   * {@link VISIBLE_ROWS} of them whatever the theme makes a row.
+   * @type {number}
+   */
+  let rowHeight = $state(0);
+  /**
+   * The dropdown’s own vertical padding and border, which sit outside the rows. `box-sizing` is
+   * `border-box`, so `max-height` has to cover them for the rows to get their full share.
+   * @type {number}
+   */
+  let listChrome = $state(0);
+
+  const listMaxHeight = $derived(
+    rowHeight ? rowHeight * VISIBLE_ROWS + listChrome : FALLBACK_MAX_HEIGHT,
+  );
+
   /**
    * Position of the dropdown, flipped above the caret and clamped to the viewport as needed.
    *
@@ -108,7 +131,7 @@
     const { innerWidth, innerHeight } = window;
     const spaceBelow = innerHeight - anchorRect.bottom;
     const spaceAbove = anchorRect.top;
-    const flipped = spaceBelow < LIST_MAX_HEIGHT + VIEWPORT_MARGIN && spaceAbove > spaceBelow;
+    const flipped = spaceBelow < listMaxHeight + VIEWPORT_MARGIN && spaceAbove > spaceBelow;
     const rtl = document.dir === 'rtl';
     const anchorLeft = rtl ? anchorRect.right - LIST_WIDTH : anchorRect.left;
 
@@ -120,7 +143,7 @@
       )}px`,
       maxHeight: `${Math.round(
         Math.min(
-          LIST_MAX_HEIGHT,
+          listMaxHeight,
           (flipped ? spaceAbove : spaceBelow) - LIST_OFFSET - VIEWPORT_MARGIN,
         ),
       )}px`,
@@ -247,11 +270,34 @@
     return true;
   };
 
-  // Move the dropdown to the top layer, so it’s not clipped by anything around the field
+  // Move the dropdown to the top layer, so it’s not clipped by anything around the field, then
+  // measure a row. The measurement has to happen after the popover is shown, because until then the
+  // element isn’t rendered at all and everything measures zero. A row’s height comes from the
+  // theme’s control height plus its padding, so it’s read back rather than assumed.
   $effect(() => {
-    if (listElement && !listElement.matches(':popover-open')) {
+    void candidates;
+
+    if (!listElement) {
+      return;
+    }
+
+    if (!listElement.matches(':popover-open')) {
       listElement.showPopover?.();
     }
+
+    const row = listElement.querySelector('.option');
+
+    if (row) {
+      const { paddingTop, paddingBottom, borderTopWidth, borderBottomWidth } =
+        getComputedStyle(listElement);
+
+      rowHeight = row.getBoundingClientRect().height;
+      listChrome =
+        Number.parseFloat(paddingTop) +
+        Number.parseFloat(paddingBottom) +
+        Number.parseFloat(borderTopWidth) +
+        Number.parseFloat(borderBottomWidth);
+    }
   });
 
   // Advertise that typing here can bring up predictions, for as long as the autocomplete is
@@ -301,11 +347,15 @@
     };
   });
 
-  // Keep the highlighted suggestion visible while the user arrows through a long list
+  // Keep the highlighted suggestion visible while the user arrows through a long list. The scroll
+  // has to be instant: an inherited `scroll-behavior: smooth` otherwise animates it, and the
+  // animation never lands while the list is in the top layer, leaving the highlight off screen.
   $effect(() => {
     void selectedIndex;
 
-    listElement?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' });
+    listElement
+      ?.querySelector('[aria-selected="true"]')
+      ?.scrollIntoView({ block: 'nearest', behavior: 'instant' });
   });
 
   onMount(() => {
@@ -323,12 +373,35 @@
       }
     };
 
+    /**
+     * Dismiss the list when the user presses somewhere else on the page.
+     *
+     * The popover is `manual` rather than `auto`, so the platform’s own light dismiss is off: an
+     * `auto` popover also closes itself on Escape, which would fight the Escape handling here, and
+     * it would close on a press inside the field the list belongs to, where the caret moving is
+     * what should decide. This covers the one behavior worth borrowing.
+     * @param {PointerEvent} event `pointerdown` event.
+     */
+    const onPointerDown = ({ target }) => {
+      const node = /** @type {Node} */ (target);
+
+      // A press on the list is a choice, not a dismissal, and this runs before the option’s own
+      // handler; a press in the field is left to the caret to sort out
+      if (!open || listElement?.contains(node) || ariaOwner?.contains(node)) {
+        return;
+      }
+
+      close();
+    };
+
     window.addEventListener('scroll', reposition, { capture: true, passive: true });
     window.addEventListener('resize', reposition, { passive: true });
+    document.addEventListener('pointerdown', onPointerDown, { capture: true });
 
     return () => {
       window.removeEventListener('scroll', reposition, { capture: true });
       window.removeEventListener('resize', reposition);
+      document.removeEventListener('pointerdown', onPointerDown, { capture: true });
     };
   });
 </script>

package/dist/components/emoji/emoji.d.ts

@@ -8,9 +8,12 @@
  */
 export const EMOJI_TRIGGER_REGEX: RegExp;
 /**
- * Maximum number of emoji suggestions shown at a time.
+ * Maximum number of emoji suggestions offered, matching what Discord shows. The dropdown displays
+ * five at a time and scrolls through the rest, so this only bounds how far a query can be explored
+ * — a single letter otherwise matches over a thousand emojis, all rendered on every keystroke.
  */
-export const MAX_EMOJI_SUGGESTIONS: 10;
+export const MAX_EMOJI_SUGGESTIONS: 50;
+export function normalizeEmojiName(name: string): string;
 export function parseEmojiData(data: EmojiData): EmojiEntry[];
 export function loadEmojiList(): Promise<EmojiEntry[]>;
 /**

package/dist/components/emoji/emoji.js

@@ -13,9 +13,11 @@ import { getEmojiDataLoader } from './loader.js';
 export const EMOJI_TRIGGER_REGEX = /(?<=^|[\s([{"'«])(?::)(?<query>[a-zA-Z0-9_+-]{1,32})$/;
 
 /**
- * Maximum number of emoji suggestions shown at a time.
+ * Maximum number of emoji suggestions offered, matching what Discord shows. The dropdown displays
+ * five at a time and scrolls through the rest, so this only bounds how far a query can be explored
+ * — a single letter otherwise matches over a thousand emojis, all rendered on every keystroke.
  */
-export const MAX_EMOJI_SUGGESTIONS = 10;
+export const MAX_EMOJI_SUGGESTIONS = 50;
 
 /**
  * Cached emoji list. This is `undefined` until {@link loadEmojiList} resolves for the first time.
@@ -28,6 +30,24 @@ let emojiList;
  */
 let loader;
 
+/**
+ * Rewrite an emoji name as a shortcode the user can actually type.
+ *
+ * Most names are already lower case words joined with underscores, but a hundred or so of the newer
+ * ones are written with spaces or commas instead, like `heart hands`. A query can contain neither,
+ * so those names would be unreachable by their own shortcode and would be shown as something the
+ * user can’t type back.
+ * @internal
+ * @param {string} name Name as published.
+ * @returns {string} Name made up of the characters a query can contain.
+ */
+export const normalizeEmojiName = (name) =>
+  name
+    .toLowerCase()
+    // Runs of anything a query can’t contain become a single separator
+    .replace(/[^a-z0-9_+-]+/g, '_')
+    .replace(/^_+|_+$/g, '');
+
 /**
  * Convert the raw emoji data into a searchable list.
  * @internal
@@ -38,7 +58,7 @@ let loader;
 export const parseEmojiData = (data) =>
   Object.entries(data).map(([emoji, [name, ...aliases]]) => ({
     emoji,
-    name,
+    name: normalizeEmojiName(name),
     // Some of the keywords are capitalized, e.g. `NASA` and `XD`
     aliases: aliases.map((alias) => alias.toLowerCase()),
   }));
@@ -86,9 +106,11 @@ export const NO_EMOJI_MATCH = 9;
 /**
  * Get how well an emoji’s name matches the given query. A lower rank means a better match.
  *
- * The name is matched word by word rather than only as a whole, so a partly typed `:cana` reaches
- * `flag_canada`’s second word just as `:canada` does. The whole name is tested as well, so a query
- * spanning a word boundary, like `:flag_can`, still matches.
+ * A match has to start at a word boundary. The name is matched word by word rather than only as a
+ * whole, so a partly typed `:cana` reaches `flag_canada`’s second word just as `:canada` does, and
+ * the whole name is tested as well, so a query spanning a word boundary like `:flag_can` still
+ * matches. What this rules out is a match starting mid-word, which is nearly always coincidental:
+ * `:age` would otherwise turn up `mage`, `bagel`, `baggage`, `pager` and `package`.
  * @internal
  * @param {string} name Canonical emoji name.
  * @param {string} query Lower-cased search query without the leading colon.
@@ -101,16 +123,20 @@ export const getEmojiNameMatchRank = (name, query) => {
     return 0;
   }
 
-  if (words.includes(query)) {
+  // What the name leads with is what the emoji mostly is, so `heart_hands` is a better `:heart`
+  // match than `sparkling_heart`, where the word merely turns up along the way. The whole leading
+  // word has to match: `japanese_castle` is not what `:japan` is after, nor `crystal_ball` `:cry`.
+  if (name.startsWith(`${query}_`)) {
     return 1;
   }
 
-  if (name.startsWith(query) || words.some((word) => word.startsWith(query))) {
-    return 3;
+  if (words.includes(query)) {
+    return 2;
   }
 
-  if (name.includes(query)) {
-    return 5;
+  // The whole name is tested too, so a query spanning a word boundary like `:heart_h` still matches
+  if (name.startsWith(query) || words.some((word) => word.startsWith(query))) {
+    return 4;
   }
 
   return NO_EMOJI_MATCH;
@@ -127,11 +153,11 @@ export const getEmojiNameMatchRank = (name, query) => {
  */
 export const getEmojiAliasMatchRank = (aliases, query) => {
   if (aliases.includes(query)) {
-    return 2;
+    return 3;
   }
 
   if (aliases.some((alias) => alias.startsWith(query))) {
-    return 4;
+    return 5;
   }
 
   return NO_EMOJI_MATCH;
@@ -158,6 +184,30 @@ export const getEmojiMatchRank = ({ name, aliases }, query) => {
   return { rank: Math.min(nameRank, aliasRank), nameRank };
 };
 
+/**
+ * Get how central a match is to the emoji, to separate emojis that match equally well. A lower
+ * number means the query is more of what the emoji is about.
+ *
+ * For a name match, that’s how much of the name the query accounts for: `red_heart` is more of a
+ * `:heart` than `smiling_face_with_heart_eyes` is. For a keyword match, it’s how prominent the
+ * keyword is — `emojilib` lists them roughly in order of relevance, so a keyword listed first, in a
+ * short list, is what the emoji is really for. `love` is the first of 🫶’s three keywords, while
+ * 💏 `kiss` buries it third among nineteen.
+ * @internal
+ * @param {EmojiEntry} entry Emoji entry.
+ * @param {string} query Lower-cased search query without the leading colon.
+ * @returns {number} Centrality, comparable only between equally ranked emojis.
+ */
+const getMatchCentrality = ({ name, aliases }, query) => {
+  if (getEmojiNameMatchRank(name, query) < NO_EMOJI_MATCH) {
+    return name.split('_').length;
+  }
+
+  const index = aliases.findIndex((alias) => alias === query || alias.startsWith(query));
+
+  return (index > -1 ? index : aliases.length) * 100 + aliases.length;
+};
+
 /**
  * Search the loaded emoji list for the given query. This returns an empty list unless
  * {@link loadEmojiList} has been resolved beforehand.
@@ -174,11 +224,19 @@ export const searchEmojis = (query) => {
 
   return (
     emojiList
-      .map((entry) => ({ entry, ...getEmojiMatchRank(entry, normalizedQuery) }))
+      .map((entry) => {
+        const { rank, nameRank } = getEmojiMatchRank(entry, normalizedQuery);
+
+        return { entry, rank, nameRank, centrality: getMatchCentrality(entry, normalizedQuery) };
+      })
       .filter(({ rank }) => rank < NO_EMOJI_MATCH)
-      // Equally ranked emojis are settled by the name, then by the original order, which roughly
-      // goes from the most to the least commonly used — `Array.prototype.sort()` is stable
-      .sort((a, b) => a.rank - b.rank || a.nameRank - b.nameRank)
+      // Equally ranked emojis are settled by the name, then by how central the match is to the
+      // emoji, then by the published order — `Array.prototype.sort()` is stable.
+      //
+      // That last resort is weak: the published order follows the Unicode categories, not how often
+      // an emoji is used, and newer emojis are simply appended. 🫶 `heart_hands` sits at 1826, so
+      // without the two keys before it, it loses every tie to whatever happens to be older.
+      .sort((a, b) => a.rank - b.rank || a.nameRank - b.nameRank || a.centrality - b.centrality)
       .slice(0, MAX_EMOJI_SUGGESTIONS)
       .map(({ entry }) => entry)
   );

package/dist/components/text-editor/shiki/generated.d.ts

@@ -7,7 +7,7 @@ export const SHIKI_VERSION: "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.65.1";
+export const UI_VERSION: "0.65.2";
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

package/dist/components/text-editor/shiki/generated.js

@@ -10,7 +10,7 @@ export const SHIKI_VERSION = "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = "0.65.1";
+export const UI_VERSION = "0.65.2";
 
 /**
  * Available syntax highlighting languages, sorted by display name.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.65.1",
+  "version": "0.65.2",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",