File Tree With Drag Handles

<!-- Visual affordance only. The grip shows where a drag would start (cursor-grab)
     and reveals on hover/focus; it is aria-hidden because a screen reader must
     not be told about a gesture it cannot perform. Wire real reordering to your
     own DnD layer (dnd-kit, HTML5 drag events, etc.). -->
<nav class="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">
  <ul role="tree" aria-label="Reorderable files" class="space-y-0.5">
    <li role="treeitem">
      <div class="group flex min-w-0 select-none items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-900">
        <span class="shrink-0 cursor-grab text-gray-300 opacity-0 group-hover:opacity-100 dark:text-gray-600" aria-hidden="true"><svg viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4"><circle cx="6" cy="4" r="1.2"/><circle cx="10" cy="4" r="1.2"/><circle cx="6" cy="8" r="1.2"/><circle cx="10" cy="8" r="1.2"/><circle cx="6" cy="12" r="1.2"/><circle cx="10" cy="12" r="1.2"/></svg></span>
        <svg viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 shrink-0 text-gray-400" aria-hidden="true"><path d="M4 1.5h4.6L13 5.9V14a.5.5 0 0 1-.5.5h-8A.5.5 0 0 1 4 14V2a.5.5 0 0 1 .5-.5z"/></svg>
        <span class="truncate">canvas.json</span>
      </div>
    </li>
  </ul>
</nav>