@tanstack/ai-svelte 0.13.13 → 0.13.14

package/dist/create-generate-speech.svelte.d.ts

@@ -1,85 +0,0 @@
-import type { StreamChunk, TTSResult } from '@tanstack/ai';
-import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SpeechGenerateInput } from '@tanstack/ai-client';
-/**
- * Options for the createGenerateSpeech function.
- *
- * @template TOutput - The output type after optional transform (defaults to TTSResult)
- */
-export interface CreateGenerateSpeechOptions<TOutput = TTSResult> {
-    /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
-    connection?: ConnectConnectionAdapter;
-    /** Direct async function for speech generation */
-    fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>;
-    /** Unique identifier for this generation instance */
-    id?: string;
-    /** Additional body parameters to send with connect-based adapter requests */
-    body?: Record<string, any>;
-    /** Display options for TanStack AI Devtools. */
-    devtools?: AIDevtoolsDisplayOptions;
-    /**
-     * Callback when speech is generated. Can optionally return a transformed value.
-     *
-     * - Return a non-null value to transform and store it as the result
-     * - Return `null` to keep the previous result unchanged
-     * - Return nothing (`void`) to store the raw result as-is
-     */
-    onResult?: (result: TTSResult) => TOutput | null | void;
-    /** Callback when an error occurs */
-    onError?: (error: Error) => void;
-    /** Callback when progress is reported (0-100) */
-    onProgress?: (progress: number, message?: string) => void;
-    /** Callback for each stream chunk (connect-based adapter mode only) */
-    onChunk?: (chunk: StreamChunk) => void;
-}
-/**
- * Return type for the createGenerateSpeech function.
- *
- * @template TOutput - The output type (after optional transform)
- */
-export interface CreateGenerateSpeechReturn<TOutput = TTSResult> {
-    /** The TTS result containing audio data, or null */
-    readonly result: TOutput | null;
-    /** Whether generation is in progress */
-    readonly isLoading: boolean;
-    /** Current error, if any */
-    readonly error: Error | undefined;
-    /** Current state of the generation */
-    readonly status: GenerationClientState;
-    /** Trigger speech generation */
-    generate: (input: SpeechGenerateInput) => Promise<void>;
-    /** Abort the current generation */
-    stop: () => void;
-    /** Clear result, error, and return to idle */
-    reset: () => void;
-    /** Update additional body parameters */
-    updateBody: (body: Record<string, any>) => void;
-}
-/**
- * Creates a reactive speech generation (text-to-speech) instance for Svelte 5.
- *
- * @example
- * ```svelte
- * <script>
- *   import { createGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-svelte'
- *
- *   const speech = createGenerateSpeech({
- *     connection: fetchServerSentEvents('/api/generate/speech'),
- *   })
- * </script>
- *
- * <div>
- *   <button onclick={() => speech.generate({ text: 'Hello world', voice: 'alloy' })}>
- *     Generate Speech
- *   </button>
- *   {#if speech.isLoading}
- *     <p>Generating...</p>
- *   {/if}
- *   {#if speech.result}
- *     <audio src={`data:audio/${speech.result.format};base64,${speech.result.audio}`} controls></audio>
- *   {/if}
- * </div>
- * ```
- */
-export declare function createGenerateSpeech<TOnResult extends ((result: TTSResult) => any) | undefined = undefined>(options: Omit<CreateGenerateSpeechOptions, 'onResult'> & {
-    onResult?: TOnResult;
-}): CreateGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>>;

package/dist/create-generate-speech.svelte.js

@@ -1,57 +0,0 @@
-import { createGeneration } from './create-generation.svelte';
-/**
- * Creates a reactive speech generation (text-to-speech) instance for Svelte 5.
- *
- * @example
- * ```svelte
- * <script>
- *   import { createGenerateSpeech, fetchServerSentEvents } from '@tanstack/ai-svelte'
- *
- *   const speech = createGenerateSpeech({
- *     connection: fetchServerSentEvents('/api/generate/speech'),
- *   })
- * </script>
- *
- * <div>
- *   <button onclick={() => speech.generate({ text: 'Hello world', voice: 'alloy' })}>
- *     Generate Speech
- *   </button>
- *   {#if speech.isLoading}
- *     <p>Generating...</p>
- *   {/if}
- *   {#if speech.result}
- *     <audio src={`data:audio/${speech.result.format};base64,${speech.result.audio}`} controls></audio>
- *   {/if}
- * </div>
- * ```
- */
-export function createGenerateSpeech(options) {
-    const devtools = {
-        ...options.devtools,
-        framework: 'svelte',
-        hookName: 'createGenerateSpeech',
-        outputKind: 'audio',
-    };
-    const gen = createGeneration({
-        ...options,
-        devtools,
-    });
-    return {
-        get result() {
-            return gen.result;
-        },
-        get isLoading() {
-            return gen.isLoading;
-        },
-        get error() {
-            return gen.error;
-        },
-        get status() {
-            return gen.status;
-        },
-        generate: gen.generate,
-        stop: gen.stop,
-        reset: gen.reset,
-        updateBody: gen.updateBody,
-    };
-}

package/dist/create-generate-video.svelte.d.ts

@@ -1,99 +0,0 @@
-import type { StreamChunk } from '@tanstack/ai';
-import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo } from '@tanstack/ai-client';
-/**
- * Options for the createGenerateVideo function.
- *
- * @template TOutput - The output type after optional transform (defaults to VideoGenerateResult)
- */
-export interface CreateGenerateVideoOptions<TOutput = VideoGenerateResult> {
-    /** Connect-based adapter for streaming transport (server handles polling) */
-    connection?: ConnectConnectionAdapter;
-    /** Direct async function that returns a completed video result */
-    fetcher?: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>;
-    /** Unique identifier for this generation instance */
-    id?: string;
-    /** Additional body parameters to send with connect-based adapter requests */
-    body?: Record<string, any>;
-    /** Display options for TanStack AI Devtools. */
-    devtools?: AIDevtoolsDisplayOptions;
-    /**
-     * Callback when video generation completes. Can optionally return a transformed value.
-     *
-     * - Return a non-null value to transform and store it as the result
-     * - Return `null` to keep the previous result unchanged
-     * - Return nothing (`void`) to store the raw result as-is
-     */
-    onResult?: (result: VideoGenerateResult) => TOutput | null | void;
-    /** Callback when an error occurs */
-    onError?: (error: Error) => void;
-    /** Callback when progress is reported (0-100) */
-    onProgress?: (progress: number, message?: string) => void;
-    /** Callback when a video job is created */
-    onJobCreated?: (jobId: string) => void;
-    /** Callback on each status update */
-    onStatusUpdate?: (status: VideoStatusInfo) => void;
-    /** Callback for each stream chunk (connect-based adapter mode only) */
-    onChunk?: (chunk: StreamChunk) => void;
-}
-/**
- * Return type for the createGenerateVideo function.
- *
- * @template TOutput - The output type (after optional transform)
- */
-export interface CreateGenerateVideoReturn<TOutput = VideoGenerateResult> {
-    /** The final video result (with URL), or null */
-    readonly result: TOutput | null;
-    /** The current job ID, or null */
-    readonly jobId: string | null;
-    /** Current video generation status info, or null */
-    readonly videoStatus: VideoStatusInfo | null;
-    /** Whether generation/polling is in progress */
-    readonly isLoading: boolean;
-    /** Current error, if any */
-    readonly error: Error | undefined;
-    /** Current state of the generation */
-    readonly status: GenerationClientState;
-    /** Trigger video generation */
-    generate: (input: VideoGenerateInput) => Promise<void>;
-    /** Abort the current generation/polling */
-    stop: () => void;
-    /** Clear all state and return to idle */
-    reset: () => void;
-    /** Stop in-flight work and unregister devtools listeners */
-    dispose: () => void;
-    /** Update additional body parameters */
-    updateBody: (body: Record<string, any>) => void;
-}
-/**
- * Creates a reactive video generation instance for Svelte 5.
- *
- * Video generation is asynchronous: a job is created, then polled for status
- * until completion. This function handles the full lifecycle.
- *
- * @example
- * ```svelte
- * <script>
- *   import { createGenerateVideo, fetchServerSentEvents } from '@tanstack/ai-svelte'
- *
- *   const video = createGenerateVideo({
- *     connection: fetchServerSentEvents('/api/generate/video'),
- *     onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),
- *   })
- * </script>
- *
- * <div>
- *   <button onclick={() => video.generate({ prompt: 'A flying car over a city' })}>
- *     Generate Video
- *   </button>
- *   {#if video.isLoading && video.videoStatus}
- *     <p>Status: {video.videoStatus.status} ({video.videoStatus.progress}%)</p>
- *   {/if}
- *   {#if video.result}
- *     <video src={video.result.url} controls></video>
- *   {/if}
- * </div>
- * ```
- */
-export declare function createGenerateVideo<TOnResult extends ((result: VideoGenerateResult) => any) | undefined = undefined>(options: Omit<CreateGenerateVideoOptions, 'onResult'> & {
-    onResult?: TOnResult;
-}): CreateGenerateVideoReturn<InferGenerationOutput<VideoGenerateResult, TOnResult>>;

package/dist/create-generate-video.svelte.js

@@ -1,143 +0,0 @@
-import { VideoGenerationClient } from '@tanstack/ai-client';
-import { createVideoDevtoolsBridge } from '@tanstack/ai-client/devtools';
-/**
- * Creates a reactive video generation instance for Svelte 5.
- *
- * Video generation is asynchronous: a job is created, then polled for status
- * until completion. This function handles the full lifecycle.
- *
- * @example
- * ```svelte
- * <script>
- *   import { createGenerateVideo, fetchServerSentEvents } from '@tanstack/ai-svelte'
- *
- *   const video = createGenerateVideo({
- *     connection: fetchServerSentEvents('/api/generate/video'),
- *     onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),
- *   })
- * </script>
- *
- * <div>
- *   <button onclick={() => video.generate({ prompt: 'A flying car over a city' })}>
- *     Generate Video
- *   </button>
- *   {#if video.isLoading && video.videoStatus}
- *     <p>Status: {video.videoStatus.status} ({video.videoStatus.progress}%)</p>
- *   {/if}
- *   {#if video.result}
- *     <video src={video.result.url} controls></video>
- *   {/if}
- * </div>
- * ```
- */
-export function createGenerateVideo(options) {
-    const clientId = options.id ||
-        `video-${Date.now()}-${Math.random().toString(36).substring(7)}`;
-    // Create reactive state using Svelte 5 runes
-    let result = $state(null);
-    let jobId = $state(null);
-    let videoStatus = $state(null);
-    let isLoading = $state(false);
-    let error = $state(undefined);
-    let status = $state('idle');
-    // `body` uses a conditional spread because `VideoGenerationClientOptions.body`
-    // is declared `body?: Record<string, any>` (absent vs. present) under
-    // `exactOptionalPropertyTypes`. The optional caller `options.body` may be
-    // undefined, in which case we want the key to be absent on the target.
-    const baseOptions = {
-        id: clientId,
-        body: options.body,
-        devtoolsBridgeFactory: createVideoDevtoolsBridge,
-        devtools: {
-            ...options.devtools,
-            framework: 'svelte',
-            hookName: 'createGenerateVideo',
-            outputKind: 'video',
-        },
-        onResult: (r) => options.onResult?.(r),
-        onError: (e) => options.onError?.(e),
-        onProgress: (p, m) => options.onProgress?.(p, m),
-        onChunk: (c) => options.onChunk?.(c),
-        onJobCreated: (id) => options.onJobCreated?.(id),
-        onStatusUpdate: (s) => options.onStatusUpdate?.(s),
-        onResultChange: (r) => {
-            result = r;
-        },
-        onLoadingChange: (l) => {
-            isLoading = l;
-        },
-        onErrorChange: (e) => {
-            error = e;
-        },
-        onStatusChange: (s) => {
-            status = s;
-        },
-        onJobIdChange: (id) => {
-            jobId = id;
-        },
-        onVideoStatusChange: (s) => {
-            videoStatus = s;
-        },
-    };
-    let client;
-    if (options.connection) {
-        client = new VideoGenerationClient({
-            ...baseOptions,
-            connection: options.connection,
-        });
-    }
-    else if (options.fetcher) {
-        client = new VideoGenerationClient({
-            ...baseOptions,
-            fetcher: options.fetcher,
-        });
-    }
-    else {
-        throw new Error('createGenerateVideo requires either a connection or fetcher option');
-    }
-    client.mountDevtools();
-    // Note: Cleanup is handled by calling dispose() directly when needed.
-    // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
-    // during component initialization, so we don't add automatic cleanup here.
-    // Users should call video.dispose() in their component's cleanup if needed.
-    const generate = async (input) => {
-        await client.generate(input);
-    };
-    const stop = () => {
-        client.stop();
-    };
-    const reset = () => {
-        client.reset();
-    };
-    const dispose = () => {
-        client.dispose();
-    };
-    const updateBody = (newBody) => {
-        client.updateOptions({ body: newBody });
-    };
-    return {
-        get result() {
-            return result;
-        },
-        get jobId() {
-            return jobId;
-        },
-        get videoStatus() {
-            return videoStatus;
-        },
-        get isLoading() {
-            return isLoading;
-        },
-        get error() {
-            return error;
-        },
-        get status() {
-            return status;
-        },
-        generate,
-        stop,
-        reset,
-        dispose,
-        updateBody,
-    };
-}

package/dist/create-generation.svelte.d.ts

@@ -1,96 +0,0 @@
-import type { StreamChunk } from '@tanstack/ai';
-import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
-/**
- * Options for the createGeneration function.
- *
- * Accepts either a `connection` (streaming transport) or a `fetcher` (direct async call).
- *
- * @template TInput - The input type for the generation request
- * @template TResult - The result type returned by the generation
- * @template TOutput - The output type after optional transform (defaults to TResult)
- */
-export interface CreateGenerationOptions<TInput, TResult, TOutput = TResult> {
-    /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
-    connection?: ConnectConnectionAdapter;
-    /** Direct async function for one-shot generation (no streaming protocol needed) */
-    fetcher?: GenerationFetcher<TInput, TResult>;
-    /** Unique identifier for this generation instance */
-    id?: string;
-    /** Additional body parameters to send with connect-based adapter requests */
-    body?: Record<string, any>;
-    /** Display options for TanStack AI Devtools. */
-    devtools?: AIDevtoolsDisplayOptions;
-    /**
-     * Callback when a result is received. Can optionally return a transformed value.
-     *
-     * - Return a non-null value to transform and store it as the result
-     * - Return `null` to keep the previous result unchanged
-     * - Return nothing (`void`) to store the raw result as-is
-     */
-    onResult?: (result: TResult) => TOutput | null | void;
-    /** Callback when an error occurs */
-    onError?: (error: Error) => void;
-    /** Callback when progress is reported (0-100) */
-    onProgress?: (progress: number, message?: string) => void;
-    /** Callback for each stream chunk (connect-based adapter mode only) */
-    onChunk?: (chunk: StreamChunk) => void;
-}
-/**
- * Return type for the createGeneration function.
- *
- * @template TOutput - The output type (after optional transform)
- */
-export interface CreateGenerationReturn<TOutput> {
-    /** The generation result, or null if not yet generated */
-    readonly result: TOutput | null;
-    /** Whether a generation is currently in progress */
-    readonly isLoading: boolean;
-    /** Current error, if any */
-    readonly error: Error | undefined;
-    /** Current state of the generation client */
-    readonly status: GenerationClientState;
-    /** Trigger a generation request */
-    generate: (input: Record<string, any>) => Promise<void>;
-    /** Abort the current generation */
-    stop: () => void;
-    /** Clear result, error, and return to idle */
-    reset: () => void;
-    /** Stop in-flight work and unregister devtools listeners */
-    dispose: () => void;
-    /** Update additional body parameters */
-    updateBody: (body: Record<string, any>) => void;
-}
-/**
- * Creates a reactive generation instance for Svelte 5.
- *
- * This is the base function used by `createGenerateImage`, `createGenerateSpeech`,
- * `createTranscription`, and `createSummarize`. You can also use it directly
- * for custom generation types.
- *
- * @template TInput - The input type for the generation request
- * @template TResult - The result type returned by the generation
- *
- * @example
- * ```svelte
- * <script>
- *   import { createGeneration, fetchServerSentEvents } from '@tanstack/ai-svelte'
- *
- *   const gen = createGeneration({
- *     connection: fetchServerSentEvents('/api/generate/custom'),
- *   })
- * </script>
- *
- * <div>
- *   <button onclick={() => gen.generate({ prompt: 'Hello' })}>Generate</button>
- *   {#if gen.isLoading}
- *     <p>Generating...</p>
- *   {/if}
- *   {#if gen.result}
- *     <p>{JSON.stringify(gen.result)}</p>
- *   {/if}
- * </div>
- * ```
- */
-export declare function createGeneration<TInput extends Record<string, any>, TResult, TOnResult extends ((result: TResult) => any) | undefined = undefined>(options: Omit<CreateGenerationOptions<TInput, TResult>, 'onResult'> & {
-    onResult?: TOnResult;
-}): CreateGenerationReturn<InferGenerationOutput<TResult, TOnResult>>;

package/dist/create-generation.svelte.js

@@ -1,127 +0,0 @@
-import { GenerationClient } from '@tanstack/ai-client';
-import { createGenerationDevtoolsBridge } from '@tanstack/ai-client/devtools';
-/**
- * Creates a reactive generation instance for Svelte 5.
- *
- * This is the base function used by `createGenerateImage`, `createGenerateSpeech`,
- * `createTranscription`, and `createSummarize`. You can also use it directly
- * for custom generation types.
- *
- * @template TInput - The input type for the generation request
- * @template TResult - The result type returned by the generation
- *
- * @example
- * ```svelte
- * <script>
- *   import { createGeneration, fetchServerSentEvents } from '@tanstack/ai-svelte'
- *
- *   const gen = createGeneration({
- *     connection: fetchServerSentEvents('/api/generate/custom'),
- *   })
- * </script>
- *
- * <div>
- *   <button onclick={() => gen.generate({ prompt: 'Hello' })}>Generate</button>
- *   {#if gen.isLoading}
- *     <p>Generating...</p>
- *   {/if}
- *   {#if gen.result}
- *     <p>{JSON.stringify(gen.result)}</p>
- *   {/if}
- * </div>
- * ```
- */
-export function createGeneration(options) {
-    const clientId = options.id || `gen-${Date.now()}-${Math.random().toString(36).substring(7)}`;
-    // Create reactive state using Svelte 5 runes
-    let result = $state(null);
-    let isLoading = $state(false);
-    let error = $state(undefined);
-    let status = $state('idle');
-    // `body` uses a conditional spread because `GenerationClientOptions.body`
-    // is declared `body?: Record<string, any>` (absent vs. present) under
-    // `exactOptionalPropertyTypes`. Assigning `undefined` directly would be
-    // rejected — the optional caller `options.body` may be undefined, in which
-    // case we want the key to be absent.
-    const clientOptions = {
-        id: clientId,
-        body: options.body,
-        devtoolsBridgeFactory: createGenerationDevtoolsBridge,
-        devtools: {
-            ...options.devtools,
-            framework: 'svelte',
-            hookName: 'createGeneration',
-        },
-        onResult: (r) => options.onResult?.(r),
-        onError: (e) => options.onError?.(e),
-        onProgress: (p, m) => options.onProgress?.(p, m),
-        onChunk: (c) => options.onChunk?.(c),
-        onResultChange: (r) => {
-            result = r;
-        },
-        onLoadingChange: (l) => {
-            isLoading = l;
-        },
-        onErrorChange: (e) => {
-            error = e;
-        },
-        onStatusChange: (s) => {
-            status = s;
-        },
-    };
-    let client;
-    if (options.connection) {
-        client = new GenerationClient({
-            ...clientOptions,
-            connection: options.connection,
-        });
-    }
-    else if (options.fetcher) {
-        client = new GenerationClient({
-            ...clientOptions,
-            fetcher: options.fetcher,
-        });
-    }
-    else {
-        throw new Error('createGeneration requires either a connection or fetcher option');
-    }
-    client.mountDevtools();
-    // Note: Cleanup is handled by calling dispose() directly when needed.
-    // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
-    // during component initialization, so we don't add automatic cleanup here.
-    // Users should call gen.dispose() in their component's cleanup if needed.
-    const generate = async (input) => {
-        await client.generate(input);
-    };
-    const stop = () => {
-        client.stop();
-    };
-    const reset = () => {
-        client.reset();
-    };
-    const dispose = () => {
-        client.dispose();
-    };
-    const updateBody = (newBody) => {
-        client.updateOptions({ body: newBody });
-    };
-    return {
-        get result() {
-            return result;
-        },
-        get isLoading() {
-            return isLoading;
-        },
-        get error() {
-            return error;
-        },
-        get status() {
-            return status;
-        },
-        generate: generate,
-        stop,
-        reset,
-        dispose,
-        updateBody,
-    };
-}