@heyramzi/ui 2.11.1 → 2.11.2

package/dist/effects/border-beam/register-properties.js

@@ -1,39 +1,49 @@
+/**
+* WHY this exists at all, when generateCss already emits the same @property rules: Chrome ignores an @property rule that sits inside a shadow root,
+*/
+/*
+* so a beam rendered in one has no registration.
+*/
+/*
+* Unregistered, the angle cannot be interpolated and, worse, every mask that reads it is invalid at computed-value time, which resolves the mask to none and floods the whole element instead
+*/
+/*
+* of drawing a border. This call registers on the document, which is why the ids are unique per instance.
+*/
 export function registerBorderBeamProperties(id, size) {
-    const registry = globalThis.CSS;
-    if (typeof registry?.registerProperty !== "function") return;
-    for (const registration of getBorderBeamPropertyRegistrations(id, size)){
-        try {
-            registry.registerProperty?.(registration);
-        } catch  {}
-    }
+	const registry = globalThis.CSS;
+	if (typeof registry?.registerProperty !== "function") return;
+	for (const registration of getBorderBeamPropertyRegistrations(id, size)) {
+		// A second register of the same name throws. The first one already holds, so there is nothing to do.
+		try {
+			registry.registerProperty?.(registration);
+		} catch {}
+	}
 }
 function getBorderBeamPropertyRegistrations(id, size) {
-    if (size === "line") {
-        return [
-            numberProperty(`--beam-x-${id}`, "0"),
-            numberProperty(`--beam-w-${id}`, "1"),
-            numberProperty(`--beam-h-${id}`, "1"),
-            numberProperty(`--beam-spike-${id}`, "1"),
-            numberProperty(`--beam-spike2-${id}`, "1"),
-            numberProperty(`--beam-edge-${id}`, "1"),
-            numberProperty(`--beam-opacity-${id}`, "0")
-        ];
-    }
-    return [
-        {
-            name: `--beam-angle-${id}`,
-            syntax: "<angle>",
-            initialValue: "0deg",
-            inherits: true
-        },
-        numberProperty(`--beam-opacity-${id}`, "0")
-    ];
+	if (size === "line") {
+		return [
+			numberProperty(`--beam-x-${id}`, "0"),
+			numberProperty(`--beam-w-${id}`, "1"),
+			numberProperty(`--beam-h-${id}`, "1"),
+			numberProperty(`--beam-spike-${id}`, "1"),
+			numberProperty(`--beam-spike2-${id}`, "1"),
+			numberProperty(`--beam-edge-${id}`, "1"),
+			numberProperty(`--beam-opacity-${id}`, "0")
+		];
+	}
+	return [{
+		name: `--beam-angle-${id}`,
+		syntax: "<angle>",
+		initialValue: "0deg",
+		inherits: true
+	}, numberProperty(`--beam-opacity-${id}`, "0")];
 }
 function numberProperty(name, initialValue) {
-    return {
-        name,
-        syntax: "<number>",
-        initialValue,
-        inherits: true
-    };
+	return {
+		name,
+		syntax: "<number>",
+		initialValue,
+		inherits: true
+	};
 }

package/dist/effects/border-beam/types.js

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

package/dist/effects/image-comparison/compare.js

@@ -1,4 +1,5 @@
+/** Where the handle sits for a pointer at `clientX`, as a 0-100 percentage of the frame. */
 export function positionAt(clientX, left, width) {
-    if (width <= 0) return 50;
-    return Math.min(Math.max((clientX - left) / width * 100, 0), 100);
+	if (width <= 0) return 50;
+	return Math.min(Math.max((clientX - left) / width * 100, 0), 100);
 }

package/dist/effects/image-reveal/types.js

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

package/dist/effects/magnetic/magnetic.js

@@ -1,54 +1,60 @@
 const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
-export const magnetic = (node, options)=>{
-    let intensity = options?.intensity ?? 0.6;
-    let range = options?.range ?? 100;
-    let from = options?.from ?? "self";
-    let duration = options?.duration ?? 350;
-    let armed = false;
-    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const zone = ()=>from === "parent" ? node.parentElement ?? node : node;
-    const reset = ()=>{
-        node.style.transition = `translate ${duration}ms ${EASE}`;
-        node.style.translate = "0px 0px";
-    };
-    const onMove = (event)=>{
-        if (!armed || reduced.matches) return;
-        const rect = node.getBoundingClientRect();
-        const dx = event.clientX - (rect.left + rect.width / 2);
-        const dy = event.clientY - (rect.top + rect.height / 2);
-        const distance = Math.hypot(dx, dy);
-        if (distance > range) return reset();
-        const falloff = intensity * (1 - distance / range);
-        node.style.transition = "translate 0ms";
-        node.style.translate = `${dx * falloff}px ${dy * falloff}px`;
-    };
-    const arm = ()=>armed = true;
-    const disarm = ()=>{
-        armed = false;
-        reset();
-    };
-    let target = zone();
-    target.addEventListener("pointerenter", arm);
-    target.addEventListener("pointerleave", disarm);
-    document.addEventListener("pointermove", onMove);
-    return {
-        update (next) {
-            intensity = next?.intensity ?? 0.6;
-            range = next?.range ?? 100;
-            duration = next?.duration ?? 350;
-            const nextFrom = next?.from ?? "self";
-            if (nextFrom === from) return;
-            target.removeEventListener("pointerenter", arm);
-            target.removeEventListener("pointerleave", disarm);
-            from = nextFrom;
-            target = zone();
-            target.addEventListener("pointerenter", arm);
-            target.addEventListener("pointerleave", disarm);
-        },
-        destroy () {
-            target.removeEventListener("pointerenter", arm);
-            target.removeEventListener("pointerleave", disarm);
-            document.removeEventListener("pointermove", onMove);
-        }
-    };
+/**
+* Pulls an element toward the pointer while it is inside `range`.
+* Port of motion-primitives' `Magnetic` with a CSS transition instead of a spring.
+*/
+export const magnetic = (node, options) => {
+	let intensity = options?.intensity ?? .6;
+	let range = options?.range ?? 100;
+	let from = options?.from ?? "self";
+	let duration = options?.duration ?? 350;
+	let armed = false;
+	// WHY: the pull is a hover affordance with no state behind it, so reduced-motion
+	// gets a no-op rather than a shorter version of the same movement.
+	const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+	const zone = () => from === "parent" ? node.parentElement ?? node : node;
+	const reset = () => {
+		node.style.transition = `translate ${duration}ms ${EASE}`;
+		node.style.translate = "0px 0px";
+	};
+	const onMove = (event) => {
+		if (!armed || reduced.matches) return;
+		const rect = node.getBoundingClientRect();
+		const dx = event.clientX - (rect.left + rect.width / 2);
+		const dy = event.clientY - (rect.top + rect.height / 2);
+		const distance = Math.hypot(dx, dy);
+		if (distance > range) return reset();
+		const falloff = intensity * (1 - distance / range);
+		node.style.transition = "translate 0ms";
+		node.style.translate = `${dx * falloff}px ${dy * falloff}px`;
+	};
+	const arm = () => armed = true;
+	const disarm = () => {
+		armed = false;
+		reset();
+	};
+	let target = zone();
+	target.addEventListener("pointerenter", arm);
+	target.addEventListener("pointerleave", disarm);
+	document.addEventListener("pointermove", onMove);
+	return {
+		update(next) {
+			intensity = next?.intensity ?? .6;
+			range = next?.range ?? 100;
+			duration = next?.duration ?? 350;
+			const nextFrom = next?.from ?? "self";
+			if (nextFrom === from) return;
+			target.removeEventListener("pointerenter", arm);
+			target.removeEventListener("pointerleave", disarm);
+			from = nextFrom;
+			target = zone();
+			target.addEventListener("pointerenter", arm);
+			target.addEventListener("pointerleave", disarm);
+		},
+		destroy() {
+			target.removeEventListener("pointerenter", arm);
+			target.removeEventListener("pointerleave", disarm);
+			document.removeEventListener("pointermove", onMove);
+		}
+	};
 };

package/dist/effects/reveal/observe.js

@@ -1,43 +1,53 @@
+/**
+* Runs `onChange` when `el` enters or leaves the viewport. Returns the teardown.
+* Shared by InView, AnimatedGroup and TextEffect so there is one observer contract.
+*/
 export function observeInView(el, options, onChange) {
-    if (typeof IntersectionObserver === "undefined") {
-        onChange(true);
-        return ()=>{};
-    }
-    const observer = new IntersectionObserver(([entry])=>{
-        if (entry.isIntersecting) {
-            onChange(true);
-            if (options.once !== false) observer.disconnect();
-            return;
-        }
-        if (options.once === false) onChange(false);
-    }, {
-        threshold: options.amount ?? 0,
-        rootMargin: options.margin ?? "0px"
-    });
-    observer.observe(el);
-    return ()=>observer.disconnect();
+	// WHY: no IntersectionObserver means SSR or an ancient engine; reveal the
+	// content rather than leaving it stuck at the hidden keyframe.
+	if (typeof IntersectionObserver === "undefined") {
+		onChange(true);
+		return () => {};
+	}
+	const observer = new IntersectionObserver(([entry]) => {
+		if (entry.isIntersecting) {
+			onChange(true);
+			if (options.once !== false) observer.disconnect();
+			return;
+		}
+		if (options.once === false) onChange(false);
+	}, {
+		threshold: options.amount ?? 0,
+		rootMargin: options.margin ?? "0px"
+	});
+	observer.observe(el);
+	return () => observer.disconnect();
 }
-export const onInView = (node, initial)=>{
-    let options = initial ?? {};
-    let entered = false;
-    const { amount = 0.1, margin, once } = options;
-    const stop = observeInView(node, {
-        amount,
-        margin,
-        once
-    }, (inView)=>{
-        if (inView && !entered) {
-            entered = true;
-            options.onEnter?.();
-        } else if (!inView && entered) {
-            entered = false;
-            options.onLeave?.();
-        }
-    });
-    return {
-        update (next) {
-            options = next ?? {};
-        },
-        destroy: stop
-    };
+/**
+* Svelte action that calls back when the node enters or leaves the viewport.
+* Options are read at call time, so a `use:onInView={...}` update swaps the callbacks.
+*/
+export const onInView = (node, initial) => {
+	let options = initial ?? {};
+	let entered = false;
+	const { amount = .1, margin, once } = options;
+	const stop = observeInView(node, {
+		amount,
+		margin,
+		once
+	}, (inView) => {
+		if (inView && !entered) {
+			entered = true;
+			options.onEnter?.();
+		} else if (!inView && entered) {
+			entered = false;
+			options.onLeave?.();
+		}
+	});
+	return {
+		update(next) {
+			options = next ?? {};
+		},
+		destroy: stop
+	};
 };

package/dist/effects/reveal/types.js

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

package/dist/effects/shader-gradient/color.js

@@ -1,34 +1,41 @@
 let probe;
 function getProbe() {
-    if (probe !== undefined) return probe;
-    probe = document.createElement("canvas").getContext("2d", {
-        willReadFrequently: true
-    });
-    return probe;
+	if (probe !== undefined) return probe;
+	probe = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+	return probe;
 }
+/**
+* Any CSS color to a 0..1 RGB triplet, `var(--token)` included.
+*/
+/*
+* The values go through a 1x1 canvas rather than a hand-written parser because the brand palette is authored in oklch, and the canvas gives the browser's own conversion for every
+*/
+/*
+* color space it supports instead of a second implementation that has to keep up.
+*/
 export function resolveColor(input, scope) {
-    const fallback = [
-        0,
-        0,
-        0
-    ];
-    if (typeof document === "undefined") return fallback;
-    let value = input.trim();
-    const token = /^var\(\s*(--[\w-]+)\s*(?:,\s*([\s\S]+))?\)$/.exec(value);
-    if (token) {
-        const resolved = getComputedStyle(scope ?? document.documentElement).getPropertyValue(token[1]).trim();
-        value = resolved || token[2]?.trim() || "";
-    }
-    if (!value) return fallback;
-    const context = getProbe();
-    if (!context) return fallback;
-    context.fillStyle = value;
-    context.clearRect(0, 0, 1, 1);
-    context.fillRect(0, 0, 1, 1);
-    const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
-    return [
-        r / 255,
-        g / 255,
-        b / 255
-    ];
+	const fallback = [
+		0,
+		0,
+		0
+	];
+	if (typeof document === "undefined") return fallback;
+	let value = input.trim();
+	const token = /^var\(\s*(--[\w-]+)\s*(?:,\s*([\s\S]+))?\)$/.exec(value);
+	if (token) {
+		const resolved = getComputedStyle(scope ?? document.documentElement).getPropertyValue(token[1]).trim();
+		value = resolved || token[2]?.trim() || "";
+	}
+	if (!value) return fallback;
+	const context = getProbe();
+	if (!context) return fallback;
+	context.fillStyle = value;
+	context.clearRect(0, 0, 1, 1);
+	context.fillRect(0, 0, 1, 1);
+	const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+	return [
+		r / 255,
+		g / 255,
+		b / 255
+	];
 }