@autumnsgrove/groveengine 0.6.4 → 0.7.0

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;

package/dist/ui/components/ui/GlassOverlay.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../utils";
+
+	/**
+	 * GlassOverlay - A fullscreen overlay with glassmorphism effect
+	 *
+	 * Perfect for modal backdrops, loading screens, and focus overlays.
+	 * Provides a dark translucent backdrop with blur effect.
+	 *
+	 * @example Basic overlay
+	 * ```svelte
+	 * {#if showModal}
+	 *   <GlassOverlay onclick={closeModal} />
+	 * {/if}
+	 * ```
+	 *
+	 * @example Custom intensity
+	 * ```svelte
+	 * <GlassOverlay variant="light" intensity="strong" />
+	 * ```
+	 */
+
+	type OverlayVariant =
+		| "dark"      // Dark overlay (default for modals)
+		| "light"     // Light overlay
+		| "accent";   // Tinted with accent color
+
+	type BlurIntensity =
+		| "none"      // No blur
+		| "light"     // 4px blur
+		| "medium"    // 8px blur
+		| "strong";   // 12px blur
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+		variant?: OverlayVariant;
+		intensity?: BlurIntensity;
+		/** Whether clicking the overlay should be interactive (for close handlers) */
+		interactive?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "dark",
+		intensity = "light",
+		interactive = true,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	// Variant backgrounds
+	const variantClasses: Record<OverlayVariant, string> = {
+		dark: "bg-black/50 dark:bg-black/60",
+		light: "bg-white/50 dark:bg-slate-900/50",
+		accent: "bg-accent/30 dark:bg-accent/20"
+	};
+
+	// Blur intensities
+	const intensityClasses: Record<BlurIntensity, string> = {
+		none: "",
+		light: "backdrop-blur-sm",
+		medium: "backdrop-blur",
+		strong: "backdrop-blur-md"
+	};
+
+	const computedClass = $derived(
+		cn(
+			"fixed inset-0 z-50",
+			variantClasses[variant],
+			intensityClasses[intensity],
+			interactive && "cursor-pointer",
+			// Animation classes for when used with transitions
+			"data-[state=open]:animate-in data-[state=closed]:animate-out",
+			"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className
+		)
+	);
+</script>
+
+<div
+	class={computedClass}
+	role={interactive ? "button" : "presentation"}
+	tabindex={interactive ? 0 : -1}
+	aria-label={interactive ? "Close overlay" : undefined}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

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

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * GlassOverlay - A fullscreen overlay with glassmorphism effect
+ *
+ * Perfect for modal backdrops, loading screens, and focus overlays.
+ * Provides a dark translucent backdrop with blur effect.
+ *
+ * @example Basic overlay
+ * ```svelte
+ * {#if showModal}
+ *   <GlassOverlay onclick={closeModal} />
+ * {/if}
+ * ```
+ *
+ * @example Custom intensity
+ * ```svelte
+ * <GlassOverlay variant="light" intensity="strong" />
+ * ```
+ */
+type OverlayVariant = "dark" | "light" | "accent";
+type BlurIntensity = "none" | "light" | "medium" | "strong";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    variant?: OverlayVariant;
+    intensity?: BlurIntensity;
+    /** Whether clicking the overlay should be interactive (for close handlers) */
+    interactive?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const GlassOverlay: import("svelte").Component<Props, {}, "">;
+type GlassOverlay = ReturnType<typeof GlassOverlay>;
+export default GlassOverlay;

package/dist/ui/components/ui/Logo.svelte

@@ -7,8 +7,21 @@
 	 * when placed in an accent-colored context, or can be overridden.
 	 *
 	 * The trunk defaults to Grove's classic bark brown (#5d4037).
+	 *
+	 * @example Loading state (breathing animation)
+	 * ```svelte
+	 * <Logo breathing />
+	 * <Logo breathing breathingSpeed="slow" />
+	 * ```
+	 * Note: breathing is intended for single loading indicators, not lists.
 	 */
 
+	import { tweened } from 'svelte/motion';
+	import { cubicInOut } from 'svelte/easing';
+	import { browser } from '$app/environment';
+
+	type BreathingSpeed = 'slow' | 'normal' | 'fast';
+
 	interface Props {
 		class?: string;
 		/** Foliage color - defaults to currentColor (inherits accent) */
@@ -19,8 +32,10 @@
 		monochrome?: boolean;
 		/** Add subtle sway animation */
 		animate?: boolean;
-		/** Add breathing animation (for loading states) */
+		/** Add breathing animation (for loading states, not lists) */
 		breathing?: boolean;
+		/** Breathing animation speed - 'slow' (1500ms), 'normal' (800ms), 'fast' (400ms) */
+		breathingSpeed?: BreathingSpeed;
 	}
 
 	let {
@@ -29,9 +44,28 @@
 		trunkColor,
 		monochrome = false,
 		animate = false,
-		breathing = false
+		breathing = false,
+		breathingSpeed = 'normal'
 	}: Props = $props();
 
+	// Breathing speed presets (duration per half-cycle in ms)
+	const BREATHING_SPEEDS = {
+		slow: 1500,    // 3s full cycle - calm, meditative
+		normal: 800,   // 1.6s full cycle - balanced
+		fast: 400      // 0.8s full cycle - urgent
+	} as const;
+
+	// Respect user's reduced motion preference (reactive to system changes)
+	const reducedMotionQuery = browser ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+	let prefersReducedMotion = $state(reducedMotionQuery?.matches ?? false);
+
+	$effect(() => {
+		if (!reducedMotionQuery) return;
+		const handler = (e: MediaQueryListEvent) => { prefersReducedMotion = e.matches; };
+		reducedMotionQuery.addEventListener('change', handler);
+		return () => reducedMotionQuery.removeEventListener('change', handler);
+	});
+
 	// Classic bark brown from the nature palette
 	const BARK_BROWN = '#5d4037';
 
@@ -41,8 +75,85 @@
 		? foliageColor
 		: (trunkColor ?? BARK_BROWN);
 
-	// Build animation classes (using $derived for reactivity)
-	const animationClass = $derived(breathing ? 'grove-logo-breathe' : (animate ? 'grove-logo-sway' : ''));
+	// Breathing animation using tweened store (duration set dynamically in $effect)
+	const breathValue = tweened(0, { easing: cubicInOut });
+
+	// Animation loop for breathing effect
+	// Re-runs when breathing or breathingSpeed changes, ensuring reactive duration updates
+	$effect(() => {
+		const duration = BREATHING_SPEEDS[breathingSpeed];
+
+		// Disable animation if breathing is off or user prefers reduced motion
+		if (!breathing || prefersReducedMotion) {
+			// Use half the breathing duration for smoother exit transition
+			breathValue.set(0, { duration: Math.min(duration / 2, 300) });
+			return;
+		}
+
+		let cancelled = false;
+
+		async function pulse() {
+			while (!cancelled) {
+				await breathValue.set(1, { duration });
+				if (cancelled) break;
+				await breathValue.set(0, { duration });
+				if (cancelled) break;
+			}
+		}
+
+		pulse();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	// Expansion values for breathing animation (in SVG units, tied to viewBox 417×512.238)
+	// These are absolute values within the SVG coordinate system, so they scale
+	// proportionally with the logo regardless of rendered size.
+	const expansion = $derived($breathValue * 22);
+	const diagExpansion = $derived($breathValue * 16); // ~16px at 45° angles
+
+	// Individual branch transforms
+	const leftTransform = $derived(`translate(${-expansion}, 0)`);
+	const rightTransform = $derived(`translate(${expansion}, 0)`);
+	const topTransform = $derived(`translate(0, ${-expansion})`);
+	const topLeftTransform = $derived(`translate(${-diagExpansion}, ${-diagExpansion})`);
+	const topRightTransform = $derived(`translate(${diagExpansion}, ${-diagExpansion})`);
+	const bottomLeftTransform = $derived(`translate(${-diagExpansion}, ${diagExpansion})`);
+	const bottomRightTransform = $derived(`translate(${diagExpansion}, ${diagExpansion})`);
+
+	// Build animation classes (sway only, breathing uses transforms)
+	const animationClass = $derived(animate && !breathing ? 'grove-logo-sway' : '');
+
+	// Decomposed foliage paths (8 pieces) for breathing animation
+	// Original path: "M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"
+	// Decomposed by tracing path commands and isolating geometric boundaries where arms meet center.
+	// If modifying, ensure pieces align at rest (breathValue=0) to match the original silhouette.
+
+	// Center anchor - the hub where all branches connect (stays stationary)
+	const centerPath = "M126 173.468 L171.476 124.872 L171.476 173.468 L126 173.468 M245.562 124.872 L290.972 173.268 L245.562 173.268 L245.562 124.872 M126.664 243.97 L171.476 243.97 L171.476 173.468 L126 173.468 L126.664 243.97 M290.252 243.77 L245.562 243.77 L245.562 173.268 L290.972 173.268 L290.252 243.77 M171.476 243.97 L208.519 258.11 L245.562 243.77 L245.562 173.268 L171.476 173.468 L171.476 243.97";
+
+	// Left horizontal bar
+	const leftBarPath = "M0 173.468 L126 173.468 L126.664 243.97 L0 243.97 Z";
+
+	// Right horizontal bar
+	const rightBarPath = "M290.972 173.268 L417 173.268 L417 243.77 L290.252 243.77 Z";
+
+	// Top vertical bar
+	const topBarPath = "M171.476 0 L245.562 0 L245.562 124.872 L171.476 124.872 Z";
+
+	// Top-left diagonal branch (arrow shape)
+	const topLeftDiagPath = "M126.068 173.468 L36.446 88.028 L86.037 37.043 L171.476 124.872 Z";
+
+	// Top-right diagonal branch (arrow shape)
+	const topRightDiagPath = "M245.562 124.872 L331 37.243 L380.552 88.028 L290.972 173.268 Z";
+
+	// Bottom-left diagonal branch (arrow shape)
+	const bottomLeftDiagPath = "M126.664 243.97 L36.446 331.601 L86.037 381.192 L208.519 258.11 L171.476 243.97 Z";
+
+	// Bottom-right diagonal branch (arrow shape)
+	const bottomRightDiagPath = "M290.252 243.77 L380.435 331.399 L331 381.192 L208.519 258.11 L245.562 243.77 Z";
 </script>
 
 <svg
@@ -51,10 +162,53 @@
 	viewBox="0 0 417 512.238"
 	aria-label="Grove logo"
 >
-	<!-- Trunk -->
+	<!-- Trunk (always static) -->
 	<path fill={actualTrunkColor} d="M171.274 344.942h74.09v167.296h-74.09V344.942z"/>
-	<!-- Foliage -->
-	<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+
+	{#if breathing}
+		<!-- Decomposed foliage with breathing animation -->
+
+		<!-- Center anchor (stationary) -->
+		<path fill={foliageColor} d={centerPath}/>
+
+		<!-- Left horizontal bar -->
+		<g transform={leftTransform}>
+			<path fill={foliageColor} d={leftBarPath}/>
+		</g>
+
+		<!-- Right horizontal bar -->
+		<g transform={rightTransform}>
+			<path fill={foliageColor} d={rightBarPath}/>
+		</g>
+
+		<!-- Top vertical bar -->
+		<g transform={topTransform}>
+			<path fill={foliageColor} d={topBarPath}/>
+		</g>
+
+		<!-- Top-left diagonal -->
+		<g transform={topLeftTransform}>
+			<path fill={foliageColor} d={topLeftDiagPath}/>
+		</g>
+
+		<!-- Top-right diagonal -->
+		<g transform={topRightTransform}>
+			<path fill={foliageColor} d={topRightDiagPath}/>
+		</g>
+
+		<!-- Bottom-left diagonal -->
+		<g transform={bottomLeftTransform}>
+			<path fill={foliageColor} d={bottomLeftDiagPath}/>
+		</g>
+
+		<!-- Bottom-right diagonal -->
+		<g transform={bottomRightTransform}>
+			<path fill={foliageColor} d={bottomRightDiagPath}/>
+		</g>
+	{:else}
+		<!-- Original single foliage path (for non-breathing state) -->
+		<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+	{/if}
 </svg>
 
 <style>
@@ -63,24 +217,8 @@
 		50% { transform: rotate(1deg); }
 	}
 
-	@keyframes grove-logo-breathe {
-		0%, 100% {
-			transform: scale(1);
-			opacity: 0.7;
-		}
-		50% {
-			transform: scale(1.05);
-			opacity: 1;
-		}
-	}
-
 	.grove-logo-sway {
 		transform-origin: center bottom;
 		animation: grove-logo-sway 4s ease-in-out infinite;
 	}
-
-	.grove-logo-breathe {
-		transform-origin: center center;
-		animation: grove-logo-breathe 2s ease-in-out infinite;
-	}
 </style>

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

@@ -1,12 +1,4 @@
-/**
- * Grove Logo Component
- *
- * A logo that respects the user's accent color by default.
- * The foliage uses `currentColor` which inherits from --accent-color
- * when placed in an accent-colored context, or can be overridden.
- *
- * The trunk defaults to Grove's classic bark brown (#5d4037).
- */
+type BreathingSpeed = 'slow' | 'normal' | 'fast';
 interface Props {
     class?: string;
     /** Foliage color - defaults to currentColor (inherits accent) */
@@ -17,8 +9,10 @@ interface Props {
     monochrome?: boolean;
     /** Add subtle sway animation */
     animate?: boolean;
-    /** Add breathing animation (for loading states) */
+    /** Add breathing animation (for loading states, not lists) */
     breathing?: boolean;
+    /** Breathing animation speed - 'slow' (1500ms), 'normal' (800ms), 'fast' (400ms) */
+    breathingSpeed?: BreathingSpeed;
 }
 declare const Logo: import("svelte").Component<Props, {}, "">;
 type Logo = ReturnType<typeof Logo>;

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

@@ -15,6 +15,11 @@ export { default as Table } from './Table.svelte';
 export { default as CollapsibleSection } from './CollapsibleSection.svelte';
 export { default as Logo } from './Logo.svelte';
 export { default as LogoLoader } from './LogoLoader.svelte';
+export { default as Glass } from './Glass.svelte';
+export { default as GlassButton } from './GlassButton.svelte';
+export { default as GlassCard } from './GlassCard.svelte';
+export { default as GlassConfirmDialog } from './GlassConfirmDialog.svelte';
+export { default as GlassOverlay } from './GlassOverlay.svelte';
 export { TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption, } from '../primitives/table';
 export * from './toast.js';
 export declare const UI_VERSION = "0.2.0";

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

@@ -23,6 +23,12 @@ export { default as Table } from './Table.svelte';
 export { default as CollapsibleSection } from './CollapsibleSection.svelte';
 export { default as Logo } from './Logo.svelte';
 export { default as LogoLoader } from './LogoLoader.svelte';
+// Glass suite - glassmorphism components
+export { default as Glass } from './Glass.svelte';
+export { default as GlassButton } from './GlassButton.svelte';
+export { default as GlassCard } from './GlassCard.svelte';
+export { default as GlassConfirmDialog } from './GlassConfirmDialog.svelte';
+export { default as GlassOverlay } from './GlassOverlay.svelte';
 // Table sub-components (from primitives)
 export { TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption, } from '../primitives/table';
 // Toast utility