@voithos-labs/aragonite 0.10.1

package/dist/components/editor-root-listeners.js

@@ -0,0 +1,112 @@
+/**
+ * Editor-root ambient listeners: the mod-active cursor tracker, the selectionchange
+ * bridge, and the viewport-height watcher. Pure dispatch over live getters; each
+ * installing `$effect` stays in `Editor.svelte` as a guard plus one install call,
+ * returning the teardown. `onRoot`/`removeAll` capture that add/remove pair once.
+ */
+import { tick } from 'svelte';
+// ── Listener plumbing ───────────────────────────────────────────────
+// Typed off `Event`, not the per-target event maps: those names are type-only,
+// and `target` ranges over every EventTarget the root effects listen on.
+export function onRoot(target, type, handler, options) {
+    const listener = handler;
+    target.addEventListener(type, listener, options);
+    // Removal matches on capture alone: `passive` is an add-time hint the remove
+    // signature rejects.
+    return () => target.removeEventListener(type, listener, options?.capture);
+}
+export function removeAll(...removers) {
+    return () => removers.forEach((remove) => remove());
+}
+// ── Install bundles ─────────────────────────────────────────────────
+/**
+ * Only Ctrl/Cmd+click activates a link, so CSS switches links to a pointer cursor
+ * off `data-mod-active`. Reset on blur and visibility loss, or a modifier released
+ * while the page is unfocused sticks the cursor on.
+ */
+export function installModActiveTracker(root) {
+    // Track the last reflected state so ordinary typing never touches the DOM,
+    // keeping the attribute write off the keystroke hot path (perf:check).
+    let active = false;
+    const apply = (next) => {
+        if (next === active)
+            return;
+        active = next;
+        if (next)
+            root.setAttribute('data-mod-active', '');
+        else
+            root.removeAttribute('data-mod-active');
+    };
+    const onKey = (e) => apply(e.ctrlKey || e.metaKey);
+    const reset = () => apply(false);
+    const onVisibility = () => {
+        if (document.visibilityState === 'hidden')
+            apply(false);
+    };
+    return removeAll(onRoot(document, 'keydown', onKey), onRoot(document, 'keyup', onKey), onRoot(window, 'blur', reset), onRoot(document, 'visibilitychange', onVisibility));
+}
+/**
+ * Single-block caret motion never goes through SelectionState, so without this
+ * bridge subscribers miss every intra-block move. Scoped to `root` to avoid noise
+ * from selections elsewhere on the page.
+ */
+export function installSelectionChangeBridge(deps) {
+    const handler = () => {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const anchorNode = sel.anchorNode;
+        if (!anchorNode || !deps.root.contains(anchorNode))
+            return;
+        // A selection in host chrome is not a document selection: emitting there
+        // reports this editor's own unchanged selection on every header caret move.
+        if (deps.isHostChrome(anchorNode))
+            return;
+        deps.emit();
+    };
+    return onRoot(document, 'selectionchange', handler);
+}
+/**
+ * A focus departure is a selection change no browser channel reports: the native range can
+ * survive unfocused while the editor's own read goes null, so the channel announces it. Judged
+ * after the flush, never at focusout: a structural commit unmounts the focused surface and
+ * lands focus again after its own tick, and a departure that came back is no departure.
+ */
+export function installEditorBlurAnnouncer(deps) {
+    let pending = false;
+    const handler = (event) => {
+        const to = event.relatedTarget;
+        if ((to instanceof Node && deps.root.contains(to)) || pending)
+            return;
+        pending = true;
+        void tick().then(() => {
+            pending = false;
+            const active = document.activeElement;
+            if (active instanceof Node && deps.root.contains(active))
+                return;
+            deps.emit();
+        });
+    };
+    return onRoot(deps.root, 'focusout', handler);
+}
+/** Calls `bump` on a height change of the resolved scrollport `target`. */
+export function installViewportHeightWatcher(target, bump) {
+    if (target === window) {
+        // The page viewport has no box to observe, and a visualViewport move (a mobile URL
+        // bar retracting) never touches documentElement's height — hence both, ungated.
+        const visual = window.visualViewport;
+        return removeAll(onRoot(window, 'resize', bump), visual ? onRoot(visual, 'resize', bump) : () => { });
+    }
+    // Cast, not a narrowing: `UserScrollport` is a union of object types, which `=== window`
+    // does not narrow — the same cast `createScrollport` makes on the same split.
+    const el = target;
+    let lastHeight = el.clientHeight;
+    const observer = new ResizeObserver(() => {
+        if (el.clientHeight === lastHeight)
+            return;
+        lastHeight = el.clientHeight;
+        bump();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+}

package/dist/components/image/ImageOverlayHost.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Document } from '../../core/nodes';
+	import type { PresentationMode } from '../../presentation-mode';
+	import type { UndoController } from '../../editor-actions/deps';
+	import type { GrammarView } from '../../schema/block-openers';
+	import { EDITOR_DOC_KEY, type EditorDoc } from '../../editor-keys';
+	import type { EditorEvents } from '../../editor-events';
+	import { installWidgetRangePainter } from '../../selection/widget-range-paint';
+	import ImageProperties from './ImageProperties.svelte';
+	import ImageResizeHandles from './ImageResizeHandles.svelte';
+	import { createImageEditCommitter } from './image-edit-commit';
+	import { imageFieldsFromInline } from './image-source-bytes';
+	import {
+		IMAGE_CHROME_SELECTOR,
+		type WidgetSelectionState
+	} from './widget-selection-state.svelte';
+
+	// Mounted unconditionally by Editor: the effects below must observe
+	// widget-selection changes, so the selected-widget {#if} lives here.
+	let {
+		widgetSelection,
+		controller,
+		events,
+		getDoc,
+		getEditorEl,
+		getSelectionIsCustomRendered,
+		getPresentationMode,
+		grammar,
+		lifetime
+	}: {
+		widgetSelection: WidgetSelectionState;
+		controller: UndoController;
+		events: EditorEvents;
+		getDoc: () => Document;
+		getEditorEl: () => HTMLElement | null;
+		getSelectionIsCustomRendered: () => boolean;
+		getPresentationMode: () => PresentationMode;
+		grammar?: GrammarView;
+		lifetime: AbortSignal;
+	} = $props();
+
+	let imageOverlayEl: HTMLDivElement | undefined = $state();
+
+	const linkRef = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.linkRef;
+
+	// Props are stable for the editor's lifetime, so capturing once is deliberate —
+	// reactive values already cross as getters.
+	// svelte-ignore state_referenced_locally
+	const imageEdit = createImageEditCommitter({
+		getDoc,
+		getEditorEl,
+		widgetSelection,
+		controller,
+		events,
+		linkRef,
+		grammar
+	});
+
+	$effect(() => {
+		const root = getEditorEl();
+		if (!root) return;
+		const handlePointerDown = (e: PointerEvent) => {
+			const target = e.target as Element | null;
+			if (target?.closest(IMAGE_CHROME_SELECTOR)) return;
+			widgetSelection.clear();
+		};
+		root.addEventListener('pointerdown', handlePointerDown);
+		return () => root.removeEventListener('pointerdown', handlePointerDown);
+	});
+
+	$effect(() => imageEdit.attachWidgetSelectListener());
+
+	$effect(() => {
+		widgetSelection.getSelected(); // re-run + reposition when the selected widget changes
+		return imageEdit.syncOverlayToWidget(() => imageOverlayEl ?? null);
+	});
+
+	$effect(() => {
+		const root = getEditorEl();
+		if (!root) return;
+		installWidgetRangePainter({
+			editorRoot: root,
+			getSelectionIsCustomRendered,
+			getWidgetIsSelected: () => widgetSelection.getSelected() !== null,
+			lifetime
+		});
+	});
+</script>
+
+<!-- Selecting an image stays available in reading mode; the overlay is edit
+	affordances, so reading mode never mounts it. -->
+{#if widgetSelection.getSelected() && getPresentationMode() !== 'reading'}
+	{@const sel = widgetSelection.getSelected()!}
+	{@const ctx = imageEdit.getSelectedImageFields()}
+	{#if ctx?.widgetEl}
+		<div bind:this={imageOverlayEl} class="md-image-overlay" data-image-overlay>
+			<ImageResizeHandles
+				getWidgetEl={() => imageEdit.getSelectedImageFields()?.widgetEl ?? null}
+				editorContentWidth={imageEdit.getEditorContentWidth()}
+				editorEvents={events}
+				onCommit={imageEdit.commitImageResize}
+			/>
+			{#key `${sel.paragraphPath.join(',')}@${sel.sourceStart}`}
+				<ImageProperties
+					target={sel}
+					fields={imageFieldsFromInline(ctx.image)}
+					buildBytes={imageEdit.buildEditBytes}
+					onCommit={imageEdit.commitImageEdit}
+					onDismiss={imageEdit.dismissImagePopover}
+				/>
+			{/key}
+		</div>
+	{/if}
+{/if}

package/dist/components/image/ImageOverlayHost.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Document } from '../../core/nodes';
+import type { PresentationMode } from '../../presentation-mode';
+import type { UndoController } from '../../editor-actions/deps';
+import type { GrammarView } from '../../schema/block-openers';
+import type { EditorEvents } from '../../editor-events';
+import { type WidgetSelectionState } from './widget-selection-state.svelte';
+type $$ComponentProps = {
+    widgetSelection: WidgetSelectionState;
+    controller: UndoController;
+    events: EditorEvents;
+    getDoc: () => Document;
+    getEditorEl: () => HTMLElement | null;
+    getSelectionIsCustomRendered: () => boolean;
+    getPresentationMode: () => PresentationMode;
+    grammar?: GrammarView;
+    lifetime: AbortSignal;
+};
+declare const ImageOverlayHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageOverlayHost = ReturnType<typeof ImageOverlayHost>;
+export default ImageOverlayHost;

package/dist/components/image/ImageProperties.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { ImageFields } from '../../core/nodes';
+	import { IMAGE_CHROME_SELECTOR, type WidgetTarget } from './widget-selection-state.svelte';
+	import { IMAGE_PROPERTIES_LABEL } from '../../a11y-strings';
+
+	let {
+		target,
+		fields,
+		buildBytes,
+		onCommit,
+		onDismiss
+	}: {
+		target: WidgetTarget;
+		fields: ImageFields;
+		/** The popover's dirty check is a byte comparison, and the bytes are the write
+		 *  seam's to decide. */
+		buildBytes: (target: WidgetTarget, fields: ImageFields) => string | null;
+		onCommit: (target: WidgetTarget, newFields: ImageFields) => void;
+		onDismiss: () => void;
+	} = $props();
+
+	let url = $state(untrack(() => fields.url));
+	let alt = $state(untrack(() => fields.alt));
+	let titleInput = $state(untrack(() => fields.title ?? ''));
+	let titleTouched = $state(false);
+	let popoverEl: HTMLDivElement | undefined = $state();
+
+	// The seed is the BYTES, not the fields object: a rebuild mints a fresh one per render, so
+	// identity says nothing about whether the image moved.
+	let seedBytes = $state(untrack(() => buildBytes(target, fields)));
+
+	// The popover follows the document while it is open: an undo — or any write landing from
+	// outside this gesture — moves the image past the draft, and the dismiss commit would put the
+	// old bytes back. The in-flight draft is discarded rather than a committed change reverted.
+	$effect(() => {
+		const live = buildBytes(target, fields);
+		if (live === seedBytes) return;
+		seedBytes = live;
+		url = fields.url;
+		alt = fields.alt;
+		titleInput = fields.title ?? '';
+		titleTouched = false;
+	});
+
+	// The commit runs in $effect cleanup so dismiss, image-switch (key change) and
+	// programmatic clear all commit through one seam.
+	$effect(() => {
+		if (!popoverEl) return;
+		const handler = (e: PointerEvent) => {
+			const target = e.target as Element | null;
+			if (target?.closest(IMAGE_CHROME_SELECTOR)) return;
+			onDismiss();
+		};
+		document.addEventListener('pointerdown', handler, true);
+		return () => document.removeEventListener('pointerdown', handler, true);
+	});
+
+	$effect(() => {
+		return () => {
+			commitIfChanged();
+		};
+	});
+
+	function onTitleInput() {
+		titleTouched = true;
+	}
+
+	function commitIfChanged() {
+		const resolvedTitle = titleTouched
+			? titleInput.length > 0
+				? titleInput
+				: undefined
+			: fields.title;
+		const next: ImageFields = {
+			alt,
+			url,
+			...(resolvedTitle !== undefined ? { title: resolvedTitle } : {}),
+			...(fields.width !== undefined ? { width: fields.width } : {}),
+			...(fields.height !== undefined ? { height: fields.height } : {})
+		};
+		const newBytes = buildBytes(target, next);
+		if (newBytes === seedBytes) return;
+		onCommit(target, next);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			// Esc is cancel: discard local edits so the unmount commit short-circuits on
+			// byte-equality rather than persisting in-flight typing.
+			url = fields.url;
+			alt = fields.alt;
+			titleInput = fields.title ?? '';
+			titleTouched = false;
+			onDismiss();
+		}
+	}
+</script>
+
+<div
+	bind:this={popoverEl}
+	class="md-image-properties"
+	role="dialog"
+	aria-label={IMAGE_PROPERTIES_LABEL}
+	tabindex="-1"
+	onkeydown={handleKeyDown}
+>
+	<label>
+		<span>URL</span>
+		<input type="text" bind:value={url} />
+	</label>
+	<label>
+		<span>Alt</span>
+		<input type="text" bind:value={alt} />
+	</label>
+	<label>
+		<span>Title</span>
+		<input type="text" bind:value={titleInput} oninput={onTitleInput} />
+	</label>
+</div>
+
+<style>
+	.md-image-properties {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		background: var(--color-bg-elevated, #2a2a2a);
+		border: 1px solid var(--color-ui-muted, #a4a4a4);
+		border-radius: 4px;
+		padding: 8px;
+		display: grid;
+		gap: 6px;
+		min-width: 280px;
+		z-index: 100;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	}
+	label {
+		display: grid;
+		grid-template-columns: 60px 1fr;
+		align-items: center;
+		gap: 8px;
+	}
+	input {
+		background: var(--color-surface, #2d3033);
+		color: var(--color-text-secondary, #eee);
+		border: 1px solid var(--color-ui-muted, #a4a4a4);
+		padding: 4px 6px;
+		border-radius: var(--radius-ui, 3px);
+		font-family: inherit;
+		font-size: 12px;
+	}
+</style>

package/dist/components/image/ImageProperties.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ImageFields } from '../../core/nodes';
+import { type WidgetTarget } from './widget-selection-state.svelte';
+type $$ComponentProps = {
+    target: WidgetTarget;
+    fields: ImageFields;
+    /** The popover's dirty check is a byte comparison, and the bytes are the write
+     *  seam's to decide. */
+    buildBytes: (target: WidgetTarget, fields: ImageFields) => string | null;
+    onCommit: (target: WidgetTarget, newFields: ImageFields) => void;
+    onDismiss: () => void;
+};
+declare const ImageProperties: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageProperties = ReturnType<typeof ImageProperties>;
+export default ImageProperties;

package/dist/components/image/ImageResizeHandles.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import type { EditorEvents } from '../../editor-events';
+	import { clampWidth, snapWidth, resolveDraggedHeight, MIN_WIDTH } from './image-resize';
+	import { devWarn } from '../../dev-warn';
+
+	let {
+		getWidgetEl,
+		editorContentWidth,
+		editorEvents,
+		onCommit
+	}: {
+		getWidgetEl: () => HTMLElement | null;
+		editorContentWidth: number;
+		editorEvents: EditorEvents;
+		onCommit: (newWidth: number, newHeight: number | undefined) => void;
+	} = $props();
+
+	const SNAP_THRESHOLD_PX = 12;
+
+	let dragState: {
+		startX: number;
+		startWidth: number;
+		startHeight: number;
+		naturalWidth: number;
+		aspectLocked: boolean;
+		currentWidth: number;
+	} | null = $state(null);
+
+	// `md-image-broken` is toggled imperatively on the widget, which Svelte doesn't
+	// track, so a MutationObserver mirrors it into reactive state. Each commit rebuilds
+	// the widget DOM, so the observer re-attaches on every edit event.
+	let isBroken = $state(false);
+	$effect(() => {
+		let observer: MutationObserver | null = null;
+		let observed: HTMLElement | null = null;
+
+		const reattach = () => {
+			const widget = getWidgetEl();
+			if (widget === observed) return;
+			observer?.disconnect();
+			if (!widget) {
+				observer = null;
+				observed = null;
+				isBroken = false;
+				return;
+			}
+			isBroken = widget.classList.contains('md-image-broken');
+			observer = new MutationObserver(() => {
+				isBroken = widget.classList.contains('md-image-broken');
+			});
+			observer.observe(widget, { attributes: true, attributeFilter: ['class'] });
+			observed = widget;
+		};
+
+		reattach();
+		const unsub = editorEvents.on('edit', reattach);
+		return () => {
+			observer?.disconnect();
+			unsub();
+		};
+	});
+
+	function imgEl(): HTMLImageElement | null {
+		return getWidgetEl()?.querySelector('img') ?? null;
+	}
+
+	function startDrag(e: PointerEvent) {
+		const img = imgEl();
+		if (!img) return;
+		const { width: startWidth, height: startHeight } = img.getBoundingClientRect();
+		// Unmeasurable width makes every snap run against 0 and commit a tiny image
+		// whichever way the drag goes; bail before pointer capture.
+		if (startWidth < MIN_WIDTH || editorContentWidth < MIN_WIDTH) return;
+		e.preventDefault();
+		e.stopPropagation();
+		(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		dragState = {
+			startX: e.clientX,
+			startWidth,
+			startHeight,
+			naturalWidth: img.naturalWidth,
+			aspectLocked: !e.shiftKey,
+			currentWidth: startWidth
+		};
+	}
+
+	function moveDrag(e: PointerEvent) {
+		if (!dragState) return;
+		// Reflow mid-drag (a sibling image settling, a scrollbar appearing) can
+		// transiently zero the content width; hold the last good width instead of
+		// snapping the image to nothing.
+		if (editorContentWidth < MIN_WIDTH) return;
+		const dx = e.clientX - dragState.startX;
+		const proposed = dragState.startWidth + dx;
+		const clamped = clampWidth(proposed, editorContentWidth);
+		const snapped = snapWidth(clamped, editorContentWidth, SNAP_THRESHOLD_PX);
+		dragState.currentWidth = snapped;
+		const img = imgEl();
+		if (!img) return;
+		img.style.width = `${snapped}px`;
+		// Shift unlocks the aspect: the height stays where the user found it and the image
+		// distorts. Locked, the stylesheet's `height: auto` derives it from the new width.
+		img.style.height = dragState.aspectLocked ? '' : `${dragState.startHeight}px`;
+	}
+
+	function endDrag(e: PointerEvent) {
+		if (!dragState) return;
+		const {
+			currentWidth: finalWidth,
+			startWidth,
+			startHeight,
+			startX,
+			aspectLocked,
+			naturalWidth
+		} = dragState;
+		dragState = null;
+		(e.target as HTMLElement).releasePointerCapture(e.pointerId);
+		// Click-and-release with no drag: skip commit so undo stack stays clean.
+		if (Math.abs(finalWidth - startWidth) < 1) return;
+		// Report the "image suddenly becomes tiny on release" symptom with the upstream
+		// signals that would explain it, so the next occurrence is diagnosable.
+		if (finalWidth <= MIN_WIDTH && Math.abs(e.clientX - startX) > 50) {
+			devWarn('image-resize', 'suspicious commit', {
+				startWidth,
+				finalWidth,
+				dx: e.clientX - startX,
+				editorContentWidth,
+				naturalWidth,
+				imgRectWidth: imgEl()?.getBoundingClientRect().width,
+				imgWidthAttr: imgEl()?.getAttribute('width')
+			});
+		}
+		onCommit(Math.round(finalWidth), resolveDraggedHeight(aspectLocked, startHeight));
+	}
+
+	function cancelDrag(e: PointerEvent) {
+		if (!dragState) return;
+		// Fall back to the widget's committed width/height attributes.
+		const img = imgEl();
+		if (img) {
+			img.style.width = '';
+			img.style.height = '';
+		}
+		dragState = null;
+		(e.target as HTMLElement).releasePointerCapture(e.pointerId);
+	}
+</script>
+
+{#if !isBroken}
+	<div
+		class="md-resize-handle md-resize-handle-right"
+		role="presentation"
+		onpointerdown={startDrag}
+		onpointermove={moveDrag}
+		onpointerup={endDrag}
+		onpointercancel={cancelDrag}
+	></div>
+	<div
+		class="md-resize-handle md-resize-handle-corner"
+		role="presentation"
+		onpointerdown={startDrag}
+		onpointermove={moveDrag}
+		onpointerup={endDrag}
+		onpointercancel={cancelDrag}
+	></div>
+{/if}
+
+<style>
+	.md-resize-handle {
+		position: absolute;
+		width: 8px;
+		height: 8px;
+		background: var(--color-accent, #567b67);
+		border: 1px solid #fff;
+		z-index: 10;
+		cursor: ew-resize;
+	}
+	.md-resize-handle-right {
+		right: -4px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+	.md-resize-handle-corner {
+		right: -4px;
+		bottom: -4px;
+		cursor: nwse-resize;
+	}
+</style>

package/dist/components/image/ImageResizeHandles.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { EditorEvents } from '../../editor-events';
+type $$ComponentProps = {
+    getWidgetEl: () => HTMLElement | null;
+    editorContentWidth: number;
+    editorEvents: EditorEvents;
+    onCommit: (newWidth: number, newHeight: number | undefined) => void;
+};
+declare const ImageResizeHandles: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageResizeHandles = ReturnType<typeof ImageResizeHandles>;
+export default ImageResizeHandles;

package/dist/components/image/image-edit-commit.d.ts

@@ -0,0 +1,38 @@
+import type { Document, ImageFields, InlineNode } from '../../core/nodes';
+import type { LinkReferenceResolverRef } from '../../editor-keys';
+import type { UndoController } from '../../editor-actions/deps';
+import type { EditorEvents } from '../../editor-events';
+import type { GrammarView } from '../../schema/block-openers';
+import type { WidgetSelectionState, WidgetTarget } from './widget-selection-state.svelte';
+export interface ImageEditCommitterDeps {
+    getDoc: () => Document;
+    getEditorEl: () => HTMLElement | null;
+    widgetSelection: WidgetSelectionState;
+    controller: UndoController;
+    events: EditorEvents;
+    linkRef?: LinkReferenceResolverRef;
+    /** The instance's grammar, for the leaf's own raw-write rule. Absent = the global grammar. */
+    grammar?: GrammarView;
+}
+export interface SelectedImageFields {
+    image: InlineNode;
+    widgetEl: HTMLElement | null;
+}
+export interface ImageEditCommitter {
+    getSelectedImageFields(): SelectedImageFields | null;
+    /**
+     * `target` is captured at popover-mount time, not read from the live
+     * widgetSelection: a popover commit can fire after the user clicked a different
+     * widget, and writing to the new selection cross-pollinates the two images.
+     */
+    commitImageEdit(target: WidgetTarget, newFields: ImageFields): void;
+    /** The bytes `commitImageEdit` would write, or `null` if it would decline — the
+     *  popover's dirty check compares against these. */
+    buildEditBytes(target: WidgetTarget, newFields: ImageFields): string | null;
+    commitImageResize(newWidth: number, newHeight: number | undefined): void;
+    dismissImagePopover(): void;
+    getEditorContentWidth(): number;
+    attachWidgetSelectListener(): () => void;
+    syncOverlayToWidget(getOverlay: () => HTMLElement | null): () => void;
+}
+export declare function createImageEditCommitter(deps: ImageEditCommitterDeps): ImageEditCommitter;