@autumnsgrove/groveengine 0.7.0 → 0.8.5

package/dist/ui/components/nature/ground/GrassTuft.svelte

@@ -0,0 +1,49 @@
+<!--
+  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;
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color,
+		season = 'summer',
+		animate = true
+	}: Props = $props();
+
+	// Grass turns golden/straw in autumn
+	const defaultColor = $derived(season === 'autumn' ? autumn.straw : greens.meadow);
+	const grassColor = $derived(color ?? defaultColor);
+</script>
+
+<!-- Cluster of grass blades -->
+<svg class="{className} {animate ? 'sway' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 50">
+	<!-- Grass blades - varying heights and angles -->
+	<path fill={grassColor} d="M20 50 L18 50 Q16 30 12 10 Q14 8 16 10 Q19 28 20 50" />
+	<path fill={grassColor} d="M22 50 L24 50 Q26 25 30 5 Q28 3 26 5 Q23 22 22 50" />
+	<path fill={grassColor} d="M18 50 L16 50 Q10 35 4 20 Q6 18 8 20 Q14 32 18 50" />
+	<path fill={grassColor} d="M24 50 L26 50 Q32 30 38 15 Q36 13 34 15 Q28 28 24 50" />
+	<path fill={grassColor} d="M20 50 L22 50 Q22 35 24 18 Q22 16 20 18 Q20 32 20 50" />
+</svg>
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: skewX(0deg); }
+		50% { transform: skewX(2deg); }
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 2.5s ease-in-out infinite;
+	}
+</style>

package/dist/ui/components/nature/ground/GrassTuft.svelte.d.ts

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

package/dist/ui/components/nature/ground/Log.svelte

@@ -0,0 +1,42 @@
+<!--
+  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;
+		barkColor?: string;
+	}
+
+	let {
+		class: className = 'w-12 h-4',
+		barkColor
+	}: Props = $props();
+
+	const barkFill = $derived(barkColor ?? bark.warmBark);
+	const innerColor = earth.sand;
+	const ringColor = bark.bark;
+</script>
+
+<!-- Fallen log -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 35">
+	<!-- Main log body -->
+	<path fill={barkFill} d="M15 8 L85 5 Q95 10 95 20 Q95 30 85 32 L15 30 Q5 25 5 18 Q5 12 15 8" />
+
+	<!-- Log end (cut face) -->
+	<ellipse fill={innerColor} cx="90" cy="18" rx="8" ry="14" />
+	<ellipse fill="none" stroke={ringColor} stroke-width="1" cx="90" cy="18" rx="5" ry="10" opacity="0.5" />
+	<ellipse fill="none" stroke={ringColor} stroke-width="0.5" cx="90" cy="18" rx="2" ry="5" opacity="0.4" />
+
+	<!-- Bark texture -->
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M20 10 Q22 18 20 28" opacity="0.3" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M40 8 Q42 18 40 30" opacity="0.3" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M60 6 Q62 17 60 31" opacity="0.3" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M75 6 Q77 17 75 31" opacity="0.3" />
+
+	<!-- Highlight -->
+	<path fill={earth.clay} d="M20 10 Q50 6 80 7 Q50 12 20 14" opacity="0.2" />
+</svg>

package/dist/ui/components/nature/ground/Log.svelte.d.ts

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

package/dist/ui/components/nature/ground/Mushroom.svelte

@@ -0,0 +1,48 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents, earth } from '../palette';
+
+	interface Props {
+		class?: string;
+		capColor?: string;
+		stemColor?: string;
+		spotted?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		capColor,
+		stemColor,
+		spotted = true
+	}: Props = $props();
+
+	const cap = $derived(capColor ?? accents.mushroom.redCap);
+	const stem = $derived(stemColor ?? earth.sand);
+	const spots = accents.mushroom.spots;
+</script>
+
+<!-- Classic toadstool mushroom -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 70">
+	<!-- Stem -->
+	<path fill={stem} d="M22 40 Q20 55 18 70 L42 70 Q40 55 38 40 Q30 38 22 40" />
+
+	<!-- Cap -->
+	<ellipse fill={cap} cx="30" cy="28" rx="28" ry="20" />
+	<ellipse fill={cap} cx="30" cy="38" rx="20" ry="6" />
+
+	<!-- Spots -->
+	{#if spotted}
+		<circle fill={spots} cx="20" cy="22" r="4" />
+		<circle fill={spots} cx="38" cy="18" r="5" />
+		<circle fill={spots} cx="30" cy="30" r="3" />
+		<circle fill={spots} cx="44" cy="28" r="3" />
+		<circle fill={spots} cx="14" cy="32" r="2.5" />
+	{/if}
+
+	<!-- Cap underside hint -->
+	<ellipse fill={accents.mushroom.gill} cx="30" cy="40" rx="14" ry="3" opacity="0.6" />
+</svg>

package/dist/ui/components/nature/ground/Mushroom.svelte.d.ts

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

package/dist/ui/components/nature/ground/MushroomCluster.svelte

@@ -0,0 +1,41 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents, earth } from '../palette';
+
+	interface Props {
+		class?: string;
+		capColor?: string;
+		stemColor?: string;
+	}
+
+	let {
+		class: className = 'w-8 h-8',
+		capColor,
+		stemColor
+	}: Props = $props();
+
+	const cap = $derived(capColor ?? accents.mushroom.brownCap);
+	const stem = $derived(stemColor ?? earth.sand);
+</script>
+
+<!-- Cluster of small mushrooms -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 60">
+	<!-- Large mushroom (center) -->
+	<path fill={stem} d="M36 32 Q34 45 33 60 L47 60 Q46 45 44 32 Q40 30 36 32" />
+	<ellipse fill={cap} cx="40" cy="24" rx="18" ry="14" />
+	<ellipse fill={cap} cx="40" cy="32" rx="12" ry="4" />
+
+	<!-- Small mushroom (left) -->
+	<path fill={stem} d="M12 42 Q11 50 10 60 L22 60 Q21 50 20 42 Q16 40 12 42" />
+	<ellipse fill={cap} cx="16" cy="36" rx="12" ry="10" />
+	<ellipse fill={cap} cx="16" cy="42" rx="8" ry="3" />
+
+	<!-- Tiny mushroom (right) -->
+	<path fill={stem} d="M60 48 Q59 54 58 60 L68 60 Q67 54 66 48 Q63 46 60 48" />
+	<ellipse fill={cap} cx="63" cy="43" rx="9" ry="7" />
+	<ellipse fill={cap} cx="63" cy="48" rx="6" ry="2" />
+</svg>

package/dist/ui/components/nature/ground/MushroomCluster.svelte.d.ts

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

package/dist/ui/components/nature/ground/Rock.svelte

@@ -0,0 +1,59 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { earth } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		variant?: 'round' | 'flat' | 'jagged';
+	}
+
+	let {
+		class: className = 'w-6 h-4',
+		color,
+		variant = 'round'
+	}: Props = $props();
+
+	const rockColor = $derived(color ?? earth.stone);
+	const highlightColor = earth.pebble;
+	const shadowColor = earth.slate;
+</script>
+
+<!-- Rock/stone - matte natural appearance -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40">
+	{#if variant === 'round'}
+		<!-- Rounded boulder with natural matte finish -->
+		<ellipse fill={rockColor} cx="30" cy="26" rx="27" ry="14" />
+		<!-- Subtle surface variation instead of shiny highlight -->
+		<ellipse fill={highlightColor} cx="22" cy="22" rx="8" ry="4" opacity="0.15" />
+		<ellipse fill={highlightColor} cx="35" cy="20" rx="5" ry="3" opacity="0.1" />
+		<!-- Darker underside shadow -->
+		<ellipse fill={shadowColor} cx="30" cy="32" rx="20" ry="5" opacity="0.15" />
+		<!-- Surface texture marks -->
+		<path fill={shadowColor} d="M18 24 Q20 26 22 24" opacity="0.12" stroke={shadowColor} stroke-width="0.5" />
+		<path fill={shadowColor} d="M38 22 Q40 24 42 23" opacity="0.1" stroke={shadowColor} stroke-width="0.5" />
+	{:else if variant === 'flat'}
+		<!-- Flat stepping stone with weathered look -->
+		<ellipse fill={rockColor} cx="30" cy="28" rx="27" ry="11" />
+		<!-- Subtle worn surface -->
+		<ellipse fill={highlightColor} cx="24" cy="26" rx="12" ry="4" opacity="0.12" />
+		<ellipse fill={highlightColor} cx="38" cy="25" rx="6" ry="3" opacity="0.08" />
+		<!-- Surface cracks/weathering -->
+		<path fill="none" stroke={shadowColor} stroke-width="0.5" d="M20 28 L28 27" opacity="0.15" />
+		<path fill="none" stroke={shadowColor} stroke-width="0.5" d="M35 29 L40 28" opacity="0.12" />
+	{:else}
+		<!-- Jagged rock with rough texture -->
+		<polygon fill={rockColor} points="5,40 15,22 28,38 38,12 48,28 55,18 58,40" />
+		<!-- Muted face highlights -->
+		<polygon fill={highlightColor} points="15,22 28,38 38,12 32,20 24,32" opacity="0.12" />
+		<!-- Shadowed face -->
+		<polygon fill={shadowColor} points="38,12 48,28 55,18 58,40 48,38 44,25" opacity="0.15" />
+		<!-- Surface texture -->
+		<path fill="none" stroke={shadowColor} stroke-width="0.5" d="M22 30 L26 28" opacity="0.15" />
+		<path fill="none" stroke={shadowColor} stroke-width="0.5" d="M42 25 L46 28" opacity="0.12" />
+	{/if}
+</svg>

package/dist/ui/components/nature/ground/Rock.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    class?: string;
+    color?: string;
+    variant?: 'round' | 'flat' | 'jagged';
+}
+declare const Rock: import("svelte").Component<Props, {}, "">;
+type Rock = ReturnType<typeof Rock>;
+export default Rock;

package/dist/ui/components/nature/ground/Stump.svelte

@@ -0,0 +1,44 @@
+<!--
+  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;
+		barkColor?: string;
+		ringColor?: string;
+	}
+
+	let {
+		class: className = 'w-8 h-6',
+		barkColor,
+		ringColor
+	}: Props = $props();
+
+	const barkFill = $derived(barkColor ?? bark.warmBark);
+	const ringFill = $derived(ringColor ?? earth.sand);
+	const centerColor = bark.lightBark;
+</script>
+
+<!-- Tree stump with visible rings -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 50">
+	<!-- Bark exterior -->
+	<path fill={barkFill} d="M10 20 Q8 35 5 50 L65 50 Q62 35 60 20 Q35 15 10 20" />
+
+	<!-- Top surface -->
+	<ellipse fill={ringFill} cx="35" cy="20" rx="28" ry="12" />
+
+	<!-- Tree rings -->
+	<ellipse fill="none" stroke={barkFill} stroke-width="1.5" cx="35" cy="20" rx="22" ry="9" opacity="0.6" />
+	<ellipse fill="none" stroke={barkFill} stroke-width="1" cx="35" cy="20" rx="16" ry="6" opacity="0.5" />
+	<ellipse fill="none" stroke={barkFill} stroke-width="1" cx="35" cy="20" rx="10" ry="4" opacity="0.4" />
+	<ellipse fill={centerColor} cx="35" cy="20" rx="4" ry="2" opacity="0.6" />
+
+	<!-- Bark texture lines -->
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M15 25 Q14 35 12 45" opacity="0.4" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M55 25 Q56 35 58 45" opacity="0.4" />
+	<path fill="none" stroke={bark.darkBark} stroke-width="1" d="M35 32 L35 48" opacity="0.3" />
+</svg>

package/dist/ui/components/nature/ground/Stump.svelte.d.ts

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

package/dist/ui/components/nature/ground/Tulip.svelte

@@ -0,0 +1,79 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { greens, wildflowers } from '../palette';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		petalColor?: string;
+		stemColor?: string;
+		variant?: 'red' | 'pink' | 'yellow' | 'purple';
+		animate?: boolean;
+	}
+
+	let {
+		class: className = 'w-4 h-8',
+		style,
+		petalColor,
+		stemColor,
+		variant = 'red',
+		animate = true
+	}: Props = $props();
+
+	// Tulip color variants
+	const variantColors = {
+		red: wildflowers.tulipRed,
+		pink: wildflowers.tulipPink,
+		yellow: wildflowers.daffodil,
+		purple: wildflowers.crocus
+	};
+
+	const petals = $derived(petalColor ?? variantColors[variant]);
+	const stem = $derived(stemColor ?? greens.deepGreen);
+
+	// Slightly darker shade for inner petals
+	const innerPetal = $derived(variant === 'red' ? '#e11d48' :
+		variant === 'pink' ? '#f472b6' :
+		variant === 'yellow' ? '#facc15' :
+		'#8b5cf6');
+</script>
+
+<!-- Classic tulip - spring icon -->
+<svg class="{className} {animate ? 'sway' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 80" style={style}>
+	<!-- Stem -->
+	<path fill="none" stroke={stem} stroke-width="3" d="M20 80 Q18 60 20 40" />
+
+	<!-- Leaves -->
+	<path fill={stem} d="M20 70 Q8 60 5 65 Q12 55 20 60" />
+	<path fill={stem} d="M20 60 Q32 50 35 55 Q28 45 20 52" />
+
+	<!-- Tulip bloom - cup shape with overlapping petals -->
+	<!-- Back petals -->
+	<path fill={innerPetal} d="M10 35 Q8 20 15 10 Q20 5 25 10 Q32 20 30 35 Q20 38 10 35" />
+
+	<!-- Side petals -->
+	<path fill={petals} d="M8 36 Q5 25 10 12 Q15 5 20 10 Q12 15 10 25 Q8 32 8 36" />
+	<path fill={petals} d="M32 36 Q35 25 30 12 Q25 5 20 10 Q28 15 30 25 Q32 32 32 36" />
+
+	<!-- Front petal -->
+	<path fill={petals} d="M12 38 Q10 30 15 18 Q20 12 25 18 Q30 30 28 38 Q20 42 12 38" />
+
+	<!-- Petal highlights -->
+	<path fill="white" d="M18 20 Q20 15 22 20 Q20 25 18 20" opacity="0.2" />
+</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;
+	}
+</style>

package/dist/ui/components/nature/ground/Tulip.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    class?: string;
+    style?: string;
+    petalColor?: string;
+    stemColor?: string;
+    variant?: 'red' | 'pink' | 'yellow' | 'purple';
+    animate?: boolean;
+}
+declare const Tulip: import("svelte").Component<Props, {}, "">;
+type Tulip = ReturnType<typeof Tulip>;
+export default Tulip;

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

@@ -0,0 +1,12 @@
+export { default as Bush } from './Bush.svelte';
+export { default as Crocus } from './Crocus.svelte';
+export { default as Daffodil } from './Daffodil.svelte';
+export { default as Fern } from './Fern.svelte';
+export { default as FlowerWild } from './FlowerWild.svelte';
+export { default as GrassTuft } from './GrassTuft.svelte';
+export { default as Log } from './Log.svelte';
+export { default as Mushroom } from './Mushroom.svelte';
+export { default as MushroomCluster } from './MushroomCluster.svelte';
+export { default as Rock } from './Rock.svelte';
+export { default as Stump } from './Stump.svelte';
+export { default as Tulip } from './Tulip.svelte';

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

@@ -0,0 +1,13 @@
+// Ground components - forest floor elements
+export { default as Bush } from './Bush.svelte';
+export { default as Crocus } from './Crocus.svelte';
+export { default as Daffodil } from './Daffodil.svelte';
+export { default as Fern } from './Fern.svelte';
+export { default as FlowerWild } from './FlowerWild.svelte';
+export { default as GrassTuft } from './GrassTuft.svelte';
+export { default as Log } from './Log.svelte';
+export { default as Mushroom } from './Mushroom.svelte';
+export { default as MushroomCluster } from './MushroomCluster.svelte';
+export { default as Rock } from './Rock.svelte';
+export { default as Stump } from './Stump.svelte';
+export { default as Tulip } from './Tulip.svelte';

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

@@ -0,0 +1,28 @@
+/**
+ * Nature Components - Grove's organic visual library
+ *
+ * A collection of SVG components for creating atmospheric forest scenes.
+ * These components are seasonally-aware and support Grove's four seasons.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Logo, TreePine, Cardinal } from '@autumnsgrove/groveengine/ui/nature';
+ *   import { autumn } from '@autumnsgrove/groveengine/ui/nature';
+ * </script>
+ *
+ * <Logo season="autumn" animate />
+ * <TreePine season="winter" />
+ * <Cardinal />
+ * ```
+ */
+export { default as Logo } from './Logo.svelte';
+export * from './palette';
+export * from './trees';
+export * from './botanical';
+export * from './creatures';
+export * from './ground';
+export * from './sky';
+export * from './structural';
+export * from './water';
+export * from './weather';

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

@@ -0,0 +1,38 @@
+/**
+ * Nature Components - Grove's organic visual library
+ *
+ * A collection of SVG components for creating atmospheric forest scenes.
+ * These components are seasonally-aware and support Grove's four seasons.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Logo, TreePine, Cardinal } from '@autumnsgrove/groveengine/ui/nature';
+ *   import { autumn } from '@autumnsgrove/groveengine/ui/nature';
+ * </script>
+ *
+ * <Logo season="autumn" animate />
+ * <TreePine season="winter" />
+ * <Cardinal />
+ * ```
+ */
+// Logo - Grove's tree-star logo
+export { default as Logo } from './Logo.svelte';
+// Palette - Seasonal color system
+export * from './palette';
+// Trees
+export * from './trees';
+// Botanical elements
+export * from './botanical';
+// Creatures
+export * from './creatures';
+// Ground elements
+export * from './ground';
+// Sky elements
+export * from './sky';
+// Structural elements
+export * from './structural';
+// Water elements
+export * from './water';
+// Weather effects
+export * from './weather';