@autumnsgrove/groveengine 0.7.0 → 0.8.5

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

@@ -0,0 +1,95 @@
+<!--
+  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;
+		maskColor?: string;
+		beakColor?: string;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		style,
+		bodyColor,
+		maskColor,
+		beakColor,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	// Northern Cardinal colors (male) - from palette
+	const body = $derived(bodyColor ?? accents.bird.cardinalRed);
+	const mask = $derived(maskColor ?? accents.bird.cardinalMask);
+	const beak = $derived(beakColor ?? accents.bird.cardinalBeak);
+	const legColor = $derived(bark.darkBark);
+
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Northern Cardinal - perched, with distinctive crest -->
+<svg
+	class="{className} {animate ? 'bob' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 50 60"
+	style="transform: scaleX({scaleX}); {style ?? ''}"
+>
+	<!-- Tail feathers - long and red -->
+	<path fill={body} d="M5 35 Q0 40 2 50 Q8 48 12 42 Q14 38 10 34 Q7 33 5 35" />
+	<path fill="#b91c1c" d="M6 36 Q3 42 4 48 Q8 46 10 42" opacity="0.6" />
+
+	<!-- Body - bright red -->
+	<ellipse fill={body} cx="22" cy="32" rx="14" ry="12" />
+
+	<!-- Wing - slightly darker red with feather details -->
+	<path fill="#b91c1c" d="M10 28 Q6 34 9 42 Q16 40 20 34 Q18 27 10 28" />
+	<path fill="#991b1b" d="M12 32 Q10 36 12 40 Q15 38 16 35 Q14 32 12 32" opacity="0.5" />
+
+	<!-- Breast - lighter red highlight -->
+	<ellipse fill="#ef4444" cx="30" cy="35" rx="8" ry="9" opacity="0.7" />
+
+	<!-- Head - red with crest -->
+	<circle fill={body} cx="36" cy="20" r="10" />
+
+	<!-- Distinctive crest (pointed tuft) -->
+	<path fill={body} d="M32 12 Q36 5 38 8 Q40 10 38 14 Q35 13 32 12" />
+	<path fill="#ef4444" d="M34 10 Q36 6 37 9" opacity="0.5" />
+
+	<!-- Black mask - surrounds eye and covers throat -->
+	<path fill={mask} d="M38 16 Q44 14 46 18 Q46 22 44 24 Q40 26 36 26 Q32 24 32 20 Q34 16 38 16" />
+
+	<!-- Eye - visible within mask -->
+	<circle fill="#1a1a1a" cx="40" cy="19" r="2.5" />
+	<!-- Eye highlight -->
+	<circle fill="white" cx="41" cy="18" r="0.8" />
+
+	<!-- Beak - thick orange-red cone shape (cardinal signature) -->
+	<path fill={beak} d="M44 20 L52 21 L44 24 Q43 22 44 20" />
+	<!-- Beak curve detail -->
+	<path fill="#ea580c" d="M45 21 Q48 21 50 21.5" stroke="#c2410c" stroke-width="0.3" />
+
+	<!-- Legs - dark -->
+	<g fill="none" stroke={legColor} stroke-width="1.5">
+		<path d="M20 44 L20 54 M18 52 L22 52" />
+		<path d="M26 44 L26 54 M24 52 L28 52" />
+	</g>
+</svg>
+
+<style>
+	@keyframes bob {
+		0%, 100% { transform: translateY(0); }
+		50% { transform: translateY(-1.5px); }
+	}
+
+	.bob {
+		animation: bob 2.5s ease-in-out infinite;
+	}
+</style>

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

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

package/dist/ui/components/nature/creatures/Chickadee.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, accents } from '../palette';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		capColor?: string;
+		cheekColor?: string;
+		bodyColor?: string;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		style,
+		capColor,
+		cheekColor,
+		bodyColor,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	// Black-capped Chickadee colors - from palette
+	const cap = $derived(capColor ?? accents.bird.chickadeeCap);
+	const cheek = $derived(cheekColor ?? accents.bird.chickadeeCheek);
+	const body = $derived(bodyColor ?? accents.bird.chickadeeBody);
+	const belly = $derived(accents.bird.chickadeeBelly);
+	const beak = $derived(accents.bird.chickadeeCap); // Same black as cap
+	const legColor = $derived(bark.darkBark);
+
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Black-capped Chickadee - small, round, perched -->
+<svg
+	class="{className} {animate ? 'bob' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 45 50"
+	style="transform: scaleX({scaleX}); {style ?? ''}"
+>
+	<!-- Tail - short gray -->
+	<path fill={body} d="M5 28 Q2 32 4 38 Q10 36 12 30 Q9 27 5 28" />
+
+	<!-- Body - round gray back -->
+	<ellipse fill={body} cx="20" cy="28" rx="12" ry="10" />
+
+	<!-- Wing detail -->
+	<path fill="#4b5563" d="M10 25 Q7 30 10 35 Q15 33 17 28 Q14 24 10 25" opacity="0.8" />
+	<!-- Wing bars (subtle white edges) -->
+	<path fill="white" d="M9 30 Q12 29 14 30" opacity="0.4" stroke="white" stroke-width="0.5" />
+
+	<!-- Buff belly -->
+	<ellipse fill={belly} cx="26" cy="32" rx="7" ry="8" />
+
+	<!-- Head - round -->
+	<circle fill={body} cx="30" cy="18" r="9" />
+
+	<!-- Black cap (covers top of head) -->
+	<path fill={cap} d="M22 14 Q26 8 34 10 Q38 12 38 16 Q36 14 30 14 Q24 14 22 14" />
+
+	<!-- White cheek patch (signature chickadee feature) -->
+	<ellipse fill={cheek} cx="32" cy="18" rx="5" ry="4" />
+
+	<!-- Black bib under beak -->
+	<path fill={cap} d="M28 22 Q32 21 35 22 Q34 26 31 27 Q28 26 28 22" />
+
+	<!-- Eye - small and dark -->
+	<circle fill="#1a1a1a" cx="33" cy="16" r="1.5" />
+	<!-- Eye highlight -->
+	<circle fill="white" cx="33.5" cy="15.5" r="0.5" />
+
+	<!-- Beak - tiny and black -->
+	<path fill={beak} d="M38 17 L42 18 L38 19 Z" />
+
+	<!-- Legs - thin and dark -->
+	<g fill="none" stroke={legColor} stroke-width="1.2">
+		<path d="M17 38 L17 46 M15 44 L19 44" />
+		<path d="M23 38 L23 46 M21 44 L25 44" />
+	</g>
+</svg>
+
+<style>
+	@keyframes bob {
+		0%, 100% { transform: translateY(0); }
+		50% { transform: translateY(-1px); }
+	}
+
+	.bob {
+		animation: bob 1.8s ease-in-out infinite;
+	}
+</style>

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

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

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

@@ -0,0 +1,95 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { earth, bark, natural } from '../palette';
+
+	interface Props {
+		class?: string;
+		furColor?: string;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-12 h-12',
+		furColor,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	const fur = $derived(furColor ?? earth.clay);
+	const darkFur = $derived(bark.bark);
+	const lightFur = $derived(natural.cream);
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Standing deer -->
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 80 100"
+	style="transform: scaleX({scaleX})"
+>
+	<!-- Back legs -->
+	<path fill={fur} d="M20 65 L18 95 L24 95 L26 70 Q23 67 20 65" />
+	<path fill={fur} d="M30 68 L28 95 L34 95 L36 72 Q33 69 30 68" />
+
+	<!-- Body -->
+	<ellipse fill={fur} cx="35" cy="55" rx="22" ry="16" />
+
+	<!-- Front legs -->
+	<path fill={fur} d="M48 65 L46 95 L52 95 L54 68 Q51 65 48 65" />
+	<path fill={fur} d="M55 62 L55 95 L61 95 L61 65 Q58 62 55 62" />
+
+	<!-- Chest -->
+	<ellipse fill={lightFur} cx="52" cy="58" rx="8" ry="10" opacity="0.6" />
+
+	<!-- Neck -->
+	<path fill={fur} d="M50 50 Q55 35 52 25 Q60 30 65 45 Q58 52 50 50" />
+
+	<!-- Head -->
+	<ellipse fill={fur} cx="52" cy="22" rx="12" ry="10" />
+
+	<!-- Snout -->
+	<ellipse fill={darkFur} cx="62" cy="25" rx="6" ry="5" />
+	<ellipse fill="#1a1a1a" cx="66" cy="24" rx="1.5" ry="1" />
+
+	<!-- Ears -->
+	<g class={animate ? 'ear-flick' : ''}>
+		<ellipse fill={fur} cx="45" cy="12" rx="5" ry="8" transform="rotate(-30 45 12)" />
+		<ellipse fill={lightFur} cx="45" cy="12" rx="2.5" ry="5" transform="rotate(-30 45 12)" />
+	</g>
+	<ellipse fill={fur} cx="55" cy="10" rx="5" ry="8" transform="rotate(10 55 10)" />
+	<ellipse fill={lightFur} cx="55" cy="10" rx="2.5" ry="5" transform="rotate(10 55 10)" />
+
+	<!-- Eye -->
+	<circle fill="#1a1a1a" cx="55" cy="20" r="2" />
+	<circle fill="white" cx="55.5" cy="19.5" r="0.8" />
+
+	<!-- Spots (fawn pattern) -->
+	<circle fill={lightFur} cx="25" cy="52" r="2" opacity="0.4" />
+	<circle fill={lightFur} cx="32" cy="48" r="1.5" opacity="0.4" />
+	<circle fill={lightFur} cx="40" cy="55" r="2" opacity="0.4" />
+	<circle fill={lightFur} cx="35" cy="60" r="1.5" opacity="0.4" />
+
+	<!-- Tail -->
+	<ellipse fill={fur} cx="13" cy="52" rx="4" ry="6" />
+	<ellipse fill={lightFur} cx="12" cy="53" rx="2" ry="4" />
+</svg>
+
+<style>
+	@keyframes ear-flick {
+		0%, 85%, 100% { transform: rotate(-30deg); }
+		88% { transform: rotate(-20deg); }
+		91% { transform: rotate(-35deg); }
+		94% { transform: rotate(-28deg); }
+	}
+
+	.ear-flick {
+		transform-origin: center bottom;
+		animation: ear-flick 5s ease-in-out infinite;
+	}
+</style>

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

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

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

@@ -0,0 +1,111 @@
+<!--
+  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;
+		glowColor?: string;
+		bodyColor?: string;
+		animate?: boolean;
+		intensity?: 'subtle' | 'normal' | 'bright';
+	}
+
+	let {
+		class: className = 'w-3 h-3',
+		glowColor,
+		bodyColor,
+		animate = true,
+		intensity = 'normal'
+	}: Props = $props();
+
+	const glow = $derived(glowColor ?? accents.firefly.glow);
+	const body = $derived(bodyColor ?? accents.firefly.body);
+
+	const glowOpacity = $derived({
+		subtle: 0.4,
+		normal: 0.6,
+		bright: 0.8
+	}[intensity]);
+</script>
+
+<!-- Firefly with glowing abdomen -->
+<svg class="{className} {animate ? 'float' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+	<!-- Outer glow -->
+	<circle
+		fill={glow}
+		cx="15"
+		cy="18"
+		r="12"
+		opacity={glowOpacity}
+		class={animate ? 'pulse' : ''}
+	/>
+
+	<!-- Inner glow -->
+	<circle
+		fill={glow}
+		cx="15"
+		cy="18"
+		r="7"
+		opacity={glowOpacity + 0.2}
+		class={animate ? 'pulse-inner' : ''}
+	/>
+
+	<!-- Body -->
+	<ellipse fill={body} cx="15" cy="12" rx="3" ry="4" />
+
+	<!-- Glowing abdomen -->
+	<ellipse fill={glow} cx="15" cy="18" rx="4" ry="5" class={animate ? 'glow' : ''} />
+
+	<!-- Wings (subtle) -->
+	<ellipse fill={greens.pale} cx="11" cy="10" rx="4" ry="2" opacity="0.3" transform="rotate(-20 11 10)" />
+	<ellipse fill={greens.pale} cx="19" cy="10" rx="4" ry="2" opacity="0.3" transform="rotate(20 19 10)" />
+
+	<!-- Antennae -->
+	<path fill="none" stroke={body} stroke-width="0.5" d="M13 8 Q11 4 10 3" />
+	<path fill="none" stroke={body} stroke-width="0.5" d="M17 8 Q19 4 20 3" />
+</svg>
+
+<style>
+	@keyframes float {
+		0%, 100% { transform: translateY(0) translateX(0); }
+		25% { transform: translateY(-3px) translateX(2px); }
+		50% { transform: translateY(-1px) translateX(-1px); }
+		75% { transform: translateY(-4px) translateX(1px); }
+	}
+
+	@keyframes pulse {
+		0%, 100% { opacity: 0.4; }
+		50% { opacity: 0.7; }
+	}
+
+	@keyframes pulse-inner {
+		0%, 100% { opacity: 0.6; }
+		50% { opacity: 0.9; }
+	}
+
+	@keyframes glow {
+		0%, 100% { filter: brightness(1); }
+		50% { filter: brightness(1.3); }
+	}
+
+	.float {
+		animation: float 4s ease-in-out infinite;
+	}
+
+	.pulse {
+		animation: pulse 2s ease-in-out infinite;
+	}
+
+	.pulse-inner {
+		animation: pulse-inner 2s ease-in-out infinite;
+		animation-delay: 0.2s;
+	}
+
+	.glow {
+		animation: glow 2s ease-in-out infinite;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string;
+    glowColor?: string;
+    bodyColor?: string;
+    animate?: boolean;
+    intensity?: 'subtle' | 'normal' | 'bright';
+}
+declare const Firefly: import("svelte").Component<Props, {}, "">;
+type Firefly = ReturnType<typeof Firefly>;
+export default Firefly;

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

@@ -0,0 +1,91 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark, earth, accents } from '../palette';
+
+	interface Props {
+		class?: string;
+		featherColor?: string;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-8 h-10',
+		featherColor,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	const feathers = $derived(featherColor ?? bark.bark);
+	const lightFeathers = $derived(earth.clay);
+	const eyeColor = $derived(accents.flower.yellow);
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Perched owl -->
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 50 70"
+	style="transform: scaleX({scaleX})"
+>
+	<!-- Body -->
+	<ellipse fill={feathers} cx="25" cy="45" rx="18" ry="20" />
+
+	<!-- Chest pattern -->
+	<ellipse fill={lightFeathers} cx="25" cy="48" rx="12" ry="15" />
+	<!-- Chest feather lines -->
+	<path fill="none" stroke={feathers} stroke-width="0.5" d="M18 40 Q25 42 32 40" opacity="0.5" />
+	<path fill="none" stroke={feathers} stroke-width="0.5" d="M16 46 Q25 48 34 46" opacity="0.5" />
+	<path fill="none" stroke={feathers} stroke-width="0.5" d="M17 52 Q25 54 33 52" opacity="0.5" />
+	<path fill="none" stroke={feathers} stroke-width="0.5" d="M18 58 Q25 60 32 58" opacity="0.5" />
+
+	<!-- Head -->
+	<circle fill={feathers} cx="25" cy="20" r="16" />
+
+	<!-- Ear tufts -->
+	<path fill={feathers} d="M12 10 Q8 2 12 0 Q14 5 16 10" />
+	<path fill={feathers} d="M38 10 Q42 2 38 0 Q36 5 34 10" />
+
+	<!-- Facial disc -->
+	<circle fill={lightFeathers} cx="25" cy="22" r="12" />
+
+	<!-- Eyes -->
+	<g class={animate ? 'blink' : ''}>
+		<circle fill={eyeColor} cx="18" cy="20" r="5" />
+		<circle fill="#1a1a1a" cx="18" cy="20" r="3" />
+		<circle fill="white" cx="19" cy="19" r="1" />
+
+		<circle fill={eyeColor} cx="32" cy="20" r="5" />
+		<circle fill="#1a1a1a" cx="32" cy="20" r="3" />
+		<circle fill="white" cx="33" cy="19" r="1" />
+	</g>
+
+	<!-- Beak -->
+	<path fill={bark.warmBark} d="M25 24 L22 28 L25 32 L28 28 Z" />
+
+	<!-- Feet -->
+	<path fill={bark.warmBark} d="M18 64 L15 70 M18 64 L18 70 M18 64 L21 70" stroke={bark.warmBark} stroke-width="1.5" />
+	<path fill={bark.warmBark} d="M32 64 L29 70 M32 64 L32 70 M32 64 L35 70" stroke={bark.warmBark} stroke-width="1.5" />
+
+	<!-- Wing hints -->
+	<path fill={feathers} d="M8 35 Q5 45 8 55 Q12 50 12 40 Q10 35 8 35" opacity="0.7" />
+	<path fill={feathers} d="M42 35 Q45 45 42 55 Q38 50 38 40 Q40 35 42 35" opacity="0.7" />
+</svg>
+
+<style>
+	@keyframes blink {
+		0%, 94%, 100% { transform: scaleY(1); }
+		96% { transform: scaleY(0.1); }
+		98% { transform: scaleY(1); }
+	}
+
+	.blink {
+		transform-origin: center center;
+		animation: blink 4s ease-in-out infinite;
+	}
+</style>

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

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

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

@@ -0,0 +1,90 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { earth, natural } 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 ?? earth.clay);
+	const innerEar = $derived(natural.cream);
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Sitting rabbit -->
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 50 60"
+	style="transform: scaleX({scaleX})"
+>
+	<!-- Back leg -->
+	<ellipse fill={fur} cx="15" cy="50" rx="10" ry="8" />
+
+	<!-- Body -->
+	<ellipse fill={fur} cx="22" cy="42" rx="14" ry="12" />
+
+	<!-- Front leg -->
+	<ellipse fill={fur} cx="32" cy="52" rx="5" ry="7" />
+
+	<!-- Head -->
+	<circle fill={fur} cx="35" cy="28" r="12" />
+
+	<!-- Ears -->
+	<g class={animate ? 'ear-twitch' : ''}>
+		<ellipse fill={fur} cx="30" cy="10" rx="4" ry="12" />
+		<ellipse fill={innerEar} cx="30" cy="10" rx="2" ry="8" />
+	</g>
+	<g class={animate ? 'ear-twitch-delay' : ''}>
+		<ellipse fill={fur} cx="40" cy="8" rx="4" ry="12" transform="rotate(15 40 8)" />
+		<ellipse fill={innerEar} cx="40" cy="8" rx="2" ry="8" transform="rotate(15 40 8)" />
+	</g>
+
+	<!-- Eye -->
+	<circle fill="#1a1a1a" cx="40" cy="26" r="2.5" />
+	<circle fill="white" cx="41" cy="25" r="1" />
+
+	<!-- Nose -->
+	<ellipse fill={innerEar} cx="46" cy="30" rx="2" ry="1.5" />
+
+	<!-- Whiskers -->
+	<path fill="none" stroke={earth.stone} stroke-width="0.5" d="M46 30 L54 28" opacity="0.5" />
+	<path fill="none" stroke={earth.stone} stroke-width="0.5" d="M46 31 L54 31" opacity="0.5" />
+	<path fill="none" stroke={earth.stone} stroke-width="0.5" d="M46 32 L54 34" opacity="0.5" />
+
+	<!-- Tail -->
+	<circle fill={natural.cream} cx="8" cy="40" r="5" />
+</svg>
+
+<style>
+	@keyframes ear-twitch {
+		0%, 90%, 100% { transform: rotate(0deg); }
+		93% { transform: rotate(-5deg); }
+		96% { transform: rotate(3deg); }
+	}
+
+	.ear-twitch {
+		transform-origin: center bottom;
+		animation: ear-twitch 4s ease-in-out infinite;
+	}
+
+	.ear-twitch-delay {
+		transform-origin: center bottom;
+		animation: ear-twitch 4s ease-in-out infinite;
+		animation-delay: 0.1s;
+	}
+</style>

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

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