@flux-ui/visuals 3.6.1 → 3.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/visuals",
     "description": "Visual effect components for the Flux UI library.",
-    "version": "3.6.1",
+    "version": "3.7.0",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -48,10 +48,10 @@
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "dependencies": {
-        "@basmilius/common": "^3.52.0",
-        "@basmilius/utils": "^3.52.0",
-        "@flux-ui/internals": "3.6.1",
-        "@flux-ui/types": "3.6.1",
+        "@basmilius/common": "^3.53.0",
+        "@basmilius/utils": "^3.53.0",
+        "@flux-ui/internals": "3.7.0",
+        "@flux-ui/types": "3.7.0",
         "clsx": "^2.1.1",
         "rough-notation": "^0.5.1"
     },
@@ -59,9 +59,9 @@
         "vue": "^3.6.0-beta.17"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.52.0",
+        "@basmilius/vite-preset": "^3.53.0",
         "@types/node": "^26.1.1",
-        "@vitejs/plugin-vue": "^6.0.7",
+        "@vitejs/plugin-vue": "^6.0.8",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "6.0.3",

package/src/component/FluxVisualAnimatedColors.vue

@@ -32,14 +32,13 @@
     }>();
 
     const canvasRef = useTemplateRef('canvas');
-    const componentId = useComponentId();
-    const inView = useInView(canvasRef, {initial: true});
-
     const contextRef = ref<CanvasRenderingContext2D>();
     const animationFrame = ref(0);
     const tick = ref(0);
     const size = ref<{ width: number; height: number; } | null>(null);
 
+    const componentId = useComponentId();
+    const inView = useInView(canvasRef, {initial: true});
     const reducedMotion = prefersReducedMotion();
 
     const polygons = computed(() => {
@@ -72,6 +71,45 @@
         return polygons;
     });
 
+    watch(canvasRef, (canvas, _, onCleanup) => {
+        if (!canvas) {
+            contextRef.value = undefined;
+            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, () => opacity, size, inView], () => restart());
+
     onBeforeUnmount(() => cancel());
 
     function cancel(): void {
@@ -145,43 +183,4 @@
 
         schedule();
     }
-
-    watch(canvasRef, (canvas, _, onCleanup) => {
-        if (!canvas) {
-            contextRef.value = undefined;
-            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, () => opacity, size, inView], () => restart());
 </script>

package/src/component/FluxVisualFlickeringGrid.vue

@@ -49,60 +49,6 @@
         return context.getImageData(0, 0, 1, 1).data;
     });
 
-    function draw(context: CanvasRenderingContext2D, width: number, height: number, columns: number, rows: number, squares: Float32Array, dpr: number): void {
-        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) {
-                const opacity = squares[i * rows + j];
-                context.fillStyle = `rgb(${r} ${g} ${b} / ${opacity})`;
-                context.fillRect(
-                    (i * (size + gap) + width / 2 - (columns / 2 * (size + gap) - gap / 2)) * dpr,
-                    (j * (size + gap) + height / 2 - (rows / 2 * (size + gap) - gap / 2)) * dpr,
-                    size * dpr,
-                    size * dpr
-                );
-            }
-        }
-    }
-
-    function setup(canvas: HTMLCanvasElement) {
-        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 / (size + gap));
-        const rows = Math.ceil(height / (size + gap));
-        const squares = new Float32Array(columns * rows);
-
-        for (let i = 0; i < squares.length; ++i) {
-            squares[i] = mulberry.next() * maxOpacity;
-        }
-
-        return {
-            width,
-            height,
-            columns,
-            rows,
-            squares,
-            dpr
-        };
-    }
-
-    function tick(squares: Float32Array, delta: number): void {
-        for (let i = 0; i < squares.length; ++i) {
-            if (mulberry.next() < flickerChance * delta) {
-                squares[i] = mulberry.next() * maxOpacity;
-            }
-        }
-    }
-
     watch([canvasRef, inView], ([canvas, inView], _, onCleanup) => {
         if (!canvas || !inView) {
             return;
@@ -156,4 +102,58 @@
             cancelAnimationFrame(frame);
         });
     }, {immediate: true});
+
+    function draw(context: CanvasRenderingContext2D, width: number, height: number, columns: number, rows: number, squares: Float32Array, dpr: number): void {
+        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) {
+                const opacity = squares[i * rows + j];
+                context.fillStyle = `rgb(${r} ${g} ${b} / ${opacity})`;
+                context.fillRect(
+                    (i * (size + gap) + width / 2 - (columns / 2 * (size + gap) - gap / 2)) * dpr,
+                    (j * (size + gap) + height / 2 - (rows / 2 * (size + gap) - gap / 2)) * dpr,
+                    size * dpr,
+                    size * dpr
+                );
+            }
+        }
+    }
+
+    function setup(canvas: HTMLCanvasElement) {
+        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 / (size + gap));
+        const rows = Math.ceil(height / (size + gap));
+        const squares = new Float32Array(columns * rows);
+
+        for (let i = 0; i < squares.length; ++i) {
+            squares[i] = mulberry.next() * maxOpacity;
+        }
+
+        return {
+            width,
+            height,
+            columns,
+            rows,
+            squares,
+            dpr
+        };
+    }
+
+    function tick(squares: Float32Array, delta: number): void {
+        for (let i = 0; i < squares.length; ++i) {
+            if (mulberry.next() < flickerChance * delta) {
+                squares[i] = mulberry.next() * maxOpacity;
+            }
+        }
+    }
 </script>

package/src/component/FluxVisualHighlighter.vue

@@ -48,10 +48,10 @@
         default(): any;
     }>();
 
-    const group = useHighlighterGroupInjection();
-
     const targetRef = useTemplateRef('target');
 
+    const group = useHighlighterGroupInjection();
+
     // Standalone in-view tracking. In a group the parent owns the reveal timing,
     // so no observer is set up at all.
     const inView = group ? shallowRef(true) : useInView(targetRef, {initial: !whenInView});
@@ -71,6 +71,39 @@
     let shownTimer: number | undefined;
     let revealed = false;
 
+    // The annotation type is immutable, so any prop change rebuilds it from scratch.
+    watch([effectiveVariant, effectiveColor, effectiveStrokeWidth, effectiveAnimationDuration, effectiveIterations, effectivePadding, effectiveMultiline], () => build());
+
+    // Standalone reveal once the element scrolls into view (whenInView).
+    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;
+    });
+
     // rough-notation has no completion callback, so shown is emitted after the
     // draw animation's duration, or immediately when it draws without animation.
     function emitShown(): void {
@@ -177,39 +210,6 @@
         observer.observe(document.body);
     }
 
-    onMounted(() => {
-        const element = targetRef.value;
-
-        if (group && element) {
-            entry = {element, getAnnotation: () => annotation};
-            group.add(entry);
-        }
-
-        build();
-    });
-
-    // The annotation type is immutable, so any prop change rebuilds it from scratch.
-    watch([effectiveVariant, effectiveColor, effectiveStrokeWidth, effectiveAnimationDuration, effectiveIterations, effectivePadding, effectiveMultiline], () => build());
-
-    // Standalone reveal once the element scrolls into view (whenInView).
-    watch(inView, () => {
-        if (!group) {
-            reveal();
-        }
-    });
-
-    onBeforeUnmount(() => {
-        if (group && entry) {
-            group.remove(entry);
-            entry = null;
-        }
-
-        window.clearTimeout(shownTimer);
-        stopSettleWatch();
-        annotation?.remove();
-        annotation = null;
-    });
-
     defineExpose({
         hide,
         replay,

package/src/component/FluxVisualNumberFlow.vue

@@ -48,6 +48,62 @@
 
     const CUBIC_BEZIER_PATTERN = /^cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)$/;
 
+    // Fallback for an unrecognised easing value, matching the --swift-out default.
+    const swiftOutEasing = cubicBezier(0.55, 0, 0.1, 1);
+
+    const labelRef = useTemplateRef('label');
+
+    let frame = 0;
+    let current = animateOnMount ? 0 : value;
+
+    // Resolve the easing prop to a plain (t) => number function the tween can
+    // sample: functions pass through, keywords map to the table above and a
+    // cubic-bezier(...) string is parsed into a solver, falling back to swift-out.
+    const easingFunction = computed<NumberFlowEasingFunction>(() => {
+        if (typeof easing === 'function') {
+            return easing;
+        }
+
+        const keyword = EASINGS[easing as NumberFlowEasingKeyword];
+
+        if (keyword) {
+            return keyword;
+        }
+
+        return parseCubicBezier(easing) ?? swiftOutEasing;
+    });
+
+    // Default to whole numbers so a mid-tween value never sprouts stray decimals.
+    // Currency, percentage and fractional displays opt in through `format`.
+    const formatter = computed(() => new Intl.NumberFormat(locale, format ?? {maximumFractionDigits: 0}));
+
+    // Rendered once for SSR / first paint only. The engine owns the span's text
+    // after mount, so this must NOT be reactive - a reactive {{ value }} would make
+    // Vue re-patch the text node every frame and wipe the tween. The accessible
+    // name stays current through the reactive :aria-label binding.
+    const initialText = formatter.value.format(animateOnMount ? 0 : value);
+
+    // Screen readers always read the final, settled value rather than the
+    // intermediate frames streaming past on screen.
+    const accessibleValue = computed(() => formatter.value.format(value));
+
+    // Tween from wherever the display currently sits, so a value that changes
+    // mid-tween keeps rolling smoothly instead of jumping.
+    watch(() => value, next => tween(current, next));
+
+    // Re-render in place when the locale or format changes.
+    watch(formatter, () => render(current));
+
+    onMounted(() => {
+        if (animateOnMount) {
+            tween(0, value);
+        } else {
+            render(value);
+        }
+    });
+
+    onBeforeUnmount(cancel);
+
     // Evaluate a cubic-bezier(x1, y1, x2, y2) timing function in JS. The control
     // points describe x(t) and y(t); for a given progress we need y at the t where
     // x(t) === progress. x is solved with Newton-Raphson and a bisection fallback,
@@ -132,45 +188,6 @@
         return cubicBezier(Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]));
     }
 
-    // Fallback for an unrecognised easing value, matching the --swift-out default.
-    const swiftOutEasing = cubicBezier(0.55, 0, 0.1, 1);
-
-    // Resolve the easing prop to a plain (t) => number function the tween can
-    // sample: functions pass through, keywords map to the table above and a
-    // cubic-bezier(...) string is parsed into a solver, falling back to swift-out.
-    const easingFunction = computed<NumberFlowEasingFunction>(() => {
-        if (typeof easing === 'function') {
-            return easing;
-        }
-
-        const keyword = EASINGS[easing as NumberFlowEasingKeyword];
-
-        if (keyword) {
-            return keyword;
-        }
-
-        return parseCubicBezier(easing) ?? swiftOutEasing;
-    });
-
-    // Default to whole numbers so a mid-tween value never sprouts stray decimals.
-    // Currency, percentage and fractional displays opt in through `format`.
-    const formatter = computed(() => new Intl.NumberFormat(locale, format ?? {maximumFractionDigits: 0}));
-
-    // Rendered once for SSR / first paint only. The engine owns the span's text
-    // after mount, so this must NOT be reactive - a reactive {{ value }} would make
-    // Vue re-patch the text node every frame and wipe the tween. The accessible
-    // name stays current through the reactive :aria-label binding.
-    const initialText = formatter.value.format(animateOnMount ? 0 : value);
-
-    // Screen readers always read the final, settled value rather than the
-    // intermediate frames streaming past on screen.
-    const accessibleValue = computed(() => formatter.value.format(value));
-
-    const labelRef = useTemplateRef('label');
-
-    let frame = 0;
-    let current = animateOnMount ? 0 : value;
-
     function render(next: number): void {
         current = next;
 
@@ -215,21 +232,4 @@
 
         frame = requestAnimationFrame(step);
     }
-
-    onMounted(() => {
-        if (animateOnMount) {
-            tween(0, value);
-        } else {
-            render(value);
-        }
-    });
-
-    // Tween from wherever the display currently sits, so a value that changes
-    // mid-tween keeps rolling smoothly instead of jumping.
-    watch(() => value, next => tween(current, next));
-
-    // Re-render in place when the locale or format changes.
-    watch(formatter, () => render(current));
-
-    onBeforeUnmount(cancel);
 </script>

package/src/component/FluxVisualSlotText.vue

@@ -82,13 +82,35 @@
     let revertTimeout: number | undefined;
     let restingText: string | undefined;
 
-    const glyph = (char: string): string => char === ' ' ? NBSP : char;
+    watch(() => text, value => set(value));
+
+    onMounted(() => {
+        const element = labelRef.value;
+
+        if (element) {
+            buildSlotText(element, text);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        window.clearTimeout(revertTimeout);
+
+        const element = labelRef.value;
+
+        if (element) {
+            clearSlotText(element, text);
+        }
+    });
+
+    function glyph(char: string): string {
+        return char === ' ' ? NBSP : char;
+    }
 
     // Sweep the hue across the line so the roll lands as a chromatic spectrum.
-    const chromaticColor = (index: number, total: number): string => {
+    function chromaticColor(index: number, total: number): string {
         const t = total <= 1 ? 0 : index / (total - 1);
         return `hsl(${(t * 320) % 360} 92% 60%)`;
-    };
+    }
 
     function baseOptions(): AnimateOptions {
         return {
@@ -430,26 +452,6 @@
         }, revertAfter);
     }
 
-    onMounted(() => {
-        const element = labelRef.value;
-
-        if (element) {
-            buildSlotText(element, text);
-        }
-    });
-
-    watch(() => text, value => set(value));
-
-    onBeforeUnmount(() => {
-        window.clearTimeout(revertTimeout);
-
-        const element = labelRef.value;
-
-        if (element) {
-            clearSlotText(element, text);
-        }
-    });
-
     defineExpose({
         flash,
         set

package/src/component/FluxVisualTextScramble.vue

@@ -22,6 +22,10 @@
         fixed: boolean;
     };
 
+    const emit = defineEmits<{
+        finished: [];
+    }>();
+
     const {
         text,
         characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
@@ -38,10 +42,6 @@
         readonly stagger?: number;
     }>();
 
-    const emit = defineEmits<{
-        finished: [];
-    }>();
-
     // Rendered once for SSR / first paint only. The engine owns the span's text
     // after mount, so this must NOT be reactive - a reactive {{ text }} would make
     // Vue re-patch the text node every frame and wipe the scramble. The accessible
@@ -53,6 +53,10 @@
     let frame = 0;
     let currentText = text;
 
+    watch(() => text, value => set(value));
+
+    onBeforeUnmount(cancel);
+
     function cancel(): void {
         if (frame) {
             cancelAnimationFrame(frame);
@@ -157,10 +161,6 @@
         scramble(element, currentText, currentText, true);
     }
 
-    watch(() => text, value => set(value));
-
-    onBeforeUnmount(cancel);
-
     defineExpose({
         replay,
         set