@tessera-editor/react 0.1.0

package/dist/index.js

@@ -0,0 +1,2006 @@
+// src/Tessera.tsx
+import { useCallback as useCallback3, useEffect as useEffect12, useMemo, useRef as useRef7, useState as useState13 } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { DragHandle } from "@tiptap/extension-drag-handle-react";
+import {
+  createTesseraExtensions,
+  createTesseraT
+} from "@tessera-editor/core";
+import { createAiController, aiSlashItems as aiSlashItems2 } from "@tessera-editor/ai";
+
+// src/ImageNodeView.tsx
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import { ImageBlock } from "@tessera-editor/core";
+import { useContext as useContext2, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var TesseraContext = createContext(null);
+function useTesseraContext() {
+  const ctx = useContext(TesseraContext);
+  if (!ctx) {
+    throw new Error("Tessera: useTesseraContext outside provider");
+  }
+  return ctx;
+}
+
+// src/ImageNodeView.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AiImageNodeView({ node, updateAttributes, selected, decorations }) {
+  console.log("[imgview] decorations:", Array.isArray(decorations), decorations?.length);
+  const galleryAttrs = (() => {
+    for (const deco of decorations ?? []) {
+      const attrs = deco.type?.attrs;
+      if (attrs && "data-gallery" in attrs) {
+        return attrs;
+      }
+    }
+    return null;
+  })();
+  const { t } = useContext2(TesseraContext);
+  const imgRef = useRef(null);
+  const [preview, setPreview] = useState(null);
+  useEffect(() => {
+    if (!preview) return;
+    const close = (e) => {
+      if (e.key === "Escape") setPreview(null);
+    };
+    window.addEventListener("keydown", close);
+    return () => window.removeEventListener("keydown", close);
+  }, [preview]);
+  const { src, alt, width, align } = node.attrs;
+  const startResize = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startWidth = imgRef.current?.getBoundingClientRect().width ?? width ?? 400;
+    const onMove = (e) => {
+      const next = Math.round(Math.max(80, Math.min(startWidth + (e.clientX - startX), 1200)));
+      updateAttributes({ width: next });
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  if (!src) {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "tessera-image tessera-image-empty", "data-selected": selected, children: /* @__PURE__ */ jsx("span", { children: t("imageUploadFailed") }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      className: "tessera-image",
+      "data-align": align,
+      "data-selected": selected,
+      "data-gallery": galleryAttrs ? "true" : void 0,
+      "data-gallery-index": galleryAttrs?.["data-gallery-index"],
+      "data-gallery-size": galleryAttrs?.["data-gallery-size"],
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "tessera-image-frame", style: width ? { width: `${width}px` } : void 0, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref: imgRef,
+              src,
+              alt: alt ?? "",
+              draggable: false,
+              style: { cursor: "zoom-in" },
+              onClick: (e) => {
+                e.stopPropagation();
+                setPreview(src);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "tessera-image-resize", onPointerDown: startResize, title: "\u2194" })
+        ] }),
+        preview ? createPortal(
+          /* @__PURE__ */ jsx("div", { className: "tessera-lightbox", onClick: () => setPreview(null), children: /* @__PURE__ */ jsx("img", { src: preview, alt: alt ?? "" }) }),
+          document.body
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "tessera-image-align", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", title: t("imageAlignLeft"), "data-on": align === "left", onClick: () => updateAttributes({ align: "left" }), children: "\u2B70" }),
+          /* @__PURE__ */ jsx("button", { type: "button", title: t("imageAlignCenter"), "data-on": align === "center", onClick: () => updateAttributes({ align: "center" }), children: "\u2B64" }),
+          /* @__PURE__ */ jsx("button", { type: "button", title: t("imageAlignFull"), "data-on": align === "full", onClick: () => updateAttributes({ align: "full" }), children: "\u2B65" })
+        ] })
+      ]
+    }
+  );
+}
+var ImageBlockView = ImageBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(AiImageNodeView);
+  }
+});
+
+// src/TableNodeViews.tsx
+import { useContext as useContext3, useState as useState2 } from "react";
+import { NodeViewWrapper as NodeViewWrapper2, NodeViewContent, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
+import {
+  AiTableCell,
+  AiTableHeader,
+  TABLE_COLUMN_KINDS,
+  tableToCsvAt
+} from "@tessera-editor/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function kindLabel(t, kind) {
+  switch (kind) {
+    case "checkbox":
+      return t("colTypeCheckbox");
+    case "select":
+      return t("colTypeSelect");
+    case "multiSelect":
+      return t("colTypeMultiSelect");
+    case "number":
+      return t("colTypeNumber");
+    case "date":
+      return t("colTypeDate");
+    case "link":
+      return t("colTypeLink");
+    default:
+      return t("colTypeText");
+  }
+}
+function columnIndex(props) {
+  const pos = props.getPos();
+  if (typeof pos !== "number") {
+    return 0;
+  }
+  const $pos = props.editor.state.doc.resolve(pos);
+  return $pos.index($pos.depth);
+}
+function AiTableHeaderView(props) {
+  const { editor, t } = useContext3(TesseraContext);
+  const [open, setOpen] = useState2(false);
+  const index = columnIndex(props);
+  const run = (fn) => {
+    setOpen(false);
+    const pos = props.getPos();
+    if (typeof pos === "number") {
+      editor.commands.setTextSelection(pos + 2);
+    }
+    void fn();
+  };
+  return /* @__PURE__ */ jsxs2(NodeViewWrapper2, { as: "th", className: "tessera-th", "data-index": index, children: [
+    /* @__PURE__ */ jsx2(NodeViewContent, { className: "tessera-th-content" }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "tessera-col-menu-btn",
+        contentEditable: false,
+        title: t("colMenuTitle"),
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => setOpen((v) => !v),
+        children: "\u2304"
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs2("div", { className: "tessera-popover tessera-col-menu", contentEditable: false, onMouseDown: (e) => e.preventDefault(), children: [
+      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-section", children: TABLE_COLUMN_KINDS.map((kind) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.setColumnType(index, kind)), children: kindLabel(t, kind) }, kind)) }),
+      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.sortTableByColumn(index, "asc")), children: t("colMenuSortAsc") }),
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.sortTableByColumn(index, "desc")), children: t("colMenuSortDesc") }),
+      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.addColumnBefore()), children: t("colMenuInsertLeft") }),
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.addColumnAfter()), children: t("colMenuInsertRight") }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "tessera-danger", onClick: () => run(() => editor.commands.deleteColumn()), children: t("colMenuDelete") }),
+      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.toggleHeaderRow()), children: t("tableToggleHeader") }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: () => run(() => {
+            const csv = tableToCsvAt(editor);
+            if (csv) {
+              void navigator.clipboard.writeText(csv);
+            }
+          }),
+          children: t("tableCopyCsv")
+        }
+      ),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "tessera-danger", onClick: () => run(() => editor.commands.deleteTable()), children: t("tableDelete") })
+    ] }) : null
+  ] });
+}
+function AiTableCellView(props) {
+  const { editor } = useContext3(TesseraContext);
+  const value = props.node.attrs.value;
+  const kind = (() => {
+    const pos = props.getPos();
+    if (typeof pos !== "number") {
+      return "text";
+    }
+    const $pos = editor.state.doc.resolve(pos);
+    let tableDepth = -1;
+    for (let d = $pos.depth; d >= 1; d--) {
+      if ($pos.node(d).type.name === "table") {
+        tableDepth = d;
+        break;
+      }
+    }
+    if (tableDepth < 1) {
+      return "text";
+    }
+    const table = $pos.node(tableDepth);
+    const rowDepth = tableDepth + 1;
+    const cellIndex = $pos.index(rowDepth);
+    const types = Array.isArray(table.attrs.types) ? table.attrs.types : [];
+    return types[cellIndex] ?? "text";
+  })();
+  if (kind === "text") {
+    return /* @__PURE__ */ jsx2(NodeViewWrapper2, { as: "td", className: "tessera-td", children: /* @__PURE__ */ jsx2(NodeViewContent, {}) });
+  }
+  const setValue = (next) => props.updateAttributes({ value: next });
+  return /* @__PURE__ */ jsxs2(NodeViewWrapper2, { as: "td", className: `tessera-td tessera-td--${kind}`, children: [
+    /* @__PURE__ */ jsx2(NodeViewContent, { className: "tessera-td-hidden" }),
+    kind === "checkbox" ? /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "checkbox",
+        className: "tessera-cell-checkbox",
+        checked: value === true || value === "true",
+        onChange: (e) => setValue(e.target.checked),
+        contentEditable: false
+      }
+    ) : null,
+    kind === "number" ? /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "number",
+        className: "tessera-cell-input",
+        value: typeof value === "number" ? value : "",
+        placeholder: "\u2014",
+        onChange: (e) => setValue(e.target.value === "" ? null : Number(e.target.value)),
+        contentEditable: false
+      }
+    ) : null,
+    kind === "date" ? /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "date",
+        className: "tessera-cell-input",
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => setValue(e.target.value || null),
+        contentEditable: false
+      }
+    ) : null,
+    kind === "select" || kind === "multiSelect" ? /* @__PURE__ */ jsx2(
+      TagEditor,
+      {
+        multi: kind === "multiSelect",
+        value: Array.isArray(value) ? value : value ? [String(value)] : [],
+        onChange: (tags) => setValue(kind === "multiSelect" ? tags : tags[0] ?? null)
+      }
+    ) : null,
+    kind === "link" ? /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "url",
+        className: "tessera-cell-input",
+        placeholder: "https://\u2026",
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => setValue(e.target.value || null),
+        contentEditable: false
+      }
+    ) : null
+  ] });
+}
+function TagEditor({ multi, value, onChange }) {
+  const [input, setInput] = useState2("");
+  const commit = () => {
+    const tag = input.trim();
+    if (!tag) {
+      return;
+    }
+    const next = multi ? Array.from(/* @__PURE__ */ new Set([...value, tag])) : [tag];
+    onChange(next);
+    setInput("");
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "tessera-cell-tags", contentEditable: false, children: [
+    value.map((tag) => /* @__PURE__ */ jsxs2("span", { className: "tessera-tag", children: [
+      tag,
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "tessera-tag-x",
+          onClick: () => onChange(value.filter((v) => v !== tag)),
+          children: "\xD7"
+        }
+      )
+    ] }, tag)),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        className: "tessera-cell-input tessera-cell-taginput",
+        value: input,
+        placeholder: multi ? "+ \u6807\u7B7E" : "+ \u6807\u7B7E",
+        onChange: (e) => setInput(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          }
+        },
+        onBlur: commit
+      }
+    )
+  ] });
+}
+var AiTableCellViewExtension = AiTableCell.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer2(AiTableCellView);
+  }
+});
+var AiTableHeaderViewExtension = AiTableHeader.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer2(AiTableHeaderView);
+  }
+});
+
+// src/EmbedTocViews.tsx
+import { useContext as useContext4, useEffect as useEffect2, useState as useState3 } from "react";
+import { NodeViewWrapper as NodeViewWrapper3, ReactNodeViewRenderer as ReactNodeViewRenderer3 } from "@tiptap/react";
+import { EmbedBlock, TocBlock } from "@tessera-editor/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function EmbedView({ node, updateAttributes, selected }) {
+  const { t } = useContext4(TesseraContext);
+  const [url, setUrl] = useState3(typeof node.attrs.src === "string" ? node.attrs.src : "");
+  const src = typeof node.attrs.src === "string" ? node.attrs.src : "";
+  const height = typeof node.attrs.height === "number" ? node.attrs.height : 360;
+  if (!src) {
+    return /* @__PURE__ */ jsxs3(NodeViewWrapper3, { className: "tessera-embed tessera-embed-empty", "data-selected": selected, children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          className: "tessera-embed-input",
+          value: url,
+          placeholder: t("embedPlaceholder"),
+          onChange: (e) => setUrl(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              apply();
+            }
+          },
+          contentEditable: false
+        }
+      ),
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "tessera-embed-apply", onClick: apply, contentEditable: false, children: t("embedApply") })
+    ] });
+  }
+  function apply() {
+    const next = url.trim();
+    if (/^https?:\/\/.+/.test(next)) {
+      updateAttributes({ src: next });
+    }
+  }
+  return /* @__PURE__ */ jsxs3(NodeViewWrapper3, { className: "tessera-embed", "data-selected": selected, children: [
+    /* @__PURE__ */ jsx3("div", { className: "tessera-embed-frame", style: { height: `${height}px` }, contentEditable: false, children: /* @__PURE__ */ jsx3(
+      "iframe",
+      {
+        src,
+        title: node.attrs.title ?? src,
+        sandbox: "",
+        referrerPolicy: "no-referrer",
+        loading: "lazy"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("a", { className: "tessera-embed-link", href: src, target: "_blank", rel: "noreferrer", contentEditable: false, children: [
+      t("embedOpen"),
+      " \u2197"
+    ] })
+  ] });
+}
+function TocView({ editor }) {
+  const { t } = useContext4(TesseraContext);
+  const [items, setItems] = useState3([]);
+  useEffect2(() => {
+    const scan = () => {
+      const found = [];
+      editor.state.doc.forEach((node, _offset, index) => {
+        void index;
+        if (node.type.name === "heading" && typeof node.attrs.id === "string") {
+          found.push({ id: node.attrs.id, level: Number(node.attrs.level), text: node.textContent });
+        }
+      });
+      setItems(found);
+    };
+    scan();
+    editor.on("transaction", scan);
+    return () => {
+      editor.off("transaction", scan);
+    };
+  }, [editor]);
+  return /* @__PURE__ */ jsxs3(NodeViewWrapper3, { className: "tessera-toc", children: [
+    /* @__PURE__ */ jsx3("div", { className: "tessera-toc-title", children: t("itemToc") }),
+    items.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "tessera-toc-empty", children: t("tocEmpty") }) : /* @__PURE__ */ jsx3("div", { className: "tessera-toc-list", contentEditable: false, children: items.map((item) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "tessera-toc-item",
+        "data-level": item.level,
+        onClick: () => {
+          document.querySelector(`[data-id="${item.id}"]`)?.scrollIntoView({ behavior: "smooth", block: "start" });
+        },
+        children: item.text
+      },
+      item.id
+    )) })
+  ] });
+}
+var EmbedBlockView = EmbedBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer3(EmbedView);
+  }
+});
+var TocBlockView = TocBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer3(TocView);
+  }
+});
+
+// src/SlashMenu.tsx
+import { useEffect as useEffect3, useImperativeHandle, useRef as useRef2, useState as useState4, forwardRef } from "react";
+import { ReactRenderer } from "@tiptap/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SlashMenuView = forwardRef(
+  function SlashMenuView2({ items, command, clientRect, t }, ref) {
+    const [selectedIndex, setSelectedIndex] = useState4(0);
+    const listRef = useRef2(null);
+    const [rect, setRect] = useState4(null);
+    useEffect3(() => {
+      setRect(clientRect?.() ?? null);
+    }, [items, clientRect]);
+    useEffect3(() => {
+      setSelectedIndex(0);
+    }, [items]);
+    useEffect3(() => {
+      listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "nearest" });
+    }, [selectedIndex]);
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === "ArrowDown") {
+          setSelectedIndex((i) => (i + 1) % Math.max(items.length, 1));
+          return true;
+        }
+        if (event.key === "ArrowUp") {
+          setSelectedIndex((i) => (i - 1 + Math.max(items.length, 1)) % Math.max(items.length, 1));
+          return true;
+        }
+        if (event.key === "Enter") {
+          const item = items[selectedIndex];
+          if (item) {
+            command(item);
+          }
+          return true;
+        }
+        return false;
+      }
+    }));
+    if (items.length === 0) {
+      return null;
+    }
+    const groups = groupBy(items, (item) => item.group);
+    let flatIndex = -1;
+    const style = rect ? (() => {
+      const menuMax = 336;
+      const fitsBelow = rect.bottom + 8 + menuMax <= window.innerHeight;
+      const fitsAbove = rect.top - 8 - menuMax >= 0;
+      const flip = !fitsBelow && fitsAbove;
+      return {
+        position: "fixed",
+        left: `${Math.min(rect.left, window.innerWidth - 340)}px`,
+        top: flip ? void 0 : `${Math.min(rect.bottom + 8, window.innerHeight - menuMax)}px`,
+        bottom: flip ? `${window.innerHeight - rect.top + 8}px` : void 0,
+        width: 320
+      };
+    })() : { position: "fixed", left: -9999, top: -9999 };
+    return /* @__PURE__ */ jsx4("div", { className: "tessera-slash-menu", style, "data-testid": "slash-menu", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ jsxs4("div", { className: "tessera-slash-group", children: [
+      /* @__PURE__ */ jsx4("div", { className: "tessera-slash-group-title", children: group === "ai" ? t("groupAi") : group === "advanced" ? t("groupAdvanced") : t("groupBasic") }),
+      groupItems.map((item) => {
+        flatIndex += 1;
+        const idx = flatIndex;
+        return /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            className: "tessera-slash-item",
+            "data-selected": idx === selectedIndex,
+            onMouseEnter: () => setSelectedIndex(idx),
+            onClick: () => command(item),
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "tessera-slash-item-title", children: item.title }),
+              /* @__PURE__ */ jsx4("span", { className: "tessera-slash-item-desc", children: item.description }),
+              item.shortcut ? /* @__PURE__ */ jsx4("span", { className: "tessera-slash-item-shortcut", children: item.shortcut }) : null
+            ]
+          },
+          item.id
+        );
+      })
+    ] }, group)) });
+  }
+);
+function groupBy(items, key) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const k = key(item);
+    const list = map.get(k) ?? [];
+    list.push(item);
+    map.set(k, list);
+  }
+  return map;
+}
+function createSlashRenderer(t) {
+  return () => {
+    let renderer = null;
+    let wrapper = null;
+    return {
+      onStart: (props) => {
+        renderer = new ReactRenderer(SlashMenuView, {
+          props: { ...props, t },
+          editor: props.editor
+        });
+        wrapper = document.createElement("div");
+        wrapper.className = "tessera-slash-wrapper";
+        wrapper.appendChild(renderer.element);
+        const host = props.editor.view.dom.closest(".tessera-root") ?? document.body;
+        host.appendChild(wrapper);
+      },
+      onUpdate: (props) => {
+        renderer?.updateProps({ ...props, t });
+      },
+      onKeyDown: (props) => {
+        if (props.event.key === "Escape") {
+          wrapper?.remove();
+          renderer?.destroy();
+          renderer = null;
+          wrapper = null;
+          return true;
+        }
+        return renderer?.ref?.onKeyDown?.(props) ?? false;
+      },
+      onExit: () => {
+        wrapper?.remove();
+        renderer?.destroy();
+        renderer = null;
+        wrapper = null;
+      }
+    };
+  };
+}
+
+// src/EmojiMenu.tsx
+import { useEffect as useEffect4, useImperativeHandle as useImperativeHandle2, useRef as useRef3, useState as useState5, forwardRef as forwardRef2 } from "react";
+import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var EmojiMenuView = forwardRef2(function EmojiMenuView2({ items, command, clientRect }, ref) {
+  const [selectedIndex, setSelectedIndex] = useState5(0);
+  const [rect, setRect] = useState5(null);
+  const gridRef = useRef3(null);
+  useEffect4(() => {
+    setRect(clientRect?.() ?? null);
+  }, [items, clientRect]);
+  useEffect4(() => {
+    setSelectedIndex(0);
+  }, [items]);
+  useEffect4(() => {
+    gridRef.current?.querySelectorAll(".tessera-emoji-item")[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  useImperativeHandle2(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        setSelectedIndex((i) => (i + 1) % Math.max(items.length, 1));
+        return true;
+      }
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        setSelectedIndex((i) => (i - 1 + Math.max(items.length, 1)) % Math.max(items.length, 1));
+        return true;
+      }
+      if (event.key === "Enter") {
+        const item = items[selectedIndex];
+        if (item) {
+          command(item);
+        }
+        return true;
+      }
+      return false;
+    }
+  }));
+  if (items.length === 0) {
+    return null;
+  }
+  const menuMax = 264;
+  const style = rect ? (() => {
+    const fitsBelow = rect.bottom + 8 + menuMax <= window.innerHeight;
+    const fitsAbove = rect.top - 8 - menuMax >= 0;
+    const flip = !fitsBelow && fitsAbove;
+    return {
+      left: `${Math.min(rect.left, window.innerWidth - 300)}px`,
+      top: flip ? void 0 : `${Math.min(rect.bottom + 8, window.innerHeight - menuMax)}px`,
+      bottom: flip ? `${window.innerHeight - rect.top + 8}px` : void 0
+    };
+  })() : { left: -9999, top: -9999 };
+  return /* @__PURE__ */ jsx5("div", { ref: gridRef, className: "tessera-emoji-menu", style, "data-testid": "emoji-menu", children: items.map((item, i) => /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      className: "tessera-emoji-item",
+      title: `:${item.name}:`,
+      "data-selected": i === selectedIndex,
+      onMouseEnter: () => setSelectedIndex(i),
+      onClick: () => command(item),
+      children: item.char
+    },
+    item.name
+  )) });
+});
+function createEmojiRenderer() {
+  return () => {
+    let renderer = null;
+    let wrapper = null;
+    return {
+      onStart: (props) => {
+        renderer = new ReactRenderer2(EmojiMenuView, {
+          props: { ...props },
+          editor: props.editor
+        });
+        wrapper = document.createElement("div");
+        wrapper.className = "tessera-emoji-wrapper";
+        wrapper.appendChild(renderer.element);
+        const host = props.editor.view.dom.closest(".tessera-root") ?? document.body;
+        host.appendChild(wrapper);
+      },
+      onUpdate: (props) => {
+        renderer?.updateProps({ ...props });
+      },
+      onKeyDown: (props) => {
+        if (props.event.key === "Escape") {
+          wrapper?.remove();
+          renderer?.destroy();
+          renderer = null;
+          wrapper = null;
+          return true;
+        }
+        return renderer?.ref?.onKeyDown?.(props) ?? false;
+      },
+      onExit: () => {
+        wrapper?.remove();
+        renderer?.destroy();
+        renderer = null;
+        wrapper = null;
+      }
+    };
+  };
+}
+
+// src/EmptyLineToolbar.tsx
+import { useCallback, useContext as useContext5, useEffect as useEffect6, useLayoutEffect, useRef as useRef4, useState as useState7 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { defaultSlashItems } from "@tessera-editor/core";
+import { aiSlashItems } from "@tessera-editor/ai";
+
+// src/portal.ts
+import { useEffect as useEffect5, useState as useState6 } from "react";
+function useTesseraPortalRoot(editor) {
+  const [target, setTarget] = useState6(null);
+  useEffect5(() => {
+    const resolve = () => {
+      setTarget((prev) => {
+        if (prev && prev !== document.body) {
+          return prev;
+        }
+        return editor.view.dom.closest(".tessera-root") ?? document.body;
+      });
+    };
+    resolve();
+    editor.on("focus", resolve);
+    editor.on("selectionUpdate", resolve);
+    return () => {
+      editor.off("focus", resolve);
+      editor.off("selectionUpdate", resolve);
+    };
+  }, [editor]);
+  return target;
+}
+
+// src/EmptyLineToolbar.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function buildItems(editor, t, hasAi) {
+  const base = defaultSlashItems(t);
+  if (!hasAi) {
+    return base;
+  }
+  return base;
+}
+function EmptyLineToolbar() {
+  const { editor, t, ai } = useContext5(TesseraContext);
+  const [style, setStyle] = useState7(null);
+  const [expanded, setExpanded] = useState7(false);
+  const [panelPlacement, setPanelPlacement] = useState7("bottom");
+  const [panelMaxHeight, setPanelMaxHeight] = useState7(void 0);
+  const composingRef = useRef4(false);
+  const rootRef = useRef4(null);
+  const panelRef = useRef4(null);
+  const portalRoot = useTesseraPortalRoot(editor);
+  const hideAll = useCallback(() => {
+    setStyle(null);
+    setExpanded(false);
+    editor.view.dom.removeAttribute("data-toolbar-line");
+  }, [editor]);
+  const reposition = useCallback(() => {
+    const dom = editor.view.dom;
+    if (composingRef.current || !editor.isFocused) {
+      setStyle(null);
+      dom.removeAttribute("data-toolbar-line");
+      return;
+    }
+    const { $from, empty } = editor.state.selection;
+    const isEmptyParagraph = empty && $from.parent.type.name === "paragraph" && $from.parent.content.size === 0;
+    if (!isEmptyParagraph) {
+      setStyle(null);
+      setExpanded(false);
+      dom.removeAttribute("data-toolbar-line");
+      return;
+    }
+    const coords = editor.view.coordsAtPos($from.pos);
+    const viewRect = dom.getBoundingClientRect();
+    if (coords.top < Math.max(viewRect.top, 0) - 2 || coords.top > Math.min(viewRect.bottom, window.innerHeight) + 2) {
+      hideAll();
+      return;
+    }
+    setStyle({
+      position: "fixed",
+      // Float just ABOVE the empty line so the caret stays visible; the
+      // toolbar bottom sits a couple of pixels over the line's top edge.
+      top: `${Math.max(2, coords.top - 38)}px`,
+      left: `${coords.left}px`
+    });
+    dom.setAttribute("data-toolbar-line", "true");
+  }, [editor, hideAll]);
+  useEffect6(() => {
+    const hide = () => {
+      setStyle(null);
+      setExpanded(false);
+    };
+    const onCompositionStart = () => {
+      composingRef.current = true;
+      setStyle(null);
+    };
+    const onCompositionEnd = () => {
+      composingRef.current = false;
+      requestAnimationFrame(reposition);
+    };
+    const onScroll = (event) => {
+      const node = rootRef.current;
+      if (node && event.target instanceof Node && node.contains(event.target)) {
+        return;
+      }
+      requestAnimationFrame(reposition);
+    };
+    const dom = editor.view.dom;
+    editor.on("selectionUpdate", reposition);
+    editor.on("focus", reposition);
+    editor.on("blur", hide);
+    dom.addEventListener("compositionstart", onCompositionStart);
+    dom.addEventListener("compositionend", onCompositionEnd);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      editor.off("selectionUpdate", reposition);
+      editor.off("focus", reposition);
+      editor.off("blur", hide);
+      dom.removeEventListener("compositionstart", onCompositionStart);
+      dom.removeEventListener("compositionend", onCompositionEnd);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [editor, reposition]);
+  useLayoutEffect(() => {
+    const toolbar = rootRef.current;
+    if (!expanded || !toolbar) {
+      setPanelPlacement("bottom");
+      setPanelMaxHeight(void 0);
+      return;
+    }
+    const rect = toolbar.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const natural = panelRef.current?.offsetHeight ?? 320;
+    const flip = spaceBelow < natural + 12 && spaceAbove > spaceBelow;
+    setPanelPlacement(flip ? "top" : "bottom");
+    const avail = (flip ? spaceAbove : spaceBelow) - 12;
+    setPanelMaxHeight(avail > 120 && avail < natural ? avail : void 0);
+  }, [expanded, style]);
+  if (!style || !portalRoot) {
+    return null;
+  }
+  const items = buildItems(editor, t, !!ai);
+  const runItem = (item) => {
+    const { $from } = editor.state.selection;
+    item.command({ editor, range: { from: $from.pos, to: $from.pos } });
+    setExpanded(false);
+  };
+  return createPortal2(
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: rootRef,
+        className: "tessera-emptyline-toolbar",
+        style,
+        "data-testid": "empty-line-toolbar",
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "tessera-tb-btn", title: t("itemText"), onClick: () => runItem(items.find((i) => i.id === "text")), children: "\xB6" }),
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "tessera-tb-btn", title: t("itemH2"), onClick: () => runItem(items.find((i) => i.id === "h2")), children: "H2" }),
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "tessera-tb-btn", title: t("itemBullet"), onClick: () => runItem(items.find((i) => i.id === "bulletList")), children: "\u2022" }),
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "tessera-tb-btn", title: t("itemTask"), onClick: () => runItem(items.find((i) => i.id === "taskList")), children: "\u2611" }),
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "tessera-tb-btn", title: t("itemQuote"), onClick: () => runItem(items.find((i) => i.id === "quote")), children: "\u275D" }),
+          /* @__PURE__ */ jsx6("button", { type: "button", className: "tessera-tb-btn", title: t("itemCode"), onClick: () => runItem(items.find((i) => i.id === "codeBlock")), children: "</>" }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "tessera-tb-btn tessera-emptyline-expand",
+              title: t("emptyLineExpand"),
+              "data-expanded": expanded,
+              onClick: () => setExpanded((v) => !v),
+              children: "\u203A"
+            }
+          ),
+          expanded ? /* @__PURE__ */ jsx6(
+            "div",
+            {
+              ref: panelRef,
+              className: "tessera-emptyline-panel",
+              "data-placement": panelPlacement,
+              style: panelMaxHeight ? { maxHeight: panelMaxHeight } : void 0,
+              "data-testid": "empty-line-panel",
+              children: items.map((item) => /* @__PURE__ */ jsxs5("button", { type: "button", className: "tessera-slash-item", onClick: () => runItem(item), children: [
+                /* @__PURE__ */ jsx6("span", { className: "tessera-slash-item-title", children: item.title }),
+                /* @__PURE__ */ jsx6("span", { className: "tessera-slash-item-desc", children: item.description })
+              ] }, item.id))
+            }
+          ) : null
+        ]
+      }
+    ),
+    portalRoot
+  );
+}
+
+// src/SelectionToolbar.tsx
+import { useCallback as useCallback2, useContext as useContext7, useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState9 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { docToMarkdown } from "@tessera-editor/core";
+import { IMPROVE_PRESETS, improveSelection } from "@tessera-editor/ai";
+
+// src/CommentPanel.tsx
+import { useContext as useContext6, useEffect as useEffect7, useState as useState8 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { getCommentStore, getIdentityService, listCommentRanges } from "@tessera-editor/core";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function uid(prefix) {
+  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function CommentPanel() {
+  const { editor, t } = useContext6(TesseraContext);
+  const [visible, setVisible] = useState8(false);
+  const [threads, setThreads] = useState8([]);
+  const refresh = async () => {
+    const store2 = getCommentStore(editor);
+    if (!store2) {
+      return;
+    }
+    const all = await store2.list();
+    const ranges = listCommentRanges(editor.state);
+    const views = [];
+    for (const range of ranges) {
+      const thread = all.find((tr) => tr.id === range.threadId);
+      if (thread) {
+        views.push({ ...thread, from: range.from });
+      }
+    }
+    views.sort((a, b) => a.from - b.from);
+    setThreads(views);
+  };
+  useEffect7(() => {
+    const open = () => {
+      setVisible(true);
+      void refresh();
+    };
+    editor.on("tessera:commentPanel", open);
+    editor.on("transaction", refresh);
+    return () => {
+      editor.off("tessera:commentPanel", open);
+      editor.off("transaction", refresh);
+    };
+  }, [editor]);
+  if (!visible) {
+    return null;
+  }
+  const store = getCommentStore(editor);
+  const identity = getIdentityService(editor);
+  const me = identity?.getCurrentUser() ?? { id: "anonymous", name: "Anonymous" };
+  const toggleResolve = async (thread) => {
+    if (!store) {
+      return;
+    }
+    const next = { ...thread, resolved: !thread.resolved };
+    delete next.from;
+    await store.upsert(next);
+    editor.commands.setCommentResolved(thread.id, next.resolved);
+    await refresh();
+  };
+  const removeThread = async (thread) => {
+    if (!store) {
+      return;
+    }
+    await store.remove(thread.id);
+    editor.commands.removeCommentThread(thread.id);
+    await refresh();
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "tessera-comment-panel", "data-testid": "comment-panel", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "tessera-ask-header", children: [
+      /* @__PURE__ */ jsxs6("span", { children: [
+        t("commentTitle"),
+        " \xB7 ",
+        threads.filter((x) => !x.resolved).length
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "tessera-history-actions", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", title: "\u2191", onClick: () => editor.commands.focusNextCommentThread(), children: "\u2191" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", title: "\u2193", onClick: () => editor.commands.focusNextCommentThread(), children: "\u2193" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
+      ] })
+    ] }),
+    !store ? /* @__PURE__ */ jsx7("div", { className: "tessera-ask-error", children: "CommentStore not injected" }) : null,
+    /* @__PURE__ */ jsxs6("div", { className: "tessera-ask-body", children: [
+      threads.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "tessera-toc-empty", children: t("commentEmpty") }) : null,
+      threads.map((thread) => /* @__PURE__ */ jsxs6("div", { className: `tessera-thread${thread.resolved ? " tessera-thread--resolved" : ""}`, children: [
+        /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-quote", children: [
+          "\u201C",
+          thread.quote,
+          "\u201D"
+        ] }),
+        thread.entries.map((entry) => /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-entry", children: [
+          /* @__PURE__ */ jsx7("span", { className: "tessera-thread-author", children: entry.authorName }),
+          /* @__PURE__ */ jsx7("span", { className: "tessera-thread-text", children: entry.text })
+        ] }, entry.id)),
+        /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-actions", children: [
+          /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => void toggleResolve(thread), children: thread.resolved ? t("commentReopen") : t("commentResolve") }),
+          /* @__PURE__ */ jsx7("button", { type: "button", className: "tessera-danger", onClick: () => void removeThread(thread), children: t("commentDelete") }),
+          thread.resolved ? /* @__PURE__ */ jsx7("span", { className: "tessera-thread-badge", children: t("commentResolvedBadge") }) : null
+        ] })
+      ] }, thread.id))
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "tessera-comment-hint", children: [
+      "\u2318\u2325M / \u{1F4AC} \xB7 ",
+      me.name
+    ] })
+  ] });
+}
+function CommentComposer({ onClose }) {
+  const { editor, t } = useContext6(TesseraContext);
+  const [text, setText] = useState8("");
+  const portalRoot = useTesseraPortalRoot(editor);
+  const quote = editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to, " ");
+  const submit = async () => {
+    if (!text.trim()) {
+      return;
+    }
+    const store = getCommentStore(editor);
+    if (!store) {
+      return;
+    }
+    const identity = getIdentityService(editor);
+    const me = identity?.getCurrentUser() ?? { id: "anonymous", name: "Anonymous" };
+    const thread = {
+      id: uid("thread"),
+      quote,
+      resolved: false,
+      createdAt: Date.now(),
+      entries: [{ id: uid("c"), authorId: me.id, authorName: me.name, text: text.trim(), ts: Date.now() }]
+    };
+    await store.upsert(thread);
+    editor.commands.addCommentThread(thread.id);
+    onClose();
+    editor.emit("tessera:commentPanel", {});
+  };
+  if (!portalRoot) {
+    return null;
+  }
+  return createPortal3(
+    /* @__PURE__ */ jsxs6("div", { className: "tessera-popover tessera-comment-composer", "data-testid": "comment-composer", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-quote", children: [
+        "\u201C",
+        quote.slice(0, 60),
+        quote.length > 60 ? "\u2026" : "",
+        "\u201D"
+      ] }),
+      /* @__PURE__ */ jsx7(
+        "textarea",
+        {
+          autoFocus: true,
+          value: text,
+          placeholder: t("commentPlaceholder"),
+          onChange: (e) => setText(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              void submit();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx7("div", { className: "tessera-comment-composer-actions", children: /* @__PURE__ */ jsx7("button", { type: "button", disabled: !text.trim(), onClick: () => void submit(), children: t("commentSend") }) })
+    ] }),
+    portalRoot
+  );
+}
+
+// src/SelectionToolbar.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var TEXT_COLORS = ["#262629", "#d9414f", "#e8912d", "#31a56f", "#2f9ea8", "#4f6df5", "#7a4fd8", "#98a0ab"];
+var HIGHLIGHT_COLORS = ["#fff2a8", "#d6eaff", "#d3f5df", "#fdd9e7", "#e6dcff"];
+function FlipPopover({
+  posKey,
+  className = "",
+  testId,
+  children
+}) {
+  const ref = useRef5(null);
+  const [placement, setPlacement] = useState9("bottom");
+  const [maxHeight, setMaxHeight] = useState9(void 0);
+  useLayoutEffect2(() => {
+    const pop = ref.current;
+    const toolbar = pop?.parentElement;
+    if (!pop || !toolbar) {
+      return;
+    }
+    const rect = toolbar.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const natural = pop.offsetHeight;
+    const flip = spaceBelow < natural + 12 && spaceAbove > spaceBelow;
+    setPlacement(flip ? "top" : "bottom");
+    const avail = (flip ? spaceAbove : spaceBelow) - 12;
+    setMaxHeight(avail > 100 && avail < natural ? avail : void 0);
+  }, [posKey]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      className: `tessera-popover${className ? ` ${className}` : ""}`,
+      "data-placement": placement,
+      style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0,
+      "data-testid": testId,
+      children
+    }
+  );
+}
+function SelectionToolbar({ onSession }) {
+  const { editor, t, ai } = useContext7(TesseraContext);
+  const [style, setStyle] = useState9(null);
+  const [popover, setPopover] = useState9(null);
+  const [linkValue, setLinkValue] = useState9("");
+  const composingRef = useRef5(false);
+  const portalRoot = useTesseraPortalRoot(editor);
+  const reposition = useCallback2(() => {
+    if (composingRef.current || !editor.isFocused) {
+      setStyle(null);
+      return;
+    }
+    const { from, to, empty } = editor.state.selection;
+    if (empty) {
+      setStyle(null);
+      return;
+    }
+    if (!editor.state.doc.textBetween(from, to, " ").trim()) {
+      setStyle(null);
+      return;
+    }
+    const start = editor.view.coordsAtPos(from);
+    const end = editor.view.coordsAtPos(to);
+    const left = (Math.min(start.left, end.left) + Math.min(Math.max(start.left, end.left), window.innerWidth - 20)) / 2;
+    const top = Math.max(8, start.top - 48);
+    setStyle({
+      position: "fixed",
+      top: `${top}px`,
+      left: `${Math.max(8, Math.min(left, window.innerWidth - 380))}px`
+    });
+  }, [editor]);
+  useEffect8(() => {
+    const hide = () => {
+      setStyle(null);
+      setPopover(null);
+    };
+    const onSelectionUpdate = () => {
+      if (!editor.state.selection.empty) {
+        const existing = editor.getAttributes("link").href;
+        setLinkValue(typeof existing === "string" ? existing : "");
+      } else {
+        setPopover(null);
+      }
+      reposition();
+    };
+    const onCompositionStart = () => {
+      composingRef.current = true;
+      setStyle(null);
+      setPopover(null);
+    };
+    const onCompositionEnd = () => {
+      composingRef.current = false;
+      requestAnimationFrame(reposition);
+    };
+    const dom = editor.view.dom;
+    editor.on("selectionUpdate", onSelectionUpdate);
+    editor.on("focus", reposition);
+    editor.on("blur", hide);
+    dom.addEventListener("compositionstart", onCompositionStart);
+    dom.addEventListener("compositionend", onCompositionEnd);
+    window.addEventListener("scroll", hide, true);
+    return () => {
+      editor.off("selectionUpdate", onSelectionUpdate);
+      editor.off("focus", reposition);
+      editor.off("blur", hide);
+      dom.removeEventListener("compositionstart", onCompositionStart);
+      dom.removeEventListener("compositionend", onCompositionEnd);
+      window.removeEventListener("scroll", hide, true);
+    };
+  }, [editor, reposition]);
+  const chain = () => editor.chain().focus();
+  if (!style || !portalRoot) {
+    return null;
+  }
+  const currentColor = editor.getAttributes("textStyle").color ?? null;
+  return createPortal4(
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: "tessera-selection-toolbar",
+        style,
+        "data-testid": "selection-toolbar",
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          ai ? /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipImprove"), className: "tessera-tb-ai", onClick: () => setPopover((p) => p === "improve" ? null : "improve"), children: "\u2728" }) : null,
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipBold"), active: editor.isActive("bold"), onClick: () => chain().toggleBold().run(), children: /* @__PURE__ */ jsx8("b", { children: "B" }) }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipItalic"), active: editor.isActive("italic"), onClick: () => chain().toggleItalic().run(), children: /* @__PURE__ */ jsx8("i", { children: "I" }) }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipUnderline"), active: editor.isActive("underline"), onClick: () => chain().toggleUnderline().run(), children: /* @__PURE__ */ jsx8("u", { children: "U" }) }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipStrike"), active: editor.isActive("strike"), onClick: () => chain().toggleStrike().run(), children: /* @__PURE__ */ jsx8("s", { children: "S" }) }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipCode"), active: editor.isActive("code"), onClick: () => chain().toggleCode().run(), children: "</>" }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipColor"), active: !!currentColor, onClick: () => setPopover((p) => p === "color" ? null : "color"), children: /* @__PURE__ */ jsx8("span", { className: "tessera-tb-colorchip", style: { background: currentColor ?? "#262629" } }) }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipHighlight"), active: editor.isActive("highlight"), onClick: () => setPopover((p) => p === "highlight" ? null : "highlight"), children: /* @__PURE__ */ jsx8("span", { className: "tessera-tb-colorchip", style: { background: "#fff2a8" } }) }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipLink"), active: editor.isActive("link"), onClick: () => setPopover((p) => p === "link" ? null : "link"), children: "\u{1F517}" }),
+          /* @__PURE__ */ jsx8(
+            TbBtn,
+            {
+              title: t("tooltipCommentV11"),
+              active: editor.isActive("comment"),
+              onClick: () => setPopover((p) => p === "comment" ? null : "comment"),
+              children: "\u{1F4AC}"
+            }
+          ),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipTurnCollapsible"), onClick: () => chain().insertCollapsible().run(), children: "\u25B8" }),
+          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipMore"), onClick: () => setPopover((p) => p === "more" ? null : "more"), children: "\u22EF" }),
+          popover === "color" ? /* @__PURE__ */ jsxs7(FlipPopover, { posKey: style, children: [
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch tessera-color-none", title: t("colorDefault"), onClick: () => chain().unsetColor().run() }),
+            TEXT_COLORS.map((color) => /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch", style: { background: color }, onClick: () => chain().setColor(color).run() }, color))
+          ] }) : null,
+          popover === "highlight" ? /* @__PURE__ */ jsxs7(FlipPopover, { posKey: style, children: [
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch tessera-color-none", title: t("highlightNone"), onClick: () => chain().unsetHighlight().run() }),
+            HIGHLIGHT_COLORS.map((color) => /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch", style: { background: color }, onClick: () => chain().toggleHighlight({ color }).run() }, color))
+          ] }) : null,
+          popover === "link" ? /* @__PURE__ */ jsxs7(FlipPopover, { posKey: style, className: "tessera-link-popover", children: [
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                autoFocus: true,
+                value: linkValue,
+                placeholder: t("linkPlaceholder"),
+                onChange: (e) => setLinkValue(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && linkValue.trim()) {
+                    chain().toggleLink({ href: linkValue.trim() }).run();
+                    setPopover(null);
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  if (linkValue.trim()) {
+                    chain().toggleLink({ href: linkValue.trim() }).run();
+                  }
+                  setPopover(null);
+                },
+                children: t("linkApply")
+              }
+            ),
+            editor.isActive("link") ? /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "tessera-danger",
+                onClick: () => {
+                  chain().unsetLink().run();
+                  setPopover(null);
+                },
+                children: t("linkRemove")
+              }
+            ) : null
+          ] }) : null,
+          popover === "more" ? /* @__PURE__ */ jsx8(FlipPopover, { posKey: style, className: "tessera-popover-menu", children: /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: async () => {
+                const { to } = editor.state.selection;
+                const start = editor.state.selection.$from.before(1);
+                const sliced = editor.state.doc.cut(start, to);
+                await navigator.clipboard.writeText(docToMarkdown(sliced, editor.state.schema));
+                setPopover(null);
+              },
+              children: t("tooltipCopyMarkdown")
+            }
+          ) }) : null,
+          popover === "improve" ? /* @__PURE__ */ jsx8(ImprovePopover, { posKey: style, onSession, onClose: () => setPopover(null) }) : null,
+          popover === "comment" ? /* @__PURE__ */ jsx8(CommentComposer, { onClose: () => setPopover(null) }) : null
+        ]
+      }
+    ),
+    portalRoot
+  );
+}
+function TbBtn({
+  title,
+  active,
+  className,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      className: `tessera-tb-btn${className ? ` ${className}` : ""}`,
+      "data-active": active ?? false,
+      onClick,
+      children
+    }
+  );
+}
+function ImprovePopover({
+  posKey,
+  onSession,
+  onClose
+}) {
+  const { editor, t, locale, ai } = useContext7(TesseraContext);
+  const [instruction, setInstruction] = useState9("");
+  const [busy, setBusy] = useState9(false);
+  const [error, setError] = useState9(null);
+  const run = async (presetInstruction) => {
+    if (!ai) {
+      setError(t("aiRuntimeMissing"));
+      return;
+    }
+    onClose();
+    setBusy(true);
+    try {
+      const session = await improveSelection(editor, ai.runtime, { instruction: presetInstruction });
+      onSession(session);
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs7(FlipPopover, { posKey, className: "tessera-improve-popover", testId: "improve-popover", children: [
+    IMPROVE_PRESETS.map((preset) => /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy, onClick: () => run(preset.instruction), children: locale === "zh-CN" ? preset.labelZh : preset.labelEn }, preset.id)),
+    /* @__PURE__ */ jsxs7("div", { className: "tessera-improve-custom", children: [
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          value: instruction,
+          placeholder: t("aiImprovePrompt"),
+          onChange: (e) => setInstruction(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && instruction.trim()) {
+              run(instruction.trim());
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy || !instruction.trim(), onClick: () => run(instruction.trim()), children: t("aiImproveRun") })
+    ] }),
+    error ? /* @__PURE__ */ jsx8("div", { className: "tessera-popover-error", children: error }) : null
+  ] });
+}
+
+// src/Panels.tsx
+import { useContext as useContext8, useEffect as useEffect9, useRef as useRef6, useState as useState10 } from "react";
+import { findReplaceKey } from "@tessera-editor/core";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function FindReplacePanel() {
+  const { editor, t } = useContext8(TesseraContext);
+  const [visible, setVisible] = useState10(false);
+  const [query, setQuery] = useState10("");
+  const [replacement, setReplacement] = useState10("");
+  const [count, setCount] = useState10(0);
+  const [active, setActive] = useState10(0);
+  const queryRef = useRef6(query);
+  queryRef.current = query;
+  useEffect9(() => {
+    const open = () => {
+      setVisible(true);
+      requestAnimationFrame(() => {
+        const input = document.querySelector(".tessera-find-input");
+        input?.focus();
+      });
+    };
+    editor.on("tessera:findPanel", open);
+    const sync = () => {
+      const s = findReplaceKey.getState(editor.state);
+      if (!s) {
+        return;
+      }
+      setVisible(s.visible);
+      setCount(s.matches.length);
+      setActive(s.active);
+      if (s.query !== queryRef.current && !s.visible) {
+        setQuery(s.query);
+      }
+    };
+    editor.on("transaction", sync);
+    return () => {
+      editor.off("tessera:findPanel", open);
+      editor.off("transaction", sync);
+    };
+  }, [editor]);
+  if (!visible) {
+    return null;
+  }
+  const updateQuery = (value) => {
+    setQuery(value);
+    editor.commands.setFindQuery(value);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "tessera-find-panel", "data-testid": "find-panel", children: [
+    /* @__PURE__ */ jsx9(
+      "input",
+      {
+        className: "tessera-find-input",
+        autoFocus: true,
+        value: query,
+        placeholder: t("findPlaceholder"),
+        onChange: (e) => updateQuery(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            editor.commands.findNext();
+          }
+          if (e.key === "Escape") {
+            editor.commands.closeFindPanel();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx9("span", { className: "tessera-find-count", children: count > 0 ? `${active + 1}/${count}` : "0" }),
+    /* @__PURE__ */ jsx9("button", { type: "button", title: t("findPrev"), onClick: () => editor.commands.findPrev(), children: "\u2191" }),
+    /* @__PURE__ */ jsx9("button", { type: "button", title: t("findNext"), onClick: () => editor.commands.findNext(), children: "\u2193" }),
+    /* @__PURE__ */ jsx9(
+      "input",
+      {
+        value: replacement,
+        placeholder: t("replacePlaceholder"),
+        onChange: (e) => setReplacement(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => editor.commands.replaceCurrent(replacement), children: t("replaceOne") }),
+    /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => editor.commands.replaceAll(replacement), children: t("replaceAll") }),
+    /* @__PURE__ */ jsx9("button", { type: "button", className: "tessera-find-close", title: t("findClose"), onClick: () => editor.commands.closeFindPanel(), children: "\xD7" })
+  ] });
+}
+function AskPanel() {
+  const { editor, t, ai } = useContext8(TesseraContext);
+  const [visible, setVisible] = useState10(false);
+  const [question, setQuestion] = useState10("");
+  const [answer, setAnswer] = useState10("");
+  const [thinking, setThinking] = useState10(false);
+  const [error, setError] = useState10(null);
+  useEffect9(() => {
+    const open = () => setVisible(true);
+    editor.on("tessera:askPanel", open);
+    return () => {
+      editor.off("tessera:askPanel", open);
+    };
+  }, [editor]);
+  if (!visible) {
+    return null;
+  }
+  const ask = async () => {
+    if (!ai || !question.trim()) {
+      return;
+    }
+    setThinking(true);
+    setAnswer("");
+    setError(null);
+    try {
+      await ai.ask(question, { onToken: (token) => setAnswer((prev) => prev + token) });
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setThinking(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-panel", "data-testid": "ask-panel", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-header", children: [
+      /* @__PURE__ */ jsx9("span", { children: t("aiTitle") }),
+      /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
+    ] }),
+    ai ? null : /* @__PURE__ */ jsx9("div", { className: "tessera-ask-error", children: t("aiRuntimeMissing") }),
+    /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-body", children: [
+      answer ? /* @__PURE__ */ jsx9("div", { className: "tessera-ask-answer", children: answer }) : null,
+      thinking ? /* @__PURE__ */ jsx9("div", { className: "tessera-ask-thinking", children: t("aiThinking") }) : null,
+      error ? /* @__PURE__ */ jsx9("div", { className: "tessera-ask-error", children: error }) : null
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-input", children: [
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          value: question,
+          placeholder: t("aiAskPlaceholder"),
+          onChange: (e) => setQuestion(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              ask();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx9("button", { type: "button", disabled: !ai || thinking || !question.trim(), onClick: ask, children: t("aiSend") })
+    ] })
+  ] });
+}
+function SuggestionBar({
+  session,
+  onClear
+}) {
+  const { t } = useContext8(TesseraContext);
+  if (!session) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: "tessera-suggestion-bar", "data-testid": "suggestion-bar", children: [
+    /* @__PURE__ */ jsxs8("span", { className: "tessera-suggestion-label", children: [
+      "\u2728 ",
+      t("aiStreaming")
+    ] }),
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: "tessera-suggestion-accept",
+        onClick: () => {
+          session.accept();
+          onClear();
+        },
+        children: t("aiAccept")
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: "tessera-suggestion-reject",
+        onClick: () => {
+          session.reject();
+          onClear();
+        },
+        children: t("aiReject")
+      }
+    )
+  ] });
+}
+
+// src/HistoryPanel.tsx
+import { useContext as useContext9, useEffect as useEffect10, useState as useState11 } from "react";
+import {
+  diffDocs,
+  diffSummary,
+  getStorageService
+} from "@tessera-editor/core";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function HistoryPanel() {
+  const { editor, t } = useContext9(TesseraContext);
+  const [visible, setVisible] = useState11(false);
+  const [snapshots, setSnapshots] = useState11([]);
+  const [selected, setSelected] = useState11(null);
+  const [entries, setEntries] = useState11(null);
+  const [summary, setSummary] = useState11({ added: 0, removed: 0, changed: 0 });
+  const refresh = async () => {
+    const storage = getStorageService(editor);
+    if (!storage) {
+      return;
+    }
+    const list = await storage.listSnapshots();
+    setSnapshots([...list].sort((a, b) => b.ts - a.ts));
+  };
+  useEffect10(() => {
+    const open = () => {
+      setVisible(true);
+      void refresh();
+    };
+    editor.on("tessera:historyPanel", open);
+    const saved = () => void refresh();
+    editor.on("tessera:snapshotSaved", saved);
+    return () => {
+      editor.off("tessera:historyPanel", open);
+      editor.off("tessera:snapshotSaved", saved);
+    };
+  }, [editor]);
+  if (!visible) {
+    return null;
+  }
+  const hasStorage = !!getStorageService(editor);
+  const select = (snap) => {
+    setSelected(snap);
+    const result = diffDocs(snap.doc, editor.getJSON());
+    setEntries(result);
+    setSummary(diffSummary(result.filter((e) => e.kind !== "unchanged")));
+  };
+  const restore = (snap) => {
+    if (!window.confirm(t("historyConfirmRestore"))) {
+      return;
+    }
+    editor.commands.setContent(snap.doc);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs9("div", { className: "tessera-history-panel", "data-testid": "history-panel", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "tessera-ask-header", children: [
+      /* @__PURE__ */ jsx10("span", { children: t("historyTitle") }),
+      /* @__PURE__ */ jsxs9("div", { className: "tessera-history-actions", children: [
+        hasStorage ? /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => editor.commands.captureSnapshot(), children: t("historyCapture") }) : null,
+        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
+      ] })
+    ] }),
+    !hasStorage ? /* @__PURE__ */ jsx10("div", { className: "tessera-ask-error", children: t("aiRuntimeMissing").replace("AI Runtime", "StorageService") }) : null,
+    /* @__PURE__ */ jsxs9("div", { className: "tessera-history-body", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "tessera-history-list", children: [
+        snapshots.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "tessera-toc-empty", children: t("historyEmpty") }) : null,
+        snapshots.map((snap) => /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            className: "tessera-history-item",
+            "data-selected": selected?.id === snap.id,
+            onClick: () => select(snap),
+            children: [
+              /* @__PURE__ */ jsx10("span", { className: "tessera-history-time", children: formatTime(snap.ts) }),
+              snap.label ? /* @__PURE__ */ jsx10("span", { className: "tessera-history-label", children: snap.label }) : null,
+              /* @__PURE__ */ jsx10(
+                "span",
+                {
+                  className: "tessera-history-action",
+                  role: "button",
+                  tabIndex: 0,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    restore(snap);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") restore(snap);
+                  },
+                  children: t("historyRestore")
+                }
+              )
+            ]
+          },
+          snap.id
+        ))
+      ] }),
+      selected ? /* @__PURE__ */ jsxs9("div", { className: "tessera-history-diff", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "tessera-diff-summary", children: [
+          "+",
+          summary.added,
+          " ",
+          t("historyDiffAdded"),
+          " \xB7 \u2212",
+          summary.removed,
+          " ",
+          t("historyDiffRemoved"),
+          " \xB7 ~",
+          summary.changed,
+          " ",
+          t("historyDiffChanged")
+        ] }),
+        (entries ?? []).filter((e) => e.kind !== "unchanged").slice(0, 80).map((entry, i) => /* @__PURE__ */ jsxs9("div", { className: `tessera-diff-block tessera-diff-block--${entry.kind}`, children: [
+          /* @__PURE__ */ jsx10("span", { className: "tessera-diff-badge", children: entry.kind === "added" ? t("historyDiffAdded") : entry.kind === "removed" ? t("historyDiffRemoved") : t("historyDiffChanged") }),
+          entry.kind === "changed" && entry.wordDiff ? /* @__PURE__ */ jsx10("span", { className: "tessera-diff-text", children: entry.wordDiff.map((part, j) => /* @__PURE__ */ jsx10("span", { className: `tessera-diff-part tessera-diff-part--${part.type}`, children: part.text }, j)) }) : /* @__PURE__ */ jsx10("span", { className: "tessera-diff-text", children: blockText(entry) })
+        ] }, entry.id ?? i))
+      ] }) : null
+    ] })
+  ] });
+}
+function blockText(entry) {
+  const json = entry.after ?? entry.before;
+  const walk = (node) => {
+    if (!node || typeof node !== "object") {
+      return "";
+    }
+    const n = node;
+    return (n.text ?? "") + (n.content ?? []).map(walk).join("");
+  };
+  return walk(json).trim().slice(0, 120);
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+// src/BlockMenu.tsx
+import { useContext as useContext10, useEffect as useEffect11, useState as useState12 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
+import { tableToCsvAt as tableToCsvAt2 } from "@tessera-editor/core";
+import { Fragment, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function BlockContextMenuUI() {
+  const { editor, t } = useContext10(TesseraContext);
+  const [menu, setMenu] = useState12(null);
+  const portalRoot = useTesseraPortalRoot(editor);
+  useEffect11(() => {
+    const onMenu = (payload) => {
+      const found = findBlockPosById(editor, payload.blockId);
+      if (found !== null) {
+        editor.commands.setTextSelection(Math.min(found + 2, editor.state.doc.content.size));
+      }
+      setMenu(payload);
+    };
+    const close = () => setMenu(null);
+    editor.on("tessera:blockMenu", onMenu);
+    window.addEventListener("mousedown", close);
+    window.addEventListener("scroll", close, true);
+    return () => {
+      editor.off("tessera:blockMenu", onMenu);
+      window.removeEventListener("mousedown", close);
+      window.removeEventListener("scroll", close, true);
+    };
+  }, [editor]);
+  if (!menu || !portalRoot) {
+    return null;
+  }
+  const inTable = menu.blockType === "table" || menu.blockType === "tableRow";
+  const style = {
+    position: "fixed",
+    left: `${Math.min(menu.clientX, window.innerWidth - 220)}px`,
+    top: `${Math.min(menu.clientY, window.innerHeight - 300)}px`
+  };
+  const copy = (text) => {
+    void navigator.clipboard.writeText(text);
+    setMenu(null);
+  };
+  return createPortal5(
+    /* @__PURE__ */ jsxs10("div", { className: "tessera-block-menu", style, onMouseDown: (e) => e.stopPropagation(), children: [
+      inTable ? /* @__PURE__ */ jsxs10(Fragment, { children: [
+        /* @__PURE__ */ jsx11(MenuLabel, { children: t("rowMenuTitle") }),
+        /* @__PURE__ */ jsx11(MenuItem, { onClick: () => {
+          editor.commands.addRowBefore();
+          setMenu(null);
+        }, children: t("rowMenuInsertAbove") }),
+        /* @__PURE__ */ jsx11(MenuItem, { onClick: () => {
+          editor.commands.addRowAfter();
+          setMenu(null);
+        }, children: t("rowMenuInsertBelow") }),
+        /* @__PURE__ */ jsx11(MenuItem, { danger: true, onClick: () => {
+          editor.commands.deleteRow();
+          setMenu(null);
+        }, children: t("rowMenuDelete") }),
+        /* @__PURE__ */ jsx11("div", { className: "tessera-menu-sep" }),
+        /* @__PURE__ */ jsx11(MenuItem, { onClick: () => {
+          const csv = tableToCsvAt2(editor);
+          if (csv) copy(csv);
+        }, children: t("tableCopyCsv") }),
+        /* @__PURE__ */ jsx11(MenuItem, { onClick: () => {
+          editor.commands.toggleHeaderRow();
+          setMenu(null);
+        }, children: t("tableToggleHeader") }),
+        /* @__PURE__ */ jsx11(MenuItem, { danger: true, onClick: () => {
+          editor.commands.deleteTable();
+          setMenu(null);
+        }, children: t("tableDelete") }),
+        /* @__PURE__ */ jsx11("div", { className: "tessera-menu-sep" })
+      ] }) : null,
+      /* @__PURE__ */ jsx11(MenuItem, { onClick: () => copy(anchorUrl(menu.blockId)), children: t("menuCopyAnchor") }),
+      /* @__PURE__ */ jsx11(MenuItem, { onClick: () => copy(menu.blockId), children: t("menuCopyBlockId") }),
+      /* @__PURE__ */ jsx11(MenuItem, { danger: true, onClick: () => {
+        deleteBlockById(editor, menu.blockId);
+        setMenu(null);
+      }, children: t("menuDeleteBlock") })
+    ] }),
+    portalRoot
+  );
+}
+function anchorUrl(blockId) {
+  const base = `${location.origin}${location.pathname}`;
+  return `${base}#block-${blockId}`;
+}
+function findBlockPosById(editor, id) {
+  let found = null;
+  editor.state.doc.forEach((node, offset) => {
+    if (found === null && node.attrs.id === id) {
+      found = offset;
+    }
+  });
+  return found;
+}
+function deleteBlockById(editor, id) {
+  const pos = findBlockPosById(editor, id);
+  if (pos === null) {
+    return;
+  }
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node) {
+    return;
+  }
+  const tr = editor.state.tr.delete(pos, pos + node.nodeSize);
+  editor.view.dispatch(tr);
+}
+function MenuLabel({ children }) {
+  return /* @__PURE__ */ jsx11("div", { className: "tessera-menu-label", children });
+}
+function MenuItem({
+  children,
+  onClick,
+  danger
+}) {
+  return /* @__PURE__ */ jsx11("button", { type: "button", className: `tessera-menu-item${danger ? " tessera-danger" : ""}`, onClick, children });
+}
+
+// src/Tessera.tsx
+import "@tessera-editor/core/styles.css";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var DRAG_HANDLE_POSITION_CONFIG = { placement: "left", strategy: "absolute" };
+function Tessera({
+  content,
+  locale = "zh-CN",
+  upload,
+  storage,
+  comments,
+  identity,
+  ai: runtime,
+  historyIdleMs,
+  docWidth,
+  onUpdate,
+  onCreate
+}) {
+  const t = useMemo(() => createTesseraT(locale), [locale]);
+  const [session, setSession] = useState13(null);
+  const fileInputRef = useRef7(null);
+  const dragNodeRef = useRef7(null);
+  const handleDragNodeChange = useCallback3((data) => {
+    dragNodeRef.current = data.node ? data : null;
+  }, []);
+  const onUpdateRef = useRef7(onUpdate);
+  onUpdateRef.current = onUpdate;
+  const onCreateRef = useRef7(onCreate);
+  onCreateRef.current = onCreate;
+  const runtimeRef = useRef7(runtime);
+  runtimeRef.current = runtime;
+  const initialContentRef = useRef7(content);
+  const editorRef = useRef7(null);
+  const extensions = useMemo(
+    () => createTesseraExtensions({ locale, historyIdleMs }).map((ext) => {
+      if (ext.name === "tesseraSlashMenu") {
+        return ext.configure({
+          render: createSlashRenderer(t),
+          extraItems: (ctx) => {
+            const rt = runtimeRef.current;
+            return rt ? aiSlashItems2({ editor: ctx.editor, runtime: rt, t: ctx.t }) : [];
+          }
+        });
+      }
+      if (ext.name === "tesseraEmojiMenu") {
+        return ext.configure({ render: createEmojiRenderer() });
+      }
+      if (ext.name === "imageBlock") {
+        return ImageBlockView;
+      }
+      if (ext.name === "tableCell") {
+        return AiTableCellViewExtension;
+      }
+      if (ext.name === "tableHeader") {
+        return AiTableHeaderViewExtension;
+      }
+      if (ext.name === "embedBlock") {
+        return EmbedBlockView;
+      }
+      if (ext.name === "tocBlock") {
+        return TocBlockView;
+      }
+      return ext;
+    }),
+    // runtime is read through runtimeRef on purpose: rebuilding the extension
+    // list after mount cannot apply anyway (extensions are only read when the
+    // editor is created) and would only trigger the setOptions churn above
+    [locale, t, historyIdleMs]
+  );
+  async function uploadAndInsert(file) {
+    const ed = editorRef.current;
+    if (!ed) {
+      return;
+    }
+    const storage2 = ed.storage;
+    const svc = storage2.tesseraServices?.upload;
+    if (!svc) {
+      return;
+    }
+    try {
+      const asset = await svc.uploadImage(file);
+      ed.chain().focus().setImage({ src: asset.url, alt: asset.name }).run();
+    } catch (err) {
+      console.error("[Tessera] image upload failed:", err);
+    }
+  }
+  const uploadAndInsertRef = useRef7(uploadAndInsert);
+  uploadAndInsertRef.current = uploadAndInsert;
+  const editorProps = useMemo(
+    () => ({
+      attributes: {
+        class: "tessera-doc",
+        spellcheck: "false"
+      },
+      handlePaste: (_view, event) => {
+        const file = Array.from(event.clipboardData?.files ?? []).find((f) => f.type.startsWith("image/"));
+        if (file) {
+          void uploadAndInsertRef.current(file);
+          return true;
+        }
+        return false;
+      },
+      handleDrop: (_view, event, _slice, moved) => {
+        if (moved) {
+          return false;
+        }
+        const file = Array.from(event.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
+        if (file) {
+          event.preventDefault();
+          void uploadAndInsertRef.current(file);
+          return true;
+        }
+        return false;
+      }
+    }),
+    []
+  );
+  const handleUpdate = useCallback3(({ editor: e }) => onUpdateRef.current?.(e), []);
+  const handleCreate = useCallback3(({ editor: e }) => onCreateRef.current?.(e), []);
+  const editor = useEditor({
+    extensions,
+    content: initialContentRef.current,
+    onUpdate: handleUpdate,
+    onCreate: handleCreate,
+    editorProps
+  });
+  editorRef.current = editor ?? null;
+  useEffect12(() => {
+    if (editor) {
+      const bag = editor.storage.tesseraServices ?? {};
+      editor.storage.tesseraServices = {
+        ...bag,
+        upload,
+        storage,
+        comments,
+        identity
+      };
+    }
+  }, [editor, upload, storage, comments, identity]);
+  useEffect12(() => {
+    if (!editor) {
+      return;
+    }
+    const pickImage = () => fileInputRef.current?.click();
+    const onSession = (payload) => setSession(payload.session);
+    editor.on("tessera:insertImage", pickImage);
+    editor.on("tessera:session", onSession);
+    return () => {
+      editor.off("tessera:insertImage", pickImage);
+      editor.off("tessera:session", onSession);
+    };
+  }, [editor]);
+  const ai = useMemo(
+    () => editor && runtime ? createAiController(editor, runtime, locale) : null,
+    [editor, runtime, locale]
+  );
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx12(TesseraContext.Provider, { value: { editor, locale, t, ai }, children: /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "tessera-root",
+      style: { "--te-doc-max-width": docWidth ? `${docWidth}px` : void 0 },
+      children: [
+        /* @__PURE__ */ jsx12(EditorContent, { editor }),
+        /* @__PURE__ */ jsx12(
+          DragHandle,
+          {
+            editor,
+            pluginKey: "tesseraDragHandle",
+            computePositionConfig: DRAG_HANDLE_POSITION_CONFIG,
+            onNodeChange: handleDragNodeChange,
+            children: /* @__PURE__ */ jsx12(
+              "div",
+              {
+                className: "tessera-drag-handle",
+                onClick: (event) => {
+                  const data = dragNodeRef.current;
+                  if (!data?.node) {
+                    return;
+                  }
+                  const id = data.node.attrs.id;
+                  if (!id) {
+                    return;
+                  }
+                  editor.emit("tessera:blockMenu", {
+                    blockId: id,
+                    blockType: data.node.type.name,
+                    clientX: event.clientX,
+                    clientY: event.clientY
+                  });
+                },
+                children: "\u283F"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx12(EmptyLineToolbar, {}),
+        /* @__PURE__ */ jsx12(SelectionToolbar, { onSession: setSession }),
+        /* @__PURE__ */ jsx12(FindReplacePanel, {}),
+        /* @__PURE__ */ jsx12(AskPanel, {}),
+        /* @__PURE__ */ jsx12(HistoryPanel, {}),
+        /* @__PURE__ */ jsx12(CommentPanel, {}),
+        /* @__PURE__ */ jsx12(BlockContextMenuUI, {}),
+        /* @__PURE__ */ jsx12(SuggestionBar, { session, onClear: () => setSession(null) }),
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            hidden: true,
+            onChange: (e) => {
+              const file = e.target.files?.[0];
+              if (file) {
+                void uploadAndInsert(file);
+              }
+              e.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  AiTableCellViewExtension,
+  AiTableHeaderViewExtension,
+  AskPanel,
+  BlockContextMenuUI,
+  CommentComposer,
+  CommentPanel,
+  EmbedBlockView,
+  EmptyLineToolbar,
+  FindReplacePanel,
+  HistoryPanel,
+  ImageBlockView,
+  SelectionToolbar,
+  SlashMenuView,
+  SuggestionBar,
+  Tessera,
+  TesseraContext,
+  TocBlockView,
+  createSlashRenderer,
+  useTesseraContext
+};
+//# sourceMappingURL=index.js.map