@autumnsgrove/groveengine 0.7.0 → 0.8.5

package/dist/ui/components/nature/trees/TreeAspen.svelte

@@ -0,0 +1,163 @@
+<!--
+  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, winter } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		trunkColor?: string;
+		season?: Season;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		trunkColor,
+		season = 'summer',
+		animate = true
+	}: Props = $props();
+
+	// Check if tree should be bare (winter)
+	const isBare = $derived(season === 'winter');
+
+	// Aspen turns brilliant gold/yellow in autumn
+	// Use $derived to react to season/color prop changes
+	const defaultColor = $derived(season === 'autumn' ? autumn.gold : 'currentColor');
+	const foliageColor = $derived(color ?? defaultColor);
+
+	// Aspen bark is pale cream/greenish-white with dark marks
+	// In winter, bark takes on a slightly frosted appearance
+	const actualTrunkColor = $derived(
+		trunkColor ?? (season === 'winter' ? winter.frost : '#e8e4d9')
+	);
+	const barkMarkColor = $derived(season === 'winter' ? '#5a5a5a' : '#4a4a4a');
+
+	// Slightly darker shade for leaf depth
+	const leafShadow = $derived(season === 'autumn' ? autumn.amber : greens.grove);
+</script>
+
+<!-- Aspen tree - slender trunk with quivering round/heart-shaped leaves -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140">
+	<!-- Trunk - slender with characteristic bark marks -->
+	<rect fill={actualTrunkColor} x="46" y="60" width="8" height="80" rx="2" />
+
+	<!-- Bark marks (aspen "eyes") -->
+	<ellipse fill={barkMarkColor} cx="49" cy="78" rx="2" ry="1" opacity="0.6" />
+	<ellipse fill={barkMarkColor} cx="51" cy="98" rx="2.5" ry="1" opacity="0.5" />
+	<ellipse fill={barkMarkColor} cx="48" cy="118" rx="2" ry="1" opacity="0.6" />
+
+	<!-- Upper branches hint - visible year-round -->
+	<path fill={actualTrunkColor} d="M50 60 Q44 55 38 58 L42 52 Q47 54 50 55 Z" />
+	<path fill={actualTrunkColor} d="M50 60 Q56 55 62 58 L58 52 Q53 54 50 55 Z" />
+
+	<!-- Extended bare branches visible in winter -->
+	{#if isBare}
+		<path fill="none" stroke={actualTrunkColor} stroke-width="2" d="M42 52 Q32 42 22 38" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="2" d="M58 52 Q68 42 78 38" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1.5" d="M22 38 Q18 32 20 25" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1.5" d="M22 38 Q28 30 32 22" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1.5" d="M78 38 Q82 32 80 25" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1.5" d="M78 38 Q72 30 68 22" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1" d="M50 55 Q50 35 50 18" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1" d="M50 28 Q44 20 38 15" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1" d="M50 28 Q56 20 62 15" />
+		<!-- Snow accents on branches -->
+		<ellipse fill={winter.snow} cx="22" cy="37" rx="4" ry="1.5" opacity="0.8" />
+		<ellipse fill={winter.snow} cx="78" cy="37" rx="4" ry="1.5" opacity="0.8" />
+		<ellipse fill={winter.snow} cx="50" cy="17" rx="3" ry="1" opacity="0.7" />
+	{/if}
+
+	<!-- Individual aspen leaves - round/heart shaped with pointed tips -->
+	<!-- Each group quivers independently like real aspen leaves -->
+	<!-- Hidden in winter when tree is bare -->
+
+	{#if !isBare}
+	<!-- Left branch cluster -->
+	<g class={animate ? 'quiver quiver-1' : ''}>
+		<!-- Round leaves with pointed tips - characteristic aspen shape -->
+		<path fill={foliageColor} d="M22 40 Q16 36 16 32 Q16 28 22 28 Q28 28 28 32 Q28 36 22 40 Z" />
+		<path fill={foliageColor} d="M28 32 Q23 29 23 26 Q23 22 28 22 Q33 22 33 26 Q33 29 28 32 Z" />
+		<path fill={foliageColor} d="M18 32 Q13 29 13 26 Q13 22 18 22 Q23 22 23 26 Q23 29 18 32 Z" />
+		<path fill={foliageColor} d="M25 45 Q20 42 20 39 Q20 35 25 35 Q30 35 30 39 Q30 42 25 45 Z" />
+		<path fill={foliageColor} d="M16 42 Q11 39 11 36 Q11 32 16 32 Q21 32 21 36 Q21 39 16 42 Z" />
+	</g>
+
+	<g class={animate ? 'quiver quiver-2' : ''}>
+		<path fill={foliageColor} d="M32 28 Q27 25 27 21 Q27 17 32 17 Q37 17 37 21 Q37 25 32 28 Z" />
+		<path fill={foliageColor} d="M26 18 Q22 16 22 13 Q22 10 26 10 Q30 10 30 13 Q30 16 26 18 Z" />
+		<path fill={foliageColor} d="M35 38 Q30 35 30 32 Q30 28 35 28 Q40 28 40 32 Q40 35 35 38 Z" />
+		<path fill={foliageColor} d="M22 12 Q18 10 18 7 Q18 4 22 4 Q26 4 26 7 Q26 10 22 12 Z" />
+	</g>
+
+	<!-- Center top cluster -->
+	<g class={animate ? 'quiver quiver-3' : ''}>
+		<path fill={foliageColor} d="M50 18 Q45 14 45 10 Q45 6 50 6 Q55 6 55 10 Q55 14 50 18 Z" />
+		<path fill={foliageColor} d="M44 22 Q39 19 39 15 Q39 11 44 11 Q49 11 49 15 Q49 19 44 22 Z" />
+		<path fill={foliageColor} d="M56 22 Q51 19 51 15 Q51 11 56 11 Q61 11 61 15 Q61 19 56 22 Z" />
+		<path fill={foliageColor} d="M50 28 Q45 25 45 21 Q45 17 50 17 Q55 17 55 21 Q55 25 50 28 Z" />
+		<path fill={foliageColor} d="M42 32 Q37 29 37 25 Q37 21 42 21 Q47 21 47 25 Q47 29 42 32 Z" />
+		<path fill={foliageColor} d="M58 32 Q53 29 53 25 Q53 21 58 21 Q63 21 63 25 Q63 29 58 32 Z" />
+	</g>
+
+	<!-- Center middle cluster -->
+	<g class={animate ? 'quiver quiver-1' : ''}>
+		<path fill={foliageColor} d="M50 38 Q45 35 45 31 Q45 27 50 27 Q55 27 55 31 Q55 35 50 38 Z" />
+		<path fill={foliageColor} d="M44 45 Q39 42 39 38 Q39 34 44 34 Q49 34 49 38 Q49 42 44 45 Z" />
+		<path fill={foliageColor} d="M56 45 Q51 42 51 38 Q51 34 56 34 Q61 34 61 38 Q61 42 56 45 Z" />
+		<path fill={foliageColor} d="M48 52 Q43 49 43 45 Q43 41 48 41 Q53 41 53 45 Q53 49 48 52 Z" />
+		<path fill={foliageColor} d="M52 52 Q47 49 47 45 Q47 41 52 41 Q57 41 57 45 Q57 49 52 52 Z" />
+	</g>
+
+	<!-- Right branch cluster -->
+	<g class={animate ? 'quiver quiver-2' : ''}>
+		<path fill={foliageColor} d="M78 40 Q72 36 72 32 Q72 28 78 28 Q84 28 84 32 Q84 36 78 40 Z" />
+		<path fill={foliageColor} d="M72 32 Q67 29 67 26 Q67 22 72 22 Q77 22 77 26 Q77 29 72 32 Z" />
+		<path fill={foliageColor} d="M82 32 Q77 29 77 26 Q77 22 82 22 Q87 22 87 26 Q87 29 82 32 Z" />
+		<path fill={foliageColor} d="M75 45 Q70 42 70 39 Q70 35 75 35 Q80 35 80 39 Q80 42 75 45 Z" />
+		<path fill={foliageColor} d="M84 42 Q79 39 79 36 Q79 32 84 32 Q89 32 89 36 Q89 39 84 42 Z" />
+	</g>
+
+	<g class={animate ? 'quiver quiver-3' : ''}>
+		<path fill={foliageColor} d="M68 28 Q63 25 63 21 Q63 17 68 17 Q73 17 73 21 Q73 25 68 28 Z" />
+		<path fill={foliageColor} d="M74 18 Q70 16 70 13 Q70 10 74 10 Q78 10 78 13 Q78 16 74 18 Z" />
+		<path fill={foliageColor} d="M65 38 Q60 35 60 32 Q60 28 65 28 Q70 28 70 32 Q70 35 65 38 Z" />
+		<path fill={foliageColor} d="M78 12 Q74 10 74 7 Q74 4 78 4 Q82 4 82 7 Q82 10 78 12 Z" />
+	</g>
+	{/if}
+</svg>
+
+<style>
+	/* Aspen leaves famously "quiver" in the slightest breeze */
+	@keyframes quiver {
+		0%, 100% {
+			transform: rotate(0deg) translateX(0);
+		}
+		20% {
+			transform: rotate(0.8deg) translateX(0.4px);
+		}
+		40% {
+			transform: rotate(-0.6deg) translateX(-0.3px);
+		}
+		60% {
+			transform: rotate(0.5deg) translateX(0.2px);
+		}
+		80% {
+			transform: rotate(-0.4deg) translateX(-0.2px);
+		}
+	}
+
+	.quiver {
+		transform-origin: center bottom;
+		animation: quiver 2.5s ease-in-out infinite;
+	}
+
+	.quiver-1 { animation-delay: 0s; }
+	.quiver-2 { animation-delay: 0.4s; }
+	.quiver-3 { animation-delay: 0.8s; }
+</style>

package/dist/ui/components/nature/trees/TreeAspen.svelte.d.ts

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

package/dist/ui/components/nature/trees/TreeBirch.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, natural, winter } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		trunkColor?: string;
+		season?: Season;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		trunkColor,
+		season = 'summer',
+		animate = true
+	}: Props = $props();
+
+	// Check if tree should be bare (winter)
+	const isBare = $derived(season === 'winter');
+
+	// Birch turns brilliant golden yellow in autumn
+	// Use $derived to react to season/color prop changes
+	const defaultColor = $derived(season === 'autumn' ? autumn.gold : 'currentColor');
+	const foliageColor = $derived(color ?? defaultColor);
+
+	// Birch bark is white/cream with dark horizontal marks
+	// In winter, the white bark stands out even more against snow
+	const actualTrunkColor = $derived(trunkColor ?? natural.birchWhite);
+	const barkMarkColor = '#2d2d2d';
+</script>
+
+<!-- Birch tree - white bark with horizontal marks, small triangular leaves -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140">
+	<!-- Main trunk - characteristic white birch bark -->
+	<rect fill={actualTrunkColor} x="45" y="55" width="10" height="85" rx="2" />
+
+	<!-- Bark marks (horizontal lenticels - birch signature) -->
+	<line x1="46" y1="65" x2="54" y2="65" stroke={barkMarkColor} stroke-width="1.5" opacity="0.5" />
+	<line x1="47" y1="78" x2="53" y2="78" stroke={barkMarkColor} stroke-width="1" opacity="0.4" />
+	<line x1="46" y1="92" x2="54" y2="92" stroke={barkMarkColor} stroke-width="1.5" opacity="0.5" />
+	<line x1="47" y1="105" x2="53" y2="105" stroke={barkMarkColor} stroke-width="1" opacity="0.4" />
+	<line x1="46" y1="118" x2="54" y2="118" stroke={barkMarkColor} stroke-width="1.5" opacity="0.5" />
+	<line x1="47" y1="130" x2="53" y2="130" stroke={barkMarkColor} stroke-width="1" opacity="0.4" />
+
+	<!-- Peeling bark texture hints -->
+	<path fill="none" stroke={barkMarkColor} stroke-width="0.5" d="M45 83 Q43 87 45 91" opacity="0.25" />
+	<path fill="none" stroke={barkMarkColor} stroke-width="0.5" d="M55 108 Q57 112 55 116" opacity="0.25" />
+
+	<!-- Delicate branch structure - always visible -->
+	<path fill="none" stroke={actualTrunkColor} stroke-width="3" d="M50 55 Q42 48 32 42" />
+	<path fill="none" stroke={actualTrunkColor} stroke-width="3" d="M50 55 Q58 48 68 42" />
+	<path fill="none" stroke={actualTrunkColor} stroke-width="2" d="M50 50 Q44 38 38 28" />
+	<path fill="none" stroke={actualTrunkColor} stroke-width="2" d="M50 50 Q56 38 62 28" />
+	<path fill="none" stroke={actualTrunkColor} stroke-width="1.5" d="M46 42 Q40 32 35 22" />
+	<path fill="none" stroke={actualTrunkColor} stroke-width="1.5" d="M54 42 Q60 32 65 22" />
+
+	<!-- Extended bare branches and snow accents in winter -->
+	{#if isBare}
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1" d="M32 42 Q26 35 22 28" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1" d="M32 42 Q35 35 38 30" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1" d="M68 42 Q74 35 78 28" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="1" d="M68 42 Q65 35 62 30" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="0.8" d="M35 22 Q32 15 30 8" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="0.8" d="M65 22 Q68 15 70 8" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="0.8" d="M38 28 Q36 22 34 16" />
+		<path fill="none" stroke={actualTrunkColor} stroke-width="0.8" d="M62 28 Q64 22 66 16" />
+		<!-- Snow accents on branches -->
+		<ellipse fill={winter.snow} cx="32" cy="41" rx="4" ry="1.5" opacity="0.8" />
+		<ellipse fill={winter.snow} cx="68" cy="41" rx="4" ry="1.5" opacity="0.8" />
+		<ellipse fill={winter.snow} cx="38" cy="27" rx="3" ry="1" opacity="0.7" />
+		<ellipse fill={winter.snow} cx="62" cy="27" rx="3" ry="1" opacity="0.7" />
+		<ellipse fill={winter.snow} cx="50" cy="49" rx="3" ry="1" opacity="0.6" />
+	{/if}
+
+	<!-- Birch leaves - small serrated ovate leaves (doubled for fullness) -->
+	<!-- Hidden in winter when tree is bare -->
+	{#if !isBare}
+	<!-- Left side clusters -->
+	<g class={animate ? 'sway sway-1' : ''}>
+		<!-- Organic leaf shapes with gentle serration -->
+		<path fill={foliageColor} d="M30 50 Q25 45 27 40 L30 38 L33 40 Q35 45 30 50 Z" />
+		<path fill={foliageColor} d="M22 43 Q18 39 20 35 L22 33 L24 35 Q26 39 22 43 Z" />
+		<path fill={foliageColor} d="M32 40 Q28 36 30 31 L32 29 L34 31 Q36 36 32 40 Z" />
+		<path fill={foliageColor} d="M19 51 Q15 47 17 43 L19 41 L21 43 Q23 47 19 51 Z" />
+		<path fill={foliageColor} d="M36 53 Q32 49 34 44 L36 42 L38 44 Q40 49 36 53 Z" />
+		<!-- Additional leaves for fullness -->
+		<path fill={foliageColor} d="M25 46 Q21 42 23 38 L25 36 L27 38 Q29 42 25 46 Z" />
+		<path fill={foliageColor} d="M16 47 Q12 43 14 39 L16 37 L18 39 Q20 43 16 47 Z" />
+		<path fill={foliageColor} d="M28 54 Q24 50 26 45 L28 43 L30 45 Q32 50 28 54 Z" />
+		<path fill={foliageColor} d="M34 47 Q30 43 32 38 L34 36 L36 38 Q38 43 34 47 Z" />
+	</g>
+
+	<g class={animate ? 'sway sway-2' : ''}>
+		<path fill={foliageColor} d="M34 33 Q30 29 32 24 L34 22 L36 24 Q38 29 34 33 Z" />
+		<path fill={foliageColor} d="M26 30 Q22 26 24 21 L26 19 L28 21 Q30 26 26 30 Z" />
+		<path fill={foliageColor} d="M29 19 Q26 16 27 12 L29 10 L31 12 Q32 16 29 19 Z" />
+		<path fill={foliageColor} d="M38 24 Q35 21 36 17 L38 15 L40 17 Q41 21 38 24 Z" />
+		<!-- Additional leaves for fullness -->
+		<path fill={foliageColor} d="M22 36 Q18 32 20 27 L22 25 L24 27 Q26 32 22 36 Z" />
+		<path fill={foliageColor} d="M30 26 Q27 23 28 19 L30 17 L32 19 Q33 23 30 26 Z" />
+		<path fill={foliageColor} d="M35 28 Q32 25 33 21 L35 19 L37 21 Q38 25 35 28 Z" />
+		<path fill={foliageColor} d="M24 24 Q21 21 22 17 L24 15 L26 17 Q27 21 24 24 Z" />
+	</g>
+
+	<!-- Center top cluster -->
+	<g class={animate ? 'sway sway-3' : ''}>
+		<path fill={foliageColor} d="M50 23 Q46 18 48 13 L50 11 L52 13 Q54 18 50 23 Z" />
+		<path fill={foliageColor} d="M45 27 Q41 23 43 18 L45 16 L47 18 Q49 23 45 27 Z" />
+		<path fill={foliageColor} d="M55 27 Q51 23 53 18 L55 16 L57 18 Q59 23 55 27 Z" />
+		<path fill={foliageColor} d="M52 11 Q49 8 50 5 L52 3 L54 5 Q55 8 52 11 Z" />
+		<path fill={foliageColor} d="M47 16 Q44 13 45 9 L47 7 L49 9 Q50 13 47 16 Z" />
+		<path fill={foliageColor} d="M53 16 Q50 13 51 9 L53 7 L55 9 Q56 13 53 16 Z" />
+		<!-- Additional leaves for fullness -->
+		<path fill={foliageColor} d="M48 19 Q45 16 46 12 L48 10 L50 12 Q51 16 48 19 Z" />
+		<path fill={foliageColor} d="M56 19 Q53 16 54 12 L56 10 L58 12 Q59 16 56 19 Z" />
+		<path fill={foliageColor} d="M50 15 Q47 12 48 8 L50 6 L52 8 Q53 12 50 15 Z" />
+		<path fill={foliageColor} d="M42 23 Q39 20 40 16 L42 14 L44 16 Q45 20 42 23 Z" />
+		<path fill={foliageColor} d="M58 23 Q55 20 56 16 L58 14 L60 16 Q61 20 58 23 Z" />
+	</g>
+
+	<!-- Center middle -->
+	<g class={animate ? 'sway sway-1' : ''}>
+		<path fill={foliageColor} d="M50 37 Q46 32 48 27 L50 25 L52 27 Q54 32 50 37 Z" />
+		<path fill={foliageColor} d="M43 40 Q39 36 41 31 L43 29 L45 31 Q47 36 43 40 Z" />
+		<path fill={foliageColor} d="M57 40 Q53 36 55 31 L57 29 L59 31 Q61 36 57 40 Z" />
+		<path fill={foliageColor} d="M48 49 Q45 46 46 42 L48 40 L50 42 Q51 46 48 49 Z" />
+		<path fill={foliageColor} d="M52 49 Q49 46 50 42 L52 40 L54 42 Q55 46 52 49 Z" />
+		<!-- Additional leaves for fullness -->
+		<path fill={foliageColor} d="M46 33 Q43 30 44 26 L46 24 L48 26 Q49 30 46 33 Z" />
+		<path fill={foliageColor} d="M54 33 Q51 30 52 26 L54 24 L56 26 Q57 30 54 33 Z" />
+		<path fill={foliageColor} d="M40 44 Q37 41 38 37 L40 35 L42 37 Q43 41 40 44 Z" />
+		<path fill={foliageColor} d="M60 44 Q57 41 58 37 L60 35 L62 37 Q63 41 60 44 Z" />
+		<path fill={foliageColor} d="M50 44 Q47 41 48 37 L50 35 L52 37 Q53 41 50 44 Z" />
+	</g>
+
+	<!-- Right side clusters -->
+	<g class={animate ? 'sway sway-2' : ''}>
+		<path fill={foliageColor} d="M70 50 Q65 45 67 40 L70 38 L73 40 Q75 45 70 50 Z" />
+		<path fill={foliageColor} d="M78 43 Q74 39 76 35 L78 33 L80 35 Q82 39 78 43 Z" />
+		<path fill={foliageColor} d="M68 40 Q64 36 66 31 L68 29 L70 31 Q72 36 68 40 Z" />
+		<path fill={foliageColor} d="M81 51 Q77 47 79 43 L81 41 L83 43 Q85 47 81 51 Z" />
+		<path fill={foliageColor} d="M64 53 Q60 49 62 44 L64 42 L66 44 Q68 49 64 53 Z" />
+		<!-- Additional leaves for fullness -->
+		<path fill={foliageColor} d="M75 46 Q71 42 73 38 L75 36 L77 38 Q79 42 75 46 Z" />
+		<path fill={foliageColor} d="M84 47 Q80 43 82 39 L84 37 L86 39 Q88 43 84 47 Z" />
+		<path fill={foliageColor} d="M72 54 Q68 50 70 45 L72 43 L74 45 Q76 50 72 54 Z" />
+		<path fill={foliageColor} d="M66 47 Q62 43 64 38 L66 36 L68 38 Q70 43 66 47 Z" />
+	</g>
+
+	<g class={animate ? 'sway sway-3' : ''}>
+		<path fill={foliageColor} d="M66 33 Q62 29 64 24 L66 22 L68 24 Q70 29 66 33 Z" />
+		<path fill={foliageColor} d="M74 30 Q70 26 72 21 L74 19 L76 21 Q78 26 74 30 Z" />
+		<path fill={foliageColor} d="M71 19 Q68 16 69 12 L71 10 L73 12 Q74 16 71 19 Z" />
+		<path fill={foliageColor} d="M62 24 Q59 21 60 17 L62 15 L64 17 Q65 21 62 24 Z" />
+		<!-- Additional leaves for fullness -->
+		<path fill={foliageColor} d="M78 36 Q74 32 76 27 L78 25 L80 27 Q82 32 78 36 Z" />
+		<path fill={foliageColor} d="M70 26 Q67 23 68 19 L70 17 L72 19 Q73 23 70 26 Z" />
+		<path fill={foliageColor} d="M65 28 Q62 25 63 21 L65 19 L67 21 Q68 25 65 28 Z" />
+		<path fill={foliageColor} d="M76 24 Q73 21 74 17 L76 15 L78 17 Q79 21 76 24 Z" />
+	</g>
+	{/if}
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: translateX(0) rotate(0deg); }
+		50% { transform: translateX(0.8px) rotate(0.3deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 3.5s ease-in-out infinite;
+	}
+
+	.sway-1 { animation-delay: 0s; }
+	.sway-2 { animation-delay: 0.4s; }
+	.sway-3 { animation-delay: 0.8s; }
+</style>

package/dist/ui/components/nature/trees/TreeBirch.svelte.d.ts

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

package/dist/ui/components/nature/trees/TreeCherry.svelte

@@ -0,0 +1,108 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from '../palette';
+	import { autumnReds, cherryBlossoms, winter } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		trunkColor?: string;
+		season?: Season;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		trunkColor,
+		season = 'spring',
+		animate = false
+	}: Props = $props();
+
+	// Check if tree should be bare (winter)
+	const isBare = $derived(season === 'winter');
+
+	// Cherry trees: pink blossoms in spring, red/crimson foliage in autumn
+	// Use $derived to react to season/color prop changes
+	const defaultColor = $derived(season === 'autumn' ? autumnReds.scarlet : cherryBlossoms.pale);
+	const blossomColor = $derived(color ?? defaultColor);
+	const actualTrunkColor = $derived(
+		trunkColor ?? (season === 'winter' ? winter.bareBranch : '#6B4423')
+	);
+</script>
+
+<!-- Cherry blossom tree - delicate branching with clustered flowers -->
+<svg
+	class="{className} {animate ? 'sway' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 100 120"
+>
+	<!-- Main trunk -->
+	<path fill={actualTrunkColor} d="M45 65 Q43 85 42 120 L58 120 Q57 85 55 65 Q50 60 45 65"/>
+
+	<!-- Branches - always visible -->
+	<path fill={actualTrunkColor} d="M50 60 Q35 50 20 55 Q25 52 30 45 Q40 48 50 55" stroke={actualTrunkColor} stroke-width="2"/>
+	<path fill={actualTrunkColor} d="M50 60 Q65 50 80 55 Q75 52 70 45 Q60 48 50 55" stroke={actualTrunkColor} stroke-width="2"/>
+	<path d="M50 50 Q45 35 35 30" stroke={actualTrunkColor} stroke-width="2" fill="none"/>
+	<path d="M50 50 Q55 35 65 30" stroke={actualTrunkColor} stroke-width="2" fill="none"/>
+
+	<!-- Extended bare branches in winter -->
+	{#if isBare}
+		<path d="M20 55 Q12 50 8 42" stroke={actualTrunkColor} stroke-width="1.5" fill="none"/>
+		<path d="M20 55 Q18 48 15 38" stroke={actualTrunkColor} stroke-width="1" fill="none"/>
+		<path d="M80 55 Q88 50 92 42" stroke={actualTrunkColor} stroke-width="1.5" fill="none"/>
+		<path d="M80 55 Q82 48 85 38" stroke={actualTrunkColor} stroke-width="1" fill="none"/>
+		<path d="M35 30 Q28 22 22 15" stroke={actualTrunkColor} stroke-width="1" fill="none"/>
+		<path d="M35 30 Q38 22 42 12" stroke={actualTrunkColor} stroke-width="1" fill="none"/>
+		<path d="M65 30 Q72 22 78 15" stroke={actualTrunkColor} stroke-width="1" fill="none"/>
+		<path d="M65 30 Q62 22 58 12" stroke={actualTrunkColor} stroke-width="1" fill="none"/>
+		<path d="M50 50 Q50 35 50 18" stroke={actualTrunkColor} stroke-width="1.5" fill="none"/>
+		<!-- Snow accents on branches -->
+		<ellipse fill={winter.snow} cx="20" cy="54" rx="5" ry="1.5" opacity="0.8" />
+		<ellipse fill={winter.snow} cx="80" cy="54" rx="5" ry="1.5" opacity="0.8" />
+		<ellipse fill={winter.snow} cx="35" cy="29" rx="4" ry="1" opacity="0.7" />
+		<ellipse fill={winter.snow} cx="65" cy="29" rx="4" ry="1" opacity="0.7" />
+		<ellipse fill={winter.snow} cx="50" cy="18" rx="3" ry="1" opacity="0.7" />
+	{/if}
+
+	<!-- Blossom clusters - hidden in winter -->
+	{#if !isBare}
+	<!-- Blossom clusters - left side -->
+	<circle fill={blossomColor} cx="20" cy="52" r="12"/>
+	<circle fill={blossomColor} cx="28" cy="42" r="10"/>
+	<circle fill={blossomColor} cx="15" cy="40" r="8"/>
+
+	<!-- Blossom clusters - right side -->
+	<circle fill={blossomColor} cx="80" cy="52" r="12"/>
+	<circle fill={blossomColor} cx="72" cy="42" r="10"/>
+	<circle fill={blossomColor} cx="85" cy="40" r="8"/>
+
+	<!-- Blossom clusters - top -->
+	<circle fill={blossomColor} cx="35" cy="28" r="11"/>
+	<circle fill={blossomColor} cx="50" cy="20" r="14"/>
+	<circle fill={blossomColor} cx="65" cy="28" r="11"/>
+	<circle fill={blossomColor} cx="42" cy="12" r="9"/>
+	<circle fill={blossomColor} cx="58" cy="12" r="9"/>
+
+	<!-- Center clusters -->
+	<circle fill={blossomColor} cx="40" cy="50" r="10"/>
+	<circle fill={blossomColor} cx="60" cy="50" r="10"/>
+	<circle fill={blossomColor} cx="50" cy="38" r="12"/>
+	{/if}
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: rotate(0deg); }
+		50% { transform: rotate(1.2deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 3.5s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/trees/TreeCherry.svelte.d.ts

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

package/dist/ui/components/nature/trees/TreePine.svelte

@@ -0,0 +1,79 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from '../palette';
+	import { winter } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		trunkColor?: string;
+		season?: Season;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		trunkColor,
+		season = 'summer',
+		animate = false
+	}: Props = $props();
+
+	// Check if winter for snow accents
+	const isWinter = $derived(season === 'winter');
+
+	// Pine trees are evergreen - they stay green year-round!
+	// In winter, they take on a frosted appearance from the color prop
+	const foliageColor = $derived(color ?? 'currentColor');
+	const actualTrunkColor = $derived(trunkColor ?? '#6B4423');
+</script>
+
+<!-- Pine/Conifer tree - triangular layered design -->
+<svg
+	class="{className} {animate ? 'sway' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 100 140"
+>
+	<!-- Trunk -->
+	<rect fill={actualTrunkColor} x="42" y="100" width="16" height="40" rx="2"/>
+
+	<!-- Bottom layer (widest) -->
+	<polygon fill={foliageColor} points="50,55 10,105 90,105"/>
+
+	<!-- Middle layer -->
+	<polygon fill={foliageColor} points="50,30 18,75 82,75"/>
+
+	<!-- Top layer (smallest) -->
+	<polygon fill={foliageColor} points="50,5 28,50 72,50"/>
+
+	<!-- Snow accents in winter -->
+	{#if isWinter}
+		<!-- Snow on branch edges -->
+		<path fill={winter.snow} d="M50 5 Q55 12 60 18 L40 18 Q45 12 50 5" opacity="0.85" />
+		<path fill={winter.snow} d="M28 50 Q38 52 50 50 Q62 52 72 50 L65 55 L35 55 Z" opacity="0.7" />
+		<path fill={winter.snow} d="M18 75 Q35 77 50 75 Q65 77 82 75 L72 82 L28 82 Z" opacity="0.6" />
+		<path fill={winter.snow} d="M10 105 Q30 107 50 105 Q70 107 90 105 L80 110 L20 110 Z" opacity="0.5" />
+		<!-- Scattered snow spots -->
+		<ellipse fill={winter.snow} cx="35" cy="65" rx="4" ry="2" opacity="0.5" />
+		<ellipse fill={winter.snow} cx="65" cy="68" rx="3" ry="1.5" opacity="0.4" />
+		<ellipse fill={winter.snow} cx="30" cy="90" rx="5" ry="2" opacity="0.4" />
+		<ellipse fill={winter.snow} cx="70" cy="92" rx="4" ry="2" opacity="0.45" />
+		<ellipse fill={winter.snow} cx="50" cy="40" rx="3" ry="1.5" opacity="0.5" />
+	{/if}
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: rotate(0deg); }
+		50% { transform: rotate(0.8deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 5s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/trees/TreePine.svelte.d.ts

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

package/dist/ui/components/nature/trees/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TreeAspen } from './TreeAspen.svelte';
+export { default as TreeBirch } from './TreeBirch.svelte';
+export { default as TreeCherry } from './TreeCherry.svelte';
+export { default as TreePine } from './TreePine.svelte';

package/dist/ui/components/nature/trees/index.js

@@ -0,0 +1,5 @@
+// Tree components - various tree types for forest scenes
+export { default as TreeAspen } from './TreeAspen.svelte';
+export { default as TreeBirch } from './TreeBirch.svelte';
+export { default as TreeCherry } from './TreeCherry.svelte';
+export { default as TreePine } from './TreePine.svelte';