From f20e0932bf200c0d609b6d03124ccea8475ebd4a Mon Sep 17 00:00:00 2001 From: Daniel R Farrell Date: Thu, 26 Feb 2026 17:43:44 -0800 Subject: [PATCH 01/12] AI-native revamp, 404, more pages --- .../client/public/onlook-preload-script.js | 5 +- .../app/_components/hero/ai-frontend-hero.tsx | 89 ++++ .../app/_components/hero/claude-code-hero.tsx | 86 ++++ .../client/src/app/_components/hero/index.tsx | 6 +- .../ai-features-intro-section.tsx | 6 +- .../builder-features-intro-section.tsx | 6 +- .../_components/landing-page/cta-section.tsx | 2 +- .../_components/landing-page/faq-dropdown.tsx | 76 ++-- .../_components/landing-page/faq-section.tsx | 32 +- .../feature-blocks/ai-chat-preview-block.tsx | 4 +- .../feature-blocks/brand-compliance.tsx | 4 +- .../feature-blocks/components.tsx | 4 +- .../feature-blocks/direct-editing.tsx | 4 +- .../landing-page/feature-blocks/layers.tsx | 4 +- .../landing-page/features-intro-section.tsx | 6 +- .../_components/landing-page/page-footer.tsx | 19 +- apps/web/client/src/app/about/layout.tsx | 172 ++++++++ apps/web/client/src/app/about/page.tsx | 40 +- apps/web/client/src/app/faq/layout.tsx | 52 +++ apps/web/client/src/app/faq/page.tsx | 209 ++++++--- .../app/features/ai-for-frontend/layout.tsx | 205 +++++++++ .../src/app/features/ai-for-frontend/page.tsx | 298 +++++++++++++ .../web/client/src/app/features/ai/layout.tsx | 148 +++++++ apps/web/client/src/app/features/ai/page.tsx | 21 + .../src/app/features/builder/layout.tsx | 148 +++++++ .../client/src/app/features/builder/page.tsx | 23 + apps/web/client/src/app/features/layout.tsx | 156 +++++++ apps/web/client/src/app/features/page.tsx | 47 +- .../src/app/features/prototype/layout.tsx | 155 +++++++ .../src/app/features/prototype/page.tsx | 29 ++ apps/web/client/src/app/not-found.tsx | 67 ++- apps/web/client/src/app/site-map/layout.tsx | 84 ++++ apps/web/client/src/app/site-map/page.tsx | 324 ++++++++++++++ apps/web/client/src/app/sitemap.ts | 105 +++++ apps/web/client/src/app/sitemap/page.tsx | 115 ----- .../src/app/workflows/claude-code/layout.tsx | 161 +++++++ .../src/app/workflows/claude-code/page.tsx | 255 +++++++++++ apps/web/client/src/app/workflows/layout.tsx | 99 +++++ apps/web/client/src/app/workflows/page.tsx | 177 ++++++++ .../src/app/workflows/vibe-coding/layout.tsx | 170 +++++++ .../src/app/workflows/vibe-coding/page.tsx | 416 ++++++++++++++++++ apps/web/client/src/utils/constants/index.ts | 7 + .../client/src/utils/constants/navigation.ts | 15 + 43 files changed, 3781 insertions(+), 270 deletions(-) create mode 100644 apps/web/client/src/app/_components/hero/ai-frontend-hero.tsx create mode 100644 apps/web/client/src/app/_components/hero/claude-code-hero.tsx create mode 100644 apps/web/client/src/app/about/layout.tsx create mode 100644 apps/web/client/src/app/faq/layout.tsx create mode 100644 apps/web/client/src/app/features/ai-for-frontend/layout.tsx create mode 100644 apps/web/client/src/app/features/ai-for-frontend/page.tsx create mode 100644 apps/web/client/src/app/features/ai/layout.tsx create mode 100644 apps/web/client/src/app/features/builder/layout.tsx create mode 100644 apps/web/client/src/app/features/layout.tsx create mode 100644 apps/web/client/src/app/features/prototype/layout.tsx create mode 100644 apps/web/client/src/app/site-map/layout.tsx create mode 100644 apps/web/client/src/app/site-map/page.tsx create mode 100644 apps/web/client/src/app/sitemap.ts delete mode 100644 apps/web/client/src/app/sitemap/page.tsx create mode 100644 apps/web/client/src/app/workflows/claude-code/layout.tsx create mode 100644 apps/web/client/src/app/workflows/claude-code/page.tsx create mode 100644 apps/web/client/src/app/workflows/layout.tsx create mode 100644 apps/web/client/src/app/workflows/page.tsx create mode 100644 apps/web/client/src/app/workflows/vibe-coding/layout.tsx create mode 100644 apps/web/client/src/app/workflows/vibe-coding/page.tsx 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/index.tsx b/apps/web/client/src/app/_components/hero/index.tsx index 0166fc96e4..e8f41ecd59 100644 --- a/apps/web/client/src/app/_components/hero/index.tsx +++ b/apps/web/client/src/app/_components/hero/index.tsx @@ -73,11 +73,9 @@ export function Hero() { transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }} style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }} > - 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/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..eb5934cae9 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, Vue, and any CSS approach (Tailwind, CSS modules, styled-components). Works with any component library that supports Storybook.', + }, + { + 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..0d129182c1 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 @@ -9,9 +9,9 @@ export function AiChatPreviewBlock() {
- 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..8069581776 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 @@ -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..70c9a5ca63 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 @@ -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..42bc745787 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 @@ -10,9 +10,9 @@ export function DirectEditingBlock() {
- 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..ee3172315c 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 @@ -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/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 (