[
  {
    "kind": "figure",
    "name": "Right triangle with labelled legs and hypotenuse",
    "subject": "math",
    "format": "svg",
    "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 220\" width=\"320\" height=\"220\" role=\"img\" aria-labelledby=\"right-triangle-title\">\n  <title id=\"right-triangle-title\">Right triangle with legs a and b and hypotenuse c</title>\n  <polygon points=\"40,180 260,180 40,40\" fill=\"#eaf1ff\" stroke=\"#1f3f8f\" stroke-width=\"3\" stroke-linejoin=\"round\" />\n  <path d=\"M40 160 H60 V180\" fill=\"none\" stroke=\"#1f3f8f\" stroke-width=\"2\" />\n  <text x=\"150\" y=\"203\" text-anchor=\"middle\" font-family=\"Georgia, serif\" font-size=\"18\" fill=\"#1f3f8f\">a</text>\n  <text x=\"30\" y=\"116\" text-anchor=\"end\" font-family=\"Georgia, serif\" font-size=\"18\" fill=\"#1f3f8f\">b</text>\n  <text x=\"170\" y=\"96\" font-family=\"Georgia, serif\" font-size=\"18\" fill=\"#1f3f8f\">c</text>\n  <text x=\"168\" y=\"28\" text-anchor=\"middle\" font-family=\"Georgia, serif\" font-size=\"16\" fill=\"#333333\">a² + b² = c²</text>\n</svg>\n",
    "caption": "A right triangle whose legs a and b meet at the marked square corner, opposite the hypotenuse c.",
    "source": "stem-mcp seed library",
    "provenance": {
      "origin": "Drawn for this package from the statement of the Pythagorean relation; no existing artwork was traced, copied or adapted.",
      "interpretation": [
        "The right angle sits at the lower left and is marked with the usual small square, so the figure reads correctly without its caption.",
        "The legs are deliberately unequal (220 by 140 user units) so the drawing never suggests the isosceles special case.",
        "Labels are the conventional a, b, c placed beside their own side; the relation a^2 + b^2 = c^2 is printed above the triangle as a reminder, not as a proof."
      ]
    },
    "tags": [
      "geometry",
      "pythagoras",
      "triangle",
      "right angle"
    ],
    "description": "A clean labelled right triangle for introducing or revising the Pythagorean relation. Self-contained SVG: no external URL, no webfont, only the SVG namespace declaration."
  },
  {
    "kind": "figure",
    "name": "Normal curve with mean and one standard deviation either side",
    "subject": "statistics",
    "format": "svg",
    "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 340 220\" width=\"340\" height=\"220\" role=\"img\" aria-labelledby=\"normal-curve-title\">\n  <title id=\"normal-curve-title\">Normal curve with the mean and the points one standard deviation either side</title>\n  <path d=\"M20 180 C90 178 105 50 170 50 C235 50 250 178 320 180\" fill=\"#f2ecff\" stroke=\"#4b2fa8\" stroke-width=\"3\" stroke-linejoin=\"round\" />\n  <line x1=\"20\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"#4b2fa8\" stroke-width=\"2\" />\n  <line x1=\"170\" y1=\"50\" x2=\"170\" y2=\"180\" stroke=\"#4b2fa8\" stroke-width=\"2\" stroke-dasharray=\"5 4\" />\n  <line x1=\"105\" y1=\"172\" x2=\"105\" y2=\"188\" stroke=\"#4b2fa8\" stroke-width=\"2\" />\n  <line x1=\"235\" y1=\"172\" x2=\"235\" y2=\"188\" stroke=\"#4b2fa8\" stroke-width=\"2\" />\n  <text x=\"105\" y=\"206\" text-anchor=\"middle\" font-family=\"Georgia, serif\" font-size=\"15\" fill=\"#4b2fa8\">μ − σ</text>\n  <text x=\"170\" y=\"206\" text-anchor=\"middle\" font-family=\"Georgia, serif\" font-size=\"15\" fill=\"#4b2fa8\">μ</text>\n  <text x=\"235\" y=\"206\" text-anchor=\"middle\" font-family=\"Georgia, serif\" font-size=\"15\" fill=\"#4b2fa8\">μ + σ</text>\n  <text x=\"170\" y=\"32\" text-anchor=\"middle\" font-family=\"Georgia, serif\" font-size=\"12\" fill=\"#333333\">about 68 percent of the area lies between the ticks</text>\n</svg>\n",
    "caption": "A bell-shaped density with the mean marked and ticks one standard deviation on each side.",
    "source": "stem-mcp seed library",
    "provenance": {
      "origin": "Drawn for this package as a schematic sketch of the normal density; it is not a plot of computed values and no existing figure was traced.",
      "interpretation": [
        "The curve is two cubic Bezier segments, symmetric about the mean line, chosen to put the visual inflection near the two ticks; it is a sketch, so no vertical scale is drawn.",
        "The ticks are labelled with the Greek symbols the topic uses, and the 68 percent note is stated as an approximation rather than a computed area.",
        "The baseline doubles as the horizontal axis and closes the filled region, so the shading always ends exactly on the axis."
      ]
    },
    "tags": [
      "distribution",
      "normal",
      "standard deviation",
      "sketch"
    ],
    "description": "A schematic normal curve for teaching the mean, the standard deviation and the empirical rule. Self-contained SVG: no external URL, no webfont, only the SVG namespace declaration."
  },
  {
    "kind": "animation",
    "name": "Plot points and quadrants (Manim scene)",
    "subject": "math",
    "format": "manim-py",
    "path": "pipeline/stem-content/iemh101/animations/plot_points_quadrants.py",
    "caption": "Manim scene: the coordinate plane, its four quadrants, and how an ordered pair is placed.",
    "source": "pipeline/stem-content/iemh101/animations/previews/plot_points_quadrants.mp4",
    "provenance": {
      "origin": "Path reference to the iemh101 lesson scenes, which live in the content repository (pipeline/stem-content/iemh101/animations/) and NOT inside this package; nothing is copied into the store.",
      "interpretation": [
        "Referenced rather than inlined: the scene is authored, reviewed and rendered where the lesson lives, so the library records where it is instead of forking a second copy that would drift.",
        "The path is repository-relative; resolve it against your checkout root before rendering with `manim -ql <file> PlotPointsQuadrants`.",
        "`source` names the rendered preview beside the script, so a caller can show the animation without a Manim install."
      ]
    },
    "tags": [
      "manim",
      "coordinate geometry",
      "quadrants",
      "iemh101"
    ],
    "description": "Canonical example of an animation asset held as a path reference: a Manim scene introducing the coordinate plane and the sign pattern of each quadrant."
  },
  {
    "kind": "animation",
    "name": "Distance formula derivation (Manim scene)",
    "subject": "math",
    "format": "manim-py",
    "path": "pipeline/stem-content/iemh101/animations/distance_derivation.py",
    "caption": "Manim scene: the distance between two points read off the right triangle their coordinates make.",
    "source": "pipeline/stem-content/iemh101/animations/previews/distance_derivation.mp4",
    "provenance": {
      "origin": "Path reference to the iemh101 lesson scenes, which live in the content repository (pipeline/stem-content/iemh101/animations/) and NOT inside this package; nothing is copied into the store.",
      "interpretation": [
        "Referenced rather than inlined, for the same reason as the companion scene: the lesson repository stays the single source of truth for the animation.",
        "The path is repository-relative; render with `manim -ql <file> DistanceDerivation`.",
        "`source` names the rendered preview beside the script, so a caller can show the animation without a Manim install."
      ]
    },
    "tags": [
      "manim",
      "distance formula",
      "coordinate geometry",
      "iemh101"
    ],
    "description": "Canonical example of an animation asset held as a path reference: a Manim scene deriving the distance formula from the right triangle two points determine."
  },
  {
    "kind": "fragment",
    "name": "Definition card (KaTeX-ready)",
    "subject": "math",
    "format": "html",
    "content": "<article class=\"stem-def-card\">\n  <style>\n    .stem-def-card { max-width: 38rem; padding: 0.9rem 1.1rem; border: 1px solid #d8dee9;\n      border-left: 4px solid #1f3f8f; border-radius: 6px; font-family: system-ui, sans-serif; }\n    .stem-def-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: #1f3f8f; }\n    .stem-def-card p { margin: 0.5rem 0; }\n    .stem-def-card .stem-def-card__math { text-align: center; }\n    .stem-def-card dl { margin: 0.5rem 0 0; display: grid; grid-template-columns: auto 1fr;\n      gap: 0.2rem 0.7rem; font-size: 0.92rem; }\n    .stem-def-card dt { font-weight: 600; }\n    .stem-def-card dd { margin: 0; }\n  </style>\n  <h3 class=\"stem-def-card__term\">Term</h3>\n  <p class=\"stem-def-card__statement\">One sentence saying what the term means, in plain words.</p>\n  <p class=\"stem-def-card__math\"><span class=\"stem-math\" data-display=\"block\">a^2 + b^2 = c^2</span></p>\n  <dl class=\"stem-def-card__symbols\">\n    <dt><span class=\"stem-math\" data-display=\"inline\">a</span></dt><dd>first leg, in metres</dd>\n    <dt><span class=\"stem-math\" data-display=\"inline\">b</span></dt><dd>second leg, in metres</dd>\n    <dt><span class=\"stem-math\" data-display=\"inline\">c</span></dt><dd>hypotenuse, in metres</dd>\n  </dl>\n</article>\n",
    "caption": "A bordered card holding a term, a plain-words statement, its defining relation and a symbol list.",
    "source": "stem-mcp seed library",
    "provenance": {
      "origin": "Written for this package as a reusable card structure; the markup and the styles are original.",
      "interpretation": [
        "Every maths slot is a `span.stem-math` whose text is raw LaTeX and whose `data-display` says inline or block, so the caller renders it with KaTeX in the browser or through `render_math` server-side. Nothing here loads KaTeX for you.",
        "Styles ship inside the fragment and are scoped under `.stem-def-card`, so pasting the card into a page cannot restyle the page around it.",
        "The wording is placeholder text: replace the term, the statement and the symbol list, and leave the structure alone."
      ]
    },
    "tags": [
      "html",
      "card",
      "definition",
      "katex"
    ],
    "description": "A drop-in HTML card for a definition and its symbols, with LaTeX kept in data-bearing spans so any renderer can fill them in."
  },
  {
    "kind": "fragment",
    "name": "Worked-example step list (KaTeX-ready)",
    "subject": "math",
    "format": "html",
    "content": "<section class=\"stem-steps\">\n  <style>\n    .stem-steps { max-width: 38rem; padding: 0.9rem 1.1rem; border: 1px solid #d8dee9;\n      border-radius: 6px; font-family: system-ui, sans-serif; }\n    .stem-steps h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #4b2fa8; }\n    .stem-steps ol { margin: 0; padding-left: 1.2rem; }\n    .stem-steps li { margin: 0.55rem 0; }\n    .stem-steps .stem-steps__why { display: block; font-size: 0.85rem; color: #555555; }\n    .stem-steps .stem-math[data-display=\"block\"] { display: block; margin: 0.25rem 0; }\n  </style>\n  <h3>Worked example</h3>\n  <ol>\n    <li>\n      <span class=\"stem-steps__why\">Write down what is given.</span>\n      <span class=\"stem-math\" data-display=\"block\">a = 3,\\quad b = 4</span>\n    </li>\n    <li>\n      <span class=\"stem-steps__why\">Put the numbers into the relation.</span>\n      <span class=\"stem-math\" data-display=\"block\">c^2 = 3^2 + 4^2 = 25</span>\n    </li>\n    <li>\n      <span class=\"stem-steps__why\">Take the positive root, because a length cannot be negative.</span>\n      <span class=\"stem-math\" data-display=\"block\">c = 5</span>\n    </li>\n  </ol>\n</section>\n",
    "caption": "A numbered worked example where each step states why it is taken before showing the line of algebra.",
    "source": "stem-mcp seed library",
    "provenance": {
      "origin": "Written for this package as a reusable step-list structure; the markup, the styles and the sample working are original.",
      "interpretation": [
        "Each step leads with a reason and follows with the algebra, which is the ordering worked examples are more effective in; the sample working (a 3-4-5 triangle) is there to be replaced.",
        "Maths slots are `span.stem-math` with raw LaTeX text and a `data-display` hint, matching the definition card so one renderer handles both fragments.",
        "Styles are scoped under `.stem-steps` and travel with the fragment."
      ]
    },
    "tags": [
      "html",
      "worked example",
      "steps",
      "katex"
    ],
    "description": "A drop-in HTML step list for a worked example, reason first and working second, with LaTeX kept in data-bearing spans."
  }
]
