pipe(
  of(curry2(Math.pow)),
  ap(spinButton({ initial: 2, label: "Base" })),
  ap(spinButton({ initial: 4, label: "Exponent" }))
)

pipe(
  of(curry2((color: "red" | "blue", props: SpecializedShapeProps) => makeShape({ color, ...props }))),
  ap(comboBox({ initial: "blue" as const, options: ["red", "blue"] as const, label: "Color" })),
  ap(
    pipe(
      comboBox({ initial: "circle" as const, options: ["circle", "rectangle"] as const, label: "Shape" }),
      chain(
        match({
          circle: pipe(
            slider({ initial: 25, min: 0, max: 50, label: "Radius" }),
            map(radius => ({ type: "circle" as const, radius }))
          ),
          rectangle: pipe(
            of(curry2((width: number, height: number) => ({ type: "rectangle" as const, width, height }))),
            ap(slider({ initial: 50, min: 0, max: 100, label: "Width" })),
            ap(slider({ initial: 25, min: 0, max: 100, label: "Height" }))
          )
        })
      )
    )
  )
)

pipe(
  resizableList({
    item: spinButton({ initial: 1 }),
    initial: [1, 2, 3].map(initial => spinButton({ initial })),
    minLength: 1
  }),
  map((xs: number[]) => `${xs.join(" + ")} = ${xs.reduce((acc, x) => acc + x, 0)}`)  
)