@zveltio/components 1.0.0

package/ai/AIQueryBuilder/AIQueryBuilder.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	interface QueryCondition {
+		field: string;
+		operator: string;
+		value: any;
+	}
+
+	let {
+		query = $bindable<QueryCondition[]>([]),
+		fields = [],
+		onGenerate = null
+	}: {
+		query?: QueryCondition[];
+		fields: Array<{name: string; type: string}>;
+		onGenerate?: ((naturalLanguage: string) => Promise<QueryCondition[]>) | null;
+	} = $props();
+
+	let naturalQuery = $state('');
+	let generating = $state(false);
+
+	const operators = {
+		text: ['equals', 'contains', 'starts with'],
+		number: ['equals', '>', '<', '>=', '<='],
+		date: ['equals', 'before', 'after']
+	};
+
+	function addCondition() {
+		query = [...query, { field: fields[0]?.name || '', operator: 'equals', value: '' }];
+	}
+
+	function removeCondition(index: number) {
+		query = query.filter((_, i) => i !== index);
+	}
+
+	async function generateFromNatural() {
+		if (!onGenerate || !naturalQuery.trim()) return;
+		generating = true;
+		try {
+			query = await onGenerate(naturalQuery);
+		} finally {
+			generating = false;
+		}
+	}
+</script>
+
+<div class="space-y-4">
+	{#if onGenerate}
+		<div class="flex gap-2">
+			<input
+				type="text"
+				bind:value={naturalQuery}
+				placeholder="Describe your query in plain English..."
+				class="input input-bordered flex-1"
+			/>
+			<button class="btn btn-primary" onclick={generateFromNatural} disabled={generating}>
+				{#if generating}
+					<span class="loading loading-spinner loading-sm"></span>
+				{:else}
+					Generate
+				{/if}
+			</button>
+		</div>
+		<div class="divider">OR build manually</div>
+	{/if}
+
+	<div class="space-y-2">
+		{#each query as condition, i}
+			<div class="flex gap-2 items-start">
+				<select bind:value={condition.field} class="select select-sm select-bordered">
+					{#each fields as field}
+						<option value={field.name}>{field.name}</option>
+					{/each}
+				</select>
+				<select bind:value={condition.operator} class="select select-sm select-bordered">
+					{#each operators[fields.find(f => f.name === condition.field)?.type || 'text'] || [] as op}
+						<option value={op}>{op}</option>
+					{/each}
+				</select>
+				<input
+					type="text"
+					bind:value={condition.value}
+					class="input input-sm input-bordered flex-1"
+					placeholder="Value"
+				/>
+				<button class="btn btn-sm btn-ghost btn-square text-error" onclick={() => removeCondition(i)}>✕</button>
+			</div>
+		{/each}
+	</div>
+
+	<button class="btn btn-sm btn-ghost" onclick={addCondition}>+ Add Condition</button>
+</div>

package/ai/Omnisearch/Omnisearch.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	interface SearchResult {
+		id: string;
+		title: string;
+		description?: string;
+		category?: string;
+		href?: string;
+	}
+
+	let {
+		onSearch,
+		placeholder = 'Search everything...',
+		categories = []
+	}: {
+		onSearch: (query: string, category?: string) => Promise<SearchResult[]>;
+		placeholder?: string;
+		categories?: string[];
+	} = $props();
+
+	let query = $state('');
+	let results = $state<SearchResult[]>([]);
+	let loading = $state(false);
+	let selectedCategory = $state<string | null>(null);
+	let showResults = $state(false);
+
+	async function handleSearch() {
+		if (query.length < 2) {
+			results = [];
+			return;
+		}
+
+		loading = true;
+		try {
+			results = await onSearch(query, selectedCategory || undefined);
+			showResults = true;
+		} finally {
+			loading = false;
+		}
+	}
+
+	let debounceTimer: number;
+	function debounceSearch() {
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(handleSearch, 300) as any;
+	}
+</script>
+
+<div class="relative">
+	<div class="flex gap-2">
+		<div class="relative flex-1">
+			<input
+				type="text"
+				bind:value={query}
+				oninput={debounceSearch}
+				{placeholder}
+				class="input input-bordered w-full pr-10"
+			/>
+			<div class="absolute right-3 top-3">
+				{#if loading}
+					<span class="loading loading-spinner loading-sm"></span>
+				{:else}
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+					</svg>
+				{/if}
+			</div>
+		</div>
+
+		{#if categories.length > 0}
+			<select bind:value={selectedCategory} class="select select-bordered" onchange={handleSearch}>
+				<option value={null}>All</option>
+				{#each categories as cat}
+					<option value={cat}>{cat}</option>
+				{/each}
+			</select>
+		{/if}
+	</div>
+
+	{#if showResults && query.length >= 2}
+		<div class="absolute z-50 w-full mt-2 bg-base-100 border border-base-200 rounded-lg shadow-lg max-h-96 overflow-auto">
+			{#if results.length === 0}
+				<div class="p-4 text-center text-sm opacity-60">No results found</div>
+			{:else}
+				{#each results as result}
+					<a
+						href={result.href || '#'}
+						class="block p-3 hover:bg-base-200 transition"
+						onclick={() => showResults = false}
+					>
+						<div class="flex items-start justify-between">
+							<div class="flex-1">
+								<h4 class="font-semibold text-sm">{result.title}</h4>
+								{#if result.description}
+									<p class="text-xs opacity-60 mt-1">{result.description}</p>
+								{/if}
+							</div>
+							{#if result.category}
+								<span class="badge badge-xs">{result.category}</span>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			{/if}
+		</div>
+
+		<button
+			class="fixed inset-0 z-40"
+			onclick={() => showResults = false}
+			tabindex="-1"
+		></button>
+	{/if}
+</div>

package/ai/VoiceSearch/VoiceSearch.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	let {
+		onTranscript,
+		onSearch = null
+	}: {
+		onTranscript: (text: string) => void;
+		onSearch?: ((text: string) => Promise<void>) | null;
+	} = $props();
+
+	let listening = $state(false);
+	let transcript = $state('');
+	let error = $state('');
+
+	function startListening() {
+		if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+			error = 'Speech recognition not supported';
+			return;
+		}
+
+		const SpeechRecognition = (window as any).webkitSpeechRecognition || (window as any).SpeechRecognition;
+		const recognition = new SpeechRecognition();
+		
+		recognition.continuous = false;
+		recognition.interimResults = false;
+		recognition.lang = 'en-US';
+
+		recognition.onstart = () => {
+			listening = true;
+			error = '';
+		};
+
+		recognition.onresult = (event: any) => {
+			const text = event.results[0][0].transcript;
+			transcript = text;
+			onTranscript(text);
+			if (onSearch) onSearch(text);
+		};
+
+		recognition.onerror = (event: any) => {
+			error = event.error;
+			listening = false;
+		};
+
+		recognition.onend = () => {
+			listening = false;
+		};
+
+		recognition.start();
+	}
+</script>
+
+<div class="flex items-center gap-2">
+	<button
+		class="btn btn-circle {listening ? 'btn-error animate-pulse' : 'btn-ghost'}"
+		onclick={startListening}
+		disabled={listening}
+		title="Voice search"
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
+		</svg>
+	</button>
+	
+	{#if listening}
+		<span class="text-sm opacity-60">Listening...</span>
+	{:else if transcript}
+		<span class="text-sm">{transcript}</span>
+	{/if}
+
+	{#if error}
+		<span class="text-sm text-error">{error}</span>
+	{/if}
+</div>

package/attachments/AttachmentManager/AttachmentManager.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	/**
+	 * AttachmentManager - File upload/management component
+	 * Standalone, works with any storage backend
+	 */
+	
+	interface FileItem {
+		id: string;
+		name: string;
+		size: number;
+		type: string;
+		url?: string;
+		created_at: string;
+	}
+	
+	let {
+		files = [],
+		onUpload,
+		onDelete,
+		onDownload = null,
+		acceptedTypes = '*',
+		readOnly = false,
+		maxFiles = 10
+	}: {
+		files: FileItem[];
+		onUpload: (files: FileList) => Promise<void>;
+		onDelete: (fileId: string) => Promise<void>;
+		onDownload?: ((fileId: string) => void) | null;
+		acceptedTypes?: string;
+		readOnly?: boolean;
+		maxFiles?: number;
+	} = $props();
+
+	let uploading = $state(false);
+	let dragOver = $state(false);
+	let fileInput: HTMLInputElement;
+
+	function formatSize(bytes: number): string {
+		if (bytes < 1024) return bytes + ' B';
+		if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+		return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+	}
+
+	function getFileIcon(type: string): string {
+		if (type.startsWith('image/')) return '🖼️';
+		if (type.startsWith('video/')) return '🎥';
+		if (type.startsWith('audio/')) return '🎵';
+		if (type.includes('pdf')) return '📄';
+		if (type.includes('zip') || type.includes('rar')) return '📦';
+		return '📁';
+	}
+
+	async function handleUpload(fileList: FileList | null) {
+		if (!fileList || fileList.length === 0 || readOnly) return;
+		
+		if (files.length + fileList.length > maxFiles) {
+			alert(`Maximum ${maxFiles} files allowed`);
+			return;
+		}
+
+		uploading = true;
+		try {
+			await onUpload(fileList);
+		} finally {
+			uploading = false;
+		}
+	}
+
+	async function handleDelete(fileId: string) {
+		if (!confirm('Delete this file?')) return;
+		await onDelete(fileId);
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		dragOver = false;
+		if (e.dataTransfer?.files) {
+			handleUpload(e.dataTransfer.files);
+		}
+	}
+
+	function handleDragOver(e: DragEvent) {
+		e.preventDefault();
+		dragOver = true;
+	}
+</script>
+
+<div class="space-y-4">
+	<!-- Upload Area -->
+	{#if !readOnly}
+		<div
+			class="border-2 border-dashed rounded-lg p-8 text-center transition {dragOver ? 'border-primary bg-primary/5' : 'border-base-300'}"
+			ondrop={handleDrop}
+			ondragover={handleDragOver}
+			ondragleave={() => dragOver = false}
+		>
+			<input
+				bind:this={fileInput}
+				type="file"
+				multiple
+				accept={acceptedTypes}
+				onchange={(e) => handleUpload(e.currentTarget.files)}
+				class="hidden"
+			/>
+			
+			{#if uploading}
+				<div class="flex flex-col items-center gap-2">
+					<svg class="animate-spin h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+					</svg>
+					<span class="text-sm">Uploading...</span>
+				</div>
+			{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+				</svg>
+				<p class="text-sm mb-2">Drag & drop files or click to browse</p>
+				<button class="btn btn-sm btn-primary" onclick={() => fileInput.click()}>
+					Choose Files
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Files List -->
+	{#if files.length > 0}
+		<div class="space-y-2">
+			{#each files as file}
+				<div class="card bg-base-100 border border-base-200">
+					<div class="card-body p-4 flex-row items-center gap-4">
+						<!-- Icon -->
+						<div class="text-3xl">{getFileIcon(file.type)}</div>
+
+						<!-- Info -->
+						<div class="flex-1 min-w-0">
+							<p class="font-medium truncate">{file.name}</p>
+							<p class="text-sm opacity-60">{formatSize(file.size)} • {new Date(file.created_at).toLocaleDateString()}</p>
+						</div>
+
+						<!-- Actions -->
+						<div class="flex gap-2">
+							{#if onDownload}
+								<button
+									class="btn btn-sm btn-ghost btn-square"
+									onclick={() => onDownload?.(file.id)}
+									title="Download"
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+									</svg>
+								</button>
+							{/if}
+							{#if !readOnly}
+								<button
+									class="btn btn-sm btn-ghost btn-square text-error"
+									onclick={() => handleDelete(file.id)}
+									title="Delete"
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+									</svg>
+								</button>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<div class="text-center py-8 text-sm opacity-50">
+			No files uploaded yet
+		</div>
+	{/if}
+</div>

package/attachments/AttachmentManager/component.json

@@ -0,0 +1,21 @@
+{
+  "name": "AttachmentManager",
+  "category": "attachments",
+  "description": "File upload and management with drag & drop",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "files": "FileItem[] - List of uploaded files",
+    "onUpload": "(files: FileList) => Promise<void> - Upload callback",
+    "onDelete": "(fileId: string) => Promise<void> - Delete callback",
+    "onDownload": "((fileId: string) => void) | null - Download callback",
+    "acceptedTypes": "string - MIME types (e.g., 'image/*')",
+    "readOnly": "boolean - Disable uploads/deletes",
+    "maxFiles": "number - Maximum file count"
+  },
+  "types": {
+    "FileItem": "{id: string; name: string; size: number; type: string; url?: string; created_at: string}"
+  }
+}

package/charts/SimpleBarChart/SimpleBarChart.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+let {
+    data = [],
+    xKey = 'name',
+    yKey = 'value'
+}: {
+    data: any[];
+    xKey?: string;
+    yKey?: string;
+} = $props();
+
+const maxValue = $derived(Math.max(...data.map(d => d[yKey])));
+</script>
+
+<div class="space-y-2">
+    {#each data as item}
+        <div class="flex items-center gap-2">
+            <span class="text-sm w-24 truncate">{item[xKey]}</span>
+            <div class="flex-1 bg-base-200 rounded-full h-6 relative">
+                <div 
+                    class="bg-primary h-full rounded-full" 
+                    style="width: {(item[yKey] / maxValue) * 100}%"
+                ></div>
+            </div>
+            <span class="text-sm font-mono">{item[yKey]}</span>
+        </div>
+    {/each}
+</div>

package/charts/SimpleBarChart/component.json

@@ -0,0 +1,14 @@
+{
+  "name": "SimpleBarChart",
+  "category": "charts",
+  "description": "SimpleBarChart - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "data": "Array",
+    "xKey": "string",
+    "yKey": "string"
+  }
+}

package/common/AddressInput/AddressInput.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	/**
+	 * AddressInput - Address field with geocoding
+	 */
+	interface Address {
+		street?: string;
+		city?: string;
+		country?: string;
+		postal_code?: string;
+		lat?: number;
+		lng?: number;
+	}
+
+	let {
+		value = $bindable<Address>({}),
+		onSearch = null,
+		label = 'Address',
+		disabled = false
+	}: {
+		value?: Address;
+		onSearch?: ((query: string) => Promise<Address[]>) | null;
+		label?: string;
+		disabled?: boolean;
+	} = $props();
+
+	let searchResults = $state<Address[]>([]);
+	let searching = $state(false);
+	let showResults = $state(false);
+
+	async function handleSearch(query: string) {
+		if (!onSearch || query.length < 3) return;
+		searching = true;
+		try {
+			searchResults = await onSearch(query);
+			showResults = true;
+		} finally {
+			searching = false;
+		}
+	}
+
+	function selectAddress(addr: Address) {
+		value = addr;
+		showResults = false;
+	}
+</script>
+
+<div class="form-control">
+	<label class="label"><span class="label-text">{label}</span></label>
+	
+	<div class="relative">
+		<input
+			type="text"
+			value={value.street || ''}
+			oninput={(e) => handleSearch(e.currentTarget.value)}
+			placeholder="Start typing address..."
+			{disabled}
+			class="input input-bordered w-full"
+		/>
+		
+		{#if searching}
+			<div class="absolute right-3 top-3">
+				<span class="loading loading-spinner loading-sm"></span>
+			</div>
+		{/if}
+		
+		{#if showResults && searchResults.length > 0}
+			<div class="absolute z-10 w-full mt-1 bg-base-100 border rounded-lg shadow-lg max-h-60 overflow-auto">
+				{#each searchResults as result}
+					<button
+						type="button"
+						class="w-full text-left px-4 py-2 hover:bg-base-200"
+						onclick={() => selectAddress(result)}
+					>
+						<div class="font-medium">{result.street}</div>
+						<div class="text-sm opacity-60">{result.city}, {result.country}</div>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if value.city}
+		<div class="grid grid-cols-2 gap-2 mt-2">
+			<input type="text" bind:value={value.city} placeholder="City" class="input input-sm input-bordered" {disabled} />
+			<input type="text" bind:value={value.postal_code} placeholder="Postal" class="input input-sm input-bordered" {disabled} />
+		</div>
+	{/if}
+</div>

package/common/AddressInput/component.json

@@ -0,0 +1,12 @@
+{
+  "name": "AddressInput",
+  "category": "common",
+  "description": "Address input with geocoding search",
+  "dependencies": {"packages": [], "components": []},
+  "props": {
+    "value": "$bindable<Address>",
+    "onSearch": "(query: string) => Promise<Address[]>",
+    "label": "string",
+    "disabled": "boolean"
+  }
+}

package/common/Alert/Alert.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+let {
+    type = 'info',
+    message = '',
+    dismissible = false,
+    onDismiss = null
+}: {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    message: string;
+    dismissible?: boolean;
+    onDismiss?: (() => void) | null;
+} = $props();
+</script>
+
+<div class="alert alert-{type}">
+    <span>{message}</span>
+    {#if dismissible}
+        <button class="btn btn-sm btn-ghost btn-circle" onclick={onDismiss}>✕</button>
+    {/if}
+</div>

package/common/Alert/component.json

@@ -0,0 +1,15 @@
+{
+  "name": "Alert",
+  "category": "common",
+  "description": "Alert - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "type": "string",
+    "message": "string",
+    "dismissible": "boolean",
+    "onDismiss": "function"
+  }
+}

package/common/Button/Button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+let {
+    children,
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    onclick = null
+}: {
+    children: any;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    onclick?: (() => void) | null;
+} = $props();
+</script>
+
+<button
+    class="btn btn-{variant} btn-{size}"
+    {disabled}
+    {onclick}
+>
+    {#if loading}
+        <span class="loading loading-spinner loading-sm"></span>
+    {/if}
+    {@render children()}
+</button>