@autumnsgrove/groveengine 0.8.6 → 0.9.0

package/dist/config/terrarium.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Terrarium Configuration
+ *
+ * Central configuration for the Terrarium creative canvas.
+ * All limits, constraints, and settings in one place.
+ */
+export declare const TERRARIUM_CONFIG: {
+    readonly scene: {
+        readonly maxNameLength: 100;
+        readonly maxSizeBytes: 1000000;
+    };
+    readonly complexity: {
+        readonly maxComplexity: 200;
+        readonly weights: {
+            readonly animated: 5;
+            readonly scaled: 2;
+            readonly normal: 1;
+        };
+        readonly warningThreshold: 0.8;
+    };
+    readonly canvas: {
+        readonly maxWidth: 4000;
+        readonly maxHeight: 4000;
+        readonly minWidth: 200;
+        readonly minHeight: 200;
+        readonly defaultWidth: 1200;
+        readonly defaultHeight: 800;
+        readonly gridSizes: readonly [16, 32, 64];
+        readonly defaultGridSize: 32;
+    };
+    readonly asset: {
+        readonly maxScale: 5;
+        readonly minScale: 0.1;
+        readonly defaultScale: 1;
+    };
+    readonly storage: {
+        readonly backend: "indexeddb";
+        readonly dbName: "terrarium";
+        readonly dbVersion: 1;
+        readonly maxSavedScenes: {
+            readonly free: 0;
+            readonly seedling: 5;
+            readonly sapling: 20;
+            readonly oak: 100;
+            readonly evergreen: number;
+        };
+        readonly maxDecorationsPerZone: {
+            readonly free: 0;
+            readonly seedling: 1;
+            readonly sapling: 3;
+            readonly oak: number;
+            readonly evergreen: number;
+        };
+    };
+    readonly export: {
+        readonly maxWidth: 4096;
+        readonly maxHeight: 4096;
+        readonly defaultScale: 2;
+        readonly format: "png";
+        readonly expectedTimeMs: {
+            readonly min: 1000;
+            readonly typical: 5000;
+            readonly max: 10000;
+        };
+    };
+    readonly autoSave: {
+        readonly enabled: true;
+        readonly debounceMs: 2000;
+        readonly maxIntervalMs: 30000;
+        readonly showIndicator: true;
+    };
+    readonly zones: {
+        readonly header: {
+            readonly recommendedAspectRatio: [number, number];
+            readonly maxHeight: 200;
+            readonly fitBehavior: "scale";
+        };
+        readonly sidebar: {
+            readonly recommendedAspectRatio: [number, number];
+            readonly maxHeight: 400;
+            readonly fitBehavior: "scale";
+        };
+        readonly footer: {
+            readonly recommendedAspectRatio: [number, number];
+            readonly maxHeight: 150;
+            readonly fitBehavior: "scale";
+        };
+        readonly background: {
+            readonly recommendedAspectRatio: null;
+            readonly maxHeight: null;
+            readonly fitBehavior: "cover";
+        };
+    };
+    readonly performance: {
+        readonly targetFPS: 60;
+        readonly maxAnimatedAssets: 20;
+        readonly dragThrottleMs: 16;
+    };
+    readonly starterAssets: readonly ["TreeAspen", "TreeBirch", "Lattice", "LatticeWithVine", "Lantern", "Butterfly", "Firefly", "Mushroom", "Rock", "Vine"];
+    readonly ui: {
+        readonly duplicateOffset: 20;
+        readonly exportWaitMs: 150;
+        readonly filenameMaxLength: 100;
+    };
+};
+export type TerrariumConfig = typeof TERRARIUM_CONFIG;
+export type GridSize = (typeof TERRARIUM_CONFIG.canvas.gridSizes)[number];
+export type DecorationZone = keyof typeof TERRARIUM_CONFIG.zones;
+export type UserTier = keyof typeof TERRARIUM_CONFIG.storage.maxSavedScenes;

package/dist/config/terrarium.js

@@ -0,0 +1,125 @@
+/**
+ * Terrarium Configuration
+ *
+ * Central configuration for the Terrarium creative canvas.
+ * All limits, constraints, and settings in one place.
+ */
+export const TERRARIUM_CONFIG = {
+    // Scene constraints
+    scene: {
+        maxNameLength: 100,
+        maxSizeBytes: 1_000_000 // 1MB JSON
+    },
+    // Complexity budget system (replaces hard asset limit)
+    // Total complexity cannot exceed maxComplexity
+    complexity: {
+        maxComplexity: 200,
+        weights: {
+            animated: 5, // Animated assets cost 5 points
+            scaled: 2, // Scale > 1.5 or < 0.5 costs 2 points
+            normal: 1 // Standard assets cost 1 point
+        },
+        warningThreshold: 0.8 // Warn at 80% budget
+    },
+    // Canvas constraints
+    canvas: {
+        maxWidth: 4000,
+        maxHeight: 4000,
+        minWidth: 200,
+        minHeight: 200,
+        defaultWidth: 1200,
+        defaultHeight: 800,
+        gridSizes: [16, 32, 64],
+        defaultGridSize: 32
+    },
+    // Asset constraints
+    asset: {
+        maxScale: 5,
+        minScale: 0.1,
+        defaultScale: 1
+    },
+    // Storage limits (per tier)
+    storage: {
+        backend: 'indexeddb',
+        dbName: 'terrarium',
+        dbVersion: 1,
+        maxSavedScenes: {
+            free: 0,
+            seedling: 5,
+            sapling: 20,
+            oak: 100,
+            evergreen: Infinity
+        },
+        maxDecorationsPerZone: {
+            free: 0,
+            seedling: 1,
+            sapling: 3,
+            oak: Infinity,
+            evergreen: Infinity
+        }
+    },
+    // Export settings
+    export: {
+        maxWidth: 4096,
+        maxHeight: 4096,
+        defaultScale: 2, // 2x for retina
+        format: 'png',
+        expectedTimeMs: { min: 1000, typical: 5000, max: 10000 }
+    },
+    // Auto-save settings
+    autoSave: {
+        enabled: true,
+        debounceMs: 2000, // Wait 2s after last change
+        maxIntervalMs: 30000, // Force save every 30s during activity
+        showIndicator: true // Show "Saving..." indicator
+    },
+    // Zone constraints for Foliage integration
+    zones: {
+        header: {
+            recommendedAspectRatio: [16, 3],
+            maxHeight: 200,
+            fitBehavior: 'scale'
+        },
+        sidebar: {
+            recommendedAspectRatio: [1, 2],
+            maxHeight: 400,
+            fitBehavior: 'scale'
+        },
+        footer: {
+            recommendedAspectRatio: [16, 2],
+            maxHeight: 150,
+            fitBehavior: 'scale'
+        },
+        background: {
+            recommendedAspectRatio: null,
+            maxHeight: null,
+            fitBehavior: 'cover'
+        }
+    },
+    // Performance
+    performance: {
+        targetFPS: 60,
+        maxAnimatedAssets: 20, // Warning threshold
+        dragThrottleMs: 16 // One frame
+    },
+    // Phase 1 starter assets (10 components)
+    // Note: All components must exist in packages/engine/src/lib/ui/components/nature/
+    starterAssets: [
+        'TreeAspen',
+        'TreeBirch',
+        'Lattice',
+        'LatticeWithVine',
+        'Lantern',
+        'Butterfly',
+        'Firefly',
+        'Mushroom',
+        'Rock',
+        'Vine'
+    ],
+    // Magic numbers centralized for maintainability
+    ui: {
+        duplicateOffset: 20, // Pixels to offset duplicated assets
+        exportWaitMs: 150, // Wait time for animations to pause before export
+        filenameMaxLength: 100 // Max sanitized filename length
+    }
+};

package/dist/styles/tokens.css

@@ -25,6 +25,56 @@
 	--color-bg-secondary: hsl(var(--secondary));
 	--color-border: hsl(var(--border));
 
+	/* Grove overlay tokens - centralized green overlays for glassmorphism */
+	/* Base RGB values for color mixing */
+	--grove-green-rgb: 34, 197, 94;
+	--grove-green-light-rgb: 74, 222, 128;
+	--grove-green-dark-rgb: 74, 124, 89;
+	--grove-sage-rgb: 167, 199, 183;
+
+	/* Grove overlays - light mode (use grove green) */
+	--grove-overlay-5: rgba(34, 197, 94, 0.05);
+	--grove-overlay-8: rgba(34, 197, 94, 0.08);
+	--grove-overlay-10: rgba(34, 197, 94, 0.1);
+	--grove-overlay-12: rgba(34, 197, 94, 0.12);
+	--grove-overlay-15: rgba(34, 197, 94, 0.15);
+	--grove-overlay-18: rgba(34, 197, 94, 0.18);
+	--grove-overlay-20: rgba(34, 197, 94, 0.2);
+	--grove-overlay-25: rgba(34, 197, 94, 0.25);
+	--grove-overlay-30: rgba(34, 197, 94, 0.3);
+	--grove-overlay-35: rgba(34, 197, 94, 0.35);
+	--grove-overlay-70: rgba(34, 197, 94, 0.7);
+
+	/* Grove borders - light mode */
+	--grove-border-subtle: rgba(34, 197, 94, 0.1);
+	--grove-border: rgba(34, 197, 94, 0.2);
+	--grove-border-strong: rgba(34, 197, 94, 0.35);
+
+	/* Glass backgrounds - light mode */
+	--glass-bg: rgba(255, 255, 255, 0.85);
+	--glass-bg-medium: rgba(255, 255, 255, 0.6);
+	--glass-bg-subtle: rgba(255, 255, 255, 0.5);
+	--glass-border: rgba(255, 255, 255, 0.3);
+	--glass-border-strong: rgba(255, 255, 255, 0.4);
+
+	/* Slate glass (for some dark backgrounds in light mode) */
+	--slate-glass-bg: rgba(30, 41, 59, 0.5);
+	--slate-glass-border: rgba(71, 85, 105, 0.3);
+
+	/* Neutral overlays */
+	--overlay-dark-5: rgba(0, 0, 0, 0.05);
+	--overlay-dark-10: rgba(0, 0, 0, 0.1);
+	--overlay-dark-40: rgba(0, 0, 0, 0.4);
+	--overlay-light-5: rgba(255, 255, 255, 0.05);
+	--overlay-light-10: rgba(255, 255, 255, 0.1);
+	--overlay-light-20: rgba(255, 255, 255, 0.2);
+
+	/* Shadow tokens */
+	--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
+	--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
+	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
+	--shadow-grove: 0 8px 32px rgba(34, 197, 94, 0.15);
+
 	/* Dark mode values */
 	--color-text-dark: hsl(var(--foreground));
 	--color-text-muted-dark: hsl(var(--muted-foreground));
@@ -118,6 +168,46 @@
 	--tag-bg: hsl(270 38% 55%);
 	--tag-bg-hover: hsl(270 38% 49%);
 
+	/* Grove overlays - dark mode (use lighter grove green) */
+	--grove-overlay-5: rgba(74, 222, 128, 0.05);
+	--grove-overlay-8: rgba(74, 222, 128, 0.08);
+	--grove-overlay-10: rgba(74, 222, 128, 0.1);
+	--grove-overlay-12: rgba(74, 222, 128, 0.12);
+	--grove-overlay-15: rgba(74, 222, 128, 0.15);
+	--grove-overlay-18: rgba(74, 222, 128, 0.18);
+	--grove-overlay-20: rgba(74, 222, 128, 0.2);
+	--grove-overlay-25: rgba(74, 222, 128, 0.25);
+	--grove-overlay-30: rgba(74, 222, 128, 0.3);
+	--grove-overlay-35: rgba(74, 222, 128, 0.35);
+	--grove-overlay-70: rgba(74, 222, 128, 0.7);
+
+	/* Grove borders - dark mode */
+	--grove-border-subtle: rgba(74, 124, 89, 0.2);
+	--grove-border: rgba(74, 222, 128, 0.2);
+	--grove-border-strong: rgba(74, 222, 128, 0.35);
+
+	/* Glass backgrounds - dark mode (dark grove tint) */
+	--glass-bg: rgba(20, 30, 25, 0.92);
+	--glass-bg-medium: rgba(30, 45, 35, 0.6);
+	--glass-bg-subtle: rgba(30, 41, 59, 0.4);
+	--glass-border: rgba(74, 124, 89, 0.25);
+	--glass-border-strong: rgba(74, 124, 89, 0.3);
+
+	/* Slate glass - dark mode */
+	--slate-glass-bg: rgba(30, 41, 59, 0.9);
+	--slate-glass-border: rgba(71, 85, 105, 0.3);
+
+	/* Grove sage text - dark mode muted text (WCAG AA compliant) */
+	--grove-text-muted: rgba(167, 199, 183, 0.75);
+	--grove-text-subtle: rgba(167, 199, 183, 0.6);
+	--grove-text-strong: rgba(167, 199, 183, 0.9);
+
+	/* Shadow tokens - dark mode */
+	--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
+	--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);
+	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
+	--shadow-grove: 0 8px 32px rgba(74, 222, 128, 0.15);
+
 	/* Dark mode component-specific overrides */
 	/* Blog header */
 	--blog-header-title: #5cb85f;

package/dist/types/dom-to-image-more.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Type declarations for dom-to-image-more
+ *
+ * Grove — A place to Be
+ * Copyright (c) 2025 Autumn Brown
+ * Licensed under AGPL-3.0
+ */
+
+declare module 'dom-to-image-more' {
+	interface Options {
+		/** Filter out elements */
+		filter?: (node: Element) => boolean;
+		/** Background color */
+		bgcolor?: string;
+		/** Image width */
+		width?: number;
+		/** Image height */
+		height?: number;
+		/** Style to apply to the root element */
+		style?: Record<string, string>;
+		/** Image quality (0-1) */
+		quality?: number;
+		/** Cache bust */
+		cacheBust?: boolean;
+		/** Image placeholder */
+		imagePlaceholder?: string;
+	}
+
+	interface DomToImage {
+		toSvg(node: Node, options?: Options): Promise<string>;
+		toPng(node: Node, options?: Options): Promise<string>;
+		toJpeg(node: Node, options?: Options): Promise<string>;
+		toBlob(node: Node, options?: Options): Promise<Blob>;
+		toPixelData(node: Node, options?: Options): Promise<Uint8ClampedArray>;
+	}
+
+	const domtoimage: DomToImage;
+	export default domtoimage;
+}

package/dist/ui/components/chrome/Footer.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import ThemeToggle from './ThemeToggle.svelte';
+	import { Logo } from '../nature';
+	import {
+		Github,
+		ExternalLink,
+		BookOpen,
+		MapPin,
+		Tag,
+		Telescope,
+		Mail,
+		PenLine,
+		Hammer,
+		Scroll,
+		Grape,
+		Trees
+	} from 'lucide-svelte';
+	import { seasonStore } from '../../stores/season';
+	import type { FooterLink, MaxWidth, Season } from './types';
+	import { DEFAULT_RESOURCE_LINKS, DEFAULT_CONNECT_LINKS, DEFAULT_LEGAL_LINKS } from './defaults';
+
+	interface Props {
+		resourceLinks?: FooterLink[];
+		connectLinks?: FooterLink[];
+		legalLinks?: FooterLink[];
+		season?: Season;
+		maxWidth?: MaxWidth;
+	}
+
+	let {
+		resourceLinks,
+		connectLinks,
+		legalLinks,
+		season,
+		maxWidth = 'default'
+	}: Props = $props();
+
+	const maxWidthClass = {
+		narrow: 'max-w-2xl',
+		default: 'max-w-4xl',
+		wide: 'max-w-5xl'
+	};
+
+	const resources = resourceLinks || DEFAULT_RESOURCE_LINKS;
+	const connect = connectLinks || DEFAULT_CONNECT_LINKS;
+	const legal = legalLinks || DEFAULT_LEGAL_LINKS;
+</script>
+
+<footer class="py-12 border-t border-default">
+	<div class="{maxWidthClass[maxWidth]} mx-auto px-6">
+		<!-- Three Column Layout (stacked on mobile) -->
+		<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12 mb-10">
+			<!-- Column 1: Grove Brand -->
+			<div class="text-center sm:text-left">
+				<div class="flex items-center gap-2 justify-center sm:justify-start mb-3">
+					<Logo class="w-6 h-6" season={season || $seasonStore} />
+					<span class="text-xl font-serif text-foreground">Grove</span>
+				</div>
+				<p class="text-sm font-sans text-foreground-subtle italic mb-4">
+					A place to Be
+				</p>
+				<p class="text-sm font-sans text-foreground-subtle leading-relaxed">
+					A quiet corner of the internet where your words can grow and flourish.
+				</p>
+			</div>
+
+			<!-- Column 2: Resources -->
+			<div class="text-center sm:text-left">
+				<h3 class="text-sm font-sans font-medium text-foreground uppercase tracking-wide mb-4">Resources</h3>
+				<ul class="space-y-2.5 text-sm font-sans">
+					{#each resources as link}
+						<li>
+							<a href={link.href} class="inline-flex items-center gap-1.5 text-foreground-subtle hover:text-accent-muted transition-colors">
+								{#if link.icon}
+									<svelte:component this={link.icon} class="w-4 h-4" />
+								{/if}
+								{link.label}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<!-- Column 3: Connect -->
+			<div class="text-center sm:text-left">
+				<h3 class="text-sm font-sans font-medium text-foreground uppercase tracking-wide mb-4">Connect</h3>
+				<ul class="space-y-2.5 text-sm font-sans">
+					{#each connect as link}
+						<li>
+							<a
+								href={link.href}
+								target={link.external ? '_blank' : undefined}
+								rel={link.external ? 'noopener noreferrer' : undefined}
+								class="inline-flex items-center gap-1.5 text-foreground-subtle hover:text-accent-muted transition-colors"
+							>
+								{#if link.icon}
+									<svelte:component this={link.icon} class="w-4 h-4" />
+								{/if}
+								{link.label}
+								{#if link.external}
+									<ExternalLink class="w-3 h-3" />
+								{/if}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+
+		<!-- Bottom Bar -->
+		<div class="pt-6 border-t border-default">
+			<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
+				<!-- Copyright & Legal Links -->
+				<div class="flex flex-wrap items-center justify-center sm:justify-start gap-x-4 gap-y-2 text-xs font-sans text-foreground-subtle">
+					<span>&copy; {new Date().getFullYear()} Autumn Brown</span>
+					<span class="text-divider">·</span>
+					<span>Made with care</span>
+					<span class="text-divider hidden sm:inline">·</span>
+					<a href="/credits" class="hover:text-accent-muted transition-colors">Credits</a>
+					<span class="text-divider">·</span>
+					{#each legal as link, index}
+						<a href={link.href} class="hover:text-accent-muted transition-colors">{link.label}</a>
+						{#if index < legal.length - 1}
+							<span class="text-divider">·</span>
+						{/if}
+					{/each}
+				</div>
+
+				<!-- Theme Toggle -->
+				<div class="flex items-center gap-2">
+					<span class="text-xs text-foreground-faint font-sans">Theme</span>
+					<ThemeToggle />
+				</div>
+			</div>
+		</div>
+	</div>
+</footer>

package/dist/ui/components/chrome/Footer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FooterLink, MaxWidth, Season } from './types';
+interface Props {
+    resourceLinks?: FooterLink[];
+    connectLinks?: FooterLink[];
+    legalLinks?: FooterLink[];
+    season?: Season;
+    maxWidth?: MaxWidth;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/ui/components/chrome/FooterMinimal.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	/**
+	 * Footer - Status page footer
+	 *
+	 * Minimal footer with links to main Grove site and support.
+	 */
+	import { cn } from '../../../utils/cn';
+	import { Trees, Mail, ExternalLink } from 'lucide-svelte';
+	import type { FooterLink, MaxWidth } from './types';
+
+	interface Props {
+		class?: string;
+		links?: FooterLink[];
+		tagline?: string;
+		maxWidth?: MaxWidth;
+	}
+
+	let {
+		class: className,
+		links,
+		tagline = 'A clearing in the forest where you can see what\'s happening.',
+		maxWidth = 'default'
+	}: Props = $props();
+
+	const maxWidthClass = {
+		narrow: 'max-w-2xl',
+		default: 'max-w-4xl',
+		wide: 'max-w-5xl'
+	};
+
+	// Default links for status page
+	const DEFAULT_LINKS: FooterLink[] = [
+		{ href: 'https://grove.place', label: 'grove.place', icon: Trees, external: true },
+		{ href: '/feed', label: 'Subscribe via RSS' },
+		{ href: 'mailto:support@grove.place', label: 'Contact Support', icon: Mail }
+	];
+
+	const items = links || DEFAULT_LINKS;
+</script>
+
+<footer
+	class={cn(
+		'mt-auto py-8 px-6',
+		'border-t border-white/20 dark:border-slate-700/30',
+		'bg-white/30 dark:bg-slate-900/30',
+		className
+	)}
+>
+	<div class="{maxWidthClass[maxWidth]} mx-auto">
+		<!-- Links -->
+		<div class="flex flex-wrap justify-center gap-6 mb-6 text-sm">
+			{#each items as link}
+				<a
+					href={link.href}
+					target={link.external ? '_blank' : undefined}
+					rel={link.external ? 'noopener noreferrer' : undefined}
+					class="inline-flex items-center gap-1.5 text-foreground-muted hover:text-foreground transition-colors"
+				>
+					{#if link.icon}
+						<svelte:component this={link.icon} class="w-4 h-4" />
+					{/if}
+					{link.label}
+					{#if link.external}
+						<ExternalLink class="w-3 h-3 opacity-50" />
+					{/if}
+				</a>
+			{/each}
+		</div>
+
+		<!-- Copyright -->
+		<p class="text-center text-sm text-foreground-subtle">
+			{tagline}
+		</p>
+	</div>
+</footer>

package/dist/ui/components/chrome/FooterMinimal.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FooterLink, MaxWidth } from './types';
+interface Props {
+    class?: string;
+    links?: FooterLink[];
+    tagline?: string;
+    maxWidth?: MaxWidth;
+}
+declare const FooterMinimal: import("svelte").Component<Props, {}, "">;
+type FooterMinimal = ReturnType<typeof FooterMinimal>;
+export default FooterMinimal;