@autumnsgrove/groveengine 0.6.5 → 0.8.0

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

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+/**
+ * GlassButton - A button with glassmorphism styling
+ *
+ * Beautiful translucent buttons with backdrop blur effects.
+ * Perfect for floating actions, overlays, and modern UI designs.
+ *
+ * @example Basic glass button
+ * ```svelte
+ * <GlassButton>Click me</GlassButton>
+ * ```
+ *
+ * @example Accent glass button
+ * ```svelte
+ * <GlassButton variant="accent">Subscribe</GlassButton>
+ * ```
+ *
+ * @example Ghost glass with icon
+ * ```svelte
+ * <GlassButton variant="ghost" size="icon">
+ *   <X class="w-4 h-4" />
+ * </GlassButton>
+ * ```
+ */
+type GlassVariant = "default" | "accent" | "dark" | "ghost" | "outline";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
+interface Props extends Omit<HTMLButtonAttributes, "class"> {
+    variant?: GlassVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    href?: string;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+}
+declare const GlassButton: import("svelte").Component<Props, {}, "ref">;
+type GlassButton = ReturnType<typeof GlassButton>;
+export default GlassButton;

package/dist/ui/components/ui/GlassCard.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../utils";
+
+	/**
+	 * GlassCard - A card component with glassmorphism styling
+	 *
+	 * Beautiful translucent cards with backdrop blur effects.
+	 * Includes optional header, footer, and hoverable state.
+	 *
+	 * @example Basic glass card
+	 * ```svelte
+	 * <GlassCard title="Settings" description="Manage your preferences">
+	 *   <p>Card content here</p>
+	 * </GlassCard>
+	 * ```
+	 *
+	 * @example Accent card with footer
+	 * ```svelte
+	 * <GlassCard variant="accent" hoverable>
+	 *   {#snippet header()}<CustomHeader />{/snippet}
+	 *   Content here
+	 *   {#snippet footer()}<Button>Save</Button>{/snippet}
+	 * </GlassCard>
+	 * ```
+	 */
+
+	type GlassVariant =
+		| "default"   // Light translucent background
+		| "accent"    // Accent-colored glass
+		| "dark"      // Dark translucent background
+		| "muted"     // Very subtle, barely visible
+		| "frosted";  // Stronger blur effect, more opaque
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+		variant?: GlassVariant;
+		title?: string;
+		description?: string;
+		hoverable?: boolean;
+		border?: boolean;
+		class?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "default",
+		title,
+		description,
+		hoverable = false,
+		border = true,
+		class: className,
+		header,
+		footer,
+		children,
+		...restProps
+	}: Props = $props();
+
+	// Variant-specific styles - warm grove tones with true glass transparency
+	const variantClasses: Record<GlassVariant, string> = {
+		default: `
+			bg-white/60 dark:bg-emerald-950/25
+			backdrop-blur-md
+		`.trim().replace(/\s+/g, ' '),
+
+		accent: `
+			bg-accent/20 dark:bg-accent/15
+			backdrop-blur-md
+		`.trim().replace(/\s+/g, ' '),
+
+		dark: `
+			bg-slate-900/40 dark:bg-slate-950/40
+			backdrop-blur-md
+			text-white
+		`.trim().replace(/\s+/g, ' '),
+
+		muted: `
+			bg-white/30 dark:bg-emerald-950/15
+			backdrop-blur
+		`.trim().replace(/\s+/g, ' '),
+
+		frosted: `
+			bg-white/70 dark:bg-emerald-950/35
+			backdrop-blur-lg
+		`.trim().replace(/\s+/g, ' ')
+	};
+
+	// Border colors per variant - subtle, warm borders
+	const borderClasses: Record<GlassVariant, string> = {
+		default: "border-white/40 dark:border-emerald-800/25",
+		accent: "border-accent/30 dark:border-accent/20",
+		dark: "border-slate-700/30 dark:border-slate-600/30",
+		muted: "border-white/20 dark:border-emerald-800/15",
+		frosted: "border-white/50 dark:border-emerald-800/30"
+	};
+
+	// Hover styles - slightly more visible on hover
+	const hoverClasses: Record<GlassVariant, string> = {
+		default: "hover:bg-white/70 dark:hover:bg-emerald-950/35 hover:shadow-lg hover:border-white/50 dark:hover:border-emerald-700/30",
+		accent: "hover:bg-accent/30 dark:hover:bg-accent/25 hover:shadow-lg hover:shadow-accent/10 hover:border-accent/40",
+		dark: "hover:bg-slate-900/50 dark:hover:bg-slate-950/50 hover:shadow-xl hover:border-slate-600/40",
+		muted: "hover:bg-white/40 dark:hover:bg-emerald-950/25 hover:shadow-md hover:border-white/30",
+		frosted: "hover:bg-white/80 dark:hover:bg-emerald-950/45 hover:shadow-lg hover:border-white/60"
+	};
+
+	const computedClass = $derived(
+		cn(
+			"rounded-xl transition-all duration-200",
+			variantClasses[variant],
+			border && `border ${borderClasses[variant]}`,
+			hoverable && `cursor-pointer ${hoverClasses[variant]}`,
+			"shadow-sm",
+			className
+		)
+	);
+
+	// Text color adjustments for dark variant
+	const titleClass = $derived(
+		variant === "dark"
+			? "text-white"
+			: "text-foreground"
+	);
+
+	const descriptionClass = $derived(
+		variant === "dark"
+			? "text-slate-300"
+			: "text-muted-foreground"
+	);
+</script>
+
+<div class={computedClass} {...restProps}>
+	{#if header || title || description}
+		<div class="px-6 py-4 {(children || footer) ? 'border-b border-inherit' : ''}">
+			{#if header}
+				{@render header()}
+			{:else}
+				{#if title}
+					<h3 class="text-lg font-semibold {titleClass}">{title}</h3>
+				{/if}
+				{#if description}
+					<p class="text-sm {descriptionClass} mt-1">{description}</p>
+				{/if}
+			{/if}
+		</div>
+	{/if}
+
+	{#if children}
+		<div class="px-6 py-4">
+			{@render children()}
+		</div>
+	{/if}
+
+	{#if footer}
+		<div class="px-6 py-4 border-t border-inherit">
+			{@render footer()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * GlassCard - A card component with glassmorphism styling
+ *
+ * Beautiful translucent cards with backdrop blur effects.
+ * Includes optional header, footer, and hoverable state.
+ *
+ * @example Basic glass card
+ * ```svelte
+ * <GlassCard title="Settings" description="Manage your preferences">
+ *   <p>Card content here</p>
+ * </GlassCard>
+ * ```
+ *
+ * @example Accent card with footer
+ * ```svelte
+ * <GlassCard variant="accent" hoverable>
+ *   {#snippet header()}<CustomHeader />{/snippet}
+ *   Content here
+ *   {#snippet footer()}<Button>Save</Button>{/snippet}
+ * </GlassCard>
+ * ```
+ */
+type GlassVariant = "default" | "accent" | "dark" | "muted" | "frosted";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    variant?: GlassVariant;
+    title?: string;
+    description?: string;
+    hoverable?: boolean;
+    border?: boolean;
+    class?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+}
+declare const GlassCard: import("svelte").Component<Props, {}, "">;
+type GlassCard = ReturnType<typeof GlassCard>;
+export default GlassCard;

package/dist/ui/components/ui/GlassConfirmDialog.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../utils";
+	import { fade, scale } from "svelte/transition";
+	import { AlertTriangle, Trash2, HelpCircle } from "lucide-svelte";
+	import Button from "./Button.svelte";
+
+	/**
+	 * GlassConfirmDialog - A confirmation dialog with glassmorphism styling
+	 *
+	 * Perfect for destructive actions like delete, or any action that needs user confirmation.
+	 * Features a glass-effect card over a blurred overlay.
+	 *
+	 * @example Basic confirmation
+	 * ```svelte
+	 * <GlassConfirmDialog
+	 *   bind:open={showDeleteDialog}
+	 *   title="Delete Post"
+	 *   message="Are you sure you want to delete this post? This cannot be undone."
+	 *   confirmLabel="Delete"
+	 *   variant="danger"
+	 *   onconfirm={handleDelete}
+	 * />
+	 * ```
+	 *
+	 * @example Custom content
+	 * ```svelte
+	 * <GlassConfirmDialog bind:open={showDialog} title="Confirm Changes" onconfirm={save}>
+	 *   <p>You have unsaved changes. Would you like to save them?</p>
+	 * </GlassConfirmDialog>
+	 * ```
+	 */
+
+	type DialogVariant = "default" | "danger" | "warning";
+
+	interface Props {
+		/** Whether the dialog is open (bindable) */
+		open?: boolean;
+		/** Dialog title */
+		title: string;
+		/** Dialog message (if not using children) */
+		message?: string;
+		/** Confirm button label */
+		confirmLabel?: string;
+		/** Cancel button label */
+		cancelLabel?: string;
+		/** Dialog variant (affects styling and icon) */
+		variant?: DialogVariant;
+		/** Whether the confirm action is loading */
+		loading?: boolean;
+		/** Called when user confirms */
+		onconfirm?: () => void | Promise<void>;
+		/** Called when user cancels or closes */
+		oncancel?: () => void;
+		/** Custom content (overrides message) */
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		message,
+		confirmLabel = "Confirm",
+		cancelLabel = "Cancel",
+		variant = "default",
+		loading = false,
+		onconfirm,
+		oncancel,
+		children
+	}: Props = $props();
+
+	// Variant-specific styling
+	const variantConfig = {
+		default: {
+			icon: HelpCircle,
+			iconClass: "text-accent-muted",
+			confirmVariant: "primary" as const
+		},
+		danger: {
+			icon: Trash2,
+			iconClass: "text-red-500 dark:text-red-400",
+			confirmVariant: "danger" as const
+		},
+		warning: {
+			icon: AlertTriangle,
+			iconClass: "text-amber-500 dark:text-amber-400",
+			confirmVariant: "primary" as const
+		}
+	};
+
+	const config = $derived(variantConfig[variant]);
+
+	function handleCancel() {
+		open = false;
+		oncancel?.();
+	}
+
+	async function handleConfirm() {
+		try {
+			await onconfirm?.();
+			open = false;
+		} catch (error) {
+			// Don't close on error - let the caller handle it
+			console.error('Confirm action failed:', error);
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === "Escape") {
+			handleCancel();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		// Only close if clicking the backdrop itself, not the dialog
+		if (event.target === event.currentTarget) {
+			handleCancel();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<!-- Backdrop with glass effect -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center p-4"
+		onclick={handleBackdropClick}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="confirm-dialog-title"
+		transition:fade={{ duration: 150 }}
+	>
+		<!-- Dark overlay with blur -->
+		<div
+			class="absolute inset-0 bg-black/50 dark:bg-black/60 backdrop-blur-sm"
+			aria-hidden="true"
+		></div>
+
+		<!-- Dialog card -->
+		<div
+			class={cn(
+				"relative z-10 w-full max-w-md",
+				"bg-white/80 dark:bg-slate-900/80",
+				"backdrop-blur-xl",
+				"border border-white/40 dark:border-slate-700/40",
+				"rounded-2xl shadow-2xl",
+				"overflow-hidden"
+			)}
+			transition:scale={{ duration: 150, start: 0.95 }}
+		>
+			<!-- Header with icon -->
+			<div class="px-6 pt-6 pb-4 flex items-start gap-4">
+				<div class={cn(
+					"flex-shrink-0 p-3 rounded-full",
+					variant === "danger" && "bg-red-100 dark:bg-red-900/30",
+					variant === "warning" && "bg-amber-100 dark:bg-amber-900/30",
+					variant === "default" && "bg-accent/10 dark:bg-accent/20"
+				)}>
+					<svelte:component this={config.icon} class={cn("w-6 h-6", config.iconClass)} />
+				</div>
+				<div class="flex-1 min-w-0">
+					<h3
+						id="confirm-dialog-title"
+						class="text-lg font-semibold text-foreground leading-tight"
+					>
+						{title}
+					</h3>
+					{#if message && !children}
+						<p class="mt-2 text-sm text-muted-foreground leading-relaxed">
+							{message}
+						</p>
+					{/if}
+					{#if children}
+						<div class="mt-2 text-sm text-muted-foreground">
+							{@render children()}
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Footer with actions -->
+			<div class="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/30 border-t border-white/20 dark:border-slate-700/30 flex justify-end gap-3">
+				<Button
+					variant="ghost"
+					onclick={handleCancel}
+					disabled={loading}
+				>
+					{cancelLabel}
+				</Button>
+				<Button
+					variant={config.confirmVariant}
+					onclick={handleConfirm}
+					disabled={loading}
+				>
+					{#if loading}
+						<span class="inline-flex items-center gap-2">
+							<span class="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
+							Processing...
+						</span>
+					{:else}
+						{confirmLabel}
+					{/if}
+				</Button>
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,52 @@
+import type { Snippet } from "svelte";
+/**
+ * GlassConfirmDialog - A confirmation dialog with glassmorphism styling
+ *
+ * Perfect for destructive actions like delete, or any action that needs user confirmation.
+ * Features a glass-effect card over a blurred overlay.
+ *
+ * @example Basic confirmation
+ * ```svelte
+ * <GlassConfirmDialog
+ *   bind:open={showDeleteDialog}
+ *   title="Delete Post"
+ *   message="Are you sure you want to delete this post? This cannot be undone."
+ *   confirmLabel="Delete"
+ *   variant="danger"
+ *   onconfirm={handleDelete}
+ * />
+ * ```
+ *
+ * @example Custom content
+ * ```svelte
+ * <GlassConfirmDialog bind:open={showDialog} title="Confirm Changes" onconfirm={save}>
+ *   <p>You have unsaved changes. Would you like to save them?</p>
+ * </GlassConfirmDialog>
+ * ```
+ */
+type DialogVariant = "default" | "danger" | "warning";
+interface Props {
+    /** Whether the dialog is open (bindable) */
+    open?: boolean;
+    /** Dialog title */
+    title: string;
+    /** Dialog message (if not using children) */
+    message?: string;
+    /** Confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Dialog variant (affects styling and icon) */
+    variant?: DialogVariant;
+    /** Whether the confirm action is loading */
+    loading?: boolean;
+    /** Called when user confirms */
+    onconfirm?: () => void | Promise<void>;
+    /** Called when user cancels or closes */
+    oncancel?: () => void;
+    /** Custom content (overrides message) */
+    children?: Snippet;
+}
+declare const GlassConfirmDialog: import("svelte").Component<Props, {}, "open">;
+type GlassConfirmDialog = ReturnType<typeof GlassConfirmDialog>;
+export default GlassConfirmDialog;