@burger-editor/local 4.0.0-alpha.3 → 4.0.0-alpha.4

package/dist/client.js

@@ -3131,14 +3131,14 @@ function next (prev, current, isPre) {
  * Set up window for Node.js
  */
 
-var root$5 = (typeof window !== 'undefined' ? window : {});
+var root$6 = (typeof window !== 'undefined' ? window : {});
 
 /*
  * Parsing HTML strings
  */
 
 function canParseHTMLNatively$1 () {
-  var Parser = root$5.DOMParser;
+  var Parser = root$6.DOMParser;
   var canParse = false;
 
   // Adapted from https://gist.github.com/1129031
@@ -3184,12 +3184,12 @@ function shouldUseActiveX$1 () {
   try {
     document.implementation.createHTMLDocument('').open();
   } catch (e) {
-    if (root$5.ActiveXObject) useActiveX = true;
+    if (root$6.ActiveXObject) useActiveX = true;
   }
   return useActiveX
 }
 
-var HTMLParser = canParseHTMLNatively$1() ? root$5.DOMParser : createHTMLParser$1();
+var HTMLParser = canParseHTMLNatively$1() ? root$6.DOMParser : createHTMLParser$1();
 
 function RootNode (input, options) {
   var root;
@@ -6323,6 +6323,20 @@ let NoHTMLElementError$1 = class NoHTMLElementError extends Error {
     }
 };
 
+/**
+ * List of dangerous HTML elements to block for XSS protection
+ */
+const DANGEROUS_ELEMENTS$1 = [
+    'script',
+    'style',
+    'template',
+    'object',
+    'embed',
+    'iframe',
+    'frame',
+    'frameset',
+    'applet',
+];
 /**
  *
  * @param kvs
@@ -6346,31 +6360,302 @@ function arrayToHash$1(kvs) {
     }
     return result;
 }
+const kebabCaseCache$1 = new Map();
 /**
  *
  * @param str
  */
 function kebabCase$1(str) {
-    return str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
+    if (kebabCaseCache$1.has(str)) {
+        return kebabCaseCache$1.get(str);
+    }
+    const result = str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
+    kebabCaseCache$1.set(str, result);
+    return result;
 }
+const camelCaseCache$1 = new Map();
 /**
  *
  * @param str
  */
 function camelCase$1(str) {
-    return str.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+    if (camelCaseCache$1.has(str)) {
+        return camelCaseCache$1.get(str);
+    }
+    const result = str.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+    camelCaseCache$1.set(str, result);
+    return result;
+}
+/**
+ *
+ * @param el
+ * @param nodeName
+ * @param attr
+ * @param xssSanitize
+ */
+function replaceNode$1(el, nodeName, attr, xssSanitize = true) {
+    nodeName = nodeName.toLowerCase();
+    const currentName = el.localName ?? el.nodeName.toLowerCase();
+    if (currentName === nodeName) {
+        return el;
+    }
+    // Check element name if XSS protection is enabled
+    if (xssSanitize && // Disallow dangerous elements
+        DANGEROUS_ELEMENTS$1.includes(nodeName)) {
+        return el;
+    }
+    const node = (el.ownerDocument ?? document).createElement(nodeName);
+    for (const child of el.childNodes) {
+        node.append(child.cloneNode(true));
+    }
+    const fields = getFields$1(el, attr);
+    const attrs = new Set(fields.map((field) => field.propName));
+    for (const { name, value } of el.attributes) {
+        if (attrs.has(name)) {
+            continue;
+        }
+        // Check attribute value if XSS protection is enabled
+        if (xssSanitize) {
+            const sanitizedValue = sanitizeAttributeValue$1(name, value);
+            if (sanitizedValue !== null) {
+                node.setAttribute(name, sanitizedValue);
+            }
+            continue;
+        }
+        node.setAttribute(name, value);
+    }
+    el.replaceWith(node);
+    return node;
+}
+/**
+ * Removes dangerous script elements from HTML string
+ * @param html HTML string
+ * @returns Sanitized HTML
+ */
+function sanitizeHtml$1(html) {
+    if (typeof html !== 'string') {
+        return '';
+    }
+    // Simple approach to handle script tags content
+    // First remove script tags but keep their content
+    let sanitized = html;
+    // For each dangerous element, replace tag but keep content using regex
+    // Example: <script>alert("XSS")</script> -> alert("XSS")
+    for (const tagName of DANGEROUS_ELEMENTS$1) {
+        const regex = new RegExp(`<${tagName}[^>]*>(.*?)<\\/${tagName}>`, 'gis');
+        sanitized = sanitized.replace(regex, '$1');
+    }
+    // Parse HTML safely using DOM parser for remaining sanitization
+    const doc = new DOMParser().parseFromString(sanitized, 'text/html');
+    const body = doc.body;
+    // Remove event handler attributes from all elements
+    sanitizeElementAndChildren$1(body);
+    return body.innerHTML;
+}
+/**
+ * Sanitizes an element and all its child elements
+ * @param element Target element
+ */
+function sanitizeElementAndChildren$1(element) {
+    // Remove dangerous attributes from current element
+    sanitizeAttributes$1(element);
+    // Process child elements recursively
+    const children = element.children;
+    for (const child of children) {
+        sanitizeElementAndChildren$1(child);
+    }
+}
+/**
+ * Sanitizes attribute value
+ * @param name Attribute name
+ * @param value Attribute value
+ * @returns Safe attribute value, or null if dangerous
+ */
+function sanitizeAttributeValue$1(name, value) {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    name = name.toLowerCase();
+    // Disallow event handler attributes
+    if (name.startsWith('on')) {
+        return null;
+    }
+    // Check for dangerous protocol in link attributes
+    if (name === 'href' ||
+        name === 'src' ||
+        name === 'action' ||
+        name === 'formaction' ||
+        name === 'xlink:href') {
+        const trimmedValue = value.trim().toLowerCase();
+        if (trimmedValue.startsWith('javascript:') ||
+            trimmedValue.startsWith('data:') ||
+            trimmedValue.startsWith('vbscript:')) {
+            return null;
+        }
+    }
+    // Other dangerous attributes
+    if (['manifest'].includes(name)) {
+        return null;
+    }
+    return value;
+}
+/**
+ * Removes dangerous attributes from an element
+ * @param element Target element
+ */
+function sanitizeAttributes$1(element) {
+    // Collect list of dangerous attributes
+    const dangerousAttrs = [...element.attributes]
+        .filter((attr) => sanitizeAttributeValue$1(attr.name, attr.value) === null)
+        .map((attr) => attr.name);
+    // Remove dangerous attributes
+    for (const attrName of dangerousAttrs) {
+        element.removeAttribute(attrName);
+    }
+}
+/**
+ *
+ * @param data
+ * @param definedFields
+ */
+function maxLengthOf$1(data, definedFields) {
+    let maxLength = 0;
+    for (const key in data) {
+        if (definedFields.includes(key) && Array.isArray(data[key])) {
+            maxLength = Math.max(maxLength, data[key].length);
+        }
+    }
+    return maxLength;
+}
+/**
+ *
+ * @param el
+ * @param attr
+ */
+function definedFields$1(el, attr) {
+    const fieldDefinitions = getFields$1(el, attr);
+    return fieldDefinitions.map((field) => field.fieldName);
+}
+/**
+ *
+ * @param el
+ * @param attr
+ */
+function getFields$1(el, attr) {
+    const fields = el.getAttribute(`data-${attr}`);
+    if (!fields) {
+        return [];
+    }
+    return parseFields$1(fields);
+}
+/**
+ *
+ * @param el
+ * @param attr
+ * @param dataKeyName
+ */
+function hasField$1(el, attr, dataKeyName) {
+    const fieldDefinitions = getFields$1(el, attr);
+    return fieldDefinitions.some((field) => field.fieldName === dataKeyName);
+}
+/**
+ *
+ * @param fields
+ * @param oldPropName
+ * @param newPropName
+ */
+function replaceProp$1(fields, oldPropName, newPropName) {
+    return fields.map((field) => {
+        if (field.propName === oldPropName) {
+            return {
+                ...field,
+                propName: newPropName,
+            };
+        }
+        return field;
+    });
+}
+/**
+ *
+ * @param fields
+ * @param propName
+ */
+function removeProp$1(fields, propName) {
+    return fields.filter((field) => field.propName !== propName);
+}
+/**
+ * - 値が配列の場合は、index に対応する値を返す。
+ * - 値が配列でない場合は、そのまま返す。
+ * - ⚠️ 値が配列で、index に対応する値が undefined の場合は、配列の最初の値を返す。
+ * @param data
+ * @param index
+ */
+function flattenData$1(data, index) {
+    const result = {};
+    for (const key in data) {
+        result[key] = Array.isArray(data[key])
+            ? data[key][index] === undefined
+                ? data[key][0]
+                : data[key][index]
+            : data[key];
+    }
+    return result;
+}
+/**
+ * 特定の要素で、`propName in element`で判定できない属性名
+ */
+const specificProp$1 = {
+    /*
+     * JSDOMの未実装対策
+     * @see https://github.com/jsdom/jsdom/blob/main/lib/jsdom/living/nodes/HTMLSourceElement.webidl
+     * Living Standardでは実装済み
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#htmlsourceelement
+     */
+    source: ['width', 'height'],
+};
+/**
+ *
+ * @param el
+ * @param name
+ */
+function propInElement$1(el, name) {
+    const has = name in el;
+    if (has) {
+        return true;
+    }
+    return specificProp$1[el.localName]?.includes(name) ?? false;
 }
 
+const cache$1 = new Map();
+/**
+ *
+ * @param query
+ */
+function parseFields$1(query) {
+    const cached = cache$1.get(query);
+    if (cached) {
+        return cached;
+    }
+    const fields = query.split(',');
+    const result = fields.map(parseField$1);
+    cache$1.set(query, result);
+    return result;
+}
 /**
  *
  * @param field
  */
-function fieldNameParser$1(field) {
+function parseField$1(field) {
     field = field.trim().toLowerCase();
     if (!field) {
         throw new Error('Field name is empty.');
     }
-    let [fieldName, propName] = field.split(':');
+    let [fieldName, propName, 
+    // eslint-disable-next-line prefer-const
+    ...rest] = field.split(':');
+    if (rest.length > 0) {
+        throw new Error('Invalid field format.');
+    }
     propName = propName?.trim() || '';
     fieldName = fieldName?.trim() || propName || field;
     return {
@@ -6390,58 +6675,67 @@ function fieldNameParser$1(field) {
  * @param datum A datum of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-function setValue$1(el, name, datum, attr = 'field', filter) {
+function setValue$1(el, name, datum, attr = 'field', filter, xssSanitize = true) {
     const rawValue = el.getAttribute(`data-${attr}`);
-    const fieldList = rawValue?.split(/\s*,\s*/) ?? [];
-    for (const field of fieldList) {
-        const { fieldName, propName } = fieldNameParser$1(field);
-        if (name !== fieldName) {
-            continue;
-        }
-        if (filter) {
-            datum = filter(datum);
-        }
-        // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
-        if (propName) {
-            if (/^style\([a-z-]+\)$/i.test(propName)) {
-                const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
-                let cssValue;
-                switch (cssPropertyName) {
-                    case 'background-image': {
-                        //
-                        // NGパターン
-                        // $changeDom.css(cssPropertyName, 'url("' + value + '")');
-                        //
-                        // cssメソッドを経由すると styleAPIを使用するので URLがホストを含めた絶対パスになる
-                        // デモサーバーから本番サーバーへの移行ができなくなってしまうので避ける
-                        // 単純な文字列を流し込む（setAttributeを利用）
-                        // urlはマルチバイト文字や空白記号を含まないはずであるがエスケープする
-                        const url = encodeURI(`${datum}`);
-                        cssValue = `url(${url})`;
-                        break;
-                    }
-                    //
-                    // TODO: 他にもvalueに単位が必要なケースなどに対応したい
-                    //
-                    default: {
-                        cssValue = `${datum}`;
-                    }
-                }
-                el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
-            }
-            else if (el instanceof HTMLElement) {
-                // HTMLElement
-                set$4(el, attr, propName, datum);
+    const fields = parseFields$1(rawValue ?? '');
+    const field = fields.find((field) => field.fieldName === name);
+    if (!field) {
+        return;
+    }
+    const { propName } = field;
+    if (filter) {
+        datum = filter(datum);
+    }
+    // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
+    if (!propName) {
+        setContent$1(el, datum, undefined, xssSanitize);
+        return;
+    }
+    if (propName === 'style' && el instanceof HTMLElement) {
+        el.style.cssText = `${datum}`;
+        return;
+    }
+    if (/^style\([a-z-]+\)$/i.test(propName)) {
+        const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
+        let cssValue;
+        switch (cssPropertyName) {
+            case 'background-image': {
+                // Using CSS method would create absolute URLs with host
+                // This would prevent migration from demo to production server
+                // Using simple string insertion (setAttribute) instead
+                // URL may not contain multibyte or whitespace characters, but escape anyway
+                const url = encodeURI(`${datum}`);
+                cssValue = `url(${url})`;
+                break;
             }
-            else {
-                // SVGElement or more
-                el.setAttribute(propName, `${datum}`);
+            //
+            // TODO: Handle other cases where values need units
+            //
+            default: {
+                cssValue = `${datum}`;
             }
-            return;
         }
-        setContent$1(el, datum);
+        el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
+        return;
     }
+    if (el instanceof HTMLElement) {
+        // HTMLElement
+        set$2(el, attr, propName, datum, xssSanitize);
+        return;
+    }
+    // SVGElement or more
+    // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+    // Check attribute value if XSS protection is enabled
+    if (xssSanitize) {
+        const safeValue = sanitizeAttributeValue$1(propName, `${datum}`);
+        if (safeValue !== null) {
+            el.setAttribute(propName, safeValue);
+        }
+        return;
+    }
+    el.setAttribute(propName, `${datum}`);
 }
 /**
  *
@@ -6449,41 +6743,54 @@ function setValue$1(el, name, datum, attr = 'field', filter) {
  * @param prefix
  * @param name
  * @param datum
+ * @param xssSanitize
  */
-function set$4(el, prefix, name, datum) {
+function set$2(el, prefix, name, datum, xssSanitize = true) {
     if (datum == null) {
         el.removeAttribute(name);
         return;
     }
     switch (name) {
         case 'text': {
-            setContent$1(el, datum, false);
+            setContent$1(el, datum, false, xssSanitize);
             return;
         }
         case 'html': {
-            setContent$1(el, datum, true);
+            // Sanitize HTML if XSS protection is enabled
+            if (xssSanitize && typeof datum === 'string') {
+                setContent$1(el, sanitizeHtml$1(datum), true, xssSanitize);
+            }
+            else {
+                setContent$1(el, datum, true, xssSanitize);
+            }
             return;
         }
         case 'node': {
             if (typeof datum !== 'string') {
                 return;
             }
-            const nodeName = el.localName ?? el.nodeName.toLowerCase();
-            if (nodeName === datum.toLowerCase()) {
-                return;
-            }
-            const node = (el.ownerDocument ?? document).createElement(`${datum}`);
-            for (const child of el.childNodes) {
-                node.append(child.cloneNode(true));
-            }
-            for (const { name, value } of el.attributes) {
-                node.setAttribute(name, value);
-            }
-            el.replaceWith(node);
+            replaceNode$1(el, datum, prefix, xssSanitize);
+            return;
+        }
+    }
+    // If XSS protection is enabled
+    if (xssSanitize) {
+        // Don't set event handler attributes (starting with 'on')
+        if (name.toLowerCase().startsWith('on')) {
+            return;
+        }
+        const beforeSanitize = datum;
+        datum = sanitizeAttributeValue$1(name, datum);
+        // If sanitization results in null value (except when original value was null), don't change the value
+        if (datum === null && beforeSanitize !== null) {
             return;
         }
     }
-    if (!name.startsWith('data-') && !(name in el)) {
+    if (datum == null) {
+        el.removeAttribute(name);
+        return;
+    }
+    if (!name.startsWith('data-') && !propInElement$1(el, name)) {
         const dataAttr = `data-${prefix}-${kebabCase$1(name)}`;
         if (el.hasAttribute(dataAttr)) {
             el.setAttribute(dataAttr, `${datum}`);
@@ -7055,8 +7362,9 @@ function set$4(el, prefix, name, datum) {
  * @param el
  * @param datum
  * @param asHtml
+ * @param xssSanitize
  */
-function setContent$1(el, datum, asHtml = true) {
+function setContent$1(el, datum, asHtml = true, xssSanitize = true) {
     if (el instanceof HTMLInputElement ||
         el instanceof HTMLSelectElement ||
         el instanceof HTMLTextAreaElement ||
@@ -7074,9 +7382,18 @@ function setContent$1(el, datum, asHtml = true) {
         return;
     }
     if (asHtml) {
-        el.innerHTML = datum == null ? '' : `${datum}`;
+        // Sanitize HTML if XSS protection is enabled
+        const htmlStr = datum == null ? '' : `${datum}`;
+        if (xssSanitize && typeof htmlStr === 'string') {
+            // sanitizeHtml will now replace dangerous elements instead of removing them
+            el.innerHTML = sanitizeHtml$1(htmlStr);
+        }
+        else {
+            el.innerHTML = htmlStr;
+        }
         return;
     }
+    // No need to sanitize textContent (automatically escaped)
     el.textContent = datum == null ? '' : `${datum}`;
 }
 /**
@@ -7113,16 +7430,16 @@ function toInt$1(datum) {
  */
 function getValues$1(el, convertType = false, attr = 'field', filter) {
     const result = [];
-    const rawValue = el.getAttribute(`data-${attr}`);
-    const listRoot = el.closest(`[data-${attr}-list]`);
-    const forceArray = !!listRoot;
-    if (rawValue == null) {
+    const query = el.getAttribute(`data-${attr}`);
+    if (query == null) {
         throw new Error(`data-${attr} attriblute is empty.`);
     }
-    const fieldList = rawValue.split(/\s*,\s*/);
-    for (const field of fieldList) {
+    const listRoot = el.closest(`[data-${attr}-list]`);
+    const forceArray = !!listRoot;
+    const fields = parseFields$1(query);
+    for (const field of fields) {
         let value;
-        const { fieldName, propName } = fieldNameParser$1(field);
+        const { fieldName, propName } = field;
         if (propName) {
             switch (propName) {
                 case 'node': {
@@ -7137,6 +7454,12 @@ function getValues$1(el, convertType = false, attr = 'field', filter) {
                     value = el.innerHTML.trim();
                     break;
                 }
+                case 'style': {
+                    if (el instanceof HTMLElement) {
+                        value = el.style.cssText;
+                    }
+                    break;
+                }
                 default: {
                     if (/^style\([a-z-]+\)$/i.test(propName)) {
                         const css = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
@@ -7153,7 +7476,7 @@ function getValues$1(el, convertType = false, attr = 'field', filter) {
                         }
                         break;
                     }
-                    value = getAttribute$1(el, attr, propName, convertType);
+                    value = getAttribute$1(el, propName, attr, convertType);
                 }
             }
         }
@@ -7181,11 +7504,11 @@ function getValues$1(el, convertType = false, attr = 'field', filter) {
 /**
  *
  * @param el
- * @param attr
  * @param keyAttr
+ * @param attr
  * @param typeConvert
  */
-function getAttribute$1(el, attr, keyAttr, typeConvert) {
+function getAttribute$1(el, keyAttr, attr, typeConvert) {
     switch (keyAttr) {
         case 'contenteditable': {
             if (el instanceof HTMLElement) {
@@ -7207,24 +7530,35 @@ function getAttribute$1(el, attr, keyAttr, typeConvert) {
             return el.hasAttribute('download') ? el.getAttribute('download') : null;
         }
         case 'href': {
-            // return (el as HTMLAnchorElement).href;
-            return el.getAttribute(keyAttr) ?? ''; // return plain string
+            // Example: (el as HTMLAnchorElement).href;
+            // Expected: return defined value of plain string
+            return el.getAttribute(keyAttr) ?? '';
         }
-        default: {
-            let value;
-            const dataAttr = ['data', attr, kebabCase$1(keyAttr)].join('-');
-            if (el.hasAttribute(dataAttr)) {
-                value = el.getAttribute(dataAttr) || '';
-            }
-            else {
-                value = el.getAttribute(keyAttr) || '';
-            }
-            if (typeConvert) {
-                value = convert$1(value);
-            }
-            return value;
+    }
+    let value = 
+    // @ts-ignore
+    el[keyAttr];
+    if (value !== undefined) {
+        if (typeConvert) {
+            value = convert$1(value);
         }
+        return value;
     }
+    // For shorthand notation, get value from data-field-* attribute
+    const dataAttr = ['data', attr, kebabCase$1(keyAttr)].join('-');
+    if (el.hasAttribute(dataAttr)) {
+        return el.getAttribute(dataAttr) ?? '';
+    }
+    value = el.getAttribute(keyAttr) ?? null;
+    if ((value === '' || value == null) &&
+        typeof keyAttr === 'string' &&
+        keyAttr.startsWith('data-')) {
+        return '';
+    }
+    if (typeConvert) {
+        value = convert$1(value);
+    }
+    return value;
 }
 /**
  *
@@ -7232,8 +7566,9 @@ function getAttribute$1(el, attr, keyAttr, typeConvert) {
  */
 function convert$1(value) {
     value = parse$1(value);
-    if (URL.canParse(value)) {
-        const url = new URL(value, location.href);
+    const str = `${value}`;
+    if (URL.canParse(str)) {
+        const url = new URL(str, location.href);
         if (url.origin === location.origin) {
             return url.pathname;
         }
@@ -7246,7 +7581,7 @@ function convert$1(value) {
  */
 function parse$1(value) {
     try {
-        return JSON.parse(value);
+        return JSON.parse(`${value}`);
     }
     catch {
         return value;
@@ -7261,6 +7596,7 @@ function getBackgroundImagePath$1(value) {
     return decodeURI(value.replace(/^url\(["']?([^"']+)["']?\)$/i, '$1').replace(origin, ''));
 }
 
+const reverseListElementSelectors$1 = ['picture'];
 /**
  *
  * @param el
@@ -7268,9 +7604,18 @@ function getBackgroundImagePath$1(value) {
  * @param typeConvert
  * @param filter
  */
-function get$2 (el, attr, typeConvert, filter) {
-    // eslint-disable-next-line unicorn/prefer-spread
-    const filedElements = Array.from(el.querySelectorAll(`[data-${attr}]`));
+function getComponent$1(el, attr, typeConvert, filter) {
+    el = el.cloneNode(true);
+    const reverseListElements = el.querySelectorAll(`:is(${reverseListElementSelectors$1.join(',')})[data-${attr}-list]`);
+    for (const reverseListElement of reverseListElements) {
+        const children = [];
+        while (reverseListElement.lastElementChild) {
+            children.push(reverseListElement.lastElementChild);
+            reverseListElement.lastElementChild.remove();
+        }
+        reverseListElement.append(...children);
+    }
+    const filedElements = el.querySelectorAll(`[data-${attr}]`);
     let values = [];
     for (const _el of filedElements) {
         values = [...values, ...getValues$1(_el, typeConvert, attr, filter)];
@@ -7279,59 +7624,105 @@ function get$2 (el, attr, typeConvert, filter) {
     return result;
 }
 
+/**
+ * Combines multiple field definitions with comma separation
+ * @param fields Array of field definitions
+ * @returns Comma-separated field definition string
+ */
+function stringifyFields$1(fields) {
+    return fields
+        .map((field) => stringifyField$1(field.fieldName, field.propName))
+        .join(', ');
+}
+/**
+ * Generates a field definition string from field name and attribute name
+ * @param fieldName Field name
+ * @param propName Attribute name (optional)
+ * @returns Field definition string
+ */
+function stringifyField$1(fieldName, propName) {
+    if (!propName) {
+        return fieldName;
+    }
+    // Use shorthand notation when fieldName and propName are the same
+    if (fieldName === propName) {
+        return `:${propName}`;
+    }
+    return `${fieldName}:${propName}`;
+}
+
 /**
  *
  * @param el
  * @param data
  * @param attr
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-function set$3 (el, data, attr, filter) {
+function setComponent$1(el, data, attr, filter, xssSanitize = true) {
     el = el.cloneNode(true);
     for (const dataKeyName in data) {
-        if (dataKeyName in data) {
-            const datum = data[dataKeyName];
-            const selector = `[data-${attr}*="${kebabCase$1(dataKeyName)}"]`;
-            // eslint-disable-next-line unicorn/prefer-spread
-            const targetList = Array.from(el.querySelectorAll(selector));
-            if (Array.isArray(datum)) {
-                const targetEl = targetList[0];
-                if (!targetEl) {
-                    continue;
-                }
-                const listRoot = targetEl.closest(`[data-${attr}-list]`);
-                if (!listRoot || (listRoot && listRoot.children.length === 0)) {
-                    continue;
-                }
-                const listItem = listRoot.children[0]?.cloneNode(true);
-                while (listItem && datum.length > listRoot.children.length) {
-                    listRoot.append(listItem.cloneNode(true));
-                }
-                // eslint-disable-next-line unicorn/prefer-spread
-                const newChildren = Array.from(listRoot.querySelectorAll(selector));
-                // eslint-disable-next-line unicorn/prefer-spread
-                const oldChildList = Array.from(listRoot.children);
-                let deleteNodeList = [];
-                for (const [i, child] of [...newChildren].entries()) {
-                    if (datum[i] == null) {
-                        setValue$1(child, dataKeyName, '', attr, filter);
-                        const oldChild = oldChildList[i];
-                        if (oldChild) {
-                            deleteNodeList.push(oldChild);
-                        }
+        const datum = data[dataKeyName];
+        if (Array.isArray(datum)) {
+            continue;
+        }
+        const targetList = [
+            // Include self
+            el,
+            // Perform rough filtering for performance
+            ...el.querySelectorAll(`[data-${attr}*="${kebabCase$1(dataKeyName)}"]`),
+        ]
+            // Perform more accurate filtering
+            .filter((el) => hasField$1(el, attr, dataKeyName));
+        for (const targetEl of targetList) {
+            setValue$1(targetEl, dataKeyName, datum, attr, filter, xssSanitize);
+        }
+    }
+    for (const listRoot of el.querySelectorAll(`[data-${attr}-list]`)) {
+        const decendants = listRoot.querySelectorAll('*');
+        const definedFieldsOfDecendants = new Set([...decendants].flatMap((el) => definedFields$1(el, attr)));
+        const maxLength = maxLengthOf$1(data, [...definedFieldsOfDecendants]);
+        const listItem = listRoot.children[0]?.cloneNode(true);
+        if (!listItem) {
+            continue;
+        }
+        while (listRoot.firstChild) {
+            listRoot.firstChild.remove();
+        }
+        for (let i = 0; i < maxLength; i++) {
+            let item = listItem.cloneNode(true);
+            const itemData = flattenData$1(data, i);
+            let reverse = false;
+            switch (listRoot.localName) {
+                case 'picture': {
+                    reverse = true;
+                    let fields = getFields$1(item, attr);
+                    if (i === 0) {
+                        // Convert first item to img element
+                        item = replaceNode$1(item, 'img', attr, xssSanitize);
+                        fields = replaceProp$1(fields, 'srcset', 'src');
+                        fields = removeProp$1(fields, 'sizes');
+                        const fieldQuery = stringifyFields$1(fields);
+                        item.setAttribute(`data-${attr}`, fieldQuery);
                     }
                     else {
-                        setValue$1(child, dataKeyName, datum[i], attr, filter);
-                        deleteNodeList = [];
+                        // Convert subsequent items to source elements
+                        item = replaceNode$1(item, 'source', attr, xssSanitize);
+                        fields = replaceProp$1(fields, 'src', 'srcset');
+                        fields = removeProp$1(fields, 'alt');
+                        fields = removeProp$1(fields, 'loading');
+                        const fieldQuery = stringifyFields$1(fields);
+                        item.setAttribute(`data-${attr}`, fieldQuery);
                     }
+                    break;
                 }
-                for (const node of deleteNodeList)
-                    node.remove();
+            }
+            const newEl = setComponent$1(item, itemData, attr, filter, xssSanitize);
+            if (reverse) {
+                listRoot.prepend(newEl);
             }
             else {
-                for (const [, targetEl] of [...targetList].entries()) {
-                    setValue$1(targetEl, dataKeyName, datum, attr, filter);
-                }
+                listRoot.append(newEl);
             }
         }
     }
@@ -7346,6 +7737,10 @@ let FrozenPatty$1 = class FrozenPatty {
      */
     #filter;
     #typeConvert = false;
+    /**
+     * Enable XSS protection
+     */
+    #xssSanitize = true;
     /**
      *
      * @param html Original HTML
@@ -7353,7 +7748,14 @@ let FrozenPatty$1 = class FrozenPatty {
      */
     constructor(html, options) {
         this.#dom = document.createElement('fp-placeholer');
-        this.#dom.innerHTML = html;
+        // Sanitize initial HTML if XSS protection is enabled
+        if (options?.xssSanitize === false) {
+            this.#dom.innerHTML = html;
+            this.#xssSanitize = false;
+        }
+        else {
+            this.#dom.innerHTML = sanitizeHtml$1(html);
+        }
         if (options) {
             if (options.attr) {
                 this.#attr = options.attr;
@@ -7365,7 +7767,8 @@ let FrozenPatty$1 = class FrozenPatty {
     merge(data) {
         const currentData = this.toJSON(false);
         const newData = Object.assign(currentData, data);
-        this.#dom = set$3(this.#dom, newData, this.#attr, this.#filter);
+        // Pass XSS protection flag to set (default is true if not set)
+        this.#dom = setComponent$1(this.#dom, newData, this.#attr, this.#filter, this.#xssSanitize);
         return this;
     }
     toDOM() {
@@ -7376,7 +7779,7 @@ let FrozenPatty$1 = class FrozenPatty {
     }
     toJSON(filtering = true) {
         const filter = filtering ? this.#filter : undefined;
-        return get$2(this.#dom, this.#attr, this.#typeConvert, filter);
+        return getComponent$1(this.#dom, this.#attr, this.#typeConvert, filter);
     }
 };
 
@@ -7595,7 +7998,7 @@ var style$9 = ".bgi-btn-container {\n\ttext-align: center;\n}\n\n.bgi-btn {\n\ta
 var template$A = "<div class=\"bgi-btn-container\" data-bgi-button-kind=\"link\" data-bge=\"kind:data-bgi-button-kind\">\n\t<a class=\"bgi-btn\" href=\"\" data-bge=\"link:href, target:target\">\n\t\t<span class=\"bgi-btn__text\" data-bge=\"text\">ボタン</span>\n\t</a>\n</div>\n";
 
 var button = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "button",
   template: template$A,
   style: style$9,
@@ -7609,7 +8012,7 @@ var style$8 = ".bgi-link__size {\n\t&::before {\n\t\tcontent: '(';\n\t}\n\n\t&::
 var template$z = "<div class=\"bgi-download-file\">\n\t<a class=\"bgi-download-file__link\" href=\"./files/bgeditor/bg-sample.pdf\" target=\"_blank\" data-bge=\"path:href, download:download\">\n\t\t<span class=\"bgi-link__icon bgi-link__icon--before\" role=\"none\"></span>\n\t\t<span class=\"bgi-link__name\" data-bge=\"name\">サンプルダウンロードファイル</span>\n\t\t<span class=\"bgi-link__size\" data-bge=\"formated-size, size:data-size\" data-size=\"138158\">134.92kB</span>\n\t\t<span class=\"bgi-link__icon bgi-link__icon--after\" role=\"none\"></span>\n\t</a>\n</div>\n";
 
 var downloadFile = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "download-file",
   template: template$z,
   style: style$8,
@@ -7648,7 +8051,7 @@ var style$7 = "[data-bgi='google-maps'] {\n\tdiv {\n\t\tinline-size: 100%;\n\t\t
 var template$y = "<div data-lat=\"35.681382\" data-lng=\"139.766084\" data-zoom=\"16\" data-bge=\"lat:data-lat, lng:data-lng, zoom:data-zoom\">\n\t<img data-bge=\"img:src\" src=\"https://maps.google.com/maps/api/staticmap?center=35.681382,139.766084&amp;zoom=16&amp;size=640x400&amp;markers=color:red|color:red|35.681382,139.766084&amp;scale=2&amp;key=%googleMapsApiKey%\" width=\"8\" height=\"5\" alt=\"Google Maps\" />\n</div>\n<a href=\"https://maps.apple.com/?q=35.681382,139.766084\" data-bge=\"url:href\" target=\"_blank\"><span>アプリで開く</span></a>\n";
 
 var googleMaps = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "google-maps",
   template: template$y,
   style: style$7,
@@ -7783,7 +8186,7 @@ var style$6 = "[data-bgi='hr'] {\n\t--border-color: #000;\n\t--border-width: 1px
 var template$x = "<div class=\"bgi-hr-container\" data-bgi-hr-kind=\"primary\" data-bge=\"kind:data-bgi-hr-kind\">\n\t<hr class=\"bgi-hr\" />\n</div>\n";
 
 var hr$1 = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "hr",
   template: template$x,
   style: style$6,
@@ -7803,22 +8206,22 @@ var hr$1 = createItem({
   }
 });
 
-var editor$5 = "<div data-bge-dialog=\"2col\">\n\t<div data-bge-dialog-ui=\"sticky\">\n\t\t<input type=\"hidden\" name=\"bge-width\" />\n\t\t<input type=\"hidden\" name=\"bge-height\" />\n\t\t<input type=\"hidden\" name=\"bge-srcset\" />\n\t\t<input type=\"hidden\" name=\"bge-style\" />\n\n\t\t<div data-bge-editor-ui=\"preview\"></div>\n\t\t<input type=\"hidden\" name=\"bge-path\" />\n\t\t<input type=\"hidden\" name=\"bge-empty\" />\n\t\t<input type=\"hidden\" name=\"bge-file-size\" />\n\n\t\t<div>\n\t\t\t<label>\n\t\t\t\t<span>画像の代替テキスト(alt)</span>\n\t\t\t\t<input type=\"text\" name=\"bge-alt\" />\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>キャプション</span>\n\t\t\t\t<input type=\"text\" name=\"bge-caption\" />\n\t\t\t</label>\n\t\t\t<fieldset>\n\t\t\t\t<legend>画像のサイズ</legend>\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group1\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group1\">基準</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"container\" /><span>基準</span></label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"original\" checked />画像基準</label>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<label for=\"bgi-image__range\">幅</label>\n\t\t\t\t\t\t<output name=\"bge-css-width\"></output>\n\t\t\t\t\t</span>\n\t\t\t\t\t<input id=\"bgi-image__range\" type=\"range\" name=\"bge-scale\" min=\"1\" max=\"100\" step=\"1\" value=\"100\" />\n\t\t\t\t</div>\n\t\t\t\t<hr />\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group2\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group2\">縦横比</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"unset\" checked />オリジナル</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"1/1\" />1 : 1</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"4/3\" />4 : 3</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"16/9\" />16 : 9</label>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>リンク</legend>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-popup\" />ポップアップで画像を開く</label>\n\t\t\t\t<label>\n\t\t\t\t\t<span>リンク先URL</span>\n\t\t\t\t\t<input type=\"url\" name=\"bge-href\" />\n\t\t\t\t</label>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-target-blank\" />別タブで開く</label>\n\t\t\t</fieldset>\n\t\t\t<label><input type=\"checkbox\" name=\"bge-lazy\" checked aria-describedby=\"bge-lazy-desc\" />遅延読み込み</label>\n\t\t\t<small id=\"bge-lazy-desc\">画像がブラウザの表示エリアに現れるまでファイルを読み込みません。</small>\n\t\t</div>\n\t</div>\n\t<div>\n\t\t<div data-bge-editor-ui=\"imageUploader\"></div>\n\t\t<div data-bge-editor-ui=\"imageList\"></div>\n\t</div>\n</div>\n";
+var editor$5 = "<div data-bge-dialog=\"2col\">\n\t<div data-bge-dialog-ui=\"sticky\">\n\t\t<div>\n\t\t\t<div data-bge-editor-ui=\"tabs\" data-bge-editor-ui-for=\"bgi-image__tabs-content\"></div>\n\n\t\t\t<div id=\"bgi-image__tabs-content\" role=\"tabpanel\" aria-label=\"画像\">\n\t\t\t\t<div data-bge-editor-ui=\"preview\"></div>\n\t\t\t\t<input type=\"hidden\" name=\"bge-path[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-alt[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-width[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-height[]\" />\n\t\t\t\t<input type=\"hidden\" name=\"bge-media[]\" />\n\n\t\t\t\t<input type=\"hidden\" name=\"bge-file-size\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label>\n\t\t\t\t\t\t<span>メディアクエリー</span>\n\t\t\t\t\t\t<input type=\"text\" name=\"bge-media-input\" />\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div>\n\t\t\t<fieldset>\n\t\t\t\t<legend>画像のサイズ</legend>\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group1\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group1\">基準</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"container\" /><span>基準</span></label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-scale-type\" value=\"original\" checked />画像基準</label>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<label for=\"bgi-image__range\">幅</label>\n\t\t\t\t\t\t<output name=\"bge-css-width\"></output>\n\t\t\t\t\t</span>\n\t\t\t\t\t<input id=\"bgi-image__range\" type=\"range\" name=\"bge-scale\" min=\"1\" max=\"100\" step=\"1\" value=\"100\" />\n\t\t\t\t</div>\n\t\t\t\t<hr />\n\t\t\t\t<div role=\"radiogroup\" aria-labelledby=\"bgi-image__radio-group2\">\n\t\t\t\t\t<div id=\"bgi-image__radio-group2\">縦横比</div>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"unset\" checked />オリジナル</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"1/1\" />1 : 1</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"4/3\" />4 : 3</label>\n\t\t\t\t\t<label><input type=\"radio\" name=\"bge-aspect-ratio\" value=\"16/9\" />16 : 9</label>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<label>\n\t\t\t\t<span>画像の代替テキスト(alt)</span>\n\t\t\t\t<input type=\"text\" name=\"bge-alt\" />\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>キャプション</span>\n\t\t\t\t<input type=\"text\" name=\"bge-caption\" />\n\t\t\t</label>\n\t\t\t<fieldset>\n\t\t\t\t<legend>リンク</legend>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-popup\" />ポップアップで画像を開く</label>\n\t\t\t\t<label>\n\t\t\t\t\t<span>リンク先URL</span>\n\t\t\t\t\t<input type=\"url\" name=\"bge-href\" />\n\t\t\t\t</label>\n\t\t\t\t<label><input type=\"checkbox\" name=\"bge-target-blank\" />別タブで開く</label>\n\t\t\t</fieldset>\n\t\t\t<label><input type=\"checkbox\" name=\"bge-lazy\" checked aria-describedby=\"bge-lazy-desc\" />遅延読み込み</label>\n\t\t\t<small id=\"bge-lazy-desc\">画像がブラウザの表示エリアに現れるまでファイルを読み込みません。</small>\n\t\t</div>\n\t</div>\n\t<div>\n\t\t<div data-bge-editor-ui=\"imageUploader\"></div>\n\t\t<div data-bge-editor-ui=\"imageList\"></div>\n\t</div>\n</div>\n";
 
 var style$5 = "[data-bgi='image'] {\n\tinline-size: 100%;\n\n\tfigure {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tinline-size: 100%;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\n\t\t> :is(div, a, button) {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0;\n\t\t\tbackground: transparent;\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\timg {\n\t\tdisplay: block;\n\t\tinline-size: var(--css-width, auto);\n\t\tmax-inline-size: 100%;\n\t\tblock-size: auto;\n\t\taspect-ratio: var(--aspect-ratio, unset);\n\t\tobject-fit: var(--object-fit, unset);\n\t}\n\n\tfigcaption {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tinline-size: 100%;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n";
 
-var template$w = "<div data-bge=\":style, :scale, :scale-type, :aspect-ratio\" data-bge-scale=\"100\" data-bge-scale-type=\"container\" data-bge-aspect-ratio=\"unset\" style=\"--css-width: 100cqi; --object-fit: cover; --aspect-ratio: unset\">\n\t<figure>\n\t\t<div data-bge=\":node, :href, :target, :command\">\n\t\t\t<img src=\"%sampleImagePath%\" alt=\"サンプル画像\" data-bge=\"path:src, :srcset, :alt, :width, :height, :loading\" width=\"400\" height=\"300\" loading=\"lazy\" />\n\t\t</div>\n\t\t<figcaption data-bge=\"caption\"></figcaption>\n\t</figure>\n</div>\n";
+var template$w = "<div data-bge=\":style, :scale, :scale-type, :aspect-ratio\" data-bge-scale=\"100\" data-bge-scale-type=\"container\" data-bge-aspect-ratio=\"unset\" style=\"--css-width: 100cqi; --object-fit: cover; --aspect-ratio: unset\">\n\t<figure>\n\t\t<div data-bge=\":node, :href, :target, :command\">\n\t\t\t<picture data-bge-list>\n\t\t\t\t<img src=\"%sampleImagePath%\" alt=\"サンプル画像\" data-bge=\"path:src, :alt, :width, :height, :loading, :media\" width=\"400\" height=\"300\" loading=\"lazy\" />\n\t\t\t</picture>\n\t\t</div>\n\t\t<figcaption data-bge=\"caption\"></figcaption>\n\t</figure>\n</div>\n";
 
 const ORIGIN = "__org";
 var image = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "image",
   template: template$w,
   style: style$5,
   editor: editor$5,
   editorOptions: {
     beforeOpen(data) {
-      const path = data.path.replace(ORIGIN, "");
+      const path = data.path.map((p) => p.replace(ORIGIN, ""));
       const lazy = data.loading === "lazy";
       const popup = data.node === "button" && data.command === "show-modal";
       const targetBlank = data.node === "a" && data.target === "_blank";
@@ -7830,48 +8233,71 @@ var image = createItem({
         targetBlank
       };
     },
-    open(data, editor2) {
-      editor2.engine.componentObserver.notify("file-select", {
-        path: data.path,
-        fileSize: Number.parseFloat(data.fileSize ?? "0"),
-        isEmpty: data.path === "",
-        isMounted: false
-      });
+    open(_, editor2) {
+      let currentIndex = 0;
+      fileSelect();
+      function fileSelect() {
+        editor2.engine.componentObserver.notify("file-select", {
+          path: editor2.get("$path")[currentIndex],
+          fileSize: Number.parseFloat(editor2.get("$fileSize") ?? "0"),
+          isEmpty: editor2.get("$path")[currentIndex] === "",
+          isMounted: false
+        });
+      }
       editor2.engine.componentObserver.on("file-select", ({ path, isEmpty }) => {
         if (isEmpty) {
           return;
         }
-        const { src, origin } = originImage(path);
-        void Promise.all([loadImage(src), origin ? loadImage(origin) : null]).then(
-          ([$src, $origin]) => {
-            if (!$src) {
-              editor2.update("$path", src);
-              return;
-            }
-            if ($origin) {
-              editor2.update("$path", $origin.src);
-              editor2.update("$srcset", `${$src.src}, ${$origin.src} 2x`);
-              editor2.update("$width", $origin.width);
-              editor2.update("$height", $origin.height);
-              updateCSSWidth();
-              return;
-            }
-            editor2.update("$path", $src.src);
-            editor2.update("$width", $src.width);
-            editor2.update("$height", $src.height);
-            updateCSSWidth();
-          }
-        );
+        void _updateImage(path);
+      });
+      async function _updateImage(path) {
+        const $src = await loadImage(path);
+        updateImage($src);
+      }
+      function updateImage($src) {
+        if (!$src) {
+          console.error("\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F");
+          return;
+        }
+        const path = [...editor2.get("$path")];
+        path[currentIndex] = $src.src;
+        editor2.update("$path", path);
+        const width = [...editor2.get("$width")];
+        width[currentIndex] = $src.width;
+        editor2.update("$width", width);
+        const height = [...editor2.get("$height")];
+        height[currentIndex] = $src.height;
+        editor2.update("$height", height);
+        const media = [...editor2.get("$media")];
+        media[currentIndex] = editor2.get("$mediaInput");
+        editor2.update("$media", media);
+        updateCSSWidth();
+      }
+      editor2.engine.componentObserver.on("select-tab-in-item-editor", ({ index }) => {
+        currentIndex = index;
+        fileSelect();
+        void _updateImage(editor2.get("$path")[currentIndex]);
+        const media = editor2.get("$media")[currentIndex];
+        editor2.disable("$mediaInput", currentIndex === 0);
+        editor2.update("$mediaInput", media);
       });
       editor2.onChange("$scale", updateCSSWidth);
       editor2.onChange("$scaleType", updateCSSWidth);
+      editor2.onChange("$mediaInput", (value) => {
+        const media = [...editor2.get("$media")];
+        media[currentIndex] = value;
+        editor2.update("$media", media);
+      });
       function updateCSSWidth() {
         const scale = editor2.get("$scale");
         const width = editor2.get("$width");
         const scaleType = editor2.get("$scaleType");
         editor2.update(
           "$cssWidth",
-          scaleType === "container" ? `${scale}cqi` : `${Math.round(width * scale / 100)}px`
+          scaleType === "container" ? `${scale}cqi` : (
+            // TODO: 複数画像の場合は、最初の画像の幅を使用するか、それともすべての画像の幅を使用するか検討
+            `${Math.round(width[0] * scale / 100)}px`
+          )
         );
       }
       editor2.onChange("$popup", (disable) => {
@@ -7929,20 +8355,6 @@ async function loadImage(src) {
     }, 3e4);
   });
 }
-function originImage(src) {
-  const filePath = src.match(/^(.*)(\.(?:jpe?g|gif|png|webp))$/i);
-  if (filePath) {
-    const [, name, ext] = filePath;
-    return {
-      src,
-      origin: `${name}${ORIGIN}${ext}`
-    };
-  }
-  return {
-    src,
-    origin: null
-  };
-}
 
 var editor$4 = "<div data-bge-dialog=\"wide\">\n\t<div>\n\t\t<label>\n\t\t\t<span>表見出し</span>\n\t\t\t<input type=\"text\" name=\"bge-caption\" />\n\t\t</label>\n\t</div>\n\n\t<div data-bge-editor-ui=\"tableEditor\"></div>\n\t<input type=\"hidden\" name=\"bge\" />\n</div>\n";
 
@@ -7951,7 +8363,7 @@ var style$4 = ".bge-type-table {\n\tmargin: 0;\n\n\tth {\n\t\tinline-size: calc(
 var template$v = "<table>\n\t<caption data-bge=\"caption\">\n\t\tキャプションを入力してください\n\t</caption>\n\t<tbody data-bge-list>\n\t\t<tr>\n\t\t\t<th data-bge=\"th\">表組の見出し</th>\n\t\t\t<td data-bge=\"td\">表組の内容を入力してください</td>\n\t\t</tr>\n\t</tbody>\n</table>\n";
 
 var table = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "table",
   template: template$v,
   style: style$4,
@@ -7979,7 +8391,7 @@ var style$3 = ".bge-title-h2 {\n\tmargin-block-end: 0;\n}\n";
 var template$u = "<h2 class=\"bge-title-h2\" data-bge=\"title-h2\">見出しを入力してください</h2>\n";
 
 var titleH2 = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "title-h2",
   template: template$u,
   style: style$3,
@@ -7993,7 +8405,7 @@ var style$2 = ".bge-title-h3 {\n\tmargin-block-end: 0;\n}\n";
 var template$t = "<h2 class=\"bge-title-h3\" data-bge=\"title-h3\">見出しを入力してください</h2>\n";
 
 var titleH3 = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "title-h3",
   template: template$t,
   style: style$2,
@@ -8007,7 +8419,7 @@ var style$1 = "/* No Styling */\n";
 var template$s = "<div class=\"bge-wysiwyg\" data-bge=\"wysiwyg\"><p>本文を入力してください</p></div>\n";
 
 var wysiwyg = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "wysiwyg",
   template: template$s,
   style: style$1,
@@ -8058,7 +8470,7 @@ var template$r = "<div data-id=\"3KtWfp0UopM\" data-title=\"YouTube動画\" data
 
 const FALLBACK_TITLE = "YouTube\u52D5\u753B";
 var youtube = createItem({
-  version: "4.0.0-alpha.1",
+  version: "4.0.0-alpha.3",
   name: "youtube",
   template: template$r,
   style,
@@ -8120,7 +8532,8 @@ function importItems(template) {
       try {
         const data = attr ? JSON.parse(`${attr}`) : {};
         html = dataToHtml$1(typedItem.template, data);
-      } catch {
+      } catch (error) {
+        console.error(error);
         throw new Error(`${typedItem.name}\u306E\u30C6\u30F3\u30D7\u30EC\u30FC\u30C8\u3092\u30A4\u30F3\u30DD\u30FC\u30C8\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`);
       }
       return `<div data-bgi="${typedItem.name}" data-bgi-ver="${typedItem.version}">${html}</div>`;
@@ -8211,7 +8624,7 @@ const blockTemplate$j = {
 
 var icon$i = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"17.85mm\" height=\"13.87mm\" viewBox=\"0 0 50.59 39.31\"><defs><clipPath id=\"a14548ce-d842-4fd8-917c-74fc065283e0\"><rect width=\"50.59\" height=\"39.31\" fill=\"none\"/></clipPath><clipPath id=\"a760b4d9-d8b5-4ed5-a648-35d410384b4b\"><rect width=\"50.59\" height=\"37.5\" rx=\"5.06\" fill=\"none\"/></clipPath><linearGradient id=\"f1b0e6a1-76a5-46d8-9e26-0d5144fc95c2\" x1=\"187.4\" y1=\"214.88\" x2=\"188.39\" y2=\"214.88\" gradientTransform=\"matrix(0, -72.25, -72.25, 0, 15550.6, 13581.17)\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#d9e7a4\"/><stop offset=\"1\" stop-color=\"#b2d57b\"/></linearGradient></defs><title>image1</title><g id=\"f1bc02b5-2ece-4cc1-abc8-0695f8a7f32b\" data-name=\"レイヤー 2\"><g id=\"ee57bbe4-f1e8-4009-96f2-c3c0f25e8376\" data-name=\"レイヤー1\"><g clip-path=\"url(#a14548ce-d842-4fd8-917c-74fc065283e0)\"><rect y=\"1.81\" width=\"50.59\" height=\"37.5\" rx=\"5.06\" fill=\"#b7c678\"/></g><g clip-path=\"url(#a760b4d9-d8b5-4ed5-a648-35d410384b4b)\"><rect width=\"50.59\" height=\"37.5\" fill=\"url(#f1b0e6a1-76a5-46d8-9e26-0d5144fc95c2)\"/></g><g clip-path=\"url(#a14548ce-d842-4fd8-917c-74fc065283e0)\"><rect x=\"9.75\" y=\"12.22\" width=\"31.09\" height=\"14.41\" fill=\"#7aaf39\"/><polygon points=\"40.84 26.63 9.75 26.63 40.84 12.22 40.84 26.63\" fill=\"#649432\"/></g></g></g></svg>";
 
-var template$i = "<div data-bge-container=\"grid\">\n\t<div data-bge-group>\n\t\t<div data-bge-item><!-- image --></div>\n\t</div>\n\t<div data-bge-group>\n\t\t<div data-bge-item><!-- image --></div>\n\t</div>\n</div>\n";
+var template$i = "<div data-bge-container=\"grid:1\">\n\t<div data-bge-group>\n\t\t<div data-bge-item><!-- image --></div>\n\t</div>\n</div>\n";
 
 const blockTemplate$i = {
   name: "image",
@@ -11012,14 +11425,14 @@ _Lexer.lex;
  * Set up window for Node.js
  */
 
-var root$b = (typeof window !== 'undefined' ? window : {});
+var root$c = (typeof window !== 'undefined' ? window : {});
 
 /*
  * Parsing HTML strings
  */
 
 function canParseHTMLNatively () {
-  var Parser = root$b.DOMParser;
+  var Parser = root$c.DOMParser;
   var canParse = false;
 
   // Adapted from https://gist.github.com/1129031
@@ -11065,12 +11478,12 @@ function shouldUseActiveX () {
   try {
     document.implementation.createHTMLDocument('').open();
   } catch (e) {
-    if (root$b.ActiveXObject) useActiveX = true;
+    if (root$c.ActiveXObject) useActiveX = true;
   }
   return useActiveX
 }
 
-canParseHTMLNatively() ? root$b.DOMParser : createHTMLParser();
+canParseHTMLNatively() ? root$c.DOMParser : createHTMLParser();
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -14642,6 +15055,20 @@ function createBgeEvent(type, eventData) {
     return new CustomEvent(type, { detail: eventData });
 }
 
+/**
+ * List of dangerous HTML elements to block for XSS protection
+ */
+const DANGEROUS_ELEMENTS = [
+    'script',
+    'style',
+    'template',
+    'object',
+    'embed',
+    'iframe',
+    'frame',
+    'frameset',
+    'applet',
+];
 /**
  *
  * @param kvs
@@ -14665,31 +15092,302 @@ function arrayToHash(kvs) {
     }
     return result;
 }
+const kebabCaseCache = new Map();
 /**
  *
  * @param str
  */
-function kebabCase(str) {
-    return str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
+function kebabCase(str) {
+    if (kebabCaseCache.has(str)) {
+        return kebabCaseCache.get(str);
+    }
+    const result = str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
+    kebabCaseCache.set(str, result);
+    return result;
+}
+const camelCaseCache = new Map();
+/**
+ *
+ * @param str
+ */
+function camelCase(str) {
+    if (camelCaseCache.has(str)) {
+        return camelCaseCache.get(str);
+    }
+    const result = str.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+    camelCaseCache.set(str, result);
+    return result;
+}
+/**
+ *
+ * @param el
+ * @param nodeName
+ * @param attr
+ * @param xssSanitize
+ */
+function replaceNode(el, nodeName, attr, xssSanitize = true) {
+    nodeName = nodeName.toLowerCase();
+    const currentName = el.localName ?? el.nodeName.toLowerCase();
+    if (currentName === nodeName) {
+        return el;
+    }
+    // Check element name if XSS protection is enabled
+    if (xssSanitize && // Disallow dangerous elements
+        DANGEROUS_ELEMENTS.includes(nodeName)) {
+        return el;
+    }
+    const node = (el.ownerDocument ?? document).createElement(nodeName);
+    for (const child of el.childNodes) {
+        node.append(child.cloneNode(true));
+    }
+    const fields = getFields(el, attr);
+    const attrs = new Set(fields.map((field) => field.propName));
+    for (const { name, value } of el.attributes) {
+        if (attrs.has(name)) {
+            continue;
+        }
+        // Check attribute value if XSS protection is enabled
+        if (xssSanitize) {
+            const sanitizedValue = sanitizeAttributeValue(name, value);
+            if (sanitizedValue !== null) {
+                node.setAttribute(name, sanitizedValue);
+            }
+            continue;
+        }
+        node.setAttribute(name, value);
+    }
+    el.replaceWith(node);
+    return node;
+}
+/**
+ * Removes dangerous script elements from HTML string
+ * @param html HTML string
+ * @returns Sanitized HTML
+ */
+function sanitizeHtml(html) {
+    if (typeof html !== 'string') {
+        return '';
+    }
+    // Simple approach to handle script tags content
+    // First remove script tags but keep their content
+    let sanitized = html;
+    // For each dangerous element, replace tag but keep content using regex
+    // Example: <script>alert("XSS")</script> -> alert("XSS")
+    for (const tagName of DANGEROUS_ELEMENTS) {
+        const regex = new RegExp(`<${tagName}[^>]*>(.*?)<\\/${tagName}>`, 'gis');
+        sanitized = sanitized.replace(regex, '$1');
+    }
+    // Parse HTML safely using DOM parser for remaining sanitization
+    const doc = new DOMParser().parseFromString(sanitized, 'text/html');
+    const body = doc.body;
+    // Remove event handler attributes from all elements
+    sanitizeElementAndChildren(body);
+    return body.innerHTML;
+}
+/**
+ * Sanitizes an element and all its child elements
+ * @param element Target element
+ */
+function sanitizeElementAndChildren(element) {
+    // Remove dangerous attributes from current element
+    sanitizeAttributes(element);
+    // Process child elements recursively
+    const children = element.children;
+    for (const child of children) {
+        sanitizeElementAndChildren(child);
+    }
+}
+/**
+ * Sanitizes attribute value
+ * @param name Attribute name
+ * @param value Attribute value
+ * @returns Safe attribute value, or null if dangerous
+ */
+function sanitizeAttributeValue(name, value) {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    name = name.toLowerCase();
+    // Disallow event handler attributes
+    if (name.startsWith('on')) {
+        return null;
+    }
+    // Check for dangerous protocol in link attributes
+    if (name === 'href' ||
+        name === 'src' ||
+        name === 'action' ||
+        name === 'formaction' ||
+        name === 'xlink:href') {
+        const trimmedValue = value.trim().toLowerCase();
+        if (trimmedValue.startsWith('javascript:') ||
+            trimmedValue.startsWith('data:') ||
+            trimmedValue.startsWith('vbscript:')) {
+            return null;
+        }
+    }
+    // Other dangerous attributes
+    if (['manifest'].includes(name)) {
+        return null;
+    }
+    return value;
+}
+/**
+ * Removes dangerous attributes from an element
+ * @param element Target element
+ */
+function sanitizeAttributes(element) {
+    // Collect list of dangerous attributes
+    const dangerousAttrs = [...element.attributes]
+        .filter((attr) => sanitizeAttributeValue(attr.name, attr.value) === null)
+        .map((attr) => attr.name);
+    // Remove dangerous attributes
+    for (const attrName of dangerousAttrs) {
+        element.removeAttribute(attrName);
+    }
+}
+/**
+ *
+ * @param data
+ * @param definedFields
+ */
+function maxLengthOf(data, definedFields) {
+    let maxLength = 0;
+    for (const key in data) {
+        if (definedFields.includes(key) && Array.isArray(data[key])) {
+            maxLength = Math.max(maxLength, data[key].length);
+        }
+    }
+    return maxLength;
+}
+/**
+ *
+ * @param el
+ * @param attr
+ */
+function definedFields(el, attr) {
+    const fieldDefinitions = getFields(el, attr);
+    return fieldDefinitions.map((field) => field.fieldName);
+}
+/**
+ *
+ * @param el
+ * @param attr
+ */
+function getFields(el, attr) {
+    const fields = el.getAttribute(`data-${attr}`);
+    if (!fields) {
+        return [];
+    }
+    return parseFields(fields);
+}
+/**
+ *
+ * @param el
+ * @param attr
+ * @param dataKeyName
+ */
+function hasField(el, attr, dataKeyName) {
+    const fieldDefinitions = getFields(el, attr);
+    return fieldDefinitions.some((field) => field.fieldName === dataKeyName);
+}
+/**
+ *
+ * @param fields
+ * @param oldPropName
+ * @param newPropName
+ */
+function replaceProp(fields, oldPropName, newPropName) {
+    return fields.map((field) => {
+        if (field.propName === oldPropName) {
+            return {
+                ...field,
+                propName: newPropName,
+            };
+        }
+        return field;
+    });
+}
+/**
+ *
+ * @param fields
+ * @param propName
+ */
+function removeProp(fields, propName) {
+    return fields.filter((field) => field.propName !== propName);
+}
+/**
+ * - 値が配列の場合は、index に対応する値を返す。
+ * - 値が配列でない場合は、そのまま返す。
+ * - ⚠️ 値が配列で、index に対応する値が undefined の場合は、配列の最初の値を返す。
+ * @param data
+ * @param index
+ */
+function flattenData(data, index) {
+    const result = {};
+    for (const key in data) {
+        result[key] = Array.isArray(data[key])
+            ? data[key][index] === undefined
+                ? data[key][0]
+                : data[key][index]
+            : data[key];
+    }
+    return result;
+}
+/**
+ * 特定の要素で、`propName in element`で判定できない属性名
+ */
+const specificProp = {
+    /*
+     * JSDOMの未実装対策
+     * @see https://github.com/jsdom/jsdom/blob/main/lib/jsdom/living/nodes/HTMLSourceElement.webidl
+     * Living Standardでは実装済み
+     * @see https://html.spec.whatwg.org/multipage/embedded-content.html#htmlsourceelement
+     */
+    source: ['width', 'height'],
+};
+/**
+ *
+ * @param el
+ * @param name
+ */
+function propInElement(el, name) {
+    const has = name in el;
+    if (has) {
+        return true;
+    }
+    return specificProp[el.localName]?.includes(name) ?? false;
 }
+
+const cache = new Map();
 /**
  *
- * @param str
+ * @param query
  */
-function camelCase(str) {
-    return str.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
+function parseFields(query) {
+    const cached = cache.get(query);
+    if (cached) {
+        return cached;
+    }
+    const fields = query.split(',');
+    const result = fields.map(parseField);
+    cache.set(query, result);
+    return result;
 }
-
 /**
  *
  * @param field
  */
-function fieldNameParser(field) {
+function parseField(field) {
     field = field.trim().toLowerCase();
     if (!field) {
         throw new Error('Field name is empty.');
     }
-    let [fieldName, propName] = field.split(':');
+    let [fieldName, propName, 
+    // eslint-disable-next-line prefer-const
+    ...rest] = field.split(':');
+    if (rest.length > 0) {
+        throw new Error('Invalid field format.');
+    }
     propName = propName?.trim() || '';
     fieldName = fieldName?.trim() || propName || field;
     return {
@@ -14709,58 +15407,67 @@ function fieldNameParser(field) {
  * @param datum A datum of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-function setValue(el, name, datum, attr = 'field', filter) {
+function setValue(el, name, datum, attr = 'field', filter, xssSanitize = true) {
     const rawValue = el.getAttribute(`data-${attr}`);
-    const fieldList = rawValue?.split(/\s*,\s*/) ?? [];
-    for (const field of fieldList) {
-        const { fieldName, propName } = fieldNameParser(field);
-        if (name !== fieldName) {
-            continue;
-        }
-        if (filter) {
-            datum = filter(datum);
-        }
-        // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
-        if (propName) {
-            if (/^style\([a-z-]+\)$/i.test(propName)) {
-                const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
-                let cssValue;
-                switch (cssPropertyName) {
-                    case 'background-image': {
-                        //
-                        // NGパターン
-                        // $changeDom.css(cssPropertyName, 'url("' + value + '")');
-                        //
-                        // cssメソッドを経由すると styleAPIを使用するので URLがホストを含めた絶対パスになる
-                        // デモサーバーから本番サーバーへの移行ができなくなってしまうので避ける
-                        // 単純な文字列を流し込む（setAttributeを利用）
-                        // urlはマルチバイト文字や空白記号を含まないはずであるがエスケープする
-                        const url = encodeURI(`${datum}`);
-                        cssValue = `url(${url})`;
-                        break;
-                    }
-                    //
-                    // TODO: 他にもvalueに単位が必要なケースなどに対応したい
-                    //
-                    default: {
-                        cssValue = `${datum}`;
-                    }
-                }
-                el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
-            }
-            else if (el instanceof HTMLElement) {
-                // HTMLElement
-                set$2(el, attr, propName, datum);
+    const fields = parseFields(rawValue ?? '');
+    const field = fields.find((field) => field.fieldName === name);
+    if (!field) {
+        return;
+    }
+    const { propName } = field;
+    if (filter) {
+        datum = filter(datum);
+    }
+    // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
+    if (!propName) {
+        setContent(el, datum, undefined, xssSanitize);
+        return;
+    }
+    if (propName === 'style' && el instanceof HTMLElement) {
+        el.style.cssText = `${datum}`;
+        return;
+    }
+    if (/^style\([a-z-]+\)$/i.test(propName)) {
+        const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
+        let cssValue;
+        switch (cssPropertyName) {
+            case 'background-image': {
+                // Using CSS method would create absolute URLs with host
+                // This would prevent migration from demo to production server
+                // Using simple string insertion (setAttribute) instead
+                // URL may not contain multibyte or whitespace characters, but escape anyway
+                const url = encodeURI(`${datum}`);
+                cssValue = `url(${url})`;
+                break;
             }
-            else {
-                // SVGElement or more
-                el.setAttribute(propName, `${datum}`);
+            //
+            // TODO: Handle other cases where values need units
+            //
+            default: {
+                cssValue = `${datum}`;
             }
-            return;
         }
-        setContent(el, datum);
+        el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
+        return;
+    }
+    if (el instanceof HTMLElement) {
+        // HTMLElement
+        set$1(el, attr, propName, datum, xssSanitize);
+        return;
+    }
+    // SVGElement or more
+    // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+    // Check attribute value if XSS protection is enabled
+    if (xssSanitize) {
+        const safeValue = sanitizeAttributeValue(propName, `${datum}`);
+        if (safeValue !== null) {
+            el.setAttribute(propName, safeValue);
+        }
+        return;
     }
+    el.setAttribute(propName, `${datum}`);
 }
 /**
  *
@@ -14768,41 +15475,54 @@ function setValue(el, name, datum, attr = 'field', filter) {
  * @param prefix
  * @param name
  * @param datum
+ * @param xssSanitize
  */
-function set$2(el, prefix, name, datum) {
+function set$1(el, prefix, name, datum, xssSanitize = true) {
     if (datum == null) {
         el.removeAttribute(name);
         return;
     }
     switch (name) {
         case 'text': {
-            setContent(el, datum, false);
+            setContent(el, datum, false, xssSanitize);
             return;
         }
         case 'html': {
-            setContent(el, datum, true);
+            // Sanitize HTML if XSS protection is enabled
+            if (xssSanitize && typeof datum === 'string') {
+                setContent(el, sanitizeHtml(datum), true, xssSanitize);
+            }
+            else {
+                setContent(el, datum, true, xssSanitize);
+            }
             return;
         }
         case 'node': {
             if (typeof datum !== 'string') {
                 return;
             }
-            const nodeName = el.localName ?? el.nodeName.toLowerCase();
-            if (nodeName === datum.toLowerCase()) {
-                return;
-            }
-            const node = (el.ownerDocument ?? document).createElement(`${datum}`);
-            for (const child of el.childNodes) {
-                node.append(child.cloneNode(true));
-            }
-            for (const { name, value } of el.attributes) {
-                node.setAttribute(name, value);
-            }
-            el.replaceWith(node);
+            replaceNode(el, datum, prefix, xssSanitize);
+            return;
+        }
+    }
+    // If XSS protection is enabled
+    if (xssSanitize) {
+        // Don't set event handler attributes (starting with 'on')
+        if (name.toLowerCase().startsWith('on')) {
+            return;
+        }
+        const beforeSanitize = datum;
+        datum = sanitizeAttributeValue(name, datum);
+        // If sanitization results in null value (except when original value was null), don't change the value
+        if (datum === null && beforeSanitize !== null) {
             return;
         }
     }
-    if (!name.startsWith('data-') && !(name in el)) {
+    if (datum == null) {
+        el.removeAttribute(name);
+        return;
+    }
+    if (!name.startsWith('data-') && !propInElement(el, name)) {
         const dataAttr = `data-${prefix}-${kebabCase(name)}`;
         if (el.hasAttribute(dataAttr)) {
             el.setAttribute(dataAttr, `${datum}`);
@@ -15374,8 +16094,9 @@ function set$2(el, prefix, name, datum) {
  * @param el
  * @param datum
  * @param asHtml
+ * @param xssSanitize
  */
-function setContent(el, datum, asHtml = true) {
+function setContent(el, datum, asHtml = true, xssSanitize = true) {
     if (el instanceof HTMLInputElement ||
         el instanceof HTMLSelectElement ||
         el instanceof HTMLTextAreaElement ||
@@ -15393,9 +16114,18 @@ function setContent(el, datum, asHtml = true) {
         return;
     }
     if (asHtml) {
-        el.innerHTML = datum == null ? '' : `${datum}`;
+        // Sanitize HTML if XSS protection is enabled
+        const htmlStr = datum == null ? '' : `${datum}`;
+        if (xssSanitize && typeof htmlStr === 'string') {
+            // sanitizeHtml will now replace dangerous elements instead of removing them
+            el.innerHTML = sanitizeHtml(htmlStr);
+        }
+        else {
+            el.innerHTML = htmlStr;
+        }
         return;
     }
+    // No need to sanitize textContent (automatically escaped)
     el.textContent = datum == null ? '' : `${datum}`;
 }
 /**
@@ -15469,6 +16199,16 @@ class ItemEditorDialog extends EditorDialog {
                 }
             }
         }
+        if ($ctrl.name.endsWith('[]')) {
+            return $ctrl.value.split(',').map((value) => {
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return value;
+                }
+            });
+        }
         try {
             return JSON.parse($ctrl.value);
         }
@@ -15520,7 +16260,11 @@ class ItemEditorDialog extends EditorDialog {
         const $data = this.findAll(`[name^="${prefix}"]`);
         const map = new Map();
         for (const $datum of $data) {
-            const name = camelCase($datum.name.slice(prefix.length));
+            let name = camelCase($datum.name.slice(prefix.length));
+            if (name.endsWith('[]')) {
+                name = name.slice(0, -2);
+                map.delete(name);
+            }
             if (map.has(name)) {
                 continue;
             }
@@ -15563,7 +16307,7 @@ class ItemEditorDialog extends EditorDialog {
         const propName = name.slice(1);
         let el;
         for (const n of [kebabCase(propName), propName]) {
-            el = this.findAll(`[name="bge-${n}"]`);
+            el = this.findAll(`[name="bge-${n}"], [name="bge-${n}[]"]`);
             if (el.length > 0) {
                 return [...el];
             }
@@ -15573,30 +16317,10 @@ class ItemEditorDialog extends EditorDialog {
     #setValues(data) {
         for (const [_name, datum] of Object.entries(data)) {
             const name = kebabCase(_name);
-            const inputSelector = `[name="bge-${name}"]`;
-            if (Array.isArray(datum)) {
-                const $targetEl = this.find(inputSelector);
-                if (!$targetEl) {
-                    continue;
-                }
-                const $listRoot = $targetEl.closest('[data-bge-list]');
-                if (!$listRoot || $listRoot.children.length === 0) {
-                    continue;
-                }
-                const $listItem = $listRoot.firstElementChild?.cloneNode(true);
-                if (!$listItem) {
-                    continue;
-                }
-                while (datum.length > $listRoot.children.length) {
-                    $listRoot.append($listItem.cloneNode(true));
-                }
-                for (const [i, targetEl] of $listRoot.querySelectorAll(inputSelector).entries()) {
-                    setContent(targetEl, datum[i] || '');
-                }
-                continue;
-            }
+            const inputSelector = `[name="bge-${name}"], [name="bge-${name}[]"]`;
+            const value = Array.isArray(datum) ? datum.join(',') : datum;
             for (const targetEl of this.findAll(inputSelector)) {
-                setContent(targetEl, datum);
+                setContent(targetEl, value);
             }
         }
         this.update(data);
@@ -15893,16 +16617,16 @@ class BurgerEditorEngine {
  */
 function getValues(el, convertType = false, attr = 'field', filter) {
     const result = [];
-    const rawValue = el.getAttribute(`data-${attr}`);
-    const listRoot = el.closest(`[data-${attr}-list]`);
-    const forceArray = !!listRoot;
-    if (rawValue == null) {
+    const query = el.getAttribute(`data-${attr}`);
+    if (query == null) {
         throw new Error(`data-${attr} attriblute is empty.`);
     }
-    const fieldList = rawValue.split(/\s*,\s*/);
-    for (const field of fieldList) {
+    const listRoot = el.closest(`[data-${attr}-list]`);
+    const forceArray = !!listRoot;
+    const fields = parseFields(query);
+    for (const field of fields) {
         let value;
-        const { fieldName, propName } = fieldNameParser(field);
+        const { fieldName, propName } = field;
         if (propName) {
             switch (propName) {
                 case 'node': {
@@ -15917,6 +16641,12 @@ function getValues(el, convertType = false, attr = 'field', filter) {
                     value = el.innerHTML.trim();
                     break;
                 }
+                case 'style': {
+                    if (el instanceof HTMLElement) {
+                        value = el.style.cssText;
+                    }
+                    break;
+                }
                 default: {
                     if (/^style\([a-z-]+\)$/i.test(propName)) {
                         const css = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
@@ -15933,7 +16663,7 @@ function getValues(el, convertType = false, attr = 'field', filter) {
                         }
                         break;
                     }
-                    value = getAttribute(el, attr, propName, convertType);
+                    value = getAttribute(el, propName, attr, convertType);
                 }
             }
         }
@@ -15961,11 +16691,11 @@ function getValues(el, convertType = false, attr = 'field', filter) {
 /**
  *
  * @param el
- * @param attr
  * @param keyAttr
+ * @param attr
  * @param typeConvert
  */
-function getAttribute(el, attr, keyAttr, typeConvert) {
+function getAttribute(el, keyAttr, attr, typeConvert) {
     switch (keyAttr) {
         case 'contenteditable': {
             if (el instanceof HTMLElement) {
@@ -15987,24 +16717,35 @@ function getAttribute(el, attr, keyAttr, typeConvert) {
             return el.hasAttribute('download') ? el.getAttribute('download') : null;
         }
         case 'href': {
-            // return (el as HTMLAnchorElement).href;
-            return el.getAttribute(keyAttr) ?? ''; // return plain string
+            // Example: (el as HTMLAnchorElement).href;
+            // Expected: return defined value of plain string
+            return el.getAttribute(keyAttr) ?? '';
         }
-        default: {
-            let value;
-            const dataAttr = ['data', attr, kebabCase(keyAttr)].join('-');
-            if (el.hasAttribute(dataAttr)) {
-                value = el.getAttribute(dataAttr) || '';
-            }
-            else {
-                value = el.getAttribute(keyAttr) || '';
-            }
-            if (typeConvert) {
-                value = convert(value);
-            }
-            return value;
+    }
+    let value = 
+    // @ts-ignore
+    el[keyAttr];
+    if (value !== undefined) {
+        if (typeConvert) {
+            value = convert(value);
         }
+        return value;
+    }
+    // For shorthand notation, get value from data-field-* attribute
+    const dataAttr = ['data', attr, kebabCase(keyAttr)].join('-');
+    if (el.hasAttribute(dataAttr)) {
+        return el.getAttribute(dataAttr) ?? '';
+    }
+    value = el.getAttribute(keyAttr) ?? null;
+    if ((value === '' || value == null) &&
+        typeof keyAttr === 'string' &&
+        keyAttr.startsWith('data-')) {
+        return '';
     }
+    if (typeConvert) {
+        value = convert(value);
+    }
+    return value;
 }
 /**
  *
@@ -16012,8 +16753,9 @@ function getAttribute(el, attr, keyAttr, typeConvert) {
  */
 function convert(value) {
     value = parse(value);
-    if (URL.canParse(value)) {
-        const url = new URL(value, location.href);
+    const str = `${value}`;
+    if (URL.canParse(str)) {
+        const url = new URL(str, location.href);
         if (url.origin === location.origin) {
             return url.pathname;
         }
@@ -16026,7 +16768,7 @@ function convert(value) {
  */
 function parse(value) {
     try {
-        return JSON.parse(value);
+        return JSON.parse(`${value}`);
     }
     catch {
         return value;
@@ -16041,6 +16783,7 @@ function getBackgroundImagePath(value) {
     return decodeURI(value.replace(/^url\(["']?([^"']+)["']?\)$/i, '$1').replace(origin, ''));
 }
 
+const reverseListElementSelectors = ['picture'];
 /**
  *
  * @param el
@@ -16048,9 +16791,18 @@ function getBackgroundImagePath(value) {
  * @param typeConvert
  * @param filter
  */
-function get$1 (el, attr, typeConvert, filter) {
-    // eslint-disable-next-line unicorn/prefer-spread
-    const filedElements = Array.from(el.querySelectorAll(`[data-${attr}]`));
+function getComponent(el, attr, typeConvert, filter) {
+    el = el.cloneNode(true);
+    const reverseListElements = el.querySelectorAll(`:is(${reverseListElementSelectors.join(',')})[data-${attr}-list]`);
+    for (const reverseListElement of reverseListElements) {
+        const children = [];
+        while (reverseListElement.lastElementChild) {
+            children.push(reverseListElement.lastElementChild);
+            reverseListElement.lastElementChild.remove();
+        }
+        reverseListElement.append(...children);
+    }
+    const filedElements = el.querySelectorAll(`[data-${attr}]`);
     let values = [];
     for (const _el of filedElements) {
         values = [...values, ...getValues(_el, typeConvert, attr, filter)];
@@ -16059,59 +16811,105 @@ function get$1 (el, attr, typeConvert, filter) {
     return result;
 }
 
+/**
+ * Combines multiple field definitions with comma separation
+ * @param fields Array of field definitions
+ * @returns Comma-separated field definition string
+ */
+function stringifyFields(fields) {
+    return fields
+        .map((field) => stringifyField(field.fieldName, field.propName))
+        .join(', ');
+}
+/**
+ * Generates a field definition string from field name and attribute name
+ * @param fieldName Field name
+ * @param propName Attribute name (optional)
+ * @returns Field definition string
+ */
+function stringifyField(fieldName, propName) {
+    if (!propName) {
+        return fieldName;
+    }
+    // Use shorthand notation when fieldName and propName are the same
+    if (fieldName === propName) {
+        return `:${propName}`;
+    }
+    return `${fieldName}:${propName}`;
+}
+
 /**
  *
  * @param el
  * @param data
  * @param attr
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-function set$1 (el, data, attr, filter) {
+function setComponent(el, data, attr, filter, xssSanitize = true) {
     el = el.cloneNode(true);
     for (const dataKeyName in data) {
-        if (dataKeyName in data) {
-            const datum = data[dataKeyName];
-            const selector = `[data-${attr}*="${kebabCase(dataKeyName)}"]`;
-            // eslint-disable-next-line unicorn/prefer-spread
-            const targetList = Array.from(el.querySelectorAll(selector));
-            if (Array.isArray(datum)) {
-                const targetEl = targetList[0];
-                if (!targetEl) {
-                    continue;
-                }
-                const listRoot = targetEl.closest(`[data-${attr}-list]`);
-                if (!listRoot || (listRoot && listRoot.children.length === 0)) {
-                    continue;
-                }
-                const listItem = listRoot.children[0]?.cloneNode(true);
-                while (listItem && datum.length > listRoot.children.length) {
-                    listRoot.append(listItem.cloneNode(true));
-                }
-                // eslint-disable-next-line unicorn/prefer-spread
-                const newChildren = Array.from(listRoot.querySelectorAll(selector));
-                // eslint-disable-next-line unicorn/prefer-spread
-                const oldChildList = Array.from(listRoot.children);
-                let deleteNodeList = [];
-                for (const [i, child] of [...newChildren].entries()) {
-                    if (datum[i] == null) {
-                        setValue(child, dataKeyName, '', attr, filter);
-                        const oldChild = oldChildList[i];
-                        if (oldChild) {
-                            deleteNodeList.push(oldChild);
-                        }
+        const datum = data[dataKeyName];
+        if (Array.isArray(datum)) {
+            continue;
+        }
+        const targetList = [
+            // Include self
+            el,
+            // Perform rough filtering for performance
+            ...el.querySelectorAll(`[data-${attr}*="${kebabCase(dataKeyName)}"]`),
+        ]
+            // Perform more accurate filtering
+            .filter((el) => hasField(el, attr, dataKeyName));
+        for (const targetEl of targetList) {
+            setValue(targetEl, dataKeyName, datum, attr, filter, xssSanitize);
+        }
+    }
+    for (const listRoot of el.querySelectorAll(`[data-${attr}-list]`)) {
+        const decendants = listRoot.querySelectorAll('*');
+        const definedFieldsOfDecendants = new Set([...decendants].flatMap((el) => definedFields(el, attr)));
+        const maxLength = maxLengthOf(data, [...definedFieldsOfDecendants]);
+        const listItem = listRoot.children[0]?.cloneNode(true);
+        if (!listItem) {
+            continue;
+        }
+        while (listRoot.firstChild) {
+            listRoot.firstChild.remove();
+        }
+        for (let i = 0; i < maxLength; i++) {
+            let item = listItem.cloneNode(true);
+            const itemData = flattenData(data, i);
+            let reverse = false;
+            switch (listRoot.localName) {
+                case 'picture': {
+                    reverse = true;
+                    let fields = getFields(item, attr);
+                    if (i === 0) {
+                        // Convert first item to img element
+                        item = replaceNode(item, 'img', attr, xssSanitize);
+                        fields = replaceProp(fields, 'srcset', 'src');
+                        fields = removeProp(fields, 'sizes');
+                        const fieldQuery = stringifyFields(fields);
+                        item.setAttribute(`data-${attr}`, fieldQuery);
                     }
                     else {
-                        setValue(child, dataKeyName, datum[i], attr, filter);
-                        deleteNodeList = [];
+                        // Convert subsequent items to source elements
+                        item = replaceNode(item, 'source', attr, xssSanitize);
+                        fields = replaceProp(fields, 'src', 'srcset');
+                        fields = removeProp(fields, 'alt');
+                        fields = removeProp(fields, 'loading');
+                        const fieldQuery = stringifyFields(fields);
+                        item.setAttribute(`data-${attr}`, fieldQuery);
                     }
+                    break;
                 }
-                for (const node of deleteNodeList)
-                    node.remove();
+            }
+            const newEl = setComponent(item, itemData, attr, filter, xssSanitize);
+            if (reverse) {
+                listRoot.prepend(newEl);
             }
             else {
-                for (const [, targetEl] of [...targetList].entries()) {
-                    setValue(targetEl, dataKeyName, datum, attr, filter);
-                }
+                listRoot.append(newEl);
             }
         }
     }
@@ -16126,6 +16924,10 @@ class FrozenPatty {
      */
     #filter;
     #typeConvert = false;
+    /**
+     * Enable XSS protection
+     */
+    #xssSanitize = true;
     /**
      *
      * @param html Original HTML
@@ -16133,7 +16935,14 @@ class FrozenPatty {
      */
     constructor(html, options) {
         this.#dom = document.createElement('fp-placeholer');
-        this.#dom.innerHTML = html;
+        // Sanitize initial HTML if XSS protection is enabled
+        if (options?.xssSanitize === false) {
+            this.#dom.innerHTML = html;
+            this.#xssSanitize = false;
+        }
+        else {
+            this.#dom.innerHTML = sanitizeHtml(html);
+        }
         if (options) {
             if (options.attr) {
                 this.#attr = options.attr;
@@ -16145,7 +16954,8 @@ class FrozenPatty {
     merge(data) {
         const currentData = this.toJSON(false);
         const newData = Object.assign(currentData, data);
-        this.#dom = set$1(this.#dom, newData, this.#attr, this.#filter);
+        // Pass XSS protection flag to set (default is true if not set)
+        this.#dom = setComponent(this.#dom, newData, this.#attr, this.#filter, this.#xssSanitize);
         return this;
     }
     toDOM() {
@@ -16156,7 +16966,7 @@ class FrozenPatty {
     }
     toJSON(filtering = true) {
         const filter = filtering ? this.#filter : undefined;
-        return get$1(this.#dom, this.#attr, this.#typeConvert, filter);
+        return getComponent(this.#dom, this.#attr, this.#typeConvert, filter);
     }
 }
 
@@ -17493,6 +18303,19 @@ function mutable_source(initial_value, immutable = false) {
 	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
@@ -18411,13 +19234,13 @@ function flush_queued_root_effects() {
 				var collected_effects = process_effects(root_effects[i]);
 				flush_queued_effects(collected_effects);
 			}
+			old_values.clear();
 		}
 	} finally {
 		is_flushing = false;
 		is_updating_effect = was_updating_effect;
 
 		last_scheduled_effect = null;
-		old_values.clear();
 	}
 }
 
@@ -19293,6 +20116,20 @@ function resume_children(effect, local) {
 	}
 }
 
+/* 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`);
+	}
+}
+
 /** @import { ComponentContext } from '#client' */
 
 
@@ -21541,7 +22378,7 @@ function bind_this(element_or_component = {}, update, get_value, get_parts) {
 		render_effect(() => {
 			old_parts = parts;
 			// We only track changes to the parts, not the value itself to avoid unnecessary reruns.
-			parts = [];
+			parts = get_parts?.() || [];
 
 			untrack(() => {
 				if (element_or_component !== get_value(...parts)) {
@@ -21646,6 +22483,48 @@ function observe_all(context, props) {
 	props();
 }
 
+/** @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 { StoreReferencesContainer } from '#client' */
 /** @import { Store } from '#shared' */
 
@@ -22015,8 +22894,8 @@ function prop(props, key, flags, fallback) {
 var root_4$3 = template(`<img alt="" loading="lazy" class="svelte-s2t554">`);
 var root_3$5 = template(`<figure class="svelte-s2t554"><div class="img svelte-s2t554"><!></div> <figcaption class="svelte-s2t554"> </figcaption></figure>`);
 var root_2$3 = template(`<dd class="svelte-s2t554"><button type="button" class="svelte-s2t554"><!></button></dd>`);
-var root_1$5 = template(`<dt class="svelte-s2t554"> </dt> <div class="svelte-s2t554"></div>`, 1);
-var root$a = template(`<div class="block-catalog"><dl class="svelte-s2t554"></dl></div>`);
+var root_1$6 = template(`<dt class="svelte-s2t554"> </dt> <div class="svelte-s2t554"></div>`, 1);
+var root$b = template(`<div class="block-catalog"><dl class="svelte-s2t554"></dl></div>`);
 
 function Block_catalog($$anchor, $$props) {
 	push($$props, false);
@@ -22034,13 +22913,13 @@ function Block_catalog($$anchor, $$props) {
 
 	init();
 
-	var div = root$a();
+	var div = root$b();
 	var dl = child(div);
 
 	each(dl, 5, () => engine().blockCatalogDialog.catalog, ([category, blocks]) => category, ($$anchor, $$item) => {
 		let category = () => get($$item)[0];
 		let blocks = () => get($$item)[1];
-		var fragment = root_1$5();
+		var fragment = root_1$6();
 		var dt = first_child(fragment);
 		var text$1 = child(dt);
 
@@ -22141,7 +23020,7 @@ const defaultAttributes = {
     },
 };
 
-var root$9 = ns_template(`<svg><!><!></svg>`);
+var root$a = ns_template(`<svg><!><!></svg>`);
 
 function Icon($$anchor, $$props) {
 	const $$sanitized_props = legacy_rest_props($$props, [
@@ -22171,7 +23050,7 @@ function Icon($$anchor, $$props) {
 
 	init();
 
-	var svg = root$9();
+	var svg = root$a();
 	let attributes;
 	var node = child(svg);
 
@@ -22535,11 +23414,11 @@ function Trash($$anchor, $$props) {
 	}));
 }
 
-var root$8 = template(`<div class="svelte-1m6pw9u"><button type="button" class="svelte-1m6pw9u"><!></button> <span class="svelte-1m6pw9u"> </span></div>`);
+var root$9 = template(`<div class="svelte-1m6pw9u"><button type="button" class="svelte-1m6pw9u"><!></button> <span class="svelte-1m6pw9u"> </span></div>`);
 
 function Block_menu_button($$anchor, $$props) {
 	const uid = props_id();
-	var div = root$8();
+	var div = root$9();
 
 	set_style(div, '', {}, { '--name': `--anchor-${uid}` });
 
@@ -22628,7 +23507,7 @@ async function replaceElement(elA, elB, duration = 600) {
 }
 
 var root_5$3 = template(`<!> <!>`, 1);
-var root$7 = template(`<div class="bge-menu-base svelte-15fci6"><div class="bge-menu svelte-15fci6"><div class="bge-move-group svelte-15fci6"><!> <!></div> <div class="bge-standard-group svelte-15fci6"><!> <!> <!> <!> <!> <!></div></div> <div class="bge-menu-margin svelte-15fci6"><span class="svelte-15fci6"> </span></div></div>`);
+var root$8 = template(`<div class="bge-menu-base svelte-15fci6"><div class="bge-menu svelte-15fci6"><div class="bge-move-group svelte-15fci6"><!> <!></div> <div class="bge-standard-group svelte-15fci6"><!> <!> <!> <!> <!> <!></div></div> <div class="bge-menu-margin svelte-15fci6"><span class="svelte-15fci6"> </span></div></div>`);
 
 function Block_menu($$anchor, $$props) {
 	push($$props, false);
@@ -22780,7 +23659,7 @@ function Block_menu($$anchor, $$props) {
 	legacy_pre_effect_reset();
 	init();
 
-	var div = root$7();
+	var div = root$8();
 	var div_1 = child(div);
 	var div_2 = child(div_1);
 	var node = child(div_2);
@@ -22902,11 +23781,11 @@ var root_4$2 = template(`<div role="radiogroup" aria-labelledby="justify-group">
 var root_5$2 = template(`<label><span>列数</span> <output> </output> <input name="bge-options-columns" type="range" min="1" max="5"></label>`);
 var root_6$1 = template(`<div role="radiogroup" aria-labelledby="float-group"><div id="float-group">回り込み</div> <label><input type="radio" name="bge-options-float" value="start"><span>左寄せ</span></label> <label><input type="radio" name="bge-options-float" value="end"><span>右寄せ</span></label></div>`);
 var root_3$4 = template(`<!> <!> <!>`, 1);
-var root_1$4 = template(`<fieldset><legend>コンテナ特性</legend> <label><span>コンテナタイプ</span> <output> </output></label> <!></fieldset>`);
+var root_1$5 = template(`<fieldset><legend>コンテナ特性</legend> <label><span>コンテナタイプ</span> <output> </output></label> <!></fieldset>`);
 var root_9$1 = template(`<option> </option>`);
 var root_8$1 = template(`<label><span> </span> <select></select></label>`);
 var root_7$2 = template(`<fieldset><legend>ブロックのスタイル拡張</legend> <!></fieldset>`);
-var root$6 = template(`<!> <!> <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$7 = template(`<!> <!> <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);
@@ -22921,12 +23800,12 @@ function Block_options($$anchor, $$props) {
 
 	const options = currentBlock.exportOptions();
 	let currentColumns = state(proxy(options.props.columns ?? 1));
-	var fragment = root$6();
+	var fragment = root$7();
 	var node = first_child(fragment);
 
 	{
 		var consequent_4 = ($$anchor) => {
-			var fieldset = root_1$4();
+			var fieldset = root_1$5();
 			var label = sibling(child(fieldset), 2);
 			var output = sibling(child(label), 2);
 			var text = child(output);
@@ -23427,9 +24306,9 @@ function getExt(src) {
   };
 }
 
-var root_1$2 = template(`<img alt="画像のプレビュー" loading="lazy" class="svelte-1zu56m">`);
+var root_1$3 = template(`<img alt="画像のプレビュー" loading="lazy" class="svelte-1zu56m">`);
 var root_3$2 = template(`<video playsinline="" class="svelte-1zu56m"><source> <track kind="captions" src=""> <!></video>`, 2);
-var root$4 = template(`<span data-bge-editor-ui-component="thumbnail" class="svelte-1zu56m"><!></span>`);
+var root$5 = template(`<span data-bge-editor-ui-component="thumbnail" class="svelte-1zu56m"><!></span>`);
 
 function Thumbnail($$anchor, $$props) {
 	push($$props, false);
@@ -23440,12 +24319,12 @@ function Thumbnail($$anchor, $$props) {
 
 	init();
 
-	var span = root$4();
+	var span = root$5();
 	var node = child(span);
 
 	{
 		var consequent = ($$anchor) => {
-			var img = root_1$2();
+			var img = root_1$3();
 
 			template_effect(() => set_attribute(img, 'src', src()));
 			event('load', img, () => set(isLoaded, true));
@@ -23581,7 +24460,7 @@ var root_5$1 = template(`<span class="svelte-15rcfwg">アップロード中... <
 var root_6 = template(`<span class="attr svelte-15rcfwg"><span class="svelte-15rcfwg">ID</span><span class="svelte-15rcfwg"><!></span> <span class="svelte-15rcfwg">名称</span><span class="svelte-15rcfwg"><!></span> <span class="svelte-15rcfwg">更新</span><span class="svelte-15rcfwg"> </span> <span class="svelte-15rcfwg">サイズ</span><span class="svelte-15rcfwg"> </span></span>`);
 var root_7$1 = template(`<button class="delete svelte-15rcfwg" type="button">削除</button>`);
 var root_4 = template(`<li class="svelte-15rcfwg"><button class="file svelte-15rcfwg" type="button"><span class="thumbnail svelte-15rcfwg"><!></span> <!></button> <!></li>`);
-var root$3 = template(`<div class="ctrl svelte-15rcfwg"><div class="pagination svelte-15rcfwg"><button type="button" class="svelte-15rcfwg">前へ</button> <div class="page svelte-15rcfwg"><span><input type="number" min="1" aria-label="ページ番号"></span> <span>/</span> <span> </span></div> <button type="button" class="svelte-15rcfwg">次へ</button></div> <input type="search" placeholder="検索"></div> <ul class="list svelte-15rcfwg"></ul>`, 1);
+var root$4 = template(`<div class="ctrl svelte-15rcfwg"><div class="pagination svelte-15rcfwg"><button type="button" class="svelte-15rcfwg">前へ</button> <div class="page svelte-15rcfwg"><span><input type="number" min="1" aria-label="ページ番号"></span> <span>/</span> <span> </span></div> <button type="button" class="svelte-15rcfwg">次へ</button></div> <input type="search" placeholder="検索"></div> <ul class="list svelte-15rcfwg"></ul>`, 1);
 
 function File_list($$anchor, $$props) {
 	push($$props, false);
@@ -23763,7 +24642,7 @@ function File_list($$anchor, $$props) {
 
 	init();
 
-	var fragment_2 = root$3();
+	var fragment_2 = root$4();
 	var div = first_child(fragment_2);
 	var div_1 = child(div);
 	var button = child(div_1);
@@ -23887,7 +24766,7 @@ function File_list($$anchor, $$props) {
 	pop();
 }
 
-var root$2 = template(`<div><input type="file" class="svelte-1kuhunj"> <button type="button">ファイルを追加アップロードする</button></div>`);
+var root$3 = template(`<div><input type="file" class="svelte-1kuhunj"> <button type="button">ファイルを追加アップロードする</button></div>`);
 
 function File_uploader($$anchor, $$props) {
 	push($$props, false);
@@ -23940,7 +24819,7 @@ function File_uploader($$anchor, $$props) {
 
 	init();
 
-	var div = root$2();
+	var div = root$3();
 	var input = child(div);
 
 	set_attribute(input, 'accept', accept);
@@ -23953,7 +24832,7 @@ function File_uploader($$anchor, $$props) {
 	pop();
 }
 
-var root_1$1 = template(`<img alt="画像プレビュー" class="svelte-1ie51m5">`);
+var root_1$2 = template(`<img alt="画像プレビュー" class="svelte-1ie51m5">`);
 var root_3 = template(`<video controls playsinline="" class="svelte-1ie51m5"><source> <track kind="captions" src=""></video>`, 2);
 var root_5 = template(`<audio controls class="svelte-1ie51m5"><source> <track kind="metadata" src=""></audio>`);
 var root_7 = template(`<object class="svelte-1ie51m5"><p class="svelte-1ie51m5">プレビューできません</p></object>`);
@@ -23962,7 +24841,7 @@ var root_9 = template(`<div class="progress svelte-1ie51m5"></div>`);
 var root_10 = template(`<li class="upload svelte-1ie51m5"><span>アップロード...</span> <span class="progress svelte-1ie51m5"> </span></li>`);
 var root_11 = template(`<li class="path svelte-1ie51m5"><a target="_blank" class="svelte-1ie51m5"> </a></li>`);
 var root_12 = template(`<li class="dimension svelte-1ie51m5"> </li>`);
-var root$1 = template(`<div><div><!> <!></div> <ul class="svelte-1ie51m5"><!> <!></ul></div>`);
+var root$2 = template(`<div><div><!> <!></div> <ul class="svelte-1ie51m5"><!> <!></ul></div>`);
 
 function Preview($$anchor, $$props) {
 	push($$props, false);
@@ -24028,14 +24907,14 @@ function Preview($$anchor, $$props) {
 	legacy_pre_effect_reset();
 	init();
 
-	var div = root$1();
+	var div = root$2();
 	var div_1 = child(div);
 	let classes;
 	var node = child(div_1);
 
 	{
 		var consequent = ($$anchor) => {
-			var img = root_1$1();
+			var img = root_1$2();
 
 			template_effect(() => set_attribute(img, 'src', get(selectedPath)));
 			append($$anchor, img);
@@ -24247,8 +25126,8 @@ function Arrows_transfer_down($$anchor, $$props) {
 	}));
 }
 
-var root_1 = template(`<div class="row svelte-37o4yi"><div class="th"><textarea class="svelte-37o4yi"></textarea></div> <div class="td"><textarea class="svelte-37o4yi"></textarea></div> <div class="btn svelte-37o4yi"><ul class="svelte-37o4yi"><li class="svelte-37o4yi"><button type="button" title="下に追加"><!></button></li> <li class="svelte-37o4yi"><button type="button" title="削除"><!></button></li> <li class="svelte-37o4yi"><button type="button" title="下に移動"><!></button></li></ul></div></div>`);
-var root = template(`<div class="table svelte-37o4yi"></div>`);
+var root_1$1 = template(`<div class="row svelte-37o4yi"><div class="th"><textarea class="svelte-37o4yi"></textarea></div> <div class="td"><textarea class="svelte-37o4yi"></textarea></div> <div class="btn svelte-37o4yi"><ul class="svelte-37o4yi"><li class="svelte-37o4yi"><button type="button" title="下に追加"><!></button></li> <li class="svelte-37o4yi"><button type="button" title="削除"><!></button></li> <li class="svelte-37o4yi"><button type="button" title="下に移動"><!></button></li></ul></div></div>`);
+var root$1 = template(`<div class="table svelte-37o4yi"></div>`);
 
 function Table_editor($$anchor, $$props) {
 	push($$props, false);
@@ -24317,10 +25196,10 @@ function Table_editor($$anchor, $$props) {
 
 	init();
 
-	var div = root();
+	var div = root$1();
 
 	each(div, 5, () => get(table), index, ($$anchor, row, i) => {
-		var div_1 = root_1();
+		var div_1 = root_1$1();
 		var div_2 = child(div_1);
 		var textarea = child(div_2);
 		set_attribute(textarea, 'aria-label', `${i}行目の見出しセル`);
@@ -24384,6 +25263,138 @@ function Table_editor($$anchor, $$props) {
 }
 
 delegate(['input', 'click']);
+
+function Circle_plus($$anchor, $$props) {
+	const $$sanitized_props = legacy_rest_props($$props, [
+		'children',
+		'$$slots',
+		'$$events',
+		'$$legacy'
+	]);
+
+	const iconNode = [
+		[
+			"path",
+			{ "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" }
+		],
+		["path", { "d": "M9 12h6" }],
+		["path", { "d": "M12 9v6" }]
+	];
+
+	Icon($$anchor, spread_props({ type: 'outline', name: 'circle-plus' }, () => $$sanitized_props, {
+		iconNode,
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = comment();
+			var node = first_child(fragment_1);
+
+			slot(node, $$props, 'default', {});
+			append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+}
+
+const onKeyDown = (event, update, currentIndex, length) => {
+	if (event.key === 'ArrowLeft') {
+		update(Math.max(0, get(currentIndex) - 1));
+	} else if (event.key === 'ArrowRight') {
+		update(Math.min(length - 1, get(currentIndex) + 1));
+	} else {
+		return;
+	}
+};
+
+var on_click = (__1, onClick, index) => onClick(get(index));
+var root_1 = template(`<button type="button" role="tab" class="svelte-2oedib"> </button>`);
+var on_click_1 = () => {};
+var root = template(`<div role="tablist" class="svelte-2oedib"><!> <button class="add-tab svelte-2oedib" type="button" title="タブを追加"><!></button></div>`);
+
+function Tabs($$anchor, $$props) {
+	push($$props, false);
+
+	let engine = prop($$props, 'engine', 8);
+	let contentId = prop($$props, 'contentId', 8);
+	const refs = mutable_source([]);
+	let tabPanel = null;
+	const length = 2;
+	let currentIndex = mutable_source(0);
+
+	engine().componentObserver.on('select-tab-in-item-editor', ({ index }) => {
+		set(currentIndex, index);
+		get(refs)[get(currentIndex)]?.focus();
+	});
+
+	const onClick = (index) => {
+		update(index);
+	};
+
+	/**
+	 *
+	 * @param index
+	 */
+	function createLabel(index) {
+		return `画像${index + 1}`;
+	}
+
+	/**
+	 *
+	 * @param index
+	 */
+	function update(index) {
+		set(currentIndex, index);
+		get(refs)[get(currentIndex)]?.focus();
+		engine().componentObserver.notify('select-tab-in-item-editor', { index: get(currentIndex) });
+		tabPanel?.setAttribute('aria-label', createLabel(get(currentIndex)));
+	}
+
+	onMount(() => {
+		tabPanel = document.getElementById(contentId());
+
+		if (!tabPanel) {
+			throw new Error('Tab panel not found');
+		}
+	});
+
+	init();
+
+	var div = root();
+	var node = child(div);
+
+	each(node, 1, () => Array.from({ length }, (_, index) => index), (index) => index, ($$anchor, index) => {
+		var button = root_1();
+
+		button.__click = [on_click, onClick, index];
+		button.__keydown = [onKeyDown, update, currentIndex, length];
+
+		var text = child(button);
+		bind_this(button, ($$value, index) => mutate(refs, get(refs)[index] = $$value), (index) => get(refs)?.[index], () => [get(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_text(text, $0);
+			},
+			[() => createLabel(get(index))],
+			derived_safe_equal
+		);
+
+		append($$anchor, button);
+	});
+
+	var button_1 = sibling(node, 2);
+
+	button_1.__click = [on_click_1];
+
+	var node_1 = child(button_1);
+
+	Circle_plus(node_1, {});
+	append($$anchor, div);
+	pop();
+}
+
+delegate(['click', 'keydown']);
 async function createBurgerEditorClient(options) {
   const engine = await BurgerEditorEngine.new({
     ...options,
@@ -24456,6 +25467,19 @@ async function createBurgerEditorClient(options) {
           }
         });
       },
+      tabs: (el, engine2) => {
+        const contentId = el.dataset.bgeEditorUiFor;
+        if (!contentId) {
+          throw new Error("Tab UI component requires contentId attribute");
+        }
+        return svelteMount(Tabs, {
+          target: el,
+          props: {
+            engine: engine2,
+            contentId
+          }
+        });
+      },
       tableEditor: (el, engine2) => {
         return svelteMount(Table_editor, {
           target: el,