yaxa-svelte 1.9.0 → 1.11.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,18 @@ 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 Suite**        | `<Gate>`, `<AuthCard>`, `<UserMenu>`, `<OrgSwitcher>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                                                                                                                                                                    |
+| **Admin Suite**       | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                                                                                                                                                                           |
+| **Elements**          | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable` (with Column Visibility & Export), `Chip`, `Meter`, `MetricCard`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`, `CodeBlock` (with Svelte 5 Runes Highlighting), `Tree`, `Timeline`, `Terminal`, `VirtualList`, `Carousel` |
+| **Forms**             | `Form`, `FormField`, `Input`, `InputOTP`, `Textarea`, `Checkbox`, `Switch`, `Select`, `Combobox`, `MultiSelect`, `NumberInput`, `RadioGroup`, `Slider`, `ColorPicker`, `ToggleGroup`, `DatePicker`, `DateRangePicker`, `Dropzone`, `<RichTextEditor>`, `<PhoneInput>`, `<CreditCardInput>`                           |
+| **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`                                                                          |
+| **Composables**       | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`, `useIdle`, `useInfiniteScroll`, `useSortable`                                                                                                                                         |
 
 ---
 

package/dist/admin/components/AdminDashboard.svelte

@@ -284,8 +284,11 @@
 						<div class="flex items-center gap-2">
 							<form onsubmit={handleSearch} class="relative">
 								<input
+									id="admin-search-input"
+									name="adminSearch"
 									type="search"
 									placeholder="Search records..."
+									aria-label="Search records"
 									bind:value={searchQuery}
 									class="w-48 rounded-lg border border-neutral-300 bg-white py-1.5 pr-3 pl-8 text-xs text-neutral-900 placeholder-neutral-400 transition-all focus:w-60 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 								/>
@@ -424,6 +427,7 @@
 						{#if col.dataType === 'boolean'}
 							<input
 								id={`create-${col.name}`}
+								name={col.name}
 								type="checkbox"
 								class="h-4 w-4 rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
 								checked={Boolean(newRecordData[col.name])}
@@ -432,6 +436,7 @@
 						{:else if col.dataType === 'number' || col.dataType === 'integer'}
 							<input
 								id={`create-${col.name}`}
+								name={col.name}
 								type="number"
 								placeholder={col.primaryKey ? '(Auto-generated if empty)' : ''}
 								class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs dark:border-neutral-700 dark:bg-neutral-900"
@@ -443,6 +448,7 @@
 						{:else}
 							<input
 								id={`create-${col.name}`}
+								name={col.name}
 								type="text"
 								placeholder={col.primaryKey ? '(Auto-generated UUID if empty)' : ''}
 								class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs dark:border-neutral-700 dark:bg-neutral-900"

package/dist/admin/components/DevSandbox.svelte

@@ -5,7 +5,7 @@
 	import Icon from '../../components/elements/Icon.svelte';
 	import Progress from '../../components/elements/Progress.svelte';
 	import { useUpload } from '../../composables/useUpload.svelte';
-	import { getAuthUserContext } from '../../site/context';
+	import { useYaxa } from '../../site/context';
 
 	interface Props {
 		apiPrefix?: string;
@@ -15,7 +15,8 @@
 	let { apiPrefix = '/admin/api', class: className = '' }: Props = $props();
 
 	// Auth & Context info
-	const user = $derived(getAuthUserContext());
+	const yaxa = useYaxa();
+	const user = $derived(yaxa.user);
 
 	// Email Sandbox State
 	let emailTo = $state('developer@example.com');
@@ -96,6 +97,7 @@
 				>
 				<input
 					id="email-to"
+					name="emailTo"
 					type="email"
 					bind:value={emailTo}
 					placeholder="you@example.com"
@@ -109,6 +111,7 @@
 				>
 				<select
 					id="email-template"
+					name="emailTemplate"
 					bind:value={emailTemplate}
 					class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs text-neutral-900 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 				>
@@ -172,6 +175,7 @@
 				>
 				<input
 					id="storage-file"
+					name="storageFile"
 					type="file"
 					onchange={(e) => {
 						const files = e.currentTarget.files;

package/dist/admin/components/RecordDrawer.svelte

@@ -138,6 +138,7 @@
 								<div class="flex items-center gap-2 pt-1">
 									<input
 										id={`field-${col.name}`}
+										name={col.name}
 										type="checkbox"
 										class="h-4 w-4 rounded border-neutral-300 text-primary-600 focus:ring-primary-500 dark:border-neutral-700 dark:bg-neutral-800"
 										checked={Boolean(formData[col.name])}
@@ -150,6 +151,7 @@
 							{:else if col.dataType === 'number' || col.dataType === 'integer'}
 								<input
 									id={`field-${col.name}`}
+									name={col.name}
 									type="number"
 									class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-sm text-neutral-900 placeholder-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 									disabled={col.primaryKey}
@@ -162,6 +164,7 @@
 							{:else if String(formData[col.name] ?? '').length > 60 || col.name.includes('description') || col.name.includes('body')}
 								<textarea
 									id={`field-${col.name}`}
+									name={col.name}
 									rows={3}
 									class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 font-mono text-sm text-xs text-neutral-900 placeholder-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 									disabled={col.primaryKey}
@@ -172,6 +175,7 @@
 							{:else}
 								<input
 									id={`field-${col.name}`}
+									name={col.name}
 									type="text"
 									class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-sm text-neutral-900 placeholder-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 									disabled={col.primaryKey}

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;