yaxa-svelte 1.10.0 → 1.12.0

package/README.md

@@ -23,13 +23,16 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in
 
 **Yaxa** brings the full developer experience, visual elegance, and full-stack toolkit of **Nuxt UI** and the **Nuxt SEO + SaaS ecosystem** to **SvelteKit 2.7+** and **Svelte 5**.
 
-- 🎨 **Tailwind CSS v4 Native Tokens**: Styled with `@theme` variables; customize any color or token directly.
+- 🎨 **Tailwind CSS v4 Native Tokens**: Styled with `@theme` variables; harmonic radius scale (`--radius-xs` to `--radius-4xl`), chart palette tokens (`--color-chart-1` to `--color-chart-5`), and auto-adaptive scrollbars.
+- 🎛️ **Visual Web Theme Studio**: Interactive runtime palette designer (`/theme` and `<ThemeStudio />`) with live sandbox preview and 1-click token export.
+- 🤖 **AI-Native Primitives**: Drop-in `<AiChat>`, `<PromptBar>`, `<AiThought>`, and `<AiToolCall>` for conversational interfaces and agentic workflows.
+- 📊 **Zero-Dependency SVG Charts**: Pure Svelte 5 `<LineChart>`, `<BarChart>`, and `<DonutChart>` with responsive tooltips, curved splines, and theme-palette synchronisation.
 - ⚡ **Pure Svelte 5 Runes**: Built using `$state`, `$derived`, `$props`, and `$bindable` — zero Virtual DOM overhead.
 - ♿ **Accessible by Default**: Headless primitives powered by **Bits UI**.
 - 🚀 **100% DRY SEO Parity**: Automate dynamic Open Graph cards (`/api/og`), environment-aware `robots.txt`, XML sitemaps with human-readable `sitemap.xsl` stylesheets, PWA manifests, and Schema.org JSON-LD from a single `src/site.config.ts`.
 - 🔐 **Batteries-Included SaaS Suite**: Pre-integrated **Better-Auth**, multi-dialect **Drizzle ORM** (Neon PostgreSQL & Turso LibSQL/SQLite), **Polar.sh** payments & webhook sync, and **Resend** transactional emails.
-- 🧩 **35+ Production Components**: Elements, forms, layout, overlays, and drop-in SaaS widgets (`<AuthCard>`, `<UserMenu>`, `<PricingTable>`, `<SubscriptionCard>`).
-- 🛠️ **Composable Runes**: `useAuth`, `useShortcuts`, `useClipboard`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`.
+- 🧩 **45+ Production Components**: Elements, AI primitives, charts, advanced forms (`<RichTextEditor>`, `<PhoneInput>`, `<CreditCardInput>`), layout, overlays, and drop-in SaaS widgets (`<AuthCard>`, `<UserMenu>`, `<PricingTable>`, `<SubscriptionCard>`).
+- 🛠️ **Composable Runes**: `useAuth`, `useShortcuts`, `useClipboard`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`, `useIdle`.
 
 ---
 
@@ -228,15 +231,19 @@ export const POST = createPolarWebhookHandler();
 
 ## 🧩 Component Library
 
-| Category            | Components                                                                                                                                                                  |
-| :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **SaaS Suite**      | `<Gate>`, `<AuthCard>`, `<UserMenu>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                                            |
-| **Admin Suite**     | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                                  |
-| **Elements**        | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable`, `Chip`, `Meter`, `MetricCard`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`     |
-| **Forms**           | `Form`, `FormField`, `Input`, `InputOTP`, `Textarea`, `Checkbox`, `Switch`, `Select`, `RadioGroup`, `Slider`, `ColorPicker`, `ToggleGroup`, `DatePicker`, `DateRangePicker` |
-| **Layout & Blocks** | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`, Page Blocks (Hero, SaaS Metrics, 2FA Security)                                                    |
-| **Overlays & Nav**  | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Slideover`, `Popover`, `Tooltip`, `Alert`, `Accordion`                |
-| **Composables**     | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`                                               |
+| Category               | Components                                                                                                                                                                                                                                                                                                               |
+| :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Theming & Studio**   | `<ThemeStudio>`, `theme`, `ACCENT_PALETTES`, `NEUTRAL_PALETTES`, `RADIUS_PRESETS`, Harmonic Radius Multiplier Scale, Chart Palette Series Tokens                                                                                                                                                                         |
+| **AI Primitives**      | `<AiChat>`, `<PromptBar>`, `<AiThought>`, `<AiToolCall>`                                                                                                                                                                                                                                                                 |
+| **Charts (Pure SVG)**  | `<LineChart>`, `<BarChart>`, `<DonutChart>` (0 external charting dependencies, auto-responsive, dark/light theme aware)                                                                                                                                                                                                  |
+| **SaaS & Auth Suite**  | `<PasskeyUI>` (WebAuthn), `<TwoFactorModal>` (TOTP), `<AuthCard>` (Polymorphic), `<Gate>`, `<UserMenu>`, `<OrgSwitcher>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                                                                                                     |
+| **Admin Suite**        | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                                                                                                                                                                               |
+| **Elements & Code**    | `<CodeDiff>` (Interactive Diff & Changelog), `<CodeBlock>`, `<DataTable>` (Client & Server Modes), `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Chip`, `Meter`, `MetricCard`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`, `Tree`, `Timeline`, `Terminal`, `VirtualList`, `Carousel` |
+| **Forms (Auto-Wired)** | `<Form>`, `<FormField>`, `Input`, `InputOTP`, `Textarea`, `Checkbox`, `Switch`, `Select`, `Combobox`, `MultiSelect`, `NumberInput`, `PhoneInput`, `CreditCardInput`, `RadioGroup`, `Slider`, `ColorPicker`, `ToggleGroup`, `DatePicker`, `DateRangePicker`, `Dropzone`, `<RichTextEditor>`                               |
+| **Layout & Blocks**    | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`, `DashboardShell` (with independent sidebar tokens), `ResizablePanels`, Page Blocks (`Hero`, `SaaS Metrics`, `FAQ`, `Testimonials`, `FeatureGrid`)                                                                                              |
+| **Overlays & Nav**     | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Drawer`, `Slideover`, `Popover`, `Tooltip` (with `arrow={false}` & `unstyled`), `Alert`, `Accordion`, `NotificationCenter`, `Stepper`                                                                              |
+| **Motion & Actions**   | `springTilt`, `smoothSlide`, `staggerFly`, `autosize`, `clickOutside`, `portal`, `sortableItem`, `infiniteScrollAction`                                                                                                                                                                                                  |
+| **Composables**        | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`, `useIdle`, `useInfiniteScroll`, `useSortable`, `useDataTable`, `useLocale`                                                                                                                |
 
 ---
 

package/dist/actions/index.d.ts

@@ -8,3 +8,5 @@ export { infiniteScroll } from './infiniteScroll';
 export type { InfiniteScrollActionOptions } from './infiniteScroll';
 export { sortableItem } from './sortable';
 export type { SortableItemOptions } from './sortable';
+export { springTilt } from './springTilt';
+export type { SpringTiltOptions } from './springTilt';

package/dist/actions/index.js

@@ -3,3 +3,4 @@ export { clickOutside } from './clickOutside';
 export { portal } from './portal';
 export { infiniteScroll } from './infiniteScroll';
 export { sortableItem } from './sortable';
+export { springTilt } from './springTilt';

package/dist/actions/springTilt.d.ts

@@ -0,0 +1,15 @@
+export interface SpringTiltOptions {
+    max?: number;
+    perspective?: number;
+    scale?: number;
+    stiffness?: number;
+    damping?: number;
+    disabled?: boolean;
+}
+/**
+ * Svelte Action that applies physics-driven 3D spring tilt on hover.
+ */
+export declare function springTilt(node: HTMLElement, options?: SpringTiltOptions): {
+    update(newOptions?: SpringTiltOptions): void;
+    destroy(): void;
+};

package/dist/actions/springTilt.js

@@ -0,0 +1,57 @@
+import { spring } from 'svelte/motion';
+/**
+ * Svelte Action that applies physics-driven 3D spring tilt on hover.
+ */
+export function springTilt(node, options = {}) {
+    let max = options.max ?? 10;
+    let perspective = options.perspective ?? 1000;
+    let scale = options.scale ?? 1.02;
+    const stiffness = options.stiffness ?? 0.12;
+    const damping = options.damping ?? 0.28;
+    let disabled = options.disabled ?? false;
+    const coords = spring({ x: 0, y: 0, scale: 1 }, { stiffness, damping });
+    const unsub = coords.subscribe((val) => {
+        if (disabled) {
+            node.style.transform = '';
+            return;
+        }
+        node.style.transform = `perspective(${perspective}px) rotateX(${val.x.toFixed(2)}deg) rotateY(${val.y.toFixed(2)}deg) scale(${val.scale.toFixed(3)})`;
+        node.style.transformStyle = 'preserve-3d';
+    });
+    function onMouseMove(e) {
+        if (disabled)
+            return;
+        const rect = node.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = -((y - centerY) / (centerY || 1)) * max;
+        const rotateY = ((x - centerX) / (centerX || 1)) * max;
+        coords.set({ x: rotateX, y: rotateY, scale });
+    }
+    function onMouseLeave() {
+        if (disabled)
+            return;
+        coords.set({ x: 0, y: 0, scale: 1 });
+    }
+    node.addEventListener('mousemove', onMouseMove);
+    node.addEventListener('mouseleave', onMouseLeave);
+    return {
+        update(newOptions = {}) {
+            max = newOptions.max ?? 10;
+            perspective = newOptions.perspective ?? 1000;
+            scale = newOptions.scale ?? 1.02;
+            disabled = Boolean(newOptions.disabled);
+            if (disabled) {
+                node.style.transform = '';
+            }
+        },
+        destroy() {
+            unsub();
+            node.removeEventListener('mousemove', onMouseMove);
+            node.removeEventListener('mouseleave', onMouseLeave);
+            node.style.transform = '';
+        }
+    };
+}

package/dist/actions/springTilt.test.d.ts

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

package/dist/actions/springTilt.test.js

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { springTilt } from './springTilt';
+describe('springTilt Action', () => {
+    it('attaches event listeners and updates transform on mousemove', () => {
+        const div = document.createElement('div');
+        Object.defineProperty(div, 'getBoundingClientRect', {
+            value: () => ({
+                left: 0,
+                top: 0,
+                width: 200,
+                height: 200,
+                right: 200,
+                bottom: 200
+            })
+        });
+        const action = springTilt(div, { max: 15, perspective: 800 });
+        expect(div.style.transformStyle).toBe('preserve-3d');
+        // Dispatch mousemove
+        const moveEvent = new MouseEvent('mousemove', {
+            clientX: 150,
+            clientY: 150
+        });
+        div.dispatchEvent(moveEvent);
+        // Cleanup
+        action.destroy();
+        expect(div.style.transform).toBe('');
+    });
+});

package/dist/admin/handler.js

@@ -16,17 +16,17 @@ export function introspectTables(schema) {
                 const columns = [];
                 let primaryKey = 'id';
                 for (const [colKey, col] of Object.entries(rawColumns)) {
-                    const colAny = col;
-                    const isPk = Boolean(colAny.primary || colAny.isPrimaryKey);
+                    const colTyped = col;
+                    const isPk = Boolean(colTyped.primary || colTyped.isPrimaryKey);
                     if (isPk) {
-                        primaryKey = colAny.name || colKey;
+                        primaryKey = colTyped.name || colKey;
                     }
                     columns.push({
-                        name: colAny.name || colKey,
-                        dataType: colAny.dataType || colAny.columnType || typeof colAny,
+                        name: colTyped.name || colKey,
+                        dataType: colTyped.dataType || colTyped.columnType || typeof colTyped,
                         primaryKey: isPk,
-                        notNull: Boolean(colAny.notNull),
-                        hasDefault: Boolean(colAny.hasDefault || colAny.default !== undefined)
+                        notNull: Boolean(colTyped.notNull),
+                        hasDefault: Boolean(colTyped.hasDefault || colTyped.default !== undefined)
                     });
                 }
                 const info = {
@@ -98,13 +98,13 @@ export class DrizzleAdminService {
             const searchTerm = `%${options.search.trim()}%`;
             const textColFilters = [];
             for (const [, col] of Object.entries(rawColumns)) {
-                const colAny = col;
-                if (colAny.dataType === 'string' ||
-                    colAny.dataType === 'text' ||
-                    colAny.columnType?.includes('Text') ||
-                    colAny.columnType?.includes('Varchar')) {
+                const colTyped = col;
+                if (colTyped.dataType === 'string' ||
+                    colTyped.dataType === 'text' ||
+                    colTyped.columnType?.includes('Text') ||
+                    colTyped.columnType?.includes('Varchar')) {
                     try {
-                        textColFilters.push(like(colAny, searchTerm));
+                        textColFilters.push(like(col, searchTerm));
                     }
                     catch {
                         // fallback

package/dist/components/ai/AiChat.svelte

@@ -0,0 +1,263 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface AiMessageThought {
+		duration?: number;
+		running?: boolean;
+		text?: string;
+		steps?: string[];
+	}
+
+	export interface AiMessageTool {
+		name: string;
+		status?: 'idle' | 'running' | 'success' | 'error';
+		args?: Record<string, any> | string;
+		result?: Record<string, any> | string;
+	}
+
+	export interface AiMessage {
+		id: string;
+		role: 'user' | 'assistant' | 'system';
+		content: string;
+		createdAt?: Date | string;
+		thought?: AiMessageThought;
+		tools?: AiMessageTool[];
+		isStreaming?: boolean;
+	}
+
+	export interface AiChatProps {
+		messages?: AiMessage[];
+		loading?: boolean;
+		userAvatar?: string;
+		assistantAvatar?: string;
+		assistantName?: string;
+		placeholder?: string;
+		autoScroll?: boolean;
+		class?: string;
+		onsend?: (text: string, files?: File[]) => void;
+		onstop?: () => void;
+		onretry?: (message: AiMessage) => void;
+		header?: Snippet;
+		messageSlot?: Snippet<[AiMessage]>;
+		footer?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import Avatar from '../elements/Avatar.svelte';
+	import Icon from '../elements/Icon.svelte';
+	import PromptBar from './PromptBar.svelte';
+	import AiThought from './AiThought.svelte';
+	import AiToolCall from './AiToolCall.svelte';
+	import { useToast } from '../../composables/useToast';
+
+	let {
+		messages = [],
+		loading = false,
+		userAvatar = '',
+		assistantAvatar = '',
+		assistantName = 'AI Assistant',
+		placeholder = 'Ask a question or type / for commands...',
+		autoScroll = true,
+		class: className = '',
+		onsend,
+		onstop,
+		onretry,
+		header,
+		messageSlot,
+		footer
+	}: AiChatProps = $props();
+
+	let scrollContainer: HTMLDivElement | null = $state(null);
+	let promptValue = $state('');
+	const toast = useToast();
+
+	function scrollToBottom(smooth = true) {
+		if (scrollContainer && autoScroll) {
+			scrollContainer.scrollTo({
+				top: scrollContainer.scrollHeight,
+				behavior: smooth ? 'smooth' : 'auto'
+			});
+		}
+	}
+
+	$effect(() => {
+		if (messages.length > 0) {
+			setTimeout(() => scrollToBottom(true), 50);
+		}
+	});
+
+	function copyMessage(text: string) {
+		if (typeof navigator !== 'undefined' && navigator.clipboard) {
+			navigator.clipboard.writeText(text);
+			toast.success('Copied to clipboard');
+		}
+	}
+</script>
+
+<div
+	class="flex h-full min-h-[500px] w-full flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-md dark:border-neutral-800 dark:bg-neutral-950 {className}"
+>
+	<!-- Chat Header Bar -->
+	<div
+		class="flex items-center justify-between border-b border-neutral-200/80 bg-neutral-50/50 px-4 py-3 dark:border-neutral-800/80 dark:bg-neutral-900/50"
+	>
+		{#if header}
+			{@render header()}
+		{:else}
+			<div class="flex items-center gap-3">
+				<div
+					class="flex h-8 w-8 items-center justify-center rounded-xl bg-primary-100 text-primary-600 dark:bg-primary-950 dark:text-primary-400"
+				>
+					<Icon name="bot" size="sm" />
+				</div>
+				<div>
+					<div class="text-sm font-semibold text-neutral-900 dark:text-white">
+						{assistantName}
+					</div>
+					<div class="flex items-center gap-1.5 text-[11px] text-neutral-500">
+						<span
+							class="h-1.5 w-1.5 rounded-full {loading
+								? 'animate-ping bg-amber-500'
+								: 'bg-emerald-500'}"
+						></span>
+						<span>{loading ? 'Generating response...' : 'Online & Ready'}</span>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Scrollable Messages Container -->
+	<div
+		bind:this={scrollContainer}
+		class="yaxa-scrollbar flex-1 space-y-6 overflow-y-auto p-4 sm:p-6"
+	>
+		{#if messages.length === 0}
+			<div class="flex h-full min-h-[300px] flex-col items-center justify-center text-center">
+				<div
+					class="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary-50 text-primary-600 dark:bg-primary-950/60 dark:text-primary-400"
+				>
+					<Icon name="sparkles" size="lg" />
+				</div>
+				<h3 class="text-base font-semibold text-neutral-900 dark:text-white">
+					How can I help you today?
+				</h3>
+				<p class="mt-1 max-w-sm text-xs text-neutral-500">
+					Ask questions, analyze documents, generate code, or explore ideas with interactive AI.
+				</p>
+			</div>
+		{:else}
+			{#each messages as msg (msg.id)}
+				{#if messageSlot}
+					{@render messageSlot(msg)}
+				{:else}
+					<div class="flex gap-3.5 {msg.role === 'user' ? 'justify-end' : 'justify-start'}">
+						{#if msg.role === 'assistant'}
+							<Avatar
+								src={assistantAvatar}
+								alt={assistantName}
+								size="sm"
+								class="mt-1 flex-shrink-0"
+							/>
+						{/if}
+
+						<div
+							class="flex max-w-[85%] flex-col gap-1 sm:max-w-[75%] {msg.role === 'user'
+								? 'items-end'
+								: 'items-start'}"
+						>
+							<!-- Agent Reasoning / Thoughts -->
+							{#if msg.thought}
+								<AiThought
+									duration={msg.thought.duration}
+									running={msg.thought.running}
+									steps={msg.thought.steps}
+									class="w-full"
+								>
+									{#if msg.thought.text}
+										<p>{msg.thought.text}</p>
+									{/if}
+								</AiThought>
+							{/if}
+
+							<!-- Agent Tool Invocations -->
+							{#if msg.tools && msg.tools.length > 0}
+								<div class="w-full space-y-2">
+									{#each msg.tools as tool}
+										<AiToolCall
+											name={tool.name}
+											status={tool.status}
+											args={tool.args}
+											result={tool.result}
+										/>
+									{/each}
+								</div>
+							{/if}
+
+							<!-- Message Bubble -->
+							<div
+								class="relative rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-xs {msg.role ===
+								'user'
+									? 'bg-primary-500 text-white dark:bg-primary-600'
+									: 'border border-neutral-200/80 bg-neutral-50 text-neutral-900 dark:border-neutral-800/80 dark:bg-neutral-900 dark:text-neutral-100'}"
+							>
+								<div class="whitespace-pre-wrap">{msg.content}</div>
+
+								{#if msg.isStreaming}
+									<span class="inline-block h-4 w-1.5 animate-pulse bg-current"></span>
+								{/if}
+							</div>
+
+							<!-- Action Buttons -->
+							<div class="mt-1 flex items-center gap-1.5 px-1 text-[11px] text-neutral-400">
+								<button
+									type="button"
+									onclick={() => copyMessage(msg.content)}
+									class="hover:text-neutral-700 dark:hover:text-neutral-200"
+									title="Copy message"
+								>
+									<Icon name="copy" size="xs" />
+								</button>
+
+								{#if msg.role === 'assistant' && onretry}
+									<button
+										type="button"
+										onclick={() => onretry(msg)}
+										class="hover:text-neutral-700 dark:hover:text-neutral-200"
+										title="Regenerate response"
+									>
+										<Icon name="rotate-cw" size="xs" />
+									</button>
+								{/if}
+							</div>
+						</div>
+
+						{#if msg.role === 'user'}
+							<Avatar src={userAvatar} alt="User" size="sm" class="mt-1 flex-shrink-0" />
+						{/if}
+					</div>
+				{/if}
+			{/each}
+		{/if}
+	</div>
+
+	<!-- Bottom Prompt Input Bar -->
+	<div
+		class="border-t border-neutral-200/80 bg-neutral-50/50 p-3 sm:p-4 dark:border-neutral-800/80 dark:bg-neutral-900/50"
+	>
+		{#if footer}
+			{@render footer()}
+		{:else}
+			<PromptBar
+				bind:value={promptValue}
+				{placeholder}
+				{loading}
+				onsubmit={(text, files) => {
+					if (onsend) onsend(text, files);
+				}}
+				{onstop}
+			/>
+		{/if}
+	</div>
+</div>

package/dist/components/ai/AiChat.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+export interface AiMessageThought {
+    duration?: number;
+    running?: boolean;
+    text?: string;
+    steps?: string[];
+}
+export interface AiMessageTool {
+    name: string;
+    status?: 'idle' | 'running' | 'success' | 'error';
+    args?: Record<string, any> | string;
+    result?: Record<string, any> | string;
+}
+export interface AiMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    createdAt?: Date | string;
+    thought?: AiMessageThought;
+    tools?: AiMessageTool[];
+    isStreaming?: boolean;
+}
+export interface AiChatProps {
+    messages?: AiMessage[];
+    loading?: boolean;
+    userAvatar?: string;
+    assistantAvatar?: string;
+    assistantName?: string;
+    placeholder?: string;
+    autoScroll?: boolean;
+    class?: string;
+    onsend?: (text: string, files?: File[]) => void;
+    onstop?: () => void;
+    onretry?: (message: AiMessage) => void;
+    header?: Snippet;
+    messageSlot?: Snippet<[AiMessage]>;
+    footer?: Snippet;
+}
+declare const AiChat: import("svelte").Component<AiChatProps, {}, "">;
+type AiChat = ReturnType<typeof AiChat>;
+export default AiChat;

package/dist/components/ai/AiThought.svelte

@@ -0,0 +1,108 @@
+<script module lang="ts">
+	export interface AiThoughtProps {
+		duration?: number;
+		running?: boolean;
+		title?: string;
+		steps?: string[];
+		open?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+
+	let {
+		duration,
+		running = false,
+		title = 'Thinking Process',
+		steps = [],
+		open = $bindable(false),
+		class: className = '',
+		children
+	}: AiThoughtProps = $props();
+
+	function toggle() {
+		open = !open;
+	}
+</script>
+
+<div
+	class="my-2 overflow-hidden rounded-xl border border-neutral-200/80 bg-neutral-50/60 transition-all dark:border-neutral-800/80 dark:bg-neutral-900/40 {className}"
+>
+	<!-- Header Bar -->
+	<button
+		type="button"
+		onclick={toggle}
+		class="flex w-full items-center justify-between px-3.5 py-2.5 text-left text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-100/60 dark:text-neutral-300 dark:hover:bg-neutral-800/40"
+		aria-expanded={open}
+	>
+		<div class="flex items-center gap-2">
+			{#if running}
+				<span class="relative flex h-2 w-2">
+					<span
+						class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary-400 opacity-75"
+					></span>
+					<span class="relative inline-flex h-2 w-2 rounded-full bg-primary-500"></span>
+				</span>
+			{:else}
+				<Icon name="sparkles" size="xs" class="text-primary-500" />
+			{/if}
+
+			<span class="font-semibold text-neutral-800 dark:text-neutral-200">
+				{title}
+			</span>
+
+			{#if running}
+				<span class="animate-pulse text-[11px] text-primary-600 dark:text-primary-400">
+					Thinking...
+				</span>
+			{:else if duration !== undefined}
+				<span
+					class="py-0.2 rounded bg-neutral-200/60 px-1.5 text-[10px] text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400"
+				>
+					{duration.toFixed(1)}s
+				</span>
+			{/if}
+		</div>
+
+		<div class="flex items-center gap-2 text-neutral-400">
+			{#if steps.length > 0}
+				<span class="text-[11px] text-neutral-500">
+					{steps.length}
+					{steps.length === 1 ? 'step' : 'steps'}
+				</span>
+			{/if}
+			<Icon
+				name={open ? 'chevron-up' : 'chevron-down'}
+				size="xs"
+				class="transition-transform duration-200"
+			/>
+		</div>
+	</button>
+
+	<!-- Collapsible Content -->
+	{#if open}
+		<div
+			class="border-t border-neutral-200/60 px-3.5 py-3 text-xs leading-relaxed text-neutral-600 dark:border-neutral-800/60 dark:text-neutral-300"
+		>
+			{#if steps.length > 0}
+				<ul
+					class="mb-2.5 space-y-1.5 border-b border-neutral-200/40 pb-2.5 dark:border-neutral-800/40"
+				>
+					{#each steps as step, idx (idx)}
+						<li class="flex items-center gap-2 text-[11px] text-neutral-500 dark:text-neutral-400">
+							<Icon name="check" size="xs" class="text-emerald-500" />
+							<span>{step}</span>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/ai/AiThought.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface AiThoughtProps {
+    duration?: number;
+    running?: boolean;
+    title?: string;
+    steps?: string[];
+    open?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const AiThought: import("svelte").Component<AiThoughtProps, {}, "open">;
+type AiThought = ReturnType<typeof AiThought>;
+export default AiThought;