عرض الشجرة الهرمي Treeview

<!-- Qahera UI Kit - Master Treeview Showcase -->
<div style="display: flex; flex-direction: column; gap: 32px; width: 100%;">

  <div>
    <h3 style="font-family: var(--q-font-heading); font-size: 1.1rem; margin-block-end: 16px; color: var(--q-text-primary);">1. شجرة الملفات والمجلدات المعمارية (Architectural File Tree)</h3>
    <div style="background: var(--q-surface); padding: 24px; border-radius: 16px; border: 1px solid var(--q-border); max-width: 420px;">
      <ul class="qhr-treeview">
        <li class="qhr-treeview-item" data-expanded="true">
          <div class="qhr-treeview-node" onclick="toggleTreeNode(this)">
            <span class="qhr-treeview-toggle" data-expanded="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            </span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--q-gold);"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
            <span>qahera-ui-kit</span>
          </div>
          <ul class="qhr-treeview-children">
            <li class="qhr-treeview-item">
              <div class="qhr-treeview-node" data-selected="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                <span>SPEC.md</span>
              </div>
            </li>
            <li class="qhr-treeview-item">
              <div class="qhr-treeview-node">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                <span>AGENTS.md</span>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

</div>

<script>
function toggleTreeNode(node) {
  const item = node.closest('.qhr-treeview-item');
  const toggle = node.querySelector('.qhr-treeview-toggle');
  const isExp = item.getAttribute('data-expanded') === 'true';
  item.setAttribute('data-expanded', !isExp);
  toggle.setAttribute('data-expanded', !isExp);
}
</script>