@autumnsgrove/groveengine 0.7.0 → 0.8.0

package/dist/ui/components/nature/botanical/LeafFalling.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Season } from '../palette';
+type LeafVariant = 'simple' | 'maple' | 'cherry' | 'aspen' | 'pine';
+interface Props {
+    class?: string;
+    color?: string;
+    season?: Season;
+    animate?: boolean;
+    variant?: LeafVariant;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Horizontal drift amount (positive = right, negative = left) */
+    drift?: number;
+    /** Fall distance in vh units (how far the leaf travels) */
+    fallDistance?: number;
+    /** Seed for deterministic color selection */
+    seed?: number;
+}
+declare const LeafFalling: import("svelte").Component<Props, {}, "">;
+type LeafFalling = ReturnType<typeof LeafFalling>;
+export default LeafFalling;

package/dist/ui/components/nature/botanical/PetalFalling.svelte

@@ -0,0 +1,266 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { springBlossoms } from '../palette';
+	import { browser } from '$app/environment';
+
+	type PetalVariant = 'round' | 'pointed' | 'heart' | 'curled' | 'tiny';
+
+	interface Props {
+		class?: string;
+		/** Petal shape variant */
+		variant?: PetalVariant;
+		/** Override petal color (defaults to spring blossom pink) */
+		color?: string;
+		/** Fall animation duration in seconds */
+		duration?: number;
+		/** Animation delay in seconds */
+		delay?: number;
+		/** Horizontal drift amount in pixels (can be negative) */
+		drift?: number;
+		/** Fall distance in vh units */
+		fallDistance?: number;
+		/** Enable falling animation */
+		animate?: boolean;
+		/** Opacity for depth effect */
+		opacity?: number;
+		/** Seed for deterministic rotation patterns */
+		seed?: number;
+	}
+
+	let {
+		class: className = 'w-3 h-3',
+		variant = 'round',
+		color,
+		duration = 12,
+		delay = 0,
+		drift = 0,
+		fallDistance = 100,
+		animate = true,
+		opacity = 0.85,
+		seed = 0
+	}: Props = $props();
+
+	// Use spring blossom colors with slight variation based on variant
+	const petalColor = $derived(color ?? (
+		variant === 'tiny' ? springBlossoms.palePink :
+		variant === 'curled' ? springBlossoms.rose :
+		springBlossoms.blush
+	));
+
+	// Secondary color for gradient effect
+	const highlightColor = $derived(springBlossoms.palePink);
+
+	// Deterministic rotation based on seed - more dramatic for dancing effect
+	const initialRotation = $derived((seed * 37) % 360);
+	const rotationDirection = $derived(seed % 2 === 0 ? 1 : -1);
+	const rotationAmount = $derived(360 + (seed % 360)); // 360-720 degrees total rotation - more twirling!
+
+	// Dancing sway parameters - create organic horizontal movement
+	// Dramatically increased for true gliding, dancing motion!
+	const swayAmplitude = $derived(80 + (seed % 100)); // 80-180px horizontal sway - GLIDE!
+	const swayFrequency = $derived(2 + (seed % 4)); // 2-5 complete waves during fall
+
+	// Unique animation name to prevent conflicts
+	const animId = $derived(`petal-${seed}`);
+
+	// Inject dynamic keyframes at runtime to avoid PostCSS parsing issues
+	$effect(() => {
+		if (!browser || !animate) return;
+
+		const styleId = `petal-style-${seed}`;
+		// Check if already injected
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement('style');
+		style.id = styleId;
+		// Create dancing, swaying motion with sine wave horizontal movement
+		// Opacity fade-in for gentle appearance (0 → target opacity)
+		style.textContent = `
+			@keyframes ${animId}-fall {
+				0% {
+					transform: translateY(0) translateX(0) rotate(${initialRotation}deg);
+					opacity: 0;
+				}
+				8% {
+					opacity: ${opacity};
+				}
+				12.5% {
+					transform: translateY(${fallDistance * 0.125}vh) translateX(${Math.sin(Math.PI * 0.25 * swayFrequency) * swayAmplitude + drift * 0.125}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.125}deg);
+				}
+				25% {
+					transform: translateY(${fallDistance * 0.25}vh) translateX(${Math.sin(Math.PI * 0.5 * swayFrequency) * swayAmplitude + drift * 0.25}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.25}deg);
+				}
+				37.5% {
+					transform: translateY(${fallDistance * 0.375}vh) translateX(${Math.sin(Math.PI * 0.75 * swayFrequency) * swayAmplitude + drift * 0.375}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.375}deg);
+				}
+				50% {
+					transform: translateY(${fallDistance * 0.5}vh) translateX(${Math.sin(Math.PI * swayFrequency) * swayAmplitude + drift * 0.5}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.5}deg);
+				}
+				62.5% {
+					transform: translateY(${fallDistance * 0.625}vh) translateX(${Math.sin(Math.PI * 1.25 * swayFrequency) * swayAmplitude + drift * 0.625}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.625}deg);
+				}
+				75% {
+					transform: translateY(${fallDistance * 0.75}vh) translateX(${Math.sin(Math.PI * 1.5 * swayFrequency) * swayAmplitude + drift * 0.75}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.75}deg);
+				}
+				87.5% {
+					transform: translateY(${fallDistance * 0.875}vh) translateX(${Math.sin(Math.PI * 1.75 * swayFrequency) * swayAmplitude + drift * 0.875}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.875}deg);
+				}
+				100% {
+					transform: translateY(${fallDistance}vh) translateX(${Math.sin(Math.PI * 2 * swayFrequency) * swayAmplitude + drift}px) rotate(${initialRotation + rotationAmount * rotationDirection}deg);
+				}
+			}
+			@keyframes ${animId}-flutter {
+				0%, 100% {
+					transform: rotateX(0deg) rotateY(0deg) scale(1);
+				}
+				16% {
+					transform: rotateX(30deg) rotateY(40deg) scale(0.9);
+				}
+				33% {
+					transform: rotateX(-25deg) rotateY(-35deg) scale(1.08);
+				}
+				50% {
+					transform: rotateX(35deg) rotateY(30deg) scale(0.95);
+				}
+				66% {
+					transform: rotateX(-30deg) rotateY(-40deg) scale(1.05);
+				}
+				83% {
+					transform: rotateX(25deg) rotateY(35deg) scale(0.92);
+				}
+			}
+		`;
+		document.head.appendChild(style);
+
+		return () => {
+			// Cleanup on component destroy
+			const el = document.getElementById(styleId);
+			if (el) el.remove();
+		};
+	});
+</script>
+
+<!-- Cherry blossom petal - delicate and flutter-y -->
+<!-- Wrapper div for fall animation (translateY/X), SVG for flutter (3D rotations) -->
+<div
+	class="petal-wrapper"
+	style="{animate ? `animation: ${animId}-fall ${duration}s linear ${delay}s infinite;` : `opacity: ${opacity};`}"
+>
+	<svg
+		class="{className}"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 20 20"
+		style="{animate ? `animation: ${animId}-flutter ${duration / 4}s ease-in-out ${delay}s infinite;` : ''}"
+	>
+	<defs>
+		<!-- Gradient for depth -->
+		<radialGradient id="petal-grad-{seed}" cx="30%" cy="30%" r="70%">
+			<stop offset="0%" stop-color={highlightColor} />
+			<stop offset="100%" stop-color={petalColor} />
+		</radialGradient>
+	</defs>
+
+	{#if variant === 'round'}
+		<!-- Classic round cherry blossom petal -->
+		<ellipse
+			cx="10"
+			cy="10"
+			rx="8"
+			ry="9"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+		<!-- Subtle vein -->
+		<path
+			d="M10 3 Q10 10 10 18"
+			fill="none"
+			stroke={springBlossoms.rose}
+			stroke-width="0.5"
+			opacity="0.3"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else if variant === 'pointed'}
+		<!-- Pointed petal - slightly more dramatic -->
+		<path
+			d="M10 2 Q18 8 16 14 Q12 20 10 18 Q8 20 4 14 Q2 8 10 2"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else if variant === 'heart'}
+		<!-- Heart-shaped petal with notch at top -->
+		<path
+			d="M10 18 Q4 12 4 8 Q4 4 8 4 Q10 4 10 6 Q10 4 12 4 Q16 4 16 8 Q16 12 10 18"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else if variant === 'curled'}
+		<!-- Curled petal - caught by the wind -->
+		<path
+			d="M6 4 Q14 2 16 8 Q18 14 14 18 Q8 18 6 14 Q4 10 6 4"
+			fill="url(#petal-grad-{seed})"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+		<!-- Curl shadow -->
+		<path
+			d="M8 6 Q12 5 14 8"
+			fill="none"
+			stroke={springBlossoms.rose}
+			stroke-width="0.5"
+			opacity="0.4"
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{:else}
+		<!-- Tiny - simple dot for distant petals -->
+		<circle
+			cx="10"
+			cy="10"
+			r="6"
+			fill={petalColor}
+			transform="rotate({initialRotation} 10 10)"
+		/>
+	{/if}
+	</svg>
+</div>
+
+<style>
+	/* Dynamic keyframes are injected via style attribute */
+	/* These are fallback static versions */
+	@keyframes petal-fall-base {
+		0% {
+			transform: translateY(0) translateX(0);
+		}
+		100% {
+			transform: translateY(100vh) translateX(var(--drift, 30px));
+		}
+	}
+
+	@keyframes petal-flutter-base {
+		0%, 100% {
+			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+		}
+		25% {
+			transform: rotateX(15deg) rotateY(30deg) rotateZ(10deg);
+		}
+		50% {
+			transform: rotateX(-10deg) rotateY(-20deg) rotateZ(-5deg);
+		}
+		75% {
+			transform: rotateX(20deg) rotateY(10deg) rotateZ(15deg);
+		}
+	}
+
+	.petal-wrapper {
+		display: inline-block;
+		will-change: transform, opacity;
+	}
+
+	svg {
+		display: block;
+		transform-style: preserve-3d;
+		will-change: transform;
+	}
+</style>

package/dist/ui/components/nature/botanical/PetalFalling.svelte.d.ts

@@ -0,0 +1,25 @@
+type PetalVariant = 'round' | 'pointed' | 'heart' | 'curled' | 'tiny';
+interface Props {
+    class?: string;
+    /** Petal shape variant */
+    variant?: PetalVariant;
+    /** Override petal color (defaults to spring blossom pink) */
+    color?: string;
+    /** Fall animation duration in seconds */
+    duration?: number;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Horizontal drift amount in pixels (can be negative) */
+    drift?: number;
+    /** Fall distance in vh units */
+    fallDistance?: number;
+    /** Enable falling animation */
+    animate?: boolean;
+    /** Opacity for depth effect */
+    opacity?: number;
+    /** Seed for deterministic rotation patterns */
+    seed?: number;
+}
+declare const PetalFalling: import("svelte").Component<Props, {}, "">;
+type PetalFalling = ReturnType<typeof PetalFalling>;
+export default PetalFalling;

package/dist/ui/components/nature/botanical/PineCone.svelte

@@ -0,0 +1,61 @@
+<!--
+  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;
+	}
+
+	let {
+		class: className = 'w-5 h-8',
+		color
+	}: Props = $props();
+
+	const coneColor = $derived(color ?? bark.warmBark);
+	const scaleLight = bark.lightBark;
+	const scaleDark = bark.darkBark;
+</script>
+
+<!-- Pine cone -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 55">
+	<!-- Stem -->
+	<rect fill={scaleDark} x="15" y="0" width="5" height="6" rx="1" />
+
+	<!-- Pine cone body (overlapping scales) -->
+	<!-- Top scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="12" rx="6" ry="4" />
+	<path fill={scaleDark} d="M12 12 Q17.5 10 23 12" stroke-width="0" opacity="0.3" />
+
+	<!-- Upper-mid scales -->
+	<ellipse fill={coneColor} cx="12" cy="18" rx="7" ry="5" />
+	<ellipse fill={coneColor} cx="23" cy="18" rx="7" ry="5" />
+	<path fill={scaleLight} d="M6 18 Q12 15 18 18" opacity="0.2" />
+	<path fill={scaleLight} d="M17 18 Q23 15 29 18" opacity="0.2" />
+
+	<!-- Middle scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="24" rx="8" ry="5" />
+	<ellipse fill={coneColor} cx="8" cy="26" rx="7" ry="5" />
+	<ellipse fill={coneColor} cx="27" cy="26" rx="7" ry="5" />
+	<path fill={scaleDark} d="M10 24 Q17.5 21 25 24" opacity="0.3" />
+
+	<!-- Lower-mid scales -->
+	<ellipse fill={coneColor} cx="12" cy="33" rx="8" ry="5" />
+	<ellipse fill={coneColor} cx="23" cy="33" rx="8" ry="5" />
+	<path fill={scaleLight} d="M5 33 Q12 30 19 33" opacity="0.2" />
+	<path fill={scaleLight} d="M16 33 Q23 30 30 33" opacity="0.2" />
+
+	<!-- Bottom scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="40" rx="9" ry="5" />
+	<ellipse fill={coneColor} cx="10" cy="42" rx="6" ry="4" />
+	<ellipse fill={coneColor} cx="25" cy="42" rx="6" ry="4" />
+	<path fill={scaleDark} d="M9 40 Q17.5 37 26 40" opacity="0.3" />
+
+	<!-- Tip scales -->
+	<ellipse fill={coneColor} cx="17.5" cy="48" rx="7" ry="4" />
+	<ellipse fill={coneColor} cx="17.5" cy="52" rx="4" ry="3" />
+</svg>

package/dist/ui/components/nature/botanical/PineCone.svelte.d.ts

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

package/dist/ui/components/nature/botanical/Vine.svelte

@@ -0,0 +1,102 @@
+<!--
+  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;
+		variant?: 'tendril' | 'ivy' | 'flowering';
+	}
+
+	let {
+		class: className = 'w-8 h-12',
+		color,
+		season = 'summer',
+		animate = false,
+		variant = 'tendril'
+	}: Props = $props();
+
+	const defaultColor = $derived(season === 'autumn' ? autumn.rust : greens.grove);
+	const vineColor = $derived(color ?? defaultColor);
+	const leafColor = $derived(season === 'autumn' ? autumn.amber : greens.meadow);
+</script>
+
+<!-- Vine/tendril -->
+<svg class="{className} {animate ? 'grow' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 80">
+	{#if variant === 'tendril'}
+		<!-- Simple curling tendril -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="2"
+			d="M25 80 Q20 60 25 50 Q30 40 25 30 Q20 20 30 15 Q40 10 45 5"
+			stroke-linecap="round"
+		/>
+		<!-- Curl at end -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="1.5"
+			d="M45 5 Q50 8 48 12 Q45 15 42 12 Q40 8 45 5"
+			stroke-linecap="round"
+		/>
+		<!-- Small leaves -->
+		<ellipse fill={leafColor} cx="22" cy="55" rx="5" ry="3" transform="rotate(-30 22 55)" />
+		<ellipse fill={leafColor} cx="28" cy="35" rx="5" ry="3" transform="rotate(20 28 35)" />
+	{:else if variant === 'ivy'}
+		<!-- Ivy vine with leaves -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="2"
+			d="M25 80 Q22 65 28 55 Q34 45 26 35 Q18 25 25 15 Q32 5 30 0"
+			stroke-linecap="round"
+		/>
+		<!-- Ivy leaves (3-lobed) -->
+		<path fill={leafColor} d="M18 60 Q12 55 10 60 Q8 65 12 68 Q16 70 18 65 Q20 62 18 60" />
+		<path fill={leafColor} d="M32 45 Q38 40 40 45 Q42 50 38 53 Q34 55 32 50 Q30 47 32 45" />
+		<path fill={leafColor} d="M20 30 Q14 25 12 30 Q10 35 14 38 Q18 40 20 35 Q22 32 20 30" />
+		<path fill={leafColor} d="M30 15 Q36 10 38 15 Q40 20 36 23 Q32 25 30 20 Q28 17 30 15" />
+	{:else}
+		<!-- Flowering vine -->
+		<path
+			fill="none"
+			stroke={vineColor}
+			stroke-width="2"
+			d="M25 80 Q20 60 30 45 Q40 30 30 15 Q20 0 25 -5"
+			stroke-linecap="round"
+		/>
+		<!-- Leaves -->
+		<ellipse fill={leafColor} cx="22" cy="58" rx="6" ry="4" transform="rotate(-20 22 58)" />
+		<ellipse fill={leafColor} cx="35" cy="38" rx="6" ry="4" transform="rotate(25 35 38)" />
+		<ellipse fill={leafColor} cx="25" cy="20" rx="5" ry="3" transform="rotate(-15 25 20)" />
+		<!-- Small flowers -->
+		<circle fill="#f9a8d4" cx="28" cy="50" r="4" />
+		<circle fill="#fbbf24" cx="28" cy="50" r="1.5" />
+		<circle fill="#f9a8d4" cx="32" cy="28" r="3" />
+		<circle fill="#fbbf24" cx="32" cy="28" r="1" />
+	{/if}
+</svg>
+
+<style>
+	@keyframes grow {
+		0% {
+			stroke-dasharray: 200;
+			stroke-dashoffset: 200;
+		}
+		100% {
+			stroke-dashoffset: 0;
+		}
+	}
+
+	.grow path {
+		animation: grow 3s ease-out forwards;
+	}
+</style>

package/dist/ui/components/nature/botanical/Vine.svelte.d.ts

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

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

@@ -0,0 +1,10 @@
+export { default as Acorn } from './Acorn.svelte';
+export { default as Berry } from './Berry.svelte';
+export { default as DandelionPuff } from './DandelionPuff.svelte';
+export { default as FallingLeavesLayer } from './FallingLeavesLayer.svelte';
+export { default as FallingPetalsLayer } from './FallingPetalsLayer.svelte';
+export { default as Leaf } from './Leaf.svelte';
+export { default as LeafFalling } from './LeafFalling.svelte';
+export { default as PetalFalling } from './PetalFalling.svelte';
+export { default as PineCone } from './PineCone.svelte';
+export { default as Vine } from './Vine.svelte';

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

@@ -0,0 +1,11 @@
+// Botanical components - leaves, petals, and plant elements
+export { default as Acorn } from './Acorn.svelte';
+export { default as Berry } from './Berry.svelte';
+export { default as DandelionPuff } from './DandelionPuff.svelte';
+export { default as FallingLeavesLayer } from './FallingLeavesLayer.svelte';
+export { default as FallingPetalsLayer } from './FallingPetalsLayer.svelte';
+export { default as Leaf } from './Leaf.svelte';
+export { default as LeafFalling } from './LeafFalling.svelte';
+export { default as PetalFalling } from './PetalFalling.svelte';
+export { default as PineCone } from './PineCone.svelte';
+export { default as Vine } from './Vine.svelte';

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

@@ -0,0 +1,78 @@
+<!--
+  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;
+		bodyColor?: string;
+		stripeColor?: string;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-5 h-5',
+		bodyColor,
+		stripeColor,
+		animate = true
+	}: Props = $props();
+
+	const body = $derived(bodyColor ?? accents.flower.yellow);
+	const stripes = $derived(stripeColor ?? bark.darkBark);
+	const wingColor = $derived('#e0f2fe'); // Light blue-ish transparent
+</script>
+
+<!-- Bumble bee -->
+<svg class="{className} {animate ? 'hover' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40">
+	<!-- Wings -->
+	<g class={animate ? 'buzz' : ''}>
+		<ellipse fill={wingColor} cx="20" cy="12" rx="10" ry="6" opacity="0.6" />
+		<ellipse fill={wingColor} cx="30" cy="12" rx="10" ry="6" opacity="0.6" />
+	</g>
+
+	<!-- Body -->
+	<ellipse fill={body} cx="25" cy="24" rx="18" ry="12" />
+
+	<!-- Stripes -->
+	<path fill={stripes} d="M15 18 Q25 14 35 18 L35 22 Q25 18 15 22 Z" />
+	<path fill={stripes} d="M12 26 Q25 22 38 26 L38 30 Q25 26 12 30 Z" />
+
+	<!-- Head -->
+	<circle fill={stripes} cx="8" cy="24" r="6" />
+
+	<!-- Eyes -->
+	<circle fill="white" cx="5" cy="22" r="2" />
+	<circle fill={stripes} cx="5" cy="22" r="1" />
+
+	<!-- Antennae -->
+	<path fill="none" stroke={stripes} stroke-width="1" d="M6 18 Q4 14 2 12" />
+	<path fill="none" stroke={stripes} stroke-width="1" d="M10 18 Q8 14 6 12" />
+
+	<!-- Stinger -->
+	<path fill={stripes} d="M43 24 L48 24 L43 26 Z" />
+</svg>
+
+<style>
+	@keyframes hover {
+		0%, 100% { transform: translateY(0) translateX(0); }
+		25% { transform: translateY(-2px) translateX(1px); }
+		75% { transform: translateY(-1px) translateX(-1px); }
+	}
+
+	@keyframes buzz {
+		0%, 100% { transform: scaleY(1); }
+		50% { transform: scaleY(0.85); }
+	}
+
+	.hover {
+		animation: hover 1s ease-in-out infinite;
+	}
+
+	.buzz {
+		transform-origin: center bottom;
+		animation: buzz 0.05s linear infinite;
+	}
+</style>

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

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