@autumnsgrove/groveengine 0.3.2 → 0.4.0

package/dist/ui/components/content/ProductCard.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    name: string;
+    price: number;
+    originalPrice?: number;
+    retailer: string;
+    url: string;
+    imageUrl?: string;
+    matchScore?: number;
+    matchReason?: string;
+    index?: number;
+}
+declare const ProductCard: import("svelte").Component<Props, {}, "">;
+type ProductCard = ReturnType<typeof ProductCard>;
+export default ProductCard;

package/dist/ui/components/content/SearchCard.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import Icons from '../icons/Icons.svelte';
+	import StatusBadge from '../indicators/StatusBadge.svelte';
+
+	interface Props {
+		id: string;
+		query: string;
+		status: 'pending' | 'running' | 'completed' | 'failed' | 'needs_confirmation';
+		createdAt: string;
+		resultCount?: number;
+	}
+
+	let { id, query, status, createdAt, resultCount = 0 }: Props = $props();
+
+	const formattedDate = $derived(
+		new Date(createdAt).toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit'
+		})
+	);
+
+	const truncatedQuery = $derived(
+		query.length > 80 ? query.slice(0, 80) + '...' : query
+	);
+</script>
+
+<a
+	href="/search/{id}"
+	class="scout-card block p-4 hover:shadow-grove-md transition-all duration-grove group"
+>
+	<div class="flex items-start justify-between gap-4">
+		<div class="flex-1 min-w-0">
+			<p class="font-medium text-bark dark:text-cream mb-1 group-hover:text-grove-600 dark:group-hover:text-grove-400 transition-colors">
+				{truncatedQuery}
+			</p>
+			<div class="flex items-center gap-3 text-sm text-bark-400 dark:text-cream-500">
+				<span class="flex items-center gap-1">
+					<Icons name="clock" size="sm" />
+					{formattedDate}
+				</span>
+				{#if status === 'completed' && resultCount > 0}
+					<span class="flex items-center gap-1">
+						<Icons name="shopping-bag" size="sm" />
+						{resultCount} results
+					</span>
+				{/if}
+			</div>
+		</div>
+		<StatusBadge {status} size="sm" />
+	</div>
+
+	{#if status === 'completed'}
+		<div class="mt-3 pt-3 border-t border-cream-300 dark:border-bark-600 flex items-center justify-between">
+			<span class="text-sm text-bark-500 dark:text-cream-500">View results</span>
+			<Icons name="arrow-right" size="sm" class="text-grove-500 group-hover:translate-x-1 transition-transform" />
+		</div>
+	{/if}
+</a>

package/dist/ui/components/content/SearchCard.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    id: string;
+    query: string;
+    status: 'pending' | 'running' | 'completed' | 'failed' | 'needs_confirmation';
+    createdAt: string;
+    resultCount?: number;
+}
+declare const SearchCard: import("svelte").Component<Props, {}, "">;
+type SearchCard = ReturnType<typeof SearchCard>;
+export default SearchCard;

package/dist/ui/components/content/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ProductCard } from './ProductCard.svelte';
+export { default as SearchCard } from './SearchCard.svelte';
+export { default as PlanCard } from './PlanCard.svelte';
+export declare const CONTENT_VERSION = "0.2.0";

package/dist/ui/components/content/index.js

@@ -0,0 +1,10 @@
+// GroveUI - Content Card Components
+//
+// This module exports content display cards (products, plans, search results)
+//
+// Usage:
+//   import { ProductCard, SearchCard, PlanCard } from '@groveengine/ui/content';
+export { default as ProductCard } from './ProductCard.svelte';
+export { default as SearchCard } from './SearchCard.svelte';
+export { default as PlanCard } from './PlanCard.svelte';
+export const CONTENT_VERSION = '0.2.0';

package/dist/ui/components/forms/SearchInput.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Icons from '../icons/Icons.svelte';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		loading?: boolean;
+		autofocus?: boolean;
+		onsubmit?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Describe what you\'re looking for...',
+		disabled = false,
+		loading = false,
+		autofocus = false,
+		onsubmit
+	}: Props = $props();
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (value.trim() && onsubmit) {
+			onsubmit(value.trim());
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			handleSubmit(e);
+		}
+	}
+
+	const examples = [
+		'Cozy sweater, earth tones, under $60',
+		'Wireless earbuds for running, waterproof',
+		'Birthday gift for a coffee lover, $30-50',
+		'Ergonomic office chair, good lumbar support'
+	];
+
+	let showExamples = $state(false);
+</script>
+
+<form onsubmit={handleSubmit} class="w-full">
+	<div class="scout-search">
+		<Icons name="search" class="scout-search-icon" />
+		<textarea
+			bind:value
+			{placeholder}
+			disabled={disabled || loading}
+			rows="1"
+			{autofocus}
+			onkeydown={handleKeydown}
+			onfocus={() => showExamples = true}
+			onblur={() => setTimeout(() => showExamples = false, 200)}
+			class="scout-search-input resize-none min-h-[60px] max-h-[200px]"
+		></textarea>
+		<button
+			type="submit"
+			disabled={disabled || loading || !value.trim()}
+			class="absolute right-3 top-1/2 -translate-y-1/2 scout-btn-primary px-4 py-2"
+		>
+			{#if loading}
+				<Icons name="loader" size="sm" class="animate-spin" />
+				Searching...
+			{:else}
+				<Icons name="sparkles" size="sm" />
+				Search
+			{/if}
+		</button>
+	</div>
+
+	<!-- Example queries -->
+	{#if showExamples && !value}
+		<div class="mt-3 flex flex-wrap gap-2">
+			<span class="text-sm text-bark-400 dark:text-cream-500">Try:</span>
+			{#each examples as example}
+				<button
+					type="button"
+					onclick={() => value = example}
+					class="text-sm text-grove-600 dark:text-grove-400 hover:underline cursor-pointer"
+				>
+					"{example.slice(0, 30)}..."
+				</button>
+			{/each}
+		</div>
+	{/if}
+</form>

package/dist/ui/components/forms/SearchInput.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    autofocus?: boolean;
+    onsubmit?: (value: string) => void;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/ui/components/forms/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SearchInput } from './SearchInput.svelte';
+export declare const FORMS_VERSION = "0.2.0";

package/dist/ui/components/forms/index.js

@@ -0,0 +1,8 @@
+// GroveUI - Form Components
+//
+// This module exports specialized form input components
+//
+// Usage:
+//   import { SearchInput } from '@groveengine/ui/forms';
+export { default as SearchInput } from './SearchInput.svelte';
+export const FORMS_VERSION = '0.2.0';

package/dist/ui/components/gallery/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ImageGallery } from './ImageGallery.svelte';
+export { default as Lightbox } from './Lightbox.svelte';
+export { default as LightboxCaption } from './LightboxCaption.svelte';
+export { default as ZoomableImage } from './ZoomableImage.svelte';
+export declare const GALLERY_VERSION = "0.2.0";

package/dist/ui/components/gallery/index.js

@@ -0,0 +1,13 @@
+// GroveUI - Gallery Components
+//
+// This module exports gallery and media display components:
+// ImageGallery, Lightbox, LightboxCaption, ZoomableImage
+//
+// Usage:
+//   import { ImageGallery, Lightbox } from '@groveengine/ui/gallery';
+// Gallery components
+export { default as ImageGallery } from './ImageGallery.svelte';
+export { default as Lightbox } from './Lightbox.svelte';
+export { default as LightboxCaption } from './LightboxCaption.svelte';
+export { default as ZoomableImage } from './ZoomableImage.svelte';
+export const GALLERY_VERSION = '0.2.0';

package/dist/ui/components/icons/IconLegend.svelte

@@ -0,0 +1,83 @@
+<script>
+	import CollapsibleSection from '../../../components/custom/CollapsibleSection.svelte';
+
+	let { iconsUsed = [] } = $props();
+
+	// Map icon keys to their semantic meanings and display names
+	const iconMeanings = {
+		stovetop: { name: 'Stovetop', meaning: 'Cook on stove/pan' },
+		mix: { name: 'Mix', meaning: 'Mix/stir in bowl' },
+		spicy: { name: 'Spicy', meaning: 'Spicy/hot indicator' },
+		chop: { name: 'Chop', meaning: 'Chop/prep ingredients' },
+		simmer: { name: 'Simmer', meaning: 'Simmer/wait' },
+		chill: { name: 'Chill', meaning: 'Refrigerate/chill' },
+		serve: { name: 'Serve', meaning: 'Plate/serve' },
+		boil: { name: 'Boil', meaning: 'Boil in pot' },
+		bake: { name: 'Bake', meaning: 'Oven/bake' },
+		marinate: { name: 'Marinate', meaning: 'Marinate/rest' },
+		blend: { name: 'Blend', meaning: 'Blend/puree' },
+		season: { name: 'Season', meaning: 'Season/salt' },
+		grill: { name: 'Grill', meaning: 'Grill/BBQ' },
+		steam: { name: 'Steam', meaning: 'Steam' },
+		knead: { name: 'Knead', meaning: 'Knead dough' }
+	};
+</script>
+
+{#if iconsUsed && iconsUsed.length > 0}
+	<CollapsibleSection title="Icon Legend">
+		<div class="legend-content">
+			{#each iconsUsed as iconKey (iconKey)}
+				{#if iconMeanings[iconKey]}
+					<div class="legend-item">
+						<img
+							src="/icons/instruction/{iconKey}.webp"
+							alt={iconMeanings[iconKey].name}
+							class="legend-icon"
+						/>
+						<div class="legend-text">
+							<span class="icon-name">{iconMeanings[iconKey].name}</span>
+							<span class="icon-meaning">{iconMeanings[iconKey].meaning}</span>
+						</div>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</CollapsibleSection>
+{/if}
+
+<style>
+	.legend-content {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+		gap: 0.75rem;
+	}
+	.legend-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.legend-icon {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+	}
+	.legend-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+	}
+	.icon-name {
+		font-weight: 500;
+		font-size: 0.85rem;
+		color: #333;
+	}
+	.icon-meaning {
+		font-size: 0.75rem;
+		color: #666;
+	}
+	@media (max-width: 640px) {
+		.legend-content {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/dist/ui/components/icons/IconLegend.svelte.d.ts

@@ -0,0 +1,11 @@
+export default IconLegend;
+type IconLegend = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const IconLegend: import("svelte").Component<{
+    iconsUsed?: any[];
+}, {}, "">;
+type $$ComponentProps = {
+    iconsUsed?: any[];
+};

package/dist/ui/components/icons/Icons.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		name: 'search' | 'credits' | 'arrow-right' | 'check' | 'x' | 'star' | 'external' | 'clock' | 'sparkles' | 'shopping-bag' | 'user' | 'settings' | 'logout' | 'menu' | 'close' | 'sun' | 'moon' | 'chevron-down' | 'loader' | 'zap' | 'heart' | 'share' | 'copy' | 'refresh';
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		class?: string;
+	}
+
+	let { name, size = 'md', class: className = '' }: Props = $props();
+
+	const sizes = {
+		sm: 'w-4 h-4',
+		md: 'w-5 h-5',
+		lg: 'w-6 h-6',
+		xl: 'w-8 h-8'
+	};
+</script>
+
+<svg
+	class="{sizes[size]} {className}"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	{#if name === 'search'}
+		<circle cx="11" cy="11" r="8" />
+		<path d="m21 21-4.3-4.3" />
+	{:else if name === 'credits'}
+		<circle cx="12" cy="12" r="10" />
+		<path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" />
+		<path d="M12 18V6" />
+	{:else if name === 'arrow-right'}
+		<path d="M5 12h14" />
+		<path d="m12 5 7 7-7 7" />
+	{:else if name === 'check'}
+		<path d="M20 6 9 17l-5-5" />
+	{:else if name === 'x'}
+		<path d="M18 6 6 18" />
+		<path d="m6 6 12 12" />
+	{:else if name === 'star'}
+		<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+	{:else if name === 'external'}
+		<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+		<polyline points="15 3 21 3 21 9" />
+		<line x1="10" x2="21" y1="14" y2="3" />
+	{:else if name === 'clock'}
+		<circle cx="12" cy="12" r="10" />
+		<polyline points="12 6 12 12 16 14" />
+	{:else if name === 'sparkles'}
+		<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+		<path d="M5 3v4" />
+		<path d="M19 17v4" />
+		<path d="M3 5h4" />
+		<path d="M17 19h4" />
+	{:else if name === 'shopping-bag'}
+		<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
+		<path d="M3 6h18" />
+		<path d="M16 10a4 4 0 0 1-8 0" />
+	{:else if name === 'user'}
+		<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+		<circle cx="12" cy="7" r="4" />
+	{:else if name === 'settings'}
+		<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+		<circle cx="12" cy="12" r="3" />
+	{:else if name === 'logout'}
+		<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+		<polyline points="16 17 21 12 16 7" />
+		<line x1="21" x2="9" y1="12" y2="12" />
+	{:else if name === 'menu'}
+		<line x1="4" x2="20" y1="12" y2="12" />
+		<line x1="4" x2="20" y1="6" y2="6" />
+		<line x1="4" x2="20" y1="18" y2="18" />
+	{:else if name === 'close'}
+		<path d="M18 6 6 18" />
+		<path d="m6 6 12 12" />
+	{:else if name === 'sun'}
+		<circle cx="12" cy="12" r="4" />
+		<path d="M12 2v2" />
+		<path d="M12 20v2" />
+		<path d="m4.93 4.93 1.41 1.41" />
+		<path d="m17.66 17.66 1.41 1.41" />
+		<path d="M2 12h2" />
+		<path d="M20 12h2" />
+		<path d="m6.34 17.66-1.41 1.41" />
+		<path d="m19.07 4.93-1.41 1.41" />
+	{:else if name === 'moon'}
+		<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+	{:else if name === 'chevron-down'}
+		<path d="m6 9 6 6 6-6" />
+	{:else if name === 'loader'}
+		<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+	{:else if name === 'zap'}
+		<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+	{:else if name === 'heart'}
+		<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+	{:else if name === 'share'}
+		<circle cx="18" cy="5" r="3" />
+		<circle cx="6" cy="12" r="3" />
+		<circle cx="18" cy="19" r="3" />
+		<line x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
+		<line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
+	{:else if name === 'copy'}
+		<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+		<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+	{:else if name === 'refresh'}
+		<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+		<path d="M21 3v5h-5" />
+		<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+		<path d="M3 21v-5h5" />
+	{/if}
+</svg>

package/dist/ui/components/icons/Icons.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    name: 'search' | 'credits' | 'arrow-right' | 'check' | 'x' | 'star' | 'external' | 'clock' | 'sparkles' | 'shopping-bag' | 'user' | 'settings' | 'logout' | 'menu' | 'close' | 'sun' | 'moon' | 'chevron-down' | 'loader' | 'zap' | 'heart' | 'share' | 'copy' | 'refresh';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    class?: string;
+}
+declare const Icons: import("svelte").Component<Props, {}, "">;
+type Icons = ReturnType<typeof Icons>;
+export default Icons;

package/dist/ui/components/icons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Icons } from './Icons.svelte';
+export { default as IconLegend } from './IconLegend.svelte';
+export declare const ICONS_VERSION = "0.2.0";

package/dist/ui/components/icons/index.js

@@ -0,0 +1,9 @@
+// GroveUI - Icon Components
+//
+// This module exports SVG icon components used across the Grove platform
+//
+// Usage:
+//   import { Icons, IconLegend } from '@groveengine/ui/icons';
+export { default as Icons } from './Icons.svelte';
+export { default as IconLegend } from './IconLegend.svelte';
+export const ICONS_VERSION = '0.2.0';

package/dist/ui/components/indicators/CreditBalance.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import Icons from '../icons/Icons.svelte';
+
+	interface Props {
+		credits: number;
+		showIcon?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'compact' | 'card';
+	}
+
+	let { credits, showIcon = true, size = 'md', variant = 'default' }: Props = $props();
+
+	const isLow = $derived(credits <= 5);
+	const isEmpty = $derived(credits <= 0);
+
+	const sizeClasses = {
+		sm: 'text-sm px-2.5 py-1',
+		md: 'text-base px-3 py-1.5',
+		lg: 'text-lg px-4 py-2'
+	};
+</script>
+
+{#if variant === 'card'}
+	<div class="scout-card p-4 {isEmpty ? 'border-red-200 dark:border-red-800' : isLow ? 'border-amber-200 dark:border-amber-800' : ''}">
+		<div class="flex items-center justify-between mb-2">
+			<span class="text-sm text-bark-500 dark:text-cream-500">Available Credits</span>
+			{#if isLow && !isEmpty}
+				<span class="text-xs text-amber-600 dark:text-amber-400 font-medium">Low balance</span>
+			{:else if isEmpty}
+				<span class="text-xs text-red-600 dark:text-red-400 font-medium">No credits</span>
+			{/if}
+		</div>
+		<div class="flex items-baseline gap-1">
+			<span class="text-3xl font-bold text-bark dark:text-cream">{credits}</span>
+			<span class="text-bark-400 dark:text-cream-500">searches</span>
+		</div>
+		{#if isLow}
+			<a href="/pricing" class="mt-3 inline-flex items-center gap-1 text-sm text-grove-600 dark:text-grove-400 hover:underline">
+				Add more credits
+				<Icons name="arrow-right" size="sm" />
+			</a>
+		{/if}
+	</div>
+{:else if variant === 'compact'}
+	<span class="scout-credits {sizeClasses[size]} {isEmpty ? 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300' : isLow ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300' : ''}">
+		{#if showIcon}
+			<Icons name="credits" size="sm" />
+		{/if}
+		<span class="font-semibold">{credits}</span>
+	</span>
+{:else}
+	<div class="flex items-center gap-2 {sizeClasses[size]}">
+		{#if showIcon}
+			<div class="p-2 rounded-full bg-grove-100 dark:bg-grove-900/30 text-grove-600 dark:text-grove-400">
+				<Icons name="credits" size={size === 'lg' ? 'lg' : 'md'} />
+			</div>
+		{/if}
+		<div>
+			<div class="font-bold text-bark dark:text-cream">{credits} credits</div>
+			{#if isLow && !isEmpty}
+				<div class="text-xs text-amber-600 dark:text-amber-400">Running low</div>
+			{:else if isEmpty}
+				<div class="text-xs text-red-600 dark:text-red-400">No credits left</div>
+			{/if}
+		</div>
+	</div>
+{/if}

package/dist/ui/components/indicators/CreditBalance.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    credits: number;
+    showIcon?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'compact' | 'card';
+}
+declare const CreditBalance: import("svelte").Component<Props, {}, "">;
+type CreditBalance = ReturnType<typeof CreditBalance>;
+export default CreditBalance;

package/dist/ui/components/indicators/ScoreBar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	interface Props {
+		score: number;
+		showLabel?: boolean;
+		size?: 'sm' | 'md';
+		animated?: boolean;
+	}
+
+	let { score, showLabel = true, size = 'md', animated = true }: Props = $props();
+
+	// Clamp score between 0-100
+	const clampedScore = $derived(Math.max(0, Math.min(100, score)));
+
+	// Determine color based on score
+	const getScoreColor = (s: number) => {
+		if (s >= 90) return 'from-grove-500 to-grove-400';
+		if (s >= 75) return 'from-grove-500 to-scout-500';
+		if (s >= 60) return 'from-scout-500 to-scout-400';
+		if (s >= 40) return 'from-amber-500 to-amber-400';
+		return 'from-red-500 to-red-400';
+	};
+
+	const getScoreLabel = (s: number) => {
+		if (s >= 90) return 'Excellent match';
+		if (s >= 75) return 'Great match';
+		if (s >= 60) return 'Good match';
+		if (s >= 40) return 'Fair match';
+		return 'Partial match';
+	};
+
+	const heightClass = $derived(size === 'sm' ? 'h-1.5' : 'h-2');
+</script>
+
+<div class="w-full">
+	{#if showLabel}
+		<div class="flex items-center justify-between mb-1.5">
+			<span class="text-xs text-bark-500 dark:text-cream-500">{getScoreLabel(clampedScore)}</span>
+			<span class="text-xs font-semibold text-bark dark:text-cream">{clampedScore}%</span>
+		</div>
+	{/if}
+	<div class="scout-match-score {heightClass}">
+		<div
+			class="scout-match-score-fill bg-gradient-to-r {getScoreColor(clampedScore)}"
+			style="width: {clampedScore}%; {animated ? '--score-width: ' + clampedScore + '%' : ''}"
+			class:animate-score-fill={animated}
+		></div>
+	</div>
+</div>
+
+<style>
+	.animate-score-fill {
+		animation: score-fill 0.8s ease-out forwards;
+	}
+
+	@keyframes score-fill {
+		from {
+			width: 0%;
+		}
+		to {
+			width: var(--score-width);
+		}
+	}
+</style>

package/dist/ui/components/indicators/ScoreBar.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    score: number;
+    showLabel?: boolean;
+    size?: 'sm' | 'md';
+    animated?: boolean;
+}
+declare const ScoreBar: import("svelte").Component<Props, {}, "">;
+type ScoreBar = ReturnType<typeof ScoreBar>;
+export default ScoreBar;