@autumnsgrove/groveengine 0.6.5 → 0.8.0

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

@@ -0,0 +1,186 @@
+<!--
+  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, greens, pinks, autumnReds } from '../palette';
+
+	type LeafVariant = 'simple' | 'maple' | 'cherry' | 'aspen' | 'pine';
+
+	// Animation constants
+	// Starting offset ensures leaves begin above viewport for natural entrance
+	const SPAWN_OFFSET_PX = 50;
+
+	interface Props {
+		class?: string;
+		color?: string;
+		season?: Season;
+		animate?: boolean;
+		variant?: LeafVariant;
+		/** Animation duration in seconds */
+		duration?: number;
+		/** Animation delay in seconds */
+		delay?: number;
+		/** Horizontal drift amount (positive = right, negative = left) */
+		drift?: number;
+		/** Fall distance in vh units (how far the leaf travels) */
+		fallDistance?: number;
+		/** Seed for deterministic color selection */
+		seed?: number;
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color,
+		season = 'autumn',
+		animate = true,
+		variant = 'simple',
+		duration = 5,
+		delay = 0,
+		drift = 30,
+		fallDistance = 40,
+		seed = 0
+	}: Props = $props();
+
+	// Color palettes for different leaf types
+	const autumnColors = [autumn.rust, autumn.amber, autumn.gold, autumn.pumpkin, autumn.ember];
+	const summerColors = [greens.grove, greens.meadow, greens.spring, greens.deepGreen];
+	const cherryAutumnColors = [autumnReds.crimson, autumnReds.scarlet, autumnReds.rose];
+	const cherrySpringColors = [pinks.pink, pinks.rose, pinks.blush, pinks.palePink];
+	const aspenAutumnColors = [autumn.gold, autumn.honey, autumn.straw, autumn.amber];
+
+	// Deterministic color selection using pseudo-random distribution
+	// Uses sine-based hash to avoid visible patterns from sequential IDs
+	function pickFromArray<T>(arr: T[]): T {
+		const hash = Math.abs(Math.sin(seed * 12.9898) * 43758.5453);
+		return arr[Math.floor(hash) % arr.length];
+	}
+
+	// Get default color based on variant and season (deterministic)
+	function getDefaultColor(): string {
+		if (variant === 'cherry') {
+			// Cherry trees: pink blossoms in spring, green in summer, red/orange in autumn
+			if (season === 'spring') {
+				return pickFromArray(cherrySpringColors);
+			} else if (season === 'autumn') {
+				return pickFromArray(cherryAutumnColors);
+			} else {
+				// Summer - cherry trees have regular green leaves
+				return pickFromArray(summerColors);
+			}
+		}
+		if (variant === 'aspen') {
+			const colors = season === 'autumn' ? aspenAutumnColors : summerColors;
+			return pickFromArray(colors);
+		}
+		if (variant === 'pine') {
+			// Pine stays green year-round (evergreen)
+			return pickFromArray(summerColors);
+		}
+		// Default (simple, maple)
+		const colors = season === 'autumn' ? autumnColors : summerColors;
+		return pickFromArray(colors);
+	}
+
+	const leafColor = $derived(color ?? getDefaultColor());
+</script>
+
+<!-- Falling leaf with spin/flutter animation -->
+<svg
+	class="{className} {animate ? 'fall' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 30 35"
+	style="--fall-duration: {duration}s; --fall-delay: {delay}s; --fall-drift: {drift}px; --fall-distance: {fallDistance}vh; --spawn-offset: {SPAWN_OFFSET_PX}px;"
+>
+	<g class={animate ? 'spin' : ''}>
+		{#if variant === 'simple'}
+			<!-- Simple oval leaf -->
+			<ellipse fill={leafColor} cx="15" cy="15" rx="12" ry="14" />
+			<path fill="none" stroke="rgba(0,0,0,0.2)" stroke-width="0.8" d="M15 3 L15 29" />
+		{:else if variant === 'maple'}
+			<!-- Maple shape -->
+			<path
+				fill={leafColor}
+				d="M15 2
+				   L16 7 L22 4 L19 10 L28 9 L21 15 L28 18 L19 19 L24 28 L15 22 L6 28 L11 19 L2 18 L9 15 L2 9 L11 10 L8 4 L14 7 Z"
+			/>
+		{:else if variant === 'cherry'}
+			<!-- Cherry blossom petal - soft rounded oval -->
+			<ellipse fill={leafColor} cx="15" cy="13" rx="10" ry="12" />
+			<!-- Subtle petal notch at tip -->
+			<path fill={leafColor} d="M15 2 Q12 6 15 8 Q18 6 15 2" />
+		{:else if variant === 'aspen'}
+			<!-- Aspen/Birch - rounded heart shape -->
+			<path
+				fill={leafColor}
+				d="M15 4 Q8 4 6 12 Q4 20 15 28 Q26 20 24 12 Q22 4 15 4"
+			/>
+			<path fill="none" stroke="rgba(0,0,0,0.15)" stroke-width="0.6" d="M15 6 L15 26" />
+		{:else if variant === 'pine'}
+			<!-- Pine needle cluster - thin elongated shapes -->
+			<path fill={leafColor} d="M15 2 L16 28 L14 28 Z" />
+			<path fill={leafColor} d="M10 4 L16 26 L14 27 Z" opacity="0.8" />
+			<path fill={leafColor} d="M20 4 L14 26 L16 27 Z" opacity="0.8" />
+		{/if}
+
+		<!-- Stem (not for pine needles) -->
+		{#if variant !== 'pine'}
+			<path fill="none" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" d="M15 28 L15 35" />
+		{/if}
+	</g>
+</svg>
+
+<style>
+	@keyframes fall {
+		0% {
+			/* Start transparent to avoid "stuck in place" look for leaves with no delay */
+			transform: translateY(0) translateX(0);
+			opacity: 0;
+		}
+		5% {
+			/* Fade in quickly as falling begins */
+			opacity: 0.5;
+		}
+		10% {
+			opacity: 0.85;
+		}
+		70% {
+			opacity: 0.7;
+		}
+		90% {
+			opacity: 0.3;
+		}
+		100% {
+			transform: translateY(var(--fall-distance, 40vh)) translateX(var(--fall-drift, 30px));
+			opacity: 0;
+		}
+	}
+
+	@keyframes spin {
+		0% { transform: rotate(0deg) rotateY(0deg); }
+		25% { transform: rotate(20deg) rotateY(90deg); }
+		50% { transform: rotate(-15deg) rotateY(180deg); }
+		75% { transform: rotate(25deg) rotateY(270deg); }
+		100% { transform: rotate(0deg) rotateY(360deg); }
+	}
+
+	.fall {
+		animation: fall var(--fall-duration, 5s) ease-in-out infinite;
+		animation-delay: var(--fall-delay, 0s);
+	}
+
+	.spin {
+		transform-origin: center center;
+		animation: spin calc(var(--fall-duration, 5s) * 0.6) ease-in-out infinite;
+	}
+
+	/* Respect user's motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		.fall,
+		.spin {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Season } from '../palette';
+type LeafVariant = 'simple' | 'maple' | 'cherry' | 'aspen' | 'pine';
+interface Props {
+    class?: string;
+    color?: string;
+    season?: Season;
+    animate?: boolean;
+    variant?: LeafVariant;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Horizontal drift amount (positive = right, negative = left) */
+    drift?: number;
+    /** Fall distance in vh units (how far the leaf travels) */
+    fallDistance?: number;
+    /** Seed for deterministic color selection */
+    seed?: number;
+}
+declare const LeafFalling: import("svelte").Component<Props, {}, "">;
+type LeafFalling = ReturnType<typeof LeafFalling>;
+export default LeafFalling;

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

@@ -0,0 +1,266 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { springBlossoms } from '../palette';
+	import { browser } from '$app/environment';
+
+	type PetalVariant = 'round' | 'pointed' | 'heart' | 'curled' | 'tiny';
+
+	interface Props {
+		class?: string;
+		/** Petal shape variant */
+		variant?: PetalVariant;
+		/** Override petal color (defaults to spring blossom pink) */
+		color?: string;
+		/** Fall animation duration in seconds */
+		duration?: number;
+		/** Animation delay in seconds */
+		delay?: number;
+		/** Horizontal drift amount in pixels (can be negative) */
+		drift?: number;
+		/** Fall distance in vh units */
+		fallDistance?: number;
+		/** Enable falling animation */
+		animate?: boolean;
+		/** Opacity for depth effect */
+		opacity?: number;
+		/** Seed for deterministic rotation patterns */
+		seed?: number;
+	}
+
+	let {
+		class: className = 'w-3 h-3',
+		variant = 'round',
+		color,
+		duration = 12,
+		delay = 0,
+		drift = 0,
+		fallDistance = 100,
+		animate = true,
+		opacity = 0.85,
+		seed = 0
+	}: Props = $props();
+
+	// Use spring blossom colors with slight variation based on variant
+	const petalColor = $derived(color ?? (
+		variant === 'tiny' ? springBlossoms.palePink :
+		variant === 'curled' ? springBlossoms.rose :
+		springBlossoms.blush
+	));
+
+	// Secondary color for gradient effect
+	const highlightColor = $derived(springBlossoms.palePink);
+
+	// Deterministic rotation based on seed - more dramatic for dancing effect
+	const initialRotation = $derived((seed * 37) % 360);
+	const rotationDirection = $derived(seed % 2 === 0 ? 1 : -1);
+	const rotationAmount = $derived(360 + (seed % 360)); // 360-720 degrees total rotation - more twirling!
+
+	// Dancing sway parameters - create organic horizontal movement
+	// Dramatically increased for true gliding, dancing motion!
+	const swayAmplitude = $derived(80 + (seed % 100)); // 80-180px horizontal sway - GLIDE!
+	const swayFrequency = $derived(2 + (seed % 4)); // 2-5 complete waves during fall
+
+	// Unique animation name to prevent conflicts
+	const animId = $derived(`petal-${seed}`);
+
+	// Inject dynamic keyframes at runtime to avoid PostCSS parsing issues
+	$effect(() => {
+		if (!browser || !animate) return;
+
+		const styleId = `petal-style-${seed}`;
+		// Check if already injected
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement('style');
+		style.id = styleId;
+		// Create dancing, swaying motion with sine wave horizontal movement
+		// Opacity fade-in for gentle appearance (0 → target opacity)
+		style.textContent = `
+			@keyframes ${animId}-fall {
+				0% {
+					transform: translateY(0) translateX(0) rotate(${initialRotation}deg);
+					opacity: 0;
+				}
+				8% {
+					opacity: ${opacity};
+				}
+				12.5% {
+					transform: translateY(${fallDistance * 0.125}vh) translateX(${Math.sin(Math.PI * 0.25 * swayFrequency) * swayAmplitude + drift * 0.125}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.125}deg);
+				}
+				25% {
+					transform: translateY(${fallDistance * 0.25}vh) translateX(${Math.sin(Math.PI * 0.5 * swayFrequency) * swayAmplitude + drift * 0.25}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.25}deg);
+				}
+				37.5% {
+					transform: translateY(${fallDistance * 0.375}vh) translateX(${Math.sin(Math.PI * 0.75 * swayFrequency) * swayAmplitude + drift * 0.375}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.375}deg);
+				}
+				50% {
+					transform: translateY(${fallDistance * 0.5}vh) translateX(${Math.sin(Math.PI * swayFrequency) * swayAmplitude + drift * 0.5}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.5}deg);
+				}
+				62.5% {
+					transform: translateY(${fallDistance * 0.625}vh) translateX(${Math.sin(Math.PI * 1.25 * swayFrequency) * swayAmplitude + drift * 0.625}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.625}deg);
+				}
+				75% {
+					transform: translateY(${fallDistance * 0.75}vh) translateX(${Math.sin(Math.PI * 1.5 * swayFrequency) * swayAmplitude + drift * 0.75}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.75}deg);
+				}
+				87.5% {
+					transform: translateY(${fallDistance * 0.875}vh) translateX(${Math.sin(Math.PI * 1.75 * swayFrequency) * swayAmplitude + drift * 0.875}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.875}deg);
+				}
+				100% {
+					transform: translateY(${fallDistance}vh) translateX(${Math.sin(Math.PI * 2 * swayFrequency) * swayAmplitude + drift}px) rotate(${initialRotation + rotationAmount * rotationDirection}deg);
+				}
+			}
+			@keyframes ${animId}-flutter {
+				0%, 100% {
+					transform: rotateX(0deg) rotateY(0deg) scale(1);
+				}
+				16% {
+					transform: rotateX(30deg) rotateY(40deg) scale(0.9);
+				}
+				33% {
+					transform: rotateX(-25deg) rotateY(-35deg) scale(1.08);
+				}
+				50% {
+					transform: rotateX(35deg) rotateY(30deg) scale(0.95);
+				}
+				66% {
+					transform: rotateX(-30deg) rotateY(-40deg) scale(1.05);
+				}
+				83% {
+					transform: rotateX(25deg) rotateY(35deg) scale(0.92);
+				}
+			}
+		`;
+		document.head.appendChild(style);
+
+		return () => {
+			// Cleanup on component destroy
+			const el = document.getElementById(styleId);
+			if (el) el.remove();
+		};
+	});
+</script>
+
+<!-- Cherry blossom petal - delicate and flutter-y -->
+<!-- Wrapper div for fall animation (translateY/X), SVG for flutter (3D rotations) -->
+<div
+	class="petal-wrapper"
+	style="{animate ? `animation: ${animId}-fall ${duration}s linear ${delay}s infinite;` : `opacity: ${opacity};`}"
+>
+	<svg
+		class="{className}"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 20 20"
+		style="{animate ? `animation: ${animId}-flutter ${duration / 4}s ease-in-out ${delay}s infinite;` : ''}"
+	>
+	<defs>
+		<!-- Gradient for depth -->
+		<radialGradient id="petal-grad-{seed}" cx="30%" cy="30%" r="70%">
+			<stop offset="0%" stop-color={highlightColor} />
+			<stop offset="100%" stop-color={petalColor} />
+		</radialGradient>
+	</defs>
+
+	{#if variant === 'round'}
+		<!-- Classic round cherry blossom petal -->
+		<ellipse
+			cx="10"
+			cy="10"
+			rx="8"
+			ry="9"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+		<!-- Subtle vein -->
+		<path
+			d="M10 3 Q10 10 10 18"
+			fill="none"
+			stroke={springBlossoms.rose}
+			stroke-width="0.5"
+			opacity="0.3"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else if variant === 'pointed'}
+		<!-- Pointed petal - slightly more dramatic -->
+		<path
+			d="M10 2 Q18 8 16 14 Q12 20 10 18 Q8 20 4 14 Q2 8 10 2"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else if variant === 'heart'}
+		<!-- Heart-shaped petal with notch at top -->
+		<path
+			d="M10 18 Q4 12 4 8 Q4 4 8 4 Q10 4 10 6 Q10 4 12 4 Q16 4 16 8 Q16 12 10 18"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else if variant === 'curled'}
+		<!-- Curled petal - caught by the wind -->
+		<path
+			d="M6 4 Q14 2 16 8 Q18 14 14 18 Q8 18 6 14 Q4 10 6 4"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+		<!-- Curl shadow -->
+		<path
+			d="M8 6 Q12 5 14 8"
+			fill="none"
+			stroke={springBlossoms.rose}
+			stroke-width="0.5"
+			opacity="0.4"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else}
+		<!-- Tiny - simple dot for distant petals -->
+		<circle
+			cx="10"
+			cy="10"
+			r="6"
+			fill={petalColor}
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{/if}
+	</svg>
+</div>
+
+<style>
+	/* Dynamic keyframes are injected via style attribute */
+	/* These are fallback static versions */
+	@keyframes petal-fall-base {
+		0% {
+			transform: translateY(0) translateX(0);
+		}
+		100% {
+			transform: translateY(100vh) translateX(var(--drift, 30px));
+		}
+	}
+
+	@keyframes petal-flutter-base {
+		0%, 100% {
+			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+		}
+		25% {
+			transform: rotateX(15deg) rotateY(30deg) rotateZ(10deg);
+		}
+		50% {
+			transform: rotateX(-10deg) rotateY(-20deg) rotateZ(-5deg);
+		}
+		75% {
+			transform: rotateX(20deg) rotateY(10deg) rotateZ(15deg);
+		}
+	}
+
+	.petal-wrapper {
+		display: inline-block;
+		will-change: transform, opacity;
+	}
+
+	svg {
+		display: block;
+		transform-style: preserve-3d;
+		will-change: transform;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+type PetalVariant = 'round' | 'pointed' | 'heart' | 'curled' | 'tiny';
+interface Props {
+    class?: string;
+    /** Petal shape variant */
+    variant?: PetalVariant;
+    /** Override petal color (defaults to spring blossom pink) */
+    color?: string;
+    /** Fall animation duration in seconds */
+    duration?: number;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Horizontal drift amount in pixels (can be negative) */
+    drift?: number;
+    /** Fall distance in vh units */
+    fallDistance?: number;
+    /** Enable falling animation */
+    animate?: boolean;
+    /** Opacity for depth effect */
+    opacity?: number;
+    /** Seed for deterministic rotation patterns */
+    seed?: number;
+}
+declare const PetalFalling: import("svelte").Component<Props, {}, "">;
+type PetalFalling = ReturnType<typeof PetalFalling>;
+export default PetalFalling;

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

@@ -0,0 +1,61 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+	}
+
+	let {
+		class: className = 'w-5 h-8',
+		color
+	}: Props = $props();
+
+	const coneColor = $derived(color ?? bark.warmBark);
+	const scaleLight = bark.lightBark;
+	const scaleDark = bark.darkBark;
+</script>
+
+<!-- Pine cone -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 55">
+	<!-- Stem -->
+	<rect fill={scaleDark} x="15" y="0" width="5" height="6" rx="1" />
+
+	<!-- Pine cone body (overlapping scales) -->
+	<!-- Top scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="12" rx="6" ry="4" />
+	<path fill={scaleDark} d="M12 12 Q17.5 10 23 12" stroke-width="0" opacity="0.3" />
+
+	<!-- Upper-mid scales -->
+	<ellipse fill={coneColor} cx="12" cy="18" rx="7" ry="5" />
+	<ellipse fill={coneColor} cx="23" cy="18" rx="7" ry="5" />
+	<path fill={scaleLight} d="M6 18 Q12 15 18 18" opacity="0.2" />
+	<path fill={scaleLight} d="M17 18 Q23 15 29 18" opacity="0.2" />
+
+	<!-- Middle scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="24" rx="8" ry="5" />
+	<ellipse fill={coneColor} cx="8" cy="26" rx="7" ry="5" />
+	<ellipse fill={coneColor} cx="27" cy="26" rx="7" ry="5" />
+	<path fill={scaleDark} d="M10 24 Q17.5 21 25 24" opacity="0.3" />
+
+	<!-- Lower-mid scales -->
+	<ellipse fill={coneColor} cx="12" cy="33" rx="8" ry="5" />
+	<ellipse fill={coneColor} cx="23" cy="33" rx="8" ry="5" />
+	<path fill={scaleLight} d="M5 33 Q12 30 19 33" opacity="0.2" />
+	<path fill={scaleLight} d="M16 33 Q23 30 30 33" opacity="0.2" />
+
+	<!-- Bottom scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="40" rx="9" ry="5" />
+	<ellipse fill={coneColor} cx="10" cy="42" rx="6" ry="4" />
+	<ellipse fill={coneColor} cx="25" cy="42" rx="6" ry="4" />
+	<path fill={scaleDark} d="M9 40 Q17.5 37 26 40" opacity="0.3" />
+
+	<!-- Tip scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="48" rx="7" ry="4" />
+	<ellipse fill={coneColor} cx="17.5" cy="52" rx="4" ry="3" />
+</svg>

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

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

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

@@ -0,0 +1,102 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from '../palette';
+	import { greens, autumn } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		season?: Season;
+		animate?: boolean;
+		variant?: 'tendril' | 'ivy' | 'flowering';
+	}
+
+	let {
+		class: className = 'w-8 h-12',
+		color,
+		season = 'summer',
+		animate = false,
+		variant = 'tendril'
+	}: Props = $props();
+
+	const defaultColor = $derived(season === 'autumn' ? autumn.rust : greens.grove);
+	const vineColor = $derived(color ?? defaultColor);
+	const leafColor = $derived(season === 'autumn' ? autumn.amber : greens.meadow);
+</script>
+
+<!-- Vine/tendril -->
+<svg class="{className} {animate ? 'grow' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 80">
+	{#if variant === 'tendril'}
+		<!-- Simple curling tendril -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="2"
+			d="M25 80 Q20 60 25 50 Q30 40 25 30 Q20 20 30 15 Q40 10 45 5"
+			stroke-linecap="round"
+		/>
+		<!-- Curl at end -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="1.5"
+			d="M45 5 Q50 8 48 12 Q45 15 42 12 Q40 8 45 5"
+			stroke-linecap="round"
+		/>
+		<!-- Small leaves -->
+		<ellipse fill={leafColor} cx="22" cy="55" rx="5" ry="3" transform="rotate(-30 22 55)" />
+		<ellipse fill={leafColor} cx="28" cy="35" rx="5" ry="3" transform="rotate(20 28 35)" />
+	{:else if variant === 'ivy'}
+		<!-- Ivy vine with leaves -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="2"
+			d="M25 80 Q22 65 28 55 Q34 45 26 35 Q18 25 25 15 Q32 5 30 0"
+			stroke-linecap="round"
+		/>
+		<!-- Ivy leaves (3-lobed) -->
+		<path fill={leafColor} d="M18 60 Q12 55 10 60 Q8 65 12 68 Q16 70 18 65 Q20 62 18 60" />
+		<path fill={leafColor} d="M32 45 Q38 40 40 45 Q42 50 38 53 Q34 55 32 50 Q30 47 32 45" />
+		<path fill={leafColor} d="M20 30 Q14 25 12 30 Q10 35 14 38 Q18 40 20 35 Q22 32 20 30" />
+		<path fill={leafColor} d="M30 15 Q36 10 38 15 Q40 20 36 23 Q32 25 30 20 Q28 17 30 15" />
+	{:else}
+		<!-- Flowering vine -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="2"
+			d="M25 80 Q20 60 30 45 Q40 30 30 15 Q20 0 25 -5"
+			stroke-linecap="round"
+		/>
+		<!-- Leaves -->
+		<ellipse fill={leafColor} cx="22" cy="58" rx="6" ry="4" transform="rotate(-20 22 58)" />
+		<ellipse fill={leafColor} cx="35" cy="38" rx="6" ry="4" transform="rotate(25 35 38)" />
+		<ellipse fill={leafColor} cx="25" cy="20" rx="5" ry="3" transform="rotate(-15 25 20)" />
+		<!-- Small flowers -->
+		<circle fill="#f9a8d4" cx="28" cy="50" r="4" />
+		<circle fill="#fbbf24" cx="28" cy="50" r="1.5" />
+		<circle fill="#f9a8d4" cx="32" cy="28" r="3" />
+		<circle fill="#fbbf24" cx="32" cy="28" r="1" />
+	{/if}
+</svg>
+
+<style>
+	@keyframes grow {
+		0% {
+			stroke-dasharray: 200;
+			stroke-dashoffset: 200;
+		}
+		100% {
+			stroke-dashoffset: 0;
+		}
+	}
+
+	.grow path {
+		animation: grow 3s ease-out forwards;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Season } from '../palette';
+interface Props {
+    class?: string;
+    color?: string;
+    season?: Season;
+    animate?: boolean;
+    variant?: 'tendril' | 'ivy' | 'flowering';
+}
+declare const Vine: import("svelte").Component<Props, {}, "">;
+type Vine = ReturnType<typeof Vine>;
+export default Vine;