@happyvertical/smrt-ui 0.30.0

package/dist/components/calendar/DayView.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+/**
+ * DayView Component
+ * Full event list for a specific day with optional weather
+ */
+
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+import type { DayEventDetail, DayForecast } from '../../types-generic';
+
+const { t } = useI18n();
+
+export interface Props {
+  date: Date;
+  events?: DayEventDetail[] | null;
+  forecast?: DayForecast | null;
+  calendarUrl?: string;
+  /** Callback when an event card is clicked */
+  onEventClick?: (eventType: string, eventName: string) => void;
+}
+
+const {
+  date,
+  events = null,
+  forecast = null,
+  calendarUrl = '/events',
+  onEventClick,
+}: Props = $props();
+
+// Format full date
+const formattedDate = $derived(
+  date.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }),
+);
+
+// Get event icon
+function getEventIcon(type: DayEventDetail['type']): string {
+  switch (type) {
+    case 'game':
+      return '\u{1F3D2}'; // hockey stick and puck
+    case 'meeting':
+      return '\u{1F3DB}'; // classical building
+    case 'event':
+      return '\u{1F4C5}'; // calendar
+    default:
+      return '\u{1F4C5}';
+  }
+}
+
+// Get event URL based on type
+function getEventUrl(event: DayEventDetail): string | null {
+  if (event.type === 'game') {
+    return `/sports/hockey/games/${event.slug}/`;
+  }
+  if (event.type === 'meeting' && event.councilSlug) {
+    return `/meetings/${event.councilSlug}/${event.slug}/`;
+  }
+  // Other events don't have detail pages
+  return null;
+}
+
+// Group events by type for display
+const groupedEvents = $derived(() => {
+  if (!events || events.length === 0) return null;
+
+  const groups: Record<string, DayEventDetail[]> = {};
+  for (const event of events) {
+    if (!groups[event.type]) {
+      groups[event.type] = [];
+    }
+    groups[event.type].push(event);
+  }
+  return groups;
+});
+
+// Get type label
+function getTypeLabel(type: string): string {
+  switch (type) {
+    case 'game':
+      return 'Games';
+    case 'meeting':
+      return 'Meetings';
+    case 'event':
+      return 'Events';
+    default:
+      return 'Other';
+  }
+}
+</script>
+
+<div class="day-view">
+  <header class="day-header">
+    <a href={calendarUrl} class="back-link">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      {t(M['ui.day_view.back_to_calendar'])}
+    </a>
+    <h1 class="date-title">{formattedDate}</h1>
+
+    {#if forecast}
+      <div class="weather-summary">
+        <span class="weather-icon">{forecast.icon}</span>
+        <span class="weather-temps">
+          <span class="high">{forecast.high}°</span>
+          <span class="low">{forecast.low}°</span>
+        </span>
+      </div>
+    {/if}
+  </header>
+
+  <div class="day-content">
+    {#if !events || events.length === 0}
+      <div class="empty-state">
+        <span class="empty-icon">{'\u{1F4C5}'}</span>
+        <p class="empty-text">{t(M['ui.day_view.no_events'])}</p>
+      </div>
+    {:else if groupedEvents()}
+      {#each Object.entries(groupedEvents()!) as [type, typeEvents]}
+        <section class="event-group">
+          <h2 class="group-title">
+            <span class="group-icon">{getEventIcon(type as DayEventDetail['type'])}</span>
+            {getTypeLabel(type)}
+            <span class="group-count">({typeEvents.length})</span>
+          </h2>
+
+          <div class="event-list">
+            {#each typeEvents as event}
+              {@const url = getEventUrl(event)}
+              {#if url}
+                <a href={url} class="event-card event-card--link" onclick={() => onEventClick?.(event.type, event.name)}>
+                  <div class="event-time">{event.startTime}</div>
+                  <div class="event-details">
+                    <span class="event-name">{event.name}</span>
+                    {#if event.venue}
+                      <span class="event-venue">{event.venue}</span>
+                    {/if}
+                  </div>
+                  <span class="event-arrow">→</span>
+                </a>
+              {:else}
+                <button
+                  type="button"
+                  class="event-card event-card--button"
+                  onclick={() => onEventClick?.(event.type, event.name)}
+                >
+                  <div class="event-time">{event.startTime}</div>
+                  <div class="event-details">
+                    <span class="event-name">{event.name}</span>
+                    {#if event.venue}
+                      <span class="event-venue">{event.venue}</span>
+                    {/if}
+                  </div>
+                </button>
+              {/if}
+            {/each}
+          </div>
+        </section>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .day-view {
+    --view-bg: var(--smrt-color-surface, #ffffff);
+    --view-border: var(--smrt-color-outline-variant, #e5e7eb);
+    --header-bg: var(--smrt-color-surface-container-low, #f5f5f5);
+    --card-hover: var(--smrt-color-surface-container-low, #f5f5f5);
+
+    background: var(--view-bg);
+  }
+
+  /*
+   * Dark mode. Reference the base `--smrt-color-*` tokens, which already swap
+   * to dark values under the active dark scheme (issue #1431 — the old
+   * `--smrt-color-*-dark` tokens were never emitted).
+   */
+  :global([data-theme="dark"]) .day-view {
+    --view-bg: var(--smrt-color-surface, #242424);
+    --view-border: var(--smrt-color-outline-variant, #3a3a3a);
+    --header-bg: var(--smrt-color-surface-container-low, #2e2e2e);
+    --card-hover: var(--smrt-color-surface-container-high, #3a3a3a);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :global(:root:not([data-theme="light"])) .day-view {
+      --view-bg: var(--smrt-color-surface, #242424);
+      --view-border: var(--smrt-color-outline-variant, #3a3a3a);
+      --header-bg: var(--smrt-color-surface-container-low, #2e2e2e);
+      --card-hover: var(--smrt-color-surface-container-high, #3a3a3a);
+    }
+  }
+
+  .day-header {
+    padding: var(--smrt-spacing-6, 1.5rem);
+    background: var(--header-bg);
+    border-bottom: 1px solid var(--view-border);
+  }
+
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    color: var(--smrt-color-primary, #005ac1);
+    text-decoration: none;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    margin-bottom: var(--smrt-spacing-4, 1rem);
+    transition: color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .back-link:hover {
+    color: var(--smrt-color-on-primary-container, #1b1b1f);
+  }
+
+  .date-title {
+    margin: 0;
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+    font-weight: var(--smrt-typography-headline-small-weight, 600);
+    color: var(--smrt-color-on-surface, #333);
+  }
+
+  .weather-summary {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    margin-top: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .weather-icon {
+    font-size: var(--smrt-typography-headline-small-size, 24px);
+  }
+
+  .weather-temps {
+    display: flex;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    font-size: var(--smrt-typography-title-medium-size, 1.125rem);
+  }
+
+  .high {
+    font-weight: var(--smrt-typography-title-medium-weight, 600);
+  }
+
+  .low {
+    color: var(--smrt-color-on-surface-variant, #666);
+  }
+
+  .day-content {
+    padding: var(--smrt-spacing-6, 1.5rem);
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: var(--smrt-spacing-12, 3rem) var(--smrt-spacing-6, 1.5rem);
+    color: var(--smrt-color-on-surface-variant, #666);
+  }
+
+  .empty-icon {
+    font-size: var(--smrt-typography-display-medium-size, 48px);
+    display: block;
+    margin-bottom: var(--smrt-spacing-4, 1rem);
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    margin: 0;
+    font-size: var(--smrt-typography-title-medium-size, 1.125rem);
+  }
+
+  .event-group {
+    margin-bottom: var(--smrt-spacing-8, 2rem);
+  }
+
+  .event-group:last-child {
+    margin-bottom: 0;
+  }
+
+  .group-title {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    margin: 0 0 var(--smrt-spacing-4, 1rem) 0;
+    font-size: var(--smrt-typography-title-medium-size, 1.125rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 600);
+    color: var(--smrt-color-on-surface, #333);
+  }
+
+  .group-icon {
+    font-size: var(--smrt-typography-title-large-size, 20px);
+  }
+
+  .group-count {
+    font-weight: var(--smrt-typography-body-medium-weight, 400);
+    color: var(--smrt-color-on-surface-variant, #666);
+  }
+
+  .event-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .event-card {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-4, 1rem);
+    padding: var(--smrt-spacing-4, 1rem);
+    background: var(--view-bg);
+    border: 1px solid var(--view-border);
+    border-radius: var(--smrt-radius-medium, 8px);
+    text-decoration: none;
+    color: var(--smrt-color-on-surface, #333);
+    transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .event-card--link:hover {
+    background: var(--card-hover);
+    border-color: var(--smrt-color-outline, #79747e);
+  }
+
+  .event-card--link:hover .event-arrow {
+    transform: translateX(4px);
+    transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .event-time {
+    flex-shrink: 0;
+    width: 80px;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-body-medium-weight, 500);
+    color: var(--smrt-color-on-surface-variant, #666);
+  }
+
+  .event-details {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .event-name {
+    display: block;
+    font-weight: var(--smrt-typography-body-medium-weight, 500);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .event-venue {
+    display: block;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant, #666);
+    margin-top: var(--smrt-spacing-1, 4px);
+  }
+
+  .event-arrow {
+    flex-shrink: 0;
+    color: var(--smrt-color-on-surface-variant, #666);
+    transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  @media (max-width: 640px) {
+    .day-header {
+      padding: var(--smrt-spacing-4, 1rem);
+    }
+
+    .date-title {
+      font-size: var(--smrt-typography-title-medium-size, 1.25rem);
+    }
+
+    .day-content {
+      padding: var(--smrt-spacing-4, 1rem);
+    }
+
+    .event-card {
+      flex-wrap: wrap;
+    }
+
+    .event-time {
+      width: 100%;
+    }
+
+    .event-details {
+      width: 100%;
+    }
+  }
+</style>

package/dist/components/calendar/DayView.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DayEventDetail, DayForecast } from '../../types-generic';
+export interface Props {
+    date: Date;
+    events?: DayEventDetail[] | null;
+    forecast?: DayForecast | null;
+    calendarUrl?: string;
+    /** Callback when an event card is clicked */
+    onEventClick?: (eventType: string, eventName: string) => void;
+}
+declare const DayView: import("svelte").Component<Props, {}, "">;
+type DayView = ReturnType<typeof DayView>;
+export default DayView;
+//# sourceMappingURL=DayView.svelte.d.ts.map

package/dist/components/calendar/DayView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayView.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/DayView.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AA6JD,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Calendar components - Month and day views with event support
+ */
+export { default as Calendar } from './Calendar.svelte';
+export { default as DayView } from './DayView.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/calendar/index.js

@@ -0,0 +1,5 @@
+/**
+ * Calendar components - Month and day views with event support
+ */
+export { default as Calendar } from './Calendar.svelte';
+export { default as DayView } from './DayView.svelte';

package/dist/components/chat/MessageBubble.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+/**
+ * MessageBubble — a single chat message with user / agent / system variants.
+ *
+ * Renders the author + an optional `<time>` timestamp, the message body
+ * (`children`), and optional `reactions` / `actions` snippets. The bubble is a
+ * labelled `role="group"` (`<author>, <role>`) so assistive tech can navigate
+ * messages and announce who sent each one.
+ */
+import type { Snippet } from 'svelte';
+import type { ChatMessageRole } from '../../types-generic';
+
+export interface Props {
+  /** Who sent the message. Drives styling and the group label. */
+  role?: ChatMessageRole;
+  /** Display name of the sender. */
+  author?: string;
+  /** Message time; rendered in a `<time datetime>` element. */
+  timestamp?: Date;
+  /** Override the visible timestamp text (defaults to a locale time). */
+  timestampLabel?: string;
+  /** Message body. */
+  children: Snippet;
+  /** Optional reactions row (e.g. a `ReactionPicker` or reaction chips). */
+  reactions?: Snippet;
+  /** Optional per-message actions (reply, copy, …). */
+  actions?: Snippet;
+}
+
+const {
+  role = 'user',
+  author,
+  timestamp,
+  timestampLabel,
+  children,
+  reactions,
+  actions,
+}: Props = $props();
+
+const roleNoun: Record<ChatMessageRole, string> = {
+  user: 'You',
+  agent: 'Assistant',
+  system: 'System',
+};
+
+const groupLabel = $derived(`${author ?? roleNoun[role]} (${role})`);
+const isoTime = $derived(timestamp ? timestamp.toISOString() : undefined);
+const timeText = $derived(
+  timestampLabel ?? timestamp?.toLocaleTimeString() ?? '',
+);
+</script>
+
+<div class="bubble bubble--{role}" role="group" aria-label={groupLabel}>
+  <div class="bubble__header">
+    <span class="bubble__author">{author ?? roleNoun[role]}</span>
+    {#if timeText}
+      <time class="bubble__time" datetime={isoTime}>{timeText}</time>
+    {/if}
+  </div>
+
+  <div class="bubble__body">
+    {@render children()}
+  </div>
+
+  {#if reactions}
+    <div class="bubble__reactions">{@render reactions()}</div>
+  {/if}
+
+  {#if actions}
+    <div class="bubble__actions">{@render actions()}</div>
+  {/if}
+</div>
+
+<style>
+  .bubble {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+    max-width: 42rem;
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    border-radius: var(--smrt-radius-large, 12px);
+    background: var(--smrt-color-surface-container, #f3edf7);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .bubble--user {
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    align-self: flex-end;
+  }
+  .bubble--system {
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface-variant);
+    align-self: center;
+    font-style: italic;
+  }
+
+  .bubble__header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--smrt-spacing-2, 8px);
+  }
+  .bubble__author {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+  .bubble__time {
+    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    opacity: 0.8;
+  }
+
+  .bubble__body {
+    font-size: var(--smrt-typography-body-medium-size, 1rem);
+    line-height: var(--smrt-typography-body-medium-line-height, 1.5);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .bubble__reactions,
+  .bubble__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+</style>

package/dist/components/chat/MessageBubble.svelte.d.ts

@@ -0,0 +1,30 @@
+/**
+ * MessageBubble — a single chat message with user / agent / system variants.
+ *
+ * Renders the author + an optional `<time>` timestamp, the message body
+ * (`children`), and optional `reactions` / `actions` snippets. The bubble is a
+ * labelled `role="group"` (`<author>, <role>`) so assistive tech can navigate
+ * messages and announce who sent each one.
+ */
+import type { Snippet } from 'svelte';
+import type { ChatMessageRole } from '../../types-generic';
+export interface Props {
+    /** Who sent the message. Drives styling and the group label. */
+    role?: ChatMessageRole;
+    /** Display name of the sender. */
+    author?: string;
+    /** Message time; rendered in a `<time datetime>` element. */
+    timestamp?: Date;
+    /** Override the visible timestamp text (defaults to a locale time). */
+    timestampLabel?: string;
+    /** Message body. */
+    children: Snippet;
+    /** Optional reactions row (e.g. a `ReactionPicker` or reaction chips). */
+    reactions?: Snippet;
+    /** Optional per-message actions (reply, copy, …). */
+    actions?: Snippet;
+}
+declare const MessageBubble: import("svelte").Component<Props, {}, "">;
+type MessageBubble = ReturnType<typeof MessageBubble>;
+export default MessageBubble;
+//# sourceMappingURL=MessageBubble.svelte.d.ts.map

package/dist/components/chat/MessageBubble.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/MessageBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,MAAM,WAAW,KAAK;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAuDD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/chat/ReactionPicker.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+/**
+ * ReactionPicker — a labelled group of emoji reaction buttons.
+ *
+ * Each button has a text accessible name (so the emoji isn't announced as raw
+ * glyphs), and the group carries an `aria-label`. Fires `onpick(emoji)` on
+ * activation.
+ */
+export interface Props {
+  /** Emoji set to offer. */
+  emojis?: string[];
+  /** Accessible label for the group. */
+  label?: string;
+  /** Fired with the chosen emoji. */
+  onpick?: (emoji: string) => void;
+}
+
+const DEFAULT_EMOJIS = ['👍', '❤️', '😂', '🎉', '😮', '😢'];
+const EMOJI_LABELS: Record<string, string> = {
+  '👍': 'Thumbs up',
+  '❤️': 'Heart',
+  '😂': 'Laugh',
+  '🎉': 'Celebrate',
+  '😮': 'Surprised',
+  '😢': 'Sad',
+};
+
+const {
+  emojis = DEFAULT_EMOJIS,
+  label = 'Add reaction',
+  onpick,
+}: Props = $props();
+</script>
+
+<div class="reactions" role="group" aria-label={label}>
+  {#each emojis as emoji (emoji)}
+    <button
+      type="button"
+      class="reactions__btn"
+      aria-label={EMOJI_LABELS[emoji] ?? `React with ${emoji}`}
+      onclick={() => onpick?.(emoji)}
+    >
+      <span aria-hidden="true">{emoji}</span>
+    </button>
+  {/each}
+</div>
+
+<style>
+  .reactions {
+    display: inline-flex;
+    gap: var(--smrt-spacing-1, 4px);
+    padding: var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container, #f3edf7);
+  }
+
+  .reactions__btn {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: none;
+    font-size: var(--smrt-typography-title-medium-size, 1.1rem);
+    line-height: 1;
+    cursor: pointer;
+    transition: transform 0.1s ease, background 0.1s ease;
+  }
+  .reactions__btn:hover {
+    background: var(--smrt-color-surface-container-highest, #e6e0e9);
+    transform: scale(1.15);
+  }
+  .reactions__btn:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .reactions__btn {
+      transition: none;
+    }
+    .reactions__btn:hover {
+      transform: none;
+    }
+  }
+</style>

package/dist/components/chat/ReactionPicker.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ReactionPicker — a labelled group of emoji reaction buttons.
+ *
+ * Each button has a text accessible name (so the emoji isn't announced as raw
+ * glyphs), and the group carries an `aria-label`. Fires `onpick(emoji)` on
+ * activation.
+ */
+export interface Props {
+    /** Emoji set to offer. */
+    emojis?: string[];
+    /** Accessible label for the group. */
+    label?: string;
+    /** Fired with the chosen emoji. */
+    onpick?: (emoji: string) => void;
+}
+declare const ReactionPicker: import("svelte").Component<Props, {}, "">;
+type ReactionPicker = ReturnType<typeof ReactionPicker>;
+export default ReactionPicker;
+//# sourceMappingURL=ReactionPicker.svelte.d.ts.map

package/dist/components/chat/ReactionPicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ReactionPicker.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,WAAW,KAAK;IACpB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAiCD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}