Mode-Prefix Palette

<!-- Mode-Prefix Palette — > command, @ mention, # tag, / filter -->
<div class="nuda-cp2-mode-prefix" role="dialog" aria-label="Command palette">
  <div class="nuda-cp2-mode-prefix__modes" role="tablist" aria-label="Search mode">
    <button class="nuda-cp2-mode-prefix__mode nuda-cp2-mode-prefix__mode--active" type="button" role="tab" aria-selected="true">&gt; cmd</button>
    <button class="nuda-cp2-mode-prefix__mode" type="button" role="tab" aria-selected="false">@ mention</button>
    <button class="nuda-cp2-mode-prefix__mode" type="button" role="tab" aria-selected="false"># tag</button>
    <button class="nuda-cp2-mode-prefix__mode" type="button" role="tab" aria-selected="false">/ filter</button>
    <span class="nuda-cp2-mode-prefix__indicator" aria-hidden="true"></span>
  </div>
  <div class="nuda-cp2-mode-prefix__input">
    <span class="nuda-cp2-mode-prefix__prefix" aria-hidden="true">&gt;</span>
    <input class="nuda-cp2-mode-prefix__query" value="deploy to prod" aria-label="Command input" />
    <span class="nuda-cp2-mode-prefix__caret" aria-hidden="true"></span>
  </div>
</div>

/* Mode-Prefix Palette — slide the indicator under the clicked mode tab. */

(function () {
  var tabs = document.querySelectorAll('.nuda-cp2-mode-prefix__mode');
  var indicator = document.querySelector('.nuda-cp2-mode-prefix__indicator');
  if (!tabs.length || !indicator) return;

  var baseWidth = indicator.getBoundingClientRect().width || 40;

  tabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
      tabs.forEach(function (t) {
        t.classList.remove('nuda-cp2-mode-prefix__mode--active');
        t.setAttribute('aria-selected', 'false');
      });
      tab.classList.add('nuda-cp2-mode-prefix__mode--active');
      tab.setAttribute('aria-selected', 'true');

      var ratio = tab.offsetWidth / baseWidth;
      indicator.style.transform =
        'translateX(' + (tab.offsetLeft - tabs[0].offsetLeft) + 'px) scaleX(' + ratio + ')';
    });
  });
})();

.nuda-cp2-mode-prefix {
  width: 300px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  animation: nuda-cp2-mode-prefix-in .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}

.nuda-cp2-mode-prefix__modes {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
}

.nuda-cp2-mode-prefix__mode {
  appearance: none;
  background: none;
  border: none;
  padding: 6px 8px 10px;
  font: 600 11px ui-sans-serif,system-ui;
  color: #777;
  cursor: pointer;
  transition: color .2s;
}

.nuda-cp2-mode-prefix__mode:hover {
  color: #cfcfcf;
}

.nuda-cp2-mode-prefix__mode--active {
  color: #e4ff54;
}

.nuda-cp2-mode-prefix__mode:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-cp2-mode-prefix__indicator {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #e4ff54;
  border-radius: 2px;
  transform-origin: left;
  transform: translateX(0) scaleX(1);
  animation: nuda-cp2-mode-prefix-glow 2.2s ease-in-out infinite;
}

.nuda-cp2-mode-prefix__input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 6px;
}

.nuda-cp2-mode-prefix__prefix {
  font: 700 13px ui-monospace,monospace;
  color: #e4ff54;
}

.nuda-cp2-mode-prefix__query {
  flex: 1;
  font: 500 12px ui-sans-serif,system-ui;
  color: #fafafa;
}

.nuda-cp2-mode-prefix__caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  background: #e4ff54;
  animation: nuda-cp2-mode-prefix-caret 1s steps(2) infinite;
}

@keyframes nuda-cp2-mode-prefix-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nuda-cp2-mode-prefix-glow {
  0%,100% {
    box-shadow: 0 0 0 rgba(228,255,84,0);
  }
  50% {
    box-shadow: 0 0 8px rgba(228,255,84,.7);
  }
}

@keyframes nuda-cp2-mode-prefix-caret {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cp2-mode-prefix,.nuda-cp2-mode-prefix__indicator,.nuda-cp2-mode-prefix__caret {
    animation: none !important;
  }
}