fancy-ui-svelte 0.2.1

package/dist/fancy-ui/displacement-text/DisplacementText.test.js

@@ -0,0 +1,144 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import DisplacementText from "./DisplacementText.svelte";
+// Holds the last renderer instance created by the mock
+const lastMock = { renderer: null };
+// Three.js uses WebGL which is not available in jsdom — mock the module
+vi.mock("three", () => {
+    function Vector2() {
+        return { x: 0, y: 0 };
+    }
+    function Vector3() {
+        return { x: 0, y: 0, z: 0, copy: vi.fn() };
+    }
+    function CanvasTexture() {
+        return { needsUpdate: false, dispose: vi.fn() };
+    }
+    function ShaderMaterial() {
+        return {
+            uniforms: { uTexture: { value: null }, uDisplacement: { value: { copy: vi.fn() } } },
+            dispose: vi.fn(),
+        };
+    }
+    function PlaneGeometry() {
+        return { dispose: vi.fn() };
+    }
+    function MeshBasicMaterial() {
+        return { dispose: vi.fn() };
+    }
+    function Mesh() {
+        return { rotation: { z: 0 } };
+    }
+    function Scene() {
+        return { background: null, add: vi.fn() };
+    }
+    function OrthographicCamera() {
+        return {
+            position: { set: vi.fn() },
+            left: 0,
+            right: 0,
+            updateProjectionMatrix: vi.fn(),
+            lookAt: vi.fn(),
+        };
+    }
+    function Raycaster() {
+        return {
+            setFromCamera: vi.fn(),
+            intersectObject: vi.fn(() => []),
+        };
+    }
+    function WebGLRenderer() {
+        const instance = {
+            setClearColor: vi.fn(),
+            setPixelRatio: vi.fn(),
+            setSize: vi.fn(),
+            render: vi.fn(),
+            dispose: vi.fn(),
+            domElement: Object.assign(document.createElement("canvas"), {
+                style: { width: "", height: "" },
+            }),
+        };
+        lastMock.renderer = instance;
+        return instance;
+    }
+    return {
+        Scene,
+        OrthographicCamera,
+        WebGLRenderer,
+        PlaneGeometry,
+        ShaderMaterial,
+        Mesh,
+        MeshBasicMaterial,
+        Raycaster,
+        Vector2,
+        Vector3,
+        CanvasTexture,
+        DoubleSide: 2,
+    };
+});
+describe("DisplacementText", () => {
+    afterEach(cleanup);
+    it("renders a div container", () => {
+        const { container } = render(DisplacementText);
+        expect(container.querySelector("div")).toBeTruthy();
+    });
+    it("applies default height class", () => {
+        const { container } = render(DisplacementText);
+        expect(container.querySelector("div")?.className).toContain("h-[400px]");
+    });
+    it("applies additional class", () => {
+        const { container } = render(DisplacementText, { props: { class: "h-[600px]" } });
+        expect(container.querySelector("div")?.className).toContain("h-[600px]");
+    });
+    it("renders with custom text prop", () => {
+        const { container } = render(DisplacementText, { props: { text: "FancyUI" } });
+        expect(container.querySelector("div")).toBeTruthy();
+    });
+    describe("cleanup on unmount", () => {
+        it("removes resize listener", () => {
+            const spy = vi.spyOn(window, "removeEventListener");
+            const { unmount } = render(DisplacementText);
+            unmount();
+            expect(spy).toHaveBeenCalledWith("resize", expect.any(Function));
+            spy.mockRestore();
+        });
+        it("cancels animation frame", () => {
+            const spy = vi.spyOn(window, "cancelAnimationFrame");
+            const { unmount } = render(DisplacementText);
+            unmount();
+            expect(spy).toHaveBeenCalled();
+            spy.mockRestore();
+        });
+        it("disposes renderer", () => {
+            const { unmount } = render(DisplacementText);
+            const renderer = lastMock.renderer;
+            unmount();
+            expect(renderer.dispose).toHaveBeenCalled();
+        });
+    });
+    describe("theme observer", () => {
+        let originalMutationObserver;
+        beforeEach(() => {
+            originalMutationObserver = global.MutationObserver;
+        });
+        afterEach(() => {
+            global.MutationObserver = originalMutationObserver;
+        });
+        it("does not observe document when color prop is provided", () => {
+            const observeSpy = vi.fn();
+            global.MutationObserver = function MutationObserver() {
+                return { observe: observeSpy, disconnect: vi.fn() };
+            };
+            render(DisplacementText, { props: { color: "#ff0000" } });
+            expect(observeSpy).not.toHaveBeenCalled();
+        });
+        it("observes document when no fixed color is provided", () => {
+            const observeSpy = vi.fn();
+            global.MutationObserver = function MutationObserver() {
+                return { observe: observeSpy, disconnect: vi.fn() };
+            };
+            render(DisplacementText);
+            expect(observeSpy).toHaveBeenCalledWith(document.documentElement, expect.objectContaining({ attributes: true, attributeFilter: ["class"] }));
+        });
+    });
+});

package/dist/fancy-ui/displacement-text/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DisplacementText } from "./DisplacementText.svelte";
+export type { DisplacementTextProps } from "./DisplacementText.svelte";

package/dist/fancy-ui/displacement-text/index.js

@@ -0,0 +1 @@
+export { default as DisplacementText } from "./DisplacementText.svelte";

package/dist/fancy-ui/dock/Dock.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import { cn } from "../../utils";
+	import {
+		DOCK_CONTEXT_KEY,
+		type DataOrientation,
+		type Direction,
+		type DockContext,
+	} from "./types";
+
+	interface Props {
+		class?: string;
+		magnification?: number;
+		distance?: number;
+		direction?: Direction;
+		orientation?: DataOrientation;
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		class: className = "",
+		magnification = 60,
+		distance = 140,
+		direction = "middle",
+		orientation = "horizontal",
+		children,
+	}: Props = $props();
+
+	// Use object with `current` property so children can read reactive updates
+	let mouseX = $state({ current: Infinity });
+	let mouseY = $state({ current: Infinity });
+
+	const context: DockContext = {
+		get mouseX() {
+			return mouseX;
+		},
+		get mouseY() {
+			return mouseY;
+		},
+		get magnification() {
+			return magnification;
+		},
+		get distance() {
+			return distance;
+		},
+		get orientation() {
+			return orientation;
+		},
+	};
+
+	setContext(DOCK_CONTEXT_KEY, context);
+
+	function onMouseMove(e: MouseEvent) {
+		requestAnimationFrame(() => {
+			mouseX.current = e.pageX;
+			mouseY.current = e.pageY;
+		});
+	}
+
+	function onMouseLeave() {
+		requestAnimationFrame(() => {
+			mouseX.current = Infinity;
+			mouseY.current = Infinity;
+		});
+	}
+
+	let directionClass = $derived(
+		direction === "top" ? "items-start" : direction === "bottom" ? "items-end" : "items-center"
+	);
+</script>
+
+<div
+	class={cn(
+		"mx-auto flex h-[58px] w-max gap-4 rounded-2xl border p-2 backdrop-blur-md transition-all supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10",
+		orientation === "vertical" && "h-max w-[58px] flex-col",
+		directionClass,
+		className
+	)}
+	onmousemove={onMouseMove}
+	onmouseleave={onMouseLeave}
+	role="toolbar"
+	tabindex="0"
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/fancy-ui/dock/Dock.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type DataOrientation, type Direction } from "./types";
+interface Props {
+    class?: string;
+    magnification?: number;
+    distance?: number;
+    direction?: Direction;
+    orientation?: DataOrientation;
+    children?: import("svelte").Snippet;
+}
+declare const Dock: import("svelte").Component<Props, {}, "">;
+type Dock = ReturnType<typeof Dock>;
+export default Dock;

package/dist/fancy-ui/dock/Dock.test.d.ts

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

package/dist/fancy-ui/dock/Dock.test.js

@@ -0,0 +1,51 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import Dock from "./Dock.svelte";
+describe("Dock", () => {
+    afterEach(cleanup);
+    it("renders a toolbar element", () => {
+        const { container } = render(Dock);
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar).toBeInTheDocument();
+    });
+    it("has backdrop-blur-md class", () => {
+        const { container } = render(Dock);
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("backdrop-blur-md");
+    });
+    it("has rounded-2xl class", () => {
+        const { container } = render(Dock);
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("rounded-2xl");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(Dock, { props: { class: "my-dock" } });
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("my-dock");
+    });
+    it("uses vertical layout when orientation is vertical", () => {
+        const { container } = render(Dock, { props: { orientation: "vertical" } });
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("flex-col");
+    });
+    it("applies items-end class for bottom direction", () => {
+        const { container } = render(Dock, { props: { direction: "bottom" } });
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("items-end");
+    });
+    it("applies items-start class for top direction", () => {
+        const { container } = render(Dock, { props: { direction: "top" } });
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("items-start");
+    });
+    it("applies items-center class for middle direction (default)", () => {
+        const { container } = render(Dock);
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("items-center");
+    });
+    it("has flex class for layout", () => {
+        const { container } = render(Dock);
+        const toolbar = container.querySelector('[role="toolbar"]');
+        expect(toolbar?.className).toContain("flex");
+    });
+});

package/dist/fancy-ui/dock/DockIcon.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+	import { DOCK_CONTEXT_KEY, type DockContext } from "./types";
+
+	interface Props {
+		class?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+
+	const context = getContext<DockContext>(DOCK_CONTEXT_KEY);
+
+	let iconRef: HTMLDivElement | undefined = $state();
+
+	function calculateDistance(): number {
+		if (!iconRef) return Infinity;
+
+		const bounds = iconRef.getBoundingClientRect();
+
+		if (context.orientation === "vertical") {
+			return context.mouseY.current - bounds.y - bounds.height / 2;
+		}
+
+		return context.mouseX.current - bounds.x - bounds.width / 2;
+	}
+
+	let iconWidth = $derived.by(() => {
+		const distanceCalc = calculateDistance();
+
+		if (!context.distance || !context.magnification) return 40;
+
+		if (Math.abs(distanceCalc) < context.distance) {
+			return (1 - Math.abs(distanceCalc) / context.distance) * context.magnification + 40;
+		}
+
+		return 40;
+	});
+</script>
+
+<div
+	bind:this={iconRef}
+	class="flex aspect-square cursor-pointer items-center justify-center rounded-full transition-all duration-200 ease-out {className}"
+	style:width="{iconWidth}px"
+	style:height="{iconWidth}px"
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/fancy-ui/dock/DockIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    children?: import("svelte").Snippet;
+}
+declare const DockIcon: import("svelte").Component<Props, {}, "">;
+type DockIcon = ReturnType<typeof DockIcon>;
+export default DockIcon;

package/dist/fancy-ui/dock/DockSeparator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+	import { cn } from "../../utils";
+	import { DOCK_CONTEXT_KEY, type DockContext } from "./types";
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = "" }: Props = $props();
+
+	const context = getContext<DockContext>(DOCK_CONTEXT_KEY);
+</script>
+
+<div
+	class={cn(
+		"bg-secondary relative block",
+		context.orientation === "vertical" ? "h-0.5 w-4/5" : "h-4/5 w-0.5",
+		className
+	)}
+></div>

package/dist/fancy-ui/dock/DockSeparator.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const DockSeparator: import("svelte").Component<Props, {}, "">;
+type DockSeparator = ReturnType<typeof DockSeparator>;
+export default DockSeparator;

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

@@ -0,0 +1,57 @@
+# Dock
+
+A macOS-style dock component with icon magnification on hover.
+
+## Components
+
+- `Dock` - Main container that tracks mouse position
+- `DockIcon` - Individual dock item with magnification effect
+- `DockSeparator` - Visual separator between icon groups
+
+## Usage
+
+```svelte
+<script>
+  import { Dock, DockIcon, DockSeparator } from '$lib/fancy-ui/dock';
+</script>
+
+<Dock>
+  <DockIcon>
+    <img src="/icon1.svg" class="size-full" alt="Icon" />
+  </DockIcon>
+  <DockSeparator />
+  <DockIcon>
+    <img src="/icon2.svg" class="size-full" alt="Icon" />
+  </DockIcon>
+</Dock>
+```
+
+## Props
+
+### Dock
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | `''` | Additional CSS classes |
+| `magnification` | `number` | `60` | Maximum size increase in pixels |
+| `distance` | `number` | `140` | Mouse distance for magnification effect |
+| `direction` | `'top' \| 'middle' \| 'bottom'` | `'middle'` | Vertical alignment of icons |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Dock orientation |
+
+### DockIcon
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | `''` | Additional CSS classes |
+
+### DockSeparator
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | `''` | Additional CSS classes |
+
+## Implementation Notes
+
+- Uses Svelte context (`setContext`/`getContext`) instead of Vue's provide/inject
+- Mouse position stored in reactive objects (`{ current: number }`) for child reactivity
+- Base icon size is 40px, magnification adds to this

package/dist/fancy-ui/dock/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Dock } from "./Dock.svelte";
+export { default as DockIcon } from "./DockIcon.svelte";
+export { default as DockSeparator } from "./DockSeparator.svelte";
+export * from "./types";

package/dist/fancy-ui/dock/index.js

@@ -0,0 +1,4 @@
+export { default as Dock } from "./Dock.svelte";
+export { default as DockIcon } from "./DockIcon.svelte";
+export { default as DockSeparator } from "./DockSeparator.svelte";
+export * from "./types";

package/dist/fancy-ui/dock/types.d.ts

@@ -0,0 +1,14 @@
+export type DataOrientation = "vertical" | "horizontal";
+export type Direction = "top" | "middle" | "bottom";
+export interface DockContext {
+    mouseX: {
+        current: number;
+    };
+    mouseY: {
+        current: number;
+    };
+    magnification: number;
+    distance: number;
+    orientation: DataOrientation;
+}
+export declare const DOCK_CONTEXT_KEY: unique symbol;

package/dist/fancy-ui/dock/types.js

@@ -0,0 +1 @@
+export const DOCK_CONTEXT_KEY = Symbol("dock-context");

package/dist/fancy-ui/flickering-grid/FlickeringGrid.svelte

@@ -0,0 +1,154 @@
+<script lang="ts" module>
+	/**
+	 * FlickeringGrid - Canvas-based grid with flickering opacity squares
+	 *
+	 * Uses ResizeObserver, IntersectionObserver, and requestAnimationFrame
+	 * for performant rendering with automatic pause when off-screen.
+	 */
+	export interface FlickeringGridProps {
+		/** Size of each grid square in pixels */
+		squareSize?: number;
+		/** Gap between squares in pixels */
+		gridGap?: number;
+		/** Probability of a square changing opacity each second (0-1) */
+		flickerChance?: number;
+		/** Color of the squares (hex format) */
+		color?: string;
+		/** Maximum opacity of squares (0-1) */
+		maxOpacity?: number;
+		/** Fixed width in pixels (defaults to container width) */
+		width?: number;
+		/** Fixed height in pixels (defaults to container height) */
+		height?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let {
+		squareSize = 4,
+		gridGap = 6,
+		flickerChance = 0.3,
+		color = "#000000",
+		maxOpacity = 0.3,
+		width,
+		height,
+		class: className,
+	}: FlickeringGridProps = $props();
+
+	let containerEl: HTMLDivElement;
+	let canvasEl: HTMLCanvasElement;
+
+	function hexToRgba(hex: string): string {
+		const clean = hex.replace(/^#/, "");
+		const bigint = Number.parseInt(clean, 16);
+		const r = (bigint >> 16) & 255;
+		const g = (bigint >> 8) & 255;
+		const b = bigint & 255;
+		return `rgba(${r}, ${g}, ${b},`;
+	}
+
+	onMount(() => {
+		const ctx = canvasEl.getContext("2d");
+		if (!ctx) return;
+
+		let isInView = false;
+		let animationFrameId: number | undefined;
+		let lastTime = 0;
+		let cols = 0;
+		let rows = 0;
+		let squares: Float32Array;
+		let dpr = 1;
+
+		function setupCanvas(w: number, h: number) {
+			dpr = window.devicePixelRatio || 1;
+			canvasEl.width = w * dpr;
+			canvasEl.height = h * dpr;
+			canvasEl.style.width = `${w}px`;
+			canvasEl.style.height = `${h}px`;
+
+			cols = Math.floor(w / (squareSize + gridGap));
+			rows = Math.floor(h / (squareSize + gridGap));
+
+			squares = new Float32Array(cols * rows);
+			for (let i = 0; i < squares.length; i++) {
+				squares[i] = Math.random() * maxOpacity;
+			}
+		}
+
+		function updateSquares(deltaTime: number) {
+			for (let i = 0; i < squares.length; i++) {
+				if (Math.random() < flickerChance * deltaTime) {
+					squares[i] = Math.random() * maxOpacity;
+				}
+			}
+		}
+
+		function drawGrid() {
+			const colorPrefix = hexToRgba(color);
+			ctx!.clearRect(0, 0, canvasEl.width, canvasEl.height);
+			for (let i = 0; i < cols; i++) {
+				for (let j = 0; j < rows; j++) {
+					const opacity = squares[i * rows + j];
+					ctx!.fillStyle = `${colorPrefix}${opacity})`;
+					ctx!.fillRect(
+						i * (squareSize + gridGap) * dpr,
+						j * (squareSize + gridGap) * dpr,
+						squareSize * dpr,
+						squareSize * dpr
+					);
+				}
+			}
+		}
+
+		function updateCanvasSize() {
+			const w = width ?? containerEl.clientWidth;
+			const h = height ?? containerEl.clientHeight;
+			setupCanvas(w, h);
+		}
+
+		function animate(time: number) {
+			if (!isInView) return;
+
+			const deltaTime = (time - lastTime) / 1000;
+			lastTime = time;
+
+			updateSquares(deltaTime);
+			drawGrid();
+			animationFrameId = requestAnimationFrame(animate);
+		}
+
+		updateCanvasSize();
+
+		const resizeObserver = new ResizeObserver(() => {
+			updateCanvasSize();
+		});
+
+		const intersectionObserver = new IntersectionObserver(
+			([entry]) => {
+				isInView = entry.isIntersecting;
+				if (isInView) {
+					animationFrameId = requestAnimationFrame(animate);
+				}
+			},
+			{ threshold: 0 }
+		);
+
+		resizeObserver.observe(containerEl);
+		intersectionObserver.observe(canvasEl);
+
+		return () => {
+			if (animationFrameId) cancelAnimationFrame(animationFrameId);
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+		};
+	});
+</script>
+
+<div bind:this={containerEl} class={cn("h-full w-full", className)}>
+	<canvas bind:this={canvasEl} class="pointer-events-none"></canvas>
+</div>

package/dist/fancy-ui/flickering-grid/FlickeringGrid.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * FlickeringGrid - Canvas-based grid with flickering opacity squares
+ *
+ * Uses ResizeObserver, IntersectionObserver, and requestAnimationFrame
+ * for performant rendering with automatic pause when off-screen.
+ */
+export interface FlickeringGridProps {
+    /** Size of each grid square in pixels */
+    squareSize?: number;
+    /** Gap between squares in pixels */
+    gridGap?: number;
+    /** Probability of a square changing opacity each second (0-1) */
+    flickerChance?: number;
+    /** Color of the squares (hex format) */
+    color?: string;
+    /** Maximum opacity of squares (0-1) */
+    maxOpacity?: number;
+    /** Fixed width in pixels (defaults to container width) */
+    width?: number;
+    /** Fixed height in pixels (defaults to container height) */
+    height?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const FlickeringGrid: import("svelte").Component<FlickeringGridProps, {}, "">;
+type FlickeringGrid = ReturnType<typeof FlickeringGrid>;
+export default FlickeringGrid;

package/dist/fancy-ui/flickering-grid/FlickeringGrid.test.d.ts

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