@flux-ui/visuals 4.0.0-beta.1 → 4.0.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/visuals",
     "description": "Visual effect components for the Flux UI library.",
-    "version": "4.0.0-beta.1",
+    "version": "4.0.0-beta.3",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -48,24 +48,27 @@
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "dependencies": {
-        "@basmilius/common": "^3.55.0",
-        "@basmilius/utils": "^3.55.0",
-        "@flux-ui/internals": "4.0.0-beta.1",
-        "@flux-ui/types": "4.0.0-beta.1",
+        "@flux-ui/types": "^4.0.0-beta.3",
         "clsx": "^2.1.1",
         "rough-notation": "^0.5.1"
     },
     "peerDependencies": {
+        "@basmilius/common": "^3.58.0",
+        "@basmilius/utils": "^3.58.0",
+        "@flux-ui/internals": "^4.0.0-beta.3",
+        "luxon": "^3.7.2",
         "vue": "^3.6.0-rc.2"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.55.0",
+        "@basmilius/common": "^3.58.0",
+        "@basmilius/utils": "^3.58.0",
+        "@basmilius/vite-preset": "^3.58.0",
         "@types/node": "^26.1.2",
         "@vitejs/plugin-vue": "^6.0.8",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "6.0.3",
-        "vite": "^8.1.5",
+        "vite": "^8.2.0",
         "vue-tsc": "^3.3.8"
     }
 }

package/src/component/FluxVisualAnimatedColors.vue

@@ -8,10 +8,9 @@
 <script
     lang="ts"
     setup>
-    import { useComponentId } from '@basmilius/common';
-    import { mulberry32 } from '@basmilius/utils';
-    import { prefersReducedMotion, useInView } from '@flux-ui/internals';
-    import { computed, onBeforeUnmount, ref, unref, useTemplateRef, watch } from 'vue';
+    import { useInView } from '@basmilius/common';
+    import { mulberry32, prefersReducedMotion } from '@basmilius/utils';
+    import { computed, onBeforeUnmount, ref, unref, useId, useTemplateRef, watch } from 'vue';
     import $style from '~flux/visuals/css/component/Visual.module.scss';
 
     type Polygon = [number, number, string, PolygonPoint[]];
@@ -37,7 +36,7 @@
     const tick = ref(0);
     const size = ref<{ width: number; height: number; } | null>(null);
 
-    const componentId = useComponentId();
+    const instanceId = useId();
     const inView = useInView(canvasRef, {initial: true});
     const reducedMotion = prefersReducedMotion();
 
@@ -46,7 +45,7 @@
             return [];
         }
 
-        const mulberry = mulberry32(seed ?? componentId.value);
+        const mulberry = mulberry32(seed ?? hashId(instanceId));
         const polygons: Polygon[] = [];
 
         for (const color of colors) {
@@ -183,4 +182,15 @@
 
         schedule();
     }
+
+    // mulberry32 seeds on a number, so the id becomes one.
+    function hashId(value: string): number {
+        let hash = 0;
+
+        for (let index = 0; index < value.length; index++) {
+            hash = (hash * 31 + value.charCodeAt(index)) | 0;
+        }
+
+        return hash;
+    }
 </script>

package/src/component/FluxVisualAttention.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { flattenVNodeTree, prefersReducedMotion } from '@flux-ui/internals';
+    import { prefersReducedMotion } from '@basmilius/utils';
+    import { flattenVNodeTree } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { cloneVNode, defineComponent, Fragment, h, onBeforeUnmount, type PropType, ref, watch } from 'vue';
     import $style from '~flux/visuals/css/component/Attention.module.scss';

package/src/component/FluxVisualBorderBeam.vue

@@ -23,8 +23,9 @@
 <script
     lang="ts"
     setup>
-    import { useInView } from '@flux-ui/internals';
-    import type { BorderBeamVariant } from '@flux-ui/types';
+    import { useInView } from '@basmilius/common';
+    import { clamp } from '@basmilius/utils';
+    import type { FluxVisualBorderBeamVariant } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, ref, unref, useTemplateRef, watch } from 'vue';
     import { useBorderBeamPulse } from '~flux/visuals/composable/private';
@@ -56,14 +57,14 @@
         readonly saturation?: number;
         readonly staticColors?: boolean;
         readonly strength?: number;
-        readonly variant?: BorderBeamVariant;
+        readonly variant?: FluxVisualBorderBeamVariant;
     }>();
 
     defineSlots<{
         default(): any;
     }>();
 
-    const VARIANT_CLASSES: Record<BorderBeamVariant, string> = {
+    const VARIANT_CLASSES: Record<FluxVisualBorderBeamVariant, string> = {
         'sm': $style.sm,
         'md': $style.md,
         'line': $style.line,
@@ -131,8 +132,6 @@
             return;
         }
 
-        const clamp = (value: number): number => Math.max(.35, Math.min(4, value));
-
         const measure = (): void => {
             const rect = child.getBoundingClientRect();
 
@@ -140,8 +139,8 @@
                 return;
             }
 
-            const x = +clamp(rect.width / 350).toFixed(3);
-            const y = +clamp(rect.height / 140).toFixed(3);
+            const x = +clamp(rect.width / 350, .35, 4).toFixed(3);
+            const y = +clamp(rect.height / 140, .35, 4).toFixed(3);
 
             if (glowScale.value?.x !== x || glowScale.value?.y !== y) {
                 glowScale.value = {x, y};

package/src/component/FluxVisualFlickeringGrid.vue

@@ -8,8 +8,8 @@
 <script
     lang="ts"
     setup>
-    import { mulberry32 } from '@basmilius/utils';
-    import { prefersReducedMotion, useInView } from '@flux-ui/internals';
+    import { useInView } from '@basmilius/common';
+    import { mulberry32, prefersReducedMotion } from '@basmilius/utils';
     import { computed, unref, useTemplateRef, watch } from 'vue';
     import $style from '~flux/visuals/css/component/Visual.module.scss';
 

package/src/component/FluxVisualHighlighter.vue

@@ -9,8 +9,9 @@
 <script
     lang="ts"
     setup>
-    import { prefersReducedMotion, useInView } from '@flux-ui/internals';
-    import type { HighlighterVariant } from '@flux-ui/types';
+    import { useInView } from '@basmilius/common';
+    import { prefersReducedMotion } from '@basmilius/utils';
+    import type { FluxVisualHighlighterVariant } from '@flux-ui/types';
     import { annotate } from 'rough-notation';
     import { computed, onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue';
     import { type HighlighterGroupEntry, useHighlighterGroupInjection } from '~flux/visuals/composable/private';
@@ -34,7 +35,7 @@
         multiline,
         whenInView = false
     } = defineProps<{
-        readonly variant?: HighlighterVariant;
+        readonly variant?: FluxVisualHighlighterVariant;
         readonly color?: string;
         readonly strokeWidth?: number;
         readonly animationDuration?: number;

package/src/component/FluxVisualHighlighterGroup.vue

@@ -7,11 +7,11 @@
 <script
     lang="ts"
     setup>
-    import type { HighlighterGroupProps } from '@flux-ui/types';
+    import type { FluxVisualHighlighterGroupProps } from '@flux-ui/types';
     import { useHighlighterGroup } from '~flux/visuals/composable/private';
     import $style from '~flux/visuals/css/component/Highlighter.module.scss';
 
-    const props = defineProps<HighlighterGroupProps>();
+    const props = defineProps<FluxVisualHighlighterGroupProps>();
 
     defineSlots<{
         default(): any;

package/src/component/FluxVisualNumberFlow.vue

@@ -8,7 +8,7 @@
 <script
     lang="ts"
     setup>
-    import { prefersReducedMotion } from '@flux-ui/internals';
+    import { prefersReducedMotion } from '@basmilius/utils';
     import { computed, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
     import $style from '~flux/visuals/css/component/NumberFlow.module.scss';
 

package/src/component/FluxVisualSlotText.vue

@@ -7,7 +7,7 @@
 <script
     lang="ts"
     setup>
-    import { prefersReducedMotion } from '@flux-ui/internals';
+    import { prefersReducedMotion } from '@basmilius/utils';
     import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
     import $style from '~flux/visuals/css/component/SlotText.module.scss';
 

package/src/component/FluxVisualTextScramble.vue

@@ -8,7 +8,7 @@
 <script
     lang="ts"
     setup>
-    import { prefersReducedMotion } from '@flux-ui/internals';
+    import { prefersReducedMotion } from '@basmilius/utils';
     import { onBeforeUnmount, useTemplateRef, watch } from 'vue';
     import $style from '~flux/visuals/css/component/TextScramble.module.scss';
 

package/src/composable/private/useBorderBeamPulse.ts

@@ -1,5 +1,5 @@
-import { prefersReducedMotion } from '@flux-ui/internals';
-import type { BorderBeamVariant } from '@flux-ui/types';
+import { prefersReducedMotion } from '@basmilius/utils';
+import type { FluxVisualBorderBeamVariant } from '@flux-ui/types';
 import { type Ref, unref, watchEffect } from 'vue';
 
 type PulseOscillator = {
@@ -163,7 +163,7 @@ type UseBorderBeamPulseOptions = {
     readonly elementRef: Ref<HTMLElement | null>;
     readonly enabled: Ref<boolean>;
     readonly staticColors: Ref<boolean>;
-    readonly variant: Ref<BorderBeamVariant>;
+    readonly variant: Ref<FluxVisualBorderBeamVariant>;
 };
 
 /**

package/src/composable/private/useHighlighterGroup.ts

@@ -1,4 +1,4 @@
-import type { HighlighterGroupProps } from '@flux-ui/types';
+import type { FluxVisualHighlighterGroupProps } from '@flux-ui/types';
 import { annotationGroup } from 'rough-notation';
 import { inject, type InjectionKey, onScopeDispose, provide } from 'vue';
 
@@ -10,7 +10,7 @@ export type HighlighterGroupEntry = {
 };
 
 export type HighlighterGroupContext = {
-    readonly defaults: HighlighterGroupProps;
+    readonly defaults: FluxVisualHighlighterGroupProps;
     add(entry: HighlighterGroupEntry): void;
     remove(entry: HighlighterGroupEntry): void;
     notify(): void;
@@ -47,7 +47,7 @@ export function useHighlighterGroupInjection(): HighlighterGroupContext | null {
  * @author Bas Milius <bas@mili.us>
  * @since 1.0.0
  */
-export default function useHighlighterGroup(props: HighlighterGroupProps): void {
+export default function useHighlighterGroup(props: FluxVisualHighlighterGroupProps): void {
     const whenInView = props.whenInView ?? false;
     const entries = new Set<HighlighterGroupEntry>();