@marianmeres/stuic 1.126.0 → 2.0.0-next.2

package/dist/types.js

@@ -1 +1,249 @@
 export {};
+/**
+DO NOTE REMOVE. FOOD FOR TW COMPILER...
+
+bg-black
+bg-white
+bg-slate-50
+bg-slate-100
+bg-slate-200
+bg-slate-300
+bg-slate-400
+bg-slate-500
+bg-slate-600
+bg-slate-700
+bg-slate-800
+bg-slate-900
+bg-slate-950
+bg-gray-50
+bg-gray-100
+bg-gray-200
+bg-gray-300
+bg-gray-400
+bg-gray-500
+bg-gray-600
+bg-gray-700
+bg-gray-800
+bg-gray-900
+bg-gray-950
+bg-zinc-50
+bg-zinc-100
+bg-zinc-200
+bg-zinc-300
+bg-zinc-400
+bg-zinc-500
+bg-zinc-600
+bg-zinc-700
+bg-zinc-800
+bg-zinc-900
+bg-zinc-950
+bg-neutral-50
+bg-neutral-100
+bg-neutral-200
+bg-neutral-300
+bg-neutral-400
+bg-neutral-500
+bg-neutral-600
+bg-neutral-700
+bg-neutral-800
+bg-neutral-900
+bg-neutral-950
+bg-stone-50
+bg-stone-100
+bg-stone-200
+bg-stone-300
+bg-stone-400
+bg-stone-500
+bg-stone-600
+bg-stone-700
+bg-stone-800
+bg-stone-900
+bg-stone-950
+bg-red-50
+bg-red-100
+bg-red-200
+bg-red-300
+bg-red-400
+bg-red-500
+bg-red-600
+bg-red-700
+bg-red-800
+bg-red-900
+bg-red-950
+bg-orange-50
+bg-orange-100
+bg-orange-200
+bg-orange-300
+bg-orange-400
+bg-orange-500
+bg-orange-600
+bg-orange-700
+bg-orange-800
+bg-orange-900
+bg-orange-950
+bg-amber-50
+bg-amber-100
+bg-amber-200
+bg-amber-300
+bg-amber-400
+bg-amber-500
+bg-amber-600
+bg-amber-700
+bg-amber-800
+bg-amber-900
+bg-amber-950
+bg-yellow-50
+bg-yellow-100
+bg-yellow-200
+bg-yellow-300
+bg-yellow-400
+bg-yellow-500
+bg-yellow-600
+bg-yellow-700
+bg-yellow-800
+bg-yellow-900
+bg-yellow-950
+bg-lime-50
+bg-lime-100
+bg-lime-200
+bg-lime-300
+bg-lime-400
+bg-lime-500
+bg-lime-600
+bg-lime-700
+bg-lime-800
+bg-lime-900
+bg-lime-950
+bg-green-50
+bg-green-100
+bg-green-200
+bg-green-300
+bg-green-400
+bg-green-500
+bg-green-600
+bg-green-700
+bg-green-800
+bg-green-900
+bg-green-950
+bg-emerald-50
+bg-emerald-100
+bg-emerald-200
+bg-emerald-300
+bg-emerald-400
+bg-emerald-500
+bg-emerald-600
+bg-emerald-700
+bg-emerald-800
+bg-emerald-900
+bg-emerald-950
+bg-teal-50
+bg-teal-100
+bg-teal-200
+bg-teal-300
+bg-teal-400
+bg-teal-500
+bg-teal-600
+bg-teal-700
+bg-teal-800
+bg-teal-900
+bg-teal-950
+bg-cyan-50
+bg-cyan-100
+bg-cyan-200
+bg-cyan-300
+bg-cyan-400
+bg-cyan-500
+bg-cyan-600
+bg-cyan-700
+bg-cyan-800
+bg-cyan-900
+bg-cyan-950
+bg-sky-50
+bg-sky-100
+bg-sky-200
+bg-sky-300
+bg-sky-400
+bg-sky-500
+bg-sky-600
+bg-sky-700
+bg-sky-800
+bg-sky-900
+bg-sky-950
+bg-blue-50
+bg-blue-100
+bg-blue-200
+bg-blue-300
+bg-blue-400
+bg-blue-500
+bg-blue-600
+bg-blue-700
+bg-blue-800
+bg-blue-900
+bg-blue-950
+bg-indigo-50
+bg-indigo-100
+bg-indigo-200
+bg-indigo-300
+bg-indigo-400
+bg-indigo-500
+bg-indigo-600
+bg-indigo-700
+bg-indigo-800
+bg-indigo-900
+bg-indigo-950
+bg-violet-50
+bg-violet-100
+bg-violet-200
+bg-violet-300
+bg-violet-400
+bg-violet-500
+bg-violet-600
+bg-violet-700
+bg-violet-800
+bg-violet-900
+bg-violet-950
+bg-purple-50
+bg-purple-100
+bg-purple-200
+bg-purple-300
+bg-purple-400
+bg-purple-500
+bg-purple-600
+bg-purple-700
+bg-purple-800
+bg-purple-900
+bg-purple-950
+bg-fuchsia-50
+bg-fuchsia-100
+bg-fuchsia-200
+bg-fuchsia-300
+bg-fuchsia-400
+bg-fuchsia-500
+bg-fuchsia-600
+bg-fuchsia-700
+bg-fuchsia-800
+bg-fuchsia-900
+bg-fuchsia-950
+bg-pink-50
+bg-pink-100
+bg-pink-200
+bg-pink-300
+bg-pink-400
+bg-pink-500
+bg-pink-600
+bg-pink-700
+bg-pink-800
+bg-pink-900
+bg-pink-950
+bg-rose-50
+bg-rose-100
+bg-rose-200
+bg-rose-300
+bg-rose-400
+bg-rose-500
+bg-rose-600
+bg-rose-700
+bg-rose-800
+bg-rose-900
+bg-rose-950
+ */

package/dist/utils/breakpoint.svelte.d.ts

@@ -0,0 +1,19 @@
+interface BreakpointValue {
+    current: null | string;
+    sm: boolean;
+    md: boolean;
+    lg: boolean;
+    xl: boolean;
+    "2xl": boolean;
+}
+export declare class Breakpoint {
+    #private;
+    get current(): string | null;
+    get sm(): boolean;
+    get md(): boolean;
+    get lg(): boolean;
+    get xl(): boolean;
+    get ["2xl"](): boolean;
+    get dump(): BreakpointValue;
+}
+export {};

package/dist/utils/breakpoint.svelte.js

@@ -0,0 +1,42 @@
+import { createClog } from "@marianmeres/clog";
+import { innerWidth } from "svelte/reactivity/window";
+const clog = createClog("breakpoint").debug;
+// https://tailwindcss.com/docs/responsive-design
+const _breakpoints = [
+    ["sm", 640],
+    ["md", 768],
+    ["lg", 1024],
+    ["xl", 1280],
+    ["2xl", 1536],
+];
+export class Breakpoint {
+    #bp = $derived.by(() => {
+        const w = innerWidth.current || 0;
+        return _breakpoints.reduce((m, [k, v]) => {
+            const flag = w && w >= v;
+            m = { ...m, [k]: flag, current: flag ? k : m.current };
+            return m;
+        }, { current: null, sm: false, md: false, lg: false, xl: false, "2xl": false });
+    });
+    get current() {
+        return this.#bp.current;
+    }
+    get sm() {
+        return this.#bp.sm;
+    }
+    get md() {
+        return this.#bp.md;
+    }
+    get lg() {
+        return this.#bp.lg;
+    }
+    get xl() {
+        return this.#bp.xl;
+    }
+    get ["2xl"]() {
+        return this.#bp["2xl"];
+    }
+    get dump() {
+        return this.#bp;
+    }
+}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A simple debounce function that delays invoking the provided function
+ * until after a specified wait time has elapsed since the last time it was invoked.
+ *
+ * Example:
+ *
+ * ```js
+ * const search = (query: string) => { console.log(`Searching for: ${query}`); };
+ * const debouncedSearch = debounce(search, 300);
+ * input.addEventListener('input', (e) => debouncedSearch(e.target.value));
+ * ```
+ */
+export declare function debounce<T extends (...args: any[]) => any>(fn: T, wait: number): (...args: Parameters<T>) => void;

package/dist/utils/debounce.js

@@ -0,0 +1,22 @@
+/**
+ * A simple debounce function that delays invoking the provided function
+ * until after a specified wait time has elapsed since the last time it was invoked.
+ *
+ * Example:
+ *
+ * ```js
+ * const search = (query: string) => { console.log(`Searching for: ${query}`); };
+ * const debouncedSearch = debounce(search, 300);
+ * input.addEventListener('input', (e) => debouncedSearch(e.target.value));
+ * ```
+ */
+export function debounce(fn, wait) {
+    let timeout = null;
+    return function (...args) {
+        // @ts-ignore
+        const context = this;
+        if (timeout !== null)
+            clearTimeout(timeout);
+        timeout = setTimeout(() => fn.apply(context, args), wait);
+    };
+}

package/dist/utils/device-pointer.svelte.d.ts

@@ -0,0 +1,11 @@
+export declare class DevicePointer {
+    #private;
+    get isNone(): boolean;
+    get isCoarse(): boolean;
+    get isFine(): boolean;
+    get dump(): {
+        isNone: boolean;
+        isCoarse: boolean;
+        isFine: boolean;
+    };
+}

package/dist/utils/device-pointer.svelte.js

@@ -0,0 +1,26 @@
+import { MediaQuery } from "svelte/reactivity";
+export class DevicePointer {
+    /** none - The primary input mechanism does not include a pointing device. */
+    #isNone = new MediaQuery("any-pointer: none");
+    /** coarse - The primary input mechanism includes a pointing device of limited accuracy,
+     * such as a finger on a touchscreen. */
+    #isCoarse = new MediaQuery("any-pointer: coarse");
+    /** fine - The primary input mechanism includes an accurate pointing device, such as a mouse. */
+    #isFine = new MediaQuery("any-pointer: fine");
+    get isNone() {
+        return this.#isNone.current;
+    }
+    get isCoarse() {
+        return this.#isCoarse.current;
+    }
+    get isFine() {
+        return this.#isFine.current;
+    }
+    get dump() {
+        return {
+            isNone: this.isNone,
+            isCoarse: this.isCoarse,
+            isFine: this.isFine,
+        };
+    }
+}

package/dist/utils/event-modifiers.d.ts

@@ -0,0 +1,4 @@
+export declare function once(fn: (e: Event) => any): (e: Event) => void;
+export declare function preventDefault(fn?: (e: Event) => any): (e: Event) => void;
+export declare function stopPropagation(fn?: (e: Event) => any): (e: Event) => void;
+export declare function stopImmediatePropagation(fn?: (e: Event) => any): (e: Event) => void;

package/dist/utils/event-modifiers.js

@@ -0,0 +1,29 @@
+export function once(fn) {
+    return function (e) {
+        // @ts-ignore
+        if (fn)
+            fn.call(this, e);
+        fn = null;
+    };
+}
+export function preventDefault(fn) {
+    return function (e) {
+        e.preventDefault();
+        // @ts-ignore
+        fn?.call(this, e);
+    };
+}
+export function stopPropagation(fn) {
+    return function (e) {
+        e.stopPropagation();
+        // @ts-ignore
+        fn?.call(this, e);
+    };
+}
+export function stopImmediatePropagation(fn) {
+    return function (e) {
+        e.stopImmediatePropagation();
+        // @ts-ignore
+        fn?.call(this, e);
+    };
+}

package/dist/utils/get-id.d.ts

@@ -1 +1 @@
-export declare const getId: (prefix?: string) => string;
+export declare function getId(prefix?: string): string;

package/dist/utils/get-id.js

@@ -1,2 +1,4 @@
 let _id = 0;
-export const getId = (prefix = 'id-') => `${prefix}${++_id}`;
+export function getId(prefix = "id-") {
+    return `${prefix}${++_id}`;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,21 @@
+export * from "./breakpoint.svelte.js";
+export * from "./debounce.js";
+export * from "./device-pointer.svelte.js";
+export * from "./event-modifiers.js";
+export * from "./get-id.js";
+export * from "./is-browser.js";
+export * from "./is-mac.js";
+export * from "./maybe-json-parse.js";
+export * from "./maybe-json-stringify.js";
+export * from "./omit-pick.js";
+export * from "./paint.js";
+export * from "./persistent-state.svelte.js";
+export * from "./prefers-reduced-motion.svelte.js";
+export * from "./qsa.js";
+export * from "./sleep.js";
+export * from "./storage-abstraction.js";
+export * from "./str-hash.js";
+export * from "./throttle.js";
+export * from "./tr.js";
+export * from "./tw-merge.js";
+export * from "./ucfirst.js";

package/dist/utils/index.js

@@ -0,0 +1,21 @@
+export * from "./breakpoint.svelte.js";
+export * from "./debounce.js";
+export * from "./device-pointer.svelte.js";
+export * from "./event-modifiers.js";
+export * from "./get-id.js";
+export * from "./is-browser.js";
+export * from "./is-mac.js";
+export * from "./maybe-json-parse.js";
+export * from "./maybe-json-stringify.js";
+export * from "./omit-pick.js";
+export * from "./paint.js";
+export * from "./persistent-state.svelte.js";
+export * from "./prefers-reduced-motion.svelte.js";
+export * from "./qsa.js";
+export * from "./sleep.js";
+export * from "./storage-abstraction.js";
+export * from "./str-hash.js";
+export * from "./throttle.js";
+export * from "./tr.js";
+export * from "./tw-merge.js";
+export * from "./ucfirst.js";

package/dist/utils/is-browser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/dist/utils/is-browser.js

@@ -0,0 +1,5 @@
+export function isBrowser() {
+    return (typeof window !== "undefined" &&
+        typeof document !== "undefined" &&
+        globalThis === window);
+}

package/dist/utils/is-mac.d.ts

@@ -0,0 +1 @@
+export declare function isMac(): Promise<boolean>;

package/dist/utils/is-mac.js

@@ -0,0 +1,11 @@
+export async function isMac() {
+    const rx = /mac/i;
+    // modern
+    const nav = navigator;
+    if (nav.userAgentData) {
+        const uad = await nav.userAgentData.getHighEntropyValues(["platform"]);
+        return rx.test(uad.platform);
+    }
+    // old fallback
+    return rx.test(navigator.platform) || rx.test(navigator.userAgent);
+}

package/dist/utils/maybe-json-parse.d.ts

@@ -0,0 +1 @@
+export declare function maybeJsonParse(val: any, strict?: boolean): any;

package/dist/utils/maybe-json-parse.js

@@ -0,0 +1,12 @@
+export function maybeJsonParse(val, strict = false) {
+    if (typeof val === "string") {
+        try {
+            val = JSON.parse(val);
+        }
+        catch (e) {
+            if (strict)
+                throw e;
+        }
+    }
+    return val;
+}

package/dist/utils/maybe-json-stringify.d.ts

@@ -0,0 +1 @@
+export declare function maybeJsonStringify(val: any, prettyIndent?: number | string): string | null | number | boolean | undefined;

package/dist/utils/maybe-json-stringify.js

@@ -0,0 +1,11 @@
+export function maybeJsonStringify(val, prettyIndent = "\t") {
+    // do not stringify primitives
+    if (typeof val === "string" ||
+        typeof val === "boolean" ||
+        typeof val === "number" ||
+        typeof val === "undefined" ||
+        val === null) {
+        return val;
+    }
+    return JSON.stringify(val, null, prettyIndent);
+}

package/dist/utils/move-array-item.d.ts

@@ -0,0 +1,4 @@
+/**
+ *
+ */
+export declare function moveArrayItem(array: any[], fromIndex: number, toIndex: number): any[];

package/dist/utils/move-array-item.js

@@ -0,0 +1,20 @@
+/**
+ *
+ */
+export function moveArrayItem(array, fromIndex, toIndex) {
+    if (fromIndex < 0 || fromIndex >= array.length) {
+        throw new Error("Invalid fromIndex");
+    }
+    if (toIndex < 0 || toIndex >= array.length) {
+        throw new Error("Invalid toIndex");
+    }
+    const newArray = [...array];
+    // always return clone
+    if (fromIndex === toIndex)
+        return newArray;
+    // Remove the item from its original position
+    const [removedItem] = newArray.splice(fromIndex, 1);
+    // Insert the item at the new position
+    newArray.splice(toIndex, 0, removedItem);
+    return newArray;
+}

package/dist/utils/omit-pick.d.ts

@@ -1,6 +1,6 @@
-export declare const omit: (obj: any, keys: string | string[]) => {
+export declare function omit(obj: any, keys: string | string[]): {
     [k: string]: unknown;
 };
-export declare const pick: (obj: any, keys: string | string[]) => {
+export declare function pick(obj: any, keys: string | string[]): {
     [k: string]: unknown;
 };

package/dist/utils/omit-pick.js

@@ -1,10 +1,12 @@
-export const omit = (obj, keys) => {
-    if (typeof keys === 'string')
+export function omit(obj, keys) {
+    if (typeof keys === "string")
         keys = [keys];
-    return Object.fromEntries(Object.entries(obj).filter(([k]) => !(keys || []).includes(k)));
-};
-export const pick = (obj, keys) => {
-    if (typeof keys === 'string')
+    const _keys = new Set(keys);
+    return Object.fromEntries(Object.entries(obj).filter(([k]) => !_keys.has(k)));
+}
+export function pick(obj, keys) {
+    if (typeof keys === "string")
         keys = [keys];
-    return Object.fromEntries(Object.entries(obj).filter(([k]) => (keys || []).includes(k)));
-};
+    const _keys = new Set(keys);
+    return Object.fromEntries(Object.entries(obj).filter(([k]) => _keys.has(k)));
+}

package/dist/utils/paint.d.ts

@@ -0,0 +1,18 @@
+/**
+ *
+ */
+export declare function waitForNextRepaint(): Promise<unknown>;
+/**
+ * For more complex timing needs, you might sometimes need to wait for two animation frames
+ * to ensure changes have been painted, especially if you're making DOM changes that affect
+ * layout...
+ *
+ * 1. The first one waits for the next frame where the browser processes the DOM update
+ * 2. The second one waits for the frame after that, where the browser has had time to apply
+ *    styles, calculate layout, and paint
+ */
+export declare function waitForTwoRepaints(): Promise<void>;
+/**
+ *
+ */
+export declare function waitForTransitionEnd(element: Element): Promise<unknown>;

package/dist/utils/paint.js

@@ -0,0 +1,32 @@
+/**
+ *
+ */
+export function waitForNextRepaint() {
+    return new Promise((resolve) => {
+        requestAnimationFrame(resolve);
+    });
+}
+/**
+ * For more complex timing needs, you might sometimes need to wait for two animation frames
+ * to ensure changes have been painted, especially if you're making DOM changes that affect
+ * layout...
+ *
+ * 1. The first one waits for the next frame where the browser processes the DOM update
+ * 2. The second one waits for the frame after that, where the browser has had time to apply
+ *    styles, calculate layout, and paint
+ */
+export async function waitForTwoRepaints() {
+    await waitForNextRepaint();
+    await waitForNextRepaint();
+}
+/**
+ *
+ */
+export function waitForTransitionEnd(element) {
+    return new Promise((resolve) => {
+        element.addEventListener("transitionend", function handler() {
+            element.removeEventListener("transitionend", handler);
+            resolve(undefined);
+        });
+    });
+}

package/dist/utils/persistent-state.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Mirroring $state to local or session storage.
+ */
+declare class PersistentState<T> {
+    #private;
+    readonly key: string;
+    readonly initialValue: T;
+    readonly type: "local" | "session";
+    constructor(key: string, initialValue: T, type?: "local" | "session");
+    get current(): T;
+    set current(val: T);
+    reset(): void;
+    remove(): void;
+}
+/**
+ *
+ */
+export declare function localStorageState<T>(key: string, initialValue: T): PersistentState<T>;
+/**
+ *
+ */
+export declare function sessionStorageState<T>(key: string, initialValue: T): PersistentState<T>;
+export {};