@flux-ui/visuals 3.6.1 → 3.7.0

package/dist/index.js

@@ -9261,7 +9261,7 @@ function friendlyDateTime(dateTimeish) {
 	else throw new InvalidArgumentError(`Unknown datetime argument: ${dateTimeish}, of type ${typeof dateTimeish}`);
 }
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+utils@3.52.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+utils@3.53.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
 function x$1(e) {
 	let t = {};
 	do {
@@ -9311,7 +9311,7 @@ function K$1(e, t, n) {
 	Object.defineProperty(e, t, { value: n });
 }
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.52.0+9129bae305b09d14/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.53.0+9129bae305b09d14/node_modules/@basmilius/http-client/dist/index.mjs
 function adapter_default(Parent) {
 	return class extends Parent {
 		constructor(...args) {
@@ -9805,7 +9805,7 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
 		return matches[1].replaceAll("'", "").replaceAll("\"", "").replaceAll("/", "-").replaceAll(":", "-");
 	}
 	static parseRequestError(data, statusCode) {
-		return new RequestError_default(data.code, data.error, data.error_description, statusCode);
+		return new RequestError_default(data.code, data.error, data.error_description ?? data.errorDescription, statusCode);
 	}
 	static parseValidationError(data) {
 		let errors;
@@ -9815,7 +9815,7 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
 				errors[key] = _HttpAdapter.parseValidationError(value);
 			});
 		}
-		return new ValidationError_default(data.code, data.error, data.error_description, errors, data.params);
+		return new ValidationError_default(data.code, data.error, data.error_description ?? data.errorDescription, errors, data.params);
 	}
 };
 HttpAdapter = _HttpAdapter = __decorate([adapter_default], HttpAdapter);
@@ -9923,12 +9923,12 @@ var FluxVisualAnimatedColors_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const canvasRef = useTemplateRef("canvas");
-		const componentId = se$1();
-		const inView = k$1(canvasRef, { initial: true });
 		const contextRef = ref();
 		const animationFrame = ref(0);
 		const tick = ref(0);
 		const size = ref(null);
+		const componentId = se$1();
+		const inView = k$1(canvasRef, { initial: true });
 		const reducedMotion = v$1();
 		const polygons = computed(() => {
 			if (!__props.colors || __props.colors.length === 0) return [];
@@ -9954,6 +9954,45 @@ var FluxVisualAnimatedColors_default = /* @__PURE__ */ defineComponent({
 			}
 			return polygons;
 		});
+		watch(canvasRef, (canvas, _, onCleanup) => {
+			if (!canvas) {
+				contextRef.value = void 0;
+				size.value = null;
+				return;
+			}
+			contextRef.value = canvas.getContext("2d", {
+				alpha: true,
+				colorSpace: "display-p3"
+			});
+			if (typeof ResizeObserver === "undefined") {
+				size.value = {
+					width: canvas.offsetWidth,
+					height: canvas.offsetHeight
+				};
+				canvas.width = canvas.offsetWidth;
+				canvas.height = canvas.offsetHeight;
+				return;
+			}
+			const observer = new ResizeObserver(() => {
+				const width = canvas.offsetWidth;
+				const height = canvas.offsetHeight;
+				if (!width || !height || size.value?.width === width && size.value?.height === height) return;
+				canvas.width = width;
+				canvas.height = height;
+				size.value = {
+					width,
+					height
+				};
+			});
+			observer.observe(canvas);
+			onCleanup(() => observer.disconnect());
+		}, { immediate: true });
+		watch([
+			polygons,
+			() => __props.opacity,
+			size,
+			inView
+		], () => restart());
 		onBeforeUnmount(() => cancel());
 		function cancel() {
 			cancelAnimationFrame(animationFrame.value);
@@ -10003,45 +10042,6 @@ var FluxVisualAnimatedColors_default = /* @__PURE__ */ defineComponent({
 			}
 			schedule();
 		}
-		watch(canvasRef, (canvas, _, onCleanup) => {
-			if (!canvas) {
-				contextRef.value = void 0;
-				size.value = null;
-				return;
-			}
-			contextRef.value = canvas.getContext("2d", {
-				alpha: true,
-				colorSpace: "display-p3"
-			});
-			if (typeof ResizeObserver === "undefined") {
-				size.value = {
-					width: canvas.offsetWidth,
-					height: canvas.offsetHeight
-				};
-				canvas.width = canvas.offsetWidth;
-				canvas.height = canvas.offsetHeight;
-				return;
-			}
-			const observer = new ResizeObserver(() => {
-				const width = canvas.offsetWidth;
-				const height = canvas.offsetHeight;
-				if (!width || !height || size.value?.width === width && size.value?.height === height) return;
-				canvas.width = width;
-				canvas.height = height;
-				size.value = {
-					width,
-					height
-				};
-			});
-			observer.observe(canvas);
-			onCleanup(() => observer.disconnect());
-		}, { immediate: true });
-		watch([
-			polygons,
-			() => __props.opacity,
-			size,
-			inView
-		], () => restart());
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("canvas", {
 				ref: "canvas",
@@ -11347,38 +11347,6 @@ var FluxVisualFlickeringGrid_default = /* @__PURE__ */ defineComponent({
 			context.fillRect(0, 0, 1, 1);
 			return context.getImageData(0, 0, 1, 1).data;
 		});
-		function draw(context, width, height, columns, rows, squares, dpr) {
-			context.clearRect(0, 0, width * dpr, height * dpr);
-			const [r, g, b] = unref(rgb);
-			for (let i = 0; i < columns; ++i) for (let j = 0; j < rows; ++j) {
-				context.fillStyle = `rgb(${r} ${g} ${b} / ${squares[i * rows + j]})`;
-				context.fillRect((i * (__props.size + __props.gap) + width / 2 - (columns / 2 * (__props.size + __props.gap) - __props.gap / 2)) * dpr, (j * (__props.size + __props.gap) + height / 2 - (rows / 2 * (__props.size + __props.gap) - __props.gap / 2)) * dpr, __props.size * dpr, __props.size * dpr);
-			}
-		}
-		function setup(canvas) {
-			const width = canvas.clientWidth;
-			const height = canvas.clientHeight;
-			const dpr = window.devicePixelRatio || 1;
-			canvas.width = width * dpr;
-			canvas.height = height * dpr;
-			canvas.style.width = `${width}px`;
-			canvas.style.height = `${height}px`;
-			const columns = Math.ceil(width / (__props.size + __props.gap));
-			const rows = Math.ceil(height / (__props.size + __props.gap));
-			const squares = new Float32Array(columns * rows);
-			for (let i = 0; i < squares.length; ++i) squares[i] = mulberry.next() * __props.maxOpacity;
-			return {
-				width,
-				height,
-				columns,
-				rows,
-				squares,
-				dpr
-			};
-		}
-		function tick(squares, delta) {
-			for (let i = 0; i < squares.length; ++i) if (mulberry.next() < __props.flickerChance * delta) squares[i] = mulberry.next() * __props.maxOpacity;
-		}
 		watch([canvasRef, inView], ([canvas, inView], _, onCleanup) => {
 			if (!canvas || !inView) return;
 			const context = canvas.getContext("2d");
@@ -11412,6 +11380,38 @@ var FluxVisualFlickeringGrid_default = /* @__PURE__ */ defineComponent({
 				cancelAnimationFrame(frame);
 			});
 		}, { immediate: true });
+		function draw(context, width, height, columns, rows, squares, dpr) {
+			context.clearRect(0, 0, width * dpr, height * dpr);
+			const [r, g, b] = unref(rgb);
+			for (let i = 0; i < columns; ++i) for (let j = 0; j < rows; ++j) {
+				context.fillStyle = `rgb(${r} ${g} ${b} / ${squares[i * rows + j]})`;
+				context.fillRect((i * (__props.size + __props.gap) + width / 2 - (columns / 2 * (__props.size + __props.gap) - __props.gap / 2)) * dpr, (j * (__props.size + __props.gap) + height / 2 - (rows / 2 * (__props.size + __props.gap) - __props.gap / 2)) * dpr, __props.size * dpr, __props.size * dpr);
+			}
+		}
+		function setup(canvas) {
+			const width = canvas.clientWidth;
+			const height = canvas.clientHeight;
+			const dpr = window.devicePixelRatio || 1;
+			canvas.width = width * dpr;
+			canvas.height = height * dpr;
+			canvas.style.width = `${width}px`;
+			canvas.style.height = `${height}px`;
+			const columns = Math.ceil(width / (__props.size + __props.gap));
+			const rows = Math.ceil(height / (__props.size + __props.gap));
+			const squares = new Float32Array(columns * rows);
+			for (let i = 0; i < squares.length; ++i) squares[i] = mulberry.next() * __props.maxOpacity;
+			return {
+				width,
+				height,
+				columns,
+				rows,
+				squares,
+				dpr
+			};
+		}
+		function tick(squares, delta) {
+			for (let i = 0; i < squares.length; ++i) if (mulberry.next() < __props.flickerChance * delta) squares[i] = mulberry.next() * __props.maxOpacity;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("canvas", {
 				ref: "canvas",
@@ -11570,8 +11570,8 @@ var FluxVisualHighlighter_default = /* @__PURE__ */ defineComponent({
 	emits: ["hidden", "shown"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
-		const group = useHighlighterGroupInjection();
 		const targetRef = useTemplateRef("target");
+		const group = useHighlighterGroupInjection();
 		const inView = group ? shallowRef(true) : k$1(targetRef, { initial: !__props.whenInView });
 		const effectiveVariant = computed(() => __props.variant ?? group?.defaults.variant ?? "highlight");
 		const effectiveColor = computed(() => __props.color ?? group?.defaults.color ?? "var(--warning-200)");
@@ -11586,6 +11586,39 @@ var FluxVisualHighlighter_default = /* @__PURE__ */ defineComponent({
 		let settleTimer;
 		let shownTimer;
 		let revealed = false;
+		watch([
+			effectiveVariant,
+			effectiveColor,
+			effectiveStrokeWidth,
+			effectiveAnimationDuration,
+			effectiveIterations,
+			effectivePadding,
+			effectiveMultiline
+		], () => build());
+		watch(inView, () => {
+			if (!group) reveal();
+		});
+		onMounted(() => {
+			const element = targetRef.value;
+			if (group && element) {
+				entry = {
+					element,
+					getAnnotation: () => annotation
+				};
+				group.add(entry);
+			}
+			build();
+		});
+		onBeforeUnmount(() => {
+			if (group && entry) {
+				group.remove(entry);
+				entry = null;
+			}
+			window.clearTimeout(shownTimer);
+			stopSettleWatch();
+			annotation?.remove();
+			annotation = null;
+		});
 		function emitShown() {
 			window.clearTimeout(shownTimer);
 			if (v$1()) {
@@ -11654,39 +11687,6 @@ var FluxVisualHighlighter_default = /* @__PURE__ */ defineComponent({
 			observer.observe(element);
 			observer.observe(document.body);
 		}
-		onMounted(() => {
-			const element = targetRef.value;
-			if (group && element) {
-				entry = {
-					element,
-					getAnnotation: () => annotation
-				};
-				group.add(entry);
-			}
-			build();
-		});
-		watch([
-			effectiveVariant,
-			effectiveColor,
-			effectiveStrokeWidth,
-			effectiveAnimationDuration,
-			effectiveIterations,
-			effectivePadding,
-			effectiveMultiline
-		], () => build());
-		watch(inView, () => {
-			if (!group) reveal();
-		});
-		onBeforeUnmount(() => {
-			if (group && entry) {
-				group.remove(entry);
-				entry = null;
-			}
-			window.clearTimeout(shownTimer);
-			stopSettleWatch();
-			annotation?.remove();
-			annotation = null;
-		});
 		__expose({
 			hide,
 			replay,
@@ -11782,6 +11782,26 @@ var FluxVisualNumberFlow_default = /* @__PURE__ */ defineComponent({
 			"ease-in-out": (progress) => progress < .5 ? 2 * progress * progress : 1 - (-2 * progress + 2) ** 2 / 2
 		};
 		const CUBIC_BEZIER_PATTERN = /^cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)$/;
+		const swiftOutEasing = cubicBezier(.55, 0, .1, 1);
+		const labelRef = useTemplateRef("label");
+		let frame = 0;
+		let current = __props.animateOnMount ? 0 : __props.value;
+		const easingFunction = computed(() => {
+			if (typeof __props.easing === "function") return __props.easing;
+			const keyword = EASINGS[__props.easing];
+			if (keyword) return keyword;
+			return parseCubicBezier(__props.easing) ?? swiftOutEasing;
+		});
+		const formatter = computed(() => new Intl.NumberFormat(__props.locale, __props.format ?? { maximumFractionDigits: 0 }));
+		const initialText = formatter.value.format(__props.animateOnMount ? 0 : __props.value);
+		const accessibleValue = computed(() => formatter.value.format(__props.value));
+		watch(() => __props.value, (next) => tween(current, next));
+		watch(formatter, () => render(current));
+		onMounted(() => {
+			if (__props.animateOnMount) tween(0, __props.value);
+			else render(__props.value);
+		});
+		onBeforeUnmount(cancel);
 		function cubicBezier(x1, y1, x2, y2) {
 			const ax = 3 * x1 - 3 * x2 + 1;
 			const bx = 3 * x2 - 6 * x1;
@@ -11824,19 +11844,6 @@ var FluxVisualNumberFlow_default = /* @__PURE__ */ defineComponent({
 			if (!match) return null;
 			return cubicBezier(Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]));
 		}
-		const swiftOutEasing = cubicBezier(.55, 0, .1, 1);
-		const easingFunction = computed(() => {
-			if (typeof __props.easing === "function") return __props.easing;
-			const keyword = EASINGS[__props.easing];
-			if (keyword) return keyword;
-			return parseCubicBezier(__props.easing) ?? swiftOutEasing;
-		});
-		const formatter = computed(() => new Intl.NumberFormat(__props.locale, __props.format ?? { maximumFractionDigits: 0 }));
-		const initialText = formatter.value.format(__props.animateOnMount ? 0 : __props.value);
-		const accessibleValue = computed(() => formatter.value.format(__props.value));
-		const labelRef = useTemplateRef("label");
-		let frame = 0;
-		let current = __props.animateOnMount ? 0 : __props.value;
 		function render(next) {
 			current = next;
 			const element = labelRef.value;
@@ -11868,13 +11875,6 @@ var FluxVisualNumberFlow_default = /* @__PURE__ */ defineComponent({
 			};
 			frame = requestAnimationFrame(step);
 		}
-		onMounted(() => {
-			if (__props.animateOnMount) tween(0, __props.value);
-			else render(__props.value);
-		});
-		watch(() => __props.value, (next) => tween(current, next));
-		watch(formatter, () => render(current));
-		onBeforeUnmount(cancel);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", {
 				ref: "label",
@@ -12010,10 +12010,22 @@ var FluxVisualSlotText_default = /* @__PURE__ */ defineComponent({
 		let state = null;
 		let revertTimeout;
 		let restingText;
-		const glyph = (char) => char === " " ? NBSP : char;
-		const chromaticColor = (index, total) => {
+		watch(() => __props.text, (value) => set(value));
+		onMounted(() => {
+			const element = labelRef.value;
+			if (element) buildSlotText(element, __props.text);
+		});
+		onBeforeUnmount(() => {
+			window.clearTimeout(revertTimeout);
+			const element = labelRef.value;
+			if (element) clearSlotText(element, __props.text);
+		});
+		function glyph(char) {
+			return char === " " ? NBSP : char;
+		}
+		function chromaticColor(index, total) {
 			return `hsl(${(total <= 1 ? 0 : index / (total - 1)) * 320 % 360} 92% 60%)`;
-		};
+		}
 		function baseOptions() {
 			return {
 				direction: __props.direction,
@@ -12206,16 +12218,6 @@ var FluxVisualSlotText_default = /* @__PURE__ */ defineComponent({
 				});
 			}, revertAfter);
 		}
-		onMounted(() => {
-			const element = labelRef.value;
-			if (element) buildSlotText(element, __props.text);
-		});
-		watch(() => __props.text, (value) => set(value));
-		onBeforeUnmount(() => {
-			window.clearTimeout(revertTimeout);
-			const element = labelRef.value;
-			if (element) clearSlotText(element, __props.text);
-		});
 		__expose({
 			flash,
 			set
@@ -12254,6 +12256,8 @@ var FluxVisualTextScramble_default = /* @__PURE__ */ defineComponent({
 		const labelRef = useTemplateRef("label");
 		let frame = 0;
 		let currentText = __props.text;
+		watch(() => __props.text, (value) => set(value));
+		onBeforeUnmount(cancel);
 		function cancel() {
 			if (frame) {
 				cancelAnimationFrame(frame);
@@ -12338,8 +12342,6 @@ var FluxVisualTextScramble_default = /* @__PURE__ */ defineComponent({
 			if (!element) return;
 			scramble(element, currentText, currentText, true);
 		}
-		watch(() => __props.text, (value) => set(value));
-		onBeforeUnmount(cancel);
 		__expose({
 			replay,
 			set