@code-of-chaos/dither 0.2.0 → 0.3.0

package/README.md

@@ -37,47 +37,27 @@ above the layers, so frameworks keep rendering their children normally.
 
 ### Framework recipes
 
-React (class, OOP):
+React (and Next.js) ship as an adapter entry - `"use client"` is baked in, so
+it drops into the Next.js App Router unchanged:
 
 ```tsx
-import { Component, createRef, type ReactNode } from "react";
-import {
-    DitherBackground,
-    type DitherBackgroundOptions,
-} from "@code-of-chaos/dither";
+import { DitherGridBackground } from "@code-of-chaos/dither/react";
 import "@code-of-chaos/dither/style.css";
 
-type Props = { options?: DitherBackgroundOptions; children?: ReactNode };
-
-export class DitherBackdrop extends Component<Props> {
-    private ref = createRef<HTMLDivElement>();
-    private background?: DitherBackground;
-
-    override componentDidMount(): void {
-        this.background = new DitherBackground(this.props.options);
-        this.background.mount(this.ref.current!);
-    }
-
-    override componentDidUpdate(prev: Props): void {
-        if (prev.options !== this.props.options) {
-            this.background?.update(this.props.options ?? {});
-        }
-    }
-
-    override componentWillUnmount(): void {
-        this.background?.destroy();
-    }
-
-    override render(): ReactNode {
-        return <div ref={this.ref}>{this.props.children}</div>;
-    }
+export function Page() {
+    return (
+        <DitherGridBackground className="min-h-screen w-full">
+            <h1>Hello world</h1>
+        </DitherGridBackground>
+    );
 }
 ```
 
-Next.js: the tile needs a browser canvas - mount inside a client component
-(`"use client"`) or in `useEffect`.
+`DitherGridBackground` accepts every `DitherBackgroundOptions` key as a prop
+plus normal div attributes and children. It is client-side only (the tile
+needs a canvas) - in Next.js keep it inside client components.
 
-Angular (directive):
+Angular (standalone directive):
 
 ```ts
 @Directive({ selector: "[ditherBackground]" })
@@ -96,7 +76,9 @@ export class DitherBackgroundDirective
     }
 
     ngOnChanges(): void {
-        this.background?.update(this.ditherBackground);
+        this.background?.update(
+            new DitherBackgroundView(this.ditherBackground).options,
+        );
     }
 
     ngOnDestroy(): void {
@@ -118,7 +100,11 @@ export function useDitherBackground(
         background = new DitherBackground(options.value);
         background.mount(el.value!);
     });
-    watch(options, (next) => background?.update(next), { deep: true });
+    watch(
+        options,
+        (next) => background?.update(new DitherBackgroundView(next).options),
+        { deep: true },
+    );
     onBeforeUnmount(() => background?.destroy());
 }
 ```
@@ -133,7 +119,8 @@ export function dither(
     const background = new DitherBackground(options);
     background.mount(node);
     return {
-        update: (next: DitherBackgroundOptions) => background.update(next),
+        update: (next: DitherBackgroundOptions) =>
+            background.update(new DitherBackgroundView(next).options),
         destroy: () => background.destroy(),
     };
 }
@@ -210,7 +197,8 @@ Notes:
 - The tile is generated in the browser (canvas), so mounting is client-side
   only.
 - `prefers-reduced-motion` disables the animations.
-- Zero runtime dependencies; plain TypeScript + DOM + CSS.
+- Zero runtime dependencies; `react` (18+) is an optional peer dependency,
+  needed only for the `./react` entry.
 
 ## License
 

package/dist/DitherBackground-CrFqrwp8.js

@@ -0,0 +1,304 @@
+// src/MathUtils.ts
+var e = class e {
+	static clamp(e, t, n) {
+		return Math.min(Math.max(e, t), n);
+	}
+	static lerp(e, t, n) {
+		return e + (t - e) * n;
+	}
+	static smoothstep(t, n, r) {
+		let i = e.clamp((r - t) / (n - t), 0, 1);
+		return i * i * (3 - 2 * i);
+	}
+	static mod(e, t) {
+		return (e % t + t) % t;
+	}
+	static hash2(e, t, n) {
+		let r = Math.imul(e, 374761393) ^ Math.imul(t, 668265263) ^ Math.imul(n, 2246822519);
+		return r = Math.imul(r ^ r >>> 13, 1274126177), r ^= r >>> 16, (r >>> 0) / 4294967296;
+	}
+}, t = class t {
+	period;
+	seed;
+	static GRADIENTS = Array.from({ length: 16 }, (e, t) => {
+		let n = t / 16 * Math.PI * 2;
+		return [Math.cos(n), Math.sin(n)];
+	});
+	constructor(e, t) {
+		this.period = e, this.seed = t;
+	}
+	sample(t, n) {
+		let r = Math.floor(t), i = Math.floor(n), a = t - r, o = n - i, s = a * a * a * (a * (a * 6 - 15) + 10), c = o * o * o * (o * (o * 6 - 15) + 10), l = e.mod(r, this.period), u = e.mod(i, this.period), d = e.mod(r + 1, this.period), f = e.mod(i + 1, this.period), p = this.gradientDot(l, u, a, o), m = this.gradientDot(d, u, a - 1, o), h = this.gradientDot(l, f, a, o - 1), g = this.gradientDot(d, f, a - 1, o - 1);
+		return e.lerp(e.lerp(p, m, s), e.lerp(h, g, s), c);
+	}
+	gradientDot(n, r, i, a) {
+		let o = t.GRADIENTS, s = o[Math.floor(e.hash2(n, r, this.seed) * o.length) % o.length];
+		return s[0] * i + s[1] * a;
+	}
+}, n = class {
+	noise;
+	frequency;
+	amplitude;
+	constructor(e, t, n) {
+		this.noise = e, this.frequency = t, this.amplitude = n;
+	}
+}, r = class {
+	octaves = [];
+	totalAmplitude;
+	constructor(e, r, i, a) {
+		let o = 1, s = 0;
+		for (let c = 0; c < i; c++) {
+			let i = Math.max(1, Math.round(e / (r * 2 ** c)));
+			this.octaves.push(new n(new t(i, a + c * 1013), i / e, o)), s += o, o *= .5;
+		}
+		this.totalAmplitude = s;
+	}
+	sample(t, n) {
+		let r = 0;
+		for (let e of this.octaves) r += e.amplitude * e.noise.sample(t * e.frequency, n * e.frequency);
+		return e.clamp(r / this.totalAmplitude * .6 + .5, 0, 1);
+	}
+}, i = class e {
+	r;
+	g;
+	b;
+	constructor(e, t, n) {
+		this.r = e, this.g = t, this.b = n;
+	}
+	static fromCss(t, n) {
+		let r = e.resolveVariable(n);
+		t.fillStyle = "#000000", t.fillStyle = r;
+		let i = t.fillStyle;
+		if (i.startsWith("#")) {
+			let t = i.slice(1), n = t.length === 3 ? t.split("").map((e) => e + e).join("") : t;
+			return new e(parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16));
+		}
+		let a = i.match(/rgba?\(([^)]+)\)/);
+		if (a) {
+			let [t, n, r] = a[1].split(/[,/\s]+/).filter(Boolean).map(Number);
+			return new e(t, n, r);
+		}
+		return new e(255, 255, 255);
+	}
+	static resolveVariable(e) {
+		let t = e.match(/^\s*var\(\s*(--[\w-]+)\s*(?:,\s*([^()]+))?\s*\)\s*$/);
+		return t && (getComputedStyle(document.documentElement).getPropertyValue(t[1]).trim() || t[2]?.trim()) || e;
+	}
+}, a = class t {
+	options;
+	static DEFAULT_CELLS = 512;
+	static BAYER_4X4 = [
+		[
+			0,
+			8,
+			2,
+			10
+		],
+		[
+			12,
+			4,
+			14,
+			6
+		],
+		[
+			3,
+			11,
+			1,
+			9
+		],
+		[
+			15,
+			7,
+			13,
+			5
+		]
+	].map((e) => e.map((e) => (e + .5) / 16));
+	islands;
+	detail;
+	constructor(e) {
+		this.options = e, this.islands = new r(e.cells, e.scale, e.octaves, e.seed), this.detail = new r(e.cells, e.detailScale, e.detailOctaves, e.seed + 31337);
+	}
+	toDataURL() {
+		let { cells: n, color: r, density: a, contrast: o, detailStrength: s, clampLow: c, clampHigh: l, seed: u, maxFill: d, jitter: f } = this.options, p = document.createElement("canvas");
+		p.width = n, p.height = n;
+		let m = p.getContext("2d");
+		if (!m) return "";
+		let h = i.fromCss(m, r), g = m.createImageData(n, n), _ = g.data;
+		for (let r = 0; r < n; r++) for (let i = 0; i < n; i++) {
+			let p = this.islands.sample(i, r), m = this.detail.sample(i, r), g = e.clamp(p + (m - .5) * s, 0, 1), v = e.smoothstep(c, Math.max(l, c + .001), g), y = e.clamp((v - .5) * o + a, 0, d);
+			if (t.BAYER_4X4[r % 4][i % 4] * (1 - f) + e.hash2(i, r, u + 991) * f < y) {
+				let t = (r * n + i) * 4;
+				_[t] = h.r, _[t + 1] = h.g, _[t + 2] = h.b, _[t + 3] = Math.round(255 * e.clamp(.4 + .6 * v, 0, 1));
+			}
+		}
+		return m.putImageData(g, 0, 0), p.toDataURL("image/png");
+	}
+}, o = class e {
+	static DEFAULTS = {
+		backgroundColor: "linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)",
+		gridColor: "var(--color-steel-500)",
+		gridSize: 41,
+		gridOpacity: .23,
+		noiseColor: "var(--color-scarlet-600)",
+		noiseOpacity: .5,
+		noiseSize: 3,
+		noiseTileCells: a.DEFAULT_CELLS,
+		noiseDensity: .55,
+		noiseContrast: 1.8,
+		noiseScale: 32,
+		noiseOctaves: 3,
+		noiseDetailScale: 5,
+		noiseDetailOctaves: 3,
+		noiseDetailStrength: .2,
+		noiseClampLow: 0,
+		noiseClampHigh: .9,
+		noiseSeed: 69,
+		noiseMaxFill: .6,
+		noiseJitter: .3,
+		noiseSpeed: 180,
+		noiseAngle: 100,
+		noiseTravel: 1,
+		fadeStart: 0,
+		fadeEnd: 90,
+		animateNoise: !0,
+		animateGlow: !0
+	};
+	static TILE_INPUTS = [
+		"noiseTileCells",
+		"noiseColor",
+		"noiseDensity",
+		"noiseContrast",
+		"noiseScale",
+		"noiseOctaves",
+		"noiseDetailScale",
+		"noiseDetailOctaves",
+		"noiseDetailStrength",
+		"noiseClampLow",
+		"noiseClampHigh",
+		"noiseSeed",
+		"noiseMaxFill",
+		"noiseJitter"
+	];
+	options;
+	constructor(t = {}) {
+		this.options = {
+			...e.DEFAULTS,
+			...e.defined(t)
+		};
+	}
+	merge(t) {
+		return new e({
+			...this.options,
+			...e.defined(t)
+		});
+	}
+	rebuildsTile(t) {
+		return e.TILE_INPUTS.some((e) => this.options[e] !== t.options[e]);
+	}
+	tileOptions() {
+		let e = this.options;
+		return {
+			cells: e.noiseTileCells,
+			color: e.noiseColor,
+			density: e.noiseDensity,
+			contrast: e.noiseContrast,
+			scale: e.noiseScale,
+			octaves: e.noiseOctaves,
+			detailScale: e.noiseDetailScale,
+			detailOctaves: e.noiseDetailOctaves,
+			detailStrength: e.noiseDetailStrength,
+			clampLow: e.noiseClampLow,
+			clampHigh: e.noiseClampHigh,
+			seed: e.noiseSeed,
+			maxFill: e.noiseMaxFill,
+			jitter: e.noiseJitter
+		};
+	}
+	get tileSize() {
+		return this.options.noiseTileCells * this.options.noiseSize;
+	}
+	get travelX() {
+		let e = this.options.noiseAngle * Math.PI / 180;
+		return Math.round(Math.cos(e) * this.options.noiseTravel) * this.tileSize;
+	}
+	get travelY() {
+		let e = this.options.noiseAngle * Math.PI / 180;
+		return Math.round(Math.sin(e) * this.options.noiseTravel) * this.tileSize;
+	}
+	get overscan() {
+		return Math.max(Math.abs(this.travelX), Math.abs(this.travelY)) + this.tileSize;
+	}
+	cssVars(e) {
+		let t = this.options;
+		return {
+			"--background-color": t.backgroundColor,
+			"--grid-color": t.gridColor,
+			"--grid-size": `${t.gridSize}px`,
+			"--grid-opacity": String(t.gridOpacity),
+			"--noise-image": `url("${e}")`,
+			"--noise-tile-size": `${this.tileSize}px`,
+			"--noise-color": t.noiseColor,
+			"--noise-opacity": String(t.noiseOpacity),
+			"--noise-speed": `${t.noiseSpeed}s`,
+			"--noise-x": `${this.travelX}px`,
+			"--noise-y": `${this.travelY}px`,
+			"--noise-overscan": `${this.overscan}px`,
+			"--fade-start": `${t.fadeStart}%`,
+			"--fade-end": `${t.fadeEnd}%`
+		};
+	}
+	static defined(e) {
+		let t = Object.entries(e).filter(([, e]) => e !== void 0);
+		return Object.fromEntries(t);
+	}
+}, s = class e {
+	static ROOT_CLASS = "dither-grid-background";
+	static ANIMATED_CLASS = "dither-grid-background--animated";
+	static GLOW_CLASS = "dither-grid-background--glow";
+	view;
+	noiseImage = "";
+	root = null;
+	layers = [];
+	constructor(e = {}) {
+		this.view = new o(e);
+	}
+	mount(e) {
+		if (this.root) throw Error("DitherBackground is already mounted");
+		this.root = e;
+		let t = document.createElement("div");
+		t.className = "dither-grid-background__noise-texture";
+		let n = document.createElement("div");
+		n.className = "dither-grid-background__noise", n.setAttribute("aria-hidden", "true"), n.append(t);
+		let r = document.createElement("div");
+		r.className = "dither-grid-background__grid", r.setAttribute("aria-hidden", "true"), this.layers = [n, r], e.prepend(...this.layers), this.noiseImage = this.createNoiseImage(), this.apply();
+	}
+	update(e) {
+		let t = this.view.merge(e), n = this.view.rebuildsTile(t);
+		this.view = t, n && (this.noiseImage = this.createNoiseImage()), this.apply();
+	}
+	destroy() {
+		let t = this.root;
+		if (t) {
+			for (let e of this.layers) e.remove();
+			this.layers = [], t.classList.remove(e.ROOT_CLASS, e.ANIMATED_CLASS, e.GLOW_CLASS);
+			for (let e of Object.keys(this.view.cssVars(""))) t.style.removeProperty(e);
+			this.root = null, this.noiseImage = "";
+		}
+	}
+	get element() {
+		return this.root;
+	}
+	apply() {
+		let t = this.root;
+		if (!t) return;
+		t.classList.add(e.ROOT_CLASS), t.classList.toggle(e.ANIMATED_CLASS, this.view.options.animateNoise), t.classList.toggle(e.GLOW_CLASS, this.view.options.animateGlow);
+		let n = this.view.cssVars(this.noiseImage);
+		for (let [e, r] of Object.entries(n)) t.style.setProperty(e, r);
+	}
+	createNoiseImage() {
+		return new a(this.view.tileOptions()).toDataURL();
+	}
+};
+export { r as a, i, o as n, t as o, a as r, e as s, s as t };
+
+//# sourceMappingURL=DitherBackground-CrFqrwp8.js.map

package/dist/DitherBackground-CrFqrwp8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DitherBackground-CrFqrwp8.js","names":["MathUtils","value","min","max","a","b","t","x","edge0","edge1","period","h","y","seed","PerlinNoise","angle","i","x0","y0","fx","fy","u","v","ix0","iy0","ix1","iy1","n00","n10","n01","n11","gradients","g","ix","iy","dx","dy","Octave","noise","frequency","amplitude","FractalBrownianNoise","total","o","octaves","cells","scale","sum","octave","RgbColor","r","resolved","css","normalized","ctx","hex","full","c","match","DitherTile","row","options","canvas","rgb","color","image","data","island","detail","combined","detailStrength","n","clampLow","clampHigh","p","contrast","density","maxFill","jitter","DitherBackgroundView","partial","key","other","noiseImage","entries","DitherBackground","container","texture","grid","next","rebuildTile","root","layer","name","vars"],"sources":["../src/MathUtils.ts","../src/PerlinNoise.ts","../src/FractalBrownianNoise.ts","../src/RgbColor.ts","../src/DitherTile.ts","../src/DitherBackgroundView.ts","../src/DitherBackground.ts"],"sourcesContent":["/**\n * Small math helpers used by the noise and dither pipeline.\n * The standard Math library has no clamp/lerp/smoothstep/mod equivalents.\n */\nexport class MathUtils {\n    static clamp(value: number, min: number, max: number): number {\n        return Math.min(Math.max(value, min), max);\n    }\n\n    static lerp(a: number, b: number, t: number): number {\n        return a + (b - a) * t;\n    }\n\n    static smoothstep(edge0: number, edge1: number, x: number): number {\n        const t = MathUtils.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n        return t * t * (3 - 2 * t);\n    }\n\n    static mod(value: number, period: number): number {\n        return ((value % period) + period) % period;\n    }\n\n    static hash2(x: number, y: number, seed: number): number {\n        let h =\n            Math.imul(x, 374761393)\n            ^ Math.imul(y, 668265263)\n            ^ Math.imul(seed, 2246822519);\n        h = Math.imul(h ^ (h >>> 13), 1274126177);\n        h ^= h >>> 16;\n        return (h >>> 0) / 4294967296;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\n\n/**\n * Tileable 2D Perlin gradient noise. Lattice coordinates wrap at `period`,\n * so sampling the [0, period) cell range produces a seamless tile.\n * Raw output is roughly in [-1, 1] (see FractalBrownianNoise for normalized values).\n */\nexport class PerlinNoise {\n    private static readonly GRADIENTS: ReadonlyArray<\n        readonly [number, number]\n    > = Array.from({ length: 16 }, (_, i) => {\n        const angle = (i / 16) * Math.PI * 2;\n        return [Math.cos(angle), Math.sin(angle)] as const;\n    });\n\n    constructor(\n        private readonly period: number,\n        private readonly seed: number,\n    ) {}\n\n    sample(x: number, y: number): number {\n        const x0 = Math.floor(x);\n        const y0 = Math.floor(y);\n        const fx = x - x0;\n        const fy = y - y0;\n\n        const u = fx * fx * fx * (fx * (fx * 6 - 15) + 10);\n        const v = fy * fy * fy * (fy * (fy * 6 - 15) + 10);\n\n        const ix0 = MathUtils.mod(x0, this.period);\n        const iy0 = MathUtils.mod(y0, this.period);\n        const ix1 = MathUtils.mod(x0 + 1, this.period);\n        const iy1 = MathUtils.mod(y0 + 1, this.period);\n\n        const n00 = this.gradientDot(ix0, iy0, fx, fy);\n        const n10 = this.gradientDot(ix1, iy0, fx - 1, fy);\n        const n01 = this.gradientDot(ix0, iy1, fx, fy - 1);\n        const n11 = this.gradientDot(ix1, iy1, fx - 1, fy - 1);\n\n        return MathUtils.lerp(\n            MathUtils.lerp(n00, n10, u),\n            MathUtils.lerp(n01, n11, u),\n            v,\n        );\n    }\n\n    private gradientDot(\n        ix: number,\n        iy: number,\n        dx: number,\n        dy: number,\n    ): number {\n        const gradients = PerlinNoise.GRADIENTS;\n        const g =\n            gradients[\n                Math.floor(\n                    MathUtils.hash2(ix, iy, this.seed) * gradients.length,\n                ) % gradients.length\n            ];\n        return g[0] * dx + g[1] * dy;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\nimport { PerlinNoise } from \"./PerlinNoise\";\n\nclass Octave {\n    constructor(\n        readonly noise: PerlinNoise,\n        readonly frequency: number,\n        readonly amplitude: number,\n    ) {}\n}\n\n/**\n * Fractal Brownian motion: stacks PerlinNoise octaves with halved amplitude\n * and doubled frequency per octave. Coordinates are expressed in tile cells,\n * keeping every octave (and therefore the whole field) seamlessly tileable.\n * Output is normalized to [0, 1].\n */\nexport class FractalBrownianNoise {\n    private readonly octaves: Octave[] = [];\n    private readonly totalAmplitude: number;\n\n    constructor(cells: number, scale: number, octaves: number, seed: number) {\n        let amplitude = 1;\n        let total = 0;\n\n        for (let o = 0; o < octaves; o++) {\n            const period = Math.max(1, Math.round(cells / (scale * 2 ** o)));\n            this.octaves.push(\n                new Octave(\n                    new PerlinNoise(period, seed + o * 1013),\n                    period / cells,\n                    amplitude,\n                ),\n            );\n            total += amplitude;\n            amplitude *= 0.5;\n        }\n\n        this.totalAmplitude = total;\n    }\n\n    sample(x: number, y: number): number {\n        let sum = 0;\n\n        for (const octave of this.octaves) {\n            sum +=\n                octave.amplitude\n                * octave.noise.sample(\n                    x * octave.frequency,\n                    y * octave.frequency,\n                );\n        }\n\n        return MathUtils.clamp((sum / this.totalAmplitude) * 0.6 + 0.5, 0, 1);\n    }\n}\n","/** Immutable RGB triple with CSS color parsing. */\nexport class RgbColor {\n    constructor(\n        readonly r: number,\n        readonly g: number,\n        readonly b: number,\n    ) {}\n\n    /**\n     * Parses any CSS color (named, hex, rgb()/rgba()) by letting the canvas\n     * resolve it: assigning to fillStyle normalizes the value to a canonical\n     * string which is then read back. Falls back to white on invalid input.\n     *\n     * A single var(--token, fallback) reference is resolved against the\n     * document root first, so theme variables can be used as color parameters.\n     */\n    static fromCss(ctx: CanvasRenderingContext2D, css: string): RgbColor {\n        const resolved = RgbColor.resolveVariable(css);\n        ctx.fillStyle = \"#000000\";\n        ctx.fillStyle = resolved;\n        const normalized = ctx.fillStyle;\n\n        if (normalized.startsWith(\"#\")) {\n            const hex = normalized.slice(1);\n            const full =\n                hex.length === 3\n                    ? hex\n                          .split(\"\")\n                          .map((c) => c + c)\n                          .join(\"\")\n                    : hex;\n            return new RgbColor(\n                parseInt(full.slice(0, 2), 16),\n                parseInt(full.slice(2, 4), 16),\n                parseInt(full.slice(4, 6), 16),\n            );\n        }\n\n        const match = normalized.match(/rgba?\\(([^)]+)\\)/);\n        if (match) {\n            const [r, g, b] = match[1]\n                .split(/[,/\\s]+/)\n                .filter(Boolean)\n                .map(Number);\n            return new RgbColor(r, g, b);\n        }\n\n        return new RgbColor(255, 255, 255);\n    }\n\n    private static resolveVariable(css: string): string {\n        const match = css.match(\n            /^\\s*var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*([^()]+))?\\s*\\)\\s*$/,\n        );\n        if (!match) return css;\n\n        const value = getComputedStyle(document.documentElement)\n            .getPropertyValue(match[1])\n            .trim();\n        return value || match[2]?.trim() || css;\n    }\n}\n","import { FractalBrownianNoise } from \"./FractalBrownianNoise\";\nimport { MathUtils } from \"./MathUtils\";\nimport { RgbColor } from \"./RgbColor\";\n\n/**\n * All visual knobs of the tile. `scale`/`octaves` shape the large island\n * field, `detail*` the fine detail field; `clampLow`/`clampHigh` soft-clip\n * the blend (clean voids at the low end, no saturation at the high end),\n * `maxFill` caps how dense the dither can get, and `jitter` blends the\n * Bayer threshold with per-pixel random values for an organic look.\n */\nexport type DitherTileOptions = {\n    cells: number;\n    color: string;\n    density: number;\n    contrast: number;\n    scale: number;\n    octaves: number;\n    detailScale: number;\n    detailOctaves: number;\n    detailStrength: number;\n    clampLow: number;\n    clampHigh: number;\n    seed: number;\n    maxFill: number;\n    jitter: number;\n};\n\n/**\n * Renders a seamless dithered noise tile as a PNG data URL.\n *\n * Per pixel: the island and detail noise fields are blended into a density\n * value, soft-clamped, then thresholded against a Bayer matrix mixed with\n * per-pixel jitter to decide whether the pixel is inked. Because the noise\n * fields tile seamlessly, the resulting image can be repeated and scrolled\n * forever without visible seams.\n */\nexport class DitherTile {\n    static readonly DEFAULT_CELLS = 512;\n\n    private static readonly BAYER_4X4 = [\n        [0, 8, 2, 10],\n        [12, 4, 14, 6],\n        [3, 11, 1, 9],\n        [15, 7, 13, 5],\n    ].map((row) => row.map((v) => (v + 0.5) / 16));\n\n    private readonly islands: FractalBrownianNoise;\n    private readonly detail: FractalBrownianNoise;\n\n    constructor(private readonly options: DitherTileOptions) {\n        this.islands = new FractalBrownianNoise(\n            options.cells,\n            options.scale,\n            options.octaves,\n            options.seed,\n        );\n        this.detail = new FractalBrownianNoise(\n            options.cells,\n            options.detailScale,\n            options.detailOctaves,\n            options.seed + 31337,\n        );\n    }\n\n    toDataURL(): string {\n        const {\n            cells,\n            color,\n            density,\n            contrast,\n            detailStrength,\n            clampLow,\n            clampHigh,\n            seed,\n            maxFill,\n            jitter,\n        } = this.options;\n\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = cells;\n        canvas.height = cells;\n\n        const ctx = canvas.getContext(\"2d\");\n        if (!ctx) return \"\";\n\n        const rgb = RgbColor.fromCss(ctx, color);\n        const image = ctx.createImageData(cells, cells);\n        const data = image.data;\n\n        for (let y = 0; y < cells; y++) {\n            for (let x = 0; x < cells; x++) {\n                const island = this.islands.sample(x, y);\n                const detail = this.detail.sample(x, y);\n                const combined = MathUtils.clamp(\n                    island + (detail - 0.5) * detailStrength,\n                    0,\n                    1,\n                );\n                const n = MathUtils.smoothstep(\n                    clampLow,\n                    Math.max(clampHigh, clampLow + 0.001),\n                    combined,\n                );\n                const p = MathUtils.clamp(\n                    (n - 0.5) * contrast + density,\n                    0,\n                    maxFill,\n                );\n                const bayer = DitherTile.BAYER_4X4[y % 4][x % 4];\n                const threshold =\n                    bayer * (1 - jitter)\n                    + MathUtils.hash2(x, y, seed + 991) * jitter;\n\n                if (threshold < p) {\n                    const i = (y * cells + x) * 4;\n                    data[i] = rgb.r;\n                    data[i + 1] = rgb.g;\n                    data[i + 2] = rgb.b;\n                    data[i + 3] = Math.round(\n                        255 * MathUtils.clamp(0.4 + 0.6 * n, 0, 1),\n                    );\n                }\n            }\n        }\n\n        ctx.putImageData(image, 0, 0);\n        return canvas.toDataURL(\"image/png\");\n    }\n}\n","import type { DitherTileOptions } from \"./DitherTile\";\nimport { DitherTile } from \"./DitherTile\";\n\n/**\n * Every visual knob of a dither background. All fields are optional and fall\n * back to `DitherBackgroundView.DEFAULTS`. Values are applied as CSS custom\n * properties, so they can be animated at runtime without rebuilding the\n * background; only `DitherBackgroundView.TILE_INPUTS` regenerate the dither\n * bitmap itself.\n */\nexport type DitherBackgroundOptions = {\n    backgroundColor?: string;\n\n    gridColor?: string;\n    gridSize?: number;\n    gridOpacity?: number;\n\n    noiseColor?: string;\n    noiseOpacity?: number;\n    noiseSize?: number;\n    noiseTileCells?: number;\n    noiseDensity?: number;\n    noiseContrast?: number;\n    noiseScale?: number;\n    noiseOctaves?: number;\n    noiseDetailScale?: number;\n    noiseDetailOctaves?: number;\n    noiseDetailStrength?: number;\n    noiseClampLow?: number;\n    noiseClampHigh?: number;\n    noiseSeed?: number;\n    noiseMaxFill?: number;\n    noiseJitter?: number;\n    noiseSpeed?: number;\n    noiseAngle?: number;\n    noiseTravel?: number;\n\n    fadeStart?: number;\n    fadeEnd?: number;\n\n    animateNoise?: boolean;\n    animateGlow?: boolean;\n};\n\nexport type DitherBackgroundCssVars = Record<`--${string}`, string>;\n\n/**\n * Resolves `DitherBackgroundOptions` against the defaults and computes the\n * derived values (tile geometry, scroll travel, CSS custom properties). Used\n * internally by `DitherBackground`; framework wrappers can use it standalone.\n */\nexport class DitherBackgroundView {\n    static readonly DEFAULTS: Required<DitherBackgroundOptions> = {\n        backgroundColor:\n            \"linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)\",\n\n        gridColor: \"var(--color-steel-500)\",\n        gridSize: 41,\n        gridOpacity: 0.23,\n\n        noiseColor: \"var(--color-scarlet-600)\",\n        noiseOpacity: 0.5,\n        noiseSize: 3,\n        noiseTileCells: DitherTile.DEFAULT_CELLS,\n        noiseDensity: 0.55,\n        noiseContrast: 1.8,\n        noiseScale: 32,\n        noiseOctaves: 3,\n        noiseDetailScale: 5,\n        noiseDetailOctaves: 3,\n        noiseDetailStrength: 0.2,\n        noiseClampLow: 0,\n        noiseClampHigh: 0.9,\n        noiseSeed: 69,\n        noiseMaxFill: 0.6,\n        noiseJitter: 0.3,\n        noiseSpeed: 180,\n        noiseAngle: 100,\n        noiseTravel: 1,\n\n        fadeStart: 0,\n        fadeEnd: 90,\n\n        animateNoise: true,\n        animateGlow: true,\n    };\n\n    /** Options that affect the generated tile; all others only set CSS variables. */\n    static readonly TILE_INPUTS: ReadonlyArray<keyof DitherBackgroundOptions> =\n        [\n            \"noiseTileCells\",\n            \"noiseColor\",\n            \"noiseDensity\",\n            \"noiseContrast\",\n            \"noiseScale\",\n            \"noiseOctaves\",\n            \"noiseDetailScale\",\n            \"noiseDetailOctaves\",\n            \"noiseDetailStrength\",\n            \"noiseClampLow\",\n            \"noiseClampHigh\",\n            \"noiseSeed\",\n            \"noiseMaxFill\",\n            \"noiseJitter\",\n        ];\n\n    readonly options: Required<DitherBackgroundOptions>;\n\n    constructor(options: DitherBackgroundOptions = {}) {\n        this.options = {\n            ...DitherBackgroundView.DEFAULTS,\n            ...DitherBackgroundView.defined(options),\n        };\n    }\n\n    /** Returns a new view with `partial` merged in; `undefined` values are ignored. */\n    merge(partial: DitherBackgroundOptions): DitherBackgroundView {\n        return new DitherBackgroundView({\n            ...this.options,\n            ...DitherBackgroundView.defined(partial),\n        });\n    }\n\n    /** True when the two views would produce different dither tiles. */\n    rebuildsTile(other: DitherBackgroundView): boolean {\n        return DitherBackgroundView.TILE_INPUTS.some(\n            (key) => this.options[key] !== other.options[key],\n        );\n    }\n\n    tileOptions(): DitherTileOptions {\n        const o = this.options;\n        return {\n            cells: o.noiseTileCells,\n            color: o.noiseColor,\n            density: o.noiseDensity,\n            contrast: o.noiseContrast,\n            scale: o.noiseScale,\n            octaves: o.noiseOctaves,\n            detailScale: o.noiseDetailScale,\n            detailOctaves: o.noiseDetailOctaves,\n            detailStrength: o.noiseDetailStrength,\n            clampLow: o.noiseClampLow,\n            clampHigh: o.noiseClampHigh,\n            seed: o.noiseSeed,\n            maxFill: o.noiseMaxFill,\n            jitter: o.noiseJitter,\n        };\n    }\n\n    get tileSize(): number {\n        return this.options.noiseTileCells * this.options.noiseSize;\n    }\n\n    /** Horizontal scroll distance in px, snapped to whole tiles (seamless loop). */\n    get travelX(): number {\n        const angle = (this.options.noiseAngle * Math.PI) / 180;\n        return (\n            Math.round(Math.cos(angle) * this.options.noiseTravel)\n            * this.tileSize\n        );\n    }\n\n    /** Vertical scroll distance in px, snapped to whole tiles (seamless loop). */\n    get travelY(): number {\n        const angle = (this.options.noiseAngle * Math.PI) / 180;\n        return (\n            Math.round(Math.sin(angle) * this.options.noiseTravel)\n            * this.tileSize\n        );\n    }\n\n    /** Oversizes the texture wrapper so the scroll never exposes its edges. */\n    get overscan(): number {\n        return (\n            Math.max(Math.abs(this.travelX), Math.abs(this.travelY))\n            + this.tileSize\n        );\n    }\n\n    cssVars(noiseImage: string): DitherBackgroundCssVars {\n        const o = this.options;\n        return {\n            \"--background-color\": o.backgroundColor,\n\n            \"--grid-color\": o.gridColor,\n            \"--grid-size\": `${o.gridSize}px`,\n            \"--grid-opacity\": String(o.gridOpacity),\n\n            \"--noise-image\": `url(\"${noiseImage}\")`,\n            \"--noise-tile-size\": `${this.tileSize}px`,\n            \"--noise-color\": o.noiseColor,\n            \"--noise-opacity\": String(o.noiseOpacity),\n            \"--noise-speed\": `${o.noiseSpeed}s`,\n            \"--noise-x\": `${this.travelX}px`,\n            \"--noise-y\": `${this.travelY}px`,\n            \"--noise-overscan\": `${this.overscan}px`,\n\n            \"--fade-start\": `${o.fadeStart}%`,\n            \"--fade-end\": `${o.fadeEnd}%`,\n        };\n    }\n\n    private static defined(\n        options: DitherBackgroundOptions,\n    ): DitherBackgroundOptions {\n        const entries = Object.entries(options).filter(\n            ([, value]) => value !== undefined,\n        );\n        return Object.fromEntries(entries) as DitherBackgroundOptions;\n    }\n}\n","import \"./DitherBackground.css\";\nimport { DitherTile } from \"./DitherTile\";\nimport type {\n    DitherBackgroundCssVars,\n    DitherBackgroundOptions,\n} from \"./DitherBackgroundView\";\nimport { DitherBackgroundView } from \"./DitherBackgroundView\";\n\n/**\n * Framework-agnostic layered background: a scrolling Bayer-dithered noise\n * texture, a static grid and an optional ambient glow. Plain DOM — mount it\n * on any element from any framework (or none).\n *\n * `mount()` decorates the container: it prepends the hidden layer elements\n * and applies the base class plus the CSS custom properties. Anything else\n * in the container renders above the layers, so frameworks keep rendering\n * their children normally. Options map 1:1 to the CSS custom properties and\n * can be changed at any time via `update()`; the dither bitmap is only\n * regenerated when one of the tile inputs changes.\n *\n * The tile is generated on a canvas, so `mount()` requires a browser DOM.\n */\nexport class DitherBackground {\n    static readonly ROOT_CLASS = \"dither-grid-background\";\n    static readonly ANIMATED_CLASS = \"dither-grid-background--animated\";\n    static readonly GLOW_CLASS = \"dither-grid-background--glow\";\n\n    private view: DitherBackgroundView;\n    private noiseImage = \"\";\n    private root: HTMLElement | null = null;\n    private layers: HTMLElement[] = [];\n\n    constructor(options: DitherBackgroundOptions = {}) {\n        this.view = new DitherBackgroundView(options);\n    }\n\n    /** Decorates `container` with the background layers. Idempotent per instance. */\n    mount(container: HTMLElement): void {\n        if (this.root) {\n            throw new Error(\"DitherBackground is already mounted\");\n        }\n        this.root = container;\n\n        const texture = document.createElement(\"div\");\n        texture.className = \"dither-grid-background__noise-texture\";\n        const noise = document.createElement(\"div\");\n        noise.className = \"dither-grid-background__noise\";\n        noise.setAttribute(\"aria-hidden\", \"true\");\n        noise.append(texture);\n\n        const grid = document.createElement(\"div\");\n        grid.className = \"dither-grid-background__grid\";\n        grid.setAttribute(\"aria-hidden\", \"true\");\n\n        this.layers = [noise, grid];\n        container.prepend(...this.layers);\n\n        this.noiseImage = this.createNoiseImage();\n        this.apply();\n    }\n\n    /** Merges new options; regenerates the tile only when tile inputs change. */\n    update(partial: DitherBackgroundOptions): void {\n        const next = this.view.merge(partial);\n        const rebuildTile = this.view.rebuildsTile(next);\n        this.view = next;\n        if (rebuildTile) {\n            this.noiseImage = this.createNoiseImage();\n        }\n        this.apply();\n    }\n\n    /** Removes the layers and reverts the container to its unmounted state. */\n    destroy(): void {\n        const root = this.root;\n        if (!root) return;\n\n        for (const layer of this.layers) layer.remove();\n        this.layers = [];\n\n        root.classList.remove(\n            DitherBackground.ROOT_CLASS,\n            DitherBackground.ANIMATED_CLASS,\n            DitherBackground.GLOW_CLASS,\n        );\n        for (const name of Object.keys(this.view.cssVars(\"\"))) {\n            root.style.removeProperty(name);\n        }\n\n        this.root = null;\n        this.noiseImage = \"\";\n    }\n\n    /** The decorated container element, or `null` before mount / after destroy. */\n    get element(): HTMLElement | null {\n        return this.root;\n    }\n\n    private apply(): void {\n        const root = this.root;\n        if (!root) return;\n\n        root.classList.add(DitherBackground.ROOT_CLASS);\n        root.classList.toggle(\n            DitherBackground.ANIMATED_CLASS,\n            this.view.options.animateNoise,\n        );\n        root.classList.toggle(\n            DitherBackground.GLOW_CLASS,\n            this.view.options.animateGlow,\n        );\n\n        const vars: DitherBackgroundCssVars = this.view.cssVars(\n            this.noiseImage,\n        );\n        for (const [name, value] of Object.entries(vars)) {\n            root.style.setProperty(name, value);\n        }\n    }\n\n    private createNoiseImage(): string {\n        return new DitherTile(this.view.tileOptions()).toDataURL();\n    }\n}\n"],"mappings":"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"}

package/dist/index.js

@@ -1,304 +1 @@
-// src/MathUtils.ts
-var e = class e {
-	static clamp(e, t, n) {
-		return Math.min(Math.max(e, t), n);
-	}
-	static lerp(e, t, n) {
-		return e + (t - e) * n;
-	}
-	static smoothstep(t, n, r) {
-		let i = e.clamp((r - t) / (n - t), 0, 1);
-		return i * i * (3 - 2 * i);
-	}
-	static mod(e, t) {
-		return (e % t + t) % t;
-	}
-	static hash2(e, t, n) {
-		let r = Math.imul(e, 374761393) ^ Math.imul(t, 668265263) ^ Math.imul(n, 2246822519);
-		return r = Math.imul(r ^ r >>> 13, 1274126177), r ^= r >>> 16, (r >>> 0) / 4294967296;
-	}
-}, t = class t {
-	period;
-	seed;
-	static GRADIENTS = Array.from({ length: 16 }, (e, t) => {
-		let n = t / 16 * Math.PI * 2;
-		return [Math.cos(n), Math.sin(n)];
-	});
-	constructor(e, t) {
-		this.period = e, this.seed = t;
-	}
-	sample(t, n) {
-		let r = Math.floor(t), i = Math.floor(n), a = t - r, o = n - i, s = a * a * a * (a * (a * 6 - 15) + 10), c = o * o * o * (o * (o * 6 - 15) + 10), l = e.mod(r, this.period), u = e.mod(i, this.period), d = e.mod(r + 1, this.period), f = e.mod(i + 1, this.period), p = this.gradientDot(l, u, a, o), m = this.gradientDot(d, u, a - 1, o), h = this.gradientDot(l, f, a, o - 1), g = this.gradientDot(d, f, a - 1, o - 1);
-		return e.lerp(e.lerp(p, m, s), e.lerp(h, g, s), c);
-	}
-	gradientDot(n, r, i, a) {
-		let o = t.GRADIENTS, s = o[Math.floor(e.hash2(n, r, this.seed) * o.length) % o.length];
-		return s[0] * i + s[1] * a;
-	}
-}, n = class {
-	noise;
-	frequency;
-	amplitude;
-	constructor(e, t, n) {
-		this.noise = e, this.frequency = t, this.amplitude = n;
-	}
-}, r = class {
-	octaves = [];
-	totalAmplitude;
-	constructor(e, r, i, a) {
-		let o = 1, s = 0;
-		for (let c = 0; c < i; c++) {
-			let i = Math.max(1, Math.round(e / (r * 2 ** c)));
-			this.octaves.push(new n(new t(i, a + c * 1013), i / e, o)), s += o, o *= .5;
-		}
-		this.totalAmplitude = s;
-	}
-	sample(t, n) {
-		let r = 0;
-		for (let e of this.octaves) r += e.amplitude * e.noise.sample(t * e.frequency, n * e.frequency);
-		return e.clamp(r / this.totalAmplitude * .6 + .5, 0, 1);
-	}
-}, i = class e {
-	r;
-	g;
-	b;
-	constructor(e, t, n) {
-		this.r = e, this.g = t, this.b = n;
-	}
-	static fromCss(t, n) {
-		let r = e.resolveVariable(n);
-		t.fillStyle = "#000000", t.fillStyle = r;
-		let i = t.fillStyle;
-		if (i.startsWith("#")) {
-			let t = i.slice(1), n = t.length === 3 ? t.split("").map((e) => e + e).join("") : t;
-			return new e(parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16));
-		}
-		let a = i.match(/rgba?\(([^)]+)\)/);
-		if (a) {
-			let [t, n, r] = a[1].split(/[,/\s]+/).filter(Boolean).map(Number);
-			return new e(t, n, r);
-		}
-		return new e(255, 255, 255);
-	}
-	static resolveVariable(e) {
-		let t = e.match(/^\s*var\(\s*(--[\w-]+)\s*(?:,\s*([^()]+))?\s*\)\s*$/);
-		return t && (getComputedStyle(document.documentElement).getPropertyValue(t[1]).trim() || t[2]?.trim()) || e;
-	}
-}, a = class t {
-	options;
-	static DEFAULT_CELLS = 512;
-	static BAYER_4X4 = [
-		[
-			0,
-			8,
-			2,
-			10
-		],
-		[
-			12,
-			4,
-			14,
-			6
-		],
-		[
-			3,
-			11,
-			1,
-			9
-		],
-		[
-			15,
-			7,
-			13,
-			5
-		]
-	].map((e) => e.map((e) => (e + .5) / 16));
-	islands;
-	detail;
-	constructor(e) {
-		this.options = e, this.islands = new r(e.cells, e.scale, e.octaves, e.seed), this.detail = new r(e.cells, e.detailScale, e.detailOctaves, e.seed + 31337);
-	}
-	toDataURL() {
-		let { cells: n, color: r, density: a, contrast: o, detailStrength: s, clampLow: c, clampHigh: l, seed: u, maxFill: d, jitter: f } = this.options, p = document.createElement("canvas");
-		p.width = n, p.height = n;
-		let m = p.getContext("2d");
-		if (!m) return "";
-		let h = i.fromCss(m, r), g = m.createImageData(n, n), _ = g.data;
-		for (let r = 0; r < n; r++) for (let i = 0; i < n; i++) {
-			let p = this.islands.sample(i, r), m = this.detail.sample(i, r), g = e.clamp(p + (m - .5) * s, 0, 1), v = e.smoothstep(c, Math.max(l, c + .001), g), y = e.clamp((v - .5) * o + a, 0, d);
-			if (t.BAYER_4X4[r % 4][i % 4] * (1 - f) + e.hash2(i, r, u + 991) * f < y) {
-				let t = (r * n + i) * 4;
-				_[t] = h.r, _[t + 1] = h.g, _[t + 2] = h.b, _[t + 3] = Math.round(255 * e.clamp(.4 + .6 * v, 0, 1));
-			}
-		}
-		return m.putImageData(g, 0, 0), p.toDataURL("image/png");
-	}
-}, o = class e {
-	static DEFAULTS = {
-		backgroundColor: "linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)",
-		gridColor: "var(--color-steel-500)",
-		gridSize: 41,
-		gridOpacity: .23,
-		noiseColor: "var(--color-scarlet-600)",
-		noiseOpacity: .5,
-		noiseSize: 3,
-		noiseTileCells: a.DEFAULT_CELLS,
-		noiseDensity: .55,
-		noiseContrast: 1.8,
-		noiseScale: 32,
-		noiseOctaves: 3,
-		noiseDetailScale: 5,
-		noiseDetailOctaves: 3,
-		noiseDetailStrength: .2,
-		noiseClampLow: 0,
-		noiseClampHigh: .9,
-		noiseSeed: 69,
-		noiseMaxFill: .6,
-		noiseJitter: .3,
-		noiseSpeed: 180,
-		noiseAngle: 100,
-		noiseTravel: 1,
-		fadeStart: 0,
-		fadeEnd: 90,
-		animateNoise: !0,
-		animateGlow: !0
-	};
-	static TILE_INPUTS = [
-		"noiseTileCells",
-		"noiseColor",
-		"noiseDensity",
-		"noiseContrast",
-		"noiseScale",
-		"noiseOctaves",
-		"noiseDetailScale",
-		"noiseDetailOctaves",
-		"noiseDetailStrength",
-		"noiseClampLow",
-		"noiseClampHigh",
-		"noiseSeed",
-		"noiseMaxFill",
-		"noiseJitter"
-	];
-	options;
-	constructor(t = {}) {
-		this.options = {
-			...e.DEFAULTS,
-			...e.defined(t)
-		};
-	}
-	merge(t) {
-		return new e({
-			...this.options,
-			...e.defined(t)
-		});
-	}
-	rebuildsTile(t) {
-		return e.TILE_INPUTS.some((e) => this.options[e] !== t.options[e]);
-	}
-	tileOptions() {
-		let e = this.options;
-		return {
-			cells: e.noiseTileCells,
-			color: e.noiseColor,
-			density: e.noiseDensity,
-			contrast: e.noiseContrast,
-			scale: e.noiseScale,
-			octaves: e.noiseOctaves,
-			detailScale: e.noiseDetailScale,
-			detailOctaves: e.noiseDetailOctaves,
-			detailStrength: e.noiseDetailStrength,
-			clampLow: e.noiseClampLow,
-			clampHigh: e.noiseClampHigh,
-			seed: e.noiseSeed,
-			maxFill: e.noiseMaxFill,
-			jitter: e.noiseJitter
-		};
-	}
-	get tileSize() {
-		return this.options.noiseTileCells * this.options.noiseSize;
-	}
-	get travelX() {
-		let e = this.options.noiseAngle * Math.PI / 180;
-		return Math.round(Math.cos(e) * this.options.noiseTravel) * this.tileSize;
-	}
-	get travelY() {
-		let e = this.options.noiseAngle * Math.PI / 180;
-		return Math.round(Math.sin(e) * this.options.noiseTravel) * this.tileSize;
-	}
-	get overscan() {
-		return Math.max(Math.abs(this.travelX), Math.abs(this.travelY)) + this.tileSize;
-	}
-	cssVars(e) {
-		let t = this.options;
-		return {
-			"--background-color": t.backgroundColor,
-			"--grid-color": t.gridColor,
-			"--grid-size": `${t.gridSize}px`,
-			"--grid-opacity": String(t.gridOpacity),
-			"--noise-image": `url("${e}")`,
-			"--noise-tile-size": `${this.tileSize}px`,
-			"--noise-color": t.noiseColor,
-			"--noise-opacity": String(t.noiseOpacity),
-			"--noise-speed": `${t.noiseSpeed}s`,
-			"--noise-x": `${this.travelX}px`,
-			"--noise-y": `${this.travelY}px`,
-			"--noise-overscan": `${this.overscan}px`,
-			"--fade-start": `${t.fadeStart}%`,
-			"--fade-end": `${t.fadeEnd}%`
-		};
-	}
-	static defined(e) {
-		let t = Object.entries(e).filter(([, e]) => e !== void 0);
-		return Object.fromEntries(t);
-	}
-}, s = class e {
-	static ROOT_CLASS = "dither-grid-background";
-	static ANIMATED_CLASS = "dither-grid-background--animated";
-	static GLOW_CLASS = "dither-grid-background--glow";
-	view;
-	noiseImage = "";
-	root = null;
-	layers = [];
-	constructor(e = {}) {
-		this.view = new o(e);
-	}
-	mount(e) {
-		if (this.root) throw Error("DitherBackground is already mounted");
-		this.root = e;
-		let t = document.createElement("div");
-		t.className = "dither-grid-background__noise-texture";
-		let n = document.createElement("div");
-		n.className = "dither-grid-background__noise", n.setAttribute("aria-hidden", "true"), n.append(t);
-		let r = document.createElement("div");
-		r.className = "dither-grid-background__grid", r.setAttribute("aria-hidden", "true"), this.layers = [n, r], e.prepend(...this.layers), this.noiseImage = this.createNoiseImage(), this.apply();
-	}
-	update(e) {
-		let t = this.view.merge(e), n = this.view.rebuildsTile(t);
-		this.view = t, n && (this.noiseImage = this.createNoiseImage()), this.apply();
-	}
-	destroy() {
-		let t = this.root;
-		if (t) {
-			for (let e of this.layers) e.remove();
-			this.layers = [], t.classList.remove(e.ROOT_CLASS, e.ANIMATED_CLASS, e.GLOW_CLASS);
-			for (let e of Object.keys(this.view.cssVars(""))) t.style.removeProperty(e);
-			this.root = null, this.noiseImage = "";
-		}
-	}
-	get element() {
-		return this.root;
-	}
-	apply() {
-		let t = this.root;
-		if (!t) return;
-		t.classList.add(e.ROOT_CLASS), t.classList.toggle(e.ANIMATED_CLASS, this.view.options.animateNoise), t.classList.toggle(e.GLOW_CLASS, this.view.options.animateGlow);
-		let n = this.view.cssVars(this.noiseImage);
-		for (let [e, r] of Object.entries(n)) t.style.setProperty(e, r);
-	}
-	createNoiseImage() {
-		return new a(this.view.tileOptions()).toDataURL();
-	}
-};
-export { s as DitherBackground, o as DitherBackgroundView, a as DitherTile, r as FractalBrownianNoise, e as MathUtils, t as PerlinNoise, i as RgbColor };
-
-//# sourceMappingURL=index.js.map
+export { t as DitherBackground, n as DitherBackgroundView, r as DitherTile, a as FractalBrownianNoise, s as MathUtils, o as PerlinNoise, i as RgbColor } from "./DitherBackground-CrFqrwp8.js";

package/dist/react.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { Component } from "react";
+import type { DitherBackgroundOptions } from "./DitherBackgroundView";
+export interface DitherGridBackgroundProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, DitherBackgroundOptions {
+    children?: ReactNode;
+}
+/**
+ * React wrapper around the framework-agnostic `DitherBackground`. Renders a
+ * decorated div with the layered background and its children on top; every
+ * visual prop maps 1:1 to `DitherBackgroundOptions` and is forwarded as CSS
+ * custom properties, so it can be animated at runtime without regenerating
+ * the texture. The tile is built on mount (client-side), so this component is
+ * client-only - in Next.js the `"use client"` entry makes it App Router safe.
+ */
+export declare class DitherGridBackground extends Component<DitherGridBackgroundProps> {
+    private readonly ref;
+    private background?;
+    componentDidMount(): void;
+    componentDidUpdate(prev: DitherGridBackgroundProps): void;
+    componentWillUnmount(): void;
+    private options;
+    render(): import("react").JSX.Element;
+}
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAGtE,MAAM,WAAW,yBACb,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACjD,uBAAuB;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAgCD;;;;;;;GAOG;AACH,qBAAa,oBAAqB,SAAQ,SAAS,CAAC,yBAAyB,CAAC;IAC1E,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA+B;IACnD,OAAO,CAAC,UAAU,CAAC,CAAmB;IAE7B,iBAAiB,IAAI,IAAI,CAKjC;IAEQ,kBAAkB,CAAC,IAAI,EAAE,yBAAyB,GAAG,IAAI,CAMjE;IAEQ,oBAAoB,IAAI,IAAI,CAGpC;IAED,OAAO,CAAC,OAAO;IAQN,MAAM,gCA+Bd;CACJ"}

package/dist/react.js

@@ -0,0 +1,45 @@
+"use client";
+import { n as e, t } from "./DitherBackground-CrFqrwp8.js";
+import { Component as n, createRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+// src/react.tsx
+var a = /* @__PURE__ */ "backgroundColor.gridColor.gridSize.gridOpacity.noiseColor.noiseOpacity.noiseSize.noiseTileCells.noiseDensity.noiseContrast.noiseScale.noiseOctaves.noiseDetailScale.noiseDetailOctaves.noiseDetailStrength.noiseClampLow.noiseClampHigh.noiseSeed.noiseMaxFill.noiseJitter.noiseSpeed.noiseAngle.noiseTravel.fadeStart.fadeEnd.animateNoise.animateGlow".split("."), o = class extends n {
+	ref = r();
+	background;
+	componentDidMount() {
+		let e = this.ref.current;
+		e && (this.background = new t(this.options(this.props)), this.background.mount(e));
+	}
+	componentDidUpdate(t) {
+		t !== this.props && this.background?.update(new e(this.options(this.props)).options);
+	}
+	componentWillUnmount() {
+		this.background?.destroy(), this.background = void 0;
+	}
+	options(e) {
+		let t = {};
+		for (let n of a) t[n] = e[n];
+		return t;
+	}
+	render() {
+		let { children: e, className: t = "", animateNoise: n, animateGlow: r, ...o } = this.props, s = { ...o };
+		for (let e of a) delete s[e];
+		return /* @__PURE__ */ i("div", {
+			ref: this.ref,
+			className: [
+				"dither-grid-background",
+				n !== !1 && "dither-grid-background--animated",
+				r !== !1 && "dither-grid-background--glow",
+				t
+			].filter(Boolean).join(" "),
+			...s,
+			children: /* @__PURE__ */ i("div", {
+				className: "dither-grid-background__content",
+				children: e
+			})
+		});
+	}
+};
+export { o as DitherGridBackground };
+
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":["DitherBackgroundView","OPTION_KEYS","DitherGridBackground","Component","createRef","container","DitherBackground","prev","options","key","props","rest","domProps","animateNoise","animateGlow","className"],"sources":["../src/react.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { Component, createRef } from \"react\";\nimport { DitherBackground } from \"./DitherBackground\";\nimport type { DitherBackgroundOptions } from \"./DitherBackgroundView\";\nimport { DitherBackgroundView } from \"./DitherBackgroundView\";\n\nexport interface DitherGridBackgroundProps\n    extends Omit<HTMLAttributes<HTMLDivElement>, \"color\">,\n        DitherBackgroundOptions {\n    children?: ReactNode;\n}\n\nconst OPTION_KEYS: ReadonlyArray<keyof DitherBackgroundOptions> = [\n    \"backgroundColor\",\n    \"gridColor\",\n    \"gridSize\",\n    \"gridOpacity\",\n    \"noiseColor\",\n    \"noiseOpacity\",\n    \"noiseSize\",\n    \"noiseTileCells\",\n    \"noiseDensity\",\n    \"noiseContrast\",\n    \"noiseScale\",\n    \"noiseOctaves\",\n    \"noiseDetailScale\",\n    \"noiseDetailOctaves\",\n    \"noiseDetailStrength\",\n    \"noiseClampLow\",\n    \"noiseClampHigh\",\n    \"noiseSeed\",\n    \"noiseMaxFill\",\n    \"noiseJitter\",\n    \"noiseSpeed\",\n    \"noiseAngle\",\n    \"noiseTravel\",\n    \"fadeStart\",\n    \"fadeEnd\",\n    \"animateNoise\",\n    \"animateGlow\",\n];\n\n/**\n * React wrapper around the framework-agnostic `DitherBackground`. Renders a\n * decorated div with the layered background and its children on top; every\n * visual prop maps 1:1 to `DitherBackgroundOptions` and is forwarded as CSS\n * custom properties, so it can be animated at runtime without regenerating\n * the texture. The tile is built on mount (client-side), so this component is\n * client-only - in Next.js the `\"use client\"` entry makes it App Router safe.\n */\nexport class DitherGridBackground extends Component<DitherGridBackgroundProps> {\n    private readonly ref = createRef<HTMLDivElement>();\n    private background?: DitherBackground;\n\n    override componentDidMount(): void {\n        const container = this.ref.current;\n        if (!container) return;\n        this.background = new DitherBackground(this.options(this.props));\n        this.background.mount(container);\n    }\n\n    override componentDidUpdate(prev: DitherGridBackgroundProps): void {\n        if (prev !== this.props) {\n            this.background?.update(\n                new DitherBackgroundView(this.options(this.props)).options,\n            );\n        }\n    }\n\n    override componentWillUnmount(): void {\n        this.background?.destroy();\n        this.background = undefined;\n    }\n\n    private options(props: DitherGridBackgroundProps): DitherBackgroundOptions {\n        const options: Record<string, unknown> = {};\n        for (const key of OPTION_KEYS) {\n            options[key] = props[key];\n        }\n        return options as DitherBackgroundOptions;\n    }\n\n    override render() {\n        const {\n            children,\n            className = \"\",\n            animateNoise,\n            animateGlow,\n            ...rest\n        } = this.props;\n\n        const domProps: Record<string, unknown> = { ...rest };\n        for (const key of OPTION_KEYS) delete domProps[key];\n\n        return (\n            <div\n                ref={this.ref}\n                className={[\n                    \"dither-grid-background\",\n                    animateNoise !== false\n                        && \"dither-grid-background--animated\",\n                    animateGlow !== false && \"dither-grid-background--glow\",\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(\" \")}\n                {...(domProps as HTMLAttributes<HTMLDivElement>)}\n            >\n                <div className=\"dither-grid-background__content\">\n                    {children}\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":";;;;;AAYA,IAAMC,IAA4D,mXA4BlE,GAUaC,IAAb,cAA0CC,EAAqC;CAC3E,MAAuBC,EAA0B;CACjD;CAEA,oBAAmC;EAC/B,IAAMC,IAAY,KAAK,IAAI;EAC3B,AAAKA,MACL,KAAK,aAAa,IAAIC,EAAiB,KAAK,QAAQ,KAAK,KAAK,CAAC,GAC/D,KAAK,WAAW,MAAMD,CAAS;CACnC;CAEA,mBAA4B,GAAuC;EAC/D,AAAIE,MAAS,KAAK,SACd,KAAK,YAAY,OACb,IAAIP,EAAqB,KAAK,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,OACvD;CAER;CAEA,uBAAsC;EAElC,AADA,KAAK,YAAY,QAAQ,GACzB,KAAK,aAAa,KAAA;CACtB;CAEA,QAAgB,GAA2D;EACvE,IAAMQ,IAAmC,CAAC;EAC1C,KAAK,IAAMC,KAAOR,GACd,EAAQQ,KAAOC,EAAMD;EAEzB,OAAOD;CACX;CAEA,SAAkB;EACd,IAAM,EACF,aACA,eAAY,IACZ,iBACA,gBACA,GAAGG,MACH,KAAK,OAEHC,IAAoC,EAAE,GAAGD,EAAK;EACpD,KAAK,IAAMF,KAAOR,GAAa,OAAOW,EAASH;EAE/C,OACI,kBAAC,OAAD;GACI,KAAK,KAAK;GACV,WAAW;IACP;IACAI,MAAiB,MACV;IACPC,MAAgB,MAAS;IACzBC;GACJ,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACb,GAAKH;GAEL,UAAA,kBAAC,OAAD;IAAK,WAAU;IACV;GACA,CAAA;EACJ,CAAA;CAEb;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@code-of-chaos/dither",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Framework-agnostic animated bitmap-dithered gradient backgrounds, with a tileable Perlin/fBm noise engine for generating custom dither tiles.",
     "license": "GPL-3.0-only",
     "type": "module",
@@ -15,6 +15,10 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/index.js"
         },
+        "./react": {
+            "types": "./dist/react.d.ts",
+            "import": "./dist/react.js"
+        },
         "./style.css": "./dist/style.css"
     },
     "types": "./dist/index.d.ts",
@@ -49,9 +53,21 @@
     "publishConfig": {
         "access": "public"
     },
+    "peerDependencies": {
+        "react": ">=18"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        }
+    },
     "devDependencies": {
         "@biomejs/biome": "^2.6.5",
+        "@testing-library/react": "^16.3.3",
+        "@types/react": "^19.3.0",
         "happy-dom": "^21.0.4",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
         "typescript": "~7.0.2",
         "vite": "^8.3.6",
         "vitest": "^5.1.0"

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["MathUtils","value","min","max","a","b","t","x","edge0","edge1","period","h","y","seed","PerlinNoise","angle","i","x0","y0","fx","fy","u","v","ix0","iy0","ix1","iy1","n00","n10","n01","n11","gradients","g","ix","iy","dx","dy","Octave","noise","frequency","amplitude","FractalBrownianNoise","total","o","octaves","cells","scale","sum","octave","RgbColor","r","resolved","css","normalized","ctx","hex","full","c","match","DitherTile","row","options","canvas","rgb","color","image","data","island","detail","combined","detailStrength","n","clampLow","clampHigh","p","contrast","density","maxFill","jitter","DitherBackgroundView","partial","key","other","noiseImage","entries","DitherBackground","container","texture","grid","next","rebuildTile","root","layer","name","vars"],"sources":["../src/MathUtils.ts","../src/PerlinNoise.ts","../src/FractalBrownianNoise.ts","../src/RgbColor.ts","../src/DitherTile.ts","../src/DitherBackgroundView.ts","../src/DitherBackground.ts"],"sourcesContent":["/**\n * Small math helpers used by the noise and dither pipeline.\n * The standard Math library has no clamp/lerp/smoothstep/mod equivalents.\n */\nexport class MathUtils {\n    static clamp(value: number, min: number, max: number): number {\n        return Math.min(Math.max(value, min), max);\n    }\n\n    static lerp(a: number, b: number, t: number): number {\n        return a + (b - a) * t;\n    }\n\n    static smoothstep(edge0: number, edge1: number, x: number): number {\n        const t = MathUtils.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n        return t * t * (3 - 2 * t);\n    }\n\n    static mod(value: number, period: number): number {\n        return ((value % period) + period) % period;\n    }\n\n    static hash2(x: number, y: number, seed: number): number {\n        let h =\n            Math.imul(x, 374761393)\n            ^ Math.imul(y, 668265263)\n            ^ Math.imul(seed, 2246822519);\n        h = Math.imul(h ^ (h >>> 13), 1274126177);\n        h ^= h >>> 16;\n        return (h >>> 0) / 4294967296;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\n\n/**\n * Tileable 2D Perlin gradient noise. Lattice coordinates wrap at `period`,\n * so sampling the [0, period) cell range produces a seamless tile.\n * Raw output is roughly in [-1, 1] (see FractalBrownianNoise for normalized values).\n */\nexport class PerlinNoise {\n    private static readonly GRADIENTS: ReadonlyArray<\n        readonly [number, number]\n    > = Array.from({ length: 16 }, (_, i) => {\n        const angle = (i / 16) * Math.PI * 2;\n        return [Math.cos(angle), Math.sin(angle)] as const;\n    });\n\n    constructor(\n        private readonly period: number,\n        private readonly seed: number,\n    ) {}\n\n    sample(x: number, y: number): number {\n        const x0 = Math.floor(x);\n        const y0 = Math.floor(y);\n        const fx = x - x0;\n        const fy = y - y0;\n\n        const u = fx * fx * fx * (fx * (fx * 6 - 15) + 10);\n        const v = fy * fy * fy * (fy * (fy * 6 - 15) + 10);\n\n        const ix0 = MathUtils.mod(x0, this.period);\n        const iy0 = MathUtils.mod(y0, this.period);\n        const ix1 = MathUtils.mod(x0 + 1, this.period);\n        const iy1 = MathUtils.mod(y0 + 1, this.period);\n\n        const n00 = this.gradientDot(ix0, iy0, fx, fy);\n        const n10 = this.gradientDot(ix1, iy0, fx - 1, fy);\n        const n01 = this.gradientDot(ix0, iy1, fx, fy - 1);\n        const n11 = this.gradientDot(ix1, iy1, fx - 1, fy - 1);\n\n        return MathUtils.lerp(\n            MathUtils.lerp(n00, n10, u),\n            MathUtils.lerp(n01, n11, u),\n            v,\n        );\n    }\n\n    private gradientDot(\n        ix: number,\n        iy: number,\n        dx: number,\n        dy: number,\n    ): number {\n        const gradients = PerlinNoise.GRADIENTS;\n        const g =\n            gradients[\n                Math.floor(\n                    MathUtils.hash2(ix, iy, this.seed) * gradients.length,\n                ) % gradients.length\n            ];\n        return g[0] * dx + g[1] * dy;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\nimport { PerlinNoise } from \"./PerlinNoise\";\n\nclass Octave {\n    constructor(\n        readonly noise: PerlinNoise,\n        readonly frequency: number,\n        readonly amplitude: number,\n    ) {}\n}\n\n/**\n * Fractal Brownian motion: stacks PerlinNoise octaves with halved amplitude\n * and doubled frequency per octave. Coordinates are expressed in tile cells,\n * keeping every octave (and therefore the whole field) seamlessly tileable.\n * Output is normalized to [0, 1].\n */\nexport class FractalBrownianNoise {\n    private readonly octaves: Octave[] = [];\n    private readonly totalAmplitude: number;\n\n    constructor(cells: number, scale: number, octaves: number, seed: number) {\n        let amplitude = 1;\n        let total = 0;\n\n        for (let o = 0; o < octaves; o++) {\n            const period = Math.max(1, Math.round(cells / (scale * 2 ** o)));\n            this.octaves.push(\n                new Octave(\n                    new PerlinNoise(period, seed + o * 1013),\n                    period / cells,\n                    amplitude,\n                ),\n            );\n            total += amplitude;\n            amplitude *= 0.5;\n        }\n\n        this.totalAmplitude = total;\n    }\n\n    sample(x: number, y: number): number {\n        let sum = 0;\n\n        for (const octave of this.octaves) {\n            sum +=\n                octave.amplitude\n                * octave.noise.sample(\n                    x * octave.frequency,\n                    y * octave.frequency,\n                );\n        }\n\n        return MathUtils.clamp((sum / this.totalAmplitude) * 0.6 + 0.5, 0, 1);\n    }\n}\n","/** Immutable RGB triple with CSS color parsing. */\nexport class RgbColor {\n    constructor(\n        readonly r: number,\n        readonly g: number,\n        readonly b: number,\n    ) {}\n\n    /**\n     * Parses any CSS color (named, hex, rgb()/rgba()) by letting the canvas\n     * resolve it: assigning to fillStyle normalizes the value to a canonical\n     * string which is then read back. Falls back to white on invalid input.\n     *\n     * A single var(--token, fallback) reference is resolved against the\n     * document root first, so theme variables can be used as color parameters.\n     */\n    static fromCss(ctx: CanvasRenderingContext2D, css: string): RgbColor {\n        const resolved = RgbColor.resolveVariable(css);\n        ctx.fillStyle = \"#000000\";\n        ctx.fillStyle = resolved;\n        const normalized = ctx.fillStyle;\n\n        if (normalized.startsWith(\"#\")) {\n            const hex = normalized.slice(1);\n            const full =\n                hex.length === 3\n                    ? hex\n                          .split(\"\")\n                          .map((c) => c + c)\n                          .join(\"\")\n                    : hex;\n            return new RgbColor(\n                parseInt(full.slice(0, 2), 16),\n                parseInt(full.slice(2, 4), 16),\n                parseInt(full.slice(4, 6), 16),\n            );\n        }\n\n        const match = normalized.match(/rgba?\\(([^)]+)\\)/);\n        if (match) {\n            const [r, g, b] = match[1]\n                .split(/[,/\\s]+/)\n                .filter(Boolean)\n                .map(Number);\n            return new RgbColor(r, g, b);\n        }\n\n        return new RgbColor(255, 255, 255);\n    }\n\n    private static resolveVariable(css: string): string {\n        const match = css.match(\n            /^\\s*var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*([^()]+))?\\s*\\)\\s*$/,\n        );\n        if (!match) return css;\n\n        const value = getComputedStyle(document.documentElement)\n            .getPropertyValue(match[1])\n            .trim();\n        return value || match[2]?.trim() || css;\n    }\n}\n","import { FractalBrownianNoise } from \"./FractalBrownianNoise\";\nimport { MathUtils } from \"./MathUtils\";\nimport { RgbColor } from \"./RgbColor\";\n\n/**\n * All visual knobs of the tile. `scale`/`octaves` shape the large island\n * field, `detail*` the fine detail field; `clampLow`/`clampHigh` soft-clip\n * the blend (clean voids at the low end, no saturation at the high end),\n * `maxFill` caps how dense the dither can get, and `jitter` blends the\n * Bayer threshold with per-pixel random values for an organic look.\n */\nexport type DitherTileOptions = {\n    cells: number;\n    color: string;\n    density: number;\n    contrast: number;\n    scale: number;\n    octaves: number;\n    detailScale: number;\n    detailOctaves: number;\n    detailStrength: number;\n    clampLow: number;\n    clampHigh: number;\n    seed: number;\n    maxFill: number;\n    jitter: number;\n};\n\n/**\n * Renders a seamless dithered noise tile as a PNG data URL.\n *\n * Per pixel: the island and detail noise fields are blended into a density\n * value, soft-clamped, then thresholded against a Bayer matrix mixed with\n * per-pixel jitter to decide whether the pixel is inked. Because the noise\n * fields tile seamlessly, the resulting image can be repeated and scrolled\n * forever without visible seams.\n */\nexport class DitherTile {\n    static readonly DEFAULT_CELLS = 512;\n\n    private static readonly BAYER_4X4 = [\n        [0, 8, 2, 10],\n        [12, 4, 14, 6],\n        [3, 11, 1, 9],\n        [15, 7, 13, 5],\n    ].map((row) => row.map((v) => (v + 0.5) / 16));\n\n    private readonly islands: FractalBrownianNoise;\n    private readonly detail: FractalBrownianNoise;\n\n    constructor(private readonly options: DitherTileOptions) {\n        this.islands = new FractalBrownianNoise(\n            options.cells,\n            options.scale,\n            options.octaves,\n            options.seed,\n        );\n        this.detail = new FractalBrownianNoise(\n            options.cells,\n            options.detailScale,\n            options.detailOctaves,\n            options.seed + 31337,\n        );\n    }\n\n    toDataURL(): string {\n        const {\n            cells,\n            color,\n            density,\n            contrast,\n            detailStrength,\n            clampLow,\n            clampHigh,\n            seed,\n            maxFill,\n            jitter,\n        } = this.options;\n\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = cells;\n        canvas.height = cells;\n\n        const ctx = canvas.getContext(\"2d\");\n        if (!ctx) return \"\";\n\n        const rgb = RgbColor.fromCss(ctx, color);\n        const image = ctx.createImageData(cells, cells);\n        const data = image.data;\n\n        for (let y = 0; y < cells; y++) {\n            for (let x = 0; x < cells; x++) {\n                const island = this.islands.sample(x, y);\n                const detail = this.detail.sample(x, y);\n                const combined = MathUtils.clamp(\n                    island + (detail - 0.5) * detailStrength,\n                    0,\n                    1,\n                );\n                const n = MathUtils.smoothstep(\n                    clampLow,\n                    Math.max(clampHigh, clampLow + 0.001),\n                    combined,\n                );\n                const p = MathUtils.clamp(\n                    (n - 0.5) * contrast + density,\n                    0,\n                    maxFill,\n                );\n                const bayer = DitherTile.BAYER_4X4[y % 4][x % 4];\n                const threshold =\n                    bayer * (1 - jitter)\n                    + MathUtils.hash2(x, y, seed + 991) * jitter;\n\n                if (threshold < p) {\n                    const i = (y * cells + x) * 4;\n                    data[i] = rgb.r;\n                    data[i + 1] = rgb.g;\n                    data[i + 2] = rgb.b;\n                    data[i + 3] = Math.round(\n                        255 * MathUtils.clamp(0.4 + 0.6 * n, 0, 1),\n                    );\n                }\n            }\n        }\n\n        ctx.putImageData(image, 0, 0);\n        return canvas.toDataURL(\"image/png\");\n    }\n}\n","import type { DitherTileOptions } from \"./DitherTile\";\nimport { DitherTile } from \"./DitherTile\";\n\n/**\n * Every visual knob of a dither background. All fields are optional and fall\n * back to `DitherBackgroundView.DEFAULTS`. Values are applied as CSS custom\n * properties, so they can be animated at runtime without rebuilding the\n * background; only `DitherBackgroundView.TILE_INPUTS` regenerate the dither\n * bitmap itself.\n */\nexport type DitherBackgroundOptions = {\n    backgroundColor?: string;\n\n    gridColor?: string;\n    gridSize?: number;\n    gridOpacity?: number;\n\n    noiseColor?: string;\n    noiseOpacity?: number;\n    noiseSize?: number;\n    noiseTileCells?: number;\n    noiseDensity?: number;\n    noiseContrast?: number;\n    noiseScale?: number;\n    noiseOctaves?: number;\n    noiseDetailScale?: number;\n    noiseDetailOctaves?: number;\n    noiseDetailStrength?: number;\n    noiseClampLow?: number;\n    noiseClampHigh?: number;\n    noiseSeed?: number;\n    noiseMaxFill?: number;\n    noiseJitter?: number;\n    noiseSpeed?: number;\n    noiseAngle?: number;\n    noiseTravel?: number;\n\n    fadeStart?: number;\n    fadeEnd?: number;\n\n    animateNoise?: boolean;\n    animateGlow?: boolean;\n};\n\nexport type DitherBackgroundCssVars = Record<`--${string}`, string>;\n\n/**\n * Resolves `DitherBackgroundOptions` against the defaults and computes the\n * derived values (tile geometry, scroll travel, CSS custom properties). Used\n * internally by `DitherBackground`; framework wrappers can use it standalone.\n */\nexport class DitherBackgroundView {\n    static readonly DEFAULTS: Required<DitherBackgroundOptions> = {\n        backgroundColor:\n            \"linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)\",\n\n        gridColor: \"var(--color-steel-500)\",\n        gridSize: 41,\n        gridOpacity: 0.23,\n\n        noiseColor: \"var(--color-scarlet-600)\",\n        noiseOpacity: 0.5,\n        noiseSize: 3,\n        noiseTileCells: DitherTile.DEFAULT_CELLS,\n        noiseDensity: 0.55,\n        noiseContrast: 1.8,\n        noiseScale: 32,\n        noiseOctaves: 3,\n        noiseDetailScale: 5,\n        noiseDetailOctaves: 3,\n        noiseDetailStrength: 0.2,\n        noiseClampLow: 0,\n        noiseClampHigh: 0.9,\n        noiseSeed: 69,\n        noiseMaxFill: 0.6,\n        noiseJitter: 0.3,\n        noiseSpeed: 180,\n        noiseAngle: 100,\n        noiseTravel: 1,\n\n        fadeStart: 0,\n        fadeEnd: 90,\n\n        animateNoise: true,\n        animateGlow: true,\n    };\n\n    /** Options that affect the generated tile; all others only set CSS variables. */\n    static readonly TILE_INPUTS: ReadonlyArray<keyof DitherBackgroundOptions> =\n        [\n            \"noiseTileCells\",\n            \"noiseColor\",\n            \"noiseDensity\",\n            \"noiseContrast\",\n            \"noiseScale\",\n            \"noiseOctaves\",\n            \"noiseDetailScale\",\n            \"noiseDetailOctaves\",\n            \"noiseDetailStrength\",\n            \"noiseClampLow\",\n            \"noiseClampHigh\",\n            \"noiseSeed\",\n            \"noiseMaxFill\",\n            \"noiseJitter\",\n        ];\n\n    readonly options: Required<DitherBackgroundOptions>;\n\n    constructor(options: DitherBackgroundOptions = {}) {\n        this.options = {\n            ...DitherBackgroundView.DEFAULTS,\n            ...DitherBackgroundView.defined(options),\n        };\n    }\n\n    /** Returns a new view with `partial` merged in; `undefined` values are ignored. */\n    merge(partial: DitherBackgroundOptions): DitherBackgroundView {\n        return new DitherBackgroundView({\n            ...this.options,\n            ...DitherBackgroundView.defined(partial),\n        });\n    }\n\n    /** True when the two views would produce different dither tiles. */\n    rebuildsTile(other: DitherBackgroundView): boolean {\n        return DitherBackgroundView.TILE_INPUTS.some(\n            (key) => this.options[key] !== other.options[key],\n        );\n    }\n\n    tileOptions(): DitherTileOptions {\n        const o = this.options;\n        return {\n            cells: o.noiseTileCells,\n            color: o.noiseColor,\n            density: o.noiseDensity,\n            contrast: o.noiseContrast,\n            scale: o.noiseScale,\n            octaves: o.noiseOctaves,\n            detailScale: o.noiseDetailScale,\n            detailOctaves: o.noiseDetailOctaves,\n            detailStrength: o.noiseDetailStrength,\n            clampLow: o.noiseClampLow,\n            clampHigh: o.noiseClampHigh,\n            seed: o.noiseSeed,\n            maxFill: o.noiseMaxFill,\n            jitter: o.noiseJitter,\n        };\n    }\n\n    get tileSize(): number {\n        return this.options.noiseTileCells * this.options.noiseSize;\n    }\n\n    /** Horizontal scroll distance in px, snapped to whole tiles (seamless loop). */\n    get travelX(): number {\n        const angle = (this.options.noiseAngle * Math.PI) / 180;\n        return (\n            Math.round(Math.cos(angle) * this.options.noiseTravel)\n            * this.tileSize\n        );\n    }\n\n    /** Vertical scroll distance in px, snapped to whole tiles (seamless loop). */\n    get travelY(): number {\n        const angle = (this.options.noiseAngle * Math.PI) / 180;\n        return (\n            Math.round(Math.sin(angle) * this.options.noiseTravel)\n            * this.tileSize\n        );\n    }\n\n    /** Oversizes the texture wrapper so the scroll never exposes its edges. */\n    get overscan(): number {\n        return (\n            Math.max(Math.abs(this.travelX), Math.abs(this.travelY))\n            + this.tileSize\n        );\n    }\n\n    cssVars(noiseImage: string): DitherBackgroundCssVars {\n        const o = this.options;\n        return {\n            \"--background-color\": o.backgroundColor,\n\n            \"--grid-color\": o.gridColor,\n            \"--grid-size\": `${o.gridSize}px`,\n            \"--grid-opacity\": String(o.gridOpacity),\n\n            \"--noise-image\": `url(\"${noiseImage}\")`,\n            \"--noise-tile-size\": `${this.tileSize}px`,\n            \"--noise-color\": o.noiseColor,\n            \"--noise-opacity\": String(o.noiseOpacity),\n            \"--noise-speed\": `${o.noiseSpeed}s`,\n            \"--noise-x\": `${this.travelX}px`,\n            \"--noise-y\": `${this.travelY}px`,\n            \"--noise-overscan\": `${this.overscan}px`,\n\n            \"--fade-start\": `${o.fadeStart}%`,\n            \"--fade-end\": `${o.fadeEnd}%`,\n        };\n    }\n\n    private static defined(\n        options: DitherBackgroundOptions,\n    ): DitherBackgroundOptions {\n        const entries = Object.entries(options).filter(\n            ([, value]) => value !== undefined,\n        );\n        return Object.fromEntries(entries) as DitherBackgroundOptions;\n    }\n}\n","import \"./DitherBackground.css\";\nimport { DitherTile } from \"./DitherTile\";\nimport type {\n    DitherBackgroundCssVars,\n    DitherBackgroundOptions,\n} from \"./DitherBackgroundView\";\nimport { DitherBackgroundView } from \"./DitherBackgroundView\";\n\n/**\n * Framework-agnostic layered background: a scrolling Bayer-dithered noise\n * texture, a static grid and an optional ambient glow. Plain DOM — mount it\n * on any element from any framework (or none).\n *\n * `mount()` decorates the container: it prepends the hidden layer elements\n * and applies the base class plus the CSS custom properties. Anything else\n * in the container renders above the layers, so frameworks keep rendering\n * their children normally. Options map 1:1 to the CSS custom properties and\n * can be changed at any time via `update()`; the dither bitmap is only\n * regenerated when one of the tile inputs changes.\n *\n * The tile is generated on a canvas, so `mount()` requires a browser DOM.\n */\nexport class DitherBackground {\n    static readonly ROOT_CLASS = \"dither-grid-background\";\n    static readonly ANIMATED_CLASS = \"dither-grid-background--animated\";\n    static readonly GLOW_CLASS = \"dither-grid-background--glow\";\n\n    private view: DitherBackgroundView;\n    private noiseImage = \"\";\n    private root: HTMLElement | null = null;\n    private layers: HTMLElement[] = [];\n\n    constructor(options: DitherBackgroundOptions = {}) {\n        this.view = new DitherBackgroundView(options);\n    }\n\n    /** Decorates `container` with the background layers. Idempotent per instance. */\n    mount(container: HTMLElement): void {\n        if (this.root) {\n            throw new Error(\"DitherBackground is already mounted\");\n        }\n        this.root = container;\n\n        const texture = document.createElement(\"div\");\n        texture.className = \"dither-grid-background__noise-texture\";\n        const noise = document.createElement(\"div\");\n        noise.className = \"dither-grid-background__noise\";\n        noise.setAttribute(\"aria-hidden\", \"true\");\n        noise.append(texture);\n\n        const grid = document.createElement(\"div\");\n        grid.className = \"dither-grid-background__grid\";\n        grid.setAttribute(\"aria-hidden\", \"true\");\n\n        this.layers = [noise, grid];\n        container.prepend(...this.layers);\n\n        this.noiseImage = this.createNoiseImage();\n        this.apply();\n    }\n\n    /** Merges new options; regenerates the tile only when tile inputs change. */\n    update(partial: DitherBackgroundOptions): void {\n        const next = this.view.merge(partial);\n        const rebuildTile = this.view.rebuildsTile(next);\n        this.view = next;\n        if (rebuildTile) {\n            this.noiseImage = this.createNoiseImage();\n        }\n        this.apply();\n    }\n\n    /** Removes the layers and reverts the container to its unmounted state. */\n    destroy(): void {\n        const root = this.root;\n        if (!root) return;\n\n        for (const layer of this.layers) layer.remove();\n        this.layers = [];\n\n        root.classList.remove(\n            DitherBackground.ROOT_CLASS,\n            DitherBackground.ANIMATED_CLASS,\n            DitherBackground.GLOW_CLASS,\n        );\n        for (const name of Object.keys(this.view.cssVars(\"\"))) {\n            root.style.removeProperty(name);\n        }\n\n        this.root = null;\n        this.noiseImage = \"\";\n    }\n\n    /** The decorated container element, or `null` before mount / after destroy. */\n    get element(): HTMLElement | null {\n        return this.root;\n    }\n\n    private apply(): void {\n        const root = this.root;\n        if (!root) return;\n\n        root.classList.add(DitherBackground.ROOT_CLASS);\n        root.classList.toggle(\n            DitherBackground.ANIMATED_CLASS,\n            this.view.options.animateNoise,\n        );\n        root.classList.toggle(\n            DitherBackground.GLOW_CLASS,\n            this.view.options.animateGlow,\n        );\n\n        const vars: DitherBackgroundCssVars = this.view.cssVars(\n            this.noiseImage,\n        );\n        for (const [name, value] of Object.entries(vars)) {\n            root.style.setProperty(name, value);\n        }\n    }\n\n    private createNoiseImage(): string {\n        return new DitherTile(this.view.tileOptions()).toDataURL();\n    }\n}\n"],"mappings":"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"}