@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/grid/dist/Grid.js

@@ -0,0 +1,511 @@
+import { onMounted, onUnmounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { watch } from "../../r-html/dist/observable/index.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { lightTheme } from "./theme.js";
+import { DEFAULT_FONT } from "./font.js";
+import { isApplePlatform, keyAction } from "./model/keys.js";
+import { clickCell, isSelected, moveActive, selectCell } from "./model/selection.js";
+import { scrollMapping } from "./model/viewport.js";
+import { baselineOffset } from "./scene/draw/context.js";
+import { blankAt, cellArea, cellRect, createPointerInput, hitTest, scrollsWithin, wheelScroll } from "./input/pointer.js";
+import { createEditingInput, holdInside, placeEditor } from "./input/editing.js";
+import { markDirty } from "../../r-html-konva/dist/batchDraw.js";
+import { renderKonva } from "../../r-html-konva/dist/host.js";
+import { renderGridScene } from "./scene/GridScene.js";
+import { createSceneState } from "./scene/state.js";
+import { Stage } from "konva/lib/Stage";
+//#region ../grid/dist/Grid.js
+var CONTAINER_CLASS = "dineug-grid";
+var SCROLLER_CLASS = "dineug-grid-scroller";
+var GRID_CSS = `.${CONTAINER_CLASS}{overflow:hidden;overflow:clip}.${SCROLLER_CLASS}{scrollbar-width:none}.${SCROLLER_CLASS}::-webkit-scrollbar{display:none}`;
+var CONTAINER_STYLE = {
+	position: "relative",
+	width: "100%",
+	height: "100%"
+};
+var STAGE_STYLE = {
+	position: "absolute",
+	left: "0",
+	top: "0",
+	width: "100%",
+	height: "100%",
+	overflow: "hidden"
+};
+var SCROLLER_STYLE = {
+	position: "absolute",
+	inset: "0",
+	overflow: "auto",
+	"overscroll-behavior": "contain",
+	outline: "none"
+};
+var FOCUS_STYLE = {
+	position: "absolute",
+	margin: "0",
+	padding: "0",
+	border: "0",
+	outline: "none",
+	resize: "none",
+	overflow: "hidden",
+	"box-sizing": "border-box",
+	"white-space": "pre",
+	background: "transparent",
+	opacity: "0",
+	"pointer-events": "none",
+	"caret-color": "transparent"
+};
+var SLOT_STYLE = {
+	position: "absolute",
+	left: "0",
+	top: "0",
+	width: "0",
+	height: "0"
+};
+var EDITOR_INSETS = Object.freeze({
+	left: 1,
+	top: 1,
+	right: 2,
+	bottom: 2
+});
+var STRICT = Object.freeze({
+	rows: 0,
+	cols: 0
+});
+var px = (value) => `${value}px`;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var boxStyle = (box) => ({
+	left: px(box.x),
+	top: px(box.y),
+	width: px(box.width),
+	height: px(box.height)
+});
+function focusStyle(state, open, font) {
+	if (!open || open.custom) {
+		const box = holdInside(cellRect(state, state.selection.active), cellArea(state));
+		return {
+			...FOCUS_STYLE,
+			...boxStyle(box),
+			font
+		};
+	}
+	const { box, clip, shown } = placeEditor(state, open.cell, EDITOR_INSETS);
+	const color = open.style?.color ?? state.theme.text;
+	const { ascent, descent } = state.metrics;
+	const top = baselineOffset(state.rowHeight, state.metrics) - ascent;
+	return {
+		...FOCUS_STYLE,
+		...boxStyle(box),
+		font,
+		padding: `${px(Math.max(0, top - EDITOR_INSETS.top))} ${px(8 - EDITOR_INSETS.left)} 0`,
+		"line-height": px(ascent + descent),
+		background: open.style?.background ?? state.theme.background,
+		color,
+		"caret-color": color,
+		opacity: shown ? "1" : "0",
+		"pointer-events": shown ? "auto" : "none",
+		"clip-path": clip ? `inset(${px(clip.top)} ${px(clip.right)} ${px(clip.bottom)} ${px(clip.left)})` : "none"
+	};
+}
+function slotStyle(state, open) {
+	if (!open?.custom) return SLOT_STYLE;
+	const { box, shown } = placeEditor(state, open.cell);
+	return {
+		...SLOT_STYLE,
+		...boxStyle(box),
+		opacity: shown ? "1" : "0",
+		"pointer-events": shown ? "auto" : "none"
+	};
+}
+function farCorner(selection) {
+	const { active, ranges } = selection;
+	const range = ranges[ranges.length - 1];
+	if (!range) return active;
+	const far = (anchor, start, end) => anchor - start > end - anchor ? start : end;
+	return {
+		row: far(active.row, range.startRow, range.endRow),
+		col: far(active.col, range.startCol, range.endCol)
+	};
+}
+var sameViewport = (a, b) => a.rowStart === b.rowStart && a.rowEnd === b.rowEnd && a.colStart === b.colStart && a.colEnd === b.colEnd;
+var Grid = (props) => {
+	const containerRef = createRef();
+	const stageRef = createRef();
+	const scrollerRef = createRef();
+	const spacerRef = createRef();
+	const focusRef = createRef();
+	const slotRef = createRef();
+	const apple = isApplePlatform(navigator.platform);
+	let selection = selectCell({
+		row: 0,
+		col: 0
+	});
+	const scene = createSceneState({
+		rowCount: props.rowCount,
+		columns: props.columns,
+		getCell: props.getCell,
+		getCellStyle: props.getCellStyle,
+		frozenColumns: props.frozenColumns,
+		rowHeight: props.rowHeight,
+		theme: props.theme,
+		font: props.font,
+		version: props.version,
+		selection
+	});
+	const disposers = [];
+	let mounted = false;
+	let pointer = null;
+	let lastPointerType = "";
+	let ratio = 0;
+	let held = null;
+	let unsynced = false;
+	let viewportFrame = 0;
+	let viewport = null;
+	let resolution = null;
+	const changeSelection = (next) => {
+		if (next === selection) return;
+		selection = next;
+		scene.setSelection(next);
+		props.onSelectionChange?.(next);
+	};
+	const onScrollbar = (event) => {
+		const scroller = scrollerRef.value;
+		if (!pointer || !scroller || !event.composedPath().includes(scroller)) return false;
+		const hit = hitTest(scene.state, pointer.pointOf(event));
+		return hit.kind === "thumb" || hit.kind === "track";
+	};
+	const editing = createEditingInput({
+		scene,
+		get textarea() {
+			return focusRef.value;
+		},
+		get slot() {
+			return slotRef.value;
+		},
+		columns: () => props.columns,
+		selection: () => selection,
+		onScrollbar,
+		move: (key, mods) => navigate(key, mods),
+		select: changeSelection,
+		reveal: (cell) => reveal(cell),
+		commit: (event) => props.onCommit?.(event),
+		reject: (event) => props.onReject?.(event)
+	});
+	const reportViewport = () => {
+		viewportFrame = 0;
+		const range = scene.visibleRange(STRICT);
+		const next = {
+			rowStart: range.rowStart,
+			rowEnd: range.rowEnd,
+			colStart: range.frozenEnd >= 0 ? 0 : range.colStart,
+			colEnd: range.colEnd >= range.colStart ? range.colEnd : range.frozenEnd
+		};
+		if (viewport && sameViewport(viewport, next)) return;
+		viewport = next;
+		props.onViewportChange?.(next);
+	};
+	const scheduleViewport = () => {
+		if (viewportFrame || !mounted) return;
+		viewportFrame = requestAnimationFrame(reportViewport);
+	};
+	const writeSpacer = () => {
+		const spacer = spacerRef.value;
+		const { layout } = scene.state;
+		const mapping = scrollMapping(layout.contentHeight);
+		const bar = layout.horizontalBar ? 12 : 0;
+		const width = px(layout.width + layout.maxScrollLeft);
+		const height = px(layout.headerHeight + mapping.domHeight(layout.cellHeight) + bar);
+		if (spacer && spacer.style.width !== width) spacer.style.width = width;
+		if (spacer && spacer.style.height !== height) spacer.style.height = height;
+		return mapping;
+	};
+	const rendered = (element) => element.getClientRects().length > 0;
+	const pushScroll = () => {
+		const scroller = scrollerRef.value;
+		const mapping = writeSpacer();
+		if (!scroller) return;
+		const { layout, scrollTop, scrollLeft } = scene.state;
+		const domTop = mapping.toDom(scrollTop, layout.cellHeight);
+		if (Math.abs(scroller.scrollTop - domTop) >= .5) scroller.scrollTop = domTop;
+		if (scroller.scrollLeft !== scrollLeft) scroller.scrollLeft = scrollLeft;
+		unsynced = (Math.abs(scroller.scrollTop - domTop) >= .5 || Math.abs(scroller.scrollLeft - scrollLeft) >= .5) && !rendered(scroller);
+		held = unsynced ? null : {
+			dom: scroller.scrollTop,
+			content: scrollTop
+		};
+	};
+	const pullScroll = () => {
+		const scroller = scrollerRef.value;
+		if (!scroller) return;
+		const { layout } = scene.state;
+		const domTop = scroller.scrollTop;
+		const top = held && Math.abs(domTop - held.dom) < .5 ? held.content : scrollMapping(layout.contentHeight).toContent(domTop, layout.cellHeight);
+		scene.setScroll(top, scroller.scrollLeft);
+		scheduleViewport();
+	};
+	const onLayout = () => {
+		const next = scrollMapping(scene.state.layout.contentHeight).ratio;
+		const scroller = scrollerRef.value;
+		if (next !== ratio || unsynced) {
+			ratio = next;
+			pushScroll();
+		} else if (scroller && !rendered(scroller)) {
+			writeSpacer();
+			unsynced = true;
+			held = null;
+		} else {
+			writeSpacer();
+			pullScroll();
+		}
+		scheduleViewport();
+	};
+	const onScroll = () => unsynced ? pushScroll() : pullScroll();
+	const scrollContentTo = (top, left) => {
+		scene.setScroll(top, left);
+		pushScroll();
+		scheduleViewport();
+	};
+	const reveal = (cell) => {
+		const { layout, offsets, rowHeight, scrollTop, scrollLeft } = scene.state;
+		let top = scrollTop;
+		let left = scrollLeft;
+		const rowTop = cell.row * rowHeight;
+		if (rowTop < top || layout.cellHeight < rowHeight) top = rowTop;
+		else if (rowTop + rowHeight > top + layout.cellHeight) top = rowTop + rowHeight - layout.cellHeight;
+		if (cell.col >= layout.frozenCount && cell.col < offsets.length - 1) {
+			const colLeft = offsets[cell.col] - layout.scrollOrigin;
+			const colRight = offsets[cell.col + 1] - layout.scrollOrigin;
+			const span = layout.body.width;
+			if (colLeft < left || colRight - colLeft > span) left = colLeft;
+			else if (colRight > left + span) left = colRight - span;
+		}
+		if (top !== scrollTop || left !== scrollLeft) scrollContentTo(top, left);
+	};
+	const pageRows = () => Math.max(1, Math.floor(scene.state.layout.cellHeight / scene.state.rowHeight));
+	const navigate = (key, mods) => {
+		const { state } = scene;
+		const before = selection;
+		const bounds = {
+			rowCount: state.rowCount,
+			colCount: state.columns.length
+		};
+		const next = moveActive(before, key, mods, bounds, pageRows());
+		changeSelection(next);
+		if (key === "SelectAll") return;
+		const extended = Boolean(mods.shift) && key !== "Tab" && key !== "Enter";
+		const target = extended ? farCorner(next) : next.active;
+		if (key === "PageUp" || key === "PageDown") {
+			const from = extended ? farCorner(before) : before.active;
+			scrollContentTo(state.scrollTop + (target.row - from.row) * state.rowHeight, state.scrollLeft);
+		}
+		reveal(target);
+	};
+	const onKeyDown = (event) => {
+		const action = keyAction(event, {
+			apple,
+			editing: editing.editing()
+		});
+		if (!action) return;
+		event.preventDefault();
+		if (action.type === "move") navigate(action.key, action.mods);
+		else editing.act(action, event.key);
+	};
+	const forwardWheel = (event) => {
+		const scroller = scrollerRef.value;
+		if (!scroller || event.ctrlKey || event.defaultPrevented) return;
+		event.preventDefault();
+		const { rowHeight, layout } = scene.state;
+		scroller.scrollBy(wheelScroll(event, rowHeight, layout.cellHeight));
+	};
+	const wheelListener = [forwardWheel, { passive: false }];
+	const slotWheel = (event) => {
+		const slot = slotRef.value;
+		if (!slot || event.ctrlKey || event.defaultPrevented) return;
+		const { rowHeight, layout } = scene.state;
+		const delta = wheelScroll(event, rowHeight, layout.cellHeight);
+		if (!scrollsWithin(event.composedPath(), slot, delta)) forwardWheel(event);
+	};
+	const slotWheelListener = [slotWheel, { passive: false }];
+	const slotBlurListener = [editing.slotBlur, { capture: true }];
+	const onPointerDown = (event) => {
+		lastPointerType = event.pointerType;
+		pointer?.pointerdown(event);
+	};
+	const onPointerMove = (event) => pointer?.pointermove(event);
+	const onPointerUp = (event) => pointer?.pointerup(event);
+	const onPointerCancel = (event) => pointer?.pointercancel(event);
+	const onDoubleClick = (event) => {
+		if (lastPointerType !== "touch") pointer?.dblclick(event);
+	};
+	const onMouseDown = (event) => {
+		if (lastPointerType === "touch") return;
+		event.preventDefault();
+		if (!editing.holdsFocus()) focusRef.value?.focus({ preventScroll: true });
+	};
+	const onContextMenu = (event) => {
+		const listener = props.onCellContextMenu;
+		if (!listener || !pointer) return;
+		const { state } = scene;
+		const point = pointer.pointOf(event);
+		const hit = hitTest(state, point);
+		const { clientX, clientY } = event;
+		if (hit.kind === "cell") {
+			event.preventDefault();
+			const cell = {
+				row: hit.row,
+				col: hit.col
+			};
+			if (!isSelected(selection, cell)) changeSelection(clickCell(selection, cell));
+			listener({
+				...cell,
+				clientX,
+				clientY
+			});
+			return;
+		}
+		const blank = hit.kind === "none" ? blankAt(state, point) : null;
+		if (!blank) return;
+		event.preventDefault();
+		listener({
+			...blank,
+			clientX,
+			clientY
+		});
+	};
+	const onKeyboardContextMenu = (event) => {
+		const listener = props.onCellContextMenu;
+		const container = containerRef.value;
+		const { state } = scene;
+		const { active } = selection;
+		if (!listener || !container || editing.editing()) return;
+		if (active.row >= state.rowCount || active.col >= state.columns.length) return;
+		event.preventDefault();
+		const box = holdInside(cellRect(state, active), cellArea(state));
+		const rect = container.getBoundingClientRect();
+		listener({
+			row: active.row,
+			col: active.col,
+			clientX: rect.left + box.x + box.width / 2,
+			clientY: rect.top + box.y + box.height / 2
+		});
+	};
+	const applyPixelRatio = () => {
+		const next = window.devicePixelRatio || 1;
+		for (const layer of [scene.layers.body, scene.layers.overlay]) {
+			if (!layer || layer.getCanvas().getPixelRatio() === next) continue;
+			layer.getCanvas().setPixelRatio(next);
+			markDirty(layer);
+		}
+	};
+	function watchResolution() {
+		resolution?.removeEventListener("change", onResolution);
+		resolution = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`);
+		resolution.addEventListener("change", onResolution);
+	}
+	function onResolution() {
+		applyPixelRatio();
+		watchResolution();
+	}
+	const syncProp = (name) => {
+		switch (name) {
+			case "rowCount":
+				scene.setRowCount(props.rowCount);
+				break;
+			case "columns":
+				scene.setColumns(props.columns);
+				break;
+			case "getCell":
+			case "getCellStyle":
+				scene.setGetters(props.getCell, props.getCellStyle);
+				break;
+			case "frozenColumns":
+				scene.setFrozenColumns(props.frozenColumns ?? 0);
+				break;
+			case "rowHeight":
+				scene.setRowHeight(props.rowHeight ?? 28);
+				break;
+			case "theme":
+				scene.setTheme(props.theme ?? lightTheme);
+				break;
+			case "font":
+				scene.setFont(props.font ?? DEFAULT_FONT);
+				break;
+			case "version": scene.setVersion(props.version ?? 0);
+		}
+	};
+	const handle = {
+		scrollTo(row, col) {
+			const { rowCount, columns } = scene.state;
+			if (!mounted || rowCount < 1 || columns.length < 1) return;
+			reveal({
+				row: clamp(Math.floor(row) || 0, 0, rowCount - 1),
+				col: clamp(Math.floor(col) || 0, 0, columns.length - 1)
+			});
+		},
+		select(next) {
+			if (!mounted) return;
+			selection = next;
+			scene.setSelection(next);
+		},
+		focus() {
+			if (mounted) focusRef.value?.focus({ preventScroll: true });
+		},
+		isEditing: () => editing.editing()
+	};
+	onMounted(() => {
+		const container = containerRef.value;
+		const scroller = scrollerRef.value;
+		scene.setSize(container.clientWidth, container.clientHeight);
+		const stage = new Stage({
+			container: stageRef.value,
+			width: scene.state.width,
+			height: scene.state.height,
+			listening: false
+		});
+		renderGridScene(stage, scene);
+		applyPixelRatio();
+		watchResolution();
+		pointer = createPointerInput({
+			scene,
+			scroller,
+			apple,
+			selection: () => selection,
+			select: changeSelection,
+			scrollContentTo,
+			syncScroll: pullScroll,
+			columnResized: (col, width) => props.onColumnResize?.(col, width),
+			cellDoubleClicked: editing.doubleClick
+		});
+		ratio = scrollMapping(scene.state.layout.contentHeight).ratio;
+		pushScroll();
+		const observer = new ResizeObserver(() => {
+			scene.setSize(container.clientWidth, container.clientHeight);
+		});
+		observer.observe(container);
+		const fonts = container.ownerDocument.fonts;
+		const onFontsLoaded = () => scene.refreshFont();
+		fonts?.addEventListener("loadingdone", onFontsLoaded);
+		disposers.push(() => {
+			renderKonva(stage, null);
+			stage.destroy();
+		}, () => observer.disconnect(), () => fonts?.removeEventListener("loadingdone", onFontsLoaded), () => resolution?.removeEventListener("change", onResolution), () => cancelAnimationFrame(viewportFrame), () => pointer?.dispose(), () => editing.dispose(), watch(props).subscribe(syncProp), watch(scene.observed).subscribe((name) => {
+			if (name === "layout") onLayout();
+		}));
+		mounted = true;
+		scheduleViewport();
+		props.onReady?.(handle);
+	});
+	onUnmounted(() => {
+		mounted = false;
+		disposers.splice(0).forEach((dispose) => dispose());
+		resolution = null;
+		viewportFrame = 0;
+		pointer = null;
+	});
+	return () => {
+		const { observed } = scene;
+		const { open } = editing.view;
+		return html`<div class=${CONTAINER_CLASS} .dir="ltr" style=${CONTAINER_STYLE} ${ref(containerRef)}><style .textContent=${GRID_CSS}></style><div style=${STAGE_STYLE} ${ref(stageRef)}></div><div class=${SCROLLER_CLASS} tabindex=${-1} style=${SCROLLER_STYLE} ${ref(scrollerRef)} @scroll=${onScroll} @pointerdown=${onPointerDown} @pointermove=${onPointerMove} @pointerup=${onPointerUp} @pointercancel=${onPointerCancel} @mousedown=${onMouseDown} @dblclick=${onDoubleClick} @contextmenu=${onContextMenu}><div ${ref(spacerRef)}></div></div><textarea aria-label=${props.ariaLabel} autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" style=${focusStyle(observed, open, props.font ?? DEFAULT_FONT)} ${ref(focusRef)} @keydown=${onKeyDown} @wheel=${wheelListener} @beforeinput=${editing.beforeinput} @input=${editing.input} @compositionstart=${editing.compositionstart} @compositionend=${editing.compositionend} @copy=${editing.copy} @paste=${editing.paste} @blur=${editing.blur} @contextmenu=${onKeyboardContextMenu}></textarea><div style=${slotStyle(observed, open)} ${ref(slotRef)} @keydown=${editing.slotKeydown} @wheel=${slotWheelListener} @blur=${slotBlurListener}></div></div>`;
+	};
+};
+//#endregion
+export { Grid, Grid as default };

package/dist/grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/defineProperty.js

@@ -0,0 +1,12 @@
+import toPropertyKey from "./toPropertyKey.js";
+//#region ../grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+export { _defineProperty as default };

package/dist/grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/toPrimitive.js

@@ -0,0 +1,14 @@
+import _typeof from "./typeof.js";
+//#region ../grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+export { toPrimitive as default };

package/dist/grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/toPropertyKey.js

@@ -0,0 +1,9 @@
+import _typeof from "./typeof.js";
+import toPrimitive from "./toPrimitive.js";
+//#region ../grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+export { toPropertyKey as default };

package/dist/grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/typeof.js

@@ -0,0 +1,11 @@
+//#region ../grid/dist/_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+export { _typeof as default };

package/dist/grid/dist/font.js

@@ -0,0 +1,58 @@
+import { prepare } from "@chenglou/pretext";
+//#region ../grid/dist/font.js
+var DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Open Sans', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+var DEFAULT_FONT = `13px ${DEFAULT_FONT_FAMILY}`;
+var ADVANCE_PROBES = [
+	"W",
+	"가",
+	"漢",
+	"😀"
+];
+var PROBE_TEXT = ADVANCE_PROBES.join("");
+function fontLoaded(font) {
+	const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+	if (!fonts) return true;
+	try {
+		return fonts.check(font);
+	} catch {
+		return true;
+	}
+}
+var NO_METRICS = Object.freeze({
+	ascent: 0,
+	descent: 0,
+	maxAdvance: 0
+});
+var measured = /* @__PURE__ */ new Map();
+var calibrated = /* @__PURE__ */ new Set();
+function calibrate(font) {
+	prepare(PROBE_TEXT, font);
+	calibrated.add(font);
+}
+function recalibrateFonts() {
+	for (const font of calibrated) prepare(PROBE_TEXT, font);
+}
+function measureFont(font) {
+	const held = measured.get(font);
+	if (held) return held;
+	if (typeof document === "undefined") return NO_METRICS;
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return NO_METRICS;
+	context.font = font;
+	const metrics = context.measureText("M");
+	const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
+	const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+	if (!Number.isFinite(ascent) || !Number.isFinite(descent)) return NO_METRICS;
+	let maxAdvance = 0;
+	for (const probe of ADVANCE_PROBES) maxAdvance = Math.max(maxAdvance, context.measureText(probe).width);
+	calibrate(font);
+	const result = Object.freeze({
+		ascent,
+		descent,
+		maxAdvance
+	});
+	if (fontLoaded(font)) measured.set(font, result);
+	return result;
+}
+//#endregion
+export { ADVANCE_PROBES, DEFAULT_FONT, DEFAULT_FONT_FAMILY, fontLoaded, measureFont, recalibrateFonts };