@code-of-chaos/dither 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,217 @@
-# Temporary Holding Version
+# Dither.Js
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Framework-agnostic animated bitmap-dithered gradient backgrounds - plain
+TypeScript, DOM and CSS - with a tileable Perlin/fBm noise engine for
+generating your own dither tiles.
+
+The texture is a real Bayer-dithered noise bitmap (Perlin islands + fine
+detail), generated once on a canvas and scrolled with a GPU-friendly CSS
+transform. Everything visual - colors, grid, fade, speed, direction - is an
+option, driven through CSS custom properties so it can be animated at runtime.
+
+## Install
+
+```sh
+npm install @code-of-chaos/dither
+```
+
+## Usage
+
+```ts
+import { DitherBackground } from "@code-of-chaos/dither";
+import "@code-of-chaos/dither/style.css";
+
+const background = new DitherBackground({ noiseColor: "var(--accent)" });
+background.mount(document.getElementById("root")!);
+
+// Animate at runtime - cheap, the tile only rebuilds for tile inputs:
+background.update({ gridSize: 64, noiseOpacity: 0.4 });
+
+// Revert the element to its unmounted state:
+background.destroy();
+```
+
+`mount()` decorates the element: it prepends the hidden background layers
+and applies the CSS custom properties. Anything else in the element renders
+above the layers, so frameworks keep rendering their children normally.
+
+### Framework recipes
+
+React (class, OOP):
+
+```tsx
+import { Component, createRef, type ReactNode } from "react";
+import {
+    DitherBackground,
+    type DitherBackgroundOptions,
+} from "@code-of-chaos/dither";
+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>;
+    }
+}
+```
+
+Next.js: the tile needs a browser canvas - mount inside a client component
+(`"use client"`) or in `useEffect`.
+
+Angular (directive):
+
+```ts
+@Directive({ selector: "[ditherBackground]" })
+export class DitherBackgroundDirective
+    implements AfterViewInit, OnChanges, OnDestroy
+{
+    @Input() ditherBackground: DitherBackgroundOptions = {};
+
+    private background?: DitherBackground;
+
+    constructor(private el: ElementRef<HTMLElement>) {}
+
+    ngAfterViewInit(): void {
+        this.background = new DitherBackground(this.ditherBackground);
+        this.background.mount(this.el.nativeElement);
+    }
+
+    ngOnChanges(): void {
+        this.background?.update(this.ditherBackground);
+    }
+
+    ngOnDestroy(): void {
+        this.background?.destroy();
+    }
+}
+```
+
+Vue (composable):
+
+```ts
+export function useDitherBackground(
+    el: Ref<HTMLElement | null>,
+    options: Ref<DitherBackgroundOptions>,
+) {
+    let background: DitherBackground | undefined;
+
+    onMounted(() => {
+        background = new DitherBackground(options.value);
+        background.mount(el.value!);
+    });
+    watch(options, (next) => background?.update(next), { deep: true });
+    onBeforeUnmount(() => background?.destroy());
+}
+```
+
+Svelte (action):
+
+```ts
+export function dither(
+    node: HTMLElement,
+    options: DitherBackgroundOptions = {},
+) {
+    const background = new DitherBackground(options);
+    background.mount(node);
+    return {
+        update: (next: DitherBackgroundOptions) => background.update(next),
+        destroy: () => background.destroy(),
+    };
+}
+```
+
+Every visual option is optional (defaults in parentheses):
+
+| Option                                                          | Purpose                                                                     |
+| --------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `backgroundColor`                                               | Base fill, any CSS color or gradient                                        |
+| `gridColor`, `gridSize`, `gridOpacity`                          | Structural grid lines (steel, 41px, 0.23)                                   |
+| `noiseColor`, `noiseOpacity`                                    | Dither tile color and layer opacity (scarlet, 0.5)                          |
+| `noiseSize`                                                     | Displayed size of each dither pixel in px (3)                               |
+| `noiseDensity`, `noiseContrast`, `noiseMaxFill`, `noiseJitter`  | Dither character: fill amount, hardness, density cap, Bayer/random mix      |
+| `noiseScale`, `noiseOctaves`                                    | Island field (clump size, fBm depth)                                        |
+| `noiseDetailScale`, `noiseDetailOctaves`, `noiseDetailStrength` | Fine detail field layered on the islands                                    |
+| `noiseClampLow`, `noiseClampHigh`                               | Soft-clamp the noise: clean voids low, no saturation high                   |
+| `noiseTileCells`, `noiseSeed`                                   | Tile resolution and reproducible randomness                                 |
+| `noiseSpeed`, `noiseAngle`, `noiseTravel`                       | Scroll animation: seconds per loop, direction in degrees, distance in tiles |
+| `fadeStart`, `fadeEnd`                                          | Vertical fade of the dither layer (0%, 90%)                                 |
+| `animateNoise`, `animateGlow`                                   | Enable the scroll / ambient glow (both on)                                  |
+
+Colors accept `var(--token, fallback)` references; they are resolved against
+the document root, so theme variables work as parameters.
+
+## Lower-level pieces
+
+- `DitherTile` - generates a seamless Bayer-dithered PNG data URL from the
+  noise fields; use it for static overlays and textures.
+- `DitherBackgroundView` - resolves options to defaults and computes the CSS
+  custom properties; useful when writing a thin framework wrapper.
+- `PerlinNoise` / `FractalBrownianNoise` - tileable gradient noise.
+- `MathUtils` / `RgbColor` - helpers used by the engine.
+
+## Development
+
+```sh
+npm install
+npm run dev       # playground at demo/
+npm test          # vitest
+npm run lint      # biome
+npm run build     # dist/ (ESM + types + style.css)
+```
+
+## Releasing
+
+Releases use npm staged publishing with a stage-only token: CI stages the
+version but can never publish directly (a leaked token cannot release a
+version on its own).
+
+1. Bump `version` in `package.json` (semver).
+2. Tag and push: `git tag vX.Y.Z && git push origin vX.Y.Z`.
+3. The release workflow verifies the tag matches the package version, runs
+   `npm stage publish --provenance` (needs an `NPM_TOKEN` repository secret
+   holding a stage-only token) and creates a GitHub release.
+4. A maintainer reviews and approves the staged version - with 2FA, either:
+   - CLI: `npm stage list` to find the stage id, then
+     `npm stage approve <stage-id>`
+   - or the "Staged Packages" tab on npmjs.com and click Approve
+
+   The version becomes installable only after approval. Discard a bad stage
+   with `npm stage reject <stage-id>`.
+
+Notes:
+
+- `npm stage publish` does not prompt for 2FA - proof of presence is deferred
+  to the approval step. Requires npm CLI 11.15+ (Node 22.14+).
+- The first release creates the package (shown as a `0.0.0-stage` placeholder)
+  until the staged version is approved.
+- Direct `npm publish` with the stage-only token fails with `E_STAGE_REQUIRED`.
+
+## 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.
+
+## License
+
+GPL-3.0-only (see `LICENSE`).

package/dist/DitherBackground.d.ts

@@ -0,0 +1,37 @@
+import "./DitherBackground.css";
+import type { DitherBackgroundOptions } from "./DitherBackgroundView";
+/**
+ * Framework-agnostic layered background: a scrolling Bayer-dithered noise
+ * texture, a static grid and an optional ambient glow. Plain DOM — mount it
+ * on any element from any framework (or none).
+ *
+ * `mount()` decorates the container: it prepends the hidden layer elements
+ * and applies the base class plus the CSS custom properties. Anything else
+ * in the container renders above the layers, so frameworks keep rendering
+ * their children normally. Options map 1:1 to the CSS custom properties and
+ * can be changed at any time via `update()`; the dither bitmap is only
+ * regenerated when one of the tile inputs changes.
+ *
+ * The tile is generated on a canvas, so `mount()` requires a browser DOM.
+ */
+export declare class DitherBackground {
+    static readonly ROOT_CLASS = "dither-grid-background";
+    static readonly ANIMATED_CLASS = "dither-grid-background--animated";
+    static readonly GLOW_CLASS = "dither-grid-background--glow";
+    private view;
+    private noiseImage;
+    private root;
+    private layers;
+    constructor(options?: DitherBackgroundOptions);
+    /** Decorates `container` with the background layers. Idempotent per instance. */
+    mount(container: HTMLElement): void;
+    /** Merges new options; regenerates the tile only when tile inputs change. */
+    update(partial: DitherBackgroundOptions): void;
+    /** Removes the layers and reverts the container to its unmounted state. */
+    destroy(): void;
+    /** The decorated container element, or `null` before mount / after destroy. */
+    get element(): HTMLElement | null;
+    private apply;
+    private createNoiseImage;
+}
+//# sourceMappingURL=DitherBackground.d.ts.map

package/dist/DitherBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DitherBackground.d.ts","sourceRoot":"","sources":["../src/DitherBackground.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAER,uBAAuB,EAC1B,MAAM,wBAAwB,CAAC;AAGhC;;;;;;;;;;;;;GAaG;AACH,qBAAa,gBAAgB;IACzB,MAAM,CAAC,QAAQ,CAAC,UAAU,4BAA4B;IACtD,MAAM,CAAC,QAAQ,CAAC,cAAc,sCAAsC;IACpE,MAAM,CAAC,QAAQ,CAAC,UAAU,kCAAkC;IAE5D,OAAO,CAAC,IAAI,CAAuB;IACnC,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,MAAM,CAAqB;IAEnC,YAAY,OAAO,GAAE,uBAA4B,EAEhD;IAED,iFAAiF;IACjF,KAAK,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAsBlC;IAED,6EAA6E;IAC7E,MAAM,CAAC,OAAO,EAAE,uBAAuB,GAAG,IAAI,CAQ7C;IAED,2EAA2E;IAC3E,OAAO,IAAI,IAAI,CAkBd;IAED,+EAA+E;IAC/E,IAAI,OAAO,IAAI,WAAW,GAAG,IAAI,CAEhC;IAED,OAAO,CAAC,KAAK;IAsBb,OAAO,CAAC,gBAAgB;CAG3B"}

package/dist/DitherBackgroundView.d.ts

@@ -0,0 +1,65 @@
+import type { DitherTileOptions } from "./DitherTile";
+/**
+ * Every visual knob of a dither background. All fields are optional and fall
+ * back to `DitherBackgroundView.DEFAULTS`. Values are applied as CSS custom
+ * properties, so they can be animated at runtime without rebuilding the
+ * background; only `DitherBackgroundView.TILE_INPUTS` regenerate the dither
+ * bitmap itself.
+ */
+export type DitherBackgroundOptions = {
+    backgroundColor?: string;
+    gridColor?: string;
+    gridSize?: number;
+    gridOpacity?: number;
+    noiseColor?: string;
+    noiseOpacity?: number;
+    noiseSize?: number;
+    noiseTileCells?: number;
+    noiseDensity?: number;
+    noiseContrast?: number;
+    noiseScale?: number;
+    noiseOctaves?: number;
+    noiseDetailScale?: number;
+    noiseDetailOctaves?: number;
+    noiseDetailStrength?: number;
+    noiseClampLow?: number;
+    noiseClampHigh?: number;
+    noiseSeed?: number;
+    noiseMaxFill?: number;
+    noiseJitter?: number;
+    noiseSpeed?: number;
+    noiseAngle?: number;
+    noiseTravel?: number;
+    fadeStart?: number;
+    fadeEnd?: number;
+    animateNoise?: boolean;
+    animateGlow?: boolean;
+};
+export type DitherBackgroundCssVars = Record<`--${string}`, string>;
+/**
+ * Resolves `DitherBackgroundOptions` against the defaults and computes the
+ * derived values (tile geometry, scroll travel, CSS custom properties). Used
+ * internally by `DitherBackground`; framework wrappers can use it standalone.
+ */
+export declare class DitherBackgroundView {
+    static readonly DEFAULTS: Required<DitherBackgroundOptions>;
+    /** Options that affect the generated tile; all others only set CSS variables. */
+    static readonly TILE_INPUTS: ReadonlyArray<keyof DitherBackgroundOptions>;
+    readonly options: Required<DitherBackgroundOptions>;
+    constructor(options?: DitherBackgroundOptions);
+    /** Returns a new view with `partial` merged in; `undefined` values are ignored. */
+    merge(partial: DitherBackgroundOptions): DitherBackgroundView;
+    /** True when the two views would produce different dither tiles. */
+    rebuildsTile(other: DitherBackgroundView): boolean;
+    tileOptions(): DitherTileOptions;
+    get tileSize(): number;
+    /** Horizontal scroll distance in px, snapped to whole tiles (seamless loop). */
+    get travelX(): number;
+    /** Vertical scroll distance in px, snapped to whole tiles (seamless loop). */
+    get travelY(): number;
+    /** Oversizes the texture wrapper so the scroll never exposes its edges. */
+    get overscan(): number;
+    cssVars(noiseImage: string): DitherBackgroundCssVars;
+    private static defined;
+}
+//# sourceMappingURL=DitherBackgroundView.d.ts.map

package/dist/DitherBackgroundView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DitherBackgroundView.d.ts","sourceRoot":"","sources":["../src/DitherBackgroundView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;AAEpE;;;;GAIG;AACH,qBAAa,oBAAoB;IAC7B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAiCzD;IAEF,iFAAiF;IACjF,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC,MAAM,uBAAuB,CAAC,CAgBnE;IAEN,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IAEpD,YAAY,OAAO,GAAE,uBAA4B,EAKhD;IAED,mFAAmF;IACnF,KAAK,CAAC,OAAO,EAAE,uBAAuB,GAAG,oBAAoB,CAK5D;IAED,oEAAoE;IACpE,YAAY,CAAC,KAAK,EAAE,oBAAoB,GAAG,OAAO,CAIjD;IAED,WAAW,IAAI,iBAAiB,CAkB/B;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,gFAAgF;IAChF,IAAI,OAAO,IAAI,MAAM,CAMpB;IAED,8EAA8E;IAC9E,IAAI,OAAO,IAAI,MAAM,CAMpB;IAED,2EAA2E;IAC3E,IAAI,QAAQ,IAAI,MAAM,CAKrB;IAED,OAAO,CAAC,UAAU,EAAE,MAAM,GAAG,uBAAuB,CAqBnD;IAED,OAAO,CAAC,MAAM,CAAC,OAAO;CAQzB"}

package/dist/DitherTile.d.ts

@@ -0,0 +1,42 @@
+/**
+ * All visual knobs of the tile. `scale`/`octaves` shape the large island
+ * field, `detail*` the fine detail field; `clampLow`/`clampHigh` soft-clip
+ * the blend (clean voids at the low end, no saturation at the high end),
+ * `maxFill` caps how dense the dither can get, and `jitter` blends the
+ * Bayer threshold with per-pixel random values for an organic look.
+ */
+export type DitherTileOptions = {
+    cells: number;
+    color: string;
+    density: number;
+    contrast: number;
+    scale: number;
+    octaves: number;
+    detailScale: number;
+    detailOctaves: number;
+    detailStrength: number;
+    clampLow: number;
+    clampHigh: number;
+    seed: number;
+    maxFill: number;
+    jitter: number;
+};
+/**
+ * Renders a seamless dithered noise tile as a PNG data URL.
+ *
+ * Per pixel: the island and detail noise fields are blended into a density
+ * value, soft-clamped, then thresholded against a Bayer matrix mixed with
+ * per-pixel jitter to decide whether the pixel is inked. Because the noise
+ * fields tile seamlessly, the resulting image can be repeated and scrolled
+ * forever without visible seams.
+ */
+export declare class DitherTile {
+    private readonly options;
+    static readonly DEFAULT_CELLS = 512;
+    private static readonly BAYER_4X4;
+    private readonly islands;
+    private readonly detail;
+    constructor(options: DitherTileOptions);
+    toDataURL(): string;
+}
+//# sourceMappingURL=DitherTile.d.ts.map

package/dist/DitherTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DitherTile.d.ts","sourceRoot":"","sources":["../src/DitherTile.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;GAQG;AACH,qBAAa,UAAU;IAaP,OAAO,CAAC,QAAQ,CAAC,OAAO;IAZpC,MAAM,CAAC,QAAQ,CAAC,aAAa,OAAO;IAEpC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAKc;IAE/C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuB;IAE9C,YAA6B,OAAO,EAAE,iBAAiB,EAatD;IAED,SAAS,IAAI,MAAM,CA+DlB;CACJ"}

package/dist/FractalBrownianNoise.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Fractal Brownian motion: stacks PerlinNoise octaves with halved amplitude
+ * and doubled frequency per octave. Coordinates are expressed in tile cells,
+ * keeping every octave (and therefore the whole field) seamlessly tileable.
+ * Output is normalized to [0, 1].
+ */
+export declare class FractalBrownianNoise {
+    private readonly octaves;
+    private readonly totalAmplitude;
+    constructor(cells: number, scale: number, octaves: number, seed: number);
+    sample(x: number, y: number): number;
+}
+//# sourceMappingURL=FractalBrownianNoise.d.ts.map

package/dist/FractalBrownianNoise.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FractalBrownianNoise.d.ts","sourceRoot":"","sources":["../src/FractalBrownianNoise.ts"],"names":[],"mappings":"AAWA;;;;;GAKG;AACH,qBAAa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAgB;IACxC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IAExC,YAAY,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAkBtE;IAED,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAanC;CACJ"}

package/dist/MathUtils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Small math helpers used by the noise and dither pipeline.
+ * The standard Math library has no clamp/lerp/smoothstep/mod equivalents.
+ */
+export declare class MathUtils {
+    static clamp(value: number, min: number, max: number): number;
+    static lerp(a: number, b: number, t: number): number;
+    static smoothstep(edge0: number, edge1: number, x: number): number;
+    static mod(value: number, period: number): number;
+    static hash2(x: number, y: number, seed: number): number;
+}
+//# sourceMappingURL=MathUtils.d.ts.map

package/dist/MathUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathUtils.d.ts","sourceRoot":"","sources":["../src/MathUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,SAAS;IAClB,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE5D;IAED,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAEnD;IAED,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAGjE;IAED,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEhD;IAED,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAQvD;CACJ"}

package/dist/PerlinNoise.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Tileable 2D Perlin gradient noise. Lattice coordinates wrap at `period`,
+ * so sampling the [0, period) cell range produces a seamless tile.
+ * Raw output is roughly in [-1, 1] (see FractalBrownianNoise for normalized values).
+ */
+export declare class PerlinNoise {
+    private readonly period;
+    private readonly seed;
+    private static readonly GRADIENTS;
+    constructor(period: number, seed: number);
+    sample(x: number, y: number): number;
+    private gradientDot;
+}
+//# sourceMappingURL=PerlinNoise.d.ts.map

package/dist/PerlinNoise.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerlinNoise.d.ts","sourceRoot":"","sources":["../src/PerlinNoise.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,qBAAa,WAAW;IAShB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,IAAI;IATzB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAK9B;IAEH,YACqB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EAC7B;IAEJ,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAwBnC;IAED,OAAO,CAAC,WAAW;CAetB"}

package/dist/RgbColor.d.ts

@@ -0,0 +1,18 @@
+/** Immutable RGB triple with CSS color parsing. */
+export declare class RgbColor {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    constructor(r: number, g: number, b: number);
+    /**
+     * Parses any CSS color (named, hex, rgb()/rgba()) by letting the canvas
+     * resolve it: assigning to fillStyle normalizes the value to a canonical
+     * string which is then read back. Falls back to white on invalid input.
+     *
+     * A single var(--token, fallback) reference is resolved against the
+     * document root first, so theme variables can be used as color parameters.
+     */
+    static fromCss(ctx: CanvasRenderingContext2D, css: string): RgbColor;
+    private static resolveVariable;
+}
+//# sourceMappingURL=RgbColor.d.ts.map

package/dist/RgbColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RgbColor.d.ts","sourceRoot":"","sources":["../src/RgbColor.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,qBAAa,QAAQ;IAEb,QAAQ,CAAC,CAAC,EAAE,MAAM;IAClB,QAAQ,CAAC,CAAC,EAAE,MAAM;IAClB,QAAQ,CAAC,CAAC,EAAE,MAAM;IAHtB,YACa,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EAClB;IAEJ;;;;;;;OAOG;IACH,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,GAAG,QAAQ,CAgCnE;IAED,OAAO,CAAC,MAAM,CAAC,eAAe;CAWjC"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { DitherBackground } from "./DitherBackground";
+export type { DitherBackgroundCssVars, DitherBackgroundOptions, } from "./DitherBackgroundView";
+export { DitherBackgroundView } from "./DitherBackgroundView";
+export type { DitherTileOptions } from "./DitherTile";
+export { DitherTile } from "./DitherTile";
+export { FractalBrownianNoise } from "./FractalBrownianNoise";
+export { MathUtils } from "./MathUtils";
+export { PerlinNoise } from "./PerlinNoise";
+export { RgbColor } from "./RgbColor";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACR,uBAAuB,EACvB,uBAAuB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}