{
  "schemaVersion": 1,
  "scope": "Current shared tutorial elements, homepage and podcast cards, promotions, navigation, theme controls, and signature widgets. Examples reuse native CSS and extracted source markup. Lesson-specific demos, legacy Flash layouts, and the unversioned Discourse theme are not a shared component library.",
  "groups": [
    "Reading",
    "Promotions",
    "Navigation",
    "Widgets",
    "Media",
    "Reference"
  ],
  "components": [
    {
      "id": "article-heading",
      "title": "Article title and metadata",
      "group": "Reading",
      "description": "Native article title, author block, and Filed under metadata.",
      "selectors": [
        "#tutorialInformation",
        ".authorText",
        ".tutorialInfo"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.css",
        "design/template.htm",
        "html5/building_your_first_web_page.htm"
      ],
      "tokens": [
        "--headerText",
        "--bodyText"
      ],
      "kind": "component",
      "height": 340,
      "usage": "<div id=\"tutorialInformation\">\n  <div class=\"authorText\">\n    <h1>Your article title</h1>\n    <p class=\"tutorialInfo\">Filed under <a class=\"blueEmphasis\" href=\"/html5/learn_html_css.htm\">HTML and CSS</a></p>\n  </div>\n</div>",
      "notes": "Keep the shared title size and font. Do not introduce a separate hero or display treatment.",
      "example": "https://www.kirupa.com/html5/building_your_first_web_page.htm",
      "variants": [
        {
          "id": "default",
          "title": "Article title and metadata",
          "preview": "/design/generated/components/article-heading-default.htm",
          "usage": "<div id=\"tutorialInformation\">\n  <div class=\"authorText\">\n    <h1>Your article title</h1>\n    <p class=\"tutorialInfo\">Filed under <a class=\"blueEmphasis\" href=\"/html5/learn_html_css.htm\">HTML and CSS</a></p>\n  </div>\n</div>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "c119b4b550c1656f1a2ac5b387e46af3f1fbfb4d73056922420308d82aa4816a"
        }
      ]
    },
    {
      "id": "reading-type",
      "title": "Headings, links, code, and emphasis",
      "group": "Reading",
      "description": "Article heading levels and inline treatments using the site's existing selectors.",
      "selectors": [
        "#mainContent h2",
        "#mainContent h3",
        "#mainContent h4",
        ".blueEmphasis",
        ".inlineCode",
        "strong",
        "em"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--serifFonts",
        "--monoFonts",
        "--headerText",
        "--linkForeground",
        "--linkHoverBackground"
      ],
      "kind": "component",
      "height": 560,
      "usage": "<h2>Section heading</h2>\n<p>Read <a class=\"blueEmphasis\" href=\"/path/example.htm\">the example</a>.\nUse <code class=\"inlineCode\">value</code> for an identifier.</p>\n<h3>Subsection heading</h3>",
      "notes": "Links that need to look like links in tutorial body content require blueEmphasis. Use inlineCode for identifiers; do not apply it to a whole code block.",
      "variants": [
        {
          "id": "default",
          "title": "Headings, links, code, and emphasis",
          "preview": "/design/generated/components/reading-type-default.htm",
          "usage": "<h2>Section heading</h2>\n<p>Read <a class=\"blueEmphasis\" href=\"/path/example.htm\">the example</a>.\nUse <code class=\"inlineCode\">value</code> for an identifier.</p>\n<h3>Subsection heading</h3>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "f6b20e2b55de8870be4403216c5cb47449794fac46ea1326152202b28dff1a69"
        }
      ]
    },
    {
      "id": "buttons",
      "title": "Buttons and size variants",
      "group": "Reading",
      "description": "Primary actions, the historical greenButton alias, and the compact button modifier.",
      "selectors": [
        ".kirupaButton",
        ".greenButton",
        ".kirupaButtonSmall"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--primary",
        "--primaryDarker",
        "--textOnPrimary"
      ],
      "kind": "component",
      "height": 320,
      "usage": "<button type=\"button\" class=\"kirupaButton\">Run example</button>\n<a class=\"greenButton\" href=\"/path/example.htm\">Open reference</a>\n<button type=\"button\" class=\"kirupaButton kirupaButtonSmall\">Compact</button>",
      "notes": "Use buttons for actions and anchors for navigation. greenButton is a historical name; its color follows the palette. The compact modifier does not guarantee a 44px touch target. Check focus, disabled behavior, and hit area in the actual context.",
      "variants": [
        {
          "id": "default",
          "title": "Buttons and size variants",
          "preview": "/design/generated/components/buttons-default.htm",
          "usage": "<button type=\"button\" class=\"kirupaButton\">Run example</button>\n<a class=\"greenButton\" href=\"/path/example.htm\">Open reference</a>\n<button type=\"button\" class=\"kirupaButton kirupaButtonSmall\">Compact</button>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "ee519366ac378b24c4a4f695555b8ba9570ca5481723fe22ab7171a06985daea"
        }
      ]
    },
    {
      "id": "lists",
      "title": "Article lists and ordered steps",
      "group": "Reading",
      "description": "Native linked topic lists, ordinary bullet lists, and ordered instructions.",
      "selectors": [
        ".articleList",
        "#mainContent ul",
        "#mainContent ol"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.css",
        "javascript/learn_javascript.htm"
      ],
      "tokens": [
        "--bodyText",
        "--primary",
        "--linkForeground"
      ],
      "kind": "component",
      "height": 500,
      "usage": "<ul class=\"articleList\">\n  <li><a href=\"/html5/functions_in_javascript.htm\">Functions</a></li>\n</ul>\n<ol><li>First step</li><li>Second step</li></ol>",
      "notes": "articleList has its own link and icon treatment. Ordinary inline reading links still use blueEmphasis. Keep list semantics instead of imitating bullets with text.",
      "variants": [
        {
          "id": "default",
          "title": "Article lists and ordered steps",
          "preview": "/design/generated/components/lists-default.htm",
          "usage": "<ul class=\"articleList\">\n  <li><a href=\"/html5/functions_in_javascript.htm\">Functions</a></li>\n</ul>\n<ol><li>First step</li><li>Second step</li></ol>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "9f96fbca711c623bb709d1ca80768c701bfd0d6fa5111d616680657ab4630811"
        }
      ]
    },
    {
      "id": "notices",
      "title": "Notes, downloads, and archive notices",
      "group": "Reading",
      "description": "Three existing callout patterns with different purposes.",
      "selectors": [
        ".callout",
        ".downloadCallout",
        ".legacyArchiveNote"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.css",
        "design/archive.htm"
      ],
      "tokens": [
        "--highlighter",
        "--lighter",
        "--darkTextSecondary"
      ],
      "kind": "component",
      "height": 340,
      "notes": "A note explains an exception; a download callout exposes a file; an archive notice prevents an old pattern being mistaken for current guidance.",
      "variants": [
        {
          "id": "note",
          "title": "Note",
          "preview": "/design/generated/components/notices-note.htm",
          "usage": "<aside class=\"callout\"><p><strong>Note title</strong></p><p>Necessary context.</p></aside>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "89e2b4c763f500cb28b065c61f1038211e85cef1a6b09b8321ad00eda20b3c38"
        },
        {
          "id": "download",
          "title": "Download",
          "preview": "/design/generated/components/notices-download.htm",
          "usage": "<div class=\"downloadCallout\">\n  <img src=\"/pixel_icons/save.gif\" width=\"48\" height=\"48\" alt=\"\">\n  <p><a class=\"blueEmphasis\" href=\"/path/example.svg\" download>Download SVG</a></p>\n</div>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "c37ef58c50850026b09b0e5125e45ea1c6cc7266a43e727f3a1937fbbf42a231"
        },
        {
          "id": "archive",
          "title": "Archive notice",
          "preview": "/design/generated/components/notices-archive.htm",
          "usage": "<aside class=\"legacyArchiveNote\"><p>Explain the archive status and link to the current reference.</p></aside>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "2be784a168784ba1104ada9820ab5967ee75fb26585bc9528ae92eba7d689cab"
        }
      ]
    },
    {
      "id": "code",
      "title": "Syntax-highlighted code",
      "group": "Reading",
      "description": "Native Prism code presentation, including real highlighting and overflow behavior.",
      "selectors": [
        "pre[class*=\"language-\"]",
        "code[class*=\"language-\"]",
        ".token"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.css",
        "ssi/newDesign/src/kirupa.js",
        "js/prism_v1.js"
      ],
      "tokens": [
        "--monoFonts",
        "--codeFilter"
      ],
      "kind": "component",
      "height": 360,
      "usage": "<pre class=\"language-javascript\"><code class=\"language-javascript\">const count = 3;</code></pre>",
      "notes": "Put the language on both pre and code so the unhighlighted block has stable geometry. The normal shell loads Prism near the viewport; the isolated example loads the same library explicitly.",
      "variants": [
        {
          "id": "default",
          "title": "Syntax-highlighted code",
          "preview": "/design/generated/components/code-default.htm",
          "usage": "<pre class=\"language-javascript\"><code class=\"language-javascript\">const count = 3;</code></pre>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "217e1c9db192c726e47dff4a7a845c71683ebb9be2555997520cadb5ac8dcee8"
        }
      ]
    },
    {
      "id": "images",
      "title": "Images and embedded-media frames",
      "group": "Reading",
      "description": "Bordered images, borderless artwork, and the shared iframe frame.",
      "selectors": [
        ".centerImage",
        ".centerImageNoBorder",
        ".centerIframe",
        ".imageCaption"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.css",
        "data_structures_algorithms/understanding_merkle_trees.htm"
      ],
      "tokens": [
        "--mediaBorder"
      ],
      "kind": "component",
      "height": 430,
      "notes": "Introduce figures in the surrounding prose. Preserve intrinsic dimensions and purposeful alt text. The embed preview only demonstrates the frame; it does not load a player or third-party service.",
      "variants": [
        {
          "id": "bordered",
          "title": "Bordered image",
          "preview": "/design/generated/components/images-bordered.htm",
          "usage": "<p class=\"centerImage\"><img src=\"/path/image.png\" width=\"640\" height=\"360\" alt=\"The point of the image.\"></p>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "e6df1795771955453e20fa3443dd106344025a74422a1f58a833bec6c36f7289"
        },
        {
          "id": "borderless",
          "title": "Borderless illustration",
          "preview": "/design/generated/components/images-borderless.htm",
          "usage": "<p class=\"centerImageNoBorder\"><img src=\"/path/diagram.svg\" width=\"600\" height=\"400\" alt=\"The relationship illustrated.\" style=\"background:#fff\"></p>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "fe26fb412de645452d6c509a911a56f8920b081e65d8f3c76001476092663ac2"
        },
        {
          "id": "embed",
          "title": "Embedded-media frame",
          "preview": "/design/generated/components/images-embed.htm",
          "usage": "<div class=\"centerImage\">\n  <iframe title=\"Descriptive player title\" width=\"560\" height=\"315\" src=\"YOUR_APPROVED_EMBED_URL\" loading=\"lazy\" allowfullscreen></iframe>\n</div>",
          "source": "ssi/newDesign/src/kirupa.css",
          "provenance": "Example composed with native selectors",
          "sha256": "f610c5c541a2690292c76ae299b2aa79edc97563f9ee1d82506e9680dd190e68"
        }
      ]
    },
    {
      "id": "books",
      "title": "Book promotions",
      "group": "Promotions",
      "description": "Inline book callouts and the older cover-and-copy book blocks.",
      "selectors": [
        "#kbook_callout",
        ".lightbulb_callout",
        ".lightbulb",
        ".bookContent",
        "#bookImage",
        "#bookContent",
        ".greenButton"
      ],
      "sources": [
        "ssi/newDesign/inline_algorithms.shtml",
        "ssi/newDesign/jsBook.shtml",
        "ssi/newDesign/canvasBook.shtml",
        "ssi/newDesign/arrayBook.shtml",
        "ssi/newDesign/reactBook.shtml",
        "ssi/newDesign/animBook.shtml",
        "ssi/newDesign/3dBook.shtml",
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--lighter",
        "--light",
        "--primaryLightest",
        "--mediaBorder"
      ],
      "kind": "component",
      "height": 620,
      "notes": "Markup and inline styles are extracted from the real includes. Render one variant at a time because several share IDs. 3dBook.shtml currently repeats the animation promotion; it is not a separate 3D-book design. Older includes may need accessibility and mobile updates before reuse.",
      "example": "https://www.kirupa.com/data_structures_algorithms/understanding_merkle_trees.htm",
      "variants": [
        {
          "id": "algorithms",
          "title": "Data Structures and Algorithms",
          "preview": "/design/generated/components/books-algorithms.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/inline_algorithms.shtml\"-->",
          "source": "ssi/newDesign/inline_algorithms.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "48f1f005205cc70e06458ae27410035e5301a218fd77b259ad11fa38048f6f74"
        },
        {
          "id": "javascript",
          "title": "JavaScript",
          "preview": "/design/generated/components/books-javascript.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/jsBook.shtml\"-->",
          "source": "ssi/newDesign/jsBook.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "bad99acfcd4053ecb1eb65e7ce7645b82659382025229af64256dee26d505ca3"
        },
        {
          "id": "canvas",
          "title": "Canvas",
          "preview": "/design/generated/components/books-canvas.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/canvasBook.shtml\"-->",
          "source": "ssi/newDesign/canvasBook.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "2d66b8040086671215b69529ebb323fb77a20f10f010b61171b52329a16e4cc1"
        },
        {
          "id": "arrays",
          "title": "Arrays",
          "preview": "/design/generated/components/books-arrays.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/arrayBook.shtml\"-->",
          "source": "ssi/newDesign/arrayBook.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "e6997494688c687525bb45b5284b03f5b2d54fb98068a829536a0124ab61b0f4"
        },
        {
          "id": "react",
          "title": "React",
          "preview": "/design/generated/components/books-react.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/reactBook.shtml\"-->",
          "source": "ssi/newDesign/reactBook.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "7eb4be1c6f9a6d826230fb723f47ad5c8e0845dbca8b683097f8cac40a8cd738"
        },
        {
          "id": "animation",
          "title": "Web Animation",
          "preview": "/design/generated/components/books-animation.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/animBook.shtml\"-->",
          "source": "ssi/newDesign/animBook.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "fcfd9691d5dbd704a135c27a3b3fd1d08708893dfc53398686ff4df8c1930e64"
        }
      ]
    },
    {
      "id": "newsletter-inline",
      "title": "Inline newsletter callout",
      "group": "Promotions",
      "description": "Mail artwork, newsletter copy, and a linked action inside an article.",
      "selectors": [
        "#newsletter_callout"
      ],
      "sources": [
        "ssi/newDesign/inline_newsletter.shtml",
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--lighter",
        "--light",
        "--mediaBorder"
      ],
      "kind": "component",
      "height": 410,
      "notes": "Reuse the include and its ID so style-specific artwork remains attached. The preview never subscribes or opens the newsletter service.",
      "variants": [
        {
          "id": "default",
          "title": "Inline newsletter callout",
          "preview": "/design/generated/components/newsletter-inline-default.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/inline_newsletter.shtml\"-->",
          "source": "ssi/newDesign/inline_newsletter.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "a79475a5c15d819d328e2cd5126c2a3b75b84f6b217f4d3018de914f95535b42"
        }
      ]
    },
    {
      "id": "newsletter-footer",
      "title": "Footer newsletter block",
      "group": "Promotions",
      "description": "The shared newsletter heading, copy, and action above the site footer.",
      "selectors": [
        "#sigNewsletter",
        ".newsletterContainer",
        ".greenButton"
      ],
      "sources": [
        "ssi/newDesign/src/footer.shtml",
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--primary",
        "--bodyText",
        "--textOnPrimary"
      ],
      "kind": "component",
      "height": 440,
      "usage": "<!--#include virtual=\"/ssi/newDesign/footer.shtml\"-->",
      "notes": "The specimen extracts only the visual block. In a real page, include the shared footer once; do not copy its service bootstraps into another widget.",
      "variants": [
        {
          "id": "default",
          "title": "Footer newsletter block",
          "preview": "/design/generated/components/newsletter-footer-default.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/footer.shtml\"-->",
          "source": "ssi/newDesign/src/footer.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "414fa83c6e0471bca26cda9ee2a6736fc3bd93681eca189a380cecbc45185c47"
        }
      ]
    },
    {
      "id": "header",
      "title": "Header and utility controls",
      "group": "Navigation",
      "description": "KIRUPA branding, animated background, visitor count, and header controls.",
      "selectors": [
        "#mainHeader",
        "#backgroundHeader",
        "#soundToggle",
        "#onlineCountLink"
      ],
      "sources": [
        "ssi/newDesign/src/header.shtml",
        "ssi/newDesign/src/kirupa.css",
        "ssi/newDesign/styles/"
      ],
      "tokens": [
        "--headerBackground",
        "--logoTextColor",
        "--primary"
      ],
      "kind": "header",
      "height": 420,
      "usage": "<!--#include virtual=\"/ssi/newDesign/header.shtml\"-->",
      "notes": "The preview runs the real visual scripts with fictional visitor data. Navigation and sound actions are local demonstrations. The production include retains its normal behavior.",
      "example": "https://www.kirupa.com/",
      "variants": []
    },
    {
      "id": "left-rail",
      "title": "Tutorial left navigation",
      "group": "Navigation",
      "description": "Native section headings, topic links, and current-article state.",
      "selectors": [
        ".leftNavContainer",
        ".leftNav",
        ".leftNavContents",
        ".currentArticle"
      ],
      "sources": [
        "ssi/newDesign/left_js.shtml",
        "ssi/newDesign/src/kirupa.css",
        "design/template.htm"
      ],
      "tokens": [
        "--leftNavLight",
        "--structureBorder",
        "--bodyText"
      ],
      "kind": "component",
      "height": 490,
      "usage": "<!--#include virtual=\"/ssi/newDesign/left_js.shtml\"-->\n<!-- The shared controller marks the matching URL with currentArticle. -->",
      "notes": "The preview reveals the desktop rail inside a bounded scroll region even at a small iframe width. It preserves the real link formatting. The live shell hides the rail at its responsive breakpoint.",
      "example": "https://www.kirupa.com/html5/building_your_first_web_page.htm",
      "variants": [
        {
          "id": "default",
          "title": "Tutorial left navigation",
          "preview": "/design/generated/components/left-rail-default.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/left_js.shtml\"-->\n<!-- The shared controller marks the matching URL with currentArticle. -->",
          "source": "ssi/newDesign/left_js.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "ccc5b5458de36d49f6ec339f6495e4bed2b546b1ca7b2dd9a131bea9e6e20c04"
        }
      ]
    },
    {
      "id": "article-navigation",
      "title": "Previous and next article links",
      "group": "Navigation",
      "description": "Native arrow artwork and labels at the end of an article.",
      "selectors": [
        ".articleNavigation",
        "#previousArticle",
        "#nextArticle",
        ".navText"
      ],
      "sources": [
        "ssi/kirupa_sig.shtml",
        "ssi/newDesign/src/kirupa.css",
        "tools/build_design_system.mjs"
      ],
      "tokens": [
        "--linkForeground",
        "--linkHoverBackground"
      ],
      "kind": "component",
      "height": 320,
      "usage": "<nav class=\"articleNavigation\" aria-label=\"Article sequence\">\n  <ul><!-- Reuse the previousArticle and nextArticle markup from ssi/kirupa_sig.shtml. --></ul>\n</nav>",
      "notes": "Retain readable link labels, actual destinations, rel values, and the native SVG arrows. The shared runtime derives the sequence from the navigation.",
      "variants": [
        {
          "id": "default",
          "title": "Previous and next article links",
          "preview": "/design/generated/components/article-navigation-default.htm",
          "usage": "<nav class=\"articleNavigation\" aria-label=\"Article sequence\">\n  <ul><!-- Reuse the previousArticle and nextArticle markup from ssi/kirupa_sig.shtml. --></ul>\n</nav>",
          "source": "ssi/kirupa_sig.shtml",
          "provenance": "Generated from the native source",
          "sha256": "23bbf25e282979e7df210661ac8fbcc517f4682bb49fc1b50f23add693caafc2"
        }
      ]
    },
    {
      "id": "footer",
      "title": "Site footer",
      "group": "Navigation",
      "description": "Branding, social icons, topic links, and site information.",
      "selectors": [
        "#newFooter",
        ".footerSocials",
        ".popularTags",
        ".aboutFooter"
      ],
      "sources": [
        "ssi/newDesign/src/footer.shtml",
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--bodyText",
        "--structureBorder",
        "--primary"
      ],
      "kind": "component",
      "height": 820,
      "usage": "<!--#include virtual=\"/ssi/newDesign/footer.shtml\"-->",
      "notes": "Only the visual footer is rendered here. Social destinations remain inert. Its native layout adapts to the iframe width; do not duplicate the shared footer's scripts.",
      "variants": [
        {
          "id": "default",
          "title": "Site footer",
          "preview": "/design/generated/components/footer-default.htm",
          "usage": "<!--#include virtual=\"/ssi/newDesign/footer.shtml\"-->",
          "source": "ssi/newDesign/src/footer.shtml",
          "provenance": "Source-extracted markup",
          "sha256": "3c22d22b90e5bb70cbe6056980a189ee873f4805b4a4e8be90b0907c66349f14"
        }
      ]
    },
    {
      "id": "home-cards",
      "title": "Homepage content cards",
      "group": "Navigation",
      "description": "Latest-content cards for tutorials, the newsletter, podcasts, and forum discussions.",
      "selectors": [
        "#latest",
        ".latest-card",
        ".latest-card-heading",
        ".latest-art",
        ".latest-posts",
        ".latest-more"
      ],
      "sources": [
        "index.html"
      ],
      "tokens": [
        "--latest-panel",
        "--latest-ink",
        "--latest-radius",
        "--latest-shadow"
      ],
      "kind": "component",
      "height": 840,
      "usage": "<section id=\"latest\">\n  <!-- Reuse the latest-card structure and scoped CSS from index.html. -->\n</section>",
      "notes": "Each variant is an actual homepage card with the homepage's inline CSS. Text is the checked-in snapshot, not a live feed. The scoped latest-* tokens belong to this component, not the global token set.",
      "example": "https://www.kirupa.com/",
      "variants": [
        {
          "id": "articles",
          "title": "Tutorials",
          "preview": "/design/generated/components/home-cards-articles.htm",
          "usage": "<section id=\"latest\">\n  <!-- Reuse the latest-card structure and scoped CSS from index.html. -->\n</section>",
          "source": "index.html",
          "provenance": "Source-extracted markup",
          "sha256": "15349f0a3c1a025713782575e4fef50ffccfe3bc4ec6b334c8b698b7267b98d3"
        },
        {
          "id": "newsletter",
          "title": "Newsletter",
          "preview": "/design/generated/components/home-cards-newsletter.htm",
          "usage": "<section id=\"latest\">\n  <!-- Reuse the latest-card structure and scoped CSS from index.html. -->\n</section>",
          "source": "index.html",
          "provenance": "Source-extracted markup",
          "sha256": "86dce0324951024b6f357b2e7e2103b6a38e66bbf205589df0ccdbc6daf20930"
        },
        {
          "id": "podcasts",
          "title": "Podcasts",
          "preview": "/design/generated/components/home-cards-podcasts.htm",
          "usage": "<section id=\"latest\">\n  <!-- Reuse the latest-card structure and scoped CSS from index.html. -->\n</section>",
          "source": "index.html",
          "provenance": "Source-extracted markup",
          "sha256": "fde4670b46194164b9c2120098f21e907a1ac4252a8e2fdada1b8f994a5e93b2"
        },
        {
          "id": "forums",
          "title": "Forum discussions",
          "preview": "/design/generated/components/home-cards-forums.htm",
          "usage": "<section id=\"latest\">\n  <!-- Reuse the latest-card structure and scoped CSS from index.html. -->\n</section>",
          "source": "index.html",
          "provenance": "Source-extracted markup",
          "sha256": "87c3eb6ac836519e7bb06b318f8b87eeaa6e444dc8cfc08a546f58c90f16026e"
        }
      ]
    },
    {
      "id": "theme-customizer",
      "title": "Theme customizer",
      "group": "Widgets",
      "description": "Native style cards, palette swatches, custom-color input, and mode controls.",
      "selectors": [
        "#themeWrapper",
        "#themePanel",
        ".themeStyles",
        ".themeSwatches",
        ".themeSegments"
      ],
      "sources": [
        "ssi/newDesign/src/kirupa.js",
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--themeCardBg",
        "--mediaBorder",
        "--primary"
      ],
      "kind": "component",
      "height": 850,
      "usage": "<!-- Include the shared head, header, and footer.\nThe shared kirupa.js controller builds #themeWrapper and owns persistence.\nDo not copy that controller into a locally themed specimen. -->",
      "notes": "Markup is generated by the native dialogMarkup function without running its persistence controller. Form controls demonstrate local selection only; the controls above the preview set its actual theme. Closing or resetting this example never changes saved site preferences.",
      "variants": [
        {
          "id": "default",
          "title": "Theme customizer",
          "preview": "/design/generated/components/theme-customizer-default.htm",
          "usage": "<!-- Include the shared head, header, and footer.\nThe shared kirupa.js controller builds #themeWrapper and owns persistence.\nDo not copy that controller into a locally themed specimen. -->",
          "source": "ssi/newDesign/src/kirupa.js",
          "provenance": "Generated from the native source",
          "sha256": "9f432e1313706e2c30fb4b5c9cc4cfc7ac0d1743b9da230761c18337ffcbdebc"
        }
      ]
    },
    {
      "id": "search",
      "title": "Search dialog",
      "group": "Widgets",
      "description": "The real search interface with a local result provider and keyboard navigation.",
      "selectors": [
        ".DocSearch-Button",
        ".DocSearch-Modal",
        ".DocSearch-Input",
        ".DocSearch-Hit"
      ],
      "sources": [
        "ssi/newDesign/src/footer.shtml",
        "ssi/newDesign/search.js",
        "ssi/newDesign/src/docsearch.css"
      ],
      "tokens": [
        "--pageBackground",
        "--bodyText",
        "--primary",
        "--docsearch-muted-color"
      ],
      "kind": "search",
      "height": 660,
      "usage": "<!-- Use the search opener and lazy loader supplied by the shared footer.\nDo not duplicate production transport configuration in an embedded demo. -->",
      "notes": "Open the dialog and search for grid or code. Results are local fixtures and search storage stays in memory within the preview; no query, analytics event, or saved-search entry is sent to production. Escape closes the example.",
      "variants": []
    },
    {
      "id": "chat",
      "title": "kirupaBot launcher and chat panel",
      "group": "Widgets",
      "description": "Launcher, welcome message, composer, answer, loading, and error states.",
      "selectors": [
        "#kirupabot-widget",
        ".kbw-launcher",
        ".kbw-panel",
        ".kbw-message",
        ".kbw-typing"
      ],
      "sources": [
        "ssi/newDesign/src/kirupabot-widget.js",
        "ssi/newDesign/src/kirupabot-widget.css"
      ],
      "tokens": [
        "--primary",
        "--bodyText",
        "--inputBackground"
      ],
      "kind": "chat",
      "height": 740,
      "usage": "<!-- The shared footer loads kirupabot-widget.js and its stylesheet.\nUse the existing launcher/panel implementation; do not mount it twice. -->",
      "notes": "Select each state in the example or type a local demo message. Responses are fixtures. No real question is sent and no chat history is persisted.",
      "example": "https://www.kirupa.com/design/",
      "variants": []
    },
    {
      "id": "online",
      "title": "Visitor globe and table",
      "group": "Widgets",
      "description": "Real globe renderers with visitor markers and a semantic location table.",
      "selectors": [
        "#clayGlobeStage",
        "#clayGlobe",
        ".clay-presence-table",
        ".clay-table-location"
      ],
      "sources": [
        "whos-online/index.php",
        "whos-online/clay-globe.js",
        "whos-online/clay-globe.css"
      ],
      "tokens": [
        "--pageBackground",
        "--bodyText",
        "--primary",
        "--structureBorder"
      ],
      "kind": "online",
      "height": 760,
      "usage": "<!-- Reuse the stage, renderer, and table structure from whos-online/index.php.\nKeep production presence collection separate from display-only fixtures. -->",
      "notes": "Uses the actual renderers with fictional locations and no presence service. Preserve an accessible text/table equivalent and honor reduced motion.",
      "example": "https://www.kirupa.com/whos-online/",
      "variants": []
    },
    {
      "id": "podcast-card",
      "title": "Podcast index card",
      "group": "Media",
      "description": "Episode artwork, guest name, title, date, and duration.",
      "selectors": [
        ".podcastGrid",
        ".podcastCard",
        ".podcastCardCopy",
        ".podcastGuest",
        ".podcastRuntime"
      ],
      "sources": [
        "podcast/index.htm"
      ],
      "tokens": [
        "--structureBorder",
        "--pageBackground",
        "--bodyText",
        "--primaryLighter"
      ],
      "kind": "component",
      "height": 560,
      "usage": "<ul class=\"podcastGrid\">\n  <li class=\"podcastCard\"><a href=\"/podcast/episode.htm\">\n    <img src=\"/podcast/images/episode.jpg\" alt=\"\">\n    <span class=\"podcastCardCopy\">\n      <span class=\"podcastGuest\">Guest name</span>\n      <strong>Episode title</strong>\n      <span class=\"podcastRuntime\">Date and duration</span>\n    </span>\n  </a></li>\n</ul>",
      "notes": "The example extracts the actual first card and scoped CSS from the podcast index. A cover that repeats the neighboring title can use empty alt text.",
      "example": "https://www.kirupa.com/podcast/",
      "variants": [
        {
          "id": "default",
          "title": "Podcast index card",
          "preview": "/design/generated/components/podcast-card-default.htm",
          "usage": "<ul class=\"podcastGrid\">\n  <li class=\"podcastCard\"><a href=\"/podcast/episode.htm\">\n    <img src=\"/podcast/images/episode.jpg\" alt=\"\">\n    <span class=\"podcastCardCopy\">\n      <span class=\"podcastGuest\">Guest name</span>\n      <strong>Episode title</strong>\n      <span class=\"podcastRuntime\">Date and duration</span>\n    </span>\n  </a></li>\n</ul>",
          "source": "podcast/index.htm",
          "provenance": "Source-extracted markup",
          "sha256": "19ce8f24def825cddbb6fd683c6abfa2c877c755830bab87b2a6ef0470200673"
        }
      ]
    },
    {
      "id": "podcast",
      "title": "Episode media",
      "group": "Media",
      "description": "A real interview cover in a locally themed media context.",
      "selectors": [
        ".centerImage",
        ".centerImageNoBorder"
      ],
      "sources": [
        "podcast/dave_thackeray_staying_human.htm",
        "ssi/newDesign/src/kirupa.css"
      ],
      "tokens": [
        "--mediaBorder",
        "--pageBackground"
      ],
      "kind": "podcast",
      "height": 460,
      "usage": "<!-- Reuse the podcast page renderer and template for new episodes.\nDo not hand-copy an episode page or auto-start its player. -->",
      "notes": "The photograph is fixed artwork. The example is a cover and episode link, not a working video player.",
      "example": "https://www.kirupa.com/podcast/dave_thackeray_staying_human.htm",
      "variants": []
    },
    {
      "id": "short",
      "title": "Short-form video and captions",
      "group": "Media",
      "description": "Caption placement and real portrait or square video reference frames.",
      "selectors": [],
      "sources": [
        "learn/videos.htm",
        ".github/skills/kirupa-podcast/references/highlight-clips.md"
      ],
      "tokens": [],
      "kind": "short",
      "height": 540,
      "usage": "<!-- Use the kirupa-podcast highlight workflow for captioned exports.\nCaption font: Born2bSportyV10, not Permanent Marker or Born2bSporty v2. -->",
      "notes": "This is an export pattern, not a CSS component. The caption font is author-confirmed but not bundled; the layout diagram labels its fallback. No video or audio starts.",
      "variants": []
    },
    {
      "id": "forum-post",
      "title": "Forum post structure",
      "group": "Media",
      "description": "Author identity, post content, code, spacing, and visible bot labeling.",
      "selectors": [],
      "sources": [
        "design/system.source.json",
        "design/screenshots/manifest.json"
      ],
      "tokens": [],
      "kind": "forums",
      "height": 670,
      "usage": "<!-- Read /design/sections/forums.md and the captured live forum examples.\nThe current Discourse theme is not versioned in this repository. -->",
      "notes": "Explicitly a layout contract with fictional posts, not a copy of the live Discourse theme or a reusable Discourse plugin.",
      "example": "https://forum.kirupa.com/",
      "variants": []
    },
    {
      "id": "agent-instructions",
      "title": "Agent Instructions disclosure",
      "group": "Reference",
      "description": "The design reference's collapsible, copyable prompt with direct Markdown and text downloads.",
      "selectors": [
        ".agent-instructions",
        ".action-row",
        "[data-copy]"
      ],
      "sources": [
        "tools/build_design_system.mjs",
        "design/design.css",
        "design/design.js"
      ],
      "tokens": [
        "--inputBorder",
        "--primaryLightest",
        "--darkTextSecondary"
      ],
      "kind": "component",
      "height": 500,
      "usage": "<details class=\"agent-instructions\">\n  <summary>Agent Instructions <span> / section-id</span></summary>\n  <p id=\"prompt-section-id\">Task-scoped instructions.</p>\n  <div class=\"action-row\">\n    <button type=\"button\" data-copy=\"prompt-section-id\">Copy instructions</button>\n    <a class=\"blueEmphasis\" href=\"/design/agent/section-id.txt\" download>Download prompt</a>\n  </div>\n</details>",
      "notes": "Use the generator's shared disclosure, not a separate copy of the prompt. The example supports native expand/collapse and local clipboard copying; the outer page's instructions remain independent.",
      "variants": [
        {
          "id": "default",
          "title": "Agent Instructions disclosure",
          "preview": "/design/generated/components/agent-instructions-default.htm",
          "usage": "<details class=\"agent-instructions\">\n  <summary>Agent Instructions <span> / section-id</span></summary>\n  <p id=\"prompt-section-id\">Task-scoped instructions.</p>\n  <div class=\"action-row\">\n    <button type=\"button\" data-copy=\"prompt-section-id\">Copy instructions</button>\n    <a class=\"blueEmphasis\" href=\"/design/agent/section-id.txt\" download>Download prompt</a>\n  </div>\n</details>",
          "source": "tools/build_design_system.mjs",
          "provenance": "Generated from the native source",
          "sha256": "c80c4137cc61514803b439c36d7a9301213aa752116f21d6eb33fc5f0808149f"
        }
      ]
    }
  ]
}