windmill-components 1.623.1 → 1.642.0

package/package/svelte5Utils.svelte.js

@@ -1,8 +1,7 @@
 // https://github.com/sveltejs/svelte/issues/14600
 import { untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';
-import {} from './utils';
-import { resource } from 'runed';
+import { resource, watch } from 'runed';
 export function withProps(component, props) {
     const ret = $state({
         component,
@@ -147,3 +146,353 @@ export class ChangeOnDeepInequality {
         return this._cached;
     }
 }
+export function useReducedMotion() {
+    if (typeof window === 'undefined')
+        return { val: false };
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    let s = $state(query.matches);
+    $effect(() => {
+        const handler = (event) => {
+            s = event.matches;
+        };
+        query.addEventListener('change', handler);
+        return () => query.removeEventListener('change', handler);
+    });
+    return {
+        get val() {
+            return s;
+        }
+    };
+}
+// Prevents flickering when data is unloaded (undefined) then reloaded quickly
+// But still becomes undefined if data is not reloaded within the timeout
+// so the user has feedback that the data is not available anymore.
+export class StaleWhileLoading {
+    _current = $state();
+    _currentTimeout;
+    constructor(getter, timeout = 400) {
+        watch(getter, (value) => {
+            if (this._currentTimeout)
+                clearTimeout(this._currentTimeout);
+            if (value === undefined) {
+                this._currentTimeout = setTimeout(() => (this._current = undefined), timeout);
+            }
+            else {
+                this._current = value;
+            }
+        });
+    }
+    get current() {
+        return this._current;
+    }
+}
+/**
+ * A Svelte 5 hook that detects when the user has scrolled to the bottom of an element
+ *
+ * @param selector - CSS selector for the element to monitor (if not provided, monitors window)
+ * @param threshold - Distance from bottom in pixels to trigger (default: 0)
+ * @returns Object with `current` getter that returns true when at bottom
+ *
+ * @example
+ * // Monitor a specific element
+ * const bottomDetector = useScrollToBottom('.my-scrollable-div', 100)
+ *
+ * // Monitor the window
+ * const windowBottomDetector = useScrollToBottom()
+ *
+ * $effect(() => {
+ *   if (bottomDetector.current) {
+ *     console.log('User scrolled to bottom!')
+ *   }
+ * })
+ */
+export function useScrollToBottom(selector, threshold = 0) {
+    if (typeof window === 'undefined')
+        return { current: false };
+    let current = $state(false);
+    $effect(() => {
+        const el = document.querySelector(selector);
+        if (!el) {
+            console.warn(`useScrollToBottom: Element with selector "${selector}" not found`);
+            return;
+        }
+        let element = el;
+        function checkIfAtBottom() {
+            const scrollTop = element.scrollTop;
+            const scrollHeight = element.scrollHeight;
+            const clientHeight = element.clientHeight;
+            current = scrollTop + clientHeight >= scrollHeight - threshold;
+        }
+        // Check immediately
+        checkIfAtBottom();
+        // Add scroll listener
+        element.addEventListener('scroll', checkIfAtBottom, { passive: true });
+        return () => {
+            element.removeEventListener('scroll', checkIfAtBottom);
+        };
+    });
+    return {
+        get current() {
+            return current;
+        }
+    };
+}
+/**
+ * A Svelte 5 hook for infinite query/pagination functionality
+ *
+ * @example
+ * const query = useInfiniteQuery({
+ *   queryFn: async (page) => fetchItems(page),
+ *   initialPageParam: 0,
+ *   getNextPageParam: (lastPage, allPages) =>
+ *     lastPage.length > 0 ? allPages.length : undefined
+ * })
+ *
+ * // Access data
+ * query.current // All pages of data
+ * query.isLoading // Initial loading state
+ * query.isFetchingNextPage // Loading next page
+ * query.hasNextPage // Whether more pages exist
+ *
+ * // Fetch next page
+ * await query.fetchNextPage()
+ */
+export function useInfiniteQuery(options) {
+    const { queryFn, initialPageParam, getNextPageParam } = options;
+    let pages = $state([]);
+    let isLoading = $state(true);
+    let isFetchingNextPage = $state(false);
+    let error = $state(undefined);
+    let nextPageParam = $state(initialPageParam);
+    let currentPromise;
+    let resetCount = 0;
+    async function fetchPage(pageParam) {
+        try {
+            const currentResetCount = resetCount;
+            const data = await queryFn(pageParam);
+            if (currentResetCount !== resetCount) {
+                // A reset occurred while we were fetching, discard this data
+                return;
+            }
+            pages = [...pages, data];
+            nextPageParam = getNextPageParam(data, pages);
+        }
+        catch (err) {
+            error = err instanceof Error ? err : new Error(String(err));
+            throw err;
+        }
+    }
+    async function fetchNextPage() {
+        if (!nextPageParam || isFetchingNextPage) {
+            return;
+        }
+        const pageToFetch = nextPageParam;
+        isFetchingNextPage = true;
+        error = undefined;
+        const promise = fetchPage(pageToFetch).finally(() => {
+            if (currentPromise === promise) {
+                isFetchingNextPage = false;
+            }
+        });
+        currentPromise = promise;
+        return promise;
+    }
+    function reset() {
+        pages = [];
+        isLoading = true;
+        isFetchingNextPage = false;
+        error = undefined;
+        nextPageParam = initialPageParam;
+        currentPromise = undefined;
+        resetCount += 1;
+        // Automatically fetch first page on reset
+        untrack(() => {
+            fetchPage(initialPageParam).finally(() => {
+                isLoading = false;
+            });
+        });
+    }
+    // Initial fetch
+    untrack(() => {
+        fetchPage(initialPageParam).finally(() => {
+            isLoading = false;
+        });
+    });
+    return {
+        get current() {
+            return pages;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get isFetchingNextPage() {
+            return isFetchingNextPage;
+        },
+        get hasNextPage() {
+            return nextPageParam !== undefined;
+        },
+        get error() {
+            return error;
+        },
+        fetchNextPage,
+        reset
+    };
+}
+export function useKeyPressed(keys, params) {
+    if (typeof window === 'undefined')
+        return Object.fromEntries(keys.map((key) => [key, false]));
+    let obj = $state(Object.fromEntries(keys.map((key) => [key, false])));
+    $effect(() => {
+        const handleKeyDown = (event) => {
+            for (const key of keys) {
+                if (event.key.toLowerCase() === key.toLowerCase()) {
+                    obj[key] = true;
+                    params?.onKeyDown?.(key, event);
+                }
+            }
+        };
+        const handleKeyUp = (event) => {
+            for (const key of keys) {
+                if (event.key.toLowerCase() === key.toLowerCase()) {
+                    obj[key] = false;
+                    params?.onKeyUp?.(key, event);
+                }
+            }
+        };
+        // Reset all keys when window loses focus or visibility changes to prevent stuck keys
+        const resetAllKeys = () => {
+            for (const key of keys)
+                obj[key] = false;
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        window.addEventListener('blur', resetAllKeys);
+        document.addEventListener('visibilitychange', resetAllKeys);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+            window.removeEventListener('blur', resetAllKeys);
+            document.removeEventListener('visibilitychange', resetAllKeys);
+        };
+    });
+    return obj;
+}
+export function useTransformedSyncedValue(source, transform, inverseTransform) {
+    let st = $state(transform(source[0]()));
+    let skipUpdate = false;
+    watch(source[0], (val) => {
+        if (skipUpdate) {
+            skipUpdate = false;
+            return;
+        }
+        st = transform(val);
+    });
+    return {
+        get val() {
+            return st;
+        },
+        set val(newVal) {
+            skipUpdate = true;
+            st = newVal;
+            source[1](inverseTransform(newVal));
+            setTimeout(() => {
+                skipUpdate = false;
+            });
+        },
+        reparse() {
+            st = transform(source[0]());
+        }
+    };
+}
+/**
+ * Maintains a local copy of a value that syncs back to the parent state in a debounced way.
+ *
+ * Useful for inputs where you want immediate local reactivity but don't want to
+ * flood the parent with updates (e.g. text fields, sliders).
+ *
+ * @param getter - Reads the canonical value from the parent
+ * @param setter - Writes a new canonical value to the parent (called debounced)
+ * @param react - A function that reads the fields to react to.
+ * @param delay - Debounce delay in ms (default: 300)
+ *
+ * @example
+ * const debounced = new DebouncedTempValue(
+ *   () => props.value,
+ *   (v) => { props.value = v },
+ *   (t) => t, // react to the value itself
+ *   300
+ * )
+ * // Use debounced.current in the template; writes are debounced to the parent.
+ */
+export class DebouncedTempValue {
+    setter;
+    delay;
+    current;
+    #timer;
+    #skipNextParentUpdate = false;
+    #skipNextCurrentUpdate = false;
+    constructor(getter, setter, react, delay = 300) {
+        this.setter = setter;
+        this.delay = delay;
+        this.current = $state(untrack(getter));
+        watch(getter, (val) => {
+            if (this.#timer !== undefined) {
+                // An in-flight local edit is pending — don't overwrite it with stale parent data
+                return;
+            }
+            if (this.#skipNextParentUpdate) {
+                // The parent just updated in response to our local edit — skip this update as it's not new data
+                this.#skipNextParentUpdate = false;
+                return;
+            }
+            this.#skipNextCurrentUpdate = true;
+            this.current = val;
+            setTimeout(() => (this.#skipNextCurrentUpdate = false), 0);
+        });
+        watch(() => react(this.current), () => {
+            if (this.#skipNextCurrentUpdate)
+                return;
+            if (this.#timer !== undefined)
+                clearTimeout(this.#timer);
+            this.#timer = setTimeout(() => {
+                this.#timer = undefined;
+                this.#skipNextParentUpdate = true;
+                this.setter(this.current);
+                setTimeout(() => (this.#skipNextParentUpdate = false), 0);
+            }, this.delay);
+        });
+    }
+    /** Flush any pending debounced write immediately. */
+    flush() {
+        if (this.#timer !== undefined) {
+            clearTimeout(this.#timer);
+            this.#timer = undefined;
+            this.setter(this.current);
+        }
+    }
+}
+export function useLocalStorageValue(key, defaultValue, typ) {
+    const serialize = (val) => typ === 'string' || typ === 'number' || typ === 'boolean' ? String(val) : JSON.stringify(val);
+    const deserialize = (val) => {
+        if (typ === 'string')
+            return val;
+        if (typ === 'number')
+            return Number(val);
+        if (typ === 'boolean')
+            return (val === 'true');
+        return JSON.parse(val);
+    };
+    if (typeof window === 'undefined')
+        return { val: defaultValue };
+    const savedValue = localStorage.getItem(key);
+    let s = $state(savedValue ? deserialize(savedValue) : defaultValue);
+    return {
+        get val() {
+            return s;
+        },
+        set val(newVal) {
+            localStorage.setItem(key, serialize(newVal));
+            s = newVal;
+        }
+    };
+}

package/package/svelte5UtilsKit.svelte.d.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+export type SearchParamsResult<S extends z.ZodType> = S extends z.ZodObject<infer Shape> ? {
+    -readonly [K in keyof Shape]: z.infer<Shape[K]>;
+} & Record<string, unknown> : z.infer<S> & Record<string, unknown>;
+/**
+ * Returns a reactive object whose properties are synced to the browser's URL search params.
+ * Reading a property returns the current value from the URL (reactive).
+ * Writing a property updates the URL via history.replaceState (no navigation).
+ *
+ * Primitive types (string / number / boolean) are serialized as plain text.
+ * Everything else is JSON-serialized.
+ */
+export declare function useSearchParams<S extends z.ZodType>(schema: S): SearchParamsResult<S>;

package/package/svelte5UtilsKit.svelte.js

@@ -0,0 +1,106 @@
+// SvelteKit-specific utilities
+// This file should only be imported in SvelteKit apps as it depends on $app/environment
+import { z } from 'zod';
+/** Serialize a value to a URL search param string. Primitives are written as-is; anything else is JSON. */
+function serializeParam(value) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number')
+        return String(value);
+    if (typeof value === 'boolean')
+        return String(value);
+    return JSON.stringify(value);
+}
+/** Parse a raw string from the URL back to a typed value guided by the zod field schema. */
+function deserializeParam(raw, fieldSchema) {
+    // Unwrap nullable / optional / default wrappers to get the inner type
+    let inner = fieldSchema;
+    while (inner instanceof z.ZodNullable ||
+        inner instanceof z.ZodOptional ||
+        inner instanceof z.ZodDefault) {
+        inner = inner._def.innerType ?? inner._def.type;
+    }
+    if (inner instanceof z.ZodNumber) {
+        const n = Number(raw);
+        return isNaN(n) ? null : n;
+    }
+    if (inner instanceof z.ZodBoolean) {
+        if (raw === 'true')
+            return true;
+        if (raw === 'false')
+            return false;
+        return null;
+    }
+    // ZodString, ZodEnum, ZodLiteral, ZodAny, or unknown → try as plain string first,
+    // fall back to JSON parse for non-string schemas
+    if (inner instanceof z.ZodString ||
+        inner instanceof z.ZodEnum ||
+        inner instanceof z.ZodLiteral) {
+        return raw;
+    }
+    // For any other type (object, array, …) try JSON
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return raw;
+    }
+}
+/**
+ * Returns a reactive object whose properties are synced to the browser's URL search params.
+ * Reading a property returns the current value from the URL (reactive).
+ * Writing a property updates the URL via history.replaceState (no navigation).
+ *
+ * Primitive types (string / number / boolean) are serialized as plain text.
+ * Everything else is JSON-serialized.
+ */
+export function useSearchParams(schema) {
+    const shape = schema.shape ?? {};
+    const keys = Object.keys(shape);
+    // Reactive snapshot of search params - one $state cell per key
+    const values = $state(Object.fromEntries(keys.map((k) => {
+        const raw = new URLSearchParams(window.location.search).get(k);
+        const parsed = raw != null ? deserializeParam(raw, shape[k]) : null;
+        return [k, parsed];
+    })));
+    function syncFromUrl() {
+        const sp = new URLSearchParams(window.location.search);
+        for (const k of keys) {
+            const raw = sp.get(k);
+            const parsed = raw != null ? deserializeParam(raw, shape[k]) : null;
+            values[k] = parsed;
+        }
+    }
+    // Keep in sync when the user navigates back/forward
+    $effect(() => {
+        window.addEventListener('popstate', syncFromUrl);
+        return () => window.removeEventListener('popstate', syncFromUrl);
+    });
+    // Build the proxy object: reads come from $state, writes go to the URL + $state
+    const proxy = {};
+    for (const key of keys) {
+        Object.defineProperty(proxy, key, {
+            get() {
+                return values[key];
+            },
+            set(v) {
+                ;
+                values[key] = v;
+                const sp = new URLSearchParams(window.location.search);
+                if (v == null) {
+                    sp.delete(key);
+                }
+                else {
+                    sp.set(key, serializeParam(v));
+                }
+                const newUrl = sp.toString()
+                    ? `${window.location.pathname}?${sp}`
+                    : window.location.pathname;
+                history.replaceState(history.state, '', newUrl);
+            },
+            enumerable: true,
+            configurable: true
+        });
+    }
+    return proxy;
+}