@autumnsgrove/groveengine 0.7.0 → 0.8.0

package/dist/ui/components/ui/Logo.svelte

@@ -2,12 +2,19 @@
 	/**
 	 * Grove Logo Component
 	 *
-	 * A logo that respects the user's accent color by default.
-	 * The foliage uses `currentColor` which inherits from --accent-color
-	 * when placed in an accent-colored context, or can be overridden.
+	 * A seasonal logo with beautiful nature-inspired colors.
+	 * Defaults to summer (emerald green) but supports all seasons.
 	 *
 	 * The trunk defaults to Grove's classic bark brown (#5d4037).
 	 *
+	 * @example Basic usage
+	 * ```svelte
+	 * <Logo />  <!-- Summer green by default -->
+	 * <Logo season="spring" />  <!-- Cherry blossom pink -->
+	 * <Logo season="autumn" />  <!-- Warm orange -->
+	 * <Logo season="winter" />  <!-- Frosted green -->
+	 * ```
+	 *
 	 * @example Loading state (breathing animation)
 	 * ```svelte
 	 * <Logo breathing />
@@ -20,18 +27,27 @@
 	import { cubicInOut } from 'svelte/easing';
 	import { browser } from '$app/environment';
 
+	type Season = 'spring' | 'summer' | 'autumn' | 'winter';
 	type BreathingSpeed = 'slow' | 'normal' | 'fast';
 
+	// Seasonal color palette - matches GlassLogo for consistency
+	const seasonalColors = {
+		spring: '#f472b6',    // pink-400 - cherry blossom
+		summer: '#10b981',    // emerald-500 - lush growth
+		autumn: '#fb923c',    // orange-400 - warm harvest
+		winter: '#86efac'     // green-300 - frosted evergreen
+	} as const;
+
 	interface Props {
 		class?: string;
-		/** Foliage color - defaults to currentColor (inherits accent) */
+		/** Seasonal color theme - defaults to summer */
+		season?: Season;
+		/** Custom foliage color - overrides season if provided */
 		color?: string;
 		/** Trunk color - defaults to classic bark brown */
 		trunkColor?: string;
 		/** Whether foliage and trunk should be the same color */
 		monochrome?: boolean;
-		/** Add subtle sway animation */
-		animate?: boolean;
 		/** Add breathing animation (for loading states, not lists) */
 		breathing?: boolean;
 		/** Breathing animation speed - 'slow' (1500ms), 'normal' (800ms), 'fast' (400ms) */
@@ -40,10 +56,10 @@
 
 	let {
 		class: className = 'w-6 h-6',
+		season = 'summer',
 		color,
 		trunkColor,
 		monochrome = false,
-		animate = false,
 		breathing = false,
 		breathingSpeed = 'normal'
 	}: Props = $props();
@@ -69,11 +85,11 @@
 	// Classic bark brown from the nature palette
 	const BARK_BROWN = '#5d4037';
 
-	// Compute actual colors
-	const foliageColor = color ?? 'currentColor';
-	const actualTrunkColor = monochrome
+	// Compute actual colors - use custom color if provided, otherwise use seasonal color
+	const foliageColor = $derived(color ?? seasonalColors[season]);
+	const actualTrunkColor = $derived(monochrome
 		? foliageColor
-		: (trunkColor ?? BARK_BROWN);
+		: (trunkColor ?? BARK_BROWN));
 
 	// Breathing animation using tweened store (duration set dynamically in $effect)
 	const breathValue = tweened(0, { easing: cubicInOut });
@@ -123,53 +139,43 @@
 	const bottomLeftTransform = $derived(`translate(${-diagExpansion}, ${diagExpansion})`);
 	const bottomRightTransform = $derived(`translate(${diagExpansion}, ${diagExpansion})`);
 
-	// Build animation classes (sway only, breathing uses transforms)
-	const animationClass = $derived(animate && !breathing ? 'grove-logo-sway' : '');
-
-	// Decomposed foliage paths (8 pieces) for breathing animation
-	// Original path: "M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"
-	// Decomposed by tracing path commands and isolating geometric boundaries where arms meet center.
-	// If modifying, ensure pieces align at rest (breathValue=0) to match the original silhouette.
+	// Decomposed foliage paths for breathing animation
+	// Each bar extends toward the center so they overlap at rest, forming the complete logo
+	// When expanded, the overlapping regions separate creating the burst effect
 
-	// Center anchor - the hub where all branches connect (stays stationary)
-	const centerPath = "M126 173.468 L171.476 124.872 L171.476 173.468 L126 173.468 M245.562 124.872 L290.972 173.268 L245.562 173.268 L245.562 124.872 M126.664 243.97 L171.476 243.97 L171.476 173.468 L126 173.468 L126.664 243.97 M290.252 243.77 L245.562 243.77 L245.562 173.268 L290.972 173.268 L290.252 243.77 M171.476 243.97 L208.519 258.11 L245.562 243.77 L245.562 173.268 L171.476 173.468 L171.476 243.97";
+	// Left horizontal bar - extends right to center
+	const leftBarPath = "M0 173.468 L171.476 173.468 L171.476 243.97 L0 243.97 Z";
 
-	// Left horizontal bar
-	const leftBarPath = "M0 173.468 L126 173.468 L126.664 243.97 L0 243.97 Z";
+	// Right horizontal bar - extends left to center
+	const rightBarPath = "M245.562 173.268 L417 173.268 L417 243.77 L245.562 243.77 Z";
 
-	// Right horizontal bar
-	const rightBarPath = "M290.972 173.268 L417 173.268 L417 243.77 L290.252 243.77 Z";
+	// Top vertical bar - extends down to center
+	const topBarPath = "M171.476 0 L245.562 0 L245.562 173.468 L171.476 173.468 Z";
 
-	// Top vertical bar
-	const topBarPath = "M171.476 0 L245.562 0 L245.562 124.872 L171.476 124.872 Z";
+	// Top-left diagonal - arrow with extended inner edge
+	const topLeftDiagPath = "M171.476 173.468 L171.476 124.872 L86.037 37.043 L36.446 88.028 L126 173.468 Z";
 
-	// Top-left diagonal branch (arrow shape)
-	const topLeftDiagPath = "M126.068 173.468 L36.446 88.028 L86.037 37.043 L171.476 124.872 Z";
+	// Top-right diagonal - arrow with extended inner edge
+	const topRightDiagPath = "M245.562 173.268 L245.562 124.872 L331 37.243 L380.552 88.028 L290.972 173.268 Z";
 
-	// Top-right diagonal branch (arrow shape)
-	const topRightDiagPath = "M245.562 124.872 L331 37.243 L380.552 88.028 L290.972 173.268 Z";
+	// Bottom-left diagonal - arrow with extended inner edge to center point
+	const bottomLeftDiagPath = "M171.476 243.97 L208.519 258.11 L86.037 381.192 L36.446 331.601 L126.664 243.97 Z";
 
-	// Bottom-left diagonal branch (arrow shape)
-	const bottomLeftDiagPath = "M126.664 243.97 L36.446 331.601 L86.037 381.192 L208.519 258.11 L171.476 243.97 Z";
-
-	// Bottom-right diagonal branch (arrow shape)
-	const bottomRightDiagPath = "M290.252 243.77 L380.435 331.399 L331 381.192 L208.519 258.11 L245.562 243.77 Z";
+	// Bottom-right diagonal - arrow with extended inner edge to center point
+	const bottomRightDiagPath = "M245.562 243.77 L208.519 258.11 L331 381.192 L380.435 331.399 L290.252 243.77 Z";
 </script>
 
 <svg
-	class="{className} {animationClass}"
+	class={className}
 	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 417 512.238"
+	viewBox="0 -30 417 542.238"
 	aria-label="Grove logo"
 >
 	<!-- Trunk (always static) -->
 	<path fill={actualTrunkColor} d="M171.274 344.942h74.09v167.296h-74.09V344.942z"/>
 
 	{#if breathing}
-		<!-- Decomposed foliage with breathing animation -->
-
-		<!-- Center anchor (stationary) -->
-		<path fill={foliageColor} d={centerPath}/>
+		<!-- Decomposed foliage with breathing animation - bars expand outward from center -->
 
 		<!-- Left horizontal bar -->
 		<g transform={leftTransform}>
@@ -211,14 +217,3 @@
 	{/if}
 </svg>
 
-<style>
-	@keyframes grove-logo-sway {
-		0%, 100% { transform: rotate(0deg); }
-		50% { transform: rotate(1deg); }
-	}
-
-	.grove-logo-sway {
-		transform-origin: center bottom;
-		animation: grove-logo-sway 4s ease-in-out infinite;
-	}
-</style>

package/dist/ui/components/ui/Logo.svelte.d.ts

@@ -1,14 +1,15 @@
+type Season = 'spring' | 'summer' | 'autumn' | 'winter';
 type BreathingSpeed = 'slow' | 'normal' | 'fast';
 interface Props {
     class?: string;
-    /** Foliage color - defaults to currentColor (inherits accent) */
+    /** Seasonal color theme - defaults to summer */
+    season?: Season;
+    /** Custom foliage color - overrides season if provided */
     color?: string;
     /** Trunk color - defaults to classic bark brown */
     trunkColor?: string;
     /** Whether foliage and trunk should be the same color */
     monochrome?: boolean;
-    /** Add subtle sway animation */
-    animate?: boolean;
     /** Add breathing animation (for loading states, not lists) */
     breathing?: boolean;
     /** Breathing animation speed - 'slow' (1500ms), 'normal' (800ms), 'fast' (400ms) */

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

@@ -19,7 +19,9 @@ export { default as Glass } from './Glass.svelte';
 export { default as GlassButton } from './GlassButton.svelte';
 export { default as GlassCard } from './GlassCard.svelte';
 export { default as GlassConfirmDialog } from './GlassConfirmDialog.svelte';
+export { default as GlassNavbar } from './GlassNavbar.svelte';
 export { default as GlassOverlay } from './GlassOverlay.svelte';
+export { default as GlassLogo } from './GlassLogo.svelte';
 export { TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption, } from '../primitives/table';
 export * from './toast.js';
 export declare const UI_VERSION = "0.2.0";

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

@@ -28,7 +28,9 @@ export { default as Glass } from './Glass.svelte';
 export { default as GlassButton } from './GlassButton.svelte';
 export { default as GlassCard } from './GlassCard.svelte';
 export { default as GlassConfirmDialog } from './GlassConfirmDialog.svelte';
+export { default as GlassNavbar } from './GlassNavbar.svelte';
 export { default as GlassOverlay } from './GlassOverlay.svelte';
+export { default as GlassLogo } from './GlassLogo.svelte';
 // Table sub-components (from primitives)
 export { TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption, } from '../primitives/table';
 // Toast utility

package/dist/ui/styles/grove.css

@@ -681,12 +681,26 @@
    ═══════════════════════════════════════════════════════════════ */
 
 @layer utilities {
-  /* Organic backgrounds */
+  /* ─────────────────────────────────────────────────────────────
+     ORGANIC BACKGROUNDS
+     Subtle vine/leaf patterns that create the Grove atmosphere
+     ───────────────────────────────────────────────────────────── */
+
+  /* Simple leaf pattern - basic organic texture */
   .bg-leaf-pattern {
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c-5 8-15 12-15 20s10 15 15 25c5-10 15-17 15-25S35 13 30 5z' fill='%2316a34a' fill-opacity='0.03'/%3E%3C/svg%3E");
     background-repeat: repeat;
   }
 
+  /* Elaborate vine pattern - flowing vines with leaves and ferns */
+  .leaf-pattern {
+    background-image: url("data:image/svg+xml,%3Csvg width='450' height='450' viewBox='0 0 450 450' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2322c55e' stroke-linecap='round'%3E%3C!-- Long flowing vine 1 - dramatic S-curve --%3E%3Cpath d='M-30 420 C50 380 30 320 80 260 S150 180 120 120 S180 40 140 -30' stroke-width='1.5' opacity='0.12'/%3E%3C!-- Long flowing vine 2 - opposite sweep --%3E%3Cpath d='M480 380 C400 350 420 280 360 230 S280 160 310 100 S250 30 290 -20' stroke-width='1.4' opacity='0.10'/%3E%3C!-- Diagonal vine crossing --%3E%3Cpath d='M-20 280 C60 250 100 220 160 200 S250 160 320 170 S400 130 470 100' stroke-width='1.2' opacity='0.09'/%3E%3C!-- Vertical accent vine --%3E%3Cpath d='M200 480 C180 420 210 360 190 300 S220 220 200 160 S230 80 210 20' stroke-width='1.1' opacity='0.08'/%3E%3C!-- Wandering vine --%3E%3Cpath d='M350 480 C330 430 360 380 340 320 S380 260 350 200' stroke-width='1' opacity='0.08'/%3E%3C!-- Spiral tendrils scattered --%3E%3Cpath d='M80 260 Q100 250 108 238 Q115 225 105 215 Q95 208 85 215' stroke-width='0.8' opacity='0.10'/%3E%3Cpath d='M120 120 Q140 130 150 120 Q158 108 145 98 Q132 92 125 102' stroke-width='0.7' opacity='0.09'/%3E%3Cpath d='M360 230 Q340 222 330 232 Q322 245 335 255 Q348 262 358 250' stroke-width='0.7' opacity='0.09'/%3E%3Cpath d='M310 100 Q290 92 280 102 Q272 115 288 125' stroke-width='0.6' opacity='0.08'/%3E%3Cpath d='M160 200 Q180 192 188 202 Q195 215 182 225' stroke-width='0.6' opacity='0.08'/%3E%3Cpath d='M190 300 Q210 292 218 305 Q224 320 210 328' stroke-width='0.6' opacity='0.07'/%3E%3Cpath d='M340 320 Q360 328 365 342 Q368 358 352 362' stroke-width='0.6' opacity='0.07'/%3E%3Cpath d='M55 380 Q75 372 82 385 Q88 400 72 408' stroke-width='0.5' opacity='0.06'/%3E%3C/g%3E%3Cg fill='%2322c55e'%3E%3C!-- Pointed ivy leaves --%3E%3Cpath d='M70 300 Q85 280 78 265 Q70 280 55 288 Q70 295 70 300Z' opacity='0.11'/%3E%3Cpath d='M135 145 Q150 128 143 115 Q135 128 120 135 Q135 142 135 145Z' opacity='0.10'/%3E%3Cpath d='M375 255 Q360 240 365 225 Q375 240 390 245 Q375 252 375 255Z' opacity='0.09'/%3E%3Cpath d='M220 180 Q235 165 228 152 Q220 165 205 172 Q220 178 220 180Z' opacity='0.08'/%3E%3C!-- Round soft leaves --%3E%3Cellipse cx='95' cy='210' rx='9' ry='14' transform='rotate(-35 95 210)' opacity='0.10'/%3E%3Cellipse cx='335' cy='145' rx='8' ry='12' transform='rotate(28 335 145)' opacity='0.09'/%3E%3Cellipse cx='175' cy='255' rx='7' ry='11' transform='rotate(-18 175 255)' opacity='0.08'/%3E%3Cellipse cx='280' cy='195' rx='6' ry='10' transform='rotate(40 280 195)' opacity='0.08'/%3E%3Cellipse cx='405' cy='120' rx='7' ry='10' transform='rotate(-25 405 120)' opacity='0.07'/%3E%3C!-- Long slender leaves --%3E%3Cpath d='M145 175 Q152 155 145 135 Q138 155 145 175Z' opacity='0.09'/%3E%3Cpath d='M295 130 Q305 115 298 98 Q288 115 295 130Z' opacity='0.08'/%3E%3Cpath d='M210 275 Q200 258 205 240 Q218 258 210 275Z' opacity='0.08'/%3E%3Cpath d='M365 195 Q375 180 368 162 Q358 180 365 195Z' opacity='0.07'/%3E%3Cpath d='M115 365 Q125 348 118 330 Q108 348 115 365Z' opacity='0.07'/%3E%3C!-- Fern fronds scattered asymmetrically --%3E%3Cg transform='translate(45 365) rotate(-45)' opacity='0.10'%3E%3Cpath d='M0,0 L0,-30' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-5' cy='-7' rx='3.5' ry='6' transform='rotate(-30 -5 -7)'/%3E%3Cellipse cx='5' cy='-12' rx='3.5' ry='6' transform='rotate(30 5 -12)'/%3E%3Cellipse cx='-4' cy='-17' rx='3' ry='5' transform='rotate(-30 -4 -17)'/%3E%3Cellipse cx='4' cy='-22' rx='3' ry='5' transform='rotate(30 4 -22)'/%3E%3Cellipse cx='0' cy='-28' rx='2.5' ry='4'/%3E%3C/g%3E%3Cg transform='translate(390 185) rotate(40)' opacity='0.09'%3E%3Cpath d='M0,0 L0,-28' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='3' ry='5' transform='rotate(-25 -4 -6)'/%3E%3Cellipse cx='4' cy='-11' rx='3' ry='5' transform='rotate(25 4 -11)'/%3E%3Cellipse cx='-3' cy='-16' rx='2.5' ry='4' transform='rotate(-25 -3 -16)'/%3E%3Cellipse cx='3' cy='-21' rx='2.5' ry='4' transform='rotate(25 3 -21)'/%3E%3Cellipse cx='0' cy='-26' rx='2' ry='3'/%3E%3C/g%3E%3Cg transform='translate(255 65) rotate(-25)' opacity='0.08'%3E%3Cpath d='M0,0 L0,-25' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='2.5' ry='4' transform='rotate(-30 -4 -6)'/%3E%3Cellipse cx='4' cy='-10' rx='2.5' ry='4' transform='rotate(30 4 -10)'/%3E%3Cellipse cx='-3' cy='-15' rx='2' ry='3.5' transform='rotate(-30 -3 -15)'/%3E%3Cellipse cx='3' cy='-20' rx='2' ry='3' transform='rotate(30 3 -20)'/%3E%3C/g%3E%3Cg transform='translate(140 420) rotate(55)' opacity='0.08'%3E%3Cpath d='M0,0 L0,-22' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-3' cy='-5' rx='2' ry='3.5' transform='rotate(-25 -3 -5)'/%3E%3Cellipse cx='3' cy='-9' rx='2' ry='3.5' transform='rotate(25 3 -9)'/%3E%3Cellipse cx='-2' cy='-14' rx='1.5' ry='3' transform='rotate(-25 -2 -14)'/%3E%3Cellipse cx='2' cy='-18' rx='1.5' ry='2.5' transform='rotate(25 2 -18)'/%3E%3C/g%3E%3C!-- Tiny floating seeds/spores --%3E%3Ccircle cx='180' cy='90' r='2' opacity='0.06'/%3E%3Ccircle cx='85' cy='175' r='1.5' opacity='0.05'/%3E%3Ccircle cx='345' cy='290' r='2' opacity='0.06'/%3E%3Ccircle cx='420' cy='200' r='1.5' opacity='0.05'/%3E%3Ccircle cx='260' cy='350' r='2' opacity='0.05'/%3E%3Ccircle cx='40' cy='120' r='1.5' opacity='0.04'/%3E%3Ccircle cx='310' cy='400' r='1.5' opacity='0.04'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  :is(.dark .leaf-pattern) {
+    background-image: url("data:image/svg+xml,%3Csvg width='450' height='450' viewBox='0 0 450 450' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2322c55e' stroke-linecap='round'%3E%3C!-- Long flowing vine 1 - dramatic S-curve --%3E%3Cpath d='M-30 420 C50 380 30 320 80 260 S150 180 120 120 S180 40 140 -30' stroke-width='1.5' opacity='0.14'/%3E%3C!-- Long flowing vine 2 - opposite sweep --%3E%3Cpath d='M480 380 C400 350 420 280 360 230 S280 160 310 100 S250 30 290 -20' stroke-width='1.4' opacity='0.12'/%3E%3C!-- Diagonal vine crossing --%3E%3Cpath d='M-20 280 C60 250 100 220 160 200 S250 160 320 170 S400 130 470 100' stroke-width='1.2' opacity='0.11'/%3E%3C!-- Vertical accent vine --%3E%3Cpath d='M200 480 C180 420 210 360 190 300 S220 220 200 160 S230 80 210 20' stroke-width='1.1' opacity='0.10'/%3E%3C!-- Wandering vine --%3E%3Cpath d='M350 480 C330 430 360 380 340 320 S380 260 350 200' stroke-width='1' opacity='0.10'/%3E%3C!-- Spiral tendrils scattered --%3E%3Cpath d='M80 260 Q100 250 108 238 Q115 225 105 215 Q95 208 85 215' stroke-width='0.8' opacity='0.12'/%3E%3Cpath d='M120 120 Q140 130 150 120 Q158 108 145 98 Q132 92 125 102' stroke-width='0.7' opacity='0.11'/%3E%3Cpath d='M360 230 Q340 222 330 232 Q322 245 335 255 Q348 262 358 250' stroke-width='0.7' opacity='0.11'/%3E%3Cpath d='M310 100 Q290 92 280 102 Q272 115 288 125' stroke-width='0.6' opacity='0.10'/%3E%3Cpath d='M160 200 Q180 192 188 202 Q195 215 182 225' stroke-width='0.6' opacity='0.10'/%3E%3Cpath d='M190 300 Q210 292 218 305 Q224 320 210 328' stroke-width='0.6' opacity='0.09'/%3E%3Cpath d='M340 320 Q360 328 365 342 Q368 358 352 362' stroke-width='0.6' opacity='0.09'/%3E%3Cpath d='M55 380 Q75 372 82 385 Q88 400 72 408' stroke-width='0.5' opacity='0.08'/%3E%3C/g%3E%3Cg fill='%2322c55e'%3E%3C!-- Pointed ivy leaves --%3E%3Cpath d='M70 300 Q85 280 78 265 Q70 280 55 288 Q70 295 70 300Z' opacity='0.13'/%3E%3Cpath d='M135 145 Q150 128 143 115 Q135 128 120 135 Q135 142 135 145Z' opacity='0.12'/%3E%3Cpath d='M375 255 Q360 240 365 225 Q375 240 390 245 Q375 252 375 255Z' opacity='0.11'/%3E%3Cpath d='M220 180 Q235 165 228 152 Q220 165 205 172 Q220 178 220 180Z' opacity='0.10'/%3E%3C!-- Round soft leaves --%3E%3Cellipse cx='95' cy='210' rx='9' ry='14' transform='rotate(-35 95 210)' opacity='0.12'/%3E%3Cellipse cx='335' cy='145' rx='8' ry='12' transform='rotate(28 335 145)' opacity='0.11'/%3E%3Cellipse cx='175' cy='255' rx='7' ry='11' transform='rotate(-18 175 255)' opacity='0.10'/%3E%3Cellipse cx='280' cy='195' rx='6' ry='10' transform='rotate(40 280 195)' opacity='0.10'/%3E%3Cellipse cx='405' cy='120' rx='7' ry='10' transform='rotate(-25 405 120)' opacity='0.09'/%3E%3C!-- Long slender leaves --%3E%3Cpath d='M145 175 Q152 155 145 135 Q138 155 145 175Z' opacity='0.11'/%3E%3Cpath d='M295 130 Q305 115 298 98 Q288 115 295 130Z' opacity='0.10'/%3E%3Cpath d='M210 275 Q200 258 205 240 Q218 258 210 275Z' opacity='0.10'/%3E%3Cpath d='M365 195 Q375 180 368 162 Q358 180 365 195Z' opacity='0.09'/%3E%3Cpath d='M115 365 Q125 348 118 330 Q108 348 115 365Z' opacity='0.09'/%3E%3C!-- Fern fronds scattered asymmetrically --%3E%3Cg transform='translate(45 365) rotate(-45)' opacity='0.12'%3E%3Cpath d='M0,0 L0,-30' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-5' cy='-7' rx='3.5' ry='6' transform='rotate(-30 -5 -7)'/%3E%3Cellipse cx='5' cy='-12' rx='3.5' ry='6' transform='rotate(30 5 -12)'/%3E%3Cellipse cx='-4' cy='-17' rx='3' ry='5' transform='rotate(-30 -4 -17)'/%3E%3Cellipse cx='4' cy='-22' rx='3' ry='5' transform='rotate(30 4 -22)'/%3E%3Cellipse cx='0' cy='-28' rx='2.5' ry='4'/%3E%3C/g%3E%3Cg transform='translate(390 185) rotate(40)' opacity='0.11'%3E%3Cpath d='M0,0 L0,-28' stroke='%2322c55e' stroke-width='0.6' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='3' ry='5' transform='rotate(-25 -4 -6)'/%3E%3Cellipse cx='4' cy='-11' rx='3' ry='5' transform='rotate(25 4 -11)'/%3E%3Cellipse cx='-3' cy='-16' rx='2.5' ry='4' transform='rotate(-25 -3 -16)'/%3E%3Cellipse cx='3' cy='-21' rx='2.5' ry='4' transform='rotate(25 3 -21)'/%3E%3Cellipse cx='0' cy='-26' rx='2' ry='3'/%3E%3C/g%3E%3Cg transform='translate(255 65) rotate(-25)' opacity='0.10'%3E%3Cpath d='M0,0 L0,-25' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-4' cy='-6' rx='2.5' ry='4' transform='rotate(-30 -4 -6)'/%3E%3Cellipse cx='4' cy='-10' rx='2.5' ry='4' transform='rotate(30 4 -10)'/%3E%3Cellipse cx='-3' cy='-15' rx='2' ry='3.5' transform='rotate(-30 -3 -15)'/%3E%3Cellipse cx='3' cy='-20' rx='2' ry='3' transform='rotate(30 3 -20)'/%3E%3C/g%3E%3Cg transform='translate(140 420) rotate(55)' opacity='0.10'%3E%3Cpath d='M0,0 L0,-22' stroke='%2322c55e' stroke-width='0.5' fill='none'/%3E%3Cellipse cx='-3' cy='-5' rx='2' ry='3.5' transform='rotate(-25 -3 -5)'/%3E%3Cellipse cx='3' cy='-9' rx='2' ry='3.5' transform='rotate(25 3 -9)'/%3E%3Cellipse cx='-2' cy='-14' rx='1.5' ry='3' transform='rotate(-25 -2 -14)'/%3E%3Cellipse cx='2' cy='-18' rx='1.5' ry='2.5' transform='rotate(25 2 -18)'/%3E%3C/g%3E%3C!-- Tiny floating seeds/spores --%3E%3Ccircle cx='180' cy='90' r='2' opacity='0.08'/%3E%3Ccircle cx='85' cy='175' r='1.5' opacity='0.07'/%3E%3Ccircle cx='345' cy='290' r='2' opacity='0.08'/%3E%3Ccircle cx='420' cy='200' r='1.5' opacity='0.07'/%3E%3Ccircle cx='260' cy='350' r='2' opacity='0.07'/%3E%3Ccircle cx='40' cy='120' r='1.5' opacity='0.06'/%3E%3Ccircle cx='310' cy='400' r='1.5' opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
+  }
+
   /* Text wrapping */
   .text-balance {
     text-wrap: balance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autumnsgrove/groveengine",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Multi-tenant blog engine for Grove Platform. Features gutter annotations, markdown editing, magic code auth, and Cloudflare Workers deployment.",
   "author": "AutumnsGrove",
   "license": "AGPL-3.0-only",
@@ -73,6 +73,16 @@
       "svelte": "./dist/ui/components/states/index.js",
       "default": "./dist/ui/components/states/index.js"
     },
+    "./ui/nature": {
+      "types": "./dist/ui/components/nature/index.d.ts",
+      "svelte": "./dist/ui/components/nature/index.js",
+      "default": "./dist/ui/components/nature/index.js"
+    },
+    "./ui/nature/*": {
+      "types": "./dist/ui/components/nature/*/index.d.ts",
+      "svelte": "./dist/ui/components/nature/*/index.js",
+      "default": "./dist/ui/components/nature/*/index.js"
+    },
     "./ui/tokens": {
       "types": "./dist/ui/tokens/index.d.ts",
       "default": "./dist/ui/tokens/index.js"