@refraction-ui/astro 0.16.0 → 0.17.0

package/dist/composer/emoji-trigger.ts

@@ -0,0 +1,51 @@
+/**
+ * `createEmojiTrigger` — a ready-made `:` shortcode trigger backed by the shared
+ * emoji dataset (`@refraction-ui/emoji-picker`, ~1900 base emoji), so the
+ * composer's `:` menu is complete and matches the picker exactly (one source of
+ * truth, no divergence). The committed token is the native glyph.
+ *
+ * This module is side-effect free and imports the dataset lazily via the emoji
+ * search API, so it is only pulled into a bundle when `createEmojiTrigger` is
+ * actually referenced.
+ */
+import { searchEmojis } from '../emoji-picker/index.ts'
+import type { ComposerCandidate, ComposerTrigger } from './types.js'
+
+export interface EmojiTriggerOptions {
+  /** Trigger id. Default 'emoji'. */
+  id?: string
+  /** Symbol. Default ':'. */
+  symbol?: string
+  /** Max results surfaced to the menu. Default 8. */
+  maxResults?: number
+  /**
+   * Minimum query length before resolving (avoids flooding the menu with the
+   * whole set on a lone ':'). Default 1.
+   */
+  minQueryLength?: number
+}
+
+/**
+ * Build a `:` emoji trigger. Typing `:fir` filters the full set; committing
+ * inserts the glyph (🔥). Pair it with the picker for the same coverage in both
+ * surfaces.
+ */
+export function createEmojiTrigger(options: EmojiTriggerOptions = {}): ComposerTrigger {
+  const { id = 'emoji', symbol = ':', maxResults = 8, minQueryLength = 1 } = options
+  return {
+    id,
+    symbol,
+    // The committed token is the glyph itself, not `:name:`.
+    toDisplay: (candidate: ComposerCandidate) =>
+      (candidate.metadata?.emoji as string | undefined) ?? candidate.display,
+    resolve: (query: string): ComposerCandidate[] => {
+      if (query.length < minQueryLength) return []
+      return searchEmojis(query, maxResults).map((entry) => ({
+        id: `${entry.shortcode}`,
+        display: `${entry.emoji} :${entry.shortcode}:`,
+        subtitle: entry.name,
+        metadata: { emoji: entry.emoji, shortcode: entry.shortcode },
+      }))
+    },
+  }
+}

package/dist/composer/index.ts

@@ -6,3 +6,4 @@ export * from './suggestion.ts'
 export * from './tokens.ts'
 export * from './composer.ts'
 export * from './styles.ts'
+export { createEmojiTrigger, type EmojiTriggerOptions } from './emoji-trigger.js'

package/dist/composer/styles.ts

@@ -6,13 +6,25 @@
 
 import { cva } from '../shared/index.ts'
 
-/** Outer surface (the rounded card wrapping tray + field + action row). */
+/**
+ * Outer surface (the rounded card wrapping tray + field + action row).
+ * `surface` picks the resting fill: `outlined` (transparent-on-page card) or
+ * `filled` (a calm muted fill distinct from the page). Both keep a tasteful
+ * focus-visible ring on the pill — a hairline border plus a single-px ring, not
+ * a slammed saturated full-perimeter brand border.
+ */
 export const composerSurfaceVariants = cva({
   base: [
-    'overflow-hidden rounded-2xl border border-border bg-background shadow-sm',
-    'transition-shadow focus-within:border-foreground/25 focus-within:shadow-md',
+    'overflow-hidden rounded-2xl border shadow-sm',
+    'transition-[box-shadow,border-color,background-color] duration-150 ease-out',
+    'focus-within:ring-1 focus-within:ring-ring focus-within:shadow-md',
+    'motion-reduce:transition-none',
   ].join(' '),
   variants: {
+    surface: {
+      outlined: 'border-border bg-background focus-within:border-ring',
+      filled: 'border-border/50 bg-muted/50 focus-within:border-ring/70 focus-within:bg-background',
+    },
     disabled: {
       true: 'pointer-events-none opacity-60',
       false: '',
@@ -23,6 +35,7 @@ export const composerSurfaceVariants = cva({
     },
   },
   defaultVariants: {
+    surface: 'outlined',
     disabled: 'false',
     error: 'false',
   },
@@ -35,9 +48,16 @@ export const composerFieldClass =
 /** Attachment tray above the field, inside the dock. */
 export const composerTrayClass = 'flex flex-wrap gap-2 px-3 pt-3'
 
-/** A single attachment chip. */
+/**
+ * A single attachment chip. Chips animate in on add (scale + fade) and, when
+ * the adapter marks one `exiting`, animate out faster before unmounting. Both
+ * degrade to opacity-only / instant under reduced motion.
+ */
 export const composerAttachmentChipVariants = cva({
-  base: 'inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs',
+  base: [
+    'inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs',
+    'origin-left transition-all duration-150 ease-out motion-reduce:transition-none',
+  ].join(' '),
   variants: {
     status: {
       pending: 'opacity-70',
@@ -45,9 +65,14 @@ export const composerAttachmentChipVariants = cva({
       ready: '',
       error: 'text-destructive',
     },
+    exiting: {
+      true: 'scale-90 opacity-0 motion-reduce:scale-100',
+      false: 'motion-safe:animate-fade-in-scale',
+    },
   },
   defaultVariants: {
     status: 'pending',
+    exiting: 'false',
   },
 })
 
@@ -55,9 +80,35 @@ export const composerAttachmentChipVariants = cva({
 export const composerTokenPillClass =
   'rounded bg-accent/40 px-0.5 text-accent-foreground'
 
-/** The caret-anchored suggestion menu. */
+/**
+ * The caret-anchored suggestion menu. Enters with an eased fade+scale from its
+ * bottom edge (it sits above the field); reduced motion drops the movement.
+ */
 export const composerMenuClass =
-  'z-20 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg'
+  'z-20 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg origin-bottom motion-safe:animate-fade-in-scale'
+
+/**
+ * The inline expression/accessory panel docked below the field. It is part of
+ * the composer's own stack (never a floating portal), so the textarea and the
+ * message in progress stay fully visible while the panel is open. Opens with an
+ * eased fade; reduced motion shows it instantly.
+ */
+export const composerAccessoryPanelClass =
+  'border-t border-border motion-safe:animate-fade-in'
+
+/** The built-in expression-panel toggle button. */
+export const composerAccessoryToggleVariants = cva({
+  base: 'flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  variants: {
+    active: {
+      true: 'bg-accent text-foreground',
+      false: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})
 
 /** A suggestion row; `active` follows keyboard/pointer last-input-wins. */
 export const composerMenuItemVariants = cva({
@@ -87,9 +138,13 @@ export const composerCounterVariants = cva({
   },
 })
 
-/** Primary action (send ⇄ stop swap driven by `{hasText, canSend, isBusy}`). */
+/**
+ * Primary action (send ⇄ stop swap driven by `{hasText, canSend, isBusy}`).
+ * The colour/affordance change eases; the adapter keys the button on busy so
+ * the swap pops in (scale) rather than snapping. Reduced motion keeps it calm.
+ */
 export const composerPrimaryActionVariants = cva({
-  base: 'flex h-9 w-9 items-center justify-center rounded-full transition',
+  base: 'flex h-9 w-9 items-center justify-center rounded-full transition-all duration-150 ease-out active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 motion-safe:animate-scale-in',
   variants: {
     enabled: {
       true: 'bg-primary text-primary-foreground hover:opacity-90',