@autumnsgrove/groveengine 0.6.2 → 0.6.3

package/dist/ui/components/gallery/ImageGallery.svelte

@@ -12,12 +12,12 @@
 	 *   { url: 'https://...', alt: 'Description', caption: 'Photo caption' }
 	 * ]} />
 	 */
-	let { images = [] } = $props();
+	let { images = /** @type {Array<{url: string, alt: string, caption?: string}>} */ ([]) } = $props();
 
 	let currentIndex = $state(0);
 	let touchStartX = $state(0);
 	let touchEndX = $state(0);
-	let galleryElement = $state();
+	let galleryElement = $state(/** @type {HTMLDivElement | undefined} */ (undefined));
 
 	// Lightbox state
 	let lightboxOpen = $state(false);
@@ -77,7 +77,7 @@
 		}, NAVIGATION_COOLDOWN_MS);
 	}
 
-	function goToIndex(index) {
+	function goToIndex(/** @type {number} */ index) {
 		if (isNavigating || index < 0 || index >= images.length || index === currentIndex) return;
 
 		isNavigating = true;
@@ -102,7 +102,7 @@
 	}
 
 	// Keyboard navigation
-	function handleKeydown(event) {
+	function handleKeydown(/** @type {KeyboardEvent} */ event) {
 		// Handle Escape to close lightbox
 		if (event.key === 'Escape' && lightboxOpen) {
 			closeLightbox();
@@ -117,11 +117,11 @@
 	}
 
 	// Touch/swipe support
-	function handleTouchStart(event) {
+	function handleTouchStart(/** @type {TouchEvent} */ event) {
 		touchStartX = event.touches[0].clientX;
 	}
 
-	function handleTouchMove(event) {
+	function handleTouchMove(/** @type {TouchEvent} */ event) {
 		touchEndX = event.touches[0].clientX;
 	}
 
@@ -160,6 +160,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if images && images.length > 0}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
 		class="gallery-container"
 		bind:this={galleryElement}
@@ -262,12 +263,14 @@
 
 	<!-- Lightbox modal -->
 	{#if lightboxOpen}
+		<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events a11y_interactive_supports_focus -->
 		<div
 			class="lightbox-backdrop"
-			onclick={(e) => e.target === e.currentTarget && closeLightbox()}
+			onclick={(/** @type {MouseEvent} */ e) => e.target === e.currentTarget && closeLightbox()}
 			role="dialog"
 			aria-modal="true"
 			aria-label="Image viewer"
+			tabindex="-1"
 		>
 			<button class="lightbox-close" onclick={closeLightbox} aria-label="Close">
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -276,7 +279,8 @@
 				</svg>
 			</button>
 
-			<div class="lightbox-content" onclick={(e) => e.target === e.currentTarget && closeLightbox()}>
+			<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+			<div class="lightbox-content" onclick={(/** @type {MouseEvent} */ e) => e.target === e.currentTarget && closeLightbox()}>
 				<ZoomableImage
 					src={currentImage.url}
 					alt={currentImage.alt || `Image ${currentIndex + 1}`}

package/dist/ui/components/gallery/ImageGallery.svelte.d.ts

@@ -4,8 +4,8 @@ type ImageGallery = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ImageGallery: import("svelte").Component<{
-    images?: any[];
+    images?: any;
 }, {}, "">;
 type $$ComponentProps = {
-    images?: any[];
+    images?: any;
 };

package/dist/ui/components/gallery/Lightbox.svelte

@@ -8,13 +8,13 @@
 	 */
 	let { src = '', alt = '', caption = '', isOpen = false, onClose = () => {} } = $props();
 
-	function handleKeydown(event) {
+	function handleKeydown(/** @type {KeyboardEvent} */ event) {
 		if (event.key === 'Escape') {
 			onClose();
 		}
 	}
 
-	function handleBackdropClick(event) {
+	function handleBackdropClick(/** @type {MouseEvent} */ event) {
 		if (event.target === event.currentTarget) {
 			onClose();
 		}
@@ -24,12 +24,14 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if isOpen}
+	<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events a11y_interactive_supports_focus -->
 	<div
 		class="lightbox-backdrop"
 		onclick={handleBackdropClick}
 		role="dialog"
 		aria-modal="true"
 		aria-label="Image viewer"
+		tabindex="-1"
 	>
 		<button class="close-button" onclick={onClose} aria-label="Close">
 			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -37,6 +39,7 @@
 				<line x1="6" y1="6" x2="18" y2="18"></line>
 			</svg>
 		</button>
+		<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
 		<div class="lightbox-content" onclick={handleBackdropClick}>
 			<ZoomableImage {src} {alt} isActive={isOpen} class="lightbox-image" />
 		</div>

package/dist/ui/components/gallery/ZoomableImage.svelte

@@ -56,7 +56,7 @@
 	}
 
 	// Mouse event handlers for drag/pan
-	function handleMouseDown(event) {
+	function handleMouseDown(/** @type {MouseEvent} */ event) {
 		if (zoomLevel === 0) return;
 
 		isDragging = true;
@@ -68,7 +68,7 @@
 		event.preventDefault();
 	}
 
-	function handleMouseMove(event) {
+	function handleMouseMove(/** @type {MouseEvent} */ event) {
 		if (!isDragging) return;
 
 		const deltaX = event.clientX - dragStartX;
@@ -84,7 +84,7 @@
 	}
 
 	// Touch event handlers for drag/pan on mobile
-	function handleTouchStart(event) {
+	function handleTouchStart(/** @type {TouchEvent} */ event) {
 		if (zoomLevel === 0) return;
 
 		// Only handle single touch for panning
@@ -99,7 +99,7 @@
 		}
 	}
 
-	function handleTouchMove(event) {
+	function handleTouchMove(/** @type {TouchEvent} */ event) {
 		if (!isDragging || event.touches.length !== 1) return;
 
 		const deltaX = event.touches[0].clientX - dragStartX;
@@ -116,7 +116,7 @@
 	}
 
 	// Click handler that distinguishes between click and drag
-	function handleClick(event) {
+	function handleClick(/** @type {MouseEvent} */ event) {
 		// If we dragged more than 5px, don't treat as click
 		if (totalDragDistance > 5) {
 			totalDragDistance = 0;
@@ -128,6 +128,7 @@
 
 <svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp} />
 
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events a11y_no_noninteractive_element_to_interactive_role -->
 <img
 	{src}
 	{alt}
@@ -140,6 +141,8 @@
 	ontouchmove={handleTouchMove}
 	ontouchend={handleTouchEnd}
 	onclick={handleClick}
+	role="button"
+	tabindex="0"
 />
 
 <style>

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

@@ -2,5 +2,5 @@ import { Accordion as AccordionPrimitive } from "bits-ui";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
+declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

package/dist/ui/components/primitives/input/input.svelte.d.ts

@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

@@ -2,5 +2,5 @@ import { Tabs as TabsPrimitive } from "bits-ui";
 import Content from "./tabs-content.svelte";
 import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
-declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "value" | "ref">;
+declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/ui/components/primitives/textarea/textarea.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLTextareaAttributes } from "svelte/elements";
 import type { WithElementRef } from "bits-ui";
 type Props = WithElementRef<HTMLTextareaAttributes>;
-declare const Textarea: import("svelte").Component<Props, {}, "value" | "ref">;
+declare const Textarea: import("svelte").Component<Props, {}, "ref" | "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

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

@@ -16,6 +16,7 @@
 	 * @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)
+	 * @prop {HTMLButtonElement} [ref] - Reference to the underlying button element (bindable)
 	 *
 	 * @example
 	 * <Button variant="primary" size="lg">Save Changes</Button>
@@ -30,8 +31,10 @@
 		variant?: ButtonVariant;
 		size?: ButtonSize;
 		disabled?: boolean;
+		href?: string;
 		class?: string;
 		children?: Snippet;
+		ref?: HTMLButtonElement | null;
 	}
 
 	let {
@@ -40,6 +43,7 @@
 		disabled = false,
 		class: className,
 		children,
+		ref = $bindable(null),
 		...restProps
 	}: Props = $props();
 
@@ -67,6 +71,7 @@
 </script>
 
 <ShadcnButton
+	bind:ref={ref}
 	variant={shadcnVariant}
 	size={shadcnSize}
 	disabled={disabled}

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

@@ -12,6 +12,7 @@ type ButtonSize = "sm" | "md" | "lg" | "icon";
  * @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)
+ * @prop {HTMLButtonElement} [ref] - Reference to the underlying button element (bindable)
  *
  * @example
  * <Button variant="primary" size="lg">Save Changes</Button>
@@ -26,9 +27,11 @@ interface Props extends Omit<HTMLButtonAttributes, "class"> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     disabled?: boolean;
+    href?: string;
     class?: string;
     children?: Snippet;
+    ref?: HTMLButtonElement | null;
 }
-declare const Button: import("svelte").Component<Props, {}, "">;
+declare const Button: import("svelte").Component<Props, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/ui/components/ui/Input.svelte

@@ -14,6 +14,7 @@
 	 * @prop {boolean} [required=false] - Whether input is required (shows asterisk)
 	 * @prop {boolean} [disabled=false] - Whether input is disabled
 	 * @prop {string} [class] - Additional CSS classes to apply
+	 * @prop {HTMLInputElement} [ref] - Reference to the underlying input element (bindable)
 	 *
 	 * @example
 	 * <Input label="Email" type="email" bind:value={email} required />
@@ -33,6 +34,7 @@
 		required?: boolean;
 		disabled?: boolean;
 		class?: string;
+		ref?: HTMLInputElement | null;
 	}
 
 	let {
@@ -44,6 +46,7 @@
 		required = false,
 		disabled = false,
 		class: className,
+		ref = $bindable(null),
 		...restProps
 	}: Props = $props();
 
@@ -66,6 +69,7 @@
 	{/if}
 
 	<ShadcnInput
+		bind:ref={ref}
 		bind:value
 		{type}
 		{placeholder}

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

@@ -10,6 +10,7 @@ import type { HTMLInputAttributes } from "svelte/elements";
  * @prop {boolean} [required=false] - Whether input is required (shows asterisk)
  * @prop {boolean} [disabled=false] - Whether input is disabled
  * @prop {string} [class] - Additional CSS classes to apply
+ * @prop {HTMLInputElement} [ref] - Reference to the underlying input element (bindable)
  *
  * @example
  * <Input label="Email" type="email" bind:value={email} required />
@@ -29,7 +30,8 @@ interface Props extends Omit<HTMLInputAttributes, "class"> {
     required?: boolean;
     disabled?: boolean;
     class?: string;
+    ref?: HTMLInputElement | null;
 }
-declare const Input: import("svelte").Component<Props, {}, "value">;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	/**
+	 * 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).
+	 */
+
+	interface Props {
+		class?: string;
+		/** Foliage color - defaults to currentColor (inherits accent) */
+		color?: string;
+		/** Trunk color - defaults to classic bark brown */
+		trunkColor?: string;
+		/** Whether foliage and trunk should be the same color */
+		monochrome?: boolean;
+		/** Add subtle sway animation */
+		animate?: boolean;
+		/** Add breathing animation (for loading states) */
+		breathing?: boolean;
+	}
+
+	let {
+		class: className = 'w-6 h-6',
+		color,
+		trunkColor,
+		monochrome = false,
+		animate = false,
+		breathing = false
+	}: Props = $props();
+
+	// Classic bark brown from the nature palette
+	const BARK_BROWN = '#5d4037';
+
+	// Compute actual colors
+	const foliageColor = color ?? 'currentColor';
+	const actualTrunkColor = monochrome
+		? foliageColor
+		: (trunkColor ?? BARK_BROWN);
+
+	// Build animation classes (using $derived for reactivity)
+	const animationClass = $derived(breathing ? 'grove-logo-breathe' : (animate ? 'grove-logo-sway' : ''));
+</script>
+
+<svg
+	class="{className} {animationClass}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 417 512.238"
+	aria-label="Grove logo"
+>
+	<!-- Trunk -->
+	<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"/>
+</svg>
+
+<style>
+	@keyframes grove-logo-sway {
+		0%, 100% { transform: rotate(0deg); }
+		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

@@ -0,0 +1,25 @@
+/**
+ * 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).
+ */
+interface Props {
+    class?: string;
+    /** Foliage color - defaults to currentColor (inherits accent) */
+    color?: string;
+    /** Trunk color - defaults to classic bark brown */
+    trunkColor?: string;
+    /** Whether foliage and trunk should be the same color */
+    monochrome?: boolean;
+    /** Add subtle sway animation */
+    animate?: boolean;
+    /** Add breathing animation (for loading states) */
+    breathing?: boolean;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/ui/components/ui/LogoLoader.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	/**
+	 * Logo Loader Component
+	 *
+	 * A branded loading indicator using the Grove logo with breathing animation.
+	 * Use instead of Spinner for a more on-brand loading experience.
+	 *
+	 * @prop {string} [size="md"] - Size variant (sm|md|lg|xl)
+	 * @prop {string} [class] - Additional CSS classes
+	 * @prop {string} [label] - Optional loading message
+	 */
+	import Logo from './Logo.svelte';
+
+	type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';
+
+	interface Props {
+		size?: LoaderSize;
+		class?: string;
+		label?: string;
+	}
+
+	let { size = 'md', class: className = '', label }: Props = $props();
+
+	const sizeClasses: Record<LoaderSize, string> = {
+		sm: 'w-6 h-6',
+		md: 'w-10 h-10',
+		lg: 'w-16 h-16',
+		xl: 'w-24 h-24'
+	};
+</script>
+
+<div
+	class="logo-loader {className}"
+	role="status"
+	aria-label={label || 'Loading'}
+>
+	<Logo class={sizeClasses[size]} breathing monochrome />
+	{#if label}
+		<span class="loader-label">{label}</span>
+	{/if}
+	<span class="sr-only">{label || 'Loading...'}</span>
+</div>
+
+<style>
+	.logo-loader {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		color: var(--accent-color, var(--editor-accent, #8bc48b));
+	}
+
+	.loader-label {
+		font-size: 0.85rem;
+		color: var(--color-text-muted, #6a6a6a);
+		font-family: "JetBrains Mono", "Fira Code", monospace;
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';
+interface Props {
+    size?: LoaderSize;
+    class?: string;
+    label?: string;
+}
+declare const LogoLoader: import("svelte").Component<Props, {}, "">;
+type LogoLoader = ReturnType<typeof LogoLoader>;
+export default LogoLoader;

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

@@ -13,6 +13,8 @@ export { default as Skeleton } from './Skeleton.svelte';
 export { default as Spinner } from './Spinner.svelte';
 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 { 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

@@ -21,6 +21,8 @@ export { default as Skeleton } from './Skeleton.svelte';
 export { default as Spinner } from './Spinner.svelte';
 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';
 // Table sub-components (from primitives)
 export { TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption, } from '../primitives/table';
 // Toast utility

package/dist/ui/tailwind.preset.js

@@ -333,27 +333,27 @@ export default {
         // Base prose styling
         '.grove-prose': {
           color: theme('colors.bark.DEFAULT'),
-          fontSize: theme('fontSize.body')[0],
-          lineHeight: theme('fontSize.body')[1].lineHeight,
+          fontSize: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.body'))[0],
+          lineHeight: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.body'))[1].lineHeight,
           '& h1, & h2, & h3, & h4, & h5, & h6': {
             fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif',
             fontWeight: '400',
             color: theme('colors.bark.DEFAULT'),
           },
           '& h1': {
-            fontSize: theme('fontSize.display')[0],
-            lineHeight: theme('fontSize.display')[1].lineHeight,
+            fontSize: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.display'))[0],
+            lineHeight: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.display'))[1].lineHeight,
             marginBottom: '1.5rem',
           },
           '& h2': {
-            fontSize: theme('fontSize.display-sm')[0],
-            lineHeight: theme('fontSize.display-sm')[1].lineHeight,
+            fontSize: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.display-sm'))[0],
+            lineHeight: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.display-sm'))[1].lineHeight,
             marginTop: '2.5rem',
             marginBottom: '1rem',
           },
           '& h3': {
-            fontSize: theme('fontSize.heading-lg')[0],
-            lineHeight: theme('fontSize.heading-lg')[1].lineHeight,
+            fontSize: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.heading-lg'))[0],
+            lineHeight: /** @type {[string, {lineHeight: string}]} */ (theme('fontSize.heading-lg'))[1].lineHeight,
             marginTop: '2rem',
             marginBottom: '0.75rem',
           },

package/dist/utils/api.js

@@ -46,8 +46,9 @@ export async function apiRequest(url, options = {}) {
   }
 
   // Build headers - don't set Content-Type for FormData (browser sets it with boundary)
+  /** @type {Record<string, string>} */
   const headers = {
-    ...options.headers,
+    ...(/** @type {Record<string, string>} */ (options.headers || {})),
   };
 
   // Only add Content-Type if not FormData

package/dist/utils/debounce.d.ts

@@ -1,7 +1,8 @@
 /**
  * Debounce function calls
- * @param {Function} fn - Function to debounce
+ * @template {(...args: any[]) => any} T
+ * @param {T} fn - Function to debounce
  * @param {number} delay - Delay in milliseconds
- * @returns {Function} Debounced function
+ * @returns {(...args: Parameters<T>) => void} Debounced function
  */
-export function debounce(fn: Function, delay?: number): Function;
+export function debounce<T extends (...args: any[]) => any>(fn: T, delay?: number): (...args: Parameters<T>) => void;

package/dist/utils/debounce.js

@@ -1,14 +1,18 @@
 /**
  * Debounce function calls
- * @param {Function} fn - Function to debounce
+ * @template {(...args: any[]) => any} T
+ * @param {T} fn - Function to debounce
  * @param {number} delay - Delay in milliseconds
- * @returns {Function} Debounced function
+ * @returns {(...args: Parameters<T>) => void} Debounced function
  */
 export function debounce(fn, delay = 300) {
-	let timeoutId;
+	/** @type {ReturnType<typeof setTimeout> | null} */
+	let timeoutId = null;
 
-	return function (...args) {
-		clearTimeout(timeoutId);
-		timeoutId = setTimeout(() => fn.apply(this, args), delay);
+	return (/** @type {Parameters<T>} */ ...args) => {
+		if (timeoutId !== null) {
+			clearTimeout(timeoutId);
+		}
+		timeoutId = setTimeout(() => fn(...args), delay);
 	};
 }