Add CV Maker template gallery page

Builds out the CV Maker sidebar destination with a light-theme template
gallery: header, Design-Based vs Profession-Based pill toggle, family
chips with live counts, a 4-column thumbnail grid with hover Preview
overlay, and a sticky "Use Template & Select Profile" CTA. Catalog ships
30 templates (six Minimal variants matching the reference layout plus
six per Professional/Modern/Creative/Executive family) with varied
headline, accent, sidebar, and section-label styles driven by a single
mini-preview renderer. Sidebar routing now hides the generic placeholder
when CV Maker is selected and shows the new container alongside Saved
Jobs and Settings.

Co-authored-by: Cursor <cursoragent@cursor.com>

App for Indeed/Views/CVMakerPageView.swift

@@ -0,0 +1,1578 @@
+//
+//  CVMakerPageView.swift
+//  App for Indeed
+//
+//  Template gallery for the CV Maker sidebar destination. Light-theme rendering
+//  inspired by a dark reference UI: page header, category toggle, style chips,
+//  4-column thumbnail grid with hover Preview overlay, and a sticky bottom CTA.
+//
+
+import Cocoa
+
+// MARK: - Data model
+
+enum CVCategoryGroup: Hashable {
+    case designBased
+    case professionBased
+
+    var title: String {
+        switch self {
+        case .designBased: return "Design-Based"
+        case .professionBased: return "Profession-Based"
+        }
+    }
+}
+
+enum CVDesignFamily: String, CaseIterable, Hashable {
+    case professional, modern, creative, minimal, executive
+
+    var title: String {
+        switch self {
+        case .professional: return "Professional"
+        case .modern: return "Modern"
+        case .creative: return "Creative"
+        case .minimal: return "Minimal"
+        case .executive: return "Executive"
+        }
+    }
+}
+
+/// Visual recipe used by the mini preview renderer so every template can vary
+/// the headline style, accent line, and sidebar layout without bespoke views.
+struct CVTemplate: Hashable {
+    enum Headline: Hashable {
+        /// Big name centered above the body.
+        case centered
+        /// Name aligned to the leading edge, role beneath it.
+        case leftAligned
+        /// Name on the leading edge with circular initials avatar on the trailing edge.
+        case leftWithInitials
+        /// Initials avatar above a centered name (single column).
+        case avatarStacked
+    }
+
+    enum Accent: Hashable {
+        case none
+        case redUnderline
+        case redBar
+        case blueBar
+    }
+
+    enum SidebarSide: Hashable { case leading, trailing }
+    enum Layout: Hashable {
+        case singleColumn
+        case twoColumn(sidebar: SidebarSide, tinted: Bool)
+    }
+
+    enum SectionLabelStyle: Hashable {
+        case uppercase
+        case slashed   // "// EXPERIENCE"
+        case bracketed // "[ EXPERIENCE ]"
+    }
+
+    let id: String
+    let name: String
+    let family: CVDesignFamily
+    let headline: Headline
+    let accent: Accent
+    let layout: Layout
+    let sectionLabelStyle: SectionLabelStyle
+}
+
+// MARK: - Catalog
+
+enum CVTemplateCatalog {
+    static let all: [CVTemplate] = [
+        // Minimal family (matches the reference screenshot)
+        CVTemplate(
+            id: "paper-white",
+            name: "Paper White",
+            family: .minimal,
+            headline: .centered,
+            accent: .none,
+            layout: .singleColumn,
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "swiss",
+            name: "Swiss",
+            family: .minimal,
+            headline: .centered,
+            accent: .redUnderline,
+            layout: .twoColumn(sidebar: .leading, tinted: false),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "mono",
+            name: "Mono",
+            family: .minimal,
+            headline: .leftAligned,
+            accent: .redUnderline,
+            layout: .singleColumn,
+            sectionLabelStyle: .slashed
+        ),
+        CVTemplate(
+            id: "airy",
+            name: "Airy",
+            family: .minimal,
+            headline: .leftWithInitials,
+            accent: .none,
+            layout: .twoColumn(sidebar: .trailing, tinted: false),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "tabular",
+            name: "Tabular",
+            family: .minimal,
+            headline: .leftAligned,
+            accent: .none,
+            layout: .singleColumn,
+            sectionLabelStyle: .bracketed
+        ),
+        CVTemplate(
+            id: "facet",
+            name: "Facet",
+            family: .minimal,
+            headline: .avatarStacked,
+            accent: .none,
+            layout: .twoColumn(sidebar: .leading, tinted: true),
+            sectionLabelStyle: .uppercase
+        ),
+
+        // Professional family
+        CVTemplate(
+            id: "corporate",
+            name: "Corporate",
+            family: .professional,
+            headline: .leftAligned,
+            accent: .blueBar,
+            layout: .singleColumn,
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "atlas",
+            name: "Atlas",
+            family: .professional,
+            headline: .centered,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .leading, tinted: true),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "ledger",
+            name: "Ledger",
+            family: .professional,
+            headline: .leftAligned,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .trailing, tinted: false),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "harbor",
+            name: "Harbor",
+            family: .professional,
+            headline: .leftWithInitials,
+            accent: .none,
+            layout: .twoColumn(sidebar: .leading, tinted: true),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "metro",
+            name: "Metro",
+            family: .professional,
+            headline: .centered,
+            accent: .blueBar,
+            layout: .singleColumn,
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "pinstripe",
+            name: "Pinstripe",
+            family: .professional,
+            headline: .leftAligned,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .leading, tinted: false),
+            sectionLabelStyle: .uppercase
+        ),
+
+        // Modern family
+        CVTemplate(
+            id: "vertex",
+            name: "Vertex",
+            family: .modern,
+            headline: .leftWithInitials,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .leading, tinted: true),
+            sectionLabelStyle: .slashed
+        ),
+        CVTemplate(
+            id: "linea",
+            name: "Linea",
+            family: .modern,
+            headline: .leftAligned,
+            accent: .blueBar,
+            layout: .singleColumn,
+            sectionLabelStyle: .slashed
+        ),
+        CVTemplate(
+            id: "prism",
+            name: "Prism",
+            family: .modern,
+            headline: .avatarStacked,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .trailing, tinted: true),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "circuit",
+            name: "Circuit",
+            family: .modern,
+            headline: .leftAligned,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .trailing, tinted: false),
+            sectionLabelStyle: .slashed
+        ),
+        CVTemplate(
+            id: "north",
+            name: "North",
+            family: .modern,
+            headline: .leftWithInitials,
+            accent: .none,
+            layout: .twoColumn(sidebar: .leading, tinted: false),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "axis",
+            name: "Axis",
+            family: .modern,
+            headline: .centered,
+            accent: .blueBar,
+            layout: .singleColumn,
+            sectionLabelStyle: .bracketed
+        ),
+
+        // Creative family
+        CVTemplate(
+            id: "marigold",
+            name: "Marigold",
+            family: .creative,
+            headline: .avatarStacked,
+            accent: .redBar,
+            layout: .twoColumn(sidebar: .leading, tinted: true),
+            sectionLabelStyle: .slashed
+        ),
+        CVTemplate(
+            id: "ember",
+            name: "Ember",
+            family: .creative,
+            headline: .leftWithInitials,
+            accent: .redBar,
+            layout: .twoColumn(sidebar: .trailing, tinted: true),
+            sectionLabelStyle: .slashed
+        ),
+        CVTemplate(
+            id: "lattice",
+            name: "Lattice",
+            family: .creative,
+            headline: .leftAligned,
+            accent: .redUnderline,
+            layout: .singleColumn,
+            sectionLabelStyle: .bracketed
+        ),
+        CVTemplate(
+            id: "bloom",
+            name: "Bloom",
+            family: .creative,
+            headline: .avatarStacked,
+            accent: .redBar,
+            layout: .singleColumn,
+            sectionLabelStyle: .slashed
+        ),
+        CVTemplate(
+            id: "studio",
+            name: "Studio",
+            family: .creative,
+            headline: .leftWithInitials,
+            accent: .redUnderline,
+            layout: .twoColumn(sidebar: .leading, tinted: true),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "kite",
+            name: "Kite",
+            family: .creative,
+            headline: .centered,
+            accent: .redBar,
+            layout: .twoColumn(sidebar: .trailing, tinted: false),
+            sectionLabelStyle: .slashed
+        ),
+
+        // Executive family
+        CVTemplate(
+            id: "regent",
+            name: "Regent",
+            family: .executive,
+            headline: .centered,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .leading, tinted: true),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "monarch",
+            name: "Monarch",
+            family: .executive,
+            headline: .centered,
+            accent: .blueBar,
+            layout: .singleColumn,
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "sterling",
+            name: "Sterling",
+            family: .executive,
+            headline: .leftAligned,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .trailing, tinted: false),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "summit",
+            name: "Summit",
+            family: .executive,
+            headline: .centered,
+            accent: .redUnderline,
+            layout: .twoColumn(sidebar: .leading, tinted: false),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "estate",
+            name: "Estate",
+            family: .executive,
+            headline: .leftWithInitials,
+            accent: .blueBar,
+            layout: .twoColumn(sidebar: .trailing, tinted: true),
+            sectionLabelStyle: .uppercase
+        ),
+        CVTemplate(
+            id: "chairman",
+            name: "Chairman",
+            family: .executive,
+            headline: .leftAligned,
+            accent: .blueBar,
+            layout: .singleColumn,
+            sectionLabelStyle: .uppercase
+        )
+    ]
+}
+
+// MARK: - View
+
+/// Standalone NSView for the CV Maker route. Renders the template gallery with
+/// header, segmented category groups, family chips, a thumbnail grid, and a
+/// bottom CTA. Hosts inside the same `nonHomeHost` slot as Saved Jobs/Settings.
+final class CVMakerPageView: NSView {
+
+    /// Light-theme palette aligned with the rest of the dashboard (brand blue + neutral grays on white).
+    private enum Palette {
+        static let pageBackground = NSColor(srgbRed: 1, green: 1, blue: 1, alpha: 1)
+        static let mutedSurface = NSColor(srgbRed: 247 / 255, green: 247 / 255, blue: 247 / 255, alpha: 1)
+        static let chipRestFill = NSColor(srgbRed: 244 / 255, green: 246 / 255, blue: 250 / 255, alpha: 1)
+        static let chipBorder = NSColor(srgbRed: 222 / 255, green: 226 / 255, blue: 233 / 255, alpha: 1)
+        static let chipHoverFill = NSColor(srgbRed: 236 / 255, green: 240 / 255, blue: 246 / 255, alpha: 1)
+        static let chipBadgeBackground = NSColor(srgbRed: 233 / 255, green: 236 / 255, blue: 241 / 255, alpha: 1)
+        static let chipBadgeText = NSColor(srgbRed: 90 / 255, green: 102 / 255, blue: 121 / 255, alpha: 1)
+        static let activeChipBackground = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
+        static let activeChipHover = NSColor(srgbRed: 28 / 255, green: 70 / 255, blue: 140 / 255, alpha: 1)
+        static let activeChipText = NSColor.white
+        static let activeChipBadgeBackground = NSColor.white.withAlphaComponent(0.22)
+        static let activeChipBadgeText = NSColor.white
+        static let primaryText = NSColor(srgbRed: 31 / 255, green: 41 / 255, blue: 55 / 255, alpha: 1)
+        static let secondaryText = NSColor(srgbRed: 100 / 255, green: 116 / 255, blue: 139 / 255, alpha: 1)
+        static let cardBorder = NSColor(srgbRed: 216 / 255, green: 223 / 255, blue: 233 / 255, alpha: 1)
+        static let cardBorderHover = NSColor(srgbRed: 178 / 255, green: 196 / 255, blue: 225 / 255, alpha: 1)
+        static let cardBorderSelected = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
+        static let cardFooter = NSColor(srgbRed: 250 / 255, green: 251 / 255, blue: 253 / 255, alpha: 1)
+        static let previewSurface = NSColor(srgbRed: 252 / 255, green: 252 / 255, blue: 252 / 255, alpha: 1)
+        static let previewPaper = NSColor.white
+        static let previewSidebarTint = NSColor(srgbRed: 244 / 255, green: 246 / 255, blue: 250 / 255, alpha: 1)
+        static let previewInk = NSColor(srgbRed: 38 / 255, green: 50 / 255, blue: 71 / 255, alpha: 1)
+        static let previewMuted = NSColor(srgbRed: 165 / 255, green: 175 / 255, blue: 192 / 255, alpha: 1)
+        static let previewAccentRed = NSColor(srgbRed: 207 / 255, green: 67 / 255, blue: 50 / 255, alpha: 1)
+        static let previewAccentBlue = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
+        static let ctaBackground = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
+        static let ctaHover = NSColor(srgbRed: 28 / 255, green: 70 / 255, blue: 140 / 255, alpha: 1)
+        static let ctaText = NSColor.white
+        static let overlayTint = NSColor.black.withAlphaComponent(0.45)
+    }
+
+    private static let columns: Int = 4
+
+    private let titleLabel = NSTextField(labelWithString: "Templates")
+    private let subtitleLabel = NSTextField(labelWithString: "Browse and select a template for your CV")
+    private let groupTabsRow = NSStackView()
+    private let familyChipsRow = NSStackView()
+    private let scrollView = NSScrollView()
+    private let gridDocument = TopFlippedView()
+    private let gridStack = NSStackView()
+    private let ctaButton = CVHoverableButton(title: "Use Template & Select Profile  →", target: nil, action: nil)
+
+    private var selectedGroup: CVCategoryGroup = .designBased
+    private var selectedFamily: CVDesignFamily? = nil // nil == "All"
+    private var selectedTemplateID: String? = "paper-white"
+    private var groupTabButtons: [CVCategoryGroup: CVChipButton] = [:]
+    private var familyChipButtons: [CVDesignFamily?: CVChipButton] = [:]
+    private var templateCardsByID: [String: CVTemplateCard] = [:]
+
+    override init(frame frameRect: NSRect) {
+        super.init(frame: frameRect)
+        configureLayout()
+        reloadFamilyChips()
+        reloadTemplateGrid()
+        updateSelectedChipStates()
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func layout() {
+        super.layout()
+        // Re-measure the grid in case the container width changed (window resize).
+        layoutGridCardsIfNeeded()
+    }
+
+    // MARK: Setup
+
+    private func configureLayout() {
+        wantsLayer = true
+        layer?.backgroundColor = Palette.pageBackground.cgColor
+
+        titleLabel.font = .systemFont(ofSize: 22, weight: .bold)
+        titleLabel.textColor = Palette.primaryText
+        titleLabel.alignment = .left
+
+        subtitleLabel.font = .systemFont(ofSize: 13, weight: .regular)
+        subtitleLabel.textColor = Palette.secondaryText
+        subtitleLabel.alignment = .left
+        subtitleLabel.maximumNumberOfLines = 1
+
+        let headerStack = NSStackView(views: [titleLabel, subtitleLabel])
+        headerStack.orientation = .vertical
+        headerStack.spacing = 4
+        headerStack.alignment = .leading
+        headerStack.translatesAutoresizingMaskIntoConstraints = false
+
+        groupTabsRow.orientation = .horizontal
+        groupTabsRow.spacing = 8
+        groupTabsRow.alignment = .centerY
+        groupTabsRow.translatesAutoresizingMaskIntoConstraints = false
+        configureGroupTabs()
+
+        familyChipsRow.orientation = .horizontal
+        familyChipsRow.spacing = 8
+        familyChipsRow.alignment = .centerY
+        familyChipsRow.translatesAutoresizingMaskIntoConstraints = false
+
+        gridStack.orientation = .vertical
+        gridStack.spacing = 16
+        gridStack.alignment = .leading
+        gridStack.distribution = .fill
+        gridStack.translatesAutoresizingMaskIntoConstraints = false
+
+        gridDocument.translatesAutoresizingMaskIntoConstraints = false
+        gridDocument.addSubview(gridStack)
+        NSLayoutConstraint.activate([
+            gridStack.leadingAnchor.constraint(equalTo: gridDocument.leadingAnchor),
+            gridStack.trailingAnchor.constraint(equalTo: gridDocument.trailingAnchor),
+            gridStack.topAnchor.constraint(equalTo: gridDocument.topAnchor),
+            gridStack.bottomAnchor.constraint(equalTo: gridDocument.bottomAnchor)
+        ])
+
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
+        scrollView.hasVerticalScroller = true
+        scrollView.hasHorizontalScroller = false
+        scrollView.scrollerStyle = .legacy
+        scrollView.autohidesScrollers = true
+        scrollView.drawsBackground = false
+        scrollView.borderType = .noBorder
+        scrollView.documentView = gridDocument
+        NSLayoutConstraint.activate([
+            gridDocument.topAnchor.constraint(equalTo: scrollView.contentView.topAnchor),
+            gridDocument.leadingAnchor.constraint(equalTo: scrollView.contentView.leadingAnchor),
+            gridDocument.widthAnchor.constraint(equalTo: scrollView.contentView.widthAnchor)
+        ])
+
+        ctaButton.translatesAutoresizingMaskIntoConstraints = false
+        styleCTAButton(ctaButton)
+        ctaButton.target = self
+        ctaButton.action = #selector(didTapUseTemplate)
+
+        addSubview(headerStack)
+        addSubview(groupTabsRow)
+        addSubview(familyChipsRow)
+        addSubview(scrollView)
+        addSubview(ctaButton)
+
+        let horizontalInset: CGFloat = 32
+
+        NSLayoutConstraint.activate([
+            headerStack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
+            headerStack.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -horizontalInset),
+            headerStack.topAnchor.constraint(equalTo: topAnchor, constant: 8),
+
+            groupTabsRow.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
+            groupTabsRow.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -horizontalInset),
+            groupTabsRow.topAnchor.constraint(equalTo: headerStack.bottomAnchor, constant: 18),
+
+            familyChipsRow.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
+            familyChipsRow.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -horizontalInset),
+            familyChipsRow.topAnchor.constraint(equalTo: groupTabsRow.bottomAnchor, constant: 14),
+
+            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
+            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -horizontalInset),
+            scrollView.topAnchor.constraint(equalTo: familyChipsRow.bottomAnchor, constant: 16),
+            scrollView.bottomAnchor.constraint(equalTo: ctaButton.topAnchor, constant: -16),
+
+            ctaButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
+            ctaButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -horizontalInset),
+            ctaButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -24),
+            ctaButton.heightAnchor.constraint(equalToConstant: 50)
+        ])
+    }
+
+    private func configureGroupTabs() {
+        groupTabsRow.arrangedSubviews.forEach {
+            groupTabsRow.removeArrangedSubview($0)
+            $0.removeFromSuperview()
+        }
+        groupTabButtons.removeAll()
+        let groups: [(CVCategoryGroup, String)] = [
+            (.designBased, "rectangle.3.group"),
+            (.professionBased, "person.2")
+        ]
+        for (group, symbolName) in groups {
+            let count = templates(forGroup: group, family: nil).count
+            let chip = CVChipButton(
+                title: group.title,
+                badgeText: "\(count)",
+                leadingSymbol: symbolName,
+                style: .pillLarge
+            )
+            chip.translatesAutoresizingMaskIntoConstraints = false
+            chip.onSelect = { [weak self] in self?.didSelectGroup(group) }
+            groupTabsRow.addArrangedSubview(chip)
+            groupTabButtons[group] = chip
+        }
+    }
+
+    private func reloadFamilyChips() {
+        familyChipsRow.arrangedSubviews.forEach {
+            familyChipsRow.removeArrangedSubview($0)
+            $0.removeFromSuperview()
+        }
+        familyChipButtons.removeAll()
+
+        let allCount = templates(forGroup: selectedGroup, family: nil).count
+        let allChip = CVChipButton(title: "All", badgeText: "\(allCount)", leadingSymbol: nil, style: .pillSmall)
+        allChip.onSelect = { [weak self] in self?.didSelectFamily(nil) }
+        familyChipsRow.addArrangedSubview(allChip)
+        familyChipButtons[nil] = allChip
+
+        for family in CVDesignFamily.allCases {
+            let count = templates(forGroup: selectedGroup, family: family).count
+            let chip = CVChipButton(title: family.title, badgeText: "\(count)", leadingSymbol: nil, style: .pillSmall)
+            chip.onSelect = { [weak self] in self?.didSelectFamily(family) }
+            familyChipsRow.addArrangedSubview(chip)
+            familyChipButtons[family] = chip
+        }
+    }
+
+    // MARK: Data filtering
+
+    private func templates(forGroup group: CVCategoryGroup, family: CVDesignFamily?) -> [CVTemplate] {
+        // The catalog is design-driven; profession-based reuses the same templates
+        // so the gallery is fully populated for both groups in this preview build.
+        let base = CVTemplateCatalog.all
+        guard let family else { return base }
+        _ = group
+        return base.filter { $0.family == family }
+    }
+
+    private var visibleTemplates: [CVTemplate] {
+        templates(forGroup: selectedGroup, family: selectedFamily)
+    }
+
+    // MARK: Grid
+
+    private func reloadTemplateGrid() {
+        gridStack.arrangedSubviews.forEach {
+            gridStack.removeArrangedSubview($0)
+            $0.removeFromSuperview()
+        }
+        templateCardsByID.removeAll()
+
+        let templates = visibleTemplates
+        if templates.isEmpty {
+            let empty = NSTextField(labelWithString: "No templates yet for this category.")
+            empty.font = .systemFont(ofSize: 13)
+            empty.textColor = Palette.secondaryText
+            gridStack.addArrangedSubview(empty)
+            return
+        }
+
+        let columns = Self.columns
+        var index = 0
+        while index < templates.count {
+            let row = NSStackView()
+            row.orientation = .horizontal
+            row.spacing = 16
+            row.distribution = .fillEqually
+            row.alignment = .top
+            row.translatesAutoresizingMaskIntoConstraints = false
+            row.setHuggingPriority(.defaultLow, for: .horizontal)
+
+            for column in 0..<columns {
+                let position = index + column
+                if position < templates.count {
+                    let template = templates[position]
+                    let card = CVTemplateCard(template: template, palette: palette())
+                    card.translatesAutoresizingMaskIntoConstraints = false
+                    card.onSelect = { [weak self] in self?.didSelectTemplate(template.id) }
+                    card.onPreview = { [weak self] in self?.didPreviewTemplate(template.id) }
+                    row.addArrangedSubview(card)
+                    templateCardsByID[template.id] = card
+                } else {
+                    let filler = NSView()
+                    filler.translatesAutoresizingMaskIntoConstraints = false
+                    row.addArrangedSubview(filler)
+                }
+            }
+            gridStack.addArrangedSubview(row)
+            row.widthAnchor.constraint(equalTo: gridStack.widthAnchor).isActive = true
+            index += columns
+        }
+
+        if selectedTemplateID == nil || templateCardsByID[selectedTemplateID ?? ""] == nil {
+            selectedTemplateID = templates.first?.id
+        }
+        applySelectionToCards()
+    }
+
+    private func layoutGridCardsIfNeeded() {
+        // Stack will resize the rows; nothing else to do — kept as a hook for future enhancements.
+    }
+
+    private func applySelectionToCards() {
+        for (id, card) in templateCardsByID {
+            card.isSelected = (id == selectedTemplateID)
+        }
+    }
+
+    private func palette() -> CVTemplateCard.Palette {
+        CVTemplateCard.Palette(
+            border: Palette.cardBorder,
+            borderHover: Palette.cardBorderHover,
+            borderSelected: Palette.cardBorderSelected,
+            footerBackground: Palette.cardFooter,
+            previewSurface: Palette.previewSurface,
+            previewPaper: Palette.previewPaper,
+            previewSidebarTint: Palette.previewSidebarTint,
+            previewInk: Palette.previewInk,
+            previewMuted: Palette.previewMuted,
+            previewAccentRed: Palette.previewAccentRed,
+            previewAccentBlue: Palette.previewAccentBlue,
+            primaryText: Palette.primaryText,
+            secondaryText: Palette.secondaryText,
+            overlayTint: Palette.overlayTint
+        )
+    }
+
+    // MARK: Selection
+
+    private func didSelectGroup(_ group: CVCategoryGroup) {
+        guard selectedGroup != group else { return }
+        selectedGroup = group
+        selectedFamily = nil
+        reloadFamilyChips()
+        reloadTemplateGrid()
+        updateSelectedChipStates()
+    }
+
+    private func didSelectFamily(_ family: CVDesignFamily?) {
+        guard selectedFamily != family else { return }
+        selectedFamily = family
+        reloadTemplateGrid()
+        updateSelectedChipStates()
+    }
+
+    private func didSelectTemplate(_ id: String) {
+        selectedTemplateID = id
+        applySelectionToCards()
+    }
+
+    private func didPreviewTemplate(_ id: String) {
+        selectedTemplateID = id
+        applySelectionToCards()
+        guard let template = CVTemplateCatalog.all.first(where: { $0.id == id }) else { return }
+        presentPlaceholderAlert(
+            title: "Preview \"\(template.name)\"",
+            message: "Full-page previews and PDF export are coming soon."
+        )
+    }
+
+    @objc private func didTapUseTemplate() {
+        guard let id = selectedTemplateID,
+              let template = CVTemplateCatalog.all.first(where: { $0.id == id }) else {
+            presentPlaceholderAlert(title: "Pick a template", message: "Select a template first, then choose a profile to continue.")
+            return
+        }
+        presentPlaceholderAlert(
+            title: "Use \"\(template.name)\"",
+            message: "Profile selection and CV editing are not available in this preview build yet."
+        )
+    }
+
+    private func updateSelectedChipStates() {
+        for (group, chip) in groupTabButtons {
+            chip.isSelected = (group == selectedGroup)
+        }
+        for (family, chip) in familyChipButtons {
+            chip.isSelected = (family == selectedFamily)
+        }
+    }
+
+    private func styleCTAButton(_ button: CVHoverableButton) {
+        button.title = "Use Template & Select Profile  →"
+        button.font = .systemFont(ofSize: 14, weight: .semibold)
+        button.isBordered = false
+        button.bezelStyle = .rounded
+        button.focusRingType = .none
+        button.contentTintColor = Palette.ctaText
+        button.wantsLayer = true
+        button.layer?.cornerRadius = 12
+        button.layer?.backgroundColor = Palette.ctaBackground.cgColor
+        button.pointerCursor = true
+        let attrs: [NSAttributedString.Key: Any] = [
+            .foregroundColor: Palette.ctaText,
+            .font: NSFont.systemFont(ofSize: 14, weight: .semibold)
+        ]
+        button.attributedTitle = NSAttributedString(string: button.title, attributes: attrs)
+        button.hoverHandler = { [weak button] hovering in
+            button?.layer?.backgroundColor = (hovering ? Palette.ctaHover : Palette.ctaBackground).cgColor
+        }
+    }
+
+    private func presentPlaceholderAlert(title: String, message: String) {
+        let alert = NSAlert()
+        alert.messageText = title
+        alert.informativeText = message
+        alert.alertStyle = .informational
+        alert.addButton(withTitle: "OK")
+        if let window {
+            alert.beginSheetModal(for: window)
+        } else {
+            alert.runModal()
+        }
+    }
+}
+
+// MARK: - Chip / pill button
+
+/// Reusable pill button used for both the top section toggle ("Design-Based"
+/// vs "Profession-Based") and the family filter chips. Switches between an
+/// active brand-blue state and a soft neutral state, with an inline count badge.
+private final class CVChipButton: NSView {
+    enum Style { case pillLarge, pillSmall }
+
+    var onSelect: (() -> Void)?
+    var isSelected: Bool = false { didSet { applyState() } }
+    private let style: Style
+    private let titleLabel = NSTextField(labelWithString: "")
+    private let badgeLabel = NSTextField(labelWithString: "")
+    private let badgePill = NSView()
+    private let symbolView = NSImageView()
+    private let stack = NSStackView()
+    private var isHovering: Bool = false
+    private var didPushCursor: Bool = false
+    private var trackingArea: NSTrackingArea?
+
+    private enum Palette {
+        static let restFill = NSColor(srgbRed: 247 / 255, green: 249 / 255, blue: 252 / 255, alpha: 1)
+        static let restBorder = NSColor(srgbRed: 222 / 255, green: 226 / 255, blue: 233 / 255, alpha: 1)
+        static let hoverFill = NSColor(srgbRed: 238 / 255, green: 241 / 255, blue: 247 / 255, alpha: 1)
+        static let activeFill = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
+        static let activeFillHover = NSColor(srgbRed: 28 / 255, green: 70 / 255, blue: 140 / 255, alpha: 1)
+        static let restText = NSColor(srgbRed: 71 / 255, green: 85 / 255, blue: 105 / 255, alpha: 1)
+        static let activeText = NSColor.white
+        static let restBadge = NSColor(srgbRed: 230 / 255, green: 234 / 255, blue: 240 / 255, alpha: 1)
+        static let restBadgeText = NSColor(srgbRed: 100 / 255, green: 116 / 255, blue: 139 / 255, alpha: 1)
+        static let activeBadge = NSColor.white.withAlphaComponent(0.22)
+        static let activeBadgeText = NSColor.white
+    }
+
+    init(title: String, badgeText: String, leadingSymbol: String?, style: Style) {
+        self.style = style
+        super.init(frame: .zero)
+        wantsLayer = true
+        translatesAutoresizingMaskIntoConstraints = false
+
+        let height: CGFloat = style == .pillLarge ? 38 : 30
+        layer?.cornerRadius = height / 2
+        layer?.borderWidth = 1
+        heightAnchor.constraint(equalToConstant: height).isActive = true
+
+        titleLabel.stringValue = title
+        titleLabel.font = .systemFont(ofSize: style == .pillLarge ? 13 : 12, weight: .semibold)
+        titleLabel.isBordered = false
+        titleLabel.drawsBackground = false
+        titleLabel.isEditable = false
+        titleLabel.isSelectable = false
+
+        badgeLabel.stringValue = badgeText
+        badgeLabel.font = .systemFont(ofSize: 10.5, weight: .semibold)
+        badgeLabel.alignment = .center
+        badgeLabel.isBordered = false
+        badgeLabel.drawsBackground = false
+        badgeLabel.isEditable = false
+        badgeLabel.isSelectable = false
+
+        badgePill.translatesAutoresizingMaskIntoConstraints = false
+        badgePill.wantsLayer = true
+        badgePill.layer?.cornerRadius = 9
+        badgePill.addSubview(badgeLabel)
+        badgeLabel.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            badgeLabel.leadingAnchor.constraint(equalTo: badgePill.leadingAnchor, constant: 7),
+            badgeLabel.trailingAnchor.constraint(equalTo: badgePill.trailingAnchor, constant: -7),
+            badgeLabel.centerYAnchor.constraint(equalTo: badgePill.centerYAnchor),
+            badgePill.heightAnchor.constraint(equalToConstant: 18),
+            badgePill.widthAnchor.constraint(greaterThanOrEqualToConstant: 22)
+        ])
+
+        stack.orientation = .horizontal
+        stack.spacing = 8
+        stack.alignment = .centerY
+        stack.translatesAutoresizingMaskIntoConstraints = false
+
+        if let symbol = leadingSymbol, style == .pillLarge {
+            symbolView.translatesAutoresizingMaskIntoConstraints = false
+            symbolView.image = NSImage(systemSymbolName: symbol, accessibilityDescription: nil)
+            symbolView.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 13, weight: .semibold)
+            stack.addArrangedSubview(symbolView)
+        }
+        stack.addArrangedSubview(titleLabel)
+        stack.addArrangedSubview(badgePill)
+
+        addSubview(stack)
+        let horizontalInset: CGFloat = style == .pillLarge ? 16 : 12
+        NSLayoutConstraint.activate([
+            stack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
+            stack.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -horizontalInset),
+            stack.centerYAnchor.constraint(equalTo: centerYAnchor)
+        ])
+        setContentHuggingPriority(.required, for: .horizontal)
+        applyState()
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func hitTest(_ point: NSPoint) -> NSView? {
+        guard let superview else { return super.hitTest(point) }
+        let local = convert(point, from: superview)
+        return bounds.contains(local) ? self : nil
+    }
+
+    override func mouseDown(with event: NSEvent) {
+        onSelect?()
+    }
+
+    override func updateTrackingAreas() {
+        super.updateTrackingAreas()
+        if let area = trackingArea { removeTrackingArea(area) }
+        let area = NSTrackingArea(
+            rect: bounds,
+            options: [.activeInKeyWindow, .mouseEnteredAndExited, .inVisibleRect],
+            owner: self,
+            userInfo: nil
+        )
+        addTrackingArea(area)
+        trackingArea = area
+    }
+
+    override func mouseEntered(with event: NSEvent) {
+        super.mouseEntered(with: event)
+        isHovering = true
+        applyState()
+        if !didPushCursor {
+            NSCursor.pointingHand.push()
+            didPushCursor = true
+        }
+    }
+
+    override func mouseExited(with event: NSEvent) {
+        super.mouseExited(with: event)
+        isHovering = false
+        applyState()
+        if didPushCursor {
+            NSCursor.pop()
+            didPushCursor = false
+        }
+    }
+
+    override func viewWillMove(toWindow newWindow: NSWindow?) {
+        super.viewWillMove(toWindow: newWindow)
+        if newWindow == nil, didPushCursor {
+            NSCursor.pop()
+            didPushCursor = false
+            isHovering = false
+        }
+    }
+
+    private func applyState() {
+        let fill: NSColor
+        let border: NSColor
+        let textColor: NSColor
+        let badgeFill: NSColor
+        let badgeText: NSColor
+        if isSelected {
+            fill = isHovering ? Palette.activeFillHover : Palette.activeFill
+            border = fill
+            textColor = Palette.activeText
+            badgeFill = Palette.activeBadge
+            badgeText = Palette.activeBadgeText
+        } else {
+            fill = isHovering ? Palette.hoverFill : Palette.restFill
+            border = Palette.restBorder
+            textColor = Palette.restText
+            badgeFill = Palette.restBadge
+            badgeText = Palette.restBadgeText
+        }
+        layer?.backgroundColor = fill.cgColor
+        layer?.borderColor = border.cgColor
+        titleLabel.textColor = textColor
+        symbolView.contentTintColor = textColor
+        badgePill.layer?.backgroundColor = badgeFill.cgColor
+        badgeLabel.textColor = badgeText
+    }
+}
+
+// MARK: - Template card
+
+/// Bordered card holding the mini CV preview, a hover "Preview" overlay, and a
+/// footer with the template name + family. Maintains its own hover/selected
+/// states so the parent can stay declarative.
+private final class CVTemplateCard: NSView {
+    struct Palette {
+        let border: NSColor
+        let borderHover: NSColor
+        let borderSelected: NSColor
+        let footerBackground: NSColor
+        let previewSurface: NSColor
+        let previewPaper: NSColor
+        let previewSidebarTint: NSColor
+        let previewInk: NSColor
+        let previewMuted: NSColor
+        let previewAccentRed: NSColor
+        let previewAccentBlue: NSColor
+        let primaryText: NSColor
+        let secondaryText: NSColor
+        let overlayTint: NSColor
+    }
+
+    var onSelect: (() -> Void)?
+    var onPreview: (() -> Void)?
+    var isSelected: Bool = false { didSet { applyBorder() } }
+    private let template: CVTemplate
+    private let palette: Palette
+    private let previewSurface = NSView()
+    private let preview: CVTemplatePreviewView
+    private let nameLabel = NSTextField(labelWithString: "")
+    private let categoryLabel = NSTextField(labelWithString: "")
+    private let overlay = NSView()
+    private let overlayBadge = NSView()
+    private let overlayBadgeLabel = NSTextField(labelWithString: "Preview")
+    private let overlayBadgeIcon = NSImageView()
+    private var trackingArea: NSTrackingArea?
+    private var isHovering: Bool = false
+    private var didPushCursor: Bool = false
+
+    init(template: CVTemplate, palette: Palette) {
+        self.template = template
+        self.palette = palette
+        self.preview = CVTemplatePreviewView(template: template, palette: palette)
+        super.init(frame: .zero)
+        wantsLayer = true
+        layer?.cornerRadius = 14
+        layer?.borderWidth = 1
+        layer?.masksToBounds = true
+        translatesAutoresizingMaskIntoConstraints = false
+        heightAnchor.constraint(greaterThanOrEqualToConstant: 280).isActive = true
+
+        previewSurface.translatesAutoresizingMaskIntoConstraints = false
+        previewSurface.wantsLayer = true
+        previewSurface.layer?.backgroundColor = palette.previewSurface.cgColor
+
+        preview.translatesAutoresizingMaskIntoConstraints = false
+        previewSurface.addSubview(preview)
+
+        nameLabel.stringValue = template.name
+        nameLabel.font = .systemFont(ofSize: 13, weight: .semibold)
+        nameLabel.textColor = palette.primaryText
+        nameLabel.isBordered = false
+        nameLabel.drawsBackground = false
+        nameLabel.isEditable = false
+        nameLabel.isSelectable = false
+
+        categoryLabel.stringValue = template.family.title
+        categoryLabel.font = .systemFont(ofSize: 11.5, weight: .regular)
+        categoryLabel.textColor = palette.secondaryText
+        categoryLabel.isBordered = false
+        categoryLabel.drawsBackground = false
+        categoryLabel.isEditable = false
+        categoryLabel.isSelectable = false
+
+        let footerStack = NSStackView(views: [nameLabel, categoryLabel])
+        footerStack.orientation = .vertical
+        footerStack.spacing = 2
+        footerStack.alignment = .leading
+        footerStack.translatesAutoresizingMaskIntoConstraints = false
+
+        let footer = NSView()
+        footer.translatesAutoresizingMaskIntoConstraints = false
+        footer.wantsLayer = true
+        footer.layer?.backgroundColor = palette.footerBackground.cgColor
+        footer.addSubview(footerStack)
+        NSLayoutConstraint.activate([
+            footerStack.leadingAnchor.constraint(equalTo: footer.leadingAnchor, constant: 14),
+            footerStack.trailingAnchor.constraint(lessThanOrEqualTo: footer.trailingAnchor, constant: -14),
+            footerStack.topAnchor.constraint(equalTo: footer.topAnchor, constant: 12),
+            footerStack.bottomAnchor.constraint(equalTo: footer.bottomAnchor, constant: -12)
+        ])
+
+        addSubview(previewSurface)
+        addSubview(footer)
+        addSubview(overlay)
+        configureOverlay()
+
+        NSLayoutConstraint.activate([
+            previewSurface.topAnchor.constraint(equalTo: topAnchor),
+            previewSurface.leadingAnchor.constraint(equalTo: leadingAnchor),
+            previewSurface.trailingAnchor.constraint(equalTo: trailingAnchor),
+            previewSurface.heightAnchor.constraint(greaterThanOrEqualToConstant: 230),
+
+            preview.topAnchor.constraint(equalTo: previewSurface.topAnchor, constant: 16),
+            preview.leadingAnchor.constraint(equalTo: previewSurface.leadingAnchor, constant: 18),
+            preview.trailingAnchor.constraint(equalTo: previewSurface.trailingAnchor, constant: -18),
+            preview.bottomAnchor.constraint(equalTo: previewSurface.bottomAnchor, constant: -16),
+
+            footer.topAnchor.constraint(equalTo: previewSurface.bottomAnchor),
+            footer.leadingAnchor.constraint(equalTo: leadingAnchor),
+            footer.trailingAnchor.constraint(equalTo: trailingAnchor),
+            footer.bottomAnchor.constraint(equalTo: bottomAnchor),
+
+            overlay.topAnchor.constraint(equalTo: previewSurface.topAnchor),
+            overlay.leadingAnchor.constraint(equalTo: previewSurface.leadingAnchor),
+            overlay.trailingAnchor.constraint(equalTo: previewSurface.trailingAnchor),
+            overlay.bottomAnchor.constraint(equalTo: previewSurface.bottomAnchor)
+        ])
+        applyBorder()
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func configureOverlay() {
+        overlay.translatesAutoresizingMaskIntoConstraints = false
+        overlay.wantsLayer = true
+        overlay.layer?.backgroundColor = palette.overlayTint.cgColor
+        overlay.alphaValue = 0
+        overlay.isHidden = false
+
+        overlayBadge.translatesAutoresizingMaskIntoConstraints = false
+        overlayBadge.wantsLayer = true
+        overlayBadge.layer?.backgroundColor = NSColor.black.withAlphaComponent(0.78).cgColor
+        overlayBadge.layer?.cornerRadius = 16
+
+        overlayBadgeIcon.translatesAutoresizingMaskIntoConstraints = false
+        overlayBadgeIcon.image = NSImage(systemSymbolName: "eye", accessibilityDescription: nil)
+        overlayBadgeIcon.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 11, weight: .semibold)
+        overlayBadgeIcon.contentTintColor = .white
+
+        overlayBadgeLabel.font = .systemFont(ofSize: 12, weight: .semibold)
+        overlayBadgeLabel.textColor = .white
+        overlayBadgeLabel.isBordered = false
+        overlayBadgeLabel.drawsBackground = false
+        overlayBadgeLabel.isEditable = false
+        overlayBadgeLabel.isSelectable = false
+
+        let badgeStack = NSStackView(views: [overlayBadgeIcon, overlayBadgeLabel])
+        badgeStack.orientation = .horizontal
+        badgeStack.spacing = 6
+        badgeStack.alignment = .centerY
+        badgeStack.translatesAutoresizingMaskIntoConstraints = false
+
+        overlayBadge.addSubview(badgeStack)
+        overlay.addSubview(overlayBadge)
+        NSLayoutConstraint.activate([
+            badgeStack.leadingAnchor.constraint(equalTo: overlayBadge.leadingAnchor, constant: 14),
+            badgeStack.trailingAnchor.constraint(equalTo: overlayBadge.trailingAnchor, constant: -14),
+            badgeStack.topAnchor.constraint(equalTo: overlayBadge.topAnchor, constant: 8),
+            badgeStack.bottomAnchor.constraint(equalTo: overlayBadge.bottomAnchor, constant: -8),
+            overlayBadge.centerXAnchor.constraint(equalTo: overlay.centerXAnchor),
+            overlayBadge.centerYAnchor.constraint(equalTo: overlay.centerYAnchor)
+        ])
+    }
+
+    override func hitTest(_ point: NSPoint) -> NSView? {
+        guard let superview else { return super.hitTest(point) }
+        let local = convert(point, from: superview)
+        return bounds.contains(local) ? self : nil
+    }
+
+    override func mouseDown(with event: NSEvent) {
+        let local = convert(event.locationInWindow, from: nil)
+        if overlay.frame.contains(local) {
+            onPreview?()
+        } else {
+            onSelect?()
+        }
+    }
+
+    override func updateTrackingAreas() {
+        super.updateTrackingAreas()
+        if let area = trackingArea { removeTrackingArea(area) }
+        let area = NSTrackingArea(
+            rect: bounds,
+            options: [.activeInKeyWindow, .mouseEnteredAndExited, .inVisibleRect],
+            owner: self,
+            userInfo: nil
+        )
+        addTrackingArea(area)
+        trackingArea = area
+    }
+
+    override func mouseEntered(with event: NSEvent) {
+        super.mouseEntered(with: event)
+        isHovering = true
+        animateOverlay(visible: true)
+        applyBorder()
+        if !didPushCursor {
+            NSCursor.pointingHand.push()
+            didPushCursor = true
+        }
+    }
+
+    override func mouseExited(with event: NSEvent) {
+        super.mouseExited(with: event)
+        isHovering = false
+        animateOverlay(visible: false)
+        applyBorder()
+        if didPushCursor {
+            NSCursor.pop()
+            didPushCursor = false
+        }
+    }
+
+    override func viewWillMove(toWindow newWindow: NSWindow?) {
+        super.viewWillMove(toWindow: newWindow)
+        if newWindow == nil, didPushCursor {
+            NSCursor.pop()
+            didPushCursor = false
+            isHovering = false
+        }
+    }
+
+    private func animateOverlay(visible: Bool) {
+        let target: CGFloat = visible ? 1 : 0
+        NSAnimationContext.runAnimationGroup { context in
+            context.duration = 0.12
+            context.allowsImplicitAnimation = true
+            overlay.animator().alphaValue = target
+        }
+    }
+
+    private func applyBorder() {
+        if isSelected {
+            layer?.borderColor = palette.borderSelected.cgColor
+            layer?.borderWidth = 2
+        } else if isHovering {
+            layer?.borderColor = palette.borderHover.cgColor
+            layer?.borderWidth = 1
+        } else {
+            layer?.borderColor = palette.border.cgColor
+            layer?.borderWidth = 1
+        }
+    }
+}
+
+// MARK: - Mini preview renderer
+
+/// Tiny stylized representation of a finished CV — accent strip, headline area,
+/// faux paragraph + section lines. Adapts to the template's headline, accent,
+/// sidebar, and section-label style so the grid feels varied at a glance.
+private final class CVTemplatePreviewView: NSView {
+    private let template: CVTemplate
+    private let palette: CVTemplateCard.Palette
+    private let paper = NSView()
+
+    init(template: CVTemplate, palette: CVTemplateCard.Palette) {
+        self.template = template
+        self.palette = palette
+        super.init(frame: .zero)
+        wantsLayer = true
+        translatesAutoresizingMaskIntoConstraints = false
+        configurePaper()
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func configurePaper() {
+        paper.translatesAutoresizingMaskIntoConstraints = false
+        paper.wantsLayer = true
+        paper.layer?.backgroundColor = palette.previewPaper.cgColor
+        paper.layer?.cornerRadius = 4
+        paper.layer?.borderColor = NSColor(srgbRed: 232 / 255, green: 235 / 255, blue: 241 / 255, alpha: 1).cgColor
+        paper.layer?.borderWidth = 1
+        paper.layer?.masksToBounds = true
+        addSubview(paper)
+
+        NSLayoutConstraint.activate([
+            paper.topAnchor.constraint(equalTo: topAnchor),
+            paper.bottomAnchor.constraint(equalTo: bottomAnchor),
+            paper.centerXAnchor.constraint(equalTo: centerXAnchor),
+            paper.widthAnchor.constraint(equalTo: heightAnchor, multiplier: 0.78),
+            paper.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor),
+            paper.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor)
+        ])
+
+        let header = makeHeader()
+        let body = makeBody()
+        let stack = NSStackView(views: [header, body])
+        stack.orientation = .vertical
+        stack.alignment = .leading
+        stack.spacing = 6
+        stack.distribution = .fill
+        stack.translatesAutoresizingMaskIntoConstraints = false
+        paper.addSubview(stack)
+        NSLayoutConstraint.activate([
+            stack.leadingAnchor.constraint(equalTo: paper.leadingAnchor, constant: 8),
+            stack.trailingAnchor.constraint(equalTo: paper.trailingAnchor, constant: -8),
+            stack.topAnchor.constraint(equalTo: paper.topAnchor, constant: 8),
+            stack.bottomAnchor.constraint(lessThanOrEqualTo: paper.bottomAnchor, constant: -8),
+            header.widthAnchor.constraint(equalTo: stack.widthAnchor),
+            body.widthAnchor.constraint(equalTo: stack.widthAnchor)
+        ])
+    }
+
+    // MARK: Header
+
+    private func makeHeader() -> NSView {
+        let container = NSView()
+        container.translatesAutoresizingMaskIntoConstraints = false
+
+        let nameStrip = makeLine(color: palette.previewInk, height: 5.5, widthFraction: 0.6)
+        let roleStrip = makeLine(color: palette.previewMuted, height: 3, widthFraction: 0.42)
+        let contactStrip = makeLine(color: palette.previewMuted.withAlphaComponent(0.7), height: 2, widthFraction: 0.55)
+
+        let textStack = NSStackView(views: [nameStrip, roleStrip, contactStrip])
+        textStack.orientation = .vertical
+        textStack.spacing = 4
+        textStack.translatesAutoresizingMaskIntoConstraints = false
+
+        switch template.headline {
+        case .centered:
+            textStack.alignment = .centerX
+        case .leftAligned, .leftWithInitials:
+            textStack.alignment = .leading
+        case .avatarStacked:
+            textStack.alignment = .leading
+        }
+
+        container.addSubview(textStack)
+
+        switch template.headline {
+        case .leftWithInitials:
+            let avatar = makeAvatar()
+            container.addSubview(avatar)
+            NSLayoutConstraint.activate([
+                textStack.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+                textStack.trailingAnchor.constraint(lessThanOrEqualTo: avatar.leadingAnchor, constant: -6),
+                textStack.topAnchor.constraint(equalTo: container.topAnchor),
+                textStack.bottomAnchor.constraint(equalTo: container.bottomAnchor),
+                avatar.trailingAnchor.constraint(equalTo: container.trailingAnchor),
+                avatar.centerYAnchor.constraint(equalTo: container.centerYAnchor),
+                avatar.widthAnchor.constraint(equalToConstant: 20),
+                avatar.heightAnchor.constraint(equalToConstant: 20)
+            ])
+        case .avatarStacked:
+            let avatar = makeAvatar()
+            container.addSubview(avatar)
+            NSLayoutConstraint.activate([
+                avatar.topAnchor.constraint(equalTo: container.topAnchor),
+                avatar.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+                avatar.widthAnchor.constraint(equalToConstant: 22),
+                avatar.heightAnchor.constraint(equalToConstant: 22),
+                textStack.topAnchor.constraint(equalTo: avatar.bottomAnchor, constant: 4),
+                textStack.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+                textStack.trailingAnchor.constraint(equalTo: container.trailingAnchor),
+                textStack.bottomAnchor.constraint(equalTo: container.bottomAnchor)
+            ])
+        case .centered:
+            NSLayoutConstraint.activate([
+                textStack.topAnchor.constraint(equalTo: container.topAnchor),
+                textStack.bottomAnchor.constraint(equalTo: container.bottomAnchor),
+                textStack.centerXAnchor.constraint(equalTo: container.centerXAnchor),
+                textStack.leadingAnchor.constraint(greaterThanOrEqualTo: container.leadingAnchor),
+                textStack.trailingAnchor.constraint(lessThanOrEqualTo: container.trailingAnchor)
+            ])
+        case .leftAligned:
+            NSLayoutConstraint.activate([
+                textStack.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+                textStack.trailingAnchor.constraint(lessThanOrEqualTo: container.trailingAnchor),
+                textStack.topAnchor.constraint(equalTo: container.topAnchor),
+                textStack.bottomAnchor.constraint(equalTo: container.bottomAnchor)
+            ])
+        }
+
+        // Accent decorations
+        switch template.accent {
+        case .none:
+            break
+        case .redUnderline, .redBar:
+            let accent = NSView()
+            accent.translatesAutoresizingMaskIntoConstraints = false
+            accent.wantsLayer = true
+            accent.layer?.backgroundColor = palette.previewAccentRed.cgColor
+            container.addSubview(accent)
+            NSLayoutConstraint.activate([
+                accent.heightAnchor.constraint(equalToConstant: template.accent == .redBar ? 2.5 : 1.5),
+                accent.topAnchor.constraint(equalTo: textStack.bottomAnchor, constant: 5),
+                accent.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+                accent.widthAnchor.constraint(equalTo: container.widthAnchor, multiplier: template.accent == .redBar ? 0.32 : 0.9),
+                accent.bottomAnchor.constraint(lessThanOrEqualTo: container.bottomAnchor)
+            ])
+        case .blueBar:
+            let accent = NSView()
+            accent.translatesAutoresizingMaskIntoConstraints = false
+            accent.wantsLayer = true
+            accent.layer?.backgroundColor = palette.previewAccentBlue.cgColor
+            container.addSubview(accent)
+            NSLayoutConstraint.activate([
+                accent.heightAnchor.constraint(equalToConstant: 2.5),
+                accent.topAnchor.constraint(equalTo: textStack.bottomAnchor, constant: 5),
+                accent.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+                accent.widthAnchor.constraint(equalTo: container.widthAnchor, multiplier: 0.32),
+                accent.bottomAnchor.constraint(lessThanOrEqualTo: container.bottomAnchor)
+            ])
+        }
+
+        return container
+    }
+
+    private func makeAvatar() -> NSView {
+        let avatar = NSView()
+        avatar.translatesAutoresizingMaskIntoConstraints = false
+        avatar.wantsLayer = true
+        avatar.layer?.backgroundColor = palette.previewSidebarTint.cgColor
+        avatar.layer?.borderColor = palette.previewMuted.withAlphaComponent(0.4).cgColor
+        avatar.layer?.borderWidth = 1
+        avatar.layer?.cornerRadius = 11
+        let initials = NSTextField(labelWithString: "SJ")
+        initials.font = .systemFont(ofSize: 7, weight: .bold)
+        initials.textColor = palette.previewInk
+        initials.alignment = .center
+        initials.translatesAutoresizingMaskIntoConstraints = false
+        avatar.addSubview(initials)
+        NSLayoutConstraint.activate([
+            initials.centerXAnchor.constraint(equalTo: avatar.centerXAnchor),
+            initials.centerYAnchor.constraint(equalTo: avatar.centerYAnchor)
+        ])
+        return avatar
+    }
+
+    // MARK: Body
+
+    private func makeBody() -> NSView {
+        switch template.layout {
+        case .singleColumn:
+            return makeColumn(width: nil, isSidebar: false)
+        case .twoColumn(let side, let tinted):
+            return makeTwoColumnLayout(sidebarSide: side, tinted: tinted)
+        }
+    }
+
+    private func makeTwoColumnLayout(sidebarSide: CVTemplate.SidebarSide, tinted: Bool) -> NSView {
+        let container = NSView()
+        container.translatesAutoresizingMaskIntoConstraints = false
+
+        let sidebar = makeColumn(width: nil, isSidebar: true)
+        if tinted {
+            sidebar.wantsLayer = true
+            sidebar.layer?.backgroundColor = palette.previewSidebarTint.cgColor
+            sidebar.layer?.cornerRadius = 3
+        }
+        let main = makeColumn(width: nil, isSidebar: false)
+
+        container.addSubview(sidebar)
+        container.addSubview(main)
+
+        let leadingItem: NSView = (sidebarSide == .leading) ? sidebar : main
+        let trailingItem: NSView = (sidebarSide == .leading) ? main : sidebar
+
+        NSLayoutConstraint.activate([
+            leadingItem.leadingAnchor.constraint(equalTo: container.leadingAnchor),
+            leadingItem.topAnchor.constraint(equalTo: container.topAnchor, constant: 2),
+            leadingItem.bottomAnchor.constraint(lessThanOrEqualTo: container.bottomAnchor),
+            trailingItem.trailingAnchor.constraint(equalTo: container.trailingAnchor),
+            trailingItem.topAnchor.constraint(equalTo: container.topAnchor, constant: 2),
+            trailingItem.bottomAnchor.constraint(lessThanOrEqualTo: container.bottomAnchor),
+            trailingItem.leadingAnchor.constraint(equalTo: leadingItem.trailingAnchor, constant: 8),
+            sidebar.widthAnchor.constraint(equalTo: container.widthAnchor, multiplier: 0.32),
+            main.widthAnchor.constraint(equalTo: container.widthAnchor, multiplier: 0.6)
+        ])
+        return container
+    }
+
+    private func makeColumn(width: CGFloat?, isSidebar: Bool) -> NSView {
+        let stack = NSStackView()
+        stack.orientation = .vertical
+        stack.alignment = .leading
+        stack.spacing = 6
+        stack.translatesAutoresizingMaskIntoConstraints = false
+
+        let sectionNames: [String] = isSidebar
+            ? ["CONTACT", "SKILLS", "LANGUAGES", "INTERESTS"]
+            : ["PROFILE", "EXPERIENCE", "EDUCATION", "SKILLS"]
+
+        for (i, section) in sectionNames.enumerated() {
+            let block = makeSectionBlock(title: section, lineCount: isSidebar ? 3 : (i == 1 ? 4 : 2), narrow: isSidebar)
+            stack.addArrangedSubview(block)
+            block.widthAnchor.constraint(equalTo: stack.widthAnchor).isActive = true
+        }
+        return stack
+    }
+
+    private func makeSectionBlock(title: String, lineCount: Int, narrow: Bool) -> NSView {
+        let label = NSTextField(labelWithString: formattedSectionLabel(title))
+        label.font = .systemFont(ofSize: narrow ? 5 : 5.5, weight: .bold)
+        label.textColor = palette.previewAccentBlue.blended(withFraction: 0.4, of: palette.previewInk) ?? palette.previewInk
+        label.maximumNumberOfLines = 1
+        label.isBordered = false
+        label.drawsBackground = false
+        label.isEditable = false
+        label.isSelectable = false
+        label.translatesAutoresizingMaskIntoConstraints = false
+
+        let lines = NSStackView()
+        lines.orientation = .vertical
+        lines.alignment = .leading
+        lines.spacing = 2
+        lines.translatesAutoresizingMaskIntoConstraints = false
+        for index in 0..<lineCount {
+            let widthFraction: CGFloat = max(0.4, 0.95 - CGFloat(index) * 0.13)
+            let line = makeLine(color: palette.previewMuted.withAlphaComponent(0.65), height: 1.6, widthFraction: widthFraction)
+            lines.addArrangedSubview(line)
+            line.widthAnchor.constraint(equalTo: lines.widthAnchor, multiplier: widthFraction).isActive = true
+        }
+
+        let block = NSStackView(views: [label, lines])
+        block.orientation = .vertical
+        block.alignment = .leading
+        block.spacing = 2
+        block.translatesAutoresizingMaskIntoConstraints = false
+        let blockWidth = block.widthAnchor
+        lines.widthAnchor.constraint(equalTo: blockWidth).isActive = true
+        return block
+    }
+
+    private func formattedSectionLabel(_ raw: String) -> String {
+        switch template.sectionLabelStyle {
+        case .uppercase: return raw
+        case .slashed: return "// \(raw.capitalized)"
+        case .bracketed: return "[ \(raw) ]"
+        }
+    }
+
+    private func makeLine(color: NSColor, height: CGFloat, widthFraction: CGFloat) -> NSView {
+        let line = LineView()
+        line.translatesAutoresizingMaskIntoConstraints = false
+        line.wantsLayer = true
+        line.layer?.backgroundColor = color.cgColor
+        line.layer?.cornerRadius = max(height / 2, 1)
+        line.heightAnchor.constraint(equalToConstant: height).isActive = true
+        line.widthFraction = widthFraction
+        return line
+    }
+}
+
+private final class LineView: NSView {
+    var widthFraction: CGFloat = 1
+}
+
+// MARK: - Helpers
+
+/// Flipped origin so the grid stacks fill from the top.
+private final class TopFlippedView: NSView {
+    override var isFlipped: Bool { true }
+}
+
+/// Local copy of the dashboard's hoverable button so this file stays
+/// self-contained without exposing the existing private classes.
+private final class CVHoverableButton: NSButton {
+    var hoverHandler: ((Bool) -> Void)?
+    var pointerCursor: Bool = false
+    private(set) var isHovering: Bool = false
+    private var trackingArea: NSTrackingArea?
+    private var didPushCursor: Bool = false
+
+    override func updateTrackingAreas() {
+        super.updateTrackingAreas()
+        if let area = trackingArea { removeTrackingArea(area) }
+        let area = NSTrackingArea(
+            rect: bounds,
+            options: [.activeInKeyWindow, .mouseEnteredAndExited, .inVisibleRect],
+            owner: self,
+            userInfo: nil
+        )
+        addTrackingArea(area)
+        trackingArea = area
+    }
+
+    override func mouseEntered(with event: NSEvent) {
+        super.mouseEntered(with: event)
+        isHovering = true
+        hoverHandler?(true)
+        if pointerCursor, !didPushCursor {
+            NSCursor.pointingHand.push()
+            didPushCursor = true
+        }
+    }
+
+    override func mouseExited(with event: NSEvent) {
+        super.mouseExited(with: event)
+        isHovering = false
+        hoverHandler?(false)
+        if didPushCursor {
+            NSCursor.pop()
+            didPushCursor = false
+        }
+    }
+
+    override func viewWillMove(toWindow newWindow: NSWindow?) {
+        super.viewWillMove(toWindow: newWindow)
+        if newWindow == nil, didPushCursor {
+            NSCursor.pop()
+            didPushCursor = false
+            isHovering = false
+        }
+    }
+}

App for Indeed/Views/DashboardView.swift

@@ -117,6 +117,10 @@ final class DashboardView: NSView, NSTextFieldDelegate {
     private let savedJobsStack = NSStackView()
     private let settingsPageContainer = NSView()
     private let themeControl = NSSegmentedControl()
+    private let cvMakerPageContainer = NSView()
+    private lazy var cvMakerPageView: CVMakerPageView = {
+        CVMakerPageView()
+    }()
 
     private var currentSidebarItems: [SidebarItem] = []
     private var selectedSidebarIndex: Int = 0
@@ -1073,9 +1077,11 @@ final class DashboardView: NSView, NSTextFieldDelegate {
         nonHomeGenericContainer.translatesAutoresizingMaskIntoConstraints = false
         savedJobsPageContainer.translatesAutoresizingMaskIntoConstraints = false
         settingsPageContainer.translatesAutoresizingMaskIntoConstraints = false
+        cvMakerPageContainer.translatesAutoresizingMaskIntoConstraints = false
         nonHomeHost.addSubview(nonHomeGenericContainer)
         nonHomeHost.addSubview(savedJobsPageContainer)
         nonHomeHost.addSubview(settingsPageContainer)
+        nonHomeHost.addSubview(cvMakerPageContainer)
 
         NSLayoutConstraint.activate([
             nonHomeGenericContainer.leadingAnchor.constraint(equalTo: nonHomeHost.leadingAnchor),
@@ -1091,7 +1097,12 @@ final class DashboardView: NSView, NSTextFieldDelegate {
             settingsPageContainer.leadingAnchor.constraint(equalTo: nonHomeHost.leadingAnchor),
             settingsPageContainer.trailingAnchor.constraint(equalTo: nonHomeHost.trailingAnchor),
             settingsPageContainer.topAnchor.constraint(equalTo: nonHomeHost.topAnchor),
-            settingsPageContainer.bottomAnchor.constraint(equalTo: nonHomeHost.bottomAnchor)
+            settingsPageContainer.bottomAnchor.constraint(equalTo: nonHomeHost.bottomAnchor),
+
+            cvMakerPageContainer.leadingAnchor.constraint(equalTo: nonHomeHost.leadingAnchor),
+            cvMakerPageContainer.trailingAnchor.constraint(equalTo: nonHomeHost.trailingAnchor),
+            cvMakerPageContainer.topAnchor.constraint(equalTo: nonHomeHost.topAnchor),
+            cvMakerPageContainer.bottomAnchor.constraint(equalTo: nonHomeHost.bottomAnchor)
         ])
 
         nonHomeTitleLabel.font = .systemFont(ofSize: 22, weight: .bold)
@@ -1185,6 +1196,22 @@ final class DashboardView: NSView, NSTextFieldDelegate {
         ])
 
         configureSettingsPage()
+        configureCVMakerPage()
+    }
+
+    private func configureCVMakerPage() {
+        cvMakerPageContainer.wantsLayer = true
+        cvMakerPageContainer.layer?.backgroundColor = Theme.mainHostBackground.cgColor
+        cvMakerPageContainer.isHidden = true
+
+        cvMakerPageView.translatesAutoresizingMaskIntoConstraints = false
+        cvMakerPageContainer.addSubview(cvMakerPageView)
+        NSLayoutConstraint.activate([
+            cvMakerPageView.leadingAnchor.constraint(equalTo: cvMakerPageContainer.leadingAnchor),
+            cvMakerPageView.trailingAnchor.constraint(equalTo: cvMakerPageContainer.trailingAnchor),
+            cvMakerPageView.topAnchor.constraint(equalTo: cvMakerPageContainer.topAnchor),
+            cvMakerPageView.bottomAnchor.constraint(equalTo: cvMakerPageContainer.bottomAnchor)
+        ])
     }
 
     private func configureSettingsPage() {
@@ -1415,19 +1442,26 @@ final class DashboardView: NSView, NSTextFieldDelegate {
         return currentSidebarItems[index].title == "Settings"
     }
 
+    private func isCVMakerSidebarIndex(_ index: Int) -> Bool {
+        guard index >= 0, index < currentSidebarItems.count else { return false }
+        return currentSidebarItems[index].title == "CV Maker"
+    }
+
     private func updateMainContentVisibility() {
         let home = isHomeSidebarIndex(selectedSidebarIndex)
         let savedJobs = isSavedJobsSidebarIndex(selectedSidebarIndex)
         let settings = isSettingsSidebarIndex(selectedSidebarIndex)
+        let cvMaker = isCVMakerSidebarIndex(selectedSidebarIndex)
         mainOverlay.isHidden = !home
         nonHomeHost.isHidden = home
-        nonHomeGenericContainer.isHidden = savedJobs || settings
+        nonHomeGenericContainer.isHidden = savedJobs || settings || cvMaker
         savedJobsPageContainer.isHidden = !savedJobs
         settingsPageContainer.isHidden = !settings
+        cvMakerPageContainer.isHidden = !cvMaker
         if !home, selectedSidebarIndex < currentSidebarItems.count {
             if savedJobs {
                 reloadSavedJobsListings()
-            } else if settings {
+            } else if settings || cvMaker {
                 window?.makeFirstResponder(nil)
             } else {
                 nonHomeTitleLabel.stringValue = currentSidebarItems[selectedSidebarIndex].title