feat(components): add tabs component

[adkah]

Adds a tab component. Needed to start migrating content.

[greptile-apps]

Greptile Summary

This PR adds a Tabs/Tab Astro component pair with full keyboard navigation and ARIA support, updates Callout.astro to propagate text colour to more inline elements, and adds global.css prose overrides for typography. It also extends cleanup-headings.ts to filter tab-internal headings out of the TOC.

• Tabs component (Tabs.astro, Tab.astro, index.ts): client-side JS initialises a <ul role=\"tablist\"> from the slotted panels, assigns UID-based IDs, and handles roving-tabindex keyboard navigation (ArrowLeft/Right, Home, End). The CSS-safelist <span hidden> trick prevents Tailwind from purging active/inactive button classes.
• cleanup-headings.ts: parseHeadings does a line-by-line scan to track <Tabs> depth and marks headings as insideTabs; those headings are then removed from the TOC. Two issues exist: multi-line `<Tabs prop=…\

tags are not matched by the per-line regex, and headings inside fenced code blocks are counted byparseHeadingsbut not by Astro, causing positional drift that can attach the wronginsideTabs` flag to a real heading and silently drop it from the TOC.

Confidence Score: 3/5

Safe to merge the UI components and styling; hold on cleanup-headings.ts until the two parsing bugs are addressed

The Tabs/Tab components and CSS changes are straightforward and low-risk. The concern is in cleanup-headings.ts: a multi-line Tabs tag breaks depth tracking entirely, and code blocks containing markdown-style headings shift the positional index so a real heading can be incorrectly flagged as insideTabs and removed from the TOC — which is a silent, hard-to-notice regression compared to the previous wrong-text behaviour.

src/lib/cleanup-headings.ts — both the multi-line tag detection and the code-block index drift need fixes before this is reliable in production docs

Important Files Changed

Filename	Overview
src/components/tabs/Tabs.astro	New Tabs component with full ARIA keyboard navigation; tablist structure, ID generation, and focus management look correct
src/components/tabs/Tab.astro	New Tab panel component; icon-source stash pattern for JS cloning is clean and the role/aria attributes are correct
src/lib/cleanup-headings.ts	Adds insideTabs filtering to prune tab headings from the TOC; two bugs: multi-line Tabs tags are not detected, and the index-based mapping can misalign when code blocks contain markdown-style headings, silently dropping real headings from the TOC
src/components/tabs/index.ts	Simple barrel export for Tabs and Tab components
src/components/callouts/Callout.astro	Improves callout text colour coverage and switches margin reset to first/last-child selectors for broader compatibility
src/styles/global.css	Adds prose component overrides for typography (headings, links, code, tables) in both light and dark modes; looks correct

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["MDX page rendered by Astro"] --> B["Astro headings array\n(all depths, JSX-evaluated)"]
    A --> C["Raw body string\npassed to cleanupHeadings"]

    C --> D["parseHeadings()\nline-by-line scan"]
    D --> E{"Line matches\n<Tabs …> ?"}
    E -->|"single-line tag"| F["tabsDepth++"]
    E -->|"multi-line tag ⚠️"| G["tabsDepth unchanged\n(bug: tag not detected)"]
    D --> H{"Line in fenced\ncode block?"}
    H -->|"No guard ⚠️"| I["## heading counted\nin parsed array"]
    D --> J["ParsedHeading[]\nwith insideTabs flag"]

    B --> K["filter depth 2-3"]
    K --> L["map(h, index) →\nparsed[index] lookup"]
    J --> L
    L --> M{"Index aligned?\n(code-block headings\ncause drift ⚠️)"}
    M -->|"Aligned"| N["insideTabs set correctly"]
    M -->|"Drifted"| O["Wrong insideTabs flag\non real heading"]
    N --> P["filter !insideTabs"]
    O --> P
    P --> Q["Final TOC headings"]

    subgraph Browser ["Browser – Tab Component"]
        R["Tabs.astro\nrenders empty tablist + panels"] --> S["initRoot() runs on\nastro:page-load"]
        S --> T["Builds li role=tab\nwith UID-based IDs"]
        T --> U["render() sets\naria-selected / data-active"]
        U --> V["CSS shows active panel\nhides rest"]
    end

Loading

_{Reviews (1): Last reviewed commit: "add barrel for tabs" | Re-trigger Greptile}