@happyvertical/smrt-chat 0.30.0

package/dist/svelte/components/shared/MentionAutocomplete.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface Props {
+    /** Current search query (text after @) */
+    query: string;
+    /** Matching suggestions */
+    suggestions: Array<{
+        id: string;
+        name: string;
+        avatarUrl?: string;
+    }>;
+    /** Select a suggestion */
+    onselect: (id: string) => void;
+    /** Whether the popup is visible */
+    isVisible: boolean;
+}
+declare const MentionAutocomplete: import("svelte").Component<Props, {}, "">;
+type MentionAutocomplete = ReturnType<typeof MentionAutocomplete>;
+export default MentionAutocomplete;
+//# sourceMappingURL=MentionAutocomplete.svelte.d.ts.map

package/dist/svelte/components/shared/MentionAutocomplete.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/MentionAutocomplete.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AA+ED,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/shared/MessageBubble.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+/**
+ * MessageBubble - Styled message bubble
+ * Different styling for own messages, others' messages, agent, and system.
+ */
+
+export interface Props {
+  /** Message content text */
+  content: string;
+  /** Whether this message was sent by the current user */
+  isOwn: boolean;
+  /** Visual variant of the bubble */
+  variant?: 'default' | 'agent' | 'system';
+}
+
+const { content, isOwn, variant = 'default' }: Props = $props();
+</script>
+
+<div
+  class="bubble {variant}"
+  class:own={isOwn}
+>
+  <p class="bubble__content">{content}</p>
+</div>
+
+<style>
+  .bubble {
+    max-width: 75%;
+    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
+    border-radius: var(--smrt-radius-large, 1rem);
+    word-break: break-word;
+    line-height: 1.4;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .bubble__content {
+    margin: 0;
+    white-space: pre-wrap;
+  }
+
+  /* Default variant - received */
+  .default {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface, #1b1b1f);
+    border-bottom-left-radius: var(--smrt-radius-small, 0.25rem);
+  }
+
+  /* Default variant - own message */
+  .default.own {
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #ffffff);
+    border-bottom-right-radius: var(--smrt-radius-small, 0.25rem);
+    border-bottom-left-radius: var(--smrt-radius-large, 1rem);
+  }
+
+  /* Agent variant */
+  .agent {
+    background: var(--smrt-color-tertiary-container, #ffd8e4);
+    color: var(--smrt-color-on-tertiary-container, #31111d);
+    border-bottom-left-radius: var(--smrt-radius-small, 0.25rem);
+    border-left: 3px solid var(--smrt-color-tertiary, #7d5260);
+  }
+
+  .agent.own {
+    border-left: none;
+    border-right: 3px solid var(--smrt-color-tertiary, #7d5260);
+    border-bottom-right-radius: var(--smrt-radius-small, 0.25rem);
+    border-bottom-left-radius: var(--smrt-radius-large, 1rem);
+  }
+
+  /* System variant */
+  .system {
+    max-width: 100%;
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    text-align: center;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    padding: var(--smrt-spacing-2, 0.375rem) var(--smrt-spacing-4, 1rem);
+    border-radius: 0;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+/**
+ * MessageBubble - Styled message bubble
+ * Different styling for own messages, others' messages, agent, and system.
+ */
+export interface Props {
+    /** Message content text */
+    content: string;
+    /** Whether this message was sent by the current user */
+    isOwn: boolean;
+    /** Visual variant of the bubble */
+    variant?: 'default' | 'agent' | 'system';
+}
+declare const MessageBubble: import("svelte").Component<Props, {}, "">;
+type MessageBubble = ReturnType<typeof MessageBubble>;
+export default MessageBubble;
+//# sourceMappingURL=MessageBubble.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/MessageBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C;AAeD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/shared/ReactionPicker.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+/**
+ * ReactionPicker - Emoji reaction selector
+ * Compact popup grid of common emojis.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Callback when an emoji is selected */
+  onreact: (emoji: string) => void;
+  /** Whether the picker is visible */
+  isOpen?: boolean;
+}
+
+const { onreact, isOpen = false }: Props = $props();
+
+const emojis = [
+  '\u{1F44D}',
+  '\u{1F44E}',
+  '\u{2764}\u{FE0F}',
+  '\u{1F602}',
+  '\u{1F62E}',
+  '\u{1F622}',
+  '\u{1F525}',
+  '\u{1F389}',
+  '\u{1F44F}',
+  '\u{1F914}',
+  '\u{1F60D}',
+  '\u{1F680}',
+  '\u{1F440}',
+  '\u{2705}',
+  '\u{274C}',
+  '\u{1F4AF}',
+];
+
+function handleSelect(emoji: string) {
+  onreact(emoji);
+}
+
+function handleKeydown(event: KeyboardEvent, emoji: string) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    handleSelect(emoji);
+  }
+}
+</script>
+
+{#if isOpen}
+  <div class="reaction-picker" role="group" aria-label={t(M['chat.reaction_picker.reactions'])}>
+    {#each emojis as emoji}
+      <button
+        class="reaction-picker__item"
+        type="button"
+        onclick={() => handleSelect(emoji)}
+        aria-label={t(M['chat.reaction_picker.react_with'], { emoji })}
+      >
+        {emoji}
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .reaction-picker {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: var(--smrt-spacing-1, 0.25rem);
+    padding: var(--smrt-spacing-2, 0.375rem);
+    background: var(--smrt-color-surface, #ffffff);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
+    width: max-content;
+  }
+
+  .reaction-picker__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: transparent;
+    cursor: pointer;
+    font-size: var(--smrt-typography-body-large-size, 1.125rem);
+    line-height: 1;
+    padding: 0;
+    transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .reaction-picker__item:hover {
+    background: var(--smrt-color-surface-container-high, #e1e3e8);
+  }
+
+  .reaction-picker__item:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+export interface Props {
+    /** Callback when an emoji is selected */
+    onreact: (emoji: string) => void;
+    /** Whether the picker is visible */
+    isOpen?: boolean;
+}
+declare const ReactionPicker: import("svelte").Component<Props, {}, "">;
+type ReactionPicker = ReturnType<typeof ReactionPicker>;
+export default ReactionPicker;
+//# sourceMappingURL=ReactionPicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/ReactionPicker.svelte.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,KAAK;IACpB,yCAAyC;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAwDD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/shared/ReadReceipts.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+/**
+ * ReadReceipts - Message read status display
+ * Shows checkmarks or small avatars indicating who has read a message.
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Users who have read the message */
+  readBy: Array<{ name: string; avatarUrl?: string }>;
+  /** Total participants in the conversation */
+  totalParticipants: number;
+}
+
+const { readBy, totalParticipants }: Props = $props();
+
+const allRead = $derived(readBy.length >= totalParticipants - 1);
+const showAvatars = $derived(readBy.length <= 5);
+
+function getInitial(name: string): string {
+  return (name[0] ?? '?').toUpperCase();
+}
+</script>
+
+<span class="read-receipts" aria-label={t(M['chat.read_receipts.read_status'], { readCount: readBy.length, total: totalParticipants })}>
+  {#if readBy.length === 0}
+    <!-- Single check: sent -->
+    <svg class="read-receipts__icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+      <path d="M13.5 4.5l-7 7L3 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  {:else if !showAvatars}
+    <!-- Double check with count -->
+    <svg class="read-receipts__icon read-receipts__icon--read" viewBox="0 0 20 16" width="18" height="14" aria-hidden="true">
+      <path d="M15.5 4.5l-7 7L5 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M19 4.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    <span class="read-receipts__count">{readBy.length}</span>
+  {:else}
+    <!-- Double check with mini avatars -->
+    <svg class="read-receipts__icon" class:read-receipts__icon--read={allRead} viewBox="0 0 20 16" width="18" height="14" aria-hidden="true">
+      <path d="M15.5 4.5l-7 7L5 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M19 4.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    {#if readBy.length > 0}
+      <span class="read-receipts__avatars">
+        {#each readBy.slice(0, 3) as reader}
+          {#if reader.avatarUrl}
+            <img class="read-receipts__mini-avatar" src={reader.avatarUrl} alt={reader.name} />
+          {:else}
+            <span class="read-receipts__mini-avatar read-receipts__mini-avatar--initials" title={reader.name}>
+              {getInitial(reader.name)}
+            </span>
+          {/if}
+        {/each}
+        {#if readBy.length > 3}
+          <span class="read-receipts__mini-avatar read-receipts__mini-avatar--more">
+            +{readBy.length - 3}
+          </span>
+        {/if}
+      </span>
+    {/if}
+  {/if}
+</span>
+
+<style>
+  .read-receipts {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    color: var(--smrt-color-outline, #74777f);
+  }
+
+  .read-receipts__icon {
+    flex-shrink: 0;
+  }
+
+  .read-receipts__icon--read {
+    color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .read-receipts__count {
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .read-receipts__avatars {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .read-receipts__mini-avatar {
+    width: 16px;
+    height: 16px;
+    border-radius: var(--smrt-radius-full, 9999px);
+    border: 1px solid var(--smrt-color-surface, #ffffff);
+    margin-left: -4px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .read-receipts__mini-avatar:first-child {
+    margin-left: 0;
+  }
+
+  .read-receipts__mini-avatar--initials {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--smrt-color-surface-container-high, #e1e3e8);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font-size: var(--smrt-typography-label-small-size, 0.5rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .read-receipts__mini-avatar--more {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font-size: var(--smrt-typography-label-small-size, 0.5rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+</style>

package/dist/svelte/components/shared/ReadReceipts.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface Props {
+    /** Users who have read the message */
+    readBy: Array<{
+        name: string;
+        avatarUrl?: string;
+    }>;
+    /** Total participants in the conversation */
+    totalParticipants: number;
+}
+declare const ReadReceipts: import("svelte").Component<Props, {}, "">;
+type ReadReceipts = ReturnType<typeof ReadReceipts>;
+export default ReadReceipts;
+//# sourceMappingURL=ReadReceipts.svelte.d.ts.map

package/dist/svelte/components/shared/ReadReceipts.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadReceipts.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/ReadReceipts.svelte.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,KAAK;IACpB,sCAAsC;IACtC,MAAM,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,6CAA6C;IAC7C,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AA+DD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/shared/TypingIndicator.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+/**
+ * TypingIndicator - Animated "typing..." display
+ * Shows "Alice is typing..." or "Alice and Bob are typing..." with animated dots.
+ */
+
+export interface Props {
+  /** Names of users currently typing */
+  names: string[];
+}
+
+const { names }: Props = $props();
+
+const label = $derived.by(() => {
+  if (names.length === 0) return '';
+  if (names.length === 1) return `${names[0]} is typing`;
+  if (names.length === 2) return `${names[0]} and ${names[1]} are typing`;
+  return `${names[0]} and ${names.length - 1} others are typing`;
+});
+</script>
+
+{#if names.length > 0}
+  <div class="typing" aria-live="polite" aria-label="{label}">
+    <span class="typing__text">{label}</span>
+    <span class="typing__dots" aria-hidden="true">
+      <span class="typing__dot"></span>
+      <span class="typing__dot"></span>
+      <span class="typing__dot"></span>
+    </span>
+  </div>
+{/if}
+
+<style>
+  .typing {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-3, 0.75rem);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .typing__text {
+    white-space: nowrap;
+  }
+
+  .typing__dots {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+
+  .typing__dot {
+    width: 4px;
+    height: 4px;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-on-surface-variant, #43474e);
+    animation: typing-bounce 1.4s infinite ease-in-out both;
+  }
+
+  .typing__dot:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  .typing__dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .typing__dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes typing-bounce {
+    0%, 80%, 100% {
+      opacity: 0.3;
+      transform: scale(0.8);
+    }
+    40% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .typing__dot {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+</style>

package/dist/svelte/components/shared/TypingIndicator.svelte.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TypingIndicator - Animated "typing..." display
+ * Shows "Alice is typing..." or "Alice and Bob are typing..." with animated dots.
+ */
+export interface Props {
+    /** Names of users currently typing */
+    names: string[];
+}
+declare const TypingIndicator: import("svelte").Component<Props, {}, "">;
+type TypingIndicator = ReturnType<typeof TypingIndicator>;
+export default TypingIndicator;
+//# sourceMappingURL=TypingIndicator.svelte.d.ts.map

package/dist/svelte/components/shared/TypingIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/TypingIndicator.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,WAAW,KAAK;IACpB,sCAAsC;IACtC,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AA6BD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/shared/UserPresence.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+/**
+ * UserPresence - Online/offline status indicator with optional label
+ */
+
+export interface Props {
+  /** Current presence status */
+  status: 'online' | 'away' | 'dnd' | 'offline';
+  /** Whether to show a text label next to the dot */
+  showLabel?: boolean;
+}
+
+const { status, showLabel = false }: Props = $props();
+
+const labelText: Record<string, string> = {
+  online: 'Online',
+  away: 'Away',
+  dnd: 'Do not disturb',
+  offline: 'Offline',
+};
+</script>
+
+<span class="presence" aria-label={labelText[status]}>
+  <span class="presence__dot {status}"></span>
+  {#if showLabel}
+    <span class="presence__label">{labelText[status]}</span>
+  {/if}
+</span>
+
+<style>
+  .presence {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.375rem);
+  }
+
+  .presence__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--smrt-radius-full, 9999px);
+    flex-shrink: 0;
+  }
+
+  .presence__dot.online {
+    background: var(--smrt-color-success, #4caf50);
+  }
+
+  .presence__dot.away {
+    background: var(--smrt-color-warning, #ff9800);
+  }
+
+  .presence__dot.dnd {
+    background: var(--smrt-color-error, #f44336);
+  }
+
+  .presence__dot.offline {
+    background: var(--smrt-color-outline, #74777f);
+  }
+
+  .presence__label {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    line-height: 1;
+  }
+</style>

package/dist/svelte/components/shared/UserPresence.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+ * UserPresence - Online/offline status indicator with optional label
+ */
+export interface Props {
+    /** Current presence status */
+    status: 'online' | 'away' | 'dnd' | 'offline';
+    /** Whether to show a text label next to the dot */
+    showLabel?: boolean;
+}
+declare const UserPresence: import("svelte").Component<Props, {}, "">;
+type UserPresence = ReturnType<typeof UserPresence>;
+export default UserPresence;
+//# sourceMappingURL=UserPresence.svelte.d.ts.map

package/dist/svelte/components/shared/UserPresence.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserPresence.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/UserPresence.svelte.ts"],"names":[],"mappings":"AAGA;;GAEG;AAEH,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,MAAM,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;IAC9C,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAyBD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/shared/__tests__/Avatar.test.js

@@ -0,0 +1,20 @@
+// @vitest-environment jsdom
+/**
+ * First component test in smrt-chat via the shared S11 harness (#1416). Avatar is
+ * the thin adapter over the library Avatar (maps avatarUrl→src, dnd→busy).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import Avatar from '../Avatar.svelte';
+describe('Avatar', () => {
+    it('renders the initials derived from the name', () => {
+        render(Avatar, { props: { name: 'Ada Lovelace' } });
+        expect(screen.getByText('AL')).toBeInTheDocument();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Avatar, {
+            props: { name: 'Ada Lovelace', onlineStatus: 'online' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/shared/__tests__/LinkPreview.test.js

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for LinkPreview via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import LinkPreview from '../LinkPreview.svelte';
+describe('LinkPreview', () => {
+    it('renders a link with title, description, and hostname', () => {
+        render(LinkPreview, {
+            props: {
+                url: 'https://example.com/article',
+                title: 'An Article',
+                description: 'A short summary',
+            },
+        });
+        const link = screen.getByRole('link');
+        expect(link).toHaveAttribute('href', 'https://example.com/article');
+        expect(screen.getByText('An Article')).toBeInTheDocument();
+        expect(screen.getByText('A short summary')).toBeInTheDocument();
+        expect(screen.getByText('example.com')).toBeInTheDocument();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(LinkPreview, {
+            props: { url: 'https://example.com', title: 'Example' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/shared/__tests__/MessageBubble.test.js

@@ -0,0 +1,21 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for MessageBubble via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import MessageBubble from '../MessageBubble.svelte';
+describe('MessageBubble', () => {
+    it('renders the message content', () => {
+        render(MessageBubble, {
+            props: { content: 'Hello there', isOwn: false },
+        });
+        expect(screen.getByText('Hello there')).toBeInTheDocument();
+    });
+    it('is axe-clean for an own message', async () => {
+        const { container } = render(MessageBubble, {
+            props: { content: 'Hi', isOwn: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});