{
  "name": "SourceFreshnessBanner",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SourceFreshnessBanner.tsx",
  "chapterTag": "08 Feedback & Overlays",
  "chapter": "09-feedback-and-overlays.html",
  "sectionId": "source-freshness",
  "elName": "SourceFreshnessBanner",
  "demoUrl": "https://brand.magicblocks.ai/components/09-feedback-and-overlays#source-freshness",
  "hasLiveDemo": false,
  "description": "Status banner for a synced source — Knowledge collection's \"Sitemap\nChanges Found · Setup Detector\", a Webhook endpoint's last-ping result,\na Connection's freshness pill. Sits above the detail content.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SourceFreshnessBanner",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SourceFreshnessBannerProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "SourceFreshnessTone",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SourceFreshnessBanner } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "tone",
      "optional": true,
      "type": "SourceFreshnessTone",
      "doc": "Status drives the colour + icon."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Top-line title — \"Sitemap changes detected\", \"Source unreachable\"."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Caption beneath the title — \"8 new pages found since last sync.\"."
    },
    {
      "name": "lastCheckedAt",
      "optional": true,
      "type": "ReactNode",
      "doc": "Last-checked timestamp text."
    },
    {
      "name": "action",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned action slot — typically a CTA button (\"Set up detector\")."
    }
  ],
  "classesUsed": [
    "source-freshness",
    "source-freshness-action",
    "source-freshness-body",
    "source-freshness-caption",
    "source-freshness-dot",
    "source-freshness-meta",
    "source-freshness-status",
    "source-freshness-title",
    "source-freshness-tone-label",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"source-freshness-demo\">\n  <div class=\"source-freshness is-tone-changed\" role=\"status\">\n    <div class=\"source-freshness-status\">\n      <span class=\"source-freshness-dot\" aria-hidden=\"true\"></span>\n      <span class=\"source-freshness-tone-label\">Changes detected</span>\n    </div>\n    <div class=\"source-freshness-body\">\n      <div class=\"source-freshness-title\">Sitemap changes detected</div>\n      <div class=\"source-freshness-caption\">8 new pages found at acme.com since last sync.</div>\n      <div class=\"source-freshness-meta\">Last checked 2 hours ago</div>\n    </div>\n    <div class=\"source-freshness-action\">\n      <button type=\"button\" class=\"btn btn-primary\">Set up detector</button>\n    </div>\n  </div>\n  <div class=\"source-freshness is-tone-stale\" role=\"status\">\n    <div class=\"source-freshness-status\">\n      <span class=\"source-freshness-dot\" aria-hidden=\"true\"></span>\n      <span class=\"source-freshness-tone-label\">Stale</span>\n    </div>\n    <div class=\"source-freshness-body\">\n      <div class=\"source-freshness-title\">Webhook hasn&rsquo;t fired in a while</div>\n      <div class=\"source-freshness-caption\">Last successful ping was 11 days ago.</div>\n      <div class=\"source-freshness-meta\">Last checked 30 minutes ago</div>\n    </div>\n    <div class=\"source-freshness-action\">\n      <button type=\"button\" class=\"btn btn-ghost\">Re-check</button>\n    </div>\n  </div>\n</div>",
    "css": ".source-freshness {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: var(--s-3);\n  align-items: center;\n  padding: var(--s-3) var(--s-4);\n  border-radius: var(--r-md);\n  border: 1px solid var(--hair);\n  background: var(--bg-paper);\n}\n\n.source-freshness-action { display: inline-flex; align-items: center; gap: var(--s-2); }\n\n.source-freshness-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.source-freshness-caption { font: 400 12.5px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.source-freshness-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--fg-faint);\n}\n\n.source-freshness-meta { font: 400 11.5px/1 var(--f-mono); color: var(--fg-faint); margin-top: 2px; }\n\n.source-freshness-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n}\n\n.source-freshness-title { font: 500 13.5px/1.3 var(--f-body); color: var(--fg); }\n\n.source-freshness-tone-label {\n  font: 600 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-soft);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}