npm - @1urso/generic-editor - Versions diffs - 0.1.43 → 0.1.44 - Mend

@1urso/generic-editor 0.1.43 → 0.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/generic-editor.js +4 -4
package/dist/generic-editor.umd.cjs +2 -2
package/package.json +1 -1

package/dist/generic-editor.js CHANGED Viewed

@@ -17606,9 +17606,9 @@ var getAnimationVariants = (n) => {
 }, PreviewElementRenderer = ({ element: n, offsetY: _ = 0, dataContext: E }) => {
 	let O = n.content;
 	if (E) {
-		if (n.type === "text" || n.type === "text-container") O = O.replace(/\{\{(.*?)\}\}/g, (n, _) => {
-			let O = E[_.trim()];
-			return O == null ? n : String(O);
+		if (n.type === "text" || n.type === "text-container") O = O.replace(/\{\{(.*?)\}\}/g, (_, O) => {
+			let A = E[O.trim()];
+			return A == null ? _ : n.formatting ? formatValue(A, n.formatting) : String(A);
 		});
 		else if (n.type === "image") if (n.dataBinding) {
 			let _ = E[n.dataBinding];
@@ -18410,5 +18410,5 @@ const GenericEditor = (n) => /* @__PURE__ */ jsx(EditorProvider, {
 	availableProps: n.layout.props,
 	theme: n.theme,
 	children: /* @__PURE__ */ jsx(EditorContent, { ...n })
-}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n        if (!text) return 0;\n        try {\n            const canvas = document.createElement('canvas');\n            const context = canvas.getContext('2d');\n            if (!context) return 0;\n            context.font = `${fontSize}px ${fontFamily}`;\n            const words = String(text).split(' ');\n            let line = '';\n            let lineCount = 1;\n            for (let i = 0; i < words.length; i++) {\n                const testLine = line + words[i] + ' ';\n                const metrics = context.measureText(testLine);\n                const testWidth = metrics.width;\n                if (testWidth > width && i > 0) {\n                    line = words[i] + ' ';\n                    lineCount++;\n                } else {\n                    line = testLine;\n                }\n            }\n            const explicitLines = String(text).split('\\n').length - 1;\n            lineCount += explicitLines;\n            return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n        } catch (_) {\n            return 0;\n        }\n    };\n\n    const computeLayout = (elements, itemData) => {\n        const layoutElements = JSON.parse(JSON.stringify(elements));\n        \n        const isInside = (inner, outer) => {\n             const eps = 0.1;\n             return (\n                 inner.x >= outer.x - eps &&\n                 inner.x + inner.width <= outer.x + outer.width + eps &&\n                 inner.y >= outer.y - eps &&\n                 inner.y + inner.height <= outer.y + outer.height + eps\n             );\n        };\n\n        const autoGrowElements = layoutElements\n            .filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow)\n            .sort((a, b) => a.y - b.y);\n\n        autoGrowElements.forEach(textEl => {\n            let content = textEl.content;\n            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                const val = itemData[key.trim()];\n                return val !== undefined && val !== null ? String(val) : match;\n            });\n            \n            const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n            const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n            \n            const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';\n            \n            if (isHorizontal) {\n                // Horizontal expansion: Update width only\n                // Requires canvas context which is available in measureTextHeight scope or we create new one\n                // For simplicity, we can't easily access the measure logic here if it's not exposed, \n                // but measureTextHeight is available in this scope.\n                // However measureTextHeight calculates HEIGHT. We need WIDTH.\n                \n                try {\n                    const canvas = document.createElement('canvas');\n                    const context = canvas.getContext('2d');\n                    if (context) {\n                         context.font = `${fontSize}px ${fontFamily}`;\n                         const metrics = context.measureText(content);\n                         const padding = parseInt(String((textEl.style && textEl.style.padding) || 0)) * 2;\n                         const newWidth = Math.ceil(metrics.width + padding);\n                         if (newWidth > textEl.width) {\n                             textEl.width = newWidth;\n                         }\n                    }\n                } catch(e) {}\n            } else {\n                // Vertical Expansion\n                const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n                const designHeight = textEl.height;\n                const delta = measuredHeight - designHeight;\n                \n                if (delta > 0) {\n                    const originalBottom = textEl.y + designHeight;\n                    const originalTextRect = {\n                        x: textEl.x,\n                        y: textEl.y,\n                        width: textEl.width,\n                        height: designHeight\n                    };\n                    \n                    textEl.height = measuredHeight;\n                    \n                    layoutElements.forEach(other => {\n                        if (other.id === textEl.id) return;\n                        \n                        if (isInside(originalTextRect, other)) {\n                            other.height += delta;\n                        }\n                        \n                        if (other.y >= originalBottom) {\n                            other.y += delta;\n                        }\n                    });\n                }\n            }\n        });\n        \n        let maxY = 0;\n        layoutElements.forEach(el => {\n            const bottom = el.y + el.height;\n            if (bottom > maxY) maxY = bottom;\n        });\n        \n        return { layoutElements, maxY };\n    };\n\n    const computeItemHeight = (elements, itemData, fallbackHeight) => {\n        const { maxY } = computeLayout(elements, itemData);\n        return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n    };\n\n    const formatValue = (value, formatting) => {\n        if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n        if (value === undefined || value === null) return '';\n\n        if (formatting.type === 'boolean') {\n             const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n             return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n        }\n\n        if (formatting.type === 'date') {\n            try {\n                const date = new Date(value);\n                if (isNaN(date.getTime())) return String(value);\n                \n                if (formatting.dateFormat) {\n                     const d = date.getDate().toString().padStart(2, '0');\n                     const m = (date.getMonth() + 1).toString().padStart(2, '0');\n                     const y = date.getFullYear();\n                     const H = date.getHours().toString().padStart(2, '0');\n                     const M = date.getMinutes().toString().padStart(2, '0');\n                     const S = date.getSeconds().toString().padStart(2, '0');\n                     \n                     return formatting.dateFormat\n                        .replace('DD', d)\n                        .replace('MM', m)\n                        .replace('YYYY', String(y))\n                        .replace('HH', H)\n                        .replace('mm', M)\n                        .replace('ss', S);\n                }\n                return date.toLocaleDateString();\n            } catch (e) { return String(value); }\n        }\n\n        if (formatting.type === 'number') {\n             const num = parseFloat(value);\n             if (isNaN(num)) return String(value);\n             \n             if (formatting.numberFormat === 'currency') {\n                 return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n             }\n             if (formatting.numberFormat === 'percent') {\n                 return num.toFixed(formatting.decimalPlaces || 0) + '%';\n             }\n             if (formatting.decimalPlaces !== undefined) {\n                 return num.toFixed(formatting.decimalPlaces);\n             }\n             return num.toFixed(formatting.decimalPlaces || 0);\n        }\n        \n        return String(value);\n    };\n\n    const checkCondition = (propValue, operator, ruleValue) => {\n        const val = String(propValue).toLowerCase();\n        const target = String(ruleValue).toLowerCase();\n        \n        switch (operator) {\n            case 'equals': return val === target;\n            case 'notEquals': return val !== target;\n            case 'contains': return val.includes(target);\n            case 'greaterThan': return parseFloat(val) > parseFloat(target);\n            case 'lessThan': return parseFloat(val) < parseFloat(target);\n            case 'truthy': return !!propValue;\n            case 'falsy': return !propValue;\n            default: return false;\n        }\n    };\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const hex8ToRgba = (hex) => {\n        const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n        if (!m) return hex;\n        const h = m[1];\n        const r = parseInt(h.slice(0, 2), 16);\n        const g = parseInt(h.slice(2, 4), 16);\n        const b = parseInt(h.slice(4, 6), 16);\n        const a = parseInt(h.slice(6, 8), 16) / 255;\n        return `rgba(${r}, ${g}, ${b}, ${a})`;\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = [\n            'width', 'height', 'top', 'left', 'right', 'bottom', \n            'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n            'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n        ];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                if (typeof cssValue === 'string') {\n                    if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n                        cssValue = hex8ToRgba(cssValue);\n                    }\n                }\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const getAnimationStyles = (anim) => {\n        if (!anim || anim.type === 'none') return {};\n        return {\n            animationName: anim.type,\n            animationDuration: (anim.duration || 1) + 's',\n            animationDelay: (anim.delay || 0) + 's',\n            animationIterationCount: anim.iterationCount || 1,\n            animationTimingFunction: anim.timingFunction || 'ease',\n            animationFillMode: 'both'\n        };\n    };\n\n    const keyframesCss = `\n    @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn { \n        from { opacity: 0; } \n        to { opacity: 1; } \n    }\n    @keyframes slideInLeft { \n        from { opacity: 0; transform: translateX(-50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInRight { \n        from { opacity: 0; transform: translateX(50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInUp { \n        from { opacity: 0; transform: translateY(50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes slideInDown { \n        from { opacity: 0; transform: translateY(-50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes zoomIn { \n        from { opacity: 0; transform: scale(0.5); } \n        to { opacity: 1; transform: scale(1); } \n    }\n    @keyframes bounceIn {\n        0% { opacity: 0; transform: scale(0.3); }\n        50% { opacity: 1; transform: scale(1.05); }\n        70% { transform: scale(0.9); }\n        100% { transform: scale(1); }\n    }\n    @keyframes pulse {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.05); }\n        100% { transform: scale(1); }\n    }\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n        20%, 40%, 60%, 80% { transform: translateX(5px); }\n    }\n    @keyframes spin { \n        from { transform: rotate(0deg); } \n        to { transform: rotate(360deg); } \n    }\n    \n    /* Improved / Smoother Animations */\n    @keyframes smoothSlideUp {\n        0% { opacity: 0; transform: translateY(30px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes popIn {\n        0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n        100% { opacity: 1; transform: scale(1) translateY(0); }\n    }\n    @keyframes blurIn {\n        0% { opacity: 0; filter: blur(10px); }\n        100% { opacity: 1; filter: blur(0); }\n    }\n    `;\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        const { layoutElements } = computeLayout(elements, itemData);\n        return layoutElements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            // Resolve Content & Formatting\n            if (element.type === 'text') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    if (val === undefined || val === null) return match;\n                    if (element.formatting) {\n                        return formatValue(val, element.formatting);\n                    }\n                    return String(val);\n                });\n            } else if (element.type === 'image') {\n                 if (element.dataBinding) {\n                    const val = itemData[element.dataBinding];\n                    if (val !== undefined && val !== null) {\n                        imgSrc = String(val);\n                    } else {\n                        imgSrc = content;\n                    }\n                 } else {\n                     imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                        const val = itemData[key.trim()];\n                        return val !== undefined && val !== null ? String(val) : match;\n                    });\n                 }\n            }\n\n            // Resolve Conditional Styles\n            let conditionalStyles = {};\n            if (element.conditions) {\n                element.conditions.forEach(rule => {\n                    const propVal = itemData[rule.property];\n                    if (checkCondition(propVal, rule.operator, rule.value)) {\n                         conditionalStyles = { ...conditionalStyles, ...rule.style };\n                    }\n                });\n            }\n\n            // Resolve Style Bindings\n            let bindingStyles = {};\n            if (element.styleBindings) {\n                Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n                    const val = itemData[variableName];\n                    if (val !== undefined && val !== null) {\n                        bindingStyles[styleProp] = String(val);\n                    }\n                });\n            }\n\n            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.autoGrow ? 'auto' : element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: element.autoGrow ? 'visible' : 'hidden',\n                whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),\n                wordBreak: element.autoGrow ? 'break-word' : undefined,\n                ...element.style,\n                ...conditionalStyles,\n                ...bindingStyles\n            };\n            \n            // Fix: remove padding if it's not explicitly set, or handle it for text\n            if (element.type === 'text' && !baseStyle.padding) {\n                // baseStyle.padding = '8px'; // Removed default padding to respect resize box\n            }\n            \n            const styleString = styleObjectToString(baseStyle);\n\n            if (element.type === 'text' || element.type === 'text-container') {\n                return `<div style=\"${styleString}\">${content}</div>`;\n            } else if (element.type === 'image') {\n                const imgStyle = styleObjectToString({\n                    width: '100%',\n                    height: '100%',\n                    objectFit: element.style?.objectFit || 'cover',\n                    display: 'block'\n                });\n                return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n            } else if (element.type === 'box') {\n                 return `<div style=\"${styleString}\"></div>`;\n            }\n            return '';\n        }).join('\\n');\n    };\n\n    if (isList && Array.isArray(data)) {\n        // Calculate per-item height respecting autoGrow\n        // Sort data\n        let listData = [...data];\n        if (listSettings && listSettings.sortProp) {\n            const prop = listSettings.sortProp;\n            const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n            listData.sort((a, b) => {\n                const valA = a[prop];\n                const valB = b[prop];\n                if (valA < valB) return -1 * order;\n                if (valA > valB) return 1 * order;\n                return 0;\n            });\n        }\n        \n        // Handle newest position\n        if (listSettings && listSettings.newestPosition === 'top') {\n             listData.reverse();\n        }\n\n        // Generate HTML for all items\n        const itemsHtml = listData.map((item, index) => {\n             const itemHtml = renderItem(item, index, 0); \n             const itemHeight = computeItemHeight(elements, item, canvasHeight);\n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%'\n             });\n             \n             return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        // Entry Animation from settings\n        const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n        const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n        const entryAnimDuration = entryAnim.duration + 's';\n        const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n        const animationCss = `\n            ${keyframesCss}\n\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: ${containerHeight};\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n        \n        const scrollScript = scrollDirection === 'up' \n            ? `<script>\n                document.addEventListener('DOMContentLoaded', () => {\n                    const wrapper = document.querySelector('.list-wrapper');\n                    if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n                });\n               <\/script>`\n            : '';\n\n        // Inject Smart Script for Dynamic Updates\n        const injectionScript = `\n            <script>\n            (function() {\n                try {\n                    const elements = ${JSON.stringify(elements)};\n                    const formatValue = ${formatValue.toString()};\n                    const checkCondition = ${checkCondition.toString()};\n                    const camelToKebab = ${camelToKebab.toString()};\n                    const hex8ToRgba = ${hex8ToRgba.toString()};\n                    const styleObjectToString = ${styleObjectToString.toString()};\n                    const getAnimationStyles = ${getAnimationStyles.toString()};\n                    const renderItem = ${renderItem.toString()};\n\n                    const measureTextHeight = ${measureTextHeight.toString()};\n                    const computeLayout = ${computeLayout.toString()};\n                    const computeItemHeight = ${computeItemHeight.toString()};\n                    const itemHeightFallback = ${canvasHeight || 0};\n                    const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n                    const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n                    window.addItem = function(data) {\n                        const wrapper = document.querySelector('.list-wrapper');\n                        if (!wrapper) return;\n\n                        const itemHtml = renderItem(data, 0, 0);\n                        const itemHeight = computeItemHeight(elements, data, itemHeightFallback);\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            height: itemHeight,\n                            width: '100%'\n                        });\n\n                        const div = document.createElement('div');\n                        div.className = 'list-item';\n                        div.setAttribute('style', itemContainerStyle);\n                        div.innerHTML = itemHtml;\n\n                        if (newestPosition === 'top') {\n                            wrapper.insertBefore(div, wrapper.firstChild);\n                        } else {\n                            wrapper.appendChild(div);\n                        }\n                        \n                        if (scrollDirection === 'up') {\n                           wrapper.scrollTop = wrapper.scrollHeight;\n                        }\n                    };\n                } catch(e) { console.error(\"Smart List Init Error\", e); }\n            })();\n            <\/script>\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n            ${scrollScript}\n            ${injectionScript}\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
+}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n        if (!text) return 0;\n        try {\n            const canvas = document.createElement('canvas');\n            const context = canvas.getContext('2d');\n            if (!context) return 0;\n            context.font = `${fontSize}px ${fontFamily}`;\n            const words = String(text).split(' ');\n            let line = '';\n            let lineCount = 1;\n            for (let i = 0; i < words.length; i++) {\n                const testLine = line + words[i] + ' ';\n                const metrics = context.measureText(testLine);\n                const testWidth = metrics.width;\n                if (testWidth > width && i > 0) {\n                    line = words[i] + ' ';\n                    lineCount++;\n                } else {\n                    line = testLine;\n                }\n            }\n            const explicitLines = String(text).split('\\n').length - 1;\n            lineCount += explicitLines;\n            return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n        } catch (_) {\n            return 0;\n        }\n    };\n\n    const computeLayout = (elements, itemData) => {\n        const layoutElements = JSON.parse(JSON.stringify(elements));\n        \n        const isInside = (inner, outer) => {\n             const eps = 0.1;\n             return (\n                 inner.x >= outer.x - eps &&\n                 inner.x + inner.width <= outer.x + outer.width + eps &&\n                 inner.y >= outer.y - eps &&\n                 inner.y + inner.height <= outer.y + outer.height + eps\n             );\n        };\n\n        const autoGrowElements = layoutElements\n            .filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow)\n            .sort((a, b) => a.y - b.y);\n\n        autoGrowElements.forEach(textEl => {\n            let content = textEl.content;\n            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                const val = itemData[key.trim()];\n                return val !== undefined && val !== null ? String(val) : match;\n            });\n            \n            const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n            const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n            \n            const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';\n            \n            if (isHorizontal) {\n                // Horizontal expansion: Update width only\n                // Requires canvas context which is available in measureTextHeight scope or we create new one\n                // For simplicity, we can't easily access the measure logic here if it's not exposed, \n                // but measureTextHeight is available in this scope.\n                // However measureTextHeight calculates HEIGHT. We need WIDTH.\n                \n                try {\n                    const canvas = document.createElement('canvas');\n                    const context = canvas.getContext('2d');\n                    if (context) {\n                         context.font = `${fontSize}px ${fontFamily}`;\n                         const metrics = context.measureText(content);\n                         const padding = parseInt(String((textEl.style && textEl.style.padding) || 0)) * 2;\n                         const newWidth = Math.ceil(metrics.width + padding);\n                         if (newWidth > textEl.width) {\n                             textEl.width = newWidth;\n                         }\n                    }\n                } catch(e) {}\n            } else {\n                // Vertical Expansion\n                const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n                const designHeight = textEl.height;\n                const delta = measuredHeight - designHeight;\n                \n                if (delta > 0) {\n                    const originalBottom = textEl.y + designHeight;\n                    const originalTextRect = {\n                        x: textEl.x,\n                        y: textEl.y,\n                        width: textEl.width,\n                        height: designHeight\n                    };\n                    \n                    textEl.height = measuredHeight;\n                    \n                    layoutElements.forEach(other => {\n                        if (other.id === textEl.id) return;\n                        \n                        if (isInside(originalTextRect, other)) {\n                            other.height += delta;\n                        }\n                        \n                        if (other.y >= originalBottom) {\n                            other.y += delta;\n                        }\n                    });\n                }\n            }\n        });\n        \n        let maxY = 0;\n        layoutElements.forEach(el => {\n            const bottom = el.y + el.height;\n            if (bottom > maxY) maxY = bottom;\n        });\n        \n        return { layoutElements, maxY };\n    };\n\n    const computeItemHeight = (elements, itemData, fallbackHeight) => {\n        const { maxY } = computeLayout(elements, itemData);\n        return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n    };\n\n    const formatValue = (value, formatting) => {\n        if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n        if (value === undefined || value === null) return '';\n\n        if (formatting.type === 'boolean') {\n             const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n             return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n        }\n\n        if (formatting.type === 'date') {\n            try {\n                const date = new Date(value);\n                if (isNaN(date.getTime())) return String(value);\n                \n                if (formatting.dateFormat) {\n                     const d = date.getDate().toString().padStart(2, '0');\n                     const m = (date.getMonth() + 1).toString().padStart(2, '0');\n                     const y = date.getFullYear();\n                     const H = date.getHours().toString().padStart(2, '0');\n                     const M = date.getMinutes().toString().padStart(2, '0');\n                     const S = date.getSeconds().toString().padStart(2, '0');\n                     \n                     return formatting.dateFormat\n                        .replace('DD', d)\n                        .replace('MM', m)\n                        .replace('YYYY', String(y))\n                        .replace('HH', H)\n                        .replace('mm', M)\n                        .replace('ss', S);\n                }\n                return date.toLocaleDateString();\n            } catch (e) { return String(value); }\n        }\n\n        if (formatting.type === 'number') {\n             const num = parseFloat(value);\n             if (isNaN(num)) return String(value);\n             \n             if (formatting.numberFormat === 'currency') {\n                 return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n             }\n             if (formatting.numberFormat === 'percent') {\n                 return num.toFixed(formatting.decimalPlaces || 0) + '%';\n             }\n             if (formatting.decimalPlaces !== undefined) {\n                 return num.toFixed(formatting.decimalPlaces);\n             }\n             return num.toFixed(formatting.decimalPlaces || 0);\n        }\n        \n        return String(value);\n    };\n\n    const checkCondition = (propValue, operator, ruleValue) => {\n        const val = String(propValue).toLowerCase();\n        const target = String(ruleValue).toLowerCase();\n        \n        switch (operator) {\n            case 'equals': return val === target;\n            case 'notEquals': return val !== target;\n            case 'contains': return val.includes(target);\n            case 'greaterThan': return parseFloat(val) > parseFloat(target);\n            case 'lessThan': return parseFloat(val) < parseFloat(target);\n            case 'truthy': return !!propValue;\n            case 'falsy': return !propValue;\n            default: return false;\n        }\n    };\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const hex8ToRgba = (hex) => {\n        const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n        if (!m) return hex;\n        const h = m[1];\n        const r = parseInt(h.slice(0, 2), 16);\n        const g = parseInt(h.slice(2, 4), 16);\n        const b = parseInt(h.slice(4, 6), 16);\n        const a = parseInt(h.slice(6, 8), 16) / 255;\n        return `rgba(${r}, ${g}, ${b}, ${a})`;\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = [\n            'width', 'height', 'top', 'left', 'right', 'bottom', \n            'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n            'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n        ];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                if (typeof cssValue === 'string') {\n                    if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n                        cssValue = hex8ToRgba(cssValue);\n                    }\n                }\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const getAnimationStyles = (anim) => {\n        if (!anim || anim.type === 'none') return {};\n        return {\n            animationName: anim.type,\n            animationDuration: (anim.duration || 1) + 's',\n            animationDelay: (anim.delay || 0) + 's',\n            animationIterationCount: anim.iterationCount || 1,\n            animationTimingFunction: anim.timingFunction || 'ease',\n            animationFillMode: 'both'\n        };\n    };\n\n    const keyframesCss = `\n    @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn { \n        from { opacity: 0; } \n        to { opacity: 1; } \n    }\n    @keyframes slideInLeft { \n        from { opacity: 0; transform: translateX(-50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInRight { \n        from { opacity: 0; transform: translateX(50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInUp { \n        from { opacity: 0; transform: translateY(50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes slideInDown { \n        from { opacity: 0; transform: translateY(-50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes zoomIn { \n        from { opacity: 0; transform: scale(0.5); } \n        to { opacity: 1; transform: scale(1); } \n    }\n    @keyframes bounceIn {\n        0% { opacity: 0; transform: scale(0.3); }\n        50% { opacity: 1; transform: scale(1.05); }\n        70% { transform: scale(0.9); }\n        100% { transform: scale(1); }\n    }\n    @keyframes pulse {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.05); }\n        100% { transform: scale(1); }\n    }\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n        20%, 40%, 60%, 80% { transform: translateX(5px); }\n    }\n    @keyframes spin { \n        from { transform: rotate(0deg); } \n        to { transform: rotate(360deg); } \n    }\n    \n    /* Improved / Smoother Animations */\n    @keyframes smoothSlideUp {\n        0% { opacity: 0; transform: translateY(30px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes popIn {\n        0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n        100% { opacity: 1; transform: scale(1) translateY(0); }\n    }\n    @keyframes blurIn {\n        0% { opacity: 0; filter: blur(10px); }\n        100% { opacity: 1; filter: blur(0); }\n    }\n    `;\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        const { layoutElements } = computeLayout(elements, itemData);\n        return layoutElements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            // Resolve Content & Formatting\n            if (element.type === 'text' || element.type === 'text-container') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    if (val === undefined || val === null) return match;\n                    if (element.formatting) {\n                        return formatValue(val, element.formatting);\n                    }\n                    return String(val);\n                });\n            } else if (element.type === 'image') {\n                 if (element.dataBinding) {\n                    const val = itemData[element.dataBinding];\n                    if (val !== undefined && val !== null) {\n                        imgSrc = String(val);\n                    } else {\n                        imgSrc = content;\n                    }\n                 } else {\n                     imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                        const val = itemData[key.trim()];\n                        return val !== undefined && val !== null ? String(val) : match;\n                    });\n                 }\n            }\n\n            // Resolve Conditional Styles\n            let conditionalStyles = {};\n            if (element.conditions) {\n                element.conditions.forEach(rule => {\n                    const propVal = itemData[rule.property];\n                    if (checkCondition(propVal, rule.operator, rule.value)) {\n                         conditionalStyles = { ...conditionalStyles, ...rule.style };\n                    }\n                });\n            }\n\n            // Resolve Style Bindings\n            let bindingStyles = {};\n            if (element.styleBindings) {\n                Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n                    const val = itemData[variableName];\n                    if (val !== undefined && val !== null) {\n                        bindingStyles[styleProp] = String(val);\n                    }\n                });\n            }\n\n            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.autoGrow ? 'auto' : element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: element.autoGrow ? 'visible' : 'hidden',\n                whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),\n                wordBreak: element.autoGrow ? 'break-word' : undefined,\n                ...element.style,\n                ...conditionalStyles,\n                ...bindingStyles\n            };\n            \n            // Fix: remove padding if it's not explicitly set, or handle it for text\n            if (element.type === 'text' && !baseStyle.padding) {\n                // baseStyle.padding = '8px'; // Removed default padding to respect resize box\n            }\n            \n            const styleString = styleObjectToString(baseStyle);\n\n            if (element.type === 'text' || element.type === 'text-container') {\n                return `<div style=\"${styleString}\">${content}</div>`;\n            } else if (element.type === 'image') {\n                const imgStyle = styleObjectToString({\n                    width: '100%',\n                    height: '100%',\n                    objectFit: element.style?.objectFit || 'cover',\n                    display: 'block'\n                });\n                return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n            } else if (element.type === 'box') {\n                 return `<div style=\"${styleString}\"></div>`;\n            }\n            return '';\n        }).join('\\n');\n    };\n\n    if (isList && Array.isArray(data)) {\n        // Calculate per-item height respecting autoGrow\n        // Sort data\n        let listData = [...data];\n        if (listSettings && listSettings.sortProp) {\n            const prop = listSettings.sortProp;\n            const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n            listData.sort((a, b) => {\n                const valA = a[prop];\n                const valB = b[prop];\n                if (valA < valB) return -1 * order;\n                if (valA > valB) return 1 * order;\n                return 0;\n            });\n        }\n        \n        // Handle newest position\n        if (listSettings && listSettings.newestPosition === 'top') {\n             listData.reverse();\n        }\n\n        // Generate HTML for all items\n        const itemsHtml = listData.map((item, index) => {\n             const itemHtml = renderItem(item, index, 0); \n             const itemHeight = computeItemHeight(elements, item, canvasHeight);\n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%'\n             });\n             \n             return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        // Entry Animation from settings\n        const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n        const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n        const entryAnimDuration = entryAnim.duration + 's';\n        const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n        const animationCss = `\n            ${keyframesCss}\n\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: ${containerHeight};\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n        \n        const scrollScript = scrollDirection === 'up' \n            ? `<script>\n                document.addEventListener('DOMContentLoaded', () => {\n                    const wrapper = document.querySelector('.list-wrapper');\n                    if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n                });\n               <\/script>`\n            : '';\n\n        // Inject Smart Script for Dynamic Updates\n        const injectionScript = `\n            <script>\n            (function() {\n                try {\n                    const elements = ${JSON.stringify(elements)};\n                    const formatValue = ${formatValue.toString()};\n                    const checkCondition = ${checkCondition.toString()};\n                    const camelToKebab = ${camelToKebab.toString()};\n                    const hex8ToRgba = ${hex8ToRgba.toString()};\n                    const styleObjectToString = ${styleObjectToString.toString()};\n                    const getAnimationStyles = ${getAnimationStyles.toString()};\n                    const renderItem = ${renderItem.toString()};\n\n                    const measureTextHeight = ${measureTextHeight.toString()};\n                    const computeLayout = ${computeLayout.toString()};\n                    const computeItemHeight = ${computeItemHeight.toString()};\n                    const itemHeightFallback = ${canvasHeight || 0};\n                    const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n                    const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n                    window.addItem = function(data) {\n                        const wrapper = document.querySelector('.list-wrapper');\n                        if (!wrapper) return;\n\n                        const itemHtml = renderItem(data, 0, 0);\n                        const itemHeight = computeItemHeight(elements, data, itemHeightFallback);\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            height: itemHeight,\n                            width: '100%'\n                        });\n\n                        const div = document.createElement('div');\n                        div.className = 'list-item';\n                        div.setAttribute('style', itemContainerStyle);\n                        div.innerHTML = itemHtml;\n\n                        if (newestPosition === 'top') {\n                            wrapper.insertBefore(div, wrapper.firstChild);\n                        } else {\n                            wrapper.appendChild(div);\n                        }\n                        \n                        if (scrollDirection === 'up') {\n                           wrapper.scrollTop = wrapper.scrollHeight;\n                        }\n                    };\n                } catch(e) { console.error(\"Smart List Init Error\", e); }\n            })();\n            <\/script>\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n            ${scrollScript}\n            ${injectionScript}\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
 export { GenericEditor as EditorContent, generateHTML };

package/dist/generic-editor.umd.cjs CHANGED Viewed

@@ -54,7 +54,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${n.do
             top: ${r}px !important;
           }
         `),()=>{m.contains(p)&&m.removeChild(p)}},[n]),(0,r.jsx)(Ow,{isPresent:n,childRef:s,sizeRef:c,children:t.cloneElement(e,{ref:u})})}var Aw=({children:e,initial:n,isPresent:i,onExitComplete:a,custom:o,presenceAffectsLayout:s,mode:c,anchorX:l,root:u})=>{let d=Iy(jw),f=(0,t.useId)(),p=!0,m=(0,t.useMemo)(()=>(p=!1,{id:f,initial:n,isPresent:i,custom:o,onExitComplete:e=>{d.set(e,!0);for(let e of d.values())if(!e)return;a&&a()},register:e=>(d.set(e,!1),()=>d.delete(e))}),[i,d,a]);return s&&p&&(m={...m}),(0,t.useMemo)(()=>{d.forEach((e,t)=>d.set(t,!1))},[i]),t.useEffect(()=>{!i&&!d.size&&a&&a()},[i]),c===`popLayout`&&(e=(0,r.jsx)(kw,{isPresent:i,anchorX:l,root:u,children:e})),(0,r.jsx)(zy.Provider,{value:m,children:e})};function jw(){return new Map}function Mw(e=!0){let n=(0,t.useContext)(zy);if(n===null)return[!0,null];let{isPresent:r,onExitComplete:i,register:a}=n,o=(0,t.useId)();(0,t.useEffect)(()=>{if(e)return a(o)},[e]);let s=(0,t.useCallback)(()=>e&&i&&i(o),[o,i,e]);return!r&&i?[!1,s]:[!0]}var Nw=e=>e.key||``;function Pw(e){let n=[];return t.Children.forEach(e,e=>{(0,t.isValidElement)(e)&&n.push(e)}),n}var Fw=({children:e,custom:n,initial:i=!0,onExitComplete:a,presenceAffectsLayout:o=!0,mode:s=`sync`,propagate:c=!1,anchorX:l=`left`,root:u})=>{let[d,f]=Mw(c),p=(0,t.useMemo)(()=>Pw(e),[e]),m=c&&!d?[]:p.map(Nw),h=(0,t.useRef)(!0),g=(0,t.useRef)(p),_=Iy(()=>new Map),v=(0,t.useRef)(new Set),[y,b]=(0,t.useState)(p),[x,S]=(0,t.useState)(p);Ry(()=>{h.current=!1,g.current=p;for(let e=0;e<x.length;e++){let t=Nw(x[e]);m.includes(t)?(_.delete(t),v.current.delete(t)):_.get(t)!==!0&&_.set(t,!1)}},[x,m.length,m.join(`-`)]);let C=[];if(p!==y){let e=[...p];for(let t=0;t<x.length;t++){let n=x[t],r=Nw(n);m.includes(r)||(e.splice(t,0,n),C.push(n))}return s===`wait`&&C.length&&(e=C),S(Pw(e)),b(p),null}process.env.NODE_ENV!==`production`&&s===`wait`&&x.length>1&&console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);let{forceRender:w}=(0,t.useContext)(Fy);return(0,r.jsx)(r.Fragment,{children:x.map(e=>{let t=Nw(e),y=c&&!d?!1:p===x||m.includes(t);return(0,r.jsx)(Aw,{isPresent:y,initial:!h.current||i?void 0:!1,custom:n,presenceAffectsLayout:o,mode:s,root:u,onExitComplete:y?void 0:()=>{if(v.current.has(t))return;if(v.current.add(t),_.has(t))_.set(t,!0);else return;let e=!0;_.forEach(t=>{t||(e=!1)}),e&&(w?.(),S(g.current),c&&f?.(),a&&a())},anchorX:l,children:e},t)})})},Iw=(0,t.createContext)({strict:!1}),Lw={animation:[`animate`,`variants`,`whileHover`,`whileTap`,`exit`,`whileInView`,`whileFocus`,`whileDrag`],exit:[`exit`],drag:[`drag`,`dragControls`],focus:[`whileFocus`],hover:[`whileHover`,`onHoverStart`,`onHoverEnd`],tap:[`whileTap`,`onTap`,`onTapStart`,`onTapCancel`],pan:[`onPan`,`onPanStart`,`onPanSessionStart`,`onPanEnd`],inView:[`whileInView`,`onViewportEnter`,`onViewportLeave`],layout:[`layout`,`layoutId`]},Rw={};for(let e in Lw)Rw[e]={isEnabled:t=>Lw[e].some(e=>!!t[e])};function zw(e){for(let t in e)Rw[t]={...Rw[t],...e[t]}}var Bw=new Set(`animate.exit.variants.initial.style.values.variants.transition.transformTemplate.custom.inherit.onBeforeLayoutMeasure.onAnimationStart.onAnimationComplete.onUpdate.onDragStart.onDrag.onDragEnd.onMeasureDragConstraints.onDirectionLock.onDragTransitionEnd._dragX._dragY.onHoverStart.onHoverEnd.onViewportEnter.onViewportLeave.globalTapTarget.ignoreStrict.viewport`.split(`.`));function Vw(e){return e.startsWith(`while`)||e.startsWith(`drag`)&&e!==`draggable`||e.startsWith(`layout`)||e.startsWith(`onTap`)||e.startsWith(`onPan`)||e.startsWith(`onLayout`)||Bw.has(e)}function Hw(e){var t=Object.create(null);return function(n){return t[n]===void 0&&(t[n]=e(n)),t[n]}}var Uw=u((()=>{})),Ww=f({default:()=>Kw}),Gw,Kw,qw=u((()=>{Uw(),Gw=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,Kw=Hw(function(e){return Gw.test(e)||e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)<91})})),Jw=e=>!Vw(e);function Yw(e){typeof e==`function`&&(Jw=t=>t.startsWith(`on`)?!Vw(t):e(t))}try{Yw((qw(),h(Ww)).default)}catch{}function Xw(e,t,n){let r={};for(let i in e)i===`values`&&typeof e.values==`object`||(Jw(i)||n===!0&&Vw(i)||!t&&!Vw(i)||e.draggable&&i.startsWith(`onDrag`))&&(r[i]=e[i]);return r}var Zw=(0,t.createContext)({});function Qw(e){return typeof e==`object`&&!!e&&typeof e.start==`function`}function $w(e){return typeof e==`string`||Array.isArray(e)}var eT=[`animate`,`whileInView`,`whileFocus`,`whileHover`,`whileTap`,`whileDrag`,`exit`],tT=[`initial`,...eT];function nT(e){return Qw(e.animate)||tT.some(t=>$w(e[t]))}function rT(e){return!!(nT(e)||e.variants)}function iT(e,t){if(nT(e)){let{initial:t,animate:n}=e;return{initial:t===!1||$w(t)?t:void 0,animate:$w(n)?n:void 0}}return e.inherit===!1?{}:t}function aT(e){let{initial:n,animate:r}=iT(e,(0,t.useContext)(Zw));return(0,t.useMemo)(()=>({initial:n,animate:r}),[oT(n),oT(r)])}function oT(e){return Array.isArray(e)?e.join(` `):e}function sT(e,t){return t.max===t.min?0:e/(t.max-t.min)*100}var cT={correct:(e,t)=>{if(!t.target)return e;if(typeof e==`string`)if(Y.test(e))e=parseFloat(e);else return e;return`${sT(e,t.target.x)}% ${sT(e,t.target.y)}%`}},lT={correct:(e,{treeScale:t,projectionDelta:n})=>{let r=e,i=Dx.parse(e);if(i.length>5)return r;let a=Dx.createTransformer(e),o=typeof i[0]==`number`?0:1,s=n.x.scale*t.x,c=n.y.scale*t.y;i[0+o]/=s,i[1+o]/=c;let l=Z(s,c,.5);return typeof i[2+o]==`number`&&(i[2+o]/=l),typeof i[3+o]==`number`&&(i[3+o]/=l),a(i)}},uT={borderRadius:{...cT,applyTo:[`borderTopLeftRadius`,`borderTopRightRadius`,`borderBottomLeftRadius`,`borderBottomRightRadius`]},borderTopLeftRadius:cT,borderTopRightRadius:cT,borderBottomLeftRadius:cT,borderBottomRightRadius:cT,boxShadow:lT};function dT(e,{layout:t,layoutId:n}){return LS.has(e)||e.startsWith(`origin`)||(t||n!==void 0)&&(!!uT[e]||e===`opacity`)}var fT={x:`translateX`,y:`translateY`,z:`translateZ`,transformPerspective:`perspective`},pT=IS.length;function mT(e,t,n){let r=``,i=!0;for(let a=0;a<pT;a++){let o=IS[a],s=e[o];if(s===void 0)continue;let c=!0;if(c=typeof s==`number`?s===(o.startsWith(`scale`)?1:0):parseFloat(s)===0,!c||n){let e=JC(s,BC[o]);if(!c){i=!1;let t=fT[o]||o;r+=`${t}(${e}) `}n&&(t[o]=e)}}return r=r.trim(),n?r=n(t,i?``:r):i&&(r=`none`),r}function hT(e,t,n){let{style:r,vars:i,transformOrigin:a}=e,o=!1,s=!1;for(let e in t){let n=t[e];if(LS.has(e)){o=!0;continue}else if(Hb(e)){i[e]=n;continue}else{let t=JC(n,BC[e]);e.startsWith(`origin`)?(s=!0,a[e]=t):r[e]=t}}if(t.transform||(o||n?r.transform=mT(t,e.transform,n):r.transform&&=`none`),s){let{originX:e=`50%`,originY:t=`50%`,originZ:n=0}=a;r.transformOrigin=`${e} ${t} ${n}`}}var gT=()=>({style:{},transform:{},transformOrigin:{},vars:{}});function _T(e,t,n){for(let r in t)!xw(t[r])&&!dT(r,n)&&(e[r]=t[r])}function vT({transformTemplate:e},n){return(0,t.useMemo)(()=>{let t=gT();return hT(t,n,e),Object.assign({},t.vars,t.style)},[n])}function yT(e,t){let n=e.style||{},r={};return _T(r,n,e),Object.assign(r,vT(e,t)),r}function bT(e,t){let n={},r=yT(e,t);return e.drag&&e.dragListener!==!1&&(n.draggable=!1,r.userSelect=r.WebkitUserSelect=r.WebkitTouchCallout=`none`,r.touchAction=e.drag===!0?`none`:`pan-${e.drag===`x`?`y`:`x`}`),e.tabIndex===void 0&&(e.onTap||e.onTapStart||e.whileTap)&&(n.tabIndex=0),n.style=r,n}var xT={offset:`stroke-dashoffset`,array:`stroke-dasharray`},ST={offset:`strokeDashoffset`,array:`strokeDasharray`};function CT(e,t,n=1,r=0,i=!0){e.pathLength=1;let a=i?xT:ST;e[a.offset]=Y.transform(-r);let o=Y.transform(t),s=Y.transform(n);e[a.array]=`${o} ${s}`}var wT=[`offsetDistance`,`offsetPath`,`offsetRotate`,`offsetAnchor`];function TT(e,{attrX:t,attrY:n,attrScale:r,pathLength:i,pathSpacing:a=1,pathOffset:o=0,...s},c,l,u){if(hT(e,s,l),c){e.style.viewBox&&(e.attrs.viewBox=e.style.viewBox);return}e.attrs=e.style,e.style={};let{attrs:d,style:f}=e;d.transform&&(f.transform=d.transform,delete d.transform),(f.transform||d.transformOrigin)&&(f.transformOrigin=d.transformOrigin??`50% 50%`,delete d.transformOrigin),f.transform&&(f.transformBox=u?.transformBox??`fill-box`,delete d.transformBox);for(let e of wT)d[e]!==void 0&&(f[e]=d[e],delete d[e]);t!==void 0&&(d.x=t),n!==void 0&&(d.y=n),r!==void 0&&(d.scale=r),i!==void 0&&CT(d,i,a,o,!1)}var ET=()=>({...gT(),attrs:{}}),DT=e=>typeof e==`string`&&e.toLowerCase()===`svg`;function OT(e,n,r,i){let a=(0,t.useMemo)(()=>{let t=ET();return TT(t,n,DT(i),e.transformTemplate,e.style),{...t.attrs,style:{...t.style}}},[n]);if(e.style){let t={};_T(t,e.style,e),a.style={...t,...a.style}}return a}var kT=[`animate`,`circle`,`defs`,`desc`,`ellipse`,`g`,`image`,`line`,`filter`,`marker`,`mask`,`metadata`,`path`,`pattern`,`polygon`,`polyline`,`rect`,`stop`,`switch`,`symbol`,`svg`,`text`,`tspan`,`use`,`view`];function AT(e){return typeof e!=`string`||e.includes(`-`)?!1:!!(kT.indexOf(e)>-1||/[A-Z]/u.test(e))}function jT(e,n,r,{latestValues:i},a,o=!1,s){let c=(s??AT(e)?OT:bT)(n,i,a,e),l=Xw(n,typeof e==`string`,o),u=e===t.Fragment?{}:{...l,...c,ref:r},{children:d}=n,f=(0,t.useMemo)(()=>xw(d)?d.get():d,[d]);return(0,t.createElement)(e,{...u,children:f})}function MT(e){let t=[{},{}];return e?.values.forEach((e,n)=>{t[0][n]=e.get(),t[1][n]=e.getVelocity()}),t}function NT(e,t,n,r){if(typeof t==`function`){let[i,a]=MT(r);t=t(n===void 0?e.custom:n,i,a)}if(typeof t==`string`&&(t=e.variants&&e.variants[t]),typeof t==`function`){let[i,a]=MT(r);t=t(n===void 0?e.custom:n,i,a)}return t}function PT(e){return xw(e)?e.get():e}function FT({scrapeMotionValuesFromProps:e,createRenderState:t},n,r,i){return{latestValues:IT(n,r,i,e),renderState:t()}}function IT(e,t,n,r){let i={},a=r(e,{});for(let e in a)i[e]=PT(a[e]);let{initial:o,animate:s}=e,c=nT(e),l=rT(e);t&&l&&!c&&e.inherit!==!1&&(o===void 0&&(o=t.initial),s===void 0&&(s=t.animate));let u=n?n.initial===!1:!1;u||=o===!1;let d=u?s:o;if(d&&typeof d!=`boolean`&&!Qw(d)){let t=Array.isArray(d)?d:[d];for(let n=0;n<t.length;n++){let r=NT(e,t[n]);if(r){let{transitionEnd:e,transition:t,...n}=r;for(let e in n){let t=n[e];if(Array.isArray(t)){let e=u?t.length-1:0;t=t[e]}t!==null&&(i[e]=t)}for(let t in e)i[t]=e[t]}}}return i}var LT=e=>(n,r)=>{let i=(0,t.useContext)(Zw),a=(0,t.useContext)(zy),o=()=>FT(e,n,i,a);return r?o():Iy(o)};function RT(e,t,n){let{style:r}=e,i={};for(let a in r)(xw(r[a])||t.style&&xw(t.style[a])||dT(a,e)||n?.getValue(a)?.liveStyle!==void 0)&&(i[a]=r[a]);return i}var zT=LT({scrapeMotionValuesFromProps:RT,createRenderState:gT});function BT(e,t,n){let r=RT(e,t,n);for(let n in e)if(xw(e[n])||xw(t[n])){let t=IS.indexOf(n)===-1?n:`attr`+n.charAt(0).toUpperCase()+n.substring(1);r[t]=e[n]}return r}var VT=LT({scrapeMotionValuesFromProps:BT,createRenderState:ET}),HT=Symbol.for(`motionComponentSymbol`);function UT(e,n,r){let i=(0,t.useRef)(r);(0,t.useInsertionEffect)(()=>{i.current=r});let a=(0,t.useRef)(null);return(0,t.useCallback)(t=>{t&&e.onMount?.(t),n&&(t?n.mount(t):n.unmount());let r=i.current;if(typeof r==`function`)if(t){let e=r(t);typeof e==`function`&&(a.current=e)}else a.current?(a.current(),a.current=null):r(t);else r&&(r.current=t)},[n])}var WT=e=>e.replace(/([a-z])([A-Z])/gu,`$1-$2`).toLowerCase(),GT=`data-`+WT(`framerAppearId`),KT=(0,t.createContext)({});function qT(e){return e&&typeof e==`object`&&Object.prototype.hasOwnProperty.call(e,`current`)}function JT(e,n,r,i,a,o){let{visualElement:s}=(0,t.useContext)(Zw),c=(0,t.useContext)(Iw),l=(0,t.useContext)(zy),u=(0,t.useContext)(ww).reducedMotion,d=(0,t.useRef)(null);i||=c.renderer,!d.current&&i&&(d.current=i(e,{visualState:n,parent:s,props:r,presenceContext:l,blockInitialAnimation:l?l.initial===!1:!1,reducedMotionConfig:u,isSVG:o}));let f=d.current,p=(0,t.useContext)(KT);f&&!f.projection&&a&&(f.type===`html`||f.type===`svg`)&&YT(d.current,r,a,p);let m=(0,t.useRef)(!1);(0,t.useInsertionEffect)(()=>{f&&m.current&&f.update(r,l)});let h=r[GT],g=(0,t.useRef)(!!h&&!window.MotionHandoffIsComplete?.(h)&&window.MotionHasOptimisedAnimation?.(h));return Ry(()=>{f&&(m.current=!0,window.MotionIsMounted=!0,f.updateFeatures(),f.scheduleRenderMicrotask(),g.current&&f.animationState&&f.animationState.animateChanges())}),(0,t.useEffect)(()=>{f&&(!g.current&&f.animationState&&f.animationState.animateChanges(),g.current&&=(queueMicrotask(()=>{window.MotionHandoffMarkAsComplete?.(h)}),!1),f.enteringChildren=void 0)}),f}function YT(e,t,n,r){let{layoutId:i,layout:a,drag:o,dragConstraints:s,layoutScroll:c,layoutRoot:l,layoutCrossfade:u}=t;e.projection=new n(e.latestValues,t[`data-framer-portal-id`]?void 0:XT(e.parent)),e.projection.setOptions({layoutId:i,layout:a,alwaysMeasureLayout:!!o||s&&qT(s),visualElement:e,animationType:typeof a==`string`?a:`both`,initialPromotionConfig:r,crossfade:u,layoutScroll:c,layoutRoot:l})}function XT(e){if(e)return e.options.allowProjection===!1?XT(e.parent):e.projection}function ZT(e,{forwardMotionProps:n=!1,type:i}={},a,o){a&&zw(a);let s=i?i===`svg`:AT(e),c=s?VT:zT;function l(i,l){let u,d={...(0,t.useContext)(ww),...i,layoutId:QT(i)},{isStatic:f}=d,p=aT(i),m=c(i,f);if(!f&&Ly){$T(d,a);let t=eE(d);u=t.MeasureLayout,p.visualElement=JT(e,m,d,o,t.ProjectionNode,s)}return(0,r.jsxs)(Zw.Provider,{value:p,children:[u&&p.visualElement?(0,r.jsx)(u,{visualElement:p.visualElement,...d}):null,jT(e,i,UT(m,p.visualElement,l),m,f,n,s)]})}l.displayName=`motion.${typeof e==`string`?e:`create(${e.displayName??e.name??``})`}`;let u=(0,t.forwardRef)(l);return u[HT]=e,u}function QT({layoutId:e}){let n=(0,t.useContext)(Fy).id;return n&&e!==void 0?n+`-`+e:e}function $T(e,n){let r=(0,t.useContext)(Iw).strict;if(process.env.NODE_ENV!==`production`&&n&&r){let t="You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";e.ignoreStrict?Wy(!1,t,`lazy-strict-mode`):Gy(!1,t,`lazy-strict-mode`)}}function eE(e){let{drag:t,layout:n}=Rw;if(!t&&!n)return{};let r={...t,...n};return{MeasureLayout:t?.isEnabled(e)||n?.isEnabled(e)?r.MeasureLayout:void 0,ProjectionNode:r.ProjectionNode}}function tE(e,t){if(typeof Proxy>`u`)return ZT;let n=new Map,r=(n,r)=>ZT(n,r,e,t);return new Proxy((e,t)=>(process.env.NODE_ENV!==`production`&&ob(!1,`motion() is deprecated. Use motion.create() instead.`),r(e,t)),{get:(i,a)=>a===`create`?r:(n.has(a)||n.set(a,ZT(a,void 0,e,t)),n.get(a))})}function nE({top:e,left:t,right:n,bottom:r}){return{x:{min:t,max:n},y:{min:e,max:r}}}function rE({x:e,y:t}){return{top:t.min,right:e.max,bottom:t.max,left:e.min}}function iE(e,t){if(!t)return e;let n=t({x:e.left,y:e.top}),r=t({x:e.right,y:e.bottom});return{top:n.y,left:n.x,bottom:r.y,right:r.x}}function aE(e){return e===void 0||e===1}function oE({scale:e,scaleX:t,scaleY:n}){return!aE(e)||!aE(t)||!aE(n)}function sE(e){return oE(e)||cE(e)||e.z||e.rotate||e.rotateX||e.rotateY||e.skewX||e.skewY}function cE(e){return lE(e.x)||lE(e.y)}function lE(e){return e&&e!==`0%`}function uE(e,t,n){return n+t*(e-n)}function dE(e,t,n,r,i){return i!==void 0&&(e=uE(e,i,r)),uE(e,n,r)+t}function fE(e,t=0,n=1,r,i){e.min=dE(e.min,t,n,r,i),e.max=dE(e.max,t,n,r,i)}function pE(e,{x:t,y:n}){fE(e.x,t.translate,t.scale,t.originPoint),fE(e.y,n.translate,n.scale,n.originPoint)}var mE=.999999999999,hE=1.0000000000001;function gE(e,t,n,r=!1){let i=n.length;if(!i)return;t.x=t.y=1;let a,o;for(let s=0;s<i;s++){a=n[s],o=a.projectionDelta;let{visualElement:i}=a.options;i&&i.props.style&&i.props.style.display===`contents`||(r&&a.options.layoutScroll&&a.scroll&&a!==a.root&&yE(e,{x:-a.scroll.offset.x,y:-a.scroll.offset.y}),o&&(t.x*=o.x.scale,t.y*=o.y.scale,pE(e,o)),r&&sE(a.latestValues)&&yE(e,a.latestValues))}t.x<hE&&t.x>mE&&(t.x=1),t.y<hE&&t.y>mE&&(t.y=1)}function _E(e,t){e.min+=t,e.max+=t}function vE(e,t,n,r,i=.5){fE(e,t,n,Z(e.min,e.max,i),r)}function yE(e,t){vE(e.x,t.x,t.scaleX,t.scale,t.originX),vE(e.y,t.y,t.scaleY,t.scale,t.originY)}function bE(e,t){return nE(iE(e.getBoundingClientRect(),t))}function xE(e,t,n){let r=bE(e,n),{scroll:i}=t;return i&&(_E(r.x,i.offset.x),_E(r.y,i.offset.y)),r}var SE=()=>({translate:0,scale:1,origin:0,originPoint:0}),CE=()=>({x:SE(),y:SE()}),wE=()=>({min:0,max:0}),$=()=>({x:wE(),y:wE()}),TE={current:null},EE={current:!1};function DE(){if(EE.current=!0,Ly)if(window.matchMedia){let e=window.matchMedia(`(prefers-reduced-motion)`),t=()=>TE.current=e.matches;e.addEventListener(`change`,t),t()}else TE.current=!1}var OE=new WeakMap;function kE(e,t,n){for(let r in t){let i=t[r],a=n[r];if(xw(i))e.addValue(r,i);else if(xw(a))e.addValue(r,ew(i,{owner:e}));else if(a!==i)if(e.hasValue(r)){let t=e.getValue(r);t.liveStyle===!0?t.jump(i):t.hasAnimated||t.set(i)}else{let t=e.getStaticValue(r);e.addValue(r,ew(t===void 0?i:t,{owner:e}))}}for(let r in n)t[r]===void 0&&e.removeValue(r);return t}var AE=[`AnimationStart`,`AnimationComplete`,`Update`,`BeforeLayoutMeasure`,`LayoutMeasure`,`LayoutAnimationStart`,`LayoutAnimationComplete`],jE=class{scrapeMotionValuesFromProps(e,t,n){return{}}constructor({parent:e,props:t,presenceContext:n,reducedMotionConfig:r,blockInitialAnimation:i,visualState:a},o={}){this.current=null,this.children=new Set,this.isVariantNode=!1,this.isControllingVariants=!1,this.shouldReduceMotion=null,this.values=new Map,this.KeyframeResolver=XS,this.features={},this.valueSubscriptions=new Map,this.prevMotionValues={},this.events={},this.propEventSubscriptions={},this.notifyUpdate=()=>this.notify(`Update`,this.latestValues),this.render=()=>{this.current&&(this.triggerBuild(),this.renderInstance(this.current,this.renderState,this.props.style,this.projection))},this.renderScheduledAt=0,this.scheduleRender=()=>{let e=zb.now();this.renderScheduledAt<e&&(this.renderScheduledAt=e,J.render(this.render,!1,!0))};let{latestValues:s,renderState:c}=a;this.latestValues=s,this.baseTarget={...s},this.initialValues=t.initial?{...s}:{},this.renderState=c,this.parent=e,this.props=t,this.presenceContext=n,this.depth=e?e.depth+1:0,this.reducedMotionConfig=r,this.options=o,this.blockInitialAnimation=!!i,this.isControllingVariants=nT(t),this.isVariantNode=rT(t),this.isVariantNode&&(this.variantChildren=new Set),this.manuallyAnimateOnMount=!!(e&&e.current);let{willChange:l,...u}=this.scrapeMotionValuesFromProps(t,{},this);for(let e in u){let t=u[e];s[e]!==void 0&&xw(t)&&t.set(s[e])}}mount(e){this.current=e,OE.set(e,this),this.projection&&!this.projection.instance&&this.projection.mount(e),this.parent&&this.isVariantNode&&!this.isControllingVariants&&(this.removeFromVariantTree=this.parent.addVariantChild(this)),this.values.forEach((e,t)=>this.bindToMotionValue(t,e)),this.reducedMotionConfig===`never`?this.shouldReduceMotion=!1:this.reducedMotionConfig===`always`?this.shouldReduceMotion=!0:(EE.current||DE(),this.shouldReduceMotion=TE.current),process.env.NODE_ENV!==`production`&&ob(this.shouldReduceMotion!==!0,`You have Reduced Motion enabled on your device. Animations may not appear as expected.`,`reduced-motion-disabled`),this.parent?.addChild(this),this.update(this.props,this.presenceContext)}unmount(){for(let e in this.projection&&this.projection.unmount(),Pb(this.notifyUpdate),Pb(this.render),this.valueSubscriptions.forEach(e=>e()),this.valueSubscriptions.clear(),this.removeFromVariantTree&&this.removeFromVariantTree(),this.parent?.removeChild(this),this.events)this.events[e].clear();for(let e in this.features){let t=this.features[e];t&&(t.unmount(),t.isMounted=!1)}this.current=null}addChild(e){this.children.add(e),this.enteringChildren??=new Set,this.enteringChildren.add(e)}removeChild(e){this.children.delete(e),this.enteringChildren&&this.enteringChildren.delete(e)}bindToMotionValue(e,t){this.valueSubscriptions.has(e)&&this.valueSubscriptions.get(e)();let n=LS.has(e);n&&this.onBindTransform&&this.onBindTransform();let r=t.on(`change`,t=>{this.latestValues[e]=t,this.props.onUpdate&&J.preRender(this.notifyUpdate),n&&this.projection&&(this.projection.isTransformDirty=!0),this.scheduleRender()}),i;window.MotionCheckAppearSync&&(i=window.MotionCheckAppearSync(this,e,t)),this.valueSubscriptions.set(e,()=>{r(),i&&i(),t.owner&&t.stop()})}sortNodePosition(e){return!this.current||!this.sortInstanceNodePosition||this.type!==e.type?0:this.sortInstanceNodePosition(this.current,e.current)}updateFeatures(){let e=`animation`;for(e in Rw){let t=Rw[e];if(!t)continue;let{isEnabled:n,Feature:r}=t;if(!this.features[e]&&r&&n(this.props)&&(this.features[e]=new r(this)),this.features[e]){let t=this.features[e];t.isMounted?t.update():(t.mount(),t.isMounted=!0)}}}triggerBuild(){this.build(this.renderState,this.latestValues,this.props)}measureViewportBox(){return this.current?this.measureInstanceViewportBox(this.current,this.props):$()}getStaticValue(e){return this.latestValues[e]}setStaticValue(e,t){this.latestValues[e]=t}update(e,t){(e.transformTemplate||this.props.transformTemplate)&&this.scheduleRender(),this.prevProps=this.props,this.props=e,this.prevPresenceContext=this.presenceContext,this.presenceContext=t;for(let t=0;t<AE.length;t++){let n=AE[t];this.propEventSubscriptions[n]&&(this.propEventSubscriptions[n](),delete this.propEventSubscriptions[n]);let r=e[`on`+n];r&&(this.propEventSubscriptions[n]=this.on(n,r))}this.prevMotionValues=kE(this,this.scrapeMotionValuesFromProps(e,this.prevProps,this),this.prevMotionValues),this.handleChildMotionValue&&this.handleChildMotionValue()}getProps(){return this.props}getVariant(e){return this.props.variants?this.props.variants[e]:void 0}getDefaultTransition(){return this.props.transition}getTransformPagePoint(){return this.props.transformPagePoint}getClosestVariantNode(){return this.isVariantNode?this:this.parent?this.parent.getClosestVariantNode():void 0}addVariantChild(e){let t=this.getClosestVariantNode();if(t)return t.variantChildren&&t.variantChildren.add(e),()=>t.variantChildren.delete(e)}addValue(e,t){let n=this.values.get(e);t!==n&&(n&&this.removeValue(e),this.bindToMotionValue(e,t),this.values.set(e,t),this.latestValues[e]=t.get())}removeValue(e){this.values.delete(e);let t=this.valueSubscriptions.get(e);t&&(t(),this.valueSubscriptions.delete(e)),delete this.latestValues[e],this.removeValueFromRenderState(e,this.renderState)}hasValue(e){return this.values.has(e)}getValue(e,t){if(this.props.values&&this.props.values[e])return this.props.values[e];let n=this.values.get(e);return n===void 0&&t!==void 0&&(n=ew(t===null?void 0:t,{owner:this}),this.addValue(e,n)),n}readValue(e,t){let n=this.latestValues[e]!==void 0||!this.current?this.latestValues[e]:this.getBaseTargetFromProps(this.props,e)??this.readValueFromInstance(this.current,e,this.options);return n!=null&&(typeof n==`string`&&(qy(n)||Yy(n))?n=parseFloat(n):!Cw(n)&&Dx.test(t)&&(n=UC(e,t)),this.setBaseTarget(e,xw(n)?n.get():n)),xw(n)?n.get():n}setBaseTarget(e,t){this.baseTarget[e]=t}getBaseTarget(e){let{initial:t}=this.props,n;if(typeof t==`string`||typeof t==`object`){let r=NT(this.props,t,this.presenceContext?.custom);r&&(n=r[e])}if(t&&n!==void 0)return n;let r=this.getBaseTargetFromProps(this.props,e);return r!==void 0&&!xw(r)?r:this.initialValues[e]!==void 0&&n===void 0?void 0:this.baseTarget[e]}on(e,t){return this.events[e]||(this.events[e]=new tb),this.events[e].add(t)}notify(e,...t){this.events[e]&&this.events[e].notify(...t)}scheduleRenderMicrotask(){tw.render(this.render)}},ME=class extends jE{constructor(){super(...arguments),this.KeyframeResolver=KC}sortInstanceNodePosition(e,t){return e.compareDocumentPosition(t)&2?1:-1}getBaseTargetFromProps(e,t){return e.style?e.style[t]:void 0}removeValueFromRenderState(e,{vars:t,style:n}){delete t[e],delete n[e]}handleChildMotionValue(){this.childSubscription&&(this.childSubscription(),delete this.childSubscription);let{children:e}=this.props;xw(e)&&(this.childSubscription=e.on(`change`,e=>{this.current&&(this.current.textContent=`${e}`)}))}};function NE(e,{style:t,vars:n},r,i){let a=e.style,o;for(o in t)a[o]=t[o];for(o in i?.applyProjectionStyles(a,r),n)a.setProperty(o,n[o])}function PE(e){return window.getComputedStyle(e)}var FE=class extends ME{constructor(){super(...arguments),this.type=`html`,this.renderInstance=NE}readValueFromInstance(e,t){if(LS.has(t))return this.projection?.isProjecting?MS(t):PS(e,t);{let n=PE(e),r=(Hb(t)?n.getPropertyValue(t):n[t])||0;return typeof r==`string`?r.trim():r}}measureInstanceViewportBox(e,{transformPagePoint:t}){return bE(e,t)}build(e,t,n){hT(e,t,n.transformTemplate)}scrapeMotionValuesFromProps(e,t,n){return RT(e,t,n)}},IE=new Set([`baseFrequency`,`diffuseConstant`,`kernelMatrix`,`kernelUnitLength`,`keySplines`,`keyTimes`,`limitingConeAngle`,`markerHeight`,`markerWidth`,`numOctaves`,`targetX`,`targetY`,`surfaceScale`,`specularConstant`,`specularExponent`,`stdDeviation`,`tableValues`,`viewBox`,`gradientTransform`,`pathLength`,`startOffset`,`textLength`,`lengthAdjust`]);function LE(e,t,n,r){for(let n in NE(e,t,void 0,r),t.attrs)e.setAttribute(IE.has(n)?n:WT(n),t.attrs[n])}var RE=class extends ME{constructor(){super(...arguments),this.type=`svg`,this.isSVGTag=!1,this.measureInstanceViewportBox=$}getBaseTargetFromProps(e,t){return e[t]}readValueFromInstance(e,t){if(LS.has(t)){let e=HC(t);return e&&e.default||0}return t=IE.has(t)?t:WT(t),e.getAttribute(t)}scrapeMotionValuesFromProps(e,t,n){return BT(e,t,n)}build(e,t,n){TT(e,t,this.isSVGTag,n.transformTemplate,n.style)}renderInstance(e,t,n,r){LE(e,t,n,r)}mount(e){this.isSVGTag=DT(e.tagName),super.mount(e)}},zE=(e,n)=>n.isSVG??AT(e)?new RE(n):new FE(n,{allowProjection:e!==t.Fragment});function BE(e,t,n){let r=e.getProps();return NT(r,t,n===void 0?r.custom:n,e)}var VE=e=>Array.isArray(e);function HE(e,t,n){e.hasValue(t)?e.getValue(t).set(n):e.addValue(t,ew(n))}function UE(e){return VE(e)?e[e.length-1]||0:e}function WE(e,t){let{transitionEnd:n={},transition:r={},...i}=BE(e,t)||{};for(let t in i={...i,...n},i)HE(e,t,UE(i[t]))}function GE(e){return!!(xw(e)&&e.add)}function KE(e,t){let n=e.getValue(`willChange`);if(GE(n))return n.add(t);if(!n&&Ky.WillChange){let n=new Ky.WillChange(`auto`);e.addValue(`willChange`,n),n.add(t)}}function qE(e){return e.props[GT]}var JE=e=>e!==null;function YE(e,{repeat:t,repeatType:n=`loop`},r){let i=e.filter(JE),a=t&&n!==`loop`&&t%2==1?0:i.length-1;return!a||r===void 0?i[a]:r}var XE={type:`spring`,stiffness:500,damping:25,restSpeed:10},ZE=e=>({type:`spring`,stiffness:550,damping:e===0?2*Math.sqrt(550):30,restSpeed:10}),QE={type:`keyframes`,duration:.8},$E={type:`keyframes`,ease:[.25,.1,.35,1],duration:.3},eD=(e,{keyframes:t})=>t.length>2?QE:LS.has(e)?e.startsWith(`scale`)?ZE(t[1]):XE:$E;function tD({when:e,delay:t,delayChildren:n,staggerChildren:r,staggerDirection:i,repeat:a,repeatType:o,repeatDelay:s,from:c,elapsed:l,...u}){return!!Object.keys(u).length}var nD=(e,t,n,r={},i,a)=>o=>{let s=OC(r,e)||{},c=s.delay||r.delay||0,{elapsed:l=0}=r;l-=nb(c);let u={keyframes:Array.isArray(n)?n:[null,n],ease:`easeOut`,velocity:t.getVelocity(),...s,delay:-l,onUpdate:e=>{t.set(e),s.onUpdate&&s.onUpdate(e)},onComplete:()=>{o(),s.onComplete&&s.onComplete()},name:e,motionValue:t,element:a?void 0:i};tD(s)||Object.assign(u,eD(e,u)),u.duration&&=nb(u.duration),u.repeatDelay&&=nb(u.repeatDelay),u.from!==void 0&&(u.keyframes[0]=u.from);let d=!1;if((u.type===!1||u.duration===0&&!u.repeatDelay)&&(vC(u),u.delay===0&&(d=!0)),(Ky.instantAnimations||Ky.skipAnimations)&&(d=!0,vC(u),u.delay=0),u.allowFlatten=!s.type&&!s.ease,d&&!a&&t.get()!==void 0){let e=YE(u.keyframes,s);if(e!==void 0){J.update(()=>{u.onUpdate(e),u.onComplete()});return}}return s.isSync?new SS(u):new CC(u)};function rD({protectedKeys:e,needsAnimating:t},n){let r=e.hasOwnProperty(n)&&t[n]!==!0;return t[n]=!1,r}function iD(e,t,{delay:n=0,transitionOverride:r,type:i}={}){let{transition:a=e.getDefaultTransition(),transitionEnd:o,...s}=t;r&&(a=r);let c=[],l=i&&e.animationState&&e.animationState.getState()[i];for(let t in s){let r=e.getValue(t,e.latestValues[t]??null),i=s[t];if(i===void 0||l&&rD(l,t))continue;let o={delay:n,...OC(a||{},t)},u=r.get();if(u!==void 0&&!r.isAnimating&&!Array.isArray(i)&&i===u&&!o.velocity)continue;let d=!1;if(window.MotionHandoffAnimation){let n=qE(e);if(n){let e=window.MotionHandoffAnimation(n,t,J);e!==null&&(o.startTime=e,d=!0)}}KE(e,t),r.start(nD(t,r,i,e.shouldReduceMotion&&kC.has(t)?{type:!1}:o,e,d));let f=r.animation;f&&c.push(f)}return o&&Promise.all(c).then(()=>{J.update(()=>{o&&WE(e,o)})}),c}function aD(e,t,n,r=0,i=1){let a=Array.from(e).sort((e,t)=>e.sortNodePosition(t)).indexOf(t),o=e.size,s=(o-1)*r;return typeof n==`function`?n(a,o):i===1?a*r:s-a*r}function oD(e,t,n={}){let r=BE(e,t,n.type===`exit`?e.presenceContext?.custom:void 0),{transition:i=e.getDefaultTransition()||{}}=r||{};n.transitionOverride&&(i=n.transitionOverride);let a=r?()=>Promise.all(iD(e,r,n)):()=>Promise.resolve(),o=e.variantChildren&&e.variantChildren.size?(r=0)=>{let{delayChildren:a=0,staggerChildren:o,staggerDirection:s}=i;return sD(e,t,r,a,o,s,n)}:()=>Promise.resolve(),{when:s}=i;if(s){let[e,t]=s===`beforeChildren`?[a,o]:[o,a];return e().then(()=>t())}else return Promise.all([a(),o(n.delay)])}function sD(e,t,n=0,r=0,i=0,a=1,o){let s=[];for(let c of e.variantChildren)c.notify(`AnimationStart`,t),s.push(oD(c,t,{...o,delay:n+(typeof r==`function`?0:r)+aD(e.variantChildren,c,r,i,a)}).then(()=>c.notify(`AnimationComplete`,t)));return Promise.all(s)}function cD(e,t,n={}){e.notify(`AnimationStart`,t);let r;if(Array.isArray(t)){let i=t.map(t=>oD(e,t,n));r=Promise.all(i)}else if(typeof t==`string`)r=oD(e,t,n);else{let i=typeof t==`function`?BE(e,t,n.custom):t;r=Promise.all(iD(e,i,n))}return r.then(()=>{e.notify(`AnimationComplete`,t)})}function lD(e,t){if(!Array.isArray(t))return!1;let n=t.length;if(n!==e.length)return!1;for(let r=0;r<n;r++)if(t[r]!==e[r])return!1;return!0}var uD=tT.length;function dD(e){if(!e)return;if(!e.isControllingVariants){let t=e.parent&&dD(e.parent)||{};return e.props.initial!==void 0&&(t.initial=e.props.initial),t}let t={};for(let n=0;n<uD;n++){let r=tT[n],i=e.props[r];($w(i)||i===!1)&&(t[r]=i)}return t}var fD=[...eT].reverse(),pD=eT.length;function mD(e){return t=>Promise.all(t.map(({animation:t,options:n})=>cD(e,t,n)))}function hD(e){let t=mD(e),n=vD(),r=!0,i=t=>(n,r)=>{let i=BE(e,r,t===`exit`?e.presenceContext?.custom:void 0);if(i){let{transition:e,transitionEnd:t,...r}=i;n={...n,...r,...t}}return n};function a(n){t=n(e)}function o(a){let{props:o}=e,s=dD(e.parent)||{},c=[],l=new Set,u={},d=1/0;for(let t=0;t<pD;t++){let f=fD[t],p=n[f],m=o[f]===void 0?s[f]:o[f],h=$w(m),g=f===a?p.isActive:null;g===!1&&(d=t);let _=m===s[f]&&m!==o[f]&&h;if(_&&r&&e.manuallyAnimateOnMount&&(_=!1),p.protectedKeys={...u},!p.isActive&&g===null||!m&&!p.prevProp||Qw(m)||typeof m==`boolean`)continue;let v=gD(p.prevProp,m),y=v||f===a&&p.isActive&&!_&&h||t>d&&h,b=!1,x=Array.isArray(m)?m:[m],S=x.reduce(i(f),{});g===!1&&(S={});let{prevResolvedValues:C={}}=p,w={...C,...S},T=t=>{y=!0,l.has(t)&&(b=!0,l.delete(t)),p.needsAnimating[t]=!0;let n=e.getValue(t);n&&(n.liveStyle=!1)};for(let e in w){let t=S[e],n=C[e];if(u.hasOwnProperty(e))continue;let r=!1;r=VE(t)&&VE(n)?!lD(t,n):t!==n,r?t==null?l.add(e):T(e):t!==void 0&&l.has(e)?T(e):p.protectedKeys[e]=!0}p.prevProp=m,p.prevResolvedValues=S,p.isActive&&(u={...u,...S}),r&&e.blockInitialAnimation&&(y=!1);let E=_&&v;y&&(!E||b)&&c.push(...x.map(t=>{let n={type:f};if(typeof t==`string`&&r&&!E&&e.manuallyAnimateOnMount&&e.parent){let{parent:r}=e,i=BE(r,t);if(r.enteringChildren&&i){let{delayChildren:t}=i.transition||{};n.delay=aD(r.enteringChildren,e,t)}}return{animation:t,options:n}}))}if(l.size){let t={};if(typeof o.initial!=`boolean`){let n=BE(e,Array.isArray(o.initial)?o.initial[0]:o.initial);n&&n.transition&&(t.transition=n.transition)}l.forEach(n=>{let r=e.getBaseTarget(n),i=e.getValue(n);i&&(i.liveStyle=!0),t[n]=r??null}),c.push({animation:t})}let f=!!c.length;return r&&(o.initial===!1||o.initial===o.animate)&&!e.manuallyAnimateOnMount&&(f=!1),r=!1,f?t(c):Promise.resolve()}function s(t,r){if(n[t].isActive===r)return Promise.resolve();e.variantChildren?.forEach(e=>e.animationState?.setActive(t,r)),n[t].isActive=r;let i=o(t);for(let e in n)n[e].protectedKeys={};return i}return{animateChanges:o,setActive:s,setAnimateFunction:a,getState:()=>n,reset:()=>{n=vD()}}}function gD(e,t){return typeof t==`string`?t!==e:Array.isArray(t)?!lD(t,e):!1}function _D(e=!1){return{isActive:e,protectedKeys:{},needsAnimating:{},prevResolvedValues:{}}}function vD(){return{animate:_D(!0),whileInView:_D(),whileHover:_D(),whileTap:_D(),whileDrag:_D(),whileFocus:_D(),exit:_D()}}var yD=class{constructor(e){this.isMounted=!1,this.node=e}update(){}},bD=class extends yD{constructor(e){super(e),e.animationState||=hD(e)}updateAnimationControlsSubscription(){let{animate:e}=this.node.getProps();Qw(e)&&(this.unmountControls=e.subscribe(this.node))}mount(){this.updateAnimationControlsSubscription()}update(){let{animate:e}=this.node.getProps(),{animate:t}=this.node.prevProps||{};e!==t&&this.updateAnimationControlsSubscription()}unmount(){this.node.animationState.reset(),this.unmountControls?.()}},xD=0,SD={animation:{Feature:bD},exit:{Feature:class extends yD{constructor(){super(...arguments),this.id=xD++}update(){if(!this.node.presenceContext)return;let{isPresent:e,onExitComplete:t}=this.node.presenceContext,{isPresent:n}=this.node.prevPresenceContext||{};if(!this.node.animationState||e===n)return;let r=this.node.animationState.setActive(`exit`,!e);t&&!e&&r.then(()=>{t(this.id)})}mount(){let{register:e,onExitComplete:t}=this.node.presenceContext||{};t&&t(this.id),e&&(this.unmount=e(this.id))}unmount(){}}}};function CD(e,t,n,r={passive:!0}){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n)}function wD(e){return{point:{x:e.pageX,y:e.pageY}}}var TD=e=>t=>uw(t)&&e(t,wD(t));function ED(e,t,n,r){return CD(e,t,TD(n),r)}var DD=1e-4,OD=1-DD,kD=1+DD,AD=.01,jD=0-AD,MD=0+AD;function ND(e){return e.max-e.min}function PD(e,t,n){return Math.abs(e-t)<=n}function FD(e,t,n,r=.5){e.origin=r,e.originPoint=Z(t.min,t.max,e.origin),e.scale=ND(n)/ND(t),e.translate=Z(n.min,n.max,e.origin)-e.originPoint,(e.scale>=OD&&e.scale<=kD||isNaN(e.scale))&&(e.scale=1),(e.translate>=jD&&e.translate<=MD||isNaN(e.translate))&&(e.translate=0)}function ID(e,t,n,r){FD(e.x,t.x,n.x,r?r.originX:void 0),FD(e.y,t.y,n.y,r?r.originY:void 0)}function LD(e,t,n){e.min=n.min+t.min,e.max=e.min+ND(t)}function RD(e,t,n){LD(e.x,t.x,n.x),LD(e.y,t.y,n.y)}function zD(e,t,n){e.min=t.min-n.min,e.max=e.min+ND(t)}function BD(e,t,n){zD(e.x,t.x,n.x),zD(e.y,t.y,n.y)}function VD(e){return[e(`x`),e(`y`)]}var HD=({current:e})=>e?e.ownerDocument.defaultView:null,UD=(e,t)=>Math.abs(e-t);function WD(e,t){let n=UD(e.x,t.x),r=UD(e.y,t.y);return Math.sqrt(n**2+r**2)}var GD=new Set([`auto`,`scroll`]),KD=class{constructor(e,t,{transformPagePoint:n,contextWindow:r=window,dragSnapToOrigin:i=!1,distanceThreshold:a=3,element:o}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.scrollPositions=new Map,this.removeScrollListeners=null,this.onElementScroll=e=>{this.handleScroll(e.target)},this.onWindowScroll=()=>{this.handleScroll(window)},this.updatePoint=()=>{if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;let e=YD(this.lastMoveEventInfo,this.history),t=this.startEvent!==null,n=WD(e.offset,{x:0,y:0})>=this.distanceThreshold;if(!t&&!n)return;let{point:r}=e,{timestamp:i}=Fb;this.history.push({...r,timestamp:i});let{onStart:a,onMove:o}=this.handlers;t||(a&&a(this.lastMoveEvent,e),this.startEvent=this.lastMoveEvent),o&&o(this.lastMoveEvent,e)},this.handlePointerMove=(e,t)=>{this.lastMoveEvent=e,this.lastMoveEventInfo=qD(t,this.transformPagePoint),J.update(this.updatePoint,!0)},this.handlePointerUp=(e,t)=>{this.end();let{onEnd:n,onSessionEnd:r,resumeAnimation:i}=this.handlers;if((this.dragSnapToOrigin||!this.startEvent)&&i&&i(),!(this.lastMoveEvent&&this.lastMoveEventInfo))return;let a=YD(e.type===`pointercancel`?this.lastMoveEventInfo:qD(t,this.transformPagePoint),this.history);this.startEvent&&n&&n(e,a),r&&r(e,a)},!uw(e))return;this.dragSnapToOrigin=i,this.handlers=t,this.transformPagePoint=n,this.distanceThreshold=a,this.contextWindow=r||window;let s=qD(wD(e),this.transformPagePoint),{point:c}=s,{timestamp:l}=Fb;this.history=[{...c,timestamp:l}];let{onSessionStart:u}=t;u&&u(e,YD(s,this.history)),this.removeListeners=$y(ED(this.contextWindow,`pointermove`,this.handlePointerMove),ED(this.contextWindow,`pointerup`,this.handlePointerUp),ED(this.contextWindow,`pointercancel`,this.handlePointerUp)),o&&this.startScrollTracking(o)}startScrollTracking(e){let t=e.parentElement;for(;t;){let e=getComputedStyle(t);(GD.has(e.overflowX)||GD.has(e.overflowY))&&this.scrollPositions.set(t,{x:t.scrollLeft,y:t.scrollTop}),t=t.parentElement}this.scrollPositions.set(window,{x:window.scrollX,y:window.scrollY}),window.addEventListener(`scroll`,this.onElementScroll,{capture:!0,passive:!0}),window.addEventListener(`scroll`,this.onWindowScroll,{passive:!0}),this.removeScrollListeners=()=>{window.removeEventListener(`scroll`,this.onElementScroll,{capture:!0}),window.removeEventListener(`scroll`,this.onWindowScroll)}}handleScroll(e){let t=this.scrollPositions.get(e);if(!t)return;let n=e===window,r=n?{x:window.scrollX,y:window.scrollY}:{x:e.scrollLeft,y:e.scrollTop},i={x:r.x-t.x,y:r.y-t.y};i.x===0&&i.y===0||(n?this.lastMoveEventInfo&&(this.lastMoveEventInfo.point.x+=i.x,this.lastMoveEventInfo.point.y+=i.y):this.history.length>0&&(this.history[0].x-=i.x,this.history[0].y-=i.y),this.scrollPositions.set(e,r),J.update(this.updatePoint,!0))}updateHandlers(e){this.handlers=e}end(){this.removeListeners&&this.removeListeners(),this.removeScrollListeners&&this.removeScrollListeners(),this.scrollPositions.clear(),Pb(this.updatePoint)}};function qD(e,t){return t?{point:t(e.point)}:e}function JD(e,t){return{x:e.x-t.x,y:e.y-t.y}}function YD({point:e},t){return{point:e,delta:JD(e,ZD(t)),offset:JD(e,XD(t)),velocity:QD(t,.1)}}function XD(e){return e[0]}function ZD(e){return e[e.length-1]}function QD(e,t){if(e.length<2)return{x:0,y:0};let n=e.length-1,r=null,i=ZD(e);for(;n>=0&&(r=e[n],!(i.timestamp-r.timestamp>nb(t)));)n--;if(!r)return{x:0,y:0};let a=rb(i.timestamp-r.timestamp);if(a===0)return{x:0,y:0};let o={x:(i.x-r.x)/a,y:(i.y-r.y)/a};return o.x===1/0&&(o.x=0),o.y===1/0&&(o.y=0),o}function $D(e,{min:t,max:n},r){return t!==void 0&&e<t?e=r?Z(t,e,r.min):Math.max(e,t):n!==void 0&&e>n&&(e=r?Z(n,e,r.max):Math.min(e,n)),e}function eO(e,t,n){return{min:t===void 0?void 0:e.min+t,max:n===void 0?void 0:e.max+n-(e.max-e.min)}}function tO(e,{top:t,left:n,bottom:r,right:i}){return{x:eO(e.x,n,i),y:eO(e.y,t,r)}}function nO(e,t){let n=t.min-e.min,r=t.max-e.max;return t.max-t.min<e.max-e.min&&([n,r]=[r,n]),{min:n,max:r}}function rO(e,t){return{x:nO(e.x,t.x),y:nO(e.y,t.y)}}function iO(e,t){let n=.5,r=ND(e),i=ND(t);return i>r?n=eb(t.min,t.max-r,e.min):r>i&&(n=eb(e.min,e.max-i,t.min)),Hy(0,1,n)}function aO(e,t){let n={};return t.min!==void 0&&(n.min=t.min-e.min),t.max!==void 0&&(n.max=t.max-e.min),n}var oO=.35;function sO(e=oO){return e===!1?e=0:e===!0&&(e=oO),{x:cO(e,`left`,`right`),y:cO(e,`top`,`bottom`)}}function cO(e,t,n){return{min:lO(e,t),max:lO(e,n)}}function lO(e,t){return typeof e==`number`?e:e[t]||0}var uO=new WeakMap,dO=class{constructor(e){this.openDragLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=$(),this.latestPointerEvent=null,this.latestPanInfo=null,this.visualElement=e}start(e,{snapToCursor:t=!1,distanceThreshold:n}={}){let{presenceContext:r}=this.visualElement;if(r&&r.isPresent===!1)return;let i=e=>{t?(this.stopAnimation(),this.snapToCursor(wD(e).point)):this.pauseAnimation()},a=(e,t)=>{this.stopAnimation();let{drag:n,dragPropagation:r,onDragStart:i}=this.getProps();if(n&&!r&&(this.openDragLock&&this.openDragLock(),this.openDragLock=aw(n),!this.openDragLock))return;this.latestPointerEvent=e,this.latestPanInfo=t,this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),VD(e=>{let t=this.getAxisMotionValue(e).get()||0;if(lx.test(t)){let{projection:n}=this.visualElement;if(n&&n.layout){let r=n.layout.layoutBox[e];r&&(t=ND(r)*(parseFloat(t)/100))}}this.originPoint[e]=t}),i&&J.postRender(()=>i(e,t)),KE(this.visualElement,`transform`);let{animationState:a}=this.visualElement;a&&a.setActive(`whileDrag`,!0)},o=(e,t)=>{this.latestPointerEvent=e,this.latestPanInfo=t;let{dragPropagation:n,dragDirectionLock:r,onDirectionLock:i,onDrag:a}=this.getProps();if(!n&&!this.openDragLock)return;let{offset:o}=t;if(r&&this.currentDirection===null){this.currentDirection=pO(o),this.currentDirection!==null&&i&&i(this.currentDirection);return}this.updateAxis(`x`,t.point,o),this.updateAxis(`y`,t.point,o),this.visualElement.render(),a&&a(e,t)},s=(e,t)=>{this.latestPointerEvent=e,this.latestPanInfo=t,this.stop(e,t),this.latestPointerEvent=null,this.latestPanInfo=null},c=()=>VD(e=>this.getAnimationState(e)===`paused`&&this.getAxisMotionValue(e).animation?.play()),{dragSnapToOrigin:l}=this.getProps();this.panSession=new KD(e,{onSessionStart:i,onStart:a,onMove:o,onSessionEnd:s,resumeAnimation:c},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:l,distanceThreshold:n,contextWindow:HD(this.visualElement),element:this.visualElement.current})}stop(e,t){let n=e||this.latestPointerEvent,r=t||this.latestPanInfo,i=this.isDragging;if(this.cancel(),!i||!r||!n)return;let{velocity:a}=r;this.startAnimation(a);let{onDragEnd:o}=this.getProps();o&&J.postRender(()=>o(n,r))}cancel(){this.isDragging=!1;let{projection:e,animationState:t}=this.visualElement;e&&(e.isAnimationBlocked=!1),this.panSession&&this.panSession.end(),this.panSession=void 0;let{dragPropagation:n}=this.getProps();!n&&this.openDragLock&&(this.openDragLock(),this.openDragLock=null),t&&t.setActive(`whileDrag`,!1)}updateAxis(e,t,n){let{drag:r}=this.getProps();if(!n||!fO(e,r,this.currentDirection))return;let i=this.getAxisMotionValue(e),a=this.originPoint[e]+n[e];this.constraints&&this.constraints[e]&&(a=$D(a,this.constraints[e],this.elastic[e])),i.set(a)}resolveConstraints(){let{dragConstraints:e,dragElastic:t}=this.getProps(),n=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):this.visualElement.projection?.layout,r=this.constraints;e&&qT(e)?this.constraints||=this.resolveRefConstraints():e&&n?this.constraints=tO(n.layoutBox,e):this.constraints=!1,this.elastic=sO(t),r!==this.constraints&&n&&this.constraints&&!this.hasMutatedConstraints&&VD(e=>{this.constraints!==!1&&this.getAxisMotionValue(e)&&(this.constraints[e]=aO(n.layoutBox[e],this.constraints[e]))})}resolveRefConstraints(){let{dragConstraints:e,onMeasureDragConstraints:t}=this.getProps();if(!e||!qT(e))return!1;let n=e.current;Gy(n!==null,"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.",`drag-constraints-ref`);let{projection:r}=this.visualElement;if(!r||!r.layout)return!1;let i=xE(n,r.root,this.visualElement.getTransformPagePoint()),a=rO(r.layout.layoutBox,i);if(t){let e=t(rE(a));this.hasMutatedConstraints=!!e,e&&(a=nE(e))}return a}startAnimation(e){let{drag:t,dragMomentum:n,dragElastic:r,dragTransition:i,dragSnapToOrigin:a,onDragTransitionEnd:o}=this.getProps(),s=this.constraints||{},c=VD(o=>{if(!fO(o,t,this.currentDirection))return;let c=s&&s[o]||{};a&&(c={min:0,max:0});let l=r?200:1e6,u=r?40:1e7,d={type:`inertia`,velocity:n?e[o]:0,bounceStiffness:l,bounceDamping:u,timeConstant:750,restDelta:1,restSpeed:10,...i,...c};return this.startAxisValueAnimation(o,d)});return Promise.all(c).then(o)}startAxisValueAnimation(e,t){let n=this.getAxisMotionValue(e);return KE(this.visualElement,e),n.start(nD(e,n,0,t,this.visualElement,!1))}stopAnimation(){VD(e=>this.getAxisMotionValue(e).stop())}pauseAnimation(){VD(e=>this.getAxisMotionValue(e).animation?.pause())}getAnimationState(e){return this.getAxisMotionValue(e).animation?.state}getAxisMotionValue(e){let t=`_drag${e.toUpperCase()}`,n=this.visualElement.getProps();return n[t]||this.visualElement.getValue(e,(n.initial?n.initial[e]:void 0)||0)}snapToCursor(e){VD(t=>{let{drag:n}=this.getProps();if(!fO(t,n,this.currentDirection))return;let{projection:r}=this.visualElement,i=this.getAxisMotionValue(t);if(r&&r.layout){let{min:n,max:a}=r.layout.layoutBox[t],o=i.get()||0;i.set(e[t]-Z(n,a,.5)+o)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;let{drag:e,dragConstraints:t}=this.getProps(),{projection:n}=this.visualElement;if(!qT(t)||!n||!this.constraints)return;this.stopAnimation();let r={x:0,y:0};VD(e=>{let t=this.getAxisMotionValue(e);if(t&&this.constraints!==!1){let n=t.get();r[e]=iO({min:n,max:n},this.constraints[e])}});let{transformTemplate:i}=this.visualElement.getProps();this.visualElement.current.style.transform=i?i({},``):`none`,n.root&&n.root.updateScroll(),n.updateLayout(),this.resolveConstraints(),VD(t=>{if(!fO(t,e,null))return;let n=this.getAxisMotionValue(t),{min:i,max:a}=this.constraints[t];n.set(Z(i,a,r[t]))})}addListeners(){if(!this.visualElement.current)return;uO.set(this.visualElement,this);let e=this.visualElement.current,t=ED(e,`pointerdown`,e=>{let{drag:t,dragListener:n=!0}=this.getProps();t&&n&&!fw(e.target)&&this.start(e)}),n=()=>{let{dragConstraints:e}=this.getProps();qT(e)&&e.current&&(this.constraints=this.resolveRefConstraints())},{projection:r}=this.visualElement,i=r.addEventListener(`measure`,n);r&&!r.layout&&(r.root&&r.root.updateScroll(),r.updateLayout()),J.read(n);let a=CD(window,`resize`,()=>this.scalePositionWithinConstraints()),o=r.addEventListener(`didUpdate`,(({delta:e,hasLayoutChanged:t})=>{this.isDragging&&t&&(VD(t=>{let n=this.getAxisMotionValue(t);n&&(this.originPoint[t]+=e[t].translate,n.set(n.get()+e[t].translate))}),this.visualElement.render())}));return()=>{a(),t(),i(),o&&o()}}getProps(){let e=this.visualElement.getProps(),{drag:t=!1,dragDirectionLock:n=!1,dragPropagation:r=!1,dragConstraints:i=!1,dragElastic:a=oO,dragMomentum:o=!0}=e;return{...e,drag:t,dragDirectionLock:n,dragPropagation:r,dragConstraints:i,dragElastic:a,dragMomentum:o}}};function fO(e,t,n){return(t===!0||t===e)&&(n===null||n===e)}function pO(e,t=10){let n=null;return Math.abs(e.y)>t?n=`y`:Math.abs(e.x)>t&&(n=`x`),n}var mO=class extends yD{constructor(e){super(e),this.removeGroupControls=Zy,this.removeListeners=Zy,this.controls=new dO(e)}mount(){let{dragControls:e}=this.node.getProps();e&&(this.removeGroupControls=e.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||Zy}update(){let{dragControls:e}=this.node.getProps(),{dragControls:t}=this.node.prevProps||{};e!==t&&(this.removeGroupControls(),e&&(this.removeGroupControls=e.subscribe(this.controls)))}unmount(){this.removeGroupControls(),this.removeListeners()}},hO=e=>(t,n)=>{e&&J.postRender(()=>e(t,n))},gO=class extends yD{constructor(){super(...arguments),this.removePointerDownListener=Zy}onPointerDown(e){this.session=new KD(e,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:HD(this.node)})}createPanHandlers(){let{onPanSessionStart:e,onPanStart:t,onPan:n,onPanEnd:r}=this.node.getProps();return{onSessionStart:hO(e),onStart:hO(t),onMove:n,onEnd:(e,t)=>{delete this.session,r&&J.postRender(()=>r(e,t))}}}mount(){this.removePointerDownListener=ED(this.node.current,`pointerdown`,e=>this.onPointerDown(e))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}},_O={hasAnimatedSinceResize:!0,hasEverUpdated:!1},vO=!1,yO=class extends t.Component{componentDidMount(){let{visualElement:e,layoutGroup:t,switchLayoutGroup:n,layoutId:r}=this.props,{projection:i}=e;i&&(t.group&&t.group.add(i),n&&n.register&&r&&n.register(i),vO&&i.root.didUpdate(),i.addEventListener(`animationComplete`,()=>{this.safeToRemove()}),i.setOptions({...i.options,onExitComplete:()=>this.safeToRemove()})),_O.hasEverUpdated=!0}getSnapshotBeforeUpdate(e){let{layoutDependency:t,visualElement:n,drag:r,isPresent:i}=this.props,{projection:a}=n;return a?(a.isPresent=i,vO=!0,r||e.layoutDependency!==t||t===void 0||e.isPresent!==i?a.willUpdate():this.safeToRemove(),e.isPresent!==i&&(i?a.promote():a.relegate()||J.postRender(()=>{let e=a.getStack();(!e||!e.members.length)&&this.safeToRemove()})),null):null}componentDidUpdate(){let{projection:e}=this.props.visualElement;e&&(e.root.didUpdate(),tw.postRender(()=>{!e.currentAnimation&&e.isLead()&&this.safeToRemove()}))}componentWillUnmount(){let{visualElement:e,layoutGroup:t,switchLayoutGroup:n}=this.props,{projection:r}=e;vO=!0,r&&(r.scheduleCheckAfterUnmount(),t&&t.group&&t.group.remove(r),n&&n.deregister&&n.deregister(r))}safeToRemove(){let{safeToRemove:e}=this.props;e&&e()}render(){return null}};function bO(e){let[n,i]=Mw(),a=(0,t.useContext)(Fy);return(0,r.jsx)(yO,{...e,layoutGroup:a,switchLayoutGroup:(0,t.useContext)(KT),isPresent:n,safeToRemove:i})}function xO(e,t,n){let r=xw(e)?e:ew(e);return r.start(nD(``,r,t,n)),r.animation}var SO=(e,t)=>e.depth-t.depth,CO=class{constructor(){this.children=[],this.isDirty=!1}add(e){By(this.children,e),this.isDirty=!0}remove(e){Vy(this.children,e),this.isDirty=!0}forEach(e){this.isDirty&&this.children.sort(SO),this.isDirty=!1,this.children.forEach(e)}};function wO(e,t){let n=zb.now(),r=({timestamp:i})=>{let a=i-n;a>=t&&(Pb(r),e(a-t))};return J.setup(r,!0),()=>Pb(r)}var TO=[`TopLeft`,`TopRight`,`BottomLeft`,`BottomRight`],EO=TO.length,DO=e=>typeof e==`string`?parseFloat(e):e,OO=e=>typeof e==`number`||Y.test(e);function kO(e,t,n,r,i,a){i?(e.opacity=Z(0,n.opacity??1,jO(r)),e.opacityExit=Z(t.opacity??1,0,MO(r))):a&&(e.opacity=Z(t.opacity??1,n.opacity??1,r));for(let i=0;i<EO;i++){let a=`border${TO[i]}Radius`,o=AO(t,a),s=AO(n,a);o===void 0&&s===void 0||(o||=0,s||=0,o===0||s===0||OO(o)===OO(s)?(e[a]=Math.max(Z(DO(o),DO(s),r),0),(lx.test(s)||lx.test(o))&&(e[a]+=`%`)):e[a]=s)}(t.rotate||n.rotate)&&(e.rotate=Z(t.rotate||0,n.rotate||0,r))}function AO(e,t){return e[t]===void 0?e.borderRadius:e[t]}var jO=NO(0,.5,yb),MO=NO(.5,.95,Zy);function NO(e,t,n){return r=>r<e?0:r>t?1:n(eb(e,t,r))}function PO(e,t){e.min=t.min,e.max=t.max}function FO(e,t){PO(e.x,t.x),PO(e.y,t.y)}function IO(e,t){e.translate=t.translate,e.scale=t.scale,e.originPoint=t.originPoint,e.origin=t.origin}function LO(e,t,n,r,i){return e-=t,e=uE(e,1/n,r),i!==void 0&&(e=uE(e,1/i,r)),e}function RO(e,t=0,n=1,r=.5,i,a=e,o=e){if(lx.test(t)&&(t=parseFloat(t),t=Z(o.min,o.max,t/100)-o.min),typeof t!=`number`)return;let s=Z(a.min,a.max,r);e===a&&(s-=t),e.min=LO(e.min,t,n,s,i),e.max=LO(e.max,t,n,s,i)}function zO(e,t,[n,r,i],a,o){RO(e,t[n],t[r],t[i],t.scale,a,o)}var BO=[`x`,`scaleX`,`originX`],VO=[`y`,`scaleY`,`originY`];function HO(e,t,n,r){zO(e.x,t,BO,n?n.x:void 0,r?r.x:void 0),zO(e.y,t,VO,n?n.y:void 0,r?r.y:void 0)}function UO(e){return e.translate===0&&e.scale===1}function WO(e){return UO(e.x)&&UO(e.y)}function GO(e,t){return e.min===t.min&&e.max===t.max}function KO(e,t){return GO(e.x,t.x)&&GO(e.y,t.y)}function qO(e,t){return Math.round(e.min)===Math.round(t.min)&&Math.round(e.max)===Math.round(t.max)}function JO(e,t){return qO(e.x,t.x)&&qO(e.y,t.y)}function YO(e){return ND(e.x)/ND(e.y)}function XO(e,t){return e.translate===t.translate&&e.scale===t.scale&&e.originPoint===t.originPoint}var ZO=class{constructor(){this.members=[]}add(e){By(this.members,e),e.scheduleRender()}remove(e){if(Vy(this.members,e),e===this.prevLead&&(this.prevLead=void 0),e===this.lead){let e=this.members[this.members.length-1];e&&this.promote(e)}}relegate(e){let t=this.members.findIndex(t=>e===t);if(t===0)return!1;let n;for(let e=t;e>=0;e--){let t=this.members[e];if(t.isPresent!==!1){n=t;break}}return n?(this.promote(n),!0):!1}promote(e,t){let n=this.lead;if(e!==n&&(this.prevLead=n,this.lead=e,e.show(),n)){n.instance&&n.scheduleRender(),e.scheduleRender(),e.resumeFrom=n,t&&(e.resumeFrom.preserveOpacity=!0),n.snapshot&&(e.snapshot=n.snapshot,e.snapshot.latestValues=n.animationValues||n.latestValues),e.root&&e.root.isUpdating&&(e.isLayoutDirty=!0);let{crossfade:r}=e.options;r===!1&&n.hide()}}exitAnimationComplete(){this.members.forEach(e=>{let{options:t,resumingFrom:n}=e;t.onExitComplete&&t.onExitComplete(),n&&n.options.onExitComplete&&n.options.onExitComplete()})}scheduleRender(){this.members.forEach(e=>{e.instance&&e.scheduleRender(!1)})}removeLeadSnapshot(){this.lead&&this.lead.snapshot&&(this.lead.snapshot=void 0)}};function QO(e,t,n){let r=``,i=e.x.translate/t.x,a=e.y.translate/t.y,o=n?.z||0;if((i||a||o)&&(r=`translate3d(${i}px, ${a}px, ${o}px) `),(t.x!==1||t.y!==1)&&(r+=`scale(${1/t.x}, ${1/t.y}) `),n){let{transformPerspective:e,rotate:t,rotateX:i,rotateY:a,skewX:o,skewY:s}=n;e&&(r=`perspective(${e}px) ${r}`),t&&(r+=`rotate(${t}deg) `),i&&(r+=`rotateX(${i}deg) `),a&&(r+=`rotateY(${a}deg) `),o&&(r+=`skewX(${o}deg) `),s&&(r+=`skewY(${s}deg) `)}let s=e.x.scale*t.x,c=e.y.scale*t.y;return(s!==1||c!==1)&&(r+=`scale(${s}, ${c})`),r||`none`}var $O={nodes:0,calculatedTargetDeltas:0,calculatedProjections:0},ek=[``,`X`,`Y`,`Z`],tk=1e3,nk=0;function rk(e,t,n,r){let{latestValues:i}=t;i[e]&&(n[e]=i[e],t.setStaticValue(e,0),r&&(r[e]=0))}function ik(e){if(e.hasCheckedOptimisedAppear=!0,e.root===e)return;let{visualElement:t}=e.options;if(!t)return;let n=qE(t);if(window.MotionHasOptimisedAnimation(n,`transform`)){let{layout:t,layoutId:r}=e.options;window.MotionCancelOptimisedAnimation(n,`transform`,J,!(t||r))}let{parent:r}=e;r&&!r.hasCheckedOptimisedAppear&&ik(r)}function ak({attachResizeListener:e,defaultParent:t,measureScroll:n,checkIsScrollRoot:r,resetTransform:i}){return class{constructor(e={},n=t?.()){this.id=nk++,this.animationId=0,this.animationCommitId=0,this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.isProjectionDirty=!1,this.isSharedProjectionDirty=!1,this.isTransformDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.hasCheckedOptimisedAppear=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.hasTreeAnimated=!1,this.layoutVersion=0,this.updateScheduled=!1,this.scheduleUpdate=()=>this.update(),this.projectionUpdateScheduled=!1,this.checkUpdateFailed=()=>{this.isUpdating&&(this.isUpdating=!1,this.clearAllSnapshots())},this.updateProjection=()=>{this.projectionUpdateScheduled=!1,Ab.value&&($O.nodes=$O.calculatedTargetDeltas=$O.calculatedProjections=0),this.nodes.forEach(ck),this.nodes.forEach(hk),this.nodes.forEach(gk),this.nodes.forEach(lk),Ab.addProjectionMetrics&&Ab.addProjectionMetrics($O)},this.resolvedRelativeTargetAt=0,this.linkedParentVersion=0,this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.latestValues=e,this.root=n?n.root||n:this,this.path=n?[...n.path,n]:[],this.parent=n,this.depth=n?n.depth+1:0;for(let e=0;e<this.path.length;e++)this.path[e].shouldResetTransform=!0;this.root===this&&(this.nodes=new CO)}addEventListener(e,t){return this.eventHandlers.has(e)||this.eventHandlers.set(e,new tb),this.eventHandlers.get(e).add(t)}notifyListeners(e,...t){let n=this.eventHandlers.get(e);n&&n.notify(...t)}hasListeners(e){return this.eventHandlers.has(e)}mount(t){if(this.instance)return;this.isSVG=yw(t)&&!bw(t),this.instance=t;let{layoutId:n,layout:r,visualElement:i}=this.options;if(i&&!i.current&&i.mount(t),this.root.nodes.add(this),this.parent&&this.parent.children.add(this),this.root.hasTreeAnimated&&(r||n)&&(this.isLayoutDirty=!0),e){let n,r=0,i=()=>this.root.updateBlockedByResize=!1;J.read(()=>{r=window.innerWidth}),e(t,()=>{let e=window.innerWidth;e!==r&&(r=e,this.root.updateBlockedByResize=!0,n&&n(),n=wO(i,250),_O.hasAnimatedSinceResize&&(_O.hasAnimatedSinceResize=!1,this.nodes.forEach(mk)))})}n&&this.root.registerSharedNode(n,this),this.options.animate!==!1&&i&&(n||r)&&this.addEventListener(`didUpdate`,({delta:e,hasLayoutChanged:t,hasRelativeLayoutChanged:n,layout:r})=>{if(this.isTreeAnimationBlocked()){this.target=void 0,this.relativeTarget=void 0;return}let a=this.options.transition||i.getDefaultTransition()||Ck,{onLayoutAnimationStart:o,onLayoutAnimationComplete:s}=i.getProps(),c=!this.targetLayout||!JO(this.targetLayout,r),l=!t&&n;if(this.options.layoutRoot||this.resumeFrom||l||t&&(c||!this.currentAnimation)){this.resumeFrom&&(this.resumingFrom=this.resumeFrom,this.resumingFrom.resumingFrom=void 0);let t={...OC(a,`layout`),onPlay:o,onComplete:s};(i.shouldReduceMotion||this.options.layoutRoot)&&(t.delay=0,t.type=!1),this.startAnimation(t),this.setAnimationOrigin(e,l)}else t||mk(this),this.isLead()&&this.options.onExitComplete&&this.options.onExitComplete();this.targetLayout=r})}unmount(){this.options.layoutId&&this.willUpdate(),this.root.nodes.remove(this);let e=this.getStack();e&&e.remove(this),this.parent&&this.parent.children.delete(this),this.instance=void 0,this.eventHandlers.clear(),Pb(this.updateProjection)}blockUpdate(){this.updateManuallyBlocked=!0}unblockUpdate(){this.updateManuallyBlocked=!1}isUpdateBlocked(){return this.updateManuallyBlocked||this.updateBlockedByResize}isTreeAnimationBlocked(){return this.isAnimationBlocked||this.parent&&this.parent.isTreeAnimationBlocked()||!1}startUpdate(){this.isUpdateBlocked()||(this.isUpdating=!0,this.nodes&&this.nodes.forEach(_k),this.animationId++)}getTransformTemplate(){let{visualElement:e}=this.options;return e&&e.getProps().transformTemplate}willUpdate(e=!0){if(this.root.hasTreeAnimated=!0,this.root.isUpdateBlocked()){this.options.onExitComplete&&this.options.onExitComplete();return}if(window.MotionCancelOptimisedAnimation&&!this.hasCheckedOptimisedAppear&&ik(this),!this.root.isUpdating&&this.root.startUpdate(),this.isLayoutDirty)return;this.isLayoutDirty=!0;for(let e=0;e<this.path.length;e++){let t=this.path[e];t.shouldResetTransform=!0,t.updateScroll(`snapshot`),t.options.layoutRoot&&t.willUpdate(!1)}let{layoutId:t,layout:n}=this.options;if(t===void 0&&!n)return;let r=this.getTransformTemplate();this.prevTransformTemplateValue=r?r(this.latestValues,``):void 0,this.updateSnapshot(),e&&this.notifyListeners(`willUpdate`)}update(){if(this.updateScheduled=!1,this.isUpdateBlocked()){this.unblockUpdate(),this.clearAllSnapshots(),this.nodes.forEach(dk);return}if(this.animationId<=this.animationCommitId){this.nodes.forEach(fk);return}this.animationCommitId=this.animationId,this.isUpdating?(this.isUpdating=!1,this.nodes.forEach(pk),this.nodes.forEach(ok),this.nodes.forEach(sk)):this.nodes.forEach(fk),this.clearAllSnapshots();let e=zb.now();Fb.delta=Hy(0,1e3/60,e-Fb.timestamp),Fb.timestamp=e,Fb.isProcessing=!0,Ib.update.process(Fb),Ib.preRender.process(Fb),Ib.render.process(Fb),Fb.isProcessing=!1}didUpdate(){this.updateScheduled||(this.updateScheduled=!0,tw.read(this.scheduleUpdate))}clearAllSnapshots(){this.nodes.forEach(uk),this.sharedNodes.forEach(vk)}scheduleUpdateProjection(){this.projectionUpdateScheduled||(this.projectionUpdateScheduled=!0,J.preRender(this.updateProjection,!1,!0))}scheduleCheckAfterUnmount(){J.postRender(()=>{this.isLayoutDirty?this.root.didUpdate():this.root.checkUpdateFailed()})}updateSnapshot(){this.snapshot||!this.instance||(this.snapshot=this.measure(),this.snapshot&&!ND(this.snapshot.measuredBox.x)&&!ND(this.snapshot.measuredBox.y)&&(this.snapshot=void 0))}updateLayout(){if(!this.instance||(this.updateScroll(),!(this.options.alwaysMeasureLayout&&this.isLead())&&!this.isLayoutDirty))return;if(this.resumeFrom&&!this.resumeFrom.instance)for(let e=0;e<this.path.length;e++)this.path[e].updateScroll();let e=this.layout;this.layout=this.measure(!1),this.layoutVersion++,this.layoutCorrected=$(),this.isLayoutDirty=!1,this.projectionDelta=void 0,this.notifyListeners(`measure`,this.layout.layoutBox);let{visualElement:t}=this.options;t&&t.notify(`LayoutMeasure`,this.layout.layoutBox,e?e.layoutBox:void 0)}updateScroll(e=`measure`){let t=!!(this.options.layoutScroll&&this.instance);if(this.scroll&&this.scroll.animationId===this.root.animationId&&this.scroll.phase===e&&(t=!1),t&&this.instance){let t=r(this.instance);this.scroll={animationId:this.root.animationId,phase:e,isRoot:t,offset:n(this.instance),wasRoot:this.scroll?this.scroll.isRoot:t}}}resetTransform(){if(!i)return;let e=this.isLayoutDirty||this.shouldResetTransform||this.options.alwaysMeasureLayout,t=this.projectionDelta&&!WO(this.projectionDelta),n=this.getTransformTemplate(),r=n?n(this.latestValues,``):void 0,a=r!==this.prevTransformTemplateValue;e&&this.instance&&(t||sE(this.latestValues)||a)&&(i(this.instance,r),this.shouldResetTransform=!1,this.scheduleRender())}measure(e=!0){let t=this.measurePageBox(),n=this.removeElementScroll(t);return e&&(n=this.removeTransform(n)),Dk(n),{animationId:this.root.animationId,measuredBox:t,layoutBox:n,latestValues:{},source:this.id}}measurePageBox(){let{visualElement:e}=this.options;if(!e)return $();let t=e.measureViewportBox();if(!(this.scroll?.wasRoot||this.path.some(kk))){let{scroll:e}=this.root;e&&(_E(t.x,e.offset.x),_E(t.y,e.offset.y))}return t}removeElementScroll(e){let t=$();if(FO(t,e),this.scroll?.wasRoot)return t;for(let n=0;n<this.path.length;n++){let r=this.path[n],{scroll:i,options:a}=r;r!==this.root&&i&&a.layoutScroll&&(i.wasRoot&&FO(t,e),_E(t.x,i.offset.x),_E(t.y,i.offset.y))}return t}applyTransform(e,t=!1){let n=$();FO(n,e);for(let e=0;e<this.path.length;e++){let r=this.path[e];!t&&r.options.layoutScroll&&r.scroll&&r!==r.root&&yE(n,{x:-r.scroll.offset.x,y:-r.scroll.offset.y}),sE(r.latestValues)&&yE(n,r.latestValues)}return sE(this.latestValues)&&yE(n,this.latestValues),n}removeTransform(e){let t=$();FO(t,e);for(let e=0;e<this.path.length;e++){let n=this.path[e];if(!n.instance||!sE(n.latestValues))continue;oE(n.latestValues)&&n.updateSnapshot();let r=$();FO(r,n.measurePageBox()),HO(t,n.latestValues,n.snapshot?n.snapshot.layoutBox:void 0,r)}return sE(this.latestValues)&&HO(t,this.latestValues),t}setTargetDelta(e){this.targetDelta=e,this.root.scheduleUpdateProjection(),this.isProjectionDirty=!0}setOptions(e){this.options={...this.options,...e,crossfade:e.crossfade===void 0?!0:e.crossfade}}clearMeasurements(){this.scroll=void 0,this.layout=void 0,this.snapshot=void 0,this.prevTransformTemplateValue=void 0,this.targetDelta=void 0,this.target=void 0,this.isLayoutDirty=!1}forceRelativeParentToResolveTarget(){this.relativeParent&&this.relativeParent.resolvedRelativeTargetAt!==Fb.timestamp&&this.relativeParent.resolveTargetDelta(!0)}resolveTargetDelta(e=!1){let t=this.getLead();this.isProjectionDirty||=t.isProjectionDirty,this.isTransformDirty||=t.isTransformDirty,this.isSharedProjectionDirty||=t.isSharedProjectionDirty;let n=!!this.resumingFrom||this!==t;if(!(e||n&&this.isSharedProjectionDirty||this.isProjectionDirty||this.parent?.isProjectionDirty||this.attemptToResolveRelativeTarget||this.root.updateBlockedByResize))return;let{layout:r,layoutId:i}=this.options;if(!this.layout||!(r||i))return;this.resolvedRelativeTargetAt=Fb.timestamp;let a=this.getClosestProjectingParent();a&&this.linkedParentVersion!==a.layoutVersion&&!a.options.layoutRoot&&this.removeRelativeTarget(),!this.targetDelta&&!this.relativeTarget&&(a&&a.layout?this.createRelativeTarget(a,this.layout.layoutBox,a.layout.layoutBox):this.removeRelativeTarget()),!(!this.relativeTarget&&!this.targetDelta)&&(this.target||(this.target=$(),this.targetWithTransforms=$()),this.relativeTarget&&this.relativeTargetOrigin&&this.relativeParent&&this.relativeParent.target?(this.forceRelativeParentToResolveTarget(),RD(this.target,this.relativeTarget,this.relativeParent.target)):this.targetDelta?(this.resumingFrom?this.target=this.applyTransform(this.layout.layoutBox):FO(this.target,this.layout.layoutBox),pE(this.target,this.targetDelta)):FO(this.target,this.layout.layoutBox),this.attemptToResolveRelativeTarget&&(this.attemptToResolveRelativeTarget=!1,a&&!!a.resumingFrom==!!this.resumingFrom&&!a.options.layoutScroll&&a.target&&this.animationProgress!==1?this.createRelativeTarget(a,this.target,a.target):this.relativeParent=this.relativeTarget=void 0),Ab.value&&$O.calculatedTargetDeltas++)}getClosestProjectingParent(){if(!(!this.parent||oE(this.parent.latestValues)||cE(this.parent.latestValues)))return this.parent.isProjecting()?this.parent:this.parent.getClosestProjectingParent()}isProjecting(){return!!((this.relativeTarget||this.targetDelta||this.options.layoutRoot)&&this.layout)}createRelativeTarget(e,t,n){this.relativeParent=e,this.linkedParentVersion=e.layoutVersion,this.forceRelativeParentToResolveTarget(),this.relativeTarget=$(),this.relativeTargetOrigin=$(),BD(this.relativeTargetOrigin,t,n),FO(this.relativeTarget,this.relativeTargetOrigin)}removeRelativeTarget(){this.relativeParent=this.relativeTarget=void 0}calcProjection(){let e=this.getLead(),t=!!this.resumingFrom||this!==e,n=!0;if((this.isProjectionDirty||this.parent?.isProjectionDirty)&&(n=!1),t&&(this.isSharedProjectionDirty||this.isTransformDirty)&&(n=!1),this.resolvedRelativeTargetAt===Fb.timestamp&&(n=!1),n)return;let{layout:r,layoutId:i}=this.options;if(this.isTreeAnimating=!!(this.parent&&this.parent.isTreeAnimating||this.currentAnimation||this.pendingAnimation),this.isTreeAnimating||(this.targetDelta=this.relativeTarget=void 0),!this.layout||!(r||i))return;FO(this.layoutCorrected,this.layout.layoutBox);let a=this.treeScale.x,o=this.treeScale.y;gE(this.layoutCorrected,this.treeScale,this.path,t),e.layout&&!e.target&&(this.treeScale.x!==1||this.treeScale.y!==1)&&(e.target=e.layout.layoutBox,e.targetWithTransforms=$());let{target:s}=e;if(!s){this.prevProjectionDelta&&(this.createProjectionDeltas(),this.scheduleRender());return}!this.projectionDelta||!this.prevProjectionDelta?this.createProjectionDeltas():(IO(this.prevProjectionDelta.x,this.projectionDelta.x),IO(this.prevProjectionDelta.y,this.projectionDelta.y)),ID(this.projectionDelta,this.layoutCorrected,s,this.latestValues),(this.treeScale.x!==a||this.treeScale.y!==o||!XO(this.projectionDelta.x,this.prevProjectionDelta.x)||!XO(this.projectionDelta.y,this.prevProjectionDelta.y))&&(this.hasProjected=!0,this.scheduleRender(),this.notifyListeners(`projectionUpdate`,s)),Ab.value&&$O.calculatedProjections++}hide(){this.isVisible=!1}show(){this.isVisible=!0}scheduleRender(e=!0){if(this.options.visualElement?.scheduleRender(),e){let e=this.getStack();e&&e.scheduleRender()}this.resumingFrom&&!this.resumingFrom.instance&&(this.resumingFrom=void 0)}createProjectionDeltas(){this.prevProjectionDelta=CE(),this.projectionDelta=CE(),this.projectionDeltaWithTransform=CE()}setAnimationOrigin(e,t=!1){let n=this.snapshot,r=n?n.latestValues:{},i={...this.latestValues},a=CE();(!this.relativeParent||!this.relativeParent.options.layoutRoot)&&(this.relativeTarget=this.relativeTargetOrigin=void 0),this.attemptToResolveRelativeTarget=!t;let o=$(),s=(n?n.source:void 0)!==(this.layout?this.layout.source:void 0),c=this.getStack(),l=!c||c.members.length<=1,u=!!(s&&!l&&this.options.crossfade===!0&&!this.path.some(Sk));this.animationProgress=0;let d;this.mixTargetDelta=t=>{let n=t/1e3;yk(a.x,e.x,n),yk(a.y,e.y,n),this.setTargetDelta(a),this.relativeTarget&&this.relativeTargetOrigin&&this.layout&&this.relativeParent&&this.relativeParent.layout&&(BD(o,this.layout.layoutBox,this.relativeParent.layout.layoutBox),xk(this.relativeTarget,this.relativeTargetOrigin,o,n),d&&KO(this.relativeTarget,d)&&(this.isProjectionDirty=!1),d||=$(),FO(d,this.relativeTarget)),s&&(this.animationValues=i,kO(i,r,this.latestValues,n,u,l)),this.root.scheduleUpdateProjection(),this.scheduleRender(),this.animationProgress=n},this.mixTargetDelta(this.options.layoutRoot?1e3:0)}startAnimation(e){this.notifyListeners(`animationStart`),this.currentAnimation?.stop(),this.resumingFrom?.currentAnimation?.stop(),this.pendingAnimation&&=(Pb(this.pendingAnimation),void 0),this.pendingAnimation=J.update(()=>{_O.hasAnimatedSinceResize=!0,Bb.layout++,this.motionValue||=ew(0),this.currentAnimation=xO(this.motionValue,[0,1e3],{...e,velocity:0,isSync:!0,onUpdate:t=>{this.mixTargetDelta(t),e.onUpdate&&e.onUpdate(t)},onStop:()=>{Bb.layout--},onComplete:()=>{Bb.layout--,e.onComplete&&e.onComplete(),this.completeAnimation()}}),this.resumingFrom&&(this.resumingFrom.currentAnimation=this.currentAnimation),this.pendingAnimation=void 0})}completeAnimation(){this.resumingFrom&&(this.resumingFrom.currentAnimation=void 0,this.resumingFrom.preserveOpacity=void 0);let e=this.getStack();e&&e.exitAnimationComplete(),this.resumingFrom=this.currentAnimation=this.animationValues=void 0,this.notifyListeners(`animationComplete`)}finishAnimation(){this.currentAnimation&&(this.mixTargetDelta&&this.mixTargetDelta(tk),this.currentAnimation.stop()),this.completeAnimation()}applyTransformsToTarget(){let e=this.getLead(),{targetWithTransforms:t,target:n,layout:r,latestValues:i}=e;if(!(!t||!n||!r)){if(this!==e&&this.layout&&r&&Ok(this.options.animationType,this.layout.layoutBox,r.layoutBox)){n=this.target||$();let t=ND(this.layout.layoutBox.x);n.x.min=e.target.x.min,n.x.max=n.x.min+t;let r=ND(this.layout.layoutBox.y);n.y.min=e.target.y.min,n.y.max=n.y.min+r}FO(t,n),yE(t,i),ID(this.projectionDeltaWithTransform,this.layoutCorrected,t,i)}}registerSharedNode(e,t){this.sharedNodes.has(e)||this.sharedNodes.set(e,new ZO),this.sharedNodes.get(e).add(t);let n=t.options.initialPromotionConfig;t.promote({transition:n?n.transition:void 0,preserveFollowOpacity:n&&n.shouldPreserveFollowOpacity?n.shouldPreserveFollowOpacity(t):void 0})}isLead(){let e=this.getStack();return e?e.lead===this:!0}getLead(){let{layoutId:e}=this.options;return e&&this.getStack()?.lead||this}getPrevLead(){let{layoutId:e}=this.options;return e?this.getStack()?.prevLead:void 0}getStack(){let{layoutId:e}=this.options;if(e)return this.root.sharedNodes.get(e)}promote({needsReset:e,transition:t,preserveFollowOpacity:n}={}){let r=this.getStack();r&&r.promote(this,n),e&&(this.projectionDelta=void 0,this.needsReset=!0),t&&this.setOptions({transition:t})}relegate(){let e=this.getStack();return e?e.relegate(this):!1}resetSkewAndRotation(){let{visualElement:e}=this.options;if(!e)return;let t=!1,{latestValues:n}=e;if((n.z||n.rotate||n.rotateX||n.rotateY||n.rotateZ||n.skewX||n.skewY)&&(t=!0),!t)return;let r={};n.z&&rk(`z`,e,r,this.animationValues);for(let t=0;t<ek.length;t++)rk(`rotate${ek[t]}`,e,r,this.animationValues),rk(`skew${ek[t]}`,e,r,this.animationValues);for(let t in e.render(),r)e.setStaticValue(t,r[t]),this.animationValues&&(this.animationValues[t]=r[t]);e.scheduleRender()}applyProjectionStyles(e,t){if(!this.instance||this.isSVG)return;if(!this.isVisible){e.visibility=`hidden`;return}let n=this.getTransformTemplate();if(this.needsReset){this.needsReset=!1,e.visibility=``,e.opacity=``,e.pointerEvents=PT(t?.pointerEvents)||``,e.transform=n?n(this.latestValues,``):`none`;return}let r=this.getLead();if(!this.projectionDelta||!this.layout||!r.target){this.options.layoutId&&(e.opacity=this.latestValues.opacity===void 0?1:this.latestValues.opacity,e.pointerEvents=PT(t?.pointerEvents)||``),this.hasProjected&&!sE(this.latestValues)&&(e.transform=n?n({},``):`none`,this.hasProjected=!1);return}e.visibility=``;let i=r.animationValues||r.latestValues;this.applyTransformsToTarget();let a=QO(this.projectionDeltaWithTransform,this.treeScale,i);n&&(a=n(i,a)),e.transform=a;let{x:o,y:s}=this.projectionDelta;for(let t in e.transformOrigin=`${o.origin*100}% ${s.origin*100}% 0`,r.animationValues?e.opacity=r===this?i.opacity??this.latestValues.opacity??1:this.preserveOpacity?this.latestValues.opacity:i.opacityExit:e.opacity=r===this?i.opacity===void 0?``:i.opacity:i.opacityExit===void 0?0:i.opacityExit,uT){if(i[t]===void 0)continue;let{correct:n,applyTo:o,isCSSVariable:s}=uT[t],c=a===`none`?i[t]:n(i[t],r);if(o){let t=o.length;for(let n=0;n<t;n++)e[o[n]]=c}else s?this.options.visualElement.renderState.vars[t]=c:e[t]=c}this.options.layoutId&&(e.pointerEvents=r===this?PT(t?.pointerEvents)||``:`none`)}clearSnapshot(){this.resumeFrom=this.snapshot=void 0}resetTree(){this.root.nodes.forEach(e=>e.currentAnimation?.stop()),this.root.nodes.forEach(dk),this.root.sharedNodes.clear()}}}function ok(e){e.updateLayout()}function sk(e){let t=e.resumeFrom?.snapshot||e.snapshot;if(e.isLead()&&e.layout&&t&&e.hasListeners(`didUpdate`)){let{layoutBox:n,measuredBox:r}=e.layout,{animationType:i}=e.options,a=t.source!==e.layout.source;i===`size`?VD(e=>{let r=a?t.measuredBox[e]:t.layoutBox[e],i=ND(r);r.min=n[e].min,r.max=r.min+i}):Ok(i,t.layoutBox,n)&&VD(r=>{let i=a?t.measuredBox[r]:t.layoutBox[r],o=ND(n[r]);i.max=i.min+o,e.relativeTarget&&!e.currentAnimation&&(e.isProjectionDirty=!0,e.relativeTarget[r].max=e.relativeTarget[r].min+o)});let o=CE();ID(o,n,t.layoutBox);let s=CE();a?ID(s,e.applyTransform(r,!0),t.measuredBox):ID(s,n,t.layoutBox);let c=!WO(o),l=!1;if(!e.resumeFrom){let r=e.getClosestProjectingParent();if(r&&!r.resumeFrom){let{snapshot:i,layout:a}=r;if(i&&a){let o=$();BD(o,t.layoutBox,i.layoutBox);let s=$();BD(s,n,a.layoutBox),JO(o,s)||(l=!0),r.options.layoutRoot&&(e.relativeTarget=s,e.relativeTargetOrigin=o,e.relativeParent=r)}}}e.notifyListeners(`didUpdate`,{layout:n,snapshot:t,delta:s,layoutDelta:o,hasLayoutChanged:c,hasRelativeLayoutChanged:l})}else if(e.isLead()){let{onExitComplete:t}=e.options;t&&t()}e.options.transition=void 0}function ck(e){Ab.value&&$O.nodes++,e.parent&&(e.isProjecting()||(e.isProjectionDirty=e.parent.isProjectionDirty),e.isSharedProjectionDirty||=!!(e.isProjectionDirty||e.parent.isProjectionDirty||e.parent.isSharedProjectionDirty),e.isTransformDirty||=e.parent.isTransformDirty)}function lk(e){e.isProjectionDirty=e.isSharedProjectionDirty=e.isTransformDirty=!1}function uk(e){e.clearSnapshot()}function dk(e){e.clearMeasurements()}function fk(e){e.isLayoutDirty=!1}function pk(e){let{visualElement:t}=e.options;t&&t.getProps().onBeforeLayoutMeasure&&t.notify(`BeforeLayoutMeasure`),e.resetTransform()}function mk(e){e.finishAnimation(),e.targetDelta=e.relativeTarget=e.target=void 0,e.isProjectionDirty=!0}function hk(e){e.resolveTargetDelta()}function gk(e){e.calcProjection()}function _k(e){e.resetSkewAndRotation()}function vk(e){e.removeLeadSnapshot()}function yk(e,t,n){e.translate=Z(t.translate,0,n),e.scale=Z(t.scale,1,n),e.origin=t.origin,e.originPoint=t.originPoint}function bk(e,t,n,r){e.min=Z(t.min,n.min,r),e.max=Z(t.max,n.max,r)}function xk(e,t,n,r){bk(e.x,t.x,n.x,r),bk(e.y,t.y,n.y,r)}function Sk(e){return e.animationValues&&e.animationValues.opacityExit!==void 0}var Ck={duration:.45,ease:[.4,0,.1,1]},wk=e=>typeof navigator<`u`&&navigator.userAgent&&navigator.userAgent.toLowerCase().includes(e),Tk=wk(`applewebkit/`)&&!wk(`chrome/`)?Math.round:Zy;function Ek(e){e.min=Tk(e.min),e.max=Tk(e.max)}function Dk(e){Ek(e.x),Ek(e.y)}function Ok(e,t,n){return e===`position`||e===`preserve-aspect`&&!PD(YO(t),YO(n),.2)}function kk(e){return e!==e.root&&e.scroll?.wasRoot}var Ak=ak({attachResizeListener:(e,t)=>CD(e,`resize`,t),measureScroll:()=>({x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}),checkIsScrollRoot:()=>!0}),jk={current:void 0},Mk=ak({measureScroll:e=>({x:e.scrollLeft,y:e.scrollTop}),defaultParent:()=>{if(!jk.current){let e=new Ak({});e.mount(window),e.setOptions({layoutScroll:!0}),jk.current=e}return jk.current},resetTransform:(e,t)=>{e.style.transform=t===void 0?`none`:t},checkIsScrollRoot:e=>window.getComputedStyle(e).position===`fixed`}),Nk={pan:{Feature:gO},drag:{Feature:mO,ProjectionNode:Mk,MeasureLayout:bO}};function Pk(e,t,n){let{props:r}=e;e.animationState&&r.whileHover&&e.animationState.setActive(`whileHover`,n===`Start`);let i=r[`onHover`+n];i&&J.postRender(()=>i(t,wD(t)))}var Fk=class extends yD{mount(){let{current:e}=this.node;e&&(this.unmount=cw(e,(e,t)=>(Pk(this.node,t,`Start`),e=>Pk(this.node,e,`End`))))}unmount(){}},Ik=class extends yD{constructor(){super(...arguments),this.isActive=!1}onFocus(){let e=!1;try{e=this.node.current.matches(`:focus-visible`)}catch{e=!0}!e||!this.node.animationState||(this.node.animationState.setActive(`whileFocus`,!0),this.isActive=!0)}onBlur(){!this.isActive||!this.node.animationState||(this.node.animationState.setActive(`whileFocus`,!1),this.isActive=!1)}mount(){this.unmount=$y(CD(this.node.current,`focus`,()=>this.onFocus()),CD(this.node.current,`blur`,()=>this.onBlur()))}unmount(){}};function Lk(e,t,n){let{props:r}=e;if(e.current instanceof HTMLButtonElement&&e.current.disabled)return;e.animationState&&r.whileTap&&e.animationState.setActive(`whileTap`,n===`Start`);let i=r[`onTap`+(n===`End`?``:n)];i&&J.postRender(()=>i(t,wD(t)))}var Rk=class extends yD{mount(){let{current:e}=this.node;e&&(this.unmount=vw(e,(e,t)=>(Lk(this.node,t,`Start`),(e,{success:t})=>Lk(this.node,e,t?`End`:`Cancel`)),{useGlobalTarget:this.node.props.globalTapTarget}))}unmount(){}},zk=new WeakMap,Bk=new WeakMap,Vk=e=>{let t=zk.get(e.target);t&&t(e)},Hk=e=>{e.forEach(Vk)};function Uk({root:e,...t}){let n=e||document;Bk.has(n)||Bk.set(n,{});let r=Bk.get(n),i=JSON.stringify(t);return r[i]||(r[i]=new IntersectionObserver(Hk,{root:e,...t})),r[i]}function Wk(e,t,n){let r=Uk(t);return zk.set(e,n),r.observe(e),()=>{zk.delete(e),r.unobserve(e)}}var Gk={some:0,all:1},Kk=class extends yD{constructor(){super(...arguments),this.hasEnteredView=!1,this.isInView=!1}startObserver(){this.unmount();let{viewport:e={}}=this.node.getProps(),{root:t,margin:n,amount:r=`some`,once:i}=e,a={root:t?t.current:void 0,rootMargin:n,threshold:typeof r==`number`?r:Gk[r]};return Wk(this.node.current,a,e=>{let{isIntersecting:t}=e;if(this.isInView===t||(this.isInView=t,i&&!t&&this.hasEnteredView))return;t&&(this.hasEnteredView=!0),this.node.animationState&&this.node.animationState.setActive(`whileInView`,t);let{onViewportEnter:n,onViewportLeave:r}=this.node.getProps(),a=t?n:r;a&&a(e)})}mount(){this.startObserver()}update(){if(typeof IntersectionObserver>`u`)return;let{props:e,prevProps:t}=this.node;[`amount`,`margin`,`root`].some(qk(e,t))&&this.startObserver()}unmount(){}};function qk({viewport:e={}},{viewport:t={}}={}){return n=>e[n]!==t[n]}var Jk={inView:{Feature:Kk},tap:{Feature:Rk},focus:{Feature:Ik},hover:{Feature:Fk}},Yk={layout:{ProjectionNode:Mk,MeasureLayout:bO}},Xk=tE({...SD,...Jk,...Nk,...Yk},zE),Zk=(e,t)=>{if(e.id===t.id)return!1;let n=.1;return e.x>=t.x-n&&e.x+e.width<=t.x+t.width+n&&e.y>=t.y-n&&e.y+e.height<=t.y+t.height+n},Qk=(e,t,n,r,i=1.2)=>{if(!e)return 0;let a=document.createElement(`canvas`).getContext(`2d`);if(!a)return 0;a.font=`${r}px ${n}`;let o=e.split(` `),s=``,c=1;for(let e=0;e<o.length;e++){let n=s+o[e]+` `;a.measureText(n).width>t&&e>0?(s=o[e]+` `,c++):s=n}let l=e.split(`
-`).length-1;return c+=l,Math.ceil(c*r*i)};let $k=(e,t)=>{let n=e.map(e=>({...e})),r=new Map(e.map(e=>[e.id,e])),i=[];n.forEach(e=>{let a=e.type===`text`,o=e.type===`text-container`;if((a||o)&&e.autoGrow){let a=e.content;t&&(a=a.replace(/\{\{(.*?)\}\}/g,(n,r)=>{let i=t[r.trim()];return i==null?n:e.formatting?Bv(i,e.formatting):String(i)}));let s=parseInt(String(e.style?.fontSize||16)),c=String(e.style?.fontFamily||`Arial`);if(o&&e.containerExpansion===`horizontal`){let t=document.createElement(`canvas`).getContext(`2d`);if(t){t.font=`${s}px ${c}`;let n=t.measureText(a),r=Math.ceil(n.width+parseInt(String(e.style?.padding||0))*2);r>e.width&&(e.width=r,e.content=a)}}else{let t=Qk(a,e.width,c,s),o=e.height,l=t-o;if(l>0){e.height=t,e.content=a;let s=[],c=r.get(e.id);c&&n.forEach(t=>{if(t.id===e.id)return;let n=r.get(t.id);n&&Zk(c,n)&&s.push(t)});let u=new Set([e.id]);s.forEach(e=>{e.height+=l,u.add(e.id)}),i.push({triggerY:e.y+o,delta:l,ignoreIds:u})}}}}),n.forEach(e=>{let t=r.get(e.id);if(!t)return;let n=0;i.forEach(r=>{r.ignoreIds.has(e.id)||t.y>=r.triggerY-.1&&(n+=r.delta)}),e.y+=n});let a=0;return n.forEach(e=>{let t=e.y+e.height;t>a&&(a=t)}),{elements:n,totalHeight:a}};var eA=e=>{if(!e||e.type===`none`)return{initial:{opacity:0,y:20,scale:.95},animate:{opacity:1,y:0,scale:1}};let t={initial:{},animate:{}};switch(e.type){case`fadeIn`:t.initial={opacity:0},t.animate={opacity:1};break;case`slideInLeft`:t.initial={opacity:0,x:-100},t.animate={opacity:1,x:0};break;case`slideInRight`:t.initial={opacity:0,x:100},t.animate={opacity:1,x:0};break;case`slideInUp`:t.initial={opacity:0,y:100},t.animate={opacity:1,y:0};break;case`slideInDown`:t.initial={opacity:0,y:-100},t.animate={opacity:1,y:0};break;case`zoomIn`:t.initial={opacity:0,scale:.5},t.animate={opacity:1,scale:1};break;case`bounceIn`:t.initial={opacity:0,scale:.3},t.animate={opacity:1,scale:1,transition:{type:`spring`,bounce:.6}};break;case`pulse`:t.animate={scale:[1,1.05,1],transition:{repeat:1/0}};break;default:t.initial={opacity:0,y:20},t.animate={opacity:1,y:0}}return t},tA=({element:e,offsetY:t=0,dataContext:n})=>{let i=e.content;if(n){if(e.type===`text`||e.type===`text-container`)i=i.replace(/\{\{(.*?)\}\}/g,(e,t)=>{let r=n[t.trim()];return r==null?e:String(r)});else if(e.type===`image`)if(e.dataBinding){let t=n[e.dataBinding];t!=null&&(i=String(t))}else i=i.replace(/\{\{(.*?)\}\}/g,(e,t)=>{let r=n[t.trim()];return r==null?e:String(r)})}return(0,r.jsxs)(H,{style:{position:`absolute`,left:0,top:0,width:e.type===`text-container`&&e.autoGrow&&e.containerExpansion===`horizontal`?`max-content`:`${e.width}px`,height:e.autoGrow?`auto`:`${e.height}px`,transform:`translate(${e.x}px, ${e.y+t}px) rotate(${e.rotation||0}deg)`,padding:e.type===`image`||e.type===`text`||e.type===`text-container`?0:`8px`,overflow:e.autoGrow?`visible`:`hidden`,whiteSpace:e.type===`text-container`&&e.autoGrow&&e.containerExpansion===`horizontal`?`nowrap`:e.autoGrow?`pre-wrap`:void 0,wordBreak:e.autoGrow?`break-word`:void 0,...e.style},children:[(e.type===`text`||e.type===`text-container`)&&(0,r.jsx)(V,{style:{width:`100%`,height:`100%`,display:`block`},children:i}),e.type===`image`&&(i?(0,r.jsx)(`img`,{src:i,alt:`Element`,style:{width:`100%`,height:`100%`,objectFit:e.style?.objectFit||`cover`,display:`block`}}):(0,r.jsx)(H,{style:{width:`100%`,height:`100%`,backgroundColor:`#eee`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:(0,r.jsx)(V,{size:`1`,children:`Imagem`})})),e.type===`box`&&(0,r.jsx)(H,{style:{width:`100%`,height:`100%`}})]})},nA=({item:e,elements:n,animation:i})=>{let{elements:a,totalHeight:o}=t.default.useMemo(()=>$k(n,e),[n,e]),s=t.default.useMemo(()=>eA(i),[i]);return(0,r.jsx)(Xk.div,{layout:!0,initial:s.initial,animate:s.animate,exit:{opacity:0,scale:.9},transition:{duration:i?.duration||.4,ease:i?.timingFunction||`easeOut`},whileHover:{scale:1.02,transition:{duration:.2}},style:{position:`relative`,height:o,width:`100%`,marginBottom:`20px`,transformOrigin:`center center`},children:a.map(t=>(0,r.jsx)(tA,{element:t,offsetY:0,dataContext:e},t.id))})};let rA=()=>{let{state:e}=_v(),[n,i]=t.default.useState(!1),[a,o]=t.default.useState([]);return t.default.useEffect(()=>{let t;return n&&e.isList?(a.length===0&&o([{id:Date.now(),...e.mockData[0]||{}}]),t=setInterval(()=>{o(t=>{let n=t.length%(e.mockData.length||1),r={...e.mockData.length>0?e.mockData[n]:{id:t.length},id:`${Date.now()}-${t.length}`};return e.listSettings.newestPosition===`top`?[r,...t].slice(0,20):[...t,r].slice(-20)})},1500)):o([]),()=>clearInterval(t)},[n,e.isList,e.listSettings.newestPosition,e.mockData]),(0,r.jsxs)(H,{style:{width:`100%`,height:`100%`,position:`relative`,overflow:`hidden`,backgroundColor:`var(--color-panel-solid)`},children:[e.isList&&(0,r.jsx)(H,{style:{position:`absolute`,bottom:10,right:10,zIndex:100,backgroundColor:`var(--color-surface)`,padding:`4px`,borderRadius:`var(--radius-3)`,boxShadow:`0 2px 10px rgba(0,0,0,0.1)`},children:(0,r.jsxs)(W,{size:`1`,variant:n?`soft`:`solid`,color:n?`red`:`green`,onClick:()=>i(!n),children:[n?(0,r.jsx)(Oe,{}):(0,r.jsx)(ve,{}),n?`Parar Simulação`:`Simular Entrada`]})}),(0,r.jsx)(Nh,{type:`auto`,scrollbars:`vertical`,style:{height:`100%`,width:`100%`},children:(0,r.jsx)(H,{style:{position:`relative`,minHeight:`100%`,width:`100%`},children:(()=>{if(e.elements.length===0)return(0,r.jsx)(U,{align:`center`,justify:`center`,style:{height:`100%`},children:(0,r.jsx)(V,{color:`gray`,children:`Preview vazio`})});if(e.isList){let t=[];if(n)t=a;else{if(t=e.mockData.length>0?e.mockData:Array.from({length:10}).map((e,t)=>({id:t})),e.listSettings.sortProp){let n=e.listSettings.sortProp,r=e.listSettings.sortOrder===`asc`?1:-1;t=[...t].sort((e,t)=>{let i=e[n],a=t[n];return i<a?-1*r:i>a?1*r:0})}e.listSettings.newestPosition===`top`&&(t=[...t].reverse())}return(0,r.jsx)(U,{direction:`column`,justify:e.listSettings.newestPosition===`top`?`start`:`end`,p:`4`,style:{width:`100%`,minHeight:`100%`},children:(0,r.jsx)(Fw,{mode:`popLayout`,initial:!1,children:t.map((t,n)=>(0,r.jsx)(nA,{item:t,elements:e.elements,animation:e.listSettings.entryAnimation},t.id||n))})})}return e.elements.map(t=>(0,r.jsx)(tA,{element:t,dataContext:e.singleMockData},t.id))})()})})]})};var iA=({onOpenSettings:e})=>{let{state:n,selectElement:i,renameElement:a,addToGroup:o,removeFromGroup:s,groupElements:c}=_v(),[l,u]=(0,t.useState)({}),[d,f]=(0,t.useState)(!1),[p,m]=(0,t.useState)(null),[h,g]=(0,t.useState)(``),_=n.elements.filter(e=>e.type===`group`),v=new Map;_.forEach(e=>{v.set(e.id,n.elements.filter(t=>t.groupId===e.id))});let y=n.elements.filter(e=>e.type!==`group`&&!e.groupId),b=e=>{u(t=>({...t,[e]:!t[e]}))},x=(t,a=0)=>(0,r.jsx)(H,{style:{borderRadius:6,backgroundColor:n.selectedElementIds.includes(t.id)?`var(--gray-5)`:`var(--gray-3)`,border:n.selectedElementIds.includes(t.id)?`1px solid var(--gray-8)`:`1px solid var(--gray-5)`,cursor:`pointer`,overflow:`hidden`,padding:`6px 8px`,paddingLeft:`${8+a*16}px`},draggable:!0,onDragStart:e=>{e.dataTransfer.setData(`application/x-editor-element`,t.id),e.dataTransfer.effectAllowed=`move`},onDragOver:e=>{e.preventDefault()},onDrop:e=>{let r=e.dataTransfer.getData(`application/x-editor-element`);if(!(!r||r===t.id))if(t.type===`group`)o(r,t.id);else{let e=n.elements.find(e=>e.id===r);if(!e)return;let i=t;!e.groupId&&!i.groupId?c([r,i.id]):!i.groupId&&e.groupId?o(i.id,e.groupId):!e.groupId&&i.groupId&&o(r,i.groupId)}},onClick:n=>{i(t.id,n.shiftKey),e&&e(t.id)},children:(0,r.jsxs)(U,{gap:`2`,align:`center`,style:{width:`100%`,overflow:`hidden`},children:[t.type===`text`&&(0,r.jsx)(Ae,{}),t.type===`image`&&(0,r.jsx)(ge,{}),t.type===`box`&&(0,r.jsx)(A,{}),(0,r.jsx)(V,{truncate:!0,style:{flex:1,textAlign:`left`},children:t.name||(t.type===`text`?t.content.length>20?t.content.substring(0,20)+`...`:t.content:t.type===`image`?`Imagem`:`Container`)}),t.type===`group`&&(0,r.jsx)(W,{variant:`ghost`,color:`gray`,size:`1`,onClick:e=>{e.stopPropagation(),m(t.id),g(t.name||`Grupo`),f(!0)},children:`Renomear`})]})},t.id);return(0,r.jsxs)(U,{direction:`column`,gap:`2`,children:[y.map(e=>x(e,0)),_.map(t=>{let n=l[t.id]===!0,a=v.get(t.id)||[];return(0,r.jsxs)(H,{style:{border:`1px dashed var(--gray-6)`,borderRadius:6,backgroundColor:`var(--gray-3)`},children:[(0,r.jsx)(U,{align:`center`,justify:`between`,style:{padding:`6px 8px`,cursor:`pointer`},onClick:()=>{i(t.id),e&&e(t.id)},onDoubleClick:()=>b(t.id),onDragOver:e=>{e.preventDefault()},onDrop:e=>{let n=e.dataTransfer.getData(`application/x-editor-element`);n&&n!==t.id&&o(n,t.id)},children:(0,r.jsxs)(U,{align:`center`,gap:`2`,children:[(0,r.jsx)(A,{}),(0,r.jsx)(V,{style:{fontWeight:600},children:t.name||`Grupo`}),(0,r.jsx)(Em,{variant:`soft`,color:`blue`,size:`1`,children:a.length})]})}),!n&&(0,r.jsxs)(U,{direction:`column`,gap:`2`,style:{padding:`6px 8px`},children:[a.map(e=>x(e,1)),a.length===0&&(0,r.jsx)(V,{size:`1`,color:`gray`,children:`Solte elementos aqui para agrupar`})]})]},t.id)}),(0,r.jsx)(H,{style:{marginTop:8,padding:`6px 8px`,border:`1px dashed var(--gray-6)`,borderRadius:6},onDragOver:e=>{e.preventDefault()},onDrop:e=>{let t=e.dataTransfer.getData(`application/x-editor-element`);t&&s(t)},children:(0,r.jsx)(V,{size:`1`,color:`gray`,children:`Soltar aqui para remover do grupo`})}),(0,r.jsx)(zh,{open:d,onOpenChange:f,children:(0,r.jsxs)(Vh,{style:{maxWidth:420},children:[(0,r.jsx)(Hh,{children:`Renomear Grupo`}),(0,r.jsxs)(U,{direction:`column`,gap:`3`,children:[(0,r.jsx)(G,{value:h,onChange:e=>g(e.target.value),placeholder:`Nome do grupo...`}),(0,r.jsxs)(U,{gap:`3`,justify:`end`,children:[(0,r.jsx)(Wh,{children:(0,r.jsx)(W,{variant:`soft`,color:`gray`,children:`Cancelar`})}),(0,r.jsx)(W,{onClick:()=>{p&&a(p,h),f(!1)},children:`Salvar`})]})]})]})})]})},aA=({layout:e,initialState:n,onSave:i,theme:a=`light`})=>{let[o,s]=(0,t.useState)(!0),[c,l]=(0,t.useState)(!0),[u,d]=(0,t.useState)(null),[f,p]=(0,t.useState)(!1),{addElement:m,loadState:h,state:g,undo:_,redo:v,copy:y,paste:b,removeSelected:x,updateElements:S}=_v(),C=t.default.useRef(null),w=()=>{let e={elements:g.elements,isList:g.isList,mockData:g.mockData,singleMockData:g.singleMockData,listSettings:g.listSettings,canvasHeight:g.canvasHeight,gridSize:g.gridSize},t=JSON.stringify(e,null,2),n=new Blob([t],{type:`application/json`}),r=URL.createObjectURL(n),i=document.createElement(`a`);i.href=r,i.download=`layout-${new Date().toISOString().slice(0,10)}.json`,document.body.appendChild(i),i.click(),document.body.removeChild(i),URL.revokeObjectURL(r)},T=()=>{C.current?.click()},E=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{try{let t=e.target?.result;h(JSON.parse(t))}catch(e){console.error(`Failed to import layout`,e),alert(`Erro ao importar layout. Arquivo inválido.`)}},n.readAsText(t),e.target.value=``};t.default.useEffect(()=>{let e=e=>{if(document.activeElement?.tagName===`INPUT`||document.activeElement?.tagName===`TEXTAREA`||document.activeElement?.isContentEditable)return;let t=e.clipboardData?.items;if(t){for(let n=0;n<t.length;n++)if(t[n].type.indexOf(`image`)!==-1){e.preventDefault();let r=t[n].getAsFile();if(r){let e=new FileReader;e.onload=e=>{let t=e.target?.result;m({type:`image`,content:t,width:200,height:200})},e.readAsDataURL(r)}}}};return window.addEventListener(`paste`,e),()=>window.removeEventListener(`paste`,e)},[m]),t.default.useEffect(()=>{let e=e=>{if(!(document.activeElement?.tagName===`INPUT`||document.activeElement?.tagName===`TEXTAREA`||document.activeElement?.isContentEditable)){if((e.ctrlKey||e.metaKey)&&e.key===`z`)e.shiftKey?(e.preventDefault(),v()):(e.preventDefault(),_());else if((e.ctrlKey||e.metaKey)&&e.key===`y`)e.preventDefault(),v();else if((e.ctrlKey||e.metaKey)&&e.key===`c`)e.preventDefault(),y();else if((e.ctrlKey||e.metaKey)&&e.key===`v`)e.preventDefault(),b();else if(e.key===`Delete`||e.key===`Backspace`)g.selectedElementIds.length>0&&(e.preventDefault(),x());else if([`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`].includes(e.key)&&g.selectedElementIds.length>0){e.preventDefault();let t=e.shiftKey?10:1,n=[];g.selectedElementIds.forEach(r=>{let i=g.elements.find(e=>e.id===r);if(i){let a={};e.key===`ArrowUp`&&(a.y=i.y-t),e.key===`ArrowDown`&&(a.y=i.y+t),e.key===`ArrowLeft`&&(a.x=i.x-t),e.key===`ArrowRight`&&(a.x=i.x+t),n.push({id:r,changes:a})}}),n.length>0&&S(n)}}};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[_,v,y,b,x,g.selectedElementIds,g.elements,S]),t.default.useEffect(()=>{if(n)try{let e=typeof n==`string`?JSON.parse(n):n;Array.isArray(e)?h({elements:e}):e.elements&&h(e)}catch(e){console.error(`Failed to load initial state`,e)}},[n,h]);let D=e=>{console.log(`Adding element of type: ${e}`),m({type:e,content:`New ${e}`})};return(0,r.jsxs)(_m,{appearance:a,accentColor:`blue`,grayColor:`slate`,radius:`medium`,scaling:`100%`,children:[(0,r.jsxs)(U,{direction:`row`,style:{height:`100vh`,width:`100%`,overflow:`hidden`,backgroundColor:`var(--color-background)`},children:[c&&(0,r.jsxs)(U,{direction:`column`,width:`280px`,style:{borderRight:`1px solid var(--gray-5)`,backgroundColor:`var(--gray-2)`,flexShrink:0,height:`100%`},children:[(0,r.jsx)(H,{p:`4`,style:{borderBottom:`1px solid var(--gray-5)`,backgroundColor:`var(--gray-2)`},children:(0,r.jsx)(U,{direction:`column`,gap:`3`,children:(0,r.jsxs)(H,{children:[(0,r.jsx)(V,{size:`2`,weight:`bold`,mb:`2`,as:`div`,children:`Editor`}),(0,r.jsxs)(Kh,{children:[(0,r.jsx)(qh,{children:(0,r.jsx)(W,{variant:`solid`,color:`green`,size:`3`,style:{width:`100%`,cursor:`pointer`,justifyContent:`center`,marginBottom:`8px`},children:`Adicionar Novo +`})}),(0,r.jsxs)(Yh,{style:{width:`240px`},children:[(0,r.jsx)(Zh,{onSelect:()=>D(`text`),children:`Texto`}),(0,r.jsx)(Zh,{onSelect:()=>D(`image`),children:`Imagem`}),(0,r.jsx)(Zh,{onSelect:()=>D(`box`),children:`Caixa (Container)`}),(0,r.jsx)(Zh,{onSelect:()=>D(`text-container`),children:`Container com Texto`})]})]}),(0,r.jsxs)(W,{variant:`soft`,color:`blue`,style:{width:`100%`,justifyContent:`center`,cursor:`pointer`},onClick:()=>{if(i){let e={elements:g.elements,isList:g.isList,mockData:g.mockData,singleMockData:g.singleMockData,listSettings:g.listSettings,canvasHeight:g.canvasHeight};i(JSON.stringify(e,null,2))}},children:[(0,r.jsx)(Se,{}),` Salvar Alterações`]}),(0,r.jsxs)(U,{gap:`2`,mt:`2`,children:[(0,r.jsxs)(W,{variant:`soft`,color:`gray`,style:{flex:1,cursor:`pointer`,justifyContent:`center`},onClick:w,children:[(0,r.jsx)(N,{}),` Exportar`]}),(0,r.jsxs)(W,{variant:`soft`,color:`gray`,style:{flex:1,cursor:`pointer`,justifyContent:`center`},onClick:T,children:[(0,r.jsx)(Pe,{}),` Importar`]})]}),(0,r.jsx)(`input`,{type:`file`,ref:C,style:{display:`none`},accept:`.json`,onChange:E}),(0,r.jsx)(H,{mt:`2`,children:(0,r.jsx)(Py,{})})]})})}),(0,r.jsx)(Nh,{type:`auto`,scrollbars:`vertical`,style:{flex:1},children:(0,r.jsxs)(U,{direction:`column`,gap:`4`,p:`4`,children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(V,{size:`2`,weight:`bold`,mb:`2`,as:`div`,children:`Elementos`}),(0,r.jsx)(iA,{onOpenSettings:e=>{d(e),p(!0)}})]}),(0,r.jsx)(vg,{size:`4`}),(0,r.jsxs)(H,{children:[(0,r.jsx)(V,{size:`2`,weight:`bold`,mb:`2`,as:`div`,children:`Variáveis Disponíveis`}),(0,r.jsx)(V,{size:`1`,color:`gray`,mb:`2`,as:`div`,children:`Clique para copiar ou arraste`}),(0,r.jsxs)(U,{direction:`column`,gap:`2`,children:[e.props.map((e,t)=>(0,r.jsxs)(Em,{color:`blue`,variant:`soft`,size:`2`,style:{padding:`8px`,justifyContent:`flex-start`,cursor:`grab`},title:`Clique para copiar {{${e.dataName}}}`,draggable:!0,onDragStart:t=>{t.dataTransfer.setData(`application/x-editor-prop`,e.dataName),t.dataTransfer.effectAllowed=`copy`},onClick:()=>{let t=`{{${e.dataName}}}`;navigator.clipboard.writeText(t)},children:[e.name,(0,r.jsx)(V,{color:`gray`,style:{marginLeft:`auto`,fontSize:`10px`},children:`{{${e.dataName}}}`})]},t)),e.props.length===0&&(0,r.jsx)(V,{size:`1`,color:`gray`,style:{fontStyle:`italic`},children:`Nenhuma variável configurada.`})]})]})]})})]}),(0,r.jsxs)(H,{style:{flex:1,position:`relative`,height:`100%`},children:[(0,r.jsx)(H,{style:{position:`absolute`,top:10,left:10,zIndex:10},children:(0,r.jsx)(sg,{size:`2`,variant:`soft`,color:`gray`,onClick:()=>l(!c),title:c?`Ocultar Barra Lateral`:`Mostrar Barra Lateral`,children:c?(0,r.jsx)(ae,{}):(0,r.jsx)(se,{})})}),(0,r.jsx)(U,{style:{position:`absolute`,top:10,right:10,zIndex:10},gap:`2`,children:(0,r.jsx)(sg,{size:`2`,variant:`soft`,color:o?`blue`:`gray`,onClick:()=>s(!o),title:o?`Ocultar Preview`:`Mostrar Preview`,children:o?(0,r.jsx)(fe,{}):(0,r.jsx)(ue,{})})}),(0,r.jsxs)(ov,{orientation:`horizontal`,style:{height:`100%`,width:`100%`},children:[(0,r.jsx)(uv,{defaultSize:50,minSize:20,children:(0,r.jsxs)(H,{style:{height:`100%`,width:`100%`,backgroundColor:`var(--color-background)`,position:`relative`},children:[(0,r.jsx)(H,{style:{position:`absolute`,top:16,left:`50%`,transform:`translateX(-50%)`,zIndex:20},children:(0,r.jsx)(vv,{})}),(0,r.jsx)(Ny,{})]})}),o&&(0,r.jsx)(pv,{style:{width:`4px`,backgroundColor:`var(--gray-6)`,cursor:`col-resize`,transition:`background-color 0.2s`}}),o&&(0,r.jsx)(uv,{defaultSize:50,minSize:20,children:(0,r.jsx)(H,{style:{height:`100%`,width:`100%`,backgroundColor:`var(--gray-3)`,borderLeft:`1px solid var(--gray-5)`},children:(0,r.jsx)(rA,{})})})]})]})]}),u&&(0,r.jsx)(Ey,{elementId:u,open:f,onOpenChange:p})]})};let oA=e=>(0,r.jsx)(gv,{isList:e.layout.isList,availableProps:e.layout.props,theme:e.theme,children:(0,r.jsx)(aA,{...e})}),sA=(e,t,n={})=>Function(`elements`,`data`,`options`,cA()+`
+`).length-1;return c+=l,Math.ceil(c*r*i)};let $k=(e,t)=>{let n=e.map(e=>({...e})),r=new Map(e.map(e=>[e.id,e])),i=[];n.forEach(e=>{let a=e.type===`text`,o=e.type===`text-container`;if((a||o)&&e.autoGrow){let a=e.content;t&&(a=a.replace(/\{\{(.*?)\}\}/g,(n,r)=>{let i=t[r.trim()];return i==null?n:e.formatting?Bv(i,e.formatting):String(i)}));let s=parseInt(String(e.style?.fontSize||16)),c=String(e.style?.fontFamily||`Arial`);if(o&&e.containerExpansion===`horizontal`){let t=document.createElement(`canvas`).getContext(`2d`);if(t){t.font=`${s}px ${c}`;let n=t.measureText(a),r=Math.ceil(n.width+parseInt(String(e.style?.padding||0))*2);r>e.width&&(e.width=r,e.content=a)}}else{let t=Qk(a,e.width,c,s),o=e.height,l=t-o;if(l>0){e.height=t,e.content=a;let s=[],c=r.get(e.id);c&&n.forEach(t=>{if(t.id===e.id)return;let n=r.get(t.id);n&&Zk(c,n)&&s.push(t)});let u=new Set([e.id]);s.forEach(e=>{e.height+=l,u.add(e.id)}),i.push({triggerY:e.y+o,delta:l,ignoreIds:u})}}}}),n.forEach(e=>{let t=r.get(e.id);if(!t)return;let n=0;i.forEach(r=>{r.ignoreIds.has(e.id)||t.y>=r.triggerY-.1&&(n+=r.delta)}),e.y+=n});let a=0;return n.forEach(e=>{let t=e.y+e.height;t>a&&(a=t)}),{elements:n,totalHeight:a}};var eA=e=>{if(!e||e.type===`none`)return{initial:{opacity:0,y:20,scale:.95},animate:{opacity:1,y:0,scale:1}};let t={initial:{},animate:{}};switch(e.type){case`fadeIn`:t.initial={opacity:0},t.animate={opacity:1};break;case`slideInLeft`:t.initial={opacity:0,x:-100},t.animate={opacity:1,x:0};break;case`slideInRight`:t.initial={opacity:0,x:100},t.animate={opacity:1,x:0};break;case`slideInUp`:t.initial={opacity:0,y:100},t.animate={opacity:1,y:0};break;case`slideInDown`:t.initial={opacity:0,y:-100},t.animate={opacity:1,y:0};break;case`zoomIn`:t.initial={opacity:0,scale:.5},t.animate={opacity:1,scale:1};break;case`bounceIn`:t.initial={opacity:0,scale:.3},t.animate={opacity:1,scale:1,transition:{type:`spring`,bounce:.6}};break;case`pulse`:t.animate={scale:[1,1.05,1],transition:{repeat:1/0}};break;default:t.initial={opacity:0,y:20},t.animate={opacity:1,y:0}}return t},tA=({element:e,offsetY:t=0,dataContext:n})=>{let i=e.content;if(n){if(e.type===`text`||e.type===`text-container`)i=i.replace(/\{\{(.*?)\}\}/g,(t,r)=>{let i=n[r.trim()];return i==null?t:e.formatting?Bv(i,e.formatting):String(i)});else if(e.type===`image`)if(e.dataBinding){let t=n[e.dataBinding];t!=null&&(i=String(t))}else i=i.replace(/\{\{(.*?)\}\}/g,(e,t)=>{let r=n[t.trim()];return r==null?e:String(r)})}return(0,r.jsxs)(H,{style:{position:`absolute`,left:0,top:0,width:e.type===`text-container`&&e.autoGrow&&e.containerExpansion===`horizontal`?`max-content`:`${e.width}px`,height:e.autoGrow?`auto`:`${e.height}px`,transform:`translate(${e.x}px, ${e.y+t}px) rotate(${e.rotation||0}deg)`,padding:e.type===`image`||e.type===`text`||e.type===`text-container`?0:`8px`,overflow:e.autoGrow?`visible`:`hidden`,whiteSpace:e.type===`text-container`&&e.autoGrow&&e.containerExpansion===`horizontal`?`nowrap`:e.autoGrow?`pre-wrap`:void 0,wordBreak:e.autoGrow?`break-word`:void 0,...e.style},children:[(e.type===`text`||e.type===`text-container`)&&(0,r.jsx)(V,{style:{width:`100%`,height:`100%`,display:`block`},children:i}),e.type===`image`&&(i?(0,r.jsx)(`img`,{src:i,alt:`Element`,style:{width:`100%`,height:`100%`,objectFit:e.style?.objectFit||`cover`,display:`block`}}):(0,r.jsx)(H,{style:{width:`100%`,height:`100%`,backgroundColor:`#eee`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:(0,r.jsx)(V,{size:`1`,children:`Imagem`})})),e.type===`box`&&(0,r.jsx)(H,{style:{width:`100%`,height:`100%`}})]})},nA=({item:e,elements:n,animation:i})=>{let{elements:a,totalHeight:o}=t.default.useMemo(()=>$k(n,e),[n,e]),s=t.default.useMemo(()=>eA(i),[i]);return(0,r.jsx)(Xk.div,{layout:!0,initial:s.initial,animate:s.animate,exit:{opacity:0,scale:.9},transition:{duration:i?.duration||.4,ease:i?.timingFunction||`easeOut`},whileHover:{scale:1.02,transition:{duration:.2}},style:{position:`relative`,height:o,width:`100%`,marginBottom:`20px`,transformOrigin:`center center`},children:a.map(t=>(0,r.jsx)(tA,{element:t,offsetY:0,dataContext:e},t.id))})};let rA=()=>{let{state:e}=_v(),[n,i]=t.default.useState(!1),[a,o]=t.default.useState([]);return t.default.useEffect(()=>{let t;return n&&e.isList?(a.length===0&&o([{id:Date.now(),...e.mockData[0]||{}}]),t=setInterval(()=>{o(t=>{let n=t.length%(e.mockData.length||1),r={...e.mockData.length>0?e.mockData[n]:{id:t.length},id:`${Date.now()}-${t.length}`};return e.listSettings.newestPosition===`top`?[r,...t].slice(0,20):[...t,r].slice(-20)})},1500)):o([]),()=>clearInterval(t)},[n,e.isList,e.listSettings.newestPosition,e.mockData]),(0,r.jsxs)(H,{style:{width:`100%`,height:`100%`,position:`relative`,overflow:`hidden`,backgroundColor:`var(--color-panel-solid)`},children:[e.isList&&(0,r.jsx)(H,{style:{position:`absolute`,bottom:10,right:10,zIndex:100,backgroundColor:`var(--color-surface)`,padding:`4px`,borderRadius:`var(--radius-3)`,boxShadow:`0 2px 10px rgba(0,0,0,0.1)`},children:(0,r.jsxs)(W,{size:`1`,variant:n?`soft`:`solid`,color:n?`red`:`green`,onClick:()=>i(!n),children:[n?(0,r.jsx)(Oe,{}):(0,r.jsx)(ve,{}),n?`Parar Simulação`:`Simular Entrada`]})}),(0,r.jsx)(Nh,{type:`auto`,scrollbars:`vertical`,style:{height:`100%`,width:`100%`},children:(0,r.jsx)(H,{style:{position:`relative`,minHeight:`100%`,width:`100%`},children:(()=>{if(e.elements.length===0)return(0,r.jsx)(U,{align:`center`,justify:`center`,style:{height:`100%`},children:(0,r.jsx)(V,{color:`gray`,children:`Preview vazio`})});if(e.isList){let t=[];if(n)t=a;else{if(t=e.mockData.length>0?e.mockData:Array.from({length:10}).map((e,t)=>({id:t})),e.listSettings.sortProp){let n=e.listSettings.sortProp,r=e.listSettings.sortOrder===`asc`?1:-1;t=[...t].sort((e,t)=>{let i=e[n],a=t[n];return i<a?-1*r:i>a?1*r:0})}e.listSettings.newestPosition===`top`&&(t=[...t].reverse())}return(0,r.jsx)(U,{direction:`column`,justify:e.listSettings.newestPosition===`top`?`start`:`end`,p:`4`,style:{width:`100%`,minHeight:`100%`},children:(0,r.jsx)(Fw,{mode:`popLayout`,initial:!1,children:t.map((t,n)=>(0,r.jsx)(nA,{item:t,elements:e.elements,animation:e.listSettings.entryAnimation},t.id||n))})})}return e.elements.map(t=>(0,r.jsx)(tA,{element:t,dataContext:e.singleMockData},t.id))})()})})]})};var iA=({onOpenSettings:e})=>{let{state:n,selectElement:i,renameElement:a,addToGroup:o,removeFromGroup:s,groupElements:c}=_v(),[l,u]=(0,t.useState)({}),[d,f]=(0,t.useState)(!1),[p,m]=(0,t.useState)(null),[h,g]=(0,t.useState)(``),_=n.elements.filter(e=>e.type===`group`),v=new Map;_.forEach(e=>{v.set(e.id,n.elements.filter(t=>t.groupId===e.id))});let y=n.elements.filter(e=>e.type!==`group`&&!e.groupId),b=e=>{u(t=>({...t,[e]:!t[e]}))},x=(t,a=0)=>(0,r.jsx)(H,{style:{borderRadius:6,backgroundColor:n.selectedElementIds.includes(t.id)?`var(--gray-5)`:`var(--gray-3)`,border:n.selectedElementIds.includes(t.id)?`1px solid var(--gray-8)`:`1px solid var(--gray-5)`,cursor:`pointer`,overflow:`hidden`,padding:`6px 8px`,paddingLeft:`${8+a*16}px`},draggable:!0,onDragStart:e=>{e.dataTransfer.setData(`application/x-editor-element`,t.id),e.dataTransfer.effectAllowed=`move`},onDragOver:e=>{e.preventDefault()},onDrop:e=>{let r=e.dataTransfer.getData(`application/x-editor-element`);if(!(!r||r===t.id))if(t.type===`group`)o(r,t.id);else{let e=n.elements.find(e=>e.id===r);if(!e)return;let i=t;!e.groupId&&!i.groupId?c([r,i.id]):!i.groupId&&e.groupId?o(i.id,e.groupId):!e.groupId&&i.groupId&&o(r,i.groupId)}},onClick:n=>{i(t.id,n.shiftKey),e&&e(t.id)},children:(0,r.jsxs)(U,{gap:`2`,align:`center`,style:{width:`100%`,overflow:`hidden`},children:[t.type===`text`&&(0,r.jsx)(Ae,{}),t.type===`image`&&(0,r.jsx)(ge,{}),t.type===`box`&&(0,r.jsx)(A,{}),(0,r.jsx)(V,{truncate:!0,style:{flex:1,textAlign:`left`},children:t.name||(t.type===`text`?t.content.length>20?t.content.substring(0,20)+`...`:t.content:t.type===`image`?`Imagem`:`Container`)}),t.type===`group`&&(0,r.jsx)(W,{variant:`ghost`,color:`gray`,size:`1`,onClick:e=>{e.stopPropagation(),m(t.id),g(t.name||`Grupo`),f(!0)},children:`Renomear`})]})},t.id);return(0,r.jsxs)(U,{direction:`column`,gap:`2`,children:[y.map(e=>x(e,0)),_.map(t=>{let n=l[t.id]===!0,a=v.get(t.id)||[];return(0,r.jsxs)(H,{style:{border:`1px dashed var(--gray-6)`,borderRadius:6,backgroundColor:`var(--gray-3)`},children:[(0,r.jsx)(U,{align:`center`,justify:`between`,style:{padding:`6px 8px`,cursor:`pointer`},onClick:()=>{i(t.id),e&&e(t.id)},onDoubleClick:()=>b(t.id),onDragOver:e=>{e.preventDefault()},onDrop:e=>{let n=e.dataTransfer.getData(`application/x-editor-element`);n&&n!==t.id&&o(n,t.id)},children:(0,r.jsxs)(U,{align:`center`,gap:`2`,children:[(0,r.jsx)(A,{}),(0,r.jsx)(V,{style:{fontWeight:600},children:t.name||`Grupo`}),(0,r.jsx)(Em,{variant:`soft`,color:`blue`,size:`1`,children:a.length})]})}),!n&&(0,r.jsxs)(U,{direction:`column`,gap:`2`,style:{padding:`6px 8px`},children:[a.map(e=>x(e,1)),a.length===0&&(0,r.jsx)(V,{size:`1`,color:`gray`,children:`Solte elementos aqui para agrupar`})]})]},t.id)}),(0,r.jsx)(H,{style:{marginTop:8,padding:`6px 8px`,border:`1px dashed var(--gray-6)`,borderRadius:6},onDragOver:e=>{e.preventDefault()},onDrop:e=>{let t=e.dataTransfer.getData(`application/x-editor-element`);t&&s(t)},children:(0,r.jsx)(V,{size:`1`,color:`gray`,children:`Soltar aqui para remover do grupo`})}),(0,r.jsx)(zh,{open:d,onOpenChange:f,children:(0,r.jsxs)(Vh,{style:{maxWidth:420},children:[(0,r.jsx)(Hh,{children:`Renomear Grupo`}),(0,r.jsxs)(U,{direction:`column`,gap:`3`,children:[(0,r.jsx)(G,{value:h,onChange:e=>g(e.target.value),placeholder:`Nome do grupo...`}),(0,r.jsxs)(U,{gap:`3`,justify:`end`,children:[(0,r.jsx)(Wh,{children:(0,r.jsx)(W,{variant:`soft`,color:`gray`,children:`Cancelar`})}),(0,r.jsx)(W,{onClick:()=>{p&&a(p,h),f(!1)},children:`Salvar`})]})]})]})})]})},aA=({layout:e,initialState:n,onSave:i,theme:a=`light`})=>{let[o,s]=(0,t.useState)(!0),[c,l]=(0,t.useState)(!0),[u,d]=(0,t.useState)(null),[f,p]=(0,t.useState)(!1),{addElement:m,loadState:h,state:g,undo:_,redo:v,copy:y,paste:b,removeSelected:x,updateElements:S}=_v(),C=t.default.useRef(null),w=()=>{let e={elements:g.elements,isList:g.isList,mockData:g.mockData,singleMockData:g.singleMockData,listSettings:g.listSettings,canvasHeight:g.canvasHeight,gridSize:g.gridSize},t=JSON.stringify(e,null,2),n=new Blob([t],{type:`application/json`}),r=URL.createObjectURL(n),i=document.createElement(`a`);i.href=r,i.download=`layout-${new Date().toISOString().slice(0,10)}.json`,document.body.appendChild(i),i.click(),document.body.removeChild(i),URL.revokeObjectURL(r)},T=()=>{C.current?.click()},E=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{try{let t=e.target?.result;h(JSON.parse(t))}catch(e){console.error(`Failed to import layout`,e),alert(`Erro ao importar layout. Arquivo inválido.`)}},n.readAsText(t),e.target.value=``};t.default.useEffect(()=>{let e=e=>{if(document.activeElement?.tagName===`INPUT`||document.activeElement?.tagName===`TEXTAREA`||document.activeElement?.isContentEditable)return;let t=e.clipboardData?.items;if(t){for(let n=0;n<t.length;n++)if(t[n].type.indexOf(`image`)!==-1){e.preventDefault();let r=t[n].getAsFile();if(r){let e=new FileReader;e.onload=e=>{let t=e.target?.result;m({type:`image`,content:t,width:200,height:200})},e.readAsDataURL(r)}}}};return window.addEventListener(`paste`,e),()=>window.removeEventListener(`paste`,e)},[m]),t.default.useEffect(()=>{let e=e=>{if(!(document.activeElement?.tagName===`INPUT`||document.activeElement?.tagName===`TEXTAREA`||document.activeElement?.isContentEditable)){if((e.ctrlKey||e.metaKey)&&e.key===`z`)e.shiftKey?(e.preventDefault(),v()):(e.preventDefault(),_());else if((e.ctrlKey||e.metaKey)&&e.key===`y`)e.preventDefault(),v();else if((e.ctrlKey||e.metaKey)&&e.key===`c`)e.preventDefault(),y();else if((e.ctrlKey||e.metaKey)&&e.key===`v`)e.preventDefault(),b();else if(e.key===`Delete`||e.key===`Backspace`)g.selectedElementIds.length>0&&(e.preventDefault(),x());else if([`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`].includes(e.key)&&g.selectedElementIds.length>0){e.preventDefault();let t=e.shiftKey?10:1,n=[];g.selectedElementIds.forEach(r=>{let i=g.elements.find(e=>e.id===r);if(i){let a={};e.key===`ArrowUp`&&(a.y=i.y-t),e.key===`ArrowDown`&&(a.y=i.y+t),e.key===`ArrowLeft`&&(a.x=i.x-t),e.key===`ArrowRight`&&(a.x=i.x+t),n.push({id:r,changes:a})}}),n.length>0&&S(n)}}};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[_,v,y,b,x,g.selectedElementIds,g.elements,S]),t.default.useEffect(()=>{if(n)try{let e=typeof n==`string`?JSON.parse(n):n;Array.isArray(e)?h({elements:e}):e.elements&&h(e)}catch(e){console.error(`Failed to load initial state`,e)}},[n,h]);let D=e=>{console.log(`Adding element of type: ${e}`),m({type:e,content:`New ${e}`})};return(0,r.jsxs)(_m,{appearance:a,accentColor:`blue`,grayColor:`slate`,radius:`medium`,scaling:`100%`,children:[(0,r.jsxs)(U,{direction:`row`,style:{height:`100vh`,width:`100%`,overflow:`hidden`,backgroundColor:`var(--color-background)`},children:[c&&(0,r.jsxs)(U,{direction:`column`,width:`280px`,style:{borderRight:`1px solid var(--gray-5)`,backgroundColor:`var(--gray-2)`,flexShrink:0,height:`100%`},children:[(0,r.jsx)(H,{p:`4`,style:{borderBottom:`1px solid var(--gray-5)`,backgroundColor:`var(--gray-2)`},children:(0,r.jsx)(U,{direction:`column`,gap:`3`,children:(0,r.jsxs)(H,{children:[(0,r.jsx)(V,{size:`2`,weight:`bold`,mb:`2`,as:`div`,children:`Editor`}),(0,r.jsxs)(Kh,{children:[(0,r.jsx)(qh,{children:(0,r.jsx)(W,{variant:`solid`,color:`green`,size:`3`,style:{width:`100%`,cursor:`pointer`,justifyContent:`center`,marginBottom:`8px`},children:`Adicionar Novo +`})}),(0,r.jsxs)(Yh,{style:{width:`240px`},children:[(0,r.jsx)(Zh,{onSelect:()=>D(`text`),children:`Texto`}),(0,r.jsx)(Zh,{onSelect:()=>D(`image`),children:`Imagem`}),(0,r.jsx)(Zh,{onSelect:()=>D(`box`),children:`Caixa (Container)`}),(0,r.jsx)(Zh,{onSelect:()=>D(`text-container`),children:`Container com Texto`})]})]}),(0,r.jsxs)(W,{variant:`soft`,color:`blue`,style:{width:`100%`,justifyContent:`center`,cursor:`pointer`},onClick:()=>{if(i){let e={elements:g.elements,isList:g.isList,mockData:g.mockData,singleMockData:g.singleMockData,listSettings:g.listSettings,canvasHeight:g.canvasHeight};i(JSON.stringify(e,null,2))}},children:[(0,r.jsx)(Se,{}),` Salvar Alterações`]}),(0,r.jsxs)(U,{gap:`2`,mt:`2`,children:[(0,r.jsxs)(W,{variant:`soft`,color:`gray`,style:{flex:1,cursor:`pointer`,justifyContent:`center`},onClick:w,children:[(0,r.jsx)(N,{}),` Exportar`]}),(0,r.jsxs)(W,{variant:`soft`,color:`gray`,style:{flex:1,cursor:`pointer`,justifyContent:`center`},onClick:T,children:[(0,r.jsx)(Pe,{}),` Importar`]})]}),(0,r.jsx)(`input`,{type:`file`,ref:C,style:{display:`none`},accept:`.json`,onChange:E}),(0,r.jsx)(H,{mt:`2`,children:(0,r.jsx)(Py,{})})]})})}),(0,r.jsx)(Nh,{type:`auto`,scrollbars:`vertical`,style:{flex:1},children:(0,r.jsxs)(U,{direction:`column`,gap:`4`,p:`4`,children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(V,{size:`2`,weight:`bold`,mb:`2`,as:`div`,children:`Elementos`}),(0,r.jsx)(iA,{onOpenSettings:e=>{d(e),p(!0)}})]}),(0,r.jsx)(vg,{size:`4`}),(0,r.jsxs)(H,{children:[(0,r.jsx)(V,{size:`2`,weight:`bold`,mb:`2`,as:`div`,children:`Variáveis Disponíveis`}),(0,r.jsx)(V,{size:`1`,color:`gray`,mb:`2`,as:`div`,children:`Clique para copiar ou arraste`}),(0,r.jsxs)(U,{direction:`column`,gap:`2`,children:[e.props.map((e,t)=>(0,r.jsxs)(Em,{color:`blue`,variant:`soft`,size:`2`,style:{padding:`8px`,justifyContent:`flex-start`,cursor:`grab`},title:`Clique para copiar {{${e.dataName}}}`,draggable:!0,onDragStart:t=>{t.dataTransfer.setData(`application/x-editor-prop`,e.dataName),t.dataTransfer.effectAllowed=`copy`},onClick:()=>{let t=`{{${e.dataName}}}`;navigator.clipboard.writeText(t)},children:[e.name,(0,r.jsx)(V,{color:`gray`,style:{marginLeft:`auto`,fontSize:`10px`},children:`{{${e.dataName}}}`})]},t)),e.props.length===0&&(0,r.jsx)(V,{size:`1`,color:`gray`,style:{fontStyle:`italic`},children:`Nenhuma variável configurada.`})]})]})]})})]}),(0,r.jsxs)(H,{style:{flex:1,position:`relative`,height:`100%`},children:[(0,r.jsx)(H,{style:{position:`absolute`,top:10,left:10,zIndex:10},children:(0,r.jsx)(sg,{size:`2`,variant:`soft`,color:`gray`,onClick:()=>l(!c),title:c?`Ocultar Barra Lateral`:`Mostrar Barra Lateral`,children:c?(0,r.jsx)(ae,{}):(0,r.jsx)(se,{})})}),(0,r.jsx)(U,{style:{position:`absolute`,top:10,right:10,zIndex:10},gap:`2`,children:(0,r.jsx)(sg,{size:`2`,variant:`soft`,color:o?`blue`:`gray`,onClick:()=>s(!o),title:o?`Ocultar Preview`:`Mostrar Preview`,children:o?(0,r.jsx)(fe,{}):(0,r.jsx)(ue,{})})}),(0,r.jsxs)(ov,{orientation:`horizontal`,style:{height:`100%`,width:`100%`},children:[(0,r.jsx)(uv,{defaultSize:50,minSize:20,children:(0,r.jsxs)(H,{style:{height:`100%`,width:`100%`,backgroundColor:`var(--color-background)`,position:`relative`},children:[(0,r.jsx)(H,{style:{position:`absolute`,top:16,left:`50%`,transform:`translateX(-50%)`,zIndex:20},children:(0,r.jsx)(vv,{})}),(0,r.jsx)(Ny,{})]})}),o&&(0,r.jsx)(pv,{style:{width:`4px`,backgroundColor:`var(--gray-6)`,cursor:`col-resize`,transition:`background-color 0.2s`}}),o&&(0,r.jsx)(uv,{defaultSize:50,minSize:20,children:(0,r.jsx)(H,{style:{height:`100%`,width:`100%`,backgroundColor:`var(--gray-3)`,borderLeft:`1px solid var(--gray-5)`},children:(0,r.jsx)(rA,{})})})]})]})]}),u&&(0,r.jsx)(Ey,{elementId:u,open:f,onOpenChange:p})]})};let oA=e=>(0,r.jsx)(gv,{isList:e.layout.isList,availableProps:e.layout.props,theme:e.theme,children:(0,r.jsx)(aA,{...e})}),sA=(e,t,n={})=>Function(`elements`,`data`,`options`,cA()+`
 return renderTemplate(elements, data, options);`)(e,t,n),cA=()=>`
 /**
  * Render Template
@@ -382,7 +382,7 @@ function renderTemplate(elements, data, options = {}) {
             let imgSrc = '';
             // Resolve Content & Formatting
-            if (element.type === 'text') {
+            if (element.type === 'text' || element.type === 'text-container') {
                 content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {
                     const val = itemData[key.trim()];
                     if (val === undefined || val === null) return match;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@1urso/generic-editor",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "publishConfig": {
     "access": "public"
   },