
markup.push({

PanView: {
    "+": "GroupView",
    gxLayout: [
        "H:|-12-[pan]-12-|",
        "V:|-30-[pan]-16-|",

        "V:[leftLabel]-(-1)-[pan]&alignLeft",
        "V:[panReadout]-(-1)-[pan]&alignCenterX",
        "V:[rightLabel]-(-1)-[pan]&alignRight",
    ],
    gxChildViews: {
        pan: {
            "+": "SliderView.trackUnfilled",
            gxValueKey: "nodeModel.pan",
            gxRangeMin: -1,
            gxRangeMax: 1,
            gxDetents: "0",
            gxKeystrokeStepSize: 0.01,
            axTitle: "Pan",
            axFormatter: "PercentFormatter",
            axHelp: "Negative % is Left, Positive is Right",
        },
        leftLabel: labelView("L", "size12"),
        rightLabel: labelView("R", "right.size12"), // "Right", right aligned
        balanceReadout: {
            "+": "ReadoutView.centerx",
            gxIntrinsicWidth: 100,
            gxValueKey: "nodeModel.pan",
            gxFormatter: "LeftRightFormatter.fullWords"
        }
    }
},

PanPopover: {
    "+": "PopoverTemplate",
    gxTitle: "Pan",
    gxLayout: [
        "H:|-12-[self(284)]-12-|",    // sets popover width
        "V:|-12-[self]-12-|",
        "V:|-41-[settingsContainer]-8-[presetsGroup]",
        "H:|-0-[settingsContainer]-0-|",
   ],
    gxChildViews: {
        title: "PopoverTitle",
        switch: "PopoverOnOffSwitch",
        presetsGroup: presetsGroup(),
        settingsContainer: {
            nsClass: "GXDrawView"
        }
    }
}

})
