@autumnsgrove/groveengine 0.8.6 → 0.9.0

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

@@ -0,0 +1,299 @@
+<!--
+  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 { Play, Pause, Grid3X3, Trash2, Copy, Download, Save } from 'lucide-svelte';
+	import { cn } from '../../utils';
+
+	/**
+	 * Terrarium Toolbar
+	 *
+	 * Top toolbar for Terrarium canvas actions and settings.
+	 * Features scene naming, animation/grid controls, and action buttons.
+	 */
+
+	interface Props {
+		sceneName: string;
+		animationsEnabled: boolean;
+		gridEnabled: boolean;
+		gridSize: 16 | 32 | 64;
+		hasSelection: boolean;
+		onToggleAnimations: () => void;
+		onToggleGrid: () => void;
+		onSetGridSize: (size: 16 | 32 | 64) => void;
+		onDelete: () => void;
+		onDuplicate: () => void;
+		onExport: () => void;
+		onSave: () => void;
+		onRename: (name: string) => void;
+	}
+
+	let {
+		sceneName = $bindable(),
+		animationsEnabled,
+		gridEnabled,
+		gridSize,
+		hasSelection,
+		onToggleAnimations,
+		onToggleGrid,
+		onSetGridSize,
+		onDelete,
+		onDuplicate,
+		onExport,
+		onSave,
+		onRename
+	}: Props = $props();
+
+	let isEditingName = $state(false);
+	let nameInput: HTMLInputElement | null = $state(null);
+	let editedName = $state(sceneName);
+
+	// Grid size options
+	const gridSizes: Array<16 | 32 | 64> = [16, 32, 64];
+
+	// Start editing scene name
+	function startEditingName() {
+		isEditingName = true;
+		editedName = sceneName;
+		setTimeout(() => {
+			nameInput?.focus();
+			nameInput?.select();
+		}, 0);
+	}
+
+	// Finish editing scene name
+	function finishEditingName() {
+		if (isEditingName) {
+			const trimmed = editedName.trim();
+			if (trimmed && trimmed !== sceneName) {
+				onRename(trimmed);
+			} else {
+				editedName = sceneName;
+			}
+			isEditingName = false;
+		}
+	}
+
+	// Handle name input keydown
+	function handleNameKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			finishEditingName();
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			editedName = sceneName;
+			isEditingName = false;
+		}
+	}
+
+	// Glass button styles
+	const buttonClass = cn(
+		'inline-flex items-center justify-center',
+		'h-9 px-3 rounded-lg',
+		'bg-white/60 dark:bg-emerald-950/25',
+		'border border-white/40 dark:border-emerald-800/25',
+		'text-foreground text-sm font-medium',
+		'hover:bg-white/75 dark:hover:bg-emerald-950/35',
+		'hover:border-white/50 dark:hover:border-emerald-700/30',
+		'transition-all duration-200',
+		'backdrop-blur-md shadow-sm hover:shadow-md',
+		'disabled:opacity-50 disabled:pointer-events-none',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
+		'[&_svg]:w-4 [&_svg]:h-4'
+	);
+
+	const iconButtonClass = cn(
+		'inline-flex items-center justify-center',
+		'h-9 w-9 rounded-lg',
+		'bg-white/60 dark:bg-emerald-950/25',
+		'border border-white/40 dark:border-emerald-800/25',
+		'text-foreground',
+		'hover:bg-white/75 dark:hover:bg-emerald-950/35',
+		'hover:border-white/50 dark:hover:border-emerald-700/30',
+		'transition-all duration-200',
+		'backdrop-blur-md shadow-sm hover:shadow-md',
+		'disabled:opacity-50 disabled:pointer-events-none',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
+		'[&_svg]:w-4 [&_svg]:h-4'
+	);
+
+	const activeButtonClass = cn(
+		iconButtonClass,
+		'bg-accent/70 dark:bg-accent/60',
+		'border-accent/40 dark:border-accent/30',
+		'text-white',
+		'hover:bg-accent/85 dark:hover:bg-accent/75',
+		'hover:border-accent/60 dark:hover:border-accent/50'
+	);
+</script>
+
+<nav
+	class={cn(
+		'flex items-center gap-3 px-4 py-3',
+		'bg-white/60 dark:bg-emerald-950/25',
+		'border-b border-white/40 dark:border-emerald-800/25',
+		'backdrop-blur-md shadow-sm'
+	)}
+>
+	<!-- Scene Name -->
+	<div class="flex items-center gap-2 min-w-0">
+		{#if isEditingName}
+			<input
+				bind:this={nameInput}
+				bind:value={editedName}
+				onblur={finishEditingName}
+				onkeydown={handleNameKeydown}
+				class={cn(
+					'px-2 py-1 rounded text-lg font-semibold',
+					'bg-white/80 dark:bg-emerald-950/40',
+					'border border-accent/40 dark:border-accent/30',
+					'focus:outline-none focus:ring-2 focus:ring-accent/50',
+					'min-w-[200px] max-w-[400px]'
+				)}
+				maxlength="100"
+			/>
+		{:else}
+			<button
+				onclick={startEditingName}
+				class={cn(
+					'px-2 py-1 rounded text-lg font-semibold truncate',
+					'hover:bg-white/40 dark:hover:bg-emerald-950/20',
+					'transition-colors duration-200',
+					'text-left max-w-[400px]'
+				)}
+				title="Click to rename scene"
+			>
+				{sceneName}
+			</button>
+		{/if}
+	</div>
+
+	<div class="flex-1"></div>
+
+	<!-- Controls Section -->
+	<div class="flex items-center gap-2">
+		<!-- Animation Toggle -->
+		<button
+			onclick={onToggleAnimations}
+			class={animationsEnabled ? activeButtonClass : iconButtonClass}
+			title={animationsEnabled ? 'Pause animations (Space)' : 'Play animations (Space)'}
+			aria-label={animationsEnabled ? 'Pause animations' : 'Play animations'}
+		>
+			{#if animationsEnabled}
+				<Pause />
+			{:else}
+				<Play />
+			{/if}
+		</button>
+
+		<!-- Grid Toggle -->
+		<button
+			onclick={onToggleGrid}
+			class={gridEnabled ? activeButtonClass : iconButtonClass}
+			title={gridEnabled ? 'Hide grid (G)' : 'Show grid (G)'}
+			aria-label={gridEnabled ? 'Hide grid' : 'Show grid'}
+		>
+			<Grid3X3 />
+		</button>
+
+		<!-- Grid Size Dropdown -->
+		{#if gridEnabled}
+			<select
+				value={gridSize}
+				onchange={(e) => onSetGridSize(Number(e.currentTarget.value) as 16 | 32 | 64)}
+				class={cn(
+					'h-9 px-3 rounded-lg',
+					'bg-white/60 dark:bg-emerald-950/25',
+					'border border-white/40 dark:border-emerald-800/25',
+					'text-foreground text-sm font-medium',
+					'hover:bg-white/75 dark:hover:bg-emerald-950/35',
+					'transition-all duration-200',
+					'backdrop-blur-md shadow-sm',
+					'focus:outline-none focus:ring-2 focus:ring-accent/50',
+					'cursor-pointer'
+				)}
+				title="Grid size"
+				aria-label="Select grid size"
+			>
+				{#each gridSizes as size}
+					<option value={size}>{size}px</option>
+				{/each}
+			</select>
+		{/if}
+	</div>
+
+	<!-- Divider -->
+	<div class="w-px h-6 bg-white/40 dark:bg-emerald-800/25"></div>
+
+	<!-- Action Buttons Section -->
+	<div class="flex items-center gap-2">
+		<!-- Delete -->
+		<button
+			onclick={onDelete}
+			disabled={!hasSelection}
+			class={iconButtonClass}
+			title="Delete selected (⌫)"
+			aria-label="Delete selected asset"
+		>
+			<Trash2 />
+		</button>
+
+		<!-- Duplicate -->
+		<button
+			onclick={onDuplicate}
+			disabled={!hasSelection}
+			class={iconButtonClass}
+			title="Duplicate selected (⌘D)"
+			aria-label="Duplicate selected asset"
+		>
+			<Copy />
+		</button>
+
+		<!-- Export PNG -->
+		<button
+			onclick={onExport}
+			class={buttonClass}
+			title="Export as PNG (⌘E)"
+			aria-label="Export scene as PNG"
+		>
+			<Download />
+			<span>Export PNG</span>
+		</button>
+	</div>
+
+	<!-- Divider -->
+	<div class="w-px h-6 bg-white/40 dark:bg-emerald-800/25"></div>
+
+	<!-- Save Button -->
+	<button
+		onclick={onSave}
+		class={cn(
+			buttonClass,
+			'bg-accent/70 dark:bg-accent/60',
+			'border-accent/40 dark:border-accent/30',
+			'text-white',
+			'hover:bg-accent/85 dark:hover:bg-accent/75',
+			'hover:border-accent/60 dark:hover:border-accent/50'
+		)}
+		title="Save scene (⌘S)"
+		aria-label="Save scene"
+	>
+		<Save />
+		<span>Save</span>
+	</button>
+</nav>

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

@@ -0,0 +1,24 @@
+/**
+ * Terrarium Toolbar
+ *
+ * Top toolbar for Terrarium canvas actions and settings.
+ * Features scene naming, animation/grid controls, and action buttons.
+ */
+interface Props {
+    sceneName: string;
+    animationsEnabled: boolean;
+    gridEnabled: boolean;
+    gridSize: 16 | 32 | 64;
+    hasSelection: boolean;
+    onToggleAnimations: () => void;
+    onToggleGrid: () => void;
+    onSetGridSize: (size: 16 | 32 | 64) => void;
+    onDelete: () => void;
+    onDuplicate: () => void;
+    onExport: () => void;
+    onSave: () => void;
+    onRename: (name: string) => void;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "sceneName">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

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

@@ -0,0 +1,31 @@
+/**
+ * Terrarium — Creative Canvas for Grove
+ *
+ * A drag-and-drop canvas where users compose nature scenes
+ * that become decorations for their blogs.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Terrarium } from '@autumnsgrove/groveengine/ui/terrarium';
+ * </script>
+ *
+ * <Terrarium />
+ * ```
+ *
+ * Grove — A place to Be
+ * Copyright (c) 2025 Autumn Brown
+ * Licensed under AGPL-3.0
+ */
+export { default as Terrarium } from './Terrarium.svelte';
+export { default as Canvas } from './Canvas.svelte';
+export { default as AssetPalette } from './AssetPalette.svelte';
+export { default as PaletteItem } from './PaletteItem.svelte';
+export { default as PlacedAssetComponent } from './PlacedAsset.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ExportDialog } from './ExportDialog.svelte';
+export { createTerrariumState } from './terrariumState.svelte';
+export type { TerrariumState } from './terrariumState.svelte';
+export type { AssetCategory, AssetDefinition, AssetMeta, CanvasSettings, Decoration, DecorationOptions, DecorationZone, DragState, ExportOptions, PanState, PlacedAsset, Point, PropDefinition, SelectionState, Size, TerrariumScene, ToolbarAction, ToolMode } from './types';
+export { CANVAS_BACKGROUNDS, DEFAULT_SCENE } from './types';
+export { exportSceneAsPNG, generateDataUrl, sanitizeFilename } from './utils/export';

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

@@ -0,0 +1,33 @@
+/**
+ * Terrarium — Creative Canvas for Grove
+ *
+ * A drag-and-drop canvas where users compose nature scenes
+ * that become decorations for their blogs.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Terrarium } from '@autumnsgrove/groveengine/ui/terrarium';
+ * </script>
+ *
+ * <Terrarium />
+ * ```
+ *
+ * Grove — A place to Be
+ * Copyright (c) 2025 Autumn Brown
+ * Licensed under AGPL-3.0
+ */
+// Main component
+export { default as Terrarium } from './Terrarium.svelte';
+// Sub-components (for advanced usage)
+export { default as Canvas } from './Canvas.svelte';
+export { default as AssetPalette } from './AssetPalette.svelte';
+export { default as PaletteItem } from './PaletteItem.svelte';
+export { default as PlacedAssetComponent } from './PlacedAsset.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ExportDialog } from './ExportDialog.svelte';
+// State management
+export { createTerrariumState } from './terrariumState.svelte';
+export { CANVAS_BACKGROUNDS, DEFAULT_SCENE } from './types';
+// Utilities
+export { exportSceneAsPNG, generateDataUrl, sanitizeFilename } from './utils/export';

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

@@ -0,0 +1,45 @@
+/**
+ * Grove — A place to Be
+ * Copyright (c) 2025 Autumn Brown
+ * Licensed under AGPL-3.0
+ */
+/**
+ * Terrarium State Management
+ *
+ * Centralized state management for the Terrarium creative canvas using Svelte 5 runes.
+ * Manages scene, assets, selection, and canvas interaction state.
+ *
+ * Note on mutation strategy: Svelte 5 runes track mutations deeply, so we use direct
+ * mutations (push, splice, property assignment) for performance. The setScene function
+ * uses immutable patterns to ensure a clean state when loading external data.
+ */
+import type { TerrariumScene, PlacedAsset, Point, AssetCategory, ToolMode } from './types';
+/**
+ * Create the Terrarium state manager
+ */
+export declare function createTerrariumState(): {
+    readonly scene: TerrariumScene;
+    readonly selectedAssetId: string | null;
+    isDragging: boolean;
+    readonly animationsEnabled: boolean;
+    readonly panOffset: Point;
+    readonly toolMode: ToolMode;
+    readonly selectedAsset: PlacedAsset | null;
+    readonly assetCount: number;
+    readonly canAddAsset: boolean;
+    readonly complexityUsage: number;
+    addAsset: (componentName: string, category: AssetCategory, position: Point) => string;
+    updateAsset: (id: string, updates: Partial<PlacedAsset>) => void;
+    deleteAsset: (id: string) => void;
+    duplicateAsset: (id: string) => string;
+    selectAsset: (id: string | null) => void;
+    moveLayer: (id: string, direction: "up" | "down" | "top" | "bottom") => void;
+    setScene: (newScene: TerrariumScene) => void;
+    resetScene: () => void;
+    toggleAnimations: () => void;
+    toggleGrid: () => void;
+    setGridSize: (size: 16 | 32 | 64) => void;
+    setPanOffset: (offset: Point) => void;
+    setToolMode: (mode: ToolMode) => void;
+};
+export type TerrariumState = ReturnType<typeof createTerrariumState>;