@jbpark/live-editor 1.10.0 → 1.12.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { _ as DRAGGABLE_ITEMS, b as __toESM, d as require_lib$1, f as require_lib, g as DEFAULT_TEMPLATE, p as BINDING_PROP } from "./document-DJDRM79h.mjs";
-import { a as detectTypeScript, c as generateSections, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-D1tlgtgj.mjs";
-import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-DiVN0l7x.mjs";
-import { generateTailwindCSS } from "./utils/tailwind/index.mjs";
+import { _ as DEFAULT_TEMPLATE, f as require_lib$1, m as BINDING_PROP, n as createSectionPreviewCache, p as require_lib, v as DRAGGABLE_ITEMS, x as __toESM } from "./document-DocoSXLT.mjs";
+import { a as detectTypeScript, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-DP9WPbBJ.mjs";
+import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-9E8pNi7j.mjs";
+import { t as generateTailwindCSS } from "./tailwind-CzPhj3D9.mjs";
 import "@jbpark/ui-kit/style.css";
 import React, { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Toast, Typography, Upload } from "@jbpark/ui-kit";
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
+import { useDebounce, useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, LayoutGrid, Link, Mail, Map as Map$1, Menu, MessageCircle, Phone, Plus, Search, Settings, Share, ShoppingCart, Star, Trash, Upload as Upload$1, User, X } from "lucide-react";
 import { v4 } from "uuid";
 import { createPortal } from "react-dom";
@@ -24,7 +24,6 @@ import prettierPluginTypeScript from "prettier/plugins/typescript";
 import Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-
 //#region src/components/context/states.ts
 const PreviewContext = createContext(void 0);
 const ErrorContext = createContext(void 0);
@@ -38,7 +37,6 @@ const useError = () => {
 	if (context === void 0) throw new Error("useError must be used within <Live> (ContextProvider)");
 	return context;
 };
-
 //#endregion
 //#region src/components/context/context.tsx
 const ContextProvider = ({ children }) => {
@@ -69,7 +67,39 @@ const ContextProvider = ({ children }) => {
 		})
 	});
 };
-
+//#endregion
+//#region src/components/frame/measure.ts
+const computeProbeHeight = (scrollContainerClientHeight, wrapperInsets) => {
+	const usable = scrollContainerClientHeight - wrapperInsets;
+	return usable > 0 ? usable : null;
+};
+const isVisuallyHidden = (computed) => computed.visibility === "hidden" || computed.opacity === "0";
+const parseTranslateY = (transform) => {
+	if (!transform || transform === "none") return 0;
+	const translateYMatch = transform.match(/translateY\(\s*([+-]?\d*\.?\d+)/);
+	if (translateYMatch?.[1]) return parseFloat(translateYMatch[1]);
+	const translateMatch = transform.match(/translate\([^,]+,\s*([+-]?\d*\.?\d+)/);
+	if (translateMatch?.[1]) return parseFloat(translateMatch[1]);
+	const matrixMatch = transform.match(/matrix\(\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([+-]?\d*\.?\d+)/);
+	return matrixMatch?.[1] ? parseFloat(matrixMatch[1]) : 0;
+};
+const estimatePositionedElementHeight = (offsetHeight, transform, probeHeight) => {
+	const offsetY = parseTranslateY(transform);
+	return Math.min(offsetY + offsetHeight, probeHeight);
+};
+//#endregion
+//#region src/components/frame/viewport-units.ts
+const UNIT_MAP = {
+	vh: "cqh",
+	svh: "cqh",
+	lvh: "cqh",
+	dvh: "cqh",
+	vmin: "cqmin",
+	vmax: "cqmax"
+};
+const UNITS_PATTERN = Object.keys(UNIT_MAP).sort((a, b) => b.length - a.length).join("|");
+const VIEWPORT_UNIT_RE = new RegExp(`(?<![\\w.-])(-?(?:\\d+\\.?\\d*|\\.\\d+))(${UNITS_PATTERN})(?![a-zA-Z0-9_-])`, "gi");
+const convertViewportUnits = (css) => css.replace(VIEWPORT_UNIT_RE, (_match, number, unit) => number + UNIT_MAP[unit.toLowerCase()]);
 //#endregion
 //#region src/components/frame/iframe.tsx
 const EMPTY_STRING_ARRAY = [];
@@ -113,7 +143,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			const fragment = doc.createDocumentFragment();
 			newStyles.forEach((content) => {
 				const style = doc.createElement("style");
-				style.textContent = content;
+				style.textContent = convertViewportUnits(content);
 				fragment.appendChild(style);
 			});
 			doc.head.appendChild(fragment);
@@ -187,7 +217,8 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 				styleEl.id = styleId;
 				doc.head.appendChild(styleEl);
 			}
-			if (styleEl.textContent !== css) styleEl.textContent = css;
+			const convertedCss = convertViewportUnits(css);
+			if (styleEl.textContent !== convertedCss) styleEl.textContent = convertedCss;
 		});
 		for (let index = styles.length; index < prevStyleCountRef.current; index++) doc.getElementById(`injected-style-${index}`)?.remove();
 		prevStyleCountRef.current = styles.length;
@@ -205,50 +236,74 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		for (let index = stylesheets.length; index < prevStylesheetCountRef.current; index++) doc.getElementById(`injected-stylesheet-${index}`)?.remove();
 		prevStylesheetCountRef.current = stylesheets.length;
 	}, [styles, stylesheets]);
+	const CONTAINER_STYLE_ID = "autoheight-container";
+	const ensureContainerStyle = (doc, probeHeight) => {
+		let styleEl = doc.getElementById(CONTAINER_STYLE_ID);
+		if (!styleEl) {
+			styleEl = doc.createElement("style");
+			styleEl.id = CONTAINER_STYLE_ID;
+			doc.head?.appendChild(styleEl);
+		}
+		styleEl.textContent = `html { container-type: size !important; height: ${probeHeight}px !important; }`;
+	};
+	const MEASUREMENT_OVERRIDE_STYLE_ID = "autoheight-measurement-overrides";
+	const withMeasurementOverrides = (doc, measure) => {
+		let styleEl = doc.getElementById(MEASUREMENT_OVERRIDE_STYLE_ID);
+		if (!styleEl) {
+			styleEl = doc.createElement("style");
+			styleEl.id = MEASUREMENT_OVERRIDE_STYLE_ID;
+			styleEl.media = "not all";
+			styleEl.textContent = [
+				"*, *::before, *::after { transition: none !important; }",
+				"html, body { scrollbar-width: none !important; }",
+				"html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"
+			].join("\n");
+			doc.head?.appendChild(styleEl);
+		}
+		styleEl.media = "all";
+		measure();
+		styleEl.media = "not all";
+	};
 	const updateHeight = useCallback(() => {
 		if (!shouldAutoHeight || !mountNode || !iframeRef.current) return;
 		const iframe = iframeRef.current;
+		const doc = iframe.contentDocument;
+		const win = doc?.defaultView;
+		if (!doc || !win) return;
 		const scrollParent = iframe.closest("[data-frame-container]");
-		const savedScrollTop = scrollParent?.scrollTop ?? 0;
-		iframe.style.height = "0px";
-		let childrenHeight = 0;
-		Array.from(mountNode.children).forEach((child) => {
-			const el = child;
-			childrenHeight = Math.max(childrenHeight, el.scrollHeight);
-		});
-		const win = iframe.contentDocument?.defaultView;
-		mountNode.querySelectorAll("[data-floating-ui-focusable]").forEach((popup) => {
-			if (popup.offsetHeight > 0) {
-				let offsetY = 0;
-				const transform = popup.style.transform;
-				if (transform) {
-					const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
-					if (match?.[1]) offsetY = parseFloat(match[1]);
-				}
-				const estimatedHeight = offsetY + popup.offsetHeight;
-				childrenHeight = Math.max(childrenHeight, estimatedHeight);
-			}
-		});
-		if (win) Array.from(mountNode.children).forEach((child) => {
-			const el = child;
-			const style = win.getComputedStyle(el);
-			if (style.position === "fixed" || style.position === "absolute") {
-				if (el.offsetHeight > 0) {
-					let offsetY = 0;
-					const transform = el.style.transform;
-					if (transform) {
-						const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
-						if (match?.[1]) offsetY = parseFloat(match[1]);
-					}
-					const estimatedHeight = offsetY + el.offsetHeight;
-					childrenHeight = Math.max(childrenHeight, estimatedHeight);
+		let probeHeight;
+		if (!scrollParent) probeHeight = 812;
+		else {
+			let wrapperInsets = 0;
+			let node = iframe.parentElement;
+			while (node && node !== scrollParent) {
+				const style = win.getComputedStyle(node);
+				wrapperInsets += parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth) + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+				node = node.parentElement;
+			}
+			const computed = computeProbeHeight(scrollParent.clientHeight, wrapperInsets);
+			if (computed === null) return;
+			probeHeight = computed;
+		}
+		let contentHeight = 0;
+		withMeasurementOverrides(doc, () => {
+			ensureContainerStyle(doc, probeHeight);
+			contentHeight = mountNode.scrollHeight;
+			mountNode.querySelectorAll("*").forEach((el) => {
+				const style = win.getComputedStyle(el);
+				if (isVisuallyHidden(style)) return;
+				if ((style.position === "fixed" || style.position === "absolute") && el.offsetHeight > 0) {
+					const estimatedHeight = estimatePositionedElementHeight(el.offsetHeight, style.transform, probeHeight);
+					contentHeight = Math.max(contentHeight, estimatedHeight);
 				}
-			}
+			});
 		});
-		const contentHeight = Math.max(mountNode.scrollHeight, childrenHeight);
 		if (contentHeight > 0) iframe.style.height = `${Math.ceil(contentHeight)}px`;
-		if (scrollParent) scrollParent.scrollTop = savedScrollTop;
 	}, [shouldAutoHeight, mountNode]);
+	useEffect(() => {
+		if (shouldAutoHeight) return;
+		iframeRef.current?.contentDocument?.getElementById(CONTAINER_STYLE_ID)?.remove();
+	}, [shouldAutoHeight]);
 	useEffect(() => {
 		updateHeight();
 	}, [updateHeight]);
@@ -287,7 +342,6 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		children: content
 	});
 };
-
 //#endregion
 //#region src/components/frame/shadow.tsx
 const Shadow = ({ children }) => {
@@ -298,7 +352,8 @@ const Shadow = ({ children }) => {
 	const [hostContainer, setHostContainer] = useState(null);
 	useLayoutEffect(() => {
 		if (!hostRef.current) return;
-		setHostContainer(hostRef.current.closest("[data-frame-container]"));
+		const container = hostRef.current.closest("[data-frame-container]");
+		setHostContainer(container);
 		let shadowRoot = shadowRootRef.current;
 		if (!shadowRoot) {
 			shadowRoot = hostRef.current.shadowRoot || hostRef.current.attachShadow({ mode: "open" });
@@ -321,7 +376,6 @@ const Shadow = ({ children }) => {
 		children: renderTarget && createPortal(children(hostContainer), renderTarget)
 	});
 };
-
 //#endregion
 //#region src/components/frame/frame.tsx
 const Frame = ({ mode, children, ...restProps }) => {
@@ -332,7 +386,6 @@ const Frame = ({ mode, children, ...restProps }) => {
 		children
 	});
 };
-
 //#endregion
 //#region src/components/dnd/draggable.tsx
 const DraggableItem = ({ item, children }) => {
@@ -363,7 +416,6 @@ const DefaultDraggableItem = ({ item, onAdd }) => /* @__PURE__ */ jsx(DraggableI
 		children: item.name
 	})
 });
-
 //#endregion
 //#region src/components/dnd/droppable.tsx
 const Droppable = ({ children, className }) => {
@@ -385,7 +437,6 @@ const Droppable = ({ children, className }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region src/components/dnd/renderer.tsx
 const Renderer = ({ preview, headers, modules, frame, provider }) => {
@@ -422,7 +473,6 @@ const Renderer = ({ preview, headers, modules, frame, provider }) => {
 	});
 };
 var renderer_default = memo(Renderer);
-
 //#endregion
 //#region src/components/dnd/sortable.tsx
 const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy }) => {
@@ -466,7 +516,6 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 		]
 	});
 };
-
 //#endregion
 //#region src/components/dnd/overlay.tsx
 const Overlay = ({ sections, renderProps }) => {
@@ -491,10 +540,10 @@ const Overlay = ({ sections, renderProps }) => {
 	}
 	return null;
 };
-
 //#endregion
 //#region node_modules/.pnpm/@marijn+find-cluster-break@1.0.3/node_modules/@marijn/find-cluster-break/src/index.js
-let rangeFrom = [], rangeTo = [];
+let rangeFrom = [];
+let rangeTo = [];
 (() => {
 	let numbers = "lc,34,7n,7,7b,19,,,,2,,2,,,20,b,1c,l,g,,2t,7,2,6,2,2,,4,z,,u,r,2j,b,1m,9,9,,o,4,,9,,3,,5,17,3,3b,f,,w,1j,,,,4,8,4,,3,7,a,2,t,,1m,,,,2,4,8,,9,,a,2,q,,2,2,1l,,4,2,4,2,2,3,3,,u,2,3,,b,2,1l,,4,5,,2,4,,k,2,m,6,,,1m,,,2,,4,8,,7,3,a,2,u,,1n,,,,c,,9,,14,,3,,1l,3,5,3,,4,7,2,b,2,t,,1m,,2,,2,,3,,5,2,7,2,b,2,s,2,1l,2,,,2,4,8,,9,,a,2,t,,20,,4,,2,3,,,8,,29,,2,7,c,8,2q,,2,9,b,6,22,2,r,,,,,,1j,e,,5,,2,5,b,,10,9,,2u,4,,6,,2,2,2,p,2,4,3,g,4,d,,2,2,6,,f,,jj,3,qa,3,t,3,t,2,u,2,1s,2,,7,8,,2,b,9,,19,3,3b,2,y,,3a,3,4,2,9,,6,3,63,2,2,,1m,,,7,,,,,2,8,6,a,2,,1c,h,1r,4,1c,7,,,5,,14,9,c,2,w,4,2,2,,3,1k,,,2,3,,,3,1m,8,2,2,48,3,,d,,7,4,,6,,3,2,5i,1m,,5,ek,,5f,x,2da,3,3x,,2o,w,fe,6,2x,2,n9w,4,,a,w,2,28,2,7k,,3,,4,,p,2,5,,47,2,q,i,d,,12,8,p,b,1a,3,1c,,2,4,2,2,13,,1v,6,2,2,2,2,c,,8,,1b,,1f,,,3,2,2,5,2,,,16,2,8,,6m,,2,,4,,fn4,,kh,g,g,g,a6,2,gt,,6a,,45,5,1ae,3,,2,5,4,14,3,4,,4l,2,fx,4,ar,2,49,b,4w,,1i,f,1k,3,1d,4,2,2,1x,3,10,5,,8,1q,,c,2,1g,9,a,4,2,,2n,3,2,,,2,6,,4g,,3,8,l,2,1l,2,,,,,m,,e,7,3,5,5f,8,2,3,,,n,,29,,2,6,,,2,,,2,,2,6j,,2,4,6,2,,2,r,2,2d,8,2,,,2,2y,,,,2,6,,,2t,3,2,4,,5,77,9,,2,6t,,a,2,,,4,,40,4,2,2,4,,w,a,14,6,2,4,8,,9,6,2,3,1a,d,,2,ba,7,,6,,,2a,m,2,7,,2,,2,3e,6,3,,,2,,7,,,20,2,3,,,,9n,2,f0b,5,1n,7,t4,,1r,4,29,,f5k,2,43q,,,3,4,5,8,8,2,7,u,4,44,3,1iz,1j,4,1e,8,,e,,m,5,,f,11s,7,,h,2,7,,2,,5,79,7,c5,4,15s,7,31,7,240,5,gx7k,2o,3k,6o".split(",").map((s) => s ? parseInt(s, 36) : 1);
 	for (let i = 0, n = 0; i < numbers.length; i++) (i % 2 ? rangeTo : rangeFrom).push(n = n + numbers[i]);
@@ -562,7 +611,6 @@ function surrogateHigh(ch) {
 function codePointSize(code) {
 	return code < 65536 ? 1 : 2;
 }
-
 //#endregion
 //#region node_modules/.pnpm/@codemirror+state@6.7.1/node_modules/@codemirror/state/dist/index.js
 /**
@@ -877,7 +925,7 @@ var TextNode = class TextNode extends Text {
 		return chunked.length == 1 ? chunked[0] : new TextNode(chunked, length);
 	}
 };
-Text.empty = /* @__PURE__ */ new TextLeaf([""], 0);
+Text.empty = /*@__PURE__*/ new TextLeaf([""], 0);
 function textLength(text) {
 	let length = -1;
 	for (let line of text) length += line.length + 1;
@@ -1011,12 +1059,13 @@ var LineCursor = class {
 		} else if (done) {
 			this.done = true;
 			this.value = "";
-		} else if (lineBreak) if (this.afterBreak) this.value = "";
-		else {
-			this.afterBreak = true;
-			this.next();
-		}
-		else {
+		} else if (lineBreak) {
+			if (this.afterBreak) this.value = "";
+			else {
+				this.afterBreak = true;
+				this.next();
+			}
+		} else {
 			this.value = value;
 			this.afterBreak = false;
 		}
@@ -1074,7 +1123,7 @@ const DefaultSplit = /\r\n?|\n/;
 /**
 Distinguishes different ways in which positions can be mapped.
 */
-var MapMode = /* @__PURE__ */ (function(MapMode) {
+var MapMode = /*@__PURE__*/ (function(MapMode) {
 	/**
 	Map a position to a valid new position, even when its context
 	was deleted.
@@ -2047,7 +2096,7 @@ function dynamicFacetSlot(addresses, facet, providers) {
 		}
 	};
 }
-const initField = /* @__PURE__ */ Facet.define({ static: true });
+const initField = /*@__PURE__*/ Facet.define({ static: true });
 /**
 Fields can store additional information in an editor state, and
 keep it in sync with the rest of the state.
@@ -2149,11 +2198,30 @@ final ordering of extensions is determined by first sorting by
 precedence and then by order within each precedence.
 */
 const Prec = {
-	highest: /* @__PURE__ */ prec(Prec_.highest),
-	high: /* @__PURE__ */ prec(Prec_.high),
-	default: /* @__PURE__ */ prec(Prec_.default),
-	low: /* @__PURE__ */ prec(Prec_.low),
-	lowest: /* @__PURE__ */ prec(Prec_.lowest)
+	/**
+	The highest precedence level, for extensions that should end up
+	near the start of the precedence ordering.
+	*/
+	highest: /*@__PURE__*/ prec(Prec_.highest),
+	/**
+	A higher-than-default precedence, for extensions that should
+	come before those with default precedence.
+	*/
+	high: /*@__PURE__*/ prec(Prec_.high),
+	/**
+	The default precedence, which is also used for extensions
+	without an explicit precedence.
+	*/
+	default: /*@__PURE__*/ prec(Prec_.default),
+	/**
+	A lower-than-default precedence.
+	*/
+	low: /*@__PURE__*/ prec(Prec_.low),
+	/**
+	The lowest precedence level. Meant for things that should end up
+	near the end of the extension order.
+	*/
+	lowest: /*@__PURE__*/ prec(Prec_.lowest)
 };
 var PrecExtension = class {
 	constructor(inner, prec) {
@@ -2257,7 +2325,8 @@ var Configuration = class Configuration {
 				dynamicSlots.push((a) => dynamicFacetSlot(a, facet, providers));
 			}
 		}
-		return new Configuration(base, newCompartments, dynamicSlots.map((f) => f(address)), address, staticValues, facets);
+		let dynamic = dynamicSlots.map((f) => f(address));
+		return new Configuration(base, newCompartments, dynamic, address, staticValues, facets);
 	}
 };
 function flatten(extension, compartments, newCompartments) {
@@ -2314,19 +2383,19 @@ function ensureAddr(state, addr) {
 function getAddr(state, addr) {
 	return addr & 1 ? state.config.staticValues[addr >> 1] : state.values[addr >> 1];
 }
-const languageData = /* @__PURE__ */ Facet.define();
-const allowMultipleSelections = /* @__PURE__ */ Facet.define({
+const languageData = /*@__PURE__*/ Facet.define();
+const allowMultipleSelections = /*@__PURE__*/ Facet.define({
 	combine: (values) => values.some((v) => v),
 	static: true
 });
-const lineSeparator = /* @__PURE__ */ Facet.define({
+const lineSeparator = /*@__PURE__*/ Facet.define({
 	combine: (values) => values.length ? values[0] : void 0,
 	static: true
 });
-const changeFilter = /* @__PURE__ */ Facet.define();
-const transactionFilter = /* @__PURE__ */ Facet.define();
-const transactionExtender = /* @__PURE__ */ Facet.define();
-const readOnly = /* @__PURE__ */ Facet.define({ combine: (values) => values.length ? values[0] : false });
+const changeFilter = /*@__PURE__*/ Facet.define();
+const transactionFilter = /*@__PURE__*/ Facet.define();
+const transactionExtender = /*@__PURE__*/ Facet.define();
+const readOnly = /*@__PURE__*/ Facet.define({ combine: (values) => values.length ? values[0] : false });
 /**
 Annotations are tagged values that are used to add metadata to
 transactions in an extensible way. They should be used to model
@@ -2441,11 +2510,11 @@ the editor. Doing this will discard any extensions
 the content of [reconfigured](https://codemirror.net/6/docs/ref/#state.Compartment.reconfigure)
 compartments.
 */
-StateEffect.reconfigure = /* @__PURE__ */ StateEffect.define();
+StateEffect.reconfigure = /*@__PURE__*/ StateEffect.define();
 /**
 Append extensions to the top-level configuration of the editor.
 */
-StateEffect.appendConfig = /* @__PURE__ */ StateEffect.define();
+StateEffect.appendConfig = /*@__PURE__*/ StateEffect.define();
 /**
 Changes to the editor state are grouped into transactions.
 Typically, a user action creates a single transaction, which may
@@ -2547,7 +2616,7 @@ var Transaction = class Transaction {
 Annotation used to store transaction timestamps. Automatically
 added to every transaction, holding `Date.now()`.
 */
-Transaction.time = /* @__PURE__ */ Annotation.define();
+Transaction.time = /*@__PURE__*/ Annotation.define();
 /**
 Annotation used to associate a transaction with a user interface
 event. Holds a string identifying the event, using a
@@ -2574,19 +2643,19 @@ information. The events used by the core libraries are:
 Use [`isUserEvent`](https://codemirror.net/6/docs/ref/#state.Transaction.isUserEvent) to check
 whether the annotation matches a given event.
 */
-Transaction.userEvent = /* @__PURE__ */ Annotation.define();
+Transaction.userEvent = /*@__PURE__*/ Annotation.define();
 /**
 Annotation indicating whether a transaction should be added to
 the undo history or not.
 */
-Transaction.addToHistory = /* @__PURE__ */ Annotation.define();
+Transaction.addToHistory = /*@__PURE__*/ Annotation.define();
 /**
 Annotation indicating (when present and true) that a transaction
 represents a change made by some other actor, not the user. This
 is used, for example, to tag other people's changes in
 collaborative editing.
 */
-Transaction.remote = /* @__PURE__ */ Annotation.define();
+Transaction.remote = /*@__PURE__*/ Annotation.define();
 function joinRanges(a, b) {
 	let result = [];
 	for (let iA = 0, iB = 0;;) {
@@ -2693,7 +2762,7 @@ The categories produced by a [character
 categorizer](https://codemirror.net/6/docs/ref/#state.EditorState.charCategorizer). These are used
 do things like selecting by word.
 */
-var CharCategory = /* @__PURE__ */ (function(CharCategory) {
+var CharCategory = /*@__PURE__*/ (function(CharCategory) {
 	/**
 	Word characters.
 	*/
@@ -2711,7 +2780,7 @@ var CharCategory = /* @__PURE__ */ (function(CharCategory) {
 const nonASCIISingleCaseWordChar = /[\u00df\u0587\u0590-\u05f4\u0600-\u06ff\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;
 let wordChar;
 try {
-	wordChar = /* @__PURE__ */ new RegExp("[\\p{Alphabetic}\\p{Number}_]", "u");
+	wordChar = /*@__PURE__*/ new RegExp("[\\p{Alphabetic}\\p{Number}_]", "u");
 } catch (_) {}
 function hasWordChar(str) {
 	if (wordChar) return wordChar.test(str);
@@ -3049,7 +3118,7 @@ Configures the tab size to use in this state. The first
 (highest-precedence) value of the facet is used. If no value is
 given, this defaults to 4.
 */
-EditorState.tabSize = /* @__PURE__ */ Facet.define({ combine: (values) => values.length ? values[0] : 4 });
+EditorState.tabSize = /*@__PURE__*/ Facet.define({ combine: (values) => values.length ? values[0] : 4 });
 /**
 The line separator to use. By default, any of `"\n"`, `"\r\n"`
 and `"\r"` is treated as a separator when splitting lines, and
@@ -3080,7 +3149,7 @@ Registers translation phrases. The
 all objects registered with this facet to find translations for
 its argument.
 */
-EditorState.phrases = /* @__PURE__ */ Facet.define({ compare(a, b) {
+EditorState.phrases = /*@__PURE__*/ Facet.define({ compare(a, b) {
 	let kA = Object.keys(a), kB = Object.keys(b);
 	return kA.length == kB.length && kA.every((k) => a[k] == b[k]);
 } });
@@ -3138,7 +3207,7 @@ but do want to process every transaction.
 Extenders run _after_ filters, when both are present.
 */
 EditorState.transactionExtender = transactionExtender;
-Compartment.reconfigure = /* @__PURE__ */ StateEffect.define();
+Compartment.reconfigure = /*@__PURE__*/ StateEffect.define();
 /**
 Each range is associated with a value, which must inherit from
 this class.
@@ -3392,7 +3461,7 @@ var RangeSet = class RangeSet {
 	if they are equivalent in the given range.
 	*/
 	static eq(oldSets, newSets, from = 0, to) {
-		if (to == null) to = 999999999;
+		if (to == null) to = 1e9 - 1;
 		let a = oldSets.filter((set) => !set.isEmpty && newSets.indexOf(set) < 0);
 		let b = newSets.filter((set) => !set.isEmpty && oldSets.indexOf(set) < 0);
 		if (a.length != b.length) return false;
@@ -3457,7 +3526,7 @@ var RangeSet = class RangeSet {
 /**
 The empty set of ranges.
 */
-RangeSet.empty = /* @__PURE__ */ new RangeSet([], [], null, -1);
+RangeSet.empty = /*@__PURE__*/ new RangeSet([], [], null, -1);
 function lazySort(ranges) {
 	if (ranges.length > 1) for (let prev = ranges[0], i = 1; i < ranges.length; i++) {
 		let cur = ranges[i];
@@ -3611,7 +3680,8 @@ var LayerCursor = class {
 			break;
 		} else {
 			let chunkPos = this.layer.chunkPos[this.chunkIndex], chunk = this.layer.chunk[this.chunkIndex];
-			this.from = chunkPos + chunk.from[this.rangeIndex];
+			let from = chunkPos + chunk.from[this.rangeIndex];
+			this.from = from;
 			this.to = chunkPos + chunk.to[this.rangeIndex];
 			this.value = chunk.value[this.rangeIndex];
 			this.setRangeIndex(this.rangeIndex + 1);
@@ -3851,11 +3921,10 @@ function findColumn(string, col, tabSize, strict) {
 	}
 	return strict === true ? -1 : string.length;
 }
-
 //#endregion
 //#region node_modules/.pnpm/style-mod@4.1.3/node_modules/style-mod/src/style-mod.js
 const C = "ͼ";
-const COUNT = typeof Symbol == "undefined" ? "__" + C : Symbol.for(C);
+const COUNT = typeof Symbol == "undefined" ? "__ͼ" : Symbol.for(C);
 const SET = typeof Symbol == "undefined" ? "__styleSet" + Math.floor(Math.random() * 1e8) : Symbol("styleSet");
 const top = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : {};
 var StyleModule = class {
@@ -3944,7 +4013,6 @@ var StyleSet = class {
 		if (this.styleTag && this.styleTag.getAttribute("nonce") != nonce) this.styleTag.setAttribute("nonce", nonce);
 	}
 };
-
 //#endregion
 //#region node_modules/.pnpm/w3c-keyname@2.2.8/node_modules/w3c-keyname/index.js
 var base = {
@@ -4027,8 +4095,8 @@ var shift = {
 	221: "}",
 	222: "\""
 };
-var mac = typeof navigator != "undefined" && /Mac/.test(navigator.platform);
-var ie$1 = typeof navigator != "undefined" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
+typeof navigator != "undefined" && /Mac/.test(navigator.platform);
+typeof navigator != "undefined" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
 for (var i = 0; i < 10; i++) base[48 + i] = base[96 + i] = String(i);
 for (var i = 1; i <= 24; i++) base[i + 111] = "F" + i;
 for (var i = 65; i <= 90; i++) {
@@ -4036,40 +4104,39 @@ for (var i = 65; i <= 90; i++) {
 	shift[i] = String.fromCharCode(i);
 }
 for (var code in base) if (!shift.hasOwnProperty(code)) shift[code] = base[code];
-
 //#endregion
-//#region node_modules/.pnpm/@codemirror+view@6.39.11/node_modules/@codemirror/view/dist/index.js
+//#region node_modules/.pnpm/@codemirror+view@6.43.8/node_modules/@codemirror/view/dist/index.js
 let nav = typeof navigator != "undefined" ? navigator : {
 	userAgent: "",
 	vendor: "",
 	platform: ""
 };
 let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
-const ie_edge = /* @__PURE__ */ /Edge\/(\d+)/.exec(nav.userAgent);
-const ie_upto10 = /* @__PURE__ */ /MSIE \d/.test(nav.userAgent);
-const ie_11up = /* @__PURE__ */ /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(nav.userAgent);
+const ie_edge = /*@__PURE__*/ /Edge\/(\d+)/.exec(nav.userAgent);
+const ie_upto10 = /*@__PURE__*/ /MSIE \d/.test(nav.userAgent);
+const ie_11up = /*@__PURE__*/ /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(nav.userAgent);
 const ie = !!(ie_upto10 || ie_11up || ie_edge);
-const gecko = !ie && /* @__PURE__ */ /gecko\/(\d+)/i.test(nav.userAgent);
-const chrome = !ie && /* @__PURE__ */ /Chrome\/(\d+)/.exec(nav.userAgent);
+const gecko = !ie && /*@__PURE__*/ /gecko\/(\d+)/i.test(nav.userAgent);
+const chrome = !ie && /*@__PURE__*/ /Chrome\/(\d+)/.exec(nav.userAgent);
 const webkit = "webkitFontSmoothing" in doc.documentElement.style;
-const safari = !ie && /* @__PURE__ */ /Apple Computer/.test(nav.vendor);
-const ios = safari && (/* @__PURE__ */ /Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2);
+const safari = !ie && /*@__PURE__*/ /Apple Computer/.test(nav.vendor);
+const ios = safari && (/*@__PURE__*/ /Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2);
 var browser = {
-	mac: ios || /* @__PURE__ */ /Mac/.test(nav.platform),
-	windows: /* @__PURE__ */ /Win/.test(nav.platform),
-	linux: /* @__PURE__ */ /Linux|X11/.test(nav.platform),
+	mac: ios || /*@__PURE__*/ /Mac/.test(nav.platform),
+	windows: /*@__PURE__*/ /Win/.test(nav.platform),
+	linux: /*@__PURE__*/ /Linux|X11/.test(nav.platform),
 	ie,
 	ie_version: ie_upto10 ? doc.documentMode || 6 : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0,
 	gecko,
-	gecko_version: gecko ? +(/* @__PURE__ */ /Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
+	gecko_version: gecko ? +(/*@__PURE__*/ /Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
 	chrome: !!chrome,
 	chrome_version: chrome ? +chrome[1] : 0,
 	ios,
-	android: /* @__PURE__ */ /Android\b/.test(nav.userAgent),
+	android: /*@__PURE__*/ /Android\b/.test(nav.userAgent),
 	webkit,
-	webkit_version: webkit ? +(/* @__PURE__ */ /\bAppleWebKit\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
+	webkit_version: webkit ? +(/*@__PURE__*/ /\bAppleWebKit\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
 	safari,
-	safari_version: safari ? +(/* @__PURE__ */ /\bVersion\/(\d+(\.\d+)?)/.exec(nav.userAgent) || [0, 0])[1] : 0,
+	safari_version: safari ? +(/*@__PURE__*/ /\bVersion\/(\d+(\.\d+)?)/.exec(nav.userAgent) || [0, 0])[1] : 0,
 	tabSize: doc.documentElement.style.tabSize != null ? "tab-size" : "-moz-tab-size"
 };
 function combineAttrs(source, target) {
@@ -4078,7 +4145,7 @@ function combineAttrs(source, target) {
 	else target[name] = source[name];
 	return target;
 }
-const noAttrs = /* @__PURE__ */ Object.create(null);
+const noAttrs = /*@__PURE__*/ Object.create(null);
 function attrsEq(a, b, ignore) {
 	if (a == b) return true;
 	if (!a) a = noAttrs;
@@ -4152,7 +4219,7 @@ var WidgetType = class {
 	couldn't (in which case the widget will be redrawn). The default
 	implementation just returns false.
 	*/
-	updateDOM(dom, view) {
+	updateDOM(dom, view, from) {
 		return false;
 	}
 	/**
@@ -4218,7 +4285,7 @@ var WidgetType = class {
 /**
 The different types of blocks that can occur in an editor view.
 */
-var BlockType = /* @__PURE__ */ (function(BlockType) {
+var BlockType = /*@__PURE__*/ (function(BlockType) {
 	/**
 	A line of text.
 	*/
@@ -4397,10 +4464,11 @@ widget that starts inside its range, including blocks starting
 directly at `from` but not including `to`.
 */
 var BlockWrapper = class BlockWrapper extends RangeValue {
-	constructor(tagName, attributes) {
+	constructor(tagName, attributes, rank) {
 		super();
 		this.tagName = tagName;
 		this.attributes = attributes;
+		this.rank = rank;
 	}
 	eq(other) {
 		return other == this || other instanceof BlockWrapper && this.tagName == other.tagName && attrsEq(this.attributes, other.attributes);
@@ -4410,7 +4478,7 @@ var BlockWrapper = class BlockWrapper extends RangeValue {
 	attributes.
 	*/
 	static create(spec) {
-		return new BlockWrapper(spec.tagName, spec.attributes || noAttrs);
+		return new BlockWrapper(spec.tagName, spec.attributes || noAttrs, spec.rank == null ? 50 : Math.max(0, Math.min(spec.rank, 100)));
 	}
 	/**
 	Create a range set from the given block wrapper ranges.
@@ -4473,8 +4541,10 @@ function scanFor(node, off, targetNode, targetOff, dir) {
 function maxOffset(node) {
 	return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
 }
-function flattenRect(rect, left) {
-	let x = left ? rect.left : rect.right;
+function flattenRect(rect, toLeft) {
+	let { left, right } = rect;
+	if (left == right) return rect;
+	let x = toLeft ? left : right;
 	return {
 		left: x,
 		right: x,
@@ -4530,10 +4600,10 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
 		}
 		let moveX = 0, moveY = 0;
 		if (y == "nearest") {
-			if (rect.top < bounding.top) {
+			if (rect.top < bounding.top + yMargin) {
 				moveY = rect.top - (bounding.top + yMargin);
 				if (side > 0 && rect.bottom > bounding.bottom + moveY) moveY = rect.bottom - bounding.bottom + yMargin;
-			} else if (rect.bottom > bounding.bottom) {
+			} else if (rect.bottom > bounding.bottom - yMargin) {
 				moveY = rect.bottom - bounding.bottom + yMargin;
 				if (side < 0 && rect.top - moveY < bounding.top) moveY = rect.top - (bounding.top + yMargin);
 			}
@@ -4542,35 +4612,37 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
 			moveY = (y == "center" && rectHeight <= boundingHeight ? rect.top + rectHeight / 2 - boundingHeight / 2 : y == "start" || y == "center" && side < 0 ? rect.top - yMargin : rect.bottom - boundingHeight + yMargin) - bounding.top;
 		}
 		if (x == "nearest") {
-			if (rect.left < bounding.left) {
+			if (rect.left < bounding.left + xMargin) {
 				moveX = rect.left - (bounding.left + xMargin);
 				if (side > 0 && rect.right > bounding.right + moveX) moveX = rect.right - bounding.right + xMargin;
-			} else if (rect.right > bounding.right) {
+			} else if (rect.right > bounding.right - xMargin) {
 				moveX = rect.right - bounding.right + xMargin;
 				if (side < 0 && rect.left < bounding.left + moveX) moveX = rect.left - (bounding.left + xMargin);
 			}
 		} else moveX = (x == "center" ? rect.left + (rect.right - rect.left) / 2 - (bounding.right - bounding.left) / 2 : x == "start" == ltr ? rect.left - xMargin : rect.right - (bounding.right - bounding.left) + xMargin) - bounding.left;
-		if (moveX || moveY) if (top) win.scrollBy(moveX, moveY);
-		else {
-			let movedX = 0, movedY = 0;
-			if (moveY) {
-				let start = cur.scrollTop;
-				cur.scrollTop += moveY / scaleY;
-				movedY = (cur.scrollTop - start) * scaleY;
-			}
-			if (moveX) {
-				let start = cur.scrollLeft;
-				cur.scrollLeft += moveX / scaleX;
-				movedX = (cur.scrollLeft - start) * scaleX;
-			}
-			rect = {
-				left: rect.left - movedX,
-				top: rect.top - movedY,
-				right: rect.right - movedX,
-				bottom: rect.bottom - movedY
-			};
-			if (movedX && Math.abs(movedX - moveX) < 1) x = "nearest";
-			if (movedY && Math.abs(movedY - moveY) < 1) y = "nearest";
+		if (moveX || moveY) {
+			if (top) win.scrollBy(moveX, moveY);
+			else {
+				let movedX = 0, movedY = 0;
+				if (moveY) {
+					let start = cur.scrollTop;
+					cur.scrollTop += moveY / scaleY;
+					movedY = (cur.scrollTop - start) * scaleY;
+				}
+				if (moveX) {
+					let start = cur.scrollLeft;
+					cur.scrollLeft += moveX / scaleX;
+					movedX = (cur.scrollLeft - start) * scaleX;
+				}
+				rect = {
+					left: rect.left - movedX,
+					top: rect.top - movedY,
+					right: rect.right - movedX,
+					bottom: rect.bottom - movedY
+				};
+				if (movedX && Math.abs(movedX - moveX) < 1) x = "nearest";
+				if (movedY && Math.abs(movedY - moveY) < 1) y = "nearest";
+			}
 		}
 		if (top) break;
 		if (rect.top < bounding.top || rect.bottom > bounding.bottom || rect.left < bounding.left || rect.right > bounding.right) rect = {
@@ -4583,12 +4655,12 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
 	} else if (cur.nodeType == 11) cur = cur.host;
 	else break;
 }
-function scrollableParents(dom) {
-	let doc = dom.ownerDocument, x, y;
-	for (let cur = dom.parentNode; cur;) if (cur == doc.body || x && y) break;
+function scrollableParents(dom, getX = true) {
+	let doc = dom.ownerDocument, x = null, y = null;
+	for (let cur = dom.parentNode; cur;) if (cur == doc.body || (!getX || x) && y) break;
 	else if (cur.nodeType == 1) {
 		if (!y && cur.scrollHeight > cur.clientHeight) y = cur;
-		if (!x && cur.scrollWidth > cur.clientWidth) x = cur;
+		if (getX && !x && cur.scrollWidth > cur.clientWidth) x = cur;
 		cur = cur.assignedSlot || cur.parentNode;
 	} else if (cur.nodeType == 11) cur = cur.host;
 	else break;
@@ -4618,27 +4690,34 @@ var DOMSelectionState = class {
 		this.focusOffset = focusOffset;
 	}
 };
+function getScrollStack(target) {
+	let stack = [];
+	for (let cur = target; cur; cur = cur.nodeType == 11 ? cur.host : cur.parentNode) if (cur.nodeType == 1) stack.push({
+		node: cur,
+		left: cur.scrollLeft,
+		top: cur.scrollTop
+	});
+	return stack;
+}
+function restoreScrollStack(stack, vert = true) {
+	for (let { node, left, top } of stack) {
+		if (vert && node.scrollTop != top) node.scrollTop = top;
+		if (node.scrollLeft != left) node.scrollLeft = left;
+	}
+}
 let preventScrollSupported = null;
 if (browser.safari && browser.safari_version >= 26) preventScrollSupported = false;
 function focusPreventScroll(dom) {
 	if (dom.setActive) return dom.setActive();
 	if (preventScrollSupported) return dom.focus(preventScrollSupported);
-	let stack = [];
-	for (let cur = dom; cur; cur = cur.parentNode) {
-		stack.push(cur, cur.scrollTop, cur.scrollLeft);
-		if (cur == cur.ownerDocument) break;
-	}
+	let stack = getScrollStack(dom);
 	dom.focus(preventScrollSupported == null ? { get preventScroll() {
 		preventScrollSupported = { preventScroll: true };
 		return true;
 	} } : void 0);
 	if (!preventScrollSupported) {
 		preventScrollSupported = false;
-		for (let i = 0; i < stack.length;) {
-			let elt = stack[i++], top = stack[i++], left = stack[i++];
-			if (elt.scrollTop != top) elt.scrollTop = top;
-			if (elt.scrollLeft != left) elt.scrollLeft = left;
-		}
+		restoreScrollStack(stack);
 	}
 }
 let scratchRange;
@@ -4691,6 +4770,7 @@ function atElementStart(doc, selection) {
 	}
 }
 function isScrolledToBottom(elt) {
+	if (elt instanceof Window) return elt.pageYOffset > Math.max(0, elt.document.documentElement.scrollHeight - elt.innerHeight - 4);
 	return elt.scrollTop > Math.max(1, elt.scrollHeight - elt.clientHeight - 4);
 }
 function textNodeBefore(startNode, startOffset) {
@@ -4737,7 +4817,7 @@ var DOMPos = class DOMPos {
 /**
 Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
 */
-var Direction = /* @__PURE__ */ (function(Direction) {
+var Direction = /*@__PURE__*/ (function(Direction) {
 	/**
 	Left-to-right.
 	*/
@@ -4748,21 +4828,23 @@ var Direction = /* @__PURE__ */ (function(Direction) {
 	Direction[Direction["RTL"] = 1] = "RTL";
 	return Direction;
 })(Direction || (Direction = {}));
-const LTR = Direction.LTR, RTL = Direction.RTL;
+const LTR = Direction.LTR;
+const RTL = Direction.RTL;
 function dec(str) {
 	let result = [];
 	for (let i = 0; i < str.length; i++) result.push(1 << +str[i]);
 	return result;
 }
-const LowTypes = /* @__PURE__ */ dec("88888888888888888888888888888888888666888888787833333333337888888000000000000000000000000008888880000000000000000000000000088888888888888888888888888888888888887866668888088888663380888308888800000000000000000000000800000000000000000000000000000008");
-const ArabicTypes = /* @__PURE__ */ dec("4444448826627288999999999992222222222222222222222222222222222222222222222229999999999999999999994444444444644222822222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999949999999229989999223333333333");
-const Brackets = /* @__PURE__ */ Object.create(null), BracketStack = [];
+const LowTypes = /*@__PURE__*/ dec("88888888888888888888888888888888888666888888787833333333337888888000000000000000000000000008888880000000000000000000000000088888888888888888888888888888888888887866668888088888663380888308888800000000000000000000000800000000000000000000000000000008");
+const ArabicTypes = /*@__PURE__*/ dec("4444448826627288999999999992222222222222222222222222222222222222222222222229999999999999999999994444444444644222822222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999949999999229989999223333333333");
+const Brackets = /*@__PURE__*/ Object.create(null);
+const BracketStack = [];
 for (let p of [
 	"()",
 	"[]",
 	"{}"
 ]) {
-	let l = /* @__PURE__ */ p.charCodeAt(0), r = /* @__PURE__ */ p.charCodeAt(1);
+	let l = /*@__PURE__*/ p.charCodeAt(0), r = /*@__PURE__*/ p.charCodeAt(1);
 	Brackets[l] = r;
 	Brackets[r] = -l;
 }
@@ -4840,9 +4922,10 @@ function computeCharTypes(line, rFrom, rTo, isolates, outerType) {
 		}
 		for (let i = from, prev = prevType, prevStrong = prevType; i < to; i++) {
 			let type = types[i];
-			if (type == 128) if (i < to - 1 && prev == types[i + 1] && prev & 24) type = types[i] = prev;
-			else types[i] = 256;
-			else if (type == 64) {
+			if (type == 128) {
+				if (i < to - 1 && prev == types[i + 1] && prev & 24) type = types[i] = prev;
+				else types[i] = 256;
+			} else if (type == 64) {
 				let end = i + 1;
 				while (end < to && types[end] == 64) end++;
 				let replace = i && prev == 8 || end < rTo && types[end] == 8 ? prevStrong == 1 ? 1 : 8 : 256;
@@ -4858,21 +4941,22 @@ function processBracketPairs(line, rFrom, rTo, isolates, outerType) {
 	let oppositeType = outerType == 1 ? 2 : 1;
 	for (let iI = 0, sI = 0, context = 0; iI <= isolates.length; iI++) {
 		let from = iI ? isolates[iI - 1].to : rFrom, to = iI < isolates.length ? isolates[iI].from : rTo;
-		for (let i = from, ch, br, type; i < to; i++) if (br = Brackets[ch = line.charCodeAt(i)]) if (br < 0) {
-			for (let sJ = sI - 3; sJ >= 0; sJ -= 3) if (BracketStack[sJ + 1] == -br) {
-				let flags = BracketStack[sJ + 2];
-				let type = flags & 2 ? outerType : !(flags & 4) ? 0 : flags & 1 ? oppositeType : outerType;
-				if (type) types[i] = types[BracketStack[sJ]] = type;
-				sI = sJ;
-				break;
+		for (let i = from, ch, br, type; i < to; i++) if (br = Brackets[ch = line.charCodeAt(i)]) {
+			if (br < 0) {
+				for (let sJ = sI - 3; sJ >= 0; sJ -= 3) if (BracketStack[sJ + 1] == -br) {
+					let flags = BracketStack[sJ + 2];
+					let type = flags & 2 ? outerType : !(flags & 4) ? 0 : flags & 1 ? oppositeType : outerType;
+					if (type) types[i] = types[BracketStack[sJ]] = type;
+					sI = sJ;
+					break;
+				}
+			} else if (BracketStack.length == 189) break;
+			else {
+				BracketStack[sI++] = i;
+				BracketStack[sI++] = ch;
+				BracketStack[sI++] = context;
 			}
-		} else if (BracketStack.length == 189) break;
-		else {
-			BracketStack[sI++] = i;
-			BracketStack[sI++] = ch;
-			BracketStack[sI++] = context;
-		}
-		else if ((type = types[i]) == 2 || type == 1) {
+		} else if ((type = types[i]) == 2 || type == 1) {
 			let embed = type == outerType;
 			context = embed ? 0 : 1;
 			for (let sJ = sI - 3; sJ >= 0; sJ -= 3) {
@@ -5035,20 +5119,20 @@ function autoDirection(text, from, to) {
 	}
 	return LTR;
 }
-const clickAddsSelectionRange = /* @__PURE__ */ Facet.define();
-const dragMovesSelection$1 = /* @__PURE__ */ Facet.define();
-const mouseSelectionStyle = /* @__PURE__ */ Facet.define();
-const exceptionSink = /* @__PURE__ */ Facet.define();
-const updateListener = /* @__PURE__ */ Facet.define();
-const inputHandler = /* @__PURE__ */ Facet.define();
-const focusChangeEffect = /* @__PURE__ */ Facet.define();
-const clipboardInputFilter = /* @__PURE__ */ Facet.define();
-const clipboardOutputFilter = /* @__PURE__ */ Facet.define();
-const perLineTextDirection = /* @__PURE__ */ Facet.define({ combine: (values) => values.some((x) => x) });
-const nativeSelectionHidden = /* @__PURE__ */ Facet.define({ combine: (values) => values.some((x) => x) });
-const scrollHandler = /* @__PURE__ */ Facet.define();
+const clickAddsSelectionRange = /*@__PURE__*/ Facet.define();
+const dragMovesSelection$1 = /*@__PURE__*/ Facet.define();
+const mouseSelectionStyle = /*@__PURE__*/ Facet.define();
+const exceptionSink = /*@__PURE__*/ Facet.define();
+const updateListener = /*@__PURE__*/ Facet.define();
+const inputHandler = /*@__PURE__*/ Facet.define();
+const focusChangeEffect = /*@__PURE__*/ Facet.define();
+const clipboardInputFilter = /*@__PURE__*/ Facet.define();
+const clipboardOutputFilter = /*@__PURE__*/ Facet.define();
+const perLineTextDirection = /*@__PURE__*/ Facet.define({ combine: (values) => values.some((x) => x) });
+const nativeSelectionHidden = /*@__PURE__*/ Facet.define({ combine: (values) => values.some((x) => x) });
+const scrollHandler = /*@__PURE__*/ Facet.define();
 var ScrollTarget = class ScrollTarget {
-	constructor(range, y = "nearest", x = "nearest", yMargin = 5, xMargin = 5, isSnapshot = false) {
+	constructor(range, y, x, yMargin, xMargin, isSnapshot = false) {
 		this.range = range;
 		this.y = y;
 		this.x = x;
@@ -5063,8 +5147,8 @@ var ScrollTarget = class ScrollTarget {
 		return this.range.to <= state.doc.length ? this : new ScrollTarget(EditorSelection.cursor(state.doc.length), this.y, this.x, this.yMargin, this.xMargin, this.isSnapshot);
 	}
 };
-const scrollIntoView = /* @__PURE__ */ StateEffect.define({ map: (t, ch) => t.map(ch) });
-const setEditContextFormatting = /* @__PURE__ */ StateEffect.define();
+const scrollIntoView = /*@__PURE__*/ StateEffect.define({ map: (t, ch) => t.map(ch) });
+const setEditContextFormatting = /*@__PURE__*/ StateEffect.define();
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -5084,9 +5168,9 @@ function logException(state, exception, context) {
 	else if (context) console.error(context + ":", exception);
 	else console.error(exception);
 }
-const editable = /* @__PURE__ */ Facet.define({ combine: (values) => values.length ? values[0] : true });
+const editable = /*@__PURE__*/ Facet.define({ combine: (values) => values.length ? values[0] : true });
 let nextPluginID = 0;
-const viewPlugin = /* @__PURE__ */ Facet.define({ combine(plugins) {
+const viewPlugin = /*@__PURE__*/ Facet.define({ combine(plugins) {
 	return plugins.filter((p, i) => {
 		for (let j = 0; j < i; j++) if (plugins[j].plugin == p.plugin) return false;
 		return true;
@@ -5189,13 +5273,13 @@ var PluginInstance = class {
 		this.spec = this.value = null;
 	}
 };
-const editorAttributes = /* @__PURE__ */ Facet.define();
-const contentAttributes = /* @__PURE__ */ Facet.define();
-const decorations = /* @__PURE__ */ Facet.define();
-const blockWrappers = /* @__PURE__ */ Facet.define();
-const outerDecorations = /* @__PURE__ */ Facet.define();
-const atomicRanges = /* @__PURE__ */ Facet.define();
-const bidiIsolatedRanges = /* @__PURE__ */ Facet.define();
+const editorAttributes = /*@__PURE__*/ Facet.define();
+const contentAttributes = /*@__PURE__*/ Facet.define();
+const decorations = /*@__PURE__*/ Facet.define();
+const blockWrappers = /*@__PURE__*/ Facet.define();
+const outerDecorations = /*@__PURE__*/ Facet.define();
+const atomicRanges = /*@__PURE__*/ Facet.define();
+const bidiIsolatedRanges = /*@__PURE__*/ Facet.define();
 function getIsolatedRanges(view, line) {
 	let isolates = view.state.facet(bidiIsolatedRanges);
 	if (!isolates.length) return isolates;
@@ -5227,7 +5311,7 @@ function getIsolatedRanges(view, line) {
 	});
 	return result;
 }
-const scrollMargins = /* @__PURE__ */ Facet.define();
+const scrollMargins = /*@__PURE__*/ Facet.define();
 function getScrollMargins(view) {
 	let left = 0, right = 0, top = 0, bottom = 0;
 	for (let source of view.state.facet(scrollMargins)) {
@@ -5246,7 +5330,7 @@ function getScrollMargins(view) {
 		bottom
 	};
 }
-const styleModule = /* @__PURE__ */ Facet.define();
+const styleModule = /*@__PURE__*/ Facet.define();
 var ChangedRange = class ChangedRange {
 	constructor(fromA, toA, fromB, toB) {
 		this.fromA = fromA;
@@ -5451,7 +5535,7 @@ var Tile = class {
 	covers(side) {
 		return true;
 	}
-	coordsIn(pos, side) {
+	coordsIn(pos, side, rtl) {
 		return null;
 	}
 	domPosFor(off, side) {
@@ -5632,10 +5716,10 @@ var LineTile = class LineTile extends CompositeTile {
 				let child = tile.children[i], end = off + child.length;
 				if (end >= pos) {
 					if (child.isComposite()) scan(child, pos - off);
-					else if ((!after || after.isHidden && (side > 0 || forCoords && onSameLine(after, child))) && (end > pos || child.flags & 32)) {
+					else if ((!after || after.isHidden && (side > 0 && !(after.flags & 32) || forCoords && onSameLine(after, child))) && (end > pos || child.flags & 32 && side <= 1)) {
 						after = child;
 						afterOff = pos - off;
-					} else if (off < pos || child.flags & 16 && !child.isHidden) {
+					} else if (off < pos || child.flags & 16 && !child.isHidden && side >= -1) {
 						before = child;
 						beforeOff = pos - off;
 					}
@@ -5650,10 +5734,10 @@ var LineTile = class LineTile extends CompositeTile {
 			offset: target == before ? beforeOff : afterOff
 		} : null;
 	}
-	coordsIn(pos, side) {
+	coordsIn(pos, side, rtl) {
 		let found = this.resolveInline(pos, side, true);
 		if (!found) return fallbackRect(this);
-		return found.tile.coordsIn(Math.max(0, found.offset), side);
+		return found.tile.coordsIn(Math.max(0, found.offset), side, rtl);
 	}
 	domIn(pos, side) {
 		let found = this.resolveInline(pos, side);
@@ -5715,7 +5799,7 @@ var TextTile = class TextTile extends Tile {
 	toString() {
 		return JSON.stringify(this.text);
 	}
-	coordsIn(pos, side) {
+	coordsIn(pos, side, rtl) {
 		let length = this.dom.nodeValue.length;
 		if (pos > length) pos = length;
 		let from = pos, to = pos, flatten = 0;
@@ -5735,7 +5819,7 @@ var TextTile = class TextTile extends Tile {
 		if (!rects.length) return null;
 		let rect = rects[(flatten ? flatten < 0 : side >= 0) ? 0 : rects.length - 1];
 		if (browser.safari && !flatten && rect.width == 0) rect = Array.prototype.find.call(rects, (r) => r.width) || rect;
-		return flatten ? flattenRect(rect, flatten < 0) : rect || null;
+		return rtl == null ? rect : flattenRect(rect, (flatten ? flatten > 0 : side < 0) == rtl);
 	}
 	static of(text, dom) {
 		let tile = new TextTile(dom || document.createTextNode(text), text);
@@ -5808,8 +5892,9 @@ var WidgetBufferTile = class extends Tile {
 	get overrideDOMText() {
 		return Text.empty;
 	}
-	coordsIn(pos) {
-		return this.dom.getBoundingClientRect();
+	coordsIn(pos, side, rtl) {
+		let rect = this.dom.getBoundingClientRect();
+		return rtl == null ? rect : flattenRect(rect, side > 0 == rtl);
 	}
 };
 var TilePointer = class {
@@ -5821,18 +5906,20 @@ var TilePointer = class {
 	}
 	advance(dist, side, walker) {
 		let { tile, index, beforeBreak, parents } = this;
-		while (dist || side > 0) if (!tile.isComposite()) if (index == tile.length) {
-			beforeBreak = !!tile.breakAfter;
-			({tile, index} = parents.pop());
-			index++;
-		} else if (!dist) break;
-		else {
-			let take = Math.min(dist, tile.length - index);
-			if (walker) walker.skip(tile, index, index + take);
-			dist -= take;
-			index += take;
-		}
-		else if (beforeBreak) {
+		while (dist || side > 0) if (!tile.isComposite()) {
+			let len = tile.length;
+			if (index < len && dist) {
+				let take = Math.min(dist, len - index);
+				if (walker) walker.skip(tile, index, index + take);
+				dist -= take;
+				index += take;
+			}
+			if (index == len) {
+				beforeBreak = !!tile.breakAfter;
+				({tile, index} = parents.pop());
+				index++;
+			} else if (!dist) break;
+		} else if (beforeBreak) {
 			if (!dist) break;
 			if (walker) walker.break();
 			dist--;
@@ -5893,7 +5980,7 @@ var TileBuilder = class {
 		this.flushBuffer();
 		let parent = this.ensureMarks(marks, openStart);
 		let prev = parent.lastChild;
-		if (prev && prev.isText() && !(prev.flags & 8)) {
+		if (prev && prev.isText() && !(prev.flags & 8) && prev.length + text.length < 512) {
 			this.cache.reused.set(prev, 2);
 			let tile = parent.children[parent.children.length - 1] = new TextTile(prev.dom, prev.text + text);
 			tile.parent = parent;
@@ -5929,6 +6016,7 @@ var TileBuilder = class {
 		if (oldTile) this.cache.reused.set(oldTile, 2);
 		let text = new TextTile(composition.text, composition.text.nodeValue);
 		text.flags |= 8;
+		this.pos = composition.range.toB;
 		head.append(text);
 	}
 	addInlineWidget(widget, marks, openStart) {
@@ -6012,7 +6100,8 @@ var TileBuilder = class {
 		}
 		for (let i = this.wrappers.length - 1; i >= 0; i--) if (this.wrappers[i].to < this.pos) this.wrappers.splice(i, 1);
 		for (let cur = this.blockWrappers; cur.value && cur.from <= this.pos; cur.next()) if (cur.to >= this.pos) {
-			let wrap = new OpenWrapper(cur.from, cur.to, cur.value, cur.rank), i = this.wrappers.length;
+			let rank = cur.rank * 102 + cur.value.rank;
+			let wrap = new OpenWrapper(cur.from, cur.to, cur.value, rank), i = this.wrappers.length;
 			while (i > 0 && (this.wrappers[i - 1].rank - wrap.rank || this.wrappers[i - 1].to - wrap.to) < 0) i--;
 			this.wrappers.splice(i, 0, wrap);
 		}
@@ -6105,7 +6194,7 @@ var TileCache = class {
 	find(cls, test, type = 2) {
 		let i = cls.bucket;
 		let bucket = this.buckets[i], off = this.index[i];
-		for (let j = bucket.length - 1; j >= 0; j--) {
+		for (let j = 0; j < bucket.length; j++) {
 			let index = (j + off) % bucket.length, tile = bucket[index];
 			if ((!test || test(tile)) && !this.reused.has(tile)) {
 				bucket.splice(index, 1);
@@ -6125,7 +6214,7 @@ var TileCache = class {
 				i = 0;
 			}
 			let tile = widgets[i];
-			if (!this.reused.has(tile) && (pass == 0 ? tile.widget.compare(widget) : tile.widget.constructor == widget.constructor && widget.updateDOM(tile.dom, this.view))) {
+			if (!this.reused.has(tile) && (pass == 0 ? tile.widget.compare(widget) : tile.widget.constructor == widget.constructor && widget.updateDOM(tile.dom, this.view, tile.widget))) {
 				widgets.splice(i, 1);
 				if (i < this.index[0]) this.index[0]--;
 				if (tile.widget == widget && tile.length == length && (tile.flags & 497) == flags) {
@@ -6188,6 +6277,7 @@ var TileUpdate = class {
 			if (composition && next.fromA <= composition.range.fromA && next.toA >= composition.range.toA) {
 				this.forward(next.fromA, composition.range.fromA, composition.range.fromA < composition.range.toA ? 1 : -1);
 				this.emit(posB, composition.range.fromB);
+				this.builder.flushBuffer();
 				this.cache.clear();
 				this.builder.addComposition(composition, compositionContext);
 				this.text.skip(composition.range.toB - composition.range.fromB);
@@ -6207,21 +6297,22 @@ var TileUpdate = class {
 		let activeMarks = getMarks(this.old), openMarks = this.openMarks;
 		this.old.advance(length, incEnd ? 1 : -1, {
 			skip: (tile, from, to) => {
-				if (tile.isWidget()) if (this.openWidget) this.builder.continueWidget(to - from);
-				else {
-					let widget = to > 0 || from < tile.length ? WidgetTile.of(tile.widget, this.view, to - from, tile.flags & 496, this.cache.maybeReuse(tile)) : this.cache.reuse(tile);
-					if (widget.flags & 256) {
-						widget.flags &= -2;
-						this.builder.addBlockWidget(widget);
-					} else {
-						this.builder.ensureLine(null);
-						this.builder.addInlineWidget(widget, activeMarks, openMarks);
-						openMarks = activeMarks.length;
+				if (tile.isWidget()) {
+					if (this.openWidget) this.builder.continueWidget(to - from);
+					else {
+						let widget = to > 0 || from < tile.length ? WidgetTile.of(tile.widget, this.view, to - from, tile.flags & 496, this.cache.maybeReuse(tile)) : this.cache.reuse(tile);
+						if (widget.flags & 256) {
+							widget.flags &= -2;
+							this.builder.addBlockWidget(widget);
+						} else {
+							this.builder.ensureLine(null);
+							this.builder.addInlineWidget(widget, activeMarks, openMarks);
+							openMarks = activeMarks.length;
+						}
 					}
-				}
-				else if (tile.isText()) {
+				} else if (tile.isText()) {
 					this.builder.ensureLine(null);
-					if (!from && to == tile.length) this.builder.addText(tile.text, activeMarks, openMarks, this.cache.reuse(tile));
+					if (!from && to == tile.length && !this.cache.reused.has(tile)) this.builder.addText(tile.text, activeMarks, openMarks, this.cache.reuse(tile));
 					else {
 						this.cache.add(tile);
 						this.builder.addText(tile.text.slice(from, to), activeMarks, openMarks);
@@ -6265,7 +6356,7 @@ var TileUpdate = class {
 	}
 	emit(from, to) {
 		let pendingLineAttrs = null;
-		let b = this.builder, markCount = 0;
+		let b = this.builder, markCount = -1;
 		let openEnd = RangeSet.spans(this.decorations, from, to, {
 			point: (from, to, deco, active, openStart, index) => {
 				if (deco instanceof PointDecoration) {
@@ -6300,15 +6391,16 @@ var TileUpdate = class {
 						pos++;
 					} else {
 						b.ensureLine(pendingLineAttrs);
-						b.addText(chars, active, openStart);
+						b.addText(chars, active, pos == from ? openStart : active.length);
 						pos += chars.length;
 					}
 					pendingLineAttrs = null;
 				}
+				markCount = active.length;
 			}
 		});
-		b.addLineStartIfNotCovered(pendingLineAttrs);
-		this.openWidget = openEnd > markCount;
+		if (markCount > -1) this.openWidget = openEnd > markCount;
+		if (!this.openWidget) b.addLineStartIfNotCovered(pendingLineAttrs);
 		this.openMarks = openEnd;
 	}
 	forward(from, to, side = 1) {
@@ -6326,8 +6418,9 @@ var TileUpdate = class {
 			if (parent == this.view.contentDOM) break;
 			if (tile instanceof MarkTile) marks.push(tile);
 			else if (tile === null || tile === void 0 ? void 0 : tile.isLine()) line = tile;
+			else if (tile instanceof BlockWrapperTile);
 			else if (parent.nodeName == "DIV" && !line && parent != this.view.contentDOM) line = new LineTile(parent, lineBaseAttrs);
-			else marks.push(MarkTile.of(new MarkDecoration({
+			else if (!line) marks.push(MarkTile.of(new MarkDecoration({
 				tagName: parent.nodeName.toLowerCase(),
 				attributes: getAttrs(parent)
 			}), parent));
@@ -6390,9 +6483,9 @@ var NullWidget = class extends WidgetType {
 		return true;
 	}
 };
-NullWidget.inline = /* @__PURE__ */ new NullWidget("span");
-NullWidget.block = /* @__PURE__ */ new NullWidget("div");
-const BreakWidget = /* @__PURE__ */ new class extends WidgetType {
+NullWidget.inline = /*@__PURE__*/ new NullWidget("span");
+NullWidget.block = /*@__PURE__*/ new NullWidget("div");
+const BreakWidget = /*@__PURE__*/ new class extends WidgetType {
 	toDOM() {
 		return document.createElement("br");
 	}
@@ -6427,10 +6520,12 @@ var DocView = class {
 	update(update) {
 		var _a;
 		let changedRanges = update.changedRanges;
-		if (this.minWidth > 0 && changedRanges.length) if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) this.minWidth = this.minWidthFrom = this.minWidthTo = 0;
-		else {
-			this.minWidthFrom = update.changes.mapPos(this.minWidthFrom, 1);
-			this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
+		if (this.minWidth > 0 && changedRanges.length) {
+			if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) this.minWidth = this.minWidthFrom = this.minWidthTo = 0;
+			else {
+				this.minWidthFrom = update.changes.mapPos(this.minWidthFrom, 1);
+				this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
+			}
 		}
 		this.updateEditContextFormatting(update);
 		let readCompositionAt = -1;
@@ -6470,6 +6565,7 @@ var DocView = class {
 			if (composition || changes.length) {
 				let oldTile = this.tile;
 				let builder = new TileUpdate(this.view, oldTile, this.blockWrappers, this.decorations, this.dynamicDecorationMap);
+				if (composition && Tile.get(composition.text)) builder.cache.reused.set(Tile.get(composition.text), 2);
 				this.tile = builder.run(changes, composition);
 				destroyDropped(oldTile, builder.cache.reused);
 			}
@@ -6589,8 +6685,10 @@ var DocView = class {
 				for (;;) {
 					let parent = node.parentNode;
 					if (parent == tile.dom) break;
-					if (bias == 0 && parent.firstChild != parent.lastChild) if (node == parent.firstChild) bias = -1;
-					else bias = 1;
+					if (bias == 0 && parent.firstChild != parent.lastChild) {
+						if (node == parent.firstChild) bias = -1;
+						else bias = 1;
+					}
 					node = parent;
 				}
 				if (bias < 0) after = node;
@@ -6609,7 +6707,7 @@ var DocView = class {
 	}
 	domAtPos(pos, side) {
 		let { tile, offset } = this.tile.resolveBlock(pos, side);
-		if (tile.isWidget()) return tile.domPosFor(pos, side);
+		if (tile.isWidget()) return tile.domPosFor(offset, side);
 		return tile.domIn(offset, side);
 	}
 	inlineDOMNearPos(pos, side) {
@@ -6639,13 +6737,13 @@ var DocView = class {
 		else if (afterBad && before) after = null;
 		return before && side < 0 || !after ? before.domIn(beforeOff, side) : after.domIn(afterOff, side);
 	}
-	coordsAt(pos, side) {
+	coordsAt(pos, side, rtl) {
 		let { tile, offset } = this.tile.resolveBlock(pos, side);
 		if (tile.isWidget()) {
 			if (tile.widget instanceof BlockGapWidget) return null;
 			return tile.coordsInWidget(offset, side, true);
 		}
-		return tile.coordsIn(offset, side);
+		return tile.coordsIn(offset, side, rtl);
 	}
 	lineAt(pos, side) {
 		let { tile } = this.tile.resolveBlock(pos, side);
@@ -6813,7 +6911,7 @@ var DocView = class {
 			logException(this.view.state, e, "scroll handler");
 		}
 		let { range } = target;
-		let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
+		let rect = this.coordsAt(range.head, range.assoc || (range.head > range.anchor ? -1 : 1)), other;
 		if (!rect) return;
 		if (!range.empty && (other = this.coordsAt(range.anchor, range.anchor > range.head ? -1 : 1))) rect = {
 			left: Math.min(rect.left, other.left),
@@ -6830,6 +6928,14 @@ var DocView = class {
 		};
 		let { offsetWidth, offsetHeight } = this.view.scrollDOM;
 		scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, Math.max(Math.min(target.xMargin, offsetWidth), -offsetWidth), Math.max(Math.min(target.yMargin, offsetHeight), -offsetHeight), this.view.textDirection == Direction.LTR);
+		if (window.visualViewport && window.innerHeight - window.visualViewport.height > 1 && (rect.top > window.visualViewport.offsetTop + window.visualViewport.height || rect.bottom < window.visualViewport.offsetTop)) {
+			let line = this.view.docView.lineAt(range.head, 1);
+			if (line) {
+				let stack = getScrollStack(line.dom);
+				line.dom.scrollIntoView({ block: "nearest" });
+				restoreScrollStack(stack, false);
+			}
+		}
 	}
 	lineHasWidget(pos) {
 		let scan = (child) => child.isWidget() || child.children.some(scan);
@@ -6983,7 +7089,7 @@ function groupAt(state, pos, bias = 1) {
 		if (categorize(line.text.slice(to, next)) != cat) break;
 		to = next;
 	}
-	return EditorSelection.range(from + line.from, to + line.from);
+	return EditorSelection.undirectionalRange(from + line.from, to + line.from);
 }
 function posAtCoordsImprecise(view, contentRect, block, x, y) {
 	let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
@@ -7056,7 +7162,8 @@ function moveVertically(view, start, forward, distance) {
 	if (startPos == (forward ? view.state.doc.length : 0)) return EditorSelection.cursor(startPos, start.assoc);
 	let goal = start.goalColumn, startY;
 	let rect = view.contentDOM.getBoundingClientRect();
-	let startCoords = view.coordsAtPos(startPos, start.assoc || -1), docTop = view.documentTop;
+	let startCoords = view.coordsAtPos(startPos, start.assoc || ((start.empty ? forward : start.head == start.from) ? 1 : -1));
+	let docTop = view.documentTop;
 	if (startCoords) {
 		if (goal == null) goal = startCoords.left - rect.left;
 		startY = dir < 0 ? startCoords.top : startCoords.bottom;
@@ -7066,12 +7173,17 @@ function moveVertically(view, start, forward, distance) {
 		startY = (dir < 0 ? line.top : line.bottom) + docTop;
 	}
 	let resolvedGoal = rect.left + goal;
-	let dist = distance !== null && distance !== void 0 ? distance : view.viewState.heightOracle.textHeight >> 1;
-	let pos = posAtCoords(view, {
-		x: resolvedGoal,
-		y: startY + dist * dir
-	}, false, dir);
-	return EditorSelection.cursor(pos.pos, pos.assoc, void 0, goal);
+	let halfText = view.viewState.heightOracle.textHeight >> 1, dist = distance !== null && distance !== void 0 ? distance : halfText;
+	for (let scan = 0;; scan += halfText) {
+		let y = startY + (dist + scan) * dir;
+		let pos = posAtCoords(view, {
+			x: resolvedGoal,
+			y
+		}, false, dir);
+		if (forward ? y > rect.bottom : y < rect.top) return EditorSelection.cursor(pos.pos, pos.assoc);
+		let posCoords = view.coordsAtPos(pos.pos, pos.assoc), mid = posCoords ? (posCoords.top + posCoords.bottom) / 2 : 0;
+		if (!posCoords || (forward ? mid > startY : mid < startY)) return EditorSelection.cursor(pos.pos, pos.assoc, void 0, goal);
+	}
 }
 function skipAtomicRanges(atoms, pos, bias) {
 	for (;;) {
@@ -7096,7 +7208,10 @@ function skipAtomsForSelection(atoms, sel) {
 		} else {
 			let from = skipAtomicRanges(atoms, range.from, -1);
 			let to = skipAtomicRanges(atoms, range.to, 1);
-			if (from != range.from || to != range.to) updated = EditorSelection.range(range.from == range.anchor ? from : to, range.from == range.head ? from : to);
+			if (from != range.from || to != range.to) {
+				if (range.undirectional) updated = EditorSelection.undirectionalRange(range.from, range.to);
+				else updated = EditorSelection.range(range.from == range.anchor ? from : to, range.from == range.head ? from : to);
+			}
 		}
 		if (updated) {
 			if (!ranges) ranges = sel.ranges.slice();
@@ -7124,7 +7239,8 @@ function posAtCoords(view, coords, precise, scanY) {
 		block = view.elementAtHeight(yOffset);
 		if (scanY == null) break;
 		if (block.type == BlockType.Text) {
-			let rect = view.docView.coordsAt(scanY < 0 ? block.from : block.to, scanY);
+			if (scanY < 0 ? block.to < view.viewport.from : block.from > view.viewport.to) break;
+			let rect = view.docView.coordsAt(scanY < 0 ? block.from : block.to, scanY > 0 ? -1 : 1);
 			if (rect && (scanY < 0 ? rect.top <= yOffset + docTop : rect.bottom >= yOffset + docTop)) break;
 		}
 		let halfLine = view.viewState.heightOracle.textHeight / 2;
@@ -7140,57 +7256,135 @@ function posAtCoords(view, coords, precise, scanY) {
 	if (block.type != BlockType.Text) return yOffset < (block.top + block.bottom) / 2 ? new PosAssoc(block.from, 1) : new PosAssoc(block.to, -1);
 	let line = view.docView.lineAt(block.from, 2);
 	if (!line || line.length != block.length) line = view.docView.lineAt(block.from, -2);
-	return posAtCoordsInline(view, line, block.from, x, y);
-}
-function posAtCoordsInline(view, tile, offset, x, y) {
-	let closest = -1, closestRect = null;
-	let dxClosest = 1e9, dyClosest = 1e9;
-	let rowTop = y, rowBot = y;
-	let checkRects = (rects, index) => {
-		for (let i = 0; i < rects.length; i++) {
-			let rect = rects[i];
-			if (rect.top == rect.bottom) continue;
-			let dx = rect.left > x ? rect.left - x : rect.right < x ? x - rect.right : 0;
-			let dy = rect.top > y ? rect.top - y : rect.bottom < y ? y - rect.bottom : 0;
-			if (rect.top <= rowBot && rect.bottom >= rowTop) {
-				rowTop = Math.min(rect.top, rowTop);
-				rowBot = Math.max(rect.bottom, rowBot);
-				dy = 0;
-			}
-			if (closest < 0 || (dy - dyClosest || dx - dxClosest) < 0) if (closest >= 0 && dyClosest && dxClosest < dx && closestRect.top <= rowBot - 2 && closestRect.bottom >= rowTop + 2) dyClosest = 0;
-			else {
-				closest = index;
-				dxClosest = dx;
-				dyClosest = dy;
-				closestRect = rect;
+	return new InlineCoordsScan(view, x, y, view.textDirectionAt(block.from)).scanTile(line, block.from);
+}
+var InlineCoordsScan = class {
+	constructor(view, x, y, baseDir) {
+		this.view = view;
+		this.x = x;
+		this.y = y;
+		this.baseDir = baseDir;
+		this.line = null;
+		this.spans = null;
+	}
+	bidiSpansAt(pos) {
+		if (!this.line || this.line.from > pos || this.line.to < pos) {
+			this.line = this.view.state.doc.lineAt(pos);
+			this.spans = this.view.bidiSpans(this.line);
+		}
+		return this;
+	}
+	baseDirAt(pos, side) {
+		let { line, spans } = this.bidiSpansAt(pos);
+		return spans[BidiSpan.find(spans, pos - line.from, -1, side)].level == this.baseDir;
+	}
+	dirAt(pos, side) {
+		let { line, spans } = this.bidiSpansAt(pos);
+		return spans[BidiSpan.find(spans, pos - line.from, -1, side)].dir;
+	}
+	bidiIn(from, to) {
+		let { spans, line } = this.bidiSpansAt(from);
+		return spans.length > 1 || spans.length && (spans[0].level != this.baseDir || spans[0].to + line.from < to);
+	}
+	scan(positions, getRects, recursed = false) {
+		let lo = 0, hi = positions.length - 1, seen = /* @__PURE__ */ new Set();
+		let bidi = this.bidiIn(positions[0], positions[hi]);
+		let above, below;
+		let closestI = -1, closestDx = 1e9, closestRect;
+		search: while (lo < hi) {
+			let dist = hi - lo, mid = lo + hi >> 1;
+			adjust: if (seen.has(mid)) {
+				for (let i = 1; i < dist; i++) {
+					let scan = mid + i;
+					if (scan >= hi) scan -= dist;
+					if (!seen.has(scan)) {
+						mid = scan;
+						break adjust;
+					}
+				}
+				break search;
+			}
+			seen.add(mid);
+			let rects = getRects(mid), side = 0;
+			if (rects) for (let i = 0; i < rects.length; i++) {
+				let rect = rects[i];
+				if (rect.width == 0 && rects.length > 1) continue;
+				if (rect.bottom < this.y) {
+					if (!above || above.bottom < rect.bottom) above = rect;
+					side = 1;
+				} else if (rect.top > this.y) {
+					if (!below || below.top > rect.top) below = rect;
+					side = -1;
+				} else {
+					let off = rect.left > this.x ? this.x - rect.left : rect.right < this.x ? this.x - rect.right : 0;
+					let dx = Math.abs(off);
+					if (dx < closestDx) {
+						closestI = mid;
+						closestDx = dx;
+						closestRect = rect;
+					}
+					if (off) side = off < 0 == (this.baseDir == Direction.LTR) ? -1 : 1;
+				}
 			}
+			if (side == -1 && (!bidi || this.baseDirAt(positions[mid], 1))) hi = mid;
+			else if (side == 1 && (!bidi || this.baseDirAt(positions[mid + 1], -1))) lo = mid + 1;
 		}
-	};
-	if (tile.isText()) {
-		for (let i = 0; i < tile.length;) {
-			let next = findClusterBreak(tile.text, i);
-			checkRects(textRange(tile.dom, i, next).getClientRects(), i);
-			if (!dxClosest && !dyClosest) break;
-			i = next;
-		}
-		return x > (closestRect.left + closestRect.right) / 2 == (dirAt(view, closest + offset) == Direction.LTR) ? new PosAssoc(offset + findClusterBreak(tile.text, closest), -1) : new PosAssoc(offset + closest, 1);
-	} else {
+		if (!closestRect) {
+			if (!below && !above) return {
+				i: positions[0],
+				after: false
+			};
+			let side = above && (!below || this.y - above.bottom < below.top - this.y) ? above : below;
+			this.y = (side.top + side.bottom) / 2;
+			return this.scan(positions, getRects, true);
+		}
+		if (closestDx && !recursed) {
+			let { top, bottom } = closestRect;
+			if (above && above.bottom > (top + top + bottom) / 3) {
+				this.y = above.bottom - 1;
+				return this.scan(positions, getRects, true);
+			}
+			if (below && below.top < (top + bottom + bottom) / 3) {
+				this.y = below.top + 1;
+				return this.scan(positions, getRects, true);
+			}
+		}
+		let ltr = (bidi ? this.dirAt(positions[closestI], 1) : this.baseDir) == Direction.LTR;
+		return {
+			i: closestI,
+			after: this.x > (closestRect.left + closestRect.right) / 2 == ltr
+		};
+	}
+	scanText(tile, offset) {
+		let positions = [];
+		for (let i = 0; i < tile.length; i = findClusterBreak(tile.text, i)) positions.push(offset + i);
+		positions.push(offset + tile.length);
+		let scan = this.scan(positions, (i) => {
+			let off = positions[i] - offset, end = positions[i + 1] - offset;
+			return textRange(tile.dom, off, end).getClientRects();
+		});
+		return scan.after ? new PosAssoc(positions[scan.i + 1], -1) : new PosAssoc(positions[scan.i], 1);
+	}
+	scanTile(tile, offset) {
 		if (!tile.length) return new PosAssoc(offset, 1);
-		for (let i = 0; i < tile.children.length; i++) {
+		if (tile.children.length == 1) {
+			let child = tile.children[0];
+			if (child.isText()) return this.scanText(child, offset);
+			else if (child.isComposite()) return this.scanTile(child, offset);
+		}
+		let positions = [offset];
+		for (let i = 0, pos = offset; i < tile.children.length; i++) positions.push(pos += tile.children[i].length);
+		let scan = this.scan(positions, (i) => {
 			let child = tile.children[i];
-			if (child.flags & 48) continue;
-			checkRects((child.dom.nodeType == 1 ? child.dom : textRange(child.dom, 0, child.length)).getClientRects(), i);
-			if (!dxClosest && !dyClosest) break;
-		}
-		let inner = tile.children[closest], innerOff = tile.posBefore(inner, offset);
-		if (inner.isComposite() || inner.isText()) return posAtCoordsInline(view, inner, innerOff, Math.max(closestRect.left, Math.min(closestRect.right, x)), y);
-		return x > (closestRect.left + closestRect.right) / 2 == (dirAt(view, closest + offset) == Direction.LTR) ? new PosAssoc(innerOff + inner.length, -1) : new PosAssoc(innerOff, 1);
+			if (child.flags & 48) return null;
+			return (child.dom.nodeType == 1 ? child.dom : textRange(child.dom, 0, child.length)).getClientRects();
+		});
+		let child = tile.children[scan.i], pos = positions[scan.i];
+		if (child.isText()) return this.scanText(child, pos);
+		if (child.isComposite()) return this.scanTile(child, pos);
+		return scan.after ? new PosAssoc(positions[scan.i + 1], -1) : new PosAssoc(pos, 1);
 	}
-}
-function dirAt(view, pos) {
-	let line = view.state.doc.lineAt(pos);
-	return view.bidiSpans(line)[BidiSpan.find(view.bidiSpans(line), pos - line.from, -1, 1)].dir;
-}
+};
 const LineBreakPlaceholder = "￿";
 var DOMReader = class {
 	constructor(points, view) {
@@ -7299,7 +7493,7 @@ var DOMChange = class {
 		this.bounds = null;
 		this.text = "";
 		this.domChanged = start > -1;
-		let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView;
+		let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView, curSel = view.state.selection;
 		if (view.state.readOnly && start > -1) this.newSel = null;
 		else if (start > -1 && (this.bounds = domBoundsAround(view.docView.tile, start, end, 0))) {
 			let selPoints = iHead || iAnchor ? [] : selectionPoints(view);
@@ -7309,10 +7503,10 @@ var DOMChange = class {
 			this.newSel = selectionFromPoints(selPoints, this.bounds.from);
 		} else {
 			let domSel = view.observer.selectionRange;
-			let head = iHead && iHead.node == domSel.focusNode && iHead.offset == domSel.focusOffset || !contains(view.contentDOM, domSel.focusNode) ? view.state.selection.main.head : view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset);
-			let anchor = iAnchor && iAnchor.node == domSel.anchorNode && iAnchor.offset == domSel.anchorOffset || !contains(view.contentDOM, domSel.anchorNode) ? view.state.selection.main.anchor : view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset);
+			let head = iHead && iHead.node == domSel.focusNode && iHead.offset == domSel.focusOffset || !contains(view.contentDOM, domSel.focusNode) ? curSel.main.head : view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset);
+			let anchor = iAnchor && iAnchor.node == domSel.anchorNode && iAnchor.offset == domSel.anchorOffset || !contains(view.contentDOM, domSel.anchorNode) ? curSel.main.anchor : view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset);
 			let vp = view.viewport;
-			if ((browser.ios || browser.chrome) && view.state.selection.main.empty && head != anchor && (vp.from > 0 || vp.to < view.state.doc.length)) {
+			if ((browser.ios || browser.chrome) && head != anchor && Math.min(head, anchor) <= curSel.main.from && Math.max(head, anchor) >= curSel.main.to && (vp.from > 0 || vp.to < view.state.doc.length)) {
 				let from = Math.min(head, anchor), to = Math.max(head, anchor);
 				let offFrom = vp.from - from, offTo = vp.to - to;
 				if ((offFrom == 0 || offFrom == 1 || from == 0) && (offTo == 0 || offTo == -1 || to == view.state.doc.length)) {
@@ -7320,8 +7514,12 @@ var DOMChange = class {
 					anchor = view.state.doc.length;
 				}
 			}
-			if (view.inputState.composing > -1 && view.state.selection.ranges.length > 1) this.newSel = view.state.selection.replaceRange(EditorSelection.range(anchor, head));
-			else this.newSel = EditorSelection.single(anchor, head);
+			if (view.inputState.composing > -1 && curSel.ranges.length > 1) this.newSel = curSel.replaceRange(EditorSelection.range(anchor, head));
+			else if (view.lineWrapping && anchor == head && !(curSel.main.empty && curSel.main.head == head) && view.inputState.lastTouchTime > Date.now() - 100) {
+				let before = view.coordsAtPos(head, -1), assoc = 0;
+				if (before) assoc = view.inputState.lastTouchY <= before.bottom ? -1 : 1;
+				this.newSel = EditorSelection.create([EditorSelection.cursor(head, assoc)]);
+			} else this.newSel = EditorSelection.single(anchor, head);
 		}
 	}
 };
@@ -7359,7 +7557,7 @@ function domBoundsAround(tile, from, to, offset) {
 }
 function applyDOMChange(view, domChange) {
 	let change;
-	let { newSel } = domChange, sel = view.state.selection.main;
+	let { newSel } = domChange, { state } = view, sel = state.selection.main;
 	let lastKey = view.inputState.lastKeyTime > Date.now() - 100 ? view.inputState.lastKeyCode : -1;
 	if (domChange.bounds) {
 		let { from, to } = domChange.bounds;
@@ -7368,38 +7566,33 @@ function applyDOMChange(view, domChange) {
 			preferredPos = sel.to;
 			preferredSide = "end";
 		}
-		let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), domChange.text, preferredPos - from, preferredSide);
-		if (diff) {
-			if (browser.chrome && lastKey == 13 && diff.toB == diff.from + 2 && domChange.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder) diff.toB--;
+		let cmp = state.doc.sliceString(from, to, LineBreakPlaceholder), selEnd, diff;
+		if (!sel.empty && sel.from >= from && sel.to <= to && (domChange.typeOver || cmp != domChange.text) && cmp.slice(0, sel.from - from) == domChange.text.slice(0, sel.from - from) && cmp.slice(sel.to - from) == domChange.text.slice(selEnd = domChange.text.length - (cmp.length - (sel.to - from)))) change = {
+			from: sel.from,
+			to: sel.to,
+			insert: Text.of(domChange.text.slice(sel.from - from, selEnd).split(LineBreakPlaceholder))
+		};
+		else if (diff = findDiff(cmp, domChange.text, preferredPos - from, preferredSide)) {
+			if (browser.chrome && lastKey == 13 && diff.toB == diff.from + 2 && domChange.text.slice(diff.from, diff.toB) == "￿￿") diff.toB--;
 			change = {
 				from: from + diff.from,
 				to: from + diff.toA,
 				insert: Text.of(domChange.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder))
 			};
 		}
-	} else if (newSel && (!view.hasFocus && view.state.facet(editable) || sameSelPos(newSel, sel))) newSel = null;
+	} else if (newSel && (!view.hasFocus && state.facet(editable) || sameSelPos(newSel, sel))) newSel = null;
 	if (!change && !newSel) return false;
-	if (!change && domChange.typeOver && !sel.empty && newSel && newSel.main.empty) change = {
-		from: sel.from,
-		to: sel.to,
-		insert: view.state.doc.slice(sel.from, sel.to)
-	};
-	else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 && /^\. ?$/.test(change.insert.toString()) && view.contentDOM.getAttribute("autocorrect") == "off") {
+	if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 && /^\. ?$/.test(change.insert.toString()) && view.contentDOM.getAttribute("autocorrect") == "off") {
 		if (newSel && change.insert.length == 2) newSel = EditorSelection.single(newSel.main.anchor - 1, newSel.main.head - 1);
 		change = {
 			from: change.from,
 			to: change.to,
 			insert: Text.of([change.insert.toString().replace(".", " ")])
 		};
-	} else if (change && change.from >= sel.from && change.to <= sel.to && (change.from != sel.from || change.to != sel.to) && sel.to - sel.from - (change.to - change.from) <= 4) change = {
-		from: sel.from,
-		to: sel.to,
-		insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
-	};
-	else if (view.state.doc.lineAt(sel.from).to < sel.to && view.docView.lineHasWidget(sel.to) && view.inputState.insertingTextAt > Date.now() - 50) change = {
+	} else if (state.doc.lineAt(sel.from).to < sel.to && view.docView.lineHasWidget(sel.to) && view.inputState.insertingTextAt > Date.now() - 50) change = {
 		from: sel.from,
 		to: sel.to,
-		insert: view.state.toText(view.inputState.insertingText)
+		insert: state.toText(view.inputState.insertingText)
 	};
 	else if (browser.chrome && change && change.from == change.to && change.from == sel.head && change.insert.toString() == "\n " && view.lineWrapping) {
 		if (newSel) newSel = EditorSelection.single(newSel.main.anchor - 1, newSel.main.head - 1);
@@ -7415,7 +7608,7 @@ function applyDOMChange(view, domChange) {
 		if (view.inputState.lastSelectionTime > Date.now() - 50) {
 			if (view.inputState.lastSelectionOrigin == "select") scrollIntoView = true;
 			userEvent = view.inputState.lastSelectionOrigin;
-			if (userEvent == "select.pointer") newSel = skipAtomsForSelection(view.state.facet(atomicRanges).map((f) => f(view)), newSel);
+			if (userEvent == "select.pointer") newSel = skipAtomsForSelection(state.facet(atomicRanges).map((f) => f(view)), newSel);
 		}
 		view.dispatch({
 			selection: newSel,
@@ -7559,18 +7752,16 @@ var InputState = class {
 		this.view = view;
 		this.lastKeyCode = 0;
 		this.lastKeyTime = 0;
+		this.touchActive = false;
 		this.lastTouchTime = 0;
+		this.lastTouchX = 0;
+		this.lastTouchY = 0;
 		this.lastFocusTime = 0;
 		this.lastScrollTop = 0;
 		this.lastScrollLeft = 0;
+		this.lastWheelEvent = 0;
 		this.pendingIOSKey = void 0;
-		/**
-		When enabled (>-1), tab presses are not given to key handlers,
-		leaving the browser's default behavior. If >0, the mode expires
-		at that timestamp, and any other keypress clears it.
-		Esc enables temporary tab focus mode for two seconds when not
-		otherwise handled.
-		*/
+		this.lastIOSMomentumScroll = 0;
 		this.tabFocusMode = -1;
 		this.lastSelectionOrigin = null;
 		this.lastSelectionTime = 0;
@@ -7633,9 +7824,19 @@ var InputState = class {
 			this.view.observer.delayAndroidKey(event.key, event.keyCode);
 			return true;
 		}
-		let pending;
-		if (browser.ios && !event.synthetic && !event.altKey && !event.metaKey && ((pending = PendingKeys.find((key) => key.keyCode == event.keyCode)) && !event.ctrlKey || EmacsyPendingKeys.indexOf(event.key) > -1 && event.ctrlKey && !event.shiftKey)) {
-			this.pendingIOSKey = pending || event;
+		if (browser.ios && !event.synthetic && !event.altKey && !event.metaKey && (PendingKeys.some((key) => key.keyCode == event.keyCode) && !event.ctrlKey || EmacsyPendingKeys.indexOf(event.key) > -1 && event.ctrlKey)) {
+			let mods = {
+				ctrlKey: event.ctrlKey,
+				altKey: event.altKey,
+				metaKey: event.metaKey,
+				shiftKey: event.shiftKey
+			};
+			if (mods.shiftKey && browser.ios && !/^(off|none)$/.test(this.view.contentDOM.autocapitalize) && iosVirtualKeyboardOpen(this.view.win)) mods.shiftKey = false;
+			this.pendingIOSKey = {
+				key: event.key,
+				keyCode: event.keyCode,
+				mods
+			};
 			setTimeout(() => this.flushIOSKey(), 250);
 			return true;
 		}
@@ -7647,7 +7848,7 @@ var InputState = class {
 		if (!key) return false;
 		if (key.key == "Enter" && change && change.from < change.to && /^\S+$/.test(change.insert.toString())) return false;
 		this.pendingIOSKey = void 0;
-		return dispatchKey(this.view.contentDOM, key.key, key.keyCode, key instanceof KeyboardEvent ? key : void 0);
+		return dispatchKey(this.view.contentDOM, key.key, key.keyCode, key.mods);
 	}
 	ignoreDuringComposition(event) {
 		if (!/^key/.test(event.type) || event.synthetic) return false;
@@ -7672,6 +7873,10 @@ var InputState = class {
 		if (this.mouseSelection) this.mouseSelection.destroy();
 	}
 };
+function iosVirtualKeyboardOpen(win) {
+	if (!win.visualViewport) return false;
+	return win.visualViewport.height * win.visualViewport.scale / win.document.documentElement.clientHeight < .85;
+}
 function bindHandler(plugin, handler) {
 	return (view, event) => {
 		try {
@@ -7859,8 +8064,8 @@ function eventBelongsToEditor(view, event) {
 	for (let node = event.target, tile; node != view.contentDOM; node = node.parentNode) if (!node || node.nodeType == 11 || (tile = Tile.get(node)) && tile.isWidget() && !tile.isHidden && tile.widget.ignoreEvent(event)) return false;
 	return true;
 }
-const handlers = /* @__PURE__ */ Object.create(null);
-const observers = /* @__PURE__ */ Object.create(null);
+const handlers = /*@__PURE__*/ Object.create(null);
+const observers = /*@__PURE__*/ Object.create(null);
 const brokenClipboardAPI = browser.ie && browser.ie_version < 15 || browser.ios && browser.webkit_version < 604;
 function capturePaste(view) {
 	let parent = view.dom.parentNode;
@@ -7915,8 +8120,13 @@ function doPaste(view, input) {
 	});
 }
 observers.scroll = (view) => {
-	view.inputState.lastScrollTop = view.scrollDOM.scrollTop;
-	view.inputState.lastScrollLeft = view.scrollDOM.scrollLeft;
+	let iState = view.inputState;
+	iState.lastScrollTop = view.scrollDOM.scrollTop;
+	iState.lastScrollLeft = view.scrollDOM.scrollLeft;
+	if (browser.ios && !iState.touchActive) iState.lastIOSMomentumScroll = Date.now();
+};
+observers.wheel = observers.mousewheel = (view) => {
+	view.inputState.lastWheelEvent = Date.now();
 };
 handlers.keydown = (view, event) => {
 	view.inputState.setSelectionOrigin("select");
@@ -7924,12 +8134,21 @@ handlers.keydown = (view, event) => {
 	return false;
 };
 observers.touchstart = (view, e) => {
-	view.inputState.lastTouchTime = Date.now();
-	view.inputState.setSelectionOrigin("select.pointer");
+	let iState = view.inputState, touch = e.targetTouches[0];
+	iState.touchActive = true;
+	iState.lastTouchTime = Date.now();
+	if (touch) {
+		iState.lastTouchX = touch.clientX;
+		iState.lastTouchY = touch.clientY;
+	}
+	iState.setSelectionOrigin("select.pointer");
 };
 observers.touchmove = (view) => {
 	view.inputState.setSelectionOrigin("select.pointer");
 };
+observers.touchend = (view, e) => {
+	view.inputState.touchActive = false;
+};
 handlers.mousedown = (view, event) => {
 	view.observer.flush();
 	if (view.inputState.lastTouchTime > Date.now() - 2e3) return false;
@@ -7962,11 +8181,13 @@ function rangeForClick(view, pos, bias, type) {
 		let visual = view.docView.lineAt(pos, bias), line = view.state.doc.lineAt(visual ? visual.posAtEnd : pos);
 		let from = visual ? visual.posAtStart : line.from, to = visual ? visual.posAtEnd : line.to;
 		if (to < view.state.doc.length && to == line.to) to++;
-		return EditorSelection.range(from, to);
+		return EditorSelection.undirectionalRange(from, to);
 	}
 }
 const BadMouseDetail = browser.ie && browser.ie_version <= 11;
-let lastMouseDown = null, lastMouseDownCount = 0, lastMouseDownTime = 0;
+let lastMouseDown = null;
+let lastMouseDownCount = 0;
+let lastMouseDownTime = 0;
 function getClickType(event) {
 	if (!BadMouseDetail) return event.detail;
 	let last = lastMouseDown, lastTime = lastMouseDownTime;
@@ -7996,9 +8217,9 @@ function basicMouseSelection(view, event) {
 			if (start.pos != cur.pos && !extend) {
 				let startRange = rangeForClick(view, start.pos, start.assoc, type);
 				let from = Math.min(startRange.from, range.from), to = Math.max(startRange.to, range.to);
-				range = from < range.from ? EditorSelection.range(from, to) : EditorSelection.range(to, from);
+				range = from < range.from ? EditorSelection.range(from, to, range.assoc) : EditorSelection.range(to, from, range.assoc);
 			}
-			if (extend) return startSel.replaceRange(startSel.main.extend(range.from, range.to));
+			if (extend) return startSel.replaceRange(startSel.main.extend(range.from, range.to, range.assoc));
 			else if (multiple && type == 1 && startSel.ranges.length > 1 && (removed = removeRangeAround(startSel, cur.pos))) return removed;
 			else if (multiple) return startSel.addRange(range);
 			else return EditorSelection.create([range]);
@@ -8018,7 +8239,7 @@ handlers.dragstart = (view, event) => {
 		let tile = view.docView.tile.nearest(event.target);
 		if (tile && tile.isWidget()) {
 			let from = tile.posAtStart, to = from + tile.length;
-			if (from >= range.to || to <= range.from) range = EditorSelection.range(from, to);
+			if (from >= range.to || to <= range.from) range = EditorSelection.undirectionalRange(from, to);
 		}
 	}
 	let { inputState } = view;
@@ -8145,8 +8366,7 @@ function copiedRange(state) {
 }
 let lastLinewiseCopy = null;
 handlers.copy = handlers.cut = (view, event) => {
-	let domSel = getSelection(view.root);
-	if (domSel && !hasSelection(view.contentDOM, domSel)) return false;
+	if (!hasSelection(view.contentDOM, view.observer.selectionRange)) return false;
 	let { text, ranges, linewise } = copiedRange(view.state);
 	if (!text && !linewise) return false;
 	lastLinewiseCopy = linewise ? text : null;
@@ -8165,7 +8385,7 @@ handlers.copy = handlers.cut = (view, event) => {
 		return false;
 	}
 };
-const isFocusChange = /* @__PURE__ */ Annotation.define();
+const isFocusChange = /*@__PURE__*/ Annotation.define();
 function focusChangeTransaction(state, focus) {
 	let effects = [];
 	for (let getEffect of state.facet(focusChangeEffect)) {
@@ -8256,7 +8476,7 @@ handlers.beforeinput = (view, event) => {
 	if (browser.safari && event.inputType == "insertText" && view.inputState.composing >= 0) setTimeout(() => observers.compositionend(view, event), 20);
 	return false;
 };
-const appliedFirefoxHack = /* @__PURE__ */ new Set();
+const appliedFirefoxHack = /*@__PURE__*/ new Set();
 function firefoxCopyCutHack(doc) {
 	if (!appliedFirefoxHack.has(doc)) {
 		appliedFirefoxHack.add(doc);
@@ -8314,7 +8534,7 @@ var HeightOracle = class {
 	}
 	refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
 		let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
-		let changed = Math.abs(lineHeight - this.lineHeight) > .3 || this.lineWrapping != lineWrapping || Math.abs(charWidth - this.charWidth) > .1;
+		let changed = Math.abs(lineHeight - this.lineHeight) > .3 || this.lineWrapping != lineWrapping;
 		this.lineWrapping = lineWrapping;
 		this.lineHeight = lineHeight;
 		this.charWidth = charWidth;
@@ -8397,7 +8617,7 @@ var BlockInfo = class BlockInfo {
 		return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, content);
 	}
 };
-var QueryType = /* @__PURE__ */ (function(QueryType) {
+var QueryType = /*@__PURE__*/ (function(QueryType) {
 	QueryType[QueryType["ByPos"] = 0] = "ByPos";
 	QueryType[QueryType["ByHeight"] = 1] = "ByHeight";
 	QueryType[QueryType["ByPosNoHeight"] = 2] = "ByPosNoHeight";
@@ -8458,20 +8678,21 @@ var HeightMap = class HeightMap {
 	static of(nodes) {
 		if (nodes.length == 1) return nodes[0];
 		let i = 0, j = nodes.length, before = 0, after = 0;
-		for (;;) if (i == j) if (before > after * 2) {
-			let split = nodes[i - 1];
-			if (split.break) nodes.splice(--i, 1, split.left, null, split.right);
-			else nodes.splice(--i, 1, split.left, split.right);
-			j += 1 + split.break;
-			before -= split.size;
-		} else if (after > before * 2) {
-			let split = nodes[j];
-			if (split.break) nodes.splice(j, 1, split.left, null, split.right);
-			else nodes.splice(j, 1, split.left, split.right);
-			j += 2 + split.break;
-			after -= split.size;
-		} else break;
-		else if (before < after) {
+		for (;;) if (i == j) {
+			if (before > after * 2) {
+				let split = nodes[i - 1];
+				if (split.break) nodes.splice(--i, 1, split.left, null, split.right);
+				else nodes.splice(--i, 1, split.left, split.right);
+				j += 1 + split.break;
+				before -= split.size;
+			} else if (after > before * 2) {
+				let split = nodes[j];
+				if (split.break) nodes.splice(j, 1, split.left, null, split.right);
+				else nodes.splice(j, 1, split.left, split.right);
+				j += 2 + split.break;
+				after -= split.size;
+			} else break;
+		} else if (before < after) {
 			let next = nodes[i++];
 			if (next) before += next.size;
 		} else {
@@ -8495,7 +8716,7 @@ function replace(old, val) {
 	return val;
 }
 HeightMap.prototype.size = 1;
-const SpaceDeco = /* @__PURE__ */ Decoration.replace({});
+const SpaceDeco = /*@__PURE__*/ Decoration.replace({});
 var HeightMapBlock = class extends HeightMap {
 	constructor(length, height, deco) {
 		super(length, height);
@@ -8973,7 +9194,8 @@ var LineGapWidget = class extends WidgetType {
 	}
 };
 var ViewState = class {
-	constructor(state) {
+	constructor(view, state) {
+		this.view = view;
 		this.state = state;
 		this.pixelViewport = {
 			left: 0,
@@ -8988,10 +9210,10 @@ var ViewState = class {
 		this.contentDOMHeight = 0;
 		this.editorHeight = 0;
 		this.editorWidth = 0;
-		this.scrollTop = 0;
-		this.scrolledToBottom = false;
 		this.scaleX = 1;
 		this.scaleY = 1;
+		this.scrollOffset = 0;
+		this.scrolledToBottom = false;
 		this.scrollAnchorPos = 0;
 		this.scrollAnchorHeight = -1;
 		this.scaler = IdScaler;
@@ -9001,7 +9223,8 @@ var ViewState = class {
 		this.defaultTextDirection = Direction.LTR;
 		this.visibleRanges = [];
 		this.mustEnforceCursorAssoc = false;
-		this.heightOracle = new HeightOracle(state.facet(contentAttributes).some((v) => typeof v != "function" && v.class == "cm-lineWrapping"));
+		let guessWrapping = state.facet(contentAttributes).some((v) => typeof v != "function" && v.class == "cm-lineWrapping");
+		this.heightOracle = new HeightOracle(guessWrapping);
 		this.stateDeco = staticDeco(state);
 		this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, Text.empty, this.heightOracle.setDoc(state.doc), [new ChangedRange(0, 0, 0, state.doc.length)]);
 		for (let i = 0; i < 2; i++) {
@@ -9011,6 +9234,7 @@ var ViewState = class {
 		this.updateViewportLines();
 		this.lineGaps = this.ensureLineGaps([]);
 		this.lineGapDeco = Decoration.set(this.lineGaps.map((gap) => gap.draw(this, false)));
+		this.scrollParent = view.scrollDOM;
 		this.computeVisibleRanges();
 	}
 	updateForViewport() {
@@ -9043,7 +9267,7 @@ var ViewState = class {
 		let contentChanges = update.changedRanges;
 		let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(prevDeco, this.stateDeco, update ? update.changes : ChangeSet.empty(this.state.doc.length)));
 		let prevHeight = this.heightMap.height;
-		let scrollAnchor = this.scrolledToBottom ? null : this.scrollAnchorAt(this.scrollTop);
+		let scrollAnchor = this.scrolledToBottom ? null : this.scrollAnchorAt(this.scrollOffset);
 		clearHeightChangeFlag();
 		this.heightMap = this.heightMap.applyChanges(this.stateDeco, update.startState.doc, this.heightOracle.setDoc(this.state.doc), heightChanges);
 		if (this.heightMap.height != prevHeight || heightChangeFlag) update.flags |= 2;
@@ -9065,12 +9289,12 @@ var ViewState = class {
 		if (scrollTarget) this.scrollTarget = scrollTarget;
 		if (!this.mustEnforceCursorAssoc && (update.selectionSet || update.focusChanged) && update.view.lineWrapping && update.state.selection.main.empty && update.state.selection.main.assoc && !update.state.facet(nativeSelectionHidden)) this.mustEnforceCursorAssoc = true;
 	}
-	measure(view) {
-		let dom = view.contentDOM, style = window.getComputedStyle(dom);
+	measure() {
+		let { view } = this, dom = view.contentDOM, style = window.getComputedStyle(dom);
 		let oracle = this.heightOracle;
 		let whiteSpace = style.whiteSpace;
 		this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
-		let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace) || this.mustMeasureContent;
+		let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace) || this.mustMeasureContent === "refresh";
 		let domRect = dom.getBoundingClientRect();
 		let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != domRect.height;
 		this.contentDOMHeight = domRect.height;
@@ -9097,12 +9321,18 @@ var ViewState = class {
 			this.editorWidth = view.scrollDOM.clientWidth;
 			result |= 16;
 		}
-		let scrollTop = view.scrollDOM.scrollTop * this.scaleY;
-		if (this.scrollTop != scrollTop) {
+		let scrollParent = scrollableParents(this.view.contentDOM, false).y;
+		if (scrollParent != this.scrollParent) {
+			this.scrollParent = scrollParent;
 			this.scrollAnchorHeight = -1;
-			this.scrollTop = scrollTop;
+			this.scrollOffset = 0;
 		}
-		this.scrolledToBottom = isScrolledToBottom(view.scrollDOM);
+		let scrollOffset = this.getScrollOffset();
+		if (this.scrollOffset != scrollOffset) {
+			this.scrollAnchorHeight = -1;
+			this.scrollOffset = scrollOffset;
+		}
+		this.scrolledToBottom = isScrolledToBottom(this.scrollParent || view.win);
 		let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
 		let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
 		this.pixelViewport = pixelViewport;
@@ -9172,7 +9402,7 @@ var ViewState = class {
 				if (scrollTarget.y == "center") topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
 				else if (scrollTarget.y == "start" || scrollTarget.y == "nearest" && head < viewport.from) topPos = block.top;
 				else topPos = block.bottom - viewHeight;
-				viewport = new Viewport(map.lineAt(topPos - 1e3 / 2, QueryType.ByHeight, oracle, 0, 0).from, map.lineAt(topPos + viewHeight + 1e3 / 2, QueryType.ByHeight, oracle, 0, 0).to);
+				viewport = new Viewport(map.lineAt(topPos - 500, QueryType.ByHeight, oracle, 0, 0).from, map.lineAt(topPos + viewHeight + 500, QueryType.ByHeight, oracle, 0, 0).to);
 			}
 		}
 		return viewport;
@@ -9186,7 +9416,7 @@ var ViewState = class {
 		let { top } = this.heightMap.lineAt(from, QueryType.ByPos, this.heightOracle, 0, 0);
 		let { bottom } = this.heightMap.lineAt(to, QueryType.ByPos, this.heightOracle, 0, 0);
 		let { visibleTop, visibleBottom } = this;
-		return (from == 0 || top <= visibleTop - Math.max(10, Math.min(-bias, 250))) && (to == this.state.doc.length || bottom >= visibleBottom + Math.max(10, Math.min(bias, 250))) && top > visibleTop - 2 * 1e3 && bottom < visibleBottom + 2 * 1e3;
+		return (from == 0 || top <= visibleTop - Math.max(10, Math.min(-bias, 250))) && (to == this.state.doc.length || bottom >= visibleBottom + Math.max(10, Math.min(bias, 250))) && top > visibleTop - 2e3 && bottom < visibleBottom + 2e3;
 	}
 	mapLineGaps(gaps, changes) {
 		if (!gaps.length || changes.empty) return gaps;
@@ -9309,9 +9539,12 @@ var ViewState = class {
 	lineBlockAtHeight(height) {
 		return height >= this.viewportLines[0].top && height <= this.viewportLines[this.viewportLines.length - 1].bottom && this.viewportLines.find((l) => l.top <= height && l.bottom >= height) || scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
 	}
-	scrollAnchorAt(scrollTop) {
-		let block = this.lineBlockAtHeight(scrollTop + 8);
-		return block.from >= this.viewport.from || this.viewportLines[0].top - scrollTop > 200 ? block : this.viewportLines[0];
+	getScrollOffset() {
+		return (this.scrollParent == this.view.scrollDOM ? this.scrollParent.scrollTop : (this.scrollParent ? this.scrollParent.getBoundingClientRect().top : 0) - this.view.contentDOM.getBoundingClientRect().top) * this.scaleY;
+	}
+	scrollAnchorAt(scrollOffset) {
+		let block = this.lineBlockAtHeight(scrollOffset + 8);
+		return block.from >= this.viewport.from || this.viewportLines[0].top - scrollOffset > 200 ? block : this.viewportLines[0];
 	}
 	elementAtHeight(height) {
 		return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.heightOracle, 0, 0), this.scaler);
@@ -9449,9 +9682,11 @@ function scaleBlock(block, scaler) {
 	let bTop = scaler.toDOM(block.top), bBottom = scaler.toDOM(block.bottom);
 	return new BlockInfo(block.from, block.length, bTop, bBottom - bTop, Array.isArray(block._content) ? block._content.map((b) => scaleBlock(b, scaler)) : block._content);
 }
-const theme = /* @__PURE__ */ Facet.define({ combine: (strs) => strs.join(" ") });
-const darkTheme = /* @__PURE__ */ Facet.define({ combine: (values) => values.indexOf(true) > -1 });
-const baseThemeID = /* @__PURE__ */ StyleModule.newName(), baseLightID = /* @__PURE__ */ StyleModule.newName(), baseDarkID = /* @__PURE__ */ StyleModule.newName();
+const theme = /*@__PURE__*/ Facet.define({ combine: (strs) => strs.join(" ") });
+const darkTheme = /*@__PURE__*/ Facet.define({ combine: (values) => values.indexOf(true) > -1 });
+const baseThemeID = /*@__PURE__*/ StyleModule.newName();
+const baseLightID = /*@__PURE__*/ StyleModule.newName();
+const baseDarkID = /*@__PURE__*/ StyleModule.newName();
 const lightDarkIDs = {
 	"&light": "." + baseLightID,
 	"&dark": "." + baseDarkID
@@ -9465,7 +9700,7 @@ function buildTheme(main, spec, scopes) {
 		}) : main + " " + sel;
 	} });
 }
-const baseTheme$1 = /* @__PURE__ */ buildTheme("." + baseThemeID, {
+const baseTheme$1 = /*@__PURE__*/ buildTheme("." + baseThemeID, {
 	"&": {
 		position: "relative !important",
 		boxSizing: "border-box",
@@ -9511,6 +9746,7 @@ const baseTheme$1 = /* @__PURE__ */ buildTheme("." + baseThemeID, {
 		padding: "0 2px 0 6px"
 	},
 	".cm-layer": {
+		userSelect: "none",
 		position: "absolute",
 		left: 0,
 		top: 0,
@@ -9540,6 +9776,21 @@ const baseTheme$1 = /* @__PURE__ */ buildTheme("." + baseThemeID, {
 	},
 	".cm-cursor": { display: "none" },
 	"&dark .cm-cursor": { borderLeftColor: "#ddd" },
+	".cm-selectionHandle": {
+		backgroundColor: "currentColor",
+		width: "1.5px"
+	},
+	".cm-selectionHandle-start::before, .cm-selectionHandle-end::before": {
+		content: "\"\"",
+		backgroundColor: "inherit",
+		borderRadius: "50%",
+		width: "8px",
+		height: "8px",
+		position: "absolute",
+		left: "-3.25px"
+	},
+	".cm-selectionHandle-start::before": { top: "-8px" },
+	".cm-selectionHandle-end::before": { bottom: "-8px" },
 	".cm-dropCursor": { position: "absolute" },
 	"&.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor": { display: "block" },
 	".cm-iso": { unicodeBidi: "isolate" },
@@ -9600,6 +9851,8 @@ const baseTheme$1 = /* @__PURE__ */ buildTheme("." + baseThemeID, {
 		backgroundColor: "#f5f5f5",
 		color: "black"
 	},
+	".cm-panels-top": { top: "0" },
+	".cm-panels-bottom": { bottom: "0" },
 	"&light .cm-panels-top": { borderBottom: "1px solid #ddd" },
 	"&light .cm-panels-bottom": { borderTop: "1px solid #ddd" },
 	"&dark .cm-panels": {
@@ -9980,18 +10233,20 @@ var DOMObserver = class {
 	}
 	addWindowListeners(win) {
 		win.addEventListener("resize", this.onResize);
-		if (this.printQuery) if (this.printQuery.addEventListener) this.printQuery.addEventListener("change", this.onPrint);
-		else this.printQuery.addListener(this.onPrint);
-		else win.addEventListener("beforeprint", this.onPrint);
+		if (this.printQuery) {
+			if (this.printQuery.addEventListener) this.printQuery.addEventListener("change", this.onPrint);
+			else this.printQuery.addListener(this.onPrint);
+		} else win.addEventListener("beforeprint", this.onPrint);
 		win.addEventListener("scroll", this.onScroll);
 		win.document.addEventListener("selectionchange", this.onSelectionChange);
 	}
 	removeWindowListeners(win) {
 		win.removeEventListener("scroll", this.onScroll);
 		win.removeEventListener("resize", this.onResize);
-		if (this.printQuery) if (this.printQuery.removeEventListener) this.printQuery.removeEventListener("change", this.onPrint);
-		else this.printQuery.removeListener(this.onPrint);
-		else win.removeEventListener("beforeprint", this.onPrint);
+		if (this.printQuery) {
+			if (this.printQuery.removeEventListener) this.printQuery.removeEventListener("change", this.onPrint);
+			else this.printQuery.removeListener(this.onPrint);
+		} else win.removeEventListener("beforeprint", this.onPrint);
 		win.document.removeEventListener("selectionchange", this.onSelectionChange);
 	}
 	update(update) {
@@ -10154,7 +10409,6 @@ var EditContextManager = class {
 		};
 		for (let event in this.handlers) context.addEventListener(event, this.handlers[event]);
 		this.measureReq = { read: (view) => {
-			this.editContext.updateControlBounds(view.contentDOM.getBoundingClientRect());
 			let sel = getSelection(view.root);
 			if (sel && sel.rangeCount) this.editContext.updateSelectionBounds(sel.getRangeAt(0).getBoundingClientRect());
 		} };
@@ -10164,14 +10418,16 @@ var EditContextManager = class {
 		update.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
 			if (abort) return;
 			let dLen = insert.length - (toA - fromA);
-			if (pending && toA >= pending.to) if (pending.from == fromA && pending.to == toA && pending.insert.eq(insert)) {
-				pending = this.pendingContextChange = null;
-				off += dLen;
-				this.to += dLen;
-				return;
-			} else {
-				pending = null;
-				this.revertPending(update.state);
+			if (pending && toA >= pending.to) {
+				if (pending.from == fromA && pending.to == toA && pending.insert.eq(insert)) {
+					pending = this.pendingContextChange = null;
+					off += dLen;
+					this.to += dLen;
+					return;
+				} else {
+					pending = null;
+					this.revertPending(update.state);
+				}
 			}
 			fromA += off;
 			toA += off;
@@ -10225,7 +10481,7 @@ var EditContextManager = class {
 	}
 	rangeIsValid(state) {
 		let { head } = state.selection.main;
-		return !(this.from > 0 && head - this.from < 500 || this.to < state.doc.length && this.to - head < 500 || this.to - this.from > 1e4 * 3);
+		return !(this.from > 0 && head - this.from < 500 || this.to < state.doc.length && this.to - head < 500 || this.to - this.from > 3e4);
 	}
 	toEditorPos(contextPos, clipLen = this.to - this.from) {
 		contextPos = Math.min(contextPos, clipLen);
@@ -10351,7 +10607,7 @@ var EditorView = class EditorView {
 		this.dispatchTransactions = config.dispatchTransactions || dispatch && ((trs) => trs.forEach((tr) => dispatch(tr, this))) || ((trs) => this.update(trs));
 		this.dispatch = this.dispatch.bind(this);
 		this._root = config.root || getRoot(config.parent) || document;
-		this.viewState = new ViewState(config.state || EditorState.create(config));
+		this.viewState = new ViewState(this, config.state || EditorState.create(config));
 		if (config.scrollTo && config.scrollTo.is(scrollIntoView)) this.viewState.scrollTarget = config.scrollTo.value.clip(this.viewState.state);
 		this.plugins = this.state.facet(viewPlugin).map((spec) => new PluginInstance(spec));
 		for (let plugin of this.plugins) plugin.update(this);
@@ -10364,7 +10620,7 @@ var EditorView = class EditorView {
 		this.updateState = 0;
 		this.requestMeasure();
 		if ((_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready) document.fonts.ready.then(() => {
-			this.viewState.mustMeasureContent = true;
+			this.viewState.mustMeasureContent = "refresh";
 			this.requestMeasure();
 		});
 	}
@@ -10417,7 +10673,8 @@ var EditorView = class EditorView {
 				if (scrollTarget) scrollTarget = scrollTarget.map(tr.changes);
 				if (tr.scrollIntoView) {
 					let { main } = tr.state.selection;
-					scrollTarget = new ScrollTarget(main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1));
+					let { x, y } = this.state.facet(EditorView.cursorScrollMargin);
+					scrollTarget = new ScrollTarget(main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1), "nearest", "nearest", y, x);
 				}
 				for (let e of tr.effects) if (e.is(scrollIntoView)) scrollTarget = e.value.clip(this.state);
 			}
@@ -10467,7 +10724,7 @@ var EditorView = class EditorView {
 		let hadFocus = this.hasFocus;
 		try {
 			for (let plugin of this.plugins) plugin.destroy(this);
-			this.viewState = new ViewState(newState);
+			this.viewState = new ViewState(this, newState);
 			this.plugins = newState.facet(viewPlugin).map((spec) => new PluginInstance(spec));
 			this.pluginMap.clear();
 			for (let plugin of this.plugins) plugin.update(this);
@@ -10527,22 +10784,24 @@ var EditorView = class EditorView {
 		this.measureScheduled = 0;
 		if (flush) this.observer.forceFlush();
 		let updated = null;
-		let sDOM = this.scrollDOM, scrollTop = sDOM.scrollTop * this.scaleY;
+		let scroll = this.viewState.scrollParent, scrollOffset = this.viewState.getScrollOffset();
 		let { scrollAnchorPos, scrollAnchorHeight } = this.viewState;
-		if (Math.abs(scrollTop - this.viewState.scrollTop) > 1) scrollAnchorHeight = -1;
+		if (Math.abs(scrollOffset - this.viewState.scrollOffset) > 1) scrollAnchorHeight = -1;
 		this.viewState.scrollAnchorHeight = -1;
 		try {
 			for (let i = 0;; i++) {
-				if (scrollAnchorHeight < 0) if (isScrolledToBottom(sDOM)) {
-					scrollAnchorPos = -1;
-					scrollAnchorHeight = this.viewState.heightMap.height;
-				} else {
-					let block = this.viewState.scrollAnchorAt(scrollTop);
-					scrollAnchorPos = block.from;
-					scrollAnchorHeight = block.top;
+				if (scrollAnchorHeight < 0) {
+					if (isScrolledToBottom(scroll || this.win)) {
+						scrollAnchorPos = -1;
+						scrollAnchorHeight = this.viewState.heightMap.height;
+					} else {
+						let block = this.viewState.scrollAnchorAt(scrollOffset);
+						scrollAnchorPos = block.from;
+						scrollAnchorHeight = block.top;
+					}
 				}
 				this.updateState = 1;
-				let changed = this.viewState.measure(this);
+				let changed = this.viewState.measure();
 				if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null) break;
 				if (i > 5) {
 					console.warn(this.measureRequests.length ? "Measure loop restarted more than 5 times" : "Viewport failed to stabilize");
@@ -10578,18 +10837,21 @@ var EditorView = class EditorView {
 				}
 				if (redrawn) this.docView.updateSelection(true);
 				if (!update.viewportChanged && this.measureRequests.length == 0) {
-					if (this.viewState.editorHeight) if (this.viewState.scrollTarget) {
-						this.docView.scrollIntoView(this.viewState.scrollTarget);
-						this.viewState.scrollTarget = null;
-						scrollAnchorHeight = -1;
-						continue;
-					} else {
-						let diff = (scrollAnchorPos < 0 ? this.viewState.heightMap.height : this.viewState.lineBlockAt(scrollAnchorPos).top) - scrollAnchorHeight;
-						if (diff > 1 || diff < -1) {
-							scrollTop = scrollTop + diff;
-							sDOM.scrollTop = scrollTop / this.scaleY;
+					if (this.viewState.editorHeight) {
+						if (this.viewState.scrollTarget) {
+							this.docView.scrollIntoView(this.viewState.scrollTarget);
+							this.viewState.scrollTarget = null;
 							scrollAnchorHeight = -1;
 							continue;
+						} else {
+							let diff = ((scrollAnchorPos < 0 ? this.viewState.heightMap.height : this.viewState.lineBlockAt(scrollAnchorPos).top) - scrollAnchorHeight) / this.scaleY;
+							if ((diff > 1 || diff < -1) && !(browser.ios && this.inputState.lastIOSMomentumScroll > Date.now() - 100) && (scroll == this.scrollDOM || this.hasFocus || Math.max(this.inputState.lastWheelEvent, this.inputState.lastTouchTime) > Date.now() - 100)) {
+								scrollOffset = scrollOffset + diff;
+								if (scroll) scroll.scrollTop += diff;
+								else this.win.scrollBy(0, diff);
+								scrollAnchorHeight = -1;
+								continue;
+							}
 						}
 					}
 					break;
@@ -10861,11 +11123,9 @@ var EditorView = class EditorView {
 	*/
 	coordsAtPos(pos, side = 1) {
 		this.readMeasured();
-		let rect = this.docView.coordsAt(pos, side);
-		if (!rect || rect.left == rect.right) return rect;
 		let line = this.state.doc.lineAt(pos), order = this.bidiSpans(line);
 		let span = order[BidiSpan.find(order, pos - line.from, -1, side)];
-		return flattenRect(rect, span.dir == Direction.LTR == side > 0);
+		return this.docView.coordsAt(pos, side, span.dir == Direction.RTL);
 	}
 	/**
 	Return the rectangle around a given character. If `pos` does not
@@ -10991,7 +11251,8 @@ var EditorView = class EditorView {
 	cause it to scroll the given position or range into view.
 	*/
 	static scrollIntoView(pos, options = {}) {
-		return scrollIntoView.of(new ScrollTarget(typeof pos == "number" ? EditorSelection.cursor(pos) : pos, options.y, options.x, options.yMargin, options.xMargin));
+		var _a, _b, _c, _d;
+		return scrollIntoView.of(new ScrollTarget(typeof pos == "number" ? EditorSelection.cursor(pos) : pos, (_a = options.y) !== null && _a !== void 0 ? _a : "nearest", (_b = options.x) !== null && _b !== void 0 ? _b : "nearest", (_c = options.yMargin) !== null && _c !== void 0 ? _c : 5, (_d = options.xMargin) !== null && _d !== void 0 ? _d : 5));
 	}
 	/**
 	Return an effect that resets the editor to its current (at the
@@ -11054,7 +11315,7 @@ var EditorView = class EditorView {
 	}
 	/**
 	Create a theme extension. The first argument can be a
-	[`style-mod`](https://github.com/marijnh/style-mod#documentation)
+	[`style-mod`](https://code.haverbeke.berlin/marijn/style-mod#documentation)
 	style spec providing the styles for the theme. These will be
 	prefixed with a generated class for the style.
 	
@@ -11099,7 +11360,7 @@ var EditorView = class EditorView {
 };
 /**
 Facet to add a [style
-module](https://github.com/marijnh/style-mod#documentation) to
+module](https://code.haverbeke.berlin/marijn/style-mod#documentation) to
 an editor view. The view will ensure that the module is
 mounted in its [document
 root](https://codemirror.net/6/docs/ref/#view.EditorView.constructor^config.root).
@@ -11246,11 +11507,27 @@ supported.)
 */
 EditorView.bidiIsolatedRanges = bidiIsolatedRanges;
 /**
+Can be used to specify the distance that scrolling cursor into
+view keeps it away from the sides of the editor, either as a
+single pixel number or two different values for the different
+axes. Defaults to 5 pixels on both axes.
+*/
+EditorView.cursorScrollMargin = /*@__PURE__*/ Facet.define({ combine: (inputs) => {
+	let x = 5, y = 5;
+	for (let i of inputs) if (typeof i == "number") x = y = i;
+	else ({x, y} = i);
+	return {
+		x,
+		y
+	};
+} });
+/**
 Facet that allows extensions to provide additional scroll
 margins (space around the sides of the scrolling element that
 should be considered invisible). This can be useful when the
 plugin introduces elements that cover part of that element (for
-example a horizontally fixed gutter).
+example a horizontally fixed gutter). Not to be confused with
+[`cursorScrollMargin`](https://codemirror.net/6/docs/ref/#view.EditorView^cursorScrollMargin).
 */
 EditorView.scrollMargins = scrollMargins;
 /**
@@ -11265,7 +11542,7 @@ Provides a Content Security Policy nonce to use when creating
 the style sheets for the editor. Holds the empty string when no
 nonce has been provided.
 */
-EditorView.cspNonce = /* @__PURE__ */ Facet.define({ combine: (values) => values.length ? values[0] : "" });
+EditorView.cspNonce = /*@__PURE__*/ Facet.define({ combine: (values) => values.length ? values[0] : "" });
 /**
 Facet that provides additional DOM attributes for the editor's
 editable DOM element.
@@ -11280,7 +11557,7 @@ EditorView.editorAttributes = editorAttributes;
 An extension that enables line wrapping in the editor (by
 setting CSS `white-space` to `pre-wrap` in the content).
 */
-EditorView.lineWrapping = /* @__PURE__ */ EditorView.contentAttributes.of({ "class": "cm-lineWrapping" });
+EditorView.lineWrapping = /*@__PURE__*/ EditorView.contentAttributes.of({ "class": "cm-lineWrapping" });
 /**
 State effect used to include screen reader announcements in a
 transaction. These will be added to the DOM in a visually hidden
@@ -11289,7 +11566,7 @@ describe effects that are visually obvious but may not be
 noticed by screen reader users (such as moving to the next
 search match).
 */
-EditorView.announce = /* @__PURE__ */ StateEffect.define();
+EditorView.announce = /*@__PURE__*/ StateEffect.define();
 const MaxBidiLine = 4096;
 const BadMeasure = {};
 var CachedOrder = class CachedOrder {
@@ -11318,8 +11595,9 @@ function attrsFromFacet(view, facet, base) {
 	}
 	return base;
 }
-const currentPlatform = browser.mac ? "mac" : browser.windows ? "win" : browser.linux ? "linux" : "key";
-const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
+browser.mac || browser.windows || browser.linux;
+browser.gecko && browser.gecko_version;
+/x/.unicode;
 /**
 A gutter marker represents a bit of information attached to a line
 in a specific gutter. Your own custom markers have to extend this
@@ -11349,7 +11627,6 @@ GutterMarker.prototype.toDOM = void 0;
 GutterMarker.prototype.mapMode = MapMode.TrackBefore;
 GutterMarker.prototype.startSide = GutterMarker.prototype.endSide = -1;
 GutterMarker.prototype.point = true;
-
 //#endregion
 //#region src/components/editor/use-format-code.ts
 const DEFAULT_PRETTIER_OPTIONS = {
@@ -11381,7 +11658,6 @@ const useFormatCode = ({ fragment, prettierOptions } = {}) => {
 		return formatted;
 	}, [prettierConfig, fragment]);
 };
-
 //#endregion
 //#region src/components/editor/core.tsx
 const Core = ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }) => {
@@ -11425,7 +11701,8 @@ const Core = ({ value, theme, height, className, prettierOptions, fragment, raw,
 	const onKeyDown = useCallback((e) => {
 		if ((e.metaKey || e.ctrlKey) && e.key === "s") {
 			e.preventDefault();
-			onSave(editorRef.current?.view?.state.doc.toString() || value);
+			const currentValue = editorRef.current?.view?.state.doc.toString() || value;
+			onSave(currentValue);
 		}
 	}, [onSave, value]);
 	return /* @__PURE__ */ jsx("div", {
@@ -11445,7 +11722,6 @@ const Core = ({ value, theme, height, className, prettierOptions, fragment, raw,
 		})
 	});
 };
-
 //#endregion
 //#region src/components/editor/tiptap.tsx
 const Tiptap = ({ value = "", placeholder = "Enter text...", className, onChange }) => {
@@ -11466,11 +11742,10 @@ const Tiptap = ({ value = "", placeholder = "Enter text...", className, onChange
         py-2`, "prose prose-sm max-w-none text-sm text-gray-800", "[&_.tiptap]:outline-none", "[&_.tiptap_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.tiptap_p.is-editor-empty:first-child::before]:float-left", "[&_.tiptap_p.is-editor-empty:first-child::before]:h-0", "[&_.tiptap_p.is-editor-empty:first-child::before]:text-gray-400", "[&_.tiptap_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", className)
 	});
 };
-
 //#endregion
 //#region src/components/dnd/panel/selection.ts
-var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1());
 var import_lib = require_lib();
+var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1(), 1);
 const removeIndices = (items, indices) => {
 	return items.filter((_, index) => !indices.has(index));
 };
@@ -11496,7 +11771,6 @@ const moveSelectedIndices = (items, indices, direction) => {
 		indices: nextIndices
 	};
 };
-
 //#endregion
 //#region src/components/dnd/panel/items.tsx
 const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
@@ -11573,7 +11847,8 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 				if (!import_lib$1.isObjectProperty(prop) || !import_lib$1.isIdentifier(prop.key) || !import_lib$1.isJSXElement(prop.value)) return;
 				const propertyName = prop.key.name;
 				try {
-					const nodes = extract(generateCode(prop.value));
+					const jsxCode = generateCode(prop.value);
+					const nodes = extract(jsxCode);
 					const bindings = [];
 					const bindingContainer = nodes.find((node) => node.bindings?.some((b) => b.property === "children"));
 					if (bindingContainer) bindings.push(bindingContainer);
@@ -11632,7 +11907,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		const nextElements = removeIndices(allElements, indices);
 		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
 	};
-	const deletePrimitive = (index) => deleteSelectedPrimitives(new Set([index]));
+	const deletePrimitive = (index) => deleteSelectedPrimitives(/* @__PURE__ */ new Set([index]));
 	const addPrimitive = () => {
 		const first = primitiveItems[0];
 		if (!first) return;
@@ -11706,10 +11981,11 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	};
 	const deleteSelectedItems = (indices) => {
 		if (objectItems.length - indices.size < 1) return;
-		const nextValue = arrayExpressionToCode(removeIndices(objectItems, indices).map((item) => item.originalElement));
+		const nextItems = removeIndices(objectItems, indices);
+		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
 		onChange?.(nextValue);
 	};
-	const deleteItem = (index) => deleteSelectedItems(new Set([index]));
+	const deleteItem = (index) => deleteSelectedItems(/* @__PURE__ */ new Set([index]));
 	const cloneObjectItemElement = (source) => {
 		const clonedElement = clone(source.originalElement);
 		clonedElement.properties.forEach((prop) => {
@@ -11980,7 +12256,6 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		]
 	});
 };
-
 //#endregion
 //#region src/components/dnd/panel/children.tsx
 const Children = ({ value, onChange, onNodeChange }) => {
@@ -12010,9 +12285,10 @@ const Children = ({ value, onChange, onNodeChange }) => {
 		const nextItems = removeIndices(items, indices);
 		onChange?.(JSON.stringify(nextItems));
 	};
-	const deleteItem = (index) => deleteSelectedItems(new Set([index]));
+	const deleteItem = (index) => deleteSelectedItems(/* @__PURE__ */ new Set([index]));
 	const addItem = () => {
-		const newItem = cloneDataAttrNode(items[0] || createDefaultItem());
+		const template = items[0] || createDefaultItem();
+		const newItem = cloneDataAttrNode(template);
 		const nextItems = [...items, newItem];
 		onChange?.(JSON.stringify(nextItems));
 	};
@@ -12173,7 +12449,6 @@ const Children = ({ value, onChange, onNodeChange }) => {
 		]
 	});
 };
-
 //#endregion
 //#region src/components/dnd/panel/icon-map.ts
 const ICON_MAP = {
@@ -12215,7 +12490,6 @@ const ICON_MAP = {
 	User,
 	X
 };
-
 //#endregion
 //#region src/components/dnd/panel/field.tsx
 const isColorProperty = (propertyName) => {
@@ -12236,6 +12510,43 @@ const parseDateValue = (value) => {
 const formatDateValue = (date) => {
 	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 };
+const COLOR_COMMIT_DELAY = 75;
+const ColorPickerField = ({ id, label, value, onChange }) => {
+	const [liveValue, setLiveValue] = useState(value);
+	const [prevValue, setPrevValue] = useState(value);
+	const lastCommittedRef = useRef(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		setLiveValue(value);
+	}
+	useEffect(() => {
+		lastCommittedRef.current = value;
+	}, [value]);
+	const commit = (next) => {
+		if (next === lastCommittedRef.current) return;
+		lastCommittedRef.current = next;
+		onChange?.({
+			id,
+			label,
+			value: next
+		});
+	};
+	const debouncedCommit = useDebounce(() => commit(liveValue), {
+		delay: COLOR_COMMIT_DELAY,
+		autoInvoke: false
+	});
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		showText: true,
+		value: liveValue,
+		onChange: (next) => {
+			setLiveValue(next);
+			debouncedCommit();
+		},
+		onOpenChange: (open) => {
+			if (!open) commit(liveValue);
+		}
+	});
+};
 const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
 	label: /* @__PURE__ */ jsxs("span", {
 		className: "flex items-center gap-2",
@@ -12350,16 +12661,11 @@ const Field = ({ binding, id, value, onChange }) => {
 			});
 		}
 	});
-	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPicker, {
-		showText: true,
+	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
+		id,
+		label: binding.label,
 		value: normalizeToHex(stringValue),
-		onChange: (next) => {
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				value: next
-			});
-		}
+		onChange
 	});
 	if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
 		defaultValue: parseDateValue(stringValue),
@@ -12515,7 +12821,6 @@ const Field = ({ binding, id, value, onChange }) => {
 		children: validationError
 	})] });
 };
-
 //#endregion
 //#region src/components/dnd/panel/node.tsx
 const Node = ({ data, onChange }) => {
@@ -12554,21 +12859,21 @@ const Node = ({ data, onChange }) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/components/dnd/panel/panel.tsx
 const Panel = ({ item, onChange, onDelete }) => {
+	const code = item?.code;
 	const { dataAttrNodes, updatedCode, parseError } = useMemo(() => {
-		if (!item?.code) return {
+		if (!code) return {
 			dataAttrNodes: [],
 			updatedCode: "",
 			parseError: false
 		};
 		try {
-			const updatedCode = fillIds(item.code);
+			const updatedCode = fillIds(code);
 			return {
 				dataAttrNodes: extract(updatedCode).filter((node) => node.tagName !== "section"),
-				updatedCode: updatedCode !== item.code ? updatedCode : item.code,
+				updatedCode: updatedCode !== code ? updatedCode : code,
 				parseError: false
 			};
 		} catch (e) {
@@ -12579,7 +12884,7 @@ const Panel = ({ item, onChange, onDelete }) => {
 				parseError: true
 			};
 		}
-	}, [item?.code]);
+	}, [code]);
 	useEffect(() => {
 		if (parseError) Toast.error("Failed to parse this section", { description: "Check the console for details." });
 	}, [parseError]);
@@ -12622,7 +12927,6 @@ const Panel = ({ item, onChange, onDelete }) => {
 		]
 	});
 };
-
 //#endregion
 //#region src/components/dnd/dnd.tsx
 const conditionalModifiers = (args) => {
@@ -12639,7 +12943,12 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value || DEFAULT_TEMPLATE;
 	const sections = useMemo(() => extractSections(value), [value]);
-	const previews = useMemo(() => generateSections(sections.map((s) => s.code), value), [sections, value]);
+	const [previewCache] = useState(() => createSectionPreviewCache());
+	const previews = useMemo(() => previewCache.compute(value, sections), [
+		previewCache,
+		sections,
+		value
+	]);
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {
@@ -12672,7 +12981,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 			const prevIndex = sections.findIndex((s) => s.id === active.id);
 			const nextIndex = sections.findIndex((s) => s.id === over.id);
 			if (prevIndex >= 0 && nextIndex >= 0) {
-				const nextCode = replaceSections(value, arrayMove(sections, prevIndex, nextIndex).map((s) => s.code));
+				const nextSections = arrayMove(sections, prevIndex, nextIndex);
+				const nextCode = replaceSections(value, nextSections.map((s) => s.code));
 				_onChange?.(nextCode);
 				setCode(nextCode);
 			}
@@ -12684,7 +12994,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 			name: item.name,
 			code: item.code
 		};
-		const nextCode = replaceSections(value, [...sections, newSection].map((s) => s.code));
+		const nextSections = [...sections, newSection];
+		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
 		_onChange?.(nextCode);
 		setCode(nextCode);
 	};
@@ -12720,10 +13031,11 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		setSelectedId((prev) => prev === id ? null : id);
 	};
 	const onChange = (next) => {
-		const nextCode = replaceSections(value, sections.map((s) => s.id === next.id ? {
+		const nextSections = sections.map((s) => s.id === next.id ? {
 			...s,
 			...next
-		} : s).map((s) => s.code));
+		} : s);
+		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
 		_onChange?.(nextCode);
 		setCode(nextCode);
 	};
@@ -12858,12 +13170,10 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		}) })]
 	}) });
 };
-
 //#endregion
 //#region src/components/dnd/index.ts
 const Dnd = Dnd$1;
 Dnd.DraggableItem = DraggableItem;
-
 //#endregion
 //#region src/components/editor/editor.tsx
 const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }) => {
@@ -12902,12 +13212,10 @@ const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onCh
 		...props
 	});
 };
-
 //#endregion
 //#region src/components/editor/index.ts
 const Editor = Editor$1;
 Editor.Core = Core;
-
 //#endregion
 //#region src/components/error/error.tsx
 const Error$2 = ({ message, title = "An error occurred", className, onReset }) => {
@@ -12956,7 +13264,6 @@ const Error$2 = ({ message, title = "An error occurred", className, onReset }) =
 		]
 	});
 };
-
 //#endregion
 //#region src/components/error/boundary.tsx
 var ErrorBoundary = class extends React.Component {
@@ -12995,7 +13302,6 @@ var ErrorBoundary = class extends React.Component {
 		return this.props.children;
 	}
 };
-
 //#endregion
 //#region src/components/error/guard.tsx
 const Guard = ({ children, onError }) => {
@@ -13046,7 +13352,6 @@ const Guard = ({ children, onError }) => {
 		children
 	});
 };
-
 //#endregion
 //#region src/components/error/runtime.tsx
 const Runtime = ({ open = true, reset }) => {
@@ -13065,14 +13370,12 @@ const Runtime = ({ open = true, reset }) => {
 		title: "Runtime Error"
 	});
 };
-
 //#endregion
 //#region src/components/error/index.ts
 const Error$1 = Error$2;
 Error$1.Boundary = ErrorBoundary;
 Error$1.Runtime = Runtime;
 Error$1.Guard = Guard;
-
 //#endregion
 //#region src/components/preview/client.tsx
 const Client = ({ code: _code = "", className, showError, props = {}, modules = {}, frame, provider }) => {
@@ -13140,7 +13443,6 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 		})
 	}), /* @__PURE__ */ jsx(Error$1.Runtime, { open: isError })] });
 };
-
 //#endregion
 //#region src/components/preview/preview.tsx
 const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, provider, ...restProps }) => {
@@ -13212,7 +13514,6 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
 		...restProps
 	});
 };
-
 //#endregion
 //#region src/index.tsx
 const App = ({ children }) => {
@@ -13224,7 +13525,7 @@ App.Renderer = LiveRenderer;
 App.Error = Error$1;
 App.Editor = Editor;
 App.Dnd = Dnd;
-
 //#endregion
 export { Dnd as LiveDnd, Editor as LiveEditor, Error$1 as LiveError, Preview as LivePreview, App as LiveProvider, App as default, LiveRenderer };
+
 //# sourceMappingURL=index.mjs.map