"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),se=require("react-use-drag-and-drop"),O=require("react-observing"),Xr=require("uuid"),Yt=require("react-dom");var qt=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function Nt(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var fr={exports:{}},$e={};/**

* @license React

* react-jsx-runtime.production.min.js

*

* Copyright (c) Facebook, Inc. and its affiliates.

*

* This source code is licensed under the MIT license found in the

* LICENSE file in the root directory of this source tree.

*/var kr;function Gt(){if(kr)return $e;kr=1;var e=f,r=Symbol.for("react.element"),t=Symbol.for("react.fragment"),n=Object.prototype.hasOwnProperty,i=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,o={key:!0,ref:!0,__self:!0,__source:!0};function s(u,l,v){var d,h={},C=null,c=null;v!==void 0&&(C=""+v),l.key!==void 0&&(C=""+l.key),l.ref!==void 0&&(c=l.ref);for(d in l)n.call(l,d)&&!o.hasOwnProperty(d)&&(h[d]=l[d]);if(u&&u.defaultProps)for(d in l=u.defaultProps,l)h[d]===void 0&&(h[d]=l[d]);return{$$typeof:r,type:u,key:C,ref:c,props:h,_owner:i.current}}return $e.Fragment=t,$e.jsx=s,$e.jsxs=s,$e}var Fe={};/**

* @license React

* react-jsx-runtime.development.js

*

* Copyright (c) Facebook, Inc. and its affiliates.

*

* This source code is licensed under the MIT license found in the

* LICENSE file in the root directory of this source tree.

*/var Vr;function Kt(){return Vr||(Vr=1,process.env.NODE_ENV!=="production"&&function(){var e=f,r=Symbol.for("react.element"),t=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),o=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),u=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),h=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),c=Symbol.for("react.offscreen"),p=Symbol.iterator,b="@@iterator";function x(a){if(a===null||typeof a!="object")return null;var w=p&&a[p]||a[b];return typeof w=="function"?w:null}var R=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function E(a){{for(var w=arguments.length,T=new Array(w>1?w-1:0),F=1;F<w;F++)T[F-1]=arguments[F];D("error",a,T)}}function D(a,w,T){{var F=R.ReactDebugCurrentFrame,re=F.getStackAddendum();re!==""&&(w+="%s",T=T.concat([re]));var ae=T.map(function(X){return String(X)});ae.unshift("Warning: "+w),Function.prototype.apply.call(console[a],console,ae)}}var m=!1,g=!1,V=!1,A=!1,_=!1,M;M=Symbol.for("react.module.reference");function I(a){return!!(typeof a=="string"||typeof a=="function"||a===n||a===o||_||a===i||a===v||a===d||A||a===c||m||g||V||typeof a=="object"&&a!==null&&(a.$$typeof===C||a.$$typeof===h||a.$$typeof===s||a.$$typeof===u||a.$$typeof===l||a.$$typeof===M||a.getModuleId!==void 0))}function q(a,w,T){var F=a.displayName;if(F)return F;var re=w.displayName||w.name||"";return re!==""?T+"("+re+")":T}function B(a){return a.displayName||"Context"}function k(a){if(a==null)return null;if(typeof a.tag=="number"&&E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof a=="function")return a.displayName||a.name||null;if(typeof a=="string")return a;switch(a){case n:return"Fragment";case t:return"Portal";case o:return"Profiler";case i:return"StrictMode";case v:return"Suspense";case d:return"SuspenseList"}if(typeof a=="object")switch(a.$$typeof){case u:var w=a;return B(w)+".Consumer";case s:var T=a;return B(T._context)+".Provider";case l:return q(a,a.render,"ForwardRef");case h:var F=a.displayName||null;return F!==null?F:k(a.type)||"Memo";case C:{var re=a,ae=re._payload,X=re._init;try{return k(X(ae))}catch{return null}}}return null}var Y=Object.assign,ee=0,oe,L,Q,ie,S,P,$;function z(){}z.__reactDisabledLog=!0;function H(){{if(ee===0){oe=console.log,L=console.info,Q=console.warn,ie=console.error,S=console.group,P=console.groupCollapsed,$=console.groupEnd;var a={configurable:!0,enumerable:!0,value:z,writable:!0};Object.defineProperties(console,{info:a,log:a,warn:a,error:a,group:a,groupCollapsed:a,groupEnd:a})}ee++}}function J(){{if(ee--,ee===0){var a={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:Y({},a,{value:oe}),info:Y({},a,{value:L}),warn:Y({},a,{value:Q}),error:Y({},a,{value:ie}),group:Y({},a,{value:S}),groupCollapsed:Y({},a,{value:P}),groupEnd:Y({},a,{value:$})})}ee<0&&E("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var W=R.ReactCurrentDispatcher,U;function N(a,w,T){{if(U===void 0)try{throw Error()}catch(re){var F=re.stack.trim().match(/\n( *(at )?)/);U=F&&F[1]||""}return`

<%s key={someKey} {...props} />`,or,Re,Wt,Re),Ir[Re+or]=!0}}return a===n?Lt(ce):Bt(ce),ce}}function $t(a,w,T){return Mr(a,w,T,!0)}function Ft(a,w,T){return Mr(a,w,T,!1)}var Ht=Ft,zt=$t;Fe.Fragment=n,Fe.jsx=Ht,Fe.jsxs=zt}()),Fe}process.env.NODE_ENV==="production"?fr.exports=Gt():fr.exports=Kt();var y=fr.exports;const Zr=f.createContext({});function Jt({children:e,...r}){return y.jsx(Zr.Provider,{value:r,children:e})}const Oe=()=>f.useContext(Zr),Qr=f.createContext({}),Xt=({children:e,id:r,onSelect:t})=>{const n=f.useRef({onSelect:t,id:r});return f.useEffect(()=>{n.current.id=r},[r]),f.useEffect(()=>{n.current.onSelect=t},[t]),y.jsx(Qr.Provider,{value:n.current,children:e})},_e=()=>{const e=f.useContext(Qr);return{select:f.useCallback(t=>{e.onSelect(t)},[e.id]),selectedId:e.id}},et=f.createContext({}),Zt=({children:e,id:r,onHover:t})=>{const n=f.useRef({onHover:t,id:r});return f.useEffect(()=>{n.current.id=r},[r]),f.useEffect(()=>{n.current.onHover=t},[t]),y.jsx(et.Provider,{value:n.current,children:e})},Ce=()=>{const e=f.useContext(et);return{hover:f.useCallback(t=>{e.id.value!==t&&e.onHover(t)},[e.id]),hoveredId:e.id}},Qt=e=>{let r,t=0;if(!(!e||e.length===0)){do t--,r=e==null?void 0:e.slice(t).at(0);while(!r||!["html","slot-content"].includes(r.type.value));return r}},Ne=(e,r)=>{const t=document.createElement("label");return t.style.padding="4px",t.style.paddingTop="2px",t.style.paddingRight="8px",t.style.paddingBottom="2px",t.style.backgroundColor="#3e8ce4",t.style.color="#ffffff",t.style.alignItems="center",t.style.borderRadius="2px",t.style.fontWeight="600",t.style.position="fixed",t.style.fontSize="11px",t.style.display="flex",t.style.height="20px",t.style.zIndex="-100",t.style.width="auto",t.appendChild(new Text(e)),document.body.appendChild(t),t};var rt={exports:{}};/*! Case - v1.6.2 - 2020-03-24

* Copyright (c) 2020 Nathan Bubna; Licensed MIT, GPL */(function(e){(function(){var r=function(c,p){return p=p||"",c.replace(/(^|-)/g,"$1\\u"+p).replace(/,/g,"\\u"+p)},t=r("20-26,28-2F,3A-40,5B-60,7B-7E,A0-BF,D7,F7","00"),n="a-z"+r("DF-F6,F8-FF","00"),i="A-Z"+r("C0-D6,D8-DE","00"),o="A|An|And|As|At|But|By|En|For|If|In|Of|On|Or|The|To|Vs?\\.?|Via",s=function(c,p,b,x){return c=c||t,p=p||n,b=b||i,x=x||o,{capitalize:new RegExp("(^|["+c+"])(["+p+"])","g"),pascal:new RegExp("(^|["+c+"])+(["+p+b+"])","g"),fill:new RegExp("["+c+"]+(.|$)","g"),sentence:new RegExp('(^\\s*|[\\?\\!\\.]+"?\\s+"?|,\\s+")(['+p+"])","g"),improper:new RegExp("\\b("+x+")\\b","g"),relax:new RegExp("([^"+b+"])(["+b+"]*)(["+b+"])(?=[^"+b+"]|$)","g"),upper:new RegExp("^[^"+p+"]+$"),hole:/[^\s]\s[^\s]/,apostrophe:/'/g,room:new RegExp("["+c+"]")}},u=s(),l={re:u,unicodes:r,regexps:s,types:[],up:String.prototype.toUpperCase,low:String.prototype.toLowerCase,cap:function(c){return l.up.call(c.charAt(0))+c.slice(1)},decap:function(c){return l.low.call(c.charAt(0))+c.slice(1)},deapostrophe:function(c){return c.replace(u.apostrophe,"")},fill:function(c,p,b){return p!=null&&(c=c.replace(u.fill,function(x,R){return R?p+R:""})),b&&(c=l.deapostrophe(c)),c},prep:function(c,p,b,x){if(c=c==null?"":c+"",!x&&u.upper.test(c)&&(c=l.low.call(c)),!p&&!u.hole.test(c)){var R=l.fill(c," ");u.hole.test(R)&&(c=R)}return!b&&!u.room.test(c)&&(c=c.replace(u.relax,l.relax)),c},relax:function(c,p,b,x){return p+" "+(b?b+" ":"")+x}},v={_:l,of:function(c){for(var p=0,b=l.types.length;p<b;p++)if(v[l.types[p]].apply(v,arguments)===c)return l.types[p]},flip:function(c){return c.replace(/\w/g,function(p){return(p==l.up.call(p)?l.low:l.up).call(p)})},random:function(c){return c.replace(/\w/g,function(p){return(Math.round(Math.random())?l.up:l.low).call(p)})},type:function(c,p){v[c]=p,l.types.push(c)}},d={lower:function(c,p,b){return l.fill(l.low.call(l.prep(c,p)),p,b)},snake:function(c){return v.lower(c,"_",!0)},constant:function(c){return v.upper(c,"_",!0)},camel:function(c){return l.decap(v.pascal(c))},kebab:function(c){return v.lower(c,"-",!0)},upper:function(c,p,b){return l.fill(l.up.call(l.prep(c,p,!1,!0)),p,b)},capital:function(c,p,b){return l.fill(l.prep(c).replace(u.capitalize,function(x,R,E){return R+l.up.call(E)}),p,b)},header:function(c){return v.capital(c,"-",!0)},pascal:function(c){return l.fill(l.prep(c,!1,!0).replace(u.pascal,function(p,b,x){return l.up.call(x)}),"",!0)},title:function(c){return v.capital(c).replace(u.improper,function(p,b,x,R){return x>0&&x<R.lastIndexOf(" ")?l.low.call(p):p})},sentence:function(c,p,b){return c=v.lower(c).replace(u.sentence,function(x,R,E){return R+l.up.call(E)}),p&&p.forEach(function(x){c=c.replace(new RegExp("\\b"+v.lower(x)+"\\b","g"),l.cap)}),b&&b.forEach(function(x){c=c.replace(new RegExp("(\\b"+v.lower(x)+"\\. +)(\\w)"),function(R,E,D){return E+l.low.call(D)})}),c}};d.squish=d.pascal,v.default=v;for(var h in d)v.type(h,d[h]);var C=typeof C=="function"?C:function(){};C(e.exports?e.exports=v:this.Case=v)}).call(qt)})(rt);var en=rt.exports;const Ar=(e,r,t,n,i)=>!(!n.current||e.droppableId!==i||e.draggingId===r.id.value||t.some(u=>e.draggingId===u.id.value)),Br=(e,r,t)=>{if(!t.current)return null;if(r.type.value==="slot-content")return"center";const n=["component","slot","text"].includes(r.type.value)?!1:Array.isArray(r.children.value),i=t.current.getBoundingClientRect(),o=n?5:i.height/2,s=e.y-i.y;return s>=0&&s<=o?"start":s>=i.height-o&&s<=i.height?"end":s>=o&&s<=i.height-o?"center":null},ke=()=>Xr.v4(),vr=()=>y.jsx("div",{className:"animate-pulse pointer-events-none py-0.5 -my-0.5 rounded bg-[#3e8ce4] z-10"}),rn=(e,r)=>O.useSelectorValue(({get:t})=>r.map(n=>t(n.id)).includes(t(e.id)),[e,r]),Ge=(e,r)=>O.useSelectorValue(({get:n})=>{const i=[...r].reverse();let o;for(let s=0;s<i.length;s++){const u=i[s];if(n(u.type)==="slot-content"&&(o=!1),n(u.type)==="component")if(o===!1)o=void 0;else return!0}return!!o},[r,e]),ye=({value:e,matchWidthValue:r})=>{const[t,n]=f.useState(!1),i=f.useCallback(o=>{n(s=>s===o?s:o)},[]);return f.useEffect(()=>{if(e===void 0){i(!1);return}if(r===void 0){i(!1);return}i(e.value===r.value)},[i,e==null?void 0:e.value,r==null?void 0:r.value]),f.useEffect(()=>{if(e===void 0||r===void 0)return;const o=e.subscribe(u=>i(u===r.value)),s=r.subscribe(u=>i(u===e.value));return()=>{o.unsubscribe(),s.unsubscribe()}},[i,e,r]),t},Ve=({label:e,hover:r,select:t,paddingLeft:n,insertBarAt:i,dragging:o,dragOver:s})=>y.jsxs("div",{className:"pointer-events-none",children:[s&&i==="start"&&y.jsx(vr,{}),y.jsx("div",{"data-hover":r,"data-select":t,style:{paddingLeft:n},"data-dragging":o,"data-drag-over":s,className:"cursor-pointer rounded-sm outline outline-1 outline-transparent pointer-events-none data-[hover=true]:outline-[#ed8c5f89] data-[select=true]:outline-[#3e8be4c1]",children:e}),s&&i==="end"&&y.jsx(vr,{})]}),tn=({element:e,paddingLeft:r,onMouseLeave:t,onMouseOver:n,onSelect:i})=>{const o=f.useRef(null),{selectedId:s}=_e(),{hoveredId:u}=Ce(),l=O.useObserverValue(e.name),v=ye({value:u,matchWidthValue:e==null?void 0:e.id}),d=ye({value:s,matchWidthValue:e==null?void 0:e.id});return y.jsx("div",{ref:o,onMouseLeave:t,onClick:h=>i(h,e),onMouseOver:h=>n(h,e,o.current),children:y.jsx(Ve,{dragOver:!1,dragging:!1,hover:v,insertBarAt:null,select:d,paddingLeft:r,label:l+"(Infinity loop)"})})},nn=({element:e,parents:r,paddingLeft:t,onMouseOver:n,onMouseLeave:i,onSelect:o,onDragLeave:s,onDragOver:u,onDrop:l,onDoubleClick:v})=>{const d=f.useRef(null),{onDragStart:h,onDragEnd:C,components:c}=Oe(),{selectedId:p}=_e(),{hoveredId:b}=Ce(),[x,R]=f.useState(null),E=O.useObserverValue(e.name),D=O.useObserverValue(e.id),m=O.useSelectorValue(({get:B})=>{const k=B(c).find(Y=>B(Y.id)===B(e.referenceComponentId));return k?B(k.content):[]},[c,e]),g=ye({value:b,matchWidthValue:e==null?void 0:e.id}),V=ye({value:p,matchWidthValue:e==null?void 0:e.id}),A=f.useMemo(()=>!m||m.length===0?null:m.map(B=>y.jsx(Pe,{element:B,paddingLeft:t,parents:[...r,e]},B.id.value)),[m,r,e,t]),{isDragging:_,preview:M}=se.useDrag({id:D,element:d,end:()=>C(),data:{element:e,parents:r},start:()=>{h()}},[D,e,r,h,C]);f.useEffect(()=>{M(()=>Ne(E),B=>B.remove())},[M,E]);const I=f.useRef({id:ke()}),[{isDraggingOver:q}]=se.useDrop({element:d,id:I.current.id,drop:(B,k)=>l(B,k,e,r,d,I.current.id),hover:(B,k)=>R(u(B,k,e,r,d,I.current.id)),leave:(B,k)=>R(s(B,k,e,r,d,I.current.id))},[e,r,l,u,s]);return y.jsxs(y.Fragment,{children:[y.jsx("div",{ref:d,"data-dragging":_,className:"data-[dragging=true]:opacity-50",onMouseLeave:i,onClick:B=>o(B,e),onDoubleClick:B=>v(B,e),onMouseOver:B=>n(B,e,d.current),children:y.jsx(Ve,{label:E,hover:g,select:V,dragging:_,dragOver:q,paddingLeft:t,insertBarAt:x})}),A]})},on=({element:e,parents:r,paddingLeft:t})=>{const{components:n}=Oe();return O.useSelectorValue(({get:o})=>{const s=o(n).find(u=>o(u.id)===o(e.referenceComponentId));return s?o(s.content):[]},[n,e]).map(o=>y.jsx(Pe,{element:o,paddingLeft:t,parents:[...r,e]},o.id.value))},an=({element:e,parents:r,paddingLeft:t,...n})=>{const i=rn(e,r),o=Ge(e,r);return i?o?null:y.jsx(tn,{element:e,paddingLeft:t,onSelect:n.onSelect,onMouseOver:n.onMouseOver,onMouseLeave:n.onMouseLeave}):o?y.jsx(on,{element:e,parents:r,paddingLeft:t}):y.jsx(nn,{element:e,parents:r,paddingLeft:t,onDrop:n.onDrop,onDragOver:n.onDragOver,onDragLeave:n.onDragLeave,onDoubleClick:n.onDoubleClick,onSelect:n.onSelect,onMouseOver:n.onMouseOver,onMouseLeave:n.onMouseLeave})},sn=({element:e,parents:r,paddingLeft:t,onMouseOver:n,onMouseLeave:i,onSelect:o,onDragLeave:s,onDragOver:u,onDrop:l})=>{const v=f.useRef(null),[d,h]=f.useState(null),C=O.useObserverValue(e.children),c=O.useObserverValue(e.name),p=O.useObserverValue(e.id),{onDragStart:b,onDragEnd:x}=Oe(),{selectedId:R}=_e(),{hoveredId:E}=Ce(),D=ye({value:E,matchWidthValue:e==null?void 0:e.id}),m=ye({value:R,matchWidthValue:e==null?void 0:e.id}),g=f.useMemo(()=>!C||C.length===0?null:C.map(I=>y.jsx(Pe,{element:I,paddingLeft:t+8,parents:[...r,e]},I.id.value)),[C,r,e,t]),{isDragging:V,preview:A}=se.useDrag({id:p,element:v,end:()=>x(),start:()=>b(),data:{element:e,parents:r}},[p,e,r,b,x]);f.useEffect(()=>{A(()=>Ne(c),I=>I.remove())},[A,c]);const _=f.useRef({id:ke()}),[{isDraggingOver:M}]=se.useDrop({element:v,id:_.current.id,drop:(I,q)=>l(I,q,e,r,v,_.current.id),hover:(I,q)=>h(u(I,q,e,r,v,_.current.id)),leave:(I,q)=>h(s(I,q,e,r,v,_.current.id))},[e,r,l,u,s]);return y.jsxs(y.Fragment,{children:[y.jsx("div",{ref:v,"data-dragging":V,className:"data-[dragging=true]:opacity-50",onMouseLeave:i,onClick:I=>o(I,e),onMouseOver:I=>n(I,e,v.current),children:y.jsx(Ve,{label:c,hover:D,select:m,dragging:V,dragOver:M,paddingLeft:t,insertBarAt:d})}),g]})},un=({element:e,parents:r,paddingLeft:t})=>{const n=O.useObserverValue(e.children);return f.useMemo(()=>!n||n.length===0?null:n.map(o=>y.jsx(Pe,{element:o,paddingLeft:t,parents:[...r,e]},o.id.value)),[n,r,e,t])},cn=({element:e,parents:r,paddingLeft:t,...n})=>Ge(e,r)?y.jsx(un,{element:e,parents:r,paddingLeft:t}):y.jsx(sn,{element:e,parents:r,paddingLeft:t,onDrop:n.onDrop,onDragOver:n.onDragOver,onDragLeave:n.onDragLeave,onSelect:n.onSelect,onMouseOver:n.onMouseOver,onMouseLeave:n.onMouseLeave}),ln=(e,r)=>{const{components:t}=Oe();return O.useSelectorValue(({get:n})=>{const i=n(t),o=[...r].reverse(),s=o.findIndex(v=>{var C;if(n(v.type)!=="component")return!1;const d=v;return n(e.componentId)===n(d.referenceComponentId)?(C=n(d.slots))==null?void 0:C.some(c=>n(c.referenceSlotId)===n(e.id)):!1});return!o.at(s)||o.slice(s+1).reduce((v,d)=>v!==void 0?v:n(d.type)==="slot-content"?!1:n(d.type)==="component"?!0:v,void 0)?!1:i.some(v=>n(v.id)===n(e.componentId))},[r,e,t])},tt=(e,r)=>O.useSelectorValue(({get:t})=>{var o;const n=[...r].reverse().filter(s=>t(s.type)==="component").find(s=>t(s.referenceComponentId)===t(e.componentId));if(!n)return[];const i=(o=t(n.slots))==null?void 0:o.find(s=>t(s.referenceSlotId)===t(e.id));return i?[t(i.children),i]:[]},[r,e]),dn=({element:e,parents:r,paddingLeft:t,onMouseOver:n,onMouseLeave:i,onDragLeave:o,onDragOver:s,onDrop:u})=>{const l=f.useRef(null),[v,d]=f.useState(null),h=O.useObserverValue(e.name),[C=[],c]=tt(e,r),{hoveredId:p}=Ce(),b=ye({value:p,matchWidthValue:c==null?void 0:c.id}),x=f.useRef({id:ke()}),[{isDraggingOver:R}]=se.useDrop({element:l,id:x.current.id,drop:(E,D)=>c?u(E,D,c,r,l,x.current.id):null,hover:(E,D)=>d(c?s(E,D,c,r,l,x.current.id):null),leave:(E,D)=>d(c?o(E,D,c,r,l,x.current.id):null)},[c,r,u,s,o]);return y.jsxs(y.Fragment,{children:[y.jsx("div",{ref:l,onMouseLeave:i,onMouseOver:E=>c?n(E,c,l.current):void 0,children:y.jsx(Ve,{label:h,select:!1,dragging:!1,hover:b,dragOver:R,insertBarAt:v,paddingLeft:t+8})}),c&&C.length>0&&C.map(E=>y.jsx(Pe,{element:E,paddingLeft:t+16,parents:[...r,c]},E.id.value))]})},fn=({element:e,parents:r,paddingLeft:t,onMouseOver:n,onMouseLeave:i,onSelect:o,onDragLeave:s,onDragOver:u,onDrop:l})=>{const v=f.useRef(null),{onDragStart:d,onDragEnd:h}=Oe(),{selectedId:C}=_e(),{hoveredId:c}=Ce(),[p,b]=f.useState(null),x=O.useObserverValue(e.name),R=O.useObserverValue(e.id),E=ye({value:c,matchWidthValue:e==null?void 0:e.id}),D=ye({value:C,matchWidthValue:e==null?void 0:e.id}),{isDragging:m,preview:g}=se.useDrag({id:R,element:v,end:()=>h(),data:{element:e,parents:r},start:()=>{d()}},[R,e,r,d,h]);f.useEffect(()=>{g(()=>Ne(x),_=>_.remove())},[g,x]);const V=f.useRef({id:ke()}),[{isDraggingOver:A}]=se.useDrop({element:v,id:V.current.id,drop:(_,M)=>l(_,M,e,r,v,V.current.id),hover:(_,M)=>b(u(_,M,e,r,v,V.current.id)),leave:(_,M)=>b(s(_,M,e,r,v,V.current.id))},[e,r,l,u,s]);return y.jsx(y.Fragment,{children:y.jsx("div",{ref:v,"data-dragging":m,className:"data-[dragging=true]:opacity-50",onMouseLeave:i,onClick:_=>o(_,e),onMouseOver:_=>n(_,e,v.current),children:y.jsx(Ve,{label:x,hover:E,select:D,dragging:m,dragOver:A,paddingLeft:t,insertBarAt:p})})})},vn=({element:e,parents:r,paddingLeft:t})=>{const[n=[],i]=tt(e,r);return i?n.map(o=>y.jsx(Pe,{element:o,paddingLeft:t,parents:[...r,i]},o.id.value)):null},pn=({element:e,parents:r,paddingLeft:t,...n})=>{const i=Ge(e,r);return ln(e,r)?y.jsx(dn,{element:e,parents:r,paddingLeft:t,onDrop:n.onDrop,onDragOver:n.onDragOver,onDragLeave:n.onDragLeave,onMouseOver:n.onMouseOver,onMouseLeave:n.onMouseLeave}):i?y.jsx(vn,{element:e,parents:r,paddingLeft:t}):y.jsx(fn,{element:e,parents:r,paddingLeft:t,onDrop:n.onDrop,onDragOver:n.onDragOver,onDragLeave:n.onDragLeave,onSelect:n.onSelect,onMouseOver:n.onMouseOver,onMouseLeave:n.onMouseLeave})},hn=({element:e,parents:r,paddingLeft:t,onMouseOver:n,onMouseLeave:i,onSelect:o,onDragLeave:s,onDragOver:u,onDrop:l})=>{const v=f.useRef(null),[d,h]=f.useState(null),C=O.useObserverValue(e.name),c=O.useObserverValue(e.id),{onDragStart:p,onDragEnd:b}=Oe(),{selectedId:x}=_e(),{hoveredId:R}=Ce(),E=ye({value:R,matchWidthValue:e==null?void 0:e.id}),D=ye({value:x,matchWidthValue:e==null?void 0:e.id}),{isDragging:m,preview:g}=se.useDrag({id:c,element:v,end:()=>b(),data:{element:e,parents:r},start:()=>{p()}},[c,e,r,p,b]);f.useEffect(()=>{g(()=>Ne(C),_=>_.remove())},[g,C]);const V=f.useRef({id:ke()}),[{isDraggingOver:A}]=se.useDrop({element:v,id:V.current.id,drop:(_,M)=>l(_,M,e,r,v,V.current.id),hover:(_,M)=>h(u(_,M,e,r,v,V.current.id)),leave:(_,M)=>h(s(_,M,e,r,v,V.current.id))},[e,r,l,u,s]);return y.jsx("div",{ref:v,"data-dragging":m,className:"data-[dragging=true]:opacity-50",onMouseLeave:i,onClick:_=>o(_,e),onMouseOver:_=>n(_,e,v.current),children:y.jsx(Ve,{label:C,hover:E,select:D,dragging:m,dragOver:A,paddingLeft:t,insertBarAt:d})})},gn=({element:e,parents:r,paddingLeft:t,...n})=>Ge(e,r)?null:y.jsx(hn,{element:e,parents:r,paddingLeft:t,onDrop:n.onDrop,onDragOver:n.onDragOver,onDragLeave:n.onDragLeave,onSelect:n.onSelect,onMouseOver:n.onMouseOver,onMouseLeave:n.onMouseLeave}),Pe=({element:e,parents:r,paddingLeft:t})=>{const n=O.useObserverValue(e.type),{onDrop:i,value:o}=Oe(),{select:s}=_e(),{hover:u}=Ce(),l=f.useCallback((p,b)=>{p.stopPropagation(),p.preventDefault(),s(b.id.value)},[s]),v=f.useCallback(p=>{p.stopPropagation(),p.preventDefault(),s(void 0),u(void 0)},[s,u]),d=f.useCallback((p,b)=>{p.stopPropagation(),u(b.id.value)},[u]),h=f.useCallback(p=>{p.stopPropagation(),u(void 0)},[u]),C=f.useCallback((p,b,x,R,E,D)=>{if(!Ar(b,x,R,E,D))return u(void 0),null;const g=Br(b,x,E);return g?(u(e.id.value),g):(u(void 0),null)},[u]),c=f.useCallback((p,b,x,R,E,D)=>{var _,M,I,q,B,k,Y;if(!Ar(b,x,R,E,D))return;const g=Br(b,x,E);if(!g)return;const V=["html","slot-content"].includes(x.type.value)&&((_=x.children.value)==null?void 0:_.length)||!1,A=g==="start"||g==="end"&&!V;if(!(!A&&x.type.value==="component"))if(Object.keys(p).includes("id")){const ee=p;if(A){const oe=R.slice(-1).at(0),L=((M=(oe?oe.children:o).value)==null?void 0:M.findIndex(Q=>Q.id.value===x.id.value))??-1;i({element:ee.id,from:{position:-1,element:null},to:{element:oe||"root",position:g==="start"?L:L+1}})}else{const oe=((I=x.children.value)==null?void 0:I.length)||0;i({element:ee.id,from:{position:-1,element:null},to:{position:g==="end"?0:oe,element:x}})}}else{const ee=p,oe=(q=ee.parents)==null?void 0:q.slice(-1).at(0),L=oe||"root";if(L!=="root"&&L.type.value==="component")return;const Q=((B=(L==="root"?o:L.children).value)==null?void 0:B.findIndex(ie=>ie.id.value===ee.element.id.value))??-1;if(A){const ie=R.slice(-1).at(0),S=((k=(ie?ie.children:o).value)==null?void 0:k.findIndex(P=>P.id.value===x.id.value))??-1;i({element:ee.element,from:{position:Q,element:L},to:{element:ie||"root",position:g==="start"?S:S+1}})}else{const ie=((Y=x.children.value)==null?void 0:Y.length)||0;i({element:ee.element,from:{position:Q,element:L},to:{position:V?0:ie,element:x}})}s(ee.element.id.value)}},[s,i]);return n==="component"?y.jsx(an,{parents:r,paddingLeft:t,element:e,onDrop:c,onDragLeave:()=>null,onDragOver:C,onDoubleClick:v,onSelect:l,onMouseOver:d,onMouseLeave:h}):n==="slot"?y.jsx(pn,{parents:r,paddingLeft:t,element:e,onDrop:c,onDragLeave:()=>null,onDragOver:C,onSelect:l,onMouseOver:d,onMouseLeave:h}):n==="text"?y.jsx(gn,{parents:r,paddingLeft:t,element:e,onDrop:c,onDragLeave:()=>null,onDragOver:C,onSelect:l,onMouseOver:d,onMouseLeave:h}):y.jsx(cn,{parents:r,paddingLeft:t,element:e,onDrop:c,onDragLeave:()=>null,onDragOver:C,onSelect:l,onMouseOver:d,onMouseLeave:h})},yn=()=>{const e=f.useRef(null),r=f.useRef({id:ke()}),{value:t,onDrop:n,onKeyDown:i}=Oe(),{select:o}=_e(),{hover:s}=Ce(),u=O.useObserverValue(t),l=f.useCallback((h,C)=>{var c;if(h)if(Object.keys(h).includes("id"))n({element:h.id,from:{position:-1,element:null},to:{element:"root",position:t.value.length}});else{const p=h,b=Qt(p.parents||[]),x=b||"root",R=((c=b==null?void 0:b.children.value)==null?void 0:c.findIndex(E=>E.id.value===p.element.id.value))??-1;n({element:p.element,from:{element:x,position:R},to:{element:"root",position:t.value.length}}),o(p.element.id.value)}},[t,o]),v=f.useCallback(h=>{h.stopPropagation(),o(void 0)},[o]),[{isDraggingOver:d}]=se.useDrop({drop:l,element:e,id:r.current.id,leave:()=>s(void 0)},[l]);return y.jsxs("div",{tabIndex:0,onKeyDown:i,onClick:v,ref:e,className:"flex-1 h-full w-full outline-none",children:[u.map(h=>y.jsx(Pe,{parents:[],paddingLeft:4,element:h},h.id.value)),u.length===0&&y.jsx("p",{children:"Drag and drop here to start"}),d&&y.jsx(vr,{})]})};function bn({onSelect:e,onHover:r,selectedId:t,hoveredId:n,...i}){return y.jsx(se.DragAndDropProvider,{children:y.jsx(Jt,{...i,children:y.jsx(Xt,{id:t,onSelect:e,children:y.jsx(Zt,{id:n,onHover:r,children:y.jsx(yn,{})})})})})}const nt=f.createContext({});function xn({children:e,...r}){return y.jsx(nt.Provider,{value:r,children:e})}const ve=()=>f.useContext(nt),ot=f.createContext({}),mn=({children:e})=>{const r=f.useRef(O.observe(!1)),t=f.useRef(O.observe(!1)),n=f.useRef(O.observe(0)),i=f.useRef(O.observe(0)),o=f.useRef(O.observe(0)),s=f.useRef(O.observe(0)),u=f.useMemo(()=>({observableIsHorizontal:r.current,observableIsVisible:t.current,observableHeight:n.current,observableWidth:i.current,observableLeft:o.current,observableTop:s.current}),[]),l=f.useCallback(d=>{O.set(s.current,h=>h!==d.top?d.top:h),O.set(o.current,h=>h!==d.left?d.left:h),O.set(i.current,h=>h!==d.width?d.width:h),O.set(n.current,h=>h!==d.height?d.height:h),O.set(t.current,h=>h!==d.isVisible?d.isVisible:h),O.set(r.current,h=>h!==!!d.isHorizontal?!!d.isHorizontal:h)},[]),v=f.useCallback(()=>{l({width:0,height:0,top:-100,left:-100,isVisible:!1})},[l]);return y.jsx(ot.Provider,{value:{showInsertBar:l,hideInsertBar:v,observables:u},children:e})},we=()=>f.useContext(ot),Sn=({color:e="#3e8ce4"})=>{const{observableHeight:r,observableIsHorizontal:t,observableIsVisible:n,observableLeft:i,observableTop:o,observableWidth:s}=we().observables,[u]=O.useObserver(o),[l]=O.useObserver(i),[v]=O.useObserver(s),[d]=O.useObserver(r),[h]=O.useObserver(n),[C]=O.useObserver(t),c=f.useMemo(()=>({width:C?v:4,height:C?4:d,top:u-(C?2:0),left:l-(C?0:2)}),[d,C,l,u,v]);return h?y.jsx("div",{className:"animate-pulse",style:{zIndex:10,borderRadius:5,top:c.top,position:"fixed",left:c.left,width:c.width,pointerEvents:"none",height:c.height,backgroundColor:e}}):null},it=f.createContext({}),On=({children:e,id:r,onSelect:t})=>{const n=f.useRef({documentHorizontalScroll:O.observe(0),playgroundSize:O.observe(void 0),documentVerticalScroll:O.observe(0),getPosition:O.observe(void 0),parents:O.observe(void 0),element:O.observe(void 0),onSelect:t,id:r});return f.useEffect(()=>{n.current.id=r},[r]),f.useEffect(()=>{n.current.onSelect=t},[t]),y.jsx(it.Provider,{value:n.current,children:e})};var at={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},Lr=f.createContext&&f.createContext(at),Cn=["attr","size","title"];function wn(e,r){if(e==null)return{};var t=En(e,r),n,i;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],!(r.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}function En(e,r){if(e==null)return{};var t={};for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){if(r.indexOf(n)>=0)continue;t[n]=e[n]}return t}function Ye(){return Ye=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},Ye.apply(this,arguments)}function $r(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),t.push.apply(t,n)}return t}function qe(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?$r(Object(t),!0).forEach(function(n){Rn(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):$r(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}function Rn(e,r,t){return r=Dn(r),r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function Dn(e){var r=_n(e,"string");return typeof r=="symbol"?r:r+""}function _n(e,r){if(typeof e!="object"||!e)return e;var t=e[Symbol.toPrimitive];if(t!==void 0){var n=t.call(e,r||"default");if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(r==="string"?String:Number)(e)}function st(e){return e&&e.map((r,t)=>f.createElement(r.tag,qe({key:t},r.attr),st(r.child)))}function Ke(e){return r=>f.createElement(Pn,Ye({attr:qe({},e.attr)},r),st(e.child))}function Pn(e){var r=t=>{var{attr:n,size:i,title:o}=e,s=wn(e,Cn),u=i||t.size||"1em",l;return t.className&&(l=t.className),e.className&&(l=(l?l+" ":"")+e.className),f.createElement("svg",Ye({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,n,s,{className:l,style:qe(qe({color:e.color||t.color},t.style),e.style),height:u,width:u,xmlns:"http://www.w3.org/2000/svg"}),o&&f.createElement("title",null,o),e.children)};return Lr!==void 0?f.createElement(Lr.Consumer,null,t=>r(t)):r(at)}function jn(e){return Ke({tag:"svg",attr:{viewBox:"0 0 16 16",fill:"currentColor"},child:[{tag:"path",attr:{fillRule:"evenodd",clipRule:"evenodd",d:"M13.854 7l-5-5h-.707l-5 5 .707.707L8 3.561V14h1V3.56l4.146 4.147.708-.707z"},child:[]}]})(e)}function Tn(e){return Ke({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M17.5 0h-9L7 1.5V6H2.5L1 7.5v15.07L2.5 24h12.07L16 22.57V18h4.7l1.3-1.43V4.5L17.5 0zm0 2.12l2.38 2.38H17.5V2.12zm-3 20.38h-12v-15H7v9.07L8.5 18h6v4.5zm6-6h-12v-15H16V6h4.5v10.5z"},child:[]}]})(e)}function In(e){return Ke({tag:"svg",attr:{viewBox:"0 0 16 16",fill:"currentColor"},child:[{tag:"path",attr:{fillRule:"evenodd",clipRule:"evenodd",d:"M10.232 10.707L8.5 12.44V9h-1v3.44l-1.732-1.733-.707.707L7.646 14h.708l2.585-2.586-.707-.707zM5.061 3.586l.707.707L7.5 2.56V6h1V2.56l1.732 1.733.707-.707L8.354 1h-.708L5.061 3.586zm-.268 1.682L3.06 7H6.5v1H3.06l1.733 1.732-.707.707L1.5 7.854v-.708l2.586-2.585.707.707zM9.5 7h3.44l-1.733-1.732.707-.707L14.5 7.146v.708l-2.586 2.585-.707-.707L12.94 8H9.5V7z"},child:[]}]})(e)}function Mn(e){return Ke({tag:"svg",attr:{viewBox:"0 0 16 16",fill:"currentColor"},child:[{tag:"path",attr:{fillRule:"evenodd",clipRule:"evenodd",d:"M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1zM9 2H6v1h3V2zM4 13h7V4H4v9zm2-8H5v7h1V5zm1 0h1v7H7V5zm2 0h1v7H9V5z"},child:[]}]})(e)}const kn=e=>{let r,t=0;if(!(!e||e.length===0)){do t--,r=e==null?void 0:e.slice(t).at(0);while(!r||!["html","slot-content"].includes(r.type.value));return r}},He=(e,r)=>{const t=document.createElement("label");return t.style.padding="4px",t.style.paddingTop="2px",t.style.paddingRight="8px",t.style.paddingBottom="2px",t.style.backgroundColor="#3e8ce4",t.style.color="#ffffff",t.style.alignItems="center",t.style.borderRadius="2px",t.style.fontWeight="600",t.style.position="fixed",t.style.fontSize="11px",t.style.display="flex",t.style.height="20px",t.style.zIndex="-100",t.style.width="auto",t.appendChild(new Text(e)),document.body.appendChild(t),t};function Vn(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"")}function ut(e){return en.camel(Vn(e))}const Fr=(e,r,t,n,i)=>!(!n.current||e.droppableId!==i||e.draggingId===r.id.value||t.some(u=>e.draggingId===u.id.value)),An=(e,r,t)=>{if(!t.current)return null;if(r.type.value==="slot-content"&&Array.isArray(r.children.value))return{isOverCurrentStart:!1,isOverCurrentEnd:!1,isOverEnd:!1,isOverStart:!1};const n=["component","slot","text"].includes(r.type.value)?!1:Array.isArray(r.children.value),i=t.current.getBoundingClientRect(),o=n?5:i.height/2,s=e.x-i.x,u=e.y-i.y,l=u>=0&&u<=o,v=u>=i.height-o&&u<=i.height,d=u>=o&&u<=i.height-o,h=s>=0&&s<=o,C=s>=i.width-o&&s<=i.width,c=s>=o&&s<=i.width-o;let p=!1,b=!1,x=!1,R=!1;if(n){const E=v||C||l||h;p=c&&d&&!E,b=c&&d&&!E,x=v||C,R=l||h}else x=(v||C)&&!l,R=(l||h)&&!v;return{isOverCurrentStart:p,isOverCurrentEnd:b,isOverEnd:x,isOverStart:R}},Bn=(e,r,t)=>{if(!t.current)return null;const n=t.current.getBoundingClientRect();if(r.type.value==="slot-content"&&Array.isArray(r.children.value))return{isHorizontal:!0,left:n.left,width:n.width,height:n.height,top:n.top+n.height/2};const i=["component","slot","text"].includes(r.type.value)?!1:Array.isArray(r.children.value),o=i?5:n.height/2,s=e.x-n.x,u=e.y-n.y,l=u>=n.height-o&&u<=n.height,v=u>=o&&u<=n.height-o,d=s>=0&&s<=o,h=s>=n.width-o&&s<=n.width,C=s>=o&&s<=n.width-o;let c=!0,p=n.top,b=n.left,x=n.width,R=n.height;return l&&(d||h||C)?p=n.top+n.height:v&&d?c=!1:v&&h?(b=n.left+n.width,c=!1):C&&v&&(p=n.top+(i?n.height/2:n.height)),{top:p,isHorizontal:c,left:b,width:x,height:R}},Ae=()=>Xr.v4(),me=()=>{const e=f.useContext(it),r=f.useCallback(o=>{e.onSelect(o)},[e.id]),t=f.useCallback((o,s,u)=>{O.set(e.getPosition,()=>u),O.set(e.parents,s),O.set(e.element,o)},[e.getPosition]),n=f.useCallback((o,s)=>{O.set(e.documentHorizontalScroll,s),O.set(e.documentVerticalScroll,o)},[e.documentVerticalScroll,e.documentHorizontalScroll]),i=f.useCallback((o,s)=>{O.set(e.playgroundSize,{height:o,width:s})},[e.playgroundSize]);return{select:r,selectedId:e.id,selectedElement:e.element,selectedElementParents:e.parents,updateSelectBar:t,updateSelectBarScroll:n,updateSelectBarPlaygroundSize:i,selectBarGetPosition:e.getPosition,selectBarPlaygroundSize:e.playgroundSize,selectBarDocumentVerticalScroll:e.documentVerticalScroll,selectBarDocumentHorizontalScroll:e.documentHorizontalScroll}},Ln=f.memo(({children:e,zIndex:r=0,top:t=-1e3,left:n=-1e3,width:i=0,height:o=0,color:s="#4a87ee"})=>{const u=f.useRef(null),l=f.useMemo(()=>{if(!u.current||n+u.current.getBoundingClientRect().width<=u.current.ownerDocument.documentElement.clientWidth)return 0;const v=n+u.current.getBoundingClientRect().width;return u.current.ownerDocument.documentElement.clientWidth-v},[n]);return y.jsx("div",{"data-select":!0,style:{top:t,left:n,position:"fixed",border:"thin solid",pointerEvents:"none",width:i,height:o,fontSize:14,zIndex:5+r,borderColor:s,fontFamily:"sans-serif"},children:y.jsx("span",{ref:u,style:{zIndex:5,height:20,color:"white",paddingLeft:8,borderRadius:4,paddingRight:8,outline:"none",display:"flex",left:l,userSelect:"none",position:"absolute",alignItems:"center",pointerEvents:"none",backgroundColor:s,top:t-20<0?o+20>=500?0:o:-20},children:e})})}),$n=f.memo(()=>{const e=f.useRef(null),{onDragStart:r,onDragEnd:t,onDuplicate:n,onRemove:i}=ve(),{hideInsertBar:o}=we(),{select:s,selectedId:u,selectedElement:l,selectBarGetPosition:v,selectedElementParents:d,selectBarDocumentVerticalScroll:h,selectBarDocumentHorizontalScroll:C}=me(),c=O.useObserverValue(d),p=O.useObserverValue(l),b=O.useObserverValue(u),x=O.useSelectorValue(({get:I})=>p?I(p.name):"",[p]),{width:R,height:E,top:D,left:m}=O.useSelectorValue(({get:I})=>{const q=I(C),B=I(h),k=I(v);return k?{width:k().width,height:k().height,top:k().top-B,left:k().left-q}:{top:0,left:0,width:0,height:0}},[C,h,v]),g=f.useCallback(I=>{I.stopPropagation();const q=c==null?void 0:c.slice(-1).at(0);if(q)if(q.type.value==="slot-content"){const B=c==null?void 0:c.find(k=>{var Y;return k.type.value!=="component"?!1:(Y=k.slots.value)==null?void 0:Y.some(ee=>ee.id.value===q.id.value)});s(B==null?void 0:B.id.value)}else s(q.id.value)},[s,c]),V=f.useCallback(()=>{p&&i(p)},[i,p]),A=f.useCallback(()=>{p&&n(p)},[n,p]),{preview:_,isDragging:M}=se.useDrag({element:e,id:b||"default",start:()=>{r()},end:()=>{o(),t()},canDrag:!!p&&Array.isArray(c),data:{element:p,parents:c}},[b,p,c,o,r,t]);return f.useEffect(()=>{_(()=>He(x),I=>I.remove())},[_,x]),!b||R===0&&E===0&&m===0&&D===0?null:y.jsx(Ln,{zIndex:1,top:D-1,width:R,height:E,left:m-1,color:"#4a87ee",children:y.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,whiteSpace:"nowrap",wordBreak:"keep-all"},children:[x,!M&&y.jsxs("div",{style:{pointerEvents:"auto",display:"flex",alignItems:"center",gap:4},children:[c&&c.length>0&&y.jsx(jn,{title:"Select parent",onClick:g,style:{cursor:"pointer",width:14,height:14}}),y.jsx(Mn,{title:"Remove element",onClick:V,style:{cursor:"pointer",width:14,height:14}}),y.jsx(Tn,{title:"Duplicate element and children",onClick:A,style:{cursor:"pointer",width:14,height:14}}),y.jsx("span",{ref:e,title:"Drag element",style:{display:"flex",cursor:"move"},children:y.jsx(In,{style:{width:14,height:14,pointerEvents:"none"}})})]})]})})}),ct=f.createContext({}),Fn=({children:e,id:r,onHover:t})=>{const n=f.useRef({documentHorizontalScroll:O.observe(0),playgroundSize:O.observe(void 0),documentVerticalScroll:O.observe(0),getPosition:O.observe(void 0),element:O.observe(void 0),onHover:t,id:r});return f.useEffect(()=>{n.current.id=r},[r]),f.useEffect(()=>{n.current.onHover=t},[t]),y.jsx(ct.Provider,{value:n.current,children:e})},Se=()=>{const e=f.useContext(ct),r=f.useCallback(o=>{e.id.value!==o&&e.onHover(o)},[e.id]),t=f.useCallback((o,s)=>{O.set(e.getPosition,()=>s),O.set(e.element,o)},[e.getPosition]),n=f.useCallback((o,s)=>{O.set(e.documentHorizontalScroll,s),O.set(e.documentVerticalScroll,o)},[e.documentVerticalScroll,e.documentHorizontalScroll]),i=f.useCallback((o,s)=>{O.set(e.playgroundSize,{height:o,width:s})},[e.playgroundSize]);return{hover:r,hoveredId:e.id,hoveredElement:e.element,updateHoverBar:t,updateHoverBarScroll:n,updateHoverBarPlaygroundSize:i,hoverBarGetPosition:e.getPosition,hoverBarPlaygroundSize:e.playgroundSize,hoverBarDocumentVerticalScroll:e.documentVerticalScroll,hoverBarDocumentHorizontalScroll:e.documentHorizontalScroll}},Hn=f.memo(({children:e,zIndex:r=0,top:t=-1e3,left:n=-1e3,width:i=0,height:o=0,color:s="#4a87ee"})=>{const u=f.useRef(null),l=f.useMemo(()=>{if(!u.current||n+u.current.getBoundingClientRect().width<=u.current.ownerDocument.documentElement.clientWidth)return 0;const v=n+u.current.getBoundingClientRect().width;return u.current.ownerDocument.documentElement.clientWidth-v},[n]);return y.jsx("div",{"data-hover":!0,style:{top:t,left:n,position:"fixed",border:"thin solid",pointerEvents:"none",width:i,height:o,fontSize:14,zIndex:5+r,borderColor:s,fontFamily:"sans-serif"},children:y.jsx("span",{ref:u,style:{zIndex:5,height:20,color:"white",paddingLeft:8,borderRadius:4,paddingRight:8,outline:"none",display:"flex",left:l,userSelect:"none",position:"absolute",alignItems:"center",pointerEvents:"none",backgroundColor:s,top:t-20<0?o+20>=500?0:o:-20},children:e})})}),zn=f.memo(()=>{const{selectedId:e}=me(),{hoveredId:r,hoveredElement:t,hoverBarGetPosition:n,hoverBarDocumentVerticalScroll:i,hoverBarDocumentHorizontalScroll:o}=Se(),s=O.useObserverValue(o),u=O.useObserverValue(i),l=O.useObserverValue(n),v=O.useObserverValue(t),d=O.useObserverValue(e),h=O.useObserverValue(r),C=O.useSelectorValue(({get:R})=>v?R(v.name):"",[v]),{width:c,height:p,top:b,left:x}=f.useMemo(()=>l?{width:l().width,height:l().height,top:l().top-u,left:l().left-s}:{top:0,left:0,width:0,height:0},[s,u,l]);return!h||h===d||c===0&&p===0&&x===0&&b===0?null:y.jsx(Hn,{zIndex:1,top:b-1,width:c,left:x-1,height:p,color:"#ed8b5f",children:y.jsx("div",{style:{whiteSpace:"nowrap",wordBreak:"keep-all"},children:C})})});var Je={},ze={},pr={exports:{}},Ue={exports:{}},te={};/** @license React v16.13.1

* react-is.production.min.js

*

* Copyright (c) Facebook, Inc. and its affiliates.

*

* This source code is licensed under the MIT license found in the

* LICENSE file in the root directory of this source tree.

*/var Hr;function Wn(){if(Hr)return te;Hr=1;var e=typeof Symbol=="function"&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,n=e?Symbol.for("react.fragment"):60107,i=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,s=e?Symbol.for("react.provider"):60109,u=e?Symbol.for("react.context"):60110,l=e?Symbol.for("react.async_mode"):60111,v=e?Symbol.for("react.concurrent_mode"):60111,d=e?Symbol.for("react.forward_ref"):60112,h=e?Symbol.for("react.suspense"):60113,C=e?Symbol.for("react.suspense_list"):60120,c=e?Symbol.for("react.memo"):60115,p=e?Symbol.for("react.lazy"):60116,b=e?Symbol.for("react.block"):60121,x=e?Symbol.for("react.fundamental"):60117,R=e?Symbol.for("react.responder"):60118,E=e?Symbol.for("react.scope"):60119;function D(g){if(typeof g=="object"&&g!==null){var V=g.$$typeof;switch(V){case r:switch(g=g.type,g){case l:case v:case n:case o:case i:case h:return g;default:switch(g=g&&g.$$typeof,g){case u:case d:case p:case c:case s:return g;default:return V}}case t:return V}}}function m(g){return D(g)===v}return te.AsyncMode=l,te.ConcurrentMode=v,te.ContextConsumer=u,te.ContextProvider=s,te.Element=r,te.ForwardRef=d,te.Fragment=n,te.Lazy=p,te.Memo=c,te.Portal=t,te.Profiler=o,te.StrictMode=i,te.Suspense=h,te.isAsyncMode=function(g){return m(g)||D(g)===l},te.isConcurrentMode=m,te.isContextConsumer=function(g){return D(g)===u},te.isContextProvider=function(g){return D(g)===s},te.isElement=function(g){return typeof g=="object"&&g!==null&&g.$$typeof===r},te.isForwardRef=function(g){return D(g)===d},te.isFragment=function(g){return D(g)===n},te.isLazy=function(g){return D(g)===p},te.isMemo=function(g){return D(g)===c},te.isPortal=function(g){return D(g)===t},te.isProfiler=function(g){return D(g)===o},te.isStrictMode=function(g){return D(g)===i},te.isSuspense=function(g){return D(g)===h},te.isValidElementType=function(g){return typeof g=="string"||typeof g=="function"||g===n||g===v||g===o||g===i||g===h||g===C||typeof g=="object"&&g!==null&&(g.$$typeof===p||g.$$typeof===c||g.$$typeof===s||g.$$typeof===u||g.$$typeof===d||g.$$typeof===x||g.$$typeof===R||g.$$typeof===E||g.$$typeof===b)},te.typeOf=D,te}var ne={};/** @license React v16.13.1

* react-is.development.js

*

* Copyright (c) Facebook, Inc. and its affiliates.

*

* This source code is licensed under the MIT license found in the

* LICENSE file in the root directory of this source tree.

*/var zr;function Un(){return zr||(zr=1,process.env.NODE_ENV!=="production"&&function(){var e=typeof Symbol=="function"&&Symbol.for,r=e?Symbol.for("react.element"):60103,t=e?Symbol.for("react.portal"):60106,n=e?Symbol.for("react.fragment"):60107,i=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,s=e?Symbol.for("react.provider"):60109,u=e?Symbol.for("react.context"):60110,l=e?Symbol.for("react.async_mode"):60111,v=e?Symbol.for("react.concurrent_mode"):60111,d=e?Symbol.for("react.forward_ref"):60112,h=e?Symbol.for("react.suspense"):60113,C=e?Symbol.for("react.suspense_list"):60120,c=e?Symbol.for("react.memo"):60115,p=e?Symbol.for("react.lazy"):60116,b=e?Symbol.for("react.block"):60121,x=e?Symbol.for("react.fundamental"):60117,R=e?Symbol.for("react.responder"):60118,E=e?Symbol.for("react.scope"):60119;function D(j){return typeof j=="string"||typeof j=="function"||j===n||j===v||j===o||j===i||j===h||j===C||typeof j=="object"&&j!==null&&(j.$$typeof===p||j.$$typeof===c||j.$$typeof===s||j.$$typeof===u||j.$$typeof===d||j.$$typeof===x||j.$$typeof===R||j.$$typeof===E||j.$$typeof===b)}function m(j){if(typeof j=="object"&&j!==null){var pe=j.$$typeof;switch(pe){case r:var Te=j.type;switch(Te){case l:case v:case n:case o:case i:case h:return Te;default:var Ee=Te&&Te.$$typeof;switch(Ee){case u:case d:case p:case c:case s:return Ee;default:return pe}}case t:return pe}}}var g=l,V=v,A=u,_=s,M=r,I=d,q=n,B=p,k=c,Y=t,ee=o,oe=i,L=h,Q=!1;function ie(j){return Q||(Q=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),S(j)||m(j)===l}function S(j){return m(j)===v}function P(j){return m(j)===u}function $(j){return m(j)===s}function z(j){return typeof j=="object"&&j!==null&&j.$$typeof===r}function H(j){return m(j)===d}function J(j){return m(j)===n}function W(j){return m(j)===p}function U(j){return m(j)===c}function N(j){return m(j)===t}function Z(j){return m(j)===o}function G(j){return m(j)===i}function le(j){return m(j)===h}ne.AsyncMode=g,ne.ConcurrentMode=V,ne.ContextConsumer=A,ne.ContextProvider=_,ne.Element=M,ne.ForwardRef=I,ne.Fragment=q,ne.Lazy=B,ne.Memo=k,ne.Portal=Y,ne.Profiler=ee,ne.StrictMode=oe,ne.Suspense=L,ne.isAsyncMode=ie,ne.isConcurrentMode=S,ne.isContextConsumer=P,ne.isContextProvider=$,ne.isElement=z,ne.isForwardRef=H,ne.isFragment=J,ne.isLazy=W,ne.isMemo=U,ne.isPortal=N,ne.isProfiler=Z,ne.isStrictMode=G,ne.isSuspense=le,ne.isValidElementType=D,ne.typeOf=m}()),ne}var Wr;function lt(){return Wr||(Wr=1,process.env.NODE_ENV==="production"?Ue.exports=Wn():Ue.exports=Un()),Ue.exports}/*

object-assign

(c) Sindre Sorhus

@license MIT

*/var ir,Ur;function Yn(){if(Ur)return ir;Ur=1;var e=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;function n(o){if(o==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(o)}function i(){try{if(!Object.assign)return!1;var o=new String("abc");if(o[5]="de",Object.getOwnPropertyNames(o)[0]==="5")return!1;for(var s={},u=0;u<10;u++)s["_"+String.fromCharCode(u)]=u;var l=Object.getOwnPropertyNames(s).map(function(d){return s[d]});if(l.join("")!=="0123456789")return!1;var v={};return"abcdefghijklmnopqrst".split("").forEach(function(d){v[d]=d}),Object.keys(Object.assign({},v)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}return ir=i()?Object.assign:function(o,s){for(var u,l=n(o),v,d=1;d<arguments.length;d++){u=Object(arguments[d]);for(var h in u)r.call(u,h)&&(l[h]=u[h]);if(e){v=e(u);for(var C=0;C<v.length;C++)t.call(u,v[C])&&(l[v[C]]=u[v[C]])}}return l},ir}var ar,Yr;function yr(){if(Yr)return ar;Yr=1;var e="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return ar=e,ar}var sr,qr;function dt(){return qr||(qr=1,sr=Function.call.bind(Object.prototype.hasOwnProperty)),sr}var ur,Nr;function qn(){if(Nr)return ur;Nr=1;var e=function(){};if(process.env.NODE_ENV!=="production"){var r=yr(),t={},n=dt();e=function(o){var s="Warning: "+o;typeof console<"u"&&console.error(s);try{throw new Error(s)}catch{}}}function i(o,s,u,l,v){if(process.env.NODE_ENV!=="production"){for(var d in o)if(n(o,d)){var h;try{if(typeof o[d]!="function"){var C=Error((l||"React class")+": "+u+" type `"+d+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof o[d]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw C.name="Invariant Violation",C}h=o[d](s,d,l,u,null,r)}catch(p){h=p}if(h&&!(h instanceof Error)&&e((l||"React class")+": type specification of "+u+" `"+d+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof h+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),h instanceof Error&&!(h.message in t)){t[h.message]=!0;var c=v?v():"";e("Failed "+u+" type: "+h.message+(c??""))}}}}return i.resetWarningCache=function(){process.env.NODE_ENV!=="production"&&(t={})},ur=i,ur}var cr,Gr;function Nn(){if(Gr)return cr;Gr=1;var e=lt(),r=Yn(),t=yr(),n=dt(),i=qn(),o=function(){};process.env.NODE_ENV!=="production"&&(o=function(u){var l="Warning: "+u;typeof console<"u"&&console.error(l);try{throw new Error(l)}catch{}});function s(){return null}return cr=function(u,l){var v=typeof Symbol=="function"&&Symbol.iterator,d="@@iterator";function h(S){var P=S&&(v&&S[v]||S[d]);if(typeof P=="function")return P}var C="<<anonymous>>",c={array:R("array"),bigint:R("bigint"),bool:R("boolean"),func:R("function"),number:R("number"),object:R("object"),string:R("string"),symbol:R("symbol"),any:E(),arrayOf:D,element:m(),elementType:g(),instanceOf:V,node:I(),objectOf:_,oneOf:A,oneOfType:M,shape:B,exact:k};function p(S,P){return S===P?S!==0||1/S===1/P:S!==S&&P!==P}function b(S,P){this.message=S,this.data=P&&typeof P=="object"?P:{},this.stack=""}b.prototype=Error.prototype;function x(S){if(process.env.NODE_ENV!=="production")var P={},$=0;function z(J,W,U,N,Z,G,le){if(N=N||C,G=G||U,le!==t){if(l){var j=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw j.name="Invariant Violation",j}else if(process.env.NODE_ENV!=="production"&&typeof console<"u"){var pe=N+":"+U;!P[pe]&&$<3&&(o("You are manually calling a React.PropTypes validation function for the `"+G+"` prop on `"+N+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),P[pe]=!0,$++)}}return W[U]==null?J?W[U]===null?new b("The "+Z+" `"+G+"` is marked as required "+("in `"+N+"`, but its value is `null`.")):new b("The "+Z+" `"+G+"` is marked as required in "+("`"+N+"`, but its value is `undefined`.")):null:S(W,U,N,Z,G)}var H=z.bind(null,!1);return H.isRequired=z.bind(null,!0),H}function R(S){function P($,z,H,J,W,U){var N=$[z],Z=oe(N);if(Z!==S){var G=L(N);return new b("Invalid "+J+" `"+W+"` of type "+("`"+G+"` supplied to `"+H+"`, expected ")+("`"+S+"`."),{expectedType:S})}return null}return x(P)}function E(){return x(s)}function D(S){function P($,z,H,J,W){if(typeof S!="function")return new b("Property `"+W+"` of component `"+H+"` has invalid PropType notation inside arrayOf.");var U=$[z];if(!Array.isArray(U)){var N=oe(U);return new b("Invalid "+J+" `"+W+"` of type "+("`"+N+"` supplied to `"+H+"`, expected an array."))}for(var Z=0;Z<U.length;Z++){var G=S(U,Z,H,J,W+"["+Z+"]",t);if(G instanceof Error)return G}return null}return x(P)}function m(){function S(P,$,z,H,J){var W=P[$];if(!u(W)){var U=oe(W);return new b("Invalid "+H+" `"+J+"` of type "+("`"+U+"` supplied to `"+z+"`, expected a single ReactElement."))}return null}return x(S)}function g(){function S(P,$,z,H,J){var W=P[$];if(!e.isValidElementType(W)){var U=oe(W);return new b("Invalid "+H+" `"+J+"` of type "+("`"+U+"` supplied to `"+z+"`, expected a single ReactElement type."))}return null}return x(S)}function V(S){function P($,z,H,J,W){if(!($[z]instanceof S)){var U=S.name||C,N=ie($[z]);return new b("Invalid "+J+" `"+W+"` of type "+("`"+N+"` supplied to `"+H+"`, expected ")+("instance of `"+U+"`."))}return null}return x(P)}function A(S){if(!Array.isArray(S))return process.env.NODE_ENV!=="production"&&(arguments.length>1?o("Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."):o("Invalid argument supplied to oneOf, expected an array.")),s;function P($,z,H,J,W){for(var U=$[z],N=0;N<S.length;N++)if(p(U,S[N]))return null;var Z=JSON.stringify(S,function(le,j){var pe=L(j);return pe==="symbol"?String(j):j});return new b("Invalid "+J+" `"+W+"` of value `"+String(U)+"` "+("supplied to `"+H+"`, expected one of "+Z+"."))}return x(P)}function _(S){function P($,z,H,J,W){if(typeof S!="function")return new b("Property `"+W+"` of component `"+H+"` has invalid PropType notation inside objectOf.");var U=$[z],N=oe(U);if(N!=="object")return new b("Invalid "+J+" `"+W+"` of type "+("`"+N+"` supplied to `"+H+"`, expected an object."));for(var Z in U)if(n(U,Z)){var G=S(U,Z,H,J,W+"."+Z,t);if(G instanceof Error)return G}return null}return x(P)}function M(S){if(!Array.isArray(S))return process.env.NODE_ENV!=="production"&&o("Invalid argument supplied to oneOfType, expected an instance of array."),s;for(var P=0;P<S.length;P++){var $=S[P];if(typeof $!="function")return o("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+Q($)+" at index "+P+"."),s}function z(H,J,W,U,N){for(var Z=[],G=0;G<S.length;G++){var le=S[G],j=le(H,J,W,U,N,t);if(j==null)return null;j.data&&n(j.data,"expectedType")&&Z.push(j.data.expectedType)}var pe=Z.length>0?", expected one of type ["+Z.join(", ")+"]":"";return new b("Invalid "+U+" `"+N+"` supplied to "+("`"+W+"`"+pe+"."))}return x(z)}function I(){function S(P,$,z,H,J){return Y(P[$])?null:new b("Invalid "+H+" `"+J+"` supplied to "+("`"+z+"`, expected a ReactNode."))}return x(S)}function q(S,P,$,z,H){return new b((S||"React class")+": "+P+" type `"+$+"."+z+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+H+"`.")}function B(S){function P($,z,H,J,W){var U=$[z],N=oe(U);if(N!=="object")return new b("Invalid "+J+" `"+W+"` of type `"+N+"` "+("supplied to `"+H+"`, expected `object`."));for(var Z in S){var G=S[Z];if(typeof G!="function")return q(H,J,W,Z,L(G));var le=G(U,Z,H,J,W+"."+Z,t);if(le)return le}return null}return x(P)}function k(S){function P($,z,H,J,W){var U=$[z],N=oe(U);if(N!=="object")return new b("Invalid "+J+" `"+W+"` of type `"+N+"` "+("supplied to `"+H+"`, expected `object`."));var Z=r({},$[z],S);for(var G in Z){var le=S[G];if(n(S,G)&&typeof le!="function")return q(H,J,W,G,L(le));if(!le)return new b("Invalid "+J+" `"+W+"` key `"+G+"` supplied to `"+H+"`.\nBad object: "+JSON.stringify($[z],null," ")+`

Valid keys: `+JSON.stringify(Object.keys(S),null," "));var j=le(U,G,H,J,W+"."+G,t);if(j)return j}return null}return x(P)}function Y(S){switch(typeof S){case"number":case"string":case"undefined":return!0;case"boolean":return!S;case"object":if(Array.isArray(S))return S.every(Y);if(S===null||u(S))return!0;var P=h(S);if(P){var $=P.call(S),z;if(P!==S.entries){for(;!(z=$.next()).done;)if(!Y(z.value))return!1}else for(;!(z=$.next()).done;){var H=z.value;if(H&&!Y(H[1]))return!1}}else return!1;return!0;default:return!1}}function ee(S,P){return S==="symbol"?!0:P?P["@@toStringTag"]==="Symbol"||typeof Symbol=="function"&&P instanceof Symbol:!1}function oe(S){var P=typeof S;return Array.isArray(S)?"array":S instanceof RegExp?"object":ee(P,S)?"symbol":P}function L(S){if(typeof S>"u"||S===null)return""+S;var P=oe(S);if(P==="object"){if(S instanceof Date)return"date";if(S instanceof RegExp)return"regexp"}return P}function Q(S){var P=L(S);switch(P){case"array":case"object":return"an "+P;case"boolean":case"date":case"regexp":return"a "+P;default:return P}}function ie(S){return!S.constructor||!S.constructor.name?C:S.constructor.name}return c.checkPropTypes=i,c.resetWarningCache=i.resetWarningCache,c.PropTypes=c,c},cr}var lr,Kr;function Gn(){if(Kr)return lr;Kr=1;var e=yr();function r(){}function t(){}return t.resetWarningCache=r,lr=function(){function n(s,u,l,v,d,h){if(h!==e){var C=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw C.name="Invariant Violation",C}}n.isRequired=n;function i(){return n}var o={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:i,element:n,elementType:n,instanceOf:i,node:n,objectOf:i,oneOf:i,oneOfType:i,shape:i,exact:i,checkPropTypes:t,resetWarningCache:r};return o.PropTypes=o,o},lr}if(process.env.NODE_ENV!=="production"){var Kn=lt(),Jn=!0;pr.exports=Nn()(Kn.isElement,Jn)}else pr.exports=Gn()();var ft=pr.exports,ge={};Object.defineProperty(ge,"__esModule",{value:!0});ge.FrameContextConsumer=ge.FrameContextProvider=ge.useFrame=ge.FrameContext=void 0;var Xn=f,vt=Zn(Xn);function Zn(e){return e&&e.__esModule?e:{default:e}}var pt=void 0,ht=void 0;typeof document<"u"&&(pt=document);typeof window<"u"&&(ht=window);var br=ge.FrameContext=vt.default.createContext({document:pt,window:ht});ge.useFrame=function(){return vt.default.useContext(br)};var Qn=br.Provider,eo=br.Consumer;ge.FrameContextProvider=Qn;ge.FrameContextConsumer=eo;var xr={};Object.defineProperty(xr,"__esModule",{value:!0});var ro=function(){function e(r,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(r,i.key,i)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),hr=f;gt(hr);var to=ft,dr=gt(to);function gt(e){return e&&e.__esModule?e:{default:e}}function no(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function oo(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return r&&(typeof r=="object"||typeof r=="function")?r:e}function io(e,r){if(typeof r!="function"&&r!==null)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}var yt=function(e){io(r,e);function r(){return no(this,r),oo(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments))}return ro(r,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return hr.Children.only(this.props.children)}}]),r}(hr.Component);yt.propTypes={children:dr.default.element.isRequired,contentDidMount:dr.default.func.isRequired,contentDidUpdate:dr.default.func.isRequired};xr.default=yt;Object.defineProperty(ze,"__esModule",{value:!0});ze.Frame=void 0;var gr=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},ao=function(){function e(r,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(r,i.key,i)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),bt=f,De=Xe(bt),so=Yt,Jr=Xe(so),uo=ft,xe=Xe(uo),co=ge,lo=xr,fo=Xe(lo);function Xe(e){return e&&e.__esModule?e:{default:e}}function vo(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function po(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return r&&(typeof r=="object"||typeof r=="function")?r:e}function ho(e,r){if(typeof r!="function"&&r!==null)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}var mr=ze.Frame=function(e){ho(r,e);function r(t,n){vo(this,r);var i=po(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,t,n));return i.setRef=function(o){i.nodeRef.current=o;var s=i.props.forwardedRef;typeof s=="function"?s(o):s&&(s.current=o)},i.handleLoad=function(){clearInterval(i.loadCheck),i.state.iframeLoaded||i.setState({iframeLoaded:!0})},i.loadCheck=function(){return setInterval(function(){i.handleLoad()},500)},i._isMounted=!1,i.nodeRef=De.default.createRef(),i.state={iframeLoaded:!1},i}return ao(r,[{key:"componentDidMount",value:function(){this._isMounted=!0;var n=this.getDoc();n&&this.nodeRef.current.contentWindow.addEventListener("DOMContentLoaded",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.nodeRef.current.removeEventListener("DOMContentLoaded",this.handleLoad)}},{key:"getDoc",value:function(){return this.nodeRef.current?this.nodeRef.current.contentDocument:null}},{key:"getMountTarget",value:function(){var n=this.getDoc();return this.props.mountTarget?n.querySelector(this.props.mountTarget):n.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var n=this.getDoc();if(!n)return null;var i=this.props.contentDidMount,o=this.props.contentDidUpdate,s=n.defaultView||n.parentView,u=De.default.createElement(fo.default,{contentDidMount:i,contentDidUpdate:o},De.default.createElement(co.FrameContextProvider,{value:{document:n,window:s}},De.default.createElement("div",{className:"frame-content"},this.props.children))),l=this.getMountTarget();return l?[Jr.default.createPortal(this.props.head,this.getDoc().head),Jr.default.createPortal(u,l)]:null}},{key:"render",value:function(){var n=gr({},this.props,{srcDoc:this.props.initialContent,children:void 0});return delete n.head,delete n.initialContent,delete n.mountTarget,delete n.contentDidMount,delete n.contentDidUpdate,delete n.forwardedRef,De.default.createElement("iframe",gr({},n,{ref:this.setRef,onLoad:this.handleLoad}),this.state.iframeLoaded&&this.renderFrameContents())}}]),r}(bt.Component);mr.propTypes={style:xe.default.object,head:xe.default.node,initialContent:xe.default.string,mountTarget:xe.default.string,contentDidMount:xe.default.func,contentDidUpdate:xe.default.func,children:xe.default.oneOfType([xe.default.element,xe.default.arrayOf(xe.default.element)])};mr.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'};ze.default=De.default.forwardRef(function(e,r){return De.default.createElement(mr,gr({},e,{forwardedRef:r}))});(function(e){Object.defineProperty(e,"__esModule",{value:!0});var r=ze;Object.defineProperty(e,"default",{enumerable:!0,get:function(){return n(r).default}});var t=ge;Object.defineProperty(e,"FrameContext",{enumerable:!0,get:function(){return t.FrameContext}}),Object.defineProperty(e,"FrameContextConsumer",{enumerable:!0,get:function(){return t.FrameContextConsumer}}),Object.defineProperty(e,"useFrame",{enumerable:!0,get:function(){return t.useFrame}});function n(i){return i&&i.__esModule?i:{default:i}}})(Je);const go=Nt(Je),yo=({children:e,onScroll:r,onRef:t,onKeyDown:n,onClick:i})=>{const{document:o}=Je.useFrame();return f.useEffect(()=>{o&&t(o)},[t,o]),f.useEffect(()=>{o&&(o.onclick=i,o.onkeydown=n,o.onscroll=s=>r(s.target.documentElement.scrollTop,s.target.documentElement.scrollLeft))},[o,r,n,i]),e},bo=({children:e,styles:r,draggingHover:t,resetBody:n})=>{const i=O.useObserverValue(f.useMemo(()=>O.selector(({get:s})=>s(r).map(u=>({id:s(u.id),content:s(u.content)}))),[r])),o=f.useMemo(()=>y.jsxs(y.Fragment,{children:[i.map(s=>f.createElement("style",{key:s.id},s.content)),y.jsx("style",{children:["* { outline: none; }",n?"body { margin:0!important; }":"",`html${t?"":":hover"} body .frame-content * {`," outline: thin solid #80808050;","}",'[data-hover="true"] *, [data-select="true"] * {'," outline: none!important;","}"].join(`

`)})]}),[i,n]);return y.jsx(go,{tabIndex:-1,head:o,mountTarget:"body",onContextMenu:s=>s.preventDefault(),className:"w-full h-full bg-white border-none outline-none",initialContent:'<html tabindex="0"><head></head><body style="min-height: 500px"></body></html>',children:e})},xo=(e,r)=>O.useSelectorValue(({get:t})=>r.map(n=>t(n.id)).includes(t(e.id)),[e,r]),Ze=(e,r)=>O.useSelectorValue(({get:n})=>{const i=[...r].reverse();let o;for(let s=0;s<i.length;s++){const u=i[s];if(n(u.type)==="slot-content"&&(o=!1),n(u.type)==="component")if(o===!1)o=void 0;else return!0}return!!o},[r,e]),mo=({element:e})=>{const r=O.useObserverValue(e.name);return y.jsxs("div",{style:{cursor:"default",userSelect:"none",pointerEvents:"none",outline:"none",border:"2px solid orange",fontFamily:"sans-serif"},children:['This component "',y.jsx("b",{style:{fontWeight:"bold",outline:"none",pointerEvents:"none"},children:r}),'" introduces a infinite loop.']})},be=({value:e,matchWidthValue:r,effect:t},n)=>{const i=f.useRef(O.observe(!1)),o=f.useCallback(s=>{i.current.value!==s&&(i.current.value=s)},[]);f.useEffect(()=>{if(e===void 0){o(!1);return}if(r===void 0){o(!1);return}o(e.value===r.value)},[o,e==null?void 0:e.value,r==null?void 0:r.value]),f.useEffect(()=>{if(e===void 0||r===void 0)return;const s=e.subscribe(l=>o(l===r.value)),u=r.subscribe(l=>o(l===e.value));return()=>{s.unsubscribe(),u.unsubscribe()}},[o,e,r]),f.useEffect(()=>{i.current.value&&t();const s=i.current.subscribe(u=>{u&&t()});return()=>s.unsubscribe()},[...n])},So=({element:e,onHoverBar:r,onSelectBar:t,onMouseLeave:n,onMouseOver:i,onSelect:o})=>{const s=f.useRef(null),{selectedId:u}=me(),{hoveredId:l}=Se(),v=O.useObserverValue(e.name);return be({value:l,matchWidthValue:e==null?void 0:e.id,effect:()=>r(e,s.current)},[l,e]),be({value:u,matchWidthValue:e==null?void 0:e.id,effect:()=>t(e,s.current)},[u,e]),y.jsxs("div",{ref:s,onMouseLeave:n,onClick:d=>o(d,e),onMouseOver:d=>i(d,e,s.current),style:{outline:"none",cursor:"default",userSelect:"none",pointerEvents:"all",fontFamily:"sans-serif",border:"2px solid orange"},children:['This component "',y.jsx("b",{style:{fontWeight:"bold",outline:"none",pointerEvents:"none"},children:v}),'" introduces a infinite loop.']})},Oo=({element:e,parents:r,onMouseOver:t,onMouseLeave:n,onSelect:i,onDragLeave:o,onDragOver:s,onDrop:u,onHoverBar:l,onSelectBar:v,onDoubleClick:d})=>{const h=f.useRef(null),{onDragStart:C,onDragEnd:c,components:p}=ve(),{hideInsertBar:b}=we(),{selectedId:x}=me(),{hoveredId:R}=Se(),E=O.useObserverValue(e.name),D=O.useObserverValue(e.id),m=O.useSelectorValue(({get:M})=>{const I=M(p).find(q=>M(q.id)===M(e.referenceComponentId));return I?M(I.content):[]},[p,e]);be({value:R,matchWidthValue:e==null?void 0:e.id,effect:()=>l(e,h.current)},[R,e]),be({value:x,matchWidthValue:e==null?void 0:e.id,effect:()=>v(e,h.current)},[x,e]);const g=f.useMemo(()=>!m||m.length===0?null:m.map(M=>y.jsx(je,{element:M,parents:[...r,e]},M.id.value)),[m,r,e]),{isDragging:V,preview:A}=se.useDrag({id:D,element:h,data:{element:e,parents:r},start:()=>{C()},end:()=>{b(),c()}},[D,e,r,b,C,c]);f.useEffect(()=>{A(()=>He(E),M=>M.remove())},[A,E]);const _=f.useRef({id:Ae()});return se.useDrop({element:h,id:_.current.id,drop:(M,I)=>u(M,I,e,r,h,_.current.id),hover:(M,I)=>s(M,I,e,r,h,_.current.id),leave:(M,I)=>o(M,I,e,r,h,_.current.id)},[e,r,u,s,o]),y.jsx("div",{ref:h,onMouseLeave:n,onClick:M=>i(M,e),onDoubleClick:M=>d(M,e),onMouseOver:M=>t(M,e,h.current),style:{cursor:"default",userSelect:"none",pointerEvents:"all",opacity:V?.5:void 0},children:g})},Co=({element:e,parents:r})=>{const{components:t}=ve(),n=O.useSelectorValue(({get:i})=>{const o=i(t).find(s=>i(s.id)===i(e.referenceComponentId));return o?i(o.content):[]},[t,e]);return y.jsx("div",{style:{outline:"none",pointerEvents:"none"},children:n.map(i=>y.jsx(je,{element:i,parents:[...r,e]},i.id.value))})},wo=({element:e,parents:r,...t})=>{const n=xo(e,r),i=Ze(e,r);return n?i?y.jsx(mo,{element:e}):y.jsx(So,{element:e,onSelect:t.onSelect,onMouseOver:t.onMouseOver,onMouseLeave:t.onMouseLeave,onHoverBar:t.onHoverBar,onSelectBar:t.onSelectBar}):i?y.jsx(Co,{element:e,parents:r}):y.jsx(Oo,{element:e,parents:r,onDrop:t.onDrop,onDragOver:t.onDragOver,onDragLeave:t.onDragLeave,onDoubleClick:t.onDoubleClick,onSelect:t.onSelect,onMouseOver:t.onMouseOver,onMouseLeave:t.onMouseLeave,onHoverBar:t.onHoverBar,onSelectBar:t.onSelectBar})},xt=e=>{const{onExpressionToValue:r}=ve(),t=f.useMemo(()=>O.selector(({get:n})=>{const i=n(e.style);if(!i)return{};const o={};return i.forEach(s=>{const u=n(s.name),l=n(s.value);u&&(o[ut(u)]=r(l,u,"style",e))}),o}),[e,r,e]);return O.useObserverValue(t)},mt=e=>{const{onExpressionToValue:r}=ve(),t=f.useMemo(()=>O.selector({get({get:n}){const i=n(e.attributes);if(!i)return[{},{}];const o={},s={};return i.forEach(u=>{const l=n(u.name);if(l===void 0||l==="hidden"||l==="style")return;const v=r(n(u.value),l,"attribute",e),d=ut(l);switch(d){case"options":s.options=v;break;case"className":o.className=v;break;case"class":o.className=v;break;default:if(l.startsWith("data-")){o[l]=v;return}else o[d]=v;break}}),[o,s]}}),[e,r]);return O.useObserverValue(t)},St=f.forwardRef(({tag:e,...r},t)=>f.createElement(e,{ref:t,...r})),Eo=({element:e,parents:r,onMouseOver:t,onMouseLeave:n,onSelect:i,onDragLeave:o,onDragOver:s,onDrop:u,onHoverBar:l,onSelectBar:v})=>{const d=f.useRef(null),[h,C]=f.useState(!1),[c]=mt(e),p=O.useObserverValue(e.children),b=xt(e),x=O.useObserverValue(e.name),R=O.useObserverValue(e.tag),E=O.useObserverValue(e.id),{onDragStart:D,onDragEnd:m}=ve(),{hideInsertBar:g}=we(),{selectedId:V}=me(),{hoveredId:A}=Se();be({value:A,matchWidthValue:e==null?void 0:e.id,effect:()=>l(e,d.current)},[A,e]),be({value:V,matchWidthValue:e==null?void 0:e.id,effect:()=>v(e,d.current)},[V,e]),f.useEffect(()=>{C(Y=>A.value===E===Y?Y:!Y);const k=A.subscribe(Y=>{C(ee=>Y===E===ee?ee:!ee)});return()=>k.unsubscribe()},[E,A]);const _=f.useMemo(()=>!p||p.length===0?null:p.map(k=>y.jsx(je,{element:k,parents:[...r,e]},k.id.value)),[p,r,e]),M=f.useMemo(()=>p!==void 0,[p]),{isDragging:I,preview:q}=se.useDrag({id:E,element:d,data:{element:e,parents:r},start:()=>{D()},end:()=>{g(),m()}},[E,e,r,g,D,m]);f.useEffect(()=>{q(()=>He(x),k=>k.remove())},[q,x]);const B=f.useRef({id:Ae()});return se.useDrop({element:d,id:B.current.id,drop:(k,Y)=>u(k,Y,e,r,d,B.current.id),hover:(k,Y)=>s(k,Y,e,r,d,B.current.id),leave:(k,Y)=>o(k,Y,e,r,d,B.current.id)},[e,r,u,s,o]),y.jsx(St,{readOnly:!0,tag:R,ref:d,children:_,onMouseLeave:n,onClick:k=>i(k,e),onMouseOver:k=>t(k,e,d.current),...c!==void 0?{...c,...h?{disabled:!1}:{}}:{},style:{...b,resize:"none",cursor:"default",userSelect:"none",pointerEvents:"all",opacity:I?.5:typeof b.opacity=="number"?Number(b.opacity):void 0,minWidth:_===null&&M?40:typeof b.minWidth=="number"?Number(b.minWidth):void 0,minHeight:_===null&&M?40:typeof b.minHeight=="number"?Number(b.minHeight):void 0}})},Ro=({element:e,parents:r})=>{const[t]=mt(e),n=O.useObserverValue(e.children),i=xt(e),o=O.useObserverValue(e.tag),s=f.useMemo(()=>!n||n.length===0?null:n.map(u=>y.jsx(je,{element:u,parents:[...r,e]},u.id.value)),[n,r,e]);return y.jsx(St,{tag:o,children:s,...t!==void 0?t:{},style:{...i,resize:"none",outline:"none",cursor:"default",userSelect:"none",pointerEvents:"none"}})},Do=({element:e,parents:r,...t})=>Ze(e,r)?y.jsx(Ro,{element:e,parents:r}):y.jsx(Eo,{element:e,parents:r,onDrop:t.onDrop,onDragOver:t.onDragOver,onDragLeave:t.onDragLeave,onSelect:t.onSelect,onMouseOver:t.onMouseOver,onMouseLeave:t.onMouseLeave,onHoverBar:t.onHoverBar,onSelectBar:t.onSelectBar}),_o=(e,r)=>{const{components:t}=ve();return O.useSelectorValue(({get:n})=>{const i=n(t),o=[...r].reverse(),s=o.findIndex(v=>{var C;if(n(v.type)!=="component")return!1;const d=v;return n(e.componentId)===n(d.referenceComponentId)?(C=n(d.slots))==null?void 0:C.some(c=>n(c.referenceSlotId)===n(e.id)):!1});return!o.at(s)||o.slice(s+1).reduce((v,d)=>v!==void 0?v:n(d.type)==="slot-content"?!1:n(d.type)==="component"?!0:v,void 0)?!1:i.some(v=>n(v.id)===n(e.componentId))},[r,e,t])},Ot=(e,r)=>{const{onAddSlotContent:t}=ve();return O.useSelectorValue(({get:n})=>{var s;const i=[...r].reverse().filter(u=>n(u.type)==="component").find(u=>n(u.referenceComponentId)===n(e.componentId));if(!i)return[];const o=(s=n(i.slots))==null?void 0:s.find(u=>n(u.referenceSlotId)===n(e.id));return o?[n(o.children),o]:(setTimeout(()=>t(e,i),0),[])},[r,e,t])},Po=({element:e,parents:r,onMouseOver:t,onMouseLeave:n,onDragLeave:i,onDragOver:o,onDrop:s,onHoverBar:u})=>{const l=f.useRef(null),[v=[],d]=Ot(e,r),{hoveredId:h}=Se();be({value:h,matchWidthValue:d==null?void 0:d.id,effect(){d&&u(e,l.current)}},[h,d==null?void 0:d.id,e]);const C=f.useRef({id:Ae()});return se.useDrop({element:l,id:C.current.id,drop:(c,p)=>d?s(c,p,d,r,l,C.current.id):void 0,hover:(c,p)=>d?o(c,p,d,r,l,C.current.id):void 0,leave:(c,p)=>d?i(c,p,d,r,l,C.current.id):void 0},[d,r,s,o,i]),y.jsxs("div",{ref:l,onMouseLeave:n,style:{cursor:"default",userSelect:"none",pointerEvents:"all",outline:"none"},onMouseOver:c=>d?t(c,d,l.current):void 0,children:[d&&v.length>0&&v.map(c=>y.jsx(je,{element:c,parents:[...r,d]},c.id.value)),v.length===0&&y.jsx("div",{style:{opacity:.5,display:"flex",minWidth:"40px",minHeight:"40px",alignItems:"center",pointerEvents:"none",justifyContent:"center",fontFamily:"sans-serif",backgroundColor:"#80808020"},children:"Drag and drop something here..."})]})},jo=({element:e,parents:r,onMouseOver:t,onMouseLeave:n,onSelect:i,onDragLeave:o,onDragOver:s,onDrop:u,onHoverBar:l,onSelectBar:v})=>{const d=f.useRef(null),{onDragStart:h,onDragEnd:C}=ve(),{hideInsertBar:c}=we(),{selectedId:p}=me(),{hoveredId:b}=Se(),x=O.useObserverValue(e.name),R=O.useObserverValue(e.id);be({value:b,matchWidthValue:e==null?void 0:e.id,effect:()=>l(e,d.current)},[b,e]),be({value:p,matchWidthValue:e==null?void 0:e.id,effect:()=>v(e,d.current)},[p,e]);const{isDragging:E,preview:D}=se.useDrag({id:R,element:d,data:{element:e,parents:r},start:()=>{h()},end:()=>{c(),C()}},[R,e,r,c,h,C]);f.useEffect(()=>{D(()=>He(x),g=>g.remove())},[D,x]);const m=f.useRef({id:Ae()});return se.useDrop({element:d,id:m.current.id,drop:(g,V)=>u(g,V,e,r,d,m.current.id),hover:(g,V)=>s(g,V,e,r,d,m.current.id),leave:(g,V)=>o(g,V,e,r,d,m.current.id)},[e,r,u,s,o]),y.jsxs("div",{ref:d,onMouseLeave:n,onClick:g=>i(g,e),onMouseOver:g=>t(g,e,d.current),style:{display:"flex",minWidth:"40px",minHeight:"40px",cursor:"default",userSelect:"none",alignItems:"center",pointerEvents:"all",justifyContent:"center",fontFamily:"sans-serif",backgroundColor:"#8080803b",border:"2px dashed #8080803b",opacity:E?.5:void 0},children:['Slot "',x,'"']})},To=({element:e,parents:r})=>{const[t=[],n]=Ot(e,r);return y.jsx("div",{style:{outline:"none"},children:n&&t.map(i=>y.jsx(je,{element:i,parents:[...r,n]},i.id.value))})},Io=({element:e,parents:r,...t})=>{const n=Ze(e,r);return _o(e,r)?y.jsx(Po,{element:e,parents:r,onDrop:t.onDrop,onDragOver:t.onDragOver,onDragLeave:t.onDragLeave,onMouseOver:t.onMouseOver,onMouseLeave:t.onMouseLeave,onHoverBar:t.onHoverBar}):n?y.jsx(To,{element:e,parents:r}):y.jsx(jo,{element:e,parents:r,onDrop:t.onDrop,onDragOver:t.onDragOver,onDragLeave:t.onDragLeave,onSelect:t.onSelect,onMouseOver:t.onMouseOver,onMouseLeave:t.onMouseLeave,onHoverBar:t.onHoverBar,onSelectBar:t.onSelectBar})},Mo=({element:e,parents:r,onMouseOver:t,onMouseLeave:n,onSelect:i,onDragLeave:o,onDragOver:s,onDrop:u,onHoverBar:l,onSelectBar:v})=>{const d=f.useRef(null),{window:h,document:C}=Je.useFrame(),[c,p]=O.useObserver(e.text),b=O.useObserverValue(e.name),x=O.useObserverValue(e.id),{onExpressionToValue:R,onValueToExpression:E}=ve(),{onDragStart:D,onDragEnd:m}=ve(),{hideInsertBar:g}=we(),{selectedId:V}=me(),{hoveredId:A}=Se(),[_,M]=f.useState(!1);f.useEffect(()=>{!d.current||!_||(d.current.focus(),v(e,null))},[_,v]),be({value:A,matchWidthValue:e==null?void 0:e.id,effect:()=>l(e,d.current)},[A,e]),be({value:V,matchWidthValue:e==null?void 0:e.id,effect:()=>v(e,d.current)},[V,e]);const{isDragging:I,preview:q}=se.useDrag({id:x,canDrag:!_,element:d,data:{element:e,parents:r},start:()=>{D()},end:()=>{g(),m()}},[x,_,e,r,g,D,m]);f.useEffect(()=>{q(()=>He(b),L=>L.remove())},[q,b]);const B=f.useRef({id:Ae()});se.useDrop({element:d,id:B.current.id,drop:(L,Q)=>u(L,Q,e,r,d,B.current.id),hover:(L,Q)=>s(L,Q,e,r,d,B.current.id),leave:(L,Q)=>o(L,Q,e,r,d,B.current.id)},[e,r,u,s,o]);const k=f.useCallback(L=>{if(!h||!C)return;const Q=h.getSelection();if(!Q)return;const ie=C.createRange(),S=L.currentTarget;ie.selectNodeContents(S),Q.removeAllRanges(),Q.addRange(ie)},[h,C]),Y=f.useCallback(L=>{L.stopPropagation(),(L.code==="Escape"||L.code==="Enter"||L.code==="NumpadEnter")&&(L.currentTarget.blur(),v(e,L.currentTarget))},[v,e]),ee=f.useCallback(L=>{M(!1),p(String(E(L.currentTarget.innerText,"text","textContent",e))),v(e,L.currentTarget)},[v,E,e]),oe=f.useMemo(()=>R(c,"text","textContent",e)??"",[c,R,e]);return y.jsx("span",{contentEditable:_,dangerouslySetInnerHTML:{__html:oe},onBlur:ee,onFocus:k,onKeyDown:Y,onDoubleClick:()=>M(!0),ref:d,onMouseLeave:n,onClick:L=>_?L.stopPropagation():i(L,e),onMouseOver:L=>_?L.stopPropagation():t(L,e,d.current),style:{resize:"none",cursor:"default",pointerEvents:"all",opacity:I?.5:void 0,borderRadius:_?4:void 0,boxShadow:_?"0 0 6px 2px orange":void 0}})},ko=({element:e})=>{const{onExpressionToValue:r}=ve(),t=O.useObserverValue(e.text);return f.useMemo(()=>r(t,"text","textContent",e),[t,r,e])},Vo=({element:e,parents:r,...t})=>Ze(e,r)?y.jsx(ko,{element:e,parents:r}):y.jsx(Mo,{element:e,parents:r,onDrop:t.onDrop,onDragOver:t.onDragOver,onDragLeave:t.onDragLeave,onSelect:t.onSelect,onMouseOver:t.onMouseOver,onMouseLeave:t.onMouseLeave,onHoverBar:t.onHoverBar,onSelectBar:t.onSelectBar}),je=({element:e,parents:r})=>{const t=O.useObserverValue(e.type),{showInsertBar:n,hideInsertBar:i}=we(),{select:o,updateSelectBar:s}=me(),{hover:u,updateHoverBar:l}=Se(),{onDrop:v,value:d}=ve(),h=f.useCallback((D,m)=>{D.stopPropagation(),D.preventDefault(),o(m.id.value)},[o]),C=f.useCallback(D=>{D.stopPropagation(),D.preventDefault(),o(void 0),u(void 0)},[o,u]),c=f.useCallback((D,m)=>{D.stopPropagation(),u(m.id.value)},[u]),p=f.useCallback(D=>{D.stopPropagation(),u(void 0)},[u]),b=f.useCallback((D,m)=>{l(D,()=>({top:(m==null?void 0:m.offsetTop)||0,left:(m==null?void 0:m.offsetLeft)||0,width:(m==null?void 0:m.getBoundingClientRect().width)||0,height:(m==null?void 0:m.getBoundingClientRect().height)||0}))},[l]),x=f.useCallback((D,m)=>{s(D,r,()=>({top:(m==null?void 0:m.offsetTop)||0,left:(m==null?void 0:m.offsetLeft)||0,width:(m==null?void 0:m.getBoundingClientRect().width)||0,height:(m==null?void 0:m.getBoundingClientRect().height)||0}))},[s,r]),R=f.useCallback((D,m,g,V,A,_)=>{if(!Fr(m,g,V,A,_))return u(void 0);u(g.id.value);const I=Bn(m,g,A);if(!I)return i();n({isVisible:!0,top:I.top,left:I.left,width:I.width,height:I.height,isHorizontal:I.isHorizontal})},[n,u,i]),E=f.useCallback((D,m,g,V,A,_)=>{var B,k,Y,ee,oe,L;if(!Fr(m,g,V,A,_))return;const I=An(m,g,A);if(!I)return;const q=I.isOverStart||I.isOverEnd;if(!(!q&&g.type.value==="component")){if(Object.keys(D).includes("id")){const Q=D;if(q){const ie=V.slice(-1).at(0),S=((B=(ie?ie.children:d).value)==null?void 0:B.findIndex(P=>P.id.value===g.id.value))??-1;v({element:Q.id,from:{position:-1,element:null},to:{element:ie||"root",position:I.isOverStart?S:S+1}})}else{const ie=((k=g.children.value)==null?void 0:k.length)||-1;v({element:Q.id,from:{position:-1,element:null},to:{element:g,position:I.isOverStart?ie:ie+1}})}}else{const Q=D,ie=(Y=Q.parents)==null?void 0:Y.slice(-1).at(0),S=ie||"root";if(S!=="root"&&S.type.value==="component")return;const P=((ee=(S==="root"?d:S.children).value)==null?void 0:ee.findIndex($=>$.id.value===Q.element.id.value))??-1;if(q){const $=V.slice(-1).at(0),z=((oe=($?$.children:d).value)==null?void 0:oe.findIndex(H=>H.id.value===g.id.value))??-1;v({element:Q.element,from:{position:P,element:S},to:{element:$||"root",position:I.isOverStart?z:z+1}})}else{const $=((L=g.children.value)==null?void 0:L.length)||-1;v({element:Q.element,from:{position:P,element:S},to:{element:g,position:I.isOverStart?$:$+1}})}o(Q.element.id.value)}i()}},[o,v,i]);return t==="component"?y.jsx(wo,{parents:r,element:e,onDrop:E,onDragOver:R,onDragLeave:()=>{},onDoubleClick:C,onSelect:h,onMouseOver:c,onMouseLeave:p,onHoverBar:b,onSelectBar:x}):t==="slot"?y.jsx(Io,{parents:r,element:e,onDrop:E,onDragOver:R,onDragLeave:()=>{},onSelect:h,onMouseOver:c,onMouseLeave:p,onHoverBar:b,onSelectBar:x}):t==="text"?y.jsx(Vo,{parents:r,element:e,onDrop:E,onDragOver:R,onDragLeave:()=>{},onSelect:h,onMouseOver:c,onMouseLeave:p,onHoverBar:b,onSelectBar:x}):y.jsx(Do,{parents:r,element:e,onDrop:E,onDragOver:R,onDragLeave:()=>{},onSelect:h,onMouseOver:c,onMouseLeave:p,onHoverBar:b,onSelectBar:x})},Ao=()=>{const e=f.useRef({id:Ae()}),{value:r,styles:t,onDrop:n,onKeyDown:i}=ve(),{updateSelectBarScroll:o,select:s}=me(),{showInsertBar:u,hideInsertBar:l}=we(),{updateHoverBarScroll:v,hover:d}=Se(),[h,C]=f.useState(null),c=O.useObserverValue(r),p=f.useCallback((m,g)=>{var V;if(l(),!!m)if(Object.keys(m).includes("id"))n({element:m.id,from:{position:-1,element:null},to:{element:"root",position:r.value.length}});else{const A=m,_=kn(A.parents||[]),M=_||"root",I=((V=_==null?void 0:_.children.value)==null?void 0:V.findIndex(q=>q.id.value===A.element.id.value))??-1;n({element:A.element,from:{element:M,position:I},to:{element:"root",position:r.value.length}}),s(A.element.id.value)}},[r,s,l]),b=f.useCallback((m,g)=>{const V=h==null?void 0:h.lastElementChild;if(!V)return;const A=V.getBoundingClientRect();u({isVisible:!0,isHorizontal:!0,left:A.left,width:A.width,height:A.height,top:V?A.top+A.height:A.top})},[h==null?void 0:h.lastElementChild,u]),x=f.useCallback((m,g)=>{o(m,g),v(m,g)},[o,v]),R=f.useCallback(m=>{m.stopPropagation(),s(void 0)},[s]),[{isDraggingOver:E,isDraggingOverCurrent:D}]=se.useDrop({drop:p,hover:b,id:e.current.id,element:{current:h},leave:()=>{l(),d(void 0)}},[p,b,l]);return y.jsx(bo,{styles:t,resetBody:!0,draggingHover:E||D,children:y.jsxs(yo,{onClick:R,onKeyDown:i,onScroll:x,onRef:C,children:[y.jsx(Sn,{}),y.jsx(zn,{}),y.jsx($n,{}),c.map(m=>y.jsx(je,{parents:[],element:m},m.id.value)),c.length===0&&y.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",margin:24,padding:24,backgroundColor:"lightgray",borderRadius:8,outline:"none"},children:y.jsx("span",{style:{fontFamily:"sans-serif",fontSize:14,opacity:.5,userSelect:"none",outline:"none"},children:"Drag and drop here to start"})})]})})};function Bo({onSelect:e,onHover:r,selectedId:t,hoveredId:n,...i}){return y.jsx(se.DragAndDropProvider,{children:y.jsx(xn,{...i,children:y.jsx(mn,{children:y.jsx(On,{id:t,onSelect:e,children:y.jsx(Fn,{id:n,onHover:r,children:y.jsx(Ao,{})})})})})})}exports.UIEditor=Bo;exports.UiOverview=bn;

//# sourceMappingURL=index.cjs.js.map