Navbar Toolbar

<header class="ws-navbar sticky top-0 z-50 border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]">
  <div class="mx-auto flex max-w-7xl items-center gap-2 px-3 py-2">
    <!-- Brand -->
    <a href="#" aria-label="Webspire home" class="flex h-9 w-9 items-center justify-center rounded-md bg-[var(--ws-navbar-active)] text-white">
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
    </a>
    <span class="mx-1 h-6 w-px bg-[var(--ws-navbar-border)]" aria-hidden="true"></span>

    <!-- Primary tool group -->
    <div role="toolbar" aria-label="Editor tools" class="flex items-center gap-1">
      <button type="button" title="New file" aria-label="New file" class="flex h-9 w-9 items-center justify-center rounded-md text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
      </button>
      <button type="button" title="Open" aria-label="Open" class="flex h-9 w-9 items-center justify-center rounded-md text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
      </button>
      <button type="button" title="Save" aria-label="Save" class="flex h-9 w-9 items-center justify-center rounded-md text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
      </button>
    </div>
    <span class="mx-1 h-6 w-px bg-[var(--ws-navbar-border)]" aria-hidden="true"></span>

    <!-- Formatting tool group -->
    <div role="toolbar" aria-label="Formatting" class="flex items-center gap-1">
      <button type="button" title="Bold" aria-label="Bold" class="flex h-9 w-9 items-center justify-center rounded-md font-bold text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">B</button>
      <button type="button" title="Italic" aria-label="Italic" class="flex h-9 w-9 items-center justify-center rounded-md italic text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">I</button>
      <button type="button" title="Link" aria-label="Insert link" class="flex h-9 w-9 items-center justify-center rounded-md text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 010 5.656l-3 3a4 4 0 11-5.656-5.656l1.5-1.5M10.172 13.828a4 4 0 010-5.656l3-3a4 4 0 115.656 5.656l-1.5 1.5"/></svg>
      </button>
    </div>

    <!-- Right group -->
    <div class="ml-auto flex items-center gap-1">
      <button type="button" title="Settings" aria-label="Settings" class="flex h-9 w-9 items-center justify-center rounded-md text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      </button>
      <button type="button" aria-label="Account" class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--ws-navbar-hover-bg)] text-sm font-semibold text-[var(--ws-navbar-text)]">JS</button>
    </div>
  </div>
</header>