Artifact panel

Children render straight into the body as React content, which scrolls under a header that stays put. Content brings its own padding, so a dashboard can sit inset and a full-bleed page can run to the edge. The expand toggle appears when onExpandedChange is given and the close button when onClose is given. Both only report intent: the panel never sizes or removes itself. Here the page grows the frame on expand and swaps in a button on close.

Pass html and the body draws the document in a sandboxed frame with an origin of its own, so it has no reach into the host page. Add code and the header gains a Preview and Code switch. The panel keeps the chosen view itself unless the host passes view and onViewChange. A src URL is framed the same way, for a page that is already deployed.

With code and no preview there is nothing to switch between, so the switch is left out and the body shows the source. The language prop labels the code view.

type Route = {
  name: string;
  distanceKm: number;
  walkers: number;
};

const routes: Route[] = [
  { name: "Heron Loop", distanceKm: 9, walkers: 64 },
  { name: "Quarry Rise", distanceKm: 12, walkers: 48 },
  { name: "Mill Lane", distanceKm: 6, walkers: 37 },
];

export function busiestRoute(list: Route[] = routes): Route {
  return list.reduce((top, route) =>
    route.walkers > top.walkers ? route : top,
  );
}

The actions slot seats extra controls ahead of the expand and close buttons: a download, a share, a version menu. Tertiary Circular buttons match the two the panel draws itself. When the row runs short the meta line gives way first, then the title truncates, and the controls keep their place.