"use strict";(()=>{function m(e,t=new WeakSet){if(e==null)return e;if(typeof e=="function")return`[Function: ${e.name||"anonymous"}]`;if(typeof e!="object")return e;if(e.$$typeof&&typeof e.$$typeof=="symbol")return`[ReactElement: <${e.type?.displayName||e.type?.name||(typeof e.type=="string"?e.type:"ReactElement")}>]`;if(t.has(e))return"[Circular Reference]";if(t.add(e),Array.isArray(e))return e.map(o=>m(o,t));let n={};for(let o in e)if(Object.prototype.hasOwnProperty.call(e,o)){if(o==="className")continue;n[o]=m(e[o],t)}return n}function g(e){if(e===null||typeof e!="object")return e;if(Array.isArray(e))return e.map(g);let t={};for(let n in e)if(Object.prototype.hasOwnProperty.call(e,n)){let o=e[n];o!==null&&(t[n]=g(o))}return t}function $(e){let t=Object.keys(e).find(n=>n.startsWith("__reactFiber$"));return t?e[t]:null}function I(e){let t=e.elementType;return t?typeof t=="string"?t:t.displayName||t.name||"Anonymous":"FiberRoot"}function y(e){let t=$(e);if(!t)return{error:"Could not find React Fiber for the selected element."};let n=[];for(;t;){let s=t.elementType;if(typeof s=="function"||typeof s=="string"){let d=I(t);n.push({name:d,props:m(t.memoizedProps),state:m(t.memoizedState)})}t=t.return}return n.length===0?{error:"Could not identify any components or elements in this element's hierarchy."}:{hierarchy:n.map(s=>({...s,props:g(s.props),state:g(s.state)}))}}var x;function v(){let e=document.createElement("style");e.textContent=`
        #repoburg-float-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #7c3aed;
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background-color 0.2s ease;
        }
        #repoburg-float-btn:hover {
            transform: scale(1.1);
        }
        #repoburg-float-btn:disabled {
            background-color: #585858;
            cursor: not-allowed;
            transform: none;
        }
        #repoburg-float-btn.active {
             background-color: #c026d3;
        }
        .repoburg-highlight {
            outline: 2px dashed #c026d3 !important;
            box-shadow: 0 0 10px rgba(192, 38, 211, 0.5) !important;
            background-color: rgba(192, 38, 211, 0.1) !important;
        }
        #repoburg-modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #repoburg-modal {
            background-color: #2d3748;
            color: #e2e8f0;
            padding: 24px;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        #repoburg-modal-header { font-size: 1.25rem; font-weight: bold; margin-bottom: 16px; }
        #repoburg-modal-textarea { width: 100%; background-color: #1a202c; color: white; border-radius: 4px; padding: 8px; min-height: 150px; border: 1px solid #4a5568; margin-bottom: 16px; }
        #repoburg-modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
        .repoburg-modal-btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; }
        .repoburg-modal-btn-primary { background-color: #7c3aed; color: white; }
        .repoburg-modal-btn-secondary { background-color: #4a5568; color: white; }
        #repoburg-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #1a202c; color: white; padding: 12px 20px; border-radius: 6px; z-index: 1000001; opacity: 0; transition: opacity 0.3s ease; text-align: center; }
        #repoburg-toast.show { opacity: 1; }
        #repoburg-toast.error { background-color: #c53030; }
    `,document.head.appendChild(e)}function w(e){let t=document.createElement("button");return t.id="repoburg-float-btn",t.textContent="Repo",t.onclick=e,document.body.appendChild(t),t}function E(){let e=document.createElement("div");e.id="repoburg-toast",document.body.appendChild(e)}function k(e,t,n){let o=document.createElement("div");o.id="repoburg-modal-overlay";let s=e[0],d=e.length>1?e[1]:void 0,b=d?d.name:"N/A",h=e.map(a=>a.name).reverse().join(" > ");o.innerHTML=`
        <div id="repoburg-modal">
            <div id="repoburg-modal-header">Edit Component</div>
            <p style="font-size: 0.9rem; margin-bottom: 8px;"><strong>Component:</strong> ${s.name}</p>
            <p style="font-size: 0.9rem; margin-bottom: 16px;"><strong>Parent Context:</strong> ${b}</p>
            <p style="font-size: 0.8rem; margin-bottom: 8px; word-break: break-all; opacity: 0.7;"><strong>Path:</strong> ${h}</p>
            <p style="font-size: 0.8rem; margin-bottom: 16px; word-break: break-all; opacity: 0.7;"><strong>URL:</strong> ${t}</p>
            <textarea id="repoburg-modal-textarea" placeholder="Enter your prompt... (e.g., 'add a confirmation icon to this button')"></textarea>
            <div id="repoburg-modal-footer">
                <button id="repoburg-modal-cancel" class="repoburg-modal-btn repoburg-modal-btn-secondary">Cancel</button>
                <button id="repoburg-modal-submit" class="repoburg-modal-btn repoburg-modal-btn-primary">Submit</button>
            </div>
        </div>
    `,document.body.appendChild(o);let u=document.getElementById("repoburg-modal-textarea"),r=document.getElementById("repoburg-modal-submit");u.focus();let c=a=>{a.key==="Escape"&&l(),a.key==="Enter"&&(a.metaKey||a.ctrlKey)&&(a.preventDefault(),r.click())};document.addEventListener("keydown",c);let l=()=>{document.removeEventListener("keydown",c),o.remove()};document.getElementById("repoburg-modal-cancel").onclick=l,o.onclick=a=>{a.target===o&&l()},r.onclick=async()=>{let a=u.value;a.trim()&&(await n(a,e,t),l())}}function p(e,t="success",n=3e3){let o=document.getElementById("repoburg-toast");o&&(o.textContent=e,o.className=t==="error"?"error":"",o.classList.add("show"),clearTimeout(x),x=window.setTimeout(()=>{o.classList.remove("show")},n))}var f=!1,i=null;function C(e){i&&i.classList.remove("repoburg-highlight"),i=e.target,i.classList.add("repoburg-highlight")}function T(){i&&(i.classList.remove("repoburg-highlight"),i=null)}function L(e){if(e.preventDefault(),e.stopPropagation(),P(),!i)return;let t=y(i);t.error||!t.hierarchy?p(t.error||"Unknown error","error"):k(t.hierarchy,window.location.href,O)}function P(){f=!f;let e=document.getElementById("repoburg-float-btn");f?(e.classList.add("active"),e.textContent="Exit",document.addEventListener("mouseover",C),document.addEventListener("mouseout",T),document.addEventListener("click",L,!0)):(e.classList.remove("active"),e.textContent="Repo",i&&i.classList.remove("repoburg-highlight"),document.removeEventListener("mouseover",C),document.removeEventListener("mouseout",T),document.removeEventListener("click",L,!0))}async function O(e,t,n){let o=window.REPOBURG_BACKEND_PORT;if(!o){p("Repoburg backend port not found.","error");return}let s=t.slice().reverse().map((r,c)=>{let l="  ".repeat(c),a=JSON.stringify(r.props),R=r.state&&Object.keys(r.state).length>0?`, state: ${JSON.stringify(r.state)}`:"";return`${l}- ${r.name} (props: ${a}${R})`}).join(`
`),u={prompt:`${`--- Visual Inspector Context ---
URL: ${n}

This data structure is a React Component Tree, representing the hierarchy of components from the application's root down to the element the user selected. The indentation signifies the parent-child nesting relationship. Each line contains the component/element name, its 'props' (data passed down to it), and its 'state' (internal data it manages). As an AI agent, use this structural and data context to understand the application's architecture and the flow of information related to the user's request. The last element in the list is the user's direct target.

Component Hierarchy:
${s}

--- User Prompt ---`}

${e}`,componentPath:"",parentComponentPath:void 0};try{let r=await fetch(`http://localhost:${o}/visual-editor/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(u)});if(!r.ok){let c=await r.json().catch(()=>({message:"Failed to submit prompt"}));throw new Error(c.message)}p("Prompt submitted successfully!")}catch(r){console.error("Repoburg Error:",r),p(r instanceof Error?r.message:String(r),"error")}}function B(){document.getElementById("repoburg-float-btn")||(console.log("Repoburg Visual Editor: Initializing UI."),console.log("Repoburg Backend Port:",window.REPOBURG_BACKEND_PORT||"Not Set"),v(),E(),w(P))}B();})();
