@autumnsgrove/groveengine 0.7.0 → 0.8.5

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

@@ -0,0 +1,77 @@
+<!--
+  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;
+		variant?: 'oak' | 'maple' | 'simple' | 'aspen';
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color,
+		season = 'summer',
+		variant = 'simple'
+	}: Props = $props();
+
+	// Leaves change color in autumn
+	const defaultColor = $derived(season === 'autumn' ? autumn.amber : greens.grove);
+	const leafColor = $derived(color ?? defaultColor);
+	const veinColor = $derived(season === 'autumn' ? autumn.rust : greens.deepGreen);
+</script>
+
+<!-- Leaf - various shapes -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 50">
+	{#if variant === 'simple'}
+		<!-- Simple oval leaf -->
+		<ellipse fill={leafColor} cx="20" cy="22" rx="15" ry="20" />
+		<path fill="none" stroke={veinColor} stroke-width="1" d="M20 5 L20 42" opacity="0.4" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q10 18 8 22" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q30 18 32 22" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 25 Q12 28 8 32" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 25 Q28 28 32 32" opacity="0.3" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 42 L20 50" />
+	{:else if variant === 'maple'}
+		<!-- Maple leaf (iconic shape) -->
+		<path
+			fill={leafColor}
+			d="M20 2
+			   L22 10 L30 5 L26 14 L38 12 L28 20 L38 25 L26 26 L32 38 L20 30 L8 38 L14 26 L2 25 L12 20 L2 12 L14 14 L10 5 L18 10 Z"
+		/>
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 10 L20 30" opacity="0.4" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 18 L10 12" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 18 L30 12" opacity="0.3" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 30 L20 50" />
+	{:else if variant === 'oak'}
+		<!-- Oak leaf (lobed) -->
+		<path
+			fill={leafColor}
+			d="M20 3
+			   Q25 5 28 10 Q32 8 34 12 Q30 14 32 18 Q36 18 36 23 Q32 24 33 28 Q36 30 34 35 Q30 34 28 38 Q25 42 20 42
+			   Q15 42 12 38 Q10 34 6 35 Q4 30 7 28 Q8 24 4 23 Q4 18 8 18 Q10 14 6 12 Q8 8 12 10 Q15 5 20 3"
+		/>
+		<path fill="none" stroke={veinColor} stroke-width="1" d="M20 5 L20 42" opacity="0.4" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 42 L20 50" />
+	{:else if variant === 'aspen'}
+		<!-- Aspen leaf (round with pointed tip) -->
+		<path
+			fill={leafColor}
+			d="M20 3 Q35 15 35 28 Q35 42 20 42 Q5 42 5 28 Q5 15 20 3"
+		/>
+		<path fill="none" stroke={veinColor} stroke-width="0.8" d="M20 5 L20 42" opacity="0.4" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q12 20 8 28" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q28 20 32 28" opacity="0.3" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 42 L20 50" />
+	{/if}
+</svg>

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

@@ -0,0 +1,10 @@
+import type { Season } from '../palette';
+interface Props {
+    class?: string;
+    color?: string;
+    season?: Season;
+    variant?: 'oak' | 'maple' | 'simple' | 'aspen';
+}
+declare const Leaf: import("svelte").Component<Props, {}, "">;
+type Leaf = ReturnType<typeof Leaf>;
+export default Leaf;

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, cherryBlossoms, 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 = [cherryBlossoms.standard, cherryBlossoms.light, cherryBlossoms.pale, cherryBlossoms.falling];
+	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 { cherryBlossomsPeak } 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' ? cherryBlossomsPeak.falling :
+		variant === 'curled' ? cherryBlossomsPeak.light :
+		cherryBlossomsPeak.pale
+	));
+
+	// Secondary color for gradient effect
+	const highlightColor = $derived(cherryBlossomsPeak.falling);
+
+	// 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={cherryBlossomsPeak.light}
+			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={cherryBlossomsPeak.light}
+			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;