Put studio chrome over a map

The studio's segment and waypoint lists, beside the map they name. With no bus on the provider every action is inert, which is the honest shape for a read-only page.

import { MapView, MountayaElementsProvider } from "@mountaya/elements-react";
import { createUiStore } from "@mountaya/studio";
import { ReadOnlySegmentList } from "@mountaya/studio-react";
import type { ReadOnlySegmentListProps } from "@mountaya/studio-react";
import { StudioProvider } from "@mountaya/studio-react/headless";
import { useState } from "react";

export const Chrome = ({ segments }: Pick<ReadOnlySegmentListProps, "segments">) => {
  const [store] = useState(createUiStore);

  return (
    <MountayaElementsProvider client={client} map={map}>
      <StudioProvider data={{ store }}>
        <div style={{ height: 300, position: "relative" }}>
          <MapView
            center={[6.87, 45.85]}
            client={client}
            onReady={setMap}
            terrain="topo"
            zoom={12}
          />
        </div>
        <ReadOnlySegmentList itineraryId={itineraryId} label="Segments" segments={segments} />
      </StudioProvider>
    </MountayaElementsProvider>
  );
};

segments is the itinerary's own list, as useItinerary(itineraryId) from @mountaya/client-react answers it in data.segments.

StudioProvider requires a store and nothing else, because there is an empty answer for permission and none for state.

Next steps

Assemble a full studio

The same surfaces with a bus behind them.

Studio chrome

Every surface, and what each one dispatches.