@marianmeres/stuic 1.125.0 → 2.0.0-next.2

package/dist/utils/persistent-state.svelte.js

@@ -0,0 +1,48 @@
+import { localStorageValue, sessionStorageValue } from "./storage-abstraction.js";
+/**
+ * Mirroring $state to local or session storage.
+ */
+class PersistentState {
+    key;
+    initialValue;
+    type;
+    #current = $state();
+    constructor(key, initialValue, type = "session") {
+        this.key = key;
+        this.initialValue = initialValue;
+        this.type = type;
+        this.current = this.#stored().get() ?? this.initialValue;
+    }
+    #stored() {
+        const strg = this.type === "local" ? localStorageValue : sessionStorageValue;
+        return strg(this.key, this.initialValue);
+    }
+    #save() {
+        this.#stored().set(this.#current);
+    }
+    get current() {
+        return this.#current;
+    }
+    set current(val) {
+        this.#current = val;
+        this.#save();
+    }
+    reset() {
+        this.current = this.initialValue;
+    }
+    remove() {
+        this.#stored().remove();
+    }
+}
+/**
+ *
+ */
+export function localStorageState(key, initialValue) {
+    return new PersistentState(key, initialValue, "local");
+}
+/**
+ *
+ */
+export function sessionStorageState(key, initialValue) {
+    return new PersistentState(key, initialValue, "session");
+}

package/dist/utils/prefers-reduced-motion.svelte.d.ts

@@ -0,0 +1,2 @@
+import { MediaQuery } from "svelte/reactivity";
+export declare function prefersReducedMotion(): MediaQuery;

package/dist/utils/prefers-reduced-motion.svelte.js

@@ -0,0 +1,4 @@
+import { MediaQuery } from "svelte/reactivity";
+export function prefersReducedMotion() {
+    return new MediaQuery("(prefers-reduced-motion: reduce)");
+}

package/dist/utils/qsa.d.ts

@@ -0,0 +1 @@
+export declare function qsa(selector: string, context?: HTMLElement | Document): Element[];

package/dist/utils/qsa.js

@@ -0,0 +1,3 @@
+export function qsa(selector, context) {
+    return Array.from((context ?? document)?.querySelectorAll(selector) || []);
+}

package/dist/utils/sleep.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Delays execution for `timeout` milliseconds.
+ *
+ * @example
+ * ```ts
+ * await sleep(100);
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Usage with timer reference
+ * let ref = { id: -1 };
+ * some(() => sleep(100, ref))
+ * // ...
+ * clearTimeout(ref.id)
+ * ```
+ */
+export declare function sleep(timeout: number, 
+/**
+ * Deno.test is quite strict and reports every non-cleared timeout... so we have to
+ * be able to pass in some object ref if needed (eg when sleep is not resolved via Promise.race)
+ * to be able to do the clearing eventually.
+ *
+ * If calling directly `await sleep(x)` in a top level flow, this dance is not needed.
+ */
+__timeout_ref__?: {
+    id: any;
+}): Promise<void>;

package/dist/utils/sleep.js

@@ -0,0 +1,33 @@
+/**
+ * Delays execution for `timeout` milliseconds.
+ *
+ * @example
+ * ```ts
+ * await sleep(100);
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Usage with timer reference
+ * let ref = { id: -1 };
+ * some(() => sleep(100, ref))
+ * // ...
+ * clearTimeout(ref.id)
+ * ```
+ */
+export function sleep(timeout, 
+/**
+ * Deno.test is quite strict and reports every non-cleared timeout... so we have to
+ * be able to pass in some object ref if needed (eg when sleep is not resolved via Promise.race)
+ * to be able to do the clearing eventually.
+ *
+ * If calling directly `await sleep(x)` in a top level flow, this dance is not needed.
+ */
+__timeout_ref__ = { id: -1 }) {
+    return new Promise((resolve) => {
+        __timeout_ref__.id = setTimeout(() => {
+            clearTimeout(__timeout_ref__.id);
+            resolve(undefined);
+        }, timeout);
+    });
+}

package/dist/utils/storage-abstraction.d.ts

@@ -0,0 +1,35 @@
+export declare class MemoryStorage {
+    #private;
+    setItem(key: string, value: any): void;
+    getItem(key: string): any;
+    removeItem(key: string): void;
+    clear(): void;
+    get length(): number;
+    entries(): [any, any][];
+}
+export declare class StorageAbstraction {
+    #private;
+    constructor(storageType?: "local" | "session" | "memory", serializer?: (v: any) => string, deserializer?: (v: string) => any);
+    set(key: string, value: any): this;
+    get(key: string): any;
+    remove(key: string): boolean;
+    clear(): boolean;
+    has(key: string): boolean;
+    entries(): any;
+    get length(): number;
+}
+export declare function localStorageValue(key: string, initial: any): {
+    get(): any;
+    set(v: any): StorageAbstraction;
+    remove(): void;
+};
+export declare function sessionStorageValue(key: string, initial: any): {
+    get(): any;
+    set(v: any): StorageAbstraction;
+    remove(): void;
+};
+export declare function memoryStorageValue(key: string, initial: any): {
+    get(): any;
+    set(v: any): StorageAbstraction;
+    remove(): void;
+};

package/dist/utils/storage-abstraction.js

@@ -0,0 +1,136 @@
+import { isBrowser } from "./is-browser.js";
+export class MemoryStorage {
+    #storage = new Map();
+    setItem(key, value) {
+        this.#storage.set(key, value);
+    }
+    getItem(key) {
+        return this.#storage.get(key) ?? null;
+    }
+    removeItem(key) {
+        this.#storage.delete(key);
+    }
+    clear() {
+        this.#storage.clear();
+    }
+    get length() {
+        return this.#storage.size;
+    }
+    entries() {
+        return [...this.#storage.entries()];
+    }
+}
+export class StorageAbstraction {
+    #type;
+    #storage;
+    #serializer = JSON.stringify;
+    #deserializer = JSON.parse;
+    constructor(storageType = "local", serializer, deserializer) {
+        this.#type = `${storageType}`.toLowerCase();
+        if (!isBrowser() || this.#type === "memory") {
+            this.#storage = new MemoryStorage();
+        }
+        else if (this.#type === "local") {
+            this.#storage = localStorage;
+        }
+        else {
+            this.#storage = sessionStorage;
+        }
+        if (serializer)
+            this.#serializer = serializer;
+        if (deserializer)
+            this.#deserializer = deserializer;
+    }
+    #serialize(value) {
+        return this.#serializer(value);
+    }
+    #deserialize(value) {
+        try {
+            return this.#deserializer(value);
+        }
+        catch (e) {
+            console.error(`Unable to deserialize value "${value}". Details: ${e}`);
+            return value;
+        }
+    }
+    set(key, value) {
+        try {
+            this.#storage.setItem(key, this.#serialize(value));
+        }
+        catch (e) {
+            console.error(`Unable to set "${key}". Details: ${e}`);
+        }
+        return this;
+    }
+    get(key) {
+        try {
+            const value = this.#storage.getItem(key);
+            return this.#deserialize(value);
+        }
+        catch (e) {
+            console.error(`Unable to get "${key}". Details: ${e}`);
+        }
+    }
+    remove(key) {
+        try {
+            this.#storage.removeItem(key);
+            return true;
+        }
+        catch (e) {
+            console.error(`Unable to remove "${key}". Details: ${e}`);
+            return false;
+        }
+    }
+    clear() {
+        try {
+            this.#storage.clear();
+            return true;
+        }
+        catch (e) {
+            console.error(`Unable to clear. Details: ${e}`);
+            return false;
+        }
+    }
+    has(key) {
+        return this.#storage.getItem(key) !== null;
+    }
+    entries() {
+        if (this.#type === "memory")
+            return this.#storage.entries();
+        const out = [];
+        for (let i = 0; i < this.#storage.length; i++) {
+            const key = this.#storage.key(i);
+            const value = this.#storage.getItem(key);
+            out.push([key, value]);
+        }
+        return out;
+    }
+    get length() {
+        return this.#storage.length;
+    }
+}
+function storage_value(type, key, initial) {
+    const s = new StorageAbstraction(type);
+    if (!s.has(key))
+        s.set(key, initial);
+    return {
+        get() {
+            return s.get(key);
+        },
+        set(v) {
+            return s.set(key, v);
+        },
+        remove() {
+            s.remove(key);
+        },
+    };
+}
+export function localStorageValue(key, initial) {
+    return storage_value("local", key, initial);
+}
+export function sessionStorageValue(key, initial) {
+    return storage_value("session", key, initial);
+}
+export function memoryStorageValue(key, initial) {
+    return storage_value("memory", key, initial);
+}

package/dist/utils/str-hash.d.ts

@@ -0,0 +1,7 @@
+/**
+ * a.k.a. "djb2"
+ * It ensures a consistent, positive numerical representation.
+ * It preserves all 32 bits of information, maintaining the full collision space.
+ * The resulting values are always within the range 0 to 4,294,967,295 (2^32 - 1)
+ */
+export declare function strHash(str: string): string;

package/dist/utils/str-hash.js

@@ -0,0 +1,35 @@
+/**
+ * a.k.a. "djb2"
+ * It ensures a consistent, positive numerical representation.
+ * It preserves all 32 bits of information, maintaining the full collision space.
+ * The resulting values are always within the range 0 to 4,294,967,295 (2^32 - 1)
+ */
+export function strHash(str) {
+    /**
+     * the expression ((hash << 5) - hash) is a common optimization that equals hash * 31
+     * (since (hash * 32) - hash = hash * 31).
+     *
+     * This multiplication by 31 is used because:
+     *
+     * 31 is a prime number, which helps with distributing hash values
+     * The computation (hash << 5) - hash is typically faster than direct multiplication
+     * It creates a good avalanche effect where small changes in input create significant changes in the hash
+     *
+     * So that line hash = ((hash << 5) - hash) + char; is effectively doing:
+     * hash = (hash * 31) + char;
+     *
+     * This is a core part of the djb2 hash algorithm, creating a strong dependency between
+     * each character's contribution to the final hash value.
+     */
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i);
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    // ">>> 0" zero-fill right shift
+    // 1. it forces the value to be treated as an unsigned 32-bit integer
+    // 2. converts any negative value to its corresponding positive value in the 32-bit unsigned range
+    //    (For a negative number like -10, >>> 0 converts it to 4,294,967,286 (which is 2^32 - 10).)
+    // so, this step is just a cosmetic and reversible one...
+    return (hash >>> 0).toString(16);
+}

package/dist/utils/throttle.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/throttle.js

@@ -0,0 +1,47 @@
+"use strict";
+/**
+ * A simple throttle function that limits how often a function can be called.
+ * The function will be called at most once in the specified time period.
+ *
+ * Example:
+ *
+ * ```js
+ * const scroll = (e: Event) => { console.log('Handling scroll event'); };
+ * const throttledScroll = throttle(scroll, 300);
+ * window.addEventListener('scroll', throttledScroll);
+ * ```
+ */
+function throttle(func, limit) {
+    let lastCall = 0;
+    let timeout = null;
+    let lastArgs = null;
+    return function (...args) {
+        // @ts-ignore
+        const context = this;
+        const now = Date.now();
+        // If enough time has passed since the last call
+        if (now - lastCall >= limit) {
+            if (timeout !== null) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            lastCall = now;
+            func.apply(context, args);
+        }
+        else {
+            // Save the latest arguments
+            lastArgs = args;
+            // If there's no pending execution scheduled
+            if (timeout === null) {
+                timeout = setTimeout(() => {
+                    lastCall = Date.now();
+                    timeout = null;
+                    if (lastArgs !== null) {
+                        func.apply(context, lastArgs);
+                        lastArgs = null;
+                    }
+                }, limit - (now - lastCall));
+            }
+        }
+    };
+}

package/dist/utils/to-integer.d.ts

@@ -0,0 +1 @@
+export declare function toInteger(value: any, fallback?: number): number;

package/dist/utils/to-integer.js

@@ -0,0 +1,11 @@
+export function toInteger(value, fallback = 1) {
+    if (typeof value === "number" && !isNaN(value)) {
+        return Math.floor(value);
+    }
+    if (typeof value === "string") {
+        const parsed = parseFloat(value);
+        if (!isNaN(parsed))
+            return Math.floor(parsed);
+    }
+    return fallback;
+}

package/dist/utils/tr.d.ts

@@ -0,0 +1,5 @@
+export type MaybeLocalized = string | Record<string, string>;
+/**
+ * Conventional translate lookup on given value
+ */
+export declare function tr(val: MaybeLocalized | undefined | null, locale?: string, fallback?: string): string;

package/dist/utils/tr.js

@@ -0,0 +1,13 @@
+import { maybeJsonParse } from "./maybe-json-parse.js";
+/**
+ * Conventional translate lookup on given value
+ */
+export function tr(val, locale, fallback) {
+    if (!locale)
+        return `${val ?? fallback ?? ""}`;
+    val = maybeJsonParse(val);
+    // if string - no translation support
+    if (typeof val === "string")
+        return val;
+    return `${val?.[locale] ?? fallback ?? val ?? ""}`;
+}

package/dist/utils/tw-merge.d.ts

@@ -0,0 +1,10 @@
+import { type ClassNameValue } from "tailwind-merge";
+/**
+ * Normalizes and dedupes whitespaces
+ */
+export declare function clsClean(s: ClassNameValue): string;
+/**
+ * twMerge does not seem to handle "\r", "\n" and/or "\t" within the input strings correctly,
+ * so we need to do the cleanup ourselves
+ */
+export declare function twMerge(...args: ClassNameValue[]): string;

package/dist/utils/tw-merge.js

@@ -0,0 +1,16 @@
+import { twMerge as _twMerge } from "tailwind-merge";
+/**
+ * Normalizes and dedupes whitespaces
+ */
+export function clsClean(s) {
+    if (Array.isArray(s))
+        s = s.filter(Boolean).join(" ");
+    return `${s || ""}`.replace(/\s+/g, " ").trim();
+}
+/**
+ * twMerge does not seem to handle "\r", "\n" and/or "\t" within the input strings correctly,
+ * so we need to do the cleanup ourselves
+ */
+export function twMerge(...args) {
+    return _twMerge(...args.map(clsClean));
+}

package/dist/utils/ucfirst.d.ts

@@ -0,0 +1 @@
+export declare function ucfirst(s: string): string;

package/dist/utils/ucfirst.js

@@ -0,0 +1,6 @@
+export function ucfirst(s) {
+    s = `${s}`;
+    if (!s.length)
+        return s;
+    return s[0].toUpperCase() + (s.slice(1) || "");
+}

package/package.json

@@ -1,74 +1,67 @@
 {
-	"name": "@marianmeres/stuic",
-	"version": "1.125.0",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package && node ./scripts/date.js",
-		"build:watch": "fswatch -o src | xargs -n1 -I{} npm run build",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check .",
-		"format": "prettier --write .",
-		"prettier": "npm run format",
-		"release:patch": "release -v patch",
-		"release": "release -v minor",
-		"test": "vitest"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^4.0.0 || ^5.0.0-next.1"
-	},
-	"devDependencies": {
-		"@marianmeres/parse-boolean": "^1.1.7",
-		"@marianmeres/random-human-readable": "^1.6.1",
-		"@marianmeres/release": "^1.1.2",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.27.4",
-		"@sveltejs/package": "^2.0.0",
-		"@tailwindcss/forms": "^0.5.7",
-		"@types/node": "^20.11.0",
-		"autoprefixer": "^10.4.16",
-		"clsx": "^2.0.0",
-		"nodemon": "^3.0.2",
-		"postcss": "^8.4.32",
-		"prettier": "^3.0.0",
-		"prettier-plugin-svelte": "^3.0.0",
-		"publint": "^0.1.9",
-		"sass": "^1.69.5",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
-		"tailwindcss": "^3.3.6",
-		"ts-node": "^10.9.2",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^1.1.3"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"dependencies": {
-		"@marianmeres/clog": "^1.0.1",
-		"@marianmeres/icons-fns": "^4.0.4",
-		"@marianmeres/store": "^1.5.0",
-		"@marianmeres/switch-store": "^1.3.1",
-		"@marianmeres/ticker": "^1.5.0",
-		"dset": "^3.1.3",
-		"esm-env": "^1.0.0",
-		"klona": "^2.0.6",
-		"tailwind-merge": "^2.1.0"
-	}
-}
+  "name": "@marianmeres/stuic",
+  "version": "2.0.0-next.2",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@marianmeres/icons-fns": "^4.3.1",
+    "@marianmeres/random-human-readable": "^1.6.1",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/cli": "^4.1.8",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.8",
+    "dotenv": "^16.5.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.12",
+    "svelte": "^5.33.10",
+    "svelte-check": "^4.2.1",
+    "tailwindcss": "^4.1.8",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
+  },
+  "dependencies": {
+    "@marianmeres/clog": "^2.2.3",
+    "@marianmeres/item-collection": "^1.2.14",
+    "@marianmeres/parse-boolean": "^1.1.7",
+    "@marianmeres/ticker": "^1.15.0",
+    "esm-env": "^1.2.2",
+    "runed": "^0.23.4",
+    "tailwind-merge": "^3.3.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "package": "npm run prepack",
+    "package:watch": "svelte-kit sync && svelte-package --watch && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "test": "vitest --dir src/"
+  }
+}

package/dist/actions/autogrow.d.ts

@@ -1,8 +0,0 @@
-export declare function increaseHeightToScrollHeight(el: HTMLElement, max?: number, min?: number): void;
-export declare function autogrow(el: HTMLTextAreaElement, options?: Partial<{
-    max: number;
-    min: number;
-    allowed: boolean;
-}> | null): {
-    destroy: () => void;
-} | undefined;

package/dist/actions/autogrow.js

@@ -1,22 +0,0 @@
-// actual worker
-export function increaseHeightToScrollHeight(el, max = 0, min = 0) {
-    //
-    let h = max ? Math.min(max, el.scrollHeight) : el.scrollHeight;
-    h = Math.max(min, h);
-    // only increase size
-    if (el.getBoundingClientRect().height < h) {
-        el.style.height = `${h}px`;
-    }
-}
-// action wrap
-export function autogrow(el, options = null) {
-    const { max, min, allowed } = { max: 250, min: 0, allowed: true, ...(options || {}) };
-    if (!allowed)
-        return;
-    const _doGrow = () => increaseHeightToScrollHeight(el, max, min);
-    _doGrow(); // resize asap (on mount) as well...
-    el.addEventListener('input', _doGrow);
-    return {
-        destroy: () => el.removeEventListener('input', _doGrow),
-    };
-}