fancy-ui-svelte 0.8.0 → 0.9.1

package/dist/fancy-ui/card-3d/CardContainer.test.js

@@ -0,0 +1,118 @@
+import { render, cleanup, fireEvent } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import CardContainer from "./CardContainer.svelte";
+import CardBody from "./CardBody.svelte";
+import CardItem from "./CardItem.svelte";
+function textSnippet(html) {
+    return createRawSnippet(() => ({ render: () => html }));
+}
+describe("CardContainer", () => {
+    afterEach(cleanup);
+    it("renders the perspective wrapper and the 3d inner container", () => {
+        const { container } = render(CardContainer);
+        const outer = container.firstElementChild;
+        const inner = outer.firstElementChild;
+        expect(outer.getAttribute("style")).toContain("perspective: 1000px");
+        expect(inner.getAttribute("style")).toContain("transform-style: preserve-3d");
+    });
+    it("applies containerClass to the outer wrapper and class to the inner container", () => {
+        const { container } = render(CardContainer, {
+            props: { containerClass: "my-outer", class: "my-inner" },
+        });
+        const outer = container.firstElementChild;
+        const inner = outer.firstElementChild;
+        expect(outer.className).toContain("my-outer");
+        expect(inner.className).toContain("my-inner");
+    });
+    it("renders children content", () => {
+        const { container } = render(CardContainer, {
+            props: { children: textSnippet("<p data-testid='content'>card body</p>") },
+        });
+        expect(container.querySelector("[data-testid='content']")?.textContent).toBe("card body");
+    });
+    it("rotates the inner container on mousemove and resets on mouseleave", async () => {
+        const { container } = render(CardContainer);
+        const inner = container.firstElementChild.firstElementChild;
+        // jsdom's getBoundingClientRect() is all zeros, so rotateY = clientX / 25
+        // and rotateX = clientY / 25 for this component's handler.
+        await fireEvent.mouseMove(inner, { clientX: 50, clientY: 25 });
+        expect(inner.style.transform).toBe("rotateY(2deg) rotateX(1deg)");
+        await fireEvent.mouseLeave(inner);
+        expect(inner.style.transform).toBe("rotateY(0deg) rotateX(0deg)");
+    });
+});
+describe("CardBody", () => {
+    afterEach(cleanup);
+    it("renders with the fixed 3d-card dimensions", () => {
+        const { container } = render(CardBody);
+        const body = container.firstElementChild;
+        expect(body.className).toContain("h-96");
+        expect(body.className).toContain("w-96");
+        expect(body.getAttribute("style")).toContain("transform-style: preserve-3d");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(CardBody, { props: { class: "my-body" } });
+        const body = container.firstElementChild;
+        expect(body.className).toContain("my-body");
+    });
+    it("renders children content", () => {
+        const { container } = render(CardBody, {
+            props: { children: textSnippet("<span data-testid='inner'>x</span>") },
+        });
+        expect(container.querySelector("[data-testid='inner']")).toBeTruthy();
+    });
+});
+describe("CardItem", () => {
+    afterEach(cleanup);
+    // CardItem reads its hover state from CardContainer via setContext/getContext
+    // under the "card3d:mouseEntered" key. @testing-library/svelte forwards a
+    // `context` mount option straight to Svelte's mount(), so it can be tested
+    // standalone without mounting a full CardContainer tree.
+    function withContext(mouseEntered) {
+        return new Map([["card3d:mouseEntered", () => mouseEntered]]);
+    }
+    it("sits at the zero transform when the container reports no hover", () => {
+        const { container } = render(CardItem, {
+            props: { translateX: 20, rotateZ: 10 },
+            context: withContext(false),
+        });
+        const el = container.firstElementChild;
+        expect(el.style.transform).toContain("translateX(0px)");
+        expect(el.style.transform).toContain("rotateZ(0deg)");
+    });
+    it("applies the configured translate/rotate values once the container reports hover", () => {
+        const { container } = render(CardItem, {
+            props: { translateX: 20, translateY: -10, rotateZ: 10 },
+            context: withContext(true),
+        });
+        const el = container.firstElementChild;
+        expect(el.style.transform).toContain("translateX(20px)");
+        expect(el.style.transform).toContain("translateY(-10px)");
+        expect(el.style.transform).toContain("rotateZ(10deg)");
+    });
+    it("renders the element specified by the as prop", () => {
+        const { container } = render(CardItem, {
+            props: { as: "span" },
+            context: withContext(false),
+        });
+        expect(container.firstElementChild?.tagName.toLowerCase()).toBe("span");
+    });
+    it("defaults to a div and merges custom class names", () => {
+        const { container } = render(CardItem, {
+            props: { class: "my-item" },
+            context: withContext(false),
+        });
+        const el = container.firstElementChild;
+        expect(el.tagName.toLowerCase()).toBe("div");
+        expect(el.className).toContain("my-item");
+        expect(el.className).toContain("w-fit");
+    });
+    it("renders children content", () => {
+        const { container } = render(CardItem, {
+            props: { children: textSnippet("<em data-testid='item-child'>x</em>") },
+            context: withContext(false),
+        });
+        expect(container.querySelector("[data-testid='item-child']")).toBeTruthy();
+    });
+});

package/dist/fancy-ui/card-spotlight/CardSpotlight.test.d.ts

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

package/dist/fancy-ui/card-spotlight/CardSpotlight.test.js

@@ -0,0 +1,58 @@
+import { render, cleanup, fireEvent } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import CardSpotlight from "./CardSpotlight.svelte";
+function textSnippet(html) {
+    return createRawSnippet(() => ({ render: () => html }));
+}
+describe("CardSpotlight", () => {
+    afterEach(cleanup);
+    it("renders the wrapper with the base card classes", () => {
+        const { container } = render(CardSpotlight);
+        const wrapper = container.firstElementChild;
+        expect(wrapper.className).toContain("rounded-xl");
+        expect(wrapper.className).toContain("overflow-hidden");
+    });
+    it("applies custom class names to the wrapper", () => {
+        const { container } = render(CardSpotlight, { props: { class: "my-spotlight" } });
+        const wrapper = container.firstElementChild;
+        expect(wrapper.className).toContain("my-spotlight");
+    });
+    it("applies slotClass to the content wrapper", () => {
+        const { container } = render(CardSpotlight, { props: { slotClass: "my-slot" } });
+        const slot = container.querySelector(".relative.z-10");
+        expect(slot.className).toContain("my-slot");
+    });
+    it("renders children content", () => {
+        const { container } = render(CardSpotlight, {
+            props: { children: textSnippet("<p data-testid='content'>hi</p>") },
+        });
+        expect(container.querySelector("[data-testid='content']")).toBeTruthy();
+    });
+    // The overlay's `style="background: {backgroundStyle}; opacity: {gradientOpacity}"`
+    // attribute never materializes under this repo's vitest+jsdom setup — verified
+    // with a from-scratch minimal component reproduction, unrelated to mouse
+    // tracking or gradientSize/gradientColor: any style attribute shaped like
+    // `style="prop: {dyn}; prop2: value"` on a plain element renders with no
+    // style attribute at all (confirmed via getAttribute, .style.cssText, and
+    // the individual .style.* properties, all empty). Because vite.config.ts
+    // forces `resolve: { conditions: ['browser'] }`, tests compile the same
+    // client output real browsers get, so this is worth a maintainer checking
+    // in an actual browser rather than something to chase further here — see
+    // the gradient/opacity plumbing tests below, which stay on structure only.
+    it("accepts gradientSize/gradientColor/gradientOpacity without throwing and keeps the overlay in the DOM", () => {
+        const { container } = render(CardSpotlight, {
+            props: { gradientSize: 300, gradientColor: "#ff0000", gradientOpacity: 0.5 },
+        });
+        const overlay = container.querySelector(".pointer-events-none.absolute.inset-0");
+        expect(overlay).toBeTruthy();
+    });
+    it("responds to mousemove and mouseleave without throwing", async () => {
+        const { container } = render(CardSpotlight);
+        const wrapper = container.firstElementChild;
+        await fireEvent.mouseMove(wrapper, { clientX: 40, clientY: 30 });
+        await fireEvent.mouseLeave(wrapper);
+        // The awaits above would reject if either handler threw.
+        expect(container.querySelector(".pointer-events-none.absolute.inset-0")).toBeTruthy();
+    });
+});

package/dist/fancy-ui/displacement-text/README.md

@@ -0,0 +1,39 @@
+# DisplacementText
+
+Large text rendered as a Three.js plane whose surface bulges toward the viewer near the cursor, via a vertex-shader displacement driven by raycasting against an invisible hit-plane. The text itself is rasterized to a canvas texture, not drawn with real DOM glyphs.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { DisplacementText } from "fancy-ui-svelte";
+</script>
+
+<DisplacementText text="Hover Me" fontSize={220} class="h-[400px] w-full" />
+```
+
+```svelte
+<!-- Fixed color instead of following light/dark mode -->
+<DisplacementText text="Fancy" color="#ff4d4d" font="Georgia, serif" />
+```
+
+## Props
+
+| Prop         | Type     | Default               | Description                                                                          |
+| ------------ | -------- | --------------------- | ------------------------------------------------------------------------------------ |
+| `text`       | `string` | `"Hover Me"`          | Text to display                                                                      |
+| `fontSize`   | `number` | `200`                 | Font size in pixels, used when rasterizing the text texture                          |
+| `font`       | `string` | `"Inter, sans-serif"` | Font family                                                                          |
+| `color`      | `string` | —                     | Fixed text color; overrides `lightColor`/`darkColor` and disables dark-mode tracking |
+| `lightColor` | `string` | `"#000000"`           | Text color in light mode                                                             |
+| `darkColor`  | `string` | `"#ffffff"`           | Text color in dark mode                                                              |
+| `class`      | `string` | `""`                  | Additional CSS classes on the root                                                   |
+
+## Implementation notes
+
+- The whole Three.js scene (renderer, camera, geometry, material) is created and torn down inside a single `$effect` that depends on `text`, `fontSize`, `font`, `color`, `lightColor`, and `darkColor` — any of those changing disposes the old scene and builds a new one from scratch rather than updating it incrementally. This is simple but not cheap; avoid binding these props to something that changes every frame.
+- Displacement comes from a plane geometry (100×100 segments) whose vertex shader offsets `z` based on distance from a `uDisplacement` uniform, updated every `pointermove` by raycasting against a large (500×500), fully transparent hit-plane placed in the same scene — the visible text plane itself is not the raycast target.
+- Text is rasterized once per texture rebuild via a 2048×2048 `<canvas>` with `ctx.fillText`, then uploaded as a `THREE.CanvasTexture`.
+- When `color` is not set, a `MutationObserver` watches `document.documentElement`'s `class` attribute (the app's dark-mode toggle) and regenerates the text texture — disposing the old one — whenever the resolved color actually changes. This observer is not created at all when `color` is set.
+- Cleanup on effect teardown: removes the `pointermove` and `resize` listeners, cancels the animation frame, disconnects the `MutationObserver`, removes the renderer's canvas from the DOM, and disposes the renderer, geometry, material, and texture.
+- No `prefers-reduced-motion` handling — the render loop and pointer tracking run regardless of user preference.

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

@@ -1,6 +1,6 @@
 # Dock
 
-A macOS-style dock component with icon magnification on hover.
+An icon dock component whose items magnify smoothly as the cursor approaches.
 
 ## Components
 

package/dist/fancy-ui/editorial-engine/EditorialEngine.test.d.ts

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

package/dist/fancy-ui/editorial-engine/EditorialEngine.test.js

@@ -0,0 +1,54 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect } from "vitest";
+import EditorialEngine from "./EditorialEngine.svelte";
+// The real engine measures text via @chenglou/pretext, which needs a canvas
+// 2d context or OffscreenCanvas — neither exists under jsdom
+// (HTMLCanvasElement.prototype.getContext is mocked to return null in
+// src/test-setup.ts). Stubbing `document.fonts.ready` with a promise that
+// never resolves keeps the component pinned on its pre-engine fallback
+// branch (the only branch that's meaningfully testable under jsdom) instead
+// of letting the effect's `.then()` handler call into pretext and throw.
+function stubNeverReadyFonts() {
+    Object.defineProperty(document, "fonts", {
+        configurable: true,
+        writable: true,
+        value: { ready: new Promise(() => { }) },
+    });
+}
+describe("EditorialEngine", () => {
+    beforeEach(stubNeverReadyFonts);
+    afterEach(cleanup);
+    it("mounts and renders the stage without throwing", () => {
+        const { container } = render(EditorialEngine);
+        expect(container.querySelector(".ee-stage")).toBeTruthy();
+    });
+    it("applies custom class names to the stage", () => {
+        const { container } = render(EditorialEngine, { props: { class: "my-stage" } });
+        const stage = container.querySelector(".ee-stage");
+        expect(stage.className).toContain("my-stage");
+    });
+    it("sets the font-family style from the fontFamily prop", () => {
+        const { container } = render(EditorialEngine, { props: { fontFamily: "Georgia, serif" } });
+        const stage = container.querySelector(".ee-stage");
+        expect(stage.style.fontFamily).toContain("Georgia");
+    });
+    it("renders the pre-engine fallback with the headline and body before the engine is ready", () => {
+        const { container } = render(EditorialEngine, {
+            props: { headline: "HELLO WORLD", body: "Some body copy." },
+        });
+        const fallback = container.querySelector(".ee-fallback");
+        expect(fallback).toBeTruthy();
+        expect(fallback?.querySelector("h2")?.textContent).toBe("HELLO WORLD");
+        expect(fallback?.querySelector("p")?.textContent).toBe("Some body copy.");
+    });
+    it("does not carry the ready class while pretext has not measured yet", () => {
+        const { container } = render(EditorialEngine);
+        const stage = container.querySelector(".ee-stage");
+        expect(stage.classList.contains("ready")).toBe(false);
+    });
+    it("unmounts cleanly", () => {
+        const { container, unmount } = render(EditorialEngine);
+        expect(() => unmount()).not.toThrow();
+        expect(container.querySelector(".ee-stage")).toBeFalsy();
+    });
+});