@estiva-app/ui 0.72.0-widgets2.1 → 0.72.0

package/dist/editor.js

@@ -7,7 +7,7 @@ import { IconBold, IconCode, IconItalic, IconLink, IconUnderline } from "@tabler
 import { Form } from "@estiva-app/ui";
 import { Popover } from "@estiva-app/ui";
 import { TextInput } from "@estiva-app/ui";
-import { Toolbar, ToolbarButton } from "@estiva-app/ui";
+import { Toolbar, ToolbarButton, ToolbarSeparator } from "@estiva-app/ui";
 import { shortcutLabel } from "@estiva-app/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var keptSelectionKey = new PluginKey("keptSelection");
@@ -83,7 +83,7 @@ var ICONS = {
 var SETTLE_MS = 250;
 var GAP = 8;
 var POPOVER_GAP = 4;
-function SelectionToolbar({ editor, marks = ["bold", "italic", "underline"], link = false, children }) {
+function SelectionToolbar({ editor, marks = ["bold", "italic", "underline"], link = false, children, actions = [] }) {
   const [anchor, setAnchor] = useState(null);
   const [mode, setMode] = useState("marks");
   const [url, setUrl] = useState("");
@@ -274,131 +274,42 @@ function SelectionToolbar({ editor, marks = ["bold", "italic", "underline"], lin
               children: /* @__PURE__ */ jsx(IconLink, { size: 16, stroke: 1.5 })
             }
           ),
-          children
+          children,
+          actions.length > 0 && /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+          actions.map((action) => /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              "aria-label": action.label,
+              tooltip: action.label,
+              tooltipShortcut: action.keys ? shortcutLabel(action.keys) : void 0,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                hide();
+                action.run(editor);
+              },
+              children: action.icon
+            },
+            action.label
+          ))
         ] })
       )
     }
   );
 }
 
-// src/PastedImages.ts
+// src/ComposeBox.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 import { Extension as Extension2 } from "@tiptap/core";
-import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
-var IMAGE_EXTENSIONS = {
-  "image/png": "png",
-  "image/jpeg": "jpg",
-  "image/gif": "gif",
-  "image/webp": "webp",
-  "image/heic": "heic",
-  "image/heif": "heif",
-  "image/svg+xml": "svg"
-};
-var GENERIC_STEMS = /* @__PURE__ */ new Set(["image", "blob", "unknown", "untitled", "screenshot"]);
-function extensionFor(contentType) {
-  const type = contentType.toLowerCase();
-  return IMAGE_EXTENSIONS[type] ?? type.split("/")[1]?.split("+")[0] ?? "png";
-}
-function pastedImageName(contentType, at = /* @__PURE__ */ new Date(), index = 0) {
-  const pad = (n) => String(n).padStart(2, "0");
-  const stamp = `${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())} ${pad(at.getHours())}-${pad(at.getMinutes())}-${pad(at.getSeconds())}`;
-  const nth = index > 0 ? ` (${index + 1})` : "";
-  return `Screenshot ${stamp}${nth}.${extensionFor(contentType)}`;
-}
-function hasUsableName(name) {
-  const dot = name.lastIndexOf(".");
-  if (dot <= 0 || dot === name.length - 1) return false;
-  return !GENERIC_STEMS.has(name.slice(0, dot).toLowerCase());
-}
-function pastedImages(source, at = /* @__PURE__ */ new Date()) {
-  if (!source) return [];
-  if (source.getData("text/plain").trim() !== "") return [];
-  const images = Array.from(source.files ?? []).filter((f) => f.type.toLowerCase().startsWith("image/"));
-  let generated = 0;
-  return images.map(
-    (file) => hasUsableName(file.name) ? file : new File([file], pastedImageName(file.type, at, generated++), { type: file.type, lastModified: file.lastModified })
-  );
-}
-var PastedImages = Extension2.create({
-  name: "pastedImages",
-  addOptions() {
-    return { onImages: () => false };
-  },
-  addProseMirrorPlugins() {
-    const options = this.options;
-    return [
-      new Plugin2({
-        key: new PluginKey2("pastedImages"),
-        props: {
-          handlePaste: (_view, event) => {
-            const files = pastedImages(event.clipboardData);
-            return files.length > 0 && options.onImages(files);
-          }
-        }
-      })
-    ];
-  }
-});
-
-// src/PastedMarkdown.ts
-import { Extension as Extension3 } from "@tiptap/core";
-import { Slice } from "@tiptap/pm/model";
-import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
-function inTableCell($context) {
-  for (let depth = $context.depth; depth > 0; depth--) {
-    const role = $context.node(depth).type.spec.tableRole;
-    if (role === "cell" || role === "header_cell") return true;
-  }
-  return false;
-}
-var hasTable = (blocks) => blocks.some((block) => block.type === "table" || hasTable(block.content ?? []));
-var PastedMarkdown = Extension3.create({
-  name: "pastedMarkdown",
-  addOptions() {
-    return { read: () => void 0 };
-  },
-  addProseMirrorPlugins() {
-    const options = this.options;
-    return [
-      new Plugin3({
-        key: new PluginKey3("pastedMarkdown"),
-        props: {
-          // Reached only for a text paste outside code; `plain` is the Shift paste.
-          clipboardTextParser: (text, $context, plain, view) => {
-            if (plain) return void 0;
-            try {
-              const blocks = options.read(text.replace(/\r\n?/g, "\n"))?.content ?? [];
-              if (blocks.every((block) => block.type === "paragraph")) return void 0;
-              if (inTableCell($context) && hasTable(blocks)) return void 0;
-              return Slice.maxOpen(view.state.schema.nodeFromJSON({ type: "doc", content: blocks }).content);
-            } catch {
-              return void 0;
-            }
-          }
-        }
-      })
-    ];
-  }
-});
-
-// src/CodeBlockColours.ts
-import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
-
-// src/codeColours.ts
-import { createElement } from "react";
-import { common, createLowlight } from "lowlight";
-var instance;
-function lowlight() {
-  return instance ??= createLowlight(common);
-}
+import { EditorContent } from "@tiptap/react";
+import { IconArrowUp } from "@tabler/icons-react";
+import { IconButton } from "@estiva-app/ui";
+import { Toolbar as Toolbar2 } from "@estiva-app/ui";
+import { cn } from "@estiva-app/ui";
+import { richTextClassName } from "@estiva-app/ui";
 
-// src/CodeBlockColours.ts
-var namedOnly = {
-  highlight: (language, value) => lowlight().highlight(language, value),
-  highlightAuto: (value) => ({ type: "root", children: [{ type: "text", value }], data: { language: void 0, relevance: 0 } }),
-  listLanguages: () => lowlight().listLanguages(),
-  registered: (language) => lowlight().registered(language)
-};
-var CodeBlockColours = CodeBlockLowlight.configure({ lowlight: namedOnly });
+// src/looks.ts
+var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
+var WRITING_BOX_CLASSES = "relative bg-bg-inset border border-border-default rounded-lg p-3 flex flex-col gap-4 signal:transition-shadow signal:focus-within:border-border-focus signal:focus-within:shadow-focus-ring";
 
 // src/suggestionPopup.tsx
 import { forwardRef, useRef as useRef2, useImperativeHandle } from "react";
@@ -512,6 +423,486 @@ function suggestionPopup(options) {
   };
 }
 
+// src/ComposeBox.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var COMPOSE_EDITOR_CLASSES = richTextClassName("default", "outline-none w-full bg-transparent min-h-[20px] [&>p+p]:-mt-1");
+var ComposeKeys = Extension2.create({
+  name: "composeKeys",
+  addStorage() {
+    return { send: null };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        if (isSuggestionActive()) return false;
+        this.storage.send?.();
+        return true;
+      },
+      "Shift-Enter": ({ editor }) => {
+        const { $from } = editor.state.selection;
+        for (let d = $from.depth; d > 0; d--) {
+          const node = $from.node(d);
+          if (node.type.name === "listItem") {
+            return node.textContent.length === 0 ? editor.commands.liftListItem("listItem") : editor.commands.splitListItem("listItem");
+          }
+          if (node.type.name === "blockquote") {
+            if ($from.parent.textContent.length === 0) return editor.commands.lift("paragraph");
+            break;
+          }
+        }
+        return editor.commands.splitBlock();
+      }
+    };
+  }
+});
+function isEmptyDoc(editor) {
+  const doc = editor.state.doc;
+  if (doc.textContent.length > 0) return false;
+  let empty = true;
+  doc.descendants((node) => {
+    if (node.isAtom && node.type.name !== "hardBreak") empty = false;
+  });
+  return empty;
+}
+function ComposeBox({ editor, onSend, placeholder, tools, attachments, ready = false, holding = false, marked = false, selection, className }) {
+  const [empty, setEmpty] = useState2(true);
+  const canSend = (!empty || ready) && !holding;
+  const send = useCallback2(() => {
+    if (!editor || holding || isEmptyDoc(editor) && !ready) return true;
+    if (onSend(editor) === false) return true;
+    editor.commands.clearContent(true);
+    editor.commands.focus();
+    return true;
+  }, [editor, holding, ready, onSend]);
+  useEffect2(() => {
+    if (!editor) return;
+    const storage = editor.storage.composeKeys;
+    if (!storage) return;
+    storage.send = send;
+    return () => {
+      storage.send = null;
+    };
+  }, [editor, send]);
+  useEffect2(() => {
+    if (!editor) return;
+    const read = () => setEmpty(isEmptyDoc(editor));
+    read();
+    editor.on("update", read);
+    return () => {
+      editor.off("update", read);
+    };
+  }, [editor]);
+  return /* @__PURE__ */ jsx3("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxs2("div", { className: cn(WRITING_BOX_CLASSES, "focus-within:border-border-strong transition-colors"), children: [
+    /* @__PURE__ */ jsxs2("div", { "data-composer-editor": true, className: cn("relative min-h-[20px] transition-all", marked && "border-l-4 border-border-strong pl-2"), children: [
+      /* @__PURE__ */ jsx3(EditorContent, { editor }),
+      /* @__PURE__ */ jsx3(SelectionToolbar, { editor, ...selection }),
+      empty && /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-0 flex flex-wrap items-center gap-1 text-body-2 text-text-muted", children: placeholder })
+    ] }),
+    attachments && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2", children: attachments }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+      tools ? /* @__PURE__ */ jsx3(Toolbar2, { "aria-label": "Compose tools", surface: false, className: "flex items-center gap-1", children: tools }) : /* @__PURE__ */ jsx3("span", {}),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ jsx3("span", { className: "hidden select-none font-mono text-menu font-normal tracking-wider text-text-muted signal:inline", children: "Enter to send \xB7 Shift+Enter new line" }),
+        /* @__PURE__ */ jsx3(
+          IconButton,
+          {
+            variant: "primary",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              send();
+            },
+            onClick: (e) => {
+              if (e.detail === 0) send();
+            },
+            disabled: !canSend,
+            "aria-label": "Send",
+            tooltip: "Send",
+            tooltipShortcut: "Enter",
+            glow: canSend,
+            children: /* @__PURE__ */ jsx3(IconArrowUp, { size: 16, stroke: 1.5 })
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/CommentHighlights.ts
+import { Extension as Extension3 } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
+var commentHighlightsKey = new PluginKey2("commentHighlights");
+var COMMENT_HIGHLIGHT_CLASSES = {
+  rest: "cursor-pointer rounded-sm bg-warning-muted",
+  active: "cursor-pointer rounded-sm bg-warning-muted underline decoration-warning-default decoration-2 underline-offset-4"
+};
+var QUOTE_WHOLE_MAX = 1e3;
+var QUOTE_END_LENGTH = 150;
+var QUOTE_CONTEXT_LENGTH = 32;
+function placesIn(doc) {
+  const places = /* @__PURE__ */ new Map();
+  const walk = (parent, parentPos) => {
+    parent.forEach((node, offset, index) => {
+      const pos = parentPos + offset;
+      const id = node.attrs.blockId;
+      if (typeof id === "string" && id && !places.has(id)) places.set(id, { node, pos, parent: parentPos, index });
+      if (!node.isTextblock && !node.isLeaf) walk(node, pos + 1);
+    });
+  };
+  walk(doc, 0);
+  return places;
+}
+function textOf(block) {
+  let text = "";
+  const starts = [];
+  const ends = [];
+  block.node.descendants((node, offset) => {
+    const at = block.pos + 1 + offset;
+    if (node.isText && node.text) {
+      for (let i = 0; i < node.text.length; i++) starts.push(at + i), ends.push(at + i + 1);
+      text += node.text;
+    } else if (node.isInline && node.isLeaf) {
+      const wire = typeof node.attrs.uri === "string" ? node.attrs.uri : "";
+      for (let i = 0; i < wire.length; i++) starts.push(at), ends.push(at + node.nodeSize);
+      text += wire;
+    }
+    return true;
+  });
+  return { text, starts, ends };
+}
+function find(text, words, from, context) {
+  let first = -1;
+  for (let at = text.indexOf(words, from); at !== -1; at = text.indexOf(words, at + 1)) {
+    if (first === -1) first = at;
+    if (context(at)) return at;
+  }
+  return first;
+}
+function runIn(doc, places, ids) {
+  const present = ids.map((id) => places.get(id)).filter((p) => !!p);
+  if (present.length === 0) return null;
+  const byParent = /* @__PURE__ */ new Map();
+  for (const p of present) byParent.set(p.parent, [...byParent.get(p.parent) ?? [], p]);
+  const group = [...byParent.values()].reduce((best, one) => one.length > best.length ? one : best);
+  const low = Math.min(...group.map((p) => p.index));
+  const high = Math.max(...group.map((p) => p.index));
+  const contentStart = group[0].parent;
+  const parent = contentStart === 0 ? doc : doc.nodeAt(contentStart - 1);
+  if (!parent) return group;
+  const run = [];
+  parent.forEach((node, offset, index) => {
+    if (index >= low && index <= high) run.push({ node, pos: contentStart + offset, parent: contentStart, index });
+  });
+  return run;
+}
+function placeOf(doc, anchor, places = placesIn(doc)) {
+  const run = runIn(doc, places, anchor.blocks);
+  if (!run) return { state: "detached" };
+  const from = run[0].pos;
+  const to = run[run.length - 1].pos + run[run.length - 1].node.nodeSize;
+  const { quote } = anchor;
+  if (!quote) return { state: "resolved", from, to, words: false };
+  const reworded = { state: "reworded", from, to };
+  const firstId = anchor.blocks[0];
+  const lastId = anchor.blocks[anchor.blocks.length - 1];
+  const first = run.findIndex((p) => p.node.attrs.blockId === firstId);
+  const last = run.findIndex((p) => p.node.attrs.blockId === lastId);
+  if (first === -1 || last === -1 || last < first) return reworded;
+  const a = textOf(run[first]);
+  const b = first === last ? a : textOf(run[last]);
+  const prefix = quote.prefix && quote.prefix.length <= QUOTE_CONTEXT_LENGTH ? quote.prefix : void 0;
+  const suffix = quote.suffix && quote.suffix.length <= QUOTE_CONTEXT_LENGTH ? quote.suffix : void 0;
+  const before = (text, i) => !prefix || text.slice(Math.max(0, i - prefix.length), i) === prefix;
+  const after = (text, i) => !suffix || text.slice(i, i + suffix.length) === suffix;
+  if (quote.end === void 0) {
+    const at = find(a.text, quote.start, 0, (i) => before(a.text, i) && after(a.text, i + quote.start.length));
+    if (at === -1 || quote.start === "") return reworded;
+    return { state: "resolved", from: a.starts[at], to: a.ends[at + quote.start.length - 1], words: true };
+  }
+  const startAt = find(a.text, quote.start, 0, (i) => before(a.text, i));
+  if (startAt === -1 || quote.start === "") return reworded;
+  const endFrom = first === last ? startAt + quote.start.length : 0;
+  const endAt = find(b.text, quote.end, endFrom, (i) => after(b.text, i + quote.end.length));
+  if (endAt === -1 || quote.end === "") return reworded;
+  return { state: "resolved", from: a.starts[startAt], to: b.ends[endAt + quote.end.length - 1], words: true };
+}
+var CommentHighlights = Extension3.create({
+  name: "commentHighlights",
+  addOptions() {
+    return { onSelect: null };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    const editor = this.editor;
+    return [
+      new Plugin2({
+        key: commentHighlightsKey,
+        state: {
+          init: () => ({ anchors: [], active: null }),
+          apply(tr, previous) {
+            const meta = tr.getMeta(commentHighlightsKey);
+            return meta ?? previous;
+          }
+        },
+        props: {
+          decorations(state) {
+            const { anchors, active } = commentHighlightsKey.getState(state) ?? { anchors: [], active: null };
+            const places = placesIn(state.doc);
+            const drawn = anchors.flatMap((anchor) => {
+              const place2 = placeOf(state.doc, anchor, places);
+              if (place2.state !== "resolved") return [];
+              const attrs = { class: anchor.id === active ? COMMENT_HIGHLIGHT_CLASSES.active : COMMENT_HIGHLIGHT_CLASSES.rest, "data-comment-id": anchor.id };
+              if (place2.words) return [Decoration2.inline(place2.from, place2.to, attrs)];
+              const blocks = [];
+              state.doc.nodesBetween(place2.from, place2.to, (node, pos) => {
+                if (pos < place2.from || pos + node.nodeSize > place2.to) return true;
+                blocks.push(Decoration2.node(pos, pos + node.nodeSize, attrs));
+                return false;
+              });
+              return blocks;
+            });
+            return drawn.length ? DecorationSet2.create(state.doc, drawn) : null;
+          },
+          handleClick(view, pos) {
+            const { anchors } = commentHighlightsKey.getState(view.state) ?? { anchors: [] };
+            const places = placesIn(view.state.doc);
+            let hit = null;
+            for (const anchor of anchors) {
+              const place2 = placeOf(view.state.doc, anchor, places);
+              if (place2.state !== "resolved" || pos < place2.from || pos >= place2.to) continue;
+              const size = place2.to - place2.from;
+              if (!hit || size < hit.size) hit = { id: anchor.id, size };
+            }
+            if (hit) {
+              options.onSelect?.(hit.id);
+              editor.emit("commentSelect", { id: hit.id });
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  }
+});
+function setCommentAnchors(editor, anchors, active = null) {
+  if (editor.isDestroyed) return;
+  editor.view.dispatch(editor.state.tr.setMeta(commentHighlightsKey, { anchors, active }));
+}
+function commentPlace(editor, anchor) {
+  return placeOf(editor.state.doc, anchor);
+}
+function commentElement(editor, anchor) {
+  const drawn = editor.view.dom.querySelector(`[data-comment-id="${CSS.escape(anchor.id)}"]`);
+  if (drawn) return drawn;
+  const place2 = placeOf(editor.state.doc, anchor);
+  if (place2.state === "detached") return null;
+  const dom = editor.view.nodeDOM(place2.from);
+  return dom instanceof HTMLElement ? dom : null;
+}
+function quoteText(quote) {
+  return quote.end ? `${quote.start} \u2026 ${quote.end}` : quote.start;
+}
+function headOf(text, length) {
+  if (text.length <= length) return text;
+  const cut = text.lastIndexOf(" ", length);
+  return text.slice(0, cut > length / 2 ? cut : length);
+}
+function tailOf(text, length) {
+  if (text.length <= length) return text;
+  const from = text.length - length;
+  const cut = text.indexOf(" ", from);
+  return text.slice(cut !== -1 && cut < from + length / 2 ? cut + 1 : from);
+}
+function occurrences(text, words) {
+  let count = 0;
+  for (let at = text.indexOf(words); words && at !== -1; at = text.indexOf(words, at + 1)) count++;
+  return count;
+}
+function offsetIn(block, pos) {
+  const at = block.starts.findIndex((start) => start >= pos);
+  return at === -1 ? block.starts.length : at;
+}
+function anchorOfSelection(editor) {
+  const { doc, selection } = editor.state;
+  if (selection.empty) return null;
+  const { $from, $to } = selection;
+  const places = placesIn(doc);
+  const around = (depth) => {
+    for (let d = depth; d > 0; d--) {
+      const id = $from.node(d).attrs.blockId;
+      if (typeof id === "string" && id && places.has(id)) return places.get(id);
+    }
+    return void 0;
+  };
+  let run;
+  if ($from.parent === $to.parent && $from.parent.isTextblock) {
+    const found = around($from.depth);
+    if (!found) return null;
+    run = [found];
+  } else {
+    const depth = $from.sharedDepth($to.pos);
+    const low = $from.index(depth);
+    const high = $to.pos >= $to.end(depth) ? $from.node(depth).childCount - 1 : $to.index(depth);
+    run = [];
+    for (let i = low; i <= high; i++) {
+      const id = $from.node(depth).child(i).attrs.blockId;
+      const place2 = typeof id === "string" ? places.get(id) : void 0;
+      if (!place2) {
+        const found = around(depth);
+        if (!found) return null;
+        run = [found];
+        break;
+      }
+      run.push(place2);
+    }
+  }
+  let firstText = textOf(run[0]);
+  let lastText = run.length === 1 ? firstText : textOf(run[run.length - 1]);
+  let start = offsetIn(firstText, selection.from);
+  let end = offsetIn(lastText, selection.to);
+  if (run.length > 1 && start >= firstText.text.length) run = run.slice(1), firstText = textOf(run[0]), start = 0;
+  if (run.length > 1 && end <= 0) run = run.slice(0, -1), lastText = textOf(run[run.length - 1]), end = lastText.text.length;
+  if (run.length === 1) lastText = firstText;
+  if (run.length === 1 && firstText.text && start >= end) return null;
+  const blocks = run.map((p) => p.node.attrs.blockId);
+  if (start === 0 && end >= lastText.text.length) return { blocks };
+  const single = run.length === 1;
+  const quote = { start: "" };
+  if (single && end - start <= QUOTE_WHOLE_MAX) {
+    quote.start = firstText.text.slice(start, end);
+  } else {
+    const startWords = single ? firstText.text.slice(start, end) : firstText.text.slice(start);
+    const endWords = single ? startWords : lastText.text.slice(0, end);
+    quote.start = headOf(startWords, QUOTE_END_LENGTH);
+    quote.end = tailOf(endWords, QUOTE_END_LENGTH);
+  }
+  if (!quote.start || quote.end === "") return { blocks };
+  const prefix = firstText.text.slice(Math.max(0, start - QUOTE_CONTEXT_LENGTH), start);
+  const suffix = lastText.text.slice(end, end + QUOTE_CONTEXT_LENGTH);
+  if (prefix && occurrences(firstText.text, quote.start) > 1) quote.prefix = prefix;
+  if (suffix && occurrences(lastText.text, quote.end ?? quote.start) > 1) quote.suffix = suffix;
+  return { blocks, quote };
+}
+
+// src/PastedImages.ts
+import { Extension as Extension4 } from "@tiptap/core";
+import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
+var IMAGE_EXTENSIONS = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/heic": "heic",
+  "image/heif": "heif",
+  "image/svg+xml": "svg"
+};
+var GENERIC_STEMS = /* @__PURE__ */ new Set(["image", "blob", "unknown", "untitled", "screenshot"]);
+function extensionFor(contentType) {
+  const type = contentType.toLowerCase();
+  return IMAGE_EXTENSIONS[type] ?? type.split("/")[1]?.split("+")[0] ?? "png";
+}
+function pastedImageName(contentType, at = /* @__PURE__ */ new Date(), index = 0) {
+  const pad = (n) => String(n).padStart(2, "0");
+  const stamp = `${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())} ${pad(at.getHours())}-${pad(at.getMinutes())}-${pad(at.getSeconds())}`;
+  const nth = index > 0 ? ` (${index + 1})` : "";
+  return `Screenshot ${stamp}${nth}.${extensionFor(contentType)}`;
+}
+function hasUsableName(name) {
+  const dot = name.lastIndexOf(".");
+  if (dot <= 0 || dot === name.length - 1) return false;
+  return !GENERIC_STEMS.has(name.slice(0, dot).toLowerCase());
+}
+function pastedImages(source, at = /* @__PURE__ */ new Date()) {
+  if (!source) return [];
+  if (source.getData("text/plain").trim() !== "") return [];
+  const images = Array.from(source.files ?? []).filter((f) => f.type.toLowerCase().startsWith("image/"));
+  let generated = 0;
+  return images.map(
+    (file) => hasUsableName(file.name) ? file : new File([file], pastedImageName(file.type, at, generated++), { type: file.type, lastModified: file.lastModified })
+  );
+}
+var PastedImages = Extension4.create({
+  name: "pastedImages",
+  addOptions() {
+    return { onImages: () => false };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    return [
+      new Plugin3({
+        key: new PluginKey3("pastedImages"),
+        props: {
+          handlePaste: (_view, event) => {
+            const files = pastedImages(event.clipboardData);
+            return files.length > 0 && options.onImages(files);
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/PastedMarkdown.ts
+import { Extension as Extension5 } from "@tiptap/core";
+import { Slice } from "@tiptap/pm/model";
+import { Plugin as Plugin4, PluginKey as PluginKey4 } from "@tiptap/pm/state";
+function inTableCell($context) {
+  for (let depth = $context.depth; depth > 0; depth--) {
+    const role = $context.node(depth).type.spec.tableRole;
+    if (role === "cell" || role === "header_cell") return true;
+  }
+  return false;
+}
+var hasTable = (blocks) => blocks.some((block) => block.type === "table" || hasTable(block.content ?? []));
+var PastedMarkdown = Extension5.create({
+  name: "pastedMarkdown",
+  addOptions() {
+    return { read: () => void 0 };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    return [
+      new Plugin4({
+        key: new PluginKey4("pastedMarkdown"),
+        props: {
+          // Reached only for a text paste outside code; `plain` is the Shift paste.
+          clipboardTextParser: (text, $context, plain, view) => {
+            if (plain) return void 0;
+            try {
+              const blocks = options.read(text.replace(/\r\n?/g, "\n"))?.content ?? [];
+              if (blocks.every((block) => block.type === "paragraph")) return void 0;
+              if (inTableCell($context) && hasTable(blocks)) return void 0;
+              return Slice.maxOpen(view.state.schema.nodeFromJSON({ type: "doc", content: blocks }).content);
+            } catch {
+              return void 0;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/CodeBlockColours.ts
+import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
+
+// src/codeColours.ts
+import { createElement } from "react";
+import { common, createLowlight } from "lowlight";
+var instance;
+function lowlight() {
+  return instance ??= createLowlight(common);
+}
+
+// src/CodeBlockColours.ts
+var namedOnly = {
+  highlight: (language, value) => lowlight().highlight(language, value),
+  highlightAuto: (value) => ({ type: "root", children: [{ type: "text", value }], data: { language: void 0, relevance: 0 } }),
+  listLanguages: () => lowlight().listLanguages(),
+  registered: (language) => lowlight().registered(language)
+};
+var CodeBlockColours = CodeBlockLowlight.configure({ lowlight: namedOnly });
+
 // src/EditorBlockHandle.tsx
 import { useMemo } from "react";
 import { IconCopy, IconTrash } from "@tabler/icons-react";
@@ -520,15 +911,16 @@ import { Selection } from "@tiptap/pm/state";
 import { MenuItem, MenuSub } from "@estiva-app/ui";
 
 // src/ComposerTriggers.tsx
-import { Extension as Extension4 } from "@tiptap/core";
-import { PluginKey as PluginKey4 } from "@tiptap/pm/state";
+import { Extension as Extension6 } from "@tiptap/core";
+import { PluginKey as PluginKey5 } from "@tiptap/pm/state";
 import Mention from "@tiptap/extension-mention";
 import Suggestion from "@tiptap/suggestion";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import { Avatar } from "@estiva-app/ui";
 import { EnterHint } from "@estiva-app/ui";
 import { inlineChipClassName } from "@estiva-app/ui";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { WithTooltip } from "@estiva-app/ui";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var PEOPLE_LIMIT = 6;
 function filterPeople(people, query) {
   const q = query.toLowerCase();
@@ -546,8 +938,8 @@ function peopleMenu(urgent) {
     row: (person) => ({
       label: person.name,
       description: person.description,
-      leading: person.avatar ?? /* @__PURE__ */ jsx3(Avatar, { size: 32, alt: person.name }),
-      hint: /* @__PURE__ */ jsx3(EnterHint, {}),
+      leading: person.avatar ?? /* @__PURE__ */ jsx4(Avatar, { size: 32, alt: person.name }),
+      hint: /* @__PURE__ */ jsx4(EnterHint, {}),
       size: "tall"
     })
   };
@@ -674,10 +1066,13 @@ var CaptionedReference = Mention.extend({
   addNodeView() {
     const { icon, iconFor } = this.options;
     return ReactNodeViewRenderer(
-      ({ node }) => /* @__PURE__ */ jsxs2(NodeViewWrapper, { as: "span", className: inlineChipClassName("neutral", "max-w-[24ch] cursor-default"), children: [
-        /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary", children: iconFor?.(node.attrs.uri ?? null) ?? icon }),
-        /* @__PURE__ */ jsx3("span", { className: "truncate", children: captionOf(node.attrs.label, node.attrs.snippet) })
-      ] }),
+      ({ node }) => (
+        // The caption is cut at 24ch, so the whole of it is on hover, in the package's tooltip (UIG-14) — as Peek's sent chip has it.
+        /* @__PURE__ */ jsx4(NodeViewWrapper, { as: "span", children: /* @__PURE__ */ jsx4(WithTooltip, { inline: true, label: captionOf(node.attrs.label, node.attrs.snippet), children: /* @__PURE__ */ jsxs3("span", { className: inlineChipClassName("neutral", "max-w-[24ch] cursor-default"), children: [
+          /* @__PURE__ */ jsx4("span", { className: "flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary", children: iconFor?.(node.attrs.uri ?? null) ?? icon }),
+          /* @__PURE__ */ jsx4("span", { className: "truncate", children: captionOf(node.attrs.label, node.attrs.snippet) })
+        ] }) }) })
+      ),
       { as: "span" }
     );
   }
@@ -698,11 +1093,11 @@ function referenceMenu({ ariaLabel, sectionLabel, icon, iconFor }) {
       return groups;
     },
     itemKey: (item) => `reference-${item.id}`,
-    row: (item) => ({ leading: item.icon ?? iconFor?.(item.uri) ?? icon, label: captionOf(item.label, item.snippet), description: item.description, hint: /* @__PURE__ */ jsx3(EnterHint, {}) })
+    row: (item) => ({ leading: item.icon ?? iconFor?.(item.uri) ?? icon, label: captionOf(item.label, item.snippet), description: item.description, hint: /* @__PURE__ */ jsx4(EnterHint, {}) })
   };
 }
 var listed = (options, query) => options.sections ? options.sections(query).flatMap((section) => section.items.map((item) => ({ ...item, section: section.label }))) : filterReferences(options.items(), query);
-var ReferenceTrigger = Extension4.create({
+var ReferenceTrigger = Extension6.create({
   name: "referenceTrigger",
   addOptions() {
     return { items: () => [], nodeName: "captionedReference", ariaLabel: "References", sectionLabel: "References", icon: null };
@@ -713,7 +1108,7 @@ var ReferenceTrigger = Extension4.create({
       Suggestion({
         editor: this.editor,
         char: "[",
-        pluginKey: new PluginKey4("referenceTrigger"),
+        pluginKey: new PluginKey5("referenceTrigger"),
         ...listening("]"),
         // As a mention's: only where the chip may go.
         allow: ({ state, range }) => {
@@ -818,7 +1213,7 @@ function filterSlashSections(sections, query) {
   const q = query.toLowerCase();
   return sections.map((section) => ({ ...section, commands: q ? section.commands.filter((command) => matches(command, q)) : section.commands }));
 }
-var SlashCommands = Extension4.create({
+var SlashCommands = Extension6.create({
   name: "slashCommands",
   addOptions() {
     return { sections: [formatSection()] };
@@ -830,7 +1225,7 @@ var SlashCommands = Extension4.create({
         editor: this.editor,
         char: "/",
         startOfLine: false,
-        pluginKey: new PluginKey4("slashCommands"),
+        pluginKey: new PluginKey5("slashCommands"),
         items: ({ query, editor }) => filterSlashSections(sections, query).flatMap(
           (section, at) => section.commands.filter((command) => offers(editor, command)).map((command) => ({ ...command, section: at }))
         ),
@@ -852,7 +1247,7 @@ var SlashCommands = Extension4.create({
 });
 
 // src/EditorBlockHandle.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function editorBlocks(view) {
   const out = [];
   view.state.doc.forEach((node, pos) => {
@@ -919,8 +1314,8 @@ function EditorBlockHandle({ editor, turnInto = turnIntoRows, actions, children,
         const node = pos === void 0 ? null : editor.state.doc.nodeAt(pos);
         if (pos === void 0 || !node) return null;
         const turnRows = typeof turnInto === "function" ? turnInto(node, editor) : node.isTextblock ? turnInto : [];
-        return /* @__PURE__ */ jsxs3(Fragment, { children: [
-          turnRows.length > 0 && /* @__PURE__ */ jsx4(MenuSub, { label: "Turn into", children: turnRows.map((row) => /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsxs4(Fragment, { children: [
+          turnRows.length > 0 && /* @__PURE__ */ jsx5(MenuSub, { label: "Turn into", children: turnRows.map((row) => /* @__PURE__ */ jsx5(
             MenuItem,
             {
               label: row.label,
@@ -932,8 +1327,8 @@ function EditorBlockHandle({ editor, turnInto = turnIntoRows, actions, children,
             },
             row.label
           )) }),
-          /* @__PURE__ */ jsx4(MenuItem, { label: "Duplicate", leading: /* @__PURE__ */ jsx4(IconCopy, { size: 16, stroke: 1.5, className: "text-text-secondary" }), onClick: () => duplicateBlock(editor, pos) }),
-          /* @__PURE__ */ jsx4(MenuItem, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx4(IconTrash, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: () => deleteBlock(editor, pos) })
+          /* @__PURE__ */ jsx5(MenuItem, { label: "Duplicate", leading: /* @__PURE__ */ jsx5(IconCopy, { size: 16, stroke: 1.5, className: "text-text-secondary" }), onClick: () => duplicateBlock(editor, pos) }),
+          /* @__PURE__ */ jsx5(MenuItem, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx5(IconTrash, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: () => deleteBlock(editor, pos) })
         ] });
       },
       startDrag: (block, event) => {
@@ -955,7 +1350,7 @@ function EditorBlockHandle({ editor, turnInto = turnIntoRows, actions, children,
       }
     };
   }, [editor, turnInto]);
-  return /* @__PURE__ */ jsx4(BlockHandle, { editing, actions, className, children });
+  return /* @__PURE__ */ jsx5(BlockHandle, { editing, actions, className, children });
 }
 var LISTS = ["bulletList", "orderedList"];
 var isList = (node) => LISTS.includes(node.type.name);
@@ -1061,19 +1456,14 @@ function turnIntoRows(node, editor) {
 }
 
 // src/EditorTableControls.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { TextSelection } from "@tiptap/pm/state";
 import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, deleteColumn, deleteRow, deleteTable, toggleHeader } from "@tiptap/pm/tables";
 import { IconColumnInsertLeft, IconColumnInsertRight, IconGripHorizontal, IconGripVertical, IconPlus, IconRowInsertBottom, IconRowInsertTop, IconTrash as IconTrash2 } from "@tabler/icons-react";
-import { cn } from "@estiva-app/ui";
-import { IconButton } from "@estiva-app/ui";
-
-// src/looks.ts
-var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
-
-// src/EditorTableControls.tsx
+import { cn as cn2 } from "@estiva-app/ui";
+import { IconButton as IconButton2 } from "@estiva-app/ui";
 import { Menu, MenuItem as MenuItem2, MenuSeparator } from "@estiva-app/ui";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function inCell(editor, cell, command) {
   const { view } = editor;
   if (!view.dom.contains(cell)) return false;
@@ -1119,13 +1509,13 @@ function place(frame, { table, row, cell }) {
 }
 var ICON = { size: 16, stroke: 1.5, className: "text-text-secondary" };
 var keepFocus = (e) => e.preventDefault();
-var HANDLE_BOX = cn(FLOATING_SURFACE_CLASSES, "shadow-none");
+var HANDLE_BOX = cn2(FLOATING_SURFACE_CLASSES, "shadow-none");
 function EditorTableControls({ editor, children, className }) {
   const frame = useRef3(null);
-  const [hovered, setHovered] = useState2(null);
-  const [menu, setMenu] = useState2(null);
+  const [hovered, setHovered] = useState3(null);
+  const [menu, setMenu] = useState3(null);
   const editable = !!editor && editor.isEditable;
-  const follow = useCallback2(
+  const follow = useCallback3(
     (target) => {
       if (!editor || !frame.current || !(target instanceof Element)) return;
       if (target.closest("[data-table-control]")) return;
@@ -1141,7 +1531,7 @@ function EditorTableControls({ editor, children, className }) {
     },
     [editor]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor) return;
     const changed = ({ transaction }) => {
       if (transaction.docChanged && !menu) setHovered(null);
@@ -1157,11 +1547,11 @@ function EditorTableControls({ editor, children, className }) {
     setMenu(null);
     setHovered(null);
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: frame,
-      className: cn("relative", className),
+      className: cn2("relative", className),
       onMouseMove: (e) => {
         if (!menu) follow(e.target);
       },
@@ -1170,39 +1560,39 @@ function EditorTableControls({ editor, children, className }) {
       },
       children: [
         children,
-        shown && editor && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          /* @__PURE__ */ jsx5("div", { "data-table-control": true, className: cn(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.tableBox.left, top: shown.rowBox.top + shown.rowBox.height / 2 }, children: /* @__PURE__ */ jsxs4(
+        shown && editor && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.tableBox.left, top: shown.rowBox.top + shown.rowBox.height / 2 }, children: /* @__PURE__ */ jsxs5(
             Menu,
             {
               open: menu === "row",
               onOpenChange: (open) => setMenu(open ? "row" : null),
-              trigger: /* @__PURE__ */ jsx5(IconButton, { "aria-label": "Row menu", tooltip: "Row", className: "h-6 w-4 p-0", children: /* @__PURE__ */ jsx5(IconGripVertical, { size: 16, stroke: 1.5 }) }),
+              trigger: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Row menu", tooltip: "Row", className: "h-6 w-4 p-0", children: /* @__PURE__ */ jsx6(IconGripVertical, { size: 16, stroke: 1.5 }) }),
               children: [
-                !isHeaderRow(shown.row) && /* @__PURE__ */ jsx5(MenuItem2, { label: "Insert above", leading: /* @__PURE__ */ jsx5(IconRowInsertTop, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowBefore)) }),
-                /* @__PURE__ */ jsx5(MenuItem2, { label: "Insert below", leading: /* @__PURE__ */ jsx5(IconRowInsertBottom, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowAfter)) }),
-                /* @__PURE__ */ jsx5(MenuSeparator, {}),
-                /* @__PURE__ */ jsx5(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx5(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableRow(editor, shown.cell)) }),
-                /* @__PURE__ */ jsx5(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx5(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
+                !isHeaderRow(shown.row) && /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert above", leading: /* @__PURE__ */ jsx6(IconRowInsertTop, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowBefore)) }),
+                /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert below", leading: /* @__PURE__ */ jsx6(IconRowInsertBottom, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowAfter)) }),
+                /* @__PURE__ */ jsx6(MenuSeparator, {}),
+                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableRow(editor, shown.cell)) }),
+                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx5("div", { "data-table-control": true, className: cn(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.columnBox.left + shown.columnBox.width / 2, top: shown.tableBox.top }, children: /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.columnBox.left + shown.columnBox.width / 2, top: shown.tableBox.top }, children: /* @__PURE__ */ jsxs5(
             Menu,
             {
               open: menu === "column",
               onOpenChange: (open) => setMenu(open ? "column" : null),
-              trigger: /* @__PURE__ */ jsx5(IconButton, { "aria-label": "Column menu", tooltip: "Column", className: "h-4 w-6 p-0", children: /* @__PURE__ */ jsx5(IconGripHorizontal, { size: 16, stroke: 1.5 }) }),
+              trigger: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Column menu", tooltip: "Column", className: "h-4 w-6 p-0", children: /* @__PURE__ */ jsx6(IconGripHorizontal, { size: 16, stroke: 1.5 }) }),
               children: [
-                /* @__PURE__ */ jsx5(MenuItem2, { label: "Insert left", leading: /* @__PURE__ */ jsx5(IconColumnInsertLeft, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnBefore)) }),
-                /* @__PURE__ */ jsx5(MenuItem2, { label: "Insert right", leading: /* @__PURE__ */ jsx5(IconColumnInsertRight, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnAfter)) }),
-                /* @__PURE__ */ jsx5(MenuSeparator, {}),
-                /* @__PURE__ */ jsx5(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx5(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableColumn(editor, shown.cell)) }),
-                /* @__PURE__ */ jsx5(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx5(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
+                /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert left", leading: /* @__PURE__ */ jsx6(IconColumnInsertLeft, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnBefore)) }),
+                /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert right", leading: /* @__PURE__ */ jsx6(IconColumnInsertRight, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnAfter)) }),
+                /* @__PURE__ */ jsx6(MenuSeparator, {}),
+                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableColumn(editor, shown.cell)) }),
+                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
               ]
             }
           ) }),
-          shown.row === shown.table.rows[shown.table.rows.length - 1] && /* @__PURE__ */ jsx5("div", { "data-table-control": true, className: cn(HANDLE_BOX, "absolute flex h-4"), style: { left: shown.tableBox.left, top: shown.tableBox.top + shown.tableBox.height, width: shown.tableBox.width }, children: /* @__PURE__ */ jsx5(IconButton, { "aria-label": "Add row", tooltip: "Add row", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableRow(editor, shown.table)), children: /* @__PURE__ */ jsx5(IconPlus, { size: 12, stroke: 1.5 }) }) }),
-          shown.cell === shown.row.cells[shown.row.cells.length - 1] && /* @__PURE__ */ jsx5("div", { "data-table-control": true, className: cn(HANDLE_BOX, "absolute flex w-4"), style: { left: shown.tableBox.left + shown.tableBox.width, top: shown.tableBox.top, height: shown.tableBox.height }, children: /* @__PURE__ */ jsx5(IconButton, { "aria-label": "Add column", tooltip: "Add column", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableColumn(editor, shown.table)), children: /* @__PURE__ */ jsx5(IconPlus, { size: 12, stroke: 1.5 }) }) })
+          shown.row === shown.table.rows[shown.table.rows.length - 1] && /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute flex h-4"), style: { left: shown.tableBox.left, top: shown.tableBox.top + shown.tableBox.height, width: shown.tableBox.width }, children: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Add row", tooltip: "Add row", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableRow(editor, shown.table)), children: /* @__PURE__ */ jsx6(IconPlus, { size: 12, stroke: 1.5 }) }) }),
+          shown.cell === shown.row.cells[shown.row.cells.length - 1] && /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute flex w-4"), style: { left: shown.tableBox.left + shown.tableBox.width, top: shown.tableBox.top, height: shown.tableBox.height }, children: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Add column", tooltip: "Add column", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableColumn(editor, shown.table)), children: /* @__PURE__ */ jsx6(IconPlus, { size: 12, stroke: 1.5 }) }) })
         ] })
       ]
     }
@@ -1210,27 +1600,27 @@ function EditorTableControls({ editor, children, className }) {
 }
 
 // src/BlockNodes.tsx
-import { Extension as Extension8, InputRule, Node as Node2 } from "@tiptap/core";
+import { Extension as Extension10, InputRule, Node as Node2 } from "@tiptap/core";
 import { DOMSerializer } from "@tiptap/pm/model";
-import { Plugin as Plugin7, PluginKey as PluginKey8 } from "@tiptap/pm/state";
+import { Plugin as Plugin8, PluginKey as PluginKey9 } from "@tiptap/pm/state";
 import { Mapping, ReplaceAroundStep } from "@tiptap/pm/transform";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2, ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { Checkbox } from "@estiva-app/ui";
 import { calloutLook } from "@estiva-app/ui";
 
 // src/ReferenceMenu.tsx
-import { useCallback as useCallback3 } from "react";
-import { Extension as Extension7 } from "@tiptap/core";
+import { useCallback as useCallback4 } from "react";
+import { Extension as Extension9 } from "@tiptap/core";
 import { useEditorState } from "@tiptap/react";
-import { NodeSelection as NodeSelection2, Plugin as Plugin6, PluginKey as PluginKey7, TextSelection as TextSelection2 } from "@tiptap/pm/state";
+import { NodeSelection as NodeSelection2, Plugin as Plugin7, PluginKey as PluginKey8, TextSelection as TextSelection2 } from "@tiptap/pm/state";
 import { ReplaceStep } from "@tiptap/pm/transform";
 import { IconCheck } from "@tabler/icons-react";
 
 // src/LinkChips.ts
-import { Extension as Extension5 } from "@tiptap/core";
+import { Extension as Extension7 } from "@tiptap/core";
 import { closeHistory } from "@tiptap/pm/history";
-import { Plugin as Plugin4, PluginKey as PluginKey5 } from "@tiptap/pm/state";
-var key = new PluginKey5("linkChips");
+import { Plugin as Plugin5, PluginKey as PluginKey6 } from "@tiptap/pm/state";
+var key = new PluginKey6("linkChips");
 var CHIPS_MADE = "linkChipsMade";
 var PASTES_KEPT = 8;
 var LINK_OR_URL = /(\[[^[\]\n]+\]\((?:https?:\/\/|mailto:)[^\s)]+\))|(https?:\/\/[^\s<>"'`]+)/g;
@@ -1305,7 +1695,7 @@ function refreshLinkChips(editor) {
   const tr = apply(editor.state, findLinkChips(editor.state.doc, editor.state.selection, chips.options.referenceOf, chips.pasted));
   if (tr) editor.view.dispatch(tr);
 }
-var LinkChips = Extension5.create({
+var LinkChips = Extension7.create({
   name: "linkChips",
   addOptions() {
     return { referenceOf: null, ask: null, limit: 24 };
@@ -1314,7 +1704,7 @@ var LinkChips = Extension5.create({
     const options = this.options;
     const editor = this.editor;
     return [
-      new Plugin4({
+      new Plugin5({
         key,
         // The options, where `refreshLinkChips` can read them from the state alone, and where the last pastes landed.
         state: {
@@ -1378,10 +1768,10 @@ import { MenuItem as MenuItem3, MenuSection, MenuSeparator as MenuSeparator2 } f
 import { Popover as Popover2 } from "@estiva-app/ui";
 
 // src/ReferenceCards.ts
-import { Extension as Extension6 } from "@tiptap/core";
-import { NodeSelection, Plugin as Plugin5, PluginKey as PluginKey6 } from "@tiptap/pm/state";
-import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { Extension as Extension8 } from "@tiptap/core";
+import { NodeSelection, Plugin as Plugin6, PluginKey as PluginKey7 } from "@tiptap/pm/state";
+import { Decoration as Decoration3, DecorationSet as DecorationSet3 } from "@tiptap/pm/view";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 function layoutOf(raw) {
   if (typeof raw !== "string" || raw === "" || raw === "none") return void 0;
   return raw === "detailed" ? "detailed" : "compact";
@@ -1408,7 +1798,7 @@ function referenceCardPlacements(doc) {
   });
   return out;
 }
-var key2 = new PluginKey6("referenceCards");
+var key2 = new PluginKey7("referenceCards");
 function elementFor(storage, slotKey) {
   let element = storage.elements.get(slotKey);
   if (!element) {
@@ -1422,17 +1812,17 @@ function elementFor(storage, slotKey) {
 function storageOf(editor) {
   return editor.storage.referenceCards;
 }
-var ReferenceCards = Extension6.create({
+var ReferenceCards = Extension8.create({
   name: "referenceCards",
   addStorage() {
     return { elements: /* @__PURE__ */ new Map() };
   },
   addProseMirrorPlugins() {
     const storage = this.storage;
-    const decorate = (doc) => DecorationSet2.create(
+    const decorate = (doc) => DecorationSet3.create(
       doc,
       referenceCardPlacements(doc).map(
-        (p) => Decoration2.widget(p.pos, () => elementFor(storage, p.key), {
+        (p) => Decoration3.widget(p.pos, () => elementFor(storage, p.key), {
           key: p.key,
           side: 1,
           ignoreSelection: true,
@@ -1442,7 +1832,7 @@ var ReferenceCards = Extension6.create({
       )
     );
     return [
-      new Plugin5({
+      new Plugin6({
         key: key2,
         state: {
           init: (_, state) => decorate(state.doc),
@@ -1454,8 +1844,8 @@ var ReferenceCards = Extension6.create({
   }
 });
 function useReferenceCards(editor) {
-  const [slots, setSlots] = useState3([]);
-  useEffect3(() => {
+  const [slots, setSlots] = useState4([]);
+  useEffect4(() => {
     if (!editor) return;
     const storage = storageOf(editor);
     if (!storage) return;
@@ -1520,8 +1910,8 @@ function setReferenceCardAt(editor, pos, layout) {
 }
 
 // src/ReferenceMenu.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var key3 = new PluginKey7("referenceMenu");
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var key3 = new PluginKey8("referenceMenu");
 var LAYOUTS = [
   { layout: "none", label: "None" },
   { layout: "compact", label: "Compact" },
@@ -1600,14 +1990,14 @@ function caretAfter(state, pos) {
   const node = state.doc.nodeAt(pos);
   return state.tr.setSelection(TextSelection2.create(state.doc, pos + (node?.nodeSize ?? 1)));
 }
-var ReferenceMenu = Extension7.create({
+var ReferenceMenu = Extension9.create({
   name: "referenceMenu",
   // Before the editor's own keys, so Enter on a highlighted row is the row's, not a new line.
   priority: 1e3,
   addProseMirrorPlugins() {
     const editor = this.editor;
     return [
-      new Plugin6({
+      new Plugin7({
         key: key3,
         state: {
           init: () => null,
@@ -1682,7 +2072,7 @@ function ReferenceMenuView({ editor }) {
       return { pos: open.pos, active: open.active, named: !!node.attrs.uri, layout };
     }
   });
-  const keepFocus2 = useCallback3((list) => {
+  const keepFocus2 = useCallback4((list) => {
     const panel = list?.closest('[role="dialog"]');
     if (!panel) return;
     const keep = (event) => event.preventDefault();
@@ -1699,7 +2089,7 @@ function ReferenceMenuView({ editor }) {
   };
   return (
     // finalFocus={false}: focus never left the text.
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       Popover2,
       {
         anchor,
@@ -1711,8 +2101,8 @@ function ReferenceMenuView({ editor }) {
         align: "left",
         ariaLabel: "Link",
         finalFocus: false,
-        children: shown && /* @__PURE__ */ jsxs5("div", { ref: keepFocus2, role: "menu", "aria-label": "Link", className: "flex flex-col gap-0.5", children: [
-          opens && /* @__PURE__ */ jsx6(
+        children: shown && /* @__PURE__ */ jsxs6("div", { ref: keepFocus2, role: "menu", "aria-label": "Link", className: "flex flex-col gap-0.5", children: [
+          opens && /* @__PURE__ */ jsx7(
             MenuItem3,
             {
               role: "menuitem",
@@ -1725,9 +2115,9 @@ function ReferenceMenuView({ editor }) {
               }
             }
           ),
-          shown.named && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            opens && /* @__PURE__ */ jsx6(MenuSeparator2, {}),
-            /* @__PURE__ */ jsx6("div", { role: "group", "aria-label": "Card", children: /* @__PURE__ */ jsx6(MenuSection, { label: "Card", children: LAYOUTS.map(({ layout, label }, i) => /* @__PURE__ */ jsx6(
+          shown.named && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+            opens && /* @__PURE__ */ jsx7(MenuSeparator2, {}),
+            /* @__PURE__ */ jsx7("div", { role: "group", "aria-label": "Card", children: /* @__PURE__ */ jsx7(MenuSection, { label: "Card", children: LAYOUTS.map(({ layout, label }, i) => /* @__PURE__ */ jsx7(
               MenuItem3,
               {
                 role: "menuitemradio",
@@ -1735,7 +2125,7 @@ function ReferenceMenuView({ editor }) {
                 tabIndex: -1,
                 label,
                 selected: shown.active === i + (opens ? 1 : 0),
-                trailing: shown.layout === layout ? /* @__PURE__ */ jsx6(IconCheck, { size: 16, "aria-hidden": true }) : void 0,
+                trailing: shown.layout === layout ? /* @__PURE__ */ jsx7(IconCheck, { size: 16, "aria-hidden": true }) : void 0,
                 onMouseDown: (event) => {
                   event.preventDefault();
                   run(layout);
@@ -1751,7 +2141,7 @@ function ReferenceMenuView({ editor }) {
 }
 
 // src/BlockNodes.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var BLOCK_TYPES = [
   "paragraph",
   "heading",
@@ -1909,7 +2299,7 @@ function bringsInBlocks(transactions) {
     })
   );
 }
-var BlockId = Extension8.create({
+var BlockId = Extension10.create({
   name: "blockId",
   onCreate() {
     const { state, view } = this.editor;
@@ -1921,8 +2311,8 @@ var BlockId = Extension8.create({
   },
   addProseMirrorPlugins() {
     return [
-      new Plugin7({
-        key: new PluginKey8("blockIdSplit"),
+      new Plugin8({
+        key: new PluginKey9("blockIdSplit"),
         appendTransaction: (transactions, old, state) => {
           if (!bringsInBlocks(transactions)) return null;
           const mapping = new Mapping();
@@ -1996,7 +2386,7 @@ var ReferenceNode = Node2.create({
     return ReactNodeViewRenderer2(({ node, editor, getPos }) => {
       const uri = String(node.attrs.uri ?? "");
       const href = typeof node.attrs.href === "string" && node.attrs.href ? node.attrs.href : void 0;
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         NodeViewWrapper2,
         {
           as: "span",
@@ -2007,7 +2397,7 @@ var ReferenceNode = Node2.create({
             event.preventDefault();
             event.stopPropagation();
           },
-          children: uri ? /* @__PURE__ */ jsx7(View, { uri, ...href ? { href } : {} }) : /* @__PURE__ */ jsx7("span", { children: href })
+          children: uri ? /* @__PURE__ */ jsx8(View, { uri, ...href ? { href } : {} }) : /* @__PURE__ */ jsx8("span", { children: href })
         }
       );
     });
@@ -2038,7 +2428,7 @@ var UnknownBlock = Node2.create({
 function UnknownBlockView({ node }) {
   const source = node.attrs.source;
   const text = String(node.attrs.text ?? "");
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     NodeViewWrapper2,
     {
       "data-block-id": source?.id,
@@ -2078,7 +2468,7 @@ var AttachmentNode = Node2.create({
   addNodeView() {
     const View = this.options.view;
     if (!View) return null;
-    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx7(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx7(View, { attrs: node.attrs }) }));
+    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx8(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx8(View, { attrs: node.attrs }) }));
   }
 });
 var TICK = "checklistTick";
@@ -2147,7 +2537,7 @@ function listItemView(editor, node, view, getPos) {
     }
   };
 }
-var Checklist = Extension8.create({
+var Checklist = Extension10.create({
   name: "checklist",
   // Before the list item's own Enter and Backspace.
   priority: 101,
@@ -2212,14 +2602,14 @@ var Checklist = Extension8.create({
   addProseMirrorPlugins() {
     const editor = this.editor;
     return [
-      new Plugin7({
-        key: new PluginKey8("checklist"),
+      new Plugin8({
+        key: new PluginKey9("checklist"),
         props: { nodeViews: { listItem: (node, view, getPos) => listItemView(editor, node, view, getPos) } }
       })
     ];
   }
 });
-var Callout = Extension8.create({
+var Callout = Extension10.create({
   name: "callout",
   addGlobalAttributes() {
     return [
@@ -2240,10 +2630,14 @@ var Callout = Extension8.create({
 export {
   AttachmentNode,
   BlockId,
+  COMPOSE_EDITOR_CLASSES,
   Callout,
   CaptionedReference,
   Checklist,
   CodeBlockColours,
+  CommentHighlights,
+  ComposeBox,
+  ComposeKeys,
   EditorBlockHandle,
   EditorTableControls,
   FORMATS,
@@ -2261,10 +2655,13 @@ export {
   SlashCommands,
   UnknownBlock,
   UrgentPersonMention,
+  anchorOfSelection,
   appendTableColumn,
   appendTableRow,
   applyFormat,
   blockDropCursor,
+  commentElement,
+  commentPlace,
   deleteBlock,
   deleteTableColumn,
   deleteTableRow,
@@ -2278,16 +2675,20 @@ export {
   isReferenceMenuOpen,
   isSuggestionActive,
   isSuggestionOpen,
+  keepSelection,
   moveBlock,
   normalizeHref,
   pastedImageName,
   pastedImages,
   peopleMenu,
+  quoteText,
   referenceAtSelection,
   referenceCardPlacements,
   referenceMenu,
   referenceMenuClick,
   refreshLinkChips,
+  releaseSelection,
+  setCommentAnchors,
   setReferenceCard,
   setReferenceCardAt,
   startBlockDrag,