@highjumpdigitalsoftware/blog-kit 0.6.0

package/dist/core/manifest/components.json

@@ -0,0 +1,573 @@
+{
+  "$comment": "Canonical component catalogue — the SINGLE source of truth. The blog-publisher MCP reads this at boot to build list_components; the React/Astro adapters implement these names. Per-site customComponents (in the MCP's sites/*.json) merge on top. Shape is a superset of the MCP's ComponentDoc {description, props, example, role, recommendedFor} plus kit metadata {pack, frameworks, aliases}.",
+  "components": {
+    "CalloutBox": {
+      "description": "Highlighted aside for a tip, note, warning, or important caveat. Use sparingly to flag something the reader must not miss.",
+      "props": "tone: 'info' | 'tip' | 'success' | 'warn' | 'danger' (default 'info'). Aliases accepted: type, variant, and friendly values like note/warning/caution/error. title?: string (defaults to a per-tone label). Children: MDX content.",
+      "example": "<CalloutBox tone=\"warn\" title=\"Watch out\">\nSkipping the verification step is the #1 cause of failed migrations.\n</CalloutBox>",
+      "role": "editorial",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "TipBox": {
+      "description": "Inline \"Pro tip\" callout: a brand-tinted strip with a small uppercase brand badge, a bold lead tip line, and optional supporting context. Lighter-weight than CalloutBox; meant to sit inline within prose.",
+      "props": "tip: string (required, bold lead line); context?: string (optional supporting sentence shown after the lead).",
+      "example": "<TipBox tip=\"Resize images before upload.\" context=\"Anything over 2000px wastes bandwidth and slows your page.\" />",
+      "role": "An inline emphasis callout for a single actionable pro tip within blog body content.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Highlighting a short, single actionable tip mid-article without the visual weight of a full CalloutBox."
+    },
+    "QuoteBlock": {
+      "description": "Pull-quote / testimonial block — a large quote with a brand left-border and faded quote mark, an author + role/company caption (with optional source-favicon avatar), and an optional dashed-divider source attribution row that can link to the original.",
+      "props": "quote (string; or use children for the body), author (string), role (string), company (string), source (string — attribution text), sourceUrl (string — makes the source row a link and derives a favicon avatar), avatarUrl (string — overrides the derived favicon)",
+      "example": "<QuoteBlock quote=\"AI handles 80% of our inbound before a human ever sees it.\" author=\"Jane Doe\" role=\"VP Support\" company=\"Acme\" source=\"Forrester AI Study, 2024\" sourceUrl=\"https://forrester.com/report\" />",
+      "role": "A standout pull-quote or testimonial inside long-form blog body copy, with optional attribution and source citation.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "PullQuote"
+      ],
+      "recommendedFor": "Testimonials, expert quotes, and cited pull-quotes within an article body."
+    },
+    "Definition": {
+      "description": "A term/definition block: a brand-colored monogram tile beside a term name, optional phonetic pronunciation, and the definition text. Use to gloss a key term or acronym inline in a blog post.",
+      "props": "term (string, required — short monogram/acronym; a longer phrase is auto-reduced to up to 3 initials), name (string, optional — full term label shown bold; defaults to the phrase when term is a phrase), pronunciation (string, optional — italic phonetic spelling), children (slot — the definition body text)",
+      "example": "<Definition term=\"API\" name=\"Application Programming Interface\" pronunciation=\"/ˌeɪ.piːˈaɪ/\">A set of rules that lets one piece of software talk to another.</Definition>",
+      "role": "Inline glossary / term-definition callout for explaining a key term or acronym within post body content.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Defining jargon, acronyms, or domain terms inside an article."
+    },
+    "FAQList": {
+      "description": "Expandable Q&A list built on native <details>/<summary> for accessibility and SEO. The first item is open by default; every pair is also emitted as FAQPage JSON-LD so search engines can lift it. Use for an FAQ section at the foot of an article.",
+      "props": "items?: Array<{ q: string; a: string }> — questions and answers; answer bodies split into paragraphs on blank lines and render inline HTML. heading?: string — optional eyebrow label above the list. Children: when items is omitted, MDX content (your own <details> rows) is rendered instead.",
+      "example": "<FAQList heading=\"Common questions\" items={[\n  { q: \"How long does setup take?\", a: \"Most teams are live in under an hour.\\n\\nNo code changes are required.\" },\n  { q: \"Can I cancel anytime?\", a: \"Yes — there is no lock-in contract.\" }\n]} />",
+      "role": "editorial",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "Checklist": {
+      "description": "A task/done checklist of rows, each with a title, optional sub-line, and a done state. Completed rows get a filled brand tick box and a struck-through title. Use for step recaps, requirement lists, or 'what you'll need' boxes. For a single standalone checkbox row, use the sibling ChecklistItem.",
+      "props": "items: Array<{ title: string; sub?: string; done?: boolean }> (required). Renders nothing when empty. ChecklistItem (single row) takes: checked: boolean; label: string; description?: string.",
+      "example": "<Checklist items={[\n  { title: \"Connect your domain\", sub: \"DNS verified\", done: true },\n  { title: \"Add your first source\", done: false },\n  { title: \"Invite a teammate\" }\n]} />",
+      "role": "editorial",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "List": {
+      "description": "Branded vertical list with three marker styles: ordered (zero-padded 01/02 display-font counters in brand colour), bullet (brand dot), or check (brand tick inside a tinted brand-soft circle). Items are HTML strings supporting <strong> bold lead-ins; optional uppercase brand heading above the list.",
+      "props": "variant?: \"ordered\" | \"bullet\" | \"check\" (default \"bullet\"; aliases numbered/number→ordered, bulleted/dot→bullet, checked/checklist→check); items: string[] (each an HTML string); heading?: string",
+      "example": "<List variant=\"check\" heading=\"What you get\" items={[\"<strong>Fast setup</strong> in under five minutes\", \"No code required\", \"Cancel anytime\"]} />",
+      "role": "A list of related points, steps, or benefits with a consistent branded marker. Use ordered for sequential steps, bullet for general points, check for benefits/requirements/wins.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "steps, benefits lists, requirements, feature bullets"
+    },
+    "StepBlock": {
+      "description": "A numbered step in a how-to or sequence: an orange brand badge with the step number beside an uppercase title and body content. Use inside ordered procedures or walkthroughs.",
+      "props": "stepNumber (number|string, shown in the badge), title (string, uppercase heading), children/slot (step body content)",
+      "example": "<StepBlock stepNumber={1} title=\"Install the snippet\">Paste the script tag into your site's <head>.</StepBlock>",
+      "role": "A single numbered step card for procedures and walkthroughs.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "step-by-step instructions, how-to sequences, setup guides"
+    },
+    "ComparisonTable": {
+      "description": "Side-by-side comparison of two options (e.g. products, plans, approaches) across a set of features, with an optional per-row winner highlight. Renders as stacked cards on mobile and a table on wider screens. Cells reading 'yes'/'✓' or 'no'/'✕' display as green/red marks. Use to help readers choose between two clear alternatives.",
+      "props": "title?: string (optional heading above the table). optionALabel: string, optionBLabel: string (the two column headers). items: { feature: string; optionA: string; optionB: string; winner?: 'a' | 'b' | 'tie' }[] — one row per feature; winner highlights the winning column for that row. Renders nothing if items is empty.",
+      "example": "<ComparisonTable\n  title=\"Capture AI vs a generic chatbot\"\n  optionALabel=\"Capture AI\"\n  optionBLabel=\"Generic bot\"\n  items={[\n    { feature: \"Lead capture\", optionA: \"yes\", optionB: \"no\", winner: \"a\" },\n    { feature: \"Setup time\", optionA: \"5 minutes\", optionB: \"2+ hours\", winner: \"a\" },\n    { feature: \"Free tier\", optionA: \"yes\", optionB: \"yes\", winner: \"tie\" }\n  ]}\n/>",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "ProConBlock": {
+      "description": "Side-by-side Pros and Cons cards — a green pros column with checkmarks and a red cons column with crosses. Either column is omitted when its list is empty.",
+      "props": "pros?: string[]; cons?: string[]",
+      "example": "<ProConBlock pros={[\"Fast setup\", \"Great support\"]} cons={[\"Pricey at scale\"]} />",
+      "role": "Compare the upsides and downsides of a thing in two color-coded columns.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "ProsCons"
+      ],
+      "recommendedFor": "Reviews, comparisons, and buying-guide sections where you weigh advantages against drawbacks."
+    },
+    "BeforeAfter": {
+      "description": "Two-card side-by-side comparison contrasting a muted \"before\" state against a brand-coloured \"after\" state, each with an optional large headline number.",
+      "props": "before: { title: string; content: string; value?: string } (required) — the muted left/top card. after: { title: string; content: string; value?: string } (required) — the brand-coloured right/bottom card. `value` renders an optional big display number between the title and body. Renders nothing if either side is missing.",
+      "example": "<BeforeAfter before={{ title: \"Before\", value: \"2%\", content: \"Manual follow-up, leads slip through the cracks.\" }} after={{ title: \"After\", value: \"18%\", content: \"Automated capture converts every visitor.\" }} />",
+      "role": "Comparison / stat contrast block for blog body content.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Contrasting a before/after metric, outcome, or state within a post."
+    },
+    "ImageFeature": {
+      "description": "A captioned image figure with an optional photo credit and a float position (left, right, or full width). Renders a 16/9 framed image with an optional caption/credit footer bar; left/right float the figure beside text on wider screens.",
+      "props": "src (string, required image URL), alt (string, required alt text), caption?: string, credit?: string, position?: \"left\" | \"right\" | \"full\" (default \"full\")",
+      "example": "<ImageFeature src=\"/images/dashboard.png\" alt=\"Analytics dashboard\" caption=\"The redesigned analytics view.\" credit=\"Photo: Acme\" position=\"right\" />",
+      "role": "Embed a captioned image inside article body copy, optionally floated beside the text.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Inline article imagery with captions/credits; floated callout images alongside prose."
+    },
+    "Infographic": {
+      "description": "AI-generated, brand-locked infographic image. Frameless and borderless on purpose — the image carries all the information and renders at its natural aspect ratio (full width, auto height) so nothing is cropped. Use for full-bleed data/visual graphics where a caption strip or frame would distract. For framed, captioned, or floated photos use ImageFeature instead.",
+      "props": "src: string (required, image URL); alt: string (required, accessible description). Renders nothing when src is empty.",
+      "example": "<Infographic src=\"https://cdn.example.com/blog/how-it-works.png\" alt=\"Flow diagram showing the three-step capture process\" />",
+      "role": "media",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Full-width AI-generated infographics or data visualisations embedded in article body."
+    },
+    "CodeSnippet": {
+      "description": "A dark, copyable code block with a header bar showing the filename or language and a one-click copy button. Use for terminal commands, config snippets, and short code samples in a post.",
+      "props": "code: string (required) — the raw code to display and copy. language?: string (default 'text') — sets the header label and the language-* class for highlighters. filename?: string — shown in the header instead of the language when provided.",
+      "example": "<CodeSnippet language=\"bash\" filename=\"install.sh\" code={`npm install blog-kit\nnpm run build`} />",
+      "role": "editorial",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "CTABanner": {
+      "description": "Dark, attention-grabbing call-to-action banner with a brand-coloured radial glow, a bold uppercase heading, a short supporting line, and a solid brand CTA button. Use once near the end of a post to drive the reader to a demo, signup, or contact action.",
+      "props": "heading?: string (default 'See it on your own site'). description?: string (default a short supporting sentence). ctaText?: string (default 'Book a demo'). ctaHref?: string (default '/book-demo'). No children.",
+      "example": "<CTABanner heading=\"Ready to capture more leads?\" description=\"Deploy in under ten minutes — paste a tag and watch leads land.\" ctaText=\"Book a demo\" ctaHref=\"/book-demo\" />",
+      "role": "conversion",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "any"
+    },
+    "NewsletterCTA": {
+      "description": "Dark email-capture block with a brand radial glow: heading + description on one side and an inline subscribe form (email field + honeypot + submit button) on the other. The form posts natively to its action URL.",
+      "props": "heading?: string (default 'One email, once a week.'); description?: string (default 'Field-tested ideas for turning chat traffic into revenue. No filler.'); action?: string (form POST target, default '/api/newsletter'); placeholder?: string (email input placeholder, default 'you@studio.com'); buttonText?: string (default 'Subscribe')",
+      "example": "<NewsletterCTA heading=\"One email, once a week.\" description=\"Field-tested ideas for turning chat traffic into revenue.\" action=\"/api/newsletter\" buttonText=\"Subscribe\" />",
+      "role": "Inline newsletter / email-signup call-to-action for placing within or at the end of blog posts.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Mid-article or end-of-article email capture in long-form blog content."
+    },
+    "AuthorCard": {
+      "description": "Author byline card showing an avatar (or initials fallback), name, role, optional bio, and optional labelled links. Used at the foot of a post or in an author sidebar.",
+      "props": "name: string (required); role?: string; avatar?: string (image URL — falls back to name initials when absent); bio?: string; links?: { label: string; href: string }[]",
+      "example": "<AuthorCard name=\"Jane Doe\" role=\"Head of Content\" avatar=\"/team/jane.jpg\" bio=\"Jane writes about growth and lifecycle marketing.\" links={[{ label: \"Twitter\", href: \"https://x.com/jane\" }]} />",
+      "role": "Author attribution / byline block for blog posts.",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Post footers and author bios."
+    },
+    "RelatedPosts": {
+      "description": "\"Keep reading\" grid of related-post cards shown at the end of an article. Each card links to another post with an optional featured-image thumbnail (a tokenised gradient placeholder is used when no image is given), an optional category pill, a title, and a clamped two-line excerpt.",
+      "props": "posts: { slug: string; title: string; excerpt?: string; date?: string; category?: string; featuredImage?: string; featuredImageAlt?: string }[] (required; renders nothing when empty). heading?: string (default 'Keep reading'). hrefBase?: string (default '/blog/' — prepended to each post's slug for the card link). No children.",
+      "example": "<RelatedPosts heading=\"Keep reading\" posts={[\n  { slug: \"verify-before-launch\", title: \"Verify before you launch\", excerpt: \"The one step most teams skip.\", category: \"Guides\", featuredImage: \"/img/verify.jpg\" },\n  { slug: \"migration-checklist\", title: \"The migration checklist\", excerpt: \"Everything to confirm before cutover.\", category: \"Playbooks\" }\n]} />",
+      "role": "navigation",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "FurtherReading": {
+      "description": "Card listing external resources for further reading. Each row pairs a title that links out (new tab, nofollow) with a short source/publisher label. Renders nothing when no sources are supplied.",
+      "props": "sources: { title: string; source: string; url: string }[] — the resources to list (renders nothing when empty). heading?: string — optional heading override (default \"Further reading\"). No children.",
+      "example": "<FurtherReading\n  sources={[\n    { title: \"The 2024 State of AI Report\", source: \"Stanford HAI\", url: \"https://example.com/report\" },\n    { title: \"Original benchmark methodology\", source: \"arXiv\", url: \"https://example.com/paper\" },\n  ]}\n/>",
+      "role": "reference",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "TableOfContents": {
+      "description": "Auto-generated 'In this article' navigation. Scans the article's <h2> headings at runtime, lists them numbered, smooth-scrolls on click, and highlights the heading currently in view (scrollspy). Renders nothing if the article has no <h2>s.",
+      "props": "heading?: string (label above the list, default 'In this article'). scope?: string (CSS selector for the element whose <h2>s become entries, default 'article'). No children — the list is built from the live document by the toc behaviour.",
+      "example": "<TableOfContents />",
+      "role": "navigation",
+      "recommendedFor": "long-form",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "TimelineBlock": {
+      "description": "Vertical timeline of dated milestones connected by a rail — a chronological recap. Use to summarise a sequence of events, a project history, or a step-by-step story over time.",
+      "props": "events: { date: string; title: string; description: string }[] (chronological, oldest to newest). Renders nothing when empty. Children: optional MDX fallback used only when no events are passed.",
+      "example": "<TimelineBlock events={[\n  { date: \"Jan 2024\", title: \"Kickoff\", description: \"Scoped the migration and audited the old site.\" },\n  { date: \"Mar 2024\", title: \"Build\", description: \"Rebuilt every template on the new stack.\" },\n  { date: \"May 2024\", title: \"Launch\", description: \"Cut over with zero ranking loss.\" }\n]} />",
+      "role": "editorial",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "TimelineRecap"
+      ]
+    },
+    "StatCard": {
+      "description": "A single highlighted statistic — a big brand-coloured number (with an optional unit), an uppercase label, optional supporting description, and an optional dashed-divider source attribution row that links out when a URL is given. Use to make one striking metric stand out in the flow of an article.",
+      "props": "value: string (the metric, e.g. \"3.2×\" or \"87%\"; if no explicit unit is given the trailing non-numeric part is auto-split off as the unit). label: string (short uppercase caption). description?: string (supporting line under the label). unit?: string (overrides the auto-split unit, e.g. \"×\", \"s\", \"%\"). source?: string (attribution text shown in a dashed-divider row, e.g. \"Forrester, 2024\"). sourceUrl?: string (when set alongside source, the row becomes an outbound link). No children.",
+      "example": "<StatCard value=\"3.2×\" label=\"More qualified leads\" description=\"Average lift across the first 90 days.\" source=\"Capture AI customer data, 2024\" sourceUrl=\"https://example.com/report\" />",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "capture",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "VerdictCard": {
+      "description": "A dark, brand-bordered verdict panel for reviews and comparisons: an uppercase kicker with an optional /10 score, then a big verdict headline, a one-line summary, and optional bullet chips. Use once near the top or bottom of a review to deliver the bottom-line call.",
+      "props": "verdict: string (the headline call). summary: string (one-line rationale). score?: number (shown as <score>/10 in the header). kicker?: string (uppercase label above; default 'The verdict'). bullets?: string[] (chip row under the summary). winner?: string (legacy — renders a 'Winner: <name>' pill above the verdict).",
+      "example": "<VerdictCard\n  verdict=\"Worth every penny\"\n  score={9}\n  kicker=\"The verdict\"\n  summary=\"The best lead-capture widget we tested — fast to deploy and genuinely converts.\"\n  bullets={[\"Easy setup\", \"Great support\", \"Fair pricing\"]}\n/>",
+      "role": "editorial",
+      "recommendedFor": "review",
+      "pack": "capture",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "ScoreBar": {
+      "description": "A labelled rating row with a numeric score and a gradient-filled progress bar. Use to visualise a single criterion's rating (e.g. an out-of-10 review score) so readers can compare strengths at a glance.",
+      "props": "label: string (uppercase criterion name). score: number (the value shown and used for the fill). maxScore?: number (denominator the fill is computed against, default 10). No children.",
+      "example": "<ScoreBar label=\"Battery life\" score={8.5} maxScore={10} />",
+      "role": "data",
+      "recommendedFor": "reviews",
+      "pack": "capture",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "NumberedCard": {
+      "description": "A card with a floating zero-padded number badge, an uppercase title, and a short body paragraph — used to enumerate steps, features, or ranked points within prose.",
+      "props": "number (number|string, zero-padded to 2 digits), title (string), description (string body text; or use children/slot for body content)",
+      "example": "<NumberedCard number={1} title=\"Map Your Funnel\" description=\"Identify every stage a visitor passes through before converting.\" />",
+      "role": "Numbered enumeration card for steps, features, or ranked points",
+      "pack": "capture",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Numbered lists of steps or features that need more visual weight than a plain ordered list"
+    },
+    "MetricHighlight": {
+      "description": "One or more headline metrics. A single metric renders as a big brand-filled hero (giant number + label + optional change note + optional source attribution). Two or more render as a responsive grid of bordered stat cards (2, 3, or 4-up). Use for the punchy 'numbers that matter' moment in a post.",
+      "props": "metrics: Array<{ value: string; label: string; change?: string; source?: string; sourceUrl?: string }>. value is the big number (e.g. '68%' or '3.2x'); label is the uppercase caption; change is an optional secondary note (e.g. 'vs. industry avg'); source/sourceUrl add a dashed-divider attribution row that links out when sourceUrl is set. No children.",
+      "example": "<MetricHighlight metrics={[\n  { value: \"68%\", label: \"Forms abandoned\", change: \"before optimisation\", source: \"Zuko benchmarks, 2026\", sourceUrl: \"https://example.com\" },\n  { value: \"3.2x\", label: \"Lead lift\", change: \"after redesign\" }\n]} />",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "capture",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "ChecklistItem": {
+      "description": "A single checklist row — a checkbox state, a bold label, and optional supporting text. Authored inside <Checklist>.",
+      "props": "checked: boolean (required) — ticked/filled when true. label: string (required) — the row label. description?: string — optional supporting line beneath the label.",
+      "example": "<Checklist>\n  <ChecklistItem checked={true} label=\"Domain verified\" />\n  <ChecklistItem checked={false} label=\"DNS propagated\" description=\"Can take up to 48h.\" />\n</Checklist>",
+      "role": "editorial",
+      "recommendedFor": "any",
+      "pack": "core",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "CaseStudyHero": {
+      "description": "A dark, full-width case-study banner: a light logo plate (a client logo image, an HTML/text wordmark, or the auto-broken client name) beside a body with uppercase tag chips, a headline, a sub-line, and a row of brand-coloured result tiles (big number + uppercase label). Use to open or anchor a case study / results write-up with the client's headline outcomes.",
+      "props": "logoImage?: string (client logo URL — preferred plate content). logo?: string (HTML/text wordmark, supports <br/>, used when no logoImage). client?: string (client name — used for the logo img alt, and as a last-resort plate auto-broken at spaces). chips?: string[] (uppercase tag chips above the headline). title?: string (the headline). sub?: string (one-line sub under the headline). results?: { num: string; label: string }[] (result tiles — each a big number + an uppercase label). No children.",
+      "example": "<CaseStudyHero\n  client=\"Northwind Logistics\"\n  chips={[\"B2B\", \"Lead gen\", \"6 months\"]}\n  title=\"3.4× more booked demos\"\n  sub=\"A rebuilt funnel and tighter qualification turned cold traffic into pipeline.\"\n  results={[\n    { num: \"+218%\", label: \"Qualified leads\" },\n    { num: \"3.4×\", label: \"Demos booked\" },\n    { num: \"-41%\", label: \"Cost per lead\" }\n  ]}\n/>",
+      "role": "editorial",
+      "recommendedFor": "case-study",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "CaseStudy",
+        "CaseStudyBanner"
+      ]
+    },
+    "ResultsStrip": {
+      "description": "A horizontal strip of bordered KPI cells — each with an uppercase label, a big brand-coloured number, an optional change delta (mono, green for up / red for down), and an optional dashed-divider source attribution row. Use for the at-a-glance 'results / outcomes' moment in a case-study or report post. Collapses to a 2-up grid on narrow screens.",
+      "props": "kpis: Array<{ label: string; num: string; delta?: string; deltaDirection?: 'up' | 'down'; source?: string; sourceUrl?: string }>. label is the uppercase caption; num is the big brand number (e.g. '+182%' or '4.1x'); delta is an optional change indicator rendered in mono (deltaDirection 'down' turns it red, otherwise green); source/sourceUrl add a dashed-divider attribution row that links out when sourceUrl is set. No children.",
+      "example": "<ResultsStrip kpis={[\n  { label: \"Organic traffic\", num: \"+182%\", delta: \"YoY\", deltaDirection: \"up\", source: \"GA4, 2026\", sourceUrl: \"https://example.com\" },\n  { label: \"Conversions\", num: \"4.1x\", delta: \"vs. baseline\" },\n  { label: \"Cost per lead\", num: \"-43%\", delta: \"down\", deltaDirection: \"down\" },\n  { label: \"Keywords top 3\", num: \"57\" }\n]} />",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "KeyMetric": {
+      "description": "A dark, full-width hero metric panel for the standout number in an article: one oversized brand-coloured figure beside a copy column with an optional uppercase label, a rich-text title (accepts inline HTML), a supporting sub-line, and an optional dashed-divider source attribution row that links out when a URL is given. Use once to make a single headline statistic land with weight.",
+      "props": "number: string (the oversized headline figure, e.g. \"3.2×\" or \"87%\"). label?: string (short uppercase caption above the title). title?: string (rich-text headline; accepts inline HTML, rendered as markup). sub?: string (supporting line under the title). source?: string (attribution text shown in a dashed-divider row, e.g. \"HubSpot, 2024\"). sourceUrl?: string (when set alongside source, the row becomes an outbound link). No children.",
+      "example": "<KeyMetric\n  number=\"3.2×\"\n  label=\"More qualified leads\"\n  title=\"Teams using lead capture saw <strong>3.2× more qualified leads</strong> in 90 days\"\n  sub=\"Average lift across the first quarter after launch.\"\n  source=\"HubSpot benchmark, 2024\"\n  sourceUrl=\"https://example.com/report\"\n/>",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "KeywordTable": {
+      "description": "An SEO keyword-ranking table. Each row shows a keyword, its monthly search volume, a colour-coded difficulty pill (low/medium/high), the previous and current rank positions, and a coloured up/down rank-change delta with an arrow. Scrolls horizontally on narrow screens with edge-fade hints. Use to report keyword performance or ranking movement in an SEO/marketing post. Renders nothing if rows is empty.",
+      "props": "rows: { keyword: string; volume: string; difficulty: number; was?: number | string; now: number | string; delta: number | string }[]. keyword is the term; volume is the pre-formatted monthly search volume (e.g. '1.2k'); difficulty is a 0–100 score bucketed into low (<40, green) / med (<60, amber) / high (≥60, red); was is the prior rank (defaults to an em dash if omitted); now is the current rank; delta is the signed rank change — a negative value renders as a red down-arrow, otherwise a green up-arrow, and the magnitude is shown. No children.",
+      "example": "<KeywordTable rows={[\n  { keyword: \"ai chatbot for small business\", volume: \"2.4k\", difficulty: 38, was: 14, now: 6, delta: 8 },\n  { keyword: \"lead capture software\", volume: \"1.1k\", difficulty: 55, was: 9, now: 11, delta: -2 },\n  { keyword: \"website chat widget\", volume: \"880\", difficulty: 72, was: \"—\", now: 19, delta: 5 }\n]} />",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "ChannelMixBars": {
+      "description": "A horizontal bar breakdown of a single metric across channels (e.g. traffic or spend by source). Shows an uppercase heading with an optional total, then one labelled row per channel with a proportional fill and a right-aligned value. The first channel uses the brand fill; later channels step through a neutral colour ramp so the leading channel stands out. Use to show how a total splits across a handful of named channels.",
+      "props": "rows: { name: string; value: number; display?: string }[] — one row per channel; name is the uppercase row label, value sets the bar width (relative to the largest value), and display is an optional pre-formatted figure shown on the right (falls back to value). total?: string (shown in the header after 'Total · '). period?: string (header label, default 'Channel split'). No children.",
+      "example": "<ChannelMixBars\n  period=\"Sessions by channel\"\n  total=\"48,200\"\n  rows={[\n    { name: \"Organic\", value: 21800, display: \"21.8k\" },\n    { name: \"Direct\", value: 12400, display: \"12.4k\" },\n    { name: \"Paid\", value: 8600, display: \"8.6k\" },\n    { name: \"Social\", value: 3500, display: \"3.5k\" },\n    { name: \"Referral\", value: 1900, display: \"1.9k\" }\n  ]}\n/>",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "TrafficChart": {
+      "description": "A compact SVG line chart that compares a metric across two periods over time — an uppercase title and a two-item legend (this period / previous period), then a small chart with a solid brand line plus point markers for the current series and a dashed neutral line for the previous series, with mono-font x-axis labels. Use to visualise a trend (organic sessions, traffic, signups) and its period-over-period comparison inside an article or case study.",
+      "props": "title?: string (uppercase heading; defaults to \"Organic sessions · 6 months\"). series?: { current?: number[]; previous?: number[] } (the two comparable series; current renders as the solid brand line with point markers, previous as the dashed neutral line — either may be omitted). labels?: string[] (x-axis tick labels, one per data point). No children.",
+      "example": "<TrafficChart title=\"Organic sessions · 6 months\" series={{ current: [4200, 5100, 6800, 9300, 12400, 15800], previous: [3900, 4100, 4400, 4800, 5200, 5600] }} labels={[\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]} />",
+      "role": "data",
+      "recommendedFor": "case studies and reports where you show a trend over time and its period-over-period comparison",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "LineChart",
+        "TrendChart"
+      ]
+    },
+    "SerpPreview": {
+      "description": "A mock search-engine results page (SERP): a rounded search bar showing the query, followed by a stack of result rows — each with a URL breadcrumb, a blue clickable-looking heading, and a snippet. Any row can be flagged as a 'Sponsored' ad. Use to illustrate how a page, keyword, or competitor appears in Google search results.",
+      "props": "query: string (text shown in the search bar). results?: Array<{ title: string; url: string; description: string; ad?: boolean }> — title is the blue heading (plain text); url is the breadcrumb line (HTML allowed, wrap the domain in <strong>); description is the snippet (HTML allowed, <em> bolds matched terms); ad: true flags the row with a 'Sponsored' tag. No children.",
+      "example": "<SerpPreview\n  query=\"best crm for small business\"\n  results={[\n    { ad: true, url: \"<strong>acme.com</strong> › crm\", title: \"Acme CRM — Built for Small Teams\", description: \"The <em>best CRM for small business</em>. Free 14-day trial.\" },\n    { url: \"<strong>example.com</strong> › blog › crm-guide\", title: \"7 Best CRMs for Small Business (2026 Guide)\", description: \"We tested 20 tools to find the <em>best CRM</em> for growing teams.\" }\n  ]}\n/>",
+      "role": "data",
+      "recommendedFor": "seo",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "SearchPreview",
+        "GoogleResult"
+      ]
+    },
+    "AdPreview": {
+      "description": "A mock paid-ad creative shown in one of two platform styles. \"meta\" renders a social-feed ad: a round brand avatar (seeded from the brand's first two letters), a \"Sponsored\" line, body copy, a 1.91:1 media panel, and a footer with the display site plus a call-to-action button. \"google\" renders a search ad: an \"Ad\" pill with the site, a display-URL breadcrumb, a blue headline, a description, and optional sitelinks in a dashed-divider row. Use to illustrate ad copy, landing-page messaging, or PPC examples inside an article.",
+      "props": "platform?: 'meta' | 'google' (which ad style; defaults to 'meta'). For meta: brand?: string (advertiser name; first two letters seed the avatar), sponsored?: string (small label under the brand, defaults to 'Sponsored'), copy?: string (ad body; HTML allowed), image?: string (creative image URL for the media panel), buttonText?: string (CTA label, defaults to 'Learn more'). Shared: site?: string (display site/domain). For google: url?: string (display URL breadcrumb; HTML allowed — wrap the domain in <strong>), headline?: string (the blue clickable headline), description?: string (line under the headline), sitelinks?: string[] (optional sitelink labels). No children.",
+      "example": "<AdPreview\n  platform=\"meta\"\n  brand=\"Capture AI\"\n  sponsored=\"Sponsored\"\n  copy=\"Turn website visitors into booked leads — <strong>24/7</strong>.\"\n  image=\"https://example.com/ad.jpg\"\n  site=\"captureai.com\"\n  buttonText=\"Get a demo\"\n/>",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "AdPreviewPair": {
+      "description": "A layout container that lays two ad-mockup cards side by side (for example a Meta creative beside a Google text ad), collapsing to a single column on narrow screens. It owns only the responsive two-up grid; the ad cards themselves are passed as children.",
+      "props": "children (required) — the ad cards to lay out side by side, typically two. No other props; AdPreviewPair has no styling of its own beyond the grid.",
+      "example": "<AdPreviewPair>\n  <div className=\"bk-serp-preview\">…meta ad mockup…</div>\n  <div className=\"bk-serp-preview\">…google ad mockup…</div>\n</AdPreviewPair>",
+      "role": "layout",
+      "recommendedFor": "Showing two paid-ad creatives next to each other in advertising / paid-media posts.",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "AuditScores": {
+      "description": "A responsive row of semicircular score gauges (0–100) for audit / scorecard sections. Each card draws a faint track arc plus a coloured progress arc whose sweep reflects the score, a big number, an uppercase label, and an optional sub-line. Tone is automatic from the score: 80+ shows the brand colour, 50–79 a warning amber, below 50 a danger red. Use to summarise a handful of graded dimensions (e.g. SEO, performance, accessibility) at a glance.",
+      "props": "items: { label: string; score: number (0–100); sub?: string }[] (each gauge: a short uppercase label, the 0–100 score that drives both the arc sweep and the good/warn/bad tone, and an optional secondary line under the label). No children. Renders nothing when items is empty.",
+      "example": "<AuditScores items={[\n  { label: \"Performance\", score: 92, sub: \"Core Web Vitals\" },\n  { label: \"SEO\", score: 64, sub: \"On-page\" },\n  { label: \"Accessibility\", score: 38, sub: \"WCAG AA\" }\n]} />",
+      "role": "data",
+      "recommendedFor": "review",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "AuditFindings": {
+      "description": "A bordered, divided list of audit findings. Each row leads with a small colour-coded severity dot (high / med / low), then a title and supporting description, with a pill-shaped count on the right. Use to summarise the issues surfaced by an audit — SEO, performance, accessibility, security — as a scannable severity-ranked list.",
+      "props": "rows?: AuditFindingRow[] where each row is { title: string (uppercase finding name), description?: string (one-line explanation), count?: string | number (pill-shaped count on the right, e.g. number of affected pages), severity?: \"high\" | \"med\" | \"low\" (tone of the leading dot — danger / warn / success; defaults to \"med\") }. No children.",
+      "example": "<AuditFindings rows={[{ title: \"Missing meta descriptions\", description: \"Pages with no description tag.\", count: 14, severity: \"high\" }, { title: \"Slow LCP\", description: \"Largest Contentful Paint over 2.5s.\", count: 6, severity: \"med\" }, { title: \"Image alt text\", description: \"All images have descriptive alt text.\", count: 0, severity: \"low\" }]} />",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "AuditTable",
+        "FindingsList",
+        "IssueList"
+      ]
+    },
+    "DeliveryComparison": {
+      "description": "A flexible multi-column comparison matrix for weighing several options across a set of criteria (e.g. delivery models, pricing tiers, vendors). The first column lists the criterion (with an optional sub-line); each remaining column is one option, with a header label. Use when comparing three or more things, or when a side-by-side of two isn't enough — for exactly two options prefer ComparisonTable. The table scrolls horizontally on narrow screens with edge-fade hints.",
+      "props": "columns: string[] — the option/column headers (rendered across the top; a blank header sits above the criterion column). rows: { label: string; sub?: string; values: string[] }[] — one row per criterion; `label` is the bold left-hand cell, optional `sub` is a secondary line beneath it, and `values` holds one cell per column (same order as `columns`). Renders nothing if rows is empty.",
+      "example": "<DeliveryComparison\n  columns={[\"In-house\", \"Agency\", \"High Jump Digital\"]}\n  rows={[\n    { label: \"Time to launch\", sub: \"From kickoff\", values: [\"3+ months\", \"6–8 weeks\", \"2 weeks\"] },\n    { label: \"Monthly cost\", values: [\"£8k+\", \"£5k\", \"£2.5k\"] },\n    { label: \"Reporting\", values: [\"Manual\", \"Monthly deck\", \"Live dashboard\"] }\n  ]}\n/>",
+      "role": "data",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    },
+    "RegionCallout": {
+      "description": "A bordered grid of office / region cells, each pairing a flag-or-colour swatch with an uppercase office name and a brand-coloured monospace phone number. Use to surface multiple regional contact points (e.g. UK / US / EU offices) inside an article.",
+      "props": "offices?: Array<{ name: string; phone?: string; flag?: string }>. name: office/region label (rendered uppercase). phone: optional phone number (brand monospace). flag: optional CSS background for the swatch — a colour, gradient, or url(...).",
+      "example": "<RegionCallout offices={[{ name: \"London\", phone: \"+44 20 7946 0000\", flag: \"linear-gradient(180deg,#012169 33%,#fff 33%,#fff 66%,#C8102E 66%)\" }, { name: \"New York\", phone: \"+1 212 555 0100\" }]} />",
+      "role": "Regional contact / office-directory callout for displaying multiple location phone numbers within blog body content.",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [
+        "OfficeGrid",
+        "RegionContacts"
+      ],
+      "recommendedFor": "Listing a handful of regional offices with their phone numbers in a compact bordered grid."
+    },
+    "ServicePromoCard": {
+      "description": "Linked promo row that points readers to a service or related page: an icon tile on the left, a bold uppercase title with an optional sub-line in the middle, and a brand-coloured uppercase arrow label on the right. The entire card is a single link with a brand-tint gradient background and a brand hover border. Use inline within a post to surface a relevant service or next step.",
+      "props": "title: string (required, rendered bold uppercase). sub?: string (optional sub-line under the title). href?: string (link target for the whole card, default '#'). icon?: string (raw inline SVG string for the icon tile; defaults to a search glyph). arrowLabel?: string (right-hand call-to-action label, default 'Learn more →'). No children.",
+      "example": "<ServicePromoCard title=\"AI chat for your site\" sub=\"See how Capture turns visitors into leads\" href=\"/services/ai-chat\" arrowLabel=\"Learn more →\" />",
+      "role": "conversion",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": [],
+      "recommendedFor": "Inline mid- or end-of-article link to a service or related page in long-form blog content."
+    },
+    "ProseList": {
+      "description": "A body-copy bullet or ordered list with branded markers — \"ul\" shows a small brand dash before each line, \"ol\" shows zero-padded display-font counters (01, 02, …) in the brand colour. Items are HTML strings (supporting <strong> bold lead-ins), or {title, description} objects — any object item flips the whole list into a two-column grid that aligns bold titles against their descriptions across every row. Optional dashed dividers add breathing room between long items.",
+      "props": "variant?: \"ul\" | \"ol\" (default \"ul\"; ul = dash markers, ol = zero-padded counters). items: Array of HTML strings, or {title?: string, description?: string} objects — passing any object with a title or description switches the list to aligned two-column grid mode. divided?: boolean (default false; adds a dashed divider between items). No children.",
+      "example": "<ProseList variant=\"ol\" divided items={[{ title: \"Audit the content\", description: \"Map every existing page to a target keyword and intent.\" }, { title: \"Fix the gaps\", description: \"Brief and publish for the queries with no matching page.\" }]} />",
+      "role": "structure",
+      "recommendedFor": "any",
+      "pack": "hjd",
+      "frameworks": [
+        "react",
+        "astro"
+      ],
+      "aliases": []
+    }
+  }
+}

package/dist/core/manifest/frontmatter.json

@@ -0,0 +1,19 @@
+{
+  "$comment": "Frontmatter field docs surfaced by the MCP's get_frontmatter_schema. Allowed categories/templates and validation bounds remain per-site in sites/*.json; the field DOCS live here as the single source of truth. Phase 1 reconciles against the MCP's FRONTMATTER_FIELD_DOCS / OPTIONAL_FRONTMATTER_FIELDS.",
+  "required": {
+    "title": "50–65 chars. Keyword-first headline.",
+    "slug": "URL-safe identifier; the canonical URL key. Never change it after publish (breaks the live URL).",
+    "description": "150–160 char meta description.",
+    "date": "ISO date (YYYY-MM-DD).",
+    "author": "Author display name.",
+    "category": "One of the site's allowed categories.",
+    "tags": "Array of topical tags.",
+    "template": "One of the site's allowed templates (a suggestion, not a constraint).",
+    "seoKeyword": "Primary target keyword for the post."
+  },
+  "optional": {
+    "featuredImage": "Absolute URL of the card/hero image.",
+    "featuredImageAlt": "Alt text for the featured image.",
+    "draft": "true hides the post from the live site on next build."
+  }
+}