@inkandswitch/patchwork-pkg-base 0.0.127 → 0.0.129

package/packages/codemirror-markdown/dist/extensions/markdown.js

@@ -2066,7 +2066,7 @@ var searchExtensions = [
 ];
 
 // src/extensions/markdown.ts
-import { EditorView as EditorView9, keymap as keymap5 } from "@codemirror/view";
+import { EditorView as EditorView9, keymap as keymap6 } from "@codemirror/view";
 
 // src/extensions/formatting.ts
 import { EditorSelection as EditorSelection2 } from "@codemirror/state";
@@ -2167,6 +2167,7 @@ var TaskWidget = class extends WidgetType {
     box.disabled = !view.state.facet(EditorView2.editable);
     box.setAttribute("aria-label", this.checked ? "Done" : "To do");
     box.addEventListener("mousedown", (event) => {
+      if (event.button !== 0) return;
       event.preventDefault();
       if (box.disabled) return;
       toggle(view, view.posAtDOM(box));
@@ -2235,18 +2236,23 @@ import {
   WidgetType as WidgetType2
 } from "@codemirror/view";
 var hidden = Decoration3.replace({});
-var taskMark = Decoration3.mark({ class: "cm-md-hang", inclusive: true });
+var taskMark = Decoration3.mark({
+  class: "cm-md-hang cm-md-list-marker",
+  inclusive: true
+});
 var HeadingLabel = class extends WidgetType2 {
-  constructor(level) {
+  /** `shown` only on the caret's line; elsewhere it keeps its room, unseen. */
+  constructor(level, shown) {
     super();
     this.level = level;
+    this.shown = shown;
   }
   eq(other) {
-    return other.level === this.level;
+    return other.level === this.level && other.shown === this.shown;
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-md-hang cm-md-heading-label";
+    span.className = `cm-md-hang cm-md-heading-label${this.shown ? "" : " cm-md-heading-label-idle"}`;
     span.setAttribute("aria-hidden", "true");
     const n = document.createElement("span");
     n.className = "cm-md-heading-level";
@@ -2261,7 +2267,7 @@ var Bullet = class extends WidgetType2 {
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-md-hang";
+    span.className = "cm-md-hang cm-md-list-marker";
     const dot = document.createElement("span");
     dot.className = "cm-bullet";
     span.append(dot);
@@ -2278,7 +2284,7 @@ var NumberLabel = class extends WidgetType2 {
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-md-hang cm-md-hang-number";
+    span.className = "cm-md-hang cm-md-list-marker cm-md-hang-number";
     span.textContent = this.text;
     return span;
   }
@@ -2297,7 +2303,129 @@ function renderedNumber(state, mark) {
   }
   const firstMark = first.getChild("ListMark");
   const start = firstMark ? parseInt(state.doc.sliceString(firstMark.from, firstMark.to), 10) : 1;
-  return `${(Number.isNaN(start) ? 1 : start) + index}${delimiter}`;
+  const n = (Number.isNaN(start) ? 1 : start) + index;
+  let depth = 0;
+  for (let p = item.parent?.parent; p; p = p.parent)
+    if (p.name === "OrderedList") depth++;
+  return `${counter(n, depth)}${delimiter}`;
+}
+function counter(n, depth) {
+  const style = depth % 3;
+  if (style === 1 && n > 0 && n < 4e3) return roman(n);
+  if (style === 2 && n > 0) return alpha(n);
+  return String(n);
+}
+function roman(n) {
+  const numerals = [
+    [1e3, "m"],
+    [900, "cm"],
+    [500, "d"],
+    [400, "cd"],
+    [100, "c"],
+    [90, "xc"],
+    [50, "l"],
+    [40, "xl"],
+    [10, "x"],
+    [9, "ix"],
+    [5, "v"],
+    [4, "iv"],
+    [1, "i"]
+  ];
+  let out = "";
+  for (const [value, numeral] of numerals)
+    while (n >= value) {
+      out += numeral;
+      n -= value;
+    }
+  return out;
+}
+function alpha(n) {
+  let out = "";
+  while (n > 0) {
+    n--;
+    out = String.fromCharCode(97 + n % 26) + out;
+    n = Math.floor(n / 26);
+  }
+  return out;
+}
+var codeLine = Decoration3.line({ class: "cm-md-code" });
+var calloutMarker = Decoration3.mark({ class: "cm-md-callout-marker" });
+function caretLines(state) {
+  const lines = /* @__PURE__ */ new Set();
+  for (const r of state.selection.ranges) {
+    const last = state.doc.lineAt(r.to).number;
+    for (let n = state.doc.lineAt(r.from).number; n <= last; n++) lines.add(n);
+  }
+  return lines;
+}
+var CALLOUTS = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Warning",
+  caution: "Caution"
+};
+function calloutAt(line) {
+  const m = /^((?:\s*>\s?)+)\[!(\w+)\][ \t]*(.*)$/.exec(line.text);
+  if (!m) return null;
+  const type = m[2].toLowerCase();
+  if (!(type in CALLOUTS)) return null;
+  const from = line.from + m[1].length;
+  return {
+    type,
+    from,
+    to: line.from + line.text.length - m[3].length,
+    titled: m[3].trim() !== ""
+  };
+}
+var ICONS = {
+  note: '<circle cx="8" cy="8" r="6.25"/><path d="M8 7.25v4M8 4.75v.01"/>',
+  tip: '<path d="M5.75 11.5h4.5M6.5 14h3M8 1.75a4.25 4.25 0 0 0-2.5 7.7c.5.4.75.9.75 1.55V11.5h3.5V11c0-.65.25-1.15.75-1.55A4.25 4.25 0 0 0 8 1.75z"/>',
+  important: '<path d="M2.25 3.25a1.5 1.5 0 0 1 1.5-1.5h8.5a1.5 1.5 0 0 1 1.5 1.5v6.5a1.5 1.5 0 0 1-1.5 1.5H7l-3 2.5v-2.5h-.25a1.5 1.5 0 0 1-1.5-1.5z"/><path d="M8 4.5v3M8 9.5v.01"/>',
+  warning: '<path d="M7.13 2.25a1 1 0 0 1 1.74 0l5.6 9.75a1 1 0 0 1-.87 1.5H2.4a1 1 0 0 1-.87-1.5z"/><path d="M8 6v3M8 11v.01"/>',
+  caution: '<path d="M5.5 1.75h5l3.75 3.75v5l-3.75 3.75h-5L1.75 10.5v-5z"/><path d="M8 5v3.5M8 10.75v.01"/>'
+};
+var CalloutTitle = class extends WidgetType2 {
+  constructor(type, label) {
+    super();
+    this.type = type;
+    this.label = label;
+  }
+  eq(other) {
+    return other.type === this.type && other.label === this.label;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-md-callout-title";
+    span.innerHTML = `<svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${ICONS[this.type]}</svg>`;
+    if (this.label) span.append(CALLOUTS[this.type]);
+    else span.setAttribute("aria-label", CALLOUTS[this.type]);
+    return span;
+  }
+};
+function listLines(state, from, to, decos) {
+  const { doc: doc2 } = state;
+  const tree = syntaxTree2(state);
+  const last = doc2.lineAt(to).number;
+  for (let n = doc2.lineAt(from).number; n <= last; n++) {
+    const line = doc2.line(n);
+    const indent = /^[ \t]*/.exec(line.text)[0].length;
+    if (indent === line.length) continue;
+    let depth = 0;
+    let code = false;
+    for (let node = tree.resolveInner(line.from + indent, 1); node; node = node.parent) {
+      if (node.name === "ListItem") depth++;
+      if (node.name === "FencedCode" || node.name === "CodeBlock") code = true;
+    }
+    if (!depth) continue;
+    decos.push(
+      Decoration3.line({
+        class: "cm-md-list-line",
+        attributes: { style: `--md-list-depth: ${depth}` }
+      }).range(line.from)
+    );
+    if (indent && !code) decos.push(hidden.range(line.from, line.from + indent));
+  }
 }
 function skipSpaces(state, pos) {
   const line = state.doc.lineAt(pos);
@@ -2307,6 +2435,7 @@ function skipSpaces(state, pos) {
 function build2(view) {
   const { state } = view;
   const { doc: doc2 } = state;
+  const editing = caretLines(state);
   const decos = [];
   for (const { from, to } of view.visibleRanges) {
     syntaxTree2(state).iterate({
@@ -2318,10 +2447,14 @@ function build2(view) {
         if (heading) {
           const mark = node.node.firstChild;
           if (!mark || mark.name !== "HeaderMark") return;
+          const line = doc2.lineAt(node.from);
           decos.push(
             Decoration3.replace({
-              widget: new HeadingLabel(Number(heading[1]))
-            }).range(doc2.lineAt(node.from).from, skipSpaces(state, mark.to))
+              widget: new HeadingLabel(Number(heading[1]), editing.has(line.number))
+            }).range(line.from, skipSpaces(state, mark.to)),
+            // the heading's size on the whole line, for what the highlighter
+            // doesn't wrap (a rendered link): see headingLines in the theme.
+            Decoration3.line({ class: `cm-md-h${heading[1]}` }).range(line.from)
           );
           return;
         }
@@ -2333,7 +2466,9 @@ function build2(view) {
           const isTask = bullet && task?.name === "TaskMarker" && doc2.sliceString(end, task.from).trim() === "";
           if (isTask && task) {
             if (end > node.from) decos.push(hidden.range(node.from, end));
-            decos.push(taskMark.range(task.from, skipSpaces(state, task.to)));
+            decos.push(taskMark.range(task.from, task.to));
+            const after = skipSpaces(state, task.to);
+            if (after > task.to) decos.push(hidden.range(task.to, after));
             return;
           }
           if (bullet) {
@@ -2349,20 +2484,43 @@ function build2(view) {
           }
           return;
         }
+        if ((name === "BulletList" || name === "OrderedList") && node.node.parent?.name !== "ListItem") {
+          listLines(state, node.from, node.to, decos);
+          return;
+        }
+        if (name === "FencedCode" || name === "CodeBlock") {
+          const first = doc2.lineAt(node.from).number;
+          const last = doc2.lineAt(node.to).number;
+          for (let n = first; n <= last; n++)
+            decos.push(codeLine.range(doc2.line(n).from));
+          return false;
+        }
         if (name === "Blockquote") {
           for (let p = node.node.parent; p; p = p.parent)
             if (p.name === "Blockquote") return;
           const first = doc2.lineAt(node.from).number;
           const last = doc2.lineAt(node.to).number;
+          const callout = calloutAt(doc2.line(first));
           for (let n = first; n <= last; n++) {
             const line = doc2.line(n);
             const classes = ["cm-md-quote"];
             if (n === first) classes.push("cm-md-quote-first");
             if (n === last) classes.push("cm-md-quote-last");
+            if (callout) {
+              classes.push("cm-md-callout", `cm-md-callout-${callout.type}`);
+              if (n === first) classes.push("cm-md-callout-title-line");
+            }
             decos.push(
               Decoration3.line({ class: classes.join(" ") }).range(line.from)
             );
           }
+          if (callout) {
+            decos.push(
+              editing.has(first) ? calloutMarker.range(callout.from, callout.to) : Decoration3.replace({
+                widget: new CalloutTitle(callout.type, !callout.titled)
+              }).range(callout.from, callout.to)
+            );
+          }
           return;
         }
         if (name === "QuoteMark") {
@@ -2390,7 +2548,7 @@ var marginPlugin = ViewPlugin3.fromClass(
       this.decorations = build2(view);
     }
     update(update) {
-      if (update.docChanged || update.viewportChanged || syntaxTree2(update.startState) !== syntaxTree2(update.state)) {
+      if (update.docChanged || update.selectionSet || update.viewportChanged || syntaxTree2(update.startState) !== syntaxTree2(update.state)) {
         this.decorations = build2(update.view);
       }
     }
@@ -2400,7 +2558,9 @@ var marginPlugin = ViewPlugin3.fromClass(
 var zoomed = (length) => `calc(${length} * var(--markdown-zoom, 1))`;
 var marginTheme = EditorView3.baseTheme({
   ".cm-content": {
-    "--markdown-hang": zoomed("2.5rem")
+    "--markdown-hang": zoomed("2.5rem"),
+    "--markdown-list-indent": zoomed("1.6rem"),
+    "--markdown-quote-indent": zoomed("1.1rem")
   },
   ".cm-md-hang": {
     display: "inline-flex",
@@ -2433,30 +2593,137 @@ var marginTheme = EditorView3.baseTheme({
     fontFamily: "var(--markdown-body-family, inherit)",
     letterSpacing: "0.02em"
   },
+  ".cm-md-heading-label-idle": {
+    visibility: "hidden"
+  },
+  // a list line: padded one indent per level (CodeMirror's own 6px first)
+  ".cm-md-list-line": {
+    paddingLeft: "calc(6px + var(--md-list-depth, 1) * var(--markdown-list-indent))"
+  },
+  // its marker, in that padding: from the start of the indent, not hung right
+  ".cm-md-list-marker": {
+    width: "var(--markdown-list-indent)",
+    marginLeft: "calc(-1 * var(--markdown-list-indent))",
+    justifyContent: "flex-start",
+    paddingRight: "0"
+  },
   ".cm-md-heading-level": {
     fontSize: "0.75em",
     verticalAlign: "-0.15em"
   },
   ".cm-md-hang .cm-bullet": {
     display: "inline-block",
-    width: "0.4em",
-    height: "0.4em",
+    width: "0.5em",
+    height: "0.5em",
+    // in the box's left, centred under where a number's first digit sits
+    marginLeft: "0.15em",
     borderRadius: "50%",
-    background: "var(--syntax-list-marker, currentColor)",
-    color: "var(--text-editor-line)",
+    // theming's list marker colour (the primary accent, as ink)
+    background: "var(--syntax-list-marker, var(--text-editor-primary-text, currentColor))",
     alignSelf: "center"
   },
   ".cm-md-hang .cm-task": {
     margin: "0"
   },
+  // a quote: its bar on the body's column, its text one quote indent in
   ".cm-md-quote": {
-    position: "relative"
+    position: "relative",
+    paddingLeft: "calc(6px + var(--markdown-quote-indent))"
+  },
+  ".cm-md-code": {
+    fontFamily: "var(--text-editor-family-code)"
+  },
+  // GitHub-style callouts. Colours from theming's --studio-callout-* (the
+  // accent: bar) and --text-editor-callout-*-text/-fill (title ink, box
+  // tint), with fallbacks for running without the theme.
+  ...Object.fromEntries(
+    Object.keys(CALLOUTS).map((type) => {
+      const fallback = { note: "#36e", tip: "#1a7f37", important: "#8250df", warning: "#d4a72c", caution: "#d1242f" }[type];
+      return [
+        `.cm-md-callout-${type}`,
+        {
+          "--md-callout": `var(--studio-callout-${type}, ${fallback})`,
+          "--md-callout-text": `var(--text-editor-callout-${type}-text, color-mix(in oklch, var(--md-callout), currentColor 35%))`,
+          "--md-callout-fill": `var(--text-editor-callout-${type}-fill, color-mix(in oklch, var(--md-callout) 9%, transparent))`
+        }
+      ];
+    })
+  ),
+  ".cm-md-callout": {
+    // the body reads as body text, not as a quote: the theme's quote styling
+    // (italic, the punctuation grey) comes through these variables.
+    "--syntax-quote": "var(--text-editor-line)",
+    "--syntax-style-quote": "normal",
+    "--syntax-weight-quote": "normal",
+    "--syntax-fill-quote": "transparent",
+    // a stacking context, so the tint drawn behind the text (z-index -1)
+    // stays above the editor's own background.
+    isolation: "isolate",
+    paddingRight: zoomed("0.75rem")
+  },
+  // (doubled up to outrank the plain quote bar's rule further down)
+  ".cm-md-quote.cm-md-callout::before": {
+    background: "var(--md-callout)",
+    opacity: "1"
+  },
+  ".cm-md-callout::after": {
+    content: '""',
+    position: "absolute",
+    zIndex: "-1",
+    left: "6px",
+    right: "0",
+    top: "0",
+    bottom: "0",
+    background: "var(--md-callout-fill)"
+  },
+  ".cm-md-callout.cm-md-quote-first": {
+    paddingTop: zoomed("0.5rem")
+  },
+  ".cm-md-callout.cm-md-quote-last": {
+    paddingBottom: zoomed("0.5rem")
+  },
+  ".cm-md-callout.cm-md-quote-first::before, .cm-md-callout.cm-md-quote-first::after": {
+    top: "0",
+    borderTopRightRadius: "6px"
+  },
+  ".cm-md-callout.cm-md-quote-last::before, .cm-md-callout.cm-md-quote-last::after": {
+    bottom: "0",
+    borderBottomRightRadius: "6px"
+  },
+  ".cm-md-callout.cm-md-quote-first::before": { borderTopRightRadius: "0" },
+  ".cm-md-callout.cm-md-quote-last::before": { borderBottomRightRadius: "0" },
+  ".cm-md-callout-title-line": {
+    color: "var(--md-callout-text)",
+    fontWeight: "600"
+  },
+  ".cm-md-callout-title": {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.4em",
+    color: "var(--md-callout-text)",
+    fontWeight: "600",
+    marginRight: "0.4em"
+  },
+  ".cm-md-callout-title svg": {
+    width: "1em",
+    height: "1em",
+    flex: "none"
+  },
+  // the raw `[!NOTE]`, on the caret's line. it parses as a reference link,
+  // so the highlighter's link colour and underline are undone inside it.
+  ".cm-md-callout-marker, .cm-md-callout-marker *": {
+    color: "var(--md-callout-text)",
+    textDecoration: "none"
+  },
+  ".cm-md-callout-marker": {
+    fontFamily: "var(--text-editor-family-code)",
+    fontSize: "0.9em"
   },
   ".cm-md-quote::before": {
     content: '""',
     position: "absolute",
-    // centred in the left half of the margin, clear of a hung `>`.
-    left: "calc(-0.5 * var(--markdown-hang))",
+    // on the body's column (past CodeMirror's own 6px line padding)
+    left: "6px",
     top: "0",
     bottom: "0",
     width: "3px",
@@ -2566,8 +2833,10 @@ var headings = [
 ];
 
 // src/extensions/lists.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { ensureSyntaxTree, syntaxTree as syntaxTree4 } from "@codemirror/language";
+import { indentMore } from "@codemirror/commands";
 import {
+  Prec as Prec3,
   StateEffect as StateEffect2,
   StateField as StateField2
 } from "@codemirror/state";
@@ -2575,7 +2844,8 @@ import {
   Decoration as Decoration4,
   EditorView as EditorView4,
   ViewPlugin as ViewPlugin4,
-  WidgetType as WidgetType3
+  WidgetType as WidgetType3,
+  keymap as keymap2
 } from "@codemirror/view";
 function listAt(state, pos) {
   for (let n = syntaxTree4(state).resolveInner(pos, 1); n; n = n.parent) {
@@ -2616,7 +2886,8 @@ function renumber(state, list) {
   const all = items(list);
   const firstMark = all[0]?.getChild("ListMark");
   if (!firstMark) return changes;
-  const start = parseInt(state.doc.sliceString(firstMark.from, firstMark.to), 10) || 0;
+  const nested = list.parent?.name === "ListItem";
+  const start = nested ? 1 : parseInt(state.doc.sliceString(firstMark.from, firstMark.to), 10) || 0;
   all.forEach((item, i) => {
     const mark = item.getChild("ListMark");
     if (!mark) return;
@@ -2640,9 +2911,6 @@ function renumber(state, list) {
   });
   return changes;
 }
-function needsRenumber(state, list) {
-  return list.name === "OrderedList" && renumber(state, list).length > 0;
-}
 function clearDone(state, list) {
   const all = items(list);
   const gone = new Set(all.flatMap((it, i) => done(state, it) ? [i] : []));
@@ -2664,6 +2932,31 @@ function moveDoneDown(state, list) {
   ];
 }
 var countDone = (state, list) => items(list).filter((it) => done(state, it)).length;
+var textStart = (line) => line.from + /^\s*/.exec(line.text)[0].length;
+var tabInOrderedList = (view) => {
+  const before = view.state;
+  const line = before.doc.lineAt(before.selection.main.head);
+  const was = listAt(before, textStart(line));
+  if (!was || was.name !== "OrderedList" || before.selection.ranges.length !== 1)
+    return false;
+  if (!indentMore(view)) return false;
+  const { state } = view;
+  const now = state.doc.lineAt(state.selection.main.head);
+  ensureSyntaxTree(state, now.to, 100);
+  const list = listAt(state, textStart(now));
+  const first = list && items(list)[0];
+  const mark = first?.getChild("ListMark");
+  if (!list || !mark || list.name !== "OrderedList" || list.parent?.name !== "ListItem" || state.doc.lineAt(first.from).number !== now.number)
+    return true;
+  const text = state.doc.sliceString(mark.from, mark.to);
+  const want = `1${text.slice(-1)}`;
+  if (text !== want)
+    view.dispatch({
+      changes: { from: mark.from, to: mark.to, insert: want },
+      userEvent: "input.renumber"
+    });
+  return true;
+};
 var setHideDone = StateEffect2.define();
 var HiddenDone = class extends WidgetType3 {
   constructor(count) {
@@ -2750,16 +3043,28 @@ function menuItems(view, pos) {
   if (!list) return [];
   const apply = (changes, userEvent) => () => view.dispatch({ changes, userEvent });
   const out = [];
-  if (needsRenumber(state, list)) {
-    out.push({ label: "Fix numbering", run: apply(renumber(state, list), "input.renumber") });
+  if (list.name === "OrderedList") {
+    const changes = renumber(state, list);
+    out.push({
+      label: "Fix numbering",
+      run: apply(changes, "input.renumber"),
+      disabled: !changes.length
+    });
   }
   const hasTasks = items(list).some((it) => done(state, it) !== null);
   if (hasTasks) {
     const n = countDone(state, list);
-    if (moveDoneDown(state, list).length)
-      out.push({ label: "Move done to bottom", run: apply(moveDoneDown(state, list), "input.move") });
-    if (n)
-      out.push({ label: `Clear done (${n})`, run: apply(clearDone(state, list), "delete.clear-done") });
+    const moves = moveDoneDown(state, list);
+    out.push({
+      label: "Move done to bottom",
+      run: apply(moves, "input.move"),
+      disabled: !moves.length
+    });
+    out.push({
+      label: n ? `Clear done (${n})` : "Clear done",
+      run: apply(clearDone(state, list), "delete.clear-done"),
+      disabled: !n
+    });
     const hiding = isHidingDone(state);
     out.push({
       label: hiding ? "Show done" : "Hide done",
@@ -2774,12 +3079,13 @@ function openMenu(view, x, y, entries) {
   menu.setAttribute("role", "menu");
   menu.style.left = `${x}px`;
   menu.style.top = `${y}px`;
-  const buttons = entries.map(({ label, run }) => {
+  const buttons = entries.map(({ label, run, disabled }) => {
     const b = document.createElement("button");
     b.type = "button";
     b.className = "cm-md-menu-item";
     b.setAttribute("role", "menuitem");
     b.textContent = label;
+    b.disabled = !!disabled;
     b.addEventListener("click", () => {
       close();
       run();
@@ -2800,10 +3106,13 @@ function openMenu(view, x, y, entries) {
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
       const step2 = e.key === "ArrowDown" ? 1 : -1;
-      buttons[(i + step2 + buttons.length) % buttons.length]?.focus();
+      const live = buttons.filter((b) => !b.disabled);
+      const at = live.indexOf(buttons[i]);
+      live[(at + step2 + live.length) % live.length]?.focus();
     }
   };
   function close() {
+    if (menu.matches?.(":popover-open")) menu.hidePopover();
     menu.remove();
     window.removeEventListener("pointerdown", outside, true);
     window.removeEventListener("scroll", close, true);
@@ -2815,10 +3124,20 @@ function openMenu(view, x, y, entries) {
   window.addEventListener("blur", close);
   menu.addEventListener("keydown", keys);
   view.dom.appendChild(menu);
-  const r = menu.getBoundingClientRect();
-  if (r.right > window.innerWidth) menu.style.left = `${Math.max(0, x - r.width)}px`;
-  if (r.bottom > window.innerHeight) menu.style.top = `${Math.max(0, y - r.height)}px`;
-  buttons[0]?.focus();
+  if (typeof menu.showPopover === "function") {
+    menu.popover = "manual";
+    menu.showPopover();
+  }
+  let r = menu.getBoundingClientRect();
+  if (r.left !== x || r.top !== y) {
+    menu.style.left = `${x + (x - r.left)}px`;
+    menu.style.top = `${y + (y - r.top)}px`;
+    r = menu.getBoundingClientRect();
+  }
+  const shift = (prop, by) => menu.style[prop] = `${parseFloat(menu.style[prop]) - by}px`;
+  if (r.right > window.innerWidth) shift("left", r.width);
+  if (r.bottom > window.innerHeight) shift("top", r.height);
+  buttons.find((b) => !b.disabled)?.focus();
   return close;
 }
 var menuPlugin = ViewPlugin4.fromClass(
@@ -2848,6 +3167,9 @@ var menuPlugin = ViewPlugin4.fromClass(
 var listsTheme = EditorView4.baseTheme({
   ".cm-md-menu": {
     position: "fixed",
+    // undo the popover defaults (centred, inset 0)
+    inset: "auto",
+    margin: "0",
     zIndex: "var(--studio-layer-popover, 4000)",
     display: "flex",
     flexDirection: "column",
@@ -2867,7 +3189,10 @@ var listsTheme = EditorView4.baseTheme({
     borderRadius: "4px",
     cursor: "var(--studio-cursor-default, default)"
   },
-  ".cm-md-menu-item:hover, .cm-md-menu-item:focus-visible": {
+  ".cm-md-menu-item:disabled": {
+    opacity: "0.45"
+  },
+  ".cm-md-menu-item:not(:disabled):hover, .cm-md-menu-item:focus-visible": {
     background: "var(--studio-fill-offset-20, #eee)"
   },
   ".cm-md-hidden-done": {
@@ -2882,16 +3207,22 @@ var listsTheme = EditorView4.baseTheme({
     textDecoration: "underline"
   }
 });
-var lists = [hideDoneField, menuPlugin, listsTheme];
+var lists = [
+  hideDoneField,
+  menuPlugin,
+  listsTheme,
+  // ahead of indentWithTab in the main keymap
+  Prec3.high(keymap2.of([{ key: "Tab", run: tabInOrderedList }]))
+];
 
 // src/extensions/prefix.ts
 import { syntaxTree as syntaxTree5 } from "@codemirror/language";
 import {
   EditorSelection as EditorSelection4,
   EditorState as EditorState2,
-  Prec as Prec3
+  Prec as Prec4
 } from "@codemirror/state";
-import { EditorView as EditorView5, keymap as keymap2 } from "@codemirror/view";
+import { EditorView as EditorView5, keymap as keymap3 } from "@codemirror/view";
 var MARKS2 = /* @__PURE__ */ new Set(["QuoteMark", "ListMark", "HeaderMark", "TaskMarker"]);
 function skipSpaces2(state, pos, end) {
   while (pos < end && /[ \t]/.test(state.doc.sliceString(pos, pos + 1))) pos++;
@@ -3008,8 +3339,8 @@ var prefixes = [
   keepOut,
   replaceMarker,
   // above lang-markdown's own (Prec.high) Backspace.
-  Prec3.highest(
-    keymap2.of([
+  Prec4.highest(
+    keymap3.of([
       { key: "Backspace", run: backspace },
       { key: "Delete", run: deleteForward }
     ])
@@ -3017,9 +3348,9 @@ var prefixes = [
 ];
 
 // src/extensions/vertical.ts
-import { EditorSelection as EditorSelection5, Prec as Prec4 } from "@codemirror/state";
+import { EditorSelection as EditorSelection5, Prec as Prec5 } from "@codemirror/state";
 import { cursorLineDown, cursorLineUp } from "@codemirror/commands";
-import { keymap as keymap3 } from "@codemirror/view";
+import { keymap as keymap4 } from "@codemirror/view";
 var streaks = /* @__PURE__ */ new WeakMap();
 var vertical = (move) => (view) => {
   const { state } = view;
@@ -3034,7 +3365,8 @@ var vertical = (move) => (view) => {
   if (!move(view)) return false;
   const now = view.state.selection.main;
   const to = view.state.doc.lineAt(now.head).number;
-  const back = streak.visited.get(to);
+  const back = to !== from ? streak.visited.get(to) : void 0;
+  if (to === from) streak.visited.set(to, now.head);
   if (back !== void 0 && back !== now.head && view.state.doc === streak.doc) {
     view.dispatch({
       selection: EditorSelection5.cursor(back),
@@ -3047,8 +3379,8 @@ var vertical = (move) => (view) => {
   streaks.set(view, streak);
   return true;
 };
-var verticalMemory = Prec4.high(
-  keymap3.of([
+var verticalMemory = Prec5.high(
+  keymap4.of([
     { key: "ArrowUp", run: vertical(cursorLineUp) },
     { key: "ArrowDown", run: vertical(cursorLineDown) },
     { mac: "Ctrl-p", run: vertical(cursorLineUp) },
@@ -3057,8 +3389,8 @@ var verticalMemory = Prec4.high(
 );
 
 // src/extensions/zoom.ts
-import { Prec as Prec5 } from "@codemirror/state";
-import { keymap as keymap4 } from "@codemirror/view";
+import { Prec as Prec6 } from "@codemirror/state";
+import { keymap as keymap5 } from "@codemirror/view";
 var MIN_FONT_SIZE = 6;
 var FALLBACK_FONT_SIZE = 16;
 var px = (value) => parseFloat(value) || FALLBACK_FONT_SIZE;
@@ -3087,8 +3419,8 @@ function step(view, by) {
 var zoomIn = (view) => step(view, 1);
 var zoomOut = (view) => step(view, -1);
 var zoomReset = (view) => step(view, 0);
-var markdownZoom = Prec5.high(
-  keymap4.of([
+var markdownZoom = Prec6.high(
+  keymap5.of([
     // `+` and `_` are the shifted keys, for keyboards that need Shift.
     { key: "Mod-=", run: zoomIn, preventDefault: true },
     { key: "Mod-+", run: zoomIn, preventDefault: true },
@@ -3198,6 +3530,18 @@ var baseHeadingStyles = {
   fontWeight: "var(--studio-heading-weight, 400)",
   textDecoration: "none"
 };
+var headingSizes = {
+  1: { fontSize: `var(--studio-heading-size-1, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem") },
+  2: { fontSize: `var(--studio-heading-size-2, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem") },
+  3: { fontSize: `var(--studio-heading-size-3, ${zoomed2("1.25rem")})`, lineHeight: zoomed2("1.75rem") },
+  4: { fontSize: `var(--studio-heading-size-4, ${zoomed2("1.1rem")})` }
+};
+var headingLines = Object.fromEntries(
+  Object.entries(headingSizes).map(([level, size]) => [
+    `.cm-md-h${level}`,
+    { fontFamily: baseHeadingStyles.fontFamily, fontWeight: baseHeadingStyles.fontWeight, ...size }
+  ])
+);
 var baseCodeStyles = {
   fontFamily: "var(--text-editor-family-code)",
   fontSize: "1em"
@@ -3216,31 +3560,28 @@ var markdownSyntaxHighlighting = (style) => HighlightStyle.define([
   {
     tag: tags.heading1,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-1, ${zoomed2("1.5rem")})`,
-    lineHeight: zoomed2("2rem"),
+    ...headingSizes[1],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
   {
     tag: tags.heading2,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-2, ${zoomed2("1.5rem")})`,
-    lineHeight: zoomed2("2rem"),
+    ...headingSizes[2],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
   {
     tag: tags.heading3,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-3, ${zoomed2("1.25rem")})`,
-    lineHeight: zoomed2("1.75rem"),
+    ...headingSizes[3],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
   {
     tag: tags.heading4,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-4, ${zoomed2("1.1rem")})`,
+    ...headingSizes[4],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
@@ -3253,7 +3594,7 @@ var markdownSyntaxHighlighting = (style) => HighlightStyle.define([
     color: "var(--syntax-comment, #555)",
     fontFamily: "var(--text-editor-family-code)"
   },
-  { tag: tags.quote, fontStyle: "var(--syntax-style-quote, italic)" },
+  // quotes are set off by their bar (margin.ts), not by italics.
   {
     tag: tags.strong,
     fontFamily: bodyFont(style),
@@ -3315,7 +3656,7 @@ var markdownSyntaxHighlighting = (style) => HighlightStyle.define([
   { tag: tags.monospace, ...baseCodeStyles }
 ]);
 var theme = (style) => [
-  EditorView8.theme(markdownStyles(style)),
+  EditorView8.theme({ ...markdownStyles(style), ...headingLines }),
   syntaxHighlighting(markdownSyntaxHighlighting(style))
 ];
 
@@ -3325,7 +3666,7 @@ function markdownExtensions() {
     ...theme("sans"),
     indentOnInput(),
     markdownZoom,
-    keymap5.of([
+    keymap6.of([
       ...markdownFormattingKeymap,
       ...defaultKeymap,
       ...searchKeymap,