// A reusable component. Route: none — mounted inside a page with
// <div data-component="counter" ...props></div>.
//
// Components are rendered on the SERVER (with their props applied) and hydrated
// in the browser by the generic reactive runtime — they ship no JS of their own.
component Counter {
  // Props are passed as attributes on the mount element. Each is coerced to the
  // type of its default value (so `start="5"` arrives as the number 5).
  props {
    start = 0
    label = "Count"
  }

  // State can reference props. `count` seeds the reactive scope.
  state count = start

  view {
    <button @click="count++">{label}: {count}</button>
  }
}