@autumnsgrove/groveengine 0.7.0 → 0.8.5

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;

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

@@ -0,0 +1,54 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		variant?: 'pointed' | 'flat' | 'round';
+	}
+
+	let {
+		class: className = 'w-4 h-12',
+		color,
+		variant = 'pointed'
+	}: Props = $props();
+
+	const postColor = $derived(color ?? bark.warmBark);
+	const shadowColor = $derived(bark.darkBark);
+</script>
+
+<!-- Fence post -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 70">
+	{#if variant === 'pointed'}
+		<!-- Pointed top post -->
+		<polygon fill={postColor} points="5,15 12.5,0 20,15" />
+		<rect fill={postColor} x="5" y="15" width="15" height="55" />
+		<!-- Shadow -->
+		<rect fill={shadowColor} x="17" y="15" width="3" height="55" opacity="0.2" />
+		<polygon fill={shadowColor} points="12.5,0 20,15 17,15 12.5,5" opacity="0.2" />
+	{:else if variant === 'flat'}
+		<!-- Flat top post -->
+		<rect fill={postColor} x="5" y="5" width="15" height="65" rx="1" />
+		<!-- Cap -->
+		<rect fill={postColor} x="3" y="5" width="19" height="4" rx="1" />
+		<!-- Shadow -->
+		<rect fill={shadowColor} x="17" y="9" width="3" height="61" opacity="0.2" />
+	{:else}
+		<!-- Round top post -->
+		<rect fill={postColor} x="5" y="12" width="15" height="58" />
+		<ellipse fill={postColor} cx="12.5" cy="12" rx="7.5" ry="5" />
+		<!-- Highlight on round top -->
+		<ellipse fill="white" cx="10" cy="10" rx="3" ry="2" opacity="0.15" />
+		<!-- Shadow -->
+		<rect fill={shadowColor} x="17" y="12" width="3" height="58" opacity="0.2" />
+	{/if}
+
+	<!-- Wood grain lines -->
+	<line x1="8" y1="20" x2="8" y2="65" stroke={shadowColor} stroke-width="0.5" opacity="0.3" />
+	<line x1="17" y1="25" x2="17" y2="60" stroke={shadowColor} stroke-width="0.5" opacity="0.2" />
+</svg>

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

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

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

@@ -0,0 +1,70 @@
+<!--
+  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;
+		color?: string;
+		open?: boolean;
+	}
+
+	let {
+		class: className = 'w-16 h-16',
+		color,
+		open = false
+	}: Props = $props();
+
+	const gateColor = $derived(color ?? bark.warmBark);
+	const postColor = $derived(bark.bark);
+	const hingeColor = $derived(earth.stone);
+</script>
+
+<!-- Garden gate with posts -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+	<!-- Left post -->
+	<rect fill={postColor} x="5" y="10" width="10" height="90" />
+	<rect fill={bark.darkBark} x="5" y="10" width="10" height="5" />
+	<!-- Post cap -->
+	<polygon fill={postColor} points="0,15 10,5 20,15" />
+
+	<!-- Right post -->
+	<rect fill={postColor} x="85" y="10" width="10" height="90" />
+	<rect fill={bark.darkBark} x="85" y="10" width="10" height="5" />
+	<!-- Post cap -->
+	<polygon fill={postColor} points="80,15 90,5 100,15" />
+
+	<!-- Gate -->
+	<g transform={open ? 'rotate(-30 15 50)' : ''}>
+		<!-- Gate frame -->
+		<rect fill={gateColor} x="15" y="25" width="70" height="70" rx="2" />
+		<!-- Inner cutout (transparent) -->
+		<rect fill="#e0f2fe" x="20" y="30" width="60" height="60" rx="1" opacity="0.3" />
+
+		<!-- Lattice pattern on gate -->
+		<line x1="20" y1="30" x2="80" y2="90" stroke={gateColor} stroke-width="3" />
+		<line x1="80" y1="30" x2="20" y2="90" stroke={gateColor} stroke-width="3" />
+		<line x1="50" y1="30" x2="50" y2="90" stroke={gateColor} stroke-width="2" />
+		<line x1="20" y1="60" x2="80" y2="60" stroke={gateColor} stroke-width="2" />
+
+		<!-- Gate arch top -->
+		<path
+			fill={gateColor}
+			d="M15 25 L15 20 Q50 5 85 20 L85 25 Q50 12 15 25"
+		/>
+
+		<!-- Hinges -->
+		<rect fill={hingeColor} x="13" y="35" width="8" height="6" rx="1" />
+		<rect fill={hingeColor} x="13" y="75" width="8" height="6" rx="1" />
+
+		<!-- Handle -->
+		<circle fill={hingeColor} cx="75" cy="60" r="4" />
+		<circle fill={bark.darkBark} cx="75" cy="60" r="2" />
+	</g>
+
+	<!-- Ground line -->
+	<line x1="0" y1="100" x2="100" y2="100" stroke={earth.mud} stroke-width="2" />
+</svg>

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

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

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

@@ -0,0 +1,113 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark, accents } from '../palette';
+
+	interface Props {
+		class?: string;
+		frameColor?: string;
+		lit?: boolean;
+		animate?: boolean;
+		variant?: 'hanging' | 'standing' | 'post';
+	}
+
+	let {
+		class: className = 'w-6 h-10',
+		frameColor,
+		lit = true,
+		animate = true,
+		variant = 'hanging'
+	}: Props = $props();
+
+	const frame = $derived(frameColor ?? bark.darkBark);
+	const glowColor = $derived(accents.firefly.glow);
+</script>
+
+<!-- Lantern -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60">
+	{#if variant === 'hanging'}
+		<!-- Top finial (attachment point) -->
+		<circle fill={frame} cx="20" cy="3" r="2.5" />
+
+		<!-- Hanging arms connecting finial to lantern roof -->
+		<path fill="none" stroke={frame} stroke-width="2" d="M17.5 3.5 Q12 7 12 12" />
+		<path fill="none" stroke={frame} stroke-width="2" d="M22.5 3.5 Q28 7 28 12" />
+
+		<!-- Lantern top cap -->
+		<polygon fill={frame} points="10,12 20,6 30,12" />
+
+		<!-- Small decorative cap finial connecting to arms -->
+		<circle fill={frame} cx="20" cy="6" r="1.5" />
+	{:else if variant === 'post'}
+		<!-- Post -->
+		<rect fill={frame} x="17" y="40" width="6" height="20" />
+		<!-- Top finial -->
+		<circle fill={frame} cx="20" cy="9" r="2" />
+		<!-- Lantern top -->
+		<polygon fill={frame} points="10,18 20,11 30,18" />
+	{:else}
+		<!-- Standing base -->
+		<rect fill={frame} x="12" y="52" width="16" height="4" rx="1" />
+		<rect fill={frame} x="17" y="48" width="6" height="6" />
+		<!-- Top finial -->
+		<circle fill={frame} cx="20" cy="9" r="2" />
+		<!-- Lantern top -->
+		<polygon fill={frame} points="10,18 20,11 30,18" />
+	{/if}
+
+	<!-- Lantern body frame -->
+	<rect fill={frame} x="10" y="18" width="20" height="30" rx="1" />
+
+	<!-- Glass panels (with glow if lit) -->
+	{#if lit}
+		<!-- Glow effect -->
+		<rect fill={glowColor} x="12" y="20" width="16" height="26" opacity="0.3" class={animate ? 'flicker' : ''} />
+		<rect fill={glowColor} x="14" y="22" width="12" height="22" opacity="0.5" class={animate ? 'flicker-inner' : ''} />
+		<!-- Outer glow -->
+		<ellipse fill={glowColor} cx="20" cy="33" rx="18" ry="20" opacity="0.15" class={animate ? 'flicker-outer' : ''} />
+	{:else}
+		<rect fill="#cbd5e1" x="12" y="20" width="16" height="26" opacity="0.3" />
+	{/if}
+
+	<!-- Frame details -->
+	<rect fill={frame} x="10" y="32" width="20" height="2" />
+	<rect fill={frame} x="19" y="20" width="2" height="26" />
+
+	<!-- Bottom cap -->
+	<rect fill={frame} x="8" y="48" width="24" height="3" rx="1" />
+</svg>
+
+<style>
+	@keyframes flicker {
+		0%, 100% { opacity: 0.5; }
+		50% { opacity: 0.6; }
+		75% { opacity: 0.45; }
+	}
+
+	@keyframes flicker-inner {
+		0%, 100% { opacity: 0.7; }
+		30% { opacity: 0.75; }
+		60% { opacity: 0.65; }
+	}
+
+	@keyframes flicker-outer {
+		0%, 100% { opacity: 0.15; }
+		50% { opacity: 0.2; }
+	}
+
+	.flicker {
+		animation: flicker 2s ease-in-out infinite;
+	}
+
+	.flicker-inner {
+		animation: flicker-inner 1.5s ease-in-out infinite;
+		animation-delay: 0.2s;
+	}
+
+	.flicker-outer {
+		animation: flicker-outer 3s ease-in-out infinite;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string;
+    frameColor?: string;
+    lit?: boolean;
+    animate?: boolean;
+    variant?: 'hanging' | 'standing' | 'post';
+}
+declare const Lantern: import("svelte").Component<Props, {}, "">;
+type Lantern = ReturnType<typeof Lantern>;
+export default Lantern;

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

@@ -0,0 +1,89 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { bark, natural } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		variant?: 'trellis' | 'fence' | 'archway';
+	}
+
+	let {
+		class: className = 'w-12 h-16',
+		color,
+		variant = 'trellis'
+	}: Props = $props();
+
+	const woodColor = $derived(color ?? bark.warmBark);
+	const shadowColor = $derived(bark.darkBark);
+</script>
+
+<!-- Lattice/Trellis structure - ties into "Lattice" brand name -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100">
+	{#if variant === 'trellis'}
+		<!-- Classic garden trellis -->
+		<!-- Vertical posts -->
+		<rect fill={woodColor} x="5" y="0" width="6" height="100" rx="1" />
+		<rect fill={woodColor} x="69" y="0" width="6" height="100" rx="1" />
+
+		<!-- Horizontal bars -->
+		<rect fill={woodColor} x="5" y="5" width="70" height="4" rx="1" />
+		<rect fill={woodColor} x="5" y="95" width="70" height="4" rx="1" />
+
+		<!-- Diagonal lattice pattern -->
+		<g opacity="0.9">
+			<!-- Left-leaning diagonals -->
+			<line x1="11" y1="9" x2="69" y2="50" stroke={woodColor} stroke-width="3" />
+			<line x1="11" y1="30" x2="69" y2="71" stroke={woodColor} stroke-width="3" />
+			<line x1="11" y1="51" x2="69" y2="92" stroke={woodColor} stroke-width="3" />
+			<line x1="11" y1="72" x2="48" y2="95" stroke={woodColor} stroke-width="3" />
+			<line x1="32" y1="9" x2="69" y2="30" stroke={woodColor} stroke-width="3" />
+
+			<!-- Right-leaning diagonals -->
+			<line x1="69" y1="9" x2="11" y2="50" stroke={woodColor} stroke-width="3" />
+			<line x1="69" y1="30" x2="11" y2="71" stroke={woodColor} stroke-width="3" />
+			<line x1="69" y1="51" x2="11" y2="92" stroke={woodColor} stroke-width="3" />
+			<line x1="69" y1="72" x2="32" y2="95" stroke={woodColor} stroke-width="3" />
+			<line x1="48" y1="9" x2="11" y2="30" stroke={woodColor} stroke-width="3" />
+		</g>
+
+		<!-- Post shadows -->
+		<rect fill={shadowColor} x="9" y="0" width="2" height="100" opacity="0.2" />
+		<rect fill={shadowColor} x="73" y="0" width="2" height="100" opacity="0.2" />
+	{:else if variant === 'fence'}
+		<!-- Fence section -->
+		<rect fill={woodColor} x="5" y="20" width="70" height="6" rx="1" />
+		<rect fill={woodColor} x="5" y="70" width="70" height="6" rx="1" />
+
+		<!-- Vertical slats -->
+		<rect fill={woodColor} x="8" y="10" width="8" height="90" rx="1" />
+		<rect fill={woodColor} x="24" y="10" width="8" height="90" rx="1" />
+		<rect fill={woodColor} x="40" y="5" width="8" height="95" rx="1" />
+		<rect fill={woodColor} x="56" y="10" width="8" height="90" rx="1" />
+		<rect fill={woodColor} x="72" y="10" width="6" height="90" rx="1" />
+
+		<!-- Pointed tops -->
+		<polygon fill={woodColor} points="8,10 12,0 16,10" />
+		<polygon fill={woodColor} points="24,10 28,0 32,10" />
+		<polygon fill={woodColor} points="40,5 44,-5 48,5" />
+		<polygon fill={woodColor} points="56,10 60,0 64,10" />
+	{:else}
+		<!-- Archway trellis -->
+		<path
+			fill="none"
+			stroke={woodColor}
+			stroke-width="6"
+			d="M10 100 L10 40 Q10 10 40 10 Q70 10 70 40 L70 100"
+		/>
+		<!-- Cross beams on arch -->
+		<line x1="10" y1="60" x2="70" y2="60" stroke={woodColor} stroke-width="4" />
+		<line x1="10" y1="80" x2="70" y2="80" stroke={woodColor} stroke-width="4" />
+		<!-- Arch lattice -->
+		<path fill="none" stroke={woodColor} stroke-width="2" d="M15 100 L15 45 Q15 20 40 20 Q65 20 65 45 L65 100" />
+		<path fill="none" stroke={woodColor} stroke-width="2" d="M20 100 L20 48 Q20 28 40 28 Q60 28 60 48 L60 100" />
+	{/if}
+</svg>

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

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

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

@@ -0,0 +1,89 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from '../palette';
+	import { bark, greens, autumn, accents } from '../palette';
+
+	interface Props {
+		class?: string;
+		woodColor?: string;
+		vineColor?: string;
+		season?: Season;
+		hasFlowers?: boolean;
+	}
+
+	let {
+		class: className = 'w-12 h-16',
+		woodColor,
+		vineColor,
+		season = 'summer',
+		hasFlowers = true
+	}: Props = $props();
+
+	const wood = $derived(woodColor ?? bark.warmBark);
+	const defaultVineColor = $derived(season === 'autumn' ? autumn.rust : greens.grove);
+	const vine = $derived(vineColor ?? defaultVineColor);
+	const leafColor = $derived(season === 'autumn' ? autumn.amber : greens.meadow);
+	const flowerColor = $derived(accents.flower.purple);
+</script>
+
+<!-- Lattice with climbing vine -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100">
+	<!-- Trellis structure (behind vine) -->
+	<rect fill={wood} x="5" y="0" width="5" height="100" rx="1" />
+	<rect fill={wood} x="70" y="0" width="5" height="100" rx="1" />
+	<rect fill={wood} x="5" y="5" width="70" height="3" rx="1" />
+	<rect fill={wood} x="5" y="92" width="70" height="3" rx="1" />
+
+	<!-- Lattice pattern -->
+	<g opacity="0.8">
+		<line x1="10" y1="8" x2="70" y2="50" stroke={wood} stroke-width="2.5" />
+		<line x1="10" y1="35" x2="70" y2="77" stroke={wood} stroke-width="2.5" />
+		<line x1="10" y1="62" x2="55" y2="92" stroke={wood} stroke-width="2.5" />
+		<line x1="70" y1="8" x2="10" y2="50" stroke={wood} stroke-width="2.5" />
+		<line x1="70" y1="35" x2="10" y2="77" stroke={wood} stroke-width="2.5" />
+		<line x1="70" y1="62" x2="25" y2="92" stroke={wood} stroke-width="2.5" />
+	</g>
+
+	<!-- Climbing vine -->
+	<path
+		fill="none"
+		stroke={vine}
+		stroke-width="3"
+		d="M40 100 Q35 85 42 75 Q50 65 38 55 Q25 45 40 35 Q55 25 45 15 Q35 5 50 0"
+		stroke-linecap="round"
+	/>
+
+	<!-- Secondary vine -->
+	<path
+		fill="none"
+		stroke={vine}
+		stroke-width="2"
+		d="M38 80 Q25 70 30 60 Q35 50 20 45"
+		stroke-linecap="round"
+		opacity="0.8"
+	/>
+
+	<!-- Leaves along vine -->
+	<ellipse fill={leafColor} cx="35" cy="78" rx="6" ry="4" transform="rotate(-25 35 78)" />
+	<ellipse fill={leafColor} cx="48" cy="62" rx="6" ry="4" transform="rotate(20 48 62)" />
+	<ellipse fill={leafColor} cx="30" cy="48" rx="5" ry="3" transform="rotate(-30 30 48)" />
+	<ellipse fill={leafColor} cx="52" cy="32" rx="5" ry="3" transform="rotate(25 52 32)" />
+	<ellipse fill={leafColor} cx="38" cy="20" rx="5" ry="3" transform="rotate(-15 38 20)" />
+	<ellipse fill={leafColor} cx="22" cy="58" rx="4" ry="3" transform="rotate(-20 22 58)" />
+
+	{#if hasFlowers && season !== 'autumn'}
+		<!-- Small flowers -->
+		<circle fill={flowerColor} cx="42" cy="70" r="4" />
+		<circle fill="#fbbf24" cx="42" cy="70" r="1.5" />
+
+		<circle fill={flowerColor} cx="35" cy="42" r="3.5" />
+		<circle fill="#fbbf24" cx="35" cy="42" r="1.2" />
+
+		<circle fill={flowerColor} cx="48" cy="25" r="3" />
+		<circle fill="#fbbf24" cx="48" cy="25" r="1" />
+	{/if}
+</svg>

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

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

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

@@ -0,0 +1,48 @@
+<!--
+  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;
+		stoneColor?: string;
+	}
+
+	let {
+		class: className = 'w-16 h-8',
+		stoneColor
+	}: Props = $props();
+
+	const stone = $derived(stoneColor ?? earth.stone);
+	const highlight = $derived(earth.pebble);
+	const shadow = $derived(earth.slate);
+</script>
+
+<!-- Stepping stones path -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
+	<!-- Stone 1 (left) -->
+	<ellipse fill={stone} cx="18" cy="22" rx="16" ry="10" />
+	<ellipse fill={highlight} cx="14" cy="19" rx="6" ry="4" opacity="0.2" />
+	<ellipse fill={shadow} cx="22" cy="26" rx="8" ry="4" opacity="0.15" />
+
+	<!-- Stone 2 (center-left) -->
+	<ellipse fill={stone} cx="42" cy="18" rx="14" ry="9" />
+	<ellipse fill={highlight} cx="38" cy="15" rx="5" ry="3" opacity="0.2" />
+
+	<!-- Stone 3 (center) -->
+	<ellipse fill={stone} cx="62" cy="24" rx="13" ry="8" />
+	<ellipse fill={highlight} cx="58" cy="21" rx="5" ry="3" opacity="0.2" />
+	<ellipse fill={shadow} cx="66" cy="27" rx="6" ry="3" opacity="0.15" />
+
+	<!-- Stone 4 (right) -->
+	<ellipse fill={stone} cx="85" cy="20" rx="12" ry="9" />
+	<ellipse fill={highlight} cx="82" cy="17" rx="4" ry="3" opacity="0.2" />
+
+	<!-- Small pebbles between -->
+	<circle fill={earth.pebble} cx="30" cy="28" r="3" opacity="0.6" />
+	<circle fill={earth.pebble} cx="52" cy="32" r="2" opacity="0.5" />
+	<circle fill={earth.pebble} cx="74" cy="30" r="2.5" opacity="0.5" />
+</svg>

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

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

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

@@ -0,0 +1,8 @@
+export { default as Birdhouse } from './Birdhouse.svelte';
+export { default as Bridge } from './Bridge.svelte';
+export { default as FencePost } from './FencePost.svelte';
+export { default as GardenGate } from './GardenGate.svelte';
+export { default as Lantern } from './Lantern.svelte';
+export { default as Lattice } from './Lattice.svelte';
+export { default as LatticeWithVine } from './LatticeWithVine.svelte';
+export { default as StonePath } from './StonePath.svelte';

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

@@ -0,0 +1,9 @@
+// Structural components - garden structures and paths
+export { default as Birdhouse } from './Birdhouse.svelte';
+export { default as Bridge } from './Bridge.svelte';
+export { default as FencePost } from './FencePost.svelte';
+export { default as GardenGate } from './GardenGate.svelte';
+export { default as Lantern } from './Lantern.svelte';
+export { default as Lattice } from './Lattice.svelte';
+export { default as LatticeWithVine } from './LatticeWithVine.svelte';
+export { default as StonePath } from './StonePath.svelte';