@sendbird/actionbook-core 0.8.1 → 0.9.3

package/dist/ui/index.js

@@ -32,12 +32,9 @@ var actionbookSchema = new Schema({
     bulletList: {
       content: "listItem+",
       group: "block",
-      parseDOM: [
-        { tag: "div.ab-bullet-list" },
-        { tag: "ul" }
-      ],
+      parseDOM: [{ tag: "ul" }],
       toDOM() {
-        return ["div", { class: "ab-bullet-list", role: "list" }, 0];
+        return ["ul", 0];
       }
     },
     orderedList: {
@@ -45,12 +42,6 @@ var actionbookSchema = new Schema({
       group: "block",
       attrs: { start: { default: 1 } },
       parseDOM: [
-        {
-          tag: "div.ab-ordered-list",
-          getAttrs(dom) {
-            return { start: Number(dom.dataset.start) || 1 };
-          }
-        },
         {
           tag: "ol",
           getAttrs(dom) {
@@ -59,25 +50,13 @@ var actionbookSchema = new Schema({
         }
       ],
       toDOM(node) {
-        const attrs = { class: "ab-ordered-list", role: "list" };
-        if (node.attrs.start !== 1) attrs["data-start"] = String(node.attrs.start);
-        return ["div", attrs, 0];
+        return node.attrs.start === 1 ? ["ol", 0] : ["ol", { start: node.attrs.start }, 0];
       }
     },
     listItem: {
       content: "block+",
       attrs: { checked: { default: null } },
       parseDOM: [
-        {
-          tag: "div.ab-list-item",
-          getAttrs(dom) {
-            const el = dom;
-            if (el.dataset.checked != null) {
-              return { checked: el.dataset.checked === "true" };
-            }
-            return { checked: null };
-          }
-        },
         {
           tag: "li",
           getAttrs(dom) {
@@ -94,12 +73,10 @@ var actionbookSchema = new Schema({
         }
       ],
       toDOM(node) {
-        const attrs = { class: "ab-list-item", role: "listitem" };
         if (node.attrs.checked != null) {
-          attrs.class = "ab-list-item todo-item";
-          attrs["data-checked"] = String(node.attrs.checked);
+          return ["li", { class: "todo-item", "data-checked": String(node.attrs.checked) }, 0];
         }
-        return ["div", attrs, 0];
+        return ["li", 0];
       },
       defining: true
     },
@@ -119,22 +96,25 @@ var actionbookSchema = new Schema({
       defining: true,
       marks: "",
       attrs: { language: { default: null } },
-      parseDOM: [
-        {
-          tag: "pre",
-          preserveWhitespace: "full",
-          getAttrs(dom) {
-            const code3 = dom.querySelector("code");
-            return { language: code3?.getAttribute("data-language") || null };
-          }
+      parseDOM: [{
+        tag: "pre",
+        preserveWhitespace: "full",
+        getAttrs(dom) {
+          return { language: dom.getAttribute("data-language") || null };
         }
-      ],
+      }],
       toDOM(node) {
-        const attrs = {};
-        if (node.attrs.language) attrs["data-language"] = node.attrs.language;
-        return ["pre", ["code", attrs, 0]];
+        return ["pre", { "data-language": node.attrs.language || void 0 }, ["code", 0]];
+      }
+    },
+    horizontalRule: {
+      group: "block",
+      parseDOM: [{ tag: "hr" }],
+      toDOM() {
+        return ["hr"];
       }
     },
+    // ── Jinja conditional block ──
     jinjaIfBlock: {
       content: "jinjaIfBranch+",
       group: "block",
@@ -151,6 +131,7 @@ var actionbookSchema = new Schema({
       defining: true,
       attrs: {
         branchType: { default: "if" },
+        // 'if' | 'elif' | 'else'
         condition: { default: "" }
       },
       parseDOM: [
@@ -178,11 +159,14 @@ var actionbookSchema = new Schema({
         ];
       }
     },
-    horizontalRule: {
+    noteBlock: {
+      content: "block+",
       group: "block",
-      parseDOM: [{ tag: "hr" }],
+      defining: true,
+      isolating: true,
+      parseDOM: [{ tag: "div[data-note-block]" }],
       toDOM() {
-        return ["hr"];
+        return ["div", { "data-note-block": "", class: "ab-note-block" }, 0];
       }
     },
     // ── Table nodes ──
@@ -472,6 +456,205 @@ function createPluginArray(plugins) {
 // src/ui/components/ActionbookRenderer.tsx
 import React from "react";
 
+// 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]
+    });
+  }
+  return highlighted;
+}
+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;
+        }
+        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;
+    }
+    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/ui/components/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function IconTool({ size = 16, fill = "currentColor", style }) {
@@ -578,6 +761,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",
@@ -753,27 +942,193 @@ function renderInline(node, key2, renderNode) {
 function renderInlineContent(content, keyPrefix, renderNode) {
   return content.map((node, i) => renderInline(node, `${keyPrefix}-${i}`, renderNode));
 }
-function renderBlock(node, key2, renderNode) {
-  const defaultRender = () => {
-    switch (node.type) {
-      case "paragraph":
-        return /* @__PURE__ */ jsx2("p", { children: renderInlineContent(node.content, key2, renderNode) }, key2);
-      case "heading": {
-        const Tag = `h${node.level}`;
-        return /* @__PURE__ */ jsx2(Tag, { children: renderInlineContent(node.content, key2, renderNode) }, key2);
-      }
-      case "bulletList":
-        return /* @__PURE__ */ jsx2("ul", { children: node.content.map((item, i) => renderBlock(item, `${key2}-${i}`, renderNode)) }, key2);
-      case "orderedList":
-        return /* @__PURE__ */ jsx2("ol", { start: node.start !== 1 ? node.start : void 0, children: node.content.map((item, i) => renderBlock(item, `${key2}-${i}`, renderNode)) }, key2);
-      case "listItem":
-        if (node.checked != null) {
-          return /* @__PURE__ */ jsxs2("li", { style: { display: "flex", alignItems: "flex-start", listStyle: "none" }, children: [
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "checkbox",
-                checked: node.checked,
+var JINJA_RENDERER_STYLE_ID = "ab-renderer-jinja-styles";
+var JINJA_RENDERER_STYLES = `
+.ab-r-jinja-block {
+  margin: 8px 0;
+}
+
+.ab-r-jinja-branch {
+  position: relative;
+}
+
+.ab-r-jinja-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  background: #FFFFFF;
+}
+
+.ab-r-jinja-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;
+}
+
+.ab-r-jinja-badge-if,
+.ab-r-jinja-badge-elif {
+  background: #E7F1FF;
+  color: #0D0D0D;
+}
+
+.ab-r-jinja-badge-else {
+  background: #F7F7F7;
+  color: #424242;
+}
+
+.ab-r-jinja-condition {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: #0D0D0D;
+}
+
+.ab-r-jinja-otherwise {
+  flex: 1;
+  color: #858585;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+}
+
+.ab-r-jinja-body {
+  display: flex;
+  gap: 12px;
+  padding: 0 8px;
+  min-height: 32px;
+}
+
+.ab-r-jinja-divider-col {
+  width: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.ab-r-jinja-divider {
+  width: 1px;
+  background: #E0E0E0;
+}
+
+.ab-r-jinja-branch-last .ab-r-jinja-divider-col {
+  align-items: flex-start;
+  padding-left: 16px;
+}
+
+.ab-r-jinja-branch-last .ab-r-jinja-divider {
+  width: 16px;
+  height: 28px;
+  background: none;
+  border-left: 1px solid #E0E0E0;
+  border-bottom: 1px solid #E0E0E0;
+  border-bottom-left-radius: 8px;
+}
+
+.ab-r-jinja-content {
+  flex: 1;
+  min-width: 0;
+  padding: 12px 0;
+}
+
+.ab-r-jinja-token-variable { color: #4141B2; }
+.ab-r-jinja-token-operator { color: #858585; }
+.ab-r-jinja-token-value { color: #0D0D0D; }
+.ab-r-jinja-token-punctuation { color: #858585; }
+`;
+var jinjaRendererStyleRefCount = 0;
+var jinjaRendererStyleEl = null;
+function ensureJinjaRendererStyles() {
+  if (jinjaRendererStyleRefCount++ > 0) return;
+  if (typeof document === "undefined") return;
+  const existing = document.getElementById(JINJA_RENDERER_STYLE_ID);
+  if (existing instanceof HTMLStyleElement) {
+    jinjaRendererStyleEl = existing;
+    return;
+  }
+  jinjaRendererStyleEl = document.createElement("style");
+  jinjaRendererStyleEl.id = JINJA_RENDERER_STYLE_ID;
+  jinjaRendererStyleEl.textContent = JINJA_RENDERER_STYLES;
+  document.head.appendChild(jinjaRendererStyleEl);
+}
+function renderConditionTokens(condition) {
+  const tokens = tokenizeCondition(condition);
+  return tokens.map((token, i) => /* @__PURE__ */ jsx2("span", { className: `ab-r-jinja-token-${token.category}`, children: token.text }, `t-${i}-${token.start}`));
+}
+function renderJinjaBranch(branch, key2, isLast, renderNode) {
+  const branchType = branch.branchType;
+  const badgeLabel = branchType === "elif" ? "ELSE IF" : branchType.toUpperCase();
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `ab-r-jinja-branch${isLast ? " ab-r-jinja-branch-last" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "ab-r-jinja-header", children: [
+          /* @__PURE__ */ jsx2("span", { className: `ab-r-jinja-badge ab-r-jinja-badge-${branchType}`, children: badgeLabel }),
+          branchType === "else" ? /* @__PURE__ */ jsx2("span", { className: "ab-r-jinja-otherwise", children: "otherwise" }) : /* @__PURE__ */ jsx2("span", { className: "ab-r-jinja-condition", children: branch.condition ? renderConditionTokens(branch.condition) : null })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "ab-r-jinja-body", children: [
+          /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-divider-col", children: /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-divider" }) }),
+          /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-content", children: branch.content.map((child, i) => renderBlock(child, `${key2}-c${i}`, renderNode)) })
+        ] })
+      ]
+    },
+    key2
+  );
+}
+function renderJinjaIfBlock(node, key2, renderNode) {
+  ensureJinjaRendererStyles();
+  return /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-block", children: node.branches.map(
+    (branch, i) => renderJinjaBranch(
+      branch,
+      `${key2}-b${i}`,
+      i === node.branches.length - 1,
+      renderNode
+    )
+  ) }, key2);
+}
+function renderBlock(node, key2, renderNode) {
+  const defaultRender = () => {
+    switch (node.type) {
+      case "paragraph":
+        return /* @__PURE__ */ jsx2("p", { children: renderInlineContent(node.content, key2, renderNode) }, key2);
+      case "heading": {
+        const Tag = `h${node.level}`;
+        return /* @__PURE__ */ jsx2(Tag, { children: renderInlineContent(node.content, key2, renderNode) }, key2);
+      }
+      case "bulletList":
+        return /* @__PURE__ */ jsx2("ul", { children: node.content.map((item, i) => renderBlock(item, `${key2}-${i}`, renderNode)) }, key2);
+      case "orderedList":
+        return /* @__PURE__ */ jsx2("ol", { start: node.start !== 1 ? node.start : void 0, children: node.content.map((item, i) => renderBlock(item, `${key2}-${i}`, renderNode)) }, key2);
+      case "listItem":
+        if (node.checked != null) {
+          return /* @__PURE__ */ jsxs2("li", { style: { display: "flex", alignItems: "flex-start", listStyle: "none" }, children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "checkbox",
+                checked: node.checked,
                 readOnly: true,
                 style: { marginRight: 6, marginTop: 4, flexShrink: 0 }
               }
@@ -784,6 +1139,8 @@ function renderBlock(node, key2, renderNode) {
         return /* @__PURE__ */ jsx2("li", { children: node.content.map((child, i) => renderBlock(child, `${key2}-${i}`, renderNode)) }, key2);
       case "blockquote":
         return /* @__PURE__ */ jsx2("blockquote", { children: node.content.map((child, i) => renderBlock(child, `${key2}-${i}`, renderNode)) }, key2);
+      case "jinjaIfBlock":
+        return renderJinjaIfBlock(node, key2, renderNode);
       case "horizontalRule":
         return /* @__PURE__ */ jsx2("hr", {}, key2);
       case "table":
@@ -816,21 +1173,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;
@@ -839,14 +1199,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) {
@@ -875,7 +1236,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
@@ -884,9 +1245,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":
@@ -925,12 +1296,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
         }
       ];
     }
@@ -961,20 +1337,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)
         }
       ];
     }
@@ -985,6 +1368,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) => {
@@ -1001,6 +1390,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));
@@ -1012,11 +1417,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;
   }
@@ -1580,7 +1985,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;
@@ -1743,10 +2148,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;
@@ -1755,6 +2161,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) => ({
@@ -1795,7 +2205,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 };
   }
@@ -1894,31 +2308,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 = [];
@@ -1942,14 +2364,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;
@@ -1982,12 +2408,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,
@@ -1999,11 +2433,13 @@ function serializeToMarkdown(doc2) {
     ],
     handlers: {
       text: textHandler,
+      link: linkHandler,
       ...resourceTagToMarkdown().handlers,
       ...jumpPointToMarkdown().handlers
     },
     extensions: [gfmNoAutolinkToMarkdown()]
   });
+  let result = raw.replace(/^(\s*)\\>/gm, "$1&gt;").replace(/(\S) *>/g, (match, pre) => `${pre} &gt;`).replace(/\\\[([^\]]*)\]/g, "\\[$1\\]").replace(/&#x20;/g, " ");
   return result;
 }
 
@@ -2087,20 +2523,23 @@ function convertInline2(node) {
 }
 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));
-      }
-    }
-    result.push({ type: "paragraph", content: [{ type: "text", text: "{% endif %}" }] });
-    return result;
+    return [convertJinjaIfBlock(node)];
   }
   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) {
   switch (node.type) {
     case "paragraph":
@@ -2142,6 +2581,19 @@ function convertBlock2(node) {
       };
     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",
@@ -2153,19 +2605,8 @@ function convertBlock2(node) {
           }))
         }))
       };
-    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));
-        }
-      }
-      result.push({ type: "paragraph", content: [{ type: "text", text: "{% endif %}" }] });
-      return result[0] ?? { type: "paragraph", content: [] };
-    }
+    case "jinjaIfBlock":
+      return convertJinjaIfBlock(node);
     default:
       return assertNever(node);
   }
@@ -2197,16 +2638,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,
@@ -2223,10 +2678,6 @@ function useEditorView(config) {
     });
     viewInstanceRef.current = view;
     forceUpdate((n) => n + 1);
-    return () => {
-      view.destroy();
-      viewInstanceRef.current = null;
-    };
   }, []);
   const getAST = useCallback(() => {
     const view = viewInstanceRef.current;
@@ -2244,6 +2695,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(() => {
@@ -2253,9 +2705,11 @@ function useEditorView(config) {
     viewInstanceRef.current?.destroy();
     viewInstanceRef.current = null;
   }, []);
+  const getView = useCallback(() => viewInstanceRef.current, []);
   return {
     viewRef,
     view: viewInstanceRef.current,
+    getView,
     getAST,
     getMarkdown,
     setContent,
@@ -2264,20 +2718,16 @@ function useEditorView(config) {
   };
 }
 
-// src/ui/plugin/historyPlugin.ts
-import { history } from "prosemirror-history";
-function createHistoryPlugin() {
-  return {
-    name: "history",
-    plugins: () => [history()]
-  };
-}
-
 // 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 = /(?:^|[^*])\*([^*]+)\*$/;
@@ -2288,11 +2738,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;
   });
 }
@@ -2301,12 +2754,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] !== " ";
@@ -2316,6 +2798,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) => {
@@ -2342,24 +2830,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 ($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 (!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);
+  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) {
@@ -2412,12 +2961,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
@@ -2433,6 +2983,7 @@ function getChildren(node) {
     case "doc":
     case "blockquote":
     case "listItem":
+    case "noteBlock":
       return node.content;
     case "paragraph":
     case "heading":
@@ -3904,6 +4455,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;
@@ -3915,16 +4483,23 @@ 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;
           }
-        }
-      } else {
+          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 {
         newChildren.push(child);
       }
     }
@@ -4128,8 +4703,198 @@ function analyzeJinjaBlocks(doc2) {
   });
 }
 
+// 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();
@@ -4156,7 +4921,15 @@ function createPlugin() {
     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;
@@ -4172,9 +4945,14 @@ function createPlugin() {
         }
         return slice;
       },
-      // Discard pasted HTML — always prefer plain-text markdown
-      transformPastedHTML() {
-        return "";
+      // 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 {
@@ -4197,7 +4975,7 @@ function createMarkdownClipboardPlugin() {
 }
 
 // src/ui/plugin/jumpPointPlugin.ts
-import { Plugin as Plugin2, PluginKey as PluginKey2, TextSelection } from "prosemirror-state";
+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 };
@@ -4268,8 +5046,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;
@@ -4279,23 +5064,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;
 }
@@ -4342,6 +5127,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",
@@ -4349,31 +5135,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() {
@@ -4388,108 +5261,100 @@ 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 validationKey = new PluginKey3("jumpPointValidation");
-function buildValidationDecorations(doc2) {
-  const jumpPointIds = /* @__PURE__ */ new Map();
-  const anchorRefs = [];
-  doc2.descendants((node, pos) => {
+var pluginKey = new PluginKey3("jumpPointValidation");
+function collectJumpPointIds(state) {
+  const ids = /* @__PURE__ */ new Set();
+  state.doc.descendants((node) => {
     if (node.type.name === "jumpPoint") {
-      const id = node.attrs.id;
-      if (!jumpPointIds.has(id)) jumpPointIds.set(id, []);
-      jumpPointIds.get(id).push(pos);
-    }
-    if (node.isText && node.marks) {
-      for (const mark of node.marks) {
-        if (mark.type.name === "link") {
-          const href = mark.attrs.href;
-          if (href?.startsWith("#")) {
-            anchorRefs.push({ from: pos, to: pos + node.nodeSize, id: href.slice(1) });
-          }
-        }
-      }
+      ids.add(node.attrs.id);
     }
   });
-  const decorations = [];
-  for (const [, positions] of jumpPointIds) {
-    if (positions.length > 1) {
-      for (const pos of positions) {
-        decorations.push(
-          Decoration2.node(pos, pos + 1, { class: "duplicate-jump-point" })
-        );
-      }
+  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 });
     }
-  }
-  for (const ref of anchorRefs) {
-    if (!jumpPointIds.has(ref.id)) {
-      decorations.push(
-        Decoration2.inline(ref.from, ref.to, { class: "broken-anchor-ref" })
-      );
+  });
+  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 decorations.length > 0 ? DecorationSet2.create(doc2, decorations) : DecorationSet2.empty;
+  });
+  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: validationKey,
+        key: pluginKey,
         state: {
           init(_, state) {
-            return buildValidationDecorations(state.doc);
+            return buildDecorations2(state);
           },
-          apply(tr, oldDecos) {
-            if (!tr.docChanged) return oldDecos;
-            return buildValidationDecorations(tr.doc);
+          apply(tr, oldSet, _oldState, newState) {
+            if (tr.docChanged) {
+              return buildDecorations2(newState);
+            }
+            return oldSet.map(tr.mapping, tr.doc);
           }
         },
         props: {
           decorations(state) {
-            return validationKey.getState(state);
+            return pluginKey.getState(state) ?? DecorationSet2.empty;
           }
         }
       })
     ]
   };
 }
-function hasDuplicateJumpPoints(state) {
-  const ids = /* @__PURE__ */ new Set();
-  let hasDup = false;
-  state.doc.descendants((node) => {
-    if (node.type.name === "jumpPoint") {
-      const id = node.attrs.id;
-      if (ids.has(id)) {
-        hasDup = true;
-        return false;
-      }
-      ids.add(id);
-    }
-  });
-  return hasDup;
-}
-function hasBrokenAnchorRefs(state) {
-  const jumpPointIds = /* @__PURE__ */ new Set();
-  state.doc.descendants((node) => {
-    if (node.type.name === "jumpPoint") {
-      jumpPointIds.add(node.attrs.id);
-    }
-  });
-  let hasBroken = false;
-  state.doc.descendants((node) => {
-    if (hasBroken) return false;
-    if (node.isText && node.marks) {
-      for (const mark of node.marks) {
-        if (mark.type.name === "link") {
-          const href = mark.attrs.href;
-          if (href?.startsWith("#") && !jumpPointIds.has(href.slice(1))) {
-            hasBroken = true;
-            return false;
-          }
-        }
-      }
-    }
-  });
-  return hasBroken;
+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
@@ -4510,9 +5375,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",
@@ -4532,16 +5400,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 })
   ] });
@@ -4576,292 +5447,103 @@ function addInlineChipDecorations(doc2, decorations) {
     JINJA_TAG_RE.lastIndex = 0;
     let match;
     while ((match = JINJA_TAG_RE.exec(text2)) !== null) {
-      const from = pos + match.index;
-      const to = from + match[0].length;
-      const keyword = match[1];
-      decorations.push(
-        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;
-  }
-  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 buildDecorations2(doc2) {
-  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 buildDecorations2(state.doc);
-          },
-          apply(tr, oldDecos) {
-            if (!tr.docChanged) return oldDecos;
-            return buildDecorations2(tr.doc);
-          }
-        },
-        props: {
-          decorations(state) {
-            return jinjaPluginKey.getState(state);
-          }
-        }
-      })
-    ]
-  };
-}
-
-// src/ui/plugin/jinjaIfBlockPlugin.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-import { createRoot as createRoot2 } from "react-dom/client";
-
-// 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]
-    });
-  }
-  return highlighted;
-}
-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;
-        }
-        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;
-    }
-    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;
+      const from = pos + match.index;
+      const to = from + match[0].length;
+      const keyword = match[1];
+      decorations.push(
+        Decoration3.inline(from, to, {
+          class: `jinja-chip jinja-chip-${keyword}`
+        })
+      );
     }
-    if (char === ">") {
-      rawTokens.push({ type: "GT", text: char, start: i, end: i + 1 });
-      i++;
-      continue;
+  });
+}
+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);
+        }
+      }
     }
-    if (char === "(") {
-      rawTokens.push({ type: "LPAREN", text: char, start: i, end: i + 1 });
-      i++;
-      continue;
+    const lastBranch = structure.branches[structure.branches.length - 1];
+    if (lastBranch && !blockBranchType.has(structure.endifTagBlockIndex)) {
+      blockBranchType.set(structure.endifTagBlockIndex, lastBranch.type);
     }
-    if (char === ")") {
-      rawTokens.push({ type: "RPAREN", text: char, start: i, end: i + 1 });
-      i++;
-      continue;
+    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(" ") }));
     }
-    return finalizeTokens(input, rawTokens);
   }
-  return finalizeTokens(input, rawTokens);
+}
+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";
@@ -5312,8 +5994,8 @@ function ConditionDisplay({
   editable = true,
   onConditionChange
 }) {
-  const [isEditing, setIsEditing] = useState2(false);
-  const [draftValue, setDraftValue] = useState2(condition);
+  const [isEditing, setIsEditing] = useState3(false);
+  const [draftValue, setDraftValue] = useState3(condition);
   const inputRef = useRef2(null);
   useEffect2(() => {
     if (!isEditing) {
@@ -5419,7 +6101,7 @@ function JinjaBranchHeader({
   isLastBranch,
   hasElseBranch
 }) {
-  const [menuSource, setMenuSource] = useState2(null);
+  const [menuSource, setMenuSource] = useState3(null);
   const kebabRef = useRef2(null);
   const footerRef = useRef2(null);
   useEffect2(() => {
@@ -5699,7 +6381,7 @@ function createJinjaIfBlockPlugin() {
 
 // src/ui/plugin/linkPlugin.ts
 import { InputRule as InputRule2, inputRules as inputRules2 } from "prosemirror-inputrules";
-import { Plugin as Plugin5, PluginKey as PluginKey5, 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 PluginKey5("linkEdit");
@@ -5745,7 +6427,7 @@ 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;
 }
@@ -5891,11 +6573,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;
 
@@ -5912,15 +6594,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;
@@ -5934,18 +6620,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 {
@@ -6101,23 +6789,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;
@@ -6125,6 +6815,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();
@@ -6216,6 +6921,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`;
@@ -6226,6 +6932,7 @@ var DragHandleController = class {
     }
     this.handles = newHandles;
     this.prevBlocks = newBlocks;
+    this.updateActiveHandle();
   }
   bindHandleEvents(el, index) {
     let currentIndex = index;
@@ -6296,7 +7003,8 @@ var DragHandleController = class {
       pointerId: e.pointerId,
       startX: e.clientX,
       startY: e.clientY,
-      activated: false
+      activated: false,
+      ghost: null
     };
     this.addGlobalDragListeners(e.pointerId);
   }
@@ -6305,6 +7013,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";
@@ -6344,6 +7068,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() {
@@ -6415,6 +7143,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 {
@@ -6620,6 +7352,124 @@ function createTodoNodeViewPlugin() {
   };
 }
 
+// src/ui/plugin/noteBlockPlugin.tsx
+import { Selection } from "prosemirror-state";
+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: 16px 24px",
+      "background: #fff",
+      "border: 1px dashed #ccc",
+      "border-radius: 4px",
+      "display: flex",
+      "flex-direction: column",
+      "gap: 4px"
+    ].join(";");
+    const label = document.createElement("span");
+    label.contentEditable = "false";
+    label.textContent = "Note";
+    label.style.cssText = [
+      "display: inline-flex",
+      "align-items: center",
+      "justify-content: center",
+      "align-self: flex-start",
+      "font-size: 12px",
+      "font-weight: 400",
+      "font-style: normal",
+      "line-height: 16px",
+      "color: #858585",
+      "background: #f7f7f7",
+      "border: 1px solid #e0e0e0",
+      "border-radius: 4px",
+      "padding: 2px 4px",
+      "user-select: none"
+    ].join(";");
+    this.dom.appendChild(label);
+    this.contentDOM = document.createElement("div");
+    this.contentDOM.className = "ab-note-block-content";
+    this.contentDOM.style.cssText = [
+      "font-size: 14px",
+      "font-style: italic",
+      "font-weight: 400",
+      "line-height: 20px",
+      "letter-spacing: -0.1px",
+      "color: #858585"
+    ].join(";");
+    this.dom.appendChild(this.contentDOM);
+  }
+};
+var emptyEnterCount = 0;
+var lastEnterTime = 0;
+var exitNoteBlockOnEnter = (state, dispatch) => {
+  const { $from } = state.selection;
+  let noteBlockDepth = -1;
+  for (let d = $from.depth; d > 0; d--) {
+    if ($from.node(d).type.name === "noteBlock") {
+      noteBlockDepth = d;
+      break;
+    }
+  }
+  if (noteBlockDepth < 0) {
+    emptyEnterCount = 0;
+    return false;
+  }
+  const parentNode = $from.parent;
+  if (parentNode.type.name !== "paragraph" || parentNode.content.size !== 0) {
+    emptyEnterCount = 0;
+    return false;
+  }
+  const now = Date.now();
+  if (now - lastEnterTime > 2e3) {
+    emptyEnterCount = 0;
+  }
+  lastEnterTime = now;
+  emptyEnterCount++;
+  if (emptyEnterCount < 2) {
+    return false;
+  }
+  emptyEnterCount = 0;
+  if (!dispatch) return true;
+  const paragraphStart = $from.before($from.depth);
+  const paragraphEnd = $from.after($from.depth);
+  const tr = state.tr.delete(paragraphStart, paragraphEnd);
+  const mappedFrom = tr.mapping.map($from.before($from.depth));
+  const $mapped = tr.doc.resolve(Math.min(mappedFrom, tr.doc.content.size));
+  for (let d = $mapped.depth; d > 0; d--) {
+    if ($mapped.node(d).type.name === "noteBlock") {
+      const lastChild = $mapped.node(d).lastChild;
+      if (lastChild && lastChild.type.name === "paragraph" && lastChild.content.size === 0) {
+        const lastChildPos = $mapped.end(d) - lastChild.nodeSize;
+        tr.delete(lastChildPos, lastChildPos + lastChild.nodeSize);
+      }
+      break;
+    }
+  }
+  const noteBlockEnd = tr.mapping.map($from.after(noteBlockDepth));
+  const newParagraph = state.schema.nodes.paragraph.create();
+  tr.insert(noteBlockEnd, newParagraph);
+  tr.setSelection(Selection.near(tr.doc.resolve(noteBlockEnd + 1)));
+  dispatch(tr.scrollIntoView());
+  return true;
+};
+function createNoteBlockPlugin() {
+  return {
+    name: "noteBlockNodeView",
+    keymap: () => ({
+      Enter: exitNoteBlockOnEnter
+    }),
+    nodeViews: () => ({
+      noteBlock: (node, view, getPos) => new NoteBlockView(node, view, getPos)
+    })
+  };
+}
+
 // src/ui/plugin/slashCommandPlugin.ts
 import { Plugin as Plugin7, PluginKey as PluginKey7 } from "prosemirror-state";
 var slashCommandKey = new PluginKey7("slashCommand");
@@ -6689,17 +7539,37 @@ function createSlashCommandPlugin() {
 }
 
 // src/ui/components/SlashCommandMenu.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import React4, { useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx7, jsxs as jsxs6 } 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));
+    }
   );
+  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 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)";
+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,
@@ -6712,11 +7582,14 @@ 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] = useState3(0);
+  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;
@@ -6728,7 +7601,7 @@ function SlashCommandMenu({ view, editorState, items }) {
   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]);
   useEffect3(() => {
@@ -6770,6 +7643,7 @@ function SlashCommandMenu({ view, editorState, items }) {
     /* @__PURE__ */ jsx7(
       "div",
       {
+        className: "ab-slash-menu",
         style: {
           position: "fixed",
           top,
@@ -6777,10 +7651,12 @@ 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"
         },
@@ -6794,100 +7670,103 @@ function SlashCommandMenu({ view, editorState, items }) {
             },
             children: "No results"
           }
-        ) : filtered.map((item, i) => /* @__PURE__ */ jsx7(
-          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 }) {
+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__ */ jsx7(
+        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__ */ jsxs6("span", { style: { display: "flex", flexDirection: "column", gap: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx7(
-            "span",
-            {
-              style: {
-                fontSize: 13,
-                fontWeight: 500,
-                color: "#171717",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
-              },
-              children: item.title
-            }
-          ),
-          item.description && /* @__PURE__ */ jsx7(
-            "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 useState4 } from "react";
+import { useState as useState5 } from "react";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var BRANCH_COLORS = {
   if: "#6366f1",
@@ -6932,7 +7811,7 @@ function BranchNode({
   ] });
 }
 function StructureNode({ structure, doc: doc2 }) {
-  const [expanded, setExpanded] = useState4(true);
+  const [expanded, setExpanded] = useState5(true);
   const firstBranch = structure.branches[0];
   const label = firstBranch?.condition ? `if ${firstBranch.condition}` : "if";
   return /* @__PURE__ */ jsxs7("div", { className: "jinja-tree-structure", children: [
@@ -6965,13 +7844,179 @@ function JinjaTreeView({ doc: doc2, className }) {
   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 useEffect4, useRef as useRef4, useState as useState5 } 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 Fragment3, jsx as jsx9, jsxs as jsxs8 } 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,
@@ -6993,7 +8038,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) {
@@ -7027,7 +8072,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";
 }
@@ -7036,7 +8081,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;
@@ -7058,8 +8103,8 @@ var BTN_RESET2 = {
   lineHeight: 1
 };
 function TBtn({ children, active, title, onMouseDown, style }) {
-  const [hover, setHover] = useState5(false);
-  return /* @__PURE__ */ jsx9(
+  const [hover, setHover] = useState7(false);
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       ...{ [FLOAT_ATTR]: "" },
@@ -7090,12 +8135,12 @@ function TBtn({ children, active, title, onMouseDown, style }) {
   );
 }
 function Divider() {
-  return /* @__PURE__ */ jsx9("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] = useState5(false);
+  const [open, setOpen] = useState7(false);
   const btnRef = useRef4(null);
-  const [hover, setHover] = useState5(false);
+  const [hover, setHover] = useState7(false);
   useEffect4(() => {
     if (!open) return;
     const onDown = (e) => {
@@ -7110,19 +8155,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: () => {
@@ -7144,13 +8189,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__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         ref: btnRef,
@@ -7178,12 +8227,12 @@ function BlockTypeDropdown({ view, state, label }) {
         },
         children: [
           label,
-          /* @__PURE__ */ jsx9("span", { style: { fontSize: 8, opacity: 0.6 }, children: "\u25BE" })
+          /* @__PURE__ */ jsx10("span", { style: { fontSize: 8, opacity: 0.6 }, children: "\u25BE" })
         ]
       }
     ),
     open && btnRect && createPortal2(
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "div",
         {
           ...{ [FLOAT_ATTR]: "" },
@@ -7199,7 +8248,7 @@ function BlockTypeDropdown({ view, state, label }) {
             minWidth: 168,
             animation: "ab-float-in 0.12s ease"
           },
-          children: items.map((item) => /* @__PURE__ */ jsx9(DropdownItem, { item, onRun: () => setOpen(false) }, item.label))
+          children: items.map((item) => /* @__PURE__ */ jsx10(DropdownItem, { item, onRun: () => setOpen(false) }, item.label))
         }
       ),
       document.body
@@ -7207,8 +8256,8 @@ function BlockTypeDropdown({ view, state, label }) {
   ] });
 }
 function DropdownItem({ item, onRun }) {
-  const [hover, setHover] = useState5(false);
-  return /* @__PURE__ */ jsxs8(
+  const [hover, setHover] = useState7(false);
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       ...{ [FLOAT_ATTR]: "" },
@@ -7235,15 +8284,15 @@ function DropdownItem({ item, onRun }) {
         transition: "background 0.1s"
       },
       children: [
-        /* @__PURE__ */ jsx9("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] = useState5(false);
-  const [linkHref, setLinkHref] = useState5("");
+  const [linkMode, setLinkMode] = useState7(false);
+  const [linkHref, setLinkHref] = useState7("");
   const inputRef = useRef4(null);
   const isBold = hasMark(state, bold2);
   const isItalic = hasMark(state, italic2);
@@ -7259,7 +8308,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();
@@ -7296,10 +8345,10 @@ function SelectionToolbar({ view, state, selectionRect }) {
     view.dispatch(view.state.tr.removeMark(from, to, linkMark));
     view.focus();
   };
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
-      ...{ [FLOAT_ATTR]: "" },
+      ...{ [FLOAT_ATTR]: "selection-toolbar" },
       style: {
         position: "fixed",
         left,
@@ -7319,9 +8368,9 @@ function SelectionToolbar({ view, state, selectionRect }) {
       },
       children: linkMode ? (
         /* ── Link input mode ── */
-        /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx9("span", { style: { fontSize: 13, color: "#9ca3af", paddingLeft: 4, flexShrink: 0 }, children: "\u2197" }),
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx10("span", { style: { fontSize: 13, color: "#9ca3af", paddingLeft: 4, flexShrink: 0 }, children: "\u2197" }),
+          /* @__PURE__ */ jsx10(
             "input",
             {
               ref: inputRef,
@@ -7352,7 +8401,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               title: "Apply (Enter)",
@@ -7364,7 +8413,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "\u21B5"
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               title: "Cancel (Esc)",
@@ -7380,8 +8429,8 @@ function SelectionToolbar({ view, state, selectionRect }) {
         ] })
       ) : (
         /* ── Normal toolbar mode ── */
-        /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isBold,
@@ -7391,7 +8440,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "B"
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isItalic,
@@ -7401,7 +8450,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "I"
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isUnderline,
@@ -7411,7 +8460,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "U"
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isStrike,
@@ -7421,7 +8470,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "S"
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isCode,
@@ -7431,7 +8480,7 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "`\xB7`"
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             TBtn,
             {
               active: isLink,
@@ -7441,8 +8490,8 @@ function SelectionToolbar({ view, state, selectionRect }) {
               children: "\u2197"
             }
           ),
-          /* @__PURE__ */ jsx9(Divider, {}),
-          /* @__PURE__ */ jsx9(BlockTypeDropdown, { view, state, label: blockLabel })
+          /* @__PURE__ */ jsx10(Divider, {}),
+          /* @__PURE__ */ jsx10(BlockTypeDropdown, { view, state, label: blockLabel })
         ] })
       )
     }
@@ -7453,7 +8502,7 @@ var BLOCK_ITEMS = [
     shortLabel: "\xB6",
     label: "Text",
     run: (v) => {
-      setBlockType(paragraph2)(v.state, v.dispatch);
+      setBlockType2(paragraph3)(v.state, v.dispatch);
       v.focus();
     }
   },
@@ -7461,7 +8510,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();
     }
   },
@@ -7469,7 +8518,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();
     }
   },
@@ -7477,7 +8526,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();
     }
   },
@@ -7512,7 +8561,7 @@ var BLOCK_ITEMS = [
     shortLabel: "\u275D",
     label: "Quote",
     run: (v) => {
-      wrapIn(blockquote2)(v.state, v.dispatch);
+      wrapIn(blockquote3)(v.state, v.dispatch);
       v.focus();
     }
   },
@@ -7532,7 +8581,7 @@ var BLOCK_ITEMS = [
   }
 ];
 function EmptyParaHandle({ view, cursorPos }) {
-  const [menuOpen, setMenuOpen] = useState5(false);
+  const [menuOpen, setMenuOpen] = useState7(false);
   const coords = view.coordsAtPos(cursorPos);
   const lineH = Math.max(coords.bottom - coords.top, 18);
   const btnSize = 22;
@@ -7550,8 +8599,8 @@ function EmptyParaHandle({ view, cursorPos }) {
     document.addEventListener("mousedown", onDown, true);
     return () => document.removeEventListener("mousedown", onDown, true);
   }, [menuOpen]);
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx10(
       "button",
       {
         ...{ [FLOAT_ATTR]: "" },
@@ -7583,7 +8632,7 @@ function EmptyParaHandle({ view, cursorPos }) {
         children: "+"
       }
     ),
-    menuOpen && /* @__PURE__ */ jsx9(
+    menuOpen && /* @__PURE__ */ jsx10(
       "div",
       {
         ...{ [FLOAT_ATTR]: "" },
@@ -7599,7 +8648,7 @@ function EmptyParaHandle({ view, cursorPos }) {
           minWidth: 168,
           animation: "ab-float-in 0.12s ease"
         },
-        children: BLOCK_ITEMS.map((item) => /* @__PURE__ */ jsx9(
+        children: BLOCK_ITEMS.map((item) => /* @__PURE__ */ jsx10(
           BlockMenuItem,
           {
             item,
@@ -7617,8 +8666,8 @@ function BlockMenuItem({
   view,
   onRun
 }) {
-  const [hover, setHover] = useState5(false);
-  return /* @__PURE__ */ jsxs8(
+  const [hover, setHover] = useState7(false);
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       ...{ [FLOAT_ATTR]: "" },
@@ -7644,7 +8693,7 @@ function BlockMenuItem({
         transition: "background 0.1s"
       },
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "span",
           {
             style: {
@@ -7665,10 +8714,10 @@ function BlockMenuItem({
   );
 }
 function FloatingMenu({ view, editorState }) {
-  const [showEmptyHandle, setShowEmptyHandle] = useState5(false);
+  const [showEmptyHandle, setShowEmptyHandle] = useState7(false);
   const dwellTimerRef = useRef4(null);
   const lastEmptyPosRef = useRef4(null);
-  const [, setScrollTick] = useState5(0);
+  const [, setScrollTick] = useState7(0);
   useEffect4(() => {
     const editorDom = view?.dom;
     if (!editorDom) return;
@@ -7708,8 +8757,8 @@ function FloatingMenu({ view, editorState }) {
   }
   const selectionRect = hasSelection ? getSelectionDOMRect() : null;
   return createPortal2(
-    /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      hasSelection && selectionRect && /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      hasSelection && selectionRect && /* @__PURE__ */ jsx10(
         SelectionToolbar,
         {
           view,
@@ -7717,7 +8766,7 @@ function FloatingMenu({ view, editorState }) {
           selectionRect
         }
       ),
-      !hasSelection && showEmptyHandle && emptyPos !== null && /* @__PURE__ */ jsx9(EmptyParaHandle, { view, cursorPos: emptyPos })
+      !hasSelection && showEmptyHandle && emptyPos !== null && /* @__PURE__ */ jsx10(EmptyParaHandle, { view, cursorPos: emptyPos })
     ] }),
     document.body
   );
@@ -7886,6 +8935,7 @@ function createInlineSuggestPlugin(provider, endpoint, options) {
 }
 export {
   ActionbookRenderer,
+  DocumentTreeView,
   EditorShell,
   FloatingMenu,
   JUMP_POINT_ADJACENT_SPEC,
@@ -7908,6 +8958,7 @@ export {
   createKeymapPlugin,
   createLinkPlugin,
   createMarkdownClipboardPlugin,
+  createNoteBlockPlugin,
   createPluginArray,
   createReactNodeView,
   createSlashCommandPlugin,