@let n = node();
<!--
  Header, flat identity strip with a left kind-accent rail: a small kind
  eyebrow on top, then the icon-box (kind tint) beside the name (with the
  version chip and stability tag), the path + meta strip below, and the
  actions cluster (favorite, view-contribution badges) on the right. The
  stale signal is no longer hardcoded: it now arrives as a contribution
  on the unified `inspector.header.badge` slot (emitted by
  `core/annotation-stale`). The action toolbar (bump / refresh) lives in
  the parent so the header stays a pure read-only identity block.
  `--accent` is inherited from the `.inspector` root, the single
  kind->colour source for the panel.
-->
<header
  class="inspector__header"
  data-testid="inspector-title"
>
  <span class="inspector__kind-eyebrow" data-testid="inspector-kind-chip">{{ n.kind }}</span>

  <div class="inspector__icon-box" aria-hidden="true">
    <sm-kind-icon [kind]="n.kind" [provider]="n.provider" [size]="18" />
  </div>

  <div class="inspector__content">
    <div class="inspector__name-row">
      <h2 class="inspector__name" data-testid="inspector-title-text">{{ headerName() }}</h2>
      @if (frontmatterInvalid()) {
        <span
          class="inspector__fm-invalid"
          [pTooltip]="texts.header.invalidFrontmatterTooltip"
          data-testid="inspector-fm-invalid"
        >
          <i class="pi pi-exclamation-triangle" aria-hidden="true"></i>
          {{ texts.header.invalidFrontmatter }}
        </span>
      }
      @if (headerVersion(); as v) {
        <span class="inspector__name-version" data-testid="inspector-version">{{ v }}</span>
      }
      @if (headerStability(); as s) {
        <span
          class="inspector__stability"
          [attr.data-stability]="s"
          data-testid="inspector-stability-tag"
        >
          <span class="inspector__stability-dot" aria-hidden="true">●</span>
          {{ s }}
        </span>
      }
    </div>
    <code class="inspector__path-code" data-testid="inspector-path">{{ n.path }}</code>
  </div>

  <div class="inspector__actions-cluster">
    <button
      type="button"
      class="inspector__favorite"
      [class.inspector__favorite--on]="n.isFavorite === true"
      [attr.aria-label]="n.isFavorite === true ? cardTexts.ariaFavoriteRemove : cardTexts.ariaFavoriteAdd"
      [pTooltip]="n.isFavorite === true ? cardTexts.favoriteRemoveTooltip : cardTexts.favoriteAddTooltip"
      (click)="onFavoriteClick($event)"
      data-testid="inspector-favorite"
    >
      <i
        class="pi"
        [class.pi-star-fill]="n.isFavorite === true"
        [class.pi-star]="n.isFavorite !== true"
        aria-hidden="true"
      ></i>
    </button>
    <!--
      View contribution system, unified header badge slot. Renders every
      badge contribution for the active node (icon and/or label and/or
      count, optional severity), including the stale badge emitted by
      `core/annotation-stale`. Caps at
      SLOT_REGISTRY['inspector.header.badge'].maxItems = 4, priority order.
    -->
    <sm-view-contributions-host slot="inspector.header.badge" [node]="n" />
  </div>

  <!--
    Tags row, sidecar-curated `annotations.tags`, delegated to
    `<sm-node-tags>`: it renders the clickable filter chips (each click
    forwarded up via `tagClick` -> host -> graph `onTagSelect`, with the
    active one highlighted) plus the inline editor (pencil -> add / remove,
    dispatching `core/node-set-tags`). The header stays read-only and only
    re-emits `tagClick`; the row always mounts so a tagless node can still
    gain its first tag.
  -->
  <sm-node-tags
    [tags]="headerTags()"
    [activeTag]="activeTag()"
    [nodePath]="n.path"
    (tagClick)="tagClick.emit($event)"
  />
</header>