').join('');
body.innerHTML=depth===0?'':depth===1?''+row('Project brief','Document'):row('Color palette','Design document')+row('Components','Design document');
note.textContent=depth===2?'Two files in Design.':'Open a folder to explore.';reveal(body);
if(focus){const target=body.querySelector('button')||[...trail.querySelectorAll('button')].at(-1);target?.focus({preventScroll:true});}
}
root.addEventListener('click',e=>{const parent=e.target.closest('[data-depth]'),child=e.target.closest('[data-drill]');if(parent)depth=Number(parent.dataset.depth);else if(child)depth=Math.min(2,depth+1);else return;paint(true);},{signal});
paint();controls.set(kind,()=>{depth=1;paint();});
}else if(kind==='pages'){
const buttons=[...root.querySelectorAll('[data-page]')],track=root.querySelector('.page-numbers'),previous=root.querySelector('[data-previous]'),next=root.querySelector('[data-next]'),files=root.querySelector('[data-page-files]');let page=1;
const names=['Project brief','Research notes','Color palette','Typography','Components','Wireframes','Prototype','Motion study','Review notes','Final handoff'];
function position(){track.style.setProperty('--page-x',buttons[page-1].offsetLeft+'px');}
function select(n,animate=true){page=Math.max(1,Math.min(5,n));buttons.forEach((b,i)=>{if(i+1===page)b.setAttribute('aria-current','page');else b.removeAttribute('aria-current');});previous.disabled=page===1;next.disabled=page===5;root.querySelector('[data-page-summary]').textContent=(page*2-1)+'–'+(page*2)+' of 10';files.innerHTML=names.slice((page-1)*2,page*2).map(name=>row(name,'Studio project')).join('');position();if(animate)reveal(files);}
buttons.forEach((b,i)=>b.addEventListener('click',()=>{if(page!==i+1)select(i+1);},{signal}));previous.addEventListener('click',()=>{select(page-1);if(previous.disabled)buttons[0].focus();},{signal});next.addEventListener('click',()=>{select(page+1);if(next.disabled)buttons[4].focus();},{signal});
const observer=new ResizeObserver(position);observer.observe(track);observers.push(observer);select(1,false);controls.set(kind,()=>select(1));
}else if(kind==='sidebar'){
const buttons=[...root.querySelectorAll('[data-section]')],content=root.querySelector('[data-side-content]'),toggle=root.querySelector('[data-collapse]');let selected=0;
const sections=[['Projects','A place for your next idea.','Three active projects','folder'],['Files','Everything you need, together.','Ten project files','file'],['Saved','Keep the details that matter.','Four saved items','pin']];
function select(i,animate=true){selected=i;buttons.forEach((b,j)=>{if(i===j)b.setAttribute('aria-current','page');else b.removeAttribute('aria-current');});root.style.setProperty('--side-y',i*44+'px');const [title,desc,count,icon]=sections[i];content.innerHTML=icons[icon]+'
'+title+'
'+desc+'
'+count+'';if(animate)reveal(content);}
function collapse(value){root.dataset.collapsed=String(value);toggle.setAttribute('aria-expanded',String(!value));toggle.setAttribute('aria-label',value?'Expand navigation':'Collapse navigation');}
buttons.forEach((b,i)=>b.addEventListener('click',()=>{if(i!==selected)select(i);},{signal}));toggle.addEventListener('click',()=>collapse(root.dataset.collapsed!=='true'),{signal});select(0,false);controls.set(kind,()=>{collapse(false);select(0);});
}
const frame=requestAnimationFrame(()=>root.dataset.ready='true');signal.addEventListener('abort',()=>cancelAnimationFrame(frame),{once:true});
}
motion.addEventListener('change',()=>{if(motion.matches){animations.forEach(a=>a.cancel());animations.clear();}},{signal});
return {reset(){controls.get(element.dataset.navigation)?.();},destroy(){life.abort();observers.forEach(o=>o.disconnect());animations.forEach(a=>a.cancel());animations.clear();}};
}
window.MatteNavigation = { mount };
})();