Class MJPageHeaderInteriorComponent

<mj-page-header-interior> — Interior-chrome sibling of <mj-page-header>.

Same slot conventions as <mj-page-header> ([meta] / [actions] / [toolbar]) so consumers learn one set of names for both surfaces. Different visual shape: a single-row card with surface background + radius + shadow that sits at the top of a sub-page's body, NOT a page-level chrome band.

Use this when a sub-page renders inside a left-nav shell that already owns the page-level <mj-page-header> — the rail's active-item highlight is the section indicator, so the sub-page doesn't need its own title row; just the filter / action surface in a clean card.

Layout

Two-row card. The primary row has an identity column on the left (Title → Subtitle → Meta, stacked) and an actions cluster on the right; the toolbar row holds dense controls (search, tab nav, filter chips) that would compete with the title for space if they shared a row. When [toolbar] has no projected content, the row collapses entirely.

┌─────────────────────────────────────────────────────────────────────────┐
│ Title                                  [—— spacer ——]         [actions] │
│ subtitle                                                                 │
│ [meta]                                                                   │
├─────────────────────────────────────────────────────────────────────────┤
│ [ toolbar content … search / tab-nav / filter chips … ]                  │
└─────────────────────────────────────────────────────────────────────────┘
Copy

• [Title] (input, optional) — short page name. Usually redundant with the parent shell's left-rail label; most sub-pages still set it as a visual anchor.
• [Subtitle] (input, optional) — short prose explaining what the page does. Recommended for pages that aren't self-explanatory from the rail label alone (e.g. Dev Tools inspectors).
• [meta] — below the subtitle, inside the identity column: status badges, result counts, stat pills. Reads as supporting info for the identity (not a peer of the title), so the title stays the dominant visual anchor. Wraps to multiple lines when there are many badges.
• [toolbar] — second row: search, tab nav, filter chips, view toggles
• [actions] — top row, right edge: filter popover, refresh, secondary buttons, primary CTA

Example

<mj-page-header-interior Subtitle="Read-only snapshot of Explorer runtime state">
  <div toolbar>
    <mj-page-search [Value]="searchTerm" (ValueChange)="onSearch($event)" />
    <mj-filter-chip Label="Active" [Active]="status === 'active'"
                    (Clicked)="setStatus('active')" />
  </div>
  <div actions>
    <mj-filter-popover ...><mj-filter-panel ...></mj-filter-panel></mj-filter-popover>
    <mj-refresh-button [Loading]="isLoading" (Clicked)="refresh()" />
    <button mjButton variant="primary" size="sm">+ Add</button>
  </div>
</mj-page-header-interior>
Copy

See Section 10 of plans/explorer-chrome-conventions.md for the full "interior chrome" contract.