@autumnsgrove/groveengine 0.7.0 → 0.8.0

package/dist/ui/components/nature/sky/Rainbow.svelte

@@ -0,0 +1,101 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	interface Props {
+		class?: string;
+		opacity?: number;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-32 h-16',
+		opacity = 0.6,
+		animate = false
+	}: Props = $props();
+</script>
+
+<!-- Rainbow arc -->
+<svg class="{className} {animate ? 'fade-in' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
+	<defs>
+		<!-- Rainbow gradient arcs -->
+		<linearGradient id="rainbow-red" x1="0%" y1="0%" x2="100%" y2="0%">
+			<stop offset="0%" stop-color="#ef4444" stop-opacity="0" />
+			<stop offset="20%" stop-color="#ef4444" stop-opacity="1" />
+			<stop offset="80%" stop-color="#ef4444" stop-opacity="1" />
+			<stop offset="100%" stop-color="#ef4444" stop-opacity="0" />
+		</linearGradient>
+	</defs>
+
+	<g opacity={opacity}>
+		<!-- Red (outer) -->
+		<path
+			fill="none"
+			stroke="#ef4444"
+			stroke-width="8"
+			d="M10 100 Q10 20 100 20 Q190 20 190 100"
+			opacity="0.8"
+		/>
+		<!-- Orange -->
+		<path
+			fill="none"
+			stroke="#f97316"
+			stroke-width="8"
+			d="M20 100 Q20 30 100 30 Q180 30 180 100"
+			opacity="0.8"
+		/>
+		<!-- Yellow -->
+		<path
+			fill="none"
+			stroke="#eab308"
+			stroke-width="8"
+			d="M30 100 Q30 40 100 40 Q170 40 170 100"
+			opacity="0.8"
+		/>
+		<!-- Green -->
+		<path
+			fill="none"
+			stroke="#22c55e"
+			stroke-width="8"
+			d="M40 100 Q40 50 100 50 Q160 50 160 100"
+			opacity="0.8"
+		/>
+		<!-- Blue -->
+		<path
+			fill="none"
+			stroke="#3b82f6"
+			stroke-width="8"
+			d="M50 100 Q50 60 100 60 Q150 60 150 100"
+			opacity="0.8"
+		/>
+		<!-- Indigo -->
+		<path
+			fill="none"
+			stroke="#6366f1"
+			stroke-width="8"
+			d="M60 100 Q60 70 100 70 Q140 70 140 100"
+			opacity="0.8"
+		/>
+		<!-- Violet (inner) -->
+		<path
+			fill="none"
+			stroke="#a855f7"
+			stroke-width="8"
+			d="M70 100 Q70 80 100 80 Q130 80 130 100"
+			opacity="0.8"
+		/>
+	</g>
+</svg>
+
+<style>
+	@keyframes fade-in {
+		0% { opacity: 0; }
+		100% { opacity: 1; }
+	}
+
+	.fade-in {
+		animation: fade-in 3s ease-out forwards;
+	}
+</style>

package/dist/ui/components/nature/sky/Rainbow.svelte.d.ts

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

package/dist/ui/components/nature/sky/Star.svelte

@@ -0,0 +1,84 @@
+<!--
+  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;
+		variant?: 'twinkle' | 'point' | 'burst' | 'classic' | 'tiny';
+		speed?: 'slow' | 'normal' | 'fast';
+	}
+
+	let {
+		class: className = 'w-3 h-3',
+		color,
+		animate = true,
+		variant = 'twinkle',
+		speed = 'normal'
+	}: Props = $props();
+
+	const starColor = $derived(color ?? accents.sky.star);
+
+	const duration = $derived(
+		{
+			slow: '4s',
+			normal: '2s',
+			fast: '1s'
+		}[speed]
+	);
+</script>
+
+<!-- Star -->
+<svg
+	class="{className} {animate ? 'twinkle' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 20 20"
+	style="--twinkle-duration: {duration}"
+>
+	{#if variant === 'twinkle'}
+		<!-- 4-point twinkle star -->
+		<path
+			fill={starColor}
+			d="M10 0 L11 8 L20 10 L11 12 L10 20 L9 12 L0 10 L9 8 Z"
+		/>
+	{:else if variant === 'point'}
+		<!-- Simple point -->
+		<circle fill={starColor} cx="10" cy="10" r="3" />
+		<!-- Subtle glow -->
+		<circle fill={starColor} cx="10" cy="10" r="6" opacity="0.3" />
+	{:else if variant === 'burst'}
+		<!-- Starburst (8-point) -->
+		<path
+			fill={starColor}
+			d="M10 0 L11 7 L18 4 L13 9 L20 10 L13 11 L18 16 L11 13 L10 20 L9 13 L2 16 L7 11 L0 10 L7 9 L2 4 L9 7 Z"
+		/>
+	{:else if variant === 'classic'}
+		<!-- Classic 5-point star -->
+		<polygon
+			fill={starColor}
+			points="10,0 12.5,7.5 20,7.5 14,12 16.5,20 10,15 3.5,20 6,12 0,7.5 7.5,7.5"
+		/>
+	{:else if variant === 'tiny'}
+		<!-- Tiny dot star -->
+		<circle fill={starColor} cx="10" cy="10" r="2" />
+	{/if}
+</svg>
+
+<style>
+	@keyframes twinkle {
+		0%, 100% { opacity: 1; transform: scale(1); }
+		25% { opacity: 0.7; transform: scale(0.9); }
+		50% { opacity: 0.4; transform: scale(0.75); }
+		75% { opacity: 0.8; transform: scale(0.95); }
+	}
+
+	.twinkle {
+		animation: twinkle var(--twinkle-duration, 2s) ease-in-out infinite;
+		animation-delay: var(--twinkle-delay, 0s);
+	}
+</style>

package/dist/ui/components/nature/sky/Star.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string;
+    color?: string;
+    animate?: boolean;
+    variant?: 'twinkle' | 'point' | 'burst' | 'classic' | 'tiny';
+    speed?: 'slow' | 'normal' | 'fast';
+}
+declare const Star: import("svelte").Component<Props, {}, "">;
+type Star = ReturnType<typeof Star>;
+export default Star;

package/dist/ui/components/nature/sky/StarCluster.svelte

@@ -0,0 +1,85 @@
+<!--
+  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;
+		density?: 'sparse' | 'normal' | 'dense';
+	}
+
+	let {
+		class: className = 'w-16 h-16',
+		color,
+		animate = true,
+		density = 'normal'
+	}: Props = $props();
+
+	const starColor = $derived(color ?? accents.sky.star);
+
+	// Generate stars based on density
+	const starCounts = { sparse: 5, normal: 9, dense: 15 };
+	const count = $derived(starCounts[density]);
+
+	// Deterministic star positions for consistent rendering
+	const starPositions = [
+		{ x: 25, y: 20, size: 3, delay: 0 },
+		{ x: 60, y: 15, size: 2, delay: 0.5 },
+		{ x: 80, y: 35, size: 4, delay: 0.2 },
+		{ x: 15, y: 50, size: 2, delay: 0.8 },
+		{ x: 45, y: 45, size: 3, delay: 0.3 },
+		{ x: 70, y: 60, size: 2, delay: 1.1 },
+		{ x: 30, y: 75, size: 3, delay: 0.6 },
+		{ x: 55, y: 80, size: 2, delay: 0.9 },
+		{ x: 85, y: 75, size: 3, delay: 0.4 },
+		{ x: 10, y: 30, size: 2, delay: 1.3 },
+		{ x: 40, y: 10, size: 2, delay: 0.7 },
+		{ x: 90, y: 20, size: 2, delay: 1.0 },
+		{ x: 50, y: 60, size: 2, delay: 1.2 },
+		{ x: 20, y: 85, size: 2, delay: 0.1 },
+		{ x: 75, y: 90, size: 2, delay: 1.4 }
+	];
+	const stars = $derived(starPositions.slice(0, count));
+</script>
+
+<!-- Cluster of twinkling stars -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+	{#each stars as star}
+		<g
+			class={animate ? 'twinkle' : ''}
+			style="--twinkle-delay: {star.delay}s"
+		>
+			<!-- 4-point star shape -->
+			<path
+				fill={starColor}
+				d="M{star.x} {star.y - star.size}
+				   L{star.x + star.size * 0.3} {star.y - star.size * 0.3}
+				   L{star.x + star.size} {star.y}
+				   L{star.x + star.size * 0.3} {star.y + star.size * 0.3}
+				   L{star.x} {star.y + star.size}
+				   L{star.x - star.size * 0.3} {star.y + star.size * 0.3}
+				   L{star.x - star.size} {star.y}
+				   L{star.x - star.size * 0.3} {star.y - star.size * 0.3} Z"
+			/>
+		</g>
+	{/each}
+</svg>
+
+<style>
+	@keyframes twinkle {
+		0%, 100% { opacity: 1; transform: scale(1); }
+		25% { opacity: 0.6; transform: scale(0.85); }
+		50% { opacity: 0.3; transform: scale(0.7); }
+		75% { opacity: 0.7; transform: scale(0.9); }
+	}
+
+	.twinkle {
+		animation: twinkle 3s ease-in-out infinite;
+		animation-delay: var(--twinkle-delay, 0s);
+	}
+</style>

package/dist/ui/components/nature/sky/StarCluster.svelte.d.ts

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

package/dist/ui/components/nature/sky/StarShooting.svelte

@@ -0,0 +1,90 @@
+<!--
+  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;
+		direction?: 'left' | 'right';
+	}
+
+	let {
+		class: className = 'w-16 h-8',
+		color,
+		animate = true,
+		direction = 'right'
+	}: Props = $props();
+
+	const starColor = $derived(color ?? accents.sky.star);
+	const scaleX = $derived(direction === 'left' ? -1 : 1);
+</script>
+
+<!-- Shooting star with trail -->
+<svg
+	class="{className} {animate ? 'shoot' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 100 40"
+	style="transform: scaleX({scaleX})"
+>
+	<defs>
+		<linearGradient id="trail-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+			<stop offset="0%" stop-color={starColor} stop-opacity="0" />
+			<stop offset="70%" stop-color={starColor} stop-opacity="0.5" />
+			<stop offset="100%" stop-color={starColor} stop-opacity="1" />
+		</linearGradient>
+	</defs>
+
+	<!-- Trail -->
+	<path
+		fill="url(#trail-gradient)"
+		d="M0 20 Q30 15 60 18 L85 17 L85 23 L60 22 Q30 25 0 20 Z"
+		class={animate ? 'trail' : ''}
+	/>
+
+	<!-- Star head -->
+	<g class={animate ? 'star-head' : ''}>
+		<!-- Glow -->
+		<circle fill={starColor} cx="90" cy="20" r="8" opacity="0.3" />
+		<circle fill={starColor} cx="90" cy="20" r="5" opacity="0.5" />
+		<!-- Core -->
+		<circle fill={starColor} cx="90" cy="20" r="3" />
+	</g>
+</svg>
+
+<style>
+	@keyframes shoot {
+		0% {
+			transform: translateX(-100%) translateY(20px);
+			opacity: 0;
+		}
+		10% {
+			opacity: 1;
+		}
+		90% {
+			opacity: 1;
+		}
+		100% {
+			transform: translateX(100%) translateY(-20px);
+			opacity: 0;
+		}
+	}
+
+	@keyframes trail-shimmer {
+		0%, 100% { opacity: 0.8; }
+		50% { opacity: 1; }
+	}
+
+	.shoot {
+		animation: shoot 2s ease-in-out infinite;
+		animation-delay: var(--shoot-delay, 0s);
+	}
+
+	.trail {
+		animation: trail-shimmer 0.3s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/sky/StarShooting.svelte.d.ts

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

package/dist/ui/components/nature/sky/Sun.svelte

@@ -0,0 +1,70 @@
+<!--
+  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;
+		rays?: boolean;
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-12 h-12',
+		color,
+		rays = true,
+		animate = true
+	}: Props = $props();
+
+	const sunColor = $derived(color ?? accents.flower.yellow);
+</script>
+
+<!-- Sun with optional rays -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+	{#if rays}
+		<!-- Sun rays -->
+		<g class={animate ? 'spin' : ''} opacity="0.8">
+			<line x1="50" y1="5" x2="50" y2="20" stroke={sunColor} stroke-width="3" stroke-linecap="round" />
+			<line x1="50" y1="80" x2="50" y2="95" stroke={sunColor} stroke-width="3" stroke-linecap="round" />
+			<line x1="5" y1="50" x2="20" y2="50" stroke={sunColor} stroke-width="3" stroke-linecap="round" />
+			<line x1="80" y1="50" x2="95" y2="50" stroke={sunColor} stroke-width="3" stroke-linecap="round" />
+			<!-- Diagonal rays -->
+			<line x1="18" y1="18" x2="28" y2="28" stroke={sunColor} stroke-width="2.5" stroke-linecap="round" />
+			<line x1="72" y1="28" x2="82" y2="18" stroke={sunColor} stroke-width="2.5" stroke-linecap="round" />
+			<line x1="18" y1="82" x2="28" y2="72" stroke={sunColor} stroke-width="2.5" stroke-linecap="round" />
+			<line x1="72" y1="72" x2="82" y2="82" stroke={sunColor} stroke-width="2.5" stroke-linecap="round" />
+		</g>
+	{/if}
+
+	<!-- Sun body -->
+	<circle fill={sunColor} cx="50" cy="50" r="25" class={animate ? 'pulse' : ''} />
+
+	<!-- Inner glow -->
+	<circle fill="white" cx="50" cy="50" r="15" opacity="0.3" />
+</svg>
+
+<style>
+	@keyframes spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+
+	@keyframes pulse {
+		0%, 100% { transform: scale(1); }
+		50% { transform: scale(1.02); }
+	}
+
+	.spin {
+		transform-origin: center center;
+		animation: spin 60s linear infinite;
+	}
+
+	.pulse {
+		transform-origin: center center;
+		animation: pulse 4s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/sky/Sun.svelte.d.ts

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

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

@@ -0,0 +1,8 @@
+export { default as Cloud } from './Cloud.svelte';
+export { default as CloudWispy } from './CloudWispy.svelte';
+export { default as Moon } from './Moon.svelte';
+export { default as Rainbow } from './Rainbow.svelte';
+export { default as Star } from './Star.svelte';
+export { default as StarCluster } from './StarCluster.svelte';
+export { default as StarShooting } from './StarShooting.svelte';
+export { default as Sun } from './Sun.svelte';

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

@@ -0,0 +1,9 @@
+// Sky components - celestial elements
+export { default as Cloud } from './Cloud.svelte';
+export { default as CloudWispy } from './CloudWispy.svelte';
+export { default as Moon } from './Moon.svelte';
+export { default as Rainbow } from './Rainbow.svelte';
+export { default as Star } from './Star.svelte';
+export { default as StarCluster } from './StarCluster.svelte';
+export { default as StarShooting } from './StarShooting.svelte';
+export { default as Sun } from './Sun.svelte';

package/dist/ui/components/nature/structural/Birdhouse.svelte

@@ -0,0 +1,53 @@
+<!--
+  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;
+		bodyColor?: string;
+		roofColor?: string;
+	}
+
+	let {
+		class: className = 'w-8 h-12',
+		bodyColor,
+		roofColor
+	}: Props = $props();
+
+	const body = $derived(bodyColor ?? earth.sand);
+	const roof = $derived(roofColor ?? bark.warmBark);
+	const pole = bark.bark;
+	const hole = bark.darkBark;
+	const perch = bark.lightBark;
+</script>
+
+<!-- Birdhouse on pole -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 80">
+	<!-- Pole -->
+	<rect fill={pole} x="22" y="50" width="6" height="30" />
+
+	<!-- House body -->
+	<rect fill={body} x="10" y="25" width="30" height="28" rx="2" />
+
+	<!-- Roof -->
+	<polygon fill={roof} points="5,27 25,8 45,27" />
+	<!-- Roof overhang shadow -->
+	<polygon fill={bark.darkBark} points="8,27 25,12 42,27 40,27 25,14 10,27" opacity="0.3" />
+
+	<!-- Entrance hole -->
+	<circle fill={hole} cx="25" cy="38" r="6" />
+
+	<!-- Perch -->
+	<rect fill={perch} x="22" y="48" width="6" height="3" rx="1" />
+	<ellipse fill={perch} cx="25" cy="51" rx="4" ry="2" />
+
+	<!-- Roof detail lines -->
+	<line x1="25" y1="10" x2="25" y2="26" stroke={bark.darkBark} stroke-width="1" opacity="0.3" />
+
+	<!-- Body highlight -->
+	<rect fill="white" x="12" y="27" width="8" height="24" rx="1" opacity="0.1" />
+</svg>

package/dist/ui/components/nature/structural/Birdhouse.svelte.d.ts

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

package/dist/ui/components/nature/structural/Bridge.svelte

@@ -0,0 +1,65 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark, earth } from '../palette';
+
+	interface Props {
+		class?: string;
+		woodColor?: string;
+	}
+
+	let {
+		class: className = 'w-20 h-12',
+		woodColor
+	}: Props = $props();
+
+	const wood = $derived(woodColor ?? bark.warmBark);
+	const railColor = $derived(bark.bark);
+	const shadow = $derived(bark.darkBark);
+</script>
+
+<!-- Small wooden bridge -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 70">
+	<!-- Shadow under bridge -->
+	<ellipse fill="rgba(0,0,0,0.1)" cx="60" cy="65" rx="55" ry="8" />
+
+	<!-- Bridge deck (arched) -->
+	<path
+		fill={wood}
+		d="M5 50 Q60 30 115 50 L115 58 Q60 38 5 58 Z"
+	/>
+
+	<!-- Deck planks -->
+	<line x1="20" y1="42" x2="20" y2="54" stroke={shadow} stroke-width="1" opacity="0.3" />
+	<line x1="35" y1="38" x2="35" y2="50" stroke={shadow} stroke-width="1" opacity="0.3" />
+	<line x1="50" y1="35" x2="50" y2="47" stroke={shadow} stroke-width="1" opacity="0.3" />
+	<line x1="65" y1="34" x2="65" y2="46" stroke={shadow} stroke-width="1" opacity="0.3" />
+	<line x1="80" y1="36" x2="80" y2="48" stroke={shadow} stroke-width="1" opacity="0.3" />
+	<line x1="95" y1="40" x2="95" y2="52" stroke={shadow} stroke-width="1" opacity="0.3" />
+
+	<!-- Left railing -->
+	<rect fill={railColor} x="8" y="25" width="4" height="30" rx="1" />
+	<rect fill={railColor} x="22" y="20" width="4" height="28" rx="1" />
+	<!-- Railing top bar -->
+	<path fill="none" stroke={railColor} stroke-width="3" d="M10 25 Q30 15 40 18" />
+
+	<!-- Right railing -->
+	<rect fill={railColor} x="108" y="25" width="4" height="30" rx="1" />
+	<rect fill={railColor} x="94" y="20" width="4" height="28" rx="1" />
+	<!-- Railing top bar -->
+	<path fill="none" stroke={railColor} stroke-width="3" d="M110 25 Q90 15 80 18" />
+
+	<!-- Deck edge highlight -->
+	<path
+		fill={bark.lightBark}
+		d="M8 50 Q60 30 112 50 L112 52 Q60 32 8 52 Z"
+		opacity="0.3"
+	/>
+
+	<!-- Ground at ends -->
+	<ellipse fill={earth.mud} cx="10" cy="60" rx="12" ry="5" opacity="0.5" />
+	<ellipse fill={earth.mud} cx="110" cy="60" rx="12" ry="5" opacity="0.5" />
+</svg>

package/dist/ui/components/nature/structural/Bridge.svelte.d.ts

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