fancy-ui-svelte 0.4.0 → 0.4.1

package/dist/fancy-ui/animated-beam/README.md

@@ -12,27 +12,6 @@ Creates animated SVG beams that connect two elements with smooth gradients and c
 - Reversible animation direction
 - Position offsets for fine-tuning
 
-## Implementation Notes
-
-### Vue → Svelte Conversions
-- `ref()` → `$state()`
-- `computed()` → `$derived()`
-- `watchEffect()` → `$effect()` (via `onMount`)
-- Template refs → `bind:this`
-- Props handling with destructuring defaults
-
-### Key Differences
-1. **Element References**: Svelte uses `bind:this` instead of Vue's `ref` template attribute
-2. **Lifecycle**: Setup logic moved to `onMount` with cleanup return
-3. **Derived Values**: Functions returning derived values (x1, x2, y1, y2) instead of computed refs
-4. **Conditional Rendering**: Used `{#if}` blocks to ensure refs are defined before rendering beams
-
-### Implementation Details
-- ResizeObserver for responsive path updates
-- SVG path calculation using quadratic Bezier curves (Q command)
-- Direction detection for vertical/horizontal beams
-- Unique gradient IDs to prevent conflicts with multiple instances
-
 ## Demo
 See `/demo/animated-beam` for usage examples.
 

package/dist/fancy-ui/confetti/Confetti.svelte

@@ -11,7 +11,7 @@
 	interface Props {
 		options?: ConfettiOptions;
 		globalOptions?: ConfettiGlobalOptions;
-		manualstart?: boolean;
+		manualStart?: boolean;
 		class?: string;
 		children?: Snippet;
 	}
@@ -19,7 +19,7 @@
 	let {
 		options = {},
 		globalOptions = {},
-		manualstart = false,
+		manualStart = false,
 		class: className = "",
 		children,
 	}: Props = $props();
@@ -39,7 +39,7 @@
 			resize: true,
 		});
 
-		if (!manualstart) {
+		if (!manualStart) {
 			fire();
 		}
 

package/dist/fancy-ui/confetti/Confetti.svelte.d.ts

@@ -3,7 +3,7 @@ import type { GlobalOptions as ConfettiGlobalOptions, Options as ConfettiOptions
 interface Props {
     options?: ConfettiOptions;
     globalOptions?: ConfettiGlobalOptions;
-    manualstart?: boolean;
+    manualStart?: boolean;
     class?: string;
     children?: Snippet;
 }

package/dist/fancy-ui/confetti/README.md

@@ -11,7 +11,7 @@ Canvas wrapper that creates a confetti instance.
 |------|------|---------|-------------|
 | `options` | `ConfettiOptions` | `{}` | Default confetti options |
 | `globalOptions` | `ConfettiGlobalOptions` | `{}` | Canvas creation options |
-| `manualstart` | `boolean` | `false` | Skip auto-fire on mount |
+| `manualStart` | `boolean` | `false` | Skip auto-fire on mount |
 | `class` | `string` | `''` | Canvas CSS classes |
 
 ### ConfettiButton

package/dist/fancy-ui/fluid-cursor/FluidCursor.svelte

@@ -21,8 +21,11 @@
 		splatForce?: number;
 		shading?: boolean;
 		colorUpdateSpeed?: number;
-		backColor?: ColorRGB;
+		backColor?: ColorRGB | string;
 		transparent?: boolean;
+		fluidColor?: string;
+		fluidColors?: string[];
+		colorIntensity?: number;
 		class?: string;
 	}
 
@@ -41,9 +44,32 @@
 		colorUpdateSpeed = 10,
 		backColor = { r: 0.5, g: 0, b: 0 },
 		transparent = true,
+		fluidColor,
+		fluidColors,
+		colorIntensity = 0.15,
 		class: className = "",
 	}: Props = $props();
 
+	function hexToRgb(hex: string): ColorRGB {
+		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+		if (!result) {
+			console.warn(
+				`[FluidCursor] Invalid hex color: "${hex}". Expected format: "#rrggbb". Falling back to white.`
+			);
+			return { r: 1, g: 1, b: 1 };
+		}
+		return {
+			r: parseInt(result[1], 16) / 255,
+			g: parseInt(result[2], 16) / 255,
+			b: parseInt(result[3], 16) / 255,
+		};
+	}
+
+	const clampedColorIntensity = Math.max(0, Math.min(1, colorIntensity));
+
+	const resolvedBackColor: ColorRGB =
+		typeof backColor === "string" ? hexToRgb(backColor) : backColor;
+
 	let canvasRef: HTMLCanvasElement;
 
 	onMount(() => {
@@ -94,7 +120,7 @@
 			SHADING: shading,
 			COLOR_UPDATE_SPEED: colorUpdateSpeed,
 			PAUSED: false,
-			BACK_COLOR: backColor,
+			BACK_COLOR: resolvedBackColor,
 			TRANSPARENT: transparent,
 		};
 
@@ -936,8 +962,40 @@
 
 		let lastUpdateTime = Date.now();
 		let colorUpdateTimer = 0.0;
+		let colorIndex = 0;
 		let animationFrameId: number;
 
+		// Cached pre-scaled colors to avoid re-parsing hex on every splat
+		let cachedFluidColorHex: string | undefined;
+		let cachedFluidColor: ColorRGB | null = null;
+		let cachedFluidColorsRef: string[] | undefined;
+		let cachedFluidColorsScaled: ColorRGB[] = [];
+
+		function getScaledColor(hex: string): ColorRGB {
+			const { r, g, b } = hexToRgb(hex);
+			return {
+				r: r * clampedColorIntensity,
+				g: g * clampedColorIntensity,
+				b: b * clampedColorIntensity,
+			};
+		}
+
+		function getCachedFluidColor(hex: string): ColorRGB {
+			if (cachedFluidColor === null || cachedFluidColorHex !== hex) {
+				cachedFluidColorHex = hex;
+				cachedFluidColor = getScaledColor(hex);
+			}
+			return cachedFluidColor;
+		}
+
+		function getCachedFluidColors(colors: string[]): ColorRGB[] {
+			if (cachedFluidColorsRef !== colors) {
+				cachedFluidColorsRef = colors;
+				cachedFluidColorsScaled = colors.map(getScaledColor);
+			}
+			return cachedFluidColorsScaled;
+		}
+
 		function updateFrame() {
 			const dt = calcDeltaTime();
 			if (resizeCanvas()) initFramebuffers();
@@ -1232,10 +1290,19 @@
 		}
 
 		function generateColor(): ColorRGB {
+			if (fluidColor) {
+				return getCachedFluidColor(fluidColor);
+			}
+			if (fluidColors && fluidColors.length > 0) {
+				const colors = getCachedFluidColors(fluidColors);
+				const idx = colorIndex % colors.length;
+				colorIndex++;
+				return colors[idx];
+			}
 			const c = HSVtoRGB(Math.random(), 1.0, 1.0);
-			c.r *= 0.15;
-			c.g *= 0.15;
-			c.b *= 0.15;
+			c.r *= clampedColorIntensity;
+			c.g *= clampedColorIntensity;
+			c.b *= clampedColorIntensity;
 			return c;
 		}
 

package/dist/fancy-ui/fluid-cursor/FluidCursor.svelte.d.ts

@@ -16,8 +16,11 @@ interface Props {
     splatForce?: number;
     shading?: boolean;
     colorUpdateSpeed?: number;
-    backColor?: ColorRGB;
+    backColor?: ColorRGB | string;
     transparent?: boolean;
+    fluidColor?: string;
+    fluidColors?: string[];
+    colorIntensity?: number;
     class?: string;
 }
 declare const FluidCursor: import("svelte").Component<Props, {}, "">;

package/dist/fancy-ui/fluid-cursor/FluidCursor.test.js

@@ -1,5 +1,5 @@
 import { render, cleanup } from "@testing-library/svelte";
-import { afterEach, describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
 import FluidCursor from "./FluidCursor.svelte";
 describe("FluidCursor", () => {
     afterEach(cleanup);
@@ -38,4 +38,37 @@ describe("FluidCursor", () => {
         const div = container.firstElementChild;
         expect(div?.className).toContain("my-fluid");
     });
+    describe("color props", () => {
+        it("renders without error when fluidColor is provided", () => {
+            const { container } = render(FluidCursor, { props: { fluidColor: "#00ffcc" } });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+        it("renders without error when fluidColors is provided", () => {
+            const { container } = render(FluidCursor, {
+                props: { fluidColors: ["#ff0080", "#00ffcc", "#7700ff"] },
+            });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+        it("renders without error when fluidColor and fluidColors are both provided (fluidColor takes priority)", () => {
+            // Both props accepted without throw — fluidColor priority is exercised at runtime
+            const { container } = render(FluidCursor, {
+                props: { fluidColor: "#ff0000", fluidColors: ["#00ffcc", "#7700ff"] },
+            });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+        it("renders without error when backColor is a hex string", () => {
+            const { container } = render(FluidCursor, { props: { backColor: "#1a1a2e" } });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+        it("warns and falls back when an invalid hex string is passed to backColor", () => {
+            const warn = vi.spyOn(console, "warn").mockImplementation(() => { });
+            render(FluidCursor, { props: { backColor: "not-a-color" } });
+            expect(warn).toHaveBeenCalledWith(expect.stringContaining("[FluidCursor] Invalid hex color"));
+            warn.mockRestore();
+        });
+        it("renders without error when colorIntensity is out of [0,1] range (clamped internally)", () => {
+            const { container } = render(FluidCursor, { props: { colorIntensity: 5 } });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+    });
 });