@autumnsgrove/groveengine 0.6.5 → 0.8.0

package/dist/ui/components/nature/water/LilyPad.svelte

@@ -0,0 +1,99 @@
+<!--
+  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;
+		padColor?: string;
+		flowerColor?: string;
+		hasFlower?: boolean;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-8 h-6',
+		padColor,
+		flowerColor,
+		hasFlower = false,
+		animate = true
+	}: Props = $props();
+
+	const pad = $derived(padColor ?? greens.grove);
+	const flower = $derived(flowerColor ?? accents.flower.white);
+	const padDark = $derived(greens.deepGreen);
+</script>
+
+<!-- Lily pad with optional flower -->
+<svg class="{className} {animate ? 'float' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 45">
+	<!-- Pad shadow -->
+	<ellipse fill="rgba(0,0,0,0.1)" cx="30" cy="32" rx="25" ry="12" />
+
+	<!-- Lily pad -->
+	<path
+		fill={pad}
+		d="M30 20
+		   Q55 20 55 32
+		   Q55 42 30 42
+		   Q5 42 5 32
+		   Q5 20 30 20
+		   L30 32 Z"
+	/>
+
+	<!-- Pad notch (V-cut) -->
+	<path
+		fill="#7dd3fc"
+		d="M30 20 L25 32 L30 32 L35 32 L30 20"
+		opacity="0.5"
+	/>
+
+	<!-- Pad veins -->
+	<path fill="none" stroke={padDark} stroke-width="0.5" d="M30 32 Q20 28 10 32" opacity="0.3" />
+	<path fill="none" stroke={padDark} stroke-width="0.5" d="M30 32 Q40 28 50 32" opacity="0.3" />
+	<path fill="none" stroke={padDark} stroke-width="0.5" d="M30 32 Q25 38 15 40" opacity="0.3" />
+	<path fill="none" stroke={padDark} stroke-width="0.5" d="M30 32 Q35 38 45 40" opacity="0.3" />
+
+	{#if hasFlower}
+		<!-- Water lily flower -->
+		<g class={animate ? 'bloom' : ''}>
+			<!-- Outer petals -->
+			<ellipse fill={flower} cx="30" cy="15" rx="4" ry="8" />
+			<ellipse fill={flower} cx="22" cy="18" rx="4" ry="7" transform="rotate(-30 22 18)" />
+			<ellipse fill={flower} cx="38" cy="18" rx="4" ry="7" transform="rotate(30 38 18)" />
+			<ellipse fill={flower} cx="20" cy="24" rx="3" ry="6" transform="rotate(-60 20 24)" />
+			<ellipse fill={flower} cx="40" cy="24" rx="3" ry="6" transform="rotate(60 40 24)" />
+
+			<!-- Inner petals -->
+			<ellipse fill={flower} cx="30" cy="17" rx="3" ry="5" />
+			<ellipse fill={flower} cx="26" cy="19" rx="2.5" ry="4" transform="rotate(-20 26 19)" />
+			<ellipse fill={flower} cx="34" cy="19" rx="2.5" ry="4" transform="rotate(20 34 19)" />
+
+			<!-- Center -->
+			<circle fill="#fbbf24" cx="30" cy="20" r="3" />
+		</g>
+	{/if}
+</svg>
+
+<style>
+	@keyframes float {
+		0%, 100% { transform: translateY(0) rotate(0deg); }
+		50% { transform: translateY(-2px) rotate(1deg); }
+	}
+
+	@keyframes bloom {
+		0%, 100% { transform: scale(1); }
+		50% { transform: scale(1.02); }
+	}
+
+	.float {
+		animation: float 4s ease-in-out infinite;
+	}
+
+	.bloom {
+		transform-origin: center bottom;
+		animation: bloom 5s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/water/LilyPad.svelte.d.ts

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

package/dist/ui/components/nature/water/Pond.svelte

@@ -0,0 +1,104 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-20 h-12',
+		color,
+		animate = true
+	}: Props = $props();
+
+	const waterColor = $derived(color ?? accents.water.surface);
+	const deepColor = $derived(accents.water.deep);
+</script>
+
+<!-- Pond with subtle ripple effect -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60">
+	<defs>
+		<ellipse id="pond-shape" cx="60" cy="35" rx="55" ry="25" />
+		<clipPath id="pond-clip">
+			<use href="#pond-shape" />
+		</clipPath>
+	</defs>
+
+	<!-- Water body -->
+	<ellipse fill={deepColor} cx="60" cy="35" rx="55" ry="25" />
+	<ellipse fill={waterColor} cx="60" cy="32" rx="52" ry="22" opacity="0.7" />
+
+	<!-- Ripples -->
+	<g clip-path="url(#pond-clip)">
+		<ellipse
+			fill="none"
+			stroke="white"
+			stroke-width="1"
+			cx="40"
+			cy="30"
+			rx="8"
+			ry="4"
+			opacity="0.3"
+			class={animate ? 'ripple ripple-1' : ''}
+		/>
+		<ellipse
+			fill="none"
+			stroke="white"
+			stroke-width="0.5"
+			cx="40"
+			cy="30"
+			rx="15"
+			ry="7"
+			opacity="0.2"
+			class={animate ? 'ripple ripple-2' : ''}
+		/>
+		<ellipse
+			fill="none"
+			stroke="white"
+			stroke-width="1"
+			cx="75"
+			cy="38"
+			rx="6"
+			ry="3"
+			opacity="0.25"
+			class={animate ? 'ripple ripple-3' : ''}
+		/>
+	</g>
+
+	<!-- Reflection highlight -->
+	<ellipse fill="white" cx="45" cy="28" rx="12" ry="5" opacity="0.15" />
+
+	<!-- Edge shadow -->
+	<ellipse
+		fill="none"
+		stroke="rgba(0,0,0,0.1)"
+		stroke-width="2"
+		cx="60"
+		cy="35"
+		rx="55"
+		ry="25"
+	/>
+</svg>
+
+<style>
+	@keyframes ripple {
+		0% { transform: scale(0.8); opacity: 0.4; }
+		100% { transform: scale(1.5); opacity: 0; }
+	}
+
+	.ripple {
+		transform-origin: center center;
+		animation: ripple 3s ease-out infinite;
+	}
+
+	.ripple-1 { animation-delay: 0s; }
+	.ripple-2 { animation-delay: 0.5s; }
+	.ripple-3 { animation-delay: 1.5s; }
+</style>

package/dist/ui/components/nature/water/Pond.svelte.d.ts

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

package/dist/ui/components/nature/water/Reeds.svelte

@@ -0,0 +1,85 @@
+<!--
+  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;
+		variant?: 'cattail' | 'grass';
+	}
+
+	let {
+		class: className = 'w-6 h-12',
+		color,
+		season = 'summer',
+		animate = true,
+		variant = 'cattail'
+	}: Props = $props();
+
+	// Reeds turn golden-brown in autumn
+	const defaultColor = $derived(
+		season === 'autumn' ? autumn.straw : greens.deepGreen
+	);
+	const reedColor = $derived(color ?? defaultColor);
+	const cattailColor = $derived(bark.bark);
+</script>
+
+<!-- Reeds/Cattails -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100">
+	{#if variant === 'cattail'}
+		<!-- Cattail stalks with heads -->
+		<g class={animate ? 'sway sway-1' : ''}>
+			<path fill="none" stroke={reedColor} stroke-width="2" d="M15 100 Q14 70 16 40 Q17 25 15 15" />
+			<ellipse fill={cattailColor} cx="15" cy="22" rx="4" ry="10" />
+			<path fill={reedColor} d="M15 12 L13 8 L15 10 L17 8 Z" />
+		</g>
+
+		<g class={animate ? 'sway sway-2' : ''}>
+			<path fill="none" stroke={reedColor} stroke-width="2" d="M30 100 Q32 65 30 35 Q28 18 30 5" />
+			<ellipse fill={cattailColor} cx="30" cy="15" rx="4" ry="12" />
+			<path fill={reedColor} d="M30 3 L28 0 L30 2 L32 0 Z" />
+		</g>
+
+		<g class={animate ? 'sway sway-3' : ''}>
+			<path fill="none" stroke={reedColor} stroke-width="1.5" d="M42 100 Q40 75 42 50 Q44 30 42 20" />
+			<ellipse fill={cattailColor} cx="42" cy="27" rx="3" ry="8" />
+			<path fill={reedColor} d="M42 19 L40 16 L42 18 L44 16 Z" />
+		</g>
+	{:else}
+		<!-- Simple grass reeds -->
+		<g class={animate ? 'sway sway-1' : ''}>
+			<path fill={reedColor} d="M10 100 L8 100 Q6 60 10 20 Q12 15 10 10 Q12 15 14 20 Q18 60 16 100 Z" />
+		</g>
+
+		<g class={animate ? 'sway sway-2' : ''}>
+			<path fill={reedColor} d="M25 100 L23 100 Q20 55 25 15 Q27 8 25 2 Q28 8 30 15 Q35 55 32 100 Z" />
+		</g>
+
+		<g class={animate ? 'sway sway-3' : ''}>
+			<path fill={reedColor} d="M40 100 L38 100 Q36 65 40 30 Q42 22 40 15 Q43 22 45 30 Q48 65 46 100 Z" />
+		</g>
+	{/if}
+</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;
+	}
+
+	.sway-1 { animation-delay: 0s; }
+	.sway-2 { animation-delay: 0.4s; }
+	.sway-3 { animation-delay: 0.8s; }
+</style>

package/dist/ui/components/nature/water/Reeds.svelte.d.ts

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

package/dist/ui/components/nature/water/Stream.svelte

@@ -0,0 +1,98 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-24 h-8',
+		color,
+		animate = true
+	}: Props = $props();
+
+	const waterColor = $derived(color ?? accents.water.surface);
+	const deepColor = $derived(accents.water.deep);
+</script>
+
+<!-- Flowing stream -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 40">
+	<defs>
+		<linearGradient id="stream-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+			<stop offset="0%" stop-color={waterColor} />
+			<stop offset="100%" stop-color={deepColor} />
+		</linearGradient>
+	</defs>
+
+	<!-- Stream bed -->
+	<path
+		fill="url(#stream-gradient)"
+		d="M0 15 Q30 10 50 18 Q80 28 100 20 Q120 12 150 17
+		   L150 30 Q120 35 100 28 Q80 22 50 30 Q30 35 0 28 Z"
+	/>
+
+	<!-- Flow lines -->
+	<g class={animate ? 'flow' : ''}>
+		<path
+			fill="none"
+			stroke="white"
+			stroke-width="1"
+			d="M10 20 Q25 18 40 22"
+			opacity="0.3"
+		/>
+		<path
+			fill="none"
+			stroke="white"
+			stroke-width="1"
+			d="M50 24 Q70 20 90 23"
+			opacity="0.25"
+		/>
+		<path
+			fill="none"
+			stroke="white"
+			stroke-width="1"
+			d="M100 21 Q120 18 140 22"
+			opacity="0.3"
+		/>
+	</g>
+
+	<!-- Sparkles/highlights -->
+	<g class={animate ? 'sparkle' : ''}>
+		<circle fill="white" cx="30" cy="20" r="1.5" opacity="0.4" />
+		<circle fill="white" cx="75" cy="23" r="1" opacity="0.3" />
+		<circle fill="white" cx="115" cy="20" r="1.5" opacity="0.35" />
+	</g>
+
+	<!-- Bank shadows -->
+	<path
+		fill="rgba(0,0,0,0.1)"
+		d="M0 15 Q30 10 50 18 Q80 28 100 20 Q120 12 150 17 L150 15 Q120 10 100 18 Q80 26 50 16 Q30 8 0 13 Z"
+	/>
+</svg>
+
+<style>
+	@keyframes flow {
+		0% { transform: translateX(0); }
+		100% { transform: translateX(10px); }
+	}
+
+	@keyframes sparkle {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.5; }
+	}
+
+	.flow {
+		animation: flow 2s linear infinite;
+	}
+
+	.sparkle {
+		animation: sparkle 1.5s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/water/Stream.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+export { default as LilyPad } from './LilyPad.svelte';
+export { default as Pond } from './Pond.svelte';
+export { default as Reeds } from './Reeds.svelte';
+export { default as Stream } from './Stream.svelte';

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

@@ -0,0 +1,5 @@
+// Water components - ponds, streams, and aquatic elements
+export { default as LilyPad } from './LilyPad.svelte';
+export { default as Pond } from './Pond.svelte';
+export { default as Reeds } from './Reeds.svelte';
+export { default as Stream } from './Stream.svelte';

package/dist/ui/components/nature/weather/SnowfallLayer.svelte

@@ -0,0 +1,175 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { winter } from '../palette';
+	import SnowflakeFalling from './SnowflakeFalling.svelte';
+
+	type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+
+	// Check for reduced motion preference
+	const prefersReducedMotion = browser
+		? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		: false;
+
+	interface Props {
+		/** Total number of snowflakes */
+		count?: number;
+		/** Base z-index for the snow layer */
+		zIndex?: number;
+		/** Enable snowfall animation */
+		enabled?: boolean;
+		/** Opacity range for snowflakes (depth affects final value) */
+		opacity?: { min: number; max: number };
+		/** Fall duration range in seconds (slower = gentler snowfall) */
+		fallDuration?: { min: number; max: number };
+		/** Horizontal drift range in vw units (higher = more wind) */
+		driftRange?: number;
+		/** Maximum spawn delay in seconds (staggers initial appearance) */
+		spawnDelay?: number;
+	}
+
+	let {
+		count = 60,
+		zIndex = 50,
+		enabled = true,
+		opacity = { min: 0.4, max: 0.9 },
+		fallDuration = { min: 10, max: 18 },
+		driftRange = 15,
+		spawnDelay = 12
+	}: Props = $props();
+
+	// Derived animation constants from props
+	const FALL_DISTANCE = { min: 100, max: 120 } as const;
+
+	// Reduce snowflake count for reduced motion or use fewer for performance
+	const actualCount = $derived(prefersReducedMotion ? Math.floor(count / 4) : count);
+
+	const snowflakeVariants: SnowflakeVariant[] = ['crystal', 'simple', 'star', 'delicate', 'dot'];
+
+	interface Snowflake {
+		id: number;
+		x: number;
+		y: number;
+		size: number;
+		variant: SnowflakeVariant;
+		duration: number;
+		delay: number;
+		drift: number;
+		opacity: number;
+		fallDistance: number;
+	}
+
+	// Deterministic hash for natural distribution (returns 0-1 range)
+	// Using different prime multipliers for each property ensures varied but consistent results
+	function hashRandom(seed: number): number {
+		const hash = Math.abs(Math.sin(seed * 12.9898) * 43758.5453);
+		return hash - Math.floor(hash); // Fractional part gives 0-1 range
+	}
+
+	// Generate snowflakes across the viewport
+	// All randomization is deterministic to prevent SSR hydration mismatches
+	function generateSnowflakes(): Snowflake[] {
+		const snowflakes: Snowflake[] = [];
+
+		for (let i = 0; i < actualCount; i++) {
+			// Use different seed multipliers for each property to get varied distributions
+			const xRand = hashRandom(i * 7);
+			const yRand = hashRandom(i * 11);
+			const depthRand = hashRandom(i * 13);
+			const durationRand = hashRandom(i * 17);
+			const delayRand = hashRandom(i * 19);
+			const driftRand = hashRandom(i * 23);
+			const distanceRand = hashRandom(i * 29);
+
+			// Distribute across full width with some randomness
+			const x = (i / actualCount) * 100 + (xRand - 0.5) * 10;
+
+			// Start positions: most above viewport, some within for immediate visibility
+			// This creates a natural "already snowing" effect on page load
+			const y = yRand < 0.3
+				? yRand * 80  // 30% start within viewport (0-24% from top)
+				: -5 - yRand * 15; // 70% start above viewport
+
+			// Depth-based sizing algorithm:
+			// depthFactor 0.0 = far away (small, simple dots, lower opacity)
+			// depthFactor 1.0 = close up (large, detailed crystals, higher opacity)
+			// This creates a parallax-like depth effect with smaller background flakes
+			const depthFactor = depthRand;
+			const size = 8 + depthFactor * 16; // 8-24px range for better visibility
+
+			// Variant selection based on depth:
+			// - Far (0.0-0.3): tiny dots for distant snow
+			// - Mid (0.3-0.5): simple shapes
+			// - Close (0.5-1.0): detailed crystal/star/delicate variants (excludes dot)
+			let variant: SnowflakeVariant;
+			if (depthFactor < 0.3) {
+				variant = 'dot';
+			} else if (depthFactor < 0.5) {
+				variant = 'simple';
+			} else {
+				// Use % 4 intentionally to select from first 4 variants (crystal, simple, star, delicate)
+				// This excludes 'dot' which is reserved for distant snowflakes
+				variant = snowflakeVariants[Math.floor(hashRandom(i) * 4)] as SnowflakeVariant;
+			}
+
+			// Snowflakes starting in viewport get minimal delay for immediate visibility
+			const isInViewport = y >= 0;
+			const actualDelay = isInViewport ? delayRand * 2 : delayRand * spawnDelay;
+
+			snowflakes.push({
+				id: i,
+				x,
+				y,
+				size,
+				variant,
+				duration: fallDuration.min + durationRand * (fallDuration.max - fallDuration.min),
+				delay: actualDelay,
+				drift: (driftRand - 0.5) * driftRange,
+				opacity: opacity.min + depthFactor * (opacity.max - opacity.min),
+				fallDistance: FALL_DISTANCE.min + distanceRand * (FALL_DISTANCE.max - FALL_DISTANCE.min)
+			});
+		}
+
+		return snowflakes;
+	}
+
+	// Generate snowflakes once
+	const snowflakes = $derived(generateSnowflakes());
+</script>
+
+{#if enabled}
+	<!-- Snowfall layer - covers the page content area -->
+	<div
+		class="absolute inset-0 pointer-events-none overflow-hidden"
+		style="z-index: {zIndex};"
+	>
+		{#each snowflakes as flake (flake.id)}
+			<div
+				class="absolute"
+				style="
+					left: {flake.x}%;
+					top: {flake.y}%;
+					width: {flake.size}px;
+					height: {flake.size}px;
+				"
+			>
+				<SnowflakeFalling
+					class="w-full h-full"
+					variant={flake.variant}
+					color={winter.snow}
+					duration={flake.duration}
+					delay={flake.delay}
+					drift={flake.drift}
+					fallDistance={flake.fallDistance}
+					opacity={flake.opacity}
+					seed={flake.id}
+					animate={true}
+				/>
+			</div>
+		{/each}
+	</div>
+{/if}

package/dist/ui/components/nature/weather/SnowfallLayer.svelte.d.ts

@@ -0,0 +1,25 @@
+interface Props {
+    /** Total number of snowflakes */
+    count?: number;
+    /** Base z-index for the snow layer */
+    zIndex?: number;
+    /** Enable snowfall animation */
+    enabled?: boolean;
+    /** Opacity range for snowflakes (depth affects final value) */
+    opacity?: {
+        min: number;
+        max: number;
+    };
+    /** Fall duration range in seconds (slower = gentler snowfall) */
+    fallDuration?: {
+        min: number;
+        max: number;
+    };
+    /** Horizontal drift range in vw units (higher = more wind) */
+    driftRange?: number;
+    /** Maximum spawn delay in seconds (staggers initial appearance) */
+    spawnDelay?: number;
+}
+declare const SnowfallLayer: import("svelte").Component<Props, {}, "">;
+type SnowfallLayer = ReturnType<typeof SnowfallLayer>;
+export default SnowfallLayer;