wendang-react 0.0.0-stage → 0.5.6

package/dist/chunks/MindMapCanvas-D5XwjVH1.js

@@ -0,0 +1,2072 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { textDifference, mindMapTree, layoutMindMap, MIND_MAP_PALETTE, mindMapDescendants as mindMapDescendants$1, projectMindSideMove, mindMapBranchSides, mindMapOutline, mindRelationPaths, mindMapMarkdown, mindMapSvg, mindMapToJson, MIND_MAP_MAX_TOPICS } from "wendang/mindmap";
+import { TEXT_COLORS, HIGHLIGHT_COLORS, mindTopicLineHeight, MIND_TOPIC_FONT, readableTextColor } from "wendang/shared";
+import { MIND_ICONS, MIND_COLORS, MIND_BACKGROUNDS, branchModel, searchMindMap, parseMindMapImport, importBranch, mindMapTemplate, parseMindBranch, ancestorIds } from "wendang/internal/mind-map-phase2";
+import { normalizeMindFolds, firstLevelMindFolds } from "wendang/internal/mind-map-folding";
+import { p as planMindTopicDeletion } from "./mind-map-delete-CVsxdXfs.js";
+import { mindMapDescendants } from "wendang/internal/mind-map";
+import { m as mindCanvasShortcut, s as selectMindTopic } from "./mind-map-input-CEWRz_t6.js";
+import { b as useContentHost, a as useContentContext } from "./host-C-V688Rq.js";
+import { createPortal } from "react-dom";
+import { u as useLatest } from "./hooks-C53Dp0pr.js";
+import { W as WButton, c as WDialog, a as WSelect, d as WAlert } from "./index-Ii536CFG.js";
+import { T as TopicLabel, A as AttachmentImage } from "./mind-topic-text-BBNTbFSe.js";
+import { A as AnchoredPanel } from "./AnchoredPanel-D3nte06T.js";
+function mindMapDrop(model, drawing, id, point, allowSide = true) {
+  const source = drawing.nodes.find((t) => t.id === id), root = drawing.nodes.find((t) => t.id === model.rootId);
+  if (!source || !root || id === model.rootId) return null;
+  const excluded = mindMapDescendants(model, id), { x, y } = point;
+  const candidates = drawing.nodes.filter((t) => !excluded.has(t.id)).map((t) => ({
+    t,
+    distance: Math.hypot(x - t.x - t.width / 2, y - t.y - t.height / 2)
+  })).sort((a, b) => a.distance - b.distance);
+  const best = candidates[0];
+  const side = x < root.x + root.width / 2 - 24 ? -1 : x > root.x + root.width / 2 + 24 ? 1 : null;
+  const crossing = allowSide && model.layout !== "down" && side !== null && side !== source.side;
+  const nearNode = best && best.t.id !== root.id && x >= best.t.x - 18 && x <= best.t.x + best.t.width + 18 && y >= best.t.y - 18 && y <= best.t.y + best.t.height + 18;
+  if (nearNode || !crossing && best && best.distance < Math.max(best.t.width, 130)) {
+    return { kind: "node", id: best.t.id, mode: best.t.id === root.id ? "child" : y < best.t.y + 10 ? "before" : y > best.t.y + best.t.height - 10 ? "after" : "child" };
+  }
+  if (allowSide && model.layout !== "down" && side !== null && (crossing || source.parentId === root.id && model.layout === "both")) {
+    const before = drawing.nodes.filter((t) => t.parentId === root.id && t.id !== id && t.side === side).find((t) => y < t.y + t.height / 2);
+    return { kind: "side", id: root.id, mode: "side", side, ...before ? { beforeId: before.id } : {} };
+  }
+  return null;
+}
+function topicsInMarquee(topics, rect, previous = []) {
+  const visible = new Set(topics.map((topic) => topic.id));
+  const selected = new Set([...previous].filter((id) => visible.has(id)));
+  if (rect.width <= 0 || rect.height <= 0) return selected;
+  for (const topic of topics) {
+    if (topic.x < rect.x + rect.width && topic.x + topic.width > rect.x && topic.y < rect.y + rect.height && topic.y + topic.height > rect.y) selected.add(topic.id);
+  }
+  return selected;
+}
+function MindMapComments({ pageId, blockId, topicId, topicLabel, canComment, onClose, onChanged }) {
+  const host = useContentHost(), [items, setItems] = useState([]), [draft, setDraft] = useState(""), [error, setError] = useState(""), [busy, setBusy] = useState(false), [loading, setLoading] = useState(true);
+  const [composer, setComposer] = useState(null), [confirmId, setConfirmId] = useState(null), [epoch, setEpoch] = useState(0);
+  const alive = useRef(true), running = useRef(false);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    let active = true;
+    setDraft("");
+    setComposer(null);
+    setConfirmId(null);
+    setError("");
+    setLoading(true);
+    if (!host.comments) {
+      setLoading(false);
+      return;
+    }
+    void host.comments.list(pageId).then((result) => {
+      if (active) setItems(result.items.filter((item) => {
+        var _a, _b;
+        return ((_a = item.anchor) == null ? void 0 : _a.prefix) === `mind:${blockId}` && ((_b = item.anchor) == null ? void 0 : _b.suffix) === topicId;
+      }));
+    }).catch((error2) => {
+      if (active) setError(String(error2));
+    }).finally(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [host.comments, pageId, blockId, topicId, epoch]);
+  async function perform(action) {
+    if (running.current) return;
+    running.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      await action();
+      onChanged == null ? void 0 : onChanged();
+      if (alive.current) {
+        setDraft("");
+        setComposer(null);
+        setEpoch((value) => value + 1);
+      }
+    } catch (error2) {
+      if (alive.current) setError(String(error2));
+    } finally {
+      running.current = false;
+      if (alive.current) setBusy(false);
+    }
+  }
+  const title = topicLabel.trim() ? `「${topicLabel.trim()}」` : "当前主题";
+  const time = (value) => {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+  };
+  function compose(item) {
+    if (!composer || composer.id !== item.id) return null;
+    const editing = composer.kind === "edit";
+    return /* @__PURE__ */ jsxs("form", { className: "mind-comment__compose", onSubmit: (event) => {
+      event.preventDefault();
+      if (!composer.text.trim() || !editing && !canComment) return;
+      void perform(() => editing ? host.comments.update(composer.id, composer.text.trim()) : host.comments.create(pageId, composer.text.trim(), composer.id));
+    }, children: [
+      /* @__PURE__ */ jsx("label", { className: "mind-comment__label", children: editing ? "正在编辑评论" : `回复 ${item.authorName}` }),
+      /* @__PURE__ */ jsx("textarea", { "aria-label": editing ? "编辑主题讨论" : "回复主题讨论", rows: editing ? 3 : 2, maxLength: 5e3, value: composer.text, onChange: (event) => setComposer({ ...composer, text: event.target.value }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mind-comment__actions", children: [
+        /* @__PURE__ */ jsx(WButton, { variant: "primary", loading: busy, disabled: !composer.text.trim(), htmlType: "submit", children: editing ? "保存" : "发表回复" }),
+        /* @__PURE__ */ jsx(WButton, { onClick: () => setComposer(null), children: "取消" })
+      ] })
+    ] });
+  }
+  function comment(item, reply = false) {
+    var _a, _b;
+    const editing = (composer == null ? void 0 : composer.kind) === "edit" && composer.id === item.id;
+    return /* @__PURE__ */ jsxs("article", { className: reply ? "mind-comment__reply" : "mind-comment", children: [
+      /* @__PURE__ */ jsxs("header", { className: "mind-comment__head", children: [
+        /* @__PURE__ */ jsx("strong", { children: item.authorName || "用户" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          time(item.createdAt),
+          item.resolved ? " · 已解决" : ""
+        ] })
+      ] }),
+      editing ? compose(item) : /* @__PURE__ */ jsx("p", { className: "mind-comment__body", children: item.deleted ? reply ? "回复已删除" : "评论已删除" : item.body }),
+      !editing && /* @__PURE__ */ jsxs("div", { className: "mind-comment__actions", children: [
+        item.canResolve && !reply && /* @__PURE__ */ jsx(WButton, { variant: "text", disabled: busy, onClick: () => void perform(() => host.comments.resolve(item.id, !item.resolved)), children: item.resolved ? "重新打开" : "标记解决" }),
+        canComment && !item.deleted && !reply && /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => setComposer({ kind: "reply", id: item.id, text: "" }), children: "回复" }),
+        ((_a = host.comments) == null ? void 0 : _a.update) && item.canEdit && /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => setComposer({ kind: "edit", id: item.id, text: item.body }), children: "编辑" }),
+        item.canDelete && /* @__PURE__ */ jsx(WButton, { variant: "text", disabled: busy, onClick: () => setConfirmId(item.id), children: "删除" })
+      ] }),
+      !reply && ((_b = item.replies) == null ? void 0 : _b.map((child) => comment(child, true))),
+      !editing && compose(item)
+    ] }, item.id);
+  }
+  return /* @__PURE__ */ jsxs("aside", { className: "mind-comments", "aria-label": "主题讨论", children: [
+    /* @__PURE__ */ jsxs("header", { className: "mind-comments__head", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mind-comments__intro", children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          title,
+          "的讨论"
+        ] }),
+        /* @__PURE__ */ jsx("p", { children: "讨论跟随这个主题移动；复制分支时不会复制。" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mind-comments__head-actions", children: [
+        /* @__PURE__ */ jsx(WButton, { variant: "text", disabled: busy, onClick: () => setEpoch((value) => value + 1), children: "刷新" }),
+        /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: onClose, children: "关闭" })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "mind-comments__error", role: "alert", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "mind-comments__list", children: [
+      loading && /* @__PURE__ */ jsx("p", { role: "status", children: "正在加载讨论…" }),
+      !loading && !error && !items.length && /* @__PURE__ */ jsxs("p", { className: "mind-comments__empty", children: [
+        "这个主题还没有讨论。",
+        canComment ? "在下方写下第一条即可。" : ""
+      ] }),
+      items.map((item) => comment(item))
+    ] }),
+    canComment ? /* @__PURE__ */ jsxs("form", { className: "mind-comments__compose", onSubmit: (event) => {
+      event.preventDefault();
+      if (!draft.trim()) return;
+      void perform(() => host.comments.create(pageId, draft.trim(), void 0, { blockId, topicId }));
+    }, children: [
+      /* @__PURE__ */ jsxs("label", { className: "mind-comment__label", children: [
+        "对",
+        title,
+        "发表讨论"
+      ] }),
+      /* @__PURE__ */ jsx("textarea", { "aria-label": "主题评论内容", rows: 3, maxLength: 5e3, placeholder: "写下你的想法…", value: draft, onChange: (event) => setDraft(event.target.value) }),
+      /* @__PURE__ */ jsx("div", { className: "mind-comment__actions", children: /* @__PURE__ */ jsx(WButton, { variant: "primary", loading: busy, disabled: !draft.trim(), htmlType: "submit", children: "发表讨论" }) })
+    ] }) : /* @__PURE__ */ jsx("p", { className: "mind-comments__empty", children: "你没有在这个空间发表讨论的权限。" }),
+    confirmId && /* @__PURE__ */ jsxs(WDialog, { title: "删除评论", onClose: () => setConfirmId(null), children: [
+      /* @__PURE__ */ jsx("p", { children: "确定删除这条评论？" }),
+      /* @__PURE__ */ jsxs("div", { className: "wr-toolbar", children: [
+        /* @__PURE__ */ jsx(WButton, { onClick: () => setConfirmId(null), children: "取消" }),
+        /* @__PURE__ */ jsx(WButton, { variant: "primary", onClick: () => {
+          const id = confirmId;
+          setConfirmId(null);
+          void perform(() => host.comments.remove(id));
+        }, children: "删除" })
+      ] })
+    ] })
+  ] });
+}
+function MindMapField({ id, field, value, controller, label, onFocus, onCommand }) {
+  const input = useRef(null), composing = useRef(false), focused = useRef(false);
+  const [draft, setDraft] = useState(value), draftRef = useRef(value);
+  draftRef.current = draft;
+  useEffect(() => {
+    if (composing.current || draftRef.current === value) return;
+    const el = input.current, start = (el == null ? void 0 : el.selectionStart) ?? 0, end = (el == null ? void 0 : el.selectionEnd) ?? start;
+    const diff = textDifference(draftRef.current, value), shift = diff.text.length - diff.to + diff.from;
+    const map = (pos) => pos <= diff.from ? pos : pos >= diff.to ? pos + shift : diff.from + diff.text.length;
+    setDraft(value);
+    if (focused.current) queueMicrotask(() => el == null ? void 0 : el.setSelectionRange(map(start), map(end)));
+  }, [value]);
+  useEffect(() => () => {
+    controller == null ? void 0 : controller.composition(false);
+    controller == null ? void 0 : controller.endText(id, field);
+  }, [controller, id, field]);
+  function apply(next) {
+    if (controller == null ? void 0 : controller.text(id, next, field)) setDraft(next);
+  }
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: input,
+      "aria-label": label,
+      value: draft,
+      readOnly: !(controller == null ? void 0 : controller.editable()),
+      maxLength: field === "title" ? 2e3 : 4e3,
+      rows: field === "title" ? 1 : field === "note" ? 4 : 3,
+      onFocus: () => {
+        focused.current = true;
+        controller == null ? void 0 : controller.beginText(id, field);
+        onFocus == null ? void 0 : onFocus();
+      },
+      onBlur: () => {
+        focused.current = false;
+        controller == null ? void 0 : controller.composition(false);
+        controller == null ? void 0 : controller.endText(id, field);
+      },
+      onChange: (event) => apply(event.target.value),
+      onCompositionStart: () => {
+        composing.current = true;
+        controller == null ? void 0 : controller.composition(true);
+      },
+      onCompositionEnd: (event) => {
+        apply(event.currentTarget.value);
+        composing.current = false;
+        controller == null ? void 0 : controller.composition(false);
+        controller == null ? void 0 : controller.beginText(id, field);
+      },
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        if (event.nativeEvent.isComposing || composing.current || event.keyCode === 229) return;
+        if ((event.metaKey || event.ctrlKey) && ["z", "y"].includes(event.key.toLowerCase())) {
+          event.preventDefault();
+          event.shiftKey || event.key.toLowerCase() === "y" ? controller == null ? void 0 : controller.redo() : controller == null ? void 0 : controller.undo();
+        } else onCommand == null ? void 0 : onCommand(event);
+      }
+    }
+  );
+}
+const COLORS = MIND_COLORS.map((value, index) => ({ value, label: ["默认", "深灰", "白色", "蓝色", "青绿", "紫色", "棕色", "红色"][index] }));
+const BACKGROUNDS = MIND_BACKGROUNDS.map((value, index) => ({ value, label: ["默认", "浅灰", "浅蓝", "浅绿", "浅紫", "浅黄", "浅红", "深蓝"][index] }));
+function MindMapDetails({ model, id, controller, range, onClose, onNotice }) {
+  var _a;
+  const topic = model.topics.find((item) => item.id === id);
+  const writable = (controller == null ? void 0 : controller.editable()) ?? false;
+  const [href, setHref] = useState(""), [busy, setBusy] = useState(false);
+  const [relationTarget, setRelationTarget] = useState(""), [relationLabel, setRelationLabel] = useState("");
+  const [relationKind, setRelationKind] = useState("related");
+  const [relationId, setRelationId] = useState(void 0);
+  const imageInput = useRef(null);
+  if (!topic) return null;
+  const patch = (key, value) => {
+    if (writable) controller == null ? void 0 : controller.patch(id, { [key]: value || null });
+  };
+  function format(mark, attrs) {
+    const from = range.from, to = range.to;
+    if (to <= from) {
+      onNotice == null ? void 0 : onNotice("请先在主题文字中选中要设置格式的文字。");
+      return;
+    }
+    if (mark === "link" && attrs && !attrs.href) {
+      controller == null ? void 0 : controller.clearFormat(id, from, to, ["link"]);
+      return;
+    }
+    controller == null ? void 0 : controller.format(id, from, to, mark, attrs);
+  }
+  async function upload(file) {
+    var _a2;
+    if (!file || !(controller == null ? void 0 : controller.context.uploadImage) || !writable) return;
+    if (!["image/png", "image/jpeg", "image/webp", "image/gif"].includes(file.type)) {
+      onNotice == null ? void 0 : onNotice("请选择 PNG、JPEG、WebP 或 GIF 图片");
+      return;
+    }
+    setBusy(true);
+    try {
+      const uploaded = await controller.context.uploadImage(file);
+      if (controller.editable() && ((_a2 = controller.snapshot()) == null ? void 0 : _a2.topics.some((item) => item.id === id))) controller.patch(id, { attachmentId: uploaded.id });
+    } catch (error) {
+      onNotice == null ? void 0 : onNotice(error instanceof Error ? error.message : "图片上传失败");
+    } finally {
+      setBusy(false);
+      if (imageInput.current) imageInput.current.value = "";
+    }
+  }
+  function addRelation() {
+    if (controller == null ? void 0 : controller.relation({ id: relationId, source: id, target: relationTarget, kind: relationKind, label: relationLabel })) {
+      setRelationLabel("");
+      setRelationId(void 0);
+      onNotice == null ? void 0 : onNotice("已保存主题关系");
+    } else onNotice == null ? void 0 : onNotice("请选择不同的目标主题");
+  }
+  const relations = ((_a = model.relations) == null ? void 0 : _a.filter((relation) => relation.source === id || relation.target === id)) ?? [];
+  return /* @__PURE__ */ jsxs("aside", { className: "mind-details", "aria-label": "主题属性", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("strong", { children: "主题属性" }),
+      /* @__PURE__ */ jsx(WButton, { size: "small", variant: "text", onClick: onClose, children: "关闭" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mind-details-title", children: topic.text || "未命名主题" }),
+    writable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("fieldset", { children: [
+        /* @__PURE__ */ jsx("legend", { children: "选中文字格式" }),
+        /* @__PURE__ */ jsxs("div", { className: "mind-format-buttons", onMouseDown: (event) => event.preventDefault(), children: [
+          /* @__PURE__ */ jsx(WButton, { size: "small", "aria-label": "主题文字加粗", onClick: () => format("bold"), children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
+          /* @__PURE__ */ jsx(WButton, { size: "small", "aria-label": "主题文字斜体", onClick: () => format("italic"), children: /* @__PURE__ */ jsx("i", { children: "I" }) }),
+          /* @__PURE__ */ jsx(WButton, { size: "small", "aria-label": "主题文字删除线", onClick: () => format("strike"), children: /* @__PURE__ */ jsx("s", { children: "S" }) })
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: "选区文字色" }),
+        /* @__PURE__ */ jsx("div", { className: "mind-color-grid", onMouseDown: (event) => event.preventDefault(), children: TEXT_COLORS.filter((color) => color.value).map((color) => /* @__PURE__ */ jsx(
+          WButton,
+          {
+            size: "small",
+            variant: "outline",
+            narrow: true,
+            "aria-label": `选区字体：${color.name}`,
+            title: color.name,
+            onClick: () => format("textStyle", { color: color.value }),
+            children: /* @__PURE__ */ jsx("span", { style: { color: color.value }, children: "A" })
+          },
+          color.value
+        )) }),
+        /* @__PURE__ */ jsx("span", { children: "选区高亮" }),
+        /* @__PURE__ */ jsx("div", { className: "mind-color-grid", onMouseDown: (event) => event.preventDefault(), children: HIGHLIGHT_COLORS.filter((color) => color.value).map((color) => /* @__PURE__ */ jsx(
+          WButton,
+          {
+            size: "small",
+            variant: "outline",
+            narrow: true,
+            "aria-label": `选区高亮：${color.name}`,
+            title: color.name,
+            style: { background: color.value },
+            onClick: () => format("highlight", { color: color.value })
+          },
+          color.value
+        )) }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "选区链接",
+          /* @__PURE__ */ jsx("input", { value: href, type: "url", placeholder: "https://… 或站内路径", "aria-label": "主题选区链接", onChange: (event) => setHref(event.target.value) })
+        ] }),
+        /* @__PURE__ */ jsx(WButton, { size: "small", onClick: () => format("link", { href }), children: "应用链接" }),
+        /* @__PURE__ */ jsx(WButton, { size: "small", onClick: () => controller == null ? void 0 : controller.clearFormat(id, range.from, range.to), children: "清除选区格式" })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { children: [
+        /* @__PURE__ */ jsx("legend", { children: "外观" }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "形状",
+          /* @__PURE__ */ jsx(
+            WSelect,
+            {
+              label: "主题形状",
+              ariaLabel: "主题形状",
+              value: topic.shape ?? "round",
+              onChange: (value) => patch("shape", value),
+              options: [{ value: "round", label: "圆角矩形" }, { value: "pill", label: "胶囊" }, { value: "text", label: "文本" }]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "字号",
+          /* @__PURE__ */ jsx(
+            WSelect,
+            {
+              label: "主题字号",
+              ariaLabel: "主题字号",
+              value: topic.fontSize ?? 14,
+              onChange: (value) => patch("fontSize", Number(value)),
+              options: [12, 14, 16, 18, 20].map((value) => ({ value, label: String(value) }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "对齐",
+          /* @__PURE__ */ jsx(
+            WSelect,
+            {
+              label: "主题对齐",
+              ariaLabel: "主题对齐",
+              value: topic.align ?? "center",
+              onChange: (value) => patch("align", value),
+              options: [{ value: "left", label: "左对齐" }, { value: "center", label: "居中" }, { value: "right", label: "右对齐" }]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: "节点文字色" }),
+        /* @__PURE__ */ jsx("div", { className: "mind-color-grid", onMouseDown: (event) => event.preventDefault(), children: COLORS.map((color) => /* @__PURE__ */ jsx(
+          WButton,
+          {
+            size: "small",
+            variant: "outline",
+            narrow: true,
+            "aria-label": `节点字体：${color.label}`,
+            title: color.label,
+            onClick: () => patch("color", color.value),
+            children: /* @__PURE__ */ jsx("span", { style: color.value ? { color: color.value } : void 0, children: "A" })
+          },
+          color.label
+        )) }),
+        /* @__PURE__ */ jsx("span", { children: "节点背景" }),
+        /* @__PURE__ */ jsx("div", { className: "mind-color-grid", onMouseDown: (event) => event.preventDefault(), children: BACKGROUNDS.map((color) => /* @__PURE__ */ jsx(
+          WButton,
+          {
+            size: "small",
+            variant: "outline",
+            narrow: true,
+            "aria-label": `节点背景：${color.label}`,
+            title: color.label,
+            style: color.value ? { background: color.value } : void 0,
+            onClick: () => patch("background", color.value),
+            children: color.value ? "" : "／"
+          },
+          color.label
+        )) }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "图标",
+          /* @__PURE__ */ jsx(
+            WSelect,
+            {
+              label: "主题图标",
+              ariaLabel: "主题图标",
+              value: topic.icon ?? "",
+              onChange: (value) => patch("icon", value),
+              options: MIND_ICONS.map((value) => ({ value, label: value || "无图标" }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(WButton, { size: "small", onClick: () => controller == null ? void 0 : controller.patch(id, { done: !topic.done }), children: topic.done ? "取消完成" : "标记完成" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: "描述" }),
+      /* @__PURE__ */ jsx(MindMapField, { id, field: "description", value: topic.description ?? "", controller, label: "主题描述" })
+    ] }),
+    /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: "备注" }),
+      /* @__PURE__ */ jsx(MindMapField, { id, field: "note", value: topic.note ?? "", controller, label: "主题备注" })
+    ] }),
+    writable && (controller == null ? void 0 : controller.context.uploadImage) && /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: "节点图片" }),
+      /* @__PURE__ */ jsx("input", { ref: imageInput, hidden: true, type: "file", accept: "image/png,image/jpeg,image/webp,image/gif", onChange: (event) => {
+        var _a2;
+        return void upload((_a2 = event.target.files) == null ? void 0 : _a2[0]);
+      } }),
+      /* @__PURE__ */ jsx(WButton, { size: "small", loading: busy, onClick: () => {
+        var _a2;
+        return (_a2 = imageInput.current) == null ? void 0 : _a2.click();
+      }, children: topic.attachmentId ? "替换图片" : "添加图片" }),
+      topic.attachmentId && /* @__PURE__ */ jsx(WButton, { size: "small", onClick: () => patch("attachmentId", null), children: "移除图片" })
+    ] }),
+    /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: "主题关系" }),
+      relations.map((relation) => {
+        var _a2;
+        return /* @__PURE__ */ jsxs("div", { className: "mind-relation-item", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            relation.label || { related: "相关", depends: "依赖", reference: "参考" }[relation.kind],
+            " → ",
+            ((_a2 = model.topics.find((item) => item.id === (relation.source === id ? relation.target : relation.source))) == null ? void 0 : _a2.text) || "已移除主题"
+          ] }),
+          writable && relation.source === id && /* @__PURE__ */ jsx(WButton, { variant: "text", size: "small", onClick: () => {
+            setRelationId(relation.id);
+            setRelationTarget(relation.target);
+            setRelationKind(relation.kind);
+            setRelationLabel(relation.label);
+          }, children: "编辑" }),
+          writable && /* @__PURE__ */ jsx(WButton, { variant: "text", size: "small", onClick: () => controller == null ? void 0 : controller.deleteRelation(relation.id), children: "删除" })
+        ] }, relation.id);
+      }),
+      writable && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          WSelect,
+          {
+            label: "关系目标主题",
+            ariaLabel: "关系目标主题",
+            value: relationTarget,
+            onChange: setRelationTarget,
+            options: model.topics.filter((item) => item.id !== id).map((item) => ({ value: item.id, label: item.text || "未命名主题" })),
+            searchable: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          WSelect,
+          {
+            label: "主题关系类型",
+            ariaLabel: "主题关系类型",
+            value: relationKind,
+            onChange: (value) => setRelationKind(value),
+            options: [{ value: "related", label: "相关" }, { value: "depends", label: "依赖" }, { value: "reference", label: "参考" }]
+          }
+        ),
+        /* @__PURE__ */ jsx("input", { "aria-label": "关系说明", placeholder: "关系说明（可选）", maxLength: 200, value: relationLabel, onChange: (event) => setRelationLabel(event.target.value) }),
+        /* @__PURE__ */ jsx(WButton, { size: "small", disabled: !relationTarget, onClick: addRelation, children: relationId ? "保存关系" : "添加关系" })
+      ] })
+    ] })
+  ] });
+}
+function WDropdown({ label, groups, onSelect, buttonProps }) {
+  const [open, setOpen] = useState(false), trigger = useRef(null), menu = useRef(null);
+  function keydown(event) {
+    var _a, _b;
+    if (!open || event.nativeEvent.isComposing) return;
+    const items = Array.from(((_a = menu.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) ?? []);
+    const index = items.indexOf(document.activeElement);
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) && items.length) {
+      event.preventDefault();
+      event.stopPropagation();
+      (_b = items[event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : index < 0 ? event.key === "ArrowUp" ? items.length - 1 : 0 : (index + (event.key === "ArrowUp" ? -1 : 1) + items.length) % items.length]) == null ? void 0 : _b.focus();
+    }
+  }
+  function select(item) {
+    if (!item.disabled) {
+      setOpen(false);
+      onSelect(item.value);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(WButton, { ...buttonProps, ref: trigger, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen(!open), onKeyDown: keydown, children: label }),
+    open && /* @__PURE__ */ jsx(
+      AnchoredPanel,
+      {
+        anchor: trigger.current,
+        align: "center",
+        gap: 6,
+        role: "menu",
+        className: "mind-dropdown-popup",
+        label: typeof label === "string" ? label : void 0,
+        onClose: () => setOpen(false),
+        onKeyDown: keydown,
+        children: /* @__PURE__ */ jsx("div", { ref: menu, className: "w-dropdown", children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", { className: "w-dropdown-group", role: "group", "aria-label": group.title, children: [
+          group.title && /* @__PURE__ */ jsx("div", { className: "w-dropdown-group__title", children: group.title }),
+          group.items.map((item) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `w-dropdown-option${item.disabled ? " is-disabled" : ""}`,
+              role: "menuitem",
+              tabIndex: item.disabled ? void 0 : -1,
+              "aria-disabled": item.disabled || void 0,
+              onClick: () => select(item),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  select(item);
+                }
+              },
+              children: [
+                item.label,
+                item.shortcut && /* @__PURE__ */ jsx("span", { className: "mind-menu-key", children: item.shortcut })
+              ]
+            },
+            item.value
+          ))
+        ] }, index)) })
+      }
+    )
+  ] });
+}
+function WTooltip({ children, content }) {
+  var _a;
+  const [open, setOpen] = useState(false), anchor = useRef(null), timer = useRef(void 0);
+  function close() {
+    clearTimeout(timer.current);
+    setOpen(false);
+  }
+  function show() {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(true), 200);
+  }
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("scroll", close, true);
+    return () => window.removeEventListener("scroll", close, true);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("span", { ref: anchor, style: { display: "contents" }, onMouseEnter: show, onMouseLeave: close, onFocus: show, onBlur: close, children: [
+    children,
+    open && /* @__PURE__ */ jsx(AnchoredPanel, { anchor: ((_a = anchor.current) == null ? void 0 : _a.firstElementChild) ?? null, align: "center", prefer: "above", gap: 8, role: "tooltip", onClose: close, className: "code-tooltip-popup", children: /* @__PURE__ */ jsx("div", { className: "w-tooltip", children: content }) })
+  ] });
+}
+function MindMapCanvas(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { host, portal } = useContentContext(), c = props.controller, [, update] = useState(0);
+  useEffect(() => {
+    const unsubscribe = c == null ? void 0 : c.subscribe(() => update((value) => value + 1));
+    return () => {
+      unsubscribe == null ? void 0 : unsubscribe();
+    };
+  }, [c]);
+  const model = (c == null ? void 0 : c.snapshot()) ?? props.model, editable = (c == null ? void 0 : c.editable()) ?? false;
+  const saved = useRef((_a = c == null ? void 0 : c.context.viewState) == null ? void 0 : _a.maps[model.id]).current;
+  const [selected, setSelected] = useState(() => new Set((saved == null ? void 0 : saved.selectedIds) ?? [(saved == null ? void 0 : saved.selectedId) ?? model.rootId]));
+  const [active, setActive] = useState((saved == null ? void 0 : saved.selectedId) ?? model.rootId);
+  const [editing, setEditing] = useState(null), [text, setText] = useState("");
+  const composing = useRef(false);
+  const [folds, setFolds] = useState(() => normalizeMindFolds(model, (saved == null ? void 0 : saved.collapsed) ?? []));
+  const [zoom, setZoom] = useState(((_b = saved == null ? void 0 : saved.viewport) == null ? void 0 : _b.zoom) ?? 1);
+  const [origin, setPan] = useState({ x: ((_c = saved == null ? void 0 : saved.viewport) == null ? void 0 : _c.x) ?? 0, y: ((_d = saved == null ? void 0 : saved.viewport) == null ? void 0 : _d.y) ?? 0 });
+  const [moving, setMoving] = useState((saved == null ? void 0 : saved.panMode) ?? false), space = useRef(false), [outline, setOutline] = useState(false), [grid, setGrid] = useState((saved == null ? void 0 : saved.showGrid) ?? true);
+  const [spaceHeld, setSpaceHeld] = useState(false);
+  const [quickControls, setQuickControls] = useState((saved == null ? void 0 : saved.showQuickControls) ?? true);
+  const [settingsOpen, setSettingsOpen] = useState(false), settingsTrigger = useRef(null);
+  const [busy, setBusy] = useState(false), exportRunning = useRef(false);
+  const [showSearch, setShowSearch] = useState(false), [query, setQuery] = useState(""), [replacement, setReplacement] = useState("");
+  const [hitIndex, setHitIndex] = useState(0), [following, setFollowing] = useState(null);
+  const [details, setDetails] = useState(false), [comments, setComments] = useState(!!props.openComments);
+  const [selectedRange, setSelectedRange] = useState({ from: 0, to: 0 });
+  const [notice, setNotice] = useState(""), [focusId, setFocusId] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+  const deletionSelection = useRef([]), deletionActive = useRef(active);
+  const [importOpen, setImportOpen] = useState(false), [importText, setImportText] = useState(""), [importError, setImportError] = useState("");
+  const [exportBranch, setExportBranch] = useState(false), [transparent, setTransparent] = useState(false), [imageScale, setImageScale] = useState(2);
+  const [box, setBox] = useState(null), [drop, setDrop] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const menuRef = useRef(null);
+  const [dragPreview, setDragPreview] = useState(null);
+  const [pasting, setPasting] = useState(false), pastingRef = useRef(false), alive = useRef(true);
+  const root = useRef(null), stage = useRef(null), input = useRef(null);
+  const gesture = useRef(null), copied = useRef([]), [size, setSize] = useState({ width: 0, height: 0 });
+  const tree = mindMapTree(model), current = tree.find((topic) => topic.id === active) ?? tree[0];
+  const viewModel = focusId && tree.some((topic) => topic.id === focusId) ? branchModel(model, focusId) : model;
+  const drawing = layoutMindMap(viewModel, normalizeMindFolds(viewModel, folds)), color = MIND_MAP_PALETTE[model.theme];
+  const currentRef = useLatest({ model, editable, c, active });
+  const draggedIds = dragPreview ? mindMapDescendants$1(model, dragPreview.id) : /* @__PURE__ */ new Set();
+  const projected = (drop == null ? void 0 : drop.kind) === "side" && dragPreview ? projectMindSideMove(model, dragPreview.id, drop.side, drop.beforeId) : null;
+  const projection = projected ? layoutMindMap(projected, folds) : null;
+  const hits = query ? searchMindMap(model, query) : [];
+  const importPreview = useMemo(() => {
+    try {
+      return importText.trim() ? parseMindMapImport(importText) : null;
+    } catch {
+      return null;
+    }
+  }, [importText]);
+  const status = props.saveStatus ?? (c == null ? void 0 : c.status()) ?? "", pageId = props.pageId ?? (c == null ? void 0 : c.context.pageId);
+  const canExport = c ? c.canExport() : props.allowExport === true;
+  const title = ((_e = model.topics.find((topic) => topic.id === model.rootId)) == null ? void 0 : _e.text) || "思维导图";
+  useEffect(() => {
+    const node = stage.current;
+    if (!node) return;
+    const observer = new ResizeObserver(() => setSize({ width: node.clientWidth, height: node.clientHeight }));
+    const wheel = (event) => event.preventDefault();
+    node.addEventListener("wheel", wheel, { passive: false });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+      node.removeEventListener("wheel", wheel);
+    };
+  }, []);
+  useEffect(() => {
+    const keyup = (event) => {
+      if (event.code === "Space") {
+        space.current = false;
+        setSpaceHeld(false);
+      }
+    };
+    const blur = () => {
+      cancelGesture();
+      space.current = false;
+      setSpaceHeld(false);
+      setContextMenu(null);
+    };
+    window.addEventListener("keyup", keyup);
+    window.addEventListener("blur", blur);
+    return () => {
+      window.removeEventListener("keyup", keyup);
+      window.removeEventListener("blur", blur);
+    };
+  }, []);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      c == null ? void 0 : c.composition(false);
+    };
+  }, [c]);
+  useEffect(() => {
+    const close = (event) => {
+      var _a2;
+      if (!((_a2 = menuRef.current) == null ? void 0 : _a2.contains(event.target))) setContextMenu(null);
+    };
+    const key = (event) => {
+      var _a2;
+      if (event.isComposing || event.key !== "Escape") return;
+      if (gesture.current || contextMenu) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        cancelGesture();
+        setContextMenu(null);
+        (_a2 = stage.current) == null ? void 0 : _a2.focus();
+      }
+    };
+    document.addEventListener("pointerdown", close, true);
+    window.addEventListener("keydown", key, true);
+    return () => {
+      document.removeEventListener("pointerdown", close, true);
+      window.removeEventListener("keydown", key, true);
+    };
+  }, [contextMenu]);
+  useEffect(() => {
+    const menu = menuRef.current;
+    if (!menu || !contextMenu) return;
+    const rect = menu.getBoundingClientRect();
+    menu.style.left = `${Math.max(8, Math.min(contextMenu.x, innerWidth - rect.width - 8))}px`;
+    menu.style.top = `${Math.max(8, Math.min(contextMenu.y, innerHeight - rect.height - 8))}px`;
+    menu.focus();
+  }, [contextMenu, portal]);
+  useEffect(() => {
+    const g = gesture.current;
+    if (g && (g.doc !== JSON.stringify(model) || !editable && g.kind === "node")) cancelGesture();
+  }, [model, editable]);
+  useEffect(() => {
+    var _a2, _b2;
+    if (editing) {
+      (_a2 = input.current) == null ? void 0 : _a2.focus();
+      (_b2 = input.current) == null ? void 0 : _b2.select();
+    }
+  }, [editing]);
+  useEffect(() => {
+    if (!editing) return;
+    const topic = model.topics.find((topic2) => topic2.id === editing), element = input.current;
+    if (!topic || !editable) {
+      c == null ? void 0 : c.endText(editing);
+      setEditing(null);
+      return;
+    }
+    if (composing.current || topic.text === text) return;
+    const start = (element == null ? void 0 : element.selectionStart) ?? 0, end = (element == null ? void 0 : element.selectionEnd) ?? start, diff = textDifference(text, topic.text);
+    const shift = diff.text.length - diff.to + diff.from;
+    const map = (pos) => pos <= diff.from ? pos : pos >= diff.to ? pos + shift : diff.from + diff.text.length;
+    setText(topic.text);
+    queueMicrotask(() => {
+      if (element === document.activeElement) element == null ? void 0 : element.setSelectionRange(map(start), map(end));
+    });
+  }, [model, editable, editing]);
+  useEffect(() => {
+    const element = input.current;
+    if (!editing || !element) return;
+    element.style.height = "0px";
+    element.style.height = `${Math.max(mindTopicLineHeight(current.fontSize || 14), element.scrollHeight)}px`;
+  }, [editing, text, current.fontSize]);
+  useEffect(() => {
+    const ids = new Set(drawing.nodes.map((topic) => topic.id));
+    setSelected((previous) => {
+      const next = new Set([...previous].filter((id) => ids.has(id)));
+      return next.size === previous.size ? previous : next;
+    });
+    if (!ids.has(active)) setActive(model.rootId);
+  }, [model, active, focusId, folds]);
+  const viewStateRef = useRef({ zoom, pan: origin, grid, quickControls, moving, folds, active, selected });
+  viewStateRef.current = { zoom, pan: origin, grid, quickControls, moving, folds, active, selected };
+  useEffect(() => () => {
+    const state = c == null ? void 0 : c.context.viewState;
+    if (!state) return;
+    const current2 = viewStateRef.current;
+    state.maps[model.id] = {
+      selectedId: current2.active,
+      selectedIds: [...current2.selected],
+      showGrid: current2.grid,
+      showQuickControls: current2.quickControls,
+      panMode: current2.moving,
+      collapsed: [...current2.folds],
+      viewport: { x: current2.pan.x, y: current2.pan.y, zoom: current2.zoom }
+    };
+  }, [c, model.id]);
+  const awareness = c == null ? void 0 : c.context.awareness;
+  const [peerEpoch, bumpPeers] = useState(0);
+  useEffect(() => {
+    if (!awareness) return;
+    const change = () => bumpPeers((value) => value + 1);
+    awareness.on("change", change);
+    return () => {
+      awareness.off("change", change);
+    };
+  }, [awareness]);
+  useEffect(() => {
+    var _a2;
+    const local = (_a2 = awareness == null ? void 0 : awareness.getLocalState()) == null ? void 0 : _a2.mindMap;
+    if (awareness && ((local == null ? void 0 : local.blockId) === model.id || !local)) {
+      awareness.setLocalStateField("mindMap", { blockId: model.id, topicId: active, editing: !!editing, viewport: { ...origin, zoom } });
+    }
+  }, [awareness, model.id, active, editing, origin.x, origin.y, zoom]);
+  useEffect(() => () => {
+    var _a2, _b2;
+    if (((_b2 = (_a2 = awareness == null ? void 0 : awareness.getLocalState()) == null ? void 0 : _a2.mindMap) == null ? void 0 : _b2.blockId) === model.id) awareness.setLocalStateField("mindMap", null);
+  }, [awareness, model.id]);
+  useEffect(() => {
+    var _a2;
+    if (!awareness || following === null) return;
+    const peer = (_a2 = awareness.getStates().get(following)) == null ? void 0 : _a2.mindMap;
+    if ((peer == null ? void 0 : peer.blockId) !== model.id || !peer.viewport || ![peer.viewport.x, peer.viewport.y, peer.viewport.zoom].every(Number.isFinite)) return;
+    const nextZoom = Math.min(2.5, Math.max(5e-3, peer.viewport.zoom));
+    setPan({ x: peer.viewport.x, y: peer.viewport.y });
+    setZoom(nextZoom);
+  }, [awareness, following, model.id, peerEpoch]);
+  const peers = useMemo(() => {
+    return Array.from((awareness == null ? void 0 : awareness.getStates().entries()) ?? []).flatMap(([client, state]) => {
+      var _a2, _b2;
+      const data = state.mindMap;
+      if (client === (awareness == null ? void 0 : awareness.clientID) || (data == null ? void 0 : data.blockId) !== model.id) return [];
+      return [{ client, name: String(((_a2 = state.user) == null ? void 0 : _a2.name) || ((_b2 = state.user) == null ? void 0 : _b2.displayName) || "协作者"), topicId: String(data.topicId || ""), editing: !!data.editing }];
+    });
+  }, [awareness, model.id, peerEpoch]);
+  function fit(target = viewModel) {
+    var _a2, _b2;
+    const bounds = layoutMindMap(target, normalizeMindFolds(target, folds)).bounds;
+    const width = ((_a2 = stage.current) == null ? void 0 : _a2.clientWidth) ?? size.width, height = ((_b2 = stage.current) == null ? void 0 : _b2.clientHeight) ?? size.height;
+    const nextZoom = Math.min(1.15, Math.max(5e-3, Math.min((width - 110) / bounds.width, (height - 150) / bounds.height)));
+    setZoom(nextZoom);
+    setPan({ x: width / 2 - (bounds.x + bounds.width / 2) * nextZoom, y: height / 2 - (bounds.y + bounds.height / 2) * nextZoom });
+  }
+  const autoFitted = useRef(false);
+  const lastLayout = useRef(model.layout), lastPanels = useRef({ details, comments, outline });
+  useEffect(() => {
+    const panels = lastPanels.current;
+    if (autoFitted.current && (lastLayout.current !== model.layout || panels.details !== details || panels.comments !== comments || panels.outline !== outline) && following === null) fit();
+    lastLayout.current = model.layout;
+    lastPanels.current = { details, comments, outline };
+  }, [model.layout, details, comments, outline, size.width, size.height]);
+  useEffect(() => {
+    if (autoFitted.current) return;
+    if (!size.width || !size.height || !stage.current) return;
+    autoFitted.current = true;
+    if (saved == null ? void 0 : saved.viewport) {
+      setPan({ x: saved.viewport.x, y: saved.viewport.y });
+    } else fit();
+  }, [size.width, size.height]);
+  const point = (x, y) => {
+    const rect = stage.current.getBoundingClientRect();
+    return { x: (x - rect.left - origin.x) / zoom, y: (y - rect.top - origin.y) / zoom };
+  };
+  function select(id, additive = false) {
+    var _a2;
+    const next = selectMindTopic(selected, id, additive);
+    setFollowing(null);
+    setSelected(next);
+    setActive(next.has(id) ? id : [...next].at(-1) ?? model.rootId);
+    (_a2 = stage.current) == null ? void 0 : _a2.focus();
+  }
+  function locateHit(hit) {
+    locate(hit.id);
+    if (hit.field !== "title") {
+      setDetails(true);
+      setComments(false);
+    }
+  }
+  function locate(id) {
+    const live = (c == null ? void 0 : c.snapshot()) ?? model;
+    if (!live.topics.some((topic2) => topic2.id === id)) return;
+    const next = new Set(folds);
+    for (const ancestor of ancestorIds(live, id)) next.delete(ancestor);
+    const drawing2 = layoutMindMap(live, next), topic = drawing2.nodes.find((topic2) => topic2.id === id);
+    setFolds(next);
+    setFocusId(null);
+    select(id);
+    if (topic) setPan({ x: size.width / 2 - (topic.x + topic.width / 2) * zoom, y: size.height / 2 - (topic.y + topic.height / 2) * zoom });
+  }
+  useEffect(() => {
+    setSelectedRange({ from: 0, to: 0 });
+  }, [active]);
+  useEffect(() => {
+    if (!host.location) return;
+    const linked = () => {
+      const params = new URLSearchParams(host.location.current().replace(/^#/, ""));
+      const id = params.get("topic");
+      if (params.get("mind") === model.id && id) locate(id);
+    };
+    linked();
+    return host.location.subscribe(linked);
+  }, [host.location, model.id]);
+  function jumpHit(delta) {
+    if (!hits.length) return;
+    const next = (hitIndex + delta + hits.length) % hits.length;
+    setHitIndex(next);
+    locateHit(hits[next]);
+  }
+  function edit(id) {
+    if (id && editable) {
+      const topic = model.topics.find((topic2) => topic2.id === id);
+      if (!topic) return;
+      setActive(id);
+      setSelected(/* @__PURE__ */ new Set([id]));
+      c == null ? void 0 : c.beginText(id);
+      setText(topic.text);
+      setEditing(id);
+    } else {
+      if (editing) c == null ? void 0 : c.endText(editing);
+      setEditing(null);
+      queueMicrotask(() => {
+        var _a2;
+        return (_a2 = stage.current) == null ? void 0 : _a2.focus();
+      });
+    }
+  }
+  function add(kind, side, targetId = active) {
+    if (!c || !editable) return;
+    if (model.topics.length >= MIND_MAP_MAX_TOPICS) {
+      setNotice("单张导图最多支持 500 个主题。");
+      return;
+    }
+    const id = kind === "parent" ? c.addParent(targetId) : side !== void 0 && targetId === model.rootId ? c.addRootChild(side) : kind === "sibling" ? c.addSibling(targetId, "after") : c.add(targetId);
+    if (id) {
+      setFolds((previous) => {
+        const next = new Set(previous);
+        next.delete(targetId);
+        return next;
+      });
+      setSelected(/* @__PURE__ */ new Set([id]));
+      setActive(id);
+      c.beginText(id);
+      setText("新主题");
+      setEditing(id);
+    }
+  }
+  function addSiblingAt(id, placement) {
+    if (!c || !editable) return;
+    if (model.topics.length >= MIND_MAP_MAX_TOPICS) {
+      setNotice("单张导图最多支持 500 个主题。");
+      return;
+    }
+    const next = c.addSibling(id, placement);
+    if (next) {
+      setFolds((previous) => {
+        const nextFolds = new Set(previous);
+        nextFolds.delete(id);
+        return nextFolds;
+      });
+      setSelected(/* @__PURE__ */ new Set([next]));
+      setActive(next);
+      c.beginText(next);
+      setText("新主题");
+      setEditing(next);
+    }
+  }
+  function remove(targetId = active, targetSelection = selected) {
+    if (!c || !editable) return;
+    const plan = planMindTopicDeletion(model, targetSelection, targetId);
+    if (!plan) return;
+    deletionSelection.current = [...targetSelection];
+    deletionActive.current = targetId;
+    if (plan.ids.size > plan.roots.length) setConfirmDelete(plan);
+    else performDelete(plan, targetId);
+  }
+  function performDelete(plan, targetId = deletionActive.current) {
+    const next = planMindTopicDeletion((c == null ? void 0 : c.snapshot()) ?? model, deletionSelection.current, targetId);
+    if (!next || next.ids.size !== plan.ids.size || [...next.ids].some((id) => !plan.ids.has(id)) || !(c == null ? void 0 : c.removeMany(deletionSelection.current))) {
+      setNotice("主题或权限已变化，请重新选择");
+      return;
+    }
+    setSelected(/* @__PURE__ */ new Set([next.nextId]));
+    setActive(next.nextId);
+    setEditing(null);
+    setConfirmDelete(null);
+    setNotice(`已删除 ${plan.ids.size} 个主题，可撤销。`);
+    queueMicrotask(() => {
+      var _a2;
+      return (_a2 = stage.current) == null ? void 0 : _a2.focus();
+    });
+  }
+  function fold(id) {
+    if (!mindMapDescendants$1(model, id).size || id === model.rootId) return;
+    setFolds((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+  function copy(targetId = active) {
+    var _a2;
+    if (!c) return;
+    copied.current = c.copyBranch(targetId);
+    setNotice("分支已复制，选择目标主题后粘贴。");
+    if (canExport) void ((_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText(`YWIKI_MINDMAP_BRANCH_V1
+${JSON.stringify(copied.current)}`).catch(() => {
+    }));
+  }
+  async function materializeImages(source) {
+    var _a2, _b2;
+    const prepared = structuredClone(source);
+    const known = new Set(model.topics.flatMap((topic) => topic.attachmentId ? [topic.attachmentId] : []));
+    const clones = /* @__PURE__ */ new Map();
+    for (const node of prepared) {
+      const id = (_a2 = node.attrs) == null ? void 0 : _a2.attachmentId;
+      if (typeof id !== "string" || !id || known.has(id)) continue;
+      if (!(c == null ? void 0 : c.context.uploadImage)) throw new Error("当前文档不支持图片复制，请移除图片后导入");
+      if (!clones.has(id)) {
+        const fetcher = c.context.fetchAttachment ?? props.fetchAttachment ?? ((_b2 = host.attachments) == null ? void 0 : _b2.fetch);
+        if (!fetcher) throw new Error("当前文档未配置图片读取服务");
+        const blob = await fetcher(id);
+        const uploaded = await c.context.uploadImage(new File([blob], "导图主题图片.png", { type: blob.type || "image/png" }));
+        clones.set(id, uploaded.id);
+      }
+      node.attrs.attachmentId = clones.get(id);
+    }
+    return prepared;
+  }
+  async function paste(targetId = active) {
+    if (!editable || !c || pastingRef.current) return;
+    pastingRef.current = true;
+    setPasting(true);
+    try {
+      let value = copied.current;
+      if (canExport) try {
+        const raw = await Promise.race([navigator.clipboard.readText(), new Promise((_, reject) => setTimeout(() => reject(new Error("剪贴板读取超时")), 1500))]);
+        if (raw.length < 2e6 && raw.startsWith("YWIKI_MINDMAP_BRANCH_V1\n")) value = parseMindBranch(raw);
+      } catch {
+      }
+      await insertBranch(value, targetId);
+    } catch (error) {
+      if (alive.current) setNotice(error instanceof Error ? error.message : "图片复制失败");
+    } finally {
+      pastingRef.current = false;
+      if (alive.current) setPasting(false);
+    }
+  }
+  async function insertBranch(value, targetId) {
+    var _a2;
+    if (value.filter((node) => node.type === "mindMapTopic").length + model.topics.length > MIND_MAP_MAX_TOPICS) throw new Error("粘贴后主题超过 500 个，本次未修改");
+    const prepared = await materializeImages(value), live = currentRef.current;
+    if (!alive.current || live.c !== c || !live.editable || live.model.id !== model.id) return;
+    if (!((_a2 = c == null ? void 0 : c.snapshot()) == null ? void 0 : _a2.topics.some((topic) => topic.id === targetId))) throw new Error("目标主题已移除，请重新选择");
+    const id = c.pasteBranch(targetId, prepared);
+    if (!id) throw new Error("没有可粘贴的分支，或主题容量超过上限");
+    setNotice("已粘贴分支。");
+    setFolds((previous) => {
+      const next = new Set(previous);
+      next.delete(targetId);
+      return next;
+    });
+    locate(id);
+  }
+  async function nativePaste(event) {
+    var _a2;
+    if (!editable || event.target.closest('input,textarea,[contenteditable="true"]')) return;
+    const raw = ((_a2 = event.clipboardData) == null ? void 0 : _a2.getData("text/plain")) ?? "";
+    if (!raw.startsWith("YWIKI_MINDMAP_BRANCH_V1\n")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    try {
+      if (pastingRef.current) return;
+      pastingRef.current = true;
+      setPasting(true);
+      await insertBranch(parseMindBranch(raw), active);
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "分支格式无效");
+    } finally {
+      pastingRef.current = false;
+      if (alive.current) setPasting(false);
+    }
+  }
+  function moveSide(side, targetId = active) {
+    var _a2;
+    if (c == null ? void 0 : c.moveToSide(targetId, side)) {
+      setNotice(`已移到${side === -1 ? "左" : "右"}侧`);
+      (_a2 = stage.current) == null ? void 0 : _a2.focus();
+    }
+  }
+  function openContextMenu(id, event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (id) select(id);
+    setContextMenu({ id, x: event.clientX, y: event.clientY });
+  }
+  function menuKeydown(event) {
+    var _a2, _b2;
+    const items = Array.from(((_a2 = menuRef.current) == null ? void 0 : _a2.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) ?? []);
+    if (!items.length || !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const index = items.indexOf(document.activeElement);
+    (_b2 = items[event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : index < 0 ? event.key === "ArrowUp" ? items.length - 1 : 0 : (index + (event.key === "ArrowUp" ? -1 : 1) + items.length) % items.length]) == null ? void 0 : _b2.focus();
+  }
+  function contextAction(action) {
+    const id = (contextMenu == null ? void 0 : contextMenu.id) ?? active;
+    setContextMenu(null);
+    if (!id) return;
+    setActive(id);
+    if (action === "child" || action === "sibling" || action === "parent") add(action, void 0, id);
+    else if (action === "rename") edit(id);
+    else if (action === "properties") {
+      setDetails(true);
+      setComments(false);
+    } else if (action === "fold") fold(id);
+    else if (action === "focus") {
+      setFocusId(id);
+      fit(branchModel(model, id));
+    } else if (action === "left") moveSide(-1, id);
+    else if (action === "right") moveSide(1, id);
+    else if (action === "copy") copy(id);
+    else if (action === "paste") void paste((contextMenu == null ? void 0 : contextMenu.id) ? id : selected.size === 1 ? active : viewModel.rootId);
+    else if (action === "delete") remove(id, /* @__PURE__ */ new Set([id]));
+    else paneCommand(action);
+  }
+  function paneCommand(action) {
+    var _a2;
+    setFollowing(null);
+    if (action === "quick") setQuickControls((value) => !value);
+    else if (action === "grid") setGrid((value) => !value);
+    else if (action === "comments") {
+      setComments((value) => !value);
+      setDetails(false);
+    } else if (action === "zoom-in") zoomTo(zoom * 1.2);
+    else if (action === "zoom-out") zoomTo(zoom / 1.2);
+    else if (action === "reset-zoom") zoomTo(1);
+    else if (action === "fit") fit();
+    (_a2 = stage.current) == null ? void 0 : _a2.focus();
+  }
+  function followPeer(client) {
+    cancelGesture();
+    edit(null);
+    setFollowing(client);
+  }
+  function zoomTo(value, at = { x: size.width / 2, y: size.height / 2 }) {
+    const next = Math.max(5e-3, Math.min(2.5, value)), ratio = next / zoom;
+    const x = at.x - (at.x - origin.x) * ratio, y = at.y - (at.y - origin.y) * ratio;
+    setZoom(next);
+    setPan({ x, y });
+  }
+  async function copyTopicLink() {
+    var _a2, _b2;
+    const link = (_b2 = (_a2 = host.location) == null ? void 0 : _a2.createLink) == null ? void 0 : _b2.call(_a2, { blockId: model.id, topicId: active });
+    if (!link) {
+      setNotice("宿主未提供主题定位链接");
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(link);
+      setNotice("已复制主题定位链接");
+    } catch {
+      setNotice(link);
+    }
+  }
+  function keydown(event) {
+    var _a2, _b2, _c2, _d2;
+    if (!((_a2 = root.current) == null ? void 0 : _a2.contains(event.target)) || event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229 || event.target.closest("input,textarea,[contenteditable=true]")) return;
+    const command = event.ctrlKey || event.metaKey;
+    const view = mindCanvasShortcut(event);
+    if (event.target.closest("button,select,[role=combobox]") && !view && !command) return;
+    if (event.code === "Space") {
+      event.preventDefault();
+      space.current = true;
+      setSpaceHeld(true);
+      return;
+    }
+    if (event.key === "Escape") {
+      if (!props.inline && !details && !comments && !showSearch) return;
+      event.preventDefault();
+      event.stopPropagation();
+      cancelGesture();
+      setContextMenu(null);
+      setSelected(/* @__PURE__ */ new Set());
+      setDetails(false);
+      setComments(false);
+      setShowSearch(false);
+      return;
+    }
+    if (command && event.key.toLowerCase() === "z" && editable) {
+      event.preventDefault();
+      event.shiftKey ? c == null ? void 0 : c.redo() : c == null ? void 0 : c.undo();
+      return;
+    }
+    if (command && event.key.toLowerCase() === "y" && editable) {
+      event.preventDefault();
+      c == null ? void 0 : c.redo();
+      return;
+    }
+    if (command && event.key.toLowerCase() === "f") {
+      event.preventDefault();
+      setShowSearch(true);
+      return;
+    }
+    if (command && event.key.toLowerCase() === "c" && editable && selected.size === 1) {
+      event.preventDefault();
+      copy();
+      return;
+    }
+    if (command && event.key.toLowerCase() === "v" && editable) {
+      event.preventDefault();
+      void paste();
+      return;
+    }
+    if ((command || event.altKey) && event.key === ".") {
+      event.preventDefault();
+      fold(active);
+      return;
+    }
+    if (view) {
+      event.preventDefault();
+      paneCommand(view);
+      return;
+    }
+    if ((event.key === "Delete" || event.key === "Backspace") && editable && !command && !event.altKey && selected.size) {
+      event.preventDefault();
+      if (!event.repeat) remove();
+      return;
+    }
+    if (!editable || selected.size !== 1) return;
+    if (event.key === "Tab") {
+      event.preventDefault();
+      add(event.shiftKey ? "parent" : "child");
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      add("sibling");
+    } else if (event.key === "F2") {
+      event.preventDefault();
+      edit(active);
+    } else if (event.altKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+      const siblings = tree.filter((topic) => topic.parentId === current.parentId), index = siblings.findIndex((topic) => topic.id === active), target = siblings[index + (event.key === "ArrowUp" ? -1 : 1)];
+      if (target) c == null ? void 0 : c.move(active, target.id, event.key === "ArrowUp" ? "before" : "after");
+      event.preventDefault();
+    } else if (event.key.startsWith("Arrow")) {
+      event.preventDefault();
+      const branchSide = ((_b2 = drawing.nodes.find((topic) => topic.id === active)) == null ? void 0 : _b2.side) ?? 1;
+      const inward = model.layout === "down" ? "ArrowUp" : branchSide === 1 ? "ArrowLeft" : "ArrowRight";
+      const outward = model.layout === "down" ? "ArrowDown" : branchSide === 1 ? "ArrowRight" : "ArrowLeft";
+      const siblings = drawing.nodes.filter((topic) => topic.parentId === current.parentId), index = siblings.findIndex((topic) => topic.id === active);
+      const target = event.key === inward ? current.parentId : event.key === outward ? (_c2 = drawing.nodes.find((topic) => topic.parentId === active)) == null ? void 0 : _c2.id : (_d2 = siblings[index + (event.key === "ArrowUp" || event.key === "ArrowLeft" ? -1 : 1)]) == null ? void 0 : _d2.id;
+      if (target) select(target);
+    }
+  }
+  function cancelGesture(restore = true) {
+    const current2 = gesture.current;
+    if (restore && (current2 == null ? void 0 : current2.kind) === "box") {
+      setSelected(current2.selected);
+      setActive(current2.active);
+    }
+    gesture.current = null;
+    setBox(null);
+    setDrop(null);
+    setDragPreview(null);
+  }
+  function pointerDown(event, id) {
+    var _a2, _b2;
+    if (!((_a2 = stage.current) == null ? void 0 : _a2.contains(event.target))) return;
+    if (event.target.closest("button,input,textarea,a")) return;
+    setFollowing(null);
+    setContextMenu(null);
+    const base = { x: event.clientX, y: event.clientY, lastX: event.clientX, lastY: event.clientY, doc: JSON.stringify(model), count: selected.size, selected: new Set(selected), active };
+    if (id && event.button === 0 && !moving && !space.current) {
+      const additive = event.shiftKey || event.metaKey || event.ctrlKey;
+      const next = selected.has(id) && selected.size > 1 && !additive ? selected : selectMindTopic(selected, id, additive);
+      setSelected(next);
+      setActive(next.has(id) ? id : [...next].at(-1) ?? model.rootId);
+      gesture.current = { ...base, kind: "node", id, count: next.size, additive };
+    } else if (event.button === 1 || event.button === 0 && (moving || space.current)) gesture.current = { ...base, kind: "pan" };
+    else if (!id && event.button === 0) {
+      gesture.current = { ...base, kind: "box", additive: event.shiftKey || event.metaKey || event.ctrlKey };
+      if (!gesture.current.additive) setSelected(/* @__PURE__ */ new Set());
+    } else return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    (_b2 = stage.current) == null ? void 0 : _b2.focus();
+    event.preventDefault();
+  }
+  function pointerMove(event) {
+    const g = gesture.current;
+    if (!g) return;
+    if (g.doc !== JSON.stringify(currentRef.current.model)) {
+      cancelGesture();
+      return;
+    }
+    if (g.kind === "pan") {
+      const dx = event.clientX - g.lastX, dy = event.clientY - g.lastY;
+      setPan((previous) => ({ x: previous.x + dx, y: previous.y + dy }));
+    } else if (g.kind === "box") {
+      const from = point(g.x, g.y), to = point(event.clientX, event.clientY);
+      g.box = { x: Math.min(from.x, to.x), y: Math.min(from.y, to.y), w: Math.abs(to.x - from.x), h: Math.abs(to.y - from.y) };
+      setBox(g.box);
+      setSelected(topicsInMarquee(drawing.nodes, { x: g.box.x, y: g.box.y, width: g.box.w, height: g.box.h }, g.additive ? g.selected : []));
+    } else if (editable && g.id && g.id !== model.rootId && g.count === 1 && Math.hypot(event.clientX - g.x, event.clientY - g.y) > 8) {
+      g.drop = mindMapDrop(viewModel, drawing, g.id, point(event.clientX, event.clientY), !focusId);
+      setDrop(g.drop);
+      setDragPreview({ id: g.id, dx: (event.clientX - g.x) / zoom, dy: (event.clientY - g.y) / zoom });
+    }
+    g.lastX = event.clientX;
+    g.lastY = event.clientY;
+  }
+  function pointerUp() {
+    const g = gesture.current;
+    if (!g) return;
+    cancelGesture(false);
+    if (g.doc !== JSON.stringify(currentRef.current.model)) return;
+    const bounds = g.box;
+    if (g.kind === "box" && bounds) {
+      const ids = topicsInMarquee(drawing.nodes, { x: bounds.x, y: bounds.y, width: bounds.w, height: bounds.h }, g.additive ? g.selected : []);
+      setSelected(ids);
+      if (ids.size) setActive([...ids].at(-1));
+    } else if (g.kind === "node" && g.id && g.drop && editable) {
+      if (g.drop.kind === "side") c == null ? void 0 : c.moveToSide(g.id, g.drop.side, g.drop.beforeId);
+      else c == null ? void 0 : c.move(g.id, g.drop.id, g.drop.mode);
+    } else if (g.kind === "node" && g.id && g.count > 1 && !g.additive && Math.hypot(g.lastX - g.x, g.lastY - g.y) < 8) {
+      setSelected(/* @__PURE__ */ new Set([g.id]));
+      setActive(g.id);
+    }
+  }
+  async function exportAs(kind) {
+    var _a2, _b2;
+    if (!canExport || exportRunning.current) return;
+    exportRunning.current = true;
+    setBusy(true);
+    const target = exportBranch ? branchModel(model, active) : model;
+    const printWindow = kind === "print" ? window.open("", "_blank") : null;
+    try {
+      if (kind === "copy") {
+        await navigator.clipboard.writeText(mindMapMarkdown(target));
+        return;
+      }
+      const images = {};
+      for (const topic of target.topics) if (topic.attachmentId) {
+        const fetcher = props.fetchAttachment ?? (c == null ? void 0 : c.context.fetchAttachment) ?? ((_a2 = host.attachments) == null ? void 0 : _a2.fetch);
+        if (!fetcher) throw new Error("未配置主题图片读取服务");
+        const blob = await fetcher(topic.attachmentId);
+        images[topic.attachmentId] = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(String(reader.result));
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        });
+      }
+      const svg = mindMapSvg(target, { transparent, images }), download = (blob, ext) => {
+        const url = URL.createObjectURL(blob), a = document.createElement("a");
+        a.href = url;
+        a.download = `思维导图.${ext}`;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1e3);
+      };
+      if (kind === "svg") download(new Blob([svg], { type: "image/svg+xml" }), "svg");
+      else if (kind === "md") download(new Blob([mindMapMarkdown(target)], { type: "text/markdown" }), "md");
+      else if (kind === "json") download(new Blob([JSON.stringify(mindMapToJson(target), null, 2)], { type: "application/json" }), "json");
+      else if (kind === "png" || kind === "copy-image" || kind === "print") {
+        const image = new Image(), url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+        try {
+          await new Promise((resolve, reject) => {
+            image.onload = () => resolve();
+            image.onerror = reject;
+            image.src = url;
+          });
+          const canvas = document.createElement("canvas");
+          canvas.width = image.width * imageScale;
+          canvas.height = image.height * imageScale;
+          (_b2 = canvas.getContext("2d")) == null ? void 0 : _b2.drawImage(image, 0, 0, canvas.width, canvas.height);
+          const blob = await new Promise((resolve, reject) => canvas.toBlob((value) => value ? resolve(value) : reject(new Error("图片生成失败"))));
+          if (kind === "copy-image") await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+          else if (kind === "print") {
+            if (!printWindow) throw new Error("打印窗口被浏览器拦截");
+            const img = printWindow.document.createElement("img");
+            img.src = canvas.toDataURL();
+            img.style.maxWidth = "100%";
+            printWindow.document.body.append(img);
+            img.onload = () => printWindow.print();
+          } else download(blob, "png");
+        } finally {
+          URL.revokeObjectURL(url);
+        }
+      }
+    } catch (error) {
+      printWindow == null ? void 0 : printWindow.close();
+      setNotice(String(error));
+    } finally {
+      exportRunning.current = false;
+      if (alive.current) setBusy(false);
+    }
+  }
+  const directions = mindMapBranchSides(model), firstLevel = current.parentId === model.rootId;
+  const menuTopic = tree.find((topic) => topic.id === (contextMenu == null ? void 0 : contextMenu.id));
+  const modifier = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
+  const contextGroups = (contextMenu == null ? void 0 : contextMenu.id) ? [{ items: [
+    ...editable ? [
+      { value: "child", label: "添加子主题" },
+      { value: "sibling", label: "添加同级主题" },
+      ...contextMenu.id !== model.rootId ? [{ value: "parent", label: "插入父主题" }] : [],
+      { value: "rename", label: "修改文字" }
+    ] : [],
+    { value: "properties", label: "主题属性" },
+    ...contextMenu.id !== model.rootId && mindMapDescendants$1(model, contextMenu.id).size > 1 ? [{ value: "fold", label: folds.has(contextMenu.id) ? "展开分支" : "收起分支" }] : [],
+    ...editable && (menuTopic == null ? void 0 : menuTopic.parentId) === model.rootId && model.layout !== "down" ? [
+      { value: "left", label: "移到左侧", disabled: directions.get(contextMenu.id) === -1 },
+      { value: "right", label: "移到右侧", disabled: directions.get(contextMenu.id) === 1 }
+    ] : [],
+    { value: "focus", label: "聚焦分支" },
+    ...editable ? [
+      { value: "copy", label: "复制分支" },
+      { value: "paste", label: "粘贴分支", disabled: pasting },
+      ...contextMenu.id !== model.rootId ? [{ value: "delete", label: "删除分支" }] : []
+    ] : []
+  ] }] : [
+    ...editable ? [{ items: [{ value: "paste", label: "粘贴", disabled: pasting, shortcut: "⌘ / Ctrl＋V" }] }] : [],
+    { items: [
+      ...pageId ? [{ value: "comments", label: comments ? "隐藏评论" : "显示评论", shortcut: "Shift＋C" }] : [],
+      ...editable ? [{ value: "quick", label: quickControls ? "隐藏快捷创建" : "显示快捷创建", shortcut: "Shift＋Q" }] : [],
+      { value: "grid", label: grid ? "隐藏网格" : "显示网格", shortcut: "Shift＋G" }
+    ] },
+    { items: [
+      { value: "zoom-in", label: "放大", shortcut: `${modifier} ＋ +` },
+      { value: "zoom-out", label: "缩小", shortcut: `${modifier} ＋ −` },
+      { value: "reset-zoom", label: "缩放至 100%", shortcut: `${modifier} ＋ 0` },
+      { value: "fit", label: "画布全览", shortcut: "Shift＋1" }
+    ] }
+  ];
+  const workspace = /* @__PURE__ */ jsxs("div", { className: "mind-map-workspace", ref: root, onKeyDown: keydown, onPaste: nativePaste, style: { "--mind-color": color }, children: [
+    editable && !status && props.showSaveHint !== false && /* @__PURE__ */ jsx(WAlert, { closable: true, closeLabel: "关闭保存提示", className: "mind-save-hint", children: "编辑完成后，请确认已保存再离开。" }),
+    /* @__PURE__ */ jsxs("header", { className: "mind-canvas-toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mind-canvas-tools", children: [
+        !props.inline && props.onClose && /* @__PURE__ */ jsx(WButton, { onClick: props.onClose, children: "返回文档" }),
+        /* @__PURE__ */ jsx(
+          WDropdown,
+          {
+            label: "展开与收起",
+            groups: [{ items: [{ value: "expand", label: "全部展开" }, { value: "first-level", label: "收起至一级" }] }],
+            onSelect: (value) => setFolds(value === "expand" ? /* @__PURE__ */ new Set() : firstLevelMindFolds(viewModel))
+          }
+        ),
+        /* @__PURE__ */ jsx(WButton, { ref: settingsTrigger, "aria-expanded": settingsOpen, onClick: () => setSettingsOpen(!settingsOpen), children: "视图与导出设置" }),
+        settingsOpen && /* @__PURE__ */ jsx(AnchoredPanel, { anchor: settingsTrigger.current, onClose: () => setSettingsOpen(false), align: "center", gap: 6, label: "视图与导出设置", className: "mind-dropdown-popup", children: /* @__PURE__ */ jsxs("div", { className: "mind-settings-menu", children: [
+          peers.map((peer) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsxs("span", { className: "mind-peer", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                peer.name,
+                peer.editing ? " 正在编辑" : " 正在查看",
+                " ",
+                (_b2 = (_a2 = model.topics.find((topic) => topic.id === peer.topicId)) == null ? void 0 : _a2.text) == null ? void 0 : _b2.slice(0, 12)
+              ] }),
+              /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => followPeer(peer.client), children: "跟随" })
+            ] }, peer.client);
+          }),
+          following !== null && /* @__PURE__ */ jsx(WButton, { onClick: () => followPeer(null), children: "停止跟随" }),
+          /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => {
+            const id = focusId ? null : active;
+            setFocusId(id);
+            fit(id ? branchModel(model, id) : model);
+          }, children: focusId ? "返回全图" : "聚焦分支" }),
+          /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => void copyTopicLink(), children: "复制主题链接" }),
+          editable && /* @__PURE__ */ jsx(WSelect, { label: "分支线型", ariaLabel: "分支线型", width: 95, value: model.branchStyle ?? "curve", onChange: (value) => c == null ? void 0 : c.settings({ branchStyle: value }), options: ["curve", "straight", "step"].map((value, i) => ({ value, label: ["曲线", "直线", "折线"][i] })) }),
+          canExport && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("label", { children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", checked: exportBranch, onChange: (event) => setExportBranch(event.target.checked) }),
+              "仅导出选中分支"
+            ] }),
+            /* @__PURE__ */ jsxs("label", { children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", checked: transparent, onChange: (event) => setTransparent(event.target.checked) }),
+              "透明背景"
+            ] }),
+            /* @__PURE__ */ jsx(WSelect, { label: "图片分辨率", ariaLabel: "图片分辨率", width: 90, value: imageScale, onChange: (value) => setImageScale(Number(value)), options: [1, 2, 3].map((value) => ({ value, label: `${value} 倍图片` })) })
+          ] }),
+          canExport && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => void exportAs("copy-image"), children: "复制图片" }),
+            /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => void exportAs("print"), children: "打印 / PDF" })
+          ] })
+        ] }) }),
+        peers.length > 0 && /* @__PURE__ */ jsx(
+          WDropdown,
+          {
+            label: `协作（${peers.length}）`,
+            buttonProps: { variant: "text" },
+            groups: [{ items: peers.map((peer) => ({ value: String(peer.client), label: `${peer.name}${peer.editing ? " 正在编辑" : " 正在查看"} · 跟随` })) }],
+            onSelect: (value) => followPeer(Number(value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mind-canvas-tools mind-canvas-options", children: [
+        status || !editable ? /* @__PURE__ */ jsx("span", { className: "mind-canvas-status", role: "status", "aria-label": "保存状态", children: status || "只读" }) : null,
+        editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(WSelect, { label: "导图布局", ariaLabel: "导图布局", width: 94, value: model.layout, onChange: (value) => c == null ? void 0 : c.settings({ layout: value }), options: ["right", "left", "both", "down"].map((value, i) => ({ value, label: ["向右", "向左", "双侧", "向下"][i] })) }),
+          /* @__PURE__ */ jsx(WSelect, { label: "导图主题", ariaLabel: "导图主题", width: 94, value: model.theme, onChange: (value) => c == null ? void 0 : c.settings({ theme: value }), options: ["blue", "teal", "violet", "amber"].map((value, i) => ({ value, label: ["靛蓝", "青绿", "紫藤", "琥珀"][i] })) }),
+          /* @__PURE__ */ jsx(WSelect, { label: "正文预览高度", ariaLabel: "正文预览高度", width: 114, value: model.height, onChange: (value) => c == null ? void 0 : c.settings({ height: Number(value) }), options: [280, 380, 520].map((value, index) => ({ value, label: ["预览 · 紧凑", "预览 · 标准", "预览 · 宽松"][index] })) })
+        ] }),
+        /* @__PURE__ */ jsx(WButton, { onClick: () => setShowSearch(!showSearch), children: "查找替换" }),
+        !editable && host.comments && pageId && /* @__PURE__ */ jsx(WButton, { variant: comments ? "primary" : "default", "aria-pressed": comments, onClick: () => {
+          setComments(!comments);
+          setDetails(false);
+        }, children: comments ? "收起讨论" : "查看讨论" }),
+        /* @__PURE__ */ jsx(WDropdown, { label: "更多", groups: [{ items: [
+          { value: "outline", label: outline ? "隐藏文字大纲" : "显示文字大纲" },
+          { value: "details", label: "主题属性" },
+          ...host.comments && pageId ? [{ value: "comments", label: comments ? "隐藏主题讨论" : "主题讨论" }] : [],
+          ...editable ? [{ value: "import", label: "导入" }] : []
+        ] }], onSelect: (value) => {
+          if (value === "outline") setOutline(!outline);
+          else if (value === "details") {
+            setDetails(!details);
+            setComments(false);
+          } else if (value === "comments") {
+            setComments(!comments);
+            setDetails(false);
+          } else if (value === "import") setImportOpen(true);
+        } }),
+        canExport && /* @__PURE__ */ jsx(
+          WSelect,
+          {
+            label: "导出",
+            ariaLabel: "导出思维导图",
+            width: 105,
+            value: "",
+            disabled: busy,
+            onChange: (value) => void exportAs(value),
+            options: [{ value: "png", label: "PNG 图片" }, { value: "svg", label: "SVG 图片" }, { value: "md", label: "文字大纲" }, { value: "json", label: "结构 JSON" }]
+          }
+        )
+      ] })
+    ] }),
+    showSearch && /* @__PURE__ */ jsxs("div", { className: "mind-search", "aria-label": "图内查找替换", children: [
+      /* @__PURE__ */ jsx("input", { "aria-label": "查找导图文字", placeholder: "查找主题、描述和备注", value: query, onChange: (event) => {
+        setQuery(event.target.value);
+        setHitIndex(0);
+      }, onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          jumpHit(1);
+        }
+      } }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        hits.length > 5e3 ? "5000+" : hits.length,
+        " 处"
+      ] }),
+      /* @__PURE__ */ jsx(WButton, { disabled: !hits.length, onClick: () => jumpHit(-1), children: "上一处" }),
+      /* @__PURE__ */ jsx(WButton, { disabled: !hits.length, onClick: () => jumpHit(1), children: "下一处" }),
+      hits.length > 0 && /* @__PURE__ */ jsx(
+        WSelect,
+        {
+          label: "导图搜索结果",
+          ariaLabel: "导图搜索结果",
+          width: 180,
+          value: hitIndex,
+          options: hits.slice(0, 500).map((hit, index) => {
+            var _a2, _b2;
+            return { value: index, label: `${index + 1}. ${((_b2 = (_a2 = tree.find((topic) => topic.id === hit.id)) == null ? void 0 : _a2.text) == null ? void 0 : _b2.slice(0, 24)) ?? ""} · ${hit.field === "title" ? "标题" : hit.field === "note" ? "备注" : "描述"}` };
+          }),
+          onChange: (value) => {
+            const index = Number(value);
+            const hit = hits[index];
+            if (hit) {
+              setHitIndex(index);
+              locateHit(hit);
+            }
+          }
+        }
+      ),
+      editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("input", { "aria-label": "替换为", placeholder: "替换为", value: replacement, onChange: (event) => setReplacement(event.target.value) }),
+        /* @__PURE__ */ jsx(WButton, { disabled: !hits.length, onClick: () => {
+          const count = c == null ? void 0 : c.replace(query, replacement, hits[hitIndex]);
+          setNotice(count === -1 ? "匹配超过 5000 处，请缩小查找范围" : count === -2 ? "替换后文字超过上限，本次未修改" : `已替换 ${count ?? 0} 处`);
+        }, children: "替换当前" }),
+        /* @__PURE__ */ jsx(WButton, { disabled: !hits.length, onClick: () => {
+          const count = c == null ? void 0 : c.replace(query, replacement);
+          setNotice(count === -1 ? "匹配超过 5000 处，请缩小查找范围" : count === -2 ? "替换后文字超过上限，本次未修改" : `已替换 ${count ?? 0} 处`);
+        }, children: "全部替换" })
+      ] }),
+      /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => setShowSearch(false), children: "关闭" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mind-canvas-body", children: [
+      outline && /* @__PURE__ */ jsx("aside", { className: "mind-canvas-outline", "aria-label": "导图文字大纲", children: mindMapOutline(model).map((topic) => /* @__PURE__ */ jsxs("div", { className: `mind-outline-row${topic.id === active ? " current" : ""}`, style: { paddingLeft: 8 + Math.min(12, topic.depth) * 14 }, children: [
+        editable ? /* @__PURE__ */ jsx(
+          MindMapField,
+          {
+            id: topic.id,
+            field: "title",
+            value: topic.text,
+            controller: c,
+            label: `大纲主题 ${topic.text || "未命名"}`,
+            onFocus: () => {
+              setActive(topic.id);
+              setSelected(/* @__PURE__ */ new Set([topic.id]));
+            },
+            onCommand: (event) => {
+              if (event.key === "Tab") {
+                event.preventDefault();
+                c == null ? void 0 : c.indent(topic.id, event.shiftKey);
+              } else if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                add("sibling", void 0, topic.id);
+              }
+            }
+          }
+        ) : /* @__PURE__ */ jsx("button", { type: "button", onClick: () => locate(topic.id), children: topic.text }),
+        /* @__PURE__ */ jsx("button", { type: "button", title: "定位主题", "aria-label": `定位大纲主题：${topic.text}`, onClick: () => locate(topic.id), children: "⌖" })
+      ] }, topic.id)) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stage,
+          tabIndex: 0,
+          "aria-label": "思维导图画布",
+          className: `mind-canvas-stage${grid ? "" : " mind-grid-hidden"}${moving || spaceHeld ? " mind-space-pan" : ""}`,
+          onPointerDown: (event) => pointerDown(event),
+          onPointerMove: pointerMove,
+          onPointerUp: pointerUp,
+          onPointerCancel: () => cancelGesture(),
+          onLostPointerCapture: () => cancelGesture(),
+          onContextMenu: (event) => {
+            var _a2;
+            const id = ((_a2 = event.target.closest("[data-topic-id]")) == null ? void 0 : _a2.dataset.topicId) ?? null;
+            openContextMenu(id, event);
+          },
+          onWheel: (event) => {
+            setFollowing(null);
+            if (event.ctrlKey || event.metaKey) {
+              const rect = stage.current.getBoundingClientRect();
+              zoomTo(zoom * Math.exp(-event.deltaY * 2e-3), { x: event.clientX - rect.left, y: event.clientY - rect.top });
+            } else setPan((value) => ({ x: value.x - event.deltaX, y: value.y - event.deltaY }));
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "mind-canvas-surface", children: /* @__PURE__ */ jsxs("div", { className: "mind-canvas-layers", style: { transform: `translate(${origin.x}px,${origin.y}px) scale(${zoom})` }, children: [
+              /* @__PURE__ */ jsxs("svg", { className: "mind-canvas-edges", children: [
+                drawing.edges.map((edge) => /* @__PURE__ */ jsx("path", { d: edge.path, className: draggedIds.has(edge.target) ? "mind-drag-branch-edge" : void 0, stroke: color, strokeWidth: 2, fill: "none" }, edge.id)),
+                mindRelationPaths(model, drawing).map((relation) => /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx("path", { d: relation.path, stroke: "#9a68d4", strokeWidth: 2, strokeDasharray: "6 4", fill: "none" }),
+                  /* @__PURE__ */ jsx("text", { x: relation.x, y: relation.y, fill: "var(--color-text)", fontSize: 12, children: relation.label || { related: "相关", depends: "依赖", reference: "参考" }[relation.kind] })
+                ] }, relation.id)),
+                projection && /* @__PURE__ */ jsxs("g", { className: "mind-side-projection", children: [
+                  projection.edges.filter((edge) => draggedIds.has(edge.source) || draggedIds.has(edge.target)).map((edge) => /* @__PURE__ */ jsx("path", { d: edge.path, stroke: color, fill: "none", strokeWidth: 2, strokeDasharray: "5 4" }, edge.id)),
+                  projection.nodes.filter((topic) => draggedIds.has(topic.id)).map((topic) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("rect", { x: topic.x, y: topic.y, width: topic.width, height: topic.height, rx: 8, fill: "var(--color-accent-soft)", stroke: color, strokeDasharray: "5 4" }),
+                    /* @__PURE__ */ jsx("text", { x: topic.x + topic.width / 2, y: topic.y + topic.height / 2 + 5, textAnchor: "middle", fontSize: 14, fill: "var(--color-text)", children: topic.text.slice(0, 24) })
+                  ] }, topic.id))
+                ] })
+              ] }),
+              drawing.nodes.map((topic) => {
+                const hasChildren = tree.some((child) => child.parentId === topic.id);
+                const quick = quickControls && !moving && !spaceHeld && !dragPreview && !box && editable && selected.has(topic.id) && selected.size === 1 && editing !== topic.id;
+                const side = topic.side ?? 1;
+                const grows = model.layout === "down" ? "grows-down" : side === -1 ? "grows-left" : "";
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-topic-id": topic.id,
+                    className: `mind-topic-shell${topic.id === model.rootId ? " root" : ""}${selected.has(topic.id) ? " is-selected" : ""}${hasChildren ? " has-children" : ""}${grows ? ` ${grows}` : ""}${folds.has(topic.id) ? " is-collapsed" : ""}`,
+                    style: { position: "absolute", left: topic.x, top: topic.y, width: topic.width, height: topic.height, transform: dragPreview && draggedIds.has(topic.id) ? `translate(${dragPreview.dx}px,${dragPreview.dy}px)` : void 0, opacity: dragPreview && draggedIds.has(topic.id) ? 0.35 : void 0 },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: `mind-topic${topic.id === model.rootId ? " root" : ""}${selected.has(topic.id) ? " active" : ""}${editing === topic.id ? " editing" : ""}${grows ? ` ${grows}` : ""}${(drop == null ? void 0 : drop.id) === topic.id ? ` drop mind-drop-${drop.mode}` : ""}`,
+                          style: {
+                            width: "100%",
+                            minHeight: topic.height,
+                            fontFamily: MIND_TOPIC_FONT,
+                            "--mind-topic-line-height": `${mindTopicLineHeight(topic.fontSize || 14)}px`,
+                            color: topic.color || (topic.shape === "text" ? "var(--color-text)" : topic.background ? readableTextColor(topic.background) : void 0),
+                            background: topic.shape === "text" ? "transparent" : topic.background || void 0,
+                            borderRadius: topic.shape === "pill" ? 28 : void 0,
+                            border: topic.shape === "text" ? 0 : void 0,
+                            fontSize: topic.fontSize || 14,
+                            textAlign: topic.align || "center"
+                          },
+                          onPointerDown: (event) => {
+                            event.stopPropagation();
+                            pointerDown(event, topic.id);
+                          },
+                          onDoubleClick: () => edit(topic.id),
+                          onContextMenu: (event) => openContextMenu(topic.id, event),
+                          children: [
+                            (topic.icon || topic.done) && /* @__PURE__ */ jsxs("span", { className: "mind-topic-icon", children: [
+                              topic.done ? "☑ " : "",
+                              topic.icon
+                            ] }),
+                            editing === topic.id ? /* @__PURE__ */ jsx(
+                              "textarea",
+                              {
+                                ref: input,
+                                className: "mind-topic-input",
+                                "aria-label": "主题文字",
+                                rows: Math.max(1, topic.lines.length),
+                                maxLength: 2e3,
+                                value: text,
+                                onChange: (event) => {
+                                  if (c == null ? void 0 : c.text(topic.id, event.target.value)) setText(event.target.value);
+                                },
+                                onSelect: (event) => {
+                                  const target = event.currentTarget;
+                                  setSelectedRange({ from: target.selectionStart ?? 0, to: target.selectionEnd ?? 0 });
+                                },
+                                onKeyUp: (event) => {
+                                  const target = event.currentTarget;
+                                  setSelectedRange({ from: target.selectionStart ?? 0, to: target.selectionEnd ?? 0 });
+                                },
+                                onCompositionStart: () => {
+                                  composing.current = true;
+                                  c == null ? void 0 : c.composition(true);
+                                },
+                                onCompositionEnd: (event) => {
+                                  c == null ? void 0 : c.text(topic.id, event.currentTarget.value);
+                                  composing.current = false;
+                                  c == null ? void 0 : c.composition(false);
+                                  c == null ? void 0 : c.beginText(topic.id);
+                                },
+                                onKeyDown: (event) => {
+                                  event.stopPropagation();
+                                  if (event.nativeEvent.isComposing || composing.current || event.keyCode === 229) return;
+                                  if ((event.metaKey || event.ctrlKey) && ["z", "y"].includes(event.key.toLowerCase())) {
+                                    event.preventDefault();
+                                    event.shiftKey || event.key.toLowerCase() === "y" ? c == null ? void 0 : c.redo() : c == null ? void 0 : c.undo();
+                                    return;
+                                  }
+                                  if (event.key === "Escape" || event.key === "Enter" && !event.shiftKey) {
+                                    event.preventDefault();
+                                    edit(null);
+                                  } else if (event.key === "Tab") {
+                                    event.preventDefault();
+                                    c == null ? void 0 : c.endText(topic.id);
+                                    add("child", void 0, topic.id);
+                                  }
+                                },
+                                onBlur: () => {
+                                  c == null ? void 0 : c.composition(false);
+                                  c == null ? void 0 : c.endText(topic.id);
+                                  setEditing(null);
+                                }
+                              }
+                            ) : /* @__PURE__ */ jsx("div", { className: "mind-topic-label", style: { textAlign: topic.align || "center", minHeight: topic.lines.length * mindTopicLineHeight(topic.fontSize || 14) }, children: /* @__PURE__ */ jsx(TopicLabel, { topic }) }),
+                            topic.description && /* @__PURE__ */ jsx("div", { className: "mind-topic-description", style: topic.shape === "text" ? { color: "var(--color-text-muted)" } : topic.background ? { color: readableTextColor(topic.background) } : void 0, children: topic.description }),
+                            topic.note && /* @__PURE__ */ jsx("div", { className: "mind-topic-note", title: "此主题有备注", onClick: (event) => {
+                              event.stopPropagation();
+                              select(topic.id);
+                              setDetails(true);
+                            }, children: "▤ 备注" }),
+                            topic.attachmentId && /* @__PURE__ */ jsx("div", { className: "mind-topic-image", children: /* @__PURE__ */ jsx(AttachmentImage, { id: topic.attachmentId, alt: "主题图片", fetcher: props.fetchAttachment }) }),
+                            peers.filter((peer) => peer.topicId === topic.id).map((peer) => /* @__PURE__ */ jsx("span", { className: "mind-peer-badge", title: `${peer.name}${peer.editing ? " 正在编辑" : ""}`, "aria-label": `${peer.name}${peer.editing ? " 正在编辑此主题" : " 正在查看此主题"}`, children: peer.name.slice(0, 2) }, peer.client))
+                          ]
+                        }
+                      ),
+                      quick && topic.id !== model.rootId && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "mind-topic-sibling before",
+                          "aria-label": model.layout === "down" ? "在左侧添加同级主题" : "在上方添加同级主题",
+                          title: model.layout === "down" ? "在左侧添加同级主题" : "在上方添加同级主题",
+                          onPointerDown: (event) => event.stopPropagation(),
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            addSiblingAt(topic.id, "before");
+                          },
+                          children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "＋" })
+                        }
+                      ),
+                      quick && topic.id === model.rootId && model.layout !== "down" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "mind-topic-add root-left",
+                            "aria-label": "在中心主题左侧添加子主题",
+                            title: "在左侧添加子主题",
+                            onPointerDown: (event) => event.stopPropagation(),
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              add("child", -1);
+                            },
+                            children: "＋"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "mind-topic-add root-right",
+                            "aria-label": "在中心主题右侧添加子主题",
+                            title: "在右侧添加子主题",
+                            onPointerDown: (event) => event.stopPropagation(),
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              add("child", 1);
+                            },
+                            children: "＋"
+                          }
+                        )
+                      ] }),
+                      quick && (topic.id !== model.rootId || model.layout === "down") && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "mind-topic-add",
+                          "aria-label": "为当前主题添加子主题",
+                          title: "添加子主题",
+                          onPointerDown: (event) => event.stopPropagation(),
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            add("child");
+                          },
+                          children: "＋"
+                        }
+                      ),
+                      quick && topic.id !== model.rootId && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "mind-topic-sibling after",
+                          "aria-label": model.layout === "down" ? "在右侧添加同级主题" : "在下方添加同级主题",
+                          title: model.layout === "down" ? "在右侧添加同级主题" : "在下方添加同级主题",
+                          onPointerDown: (event) => event.stopPropagation(),
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            addSiblingAt(topic.id, "after");
+                          },
+                          children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "＋" })
+                        }
+                      ),
+                      hasChildren && topic.id !== model.rootId && editing !== topic.id && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "mind-topic-fold",
+                          "aria-label": folds.has(topic.id) ? `展开分支：${topic.text}（隐藏 ${mindMapDescendants$1(model, topic.id).size - 1} 个主题）` : `收起分支：${topic.text}`,
+                          title: folds.has(topic.id) ? `展开分支，共 ${mindMapDescendants$1(model, topic.id).size - 1} 个后代主题` : "收起子分支",
+                          "aria-expanded": !folds.has(topic.id),
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            fold(topic.id);
+                          },
+                          children: folds.has(topic.id) ? /* @__PURE__ */ jsx("span", { className: "mind-fold-count", children: mindMapDescendants$1(model, topic.id).size - 1 }) : /* @__PURE__ */ jsx("svg", { className: "mind-fold-chevron", width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m10 4-4 4 4 4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        }
+                      )
+                    ]
+                  },
+                  topic.id
+                );
+              })
+            ] }) }),
+            box && /* @__PURE__ */ jsx("div", { className: "mind-marquee", "aria-hidden": "true", style: {
+              left: origin.x + box.x * zoom,
+              top: origin.y + box.y * zoom,
+              width: box.w * zoom,
+              height: box.h * zoom
+            } }),
+            editable && selected.size === 1 && !editing && !dragPreview && !box && /* @__PURE__ */ jsxs("div", { className: "mind-node-actions", "aria-label": "主题操作", children: [
+              /* @__PURE__ */ jsx(WButton, { variant: "primary", onClick: () => add("child"), children: "＋ 子主题" }),
+              /* @__PURE__ */ jsx(WButton, { onClick: () => add("sibling"), children: "同级主题" }),
+              /* @__PURE__ */ jsx(WButton, { disabled: active === model.rootId, onClick: () => add("parent"), children: "父主题" }),
+              /* @__PURE__ */ jsx(WDropdown, { label: "调整层级", groups: [
+                { items: [{ value: "out", label: "提升一级" }, { value: "in", label: "缩进一级" }] },
+                ...firstLevel && model.layout !== "down" ? [{ title: "分支方向", items: [
+                  { value: "left", label: "移到左侧", disabled: directions.get(active) === -1 },
+                  { value: "right", label: "移到右侧", disabled: directions.get(active) === 1 }
+                ] }] : []
+              ], onSelect: (value) => value === "left" ? moveSide(-1) : value === "right" ? moveSide(1) : c == null ? void 0 : c.indent(active, value === "out") }),
+              /* @__PURE__ */ jsx(WButton, { onClick: () => edit(active), children: "改名" }),
+              /* @__PURE__ */ jsx(WButton, { onClick: () => copy(), children: "复制" }),
+              /* @__PURE__ */ jsx(WButton, { loading: pasting, onClick: () => void paste(), children: "粘贴" }),
+              host.comments && pageId && /* @__PURE__ */ jsx(WButton, { variant: comments ? "primary" : "default", "aria-pressed": comments, "aria-label": "主题讨论", onClick: () => {
+                setComments(!comments);
+                setDetails(false);
+              }, children: "讨论" }),
+              /* @__PURE__ */ jsx(WButton, { disabled: active === model.rootId, title: "删除主题（Delete / Backspace）", onClick: () => remove(), children: "删除" })
+            ] }),
+            selected.size > 1 && /* @__PURE__ */ jsxs("div", { className: "mind-selection-summary", role: "status", children: [
+              "已选择 ",
+              selected.size,
+              " 个主题",
+              editable && /* @__PURE__ */ jsx(WButton, { title: "删除所选主题（Delete / Backspace）", onClick: () => remove(), children: "删除所选" }),
+              /* @__PURE__ */ jsx(WButton, { variant: "text", onClick: () => setSelected(/* @__PURE__ */ new Set()), children: "取消选择" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mind-canvas-bottom", children: [
+              /* @__PURE__ */ jsxs("span", { className: "mind-canvas-hint", children: [
+                moving ? "移动模式：左键拖动画布" : "选择模式：左键选择 / 空白处框选",
+                " · 中键或空格＋拖动平移 · 双指平移 / 捏合缩放 · 右键菜单"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mind-canvas-viewport", children: [
+                editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(WButton, { disabled: !(c == null ? void 0 : c.canUndo()), onClick: () => c == null ? void 0 : c.undo(), children: "撤销" }),
+                  /* @__PURE__ */ jsx(WButton, { disabled: !(c == null ? void 0 : c.canRedo()), onClick: () => c == null ? void 0 : c.redo(), children: "重做" })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "mind-viewport-divider", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(WTooltip, { content: /* @__PURE__ */ jsxs("span", { className: "mind-viewport-tip", children: [
+                  moving ? "切换为选择模式，左键点选或拖动框选" : "切换为移动模式，左键拖动画布",
+                  /* @__PURE__ */ jsx("kbd", { children: "中键拖动" }),
+                  /* @__PURE__ */ jsx("kbd", { children: "空格＋拖动" }),
+                  /* @__PURE__ */ jsx("kbd", { children: "双指平移" })
+                ] }), children: /* @__PURE__ */ jsx(WButton, { variant: moving ? "primary" : "text", "aria-pressed": moving, "aria-label": moving ? "切换为选择模式" : "切换为移动模式", onClick: () => {
+                  var _a2;
+                  setMoving(!moving);
+                  edit(null);
+                  cancelGesture();
+                  setFollowing(null);
+                  (_a2 = stage.current) == null ? void 0 : _a2.focus();
+                }, children: moving ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 12V5a1.5 1.5 0 0 1 3 0v6-8a1.5 1.5 0 0 1 3 0v8-6a1.5 1.5 0 0 1 3 0v7-4a1.5 1.5 0 0 1 3 0v7c0 5-3 7-7 7-3 0-5-2-7-5l-3-5a1.5 1.5 0 0 1 2.5-1.6L8 14" }) }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m5 3 14 10-7 1-3 7z" }) }) }) }),
+                /* @__PURE__ */ jsx(WTooltip, { content: /* @__PURE__ */ jsxs("span", { className: "mind-viewport-tip", children: [
+                  "缩小 ",
+                  /* @__PURE__ */ jsxs("kbd", { children: [
+                    modifier,
+                    " −"
+                  ] }),
+                  /* @__PURE__ */ jsxs("kbd", { children: [
+                    modifier,
+                    "＋鼠标滚轮"
+                  ] }),
+                  /* @__PURE__ */ jsx("kbd", { children: "捏合手势" })
+                ] }), children: /* @__PURE__ */ jsx(WButton, { "aria-label": "缩小导图", onClick: () => paneCommand("zoom-out"), children: "−" }) }),
+                /* @__PURE__ */ jsx(WTooltip, { content: /* @__PURE__ */ jsxs("span", { className: "mind-viewport-tip", children: [
+                  "缩放至 100% ",
+                  /* @__PURE__ */ jsxs("kbd", { children: [
+                    modifier,
+                    " 0"
+                  ] })
+                ] }), children: /* @__PURE__ */ jsxs(WButton, { variant: "text", "aria-label": "缩放至 100%", className: "mind-zoom-percent", onClick: () => paneCommand("reset-zoom"), children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ] }) }),
+                /* @__PURE__ */ jsx(WTooltip, { content: /* @__PURE__ */ jsxs("span", { className: "mind-viewport-tip", children: [
+                  "放大 ",
+                  /* @__PURE__ */ jsxs("kbd", { children: [
+                    modifier,
+                    " +"
+                  ] }),
+                  /* @__PURE__ */ jsxs("kbd", { children: [
+                    modifier,
+                    "＋鼠标滚轮"
+                  ] }),
+                  /* @__PURE__ */ jsx("kbd", { children: "捏合手势" })
+                ] }), children: /* @__PURE__ */ jsx(WButton, { "aria-label": "放大导图", onClick: () => paneCommand("zoom-in"), children: "＋" }) }),
+                /* @__PURE__ */ jsx(WTooltip, { content: /* @__PURE__ */ jsxs("span", { className: "mind-viewport-tip", children: [
+                  "画布全览 ",
+                  /* @__PURE__ */ jsx("kbd", { children: "Shift＋1" })
+                ] }), children: /* @__PURE__ */ jsx(WButton, { onClick: () => paneCommand("fit"), children: "适应画布" }) })
+              ] })
+            ] }),
+            (notice || drop) && /* @__PURE__ */ jsx("p", { className: "mind-canvas-notice", role: "status", children: drop ? drop.kind === "side" ? `松开后移到中心主题${drop.side === -1 ? "左" : "右"}侧，保留整条子分支` : `松开后${drop.mode === "child" ? "移入目标主题" : drop.mode === "before" ? "放到目标上方" : "放到目标下方"}` : notice })
+          ]
+        }
+      ),
+      comments && pageId && host.comments && /* @__PURE__ */ jsx(
+        MindMapComments,
+        {
+          pageId,
+          blockId: model.id,
+          topicId: active,
+          topicLabel: current.text,
+          canComment: props.canComment ?? ((_g = c == null ? void 0 : (_f = c.context).canComment) == null ? void 0 : _g.call(_f)),
+          onClose: () => setComments(false),
+          onChanged: props.onCommentsChanged
+        },
+        `${pageId}:${model.id}:${active}`
+      ),
+      details && /* @__PURE__ */ jsx(MindMapDetails, { model, id: active, controller: c, range: selectedRange, onClose: () => setDetails(false), onNotice: setNotice }, active)
+    ] }),
+    contextMenu && portal && createPortal(/* @__PURE__ */ jsx("div", { ref: menuRef, className: "mind-context-menu", role: "menu", tabIndex: -1, "aria-label": contextMenu.id ? "主题操作菜单" : "画布操作菜单", onKeyDown: menuKeydown, style: { left: contextMenu.x, top: contextMenu.y }, children: /* @__PURE__ */ jsx("div", { className: "w-dropdown", children: contextGroups.map((group, index) => /* @__PURE__ */ jsxs("div", { className: "w-dropdown-group", role: "group", "aria-label": group.title, children: [
+      group.title && /* @__PURE__ */ jsx("div", { className: "w-dropdown-group__title", children: group.title }),
+      group.items.map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "menuitem",
+          tabIndex: item.disabled ? void 0 : -1,
+          "aria-disabled": item.disabled || void 0,
+          className: `w-dropdown-option${item.disabled ? " is-disabled" : ""}`,
+          onClick: () => {
+            if (!item.disabled) contextAction(item.value);
+          },
+          onKeyDown: (event) => {
+            if (!item.disabled && (event.key === "Enter" || event.key === " ")) {
+              event.preventDefault();
+              contextAction(item.value);
+            }
+          },
+          children: [
+            item.label,
+            item.shortcut && /* @__PURE__ */ jsx("span", { className: "mind-menu-key", children: item.shortcut })
+          ]
+        },
+        item.value
+      ))
+    ] }, index)) }) }), portal),
+    confirmDelete && /* @__PURE__ */ jsxs(WDialog, { title: "删除分支", onClose: () => {
+      var _a2;
+      setConfirmDelete(null);
+      (_a2 = stage.current) == null ? void 0 : _a2.focus();
+    }, children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        "将删除 ",
+        confirmDelete.ids.size,
+        " 个主题（包含子主题），可以撤销。中心主题保留。"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "wr-toolbar", children: [
+        /* @__PURE__ */ jsx(WButton, { onClick: () => {
+          var _a2;
+          setConfirmDelete(null);
+          (_a2 = stage.current) == null ? void 0 : _a2.focus();
+        }, children: "取消" }),
+        /* @__PURE__ */ jsx(WButton, { variant: "primary", onClick: () => performDelete(confirmDelete), children: "删除分支" })
+      ] })
+    ] }),
+    importOpen && /* @__PURE__ */ jsxs(WDialog, { title: "导入导图或列表", onClose: () => setImportOpen(false), footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(WButton, { onClick: () => setImportOpen(false), children: "取消" }),
+      /* @__PURE__ */ jsx(WButton, { variant: "primary", loading: pasting, disabled: !importPreview, onClick: () => {
+        if (pastingRef.current || !importPreview) return;
+        pastingRef.current = true;
+        setPasting(true);
+        setImportError("");
+        void (async () => {
+          try {
+            await insertBranch(importBranch(importPreview), active);
+            if (alive.current) setImportOpen(false);
+          } catch (error) {
+            if (alive.current) setImportError(error instanceof Error ? error.message : "导入失败");
+          } finally {
+            pastingRef.current = false;
+            if (alive.current) setPasting(false);
+          }
+        })();
+      }, children: "导入分支" })
+    ] }), children: [
+      /* @__PURE__ */ jsx("p", { className: "mind-import-hint", children: "导入为当前主题的子分支；支持 JSON 和缩进列表。不会替换现有导图。" }),
+      /* @__PURE__ */ jsx("input", { "aria-label": "选择导图文件", type: "file", accept: ".json,.md,.txt", onChange: (event) => {
+        var _a2;
+        const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
+        if (!file) return;
+        if (file.size > 2e6) {
+          setImportError("文件超过 2 MB");
+          return;
+        }
+        void file.text().then((value) => {
+          if (alive.current) {
+            setImportText(value);
+            setImportError("");
+          }
+        }).catch(() => {
+          if (alive.current) setImportError("文件读取失败");
+        });
+      } }),
+      /* @__PURE__ */ jsx("textarea", { "aria-label": "导入内容", rows: 10, placeholder: "粘贴缩进列表或导图 JSON", style: { marginTop: 12 }, value: importText, onChange: (event) => {
+        setImportText(event.target.value);
+        setImportError("");
+      } }),
+      importPreview && /* @__PURE__ */ jsxs("p", { children: [
+        "识别到 ",
+        importPreview.topics.length,
+        " 个主题"
+      ] }),
+      importError && /* @__PURE__ */ jsx("p", { role: "alert", children: importError }),
+      /* @__PURE__ */ jsx("div", { className: "wr-toolbar", children: ["project", "meeting", "knowledge"].map((kind, index) => /* @__PURE__ */ jsx(WButton, { onClick: () => {
+        const id = c == null ? void 0 : c.pasteBranch(active, importBranch(mindMapTemplate(kind)));
+        if (id) {
+          select(id);
+          setImportOpen(false);
+        }
+      }, children: ["项目模板", "会议模板", "知识模板"][index] }, kind)) })
+    ] })
+  ] });
+  return props.inline ? /* @__PURE__ */ jsx("section", { className: "mind-canvas-shell mind-inline", children: workspace }) : /* @__PURE__ */ jsx(
+    WDialog,
+    {
+      workspace: true,
+      fullscreen: true,
+      hideFooter: true,
+      className: "mind-canvas-shell mind-canvas-fullscreen",
+      ariaLabel: "思维导图",
+      title: /* @__PURE__ */ jsxs("span", { className: "mind-canvas-title", children: [
+        "思维导图 ",
+        /* @__PURE__ */ jsx("span", { children: title })
+      ] }),
+      escToClose: !editing && !contextMenu && !settingsOpen && !importOpen && !confirmDelete,
+      onClose: () => {
+        var _a2;
+        return (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
+      },
+      children: workspace
+    }
+  );
+}
+export {
+  MindMapCanvas
+};