Inline Preview Pane

<!-- Inline Preview Pane — results list beside a live preview of the active item -->
<div class="nuda-cp2-preview-pane" role="dialog" aria-label="Command palette with preview">
  <ul class="nuda-cp2-preview-pane__list" role="listbox" aria-label="Results">
    <li class="nuda-cp2-preview-pane__opt nuda-cp2-preview-pane__opt--active" role="option" aria-selected="true">index.tsx</li>
    <li class="nuda-cp2-preview-pane__opt" role="option" aria-selected="false">App.tsx</li>
    <li class="nuda-cp2-preview-pane__opt" role="option" aria-selected="false">styles.css</li>
  </ul>
  <div class="nuda-cp2-preview-pane__panel" aria-hidden="true">
    <div class="nuda-cp2-preview-pane__panel-head">index.tsx</div>
    <div class="nuda-cp2-preview-pane__panel-line" style="width: 80%"></div>
    <div class="nuda-cp2-preview-pane__panel-line" style="width: 60%"></div>
    <div class="nuda-cp2-preview-pane__panel-line" style="width: 70%"></div>
  </div>
</div>

.nuda-cp2-preview-pane {
  width: 300px;
  height: 140px;
  display: flex;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}

.nuda-cp2-preview-pane__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  width: 120px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.nuda-cp2-preview-pane__opt {
  padding: 6px 8px;
  font: 500 11px ui-sans-serif,system-ui;
  color: #777;
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s,color .15s;
}

.nuda-cp2-preview-pane__opt:hover {
  background: rgba(255,255,255,.05);
  color: #cfcfcf;
}

.nuda-cp2-preview-pane__opt--active {
  background: rgba(228,255,84,.1);
  color: #e4ff54;
}

.nuda-cp2-preview-pane__panel {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: nuda-cp2-preview-pane-in .35s cubic-bezier(.4,0,.2,1);
}

.nuda-cp2-preview-pane__panel-head {
  font: 700 10px ui-sans-serif,system-ui;
  color: #fafafa;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.nuda-cp2-preview-pane__panel-line {
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(228,255,84,.15) 50%,rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: nuda-cp2-preview-pane-shimmer 1.6s ease-in-out infinite;
}

@keyframes nuda-cp2-preview-pane-in {
  from {
    opacity: 0;
    transform: translateX(6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes nuda-cp2-preview-pane-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cp2-preview-pane__panel,.nuda-cp2-preview-pane__panel-line {
    animation: none !important;
  }
}