@autumnsgrove/groveengine 0.1.0

package/dist/components/gallery/Lightbox.svelte

@@ -0,0 +1,107 @@
+<script>
+	import ZoomableImage from './ZoomableImage.svelte';
+	import LightboxCaption from './LightboxCaption.svelte';
+
+	/**
+	 * Lightbox - Full-screen image viewer
+	 * Click to expand images to full size with zoom and pan support
+	 */
+	let { src = '', alt = '', caption = '', isOpen = false, onClose = () => {} } = $props();
+
+	function handleKeydown(event) {
+		if (event.key === 'Escape') {
+			onClose();
+		}
+	}
+
+	function handleBackdropClick(event) {
+		if (event.target === event.currentTarget) {
+			onClose();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isOpen}
+	<div
+		class="lightbox-backdrop"
+		onclick={handleBackdropClick}
+		role="dialog"
+		aria-modal="true"
+		aria-label="Image viewer"
+	>
+		<button class="close-button" onclick={onClose} aria-label="Close">
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+		<div class="lightbox-content" onclick={handleBackdropClick}>
+			<ZoomableImage {src} {alt} isActive={isOpen} class="lightbox-image" />
+		</div>
+		<LightboxCaption {caption} />
+	</div>
+{/if}
+
+<style>
+	.lightbox-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.9);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		z-index: 9999;
+		cursor: pointer;
+		padding: 2rem;
+	}
+
+	.lightbox-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 90vw;
+		max-height: 90vh;
+		overflow: auto;
+	}
+
+	:global(.lightbox-content .lightbox-image) {
+		max-width: 90vw;
+		-o-object-fit: contain;
+		   object-fit: contain;
+		border-radius: 4px;
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.close-button {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.1);
+		border: none;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: white;
+		transition: background 0.2s;
+	}
+
+	.close-button:hover {
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	.close-button svg {
+		width: 24px;
+		height: 24px;
+	}
+</style>

package/dist/components/gallery/Lightbox.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Lightbox;
+type Lightbox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Lightbox: import("svelte").Component<{
+    src?: string;
+    alt?: string;
+    caption?: string;
+    isOpen?: boolean;
+    onClose?: Function;
+}, {}, "">;
+type $$ComponentProps = {
+    src?: string;
+    alt?: string;
+    caption?: string;
+    isOpen?: boolean;
+    onClose?: Function;
+};

package/dist/components/gallery/LightboxCaption.svelte

@@ -0,0 +1,25 @@
+<script>
+	/**
+	 * LightboxCaption - Shared caption component for lightbox viewers
+	 * Displays image captions with consistent styling
+	 *
+	 * @prop {string} caption - The caption text to display
+	 */
+	let { caption = '' } = $props();
+</script>
+
+{#if caption}
+	<div class="lightbox-caption">{caption}</div>
+{/if}
+
+<style>
+	.lightbox-caption {
+		padding: 0.75rem 1rem;
+		color: rgba(255, 255, 255, 0.9);
+		font-size: 0.9rem;
+		font-style: italic;
+		text-align: center;
+		max-width: 90vw;
+		line-height: 1.5;
+	}
+</style>

package/dist/components/gallery/LightboxCaption.svelte.d.ts

@@ -0,0 +1,11 @@
+export default LightboxCaption;
+type LightboxCaption = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LightboxCaption: import("svelte").Component<{
+    caption?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    caption?: string;
+};

package/dist/components/gallery/ZoomableImage.svelte

@@ -0,0 +1,163 @@
+<script>
+	/**
+	 * ZoomableImage - Image with zoom and pan functionality
+	 * Click to cycle through zoom levels, drag to pan when zoomed
+	 *
+	 * @prop {string} src - Image source URL
+	 * @prop {string} alt - Alt text for accessibility
+	 * @prop {boolean} isActive - When false, resets zoom/pan state
+	 * @prop {string} class - Additional CSS classes
+	 */
+	let { src = '', alt = '', isActive = true, class: className = '' } = $props();
+
+	// Zoom state: 0 = normal, 1 = medium zoom (1.5x), 2 = max zoom (2.5x)
+	let zoomLevel = $state(0);
+
+	// Pan/drag state for zoomed images
+	let isDragging = $state(false);
+	let panX = $state(0);
+	let panY = $state(0);
+	let dragStartX = $state(0);
+	let dragStartY = $state(0);
+	let dragStartPanX = $state(0);
+	let dragStartPanY = $state(0);
+	let totalDragDistance = $state(0);
+
+	// Derived scale value based on zoom level
+	let scaleValue = $derived(zoomLevel === 0 ? 1 : zoomLevel === 1 ? 1.5 : 2.5);
+
+	// Reset zoom and pan when isActive becomes false or src changes
+	$effect(() => {
+		if (!isActive) {
+			zoomLevel = 0;
+			panX = 0;
+			panY = 0;
+			isDragging = false;
+		}
+	});
+
+	// Reset when image source changes
+	$effect(() => {
+		// Track src to trigger reset
+		src;
+		zoomLevel = 0;
+		panX = 0;
+		panY = 0;
+		isDragging = false;
+	});
+
+	function cycleZoom() {
+		zoomLevel = (zoomLevel + 1) % 3;
+		// Reset pan when zooming out to level 0
+		if (zoomLevel === 0) {
+			panX = 0;
+			panY = 0;
+		}
+	}
+
+	// Mouse event handlers for drag/pan
+	function handleMouseDown(event) {
+		if (zoomLevel === 0) return;
+
+		isDragging = true;
+		dragStartX = event.clientX;
+		dragStartY = event.clientY;
+		dragStartPanX = panX;
+		dragStartPanY = panY;
+		totalDragDistance = 0;
+		event.preventDefault();
+	}
+
+	function handleMouseMove(event) {
+		if (!isDragging) return;
+
+		const deltaX = event.clientX - dragStartX;
+		const deltaY = event.clientY - dragStartY;
+
+		panX = dragStartPanX + deltaX;
+		panY = dragStartPanY + deltaY;
+		totalDragDistance += Math.abs(deltaX) + Math.abs(deltaY);
+	}
+
+	function handleMouseUp() {
+		isDragging = false;
+	}
+
+	// Touch event handlers for drag/pan on mobile
+	function handleTouchStart(event) {
+		if (zoomLevel === 0) return;
+
+		// Only handle single touch for panning
+		if (event.touches.length === 1) {
+			isDragging = true;
+			dragStartX = event.touches[0].clientX;
+			dragStartY = event.touches[0].clientY;
+			dragStartPanX = panX;
+			dragStartPanY = panY;
+			totalDragDistance = 0;
+			event.preventDefault();
+		}
+	}
+
+	function handleTouchMove(event) {
+		if (!isDragging || event.touches.length !== 1) return;
+
+		const deltaX = event.touches[0].clientX - dragStartX;
+		const deltaY = event.touches[0].clientY - dragStartY;
+
+		panX = dragStartPanX + deltaX;
+		panY = dragStartPanY + deltaY;
+		totalDragDistance += Math.abs(deltaX) + Math.abs(deltaY);
+		event.preventDefault();
+	}
+
+	function handleTouchEnd() {
+		isDragging = false;
+	}
+
+	// Click handler that distinguishes between click and drag
+	function handleClick(event) {
+		// If we dragged more than 5px, don't treat as click
+		if (totalDragDistance > 5) {
+			totalDragDistance = 0;
+			return;
+		}
+		cycleZoom();
+	}
+</script>
+
+<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp} />
+
+<img
+	{src}
+	{alt}
+	class="zoomable-image {className}"
+	class:zoomed={zoomLevel > 0}
+	class:dragging={isDragging}
+	style="transform: translate({panX}px, {panY}px) scale({scaleValue})"
+	onmousedown={handleMouseDown}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+	onclick={handleClick}
+/>
+
+<style>
+	.zoomable-image {
+		cursor: zoom-in;
+		transition: transform 0.3s ease;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
+		-webkit-user-drag: none;
+	}
+
+	.zoomable-image.zoomed {
+		cursor: grab;
+	}
+
+	.zoomable-image.dragging {
+		cursor: grabbing;
+		transition: none;
+	}
+</style>

package/dist/components/gallery/ZoomableImage.svelte.d.ts

@@ -0,0 +1,17 @@
+export default ZoomableImage;
+type ZoomableImage = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ZoomableImage: import("svelte").Component<{
+    src?: string;
+    alt?: string;
+    isActive?: boolean;
+    class?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    src?: string;
+    alt?: string;
+    isActive?: boolean;
+    class?: string;
+};

package/dist/components/ui/Accordion.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import {
+		Accordion as ShadcnAccordion,
+		AccordionItem,
+		AccordionTrigger,
+		AccordionContent
+	} from "./accordion";
+	import type { Snippet } from "svelte";
+
+	interface AccordionItemConfig {
+		value: string;
+		title: string;
+		content?: string;
+		disabled?: boolean;
+	}
+
+	/**
+	 * Accordion component wrapper for collapsible content sections
+	 *
+	 * @prop {AccordionItemConfig[]} items - Array of accordion items with value, title, optional content and disabled flag
+	 * @prop {string} [type="single"] - Accordion behavior: "single" (one open) or "multiple" (many open)
+	 * @prop {boolean} [collapsible=false] - Allow closing all items (only for type="single")
+	 * @prop {Snippet<[AccordionItemConfig]>} [contentSnippet] - Custom content renderer (receives item data)
+	 * @prop {string} [class] - Additional CSS classes for Accordion root
+	 *
+	 * @example
+	 * <Accordion items={[
+	 *   { value: "faq1", title: "What is this?", content: "This is an FAQ" },
+	 *   { value: "faq2", title: "How does it work?", content: "Very well!" }
+	 * ]} type="single" collapsible />
+	 *
+	 * @example
+	 * <Accordion items={sections} type="multiple">
+	 *   {#snippet contentSnippet(item)}
+	 *     <DetailedContent data={item} />
+	 *   {/snippet}
+	 * </Accordion>
+	 *
+	 * @example
+	 * <Accordion items={helpTopics} type="single" class="w-full" />
+	 */
+	interface Props {
+		items: AccordionItemConfig[];
+		type?: "single" | "multiple";
+		collapsible?: boolean;
+		class?: string;
+		contentSnippet?: Snippet<[item: AccordionItemConfig]>;
+	}
+
+	let {
+		items,
+		type = "single",
+		collapsible = false,
+		class: className,
+		contentSnippet
+	}: Props = $props();
+
+	const accordionType = $derived(type === "single" ? "single" : "multiple");
+</script>
+
+<ShadcnAccordion type={accordionType} {collapsible} class={className}>
+	{#each items as item (item.value)}
+		<AccordionItem value={item.value} disabled={item.disabled ?? false}>
+			<AccordionTrigger>{item.title}</AccordionTrigger>
+			<AccordionContent>
+				{#if contentSnippet}
+					{@render contentSnippet(item)}
+				{:else if item.content}
+					{item.content}
+				{/if}
+			</AccordionContent>
+		</AccordionItem>
+	{/each}
+</ShadcnAccordion>

package/dist/components/ui/Accordion.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from "svelte";
+interface AccordionItemConfig {
+    value: string;
+    title: string;
+    content?: string;
+    disabled?: boolean;
+}
+/**
+ * Accordion component wrapper for collapsible content sections
+ *
+ * @prop {AccordionItemConfig[]} items - Array of accordion items with value, title, optional content and disabled flag
+ * @prop {string} [type="single"] - Accordion behavior: "single" (one open) or "multiple" (many open)
+ * @prop {boolean} [collapsible=false] - Allow closing all items (only for type="single")
+ * @prop {Snippet<[AccordionItemConfig]>} [contentSnippet] - Custom content renderer (receives item data)
+ * @prop {string} [class] - Additional CSS classes for Accordion root
+ *
+ * @example
+ * <Accordion items={[
+ *   { value: "faq1", title: "What is this?", content: "This is an FAQ" },
+ *   { value: "faq2", title: "How does it work?", content: "Very well!" }
+ * ]} type="single" collapsible />
+ *
+ * @example
+ * <Accordion items={sections} type="multiple">
+ *   {#snippet contentSnippet(item)}
+ *     <DetailedContent data={item} />
+ *   {/snippet}
+ * </Accordion>
+ *
+ * @example
+ * <Accordion items={helpTopics} type="single" class="w-full" />
+ */
+interface Props {
+    items: AccordionItemConfig[];
+    type?: "single" | "multiple";
+    collapsible?: boolean;
+    class?: string;
+    contentSnippet?: Snippet<[item: AccordionItemConfig]>;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/ui/Badge.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Badge as ShadcnBadge } from "./badge";
+	import type { Snippet } from "svelte";
+
+	type BadgeVariant = "default" | "secondary" | "destructive" | "tag";
+
+	/**
+	 * Badge component wrapper for displaying small labels, tags, or status indicators
+	 *
+	 * @prop {BadgeVariant} [variant="default"] - Badge style variant (default|secondary|destructive|tag)
+	 * @prop {string} [class] - Additional CSS classes to apply
+	 * @prop {Snippet} [children] - Badge content (typically short text)
+	 *
+	 * @example
+	 * <Badge variant="default">New</Badge>
+	 *
+	 * @example
+	 * <Badge variant="destructive">Error</Badge>
+	 *
+	 * @example
+	 * <Badge variant="tag">TypeScript</Badge>
+	 */
+	interface Props {
+		variant?: BadgeVariant;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "default",
+		class: className,
+		children
+	}: Props = $props();
+
+	// Map tag variant to secondary styling
+	const variantMap: Record<BadgeVariant, "default" | "secondary" | "destructive"> = {
+		default: "default",
+		secondary: "secondary",
+		destructive: "destructive",
+		tag: "secondary"
+	};
+
+	const shadcnVariant = $derived(variantMap[variant]);
+</script>
+
+<ShadcnBadge variant={shadcnVariant} class={className}>
+	{@render children?.()}
+</ShadcnBadge>

package/dist/components/ui/Badge.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+type BadgeVariant = "default" | "secondary" | "destructive" | "tag";
+/**
+ * Badge component wrapper for displaying small labels, tags, or status indicators
+ *
+ * @prop {BadgeVariant} [variant="default"] - Badge style variant (default|secondary|destructive|tag)
+ * @prop {string} [class] - Additional CSS classes to apply
+ * @prop {Snippet} [children] - Badge content (typically short text)
+ *
+ * @example
+ * <Badge variant="default">New</Badge>
+ *
+ * @example
+ * <Badge variant="destructive">Error</Badge>
+ *
+ * @example
+ * <Badge variant="tag">TypeScript</Badge>
+ */
+interface Props {
+    variant?: BadgeVariant;
+    class?: string;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/ui/Button.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Button as ShadcnButton } from "./button";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type ButtonVariant = "primary" | "secondary" | "danger" | "ghost" | "link";
+	type ButtonSize = "sm" | "md" | "lg";
+
+	/**
+	 * Button component wrapper around shadcn-svelte Button
+	 *
+	 * @prop {ButtonVariant} [variant="primary"] - Button style variant (primary|secondary|danger|ghost|link)
+	 * @prop {ButtonSize} [size="md"] - Button size (sm|md|lg)
+	 * @prop {boolean} [disabled=false] - Whether button is disabled
+	 * @prop {Function} [onclick] - Click handler function
+	 * @prop {string} [href] - Optional link href (renders as anchor element)
+	 * @prop {string} [class] - Additional CSS classes to apply
+	 * @prop {Snippet} [children] - Button content (text/icons/etc)
+	 *
+	 * @example
+	 * <Button variant="primary" size="lg">Save Changes</Button>
+	 *
+	 * @example
+	 * <Button variant="danger" onclick={() => handleDelete()}>Delete</Button>
+	 *
+	 * @example
+	 * <Button variant="ghost" href="/settings">Settings</Button>
+	 */
+	interface Props extends Omit<HTMLButtonAttributes, "class"> {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "primary",
+		size = "md",
+		disabled = false,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	// Map our simplified variants to shadcn variants
+	const variantMap: Record<ButtonVariant, "default" | "secondary" | "destructive" | "ghost" | "link"> = {
+		primary: "default",
+		secondary: "secondary",
+		danger: "destructive",
+		ghost: "ghost",
+		link: "link"
+	};
+
+	// Map our size variants to shadcn sizes
+	const sizeMap: Record<ButtonSize, "sm" | "default" | "lg"> = {
+		sm: "sm",
+		md: "default",
+		lg: "lg"
+	};
+
+	const shadcnVariant = $derived(variantMap[variant]);
+	const shadcnSize = $derived(sizeMap[size]);
+</script>
+
+<ShadcnButton
+	variant={shadcnVariant}
+	size={shadcnSize}
+	disabled={disabled}
+	class={className}
+	{...restProps}
+>
+	{@render children?.()}
+</ShadcnButton>

package/dist/components/ui/Button.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost" | "link";
+type ButtonSize = "sm" | "md" | "lg";
+/**
+ * Button component wrapper around shadcn-svelte Button
+ *
+ * @prop {ButtonVariant} [variant="primary"] - Button style variant (primary|secondary|danger|ghost|link)
+ * @prop {ButtonSize} [size="md"] - Button size (sm|md|lg)
+ * @prop {boolean} [disabled=false] - Whether button is disabled
+ * @prop {Function} [onclick] - Click handler function
+ * @prop {string} [href] - Optional link href (renders as anchor element)
+ * @prop {string} [class] - Additional CSS classes to apply
+ * @prop {Snippet} [children] - Button content (text/icons/etc)
+ *
+ * @example
+ * <Button variant="primary" size="lg">Save Changes</Button>
+ *
+ * @example
+ * <Button variant="danger" onclick={() => handleDelete()}>Delete</Button>
+ *
+ * @example
+ * <Button variant="ghost" href="/settings">Settings</Button>
+ */
+interface Props extends Omit<HTMLButtonAttributes, "class"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;