@highjumpdigitalsoftware/blog-kit 0.6.0

package/dist/react/components-map.js

@@ -0,0 +1,120 @@
+/* ============================================================
+   blog-kit React component MAPS — Next-free.
+   ------------------------------------------------------------
+   The presentational React components are framework-neutral, but
+   the sibling `react/index.ts` barrel ALSO re-exports
+   <BlogBehaviors>, which imports `next/navigation`. Evaluating that
+   barrel therefore pulls Next, so it cannot be imported under raw
+   Node / Astro SSR (no Next).
+
+   This module re-exports ONLY the component MAPS (no BlogBehaviors),
+   so the runtime-MDX render path (Next OR Astro) can import the map
+   without dragging Next in. `react/index.ts` re-exports these maps so
+   the maps stay single-source — edit the imports here, not in two
+   places.
+   ============================================================ */
+import { AdPreview } from "./AdPreview.js";
+import { AdPreviewPair } from "./AdPreviewPair.js";
+import { AuditFindings } from "./AuditFindings.js";
+import { AuditScores } from "./AuditScores.js";
+import { AuthorCard } from "./AuthorCard.js";
+import { BeforeAfter } from "./BeforeAfter.js";
+import { CTABanner } from "./CTABanner.js";
+import { CalloutBox } from "./CalloutBox.js";
+import { CaseStudyHero } from "./CaseStudyHero.js";
+import { ChannelMixBars } from "./ChannelMixBars.js";
+import { Checklist } from "./Checklist.js";
+import { ChecklistItem } from "./ChecklistItem.js";
+import { CodeSnippet } from "./CodeSnippet.js";
+import { ComparisonTable } from "./ComparisonTable.js";
+import { Definition } from "./Definition.js";
+import { DeliveryComparison } from "./DeliveryComparison.js";
+import { FAQList } from "./FAQList.js";
+import { FurtherReading } from "./FurtherReading.js";
+import { ImageFeature } from "./ImageFeature.js";
+import { Infographic } from "./Infographic.js";
+import { KeyMetric } from "./KeyMetric.js";
+import { KeywordTable } from "./KeywordTable.js";
+import { List } from "./List.js";
+import { MetricHighlight } from "./MetricHighlight.js";
+import { NewsletterCTA } from "./NewsletterCTA.js";
+import { NumberedCard } from "./NumberedCard.js";
+import { ProConBlock } from "./ProConBlock.js";
+import { ProseList } from "./ProseList.js";
+import { QuoteBlock } from "./QuoteBlock.js";
+import { RegionCallout } from "./RegionCallout.js";
+import { RelatedPosts } from "./RelatedPosts.js";
+import { ResultsStrip } from "./ResultsStrip.js";
+import { ScoreBar } from "./ScoreBar.js";
+import { SerpPreview } from "./SerpPreview.js";
+import { ServicePromoCard } from "./ServicePromoCard.js";
+import { StatCard } from "./StatCard.js";
+import { StepBlock } from "./StepBlock.js";
+import { TableOfContents } from "./TableOfContents.js";
+import { TimelineBlock } from "./TimelineBlock.js";
+import { TipBox } from "./TipBox.js";
+import { TrafficChart } from "./TrafficChart.js";
+import { VerdictCard } from "./VerdictCard.js";
+export const kitComponents = {
+    AdPreview,
+    AdPreviewPair,
+    AuditFindings,
+    AuditScores,
+    AuthorCard,
+    BeforeAfter,
+    CTABanner,
+    CalloutBox,
+    CaseStudyHero,
+    ChannelMixBars,
+    Checklist,
+    ChecklistItem,
+    CodeSnippet,
+    ComparisonTable,
+    Definition,
+    DeliveryComparison,
+    FAQList,
+    FurtherReading,
+    ImageFeature,
+    Infographic,
+    KeyMetric,
+    KeywordTable,
+    List,
+    MetricHighlight,
+    NewsletterCTA,
+    NumberedCard,
+    ProConBlock,
+    ProseList,
+    QuoteBlock,
+    RegionCallout,
+    RelatedPosts,
+    ResultsStrip,
+    ScoreBar,
+    SerpPreview,
+    ServicePromoCard,
+    StatCard,
+    StepBlock,
+    TableOfContents,
+    TimelineBlock,
+    TipBox,
+    TrafficChart,
+    VerdictCard,
+};
+/** Old MDX names kept renderable during migration → canonical component. */
+export const aliasComponents = {
+    AuditTable: AuditFindings,
+    CaseStudy: CaseStudyHero,
+    CaseStudyBanner: CaseStudyHero,
+    FindingsList: AuditFindings,
+    GoogleResult: SerpPreview,
+    IssueList: AuditFindings,
+    LineChart: TrafficChart,
+    OfficeGrid: RegionCallout,
+    ProsCons: ProConBlock,
+    PullQuote: QuoteBlock,
+    RegionContacts: RegionCallout,
+    SearchPreview: SerpPreview,
+    TimelineRecap: TimelineBlock,
+    TrendChart: TrafficChart,
+};
+export const blogComponents = { ...kitComponents, ...aliasComponents };
+//# sourceMappingURL=components-map.js.map

package/dist/react/components-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-map.js","sourceRoot":"","sources":["../../react/components-map.ts"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+export { kitComponents, aliasComponents, blogComponents } from "./components-map";
+/** Client-side activator for interactive components — render once inside
+    the post route's `.blog-root`. See react/BlogBehaviors.tsx. */
+export { BlogBehaviors } from "./BlogBehaviors";
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElF;kEACkE;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,13 @@
+/* blog-kit React adapter — barrel (generated by assembler).
+   blogComponents is the map passed to <MDXRemote components={...} />.
+   Per-site custom components merge on top in the site's /blog route.
+
+   The component MAPS now live in ./components-map (Next-free) so the
+   Astro runtime-MDX render path can import the map WITHOUT pulling
+   <BlogBehaviors> (which imports next/navigation). This barrel keeps
+   its full public surface — maps + BlogBehaviors — for the Next path. */
+export { kitComponents, aliasComponents, blogComponents } from "./components-map.js";
+/** Client-side activator for interactive components — render once inside
+    the post route's `.blog-root`. See react/BlogBehaviors.tsx. */
+export { BlogBehaviors } from "./BlogBehaviors.js";
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;yEAOyE;AACzE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElF;kEACkE;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@highjumpdigitalsoftware/blog-kit",
+  "version": "0.6.0",
+  "type": "module",
+  "description": "Canonical, framework-agnostic blog component kit. One shared core (CSS tokens + .bk-* styles + manifest + behaviours) consumed by thin React (Next.js) and Astro adapters. The blog-publisher MCP reads core/manifest as its single source of truth, and sites can vendor core/ + an adapter at build time. It ALSO ships as an installable package with a first-class managed path on BOTH Next.js and Astro: a swappable content-source adapter (local files or our hosted content API), /blog + /blog/[slug] route surfaces (Next ISR or Astro SSR with request-time MDX compile), an optional revalidate route, and a framework-aware connect/init CLI.",
+  "license": "SEE LICENSE IN LICENSE",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "core",
+    "react",
+    "astro",
+    "templates/blogkit",
+    "templates/blogkit-astro",
+    "README.md",
+    "INTEGRATION.md"
+  ],
+  "bin": {
+    "blog-kit": "dist/package/cli/index.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/package/index.d.ts",
+      "import": "./dist/package/index.js"
+    },
+    "./astro": {
+      "types": "./dist/package/astro/index.d.ts",
+      "import": "./dist/package/astro/index.js"
+    },
+    "./astro/Article.astro": "./astro/blogkit/Article.astro",
+    "./astro/BlogIndex.astro": "./astro/blogkit/BlogIndex.astro",
+    "./astro/*": "./astro/*",
+    "./styles.css": "./dist/core/css/index.css",
+    "./components": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "demo": "echo 'Open demo/index.html in a browser to preview components across themes.'",
+    "build": "tsc -p tsconfig.package.json && node scripts/pkg-copy-assets.mjs",
+    "clean": "rm -rf dist",
+    "prepack": "npm run clean && npm run build",
+    "selfcheck": "node scripts/pkg-selfcheck.mjs",
+    "validate-index": "node scripts/validate-blog-index.mjs"
+  },
+  "engines": {
+    "node": ">=18.18.0"
+  },
+  "dependencies": {
+    "gray-matter": "^4.0.3",
+    "reading-time": "^1.5.0"
+  },
+  "peerDependencies": {
+    "@mdx-js/mdx": "^3",
+    "astro": ">=5",
+    "next": ">=14",
+    "next-mdx-remote": "^6.0.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "rehype-autolink-headings": "^7",
+    "rehype-pretty-code": ">=0.13",
+    "rehype-slug": "^6",
+    "remark-gfm": "^4"
+  },
+  "peerDependenciesMeta": {
+    "@mdx-js/mdx": {
+      "optional": true
+    },
+    "astro": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "next-mdx-remote": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "rehype-autolink-headings": {
+      "optional": true
+    },
+    "rehype-pretty-code": {
+      "optional": true
+    },
+    "rehype-slug": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@mdx-js/mdx": "^3.1.1",
+    "@types/node": "^22.15.2",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "next": "^15.5.19",
+    "next-mdx-remote": "^6.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-pretty-code": "^0.14.3",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "typescript": "^5.8.3"
+  }
+}

package/react/AdPreview.tsx

@@ -0,0 +1,94 @@
+/* blog-kit React adapter — AdPreview
+   Thin wrapper: all styling lives in core/css/components.css (.bk-ad-preview).
+   A mock paid-ad creative in one of two platform styles:
+   - "meta": a social feed ad — round brand avatar + "Sponsored" line, body
+     copy, a 1.91:1 media panel, and a footer with the site + a CTA button.
+   - "google": a search ad — an "Ad" pill, the display URL, a blue headline,
+     a description, and optional sitelinks.
+   Ported from hjd's b-ad (cyan/dark mapped to neutral --blog-* tokens; the
+   Google link-blue maps to --blog-info, matching SerpPreview). */
+
+export interface AdPreviewProps {
+  /** Which ad style to render. Defaults to "meta". */
+  platform?: "meta" | "google";
+
+  /* ── meta props ── */
+  /** Advertiser name; its first two letters seed the round avatar. */
+  brand?: string;
+  /** Small label under the brand name. Defaults to "Sponsored". */
+  sponsored?: string;
+  /** Ad body copy. HTML allowed (e.g. <strong>, <br/>). */
+  copy?: string;
+  /** Optional creative image URL for the media panel. */
+  image?: string;
+  /** CTA button label. Defaults to "Learn more". */
+  buttonText?: string;
+
+  /* ── shared ── */
+  /** Display site/domain (footer for meta, header line for google). */
+  site?: string;
+
+  /* ── google props ── */
+  /** Display URL breadcrumb. HTML allowed — wrap the domain in <strong>. */
+  url?: string;
+  /** The blue clickable headline. Plain text. */
+  headline?: string;
+  /** Description line under the headline. Plain text. */
+  description?: string;
+  /** Optional sitelink labels shown in a dashed-divider row. */
+  sitelinks?: string[];
+}
+
+export function AdPreview({
+  platform = "meta",
+  brand,
+  sponsored = "Sponsored",
+  copy,
+  image,
+  site,
+  buttonText,
+  headline,
+  url,
+  description,
+  sitelinks,
+}: AdPreviewProps) {
+  if (platform === "google") {
+    return (
+      <div className="bk-ad-preview bk-ad-preview--google">
+        <div className="bk-ad-preview__g-head">
+          <span className="bk-ad-preview__g-tag">Ad</span>
+          <span className="bk-ad-preview__g-dot" aria-hidden="true">·</span>
+          <span className="bk-ad-preview__g-site">{site}</span>
+        </div>
+        <div className="bk-ad-preview__g-url" dangerouslySetInnerHTML={{ __html: url || "" }} />
+        <h4 className="bk-ad-preview__g-headline">{headline}</h4>
+        <p className="bk-ad-preview__g-desc">{description}</p>
+        {sitelinks && sitelinks.length > 0 && (
+          <div className="bk-ad-preview__g-sitelinks">
+            {sitelinks.map((s) => (
+              <span key={s} className="bk-ad-preview__g-sitelink">{s}</span>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="bk-ad-preview">
+      <div className="bk-ad-preview__head">
+        <div className="bk-ad-preview__avatar">{(brand || "").slice(0, 2).toUpperCase()}</div>
+        <div className="bk-ad-preview__head-text">
+          <div className="bk-ad-preview__brand">{brand}</div>
+          <div className="bk-ad-preview__sponsored">{sponsored}</div>
+        </div>
+      </div>
+      <div className="bk-ad-preview__copy" dangerouslySetInnerHTML={{ __html: copy || "" }} />
+      <div className="bk-ad-preview__media">{image && <img src={image} alt="" />}</div>
+      <div className="bk-ad-preview__cta">
+        <div className="bk-ad-preview__site"><strong>{site}</strong></div>
+        <button className="bk-ad-preview__btn" type="button">{buttonText || "Learn more"}</button>
+      </div>
+    </div>
+  );
+}

package/react/AdPreviewPair.tsx

@@ -0,0 +1,16 @@
+/* blog-kit React adapter — AdPreviewPair
+   Thin wrapper: all styling lives in core/css/components.css (.bk-ad-preview-pair).
+   A layout container that lays two ad-mockup cards side by side (e.g. a Meta
+   creative next to a Google text ad), collapsing to a single column on narrow
+   screens. Children carry the actual ad markup — this just owns the grid.
+   Ported from hjd's b-ads (no colours of its own, so nothing to remap). */
+import type { ReactNode } from "react";
+
+export interface AdPreviewPairProps {
+  /** The ad cards to lay out side by side (typically two). */
+  children?: ReactNode;
+}
+
+export function AdPreviewPair({ children }: AdPreviewPairProps) {
+  return <div className="bk-ad-preview-pair">{children}</div>;
+}

package/react/AuditFindings.tsx

@@ -0,0 +1,43 @@
+/* blog-kit React adapter — AuditFindings
+   Thin wrapper: all styling lives in core/css/components.css (.bk-audit-findings).
+   A bordered, divided list of audit findings. Each row leads with a small
+   severity dot (high / med / low), then a title + description block, and a
+   pill-shaped count on the right. Severity tone is a token-driven CSS class so
+   the SAME component renders in each pack's state colours. Ported from hjd's
+   blog AuditFindings (b-saf; #fff panel + danger/warn/success dots mapped to
+   tokens). */
+
+export type AuditFindingSeverity = "high" | "med" | "low";
+
+export interface AuditFindingRow {
+  title: string;
+  description?: string;
+  /** Pill-shaped count shown on the right (string or number). */
+  count?: string | number;
+  /** Severity tone of the leading dot. Defaults to "med". */
+  severity?: AuditFindingSeverity;
+}
+
+export interface AuditFindingsProps {
+  rows?: AuditFindingRow[];
+}
+
+export function AuditFindings({ rows = [] }: AuditFindingsProps) {
+  return (
+    <div className="bk-audit-findings">
+      {rows.map((r, i) => (
+        <div key={i} className="bk-audit-findings__row">
+          <span
+            className={`bk-audit-findings__sev bk-audit-findings__sev--${r.severity || "med"}`}
+            aria-hidden="true"
+          />
+          <div className="bk-audit-findings__body">
+            <div className="bk-audit-findings__title">{r.title}</div>
+            {r.description && <div className="bk-audit-findings__desc">{r.description}</div>}
+          </div>
+          {r.count != null && <span className="bk-audit-findings__count">{r.count}</span>}
+        </div>
+      ))}
+    </div>
+  );
+}

package/react/AuditScores.tsx

@@ -0,0 +1,73 @@
+/* blog-kit React adapter — AuditScores
+   Thin wrapper: all styling lives in core/css/components.css (.bk-audit-scores).
+   A row of semicircular score gauges (0–100). Each card draws a faint track
+   arc plus a coloured progress arc whose sweep is computed from the score, a
+   big tone-coloured number, an uppercase label, and an optional sub-line.
+   Tone (good / warn / bad) is expressed purely as a token-driven CSS class —
+   the gauge arc + number inherit it via currentColor, so the SAME component
+   renders in each pack's brand colour. Ported from hjd's blog AuditScores
+   (hardcoded #10C8F0 / #FFB020 / #F04D4D / #EDEFF2 mapped to tokens). */
+
+export interface AuditScoreItem {
+  label: string;
+  /** Optional secondary line under the label. */
+  sub?: string;
+  /** 0–100. */
+  score: number;
+}
+
+export interface AuditScoresProps {
+  items?: AuditScoreItem[];
+}
+
+type Tone = "good" | "warn" | "bad";
+
+/** Threshold ladder ported verbatim from the hjd source. */
+function scoreTone(score: number): Tone {
+  if (score >= 80) return "good";
+  if (score >= 50) return "warn";
+  return "bad";
+}
+
+/** End point of the progress arc along the semicircle (r=40, cx=50, cy=50). */
+function arcEnd(score: number): { x: string; y: string } {
+  const angle = Math.PI * (1 - score / 100);
+  return {
+    x: (50 - 40 * Math.cos(angle)).toFixed(2),
+    y: (50 - 40 * Math.sin(angle)).toFixed(2),
+  };
+}
+
+export function AuditScores({ items = [] }: AuditScoresProps) {
+  return (
+    <div className="bk-audit-scores">
+      {items.map((it, i) => {
+        const tone = scoreTone(it.score);
+        const { x, y } = arcEnd(it.score);
+        return (
+          <div key={i} className={`bk-audit-scores__card bk-audit-scores__card--${tone}`}>
+            <svg className="bk-audit-scores__gauge" viewBox="0 0 100 60" aria-hidden="true">
+              <path
+                className="bk-audit-scores__track"
+                d="M10 50 A 40 40 0 0 1 90 50"
+                fill="none"
+                strokeWidth="8"
+                strokeLinecap="round"
+              />
+              <path
+                className="bk-audit-scores__arc"
+                d={`M10 50 A 40 40 0 0 1 ${x} ${y}`}
+                fill="none"
+                strokeWidth="8"
+                strokeLinecap="round"
+              />
+            </svg>
+            <div className="bk-audit-scores__num">{it.score}</div>
+            <div className="bk-audit-scores__label">{it.label}</div>
+            {it.sub && <div className="bk-audit-scores__sub">{it.sub}</div>}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/react/AuthorCard.tsx

@@ -0,0 +1,35 @@
+import { authorInitials, type AuthorLink } from "../core/lib";
+
+export interface AuthorCardProps {
+  name: string;
+  role?: string;
+  avatar?: string;
+  bio?: string;
+  links?: AuthorLink[];
+}
+
+export function AuthorCard({ name, role, avatar, bio, links }: AuthorCardProps) {
+  return (
+    <div className="bk-author">
+      <div className="bk-author__media">
+        {avatar ? (
+          <img className="bk-author__avatar" src={avatar} alt={name} />
+        ) : (
+          <span className="bk-author__avatar bk-author__avatar--fallback" aria-hidden="true">{authorInitials(name)}</span>
+        )}
+      </div>
+      <div className="bk-author__body">
+        <p className="bk-author__name">{name}</p>
+        {role && <p className="bk-author__role">{role}</p>}
+        {bio && <p className="bk-author__bio">{bio}</p>}
+        {links && links.length > 0 && (
+          <div className="bk-author__links">
+            {links.map((l, i) => (
+              <a key={i} className="bk-author__link" href={l.href}>{l.label} &rarr;</a>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/react/BeforeAfter.tsx

@@ -0,0 +1,27 @@
+export interface BeforeAfterSide {
+  title: string;
+  content: string;
+  /** Optional big number shown between title and content. */
+  value?: string;
+}
+export interface BeforeAfterProps {
+  before: BeforeAfterSide;
+  after: BeforeAfterSide;
+}
+export function BeforeAfter({ before, after }: BeforeAfterProps) {
+  if (!before || !after) return null;
+  return (
+    <div className="bk-before-after">
+      <div className="bk-before-after__card bk-before-after__card--before">
+        <div className="bk-before-after__label">{before.title}</div>
+        {before.value && <div className="bk-before-after__value">{before.value}</div>}
+        <p className="bk-before-after__body">{before.content}</p>
+      </div>
+      <div className="bk-before-after__card bk-before-after__card--after">
+        <div className="bk-before-after__label">{after.title}</div>
+        {after.value && <div className="bk-before-after__value">{after.value}</div>}
+        <p className="bk-before-after__body">{after.content}</p>
+      </div>
+    </div>
+  );
+}

package/react/BlogBehaviors.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { initBlogBehaviors } from "../core/behaviors/index.js";
+
+/**
+ * Activates the kit's interactive components (TableOfContents scrollspy,
+ * FAQ JSON-LD, table scroll hints, code copy). Drop it once inside the
+ * `.blog-root` of the post route — it renders nothing. It re-runs the
+ * behaviours after every client-side navigation (keyed on the pathname)
+ * so a freshly mounted post gets wired; each behaviour is idempotent, so
+ * re-running never double-binds an already-enhanced element.
+ */
+export function BlogBehaviors() {
+  const pathname = usePathname();
+  useEffect(() => {
+    initBlogBehaviors();
+  }, [pathname]);
+  return null;
+}

package/react/CTABanner.tsx

@@ -0,0 +1,32 @@
+/* blog-kit React adapter — CTABanner
+   Thin wrapper: all styling lives in core/css/components.css (.bk-cta-banner).
+   Dark banner with a brand radial glow, heading, description, and a CTA link. */
+import { ICONS } from "../core/icons";
+export interface CTABannerProps {
+  heading?: string;
+  description?: string;
+  ctaText?: string;
+  ctaHref?: string;
+}
+export function CTABanner({
+  heading = "See it on your own site",
+  description = "Capture AI deploys in under ten minutes — paste a tag, point at your content, watch leads land.",
+  ctaText = "Book a demo",
+  ctaHref = "/book-demo",
+}: CTABannerProps) {
+  return (
+    <div className="bk-cta-banner">
+      <span className="bk-cta-banner__glow" aria-hidden="true" />
+      <div className="bk-cta-banner__inner">
+        <div className="bk-cta-banner__copy">
+          <h3 className="bk-cta-banner__heading">{heading}</h3>
+          <p className="bk-cta-banner__desc">{description}</p>
+        </div>
+        <a className="bk-cta-banner__cta" href={ctaHref}>
+          <span className="bk-cta-banner__cta-label">{ctaText}</span>
+          <span className="bk-cta-banner__cta-icon" aria-hidden="true" dangerouslySetInnerHTML={{ __html: ICONS["arrowRight"] }} />
+        </a>
+      </div>
+    </div>
+  );
+}

package/react/CalloutBox.tsx

@@ -0,0 +1,31 @@
+/* blog-kit React adapter — CalloutBox
+   Thin wrapper: all styling lives in core/css/components.css (.bk-callout),
+   all logic in core/lib.ts, all icon markup in core/icons.ts. */
+import type { ReactNode } from "react";
+import { ICONS } from "../core/icons";
+import { resolveCalloutTone, CALLOUT_DEFAULT_TITLE } from "../core/lib";
+
+export interface CalloutBoxProps {
+  /** Canonical. info | tip | success | warn | danger (+ aliases like note/warning). */
+  tone?: string;
+  /** Alias accepted from existing HJD posts. */
+  type?: string;
+  /** Alias accepted from existing Capture AI posts. */
+  variant?: string;
+  title?: string;
+  children?: ReactNode;
+}
+
+export function CalloutBox({ tone, type, variant, title, children }: CalloutBoxProps) {
+  const t = resolveCalloutTone(tone ?? type ?? variant);
+  const heading = title ?? CALLOUT_DEFAULT_TITLE[t];
+  return (
+    <aside className={`bk-callout bk-callout--${t}`}>
+      <p className="bk-callout__title">
+        <span className="bk-callout__icon" dangerouslySetInnerHTML={{ __html: ICONS[t] }} />
+        {heading}
+      </p>
+      <div className="bk-callout__body">{children}</div>
+    </aside>
+  );
+}