@autumnsgrove/groveengine 0.7.0 → 0.8.0

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, spring } 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: spring.crocus,
+		yellow: spring.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, spring } 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 ?? spring.daffodil);       // Pale yellow petals
+	const trumpet = $derived(trumpetColor ?? spring.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;

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

@@ -0,0 +1,49 @@
+<!--
+  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-4 h-4',
+		color,
+		season = 'summer',
+		animate = true
+	}: Props = $props();
+
+	// Grass turns golden/straw in autumn
+	const defaultColor = $derived(season === 'autumn' ? autumn.straw : greens.meadow);
+	const grassColor = $derived(color ?? defaultColor);
+</script>
+
+<!-- Cluster of grass blades -->
+<svg class="{className} {animate ? 'sway' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 50">
+	<!-- Grass blades - varying heights and angles -->
+	<path fill={grassColor} d="M20 50 L18 50 Q16 30 12 10 Q14 8 16 10 Q19 28 20 50" />
+	<path fill={grassColor} d="M22 50 L24 50 Q26 25 30 5 Q28 3 26 5 Q23 22 22 50" />
+	<path fill={grassColor} d="M18 50 L16 50 Q10 35 4 20 Q6 18 8 20 Q14 32 18 50" />
+	<path fill={grassColor} d="M24 50 L26 50 Q32 30 38 15 Q36 13 34 15 Q28 28 24 50" />
+	<path fill={grassColor} d="M20 50 L22 50 Q22 35 24 18 Q22 16 20 18 Q20 32 20 50" />
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: skewX(0deg); }
+		50% { transform: skewX(2deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 2.5s ease-in-out infinite;
+	}
+</style>

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

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

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

@@ -0,0 +1,42 @@
+<!--
+  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;
+		barkColor?: string;
+	}
+
+	let {
+		class: className = 'w-12 h-4',
+		barkColor
+	}: Props = $props();
+
+	const barkFill = $derived(barkColor ?? bark.warmBark);
+	const innerColor = earth.sand;
+	const ringColor = bark.bark;
+</script>
+
+<!-- Fallen log -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 35">
+	<!-- Main log body -->
+	<path fill={barkFill} d="M15 8 L85 5 Q95 10 95 20 Q95 30 85 32 L15 30 Q5 25 5 18 Q5 12 15 8" />
+
+	<!-- Log end (cut face) -->
+	<ellipse fill={innerColor} cx="90" cy="18" rx="8" ry="14" />
+	<ellipse fill="none" stroke={ringColor} stroke-width="1" cx="90" cy="18" rx="5" ry="10" opacity="0.5" />
+	<ellipse fill="none" stroke={ringColor} stroke-width="0.5" cx="90" cy="18" rx="2" ry="5" opacity="0.4" />
+
+	<!-- Bark texture -->
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M20 10 Q22 18 20 28" opacity="0.3" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M40 8 Q42 18 40 30" opacity="0.3" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M60 6 Q62 17 60 31" opacity="0.3" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M75 6 Q77 17 75 31" opacity="0.3" />
+
+	<!-- Highlight -->
+	<path fill={earth.clay} d="M20 10 Q50 6 80 7 Q50 12 20 14" opacity="0.2" />
+</svg>

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

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

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

@@ -0,0 +1,48 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents, earth } from '../palette';
+
+	interface Props {
+		class?: string;
+		capColor?: string;
+		stemColor?: string;
+		spotted?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		capColor,
+		stemColor,
+		spotted = true
+	}: Props = $props();
+
+	const cap = $derived(capColor ?? accents.mushroom.redCap);
+	const stem = $derived(stemColor ?? earth.sand);
+	const spots = accents.mushroom.spots;
+</script>
+
+<!-- Classic toadstool mushroom -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 70">
+	<!-- Stem -->
+	<path fill={stem} d="M22 40 Q20 55 18 70 L42 70 Q40 55 38 40 Q30 38 22 40" />
+
+	<!-- Cap -->
+	<ellipse fill={cap} cx="30" cy="28" rx="28" ry="20" />
+	<ellipse fill={cap} cx="30" cy="38" rx="20" ry="6" />
+
+	<!-- Spots -->
+	{#if spotted}
+		<circle fill={spots} cx="20" cy="22" r="4" />
+		<circle fill={spots} cx="38" cy="18" r="5" />
+		<circle fill={spots} cx="30" cy="30" r="3" />
+		<circle fill={spots} cx="44" cy="28" r="3" />
+		<circle fill={spots} cx="14" cy="32" r="2.5" />
+	{/if}
+
+	<!-- Cap underside hint -->
+	<ellipse fill={accents.mushroom.gill} cx="30" cy="40" rx="14" ry="3" opacity="0.6" />
+</svg>

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

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

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

@@ -0,0 +1,41 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents, earth } from '../palette';
+
+	interface Props {
+		class?: string;
+		capColor?: string;
+		stemColor?: string;
+	}
+
+	let {
+		class: className = 'w-8 h-8',
+		capColor,
+		stemColor
+	}: Props = $props();
+
+	const cap = $derived(capColor ?? accents.mushroom.brownCap);
+	const stem = $derived(stemColor ?? earth.sand);
+</script>
+
+<!-- Cluster of small mushrooms -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 60">
+	<!-- Large mushroom (center) -->
+	<path fill={stem} d="M36 32 Q34 45 33 60 L47 60 Q46 45 44 32 Q40 30 36 32" />
+	<ellipse fill={cap} cx="40" cy="24" rx="18" ry="14" />
+	<ellipse fill={cap} cx="40" cy="32" rx="12" ry="4" />
+
+	<!-- Small mushroom (left) -->
+	<path fill={stem} d="M12 42 Q11 50 10 60 L22 60 Q21 50 20 42 Q16 40 12 42" />
+	<ellipse fill={cap} cx="16" cy="36" rx="12" ry="10" />
+	<ellipse fill={cap} cx="16" cy="42" rx="8" ry="3" />
+
+	<!-- Tiny mushroom (right) -->
+	<path fill={stem} d="M60 48 Q59 54 58 60 L68 60 Q67 54 66 48 Q63 46 60 48" />
+	<ellipse fill={cap} cx="63" cy="43" rx="9" ry="7" />
+	<ellipse fill={cap} cx="63" cy="48" rx="6" ry="2" />
+</svg>

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

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