File Tree

<!-- File Tree — toggle .is-open on folders to expand/collapse -->
<ul class="nuda-tree">
  <li class="is-folder is-open">
    <span class="nuda-tree__row">
      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 4.5 L6 7.5 L9 4.5" />
      </svg>
      <span class="nuda-tree__icon">📁</span>src
    </span>
    <ul>
      <li><span class="nuda-tree__row"><span class="nuda-tree__icon">●</span>app.tsx</span></li>
      <li><span class="nuda-tree__row"><span class="nuda-tree__icon">●</span>main.tsx</span></li>
    </ul>
  </li>
  <li>
    <span class="nuda-tree__row"><span class="nuda-tree__icon">●</span>package.json</span>
  </li>
</ul>

/* File Tree
   Collapsible tree with rotating chevron + dashed connectors.
   Customize: --tree-accent, --tree-bg */

.nuda-tree {
  --tree-accent: #e4ff54;
  --tree-bg: #0a0a0a;
  list-style: none;
  padding: 10px 12px;
  margin: 0;
  font: 500 0.85rem ui-monospace, monospace;
  background: var(--tree-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  width: 100%;
  max-width: 280px;
}

.nuda-tree ul {
  list-style: none;
  padding: 0 0 0 16px;
  margin: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.3s ease;
}

.nuda-tree li:not(.is-open) > ul { max-height: 0; }

.nuda-tree__row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  color: #a1a1aa;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.nuda-tree__row:hover {
  background: rgba(228, 255, 84, 0.06);
  color: #fafafa;
}

.nuda-tree__row svg {
  width: 10px;
  height: 10px;
  color: #63636e;
  transition: transform 0.25s;
}

.nuda-tree__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: var(--tree-accent);
  font-size: 0.6rem;
}

.is-folder.is-open  > .nuda-tree__row svg { transform: rotate(0deg); }
.is-folder:not(.is-open) > .nuda-tree__row svg { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .nuda-tree ul,
  .nuda-tree__row svg { transition: none; }
}