1import{a as e,j as t,r as m,b as R,F as M,w as L}from"./components-tbqp4LHE.js";import{B as E}from"./builder-brand-token-styles-DOsWA6zD.js";import{I as $,S as G}from"./site-nav-CKthbytF.js";import{SiteFooter as j}from"./site-footer-DTWooRWt.js";import{G as b,P as u,c as Y}from"./page-grid-CoFoLrqL.js";import{b as Q}from"./build-seo-head-DftSQ3gt.js";import{S as O}from"./section-table-of-contents-DOox4IoR.js";import{S as q,B as N}from"./back-to-top-button-CFYPZRyc.js";import{B as z}from"./button-CmTkeZsu.js";import{I as U}from"./IconDownload-Dh2KeP5U.js";import{c as _}from"./copy-to-clipboard-D8SewVzt.js";import{j as K,s as C,a as P,I as V}from"./brand-logo-svg-PpgWNNcj.js";import{I as X}from"./IconCheck-K9H8P55q.js";import{I as J}from"./IconLink-DBILkfft.js";import{I as F}from"./IconArrowUpRight-nVy-V9wP.js";import{I as B,a as Z,b as ee}from"./IconCircleCheckFilled-BbfyfEvR.js";import{I as te}from"./IconChartBar-CBitPqNK.js";import{I as re}from"./IconChevronDown-DkgTMAQD.js";import{I as ae}from"./IconChecklist-CNBNelq-.js";import"./index-D68R75oZ.js";import"./lib-CNBY53c5.js";import"./errorBoundaries-Cn_iLJG_.js";import"./builder-image-D1_Xk8Nk.js";import"./announcement-bar-Bxo4KJiZ.js";import"./IconCopy-DwlZeoxr.js";import"./createReactComponent-C-GgH8hJ.js";import"./proxy-B2oUKae0.js";import"./IconVectorBezier-By2BlqIO.js";import"./input-CfGXKYh-.js";import"./IconChevronRight-DIBgV9A0.js";import"./seo-tags-DYlASapG.js";import"./IconX-QIM7BlpS.js";const ie="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ffc4da69c2c7141ae90e73b2d90df7a61?alt=media&token=91e59f0f-1577-4735-9bc0-c1dbdcb9afda&apiKey=YJIGb4i01jvw0SRdL5Bt";function ne(){return e(u,{showGrid:!0,as:"div",css:{background:"var(--b-bg-page)"},children:t(b,{css:{padding:"var(--spacing-20) var(--spacing-8) var(--spacing-10)","@media (max-width: 768px)":{padding:"var(--spacing-12) var(--spacing-6) var(--spacing-8)"}},children:[e("h1",{css:{margin:"0 0 var(--spacing-5)",fontSize:"var(--b-t-heading-1)",fontWeight:500,lineHeight:1.05,letterSpacing:"-0.02em",maxWidth:820,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",background:"var(--b-gradient-blue)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:"The Collaborative Coding Playbook"}),e("p",{css:{margin:0,fontSize:20,color:"var(--b-text-highlight)",lineHeight:1.6,maxWidth:620,fontFamily:"var(--b-font-sans)","@media (max-width: 768px)":{fontSize:18}},children:"How teams build, review, and ship alongside agents."}),e("div",{css:{marginTop:"var(--spacing-6)"},children:e(z,{variant:"cta",href:ie,label:"Download PDF Brief",icon:U,external:!0})})]})})}function f({id:i,children:a,marginBottom:s="var(--spacing-6)",maxWidth:r=700}){const[n,l]=m.useState(!1),o=R(),c=async()=>{const g=`${window.location.origin}${o.pathname}#${i}`;await _(g)&&(l(!0),K("Link copied to clipboard"),setTimeout(()=>l(!1),1500))};return t("h2",{css:{margin:`0 0 ${s}
1`,fontSize:"clamp(26px, 3.5vw, 40px)",fontWeight:500,letterSpacing:"-0.02em",lineHeight:1.15,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",maxWidth:r,display:"flex",alignItems:"center",gap:"var(--spacing-2)"},children:[e("span",{children:a}),e("button",{type:"button",onClick:c,"aria-label":"Copy link to this section",css:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:28,height:28,flexShrink:0,border:"none",background:"transparent",color:"var(--b-text-muted)",cursor:"pointer",opacity:.4,transition:"opacity 0.15s ease, color 0.15s ease","&:hover":{opacity:1,color:"var(--b-text-primary)"},"&:focus-visible":{opacity:1,outline:"2px solid var(--b-action-primary-bg)",outlineOffset:2}},children:n?e(X,{size:16}):e(J,{size:16})})]})}const S=[{label:"PM",rotate:-1,color:"var(--c-yellow-400)"},{label:"Design",rotate:1,color:"var(--c-pink-400)"},{label:"Engineering",rotate:-1,color:"var(--c-violet-400)"},{label:"QA",rotate:1,color:"var(--c-green-400)"}],D=["~2 days","~3 days","~4 days"],T=["var(--c-blue-100)","var(--c-blue-200)","var(--c-blue-300)"];function oe(){const[i,a]=m.useState(null);return e("div",{role:"group","aria-label":"Diagram: work handed off between PM, design, engineering, and QA, each handoff creating a wait",css:{display:"flex",alignItems:"center",justifyContent:"center",flexWrap:"wrap",gap:0,padding:"var(--spacing-10) var(--spacing-4)","@media (max-width: 700px)":{flexDirection:"column",padding:"var(--spacing-8) var(--spacing-2)"}},children:S.map((s,r)=>t("div",{css:{display:"flex",alignItems:"center","@media (max-width: 700px)":{flexDirection:"column"}},children:[e("div",{css:{fontFamily:"var(--b-font-mono)",fontSize:14,fontWeight:600,color:"var(--b-text-primary)",background:"var(--b-bg-raised)",border:"1.5px solid var(--b-border-title-row)",borderLeft:`3px solid ${s.color}`,borderRadius:"var(--b-radius-sm)",padding:"14px 20px",transform:`rotate(${s.rotate}deg)`,transition:"border-color 0.15s, transform 0.15s","@media (max-width: 700px)":{minWidth:132,textAlign:"center"}},children:s.label}),r<S.length-1&&t("button",{type:"button",onMouseEnter:()=>a(r),onFocus:()=>a(r),onMouseLeave:()=>a(null),onBlur:()=>a(null),onClick:()=>a(n=>n===r?null:r),"aria-label":`Wait time between ${s.label} and ${S[r+1].label}: ${D[r]}`,css:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:64,height:40,background:"transparent",border:"none",cursor:"pointer","@media (max-width: 700px)":{width:40,height:40,transform:"rotate(90deg)"}},children:[t("svg",{width:"56",height:"16",viewBox:"0 0 56 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1 8 H48",stroke:i===r?T[r]:"var(--b-text-primary)",strokeWidth:"1.5",strokeDasharray:"4 3"}),e("path",{d:"M42 3 L49 8 L42 13",stroke:i===r?T[r]:"var(--b-text-primary)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})]}),t("span",{css:{position:"absolute",bottom:"100%",left:"50%",transform:"translateX(-50%)",marginBottom:6,fontFamily:"var(--b-font-mono)",fontSize:11,fontWeight:600,whiteSpace:"nowrap",color:"var(--b-bg-page)",background:T[r],padding:"3px 8px",borderRadius:"var(--b-radius-sm)",opacity:i===r?1:0,pointerEvents:"none",transition:"opacity 0.15s"},children:["wait ",D[r]]})]})]},s.label))})}function se(){return e(u,{showGrid:!0,id:"building-in-the-age",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6)"}},children:[e(f,{id:"building-in-the-age",maxWidth:700,children:"Building in the age of collaborative coding"}),t("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-5)",maxWidth:640},children:[e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-highlight)",fontFamily:"var(--b-font-sans)","@media (max-width: 768px)":{fontSize:16}},children:"The speed of delivery has become a baseline expectation, and AI tools have made work faster than ever. The teams pulling ahead are the ones redesigning their workflow around those tools, while the rest add AI coding assistants to a process built on the assumption that writing code is the slow and expensive part, then wonder why org-wide delivery holds flat even as individual developers move faster."}),e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-highlight)",fontFamily:"var(--b-font-sans)","@media (max-width: 768px)":{fontSize:16}},children:"The explanation is straightforward once you look at where the time actually goe
1s. Coding speed stopped being the constraint a while ago. The handoffs between roles are where work sits and waits, and dropping AI into a handoff-shaped process leaves every one of those handoffs intact."})]}),e("div",{css:{borderTop:"1px solid var(--b-border-subtle)",margin:"var(--spacing-8) 0"},children:e(oe,{})}),e("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-5)",maxWidth:640},children:e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",fontWeight:500},children:"This playbook outlines the workflow for clearing those queues. The argument comes first, then the way to adopt it."})})]})})}const le=[{n:"01",label:"Agents usable in plain language",detail:"No prompting expertise required to get working code back."},{n:"02",label:"Cost of code trending to zero",detail:"Ideas turn into working code almost immediately."},{n:"03",label:"Agents running in parallel",detail:"50 agents on 50 tasks produce 50 changes that need checking."}];function de(){const[i,a]=m.useState(null);return t("div",{children:[e("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:le.map((s,r)=>{const n=i===r;return t("button",{type:"button",onMouseEnter:()=>a(r),onFocus:()=>a(r),onMouseLeave:()=>a(null),onBlur:()=>a(null),onClick:()=>a(l=>l===r?null:r),css:{display:"flex",alignItems:"center",gap:"var(--spacing-5)",textAlign:"left",width:`calc(100% - ${r*40}px)`,marginInline:"auto",background:n?"var(--b-bg-prominent)":"var(--b-bg-raised)",border:`1px solid ${n?"var(--b-text-eyebrow)":"var(--b-border-subtle)"}`,padding:"var(--spacing-5) var(--spacing-6)",cursor:"pointer",transition:"background 0.15s, border-color 0.15s, width 0.15s","@media (max-width: 600px)":{width:"100%"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:13,fontWeight:600,color:n?"var(--b-text-eyebrow)":"var(--b-text-primary)",flexShrink:0},children:s.n}),t("span",{css:{flex:1,minWidth:0},children:[e("span",{css:{display:"block",fontSize:16,fontWeight:500,color:"var(--b-text-primary)"},children:s.label}),e("span",{css:{display:"grid",gridTemplateRows:n?"1fr":"0fr",marginTop:n?4:0,opacity:n?1:0,overflow:"hidden",transition:"grid-template-rows 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease"},children:e("span",{css:{display:"block",minHeight:0,fontSize:14,lineHeight:1.5,color:"var(--b-text-primary)"},children:s.detail})})]})]},s.n)})}),e("p",{css:{margin:"var(--spacing-5) 0 0",textAlign:"center",fontFamily:"var(--b-font-mono)",fontSize:12,fontWeight:600,letterSpacing:"0.04em",textTransform:"uppercase",color:"var(--b-text-eyebrow)"},children:"End state â review becomes the constraint"})]})}function ce(){return e(u,{showGrid:!0,id:"three-shifts",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6)"}},children:[e(f,{id:"three-shifts",marginBottom:"var(--spacing-8)",maxWidth:700,children:"Three shifts that broke the old way"}),t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"var(--spacing-10)",alignItems:"start","@media (max-width: 900px)":{gridTemplateColumns:"1fr"}},children:[t("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-5)"},children:[t("p",{css:{margin:0,fontSize:16,lineHeight:1.75,color:"var(--b-text-highlight)"},children:[e("strong",{css:{color:"var(--b-text-primary)"},children:"Coding agents got good enough to use in plain language."})," ","You ask for something and get working code back, no prompting expertise required. As that happened, the lines between product, engineering, and design blurred, and people who were never considered developers became first-class builders."]}),t("p",{css:{margin:0,fontSize:16,lineHeight:1.75,color:"var(--b-text-highlight)"},children:[e("strong",{css:{color:"var(--b-text-primary)"},children:"The cost of writing code trended toward zero."})," ","It will never reach zero, though the old assumption that code was the slowest and most expensive step no longer holds. You used to front-load everything: meetings, planning, debate, design, more planning, all so that nobody wasted a line of code. Ideas turn into working code almost immediately now, so you can put real product in front of people while it's still cheap to be wrong."]}),t("p",{css:{margin:0,fontSize:16,lineHeight:1.75,color:"var(--b-text-highlight)"},children:[e("strong",{css:{color:"var(--b-text-primary)"},children:"Teams started running agents in parallel."})," ","A year ago, most of the code was still something you wrote yourself, with a copilot helping at the edges. Now you can prompt, step back, and watch an agent carry the work, and once one agent runs on its own, the obvious question is why you would run only one. That question shifts the constraint to a new place. Human review becomes the slow step because 50 agents on 50 tasks produce 50 changes that all need checking. That is
1where engineering time goes now, and it is why developers find themselves buried under AI-generated pull requests."]})]}),e(de,{})]})]})})}function W({title:i,children:a}){return t("aside",{css:{background:"var(--b-bg-raised)",border:"1px solid var(--b-border-subtle)",borderLeft:"3px solid var(--b-text-eyebrow)",padding:"var(--spacing-6)",display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:[e("p",{css:{margin:0,fontFamily:"var(--b-font-mono)",fontSize:12,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--b-text-eyebrow)"},children:i}),e("div",{css:{fontSize:15,lineHeight:1.7,color:"var(--b-text-primary)","& strong":{color:"var(--b-text-primary)"}},children:a})]})}function x({eyebrow:i,title:a,description:s,href:r,icon:n,iconColor:l="var(--b-text-eyebrow)"}){return t("a",{href:r,target:"_blank",rel:"noreferrer",css:{display:"flex",gap:"var(--spacing-5)",alignItems:"flex-start",textDecoration:"none",background:"var(--b-bg-raised)",border:"1px solid var(--b-border-subtle)",padding:"var(--spacing-6)",transition:"border-color 0.15s, background 0.15s","&:hover":{borderColor:l,background:"var(--b-bg-prominent)"},"&:hover .embed-card-arrow":{transform:"translate(2px, -2px)"}},children:[e($,{size:40,iconColor:l,children:e(n,{size:18,stroke:1.75})}),t("div",{css:{flex:1,minWidth:0},children:[e("p",{css:{margin:"0 0 4px",fontFamily:"var(--b-font-mono)",fontSize:11,fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:l},children:i}),e("h3",{css:{margin:"0 0 6px",fontSize:17,fontWeight:500,color:"var(--b-text-primary)",lineHeight:1.35},children:a}),e("p",{css:{margin:0,fontSize:14,lineHeight:1.6,color:"var(--b-text-primary)"},children:s})]}),e(F,{className:"embed-card-arrow",size:18,stroke:1.75,css:{flexShrink:0,color:l,transition:"transform 0.15s"}})]})}function pe(){return t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--b-border-subtle)",border:"1px solid var(--b-border-subtle)","@media (max-width: 600px)":{gridTemplateColumns:"1fr"}},children:[t("div",{css:{background:"var(--b-bg-raised)",padding:"var(--spacing-8)",display:"flex",flexDirection:"column",alignItems:"center",gap:"var(--spacing-4)"},children:[t("div",{css:{position:"relative",width:72,height:72,display:"flex",alignItems:"center",justifyContent:"center"},"aria-hidden":"true",children:[e(B,{size:56,stroke:1.25,color:"var(--b-text-primary)"}),e(C,{size:28,stroke:1.5,color:"var(--c-red-400)",css:{position:"absolute",top:-6,right:-8,transform:"rotate(18deg)"}})]}),e("p",{css:{margin:0,textAlign:"center",fontSize:15,fontWeight:500,color:"var(--b-text-primary)"},children:"A gas car with one part swapped"}),e("p",{css:{margin:0,textAlign:"center",fontSize:13,lineHeight:1.6,color:"var(--b-text-primary)"},children:"AI bolted onto a handoff-shaped process"})]}),t("div",{css:{background:"var(--b-bg-raised)",padding:"var(--spacing-8)",display:"flex",flexDirection:"column",alignItems:"center",gap:"var(--spacing-4)"},children:[t("div",{css:{position:"relative",width:72,height:72,display:"flex",alignItems:"center",justifyContent:"center"},"aria-hidden":"true",children:[e(B,{size:56,stroke:1.25,color:"var(--c-green-400)"}),e(C,{size:22,stroke:1.5,color:"var(--c-green-400)",css:{position:"absolute",top:-2,right:6}})]}),e("p",{css:{margin:0,textAlign:"center",fontSize:15,fontWeight:500,color:"var(--b-text-primary)"},children:"A purpose-built electric car"}),e("p",{css:{margin:0,textAlign:"center",fontSize:13,lineHeight:1.6,color:"var(--b-text-primary)"},children:"A workflow redesigned around what agents make possible"})]})]})}function he(){return e(u,{showGrid:!0,id:"why-ai-flat",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6)"}},children:[e(f,{id:"why-ai-flat",maxWidth:760,children:"Why throwing AI at the old process keeps delivery flat"}),t("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-5)",maxWidth:640,marginBottom:"var(--spacing-10)"},children:[e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-highlight)","@media (max-width: 768px)":{fontSize:16}},children:"You built your workflow around the idea that code is slow and expensive. You stacked steps in front of coding so you'd never write the wrong thing, and you ended up with a waterfall. Everyone agrees waterfall is bad. Everyone uses it anyway, because agile only works when the people involved can complete a full cycle in two weeks, which takes people who can design, code, and carry product sense all at once. Those people are rare and hard to hire, so teams fall back on handoffs."}),e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-highlight)","@media (max-width: 768px)":{fontSize:16}},children:"When the workflow already runs on handoffs, inserting AI into it works about as well as building an electric car by swapping out gas parts one at a time. An electric car is a different machine from the ground up, and AI is the same kind of invitation to redesign the workflow, because the tooling alone will not save a development process that stays the same underneath. That is
1why organizations can spend heavily on tokens and still watch delivery hold flat. The work sits in queues, waiting for the next handoff, the way it always has."})]}),e("div",{css:{marginBottom:"var(--spacing-10)"},children:e(pe,{})}),t("div",{css:{display:"grid",gridTemplateColumns:"1fr",gap:"var(--spacing-6)"},children:[t(W,{title:"What a handoff really means",children:["A point where work stops with one role and waits to be picked up by another: design to engineering, engineering to QA, PM back to design. ",e("strong",{children:"The wait is the cost, not the work itself."})]}),e(x,{eyebrow:"Data",title:"The AI Productivity Gap, By the Numbers",description:"Developer task speed is rising while team delivery stays flat.",href:"https://www.builder.io/ai-productivity-gap",icon:te,iconColor:"var(--c-yellow-400)"})]})]})})}function ge({patterns:i}){const[a,s]=m.useState(0);return e("div",{css:{border:"1px solid var(--b-border-subtle)",borderTop:"none"},children:i.map((r,n)=>{const l=a===n,o=`pattern-panel-${n}`,c=`pattern-button-${n}`;return t("div",{css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:[e("h3",{css:{margin:0},children:t("button",{type:"button",id:c,"aria-expanded":l,"aria-controls":o,onClick:()=>s(l?-1:n),css:{width:"100%",display:"flex",alignItems:"center",gap:"var(--spacing-5)",textAlign:"left",background:"var(--b-bg-page)",border:"none",cursor:"pointer",padding:"var(--spacing-6)",transition:"background 0.15s","&:hover":{background:"var(--b-bg-prominent)"}},children:[e("span",{css:{fontFamily:"var(--b-font-mono)",fontSize:14,fontWeight:600,color:l?"var(--b-text-eyebrow)":"var(--b-text-primary)",flexShrink:0},children:r.n}),e("span",{css:{flex:1,fontSize:18,fontWeight:500,color:"var(--b-text-primary)"},children:r.title}),e(re,{size:18,stroke:1.75,css:{flexShrink:0,color:l?"var(--b-text-eyebrow)":"var(--b-text-primary)",transform:l?"rotate(180deg)":"none",transition:"transform 0.2s, color 0.15s"}})]})}),t("div",{id:o,role:"region","aria-labelledby":c,hidden:!l,css:{background:"var(--b-bg-page)",padding:l?"0 var(--spacing-6) var(--spacing-6) calc(var(--spacing-6) + 30px)":0},children:[e("p",{css:{margin:0,fontSize:15,lineHeight:1.7,color:"var(--b-text-primary)",maxWidth:720},children:r.body}),r.extra&&e("div",{css:{marginTop:"var(--spacing-5)"},children:r.extra})]})]},r.n)})})}const H=[{label:"PM",detail:"Adds the customer nuance the original prompt missed.",color:"var(--c-yellow-400)"},{label:"Design",detail:"Refines the pixels and interaction details directly.",color:"var(--c-pink-400)"},{label:"QA",detail:"Verifies fixes in real time on its own branch.",color:"var(--c-green-400)"},{label:"Engineering",detail:"Reviews the code, structure, and architecture.",color:"var(--c-violet-400)"}];function A({active:i,color:a}){return t("svg",{width:"24",height:"16",viewBox:"0 0 24 16",fill:"none","aria-hidden":"true",css:{display:"block",flexShrink:0,transition:"transform 0.2s ease",transform:i?"scaleX(1.15)":"none","@media (max-width: 800px)":{transform:"rotate(90deg)"}},children:[e("path",{d:"M1 8 H19",stroke:i?a:"var(--b-text-primary)",strokeWidth:"1.5",strokeDasharray:"3 3",css:{transition:"stroke 0.2s ease"}}),e("path",{d:"M14 3 L21 8 L14 13",stroke:i?a:"var(--b-text-primary)",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none",css:{transition:"stroke 0.2s ease"}})]})}function me(){const[i,a]=m.useState(null),s=i!==null?H[i]:null;return t("div",{role:"group","aria-label":"Diagram: PM, design, QA, and engineering each connect directly to agents and work in parallel, converging at a single review gate before main",css:{padding:"var(--spacing-10) var(--spacing-6)"},children:[t("div",{css:{display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--spacing-5)",flexWrap:"wrap","@media (max-width: 800px)":{flexDirection:"column"}},children:[e("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:H.map((r,n)=>{const l=i===n;return e("button",{type:"button",onMouseEnter:()=>a(n),onFocus:()=>a(n),onMouseLeave:()=>a(null),onBlur:()=>a(null),onClick:()=>a(o=>o===n?null:n),"aria-label":`${r.label}: ${r.detail}`,css:{fontFamily:"var(--b-font-mono)",fontSize:13,fontWeight:600,cursor:"pointer",width:140,textAlign:"left",color:l?r.color:"var(--b-text-primary)",background:l?"var(--b-bg-prominent)":"var(--b-bg-raised)",border:`1px solid ${l?r.color:"var(--b-border-title-row)"}`,boxShadow:l?`0 0 12px ${r.color}`:"none",padding:"10px 16px",transform:l?"translateX(2px)":"none",transition:"color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s"},children:r.label},r.label)})}),e(A,{active:s!==null,color:s?.color??""}),e("div",{css:{fontFamily:"var(--b-font-mono)",fontSize:13,fontWeight:600,whiteSpace:"nowrap",color:s?s.color:"var(--b-text-eyebrow)",border:`1px solid ${s?s.color:"var(--b-text-eyebrow)"}`,boxShadow:s?`0 0 12px ${s.color}`:"none",padding:"10px 20px",transition:"color 0.2s, border-color 0.2s, box-shadow 0.2s"},children:"Agents (parallel)"}),e(A,{active:!1,color:""}),e("div",{css:{fontFamily:"var(--b-font-mono)",fontSize:13,fontWeight:600,whiteSpace:"nowrap",color:"var(--b-bg-page)",background:"var(--b-text-eyebrow)",padding:"10px 20px"},children:"Single review gate"}),e(A,{active:!1,color:""}),e("div",{css:{fontFamily:"var(--b-font-mono)",fontSize:13,fontWeight:600,color:"var(--b-text-primary)",border:"1px dashed var(--b-border-title-row)",padding:"10px 20px"},children:"main"})]}),e("p",{css:{margin:"var(--spacing-5) 0 0",minHeight:20,fontSize:13,lineHeight:1.5,textAlign:"center",color:"var(--b-text-primary)"},children:s?.detail??" "})]})}const be=[{n:"01",title:"Building the first version before designing it",body:"You kick off an agent, get a working draft, and put it in front of people right away, which moves the design and product work to after that first version exists. The endless argument over a PRD that everyone reads differently goes away, because once you can touch a version of the product, the reaction is immediate and visceral. A perfect PRD becomes a perfect design becomes perfectly architected code, ships, and falls flat more often than anyone admits. You want to learn that early, with customer zero being you, then a handful of close customers on a preview link, well before you build the real thing."},{n:"02",title:"Each role works in parallel with agents",body:"Today, the engineer sits in the middle as connective tissue, with PMs, designers, and QA hovering around with feedback while the engineer juggles agents and translates everyone's notes. It is an expensive way to spend engineering time. When each expert talks to the agent directly, the work moves faster because designers refine the pixels they care about, PMs add the customer nuance the original prompt missed, and QA verifies fixes in real time without filing bug lists or waiting for turnaround. Everyone works in their own loop between themselves and the agent."},{n:"03",title:"Validation that happens before the pull request",body:"You spent decades building reviews around waterfall, and plenty of them should stay: pull request reviews, code review, security checks, and QA. The change is moving validation earlier. By the time a developer reviews the final PR, design has signed off, the responsive details are right, QA has verified, and the product has confirmed it matches requirements. The engineer's only job at that point is the code itself: how it looks, how it's structured, how it's architected.",extra:t(W,{title:"What stays the same",children:["Moving validation earlier doesn't loosen the gates at the end. Pull request review, code review, security checks, and QA sign-off all stay where they are."," ",e("strong",{children:"What changes is how much is already settled by the time code reaches them."})]})},{n:"04",title:"Work that attaches to wherever it starts",body:"Leave feedback in Builder, and it lands in a Slack channel, where someone tags the bot to fix it and shares a link to try. Assign it to QA or design from there. Jira tickets work the same way, including the useful tickets that aren't on fire and normally lose every prioritization fight. Starting from a rough draft tends to create urgency to ship the good version."},{n:"05",title:"The versions after the first one",body:"The first version is an i
1dea waiting for validation, and the versions that follow are where the value is. What ships are the product of human review, feedback, and craft from everyone who touched it. When teams let agents run on their own for days, everyone ends up with the same product. AI is genuinely bad at judging whether an experience feels right to a human, so the craft your team adds becomes your differentiation."}];function ue(){return e(u,{showGrid:!0,id:"five-patterns",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6)"}},children:[e(f,{id:"five-patterns",marginBottom:"var(--spacing-3)",maxWidth:760,children:"The five patterns of a collaborative coding workflow"}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:16,color:"var(--b-text-primary)",maxWidth:640},children:"The new workflow exists to clear those queues. Five patterns show up again and again once teams build around them."}),e("div",{css:{background:"var(--b-bg-page)",border:"1px solid var(--b-border-subtle)",marginBottom:"var(--spacing-8)"},children:e(me,{})}),e(ge,{patterns:be})]})})}const I=[{label:"Connect repo",detail:"Invite like a shared design file."},{label:"Branch off main",detail:"Source of truth stays untouched."},{label:"Change",detail:"Prompt, visual edit, or plan mode."},{label:"Push PR",detail:"Plain-English summary of what changed."},{label:"Review",detail:"Engineer previews and checks the code."},{label:"Merge",detail:"Back to main. Run several branches at once."}],fe=150;function ve(){const[i,a]=m.useState(0),[s,r]=m.useState(null),n=s??i;return e("div",{css:{display:"flex",flexDirection:"column",alignItems:"center",gap:"var(--spacing-8)"},children:t("div",{role:"group","aria-label":"Diagram: the repo-to-merge loop, connect repo, branch off main, change, push PR, review, merge, back to main",css:{position:"relative",width:`min(100%, ${fe*2+120}px)`,aspectRatio:"1 / 1",margin:"0 auto"},children:[e("svg",{viewBox:"0 0 100 100",css:{position:"absolute",inset:0,width:"100%",height:"100%"},"aria-hidden":"true",children:e("circle",{cx:"50",cy:"50",r:"38",fill:"none",stroke:"var(--b-border-subtle)",strokeWidth:"0.6",strokeDasharray:"2 2"})}),I.map((l,o)=>{const c=o/I.length*2*Math.PI-Math.PI/2,g=50+38*Math.cos(c),p=50+38*Math.sin(c),d=n===o;return t("button",{type:"button",onMouseEnter:()=>r(o),onFocus:()=>r(o),onMouseLeave:()=>r(null),onBlur:()=>r(null),onClick:()=>a(o),"aria-label":`${o+1}. ${l.label}: ${l.detail}`,"aria-pressed":d,css:{position:"absolute",left:`${g}%`,top:`${p}%`,transform:"translate(-50%, -50%)",width:92,fontFamily:"var(--b-font-mono)",fontSize:11,fontWeight:600,"@media (max-width: 480px)":{width:80,fontSize:10,padding:"7px 5px"},textAlign:"center",color:d?"var(--b-bg-page)":"var(--b-text-primary)",background:d?"var(--b-text-eyebrow)":"var(--b-bg-raised)",border:`1px solid ${d?"var(--b-text-eyebrow)":"var(--b-border-title-row)"}`,borderRadius:"var(--b-radius-sm)",padding:"8px 6px",cursor:"pointer",transition:"background 0.15s, color 0.15s, border-color 0.15s"},children:[o+1,". ",l.label]},l.label)}),e("p",{css:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:140,margin:0,fontSize:15,"@media (max-width: 480px)":{width:112,fontSize:13},lineHeight:1.4,textAlign:"center",color:"var(--b-text-primary)"},children:I[n].detail})]})})}function we(){return e(u,{showGrid:!0,id:"workflow-practice",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6)"}},children:[e(f,{id:"workflow-practice",marginBottom:"var(--spacing-3)",maxWidth:760,children:"What the workflow looks like in practice"}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:16,color:"var(--b-text-primary)",maxWidth:640},children:"The patterns above describe the shape. Here's the loop a team runs, from connecting a repository to merging a change."}),t("div",{css:{display:"grid",gridTemplateColumns:"1fr 320px",gap:"var(--spacing-10)",alignItems:"start",marginBottom:"var(--spacing-10)","@media (max-width: 1024px)":{gridTemplateColumns:"1fr"}},children:[e(ve,{}),e(W,{title:"The loop at a glance",children:"Connect repo, branch off main, make the change by prompt, visual edit, or plan mode, push the PR, engineer reviews, and merges. Run several branches in parallel, each with its own agent."})]}),t("div",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-5)",maxWidth:640,marginBottom:"var(--spacing-8)"},children:[e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-highlight)","@media (max-width: 768px)":{fontSize:16}},children:"Builder connects to GitHub, GitLab, Azure, and Bitbucket, and works inside the repo against the components already in your project. Someone who has never opened a repo gets invited the same way they'd get access to a shared design file, picks the project, and Builder handles setup, scanning the codebase to recommend the components and dependencies it needs. The running product loads inside Builder. Anything built here matches the component library because it's built from it."}),e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-highlight)","@media (max-width: 768px)":{fontSize:16}},children:"Every change starts on a branch off the main, so the source of truth is never touched during the work. You make the change by prompting the agent in plain language, editing visually through a styling panel, or using plan mode for anything complex, where Builder asks clarifying questions and writes a short spec you approve before any code is written. You can open several branches at once, each with its own agent in an isolated environment, so one reworks a table while another builds a
1screen and a third runs QA, all without conflicts."}),e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-highlight)","@media (max-width: 768px)":{fontSize:16}},children:"When a branch is ready, you push it and Builder opens a pull request in your Git provider with a plain-English summary of what changed. The engineer reviews the code, previews the change, and merges, and every change runs through that same review, whether an agent or a teammate produced it. The key point is that your existing gates stay in place: security reviews, code reviews, and AI reviews all work as they do today."})]}),e(x,{eyebrow:"Webinar",title:"Let Your Whole Team Build on Your Real Codebase",description:"A walkthrough of the full connect-to-merge loop on a live repo.",href:"https://www.builder.io/hub/webinars/whole-team-build-real-codebase/watch-now",icon:P,iconColor:"var(--c-red-400)"})]})})}const ye=[{role:"Designers",change:"Build against the real repo in a tool they already understand and hand off reviewable code."},{role:"PMs",change:"Describe features in plan mode and hand engineering a spec plus a working draft."},{role:"QA",change:"Validate flows on their own branch without booking developer time."},{role:"Engineers",change:"Review pull requests and keep full control over what reaches main, moving from executing every small change to guiding architecture and approving what ships."}];function xe(){return e(u,{showGrid:!0,id:"org-shape",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6)"}},children:[e(f,{id:"org-shape",maxWidth:700,children:"How the org changes shape"}),e("div",{css:{display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:1,background:"var(--b-border-subtle)",border:"1px solid var(--b-border-subtle)",marginBottom:"var(--spacing-8)","@media (max-width: 900px)":{gridTemplateColumns:"repeat(2, 1fr)"},"@media (max-width: 560px)":{gridTemplateColumns:"1fr"}},children:ye.map(({role:i,change:a})=>t("div",{css:{background:"var(--b-bg-raised)",padding:"var(--spacing-6)",display:"flex",flexDirection:"column",gap:"var(--spacing-3)"},children:[e("p",{css:{margin:0,fontFamily:"var(--b-font-mono)",fontSize:13,fontWeight:600,letterSpacing:"0.04em",textTransform:"uppercase",color:"var(--b-text-eyebrow)"},children:i}),e("p",{css:{margin:0,fontSize:14,lineHeight:1.6,color:"var(--b-text-primary)"},children:a})]},i))}),e("p",{css:{margin:0,fontSize:18,lineHeight:1.75,color:"var(--b-text-primary)",fontWeight:500,maxWidth:640,"@media (max-width: 768px)":{fontSize:16}},children:"The handoff that turned every small change into a ticket goes away, and oversight stays intact throughout."})]})})}const w=[{label:"Conceptual prototyping",connection:"No connection to production code",detail:"A simple prototype repo that mirrors production and your design system. Prototype rapidly, then turn it into production code through the MCP when ready."},{label:"Code-based prototyping",connection:"Your own design system and components",detail:"Prototype in your own code, with the same production components you ship. Higher fidelity, the same guardrails, and a jump to production that amounts mostly to copy-and-paste."},{label:"Production code editing",connection:"Connected to the real repos",detail:"The fastest rung, connected to the real repos. It's there when you're ready."}];function ke({activeIndex:i,onActiveIndexChange:a}={}){const[s,r]=m.useState(0),n=i??s,l=a??r,o=m.useRef([]),c="maturity-ladder-detail",g=(p,d)=>{let h=null;p.key==="ArrowRight"||p.key==="ArrowDown"?h=(d+1)%w.length:p.key==="ArrowLeft"||p.key==="ArrowUp"?h=(d-1+w.length)%w.length:p.key==="Home"?h=0:p.key==="End"&&(h=w.length-1),h!==null&&(p.preventDefault(),l(h),o.current[h]?.focus())};return t("div",{css:{height:"100%",display:"flex",flexDirection:"column",justifyContent:"center",border:"1px solid var(--b-border-subtle)",background:"var(--b-bg-raised)",padding:"var(--spacing-6)"},children:[e("div",{role:"tablist","aria-label":"Maturity phases",css:{display:"flex",alignItems:"stretch",gap:"var(--spacing-3)","@media (max-width: 600px)":{flexDirection:"column",alignItems:"stretch"}},children:w.map((p,d)=>{const h=n===d;return t("button",{ref:v=>{o.current[d]=v},type:"button",role:"tab",id:`maturity-ladder-tab-${d}`,"aria-selected":h,"aria-controls":c,tabIndex:h?0:-1,onClick:()=>l(d),onKeyDown:v=>g(v,d),css:{flex:1,display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:"flex-start",textAlign:"left",cursor:"pointer",border:`1px solid ${h?"var(--b-text-eyebrow)":"var(--b-border-subtle)"}`,background:h?"var(--b-bg-prominent)":"var(--b-bg-page)",padding:"var(--spacing-5)",transition:"background 0.15s, border-color 0.15s"},children:[t("span",{css:{display:"block",fontFamily:"var(--b-font-mono)",fontSize:12,fontWeight:600,color:h?"var(--b-text-eyebrow)":"var(--b-text-primary)",marginBottom:6},children:["Rung ",d+1]}),e("span",{css:{display:"block",fontSize:16,fontWeight:500,color:"var(--b-text-primary)",marginBottom:4},children:p.label}),e("span",{css:{display:"block",fontSize:13,color:"var(--b-text-primary)"},children:p.connection})]},p.label)})}),e("p",{id:c,role:"tabpanel","aria-labelledby":`maturity-ladder-tab-${n}`,css:{margin:"var(--spacing-6) 0 0",fontSize:16,lineHeight:1.7,color:"var(--b-text-highlight)",maxWidth:680},children:w[n].detail})]})}const y=[{prompt:"Where do new features get prototyped?",answers:["A throwaway mockup or a sandbox unconnected to production","A separate codebase using our real design system and components","Directly in the production repo"]},{prompt:"How do changes get from prototype to production?",answers:["Someone rebuilds it from scratch in the real codebase","Mostly copy-and-paste, since components already match","There's no ga
1p â it's already in production"]},{prompt:"Who can touch the real repos during this process?",answers:["Only engineers, once the design/prototype phase is fully done","Engineers and a few trusted non-engineers, with review","Anyone on the team, with PR review as the safety net"]}];function Se(i){return i<=1?0:i<=4?1:2}function Te({onResult:i}){const[a,s]=m.useState(y.map(()=>null)),r=m.useRef(y.map(()=>[])),n=(o,c)=>{const g=[...a];if(g[o]=c,s(g),g.every(d=>d!==null)){const d=g.reduce((h,v)=>h+(v??0),0);i(Se(d))}else i(null)},l=(o,c,g)=>{const p=y[c].answers.length;let d=null;o.key==="ArrowDown"||o.key==="ArrowRight"?d=(g+1)%p:o.key==="ArrowUp"||o.key==="ArrowLeft"?d=(g-1+p)%p:o.key==="Home"?d=0:o.key==="End"&&(d=p-1),d!==null&&(o.preventDefault(),n(c,d),r.current[c][d]?.focus())};return t("div",{css:{position:"relative",border:"1px solid var(--b-border-subtle)",borderTop:"1px solid var(--b-text-eyebrow)",background:"var(--b-bg-prominent)",padding:"var(--spacing-6)",display:"flex",flexDirection:"column",gap:"var(--spacing-6)"},children:[t("span",{css:{display:"inline-flex",alignItems:"center",gap:"var(--spacing-2)",alignSelf:"flex-start",border:"1px solid var(--b-text-eyebrow)",background:"var(--b-bg-page)",padding:"var(--spacing-2) var(--spacing-4)",fontFamily:"var(--b-font-mono)",fontSize:18,fontWeight:600,color:"var(--b-text-eyebrow)"},children:[e(ae,{size:20,stroke:1.75}),"Answer the three questions below to see where you stand"]}),y.map((o,c)=>{const g=`maturity-question-${c}`;return t("fieldset",{css:{margin:0,padding:0,border:"none"},children:[e("legend",{id:g,css:{padding:0,marginBottom:"var(--spacing-3)",fontSize:15,fontWeight:500,color:"var(--b-text-primary)"},children:o.prompt}),e("div",{role:"radiogroup","aria-labelledby":g,css:{display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:o.answers.map((p,d)=>{const h=a[c]===d,v=a[c]===null?d===0:h;return t("button",{ref:k=>{r.current[c][d]=k},type:"button",role:"radio","aria-checked":h,tabIndex:v?0:-1,onClick:()=>n(c,d),onKeyDown:k=>l(k,c,d),css:{display:"flex",alignItems:"center",gap:"var(--spacing-3)",textAlign:"left",cursor:"pointer",border:`1px solid ${h?"var(--b-text-eyebrow)":"var(--b-border-subtle)"}`,background:h?"color-mix(in srgb, var(--b-text-eyebrow) 15%, var(--b-bg-page))":"var(--b-bg-page)",padding:"var(--spacing-3) var(--spacing-4)",fontSize:14,color:"var(--b-text-primary)",transition:"background 0.15s, border-color 0.15s","&:hover":{borderColor:"var(--b-text-eyebrow)",background:h?"color-mix(in srgb, var(--b-text-eyebrow) 15%, var(--b-bg-page))":"var(--b-bg-raised)"}},children:[h?e(Z,{size:20,css:{flexShrink:0,color:"var(--b-text-eyebrow)"}}):e(ee,{size:20,stroke:2,css:{flexShrink:0,color:"var(--b-text-primary)"}}),p]},p)})})]},o.prompt)})]})}function Ae(){const[i,a]=m.useState(null),[s,r]=m.useState(0),n=m.useRef(null);return e(u,{showGrid:!0,id:"adopting-phases",css:{background:"radial-gradient(ellipse 80% 60% at 50% 0%, var(--b-bg-prominent), var(--b-bg-page))",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6)"}},children:[e(f,{id:"adopting-phases",marginBottom:"var(--spacing-3)",maxWidth:700,children:"Adopting in phases"}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:16,color:"var(--b-text-primary)",maxWidth:640},children:"You don't change everything tomorrow. There's a maturity curve you climb one rung at a time."}),t("div",{css:{display:"grid",gridTemplateColumns:"1fr",gap:"var(--spacing-6)",marginBottom:"var(--spacing-10)",alignItems:"stretch"},children:[e(Te,{onResult:o=>{a(o),o!==null&&(r(o),requestAnimationFrame(()=>{n.current?.scrollIntoView({behavior:"smooth",block:"center"})}))}}),e("p",{role:"status",css:{margin:0,fontSize:15,lineHeight:1.6,color:"var(--b-text-highlight)"},children:i!==null?t(M,{children:["You're on rung ",i+1,":"," ",e("strong",{css:{color:"var(--b-text-primary)"},children:w[i].label})]}):"Take the quiz above to see where you stand."}),e("div",{ref:n,children:e(ke,{activeIndex:s,onActiveIndexChange:r})})]}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:16,lineHeight:1.75,color:"var(--b-text-primary)",maxWidth:640},children:"Take the rungs one at a time. Start with a small team that likes getting its hands dirty, find the workflows that fit your company, and grow from there. The one constant across all of it is that humans review the code at the pull request and everywhere after it."}),t("div",{css:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"var(--spacing-6)","@media (max-width: 800px)":{gridTemplateColumns:"1fr"}},children:[e(x,{eyebrow:"Webinar",title:"Stop Throwing Away Prototypes",description:"Building prototypes from real components instead of throwaway mockups.",href:"https://www.builder.io/hub/webinars/stop-throwing-away-prototypes/watch-now",icon:P,iconColor:"var(--c-green-400)"}),e(x,{eyebrow:"Guide",title:"The Brutal Truth About Your AI Maturity",description:"Four maturity levels and the one workflow change that moves a team up them.",href:"https://www.builder.io/guide-ai-maturity",icon:V,iconColor:"var(--c-pink-400)"})]})]})})}function Ie(){return e(u,{showGrid:!0,id:"closing",css:{background:"var(--b-bg-page)",borderTop:"1px solid var(--b-border-subtle)"},children:t(b,{css:{padding:"var(--spacing-12) var(--spacing-8) var(--spacing-20)","@media (max-width: 768px)":{padding:"var(--spacing-8) var(--spacing-6) var(--spacing-12)"}},children:[e(f,{id:"closing",marginBottom:"var(--spacing-4)",maxWidth:760,children:"Fast used to mean cutting people out of the loop."}),e("p",{css:{margin:"0 0 var(--spacing-8)",fontSize:18,lineHeight:1.75,maxWidth:640,color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)","@media (max-width: 768px)":{fontSize:16}},children:"Here, it means the opposite: more of your team shaping the work, with the review gates that made it trustworthy still standing."}),t("div",{css:{display:"flex",gap:"var(--spacing-3)",flexWrap:"wrap"},children:[e(z,{variant:"cta",href:"/signup",label:"Try Builder Free"}),e(z,{variant:"secondary",href:"https://www.builder.io/demo",label:"Schedule a Demo",icon:F})]})]})})}const ze=[{id:"building-in-the-age",label:"Building in the Age of AI"},{id:"three-shifts",label:"Three Shifts That Broke the Old Way"},{id:"why-ai-flat",label:"Why AI Alone Keeps Delivery Flat"},{id:"five-patterns",label:"The Five Patterns"},{id:"workflow-practice",label:"The Workflow in Practice"},{id:"org-shape",label:"How the Org Changes Shape"},{id:"adopting-phases",label:"Adopting It in Phases"}],ot=()=>
1[{rel:"preconnect",href:"https://fonts.googleapis.com"},{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"},{rel:"stylesheet",href:"https://fonts.googleapis.com/css2?family=Geist:[email protected]&family=Geist+Mono:[email protected]&display=swap"}],st=()=>Q(null,{title:"The Collaborative Coding Playbook â Builder.io",description:"How product teams build, review, and ship alongside AI agents.",path:"/collaborative-coding-playbook"}).meta,lt=L(function(){return t("div",{className:"builder-brand-tokens",css:{minHeight:"100vh",background:"var(--b-bg-page)",color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",display:"flex",flexDirection:"column","& section[id]":{scrollMarginTop:96}},children:[e(E,{}),e(G,{}),e(q,{}),e(N,{}),e("main",{id:"main-content",css:{flex:1},children:t("div",{css:{display:"grid",gridTemplateColumns:"repeat(5, 1fr) 260px",alignItems:"start",width:"100%",maxWidth:Y,margin:"0 auto","@media (max-width: 900px)":{gridTemplateColumns:"1fr",maxWidth:"none"}},children:[t("div",{css:{gridColumn:"1 / span 5",minWidth:0,"@media (max-width: 900px)":{gridColumn:"1"}},children:[e(ne,{}),e(se,{}),e(ce,{}),e(he,{}),e(ue,{}),e(we,{}),e(xe,{}),e(Ae,{}),e(Ie,{})]}),e("aside",{css:{gridColumn:"6",position:"sticky",top:70,alignSelf:"start",minHeight:"calc(100vh - 70px)",borderLeft:"1px solid var(--b-border-subtle)","@media (max-width: 900px)":{display:"none"}},children:e(O,{items:ze})})]})}),e(j,{})]})});export{lt as default,ot as links,st as meta};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.