@voithos-labs/aragonite 0.10.1

package/dist/components/BlockHost.svelte

@@ -0,0 +1,328 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import {
+		resolveBlockSurface,
+		type AmbientPrefix,
+		type BlockComponent,
+		type BlockComponentExports
+	} from '../block-component';
+	import type { NodeView } from '../core/node-views';
+	import type { BlockDecoration } from '../decorations/types';
+	import { acceptedBlockAttrs } from '../decorations/reserved-attrs';
+	import { mountDecorationWidget } from '../decorations/widget-dom';
+	import SelectionOverlay from './SelectionOverlay.svelte';
+	import DecorationOverlay from './DecorationOverlay.svelte';
+	import BlockDragHandle from './BlockDragHandle.svelte';
+	import TextEditableBlock from './blocks/text/TextEditableBlock.svelte';
+	import { defaultRegistryView } from '../schema/registry-view';
+	import { FAILED_BLOCK_LABEL } from '../a11y-strings';
+	import {
+		EDITOR_DOC_KEY,
+		EDITOR_POLICIES_KEY,
+		EDITOR_SERVICES_KEY,
+		RECORD_BLOCK_HEIGHT_KEY,
+		type BlockMeasureChannel,
+		type EditorDoc,
+		type EditorPolicies,
+		type EditorServices
+	} from '../editor-keys';
+	import { useMountGauge } from '../perf/use-mount-gauge.svelte';
+	import { publishRefSlot, type RefSlots } from '../reactivity/publish-ref.svelte';
+	import { devWarn } from '../dev-warn';
+
+	let {
+		node,
+		index,
+		id,
+		parentPath = [],
+		ambientPrefix = '',
+		slots,
+		reorderable = false
+	}: {
+		node: NodeView;
+		index: number;
+		id: string;
+		parentPath?: number[];
+		ambientPrefix?: AmbientPrefix;
+		slots?: RefSlots<BlockComponent>;
+		reorderable?: boolean;
+	} = $props();
+
+	// Optional throughout: bare unit harnesses mount BlockHost without the editor
+	// shell, so every read here (and both overlays') is written for absence.
+	const services = getContext<EditorServices | undefined>(EDITOR_SERVICES_KEY);
+	const editorEvents = services?.events;
+	const engine = services?.decorations;
+	// Per-instance enablement reaches the render path through the view; bare mounts
+	// read the global default.
+	const registryView = services?.registryView ?? defaultRegistryView;
+	const getDoc = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.doc;
+	// Stable object, so a plain read rather than a getter.
+	const rects = services?.rects;
+	const getDragHandles = getContext<EditorPolicies | undefined>(
+		EDITOR_POLICIES_KEY
+	)?.blockDragHandles;
+	// $derived, not a mount-time snapshot: a runtime prop toggle must reach blocks
+	// that window in after the change.
+	const dragHandles = $derived(getDragHandles?.() ?? false);
+
+	let myPath = $derived([...parentPath, index]);
+
+	const NO_BLOCK_DECORATIONS: BlockDecoration[] = [];
+	const blockDecs = $derived(
+		engine ? engine.blockDecorationsForPath(myPath) : NO_BLOCK_DECORATIONS
+	);
+
+	let descriptor = $derived(registryView.descriptor(node.kind));
+	let isContainer = $derived(descriptor.isContainer);
+	// Who paints this block's rects, decided ONCE here and handed to both overlays —
+	// duplicated, the two drift and a container paints over its own children. Delegation
+	// needs children with hosts: a childless container and a grid have none.
+	let delegatesPainting = $derived(
+		isContainer && (node.children?.length ?? 0) > 0 && descriptor.containerContract !== 'grid'
+	);
+
+	let hostEl: HTMLElement | null = $state(null);
+	// The one point that resolves a block's published surface (leaf exports vs
+	// containerApi); every consumer of this host's ref reads what it returns.
+	let instance: BlockComponentExports | undefined = $state();
+	let ref: BlockComponent | undefined = $derived(resolveBlockSurface(instance));
+
+	// Neither conjunct is redundant though both look it: the shim gives every container
+	// `measurePartialRects`, so that term guards only a hand-rolled one omitting it, and
+	// the delegation term guards a hand-rolled child-bearing non-grid container.
+	let containerPaintsRects = $derived(
+		isContainer && !delegatesPainting && !!ref?.measurePartialRects
+	);
+
+	let entry = $derived(registryView.component(node.kind));
+
+	// A kind with no registered component falls back to the raw-editable surface below
+	// rather than silently rendering nothing.
+	$effect(() => {
+		if (!entry) devWarn('block-host', 'no component for kind, rendering raw', node.kind);
+	});
+
+	// The error boundary sticks on its fallback until reset() runs, so restoring
+	// DIFFERENT bytes retries the render while an unchanged raw can't loop.
+	// Plain lets, not $state: the effect keys on node.raw alone and reads these live.
+	let failedRaw: string | null = null;
+	let retryFailedRender: (() => void) | null = null;
+
+	function onRenderError(error: unknown, reset: () => void): void {
+		failedRaw = node.raw;
+		retryFailedRender = reset;
+		editorEvents?.emit('error', { origin: 'render', error, context: { path: myPath } });
+	}
+
+	$effect(() => {
+		const raw = node.raw;
+		if (retryFailedRender && failedRaw !== null && raw !== failedRaw) {
+			const retry = retryFailedRender;
+			retryFailedRender = null;
+			failedRaw = null;
+			retry();
+		}
+	});
+
+	$effect(() => {
+		if (!slots) return;
+		return publishRefSlot(slots, index, ref, hostEl);
+	});
+
+	// No `focus` means neither sanctioned shape was published. `defineBlockComponent`
+	// types this; the guard catches a registration that got in through a cast.
+	$effect(() => {
+		if (ref && typeof ref.focus !== 'function')
+			devWarn('block-host', 'component published no BlockComponent surface', node.kind);
+	});
+
+	const measureChannel = getContext<BlockMeasureChannel | undefined>(RECORD_BLOCK_HEIGHT_KEY);
+
+	useMountGauge();
+
+	// Enroll in the scope's batched measure pass rather than measuring inline: a
+	// per-block read interleaved with a sibling's model write costs one reflow per
+	// mounted block on a fling (VR-4). Re-registers on path change.
+	$effect(() => {
+		void myPath;
+		if (!measureChannel) return;
+		return measureChannel.register(myPath, index, id, () =>
+			hostEl ? hostEl.getBoundingClientRect().height : 0
+		);
+	});
+
+	// An edit resizes this one block; re-measure it directly. Skip the MOUNT run — the
+	// batched pass above owns mount measurement, and a per-block read on a fling is the
+	// thrash it exists to remove (VR-4).
+	let firstRun = true;
+	$effect(() => {
+		void node.raw;
+		if (firstRun) {
+			firstRun = false;
+			return;
+		}
+		measureChannel?.measureNow(id);
+	});
+
+	// A block can grow after mount without its `raw` changing (async content decoding
+	// in), which the effect above never sees, and overflow-anchor is off so the growth
+	// would slide the viewport. The scope gates on the height it already recorded.
+	$effect(() => {
+		if (!hostEl || !measureChannel) return;
+		const observer = new ResizeObserver((entries) => {
+			const box = entries[0]?.borderBoxSize?.[0];
+			const height = box ? box.blockSize : entries[0]?.contentRect.height;
+			if (height != null) measureChannel.measureOnResize(id, height);
+		});
+		observer.observe(hostEl);
+		return () => observer.disconnect();
+	});
+
+	// Set imperatively, not spread, so a source change or dispose removes exactly the
+	// keys it applied and leaves the host's own attributes alone.
+	$effect(() => {
+		const decs = blockDecs;
+		const el = hostEl;
+		if (!el || decs.length === 0) return;
+		const appliedKeys: string[] = [];
+		for (const dec of decs) {
+			for (const [key, value] of acceptedBlockAttrs(dec.attrs, myPath)) {
+				el.setAttribute(key, value);
+				appliedKeys.push(key);
+			}
+		}
+		return () => {
+			for (const key of appliedKeys) el.removeAttribute(key);
+		};
+	});
+
+	// Badges prepend BEFORE the block component, so BLOCK_CONTENT_SELECTOR
+	// (block-content-selector.ts) excludes `.decoration-badge` — keep it in step if
+	// this wrapper class changes.
+	$effect(() => {
+		const decs = blockDecs;
+		const el = hostEl;
+		if (!el) return;
+		const destroys: Array<() => void> = [];
+		const badges = document.createDocumentFragment();
+		for (const dec of decs) {
+			if (!dec.badge) continue;
+			const handle = mountDecorationWidget(dec.badge, dec, (error) =>
+				editorEvents?.emit('error', { origin: 'render', error, context: { path: myPath } })
+			);
+			if (!handle) continue;
+			const wrapper = document.createElement('div');
+			wrapper.className = 'decoration-badge';
+			wrapper.setAttribute('contenteditable', 'false');
+			wrapper.appendChild(handle.el);
+			badges.appendChild(wrapper);
+			destroys.push(() => {
+				handle.destroy();
+				wrapper.remove();
+			});
+		}
+		if (destroys.length === 0) return;
+		el.insertBefore(badges, el.firstChild);
+		return () => {
+			for (const destroy of destroys) destroy();
+		};
+	});
+</script>
+
+<div
+	class={[
+		'block-host',
+		{ 'reorder-host': reorderable && dragHandles },
+		...blockDecs.flatMap((d) => d.class ?? [])
+	]}
+	data-block-path={JSON.stringify(myPath)}
+	data-block-kind={node.kind}
+	bind:this={hostEl}
+>
+	<svelte:boundary onerror={onRenderError}>
+		{#if entry}
+			{@const Comp = entry.component}
+			<Comp
+				{node}
+				{index}
+				{myPath}
+				{ambientPrefix}
+				document={getDoc?.()}
+				{rects}
+				bind:this={instance}
+				{...entry.extraProps?.(node) ?? {}}
+			/>
+		{:else}
+			<TextEditableBlock
+				{node}
+				{index}
+				{myPath}
+				{ambientPrefix}
+				document={getDoc?.()}
+				{rects}
+				bind:this={instance}
+				blockClass="raw-block"
+			/>
+		{/if}
+
+		{#snippet failed()}
+			<div class="failed-block" data-failed-block role="group" aria-label={FAILED_BLOCK_LABEL}>
+				<span class="failed-block-notice">⚠ block failed to render</span>
+				<pre class="failed-block-raw">{node.raw}</pre>
+			</div>
+		{/snippet}
+	</svelte:boundary>
+	<!-- hostEl is null until mount; safe because SelectionState is only populated by
+		 user gesture, and the overlay's $effect guards on !blockEl. -->
+	<SelectionOverlay
+		path={myPath}
+		blockRef={ref}
+		blockEl={hostEl}
+		{delegatesPainting}
+		{containerPaintsRects}
+	/>
+	<DecorationOverlay
+		path={myPath}
+		blockRef={ref}
+		blockEl={hostEl}
+		{isContainer}
+		{containerPaintsRects}
+	/>
+	<!-- Rendered LAST so the block-el lookup still resolves block content as its
+		 first match. -->
+	{#if reorderable && dragHandles}
+		<BlockDragHandle />
+	{/if}
+</div>
+
+<style>
+	.block-host {
+		position: relative;
+	}
+
+	/* Pure-CSS hover reveal: no per-block reactive state on a path whose cost scales
+	   with mounted-component count. Global because reorder hosts nest; the `:not(:has(
+	   ...))` reveals the innermost hovered handle, not a staircase of ancestors. */
+	:global(.reorder-host:hover:not(:has(.reorder-host:hover)) > .block-drag-handle) {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.failed-block {
+		border: 1px dashed var(--color-ui-muted, #a4a4a4);
+		border-radius: 4px;
+		padding: 0.25rem 0.5rem;
+		opacity: 0.8;
+	}
+	.failed-block-notice {
+		display: block;
+		font-size: 0.85em;
+		color: var(--color-text-muted, #aaa);
+	}
+	.failed-block-raw {
+		margin: 0.25rem 0 0;
+		white-space: pre-wrap;
+		font-family: var(--font-editor, ui-monospace, monospace);
+	}
+</style>

package/dist/components/BlockHost.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type AmbientPrefix, type BlockComponent } from '../block-component';
+import type { NodeView } from '../core/node-views';
+import { type RefSlots } from '../reactivity/publish-ref.svelte';
+type $$ComponentProps = {
+    node: NodeView;
+    index: number;
+    id: string;
+    parentPath?: number[];
+    ambientPrefix?: AmbientPrefix;
+    slots?: RefSlots<BlockComponent>;
+    reorderable?: boolean;
+};
+declare const BlockHost: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockHost = ReturnType<typeof BlockHost>;
+export default BlockHost;

package/dist/components/BlockList.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { AmbientPrefix, BlockComponent } from '../block-component';
+	import type { BlockEditActions, FocusActions } from '../action-contracts';
+	import type { NodeView } from '../core/node-views';
+	import {
+		BLOCK_EDIT_KEY,
+		EDITOR_SERVICES_KEY,
+		FOCUS_KEY,
+		type EditorServices
+	} from '../editor-keys';
+	import type { WindowResult } from '../reactivity/block-window.svelte';
+	import type { RefSlots } from '../reactivity/publish-ref.svelte';
+	import { isProseKind } from '../core/inline';
+	import { gapEligibleAmong } from '../selection/gap-caret';
+	import { pathsEqual } from '../selection/path-math';
+	import { sliceWindow } from '../reactivity/window-slice';
+	import BlockHost from './BlockHost.svelte';
+	import GapCaret from './GapCaret.svelte';
+
+	// `slots` is owner-supplied: a `bind:` $bindable array desyncs from the owner's state
+	// across cross-effect mutations. `reorderable` is true only when these children ARE
+	// reorder units (document root, list, blockquote).
+	let {
+		children,
+		blockIds,
+		slots,
+		parentPath = [],
+		ambientPrefixForFirst = '',
+		window: win = undefined,
+		reorderable = false
+	}: {
+		children: readonly NodeView[];
+		blockIds: string[];
+		slots: RefSlots<BlockComponent>;
+		parentPath?: number[];
+		ambientPrefixForFirst?: AmbientPrefix;
+		window?: WindowResult;
+		reorderable?: boolean;
+	} = $props();
+
+	let active = $derived(win?.active ?? false);
+	let bounds = $derived(sliceWindow(children.length, win));
+	let start = $derived(bounds.start);
+	let end = $derived(bounds.end);
+	let slice = $derived(children.slice(start, end));
+
+	// Read like BlockHost's, `| undefined` included: a bare-mounted list in a harness provides
+	// none. The two action bundles are read HERE because they are scope-local — this list's own
+	// position answers them, unlike the root facets GapCaret reads for itself.
+	const selection = getContext<EditorServices | undefined>(EDITOR_SERVICES_KEY)?.selection;
+	const focusActions = getContext<FocusActions | undefined>(FOCUS_KEY);
+	const blockEdit = getContext<BlockEditActions | undefined>(BLOCK_EDIT_KEY);
+
+	// Only a surface that paints inline content paints one, so the prefix is withheld from a
+	// first child that would ignore it — a code block, a nested list, a container. Withheld, not
+	// handed over and dropped: a prefix a child does not paint but does count is an offset the
+	// walk has no bytes for. Painting the marker for those shapes is open (GH #43).
+	function ambientFor(node: NodeView): AmbientPrefix {
+		return isProseKind(node.kind) ? ambientPrefixForFirst : '';
+	}
+
+	// The boundary index the live gap addresses in THIS scope, when the slice reaches it.
+	// Eligibility is re-read against the children as they stand: the state cannot see an edit
+	// that changed the kinds facing this boundary, and a caret must never paint where no
+	// gesture could have parked one.
+	let gapIndex = $derived.by(() => {
+		const gap = selection?.gapCaret;
+		if (!gap || !pathsEqual(gap.parentPath, parentPath)) return null;
+		if (gap.index < start || gap.index > end) return null;
+		return gapEligibleAmong(children, gap.index, parentPath.length > 0) ? gap.index : null;
+	});
+</script>
+
+<div class="block-list">
+	{#if active}
+		<div class="vr-spacer" style="height: {win!.topSpacerPx}px"></div>
+	{/if}
+	{#each slice as node, localIndex (blockIds[start + localIndex])}
+		{@const absoluteIndex = start + localIndex}
+		<!-- ABSOLUTE-INDEX INVARIANT: index/id/key are `start + localIndex`, never the
+		     local loop index — paths and structural ops key off it. -->
+		{#if gapIndex === absoluteIndex}
+			<GapCaret index={absoluteIndex} {focusActions} {blockEdit} />
+		{/if}
+		<BlockHost
+			{node}
+			index={absoluteIndex}
+			id={blockIds[absoluteIndex]}
+			{parentPath}
+			ambientPrefix={absoluteIndex === 0 ? ambientFor(node) : ''}
+			{slots}
+			{reorderable}
+		/>
+	{/each}
+	<!-- The slice's trailing boundary: the scope end when the slice reaches it, and
+	     otherwise the seam with the next windowed-out block. -->
+	{#if gapIndex === end}
+		<GapCaret index={end} {focusActions} {blockEdit} />
+	{/if}
+	{#if active}
+		<div class="vr-spacer" style="height: {win!.bottomSpacerPx}px"></div>
+	{/if}
+</div>
+
+<style>
+	.block-list {
+		display: flex;
+		flex-direction: column;
+	}
+	.vr-spacer {
+		flex: 0 0 auto;
+	}
+</style>

package/dist/components/BlockList.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { AmbientPrefix, BlockComponent } from '../block-component';
+import type { NodeView } from '../core/node-views';
+import type { WindowResult } from '../reactivity/block-window.svelte';
+import type { RefSlots } from '../reactivity/publish-ref.svelte';
+type $$ComponentProps = {
+    children: readonly NodeView[];
+    blockIds: string[];
+    slots: RefSlots<BlockComponent>;
+    parentPath?: number[];
+    ambientPrefixForFirst?: AmbientPrefix;
+    window?: WindowResult;
+    reorderable?: boolean;
+};
+declare const BlockList: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockList = ReturnType<typeof BlockList>;
+export default BlockList;

package/dist/components/DecorationOverlay.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { BlockComponent } from '../block-component';
+	import {
+		EDITOR_DOC_KEY,
+		EDITOR_SERVICES_KEY,
+		type EditorDoc,
+		type EditorServices
+	} from '../editor-keys';
+	import type { MarkDecoration } from '../decorations/types';
+	import { collapseCellMarks, type IndexedDecoration } from '../decorations/buckets';
+	import { wireOverlayRemeasure } from '../cursor/overlay-remeasure';
+
+	let {
+		path,
+		blockRef,
+		blockEl,
+		isContainer = false,
+		containerPaintsRects = false
+	}: {
+		path: number[];
+		blockRef: BlockComponent | undefined;
+		blockEl: HTMLElement | null | undefined;
+		/** Containers paint nothing — children self-paint — except grids, whose cells
+		 *  aren't BlockHosted and so paint whole-cell marks here. */
+		isContainer?: boolean;
+		/** Decided at BlockHost, which hands the same value to SelectionOverlay. */
+		containerPaintsRects?: boolean;
+	} = $props();
+
+	const services = getContext<EditorServices | undefined>(EDITOR_SERVICES_KEY);
+	const engine = services?.decorations;
+	// Optional for the same reason `services` is: a bare mount provides no shell.
+	const getEditorRoot = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.editorRoot;
+
+	/** A mark's `interactive.onClick` is author code on a user gesture, so it routes to
+	 *  the same error seam as every other decoration entry point (editor.md §12). */
+	function runInteraction(run: () => void): void {
+		try {
+			run();
+		} catch (error) {
+			services?.events.emit('error', { origin: 'decoration', error, context: { path } });
+		}
+	}
+
+	// A grid supplies cellRect, so its descendant cell marks — which get no BlockHost
+	// overlay of their own — paint as whole cells here.
+	const containerPaintsCells = $derived(isContainer && !!blockRef?.cellRect);
+
+	interface Painted {
+		left: number;
+		top: number;
+		width: number;
+		height: number;
+		cls: string;
+		attrs?: Record<string, string>;
+		onClick?: (ev: MouseEvent) => void;
+	}
+	let rects = $state<Painted[]>([]);
+
+	$effect(() => {
+		const eng = engine,
+			ref = blockRef,
+			el = blockEl;
+		// Read the bucket up front so this effect registers the reactive decoration set
+		// as a dependency: `sourceCount` is a plain counter, so a source added after
+		// mount would otherwise never re-run it.
+		const marks = eng
+			? containerPaintsCells
+				? eng.marksForDescendants(path)
+				: eng.marksForPath(path)
+			: [];
+		if (!eng || eng.sourceCount === 0 || !el) {
+			rects = [];
+			return;
+		}
+		if (isContainer && !containerPaintsCells && !containerPaintsRects) {
+			rects = [];
+			return;
+		}
+
+		function measure(): void {
+			if (!el) return;
+			const blockRect = el.getBoundingClientRect();
+			rects = containerPaintsCells
+				? measureCells(marks, blockRect)
+				: measureLeaf(marks, ref, blockRect);
+		}
+
+		function measureLeaf(
+			leafMarks: IndexedDecoration<MarkDecoration>[],
+			leaf: BlockComponent | undefined,
+			blockRect: DOMRect
+		): Painted[] {
+			if (!leaf?.measurePartialRects) return [];
+			const out: Painted[] = [];
+			for (const { dec } of leafMarks) {
+				for (const r of leaf.measurePartialRects(dec.start, dec.end)) {
+					// A collapsed range still emits a degenerate zero-width rect at a line
+					// boundary, which would paint an invisible sliver.
+					if (r.width <= 0) continue;
+					out.push(toLocal(r, blockRect, dec));
+				}
+			}
+			return out;
+		}
+
+		// Several marks in one cell collapse to a single rect whose class is their union.
+		function measureCells(
+			descMarks: IndexedDecoration<MarkDecoration>[],
+			blockRect: DOMRect
+		): Painted[] {
+			if (!ref?.cellRect) return [];
+			const out: Painted[] = [];
+			for (const { rowIdx, colIdx, class: cls, dec } of collapseCellMarks(descMarks, path.length)) {
+				const r = ref.cellRect(rowIdx, colIdx);
+				if (r) out.push(toLocal(r, blockRect, dec, cls));
+			}
+			return out;
+		}
+
+		function toLocal(
+			r: DOMRect,
+			blockRect: DOMRect,
+			dec: MarkDecoration,
+			cls = dec.class
+		): Painted {
+			const interactive = dec.interactive;
+			return {
+				left: r.left - blockRect.left,
+				top: r.top - blockRect.top,
+				width: r.width,
+				height: r.height,
+				cls,
+				attrs: dec.attrs,
+				onClick: interactive
+					? (ev: MouseEvent) => runInteraction(() => interactive.onClick(dec, ev))
+					: undefined
+			};
+		}
+
+		const editorRoot = getEditorRoot?.() ?? null;
+		return wireOverlayRemeasure({ el, editorRoot, blockRef: ref, measure });
+	});
+</script>
+
+{#each rects as r, i (i)}
+	<div
+		{...r.attrs}
+		class="decoration-overlay {r.cls}"
+		class:decoration-overlay-interactive={!!r.onClick}
+		contenteditable="false"
+		style="left:{r.left}px;top:{r.top}px;width:{r.width}px;height:{r.height}px;"
+		onclick={r.onClick}
+	></div>
+{/each}

package/dist/components/DecorationOverlay.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { BlockComponent } from '../block-component';
+type $$ComponentProps = {
+    path: number[];
+    blockRef: BlockComponent | undefined;
+    blockEl: HTMLElement | null | undefined;
+    /** Containers paint nothing — children self-paint — except grids, whose cells
+     *  aren't BlockHosted and so paint whole-cell marks here. */
+    isContainer?: boolean;
+    /** Decided at BlockHost, which hands the same value to SelectionOverlay. */
+    containerPaintsRects?: boolean;
+};
+declare const DecorationOverlay: import("svelte").Component<$$ComponentProps, {}, "">;
+type DecorationOverlay = ReturnType<typeof DecorationOverlay>;
+export default DecorationOverlay;