@refraction-ui/astro 0.16.0 → 0.17.0

package/dist/emoji-picker/emoji-picker.styles.ts

@@ -1,7 +1,7 @@
 import { cva } from '../shared/index.ts'
 
 export const emojiPickerContainerStyles =
-  'w-80 rounded-lg border bg-popover text-popover-foreground shadow-md'
+  'w-80 rounded-lg border bg-popover text-popover-foreground shadow-md motion-safe:animate-fade-in-scale origin-top'
 
 export const emojiPickerSearchStyles =
   'w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground'
@@ -10,7 +10,7 @@ export const emojiPickerCategoryBarStyles =
   'flex border-b px-1'
 
 export const emojiPickerCategoryTabVariants = cva({
-  base: 'flex-1 py-1.5 text-center text-lg cursor-pointer hover:bg-accent rounded-md transition-colors',
+  base: 'flex-1 py-1.5 text-center text-lg cursor-pointer hover:bg-accent rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
   variants: {
     state: {
       active: 'bg-accent',
@@ -26,7 +26,15 @@ export const emojiPickerGridStyles =
   'grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto'
 
 export const emojiPickerEmojiButtonStyles =
-  'flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors'
+  'flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg transition-transform duration-100 ease-out hover:bg-accent hover:scale-125 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none motion-reduce:hover:scale-100'
 
 export const emojiPickerSectionLabelStyles =
   'px-2 py-1 text-xs font-medium text-muted-foreground'
+
+/** The swappable category/search/sticker panel; fades on category switch. */
+export const emojiPickerPanelStyles =
+  'motion-safe:animate-fade-in origin-top'
+
+/** A single sticker cell in the sticker tab. */
+export const emojiPickerStickerButtonStyles =
+  'flex items-center justify-center rounded-lg p-1.5 aspect-square cursor-pointer transition-transform duration-100 ease-out hover:bg-accent hover:scale-110 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none motion-reduce:hover:scale-100'

package/dist/emoji-picker/index.ts

@@ -9,11 +9,29 @@ export {
   EMOJI_DATA,
   EMOJI_CATEGORIES,
   CATEGORY_LABELS,
+  EMOJI_COUNT_TOTAL,
+  SHORTCODE_ALIASES,
   getAllEmojis,
+  resolveShortcode,
+  buildShortcodeMap,
+  searchEmojis,
   type EmojiCategory,
   type EmojiEntry,
 } from './emoji-data.js'
 
+export {
+  twemojiFilename,
+  twemojiAssetUrl,
+  DEFAULT_TWEMOJI_BASE_URL,
+} from './twemoji.js'
+
+export {
+  STARTER_STICKER_SET,
+  type StickerItem,
+  type StickerSet,
+  type StickerKind,
+} from './stickers.js'
+
 export {
   emojiPickerContainerStyles,
   emojiPickerSearchStyles,
@@ -22,4 +40,6 @@ export {
   emojiPickerGridStyles,
   emojiPickerEmojiButtonStyles,
   emojiPickerSectionLabelStyles,
+  emojiPickerPanelStyles,
+  emojiPickerStickerButtonStyles,
 } from './emoji-picker.styles.js'

package/dist/emoji-picker/stickers.ts

@@ -0,0 +1,146 @@
+/**
+ * Sticker seam — types + a small bundled starter pack.
+ *
+ * Stickers are host-extensible: a consumer (or a future bundled pack) supplies
+ * `StickerSet`s and the picker renders them in a dedicated tab. Three render
+ * paths are supported so the API is ready for animated content without any
+ * heavy dependency in the core:
+ *   - `kind: 'svg'`   — inline SVG markup (can self-animate via SMIL, no JS).
+ *   - `kind: 'image'` — a URL to a static or animated (WebP/GIF/APNG) asset.
+ *   - `kind: 'lottie'`— a URL/JSON handed to a host-provided Lottie player.
+ *
+ * The starter pack below ships a handful of simple, consistent flat stickers
+ * (128×128, one visual language) so the tab is not empty out of the box, and
+ * proves the animated render path with a self-animating SMIL heart — no Lottie
+ * runtime required.
+ */
+
+export type StickerKind = 'svg' | 'image' | 'lottie'
+
+export interface StickerItem {
+  /** Stable id (unique within its set). */
+  id: string
+  /** Accessible label / alt text. */
+  label: string
+  kind: StickerKind
+  /**
+   * The sticker payload: inline SVG markup (`svg`), an asset URL (`image`), or
+   * a Lottie JSON URL or serialized object (`lottie`).
+   */
+  source: string
+  /** Search keywords. */
+  keywords?: string[]
+  /** True when the sticker animates (drives reduced-motion handling). */
+  animated?: boolean
+}
+
+export interface StickerSet {
+  /** Stable id (unique across sets). */
+  id: string
+  /** Human-readable set name (tab tooltip). */
+  label: string
+  /** A representative emoji/char for the set's tab icon. */
+  icon?: string
+  stickers: StickerItem[]
+}
+
+const svg = (inner: string): string =>
+  `<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">${inner}</svg>`
+
+/**
+ * Refraction starter sticker pack — a tasteful, consistent flat set. The
+ * `pulse-heart` sticker self-animates via SMIL to demonstrate the animated
+ * render path; the rest are static.
+ */
+export const STARTER_STICKER_SET: StickerSet = {
+  id: 'refraction-starter',
+  label: 'Refraction',
+  icon: '⭐',
+  stickers: [
+    {
+      id: 'pulse-heart',
+      label: 'Pulsing heart',
+      kind: 'svg',
+      animated: true,
+      keywords: ['heart', 'love', 'like'],
+      source: svg(
+        `<g fill="#ff5a7a"><path d="M64 112C34 90 16 72 16 50a26 26 0 0 1 48-14 26 26 0 0 1 48 14c0 22-18 40-48 62Z">` +
+          `<animateTransform attributeName="transform" type="scale" additive="sum" values="1;1.08;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1;0.4 0 0.2 1" keyTimes="0;0.5;1"/>` +
+          `</path></g>`,
+      ),
+    },
+    {
+      id: 'star',
+      label: 'Gold star',
+      kind: 'svg',
+      keywords: ['star', 'favorite', 'award'],
+      source: svg(
+        `<path fill="#ffc93c" d="M64 14l14 30 33 4-24 23 6 33-29-16-29 16 6-33-24-23 33-4z"/>`,
+      ),
+    },
+    {
+      id: 'thumbs-up',
+      label: 'Thumbs up',
+      kind: 'svg',
+      keywords: ['thumbsup', 'like', 'yes', 'approve'],
+      source: svg(
+        `<g fill="#4c9aff"><rect x="20" y="56" width="20" height="50" rx="5"/>` +
+          `<path d="M48 56l16-34c9 0 14 7 12 18l-3 14h26c8 0 13 8 10 16l-9 26c-2 6-8 10-14 10H48Z"/></g>`,
+      ),
+    },
+    {
+      id: 'party',
+      label: 'Party popper',
+      kind: 'svg',
+      keywords: ['party', 'celebrate', 'tada', 'confetti'],
+      source: svg(
+        `<path fill="#ff8a3d" d="M18 110L52 44l32 32z"/>` +
+          `<circle cx="92" cy="30" r="6" fill="#ff5a7a"/><circle cx="110" cy="52" r="5" fill="#ffc93c"/>` +
+          `<circle cx="70" cy="20" r="5" fill="#4c9aff"/><circle cx="104" cy="82" r="6" fill="#5ad19a"/>`,
+      ),
+    },
+    {
+      id: 'smiley',
+      label: 'Smiley blob',
+      kind: 'svg',
+      keywords: ['happy', 'smile', 'face'],
+      source: svg(
+        `<circle cx="64" cy="64" r="46" fill="#ffd23f"/>` +
+          `<circle cx="48" cy="56" r="6" fill="#3a2d00"/><circle cx="80" cy="56" r="6" fill="#3a2d00"/>` +
+          `<path d="M44 78a24 24 0 0 0 40 0" stroke="#3a2d00" stroke-width="6" fill="none" stroke-linecap="round"/>`,
+      ),
+    },
+    {
+      id: 'fire',
+      label: 'Fire',
+      kind: 'svg',
+      keywords: ['fire', 'hot', 'lit'],
+      source: svg(
+        `<path fill="#ff6b35" d="M64 12c8 22-14 26-14 46a14 14 0 0 0 28 0c0-6-2-10-2-14 10 6 16 18 16 30a28 28 0 0 1-56 0c0-30 20-40 28-62Z"/>` +
+          `<path fill="#ffd23f" d="M64 62c4 8-6 10-6 20a10 10 0 0 0 20 0c0-8-8-12-14-20Z"/>`,
+      ),
+    },
+    {
+      id: 'check',
+      label: 'Check',
+      kind: 'svg',
+      keywords: ['check', 'done', 'ok', 'yes'],
+      source: svg(
+        `<circle cx="64" cy="64" r="46" fill="#5ad19a"/>` +
+          `<path d="M42 66l14 14 30-32" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
+      ),
+    },
+    {
+      id: 'heart-eyes',
+      label: 'Love it',
+      kind: 'svg',
+      keywords: ['love', 'heart', 'adore'],
+      source: svg(
+        `<circle cx="64" cy="64" r="46" fill="#ffd23f"/>` +
+          `<path fill="#ff5a7a" d="M40 50c5-6 13-2 13 4 0 5-6 9-13 14-7-5-13-9-13-14 0-6 8-10 13-4Z"/>` +
+          `<path fill="#ff5a7a" d="M88 50c5-6 13-2 13 4 0 5-6 9-13 14-7-5-13-9-13-14 0-6 8-10 13-4Z"/>` +
+          `<path d="M44 84a24 24 0 0 0 40 0" stroke="#3a2d00" stroke-width="6" fill="none" stroke-linecap="round"/>`,
+      ),
+    },
+  ],
+}

package/dist/emoji-picker/twemoji.ts

@@ -0,0 +1,60 @@
+/**
+ * Twemoji asset resolution — maps a native emoji glyph to its Twemoji SVG
+ * filename/URL. This is the data half of the `emojiRenderer` seam: it lets the
+ * React/Astro adapters render a UNIFORM emoji set (one look on every OS) instead
+ * of per-platform native glyphs, WhatsApp-style, by lazily loading one small SVG
+ * per glyph from a CDN (or a self-hosted mirror) — nothing is bundled eagerly.
+ *
+ * Twemoji graphics are © Twitter / the Twemoji contributors, licensed CC-BY 4.0.
+ * Consumers rendering with Twemoji must preserve that attribution (see the
+ * package README / NOTICE).
+ *
+ * The filename algorithm mirrors upstream `twemoji.toCodePoint`: surrogate
+ * pairs are combined to codepoints, and the U+FE0F variation selector is
+ * stripped from non-ZWJ sequences (Twemoji names files without it).
+ */
+
+/** Default CDN base for Twemoji SVG assets (jsDelivr, pinned). */
+export const DEFAULT_TWEMOJI_BASE_URL =
+  'https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/'
+
+const ZWJ = '‍'
+const VARIATION_SELECTOR_16 = /️/g
+
+/** Combine surrogate pairs into dash-joined lowercase hex codepoints. */
+function toCodePoint(input: string): string {
+  const parts: string[] = []
+  let pending = 0
+  let i = 0
+  while (i < input.length) {
+    const c = input.charCodeAt(i++)
+    if (pending) {
+      parts.push((0x10000 + ((pending - 0xd800) << 10) + (c - 0xdc00)).toString(16))
+      pending = 0
+    } else if (c >= 0xd800 && c <= 0xdbff) {
+      pending = c
+    } else {
+      parts.push(c.toString(16))
+    }
+  }
+  return parts.join('-')
+}
+
+/**
+ * Twemoji asset filename (without extension) for a glyph, e.g. `1f600`,
+ * `1f1fa-1f1f8`, `2764` (heart, FE0F stripped).
+ */
+export function twemojiFilename(emoji: string): string {
+  // Keep FE0F only for ZWJ sequences, matching upstream Twemoji naming.
+  const normalized = emoji.indexOf(ZWJ) < 0 ? emoji.replace(VARIATION_SELECTOR_16, '') : emoji
+  return toCodePoint(normalized)
+}
+
+/** Full Twemoji SVG URL for a glyph. */
+export function twemojiAssetUrl(
+  emoji: string,
+  baseUrl: string = DEFAULT_TWEMOJI_BASE_URL,
+): string {
+  const base = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`
+  return `${base}${twemojiFilename(emoji)}.svg`
+}

package/dist/rich-editor/emoji.ts

@@ -1,127 +1,21 @@
 /**
  * Emoji system — shortcode to unicode mapping and search.
+ *
+ * The map is derived from the single shared emoji dataset in
+ * `@refraction-ui/emoji-picker` (`buildShortcodeMap`), so rich-editor, the
+ * emoji picker, and the composer's `:` trigger all resolve `:shortcode:` the
+ * same way — the ~120-entry hand-list that used to live here (and diverge from
+ * the picker) is gone. Popular aliases (`:smile:`, `:joy:`, `:100:`) live in
+ * the shared dataset's `SHORTCODE_ALIASES`.
  */
+import { buildShortcodeMap } from '../emoji-picker/index.ts'
 
 // ---------------------------------------------------------------------------
 // Emoji map
 // ---------------------------------------------------------------------------
 
-export const EMOJI_MAP: Record<string, string> = {
-  ':smile:': '\u{1F604}',
-  ':laugh:': '\u{1F602}',
-  ':joy:': '\u{1F602}',
-  ':grin:': '\u{1F601}',
-  ':wink:': '\u{1F609}',
-  ':blush:': '\u{1F60A}',
-  ':heart_eyes:': '\u{1F60D}',
-  ':kissing:': '\u{1F617}',
-  ':thinking:': '\u{1F914}',
-  ':neutral:': '\u{1F610}',
-  ':expressionless:': '\u{1F611}',
-  ':unamused:': '\u{1F612}',
-  ':sweat:': '\u{1F613}',
-  ':pensive:': '\u{1F614}',
-  ':confused:': '\u{1F615}',
-  ':disappointed:': '\u{1F61E}',
-  ':worried:': '\u{1F61F}',
-  ':angry:': '\u{1F620}',
-  ':rage:': '\u{1F621}',
-  ':cry:': '\u{1F622}',
-  ':sob:': '\u{1F62D}',
-  ':scream:': '\u{1F631}',
-  ':fearful:': '\u{1F628}',
-  ':cold_sweat:': '\u{1F630}',
-  ':relieved:': '\u{1F60C}',
-  ':sleepy:': '\u{1F62A}',
-  ':sleeping:': '\u{1F634}',
-  ':mask:': '\u{1F637}',
-  ':sunglasses:': '\u{1F60E}',
-  ':nerd:': '\u{1F913}',
-  ':heart:': '\u{2764}\u{FE0F}',
-  ':broken_heart:': '\u{1F494}',
-  ':sparkling_heart:': '\u{1F496}',
-  ':two_hearts:': '\u{1F495}',
-  ':fire:': '\u{1F525}',
-  ':100:': '\u{1F4AF}',
-  ':star:': '\u{2B50}',
-  ':star2:': '\u{1F31F}',
-  ':sparkles:': '\u{2728}',
-  ':thumbsup:': '\u{1F44D}',
-  ':thumbsdown:': '\u{1F44E}',
-  ':wave:': '\u{1F44B}',
-  ':clap:': '\u{1F44F}',
-  ':raised_hands:': '\u{1F64C}',
-  ':pray:': '\u{1F64F}',
-  ':muscle:': '\u{1F4AA}',
-  ':point_up:': '\u{261D}\u{FE0F}',
-  ':point_down:': '\u{1F447}',
-  ':point_left:': '\u{1F448}',
-  ':point_right:': '\u{1F449}',
-  ':ok_hand:': '\u{1F44C}',
-  ':v:': '\u{270C}\u{FE0F}',
-  ':eyes:': '\u{1F440}',
-  ':tongue:': '\u{1F445}',
-  ':lips:': '\u{1F444}',
-  ':rocket:': '\u{1F680}',
-  ':tada:': '\u{1F389}',
-  ':confetti:': '\u{1F38A}',
-  ':balloon:': '\u{1F388}',
-  ':gift:': '\u{1F381}',
-  ':trophy:': '\u{1F3C6}',
-  ':medal:': '\u{1F3C5}',
-  ':crown:': '\u{1F451}',
-  ':gem:': '\u{1F48E}',
-  ':bell:': '\u{1F514}',
-  ':check:': '\u{2705}',
-  ':x:': '\u{274C}',
-  ':warning:': '\u{26A0}\u{FE0F}',
-  ':no_entry:': '\u{26D4}',
-  ':question:': '\u{2753}',
-  ':exclamation:': '\u{2757}',
-  ':bulb:': '\u{1F4A1}',
-  ':book:': '\u{1F4D6}',
-  ':memo:': '\u{1F4DD}',
-  ':pencil:': '\u{270F}\u{FE0F}',
-  ':calendar:': '\u{1F4C5}',
-  ':clock:': '\u{1F550}',
-  ':hourglass:': '\u{231B}',
-  ':lock:': '\u{1F512}',
-  ':key:': '\u{1F511}',
-  ':hammer:': '\u{1F528}',
-  ':wrench:': '\u{1F527}',
-  ':link:': '\u{1F517}',
-  ':paperclip:': '\u{1F4CE}',
-  ':scissors:': '\u{2702}\u{FE0F}',
-  ':package:': '\u{1F4E6}',
-  ':email:': '\u{1F4E7}',
-  ':phone:': '\u{1F4DE}',
-  ':computer:': '\u{1F4BB}',
-  ':house:': '\u{1F3E0}',
-  ':tree:': '\u{1F333}',
-  ':sun:': '\u{2600}\u{FE0F}',
-  ':moon:': '\u{1F319}',
-  ':cloud:': '\u{2601}\u{FE0F}',
-  ':rain:': '\u{1F327}\u{FE0F}',
-  ':snow:': '\u{2744}\u{FE0F}',
-  ':zap:': '\u{26A1}',
-  ':rainbow:': '\u{1F308}',
-  ':pizza:': '\u{1F355}',
-  ':hamburger:': '\u{1F354}',
-  ':coffee:': '\u{2615}',
-  ':beer:': '\u{1F37A}',
-  ':wine:': '\u{1F377}',
-  ':cake:': '\u{1F370}',
-  ':dog:': '\u{1F436}',
-  ':cat:': '\u{1F431}',
-  ':poop:': '\u{1F4A9}',
-  ':ghost:': '\u{1F47B}',
-  ':skull:': '\u{1F480}',
-  ':alien:': '\u{1F47D}',
-  ':robot:': '\u{1F916}',
-  ':handshake:': '\u{1F91D}',
-  ':pray2:': '\u{1F64F}',
-  ':salute:': '\u{1FAE1}',
-}
+/** `:shortcode:` → glyph, built from the shared dataset (full set + aliases). */
+export const EMOJI_MAP: Record<string, string> = buildShortcodeMap()
 
 // ---------------------------------------------------------------------------
 // Detection and search

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {