@autumnsgrove/groveengine 0.7.0 → 0.8.0

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

@@ -0,0 +1,99 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { winter } from '../palette';
+
+	type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		variant?: SnowflakeVariant;
+		/** Opacity for depth effect */
+		opacity?: number;
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color = winter.snow,
+		variant = 'crystal',
+		opacity = 1
+	}: Props = $props();
+</script>
+
+<!-- Snowflake - various crystalline shapes -->
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 40 40"
+	style="opacity: {opacity};"
+>
+	{#if variant === 'crystal'}
+		<!-- Classic 6-pointed crystal snowflake -->
+		<g fill="none" stroke={color} stroke-width="1.5" stroke-linecap="round">
+			<!-- Main axes -->
+			<line x1="20" y1="4" x2="20" y2="36" />
+			<line x1="6" y1="12" x2="34" y2="28" />
+			<line x1="6" y1="28" x2="34" y2="12" />
+			<!-- Branch details on vertical axis -->
+			<line x1="20" y1="8" x2="16" y2="12" />
+			<line x1="20" y1="8" x2="24" y2="12" />
+			<line x1="20" y1="32" x2="16" y2="28" />
+			<line x1="20" y1="32" x2="24" y2="28" />
+			<!-- Branch details on diagonal axes -->
+			<line x1="10" y1="14" x2="12" y2="10" />
+			<line x1="10" y1="14" x2="8" y2="18" />
+			<line x1="30" y1="26" x2="28" y2="30" />
+			<line x1="30" y1="26" x2="32" y2="22" />
+			<line x1="10" y1="26" x2="12" y2="30" />
+			<line x1="10" y1="26" x2="8" y2="22" />
+			<line x1="30" y1="14" x2="28" y2="10" />
+			<line x1="30" y1="14" x2="32" y2="18" />
+		</g>
+		<!-- Center crystal -->
+		<circle fill={color} cx="20" cy="20" r="2" />
+	{:else if variant === 'simple'}
+		<!-- Simple 6-pointed star snowflake -->
+		<g fill="none" stroke={color} stroke-width="2" stroke-linecap="round">
+			<line x1="20" y1="5" x2="20" y2="35" />
+			<line x1="7" y1="12.5" x2="33" y2="27.5" />
+			<line x1="7" y1="27.5" x2="33" y2="12.5" />
+		</g>
+		<circle fill={color} cx="20" cy="20" r="3" />
+	{:else if variant === 'star'}
+		<!-- Decorative star snowflake with filled points -->
+		<polygon
+			fill={color}
+			points="20,2 22,15 35,12 25,20 35,28 22,25 20,38 18,25 5,28 15,20 5,12 18,15"
+		/>
+		<circle fill={color} cx="20" cy="20" r="4" opacity="0.8" />
+	{:else if variant === 'delicate'}
+		<!-- Delicate branching snowflake -->
+		<g fill="none" stroke={color} stroke-width="1" stroke-linecap="round">
+			<!-- Main spokes -->
+			<line x1="20" y1="4" x2="20" y2="36" />
+			<line x1="6" y1="12" x2="34" y2="28" />
+			<line x1="6" y1="28" x2="34" y2="12" />
+			<!-- Delicate inner branches -->
+			<line x1="20" y1="10" x2="14" y2="13" />
+			<line x1="20" y1="10" x2="26" y2="13" />
+			<line x1="20" y1="30" x2="14" y2="27" />
+			<line x1="20" y1="30" x2="26" y2="27" />
+			<!-- Tiny end crystals -->
+			<circle cx="20" cy="4" r="1.5" fill={color} />
+			<circle cx="20" cy="36" r="1.5" fill={color} />
+			<circle cx="6" cy="12" r="1.5" fill={color} />
+			<circle cx="34" cy="28" r="1.5" fill={color} />
+			<circle cx="6" cy="28" r="1.5" fill={color} />
+			<circle cx="34" cy="12" r="1.5" fill={color} />
+		</g>
+		<circle fill={color} cx="20" cy="20" r="2.5" />
+	{:else if variant === 'dot'}
+		<!-- Simple snow dot/orb (for distant flakes) -->
+		<circle fill={color} cx="20" cy="20" r="8" />
+		<circle fill="white" cx="17" cy="17" r="2" opacity="0.6" />
+	{/if}
+</svg>

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

@@ -0,0 +1,11 @@
+type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+interface Props {
+    class?: string;
+    color?: string;
+    variant?: SnowflakeVariant;
+    /** Opacity for depth effect */
+    opacity?: number;
+}
+declare const Snowflake: import("svelte").Component<Props, {}, "">;
+type Snowflake = ReturnType<typeof Snowflake>;
+export default Snowflake;

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

@@ -0,0 +1,162 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { winter } from '../palette';
+	import Snowflake from './Snowflake.svelte';
+	import { browser } from '$app/environment';
+
+	type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		variant?: SnowflakeVariant;
+		/** Fall animation duration in seconds */
+		duration?: number;
+		/** Animation delay in seconds */
+		delay?: number;
+		/** Horizontal drift amount in vw units */
+		drift?: number;
+		/** Vertical fall distance in vh units */
+		fallDistance?: number;
+		/** Enable falling animation */
+		animate?: boolean;
+		/** Random seed for rotation variation */
+		seed?: number;
+		/** Opacity for depth effect */
+		opacity?: number;
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color = winter.snow,
+		variant = 'crystal',
+		duration = 12,
+		delay = 0,
+		drift = 0,
+		fallDistance = 100,
+		animate = true,
+		seed = 0,
+		opacity = 1
+	}: Props = $props();
+
+	// Deterministic rotation based on seed - gentle swaying for snow
+	const initialRotation = $derived((seed * 37) % 360);
+	const rotationDirection = $derived(seed % 2 === 0 ? 1 : -1);
+	const rotationAmount = $derived(180 + (seed % 180)); // 180-360 degrees total rotation - gentler than petals
+
+	// Gentle horizontal sway - snow drifts more subtly than petals
+	const swayAmplitude = $derived(40 + (seed % 60)); // 40-100px horizontal sway - lighter than petals
+	const swayFrequency = $derived(1 + (seed % 3)); // 1-3 complete waves during fall - fewer than petals
+
+	// Unique animation name to prevent conflicts
+	const animId = $derived(`snow-${seed}`);
+
+	// Inject dynamic keyframes at runtime
+	$effect(() => {
+		if (!browser || !animate) return;
+
+		const styleId = `snow-style-${seed}`;
+		// Check if already injected
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement('style');
+		style.id = styleId;
+		// Create gentle drifting motion with sine wave horizontal movement
+		// Snowflakes are lighter and more delicate than petals
+		style.textContent = `
+			@keyframes ${animId}-fall {
+				0% {
+					transform: translateY(0) translateX(0) rotate(${initialRotation}deg);
+					opacity: 0;
+				}
+				5% {
+					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);
+				}
+				95% {
+					opacity: ${opacity};
+				}
+				100% {
+					transform: translateY(${fallDistance}vh) translateX(${Math.sin(Math.PI * 2 * swayFrequency) * swayAmplitude + drift}px) rotate(${initialRotation + rotationAmount * rotationDirection}deg);
+					opacity: 0;
+				}
+			}
+			@keyframes ${animId}-flutter {
+				0%, 100% {
+					transform: rotateX(0deg) rotateY(0deg) scale(1);
+				}
+				20% {
+					transform: rotateX(20deg) rotateY(25deg) scale(0.95);
+				}
+				40% {
+					transform: rotateX(-15deg) rotateY(-20deg) scale(1.05);
+				}
+				60% {
+					transform: rotateX(25deg) rotateY(20deg) scale(0.92);
+				}
+				80% {
+					transform: rotateX(-20deg) rotateY(-25deg) scale(1.03);
+				}
+			}
+		`;
+		document.head.appendChild(style);
+
+		return () => {
+			// Cleanup on component destroy
+			const el = document.getElementById(styleId);
+			if (el) el.remove();
+		};
+	});
+</script>
+
+<!-- Snowflake - delicate and drifting -->
+<!-- Wrapper div for fall animation (translateY/X/rotate), inner div for flutter (3D rotations) -->
+<div
+	class="snowflake-wrapper"
+	style="{animate ? `animation: ${animId}-fall ${duration}s linear ${delay}s infinite;` : `opacity: ${opacity};`}"
+>
+	<div
+		class="snowflake-flutter"
+		style="{animate ? `animation: ${animId}-flutter ${duration / 3}s ease-in-out ${delay}s infinite;` : ''}"
+	>
+		<Snowflake class={className} {color} {variant} opacity={1} />
+	</div>
+</div>
+
+<style>
+	/* Dynamic keyframes are injected via $effect */
+	.snowflake-wrapper {
+		display: inline-block;
+		will-change: transform, opacity;
+	}
+
+	.snowflake-flutter {
+		display: inline-block;
+		transform-style: preserve-3d;
+		will-change: transform;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+interface Props {
+    class?: string;
+    color?: string;
+    variant?: SnowflakeVariant;
+    /** Fall animation duration in seconds */
+    duration?: number;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Horizontal drift amount in vw units */
+    drift?: number;
+    /** Vertical fall distance in vh units */
+    fallDistance?: number;
+    /** Enable falling animation */
+    animate?: boolean;
+    /** Random seed for rotation variation */
+    seed?: number;
+    /** Opacity for depth effect */
+    opacity?: number;
+}
+declare const SnowflakeFalling: import("svelte").Component<Props, {}, "">;
+type SnowflakeFalling = ReturnType<typeof SnowflakeFalling>;
+export default SnowflakeFalling;

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

@@ -0,0 +1,3 @@
+export { default as SnowfallLayer } from './SnowfallLayer.svelte';
+export { default as Snowflake } from './Snowflake.svelte';
+export { default as SnowflakeFalling } from './SnowflakeFalling.svelte';

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

@@ -0,0 +1,4 @@
+// Weather components - seasonal weather effects
+export { default as SnowfallLayer } from './SnowfallLayer.svelte';
+export { default as Snowflake } from './Snowflake.svelte';
+export { default as SnowflakeFalling } from './SnowflakeFalling.svelte';