@techzyapp/ui-library 1.0.43 → 1.0.45

package/dist/components/ImageEditor/core/geometry.d.ts

@@ -0,0 +1,112 @@
+import type { ImageRect, ImageState } from './types';
+export interface Size {
+    width: number;
+    height: number;
+}
+export type Vec = [number, number];
+/** Rotate a vector by θ (positive = clockwise on a y-down screen). */
+export declare const rotate: ([x, y]: Vec, theta: number) => Vec;
+/** Half the size of a w×h box's bounding box once it's turned by θ. */
+export declare function halfExtents(w: number, h: number, theta: number): Vec;
+/** The crop's center. */
+export declare const cropCenter: (crop: ImageRect) => Vec;
+/**
+ * The minimum `scale` at which an image of `size` covers a w×h crop turned by θ **when centered on the
+ * image** — the "cover" scale every zoom is measured from (zoom = scale / coverScale).
+ */
+export declare function coverScale(w: number, h: number, theta: number, size: Size): number;
+/** The image point (image-centered, unrotated, unscaled) under the crop's center. */
+export declare function cropAnchor(state: ImageState, size: Size): Vec;
+/** Clamp the crop anchor so a w×h crop (turned by θ, image scaled by s) stays inside the image. */
+export declare function clampAnchor([ux, uy]: Vec, w: number, h: number, theta: number, s: number, size: Size): Vec;
+/** Place a w×h crop so its center sits over image point `u` (inverse of `cropAnchor`). */
+export declare function cropAt(u: Vec, w: number, h: number, theta: number, s: number, size: Size): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Whether the image fully covers `crop` (with a small tolerance). */
+export declare function coversCrop(crop: ImageRect, theta: number, s: number, size: Size): boolean;
+/**
+ * Re-fit a state so the image covers the crop: the scale is raised to at least the cover scale, then the
+ * anchor (the image point under the crop's center) is clamped. The crop's size never changes here.
+ */
+export declare function fitState(state: ImageState, size: Size): ImageState;
+/** The output size in pixels — the crop at full source resolution. */
+export declare function outputSize(state: ImageState): Size;
+/** The size `process()` renders — the Resize tool's pick, else the crop at full resolution. */
+export declare function finalSize(state: ImageState): Size;
+/**
+ * The part of the crop the output shows — the crop itself, or for a Resize pick of another aspect its
+ * largest centered sub-rect of that aspect (`object-fit: cover`: the image is cut, never squashed).
+ */
+export declare function resizedCrop(state: ImageState): ImageRect;
+/**
+ * Apply a Resize pick to `base` (the state the pick is made from). A size of the crop's own aspect just
+ * scales the output; another aspect first cuts the crop to it — its largest centered part of that aspect
+ * (`object-fit: cover`) — so the Crop tool shows exactly what's kept. `null` (or the crop's full size)
+ * clears it. The size never goes above what `base`'s crop holds.
+ */
+export declare function applyResize(base: ImageState, pick: Size | null): ImageState;
+/**
+ * Keep a Resize pick in step when the crop changes under it: it keeps its share of the crop (a 25% pick
+ * stays 25% of the new crop), so the result size follows the crop. Unchanged when no resize is set or the
+ * crop's output size didn't move.
+ */
+export declare function syncResize(prev: ImageState, next: ImageState): ImageState['resize'];
+/** The largest crop of the given ratio that fits the (unrotated) image, centered. */
+export declare function initialCrop(size: Size, aspectRatio?: number | null): ImageRect;
+/** The untouched state for an image of `size`. */
+export declare function defaultState(size: Size, aspectRatio?: number | null): ImageState;
+/** Split a rotation into its quarter turns (multiple of π/2, normalized to [0, 2π)) + the fine part. */
+export declare function splitRotation(theta: number, quarterHint?: number): {
+    quarter: number;
+    fine: number;
+};
+/** Normalize an angle into [0, 2π). */
+export declare const normalizeAngle: (a: number) => number;
+/**
+ * Set the rotation to `theta`, keeping the same image point under the crop's center: the image scales up
+ * to cover the crop when needed (never below `base.scale`) and the anchor is clamped. `base` is the state
+ * at the start of the interaction, so turning back restores the original zoom.
+ */
+export declare function rotateTo(base: ImageState, theta: number, size: Size): ImageState;
+/** Rotate the whole image −90° (counter-clockwise): the crop turns with it (its width/height swap, and so
+ * does a picked crop shape — 16:9 becomes 9:16). */
+export declare function rotateLeft(state: ImageState, size: Size): ImageState;
+/** Mirror the result horizontally (the image flips inside the crop; the crop mirrors about the center). */
+export declare function flipHorizontal(state: ImageState, size: Size): ImageState;
+/** The current zoom relative to the cover scale (1 = the image just covers the crop). */
+export declare function zoomOf(state: ImageState, size: Size): number;
+/** The largest zoom inside the crop (relative to the cover scale) — 500%. */
+export declare const MAX_CROP_ZOOM = 5;
+/**
+ * Set the zoom (1…`MAX_CROP_ZOOM`, relative to the cover scale), keeping the image point under the
+ * crop's center.
+ */
+export declare function zoomTo(state: ImageState, zoom: number, size: Size): ImageState;
+/** Move the crop across the image by (dx, dy) plane units (the image moves the other way on screen). */
+export declare function panBy(state: ImageState, dx: number, dy: number, size: Size): ImageState;
+/**
+ * Pick a crop shape: `ratio` (width / height) reshapes the crop into the largest rect of that ratio the
+ * image covers at the current rotation + zoom, kept over the same image point (moved only as far as it
+ * must to stay on the image); `null` frees it (the crop itself is left as is).
+ */
+export declare function setCropRatio(state: ImageState, ratio: number | null, size: Size): ImageState;
+export type CropHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+export interface ResizeOptions {
+    /** Lock the crop to this width/height ratio. */
+    aspectRatio?: number | null;
+    /** The smallest crop side, in plane units. */
+    minSize: number;
+}
+/**
+ * Resize the crop by dragging `handle` by (dx, dy) plane units from the interaction's `start` state. A
+ * corner moves against its opposite corner, an edge moves one side (with a locked ratio the other side
+ * follows, centered). The result never leaves the image: an out-of-bounds request is pulled back along
+ * the way from `start` to it (so it stops at the image's edge instead of jumping).
+ */
+export declare function resizeCrop(start: ImageState, handle: CropHandle, dx: number, dy: number, size: Size, { aspectRatio, minSize }: ResizeOptions): ImageState;
+/** Clamp a state's crop + scale into a valid configuration (used on `setState` / `initialState`). */
+export declare function normalizeState(state: ImageState, size: Size): ImageState;

package/dist/components/ImageEditor/core/load.d.cts

@@ -0,0 +1,26 @@
+export type ImageSource = ImageBitmap | HTMLImageElement | HTMLCanvasElement;
+export interface LoadedImage {
+    /** The full-resolution, EXIF-oriented image. */
+    image: ImageSource;
+    width: number;
+    height: number;
+    /** The input's MIME type ('' when unknown). */
+    type: string;
+}
+/** The clarity blur radius, as a fraction of the image's long side. */
+export declare const CLARITY_RADIUS = 0.012;
+/** Load a File / Blob / URL / data URL into a decoded, EXIF-oriented image. */
+export declare function loadImage(src: File | Blob | string): Promise<LoadedImage>;
+/** A copy of `source` no larger than `maxSide` on its long side (the source itself when it already fits). */
+export declare function downscale(source: CanvasImageSource, width: number, height: number, maxSide: number): {
+    canvas: CanvasImageSource;
+    width: number;
+    height: number;
+};
+/**
+ * A small, blurred copy of `source` (≤ `maxSide`) for the clarity (local-contrast) pass. `radius` is the
+ * blur radius in `source` pixels — it's scaled down with the copy, so the effect matches at any size.
+ */
+export declare function blurredCopy(source: CanvasImageSource, width: number, height: number, radius: number, maxSide?: number): HTMLCanvasElement;
+/** The output MIME type: the requested one, else the input's (when it's a type canvases encode), else PNG. */
+export declare function resolveOutputType(requested: string | undefined, input: string): string;

package/dist/components/ImageEditor/core/load.d.ts

@@ -0,0 +1,26 @@
+export type ImageSource = ImageBitmap | HTMLImageElement | HTMLCanvasElement;
+export interface LoadedImage {
+    /** The full-resolution, EXIF-oriented image. */
+    image: ImageSource;
+    width: number;
+    height: number;
+    /** The input's MIME type ('' when unknown). */
+    type: string;
+}
+/** The clarity blur radius, as a fraction of the image's long side. */
+export declare const CLARITY_RADIUS = 0.012;
+/** Load a File / Blob / URL / data URL into a decoded, EXIF-oriented image. */
+export declare function loadImage(src: File | Blob | string): Promise<LoadedImage>;
+/** A copy of `source` no larger than `maxSide` on its long side (the source itself when it already fits). */
+export declare function downscale(source: CanvasImageSource, width: number, height: number, maxSide: number): {
+    canvas: CanvasImageSource;
+    width: number;
+    height: number;
+};
+/**
+ * A small, blurred copy of `source` (≤ `maxSide`) for the clarity (local-contrast) pass. `radius` is the
+ * blur radius in `source` pixels — it's scaled down with the copy, so the effect matches at any size.
+ */
+export declare function blurredCopy(source: CanvasImageSource, width: number, height: number, radius: number, maxSide?: number): HTMLCanvasElement;
+/** The output MIME type: the requested one, else the input's (when it's a type canvases encode), else PNG. */
+export declare function resolveOutputType(requested: string | undefined, input: string): string;

package/dist/components/ImageEditor/core/matrix.d.cts

@@ -0,0 +1,55 @@
+import type { ImageFilterId, ImageFinetuneId } from './types';
+export type ColorMatrix = number[];
+/** The identity matrix (no change). */
+export declare const IDENTITY_MATRIX: ColorMatrix;
+/** `a ∘ b` — the matrix that applies `b` first, then `a`. */
+export declare function multiplyMatrix(a: ColorMatrix, b: ColorMatrix): ColorMatrix;
+/** Compose matrices in application order: `composeMatrices(m1, m2, m3)` applies m1, then m2, then m3. */
+export declare function composeMatrices(...matrices: ColorMatrix[]): ColorMatrix;
+/** Whether a matrix is (numerically) the identity. */
+export declare function isIdentityMatrix(m: ColorMatrix | null | undefined): boolean;
+/** Apply a matrix to one straight-alpha RGBA color (each 0…1). */
+export declare function applyMatrix(m: ColorMatrix, r: number, g: number, b: number, a?: number): [number, number, number, number];
+/** Add `v` to r, g and b. */
+export declare const brightnessMatrix: (v: number) => ColorMatrix;
+/** Scale r, g, b around the 0.5 midpoint by `c`. */
+export declare const contrastMatrix: (c: number) => ColorMatrix;
+/** Saturation `s` (0 = grayscale, 1 = unchanged, 2 = doubled), on Rec. 709 luma. */
+export declare const saturationMatrix: (s: number) => ColorMatrix;
+/** Multiply each channel (and optionally add a per-channel offset). */
+export declare const channelMatrix: (r: number, g: number, b: number, or?: number, og?: number, ob?: number) => number[];
+/** Remap 0…1 to `low`…`high` (lifts blacks / dims whites). */
+export declare const levelsMatrix: (low: number, high: number) => ColorMatrix;
+/** The classic sepia matrix. */
+export declare const SEPIA_MATRIX: ColorMatrix;
+/** The filter presets in display order, grouped (a gap between groups). */
+export declare const FILTER_GROUPS: ImageFilterId[][];
+/** Each filter's 4×5 matrix (`default` → `null`, no filter). */
+export declare const FILTER_MATRICES: Record<ImageFilterId, ColorMatrix | null>;
+/** The finetune adjustments in display order. */
+export declare const FINETUNE_IDS: ImageFinetuneId[];
+/** All adjustments at 0. */
+export declare const ZERO_FINETUNE: Record<ImageFinetuneId, number>;
+/** The UI value (−100…100) → the shader parameter for each adjustment. */
+export declare const finetuneParam: {
+    /** additive: −0.25…+0.25 */
+    brightness: (v: number) => number;
+    /** multiply around the midpoint: 0.5…1.5 */
+    contrast: (v: number) => number;
+    /** 0 (grayscale)…2 */
+    saturation: (v: number) => number;
+    /** multiply: 0.5…1.5 */
+    exposure: (v: number) => number;
+    /** −1…1, shifts R and B in opposite directions */
+    temperature: (v: number) => number;
+    /** exponent 0.5…1.5 (applied as x^(1/γ), so positive brightens the midtones) */
+    gamma: (v: number) => number;
+    /** −1…1 local-contrast amount (negative softens) */
+    clarity: (v: number) => number;
+    /** −1…1 (positive darkens the edges, negative lightens them) */
+    vignette: (v: number) => number;
+};
+/** The matrix-based finetune adjustments (exposure → brightness → contrast → saturation → temperature). */
+export declare function finetuneMatrix(f: Record<ImageFinetuneId, number>): ColorMatrix;
+/** The whole color pipeline as one matrix: the filter, then the matrix-based finetune adjustments. */
+export declare function combinedMatrix(colorMatrix: ColorMatrix | null, finetune: Record<ImageFinetuneId, number>): ColorMatrix;

package/dist/components/ImageEditor/core/matrix.d.ts

@@ -0,0 +1,55 @@
+import type { ImageFilterId, ImageFinetuneId } from './types';
+export type ColorMatrix = number[];
+/** The identity matrix (no change). */
+export declare const IDENTITY_MATRIX: ColorMatrix;
+/** `a ∘ b` — the matrix that applies `b` first, then `a`. */
+export declare function multiplyMatrix(a: ColorMatrix, b: ColorMatrix): ColorMatrix;
+/** Compose matrices in application order: `composeMatrices(m1, m2, m3)` applies m1, then m2, then m3. */
+export declare function composeMatrices(...matrices: ColorMatrix[]): ColorMatrix;
+/** Whether a matrix is (numerically) the identity. */
+export declare function isIdentityMatrix(m: ColorMatrix | null | undefined): boolean;
+/** Apply a matrix to one straight-alpha RGBA color (each 0…1). */
+export declare function applyMatrix(m: ColorMatrix, r: number, g: number, b: number, a?: number): [number, number, number, number];
+/** Add `v` to r, g and b. */
+export declare const brightnessMatrix: (v: number) => ColorMatrix;
+/** Scale r, g, b around the 0.5 midpoint by `c`. */
+export declare const contrastMatrix: (c: number) => ColorMatrix;
+/** Saturation `s` (0 = grayscale, 1 = unchanged, 2 = doubled), on Rec. 709 luma. */
+export declare const saturationMatrix: (s: number) => ColorMatrix;
+/** Multiply each channel (and optionally add a per-channel offset). */
+export declare const channelMatrix: (r: number, g: number, b: number, or?: number, og?: number, ob?: number) => number[];
+/** Remap 0…1 to `low`…`high` (lifts blacks / dims whites). */
+export declare const levelsMatrix: (low: number, high: number) => ColorMatrix;
+/** The classic sepia matrix. */
+export declare const SEPIA_MATRIX: ColorMatrix;
+/** The filter presets in display order, grouped (a gap between groups). */
+export declare const FILTER_GROUPS: ImageFilterId[][];
+/** Each filter's 4×5 matrix (`default` → `null`, no filter). */
+export declare const FILTER_MATRICES: Record<ImageFilterId, ColorMatrix | null>;
+/** The finetune adjustments in display order. */
+export declare const FINETUNE_IDS: ImageFinetuneId[];
+/** All adjustments at 0. */
+export declare const ZERO_FINETUNE: Record<ImageFinetuneId, number>;
+/** The UI value (−100…100) → the shader parameter for each adjustment. */
+export declare const finetuneParam: {
+    /** additive: −0.25…+0.25 */
+    brightness: (v: number) => number;
+    /** multiply around the midpoint: 0.5…1.5 */
+    contrast: (v: number) => number;
+    /** 0 (grayscale)…2 */
+    saturation: (v: number) => number;
+    /** multiply: 0.5…1.5 */
+    exposure: (v: number) => number;
+    /** −1…1, shifts R and B in opposite directions */
+    temperature: (v: number) => number;
+    /** exponent 0.5…1.5 (applied as x^(1/γ), so positive brightens the midtones) */
+    gamma: (v: number) => number;
+    /** −1…1 local-contrast amount (negative softens) */
+    clarity: (v: number) => number;
+    /** −1…1 (positive darkens the edges, negative lightens them) */
+    vignette: (v: number) => number;
+};
+/** The matrix-based finetune adjustments (exposure → brightness → contrast → saturation → temperature). */
+export declare function finetuneMatrix(f: Record<ImageFinetuneId, number>): ColorMatrix;
+/** The whole color pipeline as one matrix: the filter, then the matrix-based finetune adjustments. */
+export declare function combinedMatrix(colorMatrix: ColorMatrix | null, finetune: Record<ImageFinetuneId, number>): ColorMatrix;

package/dist/components/ImageEditor/core/pixels.d.cts

@@ -0,0 +1,24 @@
+import type { Affine } from './affine';
+import { type ColorMatrix } from './matrix';
+/** Every non-geometry parameter of one render. */
+export interface ColorParams {
+    /** The combined filter + matrix-finetune matrix. */
+    matrix: ColorMatrix;
+    /** Gamma exponent (1 = none), applied as x^(1/γ). */
+    gamma: number;
+    /** Local-contrast amount −1…1 (0 = none). */
+    clarity: number;
+    /** Vignette amount −1…1 (0 = none). */
+    vignette: number;
+}
+/** How strongly a full vignette darkens / lightens the corners. */
+export declare const VIGNETTE_STRENGTH = 0.85;
+/** The vignette falloff at crop-normalized (−1…1) coords: 0 in the middle, 1 in the corners. */
+export declare const vignetteFalloff: (nx: number, ny: number) => number;
+/**
+ * Apply the color pipeline in place: matrix → clarity (against `blur`, the same pixels blurred) → gamma
+ * → vignette (positioned by `toCrop`, pixel → crop-normalized coords). Alpha is straight (non-premultiplied).
+ */
+export declare function applyColorOps(data: Uint8ClampedArray, width: number, height: number, p: ColorParams, blur?: Uint8ClampedArray | null, toCrop?: Affine | null): void;
+/** A fast approximate Gaussian blur (three box passes, horizontal + vertical) over RGBA bytes. */
+export declare function boxBlur(src: Uint8ClampedArray, width: number, height: number, radius: number): Uint8ClampedArray;

package/dist/components/ImageEditor/core/pixels.d.ts

@@ -0,0 +1,24 @@
+import type { Affine } from './affine';
+import { type ColorMatrix } from './matrix';
+/** Every non-geometry parameter of one render. */
+export interface ColorParams {
+    /** The combined filter + matrix-finetune matrix. */
+    matrix: ColorMatrix;
+    /** Gamma exponent (1 = none), applied as x^(1/γ). */
+    gamma: number;
+    /** Local-contrast amount −1…1 (0 = none). */
+    clarity: number;
+    /** Vignette amount −1…1 (0 = none). */
+    vignette: number;
+}
+/** How strongly a full vignette darkens / lightens the corners. */
+export declare const VIGNETTE_STRENGTH = 0.85;
+/** The vignette falloff at crop-normalized (−1…1) coords: 0 in the middle, 1 in the corners. */
+export declare const vignetteFalloff: (nx: number, ny: number) => number;
+/**
+ * Apply the color pipeline in place: matrix → clarity (against `blur`, the same pixels blurred) → gamma
+ * → vignette (positioned by `toCrop`, pixel → crop-normalized coords). Alpha is straight (non-premultiplied).
+ */
+export declare function applyColorOps(data: Uint8ClampedArray, width: number, height: number, p: ColorParams, blur?: Uint8ClampedArray | null, toCrop?: Affine | null): void;
+/** A fast approximate Gaussian blur (three box passes, horizontal + vertical) over RGBA bytes. */
+export declare function boxBlur(src: Uint8ClampedArray, width: number, height: number, radius: number): Uint8ClampedArray;

package/dist/components/ImageEditor/core/redact.d.cts

@@ -0,0 +1,37 @@
+import type { ImageRedactEffect, ImageState } from './types';
+/**
+ * Each effect's size at `amount` 100, as a share of the image's long side: the blur radius (1.5% — past
+ * that the image is just a wash) and the pixel block (5%).
+ */
+export declare const REDACT_MAX: Record<ImageRedactEffect, number>;
+/** The blur radius / pixel block side (source px) for a state — 0 when there's no effect. */
+export declare function redactRadius(state: Pick<ImageState, 'redact'>, size: {
+    width: number;
+    height: number;
+}): number;
+/**
+ * The pixelation grid over a crop: whole blocks across and down (the block stretched a hair so they fit
+ * exactly — no partial block at an edge). `block` is in the crop's own (plane) units.
+ */
+export declare function pixelGrid(crop: {
+    width: number;
+    height: number;
+}, block: number): {
+    cols: number;
+    rows: number;
+};
+/**
+ * A small blurred copy of `source` (`width` × `height`, `radius` in its pixels): it's sized so the radius
+ * is a few pixels there, at most `maxSide` long — a blur has no fine detail, so scaling it back up
+ * (on the GPU, or a canvas draw) loses nothing, and the small copy is quick to make while a ruler moves.
+ */
+export declare function blurredSmall(source: CanvasImageSource, width: number, height: number, radius: number, maxSide: number): HTMLCanvasElement;
+/** A `width` × `height` blurred copy of `source` (`radius` in its pixels) — the export's blur. */
+export declare function blurredFull(source: CanvasImageSource, width: number, height: number, radius: number): HTMLCanvasElement;
+/** Pixelate a canvas in place into `cols` × `rows` blocks (each the average of what it covers). */
+export declare function pixelateCanvas(canvas: HTMLCanvasElement, cols: number, rows: number): void;
+/**
+ * A `width` × `height` copy of `source` pixelated in its own pixel grid (`block` px) — only for the
+ * Canvas2D preview fallback, which can't lay the output grid over a rotated image.
+ */
+export declare function pixelatedCopy(source: CanvasImageSource, width: number, height: number, block: number): HTMLCanvasElement;

package/dist/components/ImageEditor/core/redact.d.ts

@@ -0,0 +1,37 @@
+import type { ImageRedactEffect, ImageState } from './types';
+/**
+ * Each effect's size at `amount` 100, as a share of the image's long side: the blur radius (1.5% — past
+ * that the image is just a wash) and the pixel block (5%).
+ */
+export declare const REDACT_MAX: Record<ImageRedactEffect, number>;
+/** The blur radius / pixel block side (source px) for a state — 0 when there's no effect. */
+export declare function redactRadius(state: Pick<ImageState, 'redact'>, size: {
+    width: number;
+    height: number;
+}): number;
+/**
+ * The pixelation grid over a crop: whole blocks across and down (the block stretched a hair so they fit
+ * exactly — no partial block at an edge). `block` is in the crop's own (plane) units.
+ */
+export declare function pixelGrid(crop: {
+    width: number;
+    height: number;
+}, block: number): {
+    cols: number;
+    rows: number;
+};
+/**
+ * A small blurred copy of `source` (`width` × `height`, `radius` in its pixels): it's sized so the radius
+ * is a few pixels there, at most `maxSide` long — a blur has no fine detail, so scaling it back up
+ * (on the GPU, or a canvas draw) loses nothing, and the small copy is quick to make while a ruler moves.
+ */
+export declare function blurredSmall(source: CanvasImageSource, width: number, height: number, radius: number, maxSide: number): HTMLCanvasElement;
+/** A `width` × `height` blurred copy of `source` (`radius` in its pixels) — the export's blur. */
+export declare function blurredFull(source: CanvasImageSource, width: number, height: number, radius: number): HTMLCanvasElement;
+/** Pixelate a canvas in place into `cols` × `rows` blocks (each the average of what it covers). */
+export declare function pixelateCanvas(canvas: HTMLCanvasElement, cols: number, rows: number): void;
+/**
+ * A `width` × `height` copy of `source` pixelated in its own pixel grid (`block` px) — only for the
+ * Canvas2D preview fallback, which can't lay the output grid over a rotated image.
+ */
+export declare function pixelatedCopy(source: CanvasImageSource, width: number, height: number, block: number): HTMLCanvasElement;

package/dist/components/ImageEditor/core/render.d.cts

@@ -0,0 +1,19 @@
+import { type Size } from './geometry';
+import { type ColorParams } from './pixels';
+import type { ImageState } from './types';
+import { type RenderParams } from './webgl';
+/** The color parameters for a state (optionally with another filter matrix — the filter thumbnails). */
+export declare function colorParams(state: ImageState, colorMatrix?: number[] | null): ColorParams;
+/** Whether a render needs the color pass at all. */
+export declare const hasColorOps: (p: ColorParams) => boolean;
+/**
+ * The Canvas2D renderer (no WebGL): draws the texture through the inverse of `toUV`, clips to the crop,
+ * then runs the color pipeline on the pixels (with the blur copy drawn through `toBlurUV`).
+ */
+export declare function render2D(canvas: HTMLCanvasElement, texture: CanvasImageSource, textureSize: Size, blur: CanvasImageSource, blurSize: Size, p: RenderParams): void;
+/**
+ * Render `state` at full source resolution and encode it. Geometry goes through Canvas2D (it handles any
+ * image size natively); the color pass runs on WebGL in tiles no larger than `MAX_TEXTURE_SIZE` (or on the
+ * CPU without WebGL).
+ */
+export declare function renderOutput(image: CanvasImageSource, size: Size, state: ImageState, type: string, quality: number): Promise<Blob>;

package/dist/components/ImageEditor/core/render.d.ts

@@ -0,0 +1,19 @@
+import { type Size } from './geometry';
+import { type ColorParams } from './pixels';
+import type { ImageState } from './types';
+import { type RenderParams } from './webgl';
+/** The color parameters for a state (optionally with another filter matrix — the filter thumbnails). */
+export declare function colorParams(state: ImageState, colorMatrix?: number[] | null): ColorParams;
+/** Whether a render needs the color pass at all. */
+export declare const hasColorOps: (p: ColorParams) => boolean;
+/**
+ * The Canvas2D renderer (no WebGL): draws the texture through the inverse of `toUV`, clips to the crop,
+ * then runs the color pipeline on the pixels (with the blur copy drawn through `toBlurUV`).
+ */
+export declare function render2D(canvas: HTMLCanvasElement, texture: CanvasImageSource, textureSize: Size, blur: CanvasImageSource, blurSize: Size, p: RenderParams): void;
+/**
+ * Render `state` at full source resolution and encode it. Geometry goes through Canvas2D (it handles any
+ * image size natively); the color pass runs on WebGL in tiles no larger than `MAX_TEXTURE_SIZE` (or on the
+ * CPU without WebGL).
+ */
+export declare function renderOutput(image: CanvasImageSource, size: Size, state: ImageState, type: string, quality: number): Promise<Blob>;

package/dist/components/ImageEditor/core/scene.d.cts

@@ -0,0 +1,47 @@
+import { type Affine } from './affine';
+import { type Size, type Vec } from './geometry';
+import type { ImageRect, ImageState } from './types';
+/** How the plane sits on screen. View-only — never part of `ImageState`. */
+export interface View {
+    /** The plane point shown at the stage's center. */
+    center: Vec;
+    /** CSS pixels per plane unit. */
+    scale: number;
+    /** Extra rotation (radians) — only non-zero while a rotate-left animates. */
+    rotation: number;
+    /** Horizontal mirror factor (1 = none) — only ≠ 1 while a flip animates (−1 → 1). */
+    flip: number;
+}
+/** The stage the view is drawn in (CSS pixels) + the device pixel ratio. */
+export interface Stage {
+    width: number;
+    height: number;
+    dpr: number;
+    /**
+     * The free area the crop is laid out in (CSS px, relative to the stage) — the canvas spans the whole
+     * editor, behind the toolbars, but the crop fits + centers in the space between them. Defaults to the
+     * whole stage.
+     */
+    area?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/** The point on screen the view's center lands on (the free area's center). */
+export declare const stageOrigin: (stage: Pick<Stage, "width" | "height" | "area">) => [number, number];
+/** source pixel → plane (the image state's flip / rotation / scale about the image center). */
+export declare function sourceToPlane(state: ImageState, size: Size): Affine;
+/** plane → stage CSS pixels. */
+export declare function planeToScreen(view: View, stage: Pick<Stage, 'width' | 'height' | 'area'>): Affine;
+/** plane → crop-normalized coords (−1…1 across the crop). */
+export declare function planeToCrop(crop: ImageRect): Affine;
+/** The affines a renderer needs to draw `state` in `view` on `stage`. */
+export declare function sceneAffines(state: ImageState, size: Size, view: View, stage: Stage): {
+    toUV: Affine;
+    toBlurUV: Affine;
+    toCrop: Affine;
+};
+/** The view that fits the crop in the stage with `padding` CSS px around it. */
+export declare function fitView(crop: ImageRect, stage: Pick<Stage, 'width' | 'height'>, padding: number): View;

package/dist/components/ImageEditor/core/scene.d.ts

@@ -0,0 +1,47 @@
+import { type Affine } from './affine';
+import { type Size, type Vec } from './geometry';
+import type { ImageRect, ImageState } from './types';
+/** How the plane sits on screen. View-only — never part of `ImageState`. */
+export interface View {
+    /** The plane point shown at the stage's center. */
+    center: Vec;
+    /** CSS pixels per plane unit. */
+    scale: number;
+    /** Extra rotation (radians) — only non-zero while a rotate-left animates. */
+    rotation: number;
+    /** Horizontal mirror factor (1 = none) — only ≠ 1 while a flip animates (−1 → 1). */
+    flip: number;
+}
+/** The stage the view is drawn in (CSS pixels) + the device pixel ratio. */
+export interface Stage {
+    width: number;
+    height: number;
+    dpr: number;
+    /**
+     * The free area the crop is laid out in (CSS px, relative to the stage) — the canvas spans the whole
+     * editor, behind the toolbars, but the crop fits + centers in the space between them. Defaults to the
+     * whole stage.
+     */
+    area?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/** The point on screen the view's center lands on (the free area's center). */
+export declare const stageOrigin: (stage: Pick<Stage, "width" | "height" | "area">) => [number, number];
+/** source pixel → plane (the image state's flip / rotation / scale about the image center). */
+export declare function sourceToPlane(state: ImageState, size: Size): Affine;
+/** plane → stage CSS pixels. */
+export declare function planeToScreen(view: View, stage: Pick<Stage, 'width' | 'height' | 'area'>): Affine;
+/** plane → crop-normalized coords (−1…1 across the crop). */
+export declare function planeToCrop(crop: ImageRect): Affine;
+/** The affines a renderer needs to draw `state` in `view` on `stage`. */
+export declare function sceneAffines(state: ImageState, size: Size, view: View, stage: Stage): {
+    toUV: Affine;
+    toBlurUV: Affine;
+    toCrop: Affine;
+};
+/** The view that fits the crop in the stage with `padding` CSS px around it. */
+export declare function fitView(crop: ImageRect, stage: Pick<Stage, 'width' | 'height'>, padding: number): View;

package/dist/components/ImageEditor/core/spring.d.cts

@@ -0,0 +1,17 @@
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+}
+/** Whether the user asked for reduced motion (then every spring jumps straight to its target). */
+export declare const prefersReducedMotion: () => boolean;
+/** A running spring: call it to cancel; `retarget` moves its target without losing the current motion. */
+export interface SpringHandle {
+    (): void;
+    retarget: (to: number[]) => void;
+}
+/**
+ * Spring `from` → `to`, calling `onFrame` with the current values every animation frame (and once with
+ * `to` at the end). Returns a handle: call it to cancel, or `retarget(to)` to aim it elsewhere mid-flight
+ * (position + velocity carry over, so there's no jolt). Jumps straight to `to` under reduced motion.
+ */
+export declare function springTo(from: number[], target: number[], onFrame: (values: number[]) => void, { stiffness, damping }?: SpringOptions, onDone?: () => void): SpringHandle;

package/dist/components/ImageEditor/core/spring.d.ts

@@ -0,0 +1,17 @@
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+}
+/** Whether the user asked for reduced motion (then every spring jumps straight to its target). */
+export declare const prefersReducedMotion: () => boolean;
+/** A running spring: call it to cancel; `retarget` moves its target without losing the current motion. */
+export interface SpringHandle {
+    (): void;
+    retarget: (to: number[]) => void;
+}
+/**
+ * Spring `from` → `to`, calling `onFrame` with the current values every animation frame (and once with
+ * `to` at the end). Returns a handle: call it to cancel, or `retarget(to)` to aim it elsewhere mid-flight
+ * (position + velocity carry over, so there's no jolt). Jumps straight to `to` under reduced motion.
+ */
+export declare function springTo(from: number[], target: number[], onFrame: (values: number[]) => void, { stiffness, damping }?: SpringOptions, onDone?: () => void): SpringHandle;