quoin-editor 0.4.2 → 1.0.1

package/dist/chunk-SSIRYUCK.js

@@ -0,0 +1,3303 @@
+import {
+  Transaction,
+  blockRangeSelection,
+  commonPrefix,
+  commonSuffix,
+  createEditor,
+  deleteBackward,
+  deleteForward,
+  deleteSelection,
+  deleteToLineEnd,
+  deleteToLineStart,
+  deleteWordBackward,
+  deleteWordForward,
+  detectMac,
+  endOf,
+  headBlockId,
+  hidingToggle,
+  insertHardBreak,
+  insertText,
+  isClosedToggle,
+  isCollapsed,
+  isTextFlow,
+  mapSelection,
+  markRanges,
+  nextGraphemeOffset,
+  nodeSelection,
+  prevGraphemeOffset,
+  primaryRegion,
+  rangeContent,
+  redo,
+  regionLength,
+  replaceInlineStep,
+  runCommands,
+  sameSelection,
+  selectionRange,
+  setAttrs,
+  setSelection,
+  startOf,
+  textSelection,
+  toggleMark,
+  toggleTask,
+  undo,
+  undoInputRule
+} from "./chunk-UPSLDTLT.js";
+import {
+  alignOrUndefined,
+  blockById,
+  dataAttributes,
+  headingLevel,
+  inlineLength,
+  inlinePlainText,
+  inlineText,
+  markElement,
+  nodeLength,
+  optionalString,
+  orderedStart,
+  paletteOrUndefined,
+  requireBlockIndex,
+  sameAttrs,
+  sameItems,
+  sanitizeHref,
+  sliceInline,
+  writtenAttrs
+} from "./chunk-62WKUAQY.js";
+
+// src/view/react/use-editor-state.ts
+import { useCallback, useRef, useSyncExternalStore } from "react";
+var wholeState = (state) => state;
+function useEditorState(controller, selector, isEqual = Object.is) {
+  const last = useRef(null);
+  const subscribe = useCallback(
+    (notify) => controller.editor.subscribe(() => notify()),
+    [controller]
+  );
+  const getSnapshot = useCallback(() => {
+    const { state } = controller.editor;
+    const previous = last.current;
+    if (previous !== null && previous.state === state && previous.selector === selector) return previous.value;
+    const next = selector(state);
+    const value = previous !== null && isEqual(previous.value, next) ? previous.value : next;
+    last.current = { state, selector, value };
+    return value;
+  }, [controller, selector, isEqual]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+// src/view/selection/selection-decorations.ts
+var SELECTED = { class: "quoin-selected" };
+function isCrossSelection(selection) {
+  if (selection?.kind !== "text") return false;
+  const { anchor, head } = selection;
+  return anchor.block !== head.block || anchor.region !== head.region;
+}
+function selectionDecorations(state, mode) {
+  if (mode !== "decorations" || !isCrossSelection(state.selection)) return [];
+  return markRanges(state).map(({ block, region, from, to }) => ({
+    kind: "inline",
+    block,
+    region,
+    from,
+    to,
+    attrs: SELECTED
+  }));
+}
+
+// src/view/dom/attributes.ts
+var sortedEntries = (attrs) => dataAttributes(attrs, "");
+function setAttributes(element, attrs, prefix = "") {
+  for (const [name, value] of writtenAttrs(dataAttributes(attrs, prefix))) element.setAttribute(name, value);
+}
+
+// src/view/dom/segments.ts
+function decorationRanges(decorations, length) {
+  const ranges = [];
+  for (const decoration of decorations) {
+    if (decoration.kind !== "inline") continue;
+    const from = Math.max(0, decoration.from);
+    const to = Math.min(length, decoration.to);
+    if (from < to) ranges.push({ from, to, attrs: decoration.attrs });
+  }
+  return ranges;
+}
+function toSegments(inline, decorations) {
+  const length = inlineLength(inline);
+  const ranges = decorationRanges(decorations, length);
+  const widgets = decorations.filter((decoration) => decoration.kind === "widget").map((decoration) => ({ decoration, at: Math.min(Math.max(decoration.offset, 0), length) })).sort((a, b) => a.at - b.at || (a.decoration.side ?? 1) - (b.decoration.side ?? 1));
+  const edges = [...ranges.flatMap((range) => [range.from, range.to]), ...widgets.map((widget) => widget.at)];
+  const cuts = [...new Set(edges)].filter((point) => point > 0 && point < length).sort((a, b) => a - b);
+  const covering = (from, to) => ranges.filter((range) => range.from <= from && range.to >= to).map((range) => range.attrs);
+  const segments = [];
+  let nextWidget = 0;
+  let nextCut = 0;
+  const placeWidgets = (upTo) => {
+    for (; nextWidget < widgets.length && widgets[nextWidget].at <= upTo; nextWidget++) {
+      segments.push({ kind: "widget", decoration: widgets[nextWidget].decoration, from: widgets[nextWidget].at });
+    }
+  };
+  let start = 0;
+  for (const node of inline) {
+    const end = start + nodeLength(node);
+    if (node.kind === "atom") {
+      placeWidgets(start);
+      segments.push({ kind: "atom", node, decorations: covering(start, end), from: start });
+    } else if (end > start) {
+      let from = start;
+      while (from < end) {
+        while (nextCut < cuts.length && cuts[nextCut] <= from) nextCut++;
+        const to = nextCut < cuts.length && cuts[nextCut] < end ? cuts[nextCut] : end;
+        placeWidgets(from);
+        segments.push({
+          kind: "text",
+          text: node.text.slice(from - start, to - start),
+          marks: node.marks,
+          decorations: covering(from, to),
+          from
+        });
+        from = to;
+      }
+    }
+    start = end;
+  }
+  placeWidgets(length);
+  return segments;
+}
+var marksKey = (marks) => marks.map((mark2) => [mark2.type, sortedEntries(mark2.attrs)]);
+var decorationsKey = (decorations) => decorations.map(sortedEntries);
+function segmentSignature(segment) {
+  switch (segment.kind) {
+    case "text":
+      return JSON.stringify(["text", marksKey(segment.marks), decorationsKey(segment.decorations)]);
+    case "atom": {
+      const { node } = segment;
+      const attrs = sortedEntries(node.attrs);
+      return JSON.stringify(["atom", node.type, attrs, marksKey(node.marks), decorationsKey(segment.decorations)]);
+    }
+    case "widget": {
+      const { decoration } = segment;
+      return JSON.stringify(["widget", decoration.widget, decoration.key, sortedEntries(decoration.attrs)]);
+    }
+  }
+}
+
+// src/view/dom/mark-elements.ts
+function create(doc, tag, attributes) {
+  const element = doc.createElement(tag);
+  for (const [name, value] of attributes) element.setAttribute(name, value);
+  return element;
+}
+function linkElement({ href = "", title } = {}, doc) {
+  const safe = sanitizeHref(href);
+  if (safe === null) return create(doc, "span", [["data-quoin-link", ""]]);
+  const anchor = create(doc, "a", [["href", safe], ["data-quoin-link", ""]]);
+  if (title) anchor.title = title;
+  return anchor;
+}
+function markElement2(mark2, doc) {
+  if (mark2.type === "link") return linkElement(mark2.attrs, doc);
+  const { tag, attrs } = markElement(mark2);
+  return create(doc, tag, writtenAttrs(attrs));
+}
+
+// src/view/dom/wrappers.ts
+var created = /* @__PURE__ */ new WeakSet();
+function decorationElement(attrs, doc) {
+  const element = doc.createElement("span");
+  element.setAttribute("data-quoin-deco", "");
+  setAttributes(element, attrs);
+  return element;
+}
+function wrapperDepth(marks, decorations) {
+  return marks.length + decorations.length;
+}
+function createWrappers(marks, decorations, doc) {
+  const wrappers = [
+    ...marks.map((mark2) => markElement2(mark2, doc)),
+    ...decorations.map((attrs) => decorationElement(attrs, doc))
+  ];
+  wrappers.forEach((wrapper, index) => {
+    created.add(wrapper);
+    if (index > 0) wrappers[index - 1].appendChild(wrapper);
+  });
+  return wrappers;
+}
+function unwrap(node, depth) {
+  const wrappers = [];
+  let content = node;
+  for (let level = 0; level < depth; level++) {
+    if (!content || !created.has(content)) return null;
+    if (level < depth - 1 && content.childNodes.length !== 1) return null;
+    wrappers.push(content);
+    content = content.firstChild;
+  }
+  return { wrappers, content };
+}
+function wrapperEntries(wrappers, from, to) {
+  return wrappers.map((node) => ({ node, from, to, kind: "wrapper" }));
+}
+
+// src/view/dom/atom-specs.ts
+function defaultAtomText(node) {
+  if (node.type === "mention") return `@${node.attrs.label ?? ""}`;
+  return node.type === "math" ? node.attrs.latex ?? "" : node.type;
+}
+function mark(element, attribute, name) {
+  element.setAttribute("contenteditable", "false");
+  element.setAttribute(attribute, name);
+  return element;
+}
+function defaultAtom(node, doc, atomText) {
+  const element = mark(doc.createElement("span"), "data-quoin-atom", node.type);
+  setAttributes(element, node.attrs, "data-");
+  element.textContent = atomText(node);
+  return element;
+}
+var defaultWidget = (_decoration, doc) => doc.createElement("span");
+function own(record, key) {
+  return record && Object.hasOwn(record, key) ? record[key] : void 0;
+}
+function atomSpec(segment, options, doc) {
+  const { node, decorations, from } = segment;
+  const depth = wrapperDepth(node.marks, decorations);
+  const soleContent = (wrappers) => wrappers.length === 0 || wrappers[wrappers.length - 1].childNodes.length === 1;
+  return {
+    sig: segmentSignature(segment),
+    create() {
+      const render = own(options.atoms, node.type);
+      const content = render ? mark(render(node, doc), "data-quoin-atom", node.type) : defaultAtom(node, doc, options.atomText ?? defaultAtomText);
+      const wrappers = createWrappers(node.marks, decorations, doc);
+      wrappers[wrappers.length - 1]?.appendChild(content);
+      return wrappers[0] ?? content;
+    },
+    refresh(top) {
+      const chain = unwrap(top, depth);
+      return chain !== null && soleContent(chain.wrappers);
+    },
+    describe(top, out) {
+      const { wrappers, content } = unwrap(top, depth);
+      out.push(...wrapperEntries(wrappers, from, from + 1), { node: content, from, to: from + 1, kind: "atom" });
+    }
+  };
+}
+function widgetSpec(segment, options, doc) {
+  const { decoration, from } = segment;
+  return {
+    sig: segmentSignature(segment),
+    create() {
+      const render = own(options.widgets, decoration.widget) ?? defaultWidget;
+      return mark(render(decoration, doc), "data-quoin-widget", decoration.widget);
+    },
+    describe: (node, out) => void out.push({ node, from, to: from, kind: "widget" })
+  };
+}
+
+// src/view/dom/dom-map.ts
+var TEXT_NODE = 3;
+var textLength = (node) => (node.textContent ?? "").length;
+var indexIn = (node) => Array.prototype.indexOf.call(node.parentNode.childNodes, node);
+var pointAt = (entry, shift) => ({
+  node: entry.node.parentNode,
+  offset: indexIn(entry.node) + shift
+});
+function textBefore(root, node, offset) {
+  let length = 0;
+  if (node.nodeType === TEXT_NODE) {
+    length = Math.min(offset, textLength(node));
+  } else {
+    let child = node.firstChild;
+    for (let index = 0; child && index < offset; index++, child = child.nextSibling) {
+      length += textLength(child);
+    }
+  }
+  for (let current = node; current !== root; current = current.parentNode) {
+    for (let sibling = current.previousSibling; sibling; sibling = sibling.previousSibling) {
+      length += textLength(sibling);
+    }
+  }
+  return length;
+}
+function createDomMap(host, length, entries) {
+  const byNode = new Map(entries.map((entry) => [entry.node, entry]));
+  const texts = entries.filter((entry) => entry.kind === "text");
+  const breaksAndAtoms = entries.filter((entry) => entry.kind === "break" || entry.kind === "atom");
+  const stops = entries.filter((entry) => entry.kind === "break" || entry.kind === "atom" || entry.kind === "filler");
+  function toDom(offset, assoc = 1) {
+    const at = Math.min(Math.max(offset, 0), length);
+    const after = texts.find((entry) => entry.from <= at && at < entry.to);
+    const before = texts.find((entry) => entry.from < at && at <= entry.to);
+    const text = assoc === 1 ? after ?? before : before ?? after;
+    if (text) return { node: text.node, offset: at - text.from };
+    const next = stops.find((entry) => entry.from >= at);
+    const previous = breaksAndAtoms.filter((entry) => entry.to <= at).pop();
+    const beforeNext = next && pointAt(next, 0);
+    const afterPrevious = previous && pointAt(previous, 1);
+    return (assoc === 1 ? beforeNext ?? afterPrevious : afterPrevious ?? beforeNext) ?? { node: host, offset: 0 };
+  }
+  function atChild(parent, offset, end) {
+    const children = parent.childNodes;
+    for (let index = offset; index < children.length; index++) {
+      const entry = byNode.get(children[index]);
+      if (entry) return entry.from;
+    }
+    return end;
+  }
+  function enclosingAtom(node) {
+    for (let current = node; current && current !== host; current = current.parentNode) {
+      const entry = byNode.get(current);
+      if (entry?.kind === "atom" || entry?.kind === "widget") return entry;
+    }
+    return void 0;
+  }
+  function fromDom(node, offset) {
+    if (!host.contains(node)) return null;
+    if (node === host) return atChild(host, offset, length);
+    const atom = enclosingAtom(node);
+    if (atom?.kind === "widget") return atom.from;
+    if (atom) {
+      const inside = textBefore(atom.node, node, offset);
+      return inside > 0 && inside * 2 >= textLength(atom.node) ? atom.to : atom.from;
+    }
+    const entry = byNode.get(node);
+    if (!entry) return fromDom(node.parentNode, indexIn(node));
+    if (node.nodeType === TEXT_NODE) return entry.from + Math.min(offset, entry.to - entry.from);
+    if (entry.kind === "break") return offset > 0 ? entry.to : entry.from;
+    return atChild(node, offset, entry.to);
+  }
+  return { length, toDom, fromDom };
+}
+
+// src/view/dom/reconcile.ts
+var signatures = /* @__PURE__ */ new WeakMap();
+function keeps(node, spec) {
+  return signatures.get(node) === spec.sig && (spec.refresh?.(node) ?? true);
+}
+function reconcileChildren(parent, specs) {
+  const old = Array.from(parent.childNodes);
+  let head = 0;
+  while (head < specs.length && head < old.length && keeps(old[head], specs[head])) head++;
+  let oldEnd = old.length;
+  let newEnd = specs.length;
+  while (newEnd > head && oldEnd > head && keeps(old[oldEnd - 1], specs[newEnd - 1])) {
+    oldEnd--;
+    newEnd--;
+  }
+  const anchor = old[oldEnd] ?? null;
+  for (let i = head; i < oldEnd; i++) parent.removeChild(old[i]);
+  for (let i = head; i < newEnd; i++) {
+    const node = specs[i].create();
+    signatures.set(node, specs[i].sig);
+    parent.insertBefore(node, anchor);
+  }
+}
+
+// src/view/dom/text-diff.ts
+function textDiff(before, after, caretHint) {
+  if (before === after) return null;
+  const prefix = commonPrefix(before, after);
+  const suffix = commonSuffix(before, after);
+  const shared = Math.min(suffix, Math.min(before.length, after.length) - prefix);
+  const removed = before.length - prefix - shared;
+  const inserted = after.length - prefix - shared;
+  const earliest = prefix - (suffix - shared);
+  const from = caretHint === void 0 ? prefix : Math.min(Math.max(caretHint - inserted, earliest), prefix);
+  return { from, to: from + removed, insert: after.slice(from, from + inserted) };
+}
+
+// src/view/dom/text-specs.ts
+var TEXT = "text";
+var BREAK = "break";
+function textPiece(doc, value, from) {
+  return {
+    sig: TEXT,
+    create: () => doc.createTextNode(value),
+    // Assigning data collapses a range inside the node to its start; an edit moves only the points after it.
+    refresh(node) {
+      const target = node;
+      const edit = textDiff(target.data, value);
+      if (edit !== null) target.replaceData(edit.from, edit.to - edit.from, edit.insert);
+      return true;
+    },
+    describe: (node, out) => void out.push({ node, from, to: from + value.length, kind: "text" })
+  };
+}
+function breakPiece(doc, from) {
+  return {
+    sig: BREAK,
+    create() {
+      const element = doc.createElement("br");
+      element.setAttribute("data-quoin-break", "");
+      return element;
+    },
+    describe: (node, out) => void out.push({ node, from, to: from + 1, kind: "break" })
+  };
+}
+function fillerSpec(doc, at) {
+  return {
+    sig: "filler",
+    create() {
+      const element = doc.createElement("br");
+      element.setAttribute("data-quoin-filler", "");
+      return element;
+    },
+    describe: (node, out) => void out.push({ node, from: at, to: at, kind: "filler" })
+  };
+}
+function textPieces(value, from, doc) {
+  const pieces = [];
+  let at = from;
+  value.split("\n").forEach((part, index) => {
+    if (index > 0) pieces.push(breakPiece(doc, at++));
+    if (part) {
+      pieces.push(textPiece(doc, part, at));
+      at += part.length;
+    }
+  });
+  return pieces;
+}
+function wrappedText(segment, doc) {
+  const { marks, decorations, text, from } = segment;
+  const depth = wrapperDepth(marks, decorations);
+  const pieces = textPieces(text, from, doc);
+  return {
+    sig: segmentSignature(segment),
+    create() {
+      const wrappers = createWrappers(marks, decorations, doc);
+      reconcileChildren(wrappers[depth - 1], pieces);
+      return wrappers[0];
+    },
+    refresh(node) {
+      const chain = unwrap(node, depth);
+      if (!chain) return false;
+      reconcileChildren(chain.wrappers[depth - 1], pieces);
+      return true;
+    },
+    describe(node, out) {
+      const { wrappers } = unwrap(node, depth);
+      out.push(...wrapperEntries(wrappers, from, from + text.length));
+      const children = Array.from(wrappers[depth - 1].childNodes);
+      pieces.forEach((piece, index) => piece.describe(children[index], out));
+    }
+  };
+}
+function textSpecs(segment, doc) {
+  return wrapperDepth(segment.marks, segment.decorations) === 0 ? textPieces(segment.text, segment.from, doc) : [wrappedText(segment, doc)];
+}
+
+// src/view/dom/render-inline.ts
+var maps = /* @__PURE__ */ new WeakMap();
+function domMapOf(host) {
+  return maps.get(host);
+}
+function specsFor(segment, options, doc) {
+  switch (segment.kind) {
+    case "text":
+      return textSpecs(segment, doc);
+    case "atom":
+      return [atomSpec(segment, options, doc)];
+    case "widget":
+      return [widgetSpec(segment, options, doc)];
+  }
+}
+function needsFiller(inline) {
+  const content = inlineText(inline);
+  return content === "" || content.endsWith("\n");
+}
+function renderInline(host, inline, decorations, options = {}) {
+  const doc = host.ownerDocument;
+  const length = inlineLength(inline);
+  const specs = toSegments(inline, decorations).flatMap((segment) => specsFor(segment, options, doc));
+  if (needsFiller(inline)) specs.push(fillerSpec(doc, length));
+  reconcileChildren(host, specs);
+  const entries = [];
+  const nodes = Array.from(host.childNodes);
+  specs.forEach((spec, index) => spec.describe(nodes[index], entries));
+  const map = createDomMap(host, length, entries);
+  maps.set(host, map);
+  return map;
+}
+
+// src/view/navigation/caret-from-point.ts
+function caretFromPoint(doc, x, y) {
+  if (typeof doc.caretPositionFromPoint === "function") {
+    const position = doc.caretPositionFromPoint(x, y);
+    return position ? { node: position.offsetNode, offset: position.offset } : null;
+  }
+  if (typeof doc.caretRangeFromPoint === "function") {
+    const range = doc.caretRangeFromPoint(x, y);
+    return range ? { node: range.startContainer, offset: range.startOffset } : null;
+  }
+  return null;
+}
+
+// src/view/controller/host-registry.ts
+function hostKey(block, region) {
+  return `${block}\0${region}`;
+}
+function createHostRegistry(onRegister) {
+  const byKey = /* @__PURE__ */ new Map();
+  const byElement = /* @__PURE__ */ new Map();
+  const releases = /* @__PURE__ */ new Map();
+  function forget(entry) {
+    const key = hostKey(entry.block, entry.region);
+    if (byKey.get(key) === entry) byKey.delete(key);
+    if (byElement.get(entry.element) === entry) byElement.delete(entry.element);
+    releases.get(entry)?.();
+    releases.delete(entry);
+  }
+  return {
+    register(block, region, element) {
+      const key = hostKey(block, region);
+      const entry = { block, region, element };
+      for (const previous of [byKey.get(key), byElement.get(element)]) if (previous) forget(previous);
+      byKey.set(key, entry);
+      byElement.set(element, entry);
+      if (onRegister) releases.set(entry, onRegister(element));
+      return () => forget(entry);
+    },
+    get: (block, region) => byKey.get(hostKey(block, region))?.element,
+    locate(node) {
+      for (let current = node; current; current = current.parentNode) {
+        const entry = byElement.get(current);
+        if (entry) return entry;
+      }
+      return null;
+    },
+    all: () => byKey.values()
+  };
+}
+
+// src/view/controller/dom-selection.ts
+function domToPos(registry, node, offset) {
+  const host = registry.locate(node);
+  const mapped = host && domMapOf(host.element)?.fromDom(node, offset);
+  return host && typeof mapped === "number" ? { block: host.block, region: host.region, offset: mapped } : null;
+}
+function posToDom(registry, pos, assoc) {
+  const host = registry.get(pos.block, pos.region);
+  return (host && domMapOf(host)?.toDom(pos.offset, assoc)) ?? null;
+}
+function readSelection(registry, domSelection, blockAt2 = () => void 0) {
+  const anchorNode = domSelection?.anchorNode;
+  const focusNode = domSelection?.focusNode;
+  if (!domSelection || !anchorNode || !focusNode) return null;
+  const anchor = domToPos(registry, anchorNode, domSelection.anchorOffset);
+  const head = domToPos(registry, focusNode, domSelection.focusOffset);
+  if (anchor && head) return textSelection(anchor, head);
+  if (anchor || head || registry.locate(anchorNode) || registry.locate(focusNode)) return null;
+  const block = blockAt2(anchorNode);
+  return block !== void 0 && block === blockAt2(focusNode) ? nodeSelection(block) : null;
+}
+function selectBlock(domSelection, element) {
+  if (!element) return false;
+  if (!element.contains(element.ownerDocument.activeElement)) element.focus();
+  const { anchorNode, focusNode } = domSelection;
+  if (!anchorNode || !focusNode || !element.contains(anchorNode) || !element.contains(focusNode)) {
+    domSelection.collapse(element, 0);
+  }
+  return true;
+}
+function writeSelection(registry, selection, domSelection, blockElement) {
+  if (!selection || !domSelection) return false;
+  if (selection.kind === "node") return selectBlock(domSelection, blockElement(selection.block));
+  if (selection.kind !== "text") return false;
+  const { anchor, head } = selection;
+  if (anchor.block !== head.block || anchor.region !== head.region) return false;
+  if (sameSelection(readSelection(registry, domSelection), selection)) return true;
+  const base = posToDom(registry, anchor, anchor.offset < head.offset ? 1 : -1);
+  const extent = posToDom(registry, head, head.offset < anchor.offset ? 1 : -1);
+  if (!base || !extent) return false;
+  domSelection.setBaseAndExtent(base.node, base.offset, extent.node, extent.offset);
+  return true;
+}
+
+// src/view/dom/listen.ts
+function listen(target, handlers, options) {
+  const entries = Object.entries(handlers);
+  for (const [type, handler] of entries) target.addEventListener(type, handler, options);
+  return () => {
+    for (const [type, handler] of entries) target.removeEventListener(type, handler, options);
+  };
+}
+
+// src/view/navigation/node-entry.ts
+var NODE_ENTRY = "data-quoin-node-entry";
+var entersAsNode = (controller, block) => controller.blockElement(block)?.querySelector(`[${NODE_ENTRY}]`) != null;
+
+// src/view/controller/reader-toggles.ts
+var NO_CHOICES = /* @__PURE__ */ new Map();
+var stores = /* @__PURE__ */ new WeakMap();
+var shownOpen = (block, choices) => choices.get(block.id) ?? block.attrs.open === true;
+function createReaderToggles(controller) {
+  let choices = NO_CHOICES;
+  const listeners = /* @__PURE__ */ new Set();
+  const set = (next) => {
+    choices = next;
+    for (const listener of [...listeners]) listener();
+  };
+  controller.subscribeReadOnly(() => {
+    if (!controller.readOnly && choices.size > 0) set(NO_CHOICES);
+  });
+  return {
+    get choices() {
+      return choices;
+    },
+    flip(block) {
+      set(new Map(choices).set(block.id, !shownOpen(block, choices)));
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => void listeners.delete(listener);
+    }
+  };
+}
+function readerToggles(controller) {
+  let store = stores.get(controller);
+  if (store === void 0) {
+    store = createReaderToggles(controller);
+    stores.set(controller, store);
+  }
+  return store;
+}
+
+// src/view/navigation/visible-blocks.ts
+var known = /* @__PURE__ */ new WeakMap();
+function hidersOf(doc) {
+  let hiders = known.get(doc);
+  if (hiders === void 0) {
+    const first = doc.blocks.findIndex(isClosedToggle);
+    hiders = doc.blocks.map((_, index) => first < 0 || index <= first ? null : hidingToggle(doc, index + 1));
+    known.set(doc, hiders);
+  }
+  return hiders;
+}
+var hidingToggleAt = (doc, index) => hidersOf(doc)[index] ?? null;
+function isHiddenAt(doc, index, choices) {
+  if (choices.size === 0) return hidingToggleAt(doc, index) !== null;
+  const closed = (block) => block.type === "TOGGLE" && !shownOpen(block, choices);
+  return hidingToggle(doc, index + 1, closed) !== null;
+}
+var visibleBlockIndexes = (doc) => hidersOf(doc).flatMap((hider, index) => hider === null ? [index] : []);
+function drawnBlockCount(doc, start = 0, end = doc.blocks.length) {
+  const hiders = hidersOf(doc);
+  let drawn = 0;
+  for (let index = Math.max(0, start); index < Math.min(end, hiders.length); index++) if (hiders[index] === null) drawn++;
+  return drawn;
+}
+
+// src/view/controller/dispatch-selection.ts
+var dispatchSelection = (controller, selection) => controller.dispatch(controller.editor.createTransaction().setSelection(selection));
+
+// src/view/navigation/neighbour-block.ts
+var anyBlock = () => true;
+function neighbourBlock(doc, from, direction, accept = anyBlock) {
+  const index = doc.index.get(from);
+  if (index === void 0) return null;
+  const visible = visibleBlockIndexes(doc);
+  const ahead = direction < 0 ? visible.filter((at) => at < index).reverse() : visible.filter((at) => at > index);
+  const found = ahead.find((at) => accept(doc.blocks[at]));
+  return found === void 0 ? null : doc.blocks[found];
+}
+function entryEdge(controller, block, direction) {
+  const { doc, schema } = controller.editor.state;
+  const edge = direction < 0 ? endOf(doc, schema, block) : startOf(doc, schema, block);
+  if (edge.kind !== "text") return edge;
+  const drawn = controller.registry.get(edge.head.block, edge.head.region) !== void 0;
+  return drawn && !entersAsNode(controller, block) ? edge : nodeSelection(block);
+}
+var ownNode = (controller, block, direction) => direction < 0 && entersAsNode(controller, block) ? nodeSelection(block) : null;
+var holdsTextHead = (controller) => (block) => isTextFlow(controller.editor.state.schema, block) && entryEdge(controller, block.id, 1).kind === "text";
+function neighbourHead(controller, from, direction) {
+  const target = neighbourBlock(controller.editor.state.doc, from, direction, holdsTextHead(controller));
+  const edge = target && entryEdge(controller, target.id, direction);
+  return edge?.kind === "text" ? edge.head : null;
+}
+function moveToNeighbour(controller, from, direction) {
+  const target = neighbourBlock(controller.editor.state.doc, from, direction);
+  if (target === null) return false;
+  dispatchSelection(controller, entryEdge(controller, target.id, direction));
+  return true;
+}
+
+// src/view/selection/scroll-container.ts
+var SCROLLS = /* @__PURE__ */ new Set(["auto", "scroll"]);
+var scrollsVertically = (element) => SCROLLS.has(getComputedStyle(element).overflowY) && element.scrollHeight > element.clientHeight;
+function scrollContainerOf(element) {
+  const { body, documentElement } = element.ownerDocument;
+  for (let node = element; node !== null; node = node.parentElement) {
+    if (node === body || node === documentElement) return null;
+    if (scrollsVertically(node)) return node;
+  }
+  return null;
+}
+
+// src/view/selection/auto-scroll.ts
+var EDGE = 40;
+var MAX_STEP = 20;
+function edgesOf(container, win) {
+  if (container === null) return { top: 0, bottom: win.innerHeight };
+  const top = container.getBoundingClientRect().top + container.clientTop;
+  return { top: Math.max(top, 0), bottom: Math.min(top + container.clientHeight, win.innerHeight) };
+}
+function createAutoScroll(element, onScroll, edge = EDGE) {
+  const win = element.ownerDocument.defaultView;
+  let container;
+  let delta = 0;
+  let frame = null;
+  const step = (depth) => Math.ceil(Math.min(depth, edge) / edge * MAX_STEP);
+  function tick() {
+    frame = null;
+    if (delta === 0) return;
+    (container ?? win).scrollBy(0, delta);
+    onScroll();
+    frame = win.requestAnimationFrame(tick);
+  }
+  return {
+    update(clientY) {
+      if (container === void 0) container = scrollContainerOf(element);
+      const { top, bottom } = edgesOf(container, win);
+      const [upper, lower] = [top + edge, bottom - edge];
+      delta = clientY < upper ? -step(upper - clientY) : clientY > lower ? step(clientY - lower) : 0;
+      if (delta !== 0 && frame === null) frame = win.requestAnimationFrame(tick);
+    },
+    stop() {
+      delta = 0;
+      container = void 0;
+      if (frame !== null) win.cancelAnimationFrame(frame);
+      frame = null;
+    }
+  };
+}
+
+// src/view/navigation/caret-in-host.ts
+function caretInHost(registry, element, box, at, x, y) {
+  const point = caretFromPoint(element.ownerDocument, Math.min(Math.max(x, box.left), box.right - 1), y);
+  const pos = point && domToPos(registry, point.node, point.offset);
+  return pos && pos.block === at.block && pos.region === at.region ? pos : null;
+}
+
+// src/view/selection/pointer-targets.ts
+function distance(rect, x, y) {
+  const dy = y < rect.top ? rect.top - y : Math.max(0, y - rect.bottom);
+  const dx = x < rect.left ? rect.left - x : Math.max(0, x - rect.right);
+  return [dy, dx];
+}
+function nearest(items, element, x, y) {
+  let best = null;
+  let bestY = Infinity;
+  let bestX = Infinity;
+  for (const item of items) {
+    const [dy, dx] = distance(element(item).getBoundingClientRect(), x, y);
+    if (dy < bestY || dy === bestY && dx < bestX) [best, bestY, bestX] = [item, dy, dx];
+  }
+  return best;
+}
+var elementAt = (controller, x, y) => controller.root?.ownerDocument.elementFromPoint(x, y) ?? null;
+function hostAt(controller, x, y) {
+  const { registry } = controller;
+  return registry.locate(elementAt(controller, x, y)) ?? nearest(registry.all(), (entry) => entry.element, x, y);
+}
+function blockAt(controller, x, y) {
+  const element = elementAt(controller, x, y);
+  const under = element && controller.blockAt(element);
+  if (under !== void 0 && under !== null) return under;
+  const { doc } = controller.editor.state;
+  const drawn = visibleBlockIndexes(doc).flatMap((index) => {
+    const shell = controller.blockElement(doc.blocks[index].id);
+    return shell ? [{ id: doc.blocks[index].id, shell }] : [];
+  });
+  return nearest(drawn, (entry) => entry.shell, x, y)?.id ?? null;
+}
+function caretPosAt(controller, host, x, y) {
+  const { element, block, region } = host;
+  const at = (offset) => ({ block, region, offset });
+  const end = domMapOf(element)?.length ?? 0;
+  const box = element.getBoundingClientRect();
+  if (y < box.top) return at(0);
+  if (y >= box.bottom) return at(end);
+  return caretInHost(controller.registry, element, box, host, x, y) ?? at(x < box.left ? 0 : end);
+}
+
+// src/view/selection/native-interaction.ts
+var NATIVE_INTERACTION = "data-quoin-native";
+
+// src/view/selection/cross-block-pointer.ts
+var DRAGGING = "data-quoin-dragging";
+var DRAG_DISTANCE = 4;
+var CONTROLS = `button, a, input, select, textarea, [${NATIVE_INTERACTION}]`;
+var sameHost = (pos, host) => pos.block === host.block && pos.region === host.region;
+function anchorAtCrossing(controller) {
+  const native = controller.domSelection();
+  const anchor = native?.anchorNode && domToPos(controller.registry, native.anchorNode, native.anchorOffset);
+  if (anchor) return anchor;
+  const { selection } = controller.editor.state;
+  return selection?.kind === "text" ? selection.anchor : null;
+}
+function createCrossBlockPointer(controller) {
+  return {
+    attach(root) {
+      const doc = root.ownerDocument;
+      const view = doc.defaultView;
+      let press = null;
+      let unfollow = () => {
+      };
+      let last = { x: 0, y: 0 };
+      let preventMouseDown = false;
+      const scroll = createAutoScroll(root, () => follow(last.x, last.y));
+      function select(selection) {
+        if (sameSelection(selection, controller.editor.state.selection)) return;
+        dispatchSelection(controller, selection);
+      }
+      function startDragging() {
+        controller.dragging = true;
+        root.setAttribute(DRAGGING, "");
+      }
+      function followText(current, x, y) {
+        const target = hostAt(controller, x, y);
+        if (target === null) return;
+        if (current.anchor === null) {
+          if (target.element === current.host.element) return;
+          current.anchor = anchorAtCrossing(controller);
+          if (current.anchor === null) return;
+          startDragging();
+        }
+        select(textSelection(current.anchor, caretPosAt(controller, target, x, y)));
+      }
+      function followBlocks(current, x, y) {
+        if (!controller.dragging && Math.hypot(x - current.x, y - current.y) < DRAG_DISTANCE) return;
+        const block = blockAt(controller, x, y);
+        if (block === null) return;
+        startDragging();
+        select(blockRangeSelection(current.start, block));
+      }
+      function follow(x, y) {
+        if (press?.kind === "text") followText(press, x, y);
+        else if (press?.kind === "blocks") followBlocks(press, x, y);
+      }
+      function release() {
+        unfollow();
+        scroll.stop();
+        press = null;
+        const dragged = controller.dragging;
+        controller.dragging = false;
+        root.removeAttribute(DRAGGING);
+        return dragged;
+      }
+      function end() {
+        if (release()) controller.focus();
+      }
+      function onPointerMove(event) {
+        if ((event.buttons & 1) === 0) return end();
+        last = { x: event.clientX, y: event.clientY };
+        follow(last.x, last.y);
+        if (controller.dragging) scroll.update(last.y);
+      }
+      function extendFrom(host, x, y) {
+        const { selection } = controller.editor.state;
+        if (selection?.kind !== "text") return;
+        if (sameHost(selection.anchor, host) && !isCrossSelection(selection)) return;
+        press = { kind: "text", host, anchor: selection.anchor };
+        preventMouseDown = true;
+        startDragging();
+        follow(x, y);
+      }
+      function onPointerDown(event) {
+        end();
+        preventMouseDown = false;
+        if (event.button !== 0 || event.pointerType === "touch") return;
+        const target = event.target;
+        const host = controller.registry.locate(target);
+        const block = host === null ? controller.blockAt(target) : void 0;
+        const control = target.closest(CONTROLS);
+        if (host !== null) {
+          press = { kind: "text", host, anchor: null };
+          if (event.shiftKey) extendFrom(host, event.clientX, event.clientY);
+        } else if (block !== void 0 && !(control && root.contains(control))) {
+          press = { kind: "blocks", start: block, x: event.clientX, y: event.clientY };
+          if (!event.shiftKey && entryEdge(controller, block, 1).kind === "node") {
+            controller.nodeReveal.pressed(block);
+            select(nodeSelection(block));
+          }
+        } else {
+          return;
+        }
+        const unfollowDocument = listen(doc, { pointermove: onPointerMove, pointerup: end, pointercancel: end });
+        const unfollowView = listen(view, { blur: end });
+        unfollow = () => {
+          unfollowDocument();
+          unfollowView();
+        };
+      }
+      function onMouseDown(event) {
+        if (preventMouseDown) event.preventDefault();
+        preventMouseDown = false;
+      }
+      const unlisten = listen(root, { pointerdown: onPointerDown, mousedown: onMouseDown });
+      return () => {
+        release();
+        unlisten();
+      };
+    }
+  };
+}
+
+// src/view/selection/paint-selection.ts
+var NAME = "quoin-selection";
+function coveredRanges(controller) {
+  return markRanges(controller.editor.state).flatMap(({ block, region, from, to }) => {
+    const host = controller.registry.get(block, region);
+    const map = host && domMapOf(host);
+    if (!host || !map) return [];
+    const start = map.toDom(from, 1);
+    const end = map.toDom(to, -1);
+    const range = host.ownerDocument.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    return [range];
+  });
+}
+function highlightPainter(highlights, Highlight) {
+  let painted = [];
+  function shared() {
+    const existing = highlights.get(NAME);
+    if (existing) return existing;
+    const created2 = new Highlight();
+    highlights.set(NAME, created2);
+    return created2;
+  }
+  function clear() {
+    if (painted.length === 0) return;
+    const highlight = shared();
+    for (const range of painted) highlight.delete(range);
+    painted = [];
+  }
+  return {
+    mode: "highlight",
+    paint(controller) {
+      clear();
+      if (!isCrossSelection(controller.editor.state.selection)) return;
+      painted = coveredRanges(controller);
+      const highlight = shared();
+      for (const range of painted) highlight.add(range);
+    },
+    clear
+  };
+}
+function decorationPainter() {
+  return { mode: "decorations", paint: (controller) => controller.refreshHosts(), clear: () => void 0 };
+}
+function createPainter(win) {
+  const { CSS: css, Highlight } = win;
+  return css?.highlights && Highlight ? highlightPainter(css.highlights, Highlight) : decorationPainter();
+}
+
+// src/view/selection/in-place.ts
+function scrollOf(at) {
+  return "scrollY" in at ? { at, left: at.scrollX, top: at.scrollY } : { at, left: at.scrollLeft, top: at.scrollTop };
+}
+function inPlace(element, change) {
+  const scrollers = [];
+  for (let at = element; at !== null; at = at.parentElement) scrollers.push(at);
+  const view = element.ownerDocument.defaultView;
+  if (view !== null) scrollers.push(view);
+  const before = scrollers.map(scrollOf);
+  change();
+  for (const { at, left, top } of before) {
+    const now = scrollOf(at);
+    if (now.left !== left || now.top !== top) at.scrollTo({ left, top, behavior: "instant" });
+  }
+}
+
+// src/view/selection/selection-sink.ts
+var wholeBlocks = (selection) => selection?.kind === "blocks" || selection?.kind === "node";
+function heldBySink(selection) {
+  return wholeBlocks(selection) || isCrossSelection(selection);
+}
+var NO_TEXT = "\xA0";
+function selectionText(state) {
+  const text = markRanges(state).map((range) => inlinePlainText(rangeContent(state, range), state.schema)).join("\n");
+  return text === "" ? NO_TEXT : text;
+}
+var focusInPlace = (sink) => inPlace(sink, () => sink.focus({ preventScroll: true }));
+var focusing = null;
+var focusingSink = (controller) => focusing === controller;
+function focusSink(controller) {
+  const { sink } = controller;
+  if (sink === null) return;
+  const text = selectionText(controller.editor.state);
+  if (sink.textContent !== text) sink.textContent = text;
+  if (sink.ownerDocument.activeElement !== sink) {
+    const outer = focusing;
+    focusing = controller;
+    try {
+      focusInPlace(sink);
+    } finally {
+      focusing = outer;
+    }
+  }
+  sink.ownerDocument.getSelection()?.selectAllChildren(sink);
+}
+function selectedBlockName({ doc, schema, selection }, blockLabel) {
+  const block = selection?.kind === "node" ? blockById(doc, selection.block) : void 0;
+  return block === void 0 ? null : blockLabel?.(block, schema) ?? "";
+}
+function clearSink(controller) {
+  const { sink } = controller;
+  if (sink !== null && sink.textContent !== "") sink.textContent = "";
+}
+
+// src/view/selection/cross-mode.ts
+var CROSS = "data-quoin-cross";
+function createCrossMode(controller) {
+  let attached = null;
+  let active = false;
+  let synced = null;
+  let frame = null;
+  function sync() {
+    const { state } = controller.editor;
+    const cross = isCrossSelection(state.selection);
+    synced = state;
+    if (cross) {
+      attached?.root.setAttribute(CROSS, "");
+      attached?.painter.paint(controller);
+    } else if (active) {
+      attached?.root.removeAttribute(CROSS);
+      attached?.painter.clear();
+    }
+    if (!heldBySink(state.selection)) clearSink(controller);
+    active = cross;
+  }
+  function syncLater() {
+    if (attached === null || frame !== null) return;
+    frame = attached.view.requestAnimationFrame(() => {
+      frame = null;
+      if (controller.editor.state !== synced) sync();
+    });
+  }
+  return {
+    get active() {
+      return active;
+    },
+    get mode() {
+      return attached?.painter.mode ?? "highlight";
+    },
+    attach(root) {
+      const view = root.ownerDocument.defaultView;
+      const current = { root, view, painter: createPainter(view) };
+      attached = current;
+      const detachPointer = createCrossBlockPointer(controller).attach(root);
+      sync();
+      return () => {
+        detachPointer();
+        if (frame !== null) view.cancelAnimationFrame(frame);
+        frame = null;
+        current.painter.clear();
+        root.removeAttribute(CROSS);
+        if (attached === current) attached = null;
+        active = false;
+      };
+    },
+    sync,
+    syncLater
+  };
+}
+
+// src/view/selection/node-reveal.ts
+var nodeOf = (selection) => selection?.kind === "node" ? selection.block : null;
+function createNodeReveal(element) {
+  let shown = null;
+  let pressed = null;
+  let owed = null;
+  return {
+    pressed(block) {
+      pressed = block;
+    },
+    follow(selection) {
+      const block = nodeOf(selection);
+      if (block !== shown) shown = null;
+      if (block !== owed) owed = null;
+    },
+    settle(selection) {
+      const block = nodeOf(selection);
+      if (block !== shown) owed = block;
+      shown = block;
+    },
+    show(selection, local) {
+      const block = nodeOf(selection);
+      if (block !== null && block !== pressed && (block !== shown || local && block === owed)) {
+        element(block)?.scrollIntoView({ block: "nearest" });
+      }
+      if (local) owed = null;
+      shown = block;
+      pressed = null;
+    }
+  };
+}
+
+// src/view/controller/announcer.ts
+var THROTTLE_MS = 500;
+function createAnnouncer(stateOf, throttleMs = THROTTLE_MS) {
+  let spoken = null;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    announce(message) {
+      const state = stateOf();
+      const now = Date.now();
+      if (spoken?.message === message && spoken.state === state && now - spoken.at < throttleMs) return;
+      spoken = { message, state, serial: (spoken?.serial ?? 0) + 1, at: now };
+      for (const listener of [...listeners]) listener();
+    },
+    current: () => spoken?.state === stateOf() ? spoken : null,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => void listeners.delete(listener);
+    }
+  };
+}
+
+// src/view/controller/element-slot.ts
+function createElementSlot(changed) {
+  let current = null;
+  return {
+    get element() {
+      return current;
+    },
+    register(element) {
+      current = element;
+      changed();
+      return () => {
+        if (current === element) current = null;
+        changed();
+      };
+    }
+  };
+}
+
+// src/view/controller/selection-element.ts
+function elementFor({ doc }, selection, rendered) {
+  const id = headBlockId(selection);
+  const index = id === null ? void 0 : doc.index.get(id);
+  if (id === null || index === void 0) return void 0;
+  const hiding = hidingToggleAt(doc, index);
+  if (hiding !== null) return rendered.block(doc.blocks[hiding].id);
+  const host = selection?.kind === "text" ? rendered.hosts.get(id, selection.head.region) : void 0;
+  return host ?? rendered.block(id);
+}
+function selectionElement(state, rendered) {
+  const { doc, schema, selection } = state;
+  if (doc.blocks.length === 0) return rendered.empty?.() ?? void 0;
+  const sink = heldBySink(selection) ? rendered.sink?.() : null;
+  if (sink) return sink;
+  return elementFor(state, selection, rendered) ?? elementFor(state, startOf(doc, schema, doc.blocks[0].id), rendered);
+}
+
+// src/view/controller/tab-stop.ts
+function createTabStop() {
+  let current;
+  return {
+    move(next) {
+      if (next === current) return;
+      if (current) current.tabIndex = -1;
+      if (next) next.tabIndex = 0;
+      current = next;
+    }
+  };
+}
+
+// src/view/controller/drawn-elements.ts
+function createDrawnElements(hosts, state) {
+  const tabStop = createTabStop();
+  const syncTabStop = () => tabStop.move(focusElement());
+  const blocks = createHostRegistry(() => {
+    syncTabStop();
+    return syncTabStop;
+  });
+  const sink = createElementSlot(syncTabStop);
+  const empty = createElementSlot(syncTabStop);
+  const rendered = {
+    hosts,
+    block: (id) => blocks.get(id, ""),
+    sink: () => sink.element,
+    empty: () => empty.element
+  };
+  function focusElement() {
+    return selectionElement(state(), rendered);
+  }
+  return {
+    get sink() {
+      return sink.element;
+    },
+    get emptyHost() {
+      return empty.element;
+    },
+    registerBlock: (id, element) => blocks.register(id, "", element),
+    block: rendered.block,
+    blockAt: (node) => blocks.locate(node)?.block,
+    registerSink: sink.register,
+    registerEmptyHost: empty.register,
+    isEditorElement: (element) => element === sink.element || element === empty.element || [hosts, blocks].some((registry) => registry.locate(element)?.element === element),
+    focusElement,
+    syncTabStop
+  };
+}
+
+// src/view/controller/focus-ownership.ts
+function hasFocus(controller, doc) {
+  const active = doc?.activeElement ?? null;
+  return active !== null && controller.isEditorElement(active);
+}
+function ownsFocus(controller, doc) {
+  const active = doc.activeElement;
+  return !active || active === doc.body || active === controller.root || hasFocus(controller, doc);
+}
+
+// src/view/controller/focus-target.ts
+function focusTarget(state, target) {
+  const { doc, schema, selection } = state;
+  if (doc.blocks.length === 0) return null;
+  if (target === "end") return endOf(doc, schema, doc.blocks[doc.blocks.length - 1].id);
+  if (target === "start" || target === void 0 && selection === null) return startOf(doc, schema, doc.blocks[0].id);
+  return target === void 0 ? selection : textSelection(target);
+}
+
+// src/view/controller/host-decorations.ts
+var NO_DECORATIONS = [];
+function decorationsByHost(decorations) {
+  const byHost = /* @__PURE__ */ new Map();
+  for (const decoration of decorations) {
+    const key = hostKey(decoration.block, decoration.kind === "block" ? "" : decoration.region);
+    const group = byHost.get(key);
+    if (group) group.push(decoration);
+    else byHost.set(key, [decoration]);
+  }
+  return byHost;
+}
+function sameDecoration(a, b) {
+  if (a.kind !== b.kind || a.block !== b.block || !sameAttrs(a.attrs, b.attrs)) return false;
+  if (a.kind === "inline" && b.kind === "inline") {
+    return a.region === b.region && a.from === b.from && a.to === b.to;
+  }
+  if (a.kind === "widget" && b.kind === "widget") {
+    const samePlace = a.region === b.region && a.offset === b.offset && a.side === b.side;
+    return samePlace && a.key === b.key && a.widget === b.widget;
+  }
+  return true;
+}
+function sameDecorations(a, b) {
+  return a === b || sameItems(a, b, sameDecoration);
+}
+var byMode = { highlight: /* @__PURE__ */ new WeakMap(), decorations: /* @__PURE__ */ new WeakMap() };
+function hostDecorations(editor, block, region, mode = "highlight") {
+  const { state } = editor;
+  const byState = byMode[mode];
+  let grouped = byState.get(state);
+  if (grouped === void 0) {
+    grouped = decorationsByHost([...editor.decorations(), ...selectionDecorations(state, mode)]);
+    byState.set(state, grouped);
+  }
+  return grouped.get(hostKey(block, region)) ?? NO_DECORATIONS;
+}
+
+// src/view/controller/region-inline.ts
+function regionInline(state, block, region) {
+  const regions = blockById(state.doc, block)?.regions;
+  return regions && Object.hasOwn(regions, region) ? regions[region] : void 0;
+}
+
+// src/view/controller/host-renderer.ts
+function createHostRenderer(editor, options, decorationsOf, afterRender) {
+  const rendered = /* @__PURE__ */ new WeakMap();
+  function paint(host, always) {
+    const inline = regionInline(editor.state, host.block, host.region);
+    if (inline === void 0) return false;
+    const decorations = decorationsOf(host.block, host.region);
+    const last = rendered.get(host.element);
+    const restyled = last?.inline === inline && !sameDecorations(last.decorations, decorations);
+    if (!always && last?.inline === inline && !restyled) return false;
+    renderInline(host.element, inline, decorations, options);
+    afterRender(host.element);
+    rendered.set(host.element, { inline, decorations });
+    return restyled;
+  }
+  return {
+    render: (host) => paint(host, true),
+    renderIfChanged: (host) => void paint(host, false)
+  };
+}
+
+// src/view/controller/outside-changes.ts
+function createOutsideChanges(editorHasFocus, movedFrom) {
+  let depth = 0;
+  let focused = false;
+  let moved = null;
+  let settled = false;
+  return {
+    inside(change) {
+      depth += 1;
+      try {
+        change();
+      } finally {
+        depth -= 1;
+      }
+    },
+    committed(tr) {
+      const outside = depth === 0 && editorHasFocus();
+      focused ||= outside;
+      if (tr?.selectionSet !== false) {
+        moved = null;
+        settled ||= depth === 0;
+        return;
+      }
+      const from = moved ?? (outside && !settled ? movedFrom(tr.before.selection) : null);
+      settled ||= outside;
+      moved = from && mapSelection(from, (pos, assoc) => tr.mapPos(pos, assoc), tr.before.doc);
+    },
+    takeFocused() {
+      const value = focused;
+      focused = false;
+      return value;
+    },
+    takeMoved() {
+      const value = moved;
+      moved = null;
+      settled = false;
+      return value;
+    }
+  };
+}
+
+// src/view/controller/read-only.ts
+function createReadOnly(registry, initial) {
+  let value = initial;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    current: () => value,
+    set(readOnly) {
+      const changed = readOnly !== value;
+      value = readOnly;
+      for (const { element } of registry.all()) element.contentEditable = readOnly ? "false" : "true";
+      if (changed) for (const listener of [...listeners]) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => void listeners.delete(listener);
+    }
+  };
+}
+
+// src/view/clipboard/slice-marker.ts
+var QUOIN_SLICE_TYPE = "application/x-quoin+json";
+var MARKER = /data-quoin-slice=(["'])([A-Za-z0-9+/=]*)\1/;
+function encode(text) {
+  let binary = "";
+  for (const byte of new TextEncoder().encode(text)) binary += String.fromCharCode(byte);
+  return btoa(binary);
+}
+function decode(encoded) {
+  const binary = atob(encoded);
+  return new TextDecoder().decode(Uint8Array.from(binary, (char) => char.charCodeAt(0)));
+}
+function wrapSliceHTML(html, json) {
+  return `<div data-quoin-slice="${encode(json)}">${html}</div>`;
+}
+function readSliceHTML(html) {
+  const encoded = MARKER.exec(html)?.[2];
+  if (!encoded) return null;
+  try {
+    return decode(encoded);
+  } catch {
+    return null;
+  }
+}
+
+// src/view/clipboard/paste-transfer.ts
+function caretOf(controller) {
+  const { selection } = controller.editor.state;
+  return selection?.kind === "text" ? selection.head : null;
+}
+function transferFiles(transfer) {
+  const files = Array.from(transfer.files);
+  const textless = !transfer.getData("text/plain") && !transfer.getData("text/html");
+  return files.length > 0 && textless ? files : null;
+}
+function pasteTransfer(controller, transfer) {
+  const files = transferFiles(transfer);
+  if (files !== null) {
+    controller.onFiles?.(files, caretOf(controller));
+    return;
+  }
+  const text = transfer.getData("text/plain");
+  const html = transfer.getData("text/html");
+  const json = transfer.getData(QUOIN_SLICE_TYPE) || readSliceHTML(html) || void 0;
+  const data = { json, html: html || void 0, text: text || void 0 };
+  if (controller.edit(() => controller.editor.paste(data))) controller.focus();
+}
+
+// src/view/clipboard/clipboard-events.ts
+function handleCopy(controller, event, cut) {
+  const { clipboardData } = event;
+  if (!clipboardData) return;
+  const copied = controller.editor.copy();
+  if (copied === null) return;
+  event.preventDefault();
+  clipboardData.setData("text/plain", copied.text);
+  clipboardData.setData("text/html", wrapSliceHTML(copied.html, copied.json));
+  clipboardData.setData(QUOIN_SLICE_TYPE, copied.json);
+  if (cut) controller.run(deleteSelection);
+}
+function handlePaste(controller, event) {
+  if (!event.clipboardData) return;
+  event.preventDefault();
+  pasteTransfer(controller, event.clipboardData);
+}
+
+// src/view/clipboard/drop-events.ts
+var DROPPABLE = ["Files", "text/plain", "text/html"];
+function dropPos(controller, x, y) {
+  const host = hostAt(controller, x, y);
+  return host && caretPosAt(controller, host, x, y);
+}
+function textlessBlockAt(controller, x, y) {
+  const element = controller.root?.ownerDocument.elementFromPoint(x, y);
+  const block = element ? controller.blockAt(element) : void 0;
+  if (block === void 0 || controller.registry.locate(element ?? null) !== null) return null;
+  const hasText = [...controller.registry.all()].some((host) => host.block === block);
+  return hasText && !entersAsNode(controller, block) ? null : { block, region: "", offset: 0 };
+}
+function handleDrop(controller, event) {
+  event.preventDefault();
+  const { dataTransfer } = event;
+  if (!dataTransfer) return;
+  const files = transferFiles(dataTransfer);
+  const onBlock2 = files && textlessBlockAt(controller, event.clientX, event.clientY);
+  if (files && onBlock2) {
+    controller.onFiles?.(files, onBlock2);
+    return;
+  }
+  const pos = dropPos(controller, event.clientX, event.clientY);
+  if (pos) controller.dispatch(controller.editor.createTransaction().setSelection(textSelection(pos)).setOrigin("drop"));
+  pasteTransfer(controller, dataTransfer);
+}
+function handleDragOver(event) {
+  const types = event.dataTransfer?.types ?? [];
+  if (DROPPABLE.some((type) => types.includes(type))) event.preventDefault();
+}
+function handleDragStart(event) {
+  event.preventDefault();
+}
+
+// src/view/clipboard/attach-clipboard.ts
+function attachClipboard(controller, root, catchUp) {
+  const inEmptyHost = (target) => target.closest?.("[data-quoin-empty]") != null;
+  const inEditor = ({ target }) => controller.registry.locate(target) !== null || controller.isEditorElement(target) || inEmptyHost(target);
+  const inField = ({ target }) => target?.closest?.("input, textarea, select") != null;
+  const droppable = (event) => !controller.readOnly && !inField(event);
+  const onCopy = (event) => {
+    if (!inEditor(event)) return;
+    catchUp();
+    handleCopy(controller, event, false);
+  };
+  const onCut = (event) => {
+    if (controller.readOnly || !inEditor(event)) return;
+    catchUp();
+    handleCopy(controller, event, true);
+  };
+  const onPaste = (event) => {
+    if (controller.readOnly || !inEditor(event)) return;
+    catchUp();
+    handlePaste(controller, event);
+  };
+  const onDragStart = (event) => {
+    if (controller.registry.locate(event.target) !== null) handleDragStart(event);
+  };
+  const onDragOver = (event) => {
+    if (droppable(event)) handleDragOver(event);
+  };
+  const onDrop = (event) => {
+    if (droppable(event)) handleDrop(controller, event);
+  };
+  const listeners = [
+    ["copy", onCopy],
+    ["cut", onCut],
+    ["paste", onPaste],
+    ["dragstart", onDragStart],
+    ["dragover", onDragOver],
+    ["drop", onDrop]
+  ];
+  for (const [type, listener] of listeners) root.addEventListener(type, listener);
+  return () => {
+    for (const [type, listener] of listeners) root.removeEventListener(type, listener);
+  };
+}
+
+// src/view/selection/sink-composition.ts
+var SINK_KEY = "sink";
+function textBetween(sink, start, startOffset, end, endOffset) {
+  const range = sink.ownerDocument.createRange();
+  range.setStart(start, startOffset);
+  range.setEnd(end, endOffset);
+  return range.toString();
+}
+function textOutsideSelection(sink) {
+  const selection = sink.ownerDocument.getSelection();
+  const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+  if (range === null || !sink.contains(range.startContainer) || !sink.contains(range.endContainer)) {
+    return { before: "", after: "" };
+  }
+  return {
+    before: textBetween(sink, sink, 0, range.startContainer, range.startOffset),
+    after: textBetween(sink, range.endContainer, range.endOffset, sink, sink.childNodes.length)
+  };
+}
+function composedText(sink, { before, after }) {
+  let text = sink.textContent ?? "";
+  if (text.startsWith(before)) text = text.slice(before.length);
+  return text.endsWith(after) ? text.slice(0, text.length - after.length) : text;
+}
+function createSinkComposition(controller) {
+  let outside = null;
+  let stopWaiting = null;
+  function settle() {
+    stopWaiting?.();
+    stopWaiting = null;
+    const { sink } = controller;
+    const ignored = wholeBlocks(controller.editor.state.selection);
+    const text = sink !== null && outside !== null && !ignored ? composedText(sink, outside) : "";
+    outside = null;
+    controller.composingKey = null;
+    clearSink(controller);
+    if (text === "") controller.syncSelectionToDom();
+    else controller.edit(() => controller.editor.insertText(text));
+  }
+  return {
+    start() {
+      stopWaiting?.();
+      stopWaiting = null;
+      if (outside === null && controller.sink !== null) outside = textOutsideSelection(controller.sink);
+      controller.composingKey = SINK_KEY;
+    },
+    end() {
+      const { sink } = controller;
+      if (outside === null || stopWaiting !== null || sink === null) return;
+      const onInput = (event) => {
+        if (!event.isComposing) settle();
+      };
+      const timer = setTimeout(settle, 0);
+      sink.addEventListener("input", onInput);
+      stopWaiting = () => {
+        clearTimeout(timer);
+        sink.removeEventListener("input", onInput);
+      };
+    },
+    release() {
+      if (stopWaiting !== null) settle();
+      else if (outside !== null) {
+        outside = null;
+        controller.composingKey = null;
+      }
+    }
+  };
+}
+
+// src/engine/commands/transpose-chars.ts
+var LINE_BREAK = "\n";
+var transposeChars = (state, dispatch) => {
+  const { selection } = state;
+  if (selection?.kind !== "text" || !isCollapsed(selection)) return false;
+  const { head } = selection;
+  const inline = blockById(state.doc, head.block)?.regions[head.region];
+  if (inline === void 0) return false;
+  const value = inlineText(inline);
+  const atLineEnd = head.offset === value.length || value[head.offset] === LINE_BREAK;
+  const end = atLineEnd ? head.offset : nextGraphemeOffset(value, head.offset);
+  const middle = prevGraphemeOffset(value, end);
+  const start = prevGraphemeOffset(value, middle);
+  if (start === middle || value.slice(start, end).includes(LINE_BREAK)) return false;
+  const swapped = [...sliceInline(inline, middle, end), ...sliceInline(inline, start, middle)];
+  const tr = new Transaction(state).setOrigin("input");
+  tr.step(replaceInlineStep(head.block, head.region, start, end, swapped));
+  dispatch?.(tr.setSelection(textSelection({ ...head, offset: end })));
+  return true;
+};
+
+// src/view/input/replace-range.ts
+function replaceRange(editor, range, text, withRules) {
+  const dispatch = (tr) => editor.dispatch(tr);
+  dispatch(editor.createTransaction().setSelection(textSelection(range.from, range.to)).setOrigin("input"));
+  if (text === "") return deleteSelection(editor.state, (tr) => dispatch(tr.setOrigin("input")));
+  return withRules ? editor.insertText(text) : insertText(text, { origin: "input" })(editor.state, dispatch);
+}
+
+// src/view/input/target-range.ts
+function targetRangeToModel(controller, event) {
+  const range = typeof event.getTargetRanges === "function" ? event.getTargetRanges()[0] : void 0;
+  if (range === void 0) return null;
+  const from = domToPos(controller.registry, range.startContainer, range.startOffset);
+  const to = domToPos(controller.registry, range.endContainer, range.endOffset);
+  return from && to && { from, to };
+}
+var isEmpty = ({ from, to }) => sameSelection(textSelection(from), textSelection(to));
+function targetBeyondSelection(controller, event) {
+  const range = targetRangeToModel(controller, event);
+  if (range === null || isEmpty(range)) return null;
+  const { doc, selection } = controller.editor.state;
+  const selected = selectionRange(doc, selection);
+  const same = selected !== null && sameSelection(textSelection(selected.from, selected.to), textSelection(range.from, range.to));
+  return same ? null : range;
+}
+
+// src/view/input/before-input.ts
+var ENTER = { key: "Enter", altKey: false, ctrlKey: false, metaKey: false, shiftKey: false };
+var deleteRange = (controller, range) => controller.edit(() => replaceRange(controller.editor, range, "", false));
+var run = (command) => (controller) => void controller.run(command);
+var targetOr = (command) => (controller, event) => {
+  const range = targetBeyondSelection(controller, event);
+  if (range === null) controller.run(command);
+  else deleteRange(controller, range);
+};
+var leaveToHandlers = () => void 0;
+function insertTypedText(controller, event) {
+  const text = event.data ?? event.dataTransfer?.getData("text/plain");
+  if (!text) return;
+  const range = targetBeyondSelection(controller, event);
+  if (range === null) controller.edit(() => controller.editor.insertText(text));
+  else controller.edit(() => replaceRange(controller.editor, range, text, false));
+}
+function deleteContentBackward(controller, event) {
+  if (!controller.run(undoInputRule)) targetOr(deleteBackward)(controller, event);
+}
+function insertReplacementText(controller, event) {
+  const text = event.dataTransfer?.getData("text/plain") || event.data;
+  if (!text) return;
+  const range = targetRangeToModel(controller, event);
+  if (range === null) controller.run(insertText(text, { origin: "input" }));
+  else controller.edit(() => replaceRange(controller.editor, range, text, false));
+}
+var actions = {
+  insertText: insertTypedText,
+  insertReplacementText,
+  insertParagraph: (controller) => void controller.edit(() => controller.editor.handleKey(ENTER)),
+  insertLineBreak: run(insertHardBreak),
+  deleteContentBackward,
+  deleteContentForward: targetOr(deleteForward),
+  deleteWordBackward: targetOr(deleteWordBackward),
+  deleteWordForward: targetOr(deleteWordForward),
+  deleteSoftLineBackward: targetOr(deleteToLineStart),
+  deleteHardLineBackward: targetOr(deleteToLineStart),
+  deleteSoftLineForward: targetOr(deleteToLineEnd),
+  deleteHardLineForward: targetOr(deleteToLineEnd),
+  formatBold: run(toggleMark("bold")),
+  formatItalic: run(toggleMark("italic")),
+  formatUnderline: run(toggleMark("underline")),
+  formatStrikeThrough: run(toggleMark("strike")),
+  historyUndo: run(undo),
+  historyRedo: run(redo),
+  insertTranspose: run(transposeChars),
+  insertFromPaste: leaveToHandlers,
+  insertFromDrop: leaveToHandlers,
+  deleteByCut: leaveToHandlers,
+  deleteByDrag: leaveToHandlers
+};
+var isComposingInput = (controller, event) => event.isComposing || controller.composingKey !== null;
+var TYPED_INPUT = /* @__PURE__ */ new Set(["insertText", "insertReplacementText"]);
+function handleBeforeInput(controller, event) {
+  const { inputType } = event;
+  if (isComposingInput(controller, event)) return;
+  if (!event.cancelable || !Object.hasOwn(actions, inputType)) return;
+  event.preventDefault();
+  if (TYPED_INPUT.has(inputType) && wholeBlocks(controller.editor.state.selection)) return;
+  actions[inputType](controller, event);
+}
+
+// src/view/dom/read-dom-text.ts
+var ELEMENT_NODE = 1;
+var TEXT_NODE2 = 3;
+var OBJECT_REPLACEMENT = "\uFFFC";
+var BLOCKS = /* @__PURE__ */ new Set(["div", "p"]);
+function kindOf(element) {
+  if (element.hasAttribute("data-quoin-atom")) return "atom";
+  if (element.hasAttribute("data-quoin-widget")) return "widget";
+  if (element.localName === "br") {
+    if (element.hasAttribute("data-quoin-break")) return "break";
+    return element.hasAttribute("data-quoin-filler") ? "filler" : "br";
+  }
+  return BLOCKS.has(element.localName) ? "block" : "inline";
+}
+function collect(parent, out) {
+  for (let node = parent.firstChild; node; node = node.nextSibling) {
+    if (node.nodeType === TEXT_NODE2) {
+      const data = node.data;
+      if (data) out.push({ kind: "text", data });
+    } else if (node.nodeType === ELEMENT_NODE) {
+      const kind = kindOf(node);
+      if (kind !== "widget" && kind !== "filler" && kind !== "inline") out.push({ kind });
+      if (kind === "block" || kind === "inline") collect(node, out);
+    }
+  }
+}
+function readDomText(host) {
+  const tokens = [];
+  collect(host, tokens);
+  let last = tokens.length - 1;
+  while (last >= 0 && tokens[last].kind === "block") last--;
+  let result = "";
+  let atLineStart = true;
+  tokens.forEach((token, index) => {
+    switch (token.kind) {
+      case "text":
+        result += token.data;
+        atLineStart = false;
+        break;
+      case "atom":
+        result += OBJECT_REPLACEMENT;
+        atLineStart = false;
+        break;
+      case "break":
+      case "br":
+        if (token.kind === "break" || index < last) {
+          result += "\n";
+          atLineStart = true;
+        }
+        break;
+      case "block":
+        if (!atLineStart) {
+          result += "\n";
+          atLineStart = true;
+        }
+        break;
+    }
+  });
+  return result;
+}
+
+// src/view/input/commit-empty-host.ts
+function commitEmptyHost(controller) {
+  const host = controller.emptyHost;
+  if (host === null) return;
+  const text = readDomText(host);
+  if (text !== "" && controller.edit(() => controller.editor.insertText(text))) controller.focus();
+  else renderInline(host, [], []);
+}
+
+// src/view/input/composition-snapshot.ts
+function composedEnd(controller, block, region) {
+  const { selection } = controller.editor.state;
+  if (selection?.kind !== "text") return void 0;
+  const ends = [selection.anchor, selection.head];
+  if (ends.some((pos) => pos.block !== block || pos.region !== region)) return void 0;
+  return Math.max(...ends.map((pos) => pos.offset));
+}
+function snapshotComposition(controller, block, region) {
+  const { editor } = controller;
+  const element = controller.registry.get(block, region);
+  const inline = regionInline(editor.state, block, region);
+  if (element === void 0 || inline === void 0) return null;
+  const text = inlineText(inline);
+  const end = composedEnd(controller, block, region);
+  const since = [];
+  const release = editor.subscribe((_, tr) => void (tr && since.push(tr)));
+  const mapped = (offset, assoc) => since.reduce((pos, tr) => tr.mapPos(pos, assoc), { block, region, offset });
+  return {
+    settle() {
+      release();
+      if (controller.registry.get(block, region) !== element) return false;
+      const after = readDomText(element);
+      const edit = textDiff(text, after, end === void 0 ? void 0 : end + after.length - text.length);
+      if (edit === null) return false;
+      const from = mapped(edit.from, edit.from === edit.to ? -1 : 1);
+      const to = mapped(edit.to, -1);
+      const spans = to.block === from.block && to.region === from.region && to.offset > from.offset;
+      const range = { from, to: spans ? to : from };
+      controller.edit(() => {
+        const applied = replaceRange(editor, range, edit.insert, true);
+        controller.renderHost(block, region);
+        return applied;
+      });
+      return true;
+    },
+    release
+  };
+}
+
+// src/view/input/composition.ts
+var EMPTY_HOST = "empty";
+function targetAt(controller, node) {
+  const entry = controller.registry.locate(node);
+  if (entry !== null) return { block: entry.block, region: entry.region };
+  return node !== null && controller.emptyHost?.contains(node) ? EMPTY_HOST : null;
+}
+function elementOf(controller, target) {
+  if (target === EMPTY_HOST) return controller.emptyHost ?? void 0;
+  return target ? controller.registry.get(target.block, target.region) : void 0;
+}
+function createCompositionHandlers(controller) {
+  let active = false;
+  let target = null;
+  let snapshot = null;
+  let stopWaiting = null;
+  function settle() {
+    stopWaiting?.();
+    stopWaiting = null;
+    active = false;
+    controller.composingKey = null;
+    const host = target;
+    const started = snapshot;
+    target = null;
+    snapshot = null;
+    if (host === EMPTY_HOST) commitEmptyHost(controller);
+    else if (host !== null && !started?.settle()) {
+      controller.renderHost(host.block, host.region);
+      controller.syncSelectionToDom();
+    }
+  }
+  function waitForInput(element) {
+    const onInput = () => settle();
+    const timer = setTimeout(settle, 0);
+    element?.addEventListener("input", onInput);
+    stopWaiting = () => {
+      clearTimeout(timer);
+      element?.removeEventListener("input", onInput);
+    };
+  }
+  return {
+    start() {
+      if (stopWaiting !== null) settle();
+      snapshot?.release();
+      target = targetAt(controller, controller.domSelection()?.anchorNode ?? null);
+      const host = target === EMPTY_HOST ? null : target;
+      snapshot = host && snapshotComposition(controller, host.block, host.region);
+      active = true;
+      controller.composingKey = target === null || target === EMPTY_HOST ? target : hostKey(target.block, target.region);
+    },
+    end() {
+      if (!active || stopWaiting !== null) return;
+      waitForInput(elementOf(controller, target));
+    },
+    release() {
+      if (stopWaiting !== null) settle();
+      snapshot?.release();
+      snapshot = null;
+      target = null;
+      if (active) controller.composingKey = null;
+      active = false;
+    },
+    get active() {
+      return active;
+    }
+  };
+}
+
+// src/view/input/reconcile-host.ts
+function domCaretOffset(host) {
+  const doc = host.ownerDocument;
+  const selection = doc.getSelection();
+  const node = selection?.focusNode;
+  if (!selection || !node || !host.contains(node)) return void 0;
+  const range = doc.createRange();
+  range.setStart(host, 0);
+  range.setEnd(node, selection.focusOffset);
+  const before = doc.createElement("div");
+  before.append(range.cloneContents());
+  return readDomText(before).length;
+}
+function reconcileHost(controller, block, region, caretHint) {
+  const element = controller.registry.get(block, region);
+  const inline = regionInline(controller.editor.state, block, region);
+  if (element === void 0 || inline === void 0) return false;
+  const before = inlineText(inline);
+  const after = readDomText(element);
+  const edit = before === after ? null : textDiff(before, after, caretHint ?? domCaretOffset(element));
+  if (edit === null) return false;
+  const at = (offset) => ({ block, region, offset });
+  controller.edit(() => {
+    const applied = replaceRange(controller.editor, { from: at(edit.from), to: at(edit.to) }, edit.insert, true);
+    controller.renderHost(block, region);
+    return applied;
+  });
+  return true;
+}
+
+// src/view/input/dom-input.ts
+var OBSERVED = { characterData: true, childList: true, subtree: true };
+function createDomInputFallback(controller) {
+  const pending = /* @__PURE__ */ new Map();
+  const observers = /* @__PURE__ */ new Map();
+  let queued = false;
+  function enqueue(node) {
+    const entry = controller.registry.locate(node);
+    if (entry === null || controller.composingKey !== null || controller.readOnly) return false;
+    pending.set(hostKey(entry.block, entry.region), entry);
+    return true;
+  }
+  function flush() {
+    queued = false;
+    for (const [host, observer] of observers) if (observer.takeRecords().length > 0) enqueue(host);
+    for (const [key, { block, region }] of [...pending]) {
+      pending.delete(key);
+      if (controller.composingKey !== key) reconcileHost(controller, block, region);
+    }
+  }
+  function schedule(node) {
+    if (!enqueue(node) || queued) return;
+    queued = true;
+    queueMicrotask(() => {
+      if (queued) flush();
+    });
+  }
+  return {
+    onInput(event) {
+      const { target } = event;
+      if (event.isComposing || event.defaultPrevented) return;
+      if (target === null || target !== controller.emptyHost) schedule(target);
+      else if (controller.composingKey === null && !controller.readOnly) commitEmptyHost(controller);
+    },
+    observe(host) {
+      const observer = new MutationObserver(() => schedule(host));
+      observer.observe(host, OBSERVED);
+      observers.set(host, observer);
+      return () => {
+        observer.disconnect();
+        if (observers.get(host) === observer) observers.delete(host);
+      };
+    },
+    drain(host) {
+      observers.get(host)?.takeRecords();
+    },
+    flush
+  };
+}
+
+// src/view/navigation/cross-moves.ts
+function moveHead(controller, { anchor }, head) {
+  dispatchSelection(controller, textSelection(anchor, head));
+  return true;
+}
+function blockOf(controller, { block }) {
+  const { doc } = controller.editor.state;
+  return doc.blocks[requireBlockIndex(doc, block)];
+}
+function collapseCross(controller, selection, direction) {
+  const { from, to } = selectionRange(controller.editor.state.doc, selection);
+  dispatchSelection(controller, textSelection(direction < 0 ? from : to));
+  return true;
+}
+function crossHeadVertically(controller, selection, direction) {
+  const { head } = selection;
+  const edge = neighbourHead(controller, head.block, direction);
+  if (edge !== null) {
+    const end2 = regionLength(blockOf(controller, edge), edge.region);
+    return moveHead(controller, selection, { ...edge, offset: Math.min(head.offset, end2) });
+  }
+  const end = regionLength(blockOf(controller, head), head.region);
+  return moveHead(controller, selection, { ...head, offset: direction < 0 ? 0 : end });
+}
+function crossHeadHorizontally(controller, selection, direction) {
+  const { head } = selection;
+  const text = inlineText(blockOf(controller, head).regions[head.region] ?? []);
+  if (direction < 0 ? head.offset > 0 : head.offset < text.length) {
+    const offset = direction < 0 ? prevGraphemeOffset(text, head.offset) : nextGraphemeOffset(text, head.offset);
+    return moveHead(controller, selection, { ...head, offset });
+  }
+  const edge = neighbourHead(controller, head.block, direction);
+  return edge === null || moveHead(controller, selection, edge);
+}
+
+// src/view/navigation/horizontal.ts
+function moveHorizontally(controller, direction, extend) {
+  controller.goalX = null;
+  const { editor } = controller;
+  const { state } = editor;
+  const { selection, doc } = state;
+  if (selection?.kind === "node") return !extend && moveToNeighbour(controller, selection.block, direction);
+  if (selection?.kind !== "text") return false;
+  if (isCrossSelection(selection)) {
+    const move = extend ? crossHeadHorizontally : collapseCross;
+    return move(controller, selection, direction);
+  }
+  if (!extend && !isCollapsed(selection)) return false;
+  const { head } = selection;
+  const length = regionLength(doc.blocks[requireBlockIndex(doc, head.block)], head.region);
+  if (direction < 0 ? head.offset > 0 : head.offset < length) return false;
+  const own2 = extend ? null : ownNode(controller, head.block, direction);
+  if (own2 !== null) {
+    dispatchSelection(controller, own2);
+    return true;
+  }
+  if (!extend) return moveToNeighbour(controller, head.block, direction);
+  const edge = neighbourHead(controller, head.block, direction);
+  if (edge === null) return false;
+  dispatchSelection(controller, textSelection(selection.anchor, edge));
+  return true;
+}
+
+// src/view/navigation/line-edges.ts
+var TEXT_NODE3 = 3;
+var ELEMENT_NODE2 = 1;
+var hasSize = (rect) => rect !== void 0 && (rect.width > 0 || rect.height > 0);
+var edgeOf = (rect, right) => new DOMRect(right ? rect.right : rect.left, rect.top, 0, rect.height);
+function textCaretRect(text, offset) {
+  const range = text.ownerDocument.createRange();
+  range.setStart(text, offset);
+  const rect = range.getClientRects()[0];
+  return hasSize(rect) ? rect : null;
+}
+function besideNode(node, before) {
+  if (node.nodeType === TEXT_NODE3) return textCaretRect(node, before ? 0 : node.length);
+  if (node.nodeType !== ELEMENT_NODE2) return null;
+  const rects = node.getClientRects();
+  const rect = before ? rects[0] : rects[rects.length - 1];
+  return hasSize(rect) ? edgeOf(rect, !before) : null;
+}
+function caretClientRect(point) {
+  const { node, offset } = point;
+  if (node.nodeType === TEXT_NODE3) return textCaretRect(node, offset);
+  const after = node.childNodes[offset];
+  const before = node.childNodes[offset - 1];
+  return (after && besideNode(after, true)) ?? (before && besideNode(before, false)) ?? null;
+}
+function contentBox(host) {
+  const box = host.getBoundingClientRect();
+  const style = host.ownerDocument.defaultView.getComputedStyle(host);
+  const left = box.left + host.clientLeft + parseFloat(style.paddingLeft);
+  const top = box.top + host.clientTop + parseFloat(style.paddingTop);
+  const width = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+  const height = host.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+  return new DOMRect(left, top, width, height);
+}
+function lineEdgeRect(host, last) {
+  const map = domMapOf(host);
+  if (!map || map.length === 0) return contentBox(host);
+  return caretClientRect(map.toDom(last ? map.length : 0, last ? -1 : 1));
+}
+function onEdgeLine(host, point, last) {
+  if (domMapOf(host)?.length === 0) return true;
+  const caret = caretClientRect(point);
+  const edge = lineEdgeRect(host, last);
+  if (!caret || !edge) return false;
+  return Math.abs(caret.top - edge.top) < Math.max(caret.height, edge.height) / 2;
+}
+function isOnFirstLine(host, point) {
+  return onEdgeLine(host, point, false);
+}
+function isOnLastLine(host, point) {
+  return onEdgeLine(host, point, true);
+}
+function adjacentLineMiddle(host, caret, direction) {
+  const range = host.ownerDocument.createRange();
+  range.selectNodeContents(host);
+  let nearest2 = null;
+  for (const rect of Array.from(range.getClientRects())) {
+    const middle = rect.top + rect.height / 2;
+    const beyond = direction > 0 ? middle > caret.bottom : middle < caret.top;
+    const closer = nearest2 === null || (direction > 0 ? middle < nearest2 : middle > nearest2);
+    if (rect.height > 0 && beyond && closer) nearest2 = middle;
+  }
+  return nearest2;
+}
+
+// src/view/navigation/stay-on-line.ts
+var onLine = (rect, y) => rect === null || rect.top <= y && y <= rect.bottom;
+function stayOnLine(pos, y, rectAt) {
+  if (pos.offset === 0 || onLine(rectAt(pos), y)) return pos;
+  const before = { ...pos, offset: pos.offset - 1 };
+  return onLine(rectAt(before), y) ? before : pos;
+}
+
+// src/view/navigation/vertical.ts
+function lineInView(host, last) {
+  const line = lineEdgeRect(host, last);
+  const view = host.ownerDocument.defaultView;
+  if (!line || !view || line.top >= 0 && line.bottom <= view.innerHeight) return line;
+  host.scrollIntoView({ block: "nearest" });
+  return lineEdgeRect(host, last);
+}
+function caretAtGoal(controller, host, at, y) {
+  const { goalX } = controller;
+  const view = host.ownerDocument.defaultView;
+  if (goalX === null || !view || y < 0 || y > view.innerHeight) return null;
+  const pos = caretInHost(controller.registry, host, host.getBoundingClientRect(), at, goalX, y);
+  if (!pos) return null;
+  return stayOnLine(pos, y, (p) => {
+    const dom = posToDom(controller.registry, p);
+    return dom && caretClientRect(dom);
+  });
+}
+function landAtGoal(controller, block, direction) {
+  const { schema } = controller.editor.state;
+  const region = isTextFlow(schema, block) ? primaryRegion(schema, block) : null;
+  const host = region === null ? void 0 : controller.registry.get(block.id, region);
+  if (!host || region === null || controller.goalX === null) return null;
+  const line = lineInView(host, direction < 0);
+  const pos = line && caretAtGoal(controller, host, { block: block.id, region }, line.top + line.height / 2);
+  return pos ? textSelection(pos) : null;
+}
+function moveInHost(controller, host, head, caret, direction) {
+  const { goalX } = controller;
+  if (goalX === null || !caret || Math.abs(caret.left - goalX) < caret.height / 2) return null;
+  const y = adjacentLineMiddle(host, caret, direction);
+  const pos = y === null ? null : caretAtGoal(controller, host, head, y);
+  return pos && pos.offset !== head.offset ? pos : null;
+}
+function landing(controller, { head }, direction, extend) {
+  const { registry } = controller;
+  const host = registry.get(head.block, head.region);
+  const point = posToDom(registry, head);
+  if (!host || !point) return null;
+  const caret = caretClientRect(point);
+  controller.goalX ??= caret?.left ?? null;
+  if (!(direction < 0 ? isOnFirstLine(host, point) : isOnLastLine(host, point))) {
+    const pos = moveInHost(controller, host, head, caret, direction);
+    return pos && textSelection(pos);
+  }
+  const own2 = extend ? null : ownNode(controller, head.block, direction);
+  if (own2 !== null) return own2;
+  const accept = extend ? holdsTextHead(controller) : void 0;
+  const target = neighbourBlock(controller.editor.state.doc, head.block, direction, accept);
+  return target && (landAtGoal(controller, target, direction) ?? entryEdge(controller, target.id, direction));
+}
+function moveText(controller, selection, direction, extend) {
+  const next = landing(controller, selection, direction, extend);
+  if (next === null) {
+    controller.nativeVerticalMove = true;
+    return false;
+  }
+  const moved = extend && next.kind === "text" ? textSelection(selection.anchor, next.head) : next;
+  dispatchSelection(controller, moved);
+  return true;
+}
+function extendBlocks(controller, { anchor, head }, direction) {
+  const next = neighbourBlock(controller.editor.state.doc, head, direction);
+  if (next === null) return false;
+  dispatchSelection(controller, blockRangeSelection(anchor, next.id));
+  return true;
+}
+function moveVertically(controller, direction, extend) {
+  const { selection } = controller.editor.state;
+  if (selection?.kind === "node") return !extend && moveToNeighbour(controller, selection.block, direction);
+  if (selection?.kind === "blocks") return extend && extendBlocks(controller, selection, direction);
+  if (selection?.kind !== "text") return false;
+  if (!isCrossSelection(selection)) return moveText(controller, selection, direction, extend);
+  controller.goalX = null;
+  return (extend ? crossHeadVertically : collapseCross)(controller, selection, direction);
+}
+
+// src/view/input/flip-block.ts
+var isTask = ({ type, attrs }) => type === "MARKDOWN" && attrs.kind === "task";
+function flipCommand(block) {
+  if (isTask(block)) return toggleTask;
+  return block.type === "TOGGLE" ? setAttrs({ open: block.attrs.open !== true }) : null;
+}
+var toggleState = (open) => open ? "expanded" : "collapsed";
+function stateName(block) {
+  if (isTask(block)) return block.attrs.checked === true ? "checked" : "unchecked";
+  return toggleState(block.attrs.open === true);
+}
+function blockHoldingCaret({ doc, selection }) {
+  if (selection?.kind !== "text" || selection.anchor.block !== selection.head.block) return null;
+  return blockById(doc, selection.head.block) ?? null;
+}
+function flipForReader(controller, block) {
+  if (block?.type !== "TOGGLE") return false;
+  const toggles = readerToggles(controller);
+  toggles.flip(block);
+  controller.announce(toggleState(shownOpen(block, toggles.choices)));
+  return true;
+}
+function flipSelectedBlock(controller) {
+  const { editor } = controller;
+  const block = blockHoldingCaret(editor.state);
+  if (controller.readOnly) return flipForReader(controller, block);
+  const command = block && flipCommand(block);
+  if (!block || !command || !controller.run(command)) return false;
+  const after = blockById(editor.state.doc, block.id);
+  if (after) controller.announce(stateName(after));
+  return true;
+}
+
+// src/view/input/keydown.ts
+var ARROWS = {
+  ArrowUp: [moveVertically, -1],
+  ArrowDown: [moveVertically, 1],
+  ArrowLeft: [moveHorizontally, -1],
+  ArrowRight: [moveHorizontally, 1]
+};
+function isComposingKey(controller, event) {
+  return event.isComposing || event.keyCode === 229 || controller.composingKey !== null;
+}
+var runKeymap = (controller, event) => controller.edit(() => controller.editor.handleKey(event));
+function arrow(controller, event) {
+  if (!Object.hasOwn(ARROWS, event.key) || event.ctrlKey || event.metaKey) return false;
+  const [move, direction] = ARROWS[event.key];
+  return move(controller, direction, event.shiftKey);
+}
+function tab(controller, event) {
+  const { selection } = controller.editor.state;
+  if (selection === null || selection.kind === "blocks") return false;
+  runKeymap(controller, event);
+  return true;
+}
+function typeOverNode(controller, event) {
+  const { key } = event;
+  const node = controller.editor.state.selection?.kind === "node";
+  if (!node || event.ctrlKey || event.metaKey || [...key].length !== 1) return false;
+  return controller.edit(() => controller.editor.insertText(key));
+}
+function holdHistoryKeys(controller, event) {
+  const kind = controller.editor.state.selection?.kind;
+  if (kind !== "node" && kind !== "blocks") return false;
+  return Object.hasOwn(ARROWS, event.key) && (event.metaKey || event.ctrlKey || event.altKey);
+}
+function flip(controller, event) {
+  const mod = controller.isMac ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+  if (event.key !== "Enter" || !mod || event.shiftKey || event.altKey) return false;
+  flipSelectedBlock(controller);
+  return true;
+}
+function handle(controller, event) {
+  if (arrow(controller, event)) return true;
+  if (event.key === "Tab" && !event.ctrlKey && !event.metaKey && !event.altKey) return tab(controller, event);
+  return runKeymap(controller, event) || flip(controller, event) || typeOverNode(controller, event) || holdHistoryKeys(controller, event);
+}
+function handleReaderKeydown(controller, event) {
+  if (flip(controller, event)) event.preventDefault();
+}
+function handleKeydown(controller, event) {
+  if (isComposingKey(controller, event)) return;
+  controller.nativeVerticalMove = false;
+  for (const intercept of controller.keyInterceptors) if (intercept(event)) return;
+  if (handle(controller, event)) event.preventDefault();
+}
+
+// src/view/input/attach-input.ts
+function attachInput(controller, root) {
+  const composition = createCompositionHandlers(controller);
+  const sinkComposition = createSinkComposition(controller);
+  const fallback = createDomInputFallback(controller);
+  const observed = /* @__PURE__ */ new Map();
+  const inHost = (event) => controller.registry.locate(event.target) !== null;
+  const inSink = (event) => controller.sink !== null && event.target === controller.sink;
+  const inEmptyHost = (event) => controller.emptyHost !== null && event.target === controller.emptyHost;
+  const catchUp = () => {
+    fallback.flush();
+    controller.readSelectionFromDom();
+  };
+  const onBeforeInput = (event) => {
+    if (isComposingInput(controller, event) || controller.readOnly) return;
+    if (!inHost(event) && !inSink(event) && !inEmptyHost(event)) return;
+    catchUp();
+    handleBeforeInput(controller, event);
+  };
+  const onKeyDown = (event) => {
+    if (isComposingKey(controller, event) || !controller.isEditorElement(event.target)) return;
+    catchUp();
+    if (controller.readOnly) handleReaderKeydown(controller, event);
+    else handleKeydown(controller, event);
+  };
+  const onInput = (event) => fallback.onInput(event);
+  const onCompositionStart = (event) => {
+    if (inHost(event) || inEmptyHost(event)) composition.start(event);
+    else if (inSink(event)) sinkComposition.start();
+  };
+  const onCompositionEnd = (event) => {
+    if (inSink(event)) sinkComposition.end();
+    else composition.end(event);
+  };
+  const detachClipboard = attachClipboard(controller, root, catchUp);
+  const unlisten = listen(root, {
+    keydown: onKeyDown,
+    beforeinput: onBeforeInput,
+    input: onInput,
+    compositionstart: onCompositionStart,
+    compositionend: onCompositionEnd
+  });
+  function observe(host) {
+    if (!observed.has(host)) observed.set(host, fallback.observe(host));
+  }
+  for (const { element } of controller.registry.all()) observe(element);
+  return {
+    observe,
+    unobserve(host) {
+      observed.get(host)?.();
+      observed.delete(host);
+    },
+    drain: fallback.drain,
+    detach() {
+      composition.release();
+      sinkComposition.release();
+      detachClipboard();
+      unlisten();
+      for (const stop of observed.values()) stop();
+      observed.clear();
+    }
+  };
+}
+
+// src/view/controller/focus-return.ts
+function watchFocusReturn(root, handlers) {
+  let pressed = false;
+  const onPointerDown = () => {
+    pressed = true;
+    handlers.pressed();
+  };
+  const onFocusIn = (event) => {
+    const byPress = pressed;
+    pressed = false;
+    if (!byPress) handlers.returned(event.target);
+  };
+  const onFocusOut = (event) => {
+    if (!root.contains(event.relatedTarget)) pressed = false;
+  };
+  const unlistenPress = listen(root, { pointerdown: onPointerDown }, true);
+  const unlistenFocus = listen(root, { focusin: onFocusIn, focusout: onFocusOut });
+  return () => {
+    unlistenPress();
+    unlistenFocus();
+  };
+}
+
+// src/view/controller/selection-sync.ts
+var selectionPoints = (selection) => [
+  selection?.anchorNode ?? null,
+  selection?.anchorOffset ?? 0,
+  selection?.focusNode ?? null,
+  selection?.focusOffset ?? 0
+];
+var samePoints = (a, b) => a.every((point, index) => point === b[index]);
+function createSelectionSync(doc, onChange) {
+  let written = null;
+  let expiry = null;
+  function release() {
+    written = null;
+    if (expiry !== null) clearTimeout(expiry);
+    expiry = null;
+  }
+  function handle2() {
+    const suppressed = written;
+    release();
+    if (suppressed === null || !samePoints(suppressed, selectionPoints(doc.getSelection()))) onChange();
+  }
+  return {
+    start: () => doc.addEventListener("selectionchange", handle2),
+    stop() {
+      doc.removeEventListener("selectionchange", handle2);
+      release();
+    },
+    suppressNext() {
+      written = selectionPoints(doc.getSelection());
+      expiry ??= setTimeout(release, 0);
+    }
+  };
+}
+
+// src/view/controller/root-binding.ts
+function bindRoot(controller, root, cross, committed) {
+  const selectionSync = createSelectionSync(root.ownerDocument, () => controller.readSelectionFromDom());
+  const input = attachInput(controller, root);
+  const unsubscribe = controller.editor.subscribe(committed);
+  const detachCross = cross.attach(root);
+  const stopFocusReturn = watchFocusReturn(root, {
+    pressed: () => controller.nativeVerticalMove = false,
+    returned: (target) => {
+      if (controller.isEditorElement(target)) controller.syncSelectionToDom();
+    }
+  });
+  selectionSync.start();
+  return {
+    root,
+    input,
+    selectionSync,
+    detach() {
+      selectionSync.stop();
+      input.detach();
+      unsubscribe();
+      detachCross();
+      stopFocusReturn();
+    }
+  };
+}
+
+// src/view/controller/selection-io.ts
+function movedSelection(controller, doc, model) {
+  if (controller.composingKey !== null || controller.dragging || !doc || !ownsFocus(controller, doc)) return null;
+  const selection = readSelection(controller.registry, doc.getSelection(), (node) => controller.blockAt(node));
+  return selection === null || sameSelection(selection, model) ? null : selection;
+}
+function writeModelSelection(controller, doc, moved, local) {
+  const domSelection = doc?.getSelection();
+  if (focusingSink(controller) || controller.composingKey !== null || !doc || !domSelection || !ownsFocus(controller, doc)) {
+    return;
+  }
+  const before = selectionPoints(domSelection);
+  const { selection } = controller.editor.state;
+  if (heldBySink(selection) && controller.sink !== null) focusSink(controller);
+  else if (selection?.kind === "blocks") domSelection.removeAllRanges();
+  else writeSelection(controller.registry, selection, domSelection, (id) => controller.blockElement(id));
+  controller.nodeReveal.show(selection, local);
+  if (!samePoints(before, selectionPoints(domSelection))) moved();
+}
+
+// src/view/controller/view-controller.ts
+var runNow = (fn) => fn();
+var ViewController = class {
+  editor;
+  registry = createHostRegistry((element) => {
+    this.#binding?.input.observe(element);
+    this.#drawn.syncTabStop();
+    return () => {
+      this.#binding?.input.unobserve(element);
+      this.#drawn.syncTabStop();
+    };
+  });
+  keyInterceptors = /* @__PURE__ */ new Set();
+  nodeReveal = createNodeReveal((id) => this.blockElement(id));
+  announcer = createAnnouncer(() => this.#said);
+  isMac;
+  onFiles;
+  goalX = null;
+  nativeVerticalMove = false;
+  dragging = false;
+  composingKey = null;
+  #flush;
+  #hosts;
+  #drawn = createDrawnElements(this.registry, () => this.editor.state);
+  #cross = createCrossMode(this);
+  #outside = createOutsideChanges(
+    () => hasFocus(this, this.#ownerDocument()),
+    (model) => movedSelection(this, this.#ownerDocument(), model)
+  );
+  #binding = null;
+  #quiet = false;
+  #loud = false;
+  #said;
+  #detachRoot = null;
+  #readOnlyState;
+  constructor(options) {
+    this.editor = options.editor;
+    options.editor.subscribe((state, tr) => {
+      if (tr?.origin !== "remote") this.#said = state;
+    });
+    this.#flush = options.flush ?? runNow;
+    this.onFiles = options.onFiles;
+    this.isMac = options.isMac ?? detectMac();
+    const decorationsOf = (block, region) => this.decorationsFor(block, region);
+    const drain = (element) => this.#binding?.input.drain(element);
+    this.#hosts = createHostRenderer(options.editor, options.render, decorationsOf, drain);
+    this.#readOnlyState = createReadOnly(this.registry, options.readOnly ?? false);
+  }
+  get root() {
+    return this.#binding?.root ?? null;
+  }
+  get readOnly() {
+    return this.#readOnlyState.current();
+  }
+  get sink() {
+    return this.#drawn.sink;
+  }
+  get emptyHost() {
+    return this.#drawn.emptyHost;
+  }
+  attach(root) {
+    this.#detachRoot?.();
+    const binding = bindRoot(this, root, this.#cross, (_, tr) => {
+      this.#quiet ||= tr?.origin === "remote" && tr.docChanged;
+      this.#loud ||= tr?.origin !== "remote";
+      this.#outside.committed(tr);
+      this.nodeReveal.follow(this.editor.state.selection);
+      this.#drawn.syncTabStop();
+      this.#cross.syncLater();
+    });
+    const unmount = this.editor.mount();
+    const detach = () => {
+      unmount();
+      binding.detach();
+      if (this.#detachRoot !== detach) return;
+      this.#detachRoot = null;
+      this.#binding = null;
+    };
+    this.#binding = binding;
+    this.#detachRoot = detach;
+    this.#drawn.syncTabStop();
+    return detach;
+  }
+  registerBlockElement(id, element) {
+    return this.#drawn.registerBlock(id, element);
+  }
+  blockElement(id) {
+    return this.#drawn.block(id);
+  }
+  blockAt(node) {
+    return this.#drawn.blockAt(node);
+  }
+  registerSink(element) {
+    return this.#drawn.registerSink(element);
+  }
+  // An empty document draws one host that stands for a paragraph not created yet, so it belongs to no block.
+  registerEmptyHost(element) {
+    return this.#drawn.registerEmptyHost(element);
+  }
+  isEditorElement(element) {
+    return this.#drawn.isEditorElement(element);
+  }
+  decorationsFor(block, region) {
+    return hostDecorations(this.editor, block, region, this.#cross.mode);
+  }
+  dispatch(tr) {
+    this.edit(() => {
+      this.editor.dispatch(tr);
+      return true;
+    });
+  }
+  // Runs editor calls that dispatch on their own (insertText, handleKey, chains), then brings the hosts, the focus and
+  // the DOM selection up to date once. Focus is followed only while it is still on the editor or nowhere: a change can
+  // open a popover that takes it.
+  edit(change) {
+    const before = this.editor.state;
+    const doc = this.#ownerDocument();
+    const focused = hasFocus(this, doc);
+    let handled = false;
+    this.#flush(
+      () => this.#outside.inside(() => {
+        handled = change();
+      })
+    );
+    if (this.editor.state === before) return handled;
+    if (this.editor.state.doc !== before.doc) this.goalX = null;
+    this.refreshHosts();
+    this.#cross.sync();
+    if (focused && doc !== null && ownsFocus(this, doc)) this.#keepFocus();
+    this.syncSelectionToDom(true);
+    return handled;
+  }
+  // A change made outside edit() reaches the hosts when React draws them, so the selection is written back once that
+  // has happened, and focus follows a host the change replaced. A render of collaborators' changes alone, or of one
+  // that changed the document, scrolls nothing doing so; a caret move of theirs leaves the rest to scroll as it would.
+  afterRender() {
+    const quiet = this.#quiet || !this.#loud;
+    this.#quiet = this.#loud = false;
+    const doc = this.#ownerDocument();
+    const moved = this.#outside.takeMoved();
+    if (!this.#outside.takeFocused() || !doc || !ownsFocus(this, doc)) return;
+    if (moved) this.#selectFromDom(moved);
+    this.#cross.sync();
+    const follow = () => {
+      this.#keepFocus(quiet);
+      this.syncSelectionToDom();
+    };
+    if (!quiet) return follow();
+    this.nodeReveal.settle(this.editor.state.selection);
+    inPlace(this.root, follow);
+  }
+  refreshHosts() {
+    for (const host of this.registry.all()) {
+      if (!this.#isComposing(host)) this.#hosts.renderIfChanged(host);
+    }
+  }
+  run(command) {
+    return this.edit(() => command(this.editor.state, this.editor.dispatch));
+  }
+  announce(message) {
+    this.announcer.announce(message);
+  }
+  // A redraw of the decorations alone, such as one that follows a selection the browser made, replaces the nodes that
+  // selection sits in, and nothing else writes it back. It is written only while the editor holds focus: written while
+  // focus is on the page, it would pull focus into the line.
+  renderHost(block, region) {
+    const element = this.registry.get(block, region);
+    const host = element && { block, region, element };
+    if (!host || this.#isComposing(host) || !this.#hosts.render(host)) return;
+    const inSelection = element.contains(this.domSelection()?.focusNode ?? null);
+    if (inSelection && hasFocus(this, element.ownerDocument)) this.syncSelectionToDom();
+  }
+  domSelection() {
+    return this.#ownerDocument()?.getSelection() ?? null;
+  }
+  syncSelectionToDom(local) {
+    writeModelSelection(this, this.#ownerDocument(), () => this.#binding?.selectionSync.suppressNext(), local);
+  }
+  // A pointer drag across hosts sets the model selection itself, while the browser keeps extending its own. Leaving
+  // cross mode re-renders the hosts that drew it as decorations, which can remove the node holding the caret, so the
+  // selection is written back.
+  readSelectionFromDom() {
+    const selection = movedSelection(this, this.#ownerDocument(), this.editor.state.selection);
+    if (selection === null) return;
+    const wasCross = this.#cross.active;
+    if (!this.nativeVerticalMove) this.goalX = null;
+    this.#flush(() => this.#selectFromDom(selection));
+    this.#cross.sync();
+    if (!wasCross && !this.#cross.active) return;
+    this.#keepFocus();
+    this.syncSelectionToDom();
+  }
+  focus(target) {
+    const { editor } = this;
+    const selection = focusTarget(editor.state, target);
+    if (selection !== null && !sameSelection(selection, editor.state.selection)) dispatchSelection(this, selection);
+    this.#takeFocus();
+    this.syncSelectionToDom();
+  }
+  setReadOnly(readOnly) {
+    this.#readOnlyState.set(readOnly);
+  }
+  subscribeReadOnly(listener) {
+    return this.#readOnlyState.subscribe(listener);
+  }
+  destroy() {
+    this.#detachRoot?.();
+  }
+  #selectFromDom(selection) {
+    const { editor } = this;
+    this.#outside.inside(() => editor.dispatch(editor.createTransaction().setSelection(selection).setOrigin("input")));
+  }
+  #isComposing(host) {
+    return this.composingKey !== null && hostKey(host.block, host.region) === this.composingKey;
+  }
+  #ownerDocument() {
+    return (this.#binding?.root ?? this.registry.all().next().value?.element)?.ownerDocument ?? null;
+  }
+  // React replaces a host whose block changes kind, which drops focus, and Firefox does not move focus into another
+  // host when a script selects inside it.
+  #keepFocus(preventScroll) {
+    if (this.composingKey === null) this.#takeFocus(preventScroll);
+  }
+  #takeFocus(preventScroll) {
+    const element = this.#drawn.focusElement();
+    if (!element || element.ownerDocument.activeElement === element) return;
+    if (element === this.sink) focusSink(this);
+    else element.focus({ preventScroll });
+  }
+};
+
+// src/view/react/editor-context.ts
+import { createContext, useContext } from "react";
+var QuoinEditorContext = createContext(null);
+function useViewController() {
+  const controller = useContext(QuoinEditorContext);
+  if (controller === null) throw new Error("useViewController must be called inside an EditorView");
+  return controller;
+}
+
+// src/view/react/use-quoin-editor.ts
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { flushSync } from "react-dom";
+
+// src/view/react/use-isomorphic-layout-effect.ts
+import { useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+
+// src/view/react/use-quoin-editor.ts
+function useQuoinEditor(options) {
+  const { blocks, readOnly = false } = options;
+  const callbacks = useRef2(options);
+  const [controller] = useState(() => {
+    const editor = createEditor({
+      blocks,
+      extensions: options.extensions,
+      onChange: (next) => callbacks.current.onChange(next),
+      onTransaction: (tr, state) => callbacks.current.onTransaction?.(tr, state)
+    });
+    return new ViewController({
+      editor,
+      flush: flushSync,
+      render: options.render,
+      readOnly,
+      onFiles: (files, at) => callbacks.current.onFiles?.(files, at)
+    });
+  });
+  useIsomorphicLayoutEffect(() => {
+    callbacks.current = options;
+  });
+  useIsomorphicLayoutEffect(() => {
+    controller.editor.setBlocks(blocks);
+  }, [controller, blocks]);
+  useIsomorphicLayoutEffect(() => {
+    controller.setReadOnly(readOnly);
+  }, [controller, readOnly]);
+  useEffect2(() => () => controller.destroy(), [controller]);
+  return controller;
+}
+
+// src/view/react/SelectionSink.tsx
+import { useCallback as useCallback3, useRef as useRef3 } from "react";
+
+// src/view/react/use-read-only.ts
+import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useReadOnly(controller) {
+  const subscribe = useCallback2((notify) => controller.subscribeReadOnly(notify), [controller]);
+  const read = useCallback2(() => controller.readOnly, [controller]);
+  return useSyncExternalStore2(subscribe, read, read);
+}
+
+// src/view/react/SelectionSink.tsx
+import { jsx } from "react/jsx-runtime";
+function SelectionSink({ label = "Selected content", blockLabel }) {
+  const controller = useViewController();
+  const ref = useRef3(null);
+  const readOnly = useReadOnly(controller);
+  const name = useEditorState(
+    controller,
+    useCallback3((state) => selectedBlockName(state, blockLabel), [blockLabel])
+  );
+  useIsomorphicLayoutEffect(() => {
+    const sink = ref.current;
+    return sink ? controller.registerSink(sink) : void 0;
+  }, [controller]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      contentEditable: !readOnly,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      "aria-label": name || label,
+      inputMode: name === null ? void 0 : "none",
+      "aria-multiline": name === null ? "true" : void 0,
+      "aria-readonly": readOnly ? "true" : void 0,
+      tabIndex: -1,
+      spellCheck: false,
+      "data-quoin-sink": "",
+      onFocus: () => {
+        if (heldBySink(controller.editor.state.selection)) focusSink(controller);
+      }
+    }
+  );
+}
+
+// src/view/react/EditableRegion.tsx
+import { useCallback as useCallback4, useContext as useContext2, useRef as useRef4 } from "react";
+
+// src/view/react/block-placeholder.ts
+import { createContext as createContext2 } from "react";
+var headingPlaceholder = (_state, { type, attrs }) => type === "MARKDOWN" && attrs.kind === "heading" ? `Heading ${headingLevel(attrs.level)}` : void 0;
+var BlockPlaceholderContext = createContext2(headingPlaceholder);
+function regionPlaceholder(state, blockId, region, placeholderOf) {
+  const block = blockById(state.doc, blockId);
+  return block !== void 0 && primaryRegion(state.schema, block) === region ? placeholderOf(state, block) : void 0;
+}
+
+// src/view/react/EditableRegion.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var samePainted = (a, b) => a.inline === b.inline && a.placeholder === b.placeholder && sameDecorations(a.decorations, b.decorations);
+function EditableRegion({ block, region, label, id, placeholder, className }) {
+  const controller = useViewController();
+  const placeholderOf = useContext2(BlockPlaceholderContext);
+  const ref = useRef4(null);
+  const readOnly = useReadOnly(controller);
+  const select = useCallback4(
+    (state) => {
+      const inline2 = regionInline(state, block, region);
+      const empty = inline2 === void 0 || inlineLength(inline2) === 0;
+      return {
+        inline: inline2,
+        decorations: controller.decorationsFor(block, region),
+        placeholder: empty ? placeholder ?? regionPlaceholder(state, block, region, placeholderOf) : void 0
+      };
+    },
+    [controller, block, region, placeholder, placeholderOf]
+  );
+  const { inline, decorations, placeholder: shown } = useEditorState(controller, select, samePainted);
+  useIsomorphicLayoutEffect(() => {
+    const host = ref.current;
+    return host ? controller.registry.register(block, region, host) : void 0;
+  }, [controller, block, region]);
+  useIsomorphicLayoutEffect(() => {
+    controller.renderHost(block, region);
+  }, [controller, block, region, inline, decorations]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      id,
+      className,
+      contentEditable: !readOnly,
+      suppressContentEditableWarning: true,
+      tabIndex: -1,
+      role: "textbox",
+      "aria-multiline": "true",
+      "aria-readonly": readOnly ? "true" : void 0,
+      "aria-label": label,
+      "data-quoin-host": "",
+      "data-placeholder": readOnly ? void 0 : shown,
+      "aria-placeholder": readOnly ? void 0 : shown,
+      spellCheck: true
+    }
+  );
+}
+
+// src/view/react/default-renderers.tsx
+import { useContext as useContext3 } from "react";
+
+// src/view/react/callout-block.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CalloutBlock = ({ block }) => {
+  const tone = typeof block.attrs.tone === "string" && block.attrs.tone !== "" ? block.attrs.tone : "info";
+  return /* @__PURE__ */ jsx3("div", { className: "quoin-callout", "data-tone": tone, children: /* @__PURE__ */ jsx3(EditableRegion, { block: block.id, region: "body", label: `Callout, ${tone}` }) });
+};
+
+// src/view/react/block-command.ts
+function onBlock(id, command) {
+  return (state, dispatch) => {
+    const { ok, tr } = runCommands(state, [setSelection(blockRangeSelection(id)), command]);
+    if (!ok || tr === null) return false;
+    dispatch?.(tr.setSelection(state.selection));
+    return true;
+  };
+}
+
+// src/view/react/prevent-mouse-focus.ts
+var keepFocus = (event) => event.preventDefault();
+
+// src/view/react/TaskCheckbox.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function TaskCheckbox({ block, controller, label = "Task", labelledBy }) {
+  const checked = block.attrs.checked === true;
+  const flip2 = flipCommand(block);
+  const readOnly = useReadOnly(controller);
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": checked,
+      "aria-readonly": readOnly ? "true" : void 0,
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      className: "quoin-task-box",
+      contentEditable: false,
+      tabIndex: -1,
+      onMouseDown: keepFocus,
+      onClick: () => {
+        if (flip2 && !controller.readOnly) controller.run(onBlock(block.id, flip2));
+      },
+      children: checked ? /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx4("path", { d: "M3.5 8.5l3 3 6-7", fill: "none", stroke: "currentColor", strokeWidth: "2" }) }) : null
+    }
+  );
+}
+
+// src/view/react/list-numbers.ts
+var isOrdered = (block) => block.type === "MARKDOWN" && block.attrs.kind === "ordered";
+function numberDoc(doc) {
+  const numbers = doc.blocks.map(() => 1);
+  const runs = [];
+  doc.blocks.forEach((block, index) => {
+    while (runs.length > 0 && runs[runs.length - 1].indent > block.indent) runs.pop();
+    const run2 = runs[runs.length - 1];
+    const sameLevel = run2 !== void 0 && run2.indent === block.indent;
+    if (!isOrdered(block)) {
+      if (sameLevel) runs.pop();
+      return;
+    }
+    if (sameLevel) {
+      numbers[index] = run2.next++;
+      return;
+    }
+    const start = orderedStart(block.attrs.start);
+    numbers[index] = start;
+    runs.push({ indent: block.indent, next: start + 1 });
+  });
+  return numbers;
+}
+var cache = /* @__PURE__ */ new WeakMap();
+function orderedNumber(doc, index) {
+  let numbers = cache.get(doc);
+  if (numbers === void 0) {
+    numbers = numberDoc(doc);
+    cache.set(doc, numbers);
+  }
+  return numbers[index] ?? 1;
+}
+
+// src/view/react/use-ordered-number.ts
+function useOrderedNumber(controller, blockId) {
+  return useEditorState(controller, ({ doc }) => {
+    const index = doc.index.get(blockId);
+    return index === void 0 ? 1 : orderedNumber(doc, index);
+  });
+}
+
+// src/view/react/markdown-block.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var REGION = "text";
+function TextRegion({ block, label }) {
+  return /* @__PURE__ */ jsx5(EditableRegion, { block: block.id, region: REGION, label });
+}
+function NumberedItem({ block, controller }) {
+  const number = useOrderedNumber(controller, block.id);
+  return /* @__PURE__ */ jsxs("div", { className: "quoin-list-item", "data-list": "ordered", children: [
+    /* @__PURE__ */ jsx5("span", { className: "quoin-marker", "aria-hidden": "true", children: `${number}.` }),
+    /* @__PURE__ */ jsx5(TextRegion, { block, label: `Numbered list item ${number}` })
+  ] });
+}
+var MarkdownBlock = (props) => {
+  const { block } = props;
+  switch (block.attrs.kind) {
+    case "heading": {
+      const level = headingLevel(block.attrs.level);
+      return /* @__PURE__ */ jsx5("div", { role: "heading", "aria-level": level, className: "quoin-heading", children: /* @__PURE__ */ jsx5(TextRegion, { block, label: `Heading ${level}` }) });
+    }
+    case "bullet":
+      return /* @__PURE__ */ jsxs("div", { className: "quoin-list-item", "data-list": "bullet", children: [
+        /* @__PURE__ */ jsx5("span", { className: "quoin-marker", "aria-hidden": "true", children: "\u2022" }),
+        /* @__PURE__ */ jsx5(TextRegion, { block, label: "Bullet list item" })
+      ] });
+    case "ordered":
+      return /* @__PURE__ */ jsx5(NumberedItem, { ...props });
+    case "task":
+      return /* @__PURE__ */ jsxs("div", { className: "quoin-task", "data-checked": block.attrs.checked === true, children: [
+        /* @__PURE__ */ jsx5(TaskCheckbox, { block, controller: props.controller }),
+        /* @__PURE__ */ jsx5(TextRegion, { block, label: "Task" })
+      ] });
+    case "quote":
+      return /* @__PURE__ */ jsx5("div", { className: "quoin-quote", children: /* @__PURE__ */ jsx5(TextRegion, { block, label: "Quote" }) });
+    default:
+      return /* @__PURE__ */ jsx5(TextRegion, { block, label: "Paragraph" });
+  }
+};
+
+// src/view/react/use-reader-choices.ts
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+function useReaderChoices(controller) {
+  const store = readerToggles(controller);
+  return useSyncExternalStore3(store.subscribe, () => store.choices, () => store.choices);
+}
+function useToggleOpen(controller, block) {
+  return shownOpen(block, useReaderChoices(controller));
+}
+
+// src/view/react/ToggleChevron.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ToggleChevron({ block, controller, label = "Toggle", controls }) {
+  const open = useToggleOpen(controller, block);
+  const readOnly = useReadOnly(controller);
+  const flip2 = flipCommand(block);
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      "aria-expanded": open,
+      "aria-controls": controls,
+      "aria-label": label,
+      className: "quoin-toggle-button",
+      contentEditable: false,
+      tabIndex: readOnly ? 0 : -1,
+      onMouseDown: keepFocus,
+      onClick: () => {
+        if (controller.readOnly) readerToggles(controller).flip(block);
+        else if (flip2) controller.run(onBlock(block.id, flip2));
+      },
+      children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx6("path", { d: "M6 3.5l4.5 4.5L6 12.5", fill: "none", stroke: "currentColor", strokeWidth: "2" }) })
+    }
+  );
+}
+
+// src/view/react/toggle-block.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var ToggleBlock = ({ block, controller }) => {
+  const open = useToggleOpen(controller, block);
+  return /* @__PURE__ */ jsxs2("div", { className: "quoin-toggle", "data-open": open, children: [
+    /* @__PURE__ */ jsx7(ToggleChevron, { block, controller }),
+    /* @__PURE__ */ jsx7(EditableRegion, { block: block.id, region: "text", label: "Toggle" })
+  ] });
+};
+
+// src/view/react/unsupported-block-label.ts
+import { createContext as createContext3 } from "react";
+var UNSUPPORTED_BLOCK = "Unsupported block";
+var UnsupportedBlockLabel = createContext3(UNSUPPORTED_BLOCK);
+
+// src/view/react/default-renderers.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var defaultRenderers = {
+  MARKDOWN: MarkdownBlock,
+  CALLOUT: CalloutBlock,
+  TOGGLE: ToggleBlock
+};
+var VoidBlockFallback = ({ block }) => {
+  const label = useContext3(UnsupportedBlockLabel);
+  if (block.type === "DIVIDER") return /* @__PURE__ */ jsx8("div", { className: "quoin-void", contentEditable: false, role: "separator" });
+  return /* @__PURE__ */ jsx8("div", { className: "quoin-void", contentEditable: false, role: "group", "aria-label": label, children: label });
+};
+
+// src/view/react/BlockShell.tsx
+import { memo, useRef as useRef5 } from "react";
+
+// src/view/react/block-dom-id.ts
+import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4 } from "react";
+var BlockDomIdScope = createContext4("quoin");
+function useBlockDomId() {
+  const scope = useContext4(BlockDomIdScope);
+  return useCallback5((block) => `${scope}-${encodeURIComponent(block)}`, [scope]);
+}
+function useRegionDomId(block, region) {
+  return `${useBlockDomId()(block)}/${encodeURIComponent(region)}`;
+}
+
+// src/view/react/block-status.ts
+function within(state, index, ends) {
+  const [anchor, head] = ends.map((id) => state.doc.index.get(id));
+  if (anchor === void 0 || head === void 0) return false;
+  return index >= Math.min(anchor, head) && index <= Math.max(anchor, head);
+}
+function covers(state, id, index) {
+  const { doc, schema, selection } = state;
+  if (selection === null) return false;
+  if (selection.kind === "node") return selection.block === id;
+  if (selection.kind === "blocks") return within(state, index, [selection.anchor, selection.head]);
+  if (!isCrossSelection(selection) || isTextFlow(schema, doc.blocks[index])) return false;
+  return within(state, index, [selection.anchor.block, selection.head.block]);
+}
+function blockStatus(state, id, choices = NO_CHOICES) {
+  const index = state.doc.index.get(id);
+  if (index === void 0) return "plain";
+  if (isHiddenAt(state.doc, index, choices)) return "hidden";
+  return covers(state, id, index) ? "selected" : "plain";
+}
+
+// src/view/react/BlockShell.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function rendererFor(renderers, type) {
+  for (const table of [renderers, defaultRenderers]) if (Object.hasOwn(table, type)) return table[type];
+  return VoidBlockFallback;
+}
+var BlockShell = memo(function BlockShell2({ block, renderers }) {
+  const controller = useViewController();
+  const ref = useRef5(null);
+  const domId = useBlockDomId();
+  const choices = useReaderChoices(controller);
+  const status = useEditorState(controller, (state) => blockStatus(state, block.id, choices));
+  const decorations = useEditorState(controller, () => hostDecorations(controller.editor, block.id, ""), sameDecorations);
+  const hidden = status === "hidden";
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    return hidden || !element ? void 0 : controller.registerBlockElement(block.id, element);
+  }, [controller, block.id, hidden]);
+  if (hidden) return null;
+  const Renderer = rendererFor(renderers, block.type);
+  const { kind, color, background, align } = block.attrs;
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ...Object.assign({}, ...decorations.map((decoration) => decoration.attrs)),
+      ref,
+      id: domId(block.id),
+      "data-quoin-block": "",
+      "data-block-id": block.id,
+      "data-type": block.type,
+      "data-kind": optionalString(kind),
+      "data-indent": block.indent,
+      "data-color": paletteOrUndefined(color),
+      "data-bg": paletteOrUndefined(background),
+      "data-align": alignOrUndefined(align),
+      style: { "--quoin-indent": block.indent },
+      tabIndex: -1,
+      "data-selected": status === "selected" ? "true" : void 0,
+      children: /* @__PURE__ */ jsx9(Renderer, { block, controller })
+    }
+  );
+});
+
+// src/view/react/EditorView.tsx
+import { useId, useRef as useRef7 } from "react";
+
+// src/view/react/EmptyDocumentHost.tsx
+import { useRef as useRef6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function EmptyDocumentHost({ placeholder, label = "Paragraph" }) {
+  const controller = useViewController();
+  const ref = useRef6(null);
+  const readOnly = useReadOnly(controller);
+  useIsomorphicLayoutEffect(() => {
+    const host = ref.current;
+    if (host === null) return void 0;
+    renderInline(host, [], []);
+    return controller.registerEmptyHost(host);
+  }, [controller]);
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      contentEditable: !readOnly,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      "aria-multiline": "true",
+      "aria-readonly": readOnly ? "true" : void 0,
+      "aria-label": label,
+      "data-quoin-host": "",
+      "data-quoin-empty": "",
+      "data-placeholder": readOnly ? void 0 : placeholder,
+      "aria-placeholder": readOnly ? void 0 : placeholder,
+      spellCheck: true,
+      onClick: () => ref.current?.focus()
+    }
+  );
+}
+
+// src/view/react/focus-owners.ts
+var focusOwners = /* @__PURE__ */ new WeakMap();
+
+// src/view/react/LiveRegion.tsx
+import { useCallback as useCallback6, useMemo, useSyncExternalStore as useSyncExternalStore4 } from "react";
+
+// src/view/selection/selection-announcement.ts
+var SILENCE = { key: "", message: "" };
+function selectionAnnouncement({ doc, selection }, blocksSelected) {
+  if (selection === null || selection.kind === "text" && !isCrossSelection(selection)) return SILENCE;
+  if (selection.kind === "node") return { key: `node:${selection.block}`, message: blocksSelected(1) };
+  const anchor = selection.kind === "blocks" ? selection.anchor : selection.anchor.block;
+  const head = selection.kind === "blocks" ? selection.head : selection.head.block;
+  const first = doc.index.get(anchor);
+  const last = doc.index.get(head);
+  if (first === void 0 || last === void 0) return SILENCE;
+  const count = drawnBlockCount(doc, Math.min(first, last), Math.max(first, last) + 1);
+  return { key: `${selection.kind}:${anchor}:${head}`, message: blocksSelected(count) };
+}
+
+// src/view/react/LiveRegion.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function heardNow({ editor, announcer }, blocksSelected) {
+  const spoken = announcer.current();
+  if (spoken !== null) return { key: `said:${spoken.serial}`, message: spoken.message };
+  return selectionAnnouncement(editor.state, blocksSelected);
+}
+function LiveRegion({ blocksSelected }) {
+  const controller = useViewController();
+  const subscribe = useCallback6(
+    (notify) => {
+      const stopState = controller.editor.subscribe(() => notify());
+      const stopSpoken = controller.announcer.subscribe(notify);
+      return () => {
+        stopState();
+        stopSpoken();
+      };
+    },
+    [controller]
+  );
+  const read = useMemo(() => {
+    let last = SILENCE;
+    return () => {
+      const next = heardNow(controller, blocksSelected);
+      if (next.key !== last.key || next.message !== last.message) last = next;
+      return last;
+    };
+  }, [controller, blocksSelected]);
+  const { key, message } = useSyncExternalStore4(subscribe, read, read);
+  return /* @__PURE__ */ jsx11("div", { className: "quoin-visually-hidden", role: "status", "aria-live": "polite", "aria-atomic": "true", children: message !== "" && /* @__PURE__ */ jsx11("span", { children: message }, key) });
+}
+
+// src/view/react/SelectionWriter.tsx
+function SelectionWriter() {
+  const controller = useViewController();
+  const state = useEditorState(controller, wholeState);
+  useIsomorphicLayoutEffect(() => controller.afterRender(), [controller, state]);
+  return null;
+}
+
+// src/view/react/use-block-elements.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function useBlockElements(blocks, renderers) {
+  const [made] = useState2(() => /* @__PURE__ */ new WeakMap());
+  return blocks.map((block) => {
+    const known2 = made.get(block);
+    if (known2?.renderers === renderers) return known2.element;
+    const element = /* @__PURE__ */ jsx12(BlockShell, { block, renderers }, block.id);
+    made.set(block, { renderers, element });
+    return element;
+  });
+}
+
+// src/view/react/EditorView.tsx
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var NO_RENDERERS = {};
+var HINT = "Press Escape, then Tab, to leave the editor.";
+var BLOCKS_SELECTED = (count) => `${count} ${count === 1 ? "block" : "blocks"} selected`;
+function EditorView({
+  controller,
+  renderers = NO_RENDERERS,
+  className,
+  id,
+  "aria-label": label = "Editor",
+  hint = HINT,
+  paragraphLabel,
+  selectedContentLabel,
+  blockLabel,
+  unsupportedBlockLabel = UNSUPPORTED_BLOCK,
+  placeholder,
+  blockPlaceholder = headingPlaceholder,
+  blocksSelectedLabel = BLOCKS_SELECTED,
+  children
+}) {
+  const root = useRef7(null);
+  const hintId = useId();
+  const blockIdScope = useId();
+  const blocks = useEditorState(controller, (state) => state.doc.blocks);
+  const shells = useBlockElements(blocks, renderers);
+  useIsomorphicLayoutEffect(() => root.current ? controller.attach(root.current) : void 0, [controller]);
+  return /* @__PURE__ */ jsx13(QuoinEditorContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: root,
+      id,
+      className: ["quoin", "quoin-editor", className].filter(Boolean).join(" "),
+      role: "group",
+      "aria-label": label,
+      "aria-describedby": hintId,
+      onFocusCapture: (event) => focusOwners.set(event.target, controller),
+      children: [
+        /* @__PURE__ */ jsx13(BlockDomIdScope.Provider, { value: blockIdScope, children: /* @__PURE__ */ jsx13(UnsupportedBlockLabel.Provider, { value: unsupportedBlockLabel, children: /* @__PURE__ */ jsx13(BlockPlaceholderContext.Provider, { value: blockPlaceholder, children: blocks.length === 0 ? /* @__PURE__ */ jsx13(EmptyDocumentHost, { placeholder, label: paragraphLabel }) : shells }) }) }),
+        children,
+        /* @__PURE__ */ jsx13(SelectionSink, { label: selectedContentLabel, blockLabel }),
+        /* @__PURE__ */ jsx13("div", { id: hintId, className: "quoin-visually-hidden", children: hint }),
+        /* @__PURE__ */ jsx13(LiveRegion, { blocksSelected: blocksSelectedLabel }),
+        /* @__PURE__ */ jsx13(SelectionWriter, {})
+      ]
+    }
+  ) });
+}
+
+export {
+  dispatchSelection,
+  wholeState,
+  useEditorState,
+  useReadOnly,
+  isCrossSelection,
+  NODE_ENTRY,
+  visibleBlockIndexes,
+  drawnBlockCount,
+  neighbourBlock,
+  moveToNeighbour,
+  textDiff,
+  domMapOf,
+  renderInline,
+  domToPos,
+  posToDom,
+  caretFromPoint,
+  caretClientRect,
+  lineEdgeRect,
+  isOnFirstLine,
+  isOnLastLine,
+  isComposingKey,
+  NATIVE_INTERACTION,
+  useIsomorphicLayoutEffect,
+  onBlock,
+  listen,
+  createAutoScroll,
+  hostKey,
+  regionInline,
+  handleCopy,
+  ViewController,
+  useViewController,
+  useQuoinEditor,
+  useBlockDomId,
+  useRegionDomId,
+  focusOwners,
+  SelectionSink,
+  EditableRegion,
+  TaskCheckbox,
+  useOrderedNumber,
+  useToggleOpen,
+  ToggleChevron,
+  defaultRenderers,
+  VoidBlockFallback,
+  BlockShell,
+  EditorView
+};
+//# sourceMappingURL=chunk-SSIRYUCK.js.map