@joewinke/jatui 0.1.33 → 0.2.0

package/dist/showcase/backdrop/GrainGradient.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		grainGradientFragmentShader,
+		GrainGradientShapes,
+		getShaderColorFromString,
+		getShaderNoiseTexture
+	} from '@paper-design/shaders';
+	import type { GrainGradientShape } from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Up to 7 gradient colors. Defaults to DaisyUI primary/secondary/accent. */
+		colors?: string[];
+		/** Background fill color. Defaults to DaisyUI base-100. */
+		colorBack?: string;
+		/** Animation speed multiplier. 0 = static. Default 0.3. */
+		speed?: number;
+		/** Color transition sharpness 0–1 (0 = hard, 1 = smooth). Default 0.6. */
+		softness?: number;
+		/** Distortion between color bands 0–1. Default 0.3. */
+		intensity?: number;
+		/** Grainy noise overlay 0–1. Default 0.35. */
+		noise?: number;
+		/** Shape type for the gradient pattern. Default 'blob'. */
+		shape?: GrainGradientShape;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colors,
+		colorBack,
+		speed = 0.3,
+		softness = 0.6,
+		intensity = 0.3,
+		noise = 0.35,
+		shape = 'blob',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): { colors: string[]; colorBack: string } {
+		const style = getComputedStyle(el);
+		return {
+			colors: colors && colors.length > 0
+				? colors
+				: [
+						style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+						style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+						style.getPropertyValue('--color-accent').trim() || '#0ea5e9'
+					],
+			colorBack: colorBack || style.getPropertyValue('--color-base-100').trim() || '#ffffff'
+		};
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colorBack: getShaderColorFromString(resolved.colorBack),
+			u_colors: resolved.colors.map(getShaderColorFromString),
+			u_colorsCount: resolved.colors.length,
+			u_softness: softness,
+			u_intensity: intensity,
+			u_noise: noise,
+			u_shape: GrainGradientShapes[shape],
+			u_noiseTexture: getShaderNoiseTexture()
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(
+			el,
+			grainGradientFragmentShader,
+			buildUniforms(el),
+			undefined,
+			effectiveSpeed,
+			prefersReduced ? 1 : 0,
+			2,
+			1920 * 1080 * 4,
+			['u_noiseTexture']
+		);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/GrainGradient.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { GrainGradientShape } from '@paper-design/shaders';
+interface Props {
+    /** Up to 7 gradient colors. Defaults to DaisyUI primary/secondary/accent. */
+    colors?: string[];
+    /** Background fill color. Defaults to DaisyUI base-100. */
+    colorBack?: string;
+    /** Animation speed multiplier. 0 = static. Default 0.3. */
+    speed?: number;
+    /** Color transition sharpness 0–1 (0 = hard, 1 = smooth). Default 0.6. */
+    softness?: number;
+    /** Distortion between color bands 0–1. Default 0.3. */
+    intensity?: number;
+    /** Grainy noise overlay 0–1. Default 0.35. */
+    noise?: number;
+    /** Shape type for the gradient pattern. Default 'blob'. */
+    shape?: GrainGradientShape;
+    class?: string;
+    children?: Snippet;
+}
+declare const GrainGradient: import("svelte").Component<Props, {}, "">;
+type GrainGradient = ReturnType<typeof GrainGradient>;
+export default GrainGradient;

package/dist/showcase/backdrop/MeshGradient.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		meshGradientFragmentShader,
+		getShaderColorFromString
+	} from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Up to 10 colors. Defaults to DaisyUI primary/secondary/accent. */
+		colors?: string[];
+		/** Animation speed multiplier. 0 = static. Default 0.4. */
+		speed?: number;
+		/** Noise distortion strength 0–1. Default 0.3. */
+		distortion?: number;
+		/** Vortex distortion 0–1. Default 0. */
+		swirl?: number;
+		/** Grain mixed into shape edges 0–1. Default 0. */
+		grainMixer?: number;
+		/** Post-processing grain overlay 0–1. Default 0. */
+		grainOverlay?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colors,
+		speed = 0.4,
+		distortion = 0.3,
+		swirl = 0,
+		grainMixer = 0,
+		grainOverlay = 0,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): string[] {
+		if (colors && colors.length > 0) return colors;
+		const style = getComputedStyle(el);
+		return [
+			style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+			style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+			style.getPropertyValue('--color-accent').trim() || '#0ea5e9'
+		];
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colors: resolved.map(getShaderColorFromString),
+			u_colorsCount: resolved.length,
+			u_distortion: distortion,
+			u_swirl: swirl,
+			u_grainMixer: grainMixer,
+			u_grainOverlay: grainOverlay
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(el, meshGradientFragmentShader, buildUniforms(el), undefined, effectiveSpeed, prefersReduced ? 1 : 0, 2, 1920 * 1080 * 4);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/MeshGradient.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Up to 10 colors. Defaults to DaisyUI primary/secondary/accent. */
+    colors?: string[];
+    /** Animation speed multiplier. 0 = static. Default 0.4. */
+    speed?: number;
+    /** Noise distortion strength 0–1. Default 0.3. */
+    distortion?: number;
+    /** Vortex distortion 0–1. Default 0. */
+    swirl?: number;
+    /** Grain mixed into shape edges 0–1. Default 0. */
+    grainMixer?: number;
+    /** Post-processing grain overlay 0–1. Default 0. */
+    grainOverlay?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const MeshGradient: import("svelte").Component<Props, {}, "">;
+type MeshGradient = ReturnType<typeof MeshGradient>;
+export default MeshGradient;

package/dist/showcase/backdrop/Metaballs.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		metaballsFragmentShader,
+		getShaderColorFromString,
+		getShaderNoiseTexture
+	} from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Up to 8 blob colors. Defaults to DaisyUI primary/secondary/accent. */
+		colors?: string[];
+		/** Background fill color. Defaults to DaisyUI base-100. */
+		colorBack?: string;
+		/** Animation speed multiplier. 0 = static. Default 0.35. */
+		speed?: number;
+		/** Number of balls 1–20. Default 6. */
+		count?: number;
+		/** Ball size 0–1. Default 0.45. */
+		size?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colors,
+		colorBack,
+		speed = 0.35,
+		count = 6,
+		size = 0.45,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): { colors: string[]; colorBack: string } {
+		const style = getComputedStyle(el);
+		return {
+			colors: colors && colors.length > 0
+				? colors
+				: [
+						style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+						style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+						style.getPropertyValue('--color-accent').trim() || '#0ea5e9'
+					],
+			colorBack: colorBack || style.getPropertyValue('--color-base-100').trim() || '#ffffff'
+		};
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colorBack: getShaderColorFromString(resolved.colorBack),
+			u_colors: resolved.colors.map(getShaderColorFromString),
+			u_colorsCount: resolved.colors.length,
+			u_count: count,
+			u_size: size,
+			u_noiseTexture: getShaderNoiseTexture()
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(
+			el,
+			metaballsFragmentShader,
+			buildUniforms(el),
+			undefined,
+			effectiveSpeed,
+			prefersReduced ? 1 : 0,
+			2,
+			1920 * 1080 * 4,
+			['u_noiseTexture']
+		);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/Metaballs.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Up to 8 blob colors. Defaults to DaisyUI primary/secondary/accent. */
+    colors?: string[];
+    /** Background fill color. Defaults to DaisyUI base-100. */
+    colorBack?: string;
+    /** Animation speed multiplier. 0 = static. Default 0.35. */
+    speed?: number;
+    /** Number of balls 1–20. Default 6. */
+    count?: number;
+    /** Ball size 0–1. Default 0.45. */
+    size?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const Metaballs: import("svelte").Component<Props, {}, "">;
+type Metaballs = ReturnType<typeof Metaballs>;
+export default Metaballs;

package/dist/showcase/backdrop/NeuroNoise.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		neuroNoiseFragmentShader,
+		getShaderColorFromString
+	} from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Highlight color. Defaults to DaisyUI primary. */
+		colorFront?: string;
+		/** Main web color. Defaults to DaisyUI secondary. */
+		colorMid?: string;
+		/** Background color. Defaults to DaisyUI base-100. */
+		colorBack?: string;
+		/** Animation speed multiplier. 0 = static. Default 0.3. */
+		speed?: number;
+		/** Luminosity of crossing points 0–1. Default 0.5. */
+		brightness?: number;
+		/** Sharpness of bright-dark transition 0–1. Default 0.4. */
+		contrast?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colorFront,
+		colorMid,
+		colorBack,
+		speed = 0.3,
+		brightness = 0.5,
+		contrast = 0.4,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): {
+		colorFront: string;
+		colorMid: string;
+		colorBack: string;
+	} {
+		const style = getComputedStyle(el);
+		return {
+			colorFront: colorFront || style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+			colorMid: colorMid || style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+			colorBack: colorBack || style.getPropertyValue('--color-base-100').trim() || '#ffffff'
+		};
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colorFront: getShaderColorFromString(resolved.colorFront),
+			u_colorMid: getShaderColorFromString(resolved.colorMid),
+			u_colorBack: getShaderColorFromString(resolved.colorBack),
+			u_brightness: brightness,
+			u_contrast: contrast
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(
+			el,
+			neuroNoiseFragmentShader,
+			buildUniforms(el),
+			undefined,
+			effectiveSpeed,
+			prefersReduced ? 1 : 0,
+			2,
+			1920 * 1080 * 4
+		);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/NeuroNoise.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Highlight color. Defaults to DaisyUI primary. */
+    colorFront?: string;
+    /** Main web color. Defaults to DaisyUI secondary. */
+    colorMid?: string;
+    /** Background color. Defaults to DaisyUI base-100. */
+    colorBack?: string;
+    /** Animation speed multiplier. 0 = static. Default 0.3. */
+    speed?: number;
+    /** Luminosity of crossing points 0–1. Default 0.5. */
+    brightness?: number;
+    /** Sharpness of bright-dark transition 0–1. Default 0.4. */
+    contrast?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const NeuroNoise: import("svelte").Component<Props, {}, "">;
+type NeuroNoise = ReturnType<typeof NeuroNoise>;
+export default NeuroNoise;

package/dist/showcase/backdrop/ShowcaseBackdrop.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+		/** Receives the container div so callers can mount ShaderMount on it */
+		onmount?: (el: HTMLElement) => void;
+		/** Called when the container is removed */
+		ondispose?: () => void;
+	}
+
+	let { class: className = '', children, onmount, ondispose }: Props = $props();
+
+	let container: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (!container || !onmount) return;
+		onmount(container);
+		return () => ondispose?.();
+	});
+</script>
+
+<!--
+  ShowcaseBackdrop — house-rules positioning shim for WebGL/canvas backdrops.
+  Absolutely positions the shader canvas behind children, pauses via
+  IntersectionObserver when offscreen, and honours prefers-reduced-motion.
+  powered by @paper-design/shaders (Apache-2.0)
+-->
+<div class="showcase-backdrop {className}" bind:this={container}>
+	<div class="showcase-backdrop-content">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.showcase-backdrop {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.showcase-backdrop-content {
+		position: relative;
+		z-index: 1;
+	}
+</style>

package/dist/showcase/backdrop/ShowcaseBackdrop.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children?: Snippet;
+    /** Receives the container div so callers can mount ShaderMount on it */
+    onmount?: (el: HTMLElement) => void;
+    /** Called when the container is removed */
+    ondispose?: () => void;
+}
+declare const ShowcaseBackdrop: import("svelte").Component<Props, {}, "">;
+type ShowcaseBackdrop = ReturnType<typeof ShowcaseBackdrop>;
+export default ShowcaseBackdrop;