@wonderyard/tela 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 OrangeNote
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/brush.d.ts

@@ -0,0 +1,21 @@
+import { BrushChange } from './types/image';
+import { Brush, Settings, State } from './types/index';
+import { Mask } from './types/mask';
+export declare function createBrush(store: {
+    getState(): State;
+    setState(patch: Partial<State>): void;
+}, 
+/** The brush size +/- stops at. */
+maxBrushSize: number): {
+    /** A settings patch as it lands: a custom brush is copied, a Foreground change recolors it. */
+    patch(patch: Partial<Settings>): Partial<Settings>;
+    /**
+     * Increment and Decrement Size, within 1 and the maximum, on a circle or square; the turns and
+     * flips on a custom brush. False when nothing changes.
+     */
+    change(change: "increment-size" | "decrement-size" | BrushChange): boolean;
+    /** Edit > New Brush: the selected pixels `data` in the selection's shape, with the last pattern. */
+    fromSelection: (m: Mask, data: Uint8Array) => Brush;
+    /** The custom brush's indices follow `f`, as a remap moves them. */
+    remap(f: (i: number) => number): void;
+};

package/dist/brush.js

@@ -0,0 +1,84 @@
+import { turn as e } from "./image.js";
+import { recolour as t } from "./tools.js";
+// lib/brush.ts
+function n(n, r) {
+	let i = null, a = "origin";
+	return {
+		patch(e) {
+			if (e.brush?.type === "image") {
+				let { image: t, mask: n } = e.brush;
+				return i = t.data.slice(), a = e.brush.pattern ?? "none", {
+					...e,
+					brush: {
+						...e.brush,
+						image: {
+							...t,
+							data: t.data.slice()
+						},
+						mask: n?.slice()
+					}
+				};
+			}
+			if (e.fgColor === void 0) return e;
+			let { brush: r, keepBrushIndices: o } = {
+				...n.getState(),
+				...e
+			};
+			return r.type !== "image" || !i || o ? e : {
+				...e,
+				brush: {
+					...r,
+					image: {
+						...r.image,
+						data: t(i, r.mask, e.fgColor)
+					}
+				}
+			};
+		},
+		change(t) {
+			let { brush: a } = n.getState();
+			if (t !== "increment-size" && t !== "decrement-size") {
+				if (a.type !== "image" || !i) return !1;
+				let { width: r, height: o } = a.image, s = e(a.image.data, r, o, t);
+				i = e(i, r, o, t).data;
+				let c = a.mask && e(a.mask, r, o, t).data;
+				return n.setState({ brush: {
+					...a,
+					image: s,
+					mask: c
+				} }), !0;
+			}
+			if (a.type === "image") return !1;
+			let o = a.size + (t === "increment-size" ? 1 : -1);
+			return o < 1 || o > r ? !1 : (n.setState({ brush: {
+				...a,
+				size: o
+			} }), !0);
+		},
+		fromSelection: (e, t) => ({
+			type: "image",
+			image: {
+				width: e.width,
+				height: e.height,
+				data: t
+			},
+			mask: e.data,
+			pattern: a,
+			patternOrigin: {
+				x: e.x,
+				y: e.y
+			}
+		}),
+		remap(e) {
+			let { brush: t } = n.getState();
+			t.type === "image" && (i &&= i.map(e), n.setState({ brush: {
+				...t,
+				image: {
+					...t.image,
+					data: t.image.data.map(e)
+				}
+			} }));
+		}
+	};
+}
+export { n as createBrush };

package/dist/document.d.ts

@@ -0,0 +1,50 @@
+import { Change } from './types/history';
+import { Color, SpriteChange } from './types/index';
+import { Mask } from './types/mask';
+/**
+ * The document: pixels, size, palette and selection. Its writers are the only code that changes
+ * it and the only code that reports to the host; `show` mirrors it into the editor's state. Its
+ * changes hold their data and call the writers, so every undo and redo reports.
+ */
+export declare function createDocument(init: {
+    image: Uint8Array;
+    width: number;
+    height: number;
+    palette: readonly Color[];
+}, deps: {
+    onChange: (change: SpriteChange) => void;
+    /** Whether tela's copy matches the host's, so a span from it is safe to send. */
+    fresh: () => boolean;
+    show: (patch: {
+        width?: number;
+        height?: number;
+        palette?: readonly Color[];
+        selection?: Mask | null;
+    }) => void;
+}): {
+    readonly image: Uint8Array<ArrayBufferLike>;
+    readonly width: number;
+    readonly height: number;
+    readonly palette: readonly string[];
+    readonly sel: Mask | null;
+    readonly bits: Uint8Array<ArrayBufferLike> | null;
+    write(positions: Uint32Array, values: Uint8Array): void;
+    /** A remap's palette and pixels, in one report. */
+    remap(next: readonly Color[], positions: Uint32Array, values: Uint8Array): void;
+    select(next: Mask | null): void;
+    /** A palette as the state's and, when `report`, the host's. */
+    setPalette(next: readonly Color[], report?: boolean): void;
+    /** Swaps in a whole image, reported as a size change when `report`; the selection is the caller's. */
+    replace(next: Uint8Array, w: number, h: number, report?: boolean): void;
+    /** Takes the host's same-size image as tela's copy, unreported. */
+    load(next: Uint8Array): void;
+    /** `before` and `after` at `positions`, not yet done. */
+    pixels: (positions: Uint32Array, before: Uint8Array, after: Uint8Array) => Change;
+    selChange: (before: Mask | null, after: Mask | null) => Change;
+    paletteChange: (before: readonly Color[], after: readonly Color[]) => Change;
+    /**
+     * The whole image and selection, from now to `next` and `m`, not yet done. It swaps in copies:
+     * writes change the image in place, and a stroke during a Run isn't undone on its own.
+     */
+    imageChange(next: Uint8Array, w: number, h: number, m: Mask | null): Change;
+};

package/dist/document.js

@@ -0,0 +1,105 @@
+import { tight as e, toBits as t } from "./mask.js";
+// lib/document.ts
+function n(n, r) {
+	let { onChange: i, fresh: a, show: o } = r, { image: s, width: c, height: l, palette: u } = n, d = null, f = null, p = (e, t) => {
+		let [n, r] = [Infinity, -1];
+		for (let i = 0; i < e.length; i++) s[e[i]] = t[i], n = Math.min(n, e[i]), r = Math.max(r, e[i]);
+		return {
+			positions: e,
+			values: t,
+			span: e.length && a() ? {
+				start: n,
+				values: s.subarray(n, r + 1)
+			} : void 0
+		};
+	}, m = {
+		get image() {
+			return s;
+		},
+		get width() {
+			return c;
+		},
+		get height() {
+			return l;
+		},
+		get palette() {
+			return u;
+		},
+		get sel() {
+			return d;
+		},
+		get bits() {
+			return f;
+		},
+		write(e, t) {
+			e.length && i({
+				type: "pixels",
+				...p(e, t)
+			});
+		},
+		remap(e, t, n) {
+			u = e, o({ palette: u }), i({
+				type: "remap",
+				palette: u,
+				...p(t, n)
+			});
+		},
+		select(n) {
+			d = n && e(n), f = d && t(d, c, l), o({ selection: d });
+		},
+		setPalette(e, t = !0) {
+			u = e, o({ palette: u }), t && i({
+				type: "palette",
+				palette: u
+			});
+		},
+		replace(e, t, n, r = !0) {
+			s = e, c = t, l = n, o({
+				width: c,
+				height: l
+			}), r && i({
+				type: "size",
+				width: c,
+				height: l,
+				image: s
+			});
+		},
+		load(e) {
+			s = e;
+		},
+		pixels: (e, t, n) => ({
+			size: e.byteLength + t.byteLength + n.byteLength,
+			undo: () => m.write(e, t),
+			redo: () => m.write(e, n)
+		}),
+		selChange: (e, t) => ({
+			size: (e?.data.byteLength ?? 0) + (t?.data.byteLength ?? 0),
+			undo: () => m.select(e),
+			redo: () => m.select(t)
+		}),
+		paletteChange: (e, t) => ({
+			size: (e.length + t.length) * 8,
+			undo: () => m.setPalette(e),
+			redo: () => m.setPalette(t)
+		}),
+		imageChange(e, t, n, r) {
+			let [i, a, o, u] = [
+				s.slice(),
+				c,
+				l,
+				d
+			];
+			return {
+				size: i.byteLength + e.byteLength,
+				undo: () => {
+					m.replace(i.slice(), a, o), m.select(u);
+				},
+				redo: () => {
+					m.replace(e.slice(), t, n), m.select(r);
+				}
+			};
+		}
+	};
+	return m;
+}
+export { n as createDocument };

package/dist/history.d.ts

@@ -0,0 +1,16 @@
+import { Change } from './types/history';
+/** Changes as one: undone newest first, redone in order. */
+export declare function group(changes: (Change | null)[]): Change;
+/** Tela's linear undo history: `done` steps sit below the cursor, the rest can be redone. */
+export declare function createHistory(): {
+    /** Records a step, clearing redo, then drops the oldest past `limit` bytes (0: none); the newest stays. */
+    record(label: string, changes: Change[], limit: number): void;
+    undo(): boolean;
+    redo(): boolean;
+    readonly state: {
+        undoSteps: number;
+        redoSteps: number;
+        undoLabel: string;
+        redoLabel: string;
+    };
+};

package/dist/history.js

@@ -0,0 +1,38 @@
+// lib/history.ts
+function e(e) {
+	let t = e.filter((e) => e !== null);
+	return {
+		size: t.reduce((e, t) => e + t.size, 0),
+		undo: () => [...t].reverse().forEach((e) => e.undo()),
+		redo: () => t.forEach((e) => e.redo())
+	};
+}
+function t() {
+	let t = [], n = 0, r = (e) => e.changes.reduce((e, t) => e + t.size, 0);
+	return {
+		record(e, i, a) {
+			t.splice(n, Infinity, {
+				label: e,
+				changes: i
+			});
+			let o = t.reduce((e, t) => e + r(t), 0);
+			for (; a && o > a && t.length > 1;) o -= r(t.shift());
+			n = t.length;
+		},
+		undo() {
+			return n ? (e(t[--n].changes).undo(), !0) : !1;
+		},
+		redo() {
+			return n !== t.length && (e(t[n++].changes).redo(), !0);
+		},
+		get state() {
+			return {
+				undoSteps: n,
+				redoSteps: t.length - n,
+				undoLabel: t[n - 1]?.label ?? null,
+				redoLabel: t[n]?.label ?? null
+			};
+		}
+	};
+}
+export { t as createHistory, e as group };

package/dist/image.d.ts

@@ -0,0 +1,41 @@
+import { BrushChange, Image } from './types/image';
+import { Mask, Rect } from './types/mask';
+/**
+ * A `width`×`height` image whose cell (x, y) is `src`'s cell at `from(x, y)`, or `outside`
+ * where that lies off `src`.
+ */
+export declare function resample(src: Image, width: number, height: number, from: (x: number, y: number) => [number, number], outside?: number): Image;
+export declare function turn(data: Uint8Array, w: number, h: number, change: BrushChange): Image;
+/** Flip and Rotate Canvas: each turn on the image and on the selection, cell for cell. */
+export declare function turnImage(image: Image, sel: Mask | null, changes: BrushChange[]): {
+    image: {
+        data: Uint8Array<ArrayBufferLike>;
+        width: number;
+        height: number;
+    };
+    sel: Mask | null;
+};
+/** The `box` of `image`, `hole` where it lies off the image. */
+export declare const crop: (image: Image, { x, y, width, height }: Rect, hole: number) => Image;
+/**
+ * Sprite > Trim's box: the bounds of every index other than the most common corner's, the
+ * bottom-right's on a tie (observed). An image of that index alone is kept whole.
+ */
+export declare function trimBox({ data, width, height }: Image): Rect;
+/**
+ * Edit > Shift: the `box` of `image` with its cells moved by dx, dy, wrapping inside the box.
+ * Off the image it reads 0, the mask color.
+ */
+export declare const wrap: (image: Image, { x, y, width, height }: Rect, dx: number, dy: number) => Image;
+/**
+ * A palette remap of `image`: `to(i)` is `remap[i]`, or `i` past its end; `from` sends an index
+ * back to the lowest one that went to it, or leaves it. `at`, `was` and `now` are the cells it
+ * moves.
+ */
+export declare function remapImage(image: Uint8Array, remap: ArrayLike<number>): {
+    to: (i: number) => number;
+    from: (i: number) => number;
+    at: Uint32Array<ArrayBuffer>;
+    was: Uint8Array<ArrayBuffer>;
+    now: Uint8Array<ArrayBuffer>;
+};

package/dist/image.js

@@ -0,0 +1,94 @@
+// lib/image.ts
+function e(e, t, n, r, i = 0) {
+	let a = new Uint8Array(t * n);
+	for (let o = 0; o < n; o++) for (let n = 0; n < t; n++) {
+		let [s, c] = r(n, o), l = s >= 0 && c >= 0 && s < e.width && c < e.height;
+		a[o * t + n] = l ? e.data[c * e.width + s] : i;
+	}
+	return {
+		data: a,
+		width: t,
+		height: n
+	};
+}
+var t = (e, t) => (e % t + t) % t;
+function n(t, n, r, i) {
+	let a = {
+		data: t,
+		width: n,
+		height: r
+	};
+	switch (i) {
+		case "rotate-90cw": return e(a, r, n, (e, t) => [t, r - 1 - e]);
+		case "flip-d": return e(a, r, n, (e, t) => [t, e]);
+		case "flip-x": return e(a, n, r, (e, t) => [n - 1 - e, t]);
+		case "flip-y": return e(a, n, r, (e, t) => [e, r - 1 - t]);
+	}
+}
+function r(e, t, r) {
+	let { data: i, width: a, height: o } = e;
+	for (let e of r) {
+		if (t) {
+			let [r, i] = e === "flip-x" ? [a - t.x - t.width, t.y] : e === "flip-y" ? [t.x, o - t.y - t.height] : [o - t.y - t.height, t.x];
+			t = {
+				x: r,
+				y: i,
+				...n(t.data, t.width, t.height, e)
+			};
+		}
+		({data: i, width: a, height: o} = n(i, a, o, e));
+	}
+	return {
+		image: {
+			data: i,
+			width: a,
+			height: o
+		},
+		sel: t
+	};
+}
+var i = (t, { x: n, y: r, width: i, height: a }, o) => e(t, i, a, (e, t) => [n + e, r + t], o);
+function a({ data: e, width: t, height: n }) {
+	let r = (n, r) => e[r * t + n], [i, a] = [t - 1, n - 1], o = [
+		r(i, a),
+		r(0, 0),
+		r(i, 0),
+		r(0, a)
+	], s = (e) => o.filter((t) => t === e).length, c = o.reduce((e, t) => s(t) > s(e) ? t : e), [l, u, d, f] = [
+		t,
+		n,
+		-1,
+		-1
+	];
+	for (let e = 0; e < n; e++) for (let n = 0; n < t; n++) r(n, e) !== c && ([l, u, d, f] = [
+		Math.min(l, n),
+		Math.min(u, e),
+		Math.max(d, n),
+		Math.max(f, e)
+	]);
+	return d < 0 ? {
+		x: 0,
+		y: 0,
+		width: t,
+		height: n
+	} : {
+		x: l,
+		y: u,
+		width: d - l + 1,
+		height: f - u + 1
+	};
+}
+var o = (n, { x: r, y: i, width: a, height: o }, s, c) => e(n, a, o, (e, n) => [r + t(e - s, a), i + t(n - c, o)]);
+function s(e, t) {
+	let n = (e) => e < t.length ? t[e] : e, r = /* @__PURE__ */ new Map();
+	for (let e = 0; e < t.length; e++) r.has(t[e]) || r.set(t[e], e);
+	let i = (e) => r.get(e) ?? e, a = Uint32Array.from(e.keys()).filter((t) => n(e[t]) !== e[t]), o = Uint8Array.from(a, (t) => e[t]);
+	return {
+		to: n,
+		from: i,
+		at: a,
+		was: o,
+		now: o.map(n)
+	};
+}
+export { i as crop, s as remapImage, e as resample, a as trimBox, n as turn, r as turnImage, o as wrap };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Editor, EditorOptions } from './types/index';
+export type * from './types/index';
+export type { KeymapEntry, Keys } from './types/keymap';
+export type { Mask, Rect, SelectionMode } from './types/mask';
+export declare function createEditor(options: EditorOptions): Editor;