diff --git a/apps/web/client/public/assets/logo-claude-code.svg b/apps/web/client/public/assets/logo-claude-code.svg new file mode 100644 index 0000000000..62dc0db12d --- /dev/null +++ b/apps/web/client/public/assets/logo-claude-code.svg @@ -0,0 +1 @@ +Claude \ No newline at end of file diff --git a/apps/web/client/public/assets/logo-codex.svg b/apps/web/client/public/assets/logo-codex.svg new file mode 100644 index 0000000000..0055f59905 --- /dev/null +++ b/apps/web/client/public/assets/logo-codex.svg @@ -0,0 +1 @@ +OpenAI \ No newline at end of file diff --git a/apps/web/client/public/onlook-preload-script.js b/apps/web/client/public/onlook-preload-script.js index dd0ba769fc..18adf83ac6 100644 --- a/apps/web/client/public/onlook-preload-script.js +++ b/apps/web/client/public/onlook-preload-script.js @@ -16,7 +16,10 @@ var U4=Object.create;var{getPrototypeOf:J4,defineProperty:Je,getOwnPropertyNames nextjs-portal { display: none; } - `,document.head.appendChild(r)}catch(r){console.warn("Error injecting default styles",r)}}static getInstance(){if(!rn.instance)rn.instance=new rn;return rn.instance}get stylesheet(){let r=document.getElementById("onlook-stylesheet")||this.createStylesheet();return r.textContent=r.textContent||"",Su(r.textContent)}set stylesheet(r){let t=document.getElementById("onlook-stylesheet")||this.createStylesheet();t.textContent=Vu(r)}createStylesheet(){let r=document.createElement("style");return r.id="onlook-stylesheet",document.head.appendChild(r),r}find(r,t){let i=[];return xo(r,{visit:"Rule",enter:(o)=>{if(o.type==="Rule"){let n=o;if(n.prelude.type==="SelectorList")n.prelude.children.forEach((e)=>{if(Vu(e)===t)i.push(o)})}}}),i}updateStyle(r,t){let i=Ne(r,!1),o=this.stylesheet;for(let[n,e]of Object.entries(t)){let l=this.jsToCssProperty(n),u=this.find(o,i);if(!u.length)this.addRule(o,i,l,e.value);else u.forEach((g)=>{if(g.type==="Rule")this.updateRule(g,l,e.value)})}this.stylesheet=o}addRule(r,t,i,o){let n={type:"Rule",prelude:{type:"SelectorList",children:[{type:"Selector",children:[{type:"TypeSelector",name:t}]}]},block:{type:"Block",children:[{type:"Declaration",property:i,value:{type:"Raw",value:o}}]}};if(r.type==="StyleSheet")r.children.push(n)}updateRule(r,t,i){let o=!1;if(xo(r.block,{visit:"Declaration",enter:(n)=>{if(n.property===t){if(n.value={type:"Raw",value:i},i==="")r.block.children=r.block.children.filter((e)=>e.property!==t);o=!0}}}),!o)if(i==="")r.block.children=r.block.children.filter((n)=>n.property!==t);else r.block.children.push({type:"Declaration",property:t,value:{type:"Raw",value:i},important:!1})}getJsStyle(r){let t=this.stylesheet,i=this.find(t,r),o={};if(!i.length)return o;return i.forEach((n)=>{if(n.type==="Rule")xo(n,{visit:"Declaration",enter:(e)=>{o[this.cssToJsProperty(e.property)]=e.value.value}})}),o}jsToCssProperty(r){if(!r)return"";return r.replace(/([A-Z])/g,"-$1").toLowerCase()}cssToJsProperty(r){if(!r)return"";return r.replace(/-([a-z])/g,(t)=>t[1]?.toUpperCase()??"")}removeStyles(r,t){let i=Ne(r,!1),o=this.stylesheet;this.find(o,i).forEach((e)=>{if(e.type==="Rule"){let l=t.map((u)=>this.jsToCssProperty(u));e.block.children=e.block.children.filter((u)=>!l.includes(u.property))}}),this.stylesheet=o}clear(){this.stylesheet=Su("")}}var ot=rn.getInstance();function _x(r,t){return ot.updateStyle(r,t.updated),Ni(r,!0)}function Ox(r,t){ot.updateStyle(r,{backgroundImage:{value:`url(${t})`,type:"value"}})}function Dx(r){ot.updateStyle(r,{backgroundImage:{value:"none",type:"value"}})}function Ap(r,t){let i=Array.from(r.children);if(i.length===0)return 0;let o=0,n=1/0;i.forEach((u,g)=>{let c=u.getBoundingClientRect(),m=c.top+c.height/2,v=Math.abs(t-m);if(vl?o+1:o}function px(r,t){let i=Bp(r,t);if(!i)return null;let o=window.getComputedStyle(i).display;if(o==="flex"||o==="grid"){let e=Ap(i,t);return{type:"index",targetDomId:Pr(i),targetOid:Gr(i)||Qr(i)||null,index:e,originalIndex:e}}return{type:"append",targetDomId:Pr(i),targetOid:Gr(i)||Qr(i)||null}}function Bp(r,t){let i=q$(r,t);if(!i)return null;let o=!0;while(i&&o)if(o=j$.has(i.tagName.toLowerCase()),o)i=i.parentElement;return i}function Ix(r,t){let i=Q(t.targetDomId);if(!i){console.warn(`Target element not found: ${t.targetDomId}`);return}let o=jx(r);switch(t.type){case"append":i.appendChild(o);break;case"prepend":i.prepend(o);break;case"index":if(t.index===void 0||t.index<0){console.warn(`Invalid index: ${t.index}`);return}if(t.index>=i.children.length)i.appendChild(o);else i.insertBefore(o,i.children.item(t.index));break;default:console.warn(`Invalid position: ${t}`),Ye(t)}let n=lr(o,!0),e=zr(o);return{domEl:n,newMap:e}}function jx(r){let t=document.createElement(r.tagName);t.setAttribute("data-onlook-inserted","true");for(let[i,o]of Object.entries(r.attributes))t.setAttribute(i,o);if(r.textContent!==null&&r.textContent!==void 0)t.textContent=r.textContent;for(let[i,o]of Object.entries(r.styles))t.style.setProperty(ot.jsToCssProperty(i),o);for(let i of r.children){let o=jx(i);t.appendChild(o)}return t}function kx(r){let t=Q(r.targetDomId);if(!t)return console.warn(`Target element not found: ${r.targetDomId}`),null;let i=null;switch(r.type){case"append":i=t.lastElementChild;break;case"prepend":i=t.firstElementChild;break;case"index":if(r.index!==-1)i=t.children.item(r.index);else return console.warn(`Invalid index: ${r.index}`),null;break;default:console.warn(`Invalid position: ${r}`),Ye(r)}if(i){let o=lr(i,!0);i.style.display="none";let n=t.parentElement?zr(t.parentElement):null;return{domEl:o,newMap:n}}else return console.warn("No element found to remove at the specified location"),null}function Ux(r,t){let i=Q(r);if(!i)return console.warn("Element not found for domId:",r),null;let o=N$(i);if(!o)return console.warn("Failed to get location for element:",i),null;let n=Si(r);if(!n)return console.warn("Failed to get action element for element:",i),null;return{type:"remove-element",targets:[{frameId:t,branchId:n.branchId,domId:n.domId,oid:n.oid}],location:o,element:n,editText:!1,pasteParams:null,codeBlock:null}}function Jx(r,t){let i=Q(r);if(!i)return console.warn(`Move element not found: ${r}`),null;let o=yp(i,t);if(!o)return console.warn(`Failed to move element: ${r}`),null;let n=lr(o,!0),e=o.parentElement?zr(o.parentElement):null;return{domEl:n,newMap:e}}function Px(r){let t=Q(r);if(!t)return console.warn(`Element not found: ${r}`),-1;return Array.from(t.parentElement?.children||[]).filter(pt).indexOf(t)}function yp(r,t){let i=r.parentElement;if(!i){console.warn("Parent not found");return}if(i.removeChild(r),t>=i.children.length)return i.appendChild(r),r;let o=i.children[t];return i.insertBefore(r,o??null),r}function wo(r){if(!r||!r.children||r.children.length<2)return"vertical";let t=Array.from(r.children),i=t[0],o=t[1],n=i?.getBoundingClientRect(),e=o?.getBoundingClientRect();if(n&&e&&Math.abs(n.left-e.left){let l=e.getBoundingClientRect();return{x:l.left+l.width/2,y:l.top+l.height/2}});if(o==="horizontal")for(let e=0;ev!==r&&v!==o),m;if(u)m=Kx(n,c,t,i);else m=Ex(c,t,i,e);if(o.remove(),m>=c.length)n.appendChild(o);else n.insertBefore(o,c[m]??null);o.style.display="block"}function Yu(){let r=document.getElementById("onlook-drag-stub");if(!r)return;r.remove()}function Wx(r,t){let i=document.getElementById("onlook-drag-stub");if(!i)return-1;return Array.from(r.children).filter((n)=>n!==t).indexOf(i)}function qx(r){let t=Q(r);if(!t)return console.warn(`Start drag element not found: ${r}`),null;let i=t.parentElement;if(!i)return console.warn("Start drag parent not found"),null;let n=Array.from(i.children).filter(pt).indexOf(t),e=window.getComputedStyle(t);if(Rp(t),e.position!=="absolute")Lx(t);let l=Hp(t),u=t.getBoundingClientRect(),g=e.position==="absolute"?{x:l.left,y:l.top}:{x:l.left-u.left,y:l.top-u.top};return t.setAttribute("data-onlook-drag-start-position",JSON.stringify({...l,offset:g})),n}function Nx(r,t,i,o){let n=Q(r);if(!n){console.warn("Dragging element not found");return}let e=n.parentElement;if(e){let l=JSON.parse(n.getAttribute("data-onlook-drag-start-position")||"{}"),u=e.getBoundingClientRect(),g=t-u.left-(o.x-l.offset.x),c=i-u.top-(o.y-l.offset.y);n.style.left=`${g}px`,n.style.top=`${c}px`}n.style.transform="none"}function Sx(r,t,i,o,n){let e=Q(r);if(!e){console.warn("Dragging element not found");return}if(!e.style.transition)e.style.transition="transform 0.05s cubic-bezier(0.2, 0, 0, 1)";let l=JSON.parse(e.getAttribute("data-onlook-drag-start-position")||"{}");if(e.style.position!=="fixed"){let g=window.getComputedStyle(e);e.style.position="fixed",e.style.width=g.width,e.style.height=g.height,e.style.left=`${l.left}px`,e.style.top=`${l.top}px`}if(e.style.transform=`translate(${t}px, ${i}px)`,e.parentElement)Xx(e,o,n)}function Vx(r){let t=Q(r);if(!t)return console.warn("End drag element not found"),null;let i=window.getComputedStyle(t);return Fx(t),Pr(t),{left:i.left,top:i.top}}function Yx(r){let t=Q(r);if(!t)return console.warn("End drag element not found"),Qu(),null;let i=t.parentElement;if(!i)return console.warn("End drag parent not found"),Fu(t),null;let o=Wx(i,t);if(Fu(t),Yu(),o===-1)return null;let n=Array.from(i.children).indexOf(t);if(o===n)return null;return{newIndex:o,child:lr(t,!1),parent:lr(i,!1)}}function Rp(r){if(r.getAttribute("data-onlook-drag-saved-style"))return;let i={position:r.style.position,transform:r.style.transform,width:r.style.width,height:r.style.height,left:r.style.left,top:r.style.top};if(r.setAttribute("data-onlook-drag-saved-style",JSON.stringify(i)),r.setAttribute("data-onlook-dragging","true"),r.style.zIndex="1000",r.getAttribute("data-onlook-drag-direction")!==null){let o=r.parentElement;if(o){let n=wo(o);r.setAttribute("data-onlook-drag-direction",n)}}}function Fu(r){qi(r),Fx(r),Pr(r)}function Fx(r){r.removeAttribute("data-onlook-drag-saved-style"),r.removeAttribute("data-onlook-dragging"),r.removeAttribute("data-onlook-drag-direction"),r.removeAttribute("data-onlook-drag-start-position")}function Hp(r){let t=r.getBoundingClientRect();return{left:t.left+window.scrollX,top:t.top+window.scrollY}}function Qu(){let r=document.querySelectorAll(`[${"data-onlook-dragging"}]`);for(let t of Array.from(r))Fu(t);Yu()}function Qx(r){let t=Q(r);if(!t)return console.warn("Start editing text failed. No element for selector:",r),null;let i=Array.from(t.childNodes).filter((l)=>l.nodeType!==Node.COMMENT_NODE),o=null,n=i.every((l)=>l.nodeType===Node.TEXT_NODE||l.nodeType===Node.ELEMENT_NODE&&l.tagName.toLowerCase()==="br");if(i.length===0)o=t;else if(i.length===1&&i[0]?.nodeType===Node.TEXT_NODE)o=t;else if(n)o=t;if(!o)return console.warn("Start editing text failed. No target element found for selector:",r),null;let e=yx(t);return Bx(o),{originalContent:e}}function Gx(r,t){let i=Q(r);if(!i)return console.warn("Edit text failed. No element for selector:",r),null;return Bx(i),Tp(i,t),{domEl:lr(i,!0),newMap:zr(i)}}function Ax(r){let t=Q(r);if(!t)return console.warn("Stop editing text failed. No element for selector:",r),null;return Mp(t),{newContent:yx(t),domEl:lr(t,!0)}}function Bx(r){r.setAttribute("data-onlook-editing-text","true")}function Mp(r){qi(r),Zp(r)}function Zp(r){r.removeAttribute("data-onlook-editing-text")}function Tp(r,t){let i=t.replace(/\n/g,"
");r.innerHTML=i}function yx(r){let t=r.innerHTML;t=t.replace(//gi,` + `,document.head.appendChild(r)}catch(r){console.warn("Error injecting default styles",r)}}static getInstance(){if(!rn.instance)rn.instance=new rn;return rn.instance}get stylesheet(){let r=document.getElementById("onlook-stylesheet")||this.createStylesheet();return r.textContent=r.textContent||"",Su(r.textContent)}set stylesheet(r){let t=document.getElementById("onlook-stylesheet")||this.createStylesheet();t.textContent=Vu(r)}createStylesheet(){let r=document.createElement("style");return r.id="onlook-stylesheet",document.head.appendChild(r),r}find(r,t){let i=[];return xo(r,{visit:"Rule",enter:(o)=>{if(o.type==="Rule"){let n=o;if(n.prelude.type==="SelectorList")n.prelude.children.forEach((e)=>{if(Vu(e)===t)i.push(o)})}}}),i}updateStyle(r,t){let i=Ne(r,!1),o=this.stylesheet;for(let[n,e]of Object.entries(t)){let l=this.jsToCssProperty(n),u=this.find(o,i);if(!u.length)this.addRule(o,i,l,e.value);else u.forEach((g)=>{if(g.type==="Rule")this.updateRule(g,l,e.value)})}this.stylesheet=o}addRule(r,t,i,o){let n={type:"Rule",prelude:{type:"SelectorList",children:[{type:"Selector",children:[{type:"TypeSelector",name:t}]}]},block:{type:"Block",children:[{type:"Declaration",property:i,value:{type:"Raw",value:o}}]}};if(r.type==="StyleSheet")r.children.push(n)}updateRule(r,t,i){let o=!1;if(xo(r.block,{visit:"Declaration",enter:(n)=>{if(n.property===t){if(n.value={type:"Raw",value:i},i==="")r.block.children=r.block.children.filter((e)=>e.property!==t);o=!0}}}),!o)if(i==="")r.block.children=r.block.children.filter((n)=>n.property!==t);else r.block.children.push({type:"Declaration",property:t,value:{type:"Raw",value:i},important:!1})}getJsStyle(r){let t=this.stylesheet,i=this.find(t,r),o={};if(!i.length)return o;return i.forEach((n)=>{if(n.type==="Rule")xo(n,{visit:"Declaration",enter:(e)=>{o[this.cssToJsProperty(e.property)]=e.value.value}})}),o}jsToCssProperty(r){if(!r)return"";return r.replace(/([A-Z])/g,"-$1").toLowerCase()}cssToJsProperty(r){if(!r)return"";return r.replace(/-([a-z])/g,(t)=>t[1]?.toUpperCase()??"")}removeStyles(r,t){let i=Ne(r,!1),o=this.stylesheet;this.find(o,i).forEach((e)=>{if(e.type==="Rule"){let l=t.map((u)=>this.jsToCssProperty(u));e.block.children=e.block.children.filter((u)=>!l.includes(u.property))}}),this.stylesheet=o}clear(){this.stylesheet=Su("")}}var ot=rn.getInstance();function _x(r,t){return ot.updateStyle(r,t.updated),Ni(r,!0)}function Ox(r,t){ot.updateStyle(r,{backgroundImage:{value:`url(${t})`,type:"value"}})}function Dx(r){ot.updateStyle(r,{backgroundImage:{value:"none",type:"value"}})}function Ap(r,t){let i=Array.from(r.children);if(i.length===0)return 0;let o=0,n=1/0;i.forEach((u,g)=>{let c=u.getBoundingClientRect(),m=c.top+c.height/2,v=Math.abs(t-m);if(vl?o+1:o}function px(r,t){let i=Bp(r,t);if(!i)return null;let o=window.getComputedStyle(i).display;if(o==="flex"||o==="grid"){let e=Ap(i,t);return{type:"index",targetDomId:Pr(i),targetOid:Gr(i)||Qr(i)||null,index:e,originalIndex:e}}return{type:"append",targetDomId:Pr(i),targetOid:Gr(i)||Qr(i)||null}}function Bp(r,t){let i=q$(r,t);if(!i)return null;let o=!0;while(i&&o)if(o=j$.has(i.tagName.toLowerCase()),o)i=i.parentElement;return i}function Ix(r,t){let i=Q(t.targetDomId);if(!i){console.warn(`Target element not found: ${t.targetDomId}`);return}let o=jx(r);switch(t.type){case"append":i.appendChild(o);break;case"prepend":i.prepend(o);break;case"index":if(t.index===void 0||t.index<0){console.warn(`Invalid index: ${t.index}`);return}if(t.index>=i.children.length)i.appendChild(o);else i.insertBefore(o,i.children.item(t.index));break;default:console.warn(`Invalid position: ${t}`),Ye(t)}let n=lr(o,!0),e=zr(o);return{domEl:n,newMap:e}}function jx(r){let t=document.createElement(r.tagName);t.setAttribute("data-onlook-inserted","true");for(let[i,o]of Object.entries(r.attributes))t.setAttribute(i,o);if(r.textContent!==null&&r.textContent!==void 0)t.textContent=r.textContent;for(let[i,o]of Object.entries(r.styles))t.style.setProperty(ot.jsToCssProperty(i),o);for(let i of r.children){let o=jx(i);t.appendChild(o)}return t}function kx(r){let t=Q(r.targetDomId);if(!t)return console.warn(`Target element not found: ${r.targetDomId}`),null;let i=null;switch(r.type){case"append":i=t.lastElementChild;break;case"prepend":i=t.firstElementChild;break;case"index":if(r.index!==-1)i=t.children.item(r.index);else return console.warn(`Invalid index: ${r.index}`),null;break;default:console.warn(`Invalid position: ${r}`),Ye(r)}if(i){let o=lr(i,!0);i.style.display="none";let n=t.parentElement?zr(t.parentElement):null;return{domEl:o,newMap:n}}else return console.warn("No element found to remove at the specified location"),null}function Ux(r,t){let i=Q(r);if(!i)return console.warn("Element not found for domId:",r),null;let o=N$(i);if(!o)return console.warn("Failed to get location for element:",i),null;let n=Si(r);if(!n)return console.warn("Failed to get action element for element:",i),null;return{type:"remove-element",targets:[{frameId:t,branchId:n.branchId,domId:n.domId,oid:n.oid}],location:o,element:n,editText:!1,pasteParams:null,codeBlock:null}}function Jx(r,t){let i=Q(r);if(!i)return console.warn(`Move element not found: ${r}`),null;let o=yp(i,t);if(!o)return console.warn(`Failed to move element: ${r}`),null;let n=lr(o,!0),e=o.parentElement?zr(o.parentElement):null;return{domEl:n,newMap:e}}function Px(r){let t=Q(r);if(!t)return console.warn(`Element not found: ${r}`),-1;return Array.from(t.parentElement?.children||[]).filter(pt).indexOf(t)}function yp(r,t){let i=r.parentElement;if(!i){console.warn("Parent not found");return}if(i.removeChild(r),t>=i.children.length)return i.appendChild(r),r;let o=i.children[t];return i.insertBefore(r,o??null),r}function wo(r){if(!r||!r.children||r.children.length<2)return"vertical";let t=Array.from(r.children),i=t[0],o=t[1],n=i?.getBoundingClientRect(),e=o?.getBoundingClientRect();if(n&&e&&Math.abs(n.left-e.left){let l=e.getBoundingClientRect();return{x:l.left+l.width/2,y:l.top+l.height/2}});if(o==="horizontal")for(let e=0;ev!==r&&v!==o),m;if(u)m=Kx(n,c,t,i);else m=Ex(c,t,i,e);if(o.remove(),m>=c.length)n.appendChild(o);else n.insertBefore(o,c[m]??null);o.style.display="block"}function Yu(){let r=document.getElementById("onlook-drag-stub");if(!r)return;r.remove()}function Wx(r,t){let i=document.getElementById("onlook-drag-stub");if(!i)return-1;return Array.from(r.children).filter((n)=>n!==t).indexOf(i)}function qx(r){let t=Q(r);if(!t)return console.warn(`Start drag element not found: ${r}`),null;let i=t.parentElement;if(!i)return console.warn("Start drag parent not found"),null;let n=Array.from(i.children).filter(pt).indexOf(t),e=window.getComputedStyle(t);if(Rp(t),e.position!=="absolute")Lx(t);let l=Hp(t),u=t.getBoundingClientRect(),g=e.position==="absolute"?{x:l.left,y:l.top}:{x:l.left-u.left,y:l.top-u.top};return t.setAttribute("data-onlook-drag-start-position",JSON.stringify({...l,offset:g})),n}function Nx(r,t,i,o){let n=Q(r);if(!n){console.warn("Dragging element not found");return}let e=n.parentElement;if(e){let l=JSON.parse(n.getAttribute("data-onlook-drag-start-position")||"{}"),u=e.getBoundingClientRect(),g=t-u.left-(o.x-l.offset.x),c=i-u.top-(o.y-l.offset.y);n.style.left=`${g}px`,n.style.top=`${c}px`}n.style.transform="none"}function Sx(r,t,i,o,n){let e=Q(r);if(!e){console.warn("Dragging element not found");return}if(!e.style.transition)e.style.transition="transform 0.05s cubic-bezier(0.2, 0, 0, 1)";let l=JSON.parse(e.getAttribute("data-onlook-drag-start-position")||"{}");if(e.style.position!=="fixed"){let g=window.getComputedStyle(e);e.style.position="fixed",e.style.width=g.width,e.style.height=g.height,e.style.left=`${l.left}px`,e.style.top=`${l.top}px`}if(e.style.transform=`translate(${t}px, ${i}px)`,e.parentElement)Xx(e,o,n)}function Vx(r){let t=Q(r);if(!t)return console.warn("End drag element not found"),null;let i=window.getComputedStyle(t);return Fx(t),Pr(t),{left:i.left,top:i.top}}function Yx(r){let t=Q(r);if(!t)return console.warn("End drag element not found"),Qu(),null;let i=t.parentElement;if(!i)return console.warn("End drag parent not found"),Fu(t),null;let o=Wx(i,t);if(Fu(t),Yu(),o===-1)return null;let n=Array.from(i.children).indexOf(t);if(o===n)return null;return{newIndex:o,child:lr(t,!1),parent:lr(i,!1)}}function Rp(r){if(r.getAttribute("data-onlook-drag-saved-style"))return;let i={position:r.style.position,transform:r.style.transform,width:r.style.width,height:r.style.height,left:r.style.left,top:r.style.top};if(r.setAttribute("data-onlook-drag-saved-style",JSON.stringify(i)),r.setAttribute("data-onlook-dragging","true"),r.style.zIndex="1000",r.getAttribute("data-onlook-drag-direction")!==null){let o=r.parentElement;if(o){let n=wo(o);r.setAttribute("data-onlook-drag-direction",n)}}}function Fu(r){qi(r),Fx(r),Pr(r)}function Fx(r){r.removeAttribute("data-onlook-drag-saved-style"),r.removeAttribute("data-onlook-dragging"),r.removeAttribute("data-onlook-drag-direction"),r.removeAttribute("data-onlook-drag-start-position")}function Hp(r){let t=r.getBoundingClientRect();return{left:t.left+window.scrollX,top:t.top+window.scrollY}}function Qu(){let r=document.querySelectorAll(`[${"data-onlook-dragging"}]`);for(let t of Array.from(r))Fu(t);Yu()}function Qx(r){let t=Q(r);if(!t)return console.warn("Start editing text failed. No element for selector:",r),null;let i=Array.from(t.childNodes).filter((l)=>l.nodeType!==Node.COMMENT_NODE),o=null,n=i.every((l)=>l.nodeType===Node.TEXT_NODE||l.nodeType===Node.ELEMENT_NODE&&l.tagName.toLowerCase()==="br");if(i.length===0)o=t;else if(i.length===1&&i[0]?.nodeType===Node.TEXT_NODE)o=t;else if(n)o=t;if(!o)return console.warn("Start editing text failed. No target element found for selector:",r),null;let e=yx(t);return Bx(o),{originalContent:e}}function Gx(r,t){let i=Q(r);if(!i)return console.warn("Edit text failed. No element for selector:",r),null;return Bx(i),Tp(i,t),{domEl:lr(i,!0),newMap:zr(i)}}function Ax(r){let t=Q(r);if(!t)return console.warn("Stop editing text failed. No element for selector:",r),null;return Mp(t),{newContent:yx(t),domEl:lr(t,!0)}}function Bx(r){r.setAttribute("data-onlook-editing-text","true")}function Mp(r){qi(r),Zp(r)}function Zp(r){r.removeAttribute("data-onlook-editing-text")}function Tp(r,t){let o=t.replace(/\r\n/g,` +`).replace(/\r/g,` +`).split(` +`);r.innerHTML="",o.forEach((n,e)=>{if(r.appendChild(document.createTextNode(n)),e/gi,` `),t=t.replace(/<[^>]*>/g,"");let i=document.createElement("textarea");return i.innerHTML=t,i.value}function Rx(r){return!0}function Mx(){let r=document.body,t={childList:!0,subtree:!0};new MutationObserver((o)=>{let n=new Map,e=new Map;for(let l of o)if(l.type==="childList"){let u=l.target;l.addedNodes.forEach((g)=>{let c=g;if(g.nodeType===Node.ELEMENT_NODE&&c.hasAttribute("data-odid")&&!Hx(c)){if(Cp(c),u){let m=zr(u);if(m)n=new Map([...n,...m])}}}),l.removedNodes.forEach((g)=>{let c=g;if(g.nodeType===Node.ELEMENT_NODE&&c.hasAttribute("data-odid")&&!Hx(c)){if(u){let m=zr(u);if(m)e=new Map([...e,...m])}}})}if(n.size>0||e.size>0){if(ar)ar.onWindowMutated({added:Object.fromEntries(n),removed:Object.fromEntries(e)}).catch((l)=>{console.error("Failed to send window mutation event:",l)})}}).observe(r,t)}function Zx(){function r(){if(ar)ar.onWindowResized().catch((t)=>{console.error("Failed to send window resize event:",t)})}window.addEventListener("resize",r)}function Hx(r){if(r.id==="onlook-drag-stub")return!0;if(r.getAttribute("data-onlook-inserted"))return!0;return!1}function Cp(r){let t=r.getAttribute("data-oid");if(!t)return;document.querySelectorAll(`[${"data-oid"}="${t}"][${"data-onlook-inserted"}]`).forEach((i)=>{["data-odid","data-onlook-drag-saved-style","data-onlook-editing-text","data-oiid"].forEach((n)=>{let e=i.getAttribute(n);if(e)r.setAttribute(n,e)}),i.remove()})}function Tx(){Mx(),Zx()}function Gu(){Tx(),dp(),ot.injectDefaultStyles()}var tn=null;function dp(){if(tn!==null)clearInterval(tn),tn=null;let r=setInterval(()=>{try{if(Wi()!==null)clearInterval(r),tn=null}catch(t){clearInterval(r),tn=null,console.warn("Error in keepDomUpdated:",t)}},5000);tn=r}var sp=setInterval(()=>{if(window.onerror=function(t,i,o){console.log(`Unhandled error: ${t} ${i} ${o}`)},window?.document?.body){clearInterval(sp);try{Gu()}catch(r){console.log("Error in documentBodyInit:",r)}}},300);async function dx(){try{let{innerWidth:r,innerHeight:t}=window,i=document.createElement("canvas"),o=i.getContext("2d");if(!o)throw Error("Failed to get canvas context");if(i.width=r,i.height=t,navigator.mediaDevices&&navigator.mediaDevices.getDisplayMedia)try{let e=await navigator.mediaDevices.getDisplayMedia({video:{width:r,height:t}}),l=document.createElement("video");l.srcObject=e,l.autoplay=!0,l.muted=!0,await new Promise((g)=>{l.onloadedmetadata=()=>{l.play(),l.oncanplay=()=>{o.drawImage(l,0,0,r,t),e.getTracks().forEach((c)=>c.stop()),g()}}});let u=await Cx(i);return console.log(`Screenshot captured - Size: ~${Math.round(u.length*0.75/1024)} KB`),{mimeType:"image/jpeg",data:u}}catch(e){console.log("getDisplayMedia failed, falling back to DOM rendering:",e)}await rI(o,r,t);let n=await Cx(i);return console.log(`DOM screenshot captured - Size: ~${Math.round(n.length*0.75/1024)} KB`),{mimeType:"image/jpeg",data:n}}catch(r){console.error("Failed to capture screenshot:",r);let t=document.createElement("canvas"),i=t.getContext("2d");if(i)return t.width=400,t.height=300,i.fillStyle="#ffffff",i.fillRect(0,0,400,300),i.fillStyle="#ff0000",i.font="14px Arial, sans-serif",i.textAlign="center",i.fillText("Screenshot unavailable",200,150),{mimeType:"image/jpeg",data:t.toDataURL("image/jpeg",0.8)};throw r}}async function Cx(r){let o=[0.9,0.8,0.7,0.6,0.5,0.4,0.3],n=[1,0.8,0.6,0.5,0.4,0.3];for(let u of n){let g=r;if(u<1){g=document.createElement("canvas");let c=g.getContext("2d");if(!c)continue;g.width=r.width*u,g.height=r.height*u,c.drawImage(r,0,0,g.width,g.height)}for(let c of o){let m=g.toDataURL("image/jpeg",c);if(m.length<=3932160)return m}}let e=document.createElement("canvas"),l=e.getContext("2d");if(l)return e.width=r.width*0.2,e.height=r.height*0.2,l.drawImage(r,0,0,e.width,e.height),e.toDataURL("image/jpeg",0.2);return r.toDataURL("image/jpeg",0.1)}async function rI(r,t,i){r.fillStyle="#ffffff",r.fillRect(0,0,t,i);let o=document.querySelectorAll("*"),n=[];for(let e of o)if(e instanceof HTMLElement){let l=e.getBoundingClientRect(),u=window.getComputedStyle(e);if(l.width>0&&l.height>0&&l.left0&&l.bottom>0&&u.visibility!=="hidden"&&u.display!=="none"&&parseFloat(u.opacity)>0)n.push({element:e,rect:l,styles:u})}n.sort((e,l)=>{let u=parseInt(e.styles.zIndex)||0,g=parseInt(l.styles.zIndex)||0;return u-g});for(let{element:e,rect:l,styles:u}of n)try{await tI(r,e,l,u)}catch(g){console.warn("Failed to render element:",e,g)}}async function tI(r,t,i,o){let{left:n,top:e,width:l,height:u}=i;if(l<1||u<1||n>window.innerWidth||e>window.innerHeight)return;let g=o.backgroundColor;if(g&&g!=="rgba(0, 0, 0, 0)"&&g!=="transparent")r.fillStyle=g,r.fillRect(n,e,l,u);let c=parseFloat(o.borderWidth)||0,m=o.borderColor;if(c>0&&m&&m!=="transparent")r.strokeStyle=m,r.lineWidth=c,r.strokeRect(n,e,l,u);if(t.textContent&&t.children.length===0){let v=t.textContent.trim();if(v){let h=parseFloat(o.fontSize)||16,b=o.fontFamily||"Arial, sans-serif",x=o.color||"#000000";r.fillStyle=x,r.font=`${h}px ${b}`,r.textAlign="left",r.textBaseline="top";let D=v.split(" "),I="",O=e+2,J=h*1.2;for(let q of D){let E=I+q+" ";if(r.measureText(E).width>l-4&&I!==""){if(r.fillText(I,n+2,O),I=q+" ",O+=J,O>e+u)break}else I=E}if(I&&O<=e+u)r.fillText(I,n+2,O)}}if(t instanceof HTMLImageElement&&t.complete&&t.naturalWidth>0)try{r.drawImage(t,n,e,l,u)}catch(v){r.fillStyle="#f0f0f0",r.fillRect(n,e,l,u),r.fillStyle="#999999",r.font="12px Arial, sans-serif",r.textAlign="center",r.fillText("Image",n+l/2,e+u/2)}}var rr={};j(rr,{xid:()=>Bj,void:()=>$k,uuidv7:()=>Nj,uuidv6:()=>qj,uuidv4:()=>Wj,uuid:()=>Xj,util:()=>_,url:()=>Sj,uppercase:()=>wi,unknown:()=>fn,union:()=>ph,undefined:()=>vk,ulid:()=>Aj,uint64:()=>mk,uint32:()=>ck,tuple:()=>Mw,trim:()=>pi,treeifyError:()=>su,transform:()=>kh,toUpperCase:()=>ji,toLowerCase:()=>Ii,toJSONSchema:()=>Vv,templateLiteral:()=>Kk,symbol:()=>bk,superRefine:()=>z4,success:()=>Jk,stringbool:()=>Sk,stringFormat:()=>rk,string:()=>th,strictObject:()=>ak,startsWith:()=>zi,size:()=>$i,setErrorMap:()=>Qk,set:()=>pk,safeParseAsync:()=>Rv,safeParse:()=>yv,safeEncodeAsync:()=>sv,safeEncode:()=>Cv,safeDecodeAsync:()=>rh,safeDecode:()=>dv,registry:()=>Ao,regexes:()=>Nr,regex:()=>fi,refine:()=>a4,record:()=>Zw,readonly:()=>v4,property:()=>Kv,promise:()=>Lk,prettifyError:()=>rg,preprocess:()=>Yk,prefault:()=>e4,positive:()=>Uv,pipe:()=>_e,partialRecord:()=>Ok,parseAsync:()=>Bv,parse:()=>Av,overwrite:()=>ct,optional:()=>ae,object:()=>wk,number:()=>Xw,nullish:()=>Uk,nullable:()=>ze,null:()=>Vw,normalize:()=>Di,nonpositive:()=>Pv,nonoptional:()=>l4,nonnegative:()=>Ev,never:()=>Oh,negative:()=>Jv,nativeEnum:()=>Ik,nanoid:()=>Fj,nan:()=>Pk,multipleOf:()=>Wt,minSize:()=>qt,minLength:()=>Dt,mime:()=>Oi,maxSize:()=>bn,maxLength:()=>vn,map:()=>Dk,lte:()=>Sr,lt:()=>et,lowercase:()=>xi,looseObject:()=>zk,locales:()=>mi,literal:()=>jk,length:()=>hn,lazy:()=>f4,ksuid:()=>yj,keyof:()=>xk,jwt:()=>sj,json:()=>Vk,iso:()=>xe,ipv6:()=>Hj,ipv4:()=>Rj,intersection:()=>Rw,int64:()=>gk,int32:()=>lk,int:()=>nh,instanceof:()=>Nk,includes:()=>ai,httpUrl:()=>Vj,hostname:()=>tk,hex:()=>nk,hash:()=>ik,guid:()=>Lj,gte:()=>kr,gt:()=>lt,globalRegistry:()=>Cr,getErrorMap:()=>Gk,function:()=>Xk,formatError:()=>ri,float64:()=>ek,float32:()=>ok,flattenError:()=>sn,file:()=>kk,enum:()=>jh,endsWith:()=>_i,encodeAsync:()=>Zv,encode:()=>Hv,emoji:()=>Yj,email:()=>Kj,e164:()=>dj,discriminatedUnion:()=>_k,decodeAsync:()=>Tv,decode:()=>Mv,date:()=>fk,custom:()=>qk,cuid2:()=>Gj,cuid:()=>Qj,core:()=>ut,config:()=>br,coerce:()=>Lh,codec:()=>Ek,clone:()=>pr,cidrv6:()=>Zj,cidrv4:()=>Mj,check:()=>Wk,catch:()=>g4,boolean:()=>Ww,bigint:()=>uk,base64url:()=>Cj,base64:()=>Tj,array:()=>pe,any:()=>hk,_function:()=>Xk,_default:()=>i4,_ZodString:()=>ih,ZodXID:()=>mh,ZodVoid:()=>Gw,ZodUnknown:()=>Fw,ZodUnion:()=>Dh,ZodUndefined:()=>Nw,ZodUUID:()=>gt,ZodURL:()=>Oe,ZodULID:()=>gh,ZodType:()=>S,ZodTuple:()=>Hw,ZodTransform:()=>r4,ZodTemplateLiteral:()=>h4,ZodSymbol:()=>qw,ZodSuccess:()=>c4,ZodStringFormat:()=>C,ZodString:()=>Ui,ZodSet:()=>Cw,ZodRecord:()=>Ih,ZodRealError:()=>Ur,ZodReadonly:()=>b4,ZodPromise:()=>x4,ZodPrefault:()=>o4,ZodPipe:()=>Ph,ZodOptional:()=>Uh,ZodObject:()=>Ie,ZodNumberFormat:()=>xn,ZodNumber:()=>Pi,ZodNullable:()=>t4,ZodNull:()=>Sw,ZodNonOptional:()=>Jh,ZodNever:()=>Qw,ZodNanoID:()=>lh,ZodNaN:()=>m4,ZodMap:()=>Tw,ZodLiteral:()=>dw,ZodLazy:()=>$4,ZodKSUID:()=>bh,ZodJWT:()=>zh,ZodIssueCode:()=>Fk,ZodIntersection:()=>yw,ZodISOTime:()=>$e,ZodISODuration:()=>fe,ZodISODateTime:()=>ve,ZodISODate:()=>he,ZodIPv6:()=>hh,ZodIPv4:()=>vh,ZodGUID:()=>we,ZodFunction:()=>w4,ZodFirstPartyTypeKind:()=>Kh,ZodFile:()=>sw,ZodError:()=>Pj,ZodEnum:()=>ki,ZodEmoji:()=>eh,ZodEmail:()=>oh,ZodE164:()=>ah,ZodDiscriminatedUnion:()=>Bw,ZodDefault:()=>n4,ZodDate:()=>De,ZodCustomStringFormat:()=>Ji,ZodCustom:()=>je,ZodCodec:()=>Eh,ZodCatch:()=>u4,ZodCUID2:()=>uh,ZodCUID:()=>ch,ZodCIDRv6:()=>fh,ZodCIDRv4:()=>$h,ZodBoolean:()=>Ei,ZodBigIntFormat:()=>_h,ZodBigInt:()=>Ki,ZodBase64URL:()=>wh,ZodBase64:()=>xh,ZodArray:()=>Aw,ZodAny:()=>Yw,TimePrecision:()=>sb,NEVER:()=>Au,$output:()=>Zb,$input:()=>Tb,$brand:()=>Bu});var ut={};j(ut,{version:()=>Tg,util:()=>_,treeifyError:()=>su,toJSONSchema:()=>Vv,toDotPath:()=>ow,safeParseAsync:()=>ng,safeParse:()=>tg,safeEncodeAsync:()=>WI,safeEncode:()=>LI,safeDecodeAsync:()=>qI,safeDecode:()=>XI,registry:()=>Ao,regexes:()=>Nr,prettifyError:()=>rg,parseAsync:()=>Oo,parse:()=>_o,locales:()=>mi,isValidJWT:()=>Dw,isValidBase64URL:()=>Ow,isValidBase64:()=>wm,globalRegistry:()=>Cr,globalConfig:()=>yn,formatError:()=>ri,flattenError:()=>sn,encodeAsync:()=>EI,encode:()=>JI,decodeAsync:()=>KI,decode:()=>PI,config:()=>br,clone:()=>pr,_xid:()=>te,_void:()=>pv,_uuidv7:()=>Mo,_uuidv6:()=>Ho,_uuidv4:()=>Ro,_uuid:()=>yo,_url:()=>hi,_uppercase:()=>wi,_unknown:()=>Ov,_union:()=>lj,_undefined:()=>av,_ulid:()=>re,_uint64:()=>xv,_uint32:()=>mv,_tuple:()=>gj,_trim:()=>pi,_transform:()=>xj,_toUpperCase:()=>ji,_toLowerCase:()=>Ii,_templateLiteral:()=>jj,_symbol:()=>wv,_superRefine:()=>Nv,_success:()=>Oj,_stringbool:()=>Sv,_stringFormat:()=>$n,_string:()=>Cb,_startsWith:()=>zi,_size:()=>$i,_set:()=>vj,_safeParseAsync:()=>gn,_safeParse:()=>un,_safeEncodeAsync:()=>Jo,_safeEncode:()=>ko,_safeDecodeAsync:()=>Po,_safeDecode:()=>Uo,_regex:()=>fi,_refine:()=>qv,_record:()=>mj,_readonly:()=>Ij,_property:()=>Kv,_promise:()=>Uj,_positive:()=>Uv,_pipe:()=>pj,_parseAsync:()=>cn,_parse:()=>ln,_overwrite:()=>ct,_optional:()=>wj,_number:()=>ov,_nullable:()=>aj,_null:()=>zv,_normalize:()=>Di,_nonpositive:()=>Pv,_nonoptional:()=>_j,_nonnegative:()=>Ev,_never:()=>Dv,_negative:()=>Jv,_nativeEnum:()=>$j,_nanoid:()=>To,_nan:()=>kv,_multipleOf:()=>Wt,_minSize:()=>qt,_minLength:()=>Dt,_min:()=>kr,_mime:()=>Oi,_maxSize:()=>bn,_maxLength:()=>vn,_max:()=>Sr,_map:()=>bj,_lte:()=>Sr,_lt:()=>et,_lowercase:()=>xi,_literal:()=>fj,_length:()=>hn,_lazy:()=>kj,_ksuid:()=>ne,_jwt:()=>me,_isoTime:()=>nv,_isoDuration:()=>iv,_isoDateTime:()=>rv,_isoDate:()=>tv,_ipv6:()=>oe,_ipv4:()=>ie,_intersection:()=>uj,_int64:()=>fv,_int32:()=>gv,_int:()=>lv,_includes:()=>ai,_guid:()=>vi,_gte:()=>kr,_gt:()=>lt,_float64:()=>uv,_float32:()=>cv,_file:()=>Xv,_enum:()=>hj,_endsWith:()=>_i,_encodeAsync:()=>Io,_encode:()=>Do,_emoji:()=>Zo,_email:()=>Bo,_e164:()=>ge,_discriminatedUnion:()=>cj,_default:()=>zj,_decodeAsync:()=>jo,_decode:()=>po,_date:()=>Iv,_custom:()=>Wv,_cuid2:()=>so,_cuid:()=>Co,_coercedString:()=>db,_coercedNumber:()=>ev,_coercedDate:()=>jv,_coercedBoolean:()=>vv,_coercedBigint:()=>$v,_cidrv6:()=>le,_cidrv4:()=>ee,_check:()=>Pw,_catch:()=>Dj,_boolean:()=>bv,_bigint:()=>hv,_base64url:()=>ue,_base64:()=>ce,_array:()=>Lv,_any:()=>_v,TimePrecision:()=>sb,NEVER:()=>Au,JSONSchemaGenerator:()=>be,JSONSchema:()=>Ew,Doc:()=>Xo,$output:()=>Zb,$input:()=>Tb,$constructor:()=>$,$brand:()=>Bu,$ZodXID:()=>cm,$ZodVoid:()=>Km,$ZodUnknown:()=>Pm,$ZodUnion:()=>Qo,$ZodUndefined:()=>km,$ZodUUID:()=>sg,$ZodURL:()=>tm,$ZodULID:()=>lm,$ZodType:()=>W,$ZodTuple:()=>Go,$ZodTransform:()=>Am,$ZodTemplateLiteral:()=>rb,$ZodSymbol:()=>jm,$ZodSuccess:()=>Zm,$ZodStringFormat:()=>M,$ZodString:()=>Xt,$ZodSet:()=>Ym,$ZodRegistry:()=>bi,$ZodRecord:()=>Sm,$ZodRealError:()=>jr,$ZodReadonly:()=>sm,$ZodPromise:()=>nb,$ZodPrefault:()=>Hm,$ZodPipe:()=>dm,$ZodOptional:()=>Bm,$ZodObjectJIT:()=>Wm,$ZodObject:()=>jw,$ZodNumberFormat:()=>pm,$ZodNumber:()=>Yo,$ZodNullable:()=>ym,$ZodNull:()=>Um,$ZodNonOptional:()=>Mm,$ZodNever:()=>Em,$ZodNanoID:()=>im,$ZodNaN:()=>Cm,$ZodMap:()=>Vm,$ZodLiteral:()=>Qm,$ZodLazy:()=>ib,$ZodKSUID:()=>um,$ZodJWT:()=>Om,$ZodIntersection:()=>Nm,$ZodISOTime:()=>bm,$ZodISODuration:()=>vm,$ZodISODateTime:()=>gm,$ZodISODate:()=>mm,$ZodIPv6:()=>$m,$ZodIPv4:()=>hm,$ZodGUID:()=>dg,$ZodFunction:()=>tb,$ZodFile:()=>Gm,$ZodError:()=>dn,$ZodEnum:()=>Fm,$ZodEncodeError:()=>Et,$ZodEmoji:()=>nm,$ZodEmail:()=>rm,$ZodE164:()=>_m,$ZodDiscriminatedUnion:()=>qm,$ZodDefault:()=>Rm,$ZodDate:()=>Lm,$ZodCustomStringFormat:()=>Dm,$ZodCustom:()=>ob,$ZodCodec:()=>oi,$ZodCheckUpperCase:()=>Ag,$ZodCheckStringFormat:()=>mn,$ZodCheckStartsWith:()=>yg,$ZodCheckSizeEquals:()=>Sg,$ZodCheckRegex:()=>Qg,$ZodCheckProperty:()=>Hg,$ZodCheckOverwrite:()=>Zg,$ZodCheckNumberFormat:()=>Xg,$ZodCheckMultipleOf:()=>Lg,$ZodCheckMinSize:()=>Ng,$ZodCheckMinLength:()=>Yg,$ZodCheckMimeType:()=>Mg,$ZodCheckMaxSize:()=>qg,$ZodCheckMaxLength:()=>Vg,$ZodCheckLowerCase:()=>Gg,$ZodCheckLessThan:()=>Ko,$ZodCheckLengthEquals:()=>Fg,$ZodCheckIncludes:()=>Bg,$ZodCheckGreaterThan:()=>Lo,$ZodCheckEndsWith:()=>Rg,$ZodCheckBigIntFormat:()=>Wg,$ZodCheck:()=>s,$ZodCatch:()=>Tm,$ZodCUID2:()=>em,$ZodCUID:()=>om,$ZodCIDRv6:()=>xm,$ZodCIDRv4:()=>fm,$ZodBoolean:()=>ii,$ZodBigIntFormat:()=>Im,$ZodBigInt:()=>Fo,$ZodBase64URL:()=>zm,$ZodBase64:()=>am,$ZodAsyncError:()=>Zr,$ZodArray:()=>Xm,$ZodAny:()=>Jm});var Au=Object.freeze({status:"aborted"});function $(r,t,i){function o(u,g){var c;Object.defineProperty(u,"_zod",{value:u._zod??{},enumerable:!1}),(c=u._zod).traits??(c.traits=new Set),u._zod.traits.add(r),t(u,g);for(let m in l.prototype)if(!(m in u))Object.defineProperty(u,m,{value:l.prototype[m].bind(u)});u._zod.constr=l,u._zod.def=g}let n=i?.Parent??Object;class e extends n{}Object.defineProperty(e,"name",{value:r});function l(u){var g;let c=i?.Parent?new e:this;o(c,u),(g=c._zod).deferred??(g.deferred=[]);for(let m of c._zod.deferred)m();return c}return Object.defineProperty(l,"init",{value:o}),Object.defineProperty(l,Symbol.hasInstance,{value:(u)=>{if(i?.Parent&&u instanceof i.Parent)return!0;return u?._zod?.traits?.has(r)}}),Object.defineProperty(l,"name",{value:r}),l}var Bu=Symbol("zod_brand");class Zr extends Error{constructor(){super("Encountered Promise during synchronous parse. Use .parseAsync() instead.")}}class Et extends Error{constructor(r){super(`Encountered unidirectional transform during encode: ${r}`);this.name="ZodEncodeError"}}var yn={};function br(r){if(r)Object.assign(yn,r);return yn}var _={};j(_,{unwrapMessage:()=>Rn,uint8ArrayToHex:()=>kI,uint8ArrayToBase64url:()=>II,uint8ArrayToBase64:()=>tw,stringifyPrimitive:()=>a,shallowClone:()=>Mu,safeExtend:()=>aI,required:()=>OI,randomString:()=>bI,propertyKeyTypes:()=>Zn,promiseAllObject:()=>mI,primitiveTypes:()=>Zu,prefixIssues:()=>Kr,pick:()=>fI,partial:()=>_I,optionalKeys:()=>Tu,omit:()=>xI,objectClone:()=>cI,numKeys:()=>vI,nullish:()=>wt,normalizeParams:()=>z,mergeDefs:()=>zt,merge:()=>zI,jsonStringifyReplacer:()=>nn,joinValues:()=>f,issue:()=>en,isPlainObject:()=>_t,isObject:()=>Kt,hexToUint8Array:()=>jI,getSizableOrigin:()=>Tn,getParsedType:()=>hI,getLengthableOrigin:()=>Cn,getEnumValues:()=>Hn,getElementAtPath:()=>gI,floatSafeRemainder:()=>Ru,finalizeIssue:()=>Lr,extend:()=>wI,escapeRegex:()=>Tr,esc:()=>ao,defineLazy:()=>Y,createTransparentProxy:()=>$I,cloneDef:()=>uI,clone:()=>pr,cleanRegex:()=>Mn,cleanEnum:()=>DI,captureStackTrace:()=>zo,cached:()=>on,base64urlToUint8Array:()=>pI,base64ToUint8Array:()=>rw,assignProp:()=>at,assertNotEqual:()=>iI,assertNever:()=>eI,assertIs:()=>oI,assertEqual:()=>nI,assert:()=>lI,allowsEval:()=>Hu,aborted:()=>Ot,NUMBER_FORMAT_RANGES:()=>Cu,Class:()=>nw,BIGINT_FORMAT_RANGES:()=>du});function nI(r){return r}function iI(r){return r}function oI(r){}function eI(r){throw Error()}function lI(r){}function Hn(r){let t=Object.values(r).filter((o)=>typeof o==="number");return Object.entries(r).filter(([o,n])=>t.indexOf(+o)===-1).map(([o,n])=>n)}function f(r,t="|"){return r.map((i)=>a(i)).join(t)}function nn(r,t){if(typeof t==="bigint")return t.toString();return t}function on(r){return{get value(){{let i=r();return Object.defineProperty(this,"value",{value:i}),i}throw Error("cached value already set")}}}function wt(r){return r===null||r===void 0}function Mn(r){let t=r.startsWith("^")?1:0,i=r.endsWith("$")?r.length-1:r.length;return r.slice(t,i)}function Ru(r,t){let i=(r.toString().split(".")[1]||"").length,o=t.toString(),n=(o.split(".")[1]||"").length;if(n===0&&/\d?e-\d?/.test(o)){let g=o.match(/\d?e-(\d?)/);if(g?.[1])n=Number.parseInt(g[1])}let e=i>n?i:n,l=Number.parseInt(r.toFixed(e).replace(".","")),u=Number.parseInt(t.toFixed(e).replace(".",""));return l%u/10**e}var sx=Symbol("evaluating");function Y(r,t,i){let o=void 0;Object.defineProperty(r,t,{get(){if(o===sx)return;if(o===void 0)o=sx,o=i();return o},set(n){Object.defineProperty(r,t,{value:n})},configurable:!0})}function cI(r){return Object.create(Object.getPrototypeOf(r),Object.getOwnPropertyDescriptors(r))}function at(r,t,i){Object.defineProperty(r,t,{value:i,writable:!0,enumerable:!0,configurable:!0})}function zt(...r){let t={};for(let i of r){let o=Object.getOwnPropertyDescriptors(i);Object.assign(t,o)}return Object.defineProperties({},t)}function uI(r){return zt(r._zod.def)}function gI(r,t){if(!t)return r;return t.reduce((i,o)=>i?.[o],r)}function mI(r){let t=Object.keys(r),i=t.map((o)=>r[o]);return Promise.all(i).then((o)=>{let n={};for(let e=0;e{};function Kt(r){return typeof r==="object"&&r!==null&&!Array.isArray(r)}var Hu=on(()=>{if(typeof navigator<"u"&&navigator?.userAgent?.includes("Cloudflare"))return!1;try{return new Function(""),!0}catch(r){return!1}});function _t(r){if(Kt(r)===!1)return!1;let t=r.constructor;if(t===void 0)return!0;let i=t.prototype;if(Kt(i)===!1)return!1;if(Object.prototype.hasOwnProperty.call(i,"isPrototypeOf")===!1)return!1;return!0}function Mu(r){if(_t(r))return{...r};if(Array.isArray(r))return[...r];return r}function vI(r){let t=0;for(let i in r)if(Object.prototype.hasOwnProperty.call(r,i))t++;return t}var hI=(r)=>{let t=typeof r;switch(t){case"undefined":return"undefined";case"string":return"string";case"number":return Number.isNaN(r)?"nan":"number";case"boolean":return"boolean";case"function":return"function";case"bigint":return"bigint";case"symbol":return"symbol";case"object":if(Array.isArray(r))return"array";if(r===null)return"null";if(r.then&&typeof r.then==="function"&&r.catch&&typeof r.catch==="function")return"promise";if(typeof Map<"u"&&r instanceof Map)return"map";if(typeof Set<"u"&&r instanceof Set)return"set";if(typeof Date<"u"&&r instanceof Date)return"date";if(typeof File<"u"&&r instanceof File)return"file";return"object";default:throw Error(`Unknown data type: ${t}`)}},Zn=new Set(["string","number","symbol"]),Zu=new Set(["string","number","bigint","boolean","symbol","undefined"]);function Tr(r){return r.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function pr(r,t,i){let o=new r._zod.constr(t??r._zod.def);if(!t||i?.parent)o._zod.parent=r;return o}function z(r){let t=r;if(!t)return{};if(typeof t==="string")return{error:()=>t};if(t?.message!==void 0){if(t?.error!==void 0)throw Error("Cannot specify both `message` and `error` params");t.error=t.message}if(delete t.message,typeof t.error==="string")return{...t,error:()=>t.error};return t}function $I(r){let t;return new Proxy({},{get(i,o,n){return t??(t=r()),Reflect.get(t,o,n)},set(i,o,n,e){return t??(t=r()),Reflect.set(t,o,n,e)},has(i,o){return t??(t=r()),Reflect.has(t,o)},deleteProperty(i,o){return t??(t=r()),Reflect.deleteProperty(t,o)},ownKeys(i){return t??(t=r()),Reflect.ownKeys(t)},getOwnPropertyDescriptor(i,o){return t??(t=r()),Reflect.getOwnPropertyDescriptor(t,o)},defineProperty(i,o,n){return t??(t=r()),Reflect.defineProperty(t,o,n)}})}function a(r){if(typeof r==="bigint")return r.toString()+"n";if(typeof r==="string")return`"${r}"`;return`${r}`}function Tu(r){return Object.keys(r).filter((t)=>{return r[t]._zod.optin==="optional"&&r[t]._zod.optout==="optional"})}var Cu={safeint:[Number.MIN_SAFE_INTEGER,Number.MAX_SAFE_INTEGER],int32:[-2147483648,2147483647],uint32:[0,4294967295],float32:[-340282346638528860000000000000000000000,340282346638528860000000000000000000000],float64:[-Number.MAX_VALUE,Number.MAX_VALUE]},du={int64:[BigInt("-9223372036854775808"),BigInt("9223372036854775807")],uint64:[BigInt(0),BigInt("18446744073709551615")]};function fI(r,t){let i=r._zod.def,o=zt(r._zod.def,{get shape(){let n={};for(let e in t){if(!(e in i.shape))throw Error(`Unrecognized key: "${e}"`);if(!t[e])continue;n[e]=i.shape[e]}return at(this,"shape",n),n},checks:[]});return pr(r,o)}function xI(r,t){let i=r._zod.def,o=zt(r._zod.def,{get shape(){let n={...r._zod.def.shape};for(let e in t){if(!(e in i.shape))throw Error(`Unrecognized key: "${e}"`);if(!t[e])continue;delete n[e]}return at(this,"shape",n),n},checks:[]});return pr(r,o)}function wI(r,t){if(!_t(t))throw Error("Invalid input to extend: expected a plain object");let i=r._zod.def.checks;if(i&&i.length>0)throw Error("Object schemas containing refinements cannot be extended. Use `.safeExtend()` instead.");let n=zt(r._zod.def,{get shape(){let e={...r._zod.def.shape,...t};return at(this,"shape",e),e},checks:[]});return pr(r,n)}function aI(r,t){if(!_t(t))throw Error("Invalid input to safeExtend: expected a plain object");let i={...r._zod.def,get shape(){let o={...r._zod.def.shape,...t};return at(this,"shape",o),o},checks:r._zod.def.checks};return pr(r,i)}function zI(r,t){let i=zt(r._zod.def,{get shape(){let o={...r._zod.def.shape,...t._zod.def.shape};return at(this,"shape",o),o},get catchall(){return t._zod.def.catchall},checks:[]});return pr(r,i)}function _I(r,t,i){let o=zt(t._zod.def,{get shape(){let n=t._zod.def.shape,e={...n};if(i)for(let l in i){if(!(l in n))throw Error(`Unrecognized key: "${l}"`);if(!i[l])continue;e[l]=r?new r({type:"optional",innerType:n[l]}):n[l]}else for(let l in n)e[l]=r?new r({type:"optional",innerType:n[l]}):n[l];return at(this,"shape",e),e},checks:[]});return pr(t,o)}function OI(r,t,i){let o=zt(t._zod.def,{get shape(){let n=t._zod.def.shape,e={...n};if(i)for(let l in i){if(!(l in e))throw Error(`Unrecognized key: "${l}"`);if(!i[l])continue;e[l]=new r({type:"nonoptional",innerType:n[l]})}else for(let l in n)e[l]=new r({type:"nonoptional",innerType:n[l]});return at(this,"shape",e),e},checks:[]});return pr(t,o)}function Ot(r,t=0){if(r.aborted===!0)return!0;for(let i=t;i{var o;return(o=i).path??(o.path=[]),i.path.unshift(r),i})}function Rn(r){return typeof r==="string"?r:r?.message}function Lr(r,t,i){let o={...r,path:r.path??[]};if(!r.message){let n=Rn(r.inst?._zod.def?.error?.(r))??Rn(t?.error?.(r))??Rn(i.customError?.(r))??Rn(i.localeError?.(r))??"Invalid input";o.message=n}if(delete o.inst,delete o.continue,!t?.reportInput)delete o.input;return o}function Tn(r){if(r instanceof Set)return"set";if(r instanceof Map)return"map";if(r instanceof File)return"file";return"unknown"}function Cn(r){if(Array.isArray(r))return"array";if(typeof r==="string")return"string";return"unknown"}function en(...r){let[t,i,o]=r;if(typeof t==="string")return{message:t,code:"custom",input:i,inst:o};return{...t}}function DI(r){return Object.entries(r).filter(([t,i])=>{return Number.isNaN(Number.parseInt(t,10))}).map((t)=>t[1])}function rw(r){let t=atob(r),i=new Uint8Array(t.length);for(let o=0;ot.toString(16).padStart(2,"0")).join("")}class nw{constructor(...r){}}var iw=(r,t)=>{r.name="$ZodError",Object.defineProperty(r,"_zod",{value:r._zod,enumerable:!1}),Object.defineProperty(r,"issues",{value:t,enumerable:!1}),r.message=JSON.stringify(t,nn,2),Object.defineProperty(r,"toString",{value:()=>r.message,enumerable:!1})},dn=$("$ZodError",iw),jr=$("$ZodError",iw,{Parent:Error});function sn(r,t=(i)=>i.message){let i={},o=[];for(let n of r.issues)if(n.path.length>0)i[n.path[0]]=i[n.path[0]]||[],i[n.path[0]].push(t(n));else o.push(t(n));return{formErrors:o,fieldErrors:i}}function ri(r,t=(i)=>i.message){let i={_errors:[]},o=(n)=>{for(let e of n.issues)if(e.code==="invalid_union"&&e.errors.length)e.errors.map((l)=>o({issues:l}));else if(e.code==="invalid_key")o({issues:e.issues});else if(e.code==="invalid_element")o({issues:e.issues});else if(e.path.length===0)i._errors.push(t(e));else{let l=i,u=0;while(ui.message){let i={errors:[]},o=(n,e=[])=>{var l,u;for(let g of n.issues)if(g.code==="invalid_union"&&g.errors.length)g.errors.map((c)=>o({issues:c},g.path));else if(g.code==="invalid_key")o({issues:g.issues},g.path);else if(g.code==="invalid_element")o({issues:g.issues},g.path);else{let c=[...e,...g.path];if(c.length===0){i.errors.push(t(g));continue}let m=i,v=0;while(vtypeof o==="object"?o.key:o);for(let o of i)if(typeof o==="number")t.push(`[${o}]`);else if(typeof o==="symbol")t.push(`[${JSON.stringify(String(o))}]`);else if(/[^\w$]/.test(o))t.push(`[${JSON.stringify(o)}]`);else{if(t.length)t.push(".");t.push(o)}return t.join("")}function rg(r){let t=[],i=[...r.issues].sort((o,n)=>(o.path??[]).length-(n.path??[]).length);for(let o of i)if(t.push(`✖ ${o.message}`),o.path?.length)t.push(` → at ${ow(o.path)}`);return t.join(` `)}var ln=(r)=>(t,i,o,n)=>{let e=o?Object.assign(o,{async:!1}):{async:!1},l=t._zod.run({value:i,issues:[]},e);if(l instanceof Promise)throw new Zr;if(l.issues.length){let u=new(n?.Err??r)(l.issues.map((g)=>Lr(g,e,br())));throw zo(u,n?.callee),u}return l.value},_o=ln(jr),cn=(r)=>async(t,i,o,n)=>{let e=o?Object.assign(o,{async:!0}):{async:!0},l=t._zod.run({value:i,issues:[]},e);if(l instanceof Promise)l=await l;if(l.issues.length){let u=new(n?.Err??r)(l.issues.map((g)=>Lr(g,e,br())));throw zo(u,n?.callee),u}return l.value},Oo=cn(jr),un=(r)=>(t,i,o)=>{let n=o?{...o,async:!1}:{async:!1},e=t._zod.run({value:i,issues:[]},n);if(e instanceof Promise)throw new Zr;return e.issues.length?{success:!1,error:new(r??dn)(e.issues.map((l)=>Lr(l,n,br())))}:{success:!0,data:e.value}},tg=un(jr),gn=(r)=>async(t,i,o)=>{let n=o?Object.assign(o,{async:!0}):{async:!0},e=t._zod.run({value:i,issues:[]},n);if(e instanceof Promise)e=await e;return e.issues.length?{success:!1,error:new r(e.issues.map((l)=>Lr(l,n,br())))}:{success:!0,data:e.value}},ng=gn(jr),Do=(r)=>(t,i,o)=>{let n=o?Object.assign(o,{direction:"backward"}):{direction:"backward"};return ln(r)(t,i,n)},JI=Do(jr),po=(r)=>(t,i,o)=>{return ln(r)(t,i,o)},PI=po(jr),Io=(r)=>async(t,i,o)=>{let n=o?Object.assign(o,{direction:"backward"}):{direction:"backward"};return cn(r)(t,i,n)},EI=Io(jr),jo=(r)=>async(t,i,o)=>{return cn(r)(t,i,o)},KI=jo(jr),ko=(r)=>(t,i,o)=>{let n=o?Object.assign(o,{direction:"backward"}):{direction:"backward"};return un(r)(t,i,n)},LI=ko(jr),Uo=(r)=>(t,i,o)=>{return un(r)(t,i,o)},XI=Uo(jr),Jo=(r)=>async(t,i,o)=>{let n=o?Object.assign(o,{direction:"backward"}):{direction:"backward"};return gn(r)(t,i,n)},WI=Jo(jr),Po=(r)=>async(t,i,o)=>{return gn(r)(t,i,o)},qI=Po(jr);var Nr={};j(Nr,{xid:()=>lg,uuid7:()=>YI,uuid6:()=>VI,uuid4:()=>SI,uuid:()=>Lt,uppercase:()=>Kg,unicodeEmail:()=>ew,undefined:()=>Pg,ulid:()=>eg,time:()=>Og,string:()=>pg,sha512_hex:()=>o2,sha512_base64url:()=>l2,sha512_base64:()=>e2,sha384_hex:()=>t2,sha384_base64url:()=>i2,sha384_base64:()=>n2,sha256_hex:()=>dI,sha256_base64url:()=>r2,sha256_base64:()=>sI,sha1_hex:()=>ZI,sha1_base64url:()=>CI,sha1_base64:()=>TI,rfc5322Email:()=>QI,number:()=>kg,null:()=>Jg,nanoid:()=>ug,md5_hex:()=>RI,md5_base64url:()=>MI,md5_base64:()=>HI,lowercase:()=>Eg,ksuid:()=>cg,ipv6:()=>$g,ipv4:()=>hg,integer:()=>jg,idnEmail:()=>GI,html5Email:()=>FI,hostname:()=>ag,hex:()=>yI,guid:()=>mg,extendedDuration:()=>NI,emoji:()=>vg,email:()=>bg,e164:()=>zg,duration:()=>gg,domain:()=>BI,datetime:()=>Dg,date:()=>_g,cuid2:()=>og,cuid:()=>ig,cidrv6:()=>xg,cidrv4:()=>fg,browserEmail:()=>AI,boolean:()=>Ug,bigint:()=>Ig,base64url:()=>Eo,base64:()=>wg});var ig=/^[cC][^\s-]{8,}$/,og=/^[0-9a-z]+$/,eg=/^[0-9A-HJKMNP-TV-Za-hjkmnp-tv-z]{26}$/,lg=/^[0-9a-vA-V]{20}$/,cg=/^[A-Za-z0-9]{27}$/,ug=/^[a-zA-Z0-9_-]{21}$/,gg=/^P(?:(\d+W)|(?!.*W)(?=\d|T\d)(\d+Y)?(\d+M)?(\d+D)?(T(?=\d)(\d+H)?(\d+M)?(\d+([.,]\d+)?S)?)?)$/,NI=/^[-+]?P(?!$)(?:(?:[-+]?\d+Y)|(?:[-+]?\d+[.,]\d+Y$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:(?:[-+]?\d+W)|(?:[-+]?\d+[.,]\d+W$))?(?:(?:[-+]?\d+D)|(?:[-+]?\d+[.,]\d+D$))?(?:T(?=[\d+-])(?:(?:[-+]?\d+H)|(?:[-+]?\d+[.,]\d+H$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:[-+]?\d+(?:[.,]\d+)?S)?)??$/,mg=/^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})$/,Lt=(r)=>{if(!r)return/^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-8][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/;return new RegExp(`^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-${r}[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})$`)},SI=Lt(4),VI=Lt(6),YI=Lt(7),bg=/^(?!\.)(?!.*\.\.)([A-Za-z0-9_'+\-\.]*)[A-Za-z0-9_+-]@([A-Za-z0-9][A-Za-z0-9\-]*\.)+[A-Za-z]{2,}$/,FI=/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,QI=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,ew=/^[^\s@"]{1,64}@[^\s@]{1,255}$/u,GI=ew,AI=/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;function vg(){return new RegExp("^(\\p{Extended_Pictographic}|\\p{Emoji_Component})+$","u")}var hg=/^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/,$g=/^(([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:))$/,fg=/^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\/([0-9]|[1-2][0-9]|3[0-2])$/,xg=/^(([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|::|([0-9a-fA-F]{1,4})?::([0-9a-fA-F]{1,4}:?){0,6})\/(12[0-8]|1[01][0-9]|[1-9]?[0-9])$/,wg=/^$|^(?:[0-9a-zA-Z+/]{4})*(?:(?:[0-9a-zA-Z+/]{2}==)|(?:[0-9a-zA-Z+/]{3}=))?$/,Eo=/^[A-Za-z0-9_-]*$/,ag=/^(?=.{1,253}\.?$)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[-0-9a-zA-Z]{0,61}[0-9a-zA-Z])?)*\.?$/,BI=/^([a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/,zg=/^\+(?:[0-9]){6,14}[0-9]$/,lw="(?:(?:\\d\\d[2468][048]|\\d\\d[13579][26]|\\d\\d0[48]|[02468][048]00|[13579][26]00)-02-29|\\d{4}-(?:(?:0[13578]|1[02])-(?:0[1-9]|[12]\\d|3[01])|(?:0[469]|11)-(?:0[1-9]|[12]\\d|30)|(?:02)-(?:0[1-9]|1\\d|2[0-8])))",_g=new RegExp(`^${lw}$`);function cw(r){return typeof r.precision==="number"?r.precision===-1?"(?:[01]\\d|2[0-3]):[0-5]\\d":r.precision===0?"(?:[01]\\d|2[0-3]):[0-5]\\d:[0-5]\\d":`(?:[01]\\d|2[0-3]):[0-5]\\d:[0-5]\\d\\.\\d{${r.precision}}`:"(?:[01]\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d(?:\\.\\d+)?)?"}function Og(r){return new RegExp(`^${cw(r)}$`)}function Dg(r){let t=cw({precision:r.precision}),i=["Z"];if(r.local)i.push("");if(r.offset)i.push("([+-](?:[01]\\d|2[0-3]):[0-5]\\d)");let o=`${t}(?:${i.join("|")})`;return new RegExp(`^${lw}T(?:${o})$`)}var pg=(r)=>{let t=r?`[\\s\\S]{${r?.minimum??0},${r?.maximum??""}}`:"[\\s\\S]*";return new RegExp(`^${t}$`)},Ig=/^-?\d+n?$/,jg=/^-?\d+$/,kg=/^-?\d+(?:\.\d+)?/,Ug=/^(?:true|false)$/i,Jg=/^null$/i;var Pg=/^undefined$/i;var Eg=/^[^A-Z]*$/,Kg=/^[^a-z]*$/,yI=/^[0-9a-fA-F]*$/;function ti(r,t){return new RegExp(`^[A-Za-z0-9+/]{${r}}${t}$`)}function ni(r){return new RegExp(`^[A-Za-z0-9_-]{${r}}$`)}var RI=/^[0-9a-fA-F]{32}$/,HI=ti(22,"=="),MI=ni(22),ZI=/^[0-9a-fA-F]{40}$/,TI=ti(27,"="),CI=ni(27),dI=/^[0-9a-fA-F]{64}$/,sI=ti(43,"="),r2=ni(43),t2=/^[0-9a-fA-F]{96}$/,n2=ti(64,""),i2=ni(64),o2=/^[0-9a-fA-F]{128}$/,e2=ti(86,"=="),l2=ni(86);var s=$("$ZodCheck",(r,t)=>{var i;r._zod??(r._zod={}),r._zod.def=t,(i=r._zod).onattach??(i.onattach=[])}),gw={number:"number",bigint:"bigint",object:"date"},Ko=$("$ZodCheckLessThan",(r,t)=>{s.init(r,t);let i=gw[typeof t.value];r._zod.onattach.push((o)=>{let n=o._zod.bag,e=(t.inclusive?n.maximum:n.exclusiveMaximum)??Number.POSITIVE_INFINITY;if(t.value{if(t.inclusive?o.value<=t.value:o.value{s.init(r,t);let i=gw[typeof t.value];r._zod.onattach.push((o)=>{let n=o._zod.bag,e=(t.inclusive?n.minimum:n.exclusiveMinimum)??Number.NEGATIVE_INFINITY;if(t.value>e)if(t.inclusive)n.minimum=t.value;else n.exclusiveMinimum=t.value}),r._zod.check=(o)=>{if(t.inclusive?o.value>=t.value:o.value>t.value)return;o.issues.push({origin:i,code:"too_small",minimum:t.value,input:o.value,inclusive:t.inclusive,inst:r,continue:!t.abort})}}),Lg=$("$ZodCheckMultipleOf",(r,t)=>{s.init(r,t),r._zod.onattach.push((i)=>{var o;(o=i._zod.bag).multipleOf??(o.multipleOf=t.value)}),r._zod.check=(i)=>{if(typeof i.value!==typeof t.value)throw Error("Cannot mix number and bigint in multiple_of check.");if(typeof i.value==="bigint"?i.value%t.value===BigInt(0):Ru(i.value,t.value)===0)return;i.issues.push({origin:typeof i.value,code:"not_multiple_of",divisor:t.value,input:i.value,inst:r,continue:!t.abort})}}),Xg=$("$ZodCheckNumberFormat",(r,t)=>{s.init(r,t),t.format=t.format||"float64";let i=t.format?.includes("int"),o=i?"int":"number",[n,e]=Cu[t.format];r._zod.onattach.push((l)=>{let u=l._zod.bag;if(u.format=t.format,u.minimum=n,u.maximum=e,i)u.pattern=jg}),r._zod.check=(l)=>{let u=l.value;if(i){if(!Number.isInteger(u)){l.issues.push({expected:o,format:t.format,code:"invalid_type",continue:!1,input:u,inst:r});return}if(!Number.isSafeInteger(u)){if(u>0)l.issues.push({input:u,code:"too_big",maximum:Number.MAX_SAFE_INTEGER,note:"Integers must be within the safe integer range.",inst:r,origin:o,continue:!t.abort});else l.issues.push({input:u,code:"too_small",minimum:Number.MIN_SAFE_INTEGER,note:"Integers must be within the safe integer range.",inst:r,origin:o,continue:!t.abort});return}}if(ue)l.issues.push({origin:"number",input:u,code:"too_big",maximum:e,inst:r})}}),Wg=$("$ZodCheckBigIntFormat",(r,t)=>{s.init(r,t);let[i,o]=du[t.format];r._zod.onattach.push((n)=>{let e=n._zod.bag;e.format=t.format,e.minimum=i,e.maximum=o}),r._zod.check=(n)=>{let e=n.value;if(eo)n.issues.push({origin:"bigint",input:e,code:"too_big",maximum:o,inst:r})}}),qg=$("$ZodCheckMaxSize",(r,t)=>{var i;s.init(r,t),(i=r._zod.def).when??(i.when=(o)=>{let n=o.value;return!wt(n)&&n.size!==void 0}),r._zod.onattach.push((o)=>{let n=o._zod.bag.maximum??Number.POSITIVE_INFINITY;if(t.maximum{let n=o.value;if(n.size<=t.maximum)return;o.issues.push({origin:Tn(n),code:"too_big",maximum:t.maximum,inclusive:!0,input:n,inst:r,continue:!t.abort})}}),Ng=$("$ZodCheckMinSize",(r,t)=>{var i;s.init(r,t),(i=r._zod.def).when??(i.when=(o)=>{let n=o.value;return!wt(n)&&n.size!==void 0}),r._zod.onattach.push((o)=>{let n=o._zod.bag.minimum??Number.NEGATIVE_INFINITY;if(t.minimum>n)o._zod.bag.minimum=t.minimum}),r._zod.check=(o)=>{let n=o.value;if(n.size>=t.minimum)return;o.issues.push({origin:Tn(n),code:"too_small",minimum:t.minimum,inclusive:!0,input:n,inst:r,continue:!t.abort})}}),Sg=$("$ZodCheckSizeEquals",(r,t)=>{var i;s.init(r,t),(i=r._zod.def).when??(i.when=(o)=>{let n=o.value;return!wt(n)&&n.size!==void 0}),r._zod.onattach.push((o)=>{let n=o._zod.bag;n.minimum=t.size,n.maximum=t.size,n.size=t.size}),r._zod.check=(o)=>{let n=o.value,e=n.size;if(e===t.size)return;let l=e>t.size;o.issues.push({origin:Tn(n),...l?{code:"too_big",maximum:t.size}:{code:"too_small",minimum:t.size},inclusive:!0,exact:!0,input:o.value,inst:r,continue:!t.abort})}}),Vg=$("$ZodCheckMaxLength",(r,t)=>{var i;s.init(r,t),(i=r._zod.def).when??(i.when=(o)=>{let n=o.value;return!wt(n)&&n.length!==void 0}),r._zod.onattach.push((o)=>{let n=o._zod.bag.maximum??Number.POSITIVE_INFINITY;if(t.maximum{let n=o.value;if(n.length<=t.maximum)return;let l=Cn(n);o.issues.push({origin:l,code:"too_big",maximum:t.maximum,inclusive:!0,input:n,inst:r,continue:!t.abort})}}),Yg=$("$ZodCheckMinLength",(r,t)=>{var i;s.init(r,t),(i=r._zod.def).when??(i.when=(o)=>{let n=o.value;return!wt(n)&&n.length!==void 0}),r._zod.onattach.push((o)=>{let n=o._zod.bag.minimum??Number.NEGATIVE_INFINITY;if(t.minimum>n)o._zod.bag.minimum=t.minimum}),r._zod.check=(o)=>{let n=o.value;if(n.length>=t.minimum)return;let l=Cn(n);o.issues.push({origin:l,code:"too_small",minimum:t.minimum,inclusive:!0,input:n,inst:r,continue:!t.abort})}}),Fg=$("$ZodCheckLengthEquals",(r,t)=>{var i;s.init(r,t),(i=r._zod.def).when??(i.when=(o)=>{let n=o.value;return!wt(n)&&n.length!==void 0}),r._zod.onattach.push((o)=>{let n=o._zod.bag;n.minimum=t.length,n.maximum=t.length,n.length=t.length}),r._zod.check=(o)=>{let n=o.value,e=n.length;if(e===t.length)return;let l=Cn(n),u=e>t.length;o.issues.push({origin:l,...u?{code:"too_big",maximum:t.length}:{code:"too_small",minimum:t.length},inclusive:!0,exact:!0,input:o.value,inst:r,continue:!t.abort})}}),mn=$("$ZodCheckStringFormat",(r,t)=>{var i,o;if(s.init(r,t),r._zod.onattach.push((n)=>{let e=n._zod.bag;if(e.format=t.format,t.pattern)e.patterns??(e.patterns=new Set),e.patterns.add(t.pattern)}),t.pattern)(i=r._zod).check??(i.check=(n)=>{if(t.pattern.lastIndex=0,t.pattern.test(n.value))return;n.issues.push({origin:"string",code:"invalid_format",format:t.format,input:n.value,...t.pattern?{pattern:t.pattern.toString()}:{},inst:r,continue:!t.abort})});else(o=r._zod).check??(o.check=()=>{})}),Qg=$("$ZodCheckRegex",(r,t)=>{mn.init(r,t),r._zod.check=(i)=>{if(t.pattern.lastIndex=0,t.pattern.test(i.value))return;i.issues.push({origin:"string",code:"invalid_format",format:"regex",input:i.value,pattern:t.pattern.toString(),inst:r,continue:!t.abort})}}),Gg=$("$ZodCheckLowerCase",(r,t)=>{t.pattern??(t.pattern=Eg),mn.init(r,t)}),Ag=$("$ZodCheckUpperCase",(r,t)=>{t.pattern??(t.pattern=Kg),mn.init(r,t)}),Bg=$("$ZodCheckIncludes",(r,t)=>{s.init(r,t);let i=Tr(t.includes),o=new RegExp(typeof t.position==="number"?`^.{${t.position}}${i}`:i);t.pattern=o,r._zod.onattach.push((n)=>{let e=n._zod.bag;e.patterns??(e.patterns=new Set),e.patterns.add(o)}),r._zod.check=(n)=>{if(n.value.includes(t.includes,t.position))return;n.issues.push({origin:"string",code:"invalid_format",format:"includes",includes:t.includes,input:n.value,inst:r,continue:!t.abort})}}),yg=$("$ZodCheckStartsWith",(r,t)=>{s.init(r,t);let i=new RegExp(`^${Tr(t.prefix)}.*`);t.pattern??(t.pattern=i),r._zod.onattach.push((o)=>{let n=o._zod.bag;n.patterns??(n.patterns=new Set),n.patterns.add(i)}),r._zod.check=(o)=>{if(o.value.startsWith(t.prefix))return;o.issues.push({origin:"string",code:"invalid_format",format:"starts_with",prefix:t.prefix,input:o.value,inst:r,continue:!t.abort})}}),Rg=$("$ZodCheckEndsWith",(r,t)=>{s.init(r,t);let i=new RegExp(`.*${Tr(t.suffix)}$`);t.pattern??(t.pattern=i),r._zod.onattach.push((o)=>{let n=o._zod.bag;n.patterns??(n.patterns=new Set),n.patterns.add(i)}),r._zod.check=(o)=>{if(o.value.endsWith(t.suffix))return;o.issues.push({origin:"string",code:"invalid_format",format:"ends_with",suffix:t.suffix,input:o.value,inst:r,continue:!t.abort})}});function uw(r,t,i){if(r.issues.length)t.issues.push(...Kr(i,r.issues))}var Hg=$("$ZodCheckProperty",(r,t)=>{s.init(r,t),r._zod.check=(i)=>{let o=t.schema._zod.run({value:i.value[t.property],issues:[]},{});if(o instanceof Promise)return o.then((n)=>uw(n,i,t.property));uw(o,i,t.property);return}}),Mg=$("$ZodCheckMimeType",(r,t)=>{s.init(r,t);let i=new Set(t.mime);r._zod.onattach.push((o)=>{o._zod.bag.mime=t.mime}),r._zod.check=(o)=>{if(i.has(o.value.type))return;o.issues.push({code:"invalid_value",values:t.mime,input:o.value.type,inst:r,continue:!t.abort})}}),Zg=$("$ZodCheckOverwrite",(r,t)=>{s.init(r,t),r._zod.check=(i)=>{i.value=t.tx(i.value)}});class Xo{constructor(r=[]){if(this.content=[],this.indent=0,this)this.args=r}indented(r){this.indent+=1,r(this),this.indent-=1}write(r){if(typeof r==="function"){r(this,{execution:"sync"}),r(this,{execution:"async"});return}let i=r.split(` `).filter((e)=>e),o=Math.min(...i.map((e)=>e.length-e.trimStart().length)),n=i.map((e)=>e.slice(o)).map((e)=>" ".repeat(this.indent*2)+e);for(let e of n)this.content.push(e)}compile(){let r=Function,t=this?.args,o=[...(this?.content??[""]).map((n)=>` ${n}`)];return new r(...t,o.join(` diff --git a/apps/web/client/src/app/_components/hero/ai-frontend-hero.tsx b/apps/web/client/src/app/_components/hero/ai-frontend-hero.tsx new file mode 100644 index 0000000000..f05a54eb3f --- /dev/null +++ b/apps/web/client/src/app/_components/hero/ai-frontend-hero.tsx @@ -0,0 +1,89 @@ +'use client'; + +import { useRouter } from 'next/navigation'; +import { motion } from 'motion/react'; + +import { Button } from '@onlook/ui/button'; + +import { ExternalRoutes } from '@/utils/constants'; +import { useGitHubStats } from '../top-bar/github'; +import { UnicornBackground } from './unicorn-background'; + +export function AiFrontendHero() { + const router = useRouter(); + const { formatted: starCount } = useGitHubStats(); + + const handleBookDemo = () => { + window.open(ExternalRoutes.BOOK_DEMO, '_blank'); + }; + + return ( +
+ +
+ + AI for Frontend Development + + + AI That Builds With Your Components, Not Around Them + + + Stop generating throwaway code. Onlook's AI is constrained to your design system — your buttons, your cards, your layouts. What you create is a PR your engineers can merge. + + + + + +
+ {starCount}+ GitHub stars +
+
+
+ YC W25 +
+
+
+ Open Source +
+ +
+
+ ); +} diff --git a/apps/web/client/src/app/_components/hero/claude-code-hero.tsx b/apps/web/client/src/app/_components/hero/claude-code-hero.tsx new file mode 100644 index 0000000000..e41ed9bf27 --- /dev/null +++ b/apps/web/client/src/app/_components/hero/claude-code-hero.tsx @@ -0,0 +1,86 @@ +'use client'; + +import { motion } from 'motion/react'; + +import { Button } from '@onlook/ui/button'; +import { Icons } from '@onlook/ui/icons'; + +import { ExternalRoutes } from '@/utils/constants'; +import { useGitHubStats } from '../top-bar/github'; +import { UnicornBackground } from './unicorn-background'; + +export function ClaudeCodeHero() { + const { formatted: starCount } = useGitHubStats(); + + return ( +
+ +
+ + Workflows + + + Claude Code for Designers + + + The visual canvas your AI workflow is missing. Claude Code builds it. Onlook lets you design it. + + + + + +
+ {starCount}+ GitHub stars +
+
+
+ YC W25 +
+
+
+ Open Source +
+ +
+
+ ); +} diff --git a/apps/web/client/src/app/_components/hero/features-hero.tsx b/apps/web/client/src/app/_components/hero/features-hero.tsx index ed765feb53..1712e3fa08 100644 --- a/apps/web/client/src/app/_components/hero/features-hero.tsx +++ b/apps/web/client/src/app/_components/hero/features-hero.tsx @@ -24,7 +24,7 @@ export function FeaturesHero() { transition={{ duration: 0.6, ease: 'easeOut' }} style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }} > - Visual Editor for React & TailwindCSS Apps + Features - The React Editor You've Been Waiting For + Design with Your Real Components - Code as you design. Build React applications visually while Onlook writes - reliable code you can trust, exactly where it needs to go. + Connect your codebase. Design on the canvas. Ship PRs. - Onlook is a next-generation visual code editor + Design with your real components.
- that lets designers and product managers craft -
- web experiences with AI + Ship PRs, not prototypes. diff --git a/apps/web/client/src/app/_components/landing-page/ai-features-intro-section.tsx b/apps/web/client/src/app/_components/landing-page/ai-features-intro-section.tsx index 0cc8fa238a..7810d3bf28 100644 --- a/apps/web/client/src/app/_components/landing-page/ai-features-intro-section.tsx +++ b/apps/web/client/src/app/_components/landing-page/ai-features-intro-section.tsx @@ -5,13 +5,13 @@ export function AiFeaturesIntroSection() {

- AI Design Tools with Visual Control + Design on an Infinite Canvas

- Visual Design Control Supercharged with AI + Point at what you want. AI knows exactly what you mean.

- Get the precision of visual editing with the speed of AI generation. Design with complete creative control while AI handles the heavy lifting - from maintaining brand consistency to generating responsive layouts that match your exact vision. + No more describing "the button in the top right" — just click it. AI is constrained to your design system, so outputs stay on-brand every time.

diff --git a/apps/web/client/src/app/_components/landing-page/benefits-section.tsx b/apps/web/client/src/app/_components/landing-page/benefits-section.tsx index f1b3501c0c..2c306c77a9 100644 --- a/apps/web/client/src/app/_components/landing-page/benefits-section.tsx +++ b/apps/web/client/src/app/_components/landing-page/benefits-section.tsx @@ -13,10 +13,10 @@ export function BenefitsSection() {
-

AI-Powered Visual Builder

-

AI for UI design

+

AI That Understands Context

+

AI Constrained to Your Design System

- Prompt Onlook's AI to build, design, and experiment with your ideas. Go beyond pretty pixels and make your frontend interactive. The AI understands your React components and Tailwind patterns, generating code that fits your project's architecture. + Reference images, designs, and docs in chat. AI sees what you see — no more explaining from scratch. Outputs use your real components, colors, and tokens. No drift. No off-brand results.

{/* Removed hidden CTA to avoid unused icon JSX in this client file */}
@@ -27,11 +27,10 @@ export function BenefitsSection() {
-

React Visual Editor

-

Build Your App Visually

+

Canvas Manipulation

+

Design on an Infinite Canvas

- Edit React components directly in the browser. Drag, drop, and style elements visually while Onlook updates your actual code files in real-time. - Your existing build process stays intact. Onlook works with your setup, not against it. + Drag, resize, and arrange elements directly on the canvas. See changes in real code instantly — no switching between tools. Point at what you want. AI knows exactly what you mean.

{/* Removed hidden CTA to avoid unused icon JSX in this client file */}
@@ -42,10 +41,10 @@ export function BenefitsSection() {
-

Tailwind CSS Visual Editor

-

Style Without Writing CSS

+

Design System Guardrails

+

Your Colors, Fonts, and Tokens

- Adjust layouts, change colors, modify text, and more. Onlook generates clean Tailwind classes that match your design decisions. + AI is constrained to your design system. Pick from your brand colors, use your typography scales, and style with your existing tokens. No drift. No off-brand outputs.

diff --git a/apps/web/client/src/app/_components/landing-page/builder-features-intro-section.tsx b/apps/web/client/src/app/_components/landing-page/builder-features-intro-section.tsx index 63114e0f2e..7027f448b8 100644 --- a/apps/web/client/src/app/_components/landing-page/builder-features-intro-section.tsx +++ b/apps/web/client/src/app/_components/landing-page/builder-features-intro-section.tsx @@ -5,13 +5,13 @@ export function BuilderFeaturesIntroSection() {

- Complete React Visual Builder + Works With Your Codebase

- All the Tools to Build and Scale Your Apps + Connect Your Existing Project. Start Designing in Minutes.

- Get the best of visual design with developer-grade features. Build complex React applications visually while maintaining full control over your code, components, and architecture. + No rebuilding. No migration. Connect your React, Next.js, or Vue project and design with your real components — the ones your engineers already built.

diff --git a/apps/web/client/src/app/_components/landing-page/cta-section.tsx b/apps/web/client/src/app/_components/landing-page/cta-section.tsx index bb64a4018d..ab81ffc0aa 100644 --- a/apps/web/client/src/app/_components/landing-page/cta-section.tsx +++ b/apps/web/client/src/app/_components/landing-page/cta-section.tsx @@ -12,7 +12,7 @@ interface CTASectionProps { showSubtext?: boolean; } -export function CTASection({ href, onClick, ctaText = "Bring your team \nto Onlook today", buttonText = "Book a Demo", showSubtext = true }: CTASectionProps = {}) { +export function CTASection({ href, onClick, ctaText = "Ready to stop rebuilding?\nYour design system, on a canvas.", buttonText = "Book a Demo", showSubtext = true }: CTASectionProps = {}) { const router = useRouter(); const handleGetStartedClick = () => { diff --git a/apps/web/client/src/app/_components/landing-page/faq-dropdown.tsx b/apps/web/client/src/app/_components/landing-page/faq-dropdown.tsx index e5db1eadd3..45bacce336 100644 --- a/apps/web/client/src/app/_components/landing-page/faq-dropdown.tsx +++ b/apps/web/client/src/app/_components/landing-page/faq-dropdown.tsx @@ -1,5 +1,5 @@ import { Icons } from '@onlook/ui/icons'; -import { useState } from 'react'; +import { useState, useRef, useEffect } from 'react'; interface FAQ { question: string; @@ -10,37 +10,63 @@ interface FAQDropdownProps { faqs: FAQ[]; } +function FAQItem({ faq, isOpen, onToggle }: { faq: FAQ; isOpen: boolean; onToggle: () => void }) { + const contentRef = useRef(null); + const [height, setHeight] = useState(0); + + useEffect(() => { + if (contentRef.current) { + setHeight(contentRef.current.scrollHeight); + } + }, [faq.answer]); + + return ( +
+ +
+
+

{faq.answer}

+
+
+
+ ); +} + export function FAQDropdown({ faqs }: FAQDropdownProps) { const [openIndex, setOpenIndex] = useState(null); return (
{faqs.map((faq, idx) => ( -
- -
-

{faq.answer}

-
-
+ faq={faq} + isOpen={openIndex === idx} + onToggle={() => setOpenIndex(openIndex === idx ? null : idx)} + /> ))}
); diff --git a/apps/web/client/src/app/_components/landing-page/faq-section.tsx b/apps/web/client/src/app/_components/landing-page/faq-section.tsx index be6f59dabd..f0dfab0505 100644 --- a/apps/web/client/src/app/_components/landing-page/faq-section.tsx +++ b/apps/web/client/src/app/_components/landing-page/faq-section.tsx @@ -19,28 +19,36 @@ interface FAQSectionProps { const defaultFaqs = [ { - question: 'Is there a free version of Onlook?', - answer: 'Yes, Onlook can be self-hosted for free on GitHub. For the hosted cloud version, please contact our team or book a demo. We are working closely with teams to set up the best internal design and code workflow, and are happy to help you get started.', + question: 'What is Onlook?', + answer: 'Onlook is a visual design canvas that connects to your existing codebase. Designers drag real components onto an infinite canvas, make changes visually, and submit pull requests — no coding required.', + }, + { + question: 'How is Onlook different from other design tools?', + answer: 'Traditional design tools create static mockups that must be rebuilt in code. Onlook works with your real components — what you design IS the code. Changes become PRs, not handoff specs.', }, { - question: 'What kinds of things can I design with Onlook?', - answer: 'You can prototype, ideate, and create websites from scratch with Onlook', + question: 'How is Onlook different from AI code generators?', + answer: 'AI generators create new code from scratch. Onlook constrains AI to YOUR existing components, so outputs match your design system. No translation, no drift.', }, { - question: 'Why would I use Onlook?', - answer: 'When you design in Onlook you design in the real product – in other words, the source of truth. Other editors are great for ideating, but Onlook is the only one that lets you design with code using your existing design system instantly.', + question: 'Do I need to know how to code?', + answer: 'No. Designers use a visual canvas with familiar tools. Real code runs underneath — you don\'t need to touch it unless you want to.', }, { - question: 'Who owns the code that I write with Onlook?', - answer: "The code you make with Onlook is all yours. You can export it on your local machine, publish it to GitHub, or host it at a link", + question: 'Can my team collaborate?', + answer: 'Yes. Share your canvas, leave spatial comments, and work together in real-time. Changes sync to code and can be submitted as PRs for engineers to review.', }, { - question: 'What is the difference between Onlook and other design tools?', - answer: 'Onlook is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating web experiences, it can be used for anything visual – presentations, mockups, and more. Because Onlook uses code as the source of truth, the types of designs you can create are unconstrained by Onlook\'s interface.', + question: 'What tech stack does Onlook support?', + answer: 'React, Next.js, and any CSS approach (Tailwind, CSS modules, styled-components). Works with any component library.', + }, + { + question: 'Is there a free version of Onlook?', + answer: 'Yes, Onlook can be self-hosted for free on GitHub. For the hosted cloud version, please contact our team or book a demo.', }, { - question: 'Why is Onlook open-source?', - answer: 'Developers have historically been second-rate citizens in the design process. Onlook was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source Onlook to give developers transparency over the tool, and make it as flexible as possible for the unique ways teams set up their code.', + question: 'Who owns the code?', + answer: 'The code you make with Onlook is all yours. Export it locally, publish to GitHub, or deploy to a custom domain.', }, ]; diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/ai-chat-preview-block.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/ai-chat-preview-block.tsx index 64d2866a19..f76c9572f0 100644 --- a/apps/web/client/src/app/_components/landing-page/feature-blocks/ai-chat-preview-block.tsx +++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/ai-chat-preview-block.tsx @@ -4,14 +4,14 @@ import { AiChatInteractive } from '../../shared/mockups/ai-chat-interactive'; export function AiChatPreviewBlock() { return ( -
+
- AI Chat + AI That Understands Context
-

Get instant design help and feedback from AI, right in your workflow.

+

Reference images, designs, and docs in chat. AI sees what you see — no more explaining from scratch.

); diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx index b79a8fa717..559b1e1889 100644 --- a/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx +++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/brand-compliance.tsx @@ -57,8 +57,8 @@ function ParallaxContainer({ children, speed = 0.1 }: { children: React.ReactNod export function BrandComplianceBlock() { return ( -
-
+
+

Brand Colors

@@ -135,10 +135,10 @@ export function BrandComplianceBlock() { {/* Icon + Title */}
- Brand compliance + Design System Guardrails
{/* Description */} -

Make your fonts, colors, and styles all speak the same language.

+

AI is constrained to your colors, fonts, and tokens. No drift. No off-brand outputs.

); diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/components.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/components.tsx index 7f10eb13e5..c80fd2f4fd 100644 --- a/apps/web/client/src/app/_components/landing-page/feature-blocks/components.tsx +++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/components.tsx @@ -3,7 +3,7 @@ import React from 'react'; export function ComponentsBlock() { return ( -
+
{/* Custom Components Menu + Calendar Preview */}
{/* Left menu container with grey background and overflow hidden */} @@ -258,10 +258,10 @@ export function ComponentsBlock() { {/* Icon + Title */}
- Components + Your Real Components
{/* Description */} -

Customize reusable components that you can swap-out across websites.

+

Design with the buttons, cards, and layouts your engineers already built. Your actual design system.

); diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/direct-editing.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/direct-editing.tsx index f78cdc3888..8a6bbbb99c 100644 --- a/apps/web/client/src/app/_components/landing-page/feature-blocks/direct-editing.tsx +++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/direct-editing.tsx @@ -5,14 +5,14 @@ import { DirectEditingInteractive } from '../../shared/mockups/direct-editing-in export function DirectEditingBlock() { return ( -
+
- Direct editing + Canvas Manipulation
-

Drag-and-drop, rearrange, scale, and more with elements directly in the editor.

+

Drag, resize, and arrange elements directly on the canvas. See changes in real code instantly.

); diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/layers.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/layers.tsx index fe9391bcb1..a08f82513b 100644 --- a/apps/web/client/src/app/_components/landing-page/feature-blocks/layers.tsx +++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/layers.tsx @@ -74,8 +74,8 @@ function MockLayersTab() { export function LayersBlock() { return ( -
-
+
+

Layers

@@ -113,10 +113,10 @@ export function LayersBlock() { {/* Icon + Title */}
- Layers + Navigate Your Code
{/* Description */} -

Select elements with precision and control.

+

See your component hierarchy. Click any layer to select it on the canvas.

); diff --git a/apps/web/client/src/app/_components/landing-page/feature-blocks/revision-history.tsx b/apps/web/client/src/app/_components/landing-page/feature-blocks/revision-history.tsx index 32ac3ce16d..1d501ec837 100644 --- a/apps/web/client/src/app/_components/landing-page/feature-blocks/revision-history.tsx +++ b/apps/web/client/src/app/_components/landing-page/feature-blocks/revision-history.tsx @@ -87,8 +87,8 @@ export function RevisionHistory() { }; return ( -
-
+
+
{/* Versions mockup */}

Versions

diff --git a/apps/web/client/src/app/_components/landing-page/features-grid-section.tsx b/apps/web/client/src/app/_components/landing-page/features-grid-section.tsx index d25a031aee..d8eeb0ee66 100644 --- a/apps/web/client/src/app/_components/landing-page/features-grid-section.tsx +++ b/apps/web/client/src/app/_components/landing-page/features-grid-section.tsx @@ -5,50 +5,50 @@ export function FeaturesGridSection() {
-

Component Library

-

Unified components for design and code

+

Your Real Components

+

Design with what engineers built

- Create reusable components that work across your project. Build once, use everywhere. Components maintain their style and behavior while giving you control of content. + Use the buttons, cards, and layouts your team already created. Not generic HTML — your actual design system, ready to drag onto the canvas.

- +
-

Theming & Branding

-

Centralized Design & Style Management

+

Built for Teams

+

Real-time collaboration

- Manage color palettes, typography scales, and design tokens through a centralized system. Define your design language once, apply it consistently across your project. + Share your canvas. Leave spatial comments. Work together on designs that become real PRs. No more "now how do I share this?"

- +
-

Layer Management

-

Precise control over every element

+

Ship PRs, Not Prototypes

+

Changes become pull requests

- Navigate your React component tree through a visual layer panel. Select, organize, and control components with precision. No more hunting through JSX to find the element you want to edit. + Your changes become a real pull request. Engineers review and merge — no handoff, no translation, no rebuilding from specs.

- +
-

Version History

-

Auto save, history and version control

+

Layer Management

+

Navigate your component tree

- Roll-back anytime! Onlook automatically saves project snapshots so you can experiment with confidence. + See your React component hierarchy in a visual layer panel. Click any layer to select it on the canvas. No more hunting through JSX.

- +
-

React Templates

-

Bring your own projects into Onlook or start fresh

+

Works With Your Codebase

+

Connect existing projects

- Onlook works with any React next.js website styled with Tailwind. Import your existing codebase and start editing visually, or begin with a new project. + Connect your existing React or Next.js project. No rebuilding. No migration. Start designing in minutes.

- +
-

Open Source

-

Built with the Community

+

Version History

+

Never lose your progress

- Browse our GitHub repo to understand how Onlook works, contribute improvements, or customize it for your team's needs. + Onlook automatically saves project snapshots. Experiment with confidence — roll back to any previous version with one click.

diff --git a/apps/web/client/src/app/_components/landing-page/features-intro-section.tsx b/apps/web/client/src/app/_components/landing-page/features-intro-section.tsx index 776aa52306..6f482ccbe3 100644 --- a/apps/web/client/src/app/_components/landing-page/features-intro-section.tsx +++ b/apps/web/client/src/app/_components/landing-page/features-intro-section.tsx @@ -5,13 +5,13 @@ export function FeaturesIntroSection() {

- Complete React Visual Builder + Native Design Tool Features

- All the Features you need to Build and Scale + Familiar to Designers. Trusted by Engineers.

- Get the best of visual design with developer-grade features. Build complex React applications visually while maintaining full control over your code, components, and architecture – No refactoring required. + A canvas that feels intuitive, with real code underneath. Engineers can merge what you create directly — no handoff, no rebuilding.

diff --git a/apps/web/client/src/app/_components/landing-page/page-footer.tsx b/apps/web/client/src/app/_components/landing-page/page-footer.tsx index f65adfacee..10999c6c4f 100644 --- a/apps/web/client/src/app/_components/landing-page/page-footer.tsx +++ b/apps/web/client/src/app/_components/landing-page/page-footer.tsx @@ -9,15 +9,15 @@ export function Footer() { return (