@autumnsgrove/groveengine 0.6.5 → 0.7.0

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;

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/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

package/dist/ui/styles/grove.css

@@ -712,4 +712,140 @@
     outline: none;
     box-shadow: inset 0 0 0 2px var(--grove-500);
   }
+
+  /* ─────────────────────────────────────────────────────────────
+     GLASSMORPHISM UTILITIES
+
+     Apply these classes to any element for glass effects.
+     Combine with Tailwind backdrop-blur-* for blur intensity.
+
+     Usage:
+       <div class="glass">...</div>
+       <div class="glass-accent backdrop-blur-md">...</div>
+     ───────────────────────────────────────────────────────────── */
+
+  /* Base glass - light translucent background */
+  .glass {
+    background-color: rgb(255 255 255 / 0.7);
+    border: 1px solid rgb(255 255 255 / 0.3);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass) {
+    background-color: rgb(30 41 59 / 0.6);
+    border-color: rgb(71 85 105 / 0.3);
+  }
+
+  /* Glass surface - higher opacity for headers/navbars */
+  .glass-surface {
+    background-color: rgb(255 255 255 / 0.95);
+    border: 1px solid rgb(255 255 255 / 0.3);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-surface) {
+    background-color: rgb(30 41 59 / 0.95);
+    border-color: rgb(71 85 105 / 0.3);
+  }
+
+  /* Glass overlay - dark backdrop for modals */
+  .glass-overlay {
+    background-color: rgb(0 0 0 / 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-overlay) {
+    background-color: rgb(0 0 0 / 0.6);
+  }
+
+  /* Glass accent - tinted with grove green (accent color) */
+  .glass-accent {
+    background-color: color-mix(in srgb, var(--grove-500) 20%, transparent);
+    border: 1px solid color-mix(in srgb, var(--grove-500) 30%, transparent);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-accent) {
+    background-color: color-mix(in srgb, var(--grove-500) 15%, transparent);
+    border-color: color-mix(in srgb, var(--grove-500) 20%, transparent);
+  }
+
+  /* Glass muted - subtle, barely visible */
+  .glass-muted {
+    background-color: rgb(255 255 255 / 0.4);
+    border: 1px solid rgb(255 255 255 / 0.2);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-muted) {
+    background-color: rgb(15 23 42 / 0.3);
+    border-color: rgb(51 65 85 / 0.2);
+  }
+
+  /* Glass tint - light background for text readability */
+  .glass-tint {
+    background-color: rgb(255 255 255 / 0.6);
+    border: 1px solid rgb(255 255 255 / 0.2);
+    backdrop-filter: blur(4px);
+  }
+
+  :is(.dark .glass-tint) {
+    background-color: rgb(15 23 42 / 0.5);
+    border-color: rgb(51 65 85 / 0.3);
+  }
+
+  /* Glass dark - dark translucent background */
+  .glass-dark {
+    background-color: rgb(15 23 42 / 0.7);
+    border: 1px solid rgb(51 65 85 / 0.3);
+    backdrop-filter: blur(4px);
+    color: white;
+  }
+
+  :is(.dark .glass-dark) {
+    background-color: rgb(2 6 23 / 0.8);
+    border-color: rgb(51 65 85 / 0.3);
+  }
+
+  /* Glass frosted - stronger effect, more opaque */
+  .glass-frosted {
+    background-color: rgb(255 255 255 / 0.85);
+    border: 1px solid rgb(255 255 255 / 0.4);
+    backdrop-filter: blur(12px);
+  }
+
+  :is(.dark .glass-frosted) {
+    background-color: rgb(30 41 59 / 0.8);
+    border-color: rgb(71 85 105 / 0.4);
+  }
+
+  /* No border variants */
+  .glass-borderless {
+    border: none;
+  }
+
+  /* Hover states for interactive glass elements */
+  .glass-hover:hover {
+    background-color: rgb(255 255 255 / 0.85);
+    border-color: rgb(255 255 255 / 0.5);
+  }
+
+  :is(.dark .glass-hover:hover) {
+    background-color: rgb(30 41 59 / 0.75);
+    border-color: rgb(71 85 105 / 0.4);
+  }
+
+  /* Reduced motion: disable blur effects for performance/accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .glass,
+    .glass-surface,
+    .glass-overlay,
+    .glass-accent,
+    .glass-muted,
+    .glass-tint,
+    .glass-dark,
+    .glass-frosted {
+      backdrop-filter: none;
+    }
+  }
 }

package/dist/utils/gutter.d.ts

@@ -5,6 +5,8 @@
  * and anchor resolution. Used by ContentWithGutter component and related
  * functionality across the site.
  */
+import type { GutterItem as MarkdownGutterItem } from "./markdown.js";
+export type GutterItem = MarkdownGutterItem;
 /** Anchor types supported by the gutter system */
 export type AnchorType = "none" | "paragraph" | "tag" | "header";
 /** Parsed anchor result */
@@ -18,14 +20,6 @@ export interface Header {
     text: string;
     level?: number;
 }
-/** Gutter item with anchor */
-export interface GutterItem {
-    anchor?: string;
-    type?: string;
-    content?: string;
-    src?: string;
-    [key: string]: unknown;
-}
 /**
  * Parse anchor string to determine anchor type and value
  * @param anchor - The anchor string from manifest

package/dist/utils/markdown.d.ts

@@ -54,6 +54,7 @@ export interface GutterItem extends GutterItemBase {
     content?: string;
     src?: string;
     images?: GalleryImage[];
+    [key: string]: unknown;
 }
 /** Gutter manifest structure */
 export interface GutterManifest {