@burger-editor/client 4.0.0-alpha.61 → 4.0.0-alpha.62

package/dist/client.js

@@ -383,7 +383,7 @@ function kebabCase(str) {
 }
 
 /**
- * marked v17.0.2 - a markdown parser
+ * marked v17.0.3 - a markdown parser
  * Copyright (c) 2018-2026, MarkedJS. (MIT License)
  * Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
  * https://github.com/markedjs/marked
@@ -451,7 +451,7 @@ ${this.parser.parse(e)}</blockquote>
 `}tablerow({text:e}){return `<tr>
 ${e}</tr>
 `}tablecell(e){let t=this.parser.parseInline(e.tokens),n=e.header?"th":"td";return (e.align?`<${n} align="${e.align}">`:`<${n}>`)+t+`</${n}>
-`}strong({tokens:e}){return `<strong>${this.parser.parseInline(e)}</strong>`}em({tokens:e}){return `<em>${this.parser.parseInline(e)}</em>`}codespan({text:e}){return `<code>${O(e,true)}</code>`}br(e){return "<br>"}del({tokens:e}){return `<del>${this.parser.parseInline(e)}</del>`}link({href:e,title:t,tokens:n}){let r=this.parser.parseInline(n),i=X(e);if(i===null)return r;e=i;let s='<a href="'+e+'"';return t&&(s+=' title="'+O(t)+'"'),s+=">"+r+"</a>",s}image({href:e,title:t,text:n,tokens:r}){r&&(n=this.parser.parseInline(r,this.parser.textRenderer));let i=X(e);if(i===null)return O(n);e=i;let s=`<img src="${e}" alt="${n}"`;return t&&(s+=` title="${O(t)}"`),s+=">",s}text(e){return "tokens"in e&&e.tokens?this.parser.parseInline(e.tokens):"escaped"in e&&e.escaped?e.text:O(e.text)}};var $=class{strong({text:e}){return e}em({text:e}){return e}codespan({text:e}){return e}del({text:e}){return e}html({text:e}){return e}text({text:e}){return e}link({text:e}){return ""+e}image({text:e}){return ""+e}br(){return ""}checkbox({raw:e}){return e}};var b=class u{options;renderer;textRenderer;constructor(e){this.options=e||T,this.options.renderer=this.options.renderer||new y,this.renderer=this.options.renderer,this.renderer.options=this.options,this.renderer.parser=this,this.textRenderer=new $;}static parse(e,t){return new u(t).parse(e)}static parseInline(e,t){return new u(t).parseInline(e)}parse(e){let t="";for(let n=0;n<e.length;n++){let r=e[n];if(this.options.extensions?.renderers?.[r.type]){let s=r,a=this.options.extensions.renderers[s.type].call({parser:this},s);if(a!==false||!["space","hr","heading","code","table","blockquote","list","html","def","paragraph","text"].includes(s.type)){t+=a||"";continue}}let i=r;switch(i.type){case "space":{t+=this.renderer.space(i);break}case "hr":{t+=this.renderer.hr(i);break}case "heading":{t+=this.renderer.heading(i);break}case "code":{t+=this.renderer.code(i);break}case "table":{t+=this.renderer.table(i);break}case "blockquote":{t+=this.renderer.blockquote(i);break}case "list":{t+=this.renderer.list(i);break}case "checkbox":{t+=this.renderer.checkbox(i);break}case "html":{t+=this.renderer.html(i);break}case "def":{t+=this.renderer.def(i);break}case "paragraph":{t+=this.renderer.paragraph(i);break}case "text":{t+=this.renderer.text(i);break}default:{let s='Token with "'+i.type+'" type was not found.';if(this.options.silent)return console.error(s),"";throw new Error(s)}}}return t}parseInline(e,t=this.renderer){let n="";for(let r=0;r<e.length;r++){let i=e[r];if(this.options.extensions?.renderers?.[i.type]){let a=this.options.extensions.renderers[i.type].call({parser:this},i);if(a!==false||!["escape","html","link","image","strong","em","codespan","br","del","text"].includes(i.type)){n+=a||"";continue}}let s=i;switch(s.type){case "escape":{n+=t.text(s);break}case "html":{n+=t.html(s);break}case "link":{n+=t.link(s);break}case "image":{n+=t.image(s);break}case "checkbox":{n+=t.checkbox(s);break}case "strong":{n+=t.strong(s);break}case "em":{n+=t.em(s);break}case "codespan":{n+=t.codespan(s);break}case "br":{n+=t.br(s);break}case "del":{n+=t.del(s);break}case "text":{n+=t.text(s);break}default:{let a='Token with "'+s.type+'" type was not found.';if(this.options.silent)return console.error(a),"";throw new Error(a)}}}return n}};var P=class{options;block;constructor(e){this.options=e||T;}static passThroughHooks=new Set(["preprocess","postprocess","processAllTokens","emStrongMask"]);static passThroughHooksRespectAsync=new Set(["preprocess","postprocess","processAllTokens"]);preprocess(e){return e}postprocess(e){return e}processAllTokens(e){return e}emStrongMask(e){return e}provideLexer(){return this.block?x.lex:x.lexInline}provideParser(){return this.block?b.parse:b.parseInline}};var B=class{defaults=M();options=this.setOptions;parse=this.parseMarkdown(true);parseInline=this.parseMarkdown(false);Parser=b;Renderer=y;TextRenderer=$;Lexer=x;Tokenizer=w;Hooks=P;constructor(...e){this.use(...e);}walkTokens(e,t){let n=[];for(let r of e)switch(n=n.concat(t.call(this,r)),r.type){case "table":{let i=r;for(let s of i.header)n=n.concat(this.walkTokens(s.tokens,t));for(let s of i.rows)for(let a of s)n=n.concat(this.walkTokens(a.tokens,t));break}case "list":{let i=r;n=n.concat(this.walkTokens(i.items,t));break}default:{let i=r;this.defaults.extensions?.childTokens?.[i.type]?this.defaults.extensions.childTokens[i.type].forEach(s=>{let a=i[s].flat(1/0);n=n.concat(this.walkTokens(a,t));}):i.tokens&&(n=n.concat(this.walkTokens(i.tokens,t)));}}return n}use(...e){let t=this.defaults.extensions||{renderers:{},childTokens:{}};return e.forEach(n=>{let r={...n};if(r.async=this.defaults.async||r.async||false,n.extensions&&(n.extensions.forEach(i=>{if(!i.name)throw new Error("extension name required");if("renderer"in i){let s=t.renderers[i.name];s?t.renderers[i.name]=function(...a){let o=i.renderer.apply(this,a);return o===false&&(o=s.apply(this,a)),o}:t.renderers[i.name]=i.renderer;}if("tokenizer"in i){if(!i.level||i.level!=="block"&&i.level!=="inline")throw new Error("extension level must be 'block' or 'inline'");let s=t[i.level];s?s.unshift(i.tokenizer):t[i.level]=[i.tokenizer],i.start&&(i.level==="block"?t.startBlock?t.startBlock.push(i.start):t.startBlock=[i.start]:i.level==="inline"&&(t.startInline?t.startInline.push(i.start):t.startInline=[i.start]));}"childTokens"in i&&i.childTokens&&(t.childTokens[i.name]=i.childTokens);}),r.extensions=t),n.renderer){let i=this.defaults.renderer||new y(this.defaults);for(let s in n.renderer){if(!(s in i))throw new Error(`renderer '${s}' does not exist`);if(["options","parser"].includes(s))continue;let a=s,o=n.renderer[a],l=i[a];i[a]=(...p)=>{let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c||""};}r.renderer=i;}if(n.tokenizer){let i=this.defaults.tokenizer||new w(this.defaults);for(let s in n.tokenizer){if(!(s in i))throw new Error(`tokenizer '${s}' does not exist`);if(["options","rules","lexer"].includes(s))continue;let a=s,o=n.tokenizer[a],l=i[a];i[a]=(...p)=>{let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c};}r.tokenizer=i;}if(n.hooks){let i=this.defaults.hooks||new P;for(let s in n.hooks){if(!(s in i))throw new Error(`hook '${s}' does not exist`);if(["options","block"].includes(s))continue;let a=s,o=n.hooks[a],l=i[a];P.passThroughHooks.has(s)?i[a]=p=>{if(this.defaults.async&&P.passThroughHooksRespectAsync.has(s))return (async()=>{let d=await o.call(i,p);return l.call(i,d)})();let c=o.call(i,p);return l.call(i,c)}:i[a]=(...p)=>{if(this.defaults.async)return (async()=>{let d=await o.apply(i,p);return d===false&&(d=await l.apply(i,p)),d})();let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c};}r.hooks=i;}if(n.walkTokens){let i=this.defaults.walkTokens,s=n.walkTokens;r.walkTokens=function(a){let o=[];return o.push(s.call(this,a)),i&&(o=o.concat(i.call(this,a))),o};}this.defaults={...this.defaults,...r};}),this}setOptions(e){return this.defaults={...this.defaults,...e},this}lexer(e,t){return x.lex(e,t??this.defaults)}parser(e,t){return b.parse(e,t??this.defaults)}parseMarkdown(e){return (n,r)=>{let i={...r},s={...this.defaults,...i},a=this.onError(!!s.silent,!!s.async);if(this.defaults.async===true&&i.async===false)return a(new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));if(typeof n>"u"||n===null)return a(new Error("marked(): input parameter is undefined or null"));if(typeof n!="string")return a(new Error("marked(): input parameter is of type "+Object.prototype.toString.call(n)+", string expected"));if(s.hooks&&(s.hooks.options=s,s.hooks.block=e),s.async)return (async()=>{let o=s.hooks?await s.hooks.preprocess(n):n,p=await(s.hooks?await s.hooks.provideLexer():e?x.lex:x.lexInline)(o,s),c=s.hooks?await s.hooks.processAllTokens(p):p;s.walkTokens&&await Promise.all(this.walkTokens(c,s.walkTokens));let h=await(s.hooks?await s.hooks.provideParser():e?b.parse:b.parseInline)(c,s);return s.hooks?await s.hooks.postprocess(h):h})().catch(a);try{s.hooks&&(n=s.hooks.preprocess(n));let l=(s.hooks?s.hooks.provideLexer():e?x.lex:x.lexInline)(n,s);s.hooks&&(l=s.hooks.processAllTokens(l)),s.walkTokens&&this.walkTokens(l,s.walkTokens);let c=(s.hooks?s.hooks.provideParser():e?b.parse:b.parseInline)(l,s);return s.hooks&&(c=s.hooks.postprocess(c)),c}catch(o){return a(o)}}}onError(e,t){return n=>{if(n.message+=`
+`}strong({tokens:e}){return `<strong>${this.parser.parseInline(e)}</strong>`}em({tokens:e}){return `<em>${this.parser.parseInline(e)}</em>`}codespan({text:e}){return `<code>${O(e,true)}</code>`}br(e){return "<br>"}del({tokens:e}){return `<del>${this.parser.parseInline(e)}</del>`}link({href:e,title:t,tokens:n}){let r=this.parser.parseInline(n),i=X(e);if(i===null)return r;e=i;let s='<a href="'+e+'"';return t&&(s+=' title="'+O(t)+'"'),s+=">"+r+"</a>",s}image({href:e,title:t,text:n,tokens:r}){r&&(n=this.parser.parseInline(r,this.parser.textRenderer));let i=X(e);if(i===null)return O(n);e=i;let s=`<img src="${e}" alt="${O(n)}"`;return t&&(s+=` title="${O(t)}"`),s+=">",s}text(e){return "tokens"in e&&e.tokens?this.parser.parseInline(e.tokens):"escaped"in e&&e.escaped?e.text:O(e.text)}};var $=class{strong({text:e}){return e}em({text:e}){return e}codespan({text:e}){return e}del({text:e}){return e}html({text:e}){return e}text({text:e}){return e}link({text:e}){return ""+e}image({text:e}){return ""+e}br(){return ""}checkbox({raw:e}){return e}};var b=class u{options;renderer;textRenderer;constructor(e){this.options=e||T,this.options.renderer=this.options.renderer||new y,this.renderer=this.options.renderer,this.renderer.options=this.options,this.renderer.parser=this,this.textRenderer=new $;}static parse(e,t){return new u(t).parse(e)}static parseInline(e,t){return new u(t).parseInline(e)}parse(e){let t="";for(let n=0;n<e.length;n++){let r=e[n];if(this.options.extensions?.renderers?.[r.type]){let s=r,a=this.options.extensions.renderers[s.type].call({parser:this},s);if(a!==false||!["space","hr","heading","code","table","blockquote","list","html","def","paragraph","text"].includes(s.type)){t+=a||"";continue}}let i=r;switch(i.type){case "space":{t+=this.renderer.space(i);break}case "hr":{t+=this.renderer.hr(i);break}case "heading":{t+=this.renderer.heading(i);break}case "code":{t+=this.renderer.code(i);break}case "table":{t+=this.renderer.table(i);break}case "blockquote":{t+=this.renderer.blockquote(i);break}case "list":{t+=this.renderer.list(i);break}case "checkbox":{t+=this.renderer.checkbox(i);break}case "html":{t+=this.renderer.html(i);break}case "def":{t+=this.renderer.def(i);break}case "paragraph":{t+=this.renderer.paragraph(i);break}case "text":{t+=this.renderer.text(i);break}default:{let s='Token with "'+i.type+'" type was not found.';if(this.options.silent)return console.error(s),"";throw new Error(s)}}}return t}parseInline(e,t=this.renderer){let n="";for(let r=0;r<e.length;r++){let i=e[r];if(this.options.extensions?.renderers?.[i.type]){let a=this.options.extensions.renderers[i.type].call({parser:this},i);if(a!==false||!["escape","html","link","image","strong","em","codespan","br","del","text"].includes(i.type)){n+=a||"";continue}}let s=i;switch(s.type){case "escape":{n+=t.text(s);break}case "html":{n+=t.html(s);break}case "link":{n+=t.link(s);break}case "image":{n+=t.image(s);break}case "checkbox":{n+=t.checkbox(s);break}case "strong":{n+=t.strong(s);break}case "em":{n+=t.em(s);break}case "codespan":{n+=t.codespan(s);break}case "br":{n+=t.br(s);break}case "del":{n+=t.del(s);break}case "text":{n+=t.text(s);break}default:{let a='Token with "'+s.type+'" type was not found.';if(this.options.silent)return console.error(a),"";throw new Error(a)}}}return n}};var P=class{options;block;constructor(e){this.options=e||T;}static passThroughHooks=new Set(["preprocess","postprocess","processAllTokens","emStrongMask"]);static passThroughHooksRespectAsync=new Set(["preprocess","postprocess","processAllTokens"]);preprocess(e){return e}postprocess(e){return e}processAllTokens(e){return e}emStrongMask(e){return e}provideLexer(){return this.block?x.lex:x.lexInline}provideParser(){return this.block?b.parse:b.parseInline}};var B=class{defaults=M();options=this.setOptions;parse=this.parseMarkdown(true);parseInline=this.parseMarkdown(false);Parser=b;Renderer=y;TextRenderer=$;Lexer=x;Tokenizer=w;Hooks=P;constructor(...e){this.use(...e);}walkTokens(e,t){let n=[];for(let r of e)switch(n=n.concat(t.call(this,r)),r.type){case "table":{let i=r;for(let s of i.header)n=n.concat(this.walkTokens(s.tokens,t));for(let s of i.rows)for(let a of s)n=n.concat(this.walkTokens(a.tokens,t));break}case "list":{let i=r;n=n.concat(this.walkTokens(i.items,t));break}default:{let i=r;this.defaults.extensions?.childTokens?.[i.type]?this.defaults.extensions.childTokens[i.type].forEach(s=>{let a=i[s].flat(1/0);n=n.concat(this.walkTokens(a,t));}):i.tokens&&(n=n.concat(this.walkTokens(i.tokens,t)));}}return n}use(...e){let t=this.defaults.extensions||{renderers:{},childTokens:{}};return e.forEach(n=>{let r={...n};if(r.async=this.defaults.async||r.async||false,n.extensions&&(n.extensions.forEach(i=>{if(!i.name)throw new Error("extension name required");if("renderer"in i){let s=t.renderers[i.name];s?t.renderers[i.name]=function(...a){let o=i.renderer.apply(this,a);return o===false&&(o=s.apply(this,a)),o}:t.renderers[i.name]=i.renderer;}if("tokenizer"in i){if(!i.level||i.level!=="block"&&i.level!=="inline")throw new Error("extension level must be 'block' or 'inline'");let s=t[i.level];s?s.unshift(i.tokenizer):t[i.level]=[i.tokenizer],i.start&&(i.level==="block"?t.startBlock?t.startBlock.push(i.start):t.startBlock=[i.start]:i.level==="inline"&&(t.startInline?t.startInline.push(i.start):t.startInline=[i.start]));}"childTokens"in i&&i.childTokens&&(t.childTokens[i.name]=i.childTokens);}),r.extensions=t),n.renderer){let i=this.defaults.renderer||new y(this.defaults);for(let s in n.renderer){if(!(s in i))throw new Error(`renderer '${s}' does not exist`);if(["options","parser"].includes(s))continue;let a=s,o=n.renderer[a],l=i[a];i[a]=(...p)=>{let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c||""};}r.renderer=i;}if(n.tokenizer){let i=this.defaults.tokenizer||new w(this.defaults);for(let s in n.tokenizer){if(!(s in i))throw new Error(`tokenizer '${s}' does not exist`);if(["options","rules","lexer"].includes(s))continue;let a=s,o=n.tokenizer[a],l=i[a];i[a]=(...p)=>{let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c};}r.tokenizer=i;}if(n.hooks){let i=this.defaults.hooks||new P;for(let s in n.hooks){if(!(s in i))throw new Error(`hook '${s}' does not exist`);if(["options","block"].includes(s))continue;let a=s,o=n.hooks[a],l=i[a];P.passThroughHooks.has(s)?i[a]=p=>{if(this.defaults.async&&P.passThroughHooksRespectAsync.has(s))return (async()=>{let d=await o.call(i,p);return l.call(i,d)})();let c=o.call(i,p);return l.call(i,c)}:i[a]=(...p)=>{if(this.defaults.async)return (async()=>{let d=await o.apply(i,p);return d===false&&(d=await l.apply(i,p)),d})();let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c};}r.hooks=i;}if(n.walkTokens){let i=this.defaults.walkTokens,s=n.walkTokens;r.walkTokens=function(a){let o=[];return o.push(s.call(this,a)),i&&(o=o.concat(i.call(this,a))),o};}this.defaults={...this.defaults,...r};}),this}setOptions(e){return this.defaults={...this.defaults,...e},this}lexer(e,t){return x.lex(e,t??this.defaults)}parser(e,t){return b.parse(e,t??this.defaults)}parseMarkdown(e){return (n,r)=>{let i={...r},s={...this.defaults,...i},a=this.onError(!!s.silent,!!s.async);if(this.defaults.async===true&&i.async===false)return a(new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));if(typeof n>"u"||n===null)return a(new Error("marked(): input parameter is undefined or null"));if(typeof n!="string")return a(new Error("marked(): input parameter is of type "+Object.prototype.toString.call(n)+", string expected"));if(s.hooks&&(s.hooks.options=s,s.hooks.block=e),s.async)return (async()=>{let o=s.hooks?await s.hooks.preprocess(n):n,p=await(s.hooks?await s.hooks.provideLexer():e?x.lex:x.lexInline)(o,s),c=s.hooks?await s.hooks.processAllTokens(p):p;s.walkTokens&&await Promise.all(this.walkTokens(c,s.walkTokens));let h=await(s.hooks?await s.hooks.provideParser():e?b.parse:b.parseInline)(c,s);return s.hooks?await s.hooks.postprocess(h):h})().catch(a);try{s.hooks&&(n=s.hooks.preprocess(n));let l=(s.hooks?s.hooks.provideLexer():e?x.lex:x.lexInline)(n,s);s.hooks&&(l=s.hooks.processAllTokens(l)),s.walkTokens&&this.walkTokens(l,s.walkTokens);let c=(s.hooks?s.hooks.provideParser():e?b.parse:b.parseInline)(l,s);return s.hooks&&(c=s.hooks.postprocess(c)),c}catch(o){return a(o)}}}onError(e,t){return n=>{if(n.message+=`
 Please report this to https://github.com/markedjs/marked.`,e){let r="<p>An error occurred:</p><pre>"+O(n.message+"",true)+"</pre>";return t?Promise.resolve(r):r}if(t)return Promise.reject(n);throw n}}};var L=new B;function g(u,e){return L.parse(u,e)}g.options=g.setOptions=function(u){return L.setOptions(u),g.defaults=L.defaults,H(g.defaults),g};g.getDefaults=M;g.defaults=T;g.use=function(...u){return L.use(...u),g.defaults=L.defaults,H(g.defaults),g};g.walkTokens=function(u,e){return L.walkTokens(u,e)};g.parseInline=L.parseInline;g.Parser=b;g.parser=b.parse;g.Renderer=y;g.TextRenderer=$;g.Lexer=x;g.lexer=x.lex;g.Tokenizer=w;g.Hooks=P;g.parse=g;g.options;g.setOptions;g.use;g.walkTokens;g.parseInline;b.parse;x.lex;
 
 /*
@@ -2915,43 +2915,24 @@ class EditorUI {
 }
 
 class EditorDialog extends EditorUI {
-    #body = document.createElement('div');
     #cleanUpHooks = [];
     #createEditorComponent;
-    #dialog = document.createElement('dialog');
+    #dialog;
     #el;
-    #footer = document.createElement('footer');
-    #form = document.createElement('form');
+    #form;
     #onClosed;
     #onOpen;
-    constructor(name, el, settings, options) {
-        super(`${name}-dialog`, el);
-        this.#el = el;
+    constructor(name, settings, options) {
+        const shell = settings.createDialogShell
+            ? settings.createDialogShell({ name, buttons: options.buttons })
+            : createDefaultDialogShell(name, options);
+        super(`${name}-dialog`, shell.containerElement);
+        this.#el = shell.containerElement;
+        this.#dialog = shell.dialogElement;
+        this.#form = shell.formElement;
         this.#onClosed = settings.onClosed;
         this.#onOpen = settings.onOpen;
         this.#createEditorComponent = settings.createEditorComponent;
-        this.#form.noValidate = true;
-        this.#form.id = `${name}-dialog-form`;
-        this.#form.append(this.#el);
-        this.#body.append(this.#form);
-        if (options.buttons?.close) {
-            const button = document.createElement('button');
-            button.textContent = options.buttons.close;
-            button.type = 'button';
-            button.addEventListener('click', () => {
-                this.close();
-            });
-            this.#footer.append(button);
-        }
-        if (options.buttons?.complete) {
-            const button = document.createElement('button');
-            button.textContent = options.buttons.complete;
-            button.type = 'submit';
-            button.setAttribute('form', this.#form.id);
-            this.#footer.append(button);
-        }
-        this.#dialog.append(this.#body, this.#footer);
-        this.#form.method = 'dialog';
         this.#form.addEventListener('submit', (e) => {
             const submitter = this.#form.ownerDocument.activeElement;
             const cancel = this.onSubmit(e, submitter);
@@ -2965,8 +2946,6 @@ class EditorDialog extends EditorUI {
             return;
         });
         this.#sanitize(this.#el);
-        document.body.append(this.#dialog);
-        this.#dialog.classList.add('bge-dialog');
         this.#dialog.addEventListener('close', this.closed.bind(this));
     }
     clearTemplate() {
@@ -3068,12 +3047,58 @@ class EditorDialog extends EditorUI {
         }
     }
 }
+/**
+ *
+ * @param name
+ * @param options
+ */
+function createDefaultDialogShell(name, options) {
+    const dialogId = `${name}-dialog`;
+    const formId = `${name}-dialog-form`;
+    const dialog = document.createElement('dialog');
+    dialog.id = dialogId;
+    dialog.classList.add('bge-dialog');
+    dialog.setAttribute('closedby', 'any');
+    const body = document.createElement('div');
+    const form = document.createElement('form');
+    form.noValidate = true;
+    form.method = 'dialog';
+    form.id = formId;
+    const container = document.createElement('div');
+    form.append(container);
+    body.append(form);
+    const footer = document.createElement('footer');
+    if (options.buttons?.close) {
+        const button = document.createElement('button');
+        button.textContent = options.buttons.close;
+        button.type = 'button';
+        button.setAttribute('command', 'close');
+        button.setAttribute('commandfor', dialogId);
+        // Fallback for environments without Invoker Commands support
+        button.addEventListener('click', () => dialog.close());
+        footer.append(button);
+    }
+    if (options.buttons?.complete) {
+        const button = document.createElement('button');
+        button.textContent = options.buttons.complete;
+        button.type = 'submit';
+        button.setAttribute('form', formId);
+        footer.append(button);
+    }
+    dialog.append(body, footer);
+    document.body.append(dialog);
+    return {
+        dialogElement: dialog,
+        containerElement: container,
+        formElement: form,
+    };
+}
 
 class BlockCatalogDialog extends EditorDialog {
     catalog;
     #addBlock;
     constructor(catalog, settings) {
-        super('catalog', document.createElement('div'), settings, {
+        super('catalog', settings, {
             buttons: {
                 close: 'キャンセル',
             },
@@ -3098,7 +3123,7 @@ class BlockOptionsDialog extends EditorDialog {
     #getCurrentBlock;
     #onChangeBlock;
     constructor(settings) {
-        super('options', document.createElement('div'), settings, {
+        super('options', settings, {
             buttons: {
                 close: 'キャンセル',
                 complete: '決定',
@@ -3296,13 +3321,15 @@ function comparePriority(a, b) {
 
 /**
  * Get all custom properties from document
- * @param scope
- * @param containerType
+ * @param scope - Document to scan for CSS custom properties
+ * @param containerType - Container type to filter container-scoped properties (prefixed with `_`)
+ * @returns Categorized map of custom properties grouped by property name
  */
 function getCustomProperties(scope, containerType) {
     const categories = new Map();
     const defaultValues = new Map();
-    searchCustomProperty(scope, (cssProperty, value, layers) => {
+    const nestedDefaultValues = new Map();
+    searchCustomProperty(scope, (cssProperty, value, layers, isNested) => {
         if (!cssProperty.startsWith(BLOCK_OPTION_CSS_CUSTOM_PROPERTY_PREFIX)) {
             return;
         }
@@ -3338,8 +3365,12 @@ function getCustomProperties(scope, containerType) {
                 isDefault: true,
                 priority: layers.map((layer) => layer.priority),
             };
-            const currentDefaultValue = defaultValues.get(propName);
-            defaultValues.set(propName, currentDefaultValue
+            // Direct selectors take precedence over nested selectors for default.
+            // Nested selectors (e.g. `.parent [data-bge-container]`) are context-specific
+            // overrides; they are used as fallback when no direct selector defines a default.
+            const targetMap = isNested ? nestedDefaultValues : defaultValues;
+            const currentDefaultValue = targetMap.get(propName);
+            targetMap.set(propName, currentDefaultValue
                 ? compareCustomPropertyByLayerPriority(currentDefaultValue, newDefaultValue)
                 : newDefaultValue);
         }
@@ -3356,6 +3387,13 @@ function getCustomProperties(scope, containerType) {
             }
         }
     }
+    // Merge nested defaults as fallback: use nested default only when
+    // no direct (non-nested) default exists for a category.
+    for (const [category, property] of nestedDefaultValues.entries()) {
+        if (!defaultValues.has(category)) {
+            defaultValues.set(category, property);
+        }
+    }
     for (const [category, property] of defaultValues.entries()) {
         const currentMap = categories.get(category);
         if (!currentMap) {
@@ -3371,9 +3409,10 @@ function getCustomProperties(scope, containerType) {
     return categories;
 }
 /**
- *
- * @param scope
- * @param property
+ * Get a single custom property value from document
+ * @param scope - Document to scan for CSS custom properties
+ * @param property - Property name or pattern to match against
+ * @returns The property value with the highest cascade priority, or `null` if not found
  */
 function getCustomProperty(scope, property) {
     let resultValue = null;
@@ -3455,9 +3494,9 @@ function collectGlobalTopLevelLayerOrder(scope) {
 /**
  * Get all CSSStyleRule from CSSRule array recursively
  * @param rules - CSSRule array
- * @param layers
- * @param scope - Document
- * @param scopeRoot
+ * @param layers - Accumulated layer priority chain from parent rules
+ * @param scope - Document providing CSSOM constructors
+ * @param scopeRoot - Selector from enclosing `@scope` rule, if any
  * @param topLevelLayerOrder - Global layer order from collectGlobalTopLevelLayerOrder (top-level calls only)
  * @returns CSSStyleRule array
  */
@@ -3528,9 +3567,9 @@ function getStyleRules(rules, layers, scope, scopeRoot = null, topLevelLayerOrde
     return styleRules;
 }
 /**
- *
- * @param scope
- * @param found
+ * Search all stylesheets for custom properties on the block option scope selector
+ * @param scope - Document to scan
+ * @param found - Callback invoked for each custom property found
  */
 function searchCustomProperty(scope, found) {
     const globalLayerOrder = collectGlobalTopLevelLayerOrder(scope);
@@ -3538,15 +3577,18 @@ function searchCustomProperty(scope, found) {
         try {
             const styleRules = getStyleRules(styleSheet.cssRules, [], scope, null, globalLayerOrder);
             for (const cssRule of styleRules) {
-                const selector = cssRule.rule.selectorText.trim().replace(/^&/, '').trim();
+                const rawSelector = cssRule.rule.selectorText.trim();
+                const selector = rawSelector.replace(/^&/, '').trim();
                 if (selector === BLOCK_OPTION_SCOPE_SELECTOR ||
                     (selector === ':scope' && cssRule.scopeRoot === BLOCK_OPTION_SCOPE_SELECTOR)) {
+                    // Detect nested selectors: `& [data-bge-container]` has a parent context
+                    const isNested = rawSelector !== selector;
                     for (const cssProperty of cssRule.rule.style) {
                         if (!cssProperty.startsWith('--')) {
                             continue;
                         }
                         const value = cssRule.rule.style.getPropertyValue(cssProperty);
-                        found(cssProperty, value, cssRule.layers);
+                        found(cssProperty, value, cssRule.layers, isNested);
                     }
                 }
             }
@@ -3561,7 +3603,8 @@ function searchCustomProperty(scope, found) {
 }
 /**
  * Get repeat-min-inline-size variant definitions from document
- * @param scope
+ * @param scope - Document to scan for `--bge-repeat-min-inline-size` variants
+ * @returns Category containing variant properties, or `null` if no variants found
  */
 function getRepeatMinInlineSizeVariants(scope) {
     const PREFIX = '--bge-repeat-min-inline-size';
@@ -3612,8 +3655,8 @@ function getRepeatMinInlineSizeVariants(scope) {
  * - レイヤーの数が少ないほど優先度が高い
  * - レイヤーの数が同じ場合は、レイヤーの優先度の値が小さいほど優先度が高い
  * - 全てのレイヤーの優先度が同じ場合は、bを返す
- * @param a
- * @param b
+ * @param a - First candidate property
+ * @param b - Second candidate property (wins on equal priority)
  */
 function compareCustomPropertyByLayerPriority(a, b) {
     const result = comparePriority(a.priority, b.priority);
@@ -3623,124 +3666,6 @@ function compareCustomPropertyByLayerPriority(a, b) {
     return b;
 }
 
-const getCSSPropertyAsNumberCache = new Map();
-/**
- *
- * @param el
- * @param property
- */
-function getCSSPropertyAsNumber(el, property) {
-    const value = window.getComputedStyle(el).getPropertyValue(property);
-    if (value === '') {
-        return 0;
-    }
-    const cached = getCSSPropertyAsNumberCache.get(value);
-    if (cached !== undefined) {
-        return cached;
-    }
-    const i_or_nan = Number.parseInt(value, 10);
-    const result = Number.isNaN(i_or_nan) ? 0 : i_or_nan;
-    getCSSPropertyAsNumberCache.set(value, result);
-    return result;
-}
-
-class BlockMenu extends EditorUI {
-    #engine;
-    #mouseX = 0;
-    #mouseY = 0;
-    #raf = 0;
-    constructor(engine, el, create) {
-        super('block-menu', el, {
-            stylesheet: `
-				[data-bge-component='block-menu'] {
-					position: absolute;
-					z-index: 2147483647;
-					pointer-events: none;
-				}
-			`,
-        });
-        create(this.el);
-        this.#engine = engine;
-        const update = () => {
-            cancelAnimationFrame(this.#raf);
-            if (engine.isProcessed) {
-                this.hide();
-                return;
-            }
-            this.#raf = requestAnimationFrame(() => {
-                this.#updatePosition();
-            });
-        };
-        this.el.ownerDocument.body.addEventListener('mousemove', (e) => {
-            this.#mouseX = e.pageX;
-            this.#mouseY = e.pageY;
-            update();
-        });
-        globalThis.addEventListener('resize', this.hide.bind(this));
-        this.el.ownerDocument.body.addEventListener('mouseleave', this.hide.bind(this));
-        this.el.ownerDocument.addEventListener('mouseleave', this.hide.bind(this));
-        this.el.ownerDocument.defaultView?.addEventListener('mouseleave', this.hide.bind(this));
-        const observer = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                for (const node of mutation.addedNodes) {
-                    if (!(node instanceof HTMLElement)) {
-                        continue;
-                    }
-                    const images = node.querySelectorAll('img');
-                    for (const img of images) {
-                        img.addEventListener('load', update, { once: true });
-                        img.addEventListener('error', update, { once: true });
-                        img.addEventListener('abort', update, { once: true });
-                    }
-                }
-            }
-        });
-        observer.observe(this.el.ownerDocument, { childList: true, subtree: true });
-        engine.el.addEventListener('bge:saved', update);
-    }
-    #getSelectedBlock() {
-        const $blocks = [
-            ...this.el.ownerDocument.body.querySelectorAll('[data-bge-container]'),
-        ];
-        for (const $block of $blocks) {
-            const rect = $block.getBoundingClientRect();
-            const marginBlockEnd = getCSSPropertyAsNumber($block, 'margin-block-end');
-            const onMouse = rect.left <= this.#mouseX &&
-                this.#mouseX <= rect.right &&
-                rect.top <= this.#mouseY &&
-                this.#mouseY <= rect.bottom + marginBlockEnd;
-            if (onMouse) {
-                const block = BurgerBlock.getBlock($block);
-                return { block, rect, marginBlockEnd };
-            }
-        }
-        return null;
-    }
-    #updatePosition() {
-        const selected = this.#getSelectedBlock();
-        if (!selected) {
-            this.hide();
-            return;
-        }
-        this.show();
-        const { block, rect, marginBlockEnd } = selected;
-        this.#engine.componentObserver.notify('select-block', {
-            block,
-            width: rect.width,
-            height: rect.height,
-            x: rect.left,
-            y: rect.top,
-            marginBlockEnd,
-        });
-    }
-    hide() {
-        super.hide();
-        this.#mouseX = 0;
-        this.#mouseY = 0;
-        this.#engine.clearCurrentBlock();
-    }
-}
-
 class InitialInsertionButton extends EditorUI {
     #afterInsert;
     #engine;
@@ -3849,46 +3774,74 @@ class EditableArea extends EditorUI {
     get isVisualMode() {
         return this.#isVisualMode;
     }
-    constructor(type, initialContent, engine, createBlockMenu, stylesheets = [], classList = []) {
-        const viewNode = document.createElement('div');
-        super(`${type}-editable-area`, viewNode);
+    constructor(type, initialContent, engine, createBlockMenu, createInitialInsertionButton, stylesheets = [], classList = [], createShell) {
+        const shell = createShell
+            ? createShell({ type, initialContent, stylesheets, classList })
+            : createDefaultEditableAreaShell(initialContent, classList);
+        super(`${type}-editable-area`, shell.viewNode);
         this.type = type;
         this.#engine = engine;
-        this.#engine.viewArea.append(viewNode);
-        this.#sourceTextarea = document.createElement('textarea');
-        this.#sourceTextarea.spellcheck = false;
-        viewNode.append(this.#sourceTextarea);
-        this.#frameElement = document.createElement('iframe');
-        this.#frameElement.setAttribute('width', '100%;');
-        this.#frameElement.setAttribute('scrolling', 'no');
-        viewNode.append(this.#frameElement);
+        this.#engine.viewArea.append(shell.viewNode);
+        this.#sourceTextarea = shell.sourceTextarea;
+        this.#frameElement = shell.frameElement;
+        this.#containerElement = shell.containerElement;
         if (!this.#frameElement.contentWindow) {
             throw new Error('Impossible error: The contentWindow of created iframe is null.');
         }
-        this.#frameElement.contentWindow.document.open();
-        this.#frameElement.contentWindow.document.close();
+        const frameDoc = this.#frameElement.contentWindow.document;
+        frameDoc.open();
+        frameDoc.close();
         for (const { path, id } of stylesheets) {
-            appendStylesheetTo(this.#frameElement.contentWindow.document, path, id);
-        }
-        this.#frameElement.contentWindow.document.body.setAttribute('style', 'margin: 0; border: 0;');
-        this.#containerElement =
-            this.#frameElement.contentWindow.document.createElement('div');
-        this.#containerElement.id = CONTENT_ID;
-        this.#containerElement.style.setProperty('padding', `${CONTAINER_PADDING}px`, 'important');
-        this.#containerElement.style.setProperty('overflow', 'hidden', 'important');
-        this.#containerElement.style.setProperty('margin', '0', 'important');
-        this.#containerElement.style.setProperty('box-sizing', 'border-box', 'important');
-        this.#containerElement.classList.add(...classList);
-        this.#containerElement.innerHTML = initialContent;
-        this.#containerElement.dataset.bgeComponent = 'editable-area';
-        this.blockMenu = new BlockMenu(this.#engine, this.#frameElement.contentWindow.document.createElement('div'), (el) => createBlockMenu(el, engine));
+            appendStylesheetTo(frameDoc, path, id);
+        }
+        frameDoc.body.setAttribute('style', 'margin: 0; border: 0;');
+        const blockMenuEl = frameDoc.createElement('div');
+        blockMenuEl.dataset.bgeComponent = 'block-menu';
+        const blockMenuStylesheetUrl = createStylesheet(`[data-bge-component='block-menu'] {
+				position: absolute;
+				z-index: 2147483647;
+				pointer-events: none;
+			}`, CSS_LAYER.ui);
+        appendStylesheetTo(frameDoc, blockMenuStylesheetUrl, `block-menu-${CSS_LAYER.ui}`);
+        const { hide: blockMenuHide } = createBlockMenu(blockMenuEl, engine);
+        this.blockMenu = {
+            el: blockMenuEl,
+            hide: () => {
+                blockMenuEl.hidden = true;
+                blockMenuHide();
+            },
+        };
         this.insertionPoint = new InsertionPoint(this.#engine);
-        this.#insertionButton = new InitialInsertionButton(this.insertionPoint, this.#engine, () => this.#engine.blockCatalogDialog.open());
-        const els = this.#frameElement.contentWindow.document.createDocumentFragment();
+        const onInsert = () => {
+            if (this.#engine.isProcessed) {
+                return;
+            }
+            this.#insertionButton.hide();
+            this.insertionPoint.set(null, false);
+            this.#engine.blockCatalogDialog.open();
+        };
+        if (createInitialInsertionButton) {
+            const buttonEl = frameDoc.createElement('div');
+            buttonEl.dataset.bgeComponent = 'initial-insertion';
+            createInitialInsertionButton(buttonEl, onInsert);
+            this.#insertionButton = {
+                el: buttonEl,
+                show: () => {
+                    buttonEl.hidden = false;
+                },
+                hide: () => {
+                    buttonEl.hidden = true;
+                },
+            };
+        }
+        else {
+            this.#insertionButton = new InitialInsertionButton(this.insertionPoint, this.#engine, () => this.#engine.blockCatalogDialog.open());
+        }
+        const els = frameDoc.createDocumentFragment();
         els.append(this.blockMenu.el);
         els.append(this.#insertionButton.el);
         els.append(this.#containerElement);
-        this.#frameElement.contentWindow.document.body.append(els);
+        frameDoc.body.append(els);
         window.addEventListener('resize', this.#setHeightTrigger.bind(this), true);
         // eslint-disable-next-line no-restricted-syntax
         window.addEventListener('DOMContentLoaded', this.#setHeightTrigger.bind(this), false);
@@ -3896,7 +3849,7 @@ class EditableArea extends EditorUI {
         this.#frameElement.contentWindow.addEventListener('resize', this.#setHeightTrigger.bind(this), true);
         // eslint-disable-next-line no-restricted-syntax
         this.#frameElement.contentWindow.addEventListener('DOMContentLoaded', this.#setHeightTrigger.bind(this), false);
-        this.#frameElement.contentWindow.document.addEventListener('load', this.#setHeightTrigger.bind(this), true);
+        frameDoc.addEventListener('load', this.#setHeightTrigger.bind(this), true);
         this.#sourceTextarea.addEventListener('blur', this.#saveSource.bind(this), false);
     }
     async copyTo(editableArea) {
@@ -3987,12 +3940,42 @@ class EditableArea extends EditorUI {
         this.#sourceTextarea.hidden = !!visualMode;
         this.#sourceTextarea.disabled = !!visualMode;
     }
-    static async new(type, initialContent, engine, createBlockMenu, stylesheets, classList) {
-        const editableArea = new EditableArea(type, initialContent, engine, createBlockMenu, stylesheets, classList);
+    static async new(type, initialContent, engine, createBlockMenu, createInitialInsertionButton, stylesheets, classList, createShell) {
+        const editableArea = new EditableArea(type, initialContent, engine, createBlockMenu, createInitialInsertionButton, stylesheets, classList, createShell);
         await editableArea.#init();
         return editableArea;
     }
 }
+/**
+ *
+ * @param initialContent
+ * @param classList
+ */
+function createDefaultEditableAreaShell(initialContent, classList) {
+    const viewNode = document.createElement('div');
+    const sourceTextarea = document.createElement('textarea');
+    sourceTextarea.spellcheck = false;
+    viewNode.append(sourceTextarea);
+    const frameElement = document.createElement('iframe');
+    frameElement.setAttribute('width', '100%;');
+    frameElement.setAttribute('scrolling', 'no');
+    viewNode.append(frameElement);
+    const containerElement = document.createElement('div');
+    containerElement.id = CONTENT_ID;
+    containerElement.style.setProperty('padding', `${CONTAINER_PADDING}px`, 'important');
+    containerElement.style.setProperty('overflow', 'hidden', 'important');
+    containerElement.style.setProperty('margin', '0', 'important');
+    containerElement.style.setProperty('box-sizing', 'border-box', 'important');
+    containerElement.classList.add(...classList);
+    containerElement.innerHTML = initialContent;
+    containerElement.dataset.bgeComponent = 'editable-area';
+    return {
+        viewNode,
+        frameElement,
+        sourceTextarea,
+        containerElement,
+    };
+}
 
 /**
  *
@@ -4219,7 +4202,7 @@ class ItemEditorDialog extends EditorDialog {
         return this.#componentObserver();
     }
     constructor(settings) {
-        super('item-editor', document.createElement('div'), settings, {
+        super('item-editor', settings, {
             buttons: {
                 close: 'キャンセル',
                 complete: '決定',
@@ -4513,6 +4496,7 @@ class BurgerEditorEngine {
                 }
                 return;
             },
+            createDialogShell: options.dialogShell,
         };
         this.blockCatalogDialog = new BlockCatalogDialog(options.catalog, {
             ...dialogSettings,
@@ -4776,13 +4760,13 @@ class BurgerEditorEngine {
         // @ts-ignore force assign to readonly property
         engine.#main =
             //
-            await EditableArea.new('main', mainInitialContent, engine, options.blockMenu, stylesheets, options.config.classList);
+            await EditableArea.new('main', mainInitialContent, engine, options.blockMenu, options.initialInsertionButton, stylesheets, options.config.classList, options.editableAreaShell);
         const draftInitialContent = typeof options.initialContents === 'string' ? null : options.initialContents.draft;
         // @ts-ignore force assign to readonly property
         engine.#draft =
             draftInitialContent == null
                 ? null
-                : await EditableArea.new('draft', draftInitialContent, engine, options.blockMenu, stylesheets, options.config.classList);
+                : await EditableArea.new('draft', draftInitialContent, engine, options.blockMenu, options.initialInsertionButton, stylesheets, options.config.classList, options.editableAreaShell);
         engine.#current = engine.#main;
         engine.showMain();
         engine.save();
@@ -4799,6 +4783,50 @@ class BurgerEditorEngine {
     }
 }
 
+const getCSSPropertyAsNumberCache = new Map();
+/**
+ *
+ * @param el
+ * @param property
+ */
+function getCSSPropertyAsNumber(el, property) {
+    const value = window.getComputedStyle(el).getPropertyValue(property);
+    if (value === '') {
+        return 0;
+    }
+    const cached = getCSSPropertyAsNumberCache.get(value);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const i_or_nan = Number.parseInt(value, 10);
+    const result = Number.isNaN(i_or_nan) ? 0 : i_or_nan;
+    getCSSPropertyAsNumberCache.set(value, result);
+    return result;
+}
+
+/**
+ *
+ * @param doc
+ * @param x
+ * @param y
+ */
+function getBlockAtPosition(doc, x, y) {
+    const blocks = doc.body.querySelectorAll('[data-bge-container]');
+    for (const $block of blocks) {
+        const rect = $block.getBoundingClientRect();
+        const marginBlockEnd = getCSSPropertyAsNumber($block, 'margin-block-end');
+        const onMouse = rect.left <= x &&
+            x <= rect.right &&
+            rect.top <= y &&
+            y <= rect.bottom + marginBlockEnd;
+        if (onMouse) {
+            const block = BurgerBlock.getBlock($block);
+            return { block, rect, marginBlockEnd };
+        }
+    }
+    return null;
+}
+
 const IconAlignBoxCenterStretch = "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-align-box-center-stretch\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2\" />\n  <path d=\"M11 17h2\" />\n  <path d=\"M9 12h6\" />\n  <path d=\"M10 7h4\" />\n</svg>";
 
 const IconAlignCenter = "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-align-center\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M4 6l16 0\" />\n  <path d=\"M8 12l8 0\" />\n  <path d=\"M6 18l12 0\" />\n</svg>";
@@ -19777,6 +19805,9 @@ function getAttributesFromExtensions(extensions) {
     keepOnSplit: true,
     isRequired: false
   };
+  const nodeExtensionTypes = nodeExtensions.filter((ext) => ext.name !== "text").map((ext) => ext.name);
+  const markExtensionTypes = markExtensions.map((ext) => ext.name);
+  const allExtensionTypes = [...nodeExtensionTypes, ...markExtensionTypes];
   extensions.forEach((extension) => {
     const context = {
       name: extension.name,
@@ -19794,7 +19825,19 @@ function getAttributesFromExtensions(extensions) {
     }
     const globalAttributes = addGlobalAttributes();
     globalAttributes.forEach((globalAttribute) => {
-      globalAttribute.types.forEach((type) => {
+      let resolvedTypes;
+      if (Array.isArray(globalAttribute.types)) {
+        resolvedTypes = globalAttribute.types;
+      } else if (globalAttribute.types === "*") {
+        resolvedTypes = allExtensionTypes;
+      } else if (globalAttribute.types === "nodes") {
+        resolvedTypes = nodeExtensionTypes;
+      } else if (globalAttribute.types === "marks") {
+        resolvedTypes = markExtensionTypes;
+      } else {
+        resolvedTypes = [];
+      }
+      resolvedTypes.forEach((type) => {
         Object.entries(globalAttribute.attributes).forEach(([name, attribute]) => {
           extensionAttributes.push({
             type,
@@ -20334,6 +20377,9 @@ function isMarkActive(state, typeOrName, attributes = {}) {
     const from = $from.pos;
     const to = $to.pos;
     state.doc.nodesBetween(from, to, (node, pos) => {
+      if (type && node.inlineContent && !node.type.allowsMarkType(type)) {
+        return false;
+      }
       if (!node.isText && !node.marks.length) {
         return;
       }
@@ -21894,6 +21940,39 @@ var ExtensionManager = class {
       };
     }, baseDispatch);
   }
+  /**
+   * Get the composed transformPastedHTML function from all extensions.
+   * @param baseTransform The base transform function (e.g. from the editor props)
+   * @returns A composed transform function that chains all extension transforms
+   */
+  transformPastedHTML(baseTransform) {
+    const { editor } = this;
+    const extensions = sortExtensions([...this.extensions]);
+    return extensions.reduce(
+      (transform, extension) => {
+        const context = {
+          name: extension.name,
+          options: extension.options,
+          storage: this.editor.extensionStorage[extension.name],
+          editor,
+          type: getSchemaTypeByName(extension.name, this.schema)
+        };
+        const extensionTransform = getExtensionField(
+          extension,
+          "transformPastedHTML",
+          context
+        );
+        if (!extensionTransform) {
+          return transform;
+        }
+        return (html, view) => {
+          const transformedHtml = transform(html, view);
+          return extensionTransform.call(context, transformedHtml);
+        };
+      },
+      baseTransform || ((html) => html)
+    );
+  }
   get markViews() {
     const { editor } = this;
     const { markExtensions } = splitExtensions(this.extensions);
@@ -22889,7 +22968,7 @@ var Editor = class extends EventEmitter {
     return this.options.editable && this.view && this.view.editable;
   }
   /**
-   * Returns the editor state.
+   * Returns the editor view.
    */
   get view() {
     if (this.editorView) {
@@ -23057,6 +23136,8 @@ var Editor = class extends EventEmitter {
     const { editorProps, enableExtensionDispatchTransaction } = this.options;
     const baseDispatch = editorProps.dispatchTransaction || this.dispatchTransaction.bind(this);
     const dispatch = enableExtensionDispatchTransaction ? this.extensionManager.dispatchTransaction(baseDispatch) : baseDispatch;
+    const baseTransformPastedHTML = editorProps.transformPastedHTML;
+    const transformPastedHTML = this.extensionManager.transformPastedHTML(baseTransformPastedHTML);
     this.editorView = new EditorView(element, {
       ...editorProps,
       attributes: {
@@ -23065,6 +23146,7 @@ var Editor = class extends EventEmitter {
         ...editorProps == null ? void 0 : editorProps.attributes
       },
       dispatchTransaction: dispatch,
+      transformPastedHTML,
       state: this.editorState,
       markViews: this.extensionManager.markViews,
       nodeViews: this.extensionManager.nodeViews
@@ -34703,18 +34785,6 @@ if (typeof window !== 'undefined') {
 	((window.__svelte ??= {}).v ??= new Set()).add(PUBLIC_VERSION);
 }
 
-/** True if experimental.async=true */
-/** True if we're not certain that we only have Svelte 5 code in the compilation */
-let legacy_mode_flag = false;
-/** True if $inspect.trace is used */
-let tracing_mode_flag = false;
-
-function enable_legacy_mode_flag() {
-	legacy_mode_flag = true;
-}
-
-enable_legacy_mode_flag();
-
 const EACH_ITEM_REACTIVE = 1;
 const EACH_INDEX_REACTIVE = 1 << 1;
 /** See EachBlock interface metadata.is_controlled for an explanation what this is */
@@ -34735,6 +34805,7 @@ const UNINITIALIZED = Symbol();
 
 const NAMESPACE_HTML = 'http://www.w3.org/1999/xhtml';
 const NAMESPACE_SVG = 'http://www.w3.org/2000/svg';
+const NAMESPACE_MATHML = 'http://www.w3.org/1998/Math/MathML';
 
 const ATTACHMENT_KEY = '@attach';
 
@@ -34900,21 +34971,10 @@ const STALE_REACTION = new (class StaleReactionError extends Error {
 	message = 'The reaction that called `getAbortSignal()` was re-run or destroyed';
 })();
 
-const IS_XHTML = /* @__PURE__ */ globalThis.document?.contentType?.includes('xml') ?? false;
-
-/* This file is generated by scripts/process-messages/index.js. Do not edit! */
-
-
-/**
- * `%name%(...)` can only be used during component initialisation
- * @param {string} name
- * @returns {never}
- */
-function lifecycle_outside_component(name) {
-	{
-		throw new Error(`https://svelte.dev/e/lifecycle_outside_component`);
-	}
-}
+const IS_XHTML =
+	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
+	!!globalThis.document?.contentType &&
+	/* @__PURE__ */ globalThis.document.contentType.includes('xml');
 
 /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
@@ -35079,6 +35139,16 @@ function safe_equals(value) {
 	return !safe_not_equal(value, this.v);
 }
 
+/** True if experimental.async=true */
+/** True if we're not certain that we only have Svelte 5 code in the compilation */
+let legacy_mode_flag = false;
+/** True if $inspect.trace is used */
+let tracing_mode_flag = false;
+
+function enable_legacy_mode_flag() {
+	legacy_mode_flag = true;
+}
+
 /** @import { ComponentContext, DevStackEntry, Effect } from '#client' */
 
 /** @type {ComponentContext | null} */
@@ -35295,7 +35365,6 @@ function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
 
 /** @import { Fork } from 'svelte' */
 /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
-/** @import { Boundary } from '../dom/blocks/boundary' */
 
 /** @type {Set<Batch>} */
 const batches = new Set();
@@ -35325,12 +35394,17 @@ let queued_root_effects = [];
 /** @type {Effect | null} */
 let last_scheduled_effect = null;
 
-let is_flushing = false;
 let is_flushing_sync = false;
 
-class Batch {
-	committed = false;
+/**
+ * During traversal, this is an array. Newly created effects are (if not immediately
+ * executed) pushed to this array, rather than going through the scheduling
+ * rigamarole that would cause another turn of the flush loop.
+ * @type {Effect[] | null}
+ */
+let collected_effects = null;
 
+class Batch {
 	/**
 	 * The current values of any sources that are updated in this batch
 	 * They keys of this map are identical to `this.#previous`
@@ -35348,7 +35422,7 @@ class Batch {
 	/**
 	 * When the batch is committed (and the DOM is updated), we need to remove old branches
 	 * and append new ones by calling the functions added inside (if/each/key/etc) blocks
-	 * @type {Set<() => void>}
+	 * @type {Set<(batch: Batch) => void>}
 	 */
 	#commit_callbacks = new Set();
 
@@ -35400,7 +35474,7 @@ class Batch {
 
 	#decrement_queued = false;
 
-	is_deferred() {
+	#is_deferred() {
 		return this.is_fork || this.#blocking_pending > 0;
 	}
 
@@ -35446,7 +35520,7 @@ class Batch {
 		this.apply();
 
 		/** @type {Effect[]} */
-		var effects = [];
+		var effects = (collected_effects = []);
 
 		/** @type {Effect[]} */
 		var render_effects = [];
@@ -35460,7 +35534,9 @@ class Batch {
 			// log_inconsistent_branches(root);
 		}
 
-		if (this.is_deferred()) {
+		collected_effects = null;
+
+		if (this.#is_deferred()) {
 			this.#defer_effects(render_effects);
 			this.#defer_effects(effects);
 
@@ -35468,22 +35544,26 @@ class Batch {
 				reset_branch(e, t);
 			}
 		} else {
+			// If sources are written to, then work needs to happen in a separate batch, else prior sources would be mixed with
+			// newly updated sources, which could lead to infinite loops when effects run over and over again.
+			previous_batch = this;
+			current_batch = null;
+
 			// append/remove branches
-			for (const fn of this.#commit_callbacks) fn();
+			for (const fn of this.#commit_callbacks) fn(this);
 			this.#commit_callbacks.clear();
 
 			if (this.#pending === 0) {
 				this.#commit();
 			}
 
-			// If sources are written to, then work needs to happen in a separate batch, else prior sources would be mixed with
-			// newly updated sources, which could lead to infinite loops when effects run over and over again.
-			previous_batch = this;
-			current_batch = null;
-
 			flush_queued_effects(render_effects);
 			flush_queued_effects(effects);
 
+			// Clear effects. Those that are still needed will be rescheduled through unskipping the skipped branches.
+			this.#dirty_effects.clear();
+			this.#maybe_dirty_effects.clear();
+
 			previous_batch = null;
 
 			this.#deferred?.resolve();
@@ -35504,9 +35584,6 @@ class Batch {
 
 		var effect = root.first;
 
-		/** @type {Effect | null} */
-		var pending_boundary = null;
-
 		while (effect !== null) {
 			var flags = effect.f;
 			var is_branch = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) !== 0;
@@ -35517,11 +35594,6 @@ class Batch {
 			if (!skip && effect.fn !== null) {
 				if (is_branch) {
 					effect.f ^= CLEAN;
-				} else if (
-					pending_boundary !== null &&
-					(flags & (EFFECT | RENDER_EFFECT | MANAGED_EFFECT)) !== 0
-				) {
-					/** @type {Boundary} */ (pending_boundary.b).defer_effect(effect);
 				} else if ((flags & EFFECT) !== 0) {
 					effects.push(effect);
 				} else if (is_dirty(effect)) {
@@ -35537,16 +35609,15 @@ class Batch {
 				}
 			}
 
-			var parent = effect.parent;
-			effect = effect.next;
+			while (effect !== null) {
+				var next = effect.next;
 
-			while (effect === null && parent !== null) {
-				if (parent === pending_boundary) {
-					pending_boundary = null;
+				if (next !== null) {
+					effect = next;
+					break;
 				}
 
-				effect = parent.next;
-				parent = parent.parent;
+				effect = effect.parent;
 			}
 		}
 	}
@@ -35593,17 +35664,16 @@ class Batch {
 	}
 
 	flush() {
-		this.activate();
-
 		if (queued_root_effects.length > 0) {
+			current_batch = this;
 			flush_effects();
+		} else if (this.#pending === 0 && !this.is_fork) {
+			// append/remove branches
+			for (const fn of this.#commit_callbacks) fn(this);
+			this.#commit_callbacks.clear();
 
-			if (current_batch !== null && current_batch !== this) {
-				// this can happen if a new batch was created during `flush_effects()`
-				return;
-			}
-		} else if (this.#pending === 0) {
-			this.process([]); // TODO this feels awkward
+			this.#commit();
+			this.#deferred?.resolve();
 		}
 
 		this.deactivate();
@@ -35622,6 +35692,7 @@ class Batch {
 		if (batches.size > 1) {
 			this.previous.clear();
 
+			var previous_batch = current_batch;
 			var previous_batch_values = batch_values;
 			var is_earlier = true;
 
@@ -35685,11 +35756,11 @@ class Batch {
 				}
 			}
 
-			current_batch = null;
+			current_batch = previous_batch;
 			batch_values = previous_batch_values;
 		}
 
-		this.committed = true;
+		this.#skipped_branches.clear();
 		batches.delete(this);
 	}
 
@@ -35716,7 +35787,7 @@ class Batch {
 		queue_micro_task(() => {
 			this.#decrement_queued = false;
 
-			if (!this.is_deferred()) {
+			if (!this.#is_deferred()) {
 				// we only reschedule previously-deferred effects if we expect
 				// to be able to run them after processing the batch
 				this.revive();
@@ -35743,7 +35814,7 @@ class Batch {
 		this.flush();
 	}
 
-	/** @param {() => void} fn */
+	/** @param {(batch: Batch) => void} fn */
 	oncommit(fn) {
 		this.#commit_callbacks.add(fn);
 	}
@@ -35822,8 +35893,6 @@ function flushSync(fn) {
 }
 
 function flush_effects() {
-	is_flushing = true;
-
 	var source_stacks = null;
 
 	try {
@@ -35846,8 +35915,8 @@ function flush_effects() {
 	} finally {
 		queued_root_effects = [];
 
-		is_flushing = false;
 		last_scheduled_effect = null;
+		collected_effects = null;
 	}
 }
 
@@ -36001,6 +36070,19 @@ function depends_on(reaction, sources, checked) {
 function schedule_effect(signal) {
 	var effect = (last_scheduled_effect = signal);
 
+	var boundary = effect.b;
+
+	// defer render effects inside a pending boundary
+	// TODO the `REACTION_RAN` check is only necessary because of legacy `$:` effects AFAICT — we can remove later
+	if (
+		boundary?.is_pending &&
+		(signal.f & (EFFECT | RENDER_EFFECT | MANAGED_EFFECT)) !== 0 &&
+		(signal.f & REACTION_RAN) === 0
+	) {
+		boundary.defer_effect(signal);
+		return;
+	}
+
 	while (effect.parent !== null) {
 		effect = effect.parent;
 		var flags = effect.f;
@@ -36008,17 +36090,21 @@ function schedule_effect(signal) {
 		// if the effect is being scheduled because a parent (each/await/etc) block
 		// updated an internal source, or because a branch is being unskipped,
 		// bail out or we'll cause a second flush
-		if (
-			is_flushing &&
-			effect === active_effect &&
-			(flags & BLOCK_EFFECT) !== 0 &&
-			(flags & HEAD_EFFECT) === 0
-		) {
-			return;
+		if (collected_effects !== null && effect === active_effect) {
+			// in sync mode, render effects run during traversal. in an extreme edge case
+			// they can be made dirty after they have already been visited, in which
+			// case we shouldn't bail out
+			if ((signal.f & RENDER_EFFECT) === 0) {
+				return;
+			}
 		}
 
 		if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
-			if ((flags & CLEAN) === 0) return;
+			if ((flags & CLEAN) === 0) {
+				// branch is already dirty, bail
+				return;
+			}
+
 			effect.f ^= CLEAN;
 		}
 	}
@@ -36149,16 +36235,17 @@ function createSubscriber(start) {
  * }} BoundaryProps
  */
 
-var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED | BOUNDARY_EFFECT;
+var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED;
 
 /**
  * @param {TemplateNode} node
  * @param {BoundaryProps} props
  * @param {((anchor: Node) => void)} children
+ * @param {((error: unknown) => unknown) | undefined} [transform_error]
  * @returns {void}
  */
-function boundary(node, props, children) {
-	new Boundary(node, props, children);
+function boundary(node, props, children, transform_error) {
+	new Boundary(node, props, children, transform_error);
 }
 
 class Boundary {
@@ -36167,6 +36254,13 @@ class Boundary {
 
 	is_pending = false;
 
+	/**
+	 * API-level transformError transform function. Transforms errors before they reach the `failed` snippet.
+	 * Inherited from parent boundary, or defaults to identity.
+	 * @type {(error: unknown) => unknown}
+	 */
+	transform_error;
+
 	/** @type {TemplateNode} */
 	#anchor;
 
@@ -36194,15 +36288,10 @@ class Boundary {
 	/** @type {DocumentFragment | null} */
 	#offscreen_fragment = null;
 
-	/** @type {TemplateNode | null} */
-	#pending_anchor = null;
-
 	#local_pending_count = 0;
 	#pending_count = 0;
 	#pending_count_update_queued = false;
 
-	#is_creating_fallback = false;
-
 	/** @type {Set<Effect>} */
 	#dirty_effects = new Set();
 
@@ -36230,38 +36319,30 @@ class Boundary {
 	 * @param {TemplateNode} node
 	 * @param {BoundaryProps} props
 	 * @param {((anchor: Node) => void)} children
+	 * @param {((error: unknown) => unknown) | undefined} [transform_error]
 	 */
-	constructor(node, props, children) {
+	constructor(node, props, children, transform_error) {
 		this.#anchor = node;
 		this.#props = props;
-		this.#children = children;
 
-		this.parent = /** @type {Effect} */ (active_effect).b;
+		this.#children = (anchor) => {
+			var effect = /** @type {Effect} */ (active_effect);
 
-		this.is_pending = !!this.#props.pending;
+			effect.b = this;
+			effect.f |= BOUNDARY_EFFECT;
 
-		this.#effect = block(() => {
-			/** @type {Effect} */ (active_effect).b = this;
+			children(anchor);
+		};
 
-			{
-				var anchor = this.#get_anchor();
+		this.parent = /** @type {Effect} */ (active_effect).b;
 
-				try {
-					this.#main_effect = branch(() => children(anchor));
-				} catch (error) {
-					this.error(error);
-				}
+		// Inherit transform_error from parent boundary, or use the provided one, or default to identity
+		this.transform_error = transform_error ?? this.parent?.transform_error ?? ((e) => e);
 
-				if (this.#pending_count > 0) {
-					this.#show_pending_snippet();
-				} else {
-					this.is_pending = false;
-				}
+		this.#effect = block(() => {
+			{
+				this.#render();
 			}
-
-			return () => {
-				this.#pending_anchor?.remove();
-			};
 		}, flags);
 	}
 
@@ -36273,43 +36354,95 @@ class Boundary {
 		}
 	}
 
+	/**
+	 * @param {unknown} error The deserialized error from the server's hydration comment
+	 */
+	#hydrate_failed_content(error) {
+		const failed = this.#props.failed;
+		if (!failed) return;
+
+		this.#failed_effect = branch(() => {
+			failed(
+				this.#anchor,
+				() => error,
+				() => () => {}
+			);
+		});
+	}
+
 	#hydrate_pending_content() {
 		const pending = this.#props.pending;
 		if (!pending) return;
 
+		this.is_pending = true;
 		this.#pending_effect = branch(() => pending(this.#anchor));
 
 		queue_micro_task(() => {
-			var anchor = this.#get_anchor();
+			var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+			var anchor = create_text();
+
+			fragment.append(anchor);
 
 			this.#main_effect = this.#run(() => {
 				Batch.ensure();
 				return branch(() => this.#children(anchor));
 			});
 
-			if (this.#pending_count > 0) {
-				this.#show_pending_snippet();
-			} else {
+			if (this.#pending_count === 0) {
+				this.#anchor.before(fragment);
+				this.#offscreen_fragment = null;
+
 				pause_effect(/** @type {Effect} */ (this.#pending_effect), () => {
 					this.#pending_effect = null;
 				});
 
-				this.is_pending = false;
+				this.#resolve();
 			}
 		});
 	}
 
-	#get_anchor() {
-		var anchor = this.#anchor;
+	#render() {
+		try {
+			this.is_pending = this.has_pending_snippet();
+			this.#pending_count = 0;
+			this.#local_pending_count = 0;
+
+			this.#main_effect = branch(() => {
+				this.#children(this.#anchor);
+			});
 
-		if (this.is_pending) {
-			this.#pending_anchor = create_text();
-			this.#anchor.before(this.#pending_anchor);
+			if (this.#pending_count > 0) {
+				var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+				move_effect(this.#main_effect, fragment);
 
-			anchor = this.#pending_anchor;
+				const pending = /** @type {(anchor: Node) => void} */ (this.#props.pending);
+				this.#pending_effect = branch(() => pending(this.#anchor));
+			} else {
+				this.#resolve();
+			}
+		} catch (error) {
+			this.error(error);
+		}
+	}
+
+	#resolve() {
+		this.is_pending = false;
+
+		// any effects that were previously deferred should be rescheduled —
+		// after the next traversal (which will happen immediately, due to the
+		// same update that brought us here) the effects will be flushed
+		for (const e of this.#dirty_effects) {
+			set_signal_status(e, DIRTY);
+			schedule_effect(e);
+		}
+
+		for (const e of this.#maybe_dirty_effects) {
+			set_signal_status(e, MAYBE_DIRTY);
+			schedule_effect(e);
 		}
 
-		return anchor;
+		this.#dirty_effects.clear();
+		this.#maybe_dirty_effects.clear();
 	}
 
 	/**
@@ -36333,7 +36466,8 @@ class Boundary {
 	}
 
 	/**
-	 * @param {() => Effect | null} fn
+	 * @template T
+	 * @param {() => T} fn
 	 */
 	#run(fn) {
 		var previous_effect = active_effect;
@@ -36356,20 +36490,6 @@ class Boundary {
 		}
 	}
 
-	#show_pending_snippet() {
-		const pending = /** @type {(anchor: Node) => void} */ (this.#props.pending);
-
-		if (this.#main_effect !== null) {
-			this.#offscreen_fragment = document.createDocumentFragment();
-			this.#offscreen_fragment.append(/** @type {TemplateNode} */ (this.#pending_anchor));
-			move_effect(this.#main_effect, this.#offscreen_fragment);
-		}
-
-		if (this.#pending_effect === null) {
-			this.#pending_effect = branch(() => pending(this.#anchor));
-		}
-	}
-
 	/**
 	 * Updates the pending count associated with the currently visible pending snippet,
 	 * if any, such that we can replace the snippet with content once work is done
@@ -36388,24 +36508,7 @@ class Boundary {
 		this.#pending_count += d;
 
 		if (this.#pending_count === 0) {
-			this.is_pending = false;
-
-			// any effects that were encountered and deferred during traversal
-			// should be rescheduled — after the next traversal (which will happen
-			// immediately, due to the same update that brought us here)
-			// the effects will be flushed
-			for (const e of this.#dirty_effects) {
-				set_signal_status(e, DIRTY);
-				schedule_effect(e);
-			}
-
-			for (const e of this.#maybe_dirty_effects) {
-				set_signal_status(e, MAYBE_DIRTY);
-				schedule_effect(e);
-			}
-
-			this.#dirty_effects.clear();
-			this.#maybe_dirty_effects.clear();
+			this.#resolve();
 
 			if (this.#pending_effect) {
 				pause_effect(this.#pending_effect, () => {
@@ -36454,7 +36557,7 @@ class Boundary {
 
 		// If we have nothing to capture the error, or if we hit an error while
 		// rendering the fallback, re-throw for another boundary to handle
-		if (this.#is_creating_fallback || (!onerror && !failed)) {
+		if (!onerror && !failed) {
 			throw error;
 		}
 
@@ -36488,37 +36591,25 @@ class Boundary {
 				svelte_boundary_reset_onerror();
 			}
 
-			// If the failure happened while flushing effects, current_batch can be null
-			Batch.ensure();
-
-			this.#local_pending_count = 0;
-
 			if (this.#failed_effect !== null) {
 				pause_effect(this.#failed_effect, () => {
 					this.#failed_effect = null;
 				});
 			}
 
-			// we intentionally do not try to find the nearest pending boundary. If this boundary has one, we'll render it on reset
-			// but it would be really weird to show the parent's boundary on a child reset.
-			this.is_pending = this.has_pending_snippet();
+			this.#run(() => {
+				// If the failure happened while flushing effects, current_batch can be null
+				Batch.ensure();
 
-			this.#main_effect = this.#run(() => {
-				this.#is_creating_fallback = false;
-				return branch(() => this.#children(this.#anchor));
+				this.#render();
 			});
-
-			if (this.#pending_count > 0) {
-				this.#show_pending_snippet();
-			} else {
-				this.is_pending = false;
-			}
 		};
 
-		queue_micro_task(() => {
+		/** @param {unknown} transformed_error */
+		const handle_error_result = (transformed_error) => {
 			try {
 				calling_on_error = true;
-				onerror?.(error, reset);
+				onerror?.(transformed_error, reset);
 				calling_on_error = false;
 			} catch (error) {
 				invoke_error_boundary(error, this.#effect && this.#effect.parent);
@@ -36527,24 +36618,56 @@ class Boundary {
 			if (failed) {
 				this.#failed_effect = this.#run(() => {
 					Batch.ensure();
-					this.#is_creating_fallback = true;
 
 					try {
 						return branch(() => {
+							// errors in `failed` snippets cause the boundary to error again
+							// TODO Svelte 6: revisit this decision, most likely better to go to parent boundary instead
+							var effect = /** @type {Effect} */ (active_effect);
+
+							effect.b = this;
+							effect.f |= BOUNDARY_EFFECT;
+
 							failed(
 								this.#anchor,
-								() => error,
+								() => transformed_error,
 								() => reset
 							);
 						});
 					} catch (error) {
 						invoke_error_boundary(error, /** @type {Effect} */ (this.#effect.parent));
 						return null;
-					} finally {
-						this.#is_creating_fallback = false;
 					}
 				});
 			}
+		};
+
+		queue_micro_task(() => {
+			// Run the error through the API-level transformError transform (e.g. SvelteKit's handleError)
+			/** @type {unknown} */
+			var result;
+			try {
+				result = this.transform_error(error);
+			} catch (e) {
+				invoke_error_boundary(e, this.#effect && this.#effect.parent);
+				return;
+			}
+
+			if (
+				result !== null &&
+				typeof result === 'object' &&
+				typeof (/** @type {any} */ (result).then) === 'function'
+			) {
+				// transformError returned a Promise — wait for it
+				/** @type {any} */ (result).then(
+					handle_error_result,
+					/** @param {unknown} e */
+					(e) => invoke_error_boundary(e, this.#effect && this.#effect.parent)
+				);
+			} else {
+				// Synchronous result — handle immediately
+				handle_error_result(result);
+			}
 		});
 	}
 }
@@ -36567,8 +36690,6 @@ function flatten(blockers, sync, async, fn) {
 		fn(sync.map(d));
 		return;
 	}
-
-	var batch = current_batch;
 	var parent = /** @type {Effect} */ (active_effect);
 
 	var restore = capture();
@@ -36591,7 +36712,6 @@ function flatten(blockers, sync, async, fn) {
 			}
 		}
 
-		batch?.deactivate();
 		unset_context();
 	}
 
@@ -36635,10 +36755,25 @@ function capture() {
 	};
 }
 
-function unset_context() {
+function unset_context(deactivate_batch = true) {
 	set_active_effect(null);
 	set_active_reaction(null);
 	set_component_context(null);
+	if (deactivate_batch) current_batch?.deactivate();
+}
+
+function increment_pending() {
+	var boundary = /** @type {Boundary} */ (/** @type {Effect} */ (active_effect).b);
+	var batch = /** @type {Batch} */ (current_batch);
+	var blocking = boundary.is_rendered();
+
+	boundary.update_pending_count(1);
+	batch.increment(blocking);
+
+	return () => {
+		boundary.update_pending_count(-1);
+		batch.decrement(blocking);
+	};
 }
 
 /** @import { Derived, Effect, Source } from '#client' */
@@ -36697,8 +36832,6 @@ function async_derived(fn, label, location) {
 		async_derived_orphan();
 	}
 
-	var boundary = /** @type {Boundary} */ (parent.b);
-
 	var promise = /** @type {Promise<V>} */ (/** @type {unknown} */ (undefined));
 	var signal = source(/** @type {V} */ (UNINITIALIZED));
 
@@ -36718,17 +36851,7 @@ function async_derived(fn, label, location) {
 			// If this code is changed at some point, make sure to still access the then property
 			// of fn() to read any signals it might access, so that we track them as dependencies.
 			// We call `unset_context` to undo any `save` calls that happen inside `fn()`
-			Promise.resolve(fn())
-				.then(d.resolve, d.reject)
-				.then(() => {
-					if (batch === current_batch && batch.committed) {
-						// if the batch was rejected as stale, we need to cleanup
-						// after any `$.save(...)` calls inside `fn()`
-						batch.deactivate();
-					}
-
-					unset_context();
-				});
+			Promise.resolve(fn()).then(d.resolve, d.reject).finally(unset_context);
 		} catch (error) {
 			d.reject(error);
 			unset_context();
@@ -36737,10 +36860,7 @@ function async_derived(fn, label, location) {
 		var batch = /** @type {Batch} */ (current_batch);
 
 		if (should_suspend) {
-			var blocking = boundary.is_rendered();
-
-			boundary.update_pending_count(1);
-			batch.increment(blocking);
+			var decrement_pending = increment_pending();
 
 			deferreds.get(batch)?.reject(STALE_REACTION);
 			deferreds.delete(batch); // delete to ensure correct order in Map iteration below
@@ -36777,9 +36897,8 @@ function async_derived(fn, label, location) {
 				}
 			}
 
-			if (should_suspend) {
-				boundary.update_pending_count(-1);
-				batch.decrement(blocking);
+			if (decrement_pending) {
+				decrement_pending();
 			}
 		};
 
@@ -37046,19 +37165,6 @@ function mutable_source(initial_value, immutable = false, trackable = true) {
 	return s;
 }
 
-/**
- * @template V
- * @param {Value<V>} source
- * @param {V} value
- */
-function mutate(source, value) {
-	set(
-		source,
-		untrack(() => get(source))
-	);
-	return value;
-}
-
 /**
  * @template V
  * @param {Source<V>} source
@@ -37827,10 +37933,9 @@ function push_effect(effect, parent_effect) {
 /**
  * @param {number} type
  * @param {null | (() => void | (() => void))} fn
- * @param {boolean} sync
  * @returns {Effect}
  */
-function create_effect(type, fn, sync) {
+function create_effect(type, fn) {
 	var parent = active_effect;
 
 	if (parent !== null && (parent.f & INERT) !== 0) {
@@ -37855,34 +37960,39 @@ function create_effect(type, fn, sync) {
 		ac: null
 	};
 
-	if (sync) {
+	/** @type {Effect | null} */
+	var e = effect;
+
+	if ((type & EFFECT) !== 0) {
+		if (collected_effects !== null) {
+			// created during traversal — collect and run afterwards
+			collected_effects.push(effect);
+		} else {
+			// schedule for later
+			schedule_effect(effect);
+		}
+	} else if (fn !== null) {
 		try {
 			update_effect(effect);
 		} catch (e) {
 			destroy_effect(effect);
 			throw e;
 		}
-	} else if (fn !== null) {
-		schedule_effect(effect);
-	}
 
-	/** @type {Effect | null} */
-	var e = effect;
-
-	// if an effect has already ran and doesn't need to be kept in the tree
-	// (because it won't re-run, has no DOM, and has no teardown etc)
-	// then we skip it and go to its child (if any)
-	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) {
-			e.f |= EFFECT_TRANSPARENT;
+		// if an effect doesn't need to be kept in the tree (because it
+		// won't re-run, has no DOM, and has no teardown etc)
+		// then we skip it and go to its child (if any)
+		if (
+			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) {
+				e.f |= EFFECT_TRANSPARENT;
+			}
 		}
 	}
 
@@ -37919,7 +38029,7 @@ function effect_tracking() {
  * @param {() => void} fn
  */
 function teardown(fn) {
-	const effect = create_effect(RENDER_EFFECT, null, false);
+	const effect = create_effect(RENDER_EFFECT, null);
 	set_signal_status(effect, CLEAN);
 	effect.teardown = fn;
 	return effect;
@@ -37951,7 +38061,7 @@ function user_effect(fn) {
  * @param {() => void | (() => void)} fn
  */
 function create_user_effect(fn) {
-	return create_effect(EFFECT | USER_EFFECT, fn, false);
+	return create_effect(EFFECT | USER_EFFECT, fn);
 }
 
 /**
@@ -37961,7 +38071,7 @@ function create_user_effect(fn) {
  */
 function user_pre_effect(fn) {
 	validate_effect();
-	return create_effect(RENDER_EFFECT | USER_EFFECT, fn, true);
+	return create_effect(RENDER_EFFECT | USER_EFFECT, fn);
 }
 
 /**
@@ -37971,7 +38081,7 @@ function user_pre_effect(fn) {
  */
 function component_root(fn) {
 	Batch.ensure();
-	const effect = create_effect(ROOT_EFFECT | EFFECT_PRESERVED, fn, true);
+	const effect = create_effect(ROOT_EFFECT | EFFECT_PRESERVED, fn);
 
 	return (options = {}) => {
 		return new Promise((fulfil) => {
@@ -37993,57 +38103,7 @@ function component_root(fn) {
  * @returns {Effect}
  */
 function effect(fn) {
-	return create_effect(EFFECT, fn, false);
-}
-
-/**
- * Internal representation of `$: ..`
- * @param {() => any} deps
- * @param {() => void | (() => void)} fn
- */
-function legacy_pre_effect(deps, fn) {
-	var context = /** @type {ComponentContextLegacy} */ (component_context);
-
-	/** @type {{ effect: null | Effect, ran: boolean, deps: () => any }} */
-	var token = { effect: null, ran: false, deps };
-
-	context.l.$.push(token);
-
-	token.effect = render_effect(() => {
-		deps();
-
-		// If this legacy pre effect has already run before the end of the reset, then
-		// bail out to emulate the same behavior.
-		if (token.ran) return;
-
-		token.ran = true;
-		untrack(fn);
-	});
-}
-
-function legacy_pre_effect_reset() {
-	var context = /** @type {ComponentContextLegacy} */ (component_context);
-
-	render_effect(() => {
-		// Run dirty `$:` statements
-		for (var token of context.l.$) {
-			token.deps();
-
-			var effect = token.effect;
-
-			// If the effect is CLEAN, then make it MAYBE_DIRTY. This ensures we traverse through
-			// the effects dependencies and correctly ensure each dependency is up-to-date.
-			if ((effect.f & CLEAN) !== 0 && effect.deps !== null) {
-				set_signal_status(effect, MAYBE_DIRTY);
-			}
-
-			if (is_dirty(effect)) {
-				update_effect(effect);
-			}
-
-			token.ran = false;
-		}
-	});
+	return create_effect(EFFECT, fn);
 }
 
 /**
@@ -38051,7 +38111,7 @@ function legacy_pre_effect_reset() {
  * @returns {Effect}
  */
 function async_effect(fn) {
-	return create_effect(ASYNC | EFFECT_PRESERVED, fn, true);
+	return create_effect(ASYNC | EFFECT_PRESERVED, fn);
 }
 
 /**
@@ -38059,7 +38119,7 @@ function async_effect(fn) {
  * @returns {Effect}
  */
 function render_effect(fn, flags = 0) {
-	return create_effect(RENDER_EFFECT | flags, fn, true);
+	return create_effect(RENDER_EFFECT | flags, fn);
 }
 
 /**
@@ -38070,7 +38130,7 @@ function render_effect(fn, flags = 0) {
  */
 function template_effect(fn, sync = [], async = [], blockers = []) {
 	flatten(blockers, sync, async, (values) => {
-		create_effect(RENDER_EFFECT, () => fn(...values.map(get)), true);
+		create_effect(RENDER_EFFECT, () => fn(...values.map(get)));
 	});
 }
 
@@ -38079,7 +38139,7 @@ function template_effect(fn, sync = [], async = [], blockers = []) {
  * @param {number} flags
  */
 function block(fn, flags = 0) {
-	var effect = create_effect(BLOCK_EFFECT | flags, fn, true);
+	var effect = create_effect(BLOCK_EFFECT | flags, fn);
 	return effect;
 }
 
@@ -38088,7 +38148,7 @@ function block(fn, flags = 0) {
  * @param {number} flags
  */
 function managed(fn, flags = 0) {
-	var effect = create_effect(MANAGED_EFFECT | flags, fn, true);
+	var effect = create_effect(MANAGED_EFFECT | flags, fn);
 	return effect;
 }
 
@@ -38096,7 +38156,7 @@ function managed(fn, flags = 0) {
  * @param {(() => void)} fn
  */
 function branch(fn) {
-	return create_effect(BRANCH_EFFECT | EFFECT_PRESERVED, fn, true);
+	return create_effect(BRANCH_EFFECT | EFFECT_PRESERVED, fn);
 }
 
 /**
@@ -38388,51 +38448,6 @@ function move_effect(effect, fragment) {
 	}
 }
 
-/** @import { Value } from '#client' */
-
-/**
- * @type {Set<Value> | null}
- * @deprecated
- */
-let captured_signals = null;
-
-/**
- * Capture an array of all the signals that are read when `fn` is called
- * @template T
- * @param {() => T} fn
- */
-function capture_signals(fn) {
-	var previous_captured_signals = captured_signals;
-
-	try {
-		captured_signals = new Set();
-
-		untrack(fn);
-
-		if (previous_captured_signals !== null) {
-			for (var signal of captured_signals) {
-				previous_captured_signals.add(signal);
-			}
-		}
-
-		return captured_signals;
-	} finally {
-		captured_signals = previous_captured_signals;
-	}
-}
-
-/**
- * Invokes a function and captures all signals that are read during the invocation,
- * then invalidates them.
- * @param {() => any} fn
- * @deprecated
- */
-function invalidate_inner_signals(fn) {
-	for (var signal of capture_signals(fn)) {
-		internal_set(signal, signal.v);
-	}
-}
-
 /** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
 
 let is_updating_effect = false;
@@ -38860,8 +38875,6 @@ function get(signal) {
 	var flags = signal.f;
 	var is_derived = (flags & DERIVED) !== 0;
 
-	captured_signals?.add(signal);
-
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
 		// if we're in a derived that is being read inside an _async_ derived,
@@ -39104,96 +39117,9 @@ function deep_read(value, visited = new Set()) {
 }
 
 /**
- * @param {string} name
- */
-function is_capture_event(name) {
-	return name.endsWith('capture') && name !== 'gotpointercapture' && name !== 'lostpointercapture';
-}
-
-/** List of Element events that will be delegated */
-const DELEGATED_EVENTS = [
-	'beforeinput',
-	'click',
-	'change',
-	'dblclick',
-	'contextmenu',
-	'focusin',
-	'focusout',
-	'input',
-	'keydown',
-	'keyup',
-	'mousedown',
-	'mousemove',
-	'mouseout',
-	'mouseover',
-	'mouseup',
-	'pointerdown',
-	'pointermove',
-	'pointerout',
-	'pointerover',
-	'pointerup',
-	'touchend',
-	'touchmove',
-	'touchstart'
-];
-
-/**
- * Returns `true` if `event_name` is a delegated event
- * @param {string} event_name
+ * Used on elements, as a map of event type -> event handler,
+ * and on events themselves to track which element handled an event
  */
-function can_delegate_event(event_name) {
-	return DELEGATED_EVENTS.includes(event_name);
-}
-
-/**
- * @type {Record<string, string>}
- * List of attribute names that should be aliased to their property names
- * because they behave differently between setting them as an attribute and
- * setting them as a property.
- */
-const ATTRIBUTE_ALIASES = {
-	// no `class: 'className'` because we handle that separately
-	formnovalidate: 'formNoValidate',
-	ismap: 'isMap',
-	nomodule: 'noModule',
-	playsinline: 'playsInline',
-	readonly: 'readOnly',
-	defaultvalue: 'defaultValue',
-	defaultchecked: 'defaultChecked',
-	srcobject: 'srcObject',
-	novalidate: 'noValidate',
-	allowfullscreen: 'allowFullscreen',
-	disablepictureinpicture: 'disablePictureInPicture',
-	disableremoteplayback: 'disableRemotePlayback'
-};
-
-/**
- * @param {string} name
- */
-function normalize_attribute(name) {
-	name = name.toLowerCase();
-	return ATTRIBUTE_ALIASES[name] ?? name;
-}
-
-/**
- * Subset of delegated events which should be passive by default.
- * These two are already passive via browser defaults on window, document and body.
- * But since
- * - we're delegating them
- * - they happen often
- * - they apply to mobile which is generally less performant
- * we're marking them as passive by default for other elements, too.
- */
-const PASSIVE_EVENTS = ['touchstart', 'touchmove'];
-
-/**
- * Returns `true` if `name` is a passive event
- * @param {string} name
- */
-function is_passive_event(name) {
-	return PASSIVE_EVENTS.includes(name);
-}
-
 const event_symbol = Symbol('events');
 
 /** @type {Set<string>} */
@@ -39317,8 +39243,8 @@ function handle_event_propagation(event) {
 	last_propagated_event = event;
 
 	// composedPath contains list of nodes the event has propagated through.
-	// We check __root to skip all nodes below it in case this is a
-	// parent of the __root node, which indicates that there's nested
+	// We check `event_symbol` to skip all nodes below it in case this is a
+	// parent of the `event_symbol` node, which indicates that there's nested
 	// mounted apps. In this case we don't want to trigger events multiple times.
 	var path_idx = 0;
 
@@ -39326,7 +39252,7 @@ function handle_event_propagation(event) {
 	// without it the variable will be DCE'd and things will
 	// fail mysteriously in Firefox
 	// @ts-expect-error is added below
-	var handled_at = last_propagated_event === event && event.__root;
+	var handled_at = last_propagated_event === event && event[event_symbol];
 
 	if (handled_at) {
 		var at_idx = path.indexOf(handled_at);
@@ -39338,7 +39264,7 @@ function handle_event_propagation(event) {
 			// -> ignore, but set handle_at to document/window so that we're resetting the event
 			// chain in case someone manually dispatches the same event object again.
 			// @ts-expect-error
-			event.__root = handler_element;
+			event[event_symbol] = handler_element;
 			return;
 		}
 
@@ -39438,7 +39364,7 @@ function handle_event_propagation(event) {
 		}
 	} finally {
 		// @ts-expect-error is used above
-		event.__root = handler_element;
+		event[event_symbol] = handler_element;
 		// @ts-ignore remove proxy on currentTarget
 		delete event.currentTarget;
 		set_active_reaction(previous_reaction);
@@ -39446,18 +39372,15 @@ function handle_event_propagation(event) {
 	}
 }
 
-/** @import {} from 'trusted-types' */
-
-
-const policy = /* @__PURE__ */ globalThis?.window?.trustedTypes?.createPolicy(
-	'svelte-trusted-html',
-	{
+const policy =
+	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
+	globalThis?.window?.trustedTypes &&
+	/* @__PURE__ */ globalThis.window.trustedTypes.createPolicy('svelte-trusted-html', {
 		/** @param {string} html */
 		createHTML: (html) => {
 			return html;
 		}
-	}
-);
+	});
 
 /** @param {string} html */
 function create_trusted_html(html) {
@@ -39466,12 +39389,10 @@ function create_trusted_html(html) {
 
 /**
  * @param {string} html
- * @param {boolean} trusted
  */
-function create_fragment_from_html(html, trusted = false) {
+function create_fragment_from_html(html) {
 	var elem = create_element('template');
-	html = html.replaceAll('<!>', '<!---->'); // XHTML compliance
-	elem.innerHTML = trusted ? create_trusted_html(html) : html;
+	elem.innerHTML = create_trusted_html(html.replaceAll('<!>', '<!---->')); // XHTML compliance
 	return elem.content;
 }
 
@@ -39511,7 +39432,7 @@ function from_html(content, flags) {
 	return () => {
 
 		if (node === undefined) {
-			node = create_fragment_from_html(has_start ? content : '<!>' + content, true);
+			node = create_fragment_from_html(has_start ? content : '<!>' + content);
 			if (!is_fragment) node = /** @type {TemplateNode} */ (get_first_child(node));
 		}
 
@@ -39553,7 +39474,7 @@ function from_namespace(content, flags, ns = 'svg') {
 	return () => {
 
 		if (!node) {
-			var fragment = /** @type {DocumentFragment} */ (create_fragment_from_html(wrapped, true));
+			var fragment = /** @type {DocumentFragment} */ (create_fragment_from_html(wrapped));
 			var root = /** @type {Element} */ (get_first_child(fragment));
 
 			{
@@ -39635,6 +39556,97 @@ function props_id() {
 	return `c${window.__svelte.uid++}`;
 }
 
+/**
+ * @param {string} name
+ */
+function is_capture_event(name) {
+	return name.endsWith('capture') && name !== 'gotpointercapture' && name !== 'lostpointercapture';
+}
+
+/** List of Element events that will be delegated */
+const DELEGATED_EVENTS = [
+	'beforeinput',
+	'click',
+	'change',
+	'dblclick',
+	'contextmenu',
+	'focusin',
+	'focusout',
+	'input',
+	'keydown',
+	'keyup',
+	'mousedown',
+	'mousemove',
+	'mouseout',
+	'mouseover',
+	'mouseup',
+	'pointerdown',
+	'pointermove',
+	'pointerout',
+	'pointerover',
+	'pointerup',
+	'touchend',
+	'touchmove',
+	'touchstart'
+];
+
+/**
+ * Returns `true` if `event_name` is a delegated event
+ * @param {string} event_name
+ */
+function can_delegate_event(event_name) {
+	return DELEGATED_EVENTS.includes(event_name);
+}
+
+/**
+ * @type {Record<string, string>}
+ * List of attribute names that should be aliased to their property names
+ * because they behave differently between setting them as an attribute and
+ * setting them as a property.
+ */
+const ATTRIBUTE_ALIASES = {
+	// no `class: 'className'` because we handle that separately
+	formnovalidate: 'formNoValidate',
+	ismap: 'isMap',
+	nomodule: 'noModule',
+	playsinline: 'playsInline',
+	readonly: 'readOnly',
+	defaultvalue: 'defaultValue',
+	defaultchecked: 'defaultChecked',
+	srcobject: 'srcObject',
+	novalidate: 'noValidate',
+	allowfullscreen: 'allowFullscreen',
+	disablepictureinpicture: 'disablePictureInPicture',
+	disableremoteplayback: 'disableRemotePlayback'
+};
+
+/**
+ * @param {string} name
+ */
+function normalize_attribute(name) {
+	name = name.toLowerCase();
+	return ATTRIBUTE_ALIASES[name] ?? name;
+}
+
+/**
+ * Subset of delegated events which should be passive by default.
+ * These two are already passive via browser defaults on window, document and body.
+ * But since
+ * - we're delegating them
+ * - they happen often
+ * - they apply to mobile which is generally less performant
+ * we're marking them as passive by default for other elements, too.
+ */
+const PASSIVE_EVENTS = ['touchstart', 'touchmove'];
+
+/**
+ * Returns `true` if `name` is a passive event
+ * @param {string} name
+ */
+function is_passive_event(name) {
+	return PASSIVE_EVENTS.includes(name);
+}
+
 /** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
 /** @import { Component, ComponentType, SvelteComponent, MountOptions } from '../../index.js' */
 
@@ -39645,12 +39657,12 @@ function props_id() {
  */
 function set_text(text, value) {
 	// For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
-	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
+	var str = value == null ? '' : typeof value === 'object' ? `${value}` : value;
 	// @ts-expect-error
 	if (str !== (text.__t ??= text.nodeValue)) {
 		// @ts-expect-error
 		text.__t = str;
-		text.nodeValue = str + '';
+		text.nodeValue = `${str}`;
 	}
 }
 
@@ -39677,51 +39689,12 @@ const listeners = new Map();
  * @param {MountOptions} options
  * @returns {Exports}
  */
-function _mount(Component, { target, anchor, props = {}, events, context, intro = true }) {
+function _mount(
+	Component,
+	{ target, anchor, props = {}, events, context, intro = true, transformError }
+) {
 	init_operations();
 
-	/** @type {Set<string>} */
-	var registered_events = new Set();
-
-	/** @param {Array<string>} events */
-	var event_handle = (events) => {
-		for (var i = 0; i < events.length; i++) {
-			var event_name = events[i];
-
-			if (registered_events.has(event_name)) continue;
-			registered_events.add(event_name);
-
-			var passive = is_passive_event(event_name);
-
-			// Add the event listener to both the container and the document.
-			// The container listener ensures we catch events from within in case
-			// the outer content stops propagation of the event.
-			//
-			// The document listener ensures we catch events that originate from elements that were
-			// manually moved outside of the container (e.g. via manual portals).
-			for (const node of [target, document]) {
-				var counts = listeners.get(node);
-
-				if (counts === undefined) {
-					counts = new Map();
-					listeners.set(node, counts);
-				}
-
-				var count = counts.get(event_name);
-
-				if (count === undefined) {
-					node.addEventListener(event_name, handle_event_propagation, { passive });
-					counts.set(event_name, 1);
-				} else {
-					counts.set(event_name, count + 1);
-				}
-			}
-		}
-	};
-
-	event_handle(array_from(all_registered_events));
-	root_event_handles.add(event_handle);
-
 	/** @type {Exports} */
 	// @ts-expect-error will be defined because the render effect runs synchronously
 	var component = undefined;
@@ -39747,9 +39720,53 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 				component = Component(anchor_node, props) || {};
 
 				pop();
-			}
+			},
+			transformError
 		);
 
+		// Setup event delegation _after_ component is mounted - if an error would happen during mount, it would otherwise not be cleaned up
+		/** @type {Set<string>} */
+		var registered_events = new Set();
+
+		/** @param {Array<string>} events */
+		var event_handle = (events) => {
+			for (var i = 0; i < events.length; i++) {
+				var event_name = events[i];
+
+				if (registered_events.has(event_name)) continue;
+				registered_events.add(event_name);
+
+				var passive = is_passive_event(event_name);
+
+				// Add the event listener to both the container and the document.
+				// The container listener ensures we catch events from within in case
+				// the outer content stops propagation of the event.
+				//
+				// The document listener ensures we catch events that originate from elements that were
+				// manually moved outside of the container (e.g. via manual portals).
+				for (const node of [target, document]) {
+					var counts = listeners.get(node);
+
+					if (counts === undefined) {
+						counts = new Map();
+						listeners.set(node, counts);
+					}
+
+					var count = counts.get(event_name);
+
+					if (count === undefined) {
+						node.addEventListener(event_name, handle_event_propagation, { passive });
+						counts.set(event_name, 1);
+					} else {
+						counts.set(event_name, count + 1);
+					}
+				}
+			}
+		};
+
+		event_handle(array_from(all_registered_events));
+		root_event_handles.add(event_handle);
+
 		return () => {
 			for (var event_name of registered_events) {
 				for (const node of [target, document]) {
@@ -39878,9 +39895,10 @@ class BranchManager {
 		this.#transition = transition;
 	}
 
-	#commit = () => {
-		var batch = /** @type {Batch} */ (current_batch);
-
+	/**
+	 * @param {Batch} batch
+	 */
+	#commit = (batch) => {
 		// if this batch was made obsolete, bail
 		if (!this.#batches.has(batch)) return;
 
@@ -40028,7 +40046,7 @@ class BranchManager {
 			batch.ondiscard(this.#discard);
 		} else {
 
-			this.#commit();
+			this.#commit(batch);
 		}
 	}
 }
@@ -40054,48 +40072,6 @@ function snippet(node, get_snippet, ...args) {
 	}, EFFECT_TRANSPARENT);
 }
 
-/** @import { ComponentContext, ComponentContextLegacy } from '#client' */
-/** @import { EventDispatcher } from './index.js' */
-/** @import { NotFunction } from './internal/types.js' */
-
-/**
- * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
- * Unlike `$effect`, the provided function only runs once.
- *
- * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;
- * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,
- * it will be called when the component is unmounted.
- *
- * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).
- *
- * @template T
- * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn
- * @returns {void}
- */
-function onMount(fn) {
-	if (component_context === null) {
-		lifecycle_outside_component();
-	}
-
-	if (legacy_mode_flag && component_context.l !== null) {
-		init_update_callbacks(component_context).m.push(fn);
-	} else {
-		user_effect(() => {
-			const cleanup = untrack(fn);
-			if (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);
-		});
-	}
-}
-
-/**
- * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate
- * @param {ComponentContext} context
- */
-function init_update_callbacks(context) {
-	var l = /** @type {ComponentContextLegacy} */ (context).l;
-	return (l.u ??= { a: [], b: [], m: [] });
-}
-
 /** @import { TemplateNode } from '#client' */
 
 /**
@@ -40723,10 +40699,11 @@ function link(state, prev, next) {
 }
 
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import {} from 'trusted-types' */
 
 /**
  * @param {Element | Text | Comment} node
- * @param {() => string} get_value
+ * @param {() => string | TrustedHTML} get_value
  * @param {boolean} [svg]
  * @param {boolean} [mathml]
  * @param {boolean} [skip_warning]
@@ -40735,6 +40712,7 @@ function link(state, prev, next) {
 function html(node, get_value, svg = false, mathml = false, skip_warning = false) {
 	var anchor = node;
 
+	/** @type {string | TrustedHTML} */
 	var value = '';
 
 	template_effect(() => {
@@ -40751,18 +40729,18 @@ function html(node, get_value, svg = false, mathml = false, skip_warning = false
 
 		if (value === '') return;
 
-		var html = value + '';
-		if (svg) html = `<svg>${html}</svg>`;
-		else if (mathml) html = `<math>${html}</math>`;
-
 		// Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.
 		// @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
-		/** @type {DocumentFragment | Element} */
-		var node = create_fragment_from_html(html);
+		// Use a <template>, <svg>, or <math> wrapper depending on context. If value is a TrustedHTML object,
+		// it will be assigned directly to innerHTML without coercion — this allows {@html policy.createHTML(...)} to work.
+		var ns = svg ? NAMESPACE_SVG : mathml ? NAMESPACE_MATHML : undefined;
+		var wrapper = /** @type {HTMLTemplateElement | SVGElement | MathMLElement} */ (
+			create_element(svg ? 'svg' : mathml ? 'math' : 'template', ns)
+		);
+		wrapper.innerHTML = /** @type {any} */ (value);
 
-		if (svg || mathml) {
-			node = /** @type {Element} */ (get_first_child(node));
-		}
+		/** @type {DocumentFragment | Element} */
+		var node = svg || mathml ? wrapper : /** @type {HTMLTemplateElement} */ (wrapper).content;
 
 		assign_nodes(
 			/** @type {TemplateNode} */ (get_first_child(node)),
@@ -40929,7 +40907,7 @@ function to_class(value, hash, directives) {
 	}
 
 	if (directives) {
-		for (var key in directives) {
+		for (var key of Object.keys(directives)) {
 			if (directives[key]) {
 				classname = classname ? classname + ' ' + key : key;
 			} else if (classname.length) {
@@ -40964,7 +40942,7 @@ function append_styles(styles, important = false) {
 	var separator = important ? ' !important;' : ';';
 	var css = '';
 
-	for (var key in styles) {
+	for (var key of Object.keys(styles)) {
 		var value = styles[key];
 		if (value != null && value !== '') {
 			css += ' ' + key + ': ' + value + separator;
@@ -42280,6 +42258,8 @@ function prop(props, key, flags, fallback) {
 	);
 }
 
+enable_legacy_mode_flag();
+
 const defaultAttributes = {
     outline: {
         xmlns: 'http://www.w3.org/2000/svg',
@@ -42395,29 +42375,25 @@ function Clipboard($$anchor, $$props) {
 	}));
 }
 
-var root_1$6 = from_html(`<div class="paste-section svelte-1hna6ki"><button type="button" class="paste-button svelte-1hna6ki"><!> <span class="svelte-1hna6ki">クリップボードから貼り付け</span></button></div>`);
-var root_5$4 = from_html(`<img alt="" loading="lazy" class="svelte-1hna6ki"/>`);
+var root_1$7 = from_html(`<div class="paste-section svelte-1hna6ki"><button type="button" class="paste-button svelte-1hna6ki"><!> <span class="svelte-1hna6ki">クリップボードから貼り付け</span></button></div>`);
+var root_5$3 = from_html(`<img alt="" loading="lazy" class="svelte-1hna6ki"/>`);
 var root_4$4 = from_html(`<figure class="svelte-1hna6ki"><div class="img svelte-1hna6ki"><!></div> <figcaption class="svelte-1hna6ki"> </figcaption></figure>`);
 var root_3$4 = from_html(`<dd class="svelte-1hna6ki"><button type="button" class="svelte-1hna6ki"><!></button></dd>`);
 var root_2$5 = from_html(`<dt class="svelte-1hna6ki"> </dt> <div class="svelte-1hna6ki"></div>`, 1);
 var root$a = from_html(`<div class="block-catalog"><!> <dl class="svelte-1hna6ki"></dl></div>`);
 
 function Block_catalog($$anchor, $$props) {
-	push($$props, false);
-
-	let engine = prop($$props, 'engine', 8);
-	let hasCopiedBlock = mutable_source(false);
+	push($$props, true);
 
-	// コンポーネント初期化時にsessionStorageをチェック
-	set(hasCopiedBlock, !!sessionStorage.getItem(engine().storageKey.blockClipboard));
+	const hasCopiedBlock = !!sessionStorage.getItem($$props.engine.storageKey.blockClipboard);
 
 	/**
 	 *
 	 * @param blockData
 	 */
 	function addBlock(blockData) {
-		engine().blockCatalogDialog.close();
-		engine().addBlock(blockData);
+		$$props.engine.blockCatalogDialog.close();
+		$$props.engine.addBlock(blockData);
 	}
 
 	/**
@@ -42425,7 +42401,7 @@ function Block_catalog($$anchor, $$props) {
 	 */
 	async function pasteBlock() {
 		// 1. sessionStorageから取得
-		const jsonString = sessionStorage.getItem(engine().storageKey.blockClipboard);
+		const jsonString = sessionStorage.getItem($$props.engine.storageKey.blockClipboard);
 
 		if (!jsonString) {
 			alert('クリップボードにブロックデータがありません。');
@@ -42448,133 +42424,107 @@ function Block_catalog($$anchor, $$props) {
 		}
 
 		// 3. ダイアログを閉じる
-		engine().blockCatalogDialog.close();
+		$$props.engine.blockCatalogDialog.close();
 
 		// 4. ブロックを追加（既存のaddBlock関数と同じ）
-		await engine().addBlock(blockData);
+		await $$props.engine.addBlock(blockData);
 
 		// 5. sessionStorageをクリア
-		sessionStorage.removeItem(engine().storageKey.blockClipboard);
+		sessionStorage.removeItem($$props.engine.storageKey.blockClipboard);
 	}
 
-	init();
-
 	var div = root$a();
 	var node = child(div);
 
 	{
 		var consequent = ($$anchor) => {
-			var div_1 = root_1$6();
+			var div_1 = root_1$7();
 			var button = child(div_1);
 			var node_1 = child(button);
 
 			Clipboard(node_1, {});
-			event('click', button, pasteBlock);
+			delegated('click', button, pasteBlock);
 			append($$anchor, div_1);
 		};
 
 		if_block(node, ($$render) => {
-			if (get(hasCopiedBlock)) $$render(consequent);
+			if (hasCopiedBlock) $$render(consequent);
 		});
 	}
 
 	var dl = sibling(node, 2);
 
-	each(
-		dl,
-		5,
-		() => (
-			deep_read_state(engine()),
-			untrack(() => engine().blockCatalogDialog.catalog)
-		),
-		([category, blocks]) => category,
-		($$anchor, $$item) => {
-			var $$array = user_derived(() => to_array(get($$item), 2));
-			let category = () => get($$array)[0];
-			let blocks = () => get($$array)[1];
-			var fragment = root_2$5();
-			var dt = first_child(fragment);
-			var text$1 = child(dt);
-
-			var div_2 = sibling(dt, 2);
-
-			each(div_2, 5, blocks, (blockInfo) => category() + blockInfo.label + blockInfo.definition.name, ($$anchor, blockInfo) => {
-				var dd = root_3$4();
-				var button_1 = child(dd);
-				var node_2 = child(button_1);
+	each(dl, 21, () => $$props.engine.blockCatalogDialog.catalog, ([category, blocks]) => category, ($$anchor, $$item) => {
+		var $$array = user_derived(() => to_array(get($$item), 2));
+		let category = () => get($$array)[0];
+		let blocks = () => get($$array)[1];
+		var fragment = root_2$5();
+		var dt = first_child(fragment);
+		var text$1 = child(dt);
 
-				{
-					var consequent_3 = ($$anchor) => {
-						var figure = root_4$4();
-						var div_3 = child(figure);
-						var node_3 = child(div_3);
-
-						{
-							var consequent_1 = ($$anchor) => {
-								var img = root_5$4();
-
-								template_effect(() => set_attribute(img, 'src', (
-									get(blockInfo),
-									untrack(() => get(blockInfo).definition.img)
-								)));
-
-								append($$anchor, img);
-							};
-
-							var consequent_2 = ($$anchor) => {
-								var fragment_1 = comment();
-								var node_4 = first_child(fragment_1);
-
-								html(node_4, () => (
-									get(blockInfo),
-									untrack(() => get(blockInfo).definition.svg)
-								));
-
-								append($$anchor, fragment_1);
-							};
-
-							if_block(node_3, ($$render) => {
-								if ((
-									get(blockInfo),
-									untrack(() => get(blockInfo).definition.img)
-								)) $$render(consequent_1); else if ((
-									get(blockInfo),
-									untrack(() => get(blockInfo).definition.svg)
-								)) $$render(consequent_2, 1);
-							});
-						}
+		var div_2 = sibling(dt, 2);
 
-						var figcaption = sibling(div_3, 2);
-						var text_1 = child(figcaption);
-						template_effect(() => set_text(text_1, (get(blockInfo), untrack(() => get(blockInfo).label))));
-						append($$anchor, figure);
-					};
+		each(div_2, 21, blocks, (blockInfo) => category() + blockInfo.label + blockInfo.definition.name, ($$anchor, blockInfo) => {
+			var dd = root_3$4();
+			var button_1 = child(dd);
+			var node_2 = child(button_1);
 
-					var alternate = ($$anchor) => {
-						var text_2 = text();
+			{
+				var consequent_3 = ($$anchor) => {
+					var figure = root_4$4();
+					var div_3 = child(figure);
+					var node_3 = child(div_3);
 
-						template_effect(() => set_text(text_2, (get(blockInfo), untrack(() => get(blockInfo).label))));
-						append($$anchor, text_2);
-					};
+					{
+						var consequent_1 = ($$anchor) => {
+							var img = root_5$3();
 
-					if_block(node_2, ($$render) => {
-						if ((
-							get(blockInfo),
-							untrack(() => get(blockInfo).definition.img || get(blockInfo).definition.svg)
-						)) $$render(consequent_3); else $$render(alternate, false);
-					});
-				}
-				event('click', button_1, () => addBlock(get(blockInfo).definition));
-				append($$anchor, dd);
-			});
-			template_effect(() => set_text(text$1, category()));
-			append($$anchor, fragment);
-		}
-	);
+							template_effect(() => set_attribute(img, 'src', get(blockInfo).definition.img));
+							append($$anchor, img);
+						};
+
+						var consequent_2 = ($$anchor) => {
+							var fragment_1 = comment();
+							var node_4 = first_child(fragment_1);
+
+							html(node_4, () => get(blockInfo).definition.svg);
+							append($$anchor, fragment_1);
+						};
+
+						if_block(node_3, ($$render) => {
+							if (get(blockInfo).definition.img) $$render(consequent_1); else if (get(blockInfo).definition.svg) $$render(consequent_2, 1);
+						});
+					}
+
+					var figcaption = sibling(div_3, 2);
+					var text_1 = child(figcaption);
+					template_effect(() => set_text(text_1, get(blockInfo).label));
+					append($$anchor, figure);
+				};
+
+				var alternate = ($$anchor) => {
+					var text_2 = text();
+
+					template_effect(() => set_text(text_2, get(blockInfo).label));
+					append($$anchor, text_2);
+				};
+
+				if_block(node_2, ($$render) => {
+					if (get(blockInfo).definition.img || get(blockInfo).definition.svg) $$render(consequent_3); else $$render(alternate, false);
+				});
+			}
+			delegated('click', button_1, () => addBlock(get(blockInfo).definition));
+			append($$anchor, dd);
+		});
+		template_effect(() => set_text(text$1, category()));
+		append($$anchor, fragment);
+	});
 	append($$anchor, div);
 	pop();
 }
 
+delegate(['click']);
+
 function Arrow_big_down_line($$anchor, $$props) {
 	const $$sanitized_props = legacy_rest_props($$props, ['children', '$$slots', '$$events', '$$legacy']);
 
@@ -42974,34 +42924,142 @@ async function replaceElement(elA, elB, duration = 600) {
   }
 }
 
-var root_5$3 = from_html(`<!> <!>`, 1);
-var root$8 = from_html(`<div class="bge-menu-base svelte-1fv4q6w"><div class="bge-menu svelte-1fv4q6w"><div class="bge-move-group svelte-1fv4q6w"><!> <!></div> <div class="bge-standard-group svelte-1fv4q6w"><!> <!> <!> <!> <!> <!></div></div> <div class="bge-menu-margin svelte-1fv4q6w"><span class="svelte-1fv4q6w"> </span></div></div>`);
+var root_6$2 = from_html(`<!> <!>`, 1);
+var root_1$6 = from_html(`<div class="bge-menu-base svelte-1fv4q6w"><div class="bge-menu svelte-1fv4q6w"><div class="bge-move-group svelte-1fv4q6w"><!> <!></div> <div class="bge-standard-group svelte-1fv4q6w"><!> <!> <!> <!> <!> <!></div></div> <div class="bge-menu-margin svelte-1fv4q6w"><span class="svelte-1fv4q6w"> </span></div></div>`);
 
 function Block_menu($$anchor, $$props) {
-	push($$props, false);
+	push($$props, true);
 
-	const isMutable = mutable_source();
-	let engine = prop($$props, 'engine', 12);
-	let currentBlock = mutable_source(null);
-	let _width = mutable_source(0);
-	let _height = mutable_source(0);
-	let _x = mutable_source(0);
-	let _y = mutable_source(0);
-	let _marginBlockEnd = mutable_source(0);
-	let marginBlockEndValue = mutable_source('0px');
+	const engine = prop($$props, 'engine', 7);
+	let currentBlock = state(null);
+	let visible = state(false);
+	const isMutable = user_derived(() => get(currentBlock)?.isMutable());
+	let _width = state(0);
+	let _height = state(0);
+	let _x = state(0);
+	let _y = state(0);
+	let _marginBlockEnd = state(0);
+	let marginBlockEndValue = state('0px');
 
 	engine().blockOptionsDialog.onChangeBlock((block) => {
-		set(currentBlock, block);
+		set(currentBlock, block, true);
 	});
 
-	engine().componentObserver.on('select-block', ({ block, width, height, x, y, marginBlockEnd }) => {
-		set(currentBlock, block);
-		set(_width, width);
-		set(_height, height);
-		set(_x, x);
-		set(_y, y);
-		set(_marginBlockEnd, marginBlockEnd);
-		set(marginBlockEndValue, window.getComputedStyle(block.el).getPropertyValue('--bge-block-margin'));
+	/**
+	 *
+	 */
+	function hide() {
+		set(visible, false);
+		set(currentBlock, null);
+		$$props.onHide();
+	}
+
+	let mouseX = 0;
+	let mouseY = 0;
+	let raf = 0;
+
+	/**
+	 *
+	 */
+	function updatePosition() {
+		const doc = $$props.container.ownerDocument;
+		const selected = getBlockAtPosition(doc, mouseX, mouseY);
+
+		if (!selected) {
+			hide();
+
+			return;
+		}
+
+		set(visible, true);
+
+		const { block, rect, marginBlockEnd } = selected;
+
+		set(currentBlock, block, true);
+		set(_width, rect.width, true);
+		set(_height, rect.height, true);
+		set(_x, rect.left, true);
+		set(_y, rect.top, true);
+		set(_marginBlockEnd, marginBlockEnd, true);
+		set(marginBlockEndValue, window.getComputedStyle(block.el).getPropertyValue('--bge-block-margin'), true);
+
+		engine().componentObserver.notify('select-block', {
+			block,
+			width: rect.width,
+			height: rect.height,
+			x: rect.left,
+			y: rect.top,
+			marginBlockEnd
+		});
+	}
+
+	/**
+	 *
+	 */
+	function scheduleUpdate() {
+		cancelAnimationFrame(raf);
+
+		if (engine().isProcessed) {
+			hide();
+
+			return;
+		}
+
+		raf = requestAnimationFrame(() => {
+			updatePosition();
+		});
+	}
+
+	user_effect(() => {
+		const doc = $$props.container.ownerDocument;
+		const body = doc.body;
+		const win = doc.defaultView;
+
+		const onMouseMove = (e) => {
+			mouseX = e.pageX;
+			mouseY = e.pageY;
+			scheduleUpdate();
+		};
+
+		const onHideEvent = () => hide();
+
+		body.addEventListener('mousemove', onMouseMove);
+		body.addEventListener('mouseleave', onHideEvent);
+		doc.addEventListener('mouseleave', onHideEvent);
+		win?.addEventListener('mouseleave', onHideEvent);
+		globalThis.addEventListener('resize', onHideEvent);
+		engine().el.addEventListener('bge:saved', scheduleUpdate);
+
+		const observer = new MutationObserver((mutations) => {
+			for (const mutation of mutations) {
+				for (const node of mutation.addedNodes) {
+					if (!(node instanceof HTMLElement)) {
+						continue;
+					}
+
+					const images = node.querySelectorAll('img');
+
+					for (const img of images) {
+						img.addEventListener('load', scheduleUpdate, { once: true });
+						img.addEventListener('error', scheduleUpdate, { once: true });
+						img.addEventListener('abort', scheduleUpdate, { once: true });
+					}
+				}
+			}
+		});
+
+		observer.observe(doc, { childList: true, subtree: true });
+
+		return () => {
+			body.removeEventListener('mousemove', onMouseMove);
+			body.removeEventListener('mouseleave', onHideEvent);
+			doc.removeEventListener('mouseleave', onHideEvent);
+			win?.removeEventListener('mouseleave', onHideEvent);
+			globalThis.removeEventListener('resize', onHideEvent);
+			engine().el.removeEventListener('bge:saved', scheduleUpdate);
+			observer.disconnect();
+			cancelAnimationFrame(raf);
+		};
 	});
 
 	/**
@@ -43033,24 +43091,24 @@ function Block_menu($$anchor, $$props) {
 			return;
 		}
 
-		let $from;
-		let $to;
+		let fromEl;
+		let toEl;
 
 		if (toTop) {
-			$from = get(currentBlock).el.previousElementSibling;
-			$to = get(currentBlock).el;
+			fromEl = get(currentBlock).el.previousElementSibling;
+			toEl = get(currentBlock).el;
 		} else {
-			$from = get(currentBlock).el;
-			$to = get(currentBlock).el.nextElementSibling;
+			fromEl = get(currentBlock).el;
+			toEl = get(currentBlock).el.nextElementSibling;
 		}
 
-		if (!$from || !$to) {
+		if (!fromEl || !toEl) {
 			return;
 		}
 
-		engine(engine().isProcessed = true, true);
-		await replaceElement($from, $to);
-		engine(engine().isProcessed = false, true);
+		engine().isProcessed = true;
+		await replaceElement(fromEl, toEl);
+		engine().isProcessed = false;
 		engine().save();
 	}
 
@@ -43066,11 +43124,11 @@ function Block_menu($$anchor, $$props) {
 			return;
 		}
 
-		engine(engine().isProcessed = true, true);
+		engine().isProcessed = true;
 		await Promise.resolve();
 		get(currentBlock).remove();
 		set(currentBlock, null);
-		engine(engine().isProcessed = false, true);
+		engine().isProcessed = false;
 		engine().save();
 	}
 
@@ -43111,127 +43169,133 @@ function Block_menu($$anchor, $$props) {
 		alert('ブロックをコピーしました。\nブロックの追加ボタンからペースト（貼り付け）することができます。');
 	}
 
-	legacy_pre_effect(() => (get(currentBlock)), () => {
-		set(isMutable, get(currentBlock)?.isMutable());
-	});
-
-	legacy_pre_effect_reset();
-	init();
-
-	var div = root$8();
-	var div_1 = child(div);
-	var div_2 = child(div_1);
-	var node = child(div_2);
-
-	Block_menu_button(node, {
-		label: 'ひとつ上へ移動',
-		action: () => move(true),
-		children: ($$anchor, $$slotProps) => {
-			Arrow_big_up_line($$anchor, {});
-		}});
-
-	var node_1 = sibling(node, 2);
-
-	Block_menu_button(node_1, {
-		label: 'ひとつ下へ移動',
-		action: () => move(false),
-		children: ($$anchor, $$slotProps) => {
-			Arrow_big_down_line($$anchor, {});
-		}});
+	var fragment = comment();
+	var node_1 = first_child(fragment);
 
-	var div_3 = sibling(div_2, 2);
-	var node_2 = child(div_3);
+	{
+		var consequent_1 = ($$anchor) => {
+			var div = root_1$6();
+			var div_1 = child(div);
+			var div_2 = child(div_1);
+			var node_2 = child(div_2);
+
+			Block_menu_button(node_2, {
+				label: 'ひとつ上へ移動',
+				action: () => move(true),
+				children: ($$anchor, $$slotProps) => {
+					Arrow_big_up_line($$anchor, {});
+				}});
 
-	Block_menu_button(node_2, {
-		label: '上にブロックを追加',
-		action: () => insert(true),
-		children: ($$anchor, $$slotProps) => {
-			Row_insert_top($$anchor, {});
-		}});
+			var node_3 = sibling(node_2, 2);
 
-	var node_3 = sibling(node_2, 2);
+			Block_menu_button(node_3, {
+				label: 'ひとつ下へ移動',
+				action: () => move(false),
+				children: ($$anchor, $$slotProps) => {
+					Arrow_big_down_line($$anchor, {});
+				}});
 
-	Block_menu_button(node_3, {
-		label: '下にブロックを追加',
-		action: () => insert(false),
-		children: ($$anchor, $$slotProps) => {
-			Row_insert_bottom($$anchor, {});
-		}});
+			var div_3 = sibling(div_2, 2);
+			var node_4 = child(div_3);
 
-	var node_4 = sibling(node_3, 2);
+			Block_menu_button(node_4, {
+				label: '上にブロックを追加',
+				action: () => insert(true),
+				children: ($$anchor, $$slotProps) => {
+					Row_insert_top($$anchor, {});
+				}});
 
-	{
-		var consequent = ($$anchor) => {
-			var fragment_4 = root_5$3();
-			var node_5 = first_child(fragment_4);
+			var node_5 = sibling(node_4, 2);
 
 			Block_menu_button(node_5, {
-				label: 'ブロック内に要素を追加',
-				action: () => updateGridItems(1),
+				label: '下にブロックを追加',
+				action: () => insert(false),
 				children: ($$anchor, $$slotProps) => {
-					Layout_grid_add($$anchor, {});
+					Row_insert_bottom($$anchor, {});
 				}});
 
 			var node_6 = sibling(node_5, 2);
 
-			Block_menu_button(node_6, {
-				label: 'ブロック内の要素を削除',
-				action: () => updateGridItems(-1),
-				children: ($$anchor, $$slotProps) => {
-					Layout_grid_remove($$anchor, {});
-				}});
-
-			append($$anchor, fragment_4);
-		};
+			{
+				var consequent = ($$anchor) => {
+					var fragment_5 = root_6$2();
+					var node_7 = first_child(fragment_5);
+
+					Block_menu_button(node_7, {
+						label: 'ブロック内に要素を追加',
+						action: () => updateGridItems(1),
+						children: ($$anchor, $$slotProps) => {
+							Layout_grid_add($$anchor, {});
+						}});
+
+					var node_8 = sibling(node_7, 2);
+
+					Block_menu_button(node_8, {
+						label: 'ブロック内の要素を削除',
+						action: () => updateGridItems(-1),
+						children: ($$anchor, $$slotProps) => {
+							Layout_grid_remove($$anchor, {});
+						}});
+
+					append($$anchor, fragment_5);
+				};
 
-		if_block(node_4, ($$render) => {
-			if (get(isMutable)) $$render(consequent);
-		});
-	}
+				if_block(node_6, ($$render) => {
+					if (get(isMutable)) $$render(consequent);
+				});
+			}
 
-	var node_7 = sibling(node_4, 2);
+			var node_9 = sibling(node_6, 2);
 
-	Block_menu_button(node_7, {
-		label: 'オプション設定',
-		action: () => openConfig(),
-		children: ($$anchor, $$slotProps) => {
-			Settings($$anchor, {});
-		}});
+			Block_menu_button(node_9, {
+				label: 'オプション設定',
+				action: () => openConfig(),
+				children: ($$anchor, $$slotProps) => {
+					Settings($$anchor, {});
+				}});
 
-	var node_8 = sibling(node_7, 2);
+			var node_10 = sibling(node_9, 2);
 
-	Block_menu_button(node_8, {
-		label: 'ブロックをコピー',
-		action: () => copy(),
-		children: ($$anchor, $$slotProps) => {
-			Clipboard_plus($$anchor, {});
-		}});
+			Block_menu_button(node_10, {
+				label: 'ブロックをコピー',
+				action: () => copy(),
+				children: ($$anchor, $$slotProps) => {
+					Clipboard_plus($$anchor, {});
+				}});
 
-	var node_9 = sibling(node_8, 2);
+			var node_11 = sibling(node_10, 2);
 
-	Block_menu_button(node_9, {
-		label: 'ブロックを削除',
-		action: () => remove(),
-		children: ($$anchor, $$slotProps) => {
-			Trash($$anchor, {});
-		}});
+			Block_menu_button(node_11, {
+				label: 'ブロックを削除',
+				action: () => remove(),
+				children: ($$anchor, $$slotProps) => {
+					Trash($$anchor, {});
+				}});
 
-	var div_4 = sibling(div_1, 2);
-	var span = child(div_4);
-	var text = child(span);
+			var div_4 = sibling(div_1, 2);
+			var span = child(div_4);
+			var text = child(span);
 
-	template_effect(() => {
-		set_style(div, `
+			template_effect(() => {
+				set_style(div, `
 	--width:${get(_width)}px;
 	--height:${get(_height)}px;
 	--x:${get(_x)}px;
 	--y:${get(_y)}px;
 	--margin-block-end:${get(_marginBlockEnd) ?? '0'}px`);
 
-		set_text(text, `余白: ${get(marginBlockEndValue) ?? ''} (${get(_marginBlockEnd) ?? ''}px)`);
-	});
+				set_text(text, `余白: ${get(marginBlockEndValue) ?? ''} (${get(_marginBlockEnd) ?? ''}px)`);
+			});
 
-	append($$anchor, div);
+			append($$anchor, div);
+		};
+
+		if_block(node_1, ($$render) => {
+			if (get(visible)) $$render(consequent_1);
+		});
+	}
+
+	append($$anchor, fragment);
 	pop();
 }
 
@@ -43249,7 +43313,7 @@ var root_1$5 = from_html(`<fieldset><legend>コンテナ特性</legend> <!> <!>
 var root_15 = from_html(`<option> </option>`);
 var root_14 = from_html(`<label><span> </span> <select></select></label>`);
 var root_13 = from_html(`<fieldset><legend>ブロックのスタイル拡張</legend> <!></fieldset>`);
-var root$7 = from_html(`<!> <!> <label><span>独自class設定</span> <input type="text" name="bge-options-classes" aria-describedby="block-option-classes-desc"/></label> <small id="block-option-classes-desc">複数指定する場合はスペース（空白文字）で区切ってください。</small> <label><span>ID設定: <code>bge-</code></span> <input name="bge-options-id" type="text" aria-describedby="block-option-id-desc"/></label> <small id="block-option-id-desc">アンカーリンク用のID属性を設定します。実際のIDは<code>bge-</code>が自動的に先頭に付加されます。</small>`, 1);
+var root$8 = from_html(`<!> <!> <label><span>独自class設定</span> <input type="text" name="bge-options-classes" aria-describedby="block-option-classes-desc"/></label> <small id="block-option-classes-desc">複数指定する場合はスペース（空白文字）で区切ってください。</small> <label><span>ID設定: <code>bge-</code></span> <input name="bge-options-id" type="text" aria-describedby="block-option-id-desc"/></label> <small id="block-option-id-desc">アンカーリンク用のID属性を設定します。実際のIDは<code>bge-</code>が自動的に先頭に付加されます。</small>`, 1);
 
 function Block_options($$anchor, $$props) {
 	push($$props, true);
@@ -43313,7 +43377,7 @@ function Block_options($$anchor, $$props) {
 		set(currentFrameSemantics, newSemantics, true);
 	}
 
-	var fragment = root$7();
+	var fragment = root$8();
 	var node = first_child(fragment);
 
 	{
@@ -43681,30 +43745,27 @@ var root_1$4 = from_html(`<span class="svelte-17zpf86">ソース表示</span>`);
 var root_2$3 = from_html(`<span class="svelte-17zpf86">ソース表示</span>`);
 var root_3$2 = from_html(`<button type="button" class="svelte-17zpf86">本稿を下書きにコピー</button>`);
 var root_4$2 = from_html(`<button type="button" class="svelte-17zpf86">下書きを本稿にコピー</button>`);
-var root$6 = from_html(`<div class="draft-btn svelte-17zpf86"><div class="draft-tab-btn svelte-17zpf86"><button type="button" class="svelte-17zpf86">本稿モード <!></button> <button type="button" class="svelte-17zpf86">下書きモード <!></button></div> <div class="draft-copy-btn svelte-17zpf86"><!></div></div>`);
+var root$7 = from_html(`<div class="draft-btn svelte-17zpf86"><div class="draft-tab-btn svelte-17zpf86"><button type="button" class="svelte-17zpf86">本稿モード <!></button> <button type="button" class="svelte-17zpf86">下書きモード <!></button></div> <div class="draft-copy-btn svelte-17zpf86"><!></div></div>`);
 
 function Draft_switcher($$anchor, $$props) {
-	push($$props, false);
-
-	let engine = prop($$props, 'engine', 8);
-	let isMain = mutable_source();
-	let isVisualMode = mutable_source();
+	push($$props, true);
 
-	onMount(update);
+	let isMain = state($$props.engine.content.type === 'main');
+	let isVisualMode = state(proxy($$props.engine.content.isVisualMode));
 
 	/**
 	 *
 	 */
 	function update() {
-		set(isMain, engine().content.type === 'main');
-		set(isVisualMode, engine().content.isVisualMode);
+		set(isMain, $$props.engine.content.type === 'main');
+		set(isVisualMode, $$props.engine.content.isVisualMode, true);
 	}
 
 	/**
 	 *
 	 */
 	function onClickMain() {
-		engine().showMain();
+		$$props.engine.showMain();
 		update();
 	}
 
@@ -43712,7 +43773,7 @@ function Draft_switcher($$anchor, $$props) {
 	 *
 	 */
 	function onClickDraft() {
-		engine().showDraft();
+		$$props.engine.showDraft();
 		update();
 	}
 
@@ -43720,7 +43781,7 @@ function Draft_switcher($$anchor, $$props) {
 	 *
 	 */
 	async function onClickDraftToMain() {
-		if (await engine().draftToMain(() => confirm('下書き内容を本稿へ上書きしてもよろしいですか？'))) {
+		if (await $$props.engine.draftToMain(() => confirm('下書き内容を本稿へ上書きしてもよろしいですか？'))) {
 			onClickMain();
 		}
 	}
@@ -43729,7 +43790,7 @@ function Draft_switcher($$anchor, $$props) {
 	 *
 	 */
 	async function onClickMainToDraft() {
-		if (await engine().mainToDraft(() => confirm('本稿内容を下書きへ上書きしてもよろしいですか？'))) {
+		if (await $$props.engine.mainToDraft(() => confirm('本稿内容を下書きへ上書きしてもよろしいですか？'))) {
 			onClickDraft();
 		}
 	}
@@ -43738,7 +43799,7 @@ function Draft_switcher($$anchor, $$props) {
 	 *
 	 */
 	function toggleDisplayMode() {
-		engine().content.toggleDisplayMode();
+		$$props.engine.content.toggleDisplayMode();
 		update();
 	}
 
@@ -43751,7 +43812,7 @@ function Draft_switcher($$anchor, $$props) {
 			return;
 		}
 
-		engine().showMain();
+		$$props.engine.showMain();
 		toggleDisplayMode();
 	}
 
@@ -43764,13 +43825,11 @@ function Draft_switcher($$anchor, $$props) {
 			return;
 		}
 
-		engine().showDraft();
+		$$props.engine.showDraft();
 		toggleDisplayMode();
 	}
 
-	init();
-
-	var div = root$6();
+	var div = root$7();
 	var div_1 = child(div);
 	var button = child(div_1);
 	var node = sibling(child(button));
@@ -43809,14 +43868,14 @@ function Draft_switcher($$anchor, $$props) {
 		var consequent_2 = ($$anchor) => {
 			var button_2 = root_3$2();
 
-			event('click', button_2, onClickMainToDraft);
+			delegated('click', button_2, onClickMainToDraft);
 			append($$anchor, button_2);
 		};
 
 		var alternate = ($$anchor) => {
 			var button_3 = root_4$2();
 
-			event('click', button_3, onClickDraftToMain);
+			delegated('click', button_3, onClickDraftToMain);
 			append($$anchor, button_3);
 		};
 
@@ -43830,14 +43889,16 @@ function Draft_switcher($$anchor, $$props) {
 		set_attribute(button_1, 'aria-pressed', !get(isMain));
 	});
 
-	event('click', button, onClickMain);
-	event('dblclick', button, onDblClickMain);
-	event('click', button_1, onClickDraft);
-	event('dblclick', button_1, onDblClickDraft);
+	delegated('click', button, onClickMain);
+	delegated('dblclick', button, onDblClickMain);
+	delegated('click', button_1, onClickDraft);
+	delegated('dblclick', button_1, onDblClickDraft);
 	append($$anchor, div);
 	pop();
 }
 
+delegate(['click', 'dblclick']);
+
 function File($$anchor, $$props) {
 	const $$sanitized_props = legacy_rest_props($$props, ['children', '$$slots', '$$events', '$$legacy']);
 
@@ -44094,25 +44155,21 @@ function getExt(src) {
 
 var root_1$3 = from_html(`<img alt="画像のプレビュー" loading="lazy" class="svelte-by6cmj"/>`);
 var root_2$2 = from_html(`<video playsinline="" class="svelte-by6cmj"><source/> <track kind="captions" src=""/> <!></video>`, 2);
-var root$5 = from_html(`<span data-bge-editor-ui-component="thumbnail" class="svelte-by6cmj"><!></span>`);
+var root$6 = from_html(`<span data-bge-editor-ui-component="thumbnail" class="svelte-by6cmj"><!></span>`);
 
 function Thumbnail($$anchor, $$props) {
-	push($$props, false);
-
-	let src = prop($$props, 'src', 8);
-	let isLoaded = mutable_source(false);
-	const file = getExt(src());
-
-	init();
+	push($$props, true);
 
-	var span = root$5();
+	let isLoaded = state(false);
+	const file = getExt($$props.src);
+	var span = root$6();
 	var node = child(span);
 
 	{
 		var consequent = ($$anchor) => {
 			var img = root_1$3();
 
-			template_effect(() => set_attribute(img, 'src', src()));
+			template_effect(() => set_attribute(img, 'src', $$props.src));
 			event('load', img, () => set(isLoaded, true));
 			append($$anchor, img);
 		};
@@ -44128,8 +44185,8 @@ function Thumbnail($$anchor, $$props) {
 			Video(node_1, {});
 
 			template_effect(() => {
-				set_attribute(source, 'src', src());
-				set_attribute(source, 'type', (untrack(() => `video/${file.ext}`)));
+				set_attribute(source, 'src', $$props.src);
+				set_attribute(source, 'type', `video/${file.ext}`);
 			});
 
 			append($$anchor, video);
@@ -44160,7 +44217,7 @@ function Thumbnail($$anchor, $$props) {
 		};
 
 		if_block(node, ($$render) => {
-			if ((untrack(() => file.isImage))) $$render(consequent); else if ((untrack(() => file.isVideo))) $$render(consequent_1, 1); else if ((untrack(() => file.isAudio))) $$render(consequent_2, 2); else if ((untrack(() => file.isDoc))) $$render(consequent_3, 3); else if ((untrack(() => file.isPpt))) $$render(consequent_4, 4); else if ((untrack(() => file.isXls))) $$render(consequent_5, 5); else if ((untrack(() => file.isPdf))) $$render(consequent_6, 6); else $$render(alternate, false);
+			if (file.isImage) $$render(consequent); else if (file.isVideo) $$render(consequent_1, 1); else if (file.isAudio) $$render(consequent_2, 2); else if (file.isDoc) $$render(consequent_3, 3); else if (file.isPpt) $$render(consequent_4, 4); else if (file.isXls) $$render(consequent_5, 5); else if (file.isPdf) $$render(consequent_6, 6); else $$render(alternate, false);
 		});
 	}
 	template_effect(() => set_attribute(span, 'data-loaded', get(isLoaded)));
@@ -44174,10 +44231,10 @@ var root_5$1 = from_html(`<span class="svelte-6hu200">アップロード中... <
 var root_6$1 = from_html(`<span class="attr svelte-6hu200"><span class="svelte-6hu200">ID</span><span class="svelte-6hu200"><!></span> <span class="svelte-6hu200">名称</span><span class="svelte-6hu200"><!></span> <span class="svelte-6hu200">更新</span><span class="svelte-6hu200"> </span> <span class="svelte-6hu200">サイズ</span><span class="svelte-6hu200"> </span></span>`);
 var root_7$1 = from_html(`<button class="delete svelte-6hu200" type="button">削除</button>`);
 var root_4$1 = from_html(`<li class="svelte-6hu200"><button class="file svelte-6hu200" type="button"><span class="thumbnail svelte-6hu200"><!></span> <!></button> <!></li>`);
-var root$4 = from_html(`<div class="ctrl svelte-6hu200"><div class="pagination svelte-6hu200"><button type="button" class="svelte-6hu200">前へ</button> <div class="page svelte-6hu200"><span><input type="number" min="1" aria-label="ページ番号"/></span> <span>/</span> <span> </span></div> <button type="button" class="svelte-6hu200">次へ</button></div> <input type="search" placeholder="検索"/></div> <ul class="list svelte-6hu200"></ul>`, 1);
+var root$5 = from_html(`<div class="ctrl svelte-6hu200"><div class="pagination svelte-6hu200"><button type="button" class="svelte-6hu200">前へ</button> <div class="page svelte-6hu200"><span><input type="number" min="1" aria-label="ページ番号"/></span> <span>/</span> <span> </span></div> <button type="button" class="svelte-6hu200">次へ</button></div> <input type="search" placeholder="検索"/></div> <ul class="list svelte-6hu200"></ul>`, 1);
 
 function File_list($$anchor, $$props) {
-	push($$props, false);
+	push($$props, true);
 
 	const // On initial mount
 	/**
@@ -44201,7 +44258,7 @@ function File_list($$anchor, $$props) {
 		var fragment = comment();
 		var node = first_child(fragment);
 
-		each(node, 3, chars, (char, i) => char + i, ($$anchor, char, i) => {
+		each(node, 19, chars, (char, i) => char + i, ($$anchor, char, i) => {
 			var fragment_1 = root_2$1();
 			var node_1 = first_child(fragment_1);
 
@@ -44227,43 +44284,45 @@ function File_list($$anchor, $$props) {
 		append($$anchor, fragment);
 	};
 
-	let engine = prop($$props, 'engine', 8);
-	let fileType = prop($$props, 'fileType', 8);
-	const getFileList = engine().serverAPI.getFileList;
-	const deleteFile = engine().serverAPI.deleteFile;
-	let fileList = mutable_source([]);
-	let selectedPath = mutable_source('');
-	let searchWord = mutable_source('');
-	let currentPage = mutable_source(0);
-	let totalPage = mutable_source(1);
-	let uploaded = mutable_source(0);
-	let total = mutable_source(100);
+	const getFileList = $$props.engine.serverAPI.getFileList;
+	const deleteFile = $$props.engine.serverAPI.deleteFile;
+	let fileList = state(proxy([]));
+	let selectedPath = state('');
+	let searchWord = state('');
+	let currentPage = state(0);
+	let totalPage = state(1);
+	let uploaded = state(0);
+	let total = state(100);
 	let requestDebounce = -1;
 
-	engine().componentObserver.on('file-select', async ({ path, isMounted }) => {
-		set(selectedPath, path);
+	$$props.engine.componentObserver.on('file-select', async ({ path, isMounted }) => {
+		set(selectedPath, path, true);
 
 		if (!isMounted && // On initial mount
 		getFileList) {
-			const result = await getFileList(fileType(), { filter: '', page: 0, selected: get(selectedPath) });
+			const result = await getFileList($$props.fileType, { filter: '', page: 0, selected: get(selectedPath) });
 
-			set(fileList, result.data);
-			set(currentPage, result.pagination.current);
-			set(totalPage, result.pagination.total);
+			set(fileList, result.data, true);
+			set(currentPage, result.pagination.current, true);
+			set(totalPage, result.pagination.total, true);
 		}
 
 		if (path.startsWith('blob:')) {
-			set(fileList, [
-				{
-					fileId: '',
-					name: '',
-					size: 0,
-					timestamp: Date.now(),
-					url: path,
-					sizes: {}
-				},
-				...get(fileList).filter((file) => !file.url.startsWith('blob:'))
-			]);
+			set(
+				fileList,
+				[
+					{
+						fileId: '',
+						name: '',
+						size: 0,
+						timestamp: Date.now(),
+						url: path,
+						sizes: {}
+					},
+					...get(fileList).filter((file) => !file.url.startsWith('blob:'))
+				],
+				true
+			);
 		}
 
 		const selectedButton = await awaitUntilFound(() => document.querySelector(`button[aria-pressed="true"]:has(img[src="${path}"])`));
@@ -44273,15 +44332,15 @@ function File_list($$anchor, $$props) {
 		}
 	});
 
-	engine().componentObserver.on('file-upload-progress', (progress) => {
+	$$props.engine.componentObserver.on('file-upload-progress', (progress) => {
 		if (progress.blob === get(selectedPath)) {
-			set(uploaded, progress.uploaded);
-			set(total, progress.total);
+			set(uploaded, progress.uploaded, true);
+			set(total, progress.total, true);
 		}
 	});
 
-	engine().componentObserver.on('file-listup', ({ data }) => {
-		set(fileList, data);
+	$$props.engine.componentObserver.on('file-listup', ({ data }) => {
+		set(fileList, data, true);
 	});
 
 	/**
@@ -44295,17 +44354,17 @@ function File_list($$anchor, $$props) {
 			return;
 		}
 
-		set(currentPage, page);
+		set(currentPage, page, true);
 		window.clearTimeout(requestDebounce);
 
 		requestDebounce = window.setTimeout(
 			async () => {
-				const result = await getFileList?.(fileType(), { page });
+				const result = await getFileList?.($$props.fileType, { page });
 
 				if (result) {
-					set(fileList, result.data);
-					set(currentPage, result.pagination.current);
-					set(totalPage, result.pagination.total);
+					set(fileList, result.data, true);
+					set(currentPage, result.pagination.current, true);
+					set(totalPage, result.pagination.total, true);
 				}
 			},
 			100
@@ -44321,17 +44380,17 @@ function File_list($$anchor, $$props) {
 			return;
 		}
 
-		set(searchWord, value);
+		set(searchWord, value, true);
 		window.clearTimeout(requestDebounce);
 
 		requestDebounce = window.setTimeout(
 			async () => {
-				const result = await getFileList?.(fileType(), { filter: get(searchWord) });
+				const result = await getFileList?.($$props.fileType, { filter: get(searchWord) });
 
 				if (result) {
-					set(fileList, result.data);
-					set(currentPage, result.pagination.current);
-					set(totalPage, result.pagination.total);
+					set(fileList, result.data, true);
+					set(currentPage, result.pagination.current, true);
+					set(totalPage, result.pagination.total, true);
 				}
 			},
 			300
@@ -44344,7 +44403,7 @@ function File_list($$anchor, $$props) {
 	 * @param fileSize
 	 */
 	function selectFile(path, fileSize) {
-		engine().componentObserver.notify('file-select', { path, fileSize, isEmpty: false, isMounted: true });
+		$$props.engine.componentObserver.notify('file-select', { path, fileSize, isEmpty: false, isMounted: true });
 	}
 
 	/**
@@ -44365,9 +44424,7 @@ function File_list($$anchor, $$props) {
 		return awaitUntilFound(callback);
 	}
 
-	init();
-
-	var fragment_2 = root$4();
+	var fragment_2 = root$5();
 	var div = first_child(fragment_2);
 	var div_1 = child(div);
 	var button = child(div_1);
@@ -44384,7 +44441,7 @@ function File_list($$anchor, $$props) {
 
 	var ul = sibling(div, 2);
 
-	each(ul, 5, () => get(fileList), (file) => file.url, ($$anchor, file) => {
+	each(ul, 21, () => get(fileList), (file) => file.url, ($$anchor, file) => {
 		var li = root_4$1();
 		var button_2 = child(li);
 		var span_2 = child(button_2);
@@ -44392,7 +44449,7 @@ function File_list($$anchor, $$props) {
 
 		Thumbnail(node_2, {
 			get src() {
-				return (get(file), untrack(() => get(file).url));
+				return get(file).url;
 			}
 		});
 
@@ -44403,22 +44460,11 @@ function File_list($$anchor, $$props) {
 				var span_3 = root_5$1();
 				var span_4 = sibling(child(span_3));
 				var text_3 = child(span_4);
-
-				template_effect(($0) => set_text(text_3, `${$0 ?? ''}%`), [
-					() => (
-						get(uploaded),
-						get(total),
-						untrack(() => Math.floor(get(uploaded) / get(total) * 100))
-					)
-				]);
-
+				template_effect(($0) => set_text(text_3, `${$0 ?? ''}%`), [() => Math.floor(get(uploaded) / get(total) * 100)]);
 				append($$anchor, span_3);
 			};
 
-			var d = user_derived(() => (
-				get(file),
-				untrack(() => get(file).url.startsWith('blob:'))
-			));
+			var d = user_derived(() => get(file).url.startsWith('blob:'));
 
 			var alternate = ($$anchor) => {
 				var span_5 = root_6$1();
@@ -44426,11 +44472,7 @@ function File_list($$anchor, $$props) {
 				var node_4 = child(span_6);
 
 				{
-					let $0 = derived_safe_equal(() => (
-						get(file),
-						get(searchWord),
-						untrack(() => get(file).fileId.split(get(searchWord)))
-					));
+					let $0 = user_derived(() => get(file).fileId.split(get(searchWord)));
 
 					marked(node_4, () => get($0));
 				}
@@ -44439,11 +44481,7 @@ function File_list($$anchor, $$props) {
 				var node_5 = child(span_7);
 
 				{
-					let $0 = derived_safe_equal(() => (
-						get(file),
-						get(searchWord),
-						untrack(() => get(file).name.split(get(searchWord)))
-					));
+					let $0 = user_derived(() => get(file).name.split(get(searchWord)));
 
 					marked(node_5, () => get($0));
 				}
@@ -44460,17 +44498,8 @@ function File_list($$anchor, $$props) {
 						set_text(text_5, $1);
 					},
 					[
-						() => (
-							deep_read_state(formatDate),
-							get(file),
-							untrack(() => formatDate(get(file).timestamp / 1000, 'YYYY-MM-DD HH:mm'))
-						),
-
-						() => (
-							deep_read_state(formatByteSize),
-							get(file),
-							untrack(() => formatByteSize(get(file).size))
-						)
+						() => formatDate(get(file).timestamp / 1000, 'YYYY-MM-DD HH:mm'),
+						() => formatByteSize(get(file).size)
 					]
 				);
 
@@ -44488,27 +44517,18 @@ function File_list($$anchor, $$props) {
 			var consequent_2 = ($$anchor) => {
 				var button_3 = root_7$1();
 
-				event('click', button_3, () => deleteFile('image', get(file).url));
+				delegated('click', button_3, () => deleteFile('image', get(file).url));
 				append($$anchor, button_3);
 			};
 
-			var d_1 = user_derived(() => (
-				get(file),
-				untrack(() => !get(file).url.startsWith('blob:') && deleteFile)
-			));
+			var d_1 = user_derived(() => !get(file).url.startsWith('blob:') && deleteFile);
 
 			if_block(node_6, ($$render) => {
 				if (get(d_1)) $$render(consequent_2);
 			});
 		}
-
-		template_effect(() => set_attribute(button_2, 'aria-pressed', (
-			get(file),
-			get(selectedPath),
-			untrack(() => get(file).url === get(selectedPath))
-		)));
-
-		event('click', button_2, () => selectFile(get(file).url, get(file).size));
+		template_effect(() => set_attribute(button_2, 'aria-pressed', get(file).url === get(selectedPath)));
+		delegated('click', button_2, () => selectFile(get(file).url, get(file).size));
 		append($$anchor, li);
 	});
 
@@ -44521,36 +44541,36 @@ function File_list($$anchor, $$props) {
 		set_value(input_1, get(searchWord));
 	});
 
-	event('click', button, () => paginate(get(currentPage) - 1));
-	event('change', input, (e) => paginate(e.currentTarget.valueAsNumber - 1));
-	event('click', button_1, () => paginate(get(currentPage) + 1));
-	event('input', input_1, (e) => search(e.currentTarget.value));
+	delegated('click', button, () => paginate(get(currentPage) - 1));
+	delegated('change', input, (e) => paginate(e.currentTarget.valueAsNumber - 1));
+	delegated('click', button_1, () => paginate(get(currentPage) + 1));
+	delegated('input', input_1, (e) => search(e.currentTarget.value));
 	append($$anchor, fragment_2);
 	pop();
 }
 
-var root$3 = from_html(`<div><input type="file" class="svelte-uefuli"/> <button type="button">ファイルを追加アップロードする</button></div>`);
+delegate(['click', 'change', 'input']);
+
+var root$4 = from_html(`<div><input type="file" class="svelte-uefuli"/> <button type="button">ファイルを追加アップロードする</button></div>`);
 
 function File_uploader($$anchor, $$props) {
-	push($$props, false);
+	push($$props, true);
 
-	let engine = prop($$props, 'engine', 8);
-	let fileType = prop($$props, 'fileType', 8);
-	const accept = fileType() === 'image' ? 'image/*' : '*';
-	let inputFile = mutable_source();
+	const accept = $$props.fileType === 'image' ? 'image/*' : '*';
+	let inputFile;
 
 	/**
 	 *
 	 */
 	function openFile() {
-		get(inputFile).click();
+		inputFile.click();
 	}
 
 	/**
 	 *
 	 */
 	async function stageFile() {
-		const file = get(inputFile).files?.[0];
+		const file = inputFile.files?.[0];
 
 		if (!file) {
 			return;
@@ -44558,40 +44578,54 @@ function File_uploader($$anchor, $$props) {
 
 		const path = URL.createObjectURL(file);
 
-		engine().componentObserver.notify('file-select', { path, fileSize: file.size, isEmpty: false });
+		$$props.engine.componentObserver.notify('file-select', { path, fileSize: file.size, isEmpty: false });
 
-		const res = await engine().serverAPI.postFile?.(fileType(), file, (uploaded, total) => {
-			engine().componentObserver.notify('file-upload-progress', { blob: path, uploaded, total });
+		const res = await $$props.engine.serverAPI.postFile?.($$props.fileType, file, (uploaded, total) => {
+			$$props.engine.componentObserver.notify('file-upload-progress', { blob: path, uploaded, total });
 		});
 
 		if (!res) {
 			throw new Error(`Failed to upload file: ${file.name}`);
 		}
 
-		engine().componentObserver.notify('file-listup', { fileType: fileType(), data: [res.uploaded] });
+		$$props.engine.componentObserver.notify('file-listup', { fileType: $$props.fileType, data: [res.uploaded] });
 
-		engine().componentObserver.notify('file-select', {
+		$$props.engine.componentObserver.notify('file-select', {
 			path: res.uploaded.url,
 			fileSize: res.uploaded.size,
 			isEmpty: false
 		});
 	}
 
-	init();
-
-	var div = root$3();
+	var div = root$4();
 	var input = child(div);
 
-	bind_this(input, ($$value) => set(inputFile, $$value), () => get(inputFile));
+	bind_this(input, ($$value) => inputFile = $$value, () => inputFile);
 
 	var button = sibling(input, 2);
 	template_effect(() => set_attribute(input, 'accept', accept));
-	event('change', input, stageFile);
-	event('click', button, openFile);
+	delegated('change', input, stageFile);
+	delegated('click', button, openFile);
 	append($$anchor, div);
 	pop();
 }
 
+delegate(['change', 'click']);
+
+var root$3 = from_html(`<button class="insert_after" type="button">下に要素を追加</button>`);
+
+function Initial_insertion_button($$anchor, $$props) {
+	var button = root$3();
+
+	delegated('click', button, function (...$$args) {
+		$$props.onInsert?.apply(this, $$args);
+	});
+
+	append($$anchor, button);
+}
+
+delegate(['click']);
+
 var root_1$2 = from_html(`<img alt="画像プレビュー" class="svelte-1sdkkhr"/>`);
 var root_2 = from_html(`<video controls="" playsinline="" class="svelte-1sdkkhr"><source/> <track kind="captions" src=""/></video>`, 2);
 var root_3 = from_html(`<audio controls="" class="svelte-1sdkkhr"><source/> <track kind="metadata" src=""/></audio>`);
@@ -44604,36 +44638,31 @@ var root_9 = from_html(`<li class="dimension svelte-1sdkkhr"> </li>`);
 var root$2 = from_html(`<div><div><!> <!></div> <ul class="svelte-1sdkkhr"><!> <!></ul></div>`);
 
 function Preview($$anchor, $$props) {
-	push($$props, false);
+	push($$props, true);
 
-	const isUploadingMode = mutable_source();
-	let engine = prop($$props, 'engine', 8);
-	let selectedPath = mutable_source('');
-	let width = mutable_source(Number.NaN);
-	let height = mutable_source(Number.NaN);
-	let file = mutable_source(null);
-	let uploaded = mutable_source(0);
-	let total = mutable_source(100);
-
-	engine().componentObserver.on('file-select', ({ path }) => {
-		set(selectedPath, path);
-		set(file, getExt(path));
+	let selectedPath = state('');
+	let width = state(proxy(Number.NaN));
+	let height = state(proxy(Number.NaN));
+	let file = state(null);
+	let uploaded = state(0);
+	let total = state(100);
+	const isUploadingMode = user_derived(() => get(selectedPath).startsWith('blob:'));
+
+	$$props.engine.componentObserver.on('file-select', ({ path }) => {
+		set(selectedPath, path, true);
+		set(file, getExt(path), true);
 	});
 
-	engine().componentObserver.on('file-upload-progress', (progress) => {
+	$$props.engine.componentObserver.on('file-upload-progress', (progress) => {
 		if (progress.blob === get(selectedPath)) {
-			set(uploaded, progress.uploaded);
-			set(total, progress.total);
+			set(uploaded, progress.uploaded, true);
+			set(total, progress.total, true);
 		}
 	});
 
-	legacy_pre_effect(() => (get(selectedPath)), () => {
-		set(isUploadingMode, get(selectedPath).startsWith('blob:'));
-	});
-
-	legacy_pre_effect(() => (get(file), get(selectedPath)), () => {
-		set(width, Number.NaN);
-		set(height, Number.NaN);
+	user_effect(() => {
+		set(width, Number.NaN, true);
+		set(height, Number.NaN, true);
 
 		if (get(file)?.isImage) {
 			const image = new Image();
@@ -44643,8 +44672,8 @@ function Preview($$anchor, $$props) {
 			image.addEventListener(
 				'load',
 				() => {
-					set(width, image.naturalWidth);
-					set(height, image.naturalHeight);
+					set(width, image.naturalWidth, true);
+					set(height, image.naturalHeight, true);
 				},
 				{ once: true }
 			);
@@ -44656,17 +44685,14 @@ function Preview($$anchor, $$props) {
 			video.addEventListener(
 				'loadedmetadata',
 				() => {
-					set(width, video.videoWidth);
-					set(height, video.videoHeight);
+					set(width, video.videoWidth, true);
+					set(height, video.videoHeight, true);
 				},
 				{ once: true }
 			);
 		}
 	});
 
-	legacy_pre_effect_reset();
-	init();
-
 	var div = root$2();
 	var div_1 = child(div);
 	let classes;
@@ -44686,7 +44712,7 @@ function Preview($$anchor, $$props) {
 
 			template_effect(() => {
 				set_attribute(source, 'src', get(selectedPath));
-				set_attribute(source, 'type', (get(file), untrack(() => `video/${get(file).ext}`)));
+				set_attribute(source, 'type', `video/${get(file).ext}`);
 			});
 
 			append($$anchor, video_1);
@@ -44698,7 +44724,7 @@ function Preview($$anchor, $$props) {
 
 			template_effect(() => {
 				set_attribute(source_1, 'src', get(selectedPath));
-				set_attribute(source_1, 'type', (get(file), untrack(() => `audio/${get(file).ext}`)));
+				set_attribute(source_1, 'type', `audio/${get(file).ext}`);
 			});
 
 			append($$anchor, audio);
@@ -44709,13 +44735,8 @@ function Preview($$anchor, $$props) {
 
 			template_effect(() => {
 				set_attribute(object, 'data', get(selectedPath));
-
-				set_attribute(object, 'type', (
-					get(file),
-					untrack(() => `application/${get(file).ext}`)
-				));
-
-				set_attribute(object, 'title', (get(file), untrack(() => `${get(file).ext}ファイルのプレビュー`)));
+				set_attribute(object, 'type', `application/${get(file).ext}`);
+				set_attribute(object, 'title', `${get(file).ext}ファイルのプレビュー`);
 			});
 
 			append($$anchor, object);
@@ -44728,10 +44749,7 @@ function Preview($$anchor, $$props) {
 		};
 
 		if_block(node, ($$render) => {
-			if ((get(file), untrack(() => get(file)?.isImage))) $$render(consequent); else if ((get(file), untrack(() => get(file)?.isVideo))) $$render(consequent_1, 1); else if ((get(file), untrack(() => get(file)?.isAudio))) $$render(consequent_2, 2); else if ((
-				get(file),
-				untrack(() => get(file)?.isDoc || get(file)?.isPpt || get(file)?.isXls || get(file)?.isPdf)
-			)) $$render(consequent_3, 3); else $$render(alternate, false);
+			if (get(file)?.isImage) $$render(consequent); else if (get(file)?.isVideo) $$render(consequent_1, 1); else if (get(file)?.isAudio) $$render(consequent_2, 2); else if (get(file)?.isDoc || get(file)?.isPpt || get(file)?.isXls || get(file)?.isPdf) $$render(consequent_3, 3); else $$render(alternate, false);
 		});
 	}
 
@@ -44759,15 +44777,7 @@ function Preview($$anchor, $$props) {
 			var li = root_7();
 			var span = sibling(child(li), 2);
 			var text = child(span);
-
-			template_effect(($0) => set_text(text, `${$0 ?? ''}% (${get(uploaded) ?? ''}/${get(total) ?? ''})`), [
-				() => (
-					get(uploaded),
-					get(total),
-					untrack(() => Math.round(get(uploaded) / get(total) * 100))
-				)
-			]);
-
+			template_effect(($0) => set_text(text, `${$0 ?? ''}% (${get(uploaded) ?? ''}/${get(total) ?? ''})`), [() => Math.round(get(uploaded) / get(total) * 100)]);
 			append($$anchor, li);
 		};
 
@@ -44799,11 +44809,7 @@ function Preview($$anchor, $$props) {
 			append($$anchor, li_2);
 		};
 
-		var d = user_derived(() => (
-			get(width),
-			get(height),
-			untrack(() => !Number.isNaN(get(width)) && !Number.isNaN(get(height)))
-		));
+		var d = user_derived(() => !Number.isNaN(get(width)) && !Number.isNaN(get(height)));
 
 		if_block(node_3, ($$render) => {
 			if (get(d)) $$render(consequent_6);
@@ -44855,15 +44861,14 @@ var root_1$1 = from_html(`<div class="row svelte-sj6f65"><div class="th"><textar
 var root$1 = from_html(`<div class="table svelte-sj6f65"></div>`);
 
 function Table_editor($$anchor, $$props) {
-	push($$props, false);
+	push($$props, true);
 
-	let engine = prop($$props, 'engine', 8);
-	let table = mutable_source([]);
+	let table = state(proxy([]));
 
-	engine().componentObserver.on('open-editor', ({ data }) => {
+	$$props.engine.componentObserver.on('open-editor', ({ data }) => {
 		const { th, td } = data;
 
-		set(table, th.map((th, i) => [th, td[i] ?? '']));
+		set(table, th.map((th, i) => [th, td[i] ?? '']), true);
 		updateDataEl();
 	});
 
@@ -44872,7 +44877,7 @@ function Table_editor($$anchor, $$props) {
 	 * @param index
 	 */
 	function add(index) {
-		set(table, get(table).toSpliced(index + 1, 0, ['', '']));
+		set(table, get(table).toSpliced(index + 1, 0, ['', '']), true);
 		updateDataEl();
 	}
 
@@ -44881,7 +44886,7 @@ function Table_editor($$anchor, $$props) {
 	 * @param index
 	 */
 	function remove(index) {
-		set(table, get(table).toSpliced(index, 1));
+		set(table, get(table).toSpliced(index, 1), true);
 		updateDataEl();
 	}
 
@@ -44891,11 +44896,11 @@ function Table_editor($$anchor, $$props) {
 	 * @param to
 	 */
 	function move(from, to) {
-		const $from = get(table)[from];
-		const $to = get(table)[to];
+		const fromRow = get(table)[from];
+		const toRow = get(table)[to];
 
-		set(table, get(table).toSpliced(from, 1, $to));
-		set(table, get(table).toSpliced(to, 1, $from));
+		set(table, get(table).toSpliced(from, 1, toRow), true);
+		set(table, get(table).toSpliced(to, 1, fromRow), true);
 		updateDataEl();
 	}
 
@@ -44905,7 +44910,7 @@ function Table_editor($$anchor, $$props) {
 	 * based on the provided logic or parameters.
 	 */
 	function updateDataEl() {
-		const dataEl = engine().itemEditorDialog.find('[name=bge]');
+		const dataEl = $$props.engine.itemEditorDialog.find('[name=bge]');
 
 		if (!dataEl) {
 			throw new Error('dataEl not found');
@@ -44919,11 +44924,9 @@ function Table_editor($$anchor, $$props) {
 		dataEl.value = JSON.stringify(data);
 	}
 
-	init();
-
 	var div = root$1();
 
-	each(div, 5, () => get(table), index, ($$anchor, row, i) => {
+	each(div, 21, () => get(table), index, ($$anchor, row, i) => {
 		var div_1 = root_1$1();
 		var div_2 = child(div_1);
 		var textarea = child(div_2);
@@ -44956,28 +44959,14 @@ function Table_editor($$anchor, $$props) {
 		Arrows_transfer_down(node_2, { class: 'icon' });
 
 		template_effect(() => {
-			button_1.disabled = (get(table), untrack(() => get(table).length === 1));
-
-			button_2.disabled = (
-				get(table),
-				untrack(() => i === get(table).length - 1)
-			);
+			button_1.disabled = get(table).length === 1;
+			button_2.disabled = i === get(table).length - 1;
 		});
 
 		delegated('input', textarea, updateDataEl);
-
-		bind_value(textarea, () => get(row)[0], ($$value) => (
-			get(row)[0] = $$value,
-			invalidate_inner_signals(() => (get(table)))
-		));
-
+		bind_value(textarea, () => get(row)[0], ($$value) => (get(row)[0] = $$value));
 		delegated('input', textarea_1, updateDataEl);
-
-		bind_value(textarea_1, () => get(row)[1], ($$value) => (
-			get(row)[1] = $$value,
-			invalidate_inner_signals(() => (get(table)))
-		));
-
+		bind_value(textarea_1, () => get(row)[1], ($$value) => (get(row)[1] = $$value));
 		delegated('click', button, () => add(i));
 		delegated('click', button_1, () => remove(i));
 		delegated('click', button_2, () => move(i, i + 1));
@@ -44993,18 +44982,16 @@ var root_1 = from_html(`<button type="button" role="tab" class="svelte-ruvo7f">
 var root = from_html(`<div role="tablist" class="svelte-ruvo7f"></div>`);
 
 function Tabs($$anchor, $$props) {
-	push($$props, false);
+	push($$props, true);
 
-	let engine = prop($$props, 'engine', 8);
-	let contentId = prop($$props, 'contentId', 8);
-	const refs = mutable_source([]);
+	const refs = [];
 	let tabPanel = null;
 	const length = 2;
-	let currentIndex = mutable_source(0);
+	let currentIndex = state(0);
 
-	engine().componentObserver.on('select-tab-in-item-editor', ({ index }) => {
-		set(currentIndex, index);
-		get(refs)[get(currentIndex)]?.focus();
+	$$props.engine.componentObserver.on('select-tab-in-item-editor', ({ index }) => {
+		set(currentIndex, index, true);
+		refs[get(currentIndex)]?.focus();
 	});
 
 	const onKeyDown = (event) => {
@@ -45034,42 +45021,38 @@ function Tabs($$anchor, $$props) {
 	 * @param index
 	 */
 	function update(index) {
-		set(currentIndex, index);
-		get(refs)[get(currentIndex)]?.focus();
-		engine().componentObserver.notify('select-tab-in-item-editor', { index: get(currentIndex) });
+		set(currentIndex, index, true);
+		refs[get(currentIndex)]?.focus();
+		$$props.engine.componentObserver.notify('select-tab-in-item-editor', { index: get(currentIndex) });
 		tabPanel?.setAttribute('aria-label', createLabel(get(currentIndex)));
 	}
 
-	onMount(() => {
-		tabPanel = document.getElementById(contentId());
+	user_effect(() => {
+		tabPanel = document.getElementById($$props.contentId);
 
 		if (!tabPanel) {
 			throw new Error('Tab panel not found');
 		}
 	});
 
-	init();
-
 	var div = root();
 
-	each(div, 5, () => (untrack(() => Array.from({ length }, (_, index) => index))), (index) => index, ($$anchor, index) => {
+	each(div, 20, () => Array.from({ length }, (_, index) => index), (index) => index, ($$anchor, index) => {
 		var button = root_1();
 		var text = child(button);
-		bind_this(button, ($$value, index) => mutate(refs, get(refs)[index] = $$value), (index) => get(refs)?.[index], () => [get(index)]);
+		bind_this(button, ($$value, index) => refs[index] = $$value, (index) => refs?.[index], () => [index]);
 
 		template_effect(
 			($0) => {
-				set_attribute(button, 'aria-controls', contentId());
-				set_attribute(button, 'aria-selected', get(currentIndex) === get(index));
-				set_attribute(button, 'tabindex', get(currentIndex) === get(index) ? 0 : -1);
+				set_attribute(button, 'aria-controls', $$props.contentId);
+				set_attribute(button, 'aria-selected', get(currentIndex) === index);
+				set_attribute(button, 'tabindex', get(currentIndex) === index ? 0 : -1);
 				set_text(text, $0);
 			},
-			[
-				() => (get(index), untrack(() => createLabel(get(index))))
-			]
+			[() => createLabel(index)]
 		);
 
-		delegated('click', button, () => onClick(get(index)));
+		delegated('click', button, () => onClick(index));
 		delegated('keydown', button, onKeyDown);
 		append($$anchor, button);
 	});
@@ -45116,7 +45099,7 @@ function parseConfig(config) {
   }
 }
 
-const version = "4.0.0-alpha.60";
+const version = "4.0.0-alpha.61";
 function attachDraftSwitcher(engine) {
   if (engine.hasDraft()) {
     const container = document.createElement("div");
@@ -45134,13 +45117,27 @@ function attachDraftSwitcher(engine) {
 async function createBurgerEditorClient(options) {
   const engine = await BurgerEditorEngine.new({
     ...options,
-    blockMenu: (el, engine2) => {
-      return svelteMount(Block_menu, {
-        target: el,
+    initialInsertionButton: (container, onInsert) => {
+      return svelteMount(Initial_insertion_button, {
+        target: container,
+        props: {
+          onInsert
+        }
+      });
+    },
+    blockMenu: (container, engine2) => {
+      const { cleanUp } = svelteMount(Block_menu, {
+        target: container,
         props: {
-          engine: engine2
+          engine: engine2,
+          container,
+          onHide: () => engine2.clearCurrentBlock()
         }
       });
+      return {
+        hide: () => engine2.clearCurrentBlock(),
+        cleanUp
+      };
     },
     ui: {
       blockCatalog: (el, engine2) => {