@sendbird/actionbook-core 0.7.3 → 0.9.1

package/dist/ui/index.js

@@ -89,6 +89,24 @@ var actionbookSchema = new Schema({
       },
       defining: true
     },
+    codeBlock: {
+      content: "text*",
+      group: "block",
+      code: true,
+      defining: true,
+      marks: "",
+      attrs: { language: { default: null } },
+      parseDOM: [{
+        tag: "pre",
+        preserveWhitespace: "full",
+        getAttrs(dom) {
+          return { language: dom.getAttribute("data-language") || null };
+        }
+      }],
+      toDOM(node) {
+        return ["pre", { "data-language": node.attrs.language || void 0 }, ["code", 0]];
+      }
+    },
     horizontalRule: {
       group: "block",
       parseDOM: [{ tag: "hr" }],
@@ -96,6 +114,61 @@ var actionbookSchema = new Schema({
         return ["hr"];
       }
     },
+    // ── Jinja conditional block ──
+    jinjaIfBlock: {
+      content: "jinjaIfBranch+",
+      group: "block",
+      isolating: true,
+      defining: true,
+      parseDOM: [{ tag: "div[data-jinja-if-block]" }],
+      toDOM() {
+        return ["div", { "data-jinja-if-block": "", class: "jinja-if-block" }, 0];
+      }
+    },
+    jinjaIfBranch: {
+      content: "block+",
+      isolating: true,
+      defining: true,
+      attrs: {
+        branchType: { default: "if" },
+        // 'if' | 'elif' | 'else'
+        condition: { default: "" }
+      },
+      parseDOM: [
+        {
+          tag: "div[data-jinja-branch]",
+          getAttrs(dom) {
+            const el = dom;
+            return {
+              branchType: el.getAttribute("data-branch-type") || "if",
+              condition: el.getAttribute("data-condition") || ""
+            };
+          }
+        }
+      ],
+      toDOM(node) {
+        return [
+          "div",
+          {
+            "data-jinja-branch": "",
+            "data-branch-type": node.attrs.branchType,
+            "data-condition": node.attrs.condition,
+            class: `jinja-branch jinja-branch-${node.attrs.branchType}`
+          },
+          0
+        ];
+      }
+    },
+    noteBlock: {
+      content: "block+",
+      group: "block",
+      defining: true,
+      isolating: true,
+      parseDOM: [{ tag: "div[data-note-block]" }],
+      toDOM() {
+        return ["div", { "data-note-block": "", class: "ab-note-block" }, 0];
+      }
+    },
     // ── Table nodes ──
     table: {
       content: "tableRow+",
@@ -489,6 +562,12 @@ function IconTimeDiff({ size = 16, fill = "currentColor", style }) {
     }
   );
 }
+function IconStop({ size = 16, fill = "currentColor", style }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 8 8", width: size, height: size, fill: "none", style, children: [
+    /* @__PURE__ */ jsx("path", { d: "M5.4375 3.375L2.0625 3.375V4.125L5.4375 4.125V3.375Z", fill }),
+    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.75 7.5C5.82107 7.5 7.5 5.82107 7.5 3.75C7.5 1.67893 5.82107 0 3.75 0C1.67893 0 0 1.67893 0 3.75C0 5.82107 1.67893 7.5 3.75 7.5ZM6.75 3.75C6.75 5.40685 5.40685 6.75 3.75 6.75C2.09315 6.75 0.75 5.40685 0.75 3.75C0.75 2.09315 2.09315 0.75 3.75 0.75C5.40685 0.75 6.75 2.09315 6.75 3.75Z", fill })
+  ] });
+}
 function IconAnchor({ size = 16, fill = "currentColor", style }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -727,21 +806,24 @@ var ReactNodeViewImpl = class {
   dom;
   root;
   component;
+  wrapper;
   _node;
   _view;
   _getPos;
   _selected = false;
   _decorations = [];
-  constructor(node, view, getPos, options) {
+  constructor(node, view, getPos, decorations, options) {
     this._node = node;
     this._view = view;
     this._getPos = getPos;
+    this._decorations = decorations;
     this.component = options.component;
+    this.wrapper = options.wrapper;
     const tag = options.as ?? (options.inline !== false ? "span" : "div");
     this.dom = document.createElement(tag);
     if (options.inline !== false) {
-      this.dom.style.display = "inline-flex";
-      this.dom.style.verticalAlign = "middle";
+      this.dom.style.display = "inline";
+      this.dom.style.verticalAlign = "baseline";
     }
     if (options.className) {
       this.dom.className = options.className;
@@ -750,14 +832,15 @@ var ReactNodeViewImpl = class {
     this.render();
   }
   render() {
+    const element = createElement(this.component, {
+      node: this._node,
+      view: this._view,
+      getPos: this._getPos,
+      selected: this._selected,
+      decorations: this._decorations
+    });
     this.root.render(
-      createElement(this.component, {
-        node: this._node,
-        view: this._view,
-        getPos: this._getPos,
-        selected: this._selected,
-        decorations: this._decorations
-      })
+      this.wrapper ? createElement(this.wrapper, null, element) : element
     );
   }
   update(node, decorations, _innerDecorations) {
@@ -786,7 +869,7 @@ var ReactNodeViewImpl = class {
   }
 };
 function createReactNodeView(options) {
-  return (node, view, getPos) => new ReactNodeViewImpl(node, view, getPos, options);
+  return (node, view, getPos, decorations) => new ReactNodeViewImpl(node, view, getPos, decorations, options);
 }
 
 // src/ui/hooks/useEditorView.ts
@@ -795,9 +878,19 @@ import { EditorState } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { Node as PMNode } from "prosemirror-model";
 
+// src/ast/types.ts
+var RESOURCE_TAG_TYPES = ["tool", "manual", "agent_message_template", "handoff", "time_diff", "time_difference"];
+
 // src/compat/prosemirror.ts
 var MAX_DEPTH = 128;
 var ALLOWED_URL_PROTOCOLS = /^(https?:|mailto:|tel:|#|\/)/i;
+var LIST_TYPES = /* @__PURE__ */ new Set(["bulletList", "orderedList"]);
+function isLooseList(items) {
+  return items.some((li) => {
+    const nonListBlocks = li.content.filter((b) => !LIST_TYPES.has(b.type));
+    return nonListBlocks.length > 1;
+  });
+}
 function convertPMMark(mark) {
   switch (mark.type) {
     case "bold":
@@ -836,12 +929,17 @@ function convertPMInline(node, depth) {
     }
     case "inlineToolTag": {
       const attrs = node.attrs ?? {};
+      const tagType = attrs.type ?? "tool";
+      const text2 = attrs.text ?? "";
+      if (!RESOURCE_TAG_TYPES.includes(tagType)) {
+        return text2 ? [{ type: "text", text: text2 }] : [];
+      }
       return [
         {
           type: "resourceTag",
-          tagType: attrs.type ?? "tool",
+          tagType,
           resourceId: attrs.resourceId ?? "",
-          text: attrs.text ?? ""
+          text: text2
         }
       ];
     }
@@ -872,20 +970,27 @@ function convertPMBlock(node, depth = 0) {
       const level = node.attrs?.level ?? 1;
       return [{ type: "heading", level, content: children.flatMap((c) => convertPMInline(c, depth + 1)) }];
     }
-    case "bulletList":
+    case "bulletList": {
+      const items = children.map((c) => convertPMListItem(c, depth + 1));
+      const spread = isLooseList(items);
       return [
         {
           type: "bulletList",
-          content: children.map((c) => convertPMListItem(c, depth + 1))
+          ...spread ? { spread: true } : {},
+          content: items.map((li) => spread ? { ...li, spread: true } : li)
         }
       ];
+    }
     case "orderedList": {
       const start = node.attrs?.start ?? 1;
+      const items = children.map((c) => convertPMListItem(c, depth + 1));
+      const spread = isLooseList(items);
       return [
         {
           type: "orderedList",
           start,
-          content: children.map((c) => convertPMListItem(c, depth + 1))
+          ...spread ? { spread: true } : {},
+          content: items.map((li) => spread ? { ...li, spread: true } : li)
         }
       ];
     }
@@ -896,6 +1001,12 @@ function convertPMBlock(node, depth = 0) {
       return [{ type: "blockquote", content: children.flatMap((c) => convertPMBlock(c, depth + 1)) }];
     case "horizontalRule":
       return [{ type: "horizontalRule" }];
+    case "codeBlock": {
+      const textContent2 = children.map((c) => c.text ?? "").join("");
+      return [{ type: "codeBlock", content: textContent2, ...node.attrs?.language ? { language: node.attrs.language } : {} }];
+    }
+    case "noteBlock":
+      return [{ type: "noteBlock", content: children.flatMap((c) => convertPMBlock(c, depth + 1)) }];
     case "table": {
       const rows = children.map((rowNode) => {
         const cells = (rowNode.content ?? []).map((cellNode) => {
@@ -912,6 +1023,22 @@ function convertPMBlock(node, depth = 0) {
       });
       return [{ type: "table", content: rows }];
     }
+    case "jinjaIfBlock": {
+      const branches = children.map((branchNode) => {
+        const branchType = branchNode.attrs?.branchType ?? "if";
+        const condition = branchNode.attrs?.condition;
+        const branchContent = (branchNode.content ?? []).flatMap((c) => convertPMBlock(c, depth + 2));
+        return {
+          branchType,
+          ...branchType !== "else" && condition ? { condition } : {},
+          content: branchContent
+        };
+      });
+      if (branches.length === 0) return [];
+      return [{ type: "jinjaIfBlock", branches }];
+    }
+    case "jinjaIfBranch":
+      return children.flatMap((c) => convertPMBlock(c, depth + 1));
     default:
       if (children.length > 0) {
         return children.flatMap((c) => convertPMBlock(c, depth + 1));
@@ -923,11 +1050,11 @@ function convertPMListItem(node, depth = 0) {
   if (depth > MAX_DEPTH) return { type: "listItem", content: [{ type: "paragraph", content: [] }] };
   const children = node.content ?? [];
   const content = children.flatMap((c) => convertPMBlock(c, depth + 1));
-  const checked = node.attrs?.checked;
   const base = {
     type: "listItem",
     content: content.length > 0 ? content : [{ type: "paragraph", content: [] }]
   };
+  const checked = node.attrs?.checked;
   if (typeof checked === "boolean") {
     base.checked = checked;
   }
@@ -1491,7 +1618,7 @@ function listItemWithTaskListItem(node, parent, state, info) {
 
 // src/markdown/plugins/resourceTag.ts
 var RESOURCE_TAG_RE = /\{\{([^:}]+):([^:}]*):([^}]+)\}\}/g;
-var VALID_TYPES = /* @__PURE__ */ new Set(["tool", "manual", "agent_message_template", "handoff", "time_diff"]);
+var VALID_TYPES = /* @__PURE__ */ new Set(["tool", "manual", "agent_message_template", "handoff", "end_call", "time_diff"]);
 function splitTextWithResourceTags(text2) {
   const results = [];
   let lastIndex = 0;
@@ -1654,10 +1781,11 @@ function convertBlock(node, depth = 0) {
     case "list": {
       const list = node;
       const items = list.children.map((li) => convertListItem(li, depth + 1));
+      const spread = list.spread ?? false;
       if (list.ordered) {
-        return [{ type: "orderedList", start: list.start ?? 1, content: items }];
+        return [{ type: "orderedList", start: list.start ?? 1, spread, content: items }];
       }
-      return [{ type: "bulletList", content: items }];
+      return [{ type: "bulletList", spread, content: items }];
     }
     case "blockquote": {
       const bq = node;
@@ -1666,6 +1794,10 @@ function convertBlock(node, depth = 0) {
     }
     case "thematicBreak":
       return [{ type: "horizontalRule" }];
+    case "code": {
+      const codeNode = node;
+      return [{ type: "codeBlock", content: codeNode.value, ...codeNode.lang ? { language: codeNode.lang } : {} }];
+    }
     case "jinjaIfBlockMdast": {
       const jNode = node;
       const branches = jNode.branches.map((b) => ({
@@ -1706,7 +1838,11 @@ function convertBlock(node, depth = 0) {
 function convertListItem(node, depth = 0) {
   if (depth > MAX_DEPTH2) throw new DepthError(depth);
   const content = node.children.flatMap((child) => convertBlock(child, depth + 1));
-  const base = { type: "listItem", content: content.length > 0 ? content : [{ type: "paragraph", content: [] }] };
+  const base = {
+    type: "listItem",
+    spread: node.spread ?? false,
+    content: content.length > 0 ? content : [{ type: "paragraph", content: [] }]
+  };
   if (typeof node.checked === "boolean") {
     return { ...base, checked: node.checked };
   }
@@ -1805,31 +1941,39 @@ function blockToMdast(node, depth = 0) {
       return [{ type: "paragraph", children: node.content.flatMap((c) => inlineToMdast(c, depth + 1)) }];
     case "heading":
       return [{ type: "heading", depth: node.level, children: node.content.flatMap((c) => inlineToMdast(c, depth + 1)) }];
-    case "bulletList":
+    case "bulletList": {
+      const items = node.content.map((li) => listItemToMdast(li, depth + 1));
       return [
         {
           type: "list",
           ordered: false,
-          spread: false,
-          children: node.content.map((li) => listItemToMdast(li, depth + 1))
+          spread: node.spread ?? false,
+          children: items
         }
       ];
-    case "orderedList":
+    }
+    case "orderedList": {
+      const items = node.content.map((li) => listItemToMdast(li, depth + 1));
       return [
         {
           type: "list",
           ordered: true,
           start: node.start,
-          spread: false,
-          children: node.content.map((li) => listItemToMdast(li, depth + 1))
+          spread: node.spread ?? false,
+          children: items
         }
       ];
+    }
     case "listItem":
       return listItemToMdast(node, depth).children.flatMap((child) => [child]);
     case "blockquote":
       return [{ type: "blockquote", children: node.content.flatMap((c) => blockToMdast(c, depth + 1)) }];
     case "horizontalRule":
       return [{ type: "thematicBreak" }];
+    case "codeBlock": {
+      const cb = node;
+      return [{ type: "code", value: cb.content, ...cb.language ? { lang: cb.language } : {} }];
+    }
     case "jinjaIfBlock": {
       const jNode = node;
       const result = [];
@@ -1853,14 +1997,18 @@ function blockToMdast(node, depth = 0) {
       }));
       return [{ type: "table", children: rows }];
     }
+    case "noteBlock":
+      return [];
   }
 }
 function listItemToMdast(node, depth = 0) {
   if (depth > MAX_DEPTH2) throw new DepthError(depth);
+  const children = node.content.flatMap((child) => blockToMdast(child, depth + 1));
+  const isSpread = node.spread ?? false;
   const result = {
     type: "listItem",
-    spread: false,
-    children: node.content.flatMap((child) => blockToMdast(child, depth + 1))
+    spread: isSpread,
+    children
   };
   if (typeof node.checked === "boolean") {
     result.checked = node.checked;
@@ -1893,12 +2041,20 @@ function textHandler(node, parent, state, info) {
   state.unsafe = originalUnsafe;
   return result;
 }
+function linkHandler(node, parent, state, info) {
+  const childrenText = state.containerPhrasing(node, { ...info, before: "[", after: "]" });
+  const url = node.url ?? "";
+  const title = node.title;
+  const titlePart = title ? ` "${title.replace(/"/g, '\\"')}"` : "";
+  return `[${childrenText}](${url}${titlePart})`;
+}
 function serializeToMarkdown(doc2) {
   const mdastTree = toMdast(doc2);
-  const result = toMarkdown(mdastTree, {
+  const raw = toMarkdown(mdastTree, {
     bullet: "-",
     rule: "-",
     listItemIndent: "one",
+    incrementListMarker: true,
     emphasis: "*",
     strong: "*",
     resourceLink: true,
@@ -1910,11 +2066,13 @@ function serializeToMarkdown(doc2) {
     ],
     handlers: {
       text: textHandler,
+      link: linkHandler,
       ...resourceTagToMarkdown().handlers,
       ...jumpPointToMarkdown().handlers
     },
     extensions: [gfmNoAutolinkToMarkdown()]
   });
+  let result = raw.replace(/^(\s*)\\>/gm, "$1>").replace(/(\S) *>/g, (match, pre) => `${pre} >`).replace(/\\\[([^\]]*)\]/g, "\\[$1\\]").replace(/ /g, " ");
   return result;
 }
 
@@ -1996,24 +2154,26 @@ function convertInline2(node) {
       return assertNever(node);
   }
 }
-var MAX_LIST_DEPTH = 3;
-function convertBlockToArray(node, listDepth = 0) {
+function convertBlockToArray(node) {
   if (node.type === "jinjaIfBlock") {
-    const jNode = node;
-    const result = [];
-    for (const branch of jNode.branches) {
-      const tagText = branch.branchType === "else" ? "{% else %}" : `{% ${branch.branchType} ${branch.condition ?? ""} %}`.trim();
-      result.push({ type: "paragraph", content: [{ type: "text", text: tagText }] });
-      for (const child of branch.content) {
-        result.push(...convertBlockToArray(child, listDepth));
-      }
-    }
-    result.push({ type: "paragraph", content: [{ type: "text", text: "{% endif %}" }] });
-    return result;
+    return [convertJinjaIfBlock(node)];
   }
-  return [convertBlock2(node, listDepth)];
+  return [convertBlock2(node)];
+}
+function convertJinjaIfBlock(node) {
+  return {
+    type: "jinjaIfBlock",
+    content: node.branches.map((branch) => ({
+      type: "jinjaIfBranch",
+      attrs: {
+        branchType: branch.branchType,
+        condition: branch.condition ?? ""
+      },
+      content: branch.content.length > 0 ? branch.content.flatMap(convertBlockToArray) : [{ type: "paragraph", content: [] }]
+    }))
+  };
 }
-function convertBlock2(node, listDepth = 0) {
+function convertBlock2(node) {
   switch (node.type) {
     case "paragraph":
       return {
@@ -2026,29 +2186,21 @@ function convertBlock2(node, listDepth = 0) {
         attrs: { level: node.level },
         content: node.content.flatMap(convertInlineToArray)
       };
-    case "bulletList": {
-      if (listDepth >= MAX_LIST_DEPTH) {
-        return flattenListToBlock(node);
-      }
+    case "bulletList":
       return {
         type: "bulletList",
-        content: node.content.map((c) => convertBlock2(c, listDepth + 1))
+        content: node.content.map(convertBlock2)
       };
-    }
-    case "orderedList": {
-      if (listDepth >= MAX_LIST_DEPTH) {
-        return flattenListToBlock(node);
-      }
+    case "orderedList":
       return {
         type: "orderedList",
         attrs: { start: node.start },
-        content: node.content.map((c) => convertBlock2(c, listDepth + 1))
+        content: node.content.map(convertBlock2)
       };
-    }
     case "listItem": {
       const result = {
         type: "listItem",
-        content: node.content.flatMap((c) => convertBlockToArray(c, listDepth))
+        content: node.content.flatMap(convertBlockToArray)
       };
       if (node.checked != null) {
         result.attrs = { checked: node.checked };
@@ -2058,10 +2210,23 @@ function convertBlock2(node, listDepth = 0) {
     case "blockquote":
       return {
         type: "blockquote",
-        content: node.content.flatMap((c) => convertBlockToArray(c, listDepth))
+        content: node.content.flatMap(convertBlockToArray)
       };
     case "horizontalRule":
       return { type: "horizontalRule" };
+    case "codeBlock": {
+      const cb = node;
+      return {
+        type: "codeBlock",
+        attrs: { language: cb.language ?? null },
+        content: cb.content ? [{ type: "text", text: cb.content }] : void 0
+      };
+    }
+    case "noteBlock":
+      return {
+        type: "noteBlock",
+        content: node.content.flatMap(convertBlockToArray)
+      };
     case "table":
       return {
         type: "table",
@@ -2073,53 +2238,16 @@ function convertBlock2(node, listDepth = 0) {
           }))
         }))
       };
-    case "jinjaIfBlock": {
-      const jNode = node;
-      const result = [];
-      for (const branch of jNode.branches) {
-        const tagText = branch.branchType === "else" ? "{% else %}" : `{% ${branch.branchType} ${branch.condition ?? ""} %}`.trim();
-        result.push({ type: "paragraph", content: [{ type: "text", text: tagText }] });
-        for (const child of branch.content) {
-          result.push(...convertBlockToArray(child, listDepth));
-        }
-      }
-      result.push({ type: "paragraph", content: [{ type: "text", text: "{% endif %}" }] });
-      return result[0] ?? { type: "paragraph", content: [] };
-    }
+    case "jinjaIfBlock":
+      return convertJinjaIfBlock(node);
     default:
       return assertNever(node);
   }
 }
-function flattenListToBlock(node) {
-  const paragraphs = [];
-  function extractInlines(n) {
-    switch (n.type) {
-      case "paragraph":
-      case "heading":
-        paragraphs.push({
-          type: "paragraph",
-          content: n.content.flatMap(convertInlineToArray)
-        });
-        break;
-      case "listItem":
-      case "blockquote":
-        for (const child of n.content) extractInlines(child);
-        break;
-      case "bulletList":
-      case "orderedList":
-        for (const item of n.content) extractInlines(item);
-        break;
-      default:
-        break;
-    }
-  }
-  extractInlines(node);
-  return paragraphs.length > 0 ? paragraphs[0] : { type: "paragraph", content: [] };
-}
 function toProseMirrorJSON(doc2) {
   return {
     type: "doc",
-    content: doc2.content.flatMap((c) => convertBlockToArray(c, 0))
+    content: doc2.content.flatMap(convertBlockToArray)
   };
 }
 function astNodesToJSONContent(nodes) {
@@ -2143,16 +2271,30 @@ function pmDocToAST(pmDoc) {
   return fromProseMirrorJSON(json);
 }
 function useEditorView(config) {
-  const viewRef = useRef(null);
   const viewInstanceRef = useRef(null);
+  const containerRef = useRef(null);
   const [, forceUpdate] = useState(0);
   const configRef = useRef(config);
   configRef.current = config;
   useEffect(() => {
-    const container = viewRef.current;
-    if (!container) return;
-    const { pmPlugins, nodeViews } = createPluginArray(config.plugins ?? []);
-    const state = docToState(config.content, pmPlugins);
+    return () => {
+      viewInstanceRef.current?.destroy();
+      viewInstanceRef.current = null;
+    };
+  }, []);
+  const viewRef = useCallback((container) => {
+    if (container === containerRef.current) return;
+    if (viewInstanceRef.current) {
+      viewInstanceRef.current.destroy();
+      viewInstanceRef.current = null;
+    }
+    containerRef.current = container;
+    if (!container) {
+      forceUpdate((n) => n + 1);
+      return;
+    }
+    const { pmPlugins, nodeViews } = createPluginArray(configRef.current.plugins ?? []);
+    const state = docToState(configRef.current.content, pmPlugins);
     const view = new EditorView(container, {
       state,
       nodeViews,
@@ -2169,10 +2311,6 @@ function useEditorView(config) {
     });
     viewInstanceRef.current = view;
     forceUpdate((n) => n + 1);
-    return () => {
-      view.destroy();
-      viewInstanceRef.current = null;
-    };
   }, []);
   const getAST = useCallback(() => {
     const view = viewInstanceRef.current;
@@ -2190,6 +2328,7 @@ function useEditorView(config) {
     const pmJSON = toProseMirrorJSON(doc2);
     const pmDoc = PMNode.fromJSON(actionbookSchema, pmJSON);
     const tr = view.state.tr.replaceWith(0, view.state.doc.content.size, pmDoc.content);
+    tr.setMeta("addToHistory", false);
     view.dispatch(tr);
   }, []);
   const focus = useCallback(() => {
@@ -2199,9 +2338,11 @@ function useEditorView(config) {
     viewInstanceRef.current?.destroy();
     viewInstanceRef.current = null;
   }, []);
+  const getView = useCallback(() => viewInstanceRef.current, []);
   return {
     viewRef,
     view: viewInstanceRef.current,
+    getView,
     getAST,
     getMarkdown,
     setContent,
@@ -2211,10 +2352,15 @@ function useEditorView(config) {
 }
 
 // src/ui/plugin/inputRulesPlugin.ts
-import { InputRule, wrappingInputRule } from "prosemirror-inputrules";
+import { InputRule, textblockTypeInputRule, wrappingInputRule } from "prosemirror-inputrules";
+import { TextSelection } from "prosemirror-state";
+var HEADING_RE = /^(#{1,6})\s$/;
+var BLOCKQUOTE_RE = /^\s*>\s$/;
+var CODE_BLOCK_RE = /^```([a-zA-Z0-9]*)$/;
+var HR_RE = /^([-*_])\1{2,}$/;
 var BULLET_LIST_RE = /^\s*([-*])\s$/;
 var ORDERED_LIST_RE = /^(\d+)\.\s$/;
-var JUMP_POINT_RE2 = /\^([A-Za-z_][A-Za-z0-9_]*)\^$/;
+var JUMP_POINT_RE2 = /\^([A-Za-z_]+)\^$/;
 var BOLD_STAR_RE = /(?:^|[^*])\*\*([^*]+)\*\*$/;
 var BOLD_UNDER_RE = /(?:^|[^_])__([^_]+)__$/;
 var ITALIC_STAR_RE = /(?:^|[^*])\*([^*]+)\*$/;
@@ -2225,11 +2371,14 @@ function markInputRule(pattern, markType, markerLen) {
   return new InputRule(pattern, (state, match, start, end) => {
     const textContent2 = match[1];
     const fullMatch = match[0];
-    const actualStart = end - fullMatch.length + (fullMatch.length - markerLen * 2 - textContent2.length);
+    const markedLength = markerLen * 2 + textContent2.length;
+    const prefixLen = fullMatch.length - markedLength;
+    const deleteFrom = start + prefixLen;
     const tr = state.tr;
-    tr.delete(actualStart, end);
+    tr.delete(deleteFrom, end);
     const textNode = state.schema.text(textContent2, [markType.create()]);
-    tr.insert(actualStart, textNode);
+    tr.insert(deleteFrom, textNode);
+    tr.removeStoredMark(markType);
     return tr;
   });
 }
@@ -2238,12 +2387,41 @@ function createInputRulesPlugin() {
     name: "inputRules",
     inputRules: () => {
       const rules = [];
-      rules.push(wrappingInputRule(BULLET_LIST_RE, actionbookSchema.nodes.bulletList));
       rules.push(
-        wrappingInputRule(ORDERED_LIST_RE, actionbookSchema.nodes.orderedList, (match) => ({
-          start: +match[1]
+        textblockTypeInputRule(HEADING_RE, actionbookSchema.nodes.heading, (match) => ({
+          level: match[1].length
         }))
       );
+      rules.push(wrappingInputRule(BLOCKQUOTE_RE, actionbookSchema.nodes.blockquote));
+      rules.push(
+        new InputRule(CODE_BLOCK_RE, (state, match, start, end) => {
+          const language = match[1] || null;
+          const $start = state.doc.resolve(start);
+          const blockStart = $start.before($start.depth);
+          const blockEnd = $start.after($start.depth);
+          const tr = state.tr;
+          tr.replaceWith(
+            blockStart,
+            blockEnd,
+            actionbookSchema.nodes.codeBlock.create({ language })
+          );
+          return tr;
+        })
+      );
+      rules.push(
+        new InputRule(HR_RE, (state, _match, start, end) => {
+          const { horizontalRule: hrType, paragraph: pType } = actionbookSchema.nodes;
+          const $start = state.doc.resolve(start);
+          const blockStart = $start.before($start.depth);
+          const blockEnd = $start.after($start.depth);
+          const tr = state.tr;
+          tr.replaceWith(blockStart, blockEnd, [hrType.create(), pType.create()]);
+          tr.setSelection(
+            TextSelection.near(tr.doc.resolve(blockStart + hrType.createAndFill().nodeSize + 1))
+          );
+          return tr;
+        })
+      );
       rules.push(
         new InputRule(/^\s*[-*]\s\[([ xX])\]\s$/, (state, match, start, end) => {
           const checked = match[1] !== " ";
@@ -2253,6 +2431,12 @@ function createInputRulesPlugin() {
           return state.tr.delete(start, end).insert(start, list);
         })
       );
+      rules.push(wrappingInputRule(BULLET_LIST_RE, actionbookSchema.nodes.bulletList));
+      rules.push(
+        wrappingInputRule(ORDERED_LIST_RE, actionbookSchema.nodes.orderedList, (match) => ({
+          start: +match[1]
+        }))
+      );
       const jumpPointType = actionbookSchema.nodes.jumpPoint;
       rules.push(
         new InputRule(JUMP_POINT_RE2, (state, match, start, end) => {
@@ -2279,24 +2463,85 @@ function createInputRulesPlugin() {
   };
 }
 
+// src/ui/plugin/historyPlugin.ts
+import { history, undo, redo } from "prosemirror-history";
+import { keymap as keymap2 } from "prosemirror-keymap";
+function createHistoryPlugin() {
+  return {
+    name: "history",
+    plugins: () => [
+      history(),
+      keymap2({ "Mod-z": undo, "Mod-Shift-z": redo, "Mod-y": redo })
+    ]
+  };
+}
+
 // src/ui/plugin/keymapPlugin.ts
-import { chainCommands, newlineInCode, createParagraphNear, liftEmptyBlock, splitBlock, toggleMark } from "prosemirror-commands";
+import { baseKeymap, chainCommands, newlineInCode, createParagraphNear, liftEmptyBlock, splitBlock, toggleMark, setBlockType, joinBackward } from "prosemirror-commands";
+import { keymap as keymap3 } from "prosemirror-keymap";
 import { liftListItem, sinkListItem, splitListItem, wrapInList } from "prosemirror-schema-list";
 var TAB_CHAR = "	";
-var { listItem, bulletList, orderedList, hardBreak } = actionbookSchema.nodes;
+var { listItem, bulletList, orderedList, hardBreak, heading, paragraph, horizontalRule, blockquote } = actionbookSchema.nodes;
 var { bold: boldMark, italic: italicMark, underline: underlineMark, strikethrough: strikethroughMark, code: codeMark } = actionbookSchema.marks;
 function cursorDirectlyInListItem(state) {
   const { $from } = state.selection;
   return $from.depth >= 2 && $from.node($from.depth - 1).type === listItem;
 }
-var backspaceCommand = (state, dispatch) => {
+var backspaceAfterList = (state, dispatch) => {
   const { $from } = state.selection;
   if (!state.selection.empty) return false;
   if ($from.parentOffset !== 0) return false;
-  if (!cursorDirectlyInListItem(state)) return false;
-  if ($from.index($from.depth - 1) !== 0) return false;
-  return liftListItem(listItem)(state, dispatch);
+  if ($from.parent.type !== paragraph) return false;
+  if ($from.parent.content.size !== 0) return false;
+  const parentDepth = $from.depth - 1;
+  if (parentDepth < 0) return false;
+  const indexInParent = $from.index(parentDepth);
+  if (indexInParent === 0) return false;
+  const prevNode = $from.node(parentDepth).child(indexInParent - 1);
+  const isList = prevNode.type === bulletList || prevNode.type === orderedList;
+  if (!isList) return false;
+  if (dispatch) {
+    const from = $from.before($from.depth);
+    const to = $from.after($from.depth);
+    const tr = state.tr.delete(from, to);
+    dispatch(tr.scrollIntoView());
+  }
+  return true;
+};
+var backspaceAfterLeafBlock = (state, dispatch) => {
+  const { $from } = state.selection;
+  if (!state.selection.empty) return false;
+  if ($from.parentOffset !== 0) return false;
+  if ($from.parent.type !== paragraph) return false;
+  if ($from.parent.content.size !== 0) return false;
+  const parentDepth = $from.depth - 1;
+  if (parentDepth < 0) return false;
+  const indexInParent = $from.index(parentDepth);
+  if (indexInParent === 0) return false;
+  const prevNode = $from.node(parentDepth).child(indexInParent - 1);
+  if (prevNode.type !== horizontalRule) return false;
+  if (dispatch) {
+    const hrPos = $from.posAtIndex(indexInParent - 1, parentDepth);
+    dispatch(state.tr.delete(hrPos, hrPos + prevNode.nodeSize).scrollIntoView());
+  }
+  return true;
 };
+var backspaceCommand = chainCommands(
+  backspaceAfterList,
+  backspaceAfterLeafBlock,
+  (state, dispatch) => {
+    const { $from } = state.selection;
+    if (!state.selection.empty) return false;
+    if ($from.parentOffset !== 0) return false;
+    if ($from.parent.type === heading) {
+      return setBlockType(paragraph)(state, dispatch);
+    }
+    if (!cursorDirectlyInListItem(state)) return false;
+    if ($from.index($from.depth - 1) !== 0) return false;
+    return liftListItem(listItem)(state, dispatch);
+  },
+  joinBackward
+);
 var tabCommand = (state, dispatch) => {
   const { $from } = state.selection;
   if (cursorDirectlyInListItem(state) && $from.parentOffset === 0) {
@@ -2349,12 +2594,13 @@ function createKeymapPlugin() {
       "Mod-e": toggleMark(codeMark),
       "Mod-Shift-7": wrapInList(bulletList),
       "Mod-Shift-8": wrapInList(orderedList)
-    })
+    }),
+    plugins: () => [keymap3(baseKeymap)]
   };
 }
 
 // src/ui/plugin/markdownClipboard.ts
-import { Fragment, Slice } from "prosemirror-model";
+import { DOMParser as ProseMirrorDOMParser, Fragment, Slice } from "prosemirror-model";
 import { Plugin, PluginKey } from "prosemirror-state";
 
 // src/ast/traverse.ts
@@ -2370,6 +2616,7 @@ function getChildren(node) {
     case "doc":
     case "blockquote":
     case "listItem":
+    case "noteBlock":
       return node.content;
     case "paragraph":
     case "heading":
@@ -3841,6 +4088,23 @@ var gfmNoAutolinkFromMarkdown = () => [
   gfmTaskListItemFromMarkdown()
 ];
 var MAX_DEPTH5 = 128;
+var BRACKET_LINK_RE = /\[([^\]]+)\]\(([^)]*\s[^)]*)\)/g;
+function splitTextWithBracketLinks(value) {
+  const results = [];
+  let lastIndex = 0;
+  for (const m of value.matchAll(BRACKET_LINK_RE)) {
+    const idx = m.index;
+    if (idx > lastIndex) results.push({ type: "text", value: value.slice(lastIndex, idx) });
+    results.push({
+      type: "link",
+      url: m[2],
+      children: [{ type: "text", value: m[1] }]
+    });
+    lastIndex = idx + m[0].length;
+  }
+  if (lastIndex < value.length) results.push({ type: "text", value: value.slice(lastIndex) });
+  return results;
+}
 function combinedTokensFromMarkdown(node, depth = 0) {
   if (depth > MAX_DEPTH5) return;
   if (!node.children) return;
@@ -3852,13 +4116,20 @@ function combinedTokensFromMarkdown(node, depth = 0) {
     for (const child of node.children) {
       const c = child;
       if (c.type === "text") {
-        const afterResourceTags = splitTextWithResourceTags(child.value);
-        for (const part of afterResourceTags) {
-          if (part.type === "text") {
-            const afterJumpPoints = splitTextWithJumpPoints(part.value);
-            newChildren.push(...afterJumpPoints);
-          } else {
-            newChildren.push(part);
+        const afterLinks = splitTextWithBracketLinks(child.value);
+        for (const linkPart of afterLinks) {
+          if (linkPart.type !== "text") {
+            newChildren.push(linkPart);
+            continue;
+          }
+          const afterResourceTags = splitTextWithResourceTags(linkPart.value);
+          for (const part of afterResourceTags) {
+            if (part.type === "text") {
+              const afterJumpPoints = splitTextWithJumpPoints(part.value);
+              newChildren.push(...afterJumpPoints);
+            } else {
+              newChildren.push(part);
+            }
           }
         }
       } else {
@@ -4065,77 +4336,479 @@ function analyzeJinjaBlocks(doc2) {
   });
 }
 
-// src/ui/plugin/markdownClipboard.ts
-var key = new PluginKey("markdownClipboard");
-function textToSlice(text2, view) {
-  try {
-    const existingIds = /* @__PURE__ */ new Set();
-    view.state.doc.descendants((node) => {
-      if (node.type.name === "jumpPoint") existingIds.add(node.attrs.id);
-    });
-    const deduped = text2.replace(/\^([A-Za-z_][A-Za-z0-9_]*)\^/gm, (match, id) => {
-      if (existingIds.has(id)) return id;
-      existingIds.add(id);
-      return match;
+// src/jinja/conditionHighlighter.ts
+var KEYWORDS = {
+  and: "AND",
+  or: "OR",
+  not: "NOT",
+  in: "IN",
+  is: "IS",
+  True: "BOOL",
+  False: "BOOL",
+  true: "BOOL",
+  false: "BOOL",
+  None: "NONE",
+  null: "NONE"
+};
+var CATEGORY_BY_TYPE = {
+  STRING: "value",
+  NUMBER: "value",
+  BOOL: "value",
+  NONE: "value",
+  IDENT: "variable",
+  AND: "operator",
+  OR: "operator",
+  NOT: "operator",
+  IN: "operator",
+  IS: "operator",
+  EQ: "operator",
+  NEQ: "operator",
+  LT: "operator",
+  GT: "operator",
+  LTE: "operator",
+  GTE: "operator",
+  LPAREN: "punctuation",
+  RPAREN: "punctuation"
+};
+var NEGATIVE_NUMBER_PRECEDERS = /* @__PURE__ */ new Set([
+  "AND",
+  "OR",
+  "NOT",
+  "IN",
+  "IS",
+  "EQ",
+  "NEQ",
+  "LT",
+  "GT",
+  "LTE",
+  "GTE",
+  "LPAREN"
+]);
+function canStartNegativeNumber(tokens) {
+  if (tokens.length === 0) {
+    return true;
+  }
+  const previous = tokens[tokens.length - 1];
+  return NEGATIVE_NUMBER_PRECEDERS.has(previous.type);
+}
+function finalizeTokens(input, rawTokens) {
+  const highlighted = [];
+  for (let i = 0; i < rawTokens.length; i++) {
+    const token = rawTokens[i];
+    const next = rawTokens[i + 1];
+    if (token.type === "IS" && next?.type === "NOT") {
+      highlighted.push({
+        text: input.slice(token.start, next.end),
+        start: token.start,
+        end: next.end,
+        category: "operator"
+      });
+      i++;
+      continue;
+    }
+    highlighted.push({
+      text: token.text,
+      start: token.start,
+      end: token.end,
+      category: CATEGORY_BY_TYPE[token.type]
     });
-    const astNodes = parseFragment(deduped);
-    const pmJSONNodes = astNodesToJSONContent(astNodes);
-    const pmNodes = pmJSONNodes.map((json) => actionbookSchema.nodeFromJSON(json));
-    const fragment = Fragment.fromArray(pmNodes);
-    const openDepth = pmJSONNodes.length === 1 && pmJSONNodes[0].type === "paragraph" ? 1 : 0;
-    return new Slice(fragment, openDepth, openDepth);
-  } catch {
-    return null;
   }
+  return highlighted;
 }
-function createPlugin() {
-  return new Plugin({
-    key,
-    props: {
-      handlePaste(view, event) {
-        const text2 = event.clipboardData?.getData("text/plain");
-        if (!text2) return false;
-        const slice = textToSlice(text2, view);
-        if (!slice) return false;
-        view.dispatch(view.state.tr.replaceSelection(slice));
-        return true;
-      },
-      clipboardTextParser(text2, _$context, _plain, view) {
-        if (!text2) return Slice.empty;
-        const slice = textToSlice(text2, view);
-        if (!slice) {
-          const textNode = actionbookSchema.text(text2);
-          return new Slice(Fragment.from(textNode), 0, 0);
+function tokenizeCondition(input) {
+  const rawTokens = [];
+  let i = 0;
+  while (i < input.length) {
+    const char = input[i];
+    if (/\s/.test(char)) {
+      i++;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      const start = i;
+      const quote = char;
+      i++;
+      while (i < input.length) {
+        if (input[i] === "\\" && i + 1 < input.length) {
+          i += 2;
+          continue;
         }
-        return slice;
-      },
-      // Discard pasted HTML — always prefer plain-text markdown
-      transformPastedHTML() {
-        return "";
-      },
-      clipboardTextSerializer(slice) {
-        try {
-          const jsonNodes = [];
-          slice.content.forEach((node) => jsonNodes.push(node.toJSON()));
-          const doc2 = fromProseMirrorJSON({ type: "doc", content: jsonNodes });
-          return serializeFragment(doc2.content);
-        } catch {
-          return "";
+        if (input[i] === quote) {
+          i++;
+          rawTokens.push({
+            type: "STRING",
+            text: input.slice(start, i),
+            start,
+            end: i
+          });
+          break;
         }
+        i++;
+      }
+      if (rawTokens[rawTokens.length - 1]?.start !== start) {
+        return finalizeTokens(input, rawTokens);
       }
+      continue;
     }
-  });
-}
-function createMarkdownClipboardPlugin() {
-  return {
-    name: "markdownClipboard",
-    plugins: () => [createPlugin()]
-  };
-}
-
-// src/ui/plugin/jumpPointPlugin.ts
-import { Plugin as Plugin2, PluginKey as PluginKey2, TextSelection } from "prosemirror-state";
-import { Decoration, DecorationSet } from "prosemirror-view";
+    if (/[0-9]/.test(char) || char === "-" && i + 1 < input.length && /[0-9]/.test(input[i + 1]) && canStartNegativeNumber(rawTokens)) {
+      const start = i;
+      if (input[i] === "-") {
+        i++;
+      }
+      while (i < input.length && /[0-9]/.test(input[i])) {
+        i++;
+      }
+      if (i < input.length && input[i] === ".") {
+        i++;
+        while (i < input.length && /[0-9]/.test(input[i])) {
+          i++;
+        }
+      }
+      rawTokens.push({
+        type: "NUMBER",
+        text: input.slice(start, i),
+        start,
+        end: i
+      });
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(char)) {
+      const start = i;
+      i++;
+      while (i < input.length && /[a-zA-Z0-9_.]/.test(input[i])) {
+        i++;
+      }
+      const text2 = input.slice(start, i);
+      rawTokens.push({
+        type: KEYWORDS[text2] ?? "IDENT",
+        text: text2,
+        start,
+        end: i
+      });
+      continue;
+    }
+    if (i + 1 < input.length) {
+      const twoChar = input.slice(i, i + 2);
+      if (twoChar === "==") {
+        rawTokens.push({ type: "EQ", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+      if (twoChar === "!=") {
+        rawTokens.push({ type: "NEQ", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+      if (twoChar === "<=") {
+        rawTokens.push({ type: "LTE", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+      if (twoChar === ">=") {
+        rawTokens.push({ type: "GTE", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+    }
+    if (char === "<") {
+      rawTokens.push({ type: "LT", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    if (char === ">") {
+      rawTokens.push({ type: "GT", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    if (char === "(") {
+      rawTokens.push({ type: "LPAREN", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    if (char === ")") {
+      rawTokens.push({ type: "RPAREN", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    return finalizeTokens(input, rawTokens);
+  }
+  return finalizeTokens(input, rawTokens);
+}
+
+// src/tree/documentTree.ts
+var MAX_DEPTH6 = 128;
+function extractInlineItems(content, blockIndex) {
+  const items = [];
+  for (const node of content) {
+    if (node.type === "jumpPoint") {
+      items.push({
+        type: "jumpPoint",
+        label: node.id,
+        blockIndex,
+        children: []
+      });
+    } else if (node.type === "resourceTag") {
+      const isEndAction = node.tagType === "handoff";
+      items.push({
+        type: isEndAction ? "endAction" : "resourceTag",
+        label: isEndAction ? `End  ${node.text}` : node.text,
+        blockIndex,
+        children: [],
+        meta: { tagType: node.tagType, resourceId: node.resourceId }
+      });
+    }
+  }
+  return items;
+}
+function extractBlockItems(blocks, startIndex, depth) {
+  if (depth > MAX_DEPTH6) return [];
+  const items = [];
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i];
+    const blockIndex = startIndex + i;
+    switch (block.type) {
+      case "heading": {
+        const label = textContent(block) || `Heading ${block.level}`;
+        const inlineItems = extractInlineItems(block.content, blockIndex);
+        items.push({
+          type: "heading",
+          label,
+          blockIndex,
+          children: inlineItems,
+          meta: { level: block.level }
+        });
+        break;
+      }
+      case "paragraph": {
+        const inlineItems = extractInlineItems(block.content, blockIndex);
+        items.push(...inlineItems);
+        break;
+      }
+      case "jinjaIfBlock": {
+        const branches = block.branches.map((branch) => {
+          const branchLabel = branch.branchType === "else" ? "ELSE" : `${branch.branchType.toUpperCase()} ${branch.condition || ""}`.trim();
+          const branchChildren = extractBlockItems(branch.content, blockIndex, depth + 1);
+          return {
+            type: "jinjaBranch",
+            label: branchLabel,
+            blockIndex,
+            children: branchChildren
+          };
+        });
+        items.push({
+          type: "jinjaIf",
+          label: "Jinja if",
+          blockIndex,
+          children: branches
+        });
+        break;
+      }
+      case "noteBlock": {
+        const noteContent = textContent(block);
+        items.push({
+          type: "noteBlock",
+          label: noteContent ? `Note: ${noteContent.slice(0, 30)}` : "Note",
+          blockIndex,
+          children: []
+        });
+        break;
+      }
+      case "bulletList":
+      case "orderedList": {
+        for (const li of block.content) {
+          const childItems = extractBlockItems(li.content, blockIndex, depth + 1);
+          items.push(...childItems);
+        }
+        break;
+      }
+      case "blockquote": {
+        const childItems = extractBlockItems(block.content, blockIndex, depth + 1);
+        items.push(...childItems);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  return items;
+}
+function buildDocumentTree(doc2) {
+  const items = extractBlockItems(doc2.content, 0, 0);
+  try {
+    const structures = analyzeJinjaBlocks(doc2);
+    if (structures.length > 0) {
+      const hasStructuredJinja = items.some((n) => n.type === "jinjaIf");
+      if (!hasStructuredJinja) {
+        for (const s of structures) {
+          const branches = s.branches.map((b) => ({
+            type: "jinjaBranch",
+            label: b.type === "else" ? "ELSE" : `${b.type.toUpperCase()} ${b.condition || ""}`.trim(),
+            blockIndex: b.tagBlockIndex,
+            children: []
+          }));
+          const jinjaNode = {
+            type: "jinjaIf",
+            label: "Jinja if",
+            blockIndex: s.ifTagBlockIndex,
+            children: branches
+          };
+          let inserted = false;
+          for (let i = 0; i < items.length; i++) {
+            if (items[i].blockIndex > s.ifTagBlockIndex) {
+              items.splice(i, 0, jinjaNode);
+              inserted = true;
+              break;
+            }
+          }
+          if (!inserted) items.push(jinjaNode);
+        }
+      }
+    }
+  } catch {
+  }
+  return items;
+}
+
+// src/ui/plugin/markdownClipboard.ts
+var key = new PluginKey("markdownClipboard");
+var MAX_PASTE_LIST_DEPTH = 3;
+var MAX_FLATTEN_DEPTH = 128;
+function flattenDeepLists(node, listDepth = 0, _recurseDepth = 0) {
+  if (_recurseDepth > MAX_FLATTEN_DEPTH) return node;
+  const isList = node.type.name === "bulletList" || node.type.name === "orderedList";
+  const currentDepth = isList ? listDepth + 1 : listDepth;
+  if (isList && currentDepth >= MAX_PASTE_LIST_DEPTH) {
+    const flatItems = [];
+    node.forEach((li) => {
+      const nonListBlocks = [];
+      li.forEach((block) => {
+        if (block.type.name !== "bulletList" && block.type.name !== "orderedList") {
+          nonListBlocks.push(block);
+        }
+      });
+      if (nonListBlocks.length > 0) {
+        flatItems.push(li.type.create(li.attrs, nonListBlocks));
+      }
+    });
+    if (flatItems.length === 0) return node;
+    return node.copy(Fragment.fromArray(flatItems));
+  }
+  const children = [];
+  let changed = false;
+  node.forEach((child) => {
+    const flattened = flattenDeepLists(child, currentDepth, _recurseDepth + 1);
+    if (flattened !== child) changed = true;
+    children.push(flattened);
+  });
+  if (!changed) return node;
+  return node.copy(Fragment.fromArray(children));
+}
+function htmlToSlice(html) {
+  if (typeof document === "undefined") return null;
+  try {
+    const domParser = new DOMParser();
+    const parsed = domParser.parseFromString(html, "text/html");
+    const body = parsed.body;
+    if (!body || !body.childNodes.length) return null;
+    const pmParser = ProseMirrorDOMParser.fromSchema(actionbookSchema);
+    const doc2 = pmParser.parse(body);
+    const flattened = flattenDeepLists(doc2);
+    const content = flattened.content;
+    let hasContent = false;
+    content.forEach((node) => {
+      if (node.type.name !== "paragraph" || node.content.size > 0) {
+        hasContent = true;
+      }
+    });
+    if (!hasContent) return null;
+    const openDepth = content.childCount === 1 && content.firstChild?.type.name === "paragraph" ? 1 : 0;
+    return new Slice(content, openDepth, openDepth);
+  } catch {
+    return null;
+  }
+}
+function textToSlice(text2, view) {
+  try {
+    const existingIds = /* @__PURE__ */ new Set();
+    view.state.doc.descendants((node) => {
+      if (node.type.name === "jumpPoint") existingIds.add(node.attrs.id);
+    });
+    const deduped = text2.replace(/\^([A-Za-z_][A-Za-z0-9_]*)\^/gm, (match, id) => {
+      if (existingIds.has(id)) return id;
+      existingIds.add(id);
+      return match;
+    });
+    const astNodes = parseFragment(deduped);
+    const pmJSONNodes = astNodesToJSONContent(astNodes);
+    const pmNodes = pmJSONNodes.map((json) => actionbookSchema.nodeFromJSON(json));
+    const fragment = Fragment.fromArray(pmNodes);
+    const openDepth = pmJSONNodes.length === 1 && pmJSONNodes[0].type === "paragraph" ? 1 : 0;
+    return new Slice(fragment, openDepth, openDepth);
+  } catch {
+    return null;
+  }
+}
+function createPlugin() {
+  return new Plugin({
+    key,
+    props: {
+      handlePaste(view, event) {
+        const html = event.clipboardData?.getData("text/html");
+        const text2 = event.clipboardData?.getData("text/plain");
+        if (html) {
+          const htmlSlice = htmlToSlice(html);
+          if (htmlSlice) {
+            view.dispatch(view.state.tr.replaceSelection(htmlSlice));
+            return true;
+          }
+        }
+        if (!text2) return false;
+        const slice = textToSlice(text2, view);
+        if (!slice) return false;
+        view.dispatch(view.state.tr.replaceSelection(slice));
+        return true;
+      },
+      clipboardTextParser(text2, _$context, _plain, view) {
+        if (!text2) return Slice.empty;
+        const slice = textToSlice(text2, view);
+        if (!slice) {
+          const textNode = actionbookSchema.text(text2);
+          return new Slice(Fragment.from(textNode), 0, 0);
+        }
+        return slice;
+      },
+      // Transform pasted HTML: keep structure but flatten deep lists
+      // to prevent Chrome contentEditable hanging
+      transformPasted(slice) {
+        const nodes = [];
+        slice.content.forEach((node) => {
+          nodes.push(flattenDeepLists(node));
+        });
+        return new Slice(Fragment.fromArray(nodes), slice.openStart, slice.openEnd);
+      },
+      clipboardTextSerializer(slice) {
+        try {
+          const jsonNodes = [];
+          slice.content.forEach((node) => jsonNodes.push(node.toJSON()));
+          const doc2 = fromProseMirrorJSON({ type: "doc", content: jsonNodes });
+          return serializeFragment(doc2.content);
+        } catch {
+          return "";
+        }
+      }
+    }
+  });
+}
+function createMarkdownClipboardPlugin() {
+  return {
+    name: "markdownClipboard",
+    plugins: () => [createPlugin()]
+  };
+}
+
+// src/ui/plugin/jumpPointPlugin.ts
+import { Plugin as Plugin2, PluginKey as PluginKey2, TextSelection as TextSelection2 } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
 var adjacentKey = new PluginKey2("jumpPointAdjacent");
 var JUMP_POINT_ADJACENT_SPEC = { jumpPointAdjacent: true };
 function buildDecorations(state) {
@@ -4205,8 +4878,15 @@ function createJumpPointEditPlugin() {
     }
   });
 }
-function jumpPointBefore(state) {
+function jumpPointAtOrBefore(state) {
   const { selection } = state;
+  if ("node" in selection) {
+    const node = selection.node;
+    if (node?.type?.name === "jumpPoint") {
+      return { id: node.attrs.id, nodeStart: selection.from, nodeEnd: selection.to };
+    }
+    return null;
+  }
   if (!selection.empty) return null;
   const { $from } = selection;
   const nodeBefore = $from.nodeBefore;
@@ -4216,23 +4896,23 @@ function jumpPointBefore(state) {
   return { id: nodeBefore.attrs.id, nodeStart, nodeEnd };
 }
 function explodeOnBackspace(state) {
-  const info = jumpPointBefore(state);
+  const info = jumpPointAtOrBefore(state);
   if (!info) return null;
   const { id, nodeStart, nodeEnd } = info;
   const rawText = `^${id}`;
   const tr = state.tr.replaceWith(nodeStart, nodeEnd, state.schema.text(rawText));
   const cursorPos = Math.min(nodeStart + rawText.length, tr.doc.content.size);
-  tr.setSelection(TextSelection.near(tr.doc.resolve(cursorPos)));
+  tr.setSelection(TextSelection2.near(tr.doc.resolve(cursorPos)));
   return tr;
 }
 function explodeOnArrowLeft(state) {
-  const info = jumpPointBefore(state);
+  const info = jumpPointAtOrBefore(state);
   if (!info) return null;
   const { id, nodeStart, nodeEnd } = info;
   const rawText = `^${id}^`;
   const tr = state.tr.replaceWith(nodeStart, nodeEnd, state.schema.text(rawText));
   const cursorPos = Math.min(nodeStart + 1 + id.length, tr.doc.content.size);
-  tr.setSelection(TextSelection.near(tr.doc.resolve(cursorPos)));
+  tr.setSelection(TextSelection2.near(tr.doc.resolve(cursorPos)));
   tr.setMeta(jumpPointEditKey, { from: nodeStart, to: nodeStart + rawText.length });
   return tr;
 }
@@ -4279,6 +4959,7 @@ function createJumpPointAdjacentPlugin() {
 }
 
 // src/ui/plugin/jumpPointNodeViewPlugin.tsx
+import { useCallback as useCallback2, useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var JUMP_POINT_STYLE = {
   display: "inline-flex",
@@ -4286,31 +4967,118 @@ var JUMP_POINT_STYLE = {
   backgroundColor: "#FFF2B6",
   border: "1px solid #FFC233",
   color: "#AA5D04",
-  borderRadius: "4px",
-  padding: "0 0.3em",
-  fontSize: "0.85em",
-  lineHeight: 1.6,
+  borderRadius: "2px",
+  padding: "2px",
+  fontSize: "12px",
+  lineHeight: "16px",
   userSelect: "none",
   cursor: "default",
-  boxSizing: "border-box"
+  boxSizing: "border-box",
+  height: "20px",
+  overflow: "hidden"
 };
 var JUMP_POINT_ADJACENT_STYLE = {
   ...JUMP_POINT_STYLE,
   backgroundColor: "#FFE680",
   borderColor: "#FF9500"
 };
-function JumpPointNodeViewComponent({ node, decorations }) {
+var JUMP_POINT_DUPLICATE_STYLE = {
+  ...JUMP_POINT_STYLE,
+  backgroundColor: "#FFD9DD",
+  borderColor: "#D9352C",
+  color: "#9D091E"
+};
+var LABEL_STYLE = {
+  padding: "0 4px",
+  whiteSpace: "nowrap"
+};
+var CLOSE_BTN_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "16px",
+  height: "16px",
+  padding: 0,
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  borderRadius: "1px",
+  flexShrink: 0,
+  color: "inherit",
+  fontSize: "10px",
+  lineHeight: 1
+};
+var TOOLTIP_STYLE = {
+  position: "absolute",
+  bottom: "calc(100% + 8px)",
+  left: "50%",
+  transform: "translateX(-50%)",
+  backgroundColor: "#fff",
+  border: "1px solid #CCC",
+  borderRadius: "4px",
+  boxShadow: "0 8px 10px rgba(13,13,13,0.12), 0 3px 14px rgba(13,13,13,0.08), 0 3px 5px rgba(13,13,13,0.04)",
+  padding: "16px 20px",
+  fontSize: "14px",
+  lineHeight: "20px",
+  color: "#0D0D0D",
+  whiteSpace: "nowrap",
+  zIndex: 100,
+  pointerEvents: "none"
+};
+function JumpPointNodeViewComponent({ node, view, getPos, decorations }) {
   const id = node.attrs.id;
   const isAdjacent = decorations?.some((d) => d.spec?.jumpPointAdjacent === true) ?? false;
+  const isDuplicate = decorations?.some((d) => d.spec?.jumpPointDuplicate === true) ?? false;
+  const [showTooltip, setShowTooltip] = useState2(false);
+  const handleDelete2 = useCallback2(() => {
+    const pos = getPos();
+    if (pos == null) return;
+    const tr = view.state.tr.delete(pos, pos + node.nodeSize);
+    view.dispatch(tr);
+    view.focus();
+  }, [view, getPos, node.nodeSize]);
+  if (isDuplicate) {
+    return /* @__PURE__ */ jsxs3(
+      "span",
+      {
+        style: { ...JUMP_POINT_DUPLICATE_STYLE, position: "relative" },
+        id: `jp-${id}`,
+        onMouseEnter: () => setShowTooltip(true),
+        onMouseLeave: () => setShowTooltip(false),
+        children: [
+          /* @__PURE__ */ jsx4(IconAnchor, { size: 12, fill: "#9D091E", style: { paddingLeft: "2px", flexShrink: 0 } }),
+          /* @__PURE__ */ jsx4("span", { style: LABEL_STYLE, children: id }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              style: CLOSE_BTN_STYLE,
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleDelete2();
+              },
+              title: "Remove anchor",
+              children: "\u2715"
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsxs3("span", { style: TOOLTIP_STYLE, children: [
+            "\u201C",
+            id,
+            "\u201D is already used as an anchor"
+          ] })
+        ]
+      }
+    );
+  }
   if (isAdjacent) {
     return /* @__PURE__ */ jsxs3("span", { style: JUMP_POINT_ADJACENT_STYLE, id: `jp-${id}`, children: [
-      /* @__PURE__ */ jsx4(IconAnchor, { size: 12, fill: "#AA5D04", style: { marginRight: "max(0.15em, 2px)", flexShrink: 0 } }),
-      `^${id}^`
+      /* @__PURE__ */ jsx4(IconAnchor, { size: 12, fill: "#AA5D04", style: { paddingLeft: "2px", flexShrink: 0 } }),
+      /* @__PURE__ */ jsx4("span", { style: LABEL_STYLE, children: `^${id}^` })
     ] });
   }
   return /* @__PURE__ */ jsxs3("span", { style: JUMP_POINT_STYLE, id: `jp-${id}`, children: [
-    /* @__PURE__ */ jsx4(IconAnchor, { size: 12, fill: "#AA5D04", style: { marginRight: "max(0.15em, 2px)", flexShrink: 0 } }),
-    id
+    /* @__PURE__ */ jsx4(IconAnchor, { size: 12, fill: "#AA5D04", style: { paddingLeft: "2px", flexShrink: 0 } }),
+    /* @__PURE__ */ jsx4("span", { style: LABEL_STYLE, children: id })
   ] });
 }
 function createJumpPointNodeViewPlugin() {
@@ -4322,6 +5090,105 @@ function createJumpPointNodeViewPlugin() {
   };
 }
 
+// src/ui/plugin/jumpPointValidationPlugin.ts
+import { Plugin as Plugin3, PluginKey as PluginKey3 } from "prosemirror-state";
+import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "prosemirror-view";
+var pluginKey = new PluginKey3("jumpPointValidation");
+function collectJumpPointIds(state) {
+  const ids = /* @__PURE__ */ new Set();
+  state.doc.descendants((node) => {
+    if (node.type.name === "jumpPoint") {
+      ids.add(node.attrs.id);
+    }
+  });
+  return ids;
+}
+function findDuplicatePositions(state) {
+  const idCount = /* @__PURE__ */ new Map();
+  const nodes = [];
+  state.doc.descendants((node, pos) => {
+    if (node.type.name === "jumpPoint") {
+      const id = node.attrs.id;
+      idCount.set(id, (idCount.get(id) ?? 0) + 1);
+      nodes.push({ id, pos, size: node.nodeSize });
+    }
+  });
+  return nodes.filter((n) => (idCount.get(n.id) ?? 0) > 1);
+}
+function findBrokenAnchorRefs(state, existingIds) {
+  const broken = [];
+  const linkMarkType = state.schema.marks.link;
+  if (!linkMarkType) return broken;
+  state.doc.descendants((node, pos) => {
+    if (!node.isText) return;
+    const linkMark2 = node.marks.find((m) => m.type === linkMarkType);
+    if (!linkMark2) return;
+    const href = linkMark2.attrs.href;
+    if (!href || !href.startsWith("#")) return;
+    const refId = href.slice(1);
+    if (refId && !existingIds.has(refId)) {
+      broken.push({ from: pos, to: pos + node.nodeSize, refId });
+    }
+  });
+  return broken;
+}
+function hasDuplicateJumpPoints(state) {
+  return findDuplicatePositions(state).length > 0;
+}
+function hasBrokenAnchorRefs(state) {
+  const ids = collectJumpPointIds(state);
+  return findBrokenAnchorRefs(state, ids).length > 0;
+}
+function createJumpPointValidationPlugin() {
+  return {
+    name: "jumpPointValidation",
+    plugins: () => [
+      new Plugin3({
+        key: pluginKey,
+        state: {
+          init(_, state) {
+            return buildDecorations2(state);
+          },
+          apply(tr, oldSet, _oldState, newState) {
+            if (tr.docChanged) {
+              return buildDecorations2(newState);
+            }
+            return oldSet.map(tr.mapping, tr.doc);
+          }
+        },
+        props: {
+          decorations(state) {
+            return pluginKey.getState(state) ?? DecorationSet2.empty;
+          }
+        }
+      })
+    ]
+  };
+}
+function buildDecorations2(state) {
+  const decos = [];
+  const duplicates = findDuplicatePositions(state);
+  for (const { pos, size } of duplicates) {
+    decos.push(
+      Decoration2.node(pos, pos + size, { class: "jump-point-duplicate" }, { jumpPointDuplicate: true })
+    );
+  }
+  const existingIds = collectJumpPointIds(state);
+  const brokenRefs = findBrokenAnchorRefs(state, existingIds);
+  for (const { from, to, refId } of brokenRefs) {
+    decos.push(
+      Decoration2.inline(from, to, {
+        class: "broken-anchor-ref",
+        "data-broken-ref": refId,
+        title: `Anchor "${refId}" no longer exists`,
+        style: "color: #D9352C; text-decoration-color: #D9352C;"
+      })
+    );
+  }
+  if (decos.length === 0) return DecorationSet2.empty;
+  return DecorationSet2.create(state.doc, decos);
+}
+
 // src/ui/plugin/inlineToolTagNodeViewPlugin.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var RESOURCE_TAG_COLORS2 = {
@@ -4340,9 +5207,12 @@ var RESOURCE_TAG_ICONS2 = {
   time_diff: IconTimeDiff
 };
 var DEFAULT_ICON = IconTool;
+var RESOURCE_ID_OVERRIDES = {
+  "close-happy-tiger": { color: "#0D0D0D", icon: IconStop }
+};
 var OUTER_STYLE = {
   display: "inline-flex",
-  padding: "1px",
+  padding: "2px",
   border: "1px solid #CCCCCC",
   borderRadius: "2px",
   alignItems: "center",
@@ -4362,16 +5232,19 @@ var ICON_BLOCK_BASE = {
 };
 var LABEL_BASE = {
   padding: "0 4px",
-  fontSize: "11px",
-  lineHeight: 1,
+  fontSize: "12px",
+  lineHeight: "16px",
   userSelect: "none"
 };
-function InlineToolTagNodeViewComponent({ node }) {
+function InlineToolTagNodeViewComponent({ node, selected }) {
   const type = node.attrs.type;
   const text2 = node.attrs.text;
-  const color = RESOURCE_TAG_COLORS2[type] ?? DEFAULT_COLOR;
-  const Icon = RESOURCE_TAG_ICONS2[type] ?? DEFAULT_ICON;
-  return /* @__PURE__ */ jsxs4("span", { style: OUTER_STYLE, "data-type": type, "data-resource-id": node.attrs.resourceId, children: [
+  const resourceId = node.attrs.resourceId;
+  const override = RESOURCE_ID_OVERRIDES[resourceId];
+  const color = override?.color ?? RESOURCE_TAG_COLORS2[type] ?? DEFAULT_COLOR;
+  const Icon = override?.icon ?? RESOURCE_TAG_ICONS2[type] ?? DEFAULT_ICON;
+  const style = selected ? { ...OUTER_STYLE, boxShadow: `inset 0 0 0 1px ${color}` } : OUTER_STYLE;
+  return /* @__PURE__ */ jsxs4("span", { style, "data-type": type, "data-resource-id": node.attrs.resourceId, children: [
     /* @__PURE__ */ jsx5("span", { style: { ...ICON_BLOCK_BASE, backgroundColor: color }, children: /* @__PURE__ */ jsx5(Icon, { size: 9, fill: "white" }) }),
     /* @__PURE__ */ jsx5("span", { style: { ...LABEL_BASE, color }, children: text2 })
   ] });
@@ -4386,9 +5259,9 @@ function createInlineToolTagNodeViewPlugin() {
 }
 
 // src/ui/plugin/jinjaDecoration.ts
-import { Plugin as Plugin3, PluginKey as PluginKey3 } from "prosemirror-state";
-import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "prosemirror-view";
-var jinjaPluginKey = new PluginKey3("jinjaDecoration");
+import { Plugin as Plugin4, PluginKey as PluginKey4 } from "prosemirror-state";
+import { Decoration as Decoration3, DecorationSet as DecorationSet3 } from "prosemirror-view";
+var jinjaPluginKey = new PluginKey4("jinjaDecoration");
 var JINJA_TAG_RE = /\{%\s*(if|elif|else|endif)\s*([^%]*?)\s*%\}/g;
 function getBlockPositions(doc2) {
   const blocks = [];
@@ -4410,90 +5283,940 @@ function addInlineChipDecorations(doc2, decorations) {
       const to = from + match[0].length;
       const keyword = match[1];
       decorations.push(
-        Decoration2.inline(from, to, {
+        Decoration3.inline(from, to, {
           class: `jinja-chip jinja-chip-${keyword}`
         })
       );
     }
   });
 }
-function addStructureBorderDecorations(doc2, blocks, decorations) {
-  const json = doc2.toJSON();
-  let ast;
-  try {
-    ast = fromProseMirrorJSON(json);
-  } catch {
-    return;
+function addStructureBorderDecorations(doc2, blocks, decorations) {
+  const json = doc2.toJSON();
+  let ast;
+  try {
+    ast = fromProseMirrorJSON(json);
+  } catch {
+    return;
+  }
+  const structures = analyzeJinjaBlocks(ast);
+  for (const structure of structures) {
+    const blockBranchType = /* @__PURE__ */ new Map();
+    for (const branch of structure.branches) {
+      blockBranchType.set(branch.tagBlockIndex, branch.type);
+      for (let i = branch.blockStartIndex; i < branch.blockEndIndex; i++) {
+        if (!blockBranchType.has(i)) {
+          blockBranchType.set(i, branch.type);
+        }
+      }
+    }
+    const lastBranch = structure.branches[structure.branches.length - 1];
+    if (lastBranch && !blockBranchType.has(structure.endifTagBlockIndex)) {
+      blockBranchType.set(structure.endifTagBlockIndex, lastBranch.type);
+    }
+    const first = structure.ifTagBlockIndex;
+    const last = structure.endifTagBlockIndex;
+    for (let i = first; i <= last; i++) {
+      const block = blocks[i];
+      if (!block) continue;
+      const branchType = blockBranchType.get(i) || "if";
+      const prevType = i > first ? blockBranchType.get(i - 1) : void 0;
+      const nextType = i < last ? blockBranchType.get(i + 1) : void 0;
+      const classes = ["jinja-bar", `jinja-bar-${branchType}`];
+      if (i === first || prevType !== branchType) classes.push("jinja-bar-first");
+      if (i === last || nextType !== branchType) classes.push("jinja-bar-last");
+      decorations.push(Decoration3.node(block.from, block.to, { class: classes.join(" ") }));
+    }
+  }
+}
+function hasJinjaTags(doc2) {
+  let found = false;
+  doc2.descendants((node) => {
+    if (found) return false;
+    if (node.isText && node.text.includes("{%")) {
+      found = true;
+      return false;
+    }
+  });
+  return found;
+}
+function buildDecorations3(doc2) {
+  if (!hasJinjaTags(doc2)) return DecorationSet3.empty;
+  const blocks = getBlockPositions(doc2);
+  const decorations = [];
+  addInlineChipDecorations(doc2, decorations);
+  addStructureBorderDecorations(doc2, blocks, decorations);
+  if (decorations.length === 0) return DecorationSet3.empty;
+  return DecorationSet3.create(doc2, decorations);
+}
+function createJinjaDecorationPlugin() {
+  return {
+    name: "jinjaDecoration",
+    plugins: () => [
+      new Plugin4({
+        key: jinjaPluginKey,
+        state: {
+          init(_, state) {
+            return buildDecorations3(state.doc);
+          },
+          apply(tr, oldDecos) {
+            if (!tr.docChanged) return oldDecos;
+            return buildDecorations3(tr.doc);
+          }
+        },
+        props: {
+          decorations(state) {
+            return jinjaPluginKey.getState(state);
+          }
+        }
+      })
+    ]
+  };
+}
+
+// src/ui/plugin/jinjaIfBlockPlugin.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { createRoot as createRoot2 } from "react-dom/client";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var PLACEHOLDER_TEXT = "Describe what AI agent should do when this condition is met";
+var CONDITION_PLACEHOLDER = "Write a condition in natural language";
+var STYLE_ID = "ab-jinja-if-block-styles";
+var JINJA_STYLES = `
+.jinja-if-block {
+  margin: 8px 0;
+}
+
+.jinja-branch {
+  position: relative;
+  display: grid;
+  grid-template-areas:
+    "header"
+    "body"
+    "footer";
+  gap: 0;
+}
+
+.jinja-branch-controls {
+  display: contents;
+}
+
+.jinja-branch-header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  background: #FFFFFF;
+}
+
+.jinja-branch-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.jinja-branch-badge-if,
+.jinja-branch-badge-elif {
+  background: #E7F1FF;
+  color: #0D0D0D;
+}
+
+.jinja-branch-badge-else {
+  background: #F7F7F7;
+  color: #424242;
+}
+
+.jinja-branch-condition {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  color: #0D0D0D;
+  cursor: text;
+  text-align: left;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  white-space: nowrap;
+}
+
+.jinja-branch-condition:focus-visible,
+.jinja-ghost-btn:focus-visible,
+.jinja-popup-item:focus-visible {
+  outline: 2px solid rgba(98, 16, 204, 0.28);
+  outline-offset: 2px;
+}
+
+.jinja-condition-placeholder {
+  color: #A6A6A6;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+}
+
+.jinja-token-variable {
+  color: #4141B2;
+}
+
+.jinja-token-operator {
+  color: #858585;
+}
+
+.jinja-token-value {
+  color: #0D0D0D;
+}
+
+.jinja-token-punctuation {
+  color: #858585;
+}
+
+.jinja-otherwise {
+  flex: 1;
+  color: #858585;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+}
+
+.jinja-branch-actions,
+.jinja-add-footer-actions {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.jinja-branch-body {
+  grid-area: body;
+  display: flex;
+  gap: 12px;
+  padding: 0 8px;
+  min-height: 52px;
+}
+
+.jinja-branch-divider-col {
+  width: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.jinja-branch-divider {
+  width: 1px;
+  background: #E0E0E0;
+}
+
+/* L-shaped divider for the last branch (ELSE) */
+.jinja-branch-last .jinja-branch-divider-col {
+  align-items: flex-start;
+  padding-left: 16px;
+}
+
+.jinja-branch-last .jinja-branch-divider {
+  width: 16px;
+  height: 28px;
+  background: none;
+  border-left: 1px solid #E0E0E0;
+  border-bottom: 1px solid #E0E0E0;
+  border-bottom-left-radius: 8px;
+}
+
+.jinja-branch-content {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  padding: 16px 0;
+}
+
+.jinja-branch-content.jinja-branch-content-empty::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  top: 16px;
+  left: 0;
+  color: #A6A6A6;
+  font-size: 14px;
+  line-height: 20px;
+  pointer-events: none;
+}
+
+.jinja-add-footer {
+  grid-area: footer;
+  display: flex;
+  padding: 8px;
+}
+
+.jinja-add-footer .jinja-add-footer-col {
+  width: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.jinja-ghost-btn {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #858585;
+  cursor: pointer;
+}
+
+.jinja-ghost-btn:hover:not(:disabled) {
+  background: rgba(13, 13, 13, 0.04);
+}
+
+.jinja-ghost-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.jinja-popup-menu {
+  position: absolute;
+  z-index: 20;
+  min-width: 200px;
+  padding: 8px 0;
+  background: #FFFFFF;
+  border-radius: 4px;
+  box-shadow: 0px 8px 10px 0px rgba(13,13,13,0.12), 0px 3px 14px 0px rgba(13,13,13,0.08), 0px 3px 5px 0px rgba(13,13,13,0.04);
+}
+
+.jinja-popup-item {
+  width: 100%;
+  display: block;
+  padding: 6px 16px;
+  border: none;
+  background: transparent;
+  color: #0D0D0D;
+  text-align: left;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.1px;
+}
+
+.jinja-popup-item:hover:not(:disabled) {
+  background: rgba(13, 13, 13, 0.04);
+}
+
+.jinja-popup-item:disabled {
+  color: #A6A6A6;
+  cursor: default;
+}
+
+.jinja-condition-input {
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #0D0D0D;
+  caret-color: #6210CC;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+}
+
+.jinja-condition-input::placeholder {
+  color: #A6A6A6;
+}
+`;
+var StyleManager = class {
+  static refCount = 0;
+  static styleEl = null;
+  static acquire() {
+    if (this.refCount++ > 0) return;
+    const existing = document.getElementById(STYLE_ID);
+    if (existing instanceof HTMLStyleElement) {
+      this.styleEl = existing;
+      return;
+    }
+    this.styleEl = document.createElement("style");
+    this.styleEl.id = STYLE_ID;
+    this.styleEl.textContent = JINJA_STYLES;
+    document.head.appendChild(this.styleEl);
+  }
+  static release() {
+    if (this.refCount === 0) return;
+    if (--this.refCount > 0) return;
+    if (this.styleEl?.parentNode) {
+      this.styleEl.remove();
+    }
+    this.styleEl = null;
+  }
+};
+function getBranchContext(view, nodePos) {
+  try {
+    const { doc: doc2 } = view.state;
+    const resolved = doc2.resolve(nodePos);
+    let blockDepth = -1;
+    for (let depth = resolved.depth; depth >= 0; depth--) {
+      if (resolved.node(depth).type.name === "jinjaIfBlock") {
+        blockDepth = depth;
+        break;
+      }
+    }
+    if (blockDepth < 0) {
+      return null;
+    }
+    const blockNode = resolved.node(blockDepth);
+    const blockPos = blockDepth === 0 ? 0 : resolved.before(blockDepth);
+    let branchOffset = blockPos + 1;
+    for (let index = 0; index < blockNode.childCount; index++) {
+      const branchNode = blockNode.child(index);
+      if (branchOffset === nodePos) {
+        return {
+          blockNode,
+          blockPos,
+          branchNode,
+          branchPos: branchOffset,
+          branchIndex: index
+        };
+      }
+      branchOffset += branchNode.nodeSize;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+function isBranchBodyEmpty(node) {
+  if (node.childCount !== 1) return false;
+  const firstChild = node.firstChild;
+  return firstChild?.type.name === "paragraph" && firstChild.content.size === 0;
+}
+function isBranchNode(node) {
+  return node?.type.name === "jinjaIfBranch";
+}
+function createBranchNode(schema, branchType, condition) {
+  const branchNodeType = schema.nodes.jinjaIfBranch;
+  const paragraphNode = schema.nodes.paragraph?.createAndFill();
+  if (!branchNodeType || !paragraphNode) {
+    return null;
+  }
+  return branchNodeType.create(
+    {
+      branchType,
+      condition: branchType === "else" ? "" : condition
+    },
+    paragraphNode
+  );
+}
+function getLastBranchOfBlock(view, nodePos) {
+  const context = getBranchContext(view, nodePos);
+  if (!context || context.blockNode.childCount === 0) {
+    return null;
+  }
+  const index = context.blockNode.childCount - 1;
+  return {
+    index,
+    node: context.blockNode.child(index)
+  };
+}
+function getLastNonElseBranchIndex(view, nodePos) {
+  const context = getBranchContext(view, nodePos);
+  if (!context) return -1;
+  for (let i = context.blockNode.childCount - 1; i >= 0; i--) {
+    if (context.blockNode.child(i).attrs.branchType !== "else") return i;
+  }
+  return -1;
+}
+function getElseBranch(view, nodePos) {
+  const context = getBranchContext(view, nodePos);
+  if (!context) return false;
+  for (let index = 0; index < context.blockNode.childCount; index++) {
+    if (context.blockNode.child(index).attrs.branchType === "else") {
+      return true;
+    }
+  }
+  return false;
+}
+function deleteBlock(view, blockPos) {
+  const blockNode = view.state.doc.nodeAt(blockPos);
+  if (blockNode?.type.name !== "jinjaIfBlock") {
+    return false;
+  }
+  view.dispatch(view.state.tr.delete(blockPos, blockPos + blockNode.nodeSize).scrollIntoView());
+  view.focus();
+  return true;
+}
+function insertNewBranch(view, nodePos, branchType, condition = "") {
+  const context = getBranchContext(view, nodePos);
+  if (!context) return false;
+  if (context.branchNode.attrs.branchType === "else") return false;
+  const lastBranch = getLastBranchOfBlock(view, nodePos);
+  if (!lastBranch) return false;
+  if (branchType === "else") {
+    if (getElseBranch(view, nodePos)) return false;
+    if (lastBranch.index !== context.branchIndex) return false;
+  }
+  const newBranch = createBranchNode(view.state.schema, branchType, condition);
+  if (!newBranch) return false;
+  const insertPos = context.branchPos + context.branchNode.nodeSize;
+  view.dispatch(view.state.tr.insert(insertPos, newBranch).scrollIntoView());
+  view.focus();
+  return true;
+}
+function deleteBranch(view, nodePos, branchType) {
+  const context = getBranchContext(view, nodePos);
+  if (!context) return false;
+  if (branchType === "if") {
+    if (context.blockNode.childCount === 1) {
+      return deleteBlock(view, context.blockPos);
+    }
+    const nextBranch = context.blockNode.child(context.branchIndex + 1);
+    const promotedCondition = typeof nextBranch.attrs.condition === "string" ? nextBranch.attrs.condition : "";
+    const tr = view.state.tr.delete(context.branchPos, context.branchPos + context.branchNode.nodeSize);
+    tr.setNodeMarkup(context.branchPos, void 0, {
+      ...nextBranch.attrs,
+      branchType: "if",
+      condition: promotedCondition
+    });
+    view.dispatch(tr.scrollIntoView());
+    view.focus();
+    return true;
+  }
+  view.dispatch(view.state.tr.delete(context.branchPos, context.branchPos + context.branchNode.nodeSize).scrollIntoView());
+  view.focus();
+  return true;
+}
+function renderCondition(condition) {
+  const tokens = tokenizeCondition(condition);
+  const rendered = [];
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    rendered.push(
+      /* @__PURE__ */ jsx6("span", { className: `jinja-token-${token.category}`, children: token.text }, `token-${index}-${token.start}`)
+    );
+  }
+  return rendered;
+}
+function ConditionDisplay({
+  branchType,
+  condition,
+  editable = true,
+  onConditionChange
+}) {
+  const [isEditing, setIsEditing] = useState3(false);
+  const [draftValue, setDraftValue] = useState3(condition);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    if (!isEditing) {
+      setDraftValue(condition);
+    }
+  }, [condition, isEditing]);
+  useEffect2(() => {
+    if (isEditing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [isEditing]);
+  if (branchType === "else") {
+    return /* @__PURE__ */ jsx6("span", { className: "jinja-otherwise", children: "Otherwise" });
+  }
+  const commit = () => {
+    setIsEditing(false);
+    if (draftValue !== condition) {
+      onConditionChange(draftValue);
+    }
+  };
+  const cancel = () => {
+    setDraftValue(condition);
+    setIsEditing(false);
+  };
+  if (isEditing && editable) {
+    return /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref: inputRef,
+        className: "jinja-condition-input",
+        value: draftValue,
+        placeholder: CONDITION_PLACEHOLDER,
+        onChange: (event) => setDraftValue(event.target.value),
+        onBlur: commit,
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commit();
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            cancel();
+          }
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      className: "jinja-branch-condition",
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => {
+        if (editable) {
+          setDraftValue(condition);
+          setIsEditing(true);
+        }
+      },
+      children: condition.length > 0 ? renderCondition(condition) : /* @__PURE__ */ jsx6("span", { className: "jinja-condition-placeholder", children: CONDITION_PLACEHOLDER })
+    }
+  );
+}
+function BranchPopupMenu({ items, position }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "jinja-popup-menu",
+      style: {
+        top: position.top,
+        left: position.left,
+        right: position.right
+      },
+      role: "menu",
+      children: items.map((item) => /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: "jinja-popup-item",
+          disabled: item.disabled,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => {
+            if (!item.disabled) {
+              item.onSelect();
+            }
+          },
+          role: "menuitem",
+          children: item.label
+        },
+        item.label
+      ))
+    }
+  );
+}
+function JinjaBranchHeader({
+  branchType,
+  condition,
+  editable = true,
+  onConditionChange,
+  onDelete,
+  onAddBranch,
+  isLastBranch,
+  hasElseBranch
+}) {
+  const [menuSource, setMenuSource] = useState3(null);
+  const kebabRef = useRef2(null);
+  const footerRef = useRef2(null);
+  useEffect2(() => {
+    if (!menuSource) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (kebabRef.current?.contains(target) || footerRef.current?.contains(target)) {
+        return;
+      }
+      setMenuSource(null);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setMenuSource(null);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [menuSource]);
+  const menuItems = [];
+  const isOnlyIfBranch = branchType === "if" && isLastBranch && !hasElseBranch;
+  const canAddElif = editable && branchType !== "else" && (branchType === "elif" || isLastBranch);
+  const canAddElse = editable && branchType !== "else" && isLastBranch && !hasElseBranch;
+  if (canAddElif) {
+    menuItems.push({
+      label: "Else if",
+      onSelect: () => onAddBranch("elif")
+    });
+  }
+  if (canAddElse) {
+    menuItems.push({
+      label: "Else",
+      onSelect: () => onAddBranch("else")
+    });
+  }
+  if (editable) {
+    menuItems.push({
+      label: isOnlyIfBranch ? "Delete all" : "Delete",
+      onSelect: onDelete
+    });
+  }
+  const canOpenFooterMenu = editable && isLastBranch && branchType !== "else";
+  const isMenuOpen = (source) => menuSource === source && menuItems.length > 0;
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "jinja-branch-header", children: [
+      /* @__PURE__ */ jsx6("span", { className: `jinja-branch-badge jinja-branch-badge-${branchType}`, children: branchType === "elif" ? "ELSE IF" : branchType.toUpperCase() }),
+      /* @__PURE__ */ jsx6(
+        ConditionDisplay,
+        {
+          branchType,
+          condition,
+          editable,
+          onConditionChange
+        }
+      ),
+      editable ? /* @__PURE__ */ jsxs5("div", { className: "jinja-branch-actions", ref: kebabRef, children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            className: "jinja-ghost-btn",
+            "aria-label": `${branchType} branch options`,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => {
+              if (menuItems.length > 0) {
+                setMenuSource((current) => current === "kebab" ? null : "kebab");
+              }
+            },
+            children: /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx6("circle", { cx: "8", cy: "3", r: "1.5" }),
+              /* @__PURE__ */ jsx6("circle", { cx: "8", cy: "8", r: "1.5" }),
+              /* @__PURE__ */ jsx6("circle", { cx: "8", cy: "13", r: "1.5" })
+            ] })
+          }
+        ),
+        isMenuOpen("kebab") ? /* @__PURE__ */ jsx6(
+          BranchPopupMenu,
+          {
+            position: { top: 28, right: 0 },
+            items: menuItems.map((item) => ({
+              ...item,
+              onSelect: () => {
+                setMenuSource(null);
+                item.onSelect();
+              }
+            }))
+          }
+        ) : null
+      ] }) : null
+    ] }),
+    isLastBranch ? /* @__PURE__ */ jsx6("div", { className: "jinja-add-footer", children: /* @__PURE__ */ jsx6("div", { className: "jinja-add-footer-col", children: /* @__PURE__ */ jsxs5("div", { className: "jinja-add-footer-actions", ref: footerRef, children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: "jinja-ghost-btn",
+          "aria-label": "Add branch",
+          disabled: !canOpenFooterMenu,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => {
+            if (canOpenFooterMenu && menuItems.length > 0) {
+              setMenuSource((current) => current === "footer" ? null : "footer");
+            }
+          },
+          children: /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsx6("line", { x1: "8", y1: "3", x2: "8", y2: "13" }),
+            /* @__PURE__ */ jsx6("line", { x1: "3", y1: "8", x2: "13", y2: "8" })
+          ] })
+        }
+      ),
+      isMenuOpen("footer") ? /* @__PURE__ */ jsx6(
+        BranchPopupMenu,
+        {
+          position: { top: 28, left: 0 },
+          items: menuItems.filter((item) => item.label === "Else if" || item.label === "Else").map((item) => ({
+            ...item,
+            onSelect: () => {
+              setMenuSource(null);
+              item.onSelect();
+            }
+          }))
+        }
+      ) : null
+    ] }) }) }) : null
+  ] });
+}
+var JinjaIfBlockView = class {
+  dom;
+  contentDOM;
+  constructor() {
+    this.dom = document.createElement("div");
+    this.dom.className = "jinja-if-block";
+    this.dom.setAttribute("data-jinja-if-block", "");
+    this.contentDOM = this.dom;
+    requestAnimationFrame(() => this.notifyChildren());
+  }
+  notifyChildren() {
+    this.dom.querySelectorAll(".jinja-branch").forEach((el) => {
+      el.dispatchEvent(new CustomEvent("jinja-siblings-changed", { bubbles: false }));
+    });
   }
-  const structures = analyzeJinjaBlocks(ast);
-  for (const structure of structures) {
-    const blockBranchType = /* @__PURE__ */ new Map();
-    for (const branch of structure.branches) {
-      blockBranchType.set(branch.tagBlockIndex, branch.type);
-      for (let i = branch.blockStartIndex; i < branch.blockEndIndex; i++) {
-        if (!blockBranchType.has(i)) {
-          blockBranchType.set(i, branch.type);
-        }
-      }
-    }
-    const lastBranch = structure.branches[structure.branches.length - 1];
-    if (lastBranch && !blockBranchType.has(structure.endifTagBlockIndex)) {
-      blockBranchType.set(structure.endifTagBlockIndex, lastBranch.type);
-    }
-    const first = structure.ifTagBlockIndex;
-    const last = structure.endifTagBlockIndex;
-    for (let i = first; i <= last; i++) {
-      const block = blocks[i];
-      if (!block) continue;
-      const branchType = blockBranchType.get(i) || "if";
-      const prevType = i > first ? blockBranchType.get(i - 1) : void 0;
-      const nextType = i < last ? blockBranchType.get(i + 1) : void 0;
-      const classes = ["jinja-bar", `jinja-bar-${branchType}`];
-      if (i === first || prevType !== branchType) classes.push("jinja-bar-first");
-      if (i === last || nextType !== branchType) classes.push("jinja-bar-last");
-      decorations.push(Decoration2.node(block.from, block.to, { class: classes.join(" ") }));
-    }
+  update(node) {
+    if (node.type.name !== "jinjaIfBlock") return false;
+    requestAnimationFrame(() => this.notifyChildren());
+    return true;
   }
-}
-function buildDecorations2(doc2) {
-  const blocks = getBlockPositions(doc2);
-  const decorations = [];
-  addInlineChipDecorations(doc2, decorations);
-  addStructureBorderDecorations(doc2, blocks, decorations);
-  if (decorations.length === 0) return DecorationSet2.empty;
-  return DecorationSet2.create(doc2, decorations);
-}
-function createJinjaDecorationPlugin() {
-  return {
-    name: "jinjaDecoration",
-    plugins: () => [
-      new Plugin3({
-        key: jinjaPluginKey,
-        state: {
-          init(_, state) {
-            return buildDecorations2(state.doc);
+};
+var JinjaIfBranchView = class {
+  dom;
+  contentDOM;
+  headerContainer;
+  root;
+  node;
+  view;
+  getPos;
+  constructor(node, view, getPos) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    StyleManager.acquire();
+    this.dom = document.createElement("div");
+    this.headerContainer = document.createElement("div");
+    const body = document.createElement("div");
+    const dividerColumn = document.createElement("div");
+    const divider = document.createElement("div");
+    this.dom.appendChild(this.headerContainer);
+    this.dom.appendChild(body);
+    this.headerContainer.className = "jinja-branch-controls";
+    this.headerContainer.contentEditable = "false";
+    body.className = "jinja-branch-body";
+    dividerColumn.className = "jinja-branch-divider-col";
+    dividerColumn.contentEditable = "false";
+    divider.className = "jinja-branch-divider";
+    dividerColumn.appendChild(divider);
+    this.contentDOM = document.createElement("div");
+    this.contentDOM.className = "jinja-branch-content";
+    this.contentDOM.setAttribute("data-placeholder", PLACEHOLDER_TEXT);
+    body.appendChild(dividerColumn);
+    body.appendChild(this.contentDOM);
+    this.root = createRoot2(this.headerContainer);
+    this._onSiblingsChanged = () => this.render();
+    this.dom.addEventListener("jinja-siblings-changed", this._onSiblingsChanged);
+    this.syncDOM();
+    this.render();
+  }
+  _onSiblingsChanged = null;
+  syncDOM() {
+    const branchType = this.node.attrs.branchType;
+    this.dom.className = `jinja-branch jinja-branch-${branchType}`;
+    this.dom.setAttribute("data-jinja-branch", "");
+    this.dom.setAttribute("data-branch-type", branchType);
+    this.dom.setAttribute("data-condition", String(this.node.attrs.condition ?? ""));
+    this.contentDOM.classList.toggle("jinja-branch-content-empty", isBranchBodyEmpty(this.node));
+  }
+  render() {
+    const nodePos = this.getPos();
+    if (nodePos == null) return;
+    const lastBranch = getLastBranchOfBlock(this.view, nodePos);
+    const context = getBranchContext(this.view, nodePos);
+    if (!lastBranch || !context) return;
+    const branchType = this.node.attrs.branchType;
+    const condition = String(this.node.attrs.condition ?? "");
+    const isLast = lastBranch.index === context.branchIndex;
+    const lastNonElseIdx = getLastNonElseBranchIndex(this.view, nodePos);
+    const showAddButton = context.branchIndex === lastNonElseIdx;
+    this.dom.classList.toggle("jinja-branch-last", isLast);
+    this.root.render(
+      /* @__PURE__ */ jsx6(
+        JinjaBranchHeader,
+        {
+          branchType,
+          condition,
+          editable: this.view.editable,
+          isLastBranch: showAddButton,
+          hasElseBranch: getElseBranch(this.view, nodePos),
+          onConditionChange: (value) => {
+            const currentPos = this.getPos();
+            if (currentPos == null) return;
+            this.view.dispatch(
+              this.view.state.tr.setNodeMarkup(currentPos, void 0, {
+                ...this.node.attrs,
+                condition: value
+              })
+            );
+            this.view.focus();
           },
-          apply(tr, oldDecos) {
-            if (!tr.docChanged) return oldDecos;
-            return buildDecorations2(tr.doc);
-          }
-        },
-        props: {
-          decorations(state) {
-            return jinjaPluginKey.getState(state);
+          onDelete: () => {
+            const currentPos = this.getPos();
+            if (currentPos == null) return;
+            deleteBranch(this.view, currentPos, branchType);
+          },
+          onAddBranch: (nextBranchType) => {
+            const currentPos = this.getPos();
+            if (currentPos == null) return;
+            insertNewBranch(this.view, currentPos, nextBranchType, "");
           }
         }
-      })
-    ]
+      )
+    );
+  }
+  update(node) {
+    if (!isBranchNode(node)) return false;
+    this.node = node;
+    this.syncDOM();
+    this.render();
+    return true;
+  }
+  stopEvent(event) {
+    const target = event.target;
+    return target != null && this.headerContainer.contains(target);
+  }
+  ignoreMutation(mutation) {
+    return this.headerContainer.contains(mutation.target);
+  }
+  destroy() {
+    if (this._onSiblingsChanged) {
+      this.dom.removeEventListener("jinja-siblings-changed", this._onSiblingsChanged);
+    }
+    StyleManager.release();
+    setTimeout(() => this.root.unmount(), 0);
+  }
+};
+function createJinjaIfBlockPlugin() {
+  return {
+    name: "jinjaIfBlock",
+    nodeViews: () => ({
+      jinjaIfBlock: (() => new JinjaIfBlockView()),
+      jinjaIfBranch: ((node, view, getPos) => new JinjaIfBranchView(node, view, getPos))
+    })
   };
 }
 
 // src/ui/plugin/linkPlugin.ts
 import { InputRule as InputRule2, inputRules as inputRules2 } from "prosemirror-inputrules";
-import { Plugin as Plugin4, PluginKey as PluginKey4, TextSelection as TextSelection2 } from "prosemirror-state";
+import { Plugin as Plugin5, PluginKey as PluginKey5, TextSelection as TextSelection3 } from "prosemirror-state";
 var LINK_INPUT_RE = /\[([^\]]*)\]\(([^)\s]*?)(?:\s+"([^"]*)")?\)$/;
 var LINK_FULL_RE = /^\[([^\]]*)\]\(([^)\s]*?)(?:\s+"([^"]*)")?\)$/;
-var linkEditKey = new PluginKey4("linkEdit");
+var linkEditKey = new PluginKey5("linkEdit");
 function getMarkRange($pos, type) {
   const { parentOffset } = $pos;
   let child = $pos.parent.childAfter(parentOffset);
@@ -4536,12 +6259,12 @@ function explodeLinkToRaw(state) {
   const tr = state.tr;
   tr.replaceWith(from, to, schema.text(rawText));
   const newPos = Math.min(from + rawCursorOffset, tr.doc.content.size);
-  tr.setSelection(TextSelection2.near(tr.doc.resolve(newPos)));
+  tr.setSelection(TextSelection3.near(tr.doc.resolve(newPos)));
   tr.setMeta(linkEditKey, { from, to: from + rawText.length });
   return tr;
 }
 function createLinkEditPlugin() {
-  return new Plugin4({
+  return new Plugin5({
     key: linkEditKey,
     state: {
       init: () => ({ rawRange: null }),
@@ -4611,8 +6334,8 @@ function createLinkInputRule() {
   );
 }
 function createLinkClickPlugin() {
-  return new Plugin4({
-    key: new PluginKey4("linkClick"),
+  return new Plugin5({
+    key: new PluginKey5("linkClick"),
     props: {
       handleDOMEvents: {
         click: (_view, event) => {
@@ -4664,8 +6387,8 @@ function createLinkPlugin() {
 }
 
 // src/ui/plugin/dragHandlePlugin.ts
-import { Plugin as Plugin5, PluginKey as PluginKey5 } from "prosemirror-state";
-var PLUGIN_KEY = new PluginKey5("dragHandle");
+import { Plugin as Plugin6, PluginKey as PluginKey6 } from "prosemirror-state";
+var PLUGIN_KEY = new PluginKey6("dragHandle");
 var GRIP_SVG = `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <circle cx="4" cy="2.5" r="1.2"/><circle cx="8" cy="2.5" r="1.2"/>
   <circle cx="4" cy="6" r="1.2"/><circle cx="8" cy="6" r="1.2"/>
@@ -4682,11 +6405,11 @@ var STYLES = (
   --ab-dh-color-idle: transparent;
   --ab-dh-color-hover: #c4c4c4;
   --ab-dh-color-visible: #8b8b8b;
-  --ab-dh-color-accent: #6366f1;
-  --ab-dh-bg-hover: rgba(0,0,0,0.04);
-  --ab-dh-bg-active: rgba(99,102,241,0.08);
+  --ab-dh-color-accent: rgba(1,156,110,0.8);
+  --ab-dh-bg-hover: rgba(13,13,13,0.04);
+  --ab-dh-bg-active: rgba(13,13,13,0.04);
   --ab-dh-dragging-opacity: 0.4;
-  --ab-dh-handle-size: 22px;
+  --ab-dh-handle-size: 24px;
   --ab-dh-handle-radius: 4px;
   --ab-dh-transition-duration: 0.15s;
 
@@ -4703,15 +6426,19 @@ var STYLES = (
   align-items: center;
   justify-content: center;
   cursor: grab;
-  color: var(--ab-dh-color-idle);
+  color: transparent;
   border-radius: var(--ab-dh-handle-radius);
-  transition: color var(--ab-dh-transition-duration), background var(--ab-dh-transition-duration);
+  transition: color var(--ab-dh-transition-duration), background var(--ab-dh-transition-duration), opacity var(--ab-dh-transition-duration);
   user-select: none;
   pointer-events: auto;
   touch-action: none;
+  opacity: 0;
+  pointer-events: none;
 }
-.ab-drag-handle-layer[data-hover] .ab-drag-handle {
-  color: var(--ab-dh-color-hover);
+.ab-drag-handle.ab-dh-active {
+  opacity: 1;
+  pointer-events: auto;
+  color: var(--ab-dh-color-visible);
 }
 .ab-drag-handle:hover {
   color: var(--ab-dh-color-visible) !important;
@@ -4725,18 +6452,20 @@ var STYLES = (
 .ab-drop-indicator {
   position: absolute;
   left: 0; right: 0;
-  height: 2px;
-  background: var(--ab-dh-color-accent, #6366f1);
-  border-radius: 1px;
+  height: 4px;
+  background: rgba(1,156,110,0.4);
+  border: 1px solid rgba(1,156,110,0.6);
+  border-radius: 12px;
   pointer-events: none;
   z-index: 20;
+  box-sizing: border-box;
   transition: top 60ms ease-out;
 }
 .ab-block-dragging {
   opacity: var(--ab-dh-dragging-opacity, 0.4);
 }
 @keyframes ab-block-flash {
-  from { background: rgba(99,102,241,0.12); }
+  from { background: rgba(1,156,110,0.08); }
   to { background: transparent; }
 }
 .ab-block-just-moved {
@@ -4753,7 +6482,7 @@ var STYLES = (
 }
 `
 );
-var StyleManager = class {
+var StyleManager2 = class {
   static refCount = 0;
   static sheet = null;
   static styleEl = null;
@@ -4880,7 +6609,7 @@ var DragHandleController = class {
   globalCleanup = null;
   constructor(view) {
     this.view = view;
-    StyleManager.acquire();
+    StyleManager2.acquire();
     const parent = view.dom.parentNode;
     const pos = getComputedStyle(parent).position;
     if (pos === "static" || pos === "") parent.style.position = "relative";
@@ -4892,23 +6621,25 @@ var DragHandleController = class {
     this.liveRegion.setAttribute("aria-live", "assertive");
     this.liveRegion.setAttribute("aria-atomic", "true");
     parent.appendChild(this.liveRegion);
-    const onEnter = () => {
-      this.layer.dataset.hover = "1";
-    };
-    const onLeave = () => {
-      if (!this.drag) delete this.layer.dataset.hover;
-    };
-    parent.addEventListener("mouseenter", onEnter);
-    parent.addEventListener("mouseleave", onLeave);
-    this.hoverBound = { enter: onEnter, leave: onLeave };
+    this.hoverBound = { enter: () => {
+    }, leave: () => {
+    } };
     this.scrollContainer = this.findScrollContainer(view.dom);
     this.scrollContainer.addEventListener("scroll", this.onScroll, { passive: true });
     this.resizeObserver = new ResizeObserver(() => this.scheduleUpdate());
     this.resizeObserver.observe(view.dom);
+    if (!view.editable) {
+      this.layer.style.display = "none";
+    }
     this.rebuildHandles();
   }
   update(view, prevState) {
     this.view = view;
+    if (!view.editable) {
+      this.layer.style.display = "none";
+      return;
+    }
+    this.layer.style.display = "";
     if (this.drag) {
       this.pendingUpdate = true;
       return;
@@ -4916,6 +6647,21 @@ var DragHandleController = class {
     if (!view.state.doc.eq(prevState.doc)) {
       this.scheduleUpdate();
     }
+    if (!view.state.selection.eq(prevState.selection) || !view.state.doc.eq(prevState.doc)) {
+      this.updateActiveHandle();
+    }
+  }
+  /** Show only the handle for the block containing the cursor. */
+  updateActiveHandle() {
+    const { $from } = this.view.state.selection;
+    const cursorBlockOffset = $from.start(1) - 1;
+    for (const h of this.handles) {
+      if (h.block.offset === cursorBlockOffset) {
+        h.el.classList.add("ab-dh-active");
+      } else {
+        h.el.classList.remove("ab-dh-active");
+      }
+    }
   }
   destroy() {
     this.cancelDrag();
@@ -4938,7 +6684,7 @@ var DragHandleController = class {
     }
     this.liveRegion.remove();
     this.layer.remove();
-    StyleManager.release();
+    StyleManager2.release();
   }
   // ── Private: update pipeline ──
   scheduleUpdate() {
@@ -5007,6 +6753,7 @@ var DragHandleController = class {
       el.setAttribute("role", "button");
       el.setAttribute("aria-roledescription", "drag handle");
       el.setAttribute("aria-label", `\uBE14\uB85D ${idx + 1} \uC774\uB3D9`);
+      el.setAttribute("title", "Drag to move");
       el.setAttribute("tabindex", "-1");
       el.innerHTML = GRIP_SVG;
       el.style.left = `${handleLeft}px`;
@@ -5017,6 +6764,7 @@ var DragHandleController = class {
     }
     this.handles = newHandles;
     this.prevBlocks = newBlocks;
+    this.updateActiveHandle();
   }
   bindHandleEvents(el, index) {
     let currentIndex = index;
@@ -5087,7 +6835,8 @@ var DragHandleController = class {
       pointerId: e.pointerId,
       startX: e.clientX,
       startY: e.clientY,
-      activated: false
+      activated: false,
+      ghost: null
     };
     this.addGlobalDragListeners(e.pointerId);
   }
@@ -5096,6 +6845,22 @@ var DragHandleController = class {
     this.drag.activated = true;
     this.drag.handle.classList.add("dragging");
     this.drag.blockDom.classList.add("ab-block-dragging");
+    const blockRect = this.drag.blockDom.getBoundingClientRect();
+    const ghost = this.drag.blockDom.cloneNode(true);
+    ghost.className = "ab-drag-ghost";
+    ghost.style.cssText = `
+      position: fixed;
+      top: ${blockRect.top}px;
+      left: ${blockRect.left}px;
+      width: ${blockRect.width}px;
+      opacity: 0.4;
+      pointer-events: none;
+      z-index: 9999;
+      transition: none;
+    `;
+    document.body.appendChild(ghost);
+    this.drag.ghost = ghost;
+    this.drag._ghostOffsetY = this.drag.startY - blockRect.top;
     const parent = this.view.dom.parentNode;
     this.dropIndicator = document.createElement("div");
     this.dropIndicator.className = "ab-drop-indicator";
@@ -5135,6 +6900,10 @@ var DragHandleController = class {
       this.activateDrag();
     }
     this.drag.pointerY = e.clientY;
+    if (this.drag.ghost) {
+      const offsetY = this.drag._ghostOffsetY ?? 0;
+      this.drag.ghost.style.top = `${e.clientY - offsetY}px`;
+    }
     this.updateDropTarget();
   }
   updateDropTarget() {
@@ -5206,6 +6975,10 @@ var DragHandleController = class {
     this.cleaningUp = true;
     this.drag.handle.classList.remove("dragging");
     this.drag.blockDom.classList.remove("ab-block-dragging");
+    if (this.drag.ghost) {
+      this.drag.ghost.remove();
+      this.drag.ghost = null;
+    }
     try {
       this.drag.handle.releasePointerCapture(this.drag.pointerId);
     } catch {
@@ -5289,7 +7062,7 @@ function createDragHandlePlugin() {
     plugins: () => {
       let controller = null;
       return [
-        new Plugin5({
+        new Plugin6({
           key: PLUGIN_KEY,
           view(editorView) {
             controller = new DragHandleController(editorView);
@@ -5411,9 +7184,58 @@ function createTodoNodeViewPlugin() {
   };
 }
 
+// src/ui/plugin/noteBlockPlugin.tsx
+var NoteBlockView = class {
+  dom;
+  contentDOM;
+  constructor(_node, _view, _getPos) {
+    this.dom = document.createElement("div");
+    this.dom.setAttribute("data-note-block", "");
+    this.dom.className = "ab-note-block";
+    this.dom.style.cssText = `
+      position: relative;
+      margin: 8px 0;
+      padding: 12px 16px 12px 16px;
+      background: rgba(0, 0, 0, 0.015);
+      border-top: 1px solid rgba(0, 0, 0, 0.08);
+      color: #999;
+      font-style: italic;
+    `;
+    const label = document.createElement("span");
+    label.contentEditable = "false";
+    label.textContent = "Note";
+    label.style.cssText = `
+      display: inline-block;
+      font-size: 11px;
+      font-weight: 600;
+      font-style: normal;
+      color: #aaa;
+      background: rgba(0, 0, 0, 0.03);
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 3px;
+      padding: 1px 6px;
+      margin-bottom: 6px;
+      user-select: none;
+      line-height: 1.4;
+    `;
+    this.dom.appendChild(label);
+    this.contentDOM = document.createElement("div");
+    this.contentDOM.className = "ab-note-block-content";
+    this.dom.appendChild(this.contentDOM);
+  }
+};
+function createNoteBlockPlugin() {
+  return {
+    name: "noteBlockNodeView",
+    nodeViews: () => ({
+      noteBlock: (node, view, getPos) => new NoteBlockView(node, view, getPos)
+    })
+  };
+}
+
 // src/ui/plugin/slashCommandPlugin.ts
-import { Plugin as Plugin6, PluginKey as PluginKey6 } from "prosemirror-state";
-var slashCommandKey = new PluginKey6("slashCommand");
+import { Plugin as Plugin7, PluginKey as PluginKey7 } from "prosemirror-state";
+var slashCommandKey = new PluginKey7("slashCommand");
 var TRIGGER_RE = /(?:^|\s)(\/[^\s]*)$/;
 function deriveState(state, dismissedFrom) {
   const { selection } = state;
@@ -5436,7 +7258,7 @@ function deriveState(state, dismissedFrom) {
   };
 }
 function createSlashCommandPlugin() {
-  const plugin = new Plugin6({
+  const plugin = new Plugin7({
     key: slashCommandKey,
     state: {
       init(_, state) {
@@ -5480,17 +7302,37 @@ function createSlashCommandPlugin() {
 }
 
 // src/ui/components/SlashCommandMenu.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import React4, { useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function filterItems(items, query) {
   if (!query) return items;
-  const q = query.toLowerCase();
-  return items.filter(
-    ({ title, description }) => title.toLowerCase().includes(q) || (description?.toLowerCase().includes(q) ?? false)
+  const colonIdx = query.indexOf(":");
+  const searchPart = colonIdx >= 0 ? query.slice(colonIdx + 1).trim() : query;
+  if (!searchPart) return items;
+  const words = searchPart.toLowerCase().split(/\s+/);
+  const filtered = items.filter(
+    ({ title, description }) => {
+      const hay = (title + " " + (description ?? "")).toLowerCase();
+      return words.every((w) => hay.includes(w));
+    }
   );
-}
-var POPUP_SHADOW = "0 0 0 1px rgba(0,0,0,0.07), 0 4px 20px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.05)";
+  return filtered.length > 0 ? filtered : items;
+}
+var SCROLLBAR_STYLE_ID = "ab-slash-menu-scrollbar";
+function injectScrollbarStyle() {
+  if (document.getElementById(SCROLLBAR_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SCROLLBAR_STYLE_ID;
+  style.textContent = `
+.ab-slash-menu::-webkit-scrollbar { width: 6px; }
+.ab-slash-menu::-webkit-scrollbar-track { background: transparent; }
+.ab-slash-menu::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 3px; }
+.ab-slash-menu::-webkit-scrollbar-thumb:hover { background: #999; }
+`;
+  document.head.appendChild(style);
+}
+var POPUP_SHADOW = "0 8px 10px rgba(13,13,13,0.12), 0 3px 14px rgba(13,13,13,0.08), 0 3px 5px rgba(13,13,13,0.04)";
 var BTN_RESET = {
   border: "none",
   padding: 0,
@@ -5503,26 +7345,29 @@ var BTN_RESET = {
   width: "100%"
 };
 var VPORT_MARGIN = 8;
-var MENU_WIDTH = 280;
-var MAX_MENU_H = 320;
+var MENU_WIDTH = 440;
+var MAX_MENU_H = 400;
 function SlashCommandMenu({ view, editorState, items }) {
-  const [selectedIndex, setSelectedIndex] = useState2(0);
-  const listRef = useRef2(null);
+  const [selectedIndex, setSelectedIndex] = useState4(0);
+  const listRef = useRef3(null);
+  useLayoutEffect(() => {
+    injectScrollbarStyle();
+  }, []);
   const pluginState = editorState ? slashCommandKey.getState(editorState) : void 0;
   const active = pluginState?.active ?? false;
   const range = pluginState?.range ?? null;
   const query = pluginState?.query ?? "";
   const filtered = filterItems(items, query);
-  useEffect2(() => {
+  useEffect3(() => {
     setSelectedIndex(0);
   }, [query, active]);
-  useEffect2(() => {
+  useEffect3(() => {
     const list = listRef.current;
     if (!list) return;
-    const item = list.children[selectedIndex];
+    const item = list.querySelector(`[data-slash-index="${selectedIndex}"]`);
     item?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!active || !view) return;
     const onKeyDown = (e) => {
       if (e.key === "ArrowDown") {
@@ -5558,9 +7403,10 @@ function SlashCommandMenu({ view, editorState, items }) {
     top = coords.top - MAX_MENU_H - 4;
   }
   return createPortal(
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "div",
       {
+        className: "ab-slash-menu",
         style: {
           position: "fixed",
           top,
@@ -5568,14 +7414,16 @@ function SlashCommandMenu({ view, editorState, items }) {
           width: MENU_WIDTH,
           maxHeight: MAX_MENU_H,
           overflowY: "auto",
+          scrollbarWidth: "thin",
+          scrollbarColor: "#c4c4c4 transparent",
           background: "#fff",
-          borderRadius: 10,
+          borderRadius: 4,
           boxShadow: POPUP_SHADOW,
-          padding: 6,
+          padding: "8px 0",
           zIndex: 1100,
           animation: "ab-float-in 0.12s ease"
         },
-        children: /* @__PURE__ */ jsx6("div", { ref: listRef, children: filtered.length === 0 ? /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7("div", { ref: listRef, children: filtered.length === 0 ? /* @__PURE__ */ jsx7(
           "div",
           {
             style: {
@@ -5585,101 +7433,104 @@ function SlashCommandMenu({ view, editorState, items }) {
             },
             children: "No results"
           }
-        ) : filtered.map((item, i) => /* @__PURE__ */ jsx6(
-          SlashMenuItem,
-          {
-            item,
-            selected: i === selectedIndex,
-            onMouseEnter: () => setSelectedIndex(i),
-            onMouseDown: (e) => {
-              e.preventDefault();
-              if (range) {
-                item.command({ view, range });
-                view.focus();
+        ) : filtered.map((item, i) => {
+          const prevGroup = i > 0 ? filtered[i - 1].group : void 0;
+          const showGroupHeader = item.group && item.group !== prevGroup;
+          return /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
+            showGroupHeader && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+              i > 0 && /* @__PURE__ */ jsx7("div", { style: { height: 1, background: "rgba(0,0,0,0.06)", margin: "4px 10px" } }),
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  style: {
+                    padding: "8px 16px 4px",
+                    fontSize: 13,
+                    fontWeight: 400,
+                    color: "#5e5e5e"
+                  },
+                  children: item.group
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx7(
+              SlashMenuItem,
+              {
+                item,
+                index: i,
+                selected: i === selectedIndex,
+                onMouseEnter: () => setSelectedIndex(i),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  if (range) {
+                    item.command({ view, range });
+                    view.focus();
+                  }
+                }
               }
-            }
-          },
-          item.id ?? item.title
-        )) })
+            )
+          ] }, item.id ?? item.title);
+        }) })
       }
     ),
     document.body
   );
 }
-function SlashMenuItem({ item, selected, onMouseEnter, onMouseDown }) {
-  return /* @__PURE__ */ jsxs5(
+function SlashMenuItem({ item, index, selected, onMouseEnter, onMouseDown }) {
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
+      "data-slash-index": index,
       style: {
         ...BTN_RESET,
         display: "flex",
         alignItems: "center",
-        gap: 10,
-        padding: "7px 10px",
-        borderRadius: 7,
-        background: selected ? "rgba(99,102,241,0.07)" : "transparent",
+        gap: 12,
+        padding: "6px 16px",
+        background: selected ? "rgba(13,13,13,0.04)" : "transparent",
         transition: "background 0.08s"
       },
       onMouseEnter,
       onMouseDown,
       children: [
-        item.icon !== void 0 && /* @__PURE__ */ jsx6(
+        item.icon !== void 0 && /* @__PURE__ */ jsx7("span", { style: { flexShrink: 0, display: "flex", alignItems: "center" }, children: item.icon }),
+        /* @__PURE__ */ jsx7(
           "span",
           {
             style: {
-              width: 28,
-              height: 28,
-              flexShrink: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              borderRadius: 6,
-              background: "rgba(0,0,0,0.04)",
-              fontSize: 13,
-              fontWeight: 700,
-              color: "#6366f1",
-              fontFamily: "monospace"
+              fontSize: 14,
+              fontWeight: 400,
+              color: "#0d0d0d",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              minWidth: 0
             },
-            children: item.icon
+            children: item.title
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { style: { display: "flex", flexDirection: "column", gap: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx6(
-            "span",
-            {
-              style: {
-                fontSize: 13,
-                fontWeight: 500,
-                color: "#171717",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
-              },
-              children: item.title
-            }
-          ),
-          item.description && /* @__PURE__ */ jsx6(
-            "span",
-            {
-              style: {
-                fontSize: 11,
-                color: "#9ca3af",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
-              },
-              children: item.description
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx7("span", { style: { flex: 1 } }),
+        (item.description || item.shortcut) && /* @__PURE__ */ jsx7(
+          "span",
+          {
+            style: {
+              fontSize: 12,
+              color: "#5e5e5e",
+              whiteSpace: "nowrap",
+              flexShrink: 0,
+              textAlign: "right",
+              fontFamily: item.shortcut ? "monospace" : "inherit"
+            },
+            children: item.shortcut ?? item.description
+          }
+        )
       ]
     }
   );
 }
 
 // src/ui/components/JinjaTreeView.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var BRANCH_COLORS = {
   if: "#6366f1",
   elif: "#f59e0b",
@@ -5699,21 +7550,21 @@ function BranchNode({
   const blockCount = branch.blockEndIndex - branch.blockStartIndex;
   const preview = getBlockPreview(doc2, branch.blockStartIndex, branch.blockEndIndex);
   const connector = isLast ? "\u2514\u2500" : "\u251C\u2500";
-  return /* @__PURE__ */ jsxs6("div", { className: "jinja-tree-branch", children: [
-    /* @__PURE__ */ jsxs6("span", { className: "jinja-tree-connector", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "jinja-tree-branch", children: [
+    /* @__PURE__ */ jsxs7("span", { className: "jinja-tree-connector", children: [
       connector,
       " "
     ] }),
-    /* @__PURE__ */ jsxs6("span", { className: "jinja-tree-badge", style: { color, borderColor: color }, children: [
+    /* @__PURE__ */ jsxs7("span", { className: "jinja-tree-badge", style: { color, borderColor: color }, children: [
       "[",
       branch.type,
       "]"
     ] }),
-    branch.condition && /* @__PURE__ */ jsxs6("span", { className: "jinja-tree-condition", children: [
+    branch.condition && /* @__PURE__ */ jsxs7("span", { className: "jinja-tree-condition", children: [
       " ",
       branch.condition
     ] }),
-    /* @__PURE__ */ jsxs6("span", { className: "jinja-tree-meta", children: [
+    /* @__PURE__ */ jsxs7("span", { className: "jinja-tree-meta", children: [
       " ",
       blockCount,
       " block",
@@ -5723,23 +7574,23 @@ function BranchNode({
   ] });
 }
 function StructureNode({ structure, doc: doc2 }) {
-  const [expanded, setExpanded] = useState3(true);
+  const [expanded, setExpanded] = useState5(true);
   const firstBranch = structure.branches[0];
   const label = firstBranch?.condition ? `if ${firstBranch.condition}` : "if";
-  return /* @__PURE__ */ jsxs6("div", { className: "jinja-tree-structure", children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("div", { className: "jinja-tree-structure", children: [
+    /* @__PURE__ */ jsxs7(
       "button",
       {
         className: "jinja-tree-toggle",
         onClick: () => setExpanded(!expanded),
         type: "button",
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "jinja-tree-arrow", children: expanded ? "\u25BC" : "\u25B6" }),
-          /* @__PURE__ */ jsx7("span", { className: "jinja-tree-label", children: label })
+          /* @__PURE__ */ jsx8("span", { className: "jinja-tree-arrow", children: expanded ? "\u25BC" : "\u25B6" }),
+          /* @__PURE__ */ jsx8("span", { className: "jinja-tree-label", children: label })
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsx7("div", { className: "jinja-tree-branches", children: structure.branches.map((branch, i) => /* @__PURE__ */ jsx7(
+    expanded && /* @__PURE__ */ jsx8("div", { className: "jinja-tree-branches", children: structure.branches.map((branch, i) => /* @__PURE__ */ jsx8(
       BranchNode,
       {
         branch,
@@ -5753,16 +7604,182 @@ function StructureNode({ structure, doc: doc2 }) {
 function JinjaTreeView({ doc: doc2, className }) {
   const structures = analyzeJinjaBlocks(doc2);
   if (structures.length === 0) return null;
-  return /* @__PURE__ */ jsx7("div", { className: `jinja-tree ${className || ""}`, children: structures.map((structure) => /* @__PURE__ */ jsx7(StructureNode, { structure, doc: doc2 }, structure.id)) });
+  return /* @__PURE__ */ jsx8("div", { className: `jinja-tree ${className || ""}`, children: structures.map((structure) => /* @__PURE__ */ jsx8(StructureNode, { structure, doc: doc2 }, structure.id)) });
+}
+
+// src/ui/components/DocumentTreeView.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var ICONS = {
+  heading: "H",
+  jumpPoint: "\u2299",
+  jinjaIf: "\u2325",
+  jinjaBranch: "\u2387",
+  resourceTag: "\u229B",
+  noteBlock: "\u270D",
+  endAction: "\u2192"
+};
+var COLORS = {
+  heading: "#333",
+  jumpPoint: "#d97706",
+  jinjaIf: "#6366f1",
+  jinjaBranch: "#8b5cf6",
+  resourceTag: "#059669",
+  noteBlock: "#999",
+  endAction: "#059669"
+};
+function TreeNodeItem({
+  node,
+  onNavigate,
+  depth,
+  selectedPath,
+  onSelect,
+  path
+}) {
+  const [collapsed, setCollapsed] = useState6(false);
+  const hasChildren = node.children.length > 0;
+  const icon = ICONS[node.type] || "\u2022";
+  const color = COLORS[node.type] || "#666";
+  const isSelected = selectedPath === path;
+  const headingLevel = node.meta?.level;
+  const headingLabel = headingLevel ? `H${headingLevel}` : icon;
+  return /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: depth > 0 ? 16 : 0 }, children: [
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: "doc-tree-node",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "3px 6px",
+          borderRadius: 4,
+          cursor: onNavigate ? "pointer" : "default",
+          fontSize: 13,
+          lineHeight: "1.5",
+          background: isSelected ? "rgba(99, 102, 241, 0.1)" : "transparent",
+          transition: "background 0.12s ease"
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          if (hasChildren) setCollapsed(!collapsed);
+          onSelect(path);
+          onNavigate?.(node.blockIndex);
+        },
+        onMouseEnter: (e) => {
+          if (!isSelected) e.currentTarget.style.background = "#f3f4f6";
+        },
+        onMouseLeave: (e) => {
+          if (!isSelected) e.currentTarget.style.background = "transparent";
+        },
+        children: [
+          hasChildren && /* @__PURE__ */ jsx9(
+            "span",
+            {
+              style: {
+                width: 14,
+                textAlign: "center",
+                fontSize: 10,
+                color: "#999",
+                flexShrink: 0,
+                userSelect: "none"
+              },
+              children: collapsed ? "\u25B8" : "\u25BE"
+            }
+          ),
+          !hasChildren && /* @__PURE__ */ jsx9("span", { style: { width: 14, flexShrink: 0 } }),
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 22,
+                height: 18,
+                borderRadius: 3,
+                fontSize: 10,
+                fontWeight: 700,
+                color: isSelected ? "#6366f1" : color,
+                background: isSelected ? "rgba(99, 102, 241, 0.15)" : `${color}11`,
+                border: `1px solid ${isSelected ? "rgba(99, 102, 241, 0.3)" : `${color}33`}`,
+                flexShrink: 0
+              },
+              children: node.type === "heading" ? headingLabel : icon
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: isSelected ? "#6366f1" : node.type === "noteBlock" ? "#999" : node.type === "endAction" ? "#059669" : "#333",
+                fontStyle: node.type === "noteBlock" ? "italic" : "normal",
+                fontWeight: isSelected ? 600 : node.type === "heading" && headingLevel && headingLevel <= 2 ? 600 : 400
+              },
+              children: node.label
+            }
+          ),
+          node.meta?.tagType != null && /* @__PURE__ */ jsx9(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                padding: "1px 5px",
+                borderRadius: 999,
+                background: node.type === "endAction" ? "rgba(5, 150, 105, 0.1)" : "rgba(0, 0, 0, 0.04)",
+                color: node.type === "endAction" ? "#059669" : "#999",
+                fontWeight: 500
+              },
+              children: String(node.meta.tagType)
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && !collapsed && /* @__PURE__ */ jsx9("div", { children: node.children.map((child, i) => /* @__PURE__ */ jsx9(
+      TreeNodeItem,
+      {
+        node: child,
+        onNavigate,
+        depth: depth + 1,
+        selectedPath,
+        onSelect,
+        path: `${path}/${i}`
+      },
+      `${child.type}-${child.blockIndex}-${i}`
+    )) })
+  ] });
+}
+function DocumentTreeView({ doc: doc2, className, onNavigate }) {
+  const tree = buildDocumentTree(doc2);
+  const [selectedPath, setSelectedPath] = useState6(null);
+  if (tree.length === 0) {
+    return /* @__PURE__ */ jsx9("div", { className, style: { color: "#999", fontSize: 13, padding: 16 }, children: "No document structure to display." });
+  }
+  return /* @__PURE__ */ jsx9("div", { className, style: { padding: "8px 0", fontFamily: "Inter, sans-serif" }, children: tree.map((node, i) => /* @__PURE__ */ jsx9(
+    TreeNodeItem,
+    {
+      node,
+      onNavigate,
+      depth: 0,
+      selectedPath,
+      onSelect: setSelectedPath,
+      path: `${i}`
+    },
+    `${node.type}-${node.blockIndex}-${i}`
+  )) });
 }
 
 // src/ui/components/FloatingMenu.tsx
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { setBlockType, toggleMark as toggleMark2, wrapIn } from "prosemirror-commands";
+import { setBlockType as setBlockType2, toggleMark as toggleMark2, wrapIn } from "prosemirror-commands";
 import { wrapInList as wrapInList2 } from "prosemirror-schema-list";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var { paragraph: paragraph2, heading: heading2, bulletList: bulletList3, orderedList: orderedList3, blockquote: blockquote2 } = actionbookSchema.nodes;
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var { paragraph: paragraph3, heading: heading3, bulletList: bulletList3, orderedList: orderedList3, blockquote: blockquote3 } = actionbookSchema.nodes;
 var {
   bold: bold2,
   italic: italic2,
@@ -5784,7 +7801,7 @@ function hasMark(state, type) {
 function activeHeadingLevel(state) {
   const { $from } = state.selection;
   const node = $from.parent;
-  if (node.type === heading2) return node.attrs.level;
+  if (node.type === heading3) return node.attrs.level;
   return null;
 }
 function activeListType(state) {
@@ -5818,7 +7835,7 @@ function currentBlockLabel(state) {
   if (lt === "ordered") return "1. List";
   const { $from } = state.selection;
   for (let d = $from.depth; d > 0; d--) {
-    if ($from.node(d).type === blockquote2) return "Quote";
+    if ($from.node(d).type === blockquote3) return "Quote";
   }
   return "Text";
 }
@@ -5827,7 +7844,7 @@ function emptyBlockCursorPos(state) {
   if (!selection.empty) return null;
   const { $from } = selection;
   const parent = $from.parent;
-  if ((parent.type === paragraph2 || parent.type === heading2) && parent.content.size === 0) {
+  if ((parent.type === paragraph3 || parent.type === heading3) && parent.content.size === 0) {
     return selection.from;
   }
   return null;
@@ -5849,8 +7866,8 @@ var BTN_RESET2 = {
   lineHeight: 1
 };
 function TBtn({ children, active, title, onMouseDown, style }) {
-  const [hover, setHover] = useState4(false);
-  return /* @__PURE__ */ jsx8(
+  const [hover, setHover] = useState7(false);
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       ...{ [FLOAT_ATTR]: "" },
@@ -5881,13 +7898,13 @@ function TBtn({ children, active, title, onMouseDown, style }) {
   );
 }
 function Divider() {
-  return /* @__PURE__ */ jsx8("div", { style: { width: 1, height: 18, background: "rgba(0,0,0,0.07)", margin: "0 2px", flexShrink: 0 } });
+  return /* @__PURE__ */ jsx10("div", { style: { width: 1, height: 18, background: "rgba(0,0,0,0.07)", margin: "0 2px", flexShrink: 0 } });
 }
 function BlockTypeDropdown({ view, state, label }) {
-  const [open, setOpen] = useState4(false);
-  const btnRef = useRef3(null);
-  const [hover, setHover] = useState4(false);
-  useEffect3(() => {
+  const [open, setOpen] = useState7(false);
+  const btnRef = useRef4(null);
+  const [hover, setHover] = useState7(false);
+  useEffect4(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!e.target.closest(`[${FLOAT_ATTR}]`)) {
@@ -5901,19 +7918,19 @@ function BlockTypeDropdown({ view, state, label }) {
   const listType = activeListType(state);
   const items = [
     { label: "Text", shortLabel: "\xB6", active: !headingLevel && !listType, run: () => {
-      setBlockType(paragraph2)(view.state, view.dispatch);
+      setBlockType2(paragraph3)(view.state, view.dispatch);
       view.focus();
     } },
     { label: "Heading 1", shortLabel: "H1", active: headingLevel === 1, run: () => {
-      setBlockType(heading2, { level: 1 })(view.state, view.dispatch);
+      setBlockType2(heading3, { level: 1 })(view.state, view.dispatch);
       view.focus();
     } },
     { label: "Heading 2", shortLabel: "H2", active: headingLevel === 2, run: () => {
-      setBlockType(heading2, { level: 2 })(view.state, view.dispatch);
+      setBlockType2(heading3, { level: 2 })(view.state, view.dispatch);
       view.focus();
     } },
     { label: "Heading 3", shortLabel: "H3", active: headingLevel === 3, run: () => {
-      setBlockType(heading2, { level: 3 })(view.state, view.dispatch);
+      setBlockType2(heading3, { level: 3 })(view.state, view.dispatch);
       view.focus();
     } },
     { label: "Bullet List", shortLabel: "\u2022", active: listType === "bullet", run: () => {
@@ -5935,13 +7952,17 @@ function BlockTypeDropdown({ view, state, label }) {
       view.focus();
     } },
     { label: "Quote", shortLabel: ">", active: false, run: () => {
-      wrapIn(blockquote2)(view.state, view.dispatch);
+      const { $from } = view.state.selection;
+      for (let d = $from.depth; d > 0; d--) {
+        if ($from.node(d).type.name === "listItem") return;
+      }
+      wrapIn(blockquote3)(view.state, view.dispatch);
       view.focus();
     } }
   ];
   const btnRect = btnRef.current?.getBoundingClientRect();
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         ref: btnRef,
@@ -5969,12 +7990,12 @@ function BlockTypeDropdown({ view, state, label }) {
         },
         children: [
           label,
-          /* @__PURE__ */ jsx8("span", { style: { fontSize: 8, opacity: 0.6 }, children: "\u25BE" })
+          /* @__PURE__ */ jsx10("span", { style: { fontSize: 8, opacity: 0.6 }, children: "\u25BE" })
         ]
       }
     ),
     open && btnRect && createPortal2(
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         "div",
         {
           ...{ [FLOAT_ATTR]: "" },
@@ -5990,7 +8011,7 @@ function BlockTypeDropdown({ view, state, label }) {
             minWidth: 168,
             animation: "ab-float-in 0.12s ease"
           },
-          children: items.map((item) => /* @__PURE__ */ jsx8(DropdownItem, { item, onRun: () => setOpen(false) }, item.label))
+          children: items.map((item) => /* @__PURE__ */ jsx10(DropdownItem, { item, onRun: () => setOpen(false) }, item.label))
         }
       ),
       document.body
@@ -5998,8 +8019,8 @@ function BlockTypeDropdown({ view, state, label }) {
   ] });
 }
 function DropdownItem({ item, onRun }) {
-  const [hover, setHover] = useState4(false);
-  return /* @__PURE__ */ jsxs7(
+  const [hover, setHover] = useState7(false);
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       ...{ [FLOAT_ATTR]: "" },
@@ -6026,16 +8047,16 @@ function DropdownItem({ item, onRun }) {
         transition: "background 0.1s"
       },
       children: [
-        /* @__PURE__ */ jsx8("span", { style: { width: 24, flexShrink: 0, textAlign: "center", fontWeight: 700, fontSize: 12, fontFamily: "monospace", color: "#6366f1" }, children: item.shortLabel }),
+        /* @__PURE__ */ jsx10("span", { style: { width: 24, flexShrink: 0, textAlign: "center", fontWeight: 700, fontSize: 12, fontFamily: "monospace", color: "#6366f1" }, children: item.shortLabel }),
         item.label
       ]
     }
   );
 }
 function SelectionToolbar({ view, state, selectionRect }) {
-  const [linkMode, setLinkMode] = useState4(false);
-  const [linkHref, setLinkHref] = useState4("");
-  const inputRef = useRef3(null);
+  const [linkMode, setLinkMode] = useState7(false);
+  const [linkHref, setLinkHref] = useState7("");
+  const inputRef = useRef4(null);
   const isBold = hasMark(state, bold2);
   const isItalic = hasMark(state, italic2);
   const isUnderline = hasMark(state, underline2);
@@ -6050,7 +8071,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
   if (top < VPORT_MARGIN2) top = selectionRect.bottom + TOOLBAR_GAP;
   left = Math.max(VPORT_MARGIN2, Math.min(left, window.innerWidth - toolbarW - VPORT_MARGIN2));
   top = Math.max(VPORT_MARGIN2, Math.min(top, window.innerHeight - toolbarH - VPORT_MARGIN2));
-  const run = useCallback2(
+  const run = useCallback3(
     (cmd) => {
       cmd(view.state, view.dispatch);
       view.focus();
@@ -6087,10 +8108,10 @@ function SelectionToolbar({ view, state, selectionRect }) {
     view.dispatch(view.state.tr.removeMark(from, to, linkMark));
     view.focus();
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
-      ...{ [FLOAT_ATTR]: "" },
+      ...{ [FLOAT_ATTR]: "selection-toolbar" },
       style: {
         position: "fixed",
         left,
@@ -6110,9 +8131,9 @@ function SelectionToolbar({ view, state, selectionRect }) {
       },
       children: linkMode ? (
         /* ── Link input mode ── */
-        /* @__PURE__ */ jsxs7(Fragment2, { children: [
-          /* @__PURE__ */ jsx8("span", { style: { fontSize: 13, color: "#9ca3af", paddingLeft: 4, flexShrink: 0 }, children: "\u2197" }),
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx10("span", { style: { fontSize: 13, color: "#9ca3af", paddingLeft: 4, flexShrink: 0 }, children: "\u2197" }),
+          /* @__PURE__ */ jsx10(
             "input",
             {
               ref: inputRef,
@@ -6143,7 +8164,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               title: "Apply (Enter)",
@@ -6155,7 +8176,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "\u21B5"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               title: "Cancel (Esc)",
@@ -6171,8 +8192,8 @@ function SelectionToolbar({ view, state, selectionRect }) {
         ] })
       ) : (
         /* ── Normal toolbar mode ── */
-        /* @__PURE__ */ jsxs7(Fragment2, { children: [
-          /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isBold,
@@ -6182,7 +8203,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "B"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isItalic,
@@ -6192,7 +8213,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "I"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isUnderline,
@@ -6202,7 +8223,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "U"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isStrike,
@@ -6212,7 +8233,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "S"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isCode,
@@ -6222,7 +8243,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "`\xB7`"
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isLink,
@@ -6232,8 +8253,8 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "\u2197"
             }
           ),
-          /* @__PURE__ */ jsx8(Divider, {}),
-          /* @__PURE__ */ jsx8(BlockTypeDropdown, { view, state, label: blockLabel })
+          /* @__PURE__ */ jsx10(Divider, {}),
+          /* @__PURE__ */ jsx10(BlockTypeDropdown, { view, state, label: blockLabel })
         ] })
       )
     }
@@ -6244,7 +8265,7 @@ var BLOCK_ITEMS = [
     shortLabel: "\xB6",
     label: "Text",
     run: (v) => {
-      setBlockType(paragraph2)(v.state, v.dispatch);
+      setBlockType2(paragraph3)(v.state, v.dispatch);
       v.focus();
     }
   },
@@ -6252,7 +8273,7 @@ var BLOCK_ITEMS = [
     shortLabel: "H1",
     label: "Heading 1",
     run: (v) => {
-      setBlockType(heading2, { level: 1 })(v.state, v.dispatch);
+      setBlockType2(heading3, { level: 1 })(v.state, v.dispatch);
       v.focus();
     }
   },
@@ -6260,7 +8281,7 @@ var BLOCK_ITEMS = [
     shortLabel: "H2",
     label: "Heading 2",
     run: (v) => {
-      setBlockType(heading2, { level: 2 })(v.state, v.dispatch);
+      setBlockType2(heading3, { level: 2 })(v.state, v.dispatch);
       v.focus();
     }
   },
@@ -6268,7 +8289,7 @@ var BLOCK_ITEMS = [
     shortLabel: "H3",
     label: "Heading 3",
     run: (v) => {
-      setBlockType(heading2, { level: 3 })(v.state, v.dispatch);
+      setBlockType2(heading3, { level: 3 })(v.state, v.dispatch);
       v.focus();
     }
   },
@@ -6303,7 +8324,7 @@ var BLOCK_ITEMS = [
     shortLabel: "\u275D",
     label: "Quote",
     run: (v) => {
-      wrapIn(blockquote2)(v.state, v.dispatch);
+      wrapIn(blockquote3)(v.state, v.dispatch);
       v.focus();
     }
   },
@@ -6323,7 +8344,7 @@ var BLOCK_ITEMS = [
   }
 ];
 function EmptyParaHandle({ view, cursorPos }) {
-  const [menuOpen, setMenuOpen] = useState4(false);
+  const [menuOpen, setMenuOpen] = useState7(false);
   const coords = view.coordsAtPos(cursorPos);
   const lineH = Math.max(coords.bottom - coords.top, 18);
   const btnSize = 22;
@@ -6331,7 +8352,7 @@ function EmptyParaHandle({ view, cursorPos }) {
   const btnTop = coords.top + (lineH - btnSize) / 2;
   const menuLeft = Math.max(VPORT_MARGIN2, btnLeft);
   const menuTop = btnTop + btnSize + 4;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!menuOpen) return;
     const onDown = (e) => {
       if (!e.target.closest(`[${FLOAT_ATTR}]`)) {
@@ -6341,8 +8362,8 @@ function EmptyParaHandle({ view, cursorPos }) {
     document.addEventListener("mousedown", onDown, true);
     return () => document.removeEventListener("mousedown", onDown, true);
   }, [menuOpen]);
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx10(
       "button",
       {
         ...{ [FLOAT_ATTR]: "" },
@@ -6374,7 +8395,7 @@ function EmptyParaHandle({ view, cursorPos }) {
         children: "+"
       }
     ),
-    menuOpen && /* @__PURE__ */ jsx8(
+    menuOpen && /* @__PURE__ */ jsx10(
       "div",
       {
         ...{ [FLOAT_ATTR]: "" },
@@ -6390,7 +8411,7 @@ function EmptyParaHandle({ view, cursorPos }) {
           minWidth: 168,
           animation: "ab-float-in 0.12s ease"
         },
-        children: BLOCK_ITEMS.map((item) => /* @__PURE__ */ jsx8(
+        children: BLOCK_ITEMS.map((item) => /* @__PURE__ */ jsx10(
           BlockMenuItem,
           {
             item,
@@ -6408,8 +8429,8 @@ function BlockMenuItem({
   view,
   onRun
 }) {
-  const [hover, setHover] = useState4(false);
-  return /* @__PURE__ */ jsxs7(
+  const [hover, setHover] = useState7(false);
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       ...{ [FLOAT_ATTR]: "" },
@@ -6435,7 +8456,7 @@ function BlockMenuItem({
         transition: "background 0.1s"
       },
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10(
           "span",
           {
             style: {
@@ -6456,11 +8477,11 @@ function BlockMenuItem({
   );
 }
 function FloatingMenu({ view, editorState }) {
-  const [showEmptyHandle, setShowEmptyHandle] = useState4(false);
-  const dwellTimerRef = useRef3(null);
-  const lastEmptyPosRef = useRef3(null);
-  const [, setScrollTick] = useState4(0);
-  useEffect3(() => {
+  const [showEmptyHandle, setShowEmptyHandle] = useState7(false);
+  const dwellTimerRef = useRef4(null);
+  const lastEmptyPosRef = useRef4(null);
+  const [, setScrollTick] = useState7(0);
+  useEffect4(() => {
     const editorDom = view?.dom;
     if (!editorDom) return;
     const container = editorDom.closest(".editor-shell") ?? editorDom.parentElement;
@@ -6469,7 +8490,7 @@ function FloatingMenu({ view, editorState }) {
     container.addEventListener("scroll", onScroll, { passive: true });
     return () => container.removeEventListener("scroll", onScroll);
   }, [view]);
-  useEffect3(() => {
+  useEffect4(() => {
     const id = "ab-float-keyframes";
     if (document.getElementById(id)) return;
     const style = document.createElement("style");
@@ -6499,8 +8520,8 @@ function FloatingMenu({ view, editorState }) {
   }
   const selectionRect = hasSelection ? getSelectionDOMRect() : null;
   return createPortal2(
-    /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      hasSelection && selectionRect && /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      hasSelection && selectionRect && /* @__PURE__ */ jsx10(
         SelectionToolbar,
         {
           view,
@@ -6508,23 +8529,23 @@ function FloatingMenu({ view, editorState }) {
           selectionRect
         }
       ),
-      !hasSelection && showEmptyHandle && emptyPos !== null && /* @__PURE__ */ jsx8(EmptyParaHandle, { view, cursorPos: emptyPos })
+      !hasSelection && showEmptyHandle && emptyPos !== null && /* @__PURE__ */ jsx10(EmptyParaHandle, { view, cursorPos: emptyPos })
     ] }),
     document.body
   );
 }
 
 // src/ui/plugin/inlineSuggestPlugin.ts
-import { Plugin as Plugin7, PluginKey as PluginKey7 } from "prosemirror-state";
-import { Decoration as Decoration3, DecorationSet as DecorationSet3 } from "prosemirror-view";
-var inlineSuggestKey = new PluginKey7("inlineSuggest");
+import { Plugin as Plugin8, PluginKey as PluginKey8 } from "prosemirror-state";
+import { Decoration as Decoration4, DecorationSet as DecorationSet4 } from "prosemirror-view";
+var inlineSuggestKey = new PluginKey8("inlineSuggest");
 var DEBOUNCE_MS = 600;
 function createInlineSuggestPlugin(provider, endpoint, options) {
   const { onContextChange } = options ?? {};
   return {
     name: "inlineSuggest",
     plugins: () => [
-      new Plugin7({
+      new Plugin8({
         key: inlineSuggestKey,
         state: {
           init: () => ({ suggestion: null, anchorPos: null }),
@@ -6540,13 +8561,13 @@ function createInlineSuggestPlugin(provider, endpoint, options) {
         props: {
           decorations(state) {
             const ps = inlineSuggestKey.getState(state);
-            if (!ps?.suggestion || !state.selection.empty) return DecorationSet3.empty;
+            if (!ps?.suggestion || !state.selection.empty) return DecorationSet4.empty;
             const ghost = document.createElement("span");
             ghost.textContent = ps.suggestion;
             ghost.style.cssText = "color: rgba(0,0,0,0.3); pointer-events: none; user-select: none;";
             ghost.setAttribute("aria-hidden", "true");
-            return DecorationSet3.create(state.doc, [
-              Decoration3.widget(state.selection.from, ghost, {
+            return DecorationSet4.create(state.doc, [
+              Decoration4.widget(state.selection.from, ghost, {
                 side: 1,
                 key: "inline-suggest"
               })
@@ -6677,6 +8698,7 @@ function createInlineSuggestPlugin(provider, endpoint, options) {
 }
 export {
   ActionbookRenderer,
+  DocumentTreeView,
   EditorShell,
   FloatingMenu,
   JUMP_POINT_ADJACENT_SPEC,
@@ -6687,19 +8709,25 @@ export {
   convertBlock2 as convertBlock,
   convertInline2 as convertInline,
   createDragHandlePlugin,
+  createHistoryPlugin,
   createInlineSuggestPlugin,
   createInlineToolTagNodeViewPlugin,
   createInputRulesPlugin,
   createJinjaDecorationPlugin,
+  createJinjaIfBlockPlugin,
   createJumpPointAdjacentPlugin,
   createJumpPointNodeViewPlugin,
+  createJumpPointValidationPlugin,
   createKeymapPlugin,
   createLinkPlugin,
   createMarkdownClipboardPlugin,
+  createNoteBlockPlugin,
   createPluginArray,
   createReactNodeView,
   createSlashCommandPlugin,
   createTodoNodeViewPlugin,
+  hasBrokenAnchorRefs,
+  hasDuplicateJumpPoints,
   inlineSuggestKey,
   slashCommandKey,
   toProseMirrorJSON,