TrackBox

const · packages/primitives/src/dom/track-box.ts:63

const TrackBox: Mount.MountDefinitionWithArgs<
  'TrackBox',
  { name: Schema.String; radius: Schema.optional<Schema.Boolean> },
  {
    readonly _tag: 'TrackedTarget'
    readonly target: string
    readonly found: boolean
  }
>

Follows another element's box, as a Mount: the element whose id is the mounted element's data-target (TRACK_TARGET_ATTRIBUTE). Its box in viewport pixels is written on the mounted element as --fk-<name>-x, -y, -w and -h, and with radius, its top left corner's radius as --fk-<name>-radius (cornerRadius), so a fixed overlay drawn from them (a tour's cutout, a coach mark's ring) sits over it. While nothing is followed they are removed, so a stylist's fallbacks apply.

The box is read again on a scroll anywhere (heard on the way down, since scroll does not bubble), a window resize, the followed element's own resize, and any change to the document's elements, which is also how a target drawn anew under the same id is found. data-target is read again whenever it changes, so one element can glide from target to target without being drawn again, which a Mount's args, read once, could not do. What moves the target by any other way (a stylesheet added) is seen at the next of these.

Whether a target is on the page is the parent's to act on (a tour shows the step in the middle instead), so each change of the target or of whether it is found sends TrackedTarget, starting with the first one. Since it sends a Message, a component may draw it by default: a Scene test resolves it with what the parent maps it to. An empty data-target follows nothing and sends nothing.