@autumnsgrove/groveengine 0.7.0 → 0.8.5

package/dist/ui/components/nature/creatures/Robin.svelte

@@ -0,0 +1,98 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark, accents } from '../palette';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		bodyColor?: string;
+		breastColor?: string;
+		beakColor?: string;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		style,
+		bodyColor,
+		breastColor,
+		beakColor,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	// American Robin colors - from palette
+	const body = $derived(bodyColor ?? accents.bird.robinBody);
+	const wing = $derived(accents.bird.robinWing);
+	const wingDark = $derived(accents.bird.robinWingDark);
+	const breast = $derived(breastColor ?? accents.bird.robinBreast);
+	const breastLight = $derived(accents.bird.robinBreastLight);
+	const beak = $derived(beakColor ?? accents.bird.robinBeak);
+	const legColor = $derived(bark.darkBark);
+
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- American Robin - herald of spring! -->
+<svg
+	class="{className} {animate ? 'hop' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 50 60"
+	style="transform: scaleX({scaleX}); {style ?? ''}"
+>
+	<!-- Tail feathers - dark gray-brown -->
+	<path fill={body} d="M5 32 Q2 38 4 46 Q10 44 14 38 Q15 34 11 31 Q7 30 5 32" />
+	<path fill={wing} d="M6 34 Q4 40 5 44 Q9 42 11 38" opacity="0.5" />
+
+	<!-- Body - dark gray-brown upper -->
+	<ellipse fill={body} cx="22" cy="30" rx="14" ry="11" />
+
+	<!-- Wing - slightly darker with feather details -->
+	<path fill={wing} d="M9 26 Q5 32 8 40 Q15 38 19 32 Q17 25 9 26" />
+	<path fill={wingDark} d="M11 30 Q9 34 11 38 Q14 36 15 33 Q13 30 11 30" opacity="0.5" />
+
+	<!-- Breast - iconic orange-red -->
+	<ellipse fill={breast} cx="30" cy="34" rx="9" ry="10" />
+	<!-- Breast highlight -->
+	<ellipse fill={breastLight} cx="32" cy="32" rx="5" ry="6" opacity="0.4" />
+
+	<!-- Head - dark gray -->
+	<circle fill={body} cx="36" cy="18" r="9" />
+
+	<!-- White eye ring - Robin's distinctive feature -->
+	<circle fill="white" cx="40" cy="17" r="4" opacity="0.3" />
+
+	<!-- Eye -->
+	<circle fill="#1a1a1a" cx="40" cy="17" r="2.5" />
+	<!-- Eye highlight -->
+	<circle fill="white" cx="41" cy="16" r="0.8" />
+
+	<!-- Beak - yellow-orange, pointed -->
+	<path fill={beak} d="M44 18 L52 19 L44 22 Q43 20 44 18" />
+	<!-- Beak detail -->
+	<path fill="#d97706" d="M45 19 Q48 19 50 19.5" stroke="#b45309" stroke-width="0.3" />
+
+	<!-- Legs - dark -->
+	<g fill="none" stroke={legColor} stroke-width="1.5">
+		<path d="M22 41 L22 52 M20 50 L24 50" />
+		<path d="M28 41 L28 52 M26 50 L30 50" />
+	</g>
+</svg>
+
+<style>
+	@keyframes hop {
+		0%, 100% { transform: translateY(0); }
+		25% { transform: translateY(-3px); }
+		50% { transform: translateY(0); }
+		75% { transform: translateY(-2px); }
+	}
+
+	.hop {
+		animation: hop 1.8s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/creatures/Robin.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    class?: string;
+    style?: string;
+    bodyColor?: string;
+    breastColor?: string;
+    beakColor?: string;
+    animate?: boolean;
+    facing?: 'left' | 'right';
+}
+declare const Robin: import("svelte").Component<Props, {}, "">;
+type Robin = ReturnType<typeof Robin>;
+export default Robin;

package/dist/ui/components/nature/creatures/Squirrel.svelte

@@ -0,0 +1,97 @@
+<!--
+  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;
+		furColor?: string;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-8 h-8',
+		furColor,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	const fur = $derived(furColor ?? bark.warmBark);
+	const lightFur = $derived(earth.sand);
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Sitting squirrel -->
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 60 70"
+	style="transform: scaleX({scaleX})"
+>
+	<!-- Tail (fluffy!) -->
+	<g class={animate ? 'tail-flick' : ''}>
+		<path
+			fill={fur}
+			d="M5 35 Q0 20 10 10 Q20 5 25 15 Q28 25 20 35 Q15 40 10 38 Q5 40 5 35"
+		/>
+		<path
+			fill={lightFur}
+			d="M10 30 Q8 22 15 15 Q20 12 22 18 Q23 24 18 30"
+			opacity="0.5"
+		/>
+	</g>
+
+	<!-- Back leg -->
+	<ellipse fill={fur} cx="25" cy="58" rx="10" ry="8" />
+
+	<!-- Body -->
+	<ellipse fill={fur} cx="32" cy="45" rx="14" ry="16" />
+
+	<!-- Belly -->
+	<ellipse fill={lightFur} cx="35" cy="48" rx="8" ry="10" />
+
+	<!-- Front paws (holding something) -->
+	<ellipse fill={fur} cx="42" cy="52" rx="4" ry="6" />
+	<ellipse fill={fur} cx="48" cy="50" rx="4" ry="5" />
+
+	<!-- Head -->
+	<circle fill={fur} cx="48" cy="32" r="12" />
+
+	<!-- Cheek -->
+	<ellipse fill={lightFur} cx="52" cy="36" rx="6" ry="5" />
+
+	<!-- Ears -->
+	<ellipse fill={fur} cx="42" cy="20" rx="4" ry="6" />
+	<ellipse fill={lightFur} cx="42" cy="20" rx="2" ry="4" />
+	<ellipse fill={fur} cx="52" cy="18" rx="4" ry="6" />
+	<ellipse fill={lightFur} cx="52" cy="18" rx="2" ry="4" />
+
+	<!-- Eye -->
+	<circle fill="#1a1a1a" cx="52" cy="30" r="3" />
+	<circle fill="white" cx="53" cy="29" r="1" />
+
+	<!-- Nose -->
+	<circle fill="#1a1a1a" cx="58" cy="34" r="2" />
+
+	<!-- Acorn (optional detail) -->
+	<ellipse fill={bark.bark} cx="45" cy="56" rx="3" ry="4" />
+	<path fill={bark.darkBark} d="M42 53 Q45 51 48 53 L48 54 Q45 52 42 54 Z" />
+</svg>
+
+<style>
+	@keyframes tail-flick {
+		0%, 80%, 100% { transform: rotate(0deg); }
+		85% { transform: rotate(5deg); }
+		90% { transform: rotate(-3deg); }
+		95% { transform: rotate(2deg); }
+	}
+
+	.tail-flick {
+		transform-origin: bottom right;
+		animation: tail-flick 3s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/creatures/Squirrel.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    class?: string;
+    furColor?: string;
+    animate?: boolean;
+    facing?: 'left' | 'right';
+}
+declare const Squirrel: import("svelte").Component<Props, {}, "">;
+type Squirrel = ReturnType<typeof Squirrel>;
+export default Squirrel;

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

@@ -0,0 +1,13 @@
+export { default as Bee } from './Bee.svelte';
+export { default as Bird } from './Bird.svelte';
+export { default as BirdFlying } from './BirdFlying.svelte';
+export { default as Bluebird } from './Bluebird.svelte';
+export { default as Butterfly } from './Butterfly.svelte';
+export { default as Cardinal } from './Cardinal.svelte';
+export { default as Chickadee } from './Chickadee.svelte';
+export { default as Deer } from './Deer.svelte';
+export { default as Firefly } from './Firefly.svelte';
+export { default as Owl } from './Owl.svelte';
+export { default as Rabbit } from './Rabbit.svelte';
+export { default as Robin } from './Robin.svelte';
+export { default as Squirrel } from './Squirrel.svelte';

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

@@ -0,0 +1,14 @@
+// Creature components - animals and insects that bring the forest to life
+export { default as Bee } from './Bee.svelte';
+export { default as Bird } from './Bird.svelte';
+export { default as BirdFlying } from './BirdFlying.svelte';
+export { default as Bluebird } from './Bluebird.svelte';
+export { default as Butterfly } from './Butterfly.svelte';
+export { default as Cardinal } from './Cardinal.svelte';
+export { default as Chickadee } from './Chickadee.svelte';
+export { default as Deer } from './Deer.svelte';
+export { default as Firefly } from './Firefly.svelte';
+export { default as Owl } from './Owl.svelte';
+export { default as Rabbit } from './Rabbit.svelte';
+export { default as Robin } from './Robin.svelte';
+export { default as Squirrel } from './Squirrel.svelte';

package/dist/ui/components/nature/ground/Bush.svelte

@@ -0,0 +1,57 @@
+<!--
+  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, bark } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		season?: Season;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-8 h-8',
+		color,
+		season = 'summer',
+		animate = false
+	}: Props = $props();
+
+	// Bushes turn warm colors in autumn
+	const defaultColor = $derived(season === 'autumn' ? autumn.amber : greens.grove);
+	const foliageColor = $derived(color ?? defaultColor);
+	const shadowColor = $derived(season === 'autumn' ? autumn.rust : greens.deepGreen);
+</script>
+
+<!-- Round bush/shrub -->
+<svg class="{className} {animate ? 'sway' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 60">
+	<!-- Base shadow/depth -->
+	<ellipse fill={shadowColor} cx="40" cy="45" rx="35" ry="15" opacity="0.5" />
+
+	<!-- Main foliage clusters -->
+	<ellipse fill={foliageColor} cx="40" cy="35" rx="32" ry="25" />
+	<ellipse fill={foliageColor} cx="22" cy="40" rx="20" ry="18" />
+	<ellipse fill={foliageColor} cx="58" cy="40" rx="20" ry="18" />
+	<ellipse fill={foliageColor} cx="40" cy="22" rx="22" ry="16" />
+	<ellipse fill={foliageColor} cx="28" cy="28" rx="15" ry="12" />
+	<ellipse fill={foliageColor} cx="52" cy="28" rx="15" ry="12" />
+
+	<!-- Ground hint -->
+	<ellipse fill={bark.bark} cx="40" cy="55" rx="15" ry="4" opacity="0.3" />
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: rotate(0deg); }
+		50% { transform: rotate(0.5deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 4s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/ground/Bush.svelte.d.ts

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

package/dist/ui/components/nature/ground/Crocus.svelte

@@ -0,0 +1,83 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { greens, wildflowers } from '../palette';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		petalColor?: string;
+		centerColor?: string;
+		stemColor?: string;
+		variant?: 'purple' | 'yellow' | 'white';
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-4 h-6',
+		style,
+		petalColor,
+		centerColor,
+		stemColor,
+		variant = 'purple',
+		animate = true
+	}: Props = $props();
+
+	// Crocus color variants - early spring bloomers
+	const variantColors = {
+		purple: wildflowers.crocus,
+		yellow: wildflowers.buttercup,
+		white: '#fafafa'
+	};
+
+	const petals = $derived(petalColor ?? variantColors[variant]);
+	const center = $derived(centerColor ?? '#f97316');  // Orange stamen
+	const stem = $derived(stemColor ?? greens.deepGreen);
+
+	// Slightly different shade for depth
+	const petalDark = $derived(variant === 'purple' ? '#7c3aed' :
+		variant === 'yellow' ? '#eab308' :
+		'#e5e5e5');
+</script>
+
+<!-- Crocus - first flowers of spring, often peeking through snow -->
+<svg class="{className} {animate ? 'emerge' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60" style={style}>
+	<!-- Stem - short, crocus blooms close to ground -->
+	<path fill="none" stroke={stem} stroke-width="2" d="M20 60 Q19 50 20 42" />
+
+	<!-- Grass-like leaves -->
+	<path fill={stem} d="M20 58 Q14 50 12 55 Q16 48 20 52" />
+	<path fill={stem} d="M20 55 Q26 47 28 52 Q24 45 20 50" />
+	<path fill={stem} d="M18 52 Q10 40 8 45 Q14 38 18 45" />
+	<path fill={stem} d="M22 52 Q30 40 32 45 Q26 38 22 45" />
+
+	<!-- Crocus bloom - goblet-shaped with pointed petals -->
+	<!-- Outer petals -->
+	<path fill={petals} d="M10 40 Q8 28 14 15 Q20 8 20 8 Q12 20 10 40" />
+	<path fill={petals} d="M30 40 Q32 28 26 15 Q20 8 20 8 Q28 20 30 40" />
+	<path fill={petals} d="M15 42 Q10 30 18 12 Q20 8 20 8 Q15 18 15 42" />
+	<path fill={petals} d="M25 42 Q30 30 22 12 Q20 8 20 8 Q25 18 25 42" />
+
+	<!-- Inner petals (darker) -->
+	<path fill={petalDark} d="M17 38 Q15 28 19 16 Q20 12 20 12 Q18 22 17 38" opacity="0.6" />
+	<path fill={petalDark} d="M23 38 Q25 28 21 16 Q20 12 20 12 Q22 22 23 38" opacity="0.6" />
+
+	<!-- Center/stamen - distinctive orange -->
+	<ellipse fill={center} cx="20" cy="35" rx="3" ry="4" />
+	<path fill="#ea580c" d="M19 32 L20 25 L21 32" opacity="0.8" />
+</svg>
+
+<style>
+	@keyframes emerge {
+		0%, 100% { transform: translateY(0) scale(1); }
+		50% { transform: translateY(-1px) scale(1.02); }
+	}
+
+	.emerge {
+		transform-origin: center bottom;
+		animation: emerge 4s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/ground/Crocus.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    class?: string;
+    style?: string;
+    petalColor?: string;
+    centerColor?: string;
+    stemColor?: string;
+    variant?: 'purple' | 'yellow' | 'white';
+    animate?: boolean;
+}
+declare const Crocus: import("svelte").Component<Props, {}, "">;
+type Crocus = ReturnType<typeof Crocus>;
+export default Crocus;

package/dist/ui/components/nature/ground/Daffodil.svelte

@@ -0,0 +1,75 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { greens, wildflowers } from '../palette';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		petalColor?: string;
+		trumpetColor?: string;
+		stemColor?: string;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-5 h-8',
+		style,
+		petalColor,
+		trumpetColor,
+		stemColor,
+		animate = true
+	}: Props = $props();
+
+	const petals = $derived(petalColor ?? wildflowers.daffodil);       // Pale yellow petals
+	const trumpet = $derived(trumpetColor ?? wildflowers.buttercup);   // Deeper yellow/orange trumpet
+	const stem = $derived(stemColor ?? greens.deepGreen);
+</script>
+
+<!-- Daffodil - classic spring herald -->
+<svg class="{className} {animate ? 'nod' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 80" style={style}>
+	<!-- Stem - curved like real daffodils -->
+	<path fill="none" stroke={stem} stroke-width="2.5" d="M25 80 Q23 65 25 50 Q28 42 32 38" />
+
+	<!-- Long strap-like leaves -->
+	<path fill={stem} d="M25 78 Q15 65 10 70 Q18 60 25 68" />
+	<path fill={stem} d="M25 72 Q35 58 40 63 Q32 52 25 62" />
+	<path fill={stem} d="M23 65 Q10 50 5 58 Q15 45 23 55" />
+
+	<!-- Flower faces slightly to the side (characteristic daffodil pose) -->
+	<g transform="rotate(-15 32 28)">
+		<!-- Back petals (6 petals in star pattern) -->
+		<ellipse fill={petals} cx="32" cy="18" rx="5" ry="12" />
+		<ellipse fill={petals} cx="32" cy="18" rx="5" ry="12" transform="rotate(60 32 28)" />
+		<ellipse fill={petals} cx="32" cy="18" rx="5" ry="12" transform="rotate(120 32 28)" />
+		<ellipse fill={petals} cx="32" cy="38" rx="5" ry="12" />
+		<ellipse fill={petals} cx="32" cy="38" rx="5" ry="12" transform="rotate(60 32 28)" />
+		<ellipse fill={petals} cx="32" cy="38" rx="5" ry="12" transform="rotate(120 32 28)" />
+
+		<!-- Central trumpet/corona - the distinctive feature -->
+		<ellipse fill={trumpet} cx="32" cy="28" rx="7" ry="8" />
+		<!-- Trumpet rim - ruffled edge effect -->
+		<ellipse fill="none" stroke={trumpet} stroke-width="2" cx="32" cy="24" rx="6" ry="4" opacity="0.8" />
+		<!-- Inner trumpet shadow -->
+		<ellipse fill="#d97706" cx="32" cy="28" rx="4" ry="5" opacity="0.5" />
+
+		<!-- Stamen in center -->
+		<circle fill="#f97316" cx="32" cy="30" r="2" />
+	</g>
+</svg>
+
+<style>
+	@keyframes nod {
+		0%, 100% { transform: rotate(0deg); }
+		25% { transform: rotate(2deg); }
+		75% { transform: rotate(-1deg); }
+	}
+
+	.nod {
+		transform-origin: center bottom;
+		animation: nod 3.5s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/ground/Daffodil.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    class?: string;
+    style?: string;
+    petalColor?: string;
+    trumpetColor?: string;
+    stemColor?: string;
+    animate?: boolean;
+}
+declare const Daffodil: import("svelte").Component<Props, {}, "">;
+type Daffodil = ReturnType<typeof Daffodil>;
+export default Daffodil;

package/dist/ui/components/nature/ground/Fern.svelte

@@ -0,0 +1,72 @@
+<!--
+  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;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		season = 'summer',
+		animate = true
+	}: Props = $props();
+
+	// Ferns turn golden/brown in autumn
+	const defaultColor = $derived(season === 'autumn' ? autumn.gold : greens.deepGreen);
+	const frondColor = $derived(color ?? defaultColor);
+</script>
+
+<!-- Curled fern frond -->
+<svg class="{className} {animate ? 'sway' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 70">
+	<!-- Main stem -->
+	<path
+		fill="none"
+		stroke={frondColor}
+		stroke-width="2"
+		d="M25 70 Q24 50 26 35 Q28 20 35 8"
+	/>
+
+	<!-- Left leaflets -->
+	<path fill={frondColor} d="M24 60 Q15 55 10 58 Q18 52 24 55" />
+	<path fill={frondColor} d="M24 50 Q12 44 6 48 Q16 40 24 45" />
+	<path fill={frondColor} d="M25 40 Q14 32 8 36 Q17 28 25 34" />
+	<path fill={frondColor} d="M27 30 Q18 22 14 26 Q21 18 27 24" />
+	<path fill={frondColor} d="M30 22 Q24 15 22 18 Q27 12 32 16" />
+
+	<!-- Right leaflets -->
+	<path fill={frondColor} d="M26 60 Q35 55 40 58 Q32 52 26 55" />
+	<path fill={frondColor} d="M26 50 Q38 44 44 48 Q34 40 26 45" />
+	<path fill={frondColor} d="M27 40 Q38 32 44 36 Q35 28 27 34" />
+	<path fill={frondColor} d="M29 30 Q38 22 42 26 Q35 18 29 24" />
+	<path fill={frondColor} d="M33 22 Q38 16 40 18 Q36 12 32 16" />
+
+	<!-- Curled tip -->
+	<path
+		fill="none"
+		stroke={frondColor}
+		stroke-width="1.5"
+		d="M35 8 Q42 4 44 8 Q44 12 40 12"
+	/>
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: rotate(0deg); }
+		50% { transform: rotate(2deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 3s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/ground/Fern.svelte.d.ts

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

package/dist/ui/components/nature/ground/FlowerWild.svelte

@@ -0,0 +1,60 @@
+<!--
+  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;
+		petalColor?: string;
+		centerColor?: string;
+		stemColor?: string;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-4 h-6',
+		petalColor,
+		centerColor,
+		stemColor,
+		animate = true
+	}: Props = $props();
+
+	const petals = $derived(petalColor ?? accents.flower.purple);
+	const center = $derived(centerColor ?? accents.flower.yellow);
+	const stem = $derived(stemColor ?? greens.deepGreen);
+</script>
+
+<!-- Simple 5-petal wildflower -->
+<svg class="{className} {animate ? 'sway' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60">
+	<!-- Stem -->
+	<path fill="none" stroke={stem} stroke-width="2" d="M20 60 Q18 45 20 30" />
+
+	<!-- Leaves -->
+	<path fill={stem} d="M20 50 Q12 45 8 48 Q14 42 20 45" />
+	<path fill={stem} d="M20 42 Q28 37 32 40 Q26 34 20 38" />
+
+	<!-- Petals -->
+	<ellipse fill={petals} cx="20" cy="12" rx="6" ry="10" />
+	<ellipse fill={petals} cx="10" cy="20" rx="6" ry="10" transform="rotate(-72 10 20)" />
+	<ellipse fill={petals} cx="30" cy="20" rx="6" ry="10" transform="rotate(72 30 20)" />
+	<ellipse fill={petals} cx="13" cy="28" rx="6" ry="10" transform="rotate(-144 13 28)" />
+	<ellipse fill={petals} cx="27" cy="28" rx="6" ry="10" transform="rotate(144 27 28)" />
+
+	<!-- Center -->
+	<circle fill={center} cx="20" cy="22" r="5" />
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: rotate(0deg); }
+		50% { transform: rotate(3deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 2.8s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/ground/FlowerWild.svelte.d.ts

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