In Page Header Component

Canonical page header at the top of every list / browse / content management page. Left column: breadcrumb stacked above a title (or just the title on top-level pages). Right cluster: optional section-global search, at most one primary action button, optional ellipsis overflow menu. Sticky-pinned to the top of its scroll container with a 1px bottom rule. Page-scoped controls (search, filter, sort, view-toggle) DO NOT belong here — they live in the Page Toolbar below. Section-global search is a different control and may live in the right cluster via the globalSearch config. NEVER hardcode In Page Header HTML — always use the .bsn-in-page-header-mount mount point.

With breadcrumb + single primary action

With breadcrumb + primary action + overflow menu

With back button — for return-to-task from a search/filter result

No breadcrumb — top-level page (height-matched to nav-sidebar-header)

With section-global search New — chrome wayfinding, leftmost in the right cluster

Pass globalSearch: { id, placeholder, ariaLabel?, kbd? } to render a 260px search input as the leftmost item in the right cluster. This is the canonical home for section-global search (e.g. an entire Learning section, not just this page) — it stays in a stable position across every page within the section. Suppressed in sections where it doesn't apply by simply not passing the config. The ⌘K hint inside the input is a promise — pages MUST bind Cmd/Ctrl+K to focus the input. See accessibility.md → Keyboard Accelerators.

With section-global search + primary action New — search composes with existing right-cluster items

Page Toolbar Component

The page-level filter bar rendered via buildPageToolbar(). Sits directly beneath the In Page Header (see Navigation System). Layout: search + Filters cluster on the LEFT as the scope-narrowing controls; sort + viewToggle + optional Export live on the RIGHT. Export is opt-in — most list / browse surfaces don't need it; configure it only when exporting the current view makes sense for the user. Title / chip / primary action buttons are not part of this component — they belong in the In Page Header above. NEVER hardcode page-toolbar HTML — always use the .bsn-page-toolbar-mount mount point.

Full toolbar — search · sort · view toggle · Filters (drawer) · Export · active chips

Minimal toolbar — search · sort · Filters (popover) · compact chips maxInline: 1

Search + Filters (popover) only · chips maxInline: 3

Pill Tabs — second-row layout · Filters (popover) · active chips

When the first row carries search or filters, pill-tabs drop to a full-width second row beneath it, divided by a 1px rule. Use when pill-tabs are an additional always-visible single-select dimension on top of free-text search or multi-dimensional filters (marketplaces, content libraries).

Pill Tabs — inline-left layout

When the toolbar has no search and no filters, pill-tabs render INSIDE the toolbar's left cluster as the page's primary control. Single row, no divider. Use when pill-tabs ARE the primary control on the page (browse-by-category surfaces, type pickers). The layout is auto-selected — same pillTabs config, different layout based on context. Force a specific layout with pillTabs.layout: "inline" | "row".

Filters Component

The single canonical filter mechanism in the design system, rendered via buildFilters(). Surfaces in two modes — drawer (right-side panel with scrim, for page-level scope) and popover (anchored panel, for widget-level scope). Same body in both modes: a stack of collapsible sections with field types including select, multi-search (typeahead + checklist), pill-group, toggle, range. Apply commits draft state to applied state and re-queries; sections collapse by default when at default value and expand when set. NEVER hardcode filter UI — always use the .bsn-filters-mount mount point.

Visual reference — open drawer & popover

Static side-by-side of the drawer (page-level scope) and the popover (widget-level scope) in their open state, with one section expanded showing each field type. Both renderings share the same body atoms — only the chrome (width, scrim, anchor) differs.

Drawer mode · page-level scope

Popover mode · widget-level scope

Report Scope Bar Component

A slim, sticky row that scopes a report's payload on §14.2 / §14.3 pages, rendered via buildReportScopeBar(). Composes the Date menu button, date caption, buildActiveFilters, the buildFilters drawer trigger, and an Export menu. Lives in the scroll content (NOT inside the In Page Header zone) and sticky-pins beneath the header at top: 4.8125rem. NEVER hardcode scope-bar HTML.

Full bar — date menu, active-filter chips, Filter drawer trigger, Export menu

Try it: open the date menu, open the filter drawer and apply a couple of dimensions, then watch chips appear and the Filter badge count up. Open the export menu to see CSV / PDF / Copy link.

14.1.1 — Standard Page Template Layout

The canonical layout for a non-agentic, non-reporting content page — list / browse / content management. Primary nav fixed left, scrollable Salt content area with an In Page Header (breadcrumb + title + right-anchored actions), a Page Toolbar (search + Filters drawer-trigger + sort + view toggle), and a content body that renders the same items as both a grid of content cards and a list/table view. The view toggle in the Page Toolbar switches between them in place. No BrainStorm AI bar, no KPI strips, no charts — this is the simpler counterpart to §14.2 / §14.3 for pages that don't need them.

14.2 — Report Page Template Layout

The canonical layout for a data visualization report page — e.g. Flow Adoption (in the demo below), which sits as a sibling of Summary and AI Insights under the Reporting primary nav item. Primary nav fixed left, scrollable Salt content area with structured report zones. The content area follows a top-to-bottom analytical narrative: context → KPIs → trends → breakdowns → detail. The page header uses the In Page Header component — just the title; no inline header actions — and every scope / export / filter control lives in the Report Scope Bar directly below the header. The §12.3 BrainStorm AI input bar is intentionally not mounted on report pages (reports are static, not conversation surfaces). For an agentic, conversation-driven analytical surface, use §14.3 AI Insights Page Template instead.

14.3 — AI Insights Page Template Agentic

The AI Insights page is a conversation-driven report surface. A user prompt triggers BrainStorm AI to generate a structured response: an agent summary, an AI-generated report section, and recommended action items — followed by a Chat Follow-Up Footer with suggested next steps. Unlike the standard Report Page Template, the content is generated on demand and the primary CTA is starting a new chat.

14.4 — Agentic Page Layout Template Agentic

The canonical layout for any page that surfaces BrainStorm AI. Sidebar = Alpine dark, 270px, full height · Content column = flex:1; display:flex; flex-direction:column; overflow:hidden · Scroll area = flex:1; overflow-y:auto · In Page Header (§11) sits at the top of the scroll area via .bsn-in-page-header-mount and pins with position:sticky · BrainStorm AI bar (§12.3) = flex-shrink:0 pinned to bottom of the flex column via .bsn-storm-mount — no position:fixed needed. All three shells (header, breadcrumb, storm bar) are mounted via builders — never hardcoded.

Global Search Typeahead Component

Grouped-suggestions popover that pairs with the In Page Header globalSearch input. Owns matching, grouping, focused-row state, match highlighting, and the "See all results" submit handoff. Mount via .bsn-global-search-typeahead-mount + buildGlobalSearchTypeahead(), or attach imperatively via window.bsnGlobalSearchTypeahead(cfg) when you need real function references for onSubmit / onSelect. Try typing "excel", "pivot", "salesforce", or "slack" below — note arrow keys to navigate, Enter to select the focused row, Esc to close. The description snippet under a result surfaces only when the match was found in the description (not the title) — so it's clear why that row is here. The See all footer fires onSubmit(query) on click or Enter-without-focus.

window.addEventListener('DOMContentLoaded', function () {
  window.bsnGlobalSearchTypeahead({
    anchor: '#global-search-typeahead-demo-input',
    groupOrder: ['Apps', 'Content'],
    seeAllLabel: 'See all {n} results for "{q}"',
    emptyLabel: 'No matches for "{q}"',
    index: [
      { kind:'Apps',    title:'Microsoft Excel',
        meta:'Microsoft 365 · 18 courses', icon:'fa-cube',
        onSelect: q => demoResult('Selected app: Microsoft Excel') },
      { kind:'Apps',    title:'Salesforce',
        meta:'CRM · 12 courses', icon:'fa-cube',
        onSelect: q => demoResult('Selected app: Salesforce') },
      { kind:'Apps',    title:'Slack',
        meta:'Collaboration · 9 courses', icon:'fa-cube',
        onSelect: q => demoResult('Selected app: Slack') },
      { kind:'Content', title:'Excel — Pivot tables',
        description:'Summarize, group, and explore data interactively',
        meta:'Flow · 12 min', icon:'fa-diagram-project',
        onSelect: q => demoResult('Opened content: Excel — Pivot tables') },
      { kind:'Content', title:'VLOOKUP & XLOOKUP fundamentals',
        description:'Look up values across sheets with confidence',
        meta:'Guide · 8 min', icon:'fa-book',
        onSelect: q => demoResult('Opened content: VLOOKUP fundamentals') },
      { kind:'Content', title:'Salesforce — Opportunity stages',
        description:'How pipeline progresses through your funnel',
        meta:'Video · 9 min', icon:'fa-video',
        onSelect: q => demoResult('Opened content: Opportunity stages') }
    ],
    onSubmit: function (q) { demoResult('Submitted: "' + q + '" → results page'); }
  });
});