Elements

<div class="pr"><div class="rl"></div><div class="pc"><small></small><b></b></div></div>

<style>
.pr{position:relative;width:100%;height:100%;min-height:380px;display:flex;align-items:center;justify-content:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.rl{position:relative;width:60px;height:280px;cursor:pointer}.tk{position:absolute;left:0;height:2px;border-radius:2px;background:#555;transition:width .12s,background .2s}.tk.on{background:#0a84ff}.pc{position:absolute;left:50%;margin-left:10px;top:50%;width:150px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:10px 12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.3,.5,1)}.pc.on{opacity:1}.pc small{display:block;font-size:10px;color:#777}.pc b{font-size:13px}
</style>

<script>
(function(){var R=document.querySelector(".pr"),rl=R.querySelector(".rl"),pc=R.querySelector(".pc"),N=["Intro","Install","Usage","Props","Theming","Motion","Accessibility","Examples","Recipes","Forms","Tables","Charts","FAQ","Changelog"],P=20,sel=2,T=N.map(function(n,i){var t=document.createElement("i");t.className="tk";t.style.top=i*P+6+"px";t.style.width="10px";rl.appendChild(t);return t});function mk(){T.forEach(function(t,i){t.classList.toggle("on",i===sel)})}rl.onpointermove=function(e){var r=rl.getBoundingClientRect(),y=e.clientY-r.top,h=Math.max(0,Math.min(N.length-1,Math.round((y-6)/P)));T.forEach(function(t,i){var d=Math.abs(i*P+6-y)/P;t.style.width=(10+26*Math.exp(-d*d/2.2))+"px"});pc.querySelector("small").textContent=(h+1)+" / "+N.length;pc.querySelector("b").textContent=N[h];pc.style.transform="translateY("+(h*P+6-140+0)+"px) translateY(-50%) translateY(140px)";pc.style.top="calc(50% - 140px)";pc.style.transform="translateY("+(h*P+6)+"px) translateY(-50%)";pc.classList.add("on");rl.setAttribute("data-h",h)};rl.onpointerleave=function(){T.forEach(function(t){t.style.width="10px"});pc.classList.remove("on")};rl.onclick=function(){sel=+rl.getAttribute("data-h")||0;mk()};mk()})();
</script>

<div class="ft"><div class="tr"></div></div>

<style>
.ft{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.tr{width:260px;font-size:12px}.rw{display:flex;align-items:center;gap:7px;height:30px;padding:0 8px;border-radius:8px;cursor:pointer;color:#bbb;white-space:nowrap}.rw:hover{background:#1c1c1c}.rw.sel{background:#222;color:#fff;font-weight:600}.cv{width:10px;color:#777;font-size:9px;transition:transform .25s}.op>.rw .cv{transform:rotate(90deg)}.ic{font-size:11px;font-weight:700;width:14px;text-align:center}.ch{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,1.1,.4,1)}.op>.ch{grid-template-rows:1fr}.ch>div{overflow:hidden;padding-left:14px}
</style>

<script>
(function(){var T=[{n:"app",o:1,c:[{n:"components",o:1,c:[{n:"file-tree.tsx"},{n:"button.tsx"}]},{n:"page.tsx"},{n:"globals.css"}]},{n:"public",c:[{n:"logo.svg"}]},{n:"package.json"},{n:"README.md"}],sel="file-tree.tsx",root=document.querySelector(".tr");function icon(n){var e=n.split(".").pop();return e==="tsx"?["{}","#4aa3ff"]:e==="css"?["#","#a78bfa"]:e==="json"?["{}","#f5a524"]:e==="svg"?["◇","#34d399"]:["≡","#999"]}function build(list,par){list.forEach(function(d){var w=document.createElement("div");if(d.o)w.className="op";var r=document.createElement("div");r.className="rw";if(d.c){r.innerHTML="<span class=\"cv\">▶</span><span class=\"ic\" style=\"color:#aaa\">▣</span>"+d.n;var ch=document.createElement("div");ch.className="ch";var inn=document.createElement("div");ch.appendChild(inn);build(d.c,inn);r.onclick=function(){w.classList.toggle("op")};w.appendChild(r);w.appendChild(ch)}else{var ic=icon(d.n);r.innerHTML="<span class=\"cv\"></span><span class=\"ic\" style=\"color:"+ic[1]+"\">"+ic[0]+"</span>"+d.n;if(d.n===sel)r.classList.add("sel");r.onclick=function(){[].forEach.call(root.querySelectorAll(".rw"),function(x){x.classList.remove("sel")});r.classList.add("sel")};w.appendChild(r)}par.appendChild(w)})}build(T,root)})();
</script>

<div class="as"><aside class="sb"><div class="ws"><span class="lg">⌘</span><b class="tx">Acme Inc</b></div><a class="ni"><i>⌕</i><span class="tx">Search</span></a><a class="ni"><i>✦</i><span class="tx">AI Assistant</span></a><a class="ni"><i>✉</i><span class="tx">Inbox</span><u class="tx">4</u></a><small class="tx">WORKSPACES</small><a class="ni on"><i>◉</i><span class="tx">People</span></a><a class="ni"><i>▣</i><span class="tx">Companies</span></a><a class="ni"><i>◎</i><span class="tx">Opportunities</span></a></aside><main><div class="tb"><button class="tg" type="button">▤</button><b>People</b></div><div class="bd"><small>Wednesday, July 29</small><h3>Good morning, Ava.</h3><p>Your workspace stays in place while the navigation folds down to a focused icon rail.</p></div></main></div>

<style>
.as{display:flex;width:100%;height:100%;min-height:380px;font-family:system-ui,-apple-system,sans-serif;color:#eee;overflow:hidden}.sb{width:190px;flex:none;background:#141414;border-right:1px solid #222;padding:12px 10px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;transition:width .45s cubic-bezier(.3,1.1,.4,1);overflow:hidden}.as.c .sb{width:60px}.ws{display:flex;align-items:center;gap:10px;margin-bottom:12px;white-space:nowrap}.lg{width:28px;height:28px;border-radius:8px;background:#f2f2f2;color:#111;display:grid;place-items:center;flex:none}.ni{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;font-size:12px;color:#aaa;cursor:pointer;white-space:nowrap}.ni:hover{background:#1c1c1c}.ni.on{background:#222;color:#fff}.ni i{width:16px;text-align:center;font-style:normal;flex:none}.ni u{margin-left:auto;text-decoration:none;font-size:10px;color:#888}.tx{transition:opacity .25s}.as.c .tx{opacity:0}.sb small{font-size:9px;letter-spacing:.12em;color:#666;margin:14px 8px 4px;white-space:nowrap}main{flex:1;min-width:0}.tb{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #222;font-size:12px}.tg{background:none;border:0;color:#aaa;font-size:15px;cursor:pointer}.bd{padding:22px 20px}.bd small{font-size:10px;color:#777}.bd h3{margin:6px 0;font-size:20px}.bd p{margin:0;font-size:12px;color:#888;line-height:1.6;max-width:280px}
</style>

<script>
(function(){var R=document.querySelector(".as");R.querySelector(".tg").onclick=function(){R.classList.toggle("c")};[].forEach.call(R.querySelectorAll(".ni"),function(n){n.onclick=function(){[].forEach.call(R.querySelectorAll(".ni"),function(x){x.classList.remove("on")});n.classList.add("on");R.querySelector(".tb b").textContent=n.querySelector("span").textContent}})})();
</script>

<div class="bn"><nav class="nv"><i class="dm"></i></nav></div>

<style>
.bn{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.nv{position:relative;padding-left:24px}.nv a{display:block;height:34px;line-height:34px;font-size:14px;color:#888;cursor:pointer;transition:color .2s}.nv a.on{color:#fff;font-weight:600}.nv a:hover{color:#ddd}.dm{position:absolute;left:6px;top:0;width:7px;height:7px;background:#0a84ff;transform:translateY(13px) rotate(45deg);transition:transform .55s cubic-bezier(.3,1.9,.5,1)}
</style>

<script>
(function(){var nv=document.querySelector(".nv"),dm=nv.querySelector(".dm"),I=["Overview","Components","Motion","Templates","Changelog"],a=1,els=I.map(function(t,i){var e=document.createElement("a");e.textContent=t;e.onclick=function(){a=i;mv(i);mark()};e.onmouseenter=function(){mv(i)};nv.appendChild(e);return e});function mv(i){dm.style.transform="translateY("+(i*34+13)+"px) rotate(45deg)"}function mark(){els.forEach(function(e,i){e.classList.toggle("on",i===a)})}nv.onmouseleave=function(){mv(a)};mark();mv(a)})();
</script>

<div class="dw"><div class="bs"><button class="l">Open left</button><button class="r">Open right</button></div><div class="ov"></div><aside class="pn pl"><header><b>Menu</b><button class="x" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></header><ul><li>Dashboard</li><li>Projects</li><li>Team</li><li>Reports</li><li>Settings</li></ul></aside><aside class="pn pr"><header><b>Notifications</b><button class="x" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></header><ul class="nt"><li><i></i><div>New comment on <u>Launch plan</u><span>2 min ago</span></div></li><li><i></i><div>Deploy finished<span>1 hr ago</span></div></li><li><i class="rd"></i><div>Invoice paid<span>Yesterday</span></div></li></ul></aside></div>

<style>
.dw{position:relative;width:420px;height:290px;overflow:hidden;border-radius:16px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.bs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px}.bs button{padding:12px 20px;border-radius:999px;border:1px solid #2a2a2a;background:#1b1b1b;color:#f1f1f1;font:600 13px/1 inherit;cursor:pointer;transition:transform .2s}.bs button:active{transform:scale(.95)}.bs .r{background:#0a84ff;border-color:#0a84ff}.ov{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}.dw.open .ov{opacity:1;pointer-events:auto}.pn{position:absolute;top:0;bottom:0;width:210px;background:#1a1a1a;border:1px solid #2a2a2a;box-shadow:0 0 50px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.3,1.15,.4,1);display:flex;flex-direction:column}.pl{left:0;border-radius:0 18px 18px 0;transform:translateX(-105%)}.pr{right:0;border-radius:18px 0 0 18px;transform:translateX(105%)}.dw.left .pl,.dw.right .pr{transform:none}.pn header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px}.pn header b{font-size:14px}.x{width:28px;height:28px;border:0;border-radius:8px;background:#262626;color:#bbb;display:grid;place-items:center;cursor:pointer}.x:hover{color:#fff}.x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.pn ul{list-style:none;margin:0;padding:6px 10px}.pn li{padding:10px 10px;border-radius:9px;font-size:13px;color:#cfcfcf;cursor:pointer;transition:background .2s}.pn li:hover{background:#262626;color:#fff}.nt li{display:flex;gap:10px;align-items:flex-start;cursor:default}.nt i{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#0a84ff}.nt i.rd{background:#34d399}.nt div{font-size:12.5px;line-height:1.4}.nt u{text-decoration:none;color:#fff;font-weight:600}.nt span{display:block;color:#7a7a7a;font-size:11px;margin-top:2px}
</style>

<script>
(function(){var r=document.querySelector('.dw');function o(s){r.classList.remove('left','right');r.classList.add('open',s)}function c(){r.classList.remove('open','left','right')}r.querySelector('.bs .l').onclick=function(){o('left')};r.querySelector('.bs .r').onclick=function(){o('right')};r.querySelector('.ov').onclick=c;r.querySelectorAll('.x').forEach(function(x){x.onclick=c});document.addEventListener('keydown',function(e){if(e.key==='Escape')c()})})();
</script>

<div class="cm"><div class="fd" tabindex="0"><i class="b"></i><i class="f"></i></div><h5>Right click on me</h5><p>or long-press · Shift + F10</p><ul class="mn" role="menu"><li role="menuitem" data-a="Open">Open<kbd>Enter</kbd></li><li role="menuitem" data-a="Renamed">Rename<kbd>F2</kbd></li><li role="menuitem" data-a="Duplicated">Duplicate<kbd>D</kbd></li><li role="menuitem" data-a="Shared">Share</li><li class="sep"></li><li role="menuitem" class="del" data-a="Deleted">Delete<kbd>Del</kbd></li></ul></div>

<style>
.cm{position:relative;width:400px;height:280px;display:grid;place-content:center;justify-items:center;gap:6px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1;user-select:none}.fd{position:relative;width:130px;height:92px;margin-bottom:12px;outline:none;cursor:context-menu;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.fd:hover{transform:translateY(-3px)}.fd:focus-visible{filter:drop-shadow(0 0 0 #fff)}.fd .b{position:absolute;left:4px;top:0;width:58px;height:30px;border-radius:9px 9px 0 0;background:#a77f2a}.fd .f{position:absolute;left:0;right:0;top:14px;bottom:0;border-radius:11px;background:linear-gradient(#c9973f,#bb8730)}.fd .f::after{content:"";position:absolute;left:0;right:0;top:10px;bottom:0;border-radius:11px;background:#d1a246}.cm h5{margin:0;font-size:14px}.cm p{margin:0;font-size:11px;color:#6f7c8c}.mn{position:absolute;left:0;top:0;width:190px;margin:0;padding:5px;list-style:none;border-radius:12px;border:1px solid #2e2e2e;background:#1c1c1c;box-shadow:0 20px 44px rgba(0,0,0,.55);opacity:0;transform:scale(.92);transform-origin:top left;pointer-events:none;transition:opacity .15s,transform .28s cubic-bezier(.3,1.4,.5,1);z-index:9}.mn.open{opacity:1;transform:none;pointer-events:auto}.mn li{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:7px;font-size:12.5px;color:#d8d8d8;cursor:pointer}.mn li.hv,.mn li:hover{background:#2b2b2b;color:#fff}.mn li.del{color:#f87171}.mn li.del.hv,.mn li.del:hover{background:rgba(248,113,113,.14)}.mn kbd{font:10px/1 inherit;color:#707070}.sep{height:1px;margin:4px 6px;background:#2c2c2c;padding:0!important;pointer-events:none}
</style>

<script>
(function(){var r=document.querySelector('.cm'),m=r.querySelector('.mn'),f=r.querySelector('.fd'),h5=r.querySelector('h5'),it=[].slice.call(m.querySelectorAll('[role=menuitem]')),h=-1,lp;function open(x,y){var b=r.getBoundingClientRect(),s=b.width/400||1;x=(x-b.left)/s;y=(y-b.top)/s;x=Math.max(4,Math.min(400-196,x));y=Math.max(4,Math.min(280-190,y));m.style.left=x+'px';m.style.top=y+'px';m.classList.add('open');h=0;mark()}function close(){m.classList.remove('open');h=-1;mark()}function mark(){it.forEach(function(e,i){e.classList.toggle('hv',i===h)})}function pick(i){h5.textContent=it[i].dataset.a;close()}f.addEventListener('contextmenu',function(e){e.preventDefault();open(e.clientX,e.clientY)});f.addEventListener('pointerdown',function(e){if(e.pointerType==='touch'){lp=setTimeout(function(){open(e.clientX,e.clientY)},500)}});f.addEventListener('pointerup',function(){clearTimeout(lp)});f.addEventListener('keydown',function(e){if(e.key==='F10'&&e.shiftKey||e.key==='ContextMenu'){e.preventDefault();var b=f.getBoundingClientRect();open(b.left+b.width/2,b.top+b.height/2)}});it.forEach(function(e,i){e.onclick=function(){pick(i)};e.onmouseenter=function(){h=i;mark()}});document.addEventListener('keydown',function(e){if(!m.classList.contains('open'))return;if(e.key==='Escape')close();else if(e.key==='ArrowDown'){e.preventDefault();h=(h+1)%it.length;mark()}else if(e.key==='ArrowUp'){e.preventDefault();h=(h+it.length-1)%it.length;mark()}else if(e.key==='Enter'){e.preventDefault();pick(h)}});document.addEventListener('pointerdown',function(e){if(!m.contains(e.target))close()})})();
</script>

<div class="dk"><nav><a class="on" data-t="Home"><svg viewBox="0 0 24 24"><path d="M4 11l8-7 8 7v9H4z"/></svg></a><a data-t="Mail"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></a><a data-t="Calendar"><svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></a><a data-t="Music"><svg viewBox="0 0 24 24"><circle cx="7" cy="17" r="2.5"/><circle cx="17" cy="15" r="2.5"/><path d="M9.5 17V6l10-2v11"/></svg></a><a data-t="Magic"><svg viewBox="0 0 24 24"><path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/><path d="M19 15v4M17 17h4"/></svg></a><i class="dv"></i><a data-t="Settings"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></svg></a><a data-t="Terminal"><svg viewBox="0 0 24 24"><path d="M5 7l5 5-5 5M12 18h7"/></svg></a></nav></div>

<style>
.dk{padding-top:38px;font-family:system-ui,-apple-system,sans-serif}.dk nav{display:flex;align-items:flex-end;gap:6px;padding:8px 10px;border-radius:18px;background:#1b1b1b;border:1px solid #2a2a2a;box-shadow:0 18px 40px rgba(0,0,0,.45)}.dk a{position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#e9e9e9;cursor:pointer;transform-origin:bottom;transition:transform .3s cubic-bezier(.3,1.5,.5,1),background .2s}.dk a.on{background:#262626}.dk svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dk a:hover{transform:scale(1.5) translateY(-4px);z-index:2}.dk a:hover+a,.dk a:has(+a:hover){transform:scale(1.22) translateY(-2px)}.dk a::after{content:attr(data-t);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.7);padding:4px 8px;border-radius:7px;background:#f3f3f3;color:#111;font:600 9px/1 inherit;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s}.dk a:hover::after{opacity:1}.dv{width:1px;height:24px;align-self:center;background:#333;margin:0 4px}
</style>

<script>
document.querySelectorAll('.dk a').forEach(function(a){a.onclick=function(){document.querySelectorAll('.dk a').forEach(function(b){b.classList.toggle('on',b===a)})}});
</script>

<div class="tb"><p class="k">Pill</p><div class="tl" data-p="Overview|High-level summary.|Activity|Recent events and updates.|Settings|Preferences and access."><div class="sc"><i class="ind"></i><button class="t on">Overview</button><button class="t">Activity</button><button class="t">Settings</button></div></div><p class="note">High-level summary.</p><p class="k">Overflow</p><div class="tl ov"><div class="sc"><i class="ind"></i><button class="t on">Overview</button><button class="t">Activity</button><button class="t">Analytics</button><button class="t">Members</button><button class="t">Billing</button></div><button class="nx" aria-label="Scroll"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></button></div><p class="k">Segment</p><div class="tl sg"><div class="sc"><i class="ind"></i><button class="t on">Day</button><button class="t">Week</button><button class="t">Month</button></div></div><p class="k">Icon on selected</p><div class="tl ic"><div class="sc"><i class="ind"></i><button class="t on"><svg viewBox="0 0 24 24"><path d="M4 11l8-7 8 7v9H4z"/></svg>Home</button><button class="t"><svg viewBox="0 0 24 24"><path d="M5 19V9M12 19V5M19 19v-7"/></svg>Stats</button><button class="t"><svg viewBox="0 0 24 24"><path d="M6 17V11a6 6 0 0112 0v6l2 2H4z"/></svg>Alerts</button></div></div></div>

<style>
.tb{width:320px;font-family:system-ui,-apple-system,sans-serif;color:#e5e5e5;display:grid;gap:7px}.k{margin:8px 0 0;font:700 10px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:#7a7a7a}.note{margin:0 0 2px;font-size:13px;color:#8a8a8a}.tl{position:relative;display:inline-flex;max-width:100%;border-radius:999px;background:#1d1d1d;padding:3px}.tl.sg{border-radius:10px}.tl.sg .ind{border-radius:8px}.tl.ov{width:236px;overflow:hidden}.sc{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}.sc::-webkit-scrollbar{display:none}.ind{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;background:#0a84ff;transition:transform .4s cubic-bezier(.3,1.1,.4,1),width .4s cubic-bezier(.3,1.1,.4,1)}.t{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#8f8f8f;font:600 13px/1 inherit;padding:10px 16px;cursor:pointer;transition:color .25s}.t:hover{color:#ddd}.t.on{color:#fff}.t svg{width:0;opacity:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:-6px;transition:width .3s,opacity .3s,margin .3s}.t.on svg{width:14px;opacity:1;margin-right:0}.nx{position:absolute;right:0;top:0;bottom:0;width:34px;border:0;color:#fff;cursor:pointer;background:linear-gradient(90deg,transparent,#1d1d1d 55%);border-radius:0 999px 999px 0;display:grid;place-items:center}.nx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
</style>

<script>
(function(){function mk(g){var sc=g.querySelector('.sc'),ind=g.querySelector('.ind'),bs=sc.querySelectorAll('.t');function pos(){var a=sc.querySelector('.t.on');if(!a||!a.offsetWidth)return;ind.style.width=a.offsetWidth+'px';ind.style.transform='translateX('+a.offsetLeft+'px)'}bs.forEach(function(b){b.onclick=function(){bs.forEach(function(x){x.classList.toggle('on',x===b)});pos();if(g.dataset.p){var a=g.dataset.p.split('|');for(var i=0;i<a.length;i+=2){if(a[i]===b.textContent){document.querySelector('.note').textContent=a[i+1]}}}b.scrollIntoView({inline:'nearest',block:'nearest'})}});var nx=g.querySelector('.nx');if(nx){nx.onclick=function(){sc.scrollBy({left:110})}}pos();if(window.ResizeObserver)new ResizeObserver(pos).observe(g);setTimeout(pos,120);setTimeout(pos,500)}document.querySelectorAll('.tl').forEach(mk)})();
</script>

<div class="bc"><nav class="trail"><a class="c"><svg viewBox="0 0 24 24"><path d="M4 11l8-7 8 7v9H4z"/></svg>Workspace</a><i class="sep"></i><button class="dots" aria-label="Show hidden levels">...</button><span class="hid"><span class="in"><i class="sep"></i><a class="c">Projects</a><i class="sep"></i><a class="c">Design</a></span></span><i class="sep"></i><b>Navigation</b></nav><a class="row"><svg viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z"/></svg><span>Breadcrumb</span><svg class="go" viewBox="0 0 24 24"><path d="M7 17L17 7M9 7h8v8"/></svg></a></div>

<style>
.bc{width:330px;font-family:system-ui,-apple-system,sans-serif;display:grid;gap:14px;color:#e5e5e5}.trail{display:flex;align-items:center;gap:8px;font-size:13px;padding-bottom:14px;border-bottom:1px solid #222}.c{display:flex;align-items:center;gap:6px;color:#8a8a8a;cursor:pointer;transition:color .2s}.c:hover{color:#fff}.c svg,.row svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sep{width:6px;height:6px;border-top:1.5px solid #555;border-right:1.5px solid #555;transform:rotate(45deg);margin:0 2px;flex:none}.dots{border:0;background:none;color:#8a8a8a;font:700 13px/1 inherit;letter-spacing:1px;cursor:pointer;padding:2px 4px;border-radius:6px;transition:.2s}.dots:hover{background:#222;color:#fff}.dots.gone{display:none}.hid{display:grid;grid-template-columns:0fr;transition:grid-template-columns .45s cubic-bezier(.3,.9,.3,1);opacity:0}.hid.open{grid-template-columns:1fr;opacity:1}.hid .in{display:flex;align-items:center;gap:8px;overflow:hidden;min-width:0;white-space:nowrap}.trail b{font-weight:600}.row{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #262626;border-radius:10px;background:#181818;font-size:13px;cursor:pointer;transition:border-color .25s,background .25s}.row:hover{border-color:#3a3a3a;background:#1d1d1d}.row span{flex:1}.row .go{color:#777;transition:transform .25s,color .25s}.row:hover .go{transform:translate(2px,-2px);color:#fff}
</style>

<script>
(function(){var d=document.querySelector('.dots'),h=document.querySelector('.hid');d.onclick=function(){h.classList.add('open');d.classList.add('gone')}})();
</script>

<div class="pg"><nav class="row"><button class="ar l" aria-label="Previous"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></button><div class="nums"><i class="pill"></i></div><button class="ar r" aria-label="Next"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></button></nav><p class="lab"></p></div>

<style>
.pg{font-family:system-ui,-apple-system,sans-serif;display:grid;justify-items:center;gap:12px;color:#8a8a8a}.row{display:flex;align-items:center;gap:6px}.nums{position:relative;display:flex;gap:2px;height:36px}.nums button,.ar{width:36px;height:36px;border:0;background:none;color:#8a8a8a;border-radius:50%;font:500 13px/1 inherit;cursor:pointer;position:relative;z-index:1;transition:color .25s;display:grid;place-items:center}.nums button:hover,.ar:hover{color:#fff}.nums button.on{color:#111}.nums .gap{width:30px;height:36px;display:grid;place-items:center;color:#666;font-size:12px;cursor:pointer}.nums .gap:hover{color:#fff}.ar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ar:disabled{opacity:.3;cursor:default}.pill{position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;background:#f3f3f3;transition:transform .4s cubic-bezier(.3,1.2,.4,1)}.lab{margin:0;font-size:12px}
</style>

<script>
(function(){var T=20,cur=6,nums=document.querySelector('.nums'),pill=nums.querySelector('.pill'),lab=document.querySelector('.lab'),L=document.querySelector('.ar.l'),R=document.querySelector('.ar.r');function seq(){var s=[1],a=Math.max(2,cur-1),b=Math.min(T-1,cur+1);if(a>2)s.push('l');for(var i=a;i<=b;i++)s.push(i);if(b<T-1)s.push('r');s.push(T);return s}function draw(){nums.querySelectorAll('button,.gap').forEach(function(e){e.remove()});var x=0,at=0;seq().forEach(function(v){var e;if(v==='l'||v==='r'){e=document.createElement('span');e.className='gap';e.textContent='…';e.onclick=function(){go(v==='l'?Math.max(1,cur-3):Math.min(T,cur+3))};x+=32}else{e=document.createElement('button');e.textContent=v;if(v===cur){e.className='on';at=x}e.onclick=function(){go(v)};x+=38}nums.appendChild(e)});pill.style.transform='translateX('+at+'px)';lab.textContent='Page '+cur+' of '+T;L.disabled=cur===1;R.disabled=cur===T}function go(n){cur=Math.max(1,Math.min(T,n));draw()}L.onclick=function(){go(cur-1)};R.onclick=function(){go(cur+1)};draw()})();
</script>

<div class='ws'><button type='button' id='wsb'><span class='ws-i' id='wsi'>A</span><span class='ws-n'><b id='wsn'>App UI</b><small id='wsp'>Pro plan</small></span><svg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4M8 15l4 4 4-4'/></svg></button><ul id='wsl' role='listbox'></ul></div>

<style>
.ws{position:relative;width:240px;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ws>button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;text-align:left;font:inherit;background:#fff;border:1px solid #ececec;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}.ws-i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#f4f4f4;font:700 13px Inter,Arial,sans-serif}.ws-n{flex:1}.ws-n b{display:block;font-size:14.5px;font-weight:500}.ws-n small{display:block;font-size:12.5px;color:#8a8a8a}.ws>button svg{color:#8a8a8a}.ws ul{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;margin:6px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.ws.open ul{display:block;animation:ws-in .15s ease}.ws li{display:flex;align-items:center;gap:10px;padding:8px;font-size:14px;border-radius:9px;cursor:pointer}.ws li:hover{background:#f4f4f4}.ws li span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#f4f4f4;font:700 11px Inter,Arial,sans-serif}.ws li.on{font-weight:600}@keyframes ws-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.ws'),l=document.getElementById('wsl');const W=[['App UI','Pro plan'],['Marketing Site','Team plan'],['Side Project','Free plan']];let c=0;const d=()=>{l.innerHTML=W.map((w,i)=>'<li role=option class="'+(i===c?'on':'')+'"><span>'+w[0][0]+'</span>'+w[0]+'</li>').join('')};d();document.getElementById('wsb').addEventListener('click',()=>r.classList.toggle('open'));l.addEventListener('click',e=>{const i=[...l.children].indexOf(e.target.closest('li'));if(i>-1){c=i;document.getElementById('wsi').textContent=W[i][0][0];document.getElementById('wsn').textContent=W[i][0];document.getElementById('wsp').textContent=W[i][1];d();r.classList.remove('open')}});document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='pm'><button type='button' id='pmb'><span class='pm-a'>JD</span><span class='pm-n'><b>Jordan Dale</b><small>jordan@example.com</small></span><svg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg></button><ul id='pmm' role='menu'><li>Profile</li><li>Settings</li><li class='d'>Sign out</li></ul></div>

<style>
.pm{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.pm>button{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border:1px solid #f0f0f0;border-radius:99px;background:#fff;cursor:pointer;font:inherit;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.05)}.pm-a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#fca5a5,#f97316);color:#fff;font:600 13px Inter,Arial,sans-serif}.pm-n b{display:block;font-size:15px;font-weight:500}.pm-n small{display:block;font-size:12.5px;color:#8a8a8a}.pm>button svg{color:#8a8a8a;margin-left:14px;transition:transform .2s}.pm.open>button svg{transform:rotate(180deg)}.pm ul{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;margin:8px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.pm.open ul{display:block;animation:pm-in .15s ease}.pm li{padding:9px 12px;font-size:14px;border-radius:9px;cursor:pointer}.pm li:hover{background:#f4f4f4}.pm li.d{color:#dc2626}.pm li.d:hover{background:#fef2f2}@keyframes pm-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.pm');document.getElementById('pmb').addEventListener('click',()=>r.classList.toggle('open'));document.getElementById('pmm').addEventListener('click',()=>r.classList.remove('open'));document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='sm'><button type='button' id='smb' aria-label='Share'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='2.6'/><circle cx='6' cy='12' r='2.6'/><circle cx='18' cy='19' r='2.6'/><path d='M8.3 10.8l7.4-4.2M8.3 13.2l7.4 4.2'/></svg></button><ul id='smm' role='menu'><li id='smc'>Copy link</li><li>Email</li><li>Message</li></ul></div>

<style>
.sm{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.sm>button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #efefef;border-radius:11px;background:#fff;color:#444;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}.sm>button:hover{color:#111}.sm ul{display:none;position:absolute;left:50%;top:100%;z-index:5;min-width:150px;margin:8px 0 0 -75px;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.sm ul.on{display:block;animation:sm-in .15s ease}.sm li{padding:8px 11px;font-size:13.5px;border-radius:8px;cursor:pointer}.sm li:hover{background:#f4f4f4}@keyframes sm-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const b=document.getElementById('smb'),m=document.getElementById('smm'),c=document.getElementById('smc');b.addEventListener('click',()=>m.classList.toggle('on'));c.addEventListener('click',e=>{e.stopPropagation();try{navigator.clipboard&&navigator.clipboard.writeText(location.href)}catch(x){}c.textContent='Copied!';setTimeout(()=>{c.textContent='Copy link';m.classList.remove('on')},900)});m.addEventListener('click',e=>{if(e.target!==c)m.classList.remove('on')});document.addEventListener('mousedown',e=>{if(!b.parentNode.contains(e.target))m.classList.remove('on')});
</script>

<div class='bn'><button type='button' id='bnb' aria-label='Notifications'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/><path d='M10 20a2 2 0 0 0 4 0'/></svg><i id='bni'>2</i></button><div class='bn-p' id='bnp'><h6>Notifications</h6><p><b>New comment</b><span>Maya replied to your post</span></p><p><b>Build finished</b><span>Version 2.4 is ready</span></p><p class='m'>You are all caught up</p></div></div>

<style>
.bn{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.bn>button{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid #efefef;border-radius:11px;background:#fff;color:#444;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}.bn>button:hover{color:#111}.bn i{position:absolute;right:-7px;top:-8px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:99px;background:#222;color:#fff;font:700 10.5px/18px Inter,Arial,sans-serif;text-align:center;font-style:normal;transition:transform .2s}.bn i.h{transform:scale(0)}.bn-p{display:none;position:absolute;left:50%;top:100%;z-index:5;width:220px;margin:8px 0 0 -110px;padding:6px;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14);animation:bn-in .15s ease}.bn-p.on{display:block}.bn-p h6{margin:6px 8px;font-size:12px;font-weight:600;color:#8a8a8a;letter-spacing:.04em;text-transform:uppercase}.bn-p p{margin:0;padding:8px;border-radius:9px;font-size:13.5px}.bn-p p:not(.m):hover{background:#f4f4f4}.bn-p b,.bn-p span{display:block}.bn-p span{font-size:12.5px;color:#737373}.bn-p .m{text-align:center;font-size:12px;color:#a3a3a3}@keyframes bn-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const b=document.getElementById('bnb'),p=document.getElementById('bnp'),n=document.getElementById('bni');b.addEventListener('click',()=>{p.classList.toggle('on');if(p.classList.contains('on'))n.classList.add('h')});document.addEventListener('mousedown',e=>{if(!b.parentNode.contains(e.target))p.classList.remove('on')});
</script>

<div class='kb'><span>Quarterly report</span><button type='button' id='kbb' aria-label='More actions'><svg width='16' height='16' viewBox='0 0 24 24' fill='currentColor'><circle cx='12' cy='5' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='12' cy='19' r='1.8'/></svg></button><ul id='kbm' role='menu'><li>Share</li><li>Rename</li><li class='d'>Delete</li></ul></div>

<style>
.kb{position:relative;display:flex;align-items:center;justify-content:space-between;gap:34px;width:230px;margin:auto;padding:8px 8px 8px 14px;background:#fff;border:1px solid #efefef;border-radius:12px;font-family:Inter,Arial,sans-serif;font-size:15px;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.04)}.kb button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:#737373;cursor:pointer}.kb button:hover,.kb.open button{background:#f4f4f4;color:#111}.kb ul{display:none;position:absolute;right:6px;top:100%;z-index:5;min-width:140px;margin:6px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.kb.open ul{display:block;animation:kb-in .15s ease}.kb li{padding:8px 10px;font-size:13.5px;border-radius:8px;cursor:pointer}.kb li:hover{background:#f4f4f4}.kb li.d{color:#dc2626}.kb li.d:hover{background:#fef2f2}@keyframes kb-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.kb');document.getElementById('kbb').addEventListener('click',()=>r.classList.toggle('open'));document.getElementById('kbm').addEventListener('click',()=>r.classList.remove('open'));document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='sd'><button type='button' class='sd-b' id='sdb' aria-haspopup='listbox'><span><small>Sort</small><b id='sdv'>Newest first</b></span><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg></button><ul class='sd-l' id='sdl' role='listbox'></ul></div>

<style>
.sd{position:relative;width:190px;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.sd-b{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 14px;text-align:left;font:inherit;background:#fff;border:1px solid #e5e5e5;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s}.sd-b:hover{border-color:#cfcfcf}.sd-b small{display:block;font-size:12px;color:#8a8a8a}.sd-b b{display:block;margin-top:2px;font-size:14.5px;font-weight:400}.sd-b svg{color:#737373;transition:transform .2s}.sd.open .sd-b svg{transform:rotate(180deg)}.sd-l{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;margin:6px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12)}.sd.open .sd-l{display:block;animation:sd-in .15s ease}.sd-l li{display:flex;justify-content:space-between;padding:8px 10px;font-size:14px;border-radius:8px;cursor:pointer}.sd-l li:hover{background:#f4f4f4}.sd-l li.on:after{content:'✓';color:#111}@keyframes sd-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.sd'),b=document.getElementById('sdb'),l=document.getElementById('sdl'),v=document.getElementById('sdv');const O=['Newest first','Oldest first','Name A–Z','Most popular'];let c=0;const d=()=>{l.innerHTML=O.map((x,i)=>'<li role=option class="'+(i===c?'on':'')+'">'+x+'</li>').join('')};d();b.addEventListener('click',()=>r.classList.toggle('open'));l.addEventListener('click',e=>{const i=[...l.children].indexOf(e.target.closest('li'));if(i>-1){c=i;v.textContent=O[i];d();r.classList.remove('open')}});document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='fm'><div class='fm-t' id='fmt' tabindex='0'><span class='fm-i'><svg width='34' height='34' viewBox='0 0 24 24' fill='#fff'><path d='M3 7.5A2.5 2.5 0 0 1 5.5 5h3.6c.5 0 1 .2 1.3.6L11.6 7H18.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z'/></svg></span><b>Card Component</b><small>Right-click or tap</small></div><ul class='fm-m' id='fmm' role='menu'><li role='menuitem'>Open</li><li role='menuitem'>Rename</li><li role='menuitem'>Duplicate</li><li class='d' role='menuitem'>Delete</li></ul></div>

<style>
.fm{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111;user-select:none}.fm-t{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;outline:0}.fm-i{display:grid;place-items:center;width:88px;height:88px;border-radius:26px;background:#a5f3fc;box-shadow:0 6px 18px rgba(34,211,238,.25);transition:transform .2s}.fm-t:active .fm-i{transform:scale(.94)}.fm-t b{font-size:13px;font-weight:500}.fm-t small{font-size:12px;color:#c4c4c4}.fm-m{display:none;position:absolute;left:50%;top:100%;z-index:5;min-width:150px;margin:6px 0 0 -75px;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);transform-origin:top;animation:fm-in .15s ease}.fm-m.on{display:block}.fm-m li{padding:8px 11px;font-size:13.5px;border-radius:8px;cursor:pointer}.fm-m li:hover{background:#f4f4f4}.fm-m li.d{color:#dc2626}.fm-m li.d:hover{background:#fef2f2}@keyframes fm-in{from{opacity:0;transform:scale(.96)}}
</style>

<script>
const t=document.getElementById('fmt'),m=document.getElementById('fmm');const T=v=>m.classList.toggle('on',v);t.addEventListener('contextmenu',e=>{e.preventDefault();T(true)});t.addEventListener('click',()=>T(!m.classList.contains('on')));m.addEventListener('click',()=>T(false));document.addEventListener('mousedown',e=>{if(!t.parentNode.contains(e.target))T(false)});document.addEventListener('keydown',e=>{if(e.key==='Escape')T(false)});
</script>

"use client";
import { useEffect, useMemo, useRef, useState } from "react";

export type Command = { group: string; label: string; shortcut?: string; run: () => void };

const css = `
.cm{width:min(420px,100%);background:#fff;border:1px solid #d8deeb;border-radius:14px;box-shadow:0 18px 50px -20px rgba(0,0,0,.35);overflow:hidden;font:14px/1.5 system-ui,sans-serif;color:#0b1020}
.cm-search{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #d8deeb}
.cm-search input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;outline:none}
.cm-kbd{font:600 11px/1 ui-monospace,monospace;color:#5c627c;border:1px solid #d8deeb;border-radius:6px;padding:4px 6px}
.cm-list{list-style:none;margin:0;padding:6px;max-height:280px;overflow:auto}
.cm-group{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5c627c}
.cm-item{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;cursor:pointer}
.cm-item[aria-selected=true]{background:rgba(22,89,245,.12)}
.cm-item mark{background:none;color:#1659f5;font-weight:700}
.cm-hint{color:#5c627c;font-size:12px}
.cm-empty{padding:22px;text-align:center;color:#5c627c}`;

function Highlight({ text, query }: { text: string; query: string }) {
  const i = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
  if (i < 0) return <>{text}</>;
  return <>{text.slice(0, i)}<mark>{text.slice(i, i + query.length)}</mark>{text.slice(i + query.length)}</>;
}

export function CommandMenu({ commands, placeholder = "Type a command or search..." }: { commands: Command[]; placeholder?: string }) {
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const listRef = useRef<HTMLUListElement>(null);
  const shown = useMemo(() => commands.filter((c) => c.label.toLowerCase().includes(query.trim().toLowerCase())), [commands, query]);

  useEffect(() => setActive(0), [query]);
  useEffect(() => {
    listRef.current?.querySelector(`[data-n="${active}"]`)?.scrollIntoView({ block: "nearest" });
  }, [active]);

  const run = (n: number) => { shown[n]?.run(); setQuery(""); };
  const onKey = (e: React.KeyboardEvent) => {
    const len = Math.max(shown.length, 1);
    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (a + 1) % len); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (a - 1 + len) % len); }
    else if (e.key === "Enter") run(active);
    else if (e.key === "Escape") setQuery("");
  };

  let group = "";
  return (
    <div className="cm" role="dialog" aria-label="Command menu">
      <style>{css}</style>
      <div className="cm-search">
        <input autoFocus value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={onKey} placeholder={placeholder}
          role="combobox" aria-expanded="true" aria-controls="cm-list" aria-activedescendant={`cm-${active}`} />
        <kbd className="cm-kbd">Esc</kbd>
      </div>
      <ul id="cm-list" className="cm-list" role="listbox" ref={listRef}>
        {!shown.length && <li className="cm-empty">No results for "{query}"</li>}
        {shown.map((c, n) => {
          const head = c.group !== group ? (group = c.group) : null;
          return (
            <li key={c.group + c.label} role="presentation">
              {head && <div className="cm-group">{head}</div>}
              <div id={`cm-${n}`} data-n={n} role="option" aria-selected={n === active} className="cm-item"
                onMouseMove={() => setActive(n)} onClick={() => run(n)}>
                <span><Highlight text={c.label} query={query.trim()} /></span>
                {c.shortcut && <span className="cm-hint">{c.shortcut}</span>}
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}