@autumnsgrove/groveengine 0.7.0 → 0.8.0

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../utils";
+	import { MapPin, ArrowRight } from "lucide-svelte";
+
+	/**
+	 * RoadmapPreview - A glass card showing current development phase
+	 *
+	 * Displays the current phase of Grove's development with a progress bar
+	 * and links to the full roadmap. Used on landing page and plant signup.
+	 *
+	 * @example Basic usage
+	 * ```svelte
+	 * <RoadmapPreview
+	 *   phase="Thaw"
+	 *   subtitle="The ice begins to crack"
+	 *   description="Grove opens its doors. The first trees take root."
+	 *   progress={33}
+	 *   href="/roadmap"
+	 * />
+	 * ```
+	 */
+
+	interface Props {
+		/** Current phase name */
+		phase?: string;
+		/** Phase subtitle/tagline */
+		subtitle?: string;
+		/** Brief description of what's happening */
+		description?: string;
+		/** Progress percentage (0-100) */
+		progress?: number;
+		/** Link to full roadmap */
+		href?: string;
+		/** Whether to open link in new tab */
+		external?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		phase = "Thaw",
+		subtitle = "The ice begins to crack",
+		description = "Grove opens its doors. The first trees take root.",
+		progress = 33,
+		href = "/roadmap",
+		external = false,
+		class: className
+	}: Props = $props();
+
+	const linkTarget = $derived(external ? "_blank" : undefined);
+	const linkRel = $derived(external ? "noopener noreferrer" : undefined);
+</script>
+
+<a
+	{href}
+	target={linkTarget}
+	rel={linkRel}
+	class={cn(
+		"block rounded-2xl p-6 transition-transform hover:scale-[1.02] group",
+		"bg-white/60 dark:bg-emerald-950/25 backdrop-blur-md",
+		"border border-white/40 dark:border-emerald-800/25",
+		className
+	)}
+>
+	<div class="flex items-start justify-between mb-4">
+		<div>
+			<div class="flex items-center gap-2 mb-1">
+				<MapPin class="w-4 h-4 text-primary" />
+				<span class="text-xs text-foreground-subtle uppercase tracking-wide">Currently</span>
+			</div>
+			<h3 class="text-xl font-serif text-foreground">{phase}</h3>
+			<p class="text-sm text-foreground-muted italic">{subtitle}</p>
+		</div>
+		<ArrowRight class="w-5 h-5 text-foreground-subtle group-hover:text-primary group-hover:translate-x-1 transition-all" />
+	</div>
+
+	<!-- Progress bar -->
+	<div class="mb-3">
+		<div class="h-2 bg-surface rounded-full overflow-hidden">
+			<div
+				class="h-full bg-primary rounded-full transition-all duration-500"
+				style="width: {progress}%"
+			></div>
+		</div>
+	</div>
+
+	<p class="text-sm text-foreground-subtle">
+		{description}
+	</p>
+</a>

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

@@ -0,0 +1,36 @@
+/**
+ * RoadmapPreview - A glass card showing current development phase
+ *
+ * Displays the current phase of Grove's development with a progress bar
+ * and links to the full roadmap. Used on landing page and plant signup.
+ *
+ * @example Basic usage
+ * ```svelte
+ * <RoadmapPreview
+ *   phase="Thaw"
+ *   subtitle="The ice begins to crack"
+ *   description="Grove opens its doors. The first trees take root."
+ *   progress={33}
+ *   href="/roadmap"
+ * />
+ * ```
+ */
+interface Props {
+    /** Current phase name */
+    phase?: string;
+    /** Phase subtitle/tagline */
+    subtitle?: string;
+    /** Brief description of what's happening */
+    description?: string;
+    /** Progress percentage (0-100) */
+    progress?: number;
+    /** Link to full roadmap */
+    href?: string;
+    /** Whether to open link in new tab */
+    external?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const RoadmapPreview: import("svelte").Component<Props, {}, "">;
+type RoadmapPreview = ReturnType<typeof RoadmapPreview>;
+export default RoadmapPreview;

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

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

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

@@ -7,4 +7,5 @@
 export { default as ProductCard } from './ProductCard.svelte';
 export { default as SearchCard } from './SearchCard.svelte';
 export { default as PlanCard } from './PlanCard.svelte';
+export { default as RoadmapPreview } from './RoadmapPreview.svelte';
 export const CONTENT_VERSION = '0.2.0';

package/dist/ui/components/nature/Logo.svelte

@@ -0,0 +1,224 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from './palette';
+	import { autumn, winter, greens, bark, springBlossoms } from './palette';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		trunkColor?: string;
+		season?: Season;
+		animate?: boolean;
+		animateEntrance?: boolean;
+		/** Add breathing animation (subtle pulse for loading states) */
+		breathing?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		trunkColor,
+		season = 'autumn',  // Default to autumn (Grove's signature season)
+		animate = false,
+		animateEntrance = false,
+		breathing = false
+	}: Props = $props();
+
+	// Check if winter for snow accents (Logo keeps foliage, just gets snow-dusted)
+	const isWinter = $derived(season === 'winter');
+
+	// Build animation class - breathing takes precedence over sway
+	const animationClass = $derived(breathing ? 'breathing' : (animate ? 'sway' : ''));
+
+	// Seasonal color mapping for the logo
+	// - Spring: Blossom pink - celebrating cherry blossom season!
+	// - Summer: Grove brand green
+	// - Autumn: Warm orange tones matching the forest palette
+	// - Winter: Frosted muted green (Logo stays green year-round like an evergreen)
+	const defaultColor = $derived(
+		season === 'spring' ? springBlossoms.pink :  // Blossom pink for spring!
+		season === 'autumn' ? autumn.pumpkin :       // Orange matching autumn forest palette
+		season === 'winter' ? winter.winterGreen :
+		greens.grove  // Summer uses Grove brand green
+	);
+	const foliageColor = $derived(color ?? defaultColor);
+	// Trunk should always be brown (like real tree bark), not match the foliage
+	const actualTrunkColor = $derived(trunkColor ?? bark.bark);
+
+	// Animation state for entrance animation
+	let mounted = $state(false);
+
+	onMount(() => {
+		if (animateEntrance) {
+			// Small delay to ensure CSS transition triggers
+			requestAnimationFrame(() => {
+				mounted = true;
+			});
+		}
+	});
+
+	// Calculate if arrows should be in final position
+	const inPosition = $derived(animateEntrance ? mounted : true);
+</script>
+
+{#if animateEntrance}
+	<!-- Animated version with 4 separate arrows -->
+	<svg
+		class="{className} {animationClass}"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 417 512.238"
+	>
+		<defs>
+			<!-- Clip paths to isolate each arrow direction -->
+			<clipPath id="clip-top">
+				<polygon points="0,0 417,0 417,208.5 208.5,208.5 0,208.5" />
+			</clipPath>
+			<clipPath id="clip-right">
+				<polygon points="208.5,0 417,0 417,400 208.5,400 208.5,208.5" />
+			</clipPath>
+			<clipPath id="clip-bottom">
+				<polygon points="0,208.5 208.5,208.5 417,208.5 417,400 0,400" />
+			</clipPath>
+			<clipPath id="clip-left">
+				<polygon points="0,0 208.5,0 208.5,208.5 208.5,400 0,400" />
+			</clipPath>
+		</defs>
+
+		<!-- Trunk (static) -->
+		<path fill={actualTrunkColor} d="M171.274 344.942h74.09v167.296h-74.09V344.942z"/>
+
+		<!-- Top Arrow -->
+		<g
+			class="arrow arrow-top"
+			class:in-position={inPosition}
+			clip-path="url(#clip-top)"
+		>
+			<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+		</g>
+
+		<!-- Right Arrow -->
+		<g
+			class="arrow arrow-right"
+			class:in-position={inPosition}
+			clip-path="url(#clip-right)"
+		>
+			<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+		</g>
+
+		<!-- Bottom Arrow -->
+		<g
+			class="arrow arrow-bottom"
+			class:in-position={inPosition}
+			clip-path="url(#clip-bottom)"
+		>
+			<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+		</g>
+
+		<!-- Left Arrow -->
+		<g
+			class="arrow arrow-left"
+			class:in-position={inPosition}
+			clip-path="url(#clip-left)"
+		>
+			<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+		</g>
+	</svg>
+{:else}
+	<!-- Static version -->
+	<svg
+		class="{className} {animationClass}"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 417 512.238"
+	>
+		<!-- Trunk -->
+		<path fill={actualTrunkColor} d="M171.274 344.942h74.09v167.296h-74.09V344.942z"/>
+		<!-- Foliage -->
+		<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+		<!-- Snow accents in winter -->
+		{#if isWinter}
+			<!-- Top point snow cap -->
+			<ellipse fill={winter.snow} cx="208" cy="8" rx="32" ry="10" opacity="0.85" />
+
+			<!-- Upper diagonal arm tips (the angled parts pointing up-left and up-right) -->
+			<ellipse fill={winter.snow} cx="52" cy="60" rx="18" ry="6" opacity="0.7" transform="rotate(-25 52 60)" />
+			<ellipse fill={winter.snow} cx="365" cy="60" rx="18" ry="6" opacity="0.7" transform="rotate(25 365 60)" />
+
+			<!-- Horizontal arm snow (left and right extending arms) -->
+			<ellipse fill={winter.snow} cx="45" cy="175" rx="28" ry="7" opacity="0.75" />
+			<ellipse fill={winter.snow} cx="372" cy="175" rx="28" ry="7" opacity="0.75" />
+
+			<!-- Center intersection snow pile -->
+			<ellipse fill={winter.snow} cx="208" cy="175" rx="25" ry="8" opacity="0.6" />
+
+			<!-- Lower diagonal arm tips -->
+			<ellipse fill={winter.snow} cx="95" cy="320" rx="16" ry="5" opacity="0.55" transform="rotate(25 95 320)" />
+			<ellipse fill={winter.snow} cx="322" cy="320" rx="16" ry="5" opacity="0.55" transform="rotate(-25 322 320)" />
+		{/if}
+	</svg>
+{/if}
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: rotate(0deg); }
+		50% { transform: rotate(1deg); }
+	}
+
+	@keyframes breathe {
+		0%, 100% {
+			transform: scale(1);
+			opacity: 0.7;
+		}
+		50% {
+			transform: scale(1.05);
+			opacity: 1;
+		}
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 4s ease-in-out infinite;
+	}
+
+	.breathing {
+		transform-origin: center center;
+		animation: breathe 2s ease-in-out infinite;
+	}
+
+	/* Arrow entrance animations */
+	.arrow {
+		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce easing */
+	}
+
+	/* Starting positions (offset by ~20%) */
+	.arrow-top {
+		transform: translateY(-40px);
+	}
+	.arrow-right {
+		transform: translateX(40px);
+	}
+	.arrow-bottom {
+		transform: translateY(40px);
+	}
+	.arrow-left {
+		transform: translateX(-40px);
+	}
+
+	/* Final positions */
+	.arrow-top.in-position {
+		transform: translateY(0);
+	}
+	.arrow-right.in-position {
+		transform: translateX(0);
+	}
+	.arrow-bottom.in-position {
+		transform: translateY(0);
+	}
+	.arrow-left.in-position {
+		transform: translateX(0);
+	}
+</style>

package/dist/ui/components/nature/Logo.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Season } from './palette';
+interface Props {
+    class?: string;
+    color?: string;
+    trunkColor?: string;
+    season?: Season;
+    animate?: boolean;
+    animateEntrance?: boolean;
+    /** Add breathing animation (subtle pulse for loading states) */
+    breathing?: boolean;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/ui/components/nature/botanical/Acorn.svelte

@@ -0,0 +1,48 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark, earth } from '../palette';
+
+	interface Props {
+		class?: string;
+		capColor?: string;
+		nutColor?: string;
+	}
+
+	let {
+		class: className = 'w-4 h-5',
+		capColor,
+		nutColor
+	}: Props = $props();
+
+	const cap = $derived(capColor ?? bark.bark);
+	const nut = $derived(nutColor ?? earth.clay);
+	const capDetail = bark.darkBark;
+</script>
+
+<!-- Acorn -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40">
+	<!-- Stem -->
+	<path fill={capDetail} d="M15 0 Q18 0 18 4 L15 6 L12 4 Q12 0 15 0" />
+
+	<!-- Cap -->
+	<ellipse fill={cap} cx="15" cy="12" rx="13" ry="8" />
+	<!-- Cap texture (crosshatch pattern suggestion) -->
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M5 10 Q15 14 25 10" opacity="0.4" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M4 13 Q15 17 26 13" opacity="0.3" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M8 8 L8 16" opacity="0.2" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M15 6 L15 16" opacity="0.2" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M22 8 L22 16" opacity="0.2" />
+
+	<!-- Nut body -->
+	<ellipse fill={nut} cx="15" cy="26" rx="11" ry="14" />
+
+	<!-- Nut highlight -->
+	<ellipse fill="white" cx="12" cy="22" rx="4" ry="5" opacity="0.15" />
+
+	<!-- Bottom point -->
+	<path fill={nut} d="M10 38 Q15 42 20 38 L15 40 Z" />
+</svg>

package/dist/ui/components/nature/botanical/Acorn.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    class?: string;
+    capColor?: string;
+    nutColor?: string;
+}
+declare const Acorn: import("svelte").Component<Props, {}, "">;
+type Acorn = ReturnType<typeof Acorn>;
+export default Acorn;

package/dist/ui/components/nature/botanical/Berry.svelte

@@ -0,0 +1,67 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents, greens } from '../palette';
+
+	interface Props {
+		class?: string;
+		berryColor?: string;
+		variant?: 'cluster' | 'single' | 'branch';
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		berryColor,
+		variant = 'cluster'
+	}: Props = $props();
+
+	const berry = $derived(berryColor ?? accents.berry.ripe);
+	const stem = greens.deepGreen;
+	const highlight = 'white';
+</script>
+
+<!-- Berries -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+	{#if variant === 'single'}
+		<!-- Single berry -->
+		<circle fill={berry} cx="25" cy="28" r="15" />
+		<circle fill={highlight} cx="20" cy="23" r="4" opacity="0.3" />
+		<path fill="none" stroke={stem} stroke-width="2" d="M25 13 Q25 5 20 2" />
+		<!-- Calyx -->
+		<path fill={stem} d="M20 14 L25 18 L30 14 L28 16 L25 14 L22 16 Z" />
+	{:else if variant === 'cluster'}
+		<!-- Berry cluster -->
+		<path fill="none" stroke={stem} stroke-width="1.5" d="M25 5 L25 15 M25 15 L18 22 M25 15 L32 22 M25 15 L25 25" />
+
+		<circle fill={berry} cx="18" cy="28" r="10" />
+		<circle fill={highlight} cx="14" cy="24" r="2.5" opacity="0.3" />
+
+		<circle fill={berry} cx="32" cy="28" r="10" />
+		<circle fill={highlight} cx="28" cy="24" r="2.5" opacity="0.3" />
+
+		<circle fill={berry} cx="25" cy="38" r="10" />
+		<circle fill={highlight} cx="21" cy="34" r="2.5" opacity="0.3" />
+	{:else}
+		<!-- Berry branch -->
+		<path fill="none" stroke={stem} stroke-width="2" d="M5 25 Q15 20 25 22 Q35 24 45 20" />
+		<!-- Leaves -->
+		<ellipse fill={stem} cx="12" cy="22" rx="5" ry="3" transform="rotate(-20 12 22)" />
+		<ellipse fill={stem} cx="38" cy="20" rx="5" ry="3" transform="rotate(15 38 20)" />
+
+		<!-- Berries along branch -->
+		<circle fill={berry} cx="18" cy="28" r="6" />
+		<circle fill={highlight} cx="16" cy="26" r="1.5" opacity="0.3" />
+
+		<circle fill={berry} cx="28" cy="30" r="6" />
+		<circle fill={highlight} cx="26" cy="28" r="1.5" opacity="0.3" />
+
+		<circle fill={berry} cx="22" cy="36" r="5" />
+		<circle fill={highlight} cx="20" cy="34" r="1.2" opacity="0.3" />
+
+		<circle fill={berry} cx="32" cy="38" r="5" />
+		<circle fill={highlight} cx="30" cy="36" r="1.2" opacity="0.3" />
+	{/if}
+</svg>

package/dist/ui/components/nature/botanical/Berry.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    class?: string;
+    berryColor?: string;
+    variant?: 'cluster' | 'single' | 'branch';
+}
+declare const Berry: import("svelte").Component<Props, {}, "">;
+type Berry = ReturnType<typeof Berry>;
+export default Berry;

package/dist/ui/components/nature/botanical/DandelionPuff.svelte

@@ -0,0 +1,98 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { greens, natural } from '../palette';
+
+	interface Props {
+		class?: string;
+		seedColor?: string;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-8 h-10',
+		seedColor,
+		animate = true
+	}: Props = $props();
+
+	const seed = $derived(seedColor ?? natural.cream);
+	const stem = $derived(greens.deepGreen);
+</script>
+
+<!-- Dandelion seed head (puff) -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 80">
+	<!-- Stem -->
+	<path fill="none" stroke={stem} stroke-width="2" d="M30 80 Q28 60 30 45" />
+
+	<!-- Central seed head -->
+	<circle fill={seed} cx="30" cy="30" r="8" opacity="0.5" />
+
+	<!-- Seeds with parachutes radiating outward -->
+	<!-- Top seeds -->
+	<g class={animate ? 'drift drift-1' : ''}>
+		<path fill={seed} d="M30 5 L28 12 L30 10 L32 12 Z" opacity="0.7" />
+		<line x1="30" y1="10" x2="30" y2="22" stroke={seed} stroke-width="0.5" opacity="0.5" />
+	</g>
+
+	<g class={animate ? 'drift drift-2' : ''}>
+		<path fill={seed} d="M45 10 L40 15 L42 14 L42 17 Z" opacity="0.7" transform="rotate(30 45 10)" />
+		<line x1="42" y1="14" x2="35" y2="24" stroke={seed} stroke-width="0.5" opacity="0.5" />
+	</g>
+
+	<g class={animate ? 'drift drift-3' : ''}>
+		<path fill={seed} d="M15 10 L20 15 L18 14 L18 17 Z" opacity="0.7" transform="rotate(-30 15 10)" />
+		<line x1="18" y1="14" x2="25" y2="24" stroke={seed} stroke-width="0.5" opacity="0.5" />
+	</g>
+
+	<!-- Side seeds -->
+	<g class={animate ? 'drift drift-4' : ''}>
+		<path fill={seed} d="M55 25 L48 28 L50 27 L49 30 Z" opacity="0.6" />
+		<line x1="49" y1="28" x2="38" y2="28" stroke={seed} stroke-width="0.5" opacity="0.5" />
+	</g>
+
+	<g class={animate ? 'drift drift-5' : ''}>
+		<path fill={seed} d="M5 25 L12 28 L10 27 L11 30 Z" opacity="0.6" />
+		<line x1="11" y1="28" x2="22" y2="28" stroke={seed} stroke-width="0.5" opacity="0.5" />
+	</g>
+
+	<!-- Lower seeds -->
+	<g class={animate ? 'drift drift-6' : ''}>
+		<path fill={seed} d="M50 40 L44 40 L46 38 L45 42 Z" opacity="0.6" />
+		<line x1="45" y1="40" x2="38" y2="35" stroke={seed} stroke-width="0.5" opacity="0.5" />
+	</g>
+
+	<g class={animate ? 'drift drift-7' : ''}>
+		<path fill={seed} d="M10 40 L16 40 L14 38 L15 42 Z" opacity="0.6" />
+		<line x1="15" y1="40" x2="22" y2="35" stroke={seed} stroke-width="0.5" opacity="0.5" />
+	</g>
+
+	<!-- Central dense seeds -->
+	<circle fill={seed} cx="30" cy="22" r="2" opacity="0.8" />
+	<circle fill={seed} cx="25" cy="26" r="2" opacity="0.7" />
+	<circle fill={seed} cx="35" cy="26" r="2" opacity="0.7" />
+	<circle fill={seed} cx="30" cy="32" r="2" opacity="0.6" />
+	<circle fill={seed} cx="24" cy="34" r="1.5" opacity="0.5" />
+	<circle fill={seed} cx="36" cy="34" r="1.5" opacity="0.5" />
+</svg>
+
+<style>
+	@keyframes drift {
+		0%, 100% { transform: translate(0, 0); }
+		50% { transform: translate(var(--drift-x, 2px), var(--drift-y, -2px)); }
+	}
+
+	.drift {
+		animation: drift 3s ease-in-out infinite;
+	}
+
+	.drift-1 { --drift-x: 0px; --drift-y: -3px; animation-delay: 0s; }
+	.drift-2 { --drift-x: 3px; --drift-y: -2px; animation-delay: 0.3s; }
+	.drift-3 { --drift-x: -3px; --drift-y: -2px; animation-delay: 0.6s; }
+	.drift-4 { --drift-x: 4px; --drift-y: 0px; animation-delay: 0.2s; }
+	.drift-5 { --drift-x: -4px; --drift-y: 0px; animation-delay: 0.5s; }
+	.drift-6 { --drift-x: 3px; --drift-y: 2px; animation-delay: 0.4s; }
+	.drift-7 { --drift-x: -3px; --drift-y: 2px; animation-delay: 0.7s; }
+</style>

package/dist/ui/components/nature/botanical/DandelionPuff.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    class?: string;
+    seedColor?: string;
+    animate?: boolean;
+}
+declare const DandelionPuff: import("svelte").Component<Props, {}, "">;
+type DandelionPuff = ReturnType<typeof DandelionPuff>;
+export default DandelionPuff;