Components: one tag, a whole layout

A card is a box with a fill, padding, a bold heading in the primary color and some smaller text. Writing that out for every card on every slide is long, and each copy is a chance for the model to change something. So we write it once, give it a name, and let the model use the name.

<Card title="Labor">
  Hard to hire.
</Card>

<box fill="$surface" padding="20" gap="10">
  <text fontSize="$body" bold="true"
        color="$primary">Labor</text>
  <text grow="1" fontSize="$small">
    Hard to hire.
  </text>
</box>

A component

A component has a name, a list of props, and a template: ordinary SlideML with {placeholders}.

const Tag = defineComponent({
  name: "Tag",
  props: { label: { required: true, description: "One or two words" } },
  template: `<box fill="$surface" padding="8"><text bold="true">{label}</text></box>`,
});

Expanding

• interpolate(text, props) replaces every {name} with the prop's value, or an empty string.
• expandComponent(node, component) checks required props, then copies the template with props filled into every text and every attribute.
• expandAll(tree, registry) (written for you) walks the whole tree and expands every component it finds. A template can use other components, so it keeps going until only built-in elements are left.