@autumnsgrove/groveengine 0.6.5 → 0.8.0

package/dist/components/custom/ContentWithGutter.svelte

@@ -64,7 +64,7 @@
 	 * Helper to get anchor key with headers context
 	 * @param {string} anchor
 	 */
-	function getKey(anchor) {
+	function getKey(anchor: string) {
 		return getAnchorKey(anchor, headers);
 	}
 
@@ -72,16 +72,16 @@
 	 * Get items for a specific anchor
 	 * @param {string} anchor
 	 */
-	function getItems(anchor) {
+	function getItems(anchor: string) {
 		return getItemsForAnchor(gutterContent, anchor);
 	}
 
 	/**
 	 * Generate unique key for a gutter item
-	 * @param {GutterItem} item
+	 * @param {GutterItemType} item
 	 * @param {number} index
 	 */
-	function getItemKey(item, index) {
+	function getItemKey(item: GutterItemType, index: number): string {
 		// Combine item properties to create a unique identifier
 		const parts = [
 			item.type || 'unknown',
@@ -103,16 +103,15 @@
 
 		// Use getBoundingClientRect for accurate relative positioning
 		// This works regardless of offset parent chains and CSS transforms
-		const gutterRect = gutterElement.getBoundingClientRect();
+		const gutterRect = (gutterElement as HTMLElement).getBoundingClientRect();
 
 		let lastBottom = 0; // Track the bottom edge of the last positioned item
-		/** @type {string[]} */
-		const newOverflowingAnchors = [];
+		const newOverflowingAnchors: string[] = [];
 		const newPositions = { ...itemPositions };
 
 		// Sort anchors by their position in the document
 		const anchorPositions = uniqueAnchors.map(anchor => {
-			const el = findAnchorElement(anchor, contentBodyElement ?? null, headers);
+			const el = findAnchorElement(anchor, (contentBodyElement ?? null) as HTMLElement | null, headers);
 			if (!el && import.meta.env.DEV) {
 				console.warn(`Anchor element not found for: ${anchor}`);
 			}
@@ -168,8 +167,7 @@
 
 	// Setup resize listener on mount with proper cleanup
 	onMount(() => {
-		/** @type {ReturnType<typeof setTimeout> | undefined} */
-		let resizeTimeoutId;
+		let resizeTimeoutId: ReturnType<typeof setTimeout> | undefined;
 		const handleResize = () => {
 			clearTimeout(resizeTimeoutId);
 			resizeTimeoutId = setTimeout(() => {
@@ -186,9 +184,8 @@
 
 	// Setup copy button functionality for code blocks
 	onMount(() => {
-		/** @param {Event} event */
-		const handleCopyClick = async (event) => {
-			const button = /** @type {HTMLElement} */ (event.currentTarget);
+		const handleCopyClick = async (event: Event) => {
+			const button = event.currentTarget as HTMLElement;
 			const codeText = button.getAttribute('data-code');
 
 			if (!codeText) return;
@@ -251,20 +248,19 @@
 	// Add IDs to headers and position mobile gutter items
 	$effect(() => {
 		// Track moved elements for cleanup
-		/** @type {Array<{ element: HTMLElement, originalParent: HTMLElement | null, originalNextSibling: Node | null }>} */
-		const movedElements = [];
+		const movedElements: Array<{ element: HTMLElement; originalParent: HTMLElement | null; originalNextSibling: Node | null }> = [];
 
 		untrack(() => {
 			if (!contentBodyElement) return;
 
 			// First, add IDs to headers
 			if (headers && headers.length > 0) {
-				const headerElements = contentBodyElement.querySelectorAll('h1, h2, h3, h4, h5, h6');
-				headerElements.forEach((el) => {
-					const text = el.textContent?.trim() || '';
-					const matchingHeader = headers.find(/** @param {Header} h */ (h) => h.text === text);
+				const headerElements = (contentBodyElement as HTMLElement).querySelectorAll('h1, h2, h3, h4, h5, h6');
+				headerElements.forEach((el: Element) => {
+					const text = (el as HTMLElement).textContent?.trim() || '';
+					const matchingHeader = headers.find((h: Header) => h.text === text);
 					if (matchingHeader) {
-						el.id = matchingHeader.id;
+						(el as HTMLElement).id = matchingHeader.id;
 					}
 				});
 			}
@@ -279,7 +275,7 @@
 				const originalParent = mobileGutterEl.parentElement;
 				const originalNextSibling = mobileGutterEl.nextSibling;
 
-				const targetEl = findAnchorElement(anchor, contentBodyElement, headers);
+				const targetEl = findAnchorElement(anchor, contentBodyElement as HTMLElement, headers);
 
 				if (targetEl) {
 					targetEl.insertAdjacentElement('afterend', mobileGutterEl);
@@ -308,12 +304,13 @@
 			const updateHeight = () => {
 				if (!contentBodyElement) return;
 				// Get the bottom of content-body relative to the article
-				const rect = contentBodyElement.getBoundingClientRect();
-				const articleRect = contentBodyElement.closest('.content-article')?.getBoundingClientRect();
+				const rect = (contentBodyElement as HTMLElement).getBoundingClientRect();
+				const articleEl = (contentBodyElement as HTMLElement).closest('.content-article');
+				const articleRect = articleEl?.getBoundingClientRect();
 				if (articleRect) {
 					contentHeight = rect.bottom - articleRect.top;
 				} else {
-					contentHeight = contentBodyElement.offsetTop + contentBodyElement.offsetHeight;
+					contentHeight = (contentBodyElement as HTMLElement).offsetTop + (contentBodyElement as HTMLElement).offsetHeight;
 				}
 			};
 			updateHeight();
@@ -348,7 +345,7 @@
 	 * @param {string} html
 	 * @param {string[]} overflowKeys
 	 */
-	function injectReferenceMarkers(html, overflowKeys) {
+	function injectReferenceMarkers(html: string, overflowKeys: string[]): string {
 		if (!overflowKeys || overflowKeys.length === 0 || typeof window === 'undefined') {
 			return html;
 		}

package/dist/ui/components/content/RoadmapPreview.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../utils";
+	import { MapPin, ArrowRight } from "lucide-svelte";
+
+	/**
+	 * RoadmapPreview - A glass card showing current development phase
+	 *
+	 * Displays the current phase of Grove's development with a progress bar
+	 * and links to the full roadmap. Used on landing page and plant signup.
+	 *
+	 * @example Basic usage
+	 * ```svelte
+	 * <RoadmapPreview
+	 *   phase="Thaw"
+	 *   subtitle="The ice begins to crack"
+	 *   description="Grove opens its doors. The first trees take root."
+	 *   progress={33}
+	 *   href="/roadmap"
+	 * />
+	 * ```
+	 */
+
+	interface Props {
+		/** Current phase name */
+		phase?: string;
+		/** Phase subtitle/tagline */
+		subtitle?: string;
+		/** Brief description of what's happening */
+		description?: string;
+		/** Progress percentage (0-100) */
+		progress?: number;
+		/** Link to full roadmap */
+		href?: string;
+		/** Whether to open link in new tab */
+		external?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		phase = "Thaw",
+		subtitle = "The ice begins to crack",
+		description = "Grove opens its doors. The first trees take root.",
+		progress = 33,
+		href = "/roadmap",
+		external = false,
+		class: className
+	}: Props = $props();
+
+	const linkTarget = $derived(external ? "_blank" : undefined);
+	const linkRel = $derived(external ? "noopener noreferrer" : undefined);
+</script>
+
+<a
+	{href}
+	target={linkTarget}
+	rel={linkRel}
+	class={cn(
+		"block rounded-2xl p-6 transition-transform hover:scale-[1.02] group",
+		"bg-white/60 dark:bg-emerald-950/25 backdrop-blur-md",
+		"border border-white/40 dark:border-emerald-800/25",
+		className
+	)}
+>
+	<div class="flex items-start justify-between mb-4">
+		<div>
+			<div class="flex items-center gap-2 mb-1">
+				<MapPin class="w-4 h-4 text-primary" />
+				<span class="text-xs text-foreground-subtle uppercase tracking-wide">Currently</span>
+			</div>
+			<h3 class="text-xl font-serif text-foreground">{phase}</h3>
+			<p class="text-sm text-foreground-muted italic">{subtitle}</p>
+		</div>
+		<ArrowRight class="w-5 h-5 text-foreground-subtle group-hover:text-primary group-hover:translate-x-1 transition-all" />
+	</div>
+
+	<!-- Progress bar -->
+	<div class="mb-3">
+		<div class="h-2 bg-surface rounded-full overflow-hidden">
+			<div
+				class="h-full bg-primary rounded-full transition-all duration-500"
+				style="width: {progress}%"
+			></div>
+		</div>
+	</div>
+
+	<p class="text-sm text-foreground-subtle">
+		{description}
+	</p>
+</a>

package/dist/ui/components/content/RoadmapPreview.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+ * RoadmapPreview - A glass card showing current development phase
+ *
+ * Displays the current phase of Grove's development with a progress bar
+ * and links to the full roadmap. Used on landing page and plant signup.
+ *
+ * @example Basic usage
+ * ```svelte
+ * <RoadmapPreview
+ *   phase="Thaw"
+ *   subtitle="The ice begins to crack"
+ *   description="Grove opens its doors. The first trees take root."
+ *   progress={33}
+ *   href="/roadmap"
+ * />
+ * ```
+ */
+interface Props {
+    /** Current phase name */
+    phase?: string;
+    /** Phase subtitle/tagline */
+    subtitle?: string;
+    /** Brief description of what's happening */
+    description?: string;
+    /** Progress percentage (0-100) */
+    progress?: number;
+    /** Link to full roadmap */
+    href?: string;
+    /** Whether to open link in new tab */
+    external?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const RoadmapPreview: import("svelte").Component<Props, {}, "">;
+type RoadmapPreview = ReturnType<typeof RoadmapPreview>;
+export default RoadmapPreview;

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

@@ -1,4 +1,5 @@
 export { default as ProductCard } from './ProductCard.svelte';
 export { default as SearchCard } from './SearchCard.svelte';
 export { default as PlanCard } from './PlanCard.svelte';
+export { default as RoadmapPreview } from './RoadmapPreview.svelte';
 export declare const CONTENT_VERSION = "0.2.0";

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

@@ -7,4 +7,5 @@
 export { default as ProductCard } from './ProductCard.svelte';
 export { default as SearchCard } from './SearchCard.svelte';
 export { default as PlanCard } from './PlanCard.svelte';
+export { default as RoadmapPreview } from './RoadmapPreview.svelte';
 export const CONTENT_VERSION = '0.2.0';

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

@@ -0,0 +1,224 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from './palette';
+	import { autumn, winter, greens, bark, springBlossoms } from './palette';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		trunkColor?: string;
+		season?: Season;
+		animate?: boolean;
+		animateEntrance?: boolean;
+		/** Add breathing animation (subtle pulse for loading states) */
+		breathing?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		trunkColor,
+		season = 'autumn',  // Default to autumn (Grove's signature season)
+		animate = false,
+		animateEntrance = false,
+		breathing = false
+	}: Props = $props();
+
+	// Check if winter for snow accents (Logo keeps foliage, just gets snow-dusted)
+	const isWinter = $derived(season === 'winter');
+
+	// Build animation class - breathing takes precedence over sway
+	const animationClass = $derived(breathing ? 'breathing' : (animate ? 'sway' : ''));
+
+	// Seasonal color mapping for the logo
+	// - Spring: Blossom pink - celebrating cherry blossom season!
+	// - Summer: Grove brand green
+	// - Autumn: Warm orange tones matching the forest palette
+	// - Winter: Frosted muted green (Logo stays green year-round like an evergreen)
+	const defaultColor = $derived(
+		season === 'spring' ? springBlossoms.pink :  // Blossom pink for spring!
+		season === 'autumn' ? autumn.pumpkin :       // Orange matching autumn forest palette
+		season === 'winter' ? winter.winterGreen :
+		greens.grove  // Summer uses Grove brand green
+	);
+	const foliageColor = $derived(color ?? defaultColor);
+	// Trunk should always be brown (like real tree bark), not match the foliage
+	const actualTrunkColor = $derived(trunkColor ?? bark.bark);
+
+	// Animation state for entrance animation
+	let mounted = $state(false);
+
+	onMount(() => {
+		if (animateEntrance) {
+			// Small delay to ensure CSS transition triggers
+			requestAnimationFrame(() => {
+				mounted = true;
+			});
+		}
+	});
+
+	// Calculate if arrows should be in final position
+	const inPosition = $derived(animateEntrance ? mounted : true);
+</script>
+
+{#if animateEntrance}
+	<!-- Animated version with 4 separate arrows -->
+	<svg
+		class="{className} {animationClass}"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 417 512.238"
+	>
+		<defs>
+			<!-- Clip paths to isolate each arrow direction -->
+			<clipPath id="clip-top">
+				<polygon points="0,0 417,0 417,208.5 208.5,208.5 0,208.5" />
+			</clipPath>
+			<clipPath id="clip-right">
+				<polygon points="208.5,0 417,0 417,400 208.5,400 208.5,208.5" />
+			</clipPath>
+			<clipPath id="clip-bottom">
+				<polygon points="0,208.5 208.5,208.5 417,208.5 417,400 0,400" />
+			</clipPath>
+			<clipPath id="clip-left">
+				<polygon points="0,0 208.5,0 208.5,208.5 208.5,400 0,400" />
+			</clipPath>
+		</defs>
+
+		<!-- Trunk (static) -->
+		<path fill={actualTrunkColor} d="M171.274 344.942h74.09v167.296h-74.09V344.942z"/>
+
+		<!-- Top Arrow -->
+		<g
+			class="arrow arrow-top"
+			class:in-position={inPosition}
+			clip-path="url(#clip-top)"
+		>
+			<path fill={foliageColor} d="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"/>
+		</g>
+
+		<!-- Right Arrow -->
+		<g
+			class="arrow arrow-right"
+			class:in-position={inPosition}
+			clip-path="url(#clip-right)"
+		>
+			<path fill={foliageColor} d="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"/>
+		</g>
+
+		<!-- Bottom Arrow -->
+		<g
+			class="arrow arrow-bottom"
+			class:in-position={inPosition}
+			clip-path="url(#clip-bottom)"
+		>
+			<path fill={foliageColor} d="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"/>
+		</g>
+
+		<!-- Left Arrow -->
+		<g
+			class="arrow arrow-left"
+			class:in-position={inPosition}
+			clip-path="url(#clip-left)"
+		>
+			<path fill={foliageColor} d="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"/>
+		</g>
+	</svg>
+{:else}
+	<!-- Static version -->
+	<svg
+		class="{className} {animationClass}"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 417 512.238"
+	>
+		<!-- Trunk -->
+		<path fill={actualTrunkColor} d="M171.274 344.942h74.09v167.296h-74.09V344.942z"/>
+		<!-- Foliage -->
+		<path fill={foliageColor} d="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"/>
+		<!-- Snow accents in winter -->
+		{#if isWinter}
+			<!-- Top point snow cap -->
+			<ellipse fill={winter.snow} cx="208" cy="8" rx="32" ry="10" opacity="0.85" />
+
+			<!-- Upper diagonal arm tips (the angled parts pointing up-left and up-right) -->
+			<ellipse fill={winter.snow} cx="52" cy="60" rx="18" ry="6" opacity="0.7" transform="rotate(-25 52 60)" />
+			<ellipse fill={winter.snow} cx="365" cy="60" rx="18" ry="6" opacity="0.7" transform="rotate(25 365 60)" />
+
+			<!-- Horizontal arm snow (left and right extending arms) -->
+			<ellipse fill={winter.snow} cx="45" cy="175" rx="28" ry="7" opacity="0.75" />
+			<ellipse fill={winter.snow} cx="372" cy="175" rx="28" ry="7" opacity="0.75" />
+
+			<!-- Center intersection snow pile -->
+			<ellipse fill={winter.snow} cx="208" cy="175" rx="25" ry="8" opacity="0.6" />
+
+			<!-- Lower diagonal arm tips -->
+			<ellipse fill={winter.snow} cx="95" cy="320" rx="16" ry="5" opacity="0.55" transform="rotate(25 95 320)" />
+			<ellipse fill={winter.snow} cx="322" cy="320" rx="16" ry="5" opacity="0.55" transform="rotate(-25 322 320)" />
+		{/if}
+	</svg>
+{/if}
+
+<style>
+	@keyframes sway {
+		0%, 100% { transform: rotate(0deg); }
+		50% { transform: rotate(1deg); }
+	}
+
+	@keyframes breathe {
+		0%, 100% {
+			transform: scale(1);
+			opacity: 0.7;
+		}
+		50% {
+			transform: scale(1.05);
+			opacity: 1;
+		}
+	}
+
+	.sway {
+		transform-origin: center bottom;
+		animation: sway 4s ease-in-out infinite;
+	}
+
+	.breathing {
+		transform-origin: center center;
+		animation: breathe 2s ease-in-out infinite;
+	}
+
+	/* Arrow entrance animations */
+	.arrow {
+		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce easing */
+	}
+
+	/* Starting positions (offset by ~20%) */
+	.arrow-top {
+		transform: translateY(-40px);
+	}
+	.arrow-right {
+		transform: translateX(40px);
+	}
+	.arrow-bottom {
+		transform: translateY(40px);
+	}
+	.arrow-left {
+		transform: translateX(-40px);
+	}
+
+	/* Final positions */
+	.arrow-top.in-position {
+		transform: translateY(0);
+	}
+	.arrow-right.in-position {
+		transform: translateX(0);
+	}
+	.arrow-bottom.in-position {
+		transform: translateY(0);
+	}
+	.arrow-left.in-position {
+		transform: translateX(0);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Season } from './palette';
+interface Props {
+    class?: string;
+    color?: string;
+    trunkColor?: string;
+    season?: Season;
+    animate?: boolean;
+    animateEntrance?: boolean;
+    /** Add breathing animation (subtle pulse for loading states) */
+    breathing?: boolean;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/ui/components/nature/botanical/Acorn.svelte

@@ -0,0 +1,48 @@
+<!--
+  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;
+		capColor?: string;
+		nutColor?: string;
+	}
+
+	let {
+		class: className = 'w-4 h-5',
+		capColor,
+		nutColor
+	}: Props = $props();
+
+	const cap = $derived(capColor ?? bark.bark);
+	const nut = $derived(nutColor ?? earth.clay);
+	const capDetail = bark.darkBark;
+</script>
+
+<!-- Acorn -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 40">
+	<!-- Stem -->
+	<path fill={capDetail} d="M15 0 Q18 0 18 4 L15 6 L12 4 Q12 0 15 0" />
+
+	<!-- Cap -->
+	<ellipse fill={cap} cx="15" cy="12" rx="13" ry="8" />
+	<!-- Cap texture (crosshatch pattern suggestion) -->
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M5 10 Q15 14 25 10" opacity="0.4" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M4 13 Q15 17 26 13" opacity="0.3" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M8 8 L8 16" opacity="0.2" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M15 6 L15 16" opacity="0.2" />
+	<path fill="none" stroke={capDetail} stroke-width="0.5" d="M22 8 L22 16" opacity="0.2" />
+
+	<!-- Nut body -->
+	<ellipse fill={nut} cx="15" cy="26" rx="11" ry="14" />
+
+	<!-- Nut highlight -->
+	<ellipse fill="white" cx="12" cy="22" rx="4" ry="5" opacity="0.15" />
+
+	<!-- Bottom point -->
+	<path fill={nut} d="M10 38 Q15 42 20 38 L15 40 Z" />
+</svg>

package/dist/ui/components/nature/botanical/Acorn.svelte.d.ts

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

package/dist/ui/components/nature/botanical/Berry.svelte

@@ -0,0 +1,67 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { accents, greens } from '../palette';
+
+	interface Props {
+		class?: string;
+		berryColor?: string;
+		variant?: 'cluster' | 'single' | 'branch';
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		berryColor,
+		variant = 'cluster'
+	}: Props = $props();
+
+	const berry = $derived(berryColor ?? accents.berry.ripe);
+	const stem = greens.deepGreen;
+	const highlight = 'white';
+</script>
+
+<!-- Berries -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+	{#if variant === 'single'}
+		<!-- Single berry -->
+		<circle fill={berry} cx="25" cy="28" r="15" />
+		<circle fill={highlight} cx="20" cy="23" r="4" opacity="0.3" />
+		<path fill="none" stroke={stem} stroke-width="2" d="M25 13 Q25 5 20 2" />
+		<!-- Calyx -->
+		<path fill={stem} d="M20 14 L25 18 L30 14 L28 16 L25 14 L22 16 Z" />
+	{:else if variant === 'cluster'}
+		<!-- Berry cluster -->
+		<path fill="none" stroke={stem} stroke-width="1.5" d="M25 5 L25 15 M25 15 L18 22 M25 15 L32 22 M25 15 L25 25" />
+
+		<circle fill={berry} cx="18" cy="28" r="10" />
+		<circle fill={highlight} cx="14" cy="24" r="2.5" opacity="0.3" />
+
+		<circle fill={berry} cx="32" cy="28" r="10" />
+		<circle fill={highlight} cx="28" cy="24" r="2.5" opacity="0.3" />
+
+		<circle fill={berry} cx="25" cy="38" r="10" />
+		<circle fill={highlight} cx="21" cy="34" r="2.5" opacity="0.3" />
+	{:else}
+		<!-- Berry branch -->
+		<path fill="none" stroke={stem} stroke-width="2" d="M5 25 Q15 20 25 22 Q35 24 45 20" />
+		<!-- Leaves -->
+		<ellipse fill={stem} cx="12" cy="22" rx="5" ry="3" transform="rotate(-20 12 22)" />
+		<ellipse fill={stem} cx="38" cy="20" rx="5" ry="3" transform="rotate(15 38 20)" />
+
+		<!-- Berries along branch -->
+		<circle fill={berry} cx="18" cy="28" r="6" />
+		<circle fill={highlight} cx="16" cy="26" r="1.5" opacity="0.3" />
+
+		<circle fill={berry} cx="28" cy="30" r="6" />
+		<circle fill={highlight} cx="26" cy="28" r="1.5" opacity="0.3" />
+
+		<circle fill={berry} cx="22" cy="36" r="5" />
+		<circle fill={highlight} cx="20" cy="34" r="1.2" opacity="0.3" />
+
+		<circle fill={berry} cx="32" cy="38" r="5" />
+		<circle fill={highlight} cx="30" cy="36" r="1.2" opacity="0.3" />
+	{/if}
+</svg>

package/dist/ui/components/nature/botanical/Berry.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    class?: string;
+    berryColor?: string;
+    variant?: 'cluster' | 'single' | 'branch';
+}
+declare const Berry: import("svelte").Component<Props, {}, "">;
+type Berry = ReturnType<typeof Berry>;
+export default Berry;