PageSourceSearch

https://8e7de961-06b3-4bab-89a8-97ccdc389aed-render.magicpatterns.app/

html 8e7de961-06b3-4bab-89a8-97ccdc389aed-render.magicpatterns.app collected 2026-10-03 04:59:17 UTC 90,866 bytes, 1,051 lines download raw bytes

1<!DOCTYPE html>
2    <!-- Published 8e7de961-06b3-4bab-89a8-97ccdc389aed created by Magic Patterns: https://www.magicpatterns.com/ -->
3    <html lang="en" dir="ltr" style="overflow:auto;" class="light">
4      <head>
5        <meta charset="UTF-8" />
6        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8        <title>Internal Preview</title>
9        <meta property="og:title" content="Internal Preview" />
10        
11        
12        
13        <meta property="og:type" content="website" />
14        
15        <link rel="stylesheet" type="text/css" href="https://cdn.magicpatterns.com/patterns/bundles/88e66bfe-5101-4f38-ae18-2c23fd02a354/cb06980e-0497-49c2-a309-3f08ed3c9f09/index-88e66bfe-5101-4f38-ae18-2c23fd02a354.css" crossorigin="anonymous">
16        <link rel="preconnect" href="https://fonts.googleapis.com">
17        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
19        
20        
21      </head>
22      <body style="margin:0;font-family:"'Inter','Inter',sans-serif;">
23        
24        
25        <div id="root"  />
26        
26<script>
27    document.addEventListener('DOMContentLoaded', function () {
28        document.body.addEventListener('submit', function(event) {
29            if (event.target.tagName === 'FORM') {
30                event.preventDefault(); // This stops the form from submitting
31            }
32        }, true);
33    });
34</script>
34
35        
36        
36<script src="https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.min.js"></script>
vendor: 1 bytes, line 36
36
37<script>
38(function () {
39  function postError(payload) {
40    window.parent.postMessage(
41      Object.assign({ type: 'IFRAME_ERROR', id: '8e7de961-06b3-4bab-89a8-97ccdc389aed' }, payload),
42      '*'
43    );
44  }
45
46  function report(payload, error) {
47    if (error && error.stack && window.StackTrace) {
48      StackTrace.fromError(error)
49        .then(function (stackframes) {
50          postError(Object.assign({}, payload, {
51            stackframes: stackframes,
52            mappedStack: stackframes.map(function (sf) {
53              return {
54                fileName: sf.fileName,
55                lineNumber: sf.lineNumber,
56                columnNumber: sf.columnNumber,
57                functionName: sf.functionName,
58              };
59            }),
60          }));
61        })
62        .catch(function () {
63          postError(payload);
64        });
65    } else {
66      postError(payload);
67    }
68  }
69
70  window.onerror = function (message, source, lineno, colno, error) {
71    report({
72      message: message,
73      source: source,
74      lineno: lineno,
75      colno: colno,
76      error: error,
77      stack: error && error.stack ? String(error.stack) : undefined,
78      kind: 'error',
79    }, error);
80    return true;
81  };
82
83  // Unhandled promise rejections never reach window.onerror, so without this
84  // an async failure in the preview surfaces nothing to the agent at all.
85  window.addEventListener('unhandledrejection', function (event) {
86    var reason = event ? event.reason : undefined;
87    var isError = reason instanceof Error;
88    report({
89      message: isError
90        ? reason.message
91        : 'Unhandled promise rejection: ' + String(reason),
92      error: isError ? reason : undefined,
93      stack: isError && reason.stack ? String(reason.stack) : undefined,
94      kind: 'unhandledrejection',
95    }, isError ? reason : undefined);
96  });
97})();
98</script>
98
99        
99<script type="module">
100import { generateFromElement, htmlToFigma, inlineComputedStyles } from 'https://cdn.jsdelivr.net/npm/@magicpatterns/[email protected]/+esm';
101
102          const getExportRoot = () => document.getElementById('root') ?? document.body;
103
104          // Portaled UI (Radix/shadcn dialogs, sheets, popovers) is appended
105          // to <body> after #root, so it isn't inside the export root. Our own
106          // overlays live on <html>, not <body>, so they never match here.
107          const NON_VISUAL_TAGS = ['SCRIPT', 'STYLE', 'LINK', 'TEMPLATE', 'NOSCRIPT'];
108
109          const hasRenderedBox = (el) =>
110            [el, ...el.querySelectorAll('*')].some((node) => {
111              const rect = node.getBoundingClientRect();
112              return rect.width > 0 && rect.height > 0;
113            });
114
115          const getPortalRoots = (exportRoot) => {
116            const portals = [];
117            if (exportRoot === document.body) return portals;
118            for (let el = exportRoot.nextElementSibling; el; el = el.nextElementSibling) {
119              if (NON_VISUAL_TAGS.includes(el.tagName) || !hasRenderedBox(el)) continue;
120              portals.push(el);
121            }
122            return portals;
123          };
124
125          // data-rect is relative to the element passed to inlineComputedStyles,
126          // so each portal's rects are shifted onto the export root's origin
127          // before it's layered on top of the root snapshot.
128          const inlineExportRoot = (exportRoot) => {
129            const inlined = inlineComputedStyles(exportRoot);
130            const portals = getPortalRoots(exportRoot);
131            if (portals.length === 0) return inlined;
132            const parser = new DOMParser();
133            const rootClone = parser.parseFromString(inlined, 'text/html').body.firstElementChild;
134            if (!rootClone) return inlined;
135            const rootRect = exportRoot.getBoundingClientRect();
136            for (const portal of portals) {
137              const portalClone = parser.parseFromString(inlineComputedStyles(portal), 'text/html').body.firstElementChild;
138              if (!portalClone) continue;
139              const portalRect = portal.getBoundingClientRect();
140              const dx = portalRect.left - rootRect.left;
141              const dy = portalRect.top - rootRect.top;
142              for (const node of [portalClone, ...portalClone.querySelectorAll('[data-rect]')]) {
143                const [x, y, w, h] = node.getAttribute('data-rect').split(',').map(Number);
144                const shiftedX = Math.round((x + dx) * 100) / 100;
145                const shiftedY = Math.round((y + dy) * 100) / 100;
146                node.setAttribute('data-rect', shiftedX + ',' + shiftedY + ',' + w + ',' + h);
147              }
148              rootClone.appendChild(portalClone);
149            }
150            return rootClone.outerHTML;
151          };
152
153          const getFigmaClipboardPayload = async (topLayerName) => {
154            const inlined = inlineExportRoot(getExportRoot())
155            const clone = new DOMParser().parseFromString(inlined, 'text/html').body.firstElementChild
156
157            if (!clone) {
158              throw new Error('No export root found.')
159            }
160
161            const payload = await generateFromElement(clone, {
162              topLayerName: topLayerName || 'Magic Patterns',
163            })
164
165            return payload
166          }
167
168          const postPayload = (payload) => {
169            window.parent.postMessage({
170              type: 'FIGMA_CLIPBOARD_PAYLOAD',
171              id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
172              payload,
173            }, "*");
174          }
175
176          const postCopyError = (error) => {
177            console.error(error)
178            window.parent.postMessage({
179              type: 'FIGMA_CLIPBOARD_ERROR',
180              id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
181              message: error instanceof Error ? error.message : 'Unknown error',
182            }, "*");
183          }
184
185          window.addEventListener('keydown', (event) => {
186            if ( event.key === 'ƒ' && event.altKey){
187              getFigmaClipboardPayload()
188                .then(postPayload)
189                .catch(postCopyError)
190            }
191          })
192
193          window.addEventListener('message', (event) => {
194            if ( event.data.type === 'REQUEST_FIGMA_FRAME' ){
195              let mpData;
196              try {
197                mpData = htmlToFigma(document.getElementsByTagName('body')[0])
198              } catch(e){
199                console.error(e)
200              }
201
202              window.parent.postMessage({ type: 'FIGMA_FRAME', mpData, id: '8e7de961-06b3-4bab-89a8-97ccdc389aed' }, "*");
203            } else if ( event.data.type === 'REQUEST_COPY_FIGMA_CLIPBOARD' ){
204              getFigmaClipboardPayload(event.data.topLayerName)
205                .then(postPayload)
206                .catch(postCopyError)
207            } else if ( event.data.type === 'REQUEST_INLINED_HTML' ){
208              // Return the export root's computed-style + rect snapshot so
209              // the parent canvas can compose N screens into one payload
210              // via generateFromElements — lets multi-select canvas export
211              // de-duplicate fonts/images across screens and paste as one
212              // composite artboard instead of N separate pastes.
213              let inlined = null, width = 0, height = 0, error = null;
214              try {
215                const exportRoot = getExportRoot()
216                if (!exportRoot) throw new Error('No export root found.')
217                inlined = inlineExportRoot(exportRoot)
218                const rect = exportRoot.getBoundingClientRect()
219                width = Math.ceil(rect.width)
220                height = Math.ceil(rect.height)
221              } catch (e) {
222                error = e instanceof Error ? e.message : 'Unknown error'
223                console.error('REQUEST_INLINED_HTML failed:', e)
224              }
225              window.parent.postMessage({
226                type: 'INLINED_HTML_PAYLOAD',
227                id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
228                requestId: event.data.requestId,
229                inlined,
230                width,
231                height,
232                error,
233              }, "*");
234            }
235          })
236</script>
236
237        
238        
238<script src="https://cdn.magicpatterns.com/patterns/bundles/88e66bfe-5101-4f38-ae18-2c23fd02a354/cb06980e-0497-49c2-a309-3f08ed3c9f09/index-88e66bfe-5101-4f38-ae18-2c23fd02a354.js" type="module" crossorigin="anonymous" async></script>
238
239        
239<script>
240(function() {
241  // Track the last known path to avoid duplicate messages
242  let lastPath = window.location.pathname;
243
244  // Helper function to notify parent of route changes
245  function notifyRouteChange(path) {
246    if (path !== lastPath) {
247      lastPath = path;
248      window.parent.postMessage({
249        id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
250        type: 'ROUTE_CHANGED',
251        path: path
252      }, '*');
253    }
254  }
255
256  // Override pushState
257  const originalPushState = history.pushState;
258  history.pushState = function() {
259    originalPushState.apply(history, arguments);
260    notifyRouteChange(window.location.pathname);
261  };
262
263  // Override replaceState
264  const originalReplaceState = history.replaceState;
265  history.replaceState = function() {
266    originalReplaceState.apply(history, arguments);
267    notifyRouteChange(window.location.pathname);
268  };
269
270  // Listen for popstate (browser back/forward)
271  window.addEventListener('popstate', function() {
272    notifyRouteChange(window.location.pathname);
273  });
274
275  // Listen for hash changes
276  window.addEventListener('hashchange', function() {
277    notifyRouteChange(window.location.pathname + window.location.hash);
278  });
279
280  // Also monitor clicks for client-side routing that might not use History API
281  // This is a fallback for edge cases
282  let checkInterval;
283  document.addEventListener('click', function(e) {
284    // Clear any existing interval
285    if (checkInterval) clearInterval(checkInterval);
286
287    // Check for route changes over the next 100ms
288    let checks = 0;
289    checkInterval = setInterval(function() {
290      checks++;
291      const currentPath = window.location.pathname;
292      if (currentPath !== lastPath) {
293        notifyRouteChange(currentPath);
294        clearInterval(checkInterval);
295      }
296      // Stop checking after 10 attempts (100ms total)
297      if (checks >= 10) {
298        clearInterval(checkInterval);
299      }
300    }, 10);
301  });
302
303  // Notify parent of initial path on load
304  window.addEventListener('load', function() {
305    window.parent.postMessage({
306      id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
307      type: 'ROUTE_CHANGED',
308      path: window.location.pathname
309    }, '*');
310  });
311})();
312</script>
312
313        
314<script>
315let currentlySelectedElement = null;
316let extractOverlayElement = null;
317window.isExtractModeActive = false;
318
319// Idempotent factory for the shared app-layer element living as a sibling of
320// <body> under <html>. Used as the attach point for every script-injected
321// overlay so that user-code modal libraries (react-aria, Radix, etc.) which
322// walk body.children to apply inert/aria-hidden never see our overlays.
323// Stored on window so multiple top-level scripts (comment/extract mode)
324// injected into the same iframe document don't collide via const-redeclare.
325window.__mpGetAppLayer = window.__mpGetAppLayer || function () {
326  let layer = document.getElementById('magic-patterns-app-layer')
327  if (!layer) {
328    layer = document.createElement('div')
329    layer.id = 'magic-patterns-app-layer'
330    document.documentElement.appendChild(layer)
331  }
332  return layer
333}
334
335const enableExtractMode = () => {
336    window.isExtractModeActive = true;
337
338    if ( extractOverlayElement ){
339        extractOverlayElement.remove();
340    }
341    extractOverlayElement = null;
342    currentlySelectedElement = null;
343    window.focus();
344}
345
346const disableExtractMode = () => {
347    window.isExtractModeActive = false;
348
349    if ( extractOverlayElement ){
350        extractOverlayElement.remove();
351    }
352    extractOverlayElement = null;
353    currentlySelectedElement = null;
354}
355
356const setOverlayToExtractedElement = (element) => {
357    if (!extractOverlayElement){
358      extractOverlayElement = document.createElement('div');
359      extractOverlayElement.id = 'magic-patterns-overlay';
360      extractOverlayElement.style.position = 'fixed';
361      extractOverlayElement.style.backgroundColor = 'rgba(141, 164, 239, 0.5)';
362      extractOverlayElement.style.zIndex = '999999999';
363      extractOverlayElement.style.pointerEvents = 'none';
364      extractOverlayElement.style.outline = '2px dashed #8DA4EF';
365      window.__mpGetAppLayer().appendChild(extractOverlayElement);
366    }
367
368    const { x, y, width, height } = element.getBoundingClientRect();
369    extractOverlayElement.style.left = x + 'px'
370    extractOverlayElement.style.top = y + 'px'
371    extractOverlayElement.style.width = width + 'px'
372    extractOverlayElement.style.height = height + 'px'
373}
374
375const handleMouseOverExtract = (event) => {
376  if (window.isExtractModeActive && event.target.dataset.id){
377    setOverlayToExtractedElement(event.target)
378    currentlySelectedElement = event.target;
379  }
380}   
381
382// This currently doesn't really work because of focus conflicts it seems.
383const handleExtractKeydown = (event) => {
384  if (event.key === 'Escape') {
385    if (currentlySelectedElement){
386      disableExtractMode() 
387    }
388  } else if (event.key === 'Shift'){
389    if (currentlySelectedElement && currentlySelectedElement.parentElement){
390        currentlySelectedElement = currentlySelectedElement.parentElement;
391        setOverlayToExtractedElement(currentlySelectedElement);
392    }
393  }
394}
395window.addEventListener('keydown', handleExtractKeydown);
396
397const handleExtractOnClick = (event) => {
398  if (!window.isExtractModeActive){
399    return;
400  };
401
402  const { clientX, clientY } = event;
403
404  if (event.target.dataset.id) {
405    event.preventDefault();
406    event.stopPropagation();
407
408    currentlySelectedElement = event.target;
409
410    setOverlayToExtractedElement(event.target);
411
412    window.parent.postMessage({
413        id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
414        type: 'SELECT_EXTRACT_TARGET',
415        dataId: event.target.dataset.id,
416        outerHtml: event.target.outerHTML,
417    }, '*');
418  } else {
419    window.parent.postMessage({
420      id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
421      type: 'DISABLE_EXTRACT_MODE',
422    }, '*'); 
423  }
424}
425
426window.addEventListener('message', event => {
427  if (event.data.type === 'ENABLE_EXTRACT_MODE') {
428    enableExtractMode()
429  } else if (event.data.type === 'DISABLE_EXTRACT_MODE') {
430    disableExtractMode()
431  }
432});
433
434document.addEventListener('DOMContentLoaded', function () {
435    document.addEventListener('click', handleExtractOnClick, true);
436    document.body.addEventListener('mouseover', handleMouseOverExtract);
437});
438</script>
438
439        
439<script>"use strict";(()=>{var D=null,m=null,v=null,A=null,$e=[],Ye=[],ze=[],g=null,_=null,I=null,Me="",yt=0,ie=null,re=null,ce=null;window.isEditModeActive=!1;var y="8e7de961-06b3-4bab-89a8-97ccdc389aed",J="#0070AC",bn="#00649F",xn="#005892",me="0, 112, 172",Tt="#FFFFFF",ge=new Set(["circle","ellipse","line","path","polygon","polyline","rect","text","tspan","textpath","g","defs","clippath","mask","pattern","marker","symbol","use","lineargradient","radialgradient","stop","filter","feblend","fecolormatrix","fecomponenttransfer","fecomposite","feconvolvematrix","fediffuselighting","fedisplacementmap","feflood","fefunca","fefuncb","fefuncg","fefuncr","fegaussianblur","feimage","femerge","femergenode","femorphology","feoffset","fespecularlighting","fetile","feturbulence","foreignobject","image","desc","metadata","title","animate","animatemotion","animatetransform","set"]),T=e=>{window.parent.postMessage(e,"*")},h=e=>e.dataset.mp??e.dataset.id,K=e=>e.hasAttribute("data-mp")||e.hasAttribute("data-id"),X=e=>`[data-mp="${e}"], [data-id="${e}"]`,Mn=e=>{let t=[],n=e.parentElement;for(;n&&n!==document.body;){let o=h(n);o&&t.push({dataId:o,tagName:n.tagName.toLowerCase(),ephemeralId:n.dataset.mpe}),n=n.parentElement}return t},bt=0,Le=null,pt=e=>{e.querySelectorAll("[data-mp]:not([data-mpe]), [data-id]:not([data-mpe])").forEach(n=>{n.dataset.mpe=String(bt++)})},Ln=()=>{pt(document),Le=new MutationObserver(e=>{for(let t of e)t.addedNodes.forEach(n=>{if(n.nodeType!==Node.ELEMENT_NODE)return;let o=n;K(o)&&!o.dataset.mpe&&(o.dataset.mpe=String(bt++)),pt(o)})}),Le.observe(document.documentElement,{childList:!0,subtree:!0})},vn=()=>{Le?.disconnect(),Le=null},In=["nw","ne","sw","se"],te=8,nt=[],P=null,Cn=e=>{for(let{handle:t}of nt)t.style.display=e?"block":"none"},Sn=(e,t)=>{let n=t<te?te:te/2,o=e<te?te:te/2;for(let{corner:i,handle:r}of nt)r.style[i.includes("n")?"top":"bottom"]=`-${n}px`,r.style[i.includes("w")?"left":"right"]=`-${o}px`},wn=e=>{for(let t of In){let n=document.createElement("div");n.className="magic-patterns-resize-handle",n.style.position="absolute",n.style.width="8px",n.style.height="8px",n.style.backgroundColor="#fff",n.style.border=`1px solid ${J}`,n.style.borderRadius="1px",n.style.boxShadow="0 0 0 0.5px rgba(0, 0, 0, 0.08)",n.style.pointerEvents="auto",n.style[t.includes("n")?"top":"bottom"]="-4px",n.style[t.includes("w")?"left":"right"]="-4px",n.style.cursor=t==="nw"||t==="se"?"nwse-resize":"nesw-resize",n.addEventListener("mousedown",o=>Dn(o,t)),e.appendChild(n),nt.push({corner:t,handle:n})}},Dn=(e,t)=>{if(!m||I)return;e.preventDefault(),e.stopPropagation();let n=m,o=n.getBoundingClientRect(),i=h(n),r=i?Array.from(document.querySelectorAll(X(i))):[n];P={element:n,corner:t,startX:e.clientX,startY:e.clientY,startW:o.width,startH:o.height,originals:r.map(l=>({el:l,width:l.style.width,height:l.style.height})),moved:!1},window.addEventListener("mousemove",xt,!0),window.addEventListener("mouseup",Lt,!0)},xt=e=>{if(!P)return;e.preventDefault();let{corner:t,startX:n,startY:o,startW:i,startH:r}=P,l=(e.clientX-n)*(t.includes("e")?1:-1),a=(e.clientY-o)*(t.includes("s")?1:-1),s=Math.max(8,Math.round(i+l)),d=Math.max(8,Math.round(r+a));if(e.shiftKey&&i>0&&r>0){let c=Math.max(s/i,d/r);s=Math.max(8,Math.round(i*c)),d=Math.max(8,Math.round(r*c))}if(!P.moved&&(Math.abs(e.clientX-n)>2||Math.abs(e.clientY-o)>2)){P.moved=!0;let c=h(P.element);c&&T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:c})}for(let{el:c}of P.originals)c.style.width=`${s}px`,c.style.height=`${d}px`;N()},Mt=()=>{window.removeEventListener("mousemove",xt,!0),window.removeEventListener("mouseup",Lt,!0)},Nn=()=>{if(P){for(let{el:e,width:t,height:n}of P.originals)e.style.width=t,e.style.height=n;P=null,Mt(),N()}},Lt=e=>{if(!P)return;e.preventDefault(),e.stopPropagation(),Mt();let t=P;if(P=null,!t.moved)return;let n=h(t.element),o=t.element.getBoundingClientRect(),i=Math.round(o.width)!==Math.round(t.startW),r=Math.round(o.height)!==Math.round(t.startH);if(!n||!i&&!r){An(t);return}if(!i)for(let{el:l,width:a}of t.originals)l.style.width=a;if(!r)for(let{el:l,height:a}of t.originals)l.style.height=a;T({id:y,type:"RESIZE_COMMITTED",dataId:n,width:i?String(Math.round(o.width)):void 0,height:r?String(Math.round(o.height)):void 0}),N()},An=e=>{for(let{el:t,width:n,height:o}of e.originals)t.style.width=n,t.style.height=o;N()},C=null,Rn=e=>{let t=window.getComputedStyle(e).position;if(t!=="absolute"&&t!=="fixed")return!1;let n=h(e);return!!n&&!_e(e,n)},Hn=(e,t)=>{C={element:e,startX:t.clientX,startY:t.clientY,startLeft:0,startTop:0,originals:{left:e.style.left,top:e.style.top,right:e.style.right,bottom:e.style.bottom},active:!1}},_n=()=>
439{if(!C)return;let{element:e}=C,t=e.getBoundingClientRect(),n=window.getComputedStyle(e).position==="fixed";C.startLeft=n?t.left:e.offsetLeft,C.startTop=n?t.top:e.offsetTop,e.style.left=`${C.startLeft}px`,e.style.top=`${C.startTop}px`,e.style.right="auto",e.style.bottom="auto",C.active=!0;let o=h(e);o&&T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:o})},On=e=>{if(!C?.active)return;let{element:t,startX:n,startY:o,startLeft:i,startTop:r}=C,l=e.clientX-n,a=e.clientY-o;e.shiftKey&&(Math.abs(l)>Math.abs(a)?a=0:l=0),t.style.left=`${Math.round(i+l)}px`,t.style.top=`${Math.round(r+a)}px`,N()},Fe=e=>{let{element:t,originals:n}=e;t.style.left=n.left,t.style.top=n.top,t.style.right=n.right,t.style.bottom=n.bottom,N()},vt=()=>{if(!C)return;let e=C;C=null,Fe(e)},kn=()=>{let e=C;if(C=null,!e?.active)return;let{element:t,startLeft:n,startTop:o}=e,i=Math.round(parseFloat(t.style.left)||0),r=Math.round(parseFloat(t.style.top)||0);if(i===Math.round(n)&&r===Math.round(o)){Fe(e);return}let l=h(t);if(!l){Fe(e);return}T({id:y,type:"MOVE_COMMITTED",dataId:l,left:String(i),top:String(r),right:"auto",bottom:"auto"}),N()},It=["paddingTop","paddingRight","paddingBottom","paddingLeft"],ve="rgba(236, 72, 153, 0.16)",ot=new Map,it=new Map,L=null,O=null,Pn=e=>{for(let t of It){let n=document.createElement("div");n.className="magic-patterns-padding-region",n.style.position="absolute",n.style.backgroundColor=ve,n.style.pointerEvents="none",n.style.display="none",e.appendChild(n),it.set(t,n);let o=t==="paddingTop"||t==="paddingBottom",i=document.createElement("div");i.className="magic-patterns-padding-pill",i.style.position="absolute",i.style.width=o?"16px":"4px",i.style.height=o?"4px":"16px",i.style.backgroundColor="#fff",i.style.border="1px solid #EC4899",i.style.borderRadius="2px",i.style.boxShadow="0 0 0 0.5px rgba(0, 0, 0, 0.08)",i.style.pointerEvents="auto",i.style.cursor=o?"ns-resize":"ew-resize",i.style.display="none",i.addEventListener("mouseenter",()=>{O||se(t,!0)}),i.addEventListener("mouseleave",()=>{O||se(t,!1)}),i.addEventListener("mousedown",r=>Bn(r,t)),e.appendChild(i),ot.set(t,i)}L=document.createElement("div"),L.className="magic-patterns-padding-badge",L.style.position="absolute",L.style.padding="1px 5px",L.style.backgroundColor="#EC4899",L.style.color="#fff",L.style.fontSize="10px",L.style.fontFamily="system-ui, sans-serif",L.style.borderRadius="3px",L.style.pointerEvents="none",L.style.display="none",L.style.zIndex="3",e.appendChild(L)},se=(e,t)=>{let n=it.get(e);n&&(n.style.display=t?"block":"none")},Xn=(e,t)=>{let n=window.getComputedStyle(e),o=e.getBoundingClientRect();for(let i of It){let r=ot.get(i),l=it.get(i);if(!r||!l)continue;let a=Math.round(parseFloat(n[i])||0),d=t&&(i==="paddingTop"||i==="paddingBottom"?o.height>=32:o.width>=32);if(r.style.display=d?"block":"none",!d){l.style.display="none";continue}i==="paddingTop"?(r.style.left="calc(50% - 8px)",r.style.top=`${a-2}px`,l.style.left="0",l.style.top="0",l.style.width="100%",l.style.height=`${a}px`):i==="paddingBottom"?(r.style.left="calc(50% - 8px)",r.style.bottom=`${a-2}px`,r.style.top="auto",l.style.left="0",l.style.bottom="0",l.style.top="auto",l.style.width="100%",l.style.height=`${a}px`):i==="paddingLeft"?(r.style.top="calc(50% - 8px)",r.style.left=`${a-2}px`,l.style.top="0",l.style.left="0",l.style.height="100%",l.style.width=`${a}px`):(r.style.top="calc(50% - 8px)",r.style.right=`${a-2}px`,r.style.left="auto",l.style.top="0",l.style.right="0",l.style.left="auto",l.style.height="100%",l.style.width=`${a}px`)}},Bn=(e,t)=>{if(!m||I)return;e.preventDefault(),e.stopPropagation();let n=m,o=Math.round(parseFloat(window.getComputedStyle(n)[t])||0)||0,i=h(n),r=i?Array.from(document.querySelectorAll(X(i))):[n];O={element:n,side:t,startX:e.clientX,startY:e.clientY,startValue:o,originals:r.map(l=>({el:l,previous:l.style[t]})),moved:!1},se(t,!0),window.addEventListener("mousemove",Ct,!0),window.addEventListener("mouseup",wt,!0)},Ct=e=>{if(!O)return;e.preventDefault();let{side:t,startX:n,startY:o,startValue:i}=O,r=t==="paddingTop"?e.clientY-o:t==="paddingBottom"?o-e.clientY:t==="paddingLeft"?e.clientX-n:n-e.clientX,l=Math.max(0,Math.round(i+r));if(!O.moved&&(Math.abs(e.clientX-n)>2||Math.abs(e.clientY-o)>2)){O.moved=!0;let a=h(O.element);a&&T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:a})}for(let{el:a}of O.originals)a.style[t]=`${l}px`;if(L){L.textContent=String(l),L.style.display="block";let a=ot.get(t);a&&(L.style.left=`${a.offsetLeft+20}px`,L.style.top=`${a.offsetTop-4}px`)}N(),se(t,!0)},St=()=>{window.removeEventListener("mousemove",Ct,!0),window.removeEventListener("mouseup",wt,!0),L&&(L.style.display="none")},$n=()=>
439{if(!O)return;let{side:e,originals:t}=O;for(let{el:n,previous:o}of t)n.style[e]=o;O=null,St(),se(e,!1),N()},wt=e=>{if(!O)return;e.preventDefault(),e.stopPropagation(),St();let t=O;O=null,se(t.side,!1);let n=h(t.element),o=Math.round(parseFloat(window.getComputedStyle(t.element)[t.side])||0);if(!t.moved||!n||o===t.startValue){for(let{el:i,previous:r}of t.originals)i.style[t.side]=r;N();return}T({id:y,type:"PADDING_COMMITTED",dataId:n,side:t.side,value:String(o)}),N()},F=null,ke=[],w=null,Yn=e=>{F=document.createElement("div"),F.className="magic-patterns-gap-group",F.style.position="absolute",F.style.inset="0",F.style.pointerEvents="none",e.appendChild(F)},zn=e=>{let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"},Fn=(e,t)=>{if(!F)return;let n=Array.from(e.children).filter(l=>K(l)&&!ge.has(l.tagName.toLowerCase()));if(!(t&&zn(e)&&n.length>=2)){F.style.display="none";return}F.style.display="block";let i=e.getBoundingClientRect(),r=[];for(let l=0;l<n.length-1;l++){let a=n[l].getBoundingClientRect(),s=n[l+1].getBoundingClientRect();if(s.left>=a.right-1&&Math.max(a.top,s.top)<Math.min(a.bottom,s.bottom)){let d=Math.max(s.left-a.right,0);r.push({left:a.right-i.left+d/2-Math.max(d,6)/2,top:Math.min(a.top,s.top)-i.top,width:Math.max(d,6),height:Math.max(a.height,s.height),horizontal:!0})}else if(s.top>=a.bottom-1){let d=Math.max(s.top-a.bottom,0);r.push({left:Math.min(a.left,s.left)-i.left,top:a.bottom-i.top+d/2-Math.max(d,6)/2,width:Math.max(a.width,s.width),height:Math.max(d,6),horizontal:!1})}}for(;ke.length<r.length;){let l=document.createElement("div");l.className="magic-patterns-gap-stripe",l.style.position="absolute",l.style.backgroundColor="transparent",l.style.pointerEvents="auto",l.addEventListener("mouseenter",()=>{w||(l.style.backgroundColor=ve)}),l.addEventListener("mouseleave",()=>{w||(l.style.backgroundColor="transparent")}),l.addEventListener("mousedown",a=>Un(a,l)),F.appendChild(l),ke.push(l)}ke.forEach((l,a)=>{let s=r[a];if(!s){l.style.display="none";return}l.style.display="block",w&&l===w.activeStripe&&(l.style.backgroundColor=ve),l.style.left=`${s.left}px`,l.style.top=`${s.top}px`,l.style.width=`${s.width}px`,l.style.height=`${s.height}px`,l.style.cursor=s.horizontal?"ew-resize":"ns-resize",l.dataset.horizontal=s.horizontal?"1":""})},Un=(e,t)=>{if(!m||I)return;e.preventDefault(),e.stopPropagation();let n=m,o=window.getComputedStyle(n),i=t.dataset.horizontal==="1",r=Math.round(parseFloat(i?o.columnGap:o.rowGap)||0)||0,l=h(n),a=l?Array.from(document.querySelectorAll(X(l))):[n];t.style.backgroundColor=ve,g&&(g.style.cursor=i?"ew-resize":"ns-resize"),w={element:n,horizontal:i,activeStripe:t,startX:e.clientX,startY:e.clientY,startValue:r,originals:a.map(s=>({el:s,previous:s.style.gap})),moved:!1},window.addEventListener("mousemove",Dt,!0),window.addEventListener("mouseup",At,!0)},Dt=e=>{if(!w)return;e.preventDefault();let{horizontal:t,startX:n,startY:o,startValue:i}=w,r=t?e.clientX-n:e.clientY-o,l=Math.max(0,Math.round(i+r));if(!w.moved&&(Math.abs(e.clientX-n)>2||Math.abs(e.clientY-o)>2)){w.moved=!0;let a=h(w.element);a&&T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:a})}for(let{el:a}of w.originals)a.style.gap=`${l}px`;L&&(L.textContent=String(l),L.style.display="block",L.style.left=`${e.clientX-(m?.getBoundingClientRect().left??0)+12}px`,L.style.top=`${e.clientY-(m?.getBoundingClientRect().top??0)-20}px`),N()},Nt=()=>{window.removeEventListener("mousemove",Dt,!0),window.removeEventListener("mouseup",At,!0),L&&(L.style.display="none"),g&&(g.style.cursor=""),w&&(w.activeStripe.style.backgroundColor="transparent")},Wn=()=>{if(w){for(let{el:e,previous:t}of w.originals)e.style.gap=t;Nt(),w=null,N()}},At=e=>{if(!w)return;e.preventDefault(),e.stopPropagation(),Nt();let t=w;w=null;let n=h(t.element),o=window.getComputedStyle(t.element),i=Math.round(parseFloat(t.horizontal?o.columnGap:o.rowGap)||0);if(!t.moved||!n||i===t.startValue){for(let{el:r,previous:l}of t.originals)r.style.gap=l;N();return}T({id:y,type:"GAP_COMMITTED",dataId:n,value:String(i)}),N()},f=null,Pe=6,q=0,Q=new Map,Ue=new Map,We=new Map,H=null,he=e=>{if(!e){H?.remove(),H=null;return}if(!H){H=document.createElement("div"),H.className="magic-patterns-drop-container",H.style.position="fixed",H.style.pointerEvents="none",H.style.zIndex="999999996",H.style.outline=`2px solid ${J}`,H.style.backgroundColor=`rgba(${me}, 0.06)`;let o=document.createElement("div");o.className="magic-patterns-drop-label",o.style.position="absolute",o.style.left="-2px",o.style.backgroundColor=J,o.style.color=Tt,o.style.fontSize="11px",o.style.fontFamily="system-ui, -apple-system, sans-serif",o.style.fontWeight="500",o.style.padding="2px 6px",o.style.borderRadius="4px",o.style.whiteSpace="nowrap",o.style.pointerEvents="none",H.appendChild(o),z().appendChild(H
439)}let t=e.getBoundingClientRect();H.style.left=`${t.left}px`,H.style.top=`${t.top}px`,H.style.width=`${t.width}px`,H.style.height=`${t.height}px`;let n=H.firstElementChild;if(n){let o=e.tagName.toLowerCase(),i=(e.getAttribute("class")||"").trim().split(/\s+/)[0]||"",r=i?`${o}.${i}`:o;n.textContent=r.length>28?`${r.slice(0,27)}\u2026`:r,n.style.top=t.top<26?"4px":"-22px"}},Rt=(e,t)=>{let n=Array.from(e.children).filter(i=>K(i)&&!ge.has(i.tagName.toLowerCase())),o=new Map;for(let i of n){let r=h(i);r&&o.set(r,(o.get(r)??0)+1)}return n.filter(i=>{if(i===t||t.contains(i))return!1;let r=h(i);return!!r&&(o.get(r)??0)===1})},Vn=(e,t,n,o)=>{if(e.length===0)return null;let i=e.map(p=>p.getBoundingClientRect()),r=1/0,l=-1/0,a=1/0,s=-1/0;for(let p of i)r=Math.min(r,p.top),l=Math.max(l,p.top),a=Math.min(a,p.left),s=Math.max(s,p.left);let d=4,c=l-r>d,u=s-a>d;for(let p=0;p<i.length;p++){let E=i[p];if(c&&u){if(n<E.top||n<=E.bottom&&t<E.left+E.width/2)return e[p]}else if(u||!c&&o){if(t<E.left+E.width/2)return e[p]}else if(n<E.top+E.height/2)return e[p]}return null},Gn=e=>{let t=["data-id","data-mp","data-mpi","data-mpe"];for(let n of t)e.removeAttribute(n);e.querySelectorAll("[data-id], [data-mp], [data-mpi], [data-mpe]").forEach(n=>{for(let o of t)n.removeAttribute(o)})},Ht=()=>{f&&(Re(),f.element.style.opacity=f.originalOpacity,f.ghost?.remove(),he(null),g&&(g.style.cursor=""))},qn=80,Kn=10,ft=1,ne=8,Te=100,Ie=4,_t=1e3,Ae=e=>{if(e.nodeType===Node.ELEMENT_NODE)return e.getBoundingClientRect();let t=document.createRange();return t.selectNodeContents(e),t.getBoundingClientRect()},B=(e,t)=>{let n=[];return e.childNodes.forEach(o=>{if(o.nodeType===Node.ELEMENT_NODE){let i=o;if(t&&(i===t||t.contains(i))||(i.getAttribute("class")||"").includes("magic-patterns-"))return;n.push(o);return}o.nodeType===Node.TEXT_NODE&&(o.textContent||"").trim().length>0&&n.push(o)}),n},jn=e=>{let t=new Set;e.parentElement&&t.add(e.parentElement);let n=x?.moveTargetIds;if(n?.length&&x?.dataId===h(e)){let i=new Set(n);document.querySelectorAll("[data-mp], [data-id]").forEach(r=>{let l=h(r);!l||!i.has(l)||r===e||e.contains(r)||t.add(r)})}let o=new Set(x?.textSlotContainerIds??[]);return Array.from(t).map(i=>{let r=0,l=i;for(;l;)r++,l=l.parentElement;let a=h(i),s=!!a&&o.has(a),d=s?B(i,e):Rt(i,e),c=d.length>0||B(i,e).length===0,u="y";if(d.length>0){let p=d.map(ee=>Ae(ee)),E=1/0,S=-1/0,M=1/0,W=-1/0;for(let ee of p)E=Math.min(E,ee.top),S=Math.max(S,ee.top),M=Math.min(M,ee.left),W=Math.max(W,ee.left);let j=S-E>Ie,ct=W-M>Ie,ut=window.getComputedStyle(i),yn=ut.display.includes("flex")&&ut.flexDirection.startsWith("row");u=j&&ct?"grid":ct||!j&&yn?"x":"y"}return{container:i,depth:r,boundaries:d,textSlots:s,interiorEligible:c,layout:u}})},oe=e=>{if(e.height<ne&&e.width>=e.height){let t=(ne-e.height)/2;return{...e,top:e.top-t,height:ne}}if(e.width<ne&&e.height>e.width){let t=(ne-e.width)/2;return{...e,left:e.left-t,width:ne}}return e},Ot=(e,t)=>{let n=[];for(let{container:o,depth:i,boundaries:r,interiorEligible:l,layout:a}of t){if(!o.isConnected)continue;let s=o.getBoundingClientRect();if(s.width===0&&s.height===0||s.bottom<-Te||s.top>window.innerHeight+Te||s.right<-Te||s.left>window.innerWidth+Te)continue;let d=r.filter(u=>u.parentNode===o);if(d.length===0){if(!l)continue;n.push({container:o,before:null,left:s.left,top:s.top,width:s.width,height:s.height,depth:i});continue}let c=d.map(u=>Ae(u));if(a==="grid"){c.forEach((p,E)=>{n.push(oe({container:o,before:d[E],left:p.left-6,top:p.top,width:12,height:p.height,depth:i}))});let u=c[c.length-1];n.push(oe({container:o,before:null,left:u.right-6,top:u.top,width:12,height:u.height,depth:i}))}else if(a==="x"){let u=s.left;c.forEach((p,E)=>{n.push(oe({container:o,before:d[E],left:u,top:s.top,width:Math.max(p.left-u,0),height:s.height,depth:i})),u=p.right}),n.push(oe({container:o,before:null,left:u,top:s.top,width:Math.max(s.right-u,0),height:s.height,depth:i}))}else{let u=s.top;c.forEach((p,E)=>{n.push(oe({container:o,before:d[E],left:s.left,top:u,width:s.width,height:Math.max(p.top-u,0),depth:i})),u=p.bottom}),n.push(oe({container:o,before:null,left:s.left,top:u,width:s.width,height:Math.max(s.bottom-u,0),depth:i}))}}return n},mt=(e,t,n)=>{let o=Math.max(n.left-e,0,e-(n.left+n.width)),i=Math.max(n.top-t,0,t-(n.top+n.height)),r=M
439ath.hypot(o,i);return r>0?_t+r:n.height<=n.width?Math.abs(t-(n.top+n.height/2)):Math.abs(e-(n.left+n.width/2))},kt=(e,t,n,o)=>{let i=null,r=1/0;for(let l of e){let a=mt(t,n,l);(!i||a<r-ft||a<=r+ft&&l.depth>i.depth)&&(i=l,r=a)}if(!i||r>_t+qn)return null;if(o){let l=e.find(a=>a.container===o.container&&a.before===o.before);if(l&&l!==i){let a=mt(t,n,l);if(r+Kn>=a)return l}}return i},x=null,Ve=null,Qn=1500,Zn=(e,t)=>{let n=h(e),o=e.parentElement;!n||!o||_e(e,n)&&x?.dataId===n&&x.canReorderList===!1||x?.dataId===n&&x.canRestructure===!1||(f={element:e,startX:t.clientX,startY:t.clientY,active:!1,container:e.parentElement,originalContainer:e.parentElement,originalNextSibling:e.nextSibling,siblings:[],isListDrag:!1,horizontal:!1,fromIndex:-1,dropBefore:null,slotContainers:[],slot:null,ghost:null,grabOffsetX:0,grabOffsetY:0,originalOpacity:""})},Jn=()=>{if(!f||!f.container)return;let e=f.element,t=h(e),n=Array.from(f.container.children).filter(E=>K(E)&&!ge.has(E.tagName.toLowerCase())),o=new Map;for(let E of n){let S=h(E);S&&o.set(S,(o.get(S)??0)+1)}let i=(o.get(t??"")??0)>1||on(t??null),r=n.filter(E=>{if(E===e)return!1;let S=h(E);return S?i?S===t:(o.get(S)??0)===1:!1}),l=!i&&!!x?.moveTargetIds?.length&&x.dataId===t;if(r.length===0&&!l){f=null;return}let a=window.getComputedStyle(f.container),s=a.display.includes("flex")&&a.flexDirection.startsWith("row");f.originalNextSibling=e.nextSibling,i&&(f.fromIndex=n.filter(E=>h(E)===t).indexOf(e));let d=e.getBoundingClientRect(),c=e.cloneNode(!0);Gn(c),c.classList.add("magic-patterns-drag-ghost");let u=Math.min(1,260/Math.max(d.width,1),160/Math.max(d.height,1));c.style.position="fixed",c.style.left=`${d.left}px`,c.style.top=`${d.top}px`,c.style.width=`${d.width}px`,c.style.height=`${d.height}px`,c.style.margin="0",c.style.boxSizing="border-box",c.style.opacity="0.75",c.style.pointerEvents="none",c.style.zIndex="999999999",c.style.transform=`scale(${u})`,c.style.transformOrigin="top left",c.style.transition="none",c.style.boxShadow="0 8px 24px rgba(0, 0, 0, 0.25)",c.style.borderRadius=window.getComputedStyle(e).borderRadius;let p=window.getComputedStyle(e).backgroundColor;(!p||p==="rgba(0, 0, 0, 0)")&&(c.style.backgroundColor="rgba(255, 255, 255, 0.92)"),z().appendChild(c),V=0,f.active=!0,f.siblings=r,f.isListDrag=i,f.slotContainers=i?[]:jn(e),f.horizontal=s,f.ghost=c,f.grabOffsetX=(f.startX-d.left)*u,f.grabOffsetY=(f.startY-d.top)*u,f.originalOpacity=f.element.style.opacity,f.element.style.opacity="0.5",$(),He(),lt(),ae(),U(),g&&(g.style.cursor="grabbing")},ue=140,eo=40,Ge=new Set,le=null,qe=(e,t,n)=>{let o=new Set;e.parentElement&&o.add(e.parentElement),o.add(t);let i=e.nodeType===Node.ELEMENT_NODE?[e]:[];if(o.forEach(a=>{for(let s of Array.from(a.children))s!==e&&i.push(s)}),i.length>eo)return n(),!1;let r=i.map(a=>a.getBoundingClientRect());n();let l=[];if(i.forEach((a,s)=>{let d=a.getBoundingClientRect(),c=r[s].left-d.left,u=r[s].top-d.top;Math.abs(c)<1&&Math.abs(u)<1||(a.style.transition="none",a.style.transform=`translate(${c}px, ${u}px)`,l.push(a),Ge.add(a))}),l.length===0)return!1;document.body.offsetHeight;for(let a of l)a.style.transition=`transform ${ue}ms ease`,a.style.transform="";return le!==null&&window.clearTimeout(le),le=window.setTimeout(Re,ue+40),!0},Re=()=>{Ge.forEach(e=>{e.style.transition="",e.style.transform=""}),Ge.clear(),le!==null&&(window.clearTimeout(le),le=null)},Xe=!1,be=null,V=0,to=e=>{f?.active&&(f.ghost&&(f.ghost.style.left=`${e.clientX-f.grabOffsetX}px`,f.ghost.style.top=`${e.clientY-f.grabOffsetY}px`),be={x:e.clientX,y:e.clientY},!Xe&&(Xe=!0,requestAnimationFrame(()=>{Xe=!1,f?.active&&be&&no(be.x,be.y)})))},no=(e,t)=>{if(!f?.active)return;let{element:n}=f;if(!f.isListDrag){if(performance.now()<V)return;let a=Ot(n,f.slotContainers),s=kt(a,e,t,f.slot);s&&(f.slot={container:s.container,before:s.before});let d=f.slot;if(!d)return;if(he(d.container),d.before!==n&&(n.parentElement!==d.container||n.nextSibling!==d.before))try{qe(n,d.container,()=>{d.container.insertBefore(n,d.before)})&&(V=performance.now()+ue)}catch{}return}if(performance.now()<V)return;let{container:o,siblings:i}=f,r=Vn(i,e,t,f.horizontal);f.dropBefore=r;let l=r;if(!r){let a=Array.from(o.children).filter(s=>h(s)===h(n));l=a[a.length-1]?.nextElementSibling??null,l===n&&(l=n.nextElementSibling)}if(l!==n&&(n.parentElement!==o||n.nextElementSibling!==l)){let a=l;qe(n,o,()=>{o.insertBefore(n,a)})&&(V=performance.now()+ue)}},Pt=()=>{if(f){if(f.active){let{element:e,originalContainer:t,originalNextSibling:n}=f;if(Ht(),e.parentElement!==t||e.nextSibling!==n)try{t.insertBefore(e,n)}catch{t.appendChild(e)}R(e)}f=null}},oo=()=>
439{if(!f?.active){f=null;return}let{element:e,originalContainer:t,originalNextSibling:n,isListDrag:o}=f,i=f.fromIndex,r=h(e),l=e.parentElement;if(Ht(),f=null,!r||!l)return;if(l===t&&e.nextSibling===n){R(e),G({element:e,accented:!0});return}if(o){let E=Array.from(l.children).filter(M=>h(M)===r).indexOf(e);if(i<0||E<0||i===E){R(e),G({element:e,accented:!0});return}let S=`mp-reorder-${++q}`;Q.set(S,[{node:e,parent:t,next:n}]),T({id:y,type:"REORDER_ELEMENT",dataId:r,isListItem:!0,fromIndex:i,toIndex:E,beforeDataId:null,reorderToken:S}),R(e),G({element:e,accented:!0});return}let s=Rt(l,e).find(p=>e.compareDocumentPosition(p)&Node.DOCUMENT_POSITION_FOLLOWING)??null,d=s?h(s)??null:null,c=h(l),u;if(c&&x?.textSlotContainerIds?.includes(c)){let p=B(l,null).indexOf(e);p!==-1&&(u=p)}if(l!==t){let p=h(l);if(!p){try{t.insertBefore(e,n)}catch{t.appendChild(e)}R(e);return}let E=`mp-reorder-${++q}`;Q.set(E,[{node:e,parent:t,next:n}]),T({id:y,type:"REORDER_ELEMENT",dataId:r,isListItem:!1,fromIndex:-1,toIndex:-1,beforeDataId:d,childIndex:u,containerDataId:p,reorderToken:E})}else{let p=[{node:e,parent:t,next:n}],E=Array.from(document.querySelectorAll(X(r)));for(let M of E){if(M===e||!M.parentElement)continue;if(u!=null){p.push({node:M,parent:M.parentElement,next:M.nextSibling}),Bt(M.parentElement,M,u);continue}let W=d?Array.from(M.parentElement.children).find(j=>h(j)===d):null;d&&!W||(p.push({node:M,parent:M.parentElement,next:M.nextSibling}),M.parentElement.insertBefore(M,W??null))}let S=`mp-reorder-${++q}`;Q.set(S,p),T({id:y,type:"REORDER_ELEMENT",dataId:r,isListItem:!1,fromIndex:-1,toIndex:-1,beforeDataId:d,childIndex:u,reorderToken:S})}R(e),G({element:e,accented:!0})},b=null,k=null,Xt=e=>!!x?.selfTextSlots&&x.dataId===h(e)&&B(e,null).length>=2,gt=(e,t)=>{let n=Zt(e);if(n){n.placeholder=t;return}if(!(e.children.length>0)){e.textContent=t;return}let i=Array.from(e.childNodes).filter(r=>r.nodeType===Node.TEXT_NODE&&(r.textContent||"").trim().length>0);i.length===1?i[0].nodeValue=t:i.length===0&&e.appendChild(document.createTextNode(t))},rt=(e,t,n)=>{for(let o of Array.from(e.childNodes)){if(o.nodeType!==Node.TEXT_NODE||!(o.textContent||"").trim())continue;let i=document.createRange();i.selectNodeContents(o);for(let r of Array.from(i.getClientRects()))if(t>=r.left&&t<=r.right&&n>=r.top&&n<=r.bottom)return o}return null},Z=e=>{if(!e){k?.remove(),k=null,g&&(g.style.cursor="");return}k||(k=document.createElement("div"),k.className="magic-patterns-text-hover",k.style.position="fixed",k.style.pointerEvents="none",k.style.zIndex="999999997",k.style.outline=`1.5px dashed ${J}`,k.style.outlineOffset="2px",k.style.borderRadius="2px",z().appendChild(k));let t=Ae(e);k.style.left=`${t.left}px`,k.style.top=`${t.top}px`,k.style.width=`${t.width}px`,k.style.height=`${t.height}px`,g&&(g.style.cursor="grab")},io=(e,t,n)=>{let o=B(t,null).indexOf(e);o!==-1&&(b={textNode:e,container:t,startX:n.clientX,startY:n.clientY,active:!1,fromChildIndex:o,originalNext:e.nextSibling,slot:null,ghost:null,layout:"y"})},ro=()=>{if(!b)return;let{textNode:e,container:t}=b,n=document.createElement("div");n.className="magic-patterns-text-ghost";let o=(e.textContent||"").trim();n.textContent=o.length>42?`${o.slice(0,41)}\u2026`:o,n.style.position="fixed",n.style.maxWidth="260px",n.style.overflow="hidden",n.style.whiteSpace="nowrap",n.style.textOverflow="ellipsis",n.style.padding="4px 8px",n.style.backgroundColor="rgba(255, 255, 255, 0.95)",n.style.border="1px solid #CBD5E1",n.style.borderRadius="6px",n.style.boxShadow="0 6px 18px rgba(0, 0, 0, 0.2)",n.style.fontSize="12px",n.style.fontFamily="system-ui, -apple-system, sans-serif",n.style.color="#1E293B",n.style.pointerEvents="none",n.style.zIndex="999999999",n.style.opacity="0.9",z().appendChild(n),b.ghost=n;let i=B(t,null).filter(r=>r!==e);if(i.length>0){let r=i.map(p=>Ae(p)),l=1/0,a=-1/0,s=1/0,d=-1/0;for(let p of r)l=Math.min(l,p.top),a=Math.max(a,p.top),s=Math.min(s,p.left),d=Math.max(d,p.left);let c=a-l>Ie,u=d-s>Ie;b.layout=c&&u?"grid":u?"x":"y"}V=0,b.active=!0,Z(null),$(),He(),ae(),U(),he(t),g&&(g.style.cursor="grabbing")},lo=e=>{if(!b?.active)return;let{textNode:t,container:n,ghost:o,layout:i}=b;if(o&&(o.style.left=`${e.clientX+10}px`,o.style.top=`${e.clientY+12}px`),performance.now()<V)return;let r=Ot(t,[{container:n,depth:1,boundaries:B(n,null).filter(a=>a!==t),textSlots:!0,interiorEligible:!1,layout:i}]),l=kt(r,e.clientX,e.clientY,b.slot!==null?{container:n,before:b.slot}
439:{container:n,before:t.nextSibling});l&&(b.slot=l.before,(t.nextSibling!==l.before||t.parentNode!==n)&&qe(t,n,()=>{n.insertBefore(t,l.before)})&&(V=performance.now()+ue))},so=()=>{if(b){if(b.active){let{textNode:e,container:t,originalNext:n}=b;b.ghost?.remove(),he(null),Re(),g&&(g.style.cursor="");try{t.insertBefore(e,n)}catch{t.appendChild(e)}m&&R(m)}b=null}},ao=(e,t,n)=>{let i=B(e,null)[t];if(!i||i.nodeType!==Node.TEXT_NODE)return null;let r={node:i,parent:e,next:i.nextSibling};return Bt(e,i,n),r},Bt=(e,t,n)=>{let o=B(e,null).filter(r=>r!==t),i=n>=o.length?o[o.length-1]?.nextSibling??null:o[n];e.insertBefore(t,i)},co=()=>{if(!b?.active){b=null;return}let{textNode:e,container:t,fromChildIndex:n,originalNext:o}=b;b.ghost?.remove(),he(null),Re(),g&&(g.style.cursor=""),b=null;let i=h(t),r=B(t,null).indexOf(e);if(!i||r===-1||r===n){if(r!==n)try{t.insertBefore(e,o)}catch{t.appendChild(e)}m&&R(m);return}let l=[{node:e,parent:t,next:o}],a=Array.from(document.querySelectorAll(X(i)));for(let d of a){if(d===t)continue;let c=ao(d,n,r);c&&l.push(c)}let s=`mp-reorder-${++q}`;Q.set(s,l),T({id:y,type:"REORDER_ELEMENT",dataId:i,isListItem:!1,isTextNode:!0,fromIndex:-1,toIndex:-1,beforeDataId:null,fromChildIndex:n,toChildIndex:r,reorderToken:s}),m&&R(m)},Ee=(e,t)=>{let n=document.elementsFromPoint(e,t);for(let o of n){let i=o;if(!(i.id?.startsWith("magic-patterns-")||(i.getAttribute("class")||"").includes("magic-patterns-"))&&!ge.has(i.tagName.toLowerCase())&&K(i))return i}return null},$t=(e,t)=>{let n=document.elementsFromPoint(e,t);for(let o of n){let i=o;if(i.id?.startsWith("magic-patterns-")||(i.getAttribute("class")||"").includes("magic-patterns-"))continue;let r=i;for(;r&&r!==document.documentElement;){let l=window.getComputedStyle(r),a=l.overflowY,s=l.overflowX,d=(a==="auto"||a==="scroll")&&r.scrollHeight>r.clientHeight,c=(s==="auto"||s==="scroll")&&r.scrollWidth>r.clientWidth;if(d||c)return r;r=r.parentElement}return document.scrollingElement||document.documentElement}return document.scrollingElement||document.documentElement},z=()=>{let e=document.getElementById("magic-patterns-app-layer");return e||(e=document.createElement("div"),e.id="magic-patterns-app-layer",document.documentElement.appendChild(e)),e},uo=()=>{let e=document.createElement("div");return e.id="magic-patterns-edit-overlay",e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.width="100%",e.style.height="100%",e.style.pointerEvents="all",e.style.backgroundColor="transparent",e.style.zIndex="999999998",e},He=()=>{for(let e of $e)e.remove();$e=[]},po=e=>{He();let t=Array.from(e.children).filter(n=>{let o=n;return K(o)&&!ge.has(o.tagName.toLowerCase())});for(let n of t){let{x:o,y:i,width:r,height:l}=n.getBoundingClientRect();if(r<1||l<1)continue;let a=document.createElement("div");a.className="magic-patterns-child-overlay",a.style.position="fixed",a.style.backgroundColor="transparent",a.style.zIndex="999999997",a.style.pointerEvents="none",a.style.outline=`2px dashed rgba(${me}, 0.3)`,a.style.borderRadius="1px",a.style.left=o+"px",a.style.top=i+"px",a.style.width=r+"px",a.style.height=l+"px",z().appendChild(a),$e.push(a)}},ae=()=>{for(let e of Ye)e.remove();Ye=[]},G=e=>{ae();let t=h(e.element);if(!t)return;let n=document.querySelectorAll(X(t));if(n.length<=1)return;let o=e.accented?`2px dashed ${J}`:`2px dashed rgba(${me}, 0.4)`;for(let i of Array.from(n)){if(i===e.element)continue;let r=document.createElement("div");r.className="magic-patterns-list-sibling-overlay",r.style.position="fixed",r.style.backgroundColor="transparent",r.style.zIndex="999999997",r.style.pointerEvents="none",r.style.outline=o;let{x:l,y:a,width:s,height:d}=i.getBoundingClientRect();r.style.left=l+"px",r.style.top=a+"px",r.style.width=s+"px",r.style.height=d+"px",z().appendChild(r),Ye.push(r)}},lt=()=>{for(let e of ze)e.remove();ze=[]},fo=e=>{lt();let t=h(e);if(!t)return;let n=document.querySelectorAll(X(t));if(!(n.length<=1))for(let o of Array.from(n)){if(o===e)continue;let i=document.createElement("div");i.className="magic-patterns-hover-list-sibling-overlay",i.style.position="fixed",i.style.backgroundColor="transparent",i.style.zIndex="999999997",i.style.pointerEvents="none",i.style.outline=`2px dashed rgba(${me}, 0.4)`;let{x:r,y:l,width:a,height:s}=o.getBoundingClientRect();i.style.left=r+"px",i.style.top=l+"px",i.style.width=a+"px",i.style.height=s+"px",z().appendChild(i),ze.push(i)}},ye=e=>{A||(A=document.createElement("div"),A.id="magic-patterns-hover-overlay",A.style.position="fixed",A.style.backgroundColor="transparent",A.style.zIndex="999999998",A.style.pointerEvents="none",A.style.outline=`2px dashed rgba(${me}, 0.5)`,A.style.borderRadius="1px",z().appendChild(A));let{x:t,y:n,width:o,height:i}=e.getBoundingClientRect();
439A.style.left=t+"px",A.style.top=n+"px",A.style.width=o+"px",A.style.height=i+"px",A.style.display="block",po(e),fo(e)},$=()=>{A&&(A.style.display="none"),He(),lt()},xe=null,ht=null,Yt=e=>{ht!==e&&(xe?.disconnect(),ht=e,e&&(xe||(xe=new ResizeObserver(()=>{N()})),xe.observe(e)))},N=()=>{m&&(f?.active||(R(m),I?Ft():G({element:m,accented:!0})))},de=[],zt=()=>{for(let e of de)e.remove();de=[]},mo=e=>{e.preventDefault(),e.stopPropagation(),Y(),_=Ee(e.clientX,e.clientY),dt(e)},Ft=()=>{if(!I)return;let e=I.getBoundingClientRect(),t=[{left:0,top:0,width:window.innerWidth,height:Math.max(e.top,0)},{left:0,top:e.bottom,width:window.innerWidth,height:Math.max(window.innerHeight-e.bottom,0)},{left:0,top:e.top,width:Math.max(e.left,0),height:e.height},{left:e.right,top:e.top,width:Math.max(window.innerWidth-e.right,0),height:e.height}];if(de.length!==t.length){zt();for(let n=0;n<t.length;n++){let o=document.createElement("div");o.className="magic-patterns-edit-shield",o.style.position="fixed",o.style.backgroundColor="transparent",o.style.zIndex="999999998",o.style.pointerEvents="all",o.addEventListener("mousedown",mo),z().appendChild(o),de.push(o)}}de.forEach((n,o)=>{n.style.left=`${t[o].left}px`,n.style.top=`${t[o].top}px`,n.style.width=`${t[o].width}px`,n.style.height=`${t[o].height}px`})},Ut=e=>{let t=document.getElementById("magic-patterns-tag-label");t&&(t.style.display=e?"flex":"none")},R=e=>{if(!v){if(v=document.createElement("div"),v.id="magic-patterns-selection-overlay",v.style.position="fixed",v.style.backgroundColor="transparent",v.style.zIndex="999999999",v.style.pointerEvents="none",v.style.outline=`2px dashed ${J}`,v.style.borderRadius="1px",!document.getElementById("magic-patterns-tag-styles")){let p=document.createElement("style");p.id="magic-patterns-tag-styles",p.textContent=`
440        #magic-patterns-tag-label {
441          position: absolute;
442          left: -2px;
443          background-color: ${J};
444          color: ${Tt};
445          font-size: 13px;
446          font-family: system-ui, -apple-system, sans-serif;
447          font-weight: 500;
448          padding: 4px 10px;
449          border-radius: 4px;
450          white-space: nowrap;
451          display: flex;
452          align-items: center;
453          gap: 6px;
454          border: none;
455          outline: none;
456          cursor: pointer;
457          pointer-events: auto;
458          transition: background-color 0.15s ease;
459          min-height: auto !important;
460          min-width: auto !important;
461        }
462        #magic-patterns-tag-label:hover {
463          background-color: ${bn};
464        }
465        #magic-patterns-tag-label:active {
466          background-color: ${xn};
467        }
468      `,document.head.appendChild(p)}let s=document.createElement("button");s.id="magic-patterns-tag-label";let d=document.createElement("span");d.id="magic-patterns-tag-text",s.appendChild(d);let c=document.createElementNS("http://www.w3.org/2000/svg","svg");c.setAttribute("width","16"),c.setAttribute("height","16"),c.setAttribute("viewBox","0 0 15 15"),c.setAttribute("fill","none"),c.style.flexShrink="0";let u=document.createElementNS("http://www.w3.org/2000/svg","path");u.setAttribute("d","M4 5.5L7.5 9L11 5.5"),u.setAttribute("fill","none"),u.setAttribute("stroke","currentColor"),u.setAttribute("stroke-width","2"),u.setAttribute("stroke-linecap","round"),u.setAttribute("stroke-linejoin","round"),c.appendChild(u),s.appendChild(c),s.addEventListener("click",p=>{if(p.stopPropagation(),m){let E=m.getBoundingClientRect();T({id:y,type:"TOGGLE_ELEMENT_DROPDOWN",coordinates:{clientX:E.left,clientY:E.top}})}}),v.appendChild(s),wn(v),Pn(v),Yn(v),z().appendChild(v)}let{x:t,y:n,width:o,height:i}=e.getBoundingClientRect();v.style.left=t+"px",v.style.top=n+"px",v.style.width=o+"px",v.style.height=i+"px",v.
468style.display="block";let r=v.querySelector("#magic-patterns-tag-label");if(r){n<32?(r.style.top="auto",r.style.bottom="-32px"):(r.style.top="-32px",r.style.bottom="auto");let d=-2;t+d<3?r.style.left=`${-t+3}px`:r.style.left=`${d}px`}let l=v.querySelector("#magic-patterns-tag-text");l&&(l.textContent=e.tagName.toLowerCase());let a=!I&&!f?.active&&!e.closest("[data-mp-clone]")&&window.getComputedStyle(e).display!=="inline";Cn(a),Sn(o,i),Xn(e,a),Fn(e,a),Yt(e)},U=()=>{v&&(v.style.display="none"),ae(),Yt(null)},Wt=e=>{let t=e.target,n=t?h(t):void 0;n&&pe!==t&&(T({id:y,type:"TEXT_CONTENT_CHANGED",dataId:n,textContent:t.innerText||t.textContent||""}),requestAnimationFrame(N))},Vt=e=>{pe||e.key===" "&&(e.preventDefault(),document.execCommand("insertText",!1," "))},Y=()=>{let e=I;I=null;let t=we,n=Ke,o=De;we=null,Ke="",De=[];let i=pe,r=Ne,l=je;if(pe=null,Ne="",je="",e){e.removeEventListener("input",Wt),e.removeEventListener("blur",Gt),e.removeEventListener("keydown",Vt),e.removeEventListener("click",Ce,!0),e.removeEventListener("dblclick",Ce,!0);for(let s of qt)e.removeEventListener(s,Se,!0);for(let s of jt)e.removeEventListener(s,Kt,!0);for(let s of Qt)e.removeEventListener(s,Se,!0);e.style.userSelect=e.dataset.mpPrevUserSelect||"",e.style.webkitUserSelect=e.dataset.mpPrevUserSelect||"",delete e.dataset.mpPrevUserSelect,e.style.cursor=e.dataset.mpPrevCursor||"",delete e.dataset.mpPrevCursor,i||(e.removeAttribute("contenteditable"),e.removeAttribute("spellcheck"));for(let s of o)s.removeAttribute("contenteditable");e.style.outline=e.dataset.mpPrevOutline||"",delete e.dataset.mpPrevOutline;let a=h(e);if(i){let s=i.value;i.value=l,i.placeholder=s,a&&s!==r&&T({id:y,type:"PLACEHOLDER_EDIT_COMMITTED",dataId:a,originalText:r,textContent:s,ephemeralId:e.dataset.mpe})}else if(t){let s=t.isConnected?t.textContent||"":n;if(a&&s!==n){let d=B(e,null).indexOf(t);if(d!==-1){let c=[{node:t,text:n}],u=Array.from(document.querySelectorAll(X(a)));for(let S of u){if(S===e)continue;let M=B(S,null)[d];M&&M.nodeType===Node.TEXT_NODE&&(c.push({node:M,text:M.textContent||""}),M.textContent=s)}let p=`mp-reorder-${++q}`;We.set(p,c),T({id:y,type:"TEXT_NODE_EDIT_COMMITTED",dataId:a,childIndex:d,originalText:n,textContent:s,reorderToken:p})}}}else{let s=e.innerText||e.textContent||"";if(a&&s!==Me){let d=document.querySelectorAll(X(a)),c=e.closest("[data-mpi]"),u=c?parseInt(c.getAttribute("data-mpi")||"",10):NaN;T({id:y,type:"TEXT_EDIT_COMMITTED",dataId:a,originalText:Me,textContent:s,isListItem:d.length>1,instanceIndex:Number.isNaN(u)?Math.max(Array.from(d).indexOf(e),0):u,ephemeralId:e.dataset.mpe,cloneToken:e.closest("[data-mp-clone-token]")?.getAttribute("data-mp-clone-token")??void 0})}}Me=""}window.getSelection()?.removeAllRanges(),zt(),Ut(!0),g&&(g.style.pointerEvents="all"),N()},Gt=()=>{let e=I;if(e&&performance.now()-yt<800){let t=window.getSelection(),n=t&&t.rangeCount>0?t.getRangeAt(0).cloneRange():null;requestAnimationFrame(()=>{I===e&&(e.focus({preventScroll:!0}),n&&t&&(t.removeAllRanges(),t.addRange(n)))});return}Y()},Ce=e=>{e.preventDefault(),e.stopPropagation()},Se=e=>{e.stopPropagation()},qt=["pointerdown","pointerup","mousedown","mouseup"],Kt=e=>{e.key!=="Escape"&&(e.key==="Enter"&&(e.metaKey||e.ctrlKey)||e.stopPropagation())},jt=["keydown","keyup","keypress"],Qt=["input","beforeinput","change"],we=null,Ke="",De=[],pe=null,Ne="",je="",Zt=e=>{let t=e.tagName.toLowerCase();return t!=="input"&&t!=="textarea"||!e.hasAttribute("placeholder")?null:e},fe=(e,t,n)=>{Y(),f=null,C=null,m=e,D=null,$(),ae(),R(e),Ut(!1),g&&(g.style.pointerEvents="none"),n||(e.setAttribute("contenteditable","true"),e.setAttribute("spellcheck","false")),e.dataset.mpPrevOutline=e.style.outline,e.style.outline="none",e.addEventListener("input",Wt),e.addEventListener("blur",Gt),e.addEventListener("keydown",Vt),e.addEventListener("click",Ce,!0),e.addEventListener("dblclick",Ce,!0);for(let r of qt)e.addEventListener(r,Se,!0);for(let r of jt)e.addEventListener(r,Kt,!0);if(n)for(let r of Qt)e.addEventListener(r,Se,!0);if(e.dataset.mpPrevUserSelect=e.style.userSelect,e.style.userSelect="text",e.style.webkitUserSelect="text",e.dataset.mpPrevCursor=e.style.cursor,e.style.cursor="text",I=e,Me=e.innerText||e.textContent||"",pe=n??null,Ne=n?n.placeholder:"",je=n?n.value:"",n&&(n.placeholder="",n.value=Ne),we=t??null,Ke=t&&t.textContent||"",De=[],t)for(let r of Array.from(e.children))r.getAttribute("contenteditable")!=="false"&&(r.setAttribute("contenteditable","false"),De.push(r));Ft(),yt=performance.now(),e.focus({preventScroll:!0}),n?n.select():Qe(e);let o=0,i=()=>
468{if(I===e){if(document.activeElement!==e&&e.focus({preventScroll:!0}),document.activeElement===e){n?n.select():Jt(e)||Qe(e);return}++o<8&&window.setTimeout(i,50)}};window.setTimeout(i,50)},Qe=e=>{let t=window.getSelection();if(!t)return;let n=Array.from(e.childNodes).filter(r=>r.nodeType===Node.TEXT_NODE&&(r.textContent||"").trim()),o=we??(e.children.length>0&&n.length===1?n[0]:null),i=document.createRange();i.selectNodeContents(o??e),t.removeAllRanges(),t.addRange(i)},Jt=e=>{let t=window.getSelection();return!t||t.rangeCount===0?!1:e.contains(t.getRangeAt(0).commonAncestorContainer)},go=e=>{if(!Array.from(e.childNodes).some(o=>o.nodeType===Node.TEXT_NODE&&(o.textContent||"").trim()!==""))return!1;let n=e.closest("[data-mp-clone]");if(n&&(h(n)||"").startsWith("mpc-"))return!1;if(e.children.length>0){let o=Array.from(e.children).some(r=>(r.innerText||r.textContent||"").trim().length>0),i=Array.from(e.childNodes).filter(r=>r.nodeType===Node.TEXT_NODE&&(r.textContent||"").trim());if(o||i.length>1)return!1}return!(x?.dataId===h(e)&&(x?.canEditText??!1)===!1)},Ze=null,Je=null,st=(e,t)=>{Ze=e,Je=t;let n=e.getBoundingClientRect();T({id:y,type:"TEXT_EDIT_BLOCKED",reason:t,rect:{x:n.x,y:n.y,width:n.width,height:n.height}})},en=()=>{let e=Ze,t=Je;if(!(!e||!t)){if(!e.isConnected||e!==m){Ze=null,Je=null;return}st(e,t)}},tn=e=>{let t=Ee(e.clientX,e.clientY);if(!t)return;let n=h(t);if(!n)return;let o=Zt(t);if(o){let l=x;if(l?.dataId!==n)return;if(!l.canEditPlaceholder){st(t,l.textEditBlockedReason??"unsupported-shape");return}T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:n}),fe(t,null,o);return}if(!Array.from(t.childNodes).some(l=>l.nodeType===Node.TEXT_NODE&&(l.textContent||"").trim()!==""))return;let r=t.closest("[data-mp-clone]");if(!(r&&(h(r)||"").startsWith("mpc-"))){if(t.children.length>0){let l=Array.from(t.children).some(s=>(s.innerText||s.textContent||"").trim().length>0),a=Array.from(t.childNodes).filter(s=>s.nodeType===Node.TEXT_NODE&&(s.textContent||"").trim());if(l||a.length>1){if(x?.dataId===n&&x.selfTextSlots){let s=rt(t,e.clientX,e.clientY);s&&(T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:n}),fe(t,s))}return}}if(x?.dataId!==n){Ve={elementId:n,element:t,requestedAt:Date.now()};return}nn(t,n)}},nn=(e,t)=>{let n=x;if(n?.dataId===t){if(n.canEditText===!1){st(e,n.textEditBlockedReason??"unsupported-shape");return}T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:t}),fe(e)}},ho=e=>{let t=Ve;Ve=null,!(!t||t.elementId!==e)&&(Date.now()-t.requestedAt>Qn||t.element.isConnected&&nn(t.element,e))},et=e=>{if(!e||!e.parentElement)return null;let t=e.parentElement;return K(t)?t:et(t)},at=null,on=e=>!!e&&x?.dataId===e&&x.isListItemRoot===!0,_e=(e,t)=>{if(on(t))return!0;let n=e.parentElement;return n?Array.from(n.children).filter(o=>h(o)===t).length>1:!1},rn=(e,t)=>{let n=e.parentElement;return n?Array.from(n.children).filter(o=>h(o)===t).indexOf(e):-1},ln=()=>{let e=m;if(!e||I||f||b)return;let t=h(e);if(!t)return;let n=_e(e,t);if(x?.dataId!==t||x.canRestructure===!1||n&&!x.canReorderList)return;let o=n?rn(e,t):-1;if(n&&o===-1)return;let i=[],r=n?[e]:Array.from(document.querySelectorAll(X(t)));for(let s of r)s.parentElement&&(i.push({node:s,parent:s.parentElement,next:s.nextSibling}),s.parentElement.removeChild(s));if(i.length===0)return;let l=`mp-reorder-${++q}`;Q.set(l,i);let a;if(!n){let s=new Set([t]);i[0].node.querySelectorAll?.("[data-mp], [data-id]").forEach(d=>{let c=h(d);c&&s.add(c)}),a=Array.from(s)}T({id:y,type:"DELETE_ELEMENT",dataId:t,isListItem:n,instanceIndex:o,removedIds:a,reorderToken:l}),m=null,D=null,U(),ae(),T({id:y,type:"UNSELECT_ELEMENT"})},sn=()=>{let e=m;if(!e||I)return;let t=h(e);if(!t)return;let n=_e(e,t);at={dataId:t,isListItem:n,canSplice:x?.dataId===t&&x.canRestructure!==!1&&(!n||x.canReorderList===!0),element:e},T({id:y,type:"ELEMENT_CLIPBOARD_CHANGED",hasClipboard:!0})},an=()=>{let e=at;if(!e||I)return;let{dataId:t,isListItem:n,canSplice:o,element:i}=e;if(!i.isConnected||!o)return;let r=n?rn(i,t):-1;if(n&&r===-1)return;let l=[],a=n?void 0:`mpc-${++q}`,s=`mp-reorder-${++q}`,d=n?[i]:Array.from(document.querySelectorAll(X(t)));for(let c of d){if(!c.parentElement)continue;let u=c.cloneNode(!0);u.removeAttribute("data-mpi"),u.removeAttribute("data-mpe"),u.querySelectorAll("[data-mpi], [data-mpe]").forEach(p=>{p.removeAttribute("data-mpi"),p.removeAttribute("data-mpe")}),n||(u.querySelectorAll("[data-mp], [data-id]").forEach(p=>{p.removeAttribute("data-mp"),p.removeAttribute("data-id")}),u.setAttribute("data-mp",a),u.removeAttribute("data-id")),u.setAttribute("data-mp-clone","1"),u.setAttribute("data-mp-clone-token",s),c.parentElement.insertBefore(u,c.nextSibling),l.push(u)}l.length!==0&&(Ue.set(s,l),T({id:y,type:"DUPLICATE_ELEMENT",dataId:t,isListItem:n,instanceIndex:r,cloneId:a,reorderToken:s}),requestAnimationFrame(N))},Be=()=>{let e=document.activeElement;if(!(e instanceof HTMLElement))return!1;let t=e.tagName.toLowerCase();return t==="input"||t==="textarea"||t==="select"||e.isContentEditable},Eo=e=>{if(e.key==="Enter"&&(e.metaKey||e.ctrlKey)){if(e.preventDefault(),I){Y();return}T({id:y,type:"SAVE_PENDING_EDITS"});return}if((e.metaKey||e.ctrlKey)&&!e.shiftKey&&e.key.toLowerCase()==="z"){if(I)return;e.preventDefault(),T({id:y,type:"UNDO_PENDING_EDIT"});return}
468if(!I){if((e.key==="Delete"||e.key==="Backspace")&&!e.metaKey&&!e.ctrlKey&&m){e.preventDefault(),ln();return}if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="c"&&m&&!window.getSelection()?.toString()){e.preventDefault(),sn();return}if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="v"&&at){e.preventDefault(),an();return}}if(I?.isConnected&&document.activeElement!==I&&e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&!Be()){let t=I;e.preventDefault(),t.focus({preventScroll:!0}),Jt(t)||Qe(t),document.execCommand("insertText",!1,e.key);return}if(I){e.key==="Escape"&&Y();return}if((e.key==="\xDF"||e.key==="s")&&e.altKey){window.isEditModeActive?(Y(),U(),$(),m=null,D=null,T({id:y,type:"UNSELECT_ELEMENT"}),tt()):En();return}if(m&&e.key.length===1&&e.key!==" "&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&!Be()){let t=h(m);if(t&&x?.dataId===t&&x.canEditText&&go(m)){e.preventDefault(),T({id:y,type:"REQUEST_VISUAL_EDIT",dataId:t}),fe(m),document.execCommand("insertText",!1,e.key);return}}if(e.key==="/"&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&!Be()){e.preventDefault(),T({id:y,type:"FOCUS_PROMPT"});return}if(e.key==="Escape"){if(w){Wn();return}if(O){$n();return}if(P){Nn();return}if(b?.active){so();return}if(C?.active){vt();return}if(f?.active){Pt();return}m?(m=null,U()):window.isEditModeActive&&tt(),T({id:y,type:"UNSELECT_ELEMENT"})}else if(e.key==="Shift"){if(m){let t=et(m);t&&(m=t,R(m),D=m)}else if(D){let t=et(D);t&&(D=t,ye(D))}}},Oe=()=>{m&&v&&(R(m),G({element:m,accented:!0})),D&&A&&ye(D),en()},dn=()=>{m&&v&&(R(m),G({element:m,accented:!0})),D&&A&&ye(D),en()},cn=e=>{e.preventDefault();let t=$t(e.clientX,e.clientY);if(!t)return;let n=e.deltaX,o=e.deltaY;e.deltaMode===1?(n*=40,o*=40):e.deltaMode===2&&(n*=window.innerHeight,o*=window.innerHeight),t.scrollBy({top:o,left:n,behavior:"instant"}),Oe()},un=e=>{if(e.touches.length===1){let t=e.touches[0];ie=t.clientX,re=t.clientY,ce=$t(t.clientX,t.clientY)}},pn=e=>{if(e.preventDefault(),e.touches.length===1&&ie!==null&&re!==null&&ce){let t=e.touches[0],n=ie-t.clientX,o=re-t.clientY;ce.scrollBy({top:o,left:n,behavior:"instant"}),ie=t.clientX,re=t.clientY,Oe()}},fn=()=>{ie=null,re=null,ce=null},mn=e=>{if(!window.isEditModeActive||(e.preventDefault(),I)||P||O||w)return;if(b&&(b.active||Math.hypot(e.clientX-b.startX,e.clientY-b.startY)>Pe&&ro(),b?.active)){lo(e);return}if(C&&(C.active||Math.hypot(e.clientX-C.startX,e.clientY-C.startY)>Pe&&_n(),C?.active)){On(e);return}if(f&&(f.active||Math.hypot(e.clientX-f.startX,e.clientY-f.startY)>Pe&&Jn(),f?.active)){to(e);return}let t=Ee(e.clientX,e.clientY);if(t){if(m&&t===m){$();let n=Xt(t)?rt(t,e.clientX,e.clientY):null;Z(n)}else ye(t),Z(null);D=t}else $(),Z(null),D=null},gn=e=>{if(window.isEditModeActive&&(e.preventDefault(),_=Ee(e.clientX,e.clientY),e.button===0&&_&&_===m&&_.parentElement&&!I)){let t=Xt(_)?rt(_,e.clientX,e.clientY):null;t?io(t,_,e):Rn(_)?Hn(_,e):Zn(_,e)}},hn=(e,t,n)=>{m=e,D=e,R(e),$(),G({element:e,accented:!0});let o=e.getBoundingClientRect(),i=t-o.x,r=n-o.y,l=e.innerText;!l&&["input","textarea"].includes(e.tagName.toLowerCase())&&(l=e.getAttribute("placeholder")||"");let a="";for(let j of Array.from(e.childNodes))j.nodeType===Node.TEXT_NODE&&(a+=j.textContent);a=a.trim();let s=window.getComputedStyle(e),d=e.parentElement?window.getComputedStyle(e.parentElement):null,c={width:s.width,height:s.height,color:s.color,fontFamily:s.fontFamily,fontSize:s.fontSize,fontWeight:s.fontWeight,fontStyle:s.fontStyle,textDecorationLine:s.textDecorationLine,textAlign:s.textAlign,backgroundColor:s.backgroundColor,backgroundImage:s.backgroundImage,backgroundSize:s.backgroundSize,backgroundPosition:s.backgroundPosition,backgroundRepeat:s.backgroundRepeat,objectFit:s.objectFit,display:s.display,gap:s.gap,flexDirection:s.flexDirection,alignItems:s.alignItems,justifyContent:s.justifyContent,padding:s.padding,paddingTop:s.paddingTop,paddingRight:s.paddingRight,paddingBottom:s.paddingBottom,paddingLeft:s.paddingLeft,margin:s.margin,marginTop:s.marginTop,marginRight:s.marginRight,marginBottom:s.marginBottom,marginLeft:s.marginLeft,position:s.position,left:s.left,right:s.right,top:s.top,bottom:s.bottom,parentDisplay:d?.display??"",parentFlexDirection:d?.flexDirection??"",borderTopWidth:s.borderTopWidth,borderRightWidth:s.borderRightWidth,borderBottomWidth:s.borderBottomWidth,borderLeftWidth:s.borderLeftWidth,borderColor:s.borderTopColor,borderStyle:s.borderTopStyle},u=h(e),p=document.querySelectorAll(X(u??"")),E=p.length>1,S=e.closest("[data-mpi]"),M=S?parseInt(S.getAttribute("data-mpi")||"",10):NaN,W=E?Number.isNaN(M)?Array.from(p).indexOf(e):M:0;T({id:y,type:"SELECT_ELEMENT",tagName:e.tagName,htmlSnippet:e.outerHTML,elementInnerText:l,directTextContent:a,computedStyles:c,srcAttribute:e.getAttribute("src")??void 0,coordinates:{elementX:o.x,elementY:o.y,elementXPercent:i/o.width,elementYPercent:r/o.height},dataId:u??"",instanceIndex:W,isListItem:E,ephemeralId:e.dataset.mpe,ancestors:Mn(e)})},dt=e=>{if(!window.isEditModeActive)return;if(e.preventDefault(),b?.active){co(),_=null;return}if(b=null,C?.active){kn(),_=null;return}if(C=null,f?.active){oo(),_=null;return}if(f=null,e.button===2){m&&Ee(e.clientX,e.clientY)===m&&T({id:y,type:"TOGGLE_ELEMENT_DROPDOWN",coordinates:{clientX:e.clientX,clientY:e.clientY}}),_=null;return}let{clientX:t,clientY:n}=e,o=_;if(_=null,!!o){if(D&&(o=D),o===m){e.preventDefault(),e.stopPropagation(),R(o),$();return}K(o)?(e.preventDefault(),e.stopPropagation(),hn(o,t,n)):(Y(),m&&(m=null,U()),T({id:y,type:"UNSELECT_ELEMENT"}))}},En=()=>{window.isEditModeActive=!0,U(),$(),Z(null),m=null,D=null,g&&(g.remove(),g=null),g=uo(),z().appendChild(g),g.addEventListener("mousemove",mn),g.addEventListener("mousedown",gn),g.addEventListener("mouseup",dt),g.addEventListener("dblclick",tn),g.addEventListener("contextmenu",e=>e.preventDefault()),g.addEventListener("wheel",cn,{passive:!1}),g.addEventListener("touchstart",un,{passive:!0}),g.addEventListener("touchmove",pn,{passive:!1}),g.addEventListener("touchend",fn),window.addEventListener("scroll",Oe,!0),window.addEventListener("resize",dn),Ln(),window.focus(),T({id:y,type:"EDIT_MODE_ENABLED"})},tt=()=>{window.isEditModeActive=!1,Pt(),vt(),Y(),U(),$(),Z(null),window.removeEventListener("scroll",Oe,!0),window.removeEventListener("resize",dn),vn(),g&&(g.removeEventListener("mousemove",mn),g.removeEventListener("mousedown",gn),g.removeEventListener("mouseup",dt),g.removeEventListener("dblclick",tn),g.removeEventListener("wheel",cn),g.removeEventListener("touchstart",un),g.removeEventListener("touchmove",pn),g.removeEventListener("touchend",fn),g.remove(),g=null),m=null,D=null,ie=null,re=null,ce=null,T({id:y,type:"EDIT_MODE_DISABLED"})},Et=(e,t)=>
468{if(t){let n=document.querySelector(`[data-mpe="${t}"]`);if(n)return n}return e?document.querySelector(X(e)):null};window.addEventListener("message",e=>{let t=e.data;if(t.hasOwnProperty("isEditModeActive"))t.isEditModeActive===!1?tt():t.isEditModeActive===!0&&En();else if(t.hasOwnProperty("clearSelection"))Y(),U(),$(),Z(null),m=null,D=null;else if(t.type==="SELECT_ELEMENT_BY_ID"){let n=Et(t.dataId,t.ephemeralId);if(n){Y();let o=n.getBoundingClientRect();hn(n,o.x+o.width/2,o.y+o.height/2)}}else if(t.type==="HOVER_ELEMENT_BY_ID"){let n=Et(t.dataId,t.ephemeralId);n?ye(n):$()}else if(t.type==="ELEMENT_CAPABILITIES"){let{dataId:n,canReorderList:o,canEditText:i,canEditPlaceholder:r,moveTargetIds:l,textSlotContainerIds:a,selfTextSlots:s,isListItemRoot:d,canRestructure:c,textEditBlockedReason:u}=t;x={dataId:n,canReorderList:o,canEditText:i,canEditPlaceholder:r,moveTargetIds:l,textSlotContainerIds:a,selfTextSlots:s,isListItemRoot:d,canRestructure:c,textEditBlockedReason:u},ho(n)}else if(t.type==="REVERT_REORDER"){let{token:n}=t,o=Q.get(n);if(o){for(let l of[...o].reverse())try{l.parent.insertBefore(l.node,l.next)}catch{l.parent.appendChild(l.node)}Q.delete(n)}let i=Ue.get(n);if(i){for(let l of i)l.parentNode?.removeChild(l);Ue.delete(n)}let r=We.get(n);if(r){for(let l of r)l.node.textContent=l.text;We.delete(n)}(o||i||r)&&m&&(m.isConnected?R(m):(m=null,U()))}else if(t.type==="DELETE_SELECTED")ln();else if(t.type==="COPY_SELECTED")sn();else if(t.type==="PASTE_CLIPBOARD")an();else if(t.type==="SET_INSTANCE_TEXT"){let{ephemeralId:n,textContent:o}=t,i=document.querySelector(`[data-mpe="${n}"]`);i&&(gt(i,o),requestAnimationFrame(N))}else if(t.type==="ENABLE_CONTENT_EDITABLE"){let{dataId:n}=t,o=document.querySelector(X(n));o&&fe(o)}else if(t.type==="DISABLE_CONTENT_EDITABLE")Y();else if(t.type==="UPDATE_ELEMENT_STYLE"){let{dataId:n,styles:o,spaceStyles:i,textContent:r,attributes:l}=t;if(document.querySelectorAll(X(n)).forEach(s=>{o&&Object.entries(o).forEach(([d,c])=>{c!=null&&(s.style[d]=c)}),l&&Object.entries(l).forEach(([d,c])=>{c!=null&&(c===""?s.removeAttribute(d):s.setAttribute(d,c))}),r!==void 0&&gt(s,r)}),i){let s=`mp-space-styles-${n}`,d=document.getElementById(s);d||(d=document.createElement("style"),d.id=s,document.head.appendChild(d));let c="";i.spaceX&&(c+=`[data-mp="${n}"] > :not([hidden]) ~ :not([hidden]), [data-id="${n}"] > :not([hidden]) ~ :not([hidden]) { margin-left: ${i.spaceX}; }
469`),i.spaceY&&(c+=`[data-mp="${n}"] > :not([hidden]) ~ :not([hidden]), [data-id="${n}"] > :not([hidden]) ~ :not([hidden]) { margin-top: ${i.spaceY}; }
470`),d.textContent=c}v&&m&&h(m)===n&&requestAnimationFrame(()=>{m&&R(m)})}else if(t.type==="INJECT_URL_FONT"){let{href:n}=t;if(!document.querySelector(`link[href="${n}"]`)){let i=document.createElement("link");i.rel="stylesheet",i.href=n,document.head.appendChild(i)}}else if(t.type==="INJECT_FONT_CSS"){let{css:n,id:o}=t,i=CSS.escape(o);if(!document.querySelector(`style[data-font-id="${i}"]`)){let l=document.createElement("style");l.setAttribute("data-font-id",o),l.textContent=n,document.head.appendChild(l)}}});window.addEventListener("keydown",Eo);T({id:y,type:"EDIT_SCRIPT_INFO",version:17});document.addEventListener("pointerdown",e=>{window.isEditModeActive&&g&&e.target instanceof Node&&(e.target===g||g.contains(e.target))&&e.stopImmediatePropagation()},!0);})();
471</script>
471
472        
473<script>
474let commentModeOverlay = null
475let commentMousedownTarget = null
476let commentCursorDataUrl = null
477let commentTouchStartX = null
478let commentTouchStartY = null
479let commentTouchScrollTarget = null
480
481window.isCommentModeActive = false
482
483// Idempotent factory for the shared app-layer element living as a sibling of
484// <body> under <html>. Used as the attach point for every script-injected
485// overlay so that user-code modal libraries (react-aria, Radix, etc.) which
486// walk body.children to apply inert/aria-hidden never see our overlays.
487// Stored on window so multiple top-level scripts (comment/extract mode)
488// injected into the same iframe document don't collide via const-redeclare.
489window.__mpGetAppLayer = window.__mpGetAppLayer || function () {
490  let layer = document.getElementById('magic-patterns-app-layer')
491  if (!layer) {
492    layer = document.createElement('div')
493    layer.id = 'magic-patterns-app-layer'
494    document.documentElement.appendChild(layer)
495  }
496  return layer
497}
498
499const createCommentCursorSvg = (avatarDataUrl) => {
500  // Matches CommentBubbleIcon shape scaled from 24x24 to 32x32
501  // Path M5 19 V10 A8 8 0 1 1 14 19 H5 Z → scaled to M7 25 V13 A11 11 0 1 1 19 25 H7 Z
502  // Avatar positioned in the center of the circular part
503  const avatarSize = 16
504  const avatarCenter = { x: 18, y: 14 }
505  const avatarRadius = avatarSize / 2
506
507  const avatarPart = avatarDataUrl
508    ? '<clipPath id="avatarClip"><circle cx="' + avatarCenter.x + '" cy="' + avatarCenter.y + '" r="' + avatarRadius + '"/></clipPath>' +
509      '<image href="' + avatarDataUrl + '" x="' + (avatarCenter.x - avatarRadius) + '" y="' + (avatarCenter.y - avatarRadius) + '" width="' + avatarSize + '" height="' + avatarSize + '" clip-path="url(#avatarClip)"/>'
510    : ''
511
512  return '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">' +
513    '<defs>' +
514      '<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">' +
515        '<feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-opacity="0.25"/>' +
516      '</filter>' +
517    '</defs>' +
518    // Bubble shape matching CommentBubbleIcon (scaled from 24x24 to 32x32)
519    '<path d="M7 25 V13 A11 11 0 1 1 19 25 H7 Z" fill="white" stroke="#5273E2" stroke-width="2" stroke-linejoin="round" filter="url(#shadow)"/>' +
520    avatarPart +
521  '</svg>'
522}
523
524const loadAvatarAndCreateCursor = async (avatarUrl) => {
525  // Hotspot at the bottom-left corner of the bubble (7, 25)
526  const hotspot = '7 25'
527
528  if (!avatarUrl) {
529    const svg = createCommentCursorSvg(null)
530    return 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '") ' + hotspot + ', crosshair'
531  }
532
533  try {
534    const response = await fetch(avatarUrl)
535    const blob = await response.blob()
536    const avatarDataUrl = await new Promise((resolve) => {
537      const reader = new FileReader()
538      reader.onloadend = () => resolve(reader.result)
539      reader.readAsDataURL(blob)
540    })
541    const svg = createCommentCursorSvg(avatarDataUrl)
542    return 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '") ' + hotspot + ', crosshair'
543  } catch (e) {
544    console.warn('Failed to load avatar for cursor:', e)
545    const svg = createCommentCursorSvg(null)
546    return 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '") ' + hotspot + ', crosshair'
547  }
548}
549
550const findCommentElementWithDataId = (x, y) => {
551  // Get all elements with data-id
552  const elements = document.querySelectorAll('[data-id]')
553
554  // Convert to array and reverse to get top-most elements first
555  const elementsArray = Array.from(elements).reverse()
556
557  // Find the first element that contains the point
558  for (const element of elementsArray) {
559    const rect = element.getBoundingClientRect()
560    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
561      return element
562    }
563  }
564  return null
565}
566
567const findCommentScrollableAncestor = (x, y) => {
568  const elements = document.elementsFromPoint(x, y)
569
570  for (const element of elements) {
571    if (
572      (element.id && element.id.startsWith('magic-patterns-')) ||
573      (element.getAttribute('class') || '').includes('magic-patterns-')
574    ) {
575      continue
576    }
577
578    let current = element
579    while (current && current !== document.documentElement) {
580      const style = window.getComputedStyle(current)
581      const overflowY = style.overflowY
582      const overflowX = style.overflowX
583      const isScrollableY = (overflowY === 'auto' || overflowY === 'scroll') && current.scrollHeight > current.clientHeight
584      const isScrollableX = (overflowX === 'auto' || overflowX === 'scroll') && current.scrollWidth > current.clientWidth
585
586      if (isScrollableY || isScrollableX) {
587        return current
588      }
589      current = current.parentElement
590    }
591
592    return document.scrollingElement || document.documentElement
593  }
594
595  return document.scrollingElement || document.documentElement
596}
597
598const createCommentModeOverlay = () => {
599  const overlay = document.createElement('div')
600  overlay.id = 'magic-patterns-comment-overlay'
601  overlay.style.position = 'fixed'
602  overlay.style.top = '0'
603  overlay.style.left = '0'
604  overlay.style.width = '100%'
605  overlay.style.height = '100%'
606  overlay.style.pointerEvents = 'all'
607  overlay.style.backgroundColor = 'transparent'
608  overlay.style.zIndex = '999999998'
609  overlay.style.cursor = commentCursorDataUrl || 'crosshair'
610  return overlay
611}
612
613function isCommentTypingInInput() {
614  const activeElement = document.activeElement
615  const tagName = activeElement?.tagName?.toLowerCase()
616  const isTyping = activeElement && (
617    tagName === 'input' ||
618    tagName === 'textarea' ||
619    activeElement.isContentEditable
620  )
621
622  return isTyping
623}
624
625const handleCommentKeydown = (event) => {
626  if (event.key === 'Escape') {
627    if (window.isCommentModeActive) {
628      disableCommentMode()
629    }
630
631    window.parent.postMessage({
632      id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
633      type: 'COMMENT_HIDE_POPUP',
634    }, '*')
635  }
636  // Toggle comment mode with 'c' key
637  else if ((event.key === 'c' || event.key === 'C') && !event.metaKey && !event.altKey && !event.ctrlKey) {
638    if (isCommentTypingInInput()) {
639      return
640    }
641
642    if (window.isCommentModeActive) {
643      disableCommentMode()
644    } else {
645      enableCommentMode()
646    }
647  }
648  // Toggle comments visibility with 'h' key
649  else if ((event.key === 'h' || event.key === 'H') && !event.metaKey && !event.altKey && !event.ctrlKey) {
650    if (isCommentTypingInInput()) {
651      return
652    }
653
654    window.parent.postMessage({
655      id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
656      type: 'TOGGLE_COMMENTS_VISIBILITY',
657    }, '*')
658  }
659}
660
661const handleCommentMouseDown = (event) => {
662  if (!window.isCommentModeActive) return
663  event.preventDefault()
664
665  commentMousedownTarget = findCommentElementWithDataId(event.clientX, event.clientY)
666}
667
668const handleCommentMouseUp = (event) => {
669  if (!window.isCommentModeActive) return
670  event.preventDefault()
671
672  const { clientX, clientY } = event
673
674  // Only process if the mouseup target matches where we started the mousedown
675  const elementToUse = commentMousedownTarget
676  commentMousedownTarget = null
677
678  if (!elementToUse) return
679
680  if (elementToUse.dataset.id) {
681    event.preventDefault()
682    event.stopPropagation()
683
684    const elementRect = elementToUse.getBoundingClientRect()
685
686    const elementX = clientX - elementRect.x
687    const elementY = clientY - elementRect.y
688
689    let elementInnerText = elementToUse.innerText
690    if (!elementInnerText && ['input', 'textarea'].includes(elementToUse.tagName.toLowerCase())) {
691      // Use placeholder for input or textarea elements
692      elementInnerText = elementToUse.getAttribute('placeholder') || ''
693    }
694
695    window.parent.postMessage({
696      id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
697      type: 'COMMENT_ON_ELEMENT',
698      tagName: elementToUse.tagName,
699      htmlSnippet: elementToUse.outerHTML,
700      elementInnerText,
701      coordinates: {
702        x: clientX,
703        y: clientY,
704        // coordinates as a percentage of the element's bounding box from [0,1]
705        elementXPercent: elementX / elementRect.width,
706        elementYPercent: elementY / elementRect.height
707      },
708      dataId: elementToUse.dataset.id
709    }, '*')
710  } else {
711    window.parent.postMessage({
712      id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
713      type: 'COMMENT_HIDE_POPUP',
714    }, '*')
715  }
716}
717
718const handleCommentWheel = (event) => {
719  event.preventDefault()
720
721  const scrollTarget = findCommentScrollableAncestor(event.clientX, event.clientY)
722  if (!scrollTarget) return
723
724  let deltaX = event.deltaX
725  let deltaY = event.deltaY
726
727  if (event.deltaMode === 1) {
728    deltaX *= 40
729    deltaY *= 40
730  } else if (event.deltaMode === 2) {
731    deltaX *= window.innerHeight
732    deltaY *= window.innerHeight
733  }
734
735  scrollTarget.scrollTop += deltaY
736  scrollTarget.scrollLeft += deltaX
737}
738
739const handleCommentTouchStart = (event) => {
740  if (event.touches.length === 1) {
741    const touch = event.touches[0]
742    commentTouchStartX = touch.clientX
743    commentTouchStartY = touch.clientY
744    commentTouchScrollTarget = findCommentScrollableAncestor(touch.clientX, touch.clientY)
745  }
746}
747
748const handleCommentTouchMove = (event) => {
749  event.preventDefault()
750
751  if (
752    event.touches.length === 1 &&
753    commentTouchStartX !== null &&
754    commentTouchStartY !== null &&
755    commentTouchScrollTarget
756  ) {
757    const touch = event.touches[0]
758    const deltaX = commentTouchStartX - touch.clientX
759    const deltaY = commentTouchStartY - touch.clientY
760
761    commentTouchScrollTarget.scrollTop += deltaY
762    commentTouchScrollTarget.scrollLeft += deltaX
763
764    commentTouchStartX = touch.clientX
765    commentTouchStartY = touch.clientY
766  }
767}
768
769const handleCommentTouchEnd = () => {
770  commentTouchStartX = null
771  commentTouchStartY = null
772  commentTouchScrollTarget = null
773}
774
775const enableCommentMode = async (avatarUrl) => {
776  // Load cursor with avatar before showing overlay
777  commentCursorDataUrl = await loadAvatarAndCreateCursor(avatarUrl)
778
779  window.isCommentModeActive = true
780
781  // Remove existing comment mode overlay
782  if (commentModeOverlay) {
783    commentModeOverlay.remove()
784    commentModeOverlay = null
785  }
786
787  commentModeOverlay = createCommentModeOverlay()
788  window.__mpGetAppLayer().appendChild(commentModeOverlay)
789
790  // Add listeners to the overlay itself
791  commentModeOverlay.addEventListener('mousedown', handleCommentMouseDown)
792  commentModeOverlay.addEventListener('mouseup', handleCommentMouseUp)
793  commentModeOverlay.addEventListener('wheel', handleCommentWheel, { passive: false })
794  commentModeOverlay.addEventListener('touchstart', handleCommentTouchStart, { passive: true })
795  commentModeOverlay.addEventListener('touchmove', handleCommentTouchMove, { passive: false })
796  commentModeOverlay.addEventListener('touchend', handleCommentTouchEnd)
797
798  window.focus()
799
800  window.parent.postMessage({
801    id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
802    type: 'COMMENT_MODE_ENABLED',
803  }, '*')
804}
805
806const disableCommentMode = () => {
807  window.isCommentModeActive = false
808  
809  if (commentModeOverlay) {
810    // Remove event listeners
811    commentModeOverlay.removeEventListener('mousedown', handleCommentMouseDown)
812    commentModeOverlay.removeEventListener('mouseup', handleCommentMouseUp)
813    commentModeOverlay.removeEventListener('wheel', handleCommentWheel)
814    commentModeOverlay.removeEventListener('touchstart', handleCommentTouchStart)
815    commentModeOverlay.removeEventListener('touchmove', handleCommentTouchMove)
816    commentModeOverlay.removeEventListener('touchend', handleCommentTouchEnd)
817
818    commentModeOverlay.remove()
819    commentModeOverlay = null
820  }
821
822  commentTouchStartX = null
823  commentTouchStartY = null
824  commentTouchScrollTarget = null
825
826  window.parent.postMessage({
827    id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
828    type: 'COMMENT_MODE_DISABLED',
829  }, '*')
830}
831
832window.addEventListener('message', event => {
833  if (event.data.hasOwnProperty('isCommentModeActive')) {
834    if (event.data.isCommentModeActive === false) {
835      disableCommentMode()
836    } else if (event.data.isCommentModeActive === true) {
837      // Pass avatarUrl from the message to enableCommentMode
838      enableCommentMode(event.data.avatarUrl)
839    }
840  }
841})
842
843window.addEventListener('keydown', handleCommentKeydown)
844</script>
844
845
846        
847        
848<script>
849let prototypeTargetElement = null;
850window.isPrototypeModeActive = false;
851
852window.addEventListener('message', event => {
853    if (event.data.type === 'ENABLE_PROTOTYPE_MODE'){
854        window.isPrototypeModeActive = true;
855    } else if ( event.data.type === 'DISABLE_PROTOTYPE_MODE'){
856        window.isPrototypeModeActive = false;
857        
858        if ( prototypeTargetElement ){
859            prototypeTargetElement.style.outline = '';
860            prototypeTargetElement = null;
861        }
862    }
863})
864
865document.body.addEventListener('mouseover', function(event){
866    if ( event.target.dataset.id && window.isPrototypeModeActive ){
867        event.target.style.backgroundColor = '#ABBDF9';
868        event.target.style.outline = '2px dashed #3E63DD';
869    }
870})
871
872document.body.addEventListener('mouseout', function (event) {
873  if (event.target.dataset.id && event.target !== prototypeTargetElement && window.isPrototypeModeActive) {
874    event.target.style.backgroundColor = '';
875    event.target.style.outline = '';
876  }
877});
878
879document.addEventListener('click', function(event){
880    if ( !window.isPrototypeModeActive ) return;
881
882    if ( event.target.dataset.id ){
883        event.preventDefault();
884        event.stopPropagation();
885
886        if ( prototypeTargetElement ){
887            prototypeTargetElement.style.outline = '';
888        }
889
890        prototypeTargetElement = event.target;
891        event.target.style.outline = '2px dashed #3E63DD';
892
893        window.parent.postMessage({
894            id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
895            type: 'SELECT_PROTOTYPE_TARGET',
896            elementDataId: event.target.dataset.id,
897            nodeId: '8e7de961-06b3-4bab-89a8-97ccdc389aed'
898        }, '*');
899    }
900})
901</script>
901
902        
903<script>
904document.addEventListener('click', function(event){
905    let target = event.target;
906    
907    // Traverse up the DOM tree
908    while (target && target !== document) {
909        const prototypeId = target.getAttribute('data-prototypeId');
910        if (prototypeId) {
911            event.preventDefault();
912            event.stopPropagation();
913
914            window.parent.postMessage({
915                id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
916                type: 'PROTOTYPE_TARGET_CLICKED',
917                prototypeId,
918                nodeId: '8e7de961-06b3-4bab-89a8-97ccdc389aed'
919            }, '*');
920            
921            break; // Exit the loop once we've found and processed a matching element
922        }
923        target = target.parentElement; // Move up to the parent element
924    }
925})
926</script>
926
927        
928<script>
929// Formatted as { dataId: string, innerText: string }
930let trackedElementIdentifiers = []
931
932function createElementIdentifierKey(dataId, innerText) {
933  return dataId + '-' + innerText
934}
935
936function getElementText(element) {
937  let elementInnerText = element.innerText
938  if (!elementInnerText && ['input', 'textarea'].includes(element.tagName.toLowerCase())) {
939    // Use placeholder for input or textarea elements
940    elementInnerText = element.getAttribute('placeholder') || ''
941  }
942
943  return elementInnerText
944}
945
946function getElementDataIdToRects(elementIdentifiers) {
947  return Object.fromEntries(elementIdentifiers.map(({ dataId, innerText }) => {
948    const matchingElements = Array.from(document.querySelectorAll('[data-id="' + dataId + '"]'))
949
950    if (matchingElements.length > 0) {
951      const key = createElementIdentifierKey(dataId, innerText)
952      const matchedElement = matchingElements.find(element => getElementText(element) === innerText) ?? matchingElements[0]
953
954      return [key, matchedElement.getBoundingClientRect()]
955    }
956
957    return undefined
958  }).filter(Boolean))
959}
960
961function sendElementRects() {
962  if (trackedElementIdentifiers.length === 0) {
963    return
964  }
965
966  const elementDataIdToRect = getElementDataIdToRects(trackedElementIdentifiers)
967
968  window.parent.postMessage({
969    id: '8e7de961-06b3-4bab-89a8-97ccdc389aed',
970    type: 'ELEMENT_RECTS',
971    elementDataIdToRect,
972  }, '*')
973}
974
975let animationFrameId = null
976function startAnimationFrameLoop() {
977  if (animationFrameId !== null) {
978    return
979  }
980
981  function loop() {
982    if (trackedElementIdentifiers.length === 0) {
983      stopAnimationFrameLoop()
984      return
985    }
986
987    sendElementRects()
988    animationFrameId = requestAnimationFrame(loop)
989  }
990
991  animationFrameId = requestAnimationFrame(loop)
992}
993
994function stopAnimationFrameLoop() {
995  if (animationFrameId !== null) {
996    cancelAnimationFrame(animationFrameId)
997    animationFrameId = null
998  }
999}
1000
1001window.addEventListener('message', event => {
1002  if (event.data.hasOwnProperty('trackedElementIdentifiers') && Array.isArray(event.data.trackedElementIdentifiers)) {
1003    trackedElementIdentifiers = event.data.trackedElementIdentifiers
1004    if (trackedElementIdentifiers.length > 0) {
1005      startAnimationFrameLoop()
1006    } else {
1007      stopAnimationFrameLoop()
1008    }
1009  }
1010})
1011
1012const mutationObserver = new MutationObserver(() => {
1013  if (trackedElementIdentifiers.length > 0) {
1014    startAnimationFrameLoop()
1015  }
1016});
1017
1018mutationObserver.observe(document.body, {
1019  childList: true,
1020  subtree: true,
1021});
1022</script>
1022
1023
1024        
1025        
1025<script>
1026    (function() {
1027        function setPreviewObscured(value) {
1028            const root = document.getElementById('root');
1029            if (!root) {
1030                return;
1031            }
1032
1033            root.style.transition = 'filter 500ms ease';
1034            root.style.filter = value ? 'blur(4px)' : 'none';
1035        }
1036
1037        setPreviewObscured(false);
1038
1039        window.addEventListener('message', function(event) {
1040            const data = event.data;
1041            if (!data || data.type !== 'SET_PREVIEW_OBSCURED') {
1042                return;
1043            }
1044
1045            setPreviewObscured(data.value);
1046        });
1047    })();
1048</script>
1048
1049      
1049<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"e867a81586484a148de12267bf4d1b46","spa":2}' crossorigin="anonymous"></script>
1049
1050</body>
1051    </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.