Layout.js

// ============================================================================
// Layout.js - the layout primitives (rows, columns, stretch, width, scroll)
// ============================================================================
//
// The arrangement tier: how content sits, never what it is. Built from the Dom.Tag DSL
// and the stylesheet.org layout classes. Containers space children with a gap; a single
// "stretch" soaks up the rest. Each function declares its inputs with Reactive.Argument;
// `content` is a builder callback run inside the container element.
//
//   Layout.Row(content) / Column(content) / Stretch(content) / Scrollable(content)
//   Layout.Width(pixels, content)   a fixed-width cell (inline style)
// ----------------------------------------------------------------------------

Reactive.Module("Layout", () => {

  // Row - horizontal line; spacing is the container's gap. Renders: <div class="row">.
  Reactive.Function("Row", () => {
    const content = Reactive.Argument(Reactive.Callback());
    Dom.Tag("div", () => {
      Dom.Attribute("class", "row");
      content();
    });
  });

  // Column - vertical stack. Renders: <div class="column">.
  Reactive.Function("Column", () => {
    const content = Reactive.Argument(Reactive.Callback());
    Dom.Tag("div", () => {
      Dom.Attribute("class", "column");
      content();
    });
  });

  // Stretch - fill the remaining space in the enclosing row/column (or an empty spacer).
  // Renders: <div class="stretch">.
  Reactive.Function("Stretch", () => {
    const content = Reactive.Argument(Reactive.Callback());
    Dom.Tag("div", () => {
      Dom.Attribute("class", "stretch");
      content();
    });
  });

  // Width - a fixed-width cell, sized with an inline style. Renders: <div style="width:NNpx">.
  Reactive.Function("Width", () => {
    const pixels = Reactive.Argument(Maths.Integer);
    const content = Reactive.Argument(Reactive.Callback());
    const style = "width:" + pixels + "px";
    Dom.Tag("div", () => {
      Dom.Attribute("style", style);
      content();
    });
  });

  // Scrollable - a region that scrolls when its content overflows. Renders: <div class="scrollable">.
  Reactive.Function("Scrollable", () => {
    const content = Reactive.Argument(Reactive.Callback());
    Dom.Tag("div", () => {
      Dom.Attribute("class", "scrollable");
      content();
    });
  });

});