@autumnsgrove/groveengine 0.7.0 → 0.8.0

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

@@ -0,0 +1,94 @@
+<!--
+  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;
+		bodyColor?: string;
+		breastColor?: string;
+		beakColor?: string;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		bodyColor,
+		breastColor,
+		beakColor,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	// American Robin colors - from palette
+	const body = $derived(bodyColor ?? accents.bird.robinBody);
+	const breast = $derived(breastColor ?? accents.bird.robinBreast);
+	const beak = $derived(beakColor ?? accents.bird.robinBeak);
+	const legColor = $derived(bark.darkBark);
+
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- American Robin - perched -->
+<svg
+	class="{className} {animate ? 'bob' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 50 55"
+	style="transform: scaleX({scaleX})"
+>
+	<!-- Tail feathers - dark -->
+	<path fill={body} d="M2 30 Q0 34 3 40 Q10 38 14 32 Q8 30 2 30" />
+
+	<!-- Body - dark gray back -->
+	<ellipse fill={body} cx="22" cy="30" rx="14" ry="11" />
+
+	<!-- Wing detail - slightly darker -->
+	<path fill="#3a3a3a" d="M12 26 Q8 32 11 38 Q18 36 22 30 Q17 25 12 26" opacity="0.8" />
+
+	<!-- Orange-red breast - signature robin color -->
+	<ellipse fill={breast} cx="30" cy="33" rx="9" ry="10" />
+	<!-- Breast highlight -->
+	<ellipse fill={breast} cx="31" cy="31" rx="6" ry="6" opacity="0.9" />
+
+	<!-- White lower belly -->
+	<ellipse fill="#f5f5f5" cx="30" cy="42" rx="5" ry="3" opacity="0.8" />
+
+	<!-- Head - dark gray -->
+	<circle fill={body} cx="36" cy="20" r="10" />
+
+	<!-- White eye-ring (robin signature) -->
+	<circle fill="white" cx="40" cy="18" r="3.5" />
+	<!-- Eye -->
+	<circle fill="#1a1a1a" cx="40" cy="18" r="2" />
+	<!-- Eye highlight -->
+	<circle fill="white" cx="41" cy="17" r="0.7" />
+
+	<!-- White crescent below eye -->
+	<path fill="white" d="M38 22 Q40 23 42 22 Q41 24 39 24 Q38 23 38 22" opacity="0.6" />
+
+	<!-- Beak - yellow-orange -->
+	<path fill={beak} d="M45 20 L52 22 L45 24 Z" />
+	<!-- Beak detail line -->
+	<line x1="45" y1="22" x2="50" y2="22" stroke="#b45309" stroke-width="0.5" />
+
+	<!-- Legs - dark -->
+	<g fill="none" stroke={legColor} stroke-width="1.5">
+		<path d="M22 41 L22 50 M20 48 L24 48" />
+		<path d="M28 41 L28 50 M26 48 L30 48" />
+	</g>
+</svg>
+
+<style>
+	@keyframes bob {
+		0%, 100% { transform: translateY(0); }
+		50% { transform: translateY(-1.5px); }
+	}
+
+	.bob {
+		animation: bob 2s ease-in-out infinite;
+	}
+</style>

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

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

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

@@ -0,0 +1,83 @@
+<!--
+  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;
+		animate?: boolean;
+		facing?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-6 h-4',
+		color,
+		animate = true,
+		facing = 'right'
+	}: Props = $props();
+
+	const birdColor = $derived(color ?? bark.bark);
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Bird in flight - simple silhouette -->
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 60 30"
+	style="transform: scaleX({scaleX})"
+>
+	<!-- Wings and body as single flowing shape -->
+	<g class={animate ? 'fly' : ''}>
+		<!-- Left wing -->
+		<path
+			fill={birdColor}
+			d="M30 15 Q20 5 5 8 Q15 12 25 15"
+			class={animate ? 'wing-up' : ''}
+		/>
+
+		<!-- Right wing -->
+		<path
+			fill={birdColor}
+			d="M30 15 Q40 5 55 8 Q45 12 35 15"
+			class={animate ? 'wing-up' : ''}
+		/>
+
+		<!-- Body -->
+		<ellipse fill={birdColor} cx="30" cy="15" rx="8" ry="5" />
+
+		<!-- Head -->
+		<circle fill={birdColor} cx="40" cy="14" r="4" />
+
+		<!-- Beak -->
+		<path fill={birdColor} d="M44 14 L50 15 L44 16 Z" />
+
+		<!-- Tail -->
+		<path fill={birdColor} d="M22 15 Q15 12 10 15 Q15 18 22 15" />
+	</g>
+</svg>
+
+<style>
+	@keyframes fly {
+		0%, 100% { transform: translateY(0); }
+		50% { transform: translateY(-3px); }
+	}
+
+	@keyframes flap {
+		0%, 100% { transform: rotate(0deg) scaleY(1); }
+		50% { transform: rotate(-10deg) scaleY(0.8); }
+	}
+
+	.fly {
+		animation: fly 0.8s ease-in-out infinite;
+	}
+
+	.wing-up {
+		transform-origin: center bottom;
+		animation: flap 0.3s ease-in-out infinite;
+	}
+</style>

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

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

package/dist/ui/components/nature/creatures/Bluebird.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;
+		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();
+
+	// Eastern Bluebird colors - from palette
+	const body = $derived(bodyColor ?? accents.bird.bluebirdBody);
+	const wing = $derived(accents.bird.bluebirdWing);
+	const breast = $derived(breastColor ?? accents.bird.bluebirdBreast);
+	const belly = $derived(accents.bird.chickadeeBelly);  // Cream/white (shared with chickadee)
+	const beak = $derived(beakColor ?? '#1a1a1a');
+	const legColor = $derived(bark.darkBark);
+
+	const scaleX = $derived(facing === 'left' ? -1 : 1);
+</script>
+
+<!-- Eastern Bluebird - symbol of happiness and spring! -->
+<svg
+	class="{className} {animate ? 'flutter' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 50 55"
+	style="transform: scaleX({scaleX}); {style ?? ''}"
+>
+	<!-- Tail feathers - bright blue -->
+	<path fill={body} d="M6 30 Q3 36 5 44 Q11 42 15 36 Q16 32 12 29 Q8 28 6 30" />
+	<path fill={wing} d="M7 32 Q5 38 6 42 Q10 40 12 36" opacity="0.6" />
+
+	<!-- Body - blue upper -->
+	<ellipse fill={body} cx="22" cy="28" rx="13" ry="10" />
+
+	<!-- Wing - darker blue with detail -->
+	<path fill={wing} d="M10 24 Q6 30 9 38 Q16 36 19 30 Q17 23 10 24" />
+	<path fill="#1d4ed8" d="M12 28 Q10 32 12 36 Q15 34 16 31 Q14 28 12 28" opacity="0.5" />
+
+	<!-- Breast - rusty orange -->
+	<ellipse fill={breast} cx="28" cy="30" rx="7" ry="8" />
+	<!-- Breast highlight -->
+	<ellipse fill="#f97316" cx="30" cy="28" rx="4" ry="5" opacity="0.4" />
+
+	<!-- Belly - cream/white -->
+	<ellipse fill={belly} cx="28" cy="38" rx="5" ry="4" />
+
+	<!-- Head - bright blue -->
+	<circle fill={body} cx="35" cy="16" r="8" />
+
+	<!-- Eye -->
+	<circle fill="#1a1a1a" cx="38" cy="15" r="2" />
+	<!-- Eye highlight -->
+	<circle fill="white" cx="39" cy="14" r="0.6" />
+
+	<!-- Beak - small and dark -->
+	<path fill={beak} d="M42 16 L48 17 L42 19 Q41 17.5 42 16" />
+
+	<!-- Legs -->
+	<g fill="none" stroke={legColor} stroke-width="1.2">
+		<path d="M22 38 L22 48 M20 46 L24 46" />
+		<path d="M27 38 L27 48 M25 46 L29 46" />
+	</g>
+</svg>
+
+<style>
+	@keyframes flutter {
+		0%, 100% { transform: translateY(0) rotate(0deg); }
+		25% { transform: translateY(-2px) rotate(1deg); }
+		50% { transform: translateY(0) rotate(0deg); }
+		75% { transform: translateY(-1px) rotate(-1deg); }
+	}
+
+	.flutter {
+		animation: flutter 2s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/creatures/Bluebird.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 Bluebird: import("svelte").Component<Props, {}, "">;
+type Bluebird = ReturnType<typeof Bluebird>;
+export default Bluebird;

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

@@ -0,0 +1,87 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents, bark } from '../palette';
+
+	interface Props {
+		class?: string;
+		wingColor?: string;
+		accentColor?: string;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		wingColor,
+		accentColor,
+		animate = true
+	}: Props = $props();
+
+	const wing = $derived(wingColor ?? accents.flower.purple);
+	const accent = $derived(accentColor ?? accents.flower.yellow);
+	const bodyColor = $derived(bark.darkBark);
+</script>
+
+<!-- Butterfly with flapping wings -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40">
+	<!-- Left wings -->
+	<g class={animate ? 'wing-left' : ''}>
+		<!-- Upper wing -->
+		<ellipse fill={wing} cx="12" cy="15" rx="12" ry="10" />
+		<circle fill={accent} cx="10" cy="13" r="3" opacity="0.7" />
+		<circle fill={accent} cx="16" cy="17" r="2" opacity="0.5" />
+
+		<!-- Lower wing -->
+		<ellipse fill={wing} cx="14" cy="30" rx="10" ry="8" />
+		<circle fill={accent} cx="12" cy="28" r="2" opacity="0.6" />
+	</g>
+
+	<!-- Right wings -->
+	<g class={animate ? 'wing-right' : ''}>
+		<!-- Upper wing -->
+		<ellipse fill={wing} cx="38" cy="15" rx="12" ry="10" />
+		<circle fill={accent} cx="40" cy="13" r="3" opacity="0.7" />
+		<circle fill={accent} cx="34" cy="17" r="2" opacity="0.5" />
+
+		<!-- Lower wing -->
+		<ellipse fill={wing} cx="36" cy="30" rx="10" ry="8" />
+		<circle fill={accent} cx="38" cy="28" r="2" opacity="0.6" />
+	</g>
+
+	<!-- Body -->
+	<ellipse fill={bodyColor} cx="25" cy="20" rx="3" ry="12" />
+
+	<!-- Head -->
+	<circle fill={bodyColor} cx="25" cy="6" r="3" />
+
+	<!-- Antennae -->
+	<path fill="none" stroke={bodyColor} stroke-width="1" d="M23 4 Q20 0 18 2" />
+	<path fill="none" stroke={bodyColor} stroke-width="1" d="M27 4 Q30 0 32 2" />
+	<circle fill={bodyColor} cx="18" cy="2" r="1" />
+	<circle fill={bodyColor} cx="32" cy="2" r="1" />
+</svg>
+
+<style>
+	@keyframes flutter-left {
+		0%, 100% { transform: scaleX(1) rotate(0deg); }
+		50% { transform: scaleX(0.7) rotate(-5deg); }
+	}
+
+	@keyframes flutter-right {
+		0%, 100% { transform: scaleX(1) rotate(0deg); }
+		50% { transform: scaleX(0.7) rotate(5deg); }
+	}
+
+	.wing-left {
+		transform-origin: right center;
+		animation: flutter-left 0.3s ease-in-out infinite;
+	}
+
+	.wing-right {
+		transform-origin: left center;
+		animation: flutter-right 0.3s ease-in-out infinite;
+	}
+</style>

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

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

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;