@milkdown/crepe 7.19.2 → 7.21.0

package/lib/cjs/index.js

@@ -3,31 +3,36 @@
 var lodashEs = require('lodash-es');
 var languageData = require('@codemirror/language-data');
 var themeOneDark = require('@codemirror/theme-one-dark');
-var block = require('@milkdown/kit/plugin/block');
+var diff$1 = require('@milkdown/kit/component/diff');
+var diff = require('@milkdown/kit/plugin/diff');
+var streaming = require('@milkdown/kit/plugin/streaming');
 var ctx = require('@milkdown/kit/ctx');
 var core = require('@milkdown/kit/core');
-var commonmark = require('@milkdown/kit/preset/commonmark');
-var prose = require('@milkdown/kit/prose');
+var exception = require('@milkdown/kit/exception');
+var utils = require('@milkdown/kit/utils');
 var state = require('@milkdown/kit/prose/state');
+var DOMPurify = require('dompurify');
+var tooltip = require('@milkdown/kit/plugin/tooltip');
+var prose = require('@milkdown/kit/prose');
 var vue = require('vue');
-var slash = require('@milkdown/kit/plugin/slash');
-var utils = require('@milkdown/kit/utils');
 var component = require('@milkdown/kit/component');
+var view = require('@milkdown/kit/prose/view');
+var block = require('@milkdown/kit/plugin/block');
+var commonmark = require('@milkdown/kit/preset/commonmark');
+var slash = require('@milkdown/kit/plugin/slash');
 var imageBlock$1 = require('@milkdown/kit/component/image-block');
 var gfm = require('@milkdown/kit/preset/gfm');
 var commands = require('@codemirror/commands');
-var view = require('@codemirror/view');
+var view$1 = require('@codemirror/view');
 var codeBlock = require('@milkdown/kit/component/code-block');
 var codemirror = require('codemirror');
 var cursor$1 = require('@milkdown/kit/plugin/cursor');
 var prosemirrorVirtualCursor = require('prosemirror-virtual-cursor');
 var imageInline = require('@milkdown/kit/component/image-inline');
 var katex = require('katex');
-var tooltip = require('@milkdown/kit/plugin/tooltip');
 var history = require('@milkdown/kit/prose/history');
 var keymap = require('@milkdown/kit/prose/keymap');
 var model = require('@milkdown/kit/prose/model');
-var view$1 = require('@milkdown/kit/prose/view');
 var inputrules = require('@milkdown/kit/prose/inputrules');
 var remarkMath = require('remark-math');
 var unistUtilVisit = require('unist-util-visit');
@@ -40,6 +45,7 @@ var history$1 = require('@milkdown/kit/plugin/history');
 var indent = require('@milkdown/kit/plugin/indent');
 var listener = require('@milkdown/kit/plugin/listener');
 var trailing = require('@milkdown/kit/plugin/trailing');
+var upload = require('@milkdown/kit/plugin/upload');
 
 var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["CodeMirror"] = "code-mirror";
@@ -52,6 +58,8 @@ var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["Placeholder"] = "placeholder";
   CrepeFeature2["Table"] = "table";
   CrepeFeature2["Latex"] = "latex";
+  CrepeFeature2["TopBar"] = "top-bar";
+  CrepeFeature2["AI"] = "ai";
   return CrepeFeature2;
 })(CrepeFeature || {});
 const defaultFeatures = {
@@ -64,9 +72,26 @@ const defaultFeatures = {
   ["toolbar" /* Toolbar */]: true,
   ["code-mirror" /* CodeMirror */]: true,
   ["table" /* Table */]: true,
-  ["latex" /* Latex */]: true
+  ["latex" /* Latex */]: true,
+  ["top-bar" /* TopBar */]: false,
+  ["ai" /* AI */]: false
 };
 
+const aiIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zm0 14l1.25-2.75L23 19l-2.75-1.25L19 15l-1.25 2.75L15 19l2.75 1.25zM9 20l3-6.5L18 10l-6-3.5L9 0L6 6.5L0 10l6 3.5z"
+      transform="translate(3 3) scale(0.75)"
+    />
+  </svg>
+`;
+
 const alignCenterIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -228,6 +253,38 @@ const chevronDownIcon = `
   </svg>
 `;
 
+const chevronLeftIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15.75 19.5L8.25 12l7.5-7.5"
+    />
+  </svg>
+`;
+
+const chevronRightIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M8.25 4.5l7.5 7.5-7.5 7.5"
+    />
+  </svg>
+`;
+
 const clearIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -268,6 +325,19 @@ const codeIcon = `
   </svg>
 `;
 
+const codeBlockIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5H4zm8 10h6v2h-6v-2zm-3.333-3L5.838 9.172l1.415-1.415L11.495 12l-4.242 4.243-1.415-1.415L8.667 12z"
+    />
+  </svg>
+`;
+
 const confirmIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -359,6 +429,34 @@ const editIcon = `
   </svg>
 `;
 
+const enterKeyIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M9 16l-5-5l5-5l1.4 1.4L7.825 10H18V6h2v6H7.825l2.575 2.6z"
+    />
+  </svg>
+`;
+
+const grammarCheckIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M9.55 17.575L4.225 12.25l1.4-1.425L9.55 14.75l8.825-8.825l1.4 1.425z"
+    />
+  </svg>
+`;
+
 const h1Icon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -525,6 +623,20 @@ const linkIcon = `
   </svg>
 `;
 
+const longerIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M3 18v-2h13v2zm0-5v-2h18v2zm0-5V6h18v2zm15 13v-3h-3v-2h3v-3h2v3h3v2h-3v3z"
+    />
+  </svg>
+`;
+
 const menuIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -618,6 +730,20 @@ const removeIcon = `
   </svg>
 `;
 
+const retryIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M12 20q-3.35 0-5.675-2.325T4 12q0-3.35 2.325-5.675T12 4q1.725 0 3.3.713T18 6.75V4h2v7h-7V9h4.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12q0 2.5 1.75 4.25T12 18q1.925 0 3.475-1.1T17.65 14h2.1q-.7 2.65-2.85 4.325T12 20"
+    />
+  </svg>
+`;
+
 const searchIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -635,6 +761,48 @@ const searchIcon = `
   </svg>
 `;
 
+const sendIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M11 20V7.825l-5.6 5.6L4 12l8-8l8 8l-1.4 1.425l-5.6-5.6V20z"
+    />
+  </svg>
+`;
+
+const sendPromptIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M3 20v-6l8-2l-8-2V4l19 8z"
+    />
+  </svg>
+`;
+
+const shorterIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M5 13v-2h14v2z"
+    />
+  </svg>
+`;
+
 const strikethroughIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -701,6 +869,20 @@ const todoListIcon = `
   </svg>
 `;
 
+const translateIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="m12.9 16l-2.55-2.5l.05-.05q1.45-1.6 2.262-3.117T13.95 7H16V5h-6V3H8v2H2v2h9.1q-.5 1.2-1.225 2.387T8 11.7q-.6-.6-1.187-1.412T5.85 8.6H3.85q.5 1.4 1.3 2.7T6.95 13.7L2.85 17.75L4.25 19.15L8 15.4L10.55 17.95zM18.5 22h-2L21 10h2l4.5 12h-2l-1.05-3h-4.9zm1.6-5h3.6l-1.8-5.1z"
+    />
+  </svg>
+`;
+
 const functionsIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -760,6 +942,1223 @@ function crepeFeatureConfig(feature) {
   };
 }
 
+function defaultBuildContext(ctx, instruction) {
+  var _a;
+  const view = ctx.get(core.editorViewCtx);
+  const serializer = ctx.get(core.serializerCtx);
+  const { state } = view;
+  const document = serializer(state.doc);
+  let selection = "";
+  if (!state.selection.empty) {
+    const { from, to } = state.selection;
+    const slice = state.doc.slice(from, to);
+    const { schema } = state.doc.type;
+    let wrapper = schema.topNodeType.createAndFill(null, slice.content);
+    if (!wrapper) {
+      const paragraph = (_a = schema.nodes.paragraph) == null ? void 0 : _a.createAndFill(
+        null,
+        slice.content
+      );
+      if (paragraph) wrapper = schema.topNodeType.createAndFill(null, paragraph);
+    }
+    selection = wrapper ? serializer(wrapper) : state.doc.textBetween(from, to);
+  }
+  return { document, selection, instruction };
+}
+
+const aiProviderConfig = utils.$ctx(
+  {
+    provider: void 0,
+    buildContext: void 0,
+    diffReviewOnEnd: true,
+    onError: (error) => {
+      console.error(`[milkdown/ai] [${error.code}]`, error);
+    },
+    aiIcon: void 0
+  },
+  "aiProviderConfig"
+);
+const aiSessionCtx = utils.$ctx(
+  {
+    abortController: null,
+    label: "",
+    lastInstruction: "",
+    lastLabel: void 0,
+    lastFrom: -1,
+    lastTo: -1,
+    diffOwnedByAI: false
+  },
+  "aiSession"
+);
+function emitAIError(ctx, error) {
+  const config = ctx.get(aiProviderConfig.key);
+  try {
+    config.onError(error);
+  } catch (handlerError) {
+    console.error("[milkdown/ai] onError handler failed:", handlerError);
+  }
+}
+function clearActiveSession(ctx) {
+  const current = ctx.get(aiSessionCtx.key);
+  ctx.set(aiSessionCtx.key, {
+    ...current,
+    abortController: null,
+    label: ""
+  });
+}
+async function runProvider(ctx, provider, promptContext, abortController) {
+  try {
+    const iterable = provider(promptContext, abortController.signal);
+    const commands = ctx.get(core.commandsCtx);
+    for await (const chunk of iterable) {
+      if (abortController.signal.aborted) break;
+      commands.call(streaming.pushChunkCmd.key, chunk);
+    }
+    if (abortController.signal.aborted) return;
+    const config = ctx.get(aiProviderConfig.key);
+    if (config.diffReviewOnEnd) {
+      const cur = ctx.get(aiSessionCtx.key);
+      ctx.set(aiSessionCtx.key, { ...cur, diffOwnedByAI: true });
+    }
+    const dispatched = commands.call(streaming.endStreamingCmd.key, {
+      diffReview: config.diffReviewOnEnd
+    });
+    if (config.diffReviewOnEnd && !dispatched) {
+      const cur = ctx.get(aiSessionCtx.key);
+      ctx.set(aiSessionCtx.key, { ...cur, diffOwnedByAI: false });
+    }
+  } catch (error) {
+    if (abortController.signal.aborted) return;
+    const milkdownError = exception.aiProviderError(error);
+    emitAIError(ctx, milkdownError);
+    const commands = ctx.get(core.commandsCtx);
+    commands.call(streaming.abortStreamingCmd.key, { keep: false });
+  } finally {
+    const current = ctx.get(aiSessionCtx.key);
+    if (current.abortController === abortController) {
+      clearActiveSession(ctx);
+    }
+  }
+}
+const runAICmd = utils.$command("RunAI", (ctx) => {
+  return (options) => (state, dispatch) => {
+    var _a, _b, _c, _d;
+    if (!(options == null ? void 0 : options.instruction)) return false;
+    const config = ctx.get(aiProviderConfig.key);
+    if (!config.provider) return false;
+    const session = ctx.get(aiSessionCtx.key);
+    if (session.abortController) return false;
+    if ((_a = streaming.streamingPluginKey.getState(state)) == null ? void 0 : _a.active) return false;
+    if ((_b = diff.diffPluginKey.getState(state)) == null ? void 0 : _b.active) return false;
+    if (!dispatch) return true;
+    const abortController = new AbortController();
+    const { from, to } = state.selection;
+    ctx.set(aiSessionCtx.key, {
+      abortController,
+      label: (_c = options.label) != null ? _c : "",
+      lastInstruction: options.instruction,
+      lastLabel: options.label,
+      lastFrom: from,
+      lastTo: to,
+      // Reset every run; only the success path that hands off to diff
+      // review flips it back on.
+      diffOwnedByAI: false
+    });
+    const commands = ctx.get(core.commandsCtx);
+    const insertAt = state.selection.empty ? "cursor" : "selection";
+    if (!commands.call(streaming.startStreamingCmd.key, { insertAt })) {
+      clearActiveSession(ctx);
+      return false;
+    }
+    let promptContext;
+    try {
+      const buildContext = (_d = config.buildContext) != null ? _d : defaultBuildContext;
+      promptContext = buildContext(ctx, options.instruction);
+    } catch (error) {
+      const milkdownError = exception.aiBuildContextError(error);
+      emitAIError(ctx, milkdownError);
+      commands.call(streaming.abortStreamingCmd.key, { keep: false });
+      clearActiveSession(ctx);
+      return false;
+    }
+    void runProvider(ctx, config.provider, promptContext, abortController);
+    return true;
+  };
+});
+const abortAICmd = utils.$command("AbortAI", (ctx) => {
+  return (options) => (state, dispatch) => {
+    var _a;
+    const session = ctx.get(aiSessionCtx.key);
+    if (!dispatch) return !!session.abortController;
+    if (!session.abortController) return false;
+    session.abortController.abort();
+    clearActiveSession(ctx);
+    if ((_a = streaming.streamingPluginKey.getState(state)) == null ? void 0 : _a.active) {
+      const commands = ctx.get(core.commandsCtx);
+      commands.call(streaming.abortStreamingCmd.key, options);
+    }
+    return true;
+  };
+});
+
+var __typeError$a = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$a = (obj, member, msg) => member.has(obj) || __typeError$a("Cannot " + msg);
+var __privateGet$a = (obj, member, getter) => (__accessCheck$a(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$a = (obj, member, value) => member.has(obj) ? __typeError$a("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$a = (obj, member, value, setter) => (__accessCheck$a(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck$a(obj, member, "access private method"), method);
+var _panel, _host, _retryBtn, _config, _visible, _diffActive, _diffStartDoc, _ownedByAI, _DiffActionsPanelView_instances, findHost_fn, makeButton_fn, makeShortcutChip_fn, _retry, canRetry_fn, _rejectAll, _acceptAll;
+const PANEL_CLASS = "milkdown-ai-diff-actions";
+function setSanitizedIcon(host, svg) {
+  host.innerHTML = DOMPurify.sanitize(svg.trim());
+}
+function createIcon(svg) {
+  const span = document.createElement("span");
+  span.className = `${PANEL_CLASS}-icon`;
+  setSanitizedIcon(span, svg);
+  return span;
+}
+class DiffActionsPanelView {
+  constructor(ctx, view, config) {
+    this.ctx = ctx;
+    __privateAdd$a(this, _DiffActionsPanelView_instances);
+    __privateAdd$a(this, _panel);
+    __privateAdd$a(this, _host);
+    __privateAdd$a(this, _retryBtn);
+    __privateAdd$a(this, _config);
+    __privateAdd$a(this, _visible, false);
+    /// Tracks the diff plugin's `active` flag across transactions so we
+    /// can detect false→true / true→false edges independently of whether
+    /// the panel is actually being shown.
+    __privateAdd$a(this, _diffActive, false);
+    /// Doc snapshot at the moment diff review activated. If the live doc
+    /// drifts from this snapshot the user has accepted some per-change
+    /// diffs and the stored `lastFrom`/`lastTo` no longer point at the
+    /// original range — Retry is unsafe at that point.
+    __privateAdd$a(this, _diffStartDoc, null);
+    /// Whether the active diff review came from this AI session's
+    /// streaming hand-off (vs being started manually via
+    /// `startDiffReviewCmd`). Captured at the false→true transition.
+    /// The panel only renders when this is true so it doesn't take over
+    /// non-AI diff flows that exist independently of the AI feature.
+    __privateAdd$a(this, _ownedByAI, false);
+    __privateAdd$a(this, _retry, () => {
+      const session = this.ctx.get(aiSessionCtx.key);
+      if (!session.lastInstruction) return;
+      if (!__privateGet$a(this, _ownedByAI) || !__privateMethod(this, _DiffActionsPanelView_instances, canRetry_fn).call(this)) return;
+      const commands = this.ctx.get(core.commandsCtx);
+      commands.call(diff.clearDiffReviewCmd.key);
+      const editorView = this.ctx.get(core.editorViewCtx);
+      const { doc } = editorView.state;
+      const from = Math.min(Math.max(session.lastFrom, 0), doc.content.size);
+      const to = Math.min(Math.max(session.lastTo, 0), doc.content.size);
+      editorView.dispatch(
+        editorView.state.tr.setSelection(
+          state.TextSelection.create(editorView.state.doc, from, to)
+        )
+      );
+      commands.call(runAICmd.key, {
+        instruction: session.lastInstruction,
+        label: session.lastLabel
+      });
+    });
+    __privateAdd$a(this, _rejectAll, () => {
+      this.ctx.get(core.commandsCtx).call(diff.clearDiffReviewCmd.key);
+    });
+    __privateAdd$a(this, _acceptAll, () => {
+      this.ctx.get(core.commandsCtx).call(diff.acceptAllDiffsCmd.key);
+    });
+    __privateSet$a(this, _config, config);
+    __privateSet$a(this, _host, __privateMethod(this, _DiffActionsPanelView_instances, findHost_fn).call(this, view));
+    const panel = document.createElement("div");
+    panel.className = PANEL_CLASS;
+    panel.dataset.show = "false";
+    __privateSet$a(this, _retryBtn, __privateMethod(this, _DiffActionsPanelView_instances, makeButton_fn).call(this, "retry", config.retryIcon, config.retryLabel, __privateGet$a(this, _retry)));
+    panel.appendChild(__privateGet$a(this, _retryBtn));
+    panel.appendChild(
+      __privateMethod(this, _DiffActionsPanelView_instances, makeButton_fn).call(this, "reject", config.rejectIcon, config.rejectAllLabel, __privateGet$a(this, _rejectAll))
+    );
+    const acceptBtn = __privateMethod(this, _DiffActionsPanelView_instances, makeButton_fn).call(this, "accept", config.acceptIcon, config.acceptAllLabel, __privateGet$a(this, _acceptAll));
+    acceptBtn.appendChild(__privateMethod(this, _DiffActionsPanelView_instances, makeShortcutChip_fn).call(this));
+    panel.appendChild(acceptBtn);
+    __privateSet$a(this, _panel, panel);
+    __privateGet$a(this, _host).appendChild(panel);
+    this.update(view);
+  }
+  update(view) {
+    var _a;
+    const diffActive = !!((_a = diff.diffPluginKey.getState(view.state)) == null ? void 0 : _a.active);
+    if (diffActive !== __privateGet$a(this, _diffActive)) {
+      __privateSet$a(this, _diffActive, diffActive);
+      if (diffActive) {
+        const session = this.ctx.get(aiSessionCtx.key);
+        __privateSet$a(this, _ownedByAI, session.diffOwnedByAI);
+        __privateSet$a(this, _diffStartDoc, view.state.doc);
+      } else {
+        __privateSet$a(this, _ownedByAI, false);
+        __privateSet$a(this, _diffStartDoc, null);
+        const session = this.ctx.get(aiSessionCtx.key);
+        if (session.diffOwnedByAI) {
+          this.ctx.set(aiSessionCtx.key, {
+            ...session,
+            diffOwnedByAI: false
+          });
+        }
+      }
+    }
+    const shouldShow = diffActive && __privateGet$a(this, _ownedByAI);
+    if (shouldShow !== __privateGet$a(this, _visible)) {
+      __privateSet$a(this, _visible, shouldShow);
+      __privateGet$a(this, _panel).dataset.show = shouldShow ? "true" : "false";
+    }
+    if (shouldShow) {
+      const session = this.ctx.get(aiSessionCtx.key);
+      const docUntouched = !!__privateGet$a(this, _diffStartDoc) && view.state.doc.eq(__privateGet$a(this, _diffStartDoc));
+      __privateGet$a(this, _retryBtn).disabled = !session.lastInstruction || !docUntouched;
+    }
+  }
+  destroy() {
+    __privateGet$a(this, _panel).remove();
+  }
+}
+_panel = new WeakMap();
+_host = new WeakMap();
+_retryBtn = new WeakMap();
+_config = new WeakMap();
+_visible = new WeakMap();
+_diffActive = new WeakMap();
+_diffStartDoc = new WeakMap();
+_ownedByAI = new WeakMap();
+_DiffActionsPanelView_instances = new WeakSet();
+findHost_fn = function(view) {
+  var _a;
+  return (_a = view.dom.closest(".milkdown")) != null ? _a : document.body;
+};
+makeButton_fn = function(variant, icon, label, onClick) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = `${PANEL_CLASS}-btn ${PANEL_CLASS}-btn-${variant}`;
+  btn.appendChild(createIcon(icon));
+  const text = document.createElement("span");
+  text.textContent = label;
+  btn.appendChild(text);
+  btn.addEventListener("mousedown", (e) => e.preventDefault());
+  btn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  });
+  return btn;
+};
+makeShortcutChip_fn = function() {
+  const shortcut = document.createElement("span");
+  shortcut.className = `${PANEL_CLASS}-shortcut`;
+  const cmd = document.createElement("span");
+  cmd.textContent = __privateGet$a(this, _config).modSymbol;
+  const enter = document.createElement("span");
+  enter.className = `${PANEL_CLASS}-shortcut-icon`;
+  setSanitizedIcon(enter, __privateGet$a(this, _config).enterKeyIcon);
+  shortcut.append(cmd, enter);
+  return shortcut;
+};
+_retry = new WeakMap();
+canRetry_fn = function() {
+  if (!__privateGet$a(this, _diffStartDoc)) return false;
+  const editorView = this.ctx.get(core.editorViewCtx);
+  return editorView.state.doc.eq(__privateGet$a(this, _diffStartDoc));
+};
+_rejectAll = new WeakMap();
+_acceptAll = new WeakMap();
+
+const diffActionsPanelKey = new state.PluginKey("CREPE_AI_DIFF_ACTIONS_PANEL");
+const DEFAULT_DIFF_ACTIONS_RETRY_LABEL = "Retry";
+const DEFAULT_DIFF_ACTIONS_REJECT_ALL_LABEL = "Reject all";
+const DEFAULT_DIFF_ACTIONS_ACCEPT_ALL_LABEL = "Accept all";
+function detectModSymbol() {
+  var _a, _b, _c, _d;
+  if (typeof navigator === "undefined") return "\u2318";
+  const ua = navigator;
+  const platform = (_d = (_c = (_b = (_a = ua.userAgentData) == null ? void 0 : _a.platform) != null ? _b : ua.platform) != null ? _c : ua.userAgent) != null ? _d : "";
+  return /mac|iphone|ipad|ipod/i.test(platform) ? "\u2318" : "Ctrl";
+}
+const DEFAULT_DIFF_ACTIONS_MOD_SYMBOL = detectModSymbol();
+function resolveDiffActionsConfig(options) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { config, enterKeyIcon: enterKeyIcon$1 } = options;
+  return {
+    retryLabel: (_a = config == null ? void 0 : config.retryLabel) != null ? _a : DEFAULT_DIFF_ACTIONS_RETRY_LABEL,
+    rejectAllLabel: (_b = config == null ? void 0 : config.rejectAllLabel) != null ? _b : DEFAULT_DIFF_ACTIONS_REJECT_ALL_LABEL,
+    acceptAllLabel: (_c = config == null ? void 0 : config.acceptAllLabel) != null ? _c : DEFAULT_DIFF_ACTIONS_ACCEPT_ALL_LABEL,
+    retryIcon: (_d = config == null ? void 0 : config.retryIcon) != null ? _d : retryIcon,
+    rejectIcon: (_e = config == null ? void 0 : config.rejectIcon) != null ? _e : clearIcon,
+    acceptIcon: (_f = config == null ? void 0 : config.acceptIcon) != null ? _f : confirmIcon,
+    enterKeyIcon: enterKeyIcon$1 != null ? enterKeyIcon$1 : enterKeyIcon,
+    modSymbol: (_g = config == null ? void 0 : config.modSymbol) != null ? _g : DEFAULT_DIFF_ACTIONS_MOD_SYMBOL
+  };
+}
+function diffActionsPanelPlugin(options = {}) {
+  const resolved = resolveDiffActionsConfig(options);
+  return utils.$prose((ctx) => {
+    return new state.Plugin({
+      key: diffActionsPanelKey,
+      view(view) {
+        return new DiffActionsPanelView(ctx, view, resolved);
+      },
+      props: {
+        handleKeyDown(view, event) {
+          var _a;
+          if (event.key !== "Enter") return false;
+          if (!(event.metaKey || event.ctrlKey)) return false;
+          if (!((_a = diff.diffPluginKey.getState(view.state)) == null ? void 0 : _a.active)) return false;
+          if (!ctx.get(aiSessionCtx.key).diffOwnedByAI) return false;
+          event.preventDefault();
+          const commands = ctx.get(core.commandsCtx);
+          commands.call(diff.acceptAllDiffsCmd.key);
+          return true;
+        }
+      }
+    });
+  });
+}
+
+var __typeError$9 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
+var __privateGet$9 = (obj, member, getter) => (__accessCheck$9(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$9 = (obj, member, value) => member.has(obj) ? __typeError$9("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$9 = (obj, member, value, setter) => (__accessCheck$9(obj, member, "write to private field"), member.set(obj, value), value);
+var _nodes, _removeById;
+function createSubmenuBuilder(node) {
+  const builder = {
+    addItem: (id, item) => {
+      node.items.set(id, item);
+      return builder;
+    },
+    removeItem: (id) => {
+      node.items.delete(id);
+      return builder;
+    },
+    getItem: (id) => node.items.get(id),
+    clear: () => {
+      node.items.clear();
+      return builder;
+    }
+  };
+  return builder;
+}
+class AISuggestionsBuilder {
+  constructor() {
+    __privateAdd$9(this, _nodes, []);
+    this.addItem = (id, item) => {
+      __privateGet$9(this, _removeById).call(this, id);
+      __privateGet$9(this, _nodes).push({ kind: "item", id, item });
+      return this;
+    };
+    /// Add a submenu. Populate items via the optional `build` callback,
+    /// or call `getSubmenu(id)` afterward. Returns `this` so calls can be
+    /// chained at the parent level alongside `addItem`.
+    this.addSubmenu = (id, def, build) => {
+      __privateGet$9(this, _removeById).call(this, id);
+      const node = { def, items: /* @__PURE__ */ new Map() };
+      if (build) build(createSubmenuBuilder(node));
+      __privateGet$9(this, _nodes).push({ kind: "submenu", id, node });
+      return this;
+    };
+    this.removeItem = (id) => {
+      __privateGet$9(this, _removeById).call(this, id);
+      return this;
+    };
+    this.getItem = (id) => {
+      const node = __privateGet$9(this, _nodes).find((n) => n.kind === "item" && n.id === id);
+      return (node == null ? void 0 : node.kind) === "item" ? node.item : void 0;
+    };
+    /// Return a builder that mutates the submenu's items in place.
+    /// Multiple calls return distinct builder objects backed by the same
+    /// underlying node, so changes are always visible.
+    this.getSubmenu = (id) => {
+      const node = __privateGet$9(this, _nodes).find((n) => n.kind === "submenu" && n.id === id);
+      return (node == null ? void 0 : node.kind) === "submenu" ? createSubmenuBuilder(node.node) : void 0;
+    };
+    this.clear = () => {
+      __privateSet$9(this, _nodes, []);
+      return this;
+    };
+    this.build = () => {
+      const main = [];
+      const submenus = {};
+      for (const node of __privateGet$9(this, _nodes)) {
+        if (node.kind === "item") {
+          main.push({ kind: "item", id: node.id, item: node.item });
+        } else {
+          main.push({ kind: "submenu", id: node.id, def: node.node.def });
+          submenus[node.id] = {
+            def: node.node.def,
+            items: Array.from(node.node.items.entries()).map(([id, item]) => ({
+              id,
+              item
+            }))
+          };
+        }
+      }
+      return { main, submenus };
+    };
+    __privateAdd$9(this, _removeById, (id) => {
+      __privateSet$9(this, _nodes, __privateGet$9(this, _nodes).filter((n) => n.id !== id));
+    });
+  }
+}
+_nodes = new WeakMap();
+_removeById = new WeakMap();
+function applyDefaultSuggestions(builder) {
+  builder.addItem("improve", {
+    icon: aiIcon,
+    label: "Improve writing",
+    streamingLabel: "Improving writing",
+    prompt: "Improve the writing while preserving the original meaning."
+  }).addItem("grammar", {
+    icon: grammarCheckIcon,
+    label: "Fix grammar & spelling",
+    streamingLabel: "Fixing grammar & spelling",
+    prompt: "Fix any grammar and spelling errors without changing the meaning."
+  }).addItem("shorter", {
+    icon: shorterIcon,
+    label: "Make shorter",
+    streamingLabel: "Making shorter",
+    prompt: "Make this shorter while preserving the key information."
+  }).addItem("longer", {
+    icon: longerIcon,
+    label: "Make longer",
+    streamingLabel: "Expanding",
+    prompt: "Expand this with more detail and examples."
+  });
+  builder.addSubmenu(
+    "tone",
+    {
+      icon: editIcon,
+      label: "Change tone\u2026",
+      title: "Change tone",
+      searchPlaceholder: "Search tones\u2026"
+    },
+    (sub) => {
+      const tones = [
+        ["professional", "Professional"],
+        ["casual", "Casual"],
+        ["confident", "Confident"],
+        ["friendly", "Friendly"],
+        ["direct", "Direct"],
+        ["formal", "Formal"]
+      ];
+      for (const [id, label] of tones) {
+        sub.addItem(id, {
+          icon: editIcon,
+          label,
+          streamingLabel: "Adjusting tone",
+          prompt: `Rewrite this in a ${label.toLowerCase()} tone.`
+        });
+      }
+    }
+  );
+  builder.addSubmenu(
+    "translate",
+    {
+      icon: translateIcon,
+      label: "Translate\u2026",
+      title: "Translate",
+      searchPlaceholder: "Search languages\u2026"
+    },
+    (sub) => {
+      const languages = [
+        ["english", "English", "English"],
+        ["chinese", "Chinese", "Chinese (Simplified)"],
+        ["japanese", "Japanese", "Japanese"],
+        ["korean", "Korean", "Korean"],
+        ["spanish", "Spanish", "Spanish"],
+        ["french", "French", "French"],
+        ["german", "German", "German"]
+      ];
+      for (const [id, label, promptName] of languages) {
+        sub.addItem(id, {
+          icon: translateIcon,
+          label,
+          streamingLabel: `Translating to ${label}`,
+          prompt: `Translate this to ${promptName}.`
+        });
+      }
+    }
+  );
+}
+
+function keepAlive(..._args) {
+}
+
+keepAlive(vue.h);
+function renderHighlighted(label, query) {
+  const q = query.trim();
+  if (!q) return [label];
+  const lower = label.toLowerCase();
+  const lq = q.toLowerCase();
+  const idx = lower.indexOf(lq);
+  if (idx === -1) return [label];
+  return [
+    label.slice(0, idx),
+    vue.h("mark", null, label.slice(idx, idx + q.length)),
+    label.slice(idx + q.length)
+  ];
+}
+const AIInstructionInput = vue.defineComponent({
+  props: {
+    placeholder: { type: Object, required: true },
+    resetSignal: { type: Object, required: true },
+    suggestions: { type: Object, required: true },
+    chrome: { type: Object, required: true },
+    onConfirm: { type: Function, required: true },
+    onCancel: { type: Function, required: true }
+  },
+  setup({
+    placeholder,
+    resetSignal,
+    suggestions,
+    chrome,
+    onConfirm,
+    onCancel
+  }) {
+    const inputValue = vue.ref("");
+    const view = vue.ref({ kind: "main" });
+    const selectedIndex = vue.ref(0);
+    const inputRef = vue.ref(null);
+    const listRef = vue.ref(null);
+    const listboxId = `ai-instruction-list-${Math.random().toString(36).slice(2, 9)}`;
+    const optionId = (idx) => `${listboxId}-opt-${idx}`;
+    vue.watch(resetSignal, () => {
+      inputValue.value = "";
+      view.value = { kind: "main" };
+      selectedIndex.value = 0;
+    });
+    const allItems = vue.computed(() => {
+      if (view.value.kind === "submenu") {
+        const submenu = suggestions.submenus[view.value.id];
+        if (!submenu) return [];
+        return submenu.items.map(({ id, item }) => ({
+          id,
+          icon: item.icon,
+          label: item.label,
+          hasSubmenu: false,
+          prompt: { text: item.prompt, streamingLabel: item.streamingLabel }
+        }));
+      }
+      return suggestions.main.map((entry) => {
+        if (entry.kind === "item") {
+          return {
+            id: entry.id,
+            icon: entry.item.icon,
+            label: entry.item.label,
+            hasSubmenu: false,
+            prompt: {
+              text: entry.item.prompt,
+              streamingLabel: entry.item.streamingLabel
+            }
+          };
+        }
+        return {
+          id: entry.id,
+          icon: entry.def.icon,
+          label: entry.def.label,
+          hasSubmenu: true
+        };
+      });
+    });
+    const currentSubmenuDef = vue.computed(() => {
+      var _a, _b;
+      if (view.value.kind !== "submenu") return null;
+      return (_b = (_a = suggestions.submenus[view.value.id]) == null ? void 0 : _a.def) != null ? _b : null;
+    });
+    const filteredItems = vue.computed(() => {
+      const q = inputValue.value.trim().toLowerCase();
+      if (!q) return allItems.value;
+      return allItems.value.filter(
+        (item) => item.label.toLowerCase().includes(q)
+      );
+    });
+    const showSendAsPrompt = vue.computed(() => inputValue.value.trim().length > 0);
+    const totalItems = vue.computed(
+      () => filteredItems.value.length + (showSendAsPrompt.value ? 1 : 0)
+    );
+    vue.watch([filteredItems, view, showSendAsPrompt], () => {
+      selectedIndex.value = showSendAsPrompt.value ? filteredItems.value.length : 0;
+    });
+    const focusInput = () => {
+      void vue.nextTick(() => {
+        var _a;
+        return (_a = inputRef.value) == null ? void 0 : _a.focus();
+      });
+    };
+    const enterSubmenu = (id) => {
+      view.value = { kind: "submenu", id };
+      inputValue.value = "";
+      selectedIndex.value = 0;
+      focusInput();
+    };
+    const exitSubmenu = () => {
+      view.value = { kind: "main" };
+      inputValue.value = "";
+      selectedIndex.value = 0;
+      focusInput();
+    };
+    const runItem = (item) => {
+      if (item.hasSubmenu) {
+        enterSubmenu(item.id);
+      } else if (item.prompt) {
+        onConfirm(item.prompt.text, item.prompt.streamingLabel);
+        inputValue.value = "";
+      }
+    };
+    const submitRaw = () => {
+      const v = inputValue.value.trim();
+      if (!v) return;
+      onConfirm(v);
+      inputValue.value = "";
+    };
+    const onSelectCurrent = () => {
+      const idx = selectedIndex.value;
+      const items = filteredItems.value;
+      if (idx < items.length) {
+        runItem(items[idx]);
+      } else if (showSendAsPrompt.value) {
+        submitRaw();
+      }
+    };
+    const scrollToSelected = () => {
+      void vue.nextTick(() => {
+        const list = listRef.value;
+        if (!list) return;
+        const el = list.querySelector(
+          `[data-index="${selectedIndex.value}"]`
+        );
+        el == null ? void 0 : el.scrollIntoView({ block: "nearest" });
+      });
+    };
+    const onKeydown = (e) => {
+      e.stopPropagation();
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (totalItems.value === 0) return;
+        selectedIndex.value = (selectedIndex.value + 1) % totalItems.value;
+        scrollToSelected();
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (totalItems.value === 0) return;
+        selectedIndex.value = (selectedIndex.value - 1 + totalItems.value) % totalItems.value;
+        scrollToSelected();
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onSelectCurrent();
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (view.value.kind === "submenu") exitSubmenu();
+        else onCancel();
+        return;
+      }
+      if (e.key === "Backspace" && inputValue.value === "" && view.value.kind === "submenu") {
+        e.preventDefault();
+        exitSubmenu();
+      }
+    };
+    const onItemPointerDown = (e) => {
+      e.preventDefault();
+    };
+    return () => {
+      const items = filteredItems.value;
+      const showPrompt = showSendAsPrompt.value;
+      const submenuDef = currentSubmenuDef.value;
+      return /* @__PURE__ */ vue.h("div", { class: "ai-instruction" }, /* @__PURE__ */ vue.h("div", { class: "ai-instruction-input" }, /* @__PURE__ */ vue.h("span", { class: "ai-instruction-input-prefix" }, /* @__PURE__ */ vue.h(component.Icon, { icon: chrome.aiIcon })), /* @__PURE__ */ vue.h(
+        "input",
+        {
+          ref: inputRef,
+          class: "ai-instruction-input-field",
+          role: "combobox",
+          "aria-expanded": "true",
+          "aria-autocomplete": "list",
+          "aria-controls": listboxId,
+          "aria-activedescendant": totalItems.value > 0 ? optionId(selectedIndex.value) : void 0,
+          placeholder: submenuDef ? submenuDef.searchPlaceholder : placeholder.value,
+          value: inputValue.value,
+          onInput: (e) => {
+            inputValue.value = e.target.value;
+          },
+          onKeydown
+        }
+      ), /* @__PURE__ */ vue.h(
+        "button",
+        {
+          type: "button",
+          class: "ai-instruction-submit",
+          "aria-label": chrome.submitButtonLabel,
+          disabled: !showPrompt,
+          onMousedown: onItemPointerDown,
+          onClick: submitRaw
+        },
+        /* @__PURE__ */ vue.h(component.Icon, { icon: chrome.sendIcon })
+      )), /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: "ai-instruction-list",
+          ref: listRef,
+          id: listboxId,
+          role: "listbox",
+          "aria-label": chrome.listboxLabel
+        },
+        submenuDef && /* @__PURE__ */ vue.h(
+          "button",
+          {
+            type: "button",
+            class: "ai-instruction-back",
+            onMousedown: onItemPointerDown,
+            onClick: exitSubmenu
+          },
+          /* @__PURE__ */ vue.h("span", { class: "ai-instruction-back-icon", "aria-hidden": "true" }, /* @__PURE__ */ vue.h(component.Icon, { icon: chrome.chevronLeftIcon })),
+          /* @__PURE__ */ vue.h("span", null, submenuDef.title)
+        ),
+        items.length > 0 && /* @__PURE__ */ vue.h("div", { class: "ai-instruction-section" }, /* @__PURE__ */ vue.h("div", { class: "ai-instruction-section-header" }, chrome.suggestionsHeaderLabel), items.map((item, idx) => /* @__PURE__ */ vue.h(
+          "div",
+          {
+            key: item.id,
+            id: optionId(idx),
+            "data-index": idx,
+            role: "option",
+            "aria-selected": idx === selectedIndex.value,
+            class: [
+              "ai-instruction-item",
+              idx === selectedIndex.value ? "active" : ""
+            ],
+            onMousedown: onItemPointerDown,
+            onClick: () => runItem(item),
+            onPointerenter: () => {
+              selectedIndex.value = idx;
+            }
+          },
+          /* @__PURE__ */ vue.h("span", { class: "ai-instruction-item-icon" }, /* @__PURE__ */ vue.h(component.Icon, { icon: item.icon })),
+          /* @__PURE__ */ vue.h("span", { class: "ai-instruction-item-label" }, renderHighlighted(item.label, inputValue.value)),
+          item.hasSubmenu && /* @__PURE__ */ vue.h("span", { class: "ai-instruction-item-arrow" }, /* @__PURE__ */ vue.h(component.Icon, { icon: chrome.chevronRightIcon }))
+        ))),
+        showPrompt && /* @__PURE__ */ vue.h("div", { class: "ai-instruction-section" }, /* @__PURE__ */ vue.h("div", { class: "ai-instruction-section-header" }, chrome.sendAsPromptHeaderLabel), /* @__PURE__ */ vue.h(
+          "div",
+          {
+            id: optionId(items.length),
+            "data-index": items.length,
+            role: "option",
+            "aria-selected": selectedIndex.value === items.length,
+            class: [
+              "ai-instruction-item",
+              "ai-instruction-item-prompt",
+              selectedIndex.value === items.length ? "active" : ""
+            ],
+            onMousedown: onItemPointerDown,
+            onClick: submitRaw,
+            onPointerenter: () => {
+              selectedIndex.value = items.length;
+            }
+          },
+          /* @__PURE__ */ vue.h("span", { class: "ai-instruction-item-icon" }, /* @__PURE__ */ vue.h(component.Icon, { icon: chrome.sendPromptIcon })),
+          /* @__PURE__ */ vue.h("span", { class: "ai-instruction-item-label" }, chrome.sendAsPromptLabel, " ", /* @__PURE__ */ vue.h("span", { class: "ai-instruction-item-quote" }, '"', inputValue.value, '"')),
+          /* @__PURE__ */ vue.h("span", { class: "ai-instruction-item-shortcut" }, /* @__PURE__ */ vue.h(component.Icon, { icon: chrome.enterKeyIcon }))
+        ))
+      ));
+    };
+  }
+});
+
+var __typeError$8 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$8("Cannot " + msg);
+var __privateGet$8 = (obj, member, getter) => (__accessCheck$8(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$8("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$8 = (obj, member, value, setter) => (__accessCheck$8(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$4, _provider$2, _app$5, _placeholder, _resetSignal, _from, _to, _wantsShow, _onConfirm, _onCancel;
+class AIInstructionTooltipView {
+  constructor(ctx, view, config) {
+    this.ctx = ctx;
+    __privateAdd$8(this, _content$4);
+    __privateAdd$8(this, _provider$2);
+    __privateAdd$8(this, _app$5);
+    __privateAdd$8(this, _placeholder);
+    __privateAdd$8(this, _resetSignal);
+    __privateAdd$8(this, _from, -1);
+    __privateAdd$8(this, _to, -1);
+    /// Source of truth for "should the palette currently be showing".
+    /// `TooltipProvider.shouldShow` reads this so that forwarding `update()`
+    /// to the provider on every editor transition (needed to keep the
+    /// floating position in sync with layout changes) doesn't dismiss the
+    /// palette behind our back.
+    __privateAdd$8(this, _wantsShow, false);
+    __privateAdd$8(this, _onConfirm, (instruction, label) => {
+      if (!instruction.trim()) return;
+      const commands = this.ctx.get(core.commandsCtx);
+      const accepted = commands.call(runAICmd.key, { instruction, label });
+      if (!accepted) return;
+      __privateSet$8(this, _wantsShow, false);
+      __privateGet$8(this, _provider$2).hide();
+    });
+    __privateAdd$8(this, _onCancel, () => {
+      __privateSet$8(this, _wantsShow, false);
+      __privateGet$8(this, _provider$2).hide();
+    });
+    this.show = (from, to) => {
+      __privateSet$8(this, _from, from);
+      __privateSet$8(this, _to, to);
+      __privateGet$8(this, _resetSignal).value++;
+      __privateSet$8(this, _wantsShow, true);
+      const view = this.ctx.get(core.editorViewCtx);
+      __privateGet$8(this, _provider$2).show(
+        { getBoundingClientRect: () => prose.posToDOMRect(view, from, to) },
+        view
+      );
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = __privateGet$8(this, _content$4).querySelector("input")) == null ? void 0 : _a.focus();
+      });
+    };
+    this.update = (view, prevState) => {
+      const { selection } = view.state;
+      const isTextSelection = selection instanceof state.TextSelection;
+      const movedRange = selection.from !== __privateGet$8(this, _from) || selection.to !== __privateGet$8(this, _to);
+      if (!isTextSelection || movedRange) {
+        __privateSet$8(this, _wantsShow, false);
+        __privateGet$8(this, _provider$2).hide();
+        return;
+      }
+      __privateGet$8(this, _provider$2).update(view, prevState);
+    };
+    this.destroy = () => {
+      __privateGet$8(this, _app$5).unmount();
+      __privateGet$8(this, _provider$2).destroy();
+      __privateGet$8(this, _content$4).remove();
+    };
+    __privateSet$8(this, _placeholder, vue.ref(config.placeholder));
+    __privateSet$8(this, _resetSignal, vue.ref(0));
+    const content = document.createElement("div");
+    content.className = "milkdown-ai-instruction";
+    const app = vue.createApp(AIInstructionInput, {
+      placeholder: __privateGet$8(this, _placeholder),
+      resetSignal: __privateGet$8(this, _resetSignal),
+      suggestions: config.suggestions,
+      chrome: config.chrome,
+      onConfirm: __privateGet$8(this, _onConfirm),
+      onCancel: __privateGet$8(this, _onCancel)
+    });
+    app.mount(content);
+    __privateSet$8(this, _app$5, app);
+    __privateSet$8(this, _content$4, content);
+    __privateSet$8(this, _provider$2, new tooltip.TooltipProvider({
+      content,
+      debounce: 0,
+      offset: 10,
+      shouldShow: () => __privateGet$8(this, _wantsShow),
+      floatingUIOptions: {
+        placement: "bottom"
+      }
+    }));
+    __privateGet$8(this, _provider$2).onHide = () => {
+      __privateSet$8(this, _wantsShow, false);
+      requestAnimationFrame(() => {
+        try {
+          const root = __privateGet$8(this, _content$4).getRootNode();
+          const active = root.activeElement;
+          if (!active || !__privateGet$8(this, _content$4).contains(active)) return;
+          const v = this.ctx.get(core.editorViewCtx);
+          v.dom.focus({ preventScroll: true });
+        } catch (e) {
+        }
+      });
+    };
+    __privateGet$8(this, _provider$2).update(view);
+  }
+}
+_content$4 = new WeakMap();
+_provider$2 = new WeakMap();
+_app$5 = new WeakMap();
+_placeholder = new WeakMap();
+_resetSignal = new WeakMap();
+_from = new WeakMap();
+_to = new WeakMap();
+_wantsShow = new WeakMap();
+_onConfirm = new WeakMap();
+_onCancel = new WeakMap();
+
+const defaultAPI = {
+  show: () => {
+  }
+};
+const aiInstructionTooltipAPI = utils.$ctx(
+  { ...defaultAPI },
+  "aiInstructionTooltipAPI"
+);
+const aiInstructionTooltip = tooltip.tooltipFactory("CREPE_AI_INSTRUCTION");
+const DEFAULT_SUGGESTIONS_HEADER_LABEL = "SUGGESTIONS";
+const DEFAULT_SEND_AS_PROMPT_HEADER_LABEL = "SEND AS PROMPT";
+const DEFAULT_SEND_AS_PROMPT_LABEL = "Ask AI:";
+const DEFAULT_SUBMIT_BUTTON_LABEL = "Send prompt";
+const DEFAULT_LISTBOX_LABEL = "AI suggestions";
+const DEFAULT_INSTRUCTION_PLACEHOLDER = "Tell AI what to do with the selection\u2026";
+function resolveChrome(config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  return {
+    aiIcon: (_a = config == null ? void 0 : config.aiIcon) != null ? _a : aiIcon,
+    sendIcon: (_b = config == null ? void 0 : config.sendIcon) != null ? _b : sendIcon,
+    sendPromptIcon: (_c = config == null ? void 0 : config.sendPromptIcon) != null ? _c : sendPromptIcon,
+    enterKeyIcon: (_d = config == null ? void 0 : config.enterKeyIcon) != null ? _d : enterKeyIcon,
+    chevronLeftIcon: (_e = config == null ? void 0 : config.chevronLeftIcon) != null ? _e : chevronLeftIcon,
+    chevronRightIcon: (_f = config == null ? void 0 : config.chevronRightIcon) != null ? _f : chevronRightIcon,
+    suggestionsHeaderLabel: (_g = config == null ? void 0 : config.suggestionsHeaderLabel) != null ? _g : DEFAULT_SUGGESTIONS_HEADER_LABEL,
+    sendAsPromptHeaderLabel: (_h = config == null ? void 0 : config.sendAsPromptHeaderLabel) != null ? _h : DEFAULT_SEND_AS_PROMPT_HEADER_LABEL,
+    sendAsPromptLabel: (_i = config == null ? void 0 : config.sendAsPromptLabel) != null ? _i : DEFAULT_SEND_AS_PROMPT_LABEL,
+    submitButtonLabel: (_j = config == null ? void 0 : config.submitButtonLabel) != null ? _j : DEFAULT_SUBMIT_BUTTON_LABEL,
+    listboxLabel: (_k = config == null ? void 0 : config.listboxLabel) != null ? _k : DEFAULT_LISTBOX_LABEL
+  };
+}
+function resolveViewConfig(config) {
+  var _a, _b;
+  const builder = new AISuggestionsBuilder();
+  applyDefaultSuggestions(builder);
+  (_a = config == null ? void 0 : config.buildAISuggestions) == null ? void 0 : _a.call(config, builder);
+  return {
+    placeholder: (_b = config == null ? void 0 : config.instructionPlaceholder) != null ? _b : DEFAULT_INSTRUCTION_PLACEHOLDER,
+    chrome: resolveChrome(config),
+    suggestions: builder.build()
+  };
+}
+function configureAIInstructionTooltip(config) {
+  return (ctx) => {
+    const viewConfig = resolveViewConfig(config);
+    let tooltipView = null;
+    ctx.update(aiInstructionTooltipAPI.key, (api) => ({
+      ...api,
+      show: (from, to) => {
+        tooltipView == null ? void 0 : tooltipView.show(from, to);
+      }
+    }));
+    ctx.set(aiInstructionTooltip.key, {
+      view: (view) => {
+        tooltipView = new AIInstructionTooltipView(ctx, view, viewConfig);
+        return tooltipView;
+      }
+    });
+  };
+}
+
+var __typeError$7 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$7 = (obj, member, msg) => member.has(obj) || __typeError$7("Cannot " + msg);
+var __privateGet$7 = (obj, member, getter) => (__accessCheck$7(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$7 = (obj, member, value) => member.has(obj) ? __typeError$7("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$7 = (obj, member, value, setter) => (__accessCheck$7(obj, member, "write to private field"), member.set(obj, value), value);
+var _spinner, _label, _fallbackLabel, _start, _lastLabelText, _rafId, _tick;
+const CLASS_PREFIX = "milkdown-ai-streaming";
+const SPINNER_PERIOD_MS = 800;
+const DEFAULT_STREAMING_FALLBACK_LABEL = "Generating";
+const DEFAULT_STREAMING_CANCEL_HINT = "Esc to cancel";
+const indicatorKey = new state.PluginKey(
+  "CREPE_AI_STREAMING_INDICATOR"
+);
+class IndicatorWidget {
+  constructor(ctx, fallbackLabel, cancelHint) {
+    __privateAdd$7(this, _spinner);
+    __privateAdd$7(this, _label);
+    __privateAdd$7(this, _fallbackLabel);
+    __privateAdd$7(this, _start, performance.now());
+    __privateAdd$7(this, _lastLabelText, "");
+    __privateAdd$7(this, _rafId, 0);
+    __privateAdd$7(this, _tick, () => {
+      const elapsed = performance.now() - __privateGet$7(this, _start);
+      const angle = elapsed / SPINNER_PERIOD_MS * 360;
+      __privateGet$7(this, _spinner).style.transform = `rotate(${angle}deg)`;
+      __privateSet$7(this, _rafId, requestAnimationFrame(__privateGet$7(this, _tick)));
+    });
+    __privateSet$7(this, _fallbackLabel, fallbackLabel);
+    const dom = document.createElement("span");
+    dom.className = `${CLASS_PREFIX}-indicator`;
+    dom.contentEditable = "false";
+    dom.setAttribute("role", "status");
+    dom.setAttribute("aria-live", "polite");
+    const spinner = document.createElement("span");
+    spinner.className = `${CLASS_PREFIX}-spinner`;
+    spinner.setAttribute("aria-hidden", "true");
+    dom.appendChild(spinner);
+    const label = document.createElement("span");
+    label.className = `${CLASS_PREFIX}-label`;
+    dom.appendChild(label);
+    const escHint = document.createElement("span");
+    escHint.className = `${CLASS_PREFIX}-esc`;
+    escHint.textContent = cancelHint;
+    dom.appendChild(escHint);
+    this.dom = dom;
+    __privateSet$7(this, _spinner, spinner);
+    __privateSet$7(this, _label, label);
+    this.setLabel(ctx);
+    __privateGet$7(this, _tick).call(this);
+  }
+  setLabel(ctx) {
+    const session = ctx.get(aiSessionCtx.key);
+    const text = `${session.label || __privateGet$7(this, _fallbackLabel)}\u2026`;
+    if (text === __privateGet$7(this, _lastLabelText)) return;
+    __privateSet$7(this, _lastLabelText, text);
+    __privateGet$7(this, _label).textContent = text;
+  }
+  destroy() {
+    if (__privateGet$7(this, _rafId)) cancelAnimationFrame(__privateGet$7(this, _rafId));
+    __privateSet$7(this, _rafId, 0);
+  }
+}
+_spinner = new WeakMap();
+_label = new WeakMap();
+_fallbackLabel = new WeakMap();
+_start = new WeakMap();
+_lastLabelText = new WeakMap();
+_rafId = new WeakMap();
+_tick = new WeakMap();
+function streamingIndicatorPlugin(options = {}) {
+  var _a, _b;
+  const { config } = options;
+  const fallbackLabel = (_a = config == null ? void 0 : config.fallbackLabel) != null ? _a : DEFAULT_STREAMING_FALLBACK_LABEL;
+  const cancelHint = (_b = config == null ? void 0 : config.cancelHint) != null ? _b : DEFAULT_STREAMING_CANCEL_HINT;
+  return utils.$prose((ctx) => {
+    let widget = null;
+    function ensureWidget() {
+      if (!widget) widget = new IndicatorWidget(ctx, fallbackLabel, cancelHint);
+      else widget.setLabel(ctx);
+      return widget;
+    }
+    function dropWidget() {
+      if (widget) {
+        widget.destroy();
+        widget = null;
+      }
+    }
+    function buildSet(doc, insertEndPos) {
+      const pos = Math.min(insertEndPos, doc.content.size);
+      const decoration = view.Decoration.widget(pos, ensureWidget().dom, {
+        side: 1,
+        key: "ai-streaming-indicator"
+      });
+      return view.DecorationSet.create(doc, [decoration]);
+    }
+    return new state.Plugin({
+      key: indicatorKey,
+      state: {
+        init: () => view.DecorationSet.empty,
+        apply(tr, decorations, _oldState, newState) {
+          const streaming$1 = streaming.streamingPluginKey.getState(newState);
+          if (!(streaming$1 == null ? void 0 : streaming$1.active) || streaming$1.insertEndPos == null) {
+            dropWidget();
+            return view.DecorationSet.empty;
+          }
+          if (tr.getMeta(streaming.streamingPluginKey) || tr.docChanged) {
+            return buildSet(newState.doc, streaming$1.insertEndPos);
+          }
+          return decorations.map(tr.mapping, tr.doc);
+        }
+      },
+      view() {
+        return {
+          destroy() {
+            dropWidget();
+          }
+        };
+      },
+      props: {
+        decorations(state) {
+          var _a2;
+          return (_a2 = indicatorKey.getState(state)) != null ? _a2 : view.DecorationSet.empty;
+        },
+        handleKeyDown(view, event) {
+          var _a2;
+          if (event.key !== "Escape") return false;
+          const commands = ctx.get(core.commandsCtx);
+          if (ctx.get(aiSessionCtx.key).abortController) {
+            event.preventDefault();
+            commands.call(abortAICmd.key, { keep: true });
+            return true;
+          }
+          if ((_a2 = streaming.streamingPluginKey.getState(view.state)) == null ? void 0 : _a2.active) {
+            event.preventDefault();
+            commands.call(streaming.abortStreamingCmd.key, { keep: true });
+            return true;
+          }
+          return false;
+        }
+      }
+    });
+  });
+}
+
+const CREPE_CUSTOM_BLOCK_TYPES = ["table", "image-block", "code_block"];
+const CREPE_IGNORE_ATTRS = { heading: ["id"] };
+const ai = (editor, config) => {
+  var _a, _b;
+  const diffCfg = (_a = config == null ? void 0 : config.diff) != null ? _a : {};
+  const streamingCfg = (_b = config == null ? void 0 : config.streaming) != null ? _b : {};
+  editor.config(crepeFeatureConfig(CrepeFeature.AI)).config((ctx) => {
+    ctx.update(diff.diffConfig.key, (prev) => {
+      var _a2;
+      return {
+        ...prev,
+        ignoreAttrs: (_a2 = diffCfg.ignoreAttrs) != null ? _a2 : CREPE_IGNORE_ATTRS
+      };
+    });
+    const { ignoreAttrs: _, ...componentConfig } = diffCfg;
+    ctx.update(diff$1.diffComponentConfig.key, (prev) => {
+      var _a2;
+      return {
+        ...prev,
+        customBlockTypes: (_a2 = componentConfig.customBlockTypes) != null ? _a2 : CREPE_CUSTOM_BLOCK_TYPES,
+        ...componentConfig
+      };
+    });
+  }).use(diff.diff).use(diff$1.diffComponent).config((ctx) => {
+    ctx.update(streaming.streamingConfig.key, (prev) => {
+      var _a2;
+      return {
+        ...prev,
+        ...streamingCfg,
+        ignoreAttrs: (_a2 = streamingCfg.ignoreAttrs) != null ? _a2 : CREPE_IGNORE_ATTRS,
+        // Wire diffReviewOnEnd into the streaming plugin so manual
+        // endStreamingCmd calls (outside runAICmd) also respect it.
+        // Only override if the user explicitly set it — otherwise
+        // keep the streaming plugin's own default so tests and
+        // manual-streaming use cases aren't surprised.
+        ...(config == null ? void 0 : config.diffReviewOnEnd) !== void 0 ? { diffReviewOnEnd: config.diffReviewOnEnd } : {}
+      };
+    });
+  }).use(streaming.streaming).config((ctx) => {
+    ctx.update(aiProviderConfig.key, (prev) => {
+      var _a2;
+      return {
+        ...prev,
+        ...(config == null ? void 0 : config.provider) !== void 0 ? { provider: config.provider } : {},
+        ...(config == null ? void 0 : config.buildContext) !== void 0 ? { buildContext: config.buildContext } : {},
+        diffReviewOnEnd: (_a2 = config == null ? void 0 : config.diffReviewOnEnd) != null ? _a2 : prev.diffReviewOnEnd,
+        ...(config == null ? void 0 : config.onError) !== void 0 ? { onError: config.onError } : {},
+        ...(config == null ? void 0 : config.aiIcon) !== void 0 ? { aiIcon: config.aiIcon } : {}
+      };
+    });
+  }).use(aiProviderConfig).use(aiSessionCtx).use(runAICmd).use(abortAICmd).config(configureAIInstructionTooltip(config)).use(aiInstructionTooltipAPI).use(aiInstructionTooltip).use(streamingIndicatorPlugin({ config: config == null ? void 0 : config.streamingIndicator })).use(
+    diffActionsPanelPlugin({
+      config: config == null ? void 0 : config.diffActions,
+      enterKeyIcon: config == null ? void 0 : config.enterKeyIcon
+    })
+  );
+};
+
 function isInCodeBlock(selection) {
   const type = selection.$from.parent.type;
   return type.name === "code_block";
@@ -770,22 +2169,22 @@ function isInList(selection) {
   return (type == null ? void 0 : type.name) === "list_item";
 }
 
-var __typeError$5 = (msg) => {
+var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
+var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
 var _groups, _getGroupInstance;
 class GroupBuilder {
   constructor() {
-    __privateAdd$5(this, _groups, []);
+    __privateAdd$6(this, _groups, []);
     this.clear = () => {
-      __privateSet$5(this, _groups, []);
+      __privateSet$6(this, _groups, []);
       return this;
     };
-    __privateAdd$5(this, _getGroupInstance, (group) => {
+    __privateAdd$6(this, _getGroupInstance, (group) => {
       const groupInstance = {
         group,
         addItem: (key, item) => {
@@ -807,23 +2206,23 @@ class GroupBuilder {
         label,
         items
       };
-      __privateGet$5(this, _groups).push(group);
-      return __privateGet$5(this, _getGroupInstance).call(this, group);
+      __privateGet$6(this, _groups).push(group);
+      return __privateGet$6(this, _getGroupInstance).call(this, group);
     };
     this.getGroup = (key) => {
-      const group = __privateGet$5(this, _groups).find((group2) => group2.key === key);
+      const group = __privateGet$6(this, _groups).find((group2) => group2.key === key);
       if (!group) throw new Error(`Group with key ${key} not found`);
-      return __privateGet$5(this, _getGroupInstance).call(this, group);
+      return __privateGet$6(this, _getGroupInstance).call(this, group);
     };
     this.build = () => {
-      return __privateGet$5(this, _groups);
+      return __privateGet$6(this, _groups);
     };
   }
 }
 _groups = new WeakMap();
 _getGroupInstance = new WeakMap();
 
-function getGroups$1(filter, config, ctx) {
+function getGroups$2(filter, config, ctx) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb;
   const flags = ctx && useCrepeFeatures(ctx).get();
   const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
@@ -1090,7 +2489,7 @@ function getGroups$1(filter, config, ctx) {
           commands.call(commonmark.clearTextInCurrentBlockCommand.key);
           commands.call(commonmark.addBlockTypeCommand.key, {
             nodeType: codeBlock,
-            attrs: { language: "LaTex" }
+            attrs: { language: "LaTeX" }
           });
         }
       });
@@ -1126,6 +2525,7 @@ function getGroups$1(filter, config, ctx) {
   };
 }
 
+keepAlive(vue.h);
 const Menu = vue.defineComponent({
   props: {
     ctx: {
@@ -1151,7 +2551,7 @@ const Menu = vue.defineComponent({
   },
   setup({ ctx, show, filter, hide, config }) {
     const host = vue.ref();
-    const groupInfo = vue.computed(() => getGroups$1(filter.value, config, ctx));
+    const groupInfo = vue.computed(() => getGroups$2(filter.value, config, ctx));
     const hoverIndex = vue.ref(0);
     const prevMousePosition = vue.ref({ x: -999, y: -999 });
     const onPointerMove = (e) => {
@@ -1180,7 +2580,7 @@ const Menu = vue.defineComponent({
     };
     const runByIndex = (index) => {
       const item = groupInfo.value.groups.flatMap((group) => group.items).at(index);
-      if (item && ctx) item.onRun(ctx);
+      if ((item == null ? void 0 : item.onRun) && ctx) item.onRun(ctx);
       hide();
     };
     const onKeydown = (e) => {
@@ -1284,14 +2684,14 @@ const Menu = vue.defineComponent({
   }
 });
 
-var __typeError$4 = (msg) => {
+var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$3, _app$3, _filter, _slashProvider, _programmaticallyPos;
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$3, _app$4, _filter, _slashProvider, _programmaticallyPos;
 const menu = slash.slashFactory("CREPE_MENU");
 const menuAPI = utils.$ctx(
   {
@@ -1309,33 +2709,33 @@ function configureMenu(ctx, config) {
 }
 class MenuView {
   constructor(ctx, view, config) {
-    __privateAdd$4(this, _content$3);
-    __privateAdd$4(this, _app$3);
-    __privateAdd$4(this, _filter);
-    __privateAdd$4(this, _slashProvider);
-    __privateAdd$4(this, _programmaticallyPos, null);
+    __privateAdd$5(this, _content$3);
+    __privateAdd$5(this, _app$4);
+    __privateAdd$5(this, _filter);
+    __privateAdd$5(this, _slashProvider);
+    __privateAdd$5(this, _programmaticallyPos, null);
     this.update = (view) => {
-      __privateGet$4(this, _slashProvider).update(view);
+      __privateGet$5(this, _slashProvider).update(view);
     };
     this.show = (pos) => {
-      __privateSet$4(this, _programmaticallyPos, pos);
-      __privateGet$4(this, _filter).value = "";
-      __privateGet$4(this, _slashProvider).show();
+      __privateSet$5(this, _programmaticallyPos, pos);
+      __privateGet$5(this, _filter).value = "";
+      __privateGet$5(this, _slashProvider).show();
     };
     this.hide = () => {
-      __privateSet$4(this, _programmaticallyPos, null);
-      __privateGet$4(this, _slashProvider).hide();
+      __privateSet$5(this, _programmaticallyPos, null);
+      __privateGet$5(this, _slashProvider).hide();
     };
     this.destroy = () => {
-      __privateGet$4(this, _slashProvider).destroy();
-      __privateGet$4(this, _app$3).unmount();
-      __privateGet$4(this, _content$3).remove();
+      __privateGet$5(this, _slashProvider).destroy();
+      __privateGet$5(this, _app$4).unmount();
+      __privateGet$5(this, _content$3).remove();
     };
     const content = document.createElement("div");
     content.classList.add("milkdown-slash-menu");
     const show = vue.ref(false);
     const filter = vue.ref("");
-    __privateSet$4(this, _filter, filter);
+    __privateSet$5(this, _filter, filter);
     const hide = this.hide;
     const app = vue.createApp(Menu, {
       ctx,
@@ -1344,12 +2744,12 @@ class MenuView {
       filter,
       hide
     });
-    __privateSet$4(this, _app$3, app);
+    __privateSet$5(this, _app$4, app);
     app.mount(content);
-    __privateSet$4(this, _content$3, content);
+    __privateSet$5(this, _content$3, content);
     const self = this;
-    __privateSet$4(this, _slashProvider, new slash.SlashProvider({
-      content: __privateGet$4(this, _content$3),
+    __privateSet$5(this, _slashProvider, new slash.SlashProvider({
+      content: __privateGet$5(this, _content$3),
       debounce: 20,
       shouldShow(view2) {
         if (isInCodeBlock(view2.state.selection) || isInList(view2.state.selection))
@@ -1362,13 +2762,13 @@ class MenuView {
         if (!isSelectionAtEndOfNode(view2.state.selection)) {
           return false;
         }
-        const pos = __privateGet$4(self, _programmaticallyPos);
+        const pos = __privateGet$5(self, _programmaticallyPos);
         filter.value = currentText.startsWith("/") ? currentText.slice(1) : currentText;
         if (typeof pos === "number") {
           const maxSize = view2.state.doc.nodeSize - 2;
           const validPos = Math.min(pos, maxSize);
           if (view2.state.doc.resolve(validPos).node() !== view2.state.doc.resolve(view2.state.selection.from).node()) {
-            __privateSet$4(self, _programmaticallyPos, null);
+            __privateSet$5(self, _programmaticallyPos, null);
             return false;
           }
           return true;
@@ -1378,10 +2778,10 @@ class MenuView {
       },
       offset: 10
     }));
-    __privateGet$4(this, _slashProvider).onShow = () => {
+    __privateGet$5(this, _slashProvider).onShow = () => {
       show.value = true;
     };
-    __privateGet$4(this, _slashProvider).onHide = () => {
+    __privateGet$5(this, _slashProvider).onHide = () => {
       show.value = false;
     };
     this.update(view);
@@ -1392,7 +2792,7 @@ class MenuView {
   }
 }
 _content$3 = new WeakMap();
-_app$3 = new WeakMap();
+_app$4 = new WeakMap();
 _filter = new WeakMap();
 _slashProvider = new WeakMap();
 _programmaticallyPos = new WeakMap();
@@ -1404,6 +2804,7 @@ function isSelectionAtEndOfNode(selection) {
   return offset === parent.content.size;
 }
 
+keepAlive(vue.h, vue.Fragment);
 const BlockHandle = vue.defineComponent({
   props: {
     onAdd: {
@@ -1447,45 +2848,45 @@ const BlockHandle = vue.defineComponent({
   }
 });
 
-var __typeError$3 = (msg) => {
+var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$2, _provider$1, _app$2, _ctx;
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$2, _provider$1, _app$3, _ctx;
 class BlockHandleView {
   constructor(ctx, config) {
-    __privateAdd$3(this, _content$2);
-    __privateAdd$3(this, _provider$1);
-    __privateAdd$3(this, _app$2);
-    __privateAdd$3(this, _ctx);
+    __privateAdd$4(this, _content$2);
+    __privateAdd$4(this, _provider$1);
+    __privateAdd$4(this, _app$3);
+    __privateAdd$4(this, _ctx);
     this.update = () => {
-      __privateGet$3(this, _provider$1).update();
+      __privateGet$4(this, _provider$1).update();
     };
     this.destroy = () => {
-      __privateGet$3(this, _provider$1).destroy();
-      __privateGet$3(this, _content$2).remove();
-      __privateGet$3(this, _app$2).unmount();
+      __privateGet$4(this, _provider$1).destroy();
+      __privateGet$4(this, _content$2).remove();
+      __privateGet$4(this, _app$3).unmount();
     };
     this.onAdd = () => {
-      const ctx = __privateGet$3(this, _ctx);
+      const ctx = __privateGet$4(this, _ctx);
       const view = ctx.get(core.editorViewCtx);
       if (!view.hasFocus()) view.focus();
       const { state: state$1, dispatch } = view;
-      const active = __privateGet$3(this, _provider$1).active;
+      const active = __privateGet$4(this, _provider$1).active;
       if (!active) return;
       const $pos = active.$pos;
       const pos = $pos.pos + active.node.nodeSize;
       let tr = state$1.tr.insert(pos, commonmark.paragraphSchema.type(ctx).create());
       tr = tr.setSelection(state.TextSelection.near(tr.doc.resolve(pos)));
       dispatch(tr.scrollIntoView());
-      __privateGet$3(this, _provider$1).hide();
+      __privateGet$4(this, _provider$1).hide();
       ctx.get(menuAPI.key).show(tr.selection.from);
     };
     var _a, _b, _c;
-    __privateSet$3(this, _ctx, ctx);
+    __privateSet$4(this, _ctx, ctx);
     const content = document.createElement("div");
     content.classList.add("milkdown-block-handle");
     const app = vue.createApp(BlockHandle, {
@@ -1494,10 +2895,10 @@ class BlockHandleView {
       handleIcon: (_b = config == null ? void 0 : config.handleDragIcon) != null ? _b : menuIcon
     });
     app.mount(content);
-    __privateSet$3(this, _app$2, app);
-    __privateSet$3(this, _content$2, content);
+    __privateSet$4(this, _app$3, app);
+    __privateSet$4(this, _content$2, content);
     const blockProviderOptions = (_c = config == null ? void 0 : config.blockHandle) != null ? _c : {};
-    __privateSet$3(this, _provider$1, new block.BlockProvider({
+    __privateSet$4(this, _provider$1, new block.BlockProvider({
       ctx,
       content,
       getOffset: () => 16,
@@ -1524,7 +2925,7 @@ class BlockHandleView {
 }
 _content$2 = new WeakMap();
 _provider$1 = new WeakMap();
-_app$2 = new WeakMap();
+_app$3 = new WeakMap();
 _ctx = new WeakMap();
 function configureBlockHandle(ctx, config) {
   ctx.set(block.blockConfig.key, {
@@ -1549,7 +2950,7 @@ const codeMirror = (editor, config = {}) => {
   editor.config(crepeFeatureConfig(CrepeFeature.CodeMirror)).config((ctx) => {
     const { languages = [], theme } = config;
     const extensions = [
-      view.keymap.of(commands.defaultKeymap.concat(commands.indentWithTab)),
+      view$1.keymap.of(commands.defaultKeymap.concat(commands.indentWithTab)),
       codemirror.basicSetup
     ];
     if (theme) {
@@ -1630,7 +3031,9 @@ const imageBlock = (editor, config) => {
         uploadPlaceholderText: (_f = config == null ? void 0 : config.blockUploadPlaceholderText) != null ? _f : "or paste link",
         onUpload: (_h = (_g = config == null ? void 0 : config.blockOnUpload) != null ? _g : config == null ? void 0 : config.onUpload) != null ? _h : value.onUpload,
         proxyDomURL: config == null ? void 0 : config.proxyDomURL,
-        onImageLoadError: (_i = config == null ? void 0 : config.onImageLoadError) != null ? _i : value.onImageLoadError
+        onImageLoadError: (_i = config == null ? void 0 : config.onImageLoadError) != null ? _i : value.onImageLoadError,
+        maxWidth: config == null ? void 0 : config.maxWidth,
+        maxHeight: config == null ? void 0 : config.maxHeight
       };
     });
   }).use(imageBlock$1.imageBlockComponent).use(imageInline.imageInlineComponent);
@@ -1747,6 +3150,7 @@ const toggleLatexCommand = utils.$command("ToggleLatex", (ctx) => {
 
 const inlineLatexTooltip = tooltip.tooltipFactory("INLINE_LATEX");
 
+keepAlive(vue.h);
 const LatexTooltip = vue.defineComponent({
   props: {
     config: {
@@ -1782,33 +3186,34 @@ const LatexTooltip = vue.defineComponent({
   }
 });
 
-var __typeError$2 = (msg) => {
+var __typeError$3 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$1, _provider, _dom, _innerView, _updateValue, _app$1, _onHide, _shouldShow;
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$1, _provider, _dom, _innerView, _updateValue, _app$2, _onHide, _shouldShow;
 class LatexInlineTooltip {
-  constructor(ctx, view, config) {
+  constructor(ctx, view$1, config) {
     this.ctx = ctx;
-    __privateAdd$2(this, _content$1);
-    __privateAdd$2(this, _provider);
-    __privateAdd$2(this, _dom);
-    __privateAdd$2(this, _innerView, vue.shallowRef(null));
-    __privateAdd$2(this, _updateValue, vue.shallowRef(() => {
+    __privateAdd$3(this, _content$1);
+    __privateAdd$3(this, _provider);
+    __privateAdd$3(this, _dom);
+    __privateAdd$3(this, _innerView, vue.shallowRef(null));
+    __privateAdd$3(this, _updateValue, vue.shallowRef(() => {
     }));
-    __privateAdd$2(this, _app$1);
-    __privateAdd$2(this, _onHide, () => {
-      if (__privateGet$2(this, _innerView).value) {
-        __privateGet$2(this, _innerView).value.destroy();
-        __privateGet$2(this, _innerView).value = null;
+    __privateAdd$3(this, _app$2);
+    __privateAdd$3(this, _onHide, () => {
+      if (__privateGet$3(this, _innerView).value) {
+        __privateGet$3(this, _innerView).value.destroy();
+        __privateGet$3(this, _innerView).value = null;
       }
     });
-    __privateAdd$2(this, _shouldShow, (view) => {
+    __privateAdd$3(this, _shouldShow, (view$1) => {
       const shouldShow = () => {
-        const { selection, schema } = view.state;
+        if (!view$1.editable) return false;
+        const { selection, schema } = view$1.state;
         if (selection.empty) return false;
         if (!(selection instanceof state.NodeSelection)) return false;
         const node = selection.node;
@@ -1818,7 +3223,7 @@ class LatexInlineTooltip {
           null,
           schema.text(node.attrs.value)
         );
-        const innerView = new view$1.EditorView(__privateGet$2(this, _dom), {
+        const innerView = new view.EditorView(__privateGet$3(this, _dom), {
           state: state.EditorState.create({
             doc: paragraph,
             schema: new model.Schema({
@@ -1845,56 +3250,56 @@ class LatexInlineTooltip {
                 "Mod-Z": history.redo,
                 "Mod-y": history.redo,
                 Enter: () => {
-                  __privateGet$2(this, _updateValue).value();
+                  __privateGet$3(this, _updateValue).value();
                   return true;
                 }
               })
             ]
           })
         });
-        __privateGet$2(this, _innerView).value = innerView;
-        __privateGet$2(this, _updateValue).value = () => {
-          const { tr } = view.state;
+        __privateGet$3(this, _innerView).value = innerView;
+        __privateGet$3(this, _updateValue).value = () => {
+          const { tr } = view$1.state;
           tr.setNodeAttribute(textFrom, "value", innerView.state.doc.textContent);
-          view.dispatch(tr);
+          view$1.dispatch(tr);
           requestAnimationFrame(() => {
-            view.focus();
+            view$1.focus();
           });
         };
         return true;
       };
       const show = shouldShow();
-      if (!show) __privateGet$2(this, _onHide).call(this);
+      if (!show) __privateGet$3(this, _onHide).call(this);
       return show;
     });
     this.update = (view, prevState) => {
-      __privateGet$2(this, _provider).update(view, prevState);
+      __privateGet$3(this, _provider).update(view, prevState);
     };
     this.destroy = () => {
-      __privateGet$2(this, _app$1).unmount();
-      __privateGet$2(this, _provider).destroy();
-      __privateGet$2(this, _content$1).remove();
+      __privateGet$3(this, _app$2).unmount();
+      __privateGet$3(this, _provider).destroy();
+      __privateGet$3(this, _content$1).remove();
     };
     const content = document.createElement("div");
     content.className = "milkdown-latex-inline-edit";
-    __privateSet$2(this, _content$1, content);
-    __privateSet$2(this, _app$1, vue.createApp(LatexTooltip, {
+    __privateSet$3(this, _content$1, content);
+    __privateSet$3(this, _app$2, vue.createApp(LatexTooltip, {
       config,
-      innerView: __privateGet$2(this, _innerView),
-      updateValue: __privateGet$2(this, _updateValue)
+      innerView: __privateGet$3(this, _innerView),
+      updateValue: __privateGet$3(this, _updateValue)
     }));
-    __privateGet$2(this, _app$1).mount(content);
-    __privateSet$2(this, _provider, new tooltip.TooltipProvider({
+    __privateGet$3(this, _app$2).mount(content);
+    __privateSet$3(this, _provider, new tooltip.TooltipProvider({
       debounce: 0,
-      content: __privateGet$2(this, _content$1),
-      shouldShow: __privateGet$2(this, _shouldShow),
+      content: __privateGet$3(this, _content$1),
+      shouldShow: __privateGet$3(this, _shouldShow),
       offset: 10,
       floatingUIOptions: {
         placement: "bottom"
       }
     }));
-    __privateGet$2(this, _provider).update(view);
-    __privateSet$2(this, _dom, document.createElement("div"));
+    __privateGet$3(this, _provider).update(view$1);
+    __privateSet$3(this, _dom, document.createElement("div"));
   }
 }
 _content$1 = new WeakMap();
@@ -1902,7 +3307,7 @@ _provider = new WeakMap();
 _dom = new WeakMap();
 _innerView = new WeakMap();
 _updateValue = new WeakMap();
-_app$1 = new WeakMap();
+_app$2 = new WeakMap();
 _onHide = new WeakMap();
 _shouldShow = new WeakMap();
 
@@ -2031,7 +3436,7 @@ function createPlaceholderDecoration(state, placeholderText) {
   const inTable = prose.findParent((node2) => node2.type.name === "table")($pos);
   if (inTable) return null;
   const before = $pos.before();
-  return view$1.Decoration.node(before, before + node.nodeSize, {
+  return view.Decoration.node(before, before + node.nodeSize, {
     class: "crepe-placeholder",
     "data-placeholder": placeholderText
   });
@@ -2058,7 +3463,7 @@ const placeholderPlugin = utils.$prose((ctx) => {
         const placeholderText = (_a = config.text) != null ? _a : "Please enter...";
         const deco = createPlaceholderDecoration(state, placeholderText);
         if (!deco) return null;
-        return view$1.DecorationSet.create(state.doc, [deco]);
+        return view.DecorationSet.create(state.doc, [deco]);
       }
     }
   });
@@ -2107,8 +3512,8 @@ const table = (editor, config) => {
   }).use(tableBlock.tableBlock);
 };
 
-function getGroups(config, ctx) {
-  var _a, _b, _c, _d, _e, _f, _g;
+function getGroups$1(config, ctx) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const groupBuilder = new GroupBuilder();
   groupBuilder.addGroup("formatting", "Formatting").addItem("bold", {
     icon: (_a = config == null ? void 0 : config.boldIcon) != null ? _a : boldIcon,
@@ -2191,10 +3596,26 @@ function getGroups(config, ctx) {
       commands.call(linkTooltip$1.toggleLinkCommand.key);
     }
   });
-  (_g = config == null ? void 0 : config.buildToolbar) == null ? void 0 : _g.call(config, groupBuilder);
+  if (ctx && (flags == null ? void 0 : flags.includes(CrepeFeature.AI))) {
+    const aiCfg = ctx.get(aiProviderConfig.key);
+    if (aiCfg.provider) {
+      functionGroup.addItem("ai", {
+        icon: (_h = (_g = config == null ? void 0 : config.aiIcon) != null ? _g : aiCfg.aiIcon) != null ? _h : aiIcon,
+        active: () => false,
+        onRun: (ctx2) => {
+          const api = ctx2.get(aiInstructionTooltipAPI.key);
+          const view = ctx2.get(core.editorViewCtx);
+          const { from, to } = view.state.selection;
+          api.show(from, to);
+        }
+      });
+    }
+  }
+  (_i = config == null ? void 0 : config.buildToolbar) == null ? void 0 : _i.call(config, groupBuilder);
   return groupBuilder.build();
 }
 
+keepAlive(vue.h, vue.Fragment);
 const Toolbar = vue.defineComponent({
   props: {
     ctx: {
@@ -2222,15 +3643,17 @@ const Toolbar = vue.defineComponent({
     const { ctx, config } = props;
     const onClick = (fn) => (e) => {
       e.preventDefault();
-      ctx && fn(ctx);
+      if (ctx) {
+        fn == null ? void 0 : fn(ctx);
+      }
     };
     function checkActive(checker) {
-      props.selection.value;
+      keepAlive(props.selection.value);
       const status = ctx.get(core.editorCtx).status;
       if (status !== core.EditorStatus.Created) return false;
       return checker(ctx);
     }
-    const groupInfo = vue.computed(() => getGroups(config, ctx));
+    const groupInfo = vue.computed(() => getGroups$1(config, ctx));
     return () => {
       return /* @__PURE__ */ vue.h(vue.Fragment, null, groupInfo.value.map((group) => {
         return group.items.map((item) => {
@@ -2259,49 +3682,49 @@ const Toolbar = vue.defineComponent({
   }
 });
 
-var __typeError$1 = (msg) => {
+var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _tooltipProvider, _content, _app, _selection, _show;
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
+var _tooltipProvider, _content, _app$1, _selection, _show;
 const toolbarTooltip = tooltip.tooltipFactory("CREPE_TOOLBAR");
 class ToolbarView {
   constructor(ctx, view, config) {
-    __privateAdd$1(this, _tooltipProvider);
-    __privateAdd$1(this, _content);
-    __privateAdd$1(this, _app);
-    __privateAdd$1(this, _selection);
-    __privateAdd$1(this, _show, vue.ref(false));
+    __privateAdd$2(this, _tooltipProvider);
+    __privateAdd$2(this, _content);
+    __privateAdd$2(this, _app$1);
+    __privateAdd$2(this, _selection);
+    __privateAdd$2(this, _show, vue.ref(false));
     this.update = (view, prevState) => {
-      __privateGet$1(this, _tooltipProvider).update(view, prevState);
-      __privateGet$1(this, _selection).value = view.state.selection;
+      __privateGet$2(this, _tooltipProvider).update(view, prevState);
+      __privateGet$2(this, _selection).value = view.state.selection;
     };
     this.destroy = () => {
-      __privateGet$1(this, _tooltipProvider).destroy();
-      __privateGet$1(this, _app).unmount();
-      __privateGet$1(this, _content).remove();
+      __privateGet$2(this, _tooltipProvider).destroy();
+      __privateGet$2(this, _app$1).unmount();
+      __privateGet$2(this, _content).remove();
     };
     this.hide = () => {
-      __privateGet$1(this, _tooltipProvider).hide();
+      __privateGet$2(this, _tooltipProvider).hide();
     };
     const content = document.createElement("div");
     content.className = "milkdown-toolbar";
-    __privateSet$1(this, _selection, vue.shallowRef(view.state.selection));
+    __privateSet$2(this, _selection, vue.shallowRef(view.state.selection));
     const app = vue.createApp(Toolbar, {
       ctx,
       hide: this.hide,
       config,
-      selection: __privateGet$1(this, _selection),
-      show: __privateGet$1(this, _show)
+      selection: __privateGet$2(this, _selection),
+      show: __privateGet$2(this, _show)
     });
     app.mount(content);
-    __privateSet$1(this, _content, content);
-    __privateSet$1(this, _app, app);
-    __privateSet$1(this, _tooltipProvider, new tooltip.TooltipProvider({
-      content: __privateGet$1(this, _content),
+    __privateSet$2(this, _content, content);
+    __privateSet$2(this, _app$1, app);
+    __privateSet$2(this, _tooltipProvider, new tooltip.TooltipProvider({
+      content: __privateGet$2(this, _content),
       debounce: 20,
       offset: 10,
       shouldShow(view2) {
@@ -2318,18 +3741,18 @@ class ToolbarView {
         return true;
       }
     }));
-    __privateGet$1(this, _tooltipProvider).onShow = () => {
-      __privateGet$1(this, _show).value = true;
+    __privateGet$2(this, _tooltipProvider).onShow = () => {
+      __privateGet$2(this, _show).value = true;
     };
-    __privateGet$1(this, _tooltipProvider).onHide = () => {
-      __privateGet$1(this, _show).value = false;
+    __privateGet$2(this, _tooltipProvider).onHide = () => {
+      __privateGet$2(this, _show).value = false;
     };
     this.update(view);
   }
 }
 _tooltipProvider = new WeakMap();
 _content = new WeakMap();
-_app = new WeakMap();
+_app$1 = new WeakMap();
 _selection = new WeakMap();
 _show = new WeakMap();
 const toolbar = (editor, config) => {
@@ -2340,6 +3763,442 @@ const toolbar = (editor, config) => {
   }).use(toolbarTooltip);
 };
 
+const defaultHeadingOptions = [
+  { label: "Paragraph", level: null },
+  { label: "Heading 1", level: 1 },
+  { label: "Heading 2", level: 2 },
+  { label: "Heading 3", level: 3 },
+  { label: "Heading 4", level: 4 },
+  { label: "Heading 5", level: 5 },
+  { label: "Heading 6", level: 6 }
+];
+function getCurrentHeading(ctx, options) {
+  var _a, _b;
+  const headingOptions = options != null ? options : defaultHeadingOptions;
+  const view = ctx.get(core.editorViewCtx);
+  const { $from } = view.state.selection;
+  const node = $from.parent;
+  const paragraphOption = (_a = headingOptions.find((o) => o.level === null)) != null ? _a : headingOptions[0];
+  if (node.type === commonmark.headingSchema.type(ctx)) {
+    const level = node.attrs.level;
+    return (_b = headingOptions.find((o) => o.level === level)) != null ? _b : paragraphOption;
+  }
+  return paragraphOption;
+}
+function setHeading(ctx, level) {
+  const commands = ctx.get(core.commandsCtx);
+  if (level === null || level === void 0) {
+    const paragraph = commonmark.paragraphSchema.type(ctx);
+    commands.call(commonmark.setBlockTypeCommand.key, { nodeType: paragraph });
+  } else {
+    const heading = commonmark.headingSchema.type(ctx);
+    commands.call(commonmark.setBlockTypeCommand.key, {
+      nodeType: heading,
+      attrs: { level }
+    });
+  }
+}
+function isMarkActive(ctx, markType) {
+  const commands = ctx.get(core.commandsCtx);
+  const selected = commands.call(commonmark.isMarkSelectedCommand.key, markType);
+  if (selected) return true;
+  const view = ctx.get(core.editorViewCtx);
+  const { state: state$1 } = view;
+  if (state$1.storedMarks) {
+    return state$1.storedMarks.some((m) => m.type === markType);
+  }
+  if (state$1.selection instanceof state.TextSelection) {
+    const { $cursor } = state$1.selection;
+    if ($cursor) {
+      return $cursor.marks().some((m) => m.type === markType);
+    }
+  }
+  return false;
+}
+function buildHeadingSelector(headingOptions, chevronIcon) {
+  const options = headingOptions != null ? headingOptions : defaultHeadingOptions;
+  return {
+    icon: "",
+    active: () => false,
+    selector: {
+      chevronIcon: chevronIcon != null ? chevronIcon : chevronDownIcon,
+      activeLabel: (ctx) => getCurrentHeading(ctx, options).label,
+      options: options.map((opt) => ({
+        label: opt.label,
+        onSelect: (ctx) => setHeading(ctx, opt.level)
+      }))
+    }
+  };
+}
+function getGroups(config, ctx) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const flags = ctx && useCrepeFeatures(ctx).get();
+  const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
+  const isImageBlockEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.ImageBlock);
+  const isTableEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Table);
+  const groupBuilder = new GroupBuilder();
+  groupBuilder.addGroup("heading", "Heading").addItem("heading-selector", {
+    ...buildHeadingSelector(config == null ? void 0 : config.headingOptions, config == null ? void 0 : config.chevronDownIcon)
+  });
+  groupBuilder.addGroup("formatting", "Formatting").addItem("bold", {
+    icon: (_a = config == null ? void 0 : config.boldIcon) != null ? _a : boldIcon,
+    active: (ctx2) => isMarkActive(ctx2, commonmark.strongSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleStrongCommand.key);
+    }
+  }).addItem("italic", {
+    icon: (_b = config == null ? void 0 : config.italicIcon) != null ? _b : italicIcon,
+    active: (ctx2) => isMarkActive(ctx2, commonmark.emphasisSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleEmphasisCommand.key);
+    }
+  }).addItem("strikethrough", {
+    icon: (_c = config == null ? void 0 : config.strikethroughIcon) != null ? _c : strikethroughIcon,
+    active: (ctx2) => isMarkActive(ctx2, gfm.strikethroughSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(gfm.toggleStrikethroughCommand.key);
+    }
+  }).addItem("code", {
+    icon: (_d = config == null ? void 0 : config.codeIcon) != null ? _d : codeIcon,
+    active: (ctx2) => isMarkActive(ctx2, commonmark.inlineCodeSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const view = ctx2.get(core.editorViewCtx);
+      const { state } = view;
+      if (state.selection.empty) {
+        const markType = commonmark.inlineCodeSchema.type(ctx2);
+        const has = isMarkActive(ctx2, markType);
+        if (has) {
+          view.dispatch(state.tr.removeStoredMark(markType));
+        } else {
+          view.dispatch(state.tr.addStoredMark(markType.create()));
+        }
+      } else {
+        const commands = ctx2.get(core.commandsCtx);
+        commands.call(commonmark.toggleInlineCodeCommand.key);
+      }
+    }
+  });
+  groupBuilder.addGroup("list", "List").addItem("bullet-list", {
+    icon: (_e = config == null ? void 0 : config.bulletListIcon) != null ? _e : bulletListIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      const bulletList = commonmark.bulletListSchema.type(ctx2);
+      commands.call(commonmark.wrapInBlockTypeCommand.key, { nodeType: bulletList });
+    }
+  }).addItem("ordered-list", {
+    icon: (_f = config == null ? void 0 : config.orderedListIcon) != null ? _f : orderedListIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      const orderedList = commonmark.orderedListSchema.type(ctx2);
+      commands.call(commonmark.wrapInBlockTypeCommand.key, { nodeType: orderedList });
+    }
+  }).addItem("task-list", {
+    icon: (_g = config == null ? void 0 : config.taskListIcon) != null ? _g : todoListIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      const listItem = commonmark.listItemSchema.type(ctx2);
+      commands.call(commonmark.wrapInBlockTypeCommand.key, {
+        nodeType: listItem,
+        attrs: { checked: false }
+      });
+    }
+  });
+  const insertGroup = groupBuilder.addGroup("insert", "Insert");
+  insertGroup.addItem("link", {
+    icon: (_h = config == null ? void 0 : config.linkIcon) != null ? _h : linkIcon,
+    active: (ctx2) => isMarkActive(ctx2, commonmark.linkSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const view = ctx2.get(core.editorViewCtx);
+      const { state } = view;
+      const markType = commonmark.linkSchema.type(ctx2);
+      if (state.selection.empty && isMarkActive(ctx2, markType)) {
+        view.dispatch(state.tr.removeStoredMark(markType));
+        return;
+      }
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(linkTooltip$1.toggleLinkCommand.key);
+    }
+  });
+  if (isImageBlockEnabled) {
+    insertGroup.addItem("image", {
+      icon: (_i = config == null ? void 0 : config.imageIcon) != null ? _i : imageIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(core.commandsCtx);
+        const imageBlock = imageBlock$1.imageBlockSchema.type(ctx2);
+        commands.call(commonmark.addBlockTypeCommand.key, { nodeType: imageBlock });
+      }
+    });
+  }
+  if (isTableEnabled) {
+    insertGroup.addItem("table", {
+      icon: (_j = config == null ? void 0 : config.tableIcon) != null ? _j : tableIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(core.commandsCtx);
+        const view = ctx2.get(core.editorViewCtx);
+        const { from } = view.state.selection;
+        commands.call(commonmark.addBlockTypeCommand.key, {
+          nodeType: gfm.createTable(ctx2, 3, 3)
+        });
+        commands.call(commonmark.selectTextNearPosCommand.key, { pos: from });
+      }
+    });
+  }
+  const blockGroup = groupBuilder.addGroup("block", "Block");
+  blockGroup.addItem("code-block", {
+    icon: (_k = config == null ? void 0 : config.codeBlockIcon) != null ? _k : codeBlockIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      const codeBlock = commonmark.codeBlockSchema.type(ctx2);
+      commands.call(commonmark.setBlockTypeCommand.key, { nodeType: codeBlock });
+    }
+  });
+  if (isLatexEnabled) {
+    blockGroup.addItem("math", {
+      icon: (_l = config == null ? void 0 : config.mathIcon) != null ? _l : functionsIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(core.commandsCtx);
+        const codeBlock = commonmark.codeBlockSchema.type(ctx2);
+        commands.call(commonmark.addBlockTypeCommand.key, {
+          nodeType: codeBlock,
+          attrs: { language: "LaTeX" }
+        });
+      }
+    });
+  }
+  groupBuilder.addGroup("more", "More").addItem("quote", {
+    icon: (_m = config == null ? void 0 : config.quoteIcon) != null ? _m : quoteIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      const blockquote = commonmark.blockquoteSchema.type(ctx2);
+      commands.call(commonmark.wrapInBlockTypeCommand.key, { nodeType: blockquote });
+    }
+  }).addItem("hr", {
+    icon: (_n = config == null ? void 0 : config.hrIcon) != null ? _n : dividerIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      const hr = commonmark.hrSchema.type(ctx2);
+      commands.call(commonmark.addBlockTypeCommand.key, { nodeType: hr });
+    }
+  });
+  (_o = config == null ? void 0 : config.buildTopBar) == null ? void 0 : _o.call(config, groupBuilder);
+  return groupBuilder.build();
+}
+
+keepAlive(vue.h, vue.Fragment);
+const TopBar = vue.defineComponent({
+  props: {
+    ctx: {
+      type: Object,
+      required: true
+    },
+    version: {
+      type: Object,
+      required: true
+    },
+    config: {
+      type: Object,
+      required: false
+    }
+  },
+  setup(props) {
+    const { ctx, config } = props;
+    const openSelectorKey = vue.ref(null);
+    const onClick = (fn) => (e) => {
+      e.preventDefault();
+      if (ctx) {
+        fn(ctx);
+      }
+    };
+    function isReady() {
+      const status = ctx.get(core.editorCtx).status;
+      return status === core.EditorStatus.Created;
+    }
+    function subscribeState() {
+      keepAlive(props.version.value);
+    }
+    function checkActive(checker) {
+      subscribeState();
+      if (!isReady()) return false;
+      return checker(ctx);
+    }
+    function getSelectorLabel(selector) {
+      var _a, _b;
+      subscribeState();
+      if (!isReady()) return (_b = (_a = selector.options[0]) == null ? void 0 : _a.label) != null ? _b : "";
+      return selector.activeLabel(ctx);
+    }
+    function onToggleSelector(key, e) {
+      e.preventDefault();
+      e.stopPropagation();
+      openSelectorKey.value = openSelectorKey.value === key ? null : key;
+    }
+    const clickOutsideHandler = (e) => {
+      const target = e.target;
+      if (target.closest(".top-bar-heading-selector")) return;
+      openSelectorKey.value = null;
+    };
+    vue.onMounted(() => {
+      window.addEventListener("pointerdown", clickOutsideHandler);
+    });
+    vue.onUnmounted(() => {
+      window.removeEventListener("pointerdown", clickOutsideHandler);
+    });
+    const groupInfo = vue.computed(() => getGroups(config, ctx));
+    function renderSelector(itemKey, selector) {
+      const isOpen = openSelectorKey.value === itemKey;
+      const activeLabel = getSelectorLabel(selector);
+      return /* @__PURE__ */ vue.h("div", { key: itemKey, class: "top-bar-heading-selector" }, /* @__PURE__ */ vue.h(
+        "button",
+        {
+          type: "button",
+          class: "top-bar-heading-button",
+          onPointerdown: (e) => onToggleSelector(itemKey, e)
+        },
+        /* @__PURE__ */ vue.h("span", { class: "top-bar-heading-label" }, activeLabel),
+        selector.chevronIcon && /* @__PURE__ */ vue.h("span", { class: "top-bar-chevron" }, /* @__PURE__ */ vue.h(component.Icon, { icon: selector.chevronIcon }))
+      ), isOpen && /* @__PURE__ */ vue.h("div", { class: "top-bar-heading-dropdown" }, selector.options.map((option, index) => /* @__PURE__ */ vue.h(
+        "button",
+        {
+          key: `${itemKey}-${index}`,
+          type: "button",
+          class: clsx(
+            "top-bar-heading-option",
+            activeLabel === option.label && "active"
+          ),
+          onPointerdown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openSelectorKey.value = null;
+            option.onSelect(ctx);
+          }
+        },
+        option.label
+      ))));
+    }
+    function renderButton(item) {
+      return /* @__PURE__ */ vue.h(
+        "button",
+        {
+          key: item.key,
+          type: "button",
+          class: clsx("top-bar-item", checkActive(item.active) && "active"),
+          onPointerdown: onClick(item.onRun)
+        },
+        /* @__PURE__ */ vue.h(component.Icon, { icon: item.icon })
+      );
+    }
+    return () => {
+      const view = isReady() ? ctx.get(core.editorViewCtx) : null;
+      const isReadonly = view ? !view.editable : false;
+      if (isReadonly) return null;
+      return /* @__PURE__ */ vue.h("div", { class: "top-bar-inner" }, groupInfo.value.map((group) => {
+        return group.items.map((item) => {
+          if (item.selector) {
+            return renderSelector(item.key, item.selector);
+          }
+          if (!item.onRun) return null;
+          return renderButton(
+            item
+          );
+        });
+      }).reduce((acc, curr, index) => {
+        var _a, _b;
+        if (index === 0) {
+          acc.push(...curr);
+        } else {
+          const groupKey = (_b = (_a = groupInfo.value[index]) == null ? void 0 : _a.key) != null ? _b : index;
+          acc.push(
+            /* @__PURE__ */ vue.h("div", { key: `divider-${groupKey}`, class: "top-bar-divider" }),
+            ...curr
+          );
+        }
+        return acc;
+      }, []));
+    };
+  }
+});
+
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
+var _container, _app, _version;
+const topBarPluginKey = new state.PluginKey("CREPE_TOP_BAR");
+class TopBarView {
+  constructor(ctx, view, config) {
+    __privateAdd$1(this, _container);
+    __privateAdd$1(this, _app);
+    __privateAdd$1(this, _version);
+    this.update = (view, _prevState) => {
+      __privateGet$1(this, _container).style.display = view.editable ? "" : "none";
+      __privateGet$1(this, _version).value++;
+    };
+    this.destroy = () => {
+      __privateGet$1(this, _app).unmount();
+      __privateGet$1(this, _container).remove();
+    };
+    __privateSet$1(this, _version, vue.ref(0));
+    const container = document.createElement("div");
+    container.className = "milkdown-top-bar";
+    const app = vue.createApp(TopBar, {
+      ctx,
+      config,
+      version: __privateGet$1(this, _version)
+    });
+    app.mount(container);
+    __privateSet$1(this, _container, container);
+    __privateSet$1(this, _app, app);
+    const editorRoot = view.dom.parentElement;
+    if (editorRoot) {
+      editorRoot.insertBefore(container, editorRoot.firstChild);
+    }
+    this.update(view);
+  }
+}
+_container = new WeakMap();
+_app = new WeakMap();
+_version = new WeakMap();
+const topBarSlice = utils.$ctx(
+  {
+    view: () => ({
+      update: () => {
+      },
+      destroy: () => {
+      }
+    })
+  },
+  "topBarConfig"
+);
+const topBarPlugin = utils.$prose((ctx) => {
+  const config = ctx.get(topBarSlice.key);
+  return new state.Plugin({
+    key: topBarPluginKey,
+    view: config.view
+  });
+});
+const topBar = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.TopBar)).config((ctx) => {
+    ctx.set(topBarSlice.key, {
+      view: (view) => new TopBarView(ctx, view, config)
+    });
+  }).use(topBarSlice).use(topBarPlugin);
+};
+
 function loadFeature(feature, editor, config) {
   switch (feature) {
     case CrepeFeature.CodeMirror: {
@@ -2372,6 +4231,12 @@ function loadFeature(feature, editor, config) {
     case CrepeFeature.Latex: {
       return latex(editor, config);
     }
+    case CrepeFeature.TopBar: {
+      return topBar(editor, config);
+    }
+    case CrepeFeature.AI: {
+      return ai(editor, config);
+    }
   }
 }
 
@@ -2453,7 +4318,29 @@ class CrepeBuilder {
         ...value,
         size: 4
       }));
-    }).use(commonmark.commonmark).use(listener.listener).use(history$1.history).use(indent.indent).use(trailing.trailing).use(clipboard.clipboard).use(gfm.gfm));
+      ctx.update(upload.uploadConfig.key, (prev) => ({
+        ...prev,
+        uploader: async (files, schema, ctx2) => {
+          const features = useCrepeFeatures(ctx2).get();
+          const hasImageBlock = features.includes(CrepeFeature.ImageBlock);
+          const nodeType = hasImageBlock ? schema.nodes["image-block"] : schema.nodes["image"];
+          if (!nodeType) return [];
+          const onUpload = hasImageBlock ? ctx2.get(imageBlock$1.imageBlockConfig.key).onUpload : void 0;
+          const images = [];
+          for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            if (file && file.type.includes("image")) images.push(file);
+          }
+          const nodes = await Promise.all(
+            images.map(async (file) => {
+              const src = onUpload ? await onUpload(file) : URL.createObjectURL(file);
+              return nodeType.createAndFill({ src });
+            })
+          );
+          return nodes;
+        }
+      }));
+    }).use(commonmark.commonmark).use(listener.listener).use(history$1.history).use(indent.indent).use(trailing.trailing).use(clipboard.clipboard).use(upload.upload).use(gfm.gfm));
   }
   /// Get the milkdown editor instance.
   get editor() {