@autumnsgrove/groveengine 0.8.5 → 0.9.0

package/dist/ui/components/terrarium/terrariumState.svelte.js

@@ -0,0 +1,291 @@
+/**
+ * Grove — A place to Be
+ * Copyright (c) 2025 Autumn Brown
+ * Licensed under AGPL-3.0
+ */
+import { DEFAULT_SCENE } from './types';
+import { TERRARIUM_CONFIG } from '../../../config/terrarium';
+/**
+ * Calculate complexity cost of a placed asset
+ */
+function calculateAssetComplexity(asset) {
+    let cost = TERRARIUM_CONFIG.complexity.weights.normal;
+    if (asset.animationEnabled) {
+        cost = TERRARIUM_CONFIG.complexity.weights.animated;
+    }
+    else if (asset.scale > 1.5 || asset.scale < 0.5) {
+        cost = TERRARIUM_CONFIG.complexity.weights.scaled;
+    }
+    return cost;
+}
+/**
+ * Calculate total scene complexity
+ */
+function calculateSceneComplexity(assets) {
+    return assets.reduce((total, asset) => total + calculateAssetComplexity(asset), 0);
+}
+/**
+ * Create a new empty scene
+ */
+function createEmptyScene() {
+    const now = new Date().toISOString();
+    return {
+        ...DEFAULT_SCENE,
+        id: crypto.randomUUID(),
+        createdAt: now,
+        updatedAt: now
+    };
+}
+/**
+ * Get the highest z-index in the scene
+ */
+function getMaxZIndex(assets) {
+    if (assets.length === 0)
+        return 0;
+    return Math.max(...assets.map((a) => a.zIndex));
+}
+/**
+ * Create the Terrarium state manager
+ */
+export function createTerrariumState() {
+    let scene = $state(createEmptyScene());
+    let selectedAssetId = $state(null);
+    let isDragging = $state(false);
+    let animationsEnabled = $state(true);
+    let panOffset = $state({ x: 0, y: 0 });
+    let toolMode = $state('select');
+    const selectedAsset = $derived(scene.assets.find((a) => a.id === selectedAssetId) ?? null);
+    const assetCount = $derived(scene.assets.length);
+    const complexityUsage = $derived(Math.min(calculateSceneComplexity(scene.assets) / TERRARIUM_CONFIG.complexity.maxComplexity, 1));
+    const canAddAsset = $derived(calculateSceneComplexity(scene.assets) < TERRARIUM_CONFIG.complexity.maxComplexity);
+    function addAsset(componentName, category, position) {
+        // Guard: enforce complexity budget
+        if (!canAddAsset) {
+            return '';
+        }
+        // Validate position is within canvas bounds
+        const clampedPosition = {
+            x: Math.max(0, Math.min(position.x, scene.canvas.width)),
+            y: Math.max(0, Math.min(position.y, scene.canvas.height))
+        };
+        const id = crypto.randomUUID();
+        const maxZ = getMaxZIndex(scene.assets);
+        const newAsset = {
+            id,
+            componentName,
+            category,
+            position: clampedPosition,
+            scale: TERRARIUM_CONFIG.asset.defaultScale,
+            rotation: 0,
+            zIndex: maxZ + 1,
+            props: {},
+            animationEnabled: animationsEnabled
+        };
+        scene.assets.push(newAsset);
+        scene.updatedAt = new Date().toISOString();
+        selectedAssetId = id;
+        return id;
+    }
+    function updateAsset(id, updates) {
+        const index = scene.assets.findIndex((a) => a.id === id);
+        if (index === -1)
+            return;
+        scene.assets[index] = {
+            ...scene.assets[index],
+            ...updates,
+            id,
+            position: updates.position
+                ? { ...updates.position }
+                : scene.assets[index].position,
+            props: updates.props ? { ...updates.props } : scene.assets[index].props
+        };
+        scene.updatedAt = new Date().toISOString();
+    }
+    function deleteAsset(id) {
+        const index = scene.assets.findIndex((a) => a.id === id);
+        if (index === -1)
+            return;
+        scene.assets.splice(index, 1);
+        scene.updatedAt = new Date().toISOString();
+        if (selectedAssetId === id) {
+            selectedAssetId = null;
+        }
+    }
+    function duplicateAsset(id) {
+        const asset = scene.assets.find((a) => a.id === id);
+        if (!asset)
+            return '';
+        const newId = crypto.randomUUID();
+        const maxZ = getMaxZIndex(scene.assets);
+        const offset = TERRARIUM_CONFIG.ui.duplicateOffset;
+        const duplicatedAsset = {
+            ...asset,
+            id: newId,
+            position: {
+                x: asset.position.x + offset,
+                y: asset.position.y + offset
+            },
+            zIndex: maxZ + 1,
+            props: { ...asset.props }
+        };
+        scene.assets.push(duplicatedAsset);
+        scene.updatedAt = new Date().toISOString();
+        selectedAssetId = newId;
+        return newId;
+    }
+    function selectAsset(id) {
+        selectedAssetId = id;
+    }
+    function moveLayer(id, direction) {
+        const index = scene.assets.findIndex((a) => a.id === id);
+        if (index === -1)
+            return;
+        const asset = scene.assets[index];
+        const currentZ = asset.zIndex;
+        if (direction === 'top') {
+            const maxZ = getMaxZIndex(scene.assets);
+            if (currentZ === maxZ)
+                return;
+            asset.zIndex = maxZ + 1;
+        }
+        else if (direction === 'bottom') {
+            const minZ = Math.min(...scene.assets.map((a) => a.zIndex));
+            if (currentZ === minZ)
+                return;
+            asset.zIndex = minZ - 1;
+        }
+        else if (direction === 'up') {
+            const higherAssets = scene.assets.filter((a) => a.zIndex > currentZ);
+            if (higherAssets.length === 0)
+                return;
+            const nextZ = Math.min(...higherAssets.map((a) => a.zIndex));
+            const swapAsset = scene.assets.find((a) => a.zIndex === nextZ);
+            if (swapAsset) {
+                swapAsset.zIndex = currentZ;
+                asset.zIndex = nextZ;
+            }
+        }
+        else if (direction === 'down') {
+            const lowerAssets = scene.assets.filter((a) => a.zIndex < currentZ);
+            if (lowerAssets.length === 0)
+                return;
+            const prevZ = Math.max(...lowerAssets.map((a) => a.zIndex));
+            const swapAsset = scene.assets.find((a) => a.zIndex === prevZ);
+            if (swapAsset) {
+                swapAsset.zIndex = currentZ;
+                asset.zIndex = prevZ;
+            }
+        }
+        scene.updatedAt = new Date().toISOString();
+        // Normalize z-indices periodically to prevent drift
+        normalizeZIndices();
+    }
+    /**
+     * Normalizes z-indices to sequential values (0, 1, 2, ...) to prevent
+     * accumulation of very large or negative values over time.
+     */
+    function normalizeZIndices() {
+        if (scene.assets.length === 0)
+            return;
+        // Sort by current z-index, then reassign sequential values
+        const sorted = [...scene.assets].sort((a, b) => a.zIndex - b.zIndex);
+        sorted.forEach((asset, index) => {
+            const original = scene.assets.find((a) => a.id === asset.id);
+            if (original) {
+                original.zIndex = index;
+            }
+        });
+    }
+    function setScene(newScene) {
+        scene = {
+            ...newScene,
+            canvas: { ...newScene.canvas },
+            assets: newScene.assets.map((asset) => ({
+                ...asset,
+                position: { ...asset.position },
+                props: { ...asset.props }
+            }))
+        };
+        selectedAssetId = null;
+        panOffset = { x: 0, y: 0 };
+        // Normalize z-indices when loading external data
+        normalizeZIndices();
+    }
+    function resetScene() {
+        scene = createEmptyScene();
+        selectedAssetId = null;
+        panOffset = { x: 0, y: 0 };
+    }
+    function toggleAnimations() {
+        animationsEnabled = !animationsEnabled;
+        for (const asset of scene.assets) {
+            asset.animationEnabled = animationsEnabled;
+        }
+        scene.updatedAt = new Date().toISOString();
+    }
+    function toggleGrid() {
+        scene.canvas.gridEnabled = !scene.canvas.gridEnabled;
+        scene.updatedAt = new Date().toISOString();
+    }
+    function setGridSize(size) {
+        scene.canvas.gridSize = size;
+        scene.updatedAt = new Date().toISOString();
+    }
+    function setPanOffset(offset) {
+        panOffset = { ...offset };
+    }
+    function setToolMode(mode) {
+        toolMode = mode;
+        if (mode === 'pan') {
+            selectedAssetId = null;
+        }
+    }
+    return {
+        get scene() {
+            return scene;
+        },
+        get selectedAssetId() {
+            return selectedAssetId;
+        },
+        get isDragging() {
+            return isDragging;
+        },
+        set isDragging(value) {
+            isDragging = value;
+        },
+        get animationsEnabled() {
+            return animationsEnabled;
+        },
+        get panOffset() {
+            return panOffset;
+        },
+        get toolMode() {
+            return toolMode;
+        },
+        get selectedAsset() {
+            return selectedAsset;
+        },
+        get assetCount() {
+            return assetCount;
+        },
+        get canAddAsset() {
+            return canAddAsset;
+        },
+        get complexityUsage() {
+            return complexityUsage;
+        },
+        addAsset,
+        updateAsset,
+        deleteAsset,
+        duplicateAsset,
+        selectAsset,
+        moveLayer,
+        setScene,
+        resetScene,
+        toggleAnimations,
+        toggleGrid,
+        setGridSize,
+        setPanOffset,
+        setToolMode
+    };
+}

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

@@ -0,0 +1,139 @@
+/**
+ * Terrarium Type Definitions
+ *
+ * Core types for the Terrarium creative canvas system.
+ */
+import type { Component as SvelteComponent } from 'svelte';
+export type AssetCategory = 'trees' | 'creatures' | 'botanical' | 'ground' | 'sky' | 'structural' | 'water' | 'weather';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface CanvasSettings {
+    width: number;
+    height: number;
+    background: string;
+    gridEnabled: boolean;
+    gridSize: 16 | 32 | 64;
+}
+export interface AssetMeta {
+    displayName: string;
+    category: AssetCategory;
+    isAnimated: boolean;
+    defaultSize: Size;
+    props: PropDefinition[];
+}
+export interface PropDefinition {
+    key: string;
+    label: string;
+    type: 'number' | 'boolean' | 'string' | 'select' | 'color';
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    default: unknown;
+}
+export interface AssetDefinition extends AssetMeta {
+    name: string;
+    load: () => Promise<{
+        default: SvelteComponent;
+    }>;
+}
+export interface PlacedAsset {
+    id: string;
+    componentName: string;
+    category: AssetCategory;
+    position: Point;
+    scale: number;
+    rotation: number;
+    zIndex: number;
+    props: Record<string, unknown>;
+    animationEnabled: boolean;
+}
+export interface TerrariumScene {
+    id: string;
+    name: string;
+    version: 1;
+    canvas: CanvasSettings;
+    assets: PlacedAsset[];
+    createdAt: string;
+    updatedAt: string;
+}
+export type DecorationZone = 'header' | 'sidebar' | 'footer' | 'background';
+export interface DecorationOptions {
+    opacity: number;
+}
+export interface Decoration {
+    id: string;
+    name: string;
+    zone: DecorationZone;
+    scene: TerrariumScene;
+    options: DecorationOptions;
+    thumbnail?: string;
+    authorId?: string;
+    isPublic: boolean;
+    createdAt: string;
+}
+export interface ExportOptions {
+    scale?: number;
+    backgroundColor?: string;
+    pauseAnimations?: boolean;
+    width?: number;
+    height?: number;
+}
+export interface DragState {
+    isDragging: boolean;
+    startPosition: Point;
+    currentPosition: Point;
+    assetId: string | null;
+}
+export interface PanState {
+    isPanning: boolean;
+    offset: Point;
+    startOffset: Point;
+    startMouse: Point;
+}
+export interface SelectionState {
+    selectedId: string | null;
+    isMultiSelect: boolean;
+    selectedIds: string[];
+}
+export type ToolMode = 'select' | 'pan' | 'place';
+export interface ToolbarAction {
+    id: string;
+    label: string;
+    icon: string;
+    shortcut?: string;
+    action: () => void;
+    disabled?: boolean;
+}
+export declare const DEFAULT_SCENE: TerrariumScene;
+export declare const CANVAS_BACKGROUNDS: readonly [{
+    readonly name: "Sky Gradient";
+    readonly value: "linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 50%, #A8E6CF 100%)";
+}, {
+    readonly name: "Forest Dawn";
+    readonly value: "linear-gradient(to bottom, #FEF3C7 0%, #FDE68A 30%, #34D399 100%)";
+}, {
+    readonly name: "Night Sky";
+    readonly value: "linear-gradient(to bottom, #1E1B4B 0%, #312E81 50%, #4C1D95 100%)";
+}, {
+    readonly name: "Sunset";
+    readonly value: "linear-gradient(to bottom, #FDE68A 0%, #FB923C 40%, #EC4899 100%)";
+}, {
+    readonly name: "Transparent";
+    readonly value: "transparent";
+}, {
+    readonly name: "White";
+    readonly value: "#FFFFFF";
+}, {
+    readonly name: "Cream";
+    readonly value: "#FFFBEB";
+}];

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

@@ -0,0 +1,43 @@
+/**
+ * Terrarium Type Definitions
+ *
+ * Core types for the Terrarium creative canvas system.
+ */
+// Default scene for initialization
+export const DEFAULT_SCENE = {
+    id: '',
+    name: 'Untitled Scene',
+    version: 1,
+    canvas: {
+        width: 1200,
+        height: 800,
+        background: 'linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 50%, #A8E6CF 100%)',
+        gridEnabled: false,
+        gridSize: 32
+    },
+    assets: [],
+    createdAt: '',
+    updatedAt: ''
+};
+// Default canvas backgrounds
+export const CANVAS_BACKGROUNDS = [
+    {
+        name: 'Sky Gradient',
+        value: 'linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 50%, #A8E6CF 100%)'
+    },
+    {
+        name: 'Forest Dawn',
+        value: 'linear-gradient(to bottom, #FEF3C7 0%, #FDE68A 30%, #34D399 100%)'
+    },
+    {
+        name: 'Night Sky',
+        value: 'linear-gradient(to bottom, #1E1B4B 0%, #312E81 50%, #4C1D95 100%)'
+    },
+    {
+        name: 'Sunset',
+        value: 'linear-gradient(to bottom, #FDE68A 0%, #FB923C 40%, #EC4899 100%)'
+    },
+    { name: 'Transparent', value: 'transparent' },
+    { name: 'White', value: '#FFFFFF' },
+    { name: 'Cream', value: '#FFFBEB' }
+];

package/dist/ui/components/terrarium/utils/export.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Terrarium PNG Export Utilities
+ *
+ * Handles exporting Terrarium scenes as PNG images using dom-to-image-more.
+ * Supports pausing animations, custom scaling, and thumbnail generation.
+ *
+ * This file is part of 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.
+ */
+import type { ExportOptions } from '../types';
+/**
+ * Sanitizes a filename by converting to lowercase and replacing
+ * non-alphanumeric characters with hyphens.
+ * Also truncates to a maximum length to prevent filesystem issues.
+ */
+export declare function sanitizeFilename(name: string): string;
+/**
+ * Triggers a download of a data URL with the specified filename.
+ */
+export declare function downloadDataUrl(dataUrl: string, filename: string): void;
+/**
+ * Generates a PNG data URL from a canvas element.
+ * Useful for creating thumbnails or previews.
+ *
+ * @param canvasElement - The HTML element to capture
+ * @param options - Export configuration options
+ * @returns Promise resolving to a data URL string
+ */
+export declare function generateDataUrl(canvasElement: HTMLElement, options?: ExportOptions): Promise<string>;
+/**
+ * Exports a Terrarium scene as a PNG file.
+ * Pauses animations during capture and triggers a download.
+ *
+ * @param canvasElement - The HTML element to capture
+ * @param sceneName - Name of the scene (used for filename)
+ * @param options - Export configuration options
+ */
+export declare function exportSceneAsPNG(canvasElement: HTMLElement, sceneName: string, options?: ExportOptions): Promise<void>;

package/dist/ui/components/terrarium/utils/export.js

@@ -0,0 +1,148 @@
+/**
+ * Terrarium PNG Export Utilities
+ *
+ * Handles exporting Terrarium scenes as PNG images using dom-to-image-more.
+ * Supports pausing animations, custom scaling, and thumbnail generation.
+ *
+ * This file is part of 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.
+ */
+import domtoimage from 'dom-to-image-more';
+import { TERRARIUM_CONFIG } from '../../../../config/terrarium';
+/**
+ * Pauses all CSS animations and transitions on an element and its children.
+ * Returns a cleanup function to restore animations.
+ */
+function pauseAnimations(element) {
+    const originalStyles = new Map();
+    const allElements = [element, ...Array.from(element.querySelectorAll('*'))];
+    allElements.forEach((el) => {
+        const style = el.style.cssText;
+        originalStyles.set(el, style);
+        el.style.cssText += '; animation-play-state: paused !important; transition: none !important;';
+    });
+    return () => {
+        originalStyles.forEach((style, el) => {
+            el.style.cssText = style;
+        });
+    };
+}
+/**
+ * Waits for a specified number of milliseconds.
+ */
+function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/**
+ * Verifies that animations are actually paused on an element and all its children.
+ * Uses getComputedStyle to check animation-play-state.
+ */
+function verifyAnimationsPaused(element) {
+    const allElements = [element, ...Array.from(element.querySelectorAll('*'))];
+    return allElements.every((el) => {
+        const style = getComputedStyle(el);
+        return style.animationPlayState === 'paused' || style.animationPlayState === '';
+    });
+}
+/**
+ * Sanitizes a filename by converting to lowercase and replacing
+ * non-alphanumeric characters with hyphens.
+ * Also truncates to a maximum length to prevent filesystem issues.
+ */
+export function sanitizeFilename(name) {
+    const maxLength = TERRARIUM_CONFIG.ui.filenameMaxLength;
+    const sanitized = name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+    // Truncate to max length, ensuring we don't cut in the middle of a word
+    if (sanitized.length > maxLength) {
+        const truncated = sanitized.slice(0, maxLength);
+        // Find last hyphen to avoid cutting words
+        const lastHyphen = truncated.lastIndexOf('-');
+        return lastHyphen > maxLength / 2 ? truncated.slice(0, lastHyphen) : truncated;
+    }
+    return sanitized;
+}
+/**
+ * Triggers a download of a data URL with the specified filename.
+ */
+export function downloadDataUrl(dataUrl, filename) {
+    const anchor = document.createElement('a');
+    anchor.href = dataUrl;
+    anchor.download = filename;
+    anchor.style.display = 'none';
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+}
+/**
+ * Generates a PNG data URL from a canvas element.
+ * Useful for creating thumbnails or previews.
+ *
+ * @param canvasElement - The HTML element to capture
+ * @param options - Export configuration options
+ * @returns Promise resolving to a data URL string
+ */
+export async function generateDataUrl(canvasElement, options = {}) {
+    const { scale = TERRARIUM_CONFIG.export.defaultScale, backgroundColor, pauseAnimations: shouldPauseAnimations = true, width, height } = options;
+    let restoreAnimations = null;
+    try {
+        if (shouldPauseAnimations) {
+            restoreAnimations = pauseAnimations(canvasElement);
+            // Wait for animations to pause, using configurable timing
+            // Then verify they're actually paused before proceeding
+            await wait(TERRARIUM_CONFIG.ui.exportWaitMs);
+            if (!verifyAnimationsPaused(canvasElement)) {
+                // If still not paused, wait a bit longer for slower devices
+                await wait(TERRARIUM_CONFIG.ui.exportWaitMs);
+            }
+        }
+        const domToImageOptions = {
+            quality: 1.0
+        };
+        if (width !== undefined) {
+            domToImageOptions.width = width * scale;
+        }
+        if (height !== undefined) {
+            domToImageOptions.height = height * scale;
+        }
+        if (backgroundColor !== undefined) {
+            domToImageOptions.style = {
+                backgroundColor
+            };
+        }
+        const dataUrl = await domtoimage.toPng(canvasElement, domToImageOptions);
+        return dataUrl;
+    }
+    finally {
+        if (restoreAnimations) {
+            restoreAnimations();
+        }
+    }
+}
+/**
+ * Exports a Terrarium scene as a PNG file.
+ * Pauses animations during capture and triggers a download.
+ *
+ * @param canvasElement - The HTML element to capture
+ * @param sceneName - Name of the scene (used for filename)
+ * @param options - Export configuration options
+ */
+export async function exportSceneAsPNG(canvasElement, sceneName, options = {}) {
+    const dataUrl = await generateDataUrl(canvasElement, options);
+    const sanitizedName = sanitizeFilename(sceneName);
+    const filename = `${sanitizedName || 'terrarium-scene'}.png`;
+    downloadDataUrl(dataUrl, filename);
+}

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

@@ -2,18 +2,8 @@ export { default as FontProvider } from './FontProvider.svelte';
 export { default as Lexend } from './Lexend.svelte';
 export { default as Atkinson } from './Atkinson.svelte';
 export { default as OpenDyslexic } from './OpenDyslexic.svelte';
-export { default as Luciole } from './Luciole.svelte';
-export { default as Nunito } from './Nunito.svelte';
 export { default as Quicksand } from './Quicksand.svelte';
-export { default as Manrope } from './Manrope.svelte';
-export { default as InstrumentSans } from './InstrumentSans.svelte';
 export { default as PlusJakartaSans } from './PlusJakartaSans.svelte';
-export { default as Cormorant } from './Cormorant.svelte';
-export { default as BodoniModa } from './BodoniModa.svelte';
-export { default as Lora } from './Lora.svelte';
-export { default as EBGaramond } from './EBGaramond.svelte';
-export { default as Merriweather } from './Merriweather.svelte';
-export { default as Fraunces } from './Fraunces.svelte';
 export { default as IBMPlexMono } from './IBMPlexMono.svelte';
 export { default as Cozette } from './Cozette.svelte';
 export { default as Alagard } from './Alagard.svelte';