@texuli/chat 0.0.0-stage → 0.1.0-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dailybot, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# @texuli/chat
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Chat interfaces: thread, message list, composer and typing indicator, generic for people and agents.
+
+**Status:** scaffolded. Its contents are built by the PLAN_001 tasks T-chat-thread and T-chat-composer; per-item notes live in `docs/` here until they are folded into this README.

package/dist/composer/Composer.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { Button } from 'texuli/button';
+import { type ClassValue, cx } from 'texuli/cx';
+import { autosizeTextarea } from 'texuli/input';
+import { type ComposerLabels, DEFAULT_COMPOSER_LABELS } from './labels.js';
+
+interface Props {
+  value?: string;
+  /** Return false to keep the draft, or reject to show the translated error. */
+  onSubmit: (message: string) => unknown;
+  labels?: Partial<ComposerLabels>;
+  disabled?: boolean;
+  /** External pending state, for example while a parent queues a send. */
+  sending?: boolean;
+  maxRows?: number;
+  maxLength?: number;
+  /** Attachment and other controls rendered beside the send button. */
+  attachments?: Snippet;
+  class?: ClassValue;
+}
+
+const id = $props.id();
+let {
+  value = $bindable(''),
+  onSubmit,
+  labels: labelOverrides = {},
+  disabled = false,
+  sending = false,
+  maxRows = 6,
+  maxLength,
+  attachments,
+  class: className,
+}: Props = $props();
+
+let field = $state<HTMLTextAreaElement | null>(null);
+let pending = $state(false);
+let error = $state(false);
+let composing = $state(false);
+const labels = $derived({ ...DEFAULT_COMPOSER_LABELS, ...labelOverrides });
+const busy = $derived(sending || pending);
+const canSend = $derived(!disabled && !busy && value.trim().length > 0);
+const hintId = `chat-composer-${id}-hint`;
+const errorId = `chat-composer-${id}-error`;
+
+function resize(): void {
+  const element = field;
+  if (!element) return;
+  autosizeTextarea(element);
+  const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight) || 24;
+  const maxSize = lineHeight * Math.max(1, maxRows) + 16;
+  if (element.scrollHeight > maxSize) {
+    element.style.blockSize = `${maxSize}px`;
+    element.style.overflowY = 'auto';
+  } else {
+    element.style.overflowY = 'hidden';
+  }
+}
+
+$effect(() => {
+  void value;
+  resize();
+});
+
+async function submit(): Promise<void> {
+  if (!canSend) return;
+  const message = value.trim();
+  error = false;
+  pending = true;
+  try {
+    const result = await onSubmit(message);
+    if (result !== false) value = '';
+  } catch {
+    error = true;
+  } finally {
+    pending = false;
+    field?.focus();
+  }
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (
+    event.key === 'Enter' &&
+    !event.shiftKey &&
+    !event.isComposing &&
+    !composing &&
+    event.keyCode !== 229
+  ) {
+    event.preventDefault();
+    void submit();
+  }
+}
+</script>
+
+<form
+  class={cx('tx-chat-composer', className)}
+  data-tx-chat-composer
+  onsubmit={(event) => {
+    event.preventDefault();
+    void submit();
+  }}
+>
+  <label class="visually-hidden" for={`chat-composer-${id}`}>{labels.input}</label>
+  <textarea
+    bind:this={field}
+    value={value}
+    id={`chat-composer-${id}`}
+    aria-describedby={error ? `${hintId} ${errorId}` : hintId}
+    aria-invalid={error || undefined}
+    placeholder={labels.placeholder}
+    disabled={disabled || busy}
+    rows="1"
+    maxlength={maxLength}
+    class="tx-chat-composer__field"
+    oninput={(event) => {
+      value = event.currentTarget.value;
+      error = false;
+      resize();
+    }}
+    onkeydown={onKeydown}
+    oncompositionstart={() => (composing = true)}
+    oncompositionend={() => (composing = false)}
+  ></textarea>
+  <div class="tx-chat-composer__actions">
+    <div class="tx-chat-composer__attachments">{@render attachments?.()}</div>
+    <Button
+      type="submit"
+      variant="outline"
+      size="sm"
+      disabled={!canSend}
+      loading={busy}
+      loadingLabel={labels.sending}
+    >
+      {labels.send}
+    </Button>
+  </div>
+  <span id={hintId} class="visually-hidden">{labels.hint}</span>
+  {#if error}<p id={errorId} class="tx-chat-composer__error" role="alert">{labels.sendError}</p>{/if}
+</form>
+
+<style>
+  @layer tx.components {
+    .tx-chat-composer {
+      display: grid;
+      gap: 0.5rem;
+      border: 1px solid var(--tx-border, CanvasText);
+      border-radius: var(--tx-radius, 0.75rem);
+      background: var(--tx-surface, Canvas);
+      padding: 0.75rem;
+    }
+
+    .tx-chat-composer:focus-within {
+      border-color: var(--tx-ring, Highlight);
+    }
+
+    .tx-chat-composer__field {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 2.5rem;
+    max-block-size: none;
+    margin: 0;
+    border: 1px solid var(--tx-input, var(--tx-border, CanvasText));
+    border-radius: var(--tx-radius, 0.375rem);
+    background: var(--tx-surface, Canvas);
+    color: var(--tx-foreground, CanvasText);
+    padding: 0.625rem 0.75rem;
+    font-family: var(--tx-font-sans, system-ui, sans-serif);
+    line-height: 1.4;
+    resize: none;
+    overflow-y: hidden;
+    font-size: 1rem;
+    outline: none;
+    }
+
+    .tx-chat-composer__field:focus-visible {
+      border-color: var(--tx-ring, Highlight);
+      box-shadow: 0 0 0 2px color-mix(in oklab, var(--tx-ring, Highlight) 30%, transparent);
+    }
+
+    .tx-chat-composer__field:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .tx-chat-composer__field::placeholder {
+      color: var(--tx-muted-foreground, GrayText);
+      opacity: 1;
+    }
+
+    .tx-chat-composer__actions {
+      display: flex;
+      align-items: end;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+
+    .tx-chat-composer__attachments {
+      display: flex;
+      min-inline-size: 0;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .tx-chat-composer__error {
+      margin: 0;
+      color: var(--tx-destructive, Mark);
+      font-size: 0.875rem;
+    }
+
+    .visually-hidden {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
+    @media (min-width: 640px) {
+      .tx-chat-composer__field {
+        font-size: 0.875rem;
+      }
+    }
+  }
+</style>

package/dist/composer/Composer.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import { type ClassValue } from 'texuli/cx';
+import { type ComposerLabels } from './labels.js';
+interface Props {
+    value?: string;
+    /** Return false to keep the draft, or reject to show the translated error. */
+    onSubmit: (message: string) => unknown;
+    labels?: Partial<ComposerLabels>;
+    disabled?: boolean;
+    /** External pending state, for example while a parent queues a send. */
+    sending?: boolean;
+    maxRows?: number;
+    maxLength?: number;
+    /** Attachment and other controls rendered beside the send button. */
+    attachments?: Snippet;
+    class?: ClassValue;
+}
+declare const Composer: import("svelte").Component<Props, {}, "value">;
+type Composer = ReturnType<typeof Composer>;
+export default Composer;

package/dist/composer/TypingIndicator.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { type ClassValue, cx } from 'texuli/cx';
+import type { TypingLabels } from './typing-labels.js';
+
+const DEFAULT_LABELS: TypingLabels = {
+  one: (name) => `${name} is typing`,
+  two: (first, second) => `${first} and ${second} are typing`,
+  many: (count) => `${count} people are typing`,
+};
+
+interface Props {
+  names: readonly string[];
+  labels?: Partial<TypingLabels>;
+  showLabel?: boolean;
+  class?: ClassValue;
+}
+
+let { names, labels: labelOverrides = {}, showLabel = false, class: className }: Props = $props();
+const labels = $derived({ ...DEFAULT_LABELS, ...labelOverrides });
+const message = $derived.by(() => {
+  if (names.length === 0) return '';
+  if (names.length === 1) return labels.one(names[0] ?? '');
+  if (names.length === 2) return labels.two(names[0] ?? '', names[1] ?? '');
+  return labels.many(names.length);
+});
+</script>
+
+<div class={cx('tx-chat-typing', className)} role="status" aria-live="polite" aria-atomic="true">
+  {#if message}
+    <span class={cx('tx-chat-typing__label', !showLabel && 'visually-hidden')}>{message}</span>
+    <span class="tx-chat-typing__dots" aria-hidden="true">
+      <span></span><span></span><span></span>
+    </span>
+  {/if}
+</div>
+
+<style>
+  @layer tx.components {
+    .tx-chat-typing {
+      display: flex;
+      min-block-size: 1.5rem;
+      align-items: center;
+      color: var(--tx-muted-foreground, GrayText);
+      font-size: 0.875rem;
+    }
+
+    .tx-chat-typing__dots {
+      display: inline-flex;
+      gap: 0.25rem;
+      margin-inline-start: 0.5rem;
+    }
+
+    .tx-chat-typing__dots span {
+      inline-size: 0.375rem;
+      block-size: 0.375rem;
+      border-radius: 50%;
+      background: currentColor;
+      animation: tx-chat-pulse 1s ease-in-out infinite alternate;
+    }
+
+    .tx-chat-typing__dots span:nth-child(2) {
+      animation-delay: 150ms;
+    }
+
+    .tx-chat-typing__dots span:nth-child(3) {
+      animation-delay: 300ms;
+    }
+
+    .visually-hidden {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
+    @keyframes tx-chat-pulse {
+      to {
+        opacity: 0.35;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tx-chat-typing__dots span {
+        animation: none;
+      }
+    }
+  }
+</style>

package/dist/composer/TypingIndicator.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type ClassValue } from 'texuli/cx';
+import type { TypingLabels } from './typing-labels.js';
+interface Props {
+    names: readonly string[];
+    labels?: Partial<TypingLabels>;
+    showLabel?: boolean;
+    class?: ClassValue;
+}
+declare const TypingIndicator: import("svelte").Component<Props, {}, "">;
+type TypingIndicator = ReturnType<typeof TypingIndicator>;
+export default TypingIndicator;

package/dist/composer/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Composer } from './Composer.svelte';
+export { type ComposerLabels, DEFAULT_COMPOSER_LABELS } from './labels.js';
+export { default as TypingIndicator } from './TypingIndicator.svelte';
+export type { TypingLabels } from './typing-labels.js';

package/dist/composer/index.js

@@ -0,0 +1,3 @@
+export { default as Composer } from './Composer.svelte';
+export { DEFAULT_COMPOSER_LABELS } from "./labels.js";
+export { default as TypingIndicator } from './TypingIndicator.svelte';

package/dist/composer/labels.d.ts

@@ -0,0 +1,9 @@
+export interface ComposerLabels {
+    input: string;
+    placeholder: string;
+    hint: string;
+    send: string;
+    sending: string;
+    sendError: string;
+}
+export declare const DEFAULT_COMPOSER_LABELS: ComposerLabels;

package/dist/composer/labels.js

@@ -0,0 +1,8 @@
+export const DEFAULT_COMPOSER_LABELS = {
+    input: 'Message',
+    placeholder: 'Write a message…',
+    hint: 'Press Enter to send. Press Shift+Enter for a new line.',
+    send: 'Send message',
+    sending: 'Sending message',
+    sendError: 'Your message could not be sent. Please try again.',
+};

package/dist/composer/typing-labels.d.ts

@@ -0,0 +1,5 @@
+export interface TypingLabels {
+    one: (name: string) => string;
+    two: (first: string, second: string) => string;
+    many: (count: number) => string;
+}

package/dist/composer/typing-labels.js

@@ -0,0 +1 @@
+export {};

package/dist/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css' {}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Composer, type ComposerLabels, DEFAULT_COMPOSER_LABELS, TypingIndicator, type TypingLabels, } from './composer/index.js';
+export { type ChatAuthor, type ChatMessage, type ChatMessageStatus, ChatThread, groupMessages, type MessageGroup, MessageList, type MessageTextPart, parseMessageText, } from './thread/index.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+// @texuli/chat: entries are added by the PLAN_001 tasks that build this package (docs/ARCHITECTURE.md).
+export { Composer, DEFAULT_COMPOSER_LABELS, TypingIndicator, } from "./composer/index.js";
+export { ChatThread, groupMessages, MessageList, parseMessageText, } from "./thread/index.js";

package/dist/thread/ChatThread.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { type ClassValue, cx } from 'texuli/cx';
+import Composer from '../composer/Composer.svelte';
+import TypingIndicator from '../composer/TypingIndicator.svelte';
+import type { MessageListLabels } from './labels.js';
+import MessageList from './MessageList.svelte';
+import type { ChatMessage } from './types.js';
+
+interface Props {
+  messages: ChatMessage[];
+  currentUserId?: string;
+  typing?: string[];
+  draft?: string;
+  onSend?: (body: string) => unknown;
+  sending?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  body?: Snippet<[ChatMessage]>;
+  header?: Snippet;
+  emptyText?: string;
+  locale?: string;
+  labels?: Partial<MessageListLabels>;
+  class?: ClassValue;
+}
+
+let {
+  messages,
+  currentUserId,
+  typing = [],
+  draft = $bindable(''),
+  onSend,
+  sending = false,
+  disabled = false,
+  placeholder,
+  body,
+  header,
+  emptyText,
+  locale,
+  labels,
+  class: className,
+}: Props = $props();
+</script>
+
+<section class={cx('tx-chat-thread', className)} data-tx-chat-thread>
+  {@render header?.()}
+  <MessageList {messages} {currentUserId} {body} {emptyText} {locale} {labels}>
+    {#snippet footer()}
+      <TypingIndicator names={typing} class="tx-chat-thread__typing" />
+    {/snippet}
+  </MessageList>
+  {#if onSend}
+    <div class="tx-chat-thread__composer">
+      <Composer
+        bind:value={draft}
+        onSubmit={onSend}
+        {sending}
+        {disabled}
+        labels={placeholder ? { placeholder } : undefined}
+      />
+    </div>
+  {/if}
+</section>
+
+<style>
+  @layer tx.components {
+    .tx-chat-thread { display: flex; min-block-size: 0; flex: 1; flex-direction: column; background: var(--tx-surface, Canvas); color: var(--tx-foreground, CanvasText); }
+    .tx-chat-thread__composer { border-block-start: 1px solid var(--tx-border, ButtonBorder); padding: 0.75rem; padding-block-end: max(0.75rem, env(safe-area-inset-bottom)); }
+    .tx-chat-thread__typing { margin-block-start: 0.75rem; }
+  }
+</style>

package/dist/thread/ChatThread.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import { type ClassValue } from 'texuli/cx';
+import type { MessageListLabels } from './labels.js';
+import type { ChatMessage } from './types.js';
+interface Props {
+    messages: ChatMessage[];
+    currentUserId?: string;
+    typing?: string[];
+    draft?: string;
+    onSend?: (body: string) => unknown;
+    sending?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    body?: Snippet<[ChatMessage]>;
+    header?: Snippet;
+    emptyText?: string;
+    locale?: string;
+    labels?: Partial<MessageListLabels>;
+    class?: ClassValue;
+}
+declare const ChatThread: import("svelte").Component<Props, {}, "draft">;
+type ChatThread = ReturnType<typeof ChatThread>;
+export default ChatThread;

package/dist/thread/MessageList.svelte

@@ -0,0 +1,409 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { tick } from 'svelte';
+import { Avatar } from 'texuli/avatar';
+import { type ClassValue, cx } from 'texuli/cx';
+import { groupMessages } from './group-messages.js';
+import { DEFAULT_MESSAGE_LIST_LABELS, type MessageListLabels } from './labels.js';
+import { parseMessageText } from './rich-text.js';
+import type { ChatMessage, ChatMessageStatus } from './types.js';
+import { MessageVirtualWindow, type VirtualWindow } from './virtual-window.js';
+
+interface Props {
+  messages: ChatMessage[];
+  currentUserId?: string;
+  /** Optional renderer for attachments or application-owned rich content. */
+  body?: Snippet<[ChatMessage]>;
+  footer?: Snippet;
+  emptyText?: string;
+  locale?: string;
+  label?: string;
+  labels?: Partial<MessageListLabels>;
+  /** Virtualization starts at this number of author groups. Set to Infinity to disable. */
+  virtualizeAfter?: number;
+  overscan?: number;
+  class?: ClassValue;
+}
+
+let {
+  messages,
+  currentUserId,
+  body,
+  footer,
+  emptyText = 'No messages yet. Say hello!',
+  locale,
+  label = 'Messages',
+  labels: labelOverrides = {},
+  virtualizeAfter = 100,
+  overscan = 5,
+  class: className,
+}: Props = $props();
+
+let viewport = $state<HTMLDivElement | null>(null);
+let scrollTop = $state(0);
+let viewportSize = $state(360);
+let revision = $state(0);
+let list = new MessageVirtualWindow(0);
+let stickToBottom = true;
+let previousCount = 0;
+let previousFirstId: string | undefined;
+let previousLastId: string | undefined;
+let firstIdBeforeUpdate: string | undefined;
+let scrollHeightBeforeUpdate = 0;
+let scrollTopBeforeUpdate = 0;
+let anchorBeforeUpdate: ScrollAnchor | null = null;
+/** The virtual window as last rendered: row starts here match the DOM. */
+let rendered: VirtualWindow | null = null;
+let remeasureFrame = 0;
+
+/** A rendered row and where it sat, used to keep it still while offsets change. */
+interface ScrollAnchor {
+  key: string;
+  start: number;
+  scrollTop: number;
+}
+
+const groups = $derived(groupMessages(messages));
+const labels = $derived({ ...DEFAULT_MESSAGE_LIST_LABELS, ...labelOverrides });
+const renderGroups = $derived.by(() =>
+  groups.flatMap((group) => {
+    const rows: Array<typeof group & { key: string; showHeader: boolean }> = [];
+    for (let offset = 0; offset < group.messages.length; offset += 20) {
+      rows.push({
+        ...group,
+        key: `${group.key}-${offset}`,
+        messages: group.messages.slice(offset, offset + 20),
+        dayStart: offset === 0 ? group.dayStart : null,
+        showHeader: offset === 0,
+      });
+    }
+    return rows;
+  })
+);
+const rowKeys = $derived(renderGroups.map((row) => row.key));
+const useVirtual = $derived(messages.length >= Math.max(1, virtualizeAfter));
+const rows = $derived.by((): VirtualWindow => {
+  revision;
+  list.resize(renderGroups.length, rowKeys);
+  if (useVirtual) {
+    rendered = list.window(scrollTop, viewportSize, overscan);
+    return rendered;
+  }
+  rendered = null;
+  return {
+    totalSize: 0,
+    items: renderGroups.map((row, index) => ({
+      index,
+      key: row.key,
+      start: 0,
+      size: 0,
+      measured: false,
+    })),
+  };
+});
+
+const statusText = $derived({
+  sending: labels.sending,
+  sent: labels.sent,
+  delivered: labels.delivered,
+  read: labels.read,
+  failed: labels.failed,
+});
+
+function dateFor(value: ChatMessage['at']): Date | null {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function formatTime(value: ChatMessage['at']): string {
+  const date = dateFor(value);
+  if (!date) return '';
+  try {
+    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }).format(date);
+  } catch {
+    return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);
+  }
+}
+
+function formatDay(value: Date): string {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(value);
+  } catch {
+    return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(value);
+  }
+}
+
+function nearBottom(element: HTMLElement): boolean {
+  return element.scrollHeight - element.scrollTop - element.clientHeight < 96;
+}
+
+function onScroll(event: Event): void {
+  const element = event.currentTarget as HTMLDivElement;
+  scrollTop = element.scrollTop;
+  viewportSize = element.clientHeight || viewportSize;
+  stickToBottom = nearBottom(element);
+}
+
+// The topmost rendered row in view, with the start it was rendered at. The
+// model can be ahead of the DOM (a row measured, its re-render still waiting
+// for a frame), so anchors come from the rendered window, never the model.
+function captureAnchor(element: HTMLElement): ScrollAnchor | null {
+  if (!rendered || rendered.items.length === 0) return null;
+  const top = element.scrollTop;
+  const canvasTop = (element.firstElementChild as HTMLElement | null)?.offsetTop ?? 0;
+  const row =
+    rendered.items.find((item) => canvasTop + item.start + item.size > top) ??
+    rendered.items[rendered.items.length - 1];
+  return row ? { key: row.key, start: row.start, scrollTop: top } : null;
+}
+
+// Moves the scroll position by however far the anchor row moved, so the
+// reader keeps seeing the same message. False when the row no longer exists.
+function restoreAnchor(element: HTMLElement, anchor: ScrollAnchor): boolean {
+  const index = list.indexOfKey(anchor.key);
+  if (index < 0) return false;
+  element.scrollTop = anchor.scrollTop + (list.offsetOf(index) - anchor.start);
+  scrollTop = element.scrollTop;
+  return true;
+}
+
+// Rows measured late re-render once per frame. Rows above the anchor change
+// the offsets below them, so the anchor is held in place across the re-render.
+function scheduleRemeasure(): void {
+  if (remeasureFrame) return;
+  remeasureFrame = requestAnimationFrame(() => {
+    remeasureFrame = 0;
+    const element = viewport;
+    const anchor = element && useVirtual && !stickToBottom ? captureAnchor(element) : null;
+    revision += 1;
+    if (element && anchor) void tick().then(() => restoreAnchor(element, anchor));
+  });
+}
+
+$effect(() => () => {
+  if (remeasureFrame) cancelAnimationFrame(remeasureFrame);
+  remeasureFrame = 0;
+});
+
+function measureRow(node: HTMLElement, key: string) {
+  let rowKey = key;
+  const observer =
+    typeof ResizeObserver === 'undefined'
+      ? undefined
+      : new ResizeObserver(([entry]) => {
+          const height = entry?.borderBoxSize?.[0]?.blockSize ?? entry?.contentRect.height;
+          if (height && list.measureKey(rowKey, height)) scheduleRemeasure();
+        });
+  observer?.observe(node);
+  return {
+    update(nextKey: string) {
+      rowKey = nextKey;
+    },
+    destroy() {
+      observer?.disconnect();
+    },
+  };
+}
+
+// Content that grows after a stick (rows measured late, fonts, a typing
+// footer) keeps the list at the bottom while the reader is there.
+$effect(() => {
+  const element = viewport;
+  if (!element || typeof ResizeObserver === 'undefined') return;
+  const resize = new ResizeObserver(() => {
+    if (stickToBottom) element.scrollTop = element.scrollHeight;
+  });
+  const observeChildren = () => {
+    resize.disconnect();
+    for (const child of element.children) resize.observe(child);
+  };
+  observeChildren();
+  const children = new MutationObserver(observeChildren);
+  children.observe(element, { childList: true });
+  return () => {
+    children.disconnect();
+    resize.disconnect();
+  };
+});
+
+$effect.pre(() => {
+  void messages.length;
+  firstIdBeforeUpdate = messages[0]?.id;
+  if (viewport) {
+    stickToBottom = nearBottom(viewport);
+    scrollHeightBeforeUpdate = viewport.scrollHeight;
+    scrollTopBeforeUpdate = viewport.scrollTop;
+    anchorBeforeUpdate = captureAnchor(viewport);
+  }
+});
+
+$effect(() => {
+  const count = messages.length;
+  const firstId = messages[0]?.id;
+  const last = messages[count - 1];
+  const prepended =
+    previousCount > 0 && count > previousCount && firstIdBeforeUpdate !== previousFirstId;
+  const ownNewMessage =
+    count > previousCount &&
+    last !== undefined &&
+    last.id !== previousLastId &&
+    last.author.id === currentUserId;
+  const shouldStick = count > previousCount && (stickToBottom || ownNewMessage);
+  previousCount = count;
+  previousFirstId = firstId;
+  previousLastId = last?.id;
+  if (!viewport) return;
+  const element = viewport;
+  if (shouldStick) {
+    void tick().then(() => {
+      element.scrollTop = element.scrollHeight;
+      scrollTop = element.scrollTop;
+    });
+  } else if (prepended) {
+    // Virtual rows: keep the anchor row still, using model offsets that the
+    // DOM has just rendered. Comparing scrollHeight before and after would mix
+    // a stale DOM height with measurements that landed in between.
+    const anchor = useVirtual ? anchorBeforeUpdate : null;
+    void tick().then(() => {
+      if (anchor && restoreAnchor(element, anchor)) return;
+      element.scrollTop = scrollTopBeforeUpdate + (element.scrollHeight - scrollHeightBeforeUpdate);
+      scrollTop = element.scrollTop;
+    });
+  }
+});
+</script>
+
+<!-- The focusable log provides keyboard scrolling and polite announcements for appended messages. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  bind:this={viewport}
+  class={cx('tx-chat-message-list', className)}
+  data-tx-chat-message-list
+  data-virtualized={useVirtual || undefined}
+  role="log"
+  aria-label={label}
+  aria-live="polite"
+  aria-relevant="additions text"
+  tabindex="0"
+  onscroll={onScroll}
+>
+  {#if messages.length === 0}
+    <p class="tx-chat-message-list__empty">{emptyText}</p>
+  {:else}
+    <div class={cx('tx-chat-message-list__canvas', useVirtual && 'tx-chat-message-list__canvas--virtual')} style:block-size={useVirtual ? `${rows.totalSize}px` : undefined}>
+      {#each rows.items as row (row.key)}
+        {@const group = renderGroups[row.index]}
+        {@const first = group?.messages[0]}
+        {@const own = group !== undefined && currentUserId !== undefined && group.author.id === currentUserId}
+        {#if group && first}
+          <div
+            class={cx(
+              'tx-chat-message-group',
+              useVirtual && 'tx-chat-message-group--virtual',
+              own && 'tx-chat-message-group--own'
+            )}
+            data-message-group={group.key}
+            use:measureRow={row.key}
+            style:inset-block-start={useVirtual ? `${row.start}px` : undefined}
+            style:block-size={useVirtual && row.measured ? `${row.size}px` : undefined}
+          >
+            {#if group.showHeader && group.dayStart}
+              <div class="tx-chat-message-list__day" role="separator">
+                <span>{formatDay(group.dayStart)}</span>
+              </div>
+            {/if}
+            {#if !own && group.showHeader}
+              <Avatar name={group.author.name} src={group.author.avatarUrl} size="sm" decorative class="tx-chat-message-group__avatar" />
+            {:else if !own}
+              <span class="tx-chat-message-group__avatar-spacer" aria-hidden="true"></span>
+            {/if}
+            <div class={cx('tx-chat-message-group__content', own && 'tx-chat-message-group__content--own')}>
+              {#if group.showHeader}
+                <p class="tx-chat-message-group__meta">
+                  {#if !own}<span class="tx-chat-message-group__author">{group.author.name}</span>{:else}<span class="tx-chat-message-group__you">{labels.you}</span>{/if}
+                  {#if dateFor(first.at)}<time datetime={dateFor(first.at)?.toISOString()}>{formatTime(first.at)}</time>{/if}
+                </p>
+              {/if}
+              {#each group.messages as message (message.id)}
+                <div class={cx('tx-chat-message', own && 'tx-chat-message--own', message.status === 'failed' && 'tx-chat-message--failed')}>
+                  {#if body}
+                    {@render body(message)}
+                  {:else}
+                    {#each parseMessageText(message.body) as part}
+                      {#if part.type === 'strong'}<strong>{part.value}</strong>
+                      {:else if part.type === 'em'}<em>{part.value}</em>
+                      {:else if part.type === 'code'}<code>{part.value}</code>
+                      {:else if part.type === 'link'}<a href={part.href}>{part.value}</a>
+                      {:else}{part.value}{/if}
+                    {/each}
+                  {/if}
+                </div>
+                {#if message.status === 'failed' || (own && message.status && message === group.messages[group.messages.length - 1])}
+                  <p class={cx('tx-chat-message-group__status', message.status === 'failed' && 'tx-chat-message-group__status--failed')}>
+                    {statusText[message.status]}
+                  </p>
+                {/if}
+              {/each}
+            </div>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+  {@render footer?.()}
+</div>
+
+<style>
+  @layer tx.components {
+    .tx-chat-message-list {
+      position: relative;
+      display: flex;
+      min-block-size: 0;
+      flex: 1;
+      flex-direction: column;
+      overflow: auto;
+      overscroll-behavior: contain;
+      padding: 1rem;
+      outline: none;
+      color: var(--tx-foreground, CanvasText);
+    }
+
+    .tx-chat-message-list:focus-visible {
+      outline: 2px solid var(--tx-ring, Highlight);
+      outline-offset: -2px;
+    }
+
+    .tx-chat-message-list__canvas { display: flex; flex-direction: column; gap: 0.75rem; }
+    .tx-chat-message-list__canvas--virtual { position: relative; display: block; flex: none; }
+    .tx-chat-message-group--virtual { position: absolute; inset-inline: 0; }
+    .tx-chat-message-group { display: flex; align-items: flex-start; gap: 0.625rem; min-inline-size: 0; }
+    :global(.tx-chat-message-group__avatar .tx-avatar__surface[data-tone]) { color: CanvasText; }
+    .tx-chat-message-group__avatar { margin-block-start: 1.25rem; flex: none; }
+    .tx-chat-message-group__avatar-spacer { inline-size: 1.75rem; flex: none; }
+    .tx-chat-message-group__content { display: flex; min-inline-size: 0; max-inline-size: min(85%, 42rem); flex-direction: column; align-items: flex-start; gap: 0.25rem; }
+    .tx-chat-message-group__content--own { margin-inline-start: auto; align-items: flex-end; }
+    .tx-chat-message-group__meta { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; padding-inline: 0.25rem; color: var(--tx-muted-foreground, GrayText); font-size: 0.75rem; }
+    .tx-chat-message-group__author { color: var(--tx-foreground, CanvasText); font-weight: 600; }
+    .tx-chat-message-group__you { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+    .tx-chat-message { max-inline-size: 100%; overflow-wrap: anywhere; white-space: pre-wrap; border-radius: 1rem 1rem 1rem 0.25rem; background: var(--tx-muted, ButtonFace); padding: 0.5rem 0.875rem; }
+    .tx-chat-message--own { border-radius: 1rem 1rem 0.25rem 1rem; background: var(--tx-primary, Highlight); color: var(--tx-primary-foreground, HighlightText); }
+    .tx-chat-message--failed { outline: 2px solid var(--tx-destructive, Mark); }
+    .tx-chat-message :global(a) { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
+    .tx-chat-message code { border-radius: 0.25rem; background: var(--tx-surface, Canvas); color: var(--tx-foreground, CanvasText); padding-inline: 0.2em; font-family: var(--tx-font-mono, ui-monospace, monospace); }
+    .tx-chat-message-group__status { margin: 0; color: var(--tx-muted-foreground, GrayText); font-size: 0.7rem; }
+    .tx-chat-message-group__status--failed { color: var(--tx-destructive, Mark); font-weight: 600; }
+    .tx-chat-message-list__day { position: relative; display: flex; align-items: center; justify-content: center; margin-block: 0.35rem; color: var(--tx-muted-foreground, GrayText); font-size: 0.75rem; }
+    .tx-chat-message-list__day::before { position: absolute; inset-inline: 0; block-size: 1px; background: var(--tx-border, ButtonBorder); content: ''; }
+    .tx-chat-message-list__day span { position: relative; background: var(--tx-surface, Canvas); padding-inline: 0.5rem; }
+    .tx-chat-message-list__empty { margin: auto; color: var(--tx-muted-foreground, GrayText); text-align: center; }
+
+    @media (min-width: 640px) {
+      .tx-chat-message-group__content { max-inline-size: min(70%, 42rem); }
+    }
+    @media (forced-colors: active) {
+      .tx-chat-message { border: 1px solid CanvasText; }
+      .tx-chat-message-list__day::before { background: CanvasText; }
+    }
+    @media (prefers-reduced-motion: reduce) { .tx-chat-message-list { scroll-behavior: auto; } }
+  }
+</style>

package/dist/thread/MessageList.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import { type ClassValue } from 'texuli/cx';
+import { type MessageListLabels } from './labels.js';
+import type { ChatMessage } from './types.js';
+interface Props {
+    messages: ChatMessage[];
+    currentUserId?: string;
+    /** Optional renderer for attachments or application-owned rich content. */
+    body?: Snippet<[ChatMessage]>;
+    footer?: Snippet;
+    emptyText?: string;
+    locale?: string;
+    label?: string;
+    labels?: Partial<MessageListLabels>;
+    /** Virtualization starts at this number of author groups. Set to Infinity to disable. */
+    virtualizeAfter?: number;
+    overscan?: number;
+    class?: ClassValue;
+}
+declare const MessageList: import("svelte").Component<Props, {}, "">;
+type MessageList = ReturnType<typeof MessageList>;
+export default MessageList;

package/dist/thread/group-messages.d.ts

@@ -0,0 +1,3 @@
+import type { ChatMessage, MessageGroup } from './types.js';
+/** Group adjacent messages from the same author when they are at most five minutes apart. */
+export declare function groupMessages(messages: readonly ChatMessage[], windowMs?: number): MessageGroup[];

package/dist/thread/group-messages.js

@@ -0,0 +1,42 @@
+function toDate(value) {
+    const date = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function sameLocalDay(left, right) {
+    return (left.getFullYear() === right.getFullYear() &&
+        left.getMonth() === right.getMonth() &&
+        left.getDate() === right.getDate());
+}
+/** Group adjacent messages from the same author when they are at most five minutes apart. */
+export function groupMessages(messages, windowMs = 5 * 60_000) {
+    const groups = [];
+    let previous;
+    for (const message of messages) {
+        const at = toDate(message.at);
+        const previousAt = previous?.at;
+        const isNewDay = at !== null &&
+            (previousAt === null || previousAt === undefined || !sameLocalDay(previousAt, at));
+        const last = groups[groups.length - 1];
+        const continues = last !== undefined &&
+            !isNewDay &&
+            previous?.authorId === message.author.id &&
+            at !== null &&
+            previousAt !== null &&
+            previousAt !== undefined &&
+            at.getTime() >= previousAt.getTime() &&
+            at.getTime() - previousAt.getTime() <= Math.max(0, windowMs);
+        if (continues && last) {
+            last.messages.push(message);
+        }
+        else {
+            groups.push({
+                key: message.id,
+                author: message.author,
+                messages: [message],
+                dayStart: isNewDay ? at : null,
+            });
+        }
+        previous = { authorId: message.author.id, at };
+    }
+    return groups;
+}

package/dist/thread/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ChatThread } from './ChatThread.svelte';
+export { groupMessages } from './group-messages.js';
+export { DEFAULT_MESSAGE_LIST_LABELS, type MessageListLabels } from './labels.js';
+export { default as MessageList } from './MessageList.svelte';
+export { type MessageTextPart, parseMessageText } from './rich-text.js';
+export type { ChatAuthor, ChatMessage, ChatMessageStatus, MessageGroup } from './types.js';

package/dist/thread/index.js

@@ -0,0 +1,5 @@
+export { default as ChatThread } from './ChatThread.svelte';
+export { groupMessages } from "./group-messages.js";
+export { DEFAULT_MESSAGE_LIST_LABELS } from "./labels.js";
+export { default as MessageList } from './MessageList.svelte';
+export { parseMessageText } from "./rich-text.js";

package/dist/thread/labels.d.ts

@@ -0,0 +1,3 @@
+import type { ChatMessageStatus } from './types.js';
+export type MessageListLabels = Record<ChatMessageStatus | 'you', string>;
+export declare const DEFAULT_MESSAGE_LIST_LABELS: MessageListLabels;

package/dist/thread/labels.js

@@ -0,0 +1,8 @@
+export const DEFAULT_MESSAGE_LIST_LABELS = {
+    you: 'You',
+    sending: 'Sending…',
+    sent: 'Sent',
+    delivered: 'Delivered',
+    read: 'Read',
+    failed: 'Failed to send',
+};

package/dist/thread/rich-text.d.ts

@@ -0,0 +1,13 @@
+export type MessageTextPart = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'strong' | 'em' | 'code';
+    value: string;
+} | {
+    type: 'link';
+    value: string;
+    href: string;
+};
+/** Parse a small inline subset into text-only nodes; links use the untrusted URL policy. */
+export declare function parseMessageText(value: string): MessageTextPart[];

package/dist/thread/rich-text.js

@@ -0,0 +1,29 @@
+import { safeHref } from '@texuli/core/url-policy';
+const INLINE = /\*\*([^*\n]+)\*\*|\*([^*\n]+)\*|`([^`\n]+)`|\[([^\]]+)\]\(([^)\s]+)\)/g;
+/** Parse a small inline subset into text-only nodes; links use the untrusted URL policy. */
+export function parseMessageText(value) {
+    const parts = [];
+    let cursor = 0;
+    for (const match of value.matchAll(INLINE)) {
+        const index = match.index ?? 0;
+        if (index > cursor)
+            parts.push({ type: 'text', value: value.slice(cursor, index) });
+        const raw = match[0];
+        if (match[1])
+            parts.push({ type: 'strong', value: match[1] });
+        else if (match[2])
+            parts.push({ type: 'em', value: match[2] });
+        else if (match[3])
+            parts.push({ type: 'code', value: match[3] });
+        else if (match[4] && match[5]) {
+            const href = safeHref(match[5], 'untrusted');
+            parts.push(href ? { type: 'link', value: match[4], href } : { type: 'text', value: raw });
+        }
+        else
+            parts.push({ type: 'text', value: raw });
+        cursor = index + raw.length;
+    }
+    if (cursor < value.length)
+        parts.push({ type: 'text', value: value.slice(cursor) });
+    return parts;
+}

package/dist/thread/types.d.ts

@@ -0,0 +1,19 @@
+export type ChatMessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+export interface ChatAuthor {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
+export interface ChatMessage {
+    id: string;
+    author: ChatAuthor;
+    body: string;
+    at: Date | string | number;
+    status?: ChatMessageStatus;
+}
+export interface MessageGroup {
+    key: string;
+    author: ChatAuthor;
+    messages: ChatMessage[];
+    dayStart: Date | null;
+}

package/dist/thread/types.js

@@ -0,0 +1 @@
+export {};

package/dist/thread/virtual-window.d.ts

@@ -0,0 +1,39 @@
+export interface VirtualRow {
+    index: number;
+    key: string;
+    start: number;
+    size: number;
+    measured: boolean;
+}
+export interface VirtualWindow {
+    totalSize: number;
+    items: VirtualRow[];
+}
+/**
+ * Variable-height list offsets for chat history. Measurements are kept by row
+ * key, so prepending older rows keeps every height with its own row instead of
+ * shifting it onto whichever row now holds the same index.
+ */
+export declare class MessageVirtualWindow {
+    private count;
+    private readonly estimate;
+    private readonly heights;
+    private keys;
+    private keySource;
+    private indexByKey;
+    private tree;
+    constructor(count: number, estimate?: number);
+    /** Sets the row count; `keys` names each row (rows without a key fall back to their index). */
+    resize(count: number, keys?: readonly string[]): void;
+    measure(index: number, height: number): boolean;
+    /** Measures the row named `key`; returns false when no such row exists. */
+    measureKey(key: string, height: number): boolean;
+    /** The current index of the row named `key`, or -1. */
+    indexOfKey(key: string): number;
+    offsetOf(index: number): number;
+    window(scrollOffset: number, viewportSize: number, overscan?: number): VirtualWindow;
+    private indexAt;
+    private prefixDelta;
+    private add;
+    private rebuild;
+}

package/dist/thread/virtual-window.js

@@ -0,0 +1,117 @@
+/**
+ * Variable-height list offsets for chat history. Measurements are kept by row
+ * key, so prepending older rows keeps every height with its own row instead of
+ * shifting it onto whichever row now holds the same index.
+ */
+export class MessageVirtualWindow {
+    count;
+    estimate;
+    heights = new Map();
+    keys = [];
+    keySource;
+    indexByKey = new Map();
+    tree = [];
+    constructor(count, estimate = 112) {
+        this.count = 0;
+        this.estimate = Math.max(1, estimate);
+        this.resize(count);
+    }
+    /** Sets the row count; `keys` names each row (rows without a key fall back to their index). */
+    resize(count, keys) {
+        const next = Math.max(0, Math.floor(count));
+        if (keys !== undefined && keys === this.keySource && next === this.count)
+            return;
+        this.count = next;
+        this.keySource = keys;
+        this.keys = Array.from({ length: next }, (_, index) => keys?.[index] ?? `#${index}`);
+        this.indexByKey = new Map(this.keys.map((key, index) => [key, index]));
+        for (const key of this.heights.keys())
+            if (!this.indexByKey.has(key))
+                this.heights.delete(key);
+        this.rebuild();
+    }
+    measure(index, height) {
+        if (!Number.isInteger(index) ||
+            index < 0 ||
+            index >= this.count ||
+            !Number.isFinite(height) ||
+            height <= 0)
+            return false;
+        const key = this.keys[index];
+        const previous = this.heights.get(key) ?? this.estimate;
+        if (previous === height)
+            return false;
+        this.heights.set(key, height);
+        this.add(index, height - previous);
+        return true;
+    }
+    /** Measures the row named `key`; returns false when no such row exists. */
+    measureKey(key, height) {
+        return this.measure(this.indexOfKey(key), height);
+    }
+    /** The current index of the row named `key`, or -1. */
+    indexOfKey(key) {
+        return this.indexByKey.get(key) ?? -1;
+    }
+    offsetOf(index) {
+        const end = Math.min(this.count, Math.max(0, Math.floor(index)));
+        return end * this.estimate + this.prefixDelta(end);
+    }
+    window(scrollOffset, viewportSize, overscan = 5) {
+        const totalSize = this.offsetOf(this.count);
+        if (!this.count || !Number.isFinite(viewportSize) || viewportSize <= 0)
+            return { totalSize, items: [] };
+        const startOffset = Math.max(0, Number.isFinite(scrollOffset) ? scrollOffset : 0);
+        const first = this.indexAt(startOffset);
+        const last = this.indexAt(Math.max(startOffset, startOffset + viewportSize - 0.01));
+        const from = Math.max(0, first - Math.max(0, Math.floor(overscan)));
+        const to = Math.min(this.count, last + 1 + Math.max(0, Math.floor(overscan)));
+        const items = [];
+        for (let index = from; index < to; index += 1) {
+            const key = this.keys[index];
+            const height = this.heights.get(key);
+            items.push({
+                index,
+                key,
+                start: this.offsetOf(index),
+                size: height ?? this.estimate,
+                measured: height !== undefined,
+            });
+        }
+        return { totalSize, items };
+    }
+    indexAt(offset) {
+        if (!this.count)
+            return 0;
+        const target = Math.min(Math.max(0, offset), Math.max(0, this.offsetOf(this.count) - 0.01));
+        let low = 0;
+        let high = this.count;
+        while (low < high) {
+            const middle = Math.floor((low + high) / 2);
+            if (this.offsetOf(middle + 1) <= target)
+                low = middle + 1;
+            else
+                high = middle;
+        }
+        return Math.min(low, this.count - 1);
+    }
+    prefixDelta(end) {
+        let sum = 0;
+        for (let cursor = end; cursor > 0; cursor -= cursor & -cursor)
+            sum += this.tree[cursor] ?? 0;
+        return sum;
+    }
+    add(index, delta) {
+        for (let cursor = index + 1; cursor <= this.count; cursor += cursor & -cursor) {
+            this.tree[cursor] = (this.tree[cursor] ?? 0) + delta;
+        }
+    }
+    rebuild() {
+        this.tree = new Array(this.count + 1).fill(0);
+        for (let index = 0; index < this.count; index += 1) {
+            const height = this.heights.get(this.keys[index]);
+            if (height !== undefined)
+                this.add(index, height - this.estimate);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,33 @@
 {
   "name": "@texuli/chat",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-next.0",
+  "description": "Chat interfaces: thread, message list, composer and typing indicator, generic for people and agents.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@texuli/core": "0.1.0-next.0",
+    "@texuli/primitives": "0.1.0-next.0",
+    "@texuli/tokens": "0.1.0-next.0",
+    "texuli": "0.1.0-next.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.57.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "next"
+  }
+}