Provides Phoenix LiveView components for rendering and interacting with Jigsaw layouts.

The components act as the presentation layer for the Jigsaw BSP layout engine. A Bsp.Layout describes the structure of the layout, while the components transform that structure into a hierarchy of HTML elements containing user-provided Phoenix slots.

A Jigsaw layout can be rendered by providing a Bsp.Layout and defining a slot for each pane:

  <JigsawComponents.Components.layout jigsaw_layout={@jigsaw_layout}>
    <:pane id="terminal">
      <MyApp.Terminal />
    </:pane>

    <:pane id="about">
      <MyApp.About />
    </:pane>

    <:pane id="stats">
      <MyApp.Stats />
    </:pane>
  </JigsawComponents.Components.layout>

The id of each :pane slot corresponds to the ID of a Bsp.Pane in the layout. Jigsaw uses this ID to associate the supplied content with its corresponding pane.

Pane slots

The :pane slot accepts the following attributes:

id — identifies the pane and must correspond to a pane in the Bsp.Layout. focused — indicates whether the pane is currently focused. Default should be false.

The component does not require the content of a pane to be a particular type of component. Any valid HEEx content can be placed inside a pane.

The component does not own the layout itself. Layout manipulation should be performed through the Bsp.Layout API.