@autumnsgrove/groveengine 0.7.0 → 0.8.0

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, spring } 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: spring.tulipRed,
+		pink: spring.tulipPink,
+		yellow: spring.daffodil,
+		purple: spring.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';