@humanspeak/svelte-virtual-chat 0.0.1 → 0.0.2

package/dist/SvelteVirtualChat.svelte

@@ -19,7 +19,6 @@
         onDebugInfo,
         containerClass = '',
         viewportClass = '',
-        debug = false,
         testId
     }: SvelteVirtualChatProps<TMessage> = $props()
 
@@ -32,6 +31,8 @@
     let viewportHeight = $state(0)
     let isFollowingBottom = $state(true)
     let pendingSnapToBottom = $state(false)
+    let userScrolling = false
+    let userScrollTimer: ReturnType<typeof setTimeout> | null = null
 
     // ── Derived: total content height ───────────────────────────────
     const totalHeight = $derived.by(() => {
@@ -40,7 +41,6 @@
     })
 
     // ── Derived: top gap for bottom-gravity ─────────────────────────
-    // When content is shorter than viewport, push messages to the bottom
     const topGap = $derived(Math.max(0, viewportHeight - totalHeight))
 
     // ── Derived: visible range ──────────────────────────────────────
@@ -51,8 +51,6 @@
             return { start: 0, end: 0, visibleStart: 0, visibleEnd: 0 }
         }
 
-        // scrollTop is relative to the full content area (which includes topGap)
-        // Adjust to get the scroll position relative to the message content
         const messageScrollTop = Math.max(0, scrollTop - topGap)
         const viewTop = messageScrollTop
         const viewBottom = messageScrollTop + viewportHeight
@@ -104,10 +102,17 @@
     )
 
     // ── Scroll event handler ────────────────────────────────────────
-    function handleScroll() {
+    const handleScroll = () => {
         if (!viewportEl) return
         scrollTop = viewportEl.scrollTop
 
+        // Suppress programmatic snaps while the user is actively scrolling
+        userScrolling = true
+        if (userScrollTimer) clearTimeout(userScrollTimer)
+        userScrollTimer = setTimeout(() => {
+            userScrolling = false
+        }, 150)
+
         const maxScroll = viewportEl.scrollHeight - viewportEl.clientHeight
         const wasFollowing = isFollowingBottom
         isFollowingBottom = maxScroll <= 0 || maxScroll - scrollTop <= followBottomThresholdPx
@@ -116,30 +121,28 @@
             onFollowBottomChange?.(isFollowingBottom)
         }
 
-        // Trigger history loading when near top
         if (onNeedHistory && scrollTop - topGap < viewportHeight * 0.5) {
             onNeedHistory()
         }
     }
 
-    // ── Measurement action ──────────────────────────────────────────
-    let snapNeeded = false
-
-    function scheduleSnapToBottom() {
-        if (!isFollowingBottom || !viewportEl) return
-        snapNeeded = true
-        if (pendingSnapToBottom) return // rAF already scheduled, it will re-check
+    // ── Snap scheduling ─────────────────────────────────────────────
+    /** Batches snap-to-bottom into a single rAF, respecting user-scroll suppression. */
+    const scheduleSnapToBottom = () => {
+        if (!isFollowingBottom || !viewportEl || userScrolling) return
+        if (pendingSnapToBottom) return
         pendingSnapToBottom = true
         requestAnimationFrame(() => {
             pendingSnapToBottom = false
-            if (snapNeeded && isFollowingBottom) {
-                snapNeeded = false
+            if (isFollowingBottom && !userScrolling) {
                 snapToBottom()
             }
         })
     }
 
-    function measureMessage(node: HTMLElement, messageId: string) {
+    // ── Measurement action ──────────────────────────────────────────
+    /** Svelte action: attaches a ResizeObserver to track message height changes. */
+    const measureMessage = (node: HTMLElement, messageId: string) => {
         const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height
@@ -170,13 +173,13 @@
     }
 
     // ── Snap to bottom helper ───────────────────────────────────────
-    function snapToBottom() {
+    /** Instantly scrolls viewport to bottom and syncs follow state. */
+    const snapToBottom = () => {
         if (!viewportEl) return
         const maxScroll = viewportEl.scrollHeight - viewportEl.clientHeight
         if (maxScroll > 0) {
             viewportEl.scrollTop = viewportEl.scrollHeight
         }
-        // Sync the following state directly (don't wait for scroll event)
         scrollTop = viewportEl.scrollTop
         isFollowingBottom = true
     }
@@ -185,16 +188,23 @@
     $effect(() => {
         void messages.length
         if (isFollowingBottom && viewportEl) {
-            requestAnimationFrame(() => snapToBottom())
+            requestAnimationFrame(() => {
+                if (isFollowingBottom) snapToBottom()
+            })
         }
     })
 
     // ── Follow-bottom on height changes ─────────────────────────────
-    // When measurements arrive, totalHeight changes. If following, re-snap.
+    // Height changes during scroll (e.g. newly measured items) respect user-scroll suppression
     $effect(() => {
         void totalHeight
-        if (isFollowingBottom && viewportEl) {
-            scheduleSnapToBottom()
+        scheduleSnapToBottom()
+    })
+
+    // ── Cleanup user-scroll timer on destroy ────────────────────────
+    $effect(() => {
+        return () => {
+            if (userScrollTimer) clearTimeout(userScrollTimer)
         }
     })
 
@@ -206,7 +216,6 @@
         const observer = new ResizeObserver(() => {
             if (viewportEl) {
                 viewportHeight = viewportEl.clientHeight
-                // On initial layout (or resize), snap to bottom if following
                 if (isFollowingBottom) {
                     requestAnimationFrame(() => snapToBottom())
                 }
@@ -216,8 +225,8 @@
         return () => observer.disconnect()
     })
 
-    // ── Debug info builder ─────────────────────────────────────────
-    function buildDebugInfo(): SvelteVirtualChatDebugInfo {
+    // ── Debug info ──────────────────────────────────────────────────
+    const buildDebugInfo = (): SvelteVirtualChatDebugInfo => {
         const measuredCount = heightCache.size
         return {
             totalMessages: messages.length,
@@ -236,7 +245,6 @@
         }
     }
 
-    // ── Debug effect: log + callback ────────────────────────────────
     $effect(() => {
         void renderedMessages.length
         void heightCache.version
@@ -244,13 +252,24 @@
         void isFollowingBottom
 
         const info = buildDebugInfo()
-        if (debug) console.log('[SvelteVirtualChat]', info)
         onDebugInfo?.(info)
     })
 
     // ── Public API ──────────────────────────────────────────────────
 
-    export function scrollToBottom(options?: { smooth?: boolean }) {
+    /**
+     * Scroll the viewport to the bottom.
+     *
+     * @param options - Optional configuration
+     * @param options.smooth - Use smooth scrolling animation (default: false)
+     *
+     * @example
+     * ```ts
+     * chat.scrollToBottom()
+     * chat.scrollToBottom({ smooth: true })
+     * ```
+     */
+    export const scrollToBottom = (options?: { smooth?: boolean }) => {
         if (!viewportEl) return
         viewportEl.scrollTo({
             top: viewportEl.scrollHeight,
@@ -258,7 +277,22 @@
         })
     }
 
-    export function scrollToMessage(id: string, options?: { smooth?: boolean }) {
+    /**
+     * Scroll to a specific message by its ID.
+     *
+     * If the message ID is not found in the messages array, this is a no-op.
+     *
+     * @param id - The message ID as returned by `getMessageId`
+     * @param options - Optional configuration
+     * @param options.smooth - Use smooth scrolling animation (default: false)
+     *
+     * @example
+     * ```ts
+     * chat.scrollToMessage('msg-42')
+     * chat.scrollToMessage('msg-42', { smooth: true })
+     * ```
+     */
+    export const scrollToMessage = (id: string, options?: { smooth?: boolean }) => {
         const index = messages.findIndex((m) => getMessageId(m) === id)
         if (index === -1) return
 
@@ -278,11 +312,40 @@
         })
     }
 
-    export function isAtBottom(): boolean {
+    /**
+     * Check if the viewport is currently following bottom.
+     *
+     * Returns `true` when the viewport is within `followBottomThresholdPx`
+     * of the bottom, meaning new messages will auto-scroll into view.
+     *
+     * @returns Whether the viewport is pinned to the bottom
+     *
+     * @example
+     * ```ts
+     * if (chat.isAtBottom()) {
+     *     // User sees the latest message
+     * }
+     * ```
+     */
+    export const isAtBottom = (): boolean => {
         return isFollowingBottom
     }
 
-    export function getDebugInfo(): SvelteVirtualChatDebugInfo {
+    /**
+     * Get a snapshot of the current internal state.
+     *
+     * Returns debug information including total messages, rendered DOM count,
+     * measured heights, visible range, scroll position, and follow state.
+     *
+     * @returns Current debug info snapshot
+     *
+     * @example
+     * ```ts
+     * const info = chat.getDebugInfo()
+     * console.log(`${info.renderedCount}/${info.totalMessages} in DOM`)
+     * ```
+     */
+    export const getDebugInfo = (): SvelteVirtualChatDebugInfo => {
         return buildDebugInfo()
     }
 </script>

package/dist/SvelteVirtualChat.svelte.d.ts

@@ -2,14 +2,66 @@ import type { SvelteVirtualChatProps, SvelteVirtualChatDebugInfo } from './types
 declare function $$render<TMessage>(): {
     props: SvelteVirtualChatProps<TMessage>;
     exports: {
-        scrollToBottom: (options?: {
+        /**
+             * Scroll the viewport to the bottom.
+             *
+             * @param options - Optional configuration
+             * @param options.smooth - Use smooth scrolling animation (default: false)
+             *
+             * @example
+             * ```ts
+             * chat.scrollToBottom()
+             * chat.scrollToBottom({ smooth: true })
+             * ```
+             */ scrollToBottom: (options?: {
             smooth?: boolean;
         }) => void;
-        scrollToMessage: (id: string, options?: {
+        /**
+             * Scroll to a specific message by its ID.
+             *
+             * If the message ID is not found in the messages array, this is a no-op.
+             *
+             * @param id - The message ID as returned by `getMessageId`
+             * @param options - Optional configuration
+             * @param options.smooth - Use smooth scrolling animation (default: false)
+             *
+             * @example
+             * ```ts
+             * chat.scrollToMessage('msg-42')
+             * chat.scrollToMessage('msg-42', { smooth: true })
+             * ```
+             */ scrollToMessage: (id: string, options?: {
             smooth?: boolean;
         }) => void;
-        isAtBottom: () => boolean;
-        getDebugInfo: () => SvelteVirtualChatDebugInfo;
+        /**
+             * Check if the viewport is currently following bottom.
+             *
+             * Returns `true` when the viewport is within `followBottomThresholdPx`
+             * of the bottom, meaning new messages will auto-scroll into view.
+             *
+             * @returns Whether the viewport is pinned to the bottom
+             *
+             * @example
+             * ```ts
+             * if (chat.isAtBottom()) {
+             *     // User sees the latest message
+             * }
+             * ```
+             */ isAtBottom: () => boolean;
+        /**
+             * Get a snapshot of the current internal state.
+             *
+             * Returns debug information including total messages, rendered DOM count,
+             * measured heights, visible range, scroll position, and follow state.
+             *
+             * @returns Current debug info snapshot
+             *
+             * @example
+             * ```ts
+             * const info = chat.getDebugInfo()
+             * console.log(`${info.renderedCount}/${info.totalMessages} in DOM`)
+             * ```
+             */ getDebugInfo: () => SvelteVirtualChatDebugInfo;
     };
     bindings: "";
     slots: {};
@@ -21,14 +73,66 @@ declare class __sveltets_Render<TMessage> {
     slots(): ReturnType<typeof $$render<TMessage>>['slots'];
     bindings(): "";
     exports(): {
-        scrollToBottom: (options?: {
+        /**
+             * Scroll the viewport to the bottom.
+             *
+             * @param options - Optional configuration
+             * @param options.smooth - Use smooth scrolling animation (default: false)
+             *
+             * @example
+             * ```ts
+             * chat.scrollToBottom()
+             * chat.scrollToBottom({ smooth: true })
+             * ```
+             */ scrollToBottom: (options?: {
             smooth?: boolean;
         } | undefined) => void;
-        scrollToMessage: (id: string, options?: {
+        /**
+             * Scroll to a specific message by its ID.
+             *
+             * If the message ID is not found in the messages array, this is a no-op.
+             *
+             * @param id - The message ID as returned by `getMessageId`
+             * @param options - Optional configuration
+             * @param options.smooth - Use smooth scrolling animation (default: false)
+             *
+             * @example
+             * ```ts
+             * chat.scrollToMessage('msg-42')
+             * chat.scrollToMessage('msg-42', { smooth: true })
+             * ```
+             */ scrollToMessage: (id: string, options?: {
             smooth?: boolean;
         } | undefined) => void;
-        isAtBottom: () => boolean;
-        getDebugInfo: () => SvelteVirtualChatDebugInfo;
+        /**
+             * Check if the viewport is currently following bottom.
+             *
+             * Returns `true` when the viewport is within `followBottomThresholdPx`
+             * of the bottom, meaning new messages will auto-scroll into view.
+             *
+             * @returns Whether the viewport is pinned to the bottom
+             *
+             * @example
+             * ```ts
+             * if (chat.isAtBottom()) {
+             *     // User sees the latest message
+             * }
+             * ```
+             */ isAtBottom: () => boolean;
+        /**
+             * Get a snapshot of the current internal state.
+             *
+             * Returns debug information including total messages, rendered DOM count,
+             * measured heights, visible range, scroll position, and follow state.
+             *
+             * @returns Current debug info snapshot
+             *
+             * @example
+             * ```ts
+             * const info = chat.getDebugInfo()
+             * console.log(`${info.renderedCount}/${info.totalMessages} in DOM`)
+             * ```
+             */ getDebugInfo: () => SvelteVirtualChatDebugInfo;
     };
 }
 interface $$IsomorphicComponent {

package/dist/virtual-chat/chatAnchoring.d.ts

@@ -4,14 +4,42 @@ import type { ScrollAnchor } from './chatTypes.js';
  * Capture a scroll anchor before a history prepend operation.
  *
  * Records the first visible message and its pixel offset from the
- * viewport top, so we can restore the same visual position after
+ * viewport top, so the same visual position can be restored after
  * new messages are inserted above.
+ *
+ * @param messages - Current array of message objects
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @param scrollTop - Current scrollTop of the viewport
+ * @returns A scroll anchor object, or null if messages is empty
+ *
+ * @example
+ * ```ts
+ * const anchor = captureScrollAnchor(messages, (m) => m.id, cache, 72, viewport.scrollTop)
+ * // ... prepend older messages ...
+ * const newScrollTop = restoreScrollAnchor(anchor, messages, (m) => m.id, cache, 72)
+ * ```
  */
-export declare function captureScrollAnchor<T>(messages: T[], getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number, scrollTop: number): ScrollAnchor | null;
+export declare const captureScrollAnchor: <T>(messages: T[], getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number, scrollTop: number) => ScrollAnchor | null;
 /**
- * Restore scroll position after a history prepend, using a previously captured anchor.
+ * Restore scroll position after a history prepend using a previously captured anchor.
+ *
+ * Finds the anchor message in the (now larger) message array and calculates
+ * the scrollTop value that places it at the same visual offset from the
+ * viewport top as when the anchor was captured.
+ *
+ * @param anchor - The scroll anchor captured before prepend
+ * @param messages - Updated message array (with prepended messages)
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @returns The scrollTop value to restore the visual position, or 0 if anchor not found
  *
- * Finds the anchor message in the (now larger) message array and sets scrollTop
- * so the anchor appears at the same visual offset from the viewport top.
+ * @example
+ * ```ts
+ * const scrollTop = restoreScrollAnchor(anchor, messages, (m) => m.id, cache, 72)
+ * viewport.scrollTop = scrollTop
+ * ```
  */
-export declare function restoreScrollAnchor<T>(anchor: ScrollAnchor, messages: T[], getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number): number;
+export declare const restoreScrollAnchor: <T>(anchor: ScrollAnchor, messages: T[], getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number) => number;

package/dist/virtual-chat/chatAnchoring.js

@@ -3,10 +3,24 @@ import { calculateOffsetForIndex } from './chatMeasurement.svelte.js';
  * Capture a scroll anchor before a history prepend operation.
  *
  * Records the first visible message and its pixel offset from the
- * viewport top, so we can restore the same visual position after
+ * viewport top, so the same visual position can be restored after
  * new messages are inserted above.
+ *
+ * @param messages - Current array of message objects
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @param scrollTop - Current scrollTop of the viewport
+ * @returns A scroll anchor object, or null if messages is empty
+ *
+ * @example
+ * ```ts
+ * const anchor = captureScrollAnchor(messages, (m) => m.id, cache, 72, viewport.scrollTop)
+ * // ... prepend older messages ...
+ * const newScrollTop = restoreScrollAnchor(anchor, messages, (m) => m.id, cache, 72)
+ * ```
  */
-export function captureScrollAnchor(messages, getMessageId, heightCache, estimatedHeight, scrollTop) {
+export const captureScrollAnchor = (messages, getMessageId, heightCache, estimatedHeight, scrollTop) => {
     if (messages.length === 0)
         return null;
     let offsetY = 0;
@@ -22,23 +36,36 @@ export function captureScrollAnchor(messages, getMessageId, heightCache, estimat
         }
         offsetY += h;
     }
-    // Fallback: anchor to last message
     const lastId = getMessageId(messages[messages.length - 1]);
     return {
         messageId: lastId,
         offsetFromViewportTop: offsetY - scrollTop - (heightCache.get(lastId) ?? estimatedHeight)
     };
-}
+};
 /**
- * Restore scroll position after a history prepend, using a previously captured anchor.
+ * Restore scroll position after a history prepend using a previously captured anchor.
+ *
+ * Finds the anchor message in the (now larger) message array and calculates
+ * the scrollTop value that places it at the same visual offset from the
+ * viewport top as when the anchor was captured.
+ *
+ * @param anchor - The scroll anchor captured before prepend
+ * @param messages - Updated message array (with prepended messages)
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @returns The scrollTop value to restore the visual position, or 0 if anchor not found
  *
- * Finds the anchor message in the (now larger) message array and sets scrollTop
- * so the anchor appears at the same visual offset from the viewport top.
+ * @example
+ * ```ts
+ * const scrollTop = restoreScrollAnchor(anchor, messages, (m) => m.id, cache, 72)
+ * viewport.scrollTop = scrollTop
+ * ```
  */
-export function restoreScrollAnchor(anchor, messages, getMessageId, heightCache, estimatedHeight) {
+export const restoreScrollAnchor = (anchor, messages, getMessageId, heightCache, estimatedHeight) => {
     const anchorIndex = messages.findIndex((m) => getMessageId(m) === anchor.messageId);
     if (anchorIndex === -1)
         return 0;
     const anchorOffset = calculateOffsetForIndex(messages, anchorIndex, getMessageId, heightCache, estimatedHeight);
     return anchorOffset - anchor.offsetFromViewportTop;
-}
+};

package/dist/virtual-chat/chatMeasurement.svelte.d.ts

@@ -24,9 +24,38 @@ export declare class ChatHeightCache {
 }
 /**
  * Calculate the total content height given messages and a height cache.
+ *
+ * Sums measured heights for known messages and uses the estimated height
+ * for any messages not yet measured by ResizeObserver.
+ *
+ * @param messages - Array of message objects
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @returns Total content height in pixels
+ *
+ * @example
+ * ```ts
+ * const total = calculateTotalHeight(messages, (m) => m.id, cache, 72)
+ * ```
  */
-export declare function calculateTotalHeight<T>(messages: T[], getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number): number;
+export declare const calculateTotalHeight: <T>(messages: T[], getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number) => number;
 /**
  * Calculate the Y offset for a message at a given index.
+ *
+ * Sums the heights of all messages before the target index to determine
+ * the pixel offset from the top of the content area.
+ *
+ * @param messages - Array of message objects
+ * @param index - Target index to calculate offset for
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @returns Pixel offset from the top of the content area
+ *
+ * @example
+ * ```ts
+ * const offset = calculateOffsetForIndex(messages, 5, (m) => m.id, cache, 72)
+ * ```
  */
-export declare function calculateOffsetForIndex<T>(messages: T[], index: number, getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number): number;
+export declare const calculateOffsetForIndex: <T>(messages: T[], index: number, getMessageId: (_message: T) => string, heightCache: ChatHeightCache, estimatedHeight: number) => number;

package/dist/virtual-chat/chatMeasurement.svelte.js

@@ -33,7 +33,6 @@ export class ChatHeightCache {
     }
     /** Number of measured entries. */
     get size() {
-        // Access version to establish reactive dependency
         void this.#version;
         return Object.keys(this.#heights).length;
     }
@@ -49,23 +48,52 @@ export class ChatHeightCache {
 }
 /**
  * Calculate the total content height given messages and a height cache.
+ *
+ * Sums measured heights for known messages and uses the estimated height
+ * for any messages not yet measured by ResizeObserver.
+ *
+ * @param messages - Array of message objects
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @returns Total content height in pixels
+ *
+ * @example
+ * ```ts
+ * const total = calculateTotalHeight(messages, (m) => m.id, cache, 72)
+ * ```
  */
-export function calculateTotalHeight(messages, getMessageId, heightCache, estimatedHeight) {
+export const calculateTotalHeight = (messages, getMessageId, heightCache, estimatedHeight) => {
     let total = 0;
     for (const msg of messages) {
         const id = getMessageId(msg);
         total += heightCache.get(id) ?? estimatedHeight;
     }
     return total;
-}
+};
 /**
  * Calculate the Y offset for a message at a given index.
+ *
+ * Sums the heights of all messages before the target index to determine
+ * the pixel offset from the top of the content area.
+ *
+ * @param messages - Array of message objects
+ * @param index - Target index to calculate offset for
+ * @param getMessageId - Function to extract a unique ID from a message
+ * @param heightCache - The reactive height cache instance
+ * @param estimatedHeight - Fallback height in pixels for unmeasured messages
+ * @returns Pixel offset from the top of the content area
+ *
+ * @example
+ * ```ts
+ * const offset = calculateOffsetForIndex(messages, 5, (m) => m.id, cache, 72)
+ * ```
  */
-export function calculateOffsetForIndex(messages, index, getMessageId, heightCache, estimatedHeight) {
+export const calculateOffsetForIndex = (messages, index, getMessageId, heightCache, estimatedHeight) => {
     let offset = 0;
     for (let i = 0; i < index && i < messages.length; i++) {
         const id = getMessageId(messages[i]);
         offset += heightCache.get(id) ?? estimatedHeight;
     }
     return offset;
-}
+};

package/package.json

@@ -1,119 +1,117 @@
 {
-    "name": "@humanspeak/svelte-virtual-chat",
-    "version": "0.0.1",
-    "description": "A high-performance virtual chat viewport for Svelte 5. Purpose-built for LLM conversations, support chat, and any message-based UI. Follow-bottom, streaming-stable, history-prepend with anchor preservation.",
-    "keywords": [
-        "svelte",
-        "virtual-chat",
-        "chat-ui",
-        "llm",
-        "virtual-scroll",
-        "streaming",
-        "ai-chat",
-        "svelte5",
-        "conversation",
-        "chat-viewport"
-    ],
-    "homepage": "https://virtualchat.svelte.page",
-    "bugs": {
-        "url": "https://github.com/humanspeak/svelte-virtual-chat/issues"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/humanspeak/svelte-virtual-chat.git"
-    },
-    "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/humanspeak"
-    },
-    "license": "MIT",
-    "author": "Humanspeak, Inc.",
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "type": "module",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "svelte": "./dist/index.js"
-        }
-    },
-    "svelte": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "files": [
-        "dist",
-        "!dist/**/*.test.*",
-        "!dist/**/*.spec.*",
-        "!dist/test/**/*"
-    ],
-    "scripts": {
-        "build": "vite build && pnpm run package",
-        "cf-typegen": "pnpm --filter docs cf-typegen",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "dev": "vite dev",
-        "dev:all": "mprocs",
-        "dev:pkg": "svelte-kit sync && svelte-package --watch",
-        "format": "prettier --write .",
-        "lint": "prettier --check . && eslint .",
-        "lint:fix": "pnpm run format && eslint . --fix",
-        "package": "svelte-kit sync && svelte-package && publint",
-        "prepare": "npx husky",
-        "prepublishOnly": "npm run package",
-        "preview": "vite preview",
-        "test": "vitest run --coverage --",
-        "test:all": "pnpm run test && pnpm run test:e2e",
-        "test:e2e": "playwright test",
-        "test:only": "vitest run --",
-        "test:unit": "vitest run --coverage",
-        "test:watch": "vitest --"
-    },
-    "dependencies": {
-        "esm-env": "^1.2.2"
-    },
-    "devDependencies": {
-        "@eslint/compat": "^2.0.5",
-        "@eslint/js": "^10.0.1",
-        "@playwright/test": "^1.59.1",
-        "@sveltejs/adapter-auto": "^7.0.1",
-        "@sveltejs/kit": "^2.57.1",
-        "@sveltejs/package": "^2.5.7",
-        "@sveltejs/vite-plugin-svelte": "^7.0.0",
-        "@tailwindcss/vite": "^4.2.2",
-        "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/svelte": "^5.3.1",
-        "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^25.6.0",
-        "@typescript-eslint/eslint-plugin": "^8.58.2",
-        "@typescript-eslint/parser": "^8.58.2",
-        "@vitest/coverage-v8": "^4.1.4",
-        "eslint": "^10.2.0",
-        "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "^3.17.0",
-        "eslint-plugin-unused-imports": "^4.4.1",
-        "globals": "^17.5.0",
-        "jsdom": "^29.0.2",
-        "mprocs": "^0.9.2",
-        "prettier": "^3.8.2",
-        "prettier-plugin-organize-imports": "^4.3.0",
-        "prettier-plugin-svelte": "^3.5.1",
-        "prettier-plugin-tailwindcss": "^0.7.2",
-        "publint": "^0.3.18",
-        "svelte": "^5.55.4",
-        "svelte-check": "^4.4.6",
-        "tailwindcss": "^4.2.2",
-        "typescript": "^6.0.2",
-        "typescript-eslint": "^8.58.2",
-        "vite": "^8.0.8",
-        "vitest": "^4.1.4"
-    },
-    "peerDependencies": {
-        "svelte": "^5.0.0"
-    },
-    "volta": {
-        "node": "24.13.0"
-    },
-    "publishConfig": {
-        "access": "public"
+  "name": "@humanspeak/svelte-virtual-chat",
+  "version": "0.0.2",
+  "description": "A high-performance virtual chat viewport for Svelte 5. Purpose-built for LLM conversations, support chat, and any message-based UI. Follow-bottom, streaming-stable, history-prepend with anchor preservation.",
+  "keywords": [
+    "svelte",
+    "virtual-chat",
+    "chat-ui",
+    "llm",
+    "virtual-scroll",
+    "streaming",
+    "ai-chat",
+    "svelte5",
+    "conversation",
+    "chat-viewport"
+  ],
+  "homepage": "https://virtualchat.svelte.page",
+  "bugs": {
+    "url": "https://github.com/humanspeak/svelte-virtual-chat/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/humanspeak/svelte-virtual-chat.git"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/humanspeak"
+  },
+  "license": "MIT",
+  "author": "Humanspeak, Inc.",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
     }
-}
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "!dist/test/**/*"
+  ],
+  "dependencies": {
+    "esm-env": "^1.2.2"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.5",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.59.1",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
+    "@vitest/coverage-v8": "^4.1.4",
+    "eslint": "^10.2.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.17.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.5.0",
+    "jsdom": "^29.0.2",
+    "mprocs": "^0.9.2",
+    "prettier": "^3.8.2",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "publint": "^0.3.18",
+    "svelte": "^5.55.4",
+    "svelte-check": "^4.4.6",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "volta": {
+    "node": "24.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && pnpm run package",
+    "cf-typegen": "pnpm --filter docs cf-typegen",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "dev:all": "mprocs",
+    "dev:pkg": "svelte-kit sync && svelte-package --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "lint:fix": "pnpm run format && eslint . --fix",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "preview": "vite preview",
+    "test": "vitest run --coverage --",
+    "test:all": "pnpm run test && pnpm run test:e2e",
+    "test:e2e": "playwright test",
+    "test:only": "vitest run --",
+    "test:unit": "vitest run --coverage",
+    "test:watch": "vitest --"
+  }
+}