fundus 0.0.2 → 0.0.3

package/dist/core/slice-data.d.ts

@@ -0,0 +1,61 @@
+/**
+ * The slice data model keeps the source image separate from slicing metadata
+ * (Fundus tracks raw files and
+ * proxy dimensions separately), so there is no `SliceSource` here.
+ *
+ * The geometry is stored as **insets** (border thickness in source pixels), the
+ * canonical, render-ready form — equivalent to CSS `border-image-slice`.
+ * `slicedAxesFor` is the single source of truth for which axes each mode uses.
+ */
+export declare const SLICE_MODES: readonly ["nine", "three-horizontal", "three-vertical", "one"];
+export type SliceMode = (typeof SLICE_MODES)[number];
+/** Border thickness in source pixels. Always integers (pixel-precise). */
+export interface SliceInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * Full slicing description for an image, independent of which image it applies
+ * to. Stored in the library as (part of) the slice plugin's parameters and
+ * emitted into generated manifest entries.
+ */
+export interface Slicing {
+    mode: SliceMode;
+    insets: SliceInsets;
+    /**
+     * Source pixels per CSS pixel — the scale the asset was exported at
+     * (`1` = @1x, `2` = @2x, `3` = @3x). All fixed slice dimensions (9-slice
+     * corners) are divided by this when rendering, so a high-resolution asset
+     * displays at its intended logical size.
+     */
+    pixelRatio: number;
+    /**
+     * Per-side thickness (in source pixels) of the image's baked-in overdraw — a
+     * drop shadow / glow painted around the actual element. The renderers treat
+     * the image **minus** the overdraw as the element: that core fills the layout
+     * box, and the overdraw band is painted outside it (like a CSS `box-shadow`).
+     * Optional: absent means no overdraw.
+     */
+    overdraw?: SliceInsets;
+}
+/** All-zero insets — the "no overdraw" value. */
+export declare function createZeroInsets(): SliceInsets;
+/**
+ * Default insets for a freshly ingested image: each border a quarter of the
+ * corresponding dimension (at least 1px where the image is large enough),
+ * always clamped so a center of at least one source pixel remains on each
+ * axis. For an axis too small for insets + a 1px center (width/height ≤ 2)
+ * the insets on that axis are 0 — structurally valid slicing for any size ≥ 1.
+ */
+export declare function defaultInsetsForSize(width: number, height: number): SliceInsets;
+/** Which source-image axes are sliced for a mode. */
+export declare function slicedAxesFor(mode: SliceMode): {
+    horizontal: boolean;
+    vertical: boolean;
+};
+/** Maximum inset on one side while preserving the opposite inset. */
+export declare function maxInset(insets: SliceInsets, side: keyof SliceInsets, width: number, height: number): number;
+/** Maximum overdraw on one side while preserving at least one core source pixel. */
+export declare function maxOverdraw(overdraw: SliceInsets, side: keyof SliceInsets, width: number, height: number): number;

package/dist/core/slice-data.js

@@ -0,0 +1,49 @@
+/**
+ * The slice data model keeps the source image separate from slicing metadata
+ * (Fundus tracks raw files and
+ * proxy dimensions separately), so there is no `SliceSource` here.
+ *
+ * The geometry is stored as **insets** (border thickness in source pixels), the
+ * canonical, render-ready form — equivalent to CSS `border-image-slice`.
+ * `slicedAxesFor` is the single source of truth for which axes each mode uses.
+ */
+export const SLICE_MODES = ['nine', 'three-horizontal', 'three-vertical', 'one'];
+/** All-zero insets — the "no overdraw" value. */
+export function createZeroInsets() {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+/**
+ * Default insets for a freshly ingested image: each border a quarter of the
+ * corresponding dimension (at least 1px where the image is large enough),
+ * always clamped so a center of at least one source pixel remains on each
+ * axis. For an axis too small for insets + a 1px center (width/height ≤ 2)
+ * the insets on that axis are 0 — structurally valid slicing for any size ≥ 1.
+ */
+export function defaultInsetsForSize(width, height) {
+    // max(1, quarter) is the desired border; min(…, floor((size − 1) / 2)) caps
+    // it so `2 × inset ≤ size − 1`, i.e. the center keeps ≥ 1 source pixel.
+    const horizontal = Math.min(Math.max(1, Math.floor(width / 4)), Math.floor((width - 1) / 2));
+    const vertical = Math.min(Math.max(1, Math.floor(height / 4)), Math.floor((height - 1) / 2));
+    return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+}
+/** Which source-image axes are sliced for a mode. */
+export function slicedAxesFor(mode) {
+    return {
+        horizontal: mode === 'nine' || mode === 'three-horizontal',
+        vertical: mode === 'nine' || mode === 'three-vertical'
+    };
+}
+/** Maximum inset on one side while preserving the opposite inset. */
+export function maxInset(insets, side, width, height) {
+    if (side === 'left')
+        return width - insets.right;
+    if (side === 'right')
+        return width - insets.left;
+    if (side === 'top')
+        return height - insets.bottom;
+    return height - insets.top;
+}
+/** Maximum overdraw on one side while preserving at least one core source pixel. */
+export function maxOverdraw(overdraw, side, width, height) {
+    return maxInset(overdraw, side, width, height) - 1;
+}

package/dist/runtime/chroma-key-gl.d.ts

@@ -1,23 +1,41 @@
-import { ChromaKeyParameters } from "#fundus/core";
-
-//#region src/chroma-key-gl.d.ts
-declare class ChromaKeyGl {
-  #private;
-  /** Returns null when WebGL2 is unavailable or the shader fails to compile. */
-  static create(canvas: HTMLCanvasElement): ChromaKeyGl | null;
-  private constructor();
-  /**
-   * Set (or clear) the grayscale shape mask multiplied onto the output alpha. The
-   * mask is stretched over the full video frame, so author it at the video's aspect
-   * ratio. Pass null to remove the mask.
-   */
-  setMask(image: TexImageSource | null): void;
-  /**
-   * Upload the video's current frame and render it keyed. Sizes the drawing buffer to
-   * the video's intrinsic size on first draw (and after a size change).
-   */
-  draw(video: HTMLVideoElement, parameters: ChromaKeyParameters): void;
-  dispose(): void;
+/**
+ * WebGL2 chroma-key video renderer based on the public UnityChromakey shader
+ * (https://github.com/otdavies/UnityChromakey, `Shaders/ChromaKey.shader`) so a
+ * greenscreen video plays with a transparent background.
+ *
+ * The keying algorithm follows the upstream shader: the key color and each
+ * pixel are converted to YCbCr chroma (Cb/Cr), the squared chroma distance is mapped
+ * through a cutoff/feather window (`colorclose`), the resulting mask is blurred with a
+ * 3×3 neighbourhood + smoothstep-sharpened, the keyed color is despilled (green pulled
+ * toward the red/blue average, lost luminance re-added), and the output is
+ * `vec4(color * mask, mask)` — the upstream output formula (tint fixed at white; tinting
+ * is host styling, not asset data) — emitted premultiplied (rgb × alpha) for the canvas
+ * compositor (see the fragColor note).
+ *
+ * Fundus adds an optional mask pass (`setMask`): a grayscale image
+ * sampled at the same UVs whose luminance multiplies the final alpha — white keeps a
+ * pixel, black drops it, gray fades it (no alpha clip). Absent a mask, a 1×1 white
+ * fallback texture makes the pass a no-op.
+ *
+ * Owns its own GL context on the given canvas. `create` returns null when WebGL2 is
+ * unavailable. Browser-only; the caller drives it per frame with the playing <video>.
+ */
+import type { ChromaKeyParameters } from '../core/index.js';
+export declare class ChromaKeyGl {
+    #private;
+    /** Returns null when WebGL2 is unavailable or the shader fails to compile. */
+    static create(canvas: HTMLCanvasElement): ChromaKeyGl | null;
+    private constructor();
+    /**
+     * Set (or clear) the grayscale shape mask multiplied onto the output alpha. The
+     * mask is stretched over the full video frame, so author it at the video's aspect
+     * ratio. Pass null to remove the mask.
+     */
+    setMask(image: TexImageSource | null): void;
+    /**
+     * Upload the video's current frame and render it keyed. Sizes the drawing buffer to
+     * the video's intrinsic size on first draw (and after a size change).
+     */
+    draw(video: HTMLVideoElement, parameters: ChromaKeyParameters): void;
+    dispose(): void;
 }
-//#endregion
-export { ChromaKeyGl };

package/dist/runtime/chroma-key-gl.js

@@ -1,4 +1,3 @@
-//#region src/chroma-key-gl.ts
 const VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
 out vec2 v_uv;
@@ -8,6 +7,10 @@ void main() {
 	v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);
 	gl_Position = vec4(a_pos, 0.0, 1.0);
 }`;
+// The upstream fragment, translated HLSL → GLSL. Kept structurally identical (same
+// function names, same sample pattern, same constants) so it can be diffed against
+// the original; only the texel-size plumbing differs (u_texelSize is (1/w, 1/h),
+// Unity's _MainTex_TexelSize packs (1/w, 1/h, w, h)).
 const FRAGMENT_SHADER = `#version 300 es
 precision highp float;
 
@@ -105,186 +108,189 @@ void main() {
 	fragColor = vec4(keyed.rgb * keyed.a, keyed.a);
 }`;
 function compileProgram(gl) {
-	const compile = (type, source) => {
-		const shader = gl.createShader(type);
-		gl.shaderSource(shader, source);
-		gl.compileShader(shader);
-		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-			const log = gl.getShaderInfoLog(shader);
-			gl.deleteShader(shader);
-			throw new Error(`Chroma-key shader compilation failed: ${log}.`);
-		}
-		return shader;
-	};
-	const program = gl.createProgram();
-	gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX_SHADER));
-	gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
-	gl.linkProgram(program);
-	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-		const log = gl.getProgramInfoLog(program);
-		gl.deleteProgram(program);
-		throw new Error(`Chroma-key program linking failed: ${log}.`);
-	}
-	return program;
+    const compile = (type, source) => {
+        const shader = gl.createShader(type);
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            const log = gl.getShaderInfoLog(shader);
+            gl.deleteShader(shader);
+            throw new Error(`Chroma-key shader compilation failed: ${log}.`);
+        }
+        return shader;
+    };
+    const program = gl.createProgram();
+    gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX_SHADER));
+    gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`Chroma-key program linking failed: ${log}.`);
+    }
+    return program;
+}
+export class ChromaKeyGl {
+    #gl;
+    #canvas;
+    // GL resources — recreated on context restore, so not readonly.
+    #program;
+    #quadBuffer;
+    #texture;
+    #uniforms;
+    #maskTexture;
+    /** Last mask image, kept so the texture can be re-uploaded after a context restore. */
+    #maskImage = null;
+    /** True between webglcontextlost and webglcontextrestored — draw no-ops meanwhile. */
+    #contextLost = false;
+    /** Returns null when WebGL2 is unavailable or the shader fails to compile. */
+    static create(canvas) {
+        // Premultiplied alpha — the fragment shader multiplies rgb by alpha (see the
+        // note above fragColor), which reproduces the upstream blend and survives
+        // iOS WKWebView, which composites as premultiplied no matter what this flag says.
+        const gl = canvas.getContext('webgl2', {
+            premultipliedAlpha: true,
+            alpha: true,
+            depth: false,
+            stencil: false,
+            antialias: false
+        });
+        if (!gl)
+            return null;
+        try {
+            return new ChromaKeyGl(gl, canvas);
+        }
+        catch {
+            return null;
+        }
+    }
+    constructor(gl, canvas) {
+        this.#gl = gl;
+        this.#canvas = canvas;
+        // A real context loss (Android background/foreground, GPU pressure) invalidates
+        // every GL object; preventDefault keeps the context restorable and the next
+        // draw() after the rebuild repaints from the still-playing video.
+        canvas.addEventListener('webglcontextlost', this.#handleContextLost);
+        canvas.addEventListener('webglcontextrestored', this.#handleContextRestored);
+        this.#initResources();
+    }
+    #handleContextLost = (event) => {
+        event.preventDefault();
+        this.#contextLost = true;
+    };
+    #handleContextRestored = () => {
+        try {
+            this.#initResources();
+            this.#contextLost = false;
+        }
+        catch {
+            this.#contextLost = true;
+        }
+    };
+    /** (Re)create all GL resources on the current context — at construction and after restore. */
+    #initResources() {
+        const gl = this.#gl;
+        this.#program = compileProgram(gl);
+        gl.useProgram(this.#program);
+        const location = (name) => gl.getUniformLocation(this.#program, name);
+        this.#uniforms = {
+            texelSize: location('u_texelSize'),
+            keyColor: location('u_keyColor'),
+            tintColor: location('u_tintColor'),
+            colorCutoff: location('u_colorCutoff'),
+            colorFeathering: location('u_colorFeathering'),
+            maskFeathering: location('u_maskFeathering'),
+            sharpening: location('u_sharpening'),
+            despill: location('u_despill'),
+            despillLuminanceAdd: location('u_despillLuminanceAdd')
+        };
+        gl.uniform1i(gl.getUniformLocation(this.#program, 'u_texture'), 0);
+        gl.uniform1i(gl.getUniformLocation(this.#program, 'u_mask'), 1);
+        // Tint stays constant white; presentation styling belongs to the host.
+        gl.uniform4f(this.#uniforms.tintColor, 1, 1, 1, 1);
+        this.#quadBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#quadBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+        const positionLocation = gl.getAttribLocation(this.#program, 'a_pos');
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+        this.#texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.#texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        this.#maskTexture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        // The old mask texture is invalid after a context loss; re-upload the kept image.
+        this.#uploadMask();
+        gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.BLEND);
+        gl.clearColor(0, 0, 0, 0);
+    }
+    /**
+     * Set (or clear) the grayscale shape mask multiplied onto the output alpha. The
+     * mask is stretched over the full video frame, so author it at the video's aspect
+     * ratio. Pass null to remove the mask.
+     */
+    setMask(image) {
+        this.#maskImage = image;
+        if (!this.#contextLost)
+            this.#uploadMask();
+    }
+    #uploadMask() {
+        const gl = this.#gl;
+        gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
+        if (this.#maskImage) {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.#maskImage);
+        }
+        else {
+            // 1×1 white — the mask multiply becomes a no-op.
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]));
+        }
+    }
+    /**
+     * Upload the video's current frame and render it keyed. Sizes the drawing buffer to
+     * the video's intrinsic size on first draw (and after a size change).
+     */
+    draw(video, parameters) {
+        if (this.#contextLost || video.videoWidth === 0)
+            return;
+        const gl = this.#gl;
+        if (this.#canvas.width !== video.videoWidth || this.#canvas.height !== video.videoHeight) {
+            this.#canvas.width = video.videoWidth;
+            this.#canvas.height = video.videoHeight;
+            gl.viewport(0, 0, video.videoWidth, video.videoHeight);
+        }
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.#texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
+        gl.useProgram(this.#program);
+        gl.uniform2f(this.#uniforms.texelSize, 1 / video.videoWidth, 1 / video.videoHeight);
+        gl.uniform3fv(this.#uniforms.keyColor, parameters.keyColor);
+        gl.uniform1f(this.#uniforms.colorCutoff, parameters.colorCutoff);
+        gl.uniform1f(this.#uniforms.colorFeathering, parameters.colorFeathering);
+        gl.uniform1f(this.#uniforms.maskFeathering, parameters.maskFeathering);
+        gl.uniform1f(this.#uniforms.sharpening, parameters.sharpening);
+        gl.uniform1f(this.#uniforms.despill, parameters.despill);
+        gl.uniform1f(this.#uniforms.despillLuminanceAdd, parameters.despillLuminanceAdd);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    dispose() {
+        this.#canvas.removeEventListener('webglcontextlost', this.#handleContextLost);
+        this.#canvas.removeEventListener('webglcontextrestored', this.#handleContextRestored);
+        const gl = this.#gl;
+        gl.deleteBuffer(this.#quadBuffer);
+        gl.deleteTexture(this.#texture);
+        gl.deleteTexture(this.#maskTexture);
+        gl.deleteProgram(this.#program);
+        gl.getExtension('WEBGL_lose_context')?.loseContext();
+    }
 }
-var ChromaKeyGl = class ChromaKeyGl {
-	#gl;
-	#canvas;
-	#program;
-	#quadBuffer;
-	#texture;
-	#uniforms;
-	#maskTexture;
-	/** Last mask image, kept so the texture can be re-uploaded after a context restore. */
-	#maskImage = null;
-	/** True between webglcontextlost and webglcontextrestored — draw no-ops meanwhile. */
-	#contextLost = false;
-	/** Returns null when WebGL2 is unavailable or the shader fails to compile. */
-	static create(canvas) {
-		const gl = canvas.getContext("webgl2", {
-			premultipliedAlpha: true,
-			alpha: true,
-			depth: false,
-			stencil: false,
-			antialias: false
-		});
-		if (!gl) return null;
-		try {
-			return new ChromaKeyGl(gl, canvas);
-		} catch {
-			return null;
-		}
-	}
-	constructor(gl, canvas) {
-		this.#gl = gl;
-		this.#canvas = canvas;
-		canvas.addEventListener("webglcontextlost", this.#handleContextLost);
-		canvas.addEventListener("webglcontextrestored", this.#handleContextRestored);
-		this.#initResources();
-	}
-	#handleContextLost = (event) => {
-		event.preventDefault();
-		this.#contextLost = true;
-	};
-	#handleContextRestored = () => {
-		try {
-			this.#initResources();
-			this.#contextLost = false;
-		} catch {
-			this.#contextLost = true;
-		}
-	};
-	/** (Re)create all GL resources on the current context — at construction and after restore. */
-	#initResources() {
-		const gl = this.#gl;
-		this.#program = compileProgram(gl);
-		gl.useProgram(this.#program);
-		const location = (name) => gl.getUniformLocation(this.#program, name);
-		this.#uniforms = {
-			texelSize: location("u_texelSize"),
-			keyColor: location("u_keyColor"),
-			tintColor: location("u_tintColor"),
-			colorCutoff: location("u_colorCutoff"),
-			colorFeathering: location("u_colorFeathering"),
-			maskFeathering: location("u_maskFeathering"),
-			sharpening: location("u_sharpening"),
-			despill: location("u_despill"),
-			despillLuminanceAdd: location("u_despillLuminanceAdd")
-		};
-		gl.uniform1i(gl.getUniformLocation(this.#program, "u_texture"), 0);
-		gl.uniform1i(gl.getUniformLocation(this.#program, "u_mask"), 1);
-		gl.uniform4f(this.#uniforms.tintColor, 1, 1, 1, 1);
-		this.#quadBuffer = gl.createBuffer();
-		gl.bindBuffer(gl.ARRAY_BUFFER, this.#quadBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-			-1,
-			-1,
-			1,
-			-1,
-			-1,
-			1,
-			1,
-			1
-		]), gl.STATIC_DRAW);
-		const positionLocation = gl.getAttribLocation(this.#program, "a_pos");
-		gl.enableVertexAttribArray(positionLocation);
-		gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
-		this.#texture = gl.createTexture();
-		gl.bindTexture(gl.TEXTURE_2D, this.#texture);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-		this.#maskTexture = gl.createTexture();
-		gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-		this.#uploadMask();
-		gl.disable(gl.DEPTH_TEST);
-		gl.disable(gl.BLEND);
-		gl.clearColor(0, 0, 0, 0);
-	}
-	/**
-	* Set (or clear) the grayscale shape mask multiplied onto the output alpha. The
-	* mask is stretched over the full video frame, so author it at the video's aspect
-	* ratio. Pass null to remove the mask.
-	*/
-	setMask(image) {
-		this.#maskImage = image;
-		if (!this.#contextLost) this.#uploadMask();
-	}
-	#uploadMask() {
-		const gl = this.#gl;
-		gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
-		if (this.#maskImage) gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.#maskImage);
-		else gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
-			255,
-			255,
-			255,
-			255
-		]));
-	}
-	/**
-	* Upload the video's current frame and render it keyed. Sizes the drawing buffer to
-	* the video's intrinsic size on first draw (and after a size change).
-	*/
-	draw(video, parameters) {
-		if (this.#contextLost || video.videoWidth === 0) return;
-		const gl = this.#gl;
-		if (this.#canvas.width !== video.videoWidth || this.#canvas.height !== video.videoHeight) {
-			this.#canvas.width = video.videoWidth;
-			this.#canvas.height = video.videoHeight;
-			gl.viewport(0, 0, video.videoWidth, video.videoHeight);
-		}
-		gl.activeTexture(gl.TEXTURE1);
-		gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
-		gl.activeTexture(gl.TEXTURE0);
-		gl.bindTexture(gl.TEXTURE_2D, this.#texture);
-		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
-		gl.useProgram(this.#program);
-		gl.uniform2f(this.#uniforms.texelSize, 1 / video.videoWidth, 1 / video.videoHeight);
-		gl.uniform3fv(this.#uniforms.keyColor, parameters.keyColor);
-		gl.uniform1f(this.#uniforms.colorCutoff, parameters.colorCutoff);
-		gl.uniform1f(this.#uniforms.colorFeathering, parameters.colorFeathering);
-		gl.uniform1f(this.#uniforms.maskFeathering, parameters.maskFeathering);
-		gl.uniform1f(this.#uniforms.sharpening, parameters.sharpening);
-		gl.uniform1f(this.#uniforms.despill, parameters.despill);
-		gl.uniform1f(this.#uniforms.despillLuminanceAdd, parameters.despillLuminanceAdd);
-		gl.clear(gl.COLOR_BUFFER_BIT);
-		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-	}
-	dispose() {
-		this.#canvas.removeEventListener("webglcontextlost", this.#handleContextLost);
-		this.#canvas.removeEventListener("webglcontextrestored", this.#handleContextRestored);
-		const gl = this.#gl;
-		gl.deleteBuffer(this.#quadBuffer);
-		gl.deleteTexture(this.#texture);
-		gl.deleteTexture(this.#maskTexture);
-		gl.deleteProgram(this.#program);
-		gl.getExtension("WEBGL_lose_context")?.loseContext();
-	}
-};
-//#endregion
-export { ChromaKeyGl };

package/dist/runtime/components/ChromaKeyVideo.svelte

@@ -4,9 +4,9 @@
 -->
 <script lang="ts">
 	import { onMount, type Snippet } from 'svelte';
-	import type { ChromaKeyVideoManifestEntry } from '#fundus/core';
-	import { ChromaKeyGl } from '../chroma-key-gl';
-	import { resolveRetainedSource } from '../preload-registry';
+	import type { ChromaKeyVideoManifestEntry } from '../../core/index.js';
+	import { ChromaKeyGl } from '../chroma-key-gl.js';
+	import { resolveRetainedSource } from '../preload-registry.js';
 
 	interface Props {
 		src: ChromaKeyVideoManifestEntry;

package/dist/runtime/components/ChromaKeyVideo.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import type { ChromaKeyVideoManifestEntry } from '../../core/index.js';
+interface Props {
+    src: ChromaKeyVideoManifestEntry;
+    /** Loop playback (default true for keyed clips). */
+    loop?: boolean;
+    /**
+     * Playback on/off (default true) — false pauses the video AND the render loop,
+     * so an off-screen instance costs nothing. The canvas keeps showing the last
+     * keyed frame; a keying-parameter change repaints that still frame in place.
+     */
+    playing?: boolean;
+    /** Rendered instead of the canvas when WebGL2 is unavailable; overrides the entry's fallback image. */
+    fallback?: Snippet;
+    /** Bindable handle on the (hidden) source element, so a host can drive playback itself. */
+    videoElement?: HTMLVideoElement;
+    class?: string;
+}
+declare const ChromaKeyVideo: import("svelte").Component<Props, {}, "videoElement">;
+type ChromaKeyVideo = ReturnType<typeof ChromaKeyVideo>;
+export default ChromaKeyVideo;

package/dist/runtime/components/Image.svelte

@@ -4,7 +4,7 @@
 	file loads.
 -->
 <script lang="ts">
-	import type { ImageManifestEntry } from '#fundus/core';
+	import type { ImageManifestEntry } from '../../core/index.js';
 
 	interface Props {
 		src: ImageManifestEntry;

package/dist/runtime/components/Image.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ImageManifestEntry } from '../../core/index.js';
+interface Props {
+    src: ImageManifestEntry;
+    alt?: string;
+    class?: string;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/runtime/components/Slice.svelte

@@ -5,7 +5,7 @@
 	(`computeRenderCells`) and therefore render the same cells.
 -->
 <script lang="ts">
-	import type { SliceManifestEntry } from '#fundus/core';
+	import type { SliceManifestEntry } from '../../core/index.js';
 	import SliceDom from './SliceDom.svelte';
 	import SliceCanvas from './SliceCanvas.svelte';
 

package/dist/runtime/components/Slice.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SliceManifestEntry } from '../../core/index.js';
+interface Props {
+    src: SliceManifestEntry;
+    /**
+     * Rendering backend. `dom` (default) paints one absolutely-positioned
+     * `<img>` window per cell; `canvas` draws every cell into a single
+     * `<canvas>`. Both produce the same cells — but the DOM backend can
+     * flicker in some situations (cells are separate elements the browser
+     * composites independently, so a resize mid-animation can tear), so
+     * hosts pick `canvas` where that hurts.
+     */
+    backend?: 'dom' | 'canvas';
+    /** Accessible label for the rendered graphic. */
+    alt?: string;
+    class?: string;
+}
+declare const Slice: import("svelte").Component<Props, {}, "">;
+type Slice = ReturnType<typeof Slice>;
+export default Slice;

package/dist/runtime/components/SliceCanvas.svelte

@@ -16,9 +16,9 @@
 	size — exactly where the DOM backend positions its overdraw cells.
 -->
 <script lang="ts">
-	import type { SliceManifestEntry } from '#fundus/core';
-	import { computeCanvasPaintLayout, computeRenderCells } from '../geometry';
-	import { observeBorderBoxSize } from '../observe-border-box-size';
+	import type { SliceManifestEntry } from '../../core/index.js';
+	import { computeCanvasPaintLayout, computeRenderCells } from '../geometry.js';
+	import { observeBorderBoxSize } from '../observe-border-box-size.js';
 
 	interface Props {
 		src: SliceManifestEntry;