@hanzo/ui 0.5.24 → 0.6.16

package/src/components/emoji/EmojiPopup.svelte

@@ -0,0 +1,430 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte'
+  import type { Emoji } from 'emojibase'
+  import {
+    Scroller,
+    SearchInput,
+    tooltip,
+    deviceOptionsStore as deviceInfo,
+    showPopup,
+    eventToHTMLElement,
+    ButtonBase,
+    closeTooltip
+  } from '../../'
+  import plugin from '../../plugin'
+  import {
+    searchEmoji,
+    emojiStore,
+    generateSkinToneEmojis,
+    emojiCategories,
+    getFrequentlyEmojis,
+    addFrequentlyEmojis,
+    removeFrequentlyEmojis,
+    getEmoji,
+    getSkinTone,
+    setSkinTone
+  } from '.'
+  import type { EmojiWithGroup, EmojiCategory } from '.'
+  import ActionsPopup from './ActionsPopup.svelte'
+  import SkinTonePopup from './SkinTonePopup.svelte'
+  import IconSearch from './icons/Search.svelte'
+  import EmojiGroup from './EmojiGroup.svelte'
+
+  export let embedded = false
+  export let selected: string | undefined
+  export let disabled: boolean = false
+  export let kind: 'default' | 'fade' = 'fade'
+
+  const dispatch = createEventDispatcher()
+
+  let scrollElement: HTMLDivElement
+  const touchEvents = ['touchend', 'touchcancel', 'touchmove']
+  let skinTone: number = getSkinTone()
+  let shownSTM: boolean = false
+  let shownContext: boolean = false
+  $: emojiRowHeightPx = ($deviceInfo.fontSize ?? 16) * 2
+  $searchEmoji = ''
+  $: searching = $searchEmoji !== ''
+  const searchCategory: EmojiCategory[] = [
+    {
+      id: 'search-category',
+      label: plugin.string.SearchResults,
+      icon: IconSearch
+    }
+  ]
+  let timer: any = null
+  const isMobile = $deviceInfo.isMobile
+
+  let emojisCat = emojiCategories
+  let currentCategory = emojisCat[0]
+  $: emojiTabs = emojisCat
+    .map((ec) => {
+      if (ec.categories !== undefined || ec.emojisString !== undefined || ec.emojis !== undefined) {
+        return { id: ec.id, label: ec.label, icon: ec.icon }
+      } else return undefined
+    })
+    .filter((f) => f !== undefined) as EmojiCategory[]
+  $: categoryTabs = searching ? ([...searchCategory, ...emojiTabs] as EmojiCategory[]) : emojiTabs
+
+  function handleScrollToCategory (categoryId: string): void {
+    if (searching && categoryId !== searchCategory[0].id) $searchEmoji = ''
+    if (isMobile) {
+      const tempCat = emojiTabs.find((ct) => ct?.id === categoryId)
+      if (tempCat === undefined) return
+      currentCategory = tempCat
+      outputGroups = updateGroups(searching, emojisCat)
+    } else {
+      setTimeout(() => {
+        const labelElement = document.getElementById(categoryId)
+        if (labelElement) {
+          const emojisElement = labelElement.nextElementSibling as HTMLElement
+          scrollElement.scroll(0, emojisElement.offsetTop - $deviceInfo.fontSize * 1.75)
+        }
+      })
+    }
+  }
+
+  function handleCategoryScrolled (): void {
+    if (isMobile) return
+    const selectedCategory = emojisCat.find((category) => {
+      const labelElement = document.getElementById(category.id)
+      if (labelElement == null) return false
+      const emojisElement = labelElement.nextElementSibling as HTMLElement
+
+      return emojisElement.offsetTop + emojisElement.offsetHeight - emojiRowHeightPx > scrollElement.scrollTop
+    })
+    if (selectedCategory !== undefined) currentCategory = selectedCategory
+  }
+
+  const sendEmoji = (emoji: Emoji | EmojiWithGroup): void => {
+    selected = emoji.emoji
+    addFrequentlyEmojis(emoji.hexcode)
+    dispatch('close', {
+      emoji: emoji.emoji,
+      codes: emoji.hexcode.split('-').map((hc) => parseInt(hc, 16))
+    })
+  }
+
+  const selectedEmoji = (event: CustomEvent<{ detail: EmojiWithGroup }>): void => {
+    if (event.detail === undefined || typeof event.detail !== 'object') return
+    const detail = event.detail as unknown as EmojiWithGroup
+    sendEmoji(detail)
+  }
+
+  function openContextMenu (event: TouchEvent | MouseEvent, _emoji: EmojiWithGroup, remove: boolean): void {
+    event.preventDefault()
+    const temp = getEmoji(_emoji.hexcode)
+    const emoji = temp?.parent ?? temp?.emoji
+    if (emoji === undefined) return
+
+    clearTimer()
+    shownContext = true
+    showPopup(
+      ActionsPopup,
+      { emoji, remove },
+      eventToHTMLElement(event),
+      (result: 'remove' | Emoji | EmojiWithGroup) => {
+        if (result === 'remove') {
+          removeFrequentlyEmojis(emoji.hexcode)
+          const index = emojisCat.findIndex((ec) => ec.id === 'frequently-used')
+          if (index > -1) emojisCat[index].emojis = getFrequentlyEmojis()
+          emojisCat = emojisCat.filter(
+            (em) => em.categories !== undefined || (Array.isArray(em.emojis) && em.emojis.length > 0)
+          )
+          if (currentCategory.emojis?.length === 0) {
+            currentCategory = emojisCat.find((ec) => ec.emojis !== undefined && ec.emojis.length > 0) ?? emojisCat[0]
+          }
+        } else if (result !== undefined) {
+          sendEmoji(result)
+        }
+        shownContext = false
+      }
+    )
+  }
+  function handleContextMenu (event: MouseEvent, emoji: EmojiWithGroup, remove: boolean): void {
+    event.preventDefault()
+    if (Array.isArray(emoji.skins) || remove) openContextMenu(event, emoji, remove)
+  }
+  const clearTimer = (): void => {
+    clearTimeout(timer)
+    touchObserver(true)
+  }
+  const touchObserver = (remove: boolean = false): void => {
+    touchEvents.forEach((event) => {
+      if (remove) window.removeEventListener(event, clearTimer)
+      else window.addEventListener(event, clearTimer)
+    })
+  }
+  function clampedContextMenu (event: TouchEvent, emoji: EmojiWithGroup, remove: boolean): void {
+    if (timer == null && (Array.isArray(emoji?.skins) || remove)) {
+      touchObserver()
+      timer = setTimeout(function () {
+        if (!shownContext) openContextMenu(event, emoji, remove)
+        clearTimer()
+      }, 1000)
+    }
+  }
+
+  const showSkinMenu = (event: MouseEvent): void => {
+    shownSTM = true
+    showPopup(SkinTonePopup, { emoji: 0x1f590, selected: skinTone }, eventToHTMLElement(event), (result) => {
+      if (typeof result === 'number') {
+        skinTone = result
+        setSkinTone(skinTone)
+      }
+      shownSTM = false
+    })
+  }
+
+  let hidden: boolean = true
+  const checkScroll = (event: Event): void => {
+    if (timer != null) clearTimer()
+    const target = event.target as HTMLElement
+    if (target == null) return
+    hidden = target.scrollHeight - target.scrollTop - target.clientHeight < 5
+  }
+
+  const initEmoji = (): void => {
+    emojiCategories.forEach((em, index) => {
+      if (em.id === 'frequently-used') {
+        emojiCategories[index].emojis = getFrequentlyEmojis()
+      }
+      if (em.emojisString !== undefined && Array.isArray(em.emojisString) && em.emojis === undefined) {
+        const tempEmojis: string[] = em.emojisString
+        const emojis: EmojiWithGroup[] = []
+        tempEmojis.forEach((te) => {
+          const e = $emojiStore.find((es) => es.hexcode === te)
+          if (e !== undefined) emojis.push(e)
+        })
+        emojiCategories[index].emojis = emojis
+      }
+    })
+    emojisCat = emojiCategories.filter(
+      (em) => em.categories !== undefined || (Array.isArray(em.emojis) && em.emojis.length > 0)
+    )
+    currentCategory = emojisCat.find((ec) => ec.emojis !== undefined) ?? emojisCat[0]
+  }
+
+  onMount(() => {
+    if (scrollElement !== undefined) scrollElement.addEventListener('scroll', checkScroll)
+    closeTooltip()
+    setTimeout(initEmoji)
+  })
+  onDestroy(() => {
+    if (scrollElement !== undefined) scrollElement.removeEventListener('scroll', checkScroll)
+  })
+
+  const updateGroups = (s: boolean, ec: EmojiCategory[]): EmojiCategory[] => {
+    return s ? searchCategory : isMobile ? ec.filter((e) => e.id === currentCategory.id) : ec
+  }
+  $: outputGroups = updateGroups(searching, emojisCat)
+</script>
+
+<div class="hulyPopupEmoji-container kind-{kind}" class:embedded>
+  <div class="hulyPopupEmoji-header__tabs-wrapper">
+    <div class="hulyPopupEmoji-header__tabs">
+      {#each categoryTabs as category (category.id)}
+        <button
+          class="hulyPopupEmoji-header__tab"
+          class:selected={(searching && searchCategory[0].id === category.id) ||
+            (!searching && currentCategory.id === category.id)}
+          data-id={category.id}
+          use:tooltip={{ label: category.label }}
+          on:click={() => {
+            handleScrollToCategory(category.id)
+          }}
+        >
+          <svelte:component this={category.icon} size={isMobile ? 'large' : 'x-large'} />
+        </button>
+      {/each}
+      <div
+        style:left={`${
+          (searching ? 0 : emojisCat.findIndex((ec) => ec.id === currentCategory.id)) * (isMobile ? 1.875 : 2.125)
+        }rem`}
+        class="hulyPopupEmoji-header__tab-cursor"
+      />
+    </div>
+  </div>
+  <div class="hulyPopupEmoji-header__tools">
+    <SearchInput
+      value={$searchEmoji}
+      placeholder={plugin.string.SearchDots}
+      width={'100%'}
+      autoFocus
+      delay={50}
+      on:change={(result) => {
+        if (result.detail !== undefined) $searchEmoji = result.detail
+        else if (result.detail !== '') currentCategory = searchCategory[0]
+      }}
+    />
+    <ButtonBase
+      type={'type-button-icon'}
+      hasMenu
+      pressed={shownSTM}
+      kind={'tertiary'}
+      size={'small'}
+      tooltip={{ label: plugin.string.DefaultSkinTone }}
+      on:click={showSkinMenu}
+    >
+      <span style:font-size={'1.5rem'}>{generateSkinToneEmojis(0x1f590)[skinTone]}</span>
+    </ButtonBase>
+  </div>
+  <Scroller
+    bind:divScroll={scrollElement}
+    gap="0.5rem"
+    checkForHeaders
+    noStretch
+    on:scrolledCategories={handleCategoryScrolled}
+  >
+    {#each outputGroups as group (group.id)}
+      {@const canRemove = group.id === 'frequently-used'}
+      <EmojiGroup
+        {group}
+        {searching}
+        {disabled}
+        {selected}
+        {skinTone}
+        {kind}
+        lazy={group.id !== 'frequently-used'}
+        on:select={selectedEmoji}
+        on:touchstart={(ev) => {
+          const { event, emoji } = ev.detail
+          clampedContextMenu(event, emoji, canRemove)
+        }}
+        on:contextmenu={(ev) => {
+          const { event, emoji } = ev.detail
+          handleContextMenu(event, emoji, canRemove)
+        }}
+      />
+    {/each}
+  </Scroller>
+  {#if !hidden && kind === 'fade'}<div class="hulyPopupEmoji-footer" />{/if}
+</div>
+
+<style lang="scss">
+  .hulyPopupEmoji-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-bottom: 0.75rem;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 28.5rem;
+    max-height: 28.5rem;
+    user-select: none;
+
+    :global(.mobile-theme) & {
+      min-width: 0;
+      max-width: calc(100vw - 2rem);
+      min-height: 0;
+      max-height: calc(100% - 4rem);
+    }
+
+    &:not(.embedded) {
+      min-width: 25.5rem;
+      max-width: 25.5rem;
+      background: var(--theme-popup-color); // var(--global-popover-BackgroundColor);
+      border: 1px solid var(--theme-popup-divider); // var(--global-popover-BorderColor);
+      border-radius: var(--small-BorderRadius);
+      box-shadow: var(--global-popover-ShadowX) var(--global-popover-ShadowY) var(--global-popover-ShadowBlur)
+        var(--global-popover-ShadowSpread) var(--global-popover-ShadowColor);
+
+      :global(.mobile-theme) & {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+    .hulyPopupEmoji-header__tools,
+    .hulyPopupEmoji-header__tabs-wrapper,
+    .hulyPopupEmoji-header__tabs,
+    .hulyPopupEmoji-header__tab {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    .hulyPopupEmoji-header__tabs-wrapper {
+      overflow-x: auto;
+      padding: 0.25rem 0.75rem;
+      width: 100%;
+      border-bottom: 1px solid var(--theme-popup-divider);
+    }
+    .hulyPopupEmoji-header__tabs {
+      position: relative;
+      gap: 0.125rem;
+      width: 100%;
+    }
+    .hulyPopupEmoji-header__tab {
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      color: var(--theme-halfcontent-color);
+      transition: color 0.15s ease-in;
+      transition: left 0.15s ease-in;
+
+      &:disabled,
+      &.disabled {
+        color: var(--theme-darker-color);
+      }
+      :global(.mobile-theme) & {
+        width: 1.75rem;
+        height: 1.75rem;
+      }
+      :global(svg) {
+        transform: scale(0.8);
+        transition: transform 0.15s ease-in-out;
+      }
+
+      &:not(:disabled, .disabled) {
+        &.selected {
+          color: var(--theme-caption-color);
+
+          :global(svg) {
+            transform: scale(1);
+          }
+        }
+        &:hover {
+          color: var(--theme-content-color);
+        }
+      }
+    }
+    .hulyPopupEmoji-header__tab-cursor {
+      position: absolute;
+      bottom: -0.25rem;
+      width: 2rem;
+      height: 0.125rem;
+      background-color: var(--theme-tablist-plain-color);
+      transition: left 0.15s ease-in;
+
+      :global(.mobile-theme) & {
+        width: 1.75rem;
+      }
+    }
+    .hulyPopupEmoji-header__tools {
+      gap: 0.5rem;
+      padding: 0 0.75rem;
+    }
+
+    .hulyPopupEmoji-footer {
+      position: absolute;
+      left: 50%;
+      bottom: 0.75rem;
+      width: calc(100% - 1.5rem);
+      height: 1rem;
+      background: var(--theme-popup-trans-gradient);
+      transform-origin: center;
+      transform: translateX(-50%) rotate(180deg);
+      z-index: 1;
+      pointer-events: none;
+    }
+  }
+</style>

package/src/components/emoji/SkinTonePopup.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  import { createEventDispatcher } from 'svelte'
+  import type { Emoji } from 'emojibase'
+  import { Label, closeTooltip, ModernCheckbox } from '../../'
+  import { generateSkinToneEmojis, skinTones, getEmojiCode } from '.'
+  import type { EmojiWithGroup } from '.'
+
+  export let emoji: number | number[] | string | Emoji | EmojiWithGroup
+  export let selected: number
+
+  const dispatch = createEventDispatcher()
+  closeTooltip()
+
+  const skins: string[] = generateSkinToneEmojis(getEmojiCode(emoji))
+</script>
+
+<div class="hulyPopup-container noPadding">
+  <div class="hulyPopup-group">
+    {#each skins as skin, index}
+      {@const disabled = selected === index}
+      {@const label = skinTones.get(index)}
+      <button
+        class="hulyPopup-row withKeys"
+        class:noHover={disabled}
+        on:click={() => {
+          if (disabled) return undefined
+          dispatch('close', index)
+        }}
+      >
+        <span style:font-size={'1.5rem'}>{skin}</span>
+        {#if label}<span class="hulyPopup-row__label"><Label {label} /></span>{/if}
+        {#if disabled}<span class="hulyPopup-row__keys"><ModernCheckbox checked disabled /></span>{/if}
+      </button>
+    {/each}
+  </div>
+</div>

package/src/components/emoji/SkinToneTooltip.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  import { createEventDispatcher } from 'svelte'
+  import type { Emoji } from 'emojibase'
+  import { generateSkinToneEmojis, getEmojiCode, type EmojiWithGroup } from '.'
+  import { ButtonBase, closeTooltip } from '../..'
+
+  export let emoji: number | number[] | string | Emoji | EmojiWithGroup
+  export let selected: number
+
+  const dispatch = createEventDispatcher()
+
+  const skins: string[] = generateSkinToneEmojis(getEmojiCode(emoji))
+</script>
+
+<div class="flex-row-center flex-gap-1">
+  {#each skins as skin, index}
+    {@const disabled = selected === index}
+    <ButtonBase
+      type={'type-button-icon'}
+      {disabled}
+      kind={disabled ? 'secondary' : 'tertiary'}
+      size={'small'}
+      on:click={() => {
+        if (disabled) return undefined
+        dispatch('update', index)
+        closeTooltip()
+      }}
+    >
+      <span style:font-size={'1.5rem'}>{skin}</span>
+    </ButtonBase>
+  {/each}
+</div>

package/src/components/emoji/icons/Activities.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,7.8c0.4,0,0.8-0.3,0.8-0.8S12.4,6.2,12,6.2c-3.2,0-5.8,2.6-5.8,5.8c0,3.2,2.6,5.8,5.8,5.8c3.2,0,5.8-2.6,5.8-5.8c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8c0,2.3-1.9,4.2-4.2,4.2c-2.3,0-4.2-1.9-4.2-4.2C7.8,9.7,9.7,7.8,12,7.8z"
+  />
+  <path
+    d="M21.7,10.9c0-0.4-0.4-0.7-0.8-0.7c-0.4,0-0.7,0.4-0.7,0.8c0.1,0.6,0.1,1.2,0,1.8c-0.2,2.2-1.3,4.2-3.1,5.5c-1.7,1.4-3.9,2-6.1,1.8c-2.2-0.2-4.2-1.3-5.5-3.1c-1.4-1.7-2-3.9-1.8-6.1C4,8.9,5.1,6.9,6.8,5.6s3.9-2,6.1-1.8c0.4,0.1,0.8-0.2,0.8-0.7c0-0.4-0.2-0.8-0.7-0.8C10.5,2,7.9,2.8,5.9,4.4c-2,1.6-3.3,3.9-3.6,6.5C2,13.5,2.8,16,4.4,18.1c1.6,2,3.9,3.3,6.5,3.6c0.4,0,0.7,0.1,1.1,0.1c2.2,0,4.3-0.7,6.1-2.1c2-1.6,3.3-3.9,3.6-6.5C21.8,12.4,21.8,11.6,21.7,10.9z"
+  />
+  <path
+    d="M12.6,10.4c-0.2-0.1-0.4-0.1-0.6-0.1c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8c0-0.2,0-0.4-0.1-0.6l1.7-1.7H18c0.2,0,0.4-0.1,0.5-0.2l3-3c0.2-0.2,0.3-0.5,0.2-0.8c-0.1-0.3-0.4-0.5-0.7-0.5h-2.2V3c0-0.3-0.2-0.6-0.5-0.7c-0.3-0.1-0.6-0.1-0.8,0.2l-3,3c-0.1,0.1-0.2,0.3-0.2,0.5v2.7L12.6,10.4z M15.8,6.3l1.5-1.5V6c0,0.4,0.3,0.8,0.8,0.8h1.2l-1.5,1.5h-1.9V6.3z"
+  />
+</svg>

package/src/components/emoji/icons/AnimalsAndNature.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path d="M10,9.8c-0.7,0-1.2,0.6-1.2,1.3s0.6,1.2,1.2,1.2s1.2-0.6,1.2-1.2v0C11.2,10.3,10.7,9.8,10,9.8z" />
+  <path d="M14,9.8c-0.7,0-1.2,0.6-1.2,1.3s0.6,1.2,1.2,1.2s1.2-0.6,1.2-1.2v0C15.2,10.3,14.7,9.8,14,9.8z" />
+  <path
+    d="M21.7,10.6l-2-6.8c-0.1-0.4-0.5-0.6-0.8-0.5l-6,1c0,0,0,0,0,0h-1.7c0,0,0,0,0,0l-6-1C4.7,3.2,4.4,3.4,4.3,3.8l-2,6.9c-0.1,0.6,0.1,1.3,0.6,1.7c0.3,0.3,0.7,0.4,1.1,0.4c0.1,0,0.2,0,0.3,0c0.8,5.3,2.7,8,5.7,8h4c3,0,4.9-2.7,5.7-8c0.1,0,0.2,0,0.3,0c0.4,0,0.8-0.1,1.1-0.4C21.6,11.9,21.9,11.3,21.7,10.6z M3.8,11.2c-0.1,0-0.1-0.1-0.1-0.2l1.8-6.2l4,0.6l-5.3,5.7C4.1,11.3,3.9,11.3,3.8,11.2z M14,19.2h-1.2V18c0-0.1,0-0.2-0.1-0.4c0.7-0.2,1.1-0.8,1.1-1.6c0-0.4-0.3-0.8-0.8-0.8h-2c-0.4,0-0.8,0.3-0.8,0.8c0,0.8,0.4,1.4,1.1,1.6c-0.1,0.1-0.1,0.2-0.1,0.4v1.2H10c-2.2,0-3.6-2.5-4.3-7.3c0-0.1,0-0.1,0-0.1l5.6-6h1.4l5.6,6c0,0,0,0.1,0,0.1C17.6,16.8,16.2,19.2,14,19.2z M20.2,11.2c-0.1,0.1-0.3,0.1-0.4,0l-5.3-5.7l4-0.6l1.8,6.1C20.3,11.1,20.2,11.1,20.2,11.2z"
+  />
+</svg>

package/src/components/emoji/icons/Flags.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19.3,4.3c-0.3-0.1-0.6-0.1-0.8,0.2c-1.6,1.6-4.3,1.6-5.9,0c-2.2-2.2-5.8-2.2-8,0C4.3,4.6,4.2,4.8,4.2,5v9v7c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-6.6c1.7-1.4,4.2-1.4,5.7,0.2c1.1,1.1,2.6,1.6,4,1.6s2.9-0.5,4-1.6c0.1-0.1,0.2-0.3,0.2-0.5V5C19.8,4.7,19.6,4.4,19.3,4.3z M18.2,13.7c-1.7,1.4-4.2,1.3-5.7-0.2c-1.1-1.1-2.6-1.6-4-1.6c-0.9,0-1.9,0.2-2.8,0.7V5.3C7.4,3.9,9.9,4,11.5,5.5c1.8,1.8,4.6,2.1,6.8,0.9V13.7z"
+  />
+</svg>

package/src/components/emoji/icons/FoodAndDrink.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.6,7.6C7.7,7.7,7.8,7.8,8,7.8c0.2,0,0.5-0.1,0.6-0.3c0.2-0.3,0.2-0.8-0.2-1C8,6.1,7.7,5.6,7.8,5c0-0.5,0.2-1.1,0.7-1.4c0.3-0.2,0.4-0.7,0.2-1c-0.2-0.3-0.7-0.4-1-0.2C6.7,3,6.2,4,6.2,5C6.2,6,6.7,7,7.6,7.6z"
+  />
+  <path
+    d="M11.6,7.6c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.5-0.1,0.6-0.3c0.2-0.3,0.2-0.8-0.2-1C12,6.1,11.7,5.6,11.8,5c0-0.5,0.2-1.1,0.7-1.4c0.3-0.2,0.4-0.7,0.2-1c-0.2-0.3-0.7-0.4-1-0.2C10.7,3,10.2,4,10.2,5C10.2,6,10.7,7,11.6,7.6z"
+  />
+  <path
+    d="M19.6,10.6c-0.6-0.3-1.2-0.4-1.8-0.3V10c0-0.4-0.3-0.8-0.8-0.8H3c-0.4,0-0.8,0.3-0.8,0.8v5c0,3.7,3,6.8,6.8,6.8h2c2.8,0,5.2-1.7,6.2-4.1c0.3,0.1,0.5,0.1,0.8,0.1c0.4,0,0.9-0.1,1.3-0.2c0.9-0.3,1.7-1,2.1-2C22.3,13.7,21.4,11.5,19.6,10.6zM16.2,10.8v0.4c0,0,0,0,0,0v1.6c-0.8-0.3-1.7-0.5-2.7-0.5c-1.5,0-3,0.4-4,1.2c-0.7,0.5-1.8,0.8-3.1,0.8c-1.1,0-2-0.2-2.7-0.7v-2.8H16.2z M11,20.2H9c-2.8,0-5.1-2.2-5.2-5c0.8,0.3,1.7,0.5,2.6,0.5c0.1,0,0.1,0,0.2,0c1.5,0,2.9-0.4,3.9-1.2c0.7-0.5,1.8-0.8,3-0.8c0.1,0,0.1,0,0.2,0c1,0,2,0.2,2.7,0.7V15C16.2,17.9,13.9,20.2,11,20.2z M20,14.9c-0.2,0.5-0.7,1-1.3,1.2c-0.4,0.1-0.8,0.2-1.1,0.1c0.1-0.4,0.1-0.8,0.1-1.2v-3.2c0.4,0,0.8,0,1.2,0.2C20.1,12.5,20.6,13.8,20,14.9z"
+  />
+</svg>

package/src/components/emoji/icons/FrequentlyUsed.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,7.2c-0.4,0-0.8,0.3-0.8,0.8v4c0,0.2,0.1,0.4,0.2,0.5l2,2c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1l-1.8-1.8V8C12.8,7.6,12.4,7.2,12,7.2z"
+  />
+  <path
+    d="M19.6,5.8c-1.6-2-4-3.3-6.6-3.5C7.6,1.7,2.8,5.6,2.3,10.9c0,0.4,0.3,0.8,0.7,0.8c0.4,0,0.8-0.3,0.8-0.7c0.5-4.5,4.5-7.8,9-7.4C15,3.9,17,5,18.4,6.7c1.4,1.7,2,3.9,1.8,6c-0.2,2.2-1.3,4.2-3,5.6c-1.7,1.4-3.9,2-6,1.8c-2.8-0.3-5.2-2-6.5-4.4H8c0.4,0,0.8-0.3,0.8-0.8S8.5,14.2,8,14.2H3.6c0,0,0,0,0,0H3c-0.4,0-0.8,0.3-0.8,0.8v5c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-2.8c1.6,2.5,4.2,4.1,7.2,4.4c0.3,0,0.7,0.1,1,0.1c2.2,0,4.4-0.8,6.1-2.2c2-1.6,3.3-4,3.5-6.6C22,10.3,21.2,7.8,19.6,5.8z"
+  />
+</svg>

package/src/components/emoji/icons/GettingWorkDone.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11,21.8c-0.1,0-0.2,0-0.2,0c-0.3-0.1-0.5-0.4-0.5-0.7v-6.2H5c-0.3,0-0.5-0.2-0.7-0.4c-0.1-0.3-0.1-0.6,0.1-0.8l8-11c0.2-0.3,0.5-0.4,0.8-0.3c0.3,0.1,0.5,0.4,0.5,0.7v6.2H19c0.3,0,0.5,0.2,0.7,0.4s0.1,0.6-0.1,0.8l-8,11C11.5,21.6,11.2,21.8,11,21.8z M6.5,13.2H11c0.4,0,0.8,0.3,0.8,0.8v4.7l5.8-7.9H13c-0.4,0-0.8-0.3-0.8-0.8V5.3L6.5,13.2z"
+  />
+</svg>

package/src/components/emoji/icons/Objects.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20.7,6.9l-3.6-3.6c-1.4-1.4-3.7-1.4-5.1,0L9.3,6C8.6,6.6,8.2,7.6,8.2,8.5c0,0.9,0.3,1.7,0.8,2.3l-1.6,1.6c-0.1,0.1-0.2,0.3-0.2,0.5v1.2H6c-0.4,0-0.8,0.3-0.8,0.8v1.2H4c-0.2,0-0.4,0.1-0.5,0.2l-0.6,0.6c-0.4,0.5-0.6,1.1-0.6,1.8l0,1.2l0,0.2c0.1,0.9,0.9,1.5,1.7,1.5l1.2,0l0.2,0c0.6-0.1,1.2-0.3,1.7-0.8l6-6c1.4,1.2,3.6,1.1,4.9-0.2l2.6-2.6C22.1,10.6,22.1,8.3,20.7,6.9z M19.6,11L17,13.6c-0.8,0.8-2.2,0.8-3,0l-0.3-0.3c-0.3-0.3-0.8-0.3-1.1,0l-6.6,6.6c-0.2,0.2-0.5,0.3-0.7,0.4l-1.3,0c-0.1,0-0.2-0.1-0.2-0.2l0-1.2c0-0.3,0.1-0.6,0.3-0.8l0.3-0.3H6c0.4,0,0.8-0.3,0.8-0.8v-1.2H8c0.4,0,0.8-0.3,0.8-0.8v-1.7l1.9-1.9c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5L10.4,10c-0.8-0.8-0.8-2.2,0-3L13,4.4c0.8-0.8,2.2-0.8,3,0L19.6,8C20.5,8.8,20.5,10.2,19.6,11z"
+  />
+  <path d="M15,7.8L15,7.8c-0.7,0-1.3,0.6-1.3,1.2s0.6,1.2,1.3,1.2s1.2-0.6,1.2-1.2S15.7,7.8,15,7.8z" />
+</svg>

package/src/components/emoji/icons/Search.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21.5,20.5L16,14.9c1.1-1.3,1.8-3.1,1.8-4.9c0-4.3-3.5-7.8-7.8-7.8S2.2,5.7,2.2,10s3.5,7.8,7.8,7.8c1.9,0,3.6-0.7,4.9-1.8l5.5,5.5c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2C21.8,21.2,21.8,20.8,21.5,20.5z M3.8,10c0-3.4,2.8-6.2,6.2-6.2s6.2,2.8,6.2,6.2s-2.8,6.2-6.2,6.2S3.8,13.4,3.8,10z"
+  />
+</svg>

package/src/components/emoji/icons/SmileysAndPeople.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  export let size: 'small' | 'medium' | 'large' | 'x-large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" {fill} xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M12,20.2c-4.5,0-8.2-3.7-8.2-8.2S7.5,3.8,12,3.8s8.2,3.7,8.2,8.2S16.5,20.2,12,20.2z"
+  />
+  <path
+    d="M7.8,9.5c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0.1,0.1,0.2,0.2c0.2,0.2,0.6,0.4,0.9,0.4c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1-0.1,0.2-0.2C9.9,9.8,10,9.8,10,9.7c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.2,0.1-0.2c0-0.1,0-0.2,0-0.2c0-0.3-0.1-0.7-0.4-0.9C9.8,8.1,9.8,8,9.7,8c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.2-0.1-0.2-0.1c-0.4-0.1-0.8,0-1.1,0.3C7.9,8.3,7.8,8.7,7.8,9c0,0.1,0,0.2,0,0.2C7.8,9.3,7.8,9.4,7.8,9.5z"
+  />
+  <path
+    d="M14.3,10c0.1,0,0.1,0.1,0.2,0.1c0.1,0,0.2,0.1,0.2,0.1c0.1,0,0.2,0,0.2,0s0.2,0,0.2,0c0.1,0,0.2,0,0.2-0.1c0.1,0,0.2-0.1,0.2-0.1c0.1-0.1,0.1-0.1,0.2-0.2c0.2-0.2,0.4-0.6,0.4-0.9c0-0.3-0.1-0.7-0.4-0.9c0-0.1-0.1-0.1-0.2-0.2c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.2-0.1-0.2-0.1c-0.2,0-0.3,0-0.5,0c-0.1,0-0.2,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.2c-0.2,0.2-0.4,0.6-0.4,0.9c0,0.3,0.1,0.6,0.4,0.9C14.2,9.9,14.2,10,14.3,10z"
+  />
+  <path
+    d="M16,12.2H8c-0.4,0-0.8,0.3-0.8,0.8c0,2.6,2.1,4.8,4.8,4.8s4.8-2.1,4.8-4.8C16.8,12.6,16.4,12.2,16,12.2z M12,16.2c-1.5,0-2.8-1.1-3.2-2.5h6.3C14.8,15.2,13.5,16.2,12,16.2z"
+  />
+</svg>