fancy-ui-svelte 0.12.0 → 0.13.0

package/dist/fancy-ui/button/Button.svelte

@@ -48,8 +48,11 @@
 </script>
 
 <script lang="ts">
+	import { fade } from "svelte/transition";
 	import { cn } from "../../utils.js";
 	import { sound as soundFx } from "../sound/sound.svelte.js";
+	import { prefersReducedMotion } from "../_internals/motion/anchored.js";
+	import { DURATIONS } from "../_internals/motion/tokens.js";
 
 	let {
 		variant = "primary",
@@ -93,7 +96,14 @@
 		cn(
 			"ft-btn",
 			"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium",
-			"cursor-pointer transition-colors",
+			// No `transition-colors` here: the scoped style block below declares a
+			// `transition` shorthand on this same element (it has to, so the press
+			// scale can join the colour channel under `prefers-reduced-motion:
+			// no-preference`), and Svelte's scoped CSS is unlayered while Tailwind's
+			// utilities sit in `@layer utilities` — the utility would lose silently
+			// and read as a colour transition that never ran. The colour channel is
+			// re-declared by hand at exactly the values it resolved to.
+			"cursor-pointer",
 			"focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ft-btn-accent)]/35",
 			// `data-disabled` covers the anchor branch, which has no native `:disabled`
 			// pseudo-class to hang the same dimmed treatment off. It tracks `disabled`
@@ -132,6 +142,21 @@
 	// can't drift out of sync with each other.
 	const anchorInert = $derived(disabled || loading);
 
+	// The one duration the lead slot's cross-fade runs on: `DURATIONS.micro`, the
+	// glyph-scale rung, collapsed to 0 when the user has asked for less motion —
+	// at 0 Svelte skips `element.animate()` entirely and the swap is synchronous,
+	// which is the same behaviour this button had before the fade existed.
+	//
+	// Deliberately a plain function, never a `$derived`: `prefersReducedMotion()`
+	// resolves `window.matchMedia` fresh on every call and its own contract
+	// (`_internals/motion/anchored.ts`) forbids reading it from a `$derived`,
+	// where the answer would be computed once and then never revisited. A
+	// transition's params thunk runs once per transition, at the instant that
+	// transition starts — exactly the call site that contract sanctions.
+	function leadFade() {
+		return prefersReducedMotion() ? 0 : DURATIONS.micro;
+	}
+
 	// The single guard both branches funnel through. A native `disabled` button
 	// already refuses real pointer/keyboard input, but a synthetic `.click()` (or
 	// an anchor, which has no disabled state at all) walks straight past that —
@@ -160,10 +185,29 @@
 		tabindex={anchorInert ? -1 : undefined}
 		onclick={handleClick}
 	>
-		{#if loading}
-			<span class="ft-btn-spinner" aria-hidden="true"></span>
-		{:else if iconStart}
-			{@render iconStart()}
+		<!--
+			The lead slot. Both branches of this component render it identically —
+			see the button branch below for why the split `in:` / `out:` pair is
+			the right shape here rather than one bidirectional `transition:`.
+		-->
+		{#if loading || iconStart}
+			<span class="ft-btn-lead" aria-hidden={loading ? "true" : undefined}>
+				{#if loading}
+					<span
+						class="ft-btn-spinner"
+						in:fade={{ duration: leadFade() }}
+						out:fade={{ duration: leadFade() }}
+					></span>
+				{:else}
+					<span
+						class="ft-btn-lead-icon"
+						in:fade={{ duration: leadFade() }}
+						out:fade={{ duration: leadFade() }}
+					>
+						{@render iconStart?.()}
+					</span>
+				{/if}
+			</span>
 		{/if}
 		{@render children?.()}
 		{#if iconEnd}
@@ -180,10 +224,46 @@
 		aria-busy={loading ? "true" : undefined}
 		onclick={handleClick}
 	>
-		{#if loading}
-			<span class="ft-btn-spinner" aria-hidden="true"></span>
-		{:else if iconStart}
-			{@render iconStart()}
+		<!--
+			The lead slot: one fixed-size cell that holds the spinner and
+			`iconStart` at the same time, so `loading` swaps them by cross-fading
+			in place instead of cutting, and the label beside it never shifts.
+
+			A split `in:` / `out:` pair rather than one bidirectional
+			`transition:`, which is the shape the rest of this campaign uses. Two
+			reasons, both structural: the spinner and the icon are DIFFERENT
+			elements, so there is no single node whose transition could be
+			bidirectional; and a cross-fade wants both halves running at once
+			rather than one after the other. The outer `{#if loading || iconStart}`
+			keeps a button with neither from paying for an empty grid cell — and,
+			because a local transition never plays on the initial render of the
+			block that owns it, a button that starts out `loading` still renders
+			its spinner instantly, with no fade in from nothing.
+
+			`aria-hidden` sits on the slot rather than on the spinner so that it
+			covers the whole cell for the length of the fade: mid-swap the
+			outgoing icon is still mounted, and a screen reader has no business
+			reading a glyph that is on its way out of a control already marked
+			`aria-busy`.
+		-->
+		{#if loading || iconStart}
+			<span class="ft-btn-lead" aria-hidden={loading ? "true" : undefined}>
+				{#if loading}
+					<span
+						class="ft-btn-spinner"
+						in:fade={{ duration: leadFade() }}
+						out:fade={{ duration: leadFade() }}
+					></span>
+				{:else}
+					<span
+						class="ft-btn-lead-icon"
+						in:fade={{ duration: leadFade() }}
+						out:fade={{ duration: leadFade() }}
+					>
+						{@render iconStart?.()}
+					</span>
+				{/if}
+			</span>
 		{/if}
 		{@render children?.()}
 		{#if iconEnd}
@@ -198,6 +278,91 @@
 			--ft-accent,
 			light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75))
 		);
+		/* 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) =
+		   tokens.EASINGS.inout — the reversible-state pair, because a press
+		   resolves either way (released, or the interaction carries on). */
+		--ft-btn-motion: var(--ft-duration-fast, 150ms)
+			var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1));
+		/*
+		 * Replaces the `transition-colors` utility removed from the class string
+		 * above, at exactly the values that utility already resolved to. Colour is
+		 * a state change, not motion, so it stays OUTSIDE the reduced-motion query
+		 * — gating it would only make a theme flip look broken for the people who
+		 * asked for less movement.
+		 *
+		 * `box-shadow` is deliberately absent, and must stay absent: this button's
+		 * focus ring is `focus-visible:ring-*`, which compiles to a `box-shadow`,
+		 * and a focus ring must never animate. `text-decoration-color`, `fill` and
+		 * `stroke` never change on this control, so the three listed here are the
+		 * faithful subset of what the utility covered.
+		 */
+		transition:
+			color var(--ft-btn-motion),
+			background-color var(--ft-btn-motion),
+			border-color var(--ft-btn-motion);
+		/* Kills the ~300ms tap delay without blocking scroll — the same rule, for
+		   the same reason, as `.ft-pressable` and `.ft-toggle`. A press that
+		   answers a third of a second late is not press feedback. */
+		touch-action: manipulation;
+	}
+
+	/*
+	 * The press. Pressable's contract inlined as a plain rule on the native
+	 * control rather than wrapping a `<button>` in a `<Pressable>` div — same
+	 * `0.97`, same clock, one element instead of two.
+	 *
+	 * Only the property list is re-declared in here: `transform` joins the colour
+	 * channel under `no-preference` and nowhere else, so with motion reduced the
+	 * colours still cross and the button simply does not move. The resting state
+	 * (no `transform` at all) is the ungated fallback.
+	 */
+	@media (prefers-reduced-motion: no-preference) {
+		.ft-btn {
+			transition:
+				color var(--ft-btn-motion),
+				background-color var(--ft-btn-motion),
+				border-color var(--ft-btn-motion),
+				transform var(--ft-btn-motion);
+		}
+
+		/* Both inert states are excluded so a press that does nothing does not
+		   pretend to. `[data-disabled]` is the anchor branch, which has no native
+		   `:disabled` to hang this off; `[aria-busy]` is the loading one, on both
+		   branches. A native disabled `<button>` never matches `:active` anyway —
+		   the attribute selectors are what make the anchor behave like it. */
+		.ft-btn:not([data-disabled="true"]):not([aria-busy="true"]):active {
+			transform: scale(0.97);
+		}
+	}
+
+	/*
+	 * The lead slot: one fixed cell the spinner and `iconStart` share, sized
+	 * exactly like the spinner it holds (`calc(1em + 1px)`, read from the
+	 * button's own font-size, so it follows the size variant for free). Fixed
+	 * rather than content-sized on purpose — a slot that measured whichever
+	 * child happened to be mounted would grow while both are cross-fading and
+	 * snap back the frame the fade ended, moving the label twice for one swap.
+	 */
+	.ft-btn-lead {
+		display: grid;
+		place-items: center;
+		flex: none;
+		width: calc(1em + 1px);
+		height: calc(1em + 1px);
+	}
+
+	/* Both children occupy the one cell at once — that overlap IS the
+	   cross-fade. Named rather than `> *` so a caller's own `iconStart` markup,
+	   which is one level further down, is never caught by it. */
+	.ft-btn-lead > .ft-btn-spinner,
+	.ft-btn-lead > .ft-btn-lead-icon {
+		grid-area: 1 / 1;
+	}
+
+	.ft-btn-lead-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.ft-btn--accent {

package/dist/fancy-ui/button/Button.test.js

@@ -1,7 +1,8 @@
-import { render, cleanup, fireEvent } from "@testing-library/svelte";
-import { createRawSnippet } from "svelte";
+import { render, cleanup, fireEvent, waitFor } from "@testing-library/svelte";
+import { createRawSnippet, tick } from "svelte";
 import { afterEach, describe, it, expect, vi, beforeEach } from "vitest";
 import Button from "./Button.svelte";
+import LeadHarness from "./ButtonLeadHarness.test.svelte";
 import { sound } from "../sound/sound.svelte.js";
 function snippet(html) {
     return createRawSnippet(() => ({ render: () => html }));
@@ -9,8 +10,27 @@ function snippet(html) {
 function root(container) {
     return container.firstElementChild;
 }
+/** Replaces `window.matchMedia` wholesale — the pattern the rest of the repo
+ * uses. `prefersReducedMotion()` resolves it fresh on every call, and the
+ * lead fade reads it from its transition params thunk, so an override
+ * installed before a render is visible to the very next swap. */
+function stubReducedMotion(matches) {
+    vi.stubGlobal("matchMedia", (query) => ({
+        matches,
+        media: query,
+        onchange: null,
+        addEventListener: () => { },
+        removeEventListener: () => { },
+        dispatchEvent: () => false,
+        addListener: () => { },
+        removeListener: () => { },
+    }));
+}
 describe("Button", () => {
-    afterEach(cleanup);
+    afterEach(() => {
+        cleanup();
+        vi.unstubAllGlobals();
+    });
     it("renders a real button with children as its label", () => {
         const { container } = render(Button, { props: { children: snippet("<span>Save</span>") } });
         const el = root(container);
@@ -229,6 +249,100 @@ describe("Button", () => {
         // alone; only the base `bg-primary` is a real conflict with `bg-red-500`.
         expect(classList).not.toContain("bg-primary");
     });
+    // The scoped `<style>` now declares a `transition` shorthand on this same
+    // element, so the press scale can join the colour channel under
+    // `prefers-reduced-motion: no-preference`. Svelte's scoped CSS is unlayered
+    // and Tailwind's utilities sit in `@layer utilities`, so leaving
+    // `transition-colors` on the class string would read as a colour transition
+    // that silently never ran.
+    it("drops the transition-colors utility in favour of the hand-written channel", () => {
+        const { container } = render(Button, { props: { children: snippet("<span>Go</span>") } });
+        expect(root(container).className).not.toContain("transition-colors");
+    });
+    describe("lead slot", () => {
+        const leadProps = {
+            iconStart: snippet('<span class="my-icon-start">+</span>'),
+            children: snippet("<span>Save</span>"),
+        };
+        function toggleOf(container) {
+            return container.querySelector('[data-testid="toggle"]');
+        }
+        it("wraps iconStart in the shared lead cell, exposed to assistive tech", () => {
+            const { container } = render(Button, { props: leadProps });
+            const lead = container.querySelector(".ft-btn-lead");
+            expect(lead).toBeTruthy();
+            expect(lead?.querySelector(".my-icon-start")).toBeTruthy();
+            // Not loading: nothing here is decorative, so the caller's own icon
+            // markup keeps whatever accessible treatment the caller gave it.
+            expect(lead?.hasAttribute("aria-hidden")).toBe(false);
+        });
+        it("renders no lead cell at all when there is neither a spinner nor an iconStart", () => {
+            const { container } = render(Button, {
+                props: { children: snippet("<span>Save</span>") },
+            });
+            expect(container.querySelector(".ft-btn-lead")).toBeNull();
+        });
+        it("keeps aria-busy on the control and aria-hidden on the cell, never the other way round", () => {
+            const { container } = render(Button, { props: { ...leadProps, loading: true } });
+            const el = root(container);
+            const lead = container.querySelector(".ft-btn-lead");
+            expect(el.getAttribute("aria-busy")).toBe("true");
+            expect(el.hasAttribute("aria-hidden")).toBe(false);
+            expect(lead.getAttribute("aria-hidden")).toBe("true");
+            expect(lead.hasAttribute("aria-busy")).toBe(false);
+        });
+        it("renders the same lead cell on the anchor branch", () => {
+            const { container } = render(Button, {
+                props: { ...leadProps, href: "https://example.com" },
+            });
+            const lead = container.querySelector(".ft-btn-lead");
+            expect(root(container).tagName).toBe("A");
+            expect(lead?.querySelector(".my-icon-start")).toBeTruthy();
+        });
+        // The proof the cross-fade exists at all. Every static-render assertion
+        // above and at `:101` stays green whether or not the fade was ever wired
+        // up, because a local transition never plays on the initial render of the
+        // block that owns it — only a live toggle can tell the two apart.
+        it("holds the icon and the spinner in the DOM together for the length of the cross-fade", async () => {
+            const { container } = render(LeadHarness);
+            const toggle = toggleOf(container);
+            expect(container.querySelector(".my-icon-start")).toBeTruthy();
+            expect(container.querySelector(".ft-btn-spinner")).toBeNull();
+            toggle.click();
+            await tick();
+            // Both mounted, sharing the one grid cell: that overlap IS the fade.
+            // Without it the icon would already be gone in this same flush.
+            expect(container.querySelector(".ft-btn-spinner")).toBeTruthy();
+            expect(container.querySelector(".my-icon-start")).toBeTruthy();
+            // And it settles on the spinner alone once the fade finishes.
+            await waitFor(() => expect(container.querySelector(".my-icon-start")).toBeNull());
+            expect(container.querySelector(".ft-btn-spinner")).toBeTruthy();
+        });
+        it("cross-fades back the other way when loading clears", async () => {
+            const { container } = render(LeadHarness);
+            const toggle = toggleOf(container);
+            toggle.click();
+            await waitFor(() => expect(container.querySelector(".my-icon-start")).toBeNull());
+            toggle.click();
+            await tick();
+            expect(container.querySelector(".my-icon-start")).toBeTruthy();
+            expect(container.querySelector(".ft-btn-spinner")).toBeTruthy();
+            await waitFor(() => expect(container.querySelector(".ft-btn-spinner")).toBeNull());
+            expect(container.querySelector(".my-icon-start")).toBeTruthy();
+        });
+        it("reduced motion: the swap is synchronous, with no window where both are mounted", async () => {
+            stubReducedMotion(true);
+            const { container } = render(LeadHarness);
+            const toggle = toggleOf(container);
+            toggle.click();
+            await tick();
+            // Duration 0 makes Svelte skip `element.animate()` entirely, so the
+            // outgoing icon is gone in the same flush that mounts the spinner —
+            // exactly the behaviour this button had before the fade existed.
+            expect(container.querySelector(".ft-btn-spinner")).toBeTruthy();
+            expect(container.querySelector(".my-icon-start")).toBeNull();
+        });
+    });
     describe("sound", () => {
         let play;
         beforeEach(() => {

package/dist/fancy-ui/button/ButtonLeadHarness.test.svelte

@@ -0,0 +1,32 @@
+<!--
+  Test-only rig for the lead slot's spinner ↔ `iconStart` cross-fade.
+
+  `loading` is held as local `$state` and flipped from a button inside this
+  component, deliberately, rather than driven from the test through
+  `rerender()`: `rerender` awaits a tick of its own, so a test using it can
+  never observe the ONE flush the cross-fade lives in — by the time it returns,
+  the stubbed Web Animations chain (a dummy animation on one microtask, the
+  real one on the next) has already resolved and the outgoing node has left
+  either way. A raw `.click()` flips the state synchronously, so a single
+  `await tick()` after it lands inside the fade window.
+
+  Starts NOT loading on purpose: a local transition never plays on the initial
+  render of the block that owns it, so the first click is the first genuine
+  swap, and the second click the genuine swap back.
+
+  Not exported from index.ts, and not collected by Vitest directly (the run
+  includes `*.test.ts` only) — imported and rendered from Button.test.ts.
+-->
+<script lang="ts">
+	import Button from "./Button.svelte";
+
+	let isLoading = $state(false);
+</script>
+
+<button type="button" data-testid="toggle" onclick={() => (isLoading = !isLoading)}>toggle</button>
+
+{#snippet plus()}
+	<span class="my-icon-start">+</span>
+{/snippet}
+
+<Button loading={isLoading} iconStart={plus}>Save</Button>

package/dist/fancy-ui/button/ButtonLeadHarness.test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ButtonLeadHarness: import("svelte").Component<Record<string, never>, {}, "">;
+type ButtonLeadHarness = ReturnType<typeof ButtonLeadHarness>;
+export default ButtonLeadHarness;

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

@@ -20,7 +20,7 @@ The library's foundational push-button: six variants, three sizes, a loading sta
 ```
 
 ```svelte
-<!-- Loading: swaps the leading icon for a spinner, keeps the button's own colours -->
+<!-- Loading: cross-fades the leading icon into a spinner, keeps the button's own colours -->
 <Button loading={saving} onclick={save}>Save changes</Button>
 ```
 
@@ -93,10 +93,21 @@ Set `sound` to play the `press` cue on activation, through the shared sound cont
 
 It is opt-in and silent by default: nothing plays unless both `sound` is set on the button **and** the user has turned sound on globally (through `SoundToggle` or `sound.enable()`). `disabled` and `loading` block the cue exactly like they block `onclick` — nothing plays for a click that never fires the callback either.
 
+## Motion
+
+- **The lead slot cross-fades.** `iconStart` and the spinner share one fixed-size cell — `calc(1em + 1px)`, the same box the spinner already drew itself in, so it follows the size variant for free. Flipping `loading` fades one out while the other fades in, over the same 80 ms, in place. Both are mounted at once for the length of that fade; the cell never resizes, so the label beside it never shifts. A button that starts out `loading` renders its spinner immediately, with no fade in from nothing, and a button given neither a spinner nor an `iconStart` renders no cell at all.
+- **Pressing scales the button to `0.97`** for as long as it is held, over 150 ms on `--ft-ease-inout` — the reversible-state curve, because a press resolves either way. A disabled button and a `loading` one are both excluded: a press that does nothing should not pretend to.
+- The press transition lists `transform` and the three colour properties, and deliberately never `box-shadow`. This button's focus ring _is_ a `box-shadow` (`focus-visible:ring-*` compiles to one), and a focus ring must never animate.
+- **Reduced motion.** The press scale is declared entirely inside `@media (prefers-reduced-motion: no-preference)`; without that preference the button simply does not move, and the resting state is the ungated fallback. The lead cross-fade collapses to a duration of `0`, which makes the swap synchronous — exactly the instant cut this button did before the fade existed. The spinner's own rotation is likewise gated, and with motion reduced the ring is still drawn, just still, so `aria-busy` keeps a visible companion. Colour is the one channel that stays ungated in both places: a colour change is not motion, and gating it would only make a theme flip look broken for the people who asked for less movement.
+- **Touch and coarse pointers.** `:active` is exactly the affordance a finger gets, so the press feedback is not suppressed on touch. The button carries `touch-action: manipulation`, which removes the browser's ~300 ms tap delay without blocking scrolling — a button inside a scrollable list stays scrollable while it press-reacts.
+- **Timing.** 80 ms, linear, for the lead cross-fade (a fade needs no curve); 150 ms, `--ft-ease-inout` (`cubic-bezier(0.4, 0, 0.2, 1)`), for both the press scale and the colour channel beside it.
+
 ## Implementation notes
 
 - `href` switches the rendered element from `<button>` to `<a>` — the two share one class list and one `onclick` guard, so behaviour does not fork with the markup.
 - An anchor cannot be `disabled`, and half its activation paths — middle-click firing `auxclick`, "open link in new tab" from the context menu — act on `href`/`target` directly and never reach `onclick` at all. So `disabled` and `loading` are combined into one `anchorInert` flag that strips `href` and `target`, sets `aria-disabled="true"` and `tabindex="-1"`; the click handler still swallows the event too, as a second line of defence for whatever does reach it. `loading` alone must be just as inert as `disabled` — a caller can't tell those attack surfaces apart, so the fix can't either.
 - `loading` is deliberately not `disabled` — the mockup keeps a loading button at full strength (no dimming), because "working" and "unavailable" read as different things. On the button branch this falls out naturally: `loading` never touches the native `disabled` attribute, so `disabled:opacity-50` never triggers, and the shared click guard is what actually stops the callback (proven by a synthetic dispatch that bypasses jsdom's own disabled handling in the test suite). On the anchor branch, `aria-disabled` goes true for `loading` too — inertness has to be visible to assistive tech regardless of _why_ the link is inert — but the dimmed look stays tied to `disabled` alone through a separate `data-disabled` attribute, so a loading anchor reads as busy, not unavailable, exactly like a loading button does.
 - `target="_blank"` always widens `rel` to include `noopener noreferrer`, on top of whatever tokens the caller already passed, closing the `window.opener` reverse-tabnabbing hole even when a caller forgets.
-- The spinner reads its own `font-size` (`calc(1em + 1px)`), so its diameter follows the size variant automatically rather than needing a per-size override; its top edge is `currentColor` and the rest of the ring is `currentColor` at 30% via `color-mix`, so it always matches whichever variant it is drawn on. The spin itself lives behind `prefers-reduced-motion: no-preference`; with motion reduced the ring is still drawn, just still, so `aria-busy` keeps a visible companion.
+- The spinner reads its own `font-size` (`calc(1em + 1px)`), so its diameter follows the size variant automatically rather than needing a per-size override; its top edge is `currentColor` and the rest of the ring is `currentColor` at 30% via `color-mix`, so it always matches whichever variant it is drawn on. See [Motion](#motion) for the spin's reduced-motion gate.
+- `aria-hidden` sits on the lead cell rather than on the spinner inside it, so it covers the whole cell for the length of the cross-fade: mid-swap the outgoing icon is still mounted, and a screen reader has no business reading a glyph on its way out of a control already marked `aria-busy`. With `loading` false the cell carries no `aria-hidden` at all, so a caller's own `iconStart` markup keeps whatever accessible treatment the caller gave it.
+- The `transition-colors` utility is deliberately absent from the class string. Svelte's scoped `<style>` is unlayered and Tailwind's utilities live in `@layer utilities`, so the scoped `transition` shorthand this button needs (the press scale has to join the colour channel) would win over that utility silently and leave a colour transition that never ran. The colour channel is re-declared by hand instead, at exactly the values the utility resolved to.

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

@@ -11,6 +11,7 @@
 		HSVtoRGB,
 		scaleRadiusForContainer,
 		wrap,
+		clickBoost,
 	} from "./fluid-shared.js";
 	import { startWebGpuFluid } from "./webgpu-engine.js";
 
@@ -106,6 +107,9 @@
 	}: Props = $props();
 
 	const clampedColorIntensity = Math.max(0, Math.min(1, colorIntensity));
+	// A click's extra brightness, capped so it never compounds colorIntensity
+	// into the dither pass's clamp — see clickBoost() for the arithmetic.
+	const clickColorBoost = clickBoost(clampedColorIntensity);
 	const clampedHdrBoost = Math.max(1, Math.min(4, hdrBoost));
 	const clampedDitherPixelSize = Math.max(1, ditherPixelSize);
 	const clampedDitherLevels = Math.max(2, Math.min(16, Math.floor(ditherLevels)));
@@ -122,13 +126,17 @@
 	let cachedFluidColorsRef: string[] | undefined;
 	let cachedFluidColorsScaled: ColorRGB[] = [];
 
+	// Frozen: these objects are cached and handed out by reference to every
+	// pointer and every click, so an in-place `color.r *= …` anywhere downstream
+	// would scale the palette itself — and in strict mode the freeze turns that
+	// into a TypeError at the culprit instead of a fluid that brightens forever.
 	function getScaledColor(hex: string): ColorRGB {
 		const { r, g, b } = hexToRgb(hex);
-		return {
+		return Object.freeze({
 			r: r * clampedColorIntensity,
 			g: g * clampedColorIntensity,
 			b: b * clampedColorIntensity,
-		};
+		});
 	}
 
 	function getCachedFluidColor(hex: string): ColorRGB {
@@ -265,6 +273,7 @@
 				pauseWhenHidden,
 				splatOnMount,
 				generateColor,
+				clickBoost: clickColorBoost,
 			})
 				.then((handle) => {
 					if (disposed) {
@@ -315,6 +324,15 @@
 			const autopilotPointer = onReady ? pointerPrototype() : null;
 			if (autopilotPointer) pointers.push(autopilotPointer);
 			let penWasUp = true;
+			// Every GL object the engine allocates registers its own deleter here so
+			// `cleanup()` can hand the memory back — and then lose the context
+			// itself. Nothing here ever released a program, a texture or the
+			// context before, so every unmount (a re-key on a skin switch, a route
+			// change) left a whole simulation's worth of GPU memory owned by a
+			// context only GC would eventually drop, and each new mount took one
+			// more slot from the browser's ~16-context budget.
+			const glDisposers: Array<() => void> = [];
+			let glDisposed = false;
 
 			// Get WebGL context
 			const context = getWebGLContext(canvas);
@@ -514,6 +532,7 @@
 				const shaderSource = addKeywords(source, keywords);
 				const shader = gl.createShader(type);
 				if (!shader) return null;
+				glDisposers.push(() => gl.deleteShader(shader));
 				gl.shaderSource(shader, shaderSource);
 				gl.compileShader(shader);
 				return shader;
@@ -526,6 +545,7 @@
 				if (!vertexShader || !fragmentShader) return null;
 				const program = gl.createProgram();
 				if (!program) return null;
+				glDisposers.push(() => gl.deleteProgram(program));
 				gl.attachShader(program, vertexShader);
 				gl.attachShader(program, fragmentShader);
 				gl.linkProgram(program);
@@ -741,13 +761,19 @@
 			uniform vec3 color;
 			uniform vec2 point;
 			uniform float radius;
+			uniform float saturate;
 
 			void main () {
 				vec2 p = vUv - point.xy;
 				p.x *= aspectRatio;
 				vec3 splat = exp(-dot(p, p) / radius) * color;
 				vec3 base = texture2D(uTarget, vUv).xyz;
-				gl_FragColor = vec4(base + splat, 1.0);
+				// A click splat lifts each texel to its own profile instead of adding
+				// to it: what is already there never rises past what one click would
+				// leave at that spot, so a burst of clicks paints the same disc once
+				// instead of summing towards white and widening with every click.
+				vec3 sum = saturate > 0.5 ? max(base, splat) : base + splat;
+				gl_FragColor = vec4(sum, 1.0);
 			}
 		`
 			);
@@ -955,6 +981,7 @@
 
 			const blit = (() => {
 				const buffer = gl.createBuffer()!;
+				glDisposers.push(() => gl.deleteBuffer(buffer));
 				gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 				gl.bufferData(
 					gl.ARRAY_BUFFER,
@@ -962,6 +989,7 @@
 					gl.STATIC_DRAW
 				);
 				const elemBuffer = gl.createBuffer()!;
+				glDisposers.push(() => gl.deleteBuffer(elemBuffer));
 				gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elemBuffer);
 				gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
 				gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
@@ -1014,6 +1042,7 @@
 			): FBO {
 				gl.activeTexture(gl.TEXTURE0);
 				const texture = gl.createTexture()!;
+				glDisposers.push(() => gl.deleteTexture(texture));
 				gl.bindTexture(gl.TEXTURE_2D, texture);
 				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
 				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
@@ -1021,6 +1050,7 @@
 				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 				gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);
 				const fbo = gl.createFramebuffer()!;
+				glDisposers.push(() => gl.deleteFramebuffer(fbo));
 				gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
 				gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
 				gl.viewport(0, 0, w, h);
@@ -1481,16 +1511,41 @@
 			}
 
 			function clickSplat(pointer: Pointer) {
-				const color = generateColor();
-				color.r *= 10;
-				color.g *= 10;
-				color.b *= 10;
+				// generateColor() is already intensity-scaled; the boost is capped so
+				// the peak stays at CLICK_PEAK rather than compounding colorIntensity.
+				// COPY, never scale in place: with `fluidColor` / `fluidColors` set,
+				// generateColor() hands back the cached palette object itself, and
+				// scaling that multiplied the palette again on every click — the
+				// 10th click painted with a colour 10^10 times brighter — which is
+				// what turned a few clicks into a giant disc and a few more into
+				// NaN and nothing at all.
+				const base = generateColor();
+				const color = {
+					r: base.r * clickColorBoost,
+					g: base.g * clickColorBoost,
+					b: base.b * clickColorBoost,
+				};
 				const dx = 10 * (Math.random() - 0.5);
 				const dy = 30 * (Math.random() - 0.5);
-				splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
-			}
-
-			function splat(x: number, y: number, dx: number, dy: number, color: ColorRGB) {
+				// Saturating: a burst of clicks on one spot pools at this colour
+				// rather than summing — a click has next to no velocity to carry
+				// the dye away, so additive stacking used to turn into a white disc.
+				splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color, true);
+			}
+
+			/**
+			 * Inject velocity and dye at a point. `saturate` is the click mode: the
+			 * dye pass then caps each texel at the splat colour instead of adding
+			 * to it (velocity is always additive — a click's push is negligible).
+			 */
+			function splat(
+				x: number,
+				y: number,
+				dx: number,
+				dy: number,
+				color: ColorRGB,
+				saturate = false
+			) {
 				splatProgram.bind();
 				if (splatProgram.uniforms.uTarget) {
 					gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
@@ -1504,6 +1559,9 @@
 				if (splatProgram.uniforms.color) {
 					gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0);
 				}
+				if (splatProgram.uniforms.saturate) {
+					gl.uniform1f(splatProgram.uniforms.saturate, 0);
+				}
 				if (splatProgram.uniforms.radius) {
 					let radius = correctRadius(config.SPLAT_RADIUS / 100)!;
 					if (contained) {
@@ -1520,6 +1578,9 @@
 				if (splatProgram.uniforms.color) {
 					gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
 				}
+				if (splatProgram.uniforms.saturate) {
+					gl.uniform1f(splatProgram.uniforms.saturate, saturate ? 1 : 0);
+				}
 				blit(dye.write);
 				dye.swap();
 			}
@@ -1652,6 +1713,13 @@
 				clickSplat(pointer);
 			}
 
+			// The release half of mousedown / touchstart. `down` used to latch true
+			// for the life of the engine — nothing on this path reads it, but the
+			// pointer is part of the handle's contract and should tell the truth.
+			function handlePointerUp() {
+				pointers[0].down = false;
+			}
+
 			function handleFirstMouseMove(e: MouseEvent) {
 				const pointer = pointers[0];
 				const { x: posX, y: posY } = getCanvasPos(e.clientX, e.clientY);
@@ -1697,11 +1765,14 @@
 			// Add event listeners
 			if (interactive) {
 				window.addEventListener("mousedown", handleMouseDown);
+				window.addEventListener("mouseup", handlePointerUp);
 				document.body.addEventListener("mousemove", handleFirstMouseMove);
 				window.addEventListener("mousemove", handleMouseMove);
 				document.body.addEventListener("touchstart", handleFirstTouchStart);
 				window.addEventListener("touchstart", handleTouchStart, false);
 				window.addEventListener("touchmove", handleTouchMove, false);
+				window.addEventListener("touchend", handlePointerUp);
+				window.addEventListener("touchcancel", handlePointerUp);
 			}
 
 			// Pause animation when scrolled out of view
@@ -1747,16 +1818,31 @@
 				if (autoSplatTimer) clearInterval(autoSplatTimer);
 				if (interactive) {
 					window.removeEventListener("mousedown", handleMouseDown);
+					window.removeEventListener("mouseup", handlePointerUp);
 					document.body.removeEventListener("mousemove", handleFirstMouseMove);
 					window.removeEventListener("mousemove", handleMouseMove);
 					document.body.removeEventListener("touchstart", handleFirstTouchStart);
 					window.removeEventListener("touchstart", handleTouchStart);
 					window.removeEventListener("touchmove", handleTouchMove);
+					window.removeEventListener("touchend", handlePointerUp);
+					window.removeEventListener("touchcancel", handlePointerUp);
 				}
 				if (contained) {
 					window.removeEventListener("resize", updateCanvasRectCache);
 					window.removeEventListener("scroll", updateCanvasRectCache);
 				}
+				// Hand the GPU memory back, then the context itself. Unlike the React
+				// port, a Svelte unmount discards the <canvas> — nothing will call
+				// getContext on it again — so a lost context costs nothing, while a
+				// live one would hold a slot in the browser's context budget until
+				// GC. Guarded: the singleton runs the previous instance's cleanup
+				// when a newer one mounts, and the component runs it again on its
+				// own unmount.
+				if (glDisposed) return;
+				glDisposed = true;
+				for (const dispose of glDisposers) dispose();
+				glDisposers.length = 0;
+				gl.getExtension("WEBGL_lose_context")?.loseContext();
 			}
 
 			// Register before notifying: a throwing callback must not cost us the

package/dist/fancy-ui/fluid-cursor/README.md

@@ -134,4 +134,6 @@ Notes:
 - Like the other simulation props, dither props are applied at mount; re-key the
   component to change them at runtime.
 - Raise `colorIntensity` (≈ `0.4`+) so the dye reliably crosses the first
-  quantization step; at the default `0.15` dots stay sparse.
+  quantization step; at the default `0.15` dots stay sparse. A click's extra
+  brightness is capped independently of `colorIntensity`, so raising it does not
+  make clicks pool into a solid disc.

package/dist/fancy-ui/fluid-cursor/fluid-shared.d.ts

@@ -36,6 +36,24 @@ export declare function correctRadius(radius: number, width: number, height: num
  * length under ~30% of the container height.
  */
 export declare function scaleRadiusForContainer(radius: number, containerHeight: number, viewportHeight: number): number;
+/**
+ * Dye a click deposits at its centre, in multiples of the hue: the engine's
+ * default `colorIntensity` (0.15) times the ×10 boost the solver has always
+ * given a click — the amount that reads as a bright pop on every renderer.
+ */
+export declare const CLICK_PEAK = 1.5;
+/**
+ * The boost a click applies to an already intensity-scaled colour, chosen so
+ * the peak lands on CLICK_PEAK whatever `colorIntensity` is.
+ *
+ * The historical fixed ×10 compounded `colorIntensity`. At the default 0.15
+ * that is a 1.5 peak; but the dither pass asks consumers to raise the
+ * intensity to ≈0.4+, and at 0.6 the same ×10 stacked 5.4 per click into an
+ * unclamped half-float dye buffer that the dither display then clamps to 1
+ * and quantises — every click grew a flat, saturated disc that never read as
+ * a splat. Capping the boost at 10 keeps intensities ≤ 0.15 byte-identical.
+ */
+export declare function clickBoost(colorIntensity: number): number;
 export declare function correctDeltaX(delta: number, width: number, height: number): number;
 export declare function correctDeltaY(delta: number, width: number, height: number): number;
 /**

package/dist/fancy-ui/fluid-cursor/fluid-shared.js

@@ -111,6 +111,28 @@ export function scaleRadiusForContainer(radius, containerHeight, viewportHeight)
     // already larger must never be shrunk by entering a small container.
     return Math.max(radius, Math.min(radius * k, 0.09));
 }
+/**
+ * Dye a click deposits at its centre, in multiples of the hue: the engine's
+ * default `colorIntensity` (0.15) times the ×10 boost the solver has always
+ * given a click — the amount that reads as a bright pop on every renderer.
+ */
+export const CLICK_PEAK = 1.5;
+/**
+ * The boost a click applies to an already intensity-scaled colour, chosen so
+ * the peak lands on CLICK_PEAK whatever `colorIntensity` is.
+ *
+ * The historical fixed ×10 compounded `colorIntensity`. At the default 0.15
+ * that is a 1.5 peak; but the dither pass asks consumers to raise the
+ * intensity to ≈0.4+, and at 0.6 the same ×10 stacked 5.4 per click into an
+ * unclamped half-float dye buffer that the dither display then clamps to 1
+ * and quantises — every click grew a flat, saturated disc that never read as
+ * a splat. Capping the boost at 10 keeps intensities ≤ 0.15 byte-identical.
+ */
+export function clickBoost(colorIntensity) {
+    if (!(colorIntensity > 0))
+        return 0;
+    return Math.min(10, CLICK_PEAK / colorIntensity);
+}
 export function correctDeltaX(delta, width, height) {
     const aspectRatio = width / height;
     if (aspectRatio < 1)

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { scaleRadiusForContainer, correctRadius, getSimResolution } from "./fluid-shared.js";
+import { scaleRadiusForContainer, correctRadius, getSimResolution, clickBoost, CLICK_PEAK, } from "./fluid-shared.js";
 describe("scaleRadiusForContainer", () => {
     it("keeps the radius unchanged at viewport size (fullscreen)", () => {
         expect(scaleRadiusForContainer(0.002, 900, 900)).toBe(0.002);
@@ -37,3 +37,19 @@ describe("getSimResolution", () => {
         expect(getSimResolution(128, 500, 1000)).toEqual({ width: 128, height: 256 });
     });
 });
+describe("clickBoost", () => {
+    it("keeps the historical ×10 at the default intensity and below", () => {
+        expect(clickBoost(0.15)).toBe(10);
+        expect(clickBoost(0.05)).toBe(10);
+    });
+    it("lands a click on CLICK_PEAK once the intensity is raised", () => {
+        expect(clickBoost(0.6)).toBeCloseTo(2.5);
+        expect(clickBoost(1)).toBe(1.5);
+        expect(0.6 * clickBoost(0.6)).toBeCloseTo(CLICK_PEAK);
+    });
+    it("deposits nothing for a zero or invalid intensity", () => {
+        expect(clickBoost(0)).toBe(0);
+        expect(clickBoost(-1)).toBe(0);
+        expect(clickBoost(Number.NaN)).toBe(0);
+    });
+});

package/dist/fancy-ui/fluid-cursor/webgpu-engine.d.ts

@@ -20,6 +20,12 @@ export interface WebGpuFluidOptions {
     pauseWhenHidden: boolean;
     splatOnMount: boolean;
     generateColor: () => ColorRGB;
+    /**
+     * Multiplier a click applies to the (already intensity-scaled) colour
+     * `generateColor()` returns — `clickBoost(colorIntensity)` from
+     * fluid-shared, so the peak is the same whatever the intensity.
+     */
+    clickBoost: number;
 }
 /**
  * Full WebGPU setup for FluidCursor: engine + pointer wiring + rAF loop +

package/dist/fancy-ui/fluid-cursor/webgpu-engine.js

@@ -63,7 +63,11 @@ fn fs_splat(in: VSOut) -> @location(0) vec4f {
 	p.x = p.x * u.aspect;
 	let splat = exp(-dot(p, p) / u.radius) * u.color.rgb;
 	let base = textureSample(tex0, smpLinear, in.uv).rgb;
-	return vec4f(base + splat, 1.0);
+	// color.a is the click flag: a click splat lifts each texel to its own
+	// profile instead of adding to it, so a burst of clicks paints the same
+	// disc once instead of summing towards white and widening every click.
+	let sum = select(base + splat, max(base, splat), u.color.a > 0.5);
+	return vec4f(sum, 1.0);
 }
 
 @fragment
@@ -376,7 +380,8 @@ async function createWebGpuFluid(canvas, opts) {
                 scratch[OFF_COLOR] = v.color[0];
                 scratch[OFF_COLOR + 1] = v.color[1];
                 scratch[OFF_COLOR + 2] = v.color[2];
-                scratch[OFF_COLOR + 3] = 1;
+                // Only the splat pass reads .a (as its click flag); it defaults off.
+                scratch[OFF_COLOR + 3] = v.color[3] ?? 0;
             }
             scratch[OFF_DT] = v.dt ?? 0;
             scratch[OFF_DISSIPATION] = v.dissipation ?? 0;
@@ -532,7 +537,7 @@ async function createWebGpuFluid(canvas, opts) {
                 initTextures();
             }
         }
-        function splat(x, y, dx, dy, color) {
+        function splat(x, y, dx, dy, color, saturate = false) {
             if (destroyed || lost || !velocity || !dye)
                 return;
             let radius = correctRadius(opts.splatRadius / 100, canvas.width, canvas.height);
@@ -548,7 +553,7 @@ async function createWebGpuFluid(canvas, opts) {
             });
             writeUniforms(uSplatDye, {
                 point: [x, y],
-                color: [color.r, color.g, color.b],
+                color: [color.r, color.g, color.b, saturate ? 1 : 0],
                 aspect,
                 radius,
             });
@@ -707,13 +712,20 @@ export async function startWebGpuFluid(canvas, opts) {
         engine.splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
     }
     function clickSplat(pointer) {
-        const color = opts.generateColor();
-        color.r *= 10;
-        color.g *= 10;
-        color.b *= 10;
+        // COPY, never scale in place: with `fluidColor` / `fluidColors` set,
+        // generateColor() hands back the cached palette object itself, and scaling
+        // that multiplied the palette again on every click.
+        const base = opts.generateColor();
+        const color = {
+            r: base.r * opts.clickBoost,
+            g: base.g * opts.clickBoost,
+            b: base.b * opts.clickBoost,
+        };
         const dx = 10 * (Math.random() - 0.5);
         const dy = 30 * (Math.random() - 0.5);
-        engine.splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color);
+        // Saturating: a burst of clicks on one spot pools at this colour rather
+        // than summing towards white (a click has next to no velocity).
+        engine.splat(pointer.texcoordX, pointer.texcoordY, dx, dy, color, true);
     }
     function multipleSplats(steps) {
         // Simulate a cursor sweep along a random arc — each step on its own
@@ -780,6 +792,11 @@ export async function startWebGpuFluid(canvas, opts) {
         updatePointerDownData(pointer, -1, posX, posY);
         clickSplat(pointer);
     }
+    // The release half of mousedown / touchstart — `down` used to latch true for
+    // the life of the engine.
+    function handlePointerUp() {
+        pointers[0].down = false;
+    }
     function handleFirstMouseMove(e) {
         const pointer = pointers[0];
         const { x: posX, y: posY } = getCanvasPos(e.clientX, e.clientY);
@@ -823,11 +840,14 @@ export async function startWebGpuFluid(canvas, opts) {
     }
     if (opts.interactive) {
         window.addEventListener("mousedown", handleMouseDown);
+        window.addEventListener("mouseup", handlePointerUp);
         document.body.addEventListener("mousemove", handleFirstMouseMove);
         window.addEventListener("mousemove", handleMouseMove);
         document.body.addEventListener("touchstart", handleFirstTouchStart);
         window.addEventListener("touchstart", handleTouchStart, false);
         window.addEventListener("touchmove", handleTouchMove, false);
+        window.addEventListener("touchend", handlePointerUp);
+        window.addEventListener("touchcancel", handlePointerUp);
     }
     let observer = null;
     if (opts.pauseWhenHidden) {
@@ -910,11 +930,14 @@ export async function startWebGpuFluid(canvas, opts) {
                 clearInterval(autoSplatTimer);
             if (opts.interactive) {
                 window.removeEventListener("mousedown", handleMouseDown);
+                window.removeEventListener("mouseup", handlePointerUp);
                 document.body.removeEventListener("mousemove", handleFirstMouseMove);
                 window.removeEventListener("mousemove", handleMouseMove);
                 document.body.removeEventListener("touchstart", handleFirstTouchStart);
                 window.removeEventListener("touchstart", handleTouchStart);
                 window.removeEventListener("touchmove", handleTouchMove);
+                window.removeEventListener("touchend", handlePointerUp);
+                window.removeEventListener("touchcancel", handlePointerUp);
             }
             if (opts.contained) {
                 window.removeEventListener("resize", updateCanvasRectCache);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fancy-ui-svelte",
   "private": false,
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "145 UI components for Svelte 5 — core primitives plus WebGL, GSAP and CSS motion, styled with Tailwind CSS v4.",
   "author": "Rama Herbin",
   "funding": "https://github.com/sponsors/RamaHerbin",

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

@@ -1,38 +0,0 @@
-/**
- * Theme registry (docs-site theming data).
- *
- * A named theme is a set of CSS-variable overrides applied on top of the base
- * light/dark token sets defined in `src/routes/layout.css`. The theme store
- * (`src/lib/stores/theme.svelte.ts`) applies a theme by setting these variables
- * inline on `<html>`, toggling the `.dark` class per `colorScheme`, and setting
- * a `data-theme` attribute.
- *
- * NOTE: this module is docs/theming data only. It is NOT imported by any shipped
- * component in `src/lib/fancy-ui/*`, so it does not affect the published package.
- */
-export type ColorScheme = "light" | "dark";
-export interface ThemeDef {
-    /** Stable id, used as the `data-theme` value and persistence key. */
-    name: string;
-    /** Human label shown in the switcher. */
-    label: string;
-    /** Whether the theme reads as light or dark (drives the `.dark` class). */
-    colorScheme: ColorScheme;
-    /** CSS custom-property overrides applied on top of the base light/dark set. */
-    tokens: Record<string, string>;
-    /** Four representative colors for the switcher swatch. */
-    swatch: [string, string, string, string];
-}
-/** Every CSS variable a theme may set. The store clears these before applying a theme. */
-export declare const MANAGED_VARS: readonly ["--background", "--foreground", "--card", "--card-foreground", "--popover", "--popover-foreground", "--primary", "--primary-foreground", "--secondary", "--secondary-foreground", "--muted", "--muted-foreground", "--accent", "--accent-foreground", "--border", "--input", "--ring", "--radius", "--rainbow-1", "--rainbow-2", "--rainbow-3", "--rainbow-4", "--rainbow-5", "--sidebar", "--sidebar-foreground", "--sidebar-primary", "--sidebar-primary-foreground", "--sidebar-accent", "--sidebar-accent-foreground", "--sidebar-border"];
-/**
- * The theme list.
- *
- * `light` and `dark` carry no token overrides — they are the base look defined
- * by `:root` / `.dark` in `layout.css`. The remaining themes are self-contained.
- * `sunset` / `ocean` / `mono` mirror the theme-generator presets.
- */
-export declare const themes: ThemeDef[];
-export declare function getTheme(name: string): ThemeDef | undefined;
-export declare const themeNames: string[];
-export declare const DEFAULT_THEME = "light";

package/dist/fancy-ui/themes.js

@@ -1,356 +0,0 @@
-/**
- * Theme registry (docs-site theming data).
- *
- * A named theme is a set of CSS-variable overrides applied on top of the base
- * light/dark token sets defined in `src/routes/layout.css`. The theme store
- * (`src/lib/stores/theme.svelte.ts`) applies a theme by setting these variables
- * inline on `<html>`, toggling the `.dark` class per `colorScheme`, and setting
- * a `data-theme` attribute.
- *
- * NOTE: this module is docs/theming data only. It is NOT imported by any shipped
- * component in `src/lib/fancy-ui/*`, so it does not affect the published package.
- */
-/** Every CSS variable a theme may set. The store clears these before applying a theme. */
-export const MANAGED_VARS = [
-    "--background",
-    "--foreground",
-    "--card",
-    "--card-foreground",
-    "--popover",
-    "--popover-foreground",
-    "--primary",
-    "--primary-foreground",
-    "--secondary",
-    "--secondary-foreground",
-    "--muted",
-    "--muted-foreground",
-    "--accent",
-    "--accent-foreground",
-    "--border",
-    "--input",
-    "--ring",
-    "--radius",
-    "--rainbow-1",
-    "--rainbow-2",
-    "--rainbow-3",
-    "--rainbow-4",
-    "--rainbow-5",
-    "--sidebar",
-    "--sidebar-foreground",
-    "--sidebar-primary",
-    "--sidebar-primary-foreground",
-    "--sidebar-accent",
-    "--sidebar-accent-foreground",
-    "--sidebar-border",
-];
-const DEFAULT_RAINBOW = [
-    "hsl(0 100% 63%)",
-    "hsl(270 100% 63%)",
-    "hsl(210 100% 63%)",
-    "hsl(195 100% 63%)",
-    "hsl(90 100% 63%)",
-];
-/** Expand a compact spec into a full ThemeDef with a complete token map. */
-function defineTheme(s) {
-    const card = s.card ?? s.bg;
-    const secondary = s.secondary ?? s.accent;
-    const secondaryFg = s.secondaryFg ?? s.accentFg;
-    const muted = s.muted ?? s.border ?? card;
-    const mutedFg = s.mutedFg ?? s.fg;
-    const border = s.border ?? s.muted ?? s.fg;
-    const ring = s.ring ?? s.primary;
-    const radius = s.radius ?? "0.625rem";
-    const rainbow = s.rainbow ?? DEFAULT_RAINBOW;
-    return {
-        name: s.name,
-        label: s.label,
-        colorScheme: s.colorScheme,
-        swatch: [s.primary, s.accent, secondary, s.bg],
-        tokens: {
-            "--background": s.bg,
-            "--foreground": s.fg,
-            "--card": card,
-            "--card-foreground": s.fg,
-            "--popover": card,
-            "--popover-foreground": s.fg,
-            "--primary": s.primary,
-            "--primary-foreground": s.primaryFg,
-            "--secondary": secondary,
-            "--secondary-foreground": secondaryFg,
-            "--muted": muted,
-            "--muted-foreground": mutedFg,
-            "--accent": s.accent,
-            "--accent-foreground": s.accentFg,
-            "--border": border,
-            "--input": border,
-            "--ring": ring,
-            "--radius": radius,
-            "--rainbow-1": rainbow[0],
-            "--rainbow-2": rainbow[1],
-            "--rainbow-3": rainbow[2],
-            "--rainbow-4": rainbow[3],
-            "--rainbow-5": rainbow[4],
-            "--sidebar": card,
-            "--sidebar-foreground": s.fg,
-            "--sidebar-primary": s.primary,
-            "--sidebar-primary-foreground": s.primaryFg,
-            "--sidebar-accent": muted,
-            "--sidebar-accent-foreground": s.fg,
-            "--sidebar-border": border,
-        },
-    };
-}
-/**
- * The theme list.
- *
- * `light` and `dark` carry no token overrides — they are the base look defined
- * by `:root` / `.dark` in `layout.css`. The remaining themes are self-contained.
- * `sunset` / `ocean` / `mono` mirror the theme-generator presets.
- */
-export const themes = [
-    {
-        name: "light",
-        label: "Light",
-        colorScheme: "light",
-        tokens: {},
-        swatch: [
-            "oklch(0.208 0.042 265.755)",
-            "oklch(0.65 0.15 265)",
-            "oklch(0.929 0.013 255.508)",
-            "#ffffff",
-        ],
-    },
-    {
-        name: "dark",
-        label: "Dark",
-        colorScheme: "dark",
-        tokens: {},
-        swatch: [
-            "oklch(0.929 0.013 255.508)",
-            "oklch(0.7 0.15 265)",
-            "oklch(0.15 0.005 260)",
-            "#0a0a0a",
-        ],
-    },
-    defineTheme({
-        name: "cupcake",
-        label: "Cupcake",
-        colorScheme: "light",
-        bg: "#faf7f5",
-        fg: "#291334",
-        card: "#ffffff",
-        primary: "#65c3c8",
-        primaryFg: "#004b50",
-        secondary: "#ef9fbc",
-        secondaryFg: "#5c2437",
-        accent: "#eeaf3a",
-        accentFg: "#4a3000",
-        border: "#e7e2df",
-        radius: "1rem",
-    }),
-    defineTheme({
-        name: "emerald",
-        label: "Emerald",
-        colorScheme: "light",
-        bg: "#ffffff",
-        fg: "#333c4d",
-        primary: "#66cc8a",
-        primaryFg: "#0c3d24",
-        secondary: "#377cfb",
-        secondaryFg: "#ffffff",
-        accent: "#ea5234",
-        accentFg: "#ffffff",
-        border: "#e5e7eb",
-        radius: "0.5rem",
-    }),
-    defineTheme({
-        name: "corporate",
-        label: "Corporate",
-        colorScheme: "light",
-        bg: "#ffffff",
-        fg: "#181a2a",
-        primary: "#4b6bfb",
-        primaryFg: "#ffffff",
-        secondary: "#7b92b2",
-        secondaryFg: "#ffffff",
-        accent: "#67cba0",
-        accentFg: "#00382a",
-        border: "#e5e7eb",
-        radius: "0.25rem",
-    }),
-    defineTheme({
-        name: "retro",
-        label: "Retro",
-        colorScheme: "light",
-        bg: "#ece3ca",
-        fg: "#282425",
-        card: "#e4d8b4",
-        primary: "#ef9995",
-        primaryFg: "#282425",
-        secondary: "#a4cbb4",
-        secondaryFg: "#282425",
-        accent: "#dc8850",
-        accentFg: "#282425",
-        border: "#d1c7a3",
-        radius: "0.5rem",
-    }),
-    defineTheme({
-        name: "cyberpunk",
-        label: "Cyberpunk",
-        colorScheme: "light",
-        bg: "#fff248",
-        fg: "#0f0f00",
-        card: "#fdf700",
-        primary: "#ff7598",
-        primaryFg: "#330014",
-        secondary: "#75d1f0",
-        secondaryFg: "#00222e",
-        accent: "#c07eec",
-        accentFg: "#1e0033",
-        border: "#e6dc00",
-        radius: "0rem",
-        rainbow: [
-            "hsl(330 100% 63%)",
-            "hsl(280 100% 63%)",
-            "hsl(190 100% 60%)",
-            "hsl(55 100% 55%)",
-            "hsl(150 100% 55%)",
-        ],
-    }),
-    defineTheme({
-        name: "synthwave",
-        label: "Synthwave",
-        colorScheme: "dark",
-        bg: "#1a103d",
-        fg: "#f9f7fd",
-        card: "#241650",
-        primary: "#e779c1",
-        primaryFg: "#2a0e2b",
-        secondary: "#58c7f3",
-        secondaryFg: "#003044",
-        accent: "#f3cc30",
-        accentFg: "#3a2e00",
-        muted: "#2b1c5e",
-        mutedFg: "#b9a9e6",
-        border: "#3a2a6b",
-        radius: "0.75rem",
-        rainbow: [
-            "hsl(320 90% 65%)",
-            "hsl(280 90% 68%)",
-            "hsl(195 95% 60%)",
-            "hsl(48 95% 58%)",
-            "hsl(160 80% 55%)",
-        ],
-    }),
-    defineTheme({
-        name: "dracula",
-        label: "Dracula",
-        colorScheme: "dark",
-        bg: "#282a36",
-        fg: "#f8f8f2",
-        card: "#343746",
-        primary: "#ff79c6",
-        primaryFg: "#28202b",
-        secondary: "#bd93f9",
-        secondaryFg: "#241a33",
-        accent: "#ffb86c",
-        accentFg: "#3a2600",
-        muted: "#3a3d4d",
-        mutedFg: "#c7c9d6",
-        border: "#44475a",
-        radius: "0.5rem",
-    }),
-    defineTheme({
-        name: "forest",
-        label: "Forest",
-        colorScheme: "dark",
-        bg: "#171212",
-        fg: "#e0ded9",
-        card: "#1f1a1a",
-        primary: "#1eb854",
-        primaryFg: "#04220f",
-        secondary: "#1fd65f",
-        secondaryFg: "#04220f",
-        accent: "#d99330",
-        accentFg: "#2b1c00",
-        muted: "#26201f",
-        mutedFg: "#b3b0aa",
-        border: "#2e2726",
-        radius: "0.75rem",
-    }),
-    defineTheme({
-        name: "sunset",
-        label: "Sunset",
-        colorScheme: "dark",
-        bg: "#1c1410",
-        fg: "#f5e9e0",
-        card: "#261a13",
-        primary: "oklch(0.62 0.19 30)",
-        primaryFg: "#22100a",
-        secondary: "oklch(0.7 0.17 8)",
-        secondaryFg: "#2a0d0a",
-        accent: "oklch(0.7 0.17 8)",
-        accentFg: "#2a0d0a",
-        muted: "#33241b",
-        mutedFg: "#d8c3b4",
-        border: "#3a2a20",
-        radius: "1rem",
-        rainbow: [
-            "hsl(12 100% 63%)",
-            "hsl(30 100% 63%)",
-            "hsl(350 100% 63%)",
-            "hsl(320 100% 63%)",
-            "hsl(50 100% 63%)",
-        ],
-    }),
-    defineTheme({
-        name: "ocean",
-        label: "Ocean",
-        colorScheme: "light",
-        bg: "#f4fbff",
-        fg: "#0b2a3a",
-        card: "#ffffff",
-        primary: "oklch(0.55 0.13 230)",
-        primaryFg: "#ffffff",
-        secondary: "oklch(0.72 0.13 190)",
-        secondaryFg: "#00303a",
-        accent: "oklch(0.72 0.13 190)",
-        accentFg: "#00303a",
-        muted: "#e3f1f9",
-        mutedFg: "#3a5c6b",
-        border: "#d3e7f0",
-        radius: "0.5rem",
-        rainbow: [
-            "hsl(200 100% 63%)",
-            "hsl(220 100% 63%)",
-            "hsl(180 100% 63%)",
-            "hsl(240 100% 63%)",
-            "hsl(160 100% 63%)",
-        ],
-    }),
-    defineTheme({
-        name: "mono",
-        label: "Mono",
-        colorScheme: "dark",
-        bg: "#0a0a0a",
-        fg: "#fafafa",
-        card: "#161616",
-        primary: "oklch(0.32 0 0)",
-        primaryFg: "#fafafa",
-        secondary: "oklch(0.6 0 0)",
-        secondaryFg: "#0a0a0a",
-        accent: "oklch(0.6 0 0)",
-        accentFg: "#0a0a0a",
-        muted: "#1e1e1e",
-        mutedFg: "#a3a3a3",
-        border: "#2a2a2a",
-        radius: "0.25rem",
-        rainbow: ["hsl(0 0% 80%)", "hsl(0 0% 65%)", "hsl(0 0% 90%)", "hsl(0 0% 55%)", "hsl(0 0% 75%)"],
-    }),
-];
-const themeByName = new Map(themes.map((t) => [t.name, t]));
-export function getTheme(name) {
-    return themeByName.get(name);
-}
-export const themeNames = themes.map((t) => t.name);
-export const DEFAULT_THEME = "light";