@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

package/dist/locales/zh-Hant.js

@@ -0,0 +1,188 @@
+// locales/zh-Hant.json
+var zh_Hant_default = {
+	"common.cancel": "取消",
+	"common.close": "關閉",
+	"common.dismiss": "關閉",
+	"common.save": "儲存",
+	"common.delete": "刪除",
+	"common.clear": "清除",
+	"common.copy": "拷貝",
+	"common.paste": "貼上",
+	"common.undo": "復原",
+	"common.redo": "重做",
+	"common.off": "關",
+	"common.moreInformation": "更多資訊",
+	"common.width": "寬度",
+	"common.height": "高度",
+	"common.opacity": "不透明度",
+	"tool.brush": "筆刷",
+	"tool.eraser": "橡皮擦",
+	"tool.move": "移動、縮放和旋轉",
+	"tool.rectangleLasso": "矩形選取",
+	"tool.circleLasso": "橢圓選取",
+	"tool.polygonLasso": "多邊形選取",
+	"tool.freeformLasso": "自由選取",
+	"tool.pan": "手形工具",
+	"tool.zoom": "縮放",
+	"tool.colourSample": "滴管",
+	"tool.withShortcut": "{tool}（{shortcut}）",
+	"toolbar.label": "工具",
+	"toolbar.currentColour": "目前顏色",
+	"toolbar.layers": "圖層",
+	"toolbar.menu": "選單",
+	"toolbar.undoWithShortcut": "復原（{shortcut}）",
+	"toolbar.redoWithShortcut": "重做（{shortcut}）",
+	"toolSettings.settings": "{tool}設定",
+	"toolSettings.presets": "{tool}預設",
+	"toolSettings.configure": "詳細設定",
+	"toolSettings.constrainProportions": "維持比例",
+	"toolSettings.pressure": "壓力感應",
+	"toolSettings.tilt": "傾斜",
+	"toolSettings.focusPen": "僅限觸控筆模式",
+	"toolSettings.focusPenHint": "僅限觸控筆模式：只有觸控筆可以繪圖",
+	"toolSettings.flipHorizontal": "水平翻轉",
+	"toolSettings.flipVertical": "垂直翻轉",
+	"toolSettings.rotateLeft": "向左旋轉90°",
+	"toolSettings.rotateRight": "向右旋轉90°",
+	"toolSettings.maskSettings": "遮罩設定",
+	"toolSettings.zoomIn": "放大",
+	"toolSettings.zoomOut": "縮小",
+	"toolSettings.pointSample": "單點取色",
+	"toolSettings.areaSample": "區域平均取色",
+	"brushMenu.presets": "{tool}預設",
+	"brushMenu.size": "{tool}大小",
+	"brushMenu.dragToResize": "左右拖曳以調整大小",
+	"brushMenu.newPreset": "新預設",
+	"brushMenu.create": "建立",
+	"brushMenu.import": "匯入",
+	"brushMenu.export": "匯出",
+	"presets.myPresets": "我的預設",
+	"presets.unknownAuthor": "未知",
+	"presets.deleteConfirm": "要刪除「{name}」嗎？此動作無法復原。",
+	"presets.deleted": "已刪除「{name}」",
+	"presets.deleteFailed": "無法刪除「{name}」",
+	"presets.saved": "已將「{name}」儲存到我的預設",
+	"presets.saveFailed": "無法儲存「{name}」",
+	"presets.replaceConfirm": "已有名為「{name}」的預設。要取代嗎？",
+	"presets.imported.one": "已匯入 {count} 個筆刷預設",
+	"presets.imported.other": "已匯入 {count} 個筆刷預設",
+	"presets.fileIncompatible": "不相容的筆刷預設 JSON 檔案",
+	"presets.fileReadFailed": "無法讀取筆刷預設 JSON 檔案",
+	"presets.exportFailed": "匯出筆刷預設 JSON 檔案時發生錯誤",
+	"presets.nothingToExport": "沒有可匯出的筆刷預設",
+	"brushConfig.brushTitle": "筆刷詳細設定",
+	"brushConfig.eraserTitle": "橡皮擦詳細設定",
+	"brushConfig.presetName": "預設名稱",
+	"brushConfig.shape": "形狀",
+	"brushConfig.upload": "上傳",
+	"brushConfig.paste": "貼上",
+	"brushConfig.rotation": "旋轉",
+	"brushConfig.offsetX": "X 位移",
+	"brushConfig.offsetY": "Y 位移",
+	"brushConfig.spacing": "間距",
+	"brushConfig.sampleRate": "取樣率",
+	"brushConfig.smoothing": "平滑",
+	"brushConfig.smoothingLinear": "直線",
+	"brushConfig.smoothingQuadratic": "二次曲線",
+	"brushConfig.smoothingCubic": "三次曲線",
+	"brushConfig.randomise": "隨機",
+	"brushConfig.deletePreset": "刪除預設…",
+	"brushConfig.shapeFailed": "無法使用此筆刷形狀",
+	"brushConfig.test": "試畫",
+	"brushConfig.testArea": "筆刷試畫區域",
+	"shape.notPng": "筆刷形狀必須是 PNG 影像",
+	"shape.tooLarge": "筆刷形狀影像最大為 2 MB",
+	"shape.readFailed": "無法讀取筆刷形狀影像",
+	"shape.noPngToPaste": "沒有可貼上的 PNG 影像",
+	"layers.label": "圖層",
+	"layers.new": "新增圖層",
+	"layers.defaultName": "圖層 {number}",
+	"layers.name": "圖層名稱",
+	"layers.visible": "顯示",
+	"layers.alphaLock": "鎖定透明像素",
+	"layers.blendMode": "混合模式",
+	"layers.actions": "圖層動作",
+	"layers.reorder": "調整{name}的順序：拖曳，或按下以顯示動作",
+	"layers.duplicate": "複製",
+	"layers.createMask": "建立遮罩",
+	"layers.moveUp": "上移",
+	"layers.moveDown": "下移",
+	"layers.moveToTop": "移到最上層",
+	"layers.moveToBottom": "移到最下層",
+	"layers.mergeDown": "向下合併…",
+	"layers.mergeDownConfirm": "確定要將此圖層與下方圖層合併嗎？",
+	"layers.mergeLayer": "合併圖層",
+	"layers.clearConfirm": "要清除「{name}」上的所有影像嗎？",
+	"layers.deleteConfirm": "要刪除「{name}」嗎？",
+	"blendMode.normal": "正常",
+	"blendMode.screen": "濾色",
+	"blendMode.lighten": "變亮",
+	"blendMode.multiply": "色彩增值",
+	"blendMode.darken": "變暗",
+	"blendMode.overlay": "覆蓋",
+	"canvas.label": "繪圖畫布",
+	"canvas.map": "畫布導覽",
+	"canvas.loading": "正在載入畫布…",
+	"inputSettings.title": "操作",
+	"inputSettings.scrollPan": "捲動或雙指滑動以平移",
+	"inputSettings.touchPan": "雙指拖曳以平移",
+	"inputSettings.pinchZoom": "雙指撥動以縮放",
+	"inputSettings.modifierScrollZoom": "{key} + 捲動以縮放",
+	"inputSettings.focusPen": "僅限觸控筆模式：手指和手掌不會繪圖",
+	"inputSettings.gestures": "觸控手勢",
+	"inputSettings.language": "語言",
+	"gesture.tap2": "雙指點一下",
+	"gesture.tap3": "三指點一下",
+	"gesture.swipeUp3": "三指向上滑動",
+	"gesture.swipeDown3": "三指向下滑動",
+	"gesture.swipeLeft3": "三指向左滑動",
+	"gesture.swipeRight3": "三指向右滑動",
+	"gesture.swipeIn3": "三指捏合",
+	"gesture.swipeOut3": "三指張開",
+	"toolSettings.selectAll": "全選",
+	"toolSettings.invertSelection": "反轉選取範圍",
+	"toolSettings.deselect": "取消選取",
+	"toolSettings.percent": "百分比",
+	"toolSettings.reset": "重設",
+	"brushMenu.importFile": "匯入預設檔案",
+	"brushConfig.name": "名稱",
+	"brushConfig.snapToPixelGrid": "對齊像素格線",
+	"brushConfig.addToPresets": "加入預設",
+	"brushConfig.variation": "{param}：{source}",
+	"layers.mergeDownTitle": "向下合併",
+	"layers.clear": "清除…",
+	"layers.delete": "刪除…",
+	"layers.clearTitle": "清除圖層",
+	"layers.deleteTitle": "刪除圖層",
+	"toolSettings.angle": "角度",
+	"layout.tools": "工具",
+	"layout.toolSettings": "工具設定",
+	"layout.panels": "面板",
+	"layout.status": "狀態",
+	"layout.canvas": "畫布",
+	"layout.show": "顯示{name}",
+	"layout.hide": "隱藏{name}",
+	"layout.new": "{name}（有新內容）",
+	"brushConfig.newPresetName": "新筆刷",
+	"language.en-US": "English (United States)",
+	"language.en-GB": "English (United Kingdom)",
+	"language.ja": "日本語",
+	"language.ko": "한국어",
+	"language.zh-Hans": "简体中文",
+	"language.zh-Hant": "繁體中文",
+	"language.fr": "Français",
+	"autosave.elsewhere": "你已在另一個視窗中繪畫",
+	"autosave.elsewhereMessage": "此畫作已在另一個視窗或分頁中開啟，一次只能在一個視窗中繪畫。選擇「在此繪畫」即可在此視窗繼續（另一個視窗將停止）。",
+	"autosave.takeOver": "在此繪畫",
+	"autosave.failed": "無法在此瀏覽器中儲存畫作",
+	"stats.label": "畫布詳細資料",
+	"stats.size": "畫布：{width} × {height} 像素",
+	"stats.zoom": "縮放：{zoom}",
+	"stats.colour": "顏色：{colour}",
+	"stats.stored": "已儲存：{size}",
+	"theme.label": "主題",
+	"theme.light": "淺色",
+	"theme.dark": "深色",
+	"theme.auto": "自動"
+};
+export { zh_Hant_default as default };

package/dist/package.js

@@ -0,0 +1,3 @@
+// package.json
+var version = "0.2.0";
+export { version };

package/dist/testing/app.d.ts

@@ -0,0 +1,7 @@
+import PaintCanvas from "../lib/classes/PaintCanvas";
+/** The handle of the author of presets made in apps from `createApp` */
+export declare const TEST_HANDLE = "ada.example";
+/**
+ * Create a canvas whose canvases record drawing calls (jsdom cannot draw), with "Ada" as the author of new presets.
+ */
+export declare const createApp: () => PaintCanvas;

package/dist/testing/app.js

@@ -0,0 +1,16 @@
+import PaintCanvas from "../lib/classes/PaintCanvas/index.js";
+import { createRecordingCanvasFactory } from "./recordingCanvas.js";
+// src/testing/app.ts
+/** The handle of the author of presets made in apps from `createApp` */
+var TEST_HANDLE = "ada.example";
+/**
+* Create a canvas whose canvases record drawing calls (jsdom cannot draw), with "Ada" as the author of new presets.
+*/
+var createApp = () => new PaintCanvas({
+	createCanvas: createRecordingCanvasFactory().factory,
+	presetAuthor: () => ({
+		name: "Ada",
+		handle: TEST_HANDLE
+	})
+});
+export { TEST_HANDLE, createApp };

package/dist/testing/elements.d.ts

@@ -0,0 +1,42 @@
+import type { LitElement } from "lit";
+/**
+ * Create a custom element, set its properties, add it to the page and wait for it to render.
+ *
+ * @example
+ * const button = await mount<PcButton>("pc-button", { variant: "cancel" });
+ */
+export declare const mount: <T extends LitElement>(tag: string, properties?: Partial<T>, content?: string) => Promise<T>;
+/**
+ * Find an element in a custom element's shadow root (throws if missing).
+ */
+export declare const shadow: <T extends Element = HTMLElement>(host: Element, selector: string) => T;
+/**
+ * Collect the custom events of a type an element fires.
+ */
+export declare const events: <T = unknown>(target: EventTarget, type: string) => T[];
+/**
+ * Find an element in a custom element's shadow root (throws if missing). Same as `shadow`.
+ */
+export declare const query: <T extends Element = HTMLElement>(host: Element, selector: string) => T;
+/**
+ * Find all matching elements in a custom element's shadow root.
+ */
+export declare const queryAll: <T extends Element = HTMLElement>(host: Element, selector: string) => T[];
+/**
+ * Create a pointer-like event (jsdom has no PointerEvent), bubbling and cancelable.
+ */
+export declare const pointerEvent: (type: string, x: number, y: number, { pointerId, ...init }?: MouseEventInit & {
+    pointerId?: number;
+}) => MouseEvent & {
+    pointerId: number;
+};
+/**
+ * Describe a `pc-toast` event's detail as "kind: message", to check both at once.
+ *
+ * @example
+ * toastText({ message: "Saved", kind: "success" }); // "success: Saved"
+ */
+export declare const toastText: (detail: string | {
+    message: string;
+    kind?: string;
+}) => string;

package/dist/testing/elements.js

@@ -0,0 +1,58 @@
+// src/testing/elements.ts
+/**
+* Create a custom element, set its properties, add it to the page and wait for it to render.
+*
+* @example
+* const button = await mount<PcButton>("pc-button", { variant: "cancel" });
+*/
+var mount = async (tag, properties = {}, content = "") => {
+	const element = document.createElement(tag);
+	Object.assign(element, properties);
+	element.innerHTML = content;
+	document.body.append(element);
+	await element.updateComplete;
+	return element;
+};
+/**
+* Find an element in a custom element's shadow root (throws if missing).
+*/
+var shadow = (host, selector) => {
+	const found = host.shadowRoot?.querySelector(selector);
+	if (!found) throw new Error(`No ${selector} in ${host.tagName}`);
+	return found;
+};
+/**
+* Collect the custom events of a type an element fires.
+*/
+var events = (target, type) => {
+	const details = [];
+	target.addEventListener(type, (event) => details.push(event.detail));
+	return details;
+};
+/**
+* Find an element in a custom element's shadow root (throws if missing). Same as `shadow`.
+*/
+var query = shadow;
+/**
+* Find all matching elements in a custom element's shadow root.
+*/
+var queryAll = (host, selector) => [...host.shadowRoot?.querySelectorAll(selector) ?? []];
+/**
+* Create a pointer-like event (jsdom has no PointerEvent), bubbling and cancelable.
+*/
+var pointerEvent = (type, x, y, { pointerId = 1, ...init } = {}) => Object.assign(new MouseEvent(type, {
+	clientX: x,
+	clientY: y,
+	bubbles: true,
+	cancelable: true,
+	composed: true,
+	...init
+}), { pointerId });
+/**
+* Describe a `pc-toast` event's detail as "kind: message", to check both at once.
+*
+* @example
+* toastText({ message: "Saved", kind: "success" }); // "success: Saved"
+*/
+var toastText = (detail) => typeof detail === "string" ? `info: ${detail}` : `${detail.kind ?? "info"}: ${detail.message}`;
+export { events, mount, pointerEvent, query, queryAll, shadow, toastText };

package/dist/testing/fakeCanvas.d.ts

@@ -0,0 +1,21 @@
+import { vi } from "vitest";
+import type { CanvasFactory } from "../lib/classes/Layer";
+/** Fake 2D context recording the calls layers make */
+export interface FakeContext {
+    clearRect: ReturnType<typeof vi.fn>;
+    drawImage: ReturnType<typeof vi.fn>;
+    /** Returns transparent pixels unless replaced */
+    getImageData: ReturnType<typeof vi.fn>;
+    save: ReturnType<typeof vi.fn>;
+    restore: ReturnType<typeof vi.fn>;
+}
+/**
+ * Create a canvas factory that returns fake canvases (jsdom has no `OffscreenCanvas`).
+ *
+ * @param hasContext - set to false to simulate a canvas without a 2D context
+ */
+export declare const createFakeCanvasFactory: (hasContext?: boolean) => CanvasFactory;
+/**
+ * Get the fake context of a fake canvas.
+ */
+export declare const fakeContext: (canvas: OffscreenCanvas) => FakeContext;

package/dist/testing/fakeCanvas.js

@@ -0,0 +1,26 @@
+import { vi } from "vitest";
+// src/testing/fakeCanvas.ts
+/**
+* Create a canvas factory that returns fake canvases (jsdom has no `OffscreenCanvas`).
+*
+* @param hasContext - set to false to simulate a canvas without a 2D context
+*/
+var createFakeCanvasFactory = (hasContext = true) => (width, height) => {
+	const context = {
+		clearRect: vi.fn(),
+		drawImage: vi.fn(),
+		getImageData: vi.fn((_x, _y, w, h) => ({ data: new Uint8ClampedArray(w * h * 4) })),
+		save: vi.fn(),
+		restore: vi.fn()
+	};
+	return {
+		width,
+		height,
+		getContext: () => hasContext ? context : null
+	};
+};
+/**
+* Get the fake context of a fake canvas.
+*/
+var fakeContext = (canvas) => canvas.getContext("2d");
+export { createFakeCanvasFactory, fakeContext };

package/dist/testing/layerStore.d.ts

@@ -0,0 +1,26 @@
+import type { LayerStoreLike, SavedDrawing, SavedDrawingWithImages } from "../lib/storage";
+/**
+ * A layer store kept in memory, recording each save. Set `loadError` or `saveError` to make loading or saving fail.
+ *
+ * @example
+ * const store = new MemoryLayerStore("test");
+ * canvas.useLayerStore(store, { locks: null });
+ */
+export declare class MemoryLayerStore implements LayerStoreLike {
+    readonly name: string;
+    /** The saved drawing and its layer images, if any */
+    saved?: SavedDrawingWithImages;
+    /** Each save: the drawing and the images that changed */
+    readonly saves: {
+        drawing: SavedDrawing;
+        images: Map<string, Blob>;
+    }[];
+    /** Thrown by `load` when set */
+    loadError?: Error;
+    /** Thrown by `save` when set */
+    saveError?: Error;
+    constructor(name?: string, saved?: SavedDrawingWithImages);
+    load(): Promise<SavedDrawingWithImages | undefined>;
+    save(drawing: SavedDrawing, images: ReadonlyMap<string, Blob>): Promise<void>;
+    clear(): Promise<void>;
+}

package/dist/testing/layerStore.js

@@ -0,0 +1,43 @@
+// src/testing/layerStore.ts
+/**
+* A layer store kept in memory, recording each save. Set `loadError` or `saveError` to make loading or saving fail.
+*
+* @example
+* const store = new MemoryLayerStore("test");
+* canvas.useLayerStore(store, { locks: null });
+*/
+var MemoryLayerStore = class {
+	name;
+	/** The saved drawing and its layer images, if any */
+	saved;
+	/** Each save: the drawing and the images that changed */
+	saves = [];
+	/** Thrown by `load` when set */
+	loadError;
+	/** Thrown by `save` when set */
+	saveError;
+	constructor(name = "test", saved) {
+		this.name = name;
+		this.saved = saved;
+	}
+	async load() {
+		if (this.loadError) throw this.loadError;
+		return this.saved;
+	}
+	async save(drawing, images) {
+		if (this.saveError) throw this.saveError;
+		this.saves.push({
+			drawing,
+			images: new Map(images)
+		});
+		const kept = new Map([...this.saved?.images ?? [], ...images].filter(([id]) => drawing.layers.some((layer) => layer.id === id)));
+		this.saved = {
+			drawing,
+			images: kept
+		};
+	}
+	async clear() {
+		this.saved = void 0;
+	}
+};
+export { MemoryLayerStore };

package/dist/testing/locks.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Fake Web Locks shared by any number of pretend windows: `ifAvailable` requests get no lock while another holds it,
+ * and `steal` takes it, failing the holder's request with an `AbortError`. A lock is let go when its callback's
+ * promise settles. With `failing`, every request fails (as on a page where locks can't be used).
+ *
+ * @example
+ * const { locks, isHeld } = createFakeLocks();
+ * new LayerAutosave(canvas, store, { locks }).start();
+ * isHeld("paintcanvas:test"); // true
+ */
+export declare const createFakeLocks: (failing?: boolean) => {
+    locks: LockManager;
+    /** Whether a lock is held */
+    isHeld: (name: string) => boolean;
+};

package/dist/testing/locks.js

@@ -0,0 +1,41 @@
+// src/testing/locks.ts
+/**
+* Fake Web Locks shared by any number of pretend windows: `ifAvailable` requests get no lock while another holds it,
+* and `steal` takes it, failing the holder's request with an `AbortError`. A lock is let go when its callback's
+* promise settles. With `failing`, every request fails (as on a page where locks can't be used).
+*
+* @example
+* const { locks, isHeld } = createFakeLocks();
+* new LayerAutosave(canvas, store, { locks }).start();
+* isHeld("paintcanvas:test"); // true
+*/
+var createFakeLocks = (failing = false) => {
+	/** Fails the request holding each lock, by name */
+	const holders = /* @__PURE__ */ new Map();
+	const request = (name, options, callback) => new Promise((resolve, reject) => {
+		if (failing) {
+			reject(new DOMException("Locks can't be used", "SecurityError"));
+			return;
+		}
+		const holder = holders.get(name);
+		if (holder && !options.steal) {
+			resolve(callback(null));
+			return;
+		}
+		holder?.(new DOMException("The lock was stolen", "AbortError"));
+		holders.set(name, reject);
+		Promise.resolve(callback({
+			name,
+			mode: "exclusive"
+		})).then((value) => {
+			if (holders.get(name) === reject) holders.delete(name);
+			resolve(value);
+		}, reject);
+	});
+	return {
+		locks: { request },
+		/** Whether a lock is held */
+		isHeld: (name) => holders.has(name)
+	};
+};
+export { createFakeLocks };

package/dist/testing/recordingCanvas.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasFactory } from "../lib/classes/Layer";
+import { type Recorded } from "./recordingContext";
+/** A fake canvas whose 2D context records calls */
+export interface RecordingCanvas {
+    canvas: OffscreenCanvas;
+    calls: Recorded[];
+}
+/**
+ * Create a canvas factory whose canvases each keep one recording context (reading image data returns transparent pixels). Created canvases are listed in order.
+ */
+export declare const createRecordingCanvasFactory: () => {
+    factory: CanvasFactory;
+    created: RecordingCanvas[];
+};

package/dist/testing/recordingCanvas.js

@@ -0,0 +1,28 @@
+import { createRecordingContext } from "./recordingContext.js";
+// src/testing/recordingCanvas.ts
+/**
+* Create a canvas factory whose canvases each keep one recording context (reading image data returns transparent pixels). Created canvases are listed in order.
+*/
+var createRecordingCanvasFactory = () => {
+	const created = [];
+	const factory = (width, height) => {
+		const { ctx, calls } = createRecordingContext();
+		ctx.getImageData = (_x, _y, w, h) => ({ data: new Uint8ClampedArray(w * h * 4) });
+		calls.length = 0;
+		const canvas = {
+			width,
+			height,
+			getContext: () => ctx
+		};
+		created.push({
+			canvas,
+			calls
+		});
+		return canvas;
+	};
+	return {
+		factory,
+		created
+	};
+};
+export { createRecordingCanvasFactory };

package/dist/testing/recordingContext.d.ts

@@ -0,0 +1,10 @@
+import type { DrawingContext } from "../lib/rendering/compositing";
+/** A recorded drawing call or property change */
+export type Recorded = [name: string, ...args: unknown[]];
+/**
+ * Create a fake 2D context that records every method call and property assignment, in order.
+ */
+export declare const createRecordingContext: () => {
+    ctx: DrawingContext;
+    calls: Recorded[];
+};

package/dist/testing/recordingContext.js

@@ -0,0 +1,19 @@
+// src/testing/recordingContext.ts
+/**
+* Create a fake 2D context that records every method call and property assignment, in order.
+*/
+var createRecordingContext = () => {
+	const calls = [];
+	return {
+		ctx: new Proxy({}, {
+			get: (target, name) => name in target ? target[name] : (...args) => void calls.push([name, ...args]),
+			set: (target, name, value) => {
+				target[name] = value;
+				calls.push([`set:${name}`, value]);
+				return true;
+			}
+		}),
+		calls
+	};
+};
+export { createRecordingContext };

package/dist/ui/ChangeController/index.d.ts

@@ -0,0 +1,40 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+/**
+ * Re-renders a Lit component whenever any of the given state objects dispatch a `change` event, first telling
+ * `onChange` (if given) which one changed.
+ *
+ * The targets are re-read before every update, so replaced state objects (e.g. new layers after a canvas resize) are picked up.
+ *
+ * @example
+ * class MyElement extends LitElement {
+ *   private changes = new ChangeController(this, () => [this.app, this.app?.layers]);
+ * }
+ */
+export default class ChangeController implements ReactiveController {
+    private readonly host;
+    private readonly getTargets;
+    private subscribed;
+    private readonly notify?;
+    private readonly onChange;
+    constructor(host: ReactiveControllerHost, getTargets: () => (EventTarget | undefined)[], onChange?: (target: EventTarget) => void);
+    /**
+     * Subscribe to the current targets, replacing any previous subscriptions.
+     */
+    refresh(): void;
+    /**
+     * Subscribe when the component connects.
+     */
+    hostConnected(): void;
+    /**
+     * Re-subscribe before each update in case targets were replaced.
+     */
+    hostUpdate(): void;
+    /**
+     * Unsubscribe when the component disconnects.
+     */
+    hostDisconnected(): void;
+    /**
+     * Remove all subscriptions.
+     */
+    private unsubscribe;
+}