@autumnsgrove/groveengine 0.8.6 → 0.9.0

package/dist/ui/components/icons/lucide.js

@@ -0,0 +1,224 @@
+/**
+ * Shared Lucide icon registry for Grove Platform.
+ * Single source of truth for commonly used icons across all Grove apps.
+ *
+ * DO: Import icons from '@autumnsgrove/groveengine/ui/icons'
+ * DON'T: Import directly from 'lucide-svelte' in app components
+ *
+ * @example
+ * ```svelte
+ * import { stateIcons, navIcons } from '@autumnsgrove/groveengine/ui/icons';
+ *
+ * <svelte:component this={stateIcons.check} class="w-5 h-5" />
+ * ```
+ */
+import { 
+// Navigation
+Home, Info, Telescope, MapPin, CircleDollarSign, BookOpen, Trees, PenLine, ArrowRight, ArrowLeft, ChevronRight, ChevronLeft, ChevronDown, ExternalLink, LogIn, 
+// Features & Content
+Mail, HardDrive, Palette, ShieldCheck, Shield, Cloud, SearchCode, Archive, Upload, MessagesSquare, MessageCircle, FileText, Tag, Rss, Eye, Github, Layers, 
+// Nature/Growth (Grove themed)
+Sprout, Heart, Leaf, Flower2, TreeDeciduous, Crown, 
+// States & Feedback
+Check, CheckCircle, X, Loader2, AlertTriangle, HelpCircle, Info as InfoIcon, Circle, Lock, 
+// Phases & Special
+Gem, Sparkles, Star, Moon, Sun, 
+// Actions
+Compass, Megaphone, Lightbulb, Download, Settings, Menu, 
+// Metrics
+Clock, TrendingUp, TrendingDown, Activity, Users, ShieldUser, BarChart3, 
+// Pricing
+Globe, CalendarDays, LifeBuoy, } from 'lucide-svelte';
+// ============================================================================
+// NAVIGATION ICONS
+// ============================================================================
+/** Icons for main navigation items */
+export const navIcons = {
+    home: Home,
+    about: Info,
+    vision: Telescope,
+    roadmap: MapPin,
+    pricing: CircleDollarSign,
+    knowledge: BookOpen,
+    forest: Trees,
+    blog: PenLine,
+    arrow: ArrowRight,
+    arrowLeft: ArrowLeft,
+    chevron: ChevronRight,
+    chevronLeft: ChevronLeft,
+    chevronDown: ChevronDown,
+    external: ExternalLink,
+    login: LogIn,
+    github: Github,
+};
+// ============================================================================
+// STATE & FEEDBACK ICONS
+// ============================================================================
+/** Icons for states: success, error, loading, etc. */
+export const stateIcons = {
+    check: Check,
+    checkcircle: CheckCircle,
+    x: X,
+    loader: Loader2,
+    warning: AlertTriangle,
+    help: HelpCircle,
+    info: InfoIcon,
+    circle: Circle,
+    lock: Lock,
+};
+// ============================================================================
+// PRICING & TIER ICONS
+// ============================================================================
+/** Icons for pricing tiers and feature comparison */
+export const pricingIcons = {
+    // Tier icons (growth progression)
+    sprout: Sprout,
+    treedeciduous: TreeDeciduous,
+    trees: Trees,
+    crown: Crown,
+    // Feature row icons
+    penline: PenLine,
+    filetext: FileText,
+    harddrive: HardDrive,
+    palette: Palette,
+    flower2: Flower2,
+    messagecircle: MessageCircle,
+    globe: Globe,
+    searchcode: SearchCode,
+    mail: Mail,
+    lifebuoy: LifeBuoy,
+    calendardays: CalendarDays,
+    clock: Clock,
+    // Checkmark for feature availability
+    check: Check,
+};
+// ============================================================================
+// CONTENT & FEATURE ICONS
+// ============================================================================
+/** Icons for features, tools, and content types */
+export const featureIcons = {
+    mail: Mail,
+    harddrive: HardDrive,
+    palette: Palette,
+    shieldcheck: ShieldCheck,
+    shield: Shield,
+    cloud: Cloud,
+    searchcode: SearchCode,
+    archive: Archive,
+    upload: Upload,
+    messagessquare: MessagesSquare,
+    externallink: ExternalLink,
+    filetext: FileText,
+    tag: Tag,
+    rss: Rss,
+    eye: Eye,
+    download: Download,
+    layers: Layers,
+};
+// ============================================================================
+// GROWTH & NATURE ICONS
+// ============================================================================
+/** Icons representing growth and nature (Grove themed) */
+export const growthIcons = {
+    sprout: Sprout,
+    heart: Heart,
+    leaf: Leaf,
+    flower2: Flower2,
+    trees: Trees,
+    treedeciduous: TreeDeciduous,
+};
+// ============================================================================
+// PHASE & DREAM ICONS
+// ============================================================================
+/** Icons for phases, refinement, and mystical/future content */
+export const phaseIcons = {
+    gem: Gem,
+    sparkles: Sparkles,
+    star: Star,
+    moon: Moon,
+    sun: Sun,
+    sprout: Sprout,
+};
+// ============================================================================
+// ACTION ICONS
+// ============================================================================
+/** Icons for user actions and processes */
+export const actionIcons = {
+    compass: Compass,
+    megaphone: Megaphone,
+    lightbulb: Lightbulb,
+    download: Download,
+    settings: Settings,
+    menu: Menu,
+    trend: TrendingUp,
+    trenddown: TrendingDown,
+    arrow: ArrowRight,
+};
+// ============================================================================
+// METRICS ICONS
+// ============================================================================
+/** Icons for analytics and metrics display */
+export const metricsIcons = {
+    clock: Clock,
+    trending: TrendingUp,
+    trenddown: TrendingDown,
+    activity: Activity,
+    users: Users,
+    shield: ShieldUser,
+    barchart: BarChart3,
+};
+// ============================================================================
+// UNIFIED EXPORT
+// ============================================================================
+/** All icons in one map (use specific maps above when possible) */
+export const allIcons = {
+    ...navIcons,
+    ...stateIcons,
+    ...featureIcons,
+    ...growthIcons,
+    ...phaseIcons,
+    ...actionIcons,
+    ...metricsIcons,
+};
+// ============================================================================
+// UTILITY FUNCTIONS
+// ============================================================================
+/**
+ * Get an icon from a specific map by key
+ * @example
+ * ```ts
+ * const icon = getIcon(stateIcons, 'check');
+ * ```
+ */
+export function getIcon(map, key) {
+    return map[key];
+}
+/**
+ * Get an icon from the unified map
+ * @example
+ * ```ts
+ * const icon = getIconFromAll('check');
+ * ```
+ */
+export function getIconFromAll(key) {
+    return allIcons[key];
+}
+// ============================================================================
+// DIRECT EXPORTS (for convenience)
+// ============================================================================
+// Re-export commonly used icons directly for simple imports
+export { 
+// Most commonly used
+Check, CheckCircle, X, ArrowRight, ArrowLeft, MapPin, 
+// Growth icons
+Sprout, Trees, TreeDeciduous, Crown, Flower2, Leaf, Heart, 
+// Navigation
+Home, Menu, Settings, ExternalLink, ChevronDown, LogIn, Github, 
+// Features
+Mail, HardDrive, Palette, Shield, Download, Rss, Eye, MessageCircle, Layers, 
+// States
+Loader2, AlertTriangle, HelpCircle, Lock, 
+// Phase/Special
+Sparkles, 
+// Metrics
+Clock, TrendingUp, Users, Activity, };

package/dist/ui/components/terrarium/AssetPalette.svelte

@@ -0,0 +1,207 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { TERRARIUM_CONFIG } from '../../../config/terrarium';
+	import type { AssetCategory } from './types';
+	import PaletteItem from './PaletteItem.svelte';
+	import { Trees, Bug, Leaf, Mountain, Landmark, ChevronDown } from 'lucide-svelte';
+	import type { ComponentType } from 'svelte';
+
+	interface Props {
+		onAssetSelect: (name: string, category: AssetCategory) => void;
+	}
+
+	let { onAssetSelect }: Props = $props();
+
+	// Define category metadata
+	interface CategoryMeta {
+		name: string;
+		icon: ComponentType;
+		assets: readonly string[];
+	}
+
+	// Map starter assets to their categories
+	const categoriesMap: Record<AssetCategory, CategoryMeta> = {
+		trees: {
+			name: 'Trees',
+			icon: Trees,
+			assets: ['TreeAspen', 'TreeBirch']
+		},
+		creatures: {
+			name: 'Creatures',
+			icon: Bug,
+			assets: ['Butterfly', 'Firefly']
+		},
+		botanical: {
+			name: 'Botanical',
+			icon: Leaf,
+			assets: ['Vine']
+		},
+		ground: {
+			name: 'Ground',
+			icon: Mountain,
+			assets: ['Mushroom', 'Rock']
+		},
+		structural: {
+			name: 'Structural',
+			icon: Landmark,
+			assets: ['Lattice', 'LatticeWithVine', 'Lantern']
+		},
+		sky: {
+			name: 'Sky',
+			icon: Landmark,
+			assets: []
+		},
+		water: {
+			name: 'Water',
+			icon: Landmark,
+			assets: []
+		},
+		weather: {
+			name: 'Weather',
+			icon: Landmark,
+			assets: []
+		}
+	};
+
+	// Filter to only categories that have starter assets
+	const categories = $derived(
+		(Object.entries(categoriesMap) as [AssetCategory, CategoryMeta][])
+			.filter(([_, meta]) => meta.assets.length > 0)
+			.map(([key, meta]) => ({ key, ...meta }))
+	);
+
+	// Track which categories are expanded (all start expanded)
+	let expandedCategories = $state<Set<AssetCategory>>(
+		new Set(categories.map((c) => c.key))
+	);
+
+	function toggleCategory(category: AssetCategory) {
+		const newExpanded = new Set(expandedCategories);
+		if (newExpanded.has(category)) {
+			newExpanded.delete(category);
+		} else {
+			newExpanded.add(category);
+		}
+		expandedCategories = newExpanded;
+	}
+
+	function handleCategoryKeydown(e: KeyboardEvent, category: AssetCategory) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			toggleCategory(category);
+		}
+	}
+</script>
+
+<aside
+	class="asset-palette flex flex-col h-full w-full
+		bg-white/50 dark:bg-emerald-950/25
+		backdrop-blur-md
+		border-r border-white/40 dark:border-emerald-800/25
+		shadow-lg"
+	aria-label="Asset palette"
+>
+	<!-- Header -->
+	<div class="flex-shrink-0 px-4 py-4 border-b border-white/40 dark:border-emerald-800/25">
+		<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Assets</h2>
+		<p class="text-xs text-slate-600 dark:text-slate-400 mt-1">
+			Drag or click to add to canvas
+		</p>
+	</div>
+
+	<!-- Scrollable categories -->
+	<div class="flex-1 overflow-y-auto overflow-x-hidden px-2 py-3">
+		<nav aria-label="Asset categories">
+			{#each categories as { key, name, icon: Icon, assets }}
+				<section class="mb-3" aria-labelledby={`category-${key}`}>
+					<!-- Category header -->
+					<button
+						id={`category-${key}`}
+						class="w-full flex items-center justify-between px-3 py-2 rounded-lg
+							text-sm font-medium text-slate-700 dark:text-slate-300
+							hover:bg-white/40 dark:hover:bg-emerald-950/30
+							focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-1
+							transition-colors duration-150"
+						onclick={() => toggleCategory(key)}
+						onkeydown={(e) => handleCategoryKeydown(e, key)}
+						aria-expanded={expandedCategories.has(key)}
+						aria-controls={`category-content-${key}`}
+					>
+						<span class="flex items-center gap-2">
+							<Icon class="w-4 h-4" />
+							<span>{name}</span>
+							<span class="text-xs text-slate-500 dark:text-slate-500">
+								({assets.length})
+							</span>
+						</span>
+						<ChevronDown
+							class="w-4 h-4 transition-transform duration-200 {expandedCategories.has(key)
+								? 'rotate-180'
+								: ''}"
+						/>
+					</button>
+
+					<!-- Category content -->
+					{#if expandedCategories.has(key)}
+						<div
+							id={`category-content-${key}`}
+							class="grid grid-cols-2 gap-2 px-2 py-2"
+							role="group"
+							aria-label={`${name} assets`}
+						>
+							{#each assets as assetName}
+								<PaletteItem name={assetName} category={key} onSelect={onAssetSelect} />
+							{/each}
+						</div>
+					{/if}
+				</section>
+			{/each}
+		</nav>
+	</div>
+
+	<!-- Footer hint -->
+	<div
+		class="flex-shrink-0 px-4 py-3 border-t border-white/40 dark:border-emerald-800/25
+			bg-white/30 dark:bg-emerald-950/20"
+	>
+		<p class="text-xs text-slate-600 dark:text-slate-400 text-center">
+			Use Tab and Arrow keys to navigate
+		</p>
+	</div>
+</aside>
+
+<style>
+	.asset-palette {
+		/* Ensure the palette is always visible and scrollable */
+		min-width: 280px;
+		max-width: 320px;
+	}
+
+	/* Custom scrollbar styling */
+	.asset-palette ::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.asset-palette ::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.asset-palette ::-webkit-scrollbar-thumb {
+		background: rgba(148, 163, 184, 0.3);
+		border-radius: 4px;
+	}
+
+	.asset-palette ::-webkit-scrollbar-thumb:hover {
+		background: rgba(148, 163, 184, 0.5);
+	}
+
+	/* Firefox scrollbar */
+	.asset-palette {
+		scrollbar-width: thin;
+		scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
+	}
+</style>

package/dist/ui/components/terrarium/AssetPalette.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { AssetCategory } from './types';
+interface Props {
+    onAssetSelect: (name: string, category: AssetCategory) => void;
+}
+declare const AssetPalette: import("svelte").Component<Props, {}, "">;
+type AssetPalette = ReturnType<typeof AssetPalette>;
+export default AssetPalette;

package/dist/ui/components/terrarium/Canvas.svelte

@@ -0,0 +1,231 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { TerrariumScene, PlacedAsset, Point } from './types';
+	import PlacedAssetComponent from './PlacedAsset.svelte';
+
+	interface Props {
+		scene: TerrariumScene;
+		selectedAssetId: string | null;
+		animationsEnabled?: boolean;
+		panOffset?: Point;
+		onAssetSelect?: (assetId: string | null) => void;
+		onAssetMove?: (assetId: string, position: Point) => void;
+		onCanvasClick?: () => void;
+		onPan?: (offset: Point) => void;
+	}
+
+	let {
+		scene,
+		selectedAssetId,
+		animationsEnabled = true,
+		panOffset = { x: 0, y: 0 },
+		onAssetSelect,
+		onAssetMove,
+		onCanvasClick,
+		onPan
+	}: Props = $props();
+
+	let canvasElement: HTMLDivElement | null = $state(null);
+	let isPanning = $state(false);
+	let panStart: Point = $state({ x: 0, y: 0 });
+	let offsetStart: Point = $state({ x: 0, y: 0 });
+	let isSpacePressed = $state(false);
+
+	// Sort assets by zIndex for proper layering
+	const sortedAssets = $derived(
+		[...scene.assets].sort((a, b) => a.zIndex - b.zIndex)
+	);
+
+	// Canvas transform style
+	const canvasTransform = $derived(
+		`translate(${panOffset.x}px, ${panOffset.y}px)`
+	);
+
+	function handleMouseDown(event: MouseEvent) {
+		// Middle mouse button or Space + left click for panning
+		const shouldPan = event.button === 1 || (isSpacePressed && event.button === 0);
+
+		if (shouldPan) {
+			event.preventDefault();
+			isPanning = true;
+			panStart = { x: event.clientX, y: event.clientY };
+			offsetStart = { ...panOffset };
+
+			if (canvasElement) {
+				canvasElement.style.cursor = 'grabbing';
+			}
+		} else if (event.button === 0 && !isSpacePressed) {
+			// Left click on empty canvas deselects
+			const target = event.target as HTMLElement;
+			if (target === canvasElement || target.closest('[data-canvas-background]')) {
+				onCanvasClick?.();
+			}
+		}
+	}
+
+	function handleMouseMove(event: MouseEvent) {
+		if (!isPanning) return;
+
+		const dx = event.clientX - panStart.x;
+		const dy = event.clientY - panStart.y;
+
+		const newOffset = {
+			x: offsetStart.x + dx,
+			y: offsetStart.y + dy
+		};
+
+		onPan?.(newOffset);
+	}
+
+	function handleMouseUp() {
+		if (isPanning) {
+			isPanning = false;
+			if (canvasElement) {
+				canvasElement.style.cursor = isSpacePressed ? 'grab' : 'default';
+			}
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.code === 'Space' && !isSpacePressed) {
+			isSpacePressed = true;
+			if (canvasElement && !isPanning) {
+				canvasElement.style.cursor = 'grab';
+			}
+		}
+	}
+
+	function handleKeyUp(event: KeyboardEvent) {
+		if (event.code === 'Space') {
+			isSpacePressed = false;
+			if (canvasElement && !isPanning) {
+				canvasElement.style.cursor = 'default';
+			}
+		}
+	}
+
+	function handleTouchStart(event: TouchEvent) {
+		if (event.touches.length === 2) {
+			// Two-finger touch for panning
+			event.preventDefault();
+			isPanning = true;
+			const touch = event.touches[0];
+			panStart = { x: touch.clientX, y: touch.clientY };
+			offsetStart = { ...panOffset };
+		}
+	}
+
+	function handleTouchMove(event: TouchEvent) {
+		if (!isPanning || event.touches.length !== 2) return;
+
+		const touch = event.touches[0];
+		const dx = touch.clientX - panStart.x;
+		const dy = touch.clientY - panStart.y;
+
+		const newOffset = {
+			x: offsetStart.x + dx,
+			y: offsetStart.y + dy
+		};
+
+		onPan?.(newOffset);
+	}
+
+	function handleTouchEnd() {
+		if (isPanning) {
+			isPanning = false;
+		}
+	}
+
+	function handleAssetSelect(assetId: string) {
+		onAssetSelect?.(assetId);
+	}
+
+	function handleAssetMove(assetId: string, position: Point) {
+		onAssetMove?.(assetId, position);
+	}
+
+	// Set up global event listeners for mouse and keyboard
+	$effect(() => {
+		const handleGlobalMouseMove = (e: MouseEvent) => handleMouseMove(e);
+		const handleGlobalMouseUp = () => handleMouseUp();
+
+		if (isPanning) {
+			window.addEventListener('mousemove', handleGlobalMouseMove);
+			window.addEventListener('mouseup', handleGlobalMouseUp);
+
+			return () => {
+				window.removeEventListener('mousemove', handleGlobalMouseMove);
+				window.removeEventListener('mouseup', handleGlobalMouseUp);
+			};
+		}
+	});
+
+	$effect(() => {
+		window.addEventListener('keydown', handleKeyDown);
+		window.addEventListener('keyup', handleKeyUp);
+
+		return () => {
+			window.removeEventListener('keydown', handleKeyDown);
+			window.removeEventListener('keyup', handleKeyUp);
+		};
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex -->
+<div
+	bind:this={canvasElement}
+	class="relative w-full h-full overflow-hidden select-none"
+	role="application"
+	tabindex="0"
+	aria-label="Terrarium canvas workspace - Use arrow keys to pan, scroll to zoom"
+	onmousedown={handleMouseDown}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+>
+	<!-- Canvas background -->
+	<div
+		data-canvas-background
+		class="absolute inset-0"
+		style="background: {scene.canvas.background}; width: {scene.canvas.width}px; height: {scene.canvas.height}px; transform: {canvasTransform};"
+	>
+		<!-- Grid overlay -->
+		{#if scene.canvas.gridEnabled}
+			<div
+				class="absolute inset-0 pointer-events-none"
+				style="
+					background-image:
+						linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+						linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+					background-size: {scene.canvas.gridSize}px {scene.canvas.gridSize}px;
+				"
+			/>
+		{/if}
+
+		<!-- Placed assets -->
+		<div class="relative w-full h-full">
+			{#each sortedAssets as asset (asset.id)}
+				<PlacedAssetComponent
+					{asset}
+					isSelected={asset.id === selectedAssetId}
+					{animationsEnabled}
+					onSelect={() => handleAssetSelect(asset.id)}
+					onMove={(position) => handleAssetMove(asset.id, position)}
+				/>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	/* Custom cursor styles */
+	[data-canvas-background] {
+		-moz-user-select: none;
+		     user-select: none;
+		-webkit-user-select: none;
+	}
+</style>

package/dist/ui/components/terrarium/Canvas.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TerrariumScene, Point } from './types';
+interface Props {
+    scene: TerrariumScene;
+    selectedAssetId: string | null;
+    animationsEnabled?: boolean;
+    panOffset?: Point;
+    onAssetSelect?: (assetId: string | null) => void;
+    onAssetMove?: (assetId: string, position: Point) => void;
+    onCanvasClick?: () => void;
+    onPan?: (offset: Point) => void;
+}
+declare const Canvas: import("svelte").Component<Props, {}, "">;
+type Canvas = ReturnType<typeof Canvas>;
+export default Canvas;