@marianmeres/stuic 2.1.7 → 2.1.9

package/dist/components/Backdrop/Backdrop.svelte

@@ -1,9 +1,6 @@
-<script lang="ts" module>
-	const _instances = [];
-</script>
-
 <script lang="ts">
 	import {
+		BodyScroll,
 		focusTrap as focusTrapAction,
 		twMerge,
 		waitForNextRepaint,
@@ -11,7 +8,7 @@
 	} from "../../index.js";
 	import { createClog } from "@marianmeres/clog";
 	import { PressedKeys, watch } from "runed";
-	import { type Snippet } from "svelte";
+	import { onDestroy, onMount, tick, type Snippet } from "svelte";
 	import { fade } from "svelte/transition";
 
 	const clog = createClog("Backdrop").debug;
@@ -94,32 +91,15 @@
 		}
 	);
 
-	// lock body scroll when open and restore back
-	let _original: any = {};
 	$effect(() => {
 		if (noScrollLock) return;
-		if (visible) {
-			_original = window.getComputedStyle(document.body);
-			const scrollY = window.scrollY;
-
-			document.body.style.position = "fixed";
-			document.body.style.top = `-${scrollY}px`;
-			document.body.style.width = "100%";
-			document.body.style.overflow = "hidden";
-		} else {
-			const scrollY = document.body.style.top;
-
-			document.body.style.position = _original.position;
-			document.body.style.position = "";
-			document.body.style.top = "";
-			document.body.style.width = "";
-			document.body.style.overflow = "";
-
-			// Restore scroll position
-			window.scrollTo(0, parseInt(scrollY || "0") * -1);
-		}
+		visible ? BodyScroll.lock() : BodyScroll.unlock();
 	});
 
+	// we need onDestroy as well
+	// Note, that this will also reset if nested... (which is not desired, but ignoring)
+	onDestroy(BodyScroll.unlock);
+
 	$effect(() => {
 		function onkeydown(e: KeyboardEvent) {
 			if (e.key === "Escape" && typeof onEscape === "function") {

package/dist/components/Button/Button.svelte

@@ -13,7 +13,7 @@
 
 		hover:brightness-105
 		active:brightness-95
-		disabled:hover:brightness-100
+		disabled:hover:brightness-100 disabled:opacity-50
 
 		focus:brightness-105
 		focus:border-button-border-focus focus:dark:border-button-border-focus-dark

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

@@ -1,4 +1,4 @@
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2\n\t\tselect-none\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
+export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2\n\t\tselect-none\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: any;
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { onClickOutside } from "runed";
-	import { onMount, tick, type Snippet } from "svelte";
+	import { onDestroy, onMount, tick, type Snippet } from "svelte";
 	import { focusTrap } from "../../actions/focus-trap.js";
 	import { stopPropagation } from "../../utils/event-modifiers.js";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { createClog } from "@marianmeres/clog";
 	import { waitForNextRepaint } from "../../utils/paint.js";
+	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 
 	const clog = createClog("ModalDialog").debug;
 
@@ -35,7 +36,9 @@
 		preClose,
 	}: Props = $props();
 
-	let visible = $state(false);
+	// important to start as undefined (because of scroll save/restore)
+	let visible: boolean | undefined = $state(undefined);
+
 	let dialog = $state<HTMLDialogElement>()!;
 	let box = $state<HTMLDivElement>()!;
 	let _opener: undefined | null | HTMLElement = $state();
@@ -76,31 +79,16 @@
 		() => !noClickOutsideClose && close()
 	);
 
-	let _original: any = {};
 	$effect(() => {
-		// if (noScrollLock) return;
-		if (visible) {
-			_original = window.getComputedStyle(document.body);
-			const scrollY = window.scrollY;
-
-			document.body.style.position = "fixed";
-			document.body.style.top = `-${scrollY}px`;
-			document.body.style.width = "100%";
-			document.body.style.overflow = "hidden";
-		} else {
-			const scrollY = document.body.style.top;
-
-			document.body.style.position = _original.position;
-			document.body.style.position = "";
-			document.body.style.top = "";
-			document.body.style.width = "";
-			document.body.style.overflow = "";
-
-			// Restore scroll position
-			window.scrollTo(0, parseInt(scrollY || "0") * -1);
-		}
+		// noop if we're undefined ($effect runs immediately as onMount)
+		if (visible === undefined) return;
+		visible ? BodyScroll.lock() : BodyScroll.unlock();
 	});
 
+	// we need onDestroy as well
+	// Note, that this will also reset if nested... (which is not desired, but ignoring)
+	onDestroy(BodyScroll.unlock);
+
 	// $inspect("Modal dialog mounted, is visible:", visible).with(clog);
 </script>
 

package/dist/index.css

@@ -6,7 +6,7 @@
 @source "./";
 
 /* "components" looks like a better fit here, but forms plugin uses "utilities"
-so, since we need to override, sticking with that*/
+so, since we need to override, sticking with that */
 @layer utilities {
 	@import "./actions/tooltip/index.css";
 	@import "./components/Button/index.css";
@@ -29,6 +29,6 @@ so, since we need to override, sticking with that*/
 	[role="button"]:disabled,
 	input:disabled {
 		cursor: not-allowed !important;
-		/* opacity: 0.5 !important; */
+		/* opacity: 0.5 !important; moved to Button itself, so it can be overridden */
 	}
 }

package/dist/utils/body-scroll-locker.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Helper for "locking" and "unlocking" body scroll (window.scrollY) position
+ */
+export declare class BodyScroll {
+    static lock(): void;
+    static unlock(): void;
+    private static _get_body_style;
+    private static _restore_body_styles;
+}

package/dist/utils/body-scroll-locker.js

@@ -0,0 +1,76 @@
+import { createClog } from "@marianmeres/clog";
+const clog = createClog("BodyScroll").debug;
+/**
+ * Helper for "locking" and "unlocking" body scroll (window.scrollY) position
+ */
+export class BodyScroll {
+    static lock() {
+        const data = document.body.dataset;
+        // Only save the scroll position if it hasn't been saved already
+        if (data.originalScrollY === undefined) {
+            const scrollY = window.scrollY || window.pageYOffset;
+            // Save body styles as serialized json
+            data.originalScrollStyleBackup = BodyScroll._get_body_style();
+            // Save the original scroll position in dataset
+            data.originalScrollY = `${scrollY}`;
+            data.scrollLockCount = "1";
+            // Apply the fixed positioning
+            document.body.style.position = "fixed";
+            document.body.style.top = `-${scrollY}px`;
+            document.body.style.width = "100%";
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            // Another component already locked the scroll, just increment the counter
+            const currentCount = parseInt(data.scrollLockCount, 10);
+            data.scrollLockCount = `${currentCount + 1}`;
+        }
+    }
+    static unlock() {
+        const data = document.body.dataset;
+        // Only proceed if scroll is currently locked
+        if (data.scrollLockCount !== undefined) {
+            const count = parseInt(data.scrollLockCount, 10);
+            if (count > 1) {
+                // Other components still need the lock, just decrement the counter
+                data.scrollLockCount = `${count - 1}`;
+            }
+            else {
+                // This is the last component, restore everything
+                const originalScrollY = parseInt(data.originalScrollY, 10);
+                BodyScroll._restore_body_styles(data.originalScrollStyleBackup);
+                // Remove our data attributes
+                delete data.originalScrollY;
+                delete data.originalScrollStyleBackup;
+                delete data.scrollLockCount;
+                // Restore the scroll position
+                window.scrollTo(0, originalScrollY);
+            }
+        }
+    }
+    static _get_body_style() {
+        // we want only explicitly defined, not computed
+        const style = document.body.style;
+        return JSON.stringify({
+            position: style.position || null,
+            top: style.position || null,
+            width: style.width || null,
+            overflow: style.overflow || null,
+        });
+    }
+    static _restore_body_styles(originalJsonString) {
+        let original = { position: null, top: null, width: null, overflow: null };
+        try {
+            original = JSON.parse(originalJsonString);
+        }
+        catch (e) { }
+        ["position", "top", "width", "overflow"].forEach((k) => {
+            if (original[k] !== null) {
+                document.body.style[k] = original[k];
+            }
+            else {
+                document.body.style.removeProperty(k);
+            }
+        });
+    }
+}

package/dist/utils/colors.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Converts a CSS HEX color string to an Oklch color string.
+ */
+export declare function hexToOklch(hex: string): string;
+/**
+ * Converts a sRGB (0-255) to an Oklch color string.
+ */
+export declare function rgbToOklch(rgb: {
+    r: number;
+    g: number;
+    b: number;
+}): string;
+/**
+ * Converts a HEX string to an RGB object.
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Converts sRGB (0-255) to linear RGB (0.0-1.0).
+ */
+export declare function srgbToLinearRgb({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}): {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Converts linear RGB (0.0-1.0) to Oklab.
+ */
+export declare function linearRgbToOklab({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}): {
+    l: number;
+    a: number;
+    b: number;
+};
+/**
+ * Converts Oklab to Oklch.
+ */
+export declare function oklabToOklch({ l, a, b }: {
+    l: number;
+    a: number;
+    b: number;
+}): {
+    l: number;
+    c: number;
+    h: number;
+};

package/dist/utils/colors.js

@@ -0,0 +1,92 @@
+/**
+ * Converts a CSS HEX color string to an Oklch color string.
+ */
+export function hexToOklch(hex) {
+    // 1. Parse HEX to RGB
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        throw new Error("Invalid HEX color format.");
+    }
+    // 2. Convert sRGB (0-255) to oklab
+    return rgbToOklch(rgb);
+}
+/**
+ * Converts a sRGB (0-255) to an Oklch color string.
+ */
+export function rgbToOklch(rgb) {
+    // 1. Convert sRGB (0-255) to Linear RGB (0.0-1.0)
+    const linearRgb = srgbToLinearRgb(rgb);
+    // 2. Convert Linear RGB to Oklab
+    const oklab = linearRgbToOklab(linearRgb);
+    // 3. Convert Oklab to Oklch
+    const oklch = oklabToOklch(oklab);
+    // 4. Format as CSS string
+    // L is 0-1, formatted as 0-100%
+    // C is 0-0.4 (approx), formatted as a number
+    // h is 0-360, formatted as a number (degrees)
+    const l = (oklch.l * 100).toFixed(1);
+    const c = oklch.c.toFixed(3);
+    // Handle hue: NaN becomes 0
+    const h = isNaN(oklch.h) ? "0" : oklch.h.toFixed(1);
+    return `oklch(${l}% ${c} ${h})`;
+}
+/**
+ * Converts a HEX string to an RGB object.
+ */
+export function hexToRgb(hex) {
+    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
+        return r + r + g + g + b + b;
+    });
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+/**
+ * Converts sRGB (0-255) to linear RGB (0.0-1.0).
+ */
+export function srgbToLinearRgb({ r, g, b }) {
+    const convert = (val) => {
+        let v = val / 255;
+        return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    };
+    return {
+        r: convert(r),
+        g: convert(g),
+        b: convert(b),
+    };
+}
+/**
+ * Converts linear RGB (0.0-1.0) to Oklab.
+ */
+export function linearRgbToOklab({ r, g, b }) {
+    // Based on the conversion matrices from the Oklab color space specification
+    const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+    const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+    const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    return {
+        l: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    };
+}
+/**
+ * Converts Oklab to Oklch.
+ */
+export function oklabToOklch({ l, a, b }) {
+    const c = Math.sqrt(a * a + b * b);
+    let h = Math.atan2(b, a) * (180 / Math.PI);
+    // Normalize hue to be between 0 and 360
+    if (h < 0) {
+        h += 360;
+    }
+    return { l, c, h };
+}

package/dist/utils/index.d.ts

@@ -1,12 +1,12 @@
+export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
+export * from "./colors.js";
 export * from "./debounce.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";
 export * from "./event-modifiers.js";
 export * from "./get-id.js";
-export * from "./hex-to-oklch.js";
-export * from "./hex-to-rgb.js";
 export * from "./is-browser.js";
 export * from "./is-mac.js";
 export * from "./is-nullish.js";

package/dist/utils/index.js

@@ -1,12 +1,12 @@
+export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
+export * from "./colors.js";
 export * from "./debounce.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";
 export * from "./event-modifiers.js";
 export * from "./get-id.js";
-export * from "./hex-to-oklch.js";
-export * from "./hex-to-rgb.js";
 export * from "./is-browser.js";
 export * from "./is-mac.js";
 export * from "./is-nullish.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.7",
+	"version": "2.1.9",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/utils/hex-to-oklch.d.ts

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

package/dist/utils/hex-to-oklch.js

@@ -1,53 +0,0 @@
-"use strict";
-/**
- * Converts a hex color string to OKLCH
- * @param {string} hex - The hex color string (with or without leading #)
- * @returns {Object} An object with l (lightness), c (chroma), and h (hue) properties
- */
-function hexToOklch(hex) {
-    // Remove the hash if it exists
-    hex = hex.replace(/^#/, "");
-    // Handle both 3-digit and 6-digit formats
-    if (hex.length === 3) {
-        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    }
-    // Parse the hex values to RGB (0-1)
-    const r = parseInt(hex.substring(0, 2), 16) / 255;
-    const g = parseInt(hex.substring(2, 4), 16) / 255;
-    const b = parseInt(hex.substring(4, 6), 16) / 255;
-    // Convert RGB to linear RGB (removing gamma correction)
-    const linearR = r <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
-    const linearG = g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
-    const linearB = b <= 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
-    // Convert to XYZ
-    const x = 0.4124 * linearR + 0.3576 * linearG + 0.1805 * linearB;
-    const y = 0.2126 * linearR + 0.7152 * linearG + 0.0722 * linearB;
-    const z = 0.0193 * linearR + 0.1192 * linearG + 0.9505 * linearB;
-    // Convert XYZ to LMS (cone response)
-    const l = 0.819 * x + 0.3619 * y - 0.1289 * z;
-    const m = 0.0329 * x + 0.9293 * y + 0.0361 * z;
-    const s = 0.0482 * x + 0.2645 * y + 0.6886 * z;
-    // Apply non-linearity to LMS
-    const lp = Math.cbrt(l);
-    const mp = Math.cbrt(m);
-    const sp = Math.cbrt(s);
-    // Convert to Oklab
-    const L = 0.2104 * lp + 0.7936 * mp - 0.004 * sp;
-    const a = 1.9779 * lp - 2.4285 * mp + 0.4505 * sp;
-    const bb = 0.0259 * lp + 0.7827 * mp - 0.8086 * sp;
-    // Convert Oklab to Oklch
-    const C = Math.sqrt(a * a + bb * bb);
-    let h = (Math.atan2(bb, a) * 180) / Math.PI;
-    // Ensure hue is positive
-    if (h < 0) {
-        h += 360;
-    }
-    return {
-        l: parseFloat(L.toFixed(4)),
-        c: parseFloat(C.toFixed(4)),
-        h: parseFloat(h.toFixed(2)),
-    };
-}
-// Example usage:
-// const oklch = hexToOklch("#ff5733");
-// console.log(oklch); // Example output: { l: 0.6321, c: 0.1549, h: 27.23 }

package/dist/utils/hex-to-rgb.d.ts

@@ -1,6 +0,0 @@
-/** Will convert #fff or #ffffff to {r: 255, g: 255, b: 255} */
-export declare function hexToRgb(hex: string): {
-    r: number;
-    g: number;
-    b: number;
-};

package/dist/utils/hex-to-rgb.js

@@ -1,12 +0,0 @@
-/** Will convert #fff or #ffffff to {r: 255, g: 255, b: 255} */
-export function hexToRgb(hex) {
-    hex = hex.replace(/^#/, "");
-    // both 3-digit and 6-digit formats
-    if (hex.length === 3) {
-        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    }
-    const r = parseInt(hex.substring(0, 2), 16);
-    const g = parseInt(hex.substring(2, 4), 16);
-    const b = parseInt(hex.substring(4, 6), 16);
-    return { r, g, b };
-}