@autumnsgrove/groveengine 0.8.5 → 0.9.0

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

@@ -0,0 +1,222 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { PlacedAsset, Point } from './types';
+	import type { Component as SvelteComponent } from 'svelte';
+
+	interface Props {
+		asset: PlacedAsset;
+		isSelected?: boolean;
+		animationsEnabled?: boolean;
+		onSelect?: () => void;
+		onMove?: (position: Point) => void;
+	}
+
+	let {
+		asset,
+		isSelected = false,
+		animationsEnabled = true,
+		onSelect,
+		onMove
+	}: Props = $props();
+
+	let component: SvelteComponent | null = $state(null);
+	let containerElement: HTMLDivElement | null = $state(null);
+	let isDragging = $state(false);
+	let dragStart: Point = $state({ x: 0, y: 0 });
+	let positionStart: Point = $state({ x: 0, y: 0 });
+
+	// Dynamically import the nature component
+	$effect(() => {
+		const loadComponent = async () => {
+			try {
+				// Map component name to path
+				const category = asset.category;
+				const componentPath = `/src/lib/ui/components/nature/${category}/${asset.componentName}.svelte`;
+
+				// Dynamic import - this will work with Vite's glob imports
+				const modules = import.meta.glob('/src/lib/ui/components/nature/**/*.svelte');
+				const loader = modules[componentPath];
+
+				if (!loader) {
+					console.error(`Component not found: ${componentPath}`);
+					return;
+				}
+
+				const module = await loader() as { default: SvelteComponent };
+				component = module.default;
+			} catch (error) {
+				console.error(`Failed to load component ${asset.componentName}:`, error);
+			}
+		};
+
+		loadComponent();
+	});
+
+	// Calculate transform style
+	const transformStyle = $derived(
+		`translate(${asset.position.x}px, ${asset.position.y}px) scale(${asset.scale}) rotate(${asset.rotation}deg)`
+	);
+
+	// Component props including animation state
+	const componentProps = $derived({
+		...asset.props,
+		animate: animationsEnabled && asset.animationEnabled
+	});
+
+	function handleMouseDown(event: MouseEvent) {
+		if (event.button !== 0) return; // Only left click
+
+		event.stopPropagation();
+
+		// Select this asset
+		onSelect?.();
+
+		// Start dragging
+		isDragging = true;
+		dragStart = { x: event.clientX, y: event.clientY };
+		positionStart = { ...asset.position };
+
+		if (containerElement) {
+			containerElement.style.cursor = 'grabbing';
+		}
+	}
+
+	function handleMouseMove(event: MouseEvent) {
+		if (!isDragging) return;
+
+		const dx = event.clientX - dragStart.x;
+		const dy = event.clientY - dragStart.y;
+
+		const newPosition = {
+			x: positionStart.x + dx,
+			y: positionStart.y + dy
+		};
+
+		onMove?.(newPosition);
+	}
+
+	function handleMouseUp() {
+		if (isDragging) {
+			isDragging = false;
+			if (containerElement) {
+				containerElement.style.cursor = isSelected ? 'grab' : 'pointer';
+			}
+		}
+	}
+
+	function handleTouchStart(event: TouchEvent) {
+		if (event.touches.length !== 1) return;
+
+		event.stopPropagation();
+
+		// Select this asset
+		onSelect?.();
+
+		// Start dragging
+		const touch = event.touches[0];
+		isDragging = true;
+		dragStart = { x: touch.clientX, y: touch.clientY };
+		positionStart = { ...asset.position };
+	}
+
+	function handleTouchMove(event: TouchEvent) {
+		if (!isDragging || event.touches.length !== 1) return;
+
+		event.preventDefault();
+
+		const touch = event.touches[0];
+		const dx = touch.clientX - dragStart.x;
+		const dy = touch.clientY - dragStart.y;
+
+		const newPosition = {
+			x: positionStart.x + dx,
+			y: positionStart.y + dy
+		};
+
+		onMove?.(newPosition);
+	}
+
+	function handleTouchEnd() {
+		if (isDragging) {
+			isDragging = false;
+		}
+	}
+
+	// Set up global event listeners for dragging
+	$effect(() => {
+		const handleGlobalMouseMove = (e: MouseEvent) => handleMouseMove(e);
+		const handleGlobalMouseUp = () => handleMouseUp();
+
+		if (isDragging) {
+			window.addEventListener('mousemove', handleGlobalMouseMove);
+			window.addEventListener('mouseup', handleGlobalMouseUp);
+
+			return () => {
+				window.removeEventListener('mousemove', handleGlobalMouseMove);
+				window.removeEventListener('mouseup', handleGlobalMouseUp);
+			};
+		}
+	});
+</script>
+
+<div
+	bind:this={containerElement}
+	class="absolute top-0 left-0 transition-none {isSelected ? 'selected' : ''}"
+	class:cursor-grab={isSelected && !isDragging}
+	class:cursor-grabbing={isDragging}
+	class:cursor-pointer={!isSelected && !isDragging}
+	style="
+		transform: {transformStyle};
+		transform-origin: center center;
+		z-index: {asset.zIndex};
+	"
+	role="button"
+	tabindex="0"
+	aria-label="{asset.componentName} at position {asset.position.x}, {asset.position.y}"
+	aria-pressed={isSelected}
+	onmousedown={handleMouseDown}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+>
+	<!-- Selection border with glass effect -->
+	{#if isSelected}
+		<div
+			class="absolute inset-0 -m-2 pointer-events-none rounded-lg border-2 border-blue-400 bg-blue-50/10 backdrop-blur-sm shadow-lg"
+			style="z-index: -1;"
+		/>
+	{/if}
+
+	<!-- Render the nature component -->
+	{#if component}
+		<svelte:component this={component} {...componentProps} />
+	{:else}
+		<!-- Loading placeholder -->
+		<div class="w-16 h-16 flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-lg border border-white/30">
+			<div class="text-xs text-gray-500">Loading...</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.selected {
+		/* Ensure selected assets are interactive */
+		pointer-events: auto;
+	}
+
+	/* Prevent text selection during drag */
+	div {
+		-moz-user-select: none;
+		     user-select: none;
+		-webkit-user-select: none;
+	}
+
+	/* Smooth hover effect for non-selected assets */
+	div:not(.selected):hover {
+		filter: brightness(1.05);
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { PlacedAsset, Point } from './types';
+interface Props {
+    asset: PlacedAsset;
+    isSelected?: boolean;
+    animationsEnabled?: boolean;
+    onSelect?: () => void;
+    onMove?: (position: Point) => void;
+}
+declare const PlacedAsset: import("svelte").Component<Props, {}, "">;
+type PlacedAsset = ReturnType<typeof PlacedAsset>;
+export default PlacedAsset;

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

@@ -0,0 +1,266 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+	import { createTerrariumState } from './terrariumState.svelte';
+	import Canvas from './Canvas.svelte';
+	import AssetPalette from './AssetPalette.svelte';
+	import Toolbar from './Toolbar.svelte';
+	import ExportDialog from './ExportDialog.svelte';
+	import { exportSceneAsPNG } from './utils/export';
+	import { TERRARIUM_CONFIG } from '../../../config/terrarium';
+	import type { AssetCategory, TerrariumScene } from './types';
+
+	/**
+	 * Terrarium - Main Container Component
+	 *
+	 * The primary container that orchestrates the entire Terrarium creative canvas.
+	 * Manages state, coordinates child components, handles keyboard shortcuts,
+	 * and manages persistence with localStorage.
+	 */
+
+	const STORAGE_KEY = 'terrarium-scene';
+
+	const terrarium = createTerrariumState();
+	let showExportDialog = $state(false);
+	let canvasElement: HTMLDivElement | null = $state(null);
+
+	function handleAssetSelect(name: string, category: AssetCategory) {
+		if (!terrarium.canAddAsset) {
+			// Complexity budget exceeded - UI should show visual feedback
+			return;
+		}
+
+		const centerX = terrarium.scene.canvas.width / 2;
+		const centerY = terrarium.scene.canvas.height / 2;
+
+		terrarium.addAsset(name, category, { x: centerX, y: centerY });
+	}
+
+	function handleToggleAnimations() {
+		terrarium.toggleAnimations();
+	}
+
+	function handleToggleGrid() {
+		terrarium.toggleGrid();
+	}
+
+	function handleSetGridSize(size: 16 | 32 | 64) {
+		terrarium.setGridSize(size);
+	}
+
+	function handleDelete() {
+		if (terrarium.selectedAssetId) {
+			terrarium.deleteAsset(terrarium.selectedAssetId);
+		}
+	}
+
+	function handleDuplicate() {
+		if (terrarium.selectedAssetId) {
+			terrarium.duplicateAsset(terrarium.selectedAssetId);
+		}
+	}
+
+	function handleExport() {
+		showExportDialog = true;
+	}
+
+	function handleSave(): boolean {
+		try {
+			const sceneJson = JSON.stringify(terrarium.scene);
+
+			// Proactive size validation before attempting to save
+			if (sceneJson.length > TERRARIUM_CONFIG.scene.maxSizeBytes) {
+				// Scene too large - warn user before attempting save
+				return false;
+			}
+
+			localStorage.setItem(STORAGE_KEY, sceneJson);
+			return true;
+		} catch (error) {
+			if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+				// Storage quota exceeded - handled silently, UI should show feedback
+			}
+			return false;
+		}
+	}
+
+	function handleRename(name: string) {
+		const trimmed = name.trim();
+		if (trimmed.length > 0 && trimmed.length <= TERRARIUM_CONFIG.scene.maxNameLength) {
+			terrarium.scene.name = trimmed;
+			terrarium.scene.updatedAt = new Date().toISOString();
+		}
+	}
+
+	async function handleExportPNG(options: { scale: number; includeBackground: boolean }) {
+		if (!canvasElement) {
+			throw new Error('Canvas element not found');
+		}
+
+		await exportSceneAsPNG(canvasElement, terrarium.scene.name, {
+			scale: options.scale,
+			backgroundColor: options.includeBackground ? terrarium.scene.canvas.background : 'transparent',
+			pauseAnimations: true
+		});
+	}
+
+	function handleCloseExportDialog() {
+		showExportDialog = false;
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		const target = event.target as HTMLElement;
+		const isInputField =
+			target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+		if (isInputField && event.key !== 'Escape') {
+			return;
+		}
+
+		const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+		const cmdOrCtrl = isMac ? event.metaKey : event.ctrlKey;
+
+		if (event.key === 'Delete' || event.key === 'Backspace') {
+			if (!isInputField && terrarium.selectedAssetId) {
+				event.preventDefault();
+				handleDelete();
+			}
+		} else if (cmdOrCtrl && event.key === 'd') {
+			event.preventDefault();
+			if (terrarium.selectedAssetId) {
+				handleDuplicate();
+			}
+		} else if (event.key === 'Escape') {
+			event.preventDefault();
+			terrarium.selectAsset(null);
+			showExportDialog = false;
+		} else if (event.key === 'g' && !cmdOrCtrl) {
+			if (!isInputField) {
+				event.preventDefault();
+				handleToggleGrid();
+			}
+		} else if (event.key === 'a' && !cmdOrCtrl) {
+			if (!isInputField) {
+				event.preventDefault();
+				handleToggleAnimations();
+			}
+		} else if (cmdOrCtrl && event.key === 's') {
+			event.preventDefault();
+			handleSave();
+		}
+	}
+
+	function isValidScene(scene: unknown): scene is TerrariumScene {
+		if (typeof scene !== 'object' || scene === null) return false;
+		const s = scene as Record<string, unknown>;
+		return (
+			typeof s.id === 'string' &&
+			typeof s.name === 'string' &&
+			typeof s.canvas === 'object' &&
+			Array.isArray(s.assets)
+		);
+	}
+
+	function loadSceneFromStorage() {
+		try {
+			const storedScene = localStorage.getItem(STORAGE_KEY);
+			if (storedScene) {
+				const parsedScene = JSON.parse(storedScene);
+				if (isValidScene(parsedScene)) {
+					terrarium.setScene(parsedScene);
+				} else {
+					// Invalid scene format - clear and use default
+					localStorage.removeItem(STORAGE_KEY);
+				}
+			}
+		} catch {
+			// Clear corrupted data silently
+			try {
+				localStorage.removeItem(STORAGE_KEY);
+			} catch {
+				// Ignore cleanup errors
+			}
+		}
+	}
+
+	$effect(() => {
+		loadSceneFromStorage();
+	});
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<div class="terrarium-container flex h-screen w-screen overflow-hidden">
+	<!-- Left Sidebar: Asset Palette -->
+	<div class="flex-shrink-0" style="width: 280px;">
+		<AssetPalette onAssetSelect={handleAssetSelect} />
+	</div>
+
+	<!-- Main Content Area -->
+	<div class="flex flex-col flex-1 min-w-0">
+		<!-- Top Toolbar -->
+		<Toolbar
+			bind:sceneName={terrarium.scene.name}
+			animationsEnabled={terrarium.animationsEnabled}
+			gridEnabled={terrarium.scene.canvas.gridEnabled}
+			gridSize={terrarium.scene.canvas.gridSize}
+			hasSelection={terrarium.selectedAssetId !== null}
+			onToggleAnimations={handleToggleAnimations}
+			onToggleGrid={handleToggleGrid}
+			onSetGridSize={handleSetGridSize}
+			onDelete={handleDelete}
+			onDuplicate={handleDuplicate}
+			onExport={handleExport}
+			onSave={handleSave}
+			onRename={handleRename}
+		/>
+
+		<!-- Canvas Area -->
+		<div bind:this={canvasElement} class="flex-1 min-h-0 overflow-hidden">
+			<Canvas
+				scene={terrarium.scene}
+				selectedAssetId={terrarium.selectedAssetId}
+				animationsEnabled={terrarium.animationsEnabled}
+				panOffset={terrarium.panOffset}
+				onAssetSelect={(id) => terrarium.selectAsset(id)}
+				onAssetMove={(id, position) => terrarium.updateAsset(id, { position })}
+				onCanvasClick={() => terrarium.selectAsset(null)}
+				onPan={(offset) => terrarium.setPanOffset(offset)}
+			/>
+		</div>
+	</div>
+
+	<!-- Export Dialog (Modal Overlay) -->
+	<ExportDialog
+		bind:open={showExportDialog}
+		sceneName={terrarium.scene.name}
+		onClose={handleCloseExportDialog}
+		onExport={handleExportPNG}
+	/>
+</div>
+
+<style>
+	.terrarium-container {
+		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+	}
+
+	:global(.dark) .terrarium-container {
+		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+	}
+</style>

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

@@ -0,0 +1,3 @@
+declare const Terrarium: import("svelte").Component<Record<string, never>, {}, "">;
+type Terrarium = ReturnType<typeof Terrarium>;
+export default Terrarium;