@railway/inkwell 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1628 @@
+'use strict';
+
+var core = require('@slate-yjs/core');
+var react = require('react');
+var slate = require('slate');
+var slateHistory = require('slate-history');
+var slateReact = require('slate-react');
+var jsxRuntime = require('react/jsx-runtime');
+var rehypeHighlight = require('rehype-highlight');
+var rehypeSanitize = require('rehype-sanitize');
+var rehypeStringify = require('rehype-stringify');
+var remarkGfm = require('remark-gfm');
+var remarkParse = require('remark-parse');
+var remarkRehype = require('remark-rehype');
+var unified = require('unified');
+var mdastUtilToString = require('mdast-util-to-string');
+var unistUtilVisit = require('unist-util-visit');
+var rehypeParse = require('rehype-parse');
+var rehypeRemark = require('rehype-remark');
+var remarkStringify = require('remark-stringify');
+var rehypeReact = require('rehype-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var rehypeHighlight__default = /*#__PURE__*/_interopDefault(rehypeHighlight);
+var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
+var rehypeStringify__default = /*#__PURE__*/_interopDefault(rehypeStringify);
+var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var remarkParse__default = /*#__PURE__*/_interopDefault(remarkParse);
+var remarkRehype__default = /*#__PURE__*/_interopDefault(remarkRehype);
+var rehypeParse__default = /*#__PURE__*/_interopDefault(rehypeParse);
+var rehypeRemark__default = /*#__PURE__*/_interopDefault(rehypeRemark);
+var remarkStringify__default = /*#__PURE__*/_interopDefault(remarkStringify);
+var rehypeReact__default = /*#__PURE__*/_interopDefault(rehypeReact);
+
+// src/editor/inkwell-editor.tsx
+
+// src/lib/class-names.ts
+function editorClass(component) {
+  return `inkwell-editor-${component}`;
+}
+function pluginClass(pluginName) {
+  return (component) => `inkwell-plugin-${pluginName}-${component}`;
+}
+var cls = pluginClass("bubble-menu");
+function BoldButton({ wrapSelection }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => wrapSelection("**", "**"),
+      className: cls("btn"),
+      "aria-label": "Bold",
+      title: "Bold",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("item-bold"), children: "B" })
+    }
+  );
+}
+function ItalicButton({ wrapSelection }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => wrapSelection("_", "_"),
+      className: cls("btn"),
+      "aria-label": "Italic",
+      title: "Italic",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("item-italic"), children: "I" })
+    }
+  );
+}
+function StrikethroughButton({ wrapSelection }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => wrapSelection("~~", "~~"),
+      className: cls("btn"),
+      "aria-label": "Strikethrough",
+      title: "Strikethrough",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("item-strike"), children: "S" })
+    }
+  );
+}
+var defaultBubbleMenuItems = [
+  {
+    key: "bold",
+    shortcut: "b",
+    onShortcut: (wrap) => wrap("**", "**"),
+    render: (props) => /* @__PURE__ */ jsxRuntime.jsx(BoldButton, { ...props })
+  },
+  {
+    key: "italic",
+    shortcut: "i",
+    onShortcut: (wrap) => wrap("_", "_"),
+    render: (props) => /* @__PURE__ */ jsxRuntime.jsx(ItalicButton, { ...props })
+  },
+  {
+    key: "strikethrough",
+    shortcut: "d",
+    onShortcut: (wrap) => wrap("~~", "~~"),
+    render: (props) => /* @__PURE__ */ jsxRuntime.jsx(StrikethroughButton, { ...props })
+  }
+];
+function BubbleMenuWidget({
+  editorRef,
+  wrapSelection,
+  items
+}) {
+  const [position, setPosition] = react.useState(null);
+  const handleSelectionChange = react.useCallback(() => {
+    const active = document.activeElement;
+    if (active?.closest(`.${cls("container")}`)) return;
+    const sel = window.getSelection();
+    if (!sel || !editorRef.current || !editorRef.current.contains(sel.anchorNode) || sel.isCollapsed || !sel.toString().trim()) {
+      setPosition(null);
+      return;
+    }
+    const rect = sel.getRangeAt(0).getBoundingClientRect();
+    const editorRect = editorRef.current.getBoundingClientRect();
+    setPosition({
+      top: rect.top - editorRect.top,
+      left: rect.left - editorRect.left + rect.width / 2
+    });
+  }, [editorRef]);
+  react.useEffect(() => {
+    document.addEventListener("selectionchange", handleSelectionChange);
+    const handleMouseUp = () => {
+      requestAnimationFrame(handleSelectionChange);
+    };
+    editorRef.current?.addEventListener("mouseup", handleMouseUp);
+    const el = editorRef.current;
+    return () => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+      el?.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [handleSelectionChange, editorRef]);
+  if (!position) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cls("container"),
+      style: {
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        transform: "translateX(-50%) translateY(-100%)",
+        marginTop: -8,
+        zIndex: 1e3
+      },
+      onMouseDown: (e) => e.preventDefault(),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("inner"), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(item.render, { wrapSelection }, item.key)) })
+    }
+  );
+}
+function createBubbleMenuPlugin(options) {
+  const items = options?.items ?? defaultBubbleMenuItems;
+  return {
+    name: "bubble-menu",
+    render: (props) => /* @__PURE__ */ jsxRuntime.jsx(BubbleMenuWidget, { ...props, items }),
+    onKeyDown: (event, { wrapSelection }) => {
+      if (!event.metaKey && !event.ctrlKey) return;
+      const item = items.find((i) => i.shortcut === event.key);
+      if (item?.onShortcut) {
+        event.preventDefault();
+        item.onShortcut(wrapSelection);
+      }
+    }
+  };
+}
+function remarkFlattenBlockquotes() {
+  return (tree) => {
+    unistUtilVisit.visit(tree, "blockquote", (node) => {
+      const newChildren = [];
+      for (const child of node.children) {
+        if (child.type === "blockquote") {
+          const text = mdastUtilToString.toString(child);
+          const paragraph = {
+            type: "paragraph",
+            children: [{ type: "text", value: "> " + text }]
+          };
+          newChildren.push(paragraph);
+        } else {
+          newChildren.push(child);
+        }
+      }
+      node.children = newChildren;
+    });
+  };
+}
+
+// src/lib/remark-no-tables.ts
+function rowToText(row) {
+  return "| " + row.children.map(
+    (cell) => cell.children.map((child) => "value" in child ? child.value : "").join("")
+  ).join(" | ") + " |";
+}
+function remarkNoTables() {
+  return (tree) => {
+    tree.children = tree.children.map((node) => {
+      if (node.type !== "table") return node;
+      const table = node;
+      const lines = table.children.map(rowToText);
+      if (lines.length > 0) {
+        const colCount = table.children[0].children.length;
+        const sep = "| " + Array.from({ length: colCount }, () => "---").join(" | ") + " |";
+        lines.splice(1, 0, sep);
+      }
+      const paragraph = {
+        type: "paragraph",
+        children: [{ type: "text", value: lines.join("\n") }]
+      };
+      return paragraph;
+    });
+  };
+}
+
+// src/lib/render-html.ts
+var processorCache = /* @__PURE__ */ new Map();
+function getProcessor(rehypePlugins) {
+  const key = rehypePlugins ? JSON.stringify(
+    rehypePlugins.map((p) => Array.isArray(p) ? p[1] : "default")
+  ) : "default";
+  const cached = processorCache.get(key);
+  if (cached) return cached;
+  const processor2 = unified.unified().use(remarkParse__default.default).use(remarkGfm__default.default).use(remarkNoTables).use(remarkFlattenBlockquotes).use(remarkRehype__default.default);
+  const plugins = rehypePlugins ?? [[rehypeHighlight__default.default, { detect: true }]];
+  for (const plugin of plugins) {
+    if (Array.isArray(plugin)) {
+      processor2.use(plugin[0], plugin[1]);
+    } else {
+      processor2.use(plugin);
+    }
+  }
+  processor2.use(rehypeSanitize__default.default, {
+    ...rehypeSanitize.defaultSchema,
+    tagNames: [...rehypeSanitize.defaultSchema.tagNames ?? [], "span"],
+    attributes: {
+      ...rehypeSanitize.defaultSchema.attributes,
+      code: ["className"],
+      span: ["className"]
+    }
+  });
+  processor2.use(rehypeStringify__default.default);
+  processorCache.set(key, processor2);
+  return processor2;
+}
+function escapeBareBq(markdown) {
+  return markdown.replace(/^>(?=\S)/gm, "\\>");
+}
+function renderMarkdownToHtml(markdown, rehypePlugins) {
+  const processor2 = getProcessor(rehypePlugins);
+  return String(processor2.processSync(escapeBareBq(markdown)));
+}
+
+// src/editor/slate/decorations.ts
+function computeDecorations(entry, editor, rehypePlugins) {
+  const [node, _path] = entry;
+  if (!slate.Element.isElement(node)) return [];
+  const element = node;
+  if (element.type === "code-line") {
+    return computeCodeDecorations(entry, editor, rehypePlugins);
+  }
+  if (element.type === "paragraph" || element.type === "blockquote" || element.type === "list-item" || element.type === "heading") {
+    return computeInlineDecorations(entry);
+  }
+  if (element.type === "code-fence") {
+    return computeFenceDecorations(entry);
+  }
+  return [];
+}
+function computeInlineDecorations(entry) {
+  const [node, path] = entry;
+  const text = slate.Node.string(node);
+  if (!text) return [];
+  const ranges = [];
+  const codeRanges = [];
+  const codeRegex = /`([^`]+)`/g;
+  let match;
+  while ((match = codeRegex.exec(text)) !== null) {
+    const start = match.index;
+    const end = start + match[0].length;
+    codeRanges.push({ start, end });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start },
+      focus: { path: [...path, 0], offset: start + 1 },
+      codeMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start + 1 },
+      focus: { path: [...path, 0], offset: end - 1 },
+      inlineCode: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: end - 1 },
+      focus: { path: [...path, 0], offset: end },
+      codeMarker: true
+    });
+  }
+  const isInCode = (offset) => codeRanges.some((r) => offset >= r.start && offset < r.end);
+  const boldRegex = /\*\*(.+?)\*\*/g;
+  while ((match = boldRegex.exec(text)) !== null) {
+    if (isInCode(match.index)) continue;
+    const start = match.index;
+    const end = start + match[0].length;
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start },
+      focus: { path: [...path, 0], offset: start + 2 },
+      boldMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start + 2 },
+      focus: { path: [...path, 0], offset: end - 2 },
+      bold: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: end - 2 },
+      focus: { path: [...path, 0], offset: end },
+      boldMarker: true
+    });
+  }
+  const italicPatterns = [/_(.+?)_/g, /(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g];
+  for (const regex of italicPatterns) {
+    while ((match = regex.exec(text)) !== null) {
+      if (isInCode(match.index)) continue;
+      const start = match.index;
+      const end = start + match[0].length;
+      ranges.push({
+        anchor: { path: [...path, 0], offset: start },
+        focus: { path: [...path, 0], offset: start + 1 },
+        italicMarker: true
+      });
+      ranges.push({
+        anchor: { path: [...path, 0], offset: start + 1 },
+        focus: { path: [...path, 0], offset: end - 1 },
+        italic: true
+      });
+      ranges.push({
+        anchor: { path: [...path, 0], offset: end - 1 },
+        focus: { path: [...path, 0], offset: end },
+        italicMarker: true
+      });
+    }
+  }
+  const strikeRegex = /~~(.+?)~~/g;
+  while ((match = strikeRegex.exec(text)) !== null) {
+    if (isInCode(match.index)) continue;
+    const start = match.index;
+    const end = start + match[0].length;
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start },
+      focus: { path: [...path, 0], offset: start + 2 },
+      strikeMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start + 2 },
+      focus: { path: [...path, 0], offset: end - 2 },
+      strikethrough: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: end - 2 },
+      focus: { path: [...path, 0], offset: end },
+      strikeMarker: true
+    });
+  }
+  return ranges;
+}
+function computeFenceDecorations(entry) {
+  const [node, _path] = entry;
+  const text = slate.Node.string(node);
+  if (!text) return [];
+  return [];
+}
+function computeCodeDecorations(entry, editor, rehypePlugins) {
+  const [node, path] = entry;
+  const lineText = slate.Node.string(node);
+  if (!lineText) return [];
+  const lineIndex = path[0];
+  let lang = "";
+  for (let i = lineIndex - 1; i >= 0; i--) {
+    const sibling = editor.children[i];
+    if (sibling.type === "code-fence") {
+      lang = slate.Node.string(sibling).replace(/^`+/, "").trim();
+      break;
+    }
+  }
+  const codeLines = [];
+  let blockStartIdx = -1;
+  for (let i = lineIndex - 1; i >= 0; i--) {
+    const sibling = editor.children[i];
+    if (sibling.type === "code-fence") {
+      blockStartIdx = i + 1;
+      break;
+    }
+    if (sibling.type !== "code-line") break;
+  }
+  if (blockStartIdx === -1) blockStartIdx = lineIndex;
+  for (let i = blockStartIdx; i < editor.children.length; i++) {
+    const sibling = editor.children[i];
+    if (sibling.type === "code-fence") break;
+    if (sibling.type !== "code-line") break;
+    codeLines.push(slate.Node.string(sibling));
+  }
+  const thisLineIdx = lineIndex - blockStartIdx;
+  const fullCode = codeLines.join("\n");
+  if (!fullCode.trim()) return [];
+  const highlighted = highlightAndSplit(fullCode, lang, rehypePlugins);
+  const lineHtml = highlighted[thisLineIdx];
+  if (!lineHtml) return [];
+  return parseHljsRanges(lineHtml, path);
+}
+function highlightAndSplit(code, lang, rehypePlugins) {
+  const md = "```" + lang + "\n" + code + "\n```";
+  const html = renderMarkdownToHtml(md, rehypePlugins);
+  const match = html.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+  const raw = match?.[1]?.replace(/^\n|\n$/g, "") || "";
+  if (!raw) return [];
+  const lines = [];
+  let currentLine = "";
+  const openSpans = [];
+  for (let i = 0; i < raw.length; i++) {
+    if (raw[i] === "\n") {
+      for (let j = openSpans.length - 1; j >= 0; j--) currentLine += "</span>";
+      lines.push(currentLine);
+      currentLine = openSpans.join("");
+    } else if (raw[i] === "<") {
+      const closeIdx = raw.indexOf(">", i);
+      if (closeIdx === -1) {
+        currentLine += raw[i];
+        continue;
+      }
+      const tag = raw.slice(i, closeIdx + 1);
+      currentLine += tag;
+      if (tag.startsWith("<span")) {
+        openSpans.push(tag);
+      } else if (tag === "</span>") {
+        openSpans.pop();
+      }
+      i = closeIdx;
+    } else {
+      currentLine += raw[i];
+    }
+  }
+  for (let j = openSpans.length - 1; j >= 0; j--) currentLine += "</span>";
+  if (currentLine) lines.push(currentLine);
+  return lines;
+}
+function parseHljsRanges(html, elementPath) {
+  const ranges = [];
+  let textOffset = 0;
+  const classStack = [];
+  let i = 0;
+  while (i < html.length) {
+    if (html[i] === "<") {
+      const closeIdx = html.indexOf(">", i);
+      if (closeIdx === -1) break;
+      const tag = html.slice(i, closeIdx + 1);
+      if (tag.startsWith("<span")) {
+        const classMatch = tag.match(/class="([^"]+)"/);
+        classStack.push(classMatch?.[1] || "");
+      } else if (tag === "</span>") {
+        classStack.pop();
+      }
+      i = closeIdx + 1;
+    } else if (html[i] === "&") {
+      const semiIdx = html.indexOf(";", i);
+      if (semiIdx !== -1) {
+        const entity = html.slice(i, semiIdx + 1);
+        let decoded;
+        if (entity === "&amp;") decoded = "&";
+        else if (entity === "&lt;") decoded = "<";
+        else if (entity === "&gt;") decoded = ">";
+        else if (entity === "&quot;") decoded = '"';
+        else if (entity.startsWith("&#x"))
+          decoded = String.fromCodePoint(parseInt(entity.slice(3, -1), 16));
+        else if (entity.startsWith("&#"))
+          decoded = String.fromCodePoint(parseInt(entity.slice(2, -1), 10));
+        else decoded = entity;
+        if (classStack.length > 0 && classStack[classStack.length - 1]) {
+          ranges.push({
+            anchor: { path: [...elementPath, 0], offset: textOffset },
+            focus: {
+              path: [...elementPath, 0],
+              offset: textOffset + decoded.length
+            },
+            hljs: classStack[classStack.length - 1]
+          });
+        }
+        textOffset += decoded.length;
+        i = semiIdx + 1;
+      } else {
+        textOffset++;
+        i++;
+      }
+    } else {
+      const nextTag = html.indexOf("<", i);
+      const nextEntity = html.indexOf("&", i);
+      let end = html.length;
+      if (nextTag !== -1) end = Math.min(end, nextTag);
+      if (nextEntity !== -1) end = Math.min(end, nextEntity);
+      const chunk = html.slice(i, end);
+      if (classStack.length > 0 && classStack[classStack.length - 1] && chunk.length > 0) {
+        ranges.push({
+          anchor: { path: [...elementPath, 0], offset: textOffset },
+          focus: {
+            path: [...elementPath, 0],
+            offset: textOffset + chunk.length
+          },
+          hljs: classStack[classStack.length - 1]
+        });
+      }
+      textOffset += chunk.length;
+      i = end;
+    }
+  }
+  return ranges;
+}
+function generateId() {
+  return crypto.randomUUID();
+}
+function withNodeId(editor) {
+  const { apply } = editor;
+  editor.apply = (operation) => {
+    if (operation.type === "insert_node") {
+      const node = operation.node;
+      if (slate.Element.isElement(node)) {
+        const el = node;
+        if (!el.id) {
+          operation = {
+            ...operation,
+            node: { ...node, id: generateId() }
+          };
+        }
+      }
+    }
+    if (operation.type === "split_node") {
+      const props = operation.properties;
+      if ("type" in props) {
+        operation = {
+          ...operation,
+          properties: { ...props, id: generateId() }
+        };
+      }
+    }
+    apply(operation);
+  };
+  return editor;
+}
+
+// src/editor/slate/deserialize.ts
+var HEADING_RE = /^(#{1,6}) /;
+function deserialize(markdown, decorations) {
+  if (!markdown) {
+    return [{ type: "paragraph", id: generateId(), children: [{ text: "" }] }];
+  }
+  const headingEnabled = [
+    decorations?.heading1 ?? true,
+    decorations?.heading2 ?? true,
+    decorations?.heading3 ?? true,
+    decorations?.heading4 ?? true,
+    decorations?.heading5 ?? true,
+    decorations?.heading6 ?? true
+  ];
+  const cfg = {
+    lists: decorations?.lists ?? true,
+    blockquotes: decorations?.blockquotes ?? true,
+    codeBlocks: decorations?.codeBlocks ?? true
+  };
+  const lines = markdown.split("\n");
+  const result = [];
+  let inCodeBlock = false;
+  let paragraphLines = [];
+  const flushParagraph = () => {
+    if (paragraphLines.length === 0) return;
+    for (const line of paragraphLines) {
+      const hMatch = HEADING_RE.exec(line);
+      if (hMatch && headingEnabled[hMatch[1].length - 1]) {
+        result.push({
+          type: "heading",
+          id: generateId(),
+          level: hMatch[1].length,
+          children: [{ text: line.slice(hMatch[0].length) }]
+        });
+        continue;
+      }
+      if (cfg.blockquotes && /^> /.test(line)) {
+        result.push({
+          type: "blockquote",
+          id: generateId(),
+          children: [{ text: line.slice(2) }]
+        });
+      } else if (cfg.lists && /^[-*+] /.test(line)) {
+        result.push({
+          type: "list-item",
+          id: generateId(),
+          children: [{ text: line }]
+        });
+      } else {
+        result.push({
+          type: "paragraph",
+          id: generateId(),
+          children: [{ text: line }]
+        });
+      }
+    }
+    paragraphLines = [];
+  };
+  for (const line of lines) {
+    if (cfg.codeBlocks && !inCodeBlock && line.startsWith("```")) {
+      flushParagraph();
+      inCodeBlock = true;
+      result.push({
+        type: "code-fence",
+        id: generateId(),
+        children: [{ text: line }]
+      });
+      continue;
+    }
+    if (inCodeBlock && line.trim() === "```") {
+      result.push({
+        type: "code-fence",
+        id: generateId(),
+        children: [{ text: line }]
+      });
+      inCodeBlock = false;
+      continue;
+    }
+    if (inCodeBlock) {
+      result.push({
+        type: "code-line",
+        id: generateId(),
+        children: [{ text: line }]
+      });
+      continue;
+    }
+    if (line.trim() === "") {
+      flushParagraph();
+      result.push({
+        type: "paragraph",
+        id: generateId(),
+        children: [{ text: "" }]
+      });
+      continue;
+    }
+    paragraphLines.push(line);
+  }
+  flushParagraph();
+  return result.length > 0 ? result : [{ type: "paragraph", id: generateId(), children: [{ text: "" }] }];
+}
+function RenderElement({
+  attributes,
+  children,
+  element
+}) {
+  const el = element;
+  switch (el.type) {
+    case "heading":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          ...attributes,
+          className: `${editorClass("heading")} ${editorClass(`heading-${el.level ?? 1}`)}`,
+          children
+        }
+      );
+    case "code-fence":
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { ...attributes, className: editorClass("code-fence"), children });
+    case "code-line":
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { ...attributes, className: editorClass("code-line"), children });
+    case "blockquote":
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { ...attributes, className: editorClass("blockquote"), children });
+    case "list-item":
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { ...attributes, className: editorClass("list-item"), "data-list": true, children });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { ...attributes, children });
+  }
+}
+function RenderLeaf({ attributes, children, leaf }) {
+  const l = leaf;
+  if (l.boldMarker || l.italicMarker || l.strikeMarker) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, className: editorClass("marker"), children });
+  }
+  if (l.codeMarker) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, className: editorClass("backtick"), children });
+  }
+  let content = children;
+  if (l.bold) content = /* @__PURE__ */ jsxRuntime.jsx("strong", { children: content });
+  if (l.italic) content = /* @__PURE__ */ jsxRuntime.jsx("em", { children: content });
+  if (l.strikethrough) content = /* @__PURE__ */ jsxRuntime.jsx("del", { children: content });
+  if (l.inlineCode) content = /* @__PURE__ */ jsxRuntime.jsx("code", { children: content });
+  if (l.hljs) {
+    content = /* @__PURE__ */ jsxRuntime.jsx("span", { className: l.hljs, children: content });
+  }
+  if (l.remoteCursor) {
+    content = /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: editorClass("remote-cursor"),
+        style: { backgroundColor: `${l.remoteCursor}30` },
+        children: content
+      }
+    );
+  }
+  if (l.remoteCursorCaret) {
+    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: editorClass("remote-caret"),
+          style: { borderColor: l.remoteCursor },
+          contentEditable: false
+        }
+      ),
+      content
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, children: content });
+}
+function serialize(nodes) {
+  const entries = [];
+  for (const node of nodes) {
+    const text = slate.Node.string(node);
+    const type = node.type;
+    if (type === "heading") {
+      const level = node.level ?? 1;
+      const prefix = "#".repeat(level);
+      entries.push({ text: `${prefix} ${text}`, type });
+      continue;
+    }
+    if (type === "blockquote") {
+      const lines = text.split("\n").filter((l) => l.trim() !== "");
+      if (lines.length === 0) {
+        entries.push({ text: "> ", type });
+      } else {
+        const prefixed = lines.map((line) => {
+          const escaped = line.replace(/^(>+)/g, (m) => "\\>".repeat(m.length));
+          return "> " + escaped;
+        }).join("\n>\n");
+        entries.push({ text: prefixed, type });
+      }
+      continue;
+    }
+    if (type === "paragraph" && !text.trim()) {
+      entries.push({ text: "", type });
+      continue;
+    }
+    entries.push({ text, type });
+  }
+  const codeTypes = /* @__PURE__ */ new Set(["code-fence", "code-line"]);
+  let result = "";
+  for (let i = 0; i < entries.length; i++) {
+    if (i > 0) {
+      const prev = entries[i - 1].type;
+      const curr = entries[i].type;
+      const sameGroup = prev === "blockquote" && curr === "blockquote" || prev === "list-item" && curr === "list-item" || codeTypes.has(prev) && codeTypes.has(curr);
+      result += sameGroup ? "\n" : "\n\n";
+    }
+    result += entries[i].text;
+  }
+  return result.replace(/\n{3,}/g, "\n\n").trim();
+}
+var HEADING_RE2 = /^#{1,6}$/;
+function withMarkdown(editor, decorationsRef) {
+  const { insertBreak, insertData, insertText } = editor;
+  editor.insertBreak = () => {
+    const { selection } = editor;
+    if (!selection) return insertBreak();
+    const [match] = slate.Editor.nodes(editor, {
+      match: (n) => slate.Element.isElement(n)
+    });
+    if (!match) return insertBreak();
+    const [node, path] = match;
+    const element = node;
+    const text = slate.Node.string(node);
+    const deco = decorationsRef.current;
+    if (deco.codeBlocks && element.type === "paragraph" && text.startsWith("```")) {
+      slate.Transforms.setNodes(editor, {
+        type: "code-fence"
+      });
+      const newLine = {
+        type: "code-line",
+        id: generateId(),
+        children: [{ text: "" }]
+      };
+      slate.Transforms.insertNodes(editor, newLine, { at: slate.Path.next(path) });
+      slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+      return;
+    }
+    if (element.type === "code-line" && text.trim() === "```") {
+      slate.Transforms.setNodes(editor, {
+        type: "code-fence"
+      });
+      const newParagraph = {
+        type: "paragraph",
+        id: generateId(),
+        children: [{ text: "" }]
+      };
+      slate.Transforms.insertNodes(editor, newParagraph, { at: slate.Path.next(path) });
+      slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+      return;
+    }
+    if (element.type === "code-fence") {
+      const prevIdx = path[0] - 1;
+      const isClosing = prevIdx >= 0 && editor.children[prevIdx].type === "code-line";
+      const newNode = isClosing ? { type: "paragraph", id: generateId(), children: [{ text: "" }] } : { type: "code-line", id: generateId(), children: [{ text: "" }] };
+      slate.Transforms.insertNodes(editor, newNode, { at: slate.Path.next(path) });
+      slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+      return;
+    }
+    if (element.type === "blockquote") {
+      const text2 = slate.Node.string(node);
+      if (!text2.trim()) {
+        slate.Transforms.setNodes(editor, {
+          type: "paragraph"
+        });
+        return;
+      }
+      const newParagraph = {
+        type: "paragraph",
+        id: generateId(),
+        children: [{ text: "" }]
+      };
+      slate.Transforms.insertNodes(editor, newParagraph, {
+        at: slate.Path.next(path)
+      });
+      slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+      return;
+    }
+    if (element.type === "heading") {
+      if (!text.trim()) {
+        slate.Transforms.setNodes(editor, {
+          type: "paragraph"
+        });
+        slate.Transforms.unsetNodes(editor, "level");
+        return;
+      }
+      const newParagraph = {
+        type: "paragraph",
+        id: generateId(),
+        children: [{ text: "" }]
+      };
+      slate.Transforms.insertNodes(editor, newParagraph, { at: slate.Path.next(path) });
+      slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+      return;
+    }
+    if (element.type === "code-line") {
+      const newLine = {
+        type: "code-line",
+        id: generateId(),
+        children: [{ text: "" }]
+      };
+      slate.Transforms.insertNodes(editor, newLine, { at: slate.Path.next(path) });
+      slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+      return;
+    }
+    if (element.type === "list-item") {
+      const text2 = slate.Node.string(node);
+      if (text2.trim() === "-" || text2.trim() === "*" || text2.trim() === "+" || text2 === "- " || text2 === "* " || text2 === "+ ") {
+        slate.Transforms.delete(editor, {
+          at: {
+            anchor: slate.Editor.start(editor, path),
+            focus: slate.Editor.end(editor, path)
+          }
+        });
+        slate.Transforms.setNodes(editor, {
+          type: "paragraph"
+        });
+        return;
+      }
+      const marker = text2.match(/^([-*+] )/)?.[1] || "- ";
+      const newItem = {
+        type: "list-item",
+        id: generateId(),
+        children: [{ text: marker }]
+      };
+      slate.Transforms.insertNodes(editor, newItem, { at: slate.Path.next(path) });
+      slate.Transforms.select(editor, slate.Editor.end(editor, slate.Path.next(path)));
+      return;
+    }
+    insertBreak();
+    slate.Transforms.setNodes(editor, {
+      type: "paragraph"
+    });
+  };
+  editor.insertSoftBreak = () => {
+    const [match] = slate.Editor.nodes(editor, {
+      match: (n) => slate.Element.isElement(n)
+    });
+    if (match) {
+      const [node, path] = match;
+      const element = node;
+      if (element.type === "blockquote") {
+        const newBq = {
+          type: "blockquote",
+          id: generateId(),
+          children: [{ text: "" }]
+        };
+        slate.Transforms.insertNodes(editor, newBq, { at: slate.Path.next(path) });
+        slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+        return;
+      }
+      if (element.type === "code-line") {
+        const newLine = {
+          type: "code-line",
+          id: generateId(),
+          children: [{ text: "" }]
+        };
+        slate.Transforms.insertNodes(editor, newLine, { at: slate.Path.next(path) });
+        slate.Transforms.select(editor, slate.Editor.start(editor, slate.Path.next(path)));
+        return;
+      }
+    }
+    editor.insertBreak();
+  };
+  editor.insertText = (text) => {
+    const { selection } = editor;
+    if (!selection) return insertText(text);
+    const [match] = slate.Editor.nodes(editor, {
+      match: (n) => slate.Element.isElement(n)
+    });
+    if (!match) return insertText(text);
+    const [node, path] = match;
+    const element = node;
+    const currentText = slate.Node.string(node);
+    const deco = decorationsRef.current;
+    if (element.type === "code-line" && currentText === "```" && text !== "" && text !== "\n") {
+      slate.Transforms.setNodes(editor, {
+        type: "code-fence"
+      });
+      const newParagraph = {
+        type: "paragraph",
+        id: generateId(),
+        children: [{ text }]
+      };
+      slate.Transforms.insertNodes(editor, newParagraph, { at: slate.Path.next(path) });
+      slate.Transforms.select(editor, slate.Editor.end(editor, slate.Path.next(path)));
+      return;
+    }
+    if (deco.blockquotes && element.type === "paragraph" && text === " " && currentText === ">") {
+      slate.Transforms.delete(editor, {
+        at: {
+          anchor: slate.Editor.start(editor, path),
+          focus: slate.Editor.end(editor, path)
+        }
+      });
+      slate.Transforms.setNodes(editor, {
+        type: "blockquote"
+      });
+      return;
+    }
+    const headingLevel = currentText.length;
+    const headingKey = `heading${headingLevel}`;
+    if (element.type === "paragraph" && text === " " && HEADING_RE2.test(currentText) && deco[headingKey]) {
+      const level = headingLevel;
+      slate.Transforms.delete(editor, {
+        at: {
+          anchor: slate.Editor.start(editor, path),
+          focus: slate.Editor.end(editor, path)
+        }
+      });
+      slate.Transforms.setNodes(editor, {
+        type: "heading",
+        level
+      });
+      return;
+    }
+    if (deco.lists && element.type === "paragraph" && text === " " && (currentText === "-" || currentText === "*" || currentText === "+")) {
+      insertText(text);
+      slate.Transforms.setNodes(editor, {
+        type: "list-item"
+      });
+      return;
+    }
+    if (element.type === "code-fence") {
+      const prevIdx = path[0] - 1;
+      if (prevIdx >= 0) {
+        const prev = editor.children[prevIdx];
+        if (prev.type === "code-line" && currentText === "```") {
+          const newParagraph = {
+            type: "paragraph",
+            id: generateId(),
+            children: [{ text }]
+          };
+          slate.Transforms.insertNodes(editor, newParagraph, {
+            at: slate.Path.next(path)
+          });
+          slate.Transforms.select(editor, slate.Editor.end(editor, slate.Path.next(path)));
+          return;
+        }
+      }
+    }
+    insertText(text);
+  };
+  editor.insertData = (data) => {
+    const text = data.getData("text/plain");
+    if (text) {
+      const nodes = deserialize(text, decorationsRef.current);
+      slate.Transforms.insertNodes(editor, nodes);
+      return;
+    }
+    insertData(data);
+  };
+  return editor;
+}
+var IS_SERVER = typeof window === "undefined";
+var DEFAULT_DECORATIONS = {
+  heading1: true,
+  heading2: true,
+  heading3: true,
+  heading4: true,
+  heading5: true,
+  heading6: true,
+  lists: true,
+  blockquotes: true,
+  codeBlocks: true
+};
+function InkwellEditor({
+  content,
+  onChange,
+  className,
+  placeholder,
+  plugins: userPlugins = [],
+  rehypePlugins,
+  decorations,
+  collaboration,
+  bubbleMenu = true
+}) {
+  const resolvedDecorations = react.useMemo(
+    () => ({ ...DEFAULT_DECORATIONS, ...decorations }),
+    [decorations]
+  );
+  const decorationsRef = react.useRef(resolvedDecorations);
+  decorationsRef.current = resolvedDecorations;
+  const plugins = react.useMemo(() => {
+    const builtIn = bubbleMenu ? [createBubbleMenuPlugin()] : [];
+    return [...builtIn, ...userPlugins];
+  }, [userPlugins, bubbleMenu]);
+  const editor = react.useMemo(() => {
+    if (IS_SERVER) return null;
+    const base = withNodeId(slateReact.withReact(slate.createEditor()));
+    if (collaboration) {
+      const { sharedType, awareness, user } = collaboration;
+      const yjsEditor = core.withYjs(base, sharedType, { autoConnect: false });
+      const cursorEditor = core.withCursors(yjsEditor, awareness, {
+        data: user
+      });
+      const historyEditor = core.withYHistory(cursorEditor);
+      return withMarkdown(historyEditor, decorationsRef);
+    }
+    return withMarkdown(slateHistory.withHistory(base), decorationsRef);
+  }, []);
+  if (!editor) return null;
+  react.useEffect(() => {
+    if (!collaboration || !core.YjsEditor.isYjsEditor(editor)) return;
+    core.YjsEditor.connect(editor);
+    return () => {
+      core.YjsEditor.disconnect(editor);
+    };
+  }, [editor, collaboration]);
+  const [cursorVersion, setCursorVersion] = react.useState(0);
+  react.useEffect(() => {
+    if (!collaboration || !core.CursorEditor.isCursorEditor(editor)) return;
+    const handleChange2 = () => setCursorVersion((v) => v + 1);
+    core.CursorEditor.on(editor, "change", handleChange2);
+    return () => {
+      core.CursorEditor.off(editor, "change", handleChange2);
+    };
+  }, [editor, collaboration]);
+  const remoteCursorRanges = react.useMemo(() => {
+    if (!collaboration || !core.CursorEditor.isCursorEditor(editor)) return [];
+    const ranges = [];
+    const states = core.CursorEditor.cursorStates(editor);
+    for (const [, state] of Object.entries(states)) {
+      if (!state.relativeSelection) continue;
+      const data = state.data;
+      if (!data) continue;
+      try {
+        const { anchor, focus } = state.relativeSelection;
+        const anchorPoint = core.relativePositionToSlatePoint(
+          collaboration.sharedType,
+          editor,
+          anchor
+        );
+        const focusPoint = core.relativePositionToSlatePoint(
+          collaboration.sharedType,
+          editor,
+          focus
+        );
+        if (!anchorPoint || !focusPoint) continue;
+        const range = { anchor: anchorPoint, focus: focusPoint };
+        if (slate.Range.isCollapsed(range)) {
+          ranges.push({
+            ...range,
+            remoteCursor: data.color,
+            remoteCursorCaret: true
+          });
+        } else {
+          ranges.push({
+            ...range,
+            remoteCursor: data.color
+          });
+        }
+      } catch {
+      }
+    }
+    return ranges;
+  }, [editor, collaboration, cursorVersion]);
+  const initialValue = react.useMemo(
+    () => collaboration ? [
+      {
+        type: "paragraph",
+        id: generateId(),
+        children: [{ text: "" }]
+      }
+    ] : deserialize(content, resolvedDecorations),
+    []
+  );
+  const lastContent = react.useRef(content);
+  const isInternalChange = react.useRef(false);
+  react.useEffect(() => {
+    if (collaboration) return;
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    if (content === lastContent.current) return;
+    const newValue = deserialize(content, resolvedDecorations);
+    editor.children = newValue;
+    slate.Transforms.select(editor, slate.Editor.start(editor, []));
+    editor.onChange();
+    lastContent.current = content;
+  }, [content, editor, collaboration]);
+  const handleChange = react.useCallback(
+    (value) => {
+      const isAstChange = editor.operations.some(
+        (op) => op.type !== "set_selection"
+      );
+      if (!isAstChange) return;
+      if (!onChange) return;
+      const md = serialize(value);
+      if (collaboration) {
+        onChange(md);
+      } else {
+        if (md !== lastContent.current) {
+          lastContent.current = md;
+          isInternalChange.current = true;
+          onChange(md);
+        }
+      }
+    },
+    [editor, onChange, collaboration]
+  );
+  const decorate = react.useCallback(
+    (entry) => {
+      const ranges = computeDecorations(entry, editor, rehypePlugins);
+      if (remoteCursorRanges.length > 0) {
+        const [, path] = entry;
+        for (const cursorRange of remoteCursorRanges) {
+          try {
+            const intersection = slate.Range.intersection(
+              cursorRange,
+              slate.Editor.range(editor, path)
+            );
+            if (intersection) {
+              ranges.push({
+                ...intersection,
+                remoteCursor: cursorRange.remoteCursor,
+                remoteCursorCaret: cursorRange.remoteCursorCaret
+              });
+            }
+          } catch {
+          }
+        }
+      }
+      return ranges;
+    },
+    [editor, rehypePlugins, remoteCursorRanges]
+  );
+  const [activePlugin, setActivePlugin] = react.useState(null);
+  const pluginPositionRef = react.useRef({
+    top: 0,
+    left: 0
+  });
+  const wrapperRef = react.useRef(null);
+  const editorElRef = react.useRef(null);
+  const getCursorPosition = react.useCallback(() => {
+    try {
+      const domSelection = window.getSelection();
+      if (!domSelection || domSelection.rangeCount === 0)
+        return { top: 0, left: 0 };
+      const range = domSelection.getRangeAt(0);
+      let rect = range.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0 && domSelection.anchorNode) {
+        const node = domSelection.anchorNode instanceof HTMLElement ? domSelection.anchorNode : domSelection.anchorNode.parentElement;
+        if (node) rect = node.getBoundingClientRect();
+      }
+      const wrapperEl = wrapperRef.current;
+      if (!wrapperEl) return { top: 0, left: 0 };
+      const wrapperRect = wrapperEl.getBoundingClientRect();
+      return {
+        top: rect.bottom - wrapperRect.top + 4,
+        left: rect.left - wrapperRect.left
+      };
+    } catch {
+      return { top: 0, left: 0 };
+    }
+  }, []);
+  const wrapSelection = react.useCallback(
+    (before, after) => {
+      const { selection } = editor;
+      if (!selection) return;
+      const selectedText = slate.Editor.string(editor, selection);
+      if (selectedText.startsWith(before) && selectedText.endsWith(after) && selectedText.length >= before.length + after.length) {
+        slate.Transforms.delete(editor);
+        slate.Transforms.insertText(
+          editor,
+          selectedText.slice(before.length, -after.length || void 0)
+        );
+        return;
+      }
+      const { anchor, focus } = selection;
+      const [start, end] = slate.Range.isForward(selection) ? [anchor, focus] : [focus, anchor];
+      const beforeStart = {
+        path: start.path,
+        offset: Math.max(0, start.offset - before.length)
+      };
+      const afterEnd = { path: end.path, offset: end.offset + after.length };
+      try {
+        const textBefore = slate.Editor.string(editor, {
+          anchor: beforeStart,
+          focus: start
+        });
+        const textAfter = slate.Editor.string(editor, {
+          anchor: end,
+          focus: afterEnd
+        });
+        if (textBefore === before && textAfter === after) {
+          const expandedRange = { anchor: beforeStart, focus: afterEnd };
+          slate.Transforms.select(editor, expandedRange);
+          slate.Transforms.delete(editor);
+          slate.Transforms.insertText(editor, selectedText);
+          return;
+        }
+      } catch {
+      }
+      slate.Transforms.delete(editor);
+      slate.Transforms.insertText(editor, `${before}${selectedText}${after}`);
+    },
+    [editor]
+  );
+  const insertTextAtCursor = react.useCallback(
+    (text) => {
+      slateReact.ReactEditor.focus(editor);
+      const nodes = deserialize(text);
+      slate.Transforms.insertFragment(editor, nodes);
+    },
+    [editor]
+  );
+  const dismissPlugin = react.useCallback(() => {
+    setActivePlugin(null);
+    slateReact.ReactEditor.focus(editor);
+  }, [editor]);
+  const handlePluginSelect = react.useCallback(
+    (text) => {
+      const triggerKey = activePlugin?.trigger?.key;
+      const isCharTrigger = triggerKey && !triggerKey.includes("+");
+      dismissPlugin();
+      requestAnimationFrame(() => {
+        slateReact.ReactEditor.focus(editor);
+        if (isCharTrigger) {
+          slate.Transforms.delete(editor, {
+            distance: 1,
+            unit: "character",
+            reverse: true
+          });
+        }
+        insertTextAtCursor(text);
+      });
+    },
+    [dismissPlugin, insertTextAtCursor, activePlugin, editor]
+  );
+  const makePluginProps = (plugin) => ({
+    active: plugin.trigger ? activePlugin === plugin : true,
+    query: "",
+    onSelect: handlePluginSelect,
+    onDismiss: dismissPlugin,
+    position: pluginPositionRef.current,
+    editorRef: editorElRef,
+    wrapSelection
+  });
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (activePlugin) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          dismissPlugin();
+        }
+        return;
+      }
+      for (const plugin of plugins) {
+        plugin.onKeyDown?.(event, { wrapSelection });
+        if (event.defaultPrevented) return;
+      }
+      for (const plugin of plugins) {
+        const t = plugin.trigger;
+        if (!t) continue;
+        const parts = t.key.toLowerCase().split("+").map((s) => s.trim());
+        const key = parts[parts.length - 1];
+        const mods = new Set(parts.slice(0, -1));
+        const hasModifiers = mods.size > 0;
+        const needCtrl = mods.has("control") || mods.has("ctrl");
+        const needMeta = mods.has("meta") || mods.has("cmd") || mods.has("command");
+        const needAlt = mods.has("alt");
+        const needShift = mods.has("shift");
+        const keyMatch = event.key.toLowerCase() === key;
+        const modMatch = hasModifiers ? event.ctrlKey === needCtrl && event.metaKey === needMeta && event.altKey === needAlt && event.shiftKey === needShift : !event.ctrlKey && !event.metaKey;
+        if (keyMatch && modMatch) {
+          if (hasModifiers) event.preventDefault();
+          pluginPositionRef.current = getCursorPosition();
+          setActivePlugin(plugin);
+          return;
+        }
+      }
+      if (event.key === "a" && (event.metaKey || event.ctrlKey) && !slate.Node.string(editor).trim()) {
+        event.preventDefault();
+        return;
+      }
+    },
+    [
+      plugins,
+      activePlugin,
+      editor,
+      getCursorPosition,
+      dismissPlugin,
+      wrapSelection
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: `inkwell-editor-wrapper ${className ?? ""}`,
+      children: [
+        activePlugin && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "inkwell-plugin-backdrop",
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 999,
+              background: "transparent"
+            },
+            onMouseDown: dismissPlugin
+          }
+        ),
+        plugins.map((plugin) => {
+          const props = makePluginProps(plugin);
+          if (!props.active) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: plugin.render(props) }, plugin.name);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          slateReact.Slate,
+          {
+            editor,
+            initialValue,
+            onChange: handleChange,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              slateReact.Editable,
+              {
+                ref: editorElRef,
+                className: "inkwell-editor",
+                renderElement: RenderElement,
+                renderLeaf: RenderLeaf,
+                decorate,
+                placeholder: placeholder ?? "Start writing...",
+                spellCheck: true,
+                role: "textbox",
+                "aria-multiline": true,
+                "aria-placeholder": placeholder,
+                "data-placeholder": placeholder ?? "Start writing...",
+                onKeyDown: handleKeyDown
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var cls2 = pluginClass("snippets");
+function SnippetPicker({
+  snippets,
+  onSelect,
+  onDismiss
+}) {
+  const [selectedIndex, setSelectedIndex] = react.useState(0);
+  const [search, setSearch] = react.useState("");
+  const filtered = snippets.filter(
+    (s) => s.title.toLowerCase().includes(search.toLowerCase())
+  );
+  const focusRef = react.useCallback((el) => {
+    if (el) requestAnimationFrame(() => el.focus());
+  }, []);
+  const activeItemRef = react.useCallback((el) => {
+    if (el && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({ block: "nearest" });
+    }
+  }, []);
+  const handleSearchKeyDown = react.useCallback(
+    (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) => prev < filtered.length - 1 ? prev + 1 : 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => prev > 0 ? prev - 1 : filtered.length - 1);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (filtered[selectedIndex]) {
+            onSelect(filtered[selectedIndex].content);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onDismiss();
+          break;
+      }
+    },
+    [filtered, selectedIndex, onSelect, onDismiss]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls2("picker"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: focusRef,
+        type: "text",
+        placeholder: "Search snippets...",
+        value: search,
+        onChange: (e) => {
+          setSearch(e.target.value);
+          setSelectedIndex(0);
+        },
+        onKeyDown: handleSearchKeyDown,
+        className: cls2("search")
+      }
+    ),
+    filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2("empty"), children: "No snippets found" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: filtered.map((snippet, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: i === selectedIndex ? activeItemRef : void 0,
+        "data-snippet-item": true,
+        className: `${cls2("item")} ${i === selectedIndex ? cls2("item-active") : ""}`,
+        onMouseEnter: () => setSelectedIndex(i),
+        onClick: () => onSelect(snippet.content),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2("title"), children: snippet.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2("preview"), children: snippet.content.length > 80 ? `${snippet.content.slice(0, 80)}...` : snippet.content })
+        ]
+      },
+      snippet.title
+    )) })
+  ] });
+}
+function createSnippetsPlugin(options) {
+  const { snippets, key = "[" } = options;
+  return {
+    name: "snippets",
+    trigger: { key },
+    render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cls2("popup"),
+        style: {
+          position: "absolute",
+          top: props.position.top,
+          left: props.position.left,
+          zIndex: 1001
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(SnippetPicker, { snippets, ...props })
+      }
+    )
+  };
+}
+var processor = unified.unified().use(rehypeParse__default.default, { fragment: true }).use(rehypeRemark__default.default).use(remarkGfm__default.default).use(remarkNoTables).use(remarkStringify__default.default, {
+  bullet: "-",
+  emphasis: "_",
+  strong: "*",
+  fences: true,
+  handlers: {
+    // Don't escape markdown syntax in text nodes — this allows users to
+    // type markdown directly in the editor (e.g. _foo_ for italic,
+    // # for headings) and have it rendered via the markdown pipeline.
+    text(node) {
+      return node.value;
+    }
+  }
+});
+function serializeToMarkdown(html) {
+  return String(processor.processSync(html)).trim();
+}
+function CopyCodeBlock({
+  children,
+  ...props
+}) {
+  const preRef = react.useRef(null);
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = react.useCallback(() => {
+    const text = preRef.current?.textContent ?? "";
+    navigator.clipboard.writeText(text).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inkwell-renderer-code-block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "inkwell-renderer-copy-btn",
+        onClick: handleCopy,
+        "aria-label": "Copy code",
+        children: copied ? /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { ref: preRef, ...props, children })
+  ] });
+}
+function createProcessor(options = {}) {
+  const proc = unified.unified().use(remarkParse__default.default).use(remarkGfm__default.default).use(remarkNoTables).use(remarkFlattenBlockquotes).use(remarkRehype__default.default);
+  const plugins = options.rehypePlugins ?? [
+    [rehypeHighlight__default.default, { detect: true }]
+  ];
+  for (const plugin of plugins) {
+    if (Array.isArray(plugin)) {
+      proc.use(plugin[0], plugin[1]);
+    } else {
+      proc.use(plugin);
+    }
+  }
+  proc.use(rehypeSanitize__default.default, {
+    ...rehypeSanitize.defaultSchema,
+    tagNames: [...rehypeSanitize.defaultSchema.tagNames ?? [], "span"],
+    attributes: {
+      ...rehypeSanitize.defaultSchema.attributes,
+      code: ["className"],
+      span: ["className"]
+    }
+  });
+  proc.use(rehypeReact__default.default, {
+    createElement: react.createElement,
+    Fragment: react.Fragment,
+    jsx: jsxRuntime.jsx,
+    jsxs: jsxRuntime.jsxs,
+    components: options.components ?? {}
+  });
+  return proc;
+}
+function escapeBareBq2(markdown) {
+  return markdown.replace(/^>(?=\S)/gm, "\\>");
+}
+function parseMarkdown(markdown, components, rehypePlugins) {
+  const processor2 = createProcessor({ components, rehypePlugins });
+  const file = processor2.processSync(escapeBareBq2(markdown));
+  return file.result;
+}
+function InkwellRenderer({
+  content,
+  className,
+  components,
+  rehypePlugins,
+  copyButton = true
+}) {
+  const mergedComponents = react.useMemo(() => {
+    if (!copyButton) return components;
+    return { pre: CopyCodeBlock, ...components };
+  }, [copyButton, components]);
+  const rendered = react.useMemo(
+    () => parseMarkdown(content, mergedComponents, rehypePlugins),
+    [content, mergedComponents, rehypePlugins]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `inkwell-renderer ${className ?? ""}`, children: rendered });
+}
+
+exports.InkwellEditor = InkwellEditor;
+exports.InkwellRenderer = InkwellRenderer;
+exports.createBubbleMenuPlugin = createBubbleMenuPlugin;
+exports.createSnippetsPlugin = createSnippetsPlugin;
+exports.defaultBubbleMenuItems = defaultBubbleMenuItems;
+exports.deserialize = deserialize;
+exports.parseMarkdown = parseMarkdown;
+exports.pluginClass = pluginClass;
+exports.serializeToMarkdown = serializeToMarkdown;