LivingCourseStory

section · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

A looping three-beat animation: a source document changes, ulams finds every lesson and quiz question that cites it, and an approved proposal updates the lesson while learner progress is kept. Example values only.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "LivingCourseStory",
  "props": {
    "id": "living",
    "eyebrow": "living course",
    "title": "Your course updates itself when your sources change",
    "intro": "Edit a doc or merge to a repo. ulams finds every lesson and question that cites it and proposes the update. You approve, and learners keep their progress.",
    "status": "coming",
    "valueLine": "Courses stop going stale, and nothing changes without your approval.",
    "description": "An animated example in three steps. First, a line in docs/slo.md changes from 99.9 % to 99.95 % and a new line about the 30-day budget is added. Second, ulams finds the lesson paragraph and the quiz question that cite docs/slo.md section 2. Third, a proposal with a red and green diff appears, the author clicks Approve, the lesson text updates and a badge confirms that learner progress was kept.",
    "beats": [
      {
        "title": "Your source changes",
        "text": "A line in docs/slo.md is edited."
      },
      {
        "title": "ulams finds every lesson that cites it",
        "text": "The lesson paragraph and a quiz question light up."
      },
      {
        "title": "You approve, learners keep their progress",
        "text": "The proposal is a diff; one click updates the lesson."
      }
    ],
    "source": {
      "file": "docs/slo.md",
      "heading": "Error budgets",
      "context": "Error budget = (1 − SLO) × window",
      "lead": "Default SLO for checkout:",
      "before": "99.9 %",
      "after": "99.95 %",
      "added": "Budget over 30 days: 21.6 minutes"
    },
    "lesson": {
      "title": "Lesson 2 · SLOs and error budgets",
      "lead": "Default SLO for checkout:",
      "citation": "docs/slo.md §2",
      "question": "What is the default SLO for checkout?",
      "questionCite": "docs/slo.md §2"
    },
    "proposal": {
      "title": "Proposed update · 1 lesson, 1 question",
      "approve": "Approve",
      "done": "Updated · learner progress kept"
    }
  }
}

Props

Prop	Type	Required	Notes
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
status	"available" | "coming"		Roadmap label under the heading; omit when the feature exists
valueLine	string		One line of value copy under the animation. max length 200
description	string	yes	Text alternative of the whole animation for screen readers. max length 600
beats	array of objects	yes	Exactly three beats. min 3 items, max 3 items
beats[].title	string	yes	Beat title. max length 60
beats[].text	string	yes	One-line caption. max length 140
source	object	yes
source.file	string	yes	Source file name. max length 60
source.heading	string		Heading line of the source. max length 80
source.context	string		An unchanged line. max length 120
source.lead	string	yes	Text of the edited line before the value. max length 80
source.before	string	yes	Old value. max length 24
source.after	string	yes	New value. max length 24
source.added	string	yes	A new line typed after the edit. max length 120
lesson	object	yes
lesson.title	string	yes	Lesson title. max length 80
lesson.lead	string	yes	Lesson sentence before the value. max length 120
lesson.citation	string	yes	Citation chip of the sentence. max length 40
lesson.question	string	yes	Quiz question. max length 160
lesson.questionCite	string	yes	Citation chip of the question. max length 40
proposal	object	yes
proposal.title	string	yes	Proposal card title. max length 80
proposal.approve	string	yes	Approve button. max length 24
proposal.done	string	yes	Badge after approval. max length 60
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Your course updates itself when your sources change
Edit a doc or merge to a repo. ulams finds every lesson and question that cites it and proposes the update. You approve, and learners keep their progress.
An animated example in three steps. First, a line in docs/slo.md changes from 99.9 % to 99.95 % and a new line about the 30-day budget is added. Second, ulams finds the lesson paragraph and the quiz question that cite docs/slo.md section 2. Third, a proposal with a red and green diff appears, the author clicks Approve, the lesson text updates and a badge confirms that learner progress was kept.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "beats": [
    {
      "title": "Only one beat",
      "text": "x"
    }
  ]
}

Issues:

• /description is required
• /source is required
• /lesson is required
• /proposal is required
• /beats fewer than 3 items

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 15 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.