{
  "meta": {
    "generated": "2026-04-28T02:18:40.003Z",
    "count": 128,
    "package": "@magicblocksai/ui",
    "catalogueUrl": "https://brand.magicblocks.ai/api/components.json",
    "perComponentUrlPattern": "https://brand.magicblocks.ai/api/components/{name}.json"
  },
  "components": [
    {
      "name": "KitPage",
      "chapterTag": "Phase 6 — Kit chrome",
      "chapter": null,
      "description": "Page-shell wrapper for any kit-style chapter / reference page. Sets\n`data-theme` on its root so token swaps cascade to descendants. The…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/KitPage.json"
    },
    {
      "name": "KitNav",
      "chapterTag": "Phase 6 — Kit chrome",
      "chapter": null,
      "description": "The kit's top navigation bar — brand mark + a native `<select>` chapter\npicker + light/dark theme toggle on the right. Wraps `.topnav`…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/KitNav.json"
    },
    {
      "name": "Demo",
      "chapterTag": "Phase 6 — Kit chrome",
      "chapter": null,
      "description": "One demo block (the `.el` block in chapter HTML). Renders the head with\na name + optional class tag, an optional one-line description,…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Demo.json"
    },
    {
      "name": "DemoTabs",
      "chapterTag": "Phase 6 — Kit chrome",
      "chapter": null,
      "description": "The HTML / CSS / JS / React code-tab strip with tab switcher + copy button —\nthe same chrome the chapter HTML pages render below each…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DemoTabs.json"
    },
    {
      "name": "CodeBlock",
      "chapterTag": "Phase 6 — Kit chrome",
      "chapter": null,
      "description": "Standalone code sample with a header bar — language pill + filename + copy\nbutton — wrapping `<pre><code>`. Wraps `.codeblk` from chapter 7.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/CodeBlock.json"
    },
    {
      "name": "CopyButton",
      "chapterTag": "Phase 6 — Kit chrome",
      "chapter": null,
      "description": "Small reusable copy-to-clipboard button. Wraps `.copy`. On click, writes\n`value` to `navigator.clipboard.writeText(...)`, swaps the label…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/CopyButton.json"
    },
    {
      "name": "ThemeToggle",
      "chapterTag": "Phase 6 — Kit chrome",
      "chapter": null,
      "description": "Light / Dark theme switch — the same control the chapter pages use.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ThemeToggle.json"
    },
    {
      "name": "PricingPage",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "Three-tier pricing page. Wraps `.pg` + `.pg-grid`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/PricingPage.json"
    },
    {
      "name": "SignInPage",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "Two-panel sign-in / sign-up page shell. Wraps `.au` (form) + `.au-side`\n(testimonial). On mobile the panels stack; the side moves to the…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/SignInPage.json"
    },
    {
      "name": "NotFoundPage",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "404 / not-found page. Wraps `.nf` — the warm cream canvas with double\nradial blooms and a Fraunces-italic title.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/NotFoundPage.json"
    },
    {
      "name": "ConversationPreview",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "Conversation preview — the chat surface used on landing pages, dashboards,\nand case studies. Wraps `.cv` (paper card) with `.cv-head`,…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ConversationPreview.json"
    },
    {
      "name": "DashboardShell",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "App dashboard shell — warm sidebar + paper main. Wraps `.dash`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DashboardShell.json"
    },
    {
      "name": "EmptyStatePage",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "Page-level empty state, distinct from the icon-only `<EmptyState>` primitive.\nWraps the chapter-07 `.empty` shell with chapter-10…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/10-patterns-and-specials#empty-templates",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/EmptyStatePage.json"
    },
    {
      "name": "SettingsShell",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "Two-column settings shell. Wraps `.settings` (200px nav + fluid content).",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/10-patterns-and-specials#settings",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/SettingsShell.json"
    },
    {
      "name": "OnboardingStep",
      "chapterTag": "Phase 2 — Patterns & specials (chapter 10)",
      "chapter": "10-patterns-and-specials.html",
      "description": "Onboarding step — three-up flow with a top stepper, a focused panel, and\nback / continue actions. Wraps `.ob`.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/OnboardingStep.json"
    },
    {
      "name": "BrandTimeline",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Brand timeline — horizontal milestone ticks with labelled rails. Used\nfor the About page origin story ($200M → AI mortgage team →…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#brand-timeline",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/BrandTimeline.json"
    },
    {
      "name": "ChatCompare",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Chat comparison — dual-conversation proof widget. Same inbound lead\nmessage in both columns; the asymmetry IS the message. Generic chatbot…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#chat-comparison",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ChatCompare.json"
    },
    {
      "name": "DecayCurve",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Decay curve — a line graph of lead intent vs time with a hot/cooling/dead\ntraffic-light overlay, an animated tracer dot riding the curve,…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#decay-curve",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DecayCurve.json"
    },
    {
      "name": "DormantMine",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Dormant-lead mine — a CRM mockup table where every row continuously cycles\nthrough cold → scanning → drafting → sent → replied,…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#decay-curve",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DormantMine.json"
    },
    {
      "name": "EcosystemRings",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Ecosystem rings — three concentric rings with the engine at centre,\ntoday's products in the middle ring, and tomorrow's vision on the…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#ecosystem-rings",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/EcosystemRings.json"
    },
    {
      "name": "EdgeRace",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Edge race — radar visualisation showing the user at the centre of\nconcentric distance rings with edge servers scattered around them. Every…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#infra-map",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/EdgeRace.json"
    },
    {
      "name": "EngineBlock",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Engine block — central ink-block engine with four channel labels orbiting\nit (40s revolution), lead-source cards stacking on the left and…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#engine-block",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/EngineBlock.json"
    },
    {
      "name": "GuardianShield",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Guardian shield — one shield, one promise. Six universal compliance\nprimitives (consent, privacy, encryption, retention, opt-out, audit)…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#guardian-shield",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/GuardianShield.json"
    },
    {
      "name": "HandoffCard",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Handoff card — credential-style card showing a qualified lead ready for\nhuman handoff. Five+ industry variants via the `role` prop — each…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#handoff-card",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/HandoffCard.json"
    },
    {
      "name": "HappaArc",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "HAPPA arc — five conversation stages (Hook · Align · Personalise · Pitch\n· Action) anchored along a soft S-curve, with a continuous tracer…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#happa-arc",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/HappaArc.json"
    },
    {
      "name": "HeroBloomCanvas",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Hero bloom canvas — large ambient SVG backdrop for hero sections. Three\nsoft radial gradients with slow drift, optional drifting motes.…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#hero-bloom-canvas",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/HeroBloomCanvas.json"
    },
    {
      "name": "HeroLiveDemo",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Hero live demo — flagship laptop hero with a looping mortgage-scenario\nconversation, response-timer overlay, status badge, and scenario /…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#hero-live-demo",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/HeroLiveDemo.json"
    },
    {
      "name": "HeroScene",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Hero scene — flagship phone hero with a live SMS thread on the left and\nan annotation column on the right showing what the agent knew at…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#in-action",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/HeroScene.json"
    },
    {
      "name": "IntegrationHub",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Integration hub — radial diagram with 8 dashed spokes converging on a\ncentral MagicBlocks core, with branded integration chips at the…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#integration-hub",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/IntegrationHub.json"
    },
    {
      "name": "JourneyMap",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Journey map — horizontal branching flow with labelled connectors. One\ncomponent, many variants — prequalification, follow-up,…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#journey-map",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/JourneyMap.json"
    },
    {
      "name": "LeakCard",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Leak card — one of the four-leaks diagnostic tiles. One atom, four\nvariants (`leak={1|2|3|4}`), each carrying its own accent colour via…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#leak-cards",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/LeakCard.json"
    },
    {
      "name": "ProfileCard",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Profile card — visibly accretes memory as the agent learns more about a\nlead, with five progressive ticks of relationship memory. Three…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#profile-card",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ProfileCard.json"
    },
    {
      "name": "RaceTimeline",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Race timeline — split timestamp sequence with a left lane that loses\n(cold, drawn-out) and a right lane that wins (sub-second beats marked…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#race-timeline",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/RaceTimeline.json"
    },
    {
      "name": "RevenueCalculator",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Revenue calculator — dual-tab widget (Activation + Reactivation) with\nplan-aware pricing and live computation. Wraps `.roi-calc` from…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#roi-calculator",
      "hasLiveDemo": true,
      "detailUrl": "https://brand.magicblocks.ai/api/components/RevenueCalculator.json"
    },
    {
      "name": "Scoreboard",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Scoreboard — two-column contrast table for \"most teams vs MagicBlocks\"\nmoments. Wraps `.scoreboard` (and `.scoreboard.dark` variant) from…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#scoreboard",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Scoreboard.json"
    },
    {
      "name": "StatBadge",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Stat badge — editorial big-number callout. Mono uppercase eyebrow + a\nBricolage-display number with optional `<sup>` unit and a caption…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#mini-atoms",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/StatBadge.json"
    },
    {
      "name": "Triptych",
      "chapterTag": "Phase 2 — Narrative systems (chapter 11)",
      "chapter": "11-narrative-systems.html",
      "description": "Triptych — three equal panels separated by arrow dividers, used for\n\"How It Works\" sections across the site. Panels stack on mobile and…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/11-narrative-systems#triptych",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Triptych.json"
    },
    {
      "name": "VideoPlayer",
      "chapterTag": "Phase 2 — Media & presentation (chapter 12)",
      "chapter": "12-media-and-presentation.html",
      "description": "Branded HTML5 video player. Wraps `.vid-player` from chapter 12. Drops a\nnative `<video>` inside MagicBlocks chrome — centre play button,…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/12-media-and-presentation#video",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/VideoPlayer.json"
    },
    {
      "name": "Carousel",
      "chapterTag": "Phase 2 — Media & presentation (chapter 12)",
      "chapter": "12-media-and-presentation.html",
      "description": "Snap carousel — horizontal slide scroller with a dot pager and prev/next\narrows. Wraps `.carousel` from chapter 12. Uses native CSS…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/12-media-and-presentation#carousel",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Carousel.json"
    },
    {
      "name": "DeviceFrame",
      "chapterTag": "Phase 2 — Media & presentation (chapter 12)",
      "chapter": "12-media-and-presentation.html",
      "description": "Device frame — pure CSS chrome around a `.device-viewport` slot. Wraps\nthe chapter-12 `.device` family: `.device.browser`,…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/12-media-and-presentation#browser",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DeviceFrame.json"
    },
    {
      "name": "StageChat",
      "chapterTag": "Phase 2 — Media & presentation (chapter 12)",
      "chapter": "12-media-and-presentation.html",
      "description": "Streaming HAPPA stage-progress chat. Wraps `.stage-chat` from chapter 12.\nA phone-framed conversation that token-streams each message and…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/12-media-and-presentation#stage-chat",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/StageChat.json"
    },
    {
      "name": "ProductDashboard",
      "chapterTag": "Phase 2 — Media & presentation (chapter 12)",
      "chapter": "12-media-and-presentation.html",
      "description": "Animated marketing dashboard preview. Wraps `.product-dash` from chapter\n12. Browser-framed \"inside the product\" view: sidebar nav, hero…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/12-media-and-presentation#product-dash",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ProductDashboard.json"
    },
    {
      "name": "Hero",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Marketing hero — pinned warm cream surface with a dual radial bloom (pink\ntop-right, peach bottom-left), an eyebrow pill, large display…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Hero.json"
    },
    {
      "name": "MarketingFeatureGrid",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Marketing feature grid (3-up). Wraps `.mfg` + `.mfg-grid` from chapter 09.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/MarketingFeatureGrid.json"
    },
    {
      "name": "LogoWall",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Typography logo wall. Wraps `.lw` from chapter 09. Pinned-white surface\nin both themes (greyscale wordmarks otherwise vanish on dark navy).",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/LogoWall.json"
    },
    {
      "name": "TestimonialStrip",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Hero testimonial strip — single quote with a Fraunces glyph, italicised\nemphasis phrases in pink, author block, and an optional stat…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/TestimonialStrip.json"
    },
    {
      "name": "CtaBlock",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "CTA block — closing surface that asks for the next step. Wraps `.ctab`\nfrom chapter 09. Two tonal variants: `\"warm\"` is the marketing…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/CtaBlock.json"
    },
    {
      "name": "StatsStrip",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Stats strip — band of 3–4 big numbers. Wraps `.stats` from chapter 09.\nTabular nums so digits stack; hairline grid between cells.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/StatsStrip.json"
    },
    {
      "name": "Faq",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "FAQ accordion. Wraps `.faq` + `.faq-list` from chapter 09. Native\n`<details>` per row — no JavaScript required, no `'use client'` boundary.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Faq.json"
    },
    {
      "name": "ComparisonTable",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Comparison table — N-column product-vs-competitor. Wraps `.compare` from\nchapter 09. The MagicBlocks column gets the `.is-ours` modifier…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/09-content-blocks#compare-table",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ComparisonTable.json"
    },
    {
      "name": "TeamCard",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Single team-member card. Wraps `.team-card`. Photo + name + role + bio.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/TeamCard.json"
    },
    {
      "name": "PullQuote",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Pull quote — full-bleed editorial moment between sections. Wraps\n`.pull-quote` from chapter 09. Oversized Fraunces-italic glyph; the\nquote…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/09-content-blocks#pull-quote",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/PullQuote.json"
    },
    {
      "name": "SiteFooter",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "MagicBlocks site footer. Wraps `.mf` from chapter 09. One component, two\ntonal variants:",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/09-content-blocks#footer",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/SiteFooter.json"
    },
    {
      "name": "CustomerLogoGrid",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Customer logo grid. Wraps `.logo-grid-section` / `.customer-logo-wall`\nfrom chapter 09. Pinned-white surface in both themes (greyscale…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/CustomerLogoGrid.json"
    },
    {
      "name": "PressStrip",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Press strip — \"as seen in\" row of press-mention logos. Wraps `.press-strip`\nfrom chapter 09. Pinned-white surface in both themes; same…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/PressStrip.json"
    },
    {
      "name": "IntegrationGrid",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Integration grid — square tiles for third-party integrations. Wraps\n`.integration-grid` from chapter 09. Each tile is a pinned-white…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/09-content-blocks#integration-grid",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/IntegrationGrid.json"
    },
    {
      "name": "FounderCard",
      "chapterTag": "Phase 2 — Content blocks (chapter 09)",
      "chapter": "09-content-blocks.html",
      "description": "Single founder profile card. Wraps `.founder-card`. Headshot uses\n`object-fit: cover` with a 1:1 aspect ratio so any crop works.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/FounderCard.json"
    },
    {
      "name": "DetailShell",
      "chapterTag": "Phase 3 — App shell (chapter 13)",
      "chapter": "13-app-shell.html",
      "description": "Three-column detail shell — left summary · centre tabs · right context rail.\nWraps `.detail-shell` from chapter 13. The host pattern for…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DetailShell.json"
    },
    {
      "name": "CommandPalette",
      "chapterTag": "Phase 3 — App shell (chapter 13)",
      "chapter": "06-navigation.html",
      "description": "⌘K command palette — modal launcher with grouped results, fuzzy filter,\nand full keyboard navigation. Wraps `.cmdk` from chapter 13.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/06-navigation#command-k",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/CommandPalette.json"
    },
    {
      "name": "DensityProvider",
      "chapterTag": "Phase 3 — App shell (chapter 13)",
      "chapter": "13-app-shell.html",
      "description": "Density-mode wrapper. Sets `data-density` on its root so descendants — and\nany CSS that consumes `var(--row-h)` — automatically respond.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/13-app-shell#density",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DensityProvider.json"
    },
    {
      "name": "EmptyAppCard",
      "chapterTag": "Phase 3 — App shell (chapter 13)",
      "chapter": "13-app-shell.html",
      "description": "CRM-flavoured empty state — illustration + headline + lede + primary CTA +\nsecondary fallback. Wraps `.empty-card` from chapter 13.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/13-app-shell#empty-states",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/EmptyAppCard.json"
    },
    {
      "name": "Kanban",
      "chapterTag": "Phase 3 — App pipeline (chapter 14)",
      "chapter": "14-app-pipeline.html",
      "description": "Kanban board — the deals view's spine. Wraps `.kanban` from chapter 14.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/14-app-pipeline#kanban",
      "hasLiveDemo": true,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Kanban.json"
    },
    {
      "name": "PipelineBar",
      "chapterTag": "Phase 3 — App pipeline (chapter 14)",
      "chapter": "14-app-pipeline.html",
      "description": "Pipeline stage segmented bar — sits in a deal's page header. Wraps `.pip-bar`\nfrom chapter 14. Past stages get a soft ink wash; the…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/14-app-pipeline#pip-bar",
      "hasLiveDemo": true,
      "detailUrl": "https://brand.magicblocks.ai/api/components/PipelineBar.json"
    },
    {
      "name": "ActivityTimeline",
      "chapterTag": "Phase 3 — App pipeline (chapter 14)",
      "chapter": "14-app-pipeline.html",
      "description": "Activity timeline — vertical hairline rail with iconified nodes per event,\nfilter chips at the top, and date dividers between days. Wraps…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/14-app-pipeline#timeline",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ActivityTimeline.json"
    },
    {
      "name": "Inbox",
      "chapterTag": "Phase 3 — App pipeline (chapter 14)",
      "chapter": "14-app-pipeline.html",
      "description": "Inbox container — wraps `.inbox` from chapter 14. Renders as an unordered\nlist so the row markup is semantic.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/14-app-pipeline#inbox",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Inbox.json"
    },
    {
      "name": "Checklist",
      "chapterTag": "Phase 3 — App pipeline (chapter 14)",
      "chapter": "14-app-pipeline.html",
      "description": "Onboarding checklist — vertical list with tickbox · title · description ·\ndue-date · assignee · more-menu, plus a header with progress…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/14-app-pipeline#checklist",
      "hasLiveDemo": true,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Checklist.json"
    },
    {
      "name": "MrrChart",
      "chapterTag": "Phase 3 — App pipeline (chapter 14)",
      "chapter": "14-app-pipeline.html",
      "description": "MRR composition chart — vanilla SVG diverging-bar chart for the revenue\ndashboard. Wraps `.mrr-chart` from chapter 14.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/14-app-pipeline#mrr-chart",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/MrrChart.json"
    },
    {
      "name": "SageDrawer",
      "chapterTag": "Phase 3 — App AI (chapter 15)",
      "chapter": "15-app-ai.html",
      "description": "Sage AI drawer — right-anchored AI assistant. Wraps `.sage-drawer` from\nchapter 15.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/15-app-ai#sage-drawer",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/SageDrawer.json"
    },
    {
      "name": "ComposeDrawer",
      "chapterTag": "Phase 3 — App AI (chapter 15)",
      "chapter": "15-app-ai.html",
      "description": "Compose drawer — the single email composer used everywhere. Wraps `.compose`\nfrom chapter 15.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/15-app-ai#compose",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ComposeDrawer.json"
    },
    {
      "name": "AiSuggestionCard",
      "chapterTag": "Phase 3 — App AI (chapter 15)",
      "chapter": "15-app-ai.html",
      "description": "AI suggestion card — Sage's proactive in-rail card. Wraps `.ai-card` from\nchapter 15.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/15-app-ai#ai-card",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/AiSuggestionCard.json"
    },
    {
      "name": "KbSuggestionCard",
      "chapterTag": "Phase 3 — App AI (chapter 15)",
      "chapter": "15-app-ai.html",
      "description": "Knowledge-base suggestion card — Sage's \"assist\" surface for support agents.\nWraps `.kb-card-suggest` from chapter 15.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/15-app-ai#kb-card",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/KbSuggestionCard.json"
    },
    {
      "name": "ConfettiTrigger",
      "chapterTag": "Phase 3 — App AI (chapter 15)",
      "chapter": "15-app-ai.html",
      "description": "Confetti win-moment trigger — a `<button>` that fires a one-shot brand-palette\nconfetti burst + toast on click. Wraps the chapter-15…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/15-app-ai#confetti",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ConfettiTrigger.json"
    },
    {
      "name": "FeatureCluster",
      "chapterTag": "Phase 2 — Platform narrative (chapter 16)",
      "chapter": "16-platform-narrative.html",
      "description": "Feature cluster — thematically-grouped block of feature cards. Wraps\n`.feature-cluster` + `.fc-card` from chapter 16. Header (eyebrow + h2…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/FeatureCluster.json"
    },
    {
      "name": "FeatureTable",
      "chapterTag": "Phase 2 — Platform narrative (chapter 16)",
      "chapter": "16-platform-narrative.html",
      "description": "Feature table — 3-column capability comparison. Wraps `.feature-table`\nfrom chapter 16. Real `<table>` semantics with `<th scope>` for…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/16-platform-narrative#feature-table",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/FeatureTable.json"
    },
    {
      "name": "ClusterMap",
      "chapterTag": "Phase 2 — Platform narrative (chapter 16)",
      "chapter": "16-platform-narrative.html",
      "description": "Cluster map — six labelled hexes radiating around a centre node, each an\nanchor link. Wraps `.cluster-map` from chapter 16. Stateless, no…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/16-platform-narrative#cluster-map",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ClusterMap.json"
    },
    {
      "name": "CounterRail",
      "chapterTag": "Phase 2 — Platform narrative (chapter 16)",
      "chapter": "16-platform-narrative.html",
      "description": "Counter rail — vertical 01–05 numbered circles, each anchor-linked to its\nsection below. Wraps `.counter-rail` from chapter 16. The active…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/16-platform-narrative#counter-rail",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/CounterRail.json"
    },
    {
      "name": "Heading",
      "chapterTag": "Phase 1B — Typography (chapter 02)",
      "chapter": "02-typography.html",
      "description": "Kit-styled heading. Renders an h1–h6 with the kit's typography defaults.\nPass `display` for the hero / marketing variant (56px, bold,…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/02-typography#headings",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Heading.json"
    },
    {
      "name": "Eyebrow",
      "chapterTag": "Phase 1B — Typography (chapter 02)",
      "chapter": "02-typography.html",
      "description": "Small uppercase label that sits above a heading. Wraps `.eyebrow`.\nMono, 11px, accent-text colour.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/02-typography#text-roles",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Eyebrow.json"
    },
    {
      "name": "Lede",
      "chapterTag": "Phase 1B — Typography (chapter 02)",
      "chapter": "02-typography.html",
      "description": "Larger paragraph (19px) that sits below a hero heading. Wraps `.lede`.\nUse exactly once per page hero. For body copy, use a plain `<p>`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/02-typography#body",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Lede.json"
    },
    {
      "name": "Caption",
      "chapterTag": "Phase 1B — Typography (chapter 02)",
      "chapter": "02-typography.html",
      "description": "Small helper / metadata text (13px, dim). Wraps `.caption`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/02-typography#text-roles",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Caption.json"
    },
    {
      "name": "Quote",
      "chapterTag": "Phase 1B — Typography (chapter 02)",
      "chapter": "02-typography.html",
      "description": "Pull quote / testimonial figure. Wraps `<figure class=\"quote\">` with a\n`<blockquote>` and an optional `<figcaption>` for attribution.…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/02-typography#blockquote",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Quote.json"
    },
    {
      "name": "Banner",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Page-level banner. Wraps `.banner` (`.banner-{tone}`).",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#banners",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Banner.json"
    },
    {
      "name": "Alert",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Inline alert — a tighter banner for in-form / in-card surfaces.\nWraps `.alert` (`.alert-{tone}`).",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#alerts",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Alert.json"
    },
    {
      "name": "Toast",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#toasts",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Toast.json"
    },
    {
      "name": "Toaster",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Toaster — global, mountable-once stack that listens to the singleton\n`toastStore` and renders each `<Toast>` inside a `<Portal>`. Pair…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#toasts",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Toaster.json"
    },
    {
      "name": "Modal",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Centred modal dialog with backdrop. Wraps `.modal-backdrop` + `.modal`.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#modal",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Modal.json"
    },
    {
      "name": "Drawer",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Slide-in drawer. Wraps `.drawer-backdrop` + `.drawer`.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#drawer",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Drawer.json"
    },
    {
      "name": "Tooltip",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Lightweight tooltip — shows on hover or focus, hides on blur or leave.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#tooltips",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Tooltip.json"
    },
    {
      "name": "Popover",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Click-triggered popover with viewport-aware positioning. Wraps `.popover` —\nthe trigger is whatever you pass as `children`, the panel is…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#popover",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Popover.json"
    },
    {
      "name": "BulkBar",
      "chapterTag": "Phase 1B — Feedback & overlays (chapter 08)",
      "chapter": "08-feedback-and-overlays.html",
      "description": "Sticky bottom action bar shown when items are bulk-selected.\nWraps `.bulk-bar`.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/08-feedback-and-overlays#bulk-bar",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/BulkBar.json"
    },
    {
      "name": "Avatar",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "Circle avatar with initials and a soft tinted background.\nWraps `.av` (with `.av-{xs|sm|md|lg|xl}` and `.av-ring`).",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#avatars",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Avatar.json"
    },
    {
      "name": "ProgressBar",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "Linear progress bar (6px). Wraps `.prog-head` (label/value row) +\n`.prog-track` (rail) + `.prog-fill` (fill). Per chapter 07 §7.7.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#progress",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ProgressBar.json"
    },
    {
      "name": "ProgressRing",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "SVG progress ring. Wraps `.ring-item` with `.ring` <svg> using `.ring-bg`\n+ `.ring-fg` strokes. Stroke length encodes value via…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#progress",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ProgressRing.json"
    },
    {
      "name": "ScoreRing",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "0–100 fit / intent / health score ring. Wraps `.score-ring`. Uses a fixed\n`0 0 36 36` viewBox with `r=15` (circumference ≈ 94.2); size is…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#score-ring",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/ScoreRing.json"
    },
    {
      "name": "SLARing",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "SLA countdown ring. Fills clockwise as elapsed-fraction grows; colour\nramps green → amber → red as the deadline approaches. Wraps…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#sla-ring",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/SLARing.json"
    },
    {
      "name": "Sparkline",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "Tiny inline trend line. Wraps `.spark` (with `.spark--inline|card|page`).\nInner SVG uses `.line`, optional `.area`, and `.end-dot`. Per…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#sparkline",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Sparkline.json"
    },
    {
      "name": "RiskBadge",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "Risk band label. Wraps `.risk-badge` and uses `data-risk` to pick the\ncolour. Per chapter 07 §7.17.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#sparkline",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/RiskBadge.json"
    },
    {
      "name": "Timeline",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "Vertical activity feed. Wraps `.timeline` with `.tl-item > .tl-marker >\n.tl-dot` + `.tl-body > .tl-head + .tl-desc`. State classes…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#timeline",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Timeline.json"
    },
    {
      "name": "KeyValue",
      "chapterTag": "Phase 1B — Data display (chapter 07)",
      "chapter": "07-data-display.html",
      "description": "Two-column key-value grid. Wraps `<dl class=\"kv\">` with direct `<div>`\nchildren, each containing `<dt>` (mono uppercase key) and `<dd>`…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#data-lists",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/KeyValue.json"
    },
    {
      "name": "TopNav",
      "chapterTag": "Phase 1B — Navigation (chapter 06)",
      "chapter": "06-navigation.html",
      "description": "Marketing top nav — pill-shaped horizontal bar. Wraps `.tn`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/06-navigation#topnav",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/TopNav.json"
    },
    {
      "name": "SideNav",
      "chapterTag": "Phase 1B — Navigation (chapter 06)",
      "chapter": "06-navigation.html",
      "description": "Compact in-app vertical navigation. Wraps `.sn`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/06-navigation#sidenav",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/SideNav.json"
    },
    {
      "name": "Tabs",
      "chapterTag": "Phase 1B — Navigation (chapter 06)",
      "chapter": "06-navigation.html",
      "description": "Underline-style horizontal tabs. Wraps `.tabs` + `.tabs-body`.\nPink underline marks the active tab.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/06-navigation#tabs",
      "hasLiveDemo": true,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Tabs.json"
    },
    {
      "name": "Breadcrumbs",
      "chapterTag": "Phase 1B — Navigation (chapter 06)",
      "chapter": "06-navigation.html",
      "description": "Breadcrumb trail. Wraps `.bc`. Mono-typed with soft chevrons.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/06-navigation#breadcrumbs",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Breadcrumbs.json"
    },
    {
      "name": "Pagination",
      "chapterTag": "Phase 1B — Navigation (chapter 06)",
      "chapter": "06-navigation.html",
      "description": "Pagination component. Wraps `.pag` (or `.pag-compact`).",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/06-navigation#pagination",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Pagination.json"
    },
    {
      "name": "MenuDivider",
      "chapterTag": "Phase 1B — Navigation (chapter 06)",
      "chapter": "06-navigation.html",
      "description": "Horizontal rule between groups of menu rows.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": null,
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/MenuDivider.json"
    },
    {
      "name": "Stepper",
      "chapterTag": "Phase 1B — Navigation (chapter 06)",
      "chapter": "06-navigation.html",
      "description": "Vertical stepper. Wraps `.stepper`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/06-navigation#stepper",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Stepper.json"
    },
    {
      "name": "Card",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Base content card. Wraps `.card`, `.card-sunk`, or `.card-warm`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#base",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Card.json"
    },
    {
      "name": "Divider",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Horizontal divider. Wraps `.div-hair`, `.div-accent`, or `.div-label`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#divider",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Divider.json"
    },
    {
      "name": "Panel",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Card with a titled header bar and a body of `.panel-row`s (or any custom\nchildren). Wraps `.panel` + `.panel-head` from chapter 05.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#panel",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Panel.json"
    },
    {
      "name": "StatCard",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Dashboard stat / metric card. Wraps `.stat-card` from chapter 05.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#stat",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/StatCard.json"
    },
    {
      "name": "KpiTile",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Big-number tile for the top row of a dashboard. Wraps `.kpi-tile` from\nchapter 05.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#kpi-tile",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/KpiTile.json"
    },
    {
      "name": "FeatureCard",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Feature card — icon + title + body + optional deeplink. Wraps `.feat-card`\nfrom chapter 05. Hover lifts 2px and shifts border to accent.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#feature",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/FeatureCard.json"
    },
    {
      "name": "TestimonialCard",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Testimonial card with optional oversized Fraunces glyph. Wraps\n`.testim-card` from chapter 05.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#testimonial-card",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/TestimonialCard.json"
    },
    {
      "name": "MediaCard",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Media / blog card. Wraps `.media-card` (or `.media-card-wide`) from\nchapter 05.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#media",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/MediaCard.json"
    },
    {
      "name": "CalloutCard",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Full-bleed callout / CTA surface. Wraps `.cta-card` (or `.cta-card-ink`)\nfrom chapter 05.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#callout",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/CalloutCard.json"
    },
    {
      "name": "DashboardTile",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Three-zone dashboard content tile. Wraps `.dash-tile`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#dashboard-tile",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/DashboardTile.json"
    },
    {
      "name": "PricingCard",
      "chapterTag": "Phase 1B — Cards & surfaces (chapter 05)",
      "chapter": "05-cards-and-surfaces.html",
      "description": "Pricing card. Wraps `.price-card` (`.price-card-hero` when `featured`) from\nchapter 05.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/05-cards-and-surfaces#pricing-card",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/PricingCard.json"
    },
    {
      "name": "Button",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "03-buttons-and-controls.html",
      "description": "The kit's canonical button. Wraps the `.btn` family of CSS classes from\n`@magicblocksai/css`. All native `<button>` props are passed…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/03-buttons-and-controls#primary",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Button.json"
    },
    {
      "name": "IconButton",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "03-buttons-and-controls.html",
      "description": "Square 36×36 icon-only button. Wraps `.icon-btn` and `.icon-btn-primary`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/03-buttons-and-controls#icon-button",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/IconButton.json"
    },
    {
      "name": "Input",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "04-forms-and-inputs.html",
      "description": "Text input. Wraps `.input` (and `.input-group` + `.input-affix` when\nprefix/suffix are passed).",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/04-forms-and-inputs#text",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Input.json"
    },
    {
      "name": "Textarea",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "04-forms-and-inputs.html",
      "description": "Multiline text input. Wraps `.input` applied to a `<textarea>`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/04-forms-and-inputs#textarea",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Textarea.json"
    },
    {
      "name": "Select",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "04-forms-and-inputs.html",
      "description": "Native `<select>` styled to match the kit's `.input` family.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/04-forms-and-inputs#select",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Select.json"
    },
    {
      "name": "Checkbox",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "03-buttons-and-controls.html",
      "description": "Standard checkbox with the kit's custom check visual. Wraps `.cb`.\nPass `indeterminate` for the mixed-state appearance (overrides…",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/03-buttons-and-controls#checkbox-radio",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Checkbox.json"
    },
    {
      "name": "Radio",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "03-buttons-and-controls.html",
      "description": "Single radio button. Wraps `.rb`. Use inside `<RadioGroup>` for keyboard +\nARIA grouping, or stand-alone when you only have one option.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/03-buttons-and-controls#checkbox-radio",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Radio.json"
    },
    {
      "name": "Switch",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "03-buttons-and-controls.html",
      "description": "Toggle switch (checkbox semantics, switch visuals). Wraps `.switch` +\n`.switch-track`.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/03-buttons-and-controls#toggle",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Switch.json"
    },
    {
      "name": "Label",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "04-forms-and-inputs.html",
      "description": "Form label. Pair with the corresponding `htmlFor` to associate with an\ninput. Wraps `.input-label` (and renders `.input-hint` when `hint`…",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/04-forms-and-inputs#text",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Label.json"
    },
    {
      "name": "Badge",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "07-data-display.html",
      "description": "Tiny status / count badge. Wraps `.badge` + tone variants.",
      "useClient": false,
      "interactivity": "display",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#badges",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Badge.json"
    },
    {
      "name": "Chip",
      "chapterTag": "Phase 1A — atom validation slice",
      "chapter": "07-data-display.html",
      "description": "Inline status / filter chip. Wraps `.chip` + tone variants.\nPass `onDismiss` to render a removable × button.",
      "useClient": true,
      "interactivity": "interactive",
      "demoUrl": "https://brand.magicblocks.ai/components/07-data-display#chips",
      "hasLiveDemo": false,
      "detailUrl": "https://brand.magicblocks.ai/api/components/Chip.json"
    }
  ]
}