@burger-editor/local 4.0.0-alpha.34 → 4.0.0-alpha.42

package/dist/client.js

@@ -1294,7 +1294,7 @@ var style$b = "/* No Styling */\n";
 var template$b = "<a href=\"\" data-kind=\"link\" data-before-icon=\"none\" data-after-icon=\"none\" data-bge=\"link:href, target:target, kind:data-kind, before-icon:data-before-icon, after-icon:data-after-icon\">\n\t<div>\n\t\t<span data-bge=\"text\">ボタン</span>\n\t\t<span data-bge=\"subtext\">サブテキスト</span>\n\t</div>\n</a>\n";
 
 var button = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "button",
   template: template$b,
   style: style$b,
@@ -1350,7 +1350,7 @@ var style$a = "/* No Styling */\n";
 var template$a = "<details data-bge=\"open:open\">\n\t<summary data-bge=\"summary\">折りたたみコンテンツ</summary>\n\t<div data-bge=\"content\"><p>内容を入力してください</p></div>\n</details>\n";
 
 var details = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "details",
   template: template$a,
   style: style$a,
@@ -1364,7 +1364,7 @@ var style$9 = "[data-bgi='download-file'] {\n\t[data-bge*='size'] {\n\t\t&::befo
 var template$9 = "<a href=\"./files/bgeditor/bg-sample.pdf\" target=\"_blank\" data-bge=\"path:href, download:download\">\n\t<div>\n\t\t<span data-bge=\"name\">サンプルダウンロードファイル</span>\n\t\t<span data-bge=\"formated-size, size:data-size\" data-size=\"138158\">134.92kB</span>\n\t</div>\n</a>\n";
 
 var downloadFile = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "download-file",
   template: template$9,
   style: style$9,
@@ -1403,7 +1403,7 @@ var style$8 = "[data-bgi='google-maps'] {\n\tdiv {\n\t\tinline-size: 100%;\n\t\t
 var template$8 = "<div data-lat=\"35.681382\" data-lng=\"139.766084\" data-zoom=\"16\" data-bge=\"lat:data-lat, lng:data-lng, zoom:data-zoom\">\n\t<img data-bge=\"img:src\" src=\"https://maps.google.com/maps/api/staticmap?center=35.681382,139.766084&amp;zoom=16&amp;size=640x400&amp;markers=color:red|color:red|35.681382,139.766084&amp;scale=2&amp;key=%googleMapsApiKey%\" width=\"8\" height=\"5\" alt=\"Google Maps\" />\n</div>\n<a href=\"https://maps.apple.com/?q=35.681382,139.766084\" data-bge=\"url:href\" target=\"_blank\"><span>アプリで開く</span></a>\n";
 
 var googleMaps = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "google-maps",
   template: template$8,
   style: style$8,
@@ -1538,7 +1538,7 @@ var style$7 = "[data-bgi='hr'] {\n\t--inline-size: 100%;\n\t--border-color: #000
 var template$7 = "<div data-bgi-hr-kind=\"primary\" data-bge=\"kind:data-bgi-hr-kind\">\n\t<hr />\n</div>\n";
 
 var hr = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "hr",
   template: template$7,
   style: style$7,
@@ -1628,7 +1628,7 @@ function createWidthState() {
 
 const ORIGIN = "__org";
 var image = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "image",
   template: template$6,
   style: style$6,
@@ -1826,7 +1826,7 @@ var style$5 = "[data-bgi='import'] {\n\tbge-import {\n\t\t&::before {\n\t\t\tfon
 var template$5 = "<bge-import data-bge=\":src\" src=\"\"></bge-import>\n";
 
 var importItem = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "import",
   template: template$5,
   style: style$5,
@@ -1840,7 +1840,7 @@ var style$4 = "/* No Styling */\n";
 var template$4 = "<div data-bge=\":scrollable\" data-bge-scrollable=\"false\">\n\t<table>\n\t\t<caption data-bge=\"caption\">\n\t\t\tキャプションを入力してください\n\t\t</caption>\n\t\t<tbody data-bge-list>\n\t\t\t<tr>\n\t\t\t\t<th data-bge=\"th\">表組の見出し</th>\n\t\t\t\t<td data-bge=\"td\">表組の内容を入力してください</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n";
 
 var table = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "table",
   template: template$4,
   style: style$4,
@@ -1868,7 +1868,7 @@ var style$3 = "/* No Styling */\n";
 var template$3 = "<h2 data-bge=\"title-h2\">見出しを入力してください</h2>\n";
 
 var titleH2 = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "title-h2",
   template: template$3,
   style: style$3,
@@ -1882,7 +1882,7 @@ var style$2 = "/* No Styling */\n";
 var template$2 = "<h3 data-bge=\"title-h3\">見出しを入力してください</h3>\n";
 
 var titleH3 = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "title-h3",
   template: template$2,
   style: style$2,
@@ -1896,7 +1896,7 @@ var style$1 = "/* No Styling */\n";
 var template$1 = "<div data-bge=\"wysiwyg\"><p>本文を入力してください</p></div>\n";
 
 var wysiwyg = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "wysiwyg",
   template: template$1,
   style: style$1,
@@ -1911,7 +1911,7 @@ var template = "<div data-id=\"3KtWfp0UopM\" data-title=\"YouTube動画\" data-w
 
 const FALLBACK_TITLE = "YouTube\u52D5\u753B";
 var youtube = createItem$1({
-  version: "4.0.0-alpha.33",
+  version: "4.0.0-alpha.39",
   name: "youtube",
   template,
   style: style$c,
@@ -3373,6 +3373,68 @@ function shouldUseActiveX() {
   return useActiveX;
 }
 canParseHTMLNatively() ? root$c.DOMParser : createHTMLParser();
+function normalizeHtmlStructure(html1, html2) {
+  const doc1 = new Range().createContextualFragment(html1);
+  const doc2 = new Range().createContextualFragment(html2);
+  return compareElements(doc1, doc2);
+}
+function compareElements(el1, el2) {
+  const children1 = [...el1.children];
+  const children2 = [...el2.children];
+  if (children1.length !== children2.length) {
+    return false;
+  }
+  if (children1.length === 0) {
+    const text1 = normalizeText(el1.textContent ?? "");
+    const text2 = normalizeText(el2.textContent ?? "");
+    return text1 === text2;
+  }
+  for (const [i, child1] of children1.entries()) {
+    const child2 = children2[i];
+    if (!child1 || !child2 || !compareElementStructure(child1, child2)) {
+      return false;
+    }
+  }
+  return true;
+}
+function compareElementStructure(el1, el2) {
+  if (el1.tagName !== el2.tagName) {
+    return false;
+  }
+  const attrs1 = getNormalizedAttributes(el1);
+  const attrs2 = getNormalizedAttributes(el2);
+  if (!compareAttributes(attrs1, attrs2)) {
+    return false;
+  }
+  return compareElements(el1, el2);
+}
+function getNormalizedAttributes(el) {
+  const attrs = {};
+  for (const attr of el.attributes) {
+    attrs[attr.name] = attr.value;
+  }
+  return attrs;
+}
+function compareAttributes(attrs1, attrs2) {
+  const keys1 = Object.keys(attrs1).sort();
+  const keys2 = Object.keys(attrs2).sort();
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const [i, key1] of keys1.entries()) {
+    const key2 = keys2[i];
+    if (key1 !== key2) {
+      return false;
+    }
+    if (attrs1[key1] !== attrs2[key2]) {
+      return false;
+    }
+  }
+  return true;
+}
+function normalizeText(text2) {
+  return text2.replaceAll(/\s+/g, " ").trim();
+}
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -3681,6 +3743,16 @@ function formatByteSize(byteSize, digits = 2, autoFormat = true) {
 function formatDate(timestamp, format) {
   return dayjs.unix(timestamp).format(format);
 }
+function normalizeIndent(html2) {
+  const trimmedHtml = html2.replace(/^(?:\r?\n)+/, "");
+  const lines = trimmedHtml.split(/(?<=\r\n|\n|$)/);
+  const firstLineIndent = lines[0]?.match(/^\s+/)?.[0] ?? "";
+  if (firstLineIndent.length === 0) {
+    return trimmedHtml.trimEnd();
+  }
+  const normalizedLines = lines.map((line) => line.replace(firstLineIndent, ""));
+  return normalizedLines.join("").trimEnd();
+}
 const cache = /* @__PURE__ */ new Map();
 function parseFields(query) {
   const cached = cache.get(query);
@@ -3736,7 +3808,7 @@ function getValues(el, convertType = false, attr = "field", filter) {
           break;
         }
         case "html": {
-          value = el.innerHTML.trim();
+          value = normalizeIndent(el.innerHTML);
           break;
         }
         case "style": {
@@ -3768,7 +3840,7 @@ function getValues(el, convertType = false, attr = "field", filter) {
         const val = el.value;
         value = convertType ? convert(val) : val;
       } else {
-        value = el.innerHTML.trim();
+        value = normalizeIndent(el.innerHTML);
       }
     }
     if (filter) {
@@ -3921,15 +3993,21 @@ function sanitizeHtml(html2) {
     const regex = new RegExp(`<${tagName}[^>]*>(.*?)<\\/${tagName}>`, "gis");
     sanitized = sanitized.replace(regex, "$1");
   }
-  const doc2 = new DOMParser().parseFromString(sanitized, "text/html");
-  const body = doc2.body;
-  sanitizeElementAndChildren(body);
-  return body.innerHTML;
+  const fragment = new Range().createContextualFragment(sanitized);
+  sanitizeElementAndChildren(fragment);
+  const newHtml = [...fragment.childNodes].map((node) => {
+    if (node instanceof Element) {
+      return node.outerHTML;
+    }
+    return node.textContent ?? node.nodeValue ?? "";
+  }).join("");
+  return newHtml;
 }
-function sanitizeElementAndChildren(element2) {
-  sanitizeAttributes(element2);
-  const children = element2.children;
-  for (const child2 of children) {
+function sanitizeElementAndChildren(node) {
+  if (node instanceof Element) {
+    sanitizeAttributes(node);
+  }
+  for (const child2 of node.childNodes) {
     sanitizeElementAndChildren(child2);
   }
 }
@@ -20594,6 +20672,35 @@ function isNodeEmpty(node, {
 function isNodeSelection(value) {
   return value instanceof NodeSelection;
 }
+var MappablePosition = class _MappablePosition {
+  constructor(position) {
+    this.position = position;
+  }
+  /**
+   * Creates a MappablePosition from a JSON object.
+   */
+  static fromJSON(json) {
+    return new _MappablePosition(json.position);
+  }
+  /**
+   * Converts the MappablePosition to a JSON object.
+   */
+  toJSON() {
+    return {
+      position: this.position
+    };
+  }
+};
+function getUpdatedPosition(position, transaction) {
+  const mapResult = transaction.mapping.mapResult(position.position);
+  return {
+    position: new MappablePosition(mapResult.pos),
+    mapResult
+  };
+}
+function createMappablePosition(position) {
+  return new MappablePosition(position);
+}
 function canSetMark(state2, tr2, newMarkType) {
   var _a2;
   const { selection } = tr2;
@@ -22723,6 +22830,10 @@ var Editor = class extends EventEmitter {
     };
     this.isCapturingTransaction = false;
     this.capturedTransaction = null;
+    this.utils = {
+      getUpdatedPosition,
+      createMappablePosition
+    };
     this.setOptions(options);
     this.createExtensionManager();
     this.createCommandManager();
@@ -23377,6 +23488,8 @@ var ResizableNodeView = class {
     this.startWidth = 0;
     this.startHeight = 0;
     this.isShiftKeyPressed = false;
+    this.lastEditableState = void 0;
+    this.handleMap = /* @__PURE__ */ new Map();
     this.handleMouseMove = (event2) => {
       if (!this.isResizing || !this.activeHandle) {
         return;
@@ -23425,8 +23538,9 @@ var ResizableNodeView = class {
         this.isShiftKeyPressed = false;
       }
     };
-    var _a2, _b, _c, _d, _e2;
+    var _a2, _b, _c, _d, _e2, _f;
     this.node = options.node;
+    this.editor = options.editor;
     this.element = options.element;
     this.contentElement = options.contentElement;
     this.getPos = options.getPos;
@@ -23456,10 +23570,14 @@ var ResizableNodeView = class {
         resizing: options.options.className.resizing || ""
       };
     }
+    if ((_f = options.options) == null ? void 0 : _f.createCustomHandle) {
+      this.createCustomHandle = options.options.createCustomHandle;
+    }
     this.wrapper = this.createWrapper();
     this.container = this.createContainer();
     this.applyInitialSize();
     this.attachHandles();
+    this.editor.on("update", this.handleEditorUpdate.bind(this));
   }
   /**
    * Returns the top-level DOM node that should be placed in the editor.
@@ -23475,6 +23593,18 @@ var ResizableNodeView = class {
   get contentDOM() {
     return this.contentElement;
   }
+  handleEditorUpdate() {
+    const isEditable = this.editor.isEditable;
+    if (isEditable === this.lastEditableState) {
+      return;
+    }
+    this.lastEditableState = isEditable;
+    if (!isEditable) {
+      this.removeHandles();
+    } else if (isEditable && this.handleMap.size === 0) {
+      this.attachHandles();
+    }
+  }
   /**
    * Called when the node's content or attributes change.
    *
@@ -23516,6 +23646,7 @@ var ResizableNodeView = class {
       this.isResizing = false;
       this.activeHandle = null;
     }
+    this.editor.off("update", this.handleEditorUpdate.bind(this));
     this.container.remove();
   }
   /**
@@ -23532,8 +23663,6 @@ var ResizableNodeView = class {
     element2.dataset.resizeContainer = "";
     element2.dataset.node = this.node.type.name;
     element2.style.display = "flex";
-    element2.style.justifyContent = "flex-start";
-    element2.style.alignItems = "flex-start";
     if (this.classNames.container) {
       element2.className = this.classNames.container;
     }
@@ -23621,13 +23750,36 @@ var ResizableNodeView = class {
    */
   attachHandles() {
     this.directions.forEach((direction) => {
-      const handle = this.createHandle(direction);
-      this.positionHandle(handle, direction);
+      let handle;
+      if (this.createCustomHandle) {
+        handle = this.createCustomHandle(direction);
+      } else {
+        handle = this.createHandle(direction);
+      }
+      if (!(handle instanceof HTMLElement)) {
+        console.warn(
+          `[ResizableNodeView] createCustomHandle("${direction}") did not return an HTMLElement. Falling back to default handle.`
+        );
+        handle = this.createHandle(direction);
+      }
+      if (!this.createCustomHandle) {
+        this.positionHandle(handle, direction);
+      }
       handle.addEventListener("mousedown", (event2) => this.handleResizeStart(event2, direction));
       handle.addEventListener("touchstart", (event2) => this.handleResizeStart(event2, direction));
+      this.handleMap.set(direction, handle);
       this.wrapper.appendChild(handle);
     });
   }
+  /**
+   * Removes all resize handles from the wrapper.
+   *
+   * Cleans up the handle map and removes each handle element from the DOM.
+   */
+  removeHandles() {
+    this.handleMap.forEach((el) => el.remove());
+    this.handleMap.clear();
+  }
   /**
    * Applies initial sizing from node attributes to the element.
    *
@@ -24148,9 +24300,15 @@ function createInlineMarkdownSpec(options) {
       return attrs;
     }
     const filtered = {};
-    allowedAttributes.forEach((key) => {
-      if (key in attrs) {
-        filtered[key] = attrs[key];
+    allowedAttributes.forEach((attr) => {
+      const attrName = typeof attr === "string" ? attr : attr.name;
+      const skipIfDefault = typeof attr === "string" ? void 0 : attr.skipIfDefault;
+      if (attrName in attrs) {
+        const value = attrs[attrName];
+        if (skipIfDefault !== void 0 && value === skipIfDefault) {
+          return;
+        }
+        filtered[attrName] = value;
       }
     });
     return filtered;
@@ -26505,32 +26663,36 @@ function clickHandler(options) {
         if (!view.editable) {
           return false;
         }
-        let link2 = null;
-        if (event2.target instanceof HTMLAnchorElement) {
-          link2 = event2.target;
-        } else {
-          let a = event2.target;
-          const els = [];
-          while (a.nodeName !== "DIV") {
-            els.push(a);
-            a = a.parentNode;
-          }
-          link2 = els.find((value) => value.nodeName === "A");
-        }
-        if (!link2) {
-          return false;
-        }
-        const attrs = getAttributes(view.state, options.type.name);
-        const href = (_a2 = link2 == null ? void 0 : link2.href) != null ? _a2 : attrs.href;
-        const target = (_b = link2 == null ? void 0 : link2.target) != null ? _b : attrs.target;
+        let handled = false;
         if (options.enableClickSelection) {
-          options.editor.commands.extendMarkRange(options.type.name);
+          const commandResult = options.editor.commands.extendMarkRange(options.type.name);
+          handled = commandResult;
         }
-        if (link2 && href) {
-          window.open(href, target);
-          return true;
+        if (options.openOnClick) {
+          let link2 = null;
+          if (event2.target instanceof HTMLAnchorElement) {
+            link2 = event2.target;
+          } else {
+            let a = event2.target;
+            const els = [];
+            while (a.nodeName !== "DIV") {
+              els.push(a);
+              a = a.parentNode;
+            }
+            link2 = els.find((value) => value.nodeName === "A");
+          }
+          if (!link2) {
+            return handled;
+          }
+          const attrs = getAttributes(view.state, options.type.name);
+          const href = (_a2 = link2 == null ? void 0 : link2.href) != null ? _a2 : attrs.href;
+          const target = (_b = link2 == null ? void 0 : link2.target) != null ? _b : attrs.target;
+          if (link2 && href) {
+            window.open(href, target);
+            handled = true;
+          }
         }
-        return false;
+        return handled;
       }
     }
   });
@@ -26771,15 +26933,14 @@ var Link = Mark2.create({
         })
       );
     }
-    if (this.options.openOnClick === true) {
-      plugins.push(
-        clickHandler({
-          type: this.type,
-          editor: this.editor,
-          enableClickSelection: this.options.enableClickSelection
-        })
-      );
-    }
+    plugins.push(
+      clickHandler({
+        type: this.type,
+        editor: this.editor,
+        openOnClick: this.options.openOnClick === "whenNotEditable" ? true : this.options.openOnClick,
+        enableClickSelection: this.options.enableClickSelection
+      })
+    );
     if (this.options.linkOnPaste) {
       plugins.push(
         pasteHandler({
@@ -29339,11 +29500,11 @@ var Image$2 = Node3.create({
     return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})`;
   },
   addNodeView() {
-    if (!this.options.resize || !this.options.resize.enabled || typeof document === "undefined" || !this.editor.isEditable) {
+    if (!this.options.resize || !this.options.resize.enabled || typeof document === "undefined") {
       return null;
     }
     const { directions, minWidth, minHeight, alwaysPreserveAspectRatio } = this.options.resize;
-    return ({ node, getPos, HTMLAttributes }) => {
+    return ({ node, getPos, HTMLAttributes, editor }) => {
       const el = document.createElement("img");
       Object.entries(HTMLAttributes).forEach(([key, value]) => {
         if (value != null) {
@@ -29360,6 +29521,7 @@ var Image$2 = Node3.create({
       el.src = HTMLAttributes.src;
       const nodeView = new ResizableNodeView({
         element: el,
+        editor,
         node,
         getPos,
         onResize: (width, height) => {
@@ -32482,7 +32644,7 @@ var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "rea
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
-var _editor, _editorRoot, _previewStyle, _textarea, _textareaDescriptor, _BgeWysiwygElement_instances, setToTextarea_fn, transaction_fn;
+var _editor, _editorRoot, _hasStructureChange, _isExpectingHTML, _isInitializing, _previewStyle, _structureChangeMessage, _textarea, _textareaDescriptor, _BgeWysiwygElement_instances, checkStructureChange_fn, setStructureChange_fn, setToTextarea_fn, transaction_fn, updateStructureChangeMessage_fn;
 function defineBgeWysiwygElement(options, global = window) {
   if (options?.extensions) {
     BgeWysiwygElement.extensions = options.extensions;
@@ -32501,7 +32663,11 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
     __privateAdd$1(this, _BgeWysiwygElement_instances);
     __privateAdd$1(this, _editor, null);
     __privateAdd$1(this, _editorRoot, null);
+    __privateAdd$1(this, _hasStructureChange, false);
+    __privateAdd$1(this, _isExpectingHTML, false);
+    __privateAdd$1(this, _isInitializing, true);
     __privateAdd$1(this, _previewStyle, null);
+    __privateAdd$1(this, _structureChangeMessage, null);
     __privateAdd$1(this, _textarea, null);
     __privateAdd$1(this, _textareaDescriptor, null);
     this.attachShadow({ mode: "open" });
@@ -32510,40 +32676,87 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
     }
   }
   get value() {
-    return __privateGet$1(this, _textarea)?.value ?? "";
+    if (!__privateGet$1(this, _textarea)) {
+      throw new ReferenceError("<bge-wysiwyg> is not connected");
+    }
+    if (this.mode === "wysiwyg") {
+      if (!__privateGet$1(this, _editor)) {
+        throw new ReferenceError("<bge-wysiwyg> is not connected");
+      }
+      let html2 = __privateGet$1(this, _editor).getHTML();
+      html2 = html2.replaceAll("<p></p>", "");
+      return html2;
+    }
+    return __privateGet$1(this, _textarea).value;
   }
   set value(value) {
     if (!__privateGet$1(this, _textarea)) {
       throw new ReferenceError("<bge-wysiwyg> is not connected");
     }
+    if (this.mode === "html") {
+      __privateGet$1(this, _textareaDescriptor)?.set?.call(__privateGet$1(this, _textarea), value);
+      return;
+    }
+    const isFirstValueSet = !__privateGet$1(this, _textarea).value || __privateGet$1(this, _textarea).value.trim() === "";
+    const shouldCheckStructure = (__privateGet$1(this, _isInitializing) || isFirstValueSet) && __privateGet$1(this, _editor) && value;
+    if (shouldCheckStructure) {
+      const expectedHTML = this.expectHTML(value);
+      const isStructureSame = normalizeHtmlStructure(value, expectedHTML);
+      if (!isStructureSame) {
+        __privateGet$1(this, _textareaDescriptor)?.set?.call(__privateGet$1(this, _textarea), value);
+        this.shadowRoot.querySelector(`[data-bge-mode]`)?.setAttribute(
+          "data-bge-mode",
+          "html"
+        );
+        __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, true);
+        return;
+      }
+    }
     __privateGet$1(this, _textarea).value = value;
   }
-  get editor() {
-    if (!__privateGet$1(this, _editor)) {
-      throw new ReferenceError("<bge-wysiwyg> is not connected");
-    }
-    return __privateGet$1(this, _editor);
+  get mode() {
+    const modeAttr = this.shadowRoot?.querySelector(`[data-bge-mode]`)?.getAttribute("data-bge-mode");
+    return modeAttr === "html" ? "html" : "wysiwyg";
   }
   set mode(mode) {
     if (!__privateGet$1(this, _editor) || !__privateGet$1(this, _textarea)) {
       return;
     }
+    if (mode === "wysiwyg" && this.mode === "html" && __privateMethod(this, _BgeWysiwygElement_instances, checkStructureChange_fn).call(this)) {
+      __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, true);
+      return;
+    }
     this.shadowRoot.querySelector(`[data-bge-mode]`)?.setAttribute(
       "data-bge-mode",
       mode
     );
     if (mode === "wysiwyg") {
       __privateGet$1(this, _editor).commands.setContent(__privateGet$1(this, _textarea).value);
+      __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, false);
+    } else if (!__privateGet$1(this, _isInitializing)) {
+      __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, __privateMethod(this, _BgeWysiwygElement_instances, checkStructureChange_fn).call(this));
     }
+    __privateMethod(this, _BgeWysiwygElement_instances, updateStructureChangeMessage_fn).call(this);
+  }
+  get editor() {
+    if (!__privateGet$1(this, _editor)) {
+      throw new ReferenceError("<bge-wysiwyg> is not connected");
+    }
+    return __privateGet$1(this, _editor);
+  }
+  get hasStructureChange() {
+    return __privateGet$1(this, _hasStructureChange);
   }
   connectedCallback() {
     if (!this.shadowRoot) {
       throw new Error("Not supported shadow DOM");
     }
-    const initialValue = this.innerHTML.trim();
+    const initialValue = this.innerHTML;
     const label = this.getAttribute("label") ?? "内容";
     const itemName = this.getAttribute("item-name");
-    this.shadowRoot.innerHTML = `<div data-bge-mode="wysiwyg"><iframe></iframe><textarea aria-label="${label} HTML"></textarea></div>`;
+    const messageId = `bge-structure-change-message-${Math.random().toString(36).slice(2, 11)}`;
+    const structureChangeMessage = "HTMLの構造がWYSIWYG（デザイン）モードに対応していません。HTMLモードのみで編集可能です。";
+    this.shadowRoot.innerHTML = `<div data-bge-mode="wysiwyg"><iframe></iframe><textarea aria-label="${label} HTML" aria-describedby="${messageId}"></textarea><div id="${messageId}" role="alert" aria-live="polite" style="display: none;">${structureChangeMessage}</div></div>`;
     const preview = this.shadowRoot.querySelector("iframe");
     if (!preview || !preview.contentWindow || !preview.contentDocument) {
       throw new Error("Not supported iframe in shadow DOM");
@@ -32589,6 +32802,16 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
 			[data-bge-mode="html"] iframe {
 				display: none;
 			}
+
+			[role="alert"] {
+				margin-block-start: 0.5rem;
+				padding: 0.5rem;
+				background-color: var(--bge-error-color, #fee);
+				border: 1px solid var(--bge-error-border-color, #fcc);
+				border-radius: var(--border-radius);
+				color: var(--bge-error-text-color, #c00);
+				font-size: 0.875rem;
+			}
 		`;
     preview.contentDocument.body.addEventListener("focusin", () => {
       preview.dataset.focusWithin = "true";
@@ -32608,6 +32831,9 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
       throw new Error("Not supported textarea in shadow DOM");
     }
     __privateSet$1(this, _textarea, textarea);
+    __privateSet$1(this, _structureChangeMessage, this.shadowRoot.querySelector(
+      `#${messageId}`
+    ));
     const extensions = [
       index_default.configure({
         link: {
@@ -32656,8 +32882,46 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
       }
     });
     if (initialValue) {
-      __privateGet$1(this, _textarea).value = initialValue;
+      const expectedHTML = this.expectHTML(initialValue);
+      const isStructureSame = normalizeHtmlStructure(initialValue, expectedHTML);
+      if (isStructureSame) {
+        __privateGet$1(this, _textarea).value = initialValue;
+      } else {
+        __privateGet$1(this, _textareaDescriptor).set?.call(__privateGet$1(this, _textarea), initialValue);
+        this.shadowRoot.querySelector(`[data-bge-mode]`)?.setAttribute("data-bge-mode", "html");
+        __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, true);
+      }
+    }
+    __privateSet$1(this, _isInitializing, false);
+    __privateGet$1(this, _textarea).addEventListener("blur", () => {
+      if (this.mode !== "html") {
+        return;
+      }
+      __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, __privateMethod(this, _BgeWysiwygElement_instances, checkStructureChange_fn).call(this));
+    });
+    __privateGet$1(this, _textarea).addEventListener("input", () => {
+      if (this.mode !== "html") {
+        return;
+      }
+      __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, __privateMethod(this, _BgeWysiwygElement_instances, checkStructureChange_fn).call(this));
+    });
+  }
+  /**
+   * tiptapのwysiwygが出力するであろうHTMLをレンダリングせずに文字列で返す
+   * @param html 変換対象のHTML文字列
+   * @returns 変換後のHTML文字列
+   */
+  expectHTML(html2) {
+    if (!__privateGet$1(this, _editor)) {
+      throw new ReferenceError("<bge-wysiwyg> is not connected");
     }
+    const originalContent = __privateGet$1(this, _editor).getHTML();
+    __privateSet$1(this, _isExpectingHTML, true);
+    __privateGet$1(this, _editor).commands.setContent(html2);
+    const result = __privateGet$1(this, _editor).getHTML().replaceAll("<p></p>", "");
+    __privateGet$1(this, _editor).commands.setContent(originalContent);
+    __privateSet$1(this, _isExpectingHTML, false);
+    return result;
   }
   isActive(name) {
     return this.editor.isActive(name) ?? false;
@@ -32698,6 +32962,12 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
 		`;
   }
   syncWysiwygToTextarea() {
+    if (__privateGet$1(this, _isExpectingHTML)) {
+      return;
+    }
+    if (this.mode === "html") {
+      return;
+    }
     let html2 = this.editor.getHTML();
     html2 = html2.replaceAll("<p></p>", "");
     __privateMethod(this, _BgeWysiwygElement_instances, setToTextarea_fn).call(this, html2);
@@ -32744,10 +33014,36 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
 };
 _editor = /* @__PURE__ */ new WeakMap();
 _editorRoot = /* @__PURE__ */ new WeakMap();
+_hasStructureChange = /* @__PURE__ */ new WeakMap();
+_isExpectingHTML = /* @__PURE__ */ new WeakMap();
+_isInitializing = /* @__PURE__ */ new WeakMap();
 _previewStyle = /* @__PURE__ */ new WeakMap();
+_structureChangeMessage = /* @__PURE__ */ new WeakMap();
 _textarea = /* @__PURE__ */ new WeakMap();
 _textareaDescriptor = /* @__PURE__ */ new WeakMap();
 _BgeWysiwygElement_instances = /* @__PURE__ */ new WeakSet();
+checkStructureChange_fn = function() {
+  if (!__privateGet$1(this, _editor) || !__privateGet$1(this, _textarea) || this.mode !== "html") {
+    return false;
+  }
+  const expectedHTML = this.expectHTML(__privateGet$1(this, _textarea).value);
+  const isStructureSame = normalizeHtmlStructure(__privateGet$1(this, _textarea).value, expectedHTML);
+  return !isStructureSame;
+};
+setStructureChange_fn = function(hasChange) {
+  if (__privateGet$1(this, _hasStructureChange) === hasChange) {
+    return;
+  }
+  __privateSet$1(this, _hasStructureChange, hasChange);
+  __privateMethod(this, _BgeWysiwygElement_instances, updateStructureChangeMessage_fn).call(this);
+  this.dispatchEvent(
+    new CustomEvent("bge:structure-change", {
+      detail: { hasStructureChange: hasChange },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
 setToTextarea_fn = function(html2) {
   if (!__privateGet$1(this, _textarea) || !__privateGet$1(this, _textareaDescriptor)) {
     throw new ReferenceError("<bge-wysiwyg> is not connected");
@@ -32837,6 +33133,16 @@ transaction_fn = function(editor) {
   };
   return data;
 };
+updateStructureChangeMessage_fn = function() {
+  if (!__privateGet$1(this, _structureChangeMessage)) {
+    return;
+  }
+  if (this.mode === "html" && __privateGet$1(this, _hasStructureChange)) {
+    __privateGet$1(this, _structureChangeMessage).style.display = "block";
+  } else {
+    __privateGet$1(this, _structureChangeMessage).style.display = "none";
+  }
+};
 __publicField$1(_BgeWysiwygElement, "extensions", null);
 __publicField$1(_BgeWysiwygElement, "wrapperElement", null);
 let BgeWysiwygElement = _BgeWysiwygElement;
@@ -32961,13 +33267,28 @@ const _BgeWysiwygEditorElement = class _BgeWysiwygEditorElement2 extends HTMLEle
     const htmlModeButton = this.querySelector(
       '[data-bge-toolbar-button="html-mode"]'
     );
+    __privateGet(this, _wysiwygElement).addEventListener("bge:structure-change", (event2) => {
+      const hasStructureChange = event2.detail.hasStructureChange;
+      const isHtmlMode = __privateGet(this, _wysiwygElement)?.mode === "html";
+      htmlModeButton.disabled = isHtmlMode && hasStructureChange;
+    });
+    const initialHasStructureChange = __privateGet(this, _wysiwygElement).hasStructureChange;
+    const initialIsHtmlMode = __privateGet(this, _wysiwygElement).mode === "html";
+    htmlModeButton.disabled = initialIsHtmlMode && initialHasStructureChange;
     htmlModeButton.addEventListener("click", () => {
-      htmlModeButton.ariaPressed = htmlModeButton.ariaPressed === "true" ? "false" : "true";
-      const mode = htmlModeButton.ariaPressed === "true" ? "html" : "wysiwyg";
       if (!__privateGet(this, _wysiwygElement)) {
         throw new ReferenceError("<bge-wysiwyg-editor> is not connected");
       }
-      __privateGet(this, _wysiwygElement).mode = mode;
+      const currentMode = __privateGet(this, _wysiwygElement).mode;
+      const newMode = currentMode === "html" ? "wysiwyg" : "html";
+      htmlModeButton.ariaPressed = newMode === "html" ? "true" : "false";
+      __privateGet(this, _wysiwygElement).mode = newMode;
+      if (__privateGet(this, _wysiwygElement).mode === newMode) {
+        const hasStructureChange = __privateGet(this, _wysiwygElement).hasStructureChange;
+        htmlModeButton.disabled = newMode === "html" && hasStructureChange;
+      } else {
+        htmlModeButton.ariaPressed = currentMode === "html" ? "true" : "false";
+      }
     });
   }
   setStyle(css) {
@@ -33280,6 +33601,7 @@ const EAGER_EFFECT = 1 << 17;
 const HEAD_EFFECT = 1 << 18;
 const EFFECT_PRESERVED = 1 << 19;
 const USER_EFFECT = 1 << 20;
+const EFFECT_OFFSCREEN = 1 << 25;
 const WAS_MARKED = 1 << 15;
 const REACTION_IS_UPDATING = 1 << 21;
 const ASYNC = 1 << 22;
@@ -33867,7 +34189,7 @@ function flush_queued_effects(effects) {
     if ((effect2.f & (DESTROYED | INERT)) === 0 && is_dirty(effect2)) {
       eager_block_effects = /* @__PURE__ */ new Set();
       update_effect(effect2);
-      if (effect2.deps === null && effect2.first === null && effect2.nodes_start === null) {
+      if (effect2.deps === null && effect2.first === null && effect2.nodes === null) {
         if (effect2.teardown === null && effect2.ac === null) {
           unlink_effect(effect2);
         } else {
@@ -34291,375 +34613,6 @@ class Boundary {
     }
   }
 }
-function index(_2, i) {
-  return i;
-}
-function pause_effects(state2, to_destroy, controlled_anchor) {
-  var transitions = [];
-  var length = to_destroy.length;
-  for (var i = 0; i < length; i++) {
-    pause_children(to_destroy[i].e, transitions, true);
-  }
-  run_out_transitions(transitions, () => {
-    var fast_path = transitions.length === 0 && controlled_anchor !== null;
-    if (fast_path) {
-      var anchor = (
-        /** @type {Element} */
-        controlled_anchor
-      );
-      var parent_node = (
-        /** @type {Element} */
-        anchor.parentNode
-      );
-      clear_text_content(parent_node);
-      parent_node.append(anchor);
-      state2.items.clear();
-      link(state2, to_destroy[0].prev, to_destroy[length - 1].next);
-    }
-    for (var i2 = 0; i2 < length; i2++) {
-      var item = to_destroy[i2];
-      if (!fast_path) {
-        state2.items.delete(item.k);
-        link(state2, item.prev, item.next);
-      }
-      destroy_effect(item.e, !fast_path);
-    }
-    if (state2.first === to_destroy[0]) {
-      state2.first = to_destroy[0].prev;
-    }
-  });
-}
-function each(node, flags2, get_collection, get_key, render_fn, fallback_fn = null) {
-  var anchor = node;
-  var items = /* @__PURE__ */ new Map();
-  var first2 = null;
-  var is_controlled = (flags2 & EACH_IS_CONTROLLED) !== 0;
-  var is_reactive_value = (flags2 & EACH_ITEM_REACTIVE) !== 0;
-  var is_reactive_index = (flags2 & EACH_INDEX_REACTIVE) !== 0;
-  if (is_controlled) {
-    var parent_node = (
-      /** @type {Element} */
-      node
-    );
-    anchor = parent_node.appendChild(create_text());
-  }
-  var fallback = null;
-  var each_array = /* @__PURE__ */ derived_safe_equal(() => {
-    var collection = get_collection();
-    return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
-  });
-  var array;
-  var first_run = true;
-  function commit() {
-    reconcile(state2, array, anchor, flags2, get_key);
-    if (fallback !== null) {
-      if (array.length === 0) {
-        if (fallback.fragment) {
-          anchor.before(fallback.fragment);
-          fallback.fragment = null;
-        } else {
-          resume_effect(fallback.effect);
-        }
-        effect2.first = fallback.effect;
-      } else {
-        pause_effect(fallback.effect, () => {
-          fallback = null;
-        });
-      }
-    }
-  }
-  var effect2 = block(() => {
-    array = /** @type {V[]} */
-    get2(each_array);
-    var length = array.length;
-    var keys2 = /* @__PURE__ */ new Set();
-    var prev = null;
-    for (var i = 0; i < length; i += 1) {
-      var value = array[i];
-      var key = get_key(value, i);
-      var item = first_run ? null : items.get(key);
-      if (item) {
-        if (is_reactive_value) {
-          internal_set(item.v, value);
-        }
-        if (is_reactive_index) {
-          internal_set(
-            /** @type {Value<number>} */
-            item.i,
-            i
-          );
-        } else {
-          item.i = i;
-        }
-      } else {
-        item = create_item(
-          first_run ? anchor : null,
-          prev,
-          value,
-          key,
-          i,
-          render_fn,
-          flags2,
-          get_collection
-        );
-        if (first_run) {
-          item.o = true;
-          if (prev === null) {
-            first2 = item;
-          } else {
-            prev.next = item;
-          }
-          prev = item;
-        }
-        items.set(key, item);
-      }
-      keys2.add(key);
-    }
-    if (length === 0 && fallback_fn && !fallback) {
-      if (first_run) {
-        fallback = {
-          fragment: null,
-          effect: branch(() => fallback_fn(anchor))
-        };
-      } else {
-        var fragment = document.createDocumentFragment();
-        var target = create_text();
-        fragment.append(target);
-        fallback = {
-          fragment,
-          effect: branch(() => fallback_fn(target))
-        };
-      }
-    }
-    if (!first_run) {
-      {
-        commit();
-      }
-    }
-    get2(each_array);
-  });
-  var state2 = { effect: effect2, items, first: first2 };
-  first_run = false;
-}
-function reconcile(state2, array, anchor, flags2, get_key) {
-  var is_animated = (flags2 & EACH_IS_ANIMATED) !== 0;
-  var length = array.length;
-  var items = state2.items;
-  var current = state2.first;
-  var seen;
-  var prev = null;
-  var to_animate;
-  var matched = [];
-  var stashed = [];
-  var value;
-  var key;
-  var item;
-  var i;
-  if (is_animated) {
-    for (i = 0; i < length; i += 1) {
-      value = array[i];
-      key = get_key(value, i);
-      item = /** @type {EachItem} */
-      items.get(key);
-      if (item.o) {
-        item.a?.measure();
-        (to_animate ??= /* @__PURE__ */ new Set()).add(item);
-      }
-    }
-  }
-  for (i = 0; i < length; i += 1) {
-    value = array[i];
-    key = get_key(value, i);
-    item = /** @type {EachItem} */
-    items.get(key);
-    state2.first ??= item;
-    if (!item.o) {
-      item.o = true;
-      var next = prev ? prev.next : current;
-      link(state2, prev, item);
-      link(state2, item, next);
-      move(item, next, anchor);
-      prev = item;
-      matched = [];
-      stashed = [];
-      current = prev.next;
-      continue;
-    }
-    if ((item.e.f & INERT) !== 0) {
-      resume_effect(item.e);
-      if (is_animated) {
-        item.a?.unfix();
-        (to_animate ??= /* @__PURE__ */ new Set()).delete(item);
-      }
-    }
-    if (item !== current) {
-      if (seen !== void 0 && seen.has(item)) {
-        if (matched.length < stashed.length) {
-          var start = stashed[0];
-          var j2;
-          prev = start.prev;
-          var a = matched[0];
-          var b2 = matched[matched.length - 1];
-          for (j2 = 0; j2 < matched.length; j2 += 1) {
-            move(matched[j2], start, anchor);
-          }
-          for (j2 = 0; j2 < stashed.length; j2 += 1) {
-            seen.delete(stashed[j2]);
-          }
-          link(state2, a.prev, b2.next);
-          link(state2, prev, a);
-          link(state2, b2, start);
-          current = start;
-          prev = b2;
-          i -= 1;
-          matched = [];
-          stashed = [];
-        } else {
-          seen.delete(item);
-          move(item, current, anchor);
-          link(state2, item.prev, item.next);
-          link(state2, item, prev === null ? state2.first : prev.next);
-          link(state2, prev, item);
-          prev = item;
-        }
-        continue;
-      }
-      matched = [];
-      stashed = [];
-      while (current !== null && current.k !== key) {
-        if ((current.e.f & INERT) === 0) {
-          (seen ??= /* @__PURE__ */ new Set()).add(current);
-        }
-        stashed.push(current);
-        current = current.next;
-      }
-      if (current === null) {
-        continue;
-      }
-      item = current;
-    }
-    matched.push(item);
-    prev = item;
-    current = item.next;
-  }
-  let has_offscreen_items = items.size > length;
-  if (current !== null || seen !== void 0) {
-    var to_destroy = seen === void 0 ? [] : array_from(seen);
-    while (current !== null) {
-      if ((current.e.f & INERT) === 0) {
-        to_destroy.push(current);
-      }
-      current = current.next;
-    }
-    var destroy_length = to_destroy.length;
-    has_offscreen_items = items.size - destroy_length > length;
-    if (destroy_length > 0) {
-      var controlled_anchor = (flags2 & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
-      if (is_animated) {
-        for (i = 0; i < destroy_length; i += 1) {
-          to_destroy[i].a?.measure();
-        }
-        for (i = 0; i < destroy_length; i += 1) {
-          to_destroy[i].a?.fix();
-        }
-      }
-      pause_effects(state2, to_destroy, controlled_anchor);
-    }
-  }
-  if (has_offscreen_items) {
-    for (const item2 of items.values()) {
-      if (!item2.o) {
-        link(state2, prev, item2);
-        prev = item2;
-      }
-    }
-  }
-  state2.effect.last = prev && prev.e;
-  if (is_animated) {
-    queue_micro_task(() => {
-      if (to_animate === void 0) return;
-      for (item of to_animate) {
-        item.a?.apply();
-      }
-    });
-  }
-}
-function create_item(anchor, prev, value, key, index2, render_fn, flags2, get_collection) {
-  var reactive = (flags2 & EACH_ITEM_REACTIVE) !== 0;
-  var mutable = (flags2 & EACH_ITEM_IMMUTABLE) === 0;
-  var v2 = reactive ? mutable ? /* @__PURE__ */ mutable_source(value, false, false) : source(value) : value;
-  var i = (flags2 & EACH_INDEX_REACTIVE) === 0 ? index2 : source(index2);
-  var item = {
-    i,
-    v: v2,
-    k: key,
-    a: null,
-    // @ts-expect-error
-    e: null,
-    o: false,
-    prev,
-    next: null
-  };
-  try {
-    if (anchor === null) {
-      var fragment = document.createDocumentFragment();
-      fragment.append(anchor = create_text());
-    }
-    item.e = branch(() => render_fn(
-      /** @type {Node} */
-      anchor,
-      v2,
-      i,
-      get_collection
-    ));
-    if (prev !== null) {
-      prev.next = item;
-    }
-    return item;
-  } finally {
-  }
-}
-function move(item, next, anchor) {
-  var end = item.next ? (
-    /** @type {TemplateNode} */
-    item.next.e.nodes_start
-  ) : anchor;
-  var dest = next ? (
-    /** @type {TemplateNode} */
-    next.e.nodes_start
-  ) : anchor;
-  var node = (
-    /** @type {TemplateNode} */
-    item.e.nodes_start
-  );
-  while (node !== null && node !== end) {
-    var next_node = (
-      /** @type {TemplateNode} */
-      /* @__PURE__ */ get_next_sibling(node)
-    );
-    dest.before(node);
-    node = next_node;
-  }
-}
-function link(state2, prev, next) {
-  if (prev === null) {
-    state2.first = next;
-    state2.effect.first = next && next.e;
-  } else {
-    if (prev.e.next) {
-      prev.e.next.prev = null;
-    }
-    prev.next = next;
-    prev.e.next = next && next.e;
-  }
-  if (next !== null) {
-    if (next.e.prev) {
-      next.e.prev.next = null;
-    }
-    next.prev = prev;
-    next.e.prev = prev && prev.e;
-  }
-}
 function flatten(blockers, sync, async, fn) {
   const d2 = is_runes() ? derived : derived_safe_equal;
   if (async.length === 0 && blockers.length === 0) {
@@ -35297,26 +35250,26 @@ function create_text(value = "") {
 }
 // @__NO_SIDE_EFFECTS__
 function get_first_child(node) {
-  return first_child_getter.call(node);
+  return (
+    /** @type {TemplateNode | null} */
+    first_child_getter.call(node)
+  );
 }
 // @__NO_SIDE_EFFECTS__
 function get_next_sibling(node) {
-  return next_sibling_getter.call(node);
+  return (
+    /** @type {TemplateNode | null} */
+    next_sibling_getter.call(node)
+  );
 }
 function child(node, is_text) {
   {
     return /* @__PURE__ */ get_first_child(node);
   }
 }
-function first_child(fragment, is_text = false) {
+function first_child(node, is_text = false) {
   {
-    var first2 = (
-      /** @type {DocumentFragment} */
-      /* @__PURE__ */ get_first_child(
-        /** @type {Node} */
-        fragment
-      )
-    );
+    var first2 = /* @__PURE__ */ get_first_child(node);
     if (first2 instanceof Comment && first2.data === "") return /* @__PURE__ */ get_next_sibling(first2);
     return first2;
   }
@@ -35423,8 +35376,7 @@ function create_effect(type, fn, sync) {
   var effect2 = {
     ctx: component_context,
     deps: null,
-    nodes_start: null,
-    nodes_end: null,
+    nodes: null,
     f: type | DIRTY | CONNECTED,
     first: null,
     fn,
@@ -35434,7 +35386,6 @@ function create_effect(type, fn, sync) {
     b: parent && parent.b,
     prev: null,
     teardown: null,
-    transitions: null,
     wv: 0,
     ac: null
   };
@@ -35450,7 +35401,7 @@ function create_effect(type, fn, sync) {
     schedule_effect(effect2);
   }
   var e = effect2;
-  if (sync && e.deps === null && e.teardown === null && e.nodes_start === null && e.first === e.last && // either `null`, or a singular child
+  if (sync && e.deps === null && e.teardown === null && e.nodes === null && e.first === e.last && // either `null`, or a singular child
   (e.f & EFFECT_PRESERVED) === 0) {
     e = e.first;
     if ((type & BLOCK_EFFECT) !== 0 && (type & EFFECT_TRANSPARENT) !== 0 && e !== null) {
@@ -35626,18 +35577,18 @@ function destroy_block_effect_children(signal) {
 }
 function destroy_effect(effect2, remove_dom = true) {
   var removed = false;
-  if ((remove_dom || (effect2.f & HEAD_EFFECT) !== 0) && effect2.nodes_start !== null && effect2.nodes_end !== null) {
+  if ((remove_dom || (effect2.f & HEAD_EFFECT) !== 0) && effect2.nodes !== null && effect2.nodes.end !== null) {
     remove_effect_dom(
-      effect2.nodes_start,
+      effect2.nodes.start,
       /** @type {TemplateNode} */
-      effect2.nodes_end
+      effect2.nodes.end
     );
     removed = true;
   }
   destroy_effect_children(effect2, remove_dom && !removed);
   remove_reactions(effect2, 0);
   set_signal_status(effect2, DESTROYED);
-  var transitions = effect2.transitions;
+  var transitions = effect2.nodes && effect2.nodes.t;
   if (transitions !== null) {
     for (const transition of transitions) {
       transition.stop();
@@ -35648,14 +35599,11 @@ function destroy_effect(effect2, remove_dom = true) {
   if (parent !== null && parent.first !== null) {
     unlink_effect(effect2);
   }
-  effect2.next = effect2.prev = effect2.teardown = effect2.ctx = effect2.deps = effect2.fn = effect2.nodes_start = effect2.nodes_end = effect2.ac = null;
+  effect2.next = effect2.prev = effect2.teardown = effect2.ctx = effect2.deps = effect2.fn = effect2.nodes = effect2.ac = null;
 }
 function remove_effect_dom(node, end) {
   while (node !== null) {
-    var next = node === end ? null : (
-      /** @type {TemplateNode} */
-      /* @__PURE__ */ get_next_sibling(node)
-    );
+    var next = node === end ? null : /* @__PURE__ */ get_next_sibling(node);
     node.remove();
     node = next;
   }
@@ -35674,12 +35622,10 @@ function unlink_effect(effect2) {
 function pause_effect(effect2, callback, destroy = true) {
   var transitions = [];
   pause_children(effect2, transitions, true);
-  run_out_transitions(transitions, () => {
+  var fn = () => {
     if (destroy) destroy_effect(effect2);
     if (callback) callback();
-  });
-}
-function run_out_transitions(transitions, fn) {
+  };
   var remaining = transitions.length;
   if (remaining > 0) {
     var check = () => --remaining || fn();
@@ -35693,8 +35639,9 @@ function run_out_transitions(transitions, fn) {
 function pause_children(effect2, transitions, local) {
   if ((effect2.f & INERT) !== 0) return;
   effect2.f ^= INERT;
-  if (effect2.transitions !== null) {
-    for (const transition of effect2.transitions) {
+  var t = effect2.nodes && effect2.nodes.t;
+  if (t !== null) {
+    for (const transition of t) {
       if (transition.is_global || local) {
         transitions.push(transition);
       }
@@ -35728,8 +35675,9 @@ function resume_children(effect2, local) {
     resume_children(child2, transparent ? local : false);
     child2 = sibling2;
   }
-  if (effect2.transitions !== null) {
-    for (const transition of effect2.transitions) {
+  var t = effect2.nodes && effect2.nodes.t;
+  if (t !== null) {
+    for (const transition of t) {
       if (transition.is_global || local) {
         transition.in();
       }
@@ -35737,13 +35685,11 @@ function resume_children(effect2, local) {
   }
 }
 function move_effect(effect2, fragment) {
-  var node = effect2.nodes_start;
-  var end = effect2.nodes_end;
+  if (!effect2.nodes) return;
+  var node = effect2.nodes.start;
+  var end = effect2.nodes.end;
   while (node !== null) {
-    var next = node === end ? null : (
-      /** @type {TemplateNode} */
-      /* @__PURE__ */ get_next_sibling(node)
-    );
+    var next = node === end ? null : /* @__PURE__ */ get_next_sibling(node);
     fragment.append(node);
     node = next;
   }
@@ -35919,7 +35865,7 @@ function update_reaction(reaction) {
       } else {
         reaction.deps = deps = new_deps;
       }
-      if (is_updating_effect && effect_tracking() && (reaction.f & CONNECTED) !== 0) {
+      if (effect_tracking() && (reaction.f & CONNECTED) !== 0) {
         for (i = skipped_deps; i < deps.length; i++) {
           (deps[i].reactions ??= []).push(reaction);
         }
@@ -36325,9 +36271,8 @@ function assign_nodes(start, end) {
     /** @type {Effect} */
     active_effect
   );
-  if (effect2.nodes_start === null) {
-    effect2.nodes_start = start;
-    effect2.nodes_end = end;
+  if (effect2.nodes === null) {
+    effect2.nodes = { start, end, a: null, t: null };
   }
 }
 // @__NO_SIDE_EFFECTS__
@@ -36339,7 +36284,7 @@ function from_html(content, flags2) {
   return () => {
     if (node === void 0) {
       node = create_fragment_from_html(has_start ? content : "<!>" + content);
-      if (!is_fragment) node = /** @type {Node} */
+      if (!is_fragment) node = /** @type {TemplateNode} */
       /* @__PURE__ */ get_first_child(node);
     }
     var clone = (
@@ -36756,6 +36701,363 @@ function if_block(node, fn, elseif = false) {
     }
   }, flags2);
 }
+function index(_2, i) {
+  return i;
+}
+function pause_effects(state2, to_destroy, controlled_anchor) {
+  var transitions = [];
+  var length = to_destroy.length;
+  var group;
+  var remaining = to_destroy.length;
+  for (var i = 0; i < length; i++) {
+    let effect2 = to_destroy[i];
+    pause_effect(
+      effect2,
+      () => {
+        if (group) {
+          group.pending.delete(effect2);
+          group.done.add(effect2);
+          if (group.pending.size === 0) {
+            var groups = (
+              /** @type {Set<EachOutroGroup>} */
+              state2.outrogroups
+            );
+            destroy_effects(array_from(group.done));
+            groups.delete(group);
+            if (groups.size === 0) {
+              state2.outrogroups = null;
+            }
+          }
+        } else {
+          remaining -= 1;
+        }
+      },
+      false
+    );
+  }
+  if (remaining === 0) {
+    var fast_path = transitions.length === 0 && controlled_anchor !== null;
+    if (fast_path) {
+      var anchor = (
+        /** @type {Element} */
+        controlled_anchor
+      );
+      var parent_node = (
+        /** @type {Element} */
+        anchor.parentNode
+      );
+      clear_text_content(parent_node);
+      parent_node.append(anchor);
+      state2.items.clear();
+    }
+    destroy_effects(to_destroy, !fast_path);
+  } else {
+    group = {
+      pending: new Set(to_destroy),
+      done: /* @__PURE__ */ new Set()
+    };
+    (state2.outrogroups ??= /* @__PURE__ */ new Set()).add(group);
+  }
+}
+function destroy_effects(to_destroy, remove_dom = true) {
+  for (var i = 0; i < to_destroy.length; i++) {
+    destroy_effect(to_destroy[i], remove_dom);
+  }
+}
+var offscreen_anchor;
+function each(node, flags2, get_collection, get_key, render_fn, fallback_fn = null) {
+  var anchor = node;
+  var items = /* @__PURE__ */ new Map();
+  var is_controlled = (flags2 & EACH_IS_CONTROLLED) !== 0;
+  if (is_controlled) {
+    var parent_node = (
+      /** @type {Element} */
+      node
+    );
+    anchor = parent_node.appendChild(create_text());
+  }
+  var fallback = null;
+  var each_array = /* @__PURE__ */ derived_safe_equal(() => {
+    var collection = get_collection();
+    return is_array(collection) ? collection : collection == null ? [] : array_from(collection);
+  });
+  var array;
+  var first_run = true;
+  function commit() {
+    state2.fallback = fallback;
+    reconcile(state2, array, anchor, flags2, get_key);
+    if (fallback !== null) {
+      if (array.length === 0) {
+        if ((fallback.f & EFFECT_OFFSCREEN) === 0) {
+          resume_effect(fallback);
+        } else {
+          fallback.f ^= EFFECT_OFFSCREEN;
+          move(fallback, null, anchor);
+        }
+      } else {
+        pause_effect(fallback, () => {
+          fallback = null;
+        });
+      }
+    }
+  }
+  var effect2 = block(() => {
+    array = /** @type {V[]} */
+    get2(each_array);
+    var length = array.length;
+    var keys2 = /* @__PURE__ */ new Set();
+    for (var index2 = 0; index2 < length; index2 += 1) {
+      var value = array[index2];
+      var key = get_key(value, index2);
+      var item = first_run ? null : items.get(key);
+      if (item) {
+        if (item.v) internal_set(item.v, value);
+        if (item.i) internal_set(item.i, index2);
+      } else {
+        item = create_item(
+          items,
+          first_run ? anchor : offscreen_anchor ??= create_text(),
+          value,
+          key,
+          index2,
+          render_fn,
+          flags2,
+          get_collection
+        );
+        if (!first_run) {
+          item.e.f |= EFFECT_OFFSCREEN;
+        }
+        items.set(key, item);
+      }
+      keys2.add(key);
+    }
+    if (length === 0 && fallback_fn && !fallback) {
+      if (first_run) {
+        fallback = branch(() => fallback_fn(anchor));
+      } else {
+        fallback = branch(() => fallback_fn(offscreen_anchor ??= create_text()));
+        fallback.f |= EFFECT_OFFSCREEN;
+      }
+    }
+    if (!first_run) {
+      {
+        commit();
+      }
+    }
+    get2(each_array);
+  });
+  var state2 = { effect: effect2, items, outrogroups: null, fallback };
+  first_run = false;
+}
+function reconcile(state2, array, anchor, flags2, get_key) {
+  var is_animated = (flags2 & EACH_IS_ANIMATED) !== 0;
+  var length = array.length;
+  var items = state2.items;
+  var current = state2.effect.first;
+  var seen;
+  var prev = null;
+  var to_animate;
+  var matched = [];
+  var stashed = [];
+  var value;
+  var key;
+  var effect2;
+  var i;
+  if (is_animated) {
+    for (i = 0; i < length; i += 1) {
+      value = array[i];
+      key = get_key(value, i);
+      effect2 = /** @type {EachItem} */
+      items.get(key).e;
+      if ((effect2.f & EFFECT_OFFSCREEN) === 0) {
+        effect2.nodes?.a?.measure();
+        (to_animate ??= /* @__PURE__ */ new Set()).add(effect2);
+      }
+    }
+  }
+  for (i = 0; i < length; i += 1) {
+    value = array[i];
+    key = get_key(value, i);
+    effect2 = /** @type {EachItem} */
+    items.get(key).e;
+    if (state2.outrogroups !== null) {
+      for (const group of state2.outrogroups) {
+        group.pending.delete(effect2);
+        group.done.delete(effect2);
+      }
+    }
+    if ((effect2.f & EFFECT_OFFSCREEN) !== 0) {
+      effect2.f ^= EFFECT_OFFSCREEN;
+      if (effect2 === current) {
+        move(effect2, null, anchor);
+      } else {
+        var next = prev ? prev.next : current;
+        if (effect2 === state2.effect.last) {
+          state2.effect.last = effect2.prev;
+        }
+        if (effect2.prev) effect2.prev.next = effect2.next;
+        if (effect2.next) effect2.next.prev = effect2.prev;
+        link(state2, prev, effect2);
+        link(state2, effect2, next);
+        move(effect2, next, anchor);
+        prev = effect2;
+        matched = [];
+        stashed = [];
+        current = prev.next;
+        continue;
+      }
+    }
+    if ((effect2.f & INERT) !== 0) {
+      resume_effect(effect2);
+      if (is_animated) {
+        effect2.nodes?.a?.unfix();
+        (to_animate ??= /* @__PURE__ */ new Set()).delete(effect2);
+      }
+    }
+    if (effect2 !== current) {
+      if (seen !== void 0 && seen.has(effect2)) {
+        if (matched.length < stashed.length) {
+          var start = stashed[0];
+          var j2;
+          prev = start.prev;
+          var a = matched[0];
+          var b2 = matched[matched.length - 1];
+          for (j2 = 0; j2 < matched.length; j2 += 1) {
+            move(matched[j2], start, anchor);
+          }
+          for (j2 = 0; j2 < stashed.length; j2 += 1) {
+            seen.delete(stashed[j2]);
+          }
+          link(state2, a.prev, b2.next);
+          link(state2, prev, a);
+          link(state2, b2, start);
+          current = start;
+          prev = b2;
+          i -= 1;
+          matched = [];
+          stashed = [];
+        } else {
+          seen.delete(effect2);
+          move(effect2, current, anchor);
+          link(state2, effect2.prev, effect2.next);
+          link(state2, effect2, prev === null ? state2.effect.first : prev.next);
+          link(state2, prev, effect2);
+          prev = effect2;
+        }
+        continue;
+      }
+      matched = [];
+      stashed = [];
+      while (current !== null && current !== effect2) {
+        (seen ??= /* @__PURE__ */ new Set()).add(current);
+        stashed.push(current);
+        current = current.next;
+      }
+      if (current === null) {
+        continue;
+      }
+    }
+    if ((effect2.f & EFFECT_OFFSCREEN) === 0) {
+      matched.push(effect2);
+    }
+    prev = effect2;
+    current = effect2.next;
+  }
+  if (state2.outrogroups !== null) {
+    for (const group of state2.outrogroups) {
+      if (group.pending.size === 0) {
+        destroy_effects(array_from(group.done));
+        state2.outrogroups?.delete(group);
+      }
+    }
+    if (state2.outrogroups.size === 0) {
+      state2.outrogroups = null;
+    }
+  }
+  if (current !== null || seen !== void 0) {
+    var to_destroy = [];
+    if (seen !== void 0) {
+      for (effect2 of seen) {
+        if ((effect2.f & INERT) === 0) {
+          to_destroy.push(effect2);
+        }
+      }
+    }
+    while (current !== null) {
+      if ((current.f & INERT) === 0 && current !== state2.fallback) {
+        to_destroy.push(current);
+      }
+      current = current.next;
+    }
+    var destroy_length = to_destroy.length;
+    if (destroy_length > 0) {
+      var controlled_anchor = (flags2 & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
+      if (is_animated) {
+        for (i = 0; i < destroy_length; i += 1) {
+          to_destroy[i].nodes?.a?.measure();
+        }
+        for (i = 0; i < destroy_length; i += 1) {
+          to_destroy[i].nodes?.a?.fix();
+        }
+      }
+      pause_effects(state2, to_destroy, controlled_anchor);
+    }
+  }
+  if (is_animated) {
+    queue_micro_task(() => {
+      if (to_animate === void 0) return;
+      for (effect2 of to_animate) {
+        effect2.nodes?.a?.apply();
+      }
+    });
+  }
+}
+function create_item(items, anchor, value, key, index2, render_fn, flags2, get_collection) {
+  var v2 = (flags2 & EACH_ITEM_REACTIVE) !== 0 ? (flags2 & EACH_ITEM_IMMUTABLE) === 0 ? /* @__PURE__ */ mutable_source(value, false, false) : source(value) : null;
+  var i = (flags2 & EACH_INDEX_REACTIVE) !== 0 ? source(index2) : null;
+  return {
+    v: v2,
+    i,
+    e: branch(() => {
+      render_fn(anchor, v2 ?? value, i ?? index2, get_collection);
+      return () => {
+        items.delete(key);
+      };
+    })
+  };
+}
+function move(effect2, next, anchor) {
+  if (!effect2.nodes) return;
+  var node = effect2.nodes.start;
+  var end = effect2.nodes.end;
+  var dest = next && (next.f & EFFECT_OFFSCREEN) === 0 ? (
+    /** @type {EffectNodes} */
+    next.nodes.start
+  ) : anchor;
+  while (node !== null) {
+    var next_node = (
+      /** @type {TemplateNode} */
+      /* @__PURE__ */ get_next_sibling(node)
+    );
+    dest.before(node);
+    if (node === end) {
+      return;
+    }
+    node = next_node;
+  }
+}
+function link(state2, prev, next) {
+  if (prev === null) {
+    state2.effect.first = next;
+  } else {
+    prev.next = next;
+  }
+  if (next === null) {
+    state2.effect.last = prev;
+  } else {
+    next.prev = prev;
+  }
+}
 function html(node, get_value, svg = false, mathml = false, skip_warning = false) {
   var anchor = node;
   var value = "";
@@ -36767,13 +37069,13 @@ function html(node, get_value, svg = false, mathml = false, skip_warning = false
     if (value === (value = get_value() ?? "")) {
       return;
     }
-    if (effect2.nodes_start !== null) {
+    if (effect2.nodes !== null) {
       remove_effect_dom(
-        effect2.nodes_start,
+        effect2.nodes.start,
         /** @type {TemplateNode} */
-        effect2.nodes_end
+        effect2.nodes.end
       );
-      effect2.nodes_start = effect2.nodes_end = null;
+      effect2.nodes = null;
     }
     if (value === "") return;
     var html2 = value + "";
@@ -36793,7 +37095,7 @@ function html(node, get_value, svg = false, mathml = false, skip_warning = false
     if (svg || mathml) {
       while (/* @__PURE__ */ get_first_child(node2)) {
         anchor.before(
-          /** @type {Node} */
+          /** @type {TemplateNode} */
           /* @__PURE__ */ get_first_child(node2)
         );
       }
@@ -36833,13 +37135,10 @@ function element(node, get_tag, is_svg, render_fn, get_namespace, location2) {
         element2 = document.createElementNS(ns, next_tag);
         assign_nodes(element2, element2);
         if (render_fn) {
-          var child_anchor = (
-            /** @type {TemplateNode} */
-            element2.appendChild(create_text())
-          );
+          var child_anchor = element2.appendChild(create_text());
           render_fn(element2, child_anchor);
         }
-        active_effect.nodes_end = element2;
+        active_effect.nodes.end = element2;
         anchor2.before(element2);
       }
     });