fancy-ui-svelte 0.7.0 → 0.9.0

package/dist/fancy-ui/frosted-glass/FrostedGlass.svelte

@@ -155,11 +155,13 @@
 		}
 	}
 
-	/* Safari can't combine filter:url() with backdrop-filter — fall back to
-	   plain frosted blur */
-	@supports (-webkit-hyphens: none) {
+	/* Safari can't combine filter:url() with backdrop-filter, so it needs a plain-blur
+	   fallback. -webkit-named-image is a WebKit-only feature query (Chromium and Firefox
+	   return false). Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */
+	@supports (background: -webkit-named-image(i)) {
 		.frosted-glass-filter {
 			filter: none !important;
+			-webkit-backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation));
 			backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation));
 		}
 

package/dist/fancy-ui/frosted-glass/README.md

@@ -13,8 +13,6 @@ The effect stacks four layers inside a rounded container:
 
 An optional conic-gradient border (`border` prop) frames the container.
 
-Safari cannot combine `filter: url()` with `backdrop-filter`, so it falls back to a plain `blur() saturate()` frosted look (tunable via `fallbackBlur` / `fallbackSaturation`).
-
 ## Usage
 
 ```svelte
@@ -57,3 +55,7 @@ Safari cannot combine `filter: url()` with `backdrop-filter`, so it falls back t
 ## Notes
 
 - The displacement only shows over content that scrolls or moves behind the glass; over a flat background the effect reads as a subtle frost.
+
+## Browser support
+
+Safari (WebKit) cannot combine an SVG `filter: url(#…)` with `backdrop-filter`, so the turbulence displacement silently disappears there. To keep the component usable, FrostedGlass automatically detects Safari (via a WebKit-only `@supports` feature query) and falls back to a plain frosted `blur()` + `saturate()` (both `-webkit-` prefixed and unprefixed), tunable via the `fallbackBlur` and `fallbackSaturation` props. Chromium and Firefox get the full turbulence refraction.

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

@@ -58,4 +58,5 @@ export * from "./terminal-text/index.js";
 export * from "./noise-reveal/index.js";
 export * from "./line-reveal/index.js";
 export * from "./editorial-engine/index.js";
+export * from "./liquid-text/index.js";
 export { registry, categories, categoryLabels, categoryDescriptions, getAllComponents, getComponent, getComponentsByStatus, getComponentsByCategory, getComponentsGroupedByCategory, getComponentsGroupedByStatus, searchComponents, getStats, hasComponent, getComponentCategory, } from "./registry.js";

package/dist/fancy-ui/index.js

@@ -63,6 +63,7 @@ export * from "./terminal-text/index.js";
 export * from "./noise-reveal/index.js";
 export * from "./line-reveal/index.js";
 export * from "./editorial-engine/index.js";
+export * from "./liquid-text/index.js";
 // =============================================================================
 // Registry
 // =============================================================================

package/dist/fancy-ui/line-hover-link/README.md

@@ -0,0 +1,37 @@
+# LineHoverLink
+
+An anchor with a pure-CSS underline hover effect, selectable from 11 variants. No JavaScript runs on hover — every variant is `::before`/`::after` pseudo-elements or an inline SVG stroke animated with CSS `transition`/`transform`/`stroke-dashoffset`, triggered by `:hover`/`:focus-visible`.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { LineHoverLink } from "fancy-ui-svelte";
+</script>
+
+<LineHoverLink href="/about" variant="slide">About</LineHoverLink>
+<LineHoverLink href="/contact" variant="scribble" target="_blank">Contact</LineHoverLink>
+```
+
+## Props
+
+| Prop         | Type               | Default   | Description            |
+| ------------ | ------------------ | --------- | ---------------------- |
+| `variant`    | `LineHoverVariant` | `"slide"` | The animation variant  |
+| `href`       | `string`           | `"#"`     | Link href              |
+| `target`     | `string`           | —         | Link target            |
+| `rel`        | `string`           | —         | Link rel               |
+| `aria-label` | `string`           | —         | Accessible label       |
+| `class`      | `string`           | `""`      | Additional CSS classes |
+
+Children (slot content) are the link's visible text/label.
+
+`LineHoverVariant` is one of: `"slide" | "double" | "grow" | "strike" | "fade" | "pulse" | "swap" | "sweep" | "bounce" | "arc" | "scribble"`.
+
+## Implementation notes
+
+- The component has no `<script>`-side reactive state beyond two `$derived` values — everything visual is CSS selected by a `link-hover--<variant>` class.
+- `arc` and `scribble` render an inline `<svg>` with a single `<path pathLength="1">` instead of a pseudo-element underline; both use the same technique (`stroke-dasharray: 1; stroke-dashoffset: 1` at rest, animated to `0` on hover/focus via `transition: stroke-dashoffset`).
+- `strike`, `bounce`, `arc`, and `scribble` wrap the link text in an inner `<span>` (via the `needsSpan` derived flag) because those variants also transform the text itself (scale for `strike`, translate for `bounce`) independently of the underline graphic.
+- `rel` defaults to `"noopener noreferrer"` automatically when `target="_blank"` and no explicit `rel` was passed, via the `relValue` derived value — an explicit `rel` prop is never overridden.
+- All variants respond to both `:hover` and `:focus-visible`, so the effect is keyboard-navigable, not mouse-only.

package/dist/fancy-ui/line-reveal/LineReveal.test.d.ts

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

package/dist/fancy-ui/line-reveal/LineReveal.test.js

@@ -0,0 +1,77 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import LineReveal from "./LineReveal.svelte";
+// pretext's prepareWithSegments() needs a canvas 2d context or OffscreenCanvas
+// for text measurement — neither exists under jsdom (getContext is mocked to
+// return null in src/test-setup.ts). Stubbing document.fonts.load() with a
+// promise that never resolves keeps the component on its pre-measurement
+// fallback branch instead of letting the effect's `.then()` handler call
+// into pretext and throw "Text measurement requires OffscreenCanvas or a DOM
+// canvas context."
+function stubNeverLoadingFonts() {
+    Object.defineProperty(document, "fonts", {
+        configurable: true,
+        writable: true,
+        value: { load: () => new Promise(() => { }) },
+    });
+}
+class MockIntersectionObserver {
+    callback;
+    static instances = [];
+    constructor(callback) {
+        this.callback = callback;
+        MockIntersectionObserver.instances.push(this);
+    }
+    observe = vi.fn();
+    disconnect = vi.fn();
+    unobserve = vi.fn();
+}
+vi.stubGlobal("IntersectionObserver", MockIntersectionObserver);
+describe("LineReveal", () => {
+    beforeEach(stubNeverLoadingFonts);
+    afterEach(() => {
+        cleanup();
+        MockIntersectionObserver.instances = [];
+    });
+    it("mounts and renders the root wrapper", () => {
+        const { container } = render(LineReveal, { props: { text: "Hello there" } });
+        const root = container.firstElementChild;
+        expect(root.className).toContain("relative");
+        expect(root.className).toContain("w-full");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(LineReveal, {
+            props: { text: "Hello", class: "my-reveal" },
+        });
+        const root = container.firstElementChild;
+        expect(root.className).toContain("my-reveal");
+    });
+    it("keeps the full text available to screen readers via a sr-only span", () => {
+        const { container } = render(LineReveal, { props: { text: "Accessible copy" } });
+        const srOnly = container.querySelector(".sr-only");
+        expect(srOnly?.textContent).toBe("Accessible copy");
+    });
+    it("renders the pre-measure fallback (hidden text) before pretext has measured", () => {
+        const { container } = render(LineReveal, { props: { text: "Falls back" } });
+        const fallback = container.querySelector('[aria-hidden="true"]');
+        expect(fallback).toBeTruthy();
+        expect(fallback.textContent).toBe("Falls back");
+        expect(fallback.style.visibility).toBe("hidden");
+    });
+    it("sets the font style from the font prop", () => {
+        const { container } = render(LineReveal, {
+            props: { text: "Styled", font: "700 24px Georgia, serif" },
+        });
+        const root = container.firstElementChild;
+        expect(root.getAttribute("style") ?? "").toContain("24px");
+    });
+    it("observes the container element for intersection", () => {
+        render(LineReveal, { props: { text: "Watch me" } });
+        const lastInstance = MockIntersectionObserver.instances.at(-1);
+        expect(lastInstance?.observe).toHaveBeenCalled();
+    });
+    it("unmounts cleanly", () => {
+        const { unmount } = render(LineReveal, { props: { text: "Bye" } });
+        expect(() => unmount()).not.toThrow();
+    });
+});

package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte

@@ -18,6 +18,10 @@
 		bOffset?: number;
 		scale?: number;
 		frost?: number;
+		/** Backdrop blur in pixels for the Safari fallback */
+		fallbackBlur?: number;
+		/** Backdrop saturation percentage for the Safari fallback */
+		fallbackSaturation?: number;
 		class?: string;
 		containerClass?: string;
 		children?: Snippet;
@@ -38,6 +42,8 @@
 		bOffset = 20,
 		scale = -180,
 		frost = 0.05,
+		fallbackBlur = 20,
+		fallbackSaturation = 180,
 		class: className = "",
 		containerClass = "",
 		children,
@@ -57,8 +63,8 @@
 
 	let backdropStyle = $derived(
 		filterId
-			? `--frost:${frost};border-radius:${radius}px;backdrop-filter:url(#displacementFilter-${filterId});`
-			: `--frost:${frost};border-radius:${radius}px;`
+			? `--frost:${frost};border-radius:${radius}px;backdrop-filter:url(#displacementFilter-${filterId});--lg-fallback-blur:${fallbackBlur}px;--lg-fallback-saturation:${fallbackSaturation}%;`
+			: `--frost:${frost};border-radius:${radius}px;--lg-fallback-blur:${fallbackBlur}px;--lg-fallback-saturation:${fallbackSaturation}%;`
 	);
 
 	onMount(() => {
@@ -187,6 +193,17 @@
 			0px 16px 56px rgba(17, 17, 26, 0.05) inset;
 	}
 
+	/* Safari cannot resolve SVG url() references inside backdrop-filter, so it needs a
+	   plain-blur fallback. -webkit-named-image is a WebKit-only feature query (Chromium
+	   and Firefox return false), so this never overrides Chromium's working SVG filter.
+	   Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */
+	@supports (background: -webkit-named-image(i)) {
+		.liquid-glass-effect {
+			-webkit-backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important;
+			backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important;
+		}
+	}
+
 	.liquid-glass-slot {
 		width: 100%;
 		height: 100%;

package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte.d.ts

@@ -14,6 +14,10 @@ interface Props {
     bOffset?: number;
     scale?: number;
     frost?: number;
+    /** Backdrop blur in pixels for the Safari fallback */
+    fallbackBlur?: number;
+    /** Backdrop saturation percentage for the Safari fallback */
+    fallbackSaturation?: number;
     class?: string;
     containerClass?: string;
     children?: Snippet;

package/dist/fancy-ui/liquid-glass/LiquidGlass.test.js

@@ -45,4 +45,18 @@ describe("LiquidGlass", () => {
         expect(wrapper.getAttribute("style")).toContain("border-radius");
         expect(wrapper.getAttribute("style")).toContain("24px");
     });
+    it("exposes Safari fallback CSS variables from props", () => {
+        const { container: defaultContainer } = render(LiquidGlass);
+        const defaultWrapper = defaultContainer.querySelector(".liquid-glass-effect");
+        const defaultStyle = defaultWrapper.getAttribute("style") ?? "";
+        expect(defaultStyle).toMatch(/--lg-fallback-blur:\s*20px/);
+        expect(defaultStyle).toMatch(/--lg-fallback-saturation:\s*180%/);
+        const { container: customContainer } = render(LiquidGlass, {
+            props: { fallbackBlur: 8, fallbackSaturation: 120 },
+        });
+        const customWrapper = customContainer.querySelector(".liquid-glass-effect");
+        const customStyle = customWrapper.getAttribute("style") ?? "";
+        expect(customStyle).toMatch(/--lg-fallback-blur:\s*8px/);
+        expect(customStyle).toMatch(/--lg-fallback-saturation:\s*120%/);
+    });
 });

package/dist/fancy-ui/liquid-glass/README.md

@@ -20,6 +20,8 @@ A glass-like visual effect using SVG filters for chromatic displacement, creatin
 | `bOffset`        | `number`      | `20`           | Blue channel offset                  |
 | `scale`          | `number`      | `-180`         | Displacement scale                   |
 | `frost`          | `number`      | `0.05`         | Frosted overlay opacity              |
+| `fallbackBlur`   | `number`      | `20`           | Backdrop blur in pixels for the Safari fallback |
+| `fallbackSaturation` | `number`  | `180`          | Backdrop saturation percentage for the Safari fallback |
 | `class`          | `string`      | `""`           | CSS classes for inner container      |
 | `containerClass` | `string`      | `""`           | CSS classes for outer container      |
 
@@ -31,4 +33,8 @@ A glass-like visual effect using SVG filters for chromatic displacement, creatin
 </LiquidGlass>
 ```
 
-**Note**: This component uses `position: fixed` and `backdrop-filter` with SVG filters. Place it over content to see the refraction effect.
+**Note**: This component uses `position: relative` and `backdrop-filter` with SVG filters. Place it over content to see the refraction effect.
+
+## Browser support
+
+Safari (WebKit) cannot resolve an SVG `url(#…)` filter reference inside `backdrop-filter`, so the chromatic displacement silently disappears there. To keep the component usable, LiquidGlass automatically detects Safari (via a WebKit-only `@supports` feature query) and falls back to a plain frosted `blur()` + `saturate()` (both `-webkit-` prefixed and unprefixed), tunable via the `fallbackBlur` and `fallbackSaturation` props. Chromium and Firefox get the full chromatic refraction.